From bb3a6ee57798f1373f4b63e94d69509297d87aae Mon Sep 17 00:00:00 2001 From: Syngnat Date: Sun, 26 Jul 2026 21:18:27 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(about):=20=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=E5=BC=80=E5=85=B3=E4=B8=8E=E6=9B=B4=E6=96=B0=E9=80=9A?= =?UTF-8?q?=E9=81=93=E9=80=89=E6=8B=A9=E5=99=A8=E7=9A=84=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E8=89=B2=E4=B8=80=E8=87=B4=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复 v2 深色下「自动检查更新」开关显示为琥珀色：旧版 UI 的 body[data-theme='dark'] .ant-switch.ant-switch-checked 用了两个类，特异性高于 v2-theme.css 的 .ant-switch-checked，即便 v2 样式后加载也会被压过。 给旧版规则加 :not([data-ui-version='v2']) 限定，让 v2 的 --gn-accent 生效 - 同一根因的 .ant-radio:hover 琥珀描边一并限定（v2 未覆盖该选择器，同样会泄漏） - 更新通道选择器改为主题色实心胶囊：原深色下选中态 rgba(30,41,59,.98) 与容器底 rgba(15,23,42,.55) 对比极低，选中状态几乎不可辨且未体现主题色。 选中项与切换滑块统一用 var(--gn-accent) + 白字，未选项透明底、hover 微亮， 并补充跟随主题色的键盘焦点环 - --gn-accent 仅在 v2 下定义，故新规则限定 v2 作用域，旧版 UI 保留原中性配色 未加测试：两处均为纯 CSS 视觉改动，jsdom 不加载外部样式表、无法断言计算样式； 且项目已立规约禁止新增读取源码文本的断言型测试（src/testPolicy.test.ts）。 已通过 tsc --noEmit 与 useAppUpdateManager/customThemeStore/v2ThemeModalConfirm/testPolicy 共 34 项测试。 --- frontend/src/App.css | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 877ddcc8..f7351021 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -337,11 +337,15 @@ body[data-theme='dark'] .ant-radio-checked .ant-radio-inner { } body[data-theme='dark'] .ant-radio-wrapper:hover .ant-radio-inner, -body[data-theme='dark'] .ant-radio:hover .ant-radio-inner { +/* 这两条是旧版 UI 的琥珀强调色，必须排除 v2： + v2 的强调色是绿色（v2-theme.css 的 --gn-accent 与 antd colorPrimary 均为绿）， + 而这里的选择器特异性更高（.ant-switch.ant-switch-checked 是两个类）， + 即便 v2-theme.css 后加载也会被这里压过，导致 v2 下的开关/单选显示成琥珀色。 */ +body[data-theme='dark']:not([data-ui-version='v2']) .ant-radio:hover .ant-radio-inner { border-color: #f6c453 !important; } -body[data-theme='dark'] .ant-switch.ant-switch-checked { +body[data-theme='dark']:not([data-ui-version='v2']) .ant-switch.ant-switch-checked { background: #d8a93b !important; } @@ -1879,6 +1883,37 @@ body[data-theme='dark'] .gonavi-about-update-channel .ant-segmented-item-selecte color: #f8fafc !important; } +/* ── 更新通道：选中项使用主题强调色实心胶囊 ────────────── + 原先深色下选中态是 rgba(30,41,59,.98)，与容器底 rgba(15,23,42,.55) 对比极低， + 选中状态几乎看不出来，且完全没有体现主题色。 + --gn-accent 仅在 v2 下定义，因此这里限定 v2 作用域；旧版 UI 保留其自身的中性配色。 + ant-segmented-thumb 是切换时的滑动块，必须与选中项同色，否则动画期间会闪回灰底。 */ +body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-selected, +body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-thumb { + background: var(--gn-accent) !important; + box-shadow: none !important; +} + +body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-selected .ant-segmented-item-label { + color: #ffffff !important; +} + +/* 未选项：透明底 + hover 时微亮，避免与选中胶囊争夺注意力。 */ +body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item:not(.ant-segmented-item-selected) { + background: transparent !important; +} + +body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item:not(.ant-segmented-item-selected):hover .ant-segmented-item-label { + color: var(--gn-fg-1) !important; +} + +/* 键盘可达性：Segmented 的焦点环也跟随主题色。 */ +body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-input:focus-visible + .ant-segmented-item-label { + outline: 2px solid var(--gn-accent) !important; + outline-offset: -2px; + border-radius: 4px; +} + /* ── Theme settings (v2 only): clean desktop settings ─── */ body .gonavi-theme-settings { --gn-settings-fg: #0f172a;