From fd6b225e52bd9d5667ec75aaea072e020b0d10d2 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Thu, 19 Dec 2024 16:09:57 +0800 Subject: [PATCH] 1 --- frontend/package-lock.json | 17 +- frontend/package.json | 2 +- .../src/pages/Workflow/NodeDesign/Design.tsx | 215 ++++++++++-------- .../src/pages/Workflow/NodeDesign/service.ts | 2 +- 4 files changed, 117 insertions(+), 119 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0313a335..6a4a91e4 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -31,6 +31,7 @@ "axios": "^1.6.2", "dagre": "^0.8.5", "form-render": "^2.5.1", + "less": "^4.2.1", "react": "^18.2.0", "react-diff-viewer-continued": "^3.4.0", "react-dom": "^18.2.0", @@ -49,7 +50,6 @@ "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "less": "^4.2.1", "typescript": "^5.3.3", "vite": "^5.0.8" } @@ -3245,7 +3245,6 @@ "version": "2.0.6", "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz", "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", - "dev": true, "license": "MIT", "dependencies": { "is-what": "^3.14.1" @@ -3614,7 +3613,6 @@ "version": "0.1.8", "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz", "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4364,7 +4362,6 @@ "version": "0.6.3", "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4387,7 +4384,6 @@ "version": "0.5.5", "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz", "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", - "dev": true, "license": "MIT", "optional": true, "bin": { @@ -4528,7 +4524,6 @@ "version": "3.14.1", "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", - "dev": true, "license": "MIT" }, "node_modules/isexe": { @@ -4656,7 +4651,6 @@ "version": "4.2.1", "resolved": "https://registry.npmmirror.com/less/-/less-4.2.1.tgz", "integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==", - "dev": true, "dependencies": { "copy-anything": "^2.0.1", "parse-node-version": "^1.0.1", @@ -4776,7 +4770,6 @@ "version": "2.1.0", "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4791,7 +4784,6 @@ "version": "5.7.2", "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", - "dev": true, "license": "ISC", "optional": true, "bin": { @@ -4841,7 +4833,6 @@ "version": "1.6.0", "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", - "dev": true, "license": "MIT", "optional": true, "bin": { @@ -4987,7 +4978,6 @@ "version": "3.3.1", "resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz", "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -5115,7 +5105,6 @@ "version": "1.0.1", "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz", "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.10" @@ -5197,7 +5186,6 @@ "version": "4.0.1", "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", - "dev": true, "license": "MIT", "optional": true, "engines": { @@ -5274,7 +5262,6 @@ "version": "1.0.1", "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz", "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", - "dev": true, "license": "MIT", "optional": true }, @@ -6355,7 +6342,6 @@ "version": "2.1.2", "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true, "license": "MIT", "optional": true }, @@ -6363,7 +6349,6 @@ "version": "1.4.1", "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz", "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==", - "dev": true, "license": "ISC", "optional": true }, diff --git a/frontend/package.json b/frontend/package.json index d60b9546..f7f1952a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,6 +33,7 @@ "axios": "^1.6.2", "dagre": "^0.8.5", "form-render": "^2.5.1", + "less": "^4.2.1", "react": "^18.2.0", "react-diff-viewer-continued": "^3.4.0", "react-dom": "^18.2.0", @@ -51,7 +52,6 @@ "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "less": "^4.2.1", "typescript": "^5.3.3", "vite": "^5.0.8" } diff --git a/frontend/src/pages/Workflow/NodeDesign/Design.tsx b/frontend/src/pages/Workflow/NodeDesign/Design.tsx index 1a92762f..3fb14a75 100644 --- a/frontend/src/pages/Workflow/NodeDesign/Design.tsx +++ b/frontend/src/pages/Workflow/NodeDesign/Design.tsx @@ -1,70 +1,54 @@ import React, { useEffect, useState } from 'react'; import { PageContainer } from '@ant-design/pro-components'; -import { Card, Tabs, Form, message, Row, Col, Menu } from 'antd'; -import { useParams, useNavigate } from 'react-router-dom'; -import FormRender, { useForm } from 'form-render'; +import { Row, Col, Menu, Tabs } from 'antd'; import type { NodeDefinitionData } from './types'; import * as service from './service'; -const { TabPane } = Tabs; +// Tab 配置 +const TAB_CONFIG = [ + { key: 'panel', label: '属性（预览）', schemaKey: 'panelVariablesSchema' }, + { key: 'local', label: '环境变量（预览）', schemaKey: 'localVariablesSchema' }, + { key: 'form', label: '表单（预览）', schemaKey: 'formVariablesSchema' }, + { key: 'ui', label: 'UI配置', schemaKey: 'uiVariables' } +]; const NodeDesignForm: React.FC = () => { - const navigate = useNavigate(); - const { nodeCode } = useParams<{ nodeCode: string }>(); - const [loading, setLoading] = useState(false); + // 缓存节点定义数据 const [nodeDefinitions, setNodeDefinitions] = useState([]); - const [selectedNode, setSelectedNode] = useState(); - - const form = useForm(); + const [loading, setLoading] = useState(false); + // 当前选中的节点 + const [selectedNode, setSelectedNode] = useState(null); + // 当前选中的 tab + const [activeTab, setActiveTab] = useState('panel'); // 加载节点定义数据 useEffect(() => { const loadNodeDefinitions = async () => { try { setLoading(true); - const data = await service.getNodeDefinitions(); + const data = await service.getNodeDefinitionsDefined(); setNodeDefinitions(data); - - // 如果是编辑模式，找到对应的节点定义 - if (nodeCode) { - const node = data.find(n => n.nodeCode === nodeCode); - if (node) { - setSelectedNode(node); - } else { - message.error('未找到对应的节点定义'); - navigate('/workflow/node-design'); - } - } else if (data.length > 0) { - // 如果是新增模式，默认选中第一个节点 + // 默认选中第一个节点 + if (data.length > 0) { setSelectedNode(data[0]); } } catch (error) { - message.error('加载节点定义失败'); + console.error('加载节点定义失败:', error); } finally { setLoading(false); } }; loadNodeDefinitions(); - }, [nodeCode, navigate]); + }, []); - // 处理表单提交 - const handleSubmit = async (values: any) => { - try { - setLoading(true); - if (nodeCode) { - await service.updateNodeUIConfig(nodeCode, values); - message.success('更新成功'); - } else { - // TODO: 实现创建节点的接口 - message.success('创建成功'); - } - navigate('/workflow/node-design'); - } catch (error) { - message.error('操作失败'); - } finally { - setLoading(false); - } + // 获取当前节点可用的 Tab 列表 + const getAvailableTabs = (node: NodeDefinitionData | null) => { + if (!node) return []; + return TAB_CONFIG.filter(tab => { + const value = node[tab.schemaKey as keyof NodeDefinitionData]; + return value !== null && value !== undefined; + }); }; // 处理节点选择 @@ -72,82 +56,111 @@ const NodeDesignForm: React.FC = () => { const node = nodeDefinitions.find(n => n.nodeCode === nodeCode); if (node) { setSelectedNode(node); - form.setValues({}); // 清空表单 + // 获取可用的 tab 列表 + const availableTabs = getAvailableTabs(node); + // 如果当前选中的 tab 不在可用列表中，则选择第一个可用的 tab + if (availableTabs.length > 0 && !availableTabs.find(tab => tab.key === activeTab)) { + setActiveTab(availableTabs[0].key); + } } }; + // 渲染 Tab 内容 + const renderTabContent = (tabKey: string) => { + if (!selectedNode) return null; + + const content = selectedNode[tabKey as keyof NodeDefinitionData]; + + return ( +
+ 
+                    {content ? JSON.stringify(content, null, 2) : '暂无数据'}
+
+
+ ); + }; + return ( - - - - - handleNodeSelect(key)} - items={nodeDefinitions.map(node => ({ - key: node.nodeCode, - label: node.nodeName, - }))} - style={{ border: 'none' }} - /> - +
+ + +
+ 节点类型 +
+ ({ + key: node.nodeCode, + label: node.nodeName, + }))} + onClick={({ key }) => handleNodeSelect(key)} + style={{ + border: 'none', + padding: '0 16px' + }} + /> - - {selectedNode && ( - - - {selectedNode.panelVariablesSchema && ( - - )} - - - {selectedNode.localVariablesSchema && ( - - )} - - - {selectedNode.formVariablesSchema && ( - - )} - - - - - - )} + +
+ {selectedNode && getAvailableTabs(selectedNode).length > 0 ? ( + ({ + key: tab.key, + label: tab.label, + children: renderTabContent(tab.schemaKey) + }))} + /> + ) : ( +
+ 暂无可配置项 +
+ )} +
- +
); }; diff --git a/frontend/src/pages/Workflow/NodeDesign/service.ts b/frontend/src/pages/Workflow/NodeDesign/service.ts index 6f94e01a..0bb1c7f6 100644 --- a/frontend/src/pages/Workflow/NodeDesign/service.ts +++ b/frontend/src/pages/Workflow/NodeDesign/service.ts @@ -18,5 +18,5 @@ export const updateNodeUIConfig = (nodeCode: string, uiVariables: any) => request.put(`${BASE_URL}/node-design/${nodeCode}/ui`, uiVariables); // 获取已定义的节点类型配置 -export const getNodeDefinitions = () => +export const getNodeDefinitionsDefined = () => request.get(`${BASE_URL}/node-definition/defined`);