优化小地图

frontend/src/pages/Workflow/Definition/Designer/index.module.less

@@ -44,15 +44,25 @@
 
         &-minimap {
             position: absolute;
-            right: 24px;
+            right: 20px;
-            bottom: 24px;
+            bottom: 20px;
-            width: 200px;
+            border: 1px solid #e5e5e5;
-            height: 150px;
-            background-color: #fff;
-            border: 1px solid #f0f0f0;
             border-radius: 4px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-            z-index: 1;
+            background-color: #fff;
+            overflow: hidden;
+            z-index: 999;
+
+            :global {
+                .x6-widget-minimap-viewport {
+                    border: 2px solid #1890ff;
+                    border-radius: 2px;
+                }
+
+                .x6-widget-minimap-viewport-zoom {
+                    border-color: #52c41a;
+                }
+            }
         }
     }
 

frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts

@@ -238,20 +238,79 @@ export const initGraph = ({
             container: miniMapContainer,
             width: 200,
             height: 150,
-            padding: 10,
+            padding: 20,
-            scalable: false,
+            scalable: true,
-            minScale: 0.5,
+            minScale: 0.1,
-            maxScale: 2,
+            maxScale: 3,
+            // 自动适应内容
+            fitToContent: true,
+            // 视口配置
+            viewport: {
+                padding: 10,
+                // 视口变化时自动适应
+                fitOnViewportChanged: true,
+            },
             graphOptions: {
                 async: true,
                 grid: false,
                 background: {
                     color: '#f5f5f5',
                 },
+                interacting: {
+                    nodeMovable: false,
+                },
+                connecting: {
+                    enabled: false,
+                },
             },
         })
     );
 
+    // 监听画布变化，更新小地图视图
+    const updateMinimap = () => {
+        if (graph.minimap) {
+            // 获取所有内容的边界
+            const contentArea = graph.getContentArea();
+            if (contentArea) {
+                const { width, height } = contentArea;
+                // 计算合适的缩放比例
+                const scale = Math.min(
+                    180 / width,  // 留出20px边距
+                    130 / height  // 留出20px边距
+                );
+                
+                // 更新视口
+                graph.minimap.updateViewport();
+                
+                // 调整缩放以显示完整内容
+                if (scale < 1) {
+                    graph.minimap.scaleTo(scale);
+                }
+                
+                // 确保视图居中
+                graph.minimap.centerContent();
+            }
+        }
+    };
+
+    // 监听节点变化
+    graph.on('node:added node:removed node:moved edge:added edge:removed', () => {
+        // 先让画布适应内容
+        graph.fitToContent({
+            padding: 20,
+            minScale: 0.1,
+            maxScale: 2,
+        });
+        
+        // 更新小地图
+        updateMinimap();
+    });
+
+    // 监听画布缩放和平移
+    graph.on('scale translate', () => {
+        updateMinimap();
+    });
+
     // 绑定事件
     graph.on('cell:contextmenu', ({ cell, e }) => {
         e.preventDefault();