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