From 6e55e3059bbb2ff51023f207942fe26d3f512a6c Mon Sep 17 00:00:00 2001 From: TRIP <1933142963@qq.com> Date: Mon, 18 May 2026 18:57:43 +0800 Subject: [PATCH] =?UTF-8?q?fix(windows):=20capsule/qa=20=E9=80=8F=E6=98=8E?= =?UTF-8?q?=E7=AA=97=E5=8F=A3=20Acrylic=20=E5=85=9C=E5=BA=95=20(#487)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(windows): capsule/qa 透明窗口 acrylic 兜底 + CSS 可读性兜底 根因: tauri.conf.json 三个窗口都 transparent: true，但 lib.rs 只对 main 窗口调用 apply_mica。capsule / qa 在 Windows 上是裸 transparent， Webview2 的 backdrop-filter 只能模糊页面内部 DOM 不能模糊 OS 桌面， 导致用户看到的胶囊 / QA 浮窗几乎完全透出桌面壁纸。 macOS 上 NSVisualEffectView (HudWindow vibrancy) 直接由系统合成器 混合桌面，所以 macOS 不需要额外处理。 修复: 1. lib.rs 在 setup 时对 capsule / qa webview 调用 apply_acrylic( color=(30,32,38,140)) — 选 Acrylic 而非 Mica 因为 Acrylic 支持 Win10，更适合小浮窗。失败仅 log::warn 不 panic。 2. global.css 末尾追加 @supports not (backdrop-filter) 和 @media (prefers-reduced-transparency: reduce) 兜底，给 html/body 设实色背景。组件层 inline style 无法被覆盖，这只是二级防护。 Note: Capsule.tsx 和 FloatingShell.tsx 的 inline alpha 保留不动； Acrylic 兜底通常足够。如果 Win10 实测仍偏透（Mica 不支持 Win10）， 后续 PR 可考虑给 main 也加 Acrylic 作为 Mica fallback。 * style(windows): drop global html/body fallback rules from acrylic PR Local code review flagged that `html, body { background: ... }` applies to ALL windows including `main`, which would clobber the macOS NSVisualEffectView vibrancy in `prefers-reduced-transparency: reduce` mode. Re-analysis confirms both rules are speculative: - @supports never fires on modern Webview2 / WKWebView / Chromium (all support backdrop-filter) - prefers-reduced-transparency triggers OS-level vibrancy neutralization on macOS already, but the CSS rule would still wrongly land on main Acrylic in lib.rs is the canonical fix for the user-reported P0 (capsule/qa 透明遮罩看不清). The CSS layer is dropped to keep the PR scoped to a single concern and avoid the cross-window collateral. Refs review of #487 --------- Co-authored-by: baiqing --- openless-all/app/src-tauri/src/lib.rs | 23 +++++++++++++++++++++++ openless-all/app/src/styles/global.css | 1 + 2 files changed, 24 insertions(+) diff --git a/openless-all/app/src-tauri/src/lib.rs b/openless-all/app/src-tauri/src/lib.rs index b347239a..4cee867a 100644 --- a/openless-all/app/src-tauri/src/lib.rs +++ b/openless-all/app/src-tauri/src/lib.rs @@ -129,6 +129,19 @@ pub fn run() { if let Err(e) = position_capsule_bottom_center(&capsule, false) { log::warn!("[capsule] position failed: {e}"); } + // Windows 上 transparent:true 让窗口对桌面完全透明，Webview2 的 + // backdrop-filter 只能模糊 DOM 内部，模糊不到 OS 桌面 → 胶囊背景 + // 看起来就是「透到桌面」。这里给 Win10/Win11 都支持的 Acrylic 做兜底， + // 让 OS 提供毛玻璃材质，胶囊 rgba(255,255,255,0.85) 上面再叠 DOM 模糊。 + // 失败不阻塞（老 Win10 / Win7 上 Acrylic 不可用），仅 warn。 + #[cfg(target_os = "windows")] + { + use window_vibrancy::apply_acrylic; + // 中性偏冷的浅灰半透，与胶囊白底叠合后保持可读性。 + if let Err(e) = apply_acrylic(&capsule, Some((30, 32, 38, 140))) { + log::warn!("[capsule] acrylic failed: {e}"); + } + } let _ = capsule.hide(); } @@ -142,6 +155,16 @@ pub fn run() { } #[cfg(target_os = "macos")] make_qa_window_draggable_macos(&qa); + // 同 capsule：Windows 下 QA 浮窗也走 Acrylic 兜底。QA 面板自身 + // 已经把 alpha 拉到 0.97（QaPanel.tsx:623），主要是防止 0.03 缝隙 + // 透到桌面、以及 Win10 上完全无毛玻璃感的兜底。 + #[cfg(target_os = "windows")] + { + use window_vibrancy::apply_acrylic; + if let Err(e) = apply_acrylic(&qa, Some((30, 32, 38, 140))) { + log::warn!("[qa] acrylic failed: {e}"); + } + } let _ = qa.hide(); } else { log::info!("[qa] qa 窗口未在 tauri.conf.json 中声明，前端 agent 会补上"); diff --git a/openless-all/app/src/styles/global.css b/openless-all/app/src/styles/global.css index a30aef3c..8e05f420 100644 --- a/openless-all/app/src/styles/global.css +++ b/openless-all/app/src/styles/global.css @@ -108,3 +108,4 @@ a { color: inherit; text-decoration: none; } transform: translate3d(12px, 0, 0) scale(0.985); } } +