update ui

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

@@ -19,6 +19,7 @@ import ImportanceStamp from './ImportanceStamp';
 import EventTimeline from './EventTimeline';
 import EventFollowButton from './EventFollowButton';
 import StockChangeIndicators from '../../../../components/StockChangeIndicators';
+import KeywordsCarousel from './KeywordsCarousel';
 
 /**
  * 横向布局的动态新闻事件卡片组件
@@ -101,16 +102,12 @@ const HorizontalDynamicNewsEventCard = ({
                 timelineStyle={timelineStyle}
                 borderColor={borderColor}
                 minHeight={layout === 'four-row' ? '60px' : 0}
+                importance={importance}
             />
 
-            {/* 右侧事件卡片容器（带印章） */}
-            <Box flex="1" position="relative" pt={6}>
-                {/* 右上角：重要性印章（放在卡片外层） */}
-                <Box position="absolute" top={-2} right={4} zIndex={10}>
-                    <ImportanceStamp importance={event.importance} size="sm" />
-                </Box>
-
-                {/* 事件卡片 */}
+            {/* 右侧事件卡片容器 */}
+            <Box flex="1" position="relative">
+                {/* 事件卡片 - 增强美化效果 */}
                 <Card
                     position="relative"
                     bg={isSelected
@@ -123,15 +120,27 @@ const HorizontalDynamicNewsEventCard = ({
                         ? selectedBorderColor
                         : borderColor
                     }
-                    borderRadius="lg"
+                    borderRadius="xl"
                     boxShadow={isSelected ? "xl" : "md"}
                     overflow="visible"
                     _hover={{
                         boxShadow: '2xl',
-                        transform: 'translateY(-2px)',
+                        transform: 'translateY(-3px)',
                         borderColor: isSelected ? 'blue.600' : importance.color,
                     }}
-                    transition="all 0.3s ease"
+                    _before={{
+                        content: '""',
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        height: '4px',
+                        bgGradient: `linear(to-r, ${importance.color}, ${importance.borderColor})`,
+                        borderTopLeftRadius: 'xl',
+                        borderTopRightRadius: 'xl',
+                        opacity: isSelected ? 1 : 0.7,
+                    }}
+                    transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
                     cursor="pointer"
                     onClick={() => onEventClick?.(event)}
                 >
@@ -179,13 +188,37 @@ const HorizontalDynamicNewsEventCard = ({
                                 </Box>
                             </Tooltip>
 
-                            {/* 第二行：涨跌幅数据 */}
-                            <StockChangeIndicators
-                                avgChange={event.related_avg_chg}
-                                maxChange={event.related_max_chg}
-                                weekChange={event.related_week_chg}
-                                size={indicatorSize}
-                            />
+                            {/* 第二行：涨跌幅数据 + Keywords轮播 */}
+                            <HStack spacing={3} align="center" justify="space-between" w="full">
+                                {/* 左侧：涨跌幅数据 */}
+                                <StockChangeIndicators
+                                    avgChange={event.related_avg_chg}
+                                    maxChange={event.related_max_chg}
+                                    weekChange={event.related_week_chg}
+                                    size={indicatorSize}
+                                />
+
+                                {/* 右侧：Keywords轮播（半透明效果） */}
+                                {event.keywords && event.keywords.length > 0 && (
+                                    <Box
+                                        flex="1"
+                                        minW={0}
+                                        opacity={0.85}
+                                        _hover={{ opacity: 1 }}
+                                        transition="opacity 0.2s"
+                                    >
+                                        <KeywordsCarousel
+                                            keywords={event.keywords}
+                                            displayCount={3}
+                                            interval={3500}
+                                            onKeywordClick={(keyword) => {
+                                                console.log('Keyword clicked:', keyword);
+                                                // TODO: 实现关键词筛选功能
+                                            }}
+                                        />
+                                    </Box>
+                                )}
+                            </HStack>
                         </VStack>
                     </CardBody>
                 </Card>