nx-sk 0.3.0

package/src/modules/sections/view.jsx

@@ -0,0 +1,311 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../../web/frontend/api/client.js';
+import { useStore } from '../../web/frontend/store.jsx';
+import { CliHints, Empty, Modal, Tag } from '../../web/frontend/components/ui.jsx';
+
+const TYPES = ['text', 'textarea', 'number', 'date', 'month', 'bool', 'select', 'tags', 'secret'];
+
+export default function SectionsView() {
+  const { reload, toast, guard, dialog } = useStore();
+  const [data, setData] = useState(null);
+  const [templates, setTemplates] = useState([]);
+  const [err, setErr] = useState(null);
+  const [modal, setModal] = useState(null);
+
+  const load = useCallback(async () => {
+    try {
+      const [list, tpl] = await Promise.all([api('/api/sections'), api('/api/sections/templates')]);
+      setData(list);
+      setTemplates(tpl.templates);
+      setErr(null);
+    } catch (e) {
+      setErr(e.message);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const openDump = guard(async (s) => {
+    const d = await api(`/api/sections/${encodeURIComponent(s.id)}/dump`);
+    setModal({ kind: 'dump', title: `${s.title}（${s.id}）的全部信息`, body: <pre className="block">{JSON.stringify(d, null, 2)}</pre> });
+  });
+
+  const openEdit = guard(async (s) => {
+    const full = await api(`/api/sections/${encodeURIComponent(s.id)}`);
+    setModal({ kind: 'edit', id: s.id, form: {
+      title: full.title,
+      description: full.description,
+      order: String(full.order),
+      titleLabel: full.titleLabel,
+      titleField: full.titleField || '',
+    }, full });
+  });
+
+  const create = guard(async (form) => {
+    const body = { id: form.id.trim(), title: form.title.trim() || form.id.trim(), template: form.template || undefined, description: form.description, order: Number(form.order) || 50 };
+    await api('/api/sections', { method: 'POST', body });
+    toast('栏目已创建');
+    setModal(null);
+    await load();
+    await reload();
+  });
+
+  const saveEdit = guard(async (m) => {
+    const body = {
+      title: m.form.title,
+      description: m.form.description,
+      order: Number(m.form.order) || 50,
+      titleLabel: m.form.titleLabel,
+      titleField: m.form.titleField,
+    };
+    await api(`/api/sections/${encodeURIComponent(m.id)}`, { method: 'PATCH', body });
+    toast('栏目已更新');
+    const fresh = await api(`/api/sections/${encodeURIComponent(m.id)}`);
+    setModal({ ...m, full: fresh });
+    await load();
+    await reload();
+  });
+
+  const addField = guard(async (m, def) => {
+    await api(`/api/sections/${encodeURIComponent(m.id)}`, { method: 'PATCH', body: { 'add-field': def } });
+    toast(`已新增字段 ${def.key}`);
+    const fresh = await api(`/api/sections/${encodeURIComponent(m.id)}`);
+    setModal({ ...m, full: fresh });
+    await load();
+  });
+
+  const removeField = guard(async (m, key) => {
+    const ok = await dialog({ message: `从字段字典里删掉「${key}」？已填的值会留在条目里（只是不再显示/校验）。`, danger: true, confirmText: '删除字段' });
+    if (!ok) return;
+    await api(`/api/sections/${encodeURIComponent(m.id)}`, { method: 'PATCH', body: { 'remove-field': key } });
+    toast(`已删字段 ${key}`);
+    const fresh = await api(`/api/sections/${encodeURIComponent(m.id)}`);
+    setModal({ ...m, full: fresh });
+    await load();
+  });
+
+  const removeSection = guard(async (s) => {
+    const ok = await dialog({
+      message: `删除栏目「${s.title}」，连带其中 ${s.entries} 条条目？删除前会自动留快照。`,
+      danger: true,
+      confirmText: '连带删除',
+    });
+    if (!ok) return;
+    // 注意：DELETE 的参数走**请求体**，不是 query —— api.js 对写操作只合并 body
+    await api(`/api/sections/${encodeURIComponent(s.id)}`, { method: 'DELETE', body: { force: true } });
+    toast('栏目已删除');
+    await load();
+    await reload();
+  });
+
+  if (err) return <div className="pad stack"><div className="bad"><strong>读不到栏目</strong></div><pre className="block">{err}</pre></div>;
+  if (!data) return <div className="pad muted">加载中…</div>;
+
+  return (
+    <>
+      <div className="toolbar rowgap pad">
+        <strong>栏目</strong>
+        <span className="muted">共 {data.count} 个 · 条目 {data.totalEntries} 条</span>
+        <span className="grow" />
+        <button className="btn small ghost" onClick={load}>刷新</button>
+        <button className="btn small" onClick={() => setModal({ kind: 'create', form: { id: '', title: '', template: templates[0]?.id || '', description: '', order: '50' } })}>新建栏目</button>
+      </div>
+
+      <div className="card">
+        <div className="colhead">全部栏目</div>
+        <div className="colbody">
+          {data.sections.length ? data.sections.map((s) => (
+            <div key={s.id} className="row">
+              <span className="name">{s.title}</span>
+              <span className="mono muted">{s.id}</span>
+              {s.template ? <Tag>{s.template}</Tag> : <Tag>自定义</Tag>}
+              <span className="desc">{s.description}</span>
+              <span className="acts">
+                <span className="tag">{s.fields} 字段</span>
+                <span className="tag">{s.entries} 条目</span>
+                <button className="btn small ghost" onClick={() => openDump(s)}>全部信息</button>
+                <button className="btn small ghost" onClick={() => openEdit(s)}>编辑</button>
+                <button className="btn small ghost" onClick={() => removeSection(s)}>删除</button>
+              </span>
+            </div>
+          )) : <Empty>还没有栏目。点「新建栏目」，用内置模板（求职 / 密钥）起步。</Empty>}
+        </div>
+      </div>
+
+      <div className="pad hint">
+        栏目 = 一组同构条目 + 一份字段字典。字典是数据，所以这里加一个字段，CLI 与面板立刻就都能填它。
+      </div>
+
+      <CliHints module="sections" />
+
+      {modal ? (
+        <Modal title={modalTitle(modal)} onClose={() => setModal(null)}>
+          {modal.kind === 'dump' ? modal.body : null}
+          {modal.kind === 'create' ? (
+            <CreateForm
+              templates={templates}
+              form={modal.form}
+              onChange={(f) => setModal((m) => ({ ...m, form: { ...m.form, ...f } }))}
+              onSubmit={() => {
+                if (!/^[a-z][a-z0-9_-]{0,63}$/.test(modal.form.id.trim())) { toast('栏目 id 必须是小写字母开头，仅含 a-z 0-9 _ -', 'bad'); return; }
+                create(modal.form);
+              }}
+            />
+          ) : null}
+          {modal.kind === 'edit' ? (
+            <EditForm
+              modal={modal}
+              onChange={(f) => setModal((m) => ({ ...m, form: { ...m.form, ...f } }))}
+              onSave={() => saveEdit(modal)}
+              onAddField={(def) => addField(modal, def)}
+              onRemoveField={(key) => removeField(modal, key)}
+              onClose={() => setModal(null)}
+            />
+          ) : null}
+        </Modal>
+      ) : null}
+    </>
+  );
+}
+
+function modalTitle(m) {
+  if (m.kind === 'dump') return m.title;
+  if (m.kind === 'create') return '新建栏目';
+  return `编辑栏目 ${m.id}`;
+}
+
+function CreateForm({ templates, form, onChange, onSubmit }) {
+  return (
+    <div className="stack">
+      <div className="grid">
+        <div className="field">
+          <div className="flabel"><span>栏目 id</span><span className="fkey">小写字母开头，仅 a-z 0-9 _ -</span></div>
+          <div className="fctrl"><input value={form.id} onChange={(e) => onChange({ id: e.target.value })} placeholder="例如 projects" /></div>
+        </div>
+        <div className="field">
+          <div className="flabel"><span>标题</span></div>
+          <div className="fctrl"><input value={form.title} onChange={(e) => onChange({ title: e.target.value })} placeholder="例如 项目档案" /></div>
+        </div>
+        <div className="field">
+          <div className="flabel"><span>从模板起步</span></div>
+          <div className="fctrl">
+            <select value={form.template} onChange={(e) => onChange({ template: e.target.value })}>
+              <option value="">（空栏目，自定义字段）</option>
+              {templates.map((t) => <option key={t.id} value={t.id}>{t.label}（{t.fields} 字段）</option>)}
+            </select>
+          </div>
+        </div>
+        <div className="field">
+          <div className="flabel"><span>排序</span><span className="fkey">越小越靠前</span></div>
+          <div className="fctrl"><input type="number" value={form.order} onChange={(e) => onChange({ order: e.target.value })} /></div>
+        </div>
+      </div>
+      <div className="field wide">
+        <div className="flabel"><span>描述</span></div>
+        <div className="fctrl"><input value={form.description} onChange={(e) => onChange({ description: e.target.value })} /></div>
+      </div>
+      <div className="rowgap">
+        <button className="btn" onClick={onSubmit}>创建</button>
+        <span className="hint">同 id 已存在会直接报冲突，不会静默覆盖。</span>
+      </div>
+    </div>
+  );
+}
+
+function EditForm({ modal, onChange, onSave, onAddField, onRemoveField, onClose }) {
+  const [nf, setNf] = useState({ key: '', label: '', type: 'text', group: '' });
+  const full = modal.full;
+  const groups = full?.groupList || [];
+  return (
+    <div className="stack">
+      <div className="grid">
+        <div className="field">
+          <div className="flabel"><span>标题</span></div>
+          <div className="fctrl"><input value={modal.form.title} onChange={(e) => onChange({ title: e.target.value })} /></div>
+        </div>
+        <div className="field">
+          <div className="flabel"><span>排序</span></div>
+          <div className="fctrl"><input type="number" value={modal.form.order} onChange={(e) => onChange({ order: e.target.value })} /></div>
+        </div>
+        <div className="field">
+          <div className="flabel"><span>条目名字段</span><span className="fkey">列表里显示哪个字段</span></div>
+          <div className="fctrl">
+            <select value={modal.form.titleField} onChange={(e) => onChange({ titleField: e.target.value })}>
+              <option value="">（用条目 title）</option>
+              {(full?.fieldList || []).map((f) => <option key={f.key} value={f.key}>{f.label}（{f.key}）</option>)}
+            </select>
+          </div>
+        </div>
+        <div className="field">
+          <div className="flabel"><span>名称标签</span><span className="fkey">新建条目时问什么</span></div>
+          <div className="fctrl"><input value={modal.form.titleLabel} onChange={(e) => onChange({ titleLabel: e.target.value })} /></div>
+        </div>
+      </div>
+      <div className="field wide">
+        <div className="flabel"><span>描述</span></div>
+        <div className="fctrl"><input value={modal.form.description} onChange={(e) => onChange({ description: e.target.value })} /></div>
+      </div>
+      <div className="rowgap">
+        <button className="btn" onClick={onSave}>保存栏目属性</button>
+        <button className="btn ghost" onClick={onClose}>关闭</button>
+      </div>
+
+      <div className="card" style={{ border: '1px solid var(--soft-2)', borderRadius: 4 }}>
+        <div className="colhead">字段字典（{full?.fieldList?.length || 0}）</div>
+        <div className="colbody">
+          {groups.map((g) => (
+            <div key={g.id}>
+              <div className="group-title">{g.title}（{g.id}）</div>
+              {(full.fieldList || []).filter((f) => f.group === g.id).map((f) => (
+                <div key={f.key} className="row">
+                  <span className="name">{f.label}</span>
+                  <span className="mono muted">{f.key}</span>
+                  <Tag>{f.type}</Tag>
+                  {f.sensitive ? <Tag kind="bad">密文</Tag> : null}
+                  <span className="desc">{f.hint || ''}</span>
+                  <span className="acts"><button className="btn small ghost" onClick={() => onRemoveField(f.key)}>删除</button></span>
+                </div>
+              ))}
+            </div>
+          ))}
+          {(full?.fieldList || []).filter((f) => !groups.some((g) => g.id === f.group)).map((f) => (
+            <div key={f.key} className="row">
+              <span className="name">{f.label}</span>
+              <span className="mono muted">{f.key}</span>
+              <Tag>{f.type}</Tag>
+              <span className="desc">分组 {f.group}（不在 groups 列表里）</span>
+              <span className="acts"><button className="btn small ghost" onClick={() => onRemoveField(f.key)}>删除</button></span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="card" style={{ border: '1px solid var(--soft-2)', borderRadius: 4 }}>
+        <div className="colhead">新增字段</div>
+        <div className="pad rowgap">
+          <input style={{ width: 150 }} placeholder="key（英文字母开头）" value={nf.key} onChange={(e) => setNf({ ...nf, key: e.target.value })} />
+          <input style={{ width: 150 }} placeholder="标签（中文名）" value={nf.label} onChange={(e) => setNf({ ...nf, label: e.target.value })} />
+          <select style={{ width: 110 }} value={nf.type} onChange={(e) => setNf({ ...nf, type: e.target.value })}>
+            {TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+          </select>
+          <select style={{ width: 150 }} value={nf.group} onChange={(e) => setNf({ ...nf, group: e.target.value })}>
+            <option value="">（首个分组）</option>
+            {groups.map((g) => <option key={g.id} value={g.id}>{g.title}</option>)}
+          </select>
+          <button
+            className="btn small"
+            onClick={() => {
+              const def = { key: nf.key.trim(), label: nf.label.trim() || nf.key.trim(), type: nf.type };
+              if (nf.group) def.group = nf.group;
+              onAddField(def);
+              setNf({ key: '', label: '', type: 'text', group: nf.group });
+            }}
+          >
+            加入字典
+          </button>
+          <span className="hint">加完立刻生效：CLI 与面板都能填它。</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/modules/settings/index.js

@@ -0,0 +1,34 @@
+import * as service from './service.js';
+
+export default {
+  id: 'settings',
+  title: '设置',
+  order: 900,
+  view: () => import('./view.jsx'),
+  // 单例配置：全局只有一份，读出来改回去 → 退化为 get / set，不硬凑 CRUD 五操作
+  actions: [
+    {
+      id: 'setting.get',
+      cli: ['setting', 'get'],
+      http: ['GET', '/api/settings'],
+      summary: '读取全部设置项',
+      flags: {},
+      run: () => service.getSettings(),
+      render: (d) => service.renderSettings(d),
+    },
+    {
+      id: 'setting.set',
+      cli: ['setting', 'set'],
+      http: ['PATCH', '/api/settings'],
+      summary: '修改设置（PATCH 语义，只改传入项）',
+      flags: {
+        key: { type: 'string', hint: '设置项名' },
+        value: { type: 'string', hint: '取值' },
+        set: { type: 'kv', hint: 'k=v，可重复' },
+        'dry-run': { type: 'boolean' },
+      },
+      run: (ctx) => service.updateSettings(ctx),
+      render: (d) => service.renderSettingSet(d),
+    },
+  ],
+};

package/src/modules/settings/service.js

@@ -0,0 +1,78 @@
+// settings 是**基础模块**：允许被其它模块单向只读依赖（见 eslint 互依禁列——它故意不在里面）。
+// 设置的唯一读写入口在这里，别绕过去直接改 store.settings。
+import { loadStore, mutateStore, snapshotStore } from '../../core/store.js';
+import { badInput, notFound } from '../../core/errors.js';
+
+export const SETTING_KEYS = ['exportDir', 'exportFormat', 'includeSecretsInExport', 'defaultSection'];
+
+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' },
+};
+
+export function settingsSchema() {
+  return Object.entries(SCHEMA).map(([key, s]) => ({ key, ...s }));
+}
+
+export async function getSettings() {
+  const store = await loadStore();
+  return { settings: store.settings, schema: settingsSchema() };
+}
+
+function coerceSetting(key, value) {
+  const s = SCHEMA[key];
+  if (!s) throw notFound(`未知设置项: ${key}（可用: ${SETTING_KEYS.join(', ')}）`);
+  if (s.type === 'boolean') {
+    if (typeof value === 'boolean') return value;
+    const v = String(value).trim().toLowerCase();
+    if (['是', 'true', '1', 'yes'].includes(v)) return true;
+    if (['否', 'false', '0', 'no', ''].includes(v)) return false;
+    throw badInput(`设置项 ${key} 需要是/否，收到 ${JSON.stringify(value)}`);
+  }
+  const str = String(value);
+  if (s.enum && !s.enum.includes(str)) throw badInput(`设置项 ${key} 只能是 ${s.enum.join(' / ')}`);
+  return str;
+}
+
+/** PATCH 语义：只改传入的项，未传的保持原值。 */
+export async function updateSettings({ set, key, value, 'dry-run': dryRun } = {}) {
+  let patch = {};
+  if (set && typeof set === 'object') patch = { ...set };
+  if (key !== undefined) patch[key] = value;
+
+  const keys = Object.keys(patch);
+  if (!keys.length) throw badInput('至少要给一项：setting set --key <名> --value <值>，或 --set k=v（可重复）');
+
+  const resolved = {};
+  for (const k of keys) resolved[k] = coerceSetting(k, patch[k]);
+
+  if (dryRun) return { status: 'skipped', dryRun: true, wouldSet: resolved };
+
+  const snapshot = await snapshotStore('setting-set');
+  const result = await mutateStore((s) => {
+    const before = {};
+    for (const [k, v] of Object.entries(resolved)) { before[k] = s.settings[k]; s.settings[k] = v; }
+    return { before, after: { ...resolved } };
+  });
+  return { status: 'ok', set: result.after, before: result.before, snapshot, path: '~/nx-sk/store.json' };
+}
+
+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));
+    lines.push(`  ${s.key.padEnd(22)} ${shown.padEnd(10)} ${s.hint}`);
+  }
+  return lines.join('\n');
+}
+
+export function renderSettingSet(d) {
+  if (d.status === 'skipped') return `试运行：将设置 ${JSON.stringify(d.wouldSet)}（未落盘）`;
+  const lines = ['已更新设置：'];
+  for (const [k, v] of Object.entries(d.set)) lines.push(`  ${k}: ${JSON.stringify(d.before[k])} -> ${JSON.stringify(v)}`);
+  if (d.snapshot) lines.push(`快照: ${d.snapshot}`);
+  return lines.join('\n');
+}

package/src/modules/settings/view.jsx

@@ -0,0 +1,193 @@
+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, Tag } from '../../web/frontend/components/ui.jsx';
+
+export default function SettingsView() {
+  const { boot, reload, toast, guard } = useStore();
+  const [data, setData] = useState(null);
+  const [form, setForm] = useState(null);
+  // 面板地址不写死：直接取用户此刻访问的这个 origin，换端口/换 host 都自动跟上
+  const panelUrl = typeof window === 'undefined' ? '' : window.location.origin;
+  const panelPort = typeof window === 'undefined' ? '' : (window.location.port || '80');
+
+  const load = useCallback(async () => {
+    try {
+      const d = await api('/api/settings');
+      setData(d);
+      setForm({ ...d.settings });
+    } catch (e) {
+      toast(e.message, 'bad');
+    }
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const save = guard(async () => {
+    const body = {
+      exportDir: form.exportDir,
+      exportFormat: form.exportFormat,
+      includeSecretsInExport: !!form.includeSecretsInExport,
+      defaultSection: form.defaultSection,
+    };
+    const r = await api('/api/settings', { method: 'PATCH', body });
+    toast('设置已保存');
+    setData({ ...data, settings: r.set });
+    await reload();
+  });
+
+  if (!data || !form) return <div className="pad muted">加载中…</div>;
+
+  return (
+    <>
+      <div className="toolbar rowgap pad">
+        <strong>设置</strong>
+        <span className="muted">本机配置与运行状态</span>
+        <span className="grow" />
+        <button className="btn small ghost" onClick={load}>重新读取</button>
+      </div>
+
+      <div className="card">
+        <div className="colhead">存储与运行</div>
+        <div className="colbody">
+          <InfoRow label="数据目录" value={boot?.home} copy={boot?.home} />
+          <InfoRow label="store.json" value={boot?.storePath} copy={boot?.storePathRaw} />
+          <InfoRow label="栏目 / 条目" value={boot ? `${boot.counts.sections} / ${boot.counts.entries}` : ''} />
+          <InfoRow label="命令条数" value={boot ? String(boot.counts.commands) : ''} />
+          <InfoRow label="app / node" value={boot ? `v${boot.app.version} · node ${boot.app.node} · ${boot.app.platform}` : ''} />
+          <InfoRow
+            label="环境变量覆盖"
+            value={boot ? Object.entries(boot.envOverrides).filter(([, v]) => v).map(([k, v]) => `${k}=${v}`).join('　') || '（无）' : ''}
+          />
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="colhead">密钥（密文落盘）</div>
+        <div className="colbody">
+          <InfoRow label="密钥来源" value={boot?.vault?.source === 'env' ? '环境变量 NX_SK_PASSPHRASE（口令不落盘）' : '本机密钥文件'} />
+          <InfoRow label="密钥文件" value={boot?.vault?.keyFile || boot?.vault?.saltFile || ''} copy={boot?.vault?.keyFile || boot?.vault?.saltFile} />
+          <div className="row">
+            <span className="desc">{boot?.vault?.note}</span>
+          </div>
+          <div className="row">
+            <span className="desc bad">删掉密钥文件或换掉口令后，已存的密文都解不开了——导出前先确认密钥可用。</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="colhead">面板与 CLI</div>
+        <div className="colbody">
+          <div className="row">
+            <span className="name">面板地址</span>
+            <span className="desc mono">{panelUrl}</span>
+            <span className="acts"><Copyable className="mono" text={panelUrl}>复制</Copyable></span>
+          </div>
+          <div className="row">
+            <span className="name">重启面板</span>
+            <span className="desc">面板本身就是 serve 提供的；改代码后重启它即可</span>
+            <span className="acts"><Copyable className="mono" text={`nx-sk serve --port ${panelPort}`}>{`nx-sk serve --port ${panelPort}`}</Copyable></span>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="colhead">默认行为</div>
+        <div className="pad">
+          <div className="grid">
+            <div className="field">
+              <div className="flabel"><span>默认导出格式</span></div>
+              <div className="fctrl">
+                <select value={form.exportFormat} onChange={(e) => setForm({ ...form, exportFormat: e.target.value })}>
+                  <option value="both">JSON + Markdown</option>
+                  <option value="json">仅 JSON</option>
+                  <option value="md">仅 Markdown</option>
+                </select>
+              </div>
+            </div>
+            <div className="field">
+              <div className="flabel"><span>默认导出目录</span><span className="fkey">留空 = ~/nx-sk/export</span></div>
+              <div className="fctrl"><input value={form.exportDir} onChange={(e) => setForm({ ...form, exportDir: e.target.value })} /></div>
+            </div>
+            <div className="field">
+              <div className="flabel"><span>默认栏目</span><span className="fkey">CLI 未指定 --section 时的首选</span></div>
+              <div className="fctrl"><input value={form.defaultSection} onChange={(e) => setForm({ ...form, defaultSection: e.target.value })} /></div>
+            </div>
+            <div className="field">
+              <div className="flabel"><span>导出默认带明文密钥</span><span className="fkey">默认开；要分享出去时关掉</span></div>
+              <div className="fctrl">
+                <label className="inline">
+                  <input type="checkbox" checked={!!form.includeSecretsInExport} onChange={(e) => setForm({ ...form, includeSecretsInExport: e.target.checked })} />
+                  <span className={form.includeSecretsInExport ? 'muted' : 'bad'}>{form.includeSecretsInExport ? '开（导出文件含真实凭据，注意别外发）' : '关（凭据打码后再导出）'}</span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="rowgap" style={{ marginTop: 8 }}>
+            <button className="btn" onClick={save}>保存设置</button>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="colhead">自动快照<span className="right muted">{boot?.snapshots?.length ?? 0}</span></div>
+        <div className="colbody">
+          <div className="row">
+            <span className="desc">每次删除条目 / 栏目、修改设置前，都会在 ~/nx-sk/backup 留一份可回滚的整库快照。</span>
+          </div>
+          {boot?.snapshots?.length ? boot.snapshots.map((s) => (
+            <div key={s.name} className="row">
+              <span className="mono name">{s.name}</span>
+              <span className="desc">{s.at}</span>
+              <span className="acts"><span className="tag">{Math.ceil(s.bytes / 1024)} KB</span></span>
+            </div>
+          )) : <Empty>还没有快照。</Empty>}
+        </div>
+      </div>
+
+      {boot?.migration ? (
+        <div className="card">
+          <div className="colhead">数据迁移</div>
+          <div className="colbody">
+            <div className="row">
+              <span className="desc">store 已从 v{boot.migration.from} 迁到 v{boot.migration.to}：密钥栏目字段 {boot.migration.fieldsBefore} → {boot.migration.fieldsAfter}，{boot.migration.entries} 条条目</span>
+            </div>
+            <div className="row">
+              <span className="desc">迁移前的原始文件</span>
+              <span className="acts"><Copyable className="mono" text={boot.migration.snapshotRaw || ''}>{boot.migration.snapshot}</Copyable></span>
+            </div>
+            {boot.migration.legacyValuesKept ? (
+              <div className="row">
+                <span className="desc">另保留了 {boot.migration.legacyValuesKept} 个旧字段的值（不再显示，但没删）</span>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {boot?.corrupt ? (
+        <div className="card">
+          <div className="colhead">上次读取异常</div>
+          <div className="colbody">
+            <div className="row">
+              <span className="desc bad">store.json 解析失败，已挪到 {boot.corrupt.to}（原文件没有被覆盖）</span>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <CliHints module="settings" />
+    </>
+  );
+}
+
+function InfoRow({ label, value, copy }) {
+  return (
+    <div className="row">
+      <span className="name">{label}</span>
+      <span className="desc mono">{value || '（空）'}</span>
+      {copy ? <span className="acts"><Copyable className="mono" text={copy}>复制</Copyable></span> : <Tag> </Tag>}
+    </div>
+  );
+}