nx-sk 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 本文件格式参考 [Keep a Changelog](https://keepachangelog.com/)，中文正文。
 
+## [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
+
+- **`file update --name` 改名不带扩展名时，物理文件丢扩展名**：磁盘上只剩 `身份证人像面-赵刘学`（无 `.jpg`），而台账 `ext` 字段还记着 `.jpg`——内联预览、系统默认程序打开、`backup --with-files` 还原出来的文件全部哑掉。现在 `relocateFile` 会在新名字没有扩展名时**自动接回原扩展名**；名字自带扩展名则原样保留（不重复追加）。
+- **历史连写的附件值解析不出来**：0.8.0 之前 `--set 头像图片=f_a,f_b` 会把两个 id **连成一个字符串**存进 values，`fileIdsOf` 此前不拆串内分隔符 → 面板显示「未解析」。现在 `fileIdsOf` / 前端 `toIds` 对字符串统一按 `,，、;；` 拆开——单值、数组、连写串三种历史形态都能归一（附件名里带逗号的极端情况请改用 id 关联）。
+
 ## [0.8.1] - 2026-10-15
 
 ### Added

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
@@ -221,7 +232,7 @@ nx-sk backup import --file ~/nx-sk/backup/xxx.nxskbak --password '你的备份
 导入完成给出完整报告。`--replace` 才整份替换（灾难恢复 / 跨机器迁移用）。
 两种方式都先自动留安全快照。
 
-Web 面板的「加密备份」页同样支持：导出在浏览器下载 `.nxskbak`（可勾选连附件一起打包），
+Web 面板的「导出与备份」页同样支持：导出在浏览器下载 `.nxskbak`（可勾选连附件一起打包），
 导入选择文件并输入口令、报告以弹窗呈现；口令错误或文件损坏会明确报错、不改动当前数据。
 
 ## 数据与安全
@@ -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/assets/nx-sk/references/30-export-backup.md

@@ -101,4 +101,4 @@ nx-sk backup import --file <备份>.nxskbak --password '口令' --replace  # 整
 - 两种方式都会**先自动留安全快照**（`…-before-import.json` / `…-before-restore.json`），可回滚。
 - 敏感字段在包内是明文（靠口令保护），导入时自动用**本机 vaultKey** 重新加密落盘——报告里的值一律打码，密钥明文不进报告。
 - 带 `--with-files` 的包导入时自动还原附件原件（sha256 校验；磁盘已有且内容不同则以磁盘为准）；v2 旧包可导入，但不含原件，报告会如实列出缺哪些文件。
-- 口令也可用环境变量 `NX_SK_BACKUP_PASSWORD` 提供；Web「加密备份」页提供同样能力（浏览器下载 / 选择文件导入；超大包建议走 CLI）。
+- 口令也可用环境变量 `NX_SK_BACKUP_PASSWORD` 提供；Web 面板「导出与备份」页提供同样能力（浏览器下载 / 选择文件导入；超大包建议走 CLI）。

package/package.json

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

package/src/core/attachments.js

@@ -130,8 +130,9 @@ export function normalizeFileRecord(raw) {
 /**
  * 一个 `file` 字段的值 → 附件 id 数组（**全仓库唯一的归一化入口**）。
  *
- * 字段可以挂**多个**附件：新写入统一存数组（哪怕只有一个）；历史数据里的单值是
- * 字符串，读的时候按「单元素列表」看待——所以这里两种情况都要吃。
+ * 字段可以挂**多个**附件：新写入统一存数组（哪怕只有一个）。要吃下三种历史形态：
+ * 单值字符串、id 数组、以及旧版把多个 id **连写成一个字符串**（`"f_a,f_b"`——
+ * 0.8.0 之前 `--set` 不拆逗号），所以字符串统一按分隔符拆开。
  * 去空、去重、保序：同一个附件在一个字段里出现两次没有意义。
  */
 export function fileIdsOf(value) {
@@ -140,9 +141,11 @@ export function fileIdsOf(value) {
     : (Array.isArray(value) ? value : [value]);
   const out = [];
   for (const x of raw) {
-    const s = String(x ?? '').trim();
-    if (!s || out.includes(s)) continue;
-    out.push(s);
+    for (const piece of String(x ?? '').split(/[,，、;；]+/)) {
+      const id = piece.trim();
+      if (!id || out.includes(id)) continue;
+      out.push(id);
+    }
   }
   return out;
 }
@@ -326,7 +329,13 @@ export async function importContent(store, opts = {}) {
  */
 export async function relocateFile(store, rec, { category, name }) {
   const cat = category || rec.category;
-  const fileName = safeFileName(name || rec.name);
+  // 改名时**不带扩展名**就把原扩展名接回去——否则物理文件丢掉 .jpg/.pdf，
+  // 一切按扩展名认类型的地方（内联预览 / Content-Type / 系统默认程序打开 /
+  // backup --with-files 还原后的文件）都会哑掉，而台账里的 ext 字段还骗人说没丢。
+  let wanted = name || rec.name;
+  const originalExt = rec.ext || extname(rec.name).toLowerCase();
+  if (name && originalExt && !extname(wanted)) wanted += originalExt;
+  const fileName = safeFileName(wanted);
   const same = cat === rec.category && fileName === rec.name;
   const rel = same ? rec.rel : uniqueRel(store, cat, fileName, rec.id);
   if (!same) {

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/backup/view.jsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import { api } from '../../web/frontend/api/client.js';
 import { useStore } from '../../web/frontend/store.jsx';
-import { CliHints, Empty, Modal } from '../../web/frontend/components/ui.jsx';
+import { Empty, Modal } from '../../web/frontend/components/ui.jsx';
 
 // Web 上传走 JSON 文本体，接口上限 32MB——留出余量在前端先拦，
 // 超限建议走 CLI（命令行没有请求体上限）。
@@ -93,7 +93,9 @@ function ReplaceReport({ r }) {
   );
 }
 
-export default function BackupView() {
+// 备份半页：由「导出与备份」合并页（export 模块的 view.jsx）组合渲染，
+// 所以不带页面头与 CLI 提示（CliHints 在合并页统一出一条）。tab: false，不单独出现在导航。
+export default function BackupPanel() {
   const { toast, guard, dialog, reload } = useStore();
   const [pw, setPw] = useState('');
   const [pw2, setPw2] = useState('');
@@ -177,13 +179,8 @@ export default function BackupView() {
 
   return (
     <>
-      <div className="toolbar rowgap pad">
-        <strong>加密备份</strong>
-        <span className="muted">整份数据用口令对称加密（AES-256-GCM）；导出设口令、恢复输口令，口令不落盘</span>
-      </div>
-
       <div className="card">
-        <div className="colhead">加密导出</div>
+        <div className="colhead">加密备份（口令 .nxskbak）</div>
         <div className="pad stack">
           <div className="grid">
             <div className="field">
@@ -211,7 +208,7 @@ export default function BackupView() {
       </div>
 
       <div className="card">
-        <div className="colhead">解密导入</div>
+        <div className="colhead">解密导入（.nxskbak）</div>
         <div className="pad stack">
           <div className="grid">
             <div className="field">
@@ -241,8 +238,6 @@ export default function BackupView() {
         </div>
       </div>
 
-      <CliHints module="backup" />
-
       {result ? (
         <Modal
           title={result.mode === 'replace' ? '导入完成（整份替换）' : '导入完成（合并）'}

package/src/modules/export/view.jsx

@@ -2,7 +2,11 @@ import { useCallback, useEffect, useState } from 'react';
 import { api } from '../../web/frontend/api/client.js';
 import { useStore } from '../../web/frontend/store.jsx';
 import { CliHints, Copyable, Empty, Modal, Tag } from '../../web/frontend/components/ui.jsx';
+import BackupPanel from '../backup/view.jsx';
 
+// 「导出与备份」合并页：明文导出（带走可读文件）与口令加密备份（整份可还原）
+// 对用户来说是同一件事——把数据倒出去、再倒回来，所以并成一个 tab。
+// 后端仍是 export / backup 两个模块、两组 CLI 命令；页脚的 CliHints 把两组合成一条提示。
 export default function ExportView() {
   const { boot, toast, guard } = useStore();
   const [sections, setSections] = useState([]);
@@ -61,12 +65,12 @@ export default function ExportView() {
   return (
     <>
       <div className="toolbar rowgap pad">
-        <strong>导出</strong>
-        <span className="muted">把栏目数据导成可带走、可备份的文件</span>
+        <strong>导出与备份</strong>
+        <span className="muted">明文导出走可读文件（JSON / Markdown），加密备份走口令保护的 .nxskbak（整份可还原）；都只在本机落盘</span>
       </div>
 
       <div className="card">
-        <div className="colhead">导出选项</div>
+        <div className="colhead">导出为 JSON / Markdown</div>
         <div className="pad">
           <div className="grid">
             <div className="field">
@@ -111,6 +115,8 @@ export default function ExportView() {
         </div>
       </div>
 
+      <BackupPanel />
+
       <div className="card">
         <div className="colhead">历次导出<span className="right muted">{history?.count ?? 0}</span></div>
         <div className="colbody">
@@ -147,7 +153,7 @@ export default function ExportView() {
         </div>
       </div>
 
-      <CliHints module="export" />
+      <CliHints module={['export', 'backup']} />
 
       {modal ? <Modal title={modal.title} onClose={() => setModal(null)}>{modal.body}</Modal> : 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');
     }
@@ -36,6 +38,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: { 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 +123,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,42 +1,57 @@
-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';
 
 function viewFromHash() {
   const m = /^#\/?([^?/]*)/.exec(window.location.hash || '');
-  return m ? decodeURIComponent(m[1]) : '';
+  const id = m ? decodeURIComponent(m[1]) : '';
+  return LEGACY_VIEW[id] || id;
 }
 
+// 加密备份并入「导出与备份」合并页后，旧书签（#/backup）与 localStorage 里
+// 残留的 ui.view 都要落到合并页——否则会被「找不到 tab」的兜底甩到第一个栏目。
+const LEGACY_VIEW = { backup: 'export' };
+
 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 === ui.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(() => {
     const fromHash = viewFromHash();
-    if (fromHash && fromHash !== ui.view) patchUi({ view: fromHash });
-    else if (!window.location.hash) window.location.hash = `#/${ui.view}`;
+    if (fromHash && fromHash !== view) patchUi({ view: fromHash });
+    else if (!window.location.hash) window.location.hash = `#/${view}`;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -47,8 +62,8 @@ export default function App() {
   }, [patchUi]);
 
   useEffect(() => {
-    if (booted && current && current.id !== ui.view) patchUi({ view: current.id });
-  }, [booted, current, ui.view, patchUi]);
+    if (booted && current && current.id !== view) patchUi({ view: current.id });
+  }, [booted, current, view, patchUi]);
 
   const go = (id) => {
     patchUi({ view: id });
@@ -78,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} />
         ))}
-        {!tabs.length ? <span className="muted">正在装载…</span> : null}
+        {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>
+        ))}
+        {!nav.all.length ? <span className="muted">正在装载…</span> : null}
       </nav>
 
       <main className="body">
@@ -124,3 +146,58 @@ 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);
+  const active = group.sections.some((s) => s.id === currentId);
+  const total = group.sections.reduce((n, s) => n + (s.count || 0), 0);
+
+  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={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <button className={`tab ${active ? 'active' : ''}`} aria-expanded={open} onClick={() => setOpen(true)}>
+        {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={() => { 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>
+  );
+}