's'
This commit is contained in:
eric
344
app/admin/AdminLayoutClient.tsx
Normal file
344
app/admin/AdminLayoutClient.tsx
Normal file
@@ -0,0 +1,344 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user