From 734913820b9140fb4ca6c6f2825a4d5cd220ce01 Mon Sep 17 00:00:00 2001 From: ZLY Date: Thu, 30 Oct 2025 15:56:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(flow):=E4=BC=98=E5=8C=96API=E5=8F=A5?= =?UTF-8?q?=E6=9F=84=E8=BF=9E=E6=8E=A5=E9=80=BB=E8=BE=91=E5=92=8C=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=B1=BB=E5=9E=8B=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在customConnectionLine中增加API句柄类型判断，仅在API句柄上显示事件提示 - 修改事件名称展示字段从name改为eventName- 更新flowCommon工具函数，支持通过eventId匹配API句柄 - 调整ParamsTable中的数据类型选项值格式，统一使用大写常量 - 优化useFlowCallbacks中API事件信息查找逻辑，增加eventId支持- 在边数据中添加lineType字段以区分连接线类型- 清理无用的日志输出和代码格式问题 --- .../nodeEditors/components/ParamsTable.tsx | 16 ++++----- src/hooks/useFlowCallbacks.ts | 28 +++++++-------- .../components/customConnectionLine.tsx | 34 ++++++++++++------- .../flowEditor/components/customEdge.tsx | 4 +-- src/utils/flowCommon.ts | 4 +-- 5 files changed, 48 insertions(+), 38 deletions(-) diff --git a/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx b/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx index 8e6c57b..2fd852e 100644 --- a/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx +++ b/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx @@ -34,17 +34,17 @@ const ParamsTable: React.FC = ({ }, [initialData]); const dataTypeOptions = [ - { label: '字符串', value: 'string' }, - { label: '数字', value: 'number' }, - { label: '布尔值', value: 'boolean' }, - { label: '数组', value: 'array' }, - { label: '对象', value: 'object' } + { label: '字符串', value: 'STRING' }, + { label: '数字', value: 'INTEGER' }, + { label: '布尔值', value: 'BOOLEAN' }, + { label: '数组', value: 'ARRAY' }, + { label: '对象', value: 'OBJECT' } ]; const arrayTypeOptions = [ - { label: '字符串数组', value: 'string' }, - { label: '数字数组', value: 'number' }, - { label: '布尔数组', value: 'boolean' } + { label: '字符串数组', value: 'STRING' }, + { label: '数字数组', value: 'INTEGER' }, + { label: '布尔数组', value: 'BOOLEAN' } ]; const columns = [ diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index d1e46bf..8480207 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/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) => - api.name === params.sourceHandle || api.id === params.sourceHandle); - const targetApi = (targetParams.apiIns || []).find((api: any) => - api.name === params.targetHandle || api.id === params.targetHandle); + const sourceApi = (sourceParams.apiOuts || []).find((api: any) => (api?.eventId || api.name || api.id) === params.sourceHandle); + const targetApi = (targetParams.apiIns || []).find((api: any) => (api?.eventId || api.name || 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("targetHandleType:",targetHandleType); + console.log('sourceHandleType:', sourceHandleType); + console.log('targetHandleType:', targetHandleType); // 验证连接类型是否匹配 (api只能连api, data只能连data) if (sourceHandleType !== targetHandleType) { @@ -695,16 +695,16 @@ export const useFlowCallbacks = ( const deleteEdge = useCallback((edge: Edge) => { // 获取当前应用的运行状态 const { appRuntimeData, currentAppData } = store.getState().ideContainer; - const currentAppIsRunning = currentAppData?.id && appRuntimeData[currentAppData.id] - ? appRuntimeData[currentAppData.id].isRunning + const currentAppIsRunning = currentAppData?.id && appRuntimeData[currentAppData.id] + ? appRuntimeData[currentAppData.id].isRunning : false; - + // 在运行时禁止删除边 if (currentAppIsRunning) { console.warn('在运行时不允许删除边'); return; } - + setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); // 删除边后记录历史 diff --git a/src/pages/flowEditor/components/customConnectionLine.tsx b/src/pages/flowEditor/components/customConnectionLine.tsx index cb9638b..4424c97 100644 --- a/src/pages/flowEditor/components/customConnectionLine.tsx +++ b/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 - for (const api of apiOuts) { - // 这里假设fromNode存在selectedHandle属性，表示当前拖拽的句柄 - if (api.name || api.id) { - eventData = api; - break; + + // 判断是否为API类型的句柄 + isApiHandle = getHandleType(fromHandle.id, params) === 'api'; + + // 只有在API句柄上才查找事件信息 + if (isApiHandle) { + const apiOuts = params.apiOuts || []; + + // 查找匹配的输出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" /> - {/* 当存在事件信息的时候展示连接提示 */} - {eventData && eventData.topic && !eventData.topic.includes('**empty**') && ( + {/* 只有在API类型的句柄上拖拽时才显示事件提示 */} + {isApiHandle && eventData && eventData.topic && !eventData.topic.includes('**empty**') && ( - {`连接事件: ${eventData.name}`} + {`连接事件: ${eventData.eventName}`} )} diff --git a/src/pages/flowEditor/components/customEdge.tsx b/src/pages/flowEditor/components/customEdge.tsx index 0413e96..df19e51 100644 --- a/src/pages/flowEditor/components/customEdge.tsx +++ b/src/pages/flowEditor/components/customEdge.tsx @@ -46,7 +46,7 @@ const DataDisplayEdge: React.FC = ({ // 从数据中获取要显示的信息 const displayData: DataDisplayEdgeData = data?.displayData || {}; - + // 获取lineType const lineType = data?.lineType || 'data'; // 默认为data类型 @@ -61,7 +61,7 @@ const DataDisplayEdge: React.FC = ({ Message.warning('数据类型连接线上不允许添加节点'); return; } - + // 更新边的数据，触发边上添加节点的流程 setEdges(eds => eds.map(edge => { if (edge.id === id) { diff --git a/src/utils/flowCommon.ts b/src/utils/flowCommon.ts index 9cf3f37..5f1c4a0 100644 --- a/src/utils/flowCommon.ts +++ b/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) || - apiIns.some((api: any) => (api.name || api.id) === handleId) || (handleId.includes('loop'))) { + if (apiOuts.some((api: any) => (api?.eventId || api.name || api.id) === handleId) || + apiIns.some((api: any) => (api?.eventId || api.name || api.id) === handleId) || (handleId.includes('loop'))) { return 'api'; }