feat: unify v53 frontend - single strategy, no ALT/BTC tab split; update main.py display_score
This commit is contained in:
root
parent
42cb230337
commit
d2ddc3ea46
@ -464,12 +464,11 @@ async def get_signal_latest(user: dict = Depends(get_current_user), strategy: st
|
||||
data["factors"] = json.loads(data["factors"])
|
||||
except Exception:
|
||||
pass
|
||||
# 对 v53_btc：把 alt_score_ref 提升为顶层字段，方便前端直接读
|
||||
if strategy == "v53_btc" and isinstance(data.get("factors"), dict):
|
||||
# 对 v53_btc 或 v53（BTC symbol）：把 alt_score_ref 提升为顶层字段
|
||||
if strategy.startswith("v53") and isinstance(data.get("factors"), dict):
|
||||
f = data["factors"]
|
||||
if data.get("score", 0) == 0 and f.get("alt_score_ref") is not None:
|
||||
data["display_score"] = f["alt_score_ref"]
|
||||
data["gate_passed"] = f.get("gate_passed", True)
|
||||
else:
|
||||
data["display_score"] = data.get("score", 0)
|
||||
data["gate_passed"] = f.get("gate_passed", True)
|
||||
|
||||
@ -20,65 +20,39 @@ function parseFactors(raw: any) {
|
||||
return raw;
|
||||
}
|
||||
|
||||
type StrategyTab = "v53_alt" | "v53_btc";
|
||||
const STRATEGY = "v53";
|
||||
const ALL_COINS = ["BTCUSDT", "ETHUSDT", "XRPUSDT", "SOLUSDT"];
|
||||
|
||||
const STRATEGY_LABELS: Record<StrategyTab, { label: string; desc: string; coins: string[]; badgeClass: string }> = {
|
||||
v53_alt: {
|
||||
label: "🟣 ALT轨 (v53_alt)",
|
||||
desc: "ETH / XRP / SOL · 四层评分 55/25/15/5",
|
||||
coins: ["ETHUSDT", "XRPUSDT", "SOLUSDT"],
|
||||
badgeClass: "bg-purple-100 text-purple-700 border border-purple-200",
|
||||
},
|
||||
v53_btc: {
|
||||
label: "🔵 BTC轨 (v53_btc)",
|
||||
desc: "BTCUSDT · Gate-Control逻辑",
|
||||
coins: ["BTCUSDT"],
|
||||
badgeClass: "bg-amber-100 text-amber-700 border border-amber-200",
|
||||
},
|
||||
};
|
||||
// ─── 最新信号 ────────────────────────────────────────────────────
|
||||
|
||||
// ─── 最新信号状态 ────────────────────────────────────────────────
|
||||
|
||||
const ALT_COINS = ["ETHUSDT", "XRPUSDT", "SOLUSDT"];
|
||||
const BTC_COINS = ["BTCUSDT"];
|
||||
|
||||
function LatestSignals({ strategy }: { strategy: StrategyTab }) {
|
||||
const coins = strategy === "v53_btc" ? BTC_COINS : ALT_COINS;
|
||||
function LatestSignals() {
|
||||
const [signals, setSignals] = useState<Record<string, any>>({});
|
||||
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
for (const sym of coins) {
|
||||
for (const sym of ALL_COINS) {
|
||||
const coin = sym.replace("USDT", "");
|
||||
const strat = strategy === "v53_btc" ? "v53_btc" : "v53_alt";
|
||||
try {
|
||||
const r = await authFetch(`/api/signals/signal-history?symbol=${coin}&limit=1&strategy=${strat}`);
|
||||
if (r.ok) {
|
||||
const j = await r.json();
|
||||
if (j.data && j.data.length > 0) setSignals(prev => ({ ...prev, [sym]: j.data[0] }));
|
||||
}
|
||||
const r = await authFetch(`/api/signals/signal-history?symbol=${coin}&limit=1&strategy=${STRATEGY}`);
|
||||
if (r.ok) { const j = await r.json(); if (j.data?.length > 0) setSignals(prev => ({ ...prev, [sym]: j.data[0] })); }
|
||||
} catch {}
|
||||
}
|
||||
};
|
||||
f();
|
||||
const iv = setInterval(f, 15000);
|
||||
return () => clearInterval(iv);
|
||||
}, [strategy, coins]);
|
||||
|
||||
const meta = STRATEGY_LABELS[strategy];
|
||||
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 flex items-center justify-between">
|
||||
<h3 className="font-semibold text-slate-800 text-xs">最新信号</h3>
|
||||
<span className={`px-2 py-0.5 rounded text-[10px] font-semibold ${meta.badgeClass}`}>{strategy}</span>
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700 border border-blue-200">v53</span>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-50">
|
||||
{coins.map(sym => {
|
||||
{ALL_COINS.map(sym => {
|
||||
const s = signals[sym];
|
||||
const coin = sym.replace("USDT", "");
|
||||
const ago = s?.ts ? Math.round((Date.now() - s.ts) / 60000) : null;
|
||||
const fc = s?.factors;
|
||||
const gatePassed = fc?.gate_passed ?? true;
|
||||
return (
|
||||
<div key={sym} className="px-3 py-2">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -90,45 +64,22 @@ function LatestSignals({ strategy }: { strategy: StrategyTab }) {
|
||||
{s.signal === "LONG" ? "🟢" : "🔴"} {s.signal}
|
||||
</span>
|
||||
<span className="font-mono text-xs font-bold text-slate-800">{s.score}分</span>
|
||||
<span className="text-[9px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 font-medium">
|
||||
{s.score >= 85 ? "加仓" : s.score >= 75 ? "标准" : "观望"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-400">暂无信号</span>
|
||||
)}
|
||||
) : <span className="text-[10px] text-slate-400">暂无信号</span>}
|
||||
</div>
|
||||
{ago !== null && (
|
||||
<span className="text-[10px] text-slate-400">{ago < 60 ? `${ago}m前` : `${Math.round(ago / 60)}h前`}</span>
|
||||
)}
|
||||
{ago !== null && <span className="text-[10px] text-slate-400">{ago < 60 ? `${ago}m前` : `${Math.round(ago/60)}h前`}</span>}
|
||||
</div>
|
||||
{fc && strategy === "v53_alt" && (
|
||||
{fc && (
|
||||
<div className="flex gap-1 mt-1 flex-wrap">
|
||||
<span className={`text-[9px] px-1 py-0.5 rounded ${(fc.gate_passed ?? true) ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
|
||||
{(fc.gate_passed ?? true) ? "✅ Gate通过" : "❌ 否决"}
|
||||
<span className={`text-[9px] px-1 py-0.5 rounded ${gatePassed ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
|
||||
{gatePassed ? "✅" : "❌"} {fc.gate_block || "Gate"}
|
||||
</span>
|
||||
{fc.gate_block && (
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-orange-50 text-orange-700">{fc.gate_block}</span>
|
||||
)}
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-blue-50 text-blue-700">方向{fc.direction?.score ?? 0}/55</span>
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-violet-50 text-violet-700">拥挤{fc.crowding?.score ?? 0}/25</span>
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-emerald-50 text-emerald-700">环境{fc.environment?.score ?? 0}/15</span>
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-slate-100 text-slate-600">辅助{fc.auxiliary?.score ?? 0}/5</span>
|
||||
</div>
|
||||
)}
|
||||
{fc && strategy === "v53_btc" && (
|
||||
<div className="flex gap-1 mt-1 flex-wrap">
|
||||
<span className={`text-[9px] px-1 py-0.5 rounded ${fc.gate_passed ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
|
||||
{fc.gate_passed ? "✅ Gate通过" : "❌ Gate否决"}
|
||||
</span>
|
||||
{fc.block_reason && (
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-orange-50 text-orange-700">{fc.block_reason}</span>
|
||||
)}
|
||||
<span className="text-[9px] px-1 py-0.5 rounded bg-amber-50 text-amber-700">
|
||||
OBI {((fc.obi_raw ?? 0) * 100).toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -142,41 +93,30 @@ function LatestSignals({ strategy }: { strategy: StrategyTab }) {
|
||||
function ControlPanel() {
|
||||
const [config, setConfig] = useState<any>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try { const r = await authFetch("/api/paper/config"); if (r.ok) setConfig(await r.json()); } catch {}
|
||||
})();
|
||||
(async () => { try { const r = await authFetch("/api/paper/config"); if (r.ok) setConfig(await r.json()); } catch {} })();
|
||||
}, []);
|
||||
|
||||
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 }),
|
||||
});
|
||||
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: any) => 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 ? "⏹ 停止模拟盘" : "▶️ 启动模拟盘"}
|
||||
{saving ? "..." : config.enabled ? "⏹ 停止" : "▶️ 启动"}
|
||||
</button>
|
||||
<span className={`text-xs font-medium ${config.enabled ? "text-emerald-700" : "text-slate-500"}`}>
|
||||
{config.enabled ? "🟢 运行中" : "⚪ 已停止"}
|
||||
</span>
|
||||
<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>
|
||||
<span>初始: ${config.initial_balance?.toLocaleString()}</span>
|
||||
<span>风险: {(config.risk_per_trade * 100).toFixed(0)}%</span>
|
||||
<span>最大: {config.max_positions}仓</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -184,15 +124,12 @@ function ControlPanel() {
|
||||
|
||||
// ─── 总览 ────────────────────────────────────────────────────────
|
||||
|
||||
function SummaryCards({ strategy }: { strategy: StrategyTab }) {
|
||||
function SummaryCards() {
|
||||
const [data, setData] = useState<any>(null);
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
try { const r = await authFetch(`/api/paper/summary?strategy=${strategy}`); if (r.ok) setData(await r.json()); } catch {}
|
||||
};
|
||||
const f = async () => { try { const r = await authFetch(`/api/paper/summary?strategy=${STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||||
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||||
}, [strategy]);
|
||||
|
||||
}, []);
|
||||
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-6 gap-1.5">
|
||||
@ -200,9 +137,9 @@ function SummaryCards({ strategy }: { strategy: StrategyTab }) {
|
||||
{ label: "总盈亏(R)", value: `${data.total_pnl >= 0 ? "+" : ""}${data.total_pnl}R`, sub: `${data.total_pnl_usdt >= 0 ? "+" : ""}$${data.total_pnl_usdt}`, color: data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500" },
|
||||
{ label: "胜率", value: `${data.win_rate}%`, sub: `共${data.total_trades}笔`, color: "text-slate-800" },
|
||||
{ label: "持仓中", value: data.active_positions, sub: "活跃仓位", color: "text-blue-600" },
|
||||
{ label: "盈亏比", value: data.profit_factor, sub: "Profit Factor", color: "text-slate-800" },
|
||||
{ label: "盈亏比", value: data.profit_factor, sub: "PF", color: "text-slate-800" },
|
||||
{ label: "当前资金", value: `$${data.balance?.toLocaleString()}`, sub: "虚拟余额", color: data.balance >= 10000 ? "text-emerald-600" : "text-red-500" },
|
||||
{ label: "状态", value: data.start_time ? "运行中 ✅" : "等待首笔", sub: "signal accumulating", color: "text-slate-600" },
|
||||
{ label: "状态", value: data.start_time ? "运行中 ✅" : "等待首笔", sub: "accumulating", color: "text-slate-600" },
|
||||
].map(({ label, value, sub, color }) => (
|
||||
<div key={label} className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||
<p className="text-[10px] text-slate-400">{label}</p>
|
||||
@ -216,83 +153,57 @@ function SummaryCards({ strategy }: { strategy: StrategyTab }) {
|
||||
|
||||
// ─── 当前持仓 ────────────────────────────────────────────────────
|
||||
|
||||
function ActivePositions({ strategy }: { strategy: StrategyTab }) {
|
||||
function ActivePositions() {
|
||||
const [positions, setPositions] = useState<any[]>([]);
|
||||
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
|
||||
const [paperRiskUsd, setPaperRiskUsd] = useState(200);
|
||||
const meta = STRATEGY_LABELS[strategy];
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try { const r = await authFetch("/api/paper/config"); if (r.ok) { const cfg = await r.json(); setPaperRiskUsd((cfg.initial_balance || 10000) * (cfg.risk_per_trade || 0.02)); } } catch {}
|
||||
})();
|
||||
(async () => { try { const r = await authFetch("/api/paper/config"); if (r.ok) { const cfg = await r.json(); setPaperRiskUsd((cfg.initial_balance||10000)*(cfg.risk_per_trade||0.02)); } } catch {} })();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
try { const r = await authFetch(`/api/paper/positions?strategy=${strategy}`); if (r.ok) setPositions((await r.json()).data || []); } catch {}
|
||||
};
|
||||
const f = async () => { try { const r = await authFetch(`/api/paper/positions?strategy=${STRATEGY}`); if (r.ok) setPositions((await r.json()).data||[]); } catch {} };
|
||||
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||||
}, [strategy]);
|
||||
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const streams = ["btcusdt", "ethusdt", "xrpusdt", "solusdt"].map(s => `${s}@aggTrade`).join("/");
|
||||
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 {}
|
||||
};
|
||||
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">
|
||||
{meta.label} 暂无活跃持仓
|
||||
</div>
|
||||
);
|
||||
|
||||
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">v53 暂无活跃持仓</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="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 riskDist = p.risk_distance || Math.abs(entry - (p.sl_price || entry)) || 1;
|
||||
const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
|
||||
const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
|
||||
const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
|
||||
const unrealUsdt = unrealR * paperRiskUsd;
|
||||
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 riskDist = p.risk_distance||Math.abs(entry-(p.sl_price||entry))||1;
|
||||
const tp1R = riskDist>0?(p.direction==="LONG"?((p.tp1_price||0)-entry)/riskDist:(entry-(p.tp1_price||0))/riskDist):0;
|
||||
const fullR = riskDist>0?(p.direction==="LONG"?(currentPrice-entry)/riskDist:(entry-currentPrice)/riskDist):0;
|
||||
const unrealR = p.tp1_hit?0.5*tp1R+0.5*fullR:fullR;
|
||||
const unrealUsdt = unrealR*paperRiskUsd;
|
||||
const fc = parseFactors(p.score_factors);
|
||||
const track = fc?.track||(p.symbol==="BTCUSDT"?"BTC":"ALT");
|
||||
return (
|
||||
<div key={p.id} className="px-3 py-2 bg-emerald-50/60">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className={`text-xs font-bold ${p.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction}
|
||||
</span>
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] font-semibold ${meta.badgeClass}`}>{strategy}</span>
|
||||
<span className="text-[10px] text-slate-500">评分{p.score} · {p.tier === "heavy" ? "加仓" : "标准"}</span>
|
||||
<span className={`text-xs font-bold ${p.direction==="LONG"?"text-emerald-600":"text-red-500"}`}>{p.direction==="LONG"?"🟢":"🔴"} {sym} {p.direction}</span>
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] font-semibold ${track==="BTC"?"bg-amber-100 text-amber-700":"bg-purple-100 text-purple-700"}`}>{track}</span>
|
||||
<span className="text-[10px] text-slate-500">评分{p.score}</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={`font-mono text-sm font-bold ${unrealR>=0?"text-emerald-600":"text-red-500"}`}>{unrealR>=0?"+":""}{unrealR.toFixed(2)}R</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 flex-wrap">
|
||||
<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>入: ${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>
|
||||
@ -306,23 +217,16 @@ function ActivePositions({ strategy }: { strategy: StrategyTab }) {
|
||||
|
||||
// ─── 权益曲线 ────────────────────────────────────────────────────
|
||||
|
||||
function EquityCurve({ strategy }: { strategy: StrategyTab }) {
|
||||
function EquityCurve() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
try { const r = await authFetch(`/api/paper/equity-curve?strategy=${strategy}`); if (r.ok) setData((await r.json()).data || []); } catch {}
|
||||
};
|
||||
const f = async () => { try { const r = await authFetch(`/api/paper/equity-curve?strategy=${STRATEGY}`); if (r.ok) setData((await r.json()).data||[]); } catch {} };
|
||||
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||||
}, [strategy]);
|
||||
|
||||
}, []);
|
||||
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>
|
||||
{data.length < 2 ? (
|
||||
<div className="px-3 py-6 text-center text-xs text-slate-400">V5.3 暂无足够历史数据，积累中...</div>
|
||||
) : (
|
||||
<div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">权益曲线</h3></div>
|
||||
{data.length < 2 ? <div className="px-3 py-6 text-center text-xs text-slate-400">数据积累中...</div> : (
|
||||
<div className="p-2" style={{ height: 200 }}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data}>
|
||||
@ -341,42 +245,33 @@ function EquityCurve({ strategy }: { strategy: StrategyTab }) {
|
||||
|
||||
// ─── 历史交易 ────────────────────────────────────────────────────
|
||||
|
||||
type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL";
|
||||
type FilterResult = "all" | "win" | "loss";
|
||||
|
||||
function TradeHistory({ strategy }: { strategy: StrategyTab }) {
|
||||
function TradeHistory() {
|
||||
const [trades, setTrades] = useState<any[]>([]);
|
||||
const [symbol, setSymbol] = useState<FilterSymbol>("all");
|
||||
const [result, setResult] = useState<FilterResult>("all");
|
||||
const meta = STRATEGY_LABELS[strategy];
|
||||
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
try {
|
||||
const r = await authFetch(`/api/paper/trades?result=${result}&strategy=${strategy}&limit=50`);
|
||||
if (r.ok) setTrades((await r.json()).data || []);
|
||||
} catch {}
|
||||
};
|
||||
const f = async () => { try { const r = await authFetch(`/api/paper/trades?symbol=${symbol}&result=${result}&strategy=${STRATEGY}&limit=50`); if (r.ok) setTrades((await r.json()).data||[]); } catch {} };
|
||||
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||||
}, [result, strategy]);
|
||||
|
||||
}, [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 items-center gap-1 flex-wrap">
|
||||
<span className={`px-2 py-0.5 rounded text-[10px] font-semibold ${meta.badgeClass}`}>{strategy}</span>
|
||||
{(["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>
|
||||
{(["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>
|
||||
) : (
|
||||
{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">
|
||||
@ -392,34 +287,17 @@ function TradeHistory({ strategy }: { strategy: StrategyTab }) {
|
||||
</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;
|
||||
const factors = parseFactors(t.score_factors);
|
||||
const track = factors?.track || (t.symbol === "BTCUSDT" ? "BTC" : "ALT");
|
||||
const holdMin = t.exit_ts&&t.entry_ts?Math.round((t.exit_ts-t.entry_ts)/60000):0;
|
||||
const fc = parseFactors(t.score_factors);
|
||||
const track = fc?.track||(t.symbol==="BTCUSDT"?"BTC":"ALT");
|
||||
return (
|
||||
<tr key={t.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 font-mono">
|
||||
{t.symbol?.replace("USDT", "")}
|
||||
<span className={`ml-1 text-[9px] px-1 rounded ${track === "BTC" ? "bg-amber-100 text-amber-700" : "bg-purple-100 text-purple-700"}`}>{track}</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>
|
||||
<td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT","")}<span className={`ml-1 text-[9px] px-1 rounded ${track==="BTC"?"bg-amber-100 text-amber-700":"bg-purple-100 text-purple-700"}`}>{track}</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>
|
||||
<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.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>
|
||||
@ -435,38 +313,28 @@ function TradeHistory({ strategy }: { strategy: StrategyTab }) {
|
||||
|
||||
// ─── 统计面板 ────────────────────────────────────────────────────
|
||||
|
||||
function StatsPanel({ strategy }: { strategy: StrategyTab }) {
|
||||
function StatsPanel() {
|
||||
const [data, setData] = useState<any>(null);
|
||||
const [tab, setTab] = useState("ALL");
|
||||
useEffect(() => { setTab("ALL"); }, [strategy]);
|
||||
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
try { const r = await authFetch(`/api/paper/stats?strategy=${strategy}`); if (r.ok) setData(await r.json()); } catch {}
|
||||
};
|
||||
const f = async () => { try { const r = await authFetch(`/api/paper/stats?strategy=${STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||||
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||||
}, [strategy]);
|
||||
|
||||
}, []);
|
||||
if (!data || data.error) 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="p-3 text-xs text-slate-400">该视图暂无统计数据，等待交易记录积累</div>
|
||||
<div className="p-3 text-xs text-slate-400">等待交易记录积累...</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const coinTabs = strategy === "v53_btc" ? ["ALL", "BTC"] : ["ALL", "ETH", "XRP", "SOL"];
|
||||
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
|
||||
|
||||
const coinTabs = ["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 flex-wrap gap-1">
|
||||
<h3 className="font-semibold text-slate-800 text-xs">详细统计</h3>
|
||||
<div className="flex items-center gap-1">
|
||||
{coinTabs.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>
|
||||
<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>
|
||||
@ -479,15 +347,13 @@ function StatsPanel({ strategy }: { strategy: StrategyTab }) {
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-3 text-xs text-slate-400">该币种暂无数据</div>
|
||||
)}
|
||||
) : <div className="p-3 text-xs text-slate-400">该币种暂无数据</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -496,9 +362,6 @@ function StatsPanel({ strategy }: { strategy: StrategyTab }) {
|
||||
|
||||
export default function PaperTradingV53Page() {
|
||||
const { isLoggedIn, loading } = useAuth();
|
||||
const [strategyTab, setStrategyTab] = useState<StrategyTab>("v53_alt");
|
||||
const meta = STRATEGY_LABELS[strategyTab];
|
||||
|
||||
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">
|
||||
@ -507,36 +370,19 @@ export default function PaperTradingV53Page() {
|
||||
<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 className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-slate-900">📈 模拟盘 V5.3</h1>
|
||||
<p className="text-[10px] text-slate-500">ALT轨(ETH/XRP/SOL) + BTC独立Gate-Control</p>
|
||||
<p className="text-[10px] text-slate-500">统一策略 v53 · BTC/ETH/XRP/SOL · 四层评分 55/25/15/5 + per-symbol 四门控制</p>
|
||||
</div>
|
||||
{/* 策略Tab切换 */}
|
||||
<div className="flex gap-1.5">
|
||||
{(Object.entries(STRATEGY_LABELS) as [StrategyTab, typeof STRATEGY_LABELS[StrategyTab]][]).map(([key, val]) => (
|
||||
<button key={key} onClick={() => setStrategyTab(key)}
|
||||
className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-all ${strategyTab === key ? val.badgeClass + " border-current" : "border-slate-200 text-slate-600 hover:border-slate-400"}`}>
|
||||
{val.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`rounded-lg border px-3 py-1.5 text-[11px] ${meta.badgeClass}`}>
|
||||
<span className="font-semibold">{meta.label}</span> — {meta.desc}
|
||||
</div>
|
||||
|
||||
<ControlPanel />
|
||||
<SummaryCards strategy={strategyTab} />
|
||||
<LatestSignals strategy={strategyTab} />
|
||||
<ActivePositions strategy={strategyTab} />
|
||||
<EquityCurve strategy={strategyTab} />
|
||||
<TradeHistory strategy={strategyTab} />
|
||||
<StatsPanel strategy={strategyTab} />
|
||||
<SummaryCards />
|
||||
<LatestSignals />
|
||||
<ActivePositions />
|
||||
<EquityCurve />
|
||||
<TradeHistory />
|
||||
<StatsPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -203,7 +203,7 @@ function BTCGateCard({ factors }: { factors: LatestIndicator["factors"] }) {
|
||||
|
||||
function IndicatorCards({ symbol }: { symbol: Symbol }) {
|
||||
const [data, setData] = useState<LatestIndicator | null>(null);
|
||||
const strategy = symbol === "BTC" ? "v53_btc" : "v53_alt";
|
||||
const strategy = "v53";
|
||||
|
||||
useEffect(() => {
|
||||
const fetch = async () => {
|
||||
@ -295,7 +295,7 @@ function IndicatorCards({ symbol }: { symbol: Symbol }) {
|
||||
<div>
|
||||
<p className="text-[10px] text-slate-500">
|
||||
{isBTC ? "BTC Gate-Control" : "ALT 四层评分"}
|
||||
{" · "}{isBTC ? "v53_btc" : "v53_alt"}
|
||||
{" · "}{"v53"}
|
||||
</p>
|
||||
<p className={`font-bold text-base ${
|
||||
data.signal === "LONG" ? "text-emerald-700" :
|
||||
@ -353,7 +353,7 @@ interface SignalRecord {
|
||||
|
||||
function SignalHistory({ symbol }: { symbol: Symbol }) {
|
||||
const [data, setData] = useState<SignalRecord[]>([]);
|
||||
const strategy = symbol === "BTC" ? "v53_btc" : "v53_alt";
|
||||
const strategy = "v53";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@ -407,7 +407,7 @@ function SignalHistory({ symbol }: { symbol: Symbol }) {
|
||||
function CVDChart({ symbol, minutes }: { symbol: Symbol; minutes: number }) {
|
||||
const [data, setData] = useState<IndicatorRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const strategy = symbol === "BTC" ? "v53_btc" : "v53_alt";
|
||||
const strategy = "v53";
|
||||
|
||||
const fetchData = useCallback(async (silent = false) => {
|
||||
try {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user