From d5a0c09857d571a5696082f0e1d2543b9ae86d72 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 6 Dec 2024 15:03:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=B3=E9=94=AE=E8=B7=9F?=
 =?UTF-8?q?=E5=B0=8F=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Definition/Designer/index.module.less     | 50 ++++++++++++++++---
 .../Workflow/Definition/Designer/index.tsx    | 27 ++++++++--
 2 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.module.less b/frontend/src/pages/Workflow/Definition/Designer/index.module.less
index e0a510bd..4b580fbd 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/index.module.less
+++ b/frontend/src/pages/Workflow/Definition/Designer/index.module.less
@@ -1,30 +1,41 @@
 :global {
     .workflow-designer {
         height: 100%;
+        display: flex;
+        flex-direction: column;
         
         &-container {
-            height: calc(100vh - 170px);
+            height: 100%;
             background: #fff;
             border-radius: 2px;
+            display: flex;
+            flex-direction: column;
         }
 
         &-sider {
             background: #fff;
             border-right: 1px solid #f0f0f0;
+            overflow: auto;
+            flex-shrink: 0;
         }
 
         &-content {
             position: relative;
-            height: 100%;
-            padding: 16px;
+            flex: 1;
+            min-height: 0;  // 允许内容区域收缩
+            padding: 8px;  // 减小内边距
             background: #fafafa;
+            display: flex;
+            flex-direction: column;
         }
 
         &-graph {
-            height: 100%;
+            flex: 1;
+            min-height: 0;  // 允许内容区域收缩
             background: #fff;
             border: 1px solid #f0f0f0;
             border-radius: 2px;
+            position: relative;
         }
         
         &-minimap {
@@ -37,16 +48,39 @@
             border: 1px solid #f0f0f0;
             border-radius: 4px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            z-index: 1;
         }
     }
     
-    .ant-card-body {
-        height: calc(100% - 57px);
-        padding: 0;
+    .ant-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        
+        .ant-card-head {
+            flex-shrink: 0;
+        }
+        
+        .ant-card-body {
+            flex: 1;
+            padding: 0;
+            min-height: 0;  // 允许内容区域收缩
+            display: flex;
+            flex-direction: column;
+        }
     }
     
     .ant-layout {
-        height: 100%;
+        flex: 1;
+        min-height: 0;  // 允许内容区域收缩
         background: #fff;
+        display: flex;
+        
+        .ant-layout-content {
+            flex: 1;
+            position: relative;
+            padding: 8px;  // 减小内边距
+            background: #fafafa;
+        }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
index 5820f9e6..a228f5b2 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
@@ -181,8 +181,7 @@ const FlowDesigner: React.FC = () => {
         // 创建画布
         const graph = new Graph({
             container: containerRef.current,
-            width: 800,
-            height: 600,
+            autoResize: true,  // 启用自动调整大小
             grid: {
                 visible: true,
                 type: 'mesh',
@@ -675,6 +674,26 @@ const FlowDesigner: React.FC = () => {
         };
     }, [detail, containerRef.current]);
 
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const resizeObserver = new ResizeObserver(() => {
+            if (graphRef.current) {
+                const container = containerRef.current;
+                if (container) {
+                    const { width, height } = container.getBoundingClientRect();
+                    graphRef.current.resize(width, height);
+                }
+            }
+        });
+
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
     // 处理节点拖拽开始
     const handleNodeDragStart = (nodeType: NodeType) => {
         draggedNodeRef.current = nodeType;
@@ -724,10 +743,10 @@ const FlowDesigner: React.FC = () => {
     return (
         <Card
             title={
-                <Space>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
                     <Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
-                </Space>
+                </div>
             }
             className="workflow-designer"
         >