From 90a59e031c427e82330f26e63baf953ddc9bf845 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 5 Dec 2025 11:09:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B8=85=E7=90=86=E6=9C=AA=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81=20InvestmentPlanningCenter.tsx=20|?=
 =?UTF-8?q?=20=E7=A7=BB=E9=99=A4=20activeTab=20/=20setActiveTab=20state=20?=
 =?UTF-8?q?=E5=92=8C=20Context=20PlansPanel.tsx=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20|=20=E7=A7=BB=E9=99=A4=20FiPlus=E3=80=81FiTar?=
 =?UTF-8?q?get=EF=BC=8C=E7=BB=9F=E4=B8=80=E4=BD=BF=E7=94=A8=20FiFileText?=
 =?UTF-8?q?=20=20ReviewsPanel.tsx=20=20=20=20=20=20=20=20=20=20=20=20=20|?=
 =?UTF-8?q?=20=E7=A7=BB=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84=20FiP?=
 =?UTF-8?q?lus=20=E5=AF=BC=E5=85=A5=20investment.ts=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20|=20=E7=A7=BB=E9=99=A4=20activeTab?=
 =?UTF-8?q?=20/=20setActiveTab=20=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/investment.ts                       |   8 +-
 .../Dashboard/components/CalendarPanel.tsx    |  14 --
 .../components/InvestmentPlanningCenter.tsx   | 129 ++++++++++++------
 src/views/Dashboard/components/PlansPanel.tsx |  34 ++---
 .../Dashboard/components/ReviewsPanel.tsx     |  30 ++--
 5 files changed, 108 insertions(+), 107 deletions(-)

diff --git a/src/types/investment.ts b/src/types/investment.ts
index 643dc1ad..239288d9 100644
--- a/src/types/investment.ts
+++ b/src/types/investment.ts
@@ -115,11 +115,11 @@ export interface PlanningContextValue {
   /** 设置加载状态 */
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 
-  /** 当前激活的标签页索引 (0: 日历, 1: 计划, 2: 复盘) */
-  activeTab: number;
+  /** 打开新建计划模态框的触发计数器 */
+  openPlanModalTrigger?: number;
 
-  /** 设置激活的标签页 */
-  setActiveTab: React.Dispatch<React.SetStateAction<number>>;
+  /** 打开新建复盘模态框的触发计数器 */
+  openReviewModalTrigger?: number;
 
   /** Chakra UI Toast 实例 */
   toast: {
diff --git a/src/views/Dashboard/components/CalendarPanel.tsx b/src/views/Dashboard/components/CalendarPanel.tsx
index 4d2a57c3..66a29da8 100644
--- a/src/views/Dashboard/components/CalendarPanel.tsx
+++ b/src/views/Dashboard/components/CalendarPanel.tsx
@@ -258,20 +258,6 @@ export const CalendarPanel: React.FC = () => {
 
   return (
     <Box>
-      <Flex justify="flex-end" mb={4}>
-        <Button
-          size="sm"
-          colorScheme="purple"
-          leftIcon={<FiPlus />}
-          onClick={() => {
-            if (!selectedDate) setSelectedDate(dayjs());
-            onAddOpen();
-          }}
-        >
-          添加计划
-        </Button>
-      </Flex>
-
       {loading ? (
         <Center h="560px">
           <Spinner size="xl" color="purple.500" />
diff --git a/src/views/Dashboard/components/InvestmentPlanningCenter.tsx b/src/views/Dashboard/components/InvestmentPlanningCenter.tsx
index f6fcb756..37ee1012 100644
--- a/src/views/Dashboard/components/InvestmentPlanningCenter.tsx
+++ b/src/views/Dashboard/components/InvestmentPlanningCenter.tsx
@@ -33,11 +33,15 @@ import {
   TabPanel,
   Spinner,
   Center,
+  Button,
+  ButtonGroup,
 } from '@chakra-ui/react';
 import {
   FiCalendar,
   FiTarget,
   FiFileText,
+  FiList,
+  FiPlus,
 } from 'react-icons/fi';
 
 import { PlanningDataProvider } from './PlanningContext';
@@ -82,7 +86,10 @@ const InvestmentPlanningCenter: React.FC = () => {
   // 全局数据状态
   const [allEvents, setAllEvents] = useState<InvestmentEvent[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState<number>(0);
+  const [viewMode, setViewMode] = useState<'calendar' | 'list'>('list');
+  const [listTab, setListTab] = useState<number>(0); // 0: 我的计划, 1: 我的复盘
+  const [openPlanModalTrigger, setOpenPlanModalTrigger] = useState<number>(0);
+  const [openReviewModalTrigger, setOpenReviewModalTrigger] = useState<number>(0);
 
   /**
    * 加载所有事件数据（日历事件 + 计划 + 复盘）
@@ -124,8 +131,8 @@ const InvestmentPlanningCenter: React.FC = () => {
     loadAllData,
     loading,
     setLoading,
-    activeTab,
-    setActiveTab,
+    openPlanModalTrigger,
+    openReviewModalTrigger,
     toast,
     bgColor,
     borderColor,
@@ -147,53 +154,85 @@ const InvestmentPlanningCenter: React.FC = () => {
               <Icon as={FiTarget} color="purple.500" boxSize={5} />
               <Heading size="md">投资规划中心</Heading>
             </HStack>
+            {/* 视图切换按钮组 */}
+            <ButtonGroup size="sm" isAttached variant="outline">
+              <Button
+                leftIcon={<Icon as={FiList} />}
+                colorScheme={viewMode === 'list' ? 'purple' : 'gray'}
+                variant={viewMode === 'list' ? 'solid' : 'outline'}
+                onClick={() => setViewMode('list')}
+              >
+                列表视图
+              </Button>
+              <Button
+                leftIcon={<Icon as={FiCalendar} />}
+                colorScheme={viewMode === 'calendar' ? 'purple' : 'gray'}
+                variant={viewMode === 'calendar' ? 'solid' : 'outline'}
+                onClick={() => setViewMode('calendar')}
+              >
+                日历视图
+              </Button>
+            </ButtonGroup>
           </Flex>
         </CardHeader>
         <CardBody pt={0}>
-          <Tabs
-            index={activeTab}
-            onChange={setActiveTab}
-            variant="enclosed"
-            colorScheme="purple"
-          >
-            <TabList>
-              <Tab>
-                <Icon as={FiCalendar} mr={2} />
-                日历视图
-              </Tab>
-              <Tab>
-                <Icon as={FiTarget} mr={2} />
-                我的计划 ({planCount})
-              </Tab>
-              <Tab>
-                <Icon as={FiFileText} mr={2} />
-                我的复盘 ({reviewCount})
-              </Tab>
-            </TabList>
+          {viewMode === 'calendar' ? (
+            /* 日历视图 */
+            <Suspense fallback={<PanelLoadingFallback />}>
+              <CalendarPanel />
+            </Suspense>
+          ) : (
+            /* 列表视图：我的计划 / 我的复盘 切换 */
+            <Tabs
+              index={listTab}
+              onChange={setListTab}
+              variant="enclosed"
+              colorScheme="purple"
+            >
+              <Flex justify="space-between" align="center" mb={4}>
+                <TabList mb={0} borderBottom="none">
+                  <Tab>
+                    <Icon as={FiTarget} mr={2} />
+                    我的计划 ({planCount})
+                  </Tab>
+                  <Tab>
+                    <Icon as={FiFileText} mr={2} />
+                    我的复盘 ({reviewCount})
+                  </Tab>
+                </TabList>
+                <Button
+                  size="sm"
+                  colorScheme="purple"
+                  leftIcon={<Icon as={FiPlus} />}
+                  onClick={() => {
+                    if (listTab === 0) {
+                      setOpenPlanModalTrigger(prev => prev + 1);
+                    } else {
+                      setOpenReviewModalTrigger(prev => prev + 1);
+                    }
+                  }}
+                >
+                  {listTab === 0 ? '新建计划' : '新建复盘'}
+                </Button>
+              </Flex>
 
-            <TabPanels>
-              {/* 日历视图面板 */}
-              <TabPanel px={0}>
-                <Suspense fallback={<PanelLoadingFallback />}>
-                  <CalendarPanel />
-                </Suspense>
-              </TabPanel>
+              <TabPanels>
+                {/* 计划列表面板 */}
+                <TabPanel px={0}>
+                  <Suspense fallback={<PanelLoadingFallback />}>
+                    <PlansPanel />
+                  </Suspense>
+                </TabPanel>
 
-              {/* 计划列表面板 */}
-              <TabPanel px={0}>
-                <Suspense fallback={<PanelLoadingFallback />}>
-                  <PlansPanel />
-                </Suspense>
-              </TabPanel>
-
-              {/* 复盘列表面板 */}
-              <TabPanel px={0}>
-                <Suspense fallback={<PanelLoadingFallback />}>
-                  <ReviewsPanel />
-                </Suspense>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
+                {/* 复盘列表面板 */}
+                <TabPanel px={0}>
+                  <Suspense fallback={<PanelLoadingFallback />}>
+                    <ReviewsPanel />
+                  </Suspense>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          )}
         </CardBody>
       </Card>
     </PlanningDataProvider>
diff --git a/src/views/Dashboard/components/PlansPanel.tsx b/src/views/Dashboard/components/PlansPanel.tsx
index 0e01fe23..b4da9c5b 100644
--- a/src/views/Dashboard/components/PlansPanel.tsx
+++ b/src/views/Dashboard/components/PlansPanel.tsx
@@ -3,7 +3,7 @@
  * 显示、编辑和管理投资计划
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Button,
@@ -40,11 +40,10 @@ import {
   TagCloseButton,
 } from '@chakra-ui/react';
 import {
-  FiPlus,
   FiEdit2,
   FiTrash2,
   FiSave,
-  FiTarget,
+  FiFileText,
   FiCalendar,
   FiTrendingUp,
   FiHash,
@@ -85,6 +84,7 @@ export const PlansPanel: React.FC = () => {
     secondaryText,
     cardBg,
     borderColor,
+    openPlanModalTrigger,
   } = usePlanningData();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -104,6 +104,13 @@ export const PlansPanel: React.FC = () => {
   // 筛选计划列表（排除系统事件）
   const plans = allEvents.filter(event => event.type === 'plan' && event.source !== 'future');
 
+  // 监听外部触发打开新建模态框
+  useEffect(() => {
+    if (openPlanModalTrigger && openPlanModalTrigger > 0) {
+      handleOpenModal(null);
+    }
+  }, [openPlanModalTrigger]);
+
   // 打开编辑/新建模态框
   const handleOpenModal = (item: InvestmentEvent | null = null): void => {
     if (item) {
@@ -263,7 +270,7 @@ export const PlansPanel: React.FC = () => {
             <Flex justify="space-between" align="start">
               <VStack align="start" spacing={1} flex={1}>
                 <HStack>
-                  <Icon as={FiTarget} color="purple.500" />
+                  <Icon as={FiFileText} color="purple.500" />
                   <Text fontWeight="bold" fontSize="lg">
                     {item.title}
                   </Text>
@@ -337,17 +344,6 @@ export const PlansPanel: React.FC = () => {
   return (
     <Box>
       <VStack align="stretch" spacing={4}>
-        <Flex justify="flex-end">
-          <Button
-            size="sm"
-            colorScheme="purple"
-            leftIcon={<FiPlus />}
-            onClick={() => handleOpenModal(null)}
-          >
-            新建计划
-          </Button>
-        </Flex>
-
         {loading ? (
           <Center py={8}>
             <Spinner size="xl" color="purple.500" />
@@ -357,14 +353,6 @@ export const PlansPanel: React.FC = () => {
             <VStack spacing={3}>
               <Icon as={FiTarget} boxSize={12} color="gray.300" />
               <Text color={secondaryText}>暂无投资计划</Text>
-              <Button
-                size="sm"
-                colorScheme="purple"
-                leftIcon={<FiPlus />}
-                onClick={() => handleOpenModal(null)}
-              >
-                创建第一个计划
-              </Button>
             </VStack>
           </Center>
         ) : (
diff --git a/src/views/Dashboard/components/ReviewsPanel.tsx b/src/views/Dashboard/components/ReviewsPanel.tsx
index 3bee24c6..fa967638 100644
--- a/src/views/Dashboard/components/ReviewsPanel.tsx
+++ b/src/views/Dashboard/components/ReviewsPanel.tsx
@@ -3,7 +3,7 @@
  * 显示、编辑和管理投资复盘
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Button,
@@ -40,7 +40,6 @@ import {
   TagCloseButton,
 } from '@chakra-ui/react';
 import {
-  FiPlus,
   FiEdit2,
   FiTrash2,
   FiSave,
@@ -85,6 +84,7 @@ export const ReviewsPanel: React.FC = () => {
     secondaryText,
     cardBg,
     borderColor,
+    openReviewModalTrigger,
   } = usePlanningData();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -104,6 +104,13 @@ export const ReviewsPanel: React.FC = () => {
   // 筛选复盘列表（排除系统事件）
   const reviews = allEvents.filter(event => event.type === 'review' && event.source !== 'future');
 
+  // 监听外部触发打开新建模态框
+  useEffect(() => {
+    if (openReviewModalTrigger && openReviewModalTrigger > 0) {
+      handleOpenModal(null);
+    }
+  }, [openReviewModalTrigger]);
+
   // 打开编辑/新建模态框
   const handleOpenModal = (item: InvestmentEvent | null = null): void => {
     if (item) {
@@ -337,17 +344,6 @@ export const ReviewsPanel: React.FC = () => {
   return (
     <Box>
       <VStack align="stretch" spacing={4}>
-        <Flex justify="flex-end">
-          <Button
-            size="sm"
-            colorScheme="green"
-            leftIcon={<FiPlus />}
-            onClick={() => handleOpenModal(null)}
-          >
-            新建复盘
-          </Button>
-        </Flex>
-
         {loading ? (
           <Center py={8}>
             <Spinner size="xl" color="green.500" />
@@ -357,14 +353,6 @@ export const ReviewsPanel: React.FC = () => {
             <VStack spacing={3}>
               <Icon as={FiFileText} boxSize={12} color="gray.300" />
               <Text color={secondaryText}>暂无投资复盘</Text>
-              <Button
-                size="sm"
-                colorScheme="green"
-                leftIcon={<FiPlus />}
-                onClick={() => handleOpenModal(null)}
-              >
-                创建第一个复盘
-              </Button>
             </VStack>
           </Center>
         ) : (