c2a39257ff
- Introduce a new workflow editor component for visualizing and managing workflows, allowing users to add nodes and define connections. - Implement backend support for node types, including validation and constraints for workflow graphs. - Add new API endpoints for retrieving node types and their specifications. - Enhance the AssistantPage to integrate the workflow editor, enabling users to create and edit workflows directly. - Update frontend components to support new workflow functionalities, including condition edges and generic nodes. - Refactor existing code to accommodate the new workflow features and improve overall structure.
663 lines
22 KiB
TypeScript
663 lines
22 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 工作流可视化编辑器。基于 @xyflow/react,样式套用 ai-video 设计 token。
|
|
*
|
|
* 工具栏:添加节点(弹窗选类型)、工作流设置(ASR/LLM/TTS、是否允许打断)。
|
|
* 节点与条件边:悬停/选中出现「编辑 / 删除」按钮,编辑统一用弹出对话框。
|
|
* 节点目录来自后端 /api/node-types。数据通过 value/onChange 与外部 graph 同步。
|
|
*/
|
|
|
|
import {
|
|
addEdge,
|
|
Background,
|
|
BackgroundVariant,
|
|
type Connection,
|
|
Controls,
|
|
type Edge,
|
|
MiniMap,
|
|
type Node,
|
|
Panel,
|
|
ReactFlow,
|
|
ReactFlowProvider,
|
|
useEdgesState,
|
|
useNodesState,
|
|
useReactFlow,
|
|
} from "@xyflow/react";
|
|
import "@xyflow/react/dist/style.css";
|
|
import { Loader2, Plus, Settings2, Trash2 } from "lucide-react";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
import { edgeTypes } from "./ConditionEdge";
|
|
import {
|
|
EdgeActionContext,
|
|
NodeActionContext,
|
|
NodeSpecsContext,
|
|
} from "./context";
|
|
import { nodeTypes } from "./GenericNode";
|
|
import {
|
|
accentVar,
|
|
defaultGraph,
|
|
type NodeSpecMap,
|
|
type RuntimeNodeSpec,
|
|
type WorkflowGraph,
|
|
type WorkflowNodeData,
|
|
type WorkflowNodeType,
|
|
} from "./specs";
|
|
import { useNodeSpecs } from "./useNodeSpecs";
|
|
|
|
export type WorkflowSettings = {
|
|
llm?: string;
|
|
asr?: string;
|
|
tts?: string;
|
|
allowInterrupt: boolean;
|
|
};
|
|
|
|
export type ModelOption = { value: string; label: string };
|
|
|
|
export type WorkflowEditorProps = {
|
|
value?: WorkflowGraph;
|
|
onChange?: (graph: WorkflowGraph) => void;
|
|
settings: WorkflowSettings;
|
|
onSettingsChange: (settings: WorkflowSettings) => void;
|
|
modelOptions: { llm: ModelOption[]; asr: ModelOption[]; tts: ModelOption[] };
|
|
};
|
|
|
|
let nodeSeq = 0;
|
|
const NONE = "__none__";
|
|
|
|
function toFlow(graph: WorkflowGraph): { nodes: Node[]; edges: Edge[] } {
|
|
return {
|
|
nodes: graph.nodes.map((n) => ({
|
|
id: n.id,
|
|
type: n.type,
|
|
position: n.position,
|
|
data: n.data,
|
|
})),
|
|
edges: graph.edges.map((e) => ({
|
|
id: e.id,
|
|
type: "condition",
|
|
source: e.source,
|
|
target: e.target,
|
|
data: e.data ?? {},
|
|
})),
|
|
};
|
|
}
|
|
|
|
function fromFlow(nodes: Node[], edges: Edge[]): WorkflowGraph {
|
|
return {
|
|
nodes: nodes.map((n) => ({
|
|
id: n.id,
|
|
type: n.type as WorkflowNodeType,
|
|
position: n.position,
|
|
data: n.data as WorkflowNodeData,
|
|
})),
|
|
edges: edges.map((e) => ({
|
|
id: e.id,
|
|
source: e.source,
|
|
target: e.target,
|
|
data: (e.data as { condition?: string; label?: string }) ?? {},
|
|
})),
|
|
};
|
|
}
|
|
|
|
function Canvas({
|
|
value,
|
|
onChange,
|
|
settings,
|
|
onSettingsChange,
|
|
modelOptions,
|
|
specsByType,
|
|
}: WorkflowEditorProps & { specsByType: NodeSpecMap }) {
|
|
const initial = useMemo(() => toFlow(value ?? defaultGraph()), [value]);
|
|
const [nodes, setNodes, onNodesChange] = useNodesState(initial.nodes);
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState(initial.edges);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [editingEdgeId, setEditingEdgeId] = useState<string | null>(null);
|
|
const [addOpen, setAddOpen] = useState(false);
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
const { screenToFlowPosition } = useReactFlow();
|
|
|
|
// 回传画布状态给外部(助手 graph)。用 ref 避免把 onChange 放进依赖导致循环。
|
|
const onChangeRef = useRef(onChange);
|
|
useEffect(() => {
|
|
onChangeRef.current = onChange;
|
|
}, [onChange]);
|
|
useEffect(() => {
|
|
onChangeRef.current?.(fromFlow(nodes, edges));
|
|
}, [nodes, edges]);
|
|
|
|
const onConnect = useCallback(
|
|
(connection: Connection) => {
|
|
setEdges((eds) =>
|
|
addEdge(
|
|
{
|
|
...connection,
|
|
id: `e-${connection.source}-${connection.target}-${Date.now()}`,
|
|
type: "condition",
|
|
animated: true,
|
|
data: {},
|
|
},
|
|
eds,
|
|
),
|
|
);
|
|
},
|
|
[setEdges],
|
|
);
|
|
|
|
// 连线约束:不能连入开始节点(无入边句柄),不能自连。
|
|
const isValidConnection = useCallback(
|
|
(c: Connection | Edge) => {
|
|
if (c.source === c.target) return false;
|
|
const target = nodes.find((n) => n.id === c.target);
|
|
if (!target) return false;
|
|
const spec = specsByType[target.type as string];
|
|
return !!spec?.hasTarget;
|
|
},
|
|
[nodes, specsByType],
|
|
);
|
|
|
|
const addNode = useCallback(
|
|
(spec: RuntimeNodeSpec) => {
|
|
nodeSeq += 1;
|
|
const id = `${spec.type}-${Date.now()}-${nodeSeq}`;
|
|
const position = screenToFlowPosition({
|
|
x: window.innerWidth / 2,
|
|
y: window.innerHeight / 2,
|
|
});
|
|
const data: WorkflowNodeData = { name: spec.displayName };
|
|
if (spec.type === "agentNode") {
|
|
data.allowInterrupt = true;
|
|
data.prompt = "";
|
|
}
|
|
setNodes((ns) => [...ns, { id, type: spec.type, position, data }]);
|
|
setAddOpen(false);
|
|
setEditingId(id);
|
|
},
|
|
[screenToFlowPosition, setNodes],
|
|
);
|
|
|
|
const updateNodeData = useCallback(
|
|
(id: string, patch: Partial<WorkflowNodeData>) => {
|
|
setNodes((ns) =>
|
|
ns.map((n) =>
|
|
n.id === id ? { ...n, data: { ...n.data, ...patch } } : n,
|
|
),
|
|
);
|
|
},
|
|
[setNodes],
|
|
);
|
|
|
|
const deleteNode = useCallback(
|
|
(id: string) => {
|
|
setNodes((ns) => ns.filter((n) => n.id !== id));
|
|
setEdges((es) => es.filter((e) => e.source !== id && e.target !== id));
|
|
setEditingId((cur) => (cur === id ? null : cur));
|
|
},
|
|
[setNodes, setEdges],
|
|
);
|
|
|
|
const updateEdgeData = useCallback(
|
|
(id: string, patch: { condition?: string; label?: string }) => {
|
|
setEdges((es) =>
|
|
es.map((e) =>
|
|
e.id === id ? { ...e, data: { ...(e.data ?? {}), ...patch } } : e,
|
|
),
|
|
);
|
|
},
|
|
[setEdges],
|
|
);
|
|
|
|
const deleteEdge = useCallback(
|
|
(id: string) => {
|
|
setEdges((es) => es.filter((e) => e.id !== id));
|
|
setEditingEdgeId((cur) => (cur === id ? null : cur));
|
|
},
|
|
[setEdges],
|
|
);
|
|
|
|
const nodeActions = useMemo(
|
|
() => ({ edit: setEditingId, remove: deleteNode }),
|
|
[deleteNode],
|
|
);
|
|
const edgeActions = useMemo(
|
|
() => ({ edit: setEditingEdgeId, remove: deleteEdge }),
|
|
[deleteEdge],
|
|
);
|
|
|
|
const editingNode = nodes.find((n) => n.id === editingId);
|
|
const editingSpec = editingNode ? specsByType[editingNode.type as string] : null;
|
|
const editingEdge = edges.find((e) => e.id === editingEdgeId);
|
|
const addableSpecs = Object.values(specsByType).filter((s) => s.addable);
|
|
|
|
return (
|
|
<NodeSpecsContext.Provider value={specsByType}>
|
|
<NodeActionContext.Provider value={nodeActions}>
|
|
<EdgeActionContext.Provider value={edgeActions}>
|
|
<div className="h-full w-full overflow-hidden rounded-2xl border border-hairline bg-canvas-soft">
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
nodeTypes={nodeTypes}
|
|
edgeTypes={edgeTypes}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onConnect={onConnect}
|
|
isValidConnection={isValidConnection}
|
|
onPaneClick={() => {
|
|
setEditingId(null);
|
|
setEditingEdgeId(null);
|
|
}}
|
|
fitView
|
|
proOptions={{ hideAttribution: true }}
|
|
defaultEdgeOptions={{ type: "condition", animated: true }}
|
|
className="bg-canvas-soft"
|
|
>
|
|
<Background
|
|
variant={BackgroundVariant.Dots}
|
|
gap={20}
|
|
size={1}
|
|
color="var(--hairline-strong)"
|
|
/>
|
|
<Controls className="!rounded-xl !border !border-hairline !bg-card !shadow-sm [&_button]:!border-hairline [&_button]:!bg-card [&_button]:!text-foreground" />
|
|
<MiniMap
|
|
pannable
|
|
zoomable
|
|
className="!rounded-xl !border !border-hairline !bg-card"
|
|
maskColor="color-mix(in srgb, var(--canvas-soft) 70%, transparent)"
|
|
nodeColor="var(--surface-strong)"
|
|
/>
|
|
<Panel position="top-left" className="flex gap-2">
|
|
<Button size="sm" className="gap-2" onClick={() => setAddOpen(true)}>
|
|
<Plus size={15} />
|
|
添加节点
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="gap-2 border-hairline-strong bg-card text-foreground hover:bg-surface-strong"
|
|
onClick={() => setSettingsOpen(true)}
|
|
>
|
|
<Settings2 size={15} />
|
|
工作流设置
|
|
</Button>
|
|
</Panel>
|
|
</ReactFlow>
|
|
|
|
{/* 添加节点弹窗 */}
|
|
<Dialog open={addOpen} onOpenChange={setAddOpen}>
|
|
<DialogContent className="sm:max-w-[460px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="font-display text-ink">
|
|
添加节点
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
选择要添加到画布的节点类型。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-2 py-2">
|
|
{addableSpecs.length === 0 && (
|
|
<p className="text-sm text-muted-soft">暂无可添加的节点类型。</p>
|
|
)}
|
|
{addableSpecs.map((spec) => {
|
|
const Icon = spec.icon;
|
|
return (
|
|
<button
|
|
key={spec.type}
|
|
type="button"
|
|
className="flex items-start gap-3 rounded-xl border border-hairline bg-card p-3 text-left transition-colors hover:border-primary hover:bg-surface-strong/40"
|
|
onClick={() => addNode(spec)}
|
|
>
|
|
<div
|
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-ink"
|
|
style={{
|
|
backgroundImage: `radial-gradient(circle at 30% 30%, color-mix(in srgb, var(${accentVar(spec.accent)}) 70%, transparent), color-mix(in srgb, var(${accentVar(spec.accent)}) 35%, transparent))`,
|
|
}}
|
|
>
|
|
<Icon size={18} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-foreground">
|
|
{spec.displayName}
|
|
</div>
|
|
<div className="mt-0.5 text-xs leading-5 text-muted-foreground">
|
|
{spec.description}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 工作流设置弹窗 */}
|
|
<Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
|
|
<DialogContent className="sm:max-w-[460px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="font-display text-ink">
|
|
工作流设置
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
配置整个工作流使用的语音与大模型,以及交互策略。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-5 py-2">
|
|
<ModelSelect
|
|
label="大模型(LLM)"
|
|
value={settings.llm}
|
|
options={modelOptions.llm}
|
|
onChange={(v) => onSettingsChange({ ...settings, llm: v })}
|
|
/>
|
|
<ModelSelect
|
|
label="语音识别(ASR)"
|
|
value={settings.asr}
|
|
options={modelOptions.asr}
|
|
onChange={(v) => onSettingsChange({ ...settings, asr: v })}
|
|
/>
|
|
<ModelSelect
|
|
label="语音合成(TTS)"
|
|
value={settings.tts}
|
|
options={modelOptions.tts}
|
|
onChange={(v) => onSettingsChange({ ...settings, tts: v })}
|
|
/>
|
|
<label className="flex items-center justify-between gap-3 pt-1">
|
|
<span className="text-sm font-medium text-foreground">
|
|
允许用户打断
|
|
</span>
|
|
<Switch
|
|
checked={settings.allowInterrupt}
|
|
onCheckedChange={(checked) =>
|
|
onSettingsChange({ ...settings, allowInterrupt: checked })
|
|
}
|
|
/>
|
|
</label>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button onClick={() => setSettingsOpen(false)}>完成</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 节点编辑弹窗 */}
|
|
<Dialog
|
|
open={!!editingNode}
|
|
onOpenChange={(open) => !open && setEditingId(null)}
|
|
>
|
|
<DialogContent className="sm:max-w-[460px]">
|
|
{editingNode && editingSpec && (
|
|
<NodeForm
|
|
key={editingNode.id}
|
|
spec={editingSpec}
|
|
data={editingNode.data as WorkflowNodeData}
|
|
onSave={(patch) => {
|
|
updateNodeData(editingNode.id, patch);
|
|
setEditingId(null);
|
|
}}
|
|
onDelete={
|
|
editingSpec.addable
|
|
? () => deleteNode(editingNode.id)
|
|
: undefined
|
|
}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 条件编辑弹窗 */}
|
|
<Dialog
|
|
open={!!editingEdge}
|
|
onOpenChange={(open) => !open && setEditingEdgeId(null)}
|
|
>
|
|
<DialogContent className="sm:max-w-[460px]">
|
|
{editingEdge && (
|
|
<EdgeForm
|
|
key={editingEdge.id}
|
|
edge={editingEdge}
|
|
onSave={(patch) => {
|
|
updateEdgeData(editingEdge.id, patch);
|
|
setEditingEdgeId(null);
|
|
}}
|
|
onDelete={() => deleteEdge(editingEdge.id)}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</EdgeActionContext.Provider>
|
|
</NodeActionContext.Provider>
|
|
</NodeSpecsContext.Provider>
|
|
);
|
|
}
|
|
|
|
function ModelSelect({
|
|
label,
|
|
value,
|
|
options,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
value?: string;
|
|
options: ModelOption[];
|
|
onChange: (value: string | undefined) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium text-foreground">{label}</label>
|
|
<Select
|
|
value={value ?? NONE}
|
|
onValueChange={(v) => onChange(v === NONE ? undefined : v)}
|
|
>
|
|
<SelectTrigger className="border-hairline-strong bg-background text-foreground">
|
|
<SelectValue placeholder="选择模型资源" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={NONE}>未选择</SelectItem>
|
|
{options.map((o) => (
|
|
<SelectItem key={o.value} value={o.value}>
|
|
{o.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NodeForm({
|
|
spec,
|
|
data,
|
|
onSave,
|
|
onDelete,
|
|
}: {
|
|
spec: RuntimeNodeSpec;
|
|
data: WorkflowNodeData;
|
|
onSave: (patch: WorkflowNodeData) => void;
|
|
onDelete?: () => void;
|
|
}) {
|
|
const [draft, setDraft] = useState<WorkflowNodeData>({ ...data });
|
|
const set = (key: string, val: unknown) =>
|
|
setDraft((d) => ({ ...d, [key]: val }));
|
|
|
|
return (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle className="font-display text-ink">
|
|
编辑{spec.displayName}
|
|
</DialogTitle>
|
|
<DialogDescription>{spec.description}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-5 py-2">
|
|
{spec.fields.map((field) => {
|
|
const raw = draft[field.key];
|
|
if (field.type === "switch") {
|
|
return (
|
|
<label
|
|
key={field.key}
|
|
className="flex items-center justify-between gap-3"
|
|
>
|
|
<span className="text-sm font-medium text-foreground">
|
|
{field.label}
|
|
</span>
|
|
<Switch
|
|
checked={Boolean(raw)}
|
|
onCheckedChange={(checked) => set(field.key, checked)}
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
return (
|
|
<div key={field.key} className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium text-foreground">
|
|
{field.label}
|
|
{field.required && <span className="text-destructive"> *</span>}
|
|
</label>
|
|
{field.type === "textarea" ? (
|
|
<Textarea
|
|
rows={4}
|
|
value={(raw as string) ?? ""}
|
|
onChange={(e) => set(field.key, e.target.value)}
|
|
className="resize-none border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
|
|
/>
|
|
) : (
|
|
<Input
|
|
value={(raw as string) ?? ""}
|
|
onChange={(e) => set(field.key, e.target.value)}
|
|
className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<DialogFooter className="flex-row justify-between sm:justify-between">
|
|
{onDelete ? (
|
|
<Button
|
|
variant="outline"
|
|
className="gap-2 border-hairline-strong text-muted-foreground hover:text-destructive"
|
|
onClick={onDelete}
|
|
>
|
|
<Trash2 size={15} />
|
|
删除节点
|
|
</Button>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<Button onClick={() => onSave(draft)}>保存</Button>
|
|
</DialogFooter>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function EdgeForm({
|
|
edge,
|
|
onSave,
|
|
onDelete,
|
|
}: {
|
|
edge: Edge;
|
|
onSave: (patch: { condition: string; label: string }) => void;
|
|
onDelete: () => void;
|
|
}) {
|
|
const data = (edge.data ?? {}) as { condition?: string; label?: string };
|
|
const [label, setLabel] = useState(data.label ?? "");
|
|
const [condition, setCondition] = useState(data.condition ?? "");
|
|
|
|
return (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle className="font-display text-ink">编辑条件</DialogTitle>
|
|
<DialogDescription>
|
|
条件用于让大模型判断对话是否应沿这条路径流转到下一节点。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-5 py-2">
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium text-foreground">条件标签</label>
|
|
<Input
|
|
value={label}
|
|
maxLength={64}
|
|
placeholder="例如:用户想转人工"
|
|
onChange={(e) => setLabel(e.target.value)}
|
|
className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
|
|
/>
|
|
<span className="text-xs text-muted-soft">
|
|
日志中识别该路径的短标签,{label.length}/64
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium text-foreground">条件</label>
|
|
<Textarea
|
|
rows={4}
|
|
value={condition}
|
|
placeholder="描述触发这条路径的条件,例如:用户明确表示要找人工客服。"
|
|
onChange={(e) => setCondition(e.target.value)}
|
|
className="resize-none border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="flex-row justify-between sm:justify-between">
|
|
<Button
|
|
variant="outline"
|
|
className="gap-2 border-hairline-strong text-muted-foreground hover:text-destructive"
|
|
onClick={onDelete}
|
|
>
|
|
<Trash2 size={15} />
|
|
删除连线
|
|
</Button>
|
|
<Button onClick={() => onSave({ condition, label })}>保存条件</Button>
|
|
</DialogFooter>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function WorkflowEditor(props: WorkflowEditorProps) {
|
|
const { byType, loading, error } = useNodeSpecs();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft text-muted-foreground">
|
|
<Loader2 className="mr-2 animate-spin" size={18} />
|
|
正在加载节点目录…
|
|
</div>
|
|
);
|
|
}
|
|
if (error) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft px-6 text-center text-sm text-destructive">
|
|
加载节点目录失败:{error}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ReactFlowProvider>
|
|
<Canvas {...props} specsByType={byType} />
|
|
</ReactFlowProvider>
|
|
);
|
|
}
|