feat: implement dynamic precision selection for market data and depth chart visualization.

Author: mingxingmeng-ctrl

src/App.tsx

@@ -31,6 +31,13 @@ function App() {
     handleDataSourceChange,
   } = useDataSource();
 
+  // ========== 交易对状态 ==========
+  const [activeSymbol, setActiveSymbol] = useState('BTCUSDT');
+  const handleSymbolChange = useCallback((symbol: string) => {
+    setActiveSymbol(symbol);
+    // 切换 symbol 时也可以触发一些重置逻辑 if needed
+  }, []);
+
   const setSwitching = useUiStore((s: UiState) => s.setSwitching);
 
   // ========== Wasm 引擎 ==========
@@ -63,10 +70,12 @@ function App() {
     ticker24h,
     recentTrades,
     takerBuyRatio,
+    premiumIndex,
   } = useWasmEngine({
     tickInterval: 100,
     dataSource,
     historyCount: 5000,
+    symbol: activeSymbol,
   });
 
   // 切换完成条件
@@ -93,6 +102,7 @@ function App() {
     timeframe: activeTimeframe,
     ticker24h,
     takerBuyRatio,
+    premiumIndex,
   });
 
   const handleTimeframeChange = useCallback(
@@ -133,14 +143,15 @@ function App() {
         isRunning={isRunning}
         onToggle={dataSource === 'mock' ? toggleFeed : undefined}
         price={latestData?.price}
-        symbol={latestData?.symbol}
+        symbol={activeSymbol}
         priceTrend={priceTrend}
         priceColorClass={priceColorClass}
         dataSource={dataSource}
         onDataSourceChange={handleDataSourceChange}
         connectionStatus={connectionStatus}
         isSwitching={isSwitching}
         marketStats={marketStats}
+        onSymbolChange={handleSymbolChange}
       />
 
       <main className="flex-1 min-h-0 relative flex flex-col bg-terminal-bg">
@@ -150,6 +161,7 @@ function App() {
             fullscreen
             dataSource={dataSource}
             onSwitchToChart={switchToChartView}
+            symbol={activeSymbol}
           />
         </div>
 
@@ -189,7 +201,7 @@ function App() {
             }
             tradesContent={
               <div className="h-full bg-terminal-bg">
-                <RecentTrades trades={recentTrades ?? []} />
+                <RecentTrades trades={recentTrades ?? []} symbol={activeSymbol} />
               </div>
             }
           />
@@ -220,7 +232,7 @@ function App() {
         }
       >
         <TradePanel
-          symbol="BTC"
+          symbol={activeSymbol.replace('USDT', '')}
           currentPrice={latestData?.price ?? 40000}
           balance={tradingState?.balance ?? 10000}
           availableBalance={tradingState?.availableBalance ?? 10000}

src/components/Dashboard/Chart/DepthChart.tsx

@@ -27,6 +27,7 @@ function DepthChart({ bids, asks, price }: DepthChartProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState({ w: 0, h: 0 });
   const [mouse, setMouse] = useState<{ x: number; y: number } | null>(null);
+  const [precision, setPrecision] = useState(0.1);
 
   // 数据处理 Hook
   const {
@@ -41,7 +42,7 @@ function DepthChart({ bids, asks, price }: DepthChartProps) {
     zoomIn,
     zoomOut,
     hasData,
-  } = useDepthData(bids, asks, price);
+  } = useDepthData(bids, asks, price, precision);
 
   // 响应式尺寸
   useEffect(() => {
@@ -167,6 +168,22 @@ function DepthChart({ bids, asks, price }: DepthChartProps) {
           <ZoomOut className="w-3.5 h-3.5" />
         </button>
       </div>
+
+      {/* 精度选择 (新增) */}
+      <div className="absolute top-2 right-3 z-10">
+        <select
+          value={precision}
+          onChange={(e) => setPrecision(Number(e.target.value))}
+          className="bg-bg-surface/80 backdrop-blur-sm border border-border-dark text-[10px] text-gray-400 rounded px-1.5 py-0.5 outline-none hover:text-white hover:bg-bg-surface-alt transition-colors cursor-pointer appearance-none text-right min-w-[60px]"
+          title="调整聚合精度"
+        >
+          {[0.01, 0.05, 0.1, 0.5, 1, 5, 10, 50, 100].map((p) => (
+            <option key={p} value={p}>
+              Step: {p}
+            </option>
+          ))}
+        </select>
+      </div>
     </div>
   );
 }

src/components/Dashboard/Chart/hooks/useDepthData.ts

@@ -36,23 +36,28 @@ export interface UseDepthDataResult {
    数据处理函数
    ============================================ */
 
-function buildDepth(bids: [number, number][], asks: [number, number][]) {
-    // 买单：从 best bid 向外累加，反转为 [低价 → 高价]
-    const bidPts: DepthPoint[] = [];
-    let cum = 0;
-    for (const [p, a] of bids) {
-        cum += a;
-        bidPts.push({ price: p, cumVolume: cum });
-    }
-    bidPts.reverse();
-
-    // 卖单：从 best ask 向外累加 [低价 → 高价]
-    const askPts: DepthPoint[] = [];
-    cum = 0;
-    for (const [p, a] of asks) {
-        cum += a;
-        askPts.push({ price: p, cumVolume: cum });
-    }
+function buildDepth(bids: [number, number][], asks: [number, number][], precision: number) {
+    // 聚合逻辑
+    const aggregate = (list: [number, number][], desc: boolean) => {
+        const map = new Map<number, number>();
+        for (const [p, a] of list) {
+            // 向下取整到精度
+            const k = Math.floor(p / precision) * precision;
+            map.set(k, (map.get(k) || 0) + a);
+        }
+        const sortedKeys = Array.from(map.keys()).sort((a, b) => desc ? b - a : a - b);
+        
+        const pts: DepthPoint[] = [];
+        let cum = 0;
+        for (const k of sortedKeys) {
+            cum += map.get(k)!;
+            pts.push({ price: k, cumVolume: cum });
+        }
+        return pts;
+    };
+
+    const bidPts = aggregate(bids, true); // 买单价格降序
+    const askPts = aggregate(asks, false); // 卖单价格升序
 
     return { bidPts, askPts };
 }
@@ -65,12 +70,13 @@ export function useDepthData(
     bids: [number, number][],
     asks: [number, number][],
     price?: number,
+    precision: number = 0.1, // 默认精度
 ): UseDepthDataResult {
     const [zoomIdx, setZoomIdx] = useState(DEFAULT_ZOOM);
     const zoom = ZOOM_STEPS[zoomIdx];
 
     // 累积深度
-    const { bidPts, askPts } = useMemo(() => buildDepth(bids, asks), [bids, asks]);
+    const { bidPts, askPts } = useMemo(() => buildDepth(bids, asks, precision), [bids, asks, precision]);
 
     // 实时统计
     const stats = useMemo<DepthStats>(() => {

src/components/Dashboard/RecentTrades.tsx

@@ -1,11 +1,15 @@
 /**
- * RecentTrades - 实时成交列表
+ * RecentTrades (TradeAnalysis) - 实时成交分析
  *
- * 显示最近 50 笔成交记录，数据来自 Binance WebSocket trade stream
+ * 显示最近 50 笔成交记录，并提供买卖盘分析（针对特定 Symbol）：
+ * - 买卖量对比 (Taker Buy/Sell Volume)
+ * - 大单监控 (Whale Alerts)
+ * - 净流入计算
  */
 
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import type { TradeRecord } from '../../hooks/useBinanceMarket';
+import { ArrowDown, ArrowUp } from 'lucide-react';
 
 /* ============================================
    格式化工具
@@ -20,9 +24,9 @@ function formatTime(ms: number): string {
 }
 
 function formatQty(qty: number): string {
-  if (qty >= 1) return qty.toFixed(4);
-  if (qty >= 0.01) return qty.toFixed(5);
-  return qty.toFixed(6);
+  if (qty >= 10) return qty.toFixed(2);
+  if (qty >= 1) return qty.toFixed(3);
+  return qty.toFixed(4);
 }
 
 /* ============================================
@@ -31,48 +35,137 @@ function formatQty(qty: number): string {
 
 interface RecentTradesProps {
   trades: TradeRecord[];
+  symbol?: string;
 }
 
-function RecentTrades({ trades }: RecentTradesProps) {
+function RecentTrades({ trades, symbol = 'BTC' }: RecentTradesProps) {
+  // 统计分析
+  const stats = useMemo(() => {
+    let buyVol = 0;
+    let sellVol = 0;
+    let buyCount = 0;
+    let sellCount = 0;
+    let maxQty = 0;
+
+    trades.forEach((t) => {
+      // isBuyerMaker = false -> 主动买入 (Up)
+      // isBuyerMaker = true -> 主动卖出 (Down)
+      if (!t.isBuyerMaker) {
+        buyVol += t.qty;
+        buyCount++;
+      } else {
+        sellVol += t.qty;
+        sellCount++;
+      }
+      if (t.qty > maxQty) maxQty = t.qty;
+    });
+
+    return {
+      buyVol,
+      sellVol,
+      buyCount,
+      sellCount,
+      netVol: buyVol - sellVol,
+      maxQty: Math.max(maxQty, 0.0001), // 避免除以0
+      isBuyDominant: buyVol > sellVol,
+    };
+  }, [trades]);
+
   if (trades.length === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-gray-600 text-[10px] font-mono">
-        等待成交数据...
+      <div className="flex flex-col items-center justify-center h-full text-gray-500 text-[10px] font-mono gap-2">
+        <span className="w-4 h-4 rounded-full border-2 border-border-dark border-t-accent animate-spin" />
+        <span>Waiting for trades...</span>
       </div>
     );
   }
 
+  // 大单阈值：最大成交量的 30% 或者 绝对值（BTC > 0.1, ETH > 2)
+  // 这里简化为相对阈值，因为 symbol 不确定
+  const largeOrderThreshold = stats.maxQty * 0.3;
+
   return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* 表头 */}
-      <div className="flex items-center px-2 py-1 text-[9px] font-mono text-gray-500 border-b border-border-dark shrink-0">
-        <span className="w-[32%]">Price (USDT)</span>
-        <span className="w-[32%] text-right">Amount (BTC)</span>
-        <span className="w-[36%] text-right">Time</span>
+    <div className="flex flex-col h-full overflow-hidden bg-bg-surface text-[10px] font-mono select-none">
+      {/* ========== 统计面板 ========== */}
+      <div className="px-2 py-1.5 border-b border-border-dark bg-bg-surface-alt">
+        {/* 标题行 */}
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="font-bold text-gray-300">{symbol} Analysis</span>
+          <span className={stats.netVol > 0 ? 'text-success' : 'text-danger'}>
+            Net: {stats.netVol > 0 ? '+' : ''}{formatQty(stats.netVol)}
+          </span>
+        </div>
+
+        {/* 买卖量条 */}
+        <div className="flex items-center justify-between mb-1 text-[9px] text-gray-400">
+          <span className="text-success flex items-center gap-1">
+            <ArrowUp className="w-2.5 h-2.5" /> Buy {formatQty(stats.buyVol)}
+          </span>
+          <span className="text-danger flex items-center gap-1">
+            Sell {formatQty(stats.sellVol)} <ArrowDown className="w-2.5 h-2.5" />
+          </span>
+        </div>
+        
+        {/* 比例条 */}
+        <div className="h-1.5 w-full bg-border-dark rounded-full overflow-hidden flex">
+          <div 
+            className="h-full bg-success transition-all duration-300"
+            style={{ width: `${(stats.buyVol / (stats.buyVol + stats.sellVol || 1)) * 100}%` }}
+          />
+          <div 
+            className="h-full bg-danger transition-all duration-300"
+            style={{ width: `${(stats.sellVol / (stats.buyVol + stats.sellVol || 1)) * 100}%` }}
+          />
+        </div>
+
+        {/* 净流量 */}
+        <div className="flex justify-between mt-1 text-[9px]">
+          <span className="text-gray-500">Vol Ratio</span>
+          <span className={stats.netVol > 0 ? 'text-success' : 'text-danger'}>
+            Net: {stats.netVol > 0 ? '+' : ''}{formatQty(stats.netVol)}
+          </span>
+        </div>
+      </div>
+
+      {/* ========== 表头 ========== */}
+      <div className="flex items-center px-2 py-1 text-[9px] text-gray-500 border-b border-border-dark shrink-0 bg-bg-surface">
+        <span className="w-[30%]">Price</span>
+        <span className="w-[30%] text-right">Qty</span>
+        <span className="w-[40%] text-right">Time</span>
       </div>
 
-      {/* 成交列表 */}
+      {/* ========== 成交列表 ========== */}
       <div className="flex-1 overflow-y-auto scrollbar-thin">
         {trades.map((trade) => {
-          // isBuyerMaker = true → 卖方主动（价格下跌方向）
-          // isBuyerMaker = false → 买方主动（价格上涨方向）
-          const colorClass = trade.isBuyerMaker ? 'text-danger' : 'text-success';
+          const isBuy = !trade.isBuyerMaker;
+          const isLarge = trade.qty >= largeOrderThreshold;
+          
+          // 数量条长度 (相对于最大单)
+          const barWidth = Math.min((trade.qty / stats.maxQty) * 100, 100);
 
           return (
             <div
               key={trade.id}
-              className="flex items-center px-2 py-px text-[10px] font-mono tabular-nums hover:bg-bg-surface/50 transition-colors"
+              className={`relative flex items-center px-2 py-[2px] transition-colors hover:bg-white/5 ${
+                isLarge ? 'bg-white/5' : ''
+              }`}
             >
-              <span className={`w-[32%] ${colorClass}`}>
+              {/* 背景数量条 */}
+              <div 
+                className={`absolute left-0 top-0 bottom-0 opacity-10 ${isBuy ? 'bg-success' : 'bg-danger'}`}
+                style={{ width: `${barWidth}%` }}
+              />
+
+              <span className={`w-[30%] relative z-10 ${isBuy ? 'text-success' : 'text-danger'} ${isLarge ? 'font-bold' : ''}`}>
                 {trade.price.toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1, // 减少小数位，节省空间
                 })}
               </span>
-              <span className="w-[32%] text-right text-gray-300">
+              <span className={`w-[30%] text-right relative z-10 ${isLarge ? 'text-gray-100 font-bold' : 'text-gray-400'}`}>
                 {formatQty(trade.qty)}
               </span>
-              <span className="w-[36%] text-right text-gray-500">
+              <span className="w-[40%] text-right text-gray-500 relative z-10 opacity-70">
                 {formatTime(trade.time)}
               </span>
             </div>