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' ? '正常' : '未激活'}
-
-