update pay ui
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user