lulu/arbitrage-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update paper UI for strategy filters and FR/liquidation details

Browse Source
This commit is contained in:
root 2026-03-01 11:55:03 +00:00
parent f6156a2cfe
commit 7ba53a5005
1 changed files with 126 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/app/paper/page.tsx
View File

@ -2,7 +2,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { authFetch, useAuth } from "@/lib/auth"; 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 }); 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() { function ControlPanel() {
@ -210,6 +228,9 @@ function ActivePositions() {
const sym = p.symbol?.replace("USDT", "") || ""; const sym = p.symbol?.replace("USDT", "") || "";
const holdMin = Math.round((Date.now() - p.entry_ts) / 60000); const holdMin = Math.round((Date.now() - p.entry_ts) / 60000);
const currentPrice = wsPrices[p.symbol] || p.current_price || 0; 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 entry = p.entry_price || 0;
const atr = p.atr_at_entry || 1; const atr = p.atr_at_entry || 1;
const riskDist = 2.0 * 0.7 * atr; 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"}`}> <span className={`text-xs font-bold ${p.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
{p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction} {p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction}
</span> </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>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}> <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">TP1: ${fmtPrice(p.tp1_price)}{p.tp1_hit ? " ✅" : ""}</span>
<span className="text-emerald-600">TP2: ${fmtPrice(p.tp2_price)}</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-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>
</div> </div>
); );
@ -287,21 +312,23 @@ function EquityCurve() {
type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL"; type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL";
type FilterResult = "all" | "win" | "loss"; type FilterResult = "all" | "win" | "loss";
type FilterStrategy = "all" | "v51_baseline" | "v52_8signals";
function TradeHistory() { function TradeHistory() {
const [trades, setTrades] = useState<any[]>([]); const [trades, setTrades] = useState<any[]>([]);
const [symbol, setSymbol] = useState<FilterSymbol>("all"); const [symbol, setSymbol] = useState<FilterSymbol>("all");
const [result, setResult] = useState<FilterResult>("all"); const [result, setResult] = useState<FilterResult>("all");
const [strategy, setStrategy] = useState<FilterStrategy>("all");
useEffect(() => { useEffect(() => {
const f = async () => { const f = async () => {
try { 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 || []); } if (r.ok) { const j = await r.json(); setTrades(j.data || []); }
} catch {} } catch {}
}; };
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv); f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
}, [symbol, result]); }, [symbol, result, strategy]);
return ( return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden"> <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
@ -321,6 +348,13 @@ function TradeHistory() {
{r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"} {r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"}
</button> </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> </div>
<div className="max-h-64 overflow-y-auto"> <div className="max-h-64 overflow-y-auto">
@ -331,6 +365,7 @@ function TradeHistory() {
<thead className="bg-slate-50 sticky top-0"> <thead className="bg-slate-50 sticky top-0">
<tr className="text-slate-500"> <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-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>
<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"> <tbody className="divide-y divide-slate-50">
{trades.map((t: any) => { {trades.map((t: any) => {
const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0; 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 ( return (
<tr key={t.id} className="hover:bg-slate-50"> <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 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"}`}> <td className={`px-2 py-1.5 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
{t.direction === "LONG" ? "🟢" : "🔴"} {t.direction} {t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}
</td> </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} {t.status === "tp" ? "止盈" : t.status === "sl" ? "止损" : t.status === "sl_be" ? "保本" : t.status === "timeout" ? "超时" : t.status === "signal_flip" ? "翻转" : t.status}
</span> </span>
</td> </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> <td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
</tr> </tr>
); );
@ -383,8 +431,22 @@ function TradeHistory() {
function StatsPanel() { function StatsPanel() {
const [data, setData] = useState<any>(null); const [data, setData] = useState<any>(null);
const [tab, setTab] = useState("ALL"); const [tab, setTab] = useState("ALL");
const [strategyStats, setStrategyStats] = useState<any[]>([]);
const [strategyTab, setStrategyTab] = useState<"all" | "v51_baseline" | "v52_8signals">("all");
useEffect(() => { 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); f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
}, []); }, []);
@ -392,6 +454,20 @@ function StatsPanel() {
const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"]; const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null); 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 ( return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden"> <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
@ -406,20 +482,49 @@ function StatsPanel() {
</div> </div>
</div> </div>
{st ? ( {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><span className="text-slate-400">胜率</span><p className="font-mono font-bold">{st.win_rate}%</p></div> <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_loss_ratio}</p></div> <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 text-emerald-600">+{st.avg_win}R</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-red-500">-{st.avg_loss}R</p></div> <div><span className="text-slate-400">平均盈利</span><p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p></div>
<div><span className="text-slate-400">最大回撤</span><p className="font-mono font-bold">{st.mdd}R</p></div> <div><span className="text-slate-400">平均亏损</span><p className="font-mono font-bold text-red-500">-{st.avg_loss}R</p></div>
<div><span className="text-slate-400">夏普比率</span><p className="font-mono font-bold">{st.sharpe}</p></div> <div><span className="text-slate-400">最大回撤</span><p className="font-mono font-bold">{st.mdd}R</p></div>
<div><span className="text-slate-400">总盈亏</span><p className={`font-mono font-bold ${(st.total_pnl ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>{(st.total_pnl ?? 0) >= 0 ? "+" : ""}{st.total_pnl ?? "-"}R</p></div> <div><span className="text-slate-400">夏普比率</span><p className="font-mono font-bold">{st.sharpe}</p></div>
<div><span className="text-slate-400">总笔数</span><p className="font-mono font-bold">{st.total ?? data.total}</p></div> <div><span className="text-slate-400">总盈亏</span><p className={`font-mono font-bold ${(st.total_pnl ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>{(st.total_pnl ?? 0) >= 0 ? "+" : ""}{st.total_pnl ?? "-"}R</p></div>
<div><span className="text-slate-400">做多胜率</span><p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p></div> <div><span className="text-slate-400">总笔数</span><p className="font-mono font-bold">{st.total ?? data.total}</p></div>
<div><span className="text-slate-400">做空胜率</span><p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p></div> <div><span className="text-slate-400">做多胜率</span><p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p></div>
{tab === "ALL" && data.by_tier && Object.entries(data.by_tier).map(([t, v]: [string, any]) => ( <div><span className="text-slate-400">做空胜率</span><p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p></div>
<div key={t}><span className="text-slate-400">{t === "heavy" ? "加仓档" : t === "standard" ? "标准档" : "轻仓档"}</span><p className="font-mono">{v.win_rate}% ({v.total}笔)</p></div> {tab === "ALL" && data.by_tier && Object.entries(data.by_tier).map(([t, v]: [string, any]) => (
))} <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>
) : ( ) : (
<div className="p-3 text-xs text-slate-400">该币种暂无数据</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 className="space-y-3">
<div> <div>
<h1 className="text-lg font-bold text-slate-900">📊 模拟盘</h1> <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> </div>
<ControlPanel /> <ControlPanel />