From 88eea20746a7d6c43bc332c64baf9b924d819155 Mon Sep 17 00:00:00 2001 From: baiqing Date: Mon, 18 May 2026 18:31:19 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(windows):=20capsule/qa=20=E9=80=8F?= =?UTF-8?q?=E6=98=8E=E7=AA=97=E5=8F=A3=20acrylic=20=E5=85=9C=E5=BA=95=20+?= =?UTF-8?q?=20CSS=20=E5=8F=AF=E8=AF=BB=E6=80=A7=E5=85=9C=E5=BA=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 根因: 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。 --- openless-all/app/src-tauri/src/lib.rs | 23 +++++++++++++++++++++++ openless-all/app/src/styles/global.css | 20 ++++++++++++++++++++ 2 files changed, 43 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..8defa041 100644 --- a/openless-all/app/src/styles/global.css +++ b/openless-all/app/src/styles/global.css @@ -108,3 +108,23 @@ a { color: inherit; text-decoration: none; } transform: translate3d(12px, 0, 0) scale(0.985); } } + +/* P0 fallback: Windows / 旧浏览器没有 backdrop-filter 时，半透白底会直接 + 透到桌面（OS material 没接上 / 用户关了透明）。这里给依赖 backdrop 营造 + 可读性的 root 容器一个实色兜底。 + 注意：Capsule.tsx / FloatingShell.tsx 多数样式走 inline style，CSS 选择器 + 无法覆盖 inline；这层只是二级防护。一级防护是 Rust 侧 apply_acrylic。 */ +@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { + html, body { + background: var(--ol-surface, #f6f7fb); + } +} + +/* Win11「设置 → 颜色 → 透明效果关闭」、macOS Reduce Transparency 时， + 不应再让任何窗口背景保持半透状态。给 html/body 拉一层不透明底， + 配合上面的 inline-style 限制，至少桌面不会直接透过来。 */ +@media (prefers-reduced-transparency: reduce) { + html, body { + background: var(--ol-surface, #f6f7fb); + } +} From d357d68e92049da09b982a293f4025725e0b7391 Mon Sep 17 00:00:00 2001 From: baiqing Date: Mon, 18 May 2026 18:46:02 +0800 Subject: [PATCH 2/2] style(windows): drop global html/body fallback rules from acrylic PR MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- openless-all/app/src/styles/global.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/openless-all/app/src/styles/global.css b/openless-all/app/src/styles/global.css index 8defa041..8e05f420 100644 --- a/openless-all/app/src/styles/global.css +++ b/openless-all/app/src/styles/global.css @@ -109,22 +109,3 @@ a { color: inherit; text-decoration: none; } } } -/* P0 fallback: Windows / 旧浏览器没有 backdrop-filter 时，半透白底会直接 - 透到桌面（OS material 没接上 / 用户关了透明）。这里给依赖 backdrop 营造 - 可读性的 root 容器一个实色兜底。 - 注意：Capsule.tsx / FloatingShell.tsx 多数样式走 inline style，CSS 选择器 - 无法覆盖 inline；这层只是二级防护。一级防护是 Rust 侧 apply_acrylic。 */ -@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { - html, body { - background: var(--ol-surface, #f6f7fb); - } -} - -/* Win11「设置 → 颜色 → 透明效果关闭」、macOS Reduce Transparency 时， - 不应再让任何窗口背景保持半透状态。给 html/body 拉一层不透明底， - 配合上面的 inline-style 限制，至少桌面不会直接透过来。 */ -@media (prefers-reduced-transparency: reduce) { - html, body { - background: var(--ol-surface, #f6f7fb); - } -}