nx-sk 0.3.0

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

@@ -0,0 +1,26 @@
+const DEFAULT_TIMEOUT_MS = 30000;
+
+export async function api(path, opts = {}) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), opts.timeoutMs || DEFAULT_TIMEOUT_MS);
+  try {
+    const res = await fetch(path, {
+      method: opts.method || 'GET',
+      headers: opts.body ? { 'content-type': 'application/json' } : undefined,
+      body: opts.body ? JSON.stringify(opts.body) : undefined,
+      signal: ctrl.signal,
+    });
+    const json = await res.json().catch(() => { throw new Error(`HTTP ${res.status}`); });
+    if (!json.ok) {
+      const err = new Error(json.error || '请求失败');
+      err.code = json.code; // 调用方可据此区分冲突与参数错误
+      throw err;
+    }
+    return json.data;
+  } catch (e) {
+    if (e && e.name === 'AbortError') throw new Error('请求超时（本地服务无响应）');
+    throw e;
+  } finally {
+    clearTimeout(timer);
+  }
+}

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

@@ -0,0 +1,85 @@
+// 字段编辑器：按字段字典的 type 决定控件。
+// 字典来自后端（section.fields），所以**面板能填的字段与 CLI 能填的字段天然一致**。
+export function FieldControl({ def, value, onChange, disabled }) {
+  const type = def.type || 'text';
+  const v = value === null || value === undefined ? '' : value;
+
+  if (type === 'bool') {
+    const checked = v === true || v === 'true' || v === '是';
+    return (
+      <label className="inline">
+        <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+        <span className="muted">{checked ? '是' : '否'}</span>
+      </label>
+    );
+  }
+
+  if (type === 'select') {
+    const options = def.options || [];
+    const isCustom = v !== '' && !options.includes(v);
+    return (
+      <select value={isCustom ? '__custom' : String(v)} onChange={(e) => onChange(e.target.value === '__custom' ? '' : e.target.value)}>
+        <option value="">（未填写）</option>
+        {options.map((o) => <option key={o} value={o}>{o}</option>)}
+        {isCustom ? <option value="__custom">{String(v)}（当前值，不在候选里）</option> : null}
+      </select>
+    );
+  }
+
+  if (type === 'textarea') {
+    return <textarea value={String(v)} onChange={(e) => onChange(e.target.value)} rows={3} />;
+  }
+
+  if (type === 'tags') {
+    const text = Array.isArray(v) ? v.join('、') : String(v);
+    return (
+      <input
+        value={text}
+        placeholder={def.maxItems ? `多个用「、」分隔，最多 ${def.maxItems} 个` : '多个用「、」分隔'}
+        onChange={(e) => onChange(e.target.value.split(/[,，、;；]+/).map((x) => x.trim()).filter(Boolean))}
+      />
+    );
+  }
+
+  const inputType = type === 'number' ? 'number' : (type === 'date' ? 'date' : (type === 'month' ? 'month' : 'text'));
+  if (type === 'secret') {
+    return (
+      <input
+        type="text"
+        value={String(v)}
+        placeholder="密文落盘；原样保留占位则视为不修改"
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    );
+  }
+  return <input type={inputType} value={String(v)} onChange={(e) => onChange(e.target.value)} />;
+}
+
+/** 一整组字段（同一 group）的矩阵。 */
+export function FieldGroup({ title, fields, draft, onPatch }) {
+  return (
+    <>
+      <div className="group-title">{title}</div>
+      <div className="pad">
+        <div className="grid">
+          {fields.map((def) => (
+            <div key={def.key} className={`field ${def.type === 'textarea' ? 'wide' : ''}`}>
+              <div className="flabel">
+                <span>{def.label}</span>
+                {def.sensitive ? <span className="tag bad">密文</span> : null}
+                {/* 填写策略来自后端字段字典；不计入完整度，所以标签用中性色而不是红色——
+                    用户是**主动**跳过它，不是出错。 */}
+                {def.fill && def.fill !== 'normal' ? <span className="tag">{def.fillLabel || def.fill}</span> : null}
+                <span className="fkey">{def.key}</span>
+              </div>
+              <div className="fctrl">
+                <FieldControl def={def} value={draft[def.key]} onChange={(v) => onPatch(def.key, v)} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,143 @@
+import { Component, Fragment, useEffect, useRef } from 'react';
+import { useStore } from '../store.jsx';
+
+export function Copyable({ text, children, className = '', title }) {
+  const { toast } = useStore();
+  const onClick = async () => {
+    const value = String(text ?? '');
+    try {
+      await navigator.clipboard.writeText(value);
+      toast('已复制');
+    } catch {
+      toast('复制失败：浏览器拒绝了剪贴板访问', 'bad');
+    }
+  };
+  return (
+    <span
+      className={`copyable ${className}`}
+      title={title || `点击复制：${text}`}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Enter') onClick(); }}
+    >
+      {children ?? text}
+    </span>
+  );
+}
+
+export function Tag({ children, kind = '' }) {
+  return <span className={`tag ${kind}`}>{children}</span>;
+}
+
+/** 懒加载视图的兜底：没有它，一个视图崩掉就是**整页白屏**，用户连切 tab 自救都不行。 */
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { err: null };
+  }
+
+  static getDerivedStateFromError(err) {
+    return { err };
+  }
+
+  render() {
+    if (this.state.err) {
+      return (
+        <div className="pad stack">
+          <div><strong>这个视图崩了</strong></div>
+          <div className="muted">{String(this.state.err?.message || this.state.err)}</div>
+          <div className="hint">切到别的 tab 仍然可用；修好之后本页会自愈。</div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export function Toasts() {
+  const { toasts } = useStore();
+  if (!toasts.length) return null;
+  return (
+    <div className="toasts">
+      {toasts.map((t) => <div key={t.id} className={`toast ${t.kind === 'ok' ? '' : 'bad'}`}>{t.message}</div>)}
+    </div>
+  );
+}
+
+export function Modal({ title, children, onClose, footer }) {
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onClose?.(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  return (
+    <div className="mask" onClick={(e) => { if (e.target === e.currentTarget) onClose?.(); }}>
+      <div className="dialog">
+        <div className="dialog-title">
+          <span className="grow nowrap">{title}</span>
+          <button className="btn small ghost" onClick={onClose}>关闭</button>
+        </div>
+        <div className="dialog-body">{children}</div>
+        {footer ? <div className="dialog-foot">{footer}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+/** 确认弹窗。输入框用 ref 读，不用 document.querySelector（页面上出现第二个同名 class 就会读错）。 */
+export function DialogHost() {
+  const { dialogState, closeDialog } = useStore();
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (dialogState?.input && inputRef.current) inputRef.current.focus();
+  }, [dialogState]);
+  if (!dialogState) return null;
+  const { message, detail, danger, input, confirmText = '确定', cancelText = '取消', hideCancel } = dialogState;
+  return (
+    <div className="mask">
+      <div className="dialog">
+        <div className="dialog-title">{danger ? '危险操作' : '确认'}</div>
+        <div className="dialog-body stack">
+          <div>{message}</div>
+          {detail ? <pre className="block">{detail}</pre> : null}
+          {input ? (
+            <input ref={inputRef} defaultValue={input.defaultValue || ''} placeholder={input.placeholder || ''} />
+          ) : null}
+        </div>
+        <div className="dialog-foot">
+          {hideCancel ? null : <button className="btn ghost" onClick={() => closeDialog(null)}>{cancelText}</button>}
+          <button
+            className={`btn ${danger ? 'danger' : ''}`}
+            onClick={() => closeDialog(input ? (inputRef.current?.value ?? '') : true)}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 「这个页面每个按钮都有同构 CLI 命令」——提示**由数据派生**，不手写（手写必然与实际命令漂移）。 */
+export function CliHints({ module }) {
+  const { boot } = useStore();
+  const cmds = (boot?.commands || []).filter((c) => c.module === module);
+  if (!cmds.length) return null;
+  return (
+    <div className="cli-hint">
+      <span className="cli-hint-label">这个页面上的每个操作都有一条同构的 CLI 命令：</span>
+      {cmds.map((c, i) => (
+        <Fragment key={c.id}>
+          {i > 0 ? <span className="cli-hint-sep"> · </span> : null}
+          <Copyable className="cli-cmd" text={c.command} title={`点击复制：${c.usage}`}>{c.command}</Copyable>
+        </Fragment>
+      ))}
+      <span className="cli-hint-tail">。加 <code className="cli-cmd">--json</code> 得机器可读输出。</span>
+    </div>
+  );
+}
+
+export function Empty({ children }) {
+  return <div className="row muted">{children}</div>;
+}

package/src/web/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>nx-sk · 个人资源管理器</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>

package/src/web/frontend/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import { StoreProvider } from './store.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <StoreProvider>
+      <App />
+    </StoreProvider>
+  </StrictMode>,
+);

package/src/web/frontend/registry.js

@@ -0,0 +1,20 @@
+import { lazy } from 'react';
+
+// 新增面板 = 写组件 + 登记一行。tab 顺序由 order 决定。
+//
+// `tab: false` 的条目**不出现在导航里**，但仍然必须登记——它由「栏目」动态挂载
+// （每个栏目一个 tab，共用同一个视图）。一致性测试对的是「模块声明了 view ↔ 这里登记了」，
+// 而不是「有没有 tab」。
+//
+// 注意：必须用**字面量** lazy(() => import('...'))：变量拼路径会让 Vite 静态分析不了，失去代码分割。
+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: 'export', title: '导出', order: 700, component: lazy(() => import('../../modules/export/view.jsx')) },
+  { id: 'settings', title: '设置', order: 900, component: lazy(() => import('../../modules/settings/view.jsx')) },
+];
+
+export const SECTION_VIEW = VIEWS.find((v) => v.id === 'entries').component;
+
+/** 模块 id → 视图 id 的映射，供一致性测试核对「模块声明的 view」都登记过。 */
+export const VIEW_MODULE_IDS = VIEWS.map((v) => v.id);

package/src/web/frontend/store.jsx

@@ -0,0 +1,87 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { api } from './api/client.js';
+
+export const LS_KEY = 'nx-sk-ui';
+
+// 只持久化**选择**，不持久化**数据**——数据永远从 /api 拉，避免陈旧缓存。
+export const DEFAULT_UI = {
+  view: 'job', // 当前 tab
+  entry: '', // 各栏目选中的条目
+  q: '', // 搜索词
+  mask: false, // 打码显示密文字段（默认原文；投屏时勾上）
+};
+
+function loadUi() {
+  try {
+    return { ...DEFAULT_UI, ...JSON.parse(localStorage.getItem(LS_KEY) || '{}') };
+  } catch {
+    return { ...DEFAULT_UI };
+  }
+}
+
+const Ctx = createContext(null);
+
+export function StoreProvider({ children }) {
+  const [boot, setBoot] = useState(null);
+  const [bootError, setBootError] = useState(null);
+  const [ui, setUi] = useState(loadUi);
+  const [toasts, setToasts] = useState([]);
+  const [dialogState, setDialogState] = useState(null);
+
+  const patchUi = useCallback((patch) => {
+    setUi((prev) => {
+      const next = { ...prev, ...patch };
+      try { localStorage.setItem(LS_KEY, JSON.stringify(next)); } catch { /* 隐私模式 */ }
+      return next;
+    });
+  }, []);
+
+  const reload = useCallback(async () => {
+    try {
+      const data = await api('/api/bootstrap');
+      setBoot(data);
+      setBootError(null);
+      return data;
+    } catch (e) {
+      setBootError(e.message || String(e));
+      return null;
+    }
+  }, []);
+
+  useEffect(() => { reload(); }, [reload]);
+
+  const toast = useCallback((message, kind = 'ok') => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    setToasts((t) => [...t, { id, message, kind }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600);
+  }, []);
+
+  // Promise 风格：调用处读起来是同步的 —— `const ok = await dialog({...}); if (!ok) return;`
+  const dialog = useCallback((opts) => new Promise((resolve) => {
+    setDialogState({ ...opts, resolve });
+  }), []);
+
+  const closeDialog = useCallback((value) => {
+    setDialogState((cur) => { cur?.resolve?.(value); return null; });
+  }, []);
+
+  const guard = useCallback((fn) => async () => {
+    try {
+      await fn();
+    } catch (e) {
+      toast(e?.message || String(e), 'bad');
+    }
+  }, [toast]);
+
+  const value = useMemo(() => ({
+    boot, bootError, ui, patchUi, reload, toast, dialog, closeDialog, guard, toasts, dialogState,
+  }), [boot, bootError, ui, patchUi, reload, toast, dialog, closeDialog, guard, toasts, dialogState]);
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useStore() {
+  const v = useContext(Ctx);
+  if (!v) throw new Error('useStore 必须在 StoreProvider 内使用');
+  return v;
+}

package/src/web/frontend/styles.css

@@ -0,0 +1,301 @@
+/* nx-sk 面板样式
+ *
+ * 三条核心不变量：
+ *   1. 单色 + 无 emoji；唯一允许的彩色是语义红 #b3261e
+ *   2. 状态用标签，不用颜色块
+ *   3. 立体感**只给**可被按/可被填的元素（按钮 / 选中态 / 输入框）；容器一律不投影
+ *
+ * 密度：核心显示行 28px · 按钮 32px · 字号 12px（两级密度，差 4px）
+ * 分隔：全站只用 1px 浅底线，不用 margin / 投影把容器撑成岛屿
+ */
+:root {
+  --ink: #14161a;
+  --paper: #fff;
+  --soft: #f5f6f7;
+  --soft-2: #ebedf0;
+  --mid: #8b9096;
+  --danger: #b3261e;
+  --border: 1px solid var(--soft-2);
+
+  --row-h: 28px;
+  --btn-h: 32px;
+  --fs-core: 12px;
+
+  --radius-btn: 8px;
+
+  --shadow-relief: -1px -1px 2px rgba(255, 255, 255, .85), 2px 2px 6px rgba(20, 22, 26, .07);
+  --shadow-relief-press: inset 1px 1px 2px rgba(20, 22, 26, .10), inset -1px -1px 2px rgba(255, 255, 255, .7);
+  --shadow-relief-inset: inset 1px 1px 2px rgba(20, 22, 26, .06), inset -1px -1px 2px rgba(255, 255, 255, .9);
+}
+
+* { box-sizing: border-box; }
+
+html, body, #root { height: 100%; }
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
+  font-size: var(--fs-core);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+.mono, code, .path, .cli-cmd { font-family: ui-monospace, Consolas, "Courier New", monospace; }
+.muted { color: var(--mid); }
+.bad { color: var(--danger); }
+.nowrap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pad { padding: 10px 14px; }
+.rowgap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.grow { flex: 1; min-width: 0; }
+.right { margin-left: auto; }
+
+/* ── 骨架 ───────────────────────────────────────────── */
+.app { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+
+header.top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 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; }
+
+nav.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 14px;
+  border-bottom: var(--border);
+  flex-shrink: 0;
+}
+
+main.body { flex: 1; min-height: 0; overflow: auto; }
+
+/* ── tab：单层立体阴影，别叠 --shadow，叠两层就变岛屿 ── */
+.tab {
+  font: inherit;
+  font-size: var(--fs-core);
+  height: var(--btn-h);
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--radius-btn);
+  background: var(--soft);
+  color: var(--ink);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.tab .count { color: var(--mid); font-size: 11px; }
+.tab.active { background: var(--paper); box-shadow: var(--shadow-relief); font-weight: 600; }
+
+/* ── 按钮：凸起 → 按下内嵌 + 下沉 1px ── */
+.btn {
+  font: inherit;
+  font-size: var(--fs-core);
+  cursor: pointer;
+  height: var(--btn-h);
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--radius-btn);
+  background: var(--ink);
+  color: var(--paper);
+  box-shadow: var(--shadow-relief);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: box-shadow .12s, transform .08s;
+}
+.btn:hover:not(:disabled) { box-shadow: var(--shadow-relief), 0 0 0 3px rgba(20, 22, 26, .05); }
+.btn:active:not(:disabled) { box-shadow: var(--shadow-relief-press); transform: translateY(1px); }
+.btn:disabled { background: var(--soft); color: var(--mid); box-shadow: var(--shadow-relief-inset); cursor: not-allowed; }
+.btn.ghost { background: var(--soft); color: var(--ink); }
+.btn.danger { background: var(--danger); color: #fff; }
+.btn.small { height: 22px; padding: 0 8px; font-size: 11px; border-radius: 6px; }
+
+input, select, textarea {
+  font: inherit;
+  font-size: var(--fs-core);
+  color: var(--ink);
+  background: var(--paper);
+  border: var(--border);
+  border-radius: 6px;
+  padding: 0 8px;
+}
+input, select { height: var(--row-h); }
+textarea { padding: 5px 8px; resize: vertical; min-height: 56px; line-height: 1.5; }
+input:focus, select:focus, textarea:focus { outline: none; border-color: var(--soft-2); box-shadow: var(--shadow-relief-inset); }
+label.inline { display: inline-flex; align-items: center; gap: 6px; }
+
+/* ── 卡片：不投影、不 margin、不用大 padding；靠 1px 底线分隔 ── */
+.card { border-bottom: var(--border); }
+.card:last-child { border-bottom: 0; }
+.card > .colhead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--row-h);
+  padding: 0 14px;
+  border-bottom: var(--border);
+  font-size: 13px;
+  font-weight: 600;
+}
+.card > .colbody { padding: 0; }
+
+/* ── 行：28px 锁死高度，竖直 padding = 0 ── */
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--row-h);
+  padding: 0 14px;
+  border-bottom: var(--border);
+  font-size: var(--fs-core);
+  transition: background .12s;
+}
+.row:hover { background: var(--soft); }
+.row:last-child { border-bottom: 0; }
+.row .name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row .desc { color: var(--mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row .acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.row.selectable { cursor: pointer; }
+.row.selected { background: var(--soft); box-shadow: inset 2px 0 0 var(--ink); }
+
+/* ── 标签：比行更紧凑 ── */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--soft);
+  color: var(--mid);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.tag.strong { background: var(--ink); color: var(--paper); }
+.tag.bad { background: #fbeae9; color: var(--danger); }
+
+/* ── 点击即复制 ── */
+.copyable { cursor: copy; border-radius: 4px; padding: 0 3px; }
+.copyable:hover { background: var(--soft); }
+
+/* ── 表单字段矩阵 ── */
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 14px; }
+.field { border-bottom: var(--border); padding: 5px 0; min-width: 0; }
+.field > .flabel { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mid); }
+.field > .flabel .fkey { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--soft-2); }
+.field > .fctrl { margin-top: 3px; }
+.field input, .field select, .field textarea { width: 100%; }
+.field.wide { grid-column: 1 / -1; }
+.group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--row-h);
+  padding: 0 14px;
+  border-bottom: var(--border);
+  background: var(--soft);
+  font-size: 11px;
+  color: var(--mid);
+  letter-spacing: .5px;
+}
+
+/* ── CLI 提示：文案通顺，命令之间用间隔点分开 ── */
+.cli-hint {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 14px;
+  color: var(--mid);
+  font-size: 11px;
+  border-top: var(--border);
+}
+.cli-hint-label { margin-right: 4px; }
+.cli-hint-sep { color: var(--soft-2); }
+.cli-cmd { color: var(--ink); }
+
+/* ── toast ── */
+.toasts { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 40; }
+.toast {
+  background: var(--ink);
+  color: var(--paper);
+  padding: 7px 12px;
+  border-radius: 8px;
+  font-size: var(--fs-core);
+  box-shadow: var(--shadow-relief);
+  max-width: 420px;
+}
+.toast.bad { background: var(--danger); }
+
+/* ── 弹窗：页内实现，不用 alert / confirm / prompt ── */
+.mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 22, 26, .28);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 20px;
+}
+.dialog {
+  background: var(--paper);
+  border-radius: 8px;
+  min-width: 320px;
+  max-width: min(880px, 92vw);
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(20, 22, 26, .18);
+}
+.dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--row-h);
+  padding: 0 14px;
+  border-bottom: var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.dialog-body { padding: 10px 14px; overflow: auto; min-height: 0; }
+.dialog-foot {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 8px 14px;
+  border-top: var(--border);
+  flex-shrink: 0;
+}
+pre.block {
+  margin: 0;
+  padding: 10px 14px;
+  background: var(--soft);
+  border-radius: 8px;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 60vh;
+  overflow: auto;
+}
+.hint { color: var(--mid); font-size: 11px; }
+.stack { display: flex; flex-direction: column; gap: 10px; }
+
+/* ── 布局：flex + wrap，不写死宽度；min-width:0 是关键，否则长内容撑破容器 ── */
+.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.cols { display: flex; gap: 14px; align-items: flex-start; padding: 0 14px 14px; }
+.col { flex: 1; min-width: 0; }
+.desc { color: var(--mid); }
+.cols > .col > .card { border: var(--border); border-radius: 4px; }