style(webui): 导航栏改为完全不透明 + 内容面板更通透 + 整屏浮动圆角玻璃
用户 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 封样例邮件已删、随之产生的空会话已归档；测试账号外观已重置。
This commit is contained in:
@ -189,7 +189,9 @@ export default function App() {
|
||||
|
||||
// ---- 宽屏：三栏并排 ----
|
||||
return (
|
||||
<div className="h-full flex bg-gray-50">
|
||||
// app-shell：浮动面板布局的钩子。背景开启时外壳留缝 + 各面板圆角化，
|
||||
// 壁纸从面板之间露出来（样式在 index.css 的 html[data-bg='on'] 段）。
|
||||
<div className="h-full flex bg-gray-50 app-shell">
|
||||
<Sidebar />
|
||||
{list}
|
||||
{main}
|
||||
|
||||
@ -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 **刻意保持不透明**。
|
||||
*
|
||||
|
||||
@ -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);
|
||||
|
||||
Reference in New Issue
Block a user