nx-sk 0.3.0

package/src/modules/entries/view.jsx

@@ -0,0 +1,240 @@
+import { useCallback, useEffect, useMemo, 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';
+import { FieldGroup } from '../../web/frontend/components/fieldEditor.jsx';
+import KvTable from './kvTable.jsx';
+
+const norm = (x) => (x === null || x === undefined ? '' : (Array.isArray(x) ? x.join('、') : String(x)));
+
+/**
+ * 栏目详情视图。按栏目的形状分两种布局：
+ *
+ * - `kv: true`（密钥那种）→ 交给 [[kvTable]]，**一行一个键值对**。没有条目列表、
+ *   没有字段表单、没有完整性——密钥就是一张表。
+ * - 其余栏目 → 模板建议的分组表单（求职那种需要中文标签/候选值/未填清单的场景）。
+ *
+ * 字段与分组全部来自后端，所以新增字段不需要改前端。
+ */
+export default function SectionView({ sectionId }) {
+  const { ui, patchUi, toast, guard, dialog, reload } = useStore();
+  const [data, setData] = useState(null);
+  const [err, setErr] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [draft, setDraft] = useState(null);
+  const [modal, setModal] = useState(null);
+  const [quick, setQuick] = useState('');
+  const mask = !!ui.mask;
+
+  const load = useCallback(async (keepId) => {
+    setBusy(true);
+    setErr(null);
+    try {
+      const d = await api(`/api/sections/${encodeURIComponent(sectionId)}/dump${mask ? '?mask=1' : ''}`);
+      setData(d);
+      const wanted = keepId || ui.entry;
+      const hit = d.entries.find((e) => e.id === wanted) || d.entries[0] || null;
+      setDraft(hit ? { id: hit.id, title: hit.title, values: { ...hit.values } } : null);
+      if (hit && hit.id !== ui.entry) patchUi({ entry: hit.id });
+    } catch (e) {
+      setErr(e.message);
+      setData(null);
+      setDraft(null);
+    } finally {
+      setBusy(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sectionId, mask]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const current = useMemo(() => data?.entries.find((e) => e.id === draft?.id) || null, [data, draft]);
+  const groups = useMemo(() => {
+    if (!data) return [];
+    return data.groups.map((g) => ({ ...g, fields: data.fields.filter((f) => f.group === g.id) })).filter((g) => g.fields.length);
+  }, [data]);
+
+  const patchField = (key, value) => setDraft((d) => (d ? { ...d, values: { ...d.values, [key]: value } } : d));
+
+  const dirty = useMemo(() => {
+    if (!draft || !current) return { set: {}, titleChanged: false, count: 0 };
+    const set = {};
+    for (const f of data.fields) {
+      if (norm(current.values[f.key]) !== norm(draft.values[f.key])) set[f.key] = draft.values[f.key];
+    }
+    return { set, titleChanged: draft.title !== current.title, count: Object.keys(set).length + (draft.title !== current.title ? 1 : 0) };
+  }, [draft, current, data]);
+
+  const save = guard(async () => {
+    if (!draft || !current) return;
+    if (!dirty.count) { toast('没有改动'); return; }
+    const body = { set: dirty.set };
+    if (dirty.titleChanged) body.title = draft.title;
+    await api(`/api/entries/${encodeURIComponent(draft.id)}`, { method: 'PATCH', body });
+    toast(`已保存 ${dirty.count} 处改动`);
+    await load(draft.id);
+    await reload();
+  });
+
+  // 「直接存 kv」的入口：敲一行 字段=值 回车即写入，字典里没有的键会自动登记
+  const quickAdd = guard(async () => {
+    if (!draft) { toast('先新建一条条目', 'bad'); return; }
+    const i = quick.indexOf('=');
+    if (i <= 0) { toast('用 字段=值 的格式，例如 微信=zhaoliuxue', 'bad'); return; }
+    const k = quick.slice(0, i).trim();
+    const v = quick.slice(i + 1);
+    const r = await api(`/api/entries/${encodeURIComponent(draft.id)}`, { method: 'PATCH', body: { set: { [k]: v } } });
+    setQuick('');
+    toast(`已写入 ${k}${r.newFields?.length ? '（新字段已登记）' : ''}`);
+    await load(draft.id);
+    await reload();
+  });
+
+  const addEntry = guard(async () => {
+    const label = data?.section.titleLabel || '名称';
+    const name = await dialog({ message: `新建「${data?.section.title}」条目，${label}是？`, input: { placeholder: `例如 ${data?.section.titleField || '名称'}` } });
+    if (!name) return;
+    const body = { section: sectionId, title: name };
+    if (data?.section.titleField) body.set = { [data.section.titleField]: name };
+    const created = await api('/api/entries', { method: 'POST', body });
+    toast(`已新建：${created.title}`);
+    await load(created.id);
+    await reload();
+  });
+
+  const removeEntry = guard(async () => {
+    if (!current) return;
+    const ok = await dialog({
+      message: `删除条目「${current.title}」？删除前会自动留一份快照在 ~/nx-sk/backup。`,
+      danger: true,
+      confirmText: '删除',
+    });
+    if (!ok) return;
+    await api(`/api/entries/${encodeURIComponent(current.id)}`, { method: 'DELETE' });
+    toast('已删除');
+    await load('');
+    await reload();
+  });
+
+  const exportSection = guard(async () => {
+    const r = await api('/api/export', { method: 'POST', body: { section: sectionId, format: 'both' } });
+    setModal({
+      title: '导出结果',
+      body: <pre className="block">{`目录: ${r.dir}\n格式: ${r.format}\n条目: ${r.entries}\n凭据: ${r.withSecrets ? '含明文' : '已打码'}\n\n${r.files.map((f) => `${f.path}  ${f.bytes} 字节`).join('\n')}`}</pre>,
+    });
+  });
+
+  if (err) {
+    return (
+      <div className="pad stack">
+        <div className="bad"><strong>栏目读不到</strong></div>
+        <pre className="block">{err}</pre>
+        <div className="hint">如果这个栏目刚被删掉，切到「栏目」tab 看看现有栏目。</div>
+      </div>
+    );
+  }
+  if (!data) return <div className="pad muted">{busy ? '加载中…' : '暂无数据'}</div>;
+
+  // KV 栏目单独一套界面（宿主的 hooks 都已经跑完，这里是合法提前返回）
+  if (data.section.kv) return <KvTable sectionId={sectionId} sectionTitle={data.section.title} />;
+
+  return (
+    <>
+      <div className="toolbar rowgap pad">
+        <strong>{data.section.title}</strong>
+        <Tag>{data.section.id}</Tag>
+        <span className="muted">{data.count} 条 / {data.section.fields} 字段</span>
+        {data.section.description ? <span className="desc muted nowrap grow">{data.section.description}</span> : <span className="grow" />}
+        <label className="inline hint">
+          <input type="checkbox" checked={mask} onChange={() => patchUi({ mask: !mask })} />
+          打码显示（投屏/截图时用）
+        </label>
+        <button className="btn small ghost" onClick={() => load()}>刷新</button>
+        <button className="btn small ghost" onClick={exportSection}>导出本栏目</button>
+        <button className="btn small" onClick={addEntry}>新建条目</button>
+      </div>
+
+      <div className="cols">
+        <div className="col" style={{ flex: '0 0 300px' }}>
+          <div className="card">
+            <div className="colhead">条目列表<span className="right muted">{data.count}</span></div>
+            <div className="colbody">
+              {data.entries.length ? data.entries.map((e) => (
+                <div
+                  key={e.id}
+                  className={`row selectable ${e.id === draft?.id ? 'selected' : ''}`}
+                  onClick={() => { patchUi({ entry: e.id }); setDraft({ id: e.id, title: e.title, values: { ...e.values } }); }}
+                >
+                  <span className="name">{e.title || '（无名）'}</span>
+                  <span className="acts">
+                    {e.missing.length ? <span className="tag">{e.completeness.ratio}%</span> : <span className="tag strong">已填满</span>}
+                  </span>
+                </div>
+              )) : <Empty>还没有条目。点右上角「新建条目」，或用 CLI：nx-sk entry add --section {data.section.id} --set ...</Empty>}
+            </div>
+          </div>
+        </div>
+
+        <div className="col">
+          {!draft ? (
+            <div className="card"><Empty>左边选一条，或新建一条</Empty></div>
+          ) : (
+            <div className="card">
+              <div className="colhead">
+                <span className="grow nowrap">{current?.title || draft.title}</span>
+                <span className="muted mono">{draft.id}</span>
+                {current ? <Tag kind={current.missing.length ? '' : 'strong'}>完整度 {current.completeness.ratio}%</Tag> : null}
+              </div>
+
+              <div className="field wide pad" style={{ borderBottom: '1px solid var(--soft-2)' }}>
+                <div className="flabel">
+                  <span>{data.section.titleLabel || '名称'}</span>
+                  <span className="bad">改动后必须保存</span>
+                </div>
+                <div className="fctrl">
+                  <input value={draft.title} onChange={(e) => setDraft((d) => ({ ...d, title: e.target.value }))} />
+                </div>
+              </div>
+
+              <div className="rowgap" style={{ padding: '6px 14px', borderBottom: '1px solid var(--soft-2)' }}>
+                <input
+                  className="grow"
+                  style={{ minWidth: 220 }}
+                  placeholder="直接加字段：字段=值　（回车写入；没见过的键会自动登记）"
+                  value={quick}
+                  onChange={(e) => setQuick(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === 'Enter') quickAdd(); }}
+                />
+                <button className="btn small" onClick={quickAdd} disabled={!quick.includes('=')}>写入</button>
+              </div>
+
+              {groups.map((g) => (
+                <FieldGroup key={g.id} title={g.title} fields={g.fields} draft={draft.values} onPatch={patchField} />
+              ))}
+
+              <div className="rowgap pad">
+                <button className="btn" onClick={save} disabled={!dirty.count}>保存{dirty.count ? `（${dirty.count} 处改动）` : ''}</button>
+                <button className="btn ghost" onClick={() => load(draft.id)} disabled={!dirty.count}>放弃改动</button>
+                <button className="btn ghost" onClick={removeEntry}>删除条目</button>
+                {current?.missing.length ? (
+                  <span className="hint">模板建议里还有 {current.missing.length} 项没填（不影响使用）：{current.missing.slice(0, 5).map((m) => m.label).join('、')}{current.missing.length > 5 ? '…' : ''}</span>
+                ) : null}
+                {current?.excluded?.length ? (
+                  <span className="hint">另有 {current.excluded.length} 项已标不填、不计入完整度：{current.excluded.slice(0, 6).map((m) => m.label).join('、')}{current.excluded.length > 6 ? '…' : ''}</span>
+                ) : null}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <CliHints module="entries" />
+
+      {modal ? (
+        <Modal title={modal.title} onClose={() => setModal(null)}>
+          {modal.body}
+        </Modal>
+      ) : null}
+    </>
+  );
+}

package/src/modules/export/index.js

@@ -0,0 +1,39 @@
+import * as service from './service.js';
+
+export default {
+  id: 'export',
+  title: '导出',
+  order: 700,
+  view: () => import('./view.jsx'),
+  actions: [
+    {
+      id: 'export.run',
+      cli: ['export', 'run'],
+      http: ['POST', '/api/export'],
+      summary: '把全部（或单个）栏目导出成 JSON / Markdown；凭据默认含明文，--no-secrets 打码',
+      flags: {
+        out: { type: 'string', hint: '导出目录，缺省 ~/nx-sk/export' },
+        format: { type: 'string', enum: ['json', 'md', 'both'], hint: '缺省取设置里的 exportFormat' },
+        section: { type: 'string', hint: '只导出某个栏目' },
+        'with-secrets': { type: 'boolean', hint: '含密钥明文字段（这是默认）' },
+        'no-secrets': { type: 'boolean', hint: '打码后再导出（要分享给别人时用）' },
+        'dry-run': { type: 'boolean' },
+      },
+      run: (ctx) => service.exportAll({
+        out: ctx.out, format: ctx.format, section: ctx.section,
+        withSecrets: ctx['with-secrets'] ? true : (ctx['no-secrets'] ? false : undefined),
+        'dry-run': ctx['dry-run'],
+      }),
+      render: (d) => service.renderExport(d),
+    },
+    {
+      id: 'export.list',
+      cli: ['export', 'list'],
+      http: ['GET', '/api/exports'],
+      summary: '列出历次导出与导出目录内的文件',
+      flags: {},
+      run: () => service.listExports(),
+      render: (d) => service.renderExportList(d),
+    },
+  ],
+};

package/src/modules/export/service.js

@@ -0,0 +1,192 @@
+// 导出（整体导出 / 单栏目导出）。
+// 这是**动作集合**不是集合资源——它不产生实体，只对已有数据做事，所以不套 CRUD 五动词。
+import fsp from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { displayPath, exportDir, VERSION } from '../../core/paths.js';
+import { ensureDir, fileSize, pathExists, writeAtomic } from '../../core/fsx.js';
+import { loadStore, mutateStore, MAX_EXPORT_HISTORY, storePathInUse } from '../../core/store.js';
+import { displaySensitive, dumpSection, formatValue } from '../../core/render.js';
+import { decryptValue, isCipherBlob } from '../../core/crypto.js';
+import { resolveVaultKey, sensitiveViewer } from '../../core/vault.js';
+import { badInput } from '../../core/errors.js';
+import { nowIso, stamp } from '../../core/ids.js';
+import { findSection, isSensitiveField, sectionNames } from '../../core/fields.js';
+import { getSettings } from '../settings/service.js'; // 唯一允许的跨模块依赖：基础模块
+
+const FORMATS = ['json', 'md', 'both'];
+
+/** 需要明文时先把密文解开；解不开就抛 BLOCKED（带着「密钥来源变了」的明确原因）。 */
+async function plainValues(section, values) {
+  const out = {};
+  for (const [k, v] of Object.entries(values)) {
+    if (isSensitiveField(section, k) && isCipherBlob(v)) {
+      const { key } = await resolveVaultKey();
+      out[k] = decryptValue(key, v);
+    } else {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+function displayValues(section, values, decrypt, mask = false) {
+  const out = {};
+  for (const [k, v] of Object.entries(values)) {
+    out[k] = isSensitiveField(section, k) ? displaySensitive(v, { mask, decrypt }) : v;
+  }
+  return out;
+}
+
+function renderBundleMarkdown(bundle) {
+  const lines = [];
+  lines.push('# nx-sk 个人资源导出');
+  lines.push('');
+  lines.push(`导出时间：${bundle.generatedAt}`);
+  lines.push(`栏目数：${bundle.sections.length}　条目数：${bundle.entries.length}`);
+  lines.push(`密文字段：${bundle.withSecrets ? '含明文' : '已打码'}`);
+  lines.push('');
+  for (const section of bundle.sections) {
+    lines.push(`## ${section.title}（${section.id}）`);
+    lines.push('');
+    if (section.description) { lines.push(`> ${section.description}`); lines.push(''); }
+    const mine = bundle.entries.filter((e) => e.section === section.id);
+    if (!mine.length) { lines.push('_（本栏目暂无条目）_'); lines.push(''); continue; }
+    const groupTitle = (id) => section.groups.find((g) => g.id === id)?.title || id;
+    for (const e of mine) {
+      lines.push(`### ${e.title}（\`${e.id}\`）`);
+      lines.push('');
+      lines.push(`- 完整度：${e.completeness.filled}/${e.completeness.total}（${e.completeness.ratio}%）`);
+      if (e.updatedAt) lines.push(`- 更新于：${e.updatedAt}`);
+      lines.push('');
+      let cur = null;
+      for (const f of section.fields) {
+        if (f.group !== cur) { cur = f.group; lines.push(`**${groupTitle(cur)}**`); lines.push(''); }
+        lines.push(`- ${f.label}：${formatValue(e.values[f.key]) || '（未填写）'}`);
+      }
+      lines.push('');
+    }
+  }
+  return lines.join('\n').replace(/\n{3,}/g, '\n\n');
+}
+
+export async function exportAll({ out, format, withSecrets, section, 'dry-run': dryRun } = {}) {
+  const settings = (await getSettings()).settings;
+  const fmt = format || settings.exportFormat || 'both';
+  if (!FORMATS.includes(fmt)) throw badInput(`--format 只能是 ${FORMATS.join(' / ')}`);
+
+  const store = await loadStore();
+  let sections = store.sections;
+  if (section) {
+    const s = findSection(store, section);
+    if (!s) throw badInput(`找不到栏目: ${section} —— 现有: ${sectionNames(store)}`);
+    sections = [s];
+  }
+  const ids = new Set(sections.map((s) => s.id));
+  const entries = store.entries.filter((e) => ids.has(e.section));
+
+  // 默认取设置；现在默认就是**含明文**（本机单人工具，自己看的东西不必先拦一道）
+  const includeSecrets = withSecrets === undefined ? !!settings.includeSecretsInExport : !!withSecrets;
+  const dir = out ? resolve(out) : (settings.exportDir ? resolve(settings.exportDir) : exportDir());
+  const generatedAt = nowIso();
+  const base = `${stamp()}-nx-sk`;
+
+  const bundle = {
+    app: 'nx-sk',
+    version: VERSION,
+    generatedAt,
+    storePath: displayPath(storePathInUse()),
+    withSecrets: includeSecrets,
+    counts: { sections: sections.length, entries: entries.length },
+    sections: sections.map((s) => ({
+      id: s.id, title: s.title, description: s.description, titleLabel: s.titleLabel,
+      groups: s.groups,
+      fields: s.fields.map((f) => ({ key: f.key, label: f.label, type: f.type, group: f.group, sensitive: isSensitiveField(s, f.key) })),
+    })),
+    entries: [],
+  };
+  for (const e of entries) {
+    const sec = sections.find((s) => s.id === e.section);
+    const decrypt = await sensitiveViewer(sec, [e]);
+    const values = includeSecrets ? await plainValues(sec, e.values) : displayValues(sec, e.values, decrypt, true);
+    const meta = dumpSection(sec, [e], { mask: !includeSecrets, decrypt }).entries[0];
+    bundle.entries.push({ id: e.id, section: e.section, sectionTitle: sec.title, title: e.title, tags: e.tags, createdAt: e.createdAt, updatedAt: e.updatedAt, completeness: meta.completeness, values });
+  }
+
+  const files = [];
+  if (fmt === 'json' || fmt === 'both') files.push({ kind: 'json', name: `${base}.json`, content: JSON.stringify(bundle, null, 2) + '\n' });
+  if (fmt === 'md' || fmt === 'both') files.push({ kind: 'md', name: `${base}.md`, content: renderBundleMarkdown(bundle) });
+
+  if (dryRun) {
+    return {
+      status: 'skipped', dryRun: true,
+      wouldWrite: { dir: displayPath(dir), files: files.map((f) => ({ name: f.name, bytes: Buffer.byteLength(f.content) })), withSecrets: includeSecrets, sections: sections.length, entries: entries.length },
+    };
+  }
+
+  await ensureDir(dir);
+  const written = [];
+  for (const f of files) {
+    const p = resolve(dir, f.name);
+    await writeAtomic(p, f.content);
+    written.push({ kind: f.kind, path: displayPath(p), pathRaw: p, bytes: await fileSize(p) });
+  }
+
+  await mutateStore((s) => {
+    s.exports.unshift({
+      at: generatedAt, dir: displayPath(dir), dirRaw: dir, format: fmt, withSecrets: includeSecrets,
+      sections: sections.length, entries: entries.length,
+      files: written.map((w) => ({ path: w.path, pathRaw: w.pathRaw })),
+    });
+    s.exports = s.exports.slice(0, MAX_EXPORT_HISTORY);
+  });
+
+  return { status: 'ok', dir: displayPath(dir), dirRaw: dir, format: fmt, withSecrets: includeSecrets, sections: sections.length, entries: entries.length, files: written };
+}
+
+export async function listExports() {
+  const store = await loadStore();
+  const history = await Promise.all(store.exports.map(async (h) => {
+    const files = await Promise.all((h.files || []).map(async (f) => {
+      const raw = typeof f === 'string' ? resolve(f) : f.pathRaw;
+      return { path: typeof f === 'string' ? f : f.path, bytes: await fileSize(raw), exists: await pathExists(raw) };
+    }));
+    return { ...h, files };
+  }));
+
+  // 扫「默认导出目录」+「历史里出现过的目录」：只扫默认目录的话，
+  // 用 --out 导出的文件会在列表里凭空消失，用户以为导出失败了。
+  const dirs = [...new Set([exportDir(), ...store.exports.map((h) => h.dirRaw).filter(Boolean)])];
+  const disk = [];
+  for (const d of dirs) {
+    let names = [];
+    try { names = (await fsp.readdir(d)).filter((n) => n.endsWith('.json') || n.endsWith('.md')).sort().reverse(); } catch { continue; }
+    for (const n of names) disk.push({ dir: displayPath(d), name: n });
+  }
+  return { count: history.length, history, dir: displayPath(exportDir()), dirs: dirs.map(displayPath), disk };
+}
+
+export function renderExport(d) {
+  if (d.status === 'skipped') {
+    const w = d.wouldWrite;
+    return `试运行（未写盘）\n目录: ${w.dir}\n文件: ${w.files.map((f) => `${f.name}（${f.bytes} 字节）`).join('、')}\n栏目 ${w.sections} · 条目 ${w.entries} · 明文密钥: ${w.withSecrets ? '是' : '否（打码）'}`;
+  }
+  const lines = [
+    `已导出 ${d.sections} 个栏目 / ${d.entries} 条条目 → ${d.dir}`,
+    `格式: ${d.format}　凭据: ${d.withSecrets ? '含明文' : '已打码'}`,
+  ];
+  for (const f of d.files) lines.push(`  ${f.path}　${f.bytes} 字节`);
+  return lines.join('\n');
+}
+
+export function renderExportList(d) {
+  const lines = [`导出目录: ${d.dirs.join(' , ')}　历史 ${d.count} 条`];
+  for (const h of d.history) {
+    lines.push(`  ${h.at}　${h.format}　${h.sections} 栏目 / ${h.entries} 条目　${h.withSecrets ? '含明文' : '已打码'}`);
+    for (const f of h.files) lines.push(`      ${f.path}${f.exists ? '' : '（已不在磁盘上）'}`);
+  }
+  if (d.disk.length) {
+    lines.push('', '目录内文件：');
+    for (const f of d.disk) lines.push(`  ${f.dir}/${f.name}`);
+  }
+  return lines.join('\n');
+}

package/src/modules/export/view.jsx

@@ -0,0 +1,155 @@
+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';
+
+export default function ExportView() {
+  const { boot, toast, guard } = useStore();
+  const [sections, setSections] = useState([]);
+  const [history, setHistory] = useState(null);
+  const [form, setForm] = useState({ format: 'both', section: '', out: '', withSecrets: false });
+  const [modal, setModal] = useState(null);
+
+  const load = useCallback(async () => {
+    try {
+      const [s, h] = await Promise.all([api('/api/sections'), api('/api/exports')]);
+      setSections(s.sections);
+      setHistory(h);
+    } catch (e) {
+      toast(e.message, 'bad');
+    }
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  useEffect(() => {
+    const s = boot?.settings;
+    if (!s) return;
+    setForm((f) => ({ ...f, format: s.exportFormat || 'both', withSecrets: !!s.includeSecretsInExport, out: s.exportDir || '' }));
+  }, [boot]);
+
+  const body = () => ({
+    format: form.format,
+    out: form.out.trim() || undefined,
+    section: form.section || undefined,
+    ...(form.withSecrets ? { 'with-secrets': true } : { 'no-secrets': true }),
+  });
+
+  const run = guard(async (dryRun) => {
+    const r = await api('/api/export', { method: 'POST', body: { ...body(), 'dry-run': !!dryRun } });
+    if (dryRun) {
+      setModal({
+        title: '试运行（没有写盘）',
+        body: <pre className="block">{`目录: ${r.wouldWrite.dir}\n栏目: ${r.wouldWrite.sections}　条目: ${r.wouldWrite.entries}\n凭据: ${r.wouldWrite.withSecrets ? '含明文' : '已打码'}\n\n${r.wouldWrite.files.map((f) => `${f.name}  ${f.bytes} 字节`).join('\n')}`}</pre>,
+      });
+      return;
+    }
+    toast(`已导出到 ${r.dir}`);
+    setModal({
+      title: '导出完成',
+      body: (
+        <div className="stack">
+          <div>目录 <Copyable className="mono" text={r.dirRaw}>{r.dir}</Copyable></div>
+          <div className="muted">{r.sections} 个栏目 / {r.entries} 条条目 · 凭据：{r.withSecrets ? '含明文' : '已打码'}</div>
+          <pre className="block">{r.files.map((f) => `${f.path}  ${f.bytes} 字节`).join('\n')}</pre>
+        </div>
+      ),
+    });
+    await load();
+  });
+
+  return (
+    <>
+      <div className="toolbar rowgap pad">
+        <strong>导出</strong>
+        <span className="muted">把栏目数据导成可带走、可备份的文件</span>
+      </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.format} onChange={(e) => setForm({ ...form, format: 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></div>
+              <div className="fctrl">
+                <select value={form.section} onChange={(e) => setForm({ ...form, section: e.target.value })}>
+                  <option value="">全部栏目</option>
+                  {sections.map((s) => <option key={s.id} value={s.id}>{s.title}（{s.entries} 条）</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.out} onChange={(e) => setForm({ ...form, out: e.target.value })} placeholder="~/nx-sk/export" /></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.withSecrets} onChange={(e) => setForm({ ...form, withSecrets: e.target.checked })} />
+                  <span className={form.withSecrets ? 'bad' : 'muted'}>
+                    {form.withSecrets ? '导出明文密钥（导出文件将含真实凭据，注意存放位置）' : '只导出打码后的凭据'}
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="rowgap" style={{ marginTop: 8 }}>
+            <button className="btn" onClick={() => run(false)}>开始导出</button>
+            <button className="btn ghost" onClick={() => run(true)}>试运行（不写盘）</button>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="colhead">历次导出<span className="right muted">{history?.count ?? 0}</span></div>
+        <div className="colbody">
+          {history?.history?.length ? history.history.map((h, i) => (
+            <div key={`${h.at}-${i}`} className="row">
+              <span className="name">{h.at}</span>
+              <Tag>{h.format}</Tag>
+              {h.withSecrets ? <Tag kind="bad">含明文</Tag> : <Tag>已打码</Tag>}
+              <span className="desc">{h.dir}</span>
+              <span className="acts">
+                <span className="tag">{h.sections} 栏目</span>
+                <span className="tag">{h.entries} 条目</span>
+              </span>
+            </div>
+          )) : <Empty>还没有导出记录。</Empty>}
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="colhead">导出目录里的文件<span className="right muted">{history?.disk?.length ?? 0}</span></div>
+        <div className="colbody">
+          {(history?.dirs || [history?.dir]).filter(Boolean).map((d) => (
+            <div key={d} className="row">
+              <span className="desc">目录</span>
+              <span className="acts"><Copyable className="mono" text={d}>{d}</Copyable></span>
+            </div>
+          ))}
+          {history?.disk?.length ? history.disk.map((f) => (
+            <div key={`${f.dir}/${f.name}`} className="row">
+              <span className="mono name">{f.name}</span>
+              <span className="desc mono nowrap">{f.dir}</span>
+            </div>
+          )) : <Empty>目录里还没有文件。</Empty>}
+        </div>
+      </div>
+
+      <CliHints module="export" />
+
+      {modal ? <Modal title={modal.title} onClose={() => setModal(null)}>{modal.body}</Modal> : null}
+    </>
+  );
+}