106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
// src/components/Navbars/components/NavbarActions/index.js
|
||
// Navbar 右侧功能区组件
|
||
|
||
import React, { memo } from 'react';
|
||
import { HStack, 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, MoreMenu } from '../Navigation';
|
||
|
||
/**
|
||
* Navbar 右侧功能区组件
|
||
* 根据用户登录状态和屏幕尺寸显示不同的操作按钮和菜单
|
||
*
|
||
* @param {Object} props
|
||
* @param {boolean} props.isLoading - 是否正在加载
|
||
* @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.handleLogout - 登出回调
|
||
* @param {Array} props.watchlistQuotes - 自选股数据（用于 TabletUserMenu）
|
||
* @param {Array} props.followingEvents - 关注事件数据（用于 TabletUserMenu）
|
||
*/
|
||
const NavbarActions = memo(({
|
||
isLoading,
|
||
isAuthenticated,
|
||
user,
|
||
isDesktop,
|
||
isTablet,
|
||
isMobile,
|
||
onMenuOpen,
|
||
handleLogout,
|
||
watchlistQuotes,
|
||
followingEvents
|
||
}) => {
|
||
return (
|
||
<HStack spacing={{ base: 2, md: 4 }}>
|
||
{/* 权限校验中 - 显示占位骨架，不显示登录按钮或用户菜单 */}
|
||
{isLoading ? (
|
||
<Box
|
||
w={{ base: '80px', md: '120px' }}
|
||
h="36px"
|
||
borderRadius="md"
|
||
bg="whiteAlpha.100"
|
||
opacity={0.6}
|
||
/>
|
||
) : isAuthenticated && user ? (
|
||
// 已登录状态 - 用户菜单 + 功能菜单排列
|
||
<HStack spacing={{ base: 2, md: 3 }}>
|
||
{/* 投资日历 - 仅大屏显示 */}
|
||
{isDesktop && <CalendarButton />}
|
||
|
||
{/* 自选股 - 仅大屏显示 */}
|
||
{isDesktop && <WatchlistMenu />}
|
||
|
||
{/* 关注的事件 - 仅大屏显示 */}
|
||
{isDesktop && <FollowingEventsMenu />}
|
||
|
||
{/* 头像区域 - 响应式 */}
|
||
{isDesktop ? (
|
||
<DesktopUserMenu user={user} />
|
||
) : (
|
||
<TabletUserMenu
|
||
user={user}
|
||
handleLogout={handleLogout}
|
||
watchlistQuotes={watchlistQuotes}
|
||
followingEvents={followingEvents}
|
||
/>
|
||
)}
|
||
|
||
{/* 头像右侧的菜单 - 响应式（互斥逻辑，确保只渲染一个） */}
|
||
{isDesktop ? (
|
||
// 桌面端：个人中心下拉菜单
|
||
<PersonalCenterMenu user={user} handleLogout={handleLogout} />
|
||
) : isTablet ? (
|
||
// 平板端：MoreMenu 下拉菜单
|
||
<MoreMenu isAuthenticated={isAuthenticated} user={user} />
|
||
) : (
|
||
// 移动端：汉堡菜单（打开抽屉）
|
||
<IconButton
|
||
icon={<HamburgerIcon />}
|
||
variant="ghost"
|
||
onClick={onMenuOpen}
|
||
aria-label="打开菜单"
|
||
size="md"
|
||
/>
|
||
)}
|
||
</HStack>
|
||
) : (
|
||
// 未登录状态 - 仅显示登录按钮
|
||
<LoginButton />
|
||
)}
|
||
</HStack>
|
||
);
|
||
});
|
||
|
||
NavbarActions.displayName = 'NavbarActions';
|
||
|
||
export default NavbarActions;
|