feat: 重要性徽章样式优化（圆形设计）

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

@@ -89,8 +89,8 @@ const HorizontalDynamicNewsEventCard = ({
                 cursor="pointer"
                 onClick={() => onEventClick?.(event)}
             >
-                <CardBody p={3}>
-                    {/* 左上角：重要性矩形角标（镂空边框样式） */}
+                <CardBody p={3} pb={2}>
+                    {/* 左上角：重要性横向徽章 */}
                     <Popover trigger="hover" placement="right" isLazy>
                         <PopoverTrigger>
                             <Box
@@ -98,21 +98,18 @@ const HorizontalDynamicNewsEventCard = ({
                                 top={0}
                                 left={0}
                                 zIndex={1}
-                                bg="transparent"
-                                color={importance.badgeBg}
-                                borderWidth="2px"
-                                borderColor={importance.badgeBg}
-                                fontSize="11px"
+                                bg={importance.badgeBg}
+                                color={importance.badgeColor || 'white'}
+                                fontSize="7px"
                                 fontWeight="bold"
-                                px={1.5}
-                                py={0.5}
-                                minW="auto"
+                                w="30px"
+                                h="15px"
+                                borderRadius="xl"
                                 display="flex"
                                 alignItems="center"
                                 justifyContent="center"
-                                lineHeight="1"
-                                borderBottomRightRadius="md"
                                 cursor="help"
+                                boxShadow="sm"
                             >
                                 {importance.label}
                             </Box>
@@ -126,22 +123,21 @@ const HorizontalDynamicNewsEventCard = ({
                                             重要性等级说明
                                         </Text>
                                         {getAllImportanceLevels().map(item => (
-                                            <HStack key={item.level} spacing={2} align="flex-start">
+                                            <HStack key={item.level} spacing={2} align="center">
                                                 <Box
-                                                    w="20px"
-                                                    h="20px"
-                                                    borderWidth="2px"
-                                                    borderColor={item.badgeBg}
-                                                    color={item.badgeBg}
+                                                    w="30px"
+                                                    h="15px"
+                                                    bg={item.badgeBg}
+                                                    color={item.badgeColor || 'white'}
                                                     fontSize="9px"
                                                     fontWeight="bold"
                                                     display="flex"
                                                     alignItems="center"
                                                     justifyContent="center"
-                                                    borderRadius="sm"
+                                                    borderRadius="lg"
                                                     flexShrink={0}
                                                 >
-                                                    {item.level}
+                                                    {item.label}
                                                 </Box>
                                                 <Text fontSize="xs" flex={1}>
                                                     <Text as="span" fontWeight="bold">
@@ -168,8 +164,8 @@ const HorizontalDynamicNewsEventCard = ({
                         />
                     </Box>
 
-                    <VStack align="stretch" spacing={2}>
-                        {/* 标题 - 最多两行，添加上边距避免与角标重叠 */}
+                    <VStack align="stretch" spacing={1.5}>
+                        {/* 标题 - 最多两行，添加左右边距避免与横向徽章和关注按钮重叠 */}
                         <Box
                             cursor="pointer"
                             onClick={(e) => onTitleClick?.(e, event)}
@@ -193,6 +189,7 @@ const HorizontalDynamicNewsEventCard = ({
                             avgChange={event.related_avg_chg}
                             maxChange={event.related_max_chg}
                             weekChange={event.related_week_chg}
+                            size="comfortable"
                         />
                     </VStack>
                 </CardBody>