From 1e045bf030a12c0194d7c5a1a4bd4b559972c5c1 Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Sat, 14 Dec 2024 13:54:19 +0800
Subject: [PATCH] 1

---
 .../Workflow/Definition/Design/index.tsx      | 195 ++++++++----------
 1 file changed, 85 insertions(+), 110 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx
index 0ec79bfb..77391b4c 100644
--- a/frontend/src/pages/Workflow/Definition/Design/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef} from 'react';
 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 {
     ArrowLeftOutlined,
     SaveOutlined,
@@ -405,122 +405,97 @@ const WorkflowDesign: React.FC = () => {
         <div className="workflow-design">
             <div className="header">
                 <Space>
-                    <Button
-                        icon={<ArrowLeftOutlined />}
-                        onClick={() => navigate('/workflow/definition')}
-                        className="back-button"
-                    >
-                        返回
-                    </Button>
-                    <span>工作流设计器</span>
+                    <Tooltip title="返回">
+                        <Button
+                            className="back-button"
+                            icon={<ArrowLeftOutlined />}
+                            onClick={() => navigate('/workflow/definition')}
+                        />
+                    </Tooltip>
+                    <span>{title}</span>
                 </Space>
                 <div className="actions">
                     <Space>
                         <Space.Compact>
-                            <Button
-                                icon={<SelectOutlined />}
-                                onClick={() => {
-                                    if (!graph) return;
-                                    const cells = graph.getCells();
-                                    if (cells.length === 0) {
-                                        message.info('当前没有可选择的元素');
-                                        return;
-                                    }
-                                    graph.resetSelection();
-                                    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="粘贴"
-                            />
-                            <Button
-                                icon={<DeleteOutlined />}
-                                onClick={() => {
-                                    if (!graph) return;
-                                    const cells = graph.getSelectedCells();
-                                    if (cells.length === 0) {
-                                        message.info('请先选择要删除的元素');
-                                        return;
-                                    }
-                                    Modal.confirm({
-                                        title: '确认删除',
-                                        content: '确定要删除选中的元素吗？',
-                                        onOk: () => {
-                                            graph.removeCells(cells);
-                                        }
-                                    });
-                                }}
-                                danger
-                                title="删除"
-                            />
+                            <Tooltip title="撤销">
+                                <Button
+                                    icon={<UndoOutlined />}
+                                    onClick={() => graph?.undo()}
+                                />
+                            </Tooltip>
+                            <Tooltip title="重做">
+                                <Button
+                                    icon={<RedoOutlined />}
+                                    onClick={() => graph?.redo()}
+                                />
+                            </Tooltip>
                         </Space.Compact>
                         <Space.Compact>
-                            <Button
-                                icon={<UndoOutlined />}
-                                onClick={() => {
-                                    if (!graph) return;
-                                    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="重做"
-                            />
+                            <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>
-                        <Button onClick={handleSaveWorkflow} type="primary" icon={<SaveOutlined />}>
-                            保存
-                        </Button>
+                        <Space.Compact>
+                            <Tooltip title="选择">
+                                <Button
+                                    icon={<SelectOutlined />}
+                                    onClick={() => {
+                                        if (!graph) return;
+                                        const cells = graph.getCells();
+                                        if (cells.length === 0) {
+                                            message.info('当前没有可选择的元素');
+                                            return;
+                                        }
+                                        graph.resetSelection();
+                                        graph.select(cells);
+                                    }}
+                                />
+                            </Tooltip>
+                            <Tooltip title="删除">
+                                <Button
+                                    icon={<DeleteOutlined />}
+                                    onClick={() => {
+                                        if (!graph) return;
+                                        const cells = graph.getSelectedCells();
+                                        if (cells.length === 0) {
+                                            message.info('请先选择要删除的元素');
+                                            return;
+                                        }
+                                        Modal.confirm({
+                                            title: '确认删除',
+                                            content: '确定要删除选中的元素吗？',
+                                            onOk: () => {
+                                                graph.removeCells(cells);
+                                            }
+                                        });
+                                    }}
+                                />
+                            </Tooltip>
+                        </Space.Compact>
+                        <Tooltip title="保存">
+                            <Button
+                                type="primary"
+                                icon={<SaveOutlined />}
+                                onClick={handleSaveWorkflow}
+                            >
+                                保存
+                            </Button>
+                        </Tooltip>
                     </Space>
                 </div>
             </div>