From a024ba911d868d8519d04f0103d1b8520453f76d Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Thu, 16 Oct 2025 11:39:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=E4=BC=98=E5=8C=96ReactFlow?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8BID=E7=94=9F=E6=88=90=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用useMemo优化reactFlowId的生成，避免不必要的重复计算
- 统一ID生成逻辑，确保实例ID的唯一性和稳定性
- 修复addNodeOnPane函数中坐标类型定义的语法问题
- 提升组件性能，减少重复渲染
---
 src/pages/flowEditor/FlowEditorMain.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/flowEditor/FlowEditorMain.tsx b/src/pages/flowEditor/FlowEditorMain.tsx
index 093ade5..21b9252 100644
--- a/src/pages/flowEditor/FlowEditorMain.tsx
+++ b/src/pages/flowEditor/FlowEditorMain.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import {
   ReactFlow,
   Background,
@@ -76,7 +76,7 @@ interface FlowEditorMainProps {
   editEdge: (edge: Edge) => void;
   copyNode: (node: Node) => void;
   addNodeOnEdge: (nodeType: string, node: any) => void;
-  addNodeOnPane: (nodeType: string, position: { x: number; y: number }, node?: any) => void;
+  addNodeOnPane: (nodeType: string, position: { x: number, y: number }, node?: any) => void;
   handleAddNode: (nodeType: string, node: any) => void;
   saveFlowDataToServer: () => void;
   handleRun: (running: boolean) => void;
@@ -135,6 +135,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
 
   const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines();
   const { undo, redo, canUndo, canRedo } = useHistory();
+  const reactFlowId = useMemo(() => new Date().getTime().toString(), []);
 
   // 监听键盘事件实现快捷键
   useEffect(() => {
@@ -175,7 +176,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
     <div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
          onContextMenu={(e) => e.preventDefault()}>
       <ReactFlow
-        id={new Date().getTime().toString()}
+        id={reactFlowId}
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}