1

frontend/src/pages/Workflow/NodeDesign/Design.tsx

@@ -2,8 +2,9 @@ import React, { useEffect, useState, useRef } from 'react';
 import { PageContainer } from '@ant-design/pro-components';
 import { Row, Col, Menu, Tabs, Card, Button, message } from 'antd';
 import { BetaSchemaForm, ProForm, ProFormGroup, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
-import type { NodeDefinitionData } from './types';
+import type { NodeDesignData } from './types';
 import * as service from './service';
+import { useParams, useLocation } from 'react-router-dom';
 
 // Tab 配置
 const TAB_CONFIG = [
@@ -15,49 +16,50 @@ const TAB_CONFIG = [
 
 const NodeDesignForm: React.FC = () => {
     // 缓存节点定义数据
-    const [nodeDefinitions, setNodeDefinitions] = useState<NodeDefinitionData[]>([]);
+    const [nodeDesignData, setNodeDesignData] = useState<NodeDesignData[]>([]);
     const [loading, setLoading] = useState(false);
     // 当前选中的节点
-    const [selectedNode, setSelectedNode] = useState<NodeDefinitionData | null>(null);
+    const [selectedNode, setSelectedNode] = useState<NodeDesignData | null>(null);
     // 当前选中的 tab
     const [activeTab, setActiveTab] = useState<string>('panel');
 
     const formRef = useRef<any>();
     const uiFormRef = useRef<any>();  // 添加 UI 配置表单的 ref
 
+    const { nodeCode } = useParams();
+    const location = useLocation();
+    const nodeData = location.state?.nodeData;
+
     // 加载节点定义数据
     useEffect(() => {
-        const loadNodeDefinitions = async () => {
+        const loadData = async () => {
-            try {
+            if (nodeCode && !nodeData) {
-                setLoading(true);
+                try {
-                const data = await service.getNodeDefinitionsDefined();
+                    const data = await service.getNodeDesign(nodeCode);
-                setNodeDefinitions(data);
+                    setSelectedNode(data);
-                // 默认选中第一个节点
+                } catch (error) {
-                if (data.length > 0) {
+                    console.error('Failed to load node design:', error);
-                    setSelectedNode(data[0]);
+                    message.error('加载节点设计失败');
                 }
-            } catch (error) {
+            } else if (nodeData) {
-                console.error('加载节点定义失败:', error);
+                setSelectedNode(nodeData);
-            } finally {
-                setLoading(false);
             }
         };
-
+        loadData();
-        loadNodeDefinitions();
+    }, [nodeCode, nodeData]);
-    }, []);
 
     // 获取当前节点可用的 Tab 列表
-    const getAvailableTabs = (node: NodeDefinitionData | null) => {
+    const getAvailableTabs = (node: NodeDesignData | null) => {
         if (!node) return [];
         return TAB_CONFIG.filter(tab => {
-            const value = node[tab.schemaKey as keyof NodeDefinitionData];
+            const value = node[tab.schemaKey as keyof NodeDesignData];
             return value !== null && value !== undefined;
         });
     };
 
     // 处理节点选择
     const handleNodeSelect = (nodeCode: string) => {
-        const node = nodeDefinitions.find(n => n.nodeCode === nodeCode);
+        const node = nodeDesignData.find(n => n.nodeCode === nodeCode);
         if (node) {
             setSelectedNode(node);
             // 获取可用的 tab 列表
@@ -203,7 +205,7 @@ const NodeDesignForm: React.FC = () => {
     // 渲染 Tab 内容
     const renderTabContent = (schemaKey: string) => {
         if (!selectedNode) return null;
-        const schema = selectedNode[schemaKey as keyof NodeDefinitionData];
+        const schema = selectedNode[schemaKey as keyof NodeDesignData];
         if (!schema) return null;
 
         return (
@@ -347,7 +349,7 @@ const NodeDesignForm: React.FC = () => {
                     <Menu
                         mode="vertical"
                         selectedKeys={[selectedNode?.nodeCode || '']}
-                        items={nodeDefinitions.map(node => ({
+                        items={nodeDesignData.map(node => ({
                             key: node.nodeCode,
                             label: `${node.nodeName}（${node.nodeCode}）`,
                         }))}

frontend/src/pages/Workflow/NodeDesign/index.tsx

@@ -79,7 +79,9 @@ const NodeDesignList: React.FC = () => {
                     </Button>
                     <Button
                         type="link"
-                        onClick={() => navigate(`/workflow/node-design/edit/${record.nodeCode}`)}
+                        onClick={() => navigate(`/workflow/node-design/edit/${record.nodeCode}`, {
+                            state: { nodeData: record }
+                        })}
                     >
                         编辑
                     </Button>

frontend/src/pages/Workflow/NodeDesign/service.ts

@@ -1,7 +1,7 @@
 // 节点设计相关服务
 
 import request from '@/utils/request';
-import type { NodeDesignQuery, NodeDesignResponse, NodeDesignData, NodeDefinitionData } from './types';
+import type { NodeDesignQuery, NodeDesignResponse, NodeDesignData } from './types';
 
 const BASE_URL = '/api/v1/workflow/node-definition';
 
@@ -17,10 +17,9 @@ export const getNodeDesign = (nodeCode: string) =>
 export const updateNodeUIConfig = (nodeCode: string, uiVariables: any) =>
     request.put(`${BASE_URL}/${nodeCode}/ui`, uiVariables);
 
-// 获取已定义的节点类型配置
-export const getNodeDefinitionsDefined = () =>
-    request.get<NodeDefinitionData[]>(`${BASE_URL}/defined`);
-
 // 保存节点定义
-export const saveNodeDefinition = (data: NodeDefinitionData) =>
+export const saveNodeDefinition = (data: NodeDesignData) =>
-    request.post<void>(`${BASE_URL}`, data);
+    request.post(`${BASE_URL}`, data);
+
+export const getNodeDefinitionsDefined = () =>
+    request.get<NodeDesignData[]>(`${BASE_URL}/defined`);

frontend/src/pages/Workflow/NodeDesign/types.ts

@@ -1,7 +1,7 @@
 // 节点设计相关类型定义
 
 // 基础Schema接口
-import {BaseQuery, BaseResponse} from "@/types/base";
+import {BaseQuery, Page} from "@/types/base";
 
 export interface BaseSchema {
     type: string;
@@ -95,6 +95,6 @@ export interface NodeDesignQuery extends BaseQuery{
 }
 
 // 分页响应接口
-export interface NodeDesignResponse extends BaseResponse{
+export interface NodeDesignResponse extends Page<NodeDesignData>{
 
 }