feat(flow): 添加节点运行状态可见性控制

src/components/FlowEditor/NodeStatusIndicator.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
-import { NodeProps, useStore } from '@xyflow/react';
 import styles from './node/style/baseOther.module.less';
 
 // 定义节点状态类型
 export type NodeStatus = 'waiting' | 'running' | 'success' | 'failed';
 
 // 节点状态指示器组件
-const NodeStatusIndicator: React.FC<{ status: NodeStatus }> = ({ status }) => {
+const NodeStatusIndicator: React.FC<{ status: NodeStatus, isVisible: boolean }> = ({ status, isVisible }) => {
+  // 如果不可见，不渲染任何内容
+  if (!isVisible) {
+    return null;
+  }
+
   // 根据状态返回相应的指示器样式
   const getStatusIndicator = () => {
     switch (status) {

src/components/FlowEditor/node/appNode/AppNode.tsx

@@ -17,12 +17,17 @@ const AppNode = ({ data, id }: { data: any; id: string }) => {
   const nodeStatus: NodeStatus = useFlowStore((state) => 
     (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
   );
+  
+  // 获取运行状态可见性
+  const isStatusVisible = useFlowStore((state) => 
+    !!state.nodeLookup.get(id)?.data?.isStatusVisible
+  );
 
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#722ed1' }}>
         {title}
-        <NodeStatusIndicator status={nodeStatus} />
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContent data={data} />
     </div>

src/components/FlowEditor/node/basicNode/BasicNode.tsx

@@ -14,15 +14,20 @@ const BasicNode = ({ data, id }: { data: any; id: string }) => {
   );
 
   // 获取节点运行状态
-  const nodeStatus: NodeStatus = useFlowStore((state) =>
+  const nodeStatus: NodeStatus = useFlowStore((state) => 
     (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
   );
+  
+  // 获取运行状态可见性
+  const isStatusVisible = useFlowStore((state) => 
+    !!state.nodeLookup.get(id)?.data?.isStatusVisible
+  );
 
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#e59428' }}>
         {title}
-        <NodeStatusIndicator status={nodeStatus} />
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentOther data={{ ...data, type: 'basic' }} />
     </div>

src/components/FlowEditor/node/endNode/EndNode.tsx

@@ -18,12 +18,17 @@ const EndNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
   const nodeStatus: NodeStatus = useFlowStore((state) => 
     (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
   );
+  
+  // 获取运行状态可见性
+  const isStatusVisible = useFlowStore((state) => 
+    !!state.nodeLookup.get(id)?.data?.isStatusVisible
+  );
 
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#c05144' }}>
         {title}
-        <NodeStatusIndicator status={nodeStatus} />
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentOther data={{ ...data, type: 'end' }} />
     </div>

src/components/FlowEditor/node/localNode/LocalNode.tsx

@@ -70,13 +70,18 @@ const LocalNode = ({ data, id }: { data: any; id: string }) => {
   const nodeStatus: NodeStatus = useFlowStore((state) => 
     (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
   );
+  
+  // 获取运行状态可见性
+  const isStatusVisible = useFlowStore((state) => 
+    !!state.nodeLookup.get(id)?.data?.isStatusVisible
+  );
 
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
         {setIcon(data.type)}
         {title}
-        <NodeStatusIndicator status={nodeStatus} />
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentOther data={data} />
     </div>

src/components/FlowEditor/node/startNode/StartNode.tsx

@@ -18,12 +18,17 @@ const StartNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
   const nodeStatus: NodeStatus = useFlowStore((state) => 
     (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
   );
+  
+  // 获取运行状态可见性
+  const isStatusVisible = useFlowStore((state) => 
+    !!state.nodeLookup.get(id)?.data?.isStatusVisible
+  );
 
   return (
     <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
       <div className={styles['node-header']} style={{ backgroundColor: '#29b971' }}>
         {title}
-        <NodeStatusIndicator status={nodeStatus} />
+        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
       </div>
       <NodeContentOther data={{ ...data, type: 'start' }} />
     </div>

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 } from '@/store/ideContainer';
+import { updateCanvasDataMap, resetNodeStatus, updateIsRunning } from '@/store/ideContainer';
 import {
   validateAllNodes,
   showValidationErrors,
@@ -919,13 +919,36 @@ export const useFlowCallbacks = (
         socketId
       };
       runMainFlow(params);
-
+      
+      // 设置运行状态为true
+      dispatch(updateIsRunning(true));
+      
       // 重置节点状态
       dispatch(resetNodeStatus());
-
+      
+      // 开始运行时动画
+      setEdges((eds) => eds.map(edge => ({
+        ...edge,
+        data: {
+          ...edge.data,
+          isRunning: true,
+          animationProgress: 0
+        }
+      })));
     }
     else {
+      // 设置运行状态为false
+      dispatch(updateIsRunning(false));
+      
       // 停止运行
+      setEdges((eds) => eds.map(edge => ({
+        ...edge,
+        data: {
+          ...edge.data,
+          isRunning: false,
+          animationProgress: 0
+        }
+      })));
     }
   }, [initialData?.appId]);
 

src/hooks/useFlowEditorState.ts

@@ -9,7 +9,7 @@ import { Dispatch } from 'redux';
 export const useFlowEditorState = (initialData?: any) => {
   const [nodes, setNodes] = useState<Node[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
-  const { canvasDataMap, nodeStatusMap } = useSelector((state: any) => state.ideContainer);
+  const { canvasDataMap, nodeStatusMap, isRunning } = useSelector((state: any) => state.ideContainer);
   const dispatch = useDispatch();
 
   // 添加编辑弹窗相关状态
@@ -21,9 +21,6 @@ export const useFlowEditorState = (initialData?: any) => {
   const [edgeForNodeAdd, setEdgeForNodeAdd] = useState<Edge | null>(null);
   const [positionForNodeAdd, setPositionForNodeAdd] = useState<{ x: number, y: number } | null>(null);
 
-  // 添加运行状态
-  const [isRunning, setIsRunning] = useState(false);
-
   // 在组件顶部添加历史记录相关状态
   const [historyInitialized, setHistoryInitialized] = useState(false);
   const historyTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -35,11 +32,12 @@ export const useFlowEditorState = (initialData?: any) => {
         ...node,
         data: {
           ...node.data,
-          status: nodeStatusMap[node.id] || 'waiting'
+          status: nodeStatusMap[node.id] || 'waiting',
+          isStatusVisible: isRunning // 只有在运行时才显示状态指示器
         }
       }))
     );
-  }, [nodeStatusMap]);
+  }, [nodeStatusMap, isRunning]);
 
   const updateCanvasDataMapDebounced = useRef(
     debounce((dispatch: Dispatch<any>, canvasDataMap: any, id: string, nodes: Node[], edges: Edge[]) => {
@@ -68,7 +66,6 @@ export const useFlowEditorState = (initialData?: any) => {
     positionForNodeAdd,
     setPositionForNodeAdd,
     isRunning,
-    setIsRunning,
     historyInitialized,
     setHistoryInitialized,
     historyTimeoutRef,

src/store/ideContainer.ts

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+// 定义初始状态类型
 interface IDEContainerState {
   info: any;
   menuData: any;
@@ -11,8 +12,10 @@ interface IDEContainerState {
   logBarStatus?: boolean;
   socketId: string;
   nodeStatusMap: Record<string, string>; // 节点状态映射
+  isRunning: boolean; // 是否正在运行
 }
 
+// 初始状态
 const initialState: IDEContainerState = {
   info: {}, // 项目信息
   menuData: {}, // 菜单数据
@@ -23,7 +26,8 @@ const initialState: IDEContainerState = {
   eventList: [], // 工程下的事件列表
   logBarStatus: false,
   socketId: '', // 工程的socketId
-  nodeStatusMap: {} // 初始化节点状态映射
+  nodeStatusMap: {}, // 初始化节点状态映射
+  isRunning: false // 默认未运行
 };
 
 // 创建切片
@@ -66,6 +70,10 @@ const ideContainerSlice = createSlice({
     // 重置节点状态
     resetNodeStatus: (state) => {
       state.nodeStatusMap = {};
+    },
+    // 更新运行状态
+    updateIsRunning: (state, { payload }) => {
+      state.isRunning = payload;
     }
   }
 });
@@ -82,7 +90,8 @@ export const {
   updateLogBarStatus,
   updateSocketId,
   updateNodeStatus,
-  resetNodeStatus
+  resetNodeStatus,
+  updateIsRunning
 } = ideContainerSlice.actions;
 
 // 默认导出 reducer