From eb2d77817e5afe911bf299436c7082833ce49c7a Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Mon, 12 Jan 2026 16:00:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(flowEditor):=20=E4=BF=AE=E5=A4=8D=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=88=86=E7=A6=BB=E5=90=8E=E6=B2=A1=E6=9C=89=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE=E8=8E=B7=E5=8F=96=E7=94=BB=E5=B8=83=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改因此导致的跨画布节点异常的问题
---
 src/hooks/useFlowEditorState.ts | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useFlowEditorState.ts b/src/hooks/useFlowEditorState.ts
index 56f6e47..fb9708f 100644
--- a/src/hooks/useFlowEditorState.ts
+++ b/src/hooks/useFlowEditorState.ts
@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { Node, Edge } from '@xyflow/react';
 import { debounce } from 'lodash';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { updateCanvasDataMap } from '@/store/ideContainer';
 
 import { Dispatch } from 'redux';
@@ -9,7 +9,15 @@ import { Dispatch } from 'redux';
 export const useFlowEditorState = (initialData?: any) => {
   const [nodes, setNodes] = useState<Node[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
-  const { canvasDataMap, nodeStatusMap, isRunning, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);
+
+  // 使用 shallowEqual 比较器来避免不必要的重新渲染
+  const ideContainerState = useSelector((state: any) => ({
+    canvasDataMap: state.ideContainer.canvasDataMap,
+    appRuntimeData: state.ideContainer.appRuntimeData,
+    currentAppData: state.ideContainer.currentAppData,
+  }), shallowEqual);
+
+  const { canvasDataMap, appRuntimeData, currentAppData } = ideContainerState;
   const dispatch = useDispatch();
 
   // 辅助函数：获取当前应用/子流程的唯一标识符
@@ -44,17 +52,23 @@ export const useFlowEditorState = (initialData?: any) => {
 
   // 更新节点状态，将从store获取的状态应用到节点上
   useEffect(() => {
-    setNodes(prevNodes => 
-      prevNodes.map(node => ({
+    // 获取当前应用对应的节点状态映射
+    const currentNodeStatusMap = currentAppKey && appRuntimeData[currentAppKey]
+      ? appRuntimeData[currentAppKey].nodeStatusMap
+      : {};
+
+    setNodes(prevNodes =>{
+      return prevNodes.map(node => ({
         ...node,
         data: {
           ...node.data,
-          status: nodeStatusMap[node.id] || 'waiting',
+          status: currentNodeStatusMap[node.id] || 'waiting',
           isStatusVisible: currentAppIsRunning // 只有在运行时才显示状态指示器
         }
       }))
-    );
-  }, [nodeStatusMap, currentAppIsRunning]);
+
+    });
+  }, [appRuntimeData, currentAppKey, currentAppIsRunning, initialData?.id,nodes.length]);
 
   const updateCanvasDataMapDebounced = useRef(
     debounce((dispatch: Dispatch<any>, canvasDataMap: any, id: string, nodes: Node[], edges: Edge[]) => {