refactor: 支持 Binance 实时数据源与成交量追踪优化

- **数据源切换**:
  - 新增 `dataSource` 状态管理（mock/binance），支持 URL 参数与 localStorage 持久化
  - 在 Header 中新增数据源切换按钮，显示连接状态
  - LIVE 模式下隐藏交易表单与交易栏，仅展示市场数据

- **成交量处理优化**:
  - 在 `OrderBook` 模型中新增 `volume` 字段，用于接收 Binance K 线的累计成交量
  - 更新 `MarketEngine::process_tick` 逻辑

Author: Duri686

core/Cargo.toml

@@ -16,6 +16,7 @@ serde = { version = "1.0", features = ["derive"] }
 serde-wasm-bindgen = "0.4"
 # JavaScript API 绑定
 js-sys = "0.3"
+web-sys = { version = "0.3", features = ["console"] }
 
 [profile.release]
 # 优化 wasm 体积

core/src/engine/market_engine/market_data.rs

@@ -13,7 +13,27 @@ impl MarketEngine {
     pub(crate) fn process_tick(&mut self, order_book: &OrderBook) {
         // 1. 更新 Tick 数据
         self.tick_data.push_price(order_book.price);
-        let volume = self.tick_data.estimate_volume(order_book);
+        
+        // 🔍 成交量追踪日志：Rust 引擎接收
+        let volume = if let Some(provided_volume) = order_book.volume {
+            // 使用提供的成交量（来自 Binance K 线数据）
+            // 注意：这是该 K 线的累计成交量，不是增量
+            // 对于实时 K 线，我们需要计算增量
+            web_sys::console::log_1(&format!(
+                "[VOL追踪] 🦀 Rust process_tick: 使用提供的成交量={:.4}",
+                provided_volume
+            ).into());
+            provided_volume
+        } else {
+            // 回退到估算方法（用于 MOCK 数据）
+            let estimated = self.tick_data.estimate_volume(order_book);
+            web_sys::console::log_1(&format!(
+                "[VOL追踪] 🦀 Rust process_tick: 成交量未提供，使用估算值={:.4}",
+                estimated
+            ).into());
+            estimated
+        };
+        
         self.tick_data.push_volume(volume);
 
         // 2. 更新 K 线

core/src/engine/tests.rs

@@ -72,6 +72,7 @@ fn test_engine_estimate_volume() {
         price: 100.0,
         bids: vec![(99.0, 10.0)],
         asks: vec![(101.0, 20.0)],
+        volume: None,
     };
     assert_eq!(engine.tick_data.estimate_volume(&order_book), 15.0);
 }
@@ -87,6 +88,7 @@ fn test_compute_all_indicators() {
         price: 40500.0,
         bids: vec![(40490.0, 1.0)],
         asks: vec![(40510.0, 1.0)],
+        volume: None,
     };
 
     let result = engine.compute_all_indicators(&order_book);

core/src/indicators/macd.rs

@@ -71,7 +71,7 @@ pub fn calculate_macd(
     Some(MacdResult {
         dif,
         dea,
-        hist: (dif - dea) * 2.0,
+        hist: (dif - dea),
     })
 }
 
@@ -92,7 +92,7 @@ mod tests {
     fn test_macd_histogram_formula() {
         let data: Vec<f64> = (1..=60).map(|x| 100.0 + x as f64).collect();
         let macd = calculate_macd(&data, 12, 26, 9).unwrap();
-        let expected_hist = (macd.dif - macd.dea) * 2.0;
+        let expected_hist = macd.dif - macd.dea;
         assert!((macd.hist - expected_hist).abs() < 0.0001);
     }
 

core/src/indicators/rsi.rs

@@ -16,26 +16,31 @@ pub fn calculate_rsi(data: &[f64], period: usize) -> Option<f64> {
         return None;
     }
 
-    let (gains, losses): (Vec<f64>, Vec<f64>) = data
-        .windows(2)
-        .map(|window| {
-            let change = window[1] - window[0];
-            if change > 0.0 {
-                (change, 0.0)
-            } else {
-                (0.0, change.abs())
-            }
-        })
-        .unzip();
-
-    let start = gains.len().saturating_sub(period);
-    let recent_gains = &gains[start..];
-    let recent_losses = &losses[start..];
+    let mut gains_sum = 0.0;
+    let mut losses_sum = 0.0;
+    for i in 1..=period {
+        let change = data[i] - data[i - 1];
+        if change > 0.0 {
+            gains_sum += change;
+        } else {
+            losses_sum += -change;
+        }
+    }
 
-    let avg_gain: f64 = recent_gains.iter().sum::<f64>() / period as f64;
-    let avg_loss: f64 = recent_losses.iter().sum::<f64>() / period as f64;
+    let mut avg_gain = gains_sum / period as f64;
+    let mut avg_loss = losses_sum / period as f64;
+    for i in (period + 1)..data.len() {
+        let change = data[i] - data[i - 1];
+        let gain = if change > 0.0 { change } else { 0.0 };
+        let loss = if change < 0.0 { -change } else { 0.0 };
+        avg_gain = (avg_gain * (period as f64 - 1.0) + gain) / period as f64;
+        avg_loss = (avg_loss * (period as f64 - 1.0) + loss) / period as f64;
+    }
 
     if avg_loss == 0.0 {
+        if avg_gain == 0.0 {
+            return Some(50.0);
+        }
         return Some(100.0);
     }
 
@@ -67,7 +72,7 @@ mod tests {
     fn test_rsi_flat() {
         let data = vec![100.0; 20];
         let rsi = calculate_rsi(&data, 14);
-        assert_eq!(rsi, Some(100.0));
+        assert_eq!(rsi, Some(50.0));
     }
 
     #[test]

core/src/models.rs

@@ -306,6 +306,10 @@ pub struct OrderBook {
 
     /// 卖单列表 [(价格, 数量), ...] - 按价格升序
     pub asks: Vec<(f64, f64)>,
+
+    /// 成交量（可选，来自 Binance K 线数据的累计成交量）
+    #[serde(default)]
+    pub volume: Option<f64>,
 }
 
 // ============================================================================
@@ -418,6 +422,7 @@ mod tests {
             price: 42000.5,
             bids: vec![(41999.0, 1.5), (41998.0, 2.0)],
             asks: vec![(42001.0, 1.2)],
+            volume: None,
         };
 
         assert_eq!(ob.price, 42000.5);

src/App.tsx

@@ -1,5 +1,5 @@
-import { useState, useCallback, useRef } from 'react';
-import { useWasmEngine } from './hooks/useWasmEngine';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useWasmEngine, type DataSource } from './hooks/useWasmEngine';
 import type {
   Timeframe,
   Indicator,
@@ -25,11 +25,44 @@ const MAIN_INDICATORS = ['MA', 'EMA', 'BOLL'] as const;
 /** 副图指标: VOL, MACD, RSI */
 const SUB_INDICATORS = ['VOL', 'MACD', 'RSI'] as const;
 
+/** localStorage key for data source preference */
+const DATA_SOURCE_KEY = 'rustquantlab_data_source';
+
+/**
+ * 获取初始数据源
+ * 优先级: URL 参数 > localStorage > 默认 mock
+ */
+function getInitialDataSource(): DataSource {
+  // 检查 URL 参数
+  const params = new URLSearchParams(window.location.search);
+  const urlSource = params.get('source');
+  if (urlSource === 'binance' || urlSource === 'mock') {
+    return urlSource;
+  }
+  
+  // 检查 localStorage
+  const savedSource = localStorage.getItem(DATA_SOURCE_KEY);
+  if (savedSource === 'binance' || savedSource === 'mock') {
+    return savedSource;
+  }
+  
+  // 默认使用模拟数据
+  return 'mock';
+}
+
 /* ============================================
    Main App Component (Composition Root)
    ============================================ */
 
 function App() {
+  // ========== 数据源状态 ==========
+  const [dataSource, setDataSource] = useState<DataSource>(getInitialDataSource);
+  
+  // 持久化数据源偏好
+  useEffect(() => {
+    localStorage.setItem(DATA_SOURCE_KEY, dataSource);
+  }, [dataSource]);
+
   // ========== 统一的 Wasm 引擎 Hook ==========
   // 整合市场数据 + 交易状态，React 只做 UI 搬运工
   const {
@@ -51,6 +84,8 @@ function App() {
     priceColorClass,
     toggleFeed,
     setTimeframe,
+    dataSource: engineDataSource,
+    connectionStatus,
 
     // 交易状态 (Rust 管理)
     tradingState,
@@ -65,7 +100,11 @@ function App() {
     setLeverage,
     cancelOrder,
     addMargin,
-  } = useWasmEngine(100);
+  } = useWasmEngine({
+    tickInterval: 100,
+    dataSource,
+    historyCount: 5000, // 获取更多历史数据（5000 根 1m K 线 ≈ 3.5 天，足够计算所有指标）
+  });
 
   // ========== 图表引用 ==========
   const chartRef = useRef<KLineChartHandle>(null);
@@ -179,11 +218,14 @@ function App() {
     <div className="h-screen w-screen bg-[#161a1e] flex flex-col overflow-hidden">
       <Header
         isRunning={isRunning}
-        onToggle={toggleFeed}
+        onToggle={dataSource === 'mock' ? toggleFeed : undefined} // LIVE 模式下禁用切换
         price={latestData?.price}
         symbol={latestData?.symbol}
         priceTrend={priceTrend}
         priceColorClass={priceColorClass}
+        dataSource={dataSource}
+        onDataSourceChange={setDataSource}
+        connectionStatus={connectionStatus}
       />
 
       {/* ========== 主内容区域 ========== */}
@@ -202,13 +244,24 @@ function App() {
         "
       >
         {/* 响应式网格容器 */}
+        {/* 
+          - 移动端: 单列垂直布局
+          - 平板端 (md): 2列 (图表 + 订单簿)
+          - 桌面端 (xl): 
+            * 有交易表单 (MOCK): 3列 (图表 + 订单簿自适应 + 交易表单固定300px)
+            * 无交易表单 (LIVE): 2列 (图表 + 订单簿自适应占满)
+        */}
         <div
-          className="
+          className={`
             flex flex-col
-            md:grid md:grid-cols-[1fr_280px] md:h-full
-            xl:grid-cols-[1fr_260px_300px]
+            md:grid md:h-full
             gap-px bg-[#2b2f36]
-          "
+            ${
+              dataSource === 'mock'
+                ? 'md:grid-cols-[1fr_240px] xl:grid-cols-[1fr_240px_300px]'
+                : 'md:grid-cols-[1fr_240px] xl:grid-cols-[1fr_auto]'
+            }
+          `}
         >
           {/* ========== 图表区域 (Chart + Toolbar + Stats) ========== */}
           <section className="flex flex-col min-h-0 bg-terminal-bg">
@@ -267,7 +320,13 @@ function App() {
 
           {/* ========== 订单簿区域 ========== */}
           {/* 移动端高度压缩: 工具栏(28) + 表头(18) + 卖单(70) + Ticker(28) + 买单(70) = 214px */}
-          <section className="h-[214px] md:h-full min-h-0 bg-terminal-bg border-t md:border-t-0 md:border-l border-[#2b2f36]">
+          {/* MOCK 模式: 固定宽度 240px | LIVE 模式: 自动宽度占满剩余空间 */}
+          <section
+            className={`
+              h-[214px] md:h-full min-h-0 bg-terminal-bg border-t md:border-t-0 md:border-l border-[#2b2f36]
+              ${dataSource === 'binance' ? 'xl:min-w-[200px]' : ''}
+            `}
+          >
             <OrderBook
               bids={latestData?.bids ?? []}
               asks={latestData?.asks ?? []}
@@ -278,46 +337,50 @@ function App() {
             />
           </section>
 
-          {/* ========== 交易表单区域 (仅平板/桌面端显示) ========== */}
-          {/* 🔴 使用 Wasm 交易状态 */}
-          <section className="hidden xl:block h-full min-h-0 border-l border-[#2b2f36]">
-            <TradeForm
-              symbol="BTC"
-              currentPrice={latestData?.price ?? 40000}
-              // Wasm Trading State
-              balance={tradingState?.balance ?? 10000}
-              availableBalance={tradingState?.availableBalance ?? 10000}
-              currentLeverage={tradingState?.leverage ?? 10}
-              position={position}
-              positions={tradingState?.positions ?? []}
-              closedPositions={tradingState?.closedPositions ?? []}
-              riskAssessment={riskAssessment}
-              hasPosition={hasPosition}
-              pendingOrders={pendingOrders}
-              // Wasm Actions
-              onPlaceOrder={placeOrder}
-              onClosePosition={(positionId) => closePosition(positionId)}
-              onSetLeverage={setLeverage}
-              onCancelOrder={cancelOrder}
-              onAddMargin={addMargin}
-            />
-          </section>
+          {/* ========== 交易表单区域 (仅 MOCK 模式下显示) ========== */}
+          {/* LIVE 模式下隐藏交易表单，只展示数据 */}
+          {dataSource === 'mock' && (
+            <section className="hidden xl:block h-full min-h-0 border-l border-[#2b2f36]">
+              <TradeForm
+                symbol="BTC"
+                currentPrice={latestData?.price ?? 40000}
+                // Wasm Trading State
+                balance={tradingState?.balance ?? 10000}
+                availableBalance={tradingState?.availableBalance ?? 10000}
+                currentLeverage={tradingState?.leverage ?? 10}
+                position={position}
+                positions={tradingState?.positions ?? []}
+                closedPositions={tradingState?.closedPositions ?? []}
+                riskAssessment={riskAssessment}
+                hasPosition={hasPosition}
+                pendingOrders={pendingOrders}
+                // Wasm Actions
+                onPlaceOrder={placeOrder}
+                onClosePosition={(positionId) => closePosition(positionId)}
+                onSetLeverage={setLeverage}
+                onCancelOrder={cancelOrder}
+                onAddMargin={addMargin}
+              />
+            </section>
+          )}
         </div>
       </main>
 
-      {/* ========== 移动端 Sticky 底部交易栏 ========== */}
-      {/* 🔴 使用 Wasm placeOrder */}
-      <MobileTradebar
-        currentPrice={latestData?.price ?? 40000}
-        onBuy={() => {
-          // 移动端快速买入：市价单，固定数量
-          placeOrder('LONG', 0.01, tradingState?.leverage ?? 10);
-        }}
-        onSell={() => {
-          // 移动端快速卖出：市价单，固定数量
-          placeOrder('SHORT', 0.01, tradingState?.leverage ?? 10);
-        }}
-      />
+      {/* ========== 移动端 Sticky 底部交易栏 (仅 MOCK 模式下显示) ========== */}
+      {/* LIVE 模式下隐藏交易栏，只展示数据 */}
+      {dataSource === 'mock' && (
+        <MobileTradebar
+          currentPrice={latestData?.price ?? 40000}
+          onBuy={() => {
+            // 移动端快速买入：市价单，固定数量
+            placeOrder('LONG', 0.01, tradingState?.leverage ?? 10);
+          }}
+          onSell={() => {
+            // 移动端快速卖出：市价单，固定数量
+            placeOrder('SHORT', 0.01, tradingState?.leverage ?? 10);
+          }}
+        />
+      )}
     </div>
   );
 }