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-13 22:14:37 +08:00
parent 5c88430ebc
commit 7a44697c56
1 changed files with 70 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,17 @@
import React, { useEffect, useState, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button, Space, Card, Row, Col, message, Modal } from 'antd';
import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { Graph, Cell } from '@antv/x6';
import React, {useEffect, useState, useRef} from 'react';
import {useParams, useNavigate} from 'react-router-dom';
import {Button, Space, Card, Row, Col, message, Modal} from 'antd';
import {ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined} from '@ant-design/icons';
import {Graph, Cell} from '@antv/x6';
import '@antv/x6-plugin-snapline';
import { getDefinitionDetail, saveDefinition } from '../service';
import { getNodeDefinitionList } from './service';
import {getDefinitionDetail, saveDefinition} from '../service';
import {getNodeDefinitionList} from './service';
import NodePanel from './components/NodePanel';
import NodeConfigDrawer from './components/NodeConfigModal';
import { NodeDefinition } from './types';
import { validateWorkflow } from './utils/validator';
import { addNodeToGraph } from './utils/nodeUtils';
import { applyAutoLayout } from './utils/layoutUtils';
import {NodeDefinition} from './types';
import {validateWorkflow} from './utils/validator';
import {addNodeToGraph} from './utils/nodeUtils';
import {applyAutoLayout} from './utils/layoutUtils';
import {
GRID_CONFIG,
CONNECTING_CONFIG,
@ -20,7 +20,7 @@ import {
} from './constants';
const WorkflowDesign: React.FC = () => {
const { id } = useParams<{ id: string }>();
const {id} = useParams<{ id: string }>();
const navigate = useNavigate();
const [title, setTitle] = useState<string>('工作流设计');
const graphContainerRef = useRef<HTMLDivElement>(null);
@ -81,14 +81,14 @@ const WorkflowDesign: React.FC = () => {
});
// 显示/隐藏连接桩
graph.on('node:mouseenter', ({ node }) => {
graph.on('node:mouseenter', ({node}) => {
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
ports.forEach((port) => {
port.setAttribute('style', 'visibility: visible');
});
});
graph.on('node:mouseleave', ({ node }) => {
graph.on('node:mouseleave', ({node}) => {
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
ports.forEach((port) => {
port.setAttribute('style', 'visibility: hidden');
@ -96,7 +96,7 @@ const WorkflowDesign: React.FC = () => {
});
// 节点双击事件
graph.on('node:dblclick', ({ node }) => {
graph.on('node:dblclick', ({node}) => {
const nodeType = node.getProp('type');
console.log(nodeType)
// 从节点定义列表中找到对应的定义
@ -144,11 +144,11 @@ const WorkflowDesign: React.FC = () => {
const targetNode = nodeMap.get(edge.to);
if (sourceNode && targetNode) {
graphInstance.addEdge({
source: { cell: sourceNode.id },
target: { cell: targetNode.id },
attrs: { line: DEFAULT_STYLES.edge },
source: {cell: sourceNode.id},
target: {cell: targetNode.id},
attrs: {line: DEFAULT_STYLES.edge},
labels: [{
attrs: { label: { text: edge.name || '' } }
attrs: {label: {text: edge.name || ''}}
}]
});
}
@ -175,8 +175,8 @@ const WorkflowDesign: React.FC = () => {
if (!nodeData) return;
const node = JSON.parse(nodeData);
const { clientX, clientY } = e;
const point = graph.clientToLocal({ x: clientX, y: clientY });
const {clientX, clientY} = e;
const point = graph.clientToLocal({x: clientX, y: clientY});
addNodeToGraph(true, graph, node, nodeDefinitions, point);
} catch (error) {
console.error('创建节点失败:', error);
@ -261,7 +261,7 @@ const WorkflowDesign: React.FC = () => {
// 调用保存接口
await saveDefinition(saveData);
// 使用 Modal.confirm 显示操作选择
Modal.confirm({
title: '保存成功',
@ -286,61 +286,55 @@ const WorkflowDesign: React.FC = () => {
};
return (
<div style={{ padding: '24px' }}>
<Card
title={title}
extra={
<Space>
<Button
icon={<SaveOutlined />}
type="primary"
onClick={handleSaveWorkflow}
>
保存
</Button>
<Button
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/workflow/definition')}
>
返回
</Button>
</Space>
}
>
<Row gutter={16}>
<Col span={6}>
<NodePanel
nodeDefinitions={nodeDefinitions}
onNodeDragStart={handleNodeDragStart}
/>
</Col>
<Col span={18}>
<Card
size="small"
styles={{
body: {
padding: 0,
height: 'calc(100vh - 250px)',
background: '#f5f5f5',
border: '1px solid #d9d9d9',
borderRadius: '4px',
}
<div>
<Row gutter={16}>
<Col span={4}>
<NodePanel
nodeDefinitions={nodeDefinitions}
onNodeDragStart={handleNodeDragStart}
/>
</Col>
<Col span={20}>
<Card
styles={{
body: {
padding: 0,
height: 'calc(100vh - 250px)',
background: '#f5f5f5',
border: '1px solid #d9d9d9',
borderRadius: '4px',
}
}}
extra={
<Space>
<Button
icon={<SaveOutlined/>}
type="primary"
onClick={handleSaveWorkflow}
>
保存
</Button>
<Button
icon={<ArrowLeftOutlined/>}
onClick={() => navigate('/workflow/definition')}
>
返回
</Button>
</Space>
}
>
<div
ref={graphContainerRef}
style={{
width: '100%',
height: '100%',
}}
>
<div
ref={graphContainerRef}
style={{
width: '100%',
height: '100%',
}}
onDrop={handleDrop}
onDragOver={handleDragOver}
/>
</Card>
</Col>
</Row>
</Card>
onDrop={handleDrop}
onDragOver={handleDragOver}
/>
</Card>
</Col>
</Row>
<NodeConfigDrawer
visible={configModalVisible}
node={selectedNode}