vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复一级导航菜单展开时文字颜色消失问题

Browse Source 
- 添加 getMenuButtonStyle 函数统一管理 MenuButton 样式
- 为所有 MenuButton 添加 _expanded 状态样式
- 菜单展开时保持浅色主题（背景 gray.100，文字 gray.700）

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-30 10:24:47 +08:00
parent a929eabc7f
commit cc4ecf4c76
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Navbars/components/Navigation/DesktopNav.js
View File

@@ -44,6 +44,12 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
_focus: { bg: 'gray.100', color: 'gray.900' }, _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 // 🎯 初始化导航埋点Hook
const navEvents = useNavigationEvents({ component: 'top_nav' }); const navEvents = useNavigationEvents({ component: 'top_nav' });
@@ -74,7 +80,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
border={isActive(['/community', '/concepts']) ? '2px solid' : 'none'} border={isActive(['/community', '/concepts']) ? '2px solid' : 'none'}
borderColor={isActive(['/community', '/concepts']) ? 'blue.300' : 'transparent'} borderColor={isActive(['/community', '/concepts']) ? 'blue.300' : 'transparent'}
borderRadius="md" borderRadius="md"
_hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.700' : 'gray.50' }} {...getMenuButtonStyle(isActive(['/community', '/concepts']))}
onMouseEnter={highFreqMenu.handleMouseEnter} onMouseEnter={highFreqMenu.handleMouseEnter}
onMouseLeave={highFreqMenu.handleMouseLeave} onMouseLeave={highFreqMenu.handleMouseLeave}
onClick={highFreqMenu.handleClick} onClick={highFreqMenu.handleClick}
@@ -146,7 +152,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
border={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'} border={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'}
borderColor={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.300' : 'transparent'} borderColor={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.300' : 'transparent'}
borderRadius="md" borderRadius="md"
_hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.700' : 'gray.50' }} {...getMenuButtonStyle(isActive(['/limit-analyse', '/stocks', '/trading-simulation']))}
onMouseEnter={marketReviewMenu.handleMouseEnter} onMouseEnter={marketReviewMenu.handleMouseEnter}
onMouseLeave={marketReviewMenu.handleMouseLeave} onMouseLeave={marketReviewMenu.handleMouseLeave}
onClick={marketReviewMenu.handleClick} onClick={marketReviewMenu.handleClick}
@@ -224,7 +230,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
border={isActive(['/agent-chat', '/value-forum']) ? '2px solid' : 'none'} border={isActive(['/agent-chat', '/value-forum']) ? '2px solid' : 'none'}
borderColor={isActive(['/agent-chat', '/value-forum']) ? 'blue.300' : 'transparent'} borderColor={isActive(['/agent-chat', '/value-forum']) ? 'blue.300' : 'transparent'}
borderRadius="md" borderRadius="md"
_hover={{ bg: isActive(['/agent-chat', '/value-forum']) ? 'blue.700' : 'gray.50' }} {...getMenuButtonStyle(isActive(['/agent-chat', '/value-forum']))}
onMouseEnter={agentCommunityMenu.handleMouseEnter} onMouseEnter={agentCommunityMenu.handleMouseEnter}
onMouseLeave={agentCommunityMenu.handleMouseLeave} onMouseLeave={agentCommunityMenu.handleMouseLeave}
onClick={agentCommunityMenu.handleClick} onClick={agentCommunityMenu.handleClick}
@@ -300,7 +306,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
variant="ghost" variant="ghost"
color={menuTextColor} color={menuTextColor}
rightIcon={<ChevronDown size={16} />} rightIcon={<ChevronDown size={16} />}
_hover={{ bg: 'gray.50' }} {...getMenuButtonStyle(false)}
onMouseEnter={contactUsMenu.handleMouseEnter} onMouseEnter={contactUsMenu.handleMouseEnter}
onMouseLeave={contactUsMenu.handleMouseLeave} onMouseLeave={contactUsMenu.handleMouseLeave}
onClick={contactUsMenu.handleClick} onClick={contactUsMenu.handleClick}