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:
asp_ly 2024-12-19 21:50:10 +08:00
parent 0801071ac6
commit 9433287919
1 changed files with 49 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
frontend/src/pages/Workflow/NodeDesign/Design.tsx
View File

@ -51,6 +51,9 @@ const FormRenderer: React.FC<{
}> = ({ schema, path = '', readOnly = false }) => { }> = ({ schema, path = '', readOnly = false }) => {
if (!schema || !schema.properties) return null; if (!schema || !schema.properties) return null;
console.log('Current path:', path);
console.log('Properties:', Object.keys(schema.properties));
const renderPortConfig = (portSchema: any, portPath: string) => { const renderPortConfig = (portSchema: any, portPath: string) => {
if (!portSchema || !portSchema.properties) return null; if (!portSchema || !portSchema.properties) return null;
@ -67,6 +70,7 @@ const FormRenderer: React.FC<{
} }
tooltip={position.description} tooltip={position.description}
required={portSchema.required?.includes('position')} required={portSchema.required?.includes('position')}
initialValue={'default' in position ? position.default : undefined}
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
> >
{readOnly ? ( {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 ( return (
<div style={{ padding: '8px 0' }}> <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]) => { {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; const fieldPath = path ? `${path}.${key}` : key;
console.log('Field path:', fieldPath, 'Type:', value.type);
if (value.type === 'object') { if (value.type === 'object') {
// 特殊处理端口组配置 // 特殊处理端口组配置
@ -284,6 +197,7 @@ const FormRenderer: React.FC<{
} }
tooltip={value.description} tooltip={value.description}
required={schema.required?.includes(key)} required={schema.required?.includes(key)}
initialValue={'default' in value ? value.default : undefined}
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
> >
{readOnly ? ( {readOnly ? (
@ -336,36 +250,22 @@ const NodeDesignForm: React.FC = () => {
}; };
// 处理节点选择 // 处理节点选择
const handleNodeSelect = (nodeCode: string) => { const handleNodeSelect = (node: NodeDesignData) => {
const node = nodeDefinitionsDefined.find(n => n.nodeCode === nodeCode);
if (node) {
setSelectedNode(node); setSelectedNode(node);
const availableTabs = getAvailableTabs(node);
if (availableTabs.length > 0) {
setActiveTab(availableTabs[0].key);
}
form.resetFields(); form.resetFields();
}
}; };
// 处理Tab切换 // 处理 Tab 切换
const handleTabChange = (key: string) => { const handleTabChange = (key: string) => {
setActiveTab(key); 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 () => { const handleSave = async () => {
try { try {
const values = await form.validateFields(); const values = await form.validateFields();
console.log('表单数据:', values); console.log('Form values:', values);
message.success('保存成功'); message.success('保存成功');
} catch (error) { } catch (error) {
console.error('表单验证失败:', error); console.error('表单验证失败:', error);
@ -373,10 +273,19 @@ 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 ( return (
<PageContainer <PageContainer
loading={loading} header={{
extra={[ title: '节点设计',
extra: [
<Button <Button
key="save" key="save"
type="primary" type="primary"
@ -384,9 +293,10 @@ const NodeDesignForm: React.FC = () => {
> >
保存 保存
</Button> </Button>
]} ],
}}
> >
<div style={{ display: 'flex', gap: '24px' }}> <div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
<Card <Card
style={{ style={{
width: 280, width: 280,
@ -408,31 +318,31 @@ const NodeDesignForm: React.FC = () => {
节点类型 节点类型
</div> </div>
<Menu <Menu
mode="vertical"
selectedKeys={[selectedNode?.nodeCode || '']} selectedKeys={[selectedNode?.nodeCode || '']}
items={nodeDefinitionsDefined.map(node => ({ items={nodeDefinitionsDefined.map(node => ({
key: node.nodeCode, key: node.nodeCode,
label: ( label: (
<div style={{ <div style={{ padding: '4px 0' }}>
padding: '4px 0', <div style={{ fontSize: '14px', fontWeight: 500 }}>
fontSize: '14px' {node.nodeName}
}}> </div>
<div>{node.nodeName}</div>
<div style={{ <div style={{
fontSize: '12px', fontSize: '12px',
color: '#999', color: '#666',
marginTop: '4px' marginTop: '4px'
}}> }}>
{node.nodeCode} {node.nodeCode}
</div> </div>
</div> </div>
), )
}))} }))}
onClick={({ key }) => handleNodeSelect(key)} onClick={({ key }) => {
style={{ const node = nodeDefinitionsDefined.find(n => n.nodeCode === key);
border: 'none', if (node) {
padding: '8px 0' handleNodeSelect(node);
}
}} }}
style={{ border: 'none', padding: '8px 0' }}
/> />
</Card> </Card>
<Card <Card
@ -448,6 +358,7 @@ const NodeDesignForm: React.FC = () => {
<Form <Form
form={form} form={form}
layout="vertical" layout="vertical"
key={`${selectedNode?.nodeCode}-${activeTab}`}
> >
<Tabs <Tabs
activeKey={activeTab} activeKey={activeTab}
@ -459,7 +370,7 @@ const NodeDesignForm: React.FC = () => {
{tab.label} {tab.label}
</span> </span>
), ),
children: ( children: tab.key === activeTab ? (
<div style={{ <div style={{
padding: '16px 0', padding: '16px 0',
minHeight: '400px' minHeight: '400px'
@ -469,7 +380,7 @@ const NodeDesignForm: React.FC = () => {
readOnly={tab.readonly} readOnly={tab.readonly}
/> />
</div> </div>
) ) : null
}))} }))}
style={{ style={{
marginTop: '-16px', marginTop: '-16px',