diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js index 05f07933..5fda71d9 100644 --- a/src/components/Navbars/HomeNavbar.js +++ b/src/components/Navbars/HomeNavbar.js @@ -44,7 +44,7 @@ import { useSubscription } from '../../hooks/useSubscription'; import { DesktopUserMenu, TabletUserMenu } from './components/UserMenu'; // Phase 4 优化: 提取的导航菜单组件 -import { DesktopNav, PersonalCenterMenu } from './components/Navigation'; +import { DesktopNav, MoreMenu, PersonalCenterMenu } from './components/Navigation'; // Phase 5 优化: 提取的移动端抽屉菜单组件 import { MobileDrawer } from './components/MobileDrawer'; @@ -67,6 +67,7 @@ export default function HomeNavbar() { const { isOpen, onOpen, onClose } = useDisclosure(); const navigate = useNavigate(); const isMobile = useBreakpointValue({ base: true, md: false }); + const isTablet = useBreakpointValue({ base: false, md: true, lg: false }); const isDesktop = useBreakpointValue({ base: false, md: false, lg: true }); const { user, isAuthenticated, logout, isLoading } = useAuth(); const { openAuthModal } = useAuthModal(); @@ -177,6 +178,8 @@ export default function HomeNavbar() { isAuthenticated={isAuthenticated} user={user} isDesktop={isDesktop} + isTablet={isTablet} + isMobile={isMobile} onMenuOpen={onOpen} handleLogout={handleLogout} watchlistQuotes={watchlistQuotes} diff --git a/src/components/Navbars/components/NavbarActions/index.js b/src/components/Navbars/components/NavbarActions/index.js index 7ca5b3c0..1680ea64 100644 --- a/src/components/Navbars/components/NavbarActions/index.js +++ b/src/components/Navbars/components/NavbarActions/index.js @@ -2,14 +2,14 @@ // Navbar 右侧功能区组件 import React, { memo } from 'react'; -import { HStack, Spinner, IconButton } from '@chakra-ui/react'; +import { HStack, Spinner, IconButton, Box } from '@chakra-ui/react'; import { HamburgerIcon } from '@chakra-ui/icons'; import ThemeToggleButton from '../ThemeToggleButton'; import LoginButton from '../LoginButton'; import CalendarButton from '../CalendarButton'; import { WatchlistMenu, FollowingEventsMenu } from '../FeatureMenus'; import { DesktopUserMenu, TabletUserMenu } from '../UserMenu'; -import { PersonalCenterMenu } from '../Navigation'; +import { PersonalCenterMenu, MoreMenu } from '../Navigation'; /** * Navbar 右侧功能区组件 @@ -20,8 +20,9 @@ import { PersonalCenterMenu } from '../Navigation'; * @param {boolean} props.isAuthenticated - 是否已登录 * @param {Object} props.user - 用户对象 * @param {boolean} props.isDesktop - 是否为桌面端 + * @param {boolean} props.isTablet - 是否为平板端 * @param {boolean} props.isMobile - 是否为移动端 - * @param {Function} props.onMenuOpen - 打开移动端菜单的回调 + * @param {Function} props.onMenuOpen - 打开移动端抽屉菜单的回调 * @param {Function} props.handleLogout - 登出回调 * @param {Array} props.watchlistQuotes - 自选股数据(用于 TabletUserMenu) * @param {Array} props.followingEvents - 关注事件数据(用于 TabletUserMenu) @@ -31,6 +32,7 @@ const NavbarActions = memo(({ isAuthenticated, user, isDesktop, + isTablet, isMobile, onMenuOpen, handleLogout, @@ -69,8 +71,15 @@ const NavbarActions = memo(({ /> )} - {/* 移动端汉堡菜单 - 在头像右侧 */} - {isMobile && ( + {/* 头像右侧的菜单 - 响应式(互斥逻辑,确保只渲染一个) */} + {isDesktop ? ( + // 桌面端:个人中心下拉菜单 + + ) : isTablet ? ( + // 平板端:MoreMenu 下拉菜单 + + ) : ( + // 移动端:汉堡菜单(打开抽屉) } variant="ghost" @@ -79,28 +88,10 @@ const NavbarActions = memo(({ size="md" /> )} - - {/* 个人中心下拉菜单 - 仅大屏显示 */} - {isDesktop && ( - - )} ) : ( - // 未登录状态 - 登录按钮 + 汉堡菜单 - - - - {/* 移动端汉堡菜单 - 未登录时也显示 */} - {isMobile && ( - } - variant="ghost" - onClick={onMenuOpen} - aria-label="打开菜单" - size="md" - /> - )} - + // 未登录状态 - 仅显示登录按钮 + )} );