refactor: completely separate V5.1 and V5.2 pages
- /signals: V5.1 ONLY, 5-layer scoring, no FR/Liq - /signals-v52: V5.2 ONLY, 7-layer scoring with FR/Liq - /paper: V5.1 ONLY, no strategy tabs/badges - /paper-v52: V5.2 ONLY, with FR/Liq display - Sidebar: V5.1 and V5.2 separate sections - V5.2 weights: 40+18+5+12+15+5+5=100 (no more >100) - Zero cross-contamination between V5.1 and V5.2
This commit is contained in:
parent
01b1992643
commit
5849bf6522
77
SEPARATION_TASK.md
Normal file
77
SEPARATION_TASK.md
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
# V5.1/V5.2 Complete Separation Task
|
||||||
|
|
||||||
|
## CRITICAL: Boss is angry. Do this PERFECTLY.
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### 1. V5.1 Signal Engine Page - RESTORE to pre-V5.2 state
|
||||||
|
- `/signals` page should be V5.1 ONLY
|
||||||
|
- Title: "⚡ 信号引擎 V5.1"
|
||||||
|
- Remove ALL V5.2 comparison cards, V5.2 scores, FR/Liq bars
|
||||||
|
- Only show the original 5 layers: 方向(45) + 拥挤(20) + 环境(15) + 确认(15) + 辅助(5) = 100
|
||||||
|
- Do NOT show FR or Liq score bars on V5.1 page
|
||||||
|
|
||||||
|
### 2. V5.2 Signal Engine Page - NEW independent page
|
||||||
|
- Create `/signals-v52` page
|
||||||
|
- Title: "⚡ 信号引擎 V5.2"
|
||||||
|
- Show 7 layers: 方向(40) + 拥挤(20) + FR(5) + 环境(15) + 确认(15) + 清算(5) + 辅助(5) = 105 max BUT...
|
||||||
|
- **FIX SCORING**: Total must be 100 max. Redistribute weights:
|
||||||
|
- 方向: 35
|
||||||
|
- 拥挤: 20
|
||||||
|
- FR: 5 (within the 100)
|
||||||
|
- 环境: 15
|
||||||
|
- 确认: 15
|
||||||
|
- 清算: 5 (within the 100)
|
||||||
|
- 辅助: 5
|
||||||
|
- Total = 100
|
||||||
|
|
||||||
|
**WAIT** - Don't change backend scoring yet. Just create the page. The scoring fix needs boss approval.
|
||||||
|
|
||||||
|
### 3. V5.1 Paper Trading Page - RESTORE
|
||||||
|
- `/paper` should be V5.1 ONLY
|
||||||
|
- Remove strategy tabs, strategy badges, FR/Liq display
|
||||||
|
- Show ONLY v51_baseline trades
|
||||||
|
- Restore to clean original design
|
||||||
|
|
||||||
|
### 4. V5.2 Paper Trading Page - NEW independent page
|
||||||
|
- Create `/paper-v52` page
|
||||||
|
- Show ONLY v52_8signals trades
|
||||||
|
- Include FR/Liq scores, strategy badge
|
||||||
|
|
||||||
|
### 5. Sidebar Navigation
|
||||||
|
```
|
||||||
|
🏠 仪表盘
|
||||||
|
📊 成交流
|
||||||
|
|
||||||
|
── V5.1 ──
|
||||||
|
🎯 V5.1 信号引擎
|
||||||
|
📈 V5.1 模拟盘
|
||||||
|
|
||||||
|
── V5.2 ──
|
||||||
|
✨ V5.2 信号引擎
|
||||||
|
📈 V5.2 模拟盘
|
||||||
|
|
||||||
|
🖥️ 服务器
|
||||||
|
ℹ️ 说明
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Key Files
|
||||||
|
- `frontend/app/signals/page.tsx` — restore to V5.1 only
|
||||||
|
- `frontend/app/signals-v52/page.tsx` — NEW, copy and modify for V5.2
|
||||||
|
- `frontend/app/paper/page.tsx` — restore to V5.1 only (filter strategy=v51_baseline)
|
||||||
|
- `frontend/app/paper-v52/page.tsx` — NEW, V5.2 only (filter strategy=v52_8signals)
|
||||||
|
- `frontend/components/Sidebar.tsx` — update navigation
|
||||||
|
|
||||||
|
### 7. DO NOT TOUCH backend/signal_engine.py or backend/main.py
|
||||||
|
The backend is fine. Only frontend changes.
|
||||||
|
|
||||||
|
### 8. Test
|
||||||
|
```bash
|
||||||
|
cd frontend && npm run build
|
||||||
|
```
|
||||||
|
Must pass with 0 errors.
|
||||||
|
|
||||||
|
When done, run:
|
||||||
|
```bash
|
||||||
|
cd /root/Projects/arbitrage-engine && git add -A && git commit -m "refactor: completely separate V5.1 and V5.2 pages"
|
||||||
|
```
|
||||||
@ -4,12 +4,14 @@
|
|||||||
"threshold": 75,
|
"threshold": 75,
|
||||||
"weights": {
|
"weights": {
|
||||||
"direction": 40,
|
"direction": 40,
|
||||||
"crowding": 25,
|
"crowding": 18,
|
||||||
"environment": 15,
|
"funding_rate": 5,
|
||||||
"confirmation": 20,
|
"environment": 12,
|
||||||
|
"confirmation": 15,
|
||||||
|
"liquidation": 5,
|
||||||
"auxiliary": 5
|
"auxiliary": 5
|
||||||
},
|
},
|
||||||
"accel_bonus": 5,
|
"accel_bonus": 0,
|
||||||
"tp_sl": {
|
"tp_sl": {
|
||||||
"sl_multiplier": 3.0,
|
"sl_multiplier": 3.0,
|
||||||
"tp1_multiplier": 2.0,
|
"tp1_multiplier": 2.0,
|
||||||
|
|||||||
657
frontend/app/paper-v52/page.tsx
Normal file
657
frontend/app/paper-v52/page.tsx
Normal file
@ -0,0 +1,657 @@
|
|||||||
|
"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;
|
||||||
|
}
|
||||||
|
|
||||||
|
type StrategyFilter = "v52_8signals";
|
||||||
|
const PAPER_STRATEGY: StrategyFilter = "v52_8signals";
|
||||||
|
|
||||||
|
function strategyBadgeClass() {
|
||||||
|
return "bg-emerald-100 text-emerald-700 border border-emerald-200";
|
||||||
|
}
|
||||||
|
|
||||||
|
function strategyBadgeText() {
|
||||||
|
return "✨ V5.2";
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 控制面板(开关+配置)──────────────────────────────────────
|
||||||
|
|
||||||
|
function ControlPanel() {
|
||||||
|
const [config, setConfig] = useState<any>(null);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const f = async () => {
|
||||||
|
try {
|
||||||
|
const r = await authFetch("/api/paper/config");
|
||||||
|
if (r.ok) setConfig(await r.json());
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
f();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggle = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
const r = await authFetch("/api/paper/config", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ enabled: !config.enabled }),
|
||||||
|
});
|
||||||
|
if (r.ok) setConfig(await r.json().then((j) => j.config));
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!config) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`rounded-xl border-2 ${config.enabled ? "border-emerald-400 bg-emerald-50" : "border-slate-200 bg-white"} px-3 py-2 flex items-center justify-between`}>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={toggle}
|
||||||
|
disabled={saving}
|
||||||
|
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
||||||
|
config.enabled ? "bg-red-500 text-white hover:bg-red-600" : "bg-emerald-500 text-white hover:bg-emerald-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{saving ? "..." : config.enabled ? "⏹ 停止模拟盘" : "▶️ 启动模拟盘"}
|
||||||
|
</button>
|
||||||
|
<span className={`text-xs font-medium ${config.enabled ? "text-emerald-700" : "text-slate-500"}`}>
|
||||||
|
{config.enabled ? "🟢 运行中" : "⚪ 已停止"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4 text-[10px] text-slate-500">
|
||||||
|
<span>初始资金: ${config.initial_balance?.toLocaleString()}</span>
|
||||||
|
<span>单笔风险: {(config.risk_per_trade * 100).toFixed(0)}%</span>
|
||||||
|
<span>最大持仓: {config.max_positions}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 总览面板 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function SummaryCards({ strategy }: { strategy: StrategyFilter }) {
|
||||||
|
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);
|
||||||
|
}, [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-7 gap-1.5">
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">当前资金</p>
|
||||||
|
<p className={`font-mono font-bold text-base ${data.balance >= 10000 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
|
${data.balance?.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">总盈亏(R)</p>
|
||||||
|
<p className={`font-mono font-bold text-lg ${data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
|
{data.total_pnl >= 0 ? "+" : ""}
|
||||||
|
{data.total_pnl}R
|
||||||
|
</p>
|
||||||
|
<p className={`font-mono text-[10px] ${data.total_pnl_usdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>
|
||||||
|
{data.total_pnl_usdt >= 0 ? "+" : ""}${data.total_pnl_usdt}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">胜率</p>
|
||||||
|
<p className="font-mono font-bold text-lg text-slate-800">{data.win_rate}%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">总交易</p>
|
||||||
|
<p className="font-mono font-bold text-lg text-slate-800">{data.total_trades}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">持仓中</p>
|
||||||
|
<p className="font-mono font-bold text-lg text-blue-600">{data.active_positions}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">盈亏比(PF)</p>
|
||||||
|
<p className="font-mono font-bold text-lg text-slate-800">{data.profit_factor}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
|
<p className="text-[10px] text-slate-400">运行</p>
|
||||||
|
<p className="font-mono font-semibold text-sm text-slate-600">{data.start_time ? "运行中 ✅" : "等待首笔"}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 最新信号状态 ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const COINS = ["BTCUSDT", "ETHUSDT", "XRPUSDT", "SOLUSDT"];
|
||||||
|
|
||||||
|
function LatestSignals() {
|
||||||
|
const [signals, setSignals] = useState<Record<string, any>>({});
|
||||||
|
useEffect(() => {
|
||||||
|
const f = async () => {
|
||||||
|
for (const sym of COINS) {
|
||||||
|
try {
|
||||||
|
const r = await authFetch(`/api/signals/signal-history?symbol=${sym.replace("USDT", "")}&limit=1`);
|
||||||
|
if (r.ok) {
|
||||||
|
const j = await r.json();
|
||||||
|
if (j.data && 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">
|
||||||
|
<h3 className="font-semibold text-slate-800 text-xs">最新信号</h3>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-slate-50">
|
||||||
|
{COINS.map((sym) => {
|
||||||
|
const s = signals[sym];
|
||||||
|
const coin = sym.replace("USDT", "");
|
||||||
|
const ago = s?.ts ? Math.round((Date.now() - s.ts) / 60000) : null;
|
||||||
|
return (
|
||||||
|
<div key={sym} className="px-3 py-1.5 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-[10px] text-slate-500">{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>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 当前持仓 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function ActivePositions({ strategy }: { strategy: StrategyFilter }) {
|
||||||
|
const [positions, setPositions] = useState<any[]>([]);
|
||||||
|
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const f = async () => {
|
||||||
|
try {
|
||||||
|
const r = await authFetch(`/api/paper/positions?strategy=${strategy}`);
|
||||||
|
if (r.ok) {
|
||||||
|
const j = await r.json();
|
||||||
|
setPositions(j.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 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">
|
||||||
|
V5.2 暂无活跃持仓
|
||||||
|
</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 factors = parseFactors(p.score_factors);
|
||||||
|
const frScore = factors?.funding_rate?.score ?? 0;
|
||||||
|
const liqScore = factors?.liquidation?.score ?? 0;
|
||||||
|
const entry = p.entry_price || 0;
|
||||||
|
const atr = p.atr_at_entry || 1;
|
||||||
|
const riskDist = 2.0 * 0.7 * atr;
|
||||||
|
const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
|
||||||
|
const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
|
||||||
|
const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
|
||||||
|
const unrealUsdt = unrealR * 200;
|
||||||
|
return (
|
||||||
|
<div key={p.id} className="px-3 py-2 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 ${strategyBadgeClass()}`}>
|
||||||
|
{strategyBadgeText()}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-slate-500">评分{p.score} · {p.tier === "heavy" ? "加仓" : p.tier === "standard" ? "标准" : "轻仓"}</span>
|
||||||
|
<span className="text-[10px] font-semibold text-emerald-700">FR {frScore >= 0 ? "+" : ""}{frScore} · Liq {liqScore >= 0 ? "+" : ""}{liqScore}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
|
{unrealR >= 0 ? "+" : ""}
|
||||||
|
{unrealR.toFixed(2)}R
|
||||||
|
</span>
|
||||||
|
<span className={`font-mono text-[10px] ${unrealUsdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>
|
||||||
|
({unrealUsdt >= 0 ? "+" : ""}${unrealUsdt.toFixed(0)})
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-slate-400">{holdMin}m</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 mt-1 text-[10px] font-mono text-slate-600 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 grid grid-cols-2 gap-2 text-[10px] font-semibold">
|
||||||
|
<div className="text-[10px] text-emerald-600 mt-0.5">FR {frScore >= 0 ? "+" : ""}{frScore} · Liq {liqScore >= 0 ? "+" : ""}{liqScore}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 权益曲线 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function EquityCurve({ strategy }: { strategy: StrategyFilter }) {
|
||||||
|
const [data, setData] = useState<any[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const f = async () => {
|
||||||
|
try {
|
||||||
|
const r = await authFetch(`/api/paper/equity-curve?strategy=${strategy}`);
|
||||||
|
if (r.ok) {
|
||||||
|
const j = await r.json();
|
||||||
|
setData(j.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.2 暂无足够历史数据</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({ strategy }: { strategy: StrategyFilter }) {
|
||||||
|
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) {
|
||||||
|
const j = await r.json();
|
||||||
|
setTrades(j.data || []);
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
f();
|
||||||
|
const iv = setInterval(f, 10000);
|
||||||
|
return () => clearInterval(iv);
|
||||||
|
}, [symbol, result, 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 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 ${strategyBadgeClass()}`}>
|
||||||
|
{strategyBadgeText()} 视图
|
||||||
|
</span>
|
||||||
|
<span className="text-slate-300">|</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>
|
||||||
|
))}
|
||||||
|
</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-left font-medium">方向</th>
|
||||||
|
<th className="px-2 py-1.5 text-right font-medium">入场</th>
|
||||||
|
<th className="px-2 py-1.5 text-right font-medium">出场</th>
|
||||||
|
<th className="px-2 py-1.5 text-right font-medium">PnL(R)</th>
|
||||||
|
<th className="px-2 py-1.5 text-center font-medium">状态</th>
|
||||||
|
<th className="px-2 py-1.5 text-right font-medium">分数</th>
|
||||||
|
<th className="px-2 py-1.5 text-right font-medium">时间</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-50">
|
||||||
|
{trades.map((t: any) => {
|
||||||
|
const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0;
|
||||||
|
const factors = parseFactors(t.score_factors);
|
||||||
|
const frScore = factors?.funding_rate?.score ?? 0;
|
||||||
|
const liqScore = factors?.liquidation?.score ?? 0;
|
||||||
|
return (
|
||||||
|
<tr key={t.id} className="hover:bg-slate-50">
|
||||||
|
<td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT", "")}</td>
|
||||||
|
<td className="px-2 py-1.5 text-[10px]">
|
||||||
|
<span className={`px-1.5 py-0.5 rounded font-semibold ${strategyBadgeClass()}`}>{strategyBadgeText()}</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">
|
||||||
|
<div>{t.score}<span className="text-emerald-600 text-[9px] ml-0.5">(FR{frScore >= 0 ? "+" : ""}{frScore}/Liq{liqScore >= 0 ? "+" : ""}{liqScore})</span></div>
|
||||||
|
</td>
|
||||||
|
<td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 统计面板 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function StatsPanel({ strategy }: { strategy: StrategyFilter }) {
|
||||||
|
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);
|
||||||
|
}, [strategy]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTab("ALL");
|
||||||
|
}, [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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
|
||||||
|
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||||||
|
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
|
||||||
|
<h3 className="font-semibold text-slate-800 text-xs">详细统计</h3>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className={`px-2 py-0.5 rounded text-[10px] font-semibold ${strategyBadgeClass()}`}>{strategyBadgeText()}</span>
|
||||||
|
{tabs.map((t) => (
|
||||||
|
<button
|
||||||
|
key={t}
|
||||||
|
onClick={() => setTab(t)}
|
||||||
|
className={`px-2 py-0.5 rounded text-[10px] font-medium transition-colors ${tab === t ? "bg-slate-800 text-white" : "bg-slate-100 text-slate-500 hover:bg-slate-200"}`}
|
||||||
|
>
|
||||||
|
{t === "ALL" ? "总计" : t}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{st ? (
|
||||||
|
<div className="p-3 space-y-3">
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">胜率</span>
|
||||||
|
<p className="font-mono font-bold">{st.win_rate}%</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">盈亏比</span>
|
||||||
|
<p className="font-mono font-bold">{st.win_loss_ratio}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">平均盈利</span>
|
||||||
|
<p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">平均亏损</span>
|
||||||
|
<p className="font-mono font-bold text-red-500">-{st.avg_loss}R</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">最大回撤</span>
|
||||||
|
<p className="font-mono font-bold">{st.mdd}R</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">夏普比率</span>
|
||||||
|
<p className="font-mono font-bold">{st.sharpe}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">总盈亏</span>
|
||||||
|
<p className={`font-mono font-bold ${(st.total_pnl ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
|
{(st.total_pnl ?? 0) >= 0 ? "+" : ""}
|
||||||
|
{st.total_pnl ?? "-"}R
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">总笔数</span>
|
||||||
|
<p className="font-mono font-bold">{st.total ?? data.total}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">做多胜率</span>
|
||||||
|
<p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-400">做空胜率</span>
|
||||||
|
<p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p>
|
||||||
|
</div>
|
||||||
|
{tab === "ALL" && data.by_tier && Object.entries(data.by_tier).map(([t, v]: [string, any]) => (
|
||||||
|
<div key={t}>
|
||||||
|
<span className="text-slate-400">{t === "heavy" ? "加仓档" : t === "standard" ? "标准档" : "轻仓档"}</span>
|
||||||
|
<p className="font-mono">{v.win_rate}% ({v.total}笔)</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="p-3 text-xs text-slate-400">该币种暂无数据</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 主页面 ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function PaperTradingV52Page() {
|
||||||
|
const { isLoggedIn, loading } = useAuth();
|
||||||
|
const strategy: StrategyFilter = PAPER_STRATEGY;
|
||||||
|
|
||||||
|
if (loading) return <div className="text-center text-slate-400 py-8">加载中...</div>;
|
||||||
|
|
||||||
|
if (!isLoggedIn)
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center h-64 gap-4">
|
||||||
|
<div className="text-5xl">🔒</div>
|
||||||
|
<p className="text-slate-600 font-medium">请先登录查看模拟盘</p>
|
||||||
|
<Link href="/login" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
|
||||||
|
登录
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-slate-900">📈 V5.2 模拟盘</h1>
|
||||||
|
<p className="text-[10px] text-slate-500">仅展示 v52_8signals · 包含 FR / 清算评分与策略标签</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ControlPanel />
|
||||||
|
<SummaryCards strategy={strategy} />
|
||||||
|
<LatestSignals />
|
||||||
|
<ActivePositions strategy={strategy} />
|
||||||
|
<EquityCurve strategy={strategy} />
|
||||||
|
<TradeHistory strategy={strategy} />
|
||||||
|
<StatsPanel strategy={strategy} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,7 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
import { useState, useEffect, Suspense } from "react";
|
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { authFetch, useAuth } from "@/lib/auth";
|
import { authFetch, useAuth } from "@/lib/auth";
|
||||||
import { XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from "recharts";
|
import { XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from "recharts";
|
||||||
@ -17,53 +15,7 @@ function fmtPrice(p: number) {
|
|||||||
return p < 100 ? p.toFixed(4) : p.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
|
return p < 100 ? p.toFixed(4) : p.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseFactors(raw: any) {
|
const PAPER_STRATEGY = "v51_baseline";
|
||||||
if (!raw) return null;
|
|
||||||
if (typeof raw === "string") {
|
|
||||||
try {
|
|
||||||
return JSON.parse(raw);
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return raw;
|
|
||||||
}
|
|
||||||
|
|
||||||
type StrategyFilter = "all" | "v51_baseline" | "v52_8signals";
|
|
||||||
|
|
||||||
const STRATEGY_TABS: { value: StrategyFilter; label: string; hint: string }[] = [
|
|
||||||
{ value: "all", label: "全部", hint: "总览" },
|
|
||||||
{ value: "v51_baseline", label: "V5.1 模拟盘", hint: "经典五层" },
|
|
||||||
{ value: "v52_8signals", label: "V5.2 模拟盘", hint: "8信号 + FR/Liq" },
|
|
||||||
];
|
|
||||||
|
|
||||||
function normalizeStrategy(strategy: string | null | undefined): StrategyFilter {
|
|
||||||
if (strategy === "v52_8signals") return "v52_8signals";
|
|
||||||
if (strategy === "v51_baseline") return "v51_baseline";
|
|
||||||
return "v51_baseline";
|
|
||||||
}
|
|
||||||
|
|
||||||
function strategyName(strategy: string | null | undefined) {
|
|
||||||
const normalized = normalizeStrategy(strategy);
|
|
||||||
if (normalized === "v52_8signals") return "V5.2";
|
|
||||||
return "V5.1";
|
|
||||||
}
|
|
||||||
|
|
||||||
function strategyBadgeClass(strategy: string | null | undefined) {
|
|
||||||
return normalizeStrategy(strategy) === "v52_8signals"
|
|
||||||
? "bg-emerald-100 text-emerald-700 border border-emerald-200"
|
|
||||||
: "bg-slate-200 text-slate-700 border border-slate-300";
|
|
||||||
}
|
|
||||||
|
|
||||||
function strategyBadgeText(strategy: string | null | undefined) {
|
|
||||||
return normalizeStrategy(strategy) === "v52_8signals" ? "✨ V5.2" : "V5.1";
|
|
||||||
}
|
|
||||||
|
|
||||||
function strategyTabDescription(strategy: StrategyFilter) {
|
|
||||||
if (strategy === "all") return "全部策略合并视图";
|
|
||||||
if (strategy === "v52_8signals") return "仅展示 V5.2 数据(含 FR / Liq)";
|
|
||||||
return "仅展示 V5.1 数据";
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── 控制面板(开关+配置)──────────────────────────────────────
|
// ─── 控制面板(开关+配置)──────────────────────────────────────
|
||||||
|
|
||||||
@ -72,12 +24,7 @@ function ControlPanel() {
|
|||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const f = async () => {
|
const f = async () => { try { const r = await authFetch("/api/paper/config"); if (r.ok) setConfig(await r.json()); } catch {} };
|
||||||
try {
|
|
||||||
const r = await authFetch("/api/paper/config");
|
|
||||||
if (r.ok) setConfig(await r.json());
|
|
||||||
} catch {}
|
|
||||||
};
|
|
||||||
f();
|
f();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -89,11 +36,8 @@ function ControlPanel() {
|
|||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ enabled: !config.enabled }),
|
body: JSON.stringify({ enabled: !config.enabled }),
|
||||||
});
|
});
|
||||||
if (r.ok) setConfig(await r.json().then((j) => j.config));
|
if (r.ok) setConfig(await r.json().then(j => j.config));
|
||||||
} catch {
|
} catch {} finally { setSaving(false); }
|
||||||
} finally {
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!config) return null;
|
if (!config) return null;
|
||||||
@ -101,13 +45,12 @@ function ControlPanel() {
|
|||||||
return (
|
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={`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">
|
<div className="flex items-center gap-3">
|
||||||
<button
|
<button onClick={toggle} disabled={saving}
|
||||||
onClick={toggle}
|
|
||||||
disabled={saving}
|
|
||||||
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
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"
|
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>
|
</button>
|
||||||
<span className={`text-xs font-medium ${config.enabled ? "text-emerald-700" : "text-slate-500"}`}>
|
<span className={`text-xs font-medium ${config.enabled ? "text-emerald-700" : "text-slate-500"}`}>
|
||||||
@ -125,40 +68,23 @@ function ControlPanel() {
|
|||||||
|
|
||||||
// ─── 总览面板 ────────────────────────────────────────────────────
|
// ─── 总览面板 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
function SummaryCards({ strategy }: { strategy: StrategyFilter }) {
|
function SummaryCards() {
|
||||||
const [data, setData] = useState<any>(null);
|
const [data, setData] = useState<any>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const f = async () => {
|
const f = async () => { try { const r = await authFetch(`/api/paper/summary?strategy=${PAPER_STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||||||
try {
|
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||||||
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>;
|
if (!data) return <div className="text-center text-slate-400 text-sm py-4">加载中...</div>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-3 lg:grid-cols-7 gap-1.5">
|
<div className="grid grid-cols-3 lg:grid-cols-7 gap-1.5">
|
||||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
<p className="text-[10px] text-slate-400">当前资金</p>
|
<p className="text-[10px] text-slate-400">当前资金</p>
|
||||||
<p className={`font-mono font-bold text-base ${data.balance >= 10000 ? "text-emerald-600" : "text-red-500"}`}>
|
<p className={`font-mono font-bold text-base ${data.balance >= 10000 ? "text-emerald-600" : "text-red-500"}`}>${data.balance?.toLocaleString()}</p>
|
||||||
${data.balance?.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
<p className="text-[10px] text-slate-400">总盈亏(R)</p>
|
<p className="text-[10px] text-slate-400">总盈亏(R)</p>
|
||||||
<p className={`font-mono font-bold text-lg ${data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
<p className={`font-mono font-bold text-lg ${data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500"}`}>{data.total_pnl >= 0 ? "+" : ""}{data.total_pnl}R</p>
|
||||||
{data.total_pnl >= 0 ? "+" : ""}
|
<p className={`font-mono text-[10px] ${data.total_pnl_usdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>{data.total_pnl_usdt >= 0 ? "+" : ""}${data.total_pnl_usdt}</p>
|
||||||
{data.total_pnl}R
|
|
||||||
</p>
|
|
||||||
<p className={`font-mono text-[10px] ${data.total_pnl_usdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>
|
|
||||||
{data.total_pnl_usdt >= 0 ? "+" : ""}${data.total_pnl_usdt}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
|
||||||
<p className="text-[10px] text-slate-400">胜率</p>
|
<p className="text-[10px] text-slate-400">胜率</p>
|
||||||
@ -198,15 +124,13 @@ function LatestSignals() {
|
|||||||
if (r.ok) {
|
if (r.ok) {
|
||||||
const j = await r.json();
|
const j = await r.json();
|
||||||
if (j.data && j.data.length > 0) {
|
if (j.data && j.data.length > 0) {
|
||||||
setSignals((prev) => ({ ...prev, [sym]: j.data[0] }));
|
setSignals(prev => ({ ...prev, [sym]: j.data[0] }));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
f();
|
f(); const iv = setInterval(f, 15000); return () => clearInterval(iv);
|
||||||
const iv = setInterval(f, 15000);
|
|
||||||
return () => clearInterval(iv);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -215,7 +139,7 @@ function LatestSignals() {
|
|||||||
<h3 className="font-semibold text-slate-800 text-xs">最新信号</h3>
|
<h3 className="font-semibold text-slate-800 text-xs">最新信号</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="divide-y divide-slate-50">
|
<div className="divide-y divide-slate-50">
|
||||||
{COINS.map((sym) => {
|
{COINS.map(sym => {
|
||||||
const s = signals[sym];
|
const s = signals[sym];
|
||||||
const coin = sym.replace("USDT", "");
|
const coin = sym.replace("USDT", "");
|
||||||
const ago = s?.ts ? Math.round((Date.now() - s.ts) / 60000) : null;
|
const ago = s?.ts ? Math.round((Date.now() - s.ts) / 60000) : null;
|
||||||
@ -245,27 +169,19 @@ function LatestSignals() {
|
|||||||
|
|
||||||
// ─── 当前持仓 ────────────────────────────────────────────────────
|
// ─── 当前持仓 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
function ActivePositions({ strategy }: { strategy: StrategyFilter }) {
|
function ActivePositions() {
|
||||||
const [positions, setPositions] = useState<any[]>([]);
|
const [positions, setPositions] = useState<any[]>([]);
|
||||||
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
|
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
|
||||||
|
|
||||||
|
// 从API获取持仓列表(10秒刷新)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const f = async () => {
|
const f = async () => { try { const r = await authFetch(`/api/paper/positions?strategy=${PAPER_STRATEGY}`); if (r.ok) { const j = await r.json(); setPositions(j.data || []); } } catch {} };
|
||||||
try {
|
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||||||
const r = await authFetch(`/api/paper/positions?strategy=${strategy}`);
|
}, []);
|
||||||
if (r.ok) {
|
|
||||||
const j = await r.json();
|
|
||||||
setPositions(j.data || []);
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
};
|
|
||||||
f();
|
|
||||||
const iv = setInterval(f, 10000);
|
|
||||||
return () => clearInterval(iv);
|
|
||||||
}, [strategy]);
|
|
||||||
|
|
||||||
|
// WebSocket实时价格(aggTrade逐笔成交)
|
||||||
useEffect(() => {
|
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}`);
|
const ws = new WebSocket(`wss://fstream.binance.com/stream?streams=${streams}`);
|
||||||
ws.onmessage = (e) => {
|
ws.onmessage = (e) => {
|
||||||
try {
|
try {
|
||||||
@ -273,62 +189,49 @@ function ActivePositions({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
if (msg.data) {
|
if (msg.data) {
|
||||||
const sym = msg.data.s;
|
const sym = msg.data.s;
|
||||||
const price = parseFloat(msg.data.p);
|
const price = parseFloat(msg.data.p);
|
||||||
if (sym && price > 0) setWsPrices((prev) => ({ ...prev, [sym]: price }));
|
if (sym && price > 0) setWsPrices(prev => ({ ...prev, [sym]: price }));
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch {}
|
||||||
};
|
};
|
||||||
return () => ws.close();
|
return () => ws.close();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (positions.length === 0)
|
if (positions.length === 0) return (
|
||||||
return (
|
|
||||||
<div className="rounded-xl border border-slate-200 bg-white px-3 py-4 text-center text-slate-400 text-sm">
|
<div className="rounded-xl border border-slate-200 bg-white px-3 py-4 text-center text-slate-400 text-sm">
|
||||||
{strategy === "all" ? "暂无活跃持仓" : `${strategyName(strategy)} 暂无活跃持仓`}
|
暂无活跃持仓
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||||||
<div className="px-3 py-2 border-b border-slate-100">
|
<div className="px-3 py-2 border-b border-slate-100">
|
||||||
<h3 className="font-semibold text-slate-800 text-xs">
|
<h3 className="font-semibold text-slate-800 text-xs">当前持仓 <span className="text-[10px] text-emerald-500 font-normal">● 实时</span></h3>
|
||||||
当前持仓 <span className="text-[10px] text-emerald-500 font-normal">● 实时</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="divide-y divide-slate-100">
|
<div className="divide-y divide-slate-100">
|
||||||
{positions.map((p: any) => {
|
{positions.map((p: any) => {
|
||||||
const sym = p.symbol?.replace("USDT", "") || "";
|
const sym = p.symbol?.replace("USDT", "") || "";
|
||||||
const holdMin = Math.round((Date.now() - p.entry_ts) / 60000);
|
const holdMin = Math.round((Date.now() - p.entry_ts) / 60000);
|
||||||
const currentPrice = wsPrices[p.symbol] || p.current_price || 0;
|
const currentPrice = wsPrices[p.symbol] || p.current_price || 0;
|
||||||
const factors = parseFactors(p.score_factors);
|
|
||||||
const frScore = factors?.funding_rate?.score ?? 0;
|
|
||||||
const liqScore = factors?.liquidation?.score ?? 0;
|
|
||||||
const entry = p.entry_price || 0;
|
const entry = p.entry_price || 0;
|
||||||
const atr = p.atr_at_entry || 1;
|
const atr = p.atr_at_entry || 1;
|
||||||
const riskDist = 2.0 * 0.7 * atr;
|
const riskDist = 2.0 * 0.7 * atr;
|
||||||
|
// TP1触发后只剩半仓:0.5×TP1锁定 + 0.5×当前浮盈
|
||||||
const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
|
const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
|
||||||
const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
|
const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
|
||||||
const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
|
const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
|
||||||
const unrealUsdt = unrealR * 200;
|
const unrealUsdt = unrealR * 200;
|
||||||
const isV52 = normalizeStrategy(p.strategy) === "v52_8signals";
|
|
||||||
return (
|
return (
|
||||||
<div key={p.id} className={`px-3 py-2 ${isV52 ? "bg-emerald-50/60" : "bg-slate-50/70"}`}>
|
<div key={p.id} className="px-3 py-2">
|
||||||
<div className="flex items-center justify-between gap-2">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2">
|
||||||
<span className={`text-xs font-bold ${p.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
<span className={`text-xs font-bold ${p.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
{p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction}
|
{p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction}
|
||||||
</span>
|
</span>
|
||||||
<span className={`px-1.5 py-0.5 rounded text-[10px] font-semibold ${strategyBadgeClass(p.strategy)}`}>
|
<span className="text-[10px] text-slate-400">评分{p.score} · {p.tier === "heavy" ? "加仓" : p.tier === "standard" ? "标准" : "轻仓"}</span>
|
||||||
{strategyBadgeText(p.strategy)}
|
|
||||||
</span>
|
|
||||||
<span className="text-[10px] text-slate-500">评分{p.score} · {p.tier === "heavy" ? "加仓" : p.tier === "standard" ? "标准" : "轻仓"}</span>
|
|
||||||
{isV52 && (
|
|
||||||
<span className="text-[10px] font-semibold text-emerald-700">FR {frScore >= 0 ? "+" : ""}{frScore} · Liq {liqScore >= 0 ? "+" : ""}{liqScore}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
<span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
{unrealR >= 0 ? "+" : ""}
|
{unrealR >= 0 ? "+" : ""}{unrealR.toFixed(2)}R
|
||||||
{unrealR.toFixed(2)}R
|
|
||||||
</span>
|
</span>
|
||||||
<span className={`font-mono text-[10px] ${unrealUsdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>
|
<span className={`font-mono text-[10px] ${unrealUsdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>
|
||||||
({unrealUsdt >= 0 ? "+" : ""}${unrealUsdt.toFixed(0)})
|
({unrealUsdt >= 0 ? "+" : ""}${unrealUsdt.toFixed(0)})
|
||||||
@ -336,19 +239,13 @@ function ActivePositions({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
<span className="text-[10px] text-slate-400">{holdMin}m</span>
|
<span className="text-[10px] text-slate-400">{holdMin}m</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3 mt-1 text-[10px] font-mono text-slate-600 flex-wrap">
|
<div className="flex gap-3 mt-1 text-[10px] font-mono text-slate-600">
|
||||||
<span>入场: ${fmtPrice(p.entry_price)}</span>
|
<span>入场: ${fmtPrice(p.entry_price)}</span>
|
||||||
<span className="text-blue-600">现价: ${currentPrice ? fmtPrice(currentPrice) : "-"}</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">TP1: ${fmtPrice(p.tp1_price)}{p.tp1_hit ? " ✅" : ""}</span>
|
||||||
<span className="text-emerald-600">TP2: ${fmtPrice(p.tp2_price)}</span>
|
<span className="text-emerald-600">TP2: ${fmtPrice(p.tp2_price)}</span>
|
||||||
<span className="text-red-500">SL: ${fmtPrice(p.sl_price)}</span>
|
<span className="text-red-500">SL: ${fmtPrice(p.sl_price)}</span>
|
||||||
{!isV52 && <span className="text-slate-400">FR/Liq 仅 V5.2 显示</span>}
|
|
||||||
</div>
|
</div>
|
||||||
{isV52 && (
|
|
||||||
<div className="mt-1 grid grid-cols-2 gap-2 text-[10px] font-semibold">
|
|
||||||
{isV52 && <div className="text-[10px] text-emerald-600 mt-0.5">FR {frScore >= 0 ? "+" : ""}{frScore} · Liq {liqScore >= 0 ? "+" : ""}{liqScore}</div>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@ -359,32 +256,20 @@ function ActivePositions({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
|
|
||||||
// ─── 权益曲线 ────────────────────────────────────────────────────
|
// ─── 权益曲线 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
function EquityCurve({ strategy }: { strategy: StrategyFilter }) {
|
function EquityCurve() {
|
||||||
const [data, setData] = useState<any[]>([]);
|
const [data, setData] = useState<any[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const f = async () => {
|
const f = async () => { try { const r = await authFetch(`/api/paper/equity-curve?strategy=${PAPER_STRATEGY}`); if (r.ok) { const j = await r.json(); setData(j.data || []); } } catch {} };
|
||||||
try {
|
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||||||
const r = await authFetch(`/api/paper/equity-curve?strategy=${strategy}`);
|
}, []);
|
||||||
if (r.ok) {
|
|
||||||
const j = await r.json();
|
if (data.length < 2) return null;
|
||||||
setData(j.data || []);
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
};
|
|
||||||
f();
|
|
||||||
const iv = setInterval(f, 30000);
|
|
||||||
return () => clearInterval(iv);
|
|
||||||
}, [strategy]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||||||
<div className="px-3 py-2 border-b border-slate-100">
|
<div className="px-3 py-2 border-b border-slate-100">
|
||||||
<h3 className="font-semibold text-slate-800 text-xs">权益曲线 (累计PnL)</h3>
|
<h3 className="font-semibold text-slate-800 text-xs">权益曲线 (累计PnL)</h3>
|
||||||
</div>
|
</div>
|
||||||
{data.length < 2 ? (
|
|
||||||
<div className="px-3 py-6 text-center text-xs text-slate-400">{strategy === "all" ? "暂无足够历史数据" : `${strategyName(strategy)} 暂无足够历史数据`}</div>
|
|
||||||
) : (
|
|
||||||
<div className="p-2" style={{ height: 200 }}>
|
<div className="p-2" style={{ height: 200 }}>
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
<AreaChart data={data}>
|
<AreaChart data={data}>
|
||||||
@ -396,7 +281,6 @@ function EquityCurve({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
</AreaChart>
|
</AreaChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -406,7 +290,7 @@ function EquityCurve({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL";
|
type FilterSymbol = "all" | "BTC" | "ETH" | "XRP" | "SOL";
|
||||||
type FilterResult = "all" | "win" | "loss";
|
type FilterResult = "all" | "win" | "loss";
|
||||||
|
|
||||||
function TradeHistory({ strategy }: { strategy: StrategyFilter }) {
|
function TradeHistory() {
|
||||||
const [trades, setTrades] = useState<any[]>([]);
|
const [trades, setTrades] = useState<any[]>([]);
|
||||||
const [symbol, setSymbol] = useState<FilterSymbol>("all");
|
const [symbol, setSymbol] = useState<FilterSymbol>("all");
|
||||||
const [result, setResult] = useState<FilterResult>("all");
|
const [result, setResult] = useState<FilterResult>("all");
|
||||||
@ -414,43 +298,28 @@ function TradeHistory({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const f = async () => {
|
const f = async () => {
|
||||||
try {
|
try {
|
||||||
const r = await authFetch(`/api/paper/trades?symbol=${symbol}&result=${result}&strategy=${strategy}&limit=50`);
|
const r = await authFetch(`/api/paper/trades?symbol=${symbol}&result=${result}&strategy=${PAPER_STRATEGY}&limit=50`);
|
||||||
if (r.ok) {
|
if (r.ok) { const j = await r.json(); setTrades(j.data || []); }
|
||||||
const j = await r.json();
|
|
||||||
setTrades(j.data || []);
|
|
||||||
}
|
|
||||||
} catch {}
|
} catch {}
|
||||||
};
|
};
|
||||||
f();
|
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
|
||||||
const iv = setInterval(f, 10000);
|
}, [symbol, result]);
|
||||||
return () => clearInterval(iv);
|
|
||||||
}, [symbol, result, strategy]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
||||||
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
|
<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>
|
<h3 className="font-semibold text-slate-800 text-xs">历史交易</h3>
|
||||||
<div className="flex items-center gap-1 flex-wrap">
|
<div className="flex gap-1">
|
||||||
<span className={`px-2 py-0.5 rounded text-[10px] font-semibold ${strategy === "all" ? "bg-slate-100 text-slate-600" : strategyBadgeClass(strategy)}`}>
|
{(["all", "BTC", "ETH", "XRP", "SOL"] as FilterSymbol[]).map(s => (
|
||||||
{strategy === "all" ? "全部策略" : `${strategyBadgeText(strategy)} 视图`}
|
<button key={s} onClick={() => setSymbol(s)}
|
||||||
</span>
|
className={`px-2 py-0.5 rounded text-[10px] ${symbol === s ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>
|
||||||
<span className="text-slate-300">|</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}
|
{s === "all" ? "全部" : s}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
<span className="text-slate-300">|</span>
|
<span className="text-slate-300">|</span>
|
||||||
{(["all", "win", "loss"] as FilterResult[]).map((r) => (
|
{(["all", "win", "loss"] as FilterResult[]).map(r => (
|
||||||
<button
|
<button key={r} onClick={() => setResult(r)}
|
||||||
key={r}
|
className={`px-2 py-0.5 rounded text-[10px] ${result === r ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>
|
||||||
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" ? "盈利" : "亏损"}
|
{r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
@ -464,7 +333,6 @@ function TradeHistory({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
<thead className="bg-slate-50 sticky top-0">
|
<thead className="bg-slate-50 sticky top-0">
|
||||||
<tr className="text-slate-500">
|
<tr className="text-slate-500">
|
||||||
<th className="px-2 py-1.5 text-left font-medium">币种</th>
|
<th className="px-2 py-1.5 text-left font-medium">币种</th>
|
||||||
<th className="px-2 py-1.5 text-left font-medium">策略</th>
|
|
||||||
<th className="px-2 py-1.5 text-left font-medium">方向</th>
|
<th className="px-2 py-1.5 text-left font-medium">方向</th>
|
||||||
<th className="px-2 py-1.5 text-right font-medium">入场</th>
|
<th className="px-2 py-1.5 text-right font-medium">入场</th>
|
||||||
<th className="px-2 py-1.5 text-right font-medium">出场</th>
|
<th className="px-2 py-1.5 text-right font-medium">出场</th>
|
||||||
@ -477,55 +345,29 @@ function TradeHistory({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
<tbody className="divide-y divide-slate-50">
|
<tbody className="divide-y divide-slate-50">
|
||||||
{trades.map((t: any) => {
|
{trades.map((t: any) => {
|
||||||
const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0;
|
const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0;
|
||||||
const factors = parseFactors(t.score_factors);
|
|
||||||
const frScore = factors?.funding_rate?.score ?? 0;
|
|
||||||
const liqScore = factors?.liquidation?.score ?? 0;
|
|
||||||
const isV52 = normalizeStrategy(t.strategy) === "v52_8signals";
|
|
||||||
return (
|
return (
|
||||||
<tr key={t.id} className="hover:bg-slate-50">
|
<tr key={t.id} className="hover:bg-slate-50">
|
||||||
<td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT", "")}</td>
|
<td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT", "")}</td>
|
||||||
<td className="px-2 py-1.5 text-[10px]">
|
|
||||||
<span className={`px-1.5 py-0.5 rounded font-semibold ${strategyBadgeClass(t.strategy)}`}>{strategyBadgeText(t.strategy)}</span>
|
|
||||||
</td>
|
|
||||||
<td className={`px-2 py-1.5 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
<td className={`px-2 py-1.5 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
{t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}
|
{t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}
|
||||||
</td>
|
</td>
|
||||||
<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">{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">{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"}`}>
|
<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 > 0 ? "+" : ""}{t.pnl_r?.toFixed(2)}
|
||||||
{t.pnl_r?.toFixed(2)}
|
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2 py-1.5 text-center">
|
<td className="px-2 py-1.5 text-center">
|
||||||
<span
|
<span className={`px-1 py-0.5 rounded text-[9px] ${
|
||||||
className={`px-1 py-0.5 rounded text-[9px] ${
|
t.status === "tp" ? "bg-emerald-100 text-emerald-700" :
|
||||||
t.status === "tp"
|
t.status === "sl" ? "bg-red-100 text-red-700" :
|
||||||
? "bg-emerald-100 text-emerald-700"
|
t.status === "sl_be" ? "bg-amber-100 text-amber-700" :
|
||||||
: t.status === "sl"
|
t.status === "signal_flip" ? "bg-purple-100 text-purple-700" :
|
||||||
? "bg-red-100 text-red-700"
|
"bg-slate-100 text-slate-600"
|
||||||
: t.status === "sl_be"
|
}`}>
|
||||||
? "bg-amber-100 text-amber-700"
|
{t.status === "tp" ? "止盈" : t.status === "sl" ? "止损" : t.status === "sl_be" ? "保本" : t.status === "timeout" ? "超时" : t.status === "signal_flip" ? "翻转" : t.status}
|
||||||
: 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>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2 py-1.5 text-right font-mono">
|
<td className="px-2 py-1.5 text-right font-mono">{t.score}</td>
|
||||||
<div>{t.score}{isV52 ? <span className="text-emerald-600 text-[9px] ml-0.5">(FR{frScore >= 0 ? "+" : ""}{frScore}/Liq{liqScore >= 0 ? "+" : ""}{liqScore})</span> : ""}</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
|
<td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
@ -540,36 +382,15 @@ function TradeHistory({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
|
|
||||||
// ─── 统计面板 ────────────────────────────────────────────────────
|
// ─── 统计面板 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
function StatsPanel({ strategy }: { strategy: StrategyFilter }) {
|
function StatsPanel() {
|
||||||
const [data, setData] = useState<any>(null);
|
const [data, setData] = useState<any>(null);
|
||||||
const [tab, setTab] = useState("ALL");
|
const [tab, setTab] = useState("ALL");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const f = async () => {
|
const f = async () => { try { const r = await authFetch(`/api/paper/stats?strategy=${PAPER_STRATEGY}`); if (r.ok) setData(await r.json()); } catch {} };
|
||||||
try {
|
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
|
||||||
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]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
if (!data || data.error) return null;
|
||||||
setTab("ALL");
|
|
||||||
}, [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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
|
const tabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
|
||||||
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
|
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
|
||||||
@ -578,73 +399,30 @@ function StatsPanel({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
|
<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">
|
<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>
|
<h3 className="font-semibold text-slate-800 text-xs">详细统计</h3>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex gap-1">
|
||||||
{strategy !== "all" && <span className={`px-2 py-0.5 rounded text-[10px] font-semibold ${strategyBadgeClass(strategy)}`}>{strategyBadgeText(strategy)}</span>}
|
{tabs.map(t => (
|
||||||
{tabs.map((t) => (
|
<button key={t} onClick={() => setTab(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"}`}
|
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>
|
||||||
{t === "ALL" ? "总计" : t}
|
|
||||||
</button>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{st ? (
|
{st ? (
|
||||||
<div className="p-3 space-y-3">
|
<div className="p-3 grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
|
||||||
<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>
|
<div><span className="text-slate-400">盈亏比</span><p className="font-mono font-bold">{st.win_loss_ratio}</p></div>
|
||||||
<span className="text-slate-400">胜率</span>
|
<div><span className="text-slate-400">平均盈利</span><p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p></div>
|
||||||
<p className="font-mono font-bold">{st.win_rate}%</p>
|
<div><span className="text-slate-400">平均亏损</span><p className="font-mono font-bold text-red-500">-{st.avg_loss}R</p></div>
|
||||||
</div>
|
<div><span className="text-slate-400">最大回撤</span><p className="font-mono font-bold">{st.mdd}R</p></div>
|
||||||
<div>
|
<div><span className="text-slate-400">夏普比率</span><p className="font-mono font-bold">{st.sharpe}</p></div>
|
||||||
<span className="text-slate-400">盈亏比</span>
|
<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>
|
||||||
<p className="font-mono font-bold">{st.win_loss_ratio}</p>
|
<div><span className="text-slate-400">总笔数</span><p className="font-mono font-bold">{st.total ?? data.total}</p></div>
|
||||||
</div>
|
<div><span className="text-slate-400">做多胜率</span><p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p></div>
|
||||||
<div>
|
<div><span className="text-slate-400">做空胜率</span><p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p></div>
|
||||||
<span className="text-slate-400">平均盈利</span>
|
|
||||||
<p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">平均亏损</span>
|
|
||||||
<p className="font-mono font-bold text-red-500">-{st.avg_loss}R</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">最大回撤</span>
|
|
||||||
<p className="font-mono font-bold">{st.mdd}R</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">夏普比率</span>
|
|
||||||
<p className="font-mono font-bold">{st.sharpe}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">总盈亏</span>
|
|
||||||
<p className={`font-mono font-bold ${(st.total_pnl ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
|
||||||
{(st.total_pnl ?? 0) >= 0 ? "+" : ""}
|
|
||||||
{st.total_pnl ?? "-"}R
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">总笔数</span>
|
|
||||||
<p className="font-mono font-bold">{st.total ?? data.total}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">做多胜率</span>
|
|
||||||
<p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-slate-400">做空胜率</span>
|
|
||||||
<p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p>
|
|
||||||
</div>
|
|
||||||
{tab === "ALL" && data.by_tier && Object.entries(data.by_tier).map(([t, v]: [string, any]) => (
|
{tab === "ALL" && data.by_tier && Object.entries(data.by_tier).map(([t, v]: [string, any]) => (
|
||||||
<div key={t}>
|
<div key={t}><span className="text-slate-400">{t === "heavy" ? "加仓档" : t === "standard" ? "标准档" : "轻仓档"}</span><p className="font-mono">{v.win_rate}% ({v.total}笔)</p></div>
|
||||||
<span className="text-slate-400">{t === "heavy" ? "加仓档" : t === "standard" ? "标准档" : "轻仓档"}</span>
|
|
||||||
<p className="font-mono">{v.win_rate}% ({v.total}笔)</p>
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="p-3 text-xs text-slate-400">该币种暂无数据</div>
|
<div className="p-3 text-xs text-slate-400">该币种暂无数据</div>
|
||||||
)}
|
)}
|
||||||
@ -654,74 +432,33 @@ function StatsPanel({ strategy }: { strategy: StrategyFilter }) {
|
|||||||
|
|
||||||
// ─── 主页面 ──────────────────────────────────────────────────────
|
// ─── 主页面 ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
function PaperTradingPageInner() {
|
export default function PaperTradingPage() {
|
||||||
const { isLoggedIn, loading } = useAuth();
|
const { isLoggedIn, loading } = useAuth();
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const urlStrategy = searchParams.get("strategy");
|
|
||||||
const [strategyTab, setStrategyTab] = useState<StrategyFilter>(() => normalizeStrategy(urlStrategy));
|
|
||||||
|
|
||||||
// URL参数变化时同步
|
|
||||||
useEffect(() => {
|
|
||||||
if (urlStrategy) {
|
|
||||||
setStrategyTab(normalizeStrategy(urlStrategy));
|
|
||||||
}
|
|
||||||
}, [urlStrategy]);
|
|
||||||
|
|
||||||
if (loading) return <div className="text-center text-slate-400 py-8">加载中...</div>;
|
if (loading) return <div className="text-center text-slate-400 py-8">加载中...</div>;
|
||||||
|
|
||||||
if (!isLoggedIn)
|
if (!isLoggedIn) return (
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center h-64 gap-4">
|
<div className="flex flex-col items-center justify-center h-64 gap-4">
|
||||||
<div className="text-5xl">🔒</div>
|
<div className="text-5xl">🔒</div>
|
||||||
<p className="text-slate-600 font-medium">请先登录查看模拟盘</p>
|
<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 href="/login" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">登录</Link>
|
||||||
登录
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="rounded-2xl border-2 border-slate-200 bg-white p-2.5 shadow-sm">
|
|
||||||
<p className="text-[11px] font-semibold text-slate-500 mb-2">策略视图(顶部切换)</p>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
|
||||||
{STRATEGY_TABS.map((tab) => (
|
|
||||||
<button
|
|
||||||
key={tab.value}
|
|
||||||
onClick={() => setStrategyTab(tab.value)}
|
|
||||||
className={`rounded-xl border-2 px-4 py-3 text-left transition-all ${
|
|
||||||
strategyTab === tab.value
|
|
||||||
? "border-slate-800 bg-slate-800 text-white shadow"
|
|
||||||
: "border-slate-100 bg-slate-100 text-slate-600 hover:bg-slate-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<p className="text-sm font-bold">{tab.label}</p>
|
|
||||||
<p className={`text-[10px] mt-0.5 ${strategyTab === tab.value ? "text-slate-200" : "text-slate-500"}`}>{tab.hint}</p>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-lg font-bold text-slate-900">📊 模拟盘</h1>
|
<h1 className="text-lg font-bold text-slate-900">📈 V5.1 模拟盘</h1>
|
||||||
<p className="text-[10px] text-slate-500">V5.2策略AB测试 · 实时追踪 · 数据驱动优化 · {strategyTabDescription(strategyTab)}</p>
|
<p className="text-[10px] text-slate-500">仅展示 v51_baseline · V5.1信号引擎自动交易 · 实时追踪</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ControlPanel />
|
<ControlPanel />
|
||||||
<SummaryCards strategy={strategyTab} />
|
<SummaryCards />
|
||||||
<LatestSignals />
|
<LatestSignals />
|
||||||
<ActivePositions strategy={strategyTab} />
|
<ActivePositions />
|
||||||
<EquityCurve strategy={strategyTab} />
|
<EquityCurve />
|
||||||
<TradeHistory strategy={strategyTab} />
|
<TradeHistory />
|
||||||
<StatsPanel strategy={strategyTab} />
|
<StatsPanel />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PaperTradingPage() {
|
|
||||||
return (
|
|
||||||
<Suspense fallback={<div className="text-center text-slate-400 py-8">加载中...</div>}>
|
|
||||||
<PaperTradingPageInner />
|
|
||||||
</Suspense>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
527
frontend/app/signals-v52/page.tsx
Normal file
527
frontend/app/signals-v52/page.tsx
Normal file
@ -0,0 +1,527 @@
|
|||||||
|
"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;
|
||||||
|
signal: string | null;
|
||||||
|
tier?: "light" | "standard" | "heavy" | null;
|
||||||
|
factors?: {
|
||||||
|
direction?: { score?: number };
|
||||||
|
crowding?: { score?: number };
|
||||||
|
environment?: { score?: number };
|
||||||
|
confirmation?: { score?: number };
|
||||||
|
auxiliary?: { score?: number };
|
||||||
|
funding_rate?: { score?: number; value?: number };
|
||||||
|
liquidation?: { score?: number; long_usd?: number; short_usd?: number };
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MarketIndicatorValue {
|
||||||
|
value: Record<string, unknown>;
|
||||||
|
ts: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MarketIndicatorSet {
|
||||||
|
long_short_ratio?: MarketIndicatorValue;
|
||||||
|
top_trader_position?: MarketIndicatorValue;
|
||||||
|
open_interest_hist?: MarketIndicatorValue;
|
||||||
|
coinbase_premium?: MarketIndicatorValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MarketIndicatorsCards({ symbol }: { symbol: Symbol }) {
|
||||||
|
const [data, setData] = useState<MarketIndicatorSet | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetch = async () => {
|
||||||
|
try {
|
||||||
|
const res = await authFetch("/api/signals/market-indicators");
|
||||||
|
if (!res.ok) return;
|
||||||
|
const json = await res.json();
|
||||||
|
setData(json[symbol] || null);
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
fetch();
|
||||||
|
const iv = setInterval(fetch, 5000);
|
||||||
|
return () => clearInterval(iv);
|
||||||
|
}, [symbol]);
|
||||||
|
|
||||||
|
if (!data) return <div className="text-center text-slate-400 text-sm py-3">等待市场指标数据...</div>;
|
||||||
|
|
||||||
|
// value可能是JSON字符串或对象,统一解析
|
||||||
|
const parseVal = (v: unknown): Record<string, unknown> => {
|
||||||
|
if (!v) return {};
|
||||||
|
if (typeof v === "string") { try { return JSON.parse(v); } catch { return {}; } }
|
||||||
|
if (typeof v === "object") return v as Record<string, unknown>;
|
||||||
|
return {};
|
||||||
|
};
|
||||||
|
|
||||||
|
const lsVal = parseVal(data.long_short_ratio?.value);
|
||||||
|
const topVal = parseVal(data.top_trader_position?.value);
|
||||||
|
const oiVal = parseVal(data.open_interest_hist?.value);
|
||||||
|
const premVal = parseVal(data.coinbase_premium?.value);
|
||||||
|
|
||||||
|
const longPct = Number(lsVal?.longAccount ?? 0.5) * 100;
|
||||||
|
const shortPct = Number(lsVal?.shortAccount ?? 0.5) * 100;
|
||||||
|
const topLong = Number(topVal?.longAccount ?? 0.5) * 100;
|
||||||
|
const topShort = Number(topVal?.shortAccount ?? 0.5) * 100;
|
||||||
|
const oiValue = Number(oiVal?.sumOpenInterestValue ?? 0);
|
||||||
|
const oiDisplay = oiValue >= 1e9 ? `$${(oiValue / 1e9).toFixed(2)}B` : oiValue >= 1e6 ? `$${(oiValue / 1e6).toFixed(0)}M` : `$${oiValue.toFixed(0)}`;
|
||||||
|
const premium = Number(premVal?.premium_pct ?? 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-4 gap-1.5">
|
||||||
|
<div className="bg-slate-50 rounded-lg px-2 py-1.5">
|
||||||
|
<p className="text-[10px] text-slate-400">多空比</p>
|
||||||
|
<p className="text-xs font-mono text-slate-800">L:{longPct.toFixed(1)}% S:{shortPct.toFixed(1)}%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 rounded-lg px-2 py-1.5">
|
||||||
|
<p className="text-[10px] text-slate-400">大户持仓</p>
|
||||||
|
<p className="text-xs font-mono text-slate-800">多{topLong.toFixed(1)}% {topLong >= 55 ? "📈" : topLong <= 45 ? "📉" : "➖"}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 rounded-lg px-2 py-1.5">
|
||||||
|
<p className="text-[10px] text-slate-400">OI</p>
|
||||||
|
<p className="text-xs font-mono text-slate-800">{oiDisplay}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 rounded-lg px-2 py-1.5">
|
||||||
|
<p className="text-[10px] text-slate-400">CB Premium</p>
|
||||||
|
<p className={`text-xs font-mono ${premium >= 0 ? "text-emerald-600" : "text-red-500"}`}>{premium >= 0 ? "+" : ""}{premium.toFixed(4)}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 信号历史 ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface SignalRecord {
|
||||||
|
ts: number;
|
||||||
|
score: number;
|
||||||
|
signal: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 SignalHistory({ symbol }: { symbol: Symbol }) {
|
||||||
|
const [data, setData] = useState<SignalRecord[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const res = await authFetch(`/api/signals/signal-history?symbol=${symbol}&limit=20`);
|
||||||
|
if (!res.ok) return;
|
||||||
|
const json = await res.json();
|
||||||
|
setData(json.data || []);
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
fetchData();
|
||||||
|
const iv = setInterval(fetchData, 15000);
|
||||||
|
return () => clearInterval(iv);
|
||||||
|
}, [symbol]);
|
||||||
|
|
||||||
|
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">最近信号</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 实时指标卡片 ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function IndicatorCards({ symbol }: { symbol: Symbol }) {
|
||||||
|
const [data, setData] = useState<LatestIndicator | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetch = async () => {
|
||||||
|
try {
|
||||||
|
const res = await authFetch("/api/signals/latest");
|
||||||
|
if (!res.ok) return;
|
||||||
|
const json = await res.json();
|
||||||
|
setData(json[symbol] || null);
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
fetch();
|
||||||
|
const iv = setInterval(fetch, 5000);
|
||||||
|
return () => clearInterval(iv);
|
||||||
|
}, [symbol]);
|
||||||
|
|
||||||
|
if (!data) return <div className="text-center text-slate-400 text-sm py-4">等待指标数据...</div>;
|
||||||
|
|
||||||
|
const cvdMidDir = data.cvd_mid > 0 ? "多" : "空";
|
||||||
|
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 (30m)</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 (4h)</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">{cvdMidDir}头占优</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_day</p>
|
||||||
|
<p className={`font-mono font-bold text-sm ${data.cvd_day >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
|
{fmt(data.cvd_day)}
|
||||||
|
</p>
|
||||||
|
<p className="text-[10px] text-slate-400">盘中基线</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ATR + VWAP + 大单 - 4列紧凑 */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 信号状态(V5.2)- 七层 */}
|
||||||
|
<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">当前信号</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">
|
||||||
|
<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" ? "标准" : data.tier === "light" ? "轻仓" : "不开仓"}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 space-y-1">
|
||||||
|
<LayerScore label="方向" score={data.factors?.direction?.score ?? Math.min(Math.round(data.score * 0.40), 40)} max={40} colorClass="bg-blue-600" />
|
||||||
|
<LayerScore label="拥挤" score={data.factors?.crowding?.score ?? Math.min(Math.round(data.score * 0.20), 20)} max={20} colorClass="bg-violet-600" />
|
||||||
|
<LayerScore label="FR" score={data.factors?.funding_rate?.score ?? 0} max={5} colorClass="bg-cyan-600" />
|
||||||
|
<LayerScore label="环境" score={data.factors?.environment?.score ?? Math.min(Math.round(data.score * 0.15), 15)} max={15} colorClass="bg-emerald-600" />
|
||||||
|
<LayerScore label="确认" score={data.factors?.confirmation?.score ?? Math.min(Math.round(data.score * 0.15), 15)} max={15} colorClass="bg-amber-500" />
|
||||||
|
<LayerScore label="清算" score={data.factors?.liquidation?.score ?? 0} max={5} colorClass="bg-orange-500" />
|
||||||
|
<LayerScore label="辅助" score={data.factors?.auxiliary?.score ?? Math.min(Math.round(data.score * 0.05), 5)} max={5} colorClass="bg-slate-500" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── CVD三轨图 ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function CVDChart({ symbol, minutes }: { symbol: Symbol; minutes: number }) {
|
||||||
|
const [data, setData] = useState<IndicatorRow[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async (silent = false) => {
|
||||||
|
try {
|
||||||
|
const res = await authFetch(`/api/signals/indicators?symbol=${symbol}&minutes=${minutes}`);
|
||||||
|
if (!res.ok) return;
|
||||||
|
const json = await res.json();
|
||||||
|
setData(json.data || []);
|
||||||
|
if (!silent) setLoading(false);
|
||||||
|
} catch {}
|
||||||
|
}, [symbol, minutes]);
|
||||||
|
|
||||||
|
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">暂无指标数据,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(30m)"];
|
||||||
|
return [fmt(Number(v)), "CVD_mid(4h)"];
|
||||||
|
}}
|
||||||
|
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 SignalsV52Page() {
|
||||||
|
const { isLoggedIn, loading } = useAuth();
|
||||||
|
const [symbol, setSymbol] = useState<Symbol>("BTC");
|
||||||
|
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">
|
||||||
|
{/* 标题 */}
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-slate-900">⚡ 信号引擎 V5.2</h1>
|
||||||
|
<p className="text-slate-500 text-[10px]">七层信号评分 · 包含 Funding Rate / Liquidation 维度</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 ? "bg-blue-600 text-white border-blue-600" : "border-slate-200 text-slate-600 hover:border-blue-400"}`}>
|
||||||
|
{s}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 实时指标卡片 */}
|
||||||
|
<IndicatorCards symbol={symbol} />
|
||||||
|
|
||||||
|
{/* Market Indicators */}
|
||||||
|
<div className="rounded-xl border border-slate-200 bg-white px-3 py-2">
|
||||||
|
<h3 className="font-semibold text-slate-800 text-xs mb-1.5">Market Indicators</h3>
|
||||||
|
<MarketIndicatorsCards symbol={symbol} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 信号历史 */}
|
||||||
|
<SignalHistory symbol={symbol} />
|
||||||
|
|
||||||
|
{/* CVD三轨图 */}
|
||||||
|
<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(30m) · 紫=mid(4h) · 橙=价格</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.2)</h3>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-2 space-y-2 text-[11px] text-slate-600">
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">1️⃣ 方向层(40分)</span>
|
||||||
|
<span className="text-slate-500"> — 钱往哪流?</span>
|
||||||
|
<p className="mt-0.5">CVD三轨(30m/4h资金流向)+ P99大单流(鲸鱼动向)+ 加速度奖励。两条CVD同向+大单配合 = 高分。</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">2️⃣ 拥挤层(20分)</span>
|
||||||
|
<span className="text-slate-500"> — 散户在干嘛?反着来</span>
|
||||||
|
<p className="mt-0.5">多空比(散户仓位)+ 大户持仓比。散户疯狂做多→做空加分,跟大户同向加分。</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">3️⃣ FR层(5分)</span>
|
||||||
|
<span className="text-slate-500"> — 费率拥挤是否极端?</span>
|
||||||
|
<p className="mt-0.5">Funding Rate偏离越极端,反向信号权重越高;用于过滤高拥挤下的追涨杀跌。</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">4️⃣ 环境层(15分)</span>
|
||||||
|
<span className="text-slate-500"> — 有没有新钱进场?</span>
|
||||||
|
<p className="mt-0.5">OI变化率(未平仓合约)。OI上涨=新资金进场=趋势延续;OI下降=资金撤离。</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">5️⃣ 确认层(15分)</span>
|
||||||
|
<span className="text-slate-500"> — 多周期共振吗?</span>
|
||||||
|
<p className="mt-0.5">CVD_fast(30m)和CVD_mid(4h)方向一致=高确信度满分15;方向矛盾=0分。</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">6️⃣ 清算层(5分)</span>
|
||||||
|
<span className="text-slate-500"> — 清算热点是否共振?</span>
|
||||||
|
<p className="mt-0.5">多空清算金额不对称时为反向提供弹性加权,帮助识别踩踏与挤空/挤多机会。</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-slate-800">7️⃣ 辅助层(5分)</span>
|
||||||
|
<span className="text-slate-500"> — 美国机构在干嘛?</span>
|
||||||
|
<p className="mt-0.5">Coinbase Premium(CB vs 币安价差)。正溢价=机构买入=做多加分;负溢价=机构卖出。</p>
|
||||||
|
</div>
|
||||||
|
<div className="pt-1 border-t border-slate-100">
|
||||||
|
<span className="text-blue-600 font-medium">档位:</span><60不开仓 · 60-74轻仓 · 75-84标准 · ≥85加仓 · 冷却10分钟
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -44,28 +44,9 @@ interface LatestIndicator {
|
|||||||
environment?: { score?: number };
|
environment?: { score?: number };
|
||||||
confirmation?: { score?: number };
|
confirmation?: { score?: number };
|
||||||
auxiliary?: { score?: number };
|
auxiliary?: { score?: number };
|
||||||
funding_rate?: { score?: number; value?: number };
|
|
||||||
liquidation?: { score?: number; long_usd?: number; short_usd?: number };
|
|
||||||
} | null;
|
} | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StrategyScoreSnapshot {
|
|
||||||
score: number | null;
|
|
||||||
signal: string | null;
|
|
||||||
ts: number | null;
|
|
||||||
source?: string;
|
|
||||||
funding_rate_score?: number | null;
|
|
||||||
liquidation_score?: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface StrategyLatestRow {
|
|
||||||
primary_strategy?: "v51_baseline" | "v52_8signals";
|
|
||||||
latest_signal?: string | null;
|
|
||||||
latest_ts?: number | null;
|
|
||||||
v51?: StrategyScoreSnapshot;
|
|
||||||
v52?: StrategyScoreSnapshot;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MarketIndicatorValue {
|
interface MarketIndicatorValue {
|
||||||
value: Record<string, unknown>;
|
value: Record<string, unknown>;
|
||||||
ts: number;
|
ts: number;
|
||||||
@ -100,14 +81,6 @@ function pct(v: number, digits = 1): string {
|
|||||||
return `${(v * 100).toFixed(digits)}%`;
|
return `${(v * 100).toFixed(digits)}%`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function agoLabel(ts: number | null | undefined): string {
|
|
||||||
if (!ts) return "--";
|
|
||||||
const minutes = Math.round((Date.now() - ts) / 60000);
|
|
||||||
if (minutes < 1) return "刚刚";
|
|
||||||
if (minutes < 60) return `${minutes}m前`;
|
|
||||||
return `${Math.round(minutes / 60)}h前`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function LayerScore({ label, score, max, colorClass }: { label: string; score: number; max: number; colorClass: string }) {
|
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));
|
const ratio = Math.max(0, Math.min((score / max) * 100, 100));
|
||||||
return (
|
return (
|
||||||
@ -121,73 +94,6 @@ function LayerScore({ label, score, max, colorClass }: { label: string; score: n
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function LatestStrategyComparison() {
|
|
||||||
const [rows, setRows] = useState<Record<Symbol, StrategyLatestRow | undefined>>({
|
|
||||||
BTC: undefined,
|
|
||||||
ETH: undefined,
|
|
||||||
XRP: undefined,
|
|
||||||
SOL: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetch = async () => {
|
|
||||||
try {
|
|
||||||
const res = await authFetch("/api/signals/latest-v52");
|
|
||||||
if (!res.ok) return;
|
|
||||||
const json = await res.json();
|
|
||||||
setRows({
|
|
||||||
BTC: json.BTC,
|
|
||||||
ETH: json.ETH,
|
|
||||||
XRP: json.XRP,
|
|
||||||
SOL: json.SOL,
|
|
||||||
});
|
|
||||||
} catch {}
|
|
||||||
};
|
|
||||||
fetch();
|
|
||||||
const iv = setInterval(fetch, 10000);
|
|
||||||
return () => clearInterval(iv);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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">最新信号对比(V5.1 vs V5.2)</h3>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 p-2">
|
|
||||||
{(["BTC", "ETH", "XRP", "SOL"] as Symbol[]).map((sym) => {
|
|
||||||
const row = rows[sym];
|
|
||||||
const latestSignal = row?.latest_signal;
|
|
||||||
const v51 = row?.v51;
|
|
||||||
const v52 = row?.v52;
|
|
||||||
const v52Fr = v52?.funding_rate_score;
|
|
||||||
const v52Liq = v52?.liquidation_score;
|
|
||||||
return (
|
|
||||||
<div key={sym} className="rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<p className="font-mono text-sm font-bold text-slate-800">{sym}</p>
|
|
||||||
<span className="text-[10px] text-slate-400">{agoLabel(row?.latest_ts ?? null)}</span>
|
|
||||||
</div>
|
|
||||||
<p className={`text-[11px] mt-0.5 font-semibold ${latestSignal === "LONG" ? "text-emerald-600" : latestSignal === "SHORT" ? "text-red-500" : "text-slate-400"}`}>
|
|
||||||
{latestSignal === "LONG" ? "🟢 LONG" : latestSignal === "SHORT" ? "🔴 SHORT" : "⚪ 无信号"}
|
|
||||||
</p>
|
|
||||||
<div className="mt-1 text-[11px] text-slate-700 flex items-center gap-1.5 flex-wrap">
|
|
||||||
<span className="rounded bg-slate-200 text-slate-700 px-1.5 py-0.5 font-mono">V5.1: {v51?.score ?? "--"}分</span>
|
|
||||||
<span className="rounded bg-emerald-100 text-emerald-700 px-1.5 py-0.5 font-mono">✨ V5.2: {v52?.score ?? "--"}分</span>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 text-[10px] text-slate-500">
|
|
||||||
{v52Fr === null || v52Fr === undefined ? "FR --" : `FR ${v52Fr >= 0 ? "+" : ""}${v52Fr}`} · {v52Liq === null || v52Liq === undefined ? "Liq --" : `Liq ${v52Liq >= 0 ? "+" : ""}${v52Liq}`}
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 text-[9px] text-slate-400">
|
|
||||||
来源: V5.1 {v51?.source || "--"} | V5.2 {v52?.source || "--"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MarketIndicatorsCards({ symbol }: { symbol: Symbol }) {
|
function MarketIndicatorsCards({ symbol }: { symbol: Symbol }) {
|
||||||
const [data, setData] = useState<MarketIndicatorSet | null>(null);
|
const [data, setData] = useState<MarketIndicatorSet | null>(null);
|
||||||
|
|
||||||
@ -432,8 +338,6 @@ function IndicatorCards({ symbol }: { symbol: Symbol }) {
|
|||||||
<LayerScore label="环境" score={data.factors?.environment?.score ?? Math.min(Math.round(data.score * 0.15), 15)} max={15} colorClass="bg-emerald-600" />
|
<LayerScore label="环境" score={data.factors?.environment?.score ?? Math.min(Math.round(data.score * 0.15), 15)} max={15} colorClass="bg-emerald-600" />
|
||||||
<LayerScore label="确认" score={data.factors?.confirmation?.score ?? Math.min(Math.round(data.score * 0.15), 15)} max={15} colorClass="bg-amber-500" />
|
<LayerScore label="确认" score={data.factors?.confirmation?.score ?? Math.min(Math.round(data.score * 0.15), 15)} max={15} colorClass="bg-amber-500" />
|
||||||
<LayerScore label="辅助" score={data.factors?.auxiliary?.score ?? Math.min(Math.round(data.score * 0.05), 5)} max={5} colorClass="bg-slate-500" />
|
<LayerScore label="辅助" score={data.factors?.auxiliary?.score ?? Math.min(Math.round(data.score * 0.05), 5)} max={5} colorClass="bg-slate-500" />
|
||||||
<LayerScore label="FR" score={data.factors?.funding_rate?.score ?? 0} max={5} colorClass="bg-cyan-600" />
|
|
||||||
<LayerScore label="清算" score={data.factors?.liquidation?.score ?? 0} max={5} colorClass="bg-orange-500" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -532,8 +436,8 @@ export default function SignalsPage() {
|
|||||||
{/* 标题 */}
|
{/* 标题 */}
|
||||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-lg font-bold text-slate-900">⚡ 信号引擎 V5.1 vs V5.2</h1>
|
<h1 className="text-lg font-bold text-slate-900">⚡ 信号引擎 V5.1</h1>
|
||||||
<p className="text-slate-500 text-[10px]">并排评分对比 · V5.2 含 Funding Rate / Liquidation 额外维度</p>
|
<p className="text-slate-500 text-[10px]">五层100分评分 · 市场拥挤度 · 环境确认</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
{(["BTC", "ETH", "XRP", "SOL"] as Symbol[]).map(s => (
|
{(["BTC", "ETH", "XRP", "SOL"] as Symbol[]).map(s => (
|
||||||
@ -545,8 +449,6 @@ export default function SignalsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<LatestStrategyComparison />
|
|
||||||
|
|
||||||
{/* 实时指标卡片 */}
|
{/* 实时指标卡片 */}
|
||||||
<IndicatorCards symbol={symbol} />
|
<IndicatorCards symbol={symbol} />
|
||||||
|
|
||||||
|
|||||||
@ -7,16 +7,16 @@ import { useAuth } from "@/lib/auth";
|
|||||||
import {
|
import {
|
||||||
LayoutDashboard, Info,
|
LayoutDashboard, Info,
|
||||||
Menu, X, Zap, LogIn, UserPlus,
|
Menu, X, Zap, LogIn, UserPlus,
|
||||||
ChevronLeft, ChevronRight, Activity, LogOut, Crosshair, Monitor, LineChart, Sparkles, FlaskConical
|
ChevronLeft, ChevronRight, Activity, LogOut, Crosshair, Monitor, LineChart, Sparkles
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ href: "/", label: "仪表盘", icon: LayoutDashboard },
|
{ href: "/", label: "仪表盘", icon: LayoutDashboard },
|
||||||
{ href: "/trades", label: "成交流", icon: Activity },
|
{ href: "/trades", label: "成交流", icon: Activity },
|
||||||
{ href: "/signals", label: "信号引擎", icon: Crosshair, section: "信号" },
|
{ href: "/signals", label: "V5.1 信号引擎", icon: Crosshair, section: "── V5.1 ──" },
|
||||||
{ href: "/paper?strategy=all", label: "全部持仓", icon: LineChart, section: "模拟盘" },
|
{ href: "/paper", label: "V5.1 模拟盘", icon: LineChart },
|
||||||
{ href: "/paper?strategy=v51_baseline", label: "V5.1 模拟盘", icon: FlaskConical },
|
{ href: "/signals-v52", label: "V5.2 信号引擎", icon: Sparkles, section: "── V5.2 ──" },
|
||||||
{ href: "/paper?strategy=v52_8signals", label: "V5.2 模拟盘", icon: Sparkles, badge: "NEW" },
|
{ href: "/paper-v52", label: "V5.2 模拟盘", icon: LineChart },
|
||||||
{ href: "/server", label: "服务器", icon: Monitor },
|
{ href: "/server", label: "服务器", icon: Monitor },
|
||||||
{ href: "/about", label: "说明", icon: Info },
|
{ href: "/about", label: "说明", icon: Info },
|
||||||
];
|
];
|
||||||
@ -39,12 +39,12 @@ export default function Sidebar() {
|
|||||||
|
|
||||||
{/* Nav */}
|
{/* Nav */}
|
||||||
<nav className="flex-1 py-4 space-y-1 px-2">
|
<nav className="flex-1 py-4 space-y-1 px-2">
|
||||||
{navItems.map(({ href, label, icon: Icon, section, badge }, idx) => {
|
{navItems.map(({ href, label, icon: Icon, section }, idx) => {
|
||||||
const active = pathname === href || (href.includes("?") && pathname === href.split("?")[0] && typeof window !== "undefined" && window.location.search === "?" + href.split("?")[1]);
|
const active = pathname === href;
|
||||||
return (
|
return (
|
||||||
<div key={href}>
|
<div key={href}>
|
||||||
{section && (
|
{section && (
|
||||||
<div className={`px-3 pt-3 pb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider ${idx > 0 ? "mt-2 border-t border-slate-100 pt-4" : ""}`}>
|
<div className={`px-3 pt-3 pb-1 text-[10px] font-semibold text-slate-400 tracking-wider ${idx > 0 ? "mt-2 border-t border-slate-100 pt-4" : ""}`}>
|
||||||
{section}
|
{section}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -55,10 +55,7 @@ export default function Sidebar() {
|
|||||||
${collapsed && !mobile ? "justify-center" : ""}`}>
|
${collapsed && !mobile ? "justify-center" : ""}`}>
|
||||||
<Icon className={`shrink-0 ${active ? "text-blue-600" : "text-slate-400"}`} size={18} />
|
<Icon className={`shrink-0 ${active ? "text-blue-600" : "text-slate-400"}`} size={18} />
|
||||||
{(!collapsed || mobile) && (
|
{(!collapsed || mobile) && (
|
||||||
<span className="flex items-center gap-1.5">
|
<span className="flex items-center gap-1.5">{label}</span>
|
||||||
{label}
|
|
||||||
{badge && <span className="text-[9px] bg-emerald-500 text-white px-1 py-0.5 rounded font-bold">{badge}</span>}
|
|
||||||
</span>
|
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -74,3 +74,38 @@
|
|||||||
2026-03-01 23:56:20,867 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v52_8signals]: SHORT score=82 price=1.4
|
2026-03-01 23:56:20,867 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v52_8signals]: SHORT score=82 price=1.4
|
||||||
2026-03-01 23:56:20,955 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v51_baseline]: LONG score=87 price=83.6
|
2026-03-01 23:56:20,955 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v51_baseline]: LONG score=87 price=83.6
|
||||||
2026-03-01 23:56:20,955 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v52_8signals]: LONG score=87 price=83.6
|
2026-03-01 23:56:20,955 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v52_8signals]: LONG score=87 price=83.6
|
||||||
|
2026-03-01 23:57:56,842 [INFO] signal-engine: 已加载策略配置: v51_baseline, v52_8signals
|
||||||
|
2026-03-01 23:58:00,054 [INFO] signal-engine: [BTCUSDT] 冷启动完成: 加载469,368条历史数据 (窗口=4h)
|
||||||
|
2026-03-01 23:58:03,491 [INFO] signal-engine: [ETHUSDT] 冷启动完成: 加载480,675条历史数据 (窗口=4h)
|
||||||
|
2026-03-01 23:58:03,940 [INFO] signal-engine: [XRPUSDT] 冷启动完成: 加载64,627条历史数据 (窗口=4h)
|
||||||
|
2026-03-01 23:58:04,405 [INFO] signal-engine: [SOLUSDT] 冷启动完成: 加载69,923条历史数据 (窗口=4h)
|
||||||
|
2026-03-01 23:58:04,405 [INFO] signal-engine: === Signal Engine (PG) 启动完成 ===
|
||||||
|
2026-03-01 23:58:04,670 [INFO] signal-engine: [BTCUSDT] 🚨 信号[v51_baseline]: LONG score=90 price=65701.1
|
||||||
|
2026-03-01 23:58:04,671 [INFO] signal-engine: [BTCUSDT] 🚨 信号[v52_8signals]: LONG score=90 price=65701.1
|
||||||
|
2026-03-01 23:58:05,068 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v51_baseline]: LONG score=92 price=83.6
|
||||||
|
2026-03-01 23:58:05,069 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v52_8signals]: LONG score=92 price=83.6
|
||||||
|
2026-03-01 23:58:36,358 [INFO] signal-engine: 冷启动保护期结束,模拟盘开仓已启用
|
||||||
|
2026-03-02 00:02:15,179 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v51_baseline]: SHORT score=87 price=1.4
|
||||||
|
2026-03-02 00:02:15,180 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v52_8signals]: SHORT score=87 price=1.4
|
||||||
|
2026-03-02 00:08:14,751 [INFO] signal-engine: [BTCUSDT] 🚨 信号[v51_baseline]: LONG score=85 price=65785.2
|
||||||
|
2026-03-02 00:08:14,751 [INFO] signal-engine: [BTCUSDT] 🚨 信号[v52_8signals]: LONG score=90 price=65785.2
|
||||||
|
2026-03-02 00:08:15,137 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v51_baseline]: LONG score=82 price=83.6
|
||||||
|
2026-03-02 00:08:15,138 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v52_8signals]: LONG score=82 price=83.6
|
||||||
|
2026-03-02 00:12:25,824 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v51_baseline]: LONG score=82 price=1.4
|
||||||
|
2026-03-02 00:12:25,824 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v52_8signals]: LONG score=87 price=1.4
|
||||||
|
2026-03-02 00:12:57,084 [INFO] signal-engine: [ETHUSDT] 🚨 信号[v51_baseline]: LONG score=90 price=1942.8
|
||||||
|
2026-03-02 00:12:57,085 [INFO] signal-engine: [ETHUSDT] 🚨 信号[v52_8signals]: LONG score=95 price=1942.8
|
||||||
|
2026-03-02 00:13:28,619 [INFO] signal-engine: [BTCUSDT] 状态: CVD_fast=492.8 CVD_mid=4524.8 ATR=344.15 (100%) VWAP=65886.1
|
||||||
|
2026-03-02 00:13:28,619 [INFO] signal-engine: [ETHUSDT] 状态: CVD_fast=12835.6 CVD_mid=5292.2 ATR=10.87 (100%) VWAP=1942.9
|
||||||
|
2026-03-02 00:13:28,619 [INFO] signal-engine: [XRPUSDT] 状态: CVD_fast=561858.0 CVD_mid=1078138.6 ATR=0.01 (100%) VWAP=1.4
|
||||||
|
2026-03-02 00:13:28,620 [INFO] signal-engine: [SOLUSDT] 状态: CVD_fast=61604.1 CVD_mid=357198.7 ATR=0.51 (100%) VWAP=83.7
|
||||||
|
2026-03-02 00:18:25,810 [INFO] signal-engine: [BTCUSDT] 🚨 信号[v51_baseline]: LONG score=82 price=65894.7
|
||||||
|
2026-03-02 00:18:25,810 [INFO] signal-engine: [BTCUSDT] 🚨 信号[v52_8signals]: LONG score=82 price=65894.7
|
||||||
|
2026-03-02 00:18:25,829 [INFO] signal-engine: [BTCUSDT] 📝 模拟开仓: LONG @ 65894.67 score=82 tier=standard strategy=v52_8signals TP1=66258.64 TP2=66713.60 SL=65348.71
|
||||||
|
2026-03-02 00:18:26,217 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v51_baseline]: LONG score=87 price=83.7
|
||||||
|
2026-03-02 00:18:26,217 [INFO] signal-engine: [SOLUSDT] 🚨 信号[v52_8signals]: LONG score=87 price=83.7
|
||||||
|
2026-03-02 00:18:26,235 [INFO] signal-engine: [SOLUSDT] 📝 模拟开仓: LONG @ 83.72 score=87 tier=heavy strategy=v52_8signals TP1=84.44 TP2=85.34 SL=82.65
|
||||||
|
2026-03-02 00:22:37,394 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v51_baseline]: LONG score=77 price=1.4
|
||||||
|
2026-03-02 00:22:37,395 [INFO] signal-engine: [XRPUSDT] 🚨 信号[v52_8signals]: LONG score=77 price=1.4
|
||||||
|
2026-03-02 00:23:08,756 [INFO] signal-engine: [ETHUSDT] 🚨 信号[v51_baseline]: LONG score=85 price=1943.5
|
||||||
|
2026-03-02 00:23:08,756 [INFO] signal-engine: [ETHUSDT] 🚨 信号[v52_8signals]: LONG score=90 price=1943.5
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user