feat(flowEditor): 实现数据线同步修改和拉线展示事件信息

src/hooks/useFlowCallbacks.ts

@@ -121,8 +121,8 @@ export const useFlowCallbacks = (
     }
 
     // 获取源节点和目标节点的参数信息
-    const sourceParams = sourceNode.data?.parameters || {};
+    const sourceParams: any = sourceNode.data?.parameters || {};
-    const targetParams = targetNode.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(() => {

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);
+  let eventData = null;
-  }, [fromNode]);
+  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**') && (
         <text x={(fromX + toX) / 2} y={(fromY + toY) / 2 - 10} fill="#000" fontSize={12}>
-          正在连接...
+          {`连接事件: ${eventData.name}`}
         </text>
       )}
     </g>

src/pages/flowEditor/components/customEdge.tsx

@@ -84,6 +84,27 @@ const DataDisplayEdge: React.FC<EdgeProps> = ({
   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<EdgeProps> = ({
             </div>
           )}
 
-          {hovered && Object.keys(displayData).length === 0 && (
+          {hovered && Object.keys(displayData).length === 0 && Object.keys(displayData).length === 0 && (
             <EdgeAddNodeButton
               onClick={(e) => handleEdgeAddNode(e)}
             />

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);