@waterwx/dsh-novel-forge 1.7.0 → 1.7.2

package/src/client/panel/MangaRoleLibrary.tsx

@@ -0,0 +1,810 @@
+/**
+ * 漫剧角色库（制作角色投影）：
+ * 从本集分镜提名 → 小说角色库匹配（规则过滤 + LLM 确认两段式）→ 导入建卡。
+ * 独立存储于 project.mangaRoles；sourceRoleName 只读追溯，禁止反向写回小说库。
+ */
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { ImageModelConfig, MangaRoleCandidate, MangaRoleCard, ProjectState } from '../../protocol.ts'
+import css from './panel.module.css'
+
+const CORE_FUNCTIONS: Array<{ id: MangaRoleCard['coreFunction']; label: string }> = [
+  { id: 'protagonist', label: '主角' },
+  { id: 'antagonist', label: '反派' },
+  { id: 'love_interest', label: '感情线' },
+  { id: 'mentor', label: '导师' },
+  { id: 'sidekick', label: '搭档' },
+  { id: 'informant', label: '线人' },
+  { id: 'functional', label: '功能性' },
+]
+
+const RELATIONS: Array<{ id: MangaRoleCard['protagonistRelation']; label: string }> = [
+  { id: 'enemy', label: '敌对' },
+  { id: 'friend', label: '友方' },
+  { id: 'mentor', label: '师徒' },
+  { id: 'lover', label: '情感' },
+  { id: 'exploit', label: '利用' },
+  { id: 'neutral', label: '中立' },
+]
+
+const STATUS_LABEL: Record<MangaRoleCard['status'], string> = {
+  pending_match: '待匹配',
+  pending_confirm: '待确认',
+  imported: '已导入',
+  anchored: '已定妆',
+  archived: '已归档',
+}
+
+const STATUS_CLASS: Record<MangaRoleCard['status'], string> = {
+  pending_match: css.badgePending,
+  pending_confirm: css.badgePending,
+  imported: css.badgeWritten,
+  anchored: css.badgeDone,
+  archived: css.badgePending,
+}
+
+interface Draft {
+  name: string
+  identity: string
+  coreFunction: MangaRoleCard['coreFunction']
+  protagonistRelation: MangaRoleCard['protagonistRelation']
+  speechStyle: string
+  traits: string
+  appearance: string
+  keyScenes: string
+}
+
+const emptyDraft = (): Draft => ({
+  name: '',
+  identity: '',
+  coreFunction: 'functional',
+  protagonistRelation: 'neutral',
+  speechStyle: '',
+  traits: '',
+  appearance: '',
+  keyScenes: '',
+})
+
+const draftFromSuggested = (s: MangaRoleCandidate['suggested']): Draft => ({
+  name: s.name,
+  identity: s.identity,
+  coreFunction: s.coreFunction,
+  protagonistRelation: s.protagonistRelation,
+  speechStyle: s.speechStyle,
+  traits: s.traits.join('、'),
+  appearance: s.appearance,
+  keyScenes: s.keyScenes.join('；'),
+})
+
+const draftFromCard = (c: MangaRoleCard): Draft => ({
+  name: c.name,
+  identity: c.identity,
+  coreFunction: c.coreFunction,
+  protagonistRelation: c.protagonistRelation,
+  speechStyle: c.speechStyle,
+  traits: c.traits.join('、'),
+  appearance: c.appearance,
+  keyScenes: c.keyScenes.join('；'),
+})
+
+/** 草稿 → 漫剧卡（保留已有形象资产；新建时 id 为空由服务端分配）。 */
+const draftToCard = (d: Draft, sourceRoleName: string | undefined, chapterNo: number | undefined, existing?: MangaRoleCard): MangaRoleCard => {
+  const now = new Date().toISOString()
+  const traits = d.traits.split(/[、,，]/).map(t => t.trim()).filter(t => t !== '').slice(0, 3)
+  const keyScenes = d.keyScenes.split(/[；;]/).map(k => k.trim()).filter(k => k !== '').slice(0, 5)
+  const episodes = existing !== undefined
+    ? (chapterNo !== undefined && chapterNo > 0 && !existing.appearsInEpisodes.includes(chapterNo)
+      ? [...existing.appearsInEpisodes, chapterNo].sort((a, b) => a - b)
+      : existing.appearsInEpisodes)
+    : (chapterNo !== undefined && chapterNo > 0 ? [chapterNo] : [])
+  return {
+    id: existing?.id ?? '',
+    sourceRoleName,
+    name: d.name.trim(),
+    identity: d.identity.trim(),
+    coreFunction: d.coreFunction,
+    protagonistRelation: d.protagonistRelation,
+    speechStyle: d.speechStyle.trim(),
+    traits,
+    appearance: d.appearance.trim(),
+    keyScenes,
+    appearsInEpisodes: episodes,
+    status: existing?.status ?? 'imported',
+    imagePrompt: existing?.imagePrompt,
+    expressions: existing?.expressions,
+    promptKit: existing?.promptKit,
+    imageUrl: existing?.imageUrl,
+    gallery: existing?.gallery,
+    promptStyleId: existing?.promptStyleId,
+    createdAt: existing?.createdAt ?? now,
+    updatedAt: now,
+  }
+}
+
+export function MangaRoleLibrary({
+  api,
+  project,
+  refresh,
+  styleId,
+  filterId,
+  imageApiEnabled,
+  imageModels,
+  focus,
+  showCards,
+  onProgress,
+}: {
+  api: NovelApi
+  project: ProjectState | null
+  refresh: () => void | Promise<void>
+  styleId?: string
+  filterId?: string
+  /** 是否启用生图（豆包等出定妆图）。 */
+  imageApiEnabled?: boolean
+  /** 生图模型库（出定妆图时可选择用哪条）。 */
+  imageModels?: ImageModelConfig[]
+  /** 步骤页聚焦：import=展开并滚动到导入区；cards=滚动到已建漫剧卡列表。 */
+  focus?: 'import' | 'cards'
+  /** 是否显示「已建漫剧卡」列表（第⑤步导入页可隐藏，只留导入区）。 */
+  showCards?: boolean
+  onProgress?: (text: string, kind?: 'info' | 'done' | 'error') => void
+}) {
+  const cards = useMemo(() => project?.mangaRoles ?? [], [project?.mangaRoles])
+  /** 已生成过分镜的已写章节（提名入口按章选择）。 */
+  const sbChapters = useMemo(() => {
+    const withSb = new Set((project?.storyboards ?? []).map(e => e.chapterNo))
+    return (project?.chapters ?? [])
+      .filter(c => withSb.has(c.no) && c.status !== 'pending' && c.status !== 'generating' && c.status !== 'error')
+      .sort((a, b) => a.no - b.no)
+  }, [project?.storyboards, project?.chapters])
+
+  const [busy, setBusy] = useState(false)
+  const [actingId, setActingId] = useState('')
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [importOpen, setImportOpen] = useState(false)
+  const [chapterNo, setChapterNo] = useState<number>(0)
+  const [candidates, setCandidates] = useState<MangaRoleCandidate[] | null>(null)
+  const [drafts, setDrafts] = useState<Record<string, Draft>>({})
+  const [chosen, setChosen] = useState<Record<string, string>>({})
+  const [createOpen, setCreateOpen] = useState(false)
+  const [createDraft, setCreateDraft] = useState<Draft>(emptyDraft())
+  const [editId, setEditId] = useState<string | null>(null)
+  const [editDraft, setEditDraft] = useState<Draft | null>(null)
+  /** 定妆图上传目标卡 id（null=未打开）。 */
+  const [uploadTarget, setUploadTarget] = useState<string | null>(null)
+  const [uploadLabel, setUploadLabel] = useState('立绘')
+  /** 豆包生成定妆图时选择的模型条目 id（'' = 用设置中启用的模型）。 */
+  const [imageModelId, setImageModelId] = useState('')
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  /** 步骤页滚动目标（第⑤步导入区 / 第⑥步卡片列表）。 */
+  const headerCardRef = useRef<HTMLDivElement | null>(null)
+  const cardsCardRef = useRef<HTMLDivElement | null>(null)
+
+  // 步骤页聚焦：变化时展开/滚动到对应区域。
+  useEffect(() => {
+    if (focus === 'import') {
+      setImportOpen(true)
+      window.setTimeout(() => { headerCardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }) }, 60)
+    } else if (focus === 'cards') {
+      setImportOpen(false)
+      window.setTimeout(() => { cardsCardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }) }, 60)
+    }
+  }, [focus])
+
+  const notify = (msg: string): void => { setNotice(msg); setTimeout(() => { setNotice('') }, 4000) }
+  const report = (text: string, kind: 'info' | 'done' | 'error' = 'info'): void => { onProgress?.(text, kind) }
+  const setDraft = (key: string, patch: Partial<Draft>): void => {
+    setDrafts(prev => ({ ...prev, [key]: { ...(prev[key] ?? emptyDraft()), ...patch } }))
+  }
+
+  const runNominate = async (): Promise<void> => {
+    if (chapterNo <= 0) return
+    setBusy(true)
+    setError('')
+    report('第' + chapterNo + '章 漫剧角色提名中…')
+    try {
+      const res = await api.mangaRoles({ op: 'nominate', chapterNo })
+      setCandidates(res.candidates ?? null)
+      const d: Record<string, Draft> = {}
+      const c: Record<string, string> = {}
+      for (const cand of res.candidates ?? []) {
+        if (cand.verdict === 'already_imported') continue
+        d[cand.rawName] = draftFromSuggested(cand.suggested)
+        if (cand.matchedRoleName !== undefined) c[cand.rawName] = cand.matchedRoleName
+      }
+      setDrafts(d)
+      setChosen(c)
+      report('第' + chapterNo + '章 漫剧角色提名完成（' + (res.candidates ?? []).length + ' 个候选）', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('第' + chapterNo + '章 漫剧角色提名失败：' + m, 'error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const adoptCandidate = async (cand: MangaRoleCandidate): Promise<void> => {
+    const d = drafts[cand.rawName]
+    if (d === undefined || d.name.trim() === '') {
+      setError('角色名不能为空')
+      return
+    }
+    const source = cand.verdict === 'matched' ? (chosen[cand.rawName] ?? cand.matchedRoleName) : undefined
+    setBusy(true)
+    setError('')
+    report('导入漫剧角色「' + d.name.trim() + '」…')
+    try {
+      const card = draftToCard(d, source, chapterNo)
+      await api.mangaRoles({ op: 'adopt', card })
+      setCandidates(prev => (prev ?? []).filter(x => x.rawName !== cand.rawName))
+      await refresh()
+      report('已导入漫剧角色「' + d.name.trim() + '」', 'done')
+      notify('已导入「' + d.name.trim() + '」——可继续生成形象锚点')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('导入漫剧角色失败：' + m, 'error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const genVisual = async (id: string, name: string): Promise<void> => {
+    setActingId(id)
+    setError('')
+    report('生成「' + name + '」形象锚点…')
+    try {
+      await api.mangaRoles({ op: 'visual', id, styleId, filterId })
+      await refresh()
+      report('已生成「' + name + '」形象锚点', 'done')
+      notify('「' + name + '」已定妆（锚点+精修包已写入）')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('「' + name + '」形象锚点生成失败：' + m, 'error')
+    } finally {
+      setActingId('')
+    }
+  }
+
+  const genKit = async (id: string, name: string): Promise<void> => {
+    setActingId(id)
+    setError('')
+    report('精修「' + name + '」四类生图提示词…')
+    try {
+      await api.mangaRoles({ op: 'promptKit', id, styleId, filterId })
+      await refresh()
+      report('已精修「' + name + '」提示词包', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('「' + name + '」提示词精修失败：' + m, 'error')
+    } finally {
+      setActingId('')
+    }
+  }
+
+  const removeCard = async (c: MangaRoleCard): Promise<void> => {
+    if (!window.confirm('删除漫剧角色「' + c.name + '」？只删漫剧卡，不影响小说角色库与分镜。')) return
+    setActingId(c.id)
+    setError('')
+    try {
+      await api.mangaRoles({ op: 'remove', id: c.id })
+      await refresh()
+      report('已删除漫剧角色「' + c.name + '」', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('删除漫剧角色失败：' + m, 'error')
+    } finally {
+      setActingId('')
+    }
+  }
+
+  /** 定妆图上传：文件 → dataURL → op=image（带标签进图集，立绘同步为参考图）。 */
+  const onUploadFile = async (cardId: string, file: File | null): Promise<void> => {
+    if (file === null) return
+    if (!file.type.startsWith('image/')) {
+      setError('请选择图片文件')
+      return
+    }
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(String(reader.result ?? ''))
+      reader.onerror = () => reject(new Error('读取图片失败'))
+      reader.readAsDataURL(file)
+    })
+    setActingId(cardId)
+    setError('')
+    const label = uploadLabel.trim() !== '' ? uploadLabel.trim() : '立绘'
+    report('上传「' + label + '」定妆图…')
+    try {
+      await api.mangaRoles({ op: 'image', id: cardId, dataUrl, label })
+      setUploadTarget(null)
+      await refresh()
+      report('已上传「' + label + '」定妆图', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('定妆图上传失败：' + m, 'error')
+    } finally {
+      setActingId('')
+    }
+  }
+
+  const removeImage = async (c: MangaRoleCard, label: string): Promise<void> => {
+    setActingId(c.id)
+    setError('')
+    try {
+      await api.mangaRoles({ op: 'removeImage', id: c.id, label: label !== '' ? label : undefined })
+      await refresh()
+      report('已移除「' + c.name + '」的' + (label !== '' ? label + '图' : '参考图'), 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('移除定妆图失败：' + m, 'error')
+    } finally {
+      setActingId('')
+    }
+  }
+
+  /** 豆包等生图接口按形象锚点出定妆图（写回 imageUrl）。 */
+  const genReferenceImage = async (c: MangaRoleCard): Promise<void> => {
+    setActingId(c.id)
+    setError('')
+    report('生成「' + c.name + '」定妆图…')
+    try {
+      await api.mangaRoles({ op: 'imageGenerate', id: c.id, modelId: imageModelId !== '' ? imageModelId : undefined })
+      await refresh()
+      report('已生成「' + c.name + '」定妆图', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('定妆图生成失败：' + m, 'error')
+    } finally {
+      setActingId('')
+    }
+  }
+
+  /** 短剧精简模式开关（5-8 上镜角色 / 功能标签 / 关系闭环 / 人设极致化）。 */
+  const toggleShortDrama = async (): Promise<void> => {
+    setBusy(true)
+    setError('')
+    const next = project?.shortDramaMode !== true
+    report(next ? '开启短剧精简模式…' : '关闭短剧精简模式…')
+    try {
+      await api.mangaRoles({ op: 'mode', shortDramaMode: next })
+      await refresh()
+      report(next ? '已开启短剧精简模式' : '已关闭短剧精简模式', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('切换短剧精简模式失败：' + m, 'error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const createCard = async (): Promise<void> => {
+    if (createDraft.name.trim() === '') {
+      setError('角色名不能为空')
+      return
+    }
+    setBusy(true)
+    setError('')
+    report('新建漫剧角色「' + createDraft.name.trim() + '」…')
+    try {
+      const card = draftToCard(createDraft, undefined, chapterNo > 0 ? chapterNo : undefined)
+      await api.mangaRoles({ op: 'adopt', card })
+      setCreateOpen(false)
+      setCreateDraft(emptyDraft())
+      await refresh()
+      report('已新建漫剧角色「' + card.name + '」', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('新建漫剧角色失败：' + m, 'error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const startEdit = (c: MangaRoleCard): void => {
+    setEditId(c.id)
+    setEditDraft(draftFromCard(c))
+    setError('')
+  }
+
+  const saveEdit = async (): Promise<void> => {
+    if (editId === null || editDraft === null) return
+    if (editDraft.name.trim() === '') {
+      setError('角色名不能为空')
+      return
+    }
+    const existing = cards.find(c => c.id === editId)
+    if (existing === undefined) return
+    setBusy(true)
+    setError('')
+    try {
+      const card = draftToCard(editDraft, existing.sourceRoleName, undefined, existing)
+      await api.mangaRoles({ op: 'update', card })
+      setEditId(null)
+      setEditDraft(null)
+      await refresh()
+      report('已更新漫剧角色「' + card.name + '」', 'done')
+    } catch (err) {
+      const m = (err as Error).message
+      setError(m)
+      report('更新漫剧角色失败：' + m, 'error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  /** 漫剧卡通用编辑字段（提名候选 / 新建 / 编辑共用）。 */
+  const draftFields = (d: Draft, onChange: (patch: Partial<Draft>) => void): ReactNode => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 'var(--nf-space-6)' }}>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>漫剧用名</label>
+        <input className={css.input} value={d.name} onChange={e => onChange({ name: e.target.value })} placeholder="可短剧化改名" />
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>身份一句话</label>
+        <input className={css.input} value={d.identity} onChange={e => onChange({ identity: e.target.value })} placeholder="如：超市收银员" />
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>核心功能</label>
+        <select className={css.input} value={d.coreFunction} onChange={e => onChange({ coreFunction: e.target.value as MangaRoleCard['coreFunction'] })}>
+          {CORE_FUNCTIONS.map(f => <option key={f.id} value={f.id}>{f.label}</option>)}
+        </select>
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>与主角关系</label>
+        <select className={css.input} value={d.protagonistRelation} onChange={e => onChange({ protagonistRelation: e.target.value as MangaRoleCard['protagonistRelation'] })}>
+          {RELATIONS.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
+        </select>
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>性格标签（≤3，顿号分隔）</label>
+        <input className={css.input} value={d.traits} onChange={e => onChange({ traits: e.target.value })} />
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>辨识度外貌点</label>
+        <input className={css.input} value={d.appearance} onChange={e => onChange({ appearance: e.target.value })} />
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>口头禅/说话方式</label>
+        <input className={css.input} value={d.speechStyle} onChange={e => onChange({ speechStyle: e.target.value })} />
+      </div>
+      <div className={css.field}>
+        <label className={css.fieldLabel}>关键剧情节点（；分隔）</label>
+        <input className={css.input} value={d.keyScenes} onChange={e => onChange({ keyScenes: e.target.value })} placeholder="第3章 对峙；第11章 真相" />
+      </div>
+    </div>
+  )
+
+  const shortDrama = project?.shortDramaMode === true
+  const presentFunctions = new Set(cards.map(c => c.coreFunction))
+  const presentRelations = new Set(cards.map(c => c.protagonistRelation))
+
+  if (project === null) {
+    return <div className={css.card}><span className={css.meta}>请先开书或选择一本书，再进入漫剧角色库。</span></div>
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)' }}>
+      <div ref={headerCardRef} className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <span className={css.cardTitle}>🎭 漫剧角色库</span>
+          <div className={css.row} style={{ flexWrap: 'wrap', gap: 'var(--nf-space-6)' }}>
+            <button
+              type="button"
+              className={css.button + ' ' + css.buttonSmall + (shortDrama ? ' ' + css.buttonPrimary : '')}
+              disabled={busy}
+              onClick={() => { void toggleShortDrama() }}
+              title="短剧精简：漫剧角色库按 5-8 上镜角色 / 功能标签 / 关系闭环 / 人设极致化约束"
+            >
+              📺 短剧精简模式：{shortDrama ? '开' : '关'}
+            </button>
+            <button
+              type="button"
+              className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary}
+              disabled={busy}
+              onClick={() => {
+                setImportOpen(!importOpen)
+                if (chapterNo === 0 && sbChapters[0] !== undefined) setChapterNo(sbChapters[0].no)
+                setError('')
+              }}
+            >
+              📥 从本集分镜导入角色
+            </button>
+            <button
+              type="button"
+              className={css.button + ' ' + css.buttonSmall}
+              disabled={busy}
+              onClick={() => { setCreateOpen(!createOpen); setError('') }}
+            >
+              ＋ 直接新建漫剧卡
+            </button>
+          </div>
+        </div>
+        <span className={css.meta}>漫剧角色库 = 上镜角色（要建模/出图/锁一致性）。由分镜提名导入，独立于小说角色库；来源只读追溯、不回写。</span>
+        <span className={css.meta} style={{ display: 'block', marginTop: 'var(--nf-space-2)' }}>流程位置：第⑤⑥步 · 前置：分镜已生成（提名来自分镜 characters）· 下一步：回「分镜」生成视频提示词（重新生成后自动带定妆绑定）</span>
+        {styleId !== undefined && (
+          <span className={css.meta} style={{ display: 'block', marginTop: 'var(--nf-space-4)' }}>
+            🎨 当前方案：{styleId}（锚点/精修按此风格生成）
+          </span>
+        )}
+        {shortDrama && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', marginTop: 'var(--nf-space-8)', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)' }}>
+            <div className={css.row} style={{ flexWrap: 'wrap' }}>
+              <b>📺 短剧精简检查</b>
+              <span className={css.badge + (cards.length >= 5 && cards.length <= 8 ? ' ' + css.badgeDone : ' ' + css.badgePending)}>
+                上镜角色 {cards.length}/5-8
+              </span>
+              {cards.length > 8 && <span className={css.meta}>⚠ 超员：建议把功能性/低戏份角色归档或删除</span>}
+              {cards.length < 5 && cards.length > 0 && <span className={css.meta}>提示：5 人以下张力偏弱，可补关键角色</span>}
+            </div>
+            <div className={css.row} style={{ flexWrap: 'wrap' }}>
+              <span className={css.meta}>功能覆盖：</span>
+              {CORE_FUNCTIONS.filter(f => f.id !== 'functional').map(f => (
+                <span key={f.id} className={css.badge + (presentFunctions.has(f.id) ? ' ' + css.badgeDone : ' ' + css.badgePending)}>
+                  {f.label}{presentFunctions.has(f.id) ? '' : '（缺）'}
+                </span>
+              ))}
+            </div>
+            <div className={css.row} style={{ flexWrap: 'wrap' }}>
+              <span className={css.meta}>关系闭环（与主角）：</span>
+              {RELATIONS.map(r => (
+                <span key={r.id} className={css.badge + (presentRelations.has(r.id) ? ' ' + css.badgeDone : ' ' + css.badgePending)}>
+                  {r.label}{presentRelations.has(r.id) ? '' : '（缺）'}
+                </span>
+              ))}
+            </div>
+            <span className={css.meta}>人设极致化：提名只保留上镜角色；锚点/精修已注入「性格标签极致化、1-2 个最强辨识度外貌点」提示。</span>
+          </div>
+        )}
+        {error !== '' && <div className={css.importError}>{error}</div>}
+        {notice !== '' && <span className={css.meta} style={{ color: 'var(--nf-accent)' }}>{notice}</span>}
+
+        {importOpen && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', marginTop: 'var(--nf-space-10)', borderTop: '1px solid var(--nf-border)', paddingTop: 'var(--nf-space-10)' }}>
+            <div className={css.row} style={{ flexWrap: 'wrap', alignItems: 'flex-end' }}>
+              <div className={css.field} style={{ flex: 1, minWidth: 220 }}>
+                <label className={css.fieldLabel}>选择已生成分镜的章节</label>
+                <select
+                  className={css.input}
+                  value={chapterNo === 0 ? '' : chapterNo}
+                  onChange={e => { setChapterNo(Number(e.target.value)); setCandidates(null); setError('') }}
+                >
+                  {sbChapters.length === 0 && <option value="">（没有已生成分镜的章节）</option>}
+                  {sbChapters.map(c => <option key={c.no} value={c.no}>第{c.no}章 {c.title}</option>)}
+                </select>
+              </div>
+              <button type="button" className={css.button + ' ' + css.buttonPrimary} disabled={busy || chapterNo <= 0} onClick={() => { void runNominate() }}>
+                {busy ? '提名中…' : '🔍 提名角色（规则过滤 + LLM 确认）'}
+              </button>
+            </div>
+            <span className={css.meta}>流程：从本章分镜的结构化 characters 提名 → 与小说角色库匹配 → 确认后导入为漫剧卡。</span>
+
+            {candidates !== null && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', marginTop: 'var(--nf-space-6)' }}>
+                <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+                  <b>提名候选（{candidates.length}）</b>
+                  <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { setCandidates(null) }}>收起</button>
+                </div>
+                {candidates.length === 0 && <span className={css.meta}>该章分镜的角色已全部导入漫剧角色库。</span>}
+                {candidates.map(cand => {
+                  if (cand.verdict === 'already_imported') {
+                    return (
+                      <div key={cand.rawName} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'center', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-6) var(--nf-space-10)', opacity: 0.65 }}>
+                        <b>{cand.rawName}</b>
+                        <span className={css.badge + ' ' + css.badgeDone}>已导入</span>
+                      </div>
+                    )
+                  }
+                  const d = drafts[cand.rawName] ?? emptyDraft()
+                  const isMatched = cand.verdict === 'matched'
+                  const isAmbiguous = cand.verdict === 'ambiguous'
+                  return (
+                    <div key={cand.rawName} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)' }}>
+                      <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                        <b>🎭 {cand.rawName}</b>
+                        {isMatched && <span className={css.badge + ' ' + css.badgeDone}>✓ 匹配：{chosen[cand.rawName] ?? cand.matchedRoleName ?? ''}</span>}
+                        {isAmbiguous && <span className={css.badge + ' ' + css.badgePending}>？多个候选待定</span>}
+                        {cand.verdict === 'not_in_library' && cand.novelHint === 'backfill' && (
+                          <span className={css.badge + ' ' + css.badgePending}>⚠ 小说库未收录（正文有此称谓）</span>
+                        )}
+                        {cand.verdict === 'not_in_library' && cand.novelHint !== 'backfill' && (
+                          <span className={css.badge}>＋ 漫剧新增角色</span>
+                        )}
+                      </div>
+                      {(isMatched || isAmbiguous) && cand.matches.length > 1 && (
+                        <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                          <span className={css.meta}>命中角色：</span>
+                          <select
+                            className={css.input}
+                            style={{ width: 'auto', padding: 'var(--nf-space-4) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}
+                            value={chosen[cand.rawName] ?? ''}
+                            onChange={e => { setChosen(prev => ({ ...prev, [cand.rawName]: e.target.value })) }}
+                          >
+                            {cand.matches.map(m => <option key={m.roleName} value={m.roleName}>{m.roleName}（{m.reason}）</option>)}
+                          </select>
+                        </div>
+                      )}
+                      {cand.verdict === 'not_in_library' && cand.novelHint === 'backfill' && (
+                        <span className={css.meta}>
+                          提示：正文出现过「{cand.rawName}」但小说角色库没提炼到——可先去左侧「角色库」补提炼再重新提名；或直接以漫剧新增角色建卡。
+                        </span>
+                      )}
+                      {draftFields(d, patch => { setDraft(cand.rawName, patch) })}
+                      <div className={css.row}>
+                        <button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={busy} onClick={() => { void adoptCandidate(cand) }}>
+                          📥 导入为漫剧卡
+                        </button>
+                        <span className={css.meta}>导入后可在下方卡片继续生成形象锚点</span>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )}
+
+        {createOpen && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-8)', marginTop: 'var(--nf-space-10)', borderTop: '1px solid var(--nf-border)', paddingTop: 'var(--nf-space-10)' }}>
+            <b>＋ 新建漫剧卡（不关联小说角色库）</b>
+            {draftFields(createDraft, patch => { setCreateDraft(prev => ({ ...prev, ...patch })) })}
+            <div className={css.row}>
+              <button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={busy} onClick={() => { void createCard() }}>
+                💾 保存漫剧卡
+              </button>
+              <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { setCreateOpen(false) }}>取消</button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {showCards !== false && (
+      <div ref={cardsCardRef} className={css.card}>
+        <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <b>已建漫剧卡（{cards.length}）</b>
+          <span className={css.meta}>{cards.filter(c => c.status === 'anchored').length} 张已定妆</span>
+        </div>
+        {cards.length === 0 && (
+          <div className={css.meta} style={{ marginTop: 'var(--nf-space-8)' }}>
+            还没有漫剧角色卡。点上方「从本集分镜导入角色」从分镜提名导入，或「直接新建」。
+          </div>
+        )}
+        {cards.map(c => {
+          const editing = editId === c.id
+          const styleMismatch = styleId !== undefined && c.promptStyleId !== undefined && c.promptStyleId !== styleId
+          return (
+            <div key={c.id} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-10)', marginTop: 'var(--nf-space-8)' }}>
+              <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                <b>🎭 {c.name}</b>
+                <span className={css.badge + ' ' + (STATUS_CLASS[c.status] ?? '')}>{STATUS_LABEL[c.status]}</span>
+                <span className={css.badge}>{CORE_FUNCTIONS.find(f => f.id === c.coreFunction)?.label ?? c.coreFunction}</span>
+                <span className={css.badge}>{RELATIONS.find(r => r.id === c.protagonistRelation)?.label ?? c.protagonistRelation}</span>
+                <span className={css.meta}>{c.appearsInEpisodes.length > 0 ? '上场：' + c.appearsInEpisodes.map(n => '第' + n + '集').join('、') : '尚未标记上场'}</span>
+                {c.sourceRoleName !== undefined && <span className={css.meta}>来源：{c.sourceRoleName}</span>}
+              </div>
+              {styleMismatch && (
+                <span className={css.meta} style={{ color: 'var(--nf-warn, #b45309)' }}>
+                  ⚠ 提示词风格（{c.promptStyleId}）与当前方案（{styleId}）不一致，重生成锚点/精修可对齐。
+                </span>
+              )}
+              {editing && editDraft !== null ? (
+                <>
+                  {draftFields(editDraft, patch => { setEditDraft(prev => (prev === null ? prev : { ...prev, ...patch })) })}
+                  <div className={css.row}>
+                    <button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={busy} onClick={() => { void saveEdit() }}>💾 保存</button>
+                    <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { setEditId(null); setEditDraft(null) }}>取消</button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  {c.identity !== '' && <span>身份：{c.identity}</span>}
+                  {c.traits.length > 0 && (
+                    <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                      <span className={css.meta}>性格：</span>
+                      {c.traits.map(t => <span key={t} className={css.badge}>{t}</span>)}
+                    </div>
+                  )}
+                  {c.appearance !== '' && <span className={css.meta}>外貌点：{c.appearance}</span>}
+                  {c.speechStyle !== '' && <span className={css.meta}>说话：{c.speechStyle}</span>}
+                  {c.keyScenes.length > 0 && <span className={css.meta}>关键剧情：{c.keyScenes.join('；')}</span>}
+                  {c.imagePrompt !== undefined && (
+                    <div className={css.importPreview} style={{ marginTop: 'var(--nf-space-4)' }}>
+                      <span className={css.meta}>🎨 锚点（{c.imagePrompt.zh.length} 字）：</span>
+                      <span>{c.imagePrompt.zh.slice(0, 140)}{c.imagePrompt.zh.length > 140 ? '…' : ''}</span>
+                    </div>
+                  )}
+                  {c.promptKit !== undefined && (
+                    <span className={css.meta}>✨ 精修包：立绘/四视图/表情×{c.promptKit.expressions.length}/细节</span>
+                  )}
+                  {c.imageUrl !== undefined && (
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--nf-space-8)', alignItems: 'flex-start' }}>
+                      <img src={c.imageUrl} alt={c.name + ' 定妆图'} style={{ maxHeight: 110, borderRadius: 'var(--nf-radius-8)', border: '1px solid var(--nf-border)' }} />
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)' }}>
+                        <span className={css.meta}>🖼 参考图（定妆图，分镜出图时按卡绑定）</span>
+                        <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { void removeImage(c, '') }}>移除参考图</button>
+                      </div>
+                    </div>
+                  )}
+                  {c.gallery !== undefined && c.gallery.length > 0 && (
+                    <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                      <span className={css.meta}>🖼 图集：</span>
+                      {c.gallery.map(g => (
+                        <span key={g.label} className={css.badge}>
+                          {g.label}
+                          <button type="button" style={{ marginLeft: 'var(--nf-space-4)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--nf-text)' }} onClick={() => { void removeImage(c, g.label) }}>✕</button>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  {uploadTarget === c.id ? (
+                    <div className={css.row} style={{ flexWrap: 'wrap', alignItems: 'flex-end' }}>
+                      <div className={css.field} style={{ minWidth: 140 }}>
+                        <label className={css.fieldLabel}>用途标签</label>
+                        <input className={css.input} value={uploadLabel} onChange={e => { setUploadLabel(e.target.value) }} placeholder="立绘/四视图/表情-xx" />
+                      </div>
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept="image/*"
+                        style={{ display: 'none' }}
+                        onChange={e => { void onUploadFile(c.id, e.target.files?.[0] ?? null); e.target.value = '' }}
+                      />
+                      <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={actingId === c.id} onClick={() => { fileInputRef.current?.click() }}>
+                        {actingId === c.id ? '上传中…' : '📤 选择图片上传'}
+                      </button>
+                      <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { setUploadTarget(null) }}>取消</button>
+                    </div>
+                  ) : (
+                    <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                      <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { setUploadTarget(c.id); setUploadLabel('立绘') }}>🖼 上传定妆图</button>
+                      {(imageModels ?? []).length > 1 && (
+                        <select
+                          className={css.input}
+                          style={{ width: 'auto', padding: 'var(--nf-space-4) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}
+                          value={imageModelId}
+                          onChange={e => { setImageModelId(e.target.value) }}
+                        >
+                          <option value="">（默认生图模型）</option>
+                          {imageModels?.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
+                        </select>
+                      )}
+                      <button
+                        type="button"
+                        className={css.button + ' ' + css.buttonSmall}
+                        disabled={actingId === c.id || c.imagePrompt === undefined || imageApiEnabled !== true}
+                        title={c.imagePrompt === undefined ? '先生成形象锚点' : imageApiEnabled !== true ? '生图未启用（设置中配置）' : '按形象锚点出定妆图'}
+                        onClick={() => { void genReferenceImage(c) }}
+                      >
+                        {actingId === c.id ? '生成中…' : '⚡ 生成定妆图'}
+                      </button>
+                    </div>
+                  )}
+                  <div className={css.row} style={{ flexWrap: 'wrap' }}>
+                    <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={actingId === c.id} onClick={() => { void genVisual(c.id, c.name) }}>
+                      {actingId === c.id ? '生成中…' : '🎨 生成形象锚点'}
+                    </button>
+                    <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={actingId === c.id || c.imagePrompt === undefined} onClick={() => { void genKit(c.id, c.name) }}>
+                      ✨ 精修提示词
+                    </button>
+                    <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => { startEdit(c) }}>✏️ 编辑</button>
+                    <button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonDanger} disabled={actingId === c.id} onClick={() => { void removeCard(c) }}>🗑 删除</button>
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+      )}
+    </div>
+  )
+}