From d2904fc45de52295ff2c951c6b500ce3317fe99c Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Mon, 14 Sep 2026 09:07:49 +0800 Subject: [PATCH] =?UTF-8?q?style(webui):=20=E5=AF=BC=E8=88=AA=E6=A0=8F?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=AE=8C=E5=85=A8=E4=B8=8D=E9=80=8F=E6=98=8E?= =?UTF-8?q?=20+=20=E5=86=85=E5=AE=B9=E9=9D=A2=E6=9D=BF=E6=9B=B4=E9=80=9A?= =?UTF-8?q?=E9=80=8F=20+=20=E6=95=B4=E5=B1=8F=E6=B5=AE=E5=8A=A8=E5=9C=86?= =?UTF-8?q?=E8=A7=92=E7=8E=BB=E7=92=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户 2026-09-14 原话：「导航栏应当完全不透明……没有正文的位置过于不通透， 同时导航栏应当现代化一下，整个界面应当圆角化玻璃化」。 这三句是**两个方向**的要求，我上一轮正好把导航栏做反了（越改越透）： ## ① 导航栏：完全不透明（含窄屏底部导航） `chrome-800/900` 在背景模式下不再吃 alpha、也不参与模糊。它是**框架**， 不该跟着壁纸一起虚化。它与"内容要通透"是两个方向的要求，所以写成独立规则、 并在注释里点名 —— 合并成一条必然互相打架。 ## ② 内容面板：更通透 `--bg-glass` 0.62 → **0.45**（深色 0.66 → 0.5），嵌套层 0.3 → 0.22。 实测（纯红壁纸读绿通道）：邮件列表有效不透明度 115/255 ≈ **0.45**，正文区全透。 ## ③ 整屏浮动圆角玻璃 给宽屏外壳加了稳定钩子 `app-shell`，背景开启时：外壳 **padding/gap 10px** （面板之间露壁纸 —— 没有缝隙的"玻璃"看上去仍是一整块板）、顶层面板 **圆角 var(--radius-card)** + 投影。实测三栏：导航 60px/圆角14px/不透明、 列表 320px/圆角14px/0.45、正文 1020px/圆角14px/全透。 ## 判据 `test/background.test.mjs` 新增 5 条形态判据（导航不透明、导航不参与模糊、 `--bg-glass ≤ 0.55`、外壳留缝、顶层面板圆角），共 **28 条**。 前端 254 条 + 打包一致性全绿。 ## 过程中的三处自纠 1. **我的 App.tsx 编辑第一次根本没落盘**：那份 python 脚本第 18 行语法错误就整体 没执行，而我把"✓ 已加钩子"当成了成功 —— 后来 `.app-shell 存在: false` 才暴露。 教训：脚本报成功不等于目标文件变了，**改完要回读**。 2. **JSX 里把 `{/* … */}` 放在 `return (` 与根元素之间**是非法的 ⇒ 构建失败。 改为 JS 注释放在 `return` 之前。 3. ★ 这两次失败都是**新加的部署闸门先拦住的**（"前端 dist 比源码旧"）， 也就是上一轮刚补的那道门当天就发挥了作用 —— 换成以前，会再次静默部署旧界面。 ## 顺带清理 验收截图用的 2 封样例邮件已删、随之产生的空会话已归档；测试账号外观已重置。 --- client/electron/src/App.tsx | 4 +- client/electron/src/index.css | 48 +++++++++++++++++------- client/electron/test/background.test.mjs | 15 ++++++++ 3 files changed, 52 insertions(+), 15 deletions(-) diff --git a/client/electron/src/App.tsx b/client/electron/src/App.tsx index 6cad852..cf04c23 100644 --- a/client/electron/src/App.tsx +++ b/client/electron/src/App.tsx @@ -189,7 +189,9 @@ export default function App() { // ---- 宽屏：三栏并排 ---- return ( -
+ // app-shell：浮动面板布局的钩子。背景开启时外壳留缝 + 各面板圆角化， + // 壁纸从面板之间露出来（样式在 index.css 的 html[data-bg='on'] 段）。 +
{list} {main} diff --git a/client/electron/src/index.css b/client/electron/src/index.css index 944de83..b450ea7 100644 --- a/client/electron/src/index.css +++ b/client/electron/src/index.css @@ -228,7 +228,7 @@ --bg-dim: 12%; --bg-blur: 4px; /* 玻璃面板的不透明度：背景越花，面板需要越实才读得动。 */ - --bg-glass: 0.62; + --bg-glass: 0.45; /* * 嵌套面板那一层的不透明度。 * @@ -240,9 +240,11 @@ * 原则是「玻璃只该出现一次」：最外层负责遮罩与模糊，里面几层只留一点点 * 色调（保住正文对比度），第三层起直接透明（见下面 data-bg='on' 的规则）。 */ - --bg-glass-inner: 0.3; + --bg-glass-inner: 0.22; /* 面板的朦胧感（与壁纸自身的 --bg-blur 分开：那层给照片打底，这层给面板） */ --bg-blur-panel: 18px; + /* 浮动面板之间的缝隙：壁纸从缝隙里露出来，是圆角化玻璃化的关键 */ + --pane-gap: 10px; /* * ─── 尺寸与动效 ─── @@ -347,8 +349,8 @@ */ --bg-scrim: 0 0 0; /* 深色下面板要更实：背景亮部与深色卡片对比过强时，文字会显得发灰。 */ - --bg-glass: 0.66; - --bg-glass-inner: 0.34; + --bg-glass: 0.5; + --bg-glass-inner: 0.26; /* * 深色下的层次靠「边框亮于底」而不是阴影。 @@ -758,18 +760,36 @@ html[data-bg='on'] .hover\:bg-gray-100:hover { background-color: rgb(var(--c-gray-100) / var(--bg-glass)); } -html[data-bg='on'] .bg-chrome-900 { - /* 框架也放宽一点：它是外层玻璃，占屏面积大，太实会把壁纸挡掉一大块。 - 里面的面板由下面「.bg-chrome-* .bg-white」那条接管，不会再叠一次。 */ - background-color: rgb(var(--c-chrome-900) / 0.72); - backdrop-filter: blur(16px) saturate(1.2); - -webkit-backdrop-filter: blur(16px) saturate(1.2); +/* + * ★ 浮动面板布局（2026-09-14 用户要求：导航栏完全不透明、整个界面圆角化玻璃化）。 + * + * 三件事： + * ① 外壳留缝：面板之间露出壁纸 —— 没有缝隙的"玻璃"看上去仍是一整块板； + * ② 面板圆角：圆角 + 缝隙才是"浮动玻璃"的形状语言； + * ③ 导航栏**完全不透明**：它是框架，不该跟着壁纸一起虚化。 + * 这与内容面板要通透是**两个方向**的要求，别合并成一条规则。 + */ +html[data-bg='on'] .app-shell { + padding: var(--pane-gap); + gap: var(--pane-gap); } -html[data-bg='on'] .bg-chrome-800 { - background-color: rgb(var(--c-chrome-800) / 0.68); - backdrop-filter: blur(16px) saturate(1.2); - -webkit-backdrop-filter: blur(16px) saturate(1.2); + +html[data-bg='on'] .app-shell > * { + border-radius: var(--radius-card); + overflow: hidden; + box-shadow: 0 8px 28px rgb(0 0 0 / 0.16); } + +/* 导航栏（含窄屏底部导航）：不透明 + 不参与模糊 */ +html[data-bg='on'] .bg-chrome-900, +html[data-bg='on'] .app-shell > .bg-chrome-900 { + background-color: rgb(var(--c-chrome-900)); + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + + + /* * chrome-600/700 **刻意保持不透明**。 * diff --git a/client/electron/test/background.test.mjs b/client/electron/test/background.test.mjs index 1c7034b..fc494bc 100644 --- a/client/electron/test/background.test.mjs +++ b/client/electron/test/background.test.mjs @@ -201,5 +201,20 @@ check('新组件未使用未映射色族', unmapped.length === 0, unmapped.join( check('页面底没有被写进半透明清单', [...PAGE_BASE].every(b => !gen.includes(`.${b} {`))); check('清单不是空跑（至少扫到 10 个类）', used.size >= 10, `实际 ${used.size}`); + // 18) ★ 导航栏必须**完全不透明**、内容面板必须更通透、整体圆角玻璃化。 + // + // 用户 2026-09-14 原话：「导航栏应当完全不透明……没有正文的位置过于不通透， + // 同时导航栏应当现代化一下，整个界面应当圆角化玻璃化」。 + // 注意这是**两个方向**的要求：框架要实、内容要透 —— 写成一条规则就会互相打架。 + const opaqueNav = /html\[data-bg='on'\] \.bg-chrome-900,[\s\S]{0,160}background-color: rgb\(var\(--c-chrome-900\)\)/.test(css); + const navNoBlur = /html\[data-bg='on'\] \.app-shell > \.bg-chrome-900 \{[\s\S]{0,160}backdrop-filter: none/.test(css); + check('导航栏在背景模式下完全不透明', opaqueNav); + check('导航栏不再参与模糊', navNoBlur); + check('内容面板更通透（--bg-glass ≤ 0.55）', glass <= 0.55, `实际 ${glass}`); + check('外壳留缝（浮动面板布局）', + /html\[data-bg='on'\] \.app-shell \{[\s\S]{0,80}padding: var\(--pane-gap\)/.test(css)); + check('顶层面板圆角化', + /html\[data-bg='on'\] \.app-shell > \* \{[\s\S]{0,140}border-radius: var\(--radius-card\)/.test(css)); + console.log(`\n背景：${pass} 通过${fail ? `，${fail} 失败` : ''}`); process.exit(fail ? 1 : 0);