Files
exchange-monitor-go/web/static/index.html
T
jackyu66git 21a3f9a962 feat: 所有参数移至config.json, 重构退出逻辑, 清理遗留接口
- 将所有硬编码参数迁移到 config.json (手续费率、止盈/止损阈值、
  超时、腿间隔、加仓步进等)
- 退出条件: 净利 >= take_profit_pct 止盈, 价差 <= 0 平仓
- 删除 Binance/dYdX 遗留代码
- 更新 README 文档
- Dashboard: 双交易所价格表、黑名单UI、按币名排序持仓
- Bitget WS: 文本ping保活
- 数据库: 重置, 无历史仓位
2026-05-04 01:46:17 +08:00

154 lines
5.6 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">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
</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>
<!-- 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>
<!-- 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>
<!-- Price Chart -->
<section class="card card-wide" id="chart-card">
<h2>📈 价格走势</h2>
<div class="chart-controls">
<select id="chart-coin"></select>
<select id="chart-exchange"></select>
</div>
<div class="chart-container">
<canvas id="priceChart"></canvas>
</div>
</section>
<!-- Spread Chart (P3-2) -->
<section class="card card-wide" id="spread-chart-card">
<h2>📉 价差走势 (BG↔HL)</h2>
<div class="chart-controls">
<select id="spread-coin"></select>
</div>
<div class="chart-container">
<canvas id="spreadChart"></canvas>
</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>