From c340a9f240ad987c3b02055bb58481d1935a6199 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 19 Sep 2025 10:37:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(flowEditor):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将节点编辑弹窗从 Modal 组件改为 Drawer 组件
- 调整弹窗位置、大小和样式
- 移除弹窗遮罩，提高操作灵活性
- 优化弹窗关闭逻辑
---
 .../flowEditor/components/nodeEditModal.tsx   | 25 ++++++++++++-------
 src/pages/flowEditor/index.tsx                |  6 ++---
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/pages/flowEditor/components/nodeEditModal.tsx b/src/pages/flowEditor/components/nodeEditModal.tsx
index d381412..62e52b5 100644
--- a/src/pages/flowEditor/components/nodeEditModal.tsx
+++ b/src/pages/flowEditor/components/nodeEditModal.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Node } from '@xyflow/react';
-import { Modal } from '@arco-design/web-react';
+import { Drawer, ResizeBox } from '@arco-design/web-react';
 import { getNodeEditorByType } from '../nodeEditors';
 
 interface NodeData {
@@ -13,6 +13,7 @@ interface NodeData {
 }
 
 interface NodeEditModalProps {
+  popupContainer: any;
   node: Node<NodeData>;
   isOpen: boolean;
   onSave: (data: any) => void;
@@ -20,6 +21,7 @@ interface NodeEditModalProps {
 }
 
 const NodeEditModal: React.FC<NodeEditModalProps> = ({
+                                                       popupContainer,
                                                        node,
                                                        isOpen,
                                                        onSave,
@@ -49,7 +51,6 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
     setVisible(false);
     onClose();
   };
-
   // 更新节点数据的通用函数
   const updateNodeData = (key: string, value: any) => {
     setNodeData(prev => ({
@@ -79,17 +80,23 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
   };
 
   return (
-    <Modal
+    <Drawer
+      style={{
+        boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)'
+      }}
+      width={500}
       title={`编辑节点: ${nodeData.title || node?.type || '未知类型'}`}
       visible={visible}
+      placement="left"
+      mask={false}
+      maskClosable={false}
+      footer={null}
+      getPopupContainer={() => popupContainer?.current || document.body}
       onOk={handleSave}
-      onCancel={handleClose}
-      autoFocus={false}
-      focusLock={true}
-      style={{ width: '45%' }}
+      onCancel={handleSave}
     >
       {getNodeEditor()}
-    </Modal>
+    </Drawer>
   );
 };
 
diff --git a/src/pages/flowEditor/index.tsx b/src/pages/flowEditor/index.tsx
index 1315612..ece98a6 100644
--- a/src/pages/flowEditor/index.tsx
+++ b/src/pages/flowEditor/index.tsx
@@ -643,7 +643,7 @@ const FlowEditor: React.FC = () => {
         onNodeDragStop={onNodeDragStop}
         onNodeContextMenu={onNodeContextMenu}
         onEdgeContextMenu={onEdgeContextMenu}
-        onNodeDoubleClick={onNodeDoubleClick}
+        onNodeClick={onNodeDoubleClick}
         onPaneClick={onPaneClick}
         onPaneContextMenu={onPaneContextMenu}
         onEdgeMouseEnter={(_event, edge) => {
@@ -672,8 +672,7 @@ const FlowEditor: React.FC = () => {
       >
         <Background />
         {/*<Controls />*/}
-        <Panel position="top-left">
-          <div>从左侧拖拽节点到画布中</div>
+        <Panel position="top-center">
           <Button onClick={saveFlowDataToServer} type="primary">保存</Button>
         </Panel>
         <AlignmentGuides />
@@ -742,6 +741,7 @@ const FlowEditor: React.FC = () => {
 
       {/*节点双击/节点编辑上下文*/}
       <NodeEditModal
+        popupContainer={reactFlowWrapper}
         node={editingNode}
         isOpen={isEditModalOpen}
         onSave={saveNodeEdit}