18ba36a539
- 目录重命名：Dashboard → Center（匹配路由 /home/center） - 删除遗留代码：Default.js、InvestmentPlansAndReviews.js、InvestmentCalendarChakra.js（共 2596 行） - 创建 src/types/center.ts 类型定义（15+ 接口） - 性能优化： - 创建 useCenterColors Hook 封装 7 个 useColorModeValue - 创建 utils/formatters.ts 提取纯函数 - 修复 loadRealtimeQuotes 的 useCallback 依赖项 - InvestmentPlanningCenter 添加 useMemo 缓存 - TypeScript 迁移：Center.js → Center.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
100 lines
2.3 KiB
TypeScript
100 lines
2.3 KiB
TypeScript
/**
|
|
* EventDetailModal - 事件详情弹窗组件
|
|
* 用于展示某一天的所有投资事件
|
|
* 使用 Ant Design 实现
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Modal, Space } from 'antd';
|
|
import type { Dayjs } from 'dayjs';
|
|
|
|
import { EventCard } from './EventCard';
|
|
import { EventEmptyState } from './EventEmptyState';
|
|
import type { InvestmentEvent } from '@/types';
|
|
|
|
/**
|
|
* EventDetailModal Props
|
|
*/
|
|
export interface EventDetailModalProps {
|
|
/** 是否打开 */
|
|
isOpen: boolean;
|
|
/** 关闭回调 */
|
|
onClose: () => void;
|
|
/** 选中的日期 */
|
|
selectedDate: Dayjs | null;
|
|
/** 选中日期的事件列表 */
|
|
events: InvestmentEvent[];
|
|
/** 边框颜色 */
|
|
borderColor?: string;
|
|
/** 次要文字颜色 */
|
|
secondaryText?: string;
|
|
/** 导航到计划列表 */
|
|
onNavigateToPlan?: () => void;
|
|
/** 导航到复盘列表 */
|
|
onNavigateToReview?: () => void;
|
|
/** 打开投资日历 */
|
|
onOpenInvestmentCalendar?: () => void;
|
|
}
|
|
|
|
/**
|
|
* EventDetailModal 组件
|
|
*/
|
|
export const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
selectedDate,
|
|
events,
|
|
borderColor,
|
|
secondaryText,
|
|
onNavigateToPlan,
|
|
onNavigateToReview,
|
|
onOpenInvestmentCalendar,
|
|
}) => {
|
|
return (
|
|
<Modal
|
|
open={isOpen}
|
|
onCancel={onClose}
|
|
title={`${selectedDate?.format('YYYY年MM月DD日') || ''} 的事件`}
|
|
footer={null}
|
|
width={600}
|
|
maskClosable={false}
|
|
keyboard={true}
|
|
centered
|
|
styles={{
|
|
body: { paddingTop: 16, paddingBottom: 24 },
|
|
}}
|
|
>
|
|
{events.length === 0 ? (
|
|
<EventEmptyState
|
|
onNavigateToPlan={() => {
|
|
onClose();
|
|
onNavigateToPlan?.();
|
|
}}
|
|
onNavigateToReview={() => {
|
|
onClose();
|
|
onNavigateToReview?.();
|
|
}}
|
|
onOpenInvestmentCalendar={() => {
|
|
onClose();
|
|
onOpenInvestmentCalendar?.();
|
|
}}
|
|
/>
|
|
) : (
|
|
<Space direction="vertical" size={12} style={{ width: '100%' }}>
|
|
{events.map((event, idx) => (
|
|
<EventCard
|
|
key={idx}
|
|
event={event}
|
|
variant="detail"
|
|
borderColor={borderColor}
|
|
secondaryText={secondaryText}
|
|
/>
|
|
))}
|
|
</Space>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default EventDetailModal;
|