auto-save 2026-05-12 19:47 (~2)

web/components/nodes/index.tsx

@@ -229,6 +229,11 @@ export function KeyframeNode({ data, selected }: any) {
   const st = keyframeStatus(d.job)
   const frames = d.job?.frames ?? []
   const jobId = d.job?.id
+  const job = d.job
+  const hasVideo = !!job?.video_url
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [videoT, setVideoT] = useState(0)
+  const [addingFrame, setAddingFrame] = useState(false)
 
   return (
     <div className="relative" style={{ width: KEYFRAME_WIDTH }}>
@@ -304,22 +309,43 @@ export function KeyframeNode({ data, selected }: any) {
         type="process" status={st}
         icon={<ImageIcon className="h-4 w-4" />}
         title="关键帧 · Keyframes"
-        subtitle={`STEP 4 · ffmpeg · ${frames.length ? `${d.selectedFrames.size}/${frames.length} 选用` : "等待抽取"}`}
+        subtitle={`STEP 2 · ffmpeg · ${frames.length ? `${d.selectedFrames.size}/${frames.length} 选用` : "等待抽取"}`}
         width={KEYFRAME_WIDTH}
         selected={selected}
       >
-        {frames.length > 0 ? (
-          <div className="text-[11.5px] leading-relaxed text-[var(--text-soft)]">
-            自动抽取 <span className="text-[var(--text-strong)] font-medium">{frames.length}</span> 张 ·
-            点击上方缩略图展开
-            <br />
-            <span className="text-[10.5px] text-[var(--text-faint)]">
-              空格 / 选用此帧 按钮可勾选；选中的传入「生图」节点
-            </span>
+        {hasVideo && jobId ? (
+          <div className="space-y-2">
+            <video
+              ref={videoRef}
+              src={videoUrl(jobId)}
+              controls
+              onTimeUpdate={(e) => setVideoT((e.target as HTMLVideoElement).currentTime)}
+              className="block w-full rounded-md bg-black border border-black/10 dark:border-white/10"
+            />
+            <button
+              type="button"
+              disabled={addingFrame}
+              onClick={async (e) => {
+                e.stopPropagation()
+                const t = videoRef.current?.currentTime ?? videoT
+                setAddingFrame(true)
+                try { await d.onAddManualFrame(t) } finally { setAddingFrame(false) }
+              }}
+              className="w-full text-[12px] py-2 rounded-md bg-emerald-500 hover:bg-emerald-400 text-white disabled:opacity-50 inline-flex items-center justify-center gap-1.5 font-medium"
+              title="把视频当前时间点抽为新关键帧"
+            >
+              {addingFrame ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
+              {addingFrame ? "抽帧中…" : `+ 把 ${videoT.toFixed(1)}s 加为关键帧`}
+            </button>
+            <div className="text-[10.5px] text-[var(--text-faint)] text-center">
+              {frames.length > 0
+                ? `自动 ${frames.length} 张 · 选中 ${d.selectedFrames.size} 张 · 上方缩略图可点击放大`
+                : "等待解析后抽取（默认 5 张）"}
+            </div>
           </div>
         ) : (
           <div className="text-[11.5px] text-[var(--text-faint)] py-1">
-            等待解析后抽取（默认 5 张，可在 API 配置 KEYFRAME_COUNT 改）
+            等待视频下载完成
           </div>
         )}
       </NodeShell>