diff --git a/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx b/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx index 4da68ca0..2ad1c5fc 100644 --- a/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx +++ b/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx @@ -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 = ({ 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); diff --git a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx index d5a51be5..5e2b0767 100644 --- a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx +++ b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx @@ -123,14 +123,31 @@ const QuoteTile: React.FC = ({ }; // 获取盘口数据(带类型安全) - 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 ( = ({ {!isIndex && ( - 盘口 {bidPrices.length > 5 ? '(10档)' : '(5档)'} + {afterhours && bidPrices.length <= 1 ? ( + <>盘口 盘后 + ) : bidPrices.length > 5 ? ( + '盘口 (10档)' + ) : bidPrices.length > 0 ? ( + '盘口 (5档)' + ) : ( + '盘口' + )}