feat: V5 signals page - CVD三轨+ATR+VWAP+大单阈值实时展示+信号状态
This commit is contained in:
root
parent
547f093352
commit
35fcb7cef0
@ -1,60 +1,321 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState, useCallback } from "react";
|
||||||
import { api, SignalHistoryItem } from "@/lib/api";
|
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";
|
||||||
|
|
||||||
export default function SignalsPage() {
|
type Symbol = "BTC" | "ETH";
|
||||||
const [items, setItems] = useState<SignalHistoryItem[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
interface IndicatorRow {
|
||||||
const [error, setError] = useState("");
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 IndicatorCards({ symbol }: { symbol: Symbol }) {
|
||||||
|
const [data, setData] = useState<LatestIndicator | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const run = async () => {
|
const fetch = async () => {
|
||||||
try {
|
try {
|
||||||
const data = await api.signalsHistory();
|
const res = await authFetch("/api/signals/latest");
|
||||||
setItems(data.items || []);
|
if (!res.ok) return;
|
||||||
} catch {
|
const json = await res.json();
|
||||||
setError("加载信号历史失败");
|
setData(json[symbol] || null);
|
||||||
} finally {
|
} catch {}
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
run();
|
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 cvdFastDir = data.cvd_fast > 0 ? "多" : "空";
|
||||||
|
const cvdMidDir = data.cvd_mid > 0 ? "多" : "空";
|
||||||
|
const priceVsVwap = data.price > data.vwap_30m ? "上方" : "下方";
|
||||||
|
|
||||||
|
// 核心条件检查
|
||||||
|
const core1 = data.cvd_fast > 0 && data.cvd_fast_slope > 0 ? "✅" : data.cvd_fast < 0 && data.cvd_fast_slope < 0 ? "✅空" : "⬜";
|
||||||
|
const core2 = data.cvd_mid !== 0 ? "✅" : "⬜";
|
||||||
|
const core3 = data.price !== data.vwap_30m ? "✅" : "⬜";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-3">
|
||||||
<h1 className="text-2xl font-bold text-slate-900">信号历史</h1>
|
{/* CVD三轨 */}
|
||||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm p-4 overflow-x-auto">
|
<div className="grid grid-cols-3 gap-2">
|
||||||
{loading ? <p className="text-slate-400">加载中...</p> : null}
|
<div className="bg-white rounded-lg border border-slate-200 p-3">
|
||||||
{error ? <p className="text-red-500">{error}</p> : null}
|
<p className="text-xs text-slate-400">CVD_fast (30m)</p>
|
||||||
{!loading && !error ? (
|
<p className={`font-mono font-bold text-lg ${data.cvd_fast >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
<table className="w-full text-sm">
|
{fmt(data.cvd_fast)}
|
||||||
<thead>
|
</p>
|
||||||
<tr className="text-slate-500 border-b border-slate-200">
|
<p className="text-xs text-slate-400 mt-0.5">
|
||||||
<th className="text-left py-2">时间</th>
|
斜率: <span className={data.cvd_fast_slope >= 0 ? "text-emerald-600" : "text-red-500"}>
|
||||||
<th className="text-left py-2">币种</th>
|
{data.cvd_fast_slope >= 0 ? "↑" : "↓"} {fmt(Math.abs(data.cvd_fast_slope))}
|
||||||
<th className="text-left py-2">年化</th>
|
</span>
|
||||||
<th className="text-left py-2">信号类型</th>
|
</p>
|
||||||
</tr>
|
</div>
|
||||||
</thead>
|
<div className="bg-white rounded-lg border border-slate-200 p-3">
|
||||||
<tbody>
|
<p className="text-xs text-slate-400">CVD_mid (4h)</p>
|
||||||
{items.map((row) => (
|
<p className={`font-mono font-bold text-lg ${data.cvd_mid >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
<tr key={row.id} className="border-b border-slate-100 text-slate-700">
|
{fmt(data.cvd_mid)}
|
||||||
<td className="py-2">{new Date(row.sent_at).toLocaleString("zh-CN")}</td>
|
</p>
|
||||||
<td className="py-2 font-medium">{row.symbol}</td>
|
<p className="text-xs text-slate-400 mt-0.5">大方向: {cvdMidDir}头占优</p>
|
||||||
<td className="py-2 text-blue-600 font-mono">{row.annualized}%</td>
|
</div>
|
||||||
<td className="py-2 text-slate-500">资金费率套利信号</td>
|
<div className="bg-white rounded-lg border border-slate-200 p-3">
|
||||||
</tr>
|
<p className="text-xs text-slate-400">CVD_day (日内)</p>
|
||||||
))}
|
<p className={`font-mono font-bold text-lg ${data.cvd_day >= 0 ? "text-emerald-600" : "text-red-500"}`}>
|
||||||
{!items.length ? (
|
{fmt(data.cvd_day)}
|
||||||
<tr>
|
</p>
|
||||||
<td className="py-3 text-slate-400" colSpan={4}>暂无信号记录（费率超10%时自动触发）</td>
|
<p className="text-xs text-slate-400 mt-0.5">盘中基线</p>
|
||||||
</tr>
|
</div>
|
||||||
) : null}
|
</div>
|
||||||
</tbody>
|
|
||||||
</table>
|
{/* ATR + VWAP + 大单 */}
|
||||||
) : null}
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-3">
|
||||||
|
<p className="text-xs text-slate-400">ATR (5m×14)</p>
|
||||||
|
<p className="font-mono font-semibold text-slate-800">${fmt(data.atr_5m, 2)}</p>
|
||||||
|
<p className="text-xs text-slate-400 mt-0.5">
|
||||||
|
分位: <span className={data.atr_percentile > 60 ? "text-amber-600 font-semibold" : "text-slate-500"}>
|
||||||
|
{data.atr_percentile.toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
{data.atr_percentile > 60 ? " 🔥扩张" : data.atr_percentile < 40 ? " 压缩" : ""}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-3">
|
||||||
|
<p className="text-xs text-slate-400">VWAP (30m)</p>
|
||||||
|
<p className="font-mono font-semibold text-slate-800">${data.vwap_30m.toLocaleString("en-US", { maximumFractionDigits: 1 })}</p>
|
||||||
|
<p className="text-xs text-slate-400 mt-0.5">
|
||||||
|
价格在VWAP<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 p-3">
|
||||||
|
<p className="text-xs text-slate-400">大单阈值 P95</p>
|
||||||
|
<p className="font-mono font-semibold text-slate-800">{data.p95_qty.toFixed(4)}</p>
|
||||||
|
<p className="text-xs text-slate-400 mt-0.5">24h动态分位</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-3">
|
||||||
|
<p className="text-xs text-slate-400">大单阈值 P99</p>
|
||||||
|
<p className="font-mono font-semibold text-amber-600">{data.p99_qty.toFixed(4)}</p>
|
||||||
|
<p className="text-xs text-slate-400 mt-0.5">超大单门槛</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 信号状态 */}
|
||||||
|
<div className={`rounded-lg border p-3 ${
|
||||||
|
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-xs text-slate-500">当前信号</p>
|
||||||
|
<p className={`font-bold text-lg ${
|
||||||
|
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="text-xs text-slate-500">加分</p>
|
||||||
|
<p className="font-mono font-bold text-slate-800">{data.score}/60</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{data.signal && (
|
||||||
|
<div className="mt-2 grid grid-cols-3 gap-2 text-xs">
|
||||||
|
<span>{core1} CVD_fast方向</span>
|
||||||
|
<span>{core2} CVD_mid方向</span>
|
||||||
|
<span>{core3} VWAP位置</span>
|
||||||
|
</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 SignalsPage() {
|
||||||
|
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-5">
|
||||||
|
{/* 标题 */}
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold text-slate-900">V5 信号引擎</h1>
|
||||||
|
<p className="text-slate-500 text-xs mt-0.5">CVD三轨 + ATR + VWAP + 大单阈值 → 做多/做空信号</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1.5">
|
||||||
|
{(["BTC", "ETH"] as Symbol[]).map(s => (
|
||||||
|
<button key={s} onClick={() => setSymbol(s)}
|
||||||
|
className={`px-4 py-1.5 rounded-lg border text-sm 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} />
|
||||||
|
|
||||||
|
{/* CVD三轨图 */}
|
||||||
|
<div className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
||||||
|
<div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between flex-wrap gap-2">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-slate-800 text-sm">CVD三轨 + 币价</h3>
|
||||||
|
<p className="text-xs text-slate-400 mt-0.5">蓝色面积=CVD_fast(30m) · 紫色虚线=CVD_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="p-4">
|
||||||
|
<CVDChart symbol={symbol} minutes={minutes} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 说明 */}
|
||||||
|
<div className="rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-xs text-slate-600 space-y-1">
|
||||||
|
<p><span className="text-blue-600 font-medium">信号逻辑：</span>CVD_fast方向 + CVD_mid方向 + VWAP位置 = 核心3条件。加分：ATR扩张(+25) + 无反向大单(+20) + 资金费率(+15)。</p>
|
||||||
|
<p><span className="text-blue-600 font-medium">仓位：</span>0-15分→2%仓 / 20-40分→5%仓 / 45-60分→8%仓。冷却10分钟，时间止损30分钟。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -7,12 +7,13 @@ 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
|
ChevronLeft, ChevronRight, Activity, LogOut, Crosshair
|
||||||
} 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 },
|
||||||
{ href: "/about", label: "说明", icon: Info },
|
{ href: "/about", label: "说明", icon: Info },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user