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:
@@ -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>
|
||||||
|
|||||||
@@ -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}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -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 />
|
||||||
|
|||||||
Reference in New Issue
Block a user