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

ui: add descriptions and refresh info to summary cards

Browse Source
This commit is contained in:
root 2026-02-27 12:23:32 +00:00
parent bef981d903
commit 48d1611d5b
1 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/app/trades/page.tsx
View File

@ -206,26 +206,42 @@ function FlowAnalysis({ symbol }: { symbol: Symbol }) {
) : (
<div className="p-4 space-y-4">
{/* 摘要卡片 */}
<div className="grid grid-cols-4 gap-2">
<div className="bg-slate-50 rounded-lg p-2 text-center">
<div className="space-y-2">
<div className="flex items-center justify-between">
<p className="text-xs text-slate-500 font-medium">
统计时间窗口：
<span className="font-semibold text-slate-700 ml-1">
{interval === "1m" ? "过去1小时" : interval === "5m" ? "过去4小时" : interval === "15m" ? "过去12小时" : "过去48小时"}
</span>
（每{interval}聚合一根，每30秒刷新）
</p>
<p className="text-xs text-slate-400">单位：{symbol === "BTC" ? "BTC" : "ETH"}</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
<div className="bg-slate-50 rounded-lg p-3">
<p className="text-xs text-slate-400">主动买量</p>
<p className="font-mono font-semibold text-emerald-600 text-sm">{totalBuy.toFixed(1)}</p>
<p className="font-mono font-semibold text-emerald-600 text-base mt-0.5">{totalBuy.toFixed(1)}</p>
<p className="text-xs text-slate-400 mt-1">买方主动吃卖单</p>
</div>
<div className="bg-slate-50 rounded-lg p-2 text-center">
<div className="bg-slate-50 rounded-lg p-3">
<p className="text-xs text-slate-400">主动卖量</p>
<p className="font-mono font-semibold text-red-500 text-sm">{totalSell.toFixed(1)}</p>
<p className="font-mono font-semibold text-red-500 text-base mt-0.5">{totalSell.toFixed(1)}</p>
<p className="text-xs text-slate-400 mt-1">卖方主动砸买单</p>
</div>
<div className="bg-slate-50 rounded-lg p-2 text-center">
<p className="text-xs text-slate-400">Delta</p>
<p className={`font-mono font-semibold text-sm ${totalDelta >= 0 ? "text-emerald-600" : "text-red-500"}`}>
<div className="bg-slate-50 rounded-lg p-3">
<p className="text-xs text-slate-400">Delta（买-卖）</p>
<p className={`font-mono font-semibold text-base mt-0.5 ${totalDelta >= 0 ? "text-emerald-600" : "text-red-500"}`}>
{totalDelta >= 0 ? "+" : ""}{totalDelta.toFixed(1)}
</p>
<p className="text-xs text-slate-400 mt-1">{totalDelta >= 0 ? "多头占优 ↑" : "空头占优 ↓"}</p>
</div>
<div className="bg-slate-50 rounded-lg p-2 text-center">
<div className="bg-slate-50 rounded-lg p-3">
<p className="text-xs text-slate-400">买方占比</p>
<p className={`font-mono font-semibold text-sm ${buyPct >= 50 ? "text-emerald-600" : "text-red-500"}`}>
<p className={`font-mono font-semibold text-base mt-0.5 ${buyPct >= 50 ? "text-emerald-600" : "text-red-500"}`}>
{buyPct.toFixed(1)}%
</p>
<p className="text-xs text-slate-400 mt-1">{buyPct >= 55 ? "强势买盘" : buyPct >= 45 ? "买卖均衡" : "强势卖盘"}</p>
</div>
</div>
</div>