auto-save 2026-05-13 13:08 (~5)

web/components/nodes/index.tsx

@@ -6,7 +6,7 @@ import {
   Mic, Languages, FileEdit, Sparkles, Film, FileVideo, Loader2, Plus, X, LayoutGrid,
 } from "lucide-react"
 import { NodeShell, type NodeStatus, type NodeKind } from "./node-shell"
-import { type Job, frameUrl, effectiveFrameUrl, videoUrl, generatedImageUrl } from "@/lib/api"
+import { type Job, frameUrl, effectiveFrameUrl, videoUrl, generatedImageUrl, cutoutUrl } from "@/lib/api"
 
 export interface NodeData {
   job: Job | null            // 当前 active job
@@ -588,107 +588,74 @@ const IMAGEGEN_WIDTH = 320
 export function ImageGenNode({ data, selected }: any) {
   const d: NodeData = data
   const job = d?.job
-  const selectedIdxs = Array.from(d?.selectedFrames ?? []).sort((a: number, b: number) => a - b) as number[]
 
-  // 每个 selected frame 取一张代表图：优先 selected gen，否则最新一张
-  const previews = selectedIdxs
-    .map((idx) => {
-      const f = job?.frames.find((x) => x.index === idx)
-      if (!f || !f.generated_images || f.generated_images.length === 0) return null
-      const sel = f.generated_images.find((g) => g.selected)
-      const pick = sel ?? f.generated_images[f.generated_images.length - 1]
-      return { frameIdx: idx, gen: pick, hasSelected: !!sel, total: f.generated_images.length }
-    })
-    .filter((p): p is { frameIdx: number; gen: NonNullable<ReturnType<typeof Object>>; hasSelected: boolean; total: number } => p !== null)
+  // 上方浮条 = 所有 frame 的 elements crop（"分镜头编排"的输入素材）
+  type ElPreview = { frameIdx: number; elementId: string; name: string }
+  const elementCrops: ElPreview[] = job
+    ? job.frames.flatMap((f) =>
+        (f.elements ?? [])
+          .filter((e) => !!e.cutout_id)
+          .map((e) => ({ frameIdx: f.index, elementId: e.id, name: e.name_zh })),
+      )
+    : []
 
-  const totalGens = job?.frames.reduce((sum, f) => sum + (f.generated_images?.length ?? 0), 0) ?? 0
-  const selectedCount = previews.filter((p) => p.hasSelected).length
-
-  const status: NodeStatus = !job ? "pending" : totalGens > 0 ? "done" : "pending"
-  const aspect = job && job.height > 0 ? `${job.width}/${job.height}` : "9/16"
+  const totalElements = elementCrops.length
+  const status: NodeStatus = !job ? "pending" : totalElements > 0 ? "done" : "pending"
 
   return (
     <div className="relative" style={{ width: IMAGEGEN_WIDTH }}>
-      {/* 节点上方：每帧 1 张缩略图 */}
-      {previews.length > 0 && job && (
+      {/* 节点上方：所有元素 crop 图（编排输入素材） */}
+      {elementCrops.length > 0 && job && (
         <div
-          className="absolute left-0 right-0 grid grid-cols-5 gap-1.5"
+          className="absolute left-0 right-0 grid grid-cols-6 gap-1.5"
           style={{ bottom: "calc(100% + 12px)" }}
         >
-          {previews.map((p) => (
+          {elementCrops.map((p) => (
             <div
-              key={p.frameIdx}
-              className={`group relative rounded-md border transition shadow-lg hover:-translate-y-0.5 ${
-                p.hasSelected
-                  ? "border-emerald-400 ring-2 ring-emerald-400/60"
-                  : "border-pink-300/40 dark:border-pink-300/30"
-              }`}
-              style={{ aspectRatio: aspect }}
+              key={`${p.frameIdx}_${p.elementId}`}
+              className="group relative rounded-md border border-violet-300/40 dark:border-violet-300/30 transition shadow-lg hover:-translate-y-0.5 bg-black/40 overflow-hidden"
+              style={{ aspectRatio: "1/1" }}
             >
-            <button
-              onClick={(e) => { e.stopPropagation(); d.onOpenPanel?.("imagegen") }}
-              title={`分镜 ${p.frameIdx + 1} · ${p.total} 张${p.hasSelected ? " · 已选用" : ""} · 打开「分镜头编排」`}
-              className="absolute inset-0 w-full h-full"
-            >
-              <img
-                src={generatedImageUrl(job.id, p.frameIdx, p.gen.id)}
-                alt={`gen ${p.gen.id}`}
-                className="absolute inset-0 w-full h-full object-cover rounded-md"
-              />
-              {p.total > 1 && (
-                <div className="absolute top-0 left-0 bg-black/70 text-white text-[8.5px] font-mono px-1 py-0.5 leading-none rounded-tl-md rounded-br">
-                  {p.total}
-                </div>
-              )}
-              {p.hasSelected && (
-                <div className="absolute inset-0 bg-emerald-400/15 rounded-md pointer-events-none" />
-              )}
-
-              {/* Hover 大图预览 */}
-              <div
-                className="pointer-events-none absolute opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100 transition-all duration-200 z-[60]"
-                style={{
-                  bottom: "calc(100% + 10px)",
-                  left: "50%",
-                  transform: "translateX(-50%)",
-                  transformOrigin: "bottom center",
-                }}
+              <button
+                onClick={(e) => { e.stopPropagation(); d.onOpenPanel?.("imagegen") }}
+                title={`${p.name} · 来自分镜 ${p.frameIdx + 1} · 打开「分镜头编排」`}
+                className="absolute inset-0 w-full h-full"
               >
-                <div className="rounded-2xl overflow-hidden border border-white/25 bg-black" style={{ boxShadow: "0 40px 100px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
-                  <img
-                    src={generatedImageUrl(job.id, p.frameIdx, p.gen.id)}
-                    alt={`preview ${p.gen.id}`}
-                    className="block"
-                    style={{
-                      width: IMAGEGEN_WIDTH * 2,
-                      maxWidth: "min(720px, 80vw)",
-                      height: "auto",
-                      maxHeight: "82vh",
-                      objectFit: "contain",
-                    }}
-                  />
-                  <div className="flex items-center justify-between px-3 py-2 bg-black/70 backdrop-blur-md">
-                    <span className="text-white text-[12.5px] font-medium">分镜 {p.frameIdx + 1} · 生成图</span>
-                    <span className="text-white/60 text-[11px] font-mono">{p.gen.mode === "edit" ? "i2i" : "text"} · {p.total} 张</span>
+                <img
+                  src={cutoutUrl(job.id, p.frameIdx, p.elementId)}
+                  alt={p.name}
+                  className="absolute inset-0 w-full h-full object-contain"
+                />
+
+                {/* Hover 大图预览 */}
+                <div
+                  className="pointer-events-none absolute opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100 transition-all duration-200 z-[60]"
+                  style={{
+                    bottom: "calc(100% + 10px)",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    transformOrigin: "bottom center",
+                  }}
+                >
+                  <div className="rounded-2xl overflow-hidden border border-white/25 bg-black" style={{ boxShadow: "0 40px 100px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+                    <img
+                      src={cutoutUrl(job.id, p.frameIdx, p.elementId)}
+                      alt={`preview ${p.elementId}`}
+                      className="block"
+                      style={{
+                        maxWidth: "min(560px, 70vw)",
+                        height: "auto",
+                        maxHeight: "70vh",
+                        objectFit: "contain",
+                      }}
+                    />
+                    <div className="flex items-center justify-between px-3 py-2 bg-black/70 backdrop-blur-md">
+                      <span className="text-white text-[12.5px] font-medium">{p.name}</span>
+                      <span className="text-white/60 text-[11px] font-mono">分镜 {p.frameIdx + 1}</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </button>
-            {/* 删除按钮：hover 时右上角浮出 */}
-            {d.onDeleteGenerated && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (confirm(`删除分镜 ${p.frameIdx + 1} 的这张生成图？`)) {
-                    d.onDeleteGenerated?.(p.frameIdx, p.gen.id)
-                  }
-                }}
-                title="删除该生成图"
-                className="absolute top-1 right-1 h-5 w-5 rounded-full bg-black/70 backdrop-blur text-white/80 hover:bg-rose-500 hover:text-white inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-[70]"
-              >
-                <X className="h-3 w-3" />
               </button>
-            )}
             </div>
           ))}
         </div>
@@ -698,23 +665,23 @@ export function ImageGenNode({ data, selected }: any) {
         type="ai" status={status}
         icon={<LayoutGrid className="h-4 w-4" />}
         title="分镜头编排 · Storyboard"
-        subtitle={`STEP 6 · 接元素 + 场景 ${totalGens > 0 ? `· ${totalGens} 张` : ""}`}
+        subtitle={`STEP 6 · 接元素 + 场景${totalElements > 0 ? ` · ${totalElements} 个元素` : ""}`}
         width={IMAGEGEN_WIDTH}
         selected={selected}
       >
-        {totalGens > 0 ? (
+        {totalElements > 0 ? (
           <div className="text-[11.5px] leading-relaxed text-[var(--text-soft)]">
-            已生成 <span className="text-[var(--text-strong)] font-medium">{totalGens}</span> 张 · 选用 {selectedCount}/{previews.length}
+            素材：<span className="text-[var(--text-strong)] font-medium">{totalElements}</span> 个元素 + 干净版场景
             <br />
             <span className="text-[10.5px] text-[var(--text-faint)]">
-              上方缩略图点击展开编排 · 多视角 / 风格融合 / 布局调整在此完成
+              上方缩略图点击进入编排 · 多视角 / 风格融合 / 布局在此完成（Phase 2）
             </span>
           </div>
         ) : (
           <div className="text-[11.5px] text-[var(--text-faint)] leading-relaxed">
             <span className="text-[var(--text-strong)]">编排素材待接入</span>
             <br />
-            <span className="text-[10.5px]">关键帧节点提取的元素 + 干净版场景图 → 这里做多视角 / 风格融合 / 分镜布局</span>
+            <span className="text-[10.5px]">到关键帧节点画框 → 裁切元素 → 这里聚合所有素材做分镜头编排</span>
           </div>
         )}
       </NodeShell>