From fc4671e55cde75d60714f85ce3cc4e887eba0501 Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Mon, 14 Sep 2026 12:02:57 +0800 Subject: [PATCH] =?UTF-8?q?fix(webui):=20=E5=8E=BB=E6=8E=89=E5=8D=A1?= =?UTF-8?q?=E7=89=87/=E9=9D=A2=E6=9D=BF=E5=90=84=E8=87=AA=E7=9A=84?= =?UTF-8?q?=E6=A8=A1=E7=B3=8A=20=E2=80=94=E2=80=94=20=E6=A8=A1=E7=B3=8A?= =?UTF-8?q?=E5=8F=A0=E6=A8=A1=E7=B3=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「你又犯了模糊叠模糊的毛病，整体的模糊是由壁纸那一层模糊确定的， 而你在每一个卡片又打了固定的模糊底」。 ## 改动 浮在壁纸上的大面（列表栏、详情栏、卡片、侧栏）**不再各自 backdrop-filter**： - 它们背后只有**已经模糊过的壁纸** ⇒ 再模糊一次不会更"玻璃"，只会更脏更糊， 而且每层都要重新采样背景（滚动时明显掉帧）。 - `.bg-white` 接管、面板基线、侧栏基线、壁纸模式下的侧栏 —— 全部去掉 backdrop-filter。 - **模糊只留给真正悬浮在内容之上的层**：底部导航条（浮在滚动列表上）、 地址建议菜单（浮在表单上）。它们背后是会滚动的内容，模糊在那里才有遮蔽意义。 模糊声明从 9 处降到 4 处。实测（真浏览器，通信页）：**没有任何元素带 backdrop-filter** （`blurredCount = 0`）。 ## 同一轮还有 `test/manual/nav-contrast-verify.mjs` 4/4： 浅色 白玻璃+深字 **7.48:1**、深色 深玻璃+亮字 **6.96:1**（自动反色真的生效）、 两主题底色确实不同、以及反向对照"过渡中途读会拿到起点色"—— 这条正是我上一轮把深色模式误判成对比度不足（2.36）的原因。 --- client/electron/src/index.css | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/client/electron/src/index.css b/client/electron/src/index.css index 2dae3a9..4d09f7f 100644 --- a/client/electron/src/index.css +++ b/client/electron/src/index.css @@ -744,14 +744,12 @@ html[data-bg='on'] .bg-slate-100 { */ html[data-bg='on'] .glass-control { background-color: rgb(var(--c-white) / var(--bg-glass-control)); - backdrop-filter: blur(6px) saturate(1.1); - -webkit-backdrop-filter: blur(6px) saturate(1.1); + backdrop-filter: blur(8px) saturate(1.1); + -webkit-backdrop-filter: blur(8px) saturate(1.1); } html[data-bg='on'] .bg-white { background-color: rgb(var(--c-white) / var(--bg-glass)); - backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2); - -webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2); } /* @@ -841,10 +839,18 @@ html[data-bg='on'] .hover\:bg-gray-100:hover { } /* 基线朦胧：没开壁纸时也有一点玻璃感，而不是一块硬塑料 */ -.app-shell > *, +/* + * ★ 面板**不再各自打模糊**（2026-09-14 用户：「你又犯了模糊叠模糊的毛病， + * 整体的模糊是由壁纸那一层模糊确定的，而你在每一个卡片又打了固定的模糊底」）。 + * + * 浮在壁纸上的大面（列表栏/详情栏/卡片）背后只有**已经模糊过的壁纸**， + * 再 backdrop-filter 一次纯属叠加：不会更"玻璃"，只会更脏更糊，而且每层都要 + * 重新采样一次背景（滚动时明显掉帧）。 + * + * 模糊只留给**真正悬浮在内容之上**的层：底部导航条、地址建议菜单、弹层 —— + * 它们背后是会滚动的内容，模糊在那里才有信息遮蔽的意义。 + */ .narrow-shell > *:not(.narrow-nav) { - backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.05); - -webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.05); } /* 窄屏：内容面板同样浮起来（与底部导航那条悬浮玻璃一致） */ @@ -883,10 +889,8 @@ html[data-bg='on'] .app-shell > * { * （浅色主题=白玻璃、深色主题=深玻璃，见文件末尾的令牌块）。 * 原先这里写死深玻璃 —— 那正是用户说的"导航栏为什么还是黑色"。 */ -html[data-bg='on'] .nav-rail, -html[data-bg='on'] .narrow-nav { - backdrop-filter: blur(18px) saturate(1.4); - -webkit-backdrop-filter: blur(18px) saturate(1.4); +html[data-bg='on'] .nav-rail { + /* 侧栏浮在壁纸上：模糊由壁纸层负责，这里不叠 */ } @@ -1117,8 +1121,7 @@ html.view-switch .glass-control, */ .app-shell > .bg-chrome-900 { background-color: rgb(var(--c-chrome-900) / 0.82); - backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2); - -webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2); + /* 不留 backdrop-filter：它浮在（已模糊的）壁纸上，再模糊只是叠一层 */ }