@waterwx/dsh-novel-forge 1.1.9 → 1.3.0

package/src/client/panel/NovelPanel.tsx

@@ -19,6 +19,7 @@ import { WorldTab } from './WorldTab.tsx'
 import { AuditIssueRow, PlotlineCard, PlotlineHealthPanel, PlotlinePlanPanel, PlotlineSuggestionPanel, RoleCandidateRow, RoleCard, StatCell, TodoRow } from './views.tsx'
 import { extractDocxTextFromBuffer } from '../docx.ts'
 import type {
+  AuditStatus,
   BookshelfSnapshot,
   ChapterPlan,
   Foreshadow,
@@ -39,8 +40,10 @@ import css from './panel.module.css'
 /** The panel's tab identifiers. */
 export type NovelTab =
   | 'workflow' | 'overview' | 'blurb' | 'plan' | 'bible' | 'world' | 'foreshadow' | 'assistant' | 'settings'
-  | 'characters' | 'roles' | 'facts' | 'plotlines' | 'reviews' | 'progress' | 'breakdown' | 'storyboard'
+  | 'characters' | 'roles' | 'facts' | 'plotlines' | 'reviews' | 'progress' | 'breakdown'
+  | 'roleImage' | 'scenes'
   | 'assetsGenre' | 'assetsProgression' | 'assetsTemplates' | 'assetsRules' | 'assetsStyle' | 'run'
+  | 'book' | 'assets'
 
 /** Panel shell props. */
 export interface NovelPanelProps {
@@ -69,10 +72,10 @@ const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArra
     items: [
       { id: 'workflow', label: tt('tab.workflow'), icon: '🛠️' },
       { id: 'overview', label: tt('tab.overview'), icon: '📄' },
-      { id: 'blurb', label: '卷首语', icon: '📖' },
+      { id: 'blurb', label: '简介 / 封面', icon: '📖' },
       { id: 'plan', label: tt('tab.plan'), icon: '📚' },
-      { id: 'plotlines', label: tt('tab.plotlines'), icon: '🧵' },
-      { id: 'run', label: '生产单', icon: '🏭' },
+      { id: 'plotlines', label: '长线管理', icon: '📜' },
+      { id: 'book', label: '本书设定', icon: '📚' },
     ],
   },
   {
@@ -82,24 +85,16 @@ const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArra
       { id: 'assistant', label: tt('tab.assistant'), icon: '💬' },
       { id: 'progress', label: '工作进度', icon: '📊' },
       { id: 'breakdown', label: '拆书分析', icon: '🔍' },
-      { id: 'storyboard', label: '漫剧工坊', icon: '🎬' },
+      { id: 'roleImage', label: '角色形象', icon: '🖼️' },
+      { id: 'scenes', label: '场景库', icon: '🏞️' },
+      { id: 'run', label: '生产单', icon: '🏭' },
     ],
   },
   {
-    id: 'db',
-    label: '数据库',
+    id: 'assets',
+    label: '资产',
     items: [
-      { id: 'bible', label: tt('tab.bible'), icon: '📖' },
-      { id: 'world', label: '大世界', icon: '🌍' },
-      { id: 'roles', label: '角色库', icon: '👥' },
-      { id: 'foreshadow', label: tt('tab.foreshadow'), icon: '🔮' },
-      { id: 'facts', label: tt('tab.facts'), icon: '📜' },
-      { id: 'reviews', label: '复盘记录', icon: '📋' },
-      { id: 'assetsGenre', label: '题材基底', icon: '🏷️' },
-      { id: 'assetsProgression', label: '推进模式', icon: '📈' },
-      { id: 'assetsTemplates', label: '笔法帖', icon: '🖋️' },
-      { id: 'assetsRules', label: '文戒', icon: '🚫' },
-      { id: 'assetsStyle', label: '心法', icon: '🎨' },
+      { id: 'assets', label: '创作资产', icon: '🧰' },
     ],
   },
 ]
@@ -107,6 +102,10 @@ const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArra
 /** 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: '⚙️' }
 
+/** 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
+
 /** 构建时注入的插件版本（tsdown define 替换为字符串字面量）。 */
 declare const __NOVEL_FORGE_VERSION__: string | undefined
 const PLUGIN_VERSION: string = typeof __NOVEL_FORGE_VERSION__ !== 'undefined' ? __NOVEL_FORGE_VERSION__ : '0.0.0'
@@ -319,9 +318,12 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   const [notice, setNotice] = useState('')
   const [progress, setProgress] = useState<ProgressLine[]>([])
   const [configDraft, setConfigDraft] = useState<NovelConfig | null>(null)
+  const [modelCustomMode, setModelCustomMode] = useState(false)
   const [expandedChapter, setExpandedChapter] = useState<number | null>(null)
   /** 复盘记录页：当前展开的章节号。 */
   const [expandedReviewChapter, setExpandedReviewChapter] = useState<number | null>(null)
+  /** 复盘记录页：按卷折叠，卷号 → 是否展开（默认全部收起）。 */
+  const [expandedVolumes, setExpandedVolumes] = useState<Record<number, boolean>>({})
   const [chapterText, setChapterText] = useState('')
   const progressId = useRef(0)
   /** id of the single live progress row (generation counter), if any. */
@@ -385,6 +387,8 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   const [updatingOutline, setUpdatingOutline] = useState(false)
   /** 全书质检结果（null = 未运行）。 */
   const [auditIssues, setAuditIssues] = useState<import('../../protocol.ts').AuditIssue[] | null>(null)
+  /** 全书质检实时状态（来自 /status，用于显示进度）。 */
+  const [auditStatus, setAuditStatus] = useState<AuditStatus | null>(null)
   /** 角色卡（从事实库聚合）。 */
   const [charCards, setCharCards] = useState<import('../../protocol.ts').RoleStatusCard[] | null>(null)
   /** 世界观规则编辑草稿（bible tab，每行一条）。 */
@@ -412,6 +416,39 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     progress: string
     status: Plotline['status']
   } | null>(null)
+  /** 长线管理页：子页签（剧情线 / 伏笔），localStorage 记忆。 */
+  const [longlineTab, setLonglineTab] = useState<'plotlines' | 'foreshadow'>(() => {
+    try {
+      const v = window.localStorage.getItem('dsh-novel-forge.longline.tab')
+      return v === 'foreshadow' ? 'foreshadow' : 'plotlines'
+    } catch { return 'plotlines' }
+  })
+  const changeLonglineTab = (next: 'plotlines' | 'foreshadow'): void => {
+    setLonglineTab(next)
+    try { window.localStorage.setItem('dsh-novel-forge.longline.tab', next) } catch { /* ignore */ }
+  }
+  /** 编年 / 复盘页：子页签（编年录 / 复盘记录），localStorage 记忆。 */
+  const [archiveTab, setArchiveTab] = useState<'facts' | 'reviews'>(() => {
+    try {
+      const v = window.localStorage.getItem('dsh-novel-forge.archive.tab')
+      return v === 'reviews' ? 'reviews' : 'facts'
+    } catch { return 'facts' }
+  })
+  const changeArchiveTab = (next: 'facts' | 'reviews'): void => {
+    setArchiveTab(next)
+    try { window.localStorage.setItem('dsh-novel-forge.archive.tab', next) } catch { /* ignore */ }
+  }
+  /** 本书设定页：子页签（设定库 / 大世界 / 角色库 / 编年·复盘），localStorage 记忆。 */
+  const [bookTab, setBookTab] = useState<'bible' | 'world' | 'roles' | 'facts'>(() => {
+    try {
+      const v = window.localStorage.getItem('dsh-novel-forge.book.tab')
+      return v === 'world' || v === 'roles' || v === 'facts' ? v : 'bible'
+    } catch { return 'bible' }
+  })
+  const changeBookTab = (next: 'bible' | 'world' | 'roles' | 'facts'): void => {
+    setBookTab(next)
+    try { window.localStorage.setItem('dsh-novel-forge.book.tab', next) } catch { /* ignore */ }
+  }
   /** 角色知情度编辑草稿（角色名 → 文本，每行一条）。 */
   const [knowledgeDraft, setKnowledgeDraft] = useState<Record<string, string>>({})
   /** 角色库：AI 提炼候选（null = 未运行；localStorage 持久化，刷新不丢）。 */
@@ -444,16 +481,23 @@ 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')
-  /** 漫剧分镜结果（null = 未生成）。 */
-  const [storyboardResult, setStoryboardResult] = useState<import('../../protocol.ts').StoryboardResponse | null>(null)
-  const [storyboardTool, setStoryboardTool] = useState<'doubao' | 'seedance' | 'sd' | 'mj'>('doubao')
-  /** 漫剧工坊当前选中的章节号。 */
-  const [storyboardChapterNo, setStoryboardChapterNo] = useState<number>(0)
-  /** 漫剧分集计划结果（null = 未生成）。 */
-  const [storyboardPlanResult, setStoryboardPlanResult] = useState<import('../../protocol.ts').StoryboardPlanResponse | null>(null)
-  const [storyboardPlanVolume, setStoryboardPlanVolume] = useState<number>(1)
-  /** 漫剧工坊子视图：single=单集分镜 / plan=按卷规划。 */
-  const [storyboardView, setStoryboardView] = useState<'single' | 'plan'>('single')
+  /** 角色图集上传：当前等待上传的角色名。 */
+  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 = 未运行）。 */
@@ -615,6 +659,8 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
       const status = await api.status()
       setConfig(status.config)
       setConfigDraft(status.config)
+      setModelCustomMode(!(MODEL_PRESETS as readonly string[]).includes(status.config.model))
+      setAuditStatus(status.audit ?? null)
       setProject(status.project ?? null)
       // 人物志存档同步：有 roleStatus 存档直接显示，无需重新刷新计算。
       if (status.project?.roleStatus !== undefined) {
@@ -774,18 +820,32 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     setBusy(true)
     setBusyLabel('全书一致性质检中…')
     setError('')
+    setAuditStatus({ status: 'running', totalBatches: 0, completedBatches: 0 })
+    let stopped = false
+    const poll = window.setInterval(async () => {
+      if (stopped) return
+      try {
+        const s = await api.status()
+        if (s.audit !== undefined) setAuditStatus(s.audit)
+      } catch { /* 轮询失败忽略，主请求仍会给出最终结果 */ }
+    }, 1000)
     try {
       const result = await api.audit()
+      if (stopped) return
       setAuditIssues(result.issues)
       pushProgress(result.issues.length === 0
         ? `全书质检完成：${result.auditedChapters} 章未发现矛盾 🎉`
         : `全书质检完成：发现 ${result.issues.length} 处疑似矛盾`, result.issues.length === 0 ? 'done' : 'error')
     } catch (err) {
+      if (stopped) return
       setError((err as Error).message)
       pushProgress(`全书质检失败：${(err as Error).message}`, 'error')
     } finally {
+      stopped = true
+      window.clearInterval(poll)
       setBusy(false)
       setBusyLabel('')
+      await refresh(false)
     }
   }
 
@@ -1082,36 +1142,80 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     }
   }
 
-  /** 漫剧分镜：对某章生成角色锚点 + 分镜表（约 1-2 分钟）。 */
-  const handleStoryboard = async (no: number): Promise<void> => {
+  /** 生成单个角色的形象锚点（复用角色库 visual 能力）。 */
+  const handleRoleVisual = async (name: string): Promise<void> => {
     setBusy(true)
-    setBusyLabel(`生成第${no}章漫剧分镜…`)
+    setBusyLabel(`生成「${name}」形象锚点…`)
     setError('')
     try {
-      const result = await api.storyboard(no, undefined, '抖音', storyboardTool)
-      setStoryboardResult(result)
-      pushProgress(`第${no}章分镜完成：${result.panels.length} 格 · 角色卡 ${result.characters.length} 张`, 'done')
+      await api.roles({ op: 'visual', name })
+      await refresh(false)
+      pushProgress(`已生成「${name}」形象锚点`, 'done')
     } catch (err) {
       setError((err as Error).message)
-      pushProgress(`分镜生成失败：${(err as Error).message}`, 'error')
+      pushProgress(`生成「${name}」形象锚点失败：${(err as Error).message}`, 'error')
     } finally {
       setBusy(false)
       setBusyLabel('')
     }
   }
 
-  /** 漫剧分集计划：AI 读一卷 → 按故事弧线分集。 */
-  const handleStoryboardPlan = async (): Promise<void> => {
+  /** 上传角色图：读取本地图片为 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(`规划第${storyboardPlanVolume}卷漫剧分集…`)
+    setBusyLabel(`上传「${name}」${label}…`)
     setError('')
     try {
-      const result = await api.storyboardPlan(storyboardPlanVolume, '抖音', 25)
-      setStoryboardPlanResult(result)
-      pushProgress(`第${storyboardPlanVolume}卷分集计划完成：${result.episodes.length} 集（覆盖 ${result.chaptersScanned} 章）`, 'done')
+      await api.roles({ op: 'image', name, dataUrl, label })
+      await refresh(false)
+      pushProgress(`已上传「${name}」${label}`, 'done')
     } catch (err) {
       setError((err as Error).message)
-      pushProgress(`分集计划失败：${(err as Error).message}`, 'error')
+      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('')
+    }
+  }
+
+  /** 更新角色漫画重要性（main/support/extra）。 */
+  const handleRoleImportance = async (role: RoleRecord, importance: RoleRecord['importance']): Promise<void> => {
+    setBusy(true)
+    setBusyLabel(`更新「${role.name}」重要性…`)
+    setError('')
+    try {
+      await api.roles({ op: 'update', role: { ...role, importance } })
+      await refresh(false)
+      pushProgress(`已更新「${role.name}」重要性`, 'done')
+    } catch (err) {
+      setError((err as Error).message)
+      pushProgress(`更新「${role.name}」重要性失败：${(err as Error).message}`, 'error')
     } finally {
       setBusy(false)
       setBusyLabel('')
@@ -1120,7 +1224,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
 
   /** 作者复盘补跑：全书缺失章节（流式）。 */
   const handleAuthorBackfillAll = async (): Promise<void> => {
-    const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.authorReview === undefined).length
+    const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.status !== 'error' && c.authorReview === undefined).length
     setBusy(true)
     setBusyLabel(`补齐历史章节作者复盘（${missing} 章）…`)
     setError('')
@@ -1966,12 +2070,16 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         outputDir: configDraft.outputDir,
         provider: configDraft.provider,
         model: configDraft.model,
+        reasoningEffort: configDraft.reasoningEffort ?? 'off',
         chapterChars: configDraft.chapterChars,
         maxTokens: configDraft.maxTokens,
         reviewPassScore: configDraft.reviewPassScore,
         autoReview: configDraft.autoReview,
         autoAuthorReview: configDraft.autoAuthorReview,
         autoReviewAfterRevise: configDraft.autoReviewAfterRevise,
+        imageApiKey: configDraft.imageApiKey,
+        imageApiModel: configDraft.imageApiModel,
+        imageApiEnabled: configDraft.imageApiEnabled ?? false,
       })
       setConfig(result.config)
       setConfigDraft(result.config)
@@ -2057,6 +2165,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   // --------------------------------------------------- dashboard (workflow)
   const approvedCount = chapters.filter(c => c.status === 'approved').length
   const reviewPendingCount = chapters.filter(c => c.status === 'written' || c.status === 'rejected').length
+  const writingNow = chapters.find(c => c.status === 'generating' || c.status === 'reviewing')
   const totalChars = chapters.reduce((sum, c) => sum + (c.chars ?? 0), 0)
   const firstChapter = chapters[0]
   const currentVolumeName = (() => {
@@ -2081,6 +2190,24 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   const journeyPercent = Math.round((journeyDoneCount / journeyStages.length) * 100)
   const currentStageId = journeyStages.find(s => !s.done)?.id
 
+  /** 创作时间线阶段点击 → 跳转对应 tab。 */
+  const jumpToStage = (id: string): void => {
+    switch (id) {
+      case 'outline': setActiveTab('overview'); break
+      case 'bible': setActiveTab('book'); changeBookTab('bible'); break
+      case 'volumes':
+      case 'plan':
+      case 'write': setActiveTab('plan'); break
+      case 'review': setActiveTab('book'); changeBookTab('facts'); changeArchiveTab('reviews'); break
+    }
+  }
+
+  /** 侧栏当前书卡（demo 风格）：书架激活书 → 封面首字 / 书名 / 进度。 */
+  const activeBook = shelf?.books.find(b => b.id === shelf?.activeBookId) ?? null
+  const activeBookName = activeBook?.bookName ?? project?.bookName ?? '未选书'
+  const activeBookMeta = activeBook !== null ? `${activeBook.done}/${activeBook.total} 章 · 点按打开书架` : '点按打开书架'
+  const activeBookLetter = activeBookName.trim().charAt(0) || '书'
+
   /** 主行动卡片：推荐下一步（AI-Novel-Writing-Assistant 首页主卡模式）。 */
   const nextAction = useMemo((): { eyebrow: string; title: string; reason: string; actionLabel: string; onClick: () => void } | null => {
     if (project === null) {
@@ -2267,48 +2394,20 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         />
       ) : (
         <>
-      <div className={css.panelHeader}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
-          <h2 className={css.panelTitle}>
-            <button type="button" className={css.iconButton} title="返回书架" aria-label="返回书架" onClick={() => { setViewMode('shelf') }}>
-              ←
-            </button>
-            {tt('panel.title')}
-          </h2>
-          {(project?.bookName !== '' && project?.bookName !== undefined) && (
-            <div className={css.panelSubtitle}>
-              <span>📖 {project.bookName}</span>
-              {chapters.length > 0 && (
-                <span className={css.headerProgress}>
-                  已完成 <b>{doneCount}</b>/{chapters.length} 章
-                  <span className={css.headerProgressDot} />
-                  通过 <b>{chapters.filter(c => c.status === 'approved').length}</b>
-                </span>
-              )}
-            </div>
-          )}
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          <button
-            type="button"
-            className={css.iconButton}
-            title={navCollapsed ? '展开导航栏' : '收起导航栏'}
-            aria-label={navCollapsed ? '展开导航栏' : '收起导航栏'}
-            onClick={() => {
-              setNavCollapsed(prev => {
-                const next = !prev
-                try { window.localStorage.setItem('dsh-novel-forge.nav.collapsed', String(next)) } catch { /* ignore */ }
-                return next
-              })
-            }}
-          >
-            {navCollapsed ? '▸' : '◂'}
-          </button>
-          <button type="button" className={css.iconButton} title={tt('common.close')} aria-label={tt('common.close')} onClick={() => { controller.close() }}>×</button>
-        </div>
-      </div>
       <div className={css.panelBody}>
         <nav className={`${css.panelNav} ${navCollapsed ? css.panelNavCollapsed : ''}`} role="tablist" aria-label="工作台导航">
+          {/* 标题区：小说工坊 + 当前书名（顶部标题栏取消后移入侧栏） */}
+          <div className={css.navTitle}>
+            <div className={css.navTitleLogo}>书</div>
+            {!navCollapsed && (
+              <div style={{ minWidth: 0 }}>
+                <div className={css.navTitleName}>小说工坊</div>
+                <div className={css.navTitleBook} title={project?.bookName ?? ''}>
+                  {project?.bookName !== undefined && project.bookName !== '' ? `📖 ${project.bookName}` : '未选书'}
+                </div>
+              </div>
+            )}
+          </div>
           {/* 分组导航（创作 / 工具 / 数据库） */}
           {NAV_GROUPS.map(group => (
             <div key={group.id} className={css.navGroup}>
@@ -2340,7 +2439,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                       {chapters.some(c => c.status === 'error') ? `!${pendingCount + reviewPendingCount}` : pendingCount + reviewPendingCount}
                     </span>
                   )}
-                  {tab.id === 'foreshadow' && foreshadows.some(f => f.status === 'planned') && (
+                  {tab.id === 'plotlines' && foreshadows.some(f => f.status === 'planned') && (
                     <span className={css.navTabBadge}>{foreshadows.filter(f => f.status === 'planned').length}</span>
                   )}
                   {tab.id === 'workflow' && chapters.length > 0 && (
@@ -2374,6 +2473,22 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             <span className={css.navTabIcon}>{SETTINGS_TAB.icon}</span>
             {!navCollapsed && <span className={css.navTabLabel}>{SETTINGS_TAB.label}</span>}
           </button>
+          {/* 当前书切换卡（demo 风格底部内容卡：封面首字 + 书名 + 进度，点击回书架） */}
+          {!navCollapsed && shelf !== null && (
+            <button
+              type="button"
+              className={css.bookSwitch}
+              title={activeBook !== null ? `当前书：${activeBook.bookName}（${activeBook.outputDir}）· 点击打开书架` : '打开书架'}
+              onClick={() => { setViewMode('shelf') }}
+            >
+              <span className={css.bookSwitchCover}>{activeBookLetter}</span>
+              <span style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+                <span className={css.bookSwitchName}>{activeBookName}</span>
+                <span className={css.bookSwitchMeta}>{activeBookMeta}</span>
+              </span>
+              <span className={css.bookSwitchArrow}>⌄</span>
+            </button>
+          )}
           {/* 关于：版本 + GitHub + 更新检测 */}
           <div className={css.navAbout}>
             <button
@@ -2400,6 +2515,33 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               </button>
             )}
           </div>
+          {/* 操作行：收起导航 / 关闭面板（原顶部按钮下放，收起态保留图标） */}
+          <div className={css.navActions}>
+            <button
+              type="button"
+              className={css.navActionBtn}
+              title={navCollapsed ? '展开导航栏' : '收起导航栏'}
+              aria-label={navCollapsed ? '展开导航栏' : '收起导航栏'}
+              onClick={() => {
+                setNavCollapsed(prev => {
+                  const next = !prev
+                  try { window.localStorage.setItem('dsh-novel-forge.nav.collapsed', String(next)) } catch { /* ignore */ }
+                  return next
+                })
+              }}
+            >
+              {navCollapsed ? '▸' : '◂'}
+            </button>
+            <button
+              type="button"
+              className={css.navActionBtn}
+              title={tt('common.close')}
+              aria-label={tt('common.close')}
+              onClick={() => { controller.close() }}
+            >
+              ×
+            </button>
+          </div>
         </nav>
         <div className={css.panelContent}>
         {error !== '' && <div className={css.card} style={{ borderColor: 'var(--nf-error)' }}><span style={{ color: 'var(--nf-error)' }}>{tt('common.error')}: {error}</span></div>}
@@ -2634,29 +2776,64 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   <span className={css.meta} style={{ fontWeight: 600 }}>创作旅程</span>
                   <span className={css.meta}>{journeyPercent}% · 已完成 {journeyDoneCount}/{journeyStages.length} 步</span>
                 </div>
-                <div className={css.dashJourneyBar}>
-                  <div className={css.dashJourneyFill} style={{ width: `${journeyPercent}%` }} />
-                </div>
-                <div className={css.dashJourneyStages}>
+                <div className={css.tlBar}>
                   {journeyStages.map(stage => (
-                    <span
+                    <button
                       key={stage.id}
-                      className={`${css.dashStage} ${stage.done ? css.dashStageDone : stage.id === currentStageId ? css.dashStageCurrent : ''}`}
+                      type="button"
+                      className={`${css.tlSeg} ${stage.done ? css.tlSegDone : stage.id === currentStageId ? css.tlSegCurrent : css.tlSegTodo}`}
+                      title={`${stage.label}${stage.done ? ' · 已完成' : stage.id === currentStageId ? ' · 进行中' : ' · 未开始'}（点击跳转）`}
+                      onClick={() => { jumpToStage(stage.id) }}
                     >
-                      <span className={css.dashStageDot}>{stage.done ? '✓' : stage.id === currentStageId ? '●' : '○'}</span>
-                      {stage.label}
-                    </span>
+                      <span className={css.tlSegTrack}><span className={css.tlSegFill} /></span>
+                      <span className={css.tlSegLabel}>{stage.done ? '✓ ' : ''}{stage.label}</span>
+                    </button>
                   ))}
                 </div>
               </div>
             </div>
 
-            {/* 状态摘要条：全书进度 + 六个统计格，同样式并排一行 */}
+            {/* 统计卡（demo 风格：今日待写 / 写作中 / 已通过 / 待审稿） */}
+            <div className={css.statRowD}>
+              <div className={css.statCardD}>
+                <div style={{ minWidth: 0 }}>
+                  <div className={css.statCardDLabel}>今日待写</div>
+                  <div className={css.statCardDValue}>{pendingCount} <span className={css.statCardDUnit}>章</span></div>
+                  <div className={css.statCardDDetail}>
+                    {chapters.some(c => c.status === 'error') ? `含 error ${chapters.filter(c => c.status === 'error').length} 章` : '待生成队列'}
+                  </div>
+                </div>
+                <div className={css.statCardDIcon}>📝</div>
+              </div>
+              <div className={css.statCardD}>
+                <div style={{ minWidth: 0 }}>
+                  <div className={css.statCardDLabel}>写作中</div>
+                  <div className={css.statCardDValue}>{chapters.filter(c => c.status === 'generating' || c.status === 'reviewing').length} <span className={css.statCardDUnit}>章</span></div>
+                  <div className={css.statCardDDetail}>{writingNow !== undefined ? `第 ${writingNow.no} 章 · ${writingNow.title}` : '无进行中任务'}</div>
+                </div>
+                <div className={css.statCardDIcon}>✍️</div>
+              </div>
+              <div className={css.statCardD}>
+                <div style={{ minWidth: 0 }}>
+                  <div className={css.statCardDLabel}>已通过</div>
+                  <div className={css.statCardDValue}>{approvedCount} <span className={css.statCardDUnit}>章</span></div>
+                  <div className={css.statCardDDetail}>{chapters.length > 0 ? `占全书 ${Math.round((approvedCount / chapters.length) * 100)}%` : '尚无已通过章节'}</div>
+                </div>
+                <div className={css.statCardDIcon}>✅</div>
+              </div>
+              <div className={css.statCardD}>
+                <div style={{ minWidth: 0 }}>
+                  <div className={css.statCardDLabel}>待审稿</div>
+                  <div className={css.statCardDValue}>{reviewPendingCount} <span className={css.statCardDUnit}>章</span></div>
+                  <div className={`${css.statCardDDetail} ${reviewPendingCount > 0 ? css.statCardDDown : ''}`}>
+                    {`written ${chapters.filter(c => c.status === 'written').length} · rejected ${chapters.filter(c => c.status === 'rejected').length}`}
+                  </div>
+                </div>
+                <div className={`${css.statCardDIcon} ${css.statCardDIconRed}`}>⚠️</div>
+              </div>
+            </div>
+            {/* 补充统计：总字数 / 当前卷 / 最近创作（原有数据保留） */}
             <div className={css.assetGrid}>
-              <StatCell label="全书进度" value={`${doneCount}/${chapters.length} 章`} valueColor="var(--nf-accent)" detail={`${chapters.length > 0 ? Math.round((doneCount / chapters.length) * 100) : 0}%`} />
-              <StatCell label="已通过审稿" value={String(approvedCount)} valueColor={approvedCount > 0 ? 'var(--nf-success)' : undefined} detail="章节已 approved" />
-              <StatCell label="待生成" value={String(pendingCount)} valueColor={pendingCount > 0 ? 'var(--nf-warn)' : undefined} detail="pending + error" />
-              <StatCell label="待审稿" value={String(reviewPendingCount)} valueColor={reviewPendingCount > 0 ? 'var(--nf-info)' : undefined} detail="written + rejected" />
               <StatCell label="总字数" value={String(totalChars)} detail="已生成正文累计" />
               <StatCell label="当前卷" value={currentVolumeName} valueFontSize={13} detail="正在推进的卷" />
               <StatCell label="最近创作" value={lastUpdated} valueFontSize={13} detail="最近生成/编辑时间" />
@@ -2670,6 +2847,19 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   🔍 全书质检
                 </button>
               </div>
+              {auditStatus?.status === 'running' && (
+                <div className={css.meta} style={{ marginTop: 8 }}>
+                  🔍 全书质检中：{auditStatus.completedBatches}/{auditStatus.totalBatches > 0 ? auditStatus.totalBatches : '…'} 批
+                  {auditStatus.totalBatches > 0 && (
+                    <div className={css.dashJourneyBar} style={{ marginTop: 4 }}>
+                      <div className={css.dashJourneyFill} style={{ width: `${Math.round((auditStatus.completedBatches / auditStatus.totalBatches) * 100)}%` }} />
+                    </div>
+                  )}
+                </div>
+              )}
+              {auditStatus?.status === 'error' && auditStatus.error !== undefined && (
+                <div className={css.meta} style={{ color: 'var(--nf-error)', marginTop: 8 }}>全书质检失败：{auditStatus.error}</div>
+              )}
               <div className={css.assetGrid}>
                 <StatCell
                   label="道藏"
@@ -2732,7 +2922,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                   <span className={css.cardTitle}>📋 作者复盘（最近 {Math.min(6, chapters.filter(c => c.authorReview !== undefined).length)} 章）</span>
                   <div className={css.row}>
                     {(() => {
-                      const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.authorReview === undefined).length
+                      const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.status !== 'error' && c.authorReview === undefined).length
                       return missing > 0 && (
                         <button
                           type="button"
@@ -2745,7 +2935,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                         </button>
                       )
                     })()}
-                    <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setActiveTab('reviews') }} title="查看按卷分组的全部复盘记录">
+                    <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setActiveTab('book'); changeBookTab('facts'); changeArchiveTab('reviews') }} title="查看按卷分组的全部复盘记录">
                       查看全部 →
                     </button>
                   </div>
@@ -2918,7 +3108,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         {activeTab === 'blurb' && (
           <div className={css.card}>
             <div className={css.row} style={{ justifyContent: 'space-between' }}>
-              <span className={css.cardTitle}>卷首语</span>
+              <span className={css.cardTitle}>📖 简介 / 封面</span>
               <div className={css.row}>
                 <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy || project === null} onClick={() => { void handleBlurbGenerate() }}>
                   ✨ AI 生成
@@ -3183,7 +3373,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                                   )}
                                 </div>
                               )}
-                              {chapter.authorReview === undefined && chapter.status !== 'pending' && chapter.status !== 'generating' && (
+                              {chapter.authorReview === undefined && chapter.status !== 'pending' && chapter.status !== 'generating' && chapter.status !== 'error' && (
                                 <div className={css.row}>
                                   <button
                                     type="button"
@@ -3299,85 +3489,53 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           </>
         )}
 
-        {activeTab === 'reviews' && (
-          <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
+        {activeTab === 'book' && (
+          <div className={css.card} style={{ gap: 12 }}>
             <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle}>📋 复盘记录（{chapters.filter(c => c.authorReview !== undefined).length} 章已复盘）</span>
-              <div className={css.row}>
-                {(() => {
-                  const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.authorReview === undefined).length
-                  return missing > 0 && (
-                    <button
-                      type="button"
-                      className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`}
-                      disabled={busy}
-                      onClick={() => { void handleAuthorBackfillAll() }}
-                      title="对历史已写章节逐章补跑作者复盘"
-                    >
-                      ↻ 补齐缺失复盘（{missing}）
-                    </button>
-                  )
-                })()}
-              </div>
+              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>📚 本书设定</span>
+              <span className={css.meta}>当前书的知识与资料（参考 AI-Novel-Writing-Assistant：世界观/角色准备收进书内）</span>
             </div>
-            {(() => {
-              const reviewed = chapters.filter(c => c.authorReview !== undefined)
-              if (reviewed.length === 0) {
-                return <span className={css.meta}>尚无作者复盘——生成/审稿后自动生成，或点「补齐缺失复盘」为已写章节补跑。</span>
-              }
-              const honored = reviewed.filter(c => c.authorReview!.hookHonored).length
-              const avg = Math.round(reviewed.reduce((s, c) => s + c.authorReview!.endingHook, 0) / reviewed.length * 10) / 10
-              return (
-                <span className={css.meta} style={{ fontWeight: 600 }}>
-                  钩子兑现 {honored}/{reviewed.length} · 结尾钩子均分 {avg}/10
-                </span>
-              )
-            })()}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto', flex: 1, minHeight: 0 }}>
-              {chapterGroups.map(group => {
-                const groupReviewed = group.chapters.filter(c => c.authorReview !== undefined)
-                if (groupReviewed.length === 0) return null
-                return (
-                  <div key={group.no} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                    <div className={css.row} style={{ alignItems: 'center', gap: 8 }}>
-                      <b style={{ fontSize: 13 }}>{group.title}</b>
-                      <span className={css.meta}>已复盘 {groupReviewed.length}/{group.chapters.length} 章</span>
-                    </div>
-                    {[...groupReviewed].reverse().map(c => {
-                      const ar = c.authorReview!
-                      const expanded = expandedReviewChapter === c.no
-                      return (
-                        <div key={c.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, overflow: 'hidden' }}>
-                          <button
-                            type="button"
-                            style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: '6px 10px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}
-                            onClick={() => { setExpandedReviewChapter(expanded ? null : c.no) }}
-                          >
-                            <span style={{ color: 'var(--nf-text-3)' }}>{expanded ? '▾' : '▸'}</span>
-                            <b>第{c.no}章《{c.title}》</b>
-                            <span style={{ color: ar.hookHonored ? 'var(--nf-success)' : 'var(--nf-warn)' }}>钩子{ar.hookHonored ? '✓' : '✗'}</span>
-                            <span style={{ color: ar.endingHook >= 6 ? 'var(--nf-success)' : 'var(--nf-error)' }}>结尾钩子 {ar.endingHook}/10</span>
-                            {ar.plotlineProgress !== '' && <span className={css.meta} style={{ marginLeft: 4 }}>{ar.plotlineProgress.slice(0, 40)}{ar.plotlineProgress.length > 40 ? '…' : ''}</span>}
-                          </button>
-                          {expanded && (
-                            <div style={{ padding: '4px 10px 8px', fontSize: 12, display: 'flex', flexDirection: 'column', gap: 3, borderTop: '1px solid var(--nf-border)' }}>
-                              {ar.hookNote !== '' && <span className={css.meta}><b>钩子：</b>{ar.hookNote}</span>}
-                              {ar.plotlineProgress !== '' && <span className={css.meta}><b>推进：</b>{ar.plotlineProgress}</span>}
-                              {ar.continuity !== '' && <span className={css.meta}><b>衔接：</b>{ar.continuity}</span>}
-                              {ar.trend !== '' && <span className={css.meta}><b>趋势：</b>{ar.trend}</span>}
-                            </div>
-                          )}
-                        </div>
-                      )
-                    })}
-                  </div>
-                )
-              })}
+            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+              <button
+                type="button"
+                className={`${css.button} ${bookTab === 'bible' ? css.buttonPrimary : ''}`}
+                style={{ fontSize: 14, flex: 1 }}
+                onClick={() => { changeBookTab('bible') }}
+                title="设定库：题材 / 世界观规则 / 人物摘要 / 红线 / 文风"
+              >
+                📖 设定库
+              </button>
+              <button
+                type="button"
+                className={`${css.button} ${bookTab === 'world' ? css.buttonPrimary : ''}`}
+                style={{ fontSize: 14, flex: 1 }}
+                onClick={() => { changeBookTab('world') }}
+                title="大世界：境界体系 / 地理区域 / 势力分布（注入生成与审稿提示词）"
+              >
+                🌍 大世界
+              </button>
+              <button
+                type="button"
+                className={`${css.button} ${bookTab === 'roles' ? css.buttonPrimary : ''}`}
+                style={{ fontSize: 14, flex: 1 }}
+                onClick={() => { changeBookTab('roles') }}
+                title="角色库：全书角色主表（定位 / 关系网 / 成长线 / 知情度）"
+              >
+                👥 角色库（{project?.roles?.length ?? 0}）
+              </button>
+              <button
+                type="button"
+                className={`${css.button} ${bookTab === 'facts' ? css.buttonPrimary : ''}`}
+                style={{ fontSize: 14, flex: 1 }}
+                onClick={() => { changeBookTab('facts') }}
+                title="编年录与复盘记录"
+              >
+                📚 编年 / 复盘
+              </button>
             </div>
           </div>
         )}
-
-        {activeTab === 'bible' && (
+        {activeTab === 'book' && bookTab === 'bible' && (
           <>
           <div className={css.card}>
             <div className={css.row} style={{ justifyContent: 'space-between' }}>
@@ -3457,7 +3615,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         )}
 
         {/* 大世界：境界体系 / 区域 / 势力 */}
-        {activeTab === 'world' && (
+        {activeTab === 'book' && bookTab === 'world' && (
           <WorldTab
             api={api}
             world={project?.world}
@@ -3469,8 +3627,8 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         )}
 
         {/* 角色库：全书角色主表（独立导航页） */}
-        {activeTab === 'roles' && (
-          <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
+        {activeTab === 'book' && bookTab === 'roles' && (
+          <div className={css.card}>
             <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
               <span className={css.cardTitle}>👥 角色库（{(project?.roles ?? []).length} 个）</span>
               <div className={css.row}>
@@ -3583,63 +3741,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         )}
 
         {/* 写作资产 5 个子分类（左侧导航直达） */}
-        {activeTab === 'assetsGenre' && <AssetsTab api={api} initialTab="genre" />}
-        {activeTab === 'assetsProgression' && <AssetsTab api={api} initialTab="progression" />}
-        {activeTab === 'assetsTemplates' && <AssetsTab api={api} initialTab="templates" />}
-        {activeTab === 'assetsRules' && <AssetsTab api={api} initialTab="rules" />}
-        {activeTab === 'assetsStyle' && <AssetsTab api={api} initialTab="style" />}
-
-        {activeTab === 'foreshadow' && (
-          <div className={css.card}>
-            <div className={css.row} style={{ justifyContent: 'space-between' }}>
-              <span className={css.cardTitle}>{tt('foreshadow.title')}（{foreshadows.length}）</span>
-              <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleSuggestForeshadows() }}>
-                {tt('foreshadow.suggest')}
-              </button>
-            </div>
-            {foreshadows.length === 0 ? (
-              <span className={css.meta}>{tt('foreshadow.none')}</span>
-            ) : (
-              <div className={css.chapterList}>
-                {foreshadows.map(f => {
-                  const statusLabel = { planned: tt('foreshadow.planned'), planted: tt('foreshadow.planted'), progressing: tt('foreshadow.progressing'), resolved: tt('foreshadow.resolved'), abandoned: tt('foreshadow.abandoned') }[f.status]
-                  const statusColor = f.status === 'resolved' ? 'var(--nf-success)' : f.status === 'planted' || f.status === 'progressing' ? 'var(--nf-accent)' : f.status === 'abandoned' ? 'var(--nf-text-3)' : 'var(--nf-info)'
-                  return (
-                    <div key={f.id} className={css.chapter}>
-                      <div className={css.chapterMain}>
-                        <div className={css.chapterTitle}>
-                          <span>{f.description}</span>
-                        </div>
-                        <div className={css.meta}>
-                          {f.plantedChapter !== undefined && <span>{tt('foreshadow.plantedAt')} 第{f.plantedChapter}章 · </span>}
-                          {f.targetChapter !== undefined && <span>{tt('foreshadow.target')} 第{f.targetChapter}章 · </span>}
-                          {f.resolvedNote !== undefined && f.resolvedNote !== '' && <span>回收：{f.resolvedNote} · </span>}
-                        </div>
-                      </div>
-                      <span className={css.badge} style={{ borderColor: statusColor, color: statusColor }}>{statusLabel}</span>
-                      <div className={css.row} style={{ gap: 4 }}>
-                        {f.status === 'planned' && (
-                          <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => {
-                            void api.foreshadow({ id: f.id, status: 'planted', plantedChapter: doneCount + 1 }).then(r => setProject(prev => prev === null ? prev : { ...prev, foreshadows: r.foreshadows }))
-                          }}>
-                            {tt('foreshadow.setPlanted')}
-                          </button>
-                        )}
-                        {(f.status === 'planted' || f.status === 'progressing') && (
-                          <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => {
-                            void api.foreshadow({ id: f.id, status: 'resolved', resolvedNote: `第${doneCount}章回收` }).then(r => setProject(prev => prev === null ? prev : { ...prev, foreshadows: r.foreshadows }))
-                          }}>
-                            {tt('foreshadow.setResolved')}
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        )}
+        {activeTab === 'assets' && <AssetsTab api={api} />}
 
         {activeTab === 'settings' && configDraft !== null && (
           <div className={css.card}>
@@ -3652,14 +3754,71 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               <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.row}>
+            <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 }}>
+              <div className={css.field} style={{ flex: 1.4 }}>
                 <label className={css.fieldLabel}>{tt('settings.model')}</label>
-                <input className={css.input} value={configDraft.model} onChange={e => { setConfigDraft({ ...configDraft, model: e.target.value }) }} />
+                <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
+                    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} 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>
+            <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 }) }} />
+              </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 }) }} />
+              </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>
             </div>
             <div className={css.row}>
@@ -3780,8 +3939,142 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           </div>
         )}
 
-        {activeTab === 'facts' && (
+        {activeTab === 'book' && bookTab === 'facts' && (
           <div className={css.card}>
+            <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>📚 编年 / 复盘</span>
+            </div>
+            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+                <button
+                  type="button"
+                  className={`${css.button} ${archiveTab === 'facts' ? css.buttonPrimary : ''}`}
+                  style={{ fontSize: 14, flex: 1 }}
+                  onClick={() => { changeArchiveTab('facts') }}
+                  title="编年录：客观事实流水（第 N 章 · 事件），生成/审稿查证用"
+                >
+                  📜 编年录（{(project?.facts ?? []).length}）
+                </button>
+                <button
+                  type="button"
+                  className={`${css.button} ${archiveTab === 'reviews' ? css.buttonPrimary : ''}`}
+                  style={{ fontSize: 14, flex: 1 }}
+                  onClick={() => { changeArchiveTab('reviews') }}
+                  title="复盘记录：每章作者复盘（钩子 / 推进 / 衔接 / 趋势）"
+                >
+                  📋 复盘记录（{chapters.filter(c => c.authorReview !== undefined).length} 章）
+                </button>
+              </div>
+
+            {archiveTab === 'reviews' ? (
+              <>
+            <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+              <span className={css.cardTitle}>📋 复盘记录（{chapters.filter(c => c.authorReview !== undefined).length} 章已复盘）</span>
+              <div className={css.row}>
+                {(() => {
+                  const missing = chapters.filter(c => c.status !== 'pending' && c.status !== 'generating' && c.status !== 'error' && c.authorReview === undefined).length
+                  return missing > 0 && (
+                    <button
+                      type="button"
+                      className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`}
+                      disabled={busy}
+                      onClick={() => { void handleAuthorBackfillAll() }}
+                      title="对历史已写章节逐章补跑作者复盘"
+                    >
+                      ↻ 补齐缺失复盘（{missing}）
+                    </button>
+                  )
+                })()}
+              </div>
+            </div>
+            {(() => {
+              const reviewed = chapters.filter(c => c.authorReview !== undefined)
+              if (reviewed.length === 0) {
+                return <span className={css.meta}>尚无作者复盘——生成/审稿后自动生成，或点「补齐缺失复盘」为已写章节补跑。</span>
+              }
+              const honored = reviewed.filter(c => c.authorReview!.hookHonored).length
+              const avg = Math.round(reviewed.reduce((s, c) => s + c.authorReview!.endingHook, 0) / reviewed.length * 10) / 10
+              return (
+                <span className={css.meta} style={{ fontWeight: 600 }}>
+                  钩子兑现 {honored}/{reviewed.length} · 结尾钩子均分 {avg}/10
+                </span>
+              )
+            })()}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto', flex: 1, minHeight: 0 }}>
+              {(() => {
+                const groupsWithReviews = chapterGroups.filter(group => group.chapters.some(c => c.authorReview !== undefined))
+                if (groupsWithReviews.length === 0) return null
+                return (
+                  <div className={css.row} style={{ justifyContent: 'flex-end', gap: 6 }}>
+                    <button
+                      type="button"
+                      className={`${css.button} ${css.buttonSmall}`}
+                      onClick={() => { setExpandedVolumes(Object.fromEntries(groupsWithReviews.map(g => [g.no, true]))) }}
+                    >
+                      全部展开
+                    </button>
+                    <button
+                      type="button"
+                      className={`${css.button} ${css.buttonSmall}`}
+                      onClick={() => { setExpandedVolumes({}) }}
+                    >
+                      全部折叠
+                    </button>
+                  </div>
+                )
+              })()}
+              {chapterGroups.map(group => {
+                const groupReviewed = group.chapters.filter(c => c.authorReview !== undefined)
+                if (groupReviewed.length === 0) return null
+                const volumeExpanded = expandedVolumes[group.no] === true
+                return (
+                  <div key={group.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, overflow: 'hidden' }}>
+                    <button
+                      type="button"
+                      style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: '8px 12px', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}
+                      onClick={() => { setExpandedVolumes(prev => ({ ...prev, [group.no]: !volumeExpanded })) }}
+                    >
+                      <span style={{ color: 'var(--nf-text-3)' }}>{volumeExpanded ? '▾' : '▸'}</span>
+                      <b>{group.title}</b>
+                      <span className={css.meta}>已复盘 {groupReviewed.length}/{group.chapters.length} 章</span>
+                    </button>
+                    {volumeExpanded && (
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '4px 8px 8px', borderTop: '1px solid var(--nf-border)' }}>
+                        {[...groupReviewed].reverse().map(c => {
+                          const ar = c.authorReview!
+                          const expanded = expandedReviewChapter === c.no
+                          return (
+                            <div key={c.no} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, overflow: 'hidden' }}>
+                              <button
+                                type="button"
+                                style={{ width: '100%', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', padding: '6px 10px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}
+                                onClick={() => { setExpandedReviewChapter(expanded ? null : c.no) }}
+                              >
+                                <span style={{ color: 'var(--nf-text-3)' }}>{expanded ? '▾' : '▸'}</span>
+                                <b>第{c.no}章《{c.title}》</b>
+                                <span style={{ color: ar.hookHonored ? 'var(--nf-success)' : 'var(--nf-warn)' }}>钩子{ar.hookHonored ? '✓' : '✗'}</span>
+                                <span style={{ color: ar.endingHook >= 6 ? 'var(--nf-success)' : 'var(--nf-error)' }}>结尾钩子 {ar.endingHook}/10</span>
+                                {ar.plotlineProgress !== '' && <span className={css.meta} style={{ marginLeft: 4 }}>{ar.plotlineProgress.slice(0, 40)}{ar.plotlineProgress.length > 40 ? '…' : ''}</span>}
+                              </button>
+                              {expanded && (
+                                <div style={{ padding: '4px 10px 8px', fontSize: 12, display: 'flex', flexDirection: 'column', gap: 3, borderTop: '1px solid var(--nf-border)' }}>
+                                  {ar.hookNote !== '' && <span className={css.meta}><b>钩子：</b>{ar.hookNote}</span>}
+                                  {ar.plotlineProgress !== '' && <span className={css.meta}><b>推进：</b>{ar.plotlineProgress}</span>}
+                                  {ar.continuity !== '' && <span className={css.meta}><b>衔接：</b>{ar.continuity}</span>}
+                                  {ar.trend !== '' && <span className={css.meta}><b>趋势：</b>{ar.trend}</span>}
+                                </div>
+                              )}
+                            </div>
+                          )
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+              </>
+            ) : (
+              <>
             <div className={css.busyRow} style={{ flexWrap: 'wrap' }}>
               <span className={css.cardTitle}>{tt('facts.title', { n: (project?.facts ?? []).length })}</span>
               <button
@@ -3809,14 +4102,92 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             ) : (
               <span className={css.meta}>暂无事实条目——写一章后会自动生成，或点击上方「回填」。</span>
             )}
+              </>
+            )}
           </div>
         )}
 
         {activeTab === 'plotlines' && (
-          <div className={css.card} style={{ flex: 1, minHeight: 0 }}>
+          <div className={css.card}>
             <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-              <span className={css.cardTitle}>{tt('tab.plotlines')}（{project?.plotlines?.length ?? 0}）</span>
-              <div className={css.row} style={{ flexWrap: 'wrap' }}>
+              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>📜 长线管理</span>
+            </div>
+            <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
+                <button
+                  type="button"
+                  className={`${css.button} ${longlineTab === 'plotlines' ? css.buttonPrimary : ''}`}
+                  style={{ fontSize: 14, flex: 1 }}
+                  onClick={() => { changeLonglineTab('plotlines') }}
+                  title="剧情线：故事明线（主线 / 支线 / 人物 / 悬念）"
+                >
+                  🧵 剧情线（{project?.plotlines?.length ?? 0}）
+                </button>
+                <button
+                  type="button"
+                  className={`${css.button} ${longlineTab === 'foreshadow' ? css.buttonPrimary : ''}`}
+                  style={{ fontSize: 14, flex: 1 }}
+                  onClick={() => { changeLonglineTab('foreshadow') }}
+                  title="伏笔：道具 / 事件级暗线（埋设 → 回收）"
+                >
+                  🔮 伏笔（{foreshadows.length}）
+                </button>
+              </div>
+
+            {longlineTab === 'foreshadow' ? (
+              <>
+              <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+                <span className={css.cardTitle}>🔮 {tt('foreshadow.title')}（{foreshadows.length}）</span>
+                <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleSuggestForeshadows() }}>
+                  {tt('foreshadow.suggest')}
+                </button>
+              </div>
+              {foreshadows.length === 0 ? (
+                <span className={css.meta}>{tt('foreshadow.none')}</span>
+              ) : (
+                <div className={css.chapterList}>
+                  {foreshadows.map(f => {
+                    const statusLabel = { planned: tt('foreshadow.planned'), planted: tt('foreshadow.planted'), progressing: tt('foreshadow.progressing'), resolved: tt('foreshadow.resolved'), abandoned: tt('foreshadow.abandoned') }[f.status]
+                    const statusColor = f.status === 'resolved' ? 'var(--nf-success)' : f.status === 'planted' || f.status === 'progressing' ? 'var(--nf-accent)' : f.status === 'abandoned' ? 'var(--nf-text-3)' : 'var(--nf-info)'
+                    return (
+                      <div key={f.id} className={css.chapter}>
+                        <div className={css.chapterMain}>
+                          <div className={css.chapterTitle}>
+                            <span>{f.description}</span>
+                          </div>
+                          <div className={css.meta}>
+                            {f.plantedChapter !== undefined && <span>{tt('foreshadow.plantedAt')} 第{f.plantedChapter}章 · </span>}
+                            {f.targetChapter !== undefined && <span>{tt('foreshadow.target')} 第{f.targetChapter}章 · </span>}
+                            {f.resolvedNote !== undefined && f.resolvedNote !== '' && <span>回收：{f.resolvedNote} · </span>}
+                          </div>
+                        </div>
+                        <span className={css.badge} style={{ borderColor: statusColor, color: statusColor }}>{statusLabel}</span>
+                        <div className={css.row} style={{ gap: 4 }}>
+                          {f.status === 'planned' && (
+                            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => {
+                              void api.foreshadow({ id: f.id, status: 'planted', plantedChapter: doneCount + 1 }).then(r => setProject(prev => prev === null ? prev : { ...prev, foreshadows: r.foreshadows }))
+                            }}>
+                              {tt('foreshadow.setPlanted')}
+                            </button>
+                          )}
+                          {(f.status === 'planted' || f.status === 'progressing') && (
+                            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => {
+                              void api.foreshadow({ id: f.id, status: 'resolved', resolvedNote: `第${doneCount}章回收` }).then(r => setProject(prev => prev === null ? prev : { ...prev, foreshadows: r.foreshadows }))
+                            }}>
+                              {tt('foreshadow.setResolved')}
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+              </>
+            ) : (
+              <>
+              <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+                <span className={css.cardTitle}>🧵 {tt('tab.plotlines')}（{project?.plotlines?.length ?? 0}）</span>
+                <div className={css.row} style={{ flexWrap: 'wrap' }}>
                 <button
                   type="button"
                   className={`${css.button} ${css.buttonSmall}`}
@@ -3945,6 +4316,8 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 ))}
               </div>
             )}
+              </>
+            )}
           </div>
         )}
 
@@ -3959,7 +4332,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
               <div className={css.row} style={{ flexWrap: 'wrap' }}>
                 <select
                   className={css.input}
-                  style={{ width: 130 }}
+                  style={{ width: 160 }}
                   value={breakdownScope}
                   onChange={e => { setBreakdownScope(e.target.value as typeof breakdownScope) }}
                   title="分析范围"
@@ -3972,13 +4345,13 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
                 </select>
                 <select
                   className={css.input}
-                  style={{ width: 100 }}
+                  style={{ width: 150 }}
                   value={breakdownPreset}
                   onChange={e => { setBreakdownPreset(e.target.value as 'quick' | 'standard') }}
                   title="分析档位"
                 >
                   <option value="quick">快速（4 维）</option>
-                  <option value="standard">标准（+卖点）</option>
+                  <option value="standard">标准+卖点</option>
                 </select>
                 <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleBreakdown() }} title="对已写章节做结构/人物/文风/卖点体检（约 1-3 分钟，消耗 LLM 额度）">
                   {busy ? '⏳ 分析中…' : '✨ 开始拆书'}
@@ -4019,171 +4392,573 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           </div>
         )}
 
-        {activeTab === 'storyboard' && (
-          <div className={css.card}>
+        {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}>🎬 漫剧工坊</span>
-              <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
-                <button
-                  type="button"
-                  className={`${css.button} ${css.buttonSmall} ${storyboardView === 'single' ? css.buttonPrimary : ''}`}
-                  onClick={() => { setStoryboardView('single') }}
-                >
-                  🎞️ 单集分镜
-                </button>
-                <button
-                  type="button"
-                  className={`${css.button} ${css.buttonSmall} ${storyboardView === 'plan' ? css.buttonPrimary : ''}`}
-                  onClick={() => { setStoryboardView('plan') }}
-                >
-                  📺 按卷规划
-                </button>
-              </div>
+              <span className={css.cardTitle} style={{ fontSize: 17, fontWeight: 700 }}>🖼️ 角色形象</span>
+              <span className={css.meta}>角色形象锚点 / 参考图（漫画功能已移除，形象保留用于立绘与一致性）</span>
             </div>
 
-            {storyboardView === 'plan' && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
-                  <select
-                    className={css.input}
-                    style={{ width: 170 }}
-                    value={storyboardPlanVolume}
-                    onChange={e => { setStoryboardPlanVolume(Number(e.target.value)) }}
-                    title="选择要规划的卷"
-                  >
-                    {volumes !== undefined && volumes.map(v => (
-                      <option key={v.no} value={v.no}>第{v.no}卷《{v.title}》</option>
-                    ))}
-                  </select>
-                  <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleStoryboardPlan() }} title="AI 通读整卷章节摘要，按故事弧线把章节分组成漫剧集（高潮章单独成集、过渡章合并），约 1-3 分钟">
-                    {busy ? '⏳ 规划中…' : '✨ 生成分集计划'}
-                  </button>
-                  <span className={css.meta}>AI 读卷 → 按弧线分集（不再是固定一章一集）</span>
+            <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>
-                <span className={css.meta}>分集原则：高潮章单独成集或两章一集；过渡章 2-3 章合并；断点选在钩子最强处；每集 60-120 秒。生成后逐集确认，满意再用「单集分镜」为某集生成分镜。</span>
 
-                {storyboardPlanResult === null ? (
-                  <div className={css.shelfEmpty} style={{ minHeight: 140 }}>
-                    <span className={css.shelfEmptyIcon}>📺</span>
-                    <span className={css.shelfEmptyTitle}>尚未生成分集计划</span>
-                    <span className={css.meta}>选卷后点「生成分集计划」，AI 把整卷按故事弧线分成漫剧集</span>
+                {(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>
-                ) : (
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                    <div className={css.meta}><b>策略：</b>{storyboardPlanResult.strategy}</div>
-                    <div className={css.meta}>共 {storyboardPlanResult.episodes.length} 集 · 覆盖 {storyboardPlanResult.chaptersScanned} 章</div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 380, overflowY: 'auto' }}>
-                      {storyboardPlanResult.episodes.map(ep => (
-                        <div key={ep.index} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px', fontSize: 12 }}>
-                          <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
-                            <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)', flex: 'none' }}>第{ep.index}集</span>
-                            <b>{ep.title}</b>
-                            <span className={css.meta}>涵盖：第{ep.chapters[0]}-{ep.chapters[ep.chapters.length - 1]}章（{ep.chapters.length}章）</span>
+                )}
+
+{(() => {
+                  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 {
+                                        await api.roles({ op: 'promptKit', name: detailRole.name })
+                                        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: anchor.zh + '。全身/半身正视图，写实电影感。' + rulesZh, en: anchor.en + ', full body, front view, plain background' })
+                                    blocks.push({ key: 'sheet', title: '四视图', zh: anchor.zh + '。同一角色的正面/左侧面/右侧面/背面四视图设定表，纯白背景，四个视角分别描述。' + rulesZh, en: anchor.en + ', character sheet, front view, left side view, right side view, back view, full body, plain white background' })
+                                    for (const n of expressions) blocks.push({ key: 'exp-' + n, title: `表情·${expName(n)}`, zh: anchor.zh + `。表情：${expName(n)}，脸部特写（头部到锁骨），纯白背景，五官与角色定稿完全一致，皮肤纹理细节完整，无多余杂物。` + rulesZh, en: anchor.en + `, facial close-up, head to collarbone, expression: ${expName(n)}, plain white background, consistent with character design, detailed skin texture, no extra objects` })
+                                    blocks.push({ key: 'details', title: '细节', zh: `多组局部细节集合参考图，纯白背景：${anchor.tags.map(t => t + '特写').join('；')}。细节清晰锐利，角色细节参考稿，无多余杂物。` + rulesZh, en: anchor.tags.join(', ') + ', multi-panel detail reference sheet, plain white background, 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>
+                              <select
+                                className={css.input}
+                                style={{ fontSize: 12, padding: '3px 4px', width: 90 }}
+                                value={detailRole.importance ?? 'support'}
+                                onChange={e => { void handleRoleImportance(detailRole, e.target.value as RoleRecord['importance']) }}
+                                title="漫剧重要性"
+                              >
+                                <option value="main">重要</option>
+                                <option value="support">配角</option>
+                                <option value="extra">路人</option>
+                              </select>
+                            </div>
                           </div>
-                          <div className={css.meta}>{ep.narrativeJob}</div>
-                          <div className={css.meta} style={{ color: 'var(--nf-info)' }}>开头钩子：{ep.openingHook}</div>
-                          <div className={css.meta} style={{ color: 'var(--nf-warn)' }}>结尾钩子：{ep.endingHook}</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>
             )}
 
-            {storyboardView === 'single' && (
-              <>
-                <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-                  <span className={css.meta}>把一章网文改编为高完播率的漫剧分镜：角色视觉锚点（复用角色库形象词）+ 8-12 格分镜表（画面/台词/转场/AI 提示词），可直接用于豆包/即梦/SD 出图或视频。黄金开局 3 秒 + 每 10 秒小高潮 + 结尾钩子。</span>
-                  <div className={css.row} style={{ flexWrap: 'wrap' }}>
-                    <select
-                      className={css.input}
-                      style={{ width: 150 }}
-                      value={storyboardChapterNo}
-                      onChange={e => { setStoryboardChapterNo(Number(e.target.value)) }}
-                      title="选择要改编的章节"
-                    >
-                      {chapters.filter(c => c.status !== 'pending' && c.status !== 'generating').map(c => (
-                        <option key={c.no} value={c.no}>第{c.no}章 {c.title}</option>
-                      ))}
-                    </select>
-                    <select
-                      className={css.input}
-                      style={{ width: 100 }}
-                      value={storyboardTool}
-                      onChange={e => { setStoryboardTool(e.target.value as typeof storyboardTool) }}
-                      title="AI 工具（影响提示词格式）"
-                    >
-                      <option value="doubao">豆包</option>
-                      <option value="seedance">Seedance</option>
-                      <option value="sd">SD/ComfyUI</option>
-                      <option value="mj">Midjourney</option>
-                    </select>
-                    <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleStoryboard(storyboardChapterNo) }} title="把所选章节改编为抖音漫剧分镜（约 1-2 分钟，消耗 LLM 额度）">
-                      {busy ? '⏳ 生成中…' : '✨ 生成分镜'}
-                    </button>
+            {(() => {
+              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>
-                </div>
 
-            {storyboardResult === null ? (
-              <div className={css.shelfEmpty} style={{ minHeight: 140 }}>
-                <span className={css.shelfEmptyIcon}>🎬</span>
-                <span className={css.shelfEmptyTitle}>尚未生成分镜</span>
-                <span className={css.meta}>选择章节与 AI 工具，点「生成分镜」开始</span>
-              </div>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                <div className={css.meta}><b>本集：</b>{storyboardResult.title}</div>
-                <div className={css.meta}><b>赛道节奏：</b>{storyboardResult.pacingNote}</div>
-                <div className={css.meta}><b>本集钩子：</b>{storyboardResult.hook}</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>
 
-                {storyboardResult.characters.length > 0 && (
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                    <b>角色视觉锚点（全分镜强制复用）</b>
-                    {storyboardResult.characters.map(c => (
-                      <div key={c.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px', fontSize: 12 }}>
-                        <div><b>{c.name}</b></div>
-                        <div className={css.meta}>{c.visualAnchor}</div>
-                        <div className={css.meta} style={{ fontFamily: 'monospace', fontSize: 11 }}>{c.tags}</div>
-                      </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: 'flex', flexDirection: 'column', gap: 6 }}>
-                  <div className={css.row} style={{ justifyContent: 'space-between' }}>
-                    <b>分镜表（{storyboardResult.panels.length} 格）</b>
-                    <button
-                      type="button"
-                      className={`${css.button} ${css.buttonSmall}`}
-                      onClick={() => {
-                        const text = storyboardResult.panels.map(p => `[${p.timecode}] ${p.shot}\n画面：${p.visual}\n台词：${p.dialogue}\n转场：${p.transition}\n提示词：${p.prompt}`).join('\n\n')
-                        void navigator.clipboard?.writeText(text).then(() => { pushProgress('分镜表已复制到剪贴板', 'done') }).catch(() => { /* ignore */ })
-                      }}
-                      title="复制全部分镜提示词"
-                    >
-                      📋 复制全部
-                    </button>
-                  </div>
-                  {storyboardResult.panels.map(p => (
-                    <div key={p.index} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px', fontSize: 12 }}>
-                      <div className={css.row} style={{ flexWrap: 'wrap', gap: 6 }}>
-                        <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)', flex: 'none' }}>{p.timecode}</span>
-                        <b>{p.shot}</b>
-                        <span className={css.meta}>转场：{p.transition}</span>
+                        <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 className={css.meta}>{p.visual}</div>
-                      {p.dialogue !== '' && <div className={css.meta} style={{ color: 'var(--nf-info)' }}>💬 {p.dialogue}</div>}
-                      <div className={css.meta} style={{ fontFamily: 'monospace', fontSize: 11, color: 'var(--nf-text-2)' }}>{p.prompt}</div>
                     </div>
-                  ))}
-                </div>
-              </div>
-            )}
-              </>
-            )}
+                  )}
+                </>
+              )
+            })()}
           </div>
         )}
+
         </>)}
         </div>
       </div>