@waterwx/dsh-novel-forge 1.6.0 → 1.7.2

package/src/client/panel/NovelPanel.tsx

@@ -9,6 +9,7 @@ import type { ReactElement } from 'react'
 import type { NovelApi } from '../api.ts'
 import type { PanelController } from './controller.ts'
 import { tt } from './helpers.ts'
+import { BarChart3, Book, BookMarked, BookOpen, Brain, Clapperboard, Factory, FileText, Folder, GitBranch, Library, MessageSquare, Palette, PenLine, PlugZap, RotateCcw, ScrollText, Search, Settings, Sparkles, Wrench } from 'lucide-react'
 import { AssistantTab } from './AssistantTab.tsx'
 import { AssetsTab } from './AssetsTab.tsx'
 import { ShelfView } from './ShelfView.tsx'
@@ -17,7 +18,6 @@ import { RunPanel } from './RunPanel.tsx'
 import { CreateBookView } from './CreateBookView.tsx'
 import { ImportModal } from './ImportModal.tsx'
 import { WorldTab } from './WorldTab.tsx'
-import { StoryboardTab } from './StoryboardTab.tsx'
 import { MangaWorkspace } from './MangaWorkspace.tsx'
 import { AuditIssueRow, PlotlineCard, PlotlineHealthPanel, PlotlinePlanPanel, PlotlineSuggestionPanel, RoleCandidateRow, RoleCard, StatCell, TodoRow } from './views.tsx'
 import { extractDocxTextFromBuffer } from '../docx.ts'
@@ -26,6 +26,7 @@ import type {
   BookshelfSnapshot,
   ChapterPlan,
   Foreshadow,
+  ImageModelConfig,
   JobFrame,
   NovelConfig,
   Plotline,
@@ -67,46 +68,55 @@ interface ProgressLine {
 }
 
 /** The navigation groups (AI-Novel-Writing-Assistant style grouping). */
-const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArray<{ id: NovelTab; label: string; icon: string }> }> = [
+const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArray<{ id: NovelTab; label: string; icon: ReactElement }> }> = [
   {
     id: 'create',
     label: '创作',
     items: [
-      { id: 'workflow', label: tt('tab.workflow'), icon: '🛠️' },
-      { id: 'overview', label: tt('tab.overview'), icon: '📄' },
-      { id: 'blurb', label: '简介 / 封面', icon: '📖' },
-      { id: 'plan', label: tt('tab.plan'), icon: '📚' },
-      { id: 'plotlines', label: '长线管理', icon: '📜' },
-      { id: 'book', label: '本书设定', icon: '📚' },
+      { id: 'workflow', label: tt('tab.workflow'), icon: <Wrench size={16} /> },
+      { id: 'overview', label: tt('tab.overview'), icon: <FileText size={16} /> },
+      { id: 'blurb', label: '简介 / 封面', icon: <BookOpen size={16} /> },
+      { id: 'plan', label: tt('tab.plan'), icon: <BookMarked size={16} /> },
+      { id: 'plotlines', label: '长线管理', icon: <ScrollText size={16} /> },
+      { id: 'book', label: '本书设定', icon: <Library size={16} /> },
     ],
   },
   {
     id: 'tools',
     label: '工具',
     items: [
-      { id: 'assistant', label: tt('tab.assistant'), icon: '💬' },
-      { id: 'progress', label: '工作进度', icon: '📊' },
-      { id: 'breakdown', label: '拆书分析', icon: '🔍' },
-      { id: 'manhua', label: '漫剧工作台', icon: '🎬' },
-      { id: 'run', label: '生产单', icon: '🏭' },
+      { id: 'assistant', label: tt('tab.assistant'), icon: <MessageSquare size={16} /> },
+      { id: 'progress', label: 'AI 进度', icon: <BarChart3 size={16} /> },
+      { id: 'breakdown', label: '拆书分析', icon: <Search size={16} /> },
+      { id: 'manhua', label: '漫剧工作台', icon: <Clapperboard size={16} /> },
+      { id: 'run', label: '生产单', icon: <Factory size={16} /> },
     ],
   },
   {
     id: 'assets',
     label: '资产',
     items: [
-      { id: 'assets', label: '创作资产', icon: '🧰' },
+      { id: 'assets', label: '创作资产', icon: <Wrench size={16} /> },
     ],
   },
 ]
 
 /** Settings tab — pinned to the bottom of the nav rail. */
-const SETTINGS_TAB: { id: NovelTab; label: string; icon: string } = { id: 'settings', label: tt('tab.settings'), icon: '⚙️' }
+const SETTINGS_TAB: { id: NovelTab; label: string; icon: ReactElement } = { id: 'settings', label: tt('tab.settings'), icon: <Settings size={16} /> }
 
 /** Common DeepSeek model presets shown in settings; users can also type any model id. */
 const MODEL_PRESETS = ['deepseek-v4-flash', 'deepseek-v4-pro', 'deepseek-chat', 'deepseek-reasoner'] as const
 const REASONING_OPTIONS = ['off', 'low', 'high', 'max'] as const
 
+/** 设置页内子导航分组。 */
+const SETTINGS_SECTIONS: ReadonlyArray<{ id: 'model' | 'writing' | 'image' | 'files' | 'appearance'; label: string; icon: ReactElement }> = [
+  { id: 'model', label: '模型与推理', icon: <Brain size={16} /> },
+  { id: 'writing', label: '写作与审稿', icon: <PenLine size={16} /> },
+  { id: 'image', label: '生图模型', icon: <Palette size={16} /> },
+  { id: 'files', label: '路径与文件', icon: <Folder size={16} /> },
+  { id: 'appearance', label: '外观与主题', icon: <Sparkles size={16} /> },
+]
+
 /** 构建时注入的插件版本（tsdown define 替换为字符串字面量）。 */
 declare const __NOVEL_FORGE_VERSION__: string | undefined
 const PLUGIN_VERSION: string = typeof __NOVEL_FORGE_VERSION__ !== 'undefined' ? __NOVEL_FORGE_VERSION__ : '0.0.0'
@@ -215,7 +225,7 @@ function paragraphDiff(oldText: string, newText: string): DiffRow[] {
 function renderBeats(beats: string): ReactElement {
   const lines = beats.split('\n')
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-2)' }}>
       {lines.map((line, i) => {
         const trimmed = line.trim()
         const match = /^([^：:]{2,14})[：:]/.exec(trimmed)
@@ -371,17 +381,61 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     setEditorFontSize(v)
     try { window.localStorage.setItem('dsh-novel-forge.editor.fontSize', String(v)) } catch { /* ignore */ }
   }
-  /** 面板主题（localStorage 记忆）：'liquid'=iOS 液态玻璃（绿） / 'classic'=经典毛玻璃（蓝） / 'neumorph'=新拟物（浅色）。 */
-  const [panelTheme, setPanelTheme] = useState<'liquid' | 'classic' | 'neumorph'>(() => {
+  /** 面板主题（localStorage 记忆）：'liquid'=iOS 液态玻璃（绿） / 'neumorph'=新拟物（浅色） / 'macos'=macOS 玻璃（蓝，随外观自动浅深） / 'clay'=粘土拟态。 */
+  const [panelTheme, setPanelTheme] = useState<'liquid' | 'neumorph' | 'macos' | 'clay'>(() => {
     try {
       const v = window.localStorage.getItem('dsh-novel-forge.theme')
-      return v === 'classic' || v === 'neumorph' ? v : 'liquid'
+      return v === 'neumorph' || v === 'macos' || v === 'clay' ? v : 'liquid'
     } catch { return 'liquid' }
   })
-  const changePanelTheme = (next: 'liquid' | 'classic' | 'neumorph'): void => {
+  const changePanelTheme = (next: 'liquid' | 'neumorph' | 'macos' | 'clay'): void => {
     setPanelTheme(next)
     try { window.localStorage.setItem('dsh-novel-forge.theme', next) } catch { /* ignore */ }
   }
+  /** 显示模式（跟随系统 / 强制浅色 / 强制深色），localStorage 记忆，只作用于小说工坊面板。 */
+  const [themeMode, setThemeMode] = useState<'system' | 'light' | 'dark'>(() => {
+    try {
+      const v = window.localStorage.getItem('dsh-novel-forge.theme.mode')
+      return v === 'light' || v === 'dark' ? v : 'system'
+    } catch { return 'system' }
+  })
+  const changeThemeMode = (next: 'system' | 'light' | 'dark'): void => {
+    setThemeMode(next)
+    try { window.localStorage.setItem('dsh-novel-forge.theme.mode', next) } catch { /* ignore */ }
+  }
+  /** 界面密度（舒适 / 紧凑 / 宽松），localStorage 记忆。 */
+  const [themeDensity, setThemeDensity] = useState<'comfort' | 'compact' | 'spacious'>(() => {
+    try {
+      const v = window.localStorage.getItem('dsh-novel-forge.theme.density')
+      return v === 'compact' || v === 'spacious' ? v : 'comfort'
+    } catch { return 'comfort' }
+  })
+  const changeThemeDensity = (next: 'comfort' | 'compact' | 'spacious'): void => {
+    setThemeDensity(next)
+    try { window.localStorage.setItem('dsh-novel-forge.theme.density', next) } catch { /* ignore */ }
+  }
+  /** 恢复默认主题：清掉主题/模式/密度记忆。 */
+  const resetTheme = (): void => {
+    try {
+      window.localStorage.removeItem('dsh-novel-forge.theme')
+      window.localStorage.removeItem('dsh-novel-forge.theme.mode')
+      window.localStorage.removeItem('dsh-novel-forge.theme.density')
+    } catch { /* ignore */ }
+    setPanelTheme('liquid')
+    setThemeMode('system')
+    setThemeDensity('comfort')
+  }
+  /** 设置页内子导航：当前分组（localStorage 记忆）。 */
+  const [settingsTab, setSettingsTab] = useState<'model' | 'writing' | 'image' | 'files' | 'appearance'>(() => {
+    try {
+      const v = window.localStorage.getItem('dsh-novel-forge.settings.tab')
+      return v === 'writing' || v === 'image' || v === 'files' || v === 'appearance' ? v : 'model'
+    } catch { return 'model' }
+  })
+  const changeSettingsTab = (next: 'model' | 'writing' | 'image' | 'files' | 'appearance'): void => {
+    setSettingsTab(next)
+    try { window.localStorage.setItem('dsh-novel-forge.settings.tab', next) } catch { /* ignore */ }
+  }
   /** 有未采纳草稿的章节号（refresh 后检测到遗留草稿时提示）。 */
   const [draftNo, setDraftNo] = useState<number | null>(null)
   /** 大纲页「更新大纲」编辑区是否展开。 */
@@ -509,9 +563,9 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   }, [])
   /** AI 助手悬浮窗：是否打开。 */
   const [assistantOpen, setAssistantOpen] = useState(false)
-  /** 工作进度悬浮窗：是否打开。 */
+  /** AI进度悬浮窗：是否打开。 */
   const [progressOpen, setProgressOpen] = useState(false)
-  /** 工作进度悬浮窗位置（localStorage 记忆）。 */
+  /** AI进度悬浮窗位置（localStorage 记忆）。 */
   const [progressPos, setProgressPos] = useState(() => {
     try {
       const raw = window.localStorage.getItem('dsh-novel-forge.progress.float')
@@ -522,7 +576,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     } catch { /* ignore */ }
     return { x: 60, y: 120 }
   })
-  /** 工作进度悬浮窗尺寸（localStorage 记忆）。 */
+  /** AI进度悬浮窗尺寸（localStorage 记忆）。 */
   const [progressSize, setProgressSize] = useState(() => {
     try {
       const raw = window.localStorage.getItem('dsh-novel-forge.progress.size')
@@ -555,7 +609,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     } catch { /* ignore */ }
     return { w: 420, h: 460 }
   })
-  /** 拖拽/缩放状态（target 区分 AI 助手 / 工作进度两个悬浮窗）。 */
+  /** 拖拽/缩放状态（target 区分 AI 助手 / AI进度两个悬浮窗）。 */
   const dragState = useRef<{ type: 'move' | 'resize'; target: 'assistant' | 'progress'; startX: number; startY: number; origX: number; origY: number; origW: number; origH: number } | null>(null)
 
   /** 悬浮窗位置/尺寸持久化。 */
@@ -1798,7 +1852,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
       lastDeltaChars.current = 0
       liveChars.current = 0
       currentJobNo.current = frame.no
-      // 任务开始：不自动弹出进度悬浮窗（导航「工作进度」显示呼吸绿点提示，
+      // 任务开始：不自动弹出进度悬浮窗（导航「AI进度」显示呼吸绿点提示，
       // 想看进度时手动点导航打开；liveBar 数据照常累积）。
       setProject(prev => prev === null ? prev : {
         ...prev,
@@ -2010,6 +2064,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         imageApiKey: configDraft.imageApiKey,
         imageApiModel: configDraft.imageApiModel,
         imageApiEnabled: configDraft.imageApiEnabled ?? false,
+        imageModels: configDraft.imageModels ?? [],
       })
       setConfig(result.config)
       setConfigDraft(result.config)
@@ -2023,6 +2078,42 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     }
   }
 
+  /** 生图接口测试状态（模型 id → 结果）。 */
+  const [imageTestState, setImageTestState] = useState<Record<string, { testing: boolean; ok?: boolean; ms?: number; message?: string; modelFound?: boolean }>>({})
+  /** 测试一条生图模型：连通 + 延迟。 */
+  const testImageModel = async (m: ImageModelConfig): Promise<void> => {
+    if (m.baseURL.trim() === '' || m.apiKey.trim() === '') {
+      setImageTestState(prev => ({ ...prev, [m.id]: { testing: false, ok: false, message: '请先填写接口地址和 API Key' } }))
+      return
+    }
+    setImageTestState(prev => ({ ...prev, [m.id]: { testing: true } }))
+    try {
+      const r = await api.imageTest({ baseURL: m.baseURL, apiKey: m.apiKey, model: m.model })
+      setImageTestState(prev => ({ ...prev, [m.id]: { testing: false, ok: r.ok, ms: r.ms, message: r.message } }))
+    } catch (err) {
+      setImageTestState(prev => ({ ...prev, [m.id]: { testing: false, ok: false, message: (err as Error).message } }))
+    }
+  }
+  /** 更新一条生图模型配置。 */
+  const updateImageModel = (id: string, patch: Partial<ImageModelConfig>): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: (prev.imageModels ?? []).map(m => m.id === id ? { ...m, ...patch } : m) })
+  }
+  /** 新增一条生图模型（第一条默认启用）。 */
+  const addImageModel = (): void => {
+    setConfigDraft(prev => prev === null ? prev : {
+      ...prev,
+      imageModels: [...(prev.imageModels ?? []), { id: 'img-' + Date.now().toString(36), name: '', baseURL: '', apiKey: '', model: '', enabled: (prev.imageModels ?? []).length === 0 }],
+    })
+  }
+  /** 删除一条生图模型。 */
+  const removeImageModel = (id: string): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: (prev.imageModels ?? []).filter(m => m.id !== id) })
+  }
+  /** 启用一条（其余自动停用）。 */
+  const enableImageModel = (id: string): void => {
+    setConfigDraft(prev => prev === null ? prev : { ...prev, imageModels: (prev.imageModels ?? []).map(m => ({ ...m, enabled: m.id === id })) })
+  }
+
   /** Export the book. */
   const handleExport = async (format: 'txt' | 'md'): Promise<void> => {
     setBusy(true)
@@ -2274,7 +2365,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   })()
 
   return (
-    <div className={css.panel} data-nf-theme={panelTheme}>
+    <div className={css.panel} data-nf-theme={panelTheme} data-nf-mode={themeMode === 'system' ? undefined : themeMode} data-nf-density={themeDensity}>
       {viewMode === 'shelf' ? (
         /* 书架首页：默认视图，选择一本书进入工作台或阅读页 */
         <ShelfView
@@ -2376,7 +2467,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   {tab.id === 'workflow' && chapters.length > 0 && (
                     <span className={`${css.navTabBadge} ${css.navTabBadgeDone}`}>{journeyPercent}%</span>
                   )}
-                  {/* 任务进行中：工作进度导航显示呼吸绿点（悬停看任务名），不自动弹窗 */}
+                  {/* 任务进行中：AI进度导航显示呼吸绿点（悬停看任务名），不自动弹窗 */}
                   {tab.id === 'progress' && busy && (
                     <span
                       className={`${css.navTabBadge} ${css.navTabBadgeLive}`}
@@ -2483,7 +2574,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           <div className={css.card} style={{ borderColor: 'var(--nf-info)' }}>
             <div className={css.busyRow}>
               <span style={{ color: 'var(--nf-info)' }}>第 {draftNo} 章有未采纳的润色/修订草稿（原稿未被改动）</span>
-              <span style={{ display: 'flex', gap: 8 }}>
+              <span style={{ display: 'flex', gap: 'var(--nf-space-8)' }}>
                 <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void openWorkspace(draftNo) }}>
                   打开工作区
                 </button>
@@ -2510,7 +2601,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               )}
               <span className={css.cardTitle}>第 {workspace.no} 章《{workspace.title}》</span>
               <span className={css.meta}>{workspace.original.length} 字</span>
-              <span style={{ display: 'flex', gap: 4, alignItems: 'center', marginLeft: 'auto' }}>
+              <span style={{ display: 'flex', gap: 'var(--nf-space-4)', alignItems: 'center', marginLeft: 'auto' }}>
                 <button type="button" className={css.iconButton} title="减小字号" aria-label="减小字号" onClick={() => { changeEditorFontSize(editorFontSize - 1) }}>A−</button>
                 <span className={css.meta}>{editorFontSize}px</span>
                 <button type="button" className={css.iconButton} title="增大字号" aria-label="增大字号" onClick={() => { changeEditorFontSize(editorFontSize + 1) }}>A＋</button>
@@ -2625,12 +2716,12 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                     </div>
                     <div className={css.meta}><b>总评：</b>{wsCheckReport.verdict}</div>
                     {wsCheckReport.issues.length > 0 && (
-                      <ul style={{ margin: 0, paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 3, fontSize: editorFontSize - 1, maxHeight: '45vh', overflowY: 'auto' }}>
+                      <ul style={{ margin: 0, paddingLeft: 'var(--nf-space-16)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', fontSize: editorFontSize - 1, maxHeight: '45vh', overflowY: 'auto' }}>
                         {wsCheckReport.issues.map((issue, i) => (
-                          <li key={i} style={{ color: severityColor(issue.severity), display: 'flex', gap: 6, alignItems: 'flex-start' }}>
+                          <li key={i} style={{ color: severityColor(issue.severity), display: 'flex', gap: 'var(--nf-space-6)', alignItems: 'flex-start' }}>
                             <input
                               type="checkbox"
-                              style={{ marginTop: 1 }}
+                              style={{ marginTop: 'var(--nf-space-2)' }}
                               checked={wsChecked.includes(i)}
                               onChange={e => {
                                 setWsChecked(prev => e.target.checked ? [...prev, i] : prev.filter(x => x !== i))
@@ -2656,7 +2747,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   <div className={css.wsPreview} style={{ flex: 1, minHeight: 0 }}>
                     <div className={css.busyRow}>
                       <span className={css.meta}>优化预览（{workspace.draft.length} 字）</span>
-                      <span style={{ display: 'flex', gap: 8 }}>
+                      <span style={{ display: 'flex', gap: 'var(--nf-space-8)' }}>
                         <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setWsShowDiff(v => !v) }}>
                           {wsShowDiff ? '显示文本' : '查看对比'}
                         </button>
@@ -2779,17 +2870,17 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 </button>
               </div>
               {auditStatus?.status === 'running' && (
-                <div className={css.meta} style={{ marginTop: 8 }}>
+                <div className={css.meta} style={{ marginTop: 'var(--nf-space-8)' }}>
                   🔍 全书质检中：{auditStatus.completedBatches}/{auditStatus.totalBatches > 0 ? auditStatus.totalBatches : '…'} 批
                   {auditStatus.totalBatches > 0 && (
-                    <div className={css.dashJourneyBar} style={{ marginTop: 4 }}>
+                    <div className={css.dashJourneyBar} style={{ marginTop: 'var(--nf-space-4)' }}>
                       <div className={css.dashJourneyFill} style={{ width: `${Math.round((auditStatus.completedBatches / auditStatus.totalBatches) * 100)}%` }} />
                     </div>
                   )}
                 </div>
               )}
               {auditStatus?.status === 'error' && auditStatus.error !== undefined && (
-                <div className={css.meta} style={{ color: 'var(--nf-error)', marginTop: 8 }}>全书质检失败：{auditStatus.error}</div>
+                <div className={css.meta} style={{ color: 'var(--nf-error)', marginTop: 'var(--nf-space-8)' }}>全书质检失败：{auditStatus.error}</div>
               )}
               <div className={css.assetGrid}>
                 <StatCell
@@ -2821,7 +2912,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             </div>
 
             {/* 剧情线进度 | 作者复盘趋势：精简摘要卡，并排（点击跳转详情页） */}
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 14, alignItems: 'stretch' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--nf-space-14)', alignItems: 'stretch' }}>
               <div className={css.card}>
                 <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
                   <span className={css.cardTitle}>🧵 {tt('plotlines.workflowTitle')}（{(project?.plotlines ?? []).length} 条）</span>
@@ -2900,7 +2991,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   </button>
                 </div>
                 {auditIssues.length > 0 && (
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
                     {auditIssues.map((issue, i) => (
                       <AuditIssueRow
                         key={i}
@@ -2914,7 +3005,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               </div>
             )}
 
-            {/* 待办队列（活动输出已移入「工具 → 工作进度」悬浮窗） */}
+            {/* 待办队列（活动输出已移入「工具 → AI进度」悬浮窗） */}
             <div className={css.card}>
               <span className={css.cardTitle}>待办队列</span>
               {todos.length === 0 ? (
@@ -3032,7 +3123,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               ) : (
                 /* 只读展示：大纲是开书时的出生证明 */
                 <>
-                <div className={css.meta} style={{ marginBottom: 6 }}>
+                <div className={css.meta} style={{ marginBottom: 'var(--nf-space-6)' }}>
                   大纲是本书的「出生证明」；已写章节可点右上角「🔄 反推大纲」从正文反推，或「更新大纲」手动修订。
                 </div>
                 <pre className={css.outlineReadonly}>{project.outline}</pre>
@@ -3095,7 +3186,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               </button>
             </div>
             {/* 封面 */}
-            <div className={css.row} style={{ alignItems: 'flex-start', gap: 14 }}>
+            <div className={css.row} style={{ alignItems: 'flex-start', gap: 'var(--nf-space-14)' }}>
               <div className={css.coverPreview}>
                 {coverDataUrl !== null ? (
                   <img src={coverDataUrl} alt="封面" />
@@ -3103,7 +3194,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   <span className={css.coverPlaceholder}>暂无封面</span>
                 )}
               </div>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)' }}>
                 <div className={css.row}>
                   <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy || project === null} onClick={() => { coverFileRef.current?.click() }}>
                     📤 上传封面
@@ -3194,9 +3285,9 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 </div>
                 <span className={css.meta}>{tt('sensitive.hint')}</span>
                 {sensHits.length > 0 && (
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 300, overflowY: 'auto', fontSize: 12 }}>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', maxHeight: 300, overflowY: 'auto', fontSize: 'var(--nf-fs-12)' }}>
                     {sensHits.map((hit, i) => (
-                      <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', border: '1px solid var(--nf-border)', borderRadius: 6, padding: '4px 8px' }}>
+                      <div key={i} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'flex-start', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-6)', padding: 'var(--nf-space-4) var(--nf-space-8)' }}>
                         <span className={css.badge} style={{ borderColor: 'var(--nf-warn)', color: 'var(--nf-warn)', flex: 'none' }}>
                           {hit.chapterNo > 0 ? `第${hit.chapterNo}章` : '文本'}
                         </span>
@@ -3223,7 +3314,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             {chapters.length > 0 && (
               <div className={css.card}>
                 <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-                  <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+                  <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
                     {(volumes !== undefined && volumes.length > 0) && (
                       <>
                         <button
@@ -3280,7 +3371,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                         <span className={css.chapterNum}>{chapter.no}</span>
                         <div className={css.chapterMain}>
                           <div className={css.chapterTitle}>
-                            <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ padding: '1px 6px' }} onClick={() => { void handleToggleChapter(chapter.no) }}>
+                            <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ padding: 'var(--nf-space-2) var(--nf-space-6)' }} onClick={() => { void handleToggleChapter(chapter.no) }}>
                               {expanded ? '−' : '+'}
                             </button>
                             <span>{chapter.title}</span>
@@ -3291,7 +3382,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                           </div>
                           {!expanded && <div className={css.chapterBeats} title={chapter.beats}>{chapter.beats}</div>}
                           {expanded && (
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
                               <div className={css.meta}><b>{tt('plan.beats')}:</b></div>
                               <div className={css.meta}>{renderBeats(chapter.beats)}</div>
                               {chapter.summary !== undefined && chapter.summary !== '' && (
@@ -3308,7 +3399,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                                   </div>
                                   <div className={css.meta}><b>{tt('plan.reviewVerdict')}:</b> {review.verdict}</div>
                                   {review.issues.length > 0 && (
-                                    <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12 }}>
+                                    <ul style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', fontSize: 'var(--nf-fs-12)' }}>
                                       {review.issues.map((issue, i) => (
                                         <li key={i} style={{ color: severityColor(issue.severity) }}>
                                           [{issue.severity}] {issue.item} → {issue.suggestion}
@@ -3354,7 +3445,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                                 </div>
                               )}
                               {(chapter.status === 'rejected' || chapter.status === 'written' || chapter.status === 'approved') && (
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
                                   <div className={css.meta} style={{ fontWeight: 600 }}>
                                     润色 / 修订 — 在右上角打开工作区：左栏原文可直接选中文字做局部修订，右栏输入指令后预览，确认后再应用（未应用不改动原稿）
                                   </div>
@@ -3435,16 +3526,16 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         )}
 
         {activeTab === 'book' && (
-          <div className={css.card} style={{ gap: 12 }}>
+          <div className={css.card} style={{ gap: 'var(--nf-space-12)' }}>
             <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>📚 本书设定</span>
+              <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 700 }}>📚 本书设定</span>
               <span className={css.meta}>当前书的知识与资料（参考 AI-Novel-Writing-Assistant：世界观/角色准备收进书内）</span>
             </div>
-            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+            <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
               <button
                 type="button"
                 className={`${css.button} ${bookTab === 'bible' ? css.buttonPrimary : ''}`}
-                style={{ fontSize: 14, flex: 1 }}
+                style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                 onClick={() => { changeBookTab('bible') }}
                 title="设定库：题材 / 世界观规则 / 人物摘要 / 红线 / 文风"
               >
@@ -3453,7 +3544,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               <button
                 type="button"
                 className={`${css.button} ${bookTab === 'world' ? css.buttonPrimary : ''}`}
-                style={{ fontSize: 14, flex: 1 }}
+                style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                 onClick={() => { changeBookTab('world') }}
                 title="大世界：境界体系 / 地理区域 / 势力分布（注入生成与审稿提示词）"
               >
@@ -3462,7 +3553,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               <button
                 type="button"
                 className={`${css.button} ${bookTab === 'roles' ? css.buttonPrimary : ''}`}
-                style={{ fontSize: 14, flex: 1 }}
+                style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                 onClick={() => { changeBookTab('roles') }}
                 title="角色库：全书角色主表（定位 / 关系网 / 成长线 / 知情度）"
               >
@@ -3471,7 +3562,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               <button
                 type="button"
                 className={`${css.button} ${bookTab === 'facts' ? css.buttonPrimary : ''}`}
-                style={{ fontSize: 14, flex: 1 }}
+                style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                 onClick={() => { changeBookTab('facts') }}
                 title="编年录与复盘记录"
               >
@@ -3492,13 +3583,13 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             {bible === undefined ? (
               <span className={css.meta}>{tt('bible.none')}</span>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)' }}>
                 {bible.genre !== '' && (
                   <div><b>{tt('bible.genre')}:</b> <span className={css.meta}>{bible.genre}</span></div>
                 )}
                 {/* 世界观规则独立卡片（可编辑，每行一条） */}
                 {bible.worldRules.length > 0 && (
-                  <div style={{ border: '1px solid var(--nf-border)', borderRadius: 10, padding: '8px 10px' }}>
+                  <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)' }}>
                     <div className={css.row} style={{ justifyContent: 'space-between' }}>
                       <b>{tt('bible.worldRules')}（{bible.worldRules.length}）</b>
                       <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setWorldRulesDraft(bible.worldRules.join('\n')) }}>
@@ -3506,7 +3597,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                       </button>
                     </div>
                     {worldRulesDraft !== '' && (
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', marginTop: 'var(--nf-space-6)' }}>
                         <textarea
                           className={css.textarea}
                           style={{ minHeight: 120 }}
@@ -3525,7 +3616,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                       </div>
                     )}
                     {worldRulesDraft === '' && (
-                      <ul style={{ margin: '4px 0 0', paddingLeft: 18, fontSize: 12 }}>{bible.worldRules.map((r, i) => <li key={i}>{r}</li>)}</ul>
+                      <ul style={{ margin: '4px 0 0', paddingLeft: 'var(--nf-space-18)', fontSize: 'var(--nf-fs-12)' }}>{bible.worldRules.map((r, i) => <li key={i}>{r}</li>)}</ul>
                     )}
                   </div>
                 )}
@@ -3533,7 +3624,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   <div>
                     <b>{tt('bible.characters')}（{bible.characters.length}）</b>
                     {bible.characters.map(card => (
-                      <div key={card.name} style={{ marginTop: 4, fontSize: 12 }}>
+                      <div key={card.name} style={{ marginTop: 'var(--nf-space-4)', fontSize: 'var(--nf-fs-12)' }}>
                         <b>{card.name}</b> <span className={css.meta}>[{card.role}] {card.traits.join('、')}</span>
                         {card.goals !== '' && <div className={css.meta}>目标：{card.goals}</div>}
                         {card.relations !== '' && <div className={css.meta}>关系：{card.relations}</div>}
@@ -3544,13 +3635,13 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 {bible.redLines.length > 0 && (
                   <div>
                     <b>{tt('bible.redLines')}（{bible.redLines.length}）</b>
-                    <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, color: 'var(--nf-error)' }}>{bible.redLines.map((r, i) => <li key={i}>{r}</li>)}</ul>
+                    <ul style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', fontSize: 'var(--nf-fs-12)', color: 'var(--nf-error)' }}>{bible.redLines.map((r, i) => <li key={i}>{r}</li>)}</ul>
                   </div>
                 )}
                 {bible.style.length > 0 && (
                   <div>
                     <b>{tt('bible.style')}（{bible.style.length}）</b>
-                    <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12 }}>{bible.style.map((r, i) => <li key={i}>{r}</li>)}</ul>
+                    <ul style={{ margin: 0, paddingLeft: 'var(--nf-space-18)', fontSize: 'var(--nf-fs-12)' }}>{bible.style.map((r, i) => <li key={i}>{r}</li>)}</ul>
                   </div>
                 )}
               </div>
@@ -3600,7 +3691,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             <span className={css.meta}>角色库是全书角色主表：定位（女主/女配/配角/反派）、身份、关系网、成长线、知情度——生成与审稿都会按定位规格刻画互动。点「从编年录刷新状态」可在每张卡上显示角色当前状态。</span>
 
             {roleCandidates !== null && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, border: '1px solid var(--nf-info)', borderRadius: 12, padding: 10 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', border: '1px solid var(--nf-info)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-10)' }}>
                 <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
                   <b>✨ AI 提炼候选（{roleCandidates.length}）</b>
                   <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setRoleCandidates(null) }}>收起</button>
@@ -3619,7 +3710,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             )}
 
             {roleDraft !== null && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, border: '1px solid var(--nf-accent)', borderRadius: 12, padding: 10 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-10)' }}>
                 <div className={css.row} style={{ flexWrap: 'wrap' }}>
                   <div className={css.field} style={{ flex: 1, minWidth: 140 }}>
                     <label className={css.fieldLabel}>角色名</label>
@@ -3669,7 +3760,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             {(project?.roles ?? []).length === 0 ? (
               <span className={css.meta}>角色库为空——点「✨ 从全书提炼角色」自动建立，或手动新增。</span>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)' }}>
                 {(project?.roles ?? []).map(r => (
                   <RoleCard
                     key={r.name}
@@ -3690,246 +3781,313 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
 
         {activeTab === 'settings' && configDraft !== null && (
           <>
-            {/* ① 路径与输出 */}
+            {/* 设置页内子导航（大容器） */}
             <div className={`${css.card} ${css.settingsCard}`}>
-              <span className={css.cardTitle}>📁 路径与输出</span>
-              <div className={css.field}>
-                <label className={css.fieldLabel}>{tt('settings.outlinePath')}</label>
-                <input className={css.input} value={configDraft.outlinePath} onChange={e => { setConfigDraft({ ...configDraft, outlinePath: e.target.value }) }} />
-              </div>
-              <div className={css.field}>
-                <label className={css.fieldLabel}>{tt('settings.outputDir')}</label>
-                <input className={css.input} value={configDraft.outputDir} onChange={e => { setConfigDraft({ ...configDraft, outputDir: e.target.value }) }} />
+              <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--nf-space-8)' }}>
+                <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-20)', fontWeight: 700 }}>⚙️ 设置</span>
+                <span className={css.meta}>当前：{config?.provider} / {config?.model} · {config?.outputDir}</span>
               </div>
-              <div className={css.row}>
-                <button type="button" className={css.button} onClick={() => { void api.openFolder() }}>{tt('settings.openFolder')}</button>
+              <div className={css.row} 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={{ fontSize: 'var(--nf-fs-14)', padding: 'var(--nf-space-8) var(--nf-space-12)', flex: 1, minWidth: 104, justifyContent: 'center' }}
+                    onClick={() => { changeSettingsTab(s.id) }}
+                  >
+                    {s.icon} {s.label}
+                  </button>
+                ))}
               </div>
             </div>
 
-            {/* ② 模型与推理 */}
-            <div className={`${css.card} ${css.settingsCard}`}>
-              <span className={css.cardTitle}>🤖 模型与推理</span>
-              <div className={css.row} style={{ alignItems: 'flex-start' }}>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.provider')}</label>
-                  <input className={css.input} value={configDraft.provider} onChange={e => { setConfigDraft({ ...configDraft, provider: e.target.value }) }} />
-                </div>
-                <div className={css.field} style={{ flex: 1.4 }}>
-                  <label className={css.fieldLabel}>{tt('settings.model')}</label>
-                  <select
-                    className={css.input}
-                    value={modelCustomMode ? '__custom__' : configDraft.model}
-                    onChange={e => {
-                      const v = e.target.value
-                      if (v === '__custom__') {
-                        setModelCustomMode(true)
-                      } else {
-                        setModelCustomMode(false)
-                        setConfigDraft({ ...configDraft, model: v })
-                      }
-                    }}
-                  >
-                    {MODEL_PRESETS.map(m => <option key={m} value={m}>{m}</option>)}
-                    <option value="__custom__">{tt('settings.modelCustom')}</option>
-                  </select>
-                  {modelCustomMode && (
-                    <input
+            {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>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-24)' }}>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.provider')}</label>
+                    <input className={css.input} value={configDraft.provider} onChange={e => { setConfigDraft({ ...configDraft, provider: e.target.value }) }} />
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.model')}</label>
+                    <select
                       className={css.input}
-                      style={{ marginTop: 6 }}
-                      value={configDraft.model}
-                      placeholder={tt('settings.modelCustomPlaceholder')}
-                      onChange={e => { setConfigDraft({ ...configDraft, model: e.target.value }) }}
-                    />
-                  )}
+                      value={modelCustomMode ? '__custom__' : configDraft.model}
+                      onChange={e => {
+                        const v = e.target.value
+                        if (v === '__custom__') {
+                          setModelCustomMode(true)
+                        } else {
+                          setModelCustomMode(false)
+                          setConfigDraft({ ...configDraft, model: v })
+                        }
+                      }}
+                    >
+                      {MODEL_PRESETS.map(m => <option key={m} value={m}>{m}</option>)}
+                      <option value="__custom__">{tt('settings.modelCustom')}</option>
+                    </select>
+                    {modelCustomMode && (
+                      <input
+                        className={css.input}
+                        style={{ marginTop: 'var(--nf-space-6)' }}
+                        value={configDraft.model}
+                        placeholder={tt('settings.modelCustomPlaceholder')}
+                        onChange={e => { setConfigDraft({ ...configDraft, model: e.target.value }) }}
+                      />
+                    )}
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.reasoningEffort')}</label>
+                    <select
+                      className={css.input}
+                      value={configDraft.reasoningEffort ?? 'off'}
+                      onChange={e => { setConfigDraft({ ...configDraft, reasoningEffort: e.target.value as NovelConfig['reasoningEffort'] }) }}
+                    >
+                      {REASONING_OPTIONS.map(v => <option key={v} value={v}>{tt(`settings.reasoning.${v}`)}</option>)}
+                    </select>
+                    <span className={css.meta}>{tt('settings.reasoningHint')}</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.analysisReasoning')}</label>
+                    <select
+                      className={css.input}
+                      value={configDraft.analysisReasoning ?? 'low'}
+                      onChange={e => { setConfigDraft({ ...configDraft, analysisReasoning: e.target.value as NovelConfig['analysisReasoning'] }) }}
+                    >
+                      {REASONING_OPTIONS.map(v => <option key={v} value={v}>{tt(`settings.reasoning.${v}`)}</option>)}
+                    </select>
+                    <span className={css.meta}>{tt('settings.analysisReasoningHint')}</span>
+                  </div>
                 </div>
               </div>
-              <div className={css.row} style={{ alignItems: 'flex-start' }}>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.reasoningEffort')}</label>
-                  <select
-                    className={css.input}
-                    value={configDraft.reasoningEffort ?? 'off'}
-                    onChange={e => { setConfigDraft({ ...configDraft, reasoningEffort: e.target.value as NovelConfig['reasoningEffort'] }) }}
-                  >
-                    {REASONING_OPTIONS.map(v => <option key={v} value={v}>{tt(`settings.reasoning.${v}`)}</option>)}
-                  </select>
-                  <span className={css.meta}>{tt('settings.reasoningHint')}</span>
-                </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.analysisReasoning')}</label>
-                  <select
-                    className={css.input}
-                    value={configDraft.analysisReasoning ?? 'low'}
-                    onChange={e => { setConfigDraft({ ...configDraft, analysisReasoning: e.target.value as NovelConfig['analysisReasoning'] }) }}
-                  >
-                    {REASONING_OPTIONS.map(v => <option key={v} value={v}>{tt(`settings.reasoning.${v}`)}</option>)}
-                  </select>
-                  <span className={css.meta}>{tt('settings.analysisReasoningHint')}</span>
+            )}
+
+            {settingsTab === 'writing' && (
+              <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-24)' }}>
+                <span className={css.cardTitle}><PenLine size={18} style={{ verticalAlign: -3 }} /> 写作与审稿</span>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-24)' }}>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.chapterChars')}</label>
+                    <input className={css.input} type="number" min={1000} max={20000} value={configDraft.chapterChars} onChange={e => { setConfigDraft({ ...configDraft, chapterChars: Number(e.target.value) }) }} />
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.maxTokens')}</label>
+                    <input className={css.input} type="number" min={2000} max={64000} value={configDraft.maxTokens} onChange={e => { setConfigDraft({ ...configDraft, maxTokens: Number(e.target.value) }) }} />
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.reviewPassScore')}</label>
+                    <input className={css.input} type="number" min={0} max={100} value={configDraft.reviewPassScore} onChange={e => { setConfigDraft({ ...configDraft, reviewPassScore: Number(e.target.value) }) }} />
+                    <span className={css.meta}>通过判定：综合评分 ≥ 此分数（默认 70），或无 high 级问题且评分 ≥ 60；建议设 60-80。</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.autoReview')}</label>
+                    <select
+                      className={css.input}
+                      value={configDraft.autoReview ? '1' : '0'}
+                      onChange={e => { setConfigDraft({ ...configDraft, autoReview: e.target.value === '1' }) }}
+                    >
+                      <option value="1">✓ 是</option>
+                      <option value="0">✗ 否</option>
+                    </select>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.autoAuthorReview')}</label>
+                    <select
+                      className={css.input}
+                      value={configDraft.autoAuthorReview ? '1' : '0'}
+                      onChange={e => { setConfigDraft({ ...configDraft, autoAuthorReview: e.target.value === '1' }) }}
+                    >
+                      <option value="1">✓ 是</option>
+                      <option value="0">✗ 否</option>
+                    </select>
+                    <span className={css.meta}>{tt('settings.autoAuthorReviewHint')}</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>{tt('settings.autoReviewAfterRevise')}</label>
+                    <select
+                      className={css.input}
+                      value={configDraft.autoReviewAfterRevise ? '1' : '0'}
+                      onChange={e => { setConfigDraft({ ...configDraft, autoReviewAfterRevise: e.target.value === '1' }) }}
+                    >
+                      <option value="1">✓ 是</option>
+                      <option value="0">✗ 否</option>
+                    </select>
+                    <span className={css.meta}>{tt('settings.autoReviewAfterReviseHint')}</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel}>编辑器字号（正文编辑 / 工作区）</label>
+                    <select
+                      className={css.input}
+                      value={editorFontSize}
+                      onChange={e => { changeEditorFontSize(Number(e.target.value)) }}
+                    >
+                      {[12, 13, 14, 15, 16, 18, 20, 22, 24].map(v => (
+                        <option key={v} value={v}>{v}px</option>
+                      ))}
+                    </select>
+                    <span className={css.meta}>更改的是章节正文编辑区与润色/修订工作区（原稿 / 草稿 / diff）的显示字号，不影响面板主题。</span>
+                  </div>
                 </div>
               </div>
-            </div>
+            )}
 
-            {/* ③ 生图（豆包） */}
-            <div className={`${css.card} ${css.settingsCard}`}>
-              <span className={css.cardTitle}>🎨 生图（豆包）</span>
-              <div className={css.row}>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>豆包 API Key（生图）</label>
-                  <input className={css.input} type="password" placeholder="ark-..." value={configDraft.imageApiKey ?? ''} onChange={e => { setConfigDraft({ ...configDraft, imageApiKey: e.target.value }) }} />
+            {settingsTab === 'image' && (
+              <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-24)' }}>
+                <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', alignItems: 'center' }}>
+                  <span className={css.cardTitle}><Palette size={18} style={{ verticalAlign: -3 }} /> 生图模型</span>
+                  <span className={css.row} style={{ gap: 'var(--nf-space-8)', alignItems: 'center' }}>
+                    <span className={css.meta}>启用生图功能</span>
+                    <button
+                      type="button"
+                      role="switch"
+                      aria-checked={configDraft.imageApiEnabled === true}
+                      className={`${css.switch} ${configDraft.imageApiEnabled === true ? css.switchOn : ''}`}
+                      onClick={() => { setConfigDraft(prev => prev === null ? prev : { ...prev, imageApiEnabled: prev.imageApiEnabled !== true }) }}
+                    >
+                      <span className={css.switchKnob} />
+                    </button>
+                  </span>
                 </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>豆包生图模型</label>
-                  <input className={css.input} placeholder="doubao-seedream-5-0-pro-260628" value={configDraft.imageApiModel ?? ''} onChange={e => { setConfigDraft({ ...configDraft, imageApiModel: e.target.value }) }} />
+                <span className={css.meta}>支持多套 OpenAI 兼容生图接口（豆包 / 即梦 / 其他平台）；启用一条作为生成模型，保存后角色详情显示「AI 生图」按钮。</span>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-20)' }}>
+                  {(configDraft.imageModels ?? []).map(m => (
+                    <div key={m.id} style={{ border: m.enabled ? '1px solid var(--nf-accent)' : '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-14)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)', background: m.enabled ? 'var(--nf-accent-soft)' : 'transparent' }}>
+                      <div className={css.row} style={{ alignItems: 'flex-end', flexWrap: 'wrap' }}>
+                        <div className={css.field} style={{ flex: 1, minWidth: 180 }}>
+                          <label className={css.fieldLabel}>名称</label>
+                          <input className={css.input} placeholder="如：豆包 Seedream" value={m.name} onChange={e => { updateImageModel(m.id, { name: e.target.value }) }} />
+                        </div>
+                        <div className={css.field} style={{ flex: 1, minWidth: 180 }}>
+                          <label className={css.fieldLabel}>模型 id</label>
+                          <input className={css.input} placeholder="doubao-seedream-5-0-pro-260628" value={m.model} onChange={e => { updateImageModel(m.id, { model: e.target.value }) }} />
+                        </div>
+                        <div className={css.field} style={{ flex: 1, minWidth: 200 }}>
+                          <label className={css.fieldLabel}>接口地址</label>
+                          <input className={css.input} placeholder="https://ark.cn-beijing.volces.com/api/v3" value={m.baseURL} onChange={e => { updateImageModel(m.id, { baseURL: e.target.value }) }} />
+                        </div>
+                      </div>
+                      <div className={css.field}>
+                        <label className={css.fieldLabel}>API Key</label>
+                        <input className={css.input} type="password" placeholder="ark-..." value={m.apiKey} onChange={e => { updateImageModel(m.id, { apiKey: e.target.value }) }} />
+                      </div>
+                      <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap', alignItems: 'center' }}>
+                        <button type="button" className={`${css.button} ${css.buttonSmall} ${m.enabled ? css.buttonPrimary : ''}`} onClick={() => { enableImageModel(m.id) }}>
+                          {m.enabled ? '✓ 已启用' : '设为启用'}
+                        </button>
+                        <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={imageTestState[m.id]?.testing === true} onClick={() => { void testImageModel(m) }}>
+                          <PlugZap size={13} style={{ verticalAlign: -2 }} /> {imageTestState[m.id]?.testing === true ? '测试中…' : '测试'}
+                        </button>
+                        <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { removeImageModel(m.id) }}>🗑 删除</button>
+                        <span className={css.meta}>{m.enabled ? '当前生效' : '未启用'}</span>
+                        {(() => {
+                          const st = imageTestState[m.id]
+                          if (st === undefined || st.testing) return null
+                          return st.ok === true
+                            ? <span style={{ color: 'var(--nf-success)', fontSize: 'var(--nf-fs-12)', fontWeight: 600 }}>✓ 连通 · {st.ms}ms{st.modelFound === true ? '' : st.modelFound === false ? '（模型未在列表）' : ''}</span>
+                            : <span style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-12)' }}>✗ {st.message ?? '失败'}</span>
+                        })()}
+                      </div>
+                    </div>
+                  ))}
+                  {(configDraft.imageModels ?? []).length === 0 && (
+                    <div className={css.meta}>还没有生图模型——点下方「＋ 添加生图模型」添加第一条（默认启用）。</div>
+                  )}
                 </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>启用豆包生图</label>
-                  <select
-                    className={css.input}
-                    value={configDraft.imageApiEnabled ? '1' : '0'}
-                    onChange={e => { setConfigDraft({ ...configDraft, imageApiEnabled: e.target.value === '1' }) }}
-                  >
-                    <option value="0">关（默认）</option>
-                    <option value="1">开</option>
-                  </select>
-                  <span className={css.meta}>开启后角色详情显示「豆包生成」参考图按钮</span>
+                <div className={css.row}>
+                  <button type="button" className={css.button} onClick={addImageModel}>＋ 添加生图模型</button>
                 </div>
               </div>
-            </div>
+            )}
 
-            {/* ④ 写作与审稿参数 */}
-            <div className={`${css.card} ${css.settingsCard}`}>
-              <span className={css.cardTitle}>✍️ 写作与审稿参数</span>
-              <div className={css.row}>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.chapterChars')}</label>
-                  <input className={css.input} type="number" min={1000} max={20000} value={configDraft.chapterChars} onChange={e => { setConfigDraft({ ...configDraft, chapterChars: Number(e.target.value) }) }} />
-                </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.maxTokens')}</label>
-                  <input className={css.input} type="number" min={2000} max={64000} value={configDraft.maxTokens} onChange={e => { setConfigDraft({ ...configDraft, maxTokens: Number(e.target.value) }) }} />
-                </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.editorFontSize')}</label>
-                  <select
-                    className={css.input}
-                    value={editorFontSize}
-                    onChange={e => { changeEditorFontSize(Number(e.target.value)) }}
-                  >
-                    {[12, 13, 14, 15, 16, 18, 20, 22, 24].map(v => (
-                      <option key={v} value={v}>{v}px</option>
-                    ))}
-                  </select>
-                  <span className={css.meta}>{tt('settings.editorFontSizeHint')}</span>
+            {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.outlinePath')}</label>
+                  <input className={css.input} value={configDraft.outlinePath} onChange={e => { setConfigDraft({ ...configDraft, outlinePath: e.target.value }) }} />
                 </div>
-              </div>
-              <div className={css.row}>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.reviewPassScore')}</label>
-                  <input className={css.input} type="number" min={0} max={100} value={configDraft.reviewPassScore} onChange={e => { setConfigDraft({ ...configDraft, reviewPassScore: Number(e.target.value) }) }} />
-                  <span className={css.meta}>通过判定：综合评分 ≥ 此分数（默认 70），或无 high 级问题且评分 ≥ 60；建议设 60-80。</span>
+                <div className={css.field}>
+                  <label className={css.fieldLabel}>{tt('settings.outputDir')}</label>
+                  <input className={css.input} value={configDraft.outputDir} onChange={e => { setConfigDraft({ ...configDraft, outputDir: e.target.value }) }} />
                 </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.autoReview')}</label>
-                  <select
-                    className={css.input}
-                    value={configDraft.autoReview ? '1' : '0'}
-                    onChange={e => { setConfigDraft({ ...configDraft, autoReview: e.target.value === '1' }) }}
-                  >
-                    <option value="1">✓ 是</option>
-                    <option value="0">✗ 否</option>
-                  </select>
+                <div className={css.row}>
+                  <button type="button" className={css.button} onClick={() => { void api.openFolder() }}>{tt('settings.openFolder')}</button>
                 </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.autoAuthorReview')}</label>
-                  <select
-                    className={css.input}
-                    value={configDraft.autoAuthorReview ? '1' : '0'}
-                    onChange={e => { setConfigDraft({ ...configDraft, autoAuthorReview: e.target.value === '1' }) }}
-                  >
-                    <option value="1">✓ 是</option>
-                    <option value="0">✗ 否</option>
-                  </select>
-                  <span className={css.meta}>{tt('settings.autoAuthorReviewHint')}</span>
+
+                <div style={{ borderTop: '1px solid var(--nf-border)', margin: '14px 0 12px' }} />
+
+                <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-14)' }}>💾 保存与导出</span>
+                <div className={css.row}>
+                  <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleSaveConfig() }}>
+                    {tt('settings.save')}
+                  </button>
                 </div>
-                <div className={css.field} style={{ flex: 1 }}>
-                  <label className={css.fieldLabel}>{tt('settings.autoReviewAfterRevise')}</label>
-                  <select
-                    className={css.input}
-                    value={configDraft.autoReviewAfterRevise ? '1' : '0'}
-                    onChange={e => { setConfigDraft({ ...configDraft, autoReviewAfterRevise: e.target.value === '1' }) }}
-                  >
-                    <option value="1">✓ 是</option>
-                    <option value="0">✗ 否</option>
-                  </select>
-                  <span className={css.meta}>{tt('settings.autoReviewAfterReviseHint')}</span>
+                <div className={css.row}>
+                  <button type="button" className={css.button} disabled={busy || chapters.length === 0} onClick={() => { void handleExport('txt') }}>
+                    {tt('settings.exportTxt')}
+                  </button>
+                  <button type="button" className={css.button} disabled={busy || chapters.length === 0} onClick={() => { void handleExport('md') }}>
+                    {tt('settings.exportMd')}
+                  </button>
                 </div>
               </div>
-            </div>
+            )}
 
-            {/* ⑤ 保存与导出 */}
-            <div className={`${css.card} ${css.settingsCard}`}>
-              <div className={css.row}>
-                <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleSaveConfig() }}>
-                  {tt('settings.save')}
-                </button>
-                <span className={css.meta}>当前：{config?.provider} / {config?.model} · {config?.outputDir}</span>
-              </div>
-              <div className={css.row}>
-                <span className={css.cardTitle}>{tt('settings.export')}</span>
-                <button type="button" className={css.button} disabled={busy || chapters.length === 0} onClick={() => { void handleExport('txt') }}>
-                  {tt('settings.exportTxt')}
-                </button>
-                <button type="button" className={css.button} disabled={busy || chapters.length === 0} onClick={() => { void handleExport('md') }}>
-                  {tt('settings.exportMd')}
-                </button>
+            {settingsTab === 'appearance' && (
+              <div className={`${css.card} ${css.settingsCard}`}>
+                <span className={css.cardTitle}><Sparkles size={18} style={{ verticalAlign: -3 }} /> 外观与主题</span>
+                <span className={css.meta}>选择适合长时间创作的界面颜色和显示密度。主题只保存在当前设备，不影响小说内容和任务状态。</span>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-24)' }}>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel} style={{ fontSize: 'var(--nf-fs-14)' }}>显示模式</label>
+                    <select className={css.input} style={{ padding: 'var(--nf-space-10) var(--nf-space-12)', fontSize: 'var(--nf-fs-14)' }} value={themeMode} onChange={e => { changeThemeMode(e.target.value as 'system' | 'light' | 'dark') }}>
+                      <option value="system">跟随系统</option>
+                      <option value="light">浅色</option>
+                      <option value="dark">深色</option>
+                    </select>
+                    <span className={css.meta}>强制浅色/深色只作用于小说工坊面板</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel} style={{ fontSize: 'var(--nf-fs-14)' }}>主题风格</label>
+                    <select className={css.input} style={{ padding: 'var(--nf-space-10) var(--nf-space-12)', fontSize: 'var(--nf-fs-14)' }} value={panelTheme} onChange={e => { changePanelTheme(e.target.value as 'liquid' | 'neumorph' | 'macos' | 'clay') }}>
+                      <option value="liquid">液态玻璃 · 清新绿（默认）</option>
+                      <option value="neumorph">新拟物 · 柔和浅色</option>
+                      <option value="macos">macOS · 玻璃（蓝，随外观浅/深）</option>
+                      <option value="clay">粘土拟态 · 柔和黏土</option>
+                    </select>
+                    <span className={css.meta}>{tt('settings.themeHint')}</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel} style={{ fontSize: 'var(--nf-fs-14)' }}>界面密度</label>
+                    <select className={css.input} style={{ padding: 'var(--nf-space-10) var(--nf-space-12)', fontSize: 'var(--nf-fs-14)' }} value={themeDensity} onChange={e => { changeThemeDensity(e.target.value as 'comfort' | 'compact' | 'spacious') }}>
+                      <option value="comfort">舒适（默认）</option>
+                      <option value="compact">紧凑</option>
+                      <option value="spacious">宽松</option>
+                    </select>
+                    <span className={css.meta}>卡片 / 导航 / 内容的间距密度</span>
+                  </div>
+                </div>
+                <div className={css.row} style={{ justifyContent: 'flex-end' }}>
+                  <button type="button" className={css.button} style={{ padding: 'var(--nf-space-10) var(--nf-space-18)', fontSize: 'var(--nf-fs-14)' }} onClick={resetTheme}>
+                    <RotateCcw size={14} style={{ verticalAlign: -2 }} /> 恢复默认主题
+                  </button>
+                </div>
               </div>
-            </div>
+            )}
           </>
         )}
-
-        {activeTab === 'settings' && (
-          <div className={`${css.card} ${css.settingsCard}`}>
-            <span className={css.cardTitle}>{tt('settings.theme')}</span>
-            <div className={css.row} style={{ gap: 8, flexWrap: 'wrap' }}>
-              <button
-                type="button"
-                className={`${css.button} ${css.buttonSmall} ${panelTheme === 'liquid' ? css.buttonPrimary : ''}`}
-                onClick={() => { changePanelTheme('liquid') }}
-                title="iOS 液态玻璃质感 · 绿色强调（当前默认）"
-              >
-                🧊 {tt('settings.themeLiquid')}
-              </button>
-              <button
-                type="button"
-                className={`${css.button} ${css.buttonSmall} ${panelTheme === 'classic' ? css.buttonPrimary : ''}`}
-                onClick={() => { changePanelTheme('classic') }}
-                title="经典 iOS 毛玻璃 · 蓝色强调"
-              >
-                💠 {tt('settings.themeClassic')}
-              </button>
-              <button
-                type="button"
-                className={`${css.button} ${css.buttonSmall} ${panelTheme === 'neumorph' ? css.buttonPrimary : ''}`}
-                onClick={() => { changePanelTheme('neumorph') }}
-                title="新拟物派 · 双阴影立体（仅浅色；深色下自动回退液态）"
-              >
-                🔘 {tt('settings.themeNeumorph')}
-              </button>
-              <span className={css.meta}>{tt('settings.themeHint')}</span>
-            </div>
-          </div>
-        )}
-
         {activeTab === 'book' && bookTab === 'facts' && (
           <div className={css.card}>
             <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>📚 编年 / 复盘</span>
+              <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 700 }}>📚 编年 / 复盘</span>
             </div>
-            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+            <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
                 <button
                   type="button"
                   className={`${css.button} ${archiveTab === 'facts' ? css.buttonPrimary : ''}`}
-                  style={{ fontSize: 14, flex: 1 }}
+                  style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                   onClick={() => { changeArchiveTab('facts') }}
                   title="编年录：客观事实流水（第 N 章 · 事件），生成/审稿查证用"
                 >
@@ -3938,7 +4096,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 <button
                   type="button"
                   className={`${css.button} ${archiveTab === 'reviews' ? css.buttonPrimary : ''}`}
-                  style={{ fontSize: 14, flex: 1 }}
+                  style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                   onClick={() => { changeArchiveTab('reviews') }}
                   title="复盘记录：每章作者复盘（钩子 / 推进 / 衔接 / 趋势）"
                 >
@@ -3980,12 +4138,12 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 </span>
               )
             })()}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto', flex: 1, minHeight: 0 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)', overflowY: 'auto', flex: 1, minHeight: 0 }}>
               {(() => {
                 const groupsWithReviews = chapterGroups.filter(group => group.chapters.some(c => c.authorReview !== undefined))
                 if (groupsWithReviews.length === 0) return null
                 return (
-                  <div className={css.row} style={{ justifyContent: 'flex-end', gap: 6 }}>
+                  <div className={css.row} style={{ justifyContent: 'flex-end', gap: 'var(--nf-space-6)' }}>
                     <button
                       type="button"
                       className={`${css.button} ${css.buttonSmall}`}
@@ -4008,10 +4166,10 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 if (groupReviewed.length === 0) return null
                 const volumeExpanded = expandedVolumes[group.no] === true
                 return (
-                  <div key={group.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, overflow: 'hidden' }}>
+                  <div key={group.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', overflow: 'hidden' }}>
                     <button
                       type="button"
-                      style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: '8px 12px', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}
+                      style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: 'var(--nf-space-8) var(--nf-space-12)', fontSize: 'var(--nf-fs-14)', display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}
                       onClick={() => { setExpandedVolumes(prev => ({ ...prev, [group.no]: !volumeExpanded })) }}
                     >
                       <span style={{ color: 'var(--nf-text-3)' }}>{volumeExpanded ? '▾' : '▸'}</span>
@@ -4019,25 +4177,25 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                       <span className={css.meta}>已复盘 {groupReviewed.length}/{group.chapters.length} 章</span>
                     </button>
                     {volumeExpanded && (
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '4px 8px 8px', borderTop: '1px solid var(--nf-border)' }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', padding: 'var(--nf-space-4) var(--nf-space-8) var(--nf-space-8)', borderTop: '1px solid var(--nf-border)' }}>
                         {[...groupReviewed].reverse().map(c => {
                           const ar = c.authorReview!
                           const expanded = expandedReviewChapter === c.no
                           return (
-                            <div key={c.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, overflow: 'hidden' }}>
+                            <div key={c.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-8)', overflow: 'hidden' }}>
                               <button
                                 type="button"
-                                style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: '6px 10px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}
+                                style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)', display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}
                                 onClick={() => { setExpandedReviewChapter(expanded ? null : c.no) }}
                               >
                                 <span style={{ color: 'var(--nf-text-3)' }}>{expanded ? '▾' : '▸'}</span>
                                 <b>第{c.no}章《{c.title}》</b>
                                 <span style={{ color: ar.hookHonored ? 'var(--nf-success)' : 'var(--nf-warn)' }}>钩子{ar.hookHonored ? '✓' : '✗'}</span>
                                 <span style={{ color: ar.endingHook >= 6 ? 'var(--nf-success)' : 'var(--nf-error)' }}>结尾钩子 {ar.endingHook}/10</span>
-                                {ar.plotlineProgress !== '' && <span className={css.meta} style={{ marginLeft: 4 }}>{ar.plotlineProgress.slice(0, 40)}{ar.plotlineProgress.length > 40 ? '…' : ''}</span>}
+                                {ar.plotlineProgress !== '' && <span className={css.meta} style={{ marginLeft: 'var(--nf-space-4)' }}>{ar.plotlineProgress.slice(0, 40)}{ar.plotlineProgress.length > 40 ? '…' : ''}</span>}
                               </button>
                               {expanded && (
-                                <div style={{ padding: '4px 10px 8px', fontSize: 12, display: 'flex', flexDirection: 'column', gap: 3, borderTop: '1px solid var(--nf-border)' }}>
+                                <div style={{ padding: 'var(--nf-space-4) var(--nf-space-10) var(--nf-space-8)', fontSize: 'var(--nf-fs-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', borderTop: '1px solid var(--nf-border)' }}>
                                   {ar.hookNote !== '' && <span className={css.meta}><b>钩子：</b>{ar.hookNote}</span>}
                                   {ar.plotlineProgress !== '' && <span className={css.meta}><b>推进：</b>{ar.plotlineProgress}</span>}
                                   {ar.continuity !== '' && <span className={css.meta}><b>衔接：</b>{ar.continuity}</span>}
@@ -4070,10 +4228,10 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             </div>
             <span className={css.meta}>{tt('facts.hint')}</span>
             {(project?.facts ?? []).length > 0 ? (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: '60vh', overflowY: 'auto', fontSize: 12 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', maxHeight: '60vh', overflowY: 'auto', fontSize: 'var(--nf-fs-12)' }}>
                 {[...(project?.facts ?? [])].reverse().map((fact, i) => (
-                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-                    <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)', flex: 'none', marginTop: 1 }}>
+                  <div key={i} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'flex-start' }}>
+                    <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)', flex: 'none', marginTop: 'var(--nf-space-2)' }}>
                       第 {fact.chapterNo} 章
                     </span>
                     <span className={css.meta}>{fact.text}</span>
@@ -4091,13 +4249,13 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         {activeTab === 'plotlines' && (
           <div className={css.card}>
             <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>📜 长线管理</span>
+              <span className={css.cardTitle} style={{ fontSize: 'var(--nf-fs-16)', fontWeight: 700 }}>📜 长线管理</span>
             </div>
-            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+            <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
                 <button
                   type="button"
                   className={`${css.button} ${longlineTab === 'plotlines' ? css.buttonPrimary : ''}`}
-                  style={{ fontSize: 14, flex: 1 }}
+                  style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                   onClick={() => { changeLonglineTab('plotlines') }}
                   title="剧情线：故事明线（主线 / 支线 / 人物 / 悬念）"
                 >
@@ -4106,7 +4264,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 <button
                   type="button"
                   className={`${css.button} ${longlineTab === 'foreshadow' ? css.buttonPrimary : ''}`}
-                  style={{ fontSize: 14, flex: 1 }}
+                  style={{ fontSize: 'var(--nf-fs-14)', flex: 1 }}
                   onClick={() => { changeLonglineTab('foreshadow') }}
                   title="伏笔：道具 / 事件级暗线（埋设 → 回收）"
                 >
@@ -4142,7 +4300,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                           </div>
                         </div>
                         <span className={css.badge} style={{ borderColor: statusColor, color: statusColor }}>{statusLabel}</span>
-                        <div className={css.row} style={{ gap: 4 }}>
+                        <div className={css.row} style={{ gap: 'var(--nf-space-4)' }}>
                           {f.status === 'planned' && (
                             <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => {
                               void api.foreshadow({ id: f.id, status: 'planted', plantedChapter: doneCount + 1 }).then(r => setProject(prev => prev === null ? prev : { ...prev, foreshadows: r.foreshadows }))
@@ -4237,7 +4395,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             )}
 
             {plotlineDraft !== null && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, border: '1px solid var(--nf-accent)', borderRadius: 12, padding: 10 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-10)' }}>
                 <div className={css.row} style={{ flexWrap: 'wrap' }}>
                   <div className={css.field} style={{ flex: 2, minWidth: 160 }}>
                     <label className={css.fieldLabel}>{tt('plotlines.name')}</label>
@@ -4284,7 +4442,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             {(project?.plotlines ?? []).length === 0 ? (
               <span className={css.meta}>{tt('plotlines.empty')}</span>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto', flex: 1, minHeight: 0 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', overflowY: 'auto', flex: 1, minHeight: 0 }}>
                 {(project?.plotlines ?? []).map(line => (
                   <PlotlineCard
                     key={line.id}
@@ -4307,7 +4465,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         )}
 
         {activeTab === 'manhua' && (
-          <MangaWorkspace api={api} project={project} chapters={chapters} onProjectChanged={() => refresh(false)} imageApiEnabled={config?.imageApiEnabled === true} onProgress={(text, kind) => pushProgress(text, kind ?? 'info')} />
+          <MangaWorkspace api={api} project={project} chapters={chapters} onProjectChanged={() => refresh(false)} imageApiEnabled={config?.imageApiEnabled === true} imageModels={config?.imageModels} onProgress={(text, kind) => pushProgress(text, kind ?? 'info')} />
         )}
 
         {activeTab === 'breakdown' && (
@@ -4352,7 +4510,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 <span className={css.meta}>选择范围与档位，点「开始拆书」对已写章节做整卷体检</span>
               </div>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)' }}>
                 <span className={css.meta}>
                   分析 {breakdownResult.chaptersScanned} 章 · {breakdownResult.sections.length} 个小节 · 约 {breakdownResult.usedTokens} token
                 </span>
@@ -4362,14 +4520,14 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                       <b>{sec.title}</b>
                     </div>
                     {Object.keys(sec.structured).length > 0 && (
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12, marginBottom: 6 }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-2)', fontSize: 'var(--nf-fs-12)', marginBottom: 'var(--nf-space-6)' }}>
                         {Object.entries(sec.structured).map(([k, v]) => {
                           const label = (typeof v === 'string') ? v : Array.isArray(v) ? (v as string[]).join('、') : JSON.stringify(v)
                           return <div key={k} className={css.meta}><b>{k}：</b>{label}</div>
                         })}
                       </div>
                     )}
-                    <div className={css.meta} style={{ whiteSpace: 'pre-wrap', fontSize: 12 }}>{sec.markdown}</div>
+                    <div className={css.meta} style={{ whiteSpace: 'pre-wrap', fontSize: 'var(--nf-fs-12)' }}>{sec.markdown}</div>
                   </div>
                 ))}
               </div>
@@ -4413,7 +4571,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         </div>
       )}
 
-      {/* 工作进度悬浮窗：可拖动、可拉大小（同 AI 助手），承接活动输出 + 当前任务进度 */}
+      {/* AI进度悬浮窗：可拖动、可拉大小（同 AI 助手），承接活动输出 + 当前任务进度 */}
       {progressOpen && (
         <div
           className={css.assistantFloat}
@@ -4427,24 +4585,24 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             }}
           >
             <span>
-              📊 工作进度
+              📊 AI 进度
               {busy && <span style={{ color: 'var(--nf-accent)' }}> 🟢 任务进行中</span>}
               <span className={css.meta}>（拖动标题栏移动 · 右下角拉大小）</span>
             </span>
-            <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-4)' }}>
               {progress.length > 0 && (
                 <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setProgress([]) }} title="清空活动记录">
                   清空
                 </button>
               )}
-              <button type="button" className={css.iconButton} title="关闭" aria-label="关闭工作进度" onClick={() => { setProgressOpen(false) }}>×</button>
+              <button type="button" className={css.iconButton} title="关闭" aria-label="关闭AI进度" onClick={() => { setProgressOpen(false) }}>×</button>
             </span>
           </div>
-          <div className={css.assistantFloatBody} style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
+          <div className={css.assistantFloatBody} style={{ padding: 'var(--nf-space-10)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', overflow: 'hidden' }}>
             {/* 当前任务大进度条：进行中显示 */}
             {(busy && (busyLabel !== '' || liveBar !== null)) && (
-              <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 10, padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 5, background: 'color-mix(in srgb, var(--nf-accent) 6%, transparent)' }}>
-                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--nf-accent)' }}>
+              <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', background: 'color-mix(in srgb, var(--nf-accent) 6%, transparent)' }}>
+                <span style={{ fontSize: 'var(--nf-fs-12)', fontWeight: 600, color: 'var(--nf-accent)' }}>
                   ✍ {busyLabel !== '' ? busyLabel : (liveBar?.text ?? '任务进行中')}…
                 </span>
                 {liveBar?.ratio !== undefined && (
@@ -4456,10 +4614,10 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               </div>
             )}
             {/* 活动记录列表（标题行已并入窗口标题栏，清空按钮在右上角） */}
-            <div className={css.progress} style={{ flex: 1, minHeight: 0, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 10, background: 'var(--nf-bg-inset)', padding: 8, display: 'flex', flexDirection: 'column' }}>
+            <div className={css.progress} style={{ flex: 1, minHeight: 0, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', background: 'var(--nf-bg-inset)', padding: 'var(--nf-space-8)', display: 'flex', flexDirection: 'column' }}>
               {progress.length === 0 ? (
-                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, color: 'var(--nf-text-3)', fontSize: 12, minHeight: 120 }}>
-                  <span style={{ fontSize: 22 }}>📭</span>
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--nf-space-4)', color: 'var(--nf-text-3)', fontSize: 'var(--nf-fs-12)', minHeight: 120 }}>
+                  <span style={{ fontSize: 'var(--nf-fs-22)' }}>📭</span>
                   <span>暂无活动记录</span>
                   <span>生成、审稿等操作会显示在这里</span>
                 </div>