diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx
index 4948fb8f..42e9a2a7 100644
--- a/frontend/src/pages/Workflow/Definition/Design/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx
@@ -1,17 +1,17 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Button, Space, Card, Row, Col, message, Modal } from 'antd';
-import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons';
-import { Graph, Cell } from '@antv/x6';
+import React, {useEffect, useState, useRef} from 'react';
+import {useParams, useNavigate} from 'react-router-dom';
+import {Button, Space, Card, Row, Col, message, Modal} from 'antd';
+import {ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined} from '@ant-design/icons';
+import {Graph, Cell} from '@antv/x6';
 import '@antv/x6-plugin-snapline';
-import { getDefinitionDetail, saveDefinition } from '../service';
-import { getNodeDefinitionList } from './service';
+import {getDefinitionDetail, saveDefinition} from '../service';
+import {getNodeDefinitionList} from './service';
 import NodePanel from './components/NodePanel';
 import NodeConfigDrawer from './components/NodeConfigModal';
-import { NodeDefinition } from './types';
-import { validateWorkflow } from './utils/validator';
-import { addNodeToGraph } from './utils/nodeUtils';
-import { applyAutoLayout } from './utils/layoutUtils';
+import {NodeDefinition} from './types';
+import {validateWorkflow} from './utils/validator';
+import {addNodeToGraph} from './utils/nodeUtils';
+import {applyAutoLayout} from './utils/layoutUtils';
 import {
     GRID_CONFIG,
     CONNECTING_CONFIG,
@@ -20,7 +20,7 @@ import {
 } from './constants';
 
 const WorkflowDesign: React.FC = () => {
-    const { id } = useParams<{ id: string }>();
+    const {id} = useParams<{ id: string }>();
     const navigate = useNavigate();
     const [title, setTitle] = useState<string>('工作流设计');
     const graphContainerRef = useRef<HTMLDivElement>(null);
@@ -81,14 +81,14 @@ const WorkflowDesign: React.FC = () => {
         });
 
         // 显示/隐藏连接桩
-        graph.on('node:mouseenter', ({ node }) => {
+        graph.on('node:mouseenter', ({node}) => {
             const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
             ports.forEach((port) => {
                 port.setAttribute('style', 'visibility: visible');
             });
         });
 
-        graph.on('node:mouseleave', ({ node }) => {
+        graph.on('node:mouseleave', ({node}) => {
             const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
             ports.forEach((port) => {
                 port.setAttribute('style', 'visibility: hidden');
@@ -96,7 +96,7 @@ const WorkflowDesign: React.FC = () => {
         });
 
         // 节点双击事件
-        graph.on('node:dblclick', ({ node }) => {
+        graph.on('node:dblclick', ({node}) => {
             const nodeType = node.getProp('type');
             console.log(nodeType)
             // 从节点定义列表中找到对应的定义
@@ -144,11 +144,11 @@ const WorkflowDesign: React.FC = () => {
                 const targetNode = nodeMap.get(edge.to);
                 if (sourceNode && targetNode) {
                     graphInstance.addEdge({
-                        source: { cell: sourceNode.id },
-                        target: { cell: targetNode.id },
-                        attrs: { line: DEFAULT_STYLES.edge },
+                        source: {cell: sourceNode.id},
+                        target: {cell: targetNode.id},
+                        attrs: {line: DEFAULT_STYLES.edge},
                         labels: [{
-                            attrs: { label: { text: edge.name || '' } }
+                            attrs: {label: {text: edge.name || ''}}
                         }]
                     });
                 }
@@ -175,8 +175,8 @@ const WorkflowDesign: React.FC = () => {
             if (!nodeData) return;
 
             const node = JSON.parse(nodeData);
-            const { clientX, clientY } = e;
-            const point = graph.clientToLocal({ x: clientX, y: clientY });
+            const {clientX, clientY} = e;
+            const point = graph.clientToLocal({x: clientX, y: clientY});
             addNodeToGraph(true, graph, node, nodeDefinitions, point);
         } catch (error) {
             console.error('创建节点失败:', error);
@@ -261,7 +261,7 @@ const WorkflowDesign: React.FC = () => {
 
             // 调用保存接口
             await saveDefinition(saveData);
-            
+
             // 使用 Modal.confirm 显示操作选择
             Modal.confirm({
                 title: '保存成功',
@@ -286,61 +286,55 @@ const WorkflowDesign: React.FC = () => {
     };
 
     return (
-        <div style={{ padding: '24px' }}>
-            <Card
-                title={title}
-                extra={
-                    <Space>
-                        <Button
-                            icon={<SaveOutlined />}
-                            type="primary"
-                            onClick={handleSaveWorkflow}
-                        >
-                            保存
-                        </Button>
-                        <Button
-                            icon={<ArrowLeftOutlined />}
-                            onClick={() => navigate('/workflow/definition')}
-                        >
-                            返回
-                        </Button>
-                    </Space>
-                }
-            >
-                <Row gutter={16}>
-                    <Col span={6}>
-                        <NodePanel 
-                            nodeDefinitions={nodeDefinitions}
-                            onNodeDragStart={handleNodeDragStart} 
-                        />
-                    </Col>
-                    <Col span={18}>
-                        <Card
-                            size="small"
-                            styles={{
-                                body: {
-                                    padding: 0,
-                                    height: 'calc(100vh - 250px)',
-                                    background: '#f5f5f5',
-                                    border: '1px solid #d9d9d9',
-                                    borderRadius: '4px',
-                                }
+        <div>
+            <Row gutter={16}>
+                <Col span={4}>
+                    <NodePanel
+                        nodeDefinitions={nodeDefinitions}
+                        onNodeDragStart={handleNodeDragStart}
+                    />
+                </Col>
+                <Col span={20}>
+                    <Card
+                        styles={{
+                            body: {
+                                padding: 0,
+                                height: 'calc(100vh - 250px)',
+                                background: '#f5f5f5',
+                                border: '1px solid #d9d9d9',
+                                borderRadius: '4px',
+                            }
+                        }}
+                        extra={
+                            <Space>
+                                <Button
+                                    icon={<SaveOutlined/>}
+                                    type="primary"
+                                    onClick={handleSaveWorkflow}
+                                >
+                                    保存
+                                </Button>
+                                <Button
+                                    icon={<ArrowLeftOutlined/>}
+                                    onClick={() => navigate('/workflow/definition')}
+                                >
+                                    返回
+                                </Button>
+                            </Space>
+                        }
+                    >
+                        <div
+                            ref={graphContainerRef}
+                            style={{
+                                width: '100%',
+                                height: '100%',
                             }}
-                        >
-                            <div
-                                ref={graphContainerRef}
-                                style={{
-                                    width: '100%',
-                                    height: '100%',
-                                }}
-                                onDrop={handleDrop}
-                                onDragOver={handleDragOver}
-                            />
-                        </Card>
-                    </Col>
-                </Row>
-            </Card>
-
+                            onDrop={handleDrop}
+                            onDragOver={handleDragOver}
+                        />
+                    </Card>
+                </Col>
+            </Row>
             <NodeConfigDrawer
                 visible={configModalVisible}
                 node={selectedNode}