diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js index dd3e0a05..def40305 100644 --- a/src/components/Navbars/HomeNavbar.js +++ b/src/components/Navbars/HomeNavbar.js @@ -32,6 +32,12 @@ import { useColorModeValue, useToast, Tooltip, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalCloseButton, } from '@chakra-ui/react'; import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons'; import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi'; @@ -44,6 +50,7 @@ import { getApiBase } from '../../utils/apiConfig'; import SubscriptionButton from '../Subscription/SubscriptionButton'; import SubscriptionModal from '../Subscription/SubscriptionModal'; import { CrownIcon, TooltipContent } from '../Subscription/CrownTooltip'; +import InvestmentCalendar from '../../views/Community/components/InvestmentCalendar'; /** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */ const SecondaryNav = ({ showCompletenessAlert }) => { @@ -526,6 +533,9 @@ export default function HomeNavbar() { const WATCHLIST_PAGE_SIZE = 10; const EVENTS_PAGE_SIZE = 8; + // 投资日历 Modal 状态 + const [calendarModalOpen, setCalendarModalOpen] = useState(false); + // 用户信息完整性状态 const [profileCompleteness, setProfileCompleteness] = useState(null); const [showCompletenessAlert, setShowCompletenessAlert] = useState(false); @@ -894,6 +904,20 @@ export default function HomeNavbar() { ) : isAuthenticated && user ? ( // 已登录状态 - 用户菜单 + 功能菜单排列 + {/* 投资日历 - 仅大屏显示 */} + {isDesktop && ( + + )} + {/* 自选股 - 仅大屏显示 */} {isDesktop && ( @@ -1160,6 +1184,11 @@ export default function HomeNavbar() { + {/* 投资日历 */} + } onClick={() => navigate('/community')}> + 投资日历 + + {/* 自选股 */} } onClick={() => navigate('/home/center')}> @@ -1521,6 +1550,22 @@ export default function HomeNavbar() { {/* 二级导航栏 - 显示当前页面所属的二级菜单 */} {!isMobile && } + + {/* 投资日历 Modal */} + setCalendarModalOpen(false)} + size="6xl" + > + + + 投资日历 + + + + + + ); } \ No newline at end of file diff --git a/src/views/Community/components/InvestmentCalendar.js b/src/views/Community/components/InvestmentCalendar.js index cac3d1f9..44dd765f 100644 --- a/src/views/Community/components/InvestmentCalendar.js +++ b/src/views/Community/components/InvestmentCalendar.js @@ -1,5 +1,5 @@ // src/views/Community/components/InvestmentCalendar.js -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { Card, Calendar, Badge, Modal, Table, Tabs, Tag, Button, List, Spin, Empty, Drawer, Typography, Divider, Space, Tooltip, message, Alert @@ -48,7 +48,7 @@ const InvestmentCalendar = () => { const [expandedReasons, setExpandedReasons] = useState({}); // 跟踪每个股票关联理由的展开状态 // 加载月度事件统计 - const loadEventCounts = async (date) => { + const loadEventCounts = useCallback(async (date) => { try { const year = date.year(); const month = date.month() + 1; @@ -63,7 +63,7 @@ const InvestmentCalendar = () => { month: date.month() + 1 }); } - }; + }, []); // eventService 是外部导入的稳定引用,不需要作为依赖 // 加载指定日期的事件 const loadDateEvents = async (date) => { @@ -131,7 +131,7 @@ const InvestmentCalendar = () => { useEffect(() => { loadEventCounts(currentMonth); - }, [currentMonth]); + }, [currentMonth, loadEventCounts]); // 自定义日期单元格渲染 const dateCellRender = (value) => { @@ -700,6 +700,7 @@ const InvestmentCalendar = () => { width={1200} footer={null} bodyStyle={{ padding: '24px' }} + zIndex={1500} > @@ -734,6 +735,7 @@ const InvestmentCalendar = () => { width={600} onClose={() => setDetailDrawerVisible(false)} visible={detailDrawerVisible} + zIndex={1500} > {selectedDetail?.content?.type === 'citation' ? ( { 关闭 } + zIndex={1500} > {hasFeatureAccess('related_stocks') ? (