feat: 创建原子组件（Atoms） - EventTimeline: 时间轴显示（60行） │ │

│ │ - EventImportanceBadge: 重要性等级标签（100行） │ │ │ │ - EventStats: 统计信息组件（60行） │ │ │ │ - EventFollowButton: 关注按钮（40行） │ │ │ │ - EventPriceDisplay: 价格变动显示（130行） │ │ │ │ - EventDescription: 描述文本组件（60行）
2025-10-30 12:14:27 +08:00
parent 2f27083eb5
commit d2c8c4689b
6 changed files with 436 additions and 0 deletions
--- a/src/views/Community/components/EventCard/EventTimeline.js
+++ b/src/views/Community/components/EventCard/EventTimeline.js
@@ -0,0 +1,62 @@
+// src/views/Community/components/EventCard/EventTimeline.js
+import React from 'react';
+import { Box, VStack, Text, useColorModeValue } from '@chakra-ui/react';
+import moment from 'moment';
+
+/**
+ * 事件时间轴组件
+ * @param {Object} props
+ * @param {string} props.createdAt - 事件创建时间
+ * @param {Object} props.timelineStyle - 时间轴样式配置
+ * @param {string} props.borderColor - 竖线边框颜色
+ * @param {string} props.minHeight - 竖线最小高度（例如：'40px' 或 '80px'）
+ */
+const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px' }) => {
+    return (
+        <VStack spacing={0} align="center" minW="90px">
+            {/* 时间长方形卡片 */}
+            <Box
+                {...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
+                borderWidth={timelineStyle.borderWidth}
+                borderColor={timelineStyle.borderColor}
+                borderRadius="md"
+                px={2}
+                py={2}
+                minW="85px"
+                textAlign="center"
+                boxShadow={timelineStyle.boxShadow}
+                transition="all 0.3s ease"
+            >
+                {/* 日期 YYYY-MM-DD */}
+                <Text
+                    fontSize="xs"
+                    fontWeight="bold"
+                    color={timelineStyle.textColor}
+                    lineHeight="1.3"
+                >
+                    {moment(createdAt).format('YYYY-MM-DD')}
+                </Text>
+                {/* 时间 HH:mm */}
+                <Text
+                    fontSize="xs"
+                    fontWeight="bold"
+                    color={timelineStyle.textColor}
+                    lineHeight="1.3"
+                    mt={0.5}
+                >
+                    {moment(createdAt).format('HH:mm')}
+                </Text>
+            </Box>
+            {/* 时间轴竖线 */}
+            <Box
+                w="2px"
+                flex="1"
+                bg={borderColor}
+                minH={minHeight}
+                mt={1}
+            />
+        </VStack>
+    );
+};
+
+export default EventTimeline;