diff --git a/src/components/Navbars/components/UserMenu/DesktopUserMenu.js b/src/components/Navbars/components/UserMenu/DesktopUserMenu.js index a7520992..9a45bffb 100644 --- a/src/components/Navbars/components/UserMenu/DesktopUserMenu.js +++ b/src/components/Navbars/components/UserMenu/DesktopUserMenu.js @@ -2,7 +2,13 @@ // 桌面版用户菜单 - 头像点击跳转到订阅页面 import React, { memo } from 'react'; -import { Tooltip, useColorModeValue } from '@chakra-ui/react'; +import { + Popover, + PopoverTrigger, + PopoverContent, + PopoverArrow, + useColorModeValue +} from '@chakra-ui/react'; import { useNavigate } from 'react-router-dom'; import UserAvatar from './UserAvatar'; import { TooltipContent } from '../../../Subscription/CrownTooltip'; @@ -19,33 +25,44 @@ const DesktopUserMenu = memo(({ user }) => { const navigate = useNavigate(); const { subscriptionInfo } = useSubscription(); - const tooltipBg = useColorModeValue('white', 'gray.800'); - const tooltipBorderColor = useColorModeValue('gray.200', 'gray.600'); + const popoverBg = useColorModeValue('white', 'gray.800'); + const popoverBorderColor = useColorModeValue('gray.200', 'gray.600'); const handleAvatarClick = () => { navigate('/home/pages/account/subscription'); }; return ( - } - placement="bottom" - hasArrow - bg={tooltipBg} - borderRadius="lg" - border="1px solid" - borderColor={tooltipBorderColor} - boxShadow="lg" - p={3} + - - - - + + + + + + + + + + ); }); diff --git a/src/components/Subscription/CrownTooltip.js b/src/components/Subscription/CrownTooltip.js index 0eb40950..91ec6104 100644 --- a/src/components/Subscription/CrownTooltip.js +++ b/src/components/Subscription/CrownTooltip.js @@ -17,7 +17,23 @@ import PropTypes from 'prop-types'; export const TooltipContent = ({ subscriptionInfo }) => { const tooltipText = useColorModeValue('gray.700', 'gray.100'); const dividerColor = useColorModeValue('gray.200', 'gray.600'); - const { type, days_left, is_active } = subscriptionInfo; + const { type, days_left, is_active, end_date } = subscriptionInfo; + + // 格式化到期日期 + const formatEndDate = (dateStr) => { + if (!dateStr) return null; + try { + const date = new Date(dateStr); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + } catch { + return null; + } + }; + + const formattedEndDate = formatEndDate(end_date); // 基础版用户 if (type === 'free') { @@ -72,7 +88,12 @@ export const TooltipContent = ({ subscriptionInfo }) => { 还有 {days_left} 天到期 - + {formattedEndDate && ( + + 到期日:{formattedEndDate} + + )} + 享受全部高级功能 @@ -133,5 +154,6 @@ TooltipContent.propTypes = { type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired, days_left: PropTypes.number, is_active: PropTypes.bool, + end_date: PropTypes.string, }).isRequired, }; diff --git a/src/views/Profile/ProfilePage.js b/src/views/Profile/ProfilePage.js index 4df65e45..9ac63fc2 100644 --- a/src/views/Profile/ProfilePage.js +++ b/src/views/Profile/ProfilePage.js @@ -620,13 +620,6 @@ export default function ProfilePage() { {user?.last_seen ? new Date(user.last_seen).toLocaleDateString() : '未知'} - - - 账户状态 - - {user?.status === 'active' ? '正常' : '未激活'} - -