@waterwx/dsh-novel-forge 1.4.1 → 1.6.0

package/src/client/panel/NovelPanel.tsx

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