feat: 添加投资日历mock数据

投资日历提取计划列表卡片组件
2025-12-05 13:35:12 +08:00
parent 9190c011a1
commit b81efc9d27
3 changed files with 183 additions and 64 deletions
--- a/src/views/Dashboard/components/EventDetailCard.tsx
+++ b/src/views/Dashboard/components/EventDetailCard.tsx
@@ -0,0 +1,145 @@
+/**
+ * EventDetailCard - 事件详情卡片组件
+ * 用于日历视图中展示单个事件的详细信息
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Box,
+  Badge,
+  Flex,
+  HStack,
+  Text,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import {
+  FiTrendingUp,
+  FiChevronDown,
+  FiChevronUp,
+} from 'react-icons/fi';
+import type { InvestmentEvent } from '@/types';
+
+/**
+ * EventDetailCard Props
+ */
+export interface EventDetailCardProps {
+  /** 事件数据 */
+  event: InvestmentEvent;
+  /** 边框颜色 */
+  borderColor?: string;
+  /** 次要文字颜色 */
+  secondaryText?: string;
+}
+
+/**
+ * 最大显示行数
+ */
+const MAX_LINES = 3;
+
+/**
+ * EventDetailCard 组件
+ */
+export const EventDetailCard: React.FC<EventDetailCardProps> = ({
+  event,
+  borderColor: borderColorProp,
+  secondaryText: secondaryTextProp,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const descriptionRef = useRef<HTMLParagraphElement>(null);
+
+  // 默认颜色
+  const defaultBorderColor = useColorModeValue('gray.200', 'gray.600');
+  const defaultSecondaryText = useColorModeValue('gray.600', 'gray.400');
+
+  const borderColor = borderColorProp || defaultBorderColor;
+  const secondaryText = secondaryTextProp || defaultSecondaryText;
+
+  // 检测内容是否溢出
+  useEffect(() => {
+    const el = descriptionRef.current;
+    if (el) {
+      // 计算行高和最大高度
+      const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
+      const maxHeight = lineHeight * MAX_LINES;
+      setIsOverflow(el.scrollHeight > maxHeight + 5); // 5px 容差
+    }
+  }, [event.description]);
+
+  // 获取事件类型标签
+  const getEventBadge = () => {
+    if (event.source === 'future') {
+      return <Badge colorScheme="blue" variant="subtle">系统事件</Badge>;
+    } else if (event.type === 'plan') {
+      return <Badge colorScheme="purple" variant="subtle">我的计划</Badge>;
+    } else if (event.type === 'review') {
+      return <Badge colorScheme="green" variant="subtle">我的复盘</Badge>;
+    }
+    return null;
+  };
+
+  return (
+    <Box
+      p={4}
+      borderRadius="md"
+      border="1px"
+      borderColor={borderColor}
+    >
+      {/* 标题和标签 */}
+      <Flex justify="space-between" align="start" mb={2}>
+        <HStack flexWrap="wrap" flex={1}>
+          <Text fontWeight="bold" fontSize="lg">
+            {event.title}
+          </Text>
+          {getEventBadge()}
+        </HStack>
+      </Flex>
+
+      {/* 描述内容 - 支持展开/收起 */}
+      {event.description && (
+        <Box mb={2}>
+          <Text
+            ref={descriptionRef}
+            fontSize="sm"
+            color={secondaryText}
+            noOfLines={isExpanded ? undefined : MAX_LINES}
+            whiteSpace="pre-wrap"
+          >
+            {event.description}
+          </Text>
+          {isOverflow && (
+            <Button
+              size="xs"
+              variant="link"
+              colorScheme="blue"
+              mt={1}
+              onClick={() => setIsExpanded(!isExpanded)}
+              rightIcon={isExpanded ? <FiChevronUp /> : <FiChevronDown />}
+            >
+              {isExpanded ? '收起' : '展开'}
+            </Button>
+          )}
+        </Box>
+      )}
+
+      {/* 相关股票 */}
+      {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" mb={1}>
+              <TagLeftIcon as={FiTrendingUp} />
+              <TagLabel>{stock}</TagLabel>
+            </Tag>
+          ))}
+        </HStack>
+      )}
+    </Box>
+  );
+};
+
+export default EventDetailCard;