From 0adceb94f83f83c13e6d7b14d502502d34b2be05 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 5 Dec 2025 14:44:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20EventDetailModal?=
 =?UTF-8?q?=20=E5=92=8C=20EventEmptyState=20=E7=BB=84=E4=BB=B6=20=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E5=B1=95=E7=A4=BA=E6=9F=90=E4=B8=80=E5=A4=A9=E7=9A=84?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E6=8A=95=E8=B5=84=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/components/EventDetailModal.tsx | 98 +++++++++++++++++++
 .../Dashboard/components/EventEmptyState.tsx  | 94 ++++++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 src/views/Dashboard/components/EventDetailModal.tsx
 create mode 100644 src/views/Dashboard/components/EventEmptyState.tsx

diff --git a/src/views/Dashboard/components/EventDetailModal.tsx b/src/views/Dashboard/components/EventDetailModal.tsx
new file mode 100644
index 00000000..a9c6b0a0
--- /dev/null
+++ b/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;
diff --git a/src/views/Dashboard/components/EventEmptyState.tsx b/src/views/Dashboard/components/EventEmptyState.tsx
new file mode 100644
index 00000000..5a79eba9
--- /dev/null
+++ b/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;