update pay ui

src/components/StockChangeIndicators.js

@@ -1,13 +1,13 @@
 // src/components/StockChangeIndicators.js
 // 股票涨跌幅指标组件（通用）
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
 import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';
 import { getChangeColor } from '../utils/colorUtils';
 
 /**
- * 股票涨跌幅指标组件（3分天下布局）
+ * 股票涨跌幅指标组件（2个指标：超额涨幅可切换 + 超预期得分）
  * @param {Object} props
  * @param {number} props.avgChange - 平均超额涨幅
  * @param {number} props.maxChange - 最大超额涨幅
@@ -20,6 +20,9 @@ const StockChangeIndicators = ({
     expectationScore,
     size = 'default',
 }) => {
+    // 点击切换显示最大超额/平均超额
+    const [showMax, setShowMax] = useState(true);
+
     const isLarge = size === 'large';
     const isComfortable = size === 'comfortable';
     const isDefault = size === 'default';
@@ -68,8 +71,11 @@ const StockChangeIndicators = ({
             : useColorModeValue('green.200', 'green.700');
     };
 
-    // 渲染单个指标
-    const renderIndicator = (label, value) => {
+    // 渲染可切换的超额指标（最大超额/平均超额）
+    const renderToggleIndicator = () => {
+        const value = showMax ? maxChange : avgChange;
+        const label = showMax ? '最大超额' : '平均超额';
+
         if (value == null) return null;
 
         const sign = value > 0 ? '+' : '-';
@@ -95,11 +101,18 @@ const StockChangeIndicators = ({
                 maxW={isLarge ? "200px" : "none"}
                 flex="0 1 auto"
                 minW="0"
+                cursor="pointer"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    setShowMax(!showMax);
+                }}
+                _hover={{ opacity: 0.85 }}
+                title={`点击切换${showMax ? '平均超额' : '最大超额'}`}
             >
                 {/* Large 和 Default 模式：标签单独一行 */}
                 {(isLarge || isDefault) && (
                     <Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
-                        {label.trim()}
+                        {label}
                     </Text>
                 )}
 
@@ -135,7 +148,7 @@ const StockChangeIndicators = ({
                         {/* Comfortable 模式：标签和数字在同一行 */}
                         {!isLarge && !isDefault && (
                             <Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
-                                {label}
+                                {label}{' '}
                             </Text>
                         )}
                         {sign}{numStr}
@@ -229,8 +242,9 @@ const StockChangeIndicators = ({
 
     return (
         <Flex width="100%" justify="flex-start" align="center" gap={isLarge ? 4 : (isDefault ? 2 : 1)}>
-            {renderIndicator('最大超额', maxChange)}
-            {renderIndicator('平均超额', avgChange)}
+            {/* 可切换的超额指标（最大超额/平均超额） */}
+            {renderToggleIndicator()}
+            {/* 超预期得分 */}
             {renderScoreIndicator('超预期', expectationScore)}
         </Flex>
     );