diff --git a/client/electron/src/components/MailView.tsx b/client/electron/src/components/MailView.tsx index 2c2e786..0105c39 100644 --- a/client/electron/src/components/MailView.tsx +++ b/client/electron/src/components/MailView.tsx @@ -373,7 +373,7 @@ function ForwardBar({ mail, onClose }: { mail: Mail; onClose: () => void }) { }; return ( -
回复 {target}
diff --git a/client/electron/src/index.css b/client/electron/src/index.css index 3218ef1..5262d69 100644 --- a/client/electron/src/index.css +++ b/client/electron/src/index.css @@ -869,12 +869,20 @@ html[data-bg='on'] .app-shell > * { box-shadow: 0 8px 28px rgb(0 0 0 / 0.16); } -/* 导航栏(含窄屏底部导航):不透明 + 不参与模糊 */ +/* + * 导航栏改**深色玻璃**(2026-09-14 用户:「导航栏不也应该改为玻璃样式吗,为什么还是黑色」)。 + * + * 这条规则原本是"完全不透明 + 不参与模糊" —— 那是更早一轮的要求(当时面板太透, + * 壁纸从导航里透出来显得脏)。现在整套语言已经统一到玻璃,导航继续做一块实心黑 + * 就成了全页唯一的例外,也就是用户说的"割裂"。 + * + * 用深色玻璃而不是白色玻璃:白字压在深色上才有对比度。α=0.72 + blur(18px)。 + */ 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; + background-color: rgb(var(--c-chrome-900) / 0.72); + backdrop-filter: blur(18px) saturate(1.4); + -webkit-backdrop-filter: blur(18px) saturate(1.4); } @@ -1049,7 +1057,16 @@ html.view-switch .glass-control, * * 这条规则对所有子页面一视同仁(收件/发件/授权/联系人),避免只修好一个。 */ +/* + * 内层面板自己也要圆角。 + * + * 之前圆角只加在外壳(.app-shell > * 与 .narrow-shell > *)上,靠 overflow:hidden 裁掉 + * 内层直角 —— 但那个 overflow 会杀掉滚动(见上),必须去掉。于是内层白底面板的 + * **直角从圆角外壳里戳出来**,看起来就是"大面积的非圆角元素"。 + * 把圆角直接给内层面板,两边就对齐了,而且不依赖裁剪 ⇒ 与滚动不冲突。 + */ .comm-pane > *:not([data-testid='comm-tabs']) { + border-radius: var(--radius-card); /* * 既要能压缩(min-height:0),也要**填满**这一列(flex:1 1 0%): * 子面板(如 MailList 的根)原本写着 `shrink-0` —— 那是给"行"方向布局写的, @@ -1059,3 +1076,14 @@ html.view-switch .glass-control, flex: 1 1 0%; min-height: 0; } + + +/* + * 桌面侧栏:无论有没有壁纸都做深色玻璃 —— 否则它是全页唯一一块实心黑。 + * α=0.82 比壁纸模式的 0.72 实一点:此时它后面是页面底色而不是照片,太透只会显脏。 + */ +.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); +} diff --git a/client/electron/test/background.test.mjs b/client/electron/test/background.test.mjs index 8e82ff5..f998b93 100644 --- a/client/electron/test/background.test.mjs +++ b/client/electron/test/background.test.mjs @@ -223,10 +223,26 @@ check('新组件未使用未映射色族', unmapped.length === 0, unmapped.join( // 用户 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); + /* + * ★ 导航栏:从"不透明"改成"深色玻璃"(2026-09-14 用户:「导航栏不也应该改为玻璃样式吗, + * 为什么还是黑色」)。 + * + * 这两条判据原本断言的是**相反**的东西(不透明 + 不模糊),是更早一轮的要求 + * (当时面板太透、壁纸从导航透出来显得脏)。要求反转后旧判据必须一起改 —— + * 留着它只会让下一次改动"要么违规、要么把缺陷写回去"。 + * + * 现在的契约:**深色玻璃**(白字要对比度,所以不用白色玻璃), + * α 落在 [0.6, 0.9]:太透读不清,太实就退回那块黑 slab。 + */ + const navAlpha = Number( + (css.match(/html\[data-bg='on'\] \.bg-chrome-900,[\s\S]{0,200}?rgb\(var\(--c-chrome-900\) \/ ([\d.]+)\)/) || [])[1] + ); + const navGlass = /html\[data-bg='on'\] \.bg-chrome-900,[\s\S]{0,240}backdrop-filter: blur\(/.test(css); + check('导航栏是深色玻璃(α 在 0.6–0.9,读得清又不挡壁纸)', + Number.isFinite(navAlpha) && navAlpha >= 0.6 && navAlpha <= 0.9, `α=${navAlpha}`); + check('导航栏参与模糊(玻璃的必要条件)', navGlass); + check('内层面板自带圆角(不靠裁剪,否则与滚动冲突)', + /\.comm-pane > \*:not\(\[data-testid='comm-tabs'\]\) \{[\s\S]{0,80}border-radius: var\(--radius-card\)/.test(css)); /* * ★ 浮动面板几何必须**无条件**生效(2026-09-14 用户:「通信页面大面积缺失圆角与 * 玻璃效果,所有有内容与无内容区域都是硬截断」)。