diff --git a/src/types/investment.ts b/src/types/investment.ts index 239288d9..2df9d4a9 100644 --- a/src/types/investment.ts +++ b/src/types/investment.ts @@ -145,4 +145,14 @@ export interface PlanningContextValue { /** 卡片背景色 */ cardBg: string; + + // 导航方法(可选,用于空状态引导) + /** 切换视图模式 */ + setViewMode?: (mode: 'calendar' | 'list') => void; + + /** 切换列表 Tab */ + setListTab?: (tab: number) => void; + + /** 关闭弹窗 */ + closeModal?: () => void; } diff --git a/src/views/Dashboard/components/CalendarPanel.tsx b/src/views/Dashboard/components/CalendarPanel.tsx index 25d4a391..daf424c7 100644 --- a/src/views/Dashboard/components/CalendarPanel.tsx +++ b/src/views/Dashboard/components/CalendarPanel.tsx @@ -3,7 +3,7 @@ * 使用 FullCalendar 展示投资计划、复盘等事件 */ -import React, { useState } from 'react'; +import React, { useState, lazy, Suspense } from 'react'; import { Box, Modal, @@ -18,6 +18,7 @@ import { Spinner, Center, Icon, + Link, } from '@chakra-ui/react'; import { FiCalendar } from 'react-icons/fi'; import FullCalendar from '@fullcalendar/react'; @@ -32,6 +33,9 @@ import { usePlanningData } from './PlanningContext'; import { EventDetailCard } from './EventDetailCard'; import type { InvestmentEvent } from '@/types'; +// 懒加载投资日历组件 +const InvestmentCalendar = lazy(() => import('@/views/Community/components/InvestmentCalendar')); + dayjs.locale('zh-cn'); /** @@ -59,10 +63,14 @@ export const CalendarPanel: React.FC = () => { loading, borderColor, secondaryText, + setViewMode, + setListTab, } = usePlanningData(); // 详情弹窗 const { isOpen, onOpen, onClose } = useDisclosure(); + // 投资日历弹窗 + const [isInvestmentCalendarOpen, setIsInvestmentCalendarOpen] = useState(false); const [selectedDate, setSelectedDate] = useState(null); const [selectedDateEvents, setSelectedDateEvents] = useState([]); @@ -155,7 +163,48 @@ export const CalendarPanel: React.FC = () => { 当天暂无事件 - 可在「计划」或「复盘」添加,或关注投资日历中的未来事件 + 可在 + { + onClose(); + setViewMode?.('list'); + setListTab?.(0); + }} + cursor="pointer" + > + 计划 + + 或 + { + onClose(); + setViewMode?.('list'); + setListTab?.(1); + }} + cursor="pointer" + > + 复盘 + + 添加,或关注 + { + onClose(); + setIsInvestmentCalendarOpen(true); + }} + cursor="pointer" + > + 投资日历 + + 中的未来事件 @@ -176,6 +225,26 @@ export const CalendarPanel: React.FC = () => { )} + {/* 投资日历 Modal */} + {isInvestmentCalendarOpen && ( + setIsInvestmentCalendarOpen(false)} + size="6xl" + > + + + 投资日历 + + + }> + + + + + + )} + ); }; diff --git a/src/views/Dashboard/components/InvestmentPlanningCenter.tsx b/src/views/Dashboard/components/InvestmentPlanningCenter.tsx index 7ba3983c..d984d050 100644 --- a/src/views/Dashboard/components/InvestmentPlanningCenter.tsx +++ b/src/views/Dashboard/components/InvestmentPlanningCenter.tsx @@ -134,6 +134,8 @@ const InvestmentPlanningCenter: React.FC = () => { textColor, secondaryText, cardBg, + setViewMode, + setListTab, }; // 计算各类型事件数量