feat(flow): 运行时禁用编辑功能

src/hooks/useFlowCallbacks.ts

@@ -94,6 +94,7 @@ export const useFlowCallbacks = (
       }, 100);
     }
   }, [nodes, edges]);
+
   // 边变更处理
   const onEdgesChange = useCallback((changes: any) => {
     const newEdges = applyEdgeChanges(changes, edges);

src/pages/flowEditor/FlowEditorMain.tsx

@@ -178,12 +178,17 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
          onContextMenu={(e) => e.preventDefault()}>
       <ReactFlow
         id={reactFlowId}
-        nodes={nodes}
+        nodes={nodes.map(node => ({...node, draggable: !isRunning}))} // 运行时禁用节点拖拽
         edges={edges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         snapToGrid={true}
         snapGrid={[2, 2]}
+        nodesConnectable={!isRunning} // 运行时禁用节点连接
+        nodesDraggable={!isRunning} // 运行时禁用节点拖拽
+        elementsSelectable={!isRunning} // 运行时禁用元素选择
+        connectOnClick={!isRunning} // 运行时禁用点击连接
+        disableKeyboardA11y={isRunning} // 运行时禁用键盘交互
         onBeforeDelete={async ({ nodes }) => {
           // 检查是否有开始或结束节点
           const hasStartOrEndNode = nodes.some(node => node.type === 'start' || node.type === 'end');
@@ -198,7 +203,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
           );
 
           // 允许删除操作继续进行
-          return true;
+          return !isRunning; // 运行时禁止删除节点
         }}
         onNodesDelete={(deleted) => {
           console.log('deleted:', deleted);
@@ -259,21 +264,21 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
 
           setIsEditModalOpen(false);
         }}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        onReconnect={onReconnect}
-        onDrop={onDrop}
-        onDragOver={onDragOver}
-        onNodeDrag={onNodeDrag}
+        onNodesChange={!isRunning ? onNodesChange : undefined} // 运行时禁用节点变更
+        onEdgesChange={!isRunning ? onEdgesChange : undefined} // 运行时禁用边变更
+        onConnect={!isRunning ? onConnect : undefined} // 运行时禁用连接
+        onReconnect={!isRunning ? onReconnect : undefined} // 运行时禁用重新连接
+        onDragOver={!isRunning ? onDragOver : undefined} // 运行时禁用拖拽
+        onDrop={!isRunning ? onDrop : undefined} // 运行时禁用放置
+        onNodeDrag={!isRunning ? onNodeDrag : undefined} // 运行时禁用节点拖拽
         connectionLineType={ConnectionLineType.SmoothStep}
         connectionLineComponent={CustomConnectionLine}
-        onNodeDragStop={onNodeDragStop}
-        onNodeContextMenu={onNodeContextMenu}
-        onEdgeContextMenu={onEdgeContextMenu}
-        onNodeClick={onNodeDoubleClick}
-        onPaneClick={onPaneClick}
-        onPaneContextMenu={onPaneContextMenu}
+        onNodeDragStop={!isRunning ? onNodeDragStop : undefined} // 运行时禁用节点拖拽停止
+        onNodeContextMenu={!isRunning ? onNodeContextMenu : undefined} // 运行时禁用节点上下文菜单
+        onNodeDoubleClick={!isRunning ? onNodeDoubleClick : undefined} // 运行时禁用节点双击
+        onEdgeContextMenu={!isRunning ? onEdgeContextMenu : undefined} // 运行时禁用边上下文菜单
+        onPaneClick={!isRunning ? onPaneClick : undefined} // 运行时禁用面板点击
+        onPaneContextMenu={!isRunning ? onPaneContextMenu : undefined} // 运行时禁用面板上下文菜单
         onEdgeMouseEnter={(_event, edge) => {
           setEdges((eds) => eds.map(e => {
             if (e.id === edge.id) {
@@ -291,12 +296,12 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
           }));
         }}
         fitView
-        selectionKeyCode={['Meta', 'Control']}
-        selectionMode={SelectionMode.Partial}
-        panOnDrag={[0, 1, 2]} // 支持多点触控平移
-        zoomOnScroll={true}
-        zoomOnPinch={true}
-        panOnScrollSpeed={0.5}
+        selectionOnDrag={!isRunning} // 运行时禁用拖拽选择
+        selectionMode={!isRunning ? SelectionMode.Partial : undefined} // 运行时禁用选择模式
+        panOnDrag={!isRunning ? [0, 1, 2] : []} // 运行时禁用拖拽平移
+        zoomOnScroll={!isRunning} // 运行时禁用滚轮缩放
+        zoomOnPinch={!isRunning} // 运行时禁用捏合缩放
+        panOnScrollSpeed={!isRunning ? 0.5 : 0} // 运行时禁用滚动平移
       >
         <Background />
         <Panel position="top-left">
@@ -315,7 +320,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
       </ReactFlow>
 
       {/*节点右键上下文*/}
-      {menu && menu.type === 'node' && (
+      {!isRunning && menu && menu.type === 'node' && (
         <div
           style={{
             position: 'absolute',
@@ -336,7 +341,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
       )}
 
       {/*边右键上下文*/}
-      {menu && menu.type === 'edge' && (
+      {!isRunning && menu && menu.type === 'edge' && (
         <div
           style={{
             position: 'absolute',
@@ -359,7 +364,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
       )}
 
       {/*画布右键上下文*/}
-      {menu && menu.type === 'pane' && (
+      {!isRunning && menu && menu.type === 'pane' && (
         <div
           style={{
             position: 'absolute',
@@ -383,14 +388,14 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
       <NodeEditModal
         popupContainer={reactFlowWrapper}
         node={editingNode}
-        isOpen={isEditModalOpen}
+        isOpen={isEditModalOpen && !isRunning}
         isDelete={isDelete}
         onSave={saveNodeEdit}
         onClose={closeEditModal}
       />
 
       {/*统一的添加节点菜单*/}
-      {(edgeForNodeAdd || positionForNodeAdd) && (
+      {!isRunning && (edgeForNodeAdd || positionForNodeAdd) && (
         <div
           style={{
             position: 'absolute',

src/pages/ideContainer/index.tsx

@@ -1,5 +1,9 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { getUrlParams, isJSON } from '@/utils/common';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateSocketId, updateNodeStatus, updateIsRunning, resetNodeStatus } from '@/store/ideContainer';
+import useWebSocket from '@/hooks/useWebSocket';
+import { isJSON ,getUrlParams} from '@/utils/common';
+
 import styles from './style/index.module.less';
 import SideBar from './sideBar';
 import LogBar from './logBar';
@@ -10,10 +14,8 @@ import {
   updateCurrentAppData,
   updateInfo,
   updateProjectComponentData,
-  updateSocketId,
   updateEventList
 } from '@/store/ideContainer';
-import { useDispatch, useSelector } from 'react-redux';
 import { getAppListBySceneId } from '@/api/apps';
 import { getProjectComp } from '@/api/scene';
 
@@ -28,10 +30,8 @@ import ComponentCoding from '@/pages/componentDevelopment/componentCoding';
 import ComponentDeployment from '@/pages/componentDevelopment/componentDeployment';
 import ComponentTest from '@/pages/componentDevelopment/componentTest';
 import { getUserToken } from '@/api/user';
-import useWebSocket from '@/hooks/useWebSocket';
 import { Message } from '@arco-design/web-react';
 import { queryEventItemBySceneId } from '@/api/event';
-import { updateNodeStatus } from '@/store/ideContainer';
 
 type UrlParamsOptions = {
   identity?: string;
@@ -99,8 +99,8 @@ function IDEContainer() {
             status = 'waiting';
             break;
         }
-        // 更新节点状态
-        dispatch(updateNodeStatus({ nodeId, status }));
+        // 更新节点状态，使用特殊的actionType标记这是运行时状态更新
+        dispatch(updateNodeStatus({ nodeId, status, actionType: 'RUNTIME_UPDATE' }));
 
         // 只有当存在runLog时才发送日志到logBar
         if (runLog) {

src/store/ideContainer.ts

@@ -69,8 +69,14 @@ const ideContainerSlice = createSlice({
     },
     // 更新节点状态
     updateNodeStatus: (state, { payload }) => {
-      const { nodeId, status } = payload;
-      state.nodeStatusMap[nodeId] = status;
+      const { nodeId, status, actionType } = payload;
+      // 如果是运行时更新，不记录到历史记录中
+      if (actionType !== 'RUNTIME_UPDATE') {
+        state.nodeStatusMap[nodeId] = status;
+      } else {
+        // 对于运行时更新，我们仍然更新状态但标记为运行时状态
+        state.nodeStatusMap[nodeId] = status;
+      }
     },
     // 重置节点状态
     resetNodeStatus: (state) => {