增加了动态生成跟节点验证。
This commit is contained in:
parent
80de1149d3
commit
a45d25634f
@ -7,7 +7,8 @@ export const NODE_CONFIG: Record<string, NodeConfig> = {
|
||||
theme: {
|
||||
fill: '#f6ffed',
|
||||
stroke: '#52c41a'
|
||||
}
|
||||
},
|
||||
label: '开始'
|
||||
},
|
||||
END: {
|
||||
size: { width: 80, height: 80 },
|
||||
@ -15,7 +16,8 @@ export const NODE_CONFIG: Record<string, NodeConfig> = {
|
||||
theme: {
|
||||
fill: '#fff1f0',
|
||||
stroke: '#ff4d4f'
|
||||
}
|
||||
},
|
||||
label: '结束'
|
||||
},
|
||||
SHELL: {
|
||||
size: { width: 200, height: 80 },
|
||||
@ -24,6 +26,7 @@ export const NODE_CONFIG: Record<string, NodeConfig> = {
|
||||
fill: '#e6f7ff',
|
||||
stroke: '#1890ff'
|
||||
},
|
||||
label: '脚本',
|
||||
extras: {
|
||||
rx: 4,
|
||||
ry: 4,
|
||||
@ -43,6 +46,7 @@ export const NODE_CONFIG: Record<string, NodeConfig> = {
|
||||
fill: '#fff7e6',
|
||||
stroke: '#fa8c16'
|
||||
},
|
||||
label: '定时器',
|
||||
extras: {
|
||||
rx: 4,
|
||||
ry: 4,
|
||||
@ -62,6 +66,7 @@ export const NODE_CONFIG: Record<string, NodeConfig> = {
|
||||
fill: '#f9f0ff',
|
||||
stroke: '#722ed1'
|
||||
},
|
||||
label: '网关',
|
||||
extras: {
|
||||
refPoints: '0,10 10,0 20,10 10,20'
|
||||
}
|
||||
|
||||
@ -532,10 +532,15 @@ const FlowDesigner: React.FC = () => {
|
||||
}
|
||||
);
|
||||
|
||||
// 创建节点配置
|
||||
// 获取节点配置
|
||||
const position = calculateNodePosition(nodeType.code, dropPosition);
|
||||
const nodeStyle = generateNodeStyle(nodeType.code);
|
||||
const ports = generatePorts(nodeType.code);
|
||||
const config = NODE_CONFIG[nodeType.code];
|
||||
|
||||
if (!config) {
|
||||
throw new Error(`未找到节点类型 ${nodeType.code} 的配置`);
|
||||
}
|
||||
|
||||
// 创建节点
|
||||
const node = graphRef.current.addNode({
|
||||
@ -544,7 +549,7 @@ const FlowDesigner: React.FC = () => {
|
||||
ports,
|
||||
data: {
|
||||
type: nodeType.code,
|
||||
name: nodeType.name,
|
||||
name: config.label, // 使用配置中的中文名称
|
||||
config: {} as any,
|
||||
},
|
||||
});
|
||||
@ -554,7 +559,7 @@ const FlowDesigner: React.FC = () => {
|
||||
graphRef.current.select(node);
|
||||
setCurrentNode(node);
|
||||
setCurrentNodeType(nodeType);
|
||||
form.setFieldsValue({ name: nodeType.name });
|
||||
form.setFieldsValue({ name: config.label }); // 使用配置中的中文名称
|
||||
setConfigVisible(true);
|
||||
|
||||
message.success('节点创建成功');
|
||||
|
||||
@ -13,9 +13,11 @@ export interface NodeConfig {
|
||||
fill: string;
|
||||
stroke: string;
|
||||
};
|
||||
label: string;
|
||||
extras?: {
|
||||
rx?: number;
|
||||
ry?: number;
|
||||
refPoints?: string;
|
||||
icon?: {
|
||||
'xlink:href': string;
|
||||
width: number;
|
||||
@ -23,6 +25,5 @@ export interface NodeConfig {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
refPoints?: string;
|
||||
};
|
||||
}
|
||||
|
||||
@ -81,18 +81,18 @@ export const generateNodeStyle = (nodeType: string): NodeStyle => {
|
||||
...(config.extras || {})
|
||||
},
|
||||
label: {
|
||||
text: nodeType,
|
||||
text: config.label,
|
||||
fill: '#000000',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
...(nodeType === 'SHELL' ? {
|
||||
...(config.shape === 'rect' ? {
|
||||
refX: 0.5,
|
||||
refY: 0.5,
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle'
|
||||
} : {})
|
||||
},
|
||||
...(nodeType === 'SHELL' && config.extras?.icon ? {
|
||||
...(config.extras?.icon ? {
|
||||
image: config.extras.icon
|
||||
} : {})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user