102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { LayoutDashboard, Users, Settings, LogOut, Menu, X } from "lucide-react"
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
|
const pathname = usePathname()
|
|
|
|
const navItems = [
|
|
{
|
|
title: "项目管理",
|
|
href: "/dashboard/projects",
|
|
icon: <LayoutDashboard className="h-5 w-5" />,
|
|
},
|
|
{
|
|
title: "客户池",
|
|
href: "/dashboard/customers",
|
|
icon: <Users className="h-5 w-5" />,
|
|
},
|
|
{
|
|
title: "管理员权限",
|
|
href: "/dashboard/admins",
|
|
icon: <Settings className="h-5 w-5" />,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Mobile sidebar toggle */}
|
|
<div className="fixed top-4 left-4 z-50 md:hidden">
|
|
<Button variant="outline" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
|
|
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={`bg-primary text-primary-foreground w-64 flex-shrink-0 transition-all duration-300 ease-in-out ${
|
|
sidebarOpen ? "translate-x-0" : "-translate-x-full"
|
|
} md:translate-x-0 fixed md:relative z-40 h-full`}
|
|
>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-center h-16 border-b border-primary/10">
|
|
<h1 className="text-xl font-bold">超级管理员后台</h1>
|
|
</div>
|
|
<nav className="flex-1 overflow-y-auto py-4">
|
|
<ul className="space-y-1 px-2">
|
|
{navItems.map((item) => (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-primary-foreground hover:text-primary ${
|
|
pathname.startsWith(item.href) ? "bg-primary-foreground text-primary" : ""
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<div className="border-t border-primary/10 p-4">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 bg-transparent text-primary-foreground hover:bg-primary-foreground hover:text-primary"
|
|
onClick={() => {
|
|
// Handle logout
|
|
window.location.href = "/login"
|
|
}}
|
|
>
|
|
<LogOut className="h-5 w-5" />
|
|
退出登录
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<header className="h-16 border-b flex items-center px-6 bg-background">
|
|
<h2 className="text-lg font-medium">
|
|
{navItems.find((item) => pathname.startsWith(item.href))?.title || "仪表盘"}
|
|
</h2>
|
|
</header>
|
|
<main className="p-6">{children}</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|