From b3885964992a987c23b158caab157fdb2a73cb49 Mon Sep 17 00:00:00 2001 From: ZLY Date: Mon, 27 Oct 2025 14:23:45 +0800 Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=20=E5=AE=9E=E7=8E=B0=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=BA=BF=E5=90=8C=E6=AD=A5=E4=BF=AE=E6=94=B9=E5=92=8C?= =?UTF-8?q?=E6=8B=89=E7=BA=BF=E5=B1=95=E7=A4=BA=E4=BA=8B=E4=BB=B6=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useFlowCallbacks.ts | 51 +++++++++++++++++-- .../components/customConnectionLine.tsx | 27 +++++++--- .../flowEditor/components/customEdge.tsx | 23 ++++++++- .../flowEditor/components/nodeContentApp.tsx | 1 - 4 files changed, 90 insertions(+), 12 deletions(-) diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 5006a19..9139cf4 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -121,8 +121,8 @@ export const useFlowCallbacks = ( } // 获取源节点和目标节点的参数信息 - const sourceParams = sourceNode.data?.parameters || {}; - const targetParams = targetNode.data?.parameters || {}; + const sourceParams: any = sourceNode.data?.parameters || {}; + const targetParams: any = targetNode.data?.parameters || {}; // 获取源handle和目标handle的类型 (api或data) const sourceHandleType = getHandleType(params.sourceHandle, sourceParams); @@ -142,7 +142,52 @@ export const useFlowCallbacks = ( // 如果验证通过，创建连接 setEdges((edgesSnapshot: Edge[]) => { - const newEdges = addEdge({ ...params, type: 'custom' }, edgesSnapshot); + // 创建带有事件信息的连接 + const edgeParams = { ...params, type: 'custom' }; + + // 检查源节点和目标节点是否都有事件信息 + const sourceApi = (sourceParams.apiOuts || []).find((api: any) => + api.name === params.sourceHandle || api.id === params.sourceHandle); + const targetApi = (targetParams.apiIns || []).find((api: any) => + api.name === params.targetHandle || api.id === params.targetHandle); + + // 如果源节点有事件topic信息 + if (sourceApi && sourceApi.topic) { + // 如果目标节点的topic是**empty**或没有topic，则使用源节点的事件信息 + if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) { + edgeParams.data = { + displayData: { + name: sourceApi.name, + eventId: sourceApi.eventId, + topic: sourceApi.topic + } + }; + } + // 如果两个节点都有非empty的topic，则以源节点为准 + else if (sourceApi.topic && targetApi.topic && + !sourceApi.topic.includes('**empty**') && + !targetApi.topic.includes('**empty**')) { + edgeParams.data = { + displayData: { + name: sourceApi.name, + eventId: sourceApi.eventId, + topic: sourceApi.topic + } + }; + } + } + // 如果源节点没有事件信息，但目标节点有 + else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) { + edgeParams.data = { + displayData: { + name: targetApi.name, + eventId: targetApi.eventId, + topic: targetApi.topic + } + }; + } + + const newEdges = addEdge(edgeParams, edgesSnapshot); // 连接建立后记录历史 setTimeout(() => { diff --git a/src/pages/flowEditor/components/customConnectionLine.tsx b/src/pages/flowEditor/components/customConnectionLine.tsx index ba43697..cb9638b 100644 --- a/src/pages/flowEditor/components/customConnectionLine.tsx +++ b/src/pages/flowEditor/components/customConnectionLine.tsx @@ -1,10 +1,23 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { getBezierPath } from '@xyflow/react'; const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => { - useEffect(() => { - console.log('fromNode', fromNode); - }, [fromNode]); + // 查找源节点的事件信息 + let eventData = null; + if (fromNode && fromNode.data) { + const params = fromNode.data.parameters || {}; + const apiOuts = params.apiOuts || []; + + // 查找匹配的输出API + for (const api of apiOuts) { + // 这里假设fromNode存在selectedHandle属性，表示当前拖拽的句柄 + if (api.name || api.id) { + eventData = api; + break; + } + } + } + const [path] = getBezierPath({ sourceX: fromX, sourceY: fromY, @@ -22,10 +35,10 @@ const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => { className="animated-stroke" fill="none" /> - {/*TODO 临时定义，后续等接口字段。 存在事件信息的时候才展示连接提示*/} - {fromNode.data.eventData && ( + {/* 当存在事件信息的时候展示连接提示 */} + {eventData && eventData.topic && !eventData.topic.includes('**empty**') && ( - 正在连接... + {`连接事件: ${eventData.name}`} )} diff --git a/src/pages/flowEditor/components/customEdge.tsx b/src/pages/flowEditor/components/customEdge.tsx index 6975803..f4f8154 100644 --- a/src/pages/flowEditor/components/customEdge.tsx +++ b/src/pages/flowEditor/components/customEdge.tsx @@ -84,6 +84,27 @@ const DataDisplayEdge: React.FC = ({ const handleSelect = (option) => { setSelectedValue(option.label); setIsOpen(false); + + // 查找所有具有相同事件ID和连接点的边并同步更新 + setEdges(eds => eds.map((edge: any) => { + // 检查边是否有displayData且与当前选择的事件匹配 + if (edge.data?.displayData && + edge.data.displayData.eventId === displayData.eventId && + edge.data.displayData.topic === displayData.topic) { + return { + ...edge, + data: { + ...edge.data, + displayData: { + ...edge.data.displayData, + name: option.label, + topic: option.value + } + } + }; + } + return edge; + })); }; return ( @@ -169,7 +190,7 @@ const DataDisplayEdge: React.FC = ({ )} - {hovered && Object.keys(displayData).length === 0 && ( + {hovered && Object.keys(displayData).length === 0 && Object.keys(displayData).length === 0 && ( handleEdgeAddNode(e)} /> diff --git a/src/pages/flowEditor/components/nodeContentApp.tsx b/src/pages/flowEditor/components/nodeContentApp.tsx index 8ee00fb..de5834c 100644 --- a/src/pages/flowEditor/components/nodeContentApp.tsx +++ b/src/pages/flowEditor/components/nodeContentApp.tsx @@ -240,7 +240,6 @@ const useEventGroups = (component: any) => { }; }); } - console.log('groups:', groups); return groups; } catch (e) { console.error('解析customDef时出错:', e);