@waterwx/dsh-novel-forge 1.5.0 → 1.7.0

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'
@@ -19,7 +20,6 @@ import { ImportModal } from './ImportModal.tsx'
 import { WorldTab } from './WorldTab.tsx'
 import { StoryboardTab } from './StoryboardTab.tsx'
 import { MangaWorkspace } from './MangaWorkspace.tsx'
-import { StyleGallery } from './StyleGallery.tsx'
 import { AuditIssueRow, PlotlineCard, PlotlineHealthPanel, PlotlinePlanPanel, PlotlineSuggestionPanel, RoleCandidateRow, RoleCard, StatCell, TodoRow } from './views.tsx'
 import { extractDocxTextFromBuffer } from '../docx.ts'
 import type {
@@ -27,6 +27,7 @@ import type {
   BookshelfSnapshot,
   ChapterPlan,
   Foreshadow,
+  ImageModelConfig,
   JobFrame,
   NovelConfig,
   Plotline,
@@ -45,8 +46,7 @@ import css from './panel.module.css'
 export type NovelTab =
   | 'workflow' | 'overview' | 'blurb' | 'plan' | 'bible' | 'world' | 'foreshadow' | 'assistant' | 'settings'
   | 'characters' | 'roles' | 'facts' | 'plotlines' | 'reviews' | 'progress' | 'breakdown'
-  | 'roleImage' | 'scenes'
-  | 'assetsGenre' | 'assetsProgression' | 'assetsTemplates' | 'assetsRules' | 'assetsStyle' | 'run' | 'manhua' | 'styleLib'
+  | 'assetsGenre' | 'assetsProgression' | 'assetsTemplates' | 'assetsRules' | 'assetsStyle' | 'run' | 'manhua'
   | 'book' | 'assets'
 
 /** Panel shell props. */
@@ -69,49 +69,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: 'roleImage', label: '角色形象', icon: '🖼️' },
-      { id: 'scenes', label: '场景库', icon: '🏞️' },
-      { id: 'styleLib', 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'
@@ -387,6 +393,50 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     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)
   /** 大纲页「更新大纲」编辑区是否展开。 */
@@ -487,23 +537,6 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   const [breakdownResult, setBreakdownResult] = useState<import('../../protocol.ts').BreakdownResponse | null>(null)
   const [breakdownScope, setBreakdownScope] = useState<'recent' | 'volume:2' | 'volume:3' | 'all'>('recent')
   const [breakdownPreset, setBreakdownPreset] = useState<'quick' | 'standard'>('quick')
-  /** 角色图集上传：当前等待上传的角色名。 */
-  const [roleImageTarget, setRoleImageTarget] = useState<string | null>(null)
-  /** 角色图集上传：当前用途标签（立绘/四视图/表情-x/场景/细节）。 */
-  const [roleImageLabel, setRoleImageLabel] = useState('立绘')
-  /** 角色形象详情：当前打开的角色名（null = 关闭）。 */
-  const [detailRoleName, setDetailRoleName] = useState<string | null>(null)
-  /** 详情面板：上传标签输入。 */
-  const [detailUploadLabel, setDetailUploadLabel] = useState('立绘')
-  /** 场景库：AI 提炼候选（null = 未运行）。 */
-  const [sceneCandidates, setSceneCandidates] = useState<import('../../protocol.ts').SceneCard[] | null>(null)
-  /** 场景库：当前打开的场景名。 */
-  const [sceneDetailName, setSceneDetailName] = useState<string | null>(null)
-  /** 场景库：上传标签输入。 */
-  const [sceneUploadLabel, setSceneUploadLabel] = useState('全景')
-  /** 场景库：编辑草稿（null = 不在编辑）。 */
-  const [sceneDraft, setSceneDraft] = useState<import('../../protocol.ts').SceneCard | null>(null)
-  const roleImageInputRef = useRef<HTMLInputElement | null>(null)
   /** AI 建议的剧情线候选（null = 未运行）。 */
   const [plotlineSuggestions, setPlotlineSuggestions] = useState<Plotline[] | null>(null)
   /** 剧情健康检查报告（null = 未运行）。 */
@@ -531,9 +564,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')
@@ -544,7 +577,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')
@@ -577,7 +610,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)
 
   /** 悬浮窗位置/尺寸持久化。 */
@@ -1174,68 +1207,6 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   }
 
   /** 生成单个角色的形象锚点（复用角色库 visual 能力）。 */
-  const handleRoleVisual = async (name: string): Promise<void> => {
-    setBusy(true)
-    setBusyLabel(`生成「${name}」形象锚点…`)
-    setError('')
-    try {
-      const activePlan = (project?.mangaPlans ?? []).find(pl => pl.active)
-      await api.roles({ op: 'visual', name, styleId: activePlan?.styleId, filterId: activePlan?.filterId })
-      await refresh(false)
-      pushProgress(`已生成「${name}」形象锚点`, 'done')
-    } catch (err) {
-      setError((err as Error).message)
-      pushProgress(`生成「${name}」形象锚点失败：${(err as Error).message}`, 'error')
-    } finally {
-      setBusy(false)
-      setBusyLabel('')
-    }
-  }
-
-  /** 上传角色图：读取本地图片为 dataURL 并写入角色卡（带用途标签 → 图集）。 */
-  const handleRoleImageUpload = async (name: string, file: File, label = '立绘'): Promise<void> => {
-    const dataUrl = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onload = () => resolve(String(reader.result))
-      reader.onerror = () => reject(reader.error ?? new Error('读取图片失败'))
-      reader.readAsDataURL(file)
-    })
-    setBusy(true)
-    setBusyLabel(`上传「${name}」${label}…`)
-    setError('')
-    try {
-      await api.roles({ op: 'image', name, dataUrl, label })
-      await refresh(false)
-      pushProgress(`已上传「${name}」${label}`, 'done')
-    } catch (err) {
-      setError((err as Error).message)
-      pushProgress(`上传「${name}」${label}失败：${(err as Error).message}`, 'error')
-    } finally {
-      setBusy(false)
-      setBusyLabel('')
-      setRoleImageTarget(null)
-      if (roleImageInputRef.current !== null) roleImageInputRef.current.value = ''
-    }
-  }
-
-  /** 用豆包/Seedream 为角色生成参考图。 */
-  const handleRoleImageGenerate = async (name: string): Promise<void> => {
-    setBusy(true)
-    setBusyLabel(`用豆包生成「${name}」参考图…`)
-    setError('')
-    try {
-      await api.roles({ op: 'imageGenerate', name })
-      await refresh(false)
-      pushProgress(`已生成「${name}」参考图`, 'done')
-    } catch (err) {
-      setError((err as Error).message)
-      pushProgress(`生成「${name}」参考图失败：${(err as Error).message}`, 'error')
-    } finally {
-      setBusy(false)
-      setBusyLabel('')
-    }
-  }
-
   /** 作者复盘补跑：全书缺失章节（流式）。 */
   const handleAuthorBackfillAll = async (): Promise<void> => {
     const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.status !== 'error' && c.authorReview === undefined).length
@@ -1882,7 +1853,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,
@@ -2094,6 +2065,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)
@@ -2107,6 +2079,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)
@@ -2358,7 +2366,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
@@ -2460,7 +2468,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}`}
@@ -2998,7 +3006,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               </div>
             )}
 
-            {/* 待办队列（活动输出已移入「工具 → 工作进度」悬浮窗） */}
+            {/* 待办队列（活动输出已移入「工具 → AI进度」悬浮窗） */}
             <div className={css.card}>
               <span className={css.cardTitle}>待办队列</span>
               {todos.length === 0 ? (
@@ -3774,236 +3782,302 @@ 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.card} ${css.settingsCard}`} style={{ padding: '20px 22px', gap: 14 }}>
+              <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
+                <span className={css.cardTitle} style={{ fontSize: 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: 8, flexWrap: 'wrap' }}>
+                {SETTINGS_SECTIONS.map(s => (
+                  <button
+                    key={s.id}
+                    type="button"
+                    className={`${css.button} ${settingsTab === s.id ? css.buttonPrimary : ''}`}
+                    style={{ fontSize: 14, padding: '8px 12px', 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: 26 }}>
+                <span className={css.cardTitle}><Brain size={18} style={{ verticalAlign: -3 }} /> 模型与推理</span>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
+                  <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: 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: 26 }}>
+                <span className={css.cardTitle}><PenLine size={18} style={{ verticalAlign: -3 }} /> 写作与审稿</span>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
+                  <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: 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: 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: 20 }}>
+                  {(configDraft.imageModels ?? []).map(m => (
+                    <div key={m.id} style={{ border: m.enabled ? '1px solid var(--nf-accent)' : '1px solid var(--nf-border)', borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 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: 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: 12, fontWeight: 600 }}>✓ 连通 · {st.ms}ms{st.modelFound === true ? '' : st.modelFound === false ? '（模型未在列表）' : ''}</span>
+                            : <span style={{ color: 'var(--nf-error)', fontSize: 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: 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: 13 }}>💾 保存与导出</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: 26 }}>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel} style={{ fontSize: 13 }}>显示模式</label>
+                    <select className={css.input} style={{ padding: '10px 12px', fontSize: 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: 13 }}>主题风格</label>
+                    <select className={css.input} style={{ padding: '10px 12px', fontSize: 14 }} value={panelTheme} onChange={e => { changePanelTheme(e.target.value as 'liquid' | 'classic' | 'neumorph') }}>
+                      <option value="liquid">液态玻璃 · 清新绿（默认）</option>
+                      <option value="classic">经典毛玻璃 · 沉静蓝</option>
+                      <option value="neumorph">新拟物 · 柔和浅色</option>
+                    </select>
+                    <span className={css.meta}>{tt('settings.themeHint')}</span>
+                  </div>
+                  <div className={css.field}>
+                    <label className={css.fieldLabel} style={{ fontSize: 13 }}>界面密度</label>
+                    <select className={css.input} style={{ padding: '10px 12px', fontSize: 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: '9px 18px', fontSize: 13.5 }} 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' }}>
@@ -4390,12 +4464,8 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           <RunPanel api={api} totalChapters={chapters.length} />
         )}
 
-        {activeTab === 'styleLib' && (
-          <StyleGallery />
-        )}
-
         {activeTab === 'manhua' && (
-          <MangaWorkspace api={api} project={project} chapters={chapters} onProjectChanged={() => refresh(false)} />
+          <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' && (
@@ -4465,563 +4535,6 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           </div>
         )}
 
-        {activeTab === 'roleImage' && (
-          <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
-            <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>🖼️ 角色形象</span>
-              <span className={css.meta}>角色形象锚点 / 生图提示词包 / 参考图集——复制提示词即可在即梦、豆包等工具出图</span>
-            </div>
-
-            <input
-              ref={roleImageInputRef}
-              type="file"
-              accept="image/*"
-              style={{ display: 'none' }}
-              onChange={e => {
-                const file = e.target.files?.[0]
-                const target = roleImageTarget
-                if (file === undefined || target === null) return
-                const readDataUrl = (): Promise<string> => new Promise((resolve, reject) => {
-                  const reader = new FileReader()
-                  reader.onload = () => resolve(String(reader.result))
-                  reader.onerror = () => reject(reader.error ?? new Error('读取图片失败'))
-                  reader.readAsDataURL(file!)
-                })
-                void (async () => {
-                  const dataUrl = await readDataUrl()
-                  if (target.endsWith('||scene')) {
-                    const sceneName = target.slice(0, -'||scene'.length)
-                    setBusy(true)
-                    setBusyLabel(`上传场景图「${sceneName}」${roleImageLabel}…`)
-                    setError('')
-                    try {
-                      await api.scenes({ op: 'image', name: sceneName, dataUrl, label: roleImageLabel })
-                      await refresh(false)
-                      pushProgress(`已上传场景「${sceneName}」${roleImageLabel}`, 'done')
-                    } catch (err) {
-                      setError((err as Error).message)
-                      pushProgress(`场景图上传失败：${(err as Error).message}`, 'error')
-                    } finally {
-                      setBusy(false)
-                      setBusyLabel('')
-                      setRoleImageTarget(null)
-                      if (roleImageInputRef.current !== null) roleImageInputRef.current.value = ''
-                    }
-                  } else {
-                    await handleRoleImageUpload(target, file, roleImageLabel)
-                  }
-                })()
-              }}
-            />
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, minHeight: 0, overflowY: 'auto' }}>
-                <div className={css.row} style={{ flexWrap: 'wrap', gap: 6, justifyContent: 'space-between' }}>
-                  <span className={css.row} style={{ gap: 6 }}>
-                    <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void (async () => {
-                      setBusy(true)
-                      setBusyLabel('⚠️ 提炼本书视觉规则…')
-                      setError('')
-                      try {
-                        const result = await api.visualRules({ op: 'extract' })
-                        await refresh(false)
-                        pushProgress(`已提炼 ${result.rules.length} 条视觉规则（已注入所有提示词）`, 'done')
-                      } catch (err) {
-                        setError((err as Error).message)
-                        pushProgress(`视觉规则提炼失败：${(err as Error).message}`, 'error')
-                      } finally {
-                        setBusy(false)
-                        setBusyLabel('')
-                      }
-                    })() }}>⚠️ 提炼视觉规则</button>
-                    <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { void refresh(false); pushProgress('角色库已刷新', 'done') }}>🔄 刷新角色库</button>
-                  </span>
-                </div>
-
-                {(project?.visualRules ?? []).length > 0 && (
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center', marginTop: 6 }}>
-                    <span className={css.meta} style={{ fontSize: 11 }}>⚠️ 本书视觉规则：</span>
-                    {(project?.visualRules ?? []).map((r, i) => <span key={i} style={{ border: '1px solid var(--nf-warn, #b8860b)', borderRadius: 999, padding: '1px 8px', fontSize: 10, color: 'var(--nf-warn, #b8860b)' }}>{r}</span>)}
-                  </div>
-                )}
-
-{(() => {
-                  const roles = project?.roles ?? []
-                  if (roles.length === 0) {
-                    return (
-                      <div className={css.shelfEmpty} style={{ minHeight: 140, flex: 1 }}>
-                        <span className={css.shelfEmptyIcon}>🎭</span>
-                        <span className={css.shelfEmptyTitle}>角色库为空</span>
-                        <span className={css.meta}>请先到「角色库」提炼角色并生成形象锚点</span>
-                        <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setActiveTab('roles') }}>去角色库</button>
-                      </div>
-                    )
-                  }
-                  const detailRole = detailRoleName !== null ? roles.find(r => r.name === detailRoleName) : undefined
-                  const group = (role: RoleRecord) => {
-                    const g = role.gallery ?? []
-                    const byLabel = (key: string) => g.filter(x => x.label === key)
-                    const byPrefix = (pre: string) => g.filter(x => x.label.startsWith(pre))
-                    return {
-                      portrait: byLabel('立绘')[0],
-                      sheet: byLabel('四视图')[0],
-                      expressions: byPrefix('表情-'),
-                      others: g.filter(x => x.label !== '立绘' && x.label !== '四视图' && !x.label.startsWith('表情-')),
-                    }
-                  }
-                  const uploadInDetail = (role: RoleRecord) => {
-                    setRoleImageLabel(detailUploadLabel.trim() !== '' ? detailUploadLabel.trim() : '立绘')
-                    setRoleImageTarget(role.name)
-                    roleImageInputRef.current?.click()
-                  }
-                  return (
-                    <>
-                      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: 10 }}>
-                        {roles.map(r => (
-                          <div key={r.name} onClick={() => { setDetailRoleName(r.name); setDetailUploadLabel('立绘') }} style={{ cursor: 'pointer', border: '1px solid var(--nf-border)', borderRadius: 12, overflow: 'hidden', background: 'var(--nf-bg-inset)', display: 'flex', flexDirection: 'column' }}>
-                            <div style={{ aspectRatio: '3/4', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--nf-bg-inset)', borderBottom: '1px solid var(--nf-border)', position: 'relative', overflow: 'hidden' }}>
-                              {r.imageUrl !== undefined
-                                ? <img src={r.imageUrl} alt={r.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
-                                : <span className={css.meta}>暂无形象</span>}
-                              <span style={{ position: 'absolute', bottom: 4, right: 4, background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 10, borderRadius: 6, padding: '1px 6px' }}>🖼 {(r.gallery ?? []).length}</span>
-                            </div>
-                            <div style={{ padding: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
-                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                <b style={{ fontSize: 13 }}>{r.name}</b>
-                                <span className={css.meta} style={{ fontSize: 10 }}>{r.roleLabel}</span>
-                              </div>
-                              <div className={css.meta} style={{ fontSize: 10, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                                {r.imagePrompt !== undefined ? '✓ 锚点' : '⚠ 无锚点'} · {(r.identity ?? '').slice(0, 16)}
-                              </div>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-
-                      {detailRole !== undefined && (
-                        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { setDetailRoleName(null) }}>
-                          <div style={{ background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 16, width: 'min(960px, 100%)', maxHeight: '92vh', overflowY: 'auto', padding: 20, position: 'relative' }} onClick={e => e.stopPropagation()}>
-                            <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 12, right: 12, fontSize: 18 }} title="关闭" aria-label="关闭" onClick={() => { setDetailRoleName(null) }}>✕</button>
-                            <div style={{ marginBottom: 12 }}>
-                              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
-                                <b style={{ fontSize: 22 }}>{detailRole.name}</b>
-                                <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>{detailRole.roleLabel}</span>
-                              </div>
-                              <div className={css.meta} style={{ marginTop: 4 }}>{detailRole.identity}</div>
-                            </div>
-
-                            {(project?.visualRules ?? []).length > 0 && (
-                              <div style={{ border: '1px solid var(--nf-warn, #b8860b)', borderRadius: 10, padding: '6px 10px', marginBottom: 10, fontSize: 11 }}>
-                                <b>⚠️ 本书视觉规则（已内嵌到下方所有提示词）</b>
-                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 4 }}>
-                                  {(project?.visualRules ?? []).map((r, i) => <span key={i} style={{ border: '1px solid var(--nf-border)', borderRadius: 999, padding: '1px 8px', fontSize: 10 }}>{r}</span>)}
-                                </div>
-                              </div>
-                            )}
-
-                            <details style={{ marginBottom: 10, fontSize: 12 }}>
-                              <summary style={{ cursor: 'pointer', color: 'var(--nf-text-2)' }}>🖼 图集（{(detailRole.gallery ?? []).length} 张 · 点击展开/收起）</summary>
-                              <div style={{ marginTop: 8 }}>
-                            {(() => {
-                              const g = group(detailRole)
-                              const hasMain = g.portrait !== undefined || g.sheet !== undefined
-                              return (
-                                <>
-                                  {hasMain && (
-                                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 10, marginBottom: 12 }}>
-                                      {g.portrait !== undefined && (
-                                        <div style={{ border: '1px solid var(--nf-border)', borderRadius: 12, overflow: 'hidden' }}>
-                                          <img src={g.portrait.dataUrl} alt="立绘" style={{ width: '100%', maxHeight: 380, objectFit: 'contain', display: 'block', background: '#111' }} />
-                                          <div className={css.meta} style={{ padding: '2px 8px', fontSize: 11 }}>立绘</div>
-                                        </div>
-                                      )}
-                                      {g.sheet !== undefined && (
-                                        <div style={{ border: '1px solid var(--nf-border)', borderRadius: 12, overflow: 'hidden' }}>
-                                          <img src={g.sheet.dataUrl} alt="四视图" style={{ width: '100%', maxHeight: 380, objectFit: 'contain', display: 'block', background: '#111' }} />
-                                          <div className={css.meta} style={{ padding: '2px 8px', fontSize: 11 }}>四视图</div>
-                                        </div>
-                                      )}
-                                    </div>
-                                  )}
-                                  {g.expressions.length > 0 && (
-                                    <div style={{ marginBottom: 12 }}>
-                                      <b style={{ fontSize: 13 }}>表情设定</b>
-                                      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: 8, marginTop: 6 }}>
-                                        {g.expressions.map(img => (
-                                          <div key={img.label} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, overflow: 'hidden', position: 'relative' }}>
-                                            <img src={img.dataUrl} alt={img.label} style={{ width: '100%', height: 110, objectFit: 'cover', display: 'block' }} />
-                                            <div style={{ background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, padding: '1px 6px', textAlign: 'center' }}>{img.label.replace('表情-', '')}</div>
-                                            <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 2, right: 2, fontSize: 11 }} title="删除" aria-label="删除" onClick={() => { void (async () => {
-                                              try {
-                                                await api.roles({ op: 'removeImage', name: detailRole.name, label: img.label })
-                                                await refresh(false)
-                                                pushProgress(`已删除「${detailRole.name}」${img.label}`, 'done')
-                                              } catch (err) { setError((err as Error).message) }
-                                            })() }}>×</button>
-                                          </div>
-                                        ))}
-                                      </div>
-                                    </div>
-                                  )}
-                                  {g.others.length > 0 && (
-                                    <div style={{ marginBottom: 12 }}>
-                                      <b style={{ fontSize: 13 }}>场景 / 细节</b>
-                                      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 8, marginTop: 6 }}>
-                                        {g.others.map(img => (
-                                          <div key={img.label} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, overflow: 'hidden', position: 'relative' }}>
-                                            <img src={img.dataUrl} alt={img.label} style={{ width: '100%', height: 90, objectFit: 'cover', display: 'block' }} />
-                                            <div style={{ background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, padding: '1px 6px', textAlign: 'center' }}>{img.label}</div>
-                                            <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 2, right: 2, fontSize: 11 }} title="删除" aria-label="删除" onClick={() => { void (async () => {
-                                              try {
-                                                await api.roles({ op: 'removeImage', name: detailRole.name, label: img.label })
-                                                await refresh(false)
-                                                pushProgress(`已删除「${detailRole.name}」${img.label}`, 'done')
-                                              } catch (err) { setError((err as Error).message) }
-                                            })() }}>×</button>
-                                          </div>
-                                        ))}
-                                      </div>
-                                    </div>
-                                  )}
-                                </>
-                              )
-                            })()}
-                              </div>
-                            </details>
-
-                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14, marginBottom: 12 }}>
-                              <div>
-                                <b style={{ fontSize: 13 }}>基本信息</b>
-                                <div style={{ fontSize: 12, lineHeight: 1.8, marginTop: 4 }}>
-                                  <div><span className={css.meta}>性格：</span>{(detailRole.traits ?? []).join('、') || '—'}</div>
-                                  <div><span className={css.meta}>目标：</span>{detailRole.goals || '—'}</div>
-                                  <div><span className={css.meta}>关系：</span>{(detailRole.relations ?? []).join('；') || '—'}</div>
-                                  <div><span className={css.meta}>成长线：</span>{(detailRole.arc ?? []).join('；') || '—'}</div>
-                                </div>
-                              </div>
-                              <div>
-                                <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-                                  <b style={{ fontSize: 13 }}>📄 提示词包</b>
-                                  {detailRole.imagePrompt !== undefined && detailRole.promptKit === undefined && (
-                                    <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void (async () => {
-                                      setBusy(true)
-                                      setBusyLabel(`精修「${detailRole.name}」提示词…`)
-                                      setError('')
-                                      try {
-                                        const activePlan = (project?.mangaPlans ?? []).find(pl => pl.active)
-                                        await api.roles({ op: 'promptKit', name: detailRole.name, styleId: activePlan?.styleId, filterId: activePlan?.filterId })
-                                        await refresh(false)
-                                        pushProgress(`已生成「${detailRole.name}」四类精修提示词`, 'done')
-                                      } catch (err) {
-                                        setError((err as Error).message)
-                                        pushProgress(`提示词精修失败：${(err as Error).message}`, 'error')
-                                      } finally {
-                                        setBusy(false)
-                                        setBusyLabel('')
-                                      }
-                                    })() }}>✨ 生成精修版</button>
-                                  )}
-                                </div>
-                                {detailRole.imagePrompt === undefined && <span className={css.meta}>未生成锚点，先点「✨ 生成锚点」</span>}
-                                {(() => {
-                                  const anchor = detailRole.imagePrompt
-                                  if (anchor === undefined) return null
-                                  const rules = project?.visualRules ?? []
-                                  const rulesZh = rules.length > 0 ? '\n【本书视觉规则】' + rules.join('；') : ''
-                                  const expressions = detailRole.expressions ?? ['平静']
-                                  const expName = (n: string) => n.replace(/^表情-/, '')
-                                  const kit = detailRole.promptKit
-                                  const blocks: Array<{ key: string; title: string; zh: string; en: string }> = []
-                                  if (kit !== undefined) {
-                                    blocks.push({ key: 'portrait', title: '立绘', zh: kit.portrait.zh, en: kit.portrait.en })
-                                    blocks.push({ key: 'sheet', title: '四视图', zh: kit.sheet.zh, en: kit.sheet.en })
-                                    for (const e of kit.expressions) blocks.push({ key: 'exp-' + e.name, title: `表情·${e.name}`, zh: e.zh, en: e.en })
-                                    blocks.push({ key: 'details', title: '细节', zh: kit.details.zh, en: kit.details.en })
-                                  } else {
-                                    blocks.push({ key: 'portrait', title: '立绘', zh: '正面站立全身人像，3D动漫，超精细建模，纯白纯色背景，' + anchor.zh + '。角色设计稿，服装磨损、标志物细节完整展示，无多余杂物，全身完整无裁切。' + rulesZh, en: anchor.en + ', full body, front view, plain white background, 3d render, character design sheet' })
-                                    blocks.push({ key: 'sheet', title: '四视图', zh: '角色设定四视图，3D动漫，超精细建模，纯白纯色背景，' + anchor.zh + '。同一角色正面/左侧面/右侧面/背面，四个视角分别描述，全身完整，服装与标志物细节完整展示，无多余杂物。' + rulesZh, en: anchor.en + ', character sheet, front view, left side view, right side view, back view, full body, plain white background, 3d render' })
-                                    for (const n of expressions) blocks.push({ key: 'exp-' + n, title: `表情·${expName(n)}`, zh: '脸部特写（头部到锁骨），3D动漫，超精细建模，纯白纯色背景，' + anchor.zh + `。表情：${expName(n)}，五官与角色定稿完全一致，皮肤纹理细节完整，无多余杂物。` + rulesZh, en: anchor.en + `, facial close-up, head to collarbone, expression: ${expName(n)}, plain white background, 3d render, consistent with character design, detailed skin texture, no extra objects` })
-                                    blocks.push({ key: 'details', title: '细节', zh: `多组局部细节集合参考图，3D动漫，超精细建模，纯白纯色背景：${anchor.tags.map(t => t + '特写').join('；')}。细节清晰锐利，角色细节参考稿，无多余杂物。` + rulesZh, en: anchor.tags.join(', ') + ', multi-panel detail reference sheet, plain white background, 3d render, macro close-up, sharp details, character detail sheet, no extra objects' })
-                                  }
-                                  return (
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
-                                      {blocks.map(b => (
-                                        <div key={b.key} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 8px' }}>
-                                          <div className={css.row} style={{ justifyContent: 'space-between' }}>
-                                            <b style={{ fontSize: 11 }}>{b.title}</b>
-                                            <span className={css.row} style={{ gap: 4 }}>
-                                              <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ fontSize: 10 }} onClick={() => {
-                                                void navigator.clipboard?.writeText(b.zh).then(() => { pushProgress(`已复制「${detailRole.name}」${b.title}中文提示词`, 'done') }).catch(() => { /* ignore */ })
-                                              }}>复制</button>
-                                              <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ fontSize: 10 }} onClick={() => {
-                                                void navigator.clipboard?.writeText(b.en).then(() => { pushProgress(`已复制「${detailRole.name}」${b.title}英文标签`, 'done') }).catch(() => { /* ignore */ })
-                                              }}>EN</button>
-                                            </span>
-                                          </div>
-                                          <div className={css.meta} style={{ fontSize: 11, lineHeight: 1.5, marginTop: 3 }}>{b.zh}</div>
-                                          <details style={{ marginTop: 3 }}>
-                                            <summary style={{ cursor: 'pointer', fontSize: 10, color: 'var(--nf-text-2)' }}>🌐 英文标签（点击展开）</summary>
-                                            <div className={css.meta} style={{ fontSize: 9, fontFamily: 'monospace', marginTop: 2, wordBreak: 'break-all', color: 'var(--nf-text-2)' }}>{b.en}</div>
-                                          </details>
-                                        </div>
-                                      ))}
-                                      <div className={css.meta} style={{ fontSize: 10 }}>关键词：{(anchor.tags ?? []).join('、')}</div>
-                                    </div>
-                                  )
-                                })()}
-                              </div>
-                            </div>
-
-                            <div style={{ borderTop: '1px solid var(--nf-border)', paddingTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
-                              {detailRole.imagePrompt === undefined && (
-                                <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleRoleVisual(detailRole.name) }}>✨ 生成锚点</button>
-                              )}
-                              {detailRole.imagePrompt !== undefined && config?.imageApiEnabled === true && (
-                                <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void handleRoleImageGenerate(detailRole.name) }}>豆包生成</button>
-                              )}
-                              {detailRole.imagePrompt !== undefined && (
-                                <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => {
-                                  const text = [detailRole.imagePrompt!.en, detailRole.imagePrompt!.tags.join(', ')].filter(Boolean).join('\n')
-                                  void navigator.clipboard?.writeText(text).then(() => { pushProgress(`已复制「${detailRole.name}」英文生图提示词`, 'done') }).catch(() => { /* ignore */ })
-                                }}>复制提示词</button>
-                              )}
-                              <input
-                                className={css.input}
-                                style={{ width: 140, fontSize: 12, padding: '3px 6px' }}
-                                placeholder="图集标签"
-                                value={detailUploadLabel}
-                                onChange={e => { setDetailUploadLabel(e.target.value) }}
-                              />
-                              <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { uploadInDetail(detailRole) }}>📤 上传图</button>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </>
-                  )
-                })()}
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'scenes' && (
-          <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
-            <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>🏞️ 场景库</span>
-              <span className={css.meta}>场景视觉锚点：提炼自正文，供漫剧分镜/生图锁定"在哪、什么氛围"</span>
-            </div>
-
-            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6, margin: '8px 0' }}>
-              <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void (async () => {
-                setBusy(true)
-                setBusyLabel('✨ 从全书提炼场景…')
-                setError('')
-                try {
-                  const result = await api.scenes({ op: 'extract' })
-                  setSceneCandidates(result.candidates ?? [])
-                  pushProgress(`提炼出 ${(result.candidates ?? []).length} 个候选场景，可采纳或修改后采纳`, 'done')
-                } catch (err) {
-                  setError((err as Error).message)
-                  pushProgress(`场景提炼失败：${(err as Error).message}`, 'error')
-                } finally {
-                  setBusy(false)
-                  setBusyLabel('')
-                }
-              })() }}>{busy ? '⏳ 提炼中…' : '✨ 从全书提炼场景'}</button>
-              <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { void refresh(false); pushProgress('场景库已刷新', 'done') }}>🔄 刷新</button>
-              {sceneCandidates !== null && (
-                <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setSceneCandidates(null) }}>收起候选</button>
-              )}
-            </div>
-
-            {sceneDraft !== null && (
-              <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 10, padding: 10, marginBottom: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                <b style={{ fontSize: 13 }}>编辑场景</b>
-                <input className={css.input} style={{ fontSize: 12, padding: '4px 8px' }} placeholder="场景名" value={sceneDraft.name} onChange={e => { setSceneDraft({ ...sceneDraft, name: e.target.value }) }} />
-                <input className={css.input} style={{ fontSize: 12, padding: '4px 8px' }} placeholder="一句话定位" value={sceneDraft.summary} onChange={e => { setSceneDraft({ ...sceneDraft, summary: e.target.value }) }} />
-                <div className={css.row} style={{ gap: 6 }}>
-                  <input className={css.input} style={{ fontSize: 12, padding: '4px 8px', flex: 1 }} placeholder="幕归属（第一幕后场…）" value={sceneDraft.act ?? ''} onChange={e => { setSceneDraft({ ...sceneDraft, act: e.target.value }) }} />
-                  <input className={css.input} style={{ fontSize: 12, padding: '4px 8px', flex: 1 }} placeholder="时间光态（雨夜/闭店后…）" value={sceneDraft.moment ?? ''} onChange={e => { setSceneDraft({ ...sceneDraft, moment: e.target.value }) }} />
-                </div>
-                <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 48 }} placeholder="关键镜头（每行一条：人物动作+情绪+镜头）" value={(sceneDraft.beats ?? []).join('\n')} onChange={e => { setSceneDraft({ ...sceneDraft, beats: e.target.value.split(/\n+/).map(x => x.trim()).filter(Boolean) }) }} />
-                <input className={css.input} style={{ fontSize: 12, padding: '4px 8px' }} placeholder="人物在场状态（含标志物细节）" value={sceneDraft.characterState ?? ''} onChange={e => { setSceneDraft({ ...sceneDraft, characterState: e.target.value }) }} />
-                <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 60 }} placeholder="环境构成（每行一项）" value={(sceneDraft.elements ?? []).join('\n')} onChange={e => { setSceneDraft({ ...sceneDraft, elements: e.target.value.split(/\n+/).map(x => x.trim()).filter(Boolean) }) }} />
-                <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 60 }} placeholder="中文生图提示词" value={sceneDraft.zh} onChange={e => { setSceneDraft({ ...sceneDraft, zh: e.target.value }) }} />
-                <textarea className={css.input} style={{ fontSize: 12, padding: '4px 8px', minHeight: 60 }} placeholder="英文生图提示词" value={sceneDraft.en} onChange={e => { setSceneDraft({ ...sceneDraft, en: e.target.value }) }} />
-                <div className={css.row} style={{ gap: 6 }}>
-                  <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || sceneDraft.name.trim() === ''} onClick={() => { void (async () => {
-                    setBusy(true)
-                    try {
-                      await api.scenes({ op: 'update', scene: { ...sceneDraft, name: sceneDraft.name.trim() } })
-                      await refresh(false)
-                      setSceneDraft(null)
-                      pushProgress(`已保存场景「${sceneDraft.name.trim()}」`, 'done')
-                    } catch (err) {
-                      setError((err as Error).message)
-                    } finally {
-                      setBusy(false)
-                    }
-                  })() }}>保存</button>
-                  <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setSceneDraft(null) }}>取消</button>
-                </div>
-              </div>
-            )}
-
-            {sceneCandidates !== null && sceneCandidates.length > 0 && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 10 }}>
-                {sceneCandidates.map(s => (
-                  <div key={s.name} style={{ border: '1px solid var(--nf-accent)', borderRadius: 10, padding: '8px 10px', fontSize: 12 }}>
-                    <div className={css.row} style={{ flexWrap: 'wrap', gap: 6, justifyContent: 'space-between' }}>
-                      <span><b>{s.name}</b> <span className={css.meta}>· {(s.moods ?? []).join('、')}</span></span>
-                      <span className={css.row} style={{ gap: 4 }}>
-                        <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { void (async () => {
-                          try {
-                            await api.scenes({ op: 'adopt', scene: s })
-                            setSceneCandidates((sceneCandidates ?? []).filter(x => x.name !== s.name))
-                            await refresh(false)
-                            pushProgress(`已采纳场景「${s.name}」`, 'done')
-                          } catch (err) { setError((err as Error).message) }
-                        })() }}>采纳</button>
-                        <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setSceneDraft(s); setSceneCandidates(null) }}>修改后采纳</button>
-                      </span>
-                    </div>
-                    <div className={css.meta} style={{ marginTop: 2 }}>{s.summary}</div>
-                    <div className={css.meta} style={{ marginTop: 2, fontSize: 11 }}>要素：{(s.elements ?? []).join('；')}</div>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {(() => {
-              const scenes = project?.scenes ?? []
-              const detail = sceneDetailName !== null ? scenes.find(s => s.name === sceneDetailName) : undefined
-              if (scenes.length === 0 && sceneCandidates === null) {
-                return (
-                  <div className={css.shelfEmpty} style={{ minHeight: 140, flex: 1 }}>
-                    <span className={css.shelfEmptyIcon}>🏞️</span>
-                    <span className={css.shelfEmptyTitle}>场景库为空</span>
-                    <span className={css.meta}>点「✨ 从全书提炼场景」自动建立，或手动新增</span>
-                  </div>
-                )
-              }
-              return (
-                <>
-                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 10 }}>
-                    {scenes.map(s => {
-                      const cover = (s.gallery ?? [])[0]
-                      return (
-                        <div key={s.name} onClick={() => { setSceneDetailName(s.name); setSceneUploadLabel('全景') }} style={{ cursor: 'pointer', border: '1px solid var(--nf-border)', borderRadius: 12, overflow: 'hidden', background: 'var(--nf-bg-inset)', display: 'flex', flexDirection: 'column' }}>
-                          <div style={{ height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--nf-bg-inset)', borderBottom: '1px solid var(--nf-border)', position: 'relative' }}>
-                            {cover !== undefined
-                              ? <img src={cover.dataUrl} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                              : <span className={css.meta}>暂无场景图</span>}
-                            <span style={{ position: 'absolute', bottom: 4, right: 4, background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 10, borderRadius: 6, padding: '1px 6px' }}>🖼 {(s.gallery ?? []).length}</span>
-                          </div>
-                          <div style={{ padding: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
-                            <b style={{ fontSize: 13 }}>{s.name}</b>
-                            <div className={css.meta} style={{ fontSize: 10 }}>{(s.moods ?? []).join('、') || s.summary.slice(0, 16)}</div>
-                          </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-
-                  {detail !== undefined && (
-                    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { setSceneDetailName(null) }}>
-                      <div style={{ background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 16, width: 'min(860px, 100%)', maxHeight: '92vh', overflowY: 'auto', padding: 20, position: 'relative' }} onClick={e => e.stopPropagation()}>
-                        <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 12, right: 12, fontSize: 18 }} title="关闭" aria-label="关闭" onClick={() => { setSceneDetailName(null) }}>✕</button>
-                        <div style={{ marginBottom: 12 }}>
-                          <b style={{ fontSize: 20 }}>{detail.name}</b>
-                          <div className={css.meta} style={{ marginTop: 4 }}>{detail.summary}</div>
-                        </div>
-
-                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 8, marginBottom: 12 }}>
-                          {(detail.gallery ?? []).map(img => (
-                            <div key={img.label} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, overflow: 'hidden', position: 'relative' }}>
-                              <img src={img.dataUrl} alt={img.label} style={{ width: '100%', height: 100, objectFit: 'cover', display: 'block' }} />
-                              <div style={{ background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, padding: '1px 6px', textAlign: 'center' }}>{img.label}</div>
-                              <button type="button" className={css.iconButton} style={{ position: 'absolute', top: 2, right: 2, fontSize: 11 }} title="删除" aria-label="删除" onClick={() => { void (async () => {
-                                try {
-                                  await api.scenes({ op: 'removeImage', name: detail.name, label: img.label })
-                                  await refresh(false)
-                                  pushProgress(`已删除「${detail.name}」${img.label}`, 'done')
-                                } catch (err) { setError((err as Error).message) }
-                              })() }}>×</button>
-                            </div>
-                          ))}
-                          {(detail.gallery ?? []).length === 0 && <span className={css.meta}>暂无场景图</span>}
-                        </div>
-
-                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14, marginBottom: 12 }}>
-                          <div style={{ fontSize: 12, lineHeight: 1.8 }}>
-                            {(detail.act !== undefined || detail.moment !== undefined) && (
-                              <div style={{ marginBottom: 6 }}>
-                                {(detail.act !== undefined && detail.act !== '') && <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)', marginRight: 6 }}>{detail.act}</span>}
-                                {(detail.moment !== undefined && detail.moment !== '') && <span className={css.meta}>{detail.moment}</span>}
-                              </div>
-                            )}
-                            {(detail.beats ?? []).length > 0 && (
-                              <div style={{ marginBottom: 8 }}>
-                                <b style={{ fontSize: 13 }}>关键镜头</b>
-                                <div style={{ marginTop: 4 }}>{(detail.beats ?? []).map((b, i) => <div key={i} style={{ fontSize: 11, color: 'var(--nf-text-2)', marginTop: 2 }}>🎬 {b}</div>)}</div>
-                              </div>
-                            )}
-                            {detail.characterState !== undefined && detail.characterState !== '' && (
-                              <div style={{ marginBottom: 8 }}>
-                                <b style={{ fontSize: 13 }}>人物状态</b>
-                                <div className={css.meta} style={{ marginTop: 2 }}>{detail.characterState}</div>
-                              </div>
-                            )}
-                            <b style={{ fontSize: 13 }}>环境构成</b>
-                            <div style={{ marginTop: 4 }}>{(detail.elements ?? []).map(e => <span key={e} style={{ border: '1px solid var(--nf-border)', borderRadius: 999, padding: '1px 8px', fontSize: 11, margin: '0 4px 4px 0', display: 'inline-block' }}>{e}</span>)}</div>
-                            <div style={{ marginTop: 8 }}><b style={{ fontSize: 13 }}>色调光影</b></div>
-                            <div style={{ marginTop: 4 }}>{(detail.palette ?? []).join('；') || '—'}</div>
-                            <div style={{ marginTop: 8 }}><b style={{ fontSize: 13 }}>氛围</b></div>
-                            <div style={{ marginTop: 4 }}>{(detail.moods ?? []).join('、') || '—'}</div>
-                            <div style={{ marginTop: 8 }}><b style={{ fontSize: 13 }}>依据</b></div>
-                            <div className={css.meta} style={{ marginTop: 4 }}>{detail.source || '—'}</div>
-                          </div>
-                          <div>
-                            <b style={{ fontSize: 13 }}>生图提示词</b>
-                            <div className={css.meta} style={{ fontSize: 11, lineHeight: 1.6, marginTop: 4 }}>{detail.zh}</div>
-                            <div className={css.meta} style={{ fontSize: 10, fontFamily: 'monospace', marginTop: 4, wordBreak: 'break-all' }}>{detail.en}</div>
-                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 8 }}>
-                              {(detail.tags ?? []).map(t => <span key={t} style={{ border: '1px solid var(--nf-border)', borderRadius: 999, padding: '2px 8px', fontSize: 11 }}>{t}</span>)}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div style={{ borderTop: '1px solid var(--nf-border)', paddingTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
-                          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => {
-                            const text = [detail.en, detail.tags.join(', ')].filter(Boolean).join('\n')
-                            void navigator.clipboard?.writeText(text).then(() => { pushProgress(`已复制「${detail.name}」英文生图提示词`, 'done') }).catch(() => { /* ignore */ })
-                          }}>复制提示词</button>
-                          <input className={css.input} style={{ width: 130, fontSize: 12, padding: '3px 6px' }} placeholder="图集标签" value={sceneUploadLabel} onChange={e => { setSceneUploadLabel(e.target.value) }} />
-                          <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => {
-                            setRoleImageLabel(sceneUploadLabel.trim() !== '' ? sceneUploadLabel.trim() : '全景')
-                            setSceneUploadLabel(sceneUploadLabel.trim() !== '' ? sceneUploadLabel.trim() : '全景')
-                            setRoleImageTarget(detail.name + '||scene')
-                            roleImageInputRef.current?.click()
-                          }}>📤 上传场景图</button>
-                          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setSceneDraft(detail); setSceneDetailName(null) }}>✏️ 编辑</button>
-                          <button type="button" className={`${css.button} ${css.buttonSmall}`} style={{ color: 'var(--nf-danger, #e05)' }} onClick={() => { void (async () => {
-                            if (!window.confirm(`确定删除场景「${detail.name}」？`)) return
-                            try {
-                              await api.scenes({ op: 'remove', name: detail.name })
-                              await refresh(false)
-                              setSceneDetailName(null)
-                              pushProgress(`已删除场景「${detail.name}」`, 'done')
-                            } catch (err) { setError((err as Error).message) }
-                          })() }}>🗑 删除</button>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </>
-              )
-            })()}
-          </div>
-        )}
-
         </>)}
         </div>
       </div>
@@ -5058,7 +4571,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         </div>
       )}
 
-      {/* 工作进度悬浮窗：可拖动、可拉大小（同 AI 助手），承接活动输出 + 当前任务进度 */}
+      {/* AI进度悬浮窗：可拖动、可拉大小（同 AI 助手），承接活动输出 + 当前任务进度 */}
       {progressOpen && (
         <div
           className={css.assistantFloat}
@@ -5072,7 +4585,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             }}
           >
             <span>
-              📊 工作进度
+              📊 AI进度
               {busy && <span style={{ color: 'var(--nf-accent)' }}> 🟢 任务进行中</span>}
               <span className={css.meta}>（拖动标题栏移动 · 右下角拉大小）</span>
             </span>
@@ -5082,7 +4595,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   清空
                 </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' }}>