update ui

src/views/Community/components/EventCard/EventTimeline.js

@@ -1,6 +1,6 @@
 // src/views/Community/components/EventCard/EventTimeline.js
 import React from 'react';
-import { Box, VStack, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, VStack, Text, useColorModeValue, Badge } from '@chakra-ui/react';
 import moment from 'moment';
 
 /**
@@ -10,10 +10,11 @@ import moment from 'moment';
  * @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' }) => {
+const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px', importance }) => {
     return (
-        <VStack spacing={0} align="center" minW="65px">
+        <VStack spacing={0} align="center" minW="65px" position="relative">
             {/* 时间长方形卡片 - 更紧凑 */}
             <Box
                 {...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
@@ -26,7 +27,28 @@ const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40p
                 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"