From fec2dd2af922f4f76e76393587729e7fac435630 Mon Sep 17 00:00:00 2001 From: ZLY Date: Thu, 30 Oct 2025 14:35:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(flow):=20=E5=8C=BA=E5=88=86API=E8=BF=9E?= =?UTF-8?q?=E6=8E=A5=E5=92=8C=E6=95=B0=E6=8D=AE=E8=BF=9E=E6=8E=A5=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在连接数据中添加lineType字段，用于标识连接类型（api或data） - 禁止在数据类型连接线上添加节点- 数据类型连接线增加数据类型一致性校验 - 更新应用间连接的默认lineType为api -优化连接线按钮显示逻辑，仅在非数据连接时显示 -修复updateAppFlowData参数使用错误的问题 --- src/hooks/useFlowCallbacks.ts | 44 ++++++++++++++++--- .../flowEditor/components/customEdge.tsx | 13 +++++- src/utils/convertAppFlowData.ts | 1 + 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 69e247b..25d98eb 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -15,7 +15,14 @@ import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData'; import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines'; import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode'; import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode'; -import { updateCanvasDataMap, resetNodeStatus, updateIsRunning, updateEventListOld, addRuntimeLog, clearRuntimeLogs } from '@/store/ideContainer'; +import { + updateCanvasDataMap, + resetNodeStatus, + updateIsRunning, + updateEventListOld, + addRuntimeLog, + clearRuntimeLogs +} from '@/store/ideContainer'; import { validateAllNodes, showValidationErrors, @@ -148,6 +155,30 @@ export const useFlowCallbacks = ( // 创建带有事件信息的连接 const edgeParams = { ...params, type: 'custom' }; + // 添加lineType字段，用于区分API连接和数据连接 + edgeParams.data = { + ...edgeParams.data, + lineType: sourceHandleType // 'api' 或 'data' + }; + + // 对于数据类型的边，需要额外验证dataIns和dataOuts中的数据类型是否一致 + if (sourceHandleType === 'data') { + // 查找源节点的dataOuts中对应的数据 + const sourceDataOut = (sourceParams.dataOuts || []).find((dataOut: any) => + dataOut.name === params.sourceHandle || dataOut.id === params.sourceHandle); + + // 查找目标节点的dataIns中对应的数据 + const targetDataIn = (targetParams.dataIns || []).find((dataIn: any) => + dataIn.name === params.targetHandle || dataIn.id === params.targetHandle); + + // 验证数据类型是否一致 + if (sourceDataOut && targetDataIn && sourceDataOut.dataType !== targetDataIn.dataType) { + console.warn('数据类型不匹配，源节点数据类型:', sourceDataOut.dataType, '目标节点数据类型:', targetDataIn.dataType); + Message.warning(`数据类型不匹配，源节点数据类型: ${sourceDataOut.dataType}，目标节点数据类型: ${targetDataIn.dataType}`); + return edgesSnapshot; // 不创建连接 + } + } + // 检查源节点和目标节点是否都有事件信息 const sourceApi = (sourceParams.apiOuts || []).find((api: any) => api.name === params.sourceHandle || api.id === params.sourceHandle); @@ -159,6 +190,7 @@ export const useFlowCallbacks = ( // 如果目标节点的topic是**empty**或没有topic，则使用源节点的事件信息 if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) { edgeParams.data = { + ...edgeParams.data, displayData: { name: sourceApi.name, eventId: sourceApi.eventId, @@ -171,6 +203,7 @@ export const useFlowCallbacks = ( !sourceApi.topic.includes('**empty**') && !targetApi.topic.includes('**empty**')) { edgeParams.data = { + ...edgeParams.data, displayData: { name: sourceApi.name, eventId: sourceApi.eventId, @@ -182,6 +215,7 @@ export const useFlowCallbacks = ( // 如果源节点没有事件信息，但目标节点有 else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) { edgeParams.data = { + ...edgeParams.data, displayData: { name: targetApi.name, eventId: targetApi.eventId, @@ -564,7 +598,7 @@ export const useFlowCallbacks = ( console.warn('在应用编排模式下不允许删除节点'); return; } - + // 开始和结束节点不允许删除 if (node.type === 'start' || node.type === 'end') { console.warn('开始和结束节点不允许删除'); @@ -660,7 +694,7 @@ export const useFlowCallbacks = ( console.warn('在应用编排模式下不允许删除边'); return; } - + setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); // 删除边后记录历史 @@ -1256,7 +1290,7 @@ export const useFlowCallbacks = ( eventId: Array.from(new Set(item.eventId)) })); try { - updateAppFlowData(appFlowParams); + updateAppFlowData(appEventParams); if (appEventParams.length > 0) { for (const item of appEventParams) { await sleep(500); @@ -1313,7 +1347,7 @@ export const useFlowCallbacks = ( animationProgress: 0 } }))); - + // 清空当前应用的运行日志 dispatch(clearRuntimeLogs({ appId: currentAppData.id })); } diff --git a/src/pages/flowEditor/components/customEdge.tsx b/src/pages/flowEditor/components/customEdge.tsx index f4f8154..0413e96 100644 --- a/src/pages/flowEditor/components/customEdge.tsx +++ b/src/pages/flowEditor/components/customEdge.tsx @@ -11,6 +11,7 @@ type DataDisplayEdgeData = { name?: string; topic?: string; eventId?: string; + lineType?: string; // 添加lineType属性 }; const DataDisplayEdge: React.FC = ({ @@ -45,12 +46,22 @@ const DataDisplayEdge: React.FC = ({ // 从数据中获取要显示的信息 const displayData: DataDisplayEdgeData = data?.displayData || {}; + + // 获取lineType + const lineType = data?.lineType || 'data'; // 默认为data类型 // 使用useReactFlow钩子获取setEdges方法 const { setEdges } = useReactFlow(); // 边点击处理函数 const handleEdgeAddNode = (e) => { + // 如果是数据类型边线，不允许添加节点 + if (lineType === 'data') { + console.warn('数据类型边线上不允许添加节点'); + Message.warning('数据类型连接线上不允许添加节点'); + return; + } + // 更新边的数据，触发边上添加节点的流程 setEdges(eds => eds.map(edge => { if (edge.id === id) { @@ -190,7 +201,7 @@ const DataDisplayEdge: React.FC = ({ )} - {hovered && Object.keys(displayData).length === 0 && Object.keys(displayData).length === 0 && ( + {hovered && Object.keys(displayData).length === 0 && lineType !== 'data' && ( handleEdgeAddNode(e)} /> diff --git a/src/utils/convertAppFlowData.ts b/src/utils/convertAppFlowData.ts index f6aeef3..486727e 100644 --- a/src/utils/convertAppFlowData.ts +++ b/src/utils/convertAppFlowData.ts @@ -120,6 +120,7 @@ export const convertAppFlowData = (appFlowData: any[]) => { targetHandle: targetEvent.eventId, type: 'custom', data: { + lineType: 'api', // 应用间连接始终是API类型 displayData: { name: sourceEvent.eventName, eventId: sourceEvent.eventId,