From 9433287919e7f54300f64defb3aacedd0feddb5a Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Thu, 19 Dec 2024 21:50:10 +0800
Subject: [PATCH] 1

---
 .../src/pages/Workflow/NodeDesign/Design.tsx  | 187 +++++-------------
 1 file changed, 49 insertions(+), 138 deletions(-)

diff --git a/frontend/src/pages/Workflow/NodeDesign/Design.tsx b/frontend/src/pages/Workflow/NodeDesign/Design.tsx
index 6039b830..b1d4e529 100644
--- a/frontend/src/pages/Workflow/NodeDesign/Design.tsx
+++ b/frontend/src/pages/Workflow/NodeDesign/Design.tsx
@@ -51,6 +51,9 @@ const FormRenderer: React.FC<{
 }> = ({ schema, path = '', readOnly = false }) => {
     if (!schema || !schema.properties) return null;
 
+    console.log('Current path:', path);
+    console.log('Properties:', Object.keys(schema.properties));
+
     const renderPortConfig = (portSchema: any, portPath: string) => {
         if (!portSchema || !portSchema.properties) return null;
 
@@ -67,6 +70,7 @@ const FormRenderer: React.FC<{
                     }
                     tooltip={position.description}
                     required={portSchema.required?.includes('position')}
+                    initialValue={'default' in position ? position.default : undefined}
                     style={{ marginBottom: 16 }}
                 >
                     {readOnly ? (
@@ -102,102 +106,11 @@ const FormRenderer: React.FC<{
         );
     };
 
-    // 检查是否是顶层配置
-    const isTopLevel = !path;
-    const hasNodeConfigs = isTopLevel && 
-        schema.properties.size && 
-        schema.properties.shape && 
-        schema.properties.style;
-
     return (
         <div style={{ padding: '8px 0' }}>
-            {hasNodeConfigs ? (
-                <Row gutter={16}>
-                    <Col span={8}>
-                        <Card
-                            title={schema.properties.size.title}
-                            size="small"
-                            style={{ 
-                                marginBottom: 16,
-                                boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
-                                borderRadius: '8px',
-                                border: '1px solid #f0f0f0'
-                            }}
-                            styles={{
-                                body: { padding: '16px' }
-                            }}
-                        >
-                            <FormRenderer
-                                schema={schema.properties.size}
-                                path="size"
-                                readOnly={readOnly}
-                            />
-                        </Card>
-                    </Col>
-                    <Col span={8}>
-                        <Card
-                            title={schema.properties.shape.title}
-                            size="small"
-                            style={{ 
-                                marginBottom: 16,
-                                boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
-                                borderRadius: '8px',
-                                border: '1px solid #f0f0f0'
-                            }}
-                            styles={{
-                                body: { padding: '16px' }
-                            }}
-                        >
-                            <Form.Item
-                                name="shape"
-                                label={
-                                    <span style={{ fontSize: '14px' }}>
-                                        {schema.properties.shape.title}
-                                    </span>
-                                }
-                                tooltip={schema.properties.shape.description}
-                                required={schema.required?.includes('shape')}
-                                style={{ marginBottom: 16 }}
-                            >
-                                {readOnly ? (
-                                    <span style={{ color: '#666' }}>{schema.properties.shape.default || '-'}</span>
-                                ) : (
-                                    renderField(schema.properties.shape)
-                                )}
-                            </Form.Item>
-                        </Card>
-                    </Col>
-                    <Col span={8}>
-                        <Card
-                            title={schema.properties.style.title}
-                            size="small"
-                            style={{ 
-                                marginBottom: 16,
-                                boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
-                                borderRadius: '8px',
-                                border: '1px solid #f0f0f0'
-                            }}
-                            styles={{
-                                body: { padding: '16px' }
-                            }}
-                        >
-                            <FormRenderer
-                                schema={schema.properties.style}
-                                path="style"
-                                readOnly={readOnly}
-                            />
-                        </Card>
-                    </Col>
-                </Row>
-            ) : null}
-            
             {Object.entries(schema.properties).map(([key, value]: [string, any]) => {
-                // 如果是已经在上面渲染的配置，则跳过
-                if (hasNodeConfigs && (key === 'size' || key === 'shape' || key === 'style')) {
-                    return null;
-                }
-
                 const fieldPath = path ? `${path}.${key}` : key;
+                console.log('Field path:', fieldPath, 'Type:', value.type);
 
                 if (value.type === 'object') {
                     // 特殊处理端口组配置
@@ -284,6 +197,7 @@ const FormRenderer: React.FC<{
                         }
                         tooltip={value.description}
                         required={schema.required?.includes(key)}
+                        initialValue={'default' in value ? value.default : undefined}
                         style={{ marginBottom: 16 }}
                     >
                         {readOnly ? (
@@ -336,36 +250,22 @@ const NodeDesignForm: React.FC = () => {
     };
 
     // 处理节点选择
-    const handleNodeSelect = (nodeCode: string) => {
-        const node = nodeDefinitionsDefined.find(n => n.nodeCode === nodeCode);
-        if (node) {
-            setSelectedNode(node);
-            const availableTabs = getAvailableTabs(node);
-            if (availableTabs.length > 0) {
-                setActiveTab(availableTabs[0].key);
-            }
-            form.resetFields();
-        }
+    const handleNodeSelect = (node: NodeDesignData) => {
+        setSelectedNode(node);
+        form.resetFields();
     };
 
-    // 处理Tab切换
+    // 处理 Tab 切换
     const handleTabChange = (key: string) => {
         setActiveTab(key);
+        form.resetFields();
     };
 
-    // 获取当前schema
-    const getCurrentSchema = () => {
-        if (!selectedNode) return null;
-        const currentTab = TAB_CONFIG.find(tab => tab.key === activeTab);
-        if (!currentTab) return null;
-        return selectedNode[currentTab.schemaKey as keyof NodeDesignData];
-    };
-
-    // 处理表单提交
+    // 处理保存
     const handleSave = async () => {
         try {
             const values = await form.validateFields();
-            console.log('表单数据:', values);
+            console.log('Form values:', values);
             message.success('保存成功');
         } catch (error) {
             console.error('表单验证失败:', error);
@@ -373,20 +273,30 @@ const NodeDesignForm: React.FC = () => {
         }
     };
 
+    // 获取当前 schema
+    const getCurrentSchema = () => {
+        if (!selectedNode) return null;
+        const currentTab = TAB_CONFIG.find(tab => tab.key === activeTab);
+        if (!currentTab) return null;
+        return selectedNode[currentTab.schemaKey as keyof NodeDesignData];
+    };
+
     return (
         <PageContainer
-            loading={loading}
-            extra={[
-                <Button
-                    key="save"
-                    type="primary"
-                    onClick={handleSave}
-                >
-                    保存
-                </Button>
-            ]}
+            header={{
+                title: '节点设计',
+                extra: [
+                    <Button
+                        key="save"
+                        type="primary"
+                        onClick={handleSave}
+                    >
+                        保存
+                    </Button>
+                ],
+            }}
         >
-            <div style={{ display: 'flex', gap: '24px' }}>
+            <div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
                 <Card 
                     style={{ 
                         width: 280,
@@ -408,31 +318,31 @@ const NodeDesignForm: React.FC = () => {
                         节点类型
                     </div>
                     <Menu
-                        mode="vertical"
                         selectedKeys={[selectedNode?.nodeCode || '']}
                         items={nodeDefinitionsDefined.map(node => ({
                             key: node.nodeCode,
                             label: (
-                                <div style={{ 
-                                    padding: '4px 0',
-                                    fontSize: '14px'
-                                }}>
-                                    <div>{node.nodeName}</div>
+                                <div style={{ padding: '4px 0' }}>
+                                    <div style={{ fontSize: '14px', fontWeight: 500 }}>
+                                        {node.nodeName}
+                                    </div>
                                     <div style={{ 
                                         fontSize: '12px',
-                                        color: '#999',
+                                        color: '#666',
                                         marginTop: '4px'
                                     }}>
                                         {node.nodeCode}
                                     </div>
                                 </div>
-                            ),
+                            )
                         }))}
-                        onClick={({ key }) => handleNodeSelect(key)}
-                        style={{
-                            border: 'none',
-                            padding: '8px 0'
+                        onClick={({ key }) => {
+                            const node = nodeDefinitionsDefined.find(n => n.nodeCode === key);
+                            if (node) {
+                                handleNodeSelect(node);
+                            }
                         }}
+                        style={{ border: 'none', padding: '8px 0' }}
                     />
                 </Card>
                 <Card 
@@ -448,6 +358,7 @@ const NodeDesignForm: React.FC = () => {
                     <Form
                         form={form}
                         layout="vertical"
+                        key={`${selectedNode?.nodeCode}-${activeTab}`}
                     >
                         <Tabs
                             activeKey={activeTab}
@@ -459,7 +370,7 @@ const NodeDesignForm: React.FC = () => {
                                         {tab.label}
                                     </span>
                                 ),
-                                children: (
+                                children: tab.key === activeTab ? (
                                     <div style={{ 
                                         padding: '16px 0',
                                         minHeight: '400px'
@@ -469,7 +380,7 @@ const NodeDesignForm: React.FC = () => {
                                             readOnly={tab.readonly}
                                         />
                                     </div>
-                                )
+                                ) : null
                             }))}
                             style={{
                                 marginTop: '-16px',