From 0cc75462aa501d733a7a4609eecb6a392800f96d Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 5 Dec 2025 13:40:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E5=8E=86=E7=A9=BA=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E4=BC=98=E5=8C=96=20-=20=E6=B7=BB=E5=8A=A0=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E5=AF=BC=E8=88=AA=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CalendarPanel: 移除底部关闭按钮，优化空状态文案
- 空状态添加日历图标和引导文案
- 「计划」「复盘」「投资日历」高亮可点击
- 点击计划/复盘切换到对应列表视图
- 点击投资日历打开投资日历弹窗
- 扩展 PlanningContextValue 类型支持导航方法

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/types/investment.ts                       | 10 +++
 .../Dashboard/components/CalendarPanel.tsx    | 73 ++++++++++++++++++-
 .../components/InvestmentPlanningCenter.tsx   |  2 +
 3 files changed, 83 insertions(+), 2 deletions(-)

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<Dayjs | null>(null);
   const [selectedDateEvents, setSelectedDateEvents] = useState<InvestmentEvent[]>([]);
@@ -155,7 +163,48 @@ export const CalendarPanel: React.FC = () => {
                     <Icon as={FiCalendar} boxSize={10} color="gray.300" />
                     <Text color={secondaryText}>当天暂无事件</Text>
                     <Text fontSize="sm" color={secondaryText}>
-                      可在「计划」或「复盘」添加，或关注投资日历中的未来事件
+                      可在
+                      <Link
+                        color="purple.500"
+                        fontWeight="medium"
+                        mx={1}
+                        onClick={() => {
+                          onClose();
+                          setViewMode?.('list');
+                          setListTab?.(0);
+                        }}
+                        cursor="pointer"
+                      >
+                        计划
+                      </Link>
+                      或
+                      <Link
+                        color="green.500"
+                        fontWeight="medium"
+                        mx={1}
+                        onClick={() => {
+                          onClose();
+                          setViewMode?.('list');
+                          setListTab?.(1);
+                        }}
+                        cursor="pointer"
+                      >
+                        复盘
+                      </Link>
+                      添加，或关注
+                      <Link
+                        color="blue.500"
+                        fontWeight="medium"
+                        mx={1}
+                        onClick={() => {
+                          onClose();
+                          setIsInvestmentCalendarOpen(true);
+                        }}
+                        cursor="pointer"
+                      >
+                        投资日历
+                      </Link>
+                      中的未来事件
                     </Text>
                   </VStack>
                 </Center>
@@ -176,6 +225,26 @@ export const CalendarPanel: React.FC = () => {
         </Modal>
       )}
 
+      {/* 投资日历 Modal */}
+      {isInvestmentCalendarOpen && (
+        <Modal
+          isOpen={isInvestmentCalendarOpen}
+          onClose={() => setIsInvestmentCalendarOpen(false)}
+          size="6xl"
+        >
+          <ModalOverlay />
+          <ModalContent maxW="1200px">
+            <ModalHeader>投资日历</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody pb={6}>
+              <Suspense fallback={<Center py={8}><Spinner size="xl" color="blue.500" /></Center>}>
+                <InvestmentCalendar />
+              </Suspense>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
+
     </Box>
   );
 };
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,
   };
 
   // 计算各类型事件数量