增加审批组件

frontend/src/pages/Workflow/Definition/components/CategoryManageDialog.tsx

@@ -5,6 +5,16 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -74,6 +84,8 @@ const CategoryManageDialog: React.FC<CategoryManageDialogProps> = ({
     const [editMode, setEditMode] = useState(false);
     const [editRecord, setEditRecord] = useState<WorkflowCategoryResponse | null>(null);
     const [iconSelectOpen, setIconSelectOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [deleteRecord, setDeleteRecord] = useState<WorkflowCategoryResponse | null>(null);
 
     const form = useForm<WorkflowCategoryRequest>({
         defaultValues: {
@@ -155,16 +167,26 @@ const CategoryManageDialog: React.FC<CategoryManageDialogProps> = ({
         setEditMode(true);
     };
 
-    // 删除
+    // 打开删除确认对话框
-    const handleDelete = async (record: WorkflowCategoryResponse) => {
+    const handleDeleteClick = (record: WorkflowCategoryResponse) => {
+        setDeleteRecord(record);
+        setDeleteDialogOpen(true);
+    };
+
+    // 确认删除
+    const confirmDelete = async () => {
+        if (!deleteRecord) return;
+        
         try {
-            await deleteWorkflowCategory(record.id);
+            await deleteWorkflowCategory(deleteRecord.id);
             toast({
                 title: "删除成功",
-                description: `分类 "${record.name}" 已删除`,
+                description: `分类 "${deleteRecord.name}" 已删除`,
             });
             loadCategories();
             onSuccess?.();
+            setDeleteDialogOpen(false);
+            setDeleteRecord(null);
         } catch (error) {
             console.error('删除失败:', error);
             toast({
@@ -234,6 +256,7 @@ const CategoryManageDialog: React.FC<CategoryManageDialogProps> = ({
     };
 
     return (
+        <>
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="max-w-6xl max-h-[85vh] overflow-y-auto">
                 <DialogHeader>
@@ -341,7 +364,7 @@ const CategoryManageDialog: React.FC<CategoryManageDialogProps> = ({
                                                             variant="ghost"
                                                             size="sm"
                                                             className="h-8 w-8 p-0"
-                                                            onClick={() => handleDelete(record)}
+                                                            onClick={() => handleDeleteClick(record)}
                                                         >
                                                             <Trash2 className="h-3.5 w-3.5 text-destructive" />
                                                         </Button>
@@ -533,6 +556,56 @@ const CategoryManageDialog: React.FC<CategoryManageDialogProps> = ({
                 )}
             </DialogContent>
         </Dialog>
+
+        {/* 删除确认对话框 */}
+        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>确认删除分类</AlertDialogTitle>
+                    <AlertDialogDescription asChild>
+                        <div className="space-y-3">
+                            <p>您确定要删除以下分类吗？此操作无法撤销。</p>
+                            {deleteRecord && (
+                                <div className="rounded-md border p-3 space-y-2 bg-muted/50">
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-sm font-medium text-muted-foreground">分类名称:</span>
+                                        <span className="font-medium">{deleteRecord.name}</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-sm font-medium text-muted-foreground">分类代码:</span>
+                                        <code className="text-xs bg-background px-2 py-1 rounded">
+                                            {deleteRecord.code}
+                                        </code>
+                                    </div>
+                                    {deleteRecord.icon && (
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-sm font-medium text-muted-foreground">图标:</span>
+                                            <DynamicIcon name={deleteRecord.icon} className="h-4 w-4" />
+                                        </div>
+                                    )}
+                                    {deleteRecord.description && (
+                                        <div className="flex items-start gap-2">
+                                            <span className="text-sm font-medium text-muted-foreground">描述:</span>
+                                            <span className="text-sm">{deleteRecord.description}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>取消</AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={confirmDelete}
+                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                        确认删除
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    </>
     );
 };