diff --git a/src/components/StockChangeIndicators.js b/src/components/StockChangeIndicators.js
index a787239f..f96bf09b 100644
--- a/src/components/StockChangeIndicators.js
+++ b/src/components/StockChangeIndicators.js
@@ -9,15 +9,15 @@ import { getChangeColor } from '../utils/colorUtils';
/**
* 股票涨跌幅指标组件(3分天下布局)
* @param {Object} props
- * @param {number} props.avgChange - 平均涨跌幅
- * @param {number} props.maxChange - 最大涨跌幅
- * @param {number} props.weekChange - 周涨跌幅
+ * @param {number} props.avgChange - 平均超额涨幅
+ * @param {number} props.maxChange - 最大超额涨幅
+ * @param {number} props.expectationScore - 超预期得分(0-100)
* @param {'default'|'comfortable'|'large'} props.size - 尺寸模式:default=紧凑,comfortable=舒适(事件列表),large=大卡片(详情面板)
*/
const StockChangeIndicators = ({
avgChange,
maxChange,
- weekChange,
+ expectationScore,
size = 'default',
}) => {
const isLarge = size === 'large';
@@ -146,16 +146,92 @@ const StockChangeIndicators = ({
);
};
+ // 渲染超预期得分指标(特殊样式,分数而非百分比)
+ const renderScoreIndicator = (label, score) => {
+ if (score == null) return null;
+
+ const labelColor = useColorModeValue('gray.600', 'gray.400');
+
+ // 根据分数确定颜色:>=60红色,>=40橙色,>=20蓝色,其他灰色
+ const getScoreColor = (s) => {
+ if (s >= 60) return useColorModeValue('red.600', 'red.400');
+ if (s >= 40) return useColorModeValue('orange.600', 'orange.400');
+ if (s >= 20) return useColorModeValue('blue.600', 'blue.400');
+ return useColorModeValue('gray.600', 'gray.400');
+ };
+
+ const getScoreBgColor = (s) => {
+ if (s >= 60) return useColorModeValue('red.50', 'red.900');
+ if (s >= 40) return useColorModeValue('orange.50', 'orange.900');
+ if (s >= 20) return useColorModeValue('blue.50', 'blue.900');
+ return useColorModeValue('gray.50', 'gray.800');
+ };
+
+ const getScoreBorderColor = (s) => {
+ if (s >= 60) return useColorModeValue('red.200', 'red.700');
+ if (s >= 40) return useColorModeValue('orange.200', 'orange.700');
+ if (s >= 20) return useColorModeValue('blue.200', 'blue.700');
+ return useColorModeValue('gray.200', 'gray.700');
+ };
+
+ const scoreColor = getScoreColor(score);
+ const bgColor = getScoreBgColor(score);
+ const borderColor = getScoreBorderColor(score);
+
+ return (
+
+ {/* Large 和 Default 模式:标签单独一行 */}
+ {(isLarge || isDefault) && (
+
+ {label}
+
+ )}
+
+ {/* 数值 */}
+
+ {/* Comfortable 模式:标签和数字在同一行 */}
+ {!isLarge && !isDefault && (
+
+ {label}
+
+ )}
+ {Math.round(score)}
+ 分
+
+
+ );
+ };
+
// 如果没有任何数据,不渲染
- if (avgChange == null && maxChange == null && weekChange == null) {
+ if (avgChange == null && maxChange == null && expectationScore == null) {
return null;
}
return (
- {renderIndicator('平均涨幅', avgChange)}
- {renderIndicator('最大涨幅', maxChange)}
- {renderIndicator('周涨幅', weekChange)}
+ {renderIndicator('最大超额', maxChange)}
+ {renderIndicator('平均超额', avgChange)}
+ {renderScoreIndicator('超预期', expectationScore)}
);
};
diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
index ae7143c1..ad3eab19 100644
--- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
@@ -22,7 +22,7 @@ import dayjs from 'dayjs';
import ImportanceStamp from './ImportanceStamp';
import EventTimeline from './EventTimeline';
import EventFollowButton from './EventFollowButton';
-import EventPriceDisplay from './EventPriceDisplay';
+import StockChangeIndicators from '../../../../components/StockChangeIndicators';
import KeywordsCarousel from './KeywordsCarousel';
/**
@@ -38,6 +38,7 @@ import KeywordsCarousel from './KeywordsCarousel';
* @param {Function} props.onToggleFollow - 切换关注事件
* @param {Object} props.timelineStyle - 时间轴样式配置
* @param {string} props.borderColor - 边框颜色
+ * @param {string} props.indicatorSize - 涨幅指标尺寸 ('default' | 'comfortable' | 'large')
* @param {string} props.layout - 布局模式 ('vertical' | 'four-row'),影响时间轴竖线高度
*/
const HorizontalDynamicNewsEventCard = React.memo(({
@@ -51,6 +52,7 @@ const HorizontalDynamicNewsEventCard = React.memo(({
onToggleFollow,
timelineStyle,
borderColor: timelineBorderColor,
+ indicatorSize = 'comfortable',
layout = 'vertical',
}) => {
const importance = getImportanceConfig(event.importance);
@@ -243,12 +245,12 @@ const HorizontalDynamicNewsEventCard = React.memo(({
- {/* 第二行:最大超额 + 超预期得分 */}
-