feat(core): 基础资产页按流程文档补完 step4(人物/场景详情+演员库+三视图绑定立绘)

人物/场景: - 卡片可点开详情弹窗:立绘大图(hover 右下角下载/查看大图)+ 立绘版本切换 + 提示词重跑(覆盖卡片立绘,归入同角色)+ 应用到当前项目;场景详情不显示三视图 - 进入基础资产自动生成脚本提取的待生成人物/场景(带 loading),每项目一次 - 「替换」→ 演员库 replace 回填;人物区头部「演员库」入口三视图:与「某一版立绘」1:1 绑定(metadata.triview_of=立绘组id) - 生成/重跑立绘 → 链式据该立绘 image_edit 出配套三视图(锁角色一致性) - 详情切换立绘版本 → 三视图跟着切;可据当前立绘再出多版,下方版本小图可切 - 后端 generate_person_triview + 端点 generate-triview,复用 model_library 三视图 SOP 商品三视图弹窗:记录版本、切换查看、重跑生成、采用此版本演员库(新建 components/actor-library.tsx 覆盖层): - 平台预设演员 / 我的演员两 tab + 添加演员工作台(AI 生成 / 本地上传保存) - 替换基础资产卡:新增后端 attach-base-asset(把现有资产挂为候选并采用) 合并 dev 进来的火山真人审核绿/红盾到新的实体卡。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-17 12:00:56 +08:00
parent b30eaed838
commit a9b7f077b9
7 changed files with 690 additions and 73 deletions
@@ -7,6 +7,7 @@ import type { Notice, Page } from "./route-config";
 import { money, stageOrder, statusPill } from "./stage-config";
 import { CornerMarks, Decorations, Sidebar, ToastLike } from "../components/app-shell";
 import { MediaLightbox, useBodyScrollLock } from "../components/overlays";
+import { ActorLibrary } from "../components/actor-library";
 import { IconKitSvg } from "../components/IconKitSvg";

 // 真实资产缩略图注入:与全站一致用 --mock-media-url(.placeholder.has-mock-media 负责 cover 裁切 + 8px 圆角)
@@ -373,8 +374,14 @@ export function PipelinePage(props: {
  onSaveProjectMeta?: (meta: Record<string, unknown>) => Promise<unknown>;
  onAdoptVideoVersion: (segmentId: string, versionId: string) => Promise<unknown>;
  onGenerateVoiceover: (payload: { items: Array<{ index: number; text: string }>; voice_type?: string }) => Promise<unknown>;
-  onGenerateBaseAsset: (kind: "product" | "person" | "scene", prompt: string, label?: string) => void;
+  onGenerateBaseAsset: (kind: "product" | "person" | "scene", prompt: string, label?: string) => void | Promise<unknown>;
  onAdoptBaseAsset: (groupId: string, assetId: string) => void | Promise<unknown>;
+  // 流程步骤4 · 演员库:用现有资产替换基础资产卡 / AI 生成演员 / 本地上传演员
+  onAttachBaseAsset: (groupId: string, assetId: string) => void | Promise<unknown>;
+  onGenerateActor: (prompt: string) => Promise<{ assets: Asset[] } | null>;
+  onUploadActor: (file: File) => Promise<unknown>;
+  // 流程步骤4 · 据某一版立绘生成它配套的三视图(三视图与立绘 1:1 绑定)
+  onGenerateTriview: (portraitGroupId: string) => Promise<{ id: string } | null>;
  onGenerateStoryboard: (prompt: string) => void;
  onSkipStoryboard: () => Promise<unknown>;
  onSubmitVideo: (segmentId: string, prompt: string) => void;
@@ -391,7 +398,7 @@ export function PipelinePage(props: {
  const {
    project, loading, navigate, user, team, products, projects, assets, billing, notice, unreadCount, avatarChar, logout,
    scriptModelName, textModels, onGenerateScript, onAdoptScript, onUpdateShot, onAddShot, onDeleteShot, onRerunShot, onSaveProjectMeta, onAdoptVideoVersion, onGenerateVoiceover,
-    onGenerateBaseAsset, onAdoptBaseAsset, onGenerateStoryboard, onSkipStoryboard,
+    onGenerateBaseAsset, onAdoptBaseAsset, onAttachBaseAsset, onGenerateActor, onUploadActor, onGenerateTriview, onGenerateStoryboard, onSkipStoryboard,
    onSubmitVideo, onSubmitAllVideos, onPollVideosQuiet, exportResult, onRefreshExport, onRefreshProject,
    onUploadVideoSegment, onUploadBgm, onSaveTimeline, onSubmitExport
  } = props;
@@ -481,8 +488,9 @@ export function PipelinePage(props: {
  const [assetTab, setAssetTab] = useState<"product" | "person" | "scene">("product");
  // 行38 · 资产卡可编辑提示词(本地草稿,按 group id 覆盖原 prompt;重跑/替换时带上)
  const [assetPromptDraft, setAssetPromptDraft] = useState<Record<string, string>>({});
-  // 行39 · AI 生成三视图弹窗:打开后从该商品组选择采用哪个候选三视图(没有也可跑视频)
+  // 行39 · AI 生成三视图弹窗:记录每次生成的三视图版本(每次生成=一个 product group),可切换查看 + 重跑 + 采用
  const [triViewOpen, setTriViewOpen] = useState(false);
+  const [triSelId, setTriSelId] = useState<string | null>(null); // 弹窗里当前选中查看/采用的三视图版本(product group id)
  useBodyScrollLock(triViewOpen);
  function jumpAssetSection(kind: "product" | "person" | "scene") {
    setAssetTab(kind);
@@ -491,6 +499,119 @@ export function PipelinePage(props: {
    }
  }

+  // ── 流程步骤4 · 人物/场景「实体」聚合(前端优先):后端每次生成新建一个 group,
+  // 这里把同一脚本标签(metadata.label)的多个 group 合成「一个角色的多版本立绘」。
+  // 三视图与「某一版立绘」1:1 绑定:三视图组带 metadata.triview_of=<立绘组id>,从主网格过滤掉。
+  type BaseGroup = (typeof groups)[number];
+  const triviewOf = (g?: BaseGroup | null): string => (g?.metadata?.triview_of as string) || "";
+  const isTriview = (g: BaseGroup) => Boolean(triviewOf(g));
+  // 某一版立绘(portraitGroupId)配套的三视图版本(按 created_at 升序,新的在后)
+  function triviewsFor(portraitGroupId: string): BaseGroup[] {
+    return groupsByKind("person").filter((g) => triviewOf(g) === portraitGroupId);
+  }
+  type AssetEntity = { key: string; label: string; name: string; kind: "person" | "scene"; portraits: BaseGroup[] };
+  // 聚合一个 kind 下的实体列表(立绘按 label 合并版本;无 label 的各自独立成卡;三视图组不计入)
+  function buildEntities(kind: "person" | "scene"): AssetEntity[] {
+    const portraits = groupsByKind(kind).filter((g) => !isTriview(g));
+    const map = new Map<string, { key: string; label: string; portraits: BaseGroup[] }>();
+    for (const g of portraits) {
+      const label = (g.metadata?.label || "").trim();
+      const key = label || g.id;
+      if (!map.has(key)) map.set(key, { key, label, portraits: [] });
+      map.get(key)!.portraits.push(g);
+    }
+    return [...map.values()].map((e, i) => {
+      const name = e.label || assetName(e.portraits.at(-1)?.adopted_asset) || `${KIND_LABEL[kind]} ${i + 1}`;
+      return { key: e.key, label: e.label, name, kind, portraits: e.portraits };
+    });
+  }
+
+  // 行38/流程步骤4 · 单卡生成 loading:action() 全局串行,这里只记「当前哪张卡在生成」做局部转圈
+  const [genBusyKey, setGenBusyKey] = useState<string | null>(null);
+  async function genBaseAsset(kind: "product" | "person" | "scene", prompt: string, label: string | undefined, busyKey: string): Promise<{ id?: string } | null> {
+    if (genBusyKey) return null; // 全局一次只跑一张(后端同步出图,串行更省心)
+    setGenBusyKey(busyKey);
+    try {
+      return (await onGenerateBaseAsset(kind, prompt, label)) as { id?: string } | null;
+    } finally {
+      setGenBusyKey(null);
+    }
+  }
+  // 据某一版立绘生成它配套的三视图(loading 用 busyKey)
+  async function genTriview(portraitGroupId: string, busyKey: string): Promise<{ id: string } | null> {
+    if (genBusyKey) return null;
+    setGenBusyKey(busyKey);
+    try {
+      return await onGenerateTriview(portraitGroupId);
+    } finally {
+      setGenBusyKey(null);
+    }
+  }
+  // 流程步骤4 · 生成立绘后链式配套三视图(人物专用):新立绘 → 据它生成新三视图
+  async function genPersonWithTri(prompt: string, label: string | undefined, busyKey: string) {
+    const g = await genBaseAsset("person", prompt, label, busyKey);
+    if (g?.id) await genTriview(g.id, `${busyKey}:tri`);
+    return g;
+  }
+  // 资产图片下载(经同源代理取 blob,避开 TOS 跨域 + 强制下载而非新开标签)
+  async function downloadAssetImage(assetId: string, name: string) {
+    try {
+      const blob = await api.fetchAssetBlob(assetId);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${name || "asset"}.png`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 4000);
+    } catch { /* 取流失败忽略 */ }
+  }
+
+  // ── 流程步骤4 · 人物/场景详情弹窗:立绘 + 三视图(人物)+ 提示词重获 + 版本历史 + 应用到当前项目 ──
+  const [adDetail, setAdDetail] = useState<{ kind: "person" | "scene"; key: string } | null>(null);
+  const [adPortraitId, setAdPortraitId] = useState<string | null>(null); // 当前查看的立绘 group
+  const [adTriId, setAdTriId] = useState<string | null>(null);           // 当前查看的三视图 group
+  const [adPrompt, setAdPrompt] = useState("");
+  useBodyScrollLock(Boolean(adDetail));
+  function openAssetDetail(kind: "person" | "scene", entity: AssetEntity) {
+    setAdDetail({ kind, key: entity.key });
+    setAdPortraitId(entity.portraits.at(-1)?.id ?? null);
+    setAdTriId(null); // 跟随当前立绘的最新三视图
+    setAdPrompt(entity.portraits.at(-1)?.prompt ?? "");
+  }
+  // 流程步骤4 · 演员库覆盖层:replace 模式带要替换的实体最新立绘组(选演员后挂为候选并采用)
+  const [actorLib, setActorLib] = useState<{ mode: "browse" | "replace"; groupId?: string } | null>(null);
+  function openActorReplace(entity: AssetEntity) {
+    const gid = entity.portraits.at(-1)?.id;
+    if (gid) setActorLib({ mode: "replace", groupId: gid });
+  }
+  async function pickActor(assetId: string) {
+    if (actorLib?.mode === "replace" && actorLib.groupId) await onAttachBaseAsset(actorLib.groupId, assetId);
+    setActorLib(null);
+  }
+  useEffect(() => {
+    if (!adDetail) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setAdDetail(null); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [adDetail]);
+  // 流程步骤4 · 人物三视图「据当前查看的那一版立绘自动生成」:该立绘还没三视图就自动据它生成一版(每立绘组仅一次)
+  const triAutoRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    if (!adDetail || adDetail.kind !== "person" || genBusyKey) return;
+    const ent = buildEntities("person").find((e) => e.key === adDetail.key);
+    if (!ent || !ent.portraits.length) return;
+    const portrait = ent.portraits.find((g) => g.id === adPortraitId) || ent.portraits.at(-1)!;
+    if (!portrait.adopted_asset || triviewsFor(portrait.id).length) return;
+    if (triAutoRef.current.has(portrait.id)) return;
+    triAutoRef.current.add(portrait.id);
+    void genTriview(portrait.id, `addet-tri:${ent.key}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adDetail, adPortraitId]);
+  // 进入基础资产自动生成的「已触发」哨兵(实际副作用在 productName/viewStage 定义后挂载)
+  const autoGenRef = useRef(false);
+
  // ── Stage 3:默认展示已采用(is_adopted)版本;点历史缩略图可切换查看任一版本 ──
  const storyboards = project.storyboard_versions ?? [];
  const adoptedStoryboard = storyboards.find((s) => s.is_adopted) || storyboards[0] || null;
@@ -1698,6 +1819,37 @@ export function PipelinePage(props: {
  const productName = productRecord?.title || "透真补水面膜";
  const productCover = productRecord?.cover_asset || productRecord?.images?.find((img) => img.is_primary)?.asset || productRecord?.images?.[0]?.asset || null;

+  // 流程步骤4 · 进入基础资产自动生成脚本里提取出、但还没生成的人物/场景占位卡(每项目仅一次)
+  useEffect(() => {
+    if (activeDot !== 2 && viewStage !== 2) return;
+    if (autoGenRef.current || genBusyKey) return;
+    const flagKey = `airshelf:autogen:${project.id}`;
+    try { if (localStorage.getItem(flagKey)) { autoGenRef.current = true; return; } } catch { /* ignore */ }
+    const pending: Array<{ kind: "person" | "scene"; tag: string; prompt: string }> = [];
+    (["person", "scene"] as const).forEach((kind) => {
+      const tags = kind === "person" ? (project.metadata?.cast ?? []) : (project.metadata?.scenes ?? []);
+      const generated = new Set(groupsByKind(kind).map((g) => (g.metadata?.label || "").trim()).filter(Boolean));
+      const promptMap = (kind === "person" ? project.metadata?.cast_prompts : project.metadata?.scene_prompts) || {};
+      tags.filter((t) => !generated.has(t)).forEach((tag) => {
+        const fallback = kind === "person"
+          ? `${tag},真人模特出镜,自然光,${productName} 上身展示,9:16 竖屏`
+          : `${tag},使用场景,氛围统一,干净构图,9:16 竖屏`;
+        pending.push({ kind, tag, prompt: promptMap[tag]?.trim() || fallback });
+      });
+    });
+    if (!pending.length) return;
+    autoGenRef.current = true;
+    try { localStorage.setItem(flagKey, "1"); } catch { /* ignore */ }
+    void (async () => {
+      for (const item of pending) {
+        const bk = `seed:${item.kind}:${item.tag}`;
+        if (item.kind === "person") await genPersonWithTri(item.prompt, item.tag, bk);
+        else await genBaseAsset(item.kind, item.prompt, item.tag, bk);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeDot, viewStage, project.id]);
+
  function goStage(n: number) {
    setViewStage(n);
    setNavigated(true);
@@ -2059,10 +2211,13 @@ export function PipelinePage(props: {

          {/* ============= STAGE 2 · 基础资产(真实 base_asset_groups,按 kind 分组)============= */}
          {viewStage === 2 && (() => {
-            // 取最新一组(groups 已按 created_at 升序):重新生成三视图后展示新结果而不是第一次的旧组
-            const productGroup = groupsByKind("product").at(-1) || null;
-            const productAssetUrl = groupMainUrl(productGroup) || assetUrl(productCover);
-            const productCandidates = (productGroup?.candidate_assets ?? []).filter((id) => id !== productGroup?.adopted_asset);
+            // 流程步骤4 · 每次生成三视图 = 一个新 product group;聚合成「版本列表」,可切换 + 重跑 + 采用
+            const productGroups = groupsByKind("product").filter((g) => g.adopted_asset);
+            const latestTri = productGroups.at(-1) || null;
+            const productAssetUrl = groupMainUrl(latestTri) || assetUrl(productCover);
+            const hasTriView = productGroups.length > 0;
+            const triViewGen = `${productName} 商品三视图,从左到右:正面 / 侧面 / 背面,统一光照,白色背景,16:9`;
+            const triSelGroup = productGroups.find((g) => g.id === triSelId) || latestTri;
            return (
            <section className="stage active" data-stage-pane="2">
              <div className="stage-assets">
@@ -2089,9 +2244,9 @@ export function PipelinePage(props: {
                  <section className="asset-sec" id="asset-sec-product">
                    <div className="sec-h"><h3>商品 · <span id="asset-prod-name">{productName}</span></h3><span className="spacer"></span></div>
                    <div className="prod-row">
-                      <div className="asset-card-2 prod-lib-card" data-asset-kind="product" data-asset-id={productGroup?.adopted_asset || "prod-main"} id="asset-prod-card">
+                      <div className="asset-card-2 prod-lib-card" data-asset-kind="product" data-asset-id={latestTri?.adopted_asset || "prod-main"} id="asset-prod-card">
                        <div className={`placeholder prod-thumb${productAssetUrl ? " has-mock-media" : ""}`} style={productAssetUrl ? mediaStyle(productAssetUrl) : undefined}>
-                          {!productGroup?.adopted_asset && (
+                          {!hasTriView && (
                            <span className="tri-missing-badge" id="asset-prod-tri-badge" tabIndex={0} role="button" aria-label="缺三视图,查看说明">
                              <span className="ico" aria-hidden="true"></span>
                              <span className="lbl-mono">缺三视图</span>
@@ -2120,12 +2275,12 @@ export function PipelinePage(props: {
                          </button>
                        </div>
                      </div>
-                      <div className={`prod-preview${productCandidates.length ? " show" : ""}`} id="asset-prod-preview">
-                        <div className="prod-preview-h">// 候选三视图 · <span id="prod-preview-status">{productCandidates.length} 张</span></div>
-                        <div className={`placeholder prod-preview-img${candUrl(productGroup, productCandidates[0]) ? " has-mock-media" : ""}`} id="prod-preview-img" role={productGroup && productCandidates[0] ? "button" : undefined} tabIndex={productGroup && productCandidates[0] ? 0 : undefined} title={productGroup && productCandidates[0] ? "点击采用此候选" : undefined} style={candUrl(productGroup, productCandidates[0]) ? { ...mediaStyle(candUrl(productGroup, productCandidates[0])), cursor: "pointer" } : undefined} onClick={productGroup && productCandidates[0] ? () => onAdoptBaseAsset(productGroup.id, productCandidates[0]) : undefined}><span className="ph-frame">候选 #1</span></div>
+                      <div className={`prod-preview${hasTriView ? " show" : ""}`} id="asset-prod-preview">
+                        <div className="prod-preview-h">// 三视图版本 · <span id="prod-preview-status">{productGroups.length} 版</span></div>
+                        <div className={`placeholder prod-preview-img${groupMainUrl(latestTri) ? " has-mock-media" : ""}`} id="prod-preview-img" role={latestTri ? "button" : undefined} tabIndex={latestTri ? 0 : undefined} title={latestTri ? "点击查看 / 切换版本" : undefined} style={groupMainUrl(latestTri) ? { ...mediaStyle(groupMainUrl(latestTri)), cursor: "pointer" } : undefined} onClick={latestTri ? () => { setTriSelId(latestTri.id); setTriViewOpen(true); } : undefined}><span className="ph-frame">最新版</span></div>
                        <div className="prod-preview-foot" id="prod-preview-foot">
-                          {productCandidates.slice(0, 4).map((id) => (
-                            <div className={`placeholder${candUrl(productGroup, id) ? " has-mock-media" : ""}`} key={id} role="button" tabIndex={0} title="点击采用此候选" style={{ ...(candUrl(productGroup, id) ? mediaStyle(candUrl(productGroup, id)) : {}), width: "44px", height: "44px", flex: "0 0 44px", cursor: "pointer" }} onClick={productGroup ? () => onAdoptBaseAsset(productGroup.id, id) : undefined}><span className="ph-frame"></span></div>
+                          {[...productGroups].reverse().slice(0, 4).map((g) => (
+                            <div className={`placeholder${groupMainUrl(g) ? " has-mock-media" : ""}`} key={g.id} role="button" tabIndex={0} title="点击查看该版本" style={{ ...(groupMainUrl(g) ? mediaStyle(groupMainUrl(g)) : {}), width: "44px", height: "44px", flex: "0 0 44px", cursor: "pointer" }} onClick={() => { setTriSelId(g.id); setTriViewOpen(true); }}><span className="ph-frame"></span></div>
                          ))}
                        </div>
                      </div>
@@ -2133,7 +2288,8 @@ export function PipelinePage(props: {
                  </section>

                  {(["person", "scene"] as const).map((kind) => {
-                    const list = groupsByKind(kind);
+                    // 流程步骤4 · 把同一脚本标签的多个 group 合成「一个角色 + 多版本立绘」实体
+                    const entities = buildEntities(kind);
                    // 流程步骤4 · 人物←脚本提取的人物标签,场景←场景标签;提示词用脚本提取时 AI 生成的(metadata.*_prompts)
                    const tags = kind === "person" ? castTags : sceneTags;
                    const promptMap = (kind === "person" ? project.metadata?.cast_prompts : project.metadata?.scene_prompts) || {};
@@ -2141,31 +2297,38 @@ export function PipelinePage(props: {
                      ? `${tag},真人模特出镜,自然光,${productName} 上身展示,9:16 竖屏`
                      : `${tag},使用场景,氛围统一,干净构图,9:16 竖屏`;
                    const tagPrompt = (tag: string) => (promptMap[tag]?.trim() || fallbackPrompt(tag));
-                    // 已生成的标签(按 group.metadata.label 归类),其余标签显示为「待生成」seed 卡
-                    const generatedLabels = new Set(list.map((g) => g.metadata?.label).filter(Boolean) as string[]);
+                    // 已生成的标签(实体 label),其余脚本标签显示为「待生成」seed 卡(自动生成会逐个补齐)
+                    const generatedLabels = new Set(entities.map((e) => e.label).filter(Boolean));
                    const pendingTags = tags.filter((t) => !generatedLabels.has(t));
                    const genPrompt = kind === "person"
                      ? `${productName} 真人模特出镜,自然光,商品上身展示,9:16 竖屏`
                      : `${productName} 使用场景,氛围统一,干净构图,9:16 竖屏`;
+                    const customBusy = `custom:${kind}`;
                    return (
                      <section className="asset-sec" id={`asset-sec-${kind}`} key={kind}>
                        <div className="sec-h">
-                          <h3>{KIND_LABEL[kind]} · {list.length}{tags.length ? ` / ${tags.length}` : ""} 个</h3>
+                          <h3>{KIND_LABEL[kind]} · {entities.length}{tags.length ? ` / ${tags.length}` : ""} 个</h3>
                          <span className="spacer"></span>
-                          <button className="btn-aigen" type="button" data-stop disabled={loading} onClick={() => onGenerateBaseAsset(kind, genPrompt)}>
+                          {kind === "person" && <button className="btn btn-ghost btn-sm" type="button" data-stop style={{ marginRight: 8 }} onClick={() => setActorLib({ mode: "browse" })}>演员库</button>}
+                          <button className="btn-aigen" type="button" data-stop disabled={Boolean(genBusyKey)} onClick={() => { if (kind === "person") void genPersonWithTri(genPrompt, undefined, customBusy); else void genBaseAsset(kind, genPrompt, undefined, customBusy); }}>
                            <svg className="ai-spark" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z" /><path d="M19 14l.7 1.8L21.5 16.5l-1.8.7L19 19l-.7-1.8L16.5 16.5l1.8-.7L19 14z" /></svg>
-                            自定义{KIND_LABEL[kind]}
+                            {genBusyKey === customBusy ? "生成中…" : `自定义${KIND_LABEL[kind]}`}
                          </button>
                        </div>
-                        {/* 流程步骤4 · 脚本提取出但还没生成的人物/场景:逐个 seed 卡,显示 AI 提示词,可改后生成 */}
+                        {/* 流程步骤4 · 脚本提取出但还没生成的人物/场景:逐个 seed 卡,显示 AI 提示词,可改后生成(进入页面会自动补齐) */}
                        {pendingTags.length > 0 && (
-                          <div className="asset-grid-2" style={{ marginBottom: list.length ? "10px" : 0 }}>
+                          <div className="asset-grid-2" style={{ marginBottom: entities.length ? "10px" : 0 }}>
                            {pendingTags.map((tag) => {
                              const seedKey = `seed:${kind}:${tag}`;
                              const promptValue = assetPromptDraft[seedKey] ?? tagPrompt(tag);
+                              const busy = genBusyKey === seedKey;
                              return (
                                <div className="asset-card-2 asset-seed" data-asset-kind={kind} data-seed-tag={tag} key={seedKey}>
-                                  <div className="placeholder thumb-2"><span className="ph-frame">{tag} · 待生成</span></div>
+                                  <div className="placeholder thumb-2">
+                                    {busy
+                                      ? <span className="asset-card-loading"><span className="asset-spinner" aria-hidden="true"></span><span className="mono">生成中…</span></span>
+                                      : <span className="ph-frame">{tag} · 待生成</span>}
+                                  </div>
                                  <div className="body-2">
                                    <div className="hstack">
                                      <strong style={{ fontSize: "14px" }}>{tag}</strong>
@@ -2175,9 +2338,9 @@ export function PipelinePage(props: {
                                    <textarea className="asset-prompt-edit" rows={3} placeholder="描述这个素材的提示词…" value={promptValue} onChange={(e) => setAssetPromptDraft((m) => ({ ...m, [seedKey]: e.target.value }))} />
                                    <div className="asset-card-actions">
                                      <span className="spacer"></span>
-                                      <button className="btn btn-primary btn-sm" type="button" disabled={loading} onClick={() => onGenerateBaseAsset(kind, (promptValue.trim() || tagPrompt(tag)), tag)}>
-                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z" /></svg>
-                                        AI 生成
+                                      <button className="btn btn-primary btn-sm" type="button" disabled={Boolean(genBusyKey)} onClick={() => { const p = promptValue.trim() || tagPrompt(tag); if (kind === "person") void genPersonWithTri(p, tag, seedKey); else void genBaseAsset(kind, p, tag, seedKey); }}>
+                                        {busy ? <span className="asset-spinner sm" aria-hidden="true" style={{ marginRight: 4 }}></span> : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z" /></svg>}
+                                        {busy ? "生成中…" : "AI 生成"}
                                      </button>
                                    </div>
                                  </div>
@@ -2186,71 +2349,71 @@ export function PipelinePage(props: {
                            })}
                          </div>
                        )}
-                        {list.length ? (
+                        {entities.length ? (
                          <div className="asset-grid-2">
-                            {list.map((group, gi) => {
-                              const mainUrl = groupMainUrl(group);
-                              const cands = (group.candidate_assets ?? []).filter((id) => id !== group.adopted_asset).slice(0, 4);
-                              // 行38 · 可编辑提示词:草稿优先,落空回退原 prompt;重跑/替换都带它
-                              const promptValue = assetPromptDraft[group.id] ?? group.prompt ?? "";
-                              // 流程步骤4 · 该卡对应的脚本标签(若有),作卡片标题并在重跑/替换时保留归类
-                              const label = group.metadata?.label || "";
-                              const cardName = label || assetName(group.adopted_asset) || `${KIND_LABEL[kind]} ${gi + 1}`;
+                            {entities.map((entity) => {
+                              const latest = entity.portraits.at(-1)!;
+                              const mainUrl = groupMainUrl(latest);
+                              // 行38 · 可编辑提示词:草稿优先(按实体 key),落空回退原 prompt;重新获取据它生成
+                              const promptValue = assetPromptDraft[entity.key] ?? latest.prompt ?? "";
+                              const busy = genBusyKey === `ent:${kind}:${entity.key}`;
+                              const adopted = entity.portraits.some((g) => g.adopted_asset);
                              return (
-                                <div className="asset-card-2" data-asset-kind={kind} data-asset-id={group.id} key={group.id}>
-                                  <div className={`placeholder thumb-2${mainUrl ? " has-mock-media" : ""}`} style={mainUrl ? mediaStyle(mainUrl) : undefined}>
-                                    <span className="ph-frame">{cardName}</span>
+                                <div className="asset-card-2" data-asset-kind={kind} data-asset-id={entity.key} key={entity.key}>
+                                  <div className={`placeholder thumb-2${mainUrl && !busy ? " has-mock-media" : ""}`} style={mainUrl && !busy ? { ...mediaStyle(mainUrl), cursor: "pointer" } : { cursor: "pointer" }}
+                                    role="button" tabIndex={0} title="点击查看详情(立绘 / 三视图 / 版本)"
+                                    onClick={() => openAssetDetail(kind, entity)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openAssetDetail(kind, entity); } }}>
+                                    {busy
+                                      ? <span className="asset-card-loading"><span className="asset-spinner" aria-hidden="true"></span><span className="mono">生成中…</span></span>
+                                      : <span className="ph-frame">{entity.name}</span>}
                                  </div>
                                  <div className="body-2">
                                    <div className="hstack">
-                                      <strong style={{ fontSize: "14px" }}>{cardName}</strong>
+                                      <strong style={{ fontSize: "14px", cursor: "pointer" }} onClick={() => openAssetDetail(kind, entity)}>{entity.name}</strong>
                                      <span className="spacer"></span>
-                                      {group.adopted_asset
+                                      {adopted
                                        ? <span className="pill ok"><span className="dot"></span>已采用</span>
                                        : <span className="pill neutral"><span className="dot"></span>待采用</span>}
                                      {/* 火山真人审核绿/红盾(仅人物已采用资产) */}
-                                      {kind === "person" && group.adopted_asset ? (() => {
-                                        const rs = assetReview(group.adopted_asset);
+                                      {kind === "person" && latest.adopted_asset ? (() => {
+                                        const rs = assetReview(latest.adopted_asset);
                                        if (rs === "active") return <span className="pill ok" title="火山真人审核已通过" style={{ marginLeft: 4 }}><span className="dot"></span>审核✓</span>;
-                                        if (rs === "failed") return <span className="pill err" title={`审核未过:${byId.get(group.adopted_asset)?.review_error || "建议改提示词重新生成"}`} style={{ marginLeft: 4 }}><span className="dot"></span>审核✗·重生</span>;
+                                        if (rs === "failed") return <span className="pill err" title={`审核未过:${byId.get(latest.adopted_asset)?.review_error || "建议改提示词重新生成"}`} style={{ marginLeft: 4 }}><span className="dot"></span>审核✗·重生</span>;
                                        if (rs === "processing") return <span className="pill neutral" style={{ marginLeft: 4 }}><span className="dot"></span>审核中</span>;
                                        return null;
                                      })() : null}
                                    </div>
-                                    {/* 行38 · 可编辑提示词:改完点重跑/替换据此生成 */}
+                                    <div className="asset-card-tags">
+                                      <span className="mono">// 立绘 {entity.portraits.length} 版</span>
+                                      {kind === "person" && (() => { const n = triviewsFor(latest.id).length; return <span className="mono">// 当前立绘三视图 {n ? `${n} 版` : "未生成"}</span>; })()}
+                                    </div>
+                                    {/* 行38/流程步骤4 · 可编辑提示词:改完点重新获取据此生成新版立绘 */}
                                    <textarea
                                      className="asset-prompt-edit"
                                      rows={3}
                                      placeholder="描述这个素材的提示词…"
                                      value={promptValue}
-                                      onChange={(e) => setAssetPromptDraft((m) => ({ ...m, [group.id]: e.target.value }))}
+                                      onChange={(e) => setAssetPromptDraft((m) => ({ ...m, [entity.key]: e.target.value }))}
                                    />
-                                    {cands.length > 0 && (
-                                      <div className="hstack" style={{ marginTop: "10px", gap: "6px", flexWrap: "wrap" }}>
-                                        {cands.map((id) => (
-                                          <div className={`placeholder${candUrl(group, id) ? " has-mock-media" : ""}`} key={id} role="button" tabIndex={0} title="点击采用此候选" style={{ ...(candUrl(group, id) ? mediaStyle(candUrl(group, id)) : {}), width: "40px", height: "40px", flex: "0 0 40px", cursor: "pointer" }} onClick={() => onAdoptBaseAsset(group.id, id)}><span className="ph-frame"></span></div>
-                                        ))}
-                                      </div>
-                                    )}
-                                    {/* 行38 · 重跑 / 替换:重跑=据当前提示词重新生成;替换=有候选先采下一张,无候选回退重生成 */}
+                                    {/* 流程步骤4 · 重跑=据提示词生成新版立绘(覆盖当前卡片立绘,归入同角色);替换=去演员库用现有资产 */}
                                    <div className="asset-card-actions">
-                                      <button className="btn btn-ghost btn-sm" type="button" disabled={loading} onClick={() => onGenerateBaseAsset(kind, (promptValue.trim() || genPrompt), label)}>
-                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M4 12a8 8 0 0 1 14-5.5L21 9" /><path d="M21 4v5h-5" /><path d="M20 12a8 8 0 0 1-14 5.5L3 15" /><path d="M3 20v-5h5" /></svg>
-                                        重跑
+                                      <button className="btn btn-ghost btn-sm" type="button" disabled={Boolean(genBusyKey)} onClick={() => { const p = promptValue.trim() || genPrompt; const bk = `ent:${kind}:${entity.key}`; if (kind === "person") void genPersonWithTri(p, entity.name, bk); else void genBaseAsset(kind, p, entity.name, bk); }}>
+                                        {busy ? <span className="asset-spinner sm" aria-hidden="true" style={{ marginRight: 4 }}></span> : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M4 12a8 8 0 0 1 14-5.5L21 9" /><path d="M21 4v5h-5" /><path d="M20 12a8 8 0 0 1-14 5.5L3 15" /><path d="M3 20v-5h5" /></svg>}
+                                        {busy ? "生成中…" : "重跑"}
                                      </button>
                                      <span className="spacer"></span>
-                                      <button className="btn btn-ghost btn-sm" type="button" disabled={loading} onClick={() => { if (cands.length) { void onAdoptBaseAsset(group.id, cands[0]); } else { onGenerateBaseAsset(kind, (promptValue.trim() || genPrompt), label); } }}>替换</button>
+                                      <button className="btn btn-ghost btn-sm" type="button" onClick={() => openActorReplace(entity)}>替换</button>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
-                        ) : (
+                        ) : pendingTags.length === 0 ? (
                          <div className="placeholder" style={{ minHeight: "120px", flexDirection: "column", gap: "10px" }}>
-                            <span className="ph-frame">// 暂无{KIND_LABEL[kind]}资产 · 点上方「AI 生成{KIND_LABEL[kind]}」生成</span>
+                            <span className="ph-frame">// 暂无{KIND_LABEL[kind]}资产 · 点上方「自定义{KIND_LABEL[kind]}」生成</span>
                          </div>
-                        )}
+                        ) : null}
                      </section>
                    );
                  })}
@@ -2279,18 +2442,20 @@ export function PipelinePage(props: {
                      <div className="tri-modal-tip">
                        建议先生成 <b>正 / 侧 / 背</b> 三视图,后续生成的角色一致性与姿态稳定性更好;但没有三视图也可直接跑视频。
                      </div>
-                      {productCandidates.length ? (
+                      {productGroups.length ? (
                        <>
-                          <div className="vd-history-h">// 候选三视图 · 选择采用哪个版本</div>
+                          <div className="vd-history-h">// 三视图版本 · {productGroups.length} 版 · 点击切换查看,选中后采用</div>
                          <div className="tri-cand-grid">
-                            {productCandidates.map((id, i) => {
-                              const u = candUrl(productGroup, id);
+                            {[...productGroups].reverse().map((g, idx) => {
+                              const u = groupMainUrl(g);
+                              const i = productGroups.length - idx;
+                              const sel = g.id === (triSelGroup?.id ?? null);
                              return (
-                                <div className={`tri-cand-card${productGroup?.adopted_asset === id ? " adopted" : ""}`} key={id} role="button" tabIndex={0}
-                                  onClick={() => { if (productGroup) { void onAdoptBaseAsset(productGroup.id, id); setTriViewOpen(false); } }}
-                                  onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && productGroup) { e.preventDefault(); void onAdoptBaseAsset(productGroup.id, id); setTriViewOpen(false); } }}>
-                                  <div className={`placeholder tri-cand-img${u ? " has-mock-media" : ""}`} style={u ? mediaStyle(u) : undefined}><span className="ph-frame">版本 {i + 1}</span></div>
-                                  <div className="tri-cand-foot"><span className="mono">// V{i + 1}</span><span className="btn btn-ghost btn-sm">采用此版本</span></div>
+                                <div className={`tri-cand-card${sel ? " adopted" : ""}`} key={g.id} role="button" tabIndex={0}
+                                  onClick={() => setTriSelId(g.id)}
+                                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setTriSelId(g.id); } }}>
+                                  <div className={`placeholder tri-cand-img${u ? " has-mock-media" : ""}`} style={u ? { ...mediaStyle(u), cursor: "zoom-in" } : undefined} title="点击放大" onClick={(e) => { if (u) { e.stopPropagation(); setPreview({ src: u, kind: "image", name: `三视图 V${i}` }); } }}><span className="ph-frame">版本 {i}</span></div>
+                                  <div className="tri-cand-foot"><span className="mono">// V{i}</span><span className="btn btn-ghost btn-sm">{sel ? "已选中" : "查看"}</span></div>
                                </div>
                              );
                            })}
@@ -2298,17 +2463,20 @@ export function PipelinePage(props: {
                        </>
                      ) : (
                        <div className="tri-empty">
-                          <div className="placeholder tri-cand-img" style={{ maxWidth: 220, margin: "0 auto" }}><span className="ph-frame">// 暂无三视图候选</span></div>
-                          <p className="tri-empty-hint">还没有候选三视图。点下方「生成三视图」让 AI 出多角度参考图,生成后回此处选择采用。</p>
+                          <div className="placeholder tri-cand-img" style={{ maxWidth: 220, margin: "0 auto" }}><span className="ph-frame">// 暂无三视图</span></div>
+                          <p className="tri-empty-hint">还没有三视图。点下方「重跑生成」让 AI 出多角度参考图,生成后回此处切换 / 采用。</p>
                        </div>
                      )}
                    </div>
                    <div className="asset-modal-f">
                      <button className="btn" type="button" onClick={() => setTriViewOpen(false)}>暂不生成(直接跑视频)</button>
                      <span className="spacer" style={{ flex: 1 }}></span>
-                      <button className="btn-aigen" type="button" disabled={loading} onClick={() => { onGenerateBaseAsset("product", `${productName} 三视图`); setTriViewOpen(false); }}>
+                      {triSelGroup?.adopted_asset && (
+                        <button className="btn" type="button" disabled={loading} onClick={() => { void onAdoptBaseAsset(triSelGroup.id, triSelGroup.adopted_asset!); setTriViewOpen(false); }}>采用此版本</button>
+                      )}
+                      <button className="btn-aigen" type="button" disabled={Boolean(genBusyKey)} onClick={() => void genBaseAsset("product", triViewGen, undefined, "tri:product")}>
                        <svg className="ai-spark" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z" /></svg>
-                        生成三视图
+                        {genBusyKey === "tri:product" ? "生成中…" : (productGroups.length ? "重跑生成" : "生成三视图")}
                      </button>
                    </div>
                  </div>
@@ -2947,6 +3115,156 @@ export function PipelinePage(props: {
          </div>
        );
      })()}
+      {/* ── 流程步骤4 · 人物/场景详情弹窗:立绘 + 三视图(人物)+ 提示词重获 + 版本历史 + 应用到当前项目 ── */}
+      {adDetail && (() => {
+        const entities = buildEntities(adDetail.kind);
+        const entity = entities.find((e) => e.key === adDetail.key);
+        if (!entity) return null;
+        const isPerson = adDetail.kind === "person";
+        const viewPortrait = entity.portraits.find((g) => g.id === adPortraitId) || entity.portraits.at(-1) || null;
+        // 三视图绑定到当前查看的这一版立绘:切立绘 → 切三视图
+        const portraitTriviews = viewPortrait ? triviewsFor(viewPortrait.id) : [];
+        const viewTri = portraitTriviews.find((g) => g.id === adTriId) || portraitTriviews.at(-1) || null;
+        const portraitUrl = groupMainUrl(viewPortrait);
+        const triUrl = groupMainUrl(viewTri);
+        const pBK = `addet-portrait:${entity.key}`;
+        const busyPortrait = genBusyKey === pBK;
+        const busyTri = genBusyKey === `addet-tri:${entity.key}` || genBusyKey === `${pBK}:tri`;
+        async function regenPortrait() {
+          const prompt = adPrompt.trim() || viewPortrait?.prompt || `${entity!.name},9:16 竖屏`;
+          // 重跑立绘 → 链式据新立绘生成它配套的三视图(人物);场景只重生立绘
+          if (adDetail!.kind === "person") await genPersonWithTri(prompt, entity!.name, pBK);
+          else await genBaseAsset("scene", prompt, entity!.name, pBK);
+          setAdPortraitId(null); // 回退到最新版(刷新后即新立绘 + 其新三视图)
+          setAdTriId(null);
+        }
+        async function regenTri() {
+          if (!viewPortrait) return;
+          await genTriview(viewPortrait.id, `addet-tri:${entity!.key}`); // 据当前这版立绘再出一版三视图
+          setAdTriId(null);
+        }
+        return (
+          <div className="asset-modal-bg" role="dialog" aria-modal="true" aria-label={`${KIND_LABEL[adDetail.kind]}详情`} onClick={(event) => { if (event.target === event.currentTarget) setAdDetail(null); }}>
+            <div className="asset-modal">
+              <div className="asset-modal-h">
+                <h2>{KIND_LABEL[adDetail.kind]}详情 · {entity.name}</h2>
+                <span className="mono" style={{ fontSize: "12px", color: "var(--black-alpha-48)" }}>// 立绘 {entity.portraits.length} 版{isPerson ? ` · 当前立绘三视图 ${portraitTriviews.length} 版` : ""}</span>
+                <button className="x" type="button" aria-label="关闭" onClick={() => setAdDetail(null)}>
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M6 18L18 6" /></svg>
+                </button>
+              </div>
+              <div className="asset-modal-body">
+                <div className="vd-main-wrap">
+                  {/* 左:立绘大图 + hover 下载/查看大图 + 版本缩略 */}
+                  <div className="ad-portrait-col">
+                    <div className="ad-img-wrap">
+                      <div className={`placeholder ad-main-img${portraitUrl && !busyPortrait ? " has-mock-media" : ""}`} style={portraitUrl && !busyPortrait ? mediaStyle(portraitUrl) : undefined}>
+                        {busyPortrait
+                          ? <span className="asset-card-loading"><span className="asset-spinner" aria-hidden="true"></span><span className="mono">立绘生成中…</span></span>
+                          : !portraitUrl && <span className="ph-frame">// 暂无立绘</span>}
+                      </div>
+                      {portraitUrl && !busyPortrait && (
+                        <div className="ad-img-icons">
+                          {viewPortrait?.adopted_asset && <button className="ad-icon-btn" type="button" title="下载当前立绘" onClick={() => void downloadAssetImage(viewPortrait.adopted_asset!, `${entity.name}-立绘`)}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" /></svg></button>}
+                          <button className="ad-icon-btn" type="button" title="查看大图" onClick={() => setPreview({ src: portraitUrl, kind: "image", name: `${entity.name} · 立绘` })}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg></button>
+                        </div>
+                      )}
+                    </div>
+                    <div className="vd-history-h" style={{ marginTop: 10 }}>// 立绘版本 · {entity.portraits.length} 版</div>
+                    <div className="vd-history-row">
+                      {entity.portraits.length ? [...entity.portraits].reverse().map((g) => {
+                        const u = groupMainUrl(g);
+                        return (
+                          <div className={`vd-history-thumb${g.id === viewPortrait?.id ? " current" : ""}`} key={g.id} role="button" tabIndex={0} title="点击查看该版本(三视图跟着切)" onClick={() => { setAdPortraitId(g.id); setAdTriId(null); setAdPrompt(g.prompt || ""); }} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setAdPortraitId(g.id); setAdTriId(null); setAdPrompt(g.prompt || ""); } }}>
+                            <div className={`placeholder${u ? " has-mock-media" : ""}`} style={u ? mediaStyle(u) : undefined}></div>
+                            <div className="ts">{(g.created_at || "").slice(11, 16) || "--:--"}</div>
+                          </div>
+                        );
+                      }) : <span className="muted-2 mono" style={{ fontSize: "12px" }}>// 暂无立绘版本</span>}
+                    </div>
+                  </div>
+
+                  {/* 右:立绘提示词重获 + 人物三视图(场景无三视图)*/}
+                  <div className="vd-info">
+                    <div className="vd-prompt-field" style={{ marginTop: 0 }}>
+                      <div className="vd-prompt-head">
+                        <span className="label">// 立绘提示词(重跑生效,可编辑)</span>
+                      </div>
+                      <textarea className="asset-prompt-edit" rows={4} placeholder="描述这个角色的立绘…" value={adPrompt} onChange={(e) => setAdPrompt(e.target.value)} />
+                      <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+                        <button className="btn btn-primary btn-sm" type="button" disabled={Boolean(genBusyKey)} onClick={() => void regenPortrait()}>
+                          {busyPortrait ? <span className="asset-spinner sm" aria-hidden="true" style={{ marginRight: 4 }}></span> : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M4 12a8 8 0 0 1 14-5.5L21 9" /><path d="M21 4v5h-5" /><path d="M20 12a8 8 0 0 1-14 5.5L3 15" /><path d="M3 20v-5h5" /></svg>}
+                          {busyPortrait ? "生成中…" : "重跑立绘"}
+                        </button>
+                        <button className="btn btn-ghost btn-sm" type="button" onClick={() => openActorReplace(entity)}>替换</button>
+                      </div>
+                    </div>
+
+                    {isPerson ? (
+                      <div style={{ marginTop: 20 }}>
+                        <div className="vd-history-h">// 当前立绘的三视图(据该立绘生成)· {portraitTriviews.length} 版</div>
+                        <div className="ad-tri-wrap">
+                          <div className={`placeholder ad-tri-img${triUrl && !busyTri ? " has-mock-media" : ""}`} style={triUrl && !busyTri ? mediaStyle(triUrl) : undefined}>
+                            {busyTri
+                              ? <span className="asset-card-loading"><span className="asset-spinner" aria-hidden="true"></span><span className="mono">三视图生成中…</span></span>
+                              : !triUrl && <span className="ph-frame">// 三视图据立绘自动生成中…</span>}
+                          </div>
+                          {triUrl && !busyTri && (
+                            <div className="ad-img-icons">
+                              <button className="ad-icon-btn" type="button" title="重跑三视图" onClick={() => void regenTri()}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12a8 8 0 0 1 14-5.5L21 9" /><path d="M21 4v5h-5" /><path d="M20 12a8 8 0 0 1-14 5.5L3 15" /><path d="M3 20v-5h5" /></svg></button>
+                              {viewTri?.adopted_asset && <button className="ad-icon-btn" type="button" title="下载当前三视图" onClick={() => void downloadAssetImage(viewTri.adopted_asset!, `${entity.name}-三视图`)}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" /></svg></button>}
+                              <button className="ad-icon-btn" type="button" title="查看大图" onClick={() => setPreview({ src: triUrl, kind: "image", name: `${entity.name} · 三视图` })}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg></button>
+                            </div>
+                          )}
+                        </div>
+                        <button className="btn btn-sm" type="button" disabled={Boolean(genBusyKey) || !viewPortrait?.adopted_asset} style={{ marginTop: 10 }} onClick={() => void regenTri()}>
+                          {busyTri ? "生成中…" : (portraitTriviews.length ? "据当前立绘再生成一版三视图" : "据当前立绘生成三视图")}
+                        </button>
+                        {portraitTriviews.length > 0 && (
+                          <div className="vd-history-row" style={{ marginTop: 10 }}>
+                            {[...portraitTriviews].reverse().map((g) => {
+                              const u = groupMainUrl(g);
+                              return (
+                                <div className={`vd-history-thumb tri${g.id === viewTri?.id ? " current" : ""}`} key={g.id} role="button" tabIndex={0} title="点击查看该三视图版本" onClick={() => setAdTriId(g.id)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setAdTriId(g.id); } }}>
+                                  <div className={`placeholder${u ? " has-mock-media" : ""}`} style={u ? mediaStyle(u) : undefined}></div>
+                                  <div className="ts">{(g.created_at || "").slice(11, 16) || "--:--"}</div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="muted-2 mono" style={{ fontSize: "12px", marginTop: 18 }}>// 场景资产无需三视图</div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="asset-modal-f">
+                <span className="mono" style={{ fontSize: "12px", color: "var(--black-alpha-48)" }}>// 应用后下游故事板 / 视频按所选版本生成</span>
+                <span className="spacer" style={{ flex: 1 }}></span>
+                <button className="btn btn-ghost" type="button" onClick={() => setAdDetail(null)}>关闭</button>
+                <button className="btn btn-primary" type="button" disabled={loading || !viewPortrait?.adopted_asset} onClick={async () => {
+                  if (viewPortrait?.adopted_asset) await onAdoptBaseAsset(viewPortrait.id, viewPortrait.adopted_asset);
+                  if (viewTri?.adopted_asset) await onAdoptBaseAsset(viewTri.id, viewTri.adopted_asset);
+                  setAdDetail(null);
+                }}>应用到当前项目</button>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+      {/* 流程步骤4 · 演员库:浏览 / 添加演员(AI生成·本地上传)/ 替换回填 */}
+      <ActorLibrary
+        open={Boolean(actorLib)}
+        mode={actorLib?.mode || "browse"}
+        assets={assets}
+        onClose={() => setActorLib(null)}
+        onPick={pickActor}
+        onGenerate={onGenerateActor}
+        onUpload={onUploadActor}
+        onRefresh={() => void onRefreshProject()}
+      />
      <MediaLightbox open={!!preview} src={preview?.src || ""} kind={preview?.kind} name={preview?.name} close={() => setPreview(null)} />
    </div>
  );