From 2461ce81c98242b4a39f48a6c205254f5e7f2827 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Thu, 30 Oct 2025 19:06:21 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=20hover=20=E8=A7=A6=E5=8F=91=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复之前提交(47f84c5)中使用的无效 trigger="hover" 属性。 Chakra UI Menu 组件不支持 trigger 属性，改用正确的实现方式： **实现方式：** - 使用 useDisclosure Hook 管理菜单开关状态 - 为 MenuButton 和 MenuList 添加 onMouseEnter/onMouseLeave 事件 - 这样可以确保鼠标从按钮移到菜单列表时保持打开状态 **修改的组件：** - DesktopNav.js: 为4个菜单添加独立的 useDisclosure Hook - MoreMenu.js: 平板版"更多"菜单 - PersonalCenterMenu.js: 个人中心菜单 **技术要点：** - MenuButton 和 MenuList 都需要 hover 事件处理 - 每个菜单使用独立的 useDisclosure 实例 - 符合 Chakra UI 官方推荐的 hover 菜单实现方式 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/Navigation/DesktopNav.js | 45 ++++++++++++++----- .../Navbars/components/Navigation/MoreMenu.js | 12 +++-- .../Navigation/PersonalCenterMenu.js | 12 +++-- 3 files changed, 52 insertions(+), 17 deletions(-) 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()}