diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js index a106fb07..f9bcf1a0 100644 --- a/src/components/Navbars/HomeNavbar.js +++ b/src/components/Navbars/HomeNavbar.js @@ -34,7 +34,7 @@ import { } from '@chakra-ui/react'; import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons'; import { FiStar, FiCalendar } from 'react-icons/fi'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import { useAuth } from '../../contexts/AuthContext'; import { useAuthModal } from '../../contexts/AuthModalContext'; @@ -45,12 +45,28 @@ import { useAuthModal } from '../../contexts/AuthModalContext'; */ const NavItems = ({ isAuthenticated, user }) => { const navigate = useNavigate(); + const location = useLocation(); + + // 辅助函数:判断导航项是否激活 + const isActive = (paths) => { + return paths.some(path => location.pathname.includes(path)); + }; if (isAuthenticated && user) { return ( - }> + } + bg={isActive(['/community', '/concepts']) ? 'blue.50' : 'transparent'} + color={isActive(['/community', '/concepts']) ? 'blue.600' : 'inherit'} + fontWeight={isActive(['/community', '/concepts']) ? 'bold' : 'normal'} + borderBottom={isActive(['/community', '/concepts']) ? '2px solid' : 'none'} + borderColor="blue.600" + _hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.100' : 'gray.50' }} + > 高频跟踪 @@ -62,6 +78,10 @@ const NavItems = ({ isAuthenticated, user }) => { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'} > 新闻催化分析 @@ -78,6 +98,10 @@ const NavItems = ({ isAuthenticated, user }) => { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/concepts') ? 'bold' : 'normal'} > 概念中心 @@ -89,7 +113,17 @@ const NavItems = ({ isAuthenticated, user }) => { - }> + } + bg={isActive(['/limit-analyse', '/stocks']) ? 'blue.50' : 'transparent'} + color={isActive(['/limit-analyse', '/stocks']) ? 'blue.600' : 'inherit'} + fontWeight={isActive(['/limit-analyse', '/stocks']) ? 'bold' : 'normal'} + borderBottom={isActive(['/limit-analyse', '/stocks']) ? '2px solid' : 'none'} + borderColor="blue.600" + _hover={{ bg: isActive(['/limit-analyse', '/stocks']) ? 'blue.100' : 'gray.50' }} + > 行情复盘 @@ -101,6 +135,10 @@ const NavItems = ({ isAuthenticated, user }) => { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/limit-analyse') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/limit-analyse') ? 'bold' : 'normal'} > 涨停分析 @@ -114,6 +152,10 @@ const NavItems = ({ isAuthenticated, user }) => { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/stocks') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/stocks') ? 'bold' : 'normal'} > 个股中心 @@ -809,6 +851,9 @@ export default function HomeNavbar() { cursor="pointer" color="blue.500" fontWeight="bold" + bg={location.pathname === '/home' ? 'blue.50' : 'transparent'} + borderLeft={location.pathname === '/home' ? '3px solid' : 'none'} + borderColor="blue.600" > 🏠 首页 @@ -826,6 +871,10 @@ export default function HomeNavbar() { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'} > 新闻催化分析 @@ -845,6 +894,10 @@ export default function HomeNavbar() { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/concepts') ? 'bold' : 'normal'} > 概念中心 @@ -867,6 +920,10 @@ export default function HomeNavbar() { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/limit-analyse') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/limit-analyse') ? 'bold' : 'normal'} > 涨停分析 @@ -883,6 +940,10 @@ export default function HomeNavbar() { borderRadius="md" _hover={{ bg: 'gray.100' }} cursor="pointer" + bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'} + borderLeft={location.pathname.includes('/stocks') ? '3px solid' : 'none'} + borderColor="blue.600" + fontWeight={location.pathname.includes('/stocks') ? 'bold' : 'normal'} > 个股中心