Compact hedge-plan option list to 5 rows with overflow select.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/hedge_plan.js

@@ -253,7 +253,7 @@
     const idx = $("hp-index-line");
     if (idx) {
       idx.textContent =
-        "指数 " + uly + " " + fmt(d.index_px, 2) + " · " + (d.inst_family || "") + " · 实值含平值 · 虚值=价外";
+        "指数 " + uly + " " + fmt(d.index_px, 2) + " · " + (d.inst_family || "") + " · 实值含平值";
     }
     const ooIdx = $("hp-oo-index");
     if (ooIdx) ooIdx.textContent = "指数 " + uly + " " + fmt(d.index_px, 2);
@@ -276,6 +276,52 @@
     });
   }
 
+  function pickContract(c, list) {
+    if (!c) return;
+    state.selected = c;
+    const el = $("hp-sel-inst");
+    if (el) el.textContent = c.inst_id;
+    const sel = $("hp-strike-select");
+    if (sel) sel.value = c.inst_id;
+    const tbody = $("hp-strike-tbody");
+    if (tbody) {
+      tbody.querySelectorAll(".opt-strike-row").forEach(function (r) {
+        r.classList.toggle("opt-row-selected", r.getAttribute("data-inst") === c.inst_id);
+      });
+      tbody.querySelectorAll(".hp-pick").forEach(function (b) {
+        b.classList.toggle("active", b.getAttribute("data-inst") === c.inst_id);
+      });
+    }
+    updatePremiumLine();
+  }
+
+  function strikeOptionLabel(c) {
+    return (
+      "K" +
+      c.strike +
+      " " +
+      (c.moneyness_label || c.opt_type || "") +
+      " " +
+      fmtPxSz(c.ask, c.ask_sz, c.ask_estimated, c.tick_sz)
+    );
+  }
+
+  function fillStrikeSelect(list, prevInst) {
+    const sel = $("hp-strike-select");
+    if (!sel) return;
+    const rest = (list || []).slice(5);
+    sel.innerHTML = '<option value="">更多行权价(' + rest.length + ")…</option>";
+    rest.forEach(function (c) {
+      const opt = document.createElement("option");
+      opt.value = c.inst_id;
+      opt.textContent = strikeOptionLabel(c);
+      sel.appendChild(opt);
+    });
+    if (prevInst && rest.some(function (c) { return c.inst_id === prevInst; })) {
+      sel.value = prevInst;
+    }
+  }
+
   function renderListStrikes() {
     const tbody = $("hp-strike-tbody");
     if (!tbody) return;
@@ -286,6 +332,7 @@
     tbody.innerHTML = "";
     if (!exp) {
       tbody.innerHTML = '<tr><td colspan="5" class="muted">请选择到期日</td></tr>';
+      fillStrikeSelect([], null);
       return;
     }
     const list = (exp.contracts || []).filter(function (c) {
@@ -293,9 +340,12 @@
     });
     if (!list.length) {
       tbody.innerHTML = '<tr><td colspan="5" class="muted">无匹配合约</td></tr>';
+      fillStrikeSelect([], null);
       return;
     }
-    list.forEach(function (c) {
+    const visible = list.slice(0, 5);
+    fillStrikeSelect(list, prevInst);
+    visible.forEach(function (c) {
       const tr = document.createElement("tr");
       tr.className = "opt-strike-row" + (c.moneyness ? " opt-row-" + c.moneyness : "");
       if (prevInst && c.inst_id === prevInst) tr.classList.add("opt-row-selected");
@@ -316,23 +366,21 @@
         '">选用</button></td>';
       tbody.appendChild(tr);
     });
+    if (list.length > 5) {
+      const tip = document.createElement("tr");
+      tip.innerHTML =
+        '<td colspan="5" class="muted">仅显示前 5 行,其余 ' +
+        (list.length - 5) +
+        " 条请用上方下拉框选用</td>";
+      tbody.appendChild(tip);
+    }
     tbody.querySelectorAll(".hp-pick").forEach(function (btn) {
       btn.addEventListener("click", function () {
         const inst = btn.getAttribute("data-inst");
         const c = list.find(function (x) {
           return x.inst_id === inst;
         });
-        if (!c) return;
+        pickContract(c, list);
-        state.selected = c;
-        const el = $("hp-sel-inst");
-        if (el) el.textContent = c.inst_id;
-        tbody.querySelectorAll(".opt-strike-row").forEach(function (r) {
-          r.classList.toggle("opt-row-selected", r.getAttribute("data-inst") === inst);
-        });
-        tbody.querySelectorAll(".hp-pick").forEach(function (b) {
-          b.classList.toggle("active", b.getAttribute("data-inst") === inst);
-        });
-        updatePremiumLine();
       });
     });
   }
@@ -639,6 +687,17 @@
       });
     if ($("hp-exp-select")) $("hp-exp-select").addEventListener("change", renderListStrikes);
     if ($("hp-oo-exp-select")) $("hp-oo-exp-select").addEventListener("change", renderTStrikes);
+    if ($("hp-strike-select")) {
+      $("hp-strike-select").addEventListener("change", function () {
+        const inst = $("hp-strike-select").value;
+        if (!inst || !state.chain) return;
+        const exp = currentExp("hp-exp-select");
+        const c = ((exp && exp.contracts) || []).find(function (x) {
+          return x.inst_id === inst;
+        });
+        if (c) pickContract(c);
+      });
+    }
     if ($("hp-sheets")) $("hp-sheets").addEventListener("input", updatePremiumLine);
     if ($("hp-preview-btn"))
       $("hp-preview-btn").addEventListener("click", function () {

lib/common/static/instance_theme.css

@@ -3289,6 +3289,39 @@ html[data-theme="light"] .opt-be-dist-down {
   font-size: 0.68rem;
   margin-left: 4px;
 }
+.hedge-plan-page-wrap .hp-opt-toolbar,
+.hedge-plan-page-wrap .hp-pick-row {
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 4px 0;
+  align-items: center;
+}
+.hedge-plan-page-wrap .hp-opt-toolbar select,
+.hedge-plan-page-wrap .hp-strike-pick-label select {
+  max-width: 168px;
+  font-size: 0.72rem;
+  padding: 3px 6px;
+  min-height: 26px;
+}
+.hedge-plan-page-wrap .hp-opt-toolbar .btn-secondary,
+.hedge-plan-page-wrap .hp-opt-toolbar .hp-money-btn {
+  padding: 3px 8px;
+  min-height: 26px;
+  font-size: 0.72rem;
+}
+.hedge-plan-page-wrap .hp-strike-table-wrap--5 {
+  max-height: 168px; /* 表头 + 约 5 行 */
+  margin-top: 4px;
+}
+.hedge-plan-page-wrap .hp-opt-bal-line {
+  margin-top: 4px;
+}
+.hedge-plan-page-wrap .hp-acct-hint {
+  display: none;
+}
+.hedge-plan-page-wrap .options-strike-table-wrap--t {
+  max-height: 168px;
+}
 .hedge-plan-page-wrap .hp-pick.active,
 .hedge-plan-page-wrap .opt-row-selected td {
   background: rgba(90, 140, 255, 0.18);

lib/hedge_plan/templates/hedge_plan_panel.html

@@ -47,21 +47,27 @@
         </div>
         <p class="muted" id="hp-sizing-line"></p>
       </div>
-      <div class="card">
+      <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">
+        <div class="form-row hp-opt-toolbar">
           <select id="hp-exp-select"><option value="">选择到期日</option></select>
-          <button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
-        </div>
-        <div class="form-row hp-money-row">
           <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>
-          <span class="muted hp-money-hint">实值含平值</span>
+          <button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
         </div>
         <div id="hp-index-line" class="muted hp-quote-line"></div>
-        <div id="hp-opt-bal-line" class="muted hp-quote-line"></div>
+        <div class="form-row hp-pick-row">
-        <div class="options-strike-table-wrap">
+          <label class="hp-strike-pick-label">合约
+            <select id="hp-strike-select" title="从列表外合约中快速选用">
+              <option value="">更多行权价…</option>
+            </select>
+          </label>
+          <label>已选 <code id="hp-sel-inst">—</code></label>
+          <label>张数 <input type="number" step="1" min="1" id="hp-sheets" value="1" /></label>
+          <span class="muted" id="hp-premium-line"></span>
+        </div>
+        <div class="options-strike-table-wrap hp-strike-table-wrap--5">
           <table class="options-strike-table" id="hp-strike-table">
             <thead>
               <tr>
@@ -77,11 +83,7 @@
             </tbody>
           </table>
         </div>
-        <div class="form-row" style="margin-top:8px;flex-wrap:wrap">
+        <div id="hp-opt-bal-line" class="muted hp-quote-line hp-opt-bal-line"></div>
-          <label>已选合约 <code id="hp-sel-inst">—</code></label>
-          <label>张数 <input type="number" step="1" min="1" id="hp-sheets" value="1" /></label>
-          <span class="muted" id="hp-premium-line"></span>
-        </div>
       </div>
     </div>
     <div class="card" style="margin-top:12px" id="hp-preview-card-po">
@@ -195,4 +197,4 @@
     </div>
   </div>
 </div>
-<script src="/static/hedge_plan.js?v=4"></script>
+<script src="/static/hedge_plan.js?v=5"></script>

lib/instance/templates/embed_shell.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
     <link rel="stylesheet" href="/static/instance_page.css?v=6">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=82">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=83">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">
     <title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>

lib/instance/templates/index.html

@@ -17,7 +17,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=3">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=82">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=83">
 
 </head>
 <body