1736 lines
61 KiB
TypeScript
1736 lines
61 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Bell,
|
||
Box,
|
||
Clock3,
|
||
Copy,
|
||
Crown,
|
||
Eye,
|
||
FileImage,
|
||
FileText,
|
||
FolderOpen,
|
||
GitBranch,
|
||
Headphones,
|
||
HelpCircle,
|
||
KeyRound,
|
||
Layers,
|
||
Loader2,
|
||
Lock,
|
||
Minus,
|
||
MousePointer2,
|
||
Music2,
|
||
Plus,
|
||
Save,
|
||
Search,
|
||
Share2,
|
||
UserRound,
|
||
Video,
|
||
X,
|
||
Zap,
|
||
type LucideIcon,
|
||
} from "lucide-react";
|
||
import { useRouter } from "next/navigation";
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { toast } from "sonner";
|
||
import capturedCanvasModules from "@/artifacts/liblib-frontend-capture-ed9a2c12570a49b9a1186017b2c38b52/canvas-modules.json";
|
||
import { CanvasWorkspace } from "@/components/canvas/CanvasWorkspace";
|
||
import { canvasService } from "@/services/canvas";
|
||
import { useCanvasStore, canvasSelectors } from "@/store/canvas";
|
||
import { cn } from "@/lib/utils";
|
||
import type { CanvasNode, Position, WorkflowNodeData } from "@/types/canvas";
|
||
|
||
type ActivePanel =
|
||
| "add"
|
||
| "workflow"
|
||
| "assets"
|
||
| "history"
|
||
| "help"
|
||
| "support"
|
||
| "skills"
|
||
| "share"
|
||
| "publish"
|
||
| "member"
|
||
| "notifications"
|
||
| "account"
|
||
| null;
|
||
|
||
type CapturedTool = {
|
||
type?: string;
|
||
toolKey?: string;
|
||
modelKey?: string;
|
||
modelName?: string;
|
||
vendor?: string;
|
||
scene?: string;
|
||
modes?: string[];
|
||
settings?: string[];
|
||
advancedSettings?: string[];
|
||
propertyKeys?: string[];
|
||
generateTypes?: unknown;
|
||
rules?: unknown;
|
||
metadata?: {
|
||
properties?: Record<string, unknown>;
|
||
config?: Record<string, unknown>;
|
||
generateTypes?: unknown;
|
||
rules?: unknown;
|
||
[key: string]: unknown;
|
||
};
|
||
};
|
||
|
||
type TargetNodeKind = "image" | "video" | "text" | "audio" | "compose" | "workflow" | "preview" | "save";
|
||
|
||
interface LiblibVideoCanvasReplicaProps {
|
||
canvasId: string;
|
||
isLoading?: boolean;
|
||
}
|
||
|
||
const capturedTools = ((capturedCanvasModules as any).tools || []) as CapturedTool[];
|
||
const capturedCounts = (capturedCanvasModules as any).counts || {};
|
||
const capturedWorkflows = ((capturedCanvasModules as any).workflows || []) as Array<{
|
||
id?: string | number;
|
||
name?: string;
|
||
title?: string;
|
||
description?: string;
|
||
}>;
|
||
|
||
const TOOL_TYPE_META: Record<
|
||
string,
|
||
{ label: string; icon: LucideIcon; color: string; nodeKind: TargetNodeKind }
|
||
> = {
|
||
image: { label: "图片", icon: FileImage, color: "#70d6ff", nodeKind: "image" },
|
||
video: { label: "视频", icon: Video, color: "#9b8cff", nodeKind: "video" },
|
||
text: { label: "文本", icon: FileText, color: "#ffd166", nodeKind: "text" },
|
||
audio: { label: "音频", icon: Music2, color: "#80ed99", nodeKind: "audio" },
|
||
compose: { label: "组合", icon: GitBranch, color: "#ff8fab", nodeKind: "compose" },
|
||
};
|
||
|
||
const STARTER_CARDS: Array<{
|
||
title: string;
|
||
subtitle: string;
|
||
nodes: Array<{ label: string; kind: TargetNodeKind }>;
|
||
tone: string;
|
||
}> = [
|
||
{
|
||
title: "故事脚本生成",
|
||
subtitle: "脚本到分镜",
|
||
nodes: [
|
||
{ label: "故事脚本", kind: "text" },
|
||
{ label: "分镜拆解", kind: "compose" },
|
||
{ label: "视频生成", kind: "video" },
|
||
{ label: "预览", kind: "preview" },
|
||
],
|
||
tone: "from-slate-800 via-zinc-900 to-black",
|
||
},
|
||
{
|
||
title: "角色三视图",
|
||
subtitle: "角色资产沉淀",
|
||
nodes: [
|
||
{ label: "角色描述", kind: "text" },
|
||
{ label: "角色三视图", kind: "image" },
|
||
{ label: "角色视频", kind: "video" },
|
||
{ label: "保存", kind: "save" },
|
||
],
|
||
tone: "from-red-950 via-zinc-900 to-black",
|
||
},
|
||
{
|
||
title: "首帧图生视频",
|
||
subtitle: "参考图到成片",
|
||
nodes: [
|
||
{ label: "首帧图", kind: "image" },
|
||
{ label: "镜头提示词", kind: "text" },
|
||
{ label: "图生视频", kind: "video" },
|
||
{ label: "预览", kind: "preview" },
|
||
],
|
||
tone: "from-stone-800 via-zinc-900 to-black",
|
||
},
|
||
{
|
||
title: "音频生视频",
|
||
subtitle: "音频驱动画面",
|
||
nodes: [
|
||
{ label: "音频输入", kind: "audio" },
|
||
{ label: "画面描述", kind: "text" },
|
||
{ label: "音频生视频", kind: "video" },
|
||
{ label: "预览", kind: "preview" },
|
||
],
|
||
tone: "from-emerald-950 via-zinc-900 to-black",
|
||
},
|
||
];
|
||
|
||
const TOOLBAR_ITEMS: Array<{
|
||
id: Exclude<ActivePanel, null>;
|
||
label: string;
|
||
icon: LucideIcon;
|
||
}> = [
|
||
{ id: "add", label: "添加模块", icon: Plus },
|
||
{ id: "workflow", label: "工作流", icon: GitBranch },
|
||
{ id: "assets", label: "素材", icon: Layers },
|
||
{ id: "history", label: "历史记录", icon: Clock3 },
|
||
{ id: "help", label: "帮助", icon: HelpCircle },
|
||
{ id: "support", label: "客服", icon: Headphones },
|
||
];
|
||
|
||
const PANEL_TABS = ["全部", "图片", "视频", "文本", "音频", "组合"] as const;
|
||
|
||
function getToolType(tool: CapturedTool) {
|
||
return String(tool.type || "video").trim() || "video";
|
||
}
|
||
|
||
function getToolLabel(tool: CapturedTool) {
|
||
return String(tool.modelName || tool.scene || tool.modelKey || tool.toolKey || "未命名模块").trim();
|
||
}
|
||
|
||
function inferNodeKindForTool(tool: CapturedTool): TargetNodeKind {
|
||
const type = getToolType(tool);
|
||
const modes = (tool.modes || []).map((mode) => String(mode).toLowerCase());
|
||
const name = `${tool.modelName || ""} ${tool.scene || ""} ${tool.toolKey || ""}`.toLowerCase();
|
||
|
||
if (type === "audio") return "audio";
|
||
if (type === "text") return "text";
|
||
if (type === "compose") return "compose";
|
||
if (name.includes("保存")) return "save";
|
||
if (name.includes("预览")) return "preview";
|
||
if (type === "image" && modes.some((mode) => mode.includes("video"))) return "video";
|
||
if (type === "image") return "image";
|
||
return "video";
|
||
}
|
||
|
||
function getToolModes(tool: CapturedTool) {
|
||
return (tool.modes || []).map(String).filter(Boolean).slice(0, 3);
|
||
}
|
||
|
||
function getVisibleOrigin(viewport: { x: number; y: number; zoom: number }) {
|
||
return {
|
||
x: (-viewport.x + 320) / viewport.zoom,
|
||
y: (-viewport.y + 220) / viewport.zoom,
|
||
};
|
||
}
|
||
|
||
function patchNodeForCapturedTool(node: CanvasNode, tool: CapturedTool): Partial<CanvasNode> {
|
||
const label = getToolLabel(tool);
|
||
const metadata = {
|
||
...((node.data as any)?.metadata || {}),
|
||
source: "liblib-capture",
|
||
backendStatus: "placeholder",
|
||
liblibTool: {
|
||
type: tool.type || "",
|
||
toolKey: tool.toolKey || "",
|
||
modelKey: tool.modelKey || "",
|
||
modelName: tool.modelName || "",
|
||
vendor: tool.vendor || "",
|
||
scene: tool.scene || "",
|
||
modes: tool.modes || [],
|
||
settings: tool.settings || [],
|
||
advancedSettings: tool.advancedSettings || [],
|
||
propertyKeys: tool.propertyKeys || [],
|
||
properties: tool.metadata?.properties || {},
|
||
config: tool.metadata?.config || {},
|
||
generateTypes: tool.generateTypes || tool.metadata?.generateTypes || {},
|
||
rules: tool.rules || tool.metadata?.rules || [],
|
||
},
|
||
};
|
||
|
||
if (node.type === "workflow") {
|
||
const data = node.data as WorkflowNodeData;
|
||
return {
|
||
data: {
|
||
...data,
|
||
title: label,
|
||
description: `${tool.vendor || "LibLib"} / ${tool.scene || tool.modelKey || "模型模块"}`,
|
||
summary: "前端模块已迁移，真实生成接口待后续接入。",
|
||
metadata,
|
||
},
|
||
};
|
||
}
|
||
|
||
if (node.type === "image") {
|
||
return {
|
||
data: {
|
||
...(node.data as any),
|
||
title: label,
|
||
prompt: "上传或连接上游图片后可接入生成。",
|
||
status: "pending",
|
||
metadata,
|
||
},
|
||
};
|
||
}
|
||
|
||
if (node.type === "video") {
|
||
return {
|
||
data: {
|
||
...(node.data as any),
|
||
prompt: "上传或连接上游视频后可接入生成。",
|
||
status: "pending",
|
||
metadata,
|
||
},
|
||
};
|
||
}
|
||
|
||
if (node.type === "text") {
|
||
return {
|
||
data: {
|
||
...(node.data as any),
|
||
content: `${label}\n\n在这里输入提示词、脚本或约束。`,
|
||
metadata,
|
||
},
|
||
};
|
||
}
|
||
|
||
return {
|
||
data: {
|
||
...(node.data as any),
|
||
metadata,
|
||
},
|
||
};
|
||
}
|
||
|
||
function buildTargetCanvasNode({
|
||
description,
|
||
kind,
|
||
metadata,
|
||
position,
|
||
title,
|
||
}: {
|
||
description?: string;
|
||
kind: TargetNodeKind;
|
||
metadata?: Record<string, unknown>;
|
||
position: Position;
|
||
title: string;
|
||
}): Omit<CanvasNode, "id" | "createdAt" | "updatedAt"> {
|
||
const baseMetadata = {
|
||
source: "liblib-target-replica",
|
||
backendStatus: "placeholder",
|
||
...metadata,
|
||
};
|
||
|
||
if (kind === "image") {
|
||
return {
|
||
type: "image",
|
||
position,
|
||
size: { width: 260, height: 220 },
|
||
data: {
|
||
src: "",
|
||
status: "pending",
|
||
title,
|
||
prompt: description || "图片模块前端已就绪，生成接口待接入。",
|
||
note: "上传、参考图、结果图能力后续接入。",
|
||
metadata: baseMetadata,
|
||
},
|
||
connections: [],
|
||
};
|
||
}
|
||
|
||
if (kind === "video") {
|
||
return {
|
||
type: "video",
|
||
position,
|
||
size: { width: 300, height: 220 },
|
||
data: {
|
||
src: "",
|
||
status: "pending",
|
||
prompt: description || "视频模块前端已就绪，生成接口待接入。",
|
||
metadata: baseMetadata,
|
||
},
|
||
connections: [],
|
||
};
|
||
}
|
||
|
||
if (kind === "text") {
|
||
return {
|
||
type: "text",
|
||
position,
|
||
size: { width: 300, height: 170 },
|
||
data: {
|
||
content: `${title}\n\n输入提示词、脚本、镜头描述或参数。`,
|
||
fontSize: 15,
|
||
color: "#f4f4f5",
|
||
lineHeight: 1.55,
|
||
borderWidth: 1,
|
||
borderColor: "rgba(255,255,255,0.12)",
|
||
borderRadius: 8,
|
||
padding: 18,
|
||
backgroundColor: "rgba(31,31,31,0.96)",
|
||
metadata: baseMetadata,
|
||
},
|
||
connections: [],
|
||
};
|
||
}
|
||
|
||
const iconTitle =
|
||
kind === "audio"
|
||
? "音频模块"
|
||
: kind === "preview"
|
||
? "预览模块"
|
||
: kind === "save"
|
||
? "保存模块"
|
||
: "工作流模块";
|
||
|
||
return {
|
||
type: "workflow",
|
||
position,
|
||
size: { width: kind === "compose" ? 340 : 280, height: 170 },
|
||
data: {
|
||
templateType: `liblib-${kind}-${title}`,
|
||
title,
|
||
description: description || iconTitle,
|
||
summary: "前端节点已迁移，后端能力留空待补。",
|
||
status: "pending",
|
||
group: kind === "audio" ? "generation" : kind === "save" || kind === "preview" ? "output" : "tool",
|
||
accentColor:
|
||
kind === "audio"
|
||
? "#80ed99"
|
||
: kind === "save" || kind === "preview"
|
||
? "#70d6ff"
|
||
: "#ff8fab",
|
||
metadata: baseMetadata,
|
||
},
|
||
connections: [],
|
||
};
|
||
}
|
||
|
||
function getNodeLiblibTool(node: CanvasNode | null) {
|
||
const metadata = ((node?.data as any)?.metadata || {}) as Record<string, any>;
|
||
return (metadata.liblibTool || null) as
|
||
| (CapturedTool & {
|
||
properties?: Record<string, unknown>;
|
||
config?: Record<string, unknown>;
|
||
generateTypes?: unknown;
|
||
rules?: unknown;
|
||
})
|
||
| null;
|
||
}
|
||
|
||
function getNodeDraftValues(node: CanvasNode | null) {
|
||
const metadata = ((node?.data as any)?.metadata || {}) as Record<string, any>;
|
||
return (metadata.draftValues || {}) as Record<string, unknown>;
|
||
}
|
||
|
||
function getPropertyEntries(tool: ReturnType<typeof getNodeLiblibTool>) {
|
||
const properties = tool?.properties;
|
||
if (!properties || typeof properties !== "object") return [];
|
||
return Object.entries(properties).filter(([key]) => key !== "modeType");
|
||
}
|
||
|
||
function getPropertyLabel(key: string, config: unknown) {
|
||
if (config && typeof config === "object" && "displayName" in config) {
|
||
const displayName = (config as { displayName?: unknown }).displayName;
|
||
if (typeof displayName === "string" && displayName.trim()) return displayName;
|
||
}
|
||
const labels: Record<string, string> = {
|
||
count: "生成数量",
|
||
frameRate: "帧率",
|
||
lora: "风格",
|
||
media: "素材",
|
||
prompt: "提示词",
|
||
quality: "分辨率",
|
||
ratio: "比例",
|
||
resolution: "分辨率",
|
||
searchable: "联网搜索",
|
||
seed: "种子",
|
||
style: "模型",
|
||
template: "风格",
|
||
};
|
||
return labels[key] || key;
|
||
}
|
||
|
||
function getOptionValue(option: unknown) {
|
||
if (option && typeof option === "object" && "value" in option) {
|
||
return String((option as { value?: unknown }).value ?? "");
|
||
}
|
||
return String(option ?? "");
|
||
}
|
||
|
||
function getOptionLabel(option: unknown) {
|
||
if (option && typeof option === "object" && "displayName" in option) {
|
||
const label = (option as { displayName?: unknown }).displayName;
|
||
if (label) return String(label);
|
||
}
|
||
return getOptionValue(option);
|
||
}
|
||
|
||
function normalizeEnumOptions(config: unknown) {
|
||
if (Array.isArray(config)) return config;
|
||
if (config && typeof config === "object" && Array.isArray((config as { enum?: unknown[] }).enum)) {
|
||
return (config as { enum: unknown[] }).enum;
|
||
}
|
||
return [];
|
||
}
|
||
|
||
function getDefaultPropertyValue(key: string, config: unknown) {
|
||
if (config && typeof config === "object" && "default" in config) {
|
||
return String((config as { default?: unknown }).default ?? "");
|
||
}
|
||
const options = normalizeEnumOptions(config);
|
||
if (options.length > 0) return getOptionValue(options[0]);
|
||
if (typeof config === "boolean") return config ? "true" : "false";
|
||
if (key === "prompt") return "";
|
||
return "";
|
||
}
|
||
|
||
function rulesRequireMedia(tool: ReturnType<typeof getNodeLiblibTool>) {
|
||
const rules = tool?.rules;
|
||
if (!Array.isArray(rules)) return false;
|
||
return rules.some((rule) => {
|
||
if (!rule || typeof rule !== "object") return false;
|
||
const required = (rule as { require?: unknown }).require;
|
||
return Array.isArray(required) && required.map(String).includes("media");
|
||
});
|
||
}
|
||
|
||
function GlassButton({
|
||
active,
|
||
children,
|
||
className,
|
||
disabled,
|
||
onClick,
|
||
title,
|
||
}: {
|
||
active?: boolean;
|
||
children: React.ReactNode;
|
||
className?: string;
|
||
disabled?: boolean;
|
||
onClick?: () => void;
|
||
title?: string;
|
||
}) {
|
||
return (
|
||
<button
|
||
className={cn(
|
||
"flex h-10 min-w-10 items-center justify-center rounded-[8px] border border-white/8 bg-[#1d1d1d] px-3 text-[#d9d9d9] text-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_12px_30px_rgba(0,0,0,0.28)] transition hover:bg-[#282828] hover:text-white disabled:cursor-not-allowed disabled:opacity-60",
|
||
active && "border-white/18 bg-[#313131] text-white",
|
||
className
|
||
)}
|
||
disabled={disabled}
|
||
onClick={onClick}
|
||
title={title}
|
||
type="button"
|
||
>
|
||
{children}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function FloatingModal({
|
||
children,
|
||
onClose,
|
||
title,
|
||
width = 520,
|
||
}: {
|
||
children: React.ReactNode;
|
||
onClose: () => void;
|
||
title: string;
|
||
width?: number;
|
||
}) {
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-[90] flex items-center justify-center bg-black/68 backdrop-blur-[3px]"
|
||
data-canvas-overlay="true"
|
||
>
|
||
<div
|
||
className="max-h-[86vh] overflow-hidden rounded-[8px] border border-white/12 bg-[#202020] text-white shadow-[0_30px_100px_rgba(0,0,0,0.56)]"
|
||
style={{ width: `min(${width}px, calc(100vw - 32px))` }}
|
||
>
|
||
<div className="flex items-center justify-between border-white/8 border-b px-5 py-4">
|
||
<h2 className="font-semibold text-[16px]">{title}</h2>
|
||
<button
|
||
className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/62 transition hover:bg-white/8 hover:text-white"
|
||
onClick={onClose}
|
||
type="button"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
<div className="max-h-[calc(86vh-65px)] overflow-y-auto p-5">{children}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function LiblibVideoCanvasReplica({
|
||
canvasId,
|
||
isLoading = false,
|
||
}: LiblibVideoCanvasReplicaProps) {
|
||
const router = useRouter();
|
||
const nodes = useCanvasStore(canvasSelectors.nodes);
|
||
const selectedNodeIds = useCanvasStore(canvasSelectors.selectedNodeIds);
|
||
const viewport = useCanvasStore(canvasSelectors.viewport);
|
||
const tool = useCanvasStore(canvasSelectors.tool);
|
||
const projectTitle = useCanvasStore((state) => state.projectTitle);
|
||
const setProject = useCanvasStore((state) => state.setProject);
|
||
const setProjectTitle = useCanvasStore((state) => state.setProjectTitle);
|
||
const setTool = useCanvasStore((state) => state.setTool);
|
||
const setViewport = useCanvasStore((state) => state.setViewport);
|
||
const addNode = useCanvasStore((state) => state.addNode);
|
||
const addEdge = useCanvasStore((state) => state.addEdge);
|
||
const updateNode = useCanvasStore((state) => state.updateNode);
|
||
const selectNodes = useCanvasStore((state) => state.selectNodes);
|
||
const clearSelection = useCanvasStore((state) => state.clearSelection);
|
||
const loadCanvas = useCanvasStore((state) => state.loadCanvas);
|
||
const clearCanvas = useCanvasStore((state) => state.clearCanvas);
|
||
const getCanvasState = useCanvasStore((state) => state.getCanvasState);
|
||
const [activePanel, setActivePanel] = useState<ActivePanel>(null);
|
||
const [toolSearch, setToolSearch] = useState("");
|
||
const [toolTab, setToolTab] = useState<(typeof PANEL_TABS)[number]>("全部");
|
||
const [isTitleEditing, setIsTitleEditing] = useState(false);
|
||
const [draftTitle, setDraftTitle] = useState(projectTitle || "未命名");
|
||
const [isProjectLoading, setIsProjectLoading] = useState(true);
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
const [shareEnabled, setShareEnabled] = useState(false);
|
||
const [publishPublic, setPublishPublic] = useState(false);
|
||
|
||
const selectedNode = useMemo(
|
||
() => nodes.find((node) => selectedNodeIds.includes(node.id)) || null,
|
||
[nodes, selectedNodeIds]
|
||
);
|
||
const isBusy = isLoading || isProjectLoading;
|
||
|
||
useEffect(() => {
|
||
if (!isTitleEditing) {
|
||
setDraftTitle(projectTitle || "未命名视频画布");
|
||
}
|
||
}, [isTitleEditing, projectTitle]);
|
||
|
||
useEffect(() => {
|
||
let active = true;
|
||
|
||
async function loadTargetCanvas() {
|
||
setIsProjectLoading(true);
|
||
clearCanvas();
|
||
|
||
const result = await canvasService.getProject(canvasId);
|
||
if (!active) return;
|
||
|
||
if (result.success && result.data) {
|
||
setProject(canvasId, result.data.title || "未命名视频画布");
|
||
if (result.data.canvasData) {
|
||
loadCanvas(result.data.canvasData);
|
||
}
|
||
setIsProjectLoading(false);
|
||
return;
|
||
}
|
||
|
||
setProject(canvasId, "未命名视频画布");
|
||
await canvasService
|
||
.saveCanvasState(
|
||
canvasId,
|
||
{
|
||
nodes: [],
|
||
edges: [],
|
||
selectedNodeIds: [],
|
||
viewport: { x: 0, y: 0, zoom: 1 },
|
||
tool: "select",
|
||
},
|
||
"video"
|
||
)
|
||
.catch(() => undefined);
|
||
if (active) {
|
||
setIsProjectLoading(false);
|
||
}
|
||
}
|
||
|
||
void loadTargetCanvas();
|
||
|
||
return () => {
|
||
active = false;
|
||
};
|
||
}, [canvasId, clearCanvas, loadCanvas, setProject]);
|
||
|
||
const filteredTools = useMemo(() => {
|
||
const normalizedSearch = toolSearch.trim().toLowerCase();
|
||
return capturedTools.filter((item) => {
|
||
const type = getToolType(item);
|
||
const tabMatched =
|
||
toolTab === "全部" ||
|
||
(toolTab === "图片" && type === "image") ||
|
||
(toolTab === "视频" && type === "video") ||
|
||
(toolTab === "文本" && type === "text") ||
|
||
(toolTab === "音频" && type === "audio") ||
|
||
(toolTab === "组合" && type === "compose");
|
||
if (!tabMatched) return false;
|
||
if (!normalizedSearch) return true;
|
||
return [
|
||
item.modelName,
|
||
item.vendor,
|
||
item.scene,
|
||
item.toolKey,
|
||
item.modelKey,
|
||
...(item.modes || []),
|
||
]
|
||
.filter(Boolean)
|
||
.join(" ")
|
||
.toLowerCase()
|
||
.includes(normalizedSearch);
|
||
});
|
||
}, [toolSearch, toolTab]);
|
||
|
||
const saveCanvas = useCallback(async () => {
|
||
setIsSaving(true);
|
||
try {
|
||
const result = await canvasService.saveCanvasState(canvasId, getCanvasState(), "video");
|
||
if (!result.success) {
|
||
toast.error(result.error || "保存失败");
|
||
return;
|
||
}
|
||
toast.success("视频画布已保存");
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
}, [canvasId, getCanvasState]);
|
||
|
||
const commitTitle = useCallback(async () => {
|
||
const nextTitle = draftTitle.trim() || "未命名";
|
||
setProjectTitle(nextTitle);
|
||
setIsTitleEditing(false);
|
||
await canvasService.updateProject(canvasId, { title: nextTitle }, "video");
|
||
}, [canvasId, draftTitle, setProjectTitle]);
|
||
|
||
const getPlacement = useCallback(
|
||
(size: { width: number; height: number }, index = 0): Position => {
|
||
const origin = getVisibleOrigin(viewport);
|
||
const selected = selectedNode;
|
||
if (selected) {
|
||
return {
|
||
x: selected.position.x + selected.size.width + 180 + index * 48,
|
||
y: selected.position.y + selected.size.height / 2 - size.height / 2 + index * 36,
|
||
};
|
||
}
|
||
return {
|
||
x: origin.x + index * 110,
|
||
y: origin.y + index * 24,
|
||
};
|
||
},
|
||
[selectedNode, viewport]
|
||
);
|
||
|
||
const createTargetNode = useCallback(
|
||
(
|
||
payload: {
|
||
description?: string;
|
||
kind: TargetNodeKind;
|
||
metadata?: Record<string, unknown>;
|
||
title: string;
|
||
},
|
||
options?: {
|
||
position?: Position;
|
||
connectFromSelection?: boolean;
|
||
patchTool?: CapturedTool;
|
||
index?: number;
|
||
}
|
||
) => {
|
||
const size =
|
||
payload.kind === "video"
|
||
? { width: 300, height: 220 }
|
||
: payload.kind === "image"
|
||
? { width: 260, height: 220 }
|
||
: payload.kind === "text"
|
||
? { width: 300, height: 170 }
|
||
: { width: payload.kind === "compose" ? 340 : 280, height: 170 };
|
||
const nodeConfig = buildTargetCanvasNode({
|
||
...payload,
|
||
position: options?.position || getPlacement(size, options?.index || 0),
|
||
});
|
||
const nodeId = addNode(nodeConfig);
|
||
const sourceNodeId =
|
||
options?.connectFromSelection !== false && selectedNode ? selectedNode.id : null;
|
||
if (sourceNodeId && sourceNodeId !== nodeId) {
|
||
addEdge({ source: sourceNodeId, target: nodeId, type: "default" });
|
||
}
|
||
if (options?.patchTool) {
|
||
const createdNode = useCanvasStore.getState().nodes.find((node) => node.id === nodeId);
|
||
if (createdNode) {
|
||
updateNode(nodeId, patchNodeForCapturedTool(createdNode, options.patchTool));
|
||
}
|
||
}
|
||
selectNodes([nodeId]);
|
||
return nodeId;
|
||
},
|
||
[addEdge, addNode, getPlacement, selectNodes, selectedNode, updateNode]
|
||
);
|
||
|
||
const createToolNode = useCallback(
|
||
(capturedTool: CapturedTool) => {
|
||
const kind = inferNodeKindForTool(capturedTool);
|
||
createTargetNode(
|
||
{
|
||
kind,
|
||
title: getToolLabel(capturedTool),
|
||
description: `${capturedTool.vendor || "LibLib"} / ${capturedTool.scene || capturedTool.modelKey || "目标模块"}`,
|
||
metadata: {
|
||
source: "liblib-tool-spec",
|
||
},
|
||
},
|
||
{ patchTool: capturedTool }
|
||
);
|
||
toast.success(`已添加 ${getToolLabel(capturedTool)}`);
|
||
},
|
||
[createTargetNode]
|
||
);
|
||
|
||
const createStarter = useCallback(
|
||
(starter: (typeof STARTER_CARDS)[number]) => {
|
||
const origin = getVisibleOrigin(viewport);
|
||
const nodeIds = starter.nodes.map((item, index) => {
|
||
const position = {
|
||
x: origin.x + index * 390,
|
||
y: origin.y + (index % 2) * 18,
|
||
};
|
||
return addNode(
|
||
buildTargetCanvasNode({
|
||
kind: item.kind,
|
||
title: item.label,
|
||
description: starter.title,
|
||
metadata: {
|
||
source: "liblib-starter-card",
|
||
starterTitle: starter.title,
|
||
},
|
||
position,
|
||
})
|
||
);
|
||
});
|
||
nodeIds.slice(1).forEach((nodeId, index) => {
|
||
const source = nodeIds[index];
|
||
if (source && nodeId) {
|
||
addEdge({ source, target: nodeId, type: "default" });
|
||
}
|
||
});
|
||
if (nodeIds.length > 0) {
|
||
selectNodes([nodeIds[nodeIds.length - 1]]);
|
||
}
|
||
toast.success(`已创建 ${starter.title}`);
|
||
},
|
||
[addEdge, addNode, selectNodes, viewport]
|
||
);
|
||
|
||
const createWorkflowPresetNode = useCallback(
|
||
(workflow: (typeof capturedWorkflows)[number]) => {
|
||
createTargetNode(
|
||
{
|
||
kind: "workflow",
|
||
title: String(workflow.name || workflow.title || "工作流预设"),
|
||
description: String(workflow.description || "目标前端预设，后端执行待接入。"),
|
||
metadata: {
|
||
source: "liblib-workflow-preset",
|
||
workflowId: workflow.id || "",
|
||
workflowUuid: (workflow as any).uuid || "",
|
||
cover: (workflow as any).cover || "",
|
||
},
|
||
},
|
||
{ connectFromSelection: true }
|
||
);
|
||
toast.success("已添加目标工作流预设");
|
||
},
|
||
[createTargetNode]
|
||
);
|
||
|
||
const updateSelectedDraftValue = useCallback(
|
||
(key: string, value: unknown) => {
|
||
if (!selectedNode) return;
|
||
const data = selectedNode.data as Record<string, any>;
|
||
const metadata = (data.metadata || {}) as Record<string, any>;
|
||
updateNode(selectedNode.id, {
|
||
data: {
|
||
...data,
|
||
metadata: {
|
||
...metadata,
|
||
draftValues: {
|
||
...((metadata.draftValues || {}) as Record<string, unknown>),
|
||
[key]: value,
|
||
},
|
||
},
|
||
} as unknown as CanvasNode["data"],
|
||
});
|
||
},
|
||
[selectedNode, updateNode]
|
||
);
|
||
|
||
const copyShareLink = useCallback(async () => {
|
||
const url =
|
||
typeof window === "undefined"
|
||
? `/canvas/${canvasId}?mode=video&workspaceType=video`
|
||
: window.location.href;
|
||
await navigator.clipboard?.writeText(url).catch(() => undefined);
|
||
setShareEnabled(true);
|
||
toast.success("分享链接已复制");
|
||
}, [canvasId]);
|
||
|
||
const openPanel = useCallback((panel: Exclude<ActivePanel, null>) => {
|
||
setActivePanel((current) => (current === panel ? null : panel));
|
||
}, []);
|
||
|
||
return (
|
||
<div className="relative h-dvh w-full overflow-hidden bg-[#050607] text-white">
|
||
<div className="absolute inset-0 z-0">
|
||
<CanvasWorkspace
|
||
emptyStateDescription=""
|
||
onBlankCanvasDoubleClick={(payload) => {
|
||
clearSelection();
|
||
setActivePanel("add");
|
||
setViewport({
|
||
x: viewport.x,
|
||
y: viewport.y,
|
||
zoom: viewport.zoom,
|
||
});
|
||
}}
|
||
showEmptyState={false}
|
||
showZoomControls={false}
|
||
workspaceLabel="视频画布"
|
||
workspaceVariant="video"
|
||
/>
|
||
</div>
|
||
|
||
{isBusy ? (
|
||
<div className="absolute inset-0 z-[80] flex items-center justify-center bg-[#050607]/72 backdrop-blur-sm">
|
||
<div className="flex items-center gap-3 rounded-[8px] border border-white/10 bg-[#1d1d1d] px-4 py-3 text-white/78">
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
正在打开视频画布...
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<header className="pointer-events-none absolute top-0 right-0 left-0 z-30 flex h-[76px] items-start justify-between px-4 pt-5">
|
||
<div className="pointer-events-auto flex items-center gap-4">
|
||
<button
|
||
className="flex items-center gap-2 font-semibold text-white transition hover:text-white/78"
|
||
onClick={() => router.push("/")}
|
||
type="button"
|
||
>
|
||
<span className="relative h-4 w-6 rounded-[2px] border border-white/85">
|
||
<span className="absolute -right-1 top-1 h-2 w-3 rounded-[1px] bg-white" />
|
||
</span>
|
||
<span className="italic tracking-tight">Video Canvas</span>
|
||
</button>
|
||
|
||
<div className="h-5 w-px bg-white/14" />
|
||
|
||
{isTitleEditing ? (
|
||
<input
|
||
autoFocus
|
||
className="h-9 w-[220px] rounded-[8px] border border-white/12 bg-[#1b1b1b] px-3 text-sm text-white outline-none focus:border-white/28"
|
||
onBlur={() => void commitTitle()}
|
||
onChange={(event) => setDraftTitle(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") void commitTitle();
|
||
if (event.key === "Escape") setIsTitleEditing(false);
|
||
}}
|
||
value={draftTitle}
|
||
/>
|
||
) : (
|
||
<button
|
||
className="max-w-[260px] truncate text-left font-medium text-[15px] text-white/86 hover:text-white"
|
||
onClick={() => {
|
||
setDraftTitle(projectTitle || "未命名");
|
||
setIsTitleEditing(true);
|
||
}}
|
||
type="button"
|
||
>
|
||
{projectTitle || "未命名"}
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div className="pointer-events-auto flex items-center gap-2">
|
||
<GlassButton onClick={() => openPanel("skills")}>LibTV Skills</GlassButton>
|
||
<GlassButton disabled={isSaving} onClick={() => void saveCanvas()} title="保存">
|
||
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||
</GlassButton>
|
||
<GlassButton onClick={() => openPanel("share")} title="分享">
|
||
<Share2 className="h-4 w-4" />
|
||
</GlassButton>
|
||
<GlassButton onClick={() => openPanel("notifications")} title="通知">
|
||
<Bell className="h-4 w-4" />
|
||
</GlassButton>
|
||
<GlassButton
|
||
className="gap-2 px-4 text-cyan-300"
|
||
onClick={() => openPanel("member")}
|
||
>
|
||
<Crown className="h-4 w-4" />
|
||
会员超市
|
||
</GlassButton>
|
||
<GlassButton className="gap-2 px-3 text-amber-200" onClick={() => openPanel("member")}>
|
||
<Zap className="h-4 w-4" />
|
||
会员特惠
|
||
</GlassButton>
|
||
<GlassButton onClick={() => openPanel("account")} title="账号">
|
||
<UserRound className="h-4 w-4" />
|
||
</GlassButton>
|
||
</div>
|
||
</header>
|
||
|
||
<aside className="-translate-y-1/2 absolute top-1/2 left-4 z-30 flex flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#1c1c1c] p-2 shadow-[0_22px_70px_rgba(0,0,0,0.45)]">
|
||
{TOOLBAR_ITEMS.map((item, index) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<button
|
||
className={cn(
|
||
"relative flex h-11 w-11 items-center justify-center rounded-[8px] text-white/68 transition hover:bg-white/10 hover:text-white",
|
||
activePanel === item.id && "bg-white text-black hover:bg-white hover:text-black",
|
||
index === 0 && "mb-1"
|
||
)}
|
||
key={item.id}
|
||
onClick={() => openPanel(item.id)}
|
||
title={item.label}
|
||
type="button"
|
||
>
|
||
<Icon className="h-5 w-5" />
|
||
</button>
|
||
);
|
||
})}
|
||
</aside>
|
||
|
||
{activePanel === "add" ? (
|
||
<section className="absolute top-[86px] left-[82px] z-40 flex h-[min(720px,calc(100vh-116px))] w-[390px] flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.46)]">
|
||
<div className="border-white/8 border-b p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<div className="font-semibold text-[16px]">添加功能模块</div>
|
||
<div className="mt-1 text-[12px] text-white/46">
|
||
已迁移 {capturedCounts.tools || capturedTools.length} 个工具配置
|
||
</div>
|
||
</div>
|
||
<button
|
||
className="rounded-[8px] p-2 text-white/52 hover:bg-white/8 hover:text-white"
|
||
onClick={() => setActivePanel(null)}
|
||
type="button"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-4 flex items-center gap-2 rounded-[8px] border border-white/10 bg-black/22 px-3 py-2">
|
||
<Search className="h-4 w-4 text-white/42" />
|
||
<input
|
||
className="min-w-0 flex-1 bg-transparent text-[13px] text-white outline-none placeholder:text-white/32"
|
||
onChange={(event) => setToolSearch(event.target.value)}
|
||
placeholder="搜索模型、厂商、模式"
|
||
value={toolSearch}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||
{PANEL_TABS.map((tab) => (
|
||
<button
|
||
className={cn(
|
||
"rounded-[8px] border border-white/8 px-2.5 py-1 text-[12px] text-white/58 transition hover:bg-white/8 hover:text-white",
|
||
toolTab === tab && "border-white/20 bg-white text-black hover:bg-white hover:text-black"
|
||
)}
|
||
key={tab}
|
||
onClick={() => setToolTab(tab)}
|
||
type="button"
|
||
>
|
||
{tab}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
||
<div className="grid gap-2">
|
||
{filteredTools.map((capturedTool) => {
|
||
const type = getToolType(capturedTool);
|
||
const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
|
||
const Icon = meta.icon;
|
||
const modes = getToolModes(capturedTool);
|
||
return (
|
||
<button
|
||
className="group rounded-[8px] border border-white/8 bg-[#2a2a2a] p-3 text-left transition hover:border-white/18 hover:bg-[#323232]"
|
||
key={`${capturedTool.toolKey || capturedTool.modelKey}-${capturedTool.modelName}`}
|
||
onClick={() => createToolNode(capturedTool)}
|
||
type="button"
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<span
|
||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[8px] text-black"
|
||
style={{ backgroundColor: meta.color }}
|
||
>
|
||
<Icon className="h-4 w-4" />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block truncate font-medium text-[14px] text-white">
|
||
{getToolLabel(capturedTool)}
|
||
</span>
|
||
<span className="mt-1 flex flex-wrap gap-1.5">
|
||
<span className="rounded-[6px] bg-white/8 px-1.5 py-0.5 text-[11px] text-white/54">
|
||
{capturedTool.vendor || meta.label}
|
||
</span>
|
||
{modes.map((mode) => (
|
||
<span
|
||
className="rounded-[6px] bg-white/8 px-1.5 py-0.5 text-[11px] text-white/46"
|
||
key={mode}
|
||
>
|
||
{mode}
|
||
</span>
|
||
))}
|
||
</span>
|
||
</span>
|
||
<Plus className="mt-1 h-4 w-4 text-white/30 transition group-hover:text-white/80" />
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
|
||
{activePanel === "workflow" ? (
|
||
<section className="absolute top-[86px] left-[82px] z-40 h-[min(720px,calc(100vh-116px))] w-[410px] overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.46)]">
|
||
<div className="flex items-center justify-between border-white/8 border-b p-4">
|
||
<div>
|
||
<div className="font-semibold text-[16px]">目标工作流预设</div>
|
||
<div className="mt-1 text-[12px] text-white/46">
|
||
抓取到 {capturedWorkflows.length || 25} 个预设，后端执行先留空
|
||
</div>
|
||
</div>
|
||
<button
|
||
className="rounded-[8px] p-2 text-white/52 hover:bg-white/8 hover:text-white"
|
||
onClick={() => setActivePanel(null)}
|
||
type="button"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
<div className="h-[calc(100%-73px)] overflow-y-auto p-4">
|
||
<div className="grid gap-3">
|
||
{capturedWorkflows.map((workflow) => {
|
||
const cover = String((workflow as any).cover || "").trim();
|
||
return (
|
||
<button
|
||
className="group overflow-hidden rounded-[8px] border border-white/8 bg-[#2a2a2a] text-left transition hover:border-white/18 hover:bg-[#323232]"
|
||
key={`${workflow.id || ""}-${(workflow as any).uuid || workflow.name}`}
|
||
onClick={() => createWorkflowPresetNode(workflow)}
|
||
type="button"
|
||
>
|
||
{cover ? (
|
||
<div
|
||
className="h-24 bg-cover bg-center"
|
||
style={{
|
||
backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.18)), url(${cover})`,
|
||
}}
|
||
/>
|
||
) : (
|
||
<div className="flex h-24 items-center justify-center bg-white/6 text-white/34">
|
||
<GitBranch className="h-6 w-6" />
|
||
</div>
|
||
)}
|
||
<div className="p-3">
|
||
<div className="font-medium text-white">
|
||
{workflow.name || workflow.title || "未命名预设"}
|
||
</div>
|
||
<div className="mt-1 line-clamp-2 text-[12px] text-white/48">
|
||
{workflow.description || "目标前端工作流预设，执行接口待补充。"}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
|
||
{nodes.length === 0 && activePanel !== "add" && activePanel !== "workflow" ? (
|
||
<div className="-translate-x-1/2 -translate-y-1/2 absolute top-[52%] left-1/2 z-20 w-[min(900px,calc(100vw-180px))]">
|
||
<div className="mb-6 flex items-center justify-center gap-2 text-white/42 text-sm">
|
||
<MousePointer2 className="h-5 w-5" />
|
||
双击画布 自由生成节点
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-3">
|
||
{STARTER_CARDS.map((card) => (
|
||
<button
|
||
className={cn(
|
||
"group h-14 overflow-hidden rounded-[8px] border border-white/10 bg-gradient-to-r px-5 text-left shadow-[0_18px_42px_rgba(0,0,0,0.28)] transition hover:-translate-y-0.5 hover:border-white/20",
|
||
card.tone
|
||
)}
|
||
key={card.title}
|
||
onClick={() => createStarter(card)}
|
||
type="button"
|
||
>
|
||
<div className="font-medium text-[13px] text-white">{card.title}</div>
|
||
<div className="mt-1 text-[11px] text-white/44">{card.subtitle}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="absolute bottom-4 left-4 z-30 flex items-center gap-1 rounded-[8px] border border-white/10 bg-[#1d1d1d] p-1.5 text-white/70 shadow-[0_18px_46px_rgba(0,0,0,0.38)]">
|
||
<button
|
||
className={cn(
|
||
"flex h-8 w-8 items-center justify-center rounded-[8px] hover:bg-white/10 hover:text-white",
|
||
tool === "select" && "bg-white text-black hover:bg-white hover:text-black"
|
||
)}
|
||
onClick={() => setTool("select")}
|
||
title="选择"
|
||
type="button"
|
||
>
|
||
<MousePointer2 className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
className={cn(
|
||
"flex h-8 w-8 items-center justify-center rounded-[8px] hover:bg-white/10 hover:text-white",
|
||
tool === "pan" && "bg-white text-black hover:bg-white hover:text-black"
|
||
)}
|
||
onClick={() => setTool("pan")}
|
||
title="平移"
|
||
type="button"
|
||
>
|
||
<Box className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
className={cn(
|
||
"flex h-8 w-8 items-center justify-center rounded-[8px] hover:bg-white/10 hover:text-white",
|
||
tool === "draw" && "bg-white text-black hover:bg-white hover:text-black"
|
||
)}
|
||
onClick={() => setTool("draw")}
|
||
title="连线"
|
||
type="button"
|
||
>
|
||
<GitBranch className="h-4 w-4" />
|
||
</button>
|
||
<div className="mx-1 h-5 w-px bg-white/10" />
|
||
<button
|
||
className="flex h-8 w-8 items-center justify-center rounded-[8px] hover:bg-white/10 hover:text-white"
|
||
onClick={() => setViewport({ zoom: Math.max(0.1, viewport.zoom - 0.1) })}
|
||
title="缩小"
|
||
type="button"
|
||
>
|
||
<Minus className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
className="h-8 min-w-[62px] rounded-[8px] px-2 text-[13px] hover:bg-white/10 hover:text-white"
|
||
onClick={() => setViewport({ x: 0, y: 0, zoom: 1 })}
|
||
type="button"
|
||
>
|
||
{Math.round(viewport.zoom * 100)}%
|
||
</button>
|
||
<button
|
||
className="flex h-8 w-8 items-center justify-center rounded-[8px] hover:bg-white/10 hover:text-white"
|
||
onClick={() => setViewport({ zoom: Math.min(4, viewport.zoom + 0.1) })}
|
||
title="放大"
|
||
type="button"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
{selectedNode ? (
|
||
<TargetNodeInspector
|
||
node={selectedNode}
|
||
onChangeProperty={updateSelectedDraftValue}
|
||
onClose={clearSelection}
|
||
/>
|
||
) : null}
|
||
|
||
{activePanel === "assets" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="素材库">
|
||
<EmptyPanel
|
||
icon={FolderOpen}
|
||
title="素材接口待接入"
|
||
description="前端入口已经迁移，后续可接 `/api/canvas/media-asset/tag-tree`、上传、图库与项目素材列表。"
|
||
/>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "history" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="历史记录">
|
||
<div className="space-y-2">
|
||
{nodes.length === 0 ? (
|
||
<EmptyPanel
|
||
icon={Clock3}
|
||
title="暂无节点历史"
|
||
description="创建或执行节点后，这里可以接入草稿版本、生成记录和回滚。"
|
||
/>
|
||
) : (
|
||
nodes.slice(-12).reverse().map((node) => (
|
||
<button
|
||
className="flex w-full items-center justify-between rounded-[8px] border border-white/8 bg-white/5 px-3 py-2 text-left hover:bg-white/8"
|
||
key={node.id}
|
||
onClick={() => selectNodes([node.id])}
|
||
type="button"
|
||
>
|
||
<span>
|
||
<span className="block text-[13px] text-white/86">
|
||
{(node.data as any)?.title || (node.data as any)?.content?.slice?.(0, 18) || node.type}
|
||
</span>
|
||
<span className="text-[11px] text-white/38">{node.type}</span>
|
||
</span>
|
||
<Eye className="h-4 w-4 text-white/38" />
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "help" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="快捷键">
|
||
<div className="grid gap-2 text-[13px] text-white/70">
|
||
{[
|
||
["V", "选择工具"],
|
||
["H / 空格拖动", "平移画布"],
|
||
["L", "工作流连线"],
|
||
["⌘ / Ctrl + S", "保存"],
|
||
["双击空白", "打开添加模块"],
|
||
["双击连线", "删除连线"],
|
||
].map(([key, label]) => (
|
||
<div className="flex items-center justify-between rounded-[8px] bg-white/5 px-3 py-2" key={key}>
|
||
<span>{label}</span>
|
||
<span className="rounded-[6px] bg-white/10 px-2 py-1 font-mono text-white/58">{key}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "support" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="支持中心">
|
||
<EmptyPanel
|
||
icon={Headphones}
|
||
title="客服与反馈占位"
|
||
description="这里后续接入工单、飞书/钉钉客服或帮助文档。"
|
||
/>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "skills" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="LibTV Skills">
|
||
<div className="space-y-4">
|
||
<EmptyPanel
|
||
icon={KeyRound}
|
||
title="OpenAPI Access Key 占位"
|
||
description="抓取页会打开 access key 管理弹窗；当前先保留前端入口，后续接入账号体系。"
|
||
/>
|
||
<div className="rounded-[8px] border border-white/8 bg-black/20 p-3">
|
||
<div className="text-[12px] text-white/42">能力覆盖</div>
|
||
<div className="mt-2 grid grid-cols-5 gap-2">
|
||
{Object.entries(capturedCounts.byType || {}).map(([type, count]) => {
|
||
const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
|
||
return (
|
||
<div className="rounded-[8px] bg-white/5 p-2 text-center" key={type}>
|
||
<div className="text-[16px] text-white">{String(count)}</div>
|
||
<div className="mt-1 text-[11px] text-white/42">{meta.label}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "share" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="发布与分享">
|
||
<div className="space-y-4">
|
||
<div className="rounded-[8px] border border-white/8 bg-white/5 p-4">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div>
|
||
<div className="font-medium">分享链接</div>
|
||
<div className="mt-1 text-[12px] text-white/42">
|
||
打开后可查看当前视频画布，权限控制后续接入。
|
||
</div>
|
||
</div>
|
||
<button
|
||
className="rounded-[8px] bg-white px-3 py-2 font-medium text-black text-sm hover:bg-white/88"
|
||
onClick={() => void copyShareLink()}
|
||
type="button"
|
||
>
|
||
<Copy className="mr-1 inline h-4 w-4" />
|
||
复制
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-[8px] border border-white/8 bg-white/5 p-4">
|
||
<span className="text-sm">启用分享</span>
|
||
<button
|
||
className={cn(
|
||
"relative h-6 w-11 rounded-full transition",
|
||
shareEnabled ? "bg-blue-500" : "bg-white/18"
|
||
)}
|
||
onClick={() => setShareEnabled((value) => !value)}
|
||
type="button"
|
||
>
|
||
<span
|
||
className={cn(
|
||
"absolute top-1 h-4 w-4 rounded-full bg-white transition",
|
||
shareEnabled ? "left-6" : "left-1"
|
||
)}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<button
|
||
className="w-full rounded-[8px] bg-blue-500 px-4 py-3 font-semibold text-white hover:bg-blue-400"
|
||
onClick={() => setActivePanel("publish")}
|
||
type="button"
|
||
>
|
||
在作品广场发布
|
||
</button>
|
||
</div>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "publish" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="发布作品到视频画布广场" width={560}>
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<UploadBox label="选择视频" />
|
||
<UploadBox label="选择封面" hint="建议上传横版图片" />
|
||
</div>
|
||
<label className="block">
|
||
<span className="mb-2 block text-[13px] text-white/72">作品名称 *</span>
|
||
<input
|
||
className="h-10 w-full rounded-[8px] border border-white/10 bg-black/20 px-3 text-sm outline-none focus:border-white/24"
|
||
defaultValue={projectTitle || "未命名"}
|
||
/>
|
||
</label>
|
||
<label className="block">
|
||
<span className="mb-2 block text-[13px] text-white/72">作品描述</span>
|
||
<textarea
|
||
className="min-h-[82px] w-full rounded-[8px] border border-white/10 bg-black/20 px-3 py-2 text-sm outline-none focus:border-white/24"
|
||
placeholder="请输入作品描述"
|
||
/>
|
||
</label>
|
||
<div className="flex items-center justify-between rounded-[8px] border border-white/8 bg-white/5 p-3">
|
||
<span className="text-sm">公开画布</span>
|
||
<button
|
||
className={cn(
|
||
"relative h-6 w-11 rounded-full transition",
|
||
publishPublic ? "bg-blue-500" : "bg-white/18"
|
||
)}
|
||
onClick={() => setPublishPublic((value) => !value)}
|
||
type="button"
|
||
>
|
||
<span
|
||
className={cn(
|
||
"absolute top-1 h-4 w-4 rounded-full bg-white transition",
|
||
publishPublic ? "left-6" : "left-1"
|
||
)}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<button
|
||
className="w-full rounded-[8px] bg-blue-500 px-4 py-3 font-semibold text-white hover:bg-blue-400"
|
||
onClick={() => toast.info("发布接口待接入，前端表单已迁移。")}
|
||
type="button"
|
||
>
|
||
发布并投稿
|
||
</button>
|
||
</div>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "member" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="会员中心">
|
||
<EmptyPanel
|
||
icon={Crown}
|
||
title="会员/积分接口待接入"
|
||
description="已保留会员超市、特惠倒计时和积分入口，后续接入支付和权益接口。"
|
||
/>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "notifications" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="通知">
|
||
<EmptyPanel
|
||
icon={Bell}
|
||
title="暂无通知"
|
||
description="后续可接入生成任务、发布审核、系统消息。"
|
||
/>
|
||
</FloatingModal>
|
||
) : null}
|
||
|
||
{activePanel === "account" ? (
|
||
<FloatingModal onClose={() => setActivePanel(null)} title="账户">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-3 rounded-[8px] bg-white/5 p-3">
|
||
<span className="flex h-11 w-11 items-center justify-center rounded-full bg-blue-500 text-white">
|
||
<UserRound className="h-5 w-5" />
|
||
</span>
|
||
<div>
|
||
<div className="font-medium">当前用户</div>
|
||
<div className="text-[12px] text-white/42">登录体系沿用现有项目</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
className="flex w-full items-center gap-2 rounded-[8px] border border-white/8 bg-white/5 px-3 py-2 text-left text-white/72 hover:bg-white/8"
|
||
onClick={() => toast.info("账户设置入口待接入。")}
|
||
type="button"
|
||
>
|
||
<Lock className="h-4 w-4" />
|
||
账户管理
|
||
</button>
|
||
</div>
|
||
</FloatingModal>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TargetNodeInspector({
|
||
node,
|
||
onChangeProperty,
|
||
onClose,
|
||
}: {
|
||
node: CanvasNode;
|
||
onChangeProperty: (key: string, value: unknown) => void;
|
||
onClose: () => void;
|
||
}) {
|
||
const tool = getNodeLiblibTool(node);
|
||
const draftValues = getNodeDraftValues(node);
|
||
const entries = getPropertyEntries(tool);
|
||
const nodeData = node.data as Record<string, any>;
|
||
const title =
|
||
nodeData.title ||
|
||
tool?.modelName ||
|
||
String(nodeData.content || node.type).split("\n")[0] ||
|
||
"目标模块";
|
||
const type = String(tool?.type || node.type || "module");
|
||
const modeLabels = (tool?.modes || []).map(String).filter(Boolean);
|
||
const propertyCount = entries.length;
|
||
|
||
return (
|
||
<aside
|
||
className="absolute top-[86px] right-4 z-30 flex max-h-[calc(100vh-110px)] w-[340px] flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] text-white shadow-[0_28px_90px_rgba(0,0,0,0.46)]"
|
||
data-canvas-overlay="true"
|
||
>
|
||
<div className="flex items-start justify-between gap-3 border-white/8 border-b p-4">
|
||
<div className="min-w-0">
|
||
<div className="truncate font-semibold text-[15px]">{title}</div>
|
||
<div className="mt-1 flex flex-wrap gap-1.5">
|
||
<span className="rounded-[6px] bg-white/8 px-2 py-0.5 text-[11px] text-white/52">
|
||
{tool?.vendor || type}
|
||
</span>
|
||
<span className="rounded-[6px] bg-amber-300/12 px-2 py-0.5 text-[11px] text-amber-100/80">
|
||
后端待接入
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
className="rounded-[8px] p-2 text-white/52 hover:bg-white/8 hover:text-white"
|
||
onClick={onClose}
|
||
type="button"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="min-h-0 flex-1 overflow-y-auto p-4">
|
||
<div className="space-y-4">
|
||
{modeLabels.length > 0 ? (
|
||
<div>
|
||
<div className="mb-2 text-[12px] text-white/42">输入模式</div>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{modeLabels.map((mode) => (
|
||
<span className="rounded-[6px] bg-white/8 px-2 py-1 text-[11px] text-white/62" key={mode}>
|
||
{mode}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{rulesRequireMedia(tool) ? (
|
||
<div>
|
||
<div className="mb-2 text-[12px] text-white/42">素材输入</div>
|
||
<button
|
||
className="flex h-24 w-full flex-col items-center justify-center rounded-[8px] border border-dashed border-white/16 bg-black/20 text-white/52 transition hover:border-white/28 hover:text-white"
|
||
onClick={() => toast.info("素材上传和选择接口待接入。")}
|
||
type="button"
|
||
>
|
||
<Plus className="h-5 w-5" />
|
||
<span className="mt-2 text-[12px]">添加图片 / 视频素材</span>
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
|
||
{propertyCount > 0 ? (
|
||
<div className="space-y-4">
|
||
{entries.map(([key, config]) => (
|
||
<TargetPropertyControl
|
||
config={config}
|
||
key={key}
|
||
propertyKey={key}
|
||
value={draftValues[key]}
|
||
onChange={(value) => onChangeProperty(key, value)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-[8px] border border-white/8 bg-white/5 p-4 text-[13px] text-white/52">
|
||
此模块未暴露可配置参数。
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
className="w-full rounded-[8px] bg-white px-4 py-3 font-semibold text-black hover:bg-white/88"
|
||
onClick={() => toast.info("生成执行接口待接入，当前仅保留目标前端交互。")}
|
||
type="button"
|
||
>
|
||
生成
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
function TargetPropertyControl({
|
||
config,
|
||
onChange,
|
||
propertyKey,
|
||
value,
|
||
}: {
|
||
config: unknown;
|
||
onChange: (value: unknown) => void;
|
||
propertyKey: string;
|
||
value: unknown;
|
||
}) {
|
||
const label = getPropertyLabel(propertyKey, config);
|
||
const options = normalizeEnumOptions(config);
|
||
const current = String(value ?? getDefaultPropertyValue(propertyKey, config));
|
||
const component =
|
||
config && typeof config === "object" && "component" in config
|
||
? String((config as { component?: unknown }).component || "")
|
||
: "";
|
||
|
||
if (propertyKey === "prompt") {
|
||
return (
|
||
<label className="block">
|
||
<span className="mb-2 block text-[12px] text-white/62">{label}</span>
|
||
<textarea
|
||
className="min-h-[108px] w-full rounded-[8px] border border-white/10 bg-black/20 px-3 py-2 text-[13px] text-white outline-none placeholder:text-white/28 focus:border-white/24"
|
||
onChange={(event) => onChange(event.target.value)}
|
||
placeholder="输入提示词、镜头、角色或限制条件"
|
||
value={String(value ?? "")}
|
||
/>
|
||
</label>
|
||
);
|
||
}
|
||
|
||
if (component === "switch" || typeof config === "boolean") {
|
||
const enabled = current === "true" || current === "1";
|
||
return (
|
||
<div className="flex items-center justify-between rounded-[8px] border border-white/8 bg-white/5 px-3 py-2">
|
||
<span className="text-[13px] text-white/72">{label}</span>
|
||
<button
|
||
className={cn("relative h-6 w-11 rounded-full transition", enabled ? "bg-blue-500" : "bg-white/18")}
|
||
onClick={() => onChange(enabled ? "0" : "1")}
|
||
type="button"
|
||
>
|
||
<span
|
||
className={cn(
|
||
"absolute top-1 h-4 w-4 rounded-full bg-white transition",
|
||
enabled ? "left-6" : "left-1"
|
||
)}
|
||
/>
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (options.length > 0) {
|
||
return (
|
||
<div>
|
||
<div className="mb-2 text-[12px] text-white/62">{label}</div>
|
||
{options.length > 7 ? (
|
||
<select
|
||
className="h-10 w-full rounded-[8px] border border-white/10 bg-black/20 px-3 text-[13px] text-white outline-none focus:border-white/24"
|
||
onChange={(event) => onChange(event.target.value)}
|
||
value={current}
|
||
>
|
||
{options.map((option) => (
|
||
<option className="bg-[#202020] text-white" key={getOptionValue(option)} value={getOptionValue(option)}>
|
||
{getOptionLabel(option)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
) : (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{options.map((option) => {
|
||
const optionValue = getOptionValue(option);
|
||
return (
|
||
<button
|
||
className={cn(
|
||
"rounded-[8px] border border-white/8 px-3 py-1.5 text-[12px] text-white/62 transition hover:bg-white/8 hover:text-white",
|
||
current === optionValue && "border-white/20 bg-white text-black hover:bg-white hover:text-black"
|
||
)}
|
||
key={optionValue}
|
||
onClick={() => onChange(optionValue)}
|
||
type="button"
|
||
>
|
||
{getOptionLabel(option)}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (
|
||
config &&
|
||
typeof config === "object" &&
|
||
"maxCount" in config &&
|
||
(propertyKey === "lora" || propertyKey === "template")
|
||
) {
|
||
return (
|
||
<div>
|
||
<div className="mb-2 text-[12px] text-white/62">{label}</div>
|
||
<button
|
||
className="h-10 w-full rounded-[8px] border border-white/10 bg-black/20 px-3 text-left text-[13px] text-white/52 hover:border-white/22 hover:text-white"
|
||
onClick={() => toast.info(`${label}选择器待接入。`)}
|
||
type="button"
|
||
>
|
||
选择{label}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<label className="block">
|
||
<span className="mb-2 block text-[12px] text-white/62">{label}</span>
|
||
<input
|
||
className="h-10 w-full rounded-[8px] border border-white/10 bg-black/20 px-3 text-[13px] text-white outline-none placeholder:text-white/28 focus:border-white/24"
|
||
onChange={(event) => onChange(event.target.value)}
|
||
placeholder="待填写"
|
||
value={String(value ?? "")}
|
||
/>
|
||
</label>
|
||
);
|
||
}
|
||
|
||
function EmptyPanel({
|
||
description,
|
||
icon: Icon,
|
||
title,
|
||
}: {
|
||
description: string;
|
||
icon: LucideIcon;
|
||
title: string;
|
||
}) {
|
||
return (
|
||
<div className="rounded-[8px] border border-white/8 bg-white/5 p-6 text-center">
|
||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-[8px] bg-white/8 text-white/72">
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
<div className="mt-4 font-semibold">{title}</div>
|
||
<p className="mx-auto mt-2 max-w-[380px] text-[13px] text-white/48 leading-6">
|
||
{description}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function UploadBox({ hint, label }: { hint?: string; label: string }) {
|
||
return (
|
||
<button
|
||
className="flex h-32 flex-col items-center justify-center rounded-[8px] border border-white/10 bg-white/8 text-white/58 transition hover:bg-white/12 hover:text-white"
|
||
onClick={() => toast.info(`${label}接口待接入。`)}
|
||
type="button"
|
||
>
|
||
<Plus className="h-6 w-6" />
|
||
<span className="mt-2 text-sm">{label}</span>
|
||
{hint ? <span className="mt-1 text-[11px] text-white/34">{hint}</span> : null}
|
||
</button>
|
||
);
|
||
}
|