refactor: 新增 24h 市场统计模块，优化 Header 与 StatsPanel 信息展示

- **新增 useMarketStats Hook**:
  - 计算 24h 价格变化、涨跌幅、成交量、高低价等市场统计指标
  - 模拟资金费率（Funding Rate）与倒计时
  - 提供 Mark Price 与 Index Price 计算逻辑

- **Header 组件重构**:
  - 新增 Binance 风格的 Ticker 信息栏，显示 24h 涨跌幅、高低价、成交量、资金费率等
  - 新增 DevTools 模式切换

Author: mingxingmeng-ctrl

src/App.tsx

@@ -17,6 +17,7 @@ import DepthChart from './components/Dashboard/Chart/DepthChart';
 import { TradeForm, MobileTradebar } from './components/Dashboard/Trade';
 import { useUiStore } from './hooks/ui/useUiStore';
 import type { UiState } from './hooks/ui/useUiStore';
+import { useMarketStats } from './hooks/useMarketStats';
 
 /* ============================================
    Constants
@@ -175,6 +176,13 @@ function App() {
     return () => clearTimeout(t);
   }, [isSwitching]);
 
+  // ========== 24h 市场统计 ==========
+  const marketStats = useMarketStats({
+    candleHistory,
+    latestData,
+    currentPrice: latestData?.price,
+  });
+
   // ========== 图表引用 ==========
   const chartRef = useRef<KLineChartHandle>(null);
 
@@ -298,6 +306,7 @@ function App() {
         onDataSourceChange={handleDataSourceChange}
         connectionStatus={connectionStatus}
         isSwitching={isSwitching}
+        marketStats={marketStats}
       />
 
       {/* ========== 主内容区域 ========== */}
@@ -421,9 +430,8 @@ function App() {
 
             {/* Stats Panel - 单行 3 列 */}
             <StatsPanel
-              latestData={latestData}
               analysisResult={analysisResult}
-              priceColorClass={priceColorClass}
+              marketStats={marketStats}
             />
           </section>
 

src/components/Dashboard/OrderBook.tsx

@@ -101,7 +101,7 @@ interface OrderRowProps {
 
 /**
  * 订单行子组件
- * Binance 风格：3 列网格 + 深度背景条
+ * Binance 风格：2 列网格 (Price | Amount) + 深度背景条
  */
 function OrderRow({
   price,
@@ -135,10 +135,11 @@ function OrderRow({
         {price.toFixed(pricePrecision)}
       </span>
 
-      {/* 数量列 - 右对齐 */}
+      {/* 数量列 - 右对齐，智能精度 */}
       <span className="relative z-10 font-mono text-[10px] md:text-[11px] tabular-nums text-right text-gray-400">
-        {amount.toFixed(5)}
+        {amount >= 1000 ? amount.toFixed(2) : amount >= 1 ? amount.toFixed(4) : amount.toFixed(5)}
       </span>
+
     </div>
   );
 }

src/components/Dashboard/StatsPanel.tsx

@@ -14,6 +14,8 @@ interface StatCellProps {
   colorClass?: string;
   /** 副标签 */
   suffix?: string;
+  /** 副标签颜色 */
+  suffixColorClass?: string;
 }
 
 /**
@@ -26,20 +28,21 @@ function StatCell({
   value,
   colorClass = 'text-white',
   suffix,
+  suffixColorClass = 'text-gray-600',
 }: StatCellProps) {
   return (
-    <div className="flex flex-col justify-center px-2 md:px-4 py-1 h-full">
+    <div className="flex flex-col justify-center px-1.5 md:px-3 py-1 h-full min-w-20 md:min-w-0 shrink-0 md:shrink">
       <span className="text-[8px] md:text-[9px] text-gray-500 uppercase tracking-wider leading-none mb-0.5 md:mb-1">
         {label}
       </span>
       <div className="flex items-baseline gap-0.5 md:gap-1">
         <span
-          className={`text-[clamp(12px,3vw,16px)] md:text-base font-bold font-mono tabular-nums leading-none ${colorClass}`}
+          className={`text-[10px] md:text-xs font-bold font-mono tabular-nums leading-none ${colorClass}`}
         >
           {value}
         </span>
         {suffix && (
-          <span className="text-[8px] md:text-[9px] text-gray-600 font-mono">
+          <span className={`text-[8px] md:text-[9px] font-mono ${suffixColorClass}`}>
             {suffix}
           </span>
         )}
@@ -49,48 +52,75 @@ function StatCell({
 }
 
 /* ============================================
-   StatsPanel Component (高密度水平信息条)
+   格式化工具
+   ============================================ */
+
+function formatFundingCountdown(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}
+
+/* ============================================
+   StatsPanel Component (合约交易信息条)
    ============================================ */
 
 /**
- * Rust 分析信息条组件
- * 专业终端风格：单行 3 列布局，高密度数据展示
+ * 合约交易信息条
+ * Binance Futures 风格：单行 5 列布局
+ * Mark Price / Index Price / Funding Rate / 24h Change / Spread
  */
 function StatsPanel({
-  latestData,
   analysisResult,
-  priceColorClass,
+  marketStats,
 }: StatsPanelProps) {
-  /** 格式化 SMA5 显示值 */
-  const formatSma5 = (): string => {
-    const sma5 = analysisResult?.sma5;
-    return sma5 != null ? `$${sma5.toFixed(2)}` : '--';
-  };
+  const changePercent = marketStats?.priceChangePercent ?? 0;
+  const changeColor = changePercent >= 0 ? 'text-success' : 'text-danger';
+  const changeSign = changePercent >= 0 ? '+' : '';
+
   return (
     <div
       className="
         shrink-0 h-10 md:h-12 bg-bg-black border-t border-border-dark
-        grid grid-cols-3 divide-x divide-border-dark
+        flex md:grid md:grid-cols-5 divide-x divide-border-dark
+        overflow-x-auto scrollbar-hide
       "
     >
-      {/* Last Price */}
+      {/* Mark Price */}
       <StatCell
-        label="Last Price"
-        value={`$${latestData?.price.toFixed(2) ?? '--'}`}
-        colorClass={priceColorClass}
+        label="Mark Price"
+        value={`$${(marketStats?.markPrice ?? 0).toFixed(2)}`}
+        colorClass="text-warning-alt"
       />
 
-      {/* Spread */}
+      {/* Index Price */}
       <StatCell
-        label="Spread"
-        value={`$${analysisResult?.spread?.toFixed(4) ?? '--'}`}
-        colorClass="text-warning-alt"
+        label="Index Price"
+        value={`$${(marketStats?.indexPrice ?? 0).toFixed(2)}`}
+      />
+
+      {/* Funding Rate / Countdown */}
+      <StatCell
+        label="Funding / Countdown"
+        value={`${((marketStats?.fundingRate ?? 0) * 100).toFixed(4)}%`}
+        suffix={formatFundingCountdown(marketStats?.fundingCountdown ?? 0)}
+        colorClass={(marketStats?.fundingRate ?? 0) >= 0 ? 'text-success' : 'text-danger'}
+        suffixColorClass="text-warning-alt"
+      />
+
+      {/* 24h Change */}
+      <StatCell
+        label="24h Change"
+        value={`${changeSign}${changePercent.toFixed(2)}%`}
+        suffix={`${changeSign}${(marketStats?.priceChange ?? 0).toFixed(2)}`}
+        colorClass={changeColor}
       />
 
-      {/* SMA5 */}
+      {/* Spread */}
       <StatCell
-        label="SMA (5)"
-        value={formatSma5()}
+        label="Spread"
+        value={`$${analysisResult?.spread?.toFixed(4) ?? '--'}`}
         colorClass="text-cyan"
       />
     </div>