refactor: strategy-plaza detail page uses dynamic import of existing pages
This commit is contained in:
root
parent
9d248c2f8f
commit
a6165d8c86
405
frontend/app/paper-v53middle/page.tsx
Normal file
405
frontend/app/paper-v53middle/page.tsx
Normal file
@ -0,0 +1,405 @@
|
||||
"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 });
|
||||
}
|
||||
|
||||
function parseFactors(raw: any) {
|
||||
if (!raw) return null;
|
||||
if (typeof raw === "string") { try { return JSON.parse(raw); } catch { return null; } }
|
||||
return raw;
|
||||
}
|
||||
|
||||
const STRATEGY = "v53_middle";
|
||||
const ALL_COINS = ["BTCUSDT", "ETHUSDT", "XRPUSDT", "SOLUSDT"];
|
||||
|
||||
// ─── 最新信号 ────────────────────────────────────────────────────
|
||||
|
||||
function LatestSignals() {
|
||||
const [signals, setSignals] = useState<Record<string, any>>({});
|
||||
useEffect(() => {
|
||||
const f = async () => {
|
||||
for (const sym of ALL_COINS) {
|
||||
const coin = sym.replace("USDT", "");
|
||||
try {
|
||||
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);
|
||||
}, []);
|
||||
|
||||
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 bg-blue-100 text-blue-700 border border-blue-200">v53</span>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-50">
|
||||
{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">
|
||||
<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>}
|
||||
</div>
|
||||
{ago !== null && <span className="text-[10px] text-slate-400">{ago < 60 ? `${ago}m前` : `${Math.round(ago/60)}h前`}</span>}
|
||||
</div>
|
||||
{fc && (
|
||||
<div className="flex gap-1 mt-1 flex-wrap">
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 控制面板 ────────────────────────────────────────────────────
|
||||
|
||||
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 {} })();
|
||||
}, []);
|
||||
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: 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 ? "⏹ 停止" : "▶️ 启动"}
|
||||
</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=${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-6 gap-1.5">
|
||||
{[
|
||||
{ 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: "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: "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>
|
||||
<p className={`font-mono font-bold text-base ${color}`}>{value}</p>
|
||||
<p className="text-[10px] text-slate-400">{sub}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 当前持仓 ────────────────────────────────────────────────────
|
||||
|
||||
function ActivePositions() {
|
||||
const [positions, setPositions] = useState<any[]>([]);
|
||||
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
|
||||
const [paperRiskUsd, setPaperRiskUsd] = useState(200);
|
||||
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 {} })();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
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);
|
||||
}, []);
|
||||
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">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="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 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 ${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="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 className="text-emerald-600">TP2: ${fmtPrice(p.tp2_price)}</span>
|
||||
<span className="text-red-500">SL: ${fmtPrice(p.sl_price)}</span>
|
||||
</div>
|
||||
<div className="mt-1 text-[9px] text-slate-400">
|
||||
入场时间: {p.entry_ts ? new Date(p.entry_ts).toLocaleString("zh-CN", {hour12:false, month:"2-digit", day:"2-digit", hour:"2-digit", minute:"2-digit", second:"2-digit"} as any) : "-"}
|
||||
</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=${STRATEGY}`); if (r.ok) setData((await r.json()).data||[]); } catch {} };
|
||||
f(); const iv = setInterval(f, 30000); 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>
|
||||
{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}>
|
||||
<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=${STRATEGY}&limit=50`); if (r.ok) setTrades((await r.json()).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 items-center gap-1 flex-wrap">
|
||||
{(["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>
|
||||
<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;
|
||||
const fc = parseFactors(t.score_factors);
|
||||
const track = fc?.track||(t.symbol==="BTCUSDT"?"BTC":"ALT");
|
||||
const fmtTime = (ms: number) => ms ? new Date(ms).toLocaleString("zh-CN", {hour12:false, month:"2-digit", day:"2-digit", hour:"2-digit", minute:"2-digit"} as any) : "-";
|
||||
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 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 whitespace-nowrap">{fmtTime(t.entry_ts)}</td>
|
||||
<td className="px-2 py-1.5 text-right text-slate-400 whitespace-nowrap">{fmtTime(t.exit_ts)}</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=${STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||||
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||||
}, []);
|
||||
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>
|
||||
);
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{st ? (
|
||||
<div className="p-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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
) : <div className="p-3 text-xs text-slate-400">该币种暂无数据</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 主页面 ──────────────────────────────────────────────────────
|
||||
|
||||
export default function PaperTradingV53Page() {
|
||||
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">
|
||||
{/* Fast 实验版标识条 */}
|
||||
<div className="rounded-lg bg-gradient-to-r from-orange-500 to-amber-400 px-3 py-1.5 flex items-center justify-between">
|
||||
<span className="text-white text-xs font-bold">🚀 V5.3 Middle — 实验变体 A/B对照</span>
|
||||
<div className="flex gap-2 text-white text-[10px] font-medium">
|
||||
<span className="bg-white/20 px-2 py-0.5 rounded">CVD 5m/30m</span>
|
||||
<span className="bg-white/20 px-2 py-0.5 rounded">OBI+加分</span>
|
||||
<span className="bg-white/20 px-2 py-0.5 rounded">accel独立触发</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-slate-900">🚀 模拟盘 V5.3 Middle</h1>
|
||||
<p className="text-[10px] text-slate-500">实验变体 v53_middle · BTC/ETH/XRP/SOL · CVD 5m/30m · OBI正向加分 · 与 V5.3 同起点对照</p>
|
||||
</div>
|
||||
<ControlPanel />
|
||||
<SummaryCards />
|
||||
<LatestSignals />
|
||||
<ActivePositions />
|
||||
<EquityCurve />
|
||||
<TradeHistory />
|
||||
<StatsPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
580
frontend/app/signals-v53middle/page.tsx
Normal file
580
frontend/app/signals-v53middle/page.tsx
Normal file
@ -0,0 +1,580 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { authFetch } from "@/lib/auth";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ComposedChart, Area, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
|
||||
ReferenceLine, CartesianGrid, Legend
|
||||
} from "recharts";
|
||||
|
||||
type Symbol = "BTC" | "ETH" | "XRP" | "SOL";
|
||||
|
||||
interface IndicatorRow {
|
||||
ts: number;
|
||||
cvd_fast: number;
|
||||
cvd_mid: number;
|
||||
cvd_day: number;
|
||||
atr_5m: number;
|
||||
vwap_30m: number;
|
||||
price: number;
|
||||
score: number;
|
||||
signal: string | null;
|
||||
}
|
||||
|
||||
interface LatestIndicator {
|
||||
ts: number;
|
||||
cvd_fast: number;
|
||||
cvd_mid: number;
|
||||
cvd_day: number;
|
||||
cvd_fast_slope: number;
|
||||
atr_5m: number;
|
||||
atr_percentile: number;
|
||||
vwap_30m: number;
|
||||
price: number;
|
||||
p95_qty: number;
|
||||
p99_qty: number;
|
||||
score: number;
|
||||
display_score?: number; // v53_btc: alt_score_ref（参考分）
|
||||
gate_passed?: boolean; // v53_btc顶层字段
|
||||
signal: string | null;
|
||||
tier?: "light" | "standard" | "heavy" | null;
|
||||
factors?: {
|
||||
track?: string;
|
||||
direction?: { score?: number; max?: number; cvd_resonance?: number; p99_flow?: number; accel_bonus?: number; accel_independent_score?: number };
|
||||
crowding?: { score?: number; max?: number; lsr_contrarian?: number; top_trader_position?: number };
|
||||
environment?: { score?: number; max?: number; obi_bonus?: number; oi_base?: number };
|
||||
auxiliary?: { score?: number; max?: number; coinbase_premium?: number };
|
||||
// BTC gate fields
|
||||
gate_passed?: boolean;
|
||||
block_reason?: string; // BTC用
|
||||
gate_block?: string; // ALT用
|
||||
obi_raw?: number;
|
||||
spot_perp_div?: number;
|
||||
whale_cvd_ratio?: number;
|
||||
atr_pct_price?: number;
|
||||
alt_score_ref?: number;
|
||||
} | null;
|
||||
}
|
||||
|
||||
const WINDOWS = [
|
||||
{ label: "1h", value: 60 },
|
||||
{ label: "4h", value: 240 },
|
||||
{ label: "12h", value: 720 },
|
||||
{ label: "24h", value: 1440 },
|
||||
];
|
||||
|
||||
function bjtStr(ms: number) {
|
||||
const d = new Date(ms + 8 * 3600 * 1000);
|
||||
return `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function bjtFull(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")}:${String(d.getUTCSeconds()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function fmt(v: number, decimals = 1): string {
|
||||
if (Math.abs(v) >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
|
||||
if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(1)}K`;
|
||||
return v.toFixed(decimals);
|
||||
}
|
||||
|
||||
function LayerScore({ label, score, max, colorClass }: { label: string; score: number; max: number; colorClass: string }) {
|
||||
const ratio = Math.max(0, Math.min((score / max) * 100, 100));
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] text-slate-500 w-6 shrink-0">{label}</span>
|
||||
<div className="flex-1 h-1.5 rounded-full bg-slate-100 overflow-hidden">
|
||||
<div className={`h-full ${colorClass}`} style={{ width: `${ratio}%` }} />
|
||||
</div>
|
||||
<span className="text-[10px] font-mono text-slate-600 w-8 text-right">{score}/{max}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── ALT Gate 状态卡片 ──────────────────────────────────────────
|
||||
|
||||
const ALT_GATE_THRESHOLDS: Record<string, { vol: string; obi: string; spd: string; whale: string }> = {
|
||||
ETH: { vol: "0.3%", obi: "0.35", spd: "0.5%", whale: "$50k" },
|
||||
XRP: { vol: "0.25%", obi: "0.40", spd: "0.6%", whale: "$30k" },
|
||||
SOL: { vol: "0.4%", obi: "0.45", spd: "0.8%", whale: "$20k" },
|
||||
};
|
||||
|
||||
function ALTGateCard({ symbol, factors }: { symbol: Symbol; factors: LatestIndicator["factors"] }) {
|
||||
if (!factors || symbol === "BTC") return null;
|
||||
const thresholds = ALT_GATE_THRESHOLDS[symbol] ?? ALT_GATE_THRESHOLDS["ETH"];
|
||||
const passed = factors.gate_passed ?? true;
|
||||
const blockReason = factors.gate_block;
|
||||
return (
|
||||
<div className={`rounded-xl border px-3 py-2 mt-2 ${passed ? "border-purple-200 bg-purple-50" : "border-red-200 bg-red-50"}`}>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<p className="text-[10px] font-semibold text-purple-800">🔒 {symbol} Gate-Control</p>
|
||||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded ${passed ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
|
||||
{passed ? "✅ Gate通过" : "❌ 否决"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">波动率</p>
|
||||
<p className="text-xs font-mono text-slate-800">{((factors.atr_pct_price ?? 0) * 100).toFixed(3)}%</p>
|
||||
<p className="text-[9px] text-slate-400">需 ≥{thresholds.vol}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">OBI</p>
|
||||
<p className={`text-xs font-mono ${(factors.obi_raw ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{((factors.obi_raw ?? 0) * 100).toFixed(2)}%
|
||||
</p>
|
||||
<p className="text-[9px] text-slate-400">否决±{thresholds.obi}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">期现背离</p>
|
||||
<p className={`text-xs font-mono ${(factors.spot_perp_div ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{((factors.spot_perp_div ?? 0) * 10000).toFixed(2)}bps
|
||||
</p>
|
||||
<p className="text-[9px] text-slate-400">否决±{thresholds.spd}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">鲸鱼阈值</p>
|
||||
<p className="text-xs font-mono text-slate-800">{thresholds.whale}</p>
|
||||
<p className="text-[9px] text-slate-400">大单门槛</p>
|
||||
</div>
|
||||
</div>
|
||||
{blockReason && (
|
||||
<p className="text-[10px] text-red-600 mt-1.5 bg-red-50 rounded px-2 py-1">
|
||||
否决原因: <span className="font-mono">{blockReason}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── BTC Gate 状态卡片 ───────────────────────────────────────────
|
||||
|
||||
function BTCGateCard({ factors }: { factors: LatestIndicator["factors"] }) {
|
||||
if (!factors) return null;
|
||||
return (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 mt-2">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<p className="text-[10px] font-semibold text-amber-800">⚡ BTC Gate-Control</p>
|
||||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded ${factors.gate_passed ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
|
||||
{factors.gate_passed ? "✅ Gate通过" : "❌ 否决"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">波动率</p>
|
||||
<p className="text-xs font-mono text-slate-800">{((factors.atr_pct_price ?? 0) * 100).toFixed(3)}%</p>
|
||||
<p className="text-[9px] text-slate-400">需 ≥0.2%</p>
|
||||
</div>
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">OBI</p>
|
||||
<p className={`text-xs font-mono ${(factors.obi_raw ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{((factors.obi_raw ?? 0) * 100).toFixed(2)}%
|
||||
</p>
|
||||
<p className="text-[9px] text-slate-400">盘口失衡</p>
|
||||
</div>
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">期现背离</p>
|
||||
<p className={`text-xs font-mono ${(factors.spot_perp_div ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{((factors.spot_perp_div ?? 0) * 10000).toFixed(2)}bps
|
||||
</p>
|
||||
<p className="text-[9px] text-slate-400">spot-perp</p>
|
||||
</div>
|
||||
<div className="bg-white rounded px-2 py-1">
|
||||
<p className="text-[10px] text-slate-400">巨鲸CVD</p>
|
||||
<p className={`text-xs font-mono ${(factors.whale_cvd_ratio ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{((factors.whale_cvd_ratio ?? 0) * 100).toFixed(2)}%
|
||||
</p>
|
||||
<p className="text-[9px] text-slate-400">>$100k</p>
|
||||
</div>
|
||||
</div>
|
||||
{factors.block_reason && (
|
||||
<p className="text-[10px] text-red-600 mt-1.5 bg-red-50 rounded px-2 py-1">
|
||||
否决原因: <span className="font-mono">{factors.block_reason}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 实时指标卡片 ────────────────────────────────────────────────
|
||||
|
||||
function IndicatorCards({ symbol }: { symbol: Symbol }) {
|
||||
const [data, setData] = useState<LatestIndicator | null>(null);
|
||||
const strategy = "v53_middle";
|
||||
|
||||
useEffect(() => {
|
||||
const fetch = async () => {
|
||||
try {
|
||||
const res = await authFetch(`/api/signals/latest?strategy=${strategy}`);
|
||||
if (!res.ok) return;
|
||||
const json = await res.json();
|
||||
setData(json[symbol] || null);
|
||||
} catch {}
|
||||
};
|
||||
fetch();
|
||||
const iv = setInterval(fetch, 5000);
|
||||
return () => clearInterval(iv);
|
||||
}, [symbol, strategy]);
|
||||
|
||||
if (!data) return <div className="text-center text-slate-400 text-sm py-4">等待指标数据...</div>;
|
||||
|
||||
const isBTC = symbol === "BTC";
|
||||
const priceVsVwap = data.price > data.vwap_30m ? "上方" : "下方";
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* CVD三轨 */}
|
||||
<div className="grid grid-cols-3 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">CVD_fast (5m实算★)</p>
|
||||
<p className={`font-mono font-bold text-sm ${data.cvd_fast >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{fmt(data.cvd_fast)}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
斜率: <span className={data.cvd_fast_slope >= 0 ? "text-emerald-600" : "text-red-500"}>
|
||||
{data.cvd_fast_slope >= 0 ? "↑" : "↓"}{fmt(Math.abs(data.cvd_fast_slope))}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||
<p className="text-[10px] text-slate-400">CVD_mid (30m实算★)</p>
|
||||
<p className={`font-mono font-bold text-sm ${data.cvd_mid >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{fmt(data.cvd_mid)}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400">{data.cvd_mid > 0 ? "多" : "空"}头占优</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||
<p className="text-[10px] text-slate-400">CVD共振</p>
|
||||
<p className={`font-mono font-bold text-sm ${data.cvd_fast >= 0 && data.cvd_mid >= 0 ? "text-emerald-600" : data.cvd_fast < 0 && data.cvd_mid < 0 ? "text-red-500" : "text-slate-400"}`}>
|
||||
{data.cvd_fast >= 0 && data.cvd_mid >= 0 ? "✅ 多头共振" : data.cvd_fast < 0 && data.cvd_mid < 0 ? "✅ 空头共振" : "⚠️ 分歧"}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400">V5.3核心信号</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ATR + VWAP */}
|
||||
<div className="grid grid-cols-4 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">ATR</p>
|
||||
<p className="font-mono font-semibold text-sm text-slate-800">${fmt(data.atr_5m, 2)}</p>
|
||||
<p className="text-[10px]">
|
||||
<span className={data.atr_percentile > 60 ? "text-amber-600 font-semibold" : "text-slate-400"}>
|
||||
{data.atr_percentile.toFixed(0)}%{data.atr_percentile > 60 ? "🔥" : ""}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||
<p className="text-[10px] text-slate-400">VWAP</p>
|
||||
<p className="font-mono font-semibold text-sm text-slate-800">${data.vwap_30m.toLocaleString("en-US", { maximumFractionDigits: 1 })}</p>
|
||||
<p className="text-[10px]">
|
||||
价格在<span className={data.price > data.vwap_30m ? "text-emerald-600" : "text-red-500"}>{priceVsVwap}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||
<p className="text-[10px] text-slate-400">P95</p>
|
||||
<p className="font-mono font-semibold text-sm text-slate-800">{data.p95_qty.toFixed(4)}</p>
|
||||
<p className="text-[10px] text-slate-400">大单阈值</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||
<p className="text-[10px] text-slate-400">P99</p>
|
||||
<p className="font-mono font-semibold text-sm text-amber-600">{data.p99_qty.toFixed(4)}</p>
|
||||
<p className="text-[10px] text-slate-400">超大单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 信号状态 */}
|
||||
<div className={`rounded-xl border px-3 py-2.5 ${
|
||||
data.signal === "LONG" ? "border-emerald-300 bg-emerald-50" :
|
||||
data.signal === "SHORT" ? "border-red-300 bg-red-50" :
|
||||
"border-slate-200 bg-slate-50"
|
||||
}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[10px] text-slate-500">
|
||||
{isBTC ? "BTC Gate-Control" : "ALT 四层评分"}
|
||||
{" · "}{"v53"}
|
||||
</p>
|
||||
<p className={`font-bold text-base ${
|
||||
data.signal === "LONG" ? "text-emerald-700" :
|
||||
data.signal === "SHORT" ? "text-red-600" :
|
||||
"text-slate-400"
|
||||
}`}>
|
||||
{data.signal === "LONG" ? "🟢 做多" : data.signal === "SHORT" ? "🔴 做空" : "⚪ 无信号"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{isBTC ? (
|
||||
<>
|
||||
<p className="font-mono font-bold text-lg text-slate-800">
|
||||
{data.display_score ?? data.factors?.alt_score_ref ?? data.score}/100
|
||||
<span className="text-[10px] font-normal text-slate-400 ml-1">参考分</span>
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-500">
|
||||
{(data.gate_passed ?? data.factors?.gate_passed) ? (data.tier === "standard" ? "标准" : "不开仓") : "Gate否决"}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="font-mono font-bold text-lg text-slate-800">{data.score}/100</p>
|
||||
<p className="text-[10px] text-slate-500">{data.tier === "heavy" ? "加仓" : data.tier === "standard" ? "标准" : "不开仓"}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 四层分数 — ALT和BTC都显示 */}
|
||||
<div className="mt-2 space-y-1">
|
||||
<LayerScore label="方向" score={data.factors?.direction?.score ?? 0} max={55} colorClass="bg-blue-600" />
|
||||
{data.factors?.direction?.accel_independent_score != null && data.factors.direction.accel_independent_score > 0 && (
|
||||
<p className="text-[9px] text-orange-600 pl-1">⚡ accel独立触发 +{data.factors.direction.accel_independent_score}</p>
|
||||
)}
|
||||
<LayerScore label="拥挤" score={data.factors?.crowding?.score ?? 0} max={25} colorClass="bg-violet-600" />
|
||||
<LayerScore label="环境" score={data.factors?.environment?.score ?? 0} max={15} colorClass="bg-emerald-600" />
|
||||
{(data.factors?.environment?.obi_bonus ?? 0) > 0 && (
|
||||
<p className="text-[9px] text-cyan-600 pl-1">📊 OBI正向 +{data.factors?.environment?.obi_bonus}</p>
|
||||
)}
|
||||
<LayerScore label="辅助" score={data.factors?.auxiliary?.score ?? 0} max={5} colorClass="bg-slate-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ALT Gate 卡片 */}
|
||||
{!isBTC && data.factors && <ALTGateCard symbol={symbol} factors={data.factors} />}
|
||||
|
||||
{/* BTC Gate 卡片 */}
|
||||
{isBTC && data.factors && <BTCGateCard factors={data.factors} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 信号历史 ────────────────────────────────────────────────────
|
||||
|
||||
interface SignalRecord {
|
||||
ts: number;
|
||||
score: number;
|
||||
signal: string;
|
||||
}
|
||||
|
||||
function SignalHistory({ symbol }: { symbol: Symbol }) {
|
||||
const [data, setData] = useState<SignalRecord[]>([]);
|
||||
const strategy = "v53_middle";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await authFetch(`/api/signals/signal-history?symbol=${symbol}&limit=20&strategy=${strategy}`);
|
||||
if (!res.ok) return;
|
||||
const json = await res.json();
|
||||
setData(json.data || []);
|
||||
} catch {}
|
||||
};
|
||||
fetchData();
|
||||
const iv = setInterval(fetchData, 15000);
|
||||
return () => clearInterval(iv);
|
||||
}, [symbol, strategy]);
|
||||
|
||||
if (data.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
||||
<div className="px-3 py-2 border-b border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800 text-xs">最近信号 ({strategy})</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100 max-h-48 overflow-y-auto">
|
||||
{data.map((s, i) => (
|
||||
<div key={i} className="px-3 py-1.5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-xs font-bold ${s.signal === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
||||
{s.signal === "LONG" ? "🟢 LONG" : "🔴 SHORT"}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400">{bjtFull(s.ts)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-mono text-xs text-slate-700">{s.score}</span>
|
||||
<span className={`text-[10px] px-1 py-0.5 rounded ${
|
||||
s.score >= 85 ? "bg-red-100 text-red-700" :
|
||||
s.score >= 75 ? "bg-blue-100 text-blue-700" :
|
||||
"bg-slate-100 text-slate-600"
|
||||
}`}>
|
||||
{s.score >= 85 ? "加仓" : s.score >= 75 ? "标准" : "不开仓"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── CVD图表 ────────────────────────────────────────────────────
|
||||
|
||||
function CVDChart({ symbol, minutes }: { symbol: Symbol; minutes: number }) {
|
||||
const [data, setData] = useState<IndicatorRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const strategy = "v53_middle";
|
||||
|
||||
const fetchData = useCallback(async (silent = false) => {
|
||||
try {
|
||||
const res = await authFetch(`/api/signals/indicators?symbol=${symbol}&minutes=${minutes}&strategy=${strategy}`);
|
||||
if (!res.ok) return;
|
||||
const json = await res.json();
|
||||
setData(json.data || []);
|
||||
if (!silent) setLoading(false);
|
||||
} catch {}
|
||||
}, [symbol, minutes, strategy]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetchData();
|
||||
const iv = setInterval(() => fetchData(true), 30000);
|
||||
return () => clearInterval(iv);
|
||||
}, [fetchData]);
|
||||
|
||||
const chartData = data.map(d => ({
|
||||
time: bjtStr(d.ts),
|
||||
fast: parseFloat(d.cvd_fast?.toFixed(2) || "0"),
|
||||
mid: parseFloat(d.cvd_mid?.toFixed(2) || "0"),
|
||||
price: d.price,
|
||||
}));
|
||||
|
||||
const prices = chartData.map(d => d.price).filter(v => v > 0);
|
||||
const pMin = prices.length ? Math.min(...prices) : 0;
|
||||
const pMax = prices.length ? Math.max(...prices) : 0;
|
||||
const pPad = (pMax - pMin) * 0.3 || pMax * 0.001;
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center h-48 text-slate-400 text-sm">加载指标数据...</div>;
|
||||
if (data.length === 0) return <div className="flex items-center justify-center h-48 text-slate-400 text-sm">暂无 V5.3 指标数据，signal-engine 需运行积累</div>;
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<ComposedChart data={chartData} margin={{ top: 4, right: 60, bottom: 0, left: 8 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
|
||||
<XAxis dataKey="time" tick={{ fill: "#94a3b8", fontSize: 10 }} tickLine={false} interval="preserveStartEnd" />
|
||||
<YAxis yAxisId="cvd" tick={{ fill: "#94a3b8", fontSize: 10 }} tickLine={false} axisLine={false} width={55} />
|
||||
<YAxis yAxisId="price" orientation="right" tick={{ fill: "#f59e0b", fontSize: 10 }} tickLine={false} axisLine={false} width={65}
|
||||
domain={[Math.floor(pMin - pPad), Math.ceil(pMax + pPad)]}
|
||||
tickFormatter={(v: number) => v >= 1000 ? `$${(v / 1000).toFixed(1)}k` : `$${v.toFixed(0)}`}
|
||||
/>
|
||||
<Tooltip
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
formatter={(v: any, name: any) => {
|
||||
if (name === "price") return [`$${Number(v).toLocaleString()}`, "币价"];
|
||||
if (name === "fast") return [fmt(Number(v)), "CVD_fast(5m实算)"];
|
||||
return [fmt(Number(v)), "CVD_mid(30m实算)"];
|
||||
}}
|
||||
contentStyle={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 8, fontSize: 11 }}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 11 }} />
|
||||
<ReferenceLine yAxisId="cvd" y={0} stroke="#94a3b8" strokeDasharray="4 2" />
|
||||
<Area yAxisId="cvd" type="monotone" dataKey="fast" name="fast" stroke="#2563eb" fill="#eff6ff" strokeWidth={1.5} dot={false} connectNulls />
|
||||
<Line yAxisId="cvd" type="monotone" dataKey="mid" name="mid" stroke="#7c3aed" strokeWidth={1.5} dot={false} connectNulls strokeDasharray="6 3" />
|
||||
<Line yAxisId="price" type="monotone" dataKey="price" name="price" stroke="#f59e0b" strokeWidth={1.5} dot={false} connectNulls strokeDasharray="4 2" />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 主页面 ──────────────────────────────────────────────────────
|
||||
|
||||
export default function SignalsV53Page() {
|
||||
const { isLoggedIn, loading } = useAuth();
|
||||
const [symbol, setSymbol] = useState<Symbol>("ETH");
|
||||
const [minutes, setMinutes] = useState(240);
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center h-64 text-slate-400">加载中...</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>
|
||||
<div className="flex gap-2">
|
||||
<Link href="/login" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">登录</Link>
|
||||
<Link href="/register" className="border border-slate-300 text-slate-600 px-4 py-2 rounded-lg text-sm">注册</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Fast 实验版标识条 */}
|
||||
<div className="rounded-lg bg-gradient-to-r from-orange-500 to-amber-400 px-3 py-1.5 flex items-center justify-between">
|
||||
<span className="text-white text-xs font-bold">🚀 V5.3 Middle — 实验变体 A/B对照</span>
|
||||
<div className="flex gap-2 text-white text-[10px] font-medium">
|
||||
<span className="bg-white/20 px-2 py-0.5 rounded">CVD 5m/30m</span>
|
||||
<span className="bg-white/20 px-2 py-0.5 rounded">OBI+加分</span>
|
||||
<span className="bg-white/20 px-2 py-0.5 rounded">accel独立触发</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-slate-900">🚀 信号引擎 V5.3 Middle</h1>
|
||||
<p className="text-slate-500 text-[10px]">
|
||||
CVD 5m/30m · OBI正向加分 · accel独立触发 · 实验变体 ·
|
||||
{symbol === "BTC" ? " 🔵 BTC轨（gate-control）" : " 🟣 ALT轨（ETH/XRP/SOL）"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{(["BTC", "ETH", "XRP", "SOL"] as Symbol[]).map(s => (
|
||||
<button key={s} onClick={() => setSymbol(s)}
|
||||
className={`px-3 py-1 rounded-lg border text-xs font-medium transition-colors ${symbol === s ? (s === "BTC" ? "bg-amber-500 text-white border-amber-500" : "bg-blue-600 text-white border-blue-600") : "border-slate-200 text-slate-600 hover:border-blue-400"}`}>
|
||||
{s}{s === "BTC" ? " 🔵" : ""}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<IndicatorCards symbol={symbol} />
|
||||
<SignalHistory symbol={symbol} />
|
||||
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
||||
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-800 text-xs">CVD三轨 + 币价</h3>
|
||||
<p className="text-[10px] text-slate-400">蓝=fast(DB存30m,实算5m★) · 紫=mid(DB存4h,实算30m★) · 橙=价格</p>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{WINDOWS.map(w => (
|
||||
<button key={w.value} onClick={() => setMinutes(w.value)}
|
||||
className={`px-2 py-1 rounded border text-xs transition-colors ${minutes === w.value ? "bg-slate-800 text-white border-slate-800" : "border-slate-200 text-slate-500 hover:border-slate-400"}`}>
|
||||
{w.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-2">
|
||||
<CVDChart symbol={symbol} minutes={minutes} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
||||
<div className="px-3 py-2 border-b border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800 text-xs">📖 V5.3 双轨信号说明</h3>
|
||||
</div>
|
||||
<div className="px-3 py-2 space-y-2 text-[11px] text-slate-600">
|
||||
<div className="p-2 bg-purple-50 rounded-lg border border-purple-100">
|
||||
<span className="font-bold text-purple-800">🟣 ALT轨（ETH/XRP/SOL）— 四层线性评分</span>
|
||||
<div className="mt-1 space-y-1">
|
||||
<p><span className="font-semibold">1️⃣ 方向层（55分）</span> — CVD共振30分（fast+mid同向）+ P99大单对齐20分 + 加速奖励5分。删除独立确认层，解决CVD双重计分问题。</p>
|
||||
<p><span className="font-semibold">2️⃣ 拥挤层（25分）</span> — LSR反向拥挤15分（散户过度拥挤=信号）+ 大户持仓方向10分。</p>
|
||||
<p><span className="font-semibold">3️⃣ 环境层（15分）</span> — OI变化率，新资金进场vs撤离，判断趋势持续性。</p>
|
||||
<p><span className="font-semibold">4️⃣ 辅助层（5分）</span> — Coinbase Premium，美系机构动向。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 bg-amber-50 rounded-lg border border-amber-100">
|
||||
<span className="font-bold text-amber-800">🔵 BTC轨 — Gate-Control逻辑</span>
|
||||
<div className="mt-1 space-y-1">
|
||||
<p><span className="font-semibold">波动率门控</span>：ATR/Price ≥ 0.2%，低波动行情拒绝开仓</p>
|
||||
<p><span className="font-semibold">OBI否决</span>：订单簿失衡超阈值且与信号方向冲突时否决（实时100ms）</p>
|
||||
<p><span className="font-semibold">期现背离否决</span>：spot与perp价差超阈值时否决（实时1s）</p>
|
||||
<p><span className="font-semibold">巨鲸CVD</span>：>$100k成交额净CVD，15分钟滚动窗口实时计算</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-1 border-t border-slate-100">
|
||||
<span className="text-blue-600 font-medium">档位：</span><75不开仓 · 75-84标准 · ≥85加仓 · 冷却10分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,21 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { authFetch } from "@/lib/auth";
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
PauseCircle,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
} from "lucide-react";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────
|
||||
// ─── Dynamic imports for each strategy's pages ───────────────────
|
||||
const SignalsV53 = dynamic(() => import("@/app/signals-v53/page"), { ssr: false });
|
||||
const SignalsV53Fast = dynamic(() => import("@/app/signals-v53fast/page"), { ssr: false });
|
||||
const SignalsV53Middle = dynamic(() => import("@/app/signals-v53middle/page"), { ssr: false });
|
||||
const PaperV53 = dynamic(() => import("@/app/paper-v53/page"), { ssr: false });
|
||||
const PaperV53Fast = dynamic(() => import("@/app/paper-v53fast/page"), { ssr: false });
|
||||
const PaperV53Middle = dynamic(() => import("@/app/paper-v53middle/page"), { ssr: false });
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────
|
||||
interface StrategySummary {
|
||||
id: string;
|
||||
display_name: string;
|
||||
@ -32,51 +38,17 @@ interface StrategySummary {
|
||||
open_positions: number;
|
||||
pnl_usdt_24h: number;
|
||||
pnl_r_24h: number;
|
||||
std_r: number;
|
||||
cvd_windows?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface Signal {
|
||||
ts: number;
|
||||
symbol: string;
|
||||
score: number;
|
||||
signal: string | null;
|
||||
price: number;
|
||||
factors: any;
|
||||
}
|
||||
|
||||
interface Trade {
|
||||
id: number;
|
||||
symbol: string;
|
||||
direction: string;
|
||||
score: number;
|
||||
entry_price: number;
|
||||
exit_price: number | null;
|
||||
tp1_price: number;
|
||||
tp2_price: number;
|
||||
sl_price: number;
|
||||
tp1_hit: boolean;
|
||||
pnl_r: number;
|
||||
risk_distance: number;
|
||||
entry_ts: number;
|
||||
exit_ts: number | null;
|
||||
status: string;
|
||||
}
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────
|
||||
|
||||
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 fmtDur(ms: number) {
|
||||
const s = Math.floor((Date.now() - ms) / 1000);
|
||||
const d = Math.floor(s / 86400);
|
||||
const h = Math.floor((s % 86400) / 3600);
|
||||
if (d > 0) return `${d}天${h}h`;
|
||||
const m = Math.floor((s % 3600) / 60);
|
||||
if (d > 0) return `${d}天${h}h`;
|
||||
if (h > 0) return `${h}h${m}m`;
|
||||
return `${m}m`;
|
||||
}
|
||||
@ -87,143 +59,22 @@ function StatusBadge({ status }: { status: string }) {
|
||||
return <span className="flex items-center gap-1 text-xs text-red-400"><AlertCircle size={12} />异常</span>;
|
||||
}
|
||||
|
||||
// ─── Sub-views ────────────────────────────────────────────────────
|
||||
|
||||
function SignalsView({ strategyId }: { strategyId: string }) {
|
||||
const [signals, setSignals] = useState<Signal[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetch_ = useCallback(async () => {
|
||||
try {
|
||||
const r = await authFetch(`/api/strategy-plaza/${strategyId}/signals?limit=40`);
|
||||
const d = await r.json();
|
||||
setSignals(d.signals || []);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [strategyId]);
|
||||
|
||||
useEffect(() => { fetch_(); const iv = setInterval(fetch_, 15000); return () => clearInterval(iv); }, [fetch_]);
|
||||
|
||||
if (loading) return <div className="text-gray-400 animate-pulse py-10 text-center">加载信号中...</div>;
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-gray-400 border-b border-gray-700 text-xs">
|
||||
<th className="py-2 px-3 text-left">时间(北京)</th>
|
||||
<th className="py-2 px-3 text-left">币种</th>
|
||||
<th className="py-2 px-3 text-right">价格</th>
|
||||
<th className="py-2 px-3 text-right">分数</th>
|
||||
<th className="py-2 px-3 text-center">信号</th>
|
||||
<th className="py-2 px-3 text-right">CVD 30m</th>
|
||||
<th className="py-2 px-3 text-right">CVD 4h</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{signals.map((s, i) => {
|
||||
const fc = s.factors && (typeof s.factors === "string" ? JSON.parse(s.factors) : s.factors);
|
||||
return (
|
||||
<tr key={i} className="border-b border-gray-800 hover:bg-gray-800/50">
|
||||
<td className="py-1.5 px-3 text-gray-400 text-xs">{bjt(s.ts)}</td>
|
||||
<td className="py-1.5 px-3 font-mono font-bold text-white">{s.symbol.replace("USDT", "")}</td>
|
||||
<td className="py-1.5 px-3 text-right text-gray-300">{s.price?.toLocaleString()}</td>
|
||||
<td className="py-1.5 px-3 text-right">
|
||||
<span className={`font-bold ${s.score >= 75 ? "text-emerald-400" : s.score >= 50 ? "text-yellow-400" : "text-gray-500"}`}>
|
||||
{s.score}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-1.5 px-3 text-center">
|
||||
{s.signal ? (
|
||||
<span className={`text-xs font-bold px-2 py-0.5 rounded ${s.signal === "LONG" ? "bg-emerald-900 text-emerald-400" : "bg-red-900 text-red-400"}`}>
|
||||
{s.signal}
|
||||
</span>
|
||||
) : <span className="text-gray-600 text-xs">—</span>}
|
||||
</td>
|
||||
<td className="py-1.5 px-3 text-right text-xs font-mono text-gray-400">{fc?.cvd_30m?.toFixed(0) ?? "—"}</td>
|
||||
<td className="py-1.5 px-3 text-right text-xs font-mono text-gray-400">{fc?.cvd_4h?.toFixed(0) ?? "—"}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{signals.length === 0 && <div className="text-center text-gray-500 py-10">暂无信号数据</div>}
|
||||
</div>
|
||||
);
|
||||
// ─── Content router ───────────────────────────────────────────────
|
||||
function SignalsContent({ strategyId }: { strategyId: string }) {
|
||||
if (strategyId === "v53") return <SignalsV53 />;
|
||||
if (strategyId === "v53_fast") return <SignalsV53Fast />;
|
||||
if (strategyId === "v53_middle") return <SignalsV53Middle />;
|
||||
return <div className="p-8 text-gray-400">未知策略: {strategyId}</div>;
|
||||
}
|
||||
|
||||
function TradesView({ strategyId }: { strategyId: string }) {
|
||||
const [trades, setTrades] = useState<Trade[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetch_ = useCallback(async () => {
|
||||
try {
|
||||
const r = await authFetch(`/api/strategy-plaza/${strategyId}/trades?limit=50`);
|
||||
const d = await r.json();
|
||||
setTrades(d.trades || []);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [strategyId]);
|
||||
|
||||
useEffect(() => { fetch_(); }, [fetch_]);
|
||||
|
||||
if (loading) return <div className="text-gray-400 animate-pulse py-10 text-center">加载交易记录中...</div>;
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-gray-400 border-b border-gray-700 text-xs">
|
||||
<th className="py-2 px-3 text-left">入场时间</th>
|
||||
<th className="py-2 px-3 text-left">出场时间</th>
|
||||
<th className="py-2 px-3 text-left">币种</th>
|
||||
<th className="py-2 px-3 text-center">方向</th>
|
||||
<th className="py-2 px-3 text-right">入场价</th>
|
||||
<th className="py-2 px-3 text-right">出场价</th>
|
||||
<th className="py-2 px-3 text-right">盈亏R</th>
|
||||
<th className="py-2 px-3 text-right">盈亏U</th>
|
||||
<th className="py-2 px-3 text-center">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trades.map((t) => {
|
||||
const isWin = t.pnl_r > 0;
|
||||
const isActive = !t.exit_ts;
|
||||
return (
|
||||
<tr key={t.id} className="border-b border-gray-800 hover:bg-gray-800/50">
|
||||
<td className="py-1.5 px-3 text-gray-400 text-xs">{bjt(t.entry_ts)}</td>
|
||||
<td className="py-1.5 px-3 text-gray-400 text-xs">{t.exit_ts ? bjt(t.exit_ts) : <span className="text-yellow-400">持仓中</span>}</td>
|
||||
<td className="py-1.5 px-3 font-mono font-bold text-white">{t.symbol.replace("USDT", "")}</td>
|
||||
<td className="py-1.5 px-3 text-center">
|
||||
<span className={`text-xs font-bold ${t.direction === "LONG" ? "text-emerald-400" : "text-red-400"}`}>
|
||||
{t.direction === "LONG" ? "多" : "空"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-1.5 px-3 text-right text-gray-300">{t.entry_price?.toLocaleString()}</td>
|
||||
<td className="py-1.5 px-3 text-right text-gray-300">{t.exit_price?.toLocaleString() ?? "—"}</td>
|
||||
<td className={`py-1.5 px-3 text-right font-bold ${isActive ? "text-yellow-400" : isWin ? "text-emerald-400" : "text-red-400"}`}>
|
||||
{isActive ? "活跃" : `${isWin ? "+" : ""}${t.pnl_r?.toFixed(3)}R`}
|
||||
</td>
|
||||
<td className={`py-1.5 px-3 text-right font-bold ${isActive ? "text-yellow-400" : isWin ? "text-emerald-400" : "text-red-400"}`}>
|
||||
{isActive ? "—" : `${isWin ? "+" : ""}${Math.round(t.pnl_r * 200)}U`}
|
||||
</td>
|
||||
<td className="py-1.5 px-3 text-center">
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${isActive ? "bg-yellow-900 text-yellow-400" : isWin ? "bg-emerald-900 text-emerald-400" : "bg-red-900 text-red-400"}`}>
|
||||
{isActive ? "活跃" : isWin ? "盈利" : "亏损"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{trades.length === 0 && <div className="text-center text-gray-500 py-10">暂无交易记录</div>}
|
||||
</div>
|
||||
);
|
||||
function PaperContent({ strategyId }: { strategyId: string }) {
|
||||
if (strategyId === "v53") return <PaperV53 />;
|
||||
if (strategyId === "v53_fast") return <PaperV53Fast />;
|
||||
if (strategyId === "v53_middle") return <PaperV53Middle />;
|
||||
return <div className="p-8 text-gray-400">未知策略: {strategyId}</div>;
|
||||
}
|
||||
|
||||
// ─── Main Page ────────────────────────────────────────────────────
|
||||
|
||||
export default function StrategyDetailPage() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
@ -237,90 +88,87 @@ export default function StrategyDetailPage() {
|
||||
const fetchSummary = useCallback(async () => {
|
||||
try {
|
||||
const r = await authFetch(`/api/strategy-plaza/${strategyId}/summary`);
|
||||
if (r.ok) { const d = await r.json(); setSummary(d); }
|
||||
if (r.ok) {
|
||||
const d = await r.json();
|
||||
setSummary(d);
|
||||
}
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [strategyId]);
|
||||
|
||||
useEffect(() => { fetchSummary(); const iv = setInterval(fetchSummary, 30000); return () => clearInterval(iv); }, [fetchSummary]);
|
||||
useEffect(() => {
|
||||
fetchSummary();
|
||||
const iv = setInterval(fetchSummary, 30000);
|
||||
return () => clearInterval(iv);
|
||||
}, [fetchSummary]);
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center min-h-screen"><div className="text-gray-400 animate-pulse">加载中...</div></div>;
|
||||
if (!summary) return <div className="flex items-center justify-center min-h-screen"><div className="text-red-400">策略不存在</div></div>;
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-gray-400 animate-pulse">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isProfit = summary.net_usdt >= 0;
|
||||
const isProfit = (summary?.net_usdt ?? 0) >= 0;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
{/* Back */}
|
||||
<Link href="/strategy-plaza" className="flex items-center gap-2 text-gray-400 hover:text-white text-sm mb-6 transition-colors">
|
||||
<ArrowLeft size={16} />
|
||||
返回策略广场
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 mb-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">{summary.display_name}</h1>
|
||||
{summary.description && <p className="text-gray-400 text-sm mt-1">{summary.description}</p>}
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<StatusBadge status={summary.status} />
|
||||
<span className="text-xs text-gray-500">
|
||||
<Clock size={10} className="inline mr-1" />
|
||||
运行 {fmtDur(summary.started_at)}
|
||||
</span>
|
||||
{summary.cvd_windows && (
|
||||
<span className="text-xs text-cyan-400 bg-cyan-900/30 px-2 py-0.5 rounded">CVD {summary.cvd_windows}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-3xl font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>
|
||||
{isProfit ? "+" : ""}{summary.net_usdt.toLocaleString()} U
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm">{summary.current_balance.toLocaleString()} / {summary.initial_balance.toLocaleString()} USDT</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: "胜率", value: `${summary.win_rate}%`, color: summary.win_rate >= 50 ? "text-emerald-400" : summary.win_rate >= 45 ? "text-yellow-400" : "text-red-400" },
|
||||
{ label: "净R", value: `${summary.net_r >= 0 ? "+" : ""}${summary.net_r}R`, color: summary.net_r >= 0 ? "text-emerald-400" : "text-red-400" },
|
||||
{ label: "24h盈亏", value: `${summary.pnl_usdt_24h >= 0 ? "+" : ""}${summary.pnl_usdt_24h}U`, color: summary.pnl_usdt_24h >= 0 ? "text-emerald-400" : "text-red-400" },
|
||||
{ label: "总交易数", value: summary.trade_count, color: "text-white" },
|
||||
].map(({ label, value, color }) => (
|
||||
<div key={label} className="bg-gray-800 rounded-lg p-3">
|
||||
<div className="text-xs text-gray-400 mb-1">{label}</div>
|
||||
<div className={`text-xl font-bold ${color}`}>{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-4 max-w-full">
|
||||
{/* Back + Strategy Header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Link href="/strategy-plaza" className="flex items-center gap-1 text-gray-400 hover:text-white text-sm transition-colors">
|
||||
<ArrowLeft size={16} />
|
||||
策略广场
|
||||
</Link>
|
||||
<span className="text-gray-600">/</span>
|
||||
<span className="text-white font-medium">{summary?.display_name ?? strategyId}</span>
|
||||
</div>
|
||||
|
||||
{/* Summary Bar */}
|
||||
{summary && (
|
||||
<div className="flex flex-wrap items-center gap-4 bg-gray-900 border border-gray-700 rounded-xl px-5 py-3 mb-4">
|
||||
<StatusBadge status={summary.status} />
|
||||
<span className="text-xs text-gray-400">
|
||||
<Clock size={10} className="inline mr-1" />运行 {fmtDur(summary.started_at)}
|
||||
</span>
|
||||
{summary.cvd_windows && (
|
||||
<span className="text-xs text-cyan-400 bg-cyan-900/30 px-2 py-0.5 rounded">CVD {summary.cvd_windows}</span>
|
||||
)}
|
||||
<span className="ml-auto flex items-center gap-4 text-sm">
|
||||
<span className="text-gray-400">胜率 <span className={summary.win_rate >= 50 ? "text-emerald-400 font-bold" : "text-yellow-400 font-bold"}>{summary.win_rate}%</span></span>
|
||||
<span className="text-gray-400">净R <span className={`font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>{summary.net_r >= 0 ? "+" : ""}{summary.net_r}R</span></span>
|
||||
<span className="text-gray-400">余额 <span className={`font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>{summary.current_balance.toLocaleString()} U</span></span>
|
||||
<span className="text-gray-400">24h <span className={`font-bold ${summary.pnl_usdt_24h >= 0 ? "text-emerald-400" : "text-red-400"}`}>{summary.pnl_usdt_24h >= 0 ? "+" : ""}{summary.pnl_usdt_24h} U</span></span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 mb-6">
|
||||
{["signals", "paper"].map((t) => (
|
||||
<div className="flex gap-2 mb-4">
|
||||
{[
|
||||
{ key: "signals", label: "📊 信号引擎" },
|
||||
{ key: "paper", label: "📈 模拟盘" },
|
||||
].map(({ key, label }) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => router.push(`/strategy-plaza/${strategyId}?tab=${t}`)}
|
||||
key={key}
|
||||
onClick={() => router.push(`/strategy-plaza/${strategyId}?tab=${key}`)}
|
||||
className={`px-5 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
tab === t
|
||||
tab === key
|
||||
? "bg-cyan-600 text-white"
|
||||
: "bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
{t === "signals" ? "📊 信号引擎" : "📈 模拟盘"}
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl overflow-hidden">
|
||||
{/* Content — direct render of existing pages */}
|
||||
<div>
|
||||
{tab === "signals" ? (
|
||||
<SignalsView strategyId={strategyId} />
|
||||
<SignalsContent strategyId={strategyId} />
|
||||
) : (
|
||||
<TradesView strategyId={strategyId} />
|
||||
<PaperContent strategyId={strategyId} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user