update pay ui

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<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);

src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx

@@ -123,14 +123,31 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
   };
 
   // 获取盘口数据（带类型安全）
-  const bidPrices = 'bidPrices' in quoteData ? (quoteData.bidPrices as number[]) : [];
+  let bidPrices = 'bidPrices' in quoteData ? (quoteData.bidPrices as number[]) : [];
-  const bidVolumes = 'bidVolumes' in quoteData ? (quoteData.bidVolumes as number[]) : [];
+  let bidVolumes = 'bidVolumes' in quoteData ? (quoteData.bidVolumes as number[]) : [];
-  const askPrices = 'askPrices' in quoteData ? (quoteData.askPrices as number[]) : [];
+  let askPrices = 'askPrices' in quoteData ? (quoteData.askPrices as number[]) : [];
-  const askVolumes = 'askVolumes' in quoteData ? (quoteData.askVolumes 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}