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;
-        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();
+        pickContract(c, list);
       });
     });
   }
@@ -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);