From 84012dd98d8d44a7b044ff3d9de3a14878cb6cdd Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 6 Dec 2024 17:15:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E7=82=B9=E9=AA=8C=E8=AF=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Designer/components/Toolbar/index.tsx     | 61 ++++++++++++-------
 .../Workflow/Definition/Designer/index.tsx    | 15 +++++
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
index f54e41b7..04dfde97 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Space, Button, Tooltip, Divider } from 'antd';
+import { Space, Button, Tooltip, Divider, message } from 'antd';
 import {
     ZoomInOutlined,
     ZoomOutOutlined,
@@ -11,6 +11,7 @@ import {
     RedoOutlined,
     CopyOutlined,
     SnippetsOutlined,
+    CheckCircleOutlined,
 } from '@ant-design/icons';
 import { Graph, Cell } from '@antv/x6';
 import { Selection } from '@antv/x6-plugin-selection';
@@ -18,6 +19,7 @@ import { History } from '@antv/x6-plugin-history';
 import { Clipboard } from '@antv/x6-plugin-clipboard';
 import { Transform } from '@antv/x6-plugin-transform';
 import { Keyboard } from '@antv/x6-plugin-keyboard';
+import { validateFlow, hasCycle } from '../../validate';
 import './index.less';
 
 interface ToolbarProps {
@@ -232,6 +234,26 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
         return !clipboard?.isEmpty();
     };
 
+    // 验证流程
+    const validateWorkflow = () => {
+        if (!graph) return;
+        
+        const result = validateFlow(graph);
+        const hasCycleResult = hasCycle(graph);
+        
+        if (hasCycleResult) {
+            message.error('流程图中存在循环，请检查');
+            return;
+        }
+        
+        if (!result.valid) {
+            message.error(result.errors.join('\n'));
+            return;
+        }
+        
+        message.success('流程验证通过');
+    };
+
     return (
         <div className="workflow-toolbar">
             <Space split={<Divider type="vertical" />}>
@@ -249,47 +271,35 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                         <Button icon={<OneToOneOutlined />} onClick={resetZoom} />
                     </Tooltip>
                 </Space>
-
                 <Space>
-                    <Tooltip title="全选 (Ctrl + A)">
+                    <Tooltip title="全选">
                         <Button icon={<SelectOutlined />} onClick={selectAll} />
                     </Tooltip>
-                    <Tooltip title="删除 (Delete)">
+                    <Tooltip title="删除">
                         <Button 
                             icon={<DeleteOutlined />} 
                             onClick={deleteSelected}
                             disabled={!hasSelection()}
-                            danger
                         />
                     </Tooltip>
                 </Space>
-
                 <Space>
-                    <Tooltip title="撤销 (Ctrl + Z)">
-                        <Button 
-                            icon={<UndoOutlined />} 
-                            onClick={undo}
-                            disabled={!graph?.getPlugin<History>('history')?.canUndo()}
-                        />
+                    <Tooltip title="撤销">
+                        <Button icon={<UndoOutlined />} onClick={undo} />
                     </Tooltip>
-                    <Tooltip title="重做 (Ctrl + Shift + Z)">
-                        <Button 
-                            icon={<RedoOutlined />} 
-                            onClick={redo}
-                            disabled={!graph?.getPlugin<History>('history')?.canRedo()}
-                        />
+                    <Tooltip title="重做">
+                        <Button icon={<RedoOutlined />} onClick={redo} />
                     </Tooltip>
                 </Space>
-
                 <Space>
-                    <Tooltip title="复制 (Ctrl + C)">
+                    <Tooltip title="复制">
                         <Button 
                             icon={<CopyOutlined />} 
                             onClick={copy}
                             disabled={!hasSelection()}
                         />
                     </Tooltip>
-                    <Tooltip title="粘贴 (Ctrl + V)">
+                    <Tooltip title="粘贴">
                         <Button 
                             icon={<SnippetsOutlined />} 
                             onClick={paste}
@@ -297,6 +307,15 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                         />
                     </Tooltip>
                 </Space>
+                <Space>
+                    <Tooltip title="验证流程">
+                        <Button 
+                            icon={<CheckCircleOutlined />} 
+                            onClick={validateWorkflow}
+                            type="primary"
+                        />
+                    </Tooltip>
+                </Space>
             </Space>
         </div>
     );
diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
index 263f9c5a..59423a44 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
@@ -20,6 +20,7 @@ import Toolbar from './components/Toolbar';
 import {NodeType, getNodeTypes} from './service';
 import {DeleteOutlined, CopyOutlined, SettingOutlined, ClearOutlined, FullscreenOutlined} from '@ant-design/icons';
 import EdgeConfig from './components/EdgeConfig';
+import { validateFlow, hasCycle } from './validate';
 
 const {Sider, Content} = Layout;
 
@@ -681,6 +682,20 @@ const FlowDesigner: React.FC = () => {
         if (!id || !detail || !graphRef.current || detail.status !== WorkflowStatus.DRAFT) return;
 
         try {
+            // 验证流程
+            const result = validateFlow(graphRef.current);
+            const hasCycleResult = hasCycle(graphRef.current);
+            
+            if (hasCycleResult) {
+                message.error('流程图中存在循环，请检查');
+                return;
+            }
+            
+            if (!result.valid) {
+                message.error(result.errors.join('\n'));
+                return;
+            }
+
             const graphData = graphRef.current.toJSON();
 
             // 收集节点配置数据