From f304268af97d642b71b3f87302a7b768f843d8ac Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 15 Dec 2025 16:23:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(Navbar):=20=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=A4=B4=E5=83=8F=E6=82=AC=E5=81=9C=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E5=92=8C=E8=AE=A2=E9=98=85=E4=BF=A1=E6=81=AF=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 Tooltip 改为 Popover 组件，支持鼠标悬停到弹出内容上
- 用户现在可以正常悬停到"点击头像管理订阅"提示
- 订阅信息新增到期日期显示，用户无需自己计算到期时间

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/UserMenu/DesktopUserMenu.js    | 59 ++++++++++++-------
 src/components/Subscription/CrownTooltip.js   | 26 +++++++-
 src/views/Profile/ProfilePage.js              |  7 ---
 3 files changed, 62 insertions(+), 30 deletions(-)

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 (
-        <Tooltip
-            label={<TooltipContent subscriptionInfo={subscriptionInfo} />}
-            placement="bottom"
-            hasArrow
-            bg={tooltipBg}
-            borderRadius="lg"
-            border="1px solid"
-            borderColor={tooltipBorderColor}
-            boxShadow="lg"
-            p={3}
+        <Popover
+            trigger="hover"
+            placement="bottom-end"
+            openDelay={100}
+            closeDelay={200}
+            gutter={8}
         >
-            <span>
-                <UserAvatar
-                    user={user}
-                    subscriptionInfo={subscriptionInfo}
-                    onClick={handleAvatarClick}
-                />
-            </span>
-        </Tooltip>
+            <PopoverTrigger>
+                <span>
+                    <UserAvatar
+                        user={user}
+                        subscriptionInfo={subscriptionInfo}
+                        onClick={handleAvatarClick}
+                    />
+                </span>
+            </PopoverTrigger>
+            <PopoverContent
+                bg={popoverBg}
+                borderRadius="lg"
+                border="1px solid"
+                borderColor={popoverBorderColor}
+                boxShadow="lg"
+                p={3}
+                w="auto"
+                _focus={{ outline: 'none' }}
+            >
+                <PopoverArrow bg={popoverBg} />
+                <TooltipContent subscriptionInfo={subscriptionInfo} />
+            </PopoverContent>
+        </Popover>
     );
 });
 
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 }) => {
                             还有 <Text as="span" fontWeight="600" color={isUrgent ? 'red.500' : isWarning ? 'orange.500' : tooltipText}>{days_left}</Text> 天到期
                         </Text>
                     </HStack>
-                    <Text fontSize="xs" color={tooltipText} opacity={0.7} pl={6}>
+                    {formattedEndDate && (
+                        <Text fontSize="xs" color={tooltipText} opacity={0.8} pl={6}>
+                            到期日：<Text as="span" fontWeight="500">{formattedEndDate}</Text>
+                        </Text>
+                    )}
+                    <Text fontSize="xs" color={tooltipText} opacity={0.6} pl={6}>
                         享受全部高级功能
                     </Text>
                 </VStack>
@@ -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() : '未知'}
                                         </Text>
                                     </HStack>
-
-                                    <HStack justify="space-between" w="full">
-                                        <Text fontSize="sm" color="gray.600">账户状态</Text>
-                                        <Badge colorScheme={user?.status === 'active' ? 'green' : 'gray'}>
-                                            {user?.status === 'active' ? '正常' : '未激活'}
-                                        </Badge>
-                                    </HStack>
                                 </VStack>
                             </CardBody>
                         </Card>