perf(less-computer-glow): 隐藏时卸载全屏发光层，消除空闲 GPU 占用#675
Conversation
issue #470：彩虹描边 glow 是全屏 transparent 浮层 + 4 条无限动画（lcg-spin/breathe/ spin-reverse/flow）。原组件无状态无监听，窗口 .hide() 后 webview 仍持续合成发光层、 跑满 4 条动画，GPU 永不释放（Windows 尤其不释放）。 改为后端 show/hide 主动 emit `less-computer-glow:active` 驱动可见状态（不依赖在隐藏 窗口上失灵的 WebView2 visibilitychange）：可见时渲染与原来完全一致的 DOM（视觉零变化）， 不可见时返回 null 卸载发光层 → 零 GPU。另加 document.hidden 二级兜底（只停不启）。 注：glow 当前为 macOS-only（Windows show/hide 是 no-op），本修复消除 macOS 隐藏态泄漏， 并让组件具备跨平台「隐藏即零 GPU」安全性，为后续 Windows 重启用铺路。
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
|
Claude finished @appergb's task in 2m 23s —— View job 审查 PR #675：彩虹描边 glow 隐藏时释放 GPU待办事项
总体评价实现思路正确，核心设计扎实。5 个审查维度均通过，有 1 个轻微边界情况和 1 个可选改进建议，不阻塞合并。 1. 显示时视觉零变化 ✅
return (
<div className="lcg-root" aria-hidden>
<span className="lcg-flow" />
<span className="lcg-edge" />
</div>
);
2. 后端事件可靠性 ✅show 路径（ let _ = window.emit("less-computer-glow:active", true); // 先 emit
// ...
let _ = app.run_on_main_thread(move || {
// orderFrontRegardless 让窗口真正上屏
});emit(true) 先于 hide 路径（ let _ = window.emit("less-computer-glow:active", false); // 先通知前端
let _ = window.hide(); // 再隐藏macOS WebKit 在
3. null 卸载彻底性 ✅
4. Listener/visibilitychange 清理无泄漏 ✅cleanup 函数（ return () => {
cancelled = true; // ① import 还未完成 → 阻止进入 listen()
unlisten?.(); // ② listen 已完成且 un 已存 → 直接退订
document.removeEventListener('visibilitychange', onVisibility);
};关键边界情形：import 已完成、 .then((un) => {
if (cancelled) un(); // ③ 组件已卸载 → 立即退订，不存 unlisten
else unlisten = un;
});路径 ① ② ③ 三重兜底，任一时序下均无泄漏。✓ visibilitychange 兜底只停不启（ 5. 首次显示无竞态 ✅const [active, setActive] = useState(true); // 默认可见组件挂载后立即渲染发光层，无需等待 Tauri event listener 注册完成。即使后端 轻微边界情况（不阻塞，可记录）hide 时 emit 与 hide 的并发窗口： 风险极低，macOS WebKit 在窗口隐藏后仍处理 JS 队列，可接受。若追求更强保证，可考虑在 hide 路径加短暂延迟后再调 可选改进（建议，非必须）
结论批准合并。 改动覆盖了所有边界情况，没有引入新的资源泄漏，显示时与原组件视觉完全一致。 |
1 participant
User description
源自 #470。彩虹描边 glow 是全屏 transparent 浮层 + 4 条无限动画。原组件无状态无监听，窗口
.hide()后 webview 仍持续合成发光层、跑满 4 条动画，GPU 永不释放（Windows 尤其不释放）。改动：后端
show/hide_less_computer_glow主动 emitless-computer-glow:active（不依赖在隐藏窗口上失灵的 WebView2 visibilitychange）；前端可见时渲染与原来完全一致的 DOM（视觉零变化），不可见时返回null卸载发光层 → 零 GPU。另加document.hidden二级兜底（只停不启）。显示时视觉零变化。glow 当前 macOS-only，本修复消除 macOS 隐藏态泄漏并让组件具备跨平台「隐藏即零 GPU」安全性。
验证：
cargo check+npm run build通过。PR Type
Bug fix, Enhancement
Description
后端 show/hide 主动 emit
less-computer-glow:active事件前端根据事件驱动可见状态，隐藏时返回 null 卸载发光层
二级兜底：document.hidden 时停掉动画（只停不启）
Diagram Walkthrough
File Walkthrough
lib.rs
后端 emit 事件驱动发光层可见状态openless-all/app/src-tauri/src/lib.rs
show_less_computer_glow中 emitless-computer-glow:active(true)hide_less_computer_glow中 emitless-computer-glow:active(false)，先通知前端再隐藏窗口LessComputerGlow.tsx
前端根据事件卸载发光层释放 GPUopenless-all/app/src/pages/LessComputerGlow.tsx
useState和useEffect管理 active 状态less-computer-glow:active事件，不可见时组件返回 null 卸载发光层document.hidden时主动停掉动画