'use client' import Link from 'next/link' import { useState, useEffect } from 'react' import { usePathname, useRouter } from 'next/navigation' import { User, ShoppingCart, Menu, X } from 'lucide-react' interface User { id: string email: string username: string name?: string isAdmin: boolean } export function Navbar() { const [user, setUser] = useState(null) const [isMenuOpen, setIsMenuOpen] = useState(false) const pathname = usePathname() const router = useRouter() useEffect(() => { // 检查用户登录状态 const checkUserStatus = () => { const token = localStorage.getItem('token') if (token) { const userData = localStorage.getItem('user') if (userData) { setUser(JSON.parse(userData)) } } else { setUser(null) } } checkUserStatus() // 监听localStorage变化 const handleStorageChange = (e: StorageEvent) => { if (e.key === 'user' || e.key === 'token') { checkUserStatus() } } // 监听自定义用户更新事件 const handleUserUpdate = () => { checkUserStatus() } window.addEventListener('storage', handleStorageChange) window.addEventListener('user-updated', handleUserUpdate) return () => { window.removeEventListener('storage', handleStorageChange) window.removeEventListener('user-updated', handleUserUpdate) } }, []) const handleLogout = () => { localStorage.removeItem('token') localStorage.removeItem('user') setUser(null) // 触发用户更新事件 window.dispatchEvent(new Event('user-updated')) router.push('/') } // 检查当前路径是否匹配 const isActive = (path: string) => { if (path === '/') { return pathname === '/' } return pathname.startsWith(path) } // 导航链接样式 const getLinkStyle = (path: string) => { return isActive(path) ? 'text-blue-600 font-medium' : 'text-gray-700 hover:text-blue-600' } return ( ) }