From d9f084908ac2a4e966b1f3b9347c3ecb70d7bca1 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 10 Nov 2025 17:55:05 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=89=8D=E7=AB=AF=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/System/Role/List/service.ts     |  9 +-
 .../src/pages/System/User/List/service.ts     |  2 +-
 .../Instance/List/components/DetailModal.tsx  | 84 ++++++++-----------
 .../Instance/List/components/HistoryModal.tsx | 48 ++++++-----
 4 files changed, 68 insertions(+), 75 deletions(-)

diff --git a/frontend/src/pages/System/Role/List/service.ts b/frontend/src/pages/System/Role/List/service.ts
index 9957dd65..40ad44f4 100644
--- a/frontend/src/pages/System/Role/List/service.ts
+++ b/frontend/src/pages/System/Role/List/service.ts
@@ -3,8 +3,9 @@ import type {RoleResponse, RoleRequest, RoleQuery, RoleTagResponse, RoleTagReque
 import {Page} from "@/types/base.ts";
 
 const BASE_URL = '/api/v1/role';
-
-const ROLE_TAG_BASE_URL = '/api/v1/role-tag'
+const ROLE_TAG_BASE_URL = '/api/v1/role-tag';
+const PERMISSION_BASE_URL = '/api/v1/permission';
+const MENU_BASE_URL = '/api/v1/menu';
 
 // 获取角色列表(分页)
 export const getRoleList = (params?: RoleQuery) => request.get<Page<RoleResponse>>(`${BASE_URL}/page`, {params});
@@ -37,7 +38,7 @@ export const getRolePermissions = (roleId: number) => request.get<string[]>(`${B
 export const assignPermissions = (roleId: number, permissionIds: Number[]) => request.post(`${BASE_URL}/${roleId}/permissions`, permissionIds);
 
 // 获取所有权限列表
-export const getAllPermissions = () => request.get<Permission[]>('/api/v1/permission/list');
+export const getAllPermissions = () => request.get<Permission[]>(`${PERMISSION_BASE_URL}/list`);
 
 // 获取权限树
-export const getPermissionTree = () => request.get('/api/v1/role/permission-tree');
\ No newline at end of file
+export const getPermissionTree = () => request.get(`${MENU_BASE_URL}/permission-tree`);
\ No newline at end of file
diff --git a/frontend/src/pages/System/User/List/service.ts b/frontend/src/pages/System/User/List/service.ts
index c41ab578..aa3524e5 100644
--- a/frontend/src/pages/System/User/List/service.ts
+++ b/frontend/src/pages/System/User/List/service.ts
@@ -27,7 +27,7 @@ export const resetPassword = (id: number, password: string) =>
 
 // 分配角色
 export const assignRoles = (userId: number, roleIds: number[]) => 
-    request.post(`${ROLE_BASE_URL}/${userId}/assignRoles`, roleIds);
+    request.post(`${BASE_URL}/${userId}/roles`, roleIds);
 
 // 获取所有角色列表(不分页)
 export const getAllRoles = () => 
diff --git a/frontend/src/pages/Workflow/Instance/List/components/DetailModal.tsx b/frontend/src/pages/Workflow/Instance/List/components/DetailModal.tsx
index 533bfde0..454e507d 100644
--- a/frontend/src/pages/Workflow/Instance/List/components/DetailModal.tsx
+++ b/frontend/src/pages/Workflow/Instance/List/components/DetailModal.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Dialog, DialogPortal, DialogOverlay, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Activity, Clock, FileText } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { WorkflowHistoricalInstance } from '../types';
 import { NodeType } from '../../../Design/nodes/types';
 import FlowGraphTab from './tabs/FlowGraphTab';
@@ -81,52 +80,37 @@ const DetailModal: React.FC<DetailModalProps> = ({ visible, onCancel, instanceDa
 
     return (
         <Dialog open={visible} onOpenChange={(open) => !open && onCancel()}>
-            <DialogPortal>
-                <DialogOverlay className="z-[60] backdrop-blur-sm" />
-                <DialogPrimitive.Content
-                    className={cn(
-                        "fixed left-[50%] top-[50%] z-[60] grid w-full max-w-[90vw]",
-                        "translate-x-[-50%] translate-y-[-50%]",
-                        "gap-4 border-2 bg-background p-6 shadow-2xl",
-                        "duration-300",
-                        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-                        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-                        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-                        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
-                        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-                        "sm:rounded-xl",
-                        "max-h-[90vh] overflow-y-auto"
-                    )}
-                >
-                    <DialogPrimitive.Close 
-                        className="absolute right-6 top-6 rounded-md opacity-70 ring-offset-background transition-all hover:opacity-100 hover:bg-accent hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground p-1.5"
-                        onClick={onCancel}
-                    >
-                        <X className="h-5 w-5" />
-                        <span className="sr-only">Close</span>
-                    </DialogPrimitive.Close>
-                    
-                    <DialogHeader>
-                        <DialogTitle className="text-2xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
-                            流程执行详情
-                        </DialogTitle>
-                    </DialogHeader>
-                    
-                    <Tabs defaultValue="graph" className="w-full">
-                        <TabsList className="grid w-full grid-cols-3 h-12">
-                            <TabsTrigger value="graph" className="text-base font-medium">
-                                📊 流程图
+            <DialogContent className="!max-w-7xl w-[90vw] h-[85vh] flex flex-col p-0 overflow-hidden">
+                <DialogHeader className="px-6 pt-6 pb-4 border-b flex-shrink-0">
+                    <DialogTitle className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <span className="text-lg font-semibold">流程执行详情</span>
+                            {getStatusBadge(instanceData.status)}
+                        </div>
+                        <div className="text-sm text-muted-foreground font-normal">
+                            实例ID: <span className="font-mono">{instanceData.processInstanceId}</span>
+                        </div>
+                    </DialogTitle>
+                </DialogHeader>
+                
+                <div className="flex-1 overflow-hidden flex flex-col">
+                    <Tabs defaultValue="graph" className="flex-1 flex flex-col overflow-hidden">
+                        <TabsList className="grid w-full grid-cols-3 h-12 mx-6 mt-4 rounded-none">
+                            <TabsTrigger value="graph" className="data-[state=active]:bg-background">
+                                <Activity className="h-4 w-4 mr-2" />
+                                流程图
                             </TabsTrigger>
-                            <TabsTrigger value="timeline" className="text-base font-medium">
-                                ⏱️ 执行时间线
+                            <TabsTrigger value="timeline" className="data-[state=active]:bg-background">
+                                <Clock className="h-4 w-4 mr-2" />
+                                执行时间线
                             </TabsTrigger>
-                            <TabsTrigger value="info" className="text-base font-medium">
-                                📋 详细信息
+                            <TabsTrigger value="info" className="data-[state=active]:bg-background">
+                                <FileText className="h-4 w-4 mr-2" />
+                                详细信息
                             </TabsTrigger>
                         </TabsList>
 
-                        {/* 流程图标签页 */}
-                        <TabsContent value="graph" className="mt-6">
+                        <TabsContent value="graph" className="flex-1 mt-4 mx-6 overflow-auto focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
                             <FlowGraphTab 
                                 instanceData={instanceData}
                                 getStatusBadge={getStatusBadge}
@@ -134,8 +118,7 @@ const DetailModal: React.FC<DetailModalProps> = ({ visible, onCancel, instanceDa
                             />
                         </TabsContent>
 
-                        {/* 执行时间线标签页 */}
-                        <TabsContent value="timeline" className="mt-6">
+                        <TabsContent value="timeline" className="flex-1 mt-4 mx-6 overflow-auto focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
                             <TimelineTab 
                                 instanceData={instanceData}
                                 getStatusBadge={getStatusBadge}
@@ -143,16 +126,15 @@ const DetailModal: React.FC<DetailModalProps> = ({ visible, onCancel, instanceDa
                             />
                         </TabsContent>
 
-                        {/* 详细信息标签页 */}
-                        <TabsContent value="info" className="mt-6">
+                        <TabsContent value="info" className="flex-1 mt-4 mx-6 overflow-auto focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
                             <DetailInfoTab 
                                 instanceData={instanceData}
                                 getStatusBadge={getStatusBadge}
                             />
                         </TabsContent>
                     </Tabs>
-                </DialogPrimitive.Content>
-            </DialogPortal>
+                </div>
+            </DialogContent>
         </Dialog>
     );
 };
diff --git a/frontend/src/pages/Workflow/Instance/List/components/HistoryModal.tsx b/frontend/src/pages/Workflow/Instance/List/components/HistoryModal.tsx
index a697f9ae..851a17e6 100644
--- a/frontend/src/pages/Workflow/Instance/List/components/HistoryModal.tsx
+++ b/frontend/src/pages/Workflow/Instance/List/components/HistoryModal.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogBody, DialogTitle } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DataTablePagination } from '@/components/ui/pagination';
+import { Loader2, History } from 'lucide-react';
 import { WorkflowHistoricalInstance } from '../types';
 import { getHistoricalInstances } from '../service';
 import DetailModal from './DetailModal';
@@ -73,19 +74,27 @@ const HistoryModal: React.FC<HistoryModalProps> = ({ visible, onCancel, workflow
     return (
         <>
             <Dialog open={visible} onOpenChange={(open) => !open && onCancel()}>
-                <DialogContent className="max-w-6xl">
-                    <DialogHeader>
-                        <DialogTitle>历史执行记录</DialogTitle>
+                <DialogContent className="max-w-6xl h-[80vh] flex flex-col p-0 overflow-hidden">
+                    <DialogHeader className="px-6 pt-6 pb-4 border-b flex-shrink-0">
+                        <DialogTitle className="flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                                <History className="h-5 w-5" />
+                                <span className="text-lg font-semibold">历史执行记录</span>
+                            </div>
+                            <div className="text-sm text-muted-foreground font-normal">
+                                共 {total} 条记录
+                            </div>
+                        </DialogTitle>
                     </DialogHeader>
                     
-                    <DialogBody>
-                    <div>
+                    <div className="flex-1 overflow-auto px-6 py-4">
                         {loading ? (
-                            <div className="flex justify-center items-center py-8">
-                                <div className="text-muted-foreground">加载中...</div>
+                            <div className="flex flex-col items-center justify-center h-full">
+                                <Loader2 className="h-8 w-8 animate-spin text-primary mb-2" />
+                                <div className="text-sm text-muted-foreground">加载中...</div>
                             </div>
                         ) : data.length === 0 ? (
-                            <div className="flex justify-center items-center py-8">
+                            <div className="flex flex-col items-center justify-center h-full">
                                 <div className="text-muted-foreground">暂无数据</div>
                             </div>
                         ) : (
@@ -125,20 +134,21 @@ const HistoryModal: React.FC<HistoryModalProps> = ({ visible, onCancel, workflow
                                 
                                 {/* 分页器 */}
                                 {pageCount > 1 && (
-                                    <DataTablePagination
-                                        pageIndex={query.pageNum + 1}
-                                        pageSize={query.pageSize}
-                                        pageCount={pageCount}
-                                        onPageChange={(page) => setQuery(prev => ({
-                            ...prev,
-                                            pageNum: page - 1
-                                        }))}
-                                    />
+                                    <div className="mt-4">
+                                        <DataTablePagination
+                                            pageIndex={query.pageNum + 1}
+                                            pageSize={query.pageSize}
+                                            pageCount={pageCount}
+                                            onPageChange={(page) => setQuery(prev => ({
+                                                ...prev,
+                                                pageNum: page - 1
+                                            }))}
+                                        />
+                                    </div>
                                 )}
                             </>
                         )}
                     </div>
-                    </DialogBody>
                 </DialogContent>
             </Dialog>