133 lines
4.8 KiB
HTML
133 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Exchange Monitor Dashboard</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header>
|
|
<h1>⚡ 跨交易所套利监控</h1>
|
|
<div class="header-meta">
|
|
<span id="clock">--:--:--</span>
|
|
<span class="sep">|</span>
|
|
<span id="conn-status" class="status-offline">● 未连接</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid">
|
|
<!-- Stats Summary -->
|
|
<section class="card" id="stats-card">
|
|
<h2>📊 统计数据</h2>
|
|
<div class="stats-row">
|
|
<div class="stat"><label>总交易</label><span id="stat-total">0</span></div>
|
|
<div class="stat"><label>收敛</label><span id="stat-converged" class="pct-green">0</span></div>
|
|
<div class="stat"><label>发散</label><span id="stat-diverged" class="pct-red">0</span></div>
|
|
<div class="stat"><label>持平</label><span id="stat-flat" class="pct-gray">0</span></div>
|
|
<div class="stat"><label>持仓</label><span id="stat-positions" class="pct-yellow">0 / <span id="stat-max-pos">5</span></span></div>
|
|
<div class="stat"><label>币种</label><span id="stat-coins" class="pct-blue">0</span></div>
|
|
<div class="stat" id="conn-stats"><label>连接</label><span id="conn-detail"></span></div>
|
|
</div>
|
|
<!-- Detailed PnL stats -->
|
|
<div class="stats-row detail-stats" style="margin-top:4px;font-size:12px;opacity:0.85">
|
|
<div class="stat"><label>总PnL</label><span id="stat-total-pnl">—</span></div>
|
|
<div class="stat"><label>本金</label><span id="stat-capital">—</span></div>
|
|
<div class="stat"><label>胜率</label><span id="stat-win-rate">—</span></div>
|
|
<div class="stat"><label>最多盈利</label><span id="stat-max-profit">—</span></div>
|
|
<div class="stat"><label>最多亏损</label><span id="stat-max-loss">—</span></div>
|
|
<div class="stat"><label>平均持仓</label><span id="stat-avg-dur">—</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Open Positions -->
|
|
<section class="card" id="positions-card">
|
|
<h2>🔒 当前持仓</h2>
|
|
<div class="table-wrap">
|
|
<table id="positions-table">
|
|
<thead>
|
|
<tr><th>币种</th><th>方向</th><th>规模</th><th>入价差</th><th>现价差</th><th>估盈亏</th><th>加仓</th><th>时长</th></tr>
|
|
</thead>
|
|
<tbody id="positions-body">
|
|
<tr><td colspan="8" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blacklist -->
|
|
<section class="card" id="bl-card">
|
|
<h2>⛔ 黑名单</h2>
|
|
<div class="stats-row" id="bl-body">
|
|
<span class="text-dim">暂无</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Price Table -->
|
|
<section class="card" id="prices-card">
|
|
<h2>💰 实时价格 <span id="prices-age" class="text-dim" style="font-size:11px"></span></h2>
|
|
<div class="table-wrap">
|
|
<table id="price-table">
|
|
<thead>
|
|
<tr><th>币种</th><th>HyperLiquid</th><th>Bitget</th><th>BG↔HL价差</th></tr>
|
|
</thead>
|
|
<tbody id="price-body">
|
|
<tr><td colspan="4" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arbitrage Opportunities -->
|
|
<section class="card" id="arb-card">
|
|
<h2>🎯 套利机会 (BG↔HL)</h2>
|
|
<div class="table-wrap">
|
|
<table id="arb-table">
|
|
<thead>
|
|
<tr><th>币种</th><th>方向</th><th>买价</th><th>卖价</th><th>净利%</th></tr>
|
|
</thead>
|
|
<tbody id="arb-body">
|
|
<tr><td colspan="5" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Trades -->
|
|
<section class="card card-wide" id="trades-card">
|
|
<h2>📋 历史交易</h2>
|
|
<div class="table-wrap">
|
|
<table id="trades-table">
|
|
<thead>
|
|
<tr><th>时间</th><th>币种</th><th>方向</th><th>入价差</th><th>出价差</th><th>净利%</th><th>结果</th><th>原因</th></tr>
|
|
</thead>
|
|
<tbody id="trades-body">
|
|
<tr><td colspan="8" class="loading">等待数据...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Trade Detail Modal -->
|
|
<div id="trade-modal" class="modal-overlay" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>📋 交易详情</h2>
|
|
<button class="modal-close" onclick="closeTradeDetail()">✕</button>
|
|
</div>
|
|
<div id="trade-detail-body">
|
|
<div class="loading">加载中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|