feat: split options settings into compact swap and transfer cards with aligned columns

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 10:18:41 +08:00
parent 75aa4b1391
commit 2a3f36d34f
7 changed files with 169 additions and 90 deletions
@@ -1,66 +1,4 @@
<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-from-acct">
<option value="funding" selected>资金账户</option>
<option value="trading">交易账户</option>
</select>
<span></span>
<select id="opt-set-cross-to-acct">
<option value="trading" selected>交易账户</option>
<option value="funding">资金账户</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=2"></script>
{# 期权设置脚本挂载点(卡片在 settings_panel 中拆分) #}
<div id="options-settings-root" hidden
data-sub-account="{{ instance_settings.options_sub_account | default('', true) }}"></div>
<script src="/static/options_settings.js?v=3"></script>
@@ -0,0 +1,12 @@
<div class="options-settings-section">
<p class="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 btn-sm" id="opt-set-swap-btn">市价兑换</button>
</div>
<div id="opt-set-swap-msg" class="options-settings-msg muted"></div>
</div>
@@ -0,0 +1,47 @@
<div class="options-settings-section">
<div class="options-settings-subtitle">主账户内</div>
<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 class="options-settings-arrow"></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 btn-sm" id="opt-set-int-btn">划转</button>
</div>
<div id="opt-set-int-msg" class="options-settings-msg muted"></div>
</div>
<div class="options-settings-section">
<div class="options-settings-subtitle">主账户 ↔ 子账户 <span class="muted">{{ instance_settings.options_sub_account or '未配置' }}</span></div>
<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-from-acct">
<option value="funding" selected>资金账户</option>
<option value="trading">交易账户</option>
</select>
<span class="options-settings-arrow"></span>
<select id="opt-set-cross-to-acct">
<option value="trading" selected>交易账户</option>
<option value="funding">资金账户</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 btn-sm" id="opt-set-cross-btn">划转</button>
</div>
<div id="opt-set-cross-msg" class="options-settings-msg muted"></div>
</div>