pref: PlansPanel 和 ReviewsPanel 代码高度重复,提取公共组件

创建通用 EventPanel 组件
新建 EventPanel.tsx (~420 行) - 通用事件面板组件
  - 删除 PlansPanel.tsx (495 行 → 27 行,减少 94%)
  - 删除 ReviewsPanel.tsx (496 行 → 27 行,减少 94%)
  - 修复 CalendarPanel.tsx 中的 setActiveTab 引用
This commit is contained in:
zdl
2025-12-05 11:29:16 +08:00
parent 778e06392c
commit c245a7ad64
4 changed files with 82 additions and 553 deletions

View File

@@ -3,14 +3,12 @@
*
* 性能优化:
* - 使用 React.lazy() 懒加载子面板,减少初始加载时间
* - 从 1421 行拆分为 5 个独立模块,提升可维护性
* - 使用 TypeScript 提供类型安全
*
* 组件架构:
* - InvestmentPlanningCenter (主组件~200 行)
* - InvestmentPlanningCenter (主组件)
* - CalendarPanel (日历面板,懒加载)
* - PlansPanel (计划面板,懒加载)
* - ReviewsPanel (复盘面板,懒加载)
* - EventPanel (通用事件面板,用于计划和复盘)
* - PlanningContext (数据共享层)
*/
@@ -54,11 +52,8 @@ import './InvestmentCalendar.css';
const CalendarPanel = lazy(() =>
import('./CalendarPanel').then(module => ({ default: module.CalendarPanel }))
);
const PlansPanel = lazy(() =>
import('./PlansPanel').then(module => ({ default: module.PlansPanel }))
);
const ReviewsPanel = lazy(() =>
import('./ReviewsPanel').then(module => ({ default: module.ReviewsPanel }))
const EventPanel = lazy(() =>
import('./EventPanel').then(module => ({ default: module.EventPanel }))
);
/**
@@ -220,14 +215,24 @@ const InvestmentPlanningCenter: React.FC = () => {
{/* 计划列表面板 */}
<TabPanel px={0}>
<Suspense fallback={<PanelLoadingFallback />}>
<PlansPanel />
<EventPanel
type="plan"
colorScheme="purple"
label="计划"
openModalTrigger={openPlanModalTrigger}
/>
</Suspense>
</TabPanel>
{/* 复盘列表面板 */}
<TabPanel px={0}>
<Suspense fallback={<PanelLoadingFallback />}>
<ReviewsPanel />
<EventPanel
type="review"
colorScheme="green"
label="复盘"
openModalTrigger={openReviewModalTrigger}
/>
</Suspense>
</TabPanel>
</TabPanels>