1
This commit is contained in:
asp_ly
parent
0801071ac6
commit
9433287919
@ -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,21 +250,27 @@ const NodeDesignForm: React.FC = () => {
|
||||
};
|
||||
|
||||
// 处理节点选择
|
||||
const handleNodeSelect = (nodeCode: string) => {
|
||||
const node = nodeDefinitionsDefined.find(n => n.nodeCode === nodeCode);
|
||||
if (node) {
|
||||
const handleNodeSelect = (node: NodeDesignData) => {
|
||||
setSelectedNode(node);
|
||||
const availableTabs = getAvailableTabs(node);
|
||||
if (availableTabs.length > 0) {
|
||||
setActiveTab(availableTabs[0].key);
|
||||
}
|
||||
form.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理 Tab 切换
|
||||
const handleTabChange = (key: string) => {
|
||||
setActiveTab(key);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
// 处理保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
console.log('Form values:', values);
|
||||
message.success('保存成功');
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error);
|
||||
message.error('表单验证失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当前 schema
|
||||
@ -361,22 +281,11 @@ const NodeDesignForm: React.FC = () => {
|
||||
return selectedNode[currentTab.schemaKey as keyof NodeDesignData];
|
||||
};
|
||||
|
||||
// 处理表单提交
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
console.log('表单数据:', values);
|
||||
message.success('保存成功');
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error);
|
||||
message.error('表单验证失败');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
loading={loading}
|
||||
extra={[
|
||||
header={{
|
||||
title: '节点设计',
|
||||
extra: [
|
||||
<Button
|
||||
key="save"
|
||||
type="primary"
|
||||
@ -384,9 +293,10 @@ const NodeDesignForm: React.FC = () => {
|
||||
>
|
||||
保存
|
||||
</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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user