80 lines
4.3 KiB
TypeScript
80 lines
4.3 KiB
TypeScript
'use client'
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { LayoutDashboard, FileText, Settings, Users, Shield, Key, Clock, CheckCircle, PlusSquare, Upload, List, Mail } from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', label: '仪表盘', icon: LayoutDashboard, perm: null },
|
|
{ href: '/tickets/pending', label: '待办工单', icon: Clock, perm: 'tickets:read' },
|
|
{ href: '/tickets/completed', label: '已办工单', icon: CheckCircle, perm: 'tickets:read' },
|
|
{ href: '/tickets/create', label: '手动建单', icon: PlusSquare, perm: 'tickets:create' },
|
|
{ href: '/tickets/import', label: '导入工单', icon: Upload, perm: 'tickets:import' },
|
|
{ href: '/reports', label: '报告管理', icon: FileText, perm: 'reports:read' },
|
|
]
|
|
|
|
const settingsItems = [
|
|
{ href: '/settings/users', label: '用户管理', icon: Users, perm: 'users:read' },
|
|
{ href: '/settings/roles', label: '角色权限', icon: Shield, perm: 'roles:read' },
|
|
{ href: '/settings/api-keys', label: 'API Key', icon: Key, perm: 'api-keys:read' },
|
|
{ href: '/settings/audit-logs', label: '审计日志', icon: FileText, perm: 'audit-logs:read' },
|
|
{ href: '/settings/monitor', label: '邮件监控', icon: Mail, perm: 'monitor:read' },
|
|
]
|
|
|
|
function hasAnyAdminPerm(permissions: string[]): boolean {
|
|
return permissions.includes('*') || permissions.some(p => p.startsWith('users:') || p.startsWith('roles:') || p.startsWith('api-keys:'))
|
|
}
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname()
|
|
const [permissions, setPermissions] = useState<string[]>([])
|
|
|
|
useEffect(() => {
|
|
fetch('/api/auth/me')
|
|
.then(r => r.json())
|
|
.then(u => { if (u.user?.permissions) setPermissions(u.user.permissions) })
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
const canSee = (perm: string | null) => {
|
|
if (perm === null) return true
|
|
if (permissions.includes('*')) return true
|
|
return permissions.includes(perm)
|
|
}
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 bottom-0 w-60 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col z-40">
|
|
<div className="h-14 flex items-center px-5 border-b border-slate-200 dark:border-slate-800">
|
|
<span className="text-lg font-semibold text-blue-600 dark:text-blue-400">IT工单跟踪系统</span>
|
|
</div>
|
|
<nav className="flex-1 py-3 px-3 space-y-1 overflow-y-auto">
|
|
{navItems.filter(item => canSee(item.perm)).map((item) => {
|
|
const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
|
|
const Icon = item.icon
|
|
return (<Link key={item.href} href={item.href} className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${isActive ? 'bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800'}`}><Icon size={18} />{item.label}</Link>)
|
|
})}
|
|
{permissions.includes('*') && (
|
|
<Link
|
|
href="/tickets/all"
|
|
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${pathname === '/tickets/all' ? 'bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800'}`}
|
|
>
|
|
<List size={18} />全部工单
|
|
</Link>
|
|
)}
|
|
{hasAnyAdminPerm(permissions) && (
|
|
<div className="pt-3 border-t border-slate-200 dark:border-slate-800 mt-3">
|
|
<div className="flex items-center gap-3 px-3 py-2 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">
|
|
<Settings size={14} />系统设置
|
|
</div>
|
|
{settingsItems.filter(item => canSee(item.perm)).map((item) => {
|
|
const isActive = pathname === item.href
|
|
const Icon = item.icon
|
|
return (<Link key={item.href} href={item.href} className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${isActive ? 'bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800'}`}><Icon size={18} />{item.label}</Link>)
|
|
})}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|