78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { LogOut, Settings, User } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import styles from './header.module.css';
|
|
|
|
interface AdminInfo {
|
|
id: number;
|
|
name: string;
|
|
account: string;
|
|
}
|
|
|
|
export function Header() {
|
|
const [adminInfo, setAdminInfo] = useState<AdminInfo | null>(null)
|
|
|
|
useEffect(() => {
|
|
// 从本地存储获取管理员信息
|
|
const info = localStorage.getItem("admin_info")
|
|
if (info) {
|
|
try {
|
|
setAdminInfo(JSON.parse(info))
|
|
} catch (e) {
|
|
console.error("解析管理员信息失败", e)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("admin_token")
|
|
localStorage.removeItem("admin_info")
|
|
window.location.href = "/login"
|
|
}
|
|
|
|
return (
|
|
<header className={`${styles.contentHeader} border-b px-6 flex items-center justify-between bg-background`}>
|
|
<div className="flex-1"></div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-9 w-9 rounded-full p-0 relative">
|
|
<span className="sr-only">用户菜单</span>
|
|
<User className="h-5 w-5" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<div className="px-2 py-1.5 text-sm font-medium">
|
|
{adminInfo?.name || "管理员"}
|
|
</div>
|
|
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
|
{adminInfo?.account || ""}
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<a href="/settings" className="cursor-pointer flex items-center">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
设置
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-600">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|