update pay ui

This commit is contained in:
2025-12-03 10:45:33 +08:00
parent 03d0a6514c
commit 368af3f498

View File

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