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:04:55 +08:00
parent 091ea4fe7b
commit e76af9b8f5
3 changed files with 122 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
frontend/src/pages/Workflow/Definition/Design/index.tsx
View File

@ -23,11 +23,11 @@ import '@antv/x6-plugin-keyboard';
import '@antv/x6-plugin-history'; import '@antv/x6-plugin-history';
import '@antv/x6-plugin-clipboard'; import '@antv/x6-plugin-clipboard';
import '@antv/x6-plugin-transform'; import '@antv/x6-plugin-transform';
import { Selection } from '@antv/x6-plugin-selection'; import {Selection} from '@antv/x6-plugin-selection';
import { MiniMap } from '@antv/x6-plugin-minimap'; import {MiniMap} from '@antv/x6-plugin-minimap';
import { Clipboard } from '@antv/x6-plugin-clipboard'; import {Clipboard} from '@antv/x6-plugin-clipboard';
import { History } from '@antv/x6-plugin-history'; import {History} from '@antv/x6-plugin-history';
import { Transform } from '@antv/x6-plugin-transform'; import {Transform} from '@antv/x6-plugin-transform';
import {getDefinitionDetail, saveDefinition} from '../service'; import {getDefinitionDetail, saveDefinition} from '../service';
import {getNodeDefinitionList} from './service'; import {getNodeDefinitionList} from './service';
import NodePanel from './components/NodePanel'; import NodePanel from './components/NodePanel';
@ -132,10 +132,10 @@ const WorkflowDesign: React.FC = () => {
}); });
return !exists; return !exists;
}, },
validateMagnet({ magnet }) { validateMagnet({magnet}) {
return magnet.getAttribute('port-group') !== 'top'; return magnet.getAttribute('port-group') !== 'top';
}, },
validateEdge({ edge }) { validateEdge({edge}) {
return true; return true;
} }
}, },
@ -184,7 +184,6 @@ const WorkflowDesign: React.FC = () => {
const history = new History({ const history = new History({
enabled: true, enabled: true,
beforeAddCommand(event: any, args: any) { beforeAddCommand(event: any, args: any) {
console.log('History command added:', event, args);
return true; return true;
}, },
afterExecuteCommand: () => { afterExecuteCommand: () => {
@ -216,9 +215,7 @@ const WorkflowDesign: React.FC = () => {
showAnchorSelectionBox: false, showAnchorSelectionBox: false,
pointerEvents: 'auto' pointerEvents: 'auto'
}); });
console.log('Initializing Selection plugin:', selection);
graph.use(selection); graph.use(selection);
graph.use(new MiniMap({ graph.use(new MiniMap({
container: minimapContainerRef.current!, container: minimapContainerRef.current!,
width: minimapWidth, width: minimapWidth,
@ -238,12 +235,7 @@ const WorkflowDesign: React.FC = () => {
async: true, async: true,
frozen: true, frozen: true,
interacting: false, interacting: false,
grid: false, grid: false
getCellView(cell) {
if (cell.isNode()) {
return SimpleNodeView;
}
},
}, },
viewport: { viewport: {
padding: 0, padding: 0,
@ -268,20 +260,14 @@ const WorkflowDesign: React.FC = () => {
(graph as any).history = history; (graph as any).history = history;
// 监听图形变化 // 监听图形变化
graph.on('cell:added', ({ cell }) => { graph.on('cell:added', ({cell}) => {
const canUndo = history.canUndo(); const canUndo = history.canUndo();
const canRedo = history.canRedo(); const canRedo = history.canRedo();
console.log('Cell added:', {
cell,
canUndo,
canRedo,
stackSize: history.stackSize,
});
// 强制更新组件状态 // 强制更新组件状态
setForceUpdate(prev => !prev); setForceUpdate(prev => !prev);
}); });
graph.on('cell:removed', ({ cell }) => { graph.on('cell:removed', ({cell}) => {
const canUndo = history.canUndo(); const canUndo = history.canUndo();
const canRedo = history.canRedo(); const canRedo = history.canRedo();
console.log('Cell removed:', { console.log('Cell removed:', {
@ -294,16 +280,9 @@ const WorkflowDesign: React.FC = () => {
setForceUpdate(prev => !prev); setForceUpdate(prev => !prev);
}); });
graph.on('cell:changed', ({ cell, options }) => { graph.on('cell:changed', ({cell, options}) => {
const canUndo = history.canUndo(); const canUndo = history.canUndo();
const canRedo = history.canRedo(); const canRedo = history.canRedo();
console.log('Cell changed:', {
cell,
options,
canUndo,
canRedo,
stackSize: history.stackSize,
});
// 强制更新组件状态 // 强制更新组件状态
setForceUpdate(prev => !prev); setForceUpdate(prev => !prev);
}); });
@ -319,7 +298,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 处理连线重新连接 // 处理连线重新连接
graph.on('edge:moved', ({ edge, terminal, previous }) => { graph.on('edge:moved', ({edge, terminal, previous}) => {
if (!edge || !terminal) return; if (!edge || !terminal) return;
const isSource = terminal.type === 'source'; const isSource = terminal.type === 'source';
@ -355,7 +334,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 处理连线更改 // 处理连线更改
graph.on('edge:change:source edge:change:target', ({ edge, current, previous }) => { graph.on('edge:change:source edge:change:target', ({edge, current, previous}) => {
if (edge && current) { if (edge && current) {
edge.setAttrs({ edge.setAttrs({
line: { line: {
@ -541,7 +520,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 节点点击事件 // 节点点击事件
graph.on('node:click', ({ node }) => { graph.on('node:click', ({node}) => {
// 获取当前选中的节点 // 获取当前选中的节点
const selectedNode = graph.getSelectedCells()[0]; const selectedNode = graph.getSelectedCells()[0];
@ -599,7 +578,7 @@ const WorkflowDesign: React.FC = () => {
const closeMenu = () => { const closeMenu = () => {
isOpen = false; isOpen = false;
root.render( root.render(
<Dropdown menu={{ items }} open={false} onOpenChange={(open) => { <Dropdown menu={{items}} open={false} onOpenChange={(open) => {
if (!open) { if (!open) {
setTimeout(() => { setTimeout(() => {
root.unmount(); root.unmount();
@ -607,7 +586,7 @@ const WorkflowDesign: React.FC = () => {
}, 100); }, 100);
} }
}}> }}>
<div /> <div/>
</Dropdown> </Dropdown>
); );
}; };
@ -640,8 +619,8 @@ const WorkflowDesign: React.FC = () => {
]; ];
root.render( root.render(
<Dropdown menu={{ items }} open={isOpen}> <Dropdown menu={{items}} open={isOpen}>
<div /> <div/>
</Dropdown> </Dropdown>
); );
@ -672,7 +651,7 @@ const WorkflowDesign: React.FC = () => {
const closeMenu = () => { const closeMenu = () => {
isOpen = false; isOpen = false;
root.render( root.render(
<Dropdown menu={{ items }} open={false} onOpenChange={(open) => { <Dropdown menu={{items}} open={false} onOpenChange={(open) => {
if (!open) { if (!open) {
setTimeout(() => { setTimeout(() => {
root.unmount(); root.unmount();
@ -680,7 +659,7 @@ const WorkflowDesign: React.FC = () => {
}, 100); }, 100);
} }
}}> }}>
<div /> <div/>
</Dropdown> </Dropdown>
); );
}; };
@ -703,8 +682,8 @@ const WorkflowDesign: React.FC = () => {
]; ];
root.render( root.render(
<Dropdown menu={{ items }} open={isOpen}> <Dropdown menu={{items}} open={isOpen}>
<div /> <div/>
</Dropdown> </Dropdown>
); );
@ -718,17 +697,17 @@ const WorkflowDesign: React.FC = () => {
}); });
// 禁用默认的右键菜单 // 禁用默认的右键菜单
graph.on('blank:contextmenu', ({ e }) => { graph.on('blank:contextmenu', ({e}) => {
e.preventDefault(); e.preventDefault();
}); });
// 禁用节点的右键菜单 // 禁用节点的右键菜单
graph.on('node:contextmenu', ({ e }) => { graph.on('node:contextmenu', ({e}) => {
e.preventDefault(); e.preventDefault();
}); });
// 禁用边的右键菜单 // 禁用边的右键菜单
graph.on('edge:contextmenu', ({ e }) => { graph.on('edge:contextmenu', ({e}) => {
e.preventDefault(); e.preventDefault();
}); });
@ -749,7 +728,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 连线开始时的处理 // 连线开始时的处理
graph.on('edge:connected', ({ edge }) => { graph.on('edge:connected', ({edge}) => {
// 设置连线样式 // 设置连线样式
edge.setAttrs({ edge.setAttrs({
line: { line: {
@ -764,7 +743,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 连线悬停效果 // 连线悬停效果
graph.on('edge:mouseenter', ({ edge }) => { graph.on('edge:mouseenter', ({edge}) => {
edge.setAttrs({ edge.setAttrs({
line: { line: {
stroke: '#52c41a', stroke: '#52c41a',
@ -773,7 +752,7 @@ const WorkflowDesign: React.FC = () => {
}); });
}); });
graph.on('edge:mouseleave', ({ edge }) => { graph.on('edge:mouseleave', ({edge}) => {
edge.setAttrs({ edge.setAttrs({
line: { line: {
stroke: '#5F95FF', stroke: '#5F95FF',
@ -783,7 +762,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 允许拖动连线中间的点和端点 // 允许拖动连线中间的点和端点
graph.on('edge:selected', ({ edge }) => { graph.on('edge:selected', ({edge}) => {
edge.addTools([ edge.addTools([
{ {
name: 'source-arrowhead', name: 'source-arrowhead',
@ -835,12 +814,12 @@ const WorkflowDesign: React.FC = () => {
}); });
// 连线工具移除 // 连线工具移除
graph.on('edge:unselected', ({ edge }) => { graph.on('edge:unselected', ({edge}) => {
edge.removeTools(); edge.removeTools();
}); });
// 连线移动到其他连接桩时的样式 // 连线移动到其他连接桩时的样式
graph.on('edge:connected', ({ edge }) => { graph.on('edge:connected', ({edge}) => {
edge.setAttrs({ edge.setAttrs({
line: { line: {
stroke: '#5F95FF', stroke: '#5F95FF',
@ -854,7 +833,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 连线悬停在连接桩上时的样式 // 连线悬停在连接桩上时的样式
graph.on('edge:mouseenter', ({ edge }) => { graph.on('edge:mouseenter', ({edge}) => {
const ports = document.querySelectorAll('.x6-port-body'); const ports = document.querySelectorAll('.x6-port-body');
ports.forEach((port) => { ports.forEach((port) => {
const portGroup = port.getAttribute('port-group'); const portGroup = port.getAttribute('port-group');
@ -864,7 +843,7 @@ const WorkflowDesign: React.FC = () => {
}); });
}); });
graph.on('edge:mouseleave', ({ edge }) => { graph.on('edge:mouseleave', ({edge}) => {
const ports = document.querySelectorAll('.x6-port-body'); const ports = document.querySelectorAll('.x6-port-body');
ports.forEach((port) => { ports.forEach((port) => {
port.setAttribute('style', 'visibility: hidden'); port.setAttribute('style', 'visibility: hidden');
@ -903,7 +882,7 @@ const WorkflowDesign: React.FC = () => {
message.info('剪贴板为空'); message.info('剪贴板为空');
return; return;
} }
const cells = graph.paste({ offset: 32 }); const cells = graph.paste({offset: 32});
graph.cleanSelection(); graph.cleanSelection();
graph.select(cells); graph.select(cells);
message.success('已粘贴'); message.success('已粘贴');
@ -944,7 +923,7 @@ const WorkflowDesign: React.FC = () => {
response.graph?.nodes?.forEach((workflowDefinitionNode: any) => { response.graph?.nodes?.forEach((workflowDefinitionNode: any) => {
const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions); const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions);
// 保存节点配置 // 保存节点配置
node.setProp('config', workflowDefinitionNode.config); node.setProp('workflowDefinitionNode', workflowDefinitionNode);
nodeMap.set(workflowDefinitionNode.id, node); nodeMap.set(workflowDefinitionNode.id, node);
}); });
@ -1060,6 +1039,7 @@ const WorkflowDesign: React.FC = () => {
const handleNodeConfigUpdate = (values: any) => { const handleNodeConfigUpdate = (values: any) => {
if (!selectedNode) return; if (!selectedNode) return;
// 更新节点配置 // 更新节点配置
console.log("// 更新节点配置", values);
selectedNode.setProp('config', values); selectedNode.setProp('config', values);
// 更新节点显示名称 // 更新节点显示名称
if (values.name) { if (values.name) {
@ -1094,17 +1074,18 @@ const WorkflowDesign: React.FC = () => {
type: nodeType, type: nodeType,
name: node.attr('label/text'), name: node.attr('label/text'),
graph: { graph: {
shape: nodeDefinition?.graphConfig.uiSchema.shape, // shape: nodeDefinition?.graphConfig.uiSchema.shape,
size: { // size: {
width: node.size().width, // width: node.size().width,
height: node.size().height // height: node.size().height
}, // },
style: nodeDefinition?.graphConfig.uiSchema.style, // style: nodeDefinition?.graphConfig.uiSchema.style,
ports: nodeDefinition?.graphConfig.uiSchema.ports, // ports: nodeDefinition?.graphConfig.uiSchema.ports,
position: { // position: {
x: position.x, // x: position.x,
y: position.y // y: position.y
} // }
uiVariables: nodeDefinition.uiVariables
}, },
config: node.getProp('config') || {} config: node.getProp('config') || {}
}; };
@ -1162,7 +1143,7 @@ const WorkflowDesign: React.FC = () => {
<Tooltip title="返回"> <Tooltip title="返回">
<Button <Button
className="back-button" className="back-button"
icon={<ArrowLeftOutlined />} icon={<ArrowLeftOutlined/>}
onClick={() => navigate('/workflow/definition')} onClick={() => navigate('/workflow/definition')}
/> />
</Tooltip> </Tooltip>
@ -1173,7 +1154,7 @@ const WorkflowDesign: React.FC = () => {
<Space.Compact> <Space.Compact>
<Tooltip title="撤销"> <Tooltip title="撤销">
<Button <Button
icon={<UndoOutlined />} icon={<UndoOutlined/>}
onClick={handleUndo} onClick={handleUndo}
disabled={!(graph as any)?.history?.canUndo()} disabled={!(graph as any)?.history?.canUndo()}
> >
@ -1182,7 +1163,7 @@ const WorkflowDesign: React.FC = () => {
</Tooltip> </Tooltip>
<Tooltip title="重做"> <Tooltip title="重做">
<Button <Button
icon={<RedoOutlined />} icon={<RedoOutlined/>}
onClick={handleRedo} onClick={handleRedo}
disabled={!(graph as any)?.history?.canRedo()} disabled={!(graph as any)?.history?.canRedo()}
> >
@ -1193,19 +1174,19 @@ const WorkflowDesign: React.FC = () => {
<Space.Compact> <Space.Compact>
<Tooltip title="剪切"> <Tooltip title="剪切">
<Button <Button
icon={<ScissorOutlined />} icon={<ScissorOutlined/>}
onClick={handleCut} onClick={handleCut}
/> />
</Tooltip> </Tooltip>
<Tooltip title="复制"> <Tooltip title="复制">
<Button <Button
icon={<CopyOutlined />} icon={<CopyOutlined/>}
onClick={handleCopy} onClick={handleCopy}
/> />
</Tooltip> </Tooltip>
<Tooltip title="粘贴"> <Tooltip title="粘贴">
<Button <Button
icon={<SnippetsOutlined />} icon={<SnippetsOutlined/>}
onClick={handlePaste} onClick={handlePaste}
/> />
</Tooltip> </Tooltip>
@ -1213,7 +1194,7 @@ const WorkflowDesign: React.FC = () => {
<Space.Compact> <Space.Compact>
<Tooltip title="放大"> <Tooltip title="放大">
<Button <Button
icon={<ZoomInOutlined />} icon={<ZoomInOutlined/>}
onClick={handleZoomIn} onClick={handleZoomIn}
disabled={scale >= 2} disabled={scale >= 2}
> >
@ -1222,7 +1203,7 @@ const WorkflowDesign: React.FC = () => {
</Tooltip> </Tooltip>
<Tooltip title="缩小"> <Tooltip title="缩小">
<Button <Button
icon={<ZoomOutOutlined />} icon={<ZoomOutOutlined/>}
onClick={handleZoomOut} onClick={handleZoomOut}
disabled={scale <= 0.2} disabled={scale <= 0.2}
> >
@ -1233,7 +1214,7 @@ const WorkflowDesign: React.FC = () => {
<Space.Compact> <Space.Compact>
<Tooltip title="全选"> <Tooltip title="全选">
<Button <Button
icon={<SelectOutlined />} icon={<SelectOutlined/>}
onClick={() => { onClick={() => {
if (!graph) return; if (!graph) return;
@ -1269,7 +1250,7 @@ const WorkflowDesign: React.FC = () => {
</Tooltip> </Tooltip>
<Tooltip title="删除"> <Tooltip title="删除">
<Button <Button
icon={<DeleteOutlined />} icon={<DeleteOutlined/>}
onClick={() => { onClick={() => {
if (!graph) return; if (!graph) return;
const cells = graph.getSelectedCells(); const cells = graph.getSelectedCells();
@ -1291,7 +1272,7 @@ const WorkflowDesign: React.FC = () => {
<Tooltip title="保存"> <Tooltip title="保存">
<Button <Button
type="primary" type="primary"
icon={<SaveOutlined />} icon={<SaveOutlined/>}
onClick={handleSaveWorkflow} onClick={handleSaveWorkflow}
> >
保存 保存
@ -1315,7 +1296,7 @@ const WorkflowDesign: React.FC = () => {
onDrop={handleDrop} onDrop={handleDrop}
onDragOver={handleDragOver} onDragOver={handleDragOver}
/> />
<div ref={minimapContainerRef} className="minimap-container" /> <div ref={minimapContainerRef} className="minimap-container"/>
</div> </div>
</div> </div>
</div> </div>

1
frontend/src/pages/Workflow/Definition/Design/utils/validator.ts
View File

@ -108,6 +108,7 @@ const validateAllNodesConfig = (graph: Graph): ValidationResult => {
for (const node of nodes) { for (const node of nodes) {
const nodeDefinition = node.getProp('nodeDefinition'); const nodeDefinition = node.getProp('nodeDefinition');
console.log(nodeDefinition)
const result = validateNodeConfig(node, nodeDefinition); const result = validateNodeConfig(node, nodeDefinition);
if (!result.valid) { if (!result.valid) {
return result; return result;

49
frontend/src/pages/Workflow/Definition/types.ts
View File

@ -1,27 +1,38 @@
import { BaseResponse, BaseQuery } from '@/types/base'; import {BaseResponse, BaseQuery} from '@/types/base';
export interface WorkflowDefinition extends BaseResponse { export interface WorkflowDefinition extends BaseResponse {
id: number; id: number;
name: string; name: string;
key: string; key: string;
description?: string; description?: string;
flowVersion?: number; flowVersion?: number;
status?: string; status?: string;
category: string; category: string;
triggers: string[]; triggers: string[];
graph: { graph: {
nodes: any[]; nodes: WorkflowDefinitionNode[];
edges: any[]; edges: any[];
}; };
formConfig: { formConfig: {
formItems: any[]; formItems: any[];
}; };
}
export interface WorkflowDefinitionNode {
id: number;
code: string;
type: string;
name: string;
uiVariables: JSON;
panelVariables: JSON;
localVariables: JSON;
formVariables: JSON;
} }
export interface WorkflowDefinitionQuery extends BaseQuery { export interface WorkflowDefinitionQuery extends BaseQuery {
name?: string; name?: string;
key?: string; key?: string;
status?: string; status?: string;
} }
/** /**