zetaloop
342 lines
13 KiB
TypeScript
342 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Bell,
|
|
Gamepad2,
|
|
LogOut,
|
|
Menu,
|
|
MessageSquare,
|
|
Search,
|
|
Settings,
|
|
ShoppingBag,
|
|
User,
|
|
Wallet,
|
|
} from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname, useRouter } from "next/navigation"
|
|
import { useState } from "react"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
|
|
import { currentUser, mockNotifications, mockShops } from "@/lib/mock"
|
|
import type { UserRole } from "@/lib/types"
|
|
import { cn } from "@/lib/utils"
|
|
import { useAuthStore } from "@/store/auth"
|
|
|
|
const roleLabels: Record<UserRole, string> = {
|
|
consumer: "消费者",
|
|
player: "打手",
|
|
owner: "店主",
|
|
}
|
|
|
|
export function Header() {
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const { isAuthenticated, currentRole, verifiedRoles, switchRole, logout } = useAuthStore()
|
|
|
|
const navLinks =
|
|
currentRole === "consumer"
|
|
? [
|
|
{ href: "/", label: "首页" },
|
|
{ href: "/search", label: "找陪玩" },
|
|
{ href: "/community", label: "社区" },
|
|
{ href: "/chat", label: "消息" },
|
|
]
|
|
: [
|
|
{ href: "/", label: "首页" },
|
|
{ href: "/community", label: "社区" },
|
|
{ href: "/orders", label: "订单" },
|
|
{ href: "/chat", label: "消息" },
|
|
{ href: "/dashboard", label: "管理后台" },
|
|
]
|
|
|
|
const availableRoles = (Object.entries(roleLabels) as [UserRole, string][]).filter(([role]) =>
|
|
verifiedRoles.includes(role),
|
|
)
|
|
|
|
const handleRoleSwitch = (role: UserRole) => {
|
|
switchRole(role)
|
|
router.push(role === "consumer" ? "/" : "/dashboard")
|
|
setMobileOpen(false)
|
|
}
|
|
|
|
const unreadCount = mockNotifications.filter((n) => !n.read).length
|
|
|
|
const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
const formData = new FormData(e.currentTarget)
|
|
const q = formData.get("q") as string
|
|
if (q.trim()) router.push(`/search?q=${encodeURIComponent(q.trim())}`)
|
|
}
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto flex h-14 items-center gap-4 px-4">
|
|
<Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0">
|
|
<Gamepad2 className="h-5 w-5" />
|
|
聚玩
|
|
</Link>
|
|
|
|
<nav className="hidden md:flex items-center gap-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={cn(
|
|
"px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
|
pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
|
|
? "bg-accent text-accent-foreground"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<form onSubmit={handleSearch} className="hidden md:flex flex-1 max-w-sm">
|
|
<div className="relative w-full">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input name="q" placeholder="搜索打手、店铺..." className="pl-8 h-9" />
|
|
</div>
|
|
</form>
|
|
|
|
<div className="flex flex-1 md:flex-none items-center justify-end gap-1">
|
|
{isAuthenticated ? (
|
|
<>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" className="hidden md:flex text-xs h-8">
|
|
{roleLabels[currentRole]}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>切换身份</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{availableRoles.map(([role, label]) => (
|
|
<DropdownMenuItem
|
|
key={role}
|
|
onClick={() => handleRoleSwitch(role)}
|
|
className={cn(currentRole === role && "bg-accent")}
|
|
>
|
|
{label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Button variant="ghost" size="icon" className="relative h-9 w-9" asChild>
|
|
<Link href="/notifications">
|
|
<Bell className="h-4 w-4" />
|
|
{unreadCount > 0 && (
|
|
<Badge className="absolute -top-1 -right-1 h-4 min-w-4 px-1 flex items-center justify-center text-[10px]">
|
|
{unreadCount}
|
|
</Badge>
|
|
)}
|
|
</Link>
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="rounded-full h-9 w-9">
|
|
<Avatar className="h-7 w-7">
|
|
<AvatarImage src={currentUser.avatar} />
|
|
<AvatarFallback>{currentUser.nickname[0]}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuLabel>{currentUser.nickname}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href={
|
|
currentRole === "player"
|
|
? `/player/${currentUser.id}`
|
|
: currentRole === "owner"
|
|
? `/shop/${mockShops.find((s) => s.owner.id === currentUser.id)?.id ?? "shop1"}`
|
|
: `/user/${currentUser.id}`
|
|
}
|
|
>
|
|
<User className="mr-2 h-4 w-4" />
|
|
个人主页
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/orders">
|
|
<ShoppingBag className="mr-2 h-4 w-4" />
|
|
我的订单
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/chat">
|
|
<MessageSquare className="mr-2 h-4 w-4" />
|
|
消息
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/wallet">
|
|
<Wallet className="mr-2 h-4 w-4" />
|
|
钱包
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{(currentRole === "player" || currentRole === "owner") && (
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard">
|
|
<Gamepad2 className="mr-2 h-4 w-4" />
|
|
管理后台
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/settings">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
设置
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={logout}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
) : (
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/login">登录</Link>
|
|
</Button>
|
|
<Button size="sm" asChild>
|
|
<Link href="/register">注册</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="md:hidden h-9 w-9">
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-72">
|
|
<SheetHeader>
|
|
<SheetTitle className="flex items-center gap-2">
|
|
<Gamepad2 className="h-5 w-5" />
|
|
聚玩
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="mt-4 space-y-4">
|
|
<form onSubmit={handleSearch}>
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input name="q" placeholder="搜索打手、店铺..." className="pl-8" />
|
|
</div>
|
|
</form>
|
|
|
|
{isAuthenticated && (
|
|
<div className="flex items-center gap-2 px-1">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={currentUser.avatar} />
|
|
<AvatarFallback>{currentUser.nickname[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{currentUser.nickname}</p>
|
|
<p className="text-xs text-muted-foreground">{roleLabels[currentRole]}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<nav className="flex flex-col gap-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setMobileOpen(false)}
|
|
className={cn(
|
|
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
|
pathname === link.href ||
|
|
(link.href !== "/" && pathname.startsWith(link.href))
|
|
? "bg-accent text-accent-foreground"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
{isAuthenticated && (
|
|
<>
|
|
<Link
|
|
href="/wallet"
|
|
onClick={() => setMobileOpen(false)}
|
|
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
|
>
|
|
钱包
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
onClick={() => setMobileOpen(false)}
|
|
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
|
>
|
|
设置
|
|
</Link>
|
|
</>
|
|
)}
|
|
</nav>
|
|
|
|
{isAuthenticated && (
|
|
<div className="border-t pt-4">
|
|
<p className="px-3 text-xs text-muted-foreground mb-2">切换身份</p>
|
|
<div className="flex gap-1 px-3">
|
|
{availableRoles.map(([role, label]) => (
|
|
<Button
|
|
key={role}
|
|
variant={currentRole === role ? "default" : "outline"}
|
|
size="sm"
|
|
className="text-xs flex-1"
|
|
onClick={() => handleRoleSwitch(role)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!isAuthenticated && (
|
|
<div className="border-t pt-4 flex gap-2 px-3">
|
|
<Button variant="outline" className="flex-1" asChild>
|
|
<Link href="/login" onClick={() => setMobileOpen(false)}>
|
|
登录
|
|
</Link>
|
|
</Button>
|
|
<Button className="flex-1" asChild>
|
|
<Link href="/register" onClick={() => setMobileOpen(false)}>
|
|
注册
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|