123 lines
7.2 KiB
TypeScript
123 lines
7.2 KiB
TypeScript
"use client"
|
||
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import { IconShield, IconUsers, IconKey, IconSettings } from "@tabler/icons-react"
|
||
import { SiteHeader } from "../site-header"
|
||
import { RoleTable } from "./role-table"
|
||
import { PermissionTable } from "./permission-table"
|
||
import { UserRoleManagement } from "./user-role-management"
|
||
import { RolePermissionManagement } from "./role-permission-management"
|
||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||
|
||
export default function PermissionsPage() {
|
||
return (
|
||
<>
|
||
<SiteHeader breadcrumbs={[{ label: "Home", href: "/" }, { label: "权限管理", href: "/admin/permissions" }]} />
|
||
<ScrollArea className="h-full">
|
||
<div className="flex flex-1 flex-col">
|
||
<div className="@container/main flex flex-1 flex-col gap-2 py-4">
|
||
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
|
||
<div className="px-6">
|
||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||
<IconShield className="h-6 w-6" />
|
||
权限管理中心
|
||
</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
管理用户角色和权限，确保系统安全
|
||
</p>
|
||
</div>
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 px-6">
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">总用户数</CardTitle>
|
||
<IconUsers className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">1,234</div>
|
||
<p className="text-xs text-muted-foreground">+20% 较上月</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">活跃角色</CardTitle>
|
||
<IconShield className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">8</div>
|
||
<p className="text-xs text-muted-foreground">5个系统角色</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">权限总数</CardTitle>
|
||
<IconKey className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">45</div>
|
||
<p className="text-xs text-muted-foreground">12个模块</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">访问日志</CardTitle>
|
||
<IconSettings className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">2,847</div>
|
||
<p className="text-xs text-muted-foreground">今日访问次数</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 主要功能标签页 */}
|
||
<div className="px-6">
|
||
<Tabs defaultValue="roles" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-4">
|
||
<TabsTrigger value="roles" className="flex items-center gap-2">
|
||
<IconShield className="h-4 w-4" />
|
||
角色管理
|
||
</TabsTrigger>
|
||
<TabsTrigger value="permissions" className="flex items-center gap-2">
|
||
<IconKey className="h-4 w-4" />
|
||
权限管理
|
||
</TabsTrigger>
|
||
<TabsTrigger value="user-roles" className="flex items-center gap-2">
|
||
<IconUsers className="h-4 w-4" />
|
||
用户角色
|
||
</TabsTrigger>
|
||
<TabsTrigger value="role-permissions" className="flex items-center gap-2">
|
||
<IconSettings className="h-4 w-4" />
|
||
角色权限
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="roles" className="mt-6">
|
||
<RoleTable />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="permissions" className="mt-6">
|
||
<PermissionTable />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="user-roles" className="mt-6">
|
||
<UserRoleManagement />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="role-permissions" className="mt-6">
|
||
<RolePermissionManagement />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ScrollArea>
|
||
|
||
</>
|
||
)
|
||
} |