ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(flow): 添加节点运行状态指示器

Browse Source
master
钟良源 4 months ago
parent 0618335670
commit b9502164b2
11 changed files with 209 additions and 49 deletions
Show Stats Download Patch File Download Diff File

33
src/components/FlowEditor/NodeStatusIndicator.tsx
Unescape Escape View File

@ -0,0 +1,33 @@
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 getStatusIndicator = () => {
switch (status) {
case 'waiting':
return <div className={styles['status-waiting']} />;
case 'running':
return <div className={styles['status-running']} />;
case 'success':
return <div className={styles['status-success']} />;
case 'failed':
return <div className={styles['status-failed']} />;
default:
return null;
}
};
return (
<div className={styles['node-status-indicator']}>
{getStatusIndicator()}
</div>
);
};
export default NodeStatusIndicator;

31
src/components/FlowEditor/node/appNode/AppNode.tsx
Unescape Escape View File

@ -1,31 +1,30 @@
import React, { useMemo } from 'react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContentApp from '@/pages/flowEditor/components/nodeContentApp';
import React from 'react';
import { useStore } from '@xyflow/react';
import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
const AppNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
const title = data.title || '基础节点';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContentApp';
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
import { useStore as useFlowStore } from '@xyflow/react';
// 生成随机背景色，使用useMemo确保颜色只在节点首次创建时生成一次
const backgroundColor = useMemo(() => {
const colors = ['#e59428', '#4a90e2', '#7b68ee', '#50c878', '#ff6347', '#9370db', '#00bfff', '#ff8c00'];
return colors[Math.floor(Math.random() * colors.length)];
}, []);
const AppNode = ({ data, id }: { data: any; id: string }) => {
const title = data.title || '应用节点';
// 获取节点选中状态 - 适配React Flow v12 API
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);
// 获取节点运行状态
const nodeStatus: NodeStatus = useFlowStore((state) =>
(state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
);
return (
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
<div className={styles['node-header']} style={{ backgroundColor }}>
<div className={styles['node-header']} style={{ backgroundColor: '#722ed1' }}>
{title}
<NodeStatusIndicator status={nodeStatus} />
</div>
<NodeContentApp data={{ ...data, type: 'app' }} />
<NodeContent data={data} />
</div>
);
};

18
src/components/FlowEditor/node/basicNode/BasicNode.tsx
Unescape Escape View File

@ -1,13 +1,11 @@
import React from 'react';
// import styles from '@/pages/flowEditor/node/style/base.module.less';
import { useStore } from '@xyflow/react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent';
import NodeContentOther from '@/pages/flowEditor/components/nodeContentOther';
import { useStore } from '@xyflow/react';
import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
import { useStore as useFlowStore } from '@xyflow/react';
const BasicNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
const BasicNode = ({ data, id }: { data: any; id: string }) => {
const title = data.title || '基础节点';
// 获取节点选中状态 - 适配React Flow v12 API
@ -15,13 +13,17 @@ const BasicNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
state.nodeLookup.get(id)?.selected || false
);
// 获取节点运行状态
const nodeStatus: NodeStatus = useFlowStore((state) =>
(state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
);
return (
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
<div className={styles['node-header']} style={{ backgroundColor: '#e59428' }}>
{title}
<NodeStatusIndicator status={nodeStatus} />
</div>
{/*<NodeContent data={{ ...data, type: 'basic' }} />*/}
<NodeContentOther data={{ ...data, type: 'basic' }} />
</div>
);

15
src/components/FlowEditor/node/endNode/EndNode.tsx
Unescape Escape View File

@ -1,11 +1,10 @@
import React from 'react';
// import styles from '@/pages/flowEditor/node/style/base.module.less';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent';
import NodeContentOther from '@/pages/flowEditor/components/nodeContentOther';
import { useStore } from '@xyflow/react';
import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
import NodeContentOther from '@/pages/flowEditor/components/nodeContentOther';
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
import { useStore as useFlowStore } from '@xyflow/react';
const EndNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
const title = data.title || '结束';
@ -15,13 +14,17 @@ const EndNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
state.nodeLookup.get(id)?.selected || false
);
// 获取节点运行状态
const nodeStatus: NodeStatus = useFlowStore((state) =>
(state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
);
return (
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
<div className={styles['node-header']} style={{ backgroundColor: '#c05144' }}>
{title}
<NodeStatusIndicator status={nodeStatus} />
</div>
{/*<NodeContent data={{ ...data, type: 'end' }} />*/}
<NodeContentOther data={{ ...data, type: 'end' }} />
</div>
);

12
src/components/FlowEditor/node/localNode/LocalNode.tsx
Unescape Escape View File

@ -1,11 +1,10 @@
import React from 'react';
import { useStore } from '@xyflow/react';
// import styles from '@/pages/flowEditor/node/style/base.module.less';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent';
import DynamicIcon from '@/components/DynamicIcon';
import NodeContentOther from '@/pages/flowEditor/components/nodeContentOther';
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
import { useStore as useFlowStore } from '@xyflow/react';
const setIcon = (nodeType: string) => {
let type = 'IconApps';
@ -67,13 +66,18 @@ const LocalNode = ({ data, id }: { data: any; id: string }) => {
state.nodeLookup.get(id)?.selected || false
);
// 获取节点运行状态
const nodeStatus: NodeStatus = useFlowStore((state) =>
(state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
);
return (
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
<div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
{setIcon(data.type)}
{title}
<NodeStatusIndicator status={nodeStatus} />
</div>
{/*<NodeContent data={data} />*/}
<NodeContentOther data={data} />
</div>
);

15
src/components/FlowEditor/node/startNode/StartNode.tsx
Unescape Escape View File

@ -1,11 +1,10 @@
import React from 'react';
// import styles from '@/pages/flowEditor/node/style/base.module.less';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent';
import NodeContentOther from '@/pages/flowEditor/components/nodeContentOther';
import { useStore } from '@xyflow/react';
import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
import NodeContentOther from '@/pages/flowEditor/components/nodeContentOther';
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
import { useStore as useFlowStore } from '@xyflow/react';
const StartNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
const title = data.title || '开始';
@ -15,13 +14,17 @@ const StartNode = ({ data, id }: { data: defaultNodeTypes; id: string }) => {
state.nodeLookup.get(id)?.selected || false
);
// 获取节点运行状态
const nodeStatus: NodeStatus = useFlowStore((state) =>
(state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
);
return (
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
<div className={styles['node-header']} style={{ backgroundColor: '#29b971' }}>
{title}
<NodeStatusIndicator status={nodeStatus} />
</div>
{/*<NodeContent data={{ ...data, type: 'start' }} />*/}
<NodeContentOther data={{ ...data, type: 'start' }} />
</div>
);

60
src/components/FlowEditor/node/style/baseOther.module.less
Unescape Escape View File

@ -13,6 +13,7 @@
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: #000000;
text-align: center;
position: relative;
}
.node-api-box,
@ -92,4 +93,63 @@
min-height: 20px;
text-align: center;
}
}
// 节点状态指示器样式
.node-status-indicator {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
z-index: 10;
}
.status-waiting {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #cccccc;
border: 2px solid #ffffff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.status-running {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #1890ff;
border: 2px solid #ffffff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
animation: pulse 1.5s infinite;
}
.status-success {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #52c41a;
border: 2px solid #ffffff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.status-failed {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ff4d4f;
border: 2px solid #ffffff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.7);
}
70% {
box-shadow: 0 0 0 6px rgba(24, 144, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
}
}

11
src/hooks/useFlowCallbacks.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect } from 'react';
import {
applyNodeChanges,
applyEdgeChanges,
@ -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 } from '@/store/ideContainer';
import { updateCanvasDataMap, resetNodeStatus } from '@/store/ideContainer';
import {
validateAllNodes,
showValidationErrors,
@ -919,6 +919,10 @@ export const useFlowCallbacks = (
socketId
};
runMainFlow(params);
// 重置节点状态
dispatch(resetNodeStatus());
}
else {
// 停止运行
@ -959,4 +963,5 @@ export const useFlowCallbacks = (
saveFlowDataToServer,
handleRun
};
};
};
export default useFlowCallbacks;

17
src/hooks/useFlowEditorState.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import { useState, useRef } from 'react';
import { useState, useRef, useEffect } from 'react';
import { Node, Edge } from '@xyflow/react';
import { debounce } from 'lodash';
import { useSelector, useDispatch } from 'react-redux';
@ -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 } = useSelector((state: any) => state.ideContainer);
const { canvasDataMap, nodeStatusMap } = useSelector((state: any) => state.ideContainer);
const dispatch = useDispatch();
// 添加编辑弹窗相关状态
@ -28,6 +28,19 @@ export const useFlowEditorState = (initialData?: any) => {
const [historyInitialized, setHistoryInitialized] = useState(false);
const historyTimeoutRef = useRef<NodeJS.Timeout | null>(null);
// 更新节点状态，将从store获取的状态应用到节点上
useEffect(() => {
setNodes(prevNodes =>
prevNodes.map(node => ({
...node,
data: {
...node.data,
status: nodeStatusMap[node.id] || 'waiting'
}
}))
);
}, [nodeStatusMap]);
const updateCanvasDataMapDebounced = useRef(
debounce((dispatch: Dispatch<any>, canvasDataMap: any, id: string, nodes: Node[], edges: Edge[]) => {
dispatch(updateCanvasDataMap({

24
src/pages/ideContainer/index.tsx
Unescape Escape View File

@ -30,7 +30,7 @@ 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;
@ -79,6 +79,28 @@ function IDEContainer() {
const socketMessage = JSON.parse(event.data);
if (socketMessage?.socketId) dispatch(updateSocketId(socketMessage.socketId));
// 处理节点状态更新
if (socketMessage?.nodeLog) {
const { nodeId, state } = socketMessage.nodeLog;
// 将状态映射为前端使用的状态
let status = 'waiting';
switch (state) {
case 0: // 运行中
status = 'running';
break;
case 1: // 运行成功
status = 'success';
break;
case -1: // 运行失败
status = 'failed';
break;
default:// 等待运行
status = 'waiting';
break;
}
// 更新节点状态
dispatch(updateNodeStatus({ nodeId, status }));
}
}
});

22
src/store/ideContainer.ts
Unescape Escape View File

@ -10,6 +10,7 @@ interface IDEContainerState {
eventList: any;
logBarStatus?: boolean;
socketId: string;
nodeStatusMap: Record<string, string>; // 节点状态映射
}
const initialState: IDEContainerState = {
@ -19,11 +20,13 @@ const initialState: IDEContainerState = {
canvasDataMap: {}, // 每个画布的缓存信息
projectComponentData: {}, // 工程下的组件列表
currentAppData: {}, // 当前选中的应用数据
eventList:[], // 工程下的事件列表
eventList: [], // 工程下的事件列表
logBarStatus: false,
socketId: '' // 工程的socketId
socketId: '', // 工程的socketId
nodeStatusMap: {} // 初始化节点状态映射
};
// 创建切片
const ideContainerSlice = createSlice({
name: 'ideContainer',
initialState,
@ -54,10 +57,20 @@ const ideContainerSlice = createSlice({
},
updateSocketId(state, action) {
state.socketId = action.payload;
},
// 更新节点状态
updateNodeStatus: (state, { payload }) => {
const { nodeId, status } = payload;
state.nodeStatusMap[nodeId] = status;
},
// 重置节点状态
resetNodeStatus: (state) => {
state.nodeStatusMap = {};
}
}
});
// 导出动作 creators
export const {
updateInfo,
updateMenuData,
@ -67,7 +80,10 @@ export const {
updateCurrentAppData,
updateEventList,
updateLogBarStatus,
updateSocketId
updateSocketId,
updateNodeStatus,
resetNodeStatus
} = ideContainerSlice.actions;
// 默认导出 reducer
export default ideContainerSlice.reducer;
Write Preview
Loading…
Cancel
Save