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

fix: 修复导航栏深色模式残留问题

Browse Source 
- HomeNavbar: 移除 useColorModeValue，直接使用浅色值
- BrandLogo: 移除 useColorModeValue，品牌文字使用 gray.800
- DesktopNav: 移除 useColorModeValue，菜单按钮使用 gray.700
- DesktopNav: 所有 MenuList 添加白色背景和浅色边框
- DesktopNav: 所有 MenuItem 添加统一的浅色主题样式

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-29 18:53:16 +08:00
parent e714dc1dff
commit a929eabc7f
3 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Navbars/HomeNavbar.js
View File

@@ -17,11 +17,9 @@ import {
IconButton,
useBreakpointValue,
Spinner,
useColorMode,
useColorModeValue,
useToast,
} from '@chakra-ui/react';
import { ChevronDown, Menu as MenuIcon, Sun, Moon, Star, Calendar, User, Settings, Home, LogOut, Crown } from 'lucide-react';
import { ChevronDown, Menu as MenuIcon, Star, Calendar, User, Settings, Home, LogOut, Crown } from 'lucide-react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { useAuthModal } from '../../hooks/useAuthModal';
@@ -63,11 +61,11 @@ export default function HomeNavbar() {
const isDesktop = useBreakpointValue({ base: false, md: false, lg: true });
const { user, isAuthenticated, logout, isLoading } = useAuth();
const { openAuthModal } = useAuthModal();
const { colorMode, toggleColorMode } = useColorMode();
const navbarBg = useColorModeValue('white', 'gray.800');
const navbarBorder = useColorModeValue('gray.200', 'gray.700');
const brandText = useColorModeValue('gray.800', 'white');
const brandHover = useColorModeValue('blue.600', 'blue.300');
// 导航栏颜色（已移除深色模式支持）
const navbarBg = 'white';
const navbarBorder = 'gray.200';
const brandText = 'gray.800';
const brandHover = 'blue.600';
const toast = useToast();
// 🎯 初始化导航埋点Hook

7
src/components/Navbars/components/BrandLogo.js
View File

@@ -1,6 +1,6 @@
// src/components/Navbars/components/BrandLogo.js
import React, { memo } from 'react';
import { HStack, Text, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
import { HStack, Text, useBreakpointValue } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';
import { useNavigationEvents } from '../../../hooks/useNavigationEvents';
@@ -16,8 +16,9 @@ import { useNavigationEvents } from '../../../hooks/useNavigationEvents';
const BrandLogo = memo(() => {
const navigate = useNavigate();
const isMobile = useBreakpointValue({ base: true, md: false });
const brandText = useColorModeValue('gray.800', 'white');
const brandHover = useColorModeValue('blue.600', 'blue.300');
// 品牌文字颜色（已移除深色模式支持）
const brandText = 'gray.800';
const brandHover = 'blue.600';
// 🎯 初始化导航埋点Hook
const navEvents = useNavigationEvents({ component: 'brand_logo' });

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

@@ -15,7 +15,6 @@ import {
Badge,
Image,
Box,
useColorModeValue
} from '@chakra-ui/react';
import { ChevronDown } from 'lucide-react';
import { useNavigate, useLocation } from 'react-router-dom';
@@ -34,8 +33,16 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
const navigate = useNavigate();
const location = useLocation();
// ⚠️ 必须在组件顶层调用所有Hooks（不能在JSX中调用）
const contactTextColor = useColorModeValue('gray.500', 'gray.300');
// 导航颜色（已移除深色模式支持）
const contactTextColor = 'gray.500';
const menuTextColor = 'gray.700'; // 菜单按钮文字颜色
// MenuItem 通用样式（强制浅色主题）
const menuItemStyle = {
color: 'gray.700',
_hover: { bg: 'gray.100', color: 'gray.900' },
_focus: { bg: 'gray.100', color: 'gray.900' },
};
// 🎯 初始化导航埋点Hook
const navEvents = useNavigationEvents({ component: 'top_nav' });
@@ -62,7 +69,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
variant="ghost"
rightIcon={<ChevronDown size={16} color={isActive(['/community', '/concepts']) ? 'white' : 'currentColor'} />}
bg={isActive(['/community', '/concepts']) ? 'blue.600' : 'transparent'}
color={isActive(['/community', '/concepts']) ? 'white' : 'inherit'}
color={isActive(['/community', '/concepts']) ? 'white' : menuTextColor}
fontWeight={isActive(['/community', '/concepts']) ? 'bold' : 'normal'}
border={isActive(['/community', '/concepts']) ? '2px solid' : 'none'}
borderColor={isActive(['/community', '/concepts']) ? 'blue.300' : 'transparent'}
@@ -77,6 +84,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuList
minW="260px"
p={2}
bg="white"
borderColor="gray.200"
boxShadow="lg"
onMouseEnter={highFreqMenu.handleMouseEnter}
onMouseLeave={highFreqMenu.handleMouseLeave}
>
@@ -92,6 +102,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'}
borderColor="blue.600"
fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'}
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm">事件中心</Text>
@@ -113,6 +124,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'}
borderColor="blue.600"
fontWeight={location.pathname.includes('/concepts') ? 'bold' : 'normal'}
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm">概念中心</Text>
@@ -129,7 +141,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
variant="ghost"
rightIcon={<ChevronDown size={16} color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'currentColor'} />}
bg={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.600' : 'transparent'}
color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'inherit'}
color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : menuTextColor}
fontWeight={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'bold' : 'normal'}
border={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'}
borderColor={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.300' : 'transparent'}
@@ -144,6 +156,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuList
minW="260px"
p={2}
bg="white"
borderColor="gray.200"
boxShadow="lg"
onMouseEnter={marketReviewMenu.handleMouseEnter}
onMouseLeave={marketReviewMenu.handleMouseLeave}
>
@@ -157,6 +172,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderLeft={location.pathname.includes('/limit-analyse') ? '3px solid' : 'none'}
borderColor="blue.600"
fontWeight={location.pathname.includes('/limit-analyse') ? 'bold' : 'normal'}
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm">涨停分析</Text>
@@ -173,6 +189,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderLeft={location.pathname.includes('/stocks') ? '3px solid' : 'none'}
borderColor="blue.600"
fontWeight={location.pathname.includes('/stocks') ? 'bold' : 'normal'}
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm">个股中心</Text>
@@ -185,6 +202,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
bg="transparent"
opacity={0.5}
cursor="not-allowed"
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm" color="gray.400">模拟盘</Text>
@@ -201,7 +219,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
variant="ghost"
rightIcon={<ChevronDown size={16} color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'currentColor'} />}
bg={isActive(['/agent-chat', '/value-forum']) ? 'blue.600' : 'transparent'}
color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'inherit'}
color={isActive(['/agent-chat', '/value-forum']) ? 'white' : menuTextColor}
fontWeight={isActive(['/agent-chat', '/value-forum']) ? 'bold' : 'normal'}
border={isActive(['/agent-chat', '/value-forum']) ? '2px solid' : 'none'}
borderColor={isActive(['/agent-chat', '/value-forum']) ? 'blue.300' : 'transparent'}
@@ -216,6 +234,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuList
minW="300px"
p={2}
bg="white"
borderColor="gray.200"
boxShadow="lg"
onMouseEnter={agentCommunityMenu.handleMouseEnter}
onMouseLeave={agentCommunityMenu.handleMouseLeave}
>
@@ -231,6 +252,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderLeft={location.pathname.includes('/agent-chat') ? '3px solid' : 'none'}
borderColor="blue.600"
fontWeight={location.pathname.includes('/agent-chat') ? 'bold' : 'normal'}
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm">AI聊天助手</Text>
@@ -250,6 +272,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderLeft={location.pathname.includes('/value-forum') ? '3px solid' : 'none'}
borderColor="blue.600"
fontWeight={location.pathname.includes('/value-forum') ? 'bold' : 'normal'}
{...menuItemStyle}
>
<Flex justify="space-between" align="center" w="100%">
<Text fontSize="sm">价值论坛</Text>
@@ -263,6 +286,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
isDisabled
cursor="not-allowed"
color="gray.400"
{...menuItemStyle}
>
<Text fontSize="sm" color="gray.400">个股社区</Text>
</MenuItem>
@@ -274,7 +298,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuButton
as={Button}
variant="ghost"
color={menuTextColor}
rightIcon={<ChevronDown size={16} />}
_hover={{ bg: 'gray.50' }}
onMouseEnter={contactUsMenu.handleMouseEnter}
onMouseLeave={contactUsMenu.handleMouseLeave}
onClick={contactUsMenu.handleClick}
@@ -284,6 +310,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuList
minW="340px"
p={4}
bg="white"
borderColor="gray.200"
boxShadow="lg"
onMouseEnter={contactUsMenu.handleMouseEnter}
onMouseLeave={contactUsMenu.handleMouseLeave}
>