crypto_monitor/lib/hedge_plan/templates/hedge_plan_panel.html

<div class="hedge-plan-page-wrap" style="grid-column:1/-1" id="hedge-plan-root"
     data-default-underly="{{ options_default_underly | default('ETH') }}"
     data-hedge-enabled="{{ '1' if hedge_plan_enabled else '0' }}"
     data-options-enabled="{{ '1' if options_enabled else '0' }}"
     data-sizing-mode="{{ position_sizing_mode | default('risk') }}"
     data-is-full-margin="{{ '1' if position_sizing_mode == 'full_margin' else '0' }}">
  {% if not hedge_plan_enabled %}
  <div class="flash" style="margin-bottom:12px">对冲计划未启用:请在 <code>env配置 → 对冲计划</code> 打开 <code>HEDGE_PLAN_ENABLED</code>(可热更).</div>
  {% endif %}
  {% if not options_enabled %}
  <div class="flash" style="margin-bottom:12px">期权模块未启用,无法拉期权链.请先配置期权账户.</div>
  {% endif %}

  <div class="card hp-head-card">
    <div class="hp-head-row">
      <h2 class="hp-title">对冲计划 <span class="muted hp-title-sub">测算 · 下单</span>
        <a class="muted" href="/options/guide" target="_blank" rel="noopener" style="font-size:13px;font-weight:500;margin-left:8px">期权开平仓与监控说明</a>
      </h2>
      <button type="button" class="btn-secondary" id="hp-refresh" title="刷新永续行情与期权链">刷新行情</button>
    </div>
    <div class="hp-tabs" role="tablist" aria-label="对冲计划分类">
      <button type="button" class="hp-tab active" role="tab" aria-selected="true" data-tab="perp_options">永期对冲</button>
      <button type="button" class="hp-tab" role="tab" aria-selected="false" data-tab="options_options">期期对冲</button>
      <button type="button" class="hp-tab" role="tab" aria-selected="false" data-tab="history">历史记录</button>
      <button type="button" class="hp-tab" role="tab" aria-selected="false" data-tab="stats">统计分析</button>
    </div>
    <p class="muted" id="hp-gate-line"></p>
    <p class="muted hp-acct-hint" id="hp-acct-hint">永续腿→合约账户 · 期权腿→期权账户</p>
  </div>

  <div id="hp-tab-perp_options" class="hp-tab-panel" role="tabpanel">
    <div class="options-dual-grid" id="hp-po-layout">
      <div class="card">
        <h2>永续 · <span id="hp-perp-uly-label">ETH</span> <span class="muted hp-acct-tag" id="hp-perp-acct-tag">合约账户</span></h2>
        <div class="form-row hp-uly-row">
          <button type="button" class="btn-secondary hp-uly-btn active" data-uly="ETH">ETH</button>
          <button type="button" class="btn-secondary hp-uly-btn" data-uly="BTC">BTC</button>
          <select id="hp-direction">
            <option value="long">做多</option>
            <option value="short">做空</option>
          </select>
        </div>
        <div id="hp-perp-quote" class="muted hp-quote-line">加载中…</div>
        <p class="muted hp-unit-hint">单位说明:价格=USDT · 张数=交易所<strong>永续合约张</strong>(精度与 OKX 下单一致) · 盈亏=USDT</p>
        <div class="form-row" style="flex-wrap:wrap">
          <label>开仓价 <span class="hp-unit">USDT</span> <input type="number" step="any" id="hp-entry" /></label>
          <label>止盈 <span class="hp-unit">USDT</span> <input type="number" step="any" id="hp-tp" /></label>
          <label>止损 <span class="hp-unit">USDT</span> <input type="number" step="any" id="hp-sl" /></label>
          <label>张数 <span class="hp-unit">合约张</span> <input type="number" step="any" id="hp-contracts" /></label>
        </div>
        <p class="muted" id="hp-perp-pnl-line"></p>
        <p class="muted" id="hp-sizing-line"></p>
      </div>
      <div class="card hp-opt-card">
        <h2>期权(列表) · <span id="hp-opt-type-label">Put</span> <span class="muted hp-acct-tag" id="hp-opt-acct-tag">期权账户</span></h2>
        <div class="form-row hp-opt-toolbar">
          <select id="hp-exp-select"><option value="">选择到期日</option></select>
          <button type="button" class="btn-secondary hp-money-btn active" data-money="all">全部</button>
          <button type="button" class="btn-secondary hp-money-btn" data-money="itm">实值</button>
          <button type="button" class="btn-secondary hp-money-btn" data-money="otm">虚值</button>
          <button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
        </div>
        <div id="hp-index-line" class="muted hp-quote-line"></div>
        <div class="options-strike-table-wrap hp-strike-table-wrap--5">
          <table class="options-strike-table" id="hp-strike-table">
            <thead>
              <tr>
                <th>行权价</th>
                <th>实虚值</th>
                <th>卖一/张</th>
                <th>买一/张</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="hp-strike-tbody">
              <tr><td colspan="5" class="muted">请刷新期权链</td></tr>
            </tbody>
          </table>
        </div>
        <div class="form-row hp-pick-row">
          <label>已选 <code id="hp-sel-inst">—</code></label>
          <label>张数 <span class="hp-unit">期权张</span> <input type="number" step="1" min="1" id="hp-sheets" value="1" /></label>
          <span class="muted" id="hp-premium-line"></span>
        </div>
        <p class="muted hp-unit-hint">单位说明:权利金结算币=<strong>USDC</strong> · 张数=期权张(整张) · 卖一/买一=价格/张.期权买入仅认真实卖一价且卖一深度&gt;0;无深度不可开仓(链上~为参考估算).</p>
        <div id="hp-opt-bal-line" class="muted hp-quote-line hp-opt-bal-line"></div>
        <div class="form-row hp-action-row">
          <button type="button" class="primary" id="hp-preview-btn">计算</button>
          <button type="button" class="btn-secondary" id="hp-start-btn" disabled title="需开启 HEDGE_PLAN_LIVE_ORDER 等门禁">启动计划</button>
        </div>
      </div>
    </div>
    <div class="card hp-preview-card" id="hp-preview-card-po">
      <h2 style="margin:0 0 8px">情景测算</h2>
      <div id="hp-summary" class="muted" style="margin:8px 0"></div>
      <div class="options-strike-table-wrap">
        <table class="options-strike-table" id="hp-result-table">
          <thead>
            <tr>
              <th>情景</th>
              <th>现货价</th>
              <th>永续/腿盈亏</th>
              <th>期权盈亏</th>
              <th>合计≈U</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody id="hp-result-tbody">
            <tr><td colspan="6" class="muted">填写参数后点计算</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div id="hp-tab-options_options" class="hp-tab-panel hidden" role="tabpanel" hidden>
    <div class="options-dual-grid" id="hp-oo-layout">
      <div class="card">
        <h2>期期参数 · <span id="hp-oo-uly-label">ETH</span> <span class="muted hp-acct-tag">期权账户</span></h2>
        <div class="form-row hp-uly-row">
          <button type="button" class="btn-secondary hp-uly-btn-oo active" data-uly="ETH">ETH</button>
          <button type="button" class="btn-secondary hp-uly-btn-oo" data-uly="BTC">BTC</button>
        </div>
        <div class="form-row hp-target-row">
          <label>上破目标 <input type="number" step="any" id="hp-target-up" placeholder="向上突破" /></label>
          <label>下破目标 <input type="number" step="any" id="hp-target-down" placeholder="向下突破" /></label>
        </div>
        <div id="hp-oo-index" class="muted hp-quote-line"></div>
        <div id="hp-oo-bal-line" class="muted hp-quote-line"></div>
        <p class="muted hp-unit-hint">震荡突破:设上下两个目标价(USD)；触达任一侧重平盈利腿。张数=<strong>期权张</strong> · 权利金=USDC</p>
        <div id="hp-oo-legs" class="hp-oo-legs">
          <div class="hp-oo-leg-row" data-leg="a">
            <div class="muted" id="hp-oo-leg-a-info">腿A: 尚未选用</div>
            <label>张数 <span class="hp-unit">期权张</span>
              <input type="number" step="1" min="1" id="hp-oo-sheets-a" value="1" disabled />
            </label>
          </div>
          <div class="hp-oo-leg-row" data-leg="b">
            <div class="muted" id="hp-oo-leg-b-info">腿B: 尚未选用</div>
            <label>张数 <span class="hp-unit">期权张</span>
              <input type="number" step="1" min="1" id="hp-oo-sheets-b" value="1" disabled />
            </label>
          </div>
          <p class="muted" id="hp-oo-prem-line"></p>
        </div>
      </div>
      <div class="card hp-opt-card">
        <h2>期权 T 型报价</h2>
        <div class="form-row">
          <select id="hp-oo-exp-select"><option value="">选择到期日</option></select>
          <button type="button" class="btn-secondary" id="hp-oo-load-chain">刷新链</button>
        </div>
        <div class="options-strike-table-wrap options-strike-table-wrap--t">
          <table class="options-strike-table options-strike-table--t" id="hp-oo-table">
            <thead>
              <tr>
                <th colspan="3" class="opt-t-head-call">Call</th>
                <th class="opt-t-head-mid">行权</th>
                <th colspan="3" class="opt-t-head-put">Put</th>
              </tr>
              <tr>
                <th>卖一/张</th><th>实虚值</th><th>选用</th>
                <th>K</th>
                <th>实虚值</th><th>卖一/张</th><th>选用</th>
              </tr>
            </thead>
            <tbody id="hp-oo-tbody">
              <tr><td colspan="7" class="muted">请刷新期权链</td></tr>
            </tbody>
          </table>
        </div>
        <div class="form-row hp-action-row">
          <button type="button" class="primary" id="hp-preview-btn-oo">计算</button>
          <button type="button" class="btn-secondary" id="hp-start-btn-oo" title="需开启 HEDGE_PLAN_LIVE_ORDER">启动计划</button>
        </div>
      </div>
    </div>
    <div class="card hp-preview-card">
      <h2 style="margin:0 0 8px">情景测算</h2>
      <div id="hp-summary-oo" class="muted" style="margin:8px 0"></div>
      <div class="options-strike-table-wrap">
        <table class="options-strike-table">
          <thead>
            <tr>
              <th>情景</th>
              <th>现货价</th>
              <th>腿盈亏</th>
              <th>期权</th>
              <th>合计≈U</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody id="hp-result-tbody-oo">
            <tr><td colspan="6" class="muted">选用两腿并填上破/下破目标后点计算</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div id="hp-tab-history" class="hp-tab-panel hidden" role="tabpanel" hidden>
    <div class="card">
      <h2>历史记录</h2>
      <p class="muted">独立对冲计划历史(与普通交易记录分离)。点「成交细节」查看合约名与成交字段。</p>
      <div class="options-strike-table-wrap">
        <table class="options-strike-table hp-history-table">
          <thead>
            <tr>
              <th>ID</th><th>类型</th><th>标的</th><th>合约</th><th>状态</th><th>合计≈U</th><th>原因</th><th>开仓</th><th>结束</th><th>操作</th>
            </tr>
          </thead>
          <tbody id="hp-history-tbody">
            <tr><td colspan="10" class="muted">加载中…</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div id="hp-tab-stats" class="hp-tab-panel hidden" role="tabpanel" hidden>
    <div class="card">
      <h2>统计分析</h2>
      <p class="muted">按永期 / 期期分别统计:胜率、盈亏比、最大盈利、最大亏损、最大回撤(按结束时间累积)</p>
      <div id="hp-stats-box" class="muted">加载中…</div>
    </div>
  </div>

  <div id="hp-detail-modal" class="hp-modal-backdrop" hidden>
    <div class="hp-modal" role="dialog" aria-modal="true" aria-labelledby="hp-detail-title">
      <div class="hp-modal-head">
        <h3 id="hp-detail-title">成交细节</h3>
        <button type="button" class="btn-secondary" id="hp-detail-close">关闭</button>
      </div>
      <div id="hp-detail-body" class="hp-modal-body muted">加载中…</div>
    </div>
  </div>
</div>
<script src="/static/hedge_plan.js?v=12"></script>