diff --git a/src/components/pages/AssistantWorkflowPage.tsx b/src/components/pages/AssistantWorkflowPage.tsx
index 79cfc04..dc8e9e5 100644
--- a/src/components/pages/AssistantWorkflowPage.tsx
+++ b/src/components/pages/AssistantWorkflowPage.tsx
@@ -1,137 +1,144 @@
-import { ArrowRight, Boxes, GitBranch, Plus, Workflow } from "lucide-react";
+"use client";
+
+import { useCallback } from "react";
+import {
+ addEdge,
+ Background,
+ Connection,
+ Controls,
+ Edge,
+ MiniMap,
+ Node,
+ ReactFlow,
+ useEdgesState,
+ useNodesState,
+} from "@xyflow/react";
+import { ChevronLeft, Plus, Save } from "lucide-react";
+
import { Button } from "@/components/ui/button";
-export function AssistantWorkflowPage() {
+const initialNodes: Node[] = [
+ {
+ id: "start",
+ type: "input",
+ position: { x: 80, y: 180 },
+ data: { label: "开始" },
+ },
+ {
+ id: "answer",
+ position: { x: 340, y: 180 },
+ data: { label: "模型回答" },
+ },
+ {
+ id: "end",
+ type: "output",
+ position: { x: 600, y: 180 },
+ data: { label: "结束" },
+ },
+];
+
+const initialEdges: Edge[] = [
+ {
+ id: "start-answer",
+ source: "start",
+ target: "answer",
+ },
+ {
+ id: "answer-end",
+ source: "answer",
+ target: "end",
+ },
+];
+
+type AssistantWorkflowPageProps = {
+ workflowName?: string;
+ onBack?: () => void;
+};
+
+export function AssistantWorkflowPage({
+ workflowName = "工作流编辑器",
+ onBack,
+}: AssistantWorkflowPageProps = {}) {
+ const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+ const handleConnect = useCallback(
+ (connection: Connection) => {
+ setEdges((currentEdges) => addEdge(connection, currentEdges));
+ },
+ [setEdges],
+ );
+
+ const handleAddNode = () => {
+ const id = crypto.randomUUID();
+
+ setNodes((currentNodes) => [
+ ...currentNodes,
+ {
+ id,
+ position: {
+ x: 200 + currentNodes.length * 40,
+ y: 100 + currentNodes.length * 40,
+ },
+ data: {
+ label: `新节点 ${currentNodes.length + 1}`,
+ },
+ },
+ ]);
+ };
+
+ const handleSave = () => {
+ const workflow = { nodes, edges };
+
+ localStorage.setItem("assistant-workflow", JSON.stringify(workflow));
+
+ console.log("Saved workflow:", workflow);
+ };
+
return (
-
-
-
创建助手
-
- 通过节点编排方式创建复杂 AI
- 视频助手流程，适合多轮任务、工具调用、知识库检索和人工协同场景。
-
-
-
-
-
-
-
-
-
-
-
-
-
- 即将开放
-
-
-
- 工作流画布正在设计中
-
-
-
- 后续这里会提供可视化节点画布，你可以拖拽配置开始节点、意图识别节点、知识库检索节点、
- 大模型回答节点、工具调用节点、人工接管节点和结束节点。
-
-
-
-
-
-
-
-
-
-
-
- }
- title="节点编排"
- description="通过拖拽节点组织多轮对话、判断分支和任务流转。"
- />
-
- }
- title="组件复用"
- description="复用模型、知识库、语音识别、声音资源和工具插件。"
- />
-
- }
- title="流程调试"
- description="支持逐节点测试、查看输入输出和定位失败原因。"
- />
-
-
-
-
-
未来画布结构预览
+
+
+
+
{workflowName}
- 当前是静态占位，后续可替换为 React Flow 或自研画布组件。
+ 拖动节点，并从节点连接点拖出连线。
- {["开始", "意图识别", "知识库检索", "模型回答", "工具调用", "结束"].map(
- (item, index) => (
-
-
-
- {item}
-
-
- Node {index + 1}
-
-
+
+ {onBack ? (
+
+ ) : null}
- {index < 5 && (
-
- )}
-
- ),
- )}
+
+
+
-
-
-function FeatureCard({
- icon,
- title,
- description,
-}: {
- icon: React.ReactNode;
- title: string;
- description: string;
-}) {
- return (
-
-
- {icon}
+
+
+
+
+
+
-
-
{title}
-
- {description}
-
);
}
diff --git a/src/components/pages/WorkflowPage.tsx b/src/components/pages/WorkflowPage.tsx
deleted file mode 100644
index e4958fe..0000000
--- a/src/components/pages/WorkflowPage.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { PlaceholderPage } from "./PlaceholderPage";
-
-export function WorkflowPage() {
- return (
-
- );
-}