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') }}"
     data-budget-buffer="{{ options_budget_buffer | default(0.95) }}"
     data-ask-liq-filter="{% if options_chain_ask_liq_filter is defined %}{{ '1' if options_chain_ask_liq_filter else '0' }}{% else %}1{% endif %}">
    {% 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>
            <details class="opt-close-rule opt-open-rule">
                <summary>开仓规则说明</summary>
                <div class="opt-close-rule-body">
                    <p>报价单位为每 1 ETH/BTC;1 张 = 0.01。默认选中<strong>最近一期</strong>到期,可手动改。</p>
                    <ul>
                        <li><strong>列表</strong>含卖一/买一;<strong>T 型</strong>仅卖一(买方开仓),中间为跨式双买测算。</li>
                        <li>环境配置「链上仅显示有卖一」开启时,隐藏无真实卖一或深度不足 1 张的合约(估算价 <strong>~</strong> 亦不显示)。</li>
                        <li><strong>开仓只认真实卖一价且卖一深度≥1</strong>;无深度时面板显示参考标记价并禁用买入。</li>
                        <li>链展示近 <span id="opt-chain-dte">14</span> 日到期;<strong>T 型</strong>默认 ATM ±5 档,可展开全部。</li>
                        <li>「按可用余额打满」可用额度 = min(交易 USDC × 预算缓冲 <strong id="opt-budget-buf">{{ '%.2f'|format(options_budget_buffer|default(0.95)|float) }}</strong>, 单笔预算);可在 env「预算缓冲比例」改。</li>
                        <li>平仓仅买一限价,详见说明文档。</li>
                    </ul>
                    <p><a href="/options/guide" target="_blank" rel="noopener">打开《期权开平仓与监控说明》</a></p>
                </div>
            </details>
            <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>
                <span class="opt-chain-view-group">
                    <button type="button" class="btn-secondary opt-view-btn active" data-view="list">列表</button>
                    <button type="button" class="btn-secondary opt-view-btn" data-view="t">T 型</button>
                </span>
                <span id="opt-type-btn-group" class="opt-type-btn-group">
                    <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>
                </span>
                <button type="button" class="btn-secondary opt-money-btn active" data-money="all">全部</button>
                <button type="button" class="btn-secondary opt-money-btn" data-money="itm">实值</button>
                <button type="button" class="btn-secondary opt-money-btn" data-money="otm">虚值</button>
                <label id="opt-strike-expand-wrap" class="opt-strike-expand-label" hidden>
                    <input type="checkbox" id="opt-strike-expand-all"> 展开全部
                </label>
                <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" id="opt-strike-table-wrap">
                <table class="options-strike-table" id="opt-strike-table">
                    <thead>
                        <tr id="opt-strike-head-list">
                            <th>行权价</th>
                            <th>类型</th>
                            <th>合约</th>
                            <th>卖一/张</th>
                            <th>买一/张</th>
                            <th>到期平衡</th>
                            <th>距平衡</th>
                            <th>操作</th>
                        </tr>
                        <tr id="opt-strike-head-t" class="hidden" hidden>
                            <th colspan="3" class="opt-t-head-call">Call</th>
                            <th colspan="3" class="opt-t-head-mid">跨式</th>
                            <th colspan="3" class="opt-t-head-put">Put</th>
                        </tr>
                        <tr id="opt-strike-head-t-cols" class="hidden" hidden>
                            <th>卖一/张</th>
                            <th>类型</th>
                            <th>操作</th>
                            <th>行权价</th>
                            <th title="Call卖一+Put卖一(每1币)">双买/币</th>
                            <th title="到期测算平衡带">平衡带</th>
                            <th>类型</th>
                            <th>卖一/张</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="opt-strike-tbody">
                        <tr><td colspan="8" class="muted">请选择到期日</td></tr>
                    </tbody>
                </table>
            </div>
            <div id="opt-order-panel-host" class="opt-order-backdrop" hidden aria-hidden="true">
                <div id="opt-order-panel" class="opt-order-dialog" role="dialog" aria-modal="true" aria-labelledby="opt-order-dialog-title" style="display:none">
                    <div class="opt-order-dialog-head">
                        <h3 class="opt-order-title" id="opt-order-dialog-title">下单</h3>
                        <button type="button" class="btn-secondary" id="opt-order-close-btn" style="font-size:.72rem;padding:2px 10px">取消</button>
                    </div>
                    <div class="opt-order-layout">
                        <div class="opt-order-main">
                            <div id="opt-order-inst" class="options-order-inst"></div>
                            <div class="options-order-grid">
                                <div><span class="k">卖一/张</span><span id="opt-order-ask" class="v">—</span></div>
                                <div><span class="k">买一/张</span><span id="opt-order-bid" class="v">—</span></div>
                                <div><span class="k">参考标记价</span><span id="opt-order-ref-ask" class="v muted">—</span></div>
                                <div><span class="k">张数</span><span id="opt-order-sheets" class="v">—</span></div>
                                <div><span class="k" id="opt-order-eth-label">ETH 数量</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><span class="k">合约杠杆</span><span id="opt-order-leverage" class="v" title="名义价值÷权利金,测算用">—</span></div>
                                <div><span class="k">到期平衡</span><span id="opt-order-expiry-be" class="v">—</span></div>
                                <div><span class="k">距平衡</span><span id="opt-order-dist-be" class="v">—</span></div>
                            </div>
                            <div class="options-estimate-row">
                                <div class="opt-est-main">
                                    <label class="btn-secondary opt-order-chip" for="opt-target-idx">目标位(指数)</label>
                                    <input type="number" id="opt-target-idx" class="opt-target-idx" step="0.1" min="0" placeholder="达价限价平仓"
                                           autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
                                    <span class="k">预计价值</span>
                                    <span id="opt-est-value" class="v">—</span>
                                    <span class="k">盈利</span>
                                    <span id="opt-est-profit" class="v">—</span>
                                    <span class="k">目标杠杆</span>
                                    <span id="opt-est-leverage" class="v" title="目标位名义价值÷权利金">—</span>
                                </div>
                                <span class="muted opt-est-note">目标价=监控指数;到位后按买一限价平仓;无止损,到期即止损</span>
                            </div>
                            <div class="form-row options-order-mode-row">
                                <div class="opt-size-mode-bar">
                                    <label class="btn-secondary opt-order-chip opt-size-mode-chip">
                                        <input type="radio" name="opt-size-mode" value="sheets" checked>
                                        <span>指定张数</span>
                                    </label>
                                    <input type="number" id="opt-sheets-amount" min="1" step="1" value="1" placeholder="张数"
                                           autocomplete="off" inputmode="numeric" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
                                    <label class="btn-secondary opt-order-chip opt-size-mode-chip">
                                        <input type="radio" name="opt-size-mode" value="budget_full">
                                        <span>按可用余额打满</span>
                                    </label>
                                    <label class="btn-secondary opt-order-chip opt-size-mode-chip">
                                        <input type="radio" name="opt-size-mode" value="eth_amount" id="opt-size-mode-eth">
                                        <span>指定币数量</span>
                                    </label>
                                    <input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none"
                                           autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
                                </div>
                                <input type="text" id="opt-signal-note" name="opt_signal_note" class="opt-signal-note" placeholder="备注(关键位说明)"
                                       autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                                       data-lpignore="true" data-1p-ignore="true" data-form-type="other" readonly>
                            </div>
                            <div class="opt-order-dialog-actions">
                                <button type="button" class="btn-primary" id="opt-open-btn">限价买入 @ 卖一</button>
                                <button type="button" class="btn-secondary" id="opt-order-cancel-btn">取消</button>
                            </div>
                            <div id="opt-order-msg" class="muted"></div>
                        </div>
                    </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" aria-label="持仓面板">
                <button type="button" class="btn-secondary opt-pos-tab active" data-opt-pos-tab="live" role="tab" aria-selected="true" id="opt-pos-tab-live">当前持仓</button>
                <button type="button" class="btn-secondary opt-pos-tab" data-opt-pos-tab="pending" role="tab" aria-selected="false" id="opt-pos-tab-pending">当前委托</button>
                <button type="button" class="btn-secondary opt-pos-tab" data-opt-pos-tab="stats" role="tab" aria-selected="false" id="opt-pos-tab-stats">数据统计</button>
                <button type="button" class="btn-secondary opt-pos-tab" data-opt-pos-tab="history" role="tab" aria-selected="false" id="opt-pos-tab-history">期权历史</button>
            </div>
            <div class="options-pos-tab-body">
                <div class="options-pos-pane is-active" data-opt-pos-pane="live" role="tabpanel" aria-labelledby="opt-pos-tab-live">
                    <div id="opt-target-monitors" class="opt-target-monitors" hidden>
                        <div class="opt-target-monitors-head">目标监控</div>
                        <div id="opt-target-monitors-list"></div>
                    </div>
                    <div id="opt-pos-live" class="panel-scroll pos-list options-pos-live-pane">
                        <div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
                        <div id="opt-pos-cards"></div>
                    </div>
                    <details class="opt-close-rule">
                        <summary>买一平仓规则说明</summary>
                        <div class="opt-close-rule-body">
                            <p>平仓前重新读盘口并校验有效流动性;市价平仓已禁用。</p>
                            <ul>
                                <li>本轮只锁<strong>买一</strong>:张数 = min(持仓, 买一深度),限价 = 当场买一。</li>
                                <li>买一不够时只平能吃掉的部分,剩余等下次再点「买一平仓」。</li>
                                <li>手动平仓只验有效买一(非残档);目标触达后才平,2×权利金只是门控(到 2× 本身不会自动平)。</li>
                                <li>全程 <code>reduceOnly</code> 限价卖,不吃买二及以下、不走市价。</li>
                            </ul>
                            <p><a href="/options/guide" target="_blank" rel="noopener">打开《期权开平仓与监控说明》</a></p>
                        </div>
                    </details>
                </div>
                <div class="options-pos-pane" data-opt-pos-pane="pending" role="tabpanel" aria-labelledby="opt-pos-tab-pending" hidden>
                    <div class="opt-pos-pending-pane">
                        <div class="opt-order-pending-head">
                            <p class="muted opt-pending-ttl-hint" id="opt-pending-ttl-hint" style="margin:0;flex:1">平仓限价超 10 分未成交将自动撤销</p>
                            <button type="button" class="btn-secondary" id="opt-pending-refresh">刷新</button>
                        </div>
                        <div id="opt-pending-list" class="opt-pending-list opt-pending-list--tab">
                            <div class="muted opt-pending-empty">暂无未成交委托</div>
                        </div>
                    </div>
                </div>
                <div class="options-pos-pane" data-opt-pos-pane="stats" role="tabpanel" aria-labelledby="opt-pos-tab-stats" hidden>
                    <div class="options-stats-panel">
                        <div class="options-stats-pnl-summary" id="opt-stats-pnl-summary">
                            <div class="options-stat-item opt-stats-net-item">
                                <span class="k">合计盈亏</span>
                                <span class="v" id="opt-stats-total-pnl">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">已平净盈亏</span>
                                <span class="v" id="opt-stats-net-realized">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">持仓浮盈</span>
                                <span class="v" id="opt-stats-open-float">—</span>
                            </div>
                        </div>
                        <div class="options-stats-charts">
                            <div class="opt-stats-chart opt-stats-chart--ring">
                                <div class="opt-stats-ring" id="opt-stats-ring" style="--win-pct: 0">
                                    <span class="opt-stats-ring-label" id="opt-stats-ring-label">—</span>
                                </div>
                                <span class="opt-stats-chart-caption">胜率</span>
                            </div>
                            <div class="opt-stats-chart opt-stats-chart--pnl">
                                <div class="opt-stats-bar-row">
                                    <span class="k">平均盈利</span>
                                    <div class="opt-stats-bar-track">
                                        <div class="opt-stats-bar-fill opt-stats-bar-fill--profit" id="opt-stats-bar-profit"></div>
                                    </div>
                                    <span class="v pos-pnl-profit" id="opt-stats-bar-profit-label">—</span>
                                </div>
                                <div class="opt-stats-bar-row">
                                    <span class="k">平均亏损</span>
                                    <div class="opt-stats-bar-track">
                                        <div class="opt-stats-bar-fill opt-stats-bar-fill--loss" id="opt-stats-bar-loss"></div>
                                    </div>
                                    <span class="v pos-pnl-loss" id="opt-stats-bar-loss-label">—</span>
                                </div>
                            </div>
                        </div>
                        <div class="opt-stats-chart opt-stats-chart--hold">
                            <div class="opt-stats-chart-title">持仓时长对比</div>
                            <div class="opt-stats-bar-row">
                                <span class="k">盈单</span>
                                <div class="opt-stats-bar-track">
                                    <div class="opt-stats-bar-fill opt-stats-bar-fill--profit" id="opt-stats-bar-win-hold"></div>
                                </div>
                                <span class="v" id="opt-stats-win-hold-label">—</span>
                            </div>
                            <div class="opt-stats-bar-row">
                                <span class="k">亏单</span>
                                <div class="opt-stats-bar-track">
                                    <div class="opt-stats-bar-fill opt-stats-bar-fill--loss" id="opt-stats-bar-loss-hold"></div>
                                </div>
                                <span class="v" id="opt-stats-loss-hold-label">—</span>
                            </div>
                        </div>
                        <div class="options-stats-grid">
                            <div class="options-stat-item">
                                <span class="k">胜率</span>
                                <span class="v" id="opt-stats-winrate">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">盈亏比</span>
                                <span class="v" id="opt-stats-plr">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">已平笔数</span>
                                <span class="v" id="opt-stats-closed">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">平均盈利</span>
                                <span class="v pos-pnl-profit" id="opt-stats-profit">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">平均亏损</span>
                                <span class="v pos-pnl-loss" id="opt-stats-loss">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">均持仓</span>
                                <span class="v" id="opt-stats-avg-hold">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">盈单持仓</span>
                                <span class="v" id="opt-stats-win-hold">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">亏单持仓</span>
                                <span class="v" id="opt-stats-loss-hold">—</span>
                            </div>
                            <div class="options-stat-item">
                                <span class="k">持仓中</span>
                                <span class="v" id="opt-stats-open-hold">—</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="options-pos-pane" data-opt-pos-pane="history" role="tabpanel" aria-labelledby="opt-pos-tab-history" hidden>
                    <div class="options-history-table-wrap">
                        <table class="options-strike-table opt-history-table" id="opt-history-table">
                            <thead>
                                <tr>
                                    <th>合约</th>
                                    <th>张数</th>
                                    <th>权利金</th>
                                    <th>状态</th>
                                    <th>盈亏</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="opt-history-tbody">
                                <tr><td colspan="7" class="muted">加载中…</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/options_expiry_countdown.js?v=1"></script>
<script src="/static/options_panel.js?v=49"></script>