feat: 新增 EventDetailModal 和 EventEmptyState 组件

用于展示某一天的所有投资事件

src/views/Dashboard/components/EventDetailModal.tsx

@@ -0,0 +1,98 @@
+/**
+ * EventDetailModal - 事件详情弹窗组件
+ * 用于展示某一天的所有投资事件
+ * 使用 Ant Design 实现
+ */
+
+import React from 'react';
+import { Modal, Space } from 'antd';
+import type { Dayjs } from 'dayjs';
+
+import { EventDetailCard } from './EventDetailCard';
+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) => (
+            <EventDetailCard
+              key={idx}
+              event={event}
+              borderColor={borderColor}
+              secondaryText={secondaryText}
+            />
+          ))}
+        </Space>
+      )}
+    </Modal>
+  );
+};
+
+export default EventDetailModal;

src/views/Dashboard/components/EventEmptyState.tsx

@@ -0,0 +1,94 @@
+/**
+ * EventEmptyState - 事件空状态组件
+ * 用于展示日历无事件时的引导提示
+ * 使用 Ant Design 实现
+ */
+
+import React from 'react';
+import { Typography, Space, Empty } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
+
+const { Text, Link } = Typography;
+
+/**
+ * EventEmptyState Props
+ */
+export interface EventEmptyStateProps {
+  /** 空状态提示文字 */
+  message?: string;
+  /** 导航到计划列表 */
+  onNavigateToPlan?: () => void;
+  /** 导航到复盘列表 */
+  onNavigateToReview?: () => void;
+  /** 打开投资日历 */
+  onOpenInvestmentCalendar?: () => void;
+}
+
+/**
+ * EventEmptyState 组件
+ */
+export const EventEmptyState: React.FC<EventEmptyStateProps> = ({
+  message = '当天暂无事件',
+  onNavigateToPlan,
+  onNavigateToReview,
+  onOpenInvestmentCalendar,
+}) => {
+  // 是否显示引导链接
+  const showGuide = onNavigateToPlan || onNavigateToReview || onOpenInvestmentCalendar;
+
+  // 渲染描述内容
+  const renderDescription = () => {
+    if (!showGuide) {
+      return <Text type="secondary">{message}</Text>;
+    }
+
+    return (
+      <Space direction="vertical" size={4} style={{ textAlign: 'center' }}>
+        <Text type="secondary">{message}</Text>
+        <Text type="secondary" style={{ fontSize: 12 }}>
+          可在
+          {onNavigateToPlan && (
+            <Link
+              style={{ margin: '0 4px', color: '#8B5CF6' }}
+              onClick={onNavigateToPlan}
+            >
+              计划
+            </Link>
+          )}
+          {onNavigateToPlan && onNavigateToReview && '或'}
+          {onNavigateToReview && (
+            <Link
+              style={{ margin: '0 4px', color: '#38A169' }}
+              onClick={onNavigateToReview}
+            >
+              复盘
+            </Link>
+          )}
+          添加
+          {onOpenInvestmentCalendar && (
+            <>
+              ，或关注
+              <Link
+                style={{ margin: '0 4px', color: '#3182CE' }}
+                onClick={onOpenInvestmentCalendar}
+              >
+                投资日历
+              </Link>
+              中的未来事件
+            </>
+          )}
+        </Text>
+      </Space>
+    );
+  };
+
+  return (
+    <Empty
+      image={<CalendarOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />}
+      imageStyle={{ height: 60 }}
+      description={renderDescription()}
+    />
+  );
+};
+
+export default EventEmptyState;