feat: increase WASM engine history count and localize chart crosshair time display

Author: mingxingmeng-ctrl

src/App.tsx

@@ -62,7 +62,7 @@ function App() {
   } = useWasmEngine({
     tickInterval: 100,
     dataSource,
-    historyCount: 1440,
+    historyCount: 5000,
   });
 
   // 切换完成条件

src/components/Dashboard/Chart/LightweightChart/hooks/useUnifiedChartSetup.ts

@@ -195,6 +195,18 @@ export function useUnifiedChartSetup({
         vertLines: { color: CHART_COLORS.GRID },
         horzLines: { color: CHART_COLORS.GRID },
       },
+      localization: {
+        // 覆盖十字线浮窗的时间显示，从 UTC 转为当地时间
+        timeFormatter: (time: Time) => {
+          const d = new Date((time as number) * 1000);
+          const yyyy = d.getFullYear();
+          const mm = String(d.getMonth() + 1).padStart(2, '0');
+          const dd = String(d.getDate()).padStart(2, '0');
+          const HH = String(d.getHours()).padStart(2, '0');
+          const MM = String(d.getMinutes()).padStart(2, '0');
+          return `${yyyy}-${mm}-${dd} ${HH}:${MM}`;
+        },
+      },
       rightPriceScale: {
         borderColor: CHART_COLORS.BORDER,
         scaleMargins: { top: 0.1, bottom: 0.1 },

src/components/TradePanelConnected.tsx

@@ -37,7 +37,7 @@ function TradePanelConnected({
     } = useWasmEngine({
         tickInterval: 100,
         dataSource,
-        historyCount: 1440,
+        historyCount: 5000,
     });
 
     return (

src/hooks/tradingEngine/wasmSingleton.ts

@@ -56,17 +56,7 @@ export async function initWasmEngine(): Promise<MarketEngineInstance> {
         const wasmExports = await wasm.default();
         wasmSingleton.wasmInstance = wasmExports;
 
-        // 调试：检查 memory 是否存在
-        const hasMemory = wasmExports && 'memory' in wasmExports;
-        console.log(`[Wasm] wasmExports.memory 存在: ${hasMemory}`);
-        if (hasMemory) {
-          const mem = (wasmExports as { memory: WebAssembly.Memory }).memory;
-          console.log(
-            `[Wasm] 初始内存: ${(mem.buffer.byteLength / 1024 / 1024).toFixed(
-              2,
-            )} MB`,
-          );
-        }
+
       }
 
       const wasmMod = wasm as unknown as WasmModule;

src/hooks/useBinanceMarket.ts

@@ -468,28 +468,9 @@ export function useBinanceMarket(
             prevKlineVolumeRef.current = volume;
             currentKlineVolumeRef.current = volume;
 
-            // 详细日志：记录每次 K 线更新（减少日志频率，只在重要时刻记录）
-            if (k.x || isNewKline || Math.abs(volumeDelta) > 0.0001) {
-              console.log(`[Binance] 📊 K线更新:`, {
-                time: new Date(k.t).toLocaleTimeString(),
-                price: price.toFixed(2),
-                volume: volume.toFixed(4),
-                volumeDelta: volumeDelta.toFixed(4),
-                isFinished: k.x,
-                isNewKline,
-                interval: k.i,
-              });
-            }
 
-            // 如果 K 线已完结，记录日志
-            if (k.x) {
-              console.log(
-                `[Binance] ✅ K 线完结: 总成交量=${volume.toFixed(4)}, 周期=${
-                  k.i
-                }`,
-              );
-              // K 线完结后，下一根 K 线开始时 prevKlineVolumeRef 会重置为 0
-            }
+
+            // K 线完结后，下一根 K 线开始时 prevKlineVolumeRef 会重置为 0
 
             // 立即更新 OrderBook（包含成交量）
             // 注意：WASM 引擎的 Candle::update 会累加成交量
@@ -518,18 +499,6 @@ export function useBinanceMarket(
 
               orderBook.volume = volumeToPass;
 
-              // 🔍 成交量追踪日志：K线更新
-              console.log(`[VOL追踪] 📊 K线更新 → setLatestData:`, {
-                volume: volumeToPass,
-                volumeType: k.x
-                  ? '增量(完结)'
-                  : isNewKline
-                  ? '增量(新K线)'
-                  : '增量',
-                klineFinished: k.x,
-                isNewKline,
-                orderBookHasVolume: orderBook.volume !== undefined,
-              });
 
               setLatestData(orderBook);
             }
@@ -578,12 +547,6 @@ export function useBinanceMarket(
                   // 注意：真实的成交量数据只在 K 线更新时传递
                   orderBook.volume = 0;
 
-                  // 🔍 成交量追踪日志：深度更新
-                  console.log(`[VOL追踪] 📦 深度更新 → setLatestData:`, {
-                    volume: 0,
-                    currentKlineVolume: currentKlineVolumeRef.current,
-                    note: '传递 0 避免累加，真实成交量在 K 线更新时传递',
-                  });
 
                   setLatestData(orderBook);
                 }
@@ -614,14 +577,7 @@ export function useBinanceMarket(
             // 注意：真实的成交量数据只在 K 线更新时传递
             orderBook.volume = 0;
 
-            // 🔍 成交量追踪日志：定时更新（减少频率，每10次记录一次）
-            if (Math.random() < 0.1) {
-              console.log(`[VOL追踪] ⏰ 定时更新 → setLatestData:`, {
-                volume: 0,
-                currentKlineVolume: currentKlineVolumeRef.current,
-                note: '传递 0 避免累加，真实成交量在 K 线更新时传递',
-              });
-            }
+
 
             setLatestData(orderBook);
           }

src/hooks/useMarketData.ts

@@ -110,25 +110,11 @@ export function useMarketData(
   // ========== 数据源切换时，强制停止旧数据流 ==========
   useEffect(() => {
     if (prevSourceRef.current !== source) {
-      console.log(
-        `[useMarketData] 🔄 数据源切换: ${prevSourceRef.current} -> ${source}`,
-      );
-
       // 强制停止旧数据源
       if (prevSourceRef.current === 'mock') {
-        console.log('[useMarketData] ⏹️ 停止 MOCK 数据源');
-        // 多次调用 stop 确保完全停止
-        mockData.stop();
-        // 延迟再次停止，确保 Worker 完全清理
-        setTimeout(() => {
-          if (mockData.isRunning) {
-            console.warn('[useMarketData] ⚠️ MOCK 仍在运行，再次停止');
-            mockData.stop();
-          }
-        }, 200);
+        mockData.terminate();
       }
       if (prevSourceRef.current === 'binance') {
-        console.log('[useMarketData] ⏹️ 停止 Binance 数据源');
         binanceData.stop();
       }
 
@@ -138,51 +124,13 @@ export function useMarketData(
 
   // ========== 持续监控：确保只有一个数据源在运行 ==========
   useEffect(() => {
-    // 如果当前是 binance 模式，确保 mock 完全停止
-    if (source === 'binance') {
-      if (mockData.isRunning) {
-        console.warn(
-          '[useMarketData] ⚠️ LIVE 模式下检测到 MOCK 数据仍在运行，强制停止',
-        );
-        console.warn(
-          '[useMarketData] 🔍 当前数据源:',
-          source,
-          'MOCK运行状态:',
-          mockData.isRunning,
-          'Binance运行状态:',
-          binanceData.isRunning,
-        );
-        mockData.stop();
-      }
-      // 额外检查：确保返回的是 Binance 数据
-      if (mockData.latestData && binanceData.latestData) {
-        console.warn(
-          '[useMarketData] ⚠️ 检测到两个数据源都有数据，当前应使用 Binance 数据',
-        );
-        console.warn(
-          '[useMarketData] 🔍 MOCK数据:',
-          mockData.latestData,
-          'Binance数据:',
-          binanceData.latestData,
-        );
-      }
+    if (source === 'binance' && mockData.isRunning) {
+      mockData.terminate();
     }
-    // 如果当前是 mock 模式，确保 binance 完全停止
-    if (source === 'mock') {
-      if (binanceData.isRunning) {
-        console.warn(
-          '[useMarketData] ⚠️ MOCK 模式下检测到 Binance 数据仍在运行，强制停止',
-        );
-        binanceData.stop();
-      }
+    if (source === 'mock' && binanceData.isRunning) {
+      binanceData.stop();
     }
-  }, [
-    source,
-    mockData.isRunning,
-    binanceData.isRunning,
-    mockData,
-    binanceData,
-  ]);
+  }, [source, mockData.isRunning, binanceData.isRunning, mockData, binanceData]);
 
   // ========== 根据数据源选择返回值 ==========
   const result = useMemo((): UseMarketDataReturn => {

src/hooks/useMockMarket.ts

@@ -48,16 +48,8 @@ export function useMockMarket(interval: number = 100) {
       if (type === 'DATA') {
         setLatestData(event.data.payload);
       } else if (type === 'HISTORY') {
-        const t0 = performance.now();
-        const candles = event.data.payload.candles;
-        console.log(`[Perf] 📦 Worker 历史数据到达: ${candles.length} 根`);
-        setHistoryCandles(candles);
+        setHistoryCandles(event.data.payload.candles);
         setHistoryLoading(false);
-        console.log(
-          `[Perf] ✅ React state 更新: ${(performance.now() - t0).toFixed(
-            0,
-          )}ms`,
-        );
       }
     };
 
@@ -98,6 +90,18 @@ export function useMockMarket(interval: number = 100) {
     }
   }, []);
 
+  /**
+   * 完全终止 Worker（切换数据源时调用）
+   */
+  const terminate = useCallback(() => {
+    if (workerRef.current) {
+      workerRef.current.terminate();
+      workerRef.current = null;
+      setIsRunning(false);
+      setLatestData(null);
+    }
+  }, []);
+
   /**
    * 请求历史 K 线数据
    * @param timeframeSeconds - 时间周期 (秒)，默认 1m = 60
@@ -108,7 +112,6 @@ export function useMockMarket(interval: number = 100) {
       timeframeSeconds: number = TIMEFRAME_1S_SECONDS,
       count: number = DEFAULT_HISTORY_COUNT,
     ) => {
-      console.log(`[Perf] 📤 请求历史数据: ${count} 根 K 线...`);
       const worker = initWorker();
       setHistoryLoading(true);
       const message: WorkerHistoryRequestMessage = {
@@ -137,6 +140,8 @@ export function useMockMarket(interval: number = 100) {
     isRunning,
     start,
     stop,
+    /** 完全终止 Worker（切换数据源时调用） */
+    terminate,
     /** 历史 K 线数据 */
     historyCandles,
     /** 历史数据加载中 */

src/hooks/useWasmEngine.ts

@@ -222,9 +222,7 @@ export function useWasmEngine(
   // ========== 数据源切换时重置状态 ==========
   useEffect(() => {
     if (prevDataSourceRef.current !== dataSource) {
-      console.log(
-        `[useWasmEngine] 数据源切换: ${prevDataSourceRef.current} -> ${dataSource}`,
-      );
+
 
       // 清空 Rust 引擎内部历史，避免不同数据源之间的价格/成交量互相污染
       if (engineAlive.current && engineRef.current) {
@@ -255,15 +253,10 @@ export function useWasmEngine(
   // ========== Wasm 初始化 ==========
   useEffect(() => {
     let aborted = false;
-    const t0 = performance.now();
 
     const init = async () => {
       try {
-        console.log('[Perf] ⏱️ 开始 WASM 初始化...');
         const engine = await initWasmEngine();
-        console.log(
-          `[Perf] ✅ WASM 初始化完成: ${(performance.now() - t0).toFixed(0)}ms`,
-        );
 
         if (aborted) return;
 
@@ -294,7 +287,7 @@ export function useWasmEngine(
       aborted = true;
       engineAlive.current = false;
       engineRef.current = null;
-      console.log('[useWasmEngine] 组件卸载，引擎保持活跃');
+
     };
   }, []);
 
@@ -515,7 +508,7 @@ export function useWasmEngine(
     try {
       const success = engineRef.current.set_timeframe(timeframe);
       if (success) {
-        console.log(`[useWasmEngine] 时间周期已切换为 ${timeframe}`);
+
 
         // 立即获取新周期的 K 线数据
         try {

src/types/wasm.ts

@@ -427,6 +427,30 @@ export interface WasmMarketEngine {
    */
   get_candle_count(timeframe: WasmTimeframe): number;
 
+  // ========== 历史数据加载方法 ==========
+
+  /**
+   * 加载历史 K 线数据到指定时间周期
+   *
+   * @param timeframe - 时间周期字符串
+   * @param candles - 历史 K 线数据数组
+   * @returns 加载的 K 线数量
+   */
+  load_history_candles(
+    timeframe: WasmTimeframe,
+    candles: import('./index').HistoryCandle[],
+  ): number;
+
+  /**
+   * 加载 1s K 线并自动聚合到所有高周期 (1m/5m/15m/1H/4H/1D)
+   *
+   * @param candles - 1 秒粒度的历史 K 线数据
+   * @returns 各周期名称及对应 K 线数量的数组
+   */
+  load_history_1s_and_aggregate(
+    candles: import('./index').HistoryCandle[],
+  ): [string, number][];
+
   // ========== 模拟交易方法 ==========
 
   /**