diff --git a/src/components/Navbars/components/CalendarButton.js b/src/components/Navbars/components/CalendarButton.js index 3184de44..b2e2c056 100644 --- a/src/components/Navbars/components/CalendarButton.js +++ b/src/components/Navbars/components/CalendarButton.js @@ -32,10 +32,14 @@ const CalendarButton = memo(() => { <> + ); +}); + +MySpaceButton.displayName = 'MySpaceButton'; + +export default MySpaceButton; diff --git a/src/components/Navbars/components/Navigation/PersonalCenterMenu.js b/src/components/Navbars/components/Navigation/PersonalCenterMenu.js deleted file mode 100644 index 8817fe0a..00000000 --- a/src/components/Navbars/components/Navigation/PersonalCenterMenu.js +++ /dev/null @@ -1,116 +0,0 @@ -// src/components/Navbars/components/Navigation/PersonalCenterMenu.js -// 个人中心下拉菜单 - 仅桌面版显示 - -import React, { memo } from 'react'; -import { - Menu, - MenuButton, - MenuList, - MenuItem, - MenuDivider, - Button, - Box, - Text, - Badge, - useDisclosure -} from '@chakra-ui/react'; -import { ChevronDown, Home, User, Settings, LogOut, Crown } from 'lucide-react'; -import { useNavigate } from 'react-router-dom'; - -/** - * 个人中心下拉菜单组件 - * 仅在桌面版 (lg+) 显示 - * - * @param {Object} props - * @param {Object} props.user - 用户信息 - * @param {Function} props.handleLogout - 退出登录回调 - */ -const PersonalCenterMenu = memo(({ user, handleLogout }) => { - const navigate = useNavigate(); - - // 🎯 为个人中心菜单创建 useDisclosure Hook - const { isOpen, onOpen, onClose } = useDisclosure(); - - // 获取显示名称 - const getDisplayName = () => { - if (user.nickname) return user.nickname; - if (user.username) return user.username; - if (user.email) return user.email.split('@')[0]; - if (typeof user.phone === 'string' && user.phone) return user.phone; - return '用户'; - }; - - return ( - - } - onMouseEnter={onOpen} - onMouseLeave={onClose} - > - 个人中心 - - - {/* 用户信息区 */} - - {getDisplayName()} - {typeof user.phone === 'string' && user.phone && ( - {user.phone} - )} - {user.has_wechat && ( - 微信已绑定 - )} - - - {/* 前往个人中心 */} - } onClick={() => { - onClose(); // 先关闭菜单 - navigate('/home/center'); - }}> - 前往个人中心 - - - - - {/* 账户管理组 */} - } onClick={() => { - onClose(); // 先关闭菜单 - navigate('/home/profile'); - }}> - 个人资料 - - } onClick={() => { - onClose(); // 先关闭菜单 - navigate('/home/settings'); - }}> - 账户设置 - - - - - {/* 功能入口组 */} - } onClick={() => { - onClose(); // 先关闭菜单 - navigate('/home/pages/account/subscription'); - }}> - 订阅管理 - - - - - {/* 退出 */} - } onClick={handleLogout} color="red.500"> - 退出登录 - - - - ); -}); - -PersonalCenterMenu.displayName = 'PersonalCenterMenu'; - -export default PersonalCenterMenu; diff --git a/src/components/Navbars/components/Navigation/index.js b/src/components/Navbars/components/Navigation/index.js index d9e405d5..98ef4f7a 100644 --- a/src/components/Navbars/components/Navigation/index.js +++ b/src/components/Navbars/components/Navigation/index.js @@ -3,4 +3,5 @@ export { default as DesktopNav } from './DesktopNav'; export { default as MoreMenu } from './MoreMenu'; -export { default as PersonalCenterMenu } from './PersonalCenterMenu'; +export { default as MySpaceButton } from './MySpaceButton'; +// PersonalCenterMenu 已废弃,功能合并到 DesktopUserMenu diff --git a/src/components/Navbars/components/UserMenu/DesktopUserMenu.js b/src/components/Navbars/components/UserMenu/DesktopUserMenu.js index 76340e69..f742dc16 100644 --- a/src/components/Navbars/components/UserMenu/DesktopUserMenu.js +++ b/src/components/Navbars/components/UserMenu/DesktopUserMenu.js @@ -1,71 +1,234 @@ // src/components/Navbars/components/UserMenu/DesktopUserMenu.js -// 桌面版用户菜单 - 头像点击跳转到订阅页面 +// 桌面版用户菜单 - 头像+用户名组合,点击展开综合下拉面板 import React, { memo } from 'react'; import { - Popover, - PopoverTrigger, - PopoverContent, - PopoverArrow, - useColorModeValue + Menu, + MenuButton, + MenuList, + MenuItem, + MenuDivider, + Box, + HStack, + VStack, + Text, + Button, + useDisclosure } from '@chakra-ui/react'; +import { Settings, LogOut } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; import UserAvatar from './UserAvatar'; -import { TooltipContent } from '../../../Subscription/CrownTooltip'; import { useSubscription } from '../../../../hooks/useSubscription'; /** - * 桌面版用户菜单组件 - * 大屏幕 (md+) 显示,头像点击跳转到订阅页面 - * - * @param {Object} props - * @param {Object} props.user - 用户信息 + * 会员权益条组件 + * 金色渐变背景,单行显示会员类型和到期时间 */ -const DesktopUserMenu = memo(({ user }) => { +const MembershipBar = memo(({ subscriptionInfo, onClose }) => { const navigate = useNavigate(); - const { subscriptionInfo } = useSubscription(); + const { type, days_left } = subscriptionInfo; - const popoverBg = useColorModeValue('white', 'gray.800'); - const popoverBorderColor = useColorModeValue('gray.200', 'gray.600'); + const getMemberText = () => { + if (type === 'free') return '基础版'; + if (type === 'pro') return 'Pro会员'; + return 'Max会员'; + }; - const handleAvatarClick = () => { + const getMemberIcon = () => { + if (type === 'free') return '✨'; + if (type === 'pro') return '💎'; + return '👑'; + }; + + const handleClick = () => { + onClose(); navigate('/home/pages/account/subscription'); }; + // 金色渐变背景 + const gradientBg = type === 'free' + ? 'linear(to-r, gray.100, gray.200)' + : 'linear(to-r, #F6E5A3, #D4AF37)'; + return ( - - - + + + {getMemberIcon()} + + {getMemberText()} + {type !== 'free' && ( + + {' '}· {days_left}天后到期 + + )} + + + + + + ); +}); + +MembershipBar.displayName = 'MembershipBar'; + +/** + * 桌面版用户菜单组件 + * 头像+用户名组合(去掉箭头),点击展开综合下拉面板 + * + * 布局: [头像][用户名] + * 交互: hover 时显示浅色圆角背景,点击展开面板 + * + * @param {Object} props + * @param {Object} props.user - 用户信息 + * @param {Function} props.handleLogout - 退出登录回调 + */ +const DesktopUserMenu = memo(({ user, handleLogout }) => { + const navigate = useNavigate(); + const { subscriptionInfo } = useSubscription(); + const { isOpen, onOpen, onClose } = useDisclosure(); + + // 获取显示名称(含手机号脱敏逻辑) + const getDisplayName = () => { + // 1. 优先显示昵称 + if (user.nickname) return user.nickname; + // 2. 其次显示用户名 + if (user.username) return user.username; + // 3. 手机号脱敏 + if (typeof user.phone === 'string' && user.phone) { + return user.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); + } + // 4. 默认显示 + return '股票新用户'; + }; + + // 跳转到我的空间 + const handleNavigateToMySpace = () => { + onClose(); + navigate('/home/center'); + }; + + // 跳转到账户设置 + const handleNavigateToSettings = () => { + onClose(); + navigate('/home/settings'); + }; + + // 退出登录 + const handleLogoutClick = () => { + onClose(); + handleLogout(); + }; + + return ( + + + {/* 使用 HStack 明确实现水平布局 */} + - - - - - - - + + {getDisplayName()} + + + + + + {/* 顶部:用户信息区 - 深色背景 + 头像 + 用户名 */} + + + + + + {getDisplayName()} + + + ID: {user.phone || user.id || '---'} + + + + + + {/* 会员权益条 - 金色渐变背景 */} + + + + + {/* 列表区:快捷功能 */} + } + onClick={handleNavigateToSettings} + py={3} + > + 账户设置 + + + + + {/* 底部:退出登录 */} + } + color="red.500" + onClick={handleLogoutClick} + py={3} + > + 退出登录 + + + ); });