122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { Role, RoleType } from '../types';
|
|
|
|
interface RoleDetailDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
selectedRole: Role | null;
|
|
detailLoading?: boolean;
|
|
}
|
|
|
|
export function RoleDetailDialog({
|
|
open,
|
|
onOpenChange,
|
|
selectedRole,
|
|
detailLoading = false
|
|
}: RoleDetailDialogProps) {
|
|
const getRoleTypeBadge = (type: RoleType) => {
|
|
return type === 'system' ? (
|
|
<Badge className="bg-blue-100 text-blue-700">系统角色</Badge>
|
|
) : (
|
|
<Badge className="bg-green-100 text-green-700">自定义</Badge>
|
|
);
|
|
};
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
return status === 'active' ? (
|
|
<Badge className="bg-green-100 text-green-700">启用</Badge>
|
|
) : (
|
|
<Badge className="bg-gray-100 text-gray-700">禁用</Badge>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>角色详情</DialogTitle>
|
|
<DialogDescription className="sr-only">
|
|
查看角色的详细信息和权限
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
{detailLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin mr-2" />
|
|
<span>正在加载角色详情...</span>
|
|
</div>
|
|
) : selectedRole ? (
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>角色名称</Label>
|
|
<div className="mt-1">{selectedRole.name}</div>
|
|
</div>
|
|
<div>
|
|
<Label>角色代码</Label>
|
|
<div className="mt-1">{selectedRole.code}</div>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<Label>角色描述</Label>
|
|
<div className="mt-1">{selectedRole.description || '-'}</div>
|
|
</div>
|
|
<div>
|
|
<Label>角色类型</Label>
|
|
<div className="mt-1">{getRoleTypeBadge(selectedRole.type)}</div>
|
|
</div>
|
|
<div>
|
|
<Label>状态</Label>
|
|
<div className="mt-1">{getStatusBadge(selectedRole.status)}</div>
|
|
</div>
|
|
{selectedRole.defaultHomePage && (
|
|
<div className="col-span-2">
|
|
<Label>默认首页</Label>
|
|
<div className="mt-1">{selectedRole.defaultHomePage}</div>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<Label>菜单数量</Label>
|
|
<div className="mt-1">
|
|
{selectedRole.menuIds?.includes('*') ? '全部' : (selectedRole.menuIds?.length || 0)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>权限数量</Label>
|
|
<div className="mt-1">
|
|
{selectedRole.permissionIds?.includes('*') ? '全部' : (selectedRole.permissionIds?.length || 0)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>创建时间</Label>
|
|
<div className="mt-1">
|
|
{new Date(selectedRole.createdAt).toLocaleString('zh-CN')}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>更新时间</Label>
|
|
<div className="mt-1">
|
|
{new Date(selectedRole.updatedAt).toLocaleString('zh-CN')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center py-8">
|
|
<span>无角色数据</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
关闭
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |