feat: bugfix

2025-11-03 19:45:32 +08:00
parent 0e66bb471f
commit ce495ed6fa
4 changed files with 217 additions and 44 deletions
--- a/src/components/Navbars/components/Navigation/DesktopNav.js
+++ b/src/components/Navbars/components/Navigation/DesktopNav.js
@@ -12,12 +12,12 @@ import {
    Text,
    Flex,
    Badge,
-    useColorModeValue,
-    useDisclosure
+    useColorModeValue
 } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useNavigationEvents } from '../../../../hooks/useNavigationEvents';
+import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';

 /**
 * 桌面版主导航菜单组件
@@ -37,11 +37,11 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
    // 🎯 初始化导航埋点Hook
    const navEvents = useNavigationEvents({ component: 'top_nav' });

-    // 🎯 为每个菜单创建独立的 useDisclosure Hook
-    const { isOpen: isHighFreqOpen, onOpen: onHighFreqOpen, onClose: onHighFreqClose } = useDisclosure();
-    const { isOpen: isMarketReviewOpen, onOpen: onMarketReviewOpen, onClose: onMarketReviewClose } = useDisclosure();
-    const { isOpen: isAgentCommunityOpen, onOpen: onAgentCommunityOpen, onClose: onAgentCommunityClose } = useDisclosure();
-    const { isOpen: isContactUsOpen, onOpen: onContactUsOpen, onClose: onContactUsClose } = useDisclosure();
+    // 🎯 为每个菜单创建延迟关闭控制（200ms 延迟）
+    const highFreqMenu = useDelayedMenu({ closeDelay: 200 });
+    const marketReviewMenu = useDelayedMenu({ closeDelay: 200 });
+    const agentCommunityMenu = useDelayedMenu({ closeDelay: 200 });
+    const contactUsMenu = useDelayedMenu({ closeDelay: 200 });

    // 辅助函数：判断导航项是否激活
    const isActive = useCallback((paths) => {
@@ -53,7 +53,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
    return (
        <HStack spacing={8}>
            {/* 高频跟踪 */}
-            <Menu isOpen={isHighFreqOpen} onClose={onHighFreqClose}>
+            <Menu isOpen={highFreqMenu.isOpen} onClose={highFreqMenu.onClose}>
                <MenuButton
                    as={Button}
                    variant="ghost"
@@ -64,18 +64,24 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                    borderBottom={isActive(['/community', '/concepts']) ? '2px solid' : 'none'}
                    borderColor="blue.600"
                    _hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.100' : 'gray.50' }}
-                    onMouseEnter={onHighFreqOpen}
-                    onMouseLeave={onHighFreqClose}
+                    onMouseEnter={highFreqMenu.handleMouseEnter}
+                    onMouseLeave={highFreqMenu.handleMouseLeave}
+                    onClick={highFreqMenu.handleClick}
                >
                    高频跟踪
                </MenuButton>
-                <MenuList minW="260px" p={2} onMouseEnter={onHighFreqOpen}>
+                <MenuList
+                    minW="260px"
+                    p={2}
+                    onMouseEnter={highFreqMenu.handleMouseEnter}
+                    onMouseLeave={highFreqMenu.handleMouseLeave}
+                >
                    <MenuItem
                        onClick={() => {
                            // 🎯 追踪菜单项点击
                            navEvents.trackMenuItemClicked('事件中心', 'dropdown', '/community');
                            navigate('/community');
-                            onHighFreqClose(); // 跳转后关闭菜单
+                            highFreqMenu.onClose(); // 跳转后关闭菜单
                        }}
                        borderRadius="md"
                        bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
@@ -96,7 +102,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                            // 🎯 追踪菜单项点击
                            navEvents.trackMenuItemClicked('概念中心', 'dropdown', '/concepts');
                            navigate('/concepts');
-                            onHighFreqClose(); // 跳转后关闭菜单
+                            highFreqMenu.onClose(); // 跳转后关闭菜单
                        }}
                        borderRadius="md"
                        bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
@@ -113,7 +119,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
            </Menu>

            {/* 行情复盘 */}
-            <Menu isOpen={isMarketReviewOpen} onClose={onMarketReviewClose}>
+            <Menu isOpen={marketReviewMenu.isOpen} onClose={marketReviewMenu.onClose}>
                <MenuButton
                    as={Button}
                    variant="ghost"
@@ -124,16 +130,22 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                    borderBottom={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'}
                    borderColor="blue.600"
                    _hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.100' : 'gray.50' }}
-                    onMouseEnter={onMarketReviewOpen}
-                    onMouseLeave={onMarketReviewClose}
+                    onMouseEnter={marketReviewMenu.handleMouseEnter}
+                    onMouseLeave={marketReviewMenu.handleMouseLeave}
+                    onClick={marketReviewMenu.handleClick}
                >
                    行情复盘
                </MenuButton>
-                <MenuList minW="260px" p={2} onMouseEnter={onMarketReviewOpen}>
+                <MenuList
+                    minW="260px"
+                    p={2}
+                    onMouseEnter={marketReviewMenu.handleMouseEnter}
+                    onMouseLeave={marketReviewMenu.handleMouseLeave}
+                >
                    <MenuItem
                        onClick={() => {
                            navigate('/limit-analyse');
-                            onMarketReviewClose(); // 跳转后关闭菜单
+                            marketReviewMenu.onClose(); // 跳转后关闭菜单
                        }}
                        borderRadius="md"
                        bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'}
@@ -149,7 +161,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                    <MenuItem
                        onClick={() => {
                            navigate('/stocks');
-                            onMarketReviewClose(); // 跳转后关闭菜单
+                            marketReviewMenu.onClose(); // 跳转后关闭菜单
                        }}
                        borderRadius="md"
                        bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'}
@@ -165,7 +177,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                    <MenuItem
                        onClick={() => {
                            navigate('/trading-simulation');
-                            onMarketReviewClose(); // 跳转后关闭菜单
+                            marketReviewMenu.onClose(); // 跳转后关闭菜单
                        }}
                        borderRadius="md"
                        bg={location.pathname.includes('/trading-simulation') ? 'blue.50' : 'transparent'}
@@ -182,17 +194,23 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
            </Menu>

            {/* AGENT社群 */}
-            <Menu isOpen={isAgentCommunityOpen} onClose={onAgentCommunityClose}>
+            <Menu isOpen={agentCommunityMenu.isOpen} onClose={agentCommunityMenu.onClose}>
                <MenuButton
                    as={Button}
                    variant="ghost"
                    rightIcon={<ChevronDownIcon />}
-                    onMouseEnter={onAgentCommunityOpen}
-                    onMouseLeave={onAgentCommunityClose}
+                    onMouseEnter={agentCommunityMenu.handleMouseEnter}
+                    onMouseLeave={agentCommunityMenu.handleMouseLeave}
+                    onClick={agentCommunityMenu.handleClick}
                >
                    AGENT社群
                </MenuButton>
-                <MenuList minW="300px" p={4} onMouseEnter={onAgentCommunityOpen}>
+                <MenuList
+                    minW="300px"
+                    p={4}
+                    onMouseEnter={agentCommunityMenu.handleMouseEnter}
+                    onMouseLeave={agentCommunityMenu.handleMouseLeave}
+                >
                    <MenuItem
                        isDisabled
                        cursor="not-allowed"
@@ -211,17 +229,23 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
            </Menu>

            {/* 联系我们 */}
-            <Menu isOpen={isContactUsOpen} onClose={onContactUsClose}>
+            <Menu isOpen={contactUsMenu.isOpen} onClose={contactUsMenu.onClose}>
                <MenuButton
                    as={Button}
                    variant="ghost"
                    rightIcon={<ChevronDownIcon />}
-                    onMouseEnter={onContactUsOpen}
-                    onMouseLeave={onContactUsClose}
+                    onMouseEnter={contactUsMenu.handleMouseEnter}
+                    onMouseLeave={contactUsMenu.handleMouseLeave}
+                    onClick={contactUsMenu.handleClick}
                >
                    联系我们
                </MenuButton>
-                <MenuList minW="260px" p={4} onMouseEnter={onContactUsOpen}>
+                <MenuList
+                    minW="260px"
+                    p={4}
+                    onMouseEnter={contactUsMenu.handleMouseEnter}
+                    onMouseLeave={contactUsMenu.handleMouseLeave}
+                >
                    <Text fontSize="sm" color={contactTextColor}>敬请期待</Text>
                </MenuList>
            </Menu>
--- a/src/components/Navbars/components/Navigation/MoreMenu.js
+++ b/src/components/Navbars/components/Navigation/MoreMenu.js
@@ -12,11 +12,11 @@ import {
    Text,
    Flex,
    HStack,
-    Badge,
-    useDisclosure
+    Badge
 } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 import { useNavigate, useLocation } from 'react-router-dom';
+import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';

 /**
 * 平板版"更多"下拉菜单组件
@@ -30,8 +30,8 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
    const navigate = useNavigate();
    const location = useLocation();

-    // 🎯 为"更多"菜单创建 useDisclosure Hook
-    const { isOpen, onOpen, onClose } = useDisclosure();
+    // 🎯 使用延迟关闭菜单控制
+    const moreMenu = useDelayedMenu({ closeDelay: 200 });

    // 辅助函数：判断导航项是否激活
    const isActive = useCallback((paths) => {
@@ -41,23 +41,29 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
    if (!isAuthenticated || !user) return null;

    return (
-        <Menu isOpen={isOpen} onClose={onClose}>
+        <Menu isOpen={moreMenu.isOpen} onClose={moreMenu.onClose}>
            <MenuButton
                as={Button}
                variant="ghost"
                rightIcon={<ChevronDownIcon />}
                fontWeight="medium"
-                onMouseEnter={onOpen}
-                onMouseLeave={onClose}
+                onMouseEnter={moreMenu.handleMouseEnter}
+                onMouseLeave={moreMenu.handleMouseLeave}
+                onClick={moreMenu.handleClick}
            >
                更多
            </MenuButton>
-            <MenuList minW="300px" p={2} onMouseEnter={onOpen}>
+            <MenuList
+                minW="300px"
+                p={2}
+                onMouseEnter={moreMenu.handleMouseEnter}
+                onMouseLeave={moreMenu.handleMouseLeave}
+            >
                {/* 高频跟踪组 */}
                <Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">高频跟踪</Text>
                <MenuItem
                    onClick={() => {
-                        onClose(); // 先关闭菜单
+                        moreMenu.onClose(); // 先关闭菜单
                        navigate('/community');
                    }}
                    borderRadius="md"
@@ -73,7 +79,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
                </MenuItem>
                <MenuItem
                    onClick={() => {
-                        onClose(); // 先关闭菜单
+                        moreMenu.onClose(); // 先关闭菜单
                        navigate('/concepts');
                    }}
                    borderRadius="md"
@@ -91,7 +97,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
                <Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">行情复盘</Text>
                <MenuItem
                    onClick={() => {
-                        onClose(); // 先关闭菜单
+                        moreMenu.onClose(); // 先关闭菜单
                        navigate('/limit-analyse');
                    }}
                    borderRadius="md"
@@ -104,7 +110,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
                </MenuItem>
                <MenuItem
                    onClick={() => {
-                        onClose(); // 先关闭菜单
+                        moreMenu.onClose(); // 先关闭菜单
                        navigate('/stocks');
                    }}
                    borderRadius="md"
@@ -117,7 +123,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
                </MenuItem>
                <MenuItem
                    onClick={() => {
-                        onClose(); // 先关闭菜单
+                        moreMenu.onClose(); // 先关闭菜单
                        navigate('/trading-simulation');
                    }}
                    borderRadius="md"