crypto_monitor/lib/options/templates/options_panel.html

<div class="card options-page-card" style="grid-column:1/-1" id="options-root"
     data-trade-budget="{{ options_trade_budget | default(10) }}"
     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。</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>
                    </tr>
                </thead>
                <tbody id="opt-strike-tbody">
                    <tr><td colspan="5" class="muted">请选择到期日</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="options-section card-nested" id="opt-order-panel" style="display:none">
        <h3>下单</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">
            <label><input type="radio" name="opt-size-mode" value="budget_full" checked> 按单笔上限打满</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="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=1"></script>