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

│ │ - EventImportanceBadge: 重要性等级标签（100行）                                                                                  │ │
│ │ - EventStats: 统计信息组件（60行）                                                                                               │ │
│ │ - EventFollowButton: 关注按钮（40行）                                                                                            │ │
│ │ - EventPriceDisplay: 价格变动显示（130行）                                                                                       │ │
│ │ - EventDescription: 描述文本组件（60行）

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

@@ -0,0 +1,96 @@
+// src/views/Community/components/EventCard/EventImportanceBadge.js
+import React from 'react';
+import { Badge, Tooltip, VStack, HStack, Text, Divider, Circle } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
+import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
+
+/**
+ * 事件重要性等级标签组件
+ * @param {Object} props
+ * @param {string} props.importance - 重要性等级（S/A/B/C/D）
+ * @param {boolean} props.showTooltip - 是否显示详细提示框（默认 false）
+ * @param {boolean} props.showIcon - 是否显示信息图标（默认 false）
+ * @param {string} props.size - 标签大小（xs/sm/md/lg，默认 xs）
+ */
+const EventImportanceBadge = ({
+    importance,
+    showTooltip = false,
+    showIcon = false,
+    size = 'xs'
+}) => {
+    const importanceConfig = getImportanceConfig(importance);
+
+    // 简单模式：只显示标签
+    if (!showTooltip) {
+        return (
+            <Badge
+                colorScheme={importanceConfig.color.split('.')[0]}
+                fontSize={size}
+                px={size === 'xs' ? 2 : size === 'sm' ? 2.5 : 3}
+                py={size === 'xs' ? 1 : size === 'sm' ? 1 : 1.5}
+                borderRadius="md"
+                fontWeight="bold"
+                display="inline-flex"
+                alignItems="center"
+                verticalAlign="middle"
+            >
+                {importance || 'C'}级
+            </Badge>
+        );
+    }
+
+    // 详细模式：带提示框的标签
+    return (
+        <Tooltip
+            label={
+                <VStack align="start" spacing={1} maxW="320px">
+                    <Text fontWeight="bold" fontSize="sm" mb={1}>
+                        重要性等级说明
+                    </Text>
+                    <Divider borderColor="gray.300" />
+                    {getAllImportanceLevels().map((level) => (
+                        <HStack key={level.level} spacing={2} align="center" w="full" py={0.5}>
+                            <Circle
+                                size="8px"
+                                bg={level.dotBg}
+                                flexShrink={0}
+                            />
+                            <Text fontSize="xs" color="gray.700" lineHeight="1.5">
+                                <Text as="span" fontWeight="bold">{level.level}级</Text>
+                                {level.description}
+                            </Text>
+                        </HStack>
+                    ))}
+                </VStack>
+            }
+            placement="top"
+            hasArrow
+            bg="white"
+            color="gray.800"
+            fontSize="md"
+            p={3}
+            borderRadius="lg"
+            borderWidth="1px"
+            borderColor="gray.200"
+            boxShadow="lg"
+        >
+            <Badge
+                colorScheme={importanceConfig.color.split('.')[0]}
+                px={1.5}
+                py={0.5}
+                borderRadius="md"
+                fontSize={size}
+                cursor="help"
+                display="flex"
+                alignItems="center"
+                gap={1}
+                flexShrink={0}
+            >
+                {showIcon && <InfoIcon boxSize={2.5} />}
+                {importance || 'C'}级
+            </Badge>
+        </Tooltip>
+    );
+};
+
+export default EventImportanceBadge;