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 优化: 提取的移动端抽屉菜单组件 // Phase 5 优化: 提取的移动端抽屉菜单组件
import { MobileDrawer } from './components/MobileDrawer'; 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 优化: 提取的资料完整性、右侧功能区组件 // Phase 7 优化: 提取的资料完整性、右侧功能区组件
import ProfileCompletenessAlert from './components/ProfileCompletenessAlert'; import ProfileCompletenessAlert from './components/ProfileCompletenessAlert';
import { useProfileCompleteness } from '../../hooks/useProfileCompleteness'; import { useProfileCompleteness } from '../../hooks/useProfileCompleteness';
@@ -96,11 +91,6 @@ export default function HomeNavbar() {
return user.nickname || user.username || user.name || user.email || '用户'; 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 // Phase 7: 资料完整性逻辑已提取到 useProfileCompleteness Hook
const { const {
profileCompleteness, profileCompleteness,
@@ -174,8 +164,6 @@ export default function HomeNavbar() {
isMobile={isMobile} isMobile={isMobile}
onMenuOpen={onOpen} onMenuOpen={onOpen}
handleLogout={handleLogout} handleLogout={handleLogout}
watchlistQuotes={watchlistQuotes}
followingEvents={followingEvents}
/> />
</Flex> </Flex>
</Box> </Box>

View File

@@ -7,7 +7,6 @@ import { Menu } from 'lucide-react';
// import ThemeToggleButton from '../ThemeToggleButton'; // ❌ 已删除 - 不再支持深色模式切换 // import ThemeToggleButton from '../ThemeToggleButton'; // ❌ 已删除 - 不再支持深色模式切换
import LoginButton from '../LoginButton'; import LoginButton from '../LoginButton';
import CalendarButton from '../CalendarButton'; import CalendarButton from '../CalendarButton';
import { WatchlistMenu, FollowingEventsMenu } from '../FeatureMenus';
import { DesktopUserMenu, TabletUserMenu } from '../UserMenu'; import { DesktopUserMenu, TabletUserMenu } from '../UserMenu';
import { PersonalCenterMenu, MoreMenu } from '../Navigation'; import { PersonalCenterMenu, MoreMenu } from '../Navigation';
@@ -24,8 +23,6 @@ import { PersonalCenterMenu, MoreMenu } from '../Navigation';
* @param {boolean} props.isMobile - 是否为移动端 * @param {boolean} props.isMobile - 是否为移动端
* @param {Function} props.onMenuOpen - 打开移动端抽屉菜单的回调 * @param {Function} props.onMenuOpen - 打开移动端抽屉菜单的回调
* @param {Function} props.handleLogout - 登出回调 * @param {Function} props.handleLogout - 登出回调
* @param {Array} props.watchlistQuotes - 自选股数据(用于 TabletUserMenu
* @param {Array} props.followingEvents - 关注事件数据(用于 TabletUserMenu
*/ */
const NavbarActions = memo(({ const NavbarActions = memo(({
isLoading, isLoading,
@@ -35,9 +32,7 @@ const NavbarActions = memo(({
isTablet, isTablet,
isMobile, isMobile,
onMenuOpen, onMenuOpen,
handleLogout, handleLogout
watchlistQuotes,
followingEvents
}) => { }) => {
return ( return (
<HStack spacing={{ base: 2, md: 4 }}> <HStack spacing={{ base: 2, md: 4 }}>
@@ -56,12 +51,6 @@ const NavbarActions = memo(({
{/* 投资日历 - 仅大屏显示 */} {/* 投资日历 - 仅大屏显示 */}
{isDesktop && <CalendarButton />} {isDesktop && <CalendarButton />}
{/* 自选股 - 仅大屏显示 */}
{isDesktop && <WatchlistMenu />}
{/* 关注的事件 - 仅大屏显示 */}
{isDesktop && <FollowingEventsMenu />}
{/* 头像区域 - 响应式 */} {/* 头像区域 - 响应式 */}
{isDesktop ? ( {isDesktop ? (
<DesktopUserMenu user={user} /> <DesktopUserMenu user={user} />
@@ -69,8 +58,6 @@ const NavbarActions = memo(({
<TabletUserMenu <TabletUserMenu
user={user} user={user}
handleLogout={handleLogout} handleLogout={handleLogout}
watchlistQuotes={watchlistQuotes}
followingEvents={followingEvents}
/> />
)} )}

View File

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