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

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

@ -1,17 +1,17 @@
import React, { useEffect, useState, useRef } from 'react'; import React, {useEffect, useState, useRef} from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import {useParams, useNavigate} from 'react-router-dom';
import { Button, Space, Card, Row, Col, message, Modal } from 'antd'; import {Button, Space, Card, Row, Col, message, Modal} from 'antd';
import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons'; import {ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined} from '@ant-design/icons';
import { Graph, Cell } from '@antv/x6'; import {Graph, Cell} from '@antv/x6';
import '@antv/x6-plugin-snapline'; import '@antv/x6-plugin-snapline';
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';
import NodeConfigDrawer from './components/NodeConfigModal'; import NodeConfigDrawer from './components/NodeConfigModal';
import { NodeDefinition } from './types'; import {NodeDefinition} from './types';
import { validateWorkflow } from './utils/validator'; import {validateWorkflow} from './utils/validator';
import { addNodeToGraph } from './utils/nodeUtils'; import {addNodeToGraph} from './utils/nodeUtils';
import { applyAutoLayout } from './utils/layoutUtils'; import {applyAutoLayout} from './utils/layoutUtils';
import { import {
GRID_CONFIG, GRID_CONFIG,
CONNECTING_CONFIG, CONNECTING_CONFIG,
@ -20,7 +20,7 @@ import {
} from './constants'; } from './constants';
const WorkflowDesign: React.FC = () => { const WorkflowDesign: React.FC = () => {
const { id } = useParams<{ id: string }>(); const {id} = useParams<{ id: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const [title, setTitle] = useState<string>('工作流设计'); const [title, setTitle] = useState<string>('工作流设计');
const graphContainerRef = useRef<HTMLDivElement>(null); 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`); const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
ports.forEach((port) => { ports.forEach((port) => {
port.setAttribute('style', 'visibility: visible'); 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`); const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
ports.forEach((port) => { ports.forEach((port) => {
port.setAttribute('style', 'visibility: hidden'); 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'); const nodeType = node.getProp('type');
console.log(nodeType) console.log(nodeType)
// 从节点定义列表中找到对应的定义 // 从节点定义列表中找到对应的定义
@ -144,11 +144,11 @@ const WorkflowDesign: React.FC = () => {
const targetNode = nodeMap.get(edge.to); const targetNode = nodeMap.get(edge.to);
if (sourceNode && targetNode) { if (sourceNode && targetNode) {
graphInstance.addEdge({ graphInstance.addEdge({
source: { cell: sourceNode.id }, source: {cell: sourceNode.id},
target: { cell: targetNode.id }, target: {cell: targetNode.id},
attrs: { line: DEFAULT_STYLES.edge }, attrs: {line: DEFAULT_STYLES.edge},
labels: [{ labels: [{
attrs: { label: { text: edge.name || '' } } attrs: {label: {text: edge.name || ''}}
}] }]
}); });
} }
@ -175,8 +175,8 @@ const WorkflowDesign: React.FC = () => {
if (!nodeData) return; if (!nodeData) return;
const node = JSON.parse(nodeData); const node = JSON.parse(nodeData);
const { clientX, clientY } = e; const {clientX, clientY} = e;
const point = graph.clientToLocal({ x: clientX, y: clientY }); const point = graph.clientToLocal({x: clientX, y: clientY});
addNodeToGraph(true, graph, node, nodeDefinitions, point); addNodeToGraph(true, graph, node, nodeDefinitions, point);
} catch (error) { } catch (error) {
console.error('创建节点失败:', error); console.error('创建节点失败:', error);
@ -286,37 +286,16 @@ const WorkflowDesign: React.FC = () => {
}; };
return ( return (
<div style={{ padding: '24px' }}> <div>
<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}> <Row gutter={16}>
<Col span={6}> <Col span={4}>
<NodePanel <NodePanel
nodeDefinitions={nodeDefinitions} nodeDefinitions={nodeDefinitions}
onNodeDragStart={handleNodeDragStart} onNodeDragStart={handleNodeDragStart}
/> />
</Col> </Col>
<Col span={18}> <Col span={20}>
<Card <Card
size="small"
styles={{ styles={{
body: { body: {
padding: 0, padding: 0,
@ -326,6 +305,23 @@ const WorkflowDesign: React.FC = () => {
borderRadius: '4px', borderRadius: '4px',
} }
}} }}
extra={
<Space>
<Button
icon={<SaveOutlined/>}
type="primary"
onClick={handleSaveWorkflow}
>
保存
</Button>
<Button
icon={<ArrowLeftOutlined/>}
onClick={() => navigate('/workflow/definition')}
>
返回
</Button>
</Space>
}
> >
<div <div
ref={graphContainerRef} ref={graphContainerRef}
@ -339,8 +335,6 @@ const WorkflowDesign: React.FC = () => {
</Card> </Card>
</Col> </Col>
</Row> </Row>
</Card>
<NodeConfigDrawer <NodeConfigDrawer
visible={configModalVisible} visible={configModalVisible}
node={selectedNode} node={selectedNode}