(null)
+ const isLocked = !!d.job && d.job.status !== "failed" && d.job.status !== "transcribed"
+ return (
+ }
+ title="输入 · Input"
+ subtitle="STEP 1"
+ width={300}
+ selected={selected}
+ hasTarget={false}
+ >
+ setUrl(e.target.value)}
+ placeholder="粘贴 TikTok 链接"
+ disabled={isLocked}
+ className="w-full text-[12px] px-2.5 py-2 rounded-md bg-white/40 dark:bg-white/[0.04] border border-black/10 dark:border-white/10 outline-none placeholder:text-[var(--text-faint)] focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-40"
+ />
+
+
+
+ {
+ const f = e.target.files?.[0]
+ if (f) d.onUploadFile(f)
+ e.target.value = ""
+ }}
+ />
+
+ {d.job && (
+
+ {d.job.url.startsWith("upload://") ? `📎 ${d.job.url.slice(9)}` : d.job.url}
+
+ )}
+
+ )
+}
+
+/* ============================================================
+ 2. DownloadNode
+ ============================================================ */
+export function DownloadNode({ data, selected }: any) {
+ const d: NodeData = data
+ const st = downloadStatus(d.job)
+ return (
+ }
+ title="下载 · Download"
+ subtitle="STEP 2 · yt-dlp"
+ selected={selected}
+ >
+
+ {d.job?.url.startsWith("upload://") ? "本地上传 · 跳过下载" : "TikTok / yt-dlp 兼容站点"}
+
+ {d.job && st === "done" && (
+
+
分辨率
{d.job.width}×{d.job.height}
+
时长
{d.job.duration.toFixed(1)}s
+
+ {d.job.frames.map((f) => {
+ const isSel = d.selectedFrames.has(f.index)
+ return (
+
+ )
+ })}
+
等待视频流，自动 + 手动抽取 ≤10 张
+ )}
+
+ )
+}
+
+/* ============================================================
+ 5. ASRNode — Gemini 转录
+ ============================================================ */
+export function ASRNode({ data, selected }: any) {
+ const d: NodeData = data
+ return (
+ }
+ title="转录 · ASR"
+ subtitle="STEP 5 · Gemini"
+ selected={selected}
+ >
+
+ Gemini 2.5 · 英文带时间戳分段
+
+ {d.job && d.job.transcript.length > 0 && (
+
+ {d.job.transcript.slice(0, 3).map((s) => (
+
+
+ {s.start.toFixed(1)}s
+
+ {s.en.slice(0, 60)}
+ {s.en.length > 60 && "…"}
+
+ ))}
+ {d.job.transcript.length > 3 && (
+
还有 {d.job.transcript.length - 3} 段…
+ )}
+
+ 中文翻译 · 段落级 · 实时输出
+
+ {hasZh && d.job && (
+
+ {d.job.transcript.slice(0, 3).map((s) => (
+
{s.zh.slice(0, 30)}{s.zh.length > 30 && "…"}
+ ))}
+
下一冲刺接入
+
+ )
+}
+
+/* ============================================================
+ 8. ImageGenNode (placeholder)
+ ============================================================ */
+export function ImageGenNode({ selected }: any) {
+ return (
+ }
+ title="生图 · Image Gen"
+ subtitle="STEP 8 · nano-banana / GPT"
+ selected={selected}
+ >
+
+
+ nano-banana-pro
Gemini 3 Image
+
+
+ GPT Image
OpenAI
+
+
+ {["Seedance", "Kling", "Veo 3"].map((m) => (
+
+ {m}
+
+ ))}
+
+ 视频片段 + 字幕 / TTS
→ 最终 mp4 输出
+
+
+ )
+}
diff --git a/web/components/nodes/node-shell.tsx b/web/components/nodes/node-shell.tsx
new file mode 100644
index 0000000..b7976cc
--- /dev/null
+++ b/web/components/nodes/node-shell.tsx
@@ -0,0 +1,79 @@
+"use client"
+import { type ReactNode } from "react"
+import { Handle, Position } from "@xyflow/react"
+import { CheckCircle2, Loader2, AlertCircle } from "lucide-react"
+
+export type NodeKind = "input" | "process" | "ai" | "output"
+export type NodeStatus = "pending" | "running" | "done" | "failed"
+
+interface Props {
+ type: NodeKind
+ status: NodeStatus
+ icon?: ReactNode
+ title: string
+ subtitle?: string
+ width?: number
+ selected?: boolean
+ hasTarget?: boolean
+ hasSource?: boolean
+ children?: ReactNode
+}
+
+const STATUS_DOT: Record = {
+ pending: "status-dot",
+ running: "status-dot status-dot--running",
+ done: "status-dot status-dot--done",
+ failed: "status-dot status-dot--failed",
+}
+
+const STATUS_LABEL: Record = {
+ pending: "待运行",
+ running: "运行中",
+ done: "完成",
+ failed: "失败",
+}
+
+export function NodeShell({
+ type,
+ status,
+ icon,
+ title,
+ subtitle,
+ width = 280,
+ selected,
+ hasTarget = true,
+ hasSource = true,
+ children,
+}: Props) {
+ return (
+
+ {hasTarget &&
}
+
+
+ {icon ?
{icon} : null}
+
{title}
+
+ {status === "running" ? :
+ status === "done" ? :
+ status === "failed" ? : null}
+
+
+
+
+
+ {subtitle && (
+
+ {subtitle} · {STATUS_LABEL[status]}
+
+ )}
+ {children}
+
+
+ {hasSource &&
}
+