@waterwx/dsh-novel-forge 1.5.0 → 1.6.0

package/lib/types/client/panel/MangaWorkspace.d.ts

@@ -1,9 +1,13 @@
 import type { NovelApi } from '../api.ts';
 import type { ChapterPlan, ProjectState } from '../../protocol.ts';
-export declare function MangaWorkspace({ api, project, chapters, onProjectChanged, }: {
+export declare function MangaWorkspace({ api, project, chapters, onProjectChanged, imageApiEnabled, onProgress, }: {
     api: NovelApi;
     project: ProjectState | null;
     chapters: ChapterPlan[];
-    /** 方案变更已持久化后触发（刷新项目）。 */
+    /** 方案/资产变更已持久化后触发（刷新项目）。 */
     onProjectChanged?: () => void | Promise<void>;
+    /** 是否启用豆包生图。 */
+    imageApiEnabled?: boolean;
+    /** 上报到「工作进度」控制台（漫剧工作台内所有 LLM/方案操作）。 */
+    onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void;
 }): import("react").JSX.Element;

package/lib/types/client/panel/NovelPanel.d.ts

@@ -1,7 +1,7 @@
 import type { NovelApi } from '../api.ts';
 import type { PanelController } from './controller.ts';
 /** The panel's tab identifiers. */
-export type NovelTab = 'workflow' | 'overview' | 'blurb' | 'plan' | 'bible' | 'world' | 'foreshadow' | 'assistant' | 'settings' | 'characters' | 'roles' | 'facts' | 'plotlines' | 'reviews' | 'progress' | 'breakdown' | 'roleImage' | 'scenes' | 'assetsGenre' | 'assetsProgression' | 'assetsTemplates' | 'assetsRules' | 'assetsStyle' | 'run' | 'manhua' | 'styleLib' | 'book' | 'assets';
+export type NovelTab = 'workflow' | 'overview' | 'blurb' | 'plan' | 'bible' | 'world' | 'foreshadow' | 'assistant' | 'settings' | 'characters' | 'roles' | 'facts' | 'plotlines' | 'reviews' | 'progress' | 'breakdown' | 'assetsGenre' | 'assetsProgression' | 'assetsTemplates' | 'assetsRules' | 'assetsStyle' | 'run' | 'manhua' | 'book' | 'assets';
 /** Panel shell props. */
 export interface NovelPanelProps {
     /** The panel state owner (open/close/toggle). */

package/lib/types/client/panel/RoleVisualPanel.d.ts

@@ -0,0 +1,13 @@
+import type { NovelApi } from '../api.ts';
+import type { ProjectState } from '../../protocol.ts';
+export declare function RoleVisualPanel({ api, project, refresh, styleId, filterId, imageApiEnabled, onGotoRoles, onProgress, }: {
+    api: NovelApi;
+    project: ProjectState | null;
+    refresh: () => void | Promise<void>;
+    styleId?: string;
+    filterId?: string;
+    imageApiEnabled?: boolean;
+    onGotoRoles?: () => void;
+    /** 上报到「工作进度」控制台（角色形象页 / 漫剧工作台共用）。 */
+    onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void;
+}): import("react").JSX.Element;

package/lib/types/client/panel/SceneLibrary.d.ts

@@ -0,0 +1,14 @@
+import type { NovelApi } from '../api.ts';
+import type { ProjectState } from '../../protocol.ts';
+export declare function SceneLibrary({ api, project, refresh, styleId, filterId, onProgress, }: {
+    api: NovelApi;
+    project: ProjectState | null;
+    /** 场景库变更已持久化后触发（刷新项目）。 */
+    refresh: () => void | Promise<void>;
+    /** 提炼场景时的漫剧基底风格 id（提示词按方案风格措辞）。 */
+    styleId?: string;
+    /** 可选滤镜风格 id。 */
+    filterId?: string;
+    /** 上报到「工作进度」控制台。 */
+    onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void;
+}): import("react").JSX.Element;

package/lib/types/client/panel/StoryboardTab.d.ts

@@ -1,6 +1,6 @@
 import type { NovelApi } from '../api.ts';
 import type { ChapterPlan, ProjectState } from '../../protocol.ts';
-export declare function StoryboardTab({ api, project, chapters, onProjectChanged, styleId, filterId, }: {
+export declare function StoryboardTab({ api, project, chapters, onProjectChanged, styleId, filterId, onProgress, }: {
     api: NovelApi;
     project: ProjectState | null;
     chapters: ChapterPlan[];
@@ -10,4 +10,6 @@ export declare function StoryboardTab({ api, project, chapters, onProjectChanged
     styleId?: string;
     /** 可选滤镜风格 id。 */
     filterId?: string;
+    /** 上报到「工作进度」控制台（分镜三步生成）。 */
+    onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void;
 }): import("react").JSX.Element;

package/lib/types/client/panel/StyleCard.d.ts

@@ -0,0 +1,8 @@
+import type { ArtStyle } from '../../style-library.ts';
+export declare function StyleCard({ style, selected, onClick, }: {
+    style: ArtStyle;
+    /** 选中态（高亮边框）。 */
+    selected?: boolean;
+    /** 点击卡片（选风格）。 */
+    onClick?: () => void;
+}): import("react").JSX.Element;

package/lib/types/engine.d.ts

@@ -70,7 +70,7 @@ export declare function refreshPlotlineProgress(ctx: Context, config: NovelConfi
 /** ✨ AI 从全书提炼角色库：大纲 + 道藏 + 编年录 + 章节摘要 → 结构化角色清单。 */
 export declare function extractRoles(ctx: Context, config: NovelConfig, project: ProjectState): Promise<RoleRecord[]>;
 /** ✨ AI 从全书提炼场景库：正文/编年录 → 高频重要场景的结构化视觉锚点。 */
-export declare function extractScenes(ctx: Context, config: NovelConfig, project: ProjectState): Promise<SceneCard[]>;
+export declare function extractScenes(ctx: Context, config: NovelConfig, project: ProjectState, styleId?: string, filterId?: string): Promise<SceneCard[]>;
 /** 从 txt/md 全本文本拆章（纯逻辑，不落盘）：识别章节头、剥离重复标题、去重、排序并统一重新编号。 */
 export declare function splitBookText(raw: string): Array<{
     no: number;

package/lib/types/protocol.d.ts

@@ -256,6 +256,8 @@ export interface StoryboardShot {
 export interface StoryboardTable {
     chapterNo: number;
     shots: StoryboardShot[];
+    /** 生成时注入的场景卡名称（前端标注消费关系）。 */
+    usedScenes?: string[];
 }
 /** POST /storyboard/table 请求：骨架 → 分镜表。 */
 export interface StoryboardTableRequest {
@@ -734,6 +736,8 @@ export interface RoleRecord {
             en: string;
         };
     };
+    /** 生成形象锚点/精修提示词时的漫剧方案基底风格 id（= 方案 styleId；用于检测旧风格并提示重生成）。 */
+    promptStyleId?: string;
     /** 漫画/漫剧重要性：main=必须建卡保证一致；support=有锚点即可；extra=路人随机生成不约束。 */
     importance?: 'main' | 'support' | 'extra';
 }
@@ -774,10 +778,16 @@ export interface SceneCard {
     source?: string;
     /** 场景图集（图像锚点）：全景/局部/氛围 等。 */
     gallery?: RoleImage[];
+    /** 生成时的漫剧方案基底风格 id（场景卡随方案风格措辞）。 */
+    styleId?: string;
 }
 /** POST /scenes 请求：场景库提炼 / 采纳 / 更新 / 删除 / 图集。 */
 export interface ScenesRequest {
     op: 'extract' | 'adopt' | 'update' | 'remove' | 'image' | 'removeImage';
+    /** op='extract' 时的漫剧基底风格 id（场景卡按方案风格措辞）。 */
+    styleId?: string;
+    /** op='extract' 时的可选滤镜风格 id。 */
+    filterId?: string;
     /** adopt / update 时传入的场景卡（adopt 可修改后采纳）。 */
     scene?: SceneCard;
     /** remove / image 时的场景名。 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@waterwx/dsh-novel-forge",
   "description": "AI 编译小说工作台 for the dsh web GUI: import a novel outline (docx/text), plan chapters with LLM, generate chapter by chapter (3000-4000 chars each), and save every chapter as Markdown into your chosen output folder.",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/src/client/panel/MangaWorkspace.tsx

@@ -1,185 +1,293 @@
-/**
- * 漫剧工作台：方案管理（基底风格 + 可选滤镜）→ 分镜（骨架/分镜表，按方案风格生成）。
- * 骨架为故事层（所有方案共享）；分镜表画面措辞随方案风格。
- */
-import { useMemo, useState } from 'react'
-import type { NovelApi } from '../api.ts'
-import type { ChapterPlan, MangaPlan, ProjectState } from '../../protocol.ts'
-import { STYLE_LIBRARY, findStyle } from '../../style-library.ts'
-import { StoryboardTab } from './StoryboardTab.tsx'
-import css from './panel.module.css'
-
-export function MangaWorkspace({
-  api,
-  project,
-  chapters,
-  onProjectChanged,
-}: {
-  api: NovelApi
-  project: ProjectState | null
-  chapters: ChapterPlan[]
-  /** 方案变更已持久化后触发（刷新项目）。 */
-  onProjectChanged?: () => void | Promise<void>
-}) {
-  const plans = useMemo(() => project?.mangaPlans ?? [], [project?.mangaPlans])
-  const activePlan = plans.find(p => p.active) ?? null
-  const [showCreate, setShowCreate] = useState(false)
-  const [name, setName] = useState('')
-  const [styleId, setStyleId] = useState('')
-  const [filterId, setFilterId] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState('')
-
-  // 基底候选：非 stackable 风格按 weight 降序（推荐池），+ 全部基底风格
-  const baseStyles = useMemo(() => STYLE_LIBRARY.filter(s => s.stackable !== true).sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0)), [])
-  const filterStyles = useMemo(() => STYLE_LIBRARY.filter(s => s.stackable === true), [])
-
-  const mutate = async (req: import('../../protocol.ts').MangaPlansRequest): Promise<boolean> => {
-    setBusy(true)
-    setError('')
-    try {
-      await api.manhuaPlans(req)
-      return true
-    } catch (err) {
-      setError((err as Error).message)
-      return false
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  const createPlan = async (): Promise<void> => {
-    const n = name.trim()
-    if (n === '' || styleId === '') {
-      setError('请填写方案名并选择基底风格')
-      return
-    }
-    const ok = await mutate({ op: 'create', name: n, styleId, filterId: filterId !== '' ? filterId : undefined })
-    if (ok) {
-      setShowCreate(false)
-      setName('')
-      setStyleId('')
-      setFilterId('')
-      await refreshProject()
-    }
-  }
-
-  const refreshProject = async (): Promise<void> => {
-    await onProjectChanged?.()
-  }
-
-  if (project === null) {
-    return <div className={css.card}><span className={css.meta}>请先开书或选择一本书，再进入漫剧工作台。</span></div>
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-      {/* ① 方案管理 */}
-      <div className={css.card}>
-        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-          <span className={css.cardTitle}>🎬 漫剧方案</span>
-          <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { setShowCreate(!showCreate) }}>
-            {showCreate ? '收起' : '＋ 新建方案'}
-          </button>
-        </div>
-        <span className={css.meta}>同一本书可建多套视觉演绎（基底风格 + 可选滤镜）；分镜画面措辞随激活方案。</span>
-
-        {showCreate && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, border: '1px solid var(--nf-info)', borderRadius: 12, padding: 10, marginTop: 8 }}>
-            <div className={css.field}>
-              <label className={css.fieldLabel}>方案名</label>
-              <input className={css.input} value={name} placeholder="例如：《保质期》3D 皮克斯版" onChange={e => { setName(e.target.value) }} />
-            </div>
-            <div className={css.field}>
-              <label className={css.fieldLabel}>基底风格（按推荐度排序）</label>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-                {baseStyles.map(s => (
-                  <button
-                    key={s.id}
-                    type="button"
-                    className={`${css.button} ${css.buttonSmall} ${styleId === s.id ? css.buttonPrimary : ''}`}
-                    title={s.traits}
-                    onClick={() => { setStyleId(s.id) }}
-                  >
-                    {s.name}
-                  </button>
-                ))}
-              </div>
-            </div>
-            {filterStyles.length > 0 && (
-              <div className={css.field}>
-                <label className={css.fieldLabel}>叠加滤镜（可选）</label>
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-                  <button type="button" className={`${css.button} ${css.buttonSmall} ${filterId === '' ? css.buttonPrimary : ''}`} onClick={() => { setFilterId('') }}>无</button>
-                  {filterStyles.map(s => (
-                    <button
-                      key={s.id}
-                      type="button"
-                      className={`${css.button} ${css.buttonSmall} ${filterId === s.id ? css.buttonPrimary : ''}`}
-                      title={s.traits}
-                      onClick={() => { setFilterId(s.id) }}
-                    >
-                      {s.name}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-            {error !== '' && <div className={css.importError}>{error}</div>}
-            <div className={css.row}>
-              <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy || name.trim() === '' || styleId === ''} onClick={() => { void createPlan() }}>
-                创建方案
-              </button>
-            </div>
-          </div>
-        )}
-
-        {plans.length === 0 ? (
-          <div className={css.meta} style={{ marginTop: 8 }}>尚无漫剧方案——新建一个方案，选择基底风格开始。</div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
-            {plans.map(p => {
-              const style = findStyle(p.styleId)
-              const filter = p.filterId !== undefined ? findStyle(p.filterId) : undefined
-              return (
-                <div
-                  key={p.id}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
-                    border: `1px solid ${p.active ? 'var(--nf-accent)' : 'var(--nf-border)'}`, borderRadius: 10, padding: '8px 10px',
-                  }}
-                >
-                  <b>{p.name}</b>
-                  <span className={css.badge}>{style?.name ?? p.styleId}</span>
-                  {filter !== undefined && <span className={css.badge}>＋{filter.name}</span>}
-                  {p.active && <span className={`${css.badge} ${css.badgeDone}`}>激活中</span>}
-                  <div style={{ flex: 1 }} />
-                  {!p.active && (
-                    <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={async () => { if (await mutate({ op: 'activate', id: p.id })) await refreshProject() }}>
-                      激活
-                    </button>
-                  )}
-                  <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={async () => { if (await mutate({ op: 'remove', id: p.id })) await refreshProject() }}>
-                    删除
-                  </button>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* ② 分镜（按激活方案风格） */}
-      {plans.length === 0 ? null : (
-        <StoryboardTab
-          api={api}
-          project={project}
-          chapters={chapters}
-          onProjectChanged={onProjectChanged}
-          styleId={activePlan?.styleId}
-          filterId={activePlan?.filterId}
-        />
-      )}
-    </div>
-  )
+/**
+ * 漫剧工作台：
+ *  状态A（无方案）→ 风格选择页（风格库内嵌，创建方案）
+ *  状态B（有方案）→ 主工作页：方案切换器 + ②角色 | ③场景 | ④分镜 三导航
+ */
+import { useMemo, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { ChapterPlan, MangaPlan, ProjectState, RoleRecord } from '../../protocol.ts'
+import { STYLE_CATEGORIES, STYLE_LIBRARY, findStyle, stylesByCategory, type StyleCategory } from '../../style-library.ts'
+import { StyleCard } from './StyleCard.tsx'
+import { StoryboardTab } from './StoryboardTab.tsx'
+import { RoleVisualPanel } from './RoleVisualPanel.tsx'
+import { SceneLibrary } from './SceneLibrary.tsx'
+import css from './panel.module.css'
+
+export function MangaWorkspace({
+  api,
+  project,
+  chapters,
+  onProjectChanged,
+  imageApiEnabled,
+  onProgress,
+}: {
+  api: NovelApi
+  project: ProjectState | null
+  chapters: ChapterPlan[]
+  /** 方案/资产变更已持久化后触发（刷新项目）。 */
+  onProjectChanged?: () => void | Promise<void>
+  /** 是否启用豆包生图。 */
+  imageApiEnabled?: boolean
+  /** 上报到「工作进度」控制台（漫剧工作台内所有 LLM/方案操作）。 */
+  onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
+}) {
+  const plans = useMemo(() => project?.mangaPlans ?? [], [project?.mangaPlans])
+  const activePlan = plans.find(p => p.active) ?? null
+
+  // 状态A：风格选择页
+  const [showCreate, setShowCreate] = useState(false)
+  const [cat, setCat] = useState<StyleCategory>('3d')
+  const [selStyle, setSelStyle] = useState('')
+  const [selFilter, setSelFilter] = useState('')
+  const [planName, setPlanName] = useState('')
+
+  // 状态B：主工作页
+  const [section, setSection] = useState<'roles' | 'scenes' | 'storyboard'>('roles')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [roleCands, setRoleCands] = useState<RoleRecord[] | null>(null)
+
+  const baseStyles = useMemo(() => STYLE_LIBRARY.filter(s => s.stackable !== true).sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0)), [])
+  const filterStyles = useMemo(() => STYLE_LIBRARY.filter(s => s.stackable === true), [])
+  const activeStyle = activePlan !== null ? findStyle(activePlan.styleId) : undefined
+  const activeFilter = activePlan?.filterId !== undefined ? findStyle(activePlan.filterId) : undefined
+
+  const refresh = async (): Promise<void> => { await onProjectChanged?.() }
+
+  const mutate = async (req: import('../../protocol.ts').MangaPlansRequest): Promise<boolean> => {
+    const opLabel = req.op === 'create' ? '创建漫剧方案「' + (req.name ?? '') + '」' : req.op === 'activate' ? '切换漫剧方案' : '删除漫剧方案'
+    setBusy(true)
+    setError('')
+    onProgress?.(opLabel + '…')
+    try {
+      await api.manhuaPlans(req)
+      onProgress?.(opLabel + ' 完成', 'done')
+      return true
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      onProgress?.(opLabel + ' 失败：' + m, 'error')
+      return false
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const createPlan = async (): Promise<void> => {
+    const n = planName.trim()
+    if (n === '' || selStyle === '') {
+      setError('请选择基底风格并填写方案名')
+      return
+    }
+    const ok = await mutate({ op: 'create', name: n, styleId: selStyle, filterId: selFilter !== '' ? selFilter : undefined })
+    if (ok) {
+      setShowCreate(false)
+      setPlanName('')
+      setSelStyle('')
+      setSelFilter('')
+      setSection('roles')
+      await refresh()
+    }
+  }
+
+  const pickStyle = (id: string): void => {
+    setSelStyle(id)
+    if (planName.trim() === '') {
+      const s = findStyle(id)
+      setPlanName(`${project?.bookName ?? '本书'} · ${s?.name ?? ''}版`)
+    }
+  }
+
+  // 角色区操作
+  const extractRoles = async (): Promise<void> => {
+    if (activePlan === null) return
+    setBusy(true); setError('')
+    onProgress?.('按当前方案提炼角色…')
+    try {
+      const r = await api.roles({ op: 'extract', styleId: activePlan.styleId, filterId: activePlan.filterId })
+      setRoleCands(r.candidates ?? [])
+      onProgress?.('角色提炼完成：' + (r.candidates ?? []).length + ' 个候选', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      onProgress?.('角色提炼失败：' + m, 'error')
+    } finally { setBusy(false) }
+  }
+  const adoptRole = async (r: RoleRecord): Promise<void> => {
+    setBusy(true); setError('')
+    onProgress?.('采纳角色「' + r.name + '」…')
+    try {
+      await api.roles({ op: 'adopt', role: r })
+      setRoleCands(prev => (prev ?? []).filter(x => x.name !== r.name))
+      await refresh()
+      onProgress?.('已采纳角色「' + r.name + '」', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      onProgress?.('采纳角色「' + r.name + '」失败：' + m, 'error')
+    } finally { setBusy(false) }
+  }
+  const genRoleVisual = async (name: string): Promise<void> => {
+    if (activePlan === null) return
+    setBusy(true); setError('')
+    onProgress?.('生成「' + name + '」形象锚点（按当前方案风格）…')
+    try {
+      await api.roles({ op: 'visual', name, styleId: activePlan.styleId, filterId: activePlan.filterId })
+      await refresh()
+      onProgress?.('已生成「' + name + '」形象锚点（按当前方案风格）', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      onProgress?.('生成「' + name + '」形象锚点失败：' + m, 'error')
+    } finally { setBusy(false) }
+  }
+
+  if (project === null) {
+    return <div className={css.card}><span className={css.meta}>请先开书或选择一本书，再进入漫剧工作台。</span></div>
+  }
+
+  /* ============ 状态A：风格选择页 ============ */
+  if (showCreate || plans.length === 0) {
+    const list = stylesByCategory(cat)
+    return (
+      <div className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <span className={css.cardTitle}>🎬 漫剧工作台 · 选择视觉风格</span>
+          {plans.length > 0 && <button type="button" className={css.button} disabled={busy} onClick={() => { setShowCreate(false); setSection('roles') }}>返回工作台</button>}
+        </div>
+        <span className={css.meta}>选一个基底风格（影视类可作滤镜叠加），创建方案后进入 角色 / 场景 / 分镜。</span>
+
+        <div className={css.row} style={{ gap: 8, flexWrap: 'wrap', margin: '10px 0' }}>
+          {STYLE_CATEGORIES.map(c => (
+            <button key={c.id} type="button" className={`${css.button} ${cat === c.id ? css.buttonPrimary : ''}`} style={{ flex: 1, minWidth: 120 }} onClick={() => { setCat(c.id) }}>
+              {c.icon} {c.label}（{stylesByCategory(c.id).length}）
+            </button>
+          ))}
+        </div>
+        <div className={css.meta}>{STYLE_CATEGORIES.find(c => c.id === cat)?.desc}</div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 12, margin: '10px 0' }}>
+          {list.map(s => (
+            <StyleCard key={s.id} style={s} selected={selStyle === s.id} onClick={() => { pickStyle(s.id) }} />
+          ))}
+        </div>
+
+        {filterStyles.length > 0 && (
+          <div className={css.field}>
+            <label className={css.fieldLabel}>叠加滤镜（可选）</label>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+              <button type="button" className={`${css.button} ${css.buttonSmall} ${selFilter === '' ? css.buttonPrimary : ''}`} onClick={() => { setSelFilter('') }}>无</button>
+              {filterStyles.map(s => (
+                <button key={s.id} type="button" className={`${css.button} ${css.buttonSmall} ${selFilter === s.id ? css.buttonPrimary : ''}`} onClick={() => { setSelFilter(s.id) }}>{s.name}</button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className={css.field}>
+          <label className={css.fieldLabel}>方案名</label>
+          <input className={css.input} value={planName} placeholder="例如：《保质期》3D 皮克斯版" onChange={e => { setPlanName(e.target.value) }} />
+        </div>
+        {error !== '' && <div className={css.importError}>{error}</div>}
+        <div className={css.row}>
+          <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || selStyle === '' || planName.trim() === ''} onClick={() => { void createPlan() }}>
+            {busy ? '创建中…' : '🎬 创建方案'}
+          </button>
+          <span className={css.meta}>{selStyle !== '' ? `已选：${findStyle(selStyle)?.name ?? selStyle}` : '点击卡片选择基底风格'}</span>
+        </div>
+      </div>
+    )
+  }
+
+  /* ============ 状态B：主工作页 ============ */
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+      {/* 方案切换器 */}
+      <div className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <span className={css.cardTitle}>🎬 {activePlan?.name ?? '漫剧工作台'}</span>
+          <div className={css.row}>
+            <span className={css.badge}>🎨 {activeStyle?.name ?? activePlan?.styleId}</span>
+            {activeFilter !== undefined && <span className={css.badge}>＋{activeFilter.name}</span>}
+            <select
+              className={css.input}
+              style={{ width: 'auto', padding: '4px 8px' }}
+              value={activePlan?.id ?? ''}
+              onChange={async e => { if (await mutate({ op: 'activate', id: e.target.value })) await refresh() }}
+            >
+              {plans.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+            <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={() => { setShowCreate(true); setSelStyle(''); setPlanName('') }}>＋ 新建</button>
+            <button
+              type="button"
+              className={`${css.button} ${css.buttonSmall}`}
+              disabled={busy}
+              onClick={async () => {
+                if (activePlan === null) return
+                if (!window.confirm(`删除方案「${activePlan.name}」？该方案的分镜产出不受影响（骨架共享）。`)) return
+                if (await mutate({ op: 'remove', id: activePlan.id })) {
+                  setSection('roles')
+                  await refresh()
+                }
+              }}
+            >
+              🗑 删除当前方案
+            </button>
+          </div>
+        </div>
+        {/* 三导航 */}
+        <div className={css.row} style={{ gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
+          <button type="button" className={`${css.button} ${css.buttonSmall} ${section === 'roles' ? css.buttonPrimary : ''}`} onClick={() => { setSection('roles') }}>
+            🖼️ 角色（{(project.roles ?? []).length}）
+          </button>
+          <button type="button" className={`${css.button} ${css.buttonSmall} ${section === 'scenes' ? css.buttonPrimary : ''}`} onClick={() => { setSection('scenes') }}>
+            🏞️ 场景（{(project.scenes ?? []).length}）
+          </button>
+          <button type="button" className={`${css.button} ${css.buttonSmall} ${section === 'storyboard' ? css.buttonPrimary : ''}`} onClick={() => { setSection('storyboard') }}>
+            🎬 分镜
+          </button>
+        </div>
+      </div>
+
+      {error !== '' && <div className={css.importError}>{error}</div>}
+
+      {/* ② 角色 */}
+      {section === 'roles' && (
+        <RoleVisualPanel
+          api={api}
+          project={project}
+          refresh={() => refresh()}
+          styleId={activePlan?.styleId}
+          filterId={activePlan?.filterId}
+          imageApiEnabled={imageApiEnabled}
+          onProgress={onProgress}
+        />
+      )}
+
+      {/* ③ 场景（完整版场景库：提炼/采纳/编辑/图集/详情浮窗） */}
+      {section === 'scenes' && (
+        <SceneLibrary
+          api={api}
+          project={project}
+          refresh={() => refresh()}
+          styleId={activePlan?.styleId}
+          filterId={activePlan?.filterId}
+          onProgress={onProgress}
+        />
+      )}
+
+      {/* ④ 分镜 */}
+      {section === 'storyboard' && (
+        <StoryboardTab
+          api={api}
+          project={project}
+          chapters={chapters}
+          onProjectChanged={onProjectChanged}
+          styleId={activePlan?.styleId}
+          filterId={activePlan?.filterId}
+          onProgress={onProgress}
+        />
+      )}
+    </div>
+  )
 }