vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-10 16:26:36 +08:00
parent cca6f3a054
commit 7f5085ba8e
2 changed files with 39 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx
View File

@@ -5,7 +5,7 @@
* 上交所: 5 档行情
* 深交所: 10 档行情
*/
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import {
Box,
VStack,
@@ -170,6 +170,14 @@ const OrderBookPanel: React.FC<OrderBookPanelProps> = ({
const maxAvailableLevels = Math.max(bidPrices.length, askPrices.length, 1);
const [showLevels, setShowLevels] = useState(Math.min(defaultLevels, maxAvailableLevels));
// 当数据档位数变化时，自动更新显示档位
useEffect(() => {
// 如果当前显示档位少于可用档位，且用户没有手动切换过，自动扩展到默认档位数
if (showLevels < maxAvailableLevels && showLevels < defaultLevels) {
setShowLevels(Math.min(defaultLevels, maxAvailableLevels));
}
}, [maxAvailableLevels, defaultLevels, showLevels]);
// 计算最大成交量（用于条形图比例）
const displayBidVolumes = bidVolumes.slice(0, showLevels);
const displayAskVolumes = askVolumes.slice(0, showLevels);

35
src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
View File

@@ -123,14 +123,31 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
};
// 获取盘口数据（带类型安全）
const bidPrices = 'bidPrices' in quoteData ? (quoteData.bidPrices as number[]) : [];
const bidVolumes = 'bidVolumes' in quoteData ? (quoteData.bidVolumes as number[]) : [];
const askPrices = 'askPrices' in quoteData ? (quoteData.askPrices as number[]) : [];
const askVolumes = 'askVolumes' in quoteData ? (quoteData.askVolumes as number[]) : [];
let bidPrices = 'bidPrices' in quoteData ? (quoteData.bidPrices as number[]) : [];
let bidVolumes = 'bidVolumes' in quoteData ? (quoteData.bidVolumes as number[]) : [];
let askPrices = 'askPrices' in quoteData ? (quoteData.askPrices as number[]) : [];
let askVolumes = 'askVolumes' in quoteData ? (quoteData.askVolumes as number[]) : [];
const upperLimit = 'upperLimit' in quoteData ? (quoteData.upperLimit as number | undefined) : undefined;
const lowerLimit = 'lowerLimit' in quoteData ? (quoteData.lowerLimit as number | undefined) : undefined;
const openPrice = 'open' in quoteData ? (quoteData.open as number | undefined) : undefined;
// 盘后数据：如果没有五档数据但有 afterhours 数据，使用单档显示
const afterhours = 'afterhours' in quoteData ? (quoteData.afterhours as {
bidPx?: number;
bidSize?: number;
offerPx?: number;
offerSize?: number;
} | undefined) : undefined;
if (bidPrices.length === 0 && afterhours?.bidPx && afterhours.bidPx > 0) {
bidPrices = [afterhours.bidPx];
bidVolumes = [afterhours.bidSize || 0];
}
if (askPrices.length === 0 && afterhours?.offerPx && afterhours.offerPx > 0) {
askPrices = [afterhours.offerPx];
askVolumes = [afterhours.offerSize || 0];
}
return (
<Box
bg={cardBg}
@@ -266,7 +283,15 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
{!isIndex && (
<Box>
<Text fontSize="xs" color={subTextColor} mb={1}>
盘口 {bidPrices.length > 5 ? '(10档)' : '(5档)'}
{afterhours && bidPrices.length <= 1 ? (
<>盘口 <Badge colorScheme="purple" fontSize="2xs" ml={1}>盘后</Badge></>
) : bidPrices.length > 5 ? (
'盘口 (10档)'
) : bidPrices.length > 0 ? (
'盘口 (5档)'
) : (
'盘口'
)}
</Text>
<OrderBookPanel
bidPrices={bidPrices}