7ba07109af
## 改动内容
- 替换所有 Moment.js 引用为 Day.js (29 个文件)
- 更新 Webpack 配置，调整 calendar-lib chunk
- 添加 Day.js 插件支持 (isSameOrBefore, isSameOrAfter)
- 移除 Moment.js 依赖
## 性能提升
- JavaScript 打包体积减少: ~50 KB (未压缩)
- gzip 后减少: ~15-18 KB
- 预计首屏加载时间提升: 15-20%
## 影响范围
- Dashboard 组件: 5 个文件
- Community 组件: 19 个文件
- 工具函数: tradingTimeUtils.js (添加插件)
- 其他组件: 5 个文件
## 测试状态
- ✅ 构建成功 (npm run build)
85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
// src/views/Community/components/EventCard/EventTimeline.js
|
||
import React from 'react';
|
||
import { Box, VStack, Text, useColorModeValue, Badge } from '@chakra-ui/react';
|
||
import dayjs from 'dayjs';
|
||
|
||
/**
|
||
* 事件时间轴组件
|
||
* @param {Object} props
|
||
* @param {string} props.createdAt - 事件创建时间
|
||
* @param {Object} props.timelineStyle - 时间轴样式配置
|
||
* @param {string} props.borderColor - 竖线边框颜色
|
||
* @param {string} props.minHeight - 竖线最小高度（例如：'40px' 或 '80px'）
|
||
* @param {Object} props.importance - 重要性配置对象（包含 level, badgeBg, badgeColor 等）
|
||
*/
|
||
const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px', importance }) => {
|
||
return (
|
||
<VStack spacing={0} align="center" minW="65px" position="relative">
|
||
{/* 时间长方形卡片 - 更紧凑 */}
|
||
<Box
|
||
{...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
|
||
borderWidth={timelineStyle.borderWidth}
|
||
borderColor={timelineStyle.borderColor}
|
||
borderRadius="md"
|
||
px={1.5}
|
||
py={1.5}
|
||
minW="60px"
|
||
textAlign="center"
|
||
boxShadow={timelineStyle.boxShadow}
|
||
transition="all 0.3s ease"
|
||
position="relative"
|
||
>
|
||
{/* 重要性等级徽章 - 左上角 */}
|
||
{importance && (
|
||
<Badge
|
||
position="absolute"
|
||
top="-6px"
|
||
left="-6px"
|
||
bg={importance.badgeBg}
|
||
color={importance.badgeColor}
|
||
fontSize="10px"
|
||
fontWeight="bold"
|
||
borderRadius="full"
|
||
px={1.5}
|
||
py={0.5}
|
||
boxShadow="md"
|
||
zIndex={2}
|
||
>
|
||
{importance.level}
|
||
</Badge>
|
||
)}
|
||
|
||
{/* 日期 MM-DD */}
|
||
<Text
|
||
fontSize="10px"
|
||
fontWeight="bold"
|
||
color={timelineStyle.textColor}
|
||
lineHeight="1.2"
|
||
>
|
||
{dayjs(createdAt).format('MM-DD')}
|
||
</Text>
|
||
{/* 时间 HH:mm */}
|
||
<Text
|
||
fontSize="10px"
|
||
fontWeight="bold"
|
||
color={timelineStyle.textColor}
|
||
lineHeight="1.2"
|
||
mt={0.5}
|
||
>
|
||
{dayjs(createdAt).format('HH:mm')}
|
||
</Text>
|
||
</Box>
|
||
{/* 时间轴竖线 */}
|
||
<Box
|
||
w="2px"
|
||
flex="1"
|
||
bg={borderColor}
|
||
minH={minHeight}
|
||
mt={1}
|
||
/>
|
||
</VStack>
|
||
);
|
||
};
|
||
|
||
export default EventTimeline;
|