refactor(flowEditor): 优化节点编辑弹窗样式和布局

- 将节点编辑弹窗从 Modal 组件改为 Drawer 组件
- 调整弹窗位置、大小和样式
- 移除弹窗遮罩，提高操作灵活性
- 优化弹窗关闭逻辑

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}
+      onCancel={handleSave}
-      autoFocus={false}
-      focusLock={true}
-      style={{ width: '45%' }}
     >
       {getNodeEditor()}
-    </Modal>
+    </Drawer>
   );
 };
 

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">
+        <Panel position="top-center">
-          <div>从左侧拖拽节点到画布中</div>
           <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}