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

feat: dynamic CVD window per strategy + full generic signal/paper pages for V5.4 Strategy Factory

Browse Source
This commit is contained in:
root 2026-03-12 13:03:55 +00:00
parent a4bb7828f8
commit cb34b1cb39
5 changed files with 935 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
backend/main.py
View File

@ -688,10 +688,32 @@ async def paper_set_config(request: Request, user: dict = Depends(get_current_us
@app.get("/api/paper/summary")
async def paper_summary(
strategy: str = "all",
strategy_id: str = "all",
user: dict = Depends(get_current_user),
):
"""模拟盘总览"""
if strategy == "all":
if strategy_id != "all":
closed = await async_fetch(
"SELECT pnl_r, direction FROM paper_trades "
"WHERE status NOT IN ('active','tp1_hit') AND strategy_id = $1",
strategy_id,
)
active = await async_fetch(
"SELECT id FROM paper_trades WHERE status IN ('active','tp1_hit') AND strategy_id = $1",
strategy_id,
)
first = await async_fetchrow(
"SELECT MIN(created_at) as start FROM paper_trades WHERE strategy_id = $1",
strategy_id,
)
# 从 strategies 表取该策略的 initial_balance
strat_row = await async_fetchrow(
"SELECT initial_balance FROM strategies WHERE strategy_id = $1",
strategy_id,
)
initial_balance = float(strat_row["initial_balance"]) if strat_row else paper_config["initial_balance"]
risk_per_trade = paper_config["risk_per_trade"]
elif strategy == "all":
closed = await async_fetch(
"SELECT pnl_r, direction FROM paper_trades WHERE status NOT IN ('active','tp1_hit')"
)
@ -699,6 +721,8 @@ async def paper_summary(
"SELECT id FROM paper_trades WHERE status IN ('active','tp1_hit')"
)
first = await async_fetchrow("SELECT MIN(created_at) as start FROM paper_trades")
initial_balance = paper_config["initial_balance"]
risk_per_trade = paper_config["risk_per_trade"]
else:
closed = await async_fetch(
"SELECT pnl_r, direction FROM paper_trades "
@ -713,13 +737,15 @@ async def paper_summary(
"SELECT MIN(created_at) as start FROM paper_trades WHERE strategy = $1",
strategy,
)
initial_balance = paper_config["initial_balance"]
risk_per_trade = paper_config["risk_per_trade"]
total = len(closed)
wins = len([r for r in closed if r["pnl_r"] > 0])
total_pnl = sum(r["pnl_r"] for r in closed)
paper_1r_usd = paper_config["initial_balance"] * paper_config["risk_per_trade"]
paper_1r_usd = initial_balance * risk_per_trade
total_pnl_usdt = total_pnl * paper_1r_usd
balance = paper_config["initial_balance"] + total_pnl_usdt
balance = initial_balance + total_pnl_usdt
win_rate = (wins / total * 100) if total > 0 else 0
gross_profit = sum(r["pnl_r"] for r in closed if r["pnl_r"] > 0)
gross_loss = abs(sum(r["pnl_r"] for r in closed if r["pnl_r"] <= 0))
@ -740,18 +766,26 @@ async def paper_summary(
@app.get("/api/paper/positions")
async def paper_positions(
strategy: str = "all",
strategy_id: str = "all",
user: dict = Depends(get_current_user),
):
"""当前活跃持仓（含实时价格和浮动盈亏）"""
if strategy == "all":
if strategy_id != "all":
rows = await async_fetch(
"SELECT id, symbol, direction, score, tier, strategy, entry_price, entry_ts, "
"SELECT id, symbol, direction, score, tier, strategy, strategy_id, entry_price, entry_ts, "
"tp1_price, tp2_price, sl_price, tp1_hit, status, atr_at_entry, score_factors, risk_distance "
"FROM paper_trades WHERE status IN ('active','tp1_hit') AND strategy_id = $1 ORDER BY entry_ts DESC",
strategy_id,
)
elif strategy == "all":
rows = await async_fetch(
"SELECT id, symbol, direction, score, tier, strategy, strategy_id, entry_price, entry_ts, "
"tp1_price, tp2_price, sl_price, tp1_hit, status, atr_at_entry, score_factors, risk_distance "
"FROM paper_trades WHERE status IN ('active','tp1_hit') ORDER BY entry_ts DESC"
)
else:
rows = await async_fetch(
"SELECT id, symbol, direction, score, tier, strategy, entry_price, entry_ts, "
"SELECT id, symbol, direction, score, tier, strategy, strategy_id, entry_price, entry_ts, "
"tp1_price, tp2_price, sl_price, tp1_hit, status, atr_at_entry, score_factors, risk_distance "
"FROM paper_trades WHERE status IN ('active','tp1_hit') AND strategy = $1 ORDER BY entry_ts DESC",
strategy,
@ -809,6 +843,7 @@ async def paper_trades(
symbol: str = "all",
result: str = "all",
strategy: str = "all",
strategy_id: str = "all",
limit: int = 100,
user: dict = Depends(get_current_user),
):
@ -827,7 +862,11 @@ async def paper_trades(
elif result == "loss":
conditions.append("pnl_r <= 0")
if strategy != "all":
if strategy_id != "all":
conditions.append(f"strategy_id = ${idx}")
params.append(strategy_id)
idx += 1
elif strategy != "all":
conditions.append(f"strategy = ${idx}")
params.append(strategy)
idx += 1
@ -835,7 +874,7 @@ async def paper_trades(
where = " AND ".join(conditions)
params.append(limit)
rows = await async_fetch(
f"SELECT id, symbol, direction, score, tier, strategy, entry_price, exit_price, "
f"SELECT id, symbol, direction, score, tier, strategy, strategy_id, entry_price, exit_price, "
f"entry_ts, exit_ts, pnl_r, status, tp1_hit, score_factors "
f"FROM paper_trades WHERE {where} ORDER BY exit_ts DESC LIMIT ${idx}",
*params
@ -846,10 +885,17 @@ async def paper_trades(
@app.get("/api/paper/equity-curve")
async def paper_equity_curve(
strategy: str = "all",
strategy_id: str = "all",
user: dict = Depends(get_current_user),
):
"""权益曲线"""
if strategy == "all":
if strategy_id != "all":
rows = await async_fetch(
"SELECT exit_ts, pnl_r FROM paper_trades "
"WHERE status NOT IN ('active','tp1_hit') AND strategy_id = $1 ORDER BY exit_ts ASC",
strategy_id,
)
elif strategy == "all":
rows = await async_fetch(
"SELECT exit_ts, pnl_r FROM paper_trades "
"WHERE status NOT IN ('active','tp1_hit') ORDER BY exit_ts ASC"
@ -871,10 +917,17 @@ async def paper_equity_curve(
@app.get("/api/paper/stats")
async def paper_stats(
strategy: str = "all",
strategy_id: str = "all",
user: dict = Depends(get_current_user),
):
"""详细统计"""
if strategy == "all":
if strategy_id != "all":
rows = await async_fetch(
"SELECT symbol, direction, pnl_r, tier, entry_ts, exit_ts "
"FROM paper_trades WHERE status NOT IN ('active','tp1_hit') AND strategy_id = $1",
strategy_id,
)
elif strategy == "all":
rows = await async_fetch(
"SELECT symbol, direction, pnl_r, tier, entry_ts, exit_ts "
"FROM paper_trades WHERE status NOT IN ('active','tp1_hit')"

41
backend/signal_engine.py
View File

@ -554,7 +554,7 @@ class SymbolState:
# v53 → 统一评分（BTC/ETH/XRP/SOL）
# v53_alt / v53_btc → 兼容旧策略名，转发到 _evaluate_v53()
# v51/v52 → 原有代码路径（兼容，不修改）
if strategy_name.startswith("v53") or strategy_name.startswith("custom_"):
if strategy_name.startswith("v53"):
allowed_symbols = strategy_cfg.get("symbols", [])
if allowed_symbols and self.symbol not in allowed_symbols:
snap = snapshot or self.build_evaluation_snapshot(now_ms)
@ -815,6 +815,16 @@ class SymbolState:
"signal": None, "direction": None, "score": 0, "tier": None, "factors": {},
}
def _window_ms(window_str: str) -> int:
"""把CVD窗口字符串转换为毫秒，如 '5m'->300000, '1h'->3600000, '4h'->14400000"""
window_str = (window_str or "30m").strip().lower()
if window_str.endswith("h"):
return int(window_str[:-1]) * 3600 * 1000
elif window_str.endswith("m"):
return int(window_str[:-1]) * 60 * 1000
return 30 * 60 * 1000 # fallback 30min
def _evaluate_v53(self, now_ms: int, strategy_cfg: dict, snapshot: Optional[dict] = None) -> dict:
"""
V5.3 统一评分（BTC/ETH/XRP/SOL）
@ -828,31 +838,36 @@ class SymbolState:
strategy_name = strategy_cfg.get("name", "v53")
strategy_threshold = int(strategy_cfg.get("threshold", 75))
flip_threshold = int(strategy_cfg.get("flip_threshold", 85))
is_fast = strategy_name.endswith("_fast")
snap = snapshot or self.build_evaluation_snapshot(now_ms)
# v53_fast: 用自定义短窗口重算 cvd_fast / cvd_mid
if is_fast:
fast_ms = int(strategy_cfg.get("cvd_window_fast_ms", 5 * 60 * 1000))
mid_ms = int(strategy_cfg.get("cvd_window_mid_ms", 30 * 60 * 1000))
# 按策略配置的 cvd_fast_window / cvd_slow_window 动态切片重算CVD
# 支持 5m/15m/30m/1h/4h 所有组合
cvd_fast_window = strategy_cfg.get("cvd_fast_window", "30m")
cvd_slow_window = strategy_cfg.get("cvd_slow_window", "4h")
fast_ms = _window_ms(cvd_fast_window)
slow_ms = _window_ms(cvd_slow_window)
# 默认窗口 (30m/4h) 直接用快照，否则从 trades 列表切片重算
if cvd_fast_window == "30m" and cvd_slow_window == "4h":
cvd_fast = snap["cvd_fast"]
cvd_mid = snap["cvd_mid"]
else:
cutoff_fast = now_ms - fast_ms
cutoff_mid = now_ms - mid_ms
cutoff_slow = now_ms - slow_ms
buy_f = sell_f = buy_m = sell_m = 0.0
for t_ms, qty, _price, ibm in self.win_fast.trades:
# fast: 从 win_fast (30min) 或 win_mid (4h) 中切片
src_fast = self.win_mid if fast_ms > WINDOW_FAST else self.win_fast
for t_ms, qty, _price, ibm in src_fast.trades:
if t_ms >= cutoff_fast:
if ibm == 0: buy_f += qty
else: sell_f += qty
# mid 从 win_mid 中读（win_mid 窗口是4h，包含30min内数据）
# slow: 从 win_mid (4h) 中切片
for t_ms, qty, _price, ibm in self.win_mid.trades:
if t_ms >= cutoff_mid:
if t_ms >= cutoff_slow:
if ibm == 0: buy_m += qty
else: sell_m += qty
cvd_fast = buy_f - sell_f
cvd_mid = buy_m - sell_m
else:
cvd_fast = snap["cvd_fast"]
cvd_mid = snap["cvd_mid"]
price = snap["price"]
atr = snap["atr"]

367
frontend/app/strategy-plaza/[id]/PaperGeneric.tsx Normal file
View File

@ -0,0 +1,367 @@
"use client";
import { useState, useEffect } from "react";
import { authFetch } 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 });
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function parseFactors(raw: any) {
if (!raw) return null;
if (typeof raw === "string") { try { return JSON.parse(raw); } catch { return null; } }
return raw;
}
interface Props {
strategyId: string;
symbol: string;
}
type FilterResult = "all" | "win" | "loss";
type FilterSymbol = "all" | string;
// ─── 控制面板（策略启停）─────────────────────────────────────────
function ControlPanel({ strategyId }: { strategyId: string }) {
const [status, setStatus] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
useEffect(() => {
(async () => {
try {
const r = await authFetch(`/api/strategies/${strategyId}`);
if (r.ok) { const j = await r.json(); setStatus(j.status); }
} catch {}
})();
}, [strategyId]);
const toggle = async () => {
setSaving(true);
const newStatus = status === "running" ? "paused" : "running";
try {
const r = await authFetch(`/api/strategies/${strategyId}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ status: newStatus }),
});
if (r.ok) setStatus(newStatus);
} catch {} finally { setSaving(false); }
};
if (!status) return null;
return (
<div className={`rounded-xl border-2 ${status === "running" ? "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 ${status === "running" ? "bg-red-500 text-white hover:bg-red-600" : "bg-emerald-500 text-white hover:bg-emerald-600"}`}>
{saving ? "..." : status === "running" ? "⏹ 暂停" : "▶️ 启动"}
</button>
<span className={`text-xs font-medium ${status === "running" ? "text-emerald-700" : "text-slate-500"}`}>
{status === "running" ? "🟢 运行中" : "⚪ 已暂停"}
</span>
</div>
</div>
);
}
// ─── 总览卡片 ────────────────────────────────────────────────────
function SummaryCards({ strategyId }: { strategyId: string }) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [data, setData] = useState<any>(null);
useEffect(() => {
const f = async () => {
try {
const r = await authFetch(`/api/paper/summary?strategy_id=${strategyId}`);
if (r.ok) setData(await r.json());
} catch {}
};
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
}, [strategyId]);
if (!data) return <div className="text-center text-slate-400 text-sm py-4">加载中...</div>;
return (
<div className="grid grid-cols-3 lg:grid-cols-6 gap-1.5">
{[
{ label: "总盈亏(R)", value: `${data.total_pnl >= 0 ? "+" : ""}${data.total_pnl}R`, sub: `${data.total_pnl_usdt >= 0 ? "+" : ""}$${data.total_pnl_usdt}`, color: data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500" },
{ label: "胜率", value: `${data.win_rate}%`, sub: `共${data.total_trades}笔`, color: "text-slate-800" },
{ label: "持仓中", value: data.active_positions, sub: "活跃仓位", color: "text-blue-600" },
{ label: "盈亏比", value: data.profit_factor, sub: "PF", color: "text-slate-800" },
{ label: "当前资金", value: `$${data.balance?.toLocaleString()}`, sub: "虚拟余额", color: data.balance >= 10000 ? "text-emerald-600" : "text-red-500" },
{ label: "状态", value: data.start_time ? "运行中 ✅" : "等待首笔", sub: "accumulating", color: "text-slate-600" },
].map(({ label, value, sub, color }) => (
<div key={label} className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
<p className="text-[10px] text-slate-400">{label}</p>
<p className={`font-mono font-bold text-base ${color}`}>{value}</p>
<p className="text-[10px] text-slate-400">{sub}</p>
</div>
))}
</div>
);
}
// ─── 当前持仓 ────────────────────────────────────────────────────
function ActivePositions({ strategyId }: { strategyId: string }) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [positions, setPositions] = useState<any[]>([]);
const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
const RISK_USD = 200; // 1R = 200 USDT
useEffect(() => {
const f = async () => {
try {
const r = await authFetch(`/api/paper/positions?strategy_id=${strategyId}`);
if (r.ok) setPositions((await r.json()).data || []);
} catch {}
};
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
}, [strategyId]);
useEffect(() => {
const streams = ["btcusdt", "ethusdt", "xrpusdt", "solusdt"].map(s => `${s}@aggTrade`).join("/");
const ws = new WebSocket(`wss://fstream.binance.com/stream?streams=${streams}`);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ws.onmessage = (e) => { try { const msg = JSON.parse(e.data); if (msg.data) { const sym = msg.data.s; const price = parseFloat(msg.data.p); if (sym && price > 0) setWsPrices(prev => ({ ...prev, [sym]: price })); } } catch {} };
return () => ws.close();
}, []);
if (positions.length === 0) return <div className="rounded-xl border border-slate-200 bg-white px-3 py-4 text-center text-slate-400 text-sm">暂无活跃持仓</div>;
return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">当前持仓 <span className="text-[10px] text-emerald-500 font-normal">● 实时</span></h3></div>
<div className="divide-y divide-slate-100">
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
{positions.map((p: any) => {
const sym = p.symbol?.replace("USDT", "") || "";
const holdMin = Math.round((Date.now() - p.entry_ts) / 60000);
const currentPrice = wsPrices[p.symbol] || p.current_price || 0;
const entry = p.entry_price || 0;
const riskDist = p.risk_distance || Math.abs(entry - (p.sl_price || entry)) || 1;
const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
const unrealUsdt = unrealR * RISK_USD;
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="text-[10px] text-slate-500">评分{p.score}</span>
</div>
<div className="flex items-center gap-2">
<span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>{unrealR >= 0 ? "+" : ""}{unrealR.toFixed(2)}R</span>
<span className={`text-[10px] ${unrealUsdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>${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 text-[9px] text-slate-400">
入场: {p.entry_ts ? bjt(p.entry_ts) : "-"}
</div>
</div>
);
})}
</div>
</div>
);
}
// ─── 权益曲线 ────────────────────────────────────────────────────
function EquityCurve({ strategyId }: { strategyId: string }) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [data, setData] = useState<any[]>([]);
useEffect(() => {
const f = async () => {
try {
const r = await authFetch(`/api/paper/equity-curve?strategy_id=${strategyId}`);
if (r.ok) setData((await r.json()).data || []);
} catch {}
};
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
}, [strategyId]);
return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">权益曲线</h3></div>
{data.length < 2 ? <div className="px-3 py-6 text-center text-xs text-slate-400">数据积累中...</div> : (
<div className="p-2" style={{ height: 200 }}>
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data}>
<XAxis dataKey="ts" tickFormatter={(v) => bjt(Number(v))} tick={{ fontSize: 10 }} />
<YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}R`} />
<Tooltip labelFormatter={(v) => bjt(Number(v))} formatter={(v: unknown) => [`${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>
);
}
// ─── 历史交易 ────────────────────────────────────────────────────
function TradeHistory({ strategyId }: { strategyId: string }) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [trades, setTrades] = useState<any[]>([]);
const [filterResult, setFilterResult] = useState<FilterResult>("all");
const [filterSym, setFilterSym] = useState<FilterSymbol>("all");
useEffect(() => {
const f = async () => {
try {
const r = await authFetch(`/api/paper/trades?strategy_id=${strategyId}&result=${filterResult}&symbol=${filterSym}&limit=50`);
if (r.ok) setTrades((await r.json()).data || []);
} catch {}
};
f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
}, [strategyId, filterResult, filterSym]);
const fmtTime = (ms: number) => ms ? bjt(ms) : "-";
const STATUS_LABEL: Record<string, string> = { tp: "止盈", sl: "止损", sl_be: "保本", timeout: "超时", signal_flip: "翻转" };
const STATUS_COLOR: Record<string, string> = { tp: "bg-emerald-100 text-emerald-700", sl: "bg-red-100 text-red-700", sl_be: "bg-amber-100 text-amber-700", signal_flip: "bg-purple-100 text-purple-700", timeout: "bg-slate-100 text-slate-600" };
return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
<h3 className="font-semibold text-slate-800 text-xs">历史交易</h3>
<div className="flex items-center gap-1 flex-wrap">
{(["all", "BTC", "ETH", "XRP", "SOL"] as FilterSymbol[]).map(s => (
<button key={s} onClick={() => setFilterSym(s)} className={`px-2 py-0.5 rounded text-[10px] ${filterSym === 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={() => setFilterResult(r)} className={`px-2 py-0.5 rounded text-[10px] ${filterResult === r ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>{r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"}</button>
))}
</div>
</div>
<div className="max-h-64 overflow-y-auto">
{trades.length === 0 ? <div className="text-center text-slate-400 text-sm py-6">暂无交易记录</div> : (
<table className="w-full text-[11px]">
<thead className="bg-slate-50 sticky top-0">
<tr className="text-slate-500">
<th className="px-2 py-1.5 text-left font-medium">币种</th>
<th className="px-2 py-1.5 text-left font-medium">方向</th>
<th className="px-2 py-1.5 text-right font-medium">入场价</th>
<th className="px-2 py-1.5 text-right font-medium">出场价</th>
<th className="px-2 py-1.5 text-right font-medium">PnL(R)</th>
<th className="px-2 py-1.5 text-center font-medium">状态</th>
<th className="px-2 py-1.5 text-right font-medium">分数</th>
<th className="px-2 py-1.5 text-right font-medium">入场时间</th>
<th className="px-2 py-1.5 text-right font-medium">出场时间</th>
<th className="px-2 py-1.5 text-right font-medium">持仓</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-50">
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
{trades.map((t: any) => {
const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0;
return (
<tr key={t.id} className="hover:bg-slate-50">
<td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT", "")}</td>
<td className={`px-2 py-1.5 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>{t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}</td>
<td className="px-2 py-1.5 text-right font-mono">{fmtPrice(t.entry_price)}</td>
<td className="px-2 py-1.5 text-right font-mono">{t.exit_price ? fmtPrice(t.exit_price) : "-"}</td>
<td className={`px-2 py-1.5 text-right font-mono font-bold ${t.pnl_r > 0 ? "text-emerald-600" : t.pnl_r < 0 ? "text-red-500" : "text-slate-500"}`}>{t.pnl_r > 0 ? "+" : ""}{t.pnl_r?.toFixed(2)}</td>
<td className="px-2 py-1.5 text-center"><span className={`px-1 py-0.5 rounded text-[9px] ${STATUS_COLOR[t.status] || "bg-slate-100 text-slate-600"}`}>{STATUS_LABEL[t.status] || t.status}</span></td>
<td className="px-2 py-1.5 text-right font-mono">{t.score}</td>
<td className="px-2 py-1.5 text-right text-slate-400 whitespace-nowrap">{fmtTime(t.entry_ts)}</td>
<td className="px-2 py-1.5 text-right text-slate-400 whitespace-nowrap">{fmtTime(t.exit_ts)}</td>
<td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
</tr>
);
})}
</tbody>
</table>
)}
</div>
</div>
);
}
// ─── 详细统计 ────────────────────────────────────────────────────
function StatsPanel({ strategyId }: { strategyId: string }) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [data, setData] = useState<any>(null);
const [tab, setTab] = useState("ALL");
useEffect(() => {
const f = async () => {
try {
const r = await authFetch(`/api/paper/stats?strategy_id=${strategyId}`);
if (r.ok) setData(await r.json());
} catch {}
};
f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
}, [strategyId]);
if (!data || data.error) return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">详细统计</h3></div>
<div className="p-3 text-xs text-slate-400">等待交易记录积累...</div>
</div>
);
const coinTabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
return (
<div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
<h3 className="font-semibold text-slate-800 text-xs">详细统计</h3>
<div className="flex items-center gap-1">
{coinTabs.map(t => (
<button key={t} onClick={() => setTab(t)} className={`px-2 py-0.5 rounded text-[10px] font-medium transition-colors ${tab === t ? "bg-slate-800 text-white" : "bg-slate-100 text-slate-500 hover:bg-slate-200"}`}>{t === "ALL" ? "总计" : t}</button>
))}
</div>
</div>
{st ? (
<div className="p-3">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
<div><span className="text-slate-400">胜率</span><p className="font-mono font-bold">{st.win_rate}%</p></div>
<div><span className="text-slate-400">盈亏比</span><p className="font-mono font-bold">{st.win_loss_ratio}</p></div>
<div><span className="text-slate-400">平均盈利</span><p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p></div>
<div><span className="text-slate-400">平均亏损</span><p className="font-mono font-bold text-red-500">-{st.avg_loss}R</p></div>
<div><span className="text-slate-400">最大回撤</span><p className="font-mono font-bold">{st.mdd}R</p></div>
<div><span className="text-slate-400">夏普比率</span><p className="font-mono font-bold">{st.sharpe}</p></div>
<div><span className="text-slate-400">总盈亏</span><p className={`font-mono font-bold ${(st.total_pnl ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>{(st.total_pnl ?? 0) >= 0 ? "+" : ""}{st.total_pnl ?? "-"}R</p></div>
<div><span className="text-slate-400">总笔数</span><p className="font-mono font-bold">{st.total ?? data.total}</p></div>
<div><span className="text-slate-400">做多胜率</span><p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p></div>
<div><span className="text-slate-400">做空胜率</span><p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p></div>
</div>
</div>
) : <div className="p-3 text-xs text-slate-400">该币种暂无数据</div>}
</div>
);
}
// ─── 主组件 ──────────────────────────────────────────────────────
export default function PaperGeneric({ strategyId, symbol }: Props) {
return (
<div className="space-y-3 p-1">
<div>
<h2 className="text-sm font-bold text-slate-900">📈 模拟盘</h2>
<p className="text-[10px] text-slate-500">{symbol.replace("USDT", "")} · strategy_id: {strategyId.slice(0, 8)}...</p>
</div>
<ControlPanel strategyId={strategyId} />
<SummaryCards strategyId={strategyId} />
<ActivePositions strategyId={strategyId} />
<EquityCurve strategyId={strategyId} />
<TradeHistory strategyId={strategyId} />
<StatsPanel strategyId={strategyId} />
</div>
);
}

446
frontend/app/strategy-plaza/[id]/SignalsGeneric.tsx Normal file
View File

@ -0,0 +1,446 @@
"use client";
import { useEffect, useState, useCallback } from "react";
import { authFetch } from "@/lib/auth";
import {
ComposedChart, Area, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
ReferenceLine, CartesianGrid, Legend
} from "recharts";
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;
gate_passed?: boolean;
factors?: {
gate_passed?: boolean;
gate_block?: string;
block_reason?: string;
obi_raw?: number;
spot_perp_div?: number;
whale_cvd_ratio?: number;
atr_pct_price?: number;
direction?: { score?: number; max?: number };
crowding?: { score?: number; max?: number };
environment?: { score?: number; max?: number };
auxiliary?: { score?: number; max?: number };
} | null;
}
interface SignalRecord {
ts: number;
score: number;
signal: string;
}
interface Gates {
obi_threshold: number;
whale_usd_threshold: number;
whale_flow_pct: number;
vol_atr_pct_min: number;
spot_perp_threshold: number;
}
interface Weights {
direction: number;
env: number;
aux: number;
momentum: number;
}
interface Props {
strategyId: string;
symbol: string;
cvdFastWindow: string;
cvdSlowWindow: string;
weights: Weights;
gates: Gates;
}
const WINDOWS = [
{ label: "1h", value: 60 },
{ label: "4h", value: 240 },
{ label: "12h", value: 720 },
{ label: "24h", value: 1440 },
];
function bjtStr(ms: number) {
const d = new Date(ms + 8 * 3600 * 1000);
return `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
}
function bjtFull(ms: number) {
const d = new Date(ms + 8 * 3600 * 1000);
return `${String(d.getUTCMonth() + 1).padStart(2, "0")}-${String(d.getUTCDate()).padStart(2, "0")} ${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}:${String(d.getUTCSeconds()).padStart(2, "0")}`;
}
function fmt(v: number, decimals = 1): string {
if (Math.abs(v) >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(1)}K`;
return v.toFixed(decimals);
}
function LayerScore({ label, score, max, colorClass }: { label: string; score: number; max: number; colorClass: string }) {
const ratio = Math.max(0, Math.min((score / max) * 100, 100));
return (
<div className="flex items-center gap-2">
<span className="text-[10px] text-slate-500 w-6 shrink-0">{label}</span>
<div className="flex-1 h-1.5 rounded-full bg-slate-100 overflow-hidden">
<div className={`h-full ${colorClass}`} style={{ width: `${ratio}%` }} />
</div>
<span className="text-[10px] font-mono text-slate-600 w-12 text-right">{score}/{max}</span>
</div>
);
}
function GateCard({ factors, gates }: { factors: LatestIndicator["factors"]; gates: Gates }) {
if (!factors) return null;
const passed = factors.gate_passed ?? true;
const blockReason = factors.gate_block || factors.block_reason;
return (
<div className={`rounded-xl border px-3 py-2 mt-2 ${passed ? "border-purple-200 bg-purple-50" : "border-red-200 bg-red-50"}`}>
<div className="flex items-center justify-between mb-1.5">
<p className="text-[10px] font-semibold text-purple-800">🔒 Gate-Control</p>
<span className={`text-[10px] font-bold px-2 py-0.5 rounded ${passed ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
{passed ? "✅ Gate通过" : "❌ 否决"}
</span>
</div>
<div className="grid grid-cols-4 gap-1.5">
<div className="bg-white rounded px-2 py-1">
<p className="text-[10px] text-slate-400">波动率</p>
<p className="text-xs font-mono text-slate-800">{((factors.atr_pct_price ?? 0) * 100).toFixed(3)}%</p>
<p className="text-[9px] text-slate-400">需 ≥{(gates.vol_atr_pct_min * 100).toFixed(2)}%</p>
</div>
<div className="bg-white rounded px-2 py-1">
<p className="text-[10px] text-slate-400">OBI</p>
<p className={`text-xs font-mono ${(factors.obi_raw ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
{((factors.obi_raw ?? 0) * 100).toFixed(2)}%
</p>
<p className="text-[9px] text-slate-400">否决±{gates.obi_threshold}</p>
</div>
<div className="bg-white rounded px-2 py-1">
<p className="text-[10px] text-slate-400">期现背离</p>
<p className={`text-xs font-mono ${(factors.spot_perp_div ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>
{((factors.spot_perp_div ?? 0) * 10000).toFixed(2)}bps
</p>
<p className="text-[9px] text-slate-400">否决±{(gates.spot_perp_threshold * 100).toFixed(1)}%</p>
</div>
<div className="bg-white rounded px-2 py-1">
<p className="text-[10px] text-slate-400">鲸鱼</p>
<p className="text-xs font-mono text-slate-800">${(gates.whale_usd_threshold / 1000).toFixed(0)}k</p>
<p className="text-[9px] text-slate-400">{">"}{(gates.whale_flow_pct * 100).toFixed(0)}%占比</p>
</div>
</div>
{blockReason && (
<p className="text-[10px] text-red-600 mt-1.5 bg-red-50 rounded px-2 py-1">
否决原因: <span className="font-mono">{blockReason}</span>
</p>
)}
</div>
);
}
function IndicatorCards({ sym, strategyName, cvdFastWindow, cvdSlowWindow, weights, gates }: {
sym: string; strategyName: string; cvdFastWindow: string; cvdSlowWindow: string; weights: Weights; gates: Gates;
}) {
const [data, setData] = useState<LatestIndicator | null>(null);
const coin = sym.replace("USDT", "") as "BTC" | "ETH" | "XRP" | "SOL";
useEffect(() => {
const fetch_ = async () => {
try {
const res = await authFetch(`/api/signals/latest?strategy=${strategyName}`);
if (!res.ok) return;
const json = await res.json();
setData(json[coin] || null);
} catch {}
};
fetch_();
const iv = setInterval(fetch_, 5000);
return () => clearInterval(iv);
}, [coin, strategyName]);
if (!data) return <div className="text-center text-slate-400 text-sm py-4">等待指标数据...</div>;
const priceVsVwap = data.price > data.vwap_30m ? "上方" : "下方";
const totalWeight = weights.direction + weights.env + weights.aux + weights.momentum;
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 ({cvdFastWindow})</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_slow ({cvdSlowWindow})</p>
<p className={`font-mono font-bold text-sm ${data.cvd_mid >= 0 ? "text-emerald-600" : "text-red-500"}`}>
{fmt(data.cvd_mid)}
</p>
<p className="text-[10px] text-slate-400">{data.cvd_mid > 0 ? "多" : "空"}头占优</p>
</div>
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
<p className="text-[10px] text-slate-400">CVD共振</p>
<p className={`font-mono font-bold text-sm ${data.cvd_fast >= 0 && data.cvd_mid >= 0 ? "text-emerald-600" : data.cvd_fast < 0 && data.cvd_mid < 0 ? "text-red-500" : "text-slate-400"}`}>
{data.cvd_fast >= 0 && data.cvd_mid >= 0 ? "✅ 多头共振" : data.cvd_fast < 0 && data.cvd_mid < 0 ? "✅ 空头共振" : "⚠️ 分歧"}
</p>
<p className="text-[10px] text-slate-400">双周期共振</p>
</div>
</div>
{/* ATR + VWAP + P95/P99 */}
<div className="grid grid-cols-4 gap-1.5">
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
<p className="text-[10px] text-slate-400">ATR</p>
<p className="font-mono font-semibold text-sm text-slate-800">${fmt(data.atr_5m, 2)}</p>
<p className="text-[10px]">
<span className={data.atr_percentile > 60 ? "text-amber-600 font-semibold" : "text-slate-400"}>
{data.atr_percentile.toFixed(0)}%{data.atr_percentile > 60 ? "🔥" : ""}
</span>
</p>
</div>
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
<p className="text-[10px] text-slate-400">VWAP</p>
<p className="font-mono font-semibold text-sm text-slate-800">${data.vwap_30m.toLocaleString("en-US", { maximumFractionDigits: 1 })}</p>
<p className="text-[10px]">价格在<span className={data.price > data.vwap_30m ? "text-emerald-600" : "text-red-500"}>{priceVsVwap}</span></p>
</div>
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
<p className="text-[10px] text-slate-400">P95</p>
<p className="font-mono font-semibold text-sm text-slate-800">{data.p95_qty?.toFixed(4) ?? "-"}</p>
<p className="text-[10px] text-slate-400">大单阈值</p>
</div>
<div className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
<p className="text-[10px] text-slate-400">P99</p>
<p className="font-mono font-semibold text-sm text-amber-600">{data.p99_qty?.toFixed(4) ?? "-"}</p>
<p className="text-[10px] text-slate-400">超大单</p>
</div>
</div>
{/* 信号状态 + 四层分 */}
<div className={`rounded-xl border px-3 py-2.5 ${
data.signal === "LONG" ? "border-emerald-300 bg-emerald-50" :
data.signal === "SHORT" ? "border-red-300 bg-red-50" :
"border-slate-200 bg-slate-50"
}`}>
<div className="flex items-center justify-between">
<div>
<p className="text-[10px] text-slate-500">四层评分 · {coin}</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}/{totalWeight}</p>
<p className="text-[10px] text-slate-500">
{data.tier === "heavy" ? "加仓" : data.tier === "standard" ? "标准" : "不开仓"}
</p>
</div>
</div>
<div className="mt-2 space-y-1">
<LayerScore label="方向" score={data.factors?.direction?.score ?? 0} max={weights.direction} colorClass="bg-blue-600" />
<LayerScore label="环境" score={data.factors?.environment?.score ?? 0} max={weights.env} colorClass="bg-emerald-600" />
<LayerScore label="辅助" score={data.factors?.auxiliary?.score ?? 0} max={weights.aux} colorClass="bg-violet-600" />
<LayerScore label="动量" score={data.factors?.crowding?.score ?? 0} max={weights.momentum} colorClass="bg-slate-500" />
</div>
</div>
{/* Gate 卡片 */}
<GateCard factors={data.factors} gates={gates} />
</div>
);
}
function SignalHistory({ coin, strategyName }: { coin: string; strategyName: string }) {
const [data, setData] = useState<SignalRecord[]>([]);
useEffect(() => {
const fetchData = async () => {
try {
const res = await authFetch(`/api/signals/signal-history?symbol=${coin}&limit=20&strategy=${strategyName}`);
if (!res.ok) return;
const json = await res.json();
setData(json.data || []);
} catch {}
};
fetchData();
const iv = setInterval(fetchData, 15000);
return () => clearInterval(iv);
}, [coin, strategyName]);
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>
<span className="font-mono text-xs text-slate-700">{s.score}</span>
</div>
))}
</div>
</div>
);
}
function CVDChart({ sym, minutes, strategyName, cvdFastWindow, cvdSlowWindow }: {
sym: string; minutes: number; strategyName: string; cvdFastWindow: string; cvdSlowWindow: string;
}) {
const [data, setData] = useState<IndicatorRow[]>([]);
const [loading, setLoading] = useState(true);
const coin = sym.replace("USDT", "");
const fetchData = useCallback(async (silent = false) => {
try {
const res = await authFetch(`/api/signals/indicators?symbol=${coin}&minutes=${minutes}&strategy=${strategyName}`);
if (!res.ok) return;
const json = await res.json();
setData(json.data || []);
if (!silent) setLoading(false);
} catch {}
}, [coin, minutes, strategyName]);
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">暂无指标数据，等待积累...</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(${cvdFastWindow})`];
return [fmt(Number(v)), `CVD_slow(${cvdSlowWindow})`];
}}
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 SignalsGeneric({ strategyId, symbol, cvdFastWindow, cvdSlowWindow, weights, gates }: Props) {
const [minutes, setMinutes] = useState(240);
const coin = symbol.replace("USDT", "");
const strategyName = `custom_${strategyId.slice(0, 8)}`;
return (
<div className="space-y-3 p-1">
<div className="flex items-center justify-between flex-wrap gap-2">
<div>
<h2 className="text-sm font-bold text-slate-900">⚡ 信号引擎</h2>
<p className="text-slate-500 text-[10px]">
CVD {cvdFastWindow}/{cvdSlowWindow} · 权重 {weights.direction}/{weights.env}/{weights.aux}/{weights.momentum} · {coin}
</p>
</div>
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700 border border-blue-200">{coin}</span>
</div>
<IndicatorCards
sym={symbol}
strategyName={strategyName}
cvdFastWindow={cvdFastWindow}
cvdSlowWindow={cvdSlowWindow}
weights={weights}
gates={gates}
/>
<SignalHistory coin={coin} strategyName={strategyName} />
<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({cvdFastWindow}) · 紫=slow({cvdSlowWindow}) · 橙=价格</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 sym={symbol} minutes={minutes} strategyName={strategyName} cvdFastWindow={cvdFastWindow} cvdSlowWindow={cvdSlowWindow} />
</div>
</div>
</div>
);
}

37
frontend/app/strategy-plaza/[id]/page.tsx
View File

@ -21,6 +21,8 @@ const SignalsV53Middle = dynamic(() => import("@/app/signals-v53middle/page"), {
const PaperV53 = dynamic(() => import("@/app/paper-v53/page"), { ssr: false });
const PaperV53Fast = dynamic(() => import("@/app/paper-v53fast/page"), { ssr: false });
const PaperV53Middle = dynamic(() => import("@/app/paper-v53middle/page"), { ssr: false });
const SignalsGeneric = dynamic(() => import("./SignalsGeneric"), { ssr: false });
const PaperGeneric = dynamic(() => import("./PaperGeneric"), { ssr: false });
// ─── UUID → legacy strategy name map ─────────────────────────────
const UUID_TO_LEGACY: Record<string, string> = {
@ -51,6 +53,7 @@ interface StrategySummary {
cvd_fast_window?: string;
cvd_slow_window?: string;
description?: string;
symbol?: string;
}
interface StrategyDetail {
@ -182,20 +185,42 @@ function ConfigTab({ detail, strategyId }: { detail: StrategyDetail; strategyId:
}
// ─── Content router ───────────────────────────────────────────────
function SignalsContent({ strategyId }: { strategyId: string }) {
function SignalsContent({ strategyId, symbol, detail }: { strategyId: string; symbol?: string; detail?: StrategyDetail | null }) {
const legacy = UUID_TO_LEGACY[strategyId] || strategyId;
if (legacy === "v53") return <SignalsV53 />;
if (legacy === "v53_fast") return <SignalsV53Fast />;
if (legacy === "v53_middle") return <SignalsV53Middle />;
return <div className="p-8 text-gray-400">暂无信号引擎页面</div>;
const weights = detail ? {
direction: detail.weight_direction,
env: detail.weight_env,
aux: detail.weight_aux,
momentum: detail.weight_momentum,
} : { direction: 38, env: 32, aux: 28, momentum: 2 };
const gates = detail ? {
obi_threshold: detail.obi_threshold,
whale_usd_threshold: detail.whale_usd_threshold,
whale_flow_pct: detail.whale_flow_pct,
vol_atr_pct_min: detail.vol_atr_pct_min,
spot_perp_threshold: detail.spot_perp_threshold,
} : { obi_threshold: 0.3, whale_usd_threshold: 100000, whale_flow_pct: 0.5, vol_atr_pct_min: 0.002, spot_perp_threshold: 0.003 };
return (
<SignalsGeneric
strategyId={strategyId}
symbol={symbol || "BTCUSDT"}
cvdFastWindow={detail?.cvd_fast_window || "15m"}
cvdSlowWindow={detail?.cvd_slow_window || "1h"}
weights={weights}
gates={gates}
/>
);
}
function PaperContent({ strategyId }: { strategyId: string }) {
function PaperContent({ strategyId, symbol }: { strategyId: string; symbol?: string }) {
const legacy = UUID_TO_LEGACY[strategyId] || strategyId;
if (legacy === "v53") return <PaperV53 />;
if (legacy === "v53_fast") return <PaperV53Fast />;
if (legacy === "v53_middle") return <PaperV53Middle />;
return <div className="p-8 text-gray-400">暂无模拟盘页面</div>;
return <PaperGeneric strategyId={strategyId} symbol={symbol || "BTCUSDT"} />;
}
// ─── Main Page ────────────────────────────────────────────────────
@ -350,8 +375,8 @@ export default function StrategyDetailPage() {
{/* Content */}
<div>
{tab === "signals" && <SignalsContent strategyId={strategyId} />}
{tab === "paper" && <PaperContent strategyId={strategyId} />}
{tab === "signals" && <SignalsContent strategyId={strategyId} symbol={summary?.symbol} detail={detail} />}
{tab === "paper" && <PaperContent strategyId={strategyId} symbol={summary?.symbol} />}
{tab === "config" && detail && <ConfigTab detail={detail} strategyId={strategyId} />}
{tab === "config" && !detail && (
<div className="text-center text-slate-400 text-sm py-16">暂无配置信息</div>