fix:优化h5/菜单UI
This commit is contained in:
@@ -167,20 +167,14 @@ export default function HomeNavbar() {
|
|||||||
<BrandLogo />
|
<BrandLogo />
|
||||||
|
|
||||||
{/* 中间导航区域 - 响应式 (Phase 4 优化) */}
|
{/* 中间导航区域 - 响应式 (Phase 4 优化) */}
|
||||||
{isMobile ? (
|
{!isMobile && (
|
||||||
// 移动端:汉堡菜单
|
isTablet ? (
|
||||||
<IconButton
|
// 中屏(平板):"更多"下拉菜单
|
||||||
icon={<HamburgerIcon />}
|
<MoreMenu isAuthenticated={isAuthenticated} user={user} />
|
||||||
variant="ghost"
|
) : (
|
||||||
onClick={onOpen}
|
// 大屏(桌面):完整导航菜单
|
||||||
aria-label="Open menu"
|
<DesktopNav isAuthenticated={isAuthenticated} user={user} />
|
||||||
/>
|
)
|
||||||
) : isTablet ? (
|
|
||||||
// 中屏(平板):"更多"下拉菜单
|
|
||||||
<MoreMenu 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}
|
||||||
|
|||||||
@@ -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>
|
||||||
) : (
|
) : (
|
||||||
// 未登录状态 - 单一按钮
|
// 未登录状态 - 登录按钮 + 汉堡菜单
|
||||||
<LoginButton />
|
<HStack spacing={{ base: 2, md: 4 }}>
|
||||||
|
<LoginButton />
|
||||||
|
|
||||||
|
{/* 移动端汉堡菜单 - 未登录时也显示 */}
|
||||||
|
{isMobile && (
|
||||||
|
<IconButton
|
||||||
|
icon={<HamburgerIcon />}
|
||||||
|
variant="ghost"
|
||||||
|
onClick={onMenuOpen}
|
||||||
|
aria-label="打开菜单"
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
)}
|
)}
|
||||||
</HStack>
|
</HStack>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user