From be71426433934ccc2e06ec390b7273c29aedf501 Mon Sep 17 00:00:00 2001 From: ZLY Date: Wed, 29 Oct 2025 11:16:22 +0800 Subject: [PATCH] =?UTF-8?q?refactor(ide):=20=E4=BA=8B=E4=BB=B6=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD=E9=87=8D=E6=9E=84=E6=96=B0=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useFlowCallbacks.ts | 81 ++++++++++++------- src/pages/ideContainer/index.tsx | 8 +- src/pages/ideContainer/sideBar.tsx | 8 +- src/pages/orchestration/application/index.tsx | 12 +-- src/store/ideContainer.ts | 6 ++ 5 files changed, 77 insertions(+), 38 deletions(-) diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index f24844e..d890c30 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -15,7 +15,7 @@ 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 } from '@/store/ideContainer'; +import { updateCanvasDataMap, resetNodeStatus, updateIsRunning, updateEventListOld } from '@/store/ideContainer'; import { validateAllNodes, showValidationErrors, @@ -30,10 +30,11 @@ import { projectFlowHandle } from '@/pages/flowEditor/utils/projectFlowHandle'; import { appFLowHandle } from '@/pages/flowEditor/utils/appFlowhandle'; import { Dispatch } from 'redux'; -import { runMainFlow } from '@/api/apps'; +import { runMainFlow, stopApp } from '@/api/apps'; import store from '@/store'; import { updateAppEvent, updateAppEventChannel, updateAppFlowData } from '@/api/appEvent'; import { sleep } from '@/utils/common'; +import { queryEventItemBySceneIdOld } from '@/api/event'; export const useFlowCallbacks = ( nodes: Node[], @@ -1004,7 +1005,7 @@ export const useFlowCallbacks = ( const emptyEvent = eventList.find(item => item.topic.includes('**empty**')); newNode.data.component = { type: nodeType, - customDef: { eventId: emptyEvent.eventId, name: emptyEvent.name, topic: emptyEvent.topic } + customDef: { eventId: emptyEvent?.eventId ?? null, name: emptyEvent.name, topic: emptyEvent.topic } }; } // 将未定义的节点动态追加进nodeTypes @@ -1080,27 +1081,29 @@ export const useFlowCallbacks = ( // 事件接收节点 params.eventListenes.push({ nodeName: nodeConfig.nodeName || '', - eventId: eventConfig?.eventId || '', + eventId: eventConfig?.eventId || null, topic: eventConfig?.topic || '', eventName: eventConfig?.name || '', - dataOuts: nodeConfig.dataOuts || [] + dataOuts: nodeConfig.dataOuts || [], + nodeId: nodeConfig.nodeId }); } else if (nodeType === 'EVENTSEND') { // 事件发送节点 params.eventSends.push({ nodeName: nodeConfig.nodeName || '', - eventId: eventConfig?.eventId || '', + eventId: eventConfig?.eventId || null, topic: eventConfig?.topic || '', eventName: eventConfig?.name || '', - dataIns: nodeConfig.dataIns || [] + dataIns: nodeConfig.dataIns || [], + nodeId: nodeConfig.nodeId }); } } }); // 调用更新事件的API if (params.eventListenes.length > 0 || params.eventSends.length > 0) { - updateAppEvent(appid, params); + return params; } }; const upDatePublish = async (revertedData) => { @@ -1139,20 +1142,23 @@ export const useFlowCallbacks = ( const revertedData = revertFlowData(nodes, edges); const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs); const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB); - const { flowData, currentAppData } = store.getState().ideContainer; - // console.log('revertedData:', revertedData); - // console.log('newRevertedData:', newRevertedData); + const { flowData, currentAppData, info } = store.getState().ideContainer; let params = {}; // 更新复合组件/子流程 if (currentAppData.key.includes('sub')) { + const appEventDefinition = updateEvent(revertedData.nodeConfigs, initialData.appId); params = { ...currentAppData?.compData || {}, - components: newRevertedData + components: newRevertedData, + appEventDefinition, + sceneId: info.id }; - updateEvent(revertedData.nodeConfigs, currentAppData.parentAppId); const res: any = await setSubFlowNew(params, currentAppData.parentAppId); if (res.code === 200) { Message.success('保存成功'); + // 更新事件枚举表 + const res1: any = await queryEventItemBySceneIdOld(info.id); + if (res1.code === 200) dispatch(updateEventListOld(res1.data)); } else { Message.error(res.message); @@ -1160,14 +1166,19 @@ export const useFlowCallbacks = ( } // 更新主流程 else { + const appEventDefinition = updateEvent(revertedData.nodeConfigs, initialData.appId); params = { ...flowData[currentAppData.id]?.main || {}, - components: newRevertedData + components: newRevertedData, + appEventDefinition, + sceneId: info.id }; - updateEvent(revertedData.nodeConfigs, initialData.appId); const res: any = await setMainFlowNew(params, initialData.appId); if (res.code === 200) { Message.success('保存成功'); + // 更新事件枚举表 + const res1: any = await queryEventItemBySceneIdOld(info.id); + if (res1.code === 200) dispatch(updateEventListOld(res1.data)); } else { Message.error(res.message); @@ -1196,33 +1207,45 @@ export const useFlowCallbacks = ( const eventMap = new Map(); edges.forEach((edge: any) => { - const eventId = edge.data.displayData.eventId; - const dto = { - eventId: eventId, - topicDTO: { - topic: edge.data.displayData.topic, - eventName: edge.data.displayData.name - } - }; - eventMap.set(eventId, dto); + // 应用组件的桩点id就是事件id + const sourceId = edge.source; + const targetId = edge.target; + const topic = edge.data.displayData.topic; + + if (eventMap.has(topic)) { + // 如果topic已存在，将eventId添加到数组中 + eventMap.get(topic).eventId.push(sourceId); + eventMap.get(topic).eventId.push(targetId); + } + else { + // 如果topic不存在，创建新的条目 + eventMap.set(topic, { + eventId: [sourceId, targetId], + topic: topic + }); + } }); - const appEventParams = Array.from(eventMap.values()); + // 对eventId数组进行去重处理 + const appEventParams = Array.from(eventMap.values()).map(item => ({ + ...item, + eventId: Array.from(new Set(item.eventId)) + })); + + console.log('appEventParams:', appEventParams); updateAppFlowData(appFlowParams); if (appEventParams.length > 0) { for (const item of appEventParams) { - console.log('item:', item); await sleep(500); updateAppEventChannel(item); } } - } }, [nodes, edges, initialData?.appId]); // 运行处理函数 const handleRun = useCallback(async (running: boolean) => { + const { currentAppData, socketId } = store.getState().ideContainer; if (running) { - const { currentAppData, socketId } = store.getState().ideContainer; // 启动运行 const params = { appId: currentAppData.id, @@ -1250,6 +1273,8 @@ export const useFlowCallbacks = ( // 设置运行状态为false dispatch(updateIsRunning(false)); + stopApp(currentAppData.id); + // 停止运行 setEdges((eds) => eds.map(edge => ({ ...edge, diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 168c13d..ef0fff0 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { updateSocketId, updateNodeStatus, updateIsRunning, resetNodeStatus } from '@/store/ideContainer'; +import { updateSocketId, updateNodeStatus, updateEventListOld } from '@/store/ideContainer'; import useWebSocket from '@/hooks/useWebSocket'; import { isJSON, getUrlParams } from '@/utils/common'; @@ -31,7 +31,7 @@ import ComponentDeployment from '@/pages/componentDevelopment/componentDeploymen import ComponentTest from '@/pages/componentDevelopment/componentTest'; import { getUserToken } from '@/api/user'; import { Message } from '@arco-design/web-react'; -import { queryEventItemBySceneId } from '@/api/event'; +import { queryEventItemBySceneId, queryEventItemBySceneIdOld } from '@/api/event'; type UrlParamsOptions = { identity?: string; @@ -220,7 +220,9 @@ function IDEContainer() { const getEvent = async () => { const res: any = await queryEventItemBySceneId(urlParams.id); + const res1: any = await queryEventItemBySceneIdOld(urlParams.id); if (res.code === 200) dispatch(updateEventList(res.data)); + if (res1.code === 200) dispatch(updateEventListOld(res1.data)); }; useEffect(() => { @@ -371,7 +373,7 @@ function IDEContainer() { key: menuItem.key, parentKey: menuItem.parentKey }); - + // 将选中的tab添加到已打开的tabs集合中 setOpenedTabs(prev => new Set(prev).add(menuItem.key)); } diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 1e3ca61..6792e45 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -17,11 +17,12 @@ import { menuData1, menuData2 } from './config/menuData'; import { IconSearch, IconPlus } from '@arco-design/web-react/icon'; import { Selected } from '@/pages/ideContainer/types'; import { useDispatch, useSelector } from 'react-redux'; -import { updateMenuData, updateFlowData, updateCurrentAppData } from '@/store/ideContainer'; +import { updateMenuData, updateFlowData, updateCurrentAppData, updateEventListOld } from '@/store/ideContainer'; import { addApp, getProjectEnv, editApp, deleteApp } from '@/api/apps'; import _ from 'lodash'; import { getAppInfoNew } from '@/api/appRes'; import { getAppEventData } from '@/api/appEvent'; +import { queryEventItemBySceneIdOld } from '@/api/event'; const TreeNode = Tree.Node; const FormItem = Form.Item; @@ -191,7 +192,7 @@ const SideBar: React.FC = ({ }); // 添加右键菜单状态 const resizeBoxRef = useRef(null); // 引用第一个 ResizeBox 容器 const contextMenuRef = useRef(null); // 右键菜单引用 - const { menuData } = useSelector(state => state.ideContainer); + const { menuData, info } = useSelector(state => state.ideContainer); const dispatch = useDispatch(); function getMenuData(): MenuItemType[] { @@ -429,6 +430,9 @@ const SideBar: React.FC = ({ newMenu[activeKey] = { ...newMenu[activeKey], children: currentMenu[index].children }; return newMenu; }); + // 获取最新的事件枚举表 + const res1: any = await queryEventItemBySceneIdOld(info.id); + if (res1.code === 200) dispatch(updateEventListOld(res1.data)); } }; diff --git a/src/pages/orchestration/application/index.tsx b/src/pages/orchestration/application/index.tsx index d169cb2..c9c1f2e 100644 --- a/src/pages/orchestration/application/index.tsx +++ b/src/pages/orchestration/application/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import FlowEditor from '@/pages/flowEditor/index'; import { useSelector, useDispatch } from 'react-redux'; import { getAppEventList } from '@/api/appEvent'; -import { getTopicList } from '@/api/event'; +import { getTopicList, queryEventItemBySceneId } from '@/api/event'; import { updateEventTopicList } from '@/store/ideContainer'; const ApplicationContainer = () => { @@ -16,12 +16,14 @@ const ApplicationContainer = () => { }; const getEventList = async () => { - const res: any = await getTopicList(info.id); + const res: any = await queryEventItemBySceneId(info.id); if (res.code === 200) { - dispatch(updateEventTopicList(res.data.map(v => { - return { label: v.eventName, value: v.topic }; - }))); + dispatch(updateEventTopicList(res.data + .filter(v => !v.topic.includes('**empty**')) // 过滤掉topic包含**empty**的项目 + .map(v => { + return { label: v.name, value: v.topic }; + }))); } }; diff --git a/src/store/ideContainer.ts b/src/store/ideContainer.ts index ed11136..bfd9c99 100644 --- a/src/store/ideContainer.ts +++ b/src/store/ideContainer.ts @@ -8,6 +8,7 @@ interface IDEContainerState { canvasDataMap: any; projectComponentData: any; currentAppData: any; + eventListOld: any; eventList: any; eventTopicList: any; logBarStatus?: boolean; @@ -24,6 +25,7 @@ const initialState: IDEContainerState = { canvasDataMap: {}, // 每个画布的缓存信息 projectComponentData: {}, // 工程下的组件列表 currentAppData: {}, // 当前选中的应用数据 + eventListOld: [], // 工程下的事件列表 eventList: [], // 工程下的事件列表 eventTopicList: [], // 应用编排使用的事件名和topic列表 logBarStatus: false, @@ -58,6 +60,9 @@ const ideContainerSlice = createSlice({ updateEventList(state, action) { state.eventList = action.payload; }, + updateEventListOld(state, action) { + state.eventListOld = action.payload; + }, updateEventTopicList(state, action) { state.eventTopicList = action.payload; }, @@ -98,6 +103,7 @@ export const { updateProjectComponentData, updateCurrentAppData, updateEventList, + updateEventListOld, updateEventTopicList, updateLogBarStatus, updateSocketId,