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:
@@ -32,6 +32,12 @@ import {
|
|||||||
useColorModeValue,
|
useColorModeValue,
|
||||||
useToast,
|
useToast,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
|
Modal,
|
||||||
|
ModalOverlay,
|
||||||
|
ModalContent,
|
||||||
|
ModalHeader,
|
||||||
|
ModalBody,
|
||||||
|
ModalCloseButton,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons';
|
import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons';
|
||||||
import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi';
|
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 SubscriptionButton from '../Subscription/SubscriptionButton';
|
||||||
import SubscriptionModal from '../Subscription/SubscriptionModal';
|
import SubscriptionModal from '../Subscription/SubscriptionModal';
|
||||||
import { CrownIcon, TooltipContent } from '../Subscription/CrownTooltip';
|
import { CrownIcon, TooltipContent } from '../Subscription/CrownTooltip';
|
||||||
|
import InvestmentCalendar from '../../views/Community/components/InvestmentCalendar';
|
||||||
|
|
||||||
/** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
|
/** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
|
||||||
const SecondaryNav = ({ showCompletenessAlert }) => {
|
const SecondaryNav = ({ showCompletenessAlert }) => {
|
||||||
@@ -526,6 +533,9 @@ export default function HomeNavbar() {
|
|||||||
const WATCHLIST_PAGE_SIZE = 10;
|
const WATCHLIST_PAGE_SIZE = 10;
|
||||||
const EVENTS_PAGE_SIZE = 8;
|
const EVENTS_PAGE_SIZE = 8;
|
||||||
|
|
||||||
|
// 投资日历 Modal 状态
|
||||||
|
const [calendarModalOpen, setCalendarModalOpen] = useState(false);
|
||||||
|
|
||||||
// 用户信息完整性状态
|
// 用户信息完整性状态
|
||||||
const [profileCompleteness, setProfileCompleteness] = useState(null);
|
const [profileCompleteness, setProfileCompleteness] = useState(null);
|
||||||
const [showCompletenessAlert, setShowCompletenessAlert] = useState(false);
|
const [showCompletenessAlert, setShowCompletenessAlert] = useState(false);
|
||||||
@@ -894,6 +904,20 @@ export default function HomeNavbar() {
|
|||||||
) : isAuthenticated && user ? (
|
) : isAuthenticated && user ? (
|
||||||
// 已登录状态 - 用户菜单 + 功能菜单排列
|
// 已登录状态 - 用户菜单 + 功能菜单排列
|
||||||
<HStack spacing={{ base: 2, md: 3 }}>
|
<HStack spacing={{ base: 2, md: 3 }}>
|
||||||
|
{/* 投资日历 - 仅大屏显示 */}
|
||||||
|
{isDesktop && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
colorScheme="orange"
|
||||||
|
variant="solid"
|
||||||
|
borderRadius="full"
|
||||||
|
leftIcon={<FiCalendar />}
|
||||||
|
onClick={() => setCalendarModalOpen(true)}
|
||||||
|
>
|
||||||
|
投资日历
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 自选股 - 仅大屏显示 */}
|
{/* 自选股 - 仅大屏显示 */}
|
||||||
{isDesktop && (
|
{isDesktop && (
|
||||||
<Menu onOpen={loadWatchlistQuotes}>
|
<Menu onOpen={loadWatchlistQuotes}>
|
||||||
@@ -1160,6 +1184,11 @@ export default function HomeNavbar() {
|
|||||||
|
|
||||||
<MenuDivider />
|
<MenuDivider />
|
||||||
|
|
||||||
|
{/* 投资日历 */}
|
||||||
|
<MenuItem icon={<FiCalendar />} onClick={() => navigate('/community')}>
|
||||||
|
<Text>投资日历</Text>
|
||||||
|
</MenuItem>
|
||||||
|
|
||||||
{/* 自选股 */}
|
{/* 自选股 */}
|
||||||
<MenuItem icon={<FiStar />} onClick={() => navigate('/home/center')}>
|
<MenuItem icon={<FiStar />} onClick={() => navigate('/home/center')}>
|
||||||
<Flex justify="space-between" align="center" w="100%">
|
<Flex justify="space-between" align="center" w="100%">
|
||||||
@@ -1521,6 +1550,22 @@ export default function HomeNavbar() {
|
|||||||
|
|
||||||
{/* 二级导航栏 - 显示当前页面所属的二级菜单 */}
|
{/* 二级导航栏 - 显示当前页面所属的二级菜单 */}
|
||||||
{!isMobile && <SecondaryNav showCompletenessAlert={showCompletenessAlert} />}
|
{!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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
// src/views/Community/components/InvestmentCalendar.js
|
// src/views/Community/components/InvestmentCalendar.js
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Card, Calendar, Badge, Modal, Table, Tabs, Tag, Button, List, Spin, Empty,
|
Card, Calendar, Badge, Modal, Table, Tabs, Tag, Button, List, Spin, Empty,
|
||||||
Drawer, Typography, Divider, Space, Tooltip, message, Alert
|
Drawer, Typography, Divider, Space, Tooltip, message, Alert
|
||||||
@@ -48,7 +48,7 @@ const InvestmentCalendar = () => {
|
|||||||
const [expandedReasons, setExpandedReasons] = useState({}); // 跟踪每个股票关联理由的展开状态
|
const [expandedReasons, setExpandedReasons] = useState({}); // 跟踪每个股票关联理由的展开状态
|
||||||
|
|
||||||
// 加载月度事件统计
|
// 加载月度事件统计
|
||||||
const loadEventCounts = async (date) => {
|
const loadEventCounts = useCallback(async (date) => {
|
||||||
try {
|
try {
|
||||||
const year = date.year();
|
const year = date.year();
|
||||||
const month = date.month() + 1;
|
const month = date.month() + 1;
|
||||||
@@ -63,7 +63,7 @@ const InvestmentCalendar = () => {
|
|||||||
month: date.month() + 1
|
month: date.month() + 1
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
}, []); // eventService 是外部导入的稳定引用,不需要作为依赖
|
||||||
|
|
||||||
// 加载指定日期的事件
|
// 加载指定日期的事件
|
||||||
const loadDateEvents = async (date) => {
|
const loadDateEvents = async (date) => {
|
||||||
@@ -131,7 +131,7 @@ const InvestmentCalendar = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadEventCounts(currentMonth);
|
loadEventCounts(currentMonth);
|
||||||
}, [currentMonth]);
|
}, [currentMonth, loadEventCounts]);
|
||||||
|
|
||||||
// 自定义日期单元格渲染
|
// 自定义日期单元格渲染
|
||||||
const dateCellRender = (value) => {
|
const dateCellRender = (value) => {
|
||||||
@@ -700,6 +700,7 @@ const InvestmentCalendar = () => {
|
|||||||
width={1200}
|
width={1200}
|
||||||
footer={null}
|
footer={null}
|
||||||
bodyStyle={{ padding: '24px' }}
|
bodyStyle={{ padding: '24px' }}
|
||||||
|
zIndex={1500}
|
||||||
>
|
>
|
||||||
<Spin spinning={loading}>
|
<Spin spinning={loading}>
|
||||||
<Tabs defaultActiveKey="event">
|
<Tabs defaultActiveKey="event">
|
||||||
@@ -734,6 +735,7 @@ const InvestmentCalendar = () => {
|
|||||||
width={600}
|
width={600}
|
||||||
onClose={() => setDetailDrawerVisible(false)}
|
onClose={() => setDetailDrawerVisible(false)}
|
||||||
visible={detailDrawerVisible}
|
visible={detailDrawerVisible}
|
||||||
|
zIndex={1500}
|
||||||
>
|
>
|
||||||
{selectedDetail?.content?.type === 'citation' ? (
|
{selectedDetail?.content?.type === 'citation' ? (
|
||||||
<CitedContent
|
<CitedContent
|
||||||
@@ -770,6 +772,7 @@ const InvestmentCalendar = () => {
|
|||||||
关闭
|
关闭
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
|
zIndex={1500}
|
||||||
>
|
>
|
||||||
{hasFeatureAccess('related_stocks') ? (
|
{hasFeatureAccess('related_stocks') ? (
|
||||||
<Table
|
<Table
|
||||||
|
|||||||
Reference in New Issue
Block a user