fix(Navbar): 优化用户头像悬停交互和订阅信息显示

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

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

Co-Authored-By: Claude <noreply@anthropic.com>

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>
     );
 });