From 3315114522d002579c20cd3038e85e88a11818c2 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 20 Oct 2025 21:58:31 +0800
Subject: [PATCH] 1

---
 .../Design/components/NodeConfigModal.tsx     | 315 ++++++++----------
 .../Workflow2/Design/components/NodePanel.tsx | 110 ++----
 .../Design/components/PropertyPanel.tsx       | 238 -------------
 frontend/src/pages/Workflow2/Design/index.tsx |  88 ++---
 .../Design/nodes/definitions/DeployNode.ts    | 189 +++++++++++
 .../Design/nodes/definitions/EndEventNode.ts  |  56 ++++
 .../nodes/definitions/ServiceTaskNode.ts      | 180 ++++++++++
 .../nodes/definitions/StartEventNode.ts       |  56 ++++
 .../Design/nodes/definitions/UserTaskNode.ts  | 155 +++++++++
 .../Design/nodes/definitions/index.ts         |  29 ++
 .../src/pages/Workflow2/Design/nodes/types.ts |  99 ++++++
 frontend/src/pages/Workflow2/Design/types.ts  |  15 +-
 12 files changed, 968 insertions(+), 562 deletions(-)
 delete mode 100644 frontend/src/pages/Workflow2/Design/components/PropertyPanel.tsx
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/definitions/DeployNode.ts
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/definitions/EndEventNode.ts
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/definitions/ServiceTaskNode.ts
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/definitions/StartEventNode.ts
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/definitions/UserTaskNode.ts
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/definitions/index.ts
 create mode 100644 frontend/src/pages/Workflow2/Design/nodes/types.ts

diff --git a/frontend/src/pages/Workflow2/Design/components/NodeConfigModal.tsx b/frontend/src/pages/Workflow2/Design/components/NodeConfigModal.tsx
index 4bfc14f4..9fe0b22c 100644
--- a/frontend/src/pages/Workflow2/Design/components/NodeConfigModal.tsx
+++ b/frontend/src/pages/Workflow2/Design/components/NodeConfigModal.tsx
@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Input, Tabs, Card, Button, Space, message } from 'antd';
+import { Modal, Tabs, Button, Space, message } from 'antd';
 import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { convertJsonSchemaToColumns } from '@/utils/jsonSchemaUtils';
 import type { FlowNode, FlowNodeData } from '../types';
+import type { WorkflowNodeDefinition } from '../nodes/types';
+import { isConfigurableNode } from '../nodes/types';
 
 interface NodeConfigModalProps {
     visible: boolean;
@@ -10,7 +14,11 @@ interface NodeConfigModalProps {
     onOk: (nodeId: string, updatedData: Partial<FlowNodeData>) => void;
 }
 
-const { TextArea } = Input;
+interface FormData {
+    configs?: Record<string, any>;
+    inputMapping?: Record<string, any>;
+    outputMapping?: Record<string, any>;
+}
 
 const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
     visible,
@@ -18,187 +26,176 @@ const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
     onCancel,
     onOk
 }) => {
-    const [form] = Form.useForm();
     const [loading, setLoading] = useState(false);
-    const [activeTab, setActiveTab] = useState('basic');
+    const [activeTab, setActiveTab] = useState('config');
+    const [formData, setFormData] = useState<FormData>({});
+
+    // 获取节点定义
+    const nodeDefinition: WorkflowNodeDefinition | null = node?.data?.nodeDefinition || null;
 
-    // 重置表单数据
     useEffect(() => {
-        if (visible && node) {
-            form.setFieldsValue({
-                label: node.data.label,
-                description: node.data.nodeDefinition?.description || '',
-                // 基础配置
-                timeout: node.data.configs?.timeout || 3600,
-                retryCount: node.data.configs?.retryCount || 0,
-                priority: node.data.configs?.priority || 'normal',
-                // 输入映射
-                inputMapping: JSON.stringify(node.data.inputMapping || {}, null, 2),
-                // 输出映射
-                outputMapping: JSON.stringify(node.data.outputMapping || {}, null, 2),
+        if (visible && node && nodeDefinition) {
+            // 从节点数据中获取现有配置
+            const nodeData = node.data || {};
+            
+            // 准备默认的基本信息配置
+            const defaultConfig = {
+                nodeName: nodeDefinition.nodeName,      // 默认节点名称
+                nodeCode: nodeDefinition.nodeCode,      // 默认节点编码  
+                description: nodeDefinition.description  // 默认节点描述
+            };
+            
+            // 合并默认值和已保存的配置
+            setFormData({
+                configs: { ...defaultConfig, ...(nodeData.configs || {}) },
+                inputMapping: nodeData.inputMapping || {},
+                outputMapping: nodeData.outputMapping || {},
             });
         } else {
-            form.resetFields();
+            setFormData({});
         }
-    }, [visible, node, form]);
+    }, [visible, node, nodeDefinition]);
 
-    const handleSubmit = async () => {
+    const handleSubmit = () => {
         if (!node) return;
-
+        
         try {
-            const values = await form.validateFields();
             setLoading(true);
 
-            // 解析JSON字符串
-            let inputMapping = {};
-            let outputMapping = {};
-
-            try {
-                inputMapping = values.inputMapping ? JSON.parse(values.inputMapping) : {};
-            } catch (error) {
-                message.error('输入映射JSON格式错误');
-                return;
-            }
-
-            try {
-                outputMapping = values.outputMapping ? JSON.parse(values.outputMapping) : {};
-            } catch (error) {
-                message.error('输出映射JSON格式错误');
-                return;
-            }
-
             const updatedData: Partial<FlowNodeData> = {
-                label: values.label,
-                configs: {
-                    ...node.data.configs,
-                    timeout: values.timeout,
-                    retryCount: values.retryCount,
-                    priority: values.priority,
-                },
-                inputMapping,
-                outputMapping,
+                // 更新节点标签为配置中的节点名称
+                label: formData.configs?.nodeName || node.data.label,
+                configs: formData.configs,
+                inputMapping: formData.inputMapping,
+                outputMapping: formData.outputMapping,
             };
 
             onOk(node.id, updatedData);
             message.success('节点配置保存成功');
             onCancel();
         } catch (error) {
-            console.error('保存节点配置失败:', error);
+            if (error instanceof Error) {
+                message.error(error.message);
+            }
         } finally {
             setLoading(false);
         }
     };
 
     const handleReset = () => {
-        form.resetFields();
-        if (node) {
-            form.setFieldsValue({
-                label: node.data.label,
-                description: node.data.nodeDefinition?.description || '',
-                timeout: 3600,
-                retryCount: 0,
-                priority: 'normal',
-                inputMapping: '{}',
-                outputMapping: '{}',
+        if (nodeDefinition) {
+            const defaultConfig = {
+                nodeName: nodeDefinition.nodeName,
+                nodeCode: nodeDefinition.nodeCode,
+                description: nodeDefinition.description
+            };
+            
+            setFormData({
+                configs: defaultConfig,
+                inputMapping: {},
+                outputMapping: {},
             });
         }
     };
 
-    const renderBasicConfig = () => (
-        <Card size="small" title="基本信息">
-            <Form.Item
-                label="节点名称"
-                name="label"
-                rules={[{ required: true, message: '请输入节点名称' }]}
-            >
-                <Input placeholder="请输入节点名称" />
-            </Form.Item>
+    const handleConfigChange = (values: Record<string, any>) => {
+        setFormData(prev => ({
+            ...prev,
+            configs: values
+        }));
+    };
 
-            <Form.Item label="节点描述" name="description">
-                <TextArea 
-                    placeholder="请输入节点描述"
-                    rows={3}
-                    maxLength={500}
-                    showCount
-                />
-            </Form.Item>
+    const handleInputMappingChange = (values: Record<string, any>) => {
+        setFormData(prev => ({
+            ...prev,
+            inputMapping: values
+        }));
+    };
 
-            <Form.Item
-                label="超时时间(秒)"
-                name="timeout"
-                rules={[{ required: true, message: '请输入超时时间' }]}
-            >
-                <Input type="number" min={1} placeholder="3600" />
-            </Form.Item>
+    const handleOutputMappingChange = (values: Record<string, any>) => {
+        setFormData(prev => ({
+            ...prev,
+            outputMapping: values
+        }));
+    };
 
-            <Form.Item
-                label="重试次数"
-                name="retryCount"
-            >
-                <Input type="number" min={0} max={10} placeholder="0" />
-            </Form.Item>
+    if (!nodeDefinition) {
+        return null;
+    }
 
-            <Form.Item
-                label="优先级"
-                name="priority"
-            >
-                <Input placeholder="normal" />
-            </Form.Item>
-        </Card>
-    );
+    // 构建Tabs配置
+    const tabItems = [
+        {
+            key: 'config',
+            label: '基本配置',
+            children: (
+                <div style={{ padding: '16px 0' }}>
+                    <BetaSchemaForm
+                        key={`configs-${node?.id}-${JSON.stringify(formData.configs)}`}
+                        layoutType="Form"
+                        columns={convertJsonSchemaToColumns(nodeDefinition.configSchema as any)}
+                        initialValues={formData.configs}
+                        onValuesChange={(_, allValues) => handleConfigChange(allValues)}
+                        submitter={false}
+                    />
+                </div>
+            ),
+        },
+    ];
 
-    const renderInputMapping = () => (
-        <Card size="small" title="输入参数映射">
-            <Form.Item
-                label="输入映射配置"
-                name="inputMapping"
-                extra="请输入有效的JSON格式，用于配置节点的输入参数映射"
-            >
-                <TextArea
-                    placeholder={`示例：
-{
-  "param1": "\${workflow.variable1}",
-  "param2": "固定值",
-  "param3": "\${previous.output.result}"
-}`}
-                    rows={12}
-                    style={{ fontFamily: 'Monaco, Consolas, monospace' }}
-                />
-            </Form.Item>
-        </Card>
-    );
+    // 如果是可配置节点，添加输入和输出映射TAB
+    if (isConfigurableNode(nodeDefinition)) {
+        if (nodeDefinition.inputMappingSchema) {
+            tabItems.push({
+                key: 'input',
+                label: '输入映射',
+                children: (
+                    <div style={{ padding: '16px 0' }}>
+                        <BetaSchemaForm
+                            key={`input-${node?.id}-${JSON.stringify(formData.inputMapping)}`}
+                            layoutType="Form"
+                            columns={convertJsonSchemaToColumns(nodeDefinition.inputMappingSchema as any)}
+                            initialValues={formData.inputMapping}
+                            onValuesChange={(_, allValues) => handleInputMappingChange(allValues)}
+                            submitter={false}
+                        />
+                    </div>
+                ),
+            });
+        }
 
-    const renderOutputMapping = () => (
-        <Card size="small" title="输出参数映射">
-            <Form.Item
-                label="输出映射配置"
-                name="outputMapping"
-                extra="请输入有效的JSON格式，用于配置节点的输出参数映射"
-            >
-                <TextArea
-                    placeholder={`示例：
-{
-  "result": "\${task.output.result}",
-  "status": "\${task.status}",
-  "message": "\${task.output.message}"
-}`}
-                    rows={12}
-                    style={{ fontFamily: 'Monaco, Consolas, monospace' }}
-                />
-            </Form.Item>
-        </Card>
-    );
+        if (nodeDefinition.outputMappingSchema) {
+            tabItems.push({
+                key: 'output',
+                label: '输出映射',
+                children: (
+                    <div style={{ padding: '16px 0' }}>
+                        <BetaSchemaForm
+                            key={`output-${node?.id}-${JSON.stringify(formData.outputMapping)}`}
+                            layoutType="Form"
+                            columns={convertJsonSchemaToColumns(nodeDefinition.outputMappingSchema as any)}
+                            initialValues={formData.outputMapping}
+                            onValuesChange={(_, allValues) => handleOutputMappingChange(allValues)}
+                            submitter={false}
+                        />
+                    </div>
+                ),
+            });
+        }
+    }
 
     return (
         <Modal
-            title={`配置节点: ${node?.data?.label || '未知节点'}`}
+            title={`编辑节点 - ${nodeDefinition.nodeName}`}
             open={visible}
             onCancel={onCancel}
             width={800}
             style={{ top: 20 }}
             footer={
                 <Space>
-                    <Button onClick={onCancel}>取消</Button>
+                    <Button onClick={onCancel}>
+                        取消
+                    </Button>
                     <Button 
                         icon={<ReloadOutlined />} 
                         onClick={handleReset}
@@ -216,41 +213,15 @@ const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
                 </Space>
             }
         >
-            <Form
-                form={form}
-                layout="vertical"
-                initialValues={{
-                    timeout: 3600,
-                    retryCount: 0,
-                    priority: 'normal',
-                    inputMapping: '{}',
-                    outputMapping: '{}'
-                }}
-            >
-                <Tabs 
-                    activeKey={activeTab} 
+            <div style={{ maxHeight: '70vh', overflow: 'auto' }}>
+                <Tabs
+                    activeKey={activeTab}
                     onChange={setActiveTab}
-                    items={[
-                        {
-                            key: 'basic',
-                            label: '基本配置',
-                            children: renderBasicConfig()
-                        },
-                        {
-                            key: 'input',
-                            label: '输入映射',
-                            children: renderInputMapping()
-                        },
-                        {
-                            key: 'output',
-                            label: '输出映射',
-                            children: renderOutputMapping()
-                        }
-                    ]}
+                    items={tabItems}
                 />
-            </Form>
+            </div>
         </Modal>
     );
 };
 
-export default NodeConfigModal;
+export default NodeConfigModal;
\ No newline at end of file
diff --git a/frontend/src/pages/Workflow2/Design/components/NodePanel.tsx b/frontend/src/pages/Workflow2/Design/components/NodePanel.tsx
index 25f20f65..c3ba6a2e 100644
--- a/frontend/src/pages/Workflow2/Design/components/NodePanel.tsx
+++ b/frontend/src/pages/Workflow2/Design/components/NodePanel.tsx
@@ -1,82 +1,22 @@
 import React from 'react';
-import { Card, Divider } from 'antd';
-import { NodeType, NodeCategory, type NodeDefinitionData } from '../types';
+import { NodeCategory } from '../types';
+import { NODE_DEFINITIONS } from '../nodes/definitions';
+import type { WorkflowNodeDefinition } from '../nodes/types';
 
-// 节点定义数据
-const nodeDefinitions: NodeDefinitionData[] = [
-    {
-        nodeCode: 'start_event',
-        nodeName: '开始事件',
-        nodeType: NodeType.START_EVENT,
-        category: NodeCategory.EVENT,
-        description: '工作流开始节点',
-        icon: '▶️',
-        color: '#10b981'
-    },
-    {
-        nodeCode: 'end_event',
-        nodeName: '结束事件',
-        nodeType: NodeType.END_EVENT,
-        category: NodeCategory.EVENT,
-        description: '工作流结束节点',
-        icon: '⏹️',
-        color: '#ef4444'
-    },
-    {
-        nodeCode: 'user_task',
-        nodeName: '用户任务',
-        nodeType: NodeType.USER_TASK,
-        category: NodeCategory.TASK,
-        description: '需要用户手动处理的任务',
-        icon: '👤',
-        color: '#6366f1'
-    },
-    {
-        nodeCode: 'service_task',
-        nodeName: '服务任务',
-        nodeType: NodeType.SERVICE_TASK,
-        category: NodeCategory.TASK,
-        description: '自动执行的服务任务',
-        icon: '⚙️',
-        color: '#f59e0b'
-    },
-    {
-        nodeCode: 'script_task',
-        nodeName: '脚本任务',
-        nodeType: NodeType.SCRIPT_TASK,
-        category: NodeCategory.TASK,
-        description: '执行脚本代码的任务',
-        icon: '📜',
-        color: '#8b5cf6'
-    },
-    {
-        nodeCode: 'deploy_node',
-        nodeName: '部署节点',
-        nodeType: NodeType.DEPLOY_NODE,
-        category: NodeCategory.TASK,
-        description: '应用部署任务',
-        icon: '🚀',
-        color: '#06b6d4'
-    },
-    {
-        nodeCode: 'jenkins_build',
-        nodeName: 'Jenkins构建',
-        nodeType: NodeType.JENKINS_BUILD,
-        category: NodeCategory.TASK,
-        description: 'Jenkins构建任务',
-        icon: '🔨',
-        color: '#dc2626'
-    },
-    {
-        nodeCode: 'gateway_node',
-        nodeName: '网关节点',
-        nodeType: NodeType.GATEWAY_NODE,
-        category: NodeCategory.GATEWAY,
-        description: '条件分支网关',
-        icon: '💎',
-        color: '#7c3aed'
-    }
-];
+// 图标映射函数
+const getNodeIcon = (iconName: string): string => {
+    const iconMap: Record<string, string> = {
+        'play-circle': '▶️',
+        'stop-circle': '⏹️',
+        'user': '👤',
+        'api': '⚙️',
+        'code': '📜',
+        'build': '🚀',
+        'jenkins': '🔨',
+        'gateway': '💎'
+    };
+    return iconMap[iconName] || '📋';
+};
 
 interface NodePanelProps {
     className?: string;
@@ -84,16 +24,16 @@ interface NodePanelProps {
 
 const NodePanel: React.FC<NodePanelProps> = ({ className = '' }) => {
     // 按分类分组节点
-    const nodesByCategory = nodeDefinitions.reduce((acc, node) => {
+    const nodesByCategory = NODE_DEFINITIONS.reduce((acc, node) => {
         if (!acc[node.category]) {
             acc[node.category] = [];
         }
         acc[node.category].push(node);
         return acc;
-    }, {} as Record<NodeCategory, NodeDefinitionData[]>);
+    }, {} as Record<NodeCategory, WorkflowNodeDefinition[]>);
 
     // 拖拽开始处理
-    const handleDragStart = (event: React.DragEvent, nodeDefinition: NodeDefinitionData) => {
+    const handleDragStart = (event: React.DragEvent, nodeDefinition: WorkflowNodeDefinition) => {
         event.dataTransfer.setData('application/reactflow', JSON.stringify({
             nodeType: nodeDefinition.nodeType,
             nodeDefinition
@@ -102,11 +42,10 @@ const NodePanel: React.FC<NodePanelProps> = ({ className = '' }) => {
     };
 
     // 渲染节点项
-    const renderNodeItem = (nodeDefinition: NodeDefinitionData) => (
+    const renderNodeItem = (nodeDefinition: WorkflowNodeDefinition) => (
         <div
             key={nodeDefinition.nodeCode}
             draggable
-            onDragStart={(e) => handleDragStart(e, nodeDefinition)}
             style={{
                 display: 'flex',
                 alignItems: 'center',
@@ -121,7 +60,7 @@ const NodePanel: React.FC<NodePanelProps> = ({ className = '' }) => {
             }}
             onMouseEnter={(e) => {
                 e.currentTarget.style.background = '#f9fafb';
-                e.currentTarget.style.borderColor = nodeDefinition.color;
+                e.currentTarget.style.borderColor = nodeDefinition.uiConfig.style.fill;
                 e.currentTarget.style.transform = 'translateX(2px)';
             }}
             onMouseLeave={(e) => {
@@ -140,9 +79,10 @@ const NodePanel: React.FC<NodePanelProps> = ({ className = '' }) => {
             <div style={{
                 fontSize: '16px',
                 width: '20px',
-                textAlign: 'center'
+                textAlign: 'center',
+                color: nodeDefinition.uiConfig.style.fill
             }}>
-                {nodeDefinition.icon}
+                {getNodeIcon(nodeDefinition.uiConfig.style.icon)}
             </div>
             <div>
                 <div style={{
diff --git a/frontend/src/pages/Workflow2/Design/components/PropertyPanel.tsx b/frontend/src/pages/Workflow2/Design/components/PropertyPanel.tsx
deleted file mode 100644
index 20a3735f..00000000
--- a/frontend/src/pages/Workflow2/Design/components/PropertyPanel.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, Form, Input, Select, Button, Space, message, Divider } from 'antd';
-import { SaveOutlined, ClearOutlined } from '@ant-design/icons';
-import type { FlowNode, FlowEdge } from '../types';
-
-interface PropertyPanelProps {
-    selectedNode?: FlowNode | null;
-    selectedEdge?: FlowEdge | null;
-    onNodeUpdate?: (nodeId: string, updates: any) => void;
-    onEdgeUpdate?: (edgeId: string, updates: any) => void;
-    className?: string;
-}
-
-const PropertyPanel: React.FC<PropertyPanelProps> = ({
-    selectedNode,
-    selectedEdge,
-    onNodeUpdate,
-    onEdgeUpdate,
-    className = ''
-}) => {
-    const [form] = Form.useForm();
-    const [hasChanges, setHasChanges] = useState(false);
-
-    // 重置表单
-    useEffect(() => {
-        if (selectedNode) {
-            form.setFieldsValue({
-                label: selectedNode.data.label,
-                timeout: selectedNode.data.configs?.timeout || 3600,
-                retryCount: selectedNode.data.configs?.retryCount || 0,
-                priority: selectedNode.data.configs?.priority || 'normal',
-            });
-        } else if (selectedEdge) {
-            form.setFieldsValue({
-                label: selectedEdge.data?.label || '',
-                conditionType: selectedEdge.data?.condition?.type || 'DEFAULT',
-                expression: selectedEdge.data?.condition?.expression || '',
-            });
-        } else {
-            form.resetFields();
-        }
-        setHasChanges(false);
-    }, [selectedNode, selectedEdge, form]);
-
-    // 监听表单变化
-    const handleFormChange = () => {
-        setHasChanges(true);
-    };
-
-    // 保存配置
-    const handleSave = async () => {
-        try {
-            const values = await form.validateFields();
-            
-            if (selectedNode && onNodeUpdate) {
-                const updates = {
-                    label: values.label,
-                    configs: {
-                        ...selectedNode.data.configs,
-                        timeout: values.timeout,
-                        retryCount: values.retryCount,
-                        priority: values.priority,
-                    },
-                };
-                onNodeUpdate(selectedNode.id, updates);
-                message.success('节点配置已保存');
-            } else if (selectedEdge && onEdgeUpdate) {
-                const updates = {
-                    label: values.label,
-                    condition: {
-                        type: values.conditionType,
-                        expression: values.expression,
-                        priority: 0,
-                    },
-                };
-                onEdgeUpdate(selectedEdge.id, updates);
-                message.success('连接配置已保存');
-            }
-            
-            setHasChanges(false);
-        } catch (error) {
-            message.error('保存失败');
-        }
-    };
-
-    // 清空选择
-    const handleClear = () => {
-        form.resetFields();
-        setHasChanges(false);
-    };
-
-    // 渲染节点属性
-    const renderNodeProperties = () => {
-        if (!selectedNode) return null;
-
-        return (
-            <Card size="small" title={`节点属性: ${selectedNode.data.nodeType}`}>
-                <Form.Item label="节点名称" name="label" rules={[{ required: true }]}>
-                    <Input placeholder="请输入节点名称" />
-                </Form.Item>
-                
-                <Form.Item label="超时时间(秒)" name="timeout">
-                    <Input type="number" min={1} placeholder="3600" />
-                </Form.Item>
-                
-                <Form.Item label="重试次数" name="retryCount">
-                    <Input type="number" min={0} max={10} placeholder="0" />
-                </Form.Item>
-                
-                <Form.Item label="优先级" name="priority">
-                    <Select placeholder="选择优先级">
-                        <Select.Option value="low">低</Select.Option>
-                        <Select.Option value="normal">普通</Select.Option>
-                        <Select.Option value="high">高</Select.Option>
-                        <Select.Option value="urgent">紧急</Select.Option>
-                    </Select>
-                </Form.Item>
-            </Card>
-        );
-    };
-
-    // 渲染边属性
-    const renderEdgeProperties = () => {
-        if (!selectedEdge) return null;
-
-        return (
-            <Card size="small" title="连接属性">
-                <Form.Item label="连接名称" name="label">
-                    <Input placeholder="请输入连接名称" />
-                </Form.Item>
-                
-                <Form.Item label="条件类型" name="conditionType">
-                    <Select placeholder="选择条件类型">
-                        <Select.Option value="DEFAULT">默认</Select.Option>
-                        <Select.Option value="EXPRESSION">表达式</Select.Option>
-                        <Select.Option value="SCRIPT">脚本</Select.Option>
-                    </Select>
-                </Form.Item>
-                
-                <Form.Item label="条件表达式" name="expression">
-                    <Input.TextArea 
-                        placeholder="请输入条件表达式"
-                        rows={4}
-                    />
-                </Form.Item>
-            </Card>
-        );
-    };
-
-    return (
-        <div className={`property-panel ${className}`} style={{
-            width: '300px',
-            height: '100%',
-            background: '#f8fafc',
-            borderLeft: '1px solid #e5e7eb',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden'
-        }}>
-            <div style={{ 
-                padding: '16px', 
-                background: '#ffffff', 
-                borderBottom: '1px solid #e5e7eb',
-                flexShrink: 0
-            }}>
-                <h3 style={{
-                    margin: 0,
-                    fontSize: '14px',
-                    fontWeight: '600',
-                    color: '#374151'
-                }}>
-                    属性面板
-                </h3>
-                <p style={{
-                    margin: '4px 0 0 0',
-                    fontSize: '12px',
-                    color: '#6b7280'
-                }}>
-                    {selectedNode ? '节点配置' : selectedEdge ? '连接配置' : '请选择节点或连接'}
-                </p>
-            </div>
-
-            <div style={{ flex: 1, overflow: 'auto', padding: '16px' }}>
-                {!selectedNode && !selectedEdge && (
-                    <div style={{
-                        textAlign: 'center',
-                        color: '#9ca3af',
-                        fontSize: '14px',
-                        marginTop: '40px'
-                    }}>
-                        <div style={{ fontSize: '48px', marginBottom: '16px' }}>📋</div>
-                        <p>请选择一个节点或连接</p>
-                        <p style={{ fontSize: '12px' }}>点击节点或连接来编辑属性</p>
-                    </div>
-                )}
-
-                <Form
-                    form={form}
-                    layout="vertical"
-                    onValuesChange={handleFormChange}
-                >
-                    {renderNodeProperties()}
-                    {renderEdgeProperties()}
-                </Form>
-            </div>
-
-            {(selectedNode || selectedEdge) && (
-                <div style={{ 
-                    padding: '16px', 
-                    background: '#ffffff', 
-                    borderTop: '1px solid #e5e7eb',
-                    flexShrink: 0
-                }}>
-                    <Space style={{ width: '100%', justifyContent: 'space-between' }}>
-                        <Button 
-                            icon={<ClearOutlined />} 
-                            onClick={handleClear}
-                            size="small"
-                        >
-                            重置
-                        </Button>
-                        <Button 
-                            type="primary"
-                            icon={<SaveOutlined />}
-                            onClick={handleSave}
-                            disabled={!hasChanges}
-                            size="small"
-                        >
-                            保存
-                        </Button>
-                    </Space>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default PropertyPanel;
diff --git a/frontend/src/pages/Workflow2/Design/index.tsx b/frontend/src/pages/Workflow2/Design/index.tsx
index 9cf25d93..1365c7ff 100644
--- a/frontend/src/pages/Workflow2/Design/index.tsx
+++ b/frontend/src/pages/Workflow2/Design/index.tsx
@@ -7,8 +7,8 @@ import WorkflowToolbar from './components/WorkflowToolbar';
 import NodePanel from './components/NodePanel';
 import FlowCanvas from './components/FlowCanvas';
 import NodeConfigModal from './components/NodeConfigModal';
-import PropertyPanel from './components/PropertyPanel';
-import type { FlowNode, FlowEdge, DragNodeData, FlowNodeData } from './types';
+import type { FlowNode, FlowEdge, FlowNodeData } from './types';
+import type { WorkflowNodeDefinition } from './nodes/types';
 import { NodeType } from './types';
 import { useWorkflowSave } from './hooks/useWorkflowSave';
 import { useWorkflowLoad } from './hooks/useWorkflowLoad';
@@ -40,12 +40,11 @@ const WorkflowDesignInner: React.FC = () => {
     
     // 节点配置模态框状态
     const [configModalVisible, setConfigModalVisible] = useState(false);
-    const [selectedNode, setSelectedNode] = useState<FlowNode | null>(null);
-    const [selectedEdge, setSelectedEdge] = useState<FlowEdge | null>(null);
+    const [configNode, setConfigNode] = useState<FlowNode | null>(null);
     
     // 保存和加载hooks
-    const { saving, hasUnsavedChanges, saveWorkflow, markUnsaved } = useWorkflowSave();
-    const { loading: loadingWorkflow, workflowDefinition, loadWorkflow } = useWorkflowLoad();
+    const { hasUnsavedChanges, saveWorkflow, markUnsaved } = useWorkflowSave();
+    const { workflowDefinition, loadWorkflow } = useWorkflowLoad();
 
     // 加载工作流数据
     useEffect(() => {
@@ -230,7 +229,7 @@ const WorkflowDesignInner: React.FC = () => {
         if (!dragData) return;
 
         try {
-            const { nodeType, nodeDefinition }: DragNodeData = JSON.parse(dragData);
+            const { nodeType, nodeDefinition }: { nodeType: string; nodeDefinition: WorkflowNodeDefinition } = JSON.parse(dragData);
             
             // 根据React Flow官方文档，screenToFlowPosition会自动处理所有边界计算
             // 不需要手动减去容器边界！
@@ -245,11 +244,20 @@ const WorkflowDesignInner: React.FC = () => {
                 position,
                 data: {
                     label: nodeDefinition.nodeName,
-                    nodeType,
+                    nodeType: nodeDefinition.nodeType,
                     category: nodeDefinition.category,
-                    icon: nodeDefinition.icon,
-                    color: nodeDefinition.color,
-                    nodeDefinition
+                    icon: nodeDefinition.uiConfig.style.icon,
+                    color: nodeDefinition.uiConfig.style.fill,
+                    // 保存原始节点定义引用，用于配置
+                    nodeDefinition,
+                    // 初始化配置数据
+                    configs: {
+                        nodeName: nodeDefinition.nodeName,
+                        nodeCode: nodeDefinition.nodeCode,
+                        description: nodeDefinition.description
+                    },
+                    inputMapping: {},
+                    outputMapping: {}
                 }
             };
 
@@ -261,31 +269,22 @@ const WorkflowDesignInner: React.FC = () => {
         }
     }, [screenToFlowPosition, setNodes]);
 
-    // 处理节点点击 - 单击选择，双击打开配置面板
+    // 处理节点双击 - 打开配置面板
     const handleNodeClick = useCallback((event: React.MouseEvent, node: FlowNode) => {
-        console.log('节点点击:', node);
-        
-        // 清除边选择
-        setSelectedEdge(null);
-        
-        // 检查是否是双击
+        // 只处理双击事件
         if (event.detail === 2) {
-            setSelectedNode(node);
+            console.log('双击节点，打开配置:', node);
+            setConfigNode(node);
             setConfigModalVisible(true);
-        } else {
-            setSelectedNode(node);
-            message.info(`选择了节点: ${node.data.label}`);
         }
     }, []);
 
-    // 处理边点击
+    // 处理边双击 - 暂时只记录日志
     const handleEdgeClick = useCallback((event: React.MouseEvent, edge: FlowEdge) => {
-        console.log('边点击:', edge);
-        
-        // 清除节点选择
-        setSelectedNode(null);
-        setSelectedEdge(edge);
-        message.info(`选择了连接: ${edge.data?.label || '连接'}`);
+        if (event.detail === 2) {
+            console.log('双击边:', edge);
+            message.info(`双击了连接: ${edge.data?.label || '连接'}，配置功能待实现`);
+        }
     }, []);
 
     // 处理节点配置更新
@@ -306,28 +305,10 @@ const WorkflowDesignInner: React.FC = () => {
         markUnsaved(); // 标记有未保存更改
     }, [setNodes, markUnsaved]);
 
-    // 处理边配置更新
-    const handleEdgeConfigUpdate = useCallback((edgeId: string, updatedData: any) => {
-        setEdges((edges) =>
-            edges.map((edge) =>
-                edge.id === edgeId
-                    ? {
-                        ...edge,
-                        data: {
-                            ...edge.data,
-                            ...updatedData,
-                        },
-                    }
-                    : edge
-            )
-        );
-        markUnsaved(); // 标记有未保存更改
-    }, [setEdges, markUnsaved]);
-
     // 关闭配置模态框
     const handleCloseConfigModal = useCallback(() => {
         setConfigModalVisible(false);
-        setSelectedNode(null);
+        setConfigNode(null);
     }, []);
 
     return (
@@ -343,7 +324,6 @@ const WorkflowDesignInner: React.FC = () => {
                 title={`${workflowTitle}${hasUnsavedChanges ? ' *' : ''}`}
                 onSave={handleSave}
                 onBack={handleBack}
-                saving={saving}
                 onUndo={handleUndo}
                 onRedo={handleRedo}
                 onCopy={handleCopy}
@@ -376,20 +356,12 @@ const WorkflowDesignInner: React.FC = () => {
                         className="workflow-canvas"
                     />
                 </div>
-                
-                {/* 属性面板 */}
-                <PropertyPanel
-                    selectedNode={selectedNode}
-                    selectedEdge={selectedEdge}
-                    onNodeUpdate={handleNodeConfigUpdate}
-                    onEdgeUpdate={handleEdgeConfigUpdate}
-                />
             </div>
             
             {/* 节点配置弹窗 */}
             <NodeConfigModal
                 visible={configModalVisible}
-                node={selectedNode}
+                node={configNode}
                 onCancel={handleCloseConfigModal}
                 onOk={handleNodeConfigUpdate}
             />
diff --git a/frontend/src/pages/Workflow2/Design/nodes/definitions/DeployNode.ts b/frontend/src/pages/Workflow2/Design/nodes/definitions/DeployNode.ts
new file mode 100644
index 00000000..514175ca
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/definitions/DeployNode.ts
@@ -0,0 +1,189 @@
+import { ConfigurableNodeDefinition, NodeType, NodeCategory } from '../types';
+
+/**
+ * 部署任务节点定义
+ * 可配置节点，支持配置、输入映射、输出映射
+ */
+export const DeployNode: ConfigurableNodeDefinition = {
+  nodeCode: "DEPLOY_NODE",
+  nodeName: "构建任务",
+  nodeType: NodeType.DEPLOY_NODE,
+  category: NodeCategory.TASK,
+  description: "执行应用构建和部署任务",
+  
+  // UI 配置
+  uiConfig: {
+    size: {
+      width: 120,
+      height: 60
+    },
+    style: {
+      fill: '#1890ff',
+      stroke: '#0050b3',
+      strokeWidth: 2,
+      icon: 'build',
+      iconColor: '#fff'
+    }
+  },
+
+  // 基本配置Schema - 设计时用于生成表单，保存时转为key/value（包含基本信息+节点配置）
+  configSchema: {
+    type: "object",
+    title: "基本配置",
+    description: "节点的基本信息和构建任务的配置参数",
+    properties: {
+      // 基本信息
+      nodeName: {
+        type: "string",
+        title: "节点名称",
+        description: "节点在流程图中显示的名称",
+        default: "构建任务"
+      },
+      nodeCode: {
+        type: "string", 
+        title: "节点编码",
+        description: "节点的唯一标识符",
+        default: "DEPLOY_NODE"
+      },
+      description: {
+        type: "string",
+        title: "节点描述",
+        description: "节点的详细说明",
+        default: "执行应用构建和部署任务"
+      },
+      // 节点配置
+      buildCommand: {
+        type: "string",
+        title: "构建命令",
+        description: "执行构建的命令",
+        default: "npm run build"
+      },
+      timeout: {
+        type: "number",
+        title: "超时时间(秒)",
+        description: "构建超时时间",
+        default: 300,
+        minimum: 30,
+        maximum: 3600
+      },
+      retryCount: {
+        type: "number", 
+        title: "重试次数",
+        description: "构建失败时的重试次数",
+        default: 2,
+        minimum: 0,
+        maximum: 5
+      },
+      environment: {
+        type: "string",
+        title: "运行环境",
+        description: "构建运行的环境",
+        enum: ["development", "staging", "production"],
+        default: "production"
+      },
+      dockerImage: {
+        type: "string",
+        title: "Docker镜像",
+        description: "构建使用的Docker镜像",
+        default: "node:18-alpine"
+      },
+      workingDirectory: {
+        type: "string",
+        title: "工作目录", 
+        description: "构建的工作目录",
+        default: "/app"
+      }
+    },
+    required: ["nodeName", "nodeCode", "buildCommand", "timeout"]
+  },
+
+  // 输入映射Schema - 定义从上游节点接收的数据
+  inputMappingSchema: {
+    type: "object",
+    title: "输入映射",
+    description: "从上游节点接收的数据映射配置",
+    properties: {
+      sourceCodePath: {
+        type: "string",
+        title: "源代码路径",
+        description: "源代码在存储中的路径",
+        default: "${upstream.outputPath}"
+      },
+      buildArgs: {
+        type: "array",
+        title: "构建参数",
+        description: "额外的构建参数列表",
+        items: {
+          type: "string"
+        },
+        default: []
+      },
+      envVariables: {
+        type: "object",
+        title: "环境变量",
+        description: "构建时的环境变量",
+        properties: {},
+        additionalProperties: true
+      },
+      dependencies: {
+        type: "string",
+        title: "依赖文件",
+        description: "依赖配置文件路径",
+        default: "${upstream.dependenciesFile}"
+      }
+    },
+    required: ["sourceCodePath"]
+  },
+
+  // 输出映射Schema - 定义传递给下游节点的数据
+  outputMappingSchema: {
+    type: "object",
+    title: "输出映射", 
+    description: "传递给下游节点的数据映射配置",
+    properties: {
+      buildArtifactPath: {
+        type: "string",
+        title: "构建产物路径",
+        description: "构建完成后的产物存储路径",
+        default: "/artifacts/${buildId}"
+      },
+      buildLog: {
+        type: "string",
+        title: "构建日志",
+        description: "构建过程的日志文件路径",
+        default: "/logs/build-${buildId}.log"
+      },
+      buildStatus: {
+        type: "string",
+        title: "构建状态",
+        description: "构建完成状态",
+        enum: ["SUCCESS", "FAILED", "TIMEOUT"],
+        default: "SUCCESS"
+      },
+      buildTime: {
+        type: "number",
+        title: "构建耗时",
+        description: "构建耗时(秒)",
+        default: 0
+      },
+      dockerImageTag: {
+        type: "string",
+        title: "Docker镜像标签",
+        description: "构建生成的Docker镜像标签",
+        default: "${imageRegistry}/${projectName}:${buildId}"
+      },
+      metadata: {
+        type: "object",
+        title: "构建元数据",
+        description: "构建过程中的元数据信息",
+        properties: {
+          buildId: { type: "string" },
+          buildTime: { type: "string" },
+          gitCommit: { type: "string" },
+          gitBranch: { type: "string" }
+        }
+      }
+    },
+    required: ["buildArtifactPath", "buildStatus"]
+  }
+};
diff --git a/frontend/src/pages/Workflow2/Design/nodes/definitions/EndEventNode.ts b/frontend/src/pages/Workflow2/Design/nodes/definitions/EndEventNode.ts
new file mode 100644
index 00000000..03e6aff0
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/definitions/EndEventNode.ts
@@ -0,0 +1,56 @@
+import {BaseNodeDefinition, NodeType, NodeCategory} from '../types';
+
+/**
+ * 结束事件节点定义
+ * 简单节点，无需额外配置
+ */
+export const EndEventNode: BaseNodeDefinition = {
+    nodeCode: "END_EVENT",
+    nodeName: "结束",
+    nodeType: NodeType.END_EVENT,
+    category: NodeCategory.EVENT,
+    description: "工作流的结束节点",
+
+    // UI 配置
+    uiConfig: {
+        size: { 
+            width: 80, 
+            height: 50 
+        },
+        style: {
+            fill: '#ff4d4f',
+            stroke: '#cf1322',
+            strokeWidth: 2,
+            icon: 'stop-circle',
+            iconColor: '#fff'
+        }
+    },
+
+    // 基本配置Schema - 用于生成"基本配置"TAB（包含基本信息）
+    configSchema: {
+        type: "object",
+        title: "基本配置",
+        description: "节点的基本配置信息",
+        properties: {
+            nodeName: {
+                type: "string",
+                title: "节点名称",
+                description: "节点在流程图中显示的名称",
+                default: "结束"
+            },
+            nodeCode: {
+                type: "string",
+                title: "节点编码",
+                description: "节点的唯一标识符",
+                default: "END_EVENT"
+            },
+            description: {
+                type: "string",
+                title: "节点描述",
+                description: "节点的详细说明",
+                default: "工作流的结束节点"
+            }
+        },
+        required: ["nodeName", "nodeCode"]
+    }
+};
diff --git a/frontend/src/pages/Workflow2/Design/nodes/definitions/ServiceTaskNode.ts b/frontend/src/pages/Workflow2/Design/nodes/definitions/ServiceTaskNode.ts
new file mode 100644
index 00000000..5f7ea096
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/definitions/ServiceTaskNode.ts
@@ -0,0 +1,180 @@
+import { ConfigurableNodeDefinition, NodeType, NodeCategory } from '../types';
+
+/**
+ * 服务任务节点定义
+ * 可配置节点，支持配置、输入映射、输出映射
+ */
+export const ServiceTaskNode: ConfigurableNodeDefinition = {
+  nodeCode: "SERVICE_TASK",
+  nodeName: "服务任务",
+  nodeType: NodeType.SERVICE_TASK,
+  category: NodeCategory.TASK,
+  description: "自动执行的服务任务",
+  
+  // UI 配置
+  uiConfig: {
+    size: {
+      width: 120,
+      height: 60
+    },
+    style: {
+      fill: '#fa8c16',
+      stroke: '#d46b08',
+      strokeWidth: 2,
+      icon: 'api',
+      iconColor: '#fff'
+    }
+  },
+
+  // 基本配置Schema
+  configSchema: {
+    type: "object",
+    title: "基本配置",
+    description: "服务任务的基本配置信息",
+    properties: {
+      // 基本信息
+      nodeName: {
+        type: "string",
+        title: "节点名称",
+        description: "节点在流程图中显示的名称",
+        default: "服务任务"
+      },
+      nodeCode: {
+        type: "string", 
+        title: "节点编码",
+        description: "节点的唯一标识符",
+        default: "SERVICE_TASK"
+      },
+      description: {
+        type: "string",
+        title: "节点描述",
+        description: "节点的详细说明",
+        default: "自动执行的服务任务"
+      },
+      // 节点配置
+      serviceUrl: {
+        type: "string",
+        title: "服务URL",
+        description: "调用的服务接口地址",
+        default: "https://api.example.com/service"
+      },
+      httpMethod: {
+        type: "string",
+        title: "HTTP方法",
+        description: "HTTP请求方法",
+        enum: ["GET", "POST", "PUT", "DELETE", "PATCH"],
+        default: "POST"
+      },
+      timeout: {
+        type: "number",
+        title: "超时时间(秒)",
+        description: "服务调用超时时间",
+        default: 30,
+        minimum: 1,
+        maximum: 300
+      },
+      retryCount: {
+        type: "number", 
+        title: "重试次数",
+        description: "失败时的重试次数",
+        default: 3,
+        minimum: 0,
+        maximum: 10
+      },
+      headers: {
+        type: "object",
+        title: "请求头",
+        description: "HTTP请求头配置",
+        default: {
+          "Content-Type": "application/json"
+        }
+      },
+      async: {
+        type: "boolean",
+        title: "异步执行",
+        description: "是否异步执行服务调用",
+        default: false
+      }
+    },
+    required: ["nodeName", "nodeCode", "serviceUrl", "httpMethod"]
+  },
+
+  // 输入映射Schema
+  inputMappingSchema: {
+    type: "object",
+    title: "输入映射",
+    description: "从上游节点接收的数据映射配置",
+    properties: {
+      requestBody: {
+        type: "object",
+        title: "请求体",
+        description: "发送给服务的请求数据",
+        default: {}
+      },
+      queryParams: {
+        type: "object",
+        title: "查询参数",
+        description: "URL查询参数",
+        default: {}
+      },
+      pathParams: {
+        type: "object",
+        title: "路径参数",
+        description: "URL路径参数",
+        default: {}
+      },
+      authToken: {
+        type: "string",
+        title: "认证令牌",
+        description: "服务调用的认证令牌",
+        default: "${upstream.token}"
+      }
+    }
+  },
+
+  // 输出映射Schema
+  outputMappingSchema: {
+    type: "object",
+    title: "输出映射", 
+    description: "传递给下游节点的数据映射配置",
+    properties: {
+      responseData: {
+        type: "object",
+        title: "响应数据",
+        description: "服务返回的响应数据",
+        default: {}
+      },
+      statusCode: {
+        type: "number",
+        title: "状态码",
+        description: "HTTP响应状态码",
+        default: 200
+      },
+      responseHeaders: {
+        type: "object",
+        title: "响应头",
+        description: "HTTP响应头信息",
+        default: {}
+      },
+      executionTime: {
+        type: "number",
+        title: "执行时间",
+        description: "服务调用耗时(毫秒)",
+        default: 0
+      },
+      success: {
+        type: "boolean",
+        title: "执行成功",
+        description: "服务调用是否成功",
+        default: true
+      },
+      errorMessage: {
+        type: "string",
+        title: "错误信息",
+        description: "失败时的错误信息",
+        default: ""
+      }
+    },
+    required: ["responseData", "statusCode", "success"]
+  }
+};
diff --git a/frontend/src/pages/Workflow2/Design/nodes/definitions/StartEventNode.ts b/frontend/src/pages/Workflow2/Design/nodes/definitions/StartEventNode.ts
new file mode 100644
index 00000000..8663d07e
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/definitions/StartEventNode.ts
@@ -0,0 +1,56 @@
+import {BaseNodeDefinition, NodeType, NodeCategory} from '../types';
+
+/**
+ * 开始事件节点定义
+ * 简单节点，无需额外配置
+ */
+export const StartEventNode: BaseNodeDefinition = {
+    nodeCode: "START_EVENT",
+    nodeName: "开始",
+    nodeType: NodeType.START_EVENT,
+    category: NodeCategory.EVENT,
+    description: "工作流的起始节点",
+
+    // UI 配置
+    uiConfig: {
+        size: { 
+            width: 80, 
+            height: 50 
+        },
+        style: {
+            fill: '#52c41a',
+            stroke: '#389e08',
+            strokeWidth: 2,
+            icon: 'play-circle',
+            iconColor: '#fff'
+        }
+    },
+
+    // 基本配置Schema - 用于生成"基本配置"TAB（包含基本信息）
+    configSchema: {
+        type: "object",
+        title: "基本配置",
+        description: "节点的基本配置信息",
+        properties: {
+            nodeName: {
+                type: "string",
+                title: "节点名称",
+                description: "节点在流程图中显示的名称",
+                default: "开始"
+            },
+            nodeCode: {
+                type: "string",
+                title: "节点编码",
+                description: "节点的唯一标识符",
+                default: "START_EVENT"
+            },
+            description: {
+                type: "string",
+                title: "节点描述",
+                description: "节点的详细说明",
+                default: "工作流的起始节点"
+            }
+        },
+        required: ["nodeName", "nodeCode"]
+    }
+};
diff --git a/frontend/src/pages/Workflow2/Design/nodes/definitions/UserTaskNode.ts b/frontend/src/pages/Workflow2/Design/nodes/definitions/UserTaskNode.ts
new file mode 100644
index 00000000..dbb529fb
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/definitions/UserTaskNode.ts
@@ -0,0 +1,155 @@
+import { ConfigurableNodeDefinition, NodeType, NodeCategory } from '../types';
+
+/**
+ * 用户任务节点定义
+ * 可配置节点，支持配置、输入映射、输出映射
+ */
+export const UserTaskNode: ConfigurableNodeDefinition = {
+  nodeCode: "USER_TASK",
+  nodeName: "用户任务",
+  nodeType: NodeType.USER_TASK,
+  category: NodeCategory.TASK,
+  description: "需要用户手动执行的任务",
+  
+  // UI 配置
+  uiConfig: {
+    size: {
+      width: 120,
+      height: 60
+    },
+    style: {
+      fill: '#722ed1',
+      stroke: '#531dab',
+      strokeWidth: 2,
+      icon: 'user',
+      iconColor: '#fff'
+    }
+  },
+
+  // 基本配置Schema
+  configSchema: {
+    type: "object",
+    title: "基本配置",
+    description: "用户任务的基本配置信息",
+    properties: {
+      // 基本信息
+      nodeName: {
+        type: "string",
+        title: "节点名称",
+        description: "节点在流程图中显示的名称",
+        default: "用户任务"
+      },
+      nodeCode: {
+        type: "string", 
+        title: "节点编码",
+        description: "节点的唯一标识符",
+        default: "USER_TASK"
+      },
+      description: {
+        type: "string",
+        title: "节点描述",
+        description: "节点的详细说明",
+        default: "需要用户手动执行的任务"
+      },
+      // 节点配置
+      assignee: {
+        type: "string",
+        title: "任务分配人",
+        description: "任务分配给的用户",
+        default: ""
+      },
+      candidateGroups: {
+        type: "array",
+        title: "候选组",
+        description: "可以执行此任务的用户组",
+        items: {
+          type: "string"
+        },
+        default: []
+      },
+      dueDate: {
+        type: "string",
+        title: "截止时间",
+        description: "任务的截止时间",
+        format: "date-time"
+      },
+      priority: {
+        type: "string",
+        title: "优先级",
+        description: "任务优先级",
+        enum: ["low", "normal", "high", "urgent"],
+        default: "normal"
+      },
+      formKey: {
+        type: "string",
+        title: "表单键",
+        description: "关联的表单标识",
+        default: ""
+      }
+    },
+    required: ["nodeName", "nodeCode"]
+  },
+
+  // 输入映射Schema
+  inputMappingSchema: {
+    type: "object",
+    title: "输入映射",
+    description: "从上游节点接收的数据映射配置",
+    properties: {
+      taskData: {
+        type: "object",
+        title: "任务数据",
+        description: "传递给用户任务的数据",
+        default: {}
+      },
+      assigneeExpression: {
+        type: "string",
+        title: "分配人表达式",
+        description: "动态计算分配人的表达式",
+        default: "${upstream.userId}"
+      },
+      formVariables: {
+        type: "object",
+        title: "表单变量",
+        description: "表单初始化变量",
+        default: {}
+      }
+    }
+  },
+
+  // 输出映射Schema
+  outputMappingSchema: {
+    type: "object",
+    title: "输出映射", 
+    description: "传递给下游节点的数据映射配置",
+    properties: {
+      taskResult: {
+        type: "object",
+        title: "任务结果",
+        description: "用户任务的执行结果",
+        default: {}
+      },
+      completedBy: {
+        type: "string",
+        title: "完成人",
+        description: "实际完成任务的用户",
+        default: "${task.assignee}"
+      },
+      completedAt: {
+        type: "string",
+        title: "完成时间",
+        description: "任务完成的时间",
+        format: "date-time",
+        default: "${task.endTime}"
+      },
+      decision: {
+        type: "string",
+        title: "决策结果",
+        description: "用户的决策结果",
+        enum: ["approved", "rejected", "pending"],
+        default: "approved"
+      }
+    },
+    required: ["taskResult", "completedBy"]
+  }
+};
diff --git a/frontend/src/pages/Workflow2/Design/nodes/definitions/index.ts b/frontend/src/pages/Workflow2/Design/nodes/definitions/index.ts
new file mode 100644
index 00000000..dee7f987
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/definitions/index.ts
@@ -0,0 +1,29 @@
+import {WorkflowNodeDefinition} from '../types';
+import {DeployNode} from './DeployNode';
+import {StartEventNode} from './StartEventNode';
+import {EndEventNode} from './EndEventNode';
+import {UserTaskNode} from './UserTaskNode';
+import {ServiceTaskNode} from './ServiceTaskNode';
+
+/**
+ * 所有节点定义的注册表
+ */
+export const NODE_DEFINITIONS: WorkflowNodeDefinition[] = [
+    StartEventNode,
+    EndEventNode,
+    UserTaskNode,
+    ServiceTaskNode,
+    DeployNode,
+    // 在这里添加更多节点定义
+];
+
+/**
+ * 导出节点定义
+ */
+export {
+    StartEventNode,
+    EndEventNode,
+    UserTaskNode,
+    ServiceTaskNode,
+    DeployNode
+};
diff --git a/frontend/src/pages/Workflow2/Design/nodes/types.ts b/frontend/src/pages/Workflow2/Design/nodes/types.ts
new file mode 100644
index 00000000..efe95791
--- /dev/null
+++ b/frontend/src/pages/Workflow2/Design/nodes/types.ts
@@ -0,0 +1,99 @@
+// 节点分类
+export enum NodeCategory {
+    EVENT = 'EVENT',
+    TASK = 'TASK',
+    GATEWAY = 'GATEWAY',
+    CONTAINER = 'CONTAINER'
+}
+
+// 节点类型
+export enum NodeType {
+    START_EVENT = 'START_EVENT',
+    END_EVENT = 'END_EVENT',
+    USER_TASK = 'USER_TASK',
+    SERVICE_TASK = 'SERVICE_TASK',
+    SCRIPT_TASK = 'SCRIPT_TASK',
+    DEPLOY_NODE = 'DEPLOY_NODE',
+    JENKINS_BUILD = 'JENKINS_BUILD',
+    GATEWAY_NODE = 'GATEWAY_NODE',
+    SUB_PROCESS = 'SUB_PROCESS',
+    CALL_ACTIVITY = 'CALL_ACTIVITY'
+}
+
+// JSON Schema 定义
+export interface JSONSchema {
+    type: string;
+    properties?: Record<string, any>;
+    required?: string[];
+    title?: string;
+    description?: string;
+}
+
+// UI 配置
+export interface NodeSize {
+    width: number;
+    height: number;
+}
+
+export interface NodeStyle {
+    fill: string;
+    icon: string;
+    stroke: string;
+    iconColor: string;
+    strokeWidth: number;
+    iconSize?: number;
+    borderRadius?: string;
+    boxShadow?: string;
+    transition?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontFamily?: string;
+}
+
+export interface UIConfig {
+    size: NodeSize;
+    style: NodeStyle;
+}
+
+// 基础节点定义（只有基本配置）
+export interface BaseNodeDefinition {
+    nodeCode: string;
+    nodeName: string;
+    nodeType: NodeType;
+    category: NodeCategory;
+    description: string;
+    uiConfig: UIConfig;
+    configSchema: JSONSchema;  // 基本配置Schema（包含基本信息+节点配置）
+}
+
+// 可配置节点定义（有3个TAB：基本配置、输入、输出）
+export interface ConfigurableNodeDefinition extends BaseNodeDefinition {
+    inputMappingSchema?: JSONSchema;   // 输入映射的Schema定义  
+    outputMappingSchema?: JSONSchema;  // 输出映射的Schema定义
+}
+
+// 工作流节点定义（联合类型）
+export type WorkflowNodeDefinition = BaseNodeDefinition | ConfigurableNodeDefinition;
+
+// 节点实例数据（运行时）
+export interface NodeInstanceData {
+    nodeCode: string;
+    nodeName: string;
+    nodeType: NodeType;
+    category: NodeCategory;
+    description?: string;
+
+    // 运行时数据（key/value格式）
+    configs?: Record<string, any>;        // 基本配置数据（包含基本信息+节点配置）
+    inputMapping?: Record<string, any>;
+    outputMapping?: Record<string, any>;
+
+    // UI位置信息
+    position: { x: number; y: number };
+    uiConfig: UIConfig;
+}
+
+// 判断是否为可配置节点
+export const isConfigurableNode = (def: WorkflowNodeDefinition): def is ConfigurableNodeDefinition => {
+    return 'inputMappingSchema' in def || 'outputMappingSchema' in def;
+};
diff --git a/frontend/src/pages/Workflow2/Design/types.ts b/frontend/src/pages/Workflow2/Design/types.ts
index 9888392a..84d61efc 100644
--- a/frontend/src/pages/Workflow2/Design/types.ts
+++ b/frontend/src/pages/Workflow2/Design/types.ts
@@ -40,17 +40,14 @@ export interface FlowNodeData extends Record<string, unknown> {
     category: NodeCategory;
     icon: string;
     color: string;
-    // 节点配置数据
-    configs?: {
-        timeout?: number;           // 超时时间(秒)
-        retryCount?: number;        // 重试次数
-        priority?: string;          // 优先级
-        [key: string]: any;         // 其他自定义配置
-    };
+    
+    // 运行时数据（与原系统兼容的格式）
+    configs?: Record<string, any>;          // 基本配置数据（包含基本信息+节点配置）
     inputMapping?: Record<string, any>;     // 输入参数映射
     outputMapping?: Record<string, any>;    // 输出参数映射
-    // 原始节点定义
-    nodeDefinition?: NodeDefinitionData;
+    
+    // 原始节点定义（使用新的节点定义接口）
+    nodeDefinition?: import('./nodes/types').WorkflowNodeDefinition;
 }
 
 // React Flow 边数据 - 添加索引签名以满足React Flow的类型约束