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(({
)}
- {/* 右上角:关注按钮 */}
-
- onToggleFollow?.(event.id)}
- size="xs"
- showCount={false}
- />
-
- {/* Keywords梦幻轮播 - 绝对定位在卡片右侧空白处(移动端隐藏) */}
- {!isMobile && event.keywords && event.keywords.length > 0 && (
- {
- console.log('Keyword clicked:', keyword);
- // TODO: 实现关键词筛选功能
- }}
- />
- )}
-
-
- {/* 标题 - 最多两行,hover 显示完整内容 */}
+
+ {/* 第一行:概念标签 + 标题(内联布局) */}
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 && (
+
+ {conceptLabel}
+
+ )}
+ {/* 标题(内联) */}
{event.title}
@@ -253,33 +259,74 @@ const HorizontalDynamicNewsEventCard = React.memo(({
- {/* 第二行:涨跌幅数据(左) + 互动指标(右) */}
-
- {/* 左侧:涨跌幅数据,没有时用空盒子占位 */}
-
-
-
+ {/* 底部:左侧涨跌幅 + 右侧工具栏 */}
+
+ {/* 左侧:涨跌幅指标(保持默认样式) */}
+
- {/* 右侧:互动指标,始终靠右 */}
- {showEngagement && (
-
-
-
- )}
+ {/* 右侧:工具栏 */}
+ e.stopPropagation()}>
+ {/* 浏览量 - 上下结构 */}
+
+ 👁
+ {formatCompactNumber(event.view_count)}
+
+
+ {/* 收藏按钮 - 上下结构 */}
+ onToggleFollow?.(event.id)}
+ size="sm"
+ showCount={true}
+ variant="minimal"
+ layout="vertical"
+ />
+
+ {/* 合并投票按钮 - 左红右绿,上图标下文字 */}
+
+ {/* 看涨 - 红色左半边 */}
+
+ onVoteChange?.({ eventId: event.id, voteType: 'bullish' })}
+ >
+
+ {formatCompactNumber(event.bullish_count)}
+
+
+
+ {/* 看跌 - 绿色右半边 */}
+
+ onVoteChange?.({ eventId: event.id, voteType: 'bearish' })}
+ >
+
+ {formatCompactNumber(event.bearish_count)}
+
+
+
+