生产管理系统前端 开发中心配置系统 所有页面

crop-x/src/app/(app)/central-config/user/role/components/RoleDetailDialog.tsx

@@ -0,0 +1,110 @@
+'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 { Role, RoleType } from '../types';
+
+interface RoleDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedRole: Role | null;
+}
+
+export function RoleDetailDialog({
+  open,
+  onOpenChange,
+  selectedRole
+}: 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>
+    );
+  };
+
+  if (!selectedRole) return null;
+
+  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">
+          <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}
+              </div>
+            </div>
+            <div>
+              <Label>权限数量</Label>
+              <div className="mt-1">
+                {selectedRole.permissionIds.includes('*') ? '全部' : selectedRole.permissionIds.length}
+              </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>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            关闭
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}