fix(webui): 底部导航选中态只换颜色（去掉背景块与顶部指示条）

用户：「同时底部导航栏选中对应的文字和图标变色即可」。

- NarrowNav：删掉 bg-blue-400 顶部指示条
- index.css：.narrow-nav .nav-item[data-active='true'] 背景置 transparent——
  只作用在底部导航；宽屏侧栏是 48px 竖条、没有文字标签，那块底色是它唯一的选中线索
- 图标本就是 stroke=currentColor，所以跟着文字色走（判据钉住这一点）
- 判据 nav-merge ④ + 变异自检：把 bg-blue-400 加回去，④ 立刻红

client/electron/src/components/NarrowNav.tsx

@@ -97,7 +97,14 @@ export default function NarrowNav() {
                 {badge > 99 ? '99+' : badge}
               </span>
             )}
-            {active && <span className="absolute top-0 left-1/4 right-1/4 h-0.5 bg-blue-400" />}
+            {/*
+             * 选中态**只换颜色**（用户 2026-09-14：「底部导航栏选中对应的文字和图标变色即可」）。
+             * 这里原本还挂着一条 bg-blue-400 的顶部指示条，加上 .nav-item 的
+             * nav-active-bg 底色，选中同时被三种手段表达；底部只有 51px 高，
+             * 多出来的形状只会把图标和标签挤小。现在只有一处：文字/图标变色
+             * （图标是 currentColor 描边，跟着走），样式见 index.css 的
+             * `.narrow-nav .nav-item[data-active='true']`。
+             */}
           </button>
         );
       })}

client/electron/src/index.css

@@ -1327,6 +1327,22 @@ html.view-switch .glass-control,
   color: rgb(var(--nav-active-fg));
 }
 
+/*
+ * 底部导航的选中态**只换颜色**。
+ *
+ * 用户（2026-09-14）：「同时底部导航栏选中对应的文字和图标变色即可」。
+ * 之前底部这一栏的选中同时被三样东西表达：`--nav-active-bg` 底色、一条
+ * `bg-blue-400` 顶部指示条、以及颜色。底部条只有 51px 高，多出来的两个"形状"
+ * 只是把图标与文字挤小。
+ *
+ * 只作用在 `.narrow-nav` 上：宽屏侧栏是 48px 宽的竖条，图标底下那一块底色是它
+ * 唯一的选中线索（窄屏还有文字标签与当前页面对应，宽屏没有可参照的文字），
+ * 所以"只变色"不能无差别推广到所有 `.nav-item`。
+ */
+.narrow-nav .nav-item[data-active='true'] {
+  background-color: transparent;
+}
+
 /* 底部导航条：与侧栏同一套令牌（深色主题才变深） */
 .narrow-nav {
   background-color: rgb(var(--nav-bg)) !important;

client/electron/test/nav-merge.test.mjs

@@ -124,4 +124,43 @@ test('★ 判据自检：拿重构前的写法喂进来必须判红', () => {
   assert.ok(oldSidebar.includes("'授权请求'"), '旧写法能被本判据的"必须消失"条款命中');
   const oldChip = "'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'";
   assert.ok(!/glass-control/.test(oldChip), '旧胶囊写法不含 glass-control ⇒ 会判红');
+  // ④ 的两半都验：旧写法（顶部指示条 + 背景高亮）必须被拦下
+  const oldNavItem =
+    "{active && <span className=\"absolute top-0 left-1/4 right-1/4 h-0.5 bg-blue-400\" />}";
+  assert.ok(/bg-blue-400/.test(oldNavItem), '旧写法能被"不得有顶部指示条"这条命中');
+  const oldActiveRule = ".nav-item[data-active='true'] { background-color: rgb(var(--nav-active-bg)); }";
+  assert.ok(
+    !/\.narrow-nav \.nav-item\[data-active='true'\][^}]*background-color:\s*transparent/.test(oldActiveRule),
+    '旧写法（选中态带背景）不含"transparent"⇒ 会判红'
+  );
+});
+
+test('④ 底部导航选中态只换颜色（不靠背景块、不靠顶部指示条）', () => {
+  /*
+   * 用户（2026-09-14）：「同时底部导航栏选中对应的文字和图标变色即可」。
+   *
+   * 这条判据的三半各自防一个曾经真出现过的写法：
+   *   ① 顶部指示条 —— 底部条只有 51px 高，多一条形状就挤图标；
+   *   ② `--nav-active-bg` 底色 —— 那是侧栏的线索，窄屏用不上；
+   *   ③ 图标不跟 currentColor —— 那只改了文字色，图标还是灰的，
+   *      看上去像"选中了一半"。所以图标必须钉 stroke="currentColor"。
+   */
+  assert.ok(!/bg-blue-400/.test(narrow), 'NarrowNav 里仍有选中态顶部指示条');
+  assert.match(
+    css,
+    /\.narrow-nav \.nav-item\[data-active='true'\][^{]*\{\s*background-color:\s*transparent/,
+    '底部导航的选中态没把背景高亮关掉'
+  );
+  assert.match(
+    css,
+    /\.nav-item\[data-active='true'\][^{]*\{[^}]*color:\s*rgb\(var\(--nav-active-fg\)\)/,
+    '选中态必须换文字颜色（否则连唯一的线索也没了）'
+  );
+  // 只变色的规则必须限定在底部导航内：侧栏没有文字标签，全靠背景块
+  assert.ok(
+    !/^\.nav-item\[data-active='true'\][^{]*\{[^}]*transparent/m.test(css),
+    '不得把"选中态无背景"推广到全部 .nav-item（桌面侧栏会失去选中线索）'
+  );
+  const icons = read('components', 'icons.tsx');
+  assert.match(icons, /stroke="currentColor"/, '图标不跟 currentColor ⇒ 改了文字色图标也不会变色');
 });