diff --git a/src/components/FlowEditor/NodeStatusIndicator.tsx b/src/components/FlowEditor/NodeStatusIndicator.tsx
index d3a1350..0a95819 100644
--- a/src/components/FlowEditor/NodeStatusIndicator.tsx
+++ b/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) {
diff --git a/src/components/FlowEditor/node/appNode/AppNode.tsx b/src/components/FlowEditor/node/appNode/AppNode.tsx
index 5dcee09..707060e 100644
--- a/src/components/FlowEditor/node/appNode/AppNode.tsx
+++ b/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 (
diff --git a/src/components/FlowEditor/node/basicNode/BasicNode.tsx b/src/components/FlowEditor/node/basicNode/BasicNode.tsx
index 22912c2..bbf834e 100644
--- a/src/components/FlowEditor/node/basicNode/BasicNode.tsx
+++ b/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 (
diff --git a/src/components/FlowEditor/node/endNode/EndNode.tsx b/src/components/FlowEditor/node/endNode/EndNode.tsx
index 48bfae1..55d60f9 100644
--- a/src/components/FlowEditor/node/endNode/EndNode.tsx
+++ b/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 (
diff --git a/src/components/FlowEditor/node/localNode/LocalNode.tsx b/src/components/FlowEditor/node/localNode/LocalNode.tsx
index 0d543f3..8d6775d 100644
--- a/src/components/FlowEditor/node/localNode/LocalNode.tsx
+++ b/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 (
{setIcon(data.type)}
{title}
-
+
diff --git a/src/components/FlowEditor/node/startNode/StartNode.tsx b/src/components/FlowEditor/node/startNode/StartNode.tsx
index 986a528..97417b9 100644
--- a/src/components/FlowEditor/node/startNode/StartNode.tsx
+++ b/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 (
diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts
index 1873399..5e16544 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 } 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]);
diff --git a/src/hooks/useFlowEditorState.ts b/src/hooks/useFlowEditorState.ts
index 2285ff6..bc28dc5 100644
--- a/src/hooks/useFlowEditorState.ts
+++ b/src/hooks/useFlowEditorState.ts
@@ -9,7 +9,7 @@ import { Dispatch } from 'redux';
export const useFlowEditorState = (initialData?: any) => {
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
- 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(null);
const [positionForNodeAdd, setPositionForNodeAdd] = useState<{ x: number, y: number } | null>(null);
- // 添加运行状态
- const [isRunning, setIsRunning] = useState(false);
-
// 在组件顶部添加历史记录相关状态
const [historyInitialized, setHistoryInitialized] = useState(false);
const historyTimeoutRef = useRef(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, canvasDataMap: any, id: string, nodes: Node[], edges: Edge[]) => {
@@ -68,7 +66,6 @@ export const useFlowEditorState = (initialData?: any) => {
positionForNodeAdd,
setPositionForNodeAdd,
isRunning,
- setIsRunning,
historyInitialized,
setHistoryInitialized,
historyTimeoutRef,
diff --git a/src/store/ideContainer.ts b/src/store/ideContainer.ts
index ad782c7..62b98ff 100644
--- a/src/store/ideContainer.ts
+++ b/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; // 节点状态映射
+ 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