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

144
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,61 +286,55 @@ const WorkflowDesign: React.FC = () => {
}; };
return ( return (
<div style={{ padding: '24px' }}> <div>
<Card <Row gutter={16}>
title={title} <Col span={4}>
extra={ <NodePanel
<Space> nodeDefinitions={nodeDefinitions}
<Button onNodeDragStart={handleNodeDragStart}
icon={<SaveOutlined />} />
type="primary" </Col>
onClick={handleSaveWorkflow} <Col span={20}>
> <Card
保存 styles={{
</Button> body: {
<Button padding: 0,
icon={<ArrowLeftOutlined />} height: 'calc(100vh - 250px)',
onClick={() => navigate('/workflow/definition')} background: '#f5f5f5',
> border: '1px solid #d9d9d9',
返回 borderRadius: '4px',
</Button> }
</Space> }}
} extra={
> <Space>
<Row gutter={16}> <Button
<Col span={6}> icon={<SaveOutlined/>}
<NodePanel type="primary"
nodeDefinitions={nodeDefinitions} onClick={handleSaveWorkflow}
onNodeDragStart={handleNodeDragStart} >
/> 保存
</Col> </Button>
<Col span={18}> <Button
<Card icon={<ArrowLeftOutlined/>}
size="small" onClick={() => navigate('/workflow/definition')}
styles={{ >
body: { 返回
padding: 0, </Button>
height: 'calc(100vh - 250px)', </Space>
background: '#f5f5f5', }
border: '1px solid #d9d9d9', >
borderRadius: '4px', <div
} ref={graphContainerRef}
style={{
width: '100%',
height: '100%',
}} }}
> onDrop={handleDrop}
<div onDragOver={handleDragOver}
ref={graphContainerRef} />
style={{ </Card>
width: '100%', </Col>
height: '100%', </Row>
}}
onDrop={handleDrop}
onDragOver={handleDragOver}
/>
</Card>
</Col>
</Row>
</Card>
<NodeConfigDrawer <NodeConfigDrawer
visible={configModalVisible} visible={configModalVisible}
node={selectedNode} node={selectedNode}