@waterwx/dsh-novel-forge 1.3.1 → 1.3.2-alpha

package/src/client/panel/RunPanel.tsx

@@ -1,11 +1,12 @@
 /**
  * 生产单面板：区间批量生产（计划补足 → 逐章生成 → 被拒分级处理 → 断点续跑）。
- * 与「工作进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
+ * 与「AI进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { NovelApi } from '../api.ts'
 import type { RunState } from '../../protocol.ts'
 import css from './panel.module.css'
+import { PageHeader } from './PageHeader.tsx'
 
 export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters: number }) {
   const [run, setRun] = useState<RunState | null>(null)
@@ -42,7 +43,6 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
     logRef.current?.scrollTo({ top: logRef.current.scrollHeight })
   }, [run?.log.length])
 
-  const effectiveEnd = mode === 'count' ? startNo + count - 1 : endNo
 
   const handleStart = async (): Promise<void> => {
     setBusy(true)
@@ -76,11 +76,11 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
   const statusLabel = useMemo(() => {
     if (run === null) return '未启动'
     return {
-      running: '🏭 生产中',
+      running: ' 生产中',
       paused: '⏸ 已暂停',
-      done: '✅ 已完成',
+      done: ' 已完成',
       stopped: '⏹ 已停止',
-      error: '❌ 异常',
+      error: ' 异常',
     }[run.status] ?? run.status
   }, [run])
 
@@ -89,19 +89,49 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
     : 0
 
   return (
-    <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
-      <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span className={css.cardTitle}>🏭 生产单（标准流水线：计划 → 生成 → 审稿 → 分级处理）</span>
-        <span className={`${css.badge} ${run?.status === 'running' ? css.badgeWritten : run?.status === 'done' ? css.badgeDone : css.badgePending}`}>{statusLabel}</span>
-      </div>
-
-      <div className={css.meta}>
-        一键下生产单：自动补计划 → 逐章生成（完整质量门：生成→摘要+事实→审稿→作者复盘）→ 被拒章分级处理（无 high 豁免 / 有 high 按意见修订+验证 / 两轮不过转待人工）。中断后可从断点继续。
-      </div>
-
+    <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)' }}>
+      <PageHeader
+        eyebrow="Production"
+        title="生产单"
+        actions={(
+          <span className={`${css.badge} ${run?.status === 'running' ? css.badgeWritten : run?.status === 'done' ? css.badgeDone : css.badgePending}`}>{statusLabel}</span>
+        )}
+      />
+      {run === null || run.status !== 'running' ? (
+        <>
+        <span className={css.meta}>标准流水线：计划 → 生成 → 审稿 → 分级处理。一键下单，自动补计划，逐章过质量门（生成→摘要+事实→审稿→作者复盘），被拒章分级处理，中断可断点续跑。</span>
+        {/* 运行约束说明：并发/绑定/暂停语义/同章冲突，都是操作上会踩的点，放在下单区之前 */}
+        <details className={css.meta} style={{ fontSize: 'var(--nf-fs-12)' }}>
+          <summary style={{ cursor: 'pointer' }}>运行说明（并发 · 绑定书目 · 暂停续跑）</summary>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 4, lineHeight: 1.6 }}>
+            <span>· <b>一次一本</b>：生产单是全局单实例，逐章串行；换书不会打断，也不会切换到别的批次。</span>
+            <span>· <b>绑定下单时的书</b>：本批次只读写下单时那本书的目录，与当前激活书无关。</span>
+            <span>· 起点默认 = 最后一章 +1；区间内<b>已通过审稿</b>的章会自动快进跳过。</span>
+            <span>· <b>暂停</b>可随时续跑（从断点章继续）；<b>停止</b>会终结本批次，再次下单即新建批次。</span>
+            <span>· ⚠️ 批次运行中仍可手动生成/修订<b>其它章</b>，但请勿对正在处理的<b>同一章</b>同时手动操作——两个写入会互相覆盖。</span>
+          </div>
+        </details>
+        </>
+      ) : null}
+
+      {/* v4 B4 控制台折叠：生产中下单区收起为一行状态摘要，进度与日志成为主体。 */}
+      {run !== null && run.status === 'running' ? (
+        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--nf-space-8)' }}>
+          <span className={css.meta}> 生产中 · 第 {run.startNo}-{run.endNo} 章 · 当前第 {run.currentNo} 章 · {Math.round(ratio * 100)}%</span>
+          <div className={css.row} style={{ gap: 'var(--nf-space-6)' }}>
+            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleControl('pause') }}>
+              ⏸ 暂停
+            </button>
+            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleControl('stop') }}>
+              ⏹ 停止
+            </button>
+          </div>
+        </div>
+      ) : (
+      <>
       {/* 下单区 */}
-      <div className={css.row} style={{ flexWrap: 'wrap', gap: 8, alignItems: 'flex-end' }}>
-        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-8)', alignItems: 'flex-end' }}>
+        <div style={{ display: 'flex', gap: 'var(--nf-space-4)', alignItems: 'center' }}>
           <button
             type="button"
             className={`${css.button} ${css.buttonSmall} ${mode === 'count' ? css.buttonPrimary : ''}`}
@@ -161,40 +191,42 @@ export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters:
           </button>
         )}
       </div>
+      </>
+      )}
 
-      {err !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 12 }}>{err}</div>}
+      {err !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-12)' }}>{err}</div>}
 
       {/* 进度区 */}
       {run !== null && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          <div className={css.row} style={{ flexWrap: 'wrap', gap: 8 }}>
-            <span className={css.meta}>范围：第 {run.startNo} - {run.endNo} 章 · 当前：第 {run.currentNo} 章</span>
-            <span className={css.meta}>新生成 {run.stats.generated} · 修订通过 {run.stats.revised} · 豁免 {run.stats.exempted} · 重生成 {run.stats.regenerated} · 失败 {run.stats.error}</span>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
+          <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-8)' }}>
+            <span className={css.meta}>{run.bookName !== undefined && run.bookName !== '' ? `本书：《${run.bookName}》 · ` : ''}范围：第 {run.startNo} - {run.endNo} 章 · 当前：第 {run.currentNo} 章</span>
+            <span className={css.meta}>新生成 {run.stats?.generated ?? 0} · 修订通过 {run.stats?.revised ?? 0} · 豁免 {run.stats?.exempted ?? 0} · 重生成 {run.stats?.regenerated ?? 0} · 失败 {run.stats?.error ?? 0}</span>
           </div>
           <div className={css.bigProgressBar}>
             <div className={css.bigProgressBarFill} style={{ width: `${Math.round(ratio * 100)}%` }} />
           </div>
           {run.pendingManual.length > 0 && (
             <div className={css.meta} style={{ color: 'var(--nf-warn)' }}>
-              ⚠️ 待人工：第 {run.pendingManual.join('、')} 章（两轮修订仍不过，保留草稿，可在章节列表处理）
+               待人工：第 {run.pendingManual.join('、')} 章（两轮修订仍不过，保留草稿，可在章节列表处理）
             </div>
           )}
-          {run.status === 'done' && <div className={css.meta} style={{ color: 'var(--nf-success)' }}>✅ 生产单完成：{run.startNo}-{run.endNo} 章处理完毕，待人工 {run.pendingManual.length} 章。</div>}
+          {run.status === 'done' && <div className={css.meta} style={{ color: 'var(--nf-success)' }}> 生产单完成：{run.startNo}-{run.endNo} 章处理完毕，待人工 {run.pendingManual.length} 章。</div>}
           {run.error !== undefined && <div className={css.meta} style={{ color: 'var(--nf-error)' }}>异常：{run.error}</div>}
         </div>
       )}
 
-      {/* 日志区 */}
-      <div className={css.meta} style={{ fontWeight: 600 }}>运行日志（{run?.log.length ?? 0}）</div>
-      <div
-        ref={logRef}
-        style={{ flex: 1, minHeight: 120, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 10, background: 'var(--nf-bg-inset)', padding: 8, display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 }}
-      >
+      {/* 日志区（终端风） */}
+      <div className={`${css.meta} ${css.titleBlock}`} style={{ gap: 0 }}>
+        <span className={css.eyebrow}>Run Log</span>
+        <span className={css.cardTitle}>运行日志（{run?.log.length ?? 0}）</span>
+      </div>
+      <div ref={logRef} className={css.runLog}>
         {run === null || run.log.length === 0 ? (
           <span className={css.meta}>尚无日志——下单后这里会实时显示每章进度。</span>
         ) : run.log.map((l, i) => (
-          <div key={i} style={{ display: 'flex', gap: 6, opacity: 0.85 }}>
-            <span style={{ color: 'var(--nf-text-3)', flex: 'none' }}>{new Date(l.at).toLocaleTimeString('zh-CN', { hour12: false })}</span>
+          <div key={i} className={css.runLogLine}>
+            <span className={css.runLogTime}>{new Date(l.at).toLocaleTimeString('zh-CN', { hour12: false })}</span>
             <span>{l.text}</span>
           </div>
         ))}

package/src/client/panel/SettingsView.tsx

@@ -0,0 +1,354 @@
+/**
+ * 共享设置页（作者首页「设置」与书内「设置」同入口）。
+ * 自给自足：挂载时通过 api.status() 拉取全局配置，支持 model/writing/image/files/appearance 五组，
+ * 保存走 api.patchConfig。不与某个书绑定，因此新装用户无书也能用。
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Brain, Folder, Sparkles, RotateCcw, Upload, X, Image } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { MoveOutputDirResponse, NovelConfig } from '../../protocol.ts'
+import { tt } from './helpers.ts'
+import { RUN_CHIP_MODE_OPTIONS, readRunChipMode, writeRunChipMode, type RunChipMode } from '../chip-prefs.ts'
+import { ModelManager } from './ModelManager.tsx'
+import { ReasoningSection } from './ReasoningSection.tsx'
+import { SubPage } from './SubPage.tsx'
+import css from './panel.module.css'
+
+
+const SETTINGS_SECTIONS: Array<{ id: 'model' | 'files' | 'appearance'; label: string; icon: JSX.Element }> = [
+  { id: 'model', label: '模型', icon: <Brain size={16} /> },
+  { id: 'files', label: '路径与文件', icon: <Folder size={16} /> },
+  { id: 'appearance', label: '外观与主题', icon: <Sparkles size={16} /> },
+];
+
+type SettingsTab = 'model' | 'files' | 'appearance'
+type ThemeMode = 'system' | 'light' | 'dark'
+type ThemeDensity = 'comfort' | 'compact' | 'spacious'
+
+function readLS<T extends string>(key: string, fallback: T, allowed: readonly T[]): T {
+  try {
+    const v = window.localStorage.getItem(key) as T | null
+    return v !== null && (allowed as readonly string[]).includes(v) ? v : fallback
+  } catch { return fallback }
+}
+
+export function SettingsView({ api, variant = 'page', onSettingsTab, onEditorFontSize, onBackground, themeMode, themeDensity, onChangeThemeMode, onChangeThemeDensity }: {
+  api: NovelApi;
+  /** page = 全屏 SubPage（保留给旧入口）；drawer = 右滑抽屉内容（无壳）。 */
+  variant?: 'page' | 'drawer';
+  onSettingsTab?: (tab: SettingsTab) => void;
+  onEditorFontSize?: (n: number) => void;
+  onBackground?: (bg: string | undefined, blur: number) => void;
+  /** 全局显示模式（联动整个面板，NovelPanel 落 localStorage）。 */
+  themeMode: 'system' | 'light' | 'dark';
+  /** 全局界面密度。 */
+  themeDensity: 'comfort' | 'compact' | 'spacious';
+  /** 改变全局显示模式。 */
+  onChangeThemeMode: (m: 'system' | 'light' | 'dark') => void;
+  /** 改变全局界面密度。 */
+  onChangeThemeDensity: (d: 'comfort' | 'compact' | 'spacious') => void;
+}) {
+  /** 右上角生成状态芯片的显示偏好（三态；存 localStorage，选择即时生效）。 */
+  const [runChipMode, setRunChipMode] = useState<RunChipMode>(() => readRunChipMode())
+  const [config, setConfig] = useState<NovelConfig | null>(null);
+  const [configDraft, setConfigDraft] = useState<NovelConfig | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
+  // —— 输出目录迁移弹窗 ——
+  const [moveOpen, setMoveOpen] = useState(false);
+  const [moveTarget, setMoveTarget] = useState('');
+  const [movePreview, setMovePreview] = useState<MoveOutputDirResponse | null>(null);
+  const [moveBusy, setMoveBusy] = useState(false);
+  const [moveError, setMoveError] = useState('');
+  const [settingsTab, setSettingsTabState] = useState<SettingsTab>(() => readLS<SettingsTab>('dsh-novel-forge.settings.tab', 'model', ['model','files','appearance'] as const));
+  const [editorFontSize, setEditorFontSize] = useState<number>(() => { try { const v = Number(window.localStorage.getItem('dsh-novel-forge.editor.fontSize')); return v >= 12 && v <= 24 ? v : 14 } catch { return 14 } });
+  const loadConfig = async (): Promise<void> => {
+    try {
+      const res = await api.status();
+      setConfig(res.config);
+      setConfigDraft(res.config);
+    } catch (err) { setError((err as Error).message) }
+  };
+  useEffect(() => { void loadConfig() }, []);
+
+  useEffect(() => { try { window.localStorage.setItem('dsh-novel-forge.settings.tab', settingsTab) } catch { /* ignore */ } }, [settingsTab]);
+
+  const changeSettingsTab = (next: SettingsTab): void => { setSettingsTabState(next); onSettingsTab?.(next) };
+
+  /** 打开输出目录迁移弹窗：先 dryRun 预览当前目录内容。 */
+  const openMoveDialog = async (): Promise<void> => {
+    setMoveOpen(true); setMoveTarget(''); setMovePreview(null); setMoveError('');
+    try { setMovePreview(await api.moveOutputDir(undefined, true)) } catch (err) { setMoveError((err as Error).message) }
+  };
+
+  /** 确认迁移：搬迁文件 → 服务端联动书架/默认目录 → 刷新配置。 */
+  const confirmMove = async (): Promise<void> => {
+    const to = moveTarget.trim();
+    if (to === '') { setMoveError('请填写新目录的完整路径'); return }
+    setMoveBusy(true); setMoveError('');
+    try {
+      const r = await api.moveOutputDir(to);
+      setMoveOpen(false);
+      setNotice(`目录迁移完成：${r.files.length} 个条目 → ${r.to}${r.movedBooks > 0 ? `（书架联动重指向 ${r.movedBooks} 本）` : ''}`);
+      await loadConfig();
+    } catch (err) { setMoveError((err as Error).message) } finally { setMoveBusy(false) }
+  };
+
+  const formatBytes = (n: number): string => n >= 1024 * 1024 ? `${(n / 1024 / 1024).toFixed(1)} MB` : n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`;
+
+  const save = async (): Promise<void> => {
+    if (configDraft === null) return;
+    setBusy(true); setError(''); setNotice('');
+    try {
+      const result = await api.patchConfig({
+        outlinePath: configDraft.outlinePath,
+        outputDir: configDraft.outputDir,
+        provider: configDraft.provider,
+        model: configDraft.model,
+        generateModel: configDraft.generateModel,
+        reviewModel: configDraft.reviewModel,
+        auditModel: configDraft.auditModel,
+        fallbackModel: configDraft.fallbackModel ?? '',
+        autoTimeline: configDraft.autoTimeline ?? true,
+        reasoningEffort: configDraft.reasoningEffort ?? 'off',
+        chapterChars: configDraft.chapterChars,
+        maxTokens: configDraft.maxTokens,
+        reviewPassScore: configDraft.reviewPassScore,
+        autoReview: configDraft.autoReview,
+        autoAuthorReview: configDraft.autoAuthorReview,
+        autoReviewAfterRevise: configDraft.autoReviewAfterRevise,
+        themeBackground: configDraft.themeBackground ?? '',
+        themeBackgroundBlur: configDraft.themeBackgroundBlur ?? 0,
+        savedModels: configDraft.savedModels ?? [],
+      });
+      setConfig(result.config);
+      setConfigDraft(result.config);
+      setNotice(tt('settings.saved'));
+    } catch (err) { setError((err as Error).message) } finally { setBusy(false) }
+  };
+
+  // 显示模式/密度由全局（NovelPanel）统一管理，设置页只调用 onChange 回调。
+  const changeEditorFont = (n: number): void => {
+    const v = Math.min(24, Math.max(12, n)); setEditorFontSize(v);
+    try { window.localStorage.setItem('dsh-novel-forge.editor.fontSize', String(v)) } catch { /* ignore */ }
+    onEditorFontSize?.(v);
+  };
+  const bgFileRef = useRef<HTMLInputElement | null>(null);
+  const applyBackground = (bg: string | undefined): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, themeBackground: bg ?? '' });
+    onBackground?.(bg ?? undefined, configDraft?.themeBackgroundBlur ?? 0);
+  };
+  const applyBlur = (blur: number): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, themeBackgroundBlur: blur });
+    onBackground?.(configDraft?.themeBackground ?? undefined, blur);
+  };
+  const onBgFile = async (file: File | undefined): Promise<void> => {
+    if (file === undefined) return;
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const fr = new FileReader();
+      fr.onload = () => resolve(fr.result as string);
+      fr.onerror = () => reject(fr.error ?? new Error('读取失败'));
+      fr.readAsDataURL(file);
+    });
+    try {
+      // 上传到服务端存盘，返回可访问 URL（不往 settings.yaml 塞大 base64）。
+      const res = await api.themeBackgroundUpload(dataUrl);
+      applyBackground(res.url);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+  const resetTheme = (): void => {
+    onChangeThemeMode('system');
+    onChangeThemeDensity('comfort');
+  };
+
+  if (configDraft === null) {
+    if (variant === 'drawer') {
+      return <div style={{ padding: 'var(--nf-space-16)' }}><div className={css.meta}>正在加载设置…</div>{error !== '' && <div className={css.noticeError}>{error}</div>}</div>
+    }
+    return (
+      <SubPage title="设置" meta="正在加载…">
+        <div className={css.meta}>正在加载设置…</div>
+        {error !== '' && <div className={css.noticeError}>{error}</div>}
+      </SubPage>
+    );
+  }
+
+  const content = (
+    <>
+      <div className={css.shelfToolbar} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+        {SETTINGS_SECTIONS.map(s => (
+          <button key={s.id} type="button" className={css.button + (settingsTab === s.id ? ' ' + css.buttonPrimary : '')} style={{ flex: 1, minWidth: 104, justifyContent: 'center' }} onClick={() => changeSettingsTab(s.id)}>{s.icon} {s.label}</button>
+        ))}
+        {variant === 'drawer' && (
+          <button type="button" className={css.button + ' ' + css.buttonPrimary} disabled={busy} onClick={() => { void save() }}>{busy ? '保存中…' : tt('settings.save')}</button>
+        )}
+      </div>
+
+      {error !== '' && <div className={css.noticeError}>{error}</div>}
+      {notice !== '' && <div className={css.meta}>{notice}</div>}
+
+      {settingsTab === 'model' && (
+        <>
+          <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+            <span className={css.cardTitle}><Brain size={18} style={{ verticalAlign: -3 }} /> 模型与推理</span>
+            <ModelManager
+              api={api}
+              provider={configDraft.provider}
+              model={configDraft.model}
+              savedModels={configDraft.savedModels ?? []}
+              onProvider={v => setConfigDraft({ ...configDraft, provider: v })}
+              onModel={v => setConfigDraft({ ...configDraft, model: v })}
+              onSavedModels={models => setConfigDraft({ ...configDraft, savedModels: models })}
+            />
+          </div>
+          <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-12)' }}>
+            <span className={css.cardTitle}>备用模型（故障自动切换）</span>
+            <div className={css.field}>
+              <label className={css.fieldLabel}>主模型调用失败（限流 / 超时 / 额度 / 服务不可用）时，自动换它重试一次</label>
+              <select
+                className={css.input}
+                value={configDraft.fallbackModel ?? ''}
+                onChange={e => setConfigDraft({ ...configDraft, fallbackModel: e.target.value })}
+              >
+                <option value="">不切换（关闭）</option>
+                {[...new Set([configDraft.model, ...(configDraft.savedModels ?? []).map(m => m.model)])]
+                  .filter(m => m !== '')
+                  .map(m => <option key={m} value={m}>{m}</option>)}
+              </select>
+            </div>
+            <span className={css.meta}>
+              只对可重试的失败生效：用户取消、参数错误不会切换；正文生成只在「一个字都没产出」时才换模型重试，避免重复生成。
+            </span>
+          </div>
+          <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-12)' }}>
+            <span className={css.cardTitle}>故事时间线</span>
+            <label className={css.row} style={{ gap: 'var(--nf-space-8)', alignItems: 'center' }}>
+              <input
+                type="checkbox"
+                checked={configDraft.autoTimeline ?? true}
+                onChange={e => setConfigDraft({ ...configDraft, autoTimeline: e.target.checked })}
+              />
+              <span>出章后自动抽取时间线事件（时间 / 地点 / 在场角色 / 事件）</span>
+            </label>
+            <span className={css.meta}>
+              抽取失败不会阻断出章；可在侧柜「故事时间线」里手工抽取、修正，并一键检查时间倒流 / 地点瞬移等矛盾。
+            </span>
+          </div>
+          <ReasoningSection
+            reasoningEffort={configDraft.reasoningEffort ?? 'off'}
+            analysisReasoning={configDraft.analysisReasoning ?? 'low'}
+            onChange={patch => setConfigDraft({ ...configDraft, ...patch })}
+          />
+        </>
+      )}
+
+      {settingsTab === 'files' && (
+        <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+          <span className={css.cardTitle}><Folder size={18} style={{ verticalAlign: -3 }} /> 路径与文件</span>
+          <div className={css.field}>
+            <label className={css.fieldLabel}>{tt('settings.outputDir')}</label>
+            <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+              <input className={css.input} style={{ flex: 1, minWidth: 220 }} value={configDraft.outputDir} onChange={e => setConfigDraft({ ...configDraft, outputDir: e.target.value })} />
+              <button type="button" className={css.button} onClick={() => { void openMoveDialog() }} title="把当前输出目录的全部文件搬到新位置，书架与配置自动联动">更改位置…</button>
+            </div>
+            <span className={css.meta}>含章节、项目状态、助手历史等；「更改位置」会整目录搬迁并联动书架，直接改路径仅更新默认值。</span>
+          </div>
+          <div className={css.row}><button type="button" className={css.button} onClick={() => { void api.openFolder() }}>{tt('settings.openFolder')}</button></div>
+        </div>
+      )}
+
+      {settingsTab === 'appearance' && (
+        <>
+          <div className={css.card + ' ' + css.settingsCard}>
+            <span className={css.cardTitle}><Sparkles size={18} style={{ verticalAlign: -3 }} /> 外观与主题</span>
+            <div className={css.field}><label className={css.fieldLabel}>显示模式</label><select className={css.input} value={themeMode} onChange={e => onChangeThemeMode(e.target.value as ThemeMode)}><option value="system">跟随系统</option><option value="light">浅色</option><option value="dark">深色</option></select></div>
+            <div className={css.field}><label className={css.fieldLabel}>主题风格</label><span className={css.input} style={{ display: 'inline-flex', alignItems: 'center' }}>墨纸 · 暖编辑案头</span><span className={css.meta}>统一墨纸风格，无需再选皮肤；切换明暗即达纸白/墨色。</span></div>
+            <div className={css.field}><label className={css.fieldLabel}>界面密度</label><select className={css.input} value={themeDensity} onChange={e => onChangeThemeDensity(e.target.value as ThemeDensity)}><option value="comfort">舒适（默认）</option><option value="compact">紧凑</option><option value="spacious">宽松</option></select></div>
+            <div className={css.field}><label className={css.fieldLabel}>编辑器字号（正文编辑 / 工作区）</label><select className={css.input} value={editorFontSize} onChange={e => changeEditorFont(Number(e.target.value))}>{[12,13,14,15,16,18,20,22,24].map(v => <option key={v} value={v}>{v}px</option>)}</select></div>
+            <div className={css.field}>
+              <label className={css.fieldLabel}>生成状态芯片（右上角）</label>
+              <select
+                className={css.input}
+                value={runChipMode}
+                onChange={e => { const next = e.target.value as RunChipMode; setRunChipMode(next); writeRunChipMode(next) }}
+              >
+                {RUN_CHIP_MODE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+              </select>
+              <span className={css.meta}>固定在窗口右上角，显示生产单 生成中 / 已暂停 / 批完成 / 出错，点击可打开小说工坊。「关闭」时同时停掉状态轮询。存于浏览器本地，即时生效。</span>
+            </div>
+            <div className={css.row} style={{ justifyContent: 'flex-end' }}><button type="button" className={css.button} onClick={resetTheme}><RotateCcw size={14} style={{ verticalAlign: -2 }} /> 恢复默认主题</button></div>
+          </div>
+
+          <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-12)' }}>
+            <span className={css.cardTitle}><Image size={18} style={{ verticalAlign: -3 }} /> 自定义背景</span>
+            <span className={css.meta}>填图片 URL 或上传图片作为小说工坊背景（首页 + 书内）。留空 = 使用主题默认背景。</span>
+            <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+              <input className={css.input} style={{ flex: 1, minWidth: 220 }} placeholder="https://… 图片地址" value={(configDraft.themeBackground ?? '').startsWith('data:') ? '' : (configDraft.themeBackground ?? '')} onChange={e => applyBackground(e.target.value.trim() !== '' ? e.target.value.trim() : undefined)} />
+              <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => bgFileRef.current?.click()}><Upload size={13} style={{ verticalAlign: -2 }} /> 上传图片</button>
+              <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => applyBackground(undefined)}><X size={13} style={{ verticalAlign: -2 }} /> 清除</button>
+            </div>
+            <input ref={bgFileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={e => { void onBgFile(e.target.files?.[0]); e.target.value = '' }} />
+            {(configDraft.themeBackground ?? '') !== '' && (
+              <div className={css.adaptInputCard} style={{ padding: 8 }}>
+                <div style={{ width: 180, height: 100, borderRadius: 10, backgroundImage: 'url(' + configDraft.themeBackground + ')', backgroundSize: 'cover', backgroundPosition: 'center' }} />
+                <div className={css.meta}>已设置背景（预览）</div>
+              </div>
+            )}
+            <div className={css.field}><label className={css.fieldLabel}>遮罩 / 模糊强度（0-80）</label><input className={css.input} type="range" min={0} max={80} value={configDraft.themeBackgroundBlur ?? 0} onChange={e => applyBlur(Number(e.target.value))} /><span className={css.meta}>越大背景越暗，保证文字可读（图很花时调高）。</span></div>
+          </div>
+        </>
+      )}
+
+      {moveOpen && (
+        <div className={css.importModalOverlay} role="dialog" aria-modal="true" aria-label="更改输出目录" onClick={e => { if (e.target === e.currentTarget && !moveBusy) setMoveOpen(false) }}>
+          <div className={css.importModal}>
+            <div className={css.importModalHead}>
+              <span className={css.cardTitle}>更改输出目录</span>
+              <button type="button" className={css.buttonSmall + ' ' + css.button} disabled={moveBusy} onClick={() => { setMoveOpen(false) }}><X size={14} /></button>
+            </div>
+            <div className={css.importModalBody}>
+              <div className={css.field}>
+                <label className={css.fieldLabel}>当前目录</label>
+                <span className={css.meta}>{movePreview?.from ?? configDraft.outputDir}</span>
+              </div>
+              {movePreview !== null && (
+                <div className={css.field}>
+                  <label className={css.fieldLabel}>将被搬走的内容</label>
+                  <span className={css.meta}>{movePreview.files.length} 个条目 · 约 {formatBytes(movePreview.bytes)}{movePreview.files.length > 0 ? `（如 ${movePreview.files.slice(0, 3).join('、')}${movePreview.files.length > 3 ? ' …' : ''}）` : '（空目录）'}</span>
+                </div>
+              )}
+              <div className={css.field}>
+                <label className={css.fieldLabel}>新目录（绝对路径）</label>
+                <input className={css.input} placeholder="例如 D:\\Novels\\我的书" value={moveTarget} onChange={e => setMoveTarget(e.target.value)} disabled={moveBusy} autoFocus />
+                <span className={css.meta}>目标必须为空或不存在；文件搬迁后书架与默认配置自动联动，成功后才删除旧目录，中途失败数据无损。</span>
+              </div>
+              {moveError !== '' && <span className={css.meta} style={{ color: 'var(--nf-danger, #e5484d)' }}>{moveError}</span>}
+            </div>
+            <div className={css.importModalActions}>
+              <button type="button" className={css.button} disabled={moveBusy} onClick={() => { setMoveOpen(false) }}>取消</button>
+              <button type="button" className={css.button} disabled={moveBusy || moveTarget.trim() === ''} onClick={() => { void confirmMove() }}>{moveBusy ? '搬迁中…' : '确认搬迁'}</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+
+  if (variant === 'drawer') {
+    return <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)', padding: 'var(--nf-space-16)' }}>{content}</div>;
+  }
+  return (
+    <SubPage
+      title="设置"
+      meta={`当前模型：${config?.provider} / ${config?.model} · 输出目录：${config?.outputDir}`}
+      actions={(
+        <button type="button" className={css.button + ' ' + css.buttonPrimary} disabled={busy} onClick={() => { void save() }}>{busy ? '保存中…' : tt('settings.save')}</button>
+      )}
+    >
+      {content}
+    </SubPage>
+  );
+}