344 lines
13 KiB
TypeScript
344 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { usePathname } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { signOut } from 'next-auth/react'
|
|
import { Button } from "@/registry/new-york/ui/button"
|
|
import { Separator } from "@/registry/new-york/ui/separator"
|
|
import {
|
|
LayoutDashboard,
|
|
ListTodo,
|
|
Settings,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
LogOut,
|
|
Home,
|
|
Moon,
|
|
Sun,
|
|
Monitor,
|
|
Database,
|
|
} from "lucide-react"
|
|
import { cn } from '@/lib/utils'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
} from "@/registry/new-york/ui/dropdown-menu"
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@/registry/new-york/ui/avatar"
|
|
import { useTheme } from "next-themes"
|
|
|
|
interface AdminLayoutClientProps {
|
|
children: React.ReactNode
|
|
user: any
|
|
}
|
|
|
|
const menuItems = [
|
|
{
|
|
title: "仪表盘",
|
|
href: "/admin",
|
|
icon: LayoutDashboard
|
|
},
|
|
{
|
|
title: "导航管理",
|
|
href: "/admin/navigation",
|
|
icon: ListTodo,
|
|
subItems: [
|
|
{
|
|
title: "分类管理",
|
|
href: "/admin/navigation"
|
|
},
|
|
{
|
|
title: "站点管理",
|
|
href: "/admin/sitelist"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "资源管理",
|
|
href: "/admin/resources",
|
|
icon: Settings,
|
|
subItems: [
|
|
{
|
|
title: "资源管理",
|
|
href: "/admin/resources"
|
|
},{
|
|
title: "网站图标下载",
|
|
href: "/admin/resources/download"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "数据管理",
|
|
href: "/admin/data",
|
|
icon: Database
|
|
},
|
|
{
|
|
title: "站点设置",
|
|
href: "/admin/site",
|
|
icon: Settings,
|
|
onClick: undefined
|
|
}
|
|
]
|
|
|
|
export function AdminLayoutClient({ children, user }: AdminLayoutClientProps) {
|
|
const pathname = usePathname()
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
|
|
const [expandedItems, setExpandedItems] = useState<string[]>([])
|
|
const { setTheme } = useTheme()
|
|
|
|
const toggleMenuItem = (href: string) => {
|
|
setExpandedItems(prev =>
|
|
prev.includes(href)
|
|
? prev.filter(item => item !== href)
|
|
: [...prev, href]
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="hidden md:block h-screen">
|
|
<div className="h-full border-t">
|
|
<div className="h-full bg-background">
|
|
<div className={cn(
|
|
"h-full grid transition-all duration-300",
|
|
isSidebarCollapsed ? "lg:grid-cols-[80px_minmax(0,1fr)]" : "lg:grid-cols-[240px_minmax(0,1fr)]"
|
|
)}>
|
|
<div className="relative hidden lg:block">
|
|
<div className={cn(
|
|
"fixed top-0 bottom-0 z-20 flex flex-col bg-background border-r shadow-sm",
|
|
isSidebarCollapsed ? "w-[80px]" : "w-[240px]"
|
|
)}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute -right-3 top-[60px] z-50 border shadow-sm bg-background rounded-full hover:bg-muted w-6 h-6"
|
|
onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
|
|
>
|
|
{isSidebarCollapsed ? (
|
|
<ChevronRight className="h-3.5 w-3.5" />
|
|
) : (
|
|
<ChevronLeft className="h-3.5 w-3.5" />
|
|
)}
|
|
</Button>
|
|
|
|
<div className="flex flex-col flex-1">
|
|
<div className="px-3 py-4">
|
|
<div className="mb-4">
|
|
<Link
|
|
href="/admin"
|
|
className={cn(
|
|
"flex items-center",
|
|
isSidebarCollapsed ? "justify-center" : "px-2"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"flex items-center gap-2",
|
|
isSidebarCollapsed && "flex-col"
|
|
)}>
|
|
<div className="relative w-8 h-8 overflow-hidden rounded-md">
|
|
<img
|
|
src="/assets/images/alogo.png"
|
|
alt="Logo"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
{!isSidebarCollapsed && (
|
|
<div className="flex flex-col">
|
|
<span className="text-lg font-semibold leading-none tracking-tight">
|
|
NavSphere
|
|
</span>
|
|
<span className="text-xs text-muted-foreground mt-1">
|
|
管理控制台
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<Separator className="mb-4" />
|
|
|
|
<div className="px-3 flex-1">
|
|
{!isSidebarCollapsed && (
|
|
<h2 className="mb-3 px-2 text-lg font-semibold tracking-tight">
|
|
管理菜单
|
|
</h2>
|
|
)}
|
|
<nav className="grid gap-[2px]">
|
|
{menuItems.map((item) => (
|
|
<div key={item.href}>
|
|
<Button
|
|
variant="ghost"
|
|
className={cn(
|
|
"w-full justify-start",
|
|
pathname === item.href && "bg-muted"
|
|
)}
|
|
onClick={() => item.subItems && toggleMenuItem(item.href)}
|
|
asChild={!item.subItems}
|
|
>
|
|
{!item.subItems ? (
|
|
<Link href={item.href}>
|
|
<item.icon className="mr-2 h-4 w-4" />
|
|
{!isSidebarCollapsed && <span>{item.title}</span>}
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<item.icon className="mr-2 h-4 w-4" />
|
|
{!isSidebarCollapsed && (
|
|
<>
|
|
<span>{item.title}</span>
|
|
<ChevronDown
|
|
className={cn(
|
|
"ml-auto h-4 w-4 transition-transform",
|
|
expandedItems.includes(item.href) && "rotate-180"
|
|
)}
|
|
/>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</Button>
|
|
{item.subItems && expandedItems.includes(item.href) && !isSidebarCollapsed && (
|
|
<div className="ml-4 mt-1 space-y-1">
|
|
{item.subItems.map((subItem) => (
|
|
<Button
|
|
key={subItem.href}
|
|
variant="ghost"
|
|
className={cn(
|
|
"w-full justify-start pl-6",
|
|
pathname === subItem.href && "bg-muted"
|
|
)}
|
|
asChild
|
|
>
|
|
<Link href={subItem.href}>
|
|
{subItem.title}
|
|
</Link>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className={cn(
|
|
"w-full h-auto p-2",
|
|
"hover:bg-muted transition-colors",
|
|
isSidebarCollapsed ? "justify-center" : "justify-start"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3 w-full">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage
|
|
src={user.image || ''}
|
|
alt={user.name || ''}
|
|
/>
|
|
<AvatarFallback>
|
|
{user.name?.charAt(0).toUpperCase() || 'U'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
{!isSidebarCollapsed && (
|
|
<div className="flex items-center flex-1 min-w-0">
|
|
<span className="text-sm font-medium leading-none truncate">
|
|
{user.name}
|
|
</span>
|
|
<div className="flex flex-col gap-[3px] ml-auto pl-4">
|
|
<div className="h-[3px] w-[2px] rounded-full bg-muted-foreground/40" />
|
|
<div className="h-[3px] w-[2px] rounded-full bg-muted-foreground/40" />
|
|
<div className="h-[3px] w-[2px] rounded-full bg-muted-foreground/40" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-56"
|
|
align={isSidebarCollapsed ? "center" : "start"}
|
|
side="top"
|
|
>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{user.name}
|
|
</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{user.email}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href="/"
|
|
className="cursor-pointer"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Home className="mr-2 h-4 w-4" />
|
|
前台首页
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<Sun className="h-4 w-4 mr-2 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-4 w-4 mr-2 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span className="ml-2">主题</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem onClick={() => setTheme("light")}>
|
|
<Sun className="h-4 w-4 mr-2" />
|
|
浅色
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
|
<Moon className="h-4 w-4 mr-2" />
|
|
深色
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme("system")}>
|
|
<Monitor className="h-4 w-4 mr-2" />
|
|
跟随系统
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className="cursor-pointer flex items-center text-red-600 focus:text-red-600 focus:bg-red-100"
|
|
onClick={() => signOut({ callbackUrl: '/' })}
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<main className="relative lg:pl-[80px] xl:pl-0 h-full">
|
|
<div className="h-full overflow-auto">
|
|
<div className="p-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|