nx-sk 0.3.4 → 0.6.0

package/src/modules/sections/service.js

@@ -3,7 +3,7 @@
 import { loadStore, mutateStore, snapshotStore } from '../../core/store.js';
 import { assertFieldKey, assertSafeId } from '../../core/paths.js';
 import { badInput, blocked, conflict, notFound } from '../../core/errors.js';
-import { FILL_POLICIES, FIELD_TYPES, findSection, groupFields, instantiateTemplate, sectionNames, syncSectionGroups, templateSummaries } from '../../core/fields.js';
+import { FILL_POLICIES, FIELD_TYPES, findSection, getTemplate, groupFields, instantiateTemplate, mergeTemplate, sectionNames, syncSectionGroups, templateSummaries } from '../../core/fields.js';
 import { dumpSection, formatValue } from '../../core/render.js';
 import { sensitiveViewer } from '../../core/vault.js';
 import { nowIso } from '../../core/ids.js';
@@ -207,6 +207,15 @@ export async function updateSection(ref, patch = {}) {
     }
   }
 
+  // 不变量：分组声明 ⊇ 字段引用。add-field 若引用了未声明的分组，
+  // 必须在这里补上声明——否则面板读声明数组渲染，整组字段会静默消失
+  // （CLI 从字段推导所以看不出来，这个坑在 servers 栏目踩过一次）。
+  if (changes.fields) {
+    const base = changes.groups || target.groups;
+    const synced = syncSectionGroups(base, changes.fields);
+    if (synced.length !== base.length) changes.groups = synced;
+  }
+
   if (!Object.keys(changes).length) {
     throw badInput('没有要修改的内容（可改 title / description / order / fields / groups / add-field / remove-field / fill）');
   }
@@ -224,6 +233,41 @@ export async function updateSection(ref, patch = {}) {
   return { status: 'ok', id: target.id, changed: Object.keys(changes), added, removed, fillChanged, section: summarize(after, mustFind(after, target.id)), snapshot };
 }
 
+/**
+ * 按模板补齐栏目字段：把模板里新增、而本栏目还缺的分组与字段补进来（只增不改不删）。
+ *
+ * 用途：栏目字段字典是持久化数据，模板演进不会回溯。用户在模板里加了字段
+ * （例如给求职加了 `file` 类型的「附件资料」组），但**已经建好的栏目**看不到——
+ * 跑一次 `section sync` 就能把缺口补上，且不动用户已有的定义与数据。
+ */
+export async function syncSection(ref, { 'dry-run': dryRun } = {}) {
+  const store = await loadStore();
+  const target = mustFind(store, ref);
+  if (!target.template) {
+    throw badInput(`栏目「${target.title}」不是由模板创建的（template 为空），没有可同步的模板；加字段请用 section update --add-field。`);
+  }
+  const tpl = getTemplate(target.template);
+  if (!tpl) throw badInput(`栏目记录了模板 ${target.template}，但该模板已不存在（可能被重命名或移除）。`);
+
+  const { groups, fields, addedGroups, addedFields } = mergeTemplate(target, tpl);
+  if (!addedGroups.length && !addedFields.length) {
+    return { status: 'ok', upToDate: true, id: target.id, addedGroups: [], addedFields: [], section: summarize(store, target) };
+  }
+  if (dryRun) {
+    return { status: 'skipped', dryRun: true, wouldSync: { groups: addedGroups, fields: addedFields } };
+  }
+
+  const snapshot = await snapshotStore(`section-sync-${target.id}`);
+  await mutateStore((s) => {
+    const t = mustFind(s, ref);
+    t.groups = groups;
+    t.fields = fields;
+    t.updatedAt = nowIso();
+  });
+  const after = await loadStore();
+  return { status: 'ok', id: target.id, addedGroups, addedFields, section: summarize(after, mustFind(after, target.id)), snapshot };
+}
+
 /**
  * remove 的幂等性选择：**报 NOT_FOUND**（默认推荐）——能从错别字里救用户一把。
  * 这条写进 summary，两端一致。
@@ -322,7 +366,7 @@ export function renderSectionDump(d) {
 }
 
 export function renderSectionChange(d) {
-  if (d.status === 'skipped') return `试运行（未落盘）：${JSON.stringify(d.wouldCreate || d.wouldChange || d.wouldRemove)}`;
+  if (d.status === 'skipped') return `试运行（未落盘）：${JSON.stringify(d.wouldCreate || d.wouldChange || d.wouldRemove || d.wouldSync)}`;
   // `removed` 在两条路径上形状不同：remove 给的是**对象** {id,title,entries}，
   // update 给的是**被删字段 key 的数组**。数组恒为真值，所以必须显式排除数组——
   // 否则 `section update` 会打印「已删除栏目 undefined」，
@@ -330,7 +374,16 @@ export function renderSectionChange(d) {
   if (d.removed && !Array.isArray(d.removed)) {
     return `已删除栏目 ${d.removed.id}（连带 ${d.removed.entries} 条条目）\n快照: ${d.snapshot}`;
   }
+  if (d.upToDate) return `栏目 ${d.id} 已是最新：模板里没有需要补的分组或字段。`;
   if (d.created) return `已创建栏目 ${d.section.id} · ${d.section.title}（${d.section.fields} 字段）\n快照: ${d.snapshot}`;
+  // sync：只增不改——把模板新增、栏目还缺的分组/字段补进来
+  if (d.addedFields || d.addedGroups) {
+    const bits = [
+      d.addedGroups?.length ? `新增分组 ${d.addedGroups.join(', ')}` : '',
+      d.addedFields?.length ? `新增字段 ${d.addedFields.join(', ')}` : '',
+    ].filter(Boolean).join('；');
+    return `已同步栏目 ${d.id} 的模板字段：${bits}\n快照: ${d.snapshot}`;
+  }
   const extra = [
     d.added?.length ? `新增字段 ${d.added.join(', ')}` : '',
     d.removed?.length ? `删除字段 ${d.removed.join(', ')}` : '',

package/src/modules/sections/view.jsx

@@ -3,7 +3,7 @@ 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'];
+const TYPES = ['text', 'textarea', 'number', 'date', 'month', 'bool', 'select', 'tags', 'secret', 'file'];
 
 export default function SectionsView() {
   const { reload, toast, guard, dialog } = useStore();
@@ -74,6 +74,24 @@ export default function SectionsView() {
     await load();
   });
 
+  // 按模板补齐：模板新增的字段不会回溯到已建栏目，这里把缺口补上（只增不改不删）
+  const syncFields = guard(async (m) => {
+    const r = await api(`/api/sections/${encodeURIComponent(m.id)}/sync`, { method: 'POST' });
+    if (r.upToDate) {
+      toast('已是最新，模板里没有需要补的字段');
+      return;
+    }
+    const bits = [
+      r.addedGroups?.length ? `分组 ${r.addedGroups.join('、')}` : '',
+      r.addedFields?.length ? `字段 ${r.addedFields.join('、')}` : '',
+    ].filter(Boolean).join('；');
+    toast(`已按模板补齐：${bits || '无变化'}`);
+    const fresh = await api(`/api/sections/${encodeURIComponent(m.id)}`);
+    setModal({ ...m, full: fresh });
+    await load();
+    await reload();
+  });
+
   const removeField = guard(async (m, key) => {
     const ok = await dialog({ message: `从字段字典里删掉「${key}」？已填的值会留在条目里（只是不再显示/校验）。`, danger: true, confirmText: '删除字段' });
     if (!ok) return;
@@ -157,6 +175,7 @@ export default function SectionsView() {
               modal={modal}
               onChange={(f) => setModal((m) => ({ ...m, form: { ...m.form, ...f } }))}
               onSave={() => saveEdit(modal)}
+              onSync={() => syncFields(modal)}
               onAddField={(def) => addField(modal, def)}
               onRemoveField={(key) => removeField(modal, key)}
               onClose={() => setModal(null)}
@@ -212,7 +231,7 @@ function CreateForm({ templates, form, onChange, onSubmit }) {
   );
 }
 
-function EditForm({ modal, onChange, onSave, onAddField, onRemoveField, onClose }) {
+function EditForm({ modal, onChange, onSave, onSync, onAddField, onRemoveField, onClose }) {
   const [nf, setNf] = useState({ key: '', label: '', type: 'text', group: '' });
   const full = modal.full;
   const groups = full?.groupList || [];
@@ -247,8 +266,17 @@ function EditForm({ modal, onChange, onSave, onAddField, onRemoveField, onClose
       </div>
       <div className="rowgap">
         <button className="btn" onClick={onSave}>保存栏目属性</button>
+        {full?.template ? (
+          <button className="btn ghost" onClick={onSync} title={`按模板「${full.template}」补齐新增的分组与字段（只增不改不删）`}>同步模板字段</button>
+        ) : null}
         <button className="btn ghost" onClick={onClose}>关闭</button>
       </div>
+      {full?.template ? (
+        <div className="hint">
+          本栏目由模板「{full.template}」创建。模板后来新增的字段**不会自动**出现在这里，
+          点「同步模板字段」补齐（例如求职模板新增的「附件资料」组 / 简历、头像等 file 字段）。
+        </div>
+      ) : null}
 
       <div className="card" style={{ border: '1px solid var(--soft-2)', borderRadius: 4 }}>
         <div className="colhead">字段字典（{full?.fieldList?.length || 0}）</div>

package/src/runtime/api.js

@@ -5,7 +5,8 @@ import { AppError, CODES, httpStatusOf, toErrorShape } from '../core/errors.js';
 import { ACTIONS } from './registry.js';
 import { applySpec, compareRoutes, compileRoute, usageOf } from './spec.js';
 
-const MAX_BODY = 4 * 1024 * 1024;
+// 附件可能是扫描件/照片，base64 再膨胀约 1/3；32MB 上限覆盖绝大多数简历、成绩单与头像
+const MAX_BODY = 32 * 1024 * 1024;
 
 export const ROUTES = ACTIONS
   .filter((a) => Array.isArray(a.http))
@@ -88,6 +89,14 @@ export async function handleApi(req, res, url) {
 
   try {
     const ctx = applySpec(route.action, raw);
+    // raw action：直接把文件本体流式写回，不走 JSON 包装（预览/下载附件用）
+    if (route.action.raw === true) {
+      if (typeof route.action.serveRaw !== 'function') {
+        throw new AppError(CODES.INTERNAL, `raw action 缺少 serveRaw: ${route.action.id}`);
+      }
+      await route.action.serveRaw(ctx, { req, res, url, transport: 'http' });
+      return;
+    }
     const data = await route.action.run(ctx, { transport: 'http' });
     return send(res, 200, { ok: true, data: data === undefined ? null : data });
   } catch (err) {

package/src/runtime/registry.js

@@ -5,13 +5,15 @@ import { cliPathsOf, usageOf } from './spec.js';
 
 import sections from '../modules/sections/index.js';
 import entries from '../modules/entries/index.js';
+import files from '../modules/files/index.js';
 import exportModule from '../modules/export/index.js';
+import backup from '../modules/backup/index.js';
 import skill from '../modules/skill/index.js';
 import settings from '../modules/settings/index.js';
 import system from '../modules/system/index.js';
 
 // 顺序 = 面板 tab 顺序与 help 分组顺序（system 放最后，它是聚合模块）
-export const MODULES = [sections, entries, exportModule, skill, settings, system]
+export const MODULES = [sections, entries, files, exportModule, backup, skill, settings, system]
   .slice()
   .sort((a, b) => (a.order || 50) - (b.order || 50));
 

package/src/web/frontend/App.jsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useMemo } from 'react';
+import { Fragment, Suspense, useEffect, useMemo } from 'react';
 import { SECTION_VIEW, VIEWS } from './registry.js';
 import { Copyable, DialogHost, ErrorBoundary, Toasts } from './components/ui.jsx';
 import { useStore } from './store.jsx';
@@ -26,7 +26,11 @@ export default function App() {
       .filter((t) => (seen.has(t.id) ? false : (seen.add(t.id), true)));
   }, [boot]);
 
-  const current = tabs.find((t) => t.id === ui.view) || tabs[0] || null;
+  // 没 boot 之前**不要**拿 tabs[0] 兜底：那时动态栏目还没到，tabs 里只有静态视图，
+  // 兜底会选中第一个静态视图并由下面的 effect 写进 ui —— 于是「默认视图 = 求职」被顶掉、
+  // 头部高亮也错位成「栏目」，连 `#/job` 这类深链都会被首屏覆盖。
+  const booted = !!boot;
+  const current = tabs.find((t) => t.id === ui.view) || (booted ? tabs[0] : null) || null;
 
   // hash 与 localStorage 双写对齐：只在挂载时对齐一次，之后交给 hashchange
   useEffect(() => {
@@ -43,8 +47,8 @@ export default function App() {
   }, [patchUi]);
 
   useEffect(() => {
-    if (current && current.id !== ui.view) patchUi({ view: current.id });
-  }, [current, ui.view, patchUi]);
+    if (booted && current && current.id !== ui.view) patchUi({ view: current.id });
+  }, [booted, current, ui.view, patchUi]);
 
   const go = (id) => {
     patchUi({ view: id });
@@ -53,27 +57,40 @@ export default function App() {
 
   return (
     <div className="app">
+      {/* 身份栏：左边只说「我是谁」，右边才是「存储在哪 / 能做什么」。
+          原先 4 段信息（品牌 / 副标题 / 版本 / 存储路径）平铺成一行、字号相近，
+          读起来分不出主次；现在按 品牌 ▸ 定位 ▸ 版本 三级收拢，元信息整体右移。 */}
       <header className="top">
-        <span className="brand">nx-sk</span>
-        <span className="meta">本机个人资源管理器{boot ? ` · v${boot.app.version}` : ''}</span>
-        {boot ? (
-          <span className="meta">
-            存储 <Copyable className="mono" text={boot.storePathRaw}>{boot.storePath}</Copyable>
-          </span>
-        ) : null}
+        <span className="brand">
+          <img src="/logo-rounded.png" alt="" />
+          nx-sk
+        </span>
+        <span className="tagline">本机个人资源管理器</span>
+        {boot ? <span className="ver mono">v{boot.app.version}</span> : null}
         <span className="right rowgap">
+          {boot ? (
+            <span className="store" title={`存储目录：${boot.storePathRaw}`}>
+              <span className="store-label">存储</span>
+              <Copyable className="mono nowrap" text={boot.storePathRaw}>{boot.storePath}</Copyable>
+            </span>
+          ) : null}
           <button className="btn small ghost" onClick={() => reload()}>刷新数据</button>
         </span>
       </header>
 
+      {/* 导航栏：内容（栏目）在前、工具（栏目/附件/导出/…）在后，中间加一道细线分组，
+          否则十几个同级 pill 连成一排，看不出「哪些是自己的数据、哪些是系统功能」。 */}
       <nav className="tabs">
-        {tabs.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>
+        {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>
         ))}
-        {!tabs.length ? <span className="meta">正在装载…</span> : null}
+        {!tabs.length ? <span className="muted">正在装载…</span> : null}
       </nav>
 
       <main className="body">
@@ -84,7 +101,8 @@ export default function App() {
             <div className="hint">确认 nx-sk serve 正在运行；或点右上角「刷新数据」重试。</div>
           </div>
         ) : null}
-        {!bootError && current ? (
+        {!bootError && !booted ? <div className="pad muted">正在装载…</div> : null}
+        {!bootError && booted && current ? (
           <ErrorBoundary key={current.id}>
             <Suspense fallback={<div className="pad muted">加载中…</div>}>
               {current.kind === 'section'

package/src/web/frontend/api/files.js

@@ -0,0 +1,28 @@
+// 附件库的前端读取：带缓存的列表，供字段编辑器等多处复用。
+// 工作台导入/删除后调 refreshAttachments() 失效缓存。
+import { api } from './client.js';
+
+let pending = null;
+
+export function listAttachments(force = false) {
+  if (!force && pending) return pending;
+  pending = api('/api/files')
+    .then((d) => d)
+    .catch((e) => { pending = null; throw e; });
+  return pending;
+}
+
+export function refreshAttachments() {
+  pending = null;
+  return listAttachments(true);
+}
+
+/** 读取 File 对象为 base64（data URL）。 */
+export function fileToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(new Error('读取文件失败'));
+    reader.readAsDataURL(file);
+  });
+}

package/src/web/frontend/components/fieldEditor.jsx

@@ -1,9 +1,80 @@
 // 字段编辑器：按字段字典的 type 决定控件。
 // 字典来自后端（section.fields），所以**面板能填的字段与 CLI 能填的字段天然一致**。
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { api } from '../api/client.js';
+import { fileToDataUrl, listAttachments, refreshAttachments } from '../api/files.js';
+import { Copyable } from './ui.jsx';
+import { useStore } from '../store.jsx';
+
+/**
+ * file 字段控件：值 = 附件 id。
+ * **上传 / 选择就发生在这里**（栏目条目的字段里）——「文件在栏目中链接」；
+ * 「附件」中心只负责统一展示与库存管理，不在这里做指派，也不预定义任何槽位。
+ */
+export function FileFieldControl({ def, value, onChange }) {
+  const { toast, guard, patchUi } = useStore();
+  const [data, setData] = useState(null);
+  const uploadRef = useRef(null);
+  const id = value || '';
+
+  const load = useCallback(async () => {
+    try { setData(await listAttachments()); } catch { /* 附件库读不到时仍可上传 */ }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const current = (data?.files || []).find((f) => f.id === id) || null;
+
+  const upload = guard(async (fileList) => {
+    const file = fileList?.[0];
+    if (!file) return;
+    const content = await fileToDataUrl(file);
+    const r = await api('/api/files', { method: 'POST', body: { content, name: file.name } });
+    onChange(r.id);
+    toast(r.duplicated ? '库中已有相同文件，已直接引用' : '已上传并关联');
+    setData(await refreshAttachments());
+  });
+
+  return (
+    <div className="file-picker">
+      {current ? (
+        <div className="file-preview">
+          {current.isImage
+            ? <img src={current.url} alt={current.name} />
+            : <span className="ext-badge" style={{ fontSize: 13, width: 40, textAlign: 'center' }}>{current.ext ? current.ext.slice(1).toUpperCase() : 'FILE'}</span>}
+          <a className="file-preview-name grow" href={current.url} target="_blank" rel="noreferrer" title={current.displayPath}>{current.name}</a>
+          <a className="btn small ghost" href={current.downloadUrl}>下载</a>
+          <Copyable className="hint" text={current.path} title="点击复制物理路径">路径</Copyable>
+          <button type="button" className="btn small ghost" onClick={() => onChange('')}>清除</button>
+        </div>
+      ) : null}
+      <div className="file-pick-row">
+        <select value={id} onChange={(e) => onChange(e.target.value)}>
+          <option value="">（未选择：从附件库选一个）</option>
+          {(data?.files || []).map((f) => <option key={f.id} value={f.id}>{f.name}</option>)}
+        </select>
+        <button type="button" className="btn small" onClick={() => uploadRef.current?.click()}>上传文件</button>
+        <button type="button" className="btn small ghost" onClick={() => patchUi({ view: 'files' })}>附件中心</button>
+        <input
+          ref={uploadRef}
+          type="file"
+          style={{ display: 'none' }}
+          onChange={(e) => { upload(e.target.files); e.target.value = ''; }}
+        />
+      </div>
+      {id && !current ? <span className="hint bad">引用的附件已不存在（{id}）—— 重新上传，或清除。</span> : null}
+      {def.hint ? <span className="hint">{def.hint}</span> : null}
+    </div>
+  );
+}
+
 export function FieldControl({ def, value, onChange, disabled }) {
   const type = def.type || 'text';
   const v = value === null || value === undefined ? '' : value;
 
+  if (type === 'file') {
+    return <FileFieldControl def={def} value={v} onChange={onChange} />;
+  }
+
   if (type === 'bool') {
     const checked = v === true || v === 'true' || v === '是';
     return (
@@ -64,7 +135,7 @@ export function FieldGroup({ title, fields, draft, onPatch }) {
       <div className="pad">
         <div className="grid">
           {fields.map((def) => (
-            <div key={def.key} className={`field ${def.type === 'textarea' ? 'wide' : ''}`}>
+            <div key={def.key} className={`field ${def.type === 'textarea' || def.type === 'file' ? 'wide' : ''}`}>
               <div className="flabel">
                 <span>{def.label}</span>
                 {def.sensitive ? <span className="tag bad">密文</span> : null}

package/src/web/frontend/index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>nx-sk · 个人资源管理器</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/logo-rounded.png" />
   </head>
   <body>
     <div id="root"></div>

package/src/web/frontend/registry.js

@@ -10,7 +10,9 @@ import { lazy } from 'react';
 export const VIEWS = [
   { id: 'sections', title: '栏目', order: 500, component: lazy(() => import('../../modules/sections/view.jsx')) },
   { id: 'entries', title: '条目', order: 600, tab: false, component: lazy(() => import('../../modules/entries/view.jsx')) },
+  { id: 'files', title: '附件', order: 650, component: lazy(() => import('../../modules/files/view.jsx')) },
   { id: 'export', title: '导出', order: 700, component: lazy(() => import('../../modules/export/view.jsx')) },
+  { id: 'backup', title: '加密备份', order: 750, component: lazy(() => import('../../modules/backup/view.jsx')) },
   { id: 'settings', title: '设置', order: 900, component: lazy(() => import('../../modules/settings/view.jsx')) },
 ];
 

package/src/web/frontend/styles.css

@@ -58,22 +58,43 @@ header.top {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 10px;
-  padding: 6px 14px;
+  gap: 12px;
+  padding: 10px 14px;
   border-bottom: var(--border);
   flex-shrink: 0;
 }
-header.top .brand { font-weight: 700; letter-spacing: .3px; }
-header.top .meta { color: var(--mid); font-size: 11px; }
+/* 品牌：头部唯一的「标题级」元素，字号/字重都要压过其它所有文字 */
+header.top .brand { font-size: 15px; font-weight: 700; letter-spacing: .2px; line-height: 1; display: inline-flex; align-items: center; gap: 8px; }
+header.top .brand img { width: 22px; height: 22px; border-radius: 6px; display: block; }
+/* 定位语：紧贴品牌但从属——更小更淡，别和品牌抢第一眼 */
+header.top .tagline { color: var(--mid); font-size: 11px; }
+/* 版本：做成 chip，避免「本机个人资源管理器 v0.5.0」连成一句话读 */
+header.top .ver {
+  font-size: 10px;
+  color: var(--mid);
+  background: var(--soft);
+  border: var(--border);
+  border-radius: 999px;
+  padding: 1px 8px;
+  line-height: 1.7;
+}
+/* 右侧元信息 + 操作：存储路径降级成弱信息，别在头部最显眼处**
+   挤一段长路径（超长时省略号截断，完整值看 title） */
+header.top .store { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--mid); }
+header.top .store .store-label { color: var(--mid); }
+header.top .store .copyable { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 nav.tabs {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border-bottom: var(--border);
   flex-shrink: 0;
 }
+/* 分组细线：内容栏目 ‖ 系统工具 */
+.tabs-sep { width: 1px; height: 18px; background: var(--soft-2); margin: 0 4px; }
 
 main.body { flex: 1; min-height: 0; overflow: auto; }
 
@@ -90,9 +111,10 @@ main.body { flex: 1; min-height: 0; overflow: auto; }
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 7px;
 }
-.tab .count { color: var(--mid); font-size: 11px; }
+/* 计数是「元数据」不是名字的一部分：更小 + 等宽数字，让它退到标签之后 */
+.tab .count { color: var(--mid); font-size: 10px; font-variant-numeric: tabular-nums; }
 .tab.active { background: var(--paper); box-shadow: var(--shadow-relief); font-weight: 600; }
 
 /* ── 按钮：凸起 → 按下内嵌 + 下沉 1px ── */
@@ -299,3 +321,79 @@ pre.block {
 .col { flex: 1; min-width: 0; }
 .desc { color: var(--mid); }
 .cols > .col > .card { border: var(--border); border-radius: 4px; }
+
+/* ── 附件工作台 ─────────────────────────────────────── */
+.files-page { min-height: 100%; position: relative; }
+.files-page.drag-over { outline: 2px dashed var(--ink); outline-offset: -8px; background: var(--soft); }
+.tab.small { height: 22px; padding: 0 8px; font-size: 11px; border-radius: 6px; }
+.file-filters { padding-top: 4px; padding-bottom: 4px; }
+.drop-hint {
+  margin: 0 14px; padding: 18px; text-align: center;
+  border: 1px dashed var(--ink); border-radius: 8px;
+  background: var(--paper); font-weight: 600;
+}
+
+.file-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 10px;
+}
+.file-card {
+  display: flex;
+  flex-direction: column;
+  border: var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--paper);
+}
+.file-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  background: var(--soft);
+  border-bottom: var(--border);
+}
+.file-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.ext-badge {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: var(--mid);
+  font-family: ui-monospace, Consolas, monospace;
+}
+.file-meta { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 4px; }
+a.file-name {
+  color: var(--ink);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+a.file-name:hover { text-decoration: underline; }
+.file-acts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px 8px;
+  margin-top: auto;
+}
+.btn.ghost.danger-ghost { color: var(--danger); }
+
+/* ── 字段里的附件选择器 ─────────────────────────────── */
+.file-picker { display: flex; flex-direction: column; gap: 4px; }
+.file-picker .file-pick-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.file-picker select { flex: 1; min-width: 120px; }
+.file-preview {
+  display: flex; align-items: center; gap: 8px;
+  border: var(--border); border-radius: 6px; padding: 4px 8px;
+  background: var(--soft);
+}
+.file-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: var(--border); background: #fff; }
+.file-preview .file-preview-name {
+  color: var(--ink); text-decoration: none; font-weight: 600;
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.file-preview .file-preview-name:hover { text-decoration: underline; }

package/src/web/public/assets/files-BNh48qeo.js

@@ -0,0 +1 @@
+import{a as l}from"./index-B7CtqgoG.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};