feat: restructure OKX options UI with header funds, settings card, and dual-column layout
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -1,135 +1,96 @@
|
||||
<div class="card options-page-card" style="grid-column:1/-1" id="options-root"
|
||||
data-trade-budget="{{ options_trade_budget | default(10) }}"
|
||||
<div class="options-page-wrap" style="grid-column:1/-1" id="options-root"
|
||||
data-default-underly="{{ options_default_underly | default('ETH') }}">
|
||||
<h2>期权（USDⓈ 本位 · 仅买方）</h2>
|
||||
{% if not options_enabled %}
|
||||
<div class="flash" style="margin-bottom:12px">期权 API 未启用：请在 <code>crypto_monitor_okx/.env</code> 设置 <code>OKX_OPTIONS_ENABLED=true</code> 及主账户 <code>OKX_OPTIONS_API_*</code>，然后 <code>pm2 restart crypto_okx --update-env</code>。</div>
|
||||
{% endif %}
|
||||
<p class="muted options-hint">资金账户兑换 USDT→USDC 后，划转到交易账户即可买入。报价单位为每 1 ETH/BTC；1 张 = 0.01 ETH/BTC。期权链展示近 <span id="opt-chain-dte">14</span> 日到期合约，标注实值/虚值；下单可指定张数。</p>
|
||||
|
||||
<div class="options-funds-grid">
|
||||
<div class="options-funds-col">
|
||||
<h3>资金账户</h3>
|
||||
<div class="options-fund-row"><span>USDT</span><strong id="opt-funding-usdt">—</strong></div>
|
||||
<div class="options-fund-row"><span>USDC</span><strong id="opt-funding-usdc">—</strong></div>
|
||||
</div>
|
||||
<div class="options-funds-col">
|
||||
<h3>交易账户</h3>
|
||||
<div class="options-fund-row"><span>USDT</span><strong id="opt-trading-usdt">—</strong></div>
|
||||
<div class="options-fund-row"><span>USDC</span><strong id="opt-trading-usdc">—</strong></div>
|
||||
<div class="options-fund-row"><span>USDG</span><strong id="opt-trading-usdg">—</strong></div>
|
||||
</div>
|
||||
<div class="options-funds-col options-funds-meta">
|
||||
<div class="options-fund-row"><span>单笔权利金上限</span><strong id="opt-trade-budget">—</strong></div>
|
||||
<button type="button" class="btn-secondary" id="opt-refresh-balances">刷新余额</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-section card-nested">
|
||||
<h3>币种兑换（资金账户 USDT → USDC）</h3>
|
||||
<div class="form-row options-convert-row">
|
||||
<input type="number" id="opt-convert-amount" min="0" step="0.01" placeholder="USDT 数量">
|
||||
<button type="button" class="btn-secondary" id="opt-convert-quote-btn">询价</button>
|
||||
<button type="button" class="btn-primary" id="opt-convert-exec-btn" disabled>确认兑换</button>
|
||||
</div>
|
||||
<div id="opt-convert-preview" class="muted"></div>
|
||||
</div>
|
||||
|
||||
<div class="options-section card-nested">
|
||||
<h3>账户划转</h3>
|
||||
<div class="form-row options-transfer-row">
|
||||
<select id="opt-transfer-ccy">
|
||||
<option value="USDC" selected>USDC</option>
|
||||
<option value="USDT">USDT</option>
|
||||
</select>
|
||||
<select id="opt-transfer-from">
|
||||
<option value="funding" selected>资金账户</option>
|
||||
<option value="trading">交易账户</option>
|
||||
</select>
|
||||
<span>→</span>
|
||||
<select id="opt-transfer-to">
|
||||
<option value="trading" selected>交易账户</option>
|
||||
<option value="funding">资金账户</option>
|
||||
</select>
|
||||
<input type="number" id="opt-transfer-amount" min="0" step="0.01" placeholder="数量">
|
||||
<button type="button" class="btn-primary" id="opt-transfer-btn">确认划转</button>
|
||||
</div>
|
||||
<div id="opt-transfer-msg" class="muted"></div>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<div class="form-row options-chain-toolbar">
|
||||
<button type="button" class="btn-secondary opt-uly-btn active" data-uly="ETH">ETH</button>
|
||||
<button type="button" class="btn-secondary opt-uly-btn" data-uly="BTC">BTC</button>
|
||||
<select id="opt-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary opt-type-btn active" data-type="C">看涨 Call</button>
|
||||
<button type="button" class="btn-secondary opt-type-btn" data-type="P">看跌 Put</button>
|
||||
<button type="button" class="btn-secondary" id="opt-load-chain">刷新链</button>
|
||||
</div>
|
||||
<div id="opt-index-line" class="muted"></div>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="opt-strike-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>行权价</th>
|
||||
<th>类型</th>
|
||||
<th>合约</th>
|
||||
<th>卖一</th>
|
||||
<th>买一</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="opt-strike-tbody">
|
||||
<tr><td colspan="6" class="muted">请选择到期日</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="opt-order-panel-host" class="opt-order-panel-host" hidden aria-hidden="true">
|
||||
<div id="opt-order-panel" class="opt-order-panel-inner" style="display:none">
|
||||
<h3 class="opt-order-title">下单</h3>
|
||||
<div id="opt-order-inst" class="options-order-inst"></div>
|
||||
<div class="options-order-grid">
|
||||
<div><span class="k">卖一（每1币）</span><span id="opt-order-ask" class="v">—</span></div>
|
||||
<div><span class="k">张数</span><span id="opt-order-sheets" class="v">—</span></div>
|
||||
<div><span class="k">ETH/BTC 数量</span><span id="opt-order-eth" class="v">—</span></div>
|
||||
<div><span class="k">预估权利金</span><span id="opt-order-premium" class="v">—</span></div>
|
||||
<div class="options-dual-grid">
|
||||
<div class="card options-order-card">
|
||||
<h2>期权下单</h2>
|
||||
<p class="muted options-hint">报价单位为每 1 ETH/BTC；1 张 = 0.01。链展示近 <span id="opt-chain-dte">14</span> 日到期，标注实值/虚值。资金划转与 USDT/USDC 兑换见「系统设置 → 期权设置」。</p>
|
||||
<div class="form-row options-chain-toolbar">
|
||||
<button type="button" class="btn-secondary opt-uly-btn active" data-uly="ETH">ETH</button>
|
||||
<button type="button" class="btn-secondary opt-uly-btn" data-uly="BTC">BTC</button>
|
||||
<select id="opt-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary opt-type-btn active" data-type="C">看涨 Call</button>
|
||||
<button type="button" class="btn-secondary opt-type-btn" data-type="P">看跌 Put</button>
|
||||
<button type="button" class="btn-secondary" id="opt-load-chain">刷新链</button>
|
||||
</div>
|
||||
<div id="opt-index-line" class="muted"></div>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="opt-strike-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>行权价</th>
|
||||
<th>类型</th>
|
||||
<th>合约</th>
|
||||
<th>卖一</th>
|
||||
<th>买一</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="opt-strike-tbody">
|
||||
<tr><td colspan="6" class="muted">请选择到期日</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="opt-order-panel-host" class="opt-order-panel-host" hidden aria-hidden="true">
|
||||
<div id="opt-order-panel" class="opt-order-panel-inner" style="display:none">
|
||||
<h3 class="opt-order-title">下单</h3>
|
||||
<div id="opt-order-inst" class="options-order-inst"></div>
|
||||
<div class="options-order-grid">
|
||||
<div><span class="k">卖一（每1币）</span><span id="opt-order-ask" class="v">—</span></div>
|
||||
<div><span class="k">张数</span><span id="opt-order-sheets" class="v">—</span></div>
|
||||
<div><span class="k">ETH/BTC 数量</span><span id="opt-order-eth" class="v">—</span></div>
|
||||
<div><span class="k">预估权利金</span><span id="opt-order-premium" class="v">—</span></div>
|
||||
</div>
|
||||
<div class="form-row options-order-mode-row">
|
||||
<label><input type="radio" name="opt-size-mode" value="sheets" checked> 指定张数</label>
|
||||
<input type="number" id="opt-sheets-amount" min="1" step="1" value="1" placeholder="张数">
|
||||
<label><input type="radio" name="opt-size-mode" value="budget_full"> 按单笔上限打满</label>
|
||||
<label><input type="radio" name="opt-size-mode" value="eth_amount"> 指定币数量</label>
|
||||
<input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none">
|
||||
<input type="text" id="opt-signal-note" placeholder="备注（关键位说明）">
|
||||
<button type="button" class="btn-primary" id="opt-open-btn">限价买入 @ 卖一</button>
|
||||
</div>
|
||||
<div id="opt-order-msg" class="muted"></div>
|
||||
</div>
|
||||
<div class="form-row options-order-mode-row">
|
||||
<label><input type="radio" name="opt-size-mode" value="sheets" checked> 指定张数</label>
|
||||
<input type="number" id="opt-sheets-amount" min="1" step="1" value="1" placeholder="张数">
|
||||
<label><input type="radio" name="opt-size-mode" value="budget_full"> 按单笔上限打满</label>
|
||||
<label><input type="radio" name="opt-size-mode" value="eth_amount"> 指定币数量</label>
|
||||
<input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none">
|
||||
<input type="text" id="opt-signal-note" placeholder="备注（关键位说明）">
|
||||
<button type="button" class="btn-primary" id="opt-open-btn">限价买入 @ 卖一</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card options-pos-card-wrap">
|
||||
<div class="options-pos-head">
|
||||
<h2>持仓</h2>
|
||||
<button type="button" class="btn-secondary" id="opt-refresh-positions">刷新</button>
|
||||
</div>
|
||||
<div class="options-pos-tabs" role="tablist">
|
||||
<button type="button" class="btn-secondary opt-pos-tab active" data-tab="live">当前持仓</button>
|
||||
<button type="button" class="btn-secondary opt-pos-tab" data-tab="history">期权历史</button>
|
||||
</div>
|
||||
<div id="opt-pos-live" class="panel-scroll pos-list options-pos-pane">
|
||||
<div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
|
||||
<div id="opt-pos-cards"></div>
|
||||
</div>
|
||||
<div id="opt-pos-history" class="options-pos-pane" hidden>
|
||||
<div class="options-history-table-wrap">
|
||||
<table class="options-strike-table" id="opt-history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>合约</th>
|
||||
<th>张数</th>
|
||||
<th>权利金</th>
|
||||
<th>状态</th>
|
||||
<th>盈亏</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="opt-history-tbody">
|
||||
<tr><td colspan="6" class="muted">加载中…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="opt-order-msg" class="muted"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h3>持仓</h3>
|
||||
<button type="button" class="btn-secondary" id="opt-refresh-positions">刷新持仓</button>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="opt-positions-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>合约</th>
|
||||
<th>张数</th>
|
||||
<th>币量</th>
|
||||
<th>开仓均价</th>
|
||||
<th>标记价</th>
|
||||
<th>浮盈</th>
|
||||
<th>收益率</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="opt-positions-tbody">
|
||||
<tr><td colspan="8" class="muted">暂无持仓</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/options_panel.js?v=4"></script>
|
||||
<script src="/static/options_panel.js?v=5"></script>
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<div class="options-settings-panel" id="options-settings-root"
|
||||
data-sub-account="{{ instance_settings.options_sub_account | default('', true) }}">
|
||||
<div class="options-settings-block card-nested">
|
||||
<h3>币种兑换（现货市价）</h3>
|
||||
<p class="muted options-settings-hint">主账户资金账户：USDT ↔ USDC，走 USDC-USDT 现货市价单。</p>
|
||||
<div class="form-row options-settings-row">
|
||||
<select id="opt-set-swap-dir">
|
||||
<option value="usdt_to_usdc" selected>USDT → USDC</option>
|
||||
<option value="usdc_to_usdt">USDC → USDT</option>
|
||||
</select>
|
||||
<input type="number" id="opt-set-swap-amount" min="0.01" step="0.01" placeholder="数量">
|
||||
<button type="button" class="btn-primary" id="opt-set-swap-btn">市价兑换</button>
|
||||
</div>
|
||||
<div id="opt-set-swap-msg" class="muted"></div>
|
||||
</div>
|
||||
|
||||
<div class="options-settings-block card-nested">
|
||||
<h3>主账户内划转</h3>
|
||||
<div class="form-row options-settings-row">
|
||||
<select id="opt-set-int-ccy">
|
||||
<option value="USDC" selected>USDC</option>
|
||||
<option value="USDT">USDT</option>
|
||||
</select>
|
||||
<select id="opt-set-int-from">
|
||||
<option value="funding" selected>资金账户</option>
|
||||
<option value="trading">交易账户</option>
|
||||
</select>
|
||||
<span>→</span>
|
||||
<select id="opt-set-int-to">
|
||||
<option value="trading" selected>交易账户</option>
|
||||
<option value="funding">资金账户</option>
|
||||
</select>
|
||||
<input type="number" id="opt-set-int-amount" min="0.01" step="0.01" placeholder="数量">
|
||||
<button type="button" class="btn-primary" id="opt-set-int-btn">确认划转</button>
|
||||
</div>
|
||||
<div id="opt-set-int-msg" class="muted"></div>
|
||||
</div>
|
||||
|
||||
<div class="options-settings-block card-nested">
|
||||
<h3>主账户 ↔ 子账户划转</h3>
|
||||
<p class="muted options-settings-hint">子账户：{{ instance_settings.options_sub_account or '未配置 OKX_SUB_ACCOUNT_NAME' }}</p>
|
||||
<div class="form-row options-settings-row">
|
||||
<select id="opt-set-cross-ccy">
|
||||
<option value="USDT" selected>USDT</option>
|
||||
<option value="USDC">USDC</option>
|
||||
</select>
|
||||
<select id="opt-set-cross-acct">
|
||||
<option value="funding" selected>资金账户</option>
|
||||
<option value="trading">交易账户</option>
|
||||
</select>
|
||||
<select id="opt-set-cross-dir">
|
||||
<option value="sub_to_main" selected>子账户 → 主账户</option>
|
||||
<option value="main_to_sub">主账户 → 子账户</option>
|
||||
</select>
|
||||
<input type="number" id="opt-set-cross-amount" min="0.01" step="0.01" placeholder="数量">
|
||||
<button type="button" class="btn-primary" id="opt-set-cross-btn">确认划转</button>
|
||||
</div>
|
||||
<div id="opt-set-cross-msg" class="muted"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/options_settings.js?v=1"></script>
|
||||
Reference in New Issue
Block a user