This commit is contained in:
asp_ly 2024-12-14 13:54:19 +08:00
parent bc0e595efa
commit 1e045bf030

View File

@ -1,6 +1,6 @@
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, Collapse} from 'antd'; import {Button, Space, Card, Row, Col, message, Modal, Collapse, Tooltip} from 'antd';
import { import {
ArrowLeftOutlined, ArrowLeftOutlined,
SaveOutlined, SaveOutlined,
@ -405,18 +405,53 @@ const WorkflowDesign: React.FC = () => {
<div className="workflow-design"> <div className="workflow-design">
<div className="header"> <div className="header">
<Space> <Space>
<Tooltip title="返回">
<Button <Button
className="back-button"
icon={<ArrowLeftOutlined />} icon={<ArrowLeftOutlined />}
onClick={() => navigate('/workflow/definition')} onClick={() => navigate('/workflow/definition')}
className="back-button" />
> </Tooltip>
<span>{title}</span>
</Button>
<span></span>
</Space> </Space>
<div className="actions"> <div className="actions">
<Space> <Space>
<Space.Compact> <Space.Compact>
<Tooltip title="撤销">
<Button
icon={<UndoOutlined />}
onClick={() => graph?.undo()}
/>
</Tooltip>
<Tooltip title="重做">
<Button
icon={<RedoOutlined />}
onClick={() => graph?.redo()}
/>
</Tooltip>
</Space.Compact>
<Space.Compact>
<Tooltip title="剪切">
<Button
icon={<ScissorOutlined />}
onClick={() => graph?.cut()}
/>
</Tooltip>
<Tooltip title="复制">
<Button
icon={<CopyOutlined />}
onClick={() => graph?.copy()}
/>
</Tooltip>
<Tooltip title="粘贴">
<Button
icon={<SnippetsOutlined />}
onClick={() => graph?.paste()}
/>
</Tooltip>
</Space.Compact>
<Space.Compact>
<Tooltip title="选择">
<Button <Button
icon={<SelectOutlined />} icon={<SelectOutlined />}
onClick={() => { onClick={() => {
@ -429,48 +464,9 @@ const WorkflowDesign: React.FC = () => {
graph.resetSelection(); graph.resetSelection();
graph.select(cells); graph.select(cells);
}} }}
title="全选"
/>
<Button
icon={<CopyOutlined />}
onClick={() => {
if (!graph) return;
const cells = graph.getSelectedCells();
if (cells.length === 0) {
message.info('请先选择要复制的元素');
return;
}
graph.copy(cells);
}}
title="复制"
/>
<Button
icon={<ScissorOutlined />}
onClick={() => {
if (!graph) return;
const cells = graph.getSelectedCells();
if (cells.length === 0) {
message.info('请先选择要剪切的元素');
return;
}
graph.cut(cells);
}}
title="剪切"
/>
<Button
icon={<SnippetsOutlined />}
onClick={() => {
if (!graph) return;
if (!graph.isClipboardEmpty()) {
const cells = graph.paste({ offset: 32 });
graph.cleanSelection();
graph.select(cells);
} else {
message.info('剪贴板为空');
}
}}
title="粘贴"
/> />
</Tooltip>
<Tooltip title="删除">
<Button <Button
icon={<DeleteOutlined />} icon={<DeleteOutlined />}
onClick={() => { onClick={() => {
@ -488,39 +484,18 @@ const WorkflowDesign: React.FC = () => {
} }
}); });
}} }}
danger
title="删除"
/> />
</Tooltip>
</Space.Compact> </Space.Compact>
<Space.Compact> <Tooltip title="保存">
<Button <Button
icon={<UndoOutlined />} type="primary"
onClick={() => { icon={<SaveOutlined />}
if (!graph) return; onClick={handleSaveWorkflow}
if (graph.canUndo()) { >
graph.undo();
} else {
message.info('没有可撤销的操作');
}
}}
title="撤销"
/>
<Button
icon={<RedoOutlined />}
onClick={() => {
if (!graph) return;
if (graph.canRedo()) {
graph.redo();
} else {
message.info('没有可重做的操作');
}
}}
title="重做"
/>
</Space.Compact>
<Button onClick={handleSaveWorkflow} type="primary" icon={<SaveOutlined />}>
</Button> </Button>
</Tooltip>
</Space> </Space>
</div> </div>
</div> </div>