feat: 提取 ImportanceBadge 组件

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

@@ -9,17 +9,13 @@ import {
     VStack,
     Box,
     Text,
-    Popover,
-    PopoverTrigger,
-    PopoverContent,
-    PopoverBody,
-    PopoverArrow,
-    Portal,
+    Tooltip,
     useColorModeValue,
 } from '@chakra-ui/react';
-import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
+import { getImportanceConfig } from '../../../../constants/importanceLevels';
 
 // 导入子组件
+import ImportanceBadge from './ImportanceBadge';
 import EventTimeline from './EventTimeline';
 import EventFollowButton from './EventFollowButton';
 import StockChangeIndicators from '../../../../components/StockChangeIndicators';
@@ -90,68 +86,8 @@ const HorizontalDynamicNewsEventCard = ({
                 onClick={() => onEventClick?.(event)}
             >
                 <CardBody p={3} pb={2}>
-                    {/* 左上角：重要性横向徽章 */}
-                    <Popover trigger="hover" placement="right" isLazy>
-                        <PopoverTrigger>
-                            <Box
-                                position="absolute"
-                                top={0}
-                                left={0}
-                                zIndex={1}
-                                bg={importance.badgeBg}
-                                color={importance.badgeColor || 'white'}
-                                fontSize="7px"
-                                fontWeight="bold"
-                                w="30px"
-                                h="15px"
-                                borderRadius="xl"
-                                display="flex"
-                                alignItems="center"
-                                justifyContent="center"
-                                cursor="help"
-                                boxShadow="sm"
-                            >
-                                {importance.label}
-                            </Box>
-                        </PopoverTrigger>
-                        <Portal>
-                            <PopoverContent width="auto" maxW="350px">
-                                <PopoverArrow />
-                                <PopoverBody p={3}>
-                                    <VStack align="stretch" spacing={2}>
-                                        <Text fontSize="sm" fontWeight="bold" mb={1}>
-                                            重要性等级说明
-                                        </Text>
-                                        {getAllImportanceLevels().map(item => (
-                                            <HStack key={item.level} spacing={2} align="center">
-                                                <Box
-                                                    w="30px"
-                                                    h="15px"
-                                                    bg={item.badgeBg}
-                                                    color={item.badgeColor || 'white'}
-                                                    fontSize="9px"
-                                                    fontWeight="bold"
-                                                    display="flex"
-                                                    alignItems="center"
-                                                    justifyContent="center"
-                                                    borderRadius="lg"
-                                                    flexShrink={0}
-                                                >
-                                                    {item.label}
-                                                </Box>
-                                                <Text fontSize="xs" flex={1}>
-                                                    <Text as="span" fontWeight="bold">
-                                                        {item.label}：
-                                                    </Text>
-                                                    {item.description}
-                                                </Text>
-                                            </HStack>
-                                        ))}
-                                    </VStack>
-                                </PopoverBody>
-                            </PopoverContent>
-                        </Portal>
-                    </Popover>
+                    {/* 左上角：重要性标签 */}
+                    <ImportanceBadge importance={event.importance} />
 
                     {/* 右上角：关注按钮 */}
                     <Box position="absolute" top={2} right={2} zIndex={1}>