89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { ChevronDown, Users, MessageSquare } from "lucide-react"
|
|
|
|
export default function AdminSidebar() {
|
|
const pathname = usePathname()
|
|
const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({
|
|
账号管理: true,
|
|
})
|
|
|
|
const toggleExpand = (key: string) => {
|
|
setExpandedItems((prev) => ({
|
|
...prev,
|
|
[key]: !prev[key],
|
|
}))
|
|
}
|
|
|
|
const isActive = (path: string) => pathname === path
|
|
|
|
return (
|
|
<div className="w-64 bg-white border-r flex flex-col h-full">
|
|
<div className="p-4 border-b">
|
|
<h2 className="text-lg font-semibold">存客宝管理系统</h2>
|
|
</div>
|
|
<nav className="flex-1 overflow-y-auto p-2">
|
|
<ul className="space-y-1">
|
|
{/* 账号管理 */}
|
|
<li>
|
|
<button
|
|
className="flex items-center justify-between w-full p-3 rounded-md hover:bg-gray-100"
|
|
onClick={() => toggleExpand("账号管理")}
|
|
>
|
|
<div className="flex items-center">
|
|
<Users className="h-5 w-5 mr-3" />
|
|
<span>账号管理</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={`h-4 w-4 transition-transform ${expandedItems["账号管理"] ? "transform rotate-180" : ""}`}
|
|
/>
|
|
</button>
|
|
{expandedItems["账号管理"] && (
|
|
<ul className="pl-10 space-y-1 mt-1">
|
|
<li>
|
|
<Link
|
|
href="/admin/accounts/operators"
|
|
className={`block p-2 rounded-md ${
|
|
isActive("/admin/accounts/operators") ? "bg-blue-50 text-blue-600" : "hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
操盘手账号管理
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/admin/accounts/mobile"
|
|
className={`block p-2 rounded-md ${
|
|
isActive("/admin/accounts/mobile") ? "bg-blue-50 text-blue-600" : "hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
手机端账号管理
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
)}
|
|
</li>
|
|
|
|
{/* 聚合聊天 */}
|
|
<li>
|
|
<Link
|
|
href="/admin/chat"
|
|
className={`flex items-center p-3 rounded-md ${
|
|
isActive("/admin/chat") ? "bg-blue-50 text-blue-600" : "hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
<MessageSquare className="h-5 w-5 mr-3" />
|
|
<span>聚合聊天</span>
|
|
</Link>
|
|
</li>
|
|
|
|
{/* 其他菜单项可以在这里添加 */}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|