fix:优化h5/菜单UI

This commit is contained in:
zdl
2025-11-21 13:55:06 +08:00
parent a1c1a36f6a
commit 796c623197
2 changed files with 42 additions and 17 deletions

View File

@@ -167,20 +167,14 @@ export default function HomeNavbar() {
<BrandLogo /> <BrandLogo />
{/* 中间导航区域 - 响应式 (Phase 4 优化) */} {/* 中间导航区域 - 响应式 (Phase 4 优化) */}
{isMobile ? ( {!isMobile && (
// 移动端:汉堡菜单 isTablet ? (
<IconButton
icon={<HamburgerIcon />}
variant="ghost"
onClick={onOpen}
aria-label="Open menu"
/>
) : isTablet ? (
// 中屏(平板):"更多"下拉菜单 // 中屏(平板):"更多"下拉菜单
<MoreMenu isAuthenticated={isAuthenticated} user={user} /> <MoreMenu isAuthenticated={isAuthenticated} user={user} />
) : ( ) : (
// 大屏(桌面):完整导航菜单 // 大屏(桌面):完整导航菜单
<DesktopNav isAuthenticated={isAuthenticated} user={user} /> <DesktopNav isAuthenticated={isAuthenticated} user={user} />
)
)} )}
{/* 右侧功能区 (Phase 7 优化) */} {/* 右侧功能区 (Phase 7 优化) */}
@@ -189,6 +183,8 @@ export default function HomeNavbar() {
isAuthenticated={isAuthenticated} isAuthenticated={isAuthenticated}
user={user} user={user}
isDesktop={isDesktop} isDesktop={isDesktop}
isMobile={isMobile}
onMenuOpen={onOpen}
handleLogout={handleLogout} handleLogout={handleLogout}
watchlistQuotes={watchlistQuotes} watchlistQuotes={watchlistQuotes}
followingEvents={followingEvents} followingEvents={followingEvents}

View File

@@ -2,7 +2,8 @@
// Navbar 右侧功能区组件 // Navbar 右侧功能区组件
import React, { memo } from 'react'; import React, { memo } from 'react';
import { HStack, Spinner } from '@chakra-ui/react'; import { HStack, Spinner, IconButton } from '@chakra-ui/react';
import { HamburgerIcon } from '@chakra-ui/icons';
import ThemeToggleButton from '../ThemeToggleButton'; import ThemeToggleButton from '../ThemeToggleButton';
import LoginButton from '../LoginButton'; import LoginButton from '../LoginButton';
import CalendarButton from '../CalendarButton'; import CalendarButton from '../CalendarButton';
@@ -19,6 +20,8 @@ import { PersonalCenterMenu } from '../Navigation';
* @param {boolean} props.isAuthenticated - 是否已登录 * @param {boolean} props.isAuthenticated - 是否已登录
* @param {Object} props.user - 用户对象 * @param {Object} props.user - 用户对象
* @param {boolean} props.isDesktop - 是否为桌面端 * @param {boolean} props.isDesktop - 是否为桌面端
* @param {boolean} props.isMobile - 是否为移动端
* @param {Function} props.onMenuOpen - 打开移动端菜单的回调
* @param {Function} props.handleLogout - 登出回调 * @param {Function} props.handleLogout - 登出回调
* @param {Array} props.watchlistQuotes - 自选股数据(用于 TabletUserMenu * @param {Array} props.watchlistQuotes - 自选股数据(用于 TabletUserMenu
* @param {Array} props.followingEvents - 关注事件数据(用于 TabletUserMenu * @param {Array} props.followingEvents - 关注事件数据(用于 TabletUserMenu
@@ -28,6 +31,8 @@ const NavbarActions = memo(({
isAuthenticated, isAuthenticated,
user, user,
isDesktop, isDesktop,
isMobile,
onMenuOpen,
handleLogout, handleLogout,
watchlistQuotes, watchlistQuotes,
followingEvents followingEvents
@@ -64,14 +69,38 @@ const NavbarActions = memo(({
/> />
)} )}
{/* 移动端汉堡菜单 - 在头像右侧 */}
{isMobile && (
<IconButton
icon={<HamburgerIcon />}
variant="ghost"
onClick={onMenuOpen}
aria-label="打开菜单"
size="md"
/>
)}
{/* 个人中心下拉菜单 - 仅大屏显示 */} {/* 个人中心下拉菜单 - 仅大屏显示 */}
{isDesktop && ( {isDesktop && (
<PersonalCenterMenu user={user} handleLogout={handleLogout} /> <PersonalCenterMenu user={user} handleLogout={handleLogout} />
)} )}
</HStack> </HStack>
) : ( ) : (
// 未登录状态 - 单一按钮 // 未登录状态 - 登录按钮 + 汉堡菜
<HStack spacing={{ base: 2, md: 4 }}>
<LoginButton /> <LoginButton />
{/* 移动端汉堡菜单 - 未登录时也显示 */}
{isMobile && (
<IconButton
icon={<HamburgerIcon />}
variant="ghost"
onClick={onMenuOpen}
aria-label="打开菜单"
size="md"
/>
)}
</HStack>
)} )}
</HStack> </HStack>
); );