增加右键跟小地图

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%;
+            flex: 1;
-            padding: 16px;
+            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 {
+    .ant-card {
-        height: calc(100% - 57px);
+        height: 100%;
-        padding: 0;
+        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;
+        }
     }
 }

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,
+            autoResize: true,  // 启用自动调整大小
-            height: 600,
             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"
         >