diff --git a/src/components/Navbars/components/Navigation/DesktopNav.js b/src/components/Navbars/components/Navigation/DesktopNav.js index fa9f53cd..02c6a189 100644 --- a/src/components/Navbars/components/Navigation/DesktopNav.js +++ b/src/components/Navbars/components/Navigation/DesktopNav.js @@ -12,7 +12,8 @@ import { Text, Flex, Badge, - useColorModeValue + useColorModeValue, + useDisclosure } from '@chakra-ui/react'; import { ChevronDownIcon } from '@chakra-ui/icons'; import { useNavigate, useLocation } from 'react-router-dom'; @@ -36,6 +37,12 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { // 🎯 初始化导航埋点Hook const navEvents = useNavigationEvents({ component: 'top_nav' }); + // 🎯 为每个菜单创建独立的 useDisclosure Hook + const { isOpen: isHighFreqOpen, onOpen: onHighFreqOpen, onClose: onHighFreqClose } = useDisclosure(); + const { isOpen: isMarketReviewOpen, onOpen: onMarketReviewOpen, onClose: onMarketReviewClose } = useDisclosure(); + const { isOpen: isAgentCommunityOpen, onOpen: onAgentCommunityOpen, onClose: onAgentCommunityClose } = useDisclosure(); + const { isOpen: isContactUsOpen, onOpen: onContactUsOpen, onClose: onContactUsClose } = useDisclosure(); + // 辅助函数:判断导航项是否激活 const isActive = useCallback((paths) => { return paths.some(path => location.pathname.includes(path)); @@ -46,7 +53,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { return ( {/* 高频跟踪 */} - + { borderBottom={isActive(['/community', '/concepts']) ? '2px solid' : 'none'} borderColor="blue.600" _hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.100' : 'gray.50' }} + onMouseEnter={onHighFreqOpen} + onMouseLeave={onHighFreqClose} > 高频跟踪 - + { // 🎯 追踪菜单项点击 @@ -102,7 +111,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { {/* 行情复盘 */} - + { borderBottom={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'} borderColor="blue.600" _hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.100' : 'gray.50' }} + onMouseEnter={onMarketReviewOpen} + onMouseLeave={onMarketReviewClose} > 行情复盘 - + navigate('/limit-analyse')} borderRadius="md" @@ -160,11 +171,17 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { {/* AGENT社群 */} - - }> + + } + onMouseEnter={onAgentCommunityOpen} + onMouseLeave={onAgentCommunityClose} + > AGENT社群 - + { {/* 联系我们 */} - - }> + + } + onMouseEnter={onContactUsOpen} + onMouseLeave={onContactUsClose} + > 联系我们 - + 敬请期待 diff --git a/src/components/Navbars/components/Navigation/MoreMenu.js b/src/components/Navbars/components/Navigation/MoreMenu.js index 13c6ebd4..936a21f3 100644 --- a/src/components/Navbars/components/Navigation/MoreMenu.js +++ b/src/components/Navbars/components/Navigation/MoreMenu.js @@ -12,7 +12,8 @@ import { Text, Flex, HStack, - Badge + Badge, + useDisclosure } from '@chakra-ui/react'; import { ChevronDownIcon } from '@chakra-ui/icons'; import { useNavigate, useLocation } from 'react-router-dom'; @@ -29,6 +30,9 @@ const MoreMenu = memo(({ isAuthenticated, user }) => { const navigate = useNavigate(); const location = useLocation(); + // 🎯 为"更多"菜单创建 useDisclosure Hook + const { isOpen, onOpen, onClose } = useDisclosure(); + // 辅助函数:判断导航项是否激活 const isActive = useCallback((paths) => { return paths.some(path => location.pathname.includes(path)); @@ -37,16 +41,18 @@ const MoreMenu = memo(({ isAuthenticated, user }) => { if (!isAuthenticated || !user) return null; return ( - + } fontWeight="medium" + onMouseEnter={onOpen} + onMouseLeave={onClose} > 更多 - + {/* 高频跟踪组 */} 高频跟踪 { const navigate = useNavigate(); const hoverBg = useColorModeValue('gray.100', 'gray.700'); + // 🎯 为个人中心菜单创建 useDisclosure Hook + const { isOpen, onOpen, onClose } = useDisclosure(); + // 获取显示名称 const getDisplayName = () => { if (user.nickname) return user.nickname; @@ -41,17 +45,19 @@ const PersonalCenterMenu = memo(({ user, handleLogout }) => { }; return ( - + } _hover={{ bg: hoverBg }} + onMouseEnter={onOpen} + onMouseLeave={onClose} > 个人中心 - + {/* 用户信息区 */} {getDisplayName()}