ui优化
This commit is contained in:
dekun
@@ -7,156 +7,237 @@
|
||||
<link rel="stylesheet" href="/assets/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<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 class="app-shell">
|
||||
<header class="app-header">
|
||||
<div class="brand">交易中控 <span>manual_trading_hub</span></div>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<div id="page-monitor" class="page">
|
||||
<h1>监控区</h1>
|
||||
<p class="rule-tip" style="margin-top:0">
|
||||
持仓/余额来自子代理；关键位、机器人单来自各实例 Flask（须 PM2 跑着 crypto_*）。
|
||||
「交易复盘」在新标签打开 /records。其它电脑访问中控时，请在 hub 的 .env 设置
|
||||
HUB_PUBLIC_ORIGIN=http://Ubuntu内网IP，否则会跳到 127.0.0.1。
|
||||
</p>
|
||||
<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 id="page-monitor" class="page">
|
||||
<div class="page-head">
|
||||
<h1>监控区</h1>
|
||||
</div>
|
||||
<details class="hint-box">
|
||||
<summary>说明：数据来源与复盘链接</summary>
|
||||
<div class="hint-body">
|
||||
持仓与余额来自子代理；关键位、机器人单、趋势计划来自各实例 Flask（须 PM2 运行 crypto_*）。<br />
|
||||
「交易复盘」在新标签打开该实例 /records。其它电脑访问中控时，请在 hub 的 <code>.env</code> 设置
|
||||
<code>HUB_PUBLIC_ORIGIN=http://服务器内网IP</code>。
|
||||
</div>
|
||||
</details>
|
||||
<div class="toolbar">
|
||||
<button type="button" id="btn-monitor-refresh">立即刷新</button>
|
||||
<label class="chk-label">
|
||||
<input type="checkbox" id="auto-monitor" checked /> 每 5 秒自动刷新
|
||||
</label>
|
||||
<button type="button" id="btn-close-all" class="danger">全局紧急全平</button>
|
||||
<span class="toolbar-spacer"></span>
|
||||
<span id="monitor-updated" class="toolbar-meta"></span>
|
||||
</div>
|
||||
<div id="monitor-grid" class="grid-monitor"></div>
|
||||
</div>
|
||||
<div id="monitor-grid" class="grid-2"></div>
|
||||
</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="page-trade" class="page hidden">
|
||||
<div class="page-head">
|
||||
<h1>下单区</h1>
|
||||
</div>
|
||||
<div class="trade-bar">
|
||||
<label for="trade-account">交易账户</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="trade-meta" style="display:none"></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 id="panel-order" class="form-panel card">
|
||||
<div class="card-head"><strong>人工下单</strong></div>
|
||||
<div class="card-body">
|
||||
<form id="form-order" class="form-grid">
|
||||
<div class="field">
|
||||
<label>合约</label>
|
||||
<input name="symbol" placeholder="BTC / BTCUSDT" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>方向</label>
|
||||
<select name="direction" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>止盈止损</label>
|
||||
<select name="sltp_mode" id="order-sltp-mode">
|
||||
<option value="price">价格</option>
|
||||
<option value="pct">百分比</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>单型</label>
|
||||
<select name="trade_style" required>
|
||||
<option value="trend">趋势单</option>
|
||||
<option value="swing">波段单</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>杠杆</label>
|
||||
<input name="leverage" type="number" min="1" step="1" placeholder="可选" />
|
||||
</div>
|
||||
<div class="field field-check">
|
||||
<input type="checkbox" name="breakeven_enabled" value="1" id="order-be" checked />
|
||||
<label for="order-be">移动保本</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>止损</label>
|
||||
<input name="sl" id="order-sl" step="any" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>止盈</label>
|
||||
<input name="tgt" id="order-tp" step="any" required />
|
||||
</div>
|
||||
<div class="field" id="wrap-sl-pct" style="display:none">
|
||||
<label>止损 %</label>
|
||||
<input name="sl_pct" id="order-sl-pct" type="number" step="0.01" />
|
||||
</div>
|
||||
<div class="field" id="wrap-tp-pct" style="display:none">
|
||||
<label>止盈 %</label>
|
||||
<input name="tp_pct" id="order-tp-pct" type="number" step="0.01" />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="primary">开仓（以损定仓）</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panel-key" class="form-panel card hidden">
|
||||
<div class="card-head"><strong>添加关键位</strong></div>
|
||||
<div class="card-body">
|
||||
<form id="form-key" class="form-grid">
|
||||
<div class="field">
|
||||
<label>合约</label>
|
||||
<input name="symbol" placeholder="BTC / BTCUSDT" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>类型</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>方向</label>
|
||||
<select name="direction" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>上沿 / 阻力</label>
|
||||
<input name="upper" step="any" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>下沿 / 支撑</label>
|
||||
<input name="lower" step="any" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>模式</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="field" id="wrap-key-manual-tp" style="display:none">
|
||||
<label>趋势止盈价</label>
|
||||
<input name="manual_take_profit" id="key-manual-tp" step="any" />
|
||||
</div>
|
||||
<div class="field field-check">
|
||||
<input type="checkbox" name="breakeven_enabled" value="1" id="key-be-cb" />
|
||||
<label for="key-be-cb">移动保本</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="primary">添加关键位</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panel-trend" class="form-panel card hidden">
|
||||
<div class="card-head"><strong>趋势回调</strong></div>
|
||||
<div class="card-body">
|
||||
<form id="form-trend" class="form-grid">
|
||||
<div class="field">
|
||||
<label>合约</label>
|
||||
<input name="symbol" placeholder="BTC / ETHUSDT" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>方向</label>
|
||||
<select name="direction" id="trend-direction" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>杠杆</label>
|
||||
<input name="leverage" type="number" min="1" step="1" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>风险 %</label>
|
||||
<input name="risk_percent" type="number" min="0.1" step="0.1" value="5" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>止损价</label>
|
||||
<input name="sl" step="any" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label id="trend-add-label">补仓上沿价</label>
|
||||
<input name="add_upper" id="trend-add-upper" step="any" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>止盈价</label>
|
||||
<input name="take_profit" step="any" required />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="primary">生成预览</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="trend-preview-box" style="margin-top:16px;display:none"></div>
|
||||
</div>
|
||||
</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 id="page-settings" class="page hidden">
|
||||
<div class="page-head">
|
||||
<h1>系统设置</h1>
|
||||
</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>
|
||||
<details class="hint-box">
|
||||
<summary>配置说明</summary>
|
||||
<div class="hint-body">
|
||||
保存后写入 <code>hub_settings.json</code>。Flask / Agent 填本机地址即可；复盘链接可留空（由 Flask 地址自动生成）。<br />
|
||||
<code>HUB_DISABLED_IDS</code> 可强制关闭账户；<code>HUB_BRIDGE_TOKEN</code> 与实例一致，或实例 <code>APP_AUTH_DISABLED=true</code>。
|
||||
</div>
|
||||
</details>
|
||||
<p id="settings-meta-line" class="trade-meta"></p>
|
||||
<div class="toolbar">
|
||||
<button type="button" id="btn-settings-save" class="primary">保存设置</button>
|
||||
<button type="button" id="btn-settings-add">添加交易所</button>
|
||||
<button type="button" id="btn-settings-reload">重新加载</button>
|
||||
</div>
|
||||
<div id="settings-list" class="settings-cards"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user