From f7f9774caa7993ff06a58c308e2e5163057bd434 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Wed, 3 Dec 2025 08:38:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E5=8E=9F=E6=9C=89?=
 =?UTF-8?q?=E6=B6=A8=E8=B7=8C=E5=B9=85=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=B0=86?=
 =?UTF-8?q?=E5=91=A8=E6=B6=A8=E5=B9=85=E6=94=B9=E4=B8=BA=E8=B6=85=E9=A2=84?=
 =?UTF-8?q?=E6=9C=9F=E5=BE=97=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 恢复HorizontalDynamicNewsEventCard使用StockChangeIndicators组件
- 修改StockChangeIndicators：周涨幅→超预期得分，平均涨幅→平均超额，最大涨幅→最大超额
- 超预期得分显示为分数形式（如60分），根据分数显示不同颜色
---
 src/components/StockChangeIndicators.js       | 92 +++++++++++++++++--
 .../HorizontalDynamicNewsEventCard.js         | 12 ++-
 2 files changed, 91 insertions(+), 13 deletions(-)

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 (
+            <Box
+                bg={bgColor}
+                borderWidth={isLarge ? "2px" : "1px"}
+                borderColor={borderColor}
+                borderRadius="md"
+                px={isLarge ? 4 : (isDefault ? 1.5 : (isComfortable ? 3 : 2))}
+                py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))}
+                display="flex"
+                flexDirection={(isLarge || isDefault) ? "column" : "row"}
+                alignItems={(isLarge || isDefault) ? "flex-start" : "center"}
+                gap={(isLarge || isDefault) ? (isLarge ? 2 : 1) : 1}
+                maxW={isLarge ? "200px" : "none"}
+                flex="0 1 auto"
+                minW="0"
+            >
+                {/* Large 和 Default 模式：标签单独一行 */}
+                {(isLarge || isDefault) && (
+                    <Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
+                        {label}
+                    </Text>
+                )}
+
+                {/* 数值 */}
+                <Text
+                    fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
+                    fontWeight="bold"
+                    color={scoreColor}
+                    lineHeight="1.2"
+                    whiteSpace="nowrap"
+                >
+                    {/* Comfortable 模式：标签和数字在同一行 */}
+                    {!isLarge && !isDefault && (
+                        <Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
+                            {label}
+                        </Text>
+                    )}
+                    {Math.round(score)}
+                    <Text as="span" fontWeight="medium" fontSize="sm">分</Text>
+                </Text>
+            </Box>
+        );
+    };
+
     // 如果没有任何数据，不渲染
-    if (avgChange == null && maxChange == null && weekChange == null) {
+    if (avgChange == null && maxChange == null && expectationScore == null) {
         return null;
     }
 
     return (
         <Flex width="100%" justify="flex-start" align="center" gap={isLarge ? 4 : (isDefault ? 2 : 1)}>
-            {renderIndicator('平均涨幅', avgChange)}
-            {renderIndicator('最大涨幅', maxChange)}
-            {renderIndicator('周涨幅', weekChange)}
+            {renderIndicator('最大超额', maxChange)}
+            {renderIndicator('平均超额', avgChange)}
+            {renderScoreIndicator('超预期', expectationScore)}
         </Flex>
     );
 };
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(({
                                 </Box>
                             </Tooltip>
 
-                            {/* 第二行：最大超额 + 超预期得分 */}
-                            <EventPriceDisplay
-                                avgChange={event.related_avg_chg}
+                            {/* 第二行：涨跌幅数据 */}
+                            <StockChangeIndicators
                                 maxChange={event.related_max_chg}
+                                avgChange={event.related_avg_chg}
                                 expectationScore={event.expectation_surprise_score}
-                                compact={false}
+                                size={indicatorSize}
                             />
                         </VStack>
                     </CardBody>