/** * Phase 1 Header 重构 * 扁平化导航菜单 + 手机端汉堡菜单 * v2: 增加积分徽章、升级会员入口、我的积分入口 */ import React, { useEffect, useState } from "react" import { Avatar, Badge, Button, Dropdown, Drawer, Space, Tooltip } from "antd" import { LogoutOutlined, SettingOutlined, UserOutlined, MenuOutlined, CrownFilled, ThunderboltOutlined, HistoryOutlined, WalletOutlined, } from "@ant-design/icons" import { useLocation, useNavigate } from "react-router-dom" import { useAuthStore } from "@/store/authStore" import { useLogout } from "@/hooks/useAuth" import type { MenuProps } from "antd" import { NAV_ITEMS } from "@/config/navigation" import PointsBadge from "@/components/common/PointsBadge" import { ENABLE_CREDIT_SYSTEM } from "@/config/features" import { usePointsStore } from "@/store/pointsStore" import "./Header.css" const Header: React.FC = () => { const navigate = useNavigate() const location = useLocation() const user = useAuthStore((state) => state.user) const logoutMutation = useLogout() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) // 积分与会员状态 const { balance, init } = usePointsStore() useEffect(() => { init() // 每 60s 刷新一次(余额可能变化) const t = setInterval(() => init(), 60_000) return () => clearInterval(t) }, [init]) const isMember = !!balance?.is_member const memberType = balance?.member_type ?? null /** 用户下拉菜单 */ const menuItems: MenuProps["items"] = [ { key: "profile", icon: , label: "个人设置", onClick: () => navigate("/app/profile"), }, { key: "subscription", icon: , label: "订阅管理", onClick: () => navigate("/app/subscription"), }, // 积分系统开关关闭时隐藏积分相关菜单项(代码保留不删除) ...(ENABLE_CREDIT_SYSTEM ? [ { key: "points-center", icon: , label: ( 我的积分 {balance && ( {balance.balance} )} ), onClick: () => navigate("/app/points"), }, { key: "points-history", icon: , label: "积分明细", onClick: () => navigate("/app/points/transactions"), }, { key: "recharge", icon: , label: "充值积分", onClick: () => navigate("/app/points/recharge"), }, ] : []), { type: "divider" }, { key: "logout", icon: , label: "退出登录", onClick: () => logoutMutation.mutateAsync(), }, ] /** 判断导航项是否激活 */ const isActive = (path: string) => { if (path === "/app/dashboard") { return ( location.pathname === "/" || location.pathname === "/app" || location.pathname === "/app/dashboard" ) } return location.pathname.startsWith(path) } return (
{/* 桌面端导航 */}
{/* v2: 积分徽章(顶部显示) */} {/* v2: 升级会员入口(仅免费用户显示) */} {!isMember && ( )} {/* v2: 付费会员显示金冠标识 */} {isMember && ( )} {/* 手机端汉堡菜单按钮 */} } /> {user?.display_name || user?.username || "小虾用户"}
{/* 手机端侧边抽屉导航 */} setMobileMenuOpen(false)} open={mobileMenuOpen} width={260} className="xx-mobile-drawer" > {/* 手机端积分/会员入口 */} {balance && (
{!isMember ? ( ) : ( {" "} {memberType === "yearly" ? "年卡" : memberType === "quarterly" ? "季卡" : "月卡"} )}
)}
{NAV_ITEMS.map((item) => ( ))}
) } export default Header