vf_react/src/components/Navbars/components/NavbarActions/index.js

// src/components/Navbars/components/NavbarActions/index.js
// Navbar 右侧功能区组件

import React, { memo } from 'react';
import { HStack, Spinner } from '@chakra-ui/react';
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';

/**
 * Navbar 右侧功能区组件
 * 根据用户登录状态和屏幕尺寸显示不同的操作按钮和菜单
 *
 * @param {Object} props
 * @param {boolean} props.isLoading - 是否正在加载
 * @param {boolean} props.isAuthenticated - 是否已登录
 * @param {Object} props.user - 用户对象
 * @param {boolean} props.isDesktop - 是否为桌面端
 * @param {Function} props.handleLogout - 登出回调
 * @param {Array} props.watchlistQuotes - 自选股数据（用于 TabletUserMenu）
 * @param {Array} props.followingEvents - 关注事件数据（用于 TabletUserMenu）
 */
const NavbarActions = memo(({
    isLoading,
    isAuthenticated,
    user,
    isDesktop,
    handleLogout,
    watchlistQuotes,
    followingEvents
}) => {
    return (
        <HStack spacing={{ base: 2, md: 4 }}>
            {/* 主题切换按钮 */}
            <ThemeToggleButton />

            {/* 显示加载状态 */}
            {isLoading ? (
                <Spinner size="sm" color="blue.500" />
            ) : 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} />
                    )}
                </HStack>
            ) : (
                // 未登录状态 - 单一按钮
                <LoginButton />
            )}
        </HStack>
    );
});

NavbarActions.displayName = 'NavbarActions';

export default NavbarActions;