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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user