nx-sk 0.8.2 → 0.9.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 本文件格式参考 [Keep a Changelog](https://keepachangelog.com/)，中文正文。
 
+## [0.9.1] - 2026-10-15
+
+### Fixed
+
+- **设置页保存无效：面板发的 body 键被静默丢掉**。HTTP body 经 `applySpec` 只保留**声明过的** args/flags（有意严格，防止多余字段流进 service），而设置页发的是平铺的 `{exportDir: …}` / `{navGroups: …}` → 全被丢掉 → service 收到空 patch，只报一句“至少要给一项：setting set --key …”（根因离现场很远）。改为走声明过的 `set`（HTTP 形态 `{set: {k: v}}`，`spec.js` 本来就写着）。**面板「默认行为」卡的保存此前同样是坏的**，一并修好。
+- **分组下拉鼠标下滑就消失**：pill 与菜单之间那 4px 空隙被鼠标穿过时判成“离开”，菜单刚展开就消失——补一块透明桥盖住空隙，并在离开后延迟 140ms 再关（斜着从 pill 划到菜单行也不闪）。
+- 面板文案里两处 markdown 的 `**` 直接显示了出来（JSX 不渲染 markdown）——改为 `<b>` / 纯文本。
+
+### Added
+
+- **一致性断言：视图写请求的 body 键必须在 action 里声明过**（含反证：喂一段未声明键的合成代码，断言规则确实判红）。扫全部模块 view，把“发了未声明的键 → 静默丢掉 → 下游报一个离根因很远的错”这类问题钉死在测试里。
+
+## [0.9.0] - 2026-10-15
+
+### Added
+
+- **头部导航分组：设置里自己配，栏目收拢 + 悬浮展开**。栏目越建越多时，头部一排 pill 一眼分不出主次——现在可以在**设置页**（或 CLI）把同域栏目归成一组（如 项目经历 / 实习工作经历 / 校内职务实践 / 学校信息 / 申请相关 →「求职」），头部只显示**一个分组入口**（带成员条目数汇总），**悬浮展开上下列表**选具体栏目（点击行切换、当前栏目加粗；外点 / Esc 关闭；触屏点 pill 也能开）。
+  - 配置存在 `settings.navGroups`（`{title, sections[]}` 数组，**数组顺序 = 头部显示顺序**）；缺省空数组 = 全部栏目平铺（老 store 读一次自动补默认，无需迁移）。
+  - 校验严格且明确：形状不对 / 栏目不存在 / 一个栏目进两个组 / 缺组名 / 空组 —— 都报 `INVALID_INPUT` 并说清是哪一组哪一项（栏目写**标题**也认，统一归一到 id）。
+  - 分组只是**显示配置**：不动栏目与条目数据；组内栏目被删掉时头部优雅略过（配置保留）。CLI：`nx-sk setting set --set 'navGroups=[…]'`，清空即恢复平铺。
+  - 未分组的栏目与系统工具（附件 / 导出与备份 / 设置）照旧平铺，顺序不变。
+
 ## [0.8.2] - 2026-10-15
 
 ### Fixed

package/README.md

@@ -198,6 +198,17 @@ nx-sk file get $FID                             # 反查「被引用：求职 /
 > 若你的求职栏目是很早建的，跑一次 `nx-sk section sync job`（或面板「栏目 → 编辑 → 同步模板字段」）
 > 就能把模板新增的「附件资料」组与 4 个 `file` 字段补进来，且不改动你已有的字段与数据。
 
+**头部导航分组**（栏目多了以后收拢头部，一眼分得出主次）：在设置里把同域栏目归成一组，
+头部只显示组名，**悬浮展开上下列表**选具体栏目；不归组的栏目保持平铺。
+
+```bash
+# 面板：设置 → 头部导航分组（勾选栏目 / 改名 / 排序 / 增删组），保存后头部立即生效
+nx-sk setting set --set 'navGroups=[{"title":"求职","sections":["projects","internships","campus"]}]'
+nx-sk setting set --set 'navGroups=[]'   # 清空 = 全部栏目恢复平铺
+```
+
+分组只是**显示配置**（存在 `settings.navGroups`）：不动栏目与条目的数据，删掉栏目时头部自动略过。
+
 整体导出（凭据默认**含明文**——本机自己用；要分享给别人时加 `--no-secrets` 打码）：
 
 ```bash
@@ -267,7 +278,7 @@ nx-sk skill get nx-sk 10-sections-entries   # 裸名 → references/10-sections-
 ## 开发
 
 ```bash
-pnpm test        # = lint + build + 冒烟（104 项断言） + 单测（132 项）
+pnpm test        # = lint + build + 冒烟（109 项断言） + 单测（140 项）
 ```
 
 | 目录 | 职责 |

package/assets/nx-sk/SKILL.md

@@ -99,6 +99,14 @@ nx-sk file get f_bbb                              # 反查「被引用：求职
 所以模板**后来**新增的字段不会自动出现在已建好的栏目里。用 `nx-sk section sync <栏目>`（可先 `--dry-run`）
 把模板新增的分组与字段补进来（只增不改不删）；面板侧是「栏目 → 编辑 → 同步模板字段」。
 
+栏目建得多了，可以在**设置里归组**收拢头部（同域栏目一个入口，悬浮展开上下列表；
+纯**显示配置**，不动栏目与条目数据）：
+
+```bash
+nx-sk setting set --set 'navGroups=[{"title":"求职","sections":["projects","internships"]}]'
+nx-sk setting set --set 'navGroups=[]'   # 清空 = 全部栏目恢复平铺
+```
+
 ## ref 路由表（按需加载）
 
 | ref | 何时读取 |

package/assets/nx-sk/references/10-sections-entries.md

@@ -17,6 +17,8 @@ store.json（~/nx-sk/store.json 或 $NX_SK_STORE）
 - 一个**栏目** = 一组同构条目 + 一份字段字典（**固定的结构**）。
 - 一个**条目** = 一行数据，值放在 `values` 里，键是字段 `key`；写台账里没有的键会**自动登记**
   （见第五节）——**登记过的键面板才渲染得出来**，没登记的值在界面上看不见。
+- **头部分组是显示配置**：`settings.navGroups`（`[{title, sections:[栏目id…]}]`，设置页可配）只决定
+  头部怎么摆——同域栏目可收拢成一个分组入口（悬浮展开上下列表）；**不动**栏目与条目的任何数据。
 - 定位方式都放宽：栏目与条目**都接受 id 或名字**。条目名重名时报 `CONFLICT` 让你改用 id。
 
 ## 二、栏目命令（集合资源，五操作齐备）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-sk",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "description": "nx-sk · 本机个人资源管理器（server-cli-web 骨架）：栏目化存储个人信息与大模型密钥，CLI 与 Web 同源，敏感字段密文落盘。",
   "type": "module",
   "bin": {

package/src/core/store.js

@@ -21,6 +21,9 @@ export function defaultSettings() {
     exportFormat: 'both', // json | md | both
     includeSecretsInExport: true, // 默认含明文：本机单人工具，自己看不拦自己
     defaultSection: 'job',
+    // 头部导航分组：[{ title, sections: [栏目 id…] }]，数组顺序 = 显示顺序。
+    // 缺省空数组 = 全部栏目平铺（保持老行为）；栏目建得多了再在设置页收拢。
+    navGroups: [],
   };
 }
 

package/src/modules/sections/view.jsx

@@ -273,7 +273,7 @@ function EditForm({ modal, onChange, onSave, onSync, onAddField, onRemoveField,
       </div>
       {full?.template ? (
         <div className="hint">
-          本栏目由模板「{full.template}」创建。模板后来新增的字段**不会自动**出现在这里，
+          本栏目由模板「{full.template}」创建。模板后来新增的字段<b>不会自动</b>出现在这里，
           点「同步模板字段」补齐（例如求职模板新增的「附件资料」组 / 简历、头像等 file 字段）。
         </div>
       ) : null}

package/src/modules/settings/service.js

@@ -1,15 +1,17 @@
 // settings 是**基础模块**：允许被其它模块单向只读依赖（见 eslint 互依禁列——它故意不在里面）。
 // 设置的唯一读写入口在这里，别绕过去直接改 store.settings。
 import { loadStore, mutateStore, snapshotStore } from '../../core/store.js';
+import { findSection } from '../../core/fields.js';
 import { badInput, notFound } from '../../core/errors.js';
 
-export const SETTING_KEYS = ['exportDir', 'exportFormat', 'includeSecretsInExport', 'defaultSection'];
+export const SETTING_KEYS = ['exportDir', 'exportFormat', 'includeSecretsInExport', 'defaultSection', 'navGroups'];
 
 const SCHEMA = {
   exportDir: { type: 'string', hint: '导出目录，留空 = ~/nx-sk/export' },
   exportFormat: { type: 'string', enum: ['json', 'md', 'both'], hint: '整体导出默认格式' },
   includeSecretsInExport: { type: 'boolean', hint: '整体导出是否默认带密钥明文（默认否）' },
   defaultSection: { type: 'string', hint: '默认栏目 id' },
+  navGroups: { type: 'json', hint: '头部导航分组：[{title, sections:[栏目id…]}]，数组顺序 = 显示顺序' },
 };
 
 export function settingsSchema() {
@@ -21,9 +23,54 @@ export async function getSettings() {
   return { settings: store.settings, schema: settingsSchema() };
 }
 
-function coerceSetting(key, value) {
+/**
+ * 头部导航分组（`settings.navGroups`）的形状校验 + 归一。
+ *
+ * 分组是**显示配置**，写坏了头部就少一块，所以这里不静默丢任何东西：
+ * 栏目不存在 / 一个栏目进了两个组 / 空组 —— 一律报错并说清是哪一组哪一项。
+ * 归一：栏目可以写 id 也可以写标题（统一存成真实 id）；组内去重保序。
+ */
+function coerceNavGroups(value, store) {
+  let arr = value;
+  if (typeof value === 'string') {
+    try {
+      arr = JSON.parse(value);
+    } catch (e) {
+      throw badInput(`navGroups 需要 JSON 数组（${e.message}）：[{"title":"求职","sections":["projects",…]}, …]`);
+    }
+  }
+  if (!Array.isArray(arr)) {
+    throw badInput('navGroups 需要是数组：[{"title":"求职","sections":["projects",…]}, …]');
+  }
+  const owner = new Map();
+  return arr.map((g, i) => {
+    if (!g || typeof g !== 'object') throw badInput(`第 ${i + 1} 个分组不是对象`);
+    const title = String(g.title ?? '').trim();
+    if (!title) throw badInput(`第 ${i + 1} 个分组缺少 title（组名）`);
+    const sections = [];
+    const inGroup = new Set();
+    for (const raw of (Array.isArray(g.sections) ? g.sections : [])) {
+      const ref = String(raw ?? '').trim();
+      if (!ref) continue;
+      const sec = findSection(store, ref);
+      if (!sec) throw badInput(`分组「${title}」里的栏目不存在: ${ref}`);
+      if (inGroup.has(sec.id)) continue; // 同组里 id / 标题混着写同一个栏目 → 去重
+      if (owner.has(sec.id)) {
+        throw badInput(`栏目 ${sec.id} 同时在分组「${owner.get(sec.id)}」与「${title}」里——一个栏目只能属于一个分组`);
+      }
+      inGroup.add(sec.id);
+      owner.set(sec.id, title);
+      sections.push(sec.id);
+    }
+    if (!sections.length) throw badInput(`分组「${title}」没有任何栏目——要么勾一个，要么删掉这个分组`);
+    return { title, sections };
+  });
+}
+
+function coerceSetting(key, value, store) {
   const s = SCHEMA[key];
   if (!s) throw notFound(`未知设置项: ${key}（可用: ${SETTING_KEYS.join(', ')}）`);
+  if (s.type === 'json') return coerceNavGroups(value, store);
   if (s.type === 'boolean') {
     if (typeof value === 'boolean') return value;
     const v = String(value).trim().toLowerCase();
@@ -45,8 +92,10 @@ export async function updateSettings({ set, key, value, 'dry-run': dryRun } = {}
   const keys = Object.keys(patch);
   if (!keys.length) throw badInput('至少要给一项：setting set --key <名> --value <值>，或 --set k=v（可重复）');
 
+  // 校验要拿 store 做参照（navGroups 里的栏目 id 必须真实存在）
+  const store = await loadStore();
   const resolved = {};
-  for (const k of keys) resolved[k] = coerceSetting(k, patch[k]);
+  for (const k of keys) resolved[k] = coerceSetting(k, patch[k], store);
 
   if (dryRun) return { status: 'skipped', dryRun: true, wouldSet: resolved };
 
@@ -63,7 +112,11 @@ export function renderSettings(data) {
   const lines = ['当前设置（改：nx-sk setting set --key <名> --value <值>）'];
   for (const s of data.schema) {
     const v = data.settings[s.key];
-    const shown = s.type === 'boolean' ? (v ? '是' : '否') : (v === '' ? '（空）' : String(v));
+    const shown = s.type === 'boolean' ? (v ? '是' : '否')
+      : (v === '' || v === undefined ? '（空）'
+        : (v && typeof v === 'object'
+          ? (() => { const j = JSON.stringify(v); return j.length > 56 ? `${j.slice(0, 56)}…` : j; })()
+          : String(v)));
     lines.push(`  ${s.key.padEnd(22)} ${shown.padEnd(10)} ${s.hint}`);
   }
   return lines.join('\n');

package/src/modules/settings/view.jsx

@@ -7,6 +7,7 @@ export default function SettingsView() {
   const { boot, reload, toast, guard } = useStore();
   const [data, setData] = useState(null);
   const [form, setForm] = useState(null);
+  const [groups, setGroups] = useState([]);
   // 面板地址不写死：直接取用户此刻访问的这个 origin，换端口/换 host 都自动跟上
   const panelUrl = typeof window === 'undefined' ? '' : window.location.origin;
   const panelPort = typeof window === 'undefined' ? '' : (window.location.port || '80');
@@ -16,6 +17,7 @@ export default function SettingsView() {
       const d = await api('/api/settings');
       setData(d);
       setForm({ ...d.settings });
+      setGroups((d.settings.navGroups || []).map((g) => ({ title: g.title, sections: [...g.sections] })));
     } catch (e) {
       toast(e.message, 'bad');
     }
@@ -24,11 +26,16 @@ export default function SettingsView() {
   useEffect(() => { load(); }, [load]);
 
   const save = guard(async () => {
+    // 必须包在 `set` 里发：HTTP 的 body 会经 applySpec **只保留声明过的键**，
+    // 平铺的 `{exportDir: …}` 会被静默丢掉 → service 收到空 patch 报「至少要给一项」。
+    // `set` 是 setting.set 声明过的 kv flag，HTTP 形态就是 `{set: {k: v}}`。
     const body = {
-      exportDir: form.exportDir,
-      exportFormat: form.exportFormat,
-      includeSecretsInExport: !!form.includeSecretsInExport,
-      defaultSection: form.defaultSection,
+      set: {
+        exportDir: form.exportDir,
+        exportFormat: form.exportFormat,
+        includeSecretsInExport: !!form.includeSecretsInExport,
+        defaultSection: form.defaultSection,
+      },
     };
     const r = await api('/api/settings', { method: 'PATCH', body });
     toast('设置已保存');
@@ -36,6 +43,35 @@ export default function SettingsView() {
     await reload();
   });
 
+  // 头部导航分组：组顺序 = 头部显示顺序；一个栏目只能属于一个组（别组已勾的置灰）
+  const patchGroup = (gi, patch) => setGroups((gs) => gs.map((g, i) => (i === gi ? { ...g, ...patch } : g)));
+
+  const toggleMember = (gi, sid) => setGroups((gs) => gs.map((g, i) => {
+    if (i !== gi) return g;
+    const has = g.sections.includes(sid);
+    return { ...g, sections: has ? g.sections.filter((x) => x !== sid) : [...g.sections, sid] };
+  }));
+
+  const moveGroup = (gi, delta) => setGroups((gs) => {
+    const to = gi + delta;
+    if (to < 0 || to >= gs.length) return gs;
+    const next = [...gs];
+    [next[gi], next[to]] = [next[to], next[gi]];
+    return next;
+  });
+
+  const saveGroups = guard(async () => {
+    const naked = groups.find((g) => !String(g.title).trim());
+    if (naked) { toast('每个分组都要有组名', 'bad'); return; }
+    const empty = groups.find((g) => !g.sections.length);
+    if (empty) { toast(`分组「${empty.title}」还没有勾选栏目——要么勾一个，要么删掉这个分组`, 'bad'); return; }
+    const r = await api('/api/settings', { method: 'PATCH', body: { set: { navGroups: groups } } });
+    toast(groups.length ? `已保存 ${groups.length} 个导航分组` : '已取消分组，栏目恢复平铺');
+    setData({ ...data, settings: r.set });
+    setGroups((r.set.navGroups || []).map((g) => ({ title: g.title, sections: [...g.sections] })));
+    await reload();
+  });
+
   if (!data || !form) return <div className="pad muted">加载中…</div>;
 
   return (
@@ -92,6 +128,53 @@ export default function SettingsView() {
         </div>
       </div>
 
+      <div className="card">
+        <div className="colhead">
+          头部导航分组
+          <span className="right muted">{groups.length ? `${groups.length} 个分组` : '未分组（全部平铺）'}</span>
+        </div>
+        <div className="pad stack">
+          <div className="hint">
+            把同域栏目收拢成一个头部入口：头部只显示组名，悬浮展开上下列表选具体栏目。
+            不勾进任何分组的栏目保持平铺；组顺序 = 头部显示顺序；一个栏目只能属于一个分组。
+          </div>
+          {groups.map((g, gi) => (
+            <div className="stack" key={gi} style={{ borderTop: gi ? 'var(--border)' : 0, paddingTop: gi ? 8 : 0 }}>
+              <div className="rowgap">
+                <input
+                  value={g.title}
+                  placeholder="组名，如「求职」"
+                  onChange={(e) => patchGroup(gi, { title: e.target.value })}
+                  style={{ minWidth: 160 }}
+                />
+                <button className="btn small ghost" disabled={gi === 0} onClick={() => moveGroup(gi, -1)}>上移</button>
+                <button className="btn small ghost" disabled={gi === groups.length - 1} onClick={() => moveGroup(gi, 1)}>下移</button>
+                <button className="btn small ghost" onClick={() => setGroups((gs) => gs.filter((_, i) => i !== gi))}>删除组</button>
+                <span className="muted">已选 {g.sections.length} 个栏目</span>
+              </div>
+              <div className="rowgap">
+                {(boot?.sections || []).map((s) => {
+                  const checked = g.sections.includes(s.id);
+                  const elsewhere = groups.some((o, oi) => oi !== gi && o.sections.includes(s.id));
+                  return (
+                    <label className="inline" key={s.id} title={elsewhere ? '已归入其它分组' : ''}>
+                      <input type="checkbox" checked={checked} disabled={elsewhere} onChange={() => toggleMember(gi, s.id)} />
+                      <span className={elsewhere ? 'muted' : ''}>{s.title}<span className="count"> {s.entries}</span></span>
+                    </label>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+          {!groups.length ? <div className="muted">还没有分组——所有栏目都平铺在头部。</div> : null}
+          <div className="rowgap">
+            <button className="btn" onClick={saveGroups}>保存分组</button>
+            <button className="btn small ghost" onClick={() => setGroups((gs) => [...gs, { title: '', sections: [] }])}>新增分组</button>
+            {groups.length ? <button className="btn small ghost" onClick={() => setGroups([])}>清空（恢复平铺）</button> : null}
+          </div>
+        </div>
+      </div>
+
       <div className="card">
         <div className="colhead">默认行为</div>
         <div className="pad">

package/src/web/frontend/App.jsx

@@ -1,4 +1,4 @@
-import { Fragment, Suspense, useEffect, useMemo } from 'react';
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import { SECTION_VIEW, VIEWS } from './registry.js';
 import { Copyable, DialogHost, ErrorBoundary, Toasts } from './components/ui.jsx';
 import { useStore } from './store.jsx';
@@ -17,26 +17,35 @@ export default function App() {
   const { boot, bootError, ui, patchUi, reload } = useStore();
   const view = LEGACY_VIEW[ui.view] || ui.view;
 
-  // 栏目 tab 是**数据驱动**的（来自 bootstrap.sections），静态 tab 来自前端注册表。
-  // 两者的 id 可能撞车时静态 tab 不参与第一优先级的排序——栏目 order 是 10/20，静态是 500+。
-  const tabs = useMemo(() => {
-    const dyn = (boot?.sections || []).map((s) => ({
+  // 栏目 tab 是**数据驱动**的（bootstrap.sections）；分组来自 settings.navGroups（设置页可配）；
+  // 静态 tab 来自前端注册表。渲染顺序：未分组栏目（按 order）→ 分组（按配置顺序）→ 工具（按 order）。
+  const nav = useMemo(() => {
+    const sections = (boot?.sections || []).map((s) => ({
       id: s.id, title: s.title, order: s.order, kind: 'section', count: s.entries,
     }));
-    const stat = VIEWS.filter((v) => v.tab !== false).map((v) => ({
-      id: v.id, title: v.title, order: v.order, kind: 'view', component: v.component,
-    }));
-    const seen = new Set();
-    return [...dyn, ...stat]
-      .sort((a, b) => (a.order ?? 50) - (b.order ?? 50))
-      .filter((t) => (seen.has(t.id) ? false : (seen.add(t.id), true)));
+    // 分组是**显示配置**：成员栏目被删掉时优雅降级（过滤掉、配置保留），成员全没了就不显示这个组
+    const groups = (boot?.settings?.navGroups || [])
+      .map((g) => ({
+        title: g.title,
+        sections: (g.sections || [])
+          .map((sid) => sections.find((s) => s.id === sid))
+          .filter(Boolean),
+      }))
+      .filter((g) => g.sections.length);
+    const grouped = new Set(groups.flatMap((g) => g.sections.map((s) => s.id)));
+    const flat = sections.filter((s) => !grouped.has(s.id)).sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
+    const stat = VIEWS.filter((v) => v.tab !== false)
+      .map((v) => ({ id: v.id, title: v.title, order: v.order, kind: 'view', component: v.component }))
+      .filter((v) => !sections.some((s) => s.id === v.id))
+      .sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
+    return { flat, groups, tools: stat, all: [...flat, ...groups.flatMap((g) => g.sections), ...stat] };
   }, [boot]);
 
-  // 没 boot 之前**不要**拿 tabs[0] 兜底：那时动态栏目还没到，tabs 里只有静态视图，
+  // 没 boot 之前**不要**拿第一个 tab 兜底：那时动态栏目还没到，nav 里只有静态视图，
   // 兜底会选中第一个静态视图并由下面的 effect 写进 ui —— 于是「默认视图 = 求职」被顶掉、
-  // 头部高亮也错位成「栏目」，连 `#/job` 这类深链都会被首屏覆盖。
+  // 头部高亮也错位，连 `#/job` 这类深链都会被首屏覆盖。
   const booted = !!boot;
-  const current = tabs.find((t) => t.id === view) || (booted ? tabs[0] : null) || null;
+  const current = nav.all.find((t) => t.id === view) || (booted ? nav.all[0] : null) || null;
 
   // hash 与 localStorage 双写对齐：只在挂载时对齐一次，之后交给 hashchange
   useEffect(() => {
@@ -84,19 +93,26 @@ export default function App() {
         </span>
       </header>
 
-      {/* 导航栏：内容（栏目）在前、工具（栏目/附件/导出/…）在后，中间加一道细线分组，
-          否则十几个同级 pill 连成一排，看不出「哪些是自己的数据、哪些是系统功能」。 */}
+      {/* 导航栏：内容（栏目）与工具（附件/导出/设置/…）之间加一道细线分组。
+          同域栏目可以在**设置页**收拢成一个分组入口（settings.navGroups）——
+          悬浮或点击展开上下列表，栏目一多也不会连成一排分不出主次。 */}
       <nav className="tabs">
-        {tabs.map((t, i) => (
-          <Fragment key={t.id}>
-            {i > 0 && tabs[i - 1].kind !== t.kind ? <span className="tabs-sep" aria-hidden /> : null}
-            <button className={`tab ${t.id === current?.id ? 'active' : ''}`} onClick={() => go(t.id)}>
-              {t.title}
-              {typeof t.count === 'number' ? <span className="count">{t.count}</span> : null}
-            </button>
-          </Fragment>
+        {nav.flat.map((t) => (
+          <button key={t.id} className={`tab ${t.id === current?.id ? 'active' : ''}`} onClick={() => go(t.id)}>
+            {t.title}
+            {typeof t.count === 'number' ? <span className="count">{t.count}</span> : null}
+          </button>
+        ))}
+        {nav.groups.map((g) => (
+          <GroupTab key={g.title} group={g} currentId={view} onGo={go} />
+        ))}
+        {nav.tools.length ? <span className="tabs-sep" aria-hidden /> : null}
+        {nav.tools.map((t) => (
+          <button key={t.id} className={`tab ${t.id === current?.id ? 'active' : ''}`} onClick={() => go(t.id)}>
+            {t.title}
+          </button>
         ))}
-        {!tabs.length ? <span className="muted">正在装载…</span> : null}
+        {!nav.all.length ? <span className="muted">正在装载…</span> : null}
       </nav>
 
       <main className="body">
@@ -130,3 +146,67 @@ function SectionPane({ sectionId }) {
   const View = SECTION_VIEW;
   return <View sectionId={sectionId} />;
 }
+
+/**
+ * 头部的一个**分组入口**：一个 pill 收拢多个栏目（同域栏目不再挤成一排）。
+ * 悬浮展开、点击也能开（触屏没有 hover）；点行切换栏目。
+ * 外点关闭用 `pointerdown`——`click` 与触发按钮自己的 onClick 同阶段冒泡，
+ * 会「点一下关了又弹开」；受控组件而非纯 CSS hover，是为了能用键盘 Esc 关。
+ */
+function GroupTab({ group, currentId, onGo }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  // 离开时**延迟**再关：鼠标斜着从 pill 划到菜单行会短暂出界，立刻关就「刚展开就消失」
+  const closeTimer = useRef(null);
+  const active = group.sections.some((s) => s.id === currentId);
+  const total = group.sections.reduce((n, s) => n + (s.count || 0), 0);
+
+  const cancelClose = () => {
+    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
+  };
+  const openNow = () => { cancelClose(); setOpen(true); };
+  const closeSoon = () => { cancelClose(); closeTimer.current = setTimeout(() => setOpen(false), 140); };
+  useEffect(() => cancelClose, []);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('pointerdown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <span
+      className="tab-group"
+      ref={ref}
+      onMouseEnter={openNow}
+      onMouseLeave={closeSoon}
+    >
+      <button className={`tab ${active ? 'active' : ''}`} aria-expanded={open} onClick={openNow}>
+        {group.title}
+        <span className="count">{total}</span>
+        <span className="caret" aria-hidden />
+      </button>
+      {open ? (
+        <div className="tab-menu" role="menu">
+          {group.sections.map((s) => (
+            <button
+              key={s.id}
+              role="menuitem"
+              className={`tab-menu-row ${s.id === currentId ? 'current' : ''}`}
+              onClick={() => { cancelClose(); setOpen(false); onGo(s.id); }}
+            >
+              <span className="grow nowrap">{s.title}</span>
+              {typeof s.count === 'number' ? <span className="count">{s.count}</span> : null}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </span>
+  );
+}

package/src/web/frontend/styles.css

@@ -96,6 +96,42 @@ nav.tabs {
 /* 分组细线：内容栏目 ‖ 系统工具 */
 .tabs-sep { width: 1px; height: 18px; background: var(--soft-2); margin: 0 4px; }
 
+/* ── 分组入口：一个 pill 收拢多个栏目（同域栏目不再挤成一排） ── */
+.tab-group { position: relative; display: inline-flex; }
+/* 展开指示用 CSS 三角，不引字符/图标 */
+.tab-group .caret {
+  width: 0; height: 0; margin-left: 1px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid var(--mid);
+}
+.tab-group .tab.active .caret { border-top-color: var(--ink); }
+/* 上下列表：与面板同一套立体语言（单层 relief，别叠成岛屿） */
+.tab-menu {
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
+  min-width: 172px; padding: 4px;
+  display: flex; flex-direction: column; gap: 2px;
+  background: var(--paper);
+  border: var(--border);
+  border-radius: var(--radius-btn);
+  box-shadow: var(--shadow-relief);
+}
+/* 桥：盖住 pill 与菜单之间那几像素的「死区」——鼠标下滑穿过它时不能被判成离开，
+   否则菜单刚探出头就消失（hover 菜单的经典坑） */
+.tab-menu::before {
+  content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px;
+}
+.tab-menu-row {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  height: var(--row-h); padding: 0 8px;
+  border: 0; border-radius: 6px; background: none;
+  color: var(--ink); font: inherit; font-size: var(--fs-core);
+  text-align: left; cursor: pointer;
+}
+.tab-menu-row:hover { background: var(--soft); }
+.tab-menu-row.current { font-weight: 600; }
+.tab-menu-row .count { color: var(--mid); font-size: 10px; font-variant-numeric: tabular-nums; }
+
 main.body { flex: 1; min-height: 0; overflow: auto; }
 
 /* ── tab：单层立体阴影，别叠 --shadow，叠两层就变岛屿 ── */

package/src/web/public/assets/{files-CHheSoYs.js → files-DiyZRSVm.js}

@@ -1 +1 @@
-import{a as l}from"./index-LbNmGlYj.js";let r=null;function o(n=!1){return!n&&r||(r=l("/api/files").then(e=>e).catch(e=>{throw r=null,e})),r}function i(){return r=null,o(!0)}function u(n){return new Promise((e,a)=>{const t=new FileReader;t.onload=()=>e(t.result),t.onerror=()=>a(new Error("读取文件失败")),t.readAsDataURL(n)})}export{u as f,o as l,i as r};
+import{a as l}from"./index-BcT34EVd.js";let r=null;function o(n=!1){return!n&&r||(r=l("/api/files").then(e=>e).catch(e=>{throw r=null,e})),r}function i(){return r=null,o(!0)}function u(n){return new Promise((e,a)=>{const t=new FileReader;t.onload=()=>e(t.result),t.onerror=()=>a(new Error("读取文件失败")),t.readAsDataURL(n)})}export{u as f,o as l,i as r};