From 846c44c1ec9b18bf6e966588b8f7beb4b17ec3e0 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 9 Jan 2026 16:11:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor(EventCard):=20=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=20UI=20=E9=87=8D=E6=9E=84=E4=B8=BA=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 投票按钮改用 TrendingUp/TrendingDown 折线图标
- 投票按钮改为上图标下数字的垂直布局
- 浏览量、收藏按钮改为上下结构
- 工具栏间距从 2 减为 1
- 传递超预期得分到 StockChangeIndicators

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNews/layouts/VerticalModeLayout.js |   1 +
 .../HorizontalDynamicNewsEventCard.js         | 167 +++++++++++-------
 2 files changed, 108 insertions(+), 60 deletions(-)

diff --git a/src/views/Community/components/DynamicNews/layouts/VerticalModeLayout.js b/src/views/Community/components/DynamicNews/layouts/VerticalModeLayout.js
index 519791e4..70f86e83 100644
--- a/src/views/Community/components/DynamicNews/layouts/VerticalModeLayout.js
+++ b/src/views/Community/components/DynamicNews/layouts/VerticalModeLayout.js
@@ -87,6 +87,7 @@ const VerticalModeLayout = React.memo(({
         flex={isMobile ? '1' : leftFlex}
         minWidth={0}
         w={isMobile ? '100%' : 'auto'}
+        overflowX="hidden"
         overflowY="auto"
         h="100%"
         data-event-list-container="true"
diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
index 9f21a98e..62ebe531 100644
--- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
@@ -10,7 +10,7 @@ import {
     Box,
     Text,
     Tooltip,
-    useColorModeValue,
+    Badge,
     useBreakpointValue,
 } from '@chakra-ui/react';
 import { getImportanceConfig } from '@constants/importanceLevels';
@@ -20,14 +20,20 @@ import dayjs from 'dayjs';
 
 // 导入子组件
 import {
-    ImportanceStamp,
     EventTimeline,
     EventFollowButton,
-    EventEngagement,
-    KeywordsCarousel,
 } from './atoms';
 import StockChangeIndicators from '@components/StockChangeIndicators';
 import { GLASS_BLUR } from '@/constants/glassConfig';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+// 数字格式化（8600 → 8.6k）
+const formatCompactNumber = (num) => {
+    if (num == null) return '0';
+    if (num >= 10000) return (num / 10000).toFixed(1) + 'w';
+    if (num >= 1000) return (num / 1000).toFixed(1) + 'k';
+    return String(num);
+};
 
 /**
  * 横向布局的动态新闻事件卡片组件
@@ -78,9 +84,11 @@ const HorizontalDynamicNewsEventCard = React.memo(({
     const showTimeline = useBreakpointValue({ base: false, md: true }); // 移动端隐藏时间轴
     const cardPadding = useBreakpointValue({ base: 2, md: 3 }); // 移动端减小内边距
     const titleFontSize = useBreakpointValue({ base: 'sm', md: 'md' }); // 移动端减小标题字体
-    const titlePaddingRight = useBreakpointValue({ base: '16px', md: '120px' }); // 桌面端为关键词留空间，移动端不显示关键词
     const spacing = useBreakpointValue({ base: 1, md: 3 }); // 间距（移动端更紧凑）
 
+    // 获取概念标签（优先使用 keywords，fallback 到 industry）
+    const conceptLabel = event.keywords?.[0]?.concept || event.industry;
+
     /**
      * 根据平均涨幅计算背景色（专业配色 - 深色主题）
      * @param {number} avgChange - 平均涨跌幅
@@ -148,7 +156,6 @@ const HorizontalDynamicNewsEventCard = React.memo(({
                     overflow="visible"
                     _hover={{
                         boxShadow: '2xl',
-                        transform: 'translateY(-3px)',
                         borderColor: isSelected ? 'blue.600' : importance.color,
                     }}
                     _before={{
@@ -165,7 +172,7 @@ const HorizontalDynamicNewsEventCard = React.memo(({
                         borderTopRightRadius: 'xl',
                         opacity: 0.8,
                     }}
-                    transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                    transition="box-shadow 0.3s, border-color 0.3s"
                     cursor="pointer"
                     onClick={() => onEventClick?.(event)}
                 >
@@ -197,31 +204,9 @@ const HorizontalDynamicNewsEventCard = React.memo(({
                             </Box>
                         )}
 
-                        {/* 右上角：关注按钮 */}
-                        <Box position="absolute" top={{ base: 1, md: 2 }} right={{ base: 1, md: 2 }} zIndex={2}>
-                            <EventFollowButton
-                                isFollowing={isFollowing}
-                                followerCount={followerCount}
-                                onToggle={() => onToggleFollow?.(event.id)}
-                                size="xs"
-                                showCount={false}
-                            />
-                        </Box>
 
-                        {/* Keywords梦幻轮播 - 绝对定位在卡片右侧空白处（移动端隐藏） */}
-                        {!isMobile && event.keywords && event.keywords.length > 0 && (
-                            <KeywordsCarousel
-                                keywords={event.keywords}
-                                interval={4000}
-                                onKeywordClick={(keyword) => {
-                                    console.log('Keyword clicked:', keyword);
-                                    // TODO: 实现关键词筛选功能
-                                }}
-                            />
-                        )}
-
-                        <VStack align="stretch" spacing={1.5}>
-                            {/* 标题 - 最多两行，hover 显示完整内容 */}
+                        <VStack align="stretch" spacing={2}>
+                            {/* 第一行：概念标签 + 标题（内联布局） */}
                             <Tooltip
                                 label={event.title}
                                 placement="top"
@@ -237,15 +222,36 @@ const HorizontalDynamicNewsEventCard = React.memo(({
                                     cursor="pointer"
                                     onClick={(e) => onTitleClick?.(e, event)}
                                     mt={1}
-                                    paddingRight={titlePaddingRight}
                                     paddingLeft={isMobile ? '70px' : undefined}
+                                    lineHeight="1.6"
+                                    css={{
+                                        display: '-webkit-box',
+                                        WebkitLineClamp: 2,
+                                        WebkitBoxOrient: 'vertical',
+                                        overflow: 'hidden',
+                                    }}
                                 >
+                                    {/* 概念标签（内联） */}
+                                    {conceptLabel && (
+                                        <Badge
+                                            as="span"
+                                            colorScheme="purple"
+                                            fontSize="xs"
+                                            borderRadius="md"
+                                            px={1.5}
+                                            py={0.5}
+                                            mr={1.5}
+                                            verticalAlign="middle"
+                                        >
+                                            {conceptLabel}
+                                        </Badge>
+                                    )}
+                                    {/* 标题（内联） */}
                                     <Text
+                                        as="span"
                                         fontSize={titleFontSize}
                                         fontWeight="semibold"
                                         color={linkColor}
-                                        lineHeight="1.4"
-                                        noOfLines={2}
                                         _hover={{ textDecoration: 'underline' }}
                                     >
                                         {event.title}
@@ -253,33 +259,74 @@ const HorizontalDynamicNewsEventCard = React.memo(({
                                 </Box>
                             </Tooltip>
 
-                            {/* 第二行：涨跌幅数据（左） + 互动指标（右） */}
-                            <HStack justify="space-between" align="center" w="full">
-                                {/* 左侧：涨跌幅数据，没有时用空盒子占位 */}
-                                <Box flex="1">
-                                    <StockChangeIndicators
-                                        maxChange={event.related_max_chg}
-                                        avgChange={event.related_avg_chg}
-                                        expectationScore={event.expectation_surprise_score}
-                                        size={indicatorSize}
-                                    />
-                                </Box>
+                            {/* 底部：左侧涨跌幅 + 右侧工具栏 */}
+                            <HStack justify="space-between" align="center" w="full" pt={1}>
+                                {/* 左侧：涨跌幅指标（保持默认样式） */}
+                                <StockChangeIndicators
+                                    avgChange={event.related_avg_chg}
+                                    maxChange={event.related_max_chg}
+                                    expectationScore={event.expectation_score || event.expectation_surprise_score}
+                                    size="default"
+                                />
 
-                                {/* 右侧：互动指标，始终靠右 */}
-                                {showEngagement && (
-                                    <Box flexShrink={0}>
-                                        <EventEngagement
-                                            eventId={event.id}
-                                            viewCount={event.view_count}
-                                            followerCount={event.follower_count}
-                                            bullishCount={event.bullish_count}
-                                            bearishCount={event.bearish_count}
-                                            userVote={event.user_vote}
-                                            size="md"
-                                            onVoteChange={onVoteChange}
-                                        />
-                                    </Box>
-                                )}
+                                {/* 右侧：工具栏 */}
+                                <HStack spacing={1} align="center" onClick={(e) => e.stopPropagation()}>
+                                    {/* 浏览量 - 上下结构 */}
+                                    <VStack spacing={0} align="center">
+                                        <Text fontSize="xs" color="gray.400">👁</Text>
+                                        <Text fontSize="2xs" color="gray.400">{formatCompactNumber(event.view_count)}</Text>
+                                    </VStack>
+
+                                    {/* 收藏按钮 - 上下结构 */}
+                                    <EventFollowButton
+                                        isFollowing={isFollowing}
+                                        followerCount={followerCount}
+                                        onToggle={() => onToggleFollow?.(event.id)}
+                                        size="sm"
+                                        showCount={true}
+                                        variant="minimal"
+                                        layout="vertical"
+                                    />
+
+                                    {/* 合并投票按钮 - 左红右绿，上图标下文字 */}
+                                    <HStack spacing={0} borderRadius="md" overflow="hidden">
+                                        {/* 看涨 - 红色左半边 */}
+                                        <Tooltip label="看涨" placement="top" hasArrow>
+                                            <VStack
+                                                as="button"
+                                                bg="#C53030"
+                                                color="white"
+                                                px={2}
+                                                py={1}
+                                                spacing={0}
+                                                _hover={{ bg: '#9B2C2C' }}
+                                                transition="all 0.2s"
+                                                onClick={() => onVoteChange?.({ eventId: event.id, voteType: 'bullish' })}
+                                            >
+                                                <TrendingUp size={14} />
+                                                <Text fontSize="2xs" fontWeight="semibold">{formatCompactNumber(event.bullish_count)}</Text>
+                                            </VStack>
+                                        </Tooltip>
+
+                                        {/* 看跌 - 绿色右半边 */}
+                                        <Tooltip label="看跌" placement="top" hasArrow>
+                                            <VStack
+                                                as="button"
+                                                bg="#38A169"
+                                                color="white"
+                                                px={2}
+                                                py={1}
+                                                spacing={0}
+                                                _hover={{ bg: '#2F855A' }}
+                                                transition="all 0.2s"
+                                                onClick={() => onVoteChange?.({ eventId: event.id, voteType: 'bearish' })}
+                                            >
+                                                <TrendingDown size={14} />
+                                                <Text fontSize="2xs" fontWeight="semibold">{formatCompactNumber(event.bearish_count)}</Text>
+                                            </VStack>
+                                        </Tooltip>
+                                    </HStack>
+                                </HStack>
                             </HStack>
                         </VStack>
                     </CardBody>