From c1c0fa3aef69337d0fdc15b0a589f0449566ffff Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 31 Oct 2025 16:45:32 +0800 Subject: [PATCH] =?UTF-8?q?feat(flow):=20=E6=B7=BB=E5=8A=A0=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E8=8A=82=E7=82=B9=E5=88=97=E8=A1=A8=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E5=8A=9F=E8=83=BD(=E6=9C=AA=E5=AE=8C=E6=88=90)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useFlowCallbacks.ts | 89 +++++++++++++++++++++++++++++++++++ src/store/ideContainer.ts | 34 +++++++++++-- src/utils/convertFlowData.ts | 13 +++++ 3 files changed, 132 insertions(+), 4 deletions(-) diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 3c64349..90b0121 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -1187,6 +1187,92 @@ export const useFlowCallbacks = ( } else return {}; }; + const handelEventNodeList = (newRevertedData) => { + const { appRuntimeData, currentAppData } = store.getState().ideContainer; + const current = appRuntimeData[currentAppData.id]; + const deleteEventSendNodeList = []; + const deleteEventlisteneList = []; + // 处理流程接口后的数据 + const currentEventSendNodeList = current.eventSendNodeList; + const currentEventlisteneList = current.eventlisteneList; + // 画布数据 + const nodeEntries: [string, any][] = Object.entries(newRevertedData); + + // 分类事件节点 + const eventSendNodes = []; + const eventListenerNodes = []; + + // 从nodeEntries中提取事件节点 + nodeEntries.forEach(([nodeId, nodeConfig]) => { + if (nodeConfig.component?.type === 'EVENTSEND') { + eventSendNodes.push({ nodeId, ...nodeConfig }); + } + else if (nodeConfig.component?.type === 'EVENTLISTENE') { + eventListenerNodes.push({ nodeId, ...nodeConfig }); + } + }); + + // 处理EVENTSEND节点 + // 如果currentEventSendNodeList中有而nodeEntries中没有，则加入删除列表 + currentEventSendNodeList.forEach((eventNode) => { + const nodeId = eventNode; + const nodeInCanvas = eventSendNodes.find(node => node.nodeId === nodeId); + + if (!nodeInCanvas) { + // 画布数据中没有该节点，加入删除列表 + deleteEventSendNodeList.push(eventNode); + } + else { + // 节点存在于画布中，比较时间戳 + // nodeId格式为"节点类型-时间戳" + const canvasNode = nodeInCanvas.nodeId.split('-'); + const canvasTimestamp = canvasNode[canvasNode.length - 1]; + + const interfaceNode = nodeId.split('-'); + const interfaceTimestamp = interfaceNode[interfaceNode.length - 1]; + + // 如果画布数据的时间戳是最新的，那就是新增的事件节点，不需要添加到deleteList中 + // 反之需要进一步判断 + if (canvasTimestamp < interfaceTimestamp) { + // 画布节点时间戳较旧，需要进一步判断 + // 这里留空，等待后续实现 + } + } + }); + + // 处理EVENTLISTENE节点 + // 如果currentEventlisteneList中有而nodeEntries中没有，则加入删除列表 + currentEventlisteneList.forEach((eventNode) => { + const nodeId = eventNode; + const nodeInCanvas = eventListenerNodes.find(node => node.nodeId === nodeId); + + if (!nodeInCanvas) { + // 画布数据中没有该节点，加入删除列表 + deleteEventlisteneList.push(eventNode); + } + else { + // 节点存在于画布中，比较时间戳 + // nodeId格式为"节点类型-时间戳" + const canvasNode = nodeInCanvas.nodeId.split('-'); + const canvasTimestamp = canvasNode[canvasNode.length - 1]; + + const interfaceNode = nodeId.split('-'); + const interfaceTimestamp = interfaceNode[interfaceNode.length - 1]; + + // 如果画布数据的时间戳是最新的，那就是新增的事件节点，不需要添加到deleteList中 + // 反之需要进一步判断 + if (canvasTimestamp < interfaceTimestamp) { + // 画布节点时间戳较旧，需要进一步判断 + // 这里留空，等待后续实现 + } + } + }); + + return { + deleteEventSendNodeList, + deleteEventlisteneList + }; + }; const saveFlowDataToServer = useCallback(async () => { if (useDefault) { try { @@ -1208,6 +1294,9 @@ export const useFlowCallbacks = ( const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs); const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB); const { flowData, currentAppData, info } = store.getState().ideContainer; + const { deleteEventSendNodeList, deleteEventlisteneList } = handelEventNodeList(newRevertedData); + // console.log(deleteEventSendNodeList, deleteEventlisteneList); + // return; let params = {}; // 更新复合组件/子流程 if (currentAppData.key.includes('sub')) { diff --git a/src/store/ideContainer.ts b/src/store/ideContainer.ts index e201e7b..2981138 100644 --- a/src/store/ideContainer.ts +++ b/src/store/ideContainer.ts @@ -21,6 +21,8 @@ interface IDEContainerState { isRunning: boolean; logs: any[]; runId: string; + eventSendNodeList: string[], + eventlisteneList: string[] }>; } @@ -100,7 +102,9 @@ const ideContainerSlice = createSlice({ nodeStatusMap: {}, isRunning: false, logs: [], - runId: '' + runId: '', + eventSendNodeList: [], + eventlisteneList: [] }; } state.appRuntimeData[appId].nodeStatusMap[nodeId] = status; @@ -128,7 +132,9 @@ const ideContainerSlice = createSlice({ nodeStatusMap: {}, isRunning: false, logs: [], - runId: '' + runId: '', + eventSendNodeList: [], + eventlisteneList: [] }; } state.appRuntimeData[appId].isRunning = payload; @@ -142,11 +148,28 @@ const ideContainerSlice = createSlice({ nodeStatusMap: {}, isRunning: false, logs: [], - runId: '' + runId: '', + eventSendNodeList: [], + eventlisteneList: [] }; } state.appRuntimeData[appId].runId = payload; }, + // 更新事件节点列表 + updateEventNodeList: (state, { payload }) => { + const appId = state.currentAppData?.id; + if (!state.appRuntimeData[appId]) { + state.appRuntimeData[appId] = { + nodeStatusMap: {}, + isRunning: false, + logs: [], + runId: '', + eventSendNodeList: [], + eventlisteneList: [] + }; + } + state.appRuntimeData[appId] = { ...state.appRuntimeData[appId], ...payload }; + }, // 添加运行日志 addRuntimeLog: (state, { payload }) => { const { log, appId } = payload; @@ -155,7 +178,9 @@ const ideContainerSlice = createSlice({ nodeStatusMap: {}, isRunning: false, logs: [], - runId: '' + runId: '', + eventSendNodeList: [], + eventlisteneList: [] }; } state.appRuntimeData[appId].logs.push(log); @@ -187,6 +212,7 @@ export const { resetNodeStatus, updateIsRunning, updateRuntimeId, + updateEventNodeList, addRuntimeLog, clearRuntimeLogs } = ideContainerSlice.actions; diff --git a/src/utils/convertFlowData.ts b/src/utils/convertFlowData.ts index c9a4154..25deb98 100644 --- a/src/utils/convertFlowData.ts +++ b/src/utils/convertFlowData.ts @@ -7,6 +7,8 @@ import BasicNode from '@/components/FlowEditor/node/basicNode/BasicNode'; import ImageNode from '@/components/FlowEditor/node/imageNode/ImageNode'; import CodeNode from '@/components/FlowEditor/node/codeNode/CodeNode'; import RestNode from '@/components/FlowEditor/node/restNode/RestNode'; +import { updateEventNodeList } from '@/store/ideContainer'; + /** * 将提供的数据结构转换为适用于 flow editor 的 nodes 和 edges @@ -17,6 +19,8 @@ import RestNode from '@/components/FlowEditor/node/restNode/RestNode'; export const convertFlowData = (flowData: any, useDefault = true) => { const nodes: any[] = []; const edges: any[] = []; + const eventSendNodeList = []; + const eventlisteneList = []; const currentProjectCompData = getCurrentProjectStoreData(); if (!flowData || Object.keys(flowData).length === 0) { @@ -70,6 +74,15 @@ export const convertFlowData = (flowData: any, useDefault = true) => { const nodeId: string = entry[0]; const nodeConfig: any = entry[1]; + // 更新应用中的事件节点列表 + if (nodeId.includes('EVENTLISTENE')) eventlisteneList.push(nodeId); + else if (nodeId.includes('EVENTSEND')) eventSendNodeList.push(nodeId); + + if (eventlisteneList.length > 0 || eventSendNodeList.length > 0) store.dispatch(updateEventNodeList({ + eventSendNodeList, + eventlisteneList + })); + // 确定节点类型 let nodeType = 'BASIC'; if (nodeId === 'start') {