feat: 添加投资日历mock数据

投资日历提取计划列表卡片组件

src/views/Dashboard/components/CalendarPanel.tsx

@@ -6,31 +6,20 @@
 import React, { useState } from 'react';
 import {
   Box,
-  Button,
-  Badge,
-  Flex,
   Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
-  ModalFooter,
   ModalBody,
   ModalCloseButton,
   useDisclosure,
   VStack,
-  HStack,
   Text,
   Spinner,
   Center,
   Icon,
-  Tag,
-  TagLabel,
-  TagLeftIcon,
 } from '@chakra-ui/react';
-import {
-  FiStar,
-  FiTrendingUp,
-} from 'react-icons/fi';
+import { FiCalendar } from 'react-icons/fi';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
@@ -40,6 +29,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/zh-cn';
 
 import { usePlanningData } from './PlanningContext';
+import { EventDetailCard } from './EventDetailCard';
 import type { InvestmentEvent } from '@/types';
 
 dayjs.locale('zh-cn');
@@ -161,68 +151,27 @@ export const CalendarPanel: React.FC = () => {
             <ModalBody>
               {selectedDateEvents.length === 0 ? (
                 <Center py={8}>
-                  <Text color={secondaryText}>当天没有事件</Text>
+                  <VStack spacing={3}>
+                    <Icon as={FiCalendar} boxSize={10} color="gray.300" />
+                    <Text color={secondaryText}>当天暂无事件</Text>
+                    <Text fontSize="sm" color={secondaryText}>
+                      可在「计划」或「复盘」添加，或关注投资日历中的未来事件
+                    </Text>
+                  </VStack>
                 </Center>
               ) : (
                 <VStack align="stretch" spacing={4}>
                   {selectedDateEvents.map((event, idx) => (
-                    <Box
+                    <EventDetailCard
                       key={idx}
-                      p={4}
-                      borderRadius="md"
-                      border="1px"
+                      event={event}
                       borderColor={borderColor}
-                    >
-                      <Flex justify="space-between" align="start" mb={2}>
-                        <VStack align="start" spacing={1} flex={1}>
-                          <HStack>
-                            <Text fontWeight="bold" fontSize="lg">
-                              {event.title}
-                            </Text>
-                            {event.source === 'future' ? (
-                              <Badge colorScheme="blue" variant="subtle">系统事件</Badge>
-                            ) : event.type === 'plan' ? (
-                              <Badge colorScheme="purple" variant="subtle">我的计划</Badge>
-                            ) : (
-                              <Badge colorScheme="green" variant="subtle">我的复盘</Badge>
-                            )}
-                          </HStack>
-                          {event.importance && (
-                            <HStack spacing={2}>
-                              <Icon as={FiStar} color="yellow.500" />
-                              <Text fontSize="sm" color={secondaryText}>
-                                重要度: {event.importance}/5
-                              </Text>
-                            </HStack>
-                          )}
-                        </VStack>
-                      </Flex>
-
-                      {event.description && (
-                        <Text fontSize="sm" color={secondaryText} mb={2}>
-                          {event.description}
-                        </Text>
-                      )}
-
-                      {event.stocks && event.stocks.length > 0 && (
-                        <HStack spacing={2} flexWrap="wrap">
-                          <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
-                          {event.stocks.map((stock, i) => (
-                            <Tag key={i} size="sm" colorScheme="blue">
-                              <TagLeftIcon as={FiTrendingUp} />
-                              <TagLabel>{stock}</TagLabel>
-                            </Tag>
-                          ))}
-                        </HStack>
-                      )}
-                    </Box>
+                      secondaryText={secondaryText}
+                    />
                   ))}
                 </VStack>
               )}
             </ModalBody>
-            <ModalFooter>
-              <Button onClick={onClose}>关闭</Button>
-            </ModalFooter>
           </ModalContent>
         </Modal>
       )}