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>; - /** 当前激活的标签页索引 (0: 日历, 1: 计划, 2: 复盘) */ - activeTab: number; + /** 打开新建计划模态框的触发计数器 */ + openPlanModalTrigger?: number; - /** 设置激活的标签页 */ - setActiveTab: React.Dispatch>; + /** 打开新建复盘模态框的触发计数器 */ + 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 ( - - - - {loading ? (
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([]); const [loading, setLoading] = useState(false); - const [activeTab, setActiveTab] = useState(0); + const [viewMode, setViewMode] = useState<'calendar' | 'list'>('list'); + const [listTab, setListTab] = useState(0); // 0: 我的计划, 1: 我的复盘 + const [openPlanModalTrigger, setOpenPlanModalTrigger] = useState(0); + const [openReviewModalTrigger, setOpenReviewModalTrigger] = useState(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 = () => { 投资规划中心 + {/* 视图切换按钮组 */} + + + + - - - - - 日历视图 - - - - 我的计划 ({planCount}) - - - - 我的复盘 ({reviewCount}) - - + {viewMode === 'calendar' ? ( + /* 日历视图 */ + }> + + + ) : ( + /* 列表视图:我的计划 / 我的复盘 切换 */ + + + + + + 我的计划 ({planCount}) + + + + 我的复盘 ({reviewCount}) + + + + - - {/* 日历视图面板 */} - - }> - - - + + {/* 计划列表面板 */} + + }> + + + - {/* 计划列表面板 */} - - }> - - - - - {/* 复盘列表面板 */} - - }> - - - - - + {/* 复盘列表面板 */} + + }> + + + + + + )} 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 = () => { - + {item.title} @@ -337,17 +344,6 @@ export const PlansPanel: React.FC = () => { return ( - - - - {loading ? (
@@ -357,14 +353,6 @@ export const PlansPanel: React.FC = () => { 暂无投资计划 -
) : ( 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 ( - - - - {loading ? (
@@ -357,14 +353,6 @@ export const ReviewsPanel: React.FC = () => { 暂无投资复盘 -
) : (