perf(Navbar): 移除自选股/事件按钮,清理无用代码

NavbarActions:
- 移除 WatchlistMenu 和 FollowingEventsMenu 组件
- 移除 watchlistQuotes/followingEvents props

HomeNavbar:
- 移除 useWatchlist/useFollowingEvents hooks 调用
- 移除相关导入和 props 传递

TabletUserMenu:
- 移除 watchlistQuotes/followingEvents props
- 简化菜单项(移除数量 Badge)

性能提升:
- 减少 2 个 hook 初始化和 4+ 个 Redux selector 订阅
- 减少导航栏初始化时的 API 请求
- 侧边工具栏不受影响(有独立的 GlobalSidebarContext)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-25 13:57:18 +08:00
parent 08850249e7
commit 0e795563c0
3 changed files with 4 additions and 44 deletions

View File

@@ -44,11 +44,6 @@ import { DesktopNav, MoreMenu, PersonalCenterMenu } from './components/Navigatio
// Phase 5 优化: 提取的移动端抽屉菜单组件
import { MobileDrawer } from './components/MobileDrawer';
// Phase 6 优化: 提取的功能菜单组件和自定义 Hooks
import { WatchlistMenu, FollowingEventsMenu } from './components/FeatureMenus';
import { useWatchlist } from '../../hooks/useWatchlist';
import { useFollowingEvents } from '../../hooks/useFollowingEvents';
// Phase 7 优化: 提取的资料完整性、右侧功能区组件
import ProfileCompletenessAlert from './components/ProfileCompletenessAlert';
import { useProfileCompleteness } from '../../hooks/useProfileCompleteness';
@@ -96,11 +91,6 @@ export default function HomeNavbar() {
return user.nickname || user.username || user.name || user.email || '用户';
};
// Phase 6: 自选股和关注事件逻辑已提取到自定义 Hooks
const { watchlistQuotes, followingEvents } = useWatchlist();
const { followingEvents: events } = useFollowingEvents();
// 注意:这里只需要数据用于 TabletUserMenu实际的菜单组件会自己管理状态
// Phase 7: 资料完整性逻辑已提取到 useProfileCompleteness Hook
const {
profileCompleteness,
@@ -174,8 +164,6 @@ export default function HomeNavbar() {
isMobile={isMobile}
onMenuOpen={onOpen}
handleLogout={handleLogout}
watchlistQuotes={watchlistQuotes}
followingEvents={followingEvents}
/>
</Flex>
</Box>

View File

@@ -7,7 +7,6 @@ import { Menu } from 'lucide-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, MoreMenu } from '../Navigation';
@@ -24,8 +23,6 @@ import { PersonalCenterMenu, MoreMenu } from '../Navigation';
* @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,
@@ -35,9 +32,7 @@ const NavbarActions = memo(({
isTablet,
isMobile,
onMenuOpen,
handleLogout,
watchlistQuotes,
followingEvents
handleLogout
}) => {
return (
<HStack spacing={{ base: 2, md: 4 }}>
@@ -56,12 +51,6 @@ const NavbarActions = memo(({
{/* 投资日历 - 仅大屏显示 */}
{isDesktop && <CalendarButton />}
{/* 自选股 - 仅大屏显示 */}
{isDesktop && <WatchlistMenu />}
{/* 关注的事件 - 仅大屏显示 */}
{isDesktop && <FollowingEventsMenu />}
{/* 头像区域 - 响应式 */}
{isDesktop ? (
<DesktopUserMenu user={user} />
@@ -69,8 +58,6 @@ const NavbarActions = memo(({
<TabletUserMenu
user={user}
handleLogout={handleLogout}
watchlistQuotes={watchlistQuotes}
followingEvents={followingEvents}
/>
)}

View File

@@ -11,7 +11,6 @@ import {
Box,
Text,
Badge,
Flex,
useColorModeValue
} from '@chakra-ui/react';
import { Star, Calendar, User, Settings, Home, LogOut, Crown } from 'lucide-react';
@@ -26,14 +25,10 @@ import { useSubscription } from '../../../../hooks/useSubscription';
* @param {Object} props
* @param {Object} props.user - 用户信息
* @param {Function} props.handleLogout - 退出登录回调
* @param {Array} props.watchlistQuotes - 自选股列表
* @param {Array} props.followingEvents - 自选事件列表
*/
const TabletUserMenu = memo(({
user,
handleLogout,
watchlistQuotes,
followingEvents
handleLogout
}) => {
const navigate = useNavigate();
const { subscriptionInfo } = useSubscription();
@@ -101,22 +96,12 @@ const TabletUserMenu = memo(({
{/* 自选股 */}
<MenuItem icon={<Star size={16} />} onClick={() => navigate('/home/center')}>
<Flex justify="space-between" align="center" w="100%">
<Text>我的自选股</Text>
{watchlistQuotes && watchlistQuotes.length > 0 && (
<Badge>{watchlistQuotes.length}</Badge>
)}
</Flex>
<Text>我的自选股</Text>
</MenuItem>
{/* 自选事件 */}
<MenuItem icon={<Calendar size={16} />} onClick={() => navigate('/home/center')}>
<Flex justify="space-between" align="center" w="100%">
<Text>我的自选事件</Text>
{followingEvents && followingEvents.length > 0 && (
<Badge>{followingEvents.length}</Badge>
)}
</Flex>
<Text>我的自选事件</Text>
</MenuItem>
<MenuDivider />