diff --git a/app.py b/app.py
index 1d32b55b..1c999aa8 100755
--- a/app.py
+++ b/app.py
@@ -11216,7 +11216,33 @@ def get_events_by_mainline():
else:
ungrouped_events.append(event_data)
- # ==================== 5. 整理返回数据 ====================
+ # ==================== 5. 获取 lv2 概念涨跌幅 ====================
+ lv2_price_map = {}
+ try:
+ # 获取所有 lv2 名称
+ lv2_names = [group['lv2_name'] for group in mainline_groups.values() if group.get('lv2_name')]
+ if lv2_names:
+ # 查询 concept_daily_stats 表获取最新涨跌幅
+ price_sql = text('''
+ SELECT concept_name, avg_change_pct, trade_date
+ FROM concept_daily_stats
+ WHERE concept_type = 'lv2'
+ AND concept_name IN :names
+ AND trade_date = (
+ SELECT MAX(trade_date) FROM concept_daily_stats WHERE concept_type = 'lv2'
+ )
+ ''')
+ price_result = db.session.execute(price_sql, {'names': tuple(lv2_names)}).fetchall()
+ for row in price_result:
+ lv2_price_map[row.concept_name] = {
+ 'avg_change_pct': float(row.avg_change_pct) if row.avg_change_pct else None,
+ 'trade_date': str(row.trade_date) if row.trade_date else None
+ }
+ app.logger.info(f'[mainline] 获取 lv2 涨跌幅: {len(lv2_price_map)} 条')
+ except Exception as price_err:
+ app.logger.warning(f'[mainline] 获取 lv2 涨跌幅失败: {price_err}')
+
+ # ==================== 6. 整理返回数据 ====================
mainlines = []
for lv2_id, group in mainline_groups.items():
# 按时间倒序排列(不限制数量)
@@ -11226,6 +11252,14 @@ def get_events_by_mainline():
reverse=True
)
group['event_count'] = len(group['events'])
+ # 添加涨跌幅数据
+ lv2_name = group.get('lv2_name', '')
+ if lv2_name in lv2_price_map:
+ group['avg_change_pct'] = lv2_price_map[lv2_name]['avg_change_pct']
+ group['price_date'] = lv2_price_map[lv2_name]['trade_date']
+ else:
+ group['avg_change_pct'] = None
+ group['price_date'] = None
mainlines.append(group)
# 按事件数量排序
diff --git a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
index 6d1c64e3..4c826aa5 100644
--- a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
+++ b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
@@ -22,6 +22,7 @@ import {
IconButton,
Tooltip,
Button,
+ SimpleGrid,
} from "@chakra-ui/react";
import {
ChevronDownIcon,
@@ -29,7 +30,7 @@ import {
RepeatIcon,
} from "@chakra-ui/icons";
import { FiTrendingUp, FiZap } from "react-icons/fi";
-import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
+import MiniEventCard from "../../EventCard/MiniEventCard";
import { getApiBase } from "@utils/apiConfig";
// 固定深色主题颜色
@@ -40,8 +41,6 @@ const COLORS = {
headerHoverBg: "#2d323e",
textColor: "#e2e8f0",
secondaryTextColor: "#a0aec0",
- timelineLineColor: "#4299e1",
- timelineDotBg: "#63b3ed",
scrollbarTrackBg: "#1a1d24",
scrollbarThumbBg: "#4a5568",
scrollbarThumbHoverBg: "#718096",
@@ -49,7 +48,7 @@ const COLORS = {
};
// 每次加载的事件数量
-const EVENTS_PER_LOAD = 10;
+const EVENTS_PER_LOAD = 12;
/**
* 单个主线卡片组件 - 支持懒加载
@@ -61,9 +60,6 @@ const MainlineCard = React.memo(({
onToggle,
selectedEvent,
onEventSelect,
- eventFollowStatus,
- onToggleFollow,
- borderColor,
}) => {
// 懒加载状态
const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
@@ -85,9 +81,9 @@ const MainlineCard = React.memo(({
const hasMore = displayCount < mainline.events.length;
// 加载更多
- const loadMore = useCallback(() => {
+ const loadMore = useCallback((e) => {
+ e.stopPropagation();
setIsLoadingMore(true);
- // 使用 setTimeout 模拟异步,避免 UI 卡顿
setTimeout(() => {
setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
setIsLoadingMore(false);
@@ -102,8 +98,8 @@ const MainlineCard = React.memo(({
borderColor={COLORS.cardBorderColor}
borderTopWidth="3px"
borderTopColor={`${colorScheme}.500`}
- minW={isExpanded ? "320px" : "200px"}
- maxW={isExpanded ? "380px" : "240px"}
+ minW={isExpanded ? "400px" : "200px"}
+ maxW={isExpanded ? "500px" : "240px"}
h="100%"
display="flex"
flexDirection="column"
@@ -149,11 +145,24 @@ const MainlineCard = React.memo(({
{mainline.event_count}
- {mainline.lv1_name && (
-
- {mainline.lv1_name}
-
- )}
+
+ {mainline.lv1_name && (
+
+ {mainline.lv1_name}
+
+ )}
+ {/* 涨跌幅显示 */}
+ {mainline.avg_change_pct != null && (
+ = 0 ? "#fc8181" : "#68d391"}
+ >
+ {mainline.avg_change_pct >= 0 ? "+" : ""}
+ {mainline.avg_change_pct.toFixed(2)}%
+
+ )}
+
- {/* 时间轴线 */}
-
-
- {/* 事件列表 */}
-
- {displayedEvents.map((event, eventIndex) => (
-
- {/* 时间轴圆点 */}
-
- {/* 事件卡片 */}
- {
- onEventSelect?.(clickedEvent);
- }}
- onTitleClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- onEventSelect?.(event);
- }}
- onToggleFollow={() => onToggleFollow?.(event.id)}
- borderColor={borderColor}
- compact
- />
-
+ {/* 事件网格 - 2列布局 */}
+
+ {displayedEvents.map((event) => (
+
))}
+
- {/* 加载更多按钮 */}
- {hasMore && (
-
- )}
-
+ {/* 加载更多按钮 */}
+ {hasMore && (
+
+ )}
) : (
/* 折叠时显示简要信息 */
- {mainline.events.slice(0, 3).map((event) => (
+ {mainline.events.slice(0, 4).map((event) => (
))}
- {mainline.events.length > 3 && (
+ {mainline.events.length > 4 && (
- ... 还有 {mainline.events.length - 3} 条
+ ... 还有 {mainline.events.length - 4} 条
)}
@@ -428,10 +391,10 @@ const MainlineTimelineViewComponent = forwardRef(
mainlines: sortedMainlines,
});
- // 初始化展开状态(默认全部折叠)
+ // 初始化展开状态(默认全部展开)
const initialExpanded = {};
sortedMainlines.forEach((mainline) => {
- initialExpanded[mainline.lv2_id] = false;
+ initialExpanded[mainline.lv2_id] = true;
});
setExpandedGroups(initialExpanded);
} else {
@@ -610,7 +573,7 @@ const MainlineTimelineViewComponent = forwardRef(
- {/* 主线卡片横向滚动容器 */}
+ {/* 主线卡片横向滚动容器 - 滚动条在顶部 */}
{mainlines.map((mainline) => (
toggleGroup(mainline.lv2_id)}
selectedEvent={selectedEvent}
onEventSelect={onEventSelect}
- eventFollowStatus={eventFollowStatus}
- onToggleFollow={onToggleFollow}
- borderColor={borderColor}
/>
))}
diff --git a/src/views/Community/components/EventCard/MiniEventCard.js b/src/views/Community/components/EventCard/MiniEventCard.js
new file mode 100644
index 00000000..fcf2f007
--- /dev/null
+++ b/src/views/Community/components/EventCard/MiniEventCard.js
@@ -0,0 +1,151 @@
+// src/views/Community/components/EventCard/MiniEventCard.js
+// 迷你事件卡片组件 - 用于主线模式的紧凑显示
+
+import React from 'react';
+import {
+ Box,
+ Text,
+ HStack,
+ Tooltip,
+ Badge,
+} from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import { getImportanceConfig } from '@constants/importanceLevels';
+
+// 固定深色主题颜色
+const COLORS = {
+ cardBg: "#2d323e",
+ cardHoverBg: "#363c4a",
+ cardBorderColor: "#4a5568",
+ textColor: "#e2e8f0",
+ secondaryTextColor: "#a0aec0",
+ linkColor: "#63b3ed",
+ selectedBg: "#2c5282",
+ selectedBorderColor: "#4299e1",
+};
+
+/**
+ * 迷你事件卡片组件
+ * 紧凑的卡片式布局,适合在主线模式中横向排列
+ */
+const MiniEventCard = React.memo(({
+ event,
+ isSelected = false,
+ onEventClick,
+}) => {
+ const importance = getImportanceConfig(event.importance);
+
+ // 格式化时间为简短形式
+ const formatTime = (timestamp) => {
+ const date = dayjs(timestamp);
+ const now = dayjs();
+ const diffDays = now.diff(date, 'day');
+
+ if (diffDays === 0) {
+ return date.format('HH:mm');
+ } else if (diffDays === 1) {
+ return '昨天 ' + date.format('HH:mm');
+ } else if (diffDays < 7) {
+ return date.format('MM-DD HH:mm');
+ } else {
+ return date.format('MM-DD');
+ }
+ };
+
+ // 获取涨跌幅显示
+ const getChangeDisplay = () => {
+ const avgChange = event.related_avg_chg;
+ if (avgChange == null || isNaN(Number(avgChange))) {
+ return null;
+ }
+ const numChange = Number(avgChange);
+ const isPositive = numChange > 0;
+ return {
+ value: `${isPositive ? '+' : ''}${numChange.toFixed(1)}%`,
+ color: isPositive ? '#fc8181' : '#68d391',
+ };
+ };
+
+ const changeDisplay = getChangeDisplay();
+
+ return (
+
+ {event.title}
+
+ {dayjs(event.created_at).format('YYYY-MM-DD HH:mm')}
+
+ {event.description && (
+
+ {event.description}
+
+ )}
+
+ }
+ placement="top"
+ hasArrow
+ bg="gray.800"
+ color="white"
+ p={3}
+ borderRadius="md"
+ maxW="300px"
+ >
+ onEventClick?.(event)}
+ _hover={{
+ bg: isSelected ? COLORS.selectedBg : COLORS.cardHoverBg,
+ borderColor: importance.color || COLORS.cardBorderColor,
+ transform: 'translateY(-1px)',
+ }}
+ transition="all 0.15s ease"
+ minW="0"
+ >
+ {/* 第一行:时间 + 涨跌幅 */}
+
+
+ {formatTime(event.created_at)}
+
+ {changeDisplay && (
+
+ {changeDisplay.value}
+
+ )}
+
+
+ {/* 第二行:标题 */}
+
+ {event.title}
+
+
+
+ );
+});
+
+MiniEventCard.displayName = 'MiniEventCard';
+
+export default MiniEventCard;