From 42acc8fac099d64cd1bd7545fbb655b07263bfe5 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Thu, 16 Oct 2025 17:50:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=BF=80=E6=B4=BB=E7=8A=B6=E6=80=81=E6=A3=80=E6=B5=8B=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 使用 React Router 的 useLocation 钩子检测当前路径 - 为顶级导航菜单添加激活状态样式（蓝色背景 + 底部边框） - 为下拉菜单项添加激活状态样式（蓝色背景 + 左侧边框） - 支持桌面端和移动端抽屉菜单 - 解决用户无法感知当前导航位置的 UX 问题 激活路由映射： - 高频跟踪: /community, /concepts - 行情复盘: /limit-analyse, /stocks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/Navbars/HomeNavbar.js | 67 ++++++++++++++++++++++++++-- 1 file changed, 64 insertions(+), 3 deletions(-) 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'} > 个股中心