fix: 修复重连后多画布空白

src/hooks/useFlowCallbacks.ts

@@ -63,6 +63,10 @@ import {
   buildRuntimeNode,
   resolveNodeDefinition,
 } from '@/utils/flow/nodeOnboarding';
+import {
+  shouldPersistCanvas,
+  shouldUseCachedCanvas,
+} from '@/utils/flow/canvasCache';
 
 import { Dispatch } from 'redux';
 import {
@@ -519,8 +523,9 @@ export const useFlowCallbacks = (
   // 初始化画布数据
   const initializeCanvasData = useCallback(() => {
     const appKey = getCurrentFlowAppKey();
-    if (appKey && canvasDataMap[appKey]) {
+    const cachedCanvas = appKey ? canvasDataMap[appKey] : null;
-      const { edges, nodes } = canvasDataMap[appKey];
+    if (shouldUseCachedCanvas({ cachedCanvas, initialData, useDefault })) {
+      const { edges, nodes } = cachedCanvas;
       setNodes(nodes);
       setEdges(edges);
     } else {
@@ -539,11 +544,14 @@ export const useFlowCallbacks = (
 
     // 标记历史记录已初始化
     setHistoryInitialized(true);
-  }, [initialData, canvasDataMap, getCurrentFlowAppKey]);
+  }, [initialData, useDefault, canvasDataMap, getCurrentFlowAppKey]);
   // 实时更新 canvasDataMap
   const updateCanvasDataMapEffect = useCallback(() => {
     const appKey = getCurrentFlowAppKey();
-    if (appKey) {
+    if (
+      appKey &&
+      shouldPersistCanvas({ nodes, edges })
+    ) {
       updateCanvasDataMapDebounced(
         dispatch,
         canvasDataMap,
@@ -557,7 +565,13 @@ export const useFlowCallbacks = (
     return () => {
       // 取消防抖函数
     };
-  }, [nodes, edges, dispatch, canvasDataMap, getCurrentFlowAppKey]);
+  }, [
+    nodes,
+    edges,
+    dispatch,
+    canvasDataMap,
+    getCurrentFlowAppKey,
+  ]);
   // 关闭编辑弹窗
   const closeEditModal = useCallback(() => {
     setIsEditModalOpen(false);

src/utils/flow/canvasCache.js

@@ -0,0 +1,48 @@
+function hasObjectValues(value) {
+  return Boolean(value && typeof value === 'object' && Object.keys(value).length > 0);
+}
+
+function hasInitialCanvasData(initialData, useDefault) {
+  if (!initialData) {
+    return false;
+  }
+
+  if (Array.isArray(initialData)) {
+    return initialData.length > 0;
+  }
+
+  if (useDefault) {
+    return hasObjectValues(initialData?.main?.components) || hasObjectValues(initialData?.components);
+  }
+
+  return hasObjectValues(initialData);
+}
+
+function hasCanvasContent(canvas) {
+  return Boolean(
+    canvas &&
+    ((Array.isArray(canvas.nodes) && canvas.nodes.length > 0) ||
+      (Array.isArray(canvas.edges) && canvas.edges.length > 0))
+  );
+}
+
+function shouldUseCachedCanvas({ cachedCanvas, initialData, useDefault }) {
+  if (!cachedCanvas) {
+    return false;
+  }
+
+  if (hasCanvasContent(cachedCanvas)) {
+    return true;
+  }
+
+  return !hasInitialCanvasData(initialData, useDefault);
+}
+
+function shouldPersistCanvas({ nodes, edges }) {
+  return hasCanvasContent({ nodes, edges });
+}
+
+module.exports = {
+  shouldUseCachedCanvas,
+  shouldPersistCanvas,
+};