diff --git a/src/components/Navbars/components/Navigation/DesktopNav.js b/src/components/Navbars/components/Navigation/DesktopNav.js index e644c804..7dea5129 100644 --- a/src/components/Navbars/components/Navigation/DesktopNav.js +++ b/src/components/Navbars/components/Navigation/DesktopNav.js @@ -44,6 +44,12 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { _focus: { bg: 'gray.100', color: 'gray.900' }, }; + // MenuButton 通用样式(菜单展开时保持浅色主题) + const getMenuButtonStyle = (isActiveState) => ({ + _hover: { bg: isActiveState ? 'blue.700' : 'gray.100' }, + _expanded: { bg: isActiveState ? 'blue.700' : 'gray.100', color: isActiveState ? 'white' : menuTextColor }, + }); + // 🎯 初始化导航埋点Hook const navEvents = useNavigationEvents({ component: 'top_nav' }); @@ -74,7 +80,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { border={isActive(['/community', '/concepts']) ? '2px solid' : 'none'} borderColor={isActive(['/community', '/concepts']) ? 'blue.300' : 'transparent'} borderRadius="md" - _hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.700' : 'gray.50' }} + {...getMenuButtonStyle(isActive(['/community', '/concepts']))} onMouseEnter={highFreqMenu.handleMouseEnter} onMouseLeave={highFreqMenu.handleMouseLeave} onClick={highFreqMenu.handleClick} @@ -146,7 +152,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { border={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'} borderColor={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.300' : 'transparent'} borderRadius="md" - _hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.700' : 'gray.50' }} + {...getMenuButtonStyle(isActive(['/limit-analyse', '/stocks', '/trading-simulation']))} onMouseEnter={marketReviewMenu.handleMouseEnter} onMouseLeave={marketReviewMenu.handleMouseLeave} onClick={marketReviewMenu.handleClick} @@ -224,7 +230,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { border={isActive(['/agent-chat', '/value-forum']) ? '2px solid' : 'none'} borderColor={isActive(['/agent-chat', '/value-forum']) ? 'blue.300' : 'transparent'} borderRadius="md" - _hover={{ bg: isActive(['/agent-chat', '/value-forum']) ? 'blue.700' : 'gray.50' }} + {...getMenuButtonStyle(isActive(['/agent-chat', '/value-forum']))} onMouseEnter={agentCommunityMenu.handleMouseEnter} onMouseLeave={agentCommunityMenu.handleMouseLeave} onClick={agentCommunityMenu.handleClick} @@ -300,7 +306,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { variant="ghost" color={menuTextColor} rightIcon={} - _hover={{ bg: 'gray.50' }} + {...getMenuButtonStyle(false)} onMouseEnter={contactUsMenu.handleMouseEnter} onMouseLeave={contactUsMenu.handleMouseLeave} onClick={contactUsMenu.handleClick}