feat: homeNavar 将投资日历从社区页面的右侧导航移到了顶部导航栏

InvestmentCalendar.js 将 loadEventCounts 函数改为使用 useCallback 包装
  - 修复了 useEffect 的依赖数组,添加了 loadEventCounts
  - 为事件列表 Modal 添加了 zIndex={1500}
  - 为内容详情 Drawer 添加了 zIndex={1500}
  - 为相关股票 Modal 添加了 zIndex={1500}
src/views/Community/components/RightSidebar.js

  修改内容:
  - 已删除此文件
This commit is contained in:
zdl
2025-10-24 10:56:43 +08:00
parent 6ad38594bb
commit 34a6c402c4
2 changed files with 52 additions and 4 deletions

View File

@@ -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 ? (
// 已登录状态 - 用户菜单 + 功能菜单排列
<HStack spacing={{ base: 2, md: 3 }}>
{/* 投资日历 - 仅大屏显示 */}
{isDesktop && (
<Button
size="sm"
colorScheme="orange"
variant="solid"
borderRadius="full"
leftIcon={<FiCalendar />}
onClick={() => setCalendarModalOpen(true)}
>
投资日历
</Button>
)}
{/* 自选股 - 仅大屏显示 */}
{isDesktop && (
<Menu onOpen={loadWatchlistQuotes}>
@@ -1160,6 +1184,11 @@ export default function HomeNavbar() {
<MenuDivider />
{/* 投资日历 */}
<MenuItem icon={<FiCalendar />} onClick={() => navigate('/community')}>
<Text>投资日历</Text>
</MenuItem>
{/* 自选股 */}
<MenuItem icon={<FiStar />} onClick={() => navigate('/home/center')}>
<Flex justify="space-between" align="center" w="100%">
@@ -1521,6 +1550,22 @@ export default function HomeNavbar() {
{/* 二级导航栏 - 显示当前页面所属的二级菜单 */}
{!isMobile && <SecondaryNav showCompletenessAlert={showCompletenessAlert} />}
{/* 投资日历 Modal */}
<Modal
isOpen={calendarModalOpen}
onClose={() => setCalendarModalOpen(false)}
size="6xl"
>
<ModalOverlay />
<ModalContent maxW="1200px">
<ModalHeader>投资日历</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<InvestmentCalendar />
</ModalBody>
</ModalContent>
</Modal>
</>
);
}

View File

@@ -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}
>
<Spin spinning={loading}>
<Tabs defaultActiveKey="event">
@@ -734,6 +735,7 @@ const InvestmentCalendar = () => {
width={600}
onClose={() => setDetailDrawerVisible(false)}
visible={detailDrawerVisible}
zIndex={1500}
>
{selectedDetail?.content?.type === 'citation' ? (
<CitedContent
@@ -770,6 +772,7 @@ const InvestmentCalendar = () => {
关闭
</Button>
}
zIndex={1500}
>
{hasFeatureAccess('related_stocks') ? (
<Table