430 lines
16 KiB
TypeScript
430 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Bot,
|
||
Clapperboard,
|
||
FileOutput,
|
||
Film,
|
||
LayoutPanelTop,
|
||
ScanSearch,
|
||
Sparkles,
|
||
Trash2,
|
||
} from "lucide-react";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { CanvasToolbarIcon } from "@/components/canvas/CanvasToolbarIcon";
|
||
import { useCanvasStore } from "@/store/canvas";
|
||
import {
|
||
getCanvasToolbarItem,
|
||
type CanvasToolbarConfig,
|
||
} from "@/lib/canvas-toolbar-config";
|
||
import { cn } from "@/lib/utils";
|
||
import {
|
||
getNodeContentScale,
|
||
getScaledNodeContentStyle,
|
||
} from "@/lib/canvas/node-content-scale";
|
||
import {
|
||
getVideoWorkflowNodeDefinition,
|
||
getVideoWorkflowQuickConnectOutputs,
|
||
} from "@/lib/video-workflow/catalog";
|
||
import type { CanvasNode, WorkflowNodeData } from "@/types/canvas";
|
||
|
||
interface WorkflowNodeProps {
|
||
node: CanvasNode;
|
||
isSelected: boolean;
|
||
canvasToolbarConfig?: CanvasToolbarConfig;
|
||
}
|
||
|
||
function toAlphaColor(color: string | undefined, alpha: number) {
|
||
const normalized = String(color || "").trim();
|
||
if (!normalized.startsWith("#")) return undefined;
|
||
|
||
const hex = normalized.slice(1);
|
||
if (hex.length !== 3 && hex.length !== 6) return undefined;
|
||
|
||
const full = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
|
||
const int = Number.parseInt(full, 16);
|
||
if (Number.isNaN(int)) return undefined;
|
||
|
||
const red = (int >> 16) & 255;
|
||
const green = (int >> 8) & 255;
|
||
const blue = int & 255;
|
||
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
||
}
|
||
|
||
const GROUP_META = {
|
||
input: {
|
||
label: "输入",
|
||
icon: LayoutPanelTop,
|
||
},
|
||
analysis: {
|
||
label: "分析",
|
||
icon: ScanSearch,
|
||
},
|
||
storyboard: {
|
||
label: "分镜",
|
||
icon: Film,
|
||
},
|
||
generation: {
|
||
label: "生成",
|
||
icon: Sparkles,
|
||
},
|
||
character: {
|
||
label: "角色场景",
|
||
icon: Clapperboard,
|
||
},
|
||
tool: {
|
||
label: "工具",
|
||
icon: Bot,
|
||
},
|
||
output: {
|
||
label: "输出",
|
||
icon: FileOutput,
|
||
},
|
||
} as const;
|
||
|
||
const GROUP_STYLE_MAP = {
|
||
input: {
|
||
surface: "#f4f7ff",
|
||
border: "#dfe6ff",
|
||
icon: "#e5ebff",
|
||
},
|
||
analysis: {
|
||
surface: "#eefbf6",
|
||
border: "#d6f1e6",
|
||
icon: "#def6eb",
|
||
},
|
||
storyboard: {
|
||
surface: "#fff7e1",
|
||
border: "#f7e6b3",
|
||
icon: "#ffefbf",
|
||
},
|
||
generation: {
|
||
surface: "#fff1f4",
|
||
border: "#f5d5dd",
|
||
icon: "#ffe2e9",
|
||
},
|
||
character: {
|
||
surface: "#f4efff",
|
||
border: "#e4dbff",
|
||
icon: "#ece5ff",
|
||
},
|
||
tool: {
|
||
surface: "#f5f7fb",
|
||
border: "#e4e8f0",
|
||
icon: "#edf1f7",
|
||
},
|
||
output: {
|
||
surface: "#eef6ff",
|
||
border: "#d8e8ff",
|
||
icon: "#deecff",
|
||
},
|
||
} as const;
|
||
|
||
const STATUS_LABELS = {
|
||
pending: "待配置",
|
||
generating: "处理中",
|
||
completed: "已完成",
|
||
failed: "异常",
|
||
} as const;
|
||
|
||
const STATUS_CLASS_MAP = {
|
||
pending: "border-slate-200 bg-white text-foreground/70 dark:border-zinc-800 dark:bg-zinc-950",
|
||
generating:
|
||
"border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-950/40 dark:text-blue-200",
|
||
completed:
|
||
"border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-950/40 dark:text-emerald-200",
|
||
failed:
|
||
"border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/40 dark:bg-rose-950/40 dark:text-rose-200",
|
||
} as const;
|
||
|
||
export function WorkflowNode({
|
||
node,
|
||
isSelected,
|
||
canvasToolbarConfig,
|
||
}: WorkflowNodeProps) {
|
||
const deleteNode = useCanvasStore((state) => state.deleteNode);
|
||
const data = node.data as WorkflowNodeData;
|
||
const workflowDeleteItem = getCanvasToolbarItem(
|
||
canvasToolbarConfig,
|
||
"workflowDelete"
|
||
);
|
||
const definition = getVideoWorkflowNodeDefinition(data.templateType);
|
||
const contentScale = getNodeContentScale(
|
||
node.size,
|
||
definition?.size || {
|
||
width: 300,
|
||
height: 180,
|
||
}
|
||
);
|
||
const scaledContentStyle = getScaledNodeContentStyle(contentScale);
|
||
const metadata = (data.metadata || {}) as Record<string, any>;
|
||
const quickConnectOutputs =
|
||
data.templateType && definition
|
||
? getVideoWorkflowQuickConnectOutputs(definition.type)
|
||
: [];
|
||
const resolvedGroup = (data.group || definition?.group || "tool") as keyof typeof GROUP_META;
|
||
const groupMeta = GROUP_META[resolvedGroup] || GROUP_META.tool;
|
||
const GroupIcon = groupMeta.icon;
|
||
const groupStyle = GROUP_STYLE_MAP[resolvedGroup] || GROUP_STYLE_MAP.tool;
|
||
const accentColor = data.accentColor || definition?.accentColor || "#e2e8f0";
|
||
const accentBarColor = toAlphaColor(accentColor, 0.92) || accentColor;
|
||
const title = data.title || definition?.label || "工作流节点";
|
||
const statusLabel = STATUS_LABELS[data.status] || STATUS_LABELS.pending;
|
||
const statusClassName =
|
||
STATUS_CLASS_MAP[data.status] || STATUS_CLASS_MAP.pending;
|
||
|
||
const previewUrl = String(metadata.previewMediaUrl || metadata.resultMediaUrl || "").trim();
|
||
const previewKind =
|
||
String(metadata.previewMediaKind || metadata.resultMediaKind || "").trim() === "video"
|
||
? "video"
|
||
: "image";
|
||
const compareItems = Array.isArray(metadata.compareItems)
|
||
? metadata.compareItems.slice(0, 4)
|
||
: [];
|
||
const storyboardShots = Array.isArray(metadata.storyboardShots)
|
||
? metadata.storyboardShots.slice(0, 4)
|
||
: [];
|
||
const analysisHighlights = Array.isArray(metadata.analysisHighlights)
|
||
? metadata.analysisHighlights.slice(0, 4)
|
||
: [];
|
||
const tableRows = Array.isArray(metadata.tableRows) ? metadata.tableRows.slice(0, 4) : [];
|
||
const characters = Array.isArray(metadata.characters) ? metadata.characters.slice(0, 4) : [];
|
||
const scenes = Array.isArray(metadata.scenes) ? metadata.scenes.slice(0, 4) : [];
|
||
const characterAssets = Array.isArray(metadata.characterAssets)
|
||
? metadata.characterAssets.slice(0, 4)
|
||
: [];
|
||
const sceneAssets = Array.isArray(metadata.sceneAssets)
|
||
? metadata.sceneAssets.slice(0, 4)
|
||
: [];
|
||
const agentPlan = Array.isArray(metadata.agentPlan) ? metadata.agentPlan.slice(0, 4) : [];
|
||
const deliverables = Array.isArray(metadata.deliverables)
|
||
? metadata.deliverables.slice(0, 4)
|
||
: [];
|
||
const linkedAgentProjectId = String(metadata.linkedAgentProjectId || "").trim();
|
||
const linkedAgentProjectTitle = String(metadata.linkedAgentProjectTitle || "").trim();
|
||
const importedAgentResultCount = Math.max(Number(metadata.importedAgentResultCount || 0), 0);
|
||
const pendingAgentResultCount = Math.max(Number(metadata.pendingAgentResultCount || 0), 0);
|
||
const batchShotCount = Math.max(
|
||
Number(metadata.batchShotCount || 0),
|
||
storyboardShots.length
|
||
);
|
||
const batchResultCount = Math.max(Number(metadata.batchResultCount || 0), 0);
|
||
const batchFailedCount = Math.max(Number(metadata.batchFailedCount || 0), 0);
|
||
|
||
const comparePreviewItems = compareItems
|
||
.map((item, index) => {
|
||
const compareItem = (item || {}) as Record<string, any>;
|
||
const url = String(compareItem.url || "").trim();
|
||
if (!url) return null;
|
||
return {
|
||
id: `${data.templateType}-compare-${index}`,
|
||
url,
|
||
kind: String(compareItem.kind || "").trim() === "video" ? "video" : "image",
|
||
label: String(compareItem.label || compareItem.title || `对比 ${index + 1}`).trim(),
|
||
};
|
||
})
|
||
.filter(Boolean) as Array<{ id: string; url: string; kind: "image" | "video"; label: string }>;
|
||
|
||
const compactMetrics: string[] = [];
|
||
if (batchShotCount > 0) compactMetrics.push(`镜头 ${batchShotCount}`);
|
||
if (batchResultCount > 0) compactMetrics.push(`结果 ${batchResultCount}`);
|
||
if (analysisHighlights.length > 0) compactMetrics.push(`分析 ${analysisHighlights.length}`);
|
||
if (tableRows.length > 0) compactMetrics.push(`表格 ${tableRows.length}`);
|
||
if (characters.length > 0) compactMetrics.push(`角色 ${characters.length}`);
|
||
if (scenes.length > 0) compactMetrics.push(`场景 ${scenes.length}`);
|
||
if (characterAssets.length > 0) compactMetrics.push(`角色资产 ${characterAssets.length}`);
|
||
if (sceneAssets.length > 0) compactMetrics.push(`场景资产 ${sceneAssets.length}`);
|
||
if (linkedAgentProjectId) compactMetrics.push("Agent");
|
||
if (importedAgentResultCount > 0) compactMetrics.push(`已回流 ${importedAgentResultCount}`);
|
||
if (pendingAgentResultCount > 0) compactMetrics.push(`待回流 ${pendingAgentResultCount}`);
|
||
if (batchFailedCount > 0) compactMetrics.push(`失败 ${batchFailedCount}`);
|
||
|
||
const primaryTextCandidates = [
|
||
String(data.summary || "").trim(),
|
||
String(analysisHighlights[0] || "").trim(),
|
||
String((storyboardShots[0] as Record<string, any>)?.title || "").trim(),
|
||
String((storyboardShots[0] as Record<string, any>)?.description || "").trim(),
|
||
String((characters[0] as Record<string, any>)?.description || "").trim(),
|
||
String((scenes[0] as Record<string, any>)?.description || "").trim(),
|
||
String(agentPlan[0] || "").trim(),
|
||
String(deliverables[0] || "").trim(),
|
||
quickConnectOutputs.length > 0 ? `可接 ${quickConnectOutputs.map((item) => item.label).join(" / ")}` : "",
|
||
String(definition?.description || data.description || "").trim(),
|
||
].filter(Boolean);
|
||
const primaryText = primaryTextCandidates[0] || "";
|
||
|
||
const compactDetailLines = [
|
||
storyboardShots[0]
|
||
? `分镜：${String((storyboardShots[0] as Record<string, any>)?.title || "镜头草案").trim()}`
|
||
: "",
|
||
characters[0]
|
||
? `角色：${String((characters[0] as Record<string, any>)?.name || (characters[0] as Record<string, any>)?.title || "角色线索").trim()}`
|
||
: "",
|
||
scenes[0]
|
||
? `场景：${String((scenes[0] as Record<string, any>)?.name || (scenes[0] as Record<string, any>)?.title || "场景线索").trim()}`
|
||
: "",
|
||
tableRows[0] ? "已整理结构化表格" : "",
|
||
linkedAgentProjectId ? `Agent：${linkedAgentProjectTitle || linkedAgentProjectId}` : "",
|
||
deliverables[0] ? `交付：${String(deliverables[0]).trim()}` : "",
|
||
]
|
||
.filter(Boolean)
|
||
.slice(0, 2);
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"relative h-full w-full overflow-hidden rounded-[24px] border border-[#e0e2e8] bg-white shadow-[0_0_0_1px_rgba(224,226,232,0.32),0_16px_36px_rgba(28,28,30,0.08)] transition-all dark:border-zinc-800 dark:bg-zinc-950",
|
||
isSelected &&
|
||
"border-[#5b76fe]/60 ring-2 ring-[#5b76fe]/18 shadow-[0_0_0_1px_rgba(91,118,254,0.18),0_20px_40px_rgba(91,118,254,0.14)]"
|
||
)}
|
||
>
|
||
<div
|
||
className="pointer-events-none absolute inset-x-0 top-0 h-1"
|
||
style={{ backgroundColor: accentBarColor }}
|
||
/>
|
||
|
||
<div className="h-full w-full" style={scaledContentStyle}>
|
||
<div className="flex h-full flex-col gap-3 p-3">
|
||
<div
|
||
className="rounded-[20px] border px-3 py-3"
|
||
style={{
|
||
backgroundColor: groupStyle.surface,
|
||
borderColor: groupStyle.border,
|
||
}}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<span
|
||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[18px] border border-white/70 shadow-sm"
|
||
style={{ color: accentColor, backgroundColor: groupStyle.icon }}
|
||
>
|
||
<GroupIcon className="h-4 w-4" />
|
||
</span>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="min-w-0">
|
||
<div className="mb-1 flex items-center gap-2">
|
||
<span className="text-[11px] font-medium uppercase tracking-[0.14em] text-[#555a6a]">
|
||
{groupMeta.label}
|
||
</span>
|
||
<Badge variant="outline" className={cn("h-6 rounded-full px-2 text-[11px]", statusClassName)}>
|
||
{statusLabel}
|
||
</Badge>
|
||
</div>
|
||
<h3 className="truncate text-sm font-semibold text-foreground">{title}</h3>
|
||
{primaryText ? (
|
||
<p className="mt-1 line-clamp-2 text-xs leading-5 text-[#555a6a]">
|
||
{primaryText}
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
|
||
{isSelected ? (
|
||
<button
|
||
type="button"
|
||
onPointerDown={(event) => event.stopPropagation()}
|
||
onMouseDown={(event) => event.stopPropagation()}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
deleteNode(node.id);
|
||
}}
|
||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/75 bg-white/92 text-[#555a6a] transition-colors hover:border-red-200 hover:bg-red-50 hover:text-destructive dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-destructive/40 dark:hover:bg-red-950/30"
|
||
aria-label={workflowDeleteItem.label}
|
||
title={workflowDeleteItem.label}
|
||
>
|
||
<CanvasToolbarIcon
|
||
className="h-4 w-4"
|
||
fallback={Trash2}
|
||
item={workflowDeleteItem}
|
||
/>
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{previewUrl ? (
|
||
<div className="overflow-hidden rounded-[20px] border border-[#dfe3ea] bg-[#1c1c1e] shadow-[0_0_0_1px_rgba(224,226,232,0.25)] dark:border-zinc-800">
|
||
{previewKind === "video" ? (
|
||
<video
|
||
src={previewUrl}
|
||
className="h-28 w-full object-cover"
|
||
controls
|
||
muted
|
||
playsInline
|
||
/>
|
||
) : (
|
||
<img src={previewUrl} alt={title} className="h-28 w-full object-cover" />
|
||
)}
|
||
</div>
|
||
) : comparePreviewItems.length > 0 ? (
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{comparePreviewItems.slice(0, 4).map((item) => (
|
||
<div
|
||
key={item.id}
|
||
className="overflow-hidden rounded-[18px] border border-[#dfe3ea] bg-white shadow-[0_0_0_1px_rgba(224,226,232,0.25)] dark:border-zinc-800 dark:bg-zinc-950"
|
||
>
|
||
{item.kind === "video" ? (
|
||
<video
|
||
src={item.url}
|
||
className="h-20 w-full object-cover"
|
||
muted
|
||
playsInline
|
||
/>
|
||
) : (
|
||
<img src={item.url} alt={item.label} className="h-20 w-full object-cover" />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
{compactMetrics.length > 0 ? (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{compactMetrics.slice(0, 6).map((metric) => (
|
||
<span
|
||
key={`${data.templateType}-${metric}`}
|
||
className="rounded-full border border-[#d8def0] bg-[#f7f8fc] px-2.5 py-1 text-[11px] font-medium text-[#555a6a] dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
|
||
>
|
||
{metric}
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
{compactDetailLines.length > 0 ? (
|
||
<div className="grid gap-1.5">
|
||
{compactDetailLines.map((line) => (
|
||
<div
|
||
key={`${data.templateType}-${line}`}
|
||
className="rounded-[18px] border border-[#e3e7ef] bg-white px-3 py-2 text-xs leading-5 text-[#555a6a] shadow-[0_0_0_1px_rgba(224,226,232,0.2)] dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
|
||
>
|
||
{line}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="mt-auto flex flex-wrap gap-1.5">
|
||
{quickConnectOutputs.length > 0 ? (
|
||
quickConnectOutputs.slice(0, 4).map((item) => (
|
||
<span
|
||
key={`${data.templateType}-${item.type}`}
|
||
className="rounded-full border border-dashed border-[#d8def0] px-2.5 py-1 text-[11px] text-[#6f7483] dark:border-zinc-800"
|
||
>
|
||
{item.label}
|
||
</span>
|
||
))
|
||
) : (
|
||
<span className="rounded-full border border-dashed border-[#d8def0] px-2.5 py-1 text-[11px] text-[#6f7483] dark:border-zinc-800">
|
||
结束节点
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|