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);