update pay ui

src/components/Navbars/HomeNavbar.js

@@ -37,9 +37,6 @@ import BrandLogo from './components/BrandLogo';
 import LoginButton from './components/LoginButton';
 import CalendarButton from './components/CalendarButton';
 
-// Phase 2 优化: 使用 Redux 管理订阅数据
-import { useSubscription } from '../../hooks/useSubscription';
-
 // Phase 3 优化: 提取的用户菜单组件
 import { DesktopUserMenu, TabletUserMenu } from './components/UserMenu';
 
@@ -125,13 +122,7 @@ export default function HomeNavbar() {
         }
     };
 
-    // Phase 2: 使用 Redux 订阅数据
-    const {
-        subscriptionInfo,
-        isSubscriptionModalOpen,
-        openSubscriptionModal,
-        closeSubscriptionModal
-    } = useSubscription();
+    // Phase 2: 订阅数据管理已移至 UserMenu 子组件内部
 
     // Phase 6: loadWatchlistQuotes, loadFollowingEvents, handleRemoveFromWatchlist,
     // handleUnfollowEvent 已移至自定义 Hooks 中，由各自组件内部管理

src/components/Navbars/components/UserMenu/DesktopUserMenu.js

@@ -1,61 +1,51 @@
 // src/components/Navbars/components/UserMenu/DesktopUserMenu.js
-// 桌面版用户菜单 - 头像 + Tooltip + 订阅弹窗
+// 桌面版用户菜单 - 头像点击跳转到订阅页面
 
 import React, { memo } from 'react';
 import { Tooltip, useColorModeValue } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
 import UserAvatar from './UserAvatar';
-import SubscriptionModal from '../../../Subscription/SubscriptionModal';
 import { TooltipContent } from '../../../Subscription/CrownTooltip';
 import { useSubscription } from '../../../../hooks/useSubscription';
 
 /**
  * 桌面版用户菜单组件
- * 大屏幕 (md+) 显示，头像点击打开订阅弹窗
+ * 大屏幕 (md+) 显示，头像点击跳转到订阅页面
  *
  * @param {Object} props
  * @param {Object} props.user - 用户信息
  */
 const DesktopUserMenu = memo(({ user }) => {
-    const {
-        subscriptionInfo,
-        isSubscriptionModalOpen,
-        openSubscriptionModal,
-        closeSubscriptionModal
-    } = useSubscription();
+    const navigate = useNavigate();
+    const { subscriptionInfo } = useSubscription();
 
     const tooltipBg = useColorModeValue('white', 'gray.800');
     const tooltipBorderColor = useColorModeValue('gray.200', 'gray.600');
 
-    return (
-        <>
-            <Tooltip
-                label={<TooltipContent subscriptionInfo={subscriptionInfo} />}
-                placement="bottom"
-                hasArrow
-                bg={tooltipBg}
-                borderRadius="lg"
-                border="1px solid"
-                borderColor={tooltipBorderColor}
-                boxShadow="lg"
-                p={3}
-            >
-                <span>
-                    <UserAvatar
-                        user={user}
-                        subscriptionInfo={subscriptionInfo}
-                        onClick={openSubscriptionModal}
-                    />
-                </span>
-            </Tooltip>
+    const handleAvatarClick = () => {
+        navigate('/home/pages/account/subscription');
+    };
 
-            {isSubscriptionModalOpen && (
-                <SubscriptionModal
-                    isOpen={isSubscriptionModalOpen}
-                    onClose={closeSubscriptionModal}
+    return (
+        <Tooltip
+            label={<TooltipContent subscriptionInfo={subscriptionInfo} />}
+            placement="bottom"
+            hasArrow
+            bg={tooltipBg}
+            borderRadius="lg"
+            border="1px solid"
+            borderColor={tooltipBorderColor}
+            boxShadow="lg"
+            p={3}
+        >
+            <span>
+                <UserAvatar
+                    user={user}
                     subscriptionInfo={subscriptionInfo}
+                    onClick={handleAvatarClick}
                 />
-            )}
-        </>
+            </span>
+        </Tooltip>
     );
 });