Update paper UI for strategy filters and FR/liquidation details

frontend/app/paper/page.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { authFetch, useAuth } from "@/lib/auth";
-import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from "recharts";
+import { XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from "recharts";
 
 // ─── 工具函数 ────────────────────────────────────────────────────
 
@@ -15,6 +15,24 @@ function fmtPrice(p: number) {
   return p < 100 ? p.toFixed(4) : p.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
 }
 
+function parseFactors(raw: any) {
+  if (!raw) return null;
+  if (typeof raw === "string") {
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return null;
+    }
+  }
+  return raw;
+}
+
+function strategyName(strategy: string | null | undefined) {
+  if (strategy === "v52_8signals") return "V5.2";
+  if (strategy === "v51_baseline") return "V5.1";
+  return strategy || "V5.1";
+}
+
 // ─── 控制面板（开关+配置）──────────────────────────────────────
 
 function ControlPanel() {
@@ -210,6 +228,9 @@ function ActivePositions() {
           const sym = p.symbol?.replace("USDT", "") || "";
           const holdMin = Math.round((Date.now() - p.entry_ts) / 60000);
           const currentPrice = wsPrices[p.symbol] || p.current_price || 0;
+          const factors = parseFactors(p.score_factors);
+          const frScore = factors?.funding_rate?.score ?? 0;
+          const liqScore = factors?.liquidation?.score ?? 0;
           const entry = p.entry_price || 0;
           const atr = p.atr_at_entry || 1;
           const riskDist = 2.0 * 0.7 * atr;
@@ -225,7 +246,9 @@ function ActivePositions() {
                   <span className={`text-xs font-bold ${p.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
                     {p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction}
                   </span>
-                  <span className="text-[10px] text-slate-400">评分{p.score} · {p.tier === "heavy" ? "加仓" : p.tier === "standard" ? "标准" : "轻仓"}</span>
+                  <span className="text-[10px] text-slate-400">
+                    {strategyName(p.strategy)} · 评分{p.score} · {p.tier === "heavy" ? "加仓" : p.tier === "standard" ? "标准" : "轻仓"}
+                  </span>
                 </div>
                 <div className="flex items-center gap-2">
                   <span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>
@@ -243,6 +266,8 @@ function ActivePositions() {
                 <span className="text-emerald-600">TP1: ${fmtPrice(p.tp1_price)}{p.tp1_hit ? " ✅" : ""}</span>
                 <span className="text-emerald-600">TP2: ${fmtPrice(p.tp2_price)}</span>
                 <span className="text-red-500">SL: ${fmtPrice(p.sl_price)}</span>
+                <span className="text-amber-600">FR: {frScore >= 0 ? "+" : ""}{frScore}</span>
+                <span className="text-cyan-600">Liq: {liqScore >= 0 ? "+" : ""}{liqScore}</span>
               </div>
             </div>
           );
@@ -287,21 +312,23 @@ function EquityCurve() {
 
 type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL";
 type FilterResult = "all" | "win" | "loss";
+type FilterStrategy = "all" | "v51_baseline" | "v52_8signals";
 
 function TradeHistory() {
   const [trades, setTrades] = useState<any[]>([]);
   const [symbol, setSymbol] = useState<FilterSymbol>("all");
   const [result, setResult] = useState<FilterResult>("all");
+  const [strategy, setStrategy] = useState<FilterStrategy>("all");
 
   useEffect(() => {
     const f = async () => {
       try {
-        const r = await authFetch(`/api/paper/trades?symbol=${symbol}&result=${result}&limit=50`);
+        const r = await authFetch(`/api/paper/trades?symbol=${symbol}&result=${result}&strategy=${strategy}&limit=50`);
         if (r.ok) { const j = await r.json(); setTrades(j.data || []); }
       } catch {}
     };
     f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
-  }, [symbol, result]);
+  }, [symbol, result, strategy]);
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
@@ -321,6 +348,13 @@ function TradeHistory() {
               {r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"}
             </button>
           ))}
+          <span className="text-slate-300">|</span>
+          {(["all", "v51_baseline", "v52_8signals"] as FilterStrategy[]).map(s => (
+            <button key={s} onClick={() => setStrategy(s)}
+              className={`px-2 py-0.5 rounded text-[10px] ${strategy === s ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>
+              {s === "all" ? "全部策略" : strategyName(s)}
+            </button>
+          ))}
         </div>
       </div>
       <div className="max-h-64 overflow-y-auto">
@@ -331,6 +365,7 @@ function TradeHistory() {
             <thead className="bg-slate-50 sticky top-0">
               <tr className="text-slate-500">
                 <th className="px-2 py-1.5 text-left font-medium">币种</th>
+                <th className="px-2 py-1.5 text-left font-medium">策略</th>
                 <th className="px-2 py-1.5 text-left font-medium">方向</th>
                 <th className="px-2 py-1.5 text-right font-medium">入场</th>
                 <th className="px-2 py-1.5 text-right font-medium">出场</th>
@@ -343,9 +378,19 @@ function TradeHistory() {
             <tbody className="divide-y divide-slate-50">
               {trades.map((t: any) => {
                 const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0;
+                const factors = parseFactors(t.score_factors);
+                const frScore = factors?.funding_rate?.score ?? 0;
+                const liqScore = factors?.liquidation?.score ?? 0;
                 return (
                   <tr key={t.id} className="hover:bg-slate-50">
                     <td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT", "")}</td>
+                    <td className="px-2 py-1.5 text-[10px]">
+                      <span className={`px-1.5 py-0.5 rounded ${
+                        t.strategy === "v52_8signals" ? "bg-emerald-100 text-emerald-700" : "bg-slate-100 text-slate-600"
+                      }`}>
+                        {strategyName(t.strategy)}
+                      </span>
+                    </td>
                     <td className={`px-2 py-1.5 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
                       {t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}
                     </td>
@@ -365,7 +410,10 @@ function TradeHistory() {
                         {t.status === "tp" ? "止盈" : t.status === "sl" ? "止损" : t.status === "sl_be" ? "保本" : t.status === "timeout" ? "超时" : t.status === "signal_flip" ? "翻转" : t.status}
                       </span>
                     </td>
-                    <td className="px-2 py-1.5 text-right font-mono">{t.score}</td>
+                    <td className="px-2 py-1.5 text-right font-mono">
+                      <div>{t.score}</div>
+                      <div className="text-[9px] text-slate-400">FR {frScore >= 0 ? "+" : ""}{frScore} · Liq {liqScore >= 0 ? "+" : ""}{liqScore}</div>
+                    </td>
                     <td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
                   </tr>
                 );
@@ -383,8 +431,22 @@ function TradeHistory() {
 function StatsPanel() {
   const [data, setData] = useState<any>(null);
   const [tab, setTab] = useState("ALL");
+  const [strategyStats, setStrategyStats] = useState<any[]>([]);
+  const [strategyTab, setStrategyTab] = useState<"all" | "v51_baseline" | "v52_8signals">("all");
   useEffect(() => {
-    const f = async () => { try { const r = await authFetch("/api/paper/stats"); if (r.ok) setData(await r.json()); } catch {} };
+    const f = async () => {
+      try {
+        const [statsRes, byStrategyRes] = await Promise.all([
+          authFetch("/api/paper/stats"),
+          authFetch("/api/paper/stats-by-strategy"),
+        ]);
+        if (statsRes.ok) setData(await statsRes.json());
+        if (byStrategyRes.ok) {
+          const j = await byStrategyRes.json();
+          setStrategyStats(j.data || []);
+        }
+      } catch {}
+    };
     f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
   }, []);
 
@@ -392,6 +454,20 @@ function StatsPanel() {
 
   const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
   const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
+  const strategyView = strategyTab === "all"
+    ? (() => {
+        if (!strategyStats.length) return null;
+        const total = strategyStats.reduce((sum, s) => sum + (s.total || 0), 0);
+        const weightedWins = strategyStats.reduce((sum, s) => sum + (s.total || 0) * ((s.win_rate || 0) / 100), 0);
+        return {
+          strategy: "all",
+          total,
+          win_rate: total > 0 ? (weightedWins / total) * 100 : 0,
+          total_pnl: strategyStats.reduce((sum, s) => sum + (s.total_pnl || 0), 0),
+          active_positions: strategyStats.reduce((sum, s) => sum + (s.active_positions || 0), 0),
+        };
+      })()
+    : (strategyStats.find((s) => s.strategy === strategyTab) || null);
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
@@ -406,7 +482,8 @@ function StatsPanel() {
         </div>
       </div>
       {st ? (
-        <div className="p-3 grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
+        <div className="p-3 space-y-3">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
             <div><span className="text-slate-400">胜率</span><p className="font-mono font-bold">{st.win_rate}%</p></div>
             <div><span className="text-slate-400">盈亏比</span><p className="font-mono font-bold">{st.win_loss_ratio}</p></div>
             <div><span className="text-slate-400">平均盈利</span><p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p></div>
@@ -421,6 +498,34 @@ function StatsPanel() {
               <div key={t}><span className="text-slate-400">{t === "heavy" ? "加仓档" : t === "standard" ? "标准档" : "轻仓档"}</span><p className="font-mono">{v.win_rate}% ({v.total}笔)</p></div>
             ))}
           </div>
+          <div className="border-t border-slate-100 pt-2 space-y-2">
+            <div className="flex items-center justify-between">
+              <p className="text-[11px] font-semibold text-slate-700">策略对比</p>
+              <div className="flex gap-1">
+                {(["all", "v51_baseline", "v52_8signals"] as const).map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => setStrategyTab(s)}
+                    className={`px-2 py-0.5 rounded text-[10px] ${strategyTab === s ? "bg-slate-800 text-white" : "bg-slate-100 text-slate-500 hover:bg-slate-200"}`}
+                  >
+                    {s === "all" ? "全部" : strategyName(s)}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {strategyView ? (
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
+                <div><span className="text-slate-400">策略</span><p className="font-mono font-bold">{strategyView.strategy === "all" ? "ALL" : strategyName(strategyView.strategy)}</p></div>
+                <div><span className="text-slate-400">胜率</span><p className="font-mono font-bold">{(strategyView.win_rate || 0).toFixed(1)}%</p></div>
+                <div><span className="text-slate-400">总笔数</span><p className="font-mono font-bold">{strategyView.total || 0}</p></div>
+                <div><span className="text-slate-400">活跃仓位</span><p className="font-mono font-bold">{strategyView.active_positions || 0}</p></div>
+                <div><span className="text-slate-400">总盈亏</span><p className={`font-mono font-bold ${(strategyView.total_pnl || 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>{(strategyView.total_pnl || 0) >= 0 ? "+" : ""}{(strategyView.total_pnl || 0).toFixed(2)}R</p></div>
+              </div>
+            ) : (
+              <div className="text-xs text-slate-400">暂无策略统计</div>
+            )}
+          </div>
+        </div>
       ) : (
         <div className="p-3 text-xs text-slate-400">该币种暂无数据</div>
       )}
@@ -447,7 +552,7 @@ export default function PaperTradingPage() {
     <div className="space-y-3">
       <div>
         <h1 className="text-lg font-bold text-slate-900">📊 模拟盘</h1>
-        <p className="text-[10px] text-slate-500">V5.1信号引擎自动交易 · 实时追踪 · 数据驱动优化</p>
+        <p className="text-[10px] text-slate-500">V5.2策略AB测试 · 实时追踪 · 数据驱动优化</p>
       </div>
 
       <ControlPanel />