1

frontend/src/pages/Workflow/Definition/Design/index.less

@@ -100,13 +100,14 @@
                     position: absolute;
                     right: 20px;
                     bottom: 20px;
-                    width: 200px;
+                    width: var(--minimap-width);
-                    height: 150px;
+                    height: var(--minimap-height);
                     border: 1px solid #f0f0f0;
                     border-radius: 4px;
                     background: #fff;
-                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                     z-index: 1;
+                    overflow: hidden;
                 }
             }
         }

frontend/src/pages/Workflow/Definition/Design/index.tsx

@@ -55,7 +55,24 @@ const WorkflowDesign: React.FC = () => {
 
     // 初始化图形
     const initGraph = () => {
-        if (!graphContainerRef.current) return null;
+        if (!graphContainerRef.current) return;
+
+        // 获取主画布容器尺寸
+        const container = graphContainerRef.current;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        
+        // 计算主画布和小地图的尺寸比例
+        const MINIMAP_BASE_WIDTH = 200;
+        const minimapWidth = MINIMAP_BASE_WIDTH;
+        const minimapHeight = Math.round((MINIMAP_BASE_WIDTH * containerHeight) / containerWidth);
+        
+        // 计算缩放比例
+        const scale = minimapWidth / containerWidth;
+
+        // 将尺寸信息保存到样式变量中
+        document.documentElement.style.setProperty('--minimap-width', `${minimapWidth}px`);
+        document.documentElement.style.setProperty('--minimap-height', `${minimapHeight}px`);
 
         const graph = new Graph({
             container: graphContainerRef.current,
@@ -106,12 +123,12 @@ const WorkflowDesign: React.FC = () => {
         graph.use(new Selection());
         graph.use(new MiniMap({
             container: minimapContainerRef.current!,
-            width: 200,
+            width: minimapWidth,
-            height: 200,
+            height: minimapHeight,
-            padding: 10,
+            padding: 5,
-            scalable: true,
+            scalable: false,
-            minScale: 0.01,
+            minScale: scale * 0.8, // 稍微缩小一点以显示更多内容
-            maxScale: 16,
+            maxScale: scale * 1.2,
             graphOptions: {
                 connecting: {
                     connector: 'rounded',
@@ -120,11 +137,25 @@ const WorkflowDesign: React.FC = () => {
                         name: 'manhattan',
                     },
                 },
-                async: false,
+                async: true,
                 frozen: true,
                 interacting: false,
-                embedding: false,
+                grid: false,
+                getCellView(cell) {
+                    if (cell.isNode()) {
+                        return SimpleNodeView;
+                    }
+                },
             },
+            viewport: {
+                padding: 0,
+                fitToContent: false, // 禁用自动适配内容
+                initialPosition: { // 初始位置与主画布保持一致
+                    x: 0,
+                    y: 0
+                },
+                initialScale: scale
+            }
         }));
         graph.use(new Clipboard());
         graph.use(history);
@@ -173,6 +204,16 @@ const WorkflowDesign: React.FC = () => {
             setForceUpdate(prev => !prev);
         });
 
+        // 监听主画布变化，同步更新小地图
+        graph.on('transform', () => {
+            const minimap = graph.getPlugin('minimap') as MiniMap;
+            if (minimap) {
+                const mainViewport = graph.getView().getVisibleArea();
+                minimap.viewport.scale = scale;
+                minimap.viewport.center(mainViewport.center);
+            }
+        });
+
         registerEventHandlers(graph);
 
         return graph;