From 173b13bc70112ac3dd000305fee5403bb9beca7b Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 29 Oct 2025 12:52:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E4=B8=8A=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Navbars/HomeNavbar.js | 42 ++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js
index 689b84cd..288b3b0c 100644
--- a/src/components/Navbars/HomeNavbar.js
+++ b/src/components/Navbars/HomeNavbar.js
@@ -51,6 +51,7 @@ import SubscriptionButton from '../Subscription/SubscriptionButton';
 import SubscriptionModal from '../Subscription/SubscriptionModal';
 import { CrownIcon, TooltipContent } from '../Subscription/CrownTooltip';
 import InvestmentCalendar from '../../views/Community/components/InvestmentCalendar';
+import { useNavigationEvents } from '../../hooks/useNavigationEvents';
 
 /** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
 const SecondaryNav = ({ showCompletenessAlert }) => {
@@ -61,6 +62,9 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
     // ⚠️ 必须在组件顶层调用所有Hooks（不能在JSX中调用）
     const borderColorValue = useColorModeValue('gray.200', 'gray.600');
 
+    // 🎯 初始化导航埋点Hook
+    const navEvents = useNavigationEvents({ component: 'secondary_nav' });
+
     // 定义二级导航结构
     const secondaryNavConfig = {
         '/community': {
@@ -162,7 +166,11 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
                         ) : (
                             <Button
                                 key={index}
-                                onClick={() => navigate(item.path)}
+                                onClick={() => {
+                                    // 🎯 追踪侧边栏菜单点击
+                                    navEvents.trackSidebarMenuClicked(item.label, item.path, 2, false);
+                                    navigate(item.path);
+                                }}
                                 size="sm"
                                 variant="ghost"
                                 bg={isActive ? 'blue.50' : 'transparent'}
@@ -313,6 +321,9 @@ const NavItems = ({ isAuthenticated, user }) => {
     // ⚠️ 必须在组件顶层调用所有Hooks（不能在JSX中调用）
     const contactTextColor = useColorModeValue('gray.500', 'gray.300');
 
+    // 🎯 初始化导航埋点Hook
+    const navEvents = useNavigationEvents({ component: 'top_nav' });
+
     // 辅助函数：判断导航项是否激活
     const isActive = useCallback((paths) => {
         return paths.some(path => location.pathname.includes(path));
@@ -337,7 +348,11 @@ const NavItems = ({ isAuthenticated, user }) => {
                     </MenuButton>
                     <MenuList minW="260px" p={2}>
                         <MenuItem
-                            onClick={() => navigate('/community')}
+                            onClick={() => {
+                                // 🎯 追踪菜单项点击
+                                navEvents.trackMenuItemClicked('事件中心', 'dropdown', '/community');
+                                navigate('/community');
+                            }}
                             borderRadius="md"
                             bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
                             borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'}
@@ -353,7 +368,11 @@ const NavItems = ({ isAuthenticated, user }) => {
                             </Flex>
                         </MenuItem>
                         <MenuItem
-                            onClick={() => navigate('/concepts')}
+                            onClick={() => {
+                                // 🎯 追踪菜单项点击
+                                navEvents.trackMenuItemClicked('概念中心', 'dropdown', '/concepts');
+                                navigate('/concepts');
+                            }}
                             borderRadius="md"
                             bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
                             borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'}
@@ -489,6 +508,9 @@ export default function HomeNavbar() {
     const brandHover = useColorModeValue('blue.600', 'blue.300');
     const toast = useToast();
 
+    // 🎯 初始化导航埋点Hook
+    const navEvents = useNavigationEvents({ component: 'main_navbar' });
+
     // ⚡ 提取 userId 为独立变量，避免 user 对象引用变化导致无限循环
     const userId = user?.id;
     const prevUserIdRef = React.useRef(userId);
@@ -882,7 +904,11 @@ export default function HomeNavbar() {
                                 color={brandText}
                                 cursor="pointer"
                                 _hover={{ color: brandHover }}
-                                onClick={() => navigate('/home')}
+                                onClick={() => {
+                                    // 🎯 追踪Logo点击
+                                    navEvents.trackLogoClicked();
+                                    navigate('/home');
+                                }}
                                 style={{ minWidth: isMobile ? '100px' : '140px' }}
                                 noOfLines={1}
                             >
@@ -912,7 +938,13 @@ export default function HomeNavbar() {
                             <IconButton
                                 aria-label="切换主题"
                                 icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-                                onClick={toggleColorMode}
+                                onClick={() => {
+                                    // 🎯 追踪主题切换
+                                    const fromTheme = colorMode;
+                                    const toTheme = colorMode === 'light' ? 'dark' : 'light';
+                                    navEvents.trackThemeChanged(fromTheme, toTheme);
+                                    toggleColorMode();
+                                }}
                                 variant="ghost"
                                 size="sm"
                                 minW={{ base: '36px', md: '40px' }}