From a929eabc7fac00ee51780418511e9f6961b59de5 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 29 Dec 2025 18:53:16 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=A0=8F=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=AE=8B=E7=95=99?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- src/components/Navbars/HomeNavbar.js | 14 +++---- .../Navbars/components/BrandLogo.js | 7 ++-- .../components/Navigation/DesktopNav.js | 41 ++++++++++++++++--- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js index 6e65825a..fc2c579e 100644 --- a/src/components/Navbars/HomeNavbar.js +++ b/src/components/Navbars/HomeNavbar.js @@ -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 diff --git a/src/components/Navbars/components/BrandLogo.js b/src/components/Navbars/components/BrandLogo.js index 0ee1820b..19991f62 100644 --- a/src/components/Navbars/components/BrandLogo.js +++ b/src/components/Navbars/components/BrandLogo.js @@ -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' }); diff --git a/src/components/Navbars/components/Navigation/DesktopNav.js b/src/components/Navbars/components/Navigation/DesktopNav.js index 91154cb4..e644c804 100644 --- a/src/components/Navbars/components/Navigation/DesktopNav.js +++ b/src/components/Navbars/components/Navigation/DesktopNav.js @@ -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={} 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 }) => { @@ -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} > 事件中心 @@ -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} > 概念中心 @@ -129,7 +141,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { variant="ghost" rightIcon={} 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 }) => { @@ -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} > 涨停分析 @@ -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} > 个股中心 @@ -185,6 +202,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { bg="transparent" opacity={0.5} cursor="not-allowed" + {...menuItemStyle} > 模拟盘 @@ -201,7 +219,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { variant="ghost" rightIcon={} 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 }) => { @@ -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} > AI聊天助手 @@ -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} > 价值论坛 @@ -263,6 +286,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { isDisabled cursor="not-allowed" color="gray.400" + {...menuItemStyle} > 个股社区 @@ -274,7 +298,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => { } + _hover={{ bg: 'gray.50' }} onMouseEnter={contactUsMenu.handleMouseEnter} onMouseLeave={contactUsMenu.handleMouseLeave} onClick={contactUsMenu.handleClick} @@ -284,6 +310,9 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {