ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-20 14:21:20 +08:00
parent e76af9b8f5
commit a6f0fb89a0
1 changed files with 34 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
View File

@ -1,5 +1,5 @@
import React, {useEffect, ReactNode} from 'react';
import {Drawer, Form, Input, Select, Button, Space, Divider, Tooltip} from 'antd';
import {Drawer, Form, Input, Select, Button, Space, Tabs, Tooltip} from 'antd';
import {InfoCircleOutlined} from '@ant-design/icons';
import {Cell} from '@antv/x6';
import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
@ -22,12 +22,12 @@ interface SchemaProperty {
}
const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
visible,
node,
nodeDefinition,
onOk,
onCancel,
}) => {
visible,
node,
nodeDefinition,
onOk,
onCancel,
}) => {
const [form] = Form.useForm();
useEffect(() => {
@ -54,7 +54,7 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
onCancel();
};
const renderFormItem = (key: string, property: SchemaProperty, required: boolean) => {
const renderFormItem = (key: string, property: SchemaProperty, required: boolean, isReadOnly: boolean) => {
const baseProps = {
name: key,
label: (
@ -70,6 +70,14 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
rules: [{required, message: `请输入${property.title}`}],
};
if (isReadOnly) {
return (
<Form.Item key={key} {...baseProps}>
<Input disabled value={property.default}/>
</Form.Item>
);
}
switch (property.type) {
case 'string':
if (property.enum) {
@ -140,41 +148,6 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
return formItems;
};
// 显示节点详细信息
const renderNodeDetails = () => {
if (!nodeDefinition?.graphConfig.details) return null;
const {details} = nodeDefinition.graphConfig;
return (
<>
<Divider orientation="left">节点说明</Divider>
{/*<div style={{ marginBottom: 16 }}>*/}
{/* <p>{details.description}</p>*/}
{/* {details.features && details.features.length > 0 && (*/}
{/* <div>*/}
{/* <strong>功能特点：</strong>*/}
{/* <ul>*/}
{/* {details.features.map((feature, index) => (*/}
{/* <li key={index}>{feature}</li>*/}
{/* ))}*/}
{/* </ul>*/}
{/* </div>*/}
{/* )}*/}
{/* {details.scenarios && details.scenarios.length > 0 && (*/}
{/* <div>*/}
{/* <strong>适用场景：</strong>*/}
{/* <ul>*/}
{/* {details.scenarios.map((scenario, index) => (*/}
{/* <li key={index}>{scenario}</li>*/}
{/* ))}*/}
{/* </ul>*/}
{/* </div>*/}
{/* )}*/}
{/*</div>*/}
</>
);
};
return (
<Drawer
title={`编辑节点 - ${nodeDefinition?.nodeName || ''}`}
@ -191,25 +164,24 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
</Space>
}
>
{/*{renderNodeDetails()}*/}
<Divider orientation="left">节点配置</Divider>
<Form
form={form}
layout="vertical"
initialValues={{}}
>
<Form.Item name="code" hidden>
<Input/>
</Form.Item>
<Form.Item name="delegate" hidden>
<Input/>
</Form.Item>
{nodeDefinition?.panelVariablesSchema &&
Object.entries(nodeDefinition.panelVariablesSchema.properties).map(([key, property]) => {
const required = nodeDefinition.panelVariablesSchema?.properties.required?.includes(key) || false;
return renderFormItem(key, property as SchemaProperty, required);
})}
</Form>
<Tabs>
{nodeDefinition?.panelVariablesSchema && (
<Tabs.TabPane tab="面板变量" key="panel">
{Object.entries(nodeDefinition.panelVariablesSchema.properties).map(([key, property]) => {
const required = nodeDefinition.panelVariablesSchema?.properties.required?.includes(key) || false;
return renderFormItem(key, property as SchemaProperty, required, false);
})}
</Tabs.TabPane>
)}
{nodeDefinition?.localVariablesSchema && (
<Tabs.TabPane tab="环境变量" key="local">
{Object.entries(nodeDefinition.localVariablesSchema.properties).map(([key, property]) => {
const required = nodeDefinition.localVariablesSchema?.properties.required?.includes(key) || false;
return renderFormItem(key, property as SchemaProperty, required, true);
})}
</Tabs.TabPane>
)}
</Tabs>
</Drawer>
);
};