crypto_monitor/lib/options/templates/options_panel.html

<div class="options-page-wrap" style="grid-column:1/-1" id="options-root"
     data-default-underly="{{ options_default_underly | default('ETH') }}">
    {% 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 %}

    <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>
        </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>
        </div>
    </div>
</div>
<script src="/static/options_panel.js?v=5"></script>