中控增加下单,关键位,系统设置

This commit is contained in:
dekun
2026-05-22 10:04:28 +08:00
parent ed6b56ff87
commit 46f73fce43
19 changed files with 1844 additions and 568 deletions
+149 -386
View File
@@ -3,396 +3,159 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>手工交易中控</title>
<style>
:root {
--bg: #0f1216;
--panel: #171b22;
--text: #e8eaed;
--muted: #8b929a;
--border: #2a313c;
--green: #3fb950;
--red: #f85149;
--accent: #58a6ff;
}
* { box-sizing: border-box; }
body {
font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
margin: 0;
padding: 16px clamp(16px, 4vw, 56px);
font-size: 14px;
line-height: 1.45;
}
.page {
max-width: 1040px;
margin: 0 auto;
width: 100%;
}
h1 { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; }
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 16px;
}
.toolbar span { color: var(--muted); font-size: 12px; }
button {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 14px;
cursor: pointer;
font-size: 13px;
}
button:hover { border-color: var(--accent); }
button.danger { border-color: var(--red); color: var(--red); }
button.danger:hover { background: #2d1514; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.card-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
gap: 8px;
flex-wrap: wrap;
}
.card-head strong { font-size: 14px; }
.card-head .meta { color: var(--muted); font-size: 12px; word-break: break-all; }
.metrics {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
padding: 10px 12px;
font-size: 13px;
}
.metrics div span { color: var(--muted); display: block; font-size: 11px; }
.metrics-row-balance-upnl {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 28px;
padding-bottom: 8px;
margin-bottom: 4px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.metric-inline {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.metric-inline .metric-lbl { color: var(--muted); font-size: 12px; }
.metric-inline .metric-num {
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 13px;
color: var(--text);
}
.metric-inline .metric-num.pnl-pos { color: var(--green); }
.metric-inline .metric-num.pnl-neg { color: var(--red); }
.pnl-pos { color: var(--green); }
.pnl-neg { color: var(--red); }
th.hl-pnl,
td.hl-pnl {
background: rgba(88, 166, 255, 0.08);
border-left: 2px solid rgba(88, 166, 255, 0.55);
}
th.hl-pnl { color: var(--accent); font-weight: 600; }
table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
th, td { padding: 8px 10px; text-align: left; border-top: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; }
.err { color: var(--red); padding: 12px; font-size: 13px; }
.card-disabled { opacity: 0.72; border-style: dashed; }
.card-disabled .card-head { border-bottom-style: dashed; }
.off-note { padding: 12px 14px; color: var(--muted); font-size: 13px; }
.monitor-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.monitor-toggle input { cursor: pointer; }
.monitor-toggle input:disabled { cursor: not-allowed; }
#toast {
position: fixed;
bottom: 16px;
right: 16px;
max-width: min(420px, 90vw);
background: var(--panel);
border: 1px solid var(--border);
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
display: none;
z-index: 20;
white-space: pre-wrap;
}
#toast.show { display: block; }
</style>
<title>多账户交易中控</title>
<link rel="stylesheet" href="/assets/app.css" />
</head>
<body>
<div class="page">
<h1>手工交易 · 多账户中控</h1>
<div class="toolbar">
<button type="button" id="btn-refresh">立即刷新</button>
<label style="color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;">
<input type="checkbox" id="auto-refresh" checked /> 每 3 秒自动刷新
</label>
<button type="button" id="btn-close-all" class="danger">全局一键全平</button>
<span style="color:var(--muted);font-size:12px;">关闭的账户不轮询、不参与全平(本机记住);账户显示名由中控环境变量 <code style="font-size:11px;">HUB_AGENT_NAMES</code> 配置,所有访问同一中控的电脑一致。</span>
<span id="last-updated"></span>
<nav class="top-nav">
<a href="/monitor" id="nav-monitor">监控区</a>
<a href="/trade" id="nav-trade">下单区</a>
<a href="/settings" id="nav-settings">系统设置</a>
</nav>
<div id="page-monitor" class="page">
<h1>监控区</h1>
<div class="toolbar">
<button type="button" id="btn-monitor-refresh">立即刷新</button>
<label style="color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px">
<input type="checkbox" id="auto-monitor" checked /> 每 5 秒刷新
</label>
<button type="button" id="btn-close-all" class="danger">全局紧急全平</button>
<span id="monitor-updated" style="color:var(--muted);font-size:12px"></span>
</div>
<div id="monitor-grid" class="grid-2"></div>
</div>
<div id="root"></div>
<div id="page-trade" class="page hidden">
<h1>下单区</h1>
<div class="form-row">
<label>账户</label>
<select id="trade-account"></select>
</div>
<div class="tabs">
<button type="button" data-tab="order" class="active">人工下单</button>
<button type="button" data-tab="key">关键位</button>
<button type="button" data-tab="trend">趋势回调</button>
</div>
<div id="trade-meta" class="rule-tip"></div>
<div id="panel-order" class="card">
<div class="card-head"><strong>人工下单</strong></div>
<div class="card-body">
<form id="form-order" class="form-row">
<input name="symbol" placeholder="BTC 或 BTC/USDT" required />
<select name="direction" required>
<option value="">方向</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
<select name="sltp_mode" id="order-sltp-mode">
<option value="price">止盈止损:价格</option>
<option value="pct">止盈止损:百分比</option>
</select>
<select name="trade_style" required>
<option value="trend">趋势单</option>
<option value="swing">波段单</option>
</select>
<input name="leverage" type="number" min="1" step="1" placeholder="杠杆(可选)" />
<label style="display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)">
<input type="checkbox" name="breakeven_enabled" value="1" checked /> 移动保本
</label>
<input name="sl" id="order-sl" step="any" placeholder="止损价" required />
<input name="tgt" id="order-tp" step="any" placeholder="止盈价" required />
<input name="sl_pct" id="order-sl-pct" type="number" step="0.01" placeholder="止损%" style="display:none" />
<input name="tp_pct" id="order-tp-pct" type="number" step="0.01" placeholder="止盈%" style="display:none" />
<button type="submit">开仓(以损定仓)</button>
</form>
</div>
</div>
<div id="panel-key" class="card hidden">
<div class="card-head"><strong>添加关键位</strong></div>
<div class="card-body">
<form id="form-key" class="form-row">
<input name="symbol" placeholder="BTC 或 BTC/USDT" required />
<select name="type" required>
<option value="箱体突破">箱体突破</option>
<option value="收敛突破">收敛突破</option>
<option value="斐波回调0.618">斐波回调0.618</option>
<option value="斐波回调0.786">斐波回调0.786</option>
<option value="关键阻力位">关键阻力位</option>
<option value="关键支撑位">关键支撑位</option>
</select>
<select name="direction" required>
<option value="">方向</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
<input name="upper" step="any" placeholder="上沿/阻力" required />
<input name="lower" step="any" placeholder="下沿/支撑" required />
<select name="sl_tp_mode" id="key-sl-tp-mode">
<option value="standard">标准突破</option>
<option value="box_1p5">箱体1R·止盈1.5H</option>
<option value="trend_manual">趋势单·自填止盈</option>
</select>
<input name="manual_take_profit" id="key-manual-tp" step="any" placeholder="趋势单止盈价" style="display:none" />
<label style="display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)">
<input type="checkbox" name="breakeven_enabled" value="1" id="key-be-cb" /> 移动保本
</label>
<button type="submit">添加关键位</button>
</form>
</div>
</div>
<div id="panel-trend" class="card hidden">
<div class="card-head"><strong>趋势回调</strong></div>
<div class="card-body">
<form id="form-trend" class="form-row">
<input name="symbol" placeholder="BTC 或 ETH/USDT" required />
<select name="direction" id="trend-direction" required>
<option value="">方向</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
<input name="leverage" type="number" min="1" step="1" placeholder="杠杆" required />
<input name="risk_percent" type="number" min="0.1" step="0.1" value="5" placeholder="风险%" />
<input name="sl" step="any" placeholder="止损价" required />
<input name="add_upper" id="trend-add-upper" step="any" placeholder="补仓上沿价" required />
<input name="take_profit" step="any" placeholder="止盈价" required />
<button type="submit">生成预览</button>
</form>
<div id="trend-preview-box" style="margin-top:12px;display:none"></div>
</div>
</div>
</div>
<div id="page-settings" class="page hidden">
<h1>系统设置</h1>
<p class="rule-tip">
配置各交易所 Flask 地址与子代理地址,点击「保存设置」写入本目录
<code>hub_settings.json</code>(重启 hub 后仍生效)。OKX 默认关闭;环境变量
<code>HUB_DISABLED_IDS=1</code> 会强制关闭对应 id(勾选框灰掉)。实例须配置与中控一致的
<code>HUB_BRIDGE_TOKEN</code>,或本机调试时 <code>APP_AUTH_DISABLED=true</code>
</p>
<p id="settings-meta-line" class="rule-tip"></p>
<div class="toolbar">
<button type="button" id="btn-settings-save">保存设置</button>
<button type="button" id="btn-settings-add">添加交易所</button>
<button type="button" id="btn-settings-reload">重新加载</button>
</div>
<div class="card">
<div class="card-body" style="overflow:auto">
<table class="settings-table" id="settings-table">
<thead>
<tr>
<th>启用</th><th>显示名</th><th>Flask URL</th><th>Agent URL</th><th>复盘链接</th>
<th>能力</th><th>id</th><th></th>
</tr>
</thead>
<tbody id="settings-tbody"></tbody>
</table>
</div>
</div>
</div>
<div id="toast"></div>
<script>
const LS_EXCLUDED = "manual_trading_hub_excluded";
const root = document.getElementById("root");
const toast = document.getElementById("toast");
const lastUpdated = document.getElementById("last-updated");
let timer = null;
let agentsList = [];
let envExcludedSet = new Set();
let rowById = new Map();
function loadExcludedLS() {
try {
const raw = localStorage.getItem(LS_EXCLUDED);
const arr = raw ? JSON.parse(raw) : [];
return new Set((Array.isArray(arr) ? arr : []).map(String));
} catch {
return new Set();
}
}
function saveExcludedLS(set) {
localStorage.setItem(LS_EXCLUDED, JSON.stringify([...set]));
}
function showToast(msg, isErr) {
toast.textContent = msg;
toast.style.borderColor = isErr ? "var(--red)" : "var(--border)";
toast.classList.add("show");
clearTimeout(showToast._t);
showToast._t = setTimeout(() => toast.classList.remove("show"), 6000);
}
function fmtNum(x, d) {
if (x === null || x === undefined || Number.isNaN(Number(x))) return "—";
const n = Number(x);
return n.toLocaleString(undefined, { maximumFractionDigits: d });
}
function pnlClass(v) {
const n = Number(v);
if (!Number.isFinite(n) || n === 0) return "";
return n > 0 ? "pnl-pos" : "pnl-neg";
}
function renderActiveCard(r) {
const err = r.error || (r.payload && r.payload.error);
const p = r.payload || {};
let inner;
if (!r.http_ok || err) {
inner = `<div class="err">${escapeHtml(String(err || ("HTTP " + (r.status_code ?? "?"))))}</div>`;
} else {
const pos = Array.isArray(p.positions) ? p.positions : [];
const rows = pos.map(
(x) =>
`<tr>
<td>${escapeHtml(x.symbol || "")}</td>
<td>${escapeHtml(x.side || "")}</td>
<td>${fmtNum(x.contracts, 6)}</td>
<td>${fmtNum(x.notional_usdt, 2)}</td>
<td class="hl-pnl ${pnlClass(x.unrealized_pnl)}">${fmtNum(x.unrealized_pnl, 4)}</td>
<td>${fmtNum(x.entry_price, 6)}</td>
</tr>`
);
const topBalUpnl = `<div class="metrics-row-balance-upnl">
<span class="metric-inline"><span class="metric-lbl">余额 USDT</span><span class="metric-num">${fmtNum(p.balance_usdt, 2)}</span></span>
<span class="metric-inline"><span class="metric-lbl">未实现盈亏合计</span><span class="metric-num ${pnlClass(p.total_unrealized_pnl)}">${fmtNum(p.total_unrealized_pnl, 4)}</span></span>
</div>`;
inner = `
<div class="metrics">
${topBalUpnl}
<div><span>交易所</span>${escapeHtml(p.exchange || "—")}</div>
<div><span>持仓模式</span>${escapeHtml(p.position_mode || "—")}</div>
</div>
${
pos.length
? `<table><thead><tr><th>合约</th><th>方向</th><th>张数</th><th>名义(约)</th><th class="hl-pnl">未实现盈亏</th><th>均价</th></tr></thead><tbody>${rows}</tbody></table>`
: `<div style="padding:12px;color:var(--muted)">无持仓</div>`
}`;
}
return `
<div class="card" data-agent-id="${escapeHtml(r.id)}">
<div class="card-head">
<div>
<strong>${escapeHtml(r.name)}</strong>
<div class="meta">${escapeHtml(r.url)}</div>
</div>
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
<label class="monitor-toggle">
<input type="checkbox" class="toggle-monitor" data-agent-id="${escapeHtml(r.id)}" checked />
参与监控
</label>
<button type="button" class="danger btn-close-one" data-agent-id="${escapeHtml(r.id)}">该账户全平</button>
</div>
</div>
${inner}
</div>`;
}
function renderDisabledCard(agent, reason) {
const server = reason === "server";
const inputAttrs = server
? `class="toggle-monitor" data-agent-id="${escapeHtml(agent.id)}" disabled`
: `class="toggle-monitor" data-agent-id="${escapeHtml(agent.id)}"`;
const note = server
? "已在服务端关闭(环境变量 HUB_DISABLED_IDS),不轮询、不参与全局全平。"
: "已在本浏览器关闭。勾选「参与监控」可重新纳入轮询与全局全平。";
return `
<div class="card card-disabled" data-agent-id="${escapeHtml(agent.id)}">
<div class="card-head">
<div>
<strong>${escapeHtml(agent.name)}</strong>
<div class="meta">${escapeHtml(agent.url)}</div>
</div>
<label class="monitor-toggle">
<input type="checkbox" ${inputAttrs} />
参与监控
</label>
</div>
<div class="off-note">${note}</div>
</div>`;
}
function escapeHtml(s) {
return String(s)
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}
async function loadAll() {
const lsEx = loadExcludedLS();
const csv = [...lsEx].join(",");
const qs = csv ? "?exclude_ids=" + encodeURIComponent(csv) : "";
const [ar, sr] = await Promise.all([
fetch("/api/agents").then((r) => r.json()),
fetch("/api/snapshot" + qs).then((r) => r.json()),
]);
agentsList = ar.agents || [];
envExcludedSet = new Set((sr.env_excluded_ids || []).map(String));
rowById = new Map((sr.rows || []).map((row) => [String(row.id), row]));
const parts = [];
for (const agent of agentsList) {
const id = String(agent.id);
const serverOff = envExcludedSet.has(id);
const clientOff = lsEx.has(id);
if (serverOff) {
parts.push(renderDisabledCard(agent, "server"));
} else if (clientOff) {
parts.push(renderDisabledCard(agent, "client"));
} else {
const row = rowById.get(id);
if (row) {
parts.push(renderActiveCard(row));
} else {
parts.push(
renderActiveCard({
id,
name: agent.name,
url: agent.url,
http_ok: false,
error: "无快照",
payload: null,
})
);
}
}
}
root.innerHTML = parts.join("") || '<div class="err">无账户配置</div>';
lastUpdated.textContent = "更新于 " + new Date().toLocaleTimeString();
root.querySelectorAll(".btn-close-one").forEach((btn) => {
btn.onclick = () => closeOne(btn.getAttribute("data-agent-id"));
});
}
async function closeOne(id) {
if (!confirm("确认对该账户市价全平所有永续持仓?")) return;
try {
const res = await fetch("/api/close/" + encodeURIComponent(id), { method: "POST" });
const j = await res.json();
showToast(JSON.stringify(j, null, 2), !res.ok);
await loadAll();
} catch (e) {
showToast(String(e), true);
}
}
async function closeAll() {
const lsEx = loadExcludedLS();
const activeCount = agentsList.filter(
(a) => !envExcludedSet.has(String(a.id)) && !lsEx.has(String(a.id))
).length;
if (!confirm(`对当前 ${activeCount} 个已开启监控的账户执行市价全平?此操作不可撤销。`)) return;
try {
const res = await fetch("/api/close-all", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ exclude_ids: [...lsEx] }),
});
const j = await res.json();
showToast(JSON.stringify(j, null, 2), !res.ok);
await loadAll();
} catch (e) {
showToast(String(e), true);
}
}
root.addEventListener("change", (ev) => {
const t = ev.target;
if (!t.classList || !t.classList.contains("toggle-monitor")) return;
if (t.disabled) return;
const id = t.getAttribute("data-agent-id");
if (!id) return;
const set = loadExcludedLS();
if (t.checked) set.delete(id);
else set.add(id);
saveExcludedLS(set);
loadAll().catch((e) => showToast(String(e), true));
});
document.getElementById("btn-refresh").onclick = () => loadAll().catch((e) => showToast(String(e), true));
document.getElementById("btn-close-all").onclick = closeAll;
function schedule() {
clearInterval(timer);
if (document.getElementById("auto-refresh").checked)
timer = setInterval(() => loadAll().catch(() => {}), 3000);
}
document.getElementById("auto-refresh").onchange = schedule;
loadAll().catch((e) => {
root.innerHTML = `<div class="err">${escapeHtml(String(e))}</div>`;
});
schedule();
</script>
<script src="/assets/app.js"></script>
</body>
</html>