5b704a0a0e
- V5.1 paper reads /api/signals/latest?strategy=v51_baseline - V5.2 paper reads /api/signals/latest?strategy=v52_8signals - Each coin shows layer score badges (方向/拥挤/环境/确认/辅助) - V5.2 additionally shows FR and 清算 badges
476 lines
24 KiB
TypeScript
476 lines
24 KiB
TypeScript
"use client";
|
||
import { useState, useEffect } from "react";
|
||
import Link from "next/link";
|
||
import { authFetch, useAuth } from "@/lib/auth";
|
||
import { XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from "recharts";
|
||
|
||
// ─── 工具函数 ────────────────────────────────────────────────────
|
||
|
||
function bjt(ms: number) {
|
||
const d = new Date(ms + 8 * 3600 * 1000);
|
||
return `${String(d.getUTCMonth() + 1).padStart(2, "0")}-${String(d.getUTCDate()).padStart(2, "0")} ${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
|
||
}
|
||
|
||
function fmtPrice(p: number) {
|
||
return p < 100 ? p.toFixed(4) : p.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
|
||
}
|
||
|
||
const PAPER_STRATEGY = "v51_baseline";
|
||
|
||
// ─── 控制面板（开关+配置）──────────────────────────────────────
|
||
|
||
function ControlPanel() {
|
||
const [config, setConfig] = useState<any>(null);
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const f = async () => { try { const r = await authFetch("/api/paper/config"); if (r.ok) setConfig(await r.json()); } catch {} };
|
||
f();
|
||
}, []);
|
||
|
||
const toggle = async () => {
|
||
setSaving(true);
|
||
try {
|
||
const r = await authFetch("/api/paper/config", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ enabled: !config.enabled }),
|
||
});
|
||
if (r.ok) setConfig(await r.json().then(j => j.config));
|
||
} catch {} finally { setSaving(false); }
|
||
};
|
||
|
||
if (!config) return null;
|
||
|
||
return (
|
||
<div className={`rounded-xl border-2 ${config.enabled ? "border-emerald-400 bg-emerald-50" : "border-slate-200 bg-white"} px-3 py-2 flex items-center justify-between`}>
|
||
<div className="flex items-center gap-3">
|
||
<button onClick={toggle} disabled={saving}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
||
config.enabled
|
||
? "bg-red-500 text-white hover:bg-red-600"
|
||
: "bg-emerald-500 text-white hover:bg-emerald-600"
|
||
}`}>
|
||
{saving ? "..." : config.enabled ? "⏹ 停止模拟盘" : "▶️ 启动模拟盘"}
|
||
</button>
|
||
<span className={`text-xs font-medium ${config.enabled ? "text-emerald-700" : "text-slate-500"}`}>
|
||
{config.enabled ? "🟢 运行中" : "⚪ 已停止"}
|
||
</span>
|
||
</div>
|
||
<div className="flex gap-4 text-[10px] text-slate-500">
|
||
<span>初始资金: ${config.initial_balance?.toLocaleString()}</span>
|
||
<span>单笔风险: {(config.risk_per_trade * 100).toFixed(0)}%</span>
|
||
<span>最大持仓: {config.max_positions}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 总览面板 ────────────────────────────────────────────────────
|
||
|
||
function SummaryCards() {
|
||
const [data, setData] = useState<any>(null);
|
||
useEffect(() => {
|
||
const f = async () => { try { const r = await authFetch(`/api/paper/summary?strategy=${PAPER_STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||
}, []);
|
||
if (!data) return <div className="text-center text-slate-400 text-sm py-4">加载中...</div>;
|
||
return (
|
||
<div className="grid grid-cols-3 lg:grid-cols-7 gap-1.5">
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">当前资金</p>
|
||
<p className={`font-mono font-bold text-base ${data.balance >= 10000 ? "text-emerald-600" : "text-red-500"}`}>${data.balance?.toLocaleString()}</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">总盈亏(R)</p>
|
||
<p className={`font-mono font-bold text-lg ${data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500"}`}>{data.total_pnl >= 0 ? "+" : ""}{data.total_pnl}R</p>
|
||
<p className={`font-mono text-[10px] ${data.total_pnl_usdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>{data.total_pnl_usdt >= 0 ? "+" : ""}${data.total_pnl_usdt}</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">胜率</p>
|
||
<p className="font-mono font-bold text-lg text-slate-800">{data.win_rate}%</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">总交易</p>
|
||
<p className="font-mono font-bold text-lg text-slate-800">{data.total_trades}</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">持仓中</p>
|
||
<p className="font-mono font-bold text-lg text-blue-600">{data.active_positions}</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">盈亏比(PF)</p>
|
||
<p className="font-mono font-bold text-lg text-slate-800">{data.profit_factor}</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||
<p className="text-[10px] text-slate-400">运行</p>
|
||
<p className="font-mono font-semibold text-sm text-slate-600">{data.start_time ? "运行中 ✅" : "等待首笔"}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 最新信号状态 ────────────────────────────────────────────────
|
||
|
||
const COINS = ["BTCUSDT", "ETHUSDT", "XRPUSDT", "SOLUSDT"];
|
||
|
||
function LatestSignals() {
|
||
const [signals, setSignals] = useState<Record<string, any>>({});
|
||
useEffect(() => {
|
||
const f = async () => {
|
||
try {
|
||
const r = await authFetch("/api/signals/latest?strategy=v51_baseline");
|
||
if (r.ok) {
|
||
const j = await r.json();
|
||
setSignals(j);
|
||
}
|
||
} catch {}
|
||
};
|
||
f(); const iv = setInterval(f, 15000); return () => clearInterval(iv);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||
<div className="px-3 py-2 border-b border-slate-100">
|
||
<h3 className="font-semibold text-slate-800 text-xs">最新信号</h3>
|
||
</div>
|
||
<div className="divide-y divide-slate-50">
|
||
{COINS.map(sym => {
|
||
const coin = sym.replace("USDT", "");
|
||
const s = signals[coin];
|
||
const ago = s?.ts ? Math.round((Date.now() - s.ts) / 60000) : null;
|
||
const f = s?.factors;
|
||
return (
|
||
<div key={sym} className="px-3 py-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-mono text-xs font-bold text-slate-700 w-8">{coin}</span>
|
||
{s?.signal ? (
|
||
<>
|
||
<span className={`text-xs font-bold ${s.signal === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
||
{s.signal === "LONG" ? "🟢" : "🔴"} {s.signal}
|
||
</span>
|
||
<span className="font-mono text-xs font-bold text-slate-800">{s.score}分</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="text-[10px] text-slate-400">⚪ 无信号</span>
|
||
<span className="font-mono text-[10px] text-slate-500">{s?.score ?? 0}分</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
{ago !== null && <span className="text-[10px] text-slate-400">{ago < 60 ? `${ago}m前` : `${Math.round(ago/60)}h前`}</span>}
|
||
</div>
|
||
{f && (
|
||
<div className="flex gap-1 mt-1 flex-wrap">
|
||
<span className="text-[9px] px-1 py-0.5 rounded bg-blue-50 text-blue-700">方向{f.direction?.score ?? 0}/{f.direction?.max ?? 45}</span>
|
||
<span className="text-[9px] px-1 py-0.5 rounded bg-violet-50 text-violet-700">拥挤{f.crowding?.score ?? 0}/{f.crowding?.max ?? 20}</span>
|
||
<span className="text-[9px] px-1 py-0.5 rounded bg-emerald-50 text-emerald-700">环境{f.environment?.score ?? 0}/{f.environment?.max ?? 15}</span>
|
||
<span className="text-[9px] px-1 py-0.5 rounded bg-amber-50 text-amber-700">确认{f.confirmation?.score ?? 0}/{f.confirmation?.max ?? 15}</span>
|
||
<span className="text-[9px] px-1 py-0.5 rounded bg-slate-100 text-slate-600">辅助{f.auxiliary?.score ?? 0}/{f.auxiliary?.max ?? 5}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 当前持仓 ────────────────────────────────────────────────────
|
||
|
||
function ActivePositions() {
|
||
const [positions, setPositions] = useState<any[]>([]);
|
||
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
|
||
|
||
// 从API获取持仓列表（10秒刷新）
|
||
useEffect(() => {
|
||
const f = async () => { try { const r = await authFetch(`/api/paper/positions?strategy=${PAPER_STRATEGY}`); if (r.ok) { const j = await r.json(); setPositions(j.data || []); } } catch {} };
|
||
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||
}, []);
|
||
|
||
// WebSocket实时价格（aggTrade逐笔成交）
|
||
useEffect(() => {
|
||
const streams = ["btcusdt", "ethusdt", "xrpusdt", "solusdt"].map(s => `${s}@aggTrade`).join("/");
|
||
const ws = new WebSocket(`wss://fstream.binance.com/stream?streams=${streams}`);
|
||
ws.onmessage = (e) => {
|
||
try {
|
||
const msg = JSON.parse(e.data);
|
||
if (msg.data) {
|
||
const sym = msg.data.s;
|
||
const price = parseFloat(msg.data.p);
|
||
if (sym && price > 0) setWsPrices(prev => ({ ...prev, [sym]: price }));
|
||
}
|
||
} catch {}
|
||
};
|
||
return () => ws.close();
|
||
}, []);
|
||
|
||
if (positions.length === 0) return (
|
||
<div className="rounded-xl border border-slate-200 bg-white px-3 py-4 text-center text-slate-400 text-sm">
|
||
暂无活跃持仓
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||
<div className="px-3 py-2 border-b border-slate-100">
|
||
<h3 className="font-semibold text-slate-800 text-xs">当前持仓 <span className="text-[10px] text-emerald-500 font-normal">● 实时</span></h3>
|
||
</div>
|
||
<div className="divide-y divide-slate-100">
|
||
{positions.map((p: any) => {
|
||
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 entry = p.entry_price || 0;
|
||
const atr = p.atr_at_entry || 1;
|
||
const riskDist = 2.0 * 0.7 * atr;
|
||
// TP1触发后只剩半仓：0.5×TP1锁定 + 0.5×当前浮盈
|
||
const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
|
||
const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
|
||
const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
|
||
const unrealUsdt = unrealR * 200;
|
||
return (
|
||
<div key={p.id} className="px-3 py-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<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>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||
{unrealR >= 0 ? "+" : ""}{unrealR.toFixed(2)}R
|
||
</span>
|
||
<span className={`font-mono text-[10px] ${unrealUsdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>
|
||
({unrealUsdt >= 0 ? "+" : ""}${unrealUsdt.toFixed(0)})
|
||
</span>
|
||
<span className="text-[10px] text-slate-400">{holdMin}m</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 mt-1 text-[10px] font-mono text-slate-600">
|
||
<span>入场: ${fmtPrice(p.entry_price)}</span>
|
||
<span className="text-blue-600">现价: ${currentPrice ? fmtPrice(currentPrice) : "-"}</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-red-500">SL: ${fmtPrice(p.sl_price)}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 权益曲线 ────────────────────────────────────────────────────
|
||
|
||
function EquityCurve() {
|
||
const [data, setData] = useState<any[]>([]);
|
||
useEffect(() => {
|
||
const f = async () => { try { const r = await authFetch(`/api/paper/equity-curve?strategy=${PAPER_STRATEGY}`); if (r.ok) { const j = await r.json(); setData(j.data || []); } } catch {} };
|
||
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||
}, []);
|
||
|
||
if (data.length < 2) return null;
|
||
|
||
return (
|
||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||
<div className="px-3 py-2 border-b border-slate-100">
|
||
<h3 className="font-semibold text-slate-800 text-xs">权益曲线 (累计PnL)</h3>
|
||
</div>
|
||
<div className="p-2" style={{ height: 200 }}>
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<AreaChart data={data}>
|
||
<XAxis dataKey="ts" tickFormatter={(v) => bjt(v)} tick={{ fontSize: 10 }} />
|
||
<YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}R`} />
|
||
<Tooltip labelFormatter={(v) => bjt(Number(v))} formatter={(v: any) => [`${v}R`, "累计PnL"]} />
|
||
<ReferenceLine y={0} stroke="#94a3b8" strokeDasharray="3 3" />
|
||
<Area type="monotone" dataKey="pnl" stroke="#10b981" fill="#d1fae5" strokeWidth={2} />
|
||
</AreaChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 历史交易列表 ────────────────────────────────────────────────
|
||
|
||
type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL";
|
||
type FilterResult = "all" | "win" | "loss";
|
||
|
||
function TradeHistory() {
|
||
const [trades, setTrades] = useState<any[]>([]);
|
||
const [symbol, setSymbol] = useState<FilterSymbol>("all");
|
||
const [result, setResult] = useState<FilterResult>("all");
|
||
|
||
useEffect(() => {
|
||
const f = async () => {
|
||
try {
|
||
const r = await authFetch(`/api/paper/trades?symbol=${symbol}&result=${result}&strategy=${PAPER_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]);
|
||
|
||
return (
|
||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
|
||
<h3 className="font-semibold text-slate-800 text-xs">历史交易</h3>
|
||
<div className="flex gap-1">
|
||
{(["all", "BTC", "ETH", "XRP", "SOL"] as FilterSymbol[]).map(s => (
|
||
<button key={s} onClick={() => setSymbol(s)}
|
||
className={`px-2 py-0.5 rounded text-[10px] ${symbol === s ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>
|
||
{s === "all" ? "全部" : s}
|
||
</button>
|
||
))}
|
||
<span className="text-slate-300">|</span>
|
||
{(["all", "win", "loss"] as FilterResult[]).map(r => (
|
||
<button key={r} onClick={() => setResult(r)}
|
||
className={`px-2 py-0.5 rounded text-[10px] ${result === r ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>
|
||
{r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="max-h-64 overflow-y-auto">
|
||
{trades.length === 0 ? (
|
||
<div className="text-center text-slate-400 text-sm py-6">暂无交易记录</div>
|
||
) : (
|
||
<table className="w-full text-[11px]">
|
||
<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-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">PnL(R)</th>
|
||
<th className="px-2 py-1.5 text-center 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>
|
||
</tr>
|
||
</thead>
|
||
<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;
|
||
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 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
||
{t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}
|
||
</td>
|
||
<td className="px-2 py-1.5 text-right font-mono">{fmtPrice(t.entry_price)}</td>
|
||
<td className="px-2 py-1.5 text-right font-mono">{t.exit_price ? fmtPrice(t.exit_price) : "-"}</td>
|
||
<td className={`px-2 py-1.5 text-right font-mono font-bold ${t.pnl_r > 0 ? "text-emerald-600" : t.pnl_r < 0 ? "text-red-500" : "text-slate-500"}`}>
|
||
{t.pnl_r > 0 ? "+" : ""}{t.pnl_r?.toFixed(2)}
|
||
</td>
|
||
<td className="px-2 py-1.5 text-center">
|
||
<span className={`px-1 py-0.5 rounded text-[9px] ${
|
||
t.status === "tp" ? "bg-emerald-100 text-emerald-700" :
|
||
t.status === "sl" ? "bg-red-100 text-red-700" :
|
||
t.status === "sl_be" ? "bg-amber-100 text-amber-700" :
|
||
t.status === "signal_flip" ? "bg-purple-100 text-purple-700" :
|
||
"bg-slate-100 text-slate-600"
|
||
}`}>
|
||
{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 text-slate-400">{holdMin}m</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 统计面板 ────────────────────────────────────────────────────
|
||
|
||
function StatsPanel() {
|
||
const [data, setData] = useState<any>(null);
|
||
const [tab, setTab] = useState("ALL");
|
||
useEffect(() => {
|
||
const f = async () => { try { const r = await authFetch(`/api/paper/stats?strategy=${PAPER_STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||
}, []);
|
||
|
||
if (!data || data.error) return null;
|
||
|
||
const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
|
||
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
|
||
|
||
return (
|
||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
|
||
<h3 className="font-semibold text-slate-800 text-xs">详细统计</h3>
|
||
<div className="flex gap-1">
|
||
{tabs.map(t => (
|
||
<button key={t} onClick={() => setTab(t)}
|
||
className={`px-2 py-0.5 rounded text-[10px] font-medium transition-colors ${tab === t ? "bg-slate-800 text-white" : "bg-slate-100 text-slate-500 hover:bg-slate-200"}`}
|
||
>{t === "ALL" ? "总计" : t}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{st ? (
|
||
<div className="p-3 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>
|
||
<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.mdd}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_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.total ?? data.total}</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">{st.short_win_rate}% ({st.short_count}笔)</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="p-3 text-xs text-slate-400">该币种暂无数据</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 主页面 ──────────────────────────────────────────────────────
|
||
|
||
export default function PaperTradingPage() {
|
||
const { isLoggedIn, loading } = useAuth();
|
||
|
||
if (loading) return <div className="text-center text-slate-400 py-8">加载中...</div>;
|
||
|
||
if (!isLoggedIn) return (
|
||
<div className="flex flex-col items-center justify-center h-64 gap-4">
|
||
<div className="text-5xl">🔒</div>
|
||
<p className="text-slate-600 font-medium">请先登录查看模拟盘</p>
|
||
<Link href="/login" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">登录</Link>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<div>
|
||
<h1 className="text-lg font-bold text-slate-900">📈 V5.1 模拟盘</h1>
|
||
<p className="text-[10px] text-slate-500">仅展示 v51_baseline · V5.1信号引擎自动交易 · 实时追踪</p>
|
||
</div>
|
||
|
||
<ControlPanel />
|
||
<SummaryCards />
|
||
<LatestSignals />
|
||
<ActivePositions />
|
||
<EquityCurve />
|
||
<TradeHistory />
|
||
<StatsPanel />
|
||
</div>
|
||
);
|
||
}
|