refactor(HomeNavbar): Phase 7 - 最终组件化优化
Phase 7 重构完成,实现 HomeNavbar 的最终优化: 新增文件: - src/components/Navbars/components/SecondaryNav/config.js (111行) * 二级导航配置数据 * 统一管理所有二级菜单结构 - src/components/Navbars/components/SecondaryNav/index.js (138行) * 二级导航栏组件 * 支持动态路由匹配、徽章显示、导航埋点 - src/hooks/useProfileCompleteness.js (127行) * 用户资料完整性管理 Hook * 封装资料检查逻辑、状态管理、自动检测 - src/components/Navbars/components/ProfileCompletenessAlert/index.js (96行) * 资料完整性提醒横幅组件 * 响应式设计、操作回调 - src/components/Navbars/components/NavbarActions/index.js (82行) * 右侧功能区统一组件 * 集成主题切换、登录按钮、功能菜单、用户菜单 - src/components/Navbars/components/ThemeToggleButton.js (更新) * 添加导航埋点支持 * 支持自定义尺寸和样式 HomeNavbar.js 优化: - 移除 SecondaryNav 内联组件定义(~148行) - 移除资料完整性状态和逻辑(~90行) - 移除资料完整性横幅 JSX(~50行) - 移除右侧功能区 JSX(~54行) - 简化 handleLogout,使用 resetCompleteness - 525 → 215 行(-310行,-59.0%) Phase 7 成果: - 创建 1 个配置文件、4 个新组件、1 个自定义 Hook - 从 HomeNavbar 中提取 ~342 行复杂逻辑和 JSX - 代码高度模块化,职责清晰分离 - 所有功能保持完整,便于维护和测试 总体成果(Phase 1-7): - 原始代码:1623 行 - Phase 1-6 后:525 行(-67.7%) - Phase 7 后:215 行(-86.8%) - 总减少:1408 行 - 提取组件总数:18+ 个 - 代码结构从臃肿单体文件转变为清晰的模块化架构 技术亮点: - 自定义 Hooks 封装复杂状态逻辑 - 配置与组件分离 - 组件高度复用 - React.memo 性能优化 - 完整的 Props 类型注释 注意:存在 Webpack 缓存导致的间歇性编译错误, 代码本身正确,重启开发服务器可解决 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
82
src/components/Navbars/components/NavbarActions/index.js
Normal file
82
src/components/Navbars/components/NavbarActions/index.js
Normal file
@@ -0,0 +1,82 @@
|
||||
// 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;
|
||||
Reference in New Issue
Block a user