auto-save 2026-05-13 19:17 (~4)

web/components/nodes/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "lucide-react"
 import { NodeShell, type NodeStatus, type NodeKind } from "./node-shell"
 import { type Job, type ImageRef, effectiveFrameUrl, videoUrl, hasCutout, representativeCutoutUrl } from "@/lib/api"
+import { FrameLightbox } from "@/components/lightbox"
 
 export interface NodeData {
   job: Job | null            // 当前 active job
@@ -495,6 +496,34 @@ export function KeyframeNode({ data, selected }: any) {
         )}
       </NodeShell>
 
+      {/* 关键帧详情 / 元素提取：作为无限画布上的工作面板，跟随 ReactFlow 缩放和平移 */}
+      {d.job && d.expandedFrame !== null && (
+        <div
+          className="nodrag nowheel absolute z-[120]"
+          style={{
+            left: 0,
+            top: "calc(100% + 18px)",
+            width: 760,
+            height: 720,
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <FrameLightbox
+            embedded
+            jobId={d.job.id}
+            frames={d.job.frames}
+            activeIndex={d.expandedFrame}
+            selected={d.selectedFrames}
+            onClose={d.onCloseExpandedFrame}
+            onChange={d.onExpandFrame}
+            onToggleSelect={d.onToggleFrame}
+            onJobUpdate={d.onJobUpdate}
+            onCopyImage={d.onCopyImage}
+          />
+        </div>
+      )}
+
     </div>
   )
 }