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>

src/components/Navbars/HomeNavbar.js

@@ -54,157 +54,13 @@ import { WatchlistMenu, FollowingEventsMenu } from './components/FeatureMenus';
 import { useWatchlist } from '../../hooks/useWatchlist';
 import { useFollowingEvents } from '../../hooks/useFollowingEvents';
 
-/** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
+// Phase 7 优化: 提取的二级导航、资料完整性、右侧功能区组件
-const SecondaryNav = ({ showCompletenessAlert }) => {
+import SecondaryNav from './components/SecondaryNav';
-    const navigate = useNavigate();
+import ProfileCompletenessAlert from './components/ProfileCompletenessAlert';
-    const location = useLocation();
+import { useProfileCompleteness } from '../../hooks/useProfileCompleteness';
-    const navbarBg = useColorModeValue('gray.50', 'gray.700');
+import NavbarActions from './components/NavbarActions';
-    const itemHoverBg = useColorModeValue('white', 'gray.600');
-    // ⚠️ 必须在组件顶层调用所有Hooks（不能在JSX中调用）
-    const borderColorValue = useColorModeValue('gray.200', 'gray.600');
 
-    // 🎯 初始化导航埋点Hook
+// Phase 7: SecondaryNav 组件已提取到 ./components/SecondaryNav/index.js
-    const navEvents = useNavigationEvents({ component: 'secondary_nav' });
-
-    // 定义二级导航结构
-    const secondaryNavConfig = {
-        '/community': {
-            title: '高频跟踪',
-            items: [
-                { path: '/community', label: '事件中心', badges: [{ text: 'HOT', colorScheme: 'green' }, { text: 'NEW', colorScheme: 'red' }] },
-                { path: '/concepts', label: '概念中心', badges: [{ text: 'NEW', colorScheme: 'red' }] }
-            ]
-        },
-        '/concepts': {
-            title: '高频跟踪',
-            items: [
-                { path: '/community', label: '事件中心', badges: [{ text: 'HOT', colorScheme: 'green' }, { text: 'NEW', colorScheme: 'red' }] },
-                { path: '/concepts', label: '概念中心', badges: [{ text: 'NEW', colorScheme: 'red' }] }
-            ]
-        },
-        '/limit-analyse': {
-            title: '行情复盘',
-            items: [
-                { path: '/limit-analyse', label: '涨停分析', badges: [{ text: 'FREE', colorScheme: 'blue' }] },
-                { path: '/stocks', label: '个股中心', badges: [{ text: 'HOT', colorScheme: 'green' }] },
-                { path: '/trading-simulation', label: '模拟盘', badges: [{ text: 'NEW', colorScheme: 'red' }] }
-            ]
-        },
-        '/stocks': {
-            title: '行情复盘',
-            items: [
-                { path: '/limit-analyse', label: '涨停分析', badges: [{ text: 'FREE', colorScheme: 'blue' }] },
-                { path: '/stocks', label: '个股中心', badges: [{ text: 'HOT', colorScheme: 'green' }] },
-                { path: '/trading-simulation', label: '模拟盘', badges: [{ text: 'NEW', colorScheme: 'red' }] }
-            ]
-        },
-        '/trading-simulation': {
-            title: '行情复盘',
-            items: [
-                { path: '/limit-analyse', label: '涨停分析', badges: [{ text: 'FREE', colorScheme: 'blue' }] },
-                { path: '/stocks', label: '个股中心', badges: [{ text: 'HOT', colorScheme: 'green' }] },
-                { path: '/trading-simulation', label: '模拟盘', badges: [{ text: 'NEW', colorScheme: 'red' }] }
-            ]
-        }
-    };
-
-    // 找到当前路径对应的二级导航配置
-    const currentConfig = Object.keys(secondaryNavConfig).find(key =>
-        location.pathname.includes(key)
-    );
-
-    // 如果没有匹配的二级导航，不显示
-    if (!currentConfig) return null;
-
-    const config = secondaryNavConfig[currentConfig];
-
-    return (
-        <Box
-            bg={navbarBg}
-            borderBottom="1px"
-            borderColor={borderColorValue}
-            py={2}
-            position="sticky"
-            top={showCompletenessAlert ? "120px" : "60px"}
-            zIndex={100}
-        >
-            <Container maxW="container.xl" px={4}>
-                <HStack spacing={1}>
-                    {/* 显示一级菜单标题 */}
-                    <Text fontSize="sm" color="gray.500" mr={2}>
-                        {config.title}:
-                    </Text>
-                    {/* 二级菜单项 */}
-                    {config.items.map((item, index) => {
-                        const isActive = location.pathname.includes(item.path);
-                        return item.external ? (
-                            <Button
-                                key={index}
-                                as="a"
-                                href={item.path}
-                                size="sm"
-                                variant="ghost"
-                                bg="transparent"
-                                color="inherit"
-                                fontWeight="normal"
-                                _hover={{ bg: itemHoverBg }}
-                                borderRadius="md"
-                                px={3}
-                            >
-                                <Flex align="center" gap={2}>
-                                    <Text>{item.label}</Text>
-                                    {item.badges && item.badges.length > 0 && (
-                                        <HStack spacing={1}>
-                                            {item.badges.map((badge, bIndex) => (
-                                                <Badge key={bIndex} size="xs" colorScheme={badge.colorScheme}>
-                                                    {badge.text}
-                                                </Badge>
-                                            ))}
-                                        </HStack>
-                                    )}
-                                </Flex>
-                            </Button>
-                        ) : (
-                            <Button
-                                key={index}
-                                onClick={() => {
-                                    // 🎯 追踪侧边栏菜单点击
-                                    navEvents.trackSidebarMenuClicked(item.label, item.path, 2, false);
-                                    navigate(item.path);
-                                }}
-                                size="sm"
-                                variant="ghost"
-                                bg={isActive ? 'blue.50' : 'transparent'}
-                                color={isActive ? 'blue.600' : 'inherit'}
-                                fontWeight={isActive ? 'bold' : 'normal'}
-                                borderBottom={isActive ? '2px solid' : 'none'}
-                                borderColor="blue.600"
-                                borderRadius={isActive ? '0' : 'md'}
-                                _hover={{ bg: isActive ? 'blue.100' : itemHoverBg }}
-                                px={3}
-                            >
-                                <Flex align="center" gap={2}>
-                                    <Text>{item.label}</Text>
-                                    {item.badges && item.badges.length > 0 && (
-                                        <HStack spacing={1}>
-                                            {item.badges.map((badge, bIndex) => (
-                                                <Badge key={bIndex} size="xs" colorScheme={badge.colorScheme}>
-                                                    {badge.text}
-                                                </Badge>
-                                            ))}
-                                        </HStack>
-                                    )}
-                                </Flex>
-                            </Button>
-                        );
-                    })}
-                </HStack>
-            </Container>
-        </Box>
-    );
-};
-
-/** 中屏"更多"菜单 - 用于平板和小笔记本 */
 // Phase 4: MoreNavMenu 和 NavItems 组件已提取到 Navigation 目录
 
 export default function HomeNavbar() {
@@ -244,14 +100,25 @@ 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,
+        showAlert: showCompletenessAlert,
+        setShowAlert: setShowCompletenessAlert,
+        resetCompleteness
+    } = useProfileCompleteness({ isAuthenticated, user });
+
     // 处理登出
     const handleLogout = async () => {
         try {
             await logout();
-            // 重置资料完整性检查标志
+            // Phase 7: 使用 resetCompleteness 重置资料完整性状态
-            hasCheckedCompleteness.current = false;
+            resetCompleteness();
-            setProfileCompleteness(null);
-            setShowCompletenessAlert(false);
             // logout函数已经包含了跳转逻辑，这里不需要额外处理
         } catch (error) {
             logger.error('HomeNavbar', 'handleLogout', error, {
@@ -260,22 +127,6 @@ export default function HomeNavbar() {
         }
     };
 
-
-    // Phase 6: 自选股和关注事件逻辑已提取到自定义 Hooks
-    const { watchlistQuotes, followingEvents } = useWatchlist();
-    const { followingEvents: events } = useFollowingEvents();
-    // 注意：这里只需要数据用于 TabletUserMenu，实际的菜单组件会自己管理状态
-
-    // 投资日历 Modal 状态 - 已移至 CalendarButton 组件内部管理
-    // const [calendarModalOpen, setCalendarModalOpen] = useState(false);
-
-    // 用户信息完整性状态
-    const [profileCompleteness, setProfileCompleteness] = useState(null);
-    const [showCompletenessAlert, setShowCompletenessAlert] = useState(false);
-
-    // 添加标志位：追踪是否已经检查过资料完整性（避免重复请求）
-    const hasCheckedCompleteness = React.useRef(false);
-
     // Phase 2: 使用 Redux 订阅数据
     const {
         subscriptionInfo,
@@ -287,133 +138,17 @@ export default function HomeNavbar() {
     // Phase 6: loadWatchlistQuotes, loadFollowingEvents, handleRemoveFromWatchlist,
     // handleUnfollowEvent 已移至自定义 Hooks 中，由各自组件内部管理
 
-    // 检查用户资料完整性
-    const checkProfileCompleteness = useCallback(async () => {
-        if (!isAuthenticated || !user) return;
-
-        // 如果已经检查过，跳过（避免重复请求）
-        if (hasCheckedCompleteness.current) {
-            logger.debug('HomeNavbar', '已检查过资料完整性，跳过重复请求', {
-                userId: user?.id
-            });
-            return;
-        }
-
-        try {
-            logger.debug('HomeNavbar', '开始检查资料完整性', {
-                userId: user?.id
-            });
-            const base = getApiBase();
-            const resp = await fetch(base + '/api/account/profile-completeness', {
-                credentials: 'include'
-            });
-
-            if (resp.ok) {
-                const data = await resp.json();
-                if (data.success) {
-                    setProfileCompleteness(data.data);
-                    // 只有微信用户且资料不完整时才显示提醒
-                    setShowCompletenessAlert(data.data.needsAttention);
-                    // 标记为已检查
-                    hasCheckedCompleteness.current = true;
-                    logger.debug('HomeNavbar', '资料完整性检查完成', {
-                        userId: user?.id,
-                        completeness: data.data.completenessPercentage
-                    });
-                }
-            }
-        } catch (error) {
-            logger.warn('HomeNavbar', '检查资料完整性失败', {
-                userId: user?.id,
-                error: error.message
-            });
-        }
-    }, [isAuthenticated, userId]); // ⚡ 使用 userId 而不是 user?.id
-
-    // 监听用户变化，重置检查标志（用户切换或退出登录时）
-    React.useEffect(() => {
-        const userIdChanged = prevUserIdRef.current !== userId;
-        const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
-
-        if (userIdChanged || authChanged) {
-            prevUserIdRef.current = userId;
-            prevIsAuthenticatedRef.current = isAuthenticated;
-
-            if (!isAuthenticated || !user) {
-                // 用户退出登录，重置标志
-                hasCheckedCompleteness.current = false;
-                setProfileCompleteness(null);
-                setShowCompletenessAlert(false);
-            }
-        }
-    }, [isAuthenticated, userId, user]); // ⚡ 使用 userId
-
-    // 用户登录后检查资料完整性
-    React.useEffect(() => {
-        const userIdChanged = prevUserIdRef.current !== userId;
-        const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
-
-        if ((userIdChanged || authChanged) && isAuthenticated && user) {
-            // 延迟检查，避免过于频繁
-            const timer = setTimeout(checkProfileCompleteness, 1000);
-            return () => clearTimeout(timer);
-        }
-    }, [isAuthenticated, userId, checkProfileCompleteness, user]); // ⚡ 使用 userId
-
     // Phase 2: 加载订阅信息逻辑已移至 useSubscriptionData Hook
 
     return (
         <>
-            {/* 资料完整性提醒横幅 */}
+            {/* 资料完整性提醒横幅 (Phase 7 优化) */}
-            {showCompletenessAlert && profileCompleteness && (
+            {showCompletenessAlert && (
-                <Box
+                <ProfileCompletenessAlert
-                    bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+                    profileCompleteness={profileCompleteness}
-                    color="white"
+                    onClose={() => setShowCompletenessAlert(false)}
-                    py={{ base: 2, md: 2 }}
+                    onNavigateToSettings={() => navigate('/home/settings')}
-                    px={{ base: 2, md: 4 }}
+                />
-                    position="sticky"
-                    top={0}
-                    zIndex={1001}
-                >
-                    <Container maxW="container.xl">
-                        <HStack justify="space-between" align="center" spacing={{ base: 2, md: 4 }}>
-                            <HStack spacing={{ base: 2, md: 3 }} flex={1} minW={0}>
-                                <Icon as={FiStar} display={{ base: 'none', sm: 'block' }} />
-                                <VStack spacing={0} align="start" flex={1} minW={0}>
-                                    <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold" noOfLines={1}>
-                                        完善资料，享受更好服务
-                                    </Text>
-                                    <Text fontSize={{ base: '2xs', md: 'xs' }} opacity={0.9} noOfLines={1}>
-                                        您还需要设置：{profileCompleteness.missingItems.join('、')}
-                                    </Text>
-                                </VStack>
-                                <Text fontSize="2xs" bg="whiteAlpha.300" px={2} py={1} borderRadius="full" display={{ base: 'none', md: 'block' }}>
-                                    {profileCompleteness.completenessPercentage}% 完成
-                                </Text>
-                            </HStack>
-                            <HStack spacing={{ base: 1, md: 2 }}>
-                                <Button
-                                    size={{ base: 'xs', md: 'sm' }}
-                                    colorScheme="whiteAlpha"
-                                    variant="ghost"
-                                    onClick={() => navigate('/home/settings')}
-                                    minH={{ base: '32px', md: '40px' }}
-                                >
-                                    立即完善
-                                </Button>
-                                <IconButton
-                                    size={{ base: 'xs', md: 'sm' }}
-                                    variant="ghost"
-                                    colorScheme="whiteAlpha"
-                                    icon={<Text fontSize={{ base: 'xl', md: '2xl' }}>×</Text>}
-                                    onClick={() => setShowCompletenessAlert(false)}
-                                    aria-label="关闭提醒"
-                                    minW={{ base: '32px', md: '40px' }}
-                                />
-                            </HStack>
-                        </HStack>
-                    </Container>
-                </Box>
             )}
 
             <Box
@@ -448,61 +183,16 @@ export default function HomeNavbar() {
                             <DesktopNav isAuthenticated={isAuthenticated} user={user} />
                         )}
 
-                        {/* 右侧：日夜模式切换 + 登录/用户区 */}
+                        {/* 右侧功能区 (Phase 7 优化) */}
-                        <HStack spacing={{ base: 2, md: 4 }}>
+                        <NavbarActions
-                            <IconButton
+                            isLoading={isLoading}
-                                aria-label="切换主题"
+                            isAuthenticated={isAuthenticated}
-                                icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+                            user={user}
-                                onClick={() => {
+                            isDesktop={isDesktop}
-                                    // 🎯 追踪主题切换
+                            handleLogout={handleLogout}
-                                    const fromTheme = colorMode;
+                            watchlistQuotes={watchlistQuotes}
-                                    const toTheme = colorMode === 'light' ? 'dark' : 'light';
+                            followingEvents={followingEvents}
-                                    navEvents.trackThemeChanged(fromTheme, toTheme);
+                        />
-                                    toggleColorMode();
-                                }}
-                                variant="ghost"
-                                size="sm"
-                                minW={{ base: '36px', md: '40px' }}
-                                minH={{ base: '36px', md: '40px' }}
-                            />
-
-                            {/* 显示加载状态 */}
-                            {isLoading ? (
-                                <Spinner size="sm" color="blue.500" />
-                            ) : isAuthenticated && user ? (
-                                // 已登录状态 - 用户菜单 + 功能菜单排列
-                                <HStack spacing={{ base: 2, md: 3 }}>
-                                    {/* 投资日历 - 仅大屏显示 */}
-                                    {isDesktop && <CalendarButton />}
-
-                                    {/* 自选股 - 仅大屏显示 (Phase 6 优化) */}
-                                    {isDesktop && <WatchlistMenu />}
-
-                                    {/* 关注的事件 - 仅大屏显示 (Phase 6 优化) */}
-                                    {isDesktop && <FollowingEventsMenu />}
-
-                                    {/* 头像区域 - 响应式 (Phase 3 优化) */}
-                                    {isDesktop ? (
-                                        <DesktopUserMenu user={user} />
-                                    ) : (
-                                        <TabletUserMenu
-                                            user={user}
-                                            handleLogout={handleLogout}
-                                            watchlistQuotes={watchlistQuotes}
-                                            followingEvents={followingEvents}
-                                        />
-                                    )}
-
-                                    {/* 个人中心下拉菜单 - 仅大屏显示 (Phase 4 优化) */}
-                                    {isDesktop && (
-                                        <PersonalCenterMenu user={user} handleLogout={handleLogout} />
-                                    )}
-                                </HStack>
-                            ) : (
-                                // 未登录状态 - 单一按钮
-                                <LoginButton />
-                            )}
-                        </HStack>
                     </Flex>
                 </Container>
 

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

@@ -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;

src/components/Navbars/components/ProfileCompletenessAlert/index.js

@@ -0,0 +1,96 @@
+// src/components/Navbars/components/ProfileCompletenessAlert/index.js
+// 用户资料完整性提醒横幅组件
+
+import React, { memo } from 'react';
+import {
+    Box,
+    Container,
+    HStack,
+    VStack,
+    Text,
+    Button,
+    IconButton,
+    Icon
+} from '@chakra-ui/react';
+import { FiStar } from 'react-icons/fi';
+
+/**
+ * 资料完整性提醒横幅组件
+ * 显示用户资料完整度和缺失项提示
+ *
+ * @param {Object} props
+ * @param {Object} props.profileCompleteness - 资料完整度数据
+ * @param {Array} props.profileCompleteness.missingItems - 缺失的项目列表
+ * @param {number} props.profileCompleteness.completenessPercentage - 完成百分比
+ * @param {Function} props.onClose - 关闭横幅回调
+ * @param {Function} props.onNavigateToSettings - 导航到设置页面回调
+ */
+const ProfileCompletenessAlert = memo(({
+    profileCompleteness,
+    onClose,
+    onNavigateToSettings
+}) => {
+    if (!profileCompleteness) return null;
+
+    return (
+        <Box
+            bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+            color="white"
+            py={{ base: 2, md: 2 }}
+            px={{ base: 2, md: 4 }}
+            position="sticky"
+            top={0}
+            zIndex={1001}
+        >
+            <Container maxW="container.xl">
+                <HStack justify="space-between" align="center" spacing={{ base: 2, md: 4 }}>
+                    <HStack spacing={{ base: 2, md: 3 }} flex={1} minW={0}>
+                        <Icon as={FiStar} display={{ base: 'none', sm: 'block' }} />
+                        <VStack spacing={0} align="start" flex={1} minW={0}>
+                            <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold" noOfLines={1}>
+                                完善资料，享受更好服务
+                            </Text>
+                            <Text fontSize={{ base: '2xs', md: 'xs' }} opacity={0.9} noOfLines={1}>
+                                您还需要设置：{profileCompleteness.missingItems.join('、')}
+                            </Text>
+                        </VStack>
+                        <Text
+                            fontSize="2xs"
+                            bg="whiteAlpha.300"
+                            px={2}
+                            py={1}
+                            borderRadius="full"
+                            display={{ base: 'none', md: 'block' }}
+                        >
+                            {profileCompleteness.completenessPercentage}% 完成
+                        </Text>
+                    </HStack>
+                    <HStack spacing={{ base: 1, md: 2 }}>
+                        <Button
+                            size={{ base: 'xs', md: 'sm' }}
+                            colorScheme="whiteAlpha"
+                            variant="ghost"
+                            onClick={onNavigateToSettings}
+                            minH={{ base: '32px', md: '40px' }}
+                        >
+                            立即完善
+                        </Button>
+                        <IconButton
+                            size={{ base: 'xs', md: 'sm' }}
+                            variant="ghost"
+                            colorScheme="whiteAlpha"
+                            icon={<Text fontSize={{ base: 'xl', md: '2xl' }}>×</Text>}
+                            onClick={onClose}
+                            aria-label="关闭提醒"
+                            minW={{ base: '32px', md: '40px' }}
+                        />
+                    </HStack>
+                </HStack>
+            </Container>
+        </Box>
+    );
+});
+
+ProfileCompletenessAlert.displayName = 'ProfileCompletenessAlert';
+
+export default ProfileCompletenessAlert;

src/components/Navbars/components/SecondaryNav/config.js

@@ -0,0 +1,111 @@
+// src/components/Navbars/components/SecondaryNav/config.js
+// 二级导航配置数据
+
+/**
+ * 二级导航配置结构
+ * - key: 匹配的路径前缀
+ * - title: 导航组标题
+ * - items: 导航项列表
+ *   - path: 路径
+ *   - label: 显示文本
+ *   - badges: 徽章列表 (可选)
+ *   - external: 是否外部链接 (可选)
+ */
+export const secondaryNavConfig = {
+    '/community': {
+        title: '高频跟踪',
+        items: [
+            {
+                path: '/community',
+                label: '事件中心',
+                badges: [
+                    { text: 'HOT', colorScheme: 'green' },
+                    { text: 'NEW', colorScheme: 'red' }
+                ]
+            },
+            {
+                path: '/concepts',
+                label: '概念中心',
+                badges: [{ text: 'NEW', colorScheme: 'red' }]
+            }
+        ]
+    },
+    '/concepts': {
+        title: '高频跟踪',
+        items: [
+            {
+                path: '/community',
+                label: '事件中心',
+                badges: [
+                    { text: 'HOT', colorScheme: 'green' },
+                    { text: 'NEW', colorScheme: 'red' }
+                ]
+            },
+            {
+                path: '/concepts',
+                label: '概念中心',
+                badges: [{ text: 'NEW', colorScheme: 'red' }]
+            }
+        ]
+    },
+    '/limit-analyse': {
+        title: '行情复盘',
+        items: [
+            {
+                path: '/limit-analyse',
+                label: '涨停分析',
+                badges: [{ text: 'FREE', colorScheme: 'blue' }]
+            },
+            {
+                path: '/stocks',
+                label: '个股中心',
+                badges: [{ text: 'HOT', colorScheme: 'green' }]
+            },
+            {
+                path: '/trading-simulation',
+                label: '模拟盘',
+                badges: [{ text: 'NEW', colorScheme: 'red' }]
+            }
+        ]
+    },
+    '/stocks': {
+        title: '行情复盘',
+        items: [
+            {
+                path: '/limit-analyse',
+                label: '涨停分析',
+                badges: [{ text: 'FREE', colorScheme: 'blue' }]
+            },
+            {
+                path: '/stocks',
+                label: '个股中心',
+                badges: [{ text: 'HOT', colorScheme: 'green' }]
+            },
+            {
+                path: '/trading-simulation',
+                label: '模拟盘',
+                badges: [{ text: 'NEW', colorScheme: 'red' }]
+            }
+        ]
+    },
+    '/trading-simulation': {
+        title: '行情复盘',
+        items: [
+            {
+                path: '/limit-analyse',
+                label: '涨停分析',
+                badges: [{ text: 'FREE', colorScheme: 'blue' }]
+            },
+            {
+                path: '/stocks',
+                label: '个股中心',
+                badges: [{ text: 'HOT', colorScheme: 'green' }]
+            },
+            {
+                path: '/trading-simulation',
+                label: '模拟盘',
+                badges: [{ text: 'NEW', colorScheme: 'red' }]
+            }
+        ]
+    }
+};

src/components/Navbars/components/SecondaryNav/index.js

@@ -0,0 +1,138 @@
+// src/components/Navbars/components/SecondaryNav/index.js
+// 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项
+
+import React, { memo } from 'react';
+import {
+    Box,
+    Container,
+    HStack,
+    Text,
+    Button,
+    Flex,
+    Badge,
+    useColorModeValue
+} from '@chakra-ui/react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigationEvents } from '../../../../hooks/useNavigationEvents';
+import { secondaryNavConfig } from './config';
+
+/**
+ * 二级导航栏组件
+ * 根据当前路径显示对应的二级菜单项
+ *
+ * @param {Object} props
+ * @param {boolean} props.showCompletenessAlert - 是否显示完整性提醒（影响 sticky top 位置）
+ */
+const SecondaryNav = memo(({ showCompletenessAlert }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // 颜色模式
+    const navbarBg = useColorModeValue('gray.50', 'gray.700');
+    const itemHoverBg = useColorModeValue('white', 'gray.600');
+    const borderColorValue = useColorModeValue('gray.200', 'gray.600');
+
+    // 导航埋点
+    const navEvents = useNavigationEvents({ component: 'secondary_nav' });
+
+    // 找到当前路径对应的二级导航配置
+    const currentConfig = Object.keys(secondaryNavConfig).find(key =>
+        location.pathname.includes(key)
+    );
+
+    // 如果没有匹配的二级导航，不显示
+    if (!currentConfig) return null;
+
+    const config = secondaryNavConfig[currentConfig];
+
+    return (
+        <Box
+            bg={navbarBg}
+            borderBottom="1px"
+            borderColor={borderColorValue}
+            py={2}
+            position="sticky"
+            top={showCompletenessAlert ? "120px" : "60px"}
+            zIndex={100}
+        >
+            <Container maxW="container.xl" px={4}>
+                <HStack spacing={1}>
+                    {/* 显示一级菜单标题 */}
+                    <Text fontSize="sm" color="gray.500" mr={2}>
+                        {config.title}:
+                    </Text>
+
+                    {/* 二级菜单项 */}
+                    {config.items.map((item, index) => {
+                        const isActive = location.pathname.includes(item.path);
+
+                        return item.external ? (
+                            <Button
+                                key={index}
+                                as="a"
+                                href={item.path}
+                                size="sm"
+                                variant="ghost"
+                                bg="transparent"
+                                color="inherit"
+                                fontWeight="normal"
+                                _hover={{ bg: itemHoverBg }}
+                                borderRadius="md"
+                                px={3}
+                            >
+                                <Flex align="center" gap={2}>
+                                    <Text>{item.label}</Text>
+                                    {item.badges && item.badges.length > 0 && (
+                                        <HStack spacing={1}>
+                                            {item.badges.map((badge, bIndex) => (
+                                                <Badge key={bIndex} size="xs" colorScheme={badge.colorScheme}>
+                                                    {badge.text}
+                                                </Badge>
+                                            ))}
+                                        </HStack>
+                                    )}
+                                </Flex>
+                            </Button>
+                        ) : (
+                            <Button
+                                key={index}
+                                onClick={() => {
+                                    // 追踪侧边栏菜单点击
+                                    navEvents.trackSidebarMenuClicked(item.label, item.path, 2, false);
+                                    navigate(item.path);
+                                }}
+                                size="sm"
+                                variant="ghost"
+                                bg={isActive ? 'blue.50' : 'transparent'}
+                                color={isActive ? 'blue.600' : 'inherit'}
+                                fontWeight={isActive ? 'bold' : 'normal'}
+                                borderBottom={isActive ? '2px solid' : 'none'}
+                                borderColor="blue.600"
+                                borderRadius={isActive ? '0' : 'md'}
+                                _hover={{ bg: isActive ? 'blue.100' : itemHoverBg }}
+                                px={3}
+                            >
+                                <Flex align="center" gap={2}>
+                                    <Text>{item.label}</Text>
+                                    {item.badges && item.badges.length > 0 && (
+                                        <HStack spacing={1}>
+                                            {item.badges.map((badge, bIndex) => (
+                                                <Badge key={bIndex} size="xs" colorScheme={badge.colorScheme}>
+                                                    {badge.text}
+                                                </Badge>
+                                            ))}
+                                        </HStack>
+                                    )}
+                                </Flex>
+                            </Button>
+                        );
+                    })}
+                </HStack>
+            </Container>
+        </Box>
+    );
+});
+
+SecondaryNav.displayName = 'SecondaryNav';
+
+export default SecondaryNav;

src/components/Navbars/components/ThemeToggleButton.js

@@ -1,30 +1,48 @@
 // src/components/Navbars/components/ThemeToggleButton.js
+// 主题切换按钮组件 - Phase 7 优化：添加导航埋点支持
+
 import React, { memo } from 'react';
-import { IconButton, useColorMode, Tooltip } from '@chakra-ui/react';
+import { IconButton, useColorMode } from '@chakra-ui/react';
 import { SunIcon, MoonIcon } from '@chakra-ui/icons';
+import { useNavigationEvents } from '../../../hooks/useNavigationEvents';
 
 /**
  * 主题切换按钮组件
+ * 支持在亮色和暗色主题之间切换，包含导航埋点
  *
  * 性能优化：
  * - 使用 memo 避免父组件重新渲染时的不必要更新
  * - 只依赖 colorMode，当主题切换时才重新渲染
  *
+ * @param {Object} props
+ * @param {string} props.size - 按钮大小，默认 'sm'
+ * @param {string} props.variant - 按钮样式，默认 'ghost'
  * @returns {JSX.Element}
  */
-const ThemeToggleButton = memo(() => {
+const ThemeToggleButton = memo(({ size = 'sm', variant = 'ghost' }) => {
     const { colorMode, toggleColorMode } = useColorMode();
+    const navEvents = useNavigationEvents({ component: 'theme_toggle' });
+
+    const handleToggle = () => {
+        // 追踪主题切换
+        const fromTheme = colorMode;
+        const toTheme = colorMode === 'light' ? 'dark' : 'light';
+        navEvents.trackThemeChanged(fromTheme, toTheme);
+
+        // 切换主题
+        toggleColorMode();
+    };
 
     return (
-        <Tooltip label={colorMode === 'light' ? '切换到暗色模式' : '切换到亮色模式'}>
+        <IconButton
-            <IconButton
+            aria-label="切换主题"
-                aria-label="切换主题"
+            icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-                icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+            onClick={handleToggle}
-                onClick={toggleColorMode}
+            variant={variant}
-                variant="ghost"
+            size={size}
-                size="md"
+            minW={{ base: '36px', md: '40px' }}
-            />
+            minH={{ base: '36px', md: '40px' }}
-        </Tooltip>
+        />
     );
 });
 

src/hooks/useProfileCompleteness.js

@@ -0,0 +1,127 @@
+// src/hooks/useProfileCompleteness.js
+// 用户资料完整性管理自定义 Hook
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { logger } from '../utils/logger';
+import { getApiBase } from '../utils/apiConfig';
+
+/**
+ * 用户资料完整性管理 Hook
+ * 检查并管理用户资料完整度状态
+ *
+ * @param {Object} options
+ * @param {boolean} options.isAuthenticated - 是否已登录
+ * @param {Object} options.user - 用户对象
+ * @returns {{
+ *   profileCompleteness: Object|null,
+ *   showAlert: boolean,
+ *   setShowAlert: Function,
+ *   isChecking: boolean,
+ *   checkProfileCompleteness: Function
+ * }}
+ */
+export const useProfileCompleteness = ({ isAuthenticated, user }) => {
+    const [profileCompleteness, setProfileCompleteness] = useState(null);
+    const [showAlert, setShowAlert] = useState(false);
+    const [isChecking, setIsChecking] = useState(false);
+
+    // 添加标志位：追踪是否已经检查过资料完整性（避免重复请求）
+    const hasCheckedCompleteness = useRef(false);
+
+    // ⚡ 提取 userId 为独立变量，避免 user 对象引用变化导致无限循环
+    const userId = user?.id;
+    const prevUserIdRef = useRef(userId);
+    const prevIsAuthenticatedRef = useRef(isAuthenticated);
+
+    // 检查用户资料完整性
+    const checkProfileCompleteness = useCallback(async () => {
+        if (!isAuthenticated || !user) return;
+
+        // 如果已经检查过，跳过（避免重复请求）
+        if (hasCheckedCompleteness.current) {
+            logger.debug('useProfileCompleteness', '已检查过资料完整性，跳过重复请求', {
+                userId: user?.id
+            });
+            return;
+        }
+
+        try {
+            setIsChecking(true);
+            logger.debug('useProfileCompleteness', '开始检查资料完整性', {
+                userId: user?.id
+            });
+            const base = getApiBase();
+            const resp = await fetch(base + '/api/account/profile-completeness', {
+                credentials: 'include'
+            });
+
+            if (resp.ok) {
+                const data = await resp.json();
+                if (data.success) {
+                    setProfileCompleteness(data.data);
+                    // 只有微信用户且资料不完整时才显示提醒
+                    setShowAlert(data.data.needsAttention);
+                    // 标记为已检查
+                    hasCheckedCompleteness.current = true;
+                    logger.debug('useProfileCompleteness', '资料完整性检查完成', {
+                        userId: user?.id,
+                        completeness: data.data.completenessPercentage
+                    });
+                }
+            }
+        } catch (error) {
+            logger.warn('useProfileCompleteness', '检查资料完整性失败', {
+                userId: user?.id,
+                error: error.message
+            });
+        } finally {
+            setIsChecking(false);
+        }
+    }, [isAuthenticated, userId, user]);
+
+    // 监听用户变化，重置检查标志（用户切换或退出登录时）
+    useEffect(() => {
+        const userIdChanged = prevUserIdRef.current !== userId;
+        const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
+
+        if (userIdChanged || authChanged) {
+            prevUserIdRef.current = userId;
+            prevIsAuthenticatedRef.current = isAuthenticated;
+
+            if (!isAuthenticated || !user) {
+                // 用户退出登录，重置标志
+                hasCheckedCompleteness.current = false;
+                setProfileCompleteness(null);
+                setShowAlert(false);
+            }
+        }
+    }, [isAuthenticated, userId, user]);
+
+    // 用户登录后检查资料完整性
+    useEffect(() => {
+        const userIdChanged = prevUserIdRef.current !== userId;
+        const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
+
+        if ((userIdChanged || authChanged) && isAuthenticated && user) {
+            // 延迟检查，避免过于频繁
+            const timer = setTimeout(checkProfileCompleteness, 1000);
+            return () => clearTimeout(timer);
+        }
+    }, [isAuthenticated, userId, checkProfileCompleteness, user]);
+
+    // 提供重置函数，用于登出时清理
+    const resetCompleteness = useCallback(() => {
+        hasCheckedCompleteness.current = false;
+        setProfileCompleteness(null);
+        setShowAlert(false);
+    }, []);
+
+    return {
+        profileCompleteness,
+        showAlert,
+        setShowAlert,
+        isChecking,
+        checkProfileCompleteness,
+        resetCompleteness
+    };
+};