feat(flow):优化API句柄连接逻辑和数据类型配置

- 在customConnectionLine中增加API句柄类型判断，仅在API句柄上显示事件提示
- 修改事件名称展示字段从name改为eventName- 更新flowCommon工具函数，支持通过eventId匹配API句柄
- 调整ParamsTable中的数据类型选项值格式，统一使用大写常量
- 优化useFlowCallbacks中API事件信息查找逻辑，增加eventId支持- 在边数据中添加lineType字段以区分连接线类型- 清理无用的日志输出和代码格式问题

src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx

@@ -34,17 +34,17 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
   }, [initialData]);
 
   const dataTypeOptions = [
-    { label: '字符串', value: 'string' },
+    { label: '字符串', value: 'STRING' },
-    { label: '数字', value: 'number' },
+    { label: '数字', value: 'INTEGER' },
-    { label: '布尔值', value: 'boolean' },
+    { label: '布尔值', value: 'BOOLEAN' },
-    { label: '数组', value: 'array' },
+    { label: '数组', value: 'ARRAY' },
-    { label: '对象', value: 'object' }
+    { label: '对象', value: 'OBJECT' }
   ];
 
   const arrayTypeOptions = [
-    { label: '字符串数组', value: 'string' },
+    { label: '字符串数组', value: 'STRING' },
-    { label: '数字数组', value: 'number' },
+    { label: '数字数组', value: 'INTEGER' },
-    { label: '布尔数组', value: 'boolean' }
+    { label: '布尔数组', value: 'BOOLEAN' }
   ];
 
   const columns = [

src/hooks/useFlowCallbacks.ts

@@ -130,7 +130,6 @@ export const useFlowCallbacks = (
     if (!sourceNode || !targetNode) {
       return;
     }
-
     // 获取源节点和目标节点的参数信息
     const sourceParams: any = sourceNode.data?.parameters || {};
     const targetParams: any = targetNode.data?.parameters || {};
@@ -181,10 +180,8 @@ export const useFlowCallbacks = (
       }
 
       // 检查源节点和目标节点是否都有事件信息
-      const sourceApi = (sourceParams.apiOuts || []).find((api: any) =>
+      const sourceApi = (sourceParams.apiOuts || []).find((api: any) => (api?.eventId || api.name || api.id) === params.sourceHandle);
-        api.name === params.sourceHandle || api.id === params.sourceHandle);
+      const targetApi = (targetParams.apiIns || []).find((api: any) => (api?.eventId || api.name || api.id) === params.targetHandle);
-      const targetApi = (targetParams.apiIns || []).find((api: any) =>
-        api.name === params.targetHandle || api.id === params.targetHandle);
 
       // 如果源节点有事件topic信息
       if (sourceApi && sourceApi.topic) {
@@ -192,8 +189,9 @@ export const useFlowCallbacks = (
         if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) {
           edgeParams.data = {
             ...edgeParams.data,
+            lineType: 'api',
             displayData: {
-              name: sourceApi.name,
+              name: sourceApi.eventName,
               eventId: sourceApi.eventId,
               topic: sourceApi.topic
             }
@@ -205,8 +203,9 @@ export const useFlowCallbacks = (
           !targetApi.topic.includes('**empty**')) {
           edgeParams.data = {
             ...edgeParams.data,
+            lineType: 'api',
             displayData: {
-              name: sourceApi.name,
+              name: sourceApi.eventName,
               eventId: sourceApi.eventId,
               topic: sourceApi.topic
             }
@@ -217,8 +216,9 @@ export const useFlowCallbacks = (
       else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) {
         edgeParams.data = {
           ...edgeParams.data,
+          lineType: 'api',
           displayData: {
-            name: targetApi.name,
+            name: targetApi.eventName,
             eventId: targetApi.eventId,
             topic: targetApi.topic
           }
@@ -257,8 +257,8 @@ export const useFlowCallbacks = (
     const sourceHandleType = getHandleType(newConnection.sourceHandle, sourceParams);
     const targetHandleType = getHandleType(newConnection.targetHandle, targetParams);
 
-    console.log("sourceHandleType:",sourceHandleType);
+    console.log('sourceHandleType:', sourceHandleType);
-    console.log("targetHandleType:",targetHandleType);
+    console.log('targetHandleType:', targetHandleType);
 
     // 验证连接类型是否匹配 (api只能连api, data只能连data)
     if (sourceHandleType !== targetHandleType) {

src/pages/flowEditor/components/customConnectionLine.tsx

@@ -1,19 +1,29 @@
 import React from 'react';
 import { getBezierPath } from '@xyflow/react';
+import { getHandleType } from '@/utils/flowCommon';
 
-const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => {
+const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY, fromHandle }) => {
   // 查找源节点的事件信息
   let eventData = null;
+  let isApiHandle = false;
+
   if (fromNode && fromNode.data) {
     const params = fromNode.data.parameters || {};
-    const apiOuts = params.apiOuts || [];
+
-
+    // 判断是否为API类型的句柄
-    // 查找匹配的输出API
+    isApiHandle = getHandleType(fromHandle.id, params) === 'api';
-    for (const api of apiOuts) {
+
-      // 这里假设fromNode存在selectedHandle属性，表示当前拖拽的句柄
+    // 只有在API句柄上才查找事件信息
-      if (api.name || api.id) {
+    if (isApiHandle) {
-        eventData = api;
+      const apiOuts = params.apiOuts || [];
-        break;
+
+      // 查找匹配的输出API
+      for (const api of apiOuts) {
+        // 检查api的name或id是否与fromHandle匹配
+        if (api.name || api.id) {
+          eventData = api;
+          break;
+        }
       }
     }
   }
@@ -35,10 +45,10 @@ const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => {
         className="animated-stroke"
         fill="none"
       />
-      {/* 当存在事件信息的时候展示连接提示 */}
+      {/* 只有在API类型的句柄上拖拽时才显示事件提示 */}
-      {eventData && eventData.topic && !eventData.topic.includes('**empty**') && (
+      {isApiHandle && eventData && eventData.topic && !eventData.topic.includes('**empty**') && (
         <text x={(fromX + toX) / 2} y={(fromY + toY) / 2 - 10} fill="#000" fontSize={12}>
-          {`连接事件: ${eventData.name}`}
+          {`连接事件: ${eventData.eventName}`}
         </text>
       )}
     </g>

src/utils/flowCommon.ts

@@ -12,8 +12,8 @@ const getHandleType = (handleId: string, nodeParams: any) => {
   const apiOuts = nodeParams.apiOuts || [];
   const apiIns = nodeParams.apiIns || [];
 
-  if (apiOuts.some((api: any) => (api.name || api.id) === handleId) ||
+  if (apiOuts.some((api: any) => (api?.eventId || api.name || api.id) === handleId) ||
-    apiIns.some((api: any) => (api.name || api.id) === handleId) || (handleId.includes('loop'))) {
+    apiIns.some((api: any) => (api?.eventId || api.name || api.id) === handleId) || (handleId.includes('loop'))) {
     return 'api';
   }