1

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

@@ -13,6 +13,8 @@ import {
     ScissorOutlined,
     SnippetsOutlined,
     SelectOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
 } from '@ant-design/icons';
 import {Graph, Cell} from '@antv/x6';
 import '@antv/x6-plugin-snapline';
@@ -52,6 +54,7 @@ const WorkflowDesign: React.FC = () => {
     const [nodeDefinitions, setNodeDefinitions] = useState<NodeDefinition[]>([]);
     const [isNodeDefinitionsLoaded, setIsNodeDefinitionsLoaded] = useState(false);
     const [forceUpdate, setForceUpdate] = useState(false);
+    const [scale, setScale] = useState(1);
 
     // 初始化图形
     const initGraph = () => {
@@ -309,6 +312,25 @@ const WorkflowDesign: React.FC = () => {
         }
     };
 
+    // 处理缩放
+    const handleZoom = (delta: number) => {
+        if (!graph) return;
+        const currentScale = graph.scale();
+        const newScale = Math.max(0.2, Math.min(2, currentScale.sx + delta));
+        graph.scale(newScale, newScale);
+        setScale(newScale);
+    };
+
+    // 放大
+    const handleZoomIn = () => {
+        handleZoom(0.1);
+    };
+
+    // 缩小
+    const handleZoomOut = () => {
+        handleZoom(-0.1);
+    };
+
     // 注册事件处理器
     const registerEventHandlers = (graph: Graph) => {
         // 定义悬停样式
@@ -874,6 +896,26 @@ const WorkflowDesign: React.FC = () => {
                                 />
                             </Tooltip>
                         </Space.Compact>
+                        <Space.Compact>
+                            <Tooltip title="放大">
+                                <Button
+                                    icon={<ZoomInOutlined />}
+                                    onClick={handleZoomIn}
+                                    disabled={scale >= 2}
+                                >
+                                    放大
+                                </Button>
+                            </Tooltip>
+                            <Tooltip title="缩小">
+                                <Button
+                                    icon={<ZoomOutOutlined />}
+                                    onClick={handleZoomOut}
+                                    disabled={scale <= 0.2}
+                                >
+                                    缩小
+                                </Button>
+                            </Tooltip>
+                        </Space.Compact>
                         <Space.Compact>
                             <Tooltip title="全选">
                                 <Button