From baf928d0645fc93f323d5914c086120f63dc211c Mon Sep 17 00:00:00 2001 From: dekun Date: Thu, 6 Aug 2026 09:13:00 +0800 Subject: [PATCH] Highlight selected Call/Put legs on the OO hedge T-quote board. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Selected buttons show 腿A/腿B and accent styling so the active strikes are obvious. Co-authored-by: Cursor --- lib/common/static/hedge_plan.js | 69 +++++++++++++++++-- lib/common/static/instance_theme.css | 14 ++++ .../templates/hedge_plan_panel.html | 2 +- lib/instance/templates/embed_shell.html | 2 +- lib/instance/templates/index.html | 2 +- 5 files changed, 82 insertions(+), 7 deletions(-) diff --git a/lib/common/static/hedge_plan.js b/lib/common/static/hedge_plan.js index 3095132..b815a78 100644 --- a/lib/common/static/hedge_plan.js +++ b/lib/common/static/hedge_plan.js @@ -882,6 +882,50 @@ }); } + function selectedOoLegMap() { + const map = {}; + if (state.legA && state.legA.inst_id) map[String(state.legA.inst_id)] = "A"; + if (state.legB && state.legB.inst_id) map[String(state.legB.inst_id)] = "B"; + return map; + } + + function syncOoPickHighlight() { + const tbody = $("hp-oo-tbody"); + if (!tbody) return; + const map = selectedOoLegMap(); + tbody.querySelectorAll(".hp-oo-pick").forEach(function (btn) { + const inst = String(btn.getAttribute("data-inst") || ""); + const leg = map[inst]; + const on = !!leg; + btn.classList.toggle("is-selected", on); + btn.classList.toggle("active", on); + btn.setAttribute("aria-pressed", on ? "true" : "false"); + const side = String(btn.getAttribute("data-side") || "").toUpperCase(); + const base = side === "P" ? "Put" : "Call"; + btn.textContent = on ? "腿" + leg + " · " + base : base; + btn.title = on ? "已选用为腿" + leg + "(再点其他合约可改选)" : "选用此 " + base; + }); + tbody.querySelectorAll("tr").forEach(function (tr) { + const callBtn = tr.querySelector('.hp-oo-pick[data-side="C"]'); + const putBtn = tr.querySelector('.hp-oo-pick[data-side="P"]'); + const callOn = !!(callBtn && map[String(callBtn.getAttribute("data-inst") || "")]); + const putOn = !!(putBtn && map[String(putBtn.getAttribute("data-inst") || "")]); + tr.classList.toggle("hp-oo-row-selected", callOn || putOn); + tr.querySelectorAll("td.opt-t-call").forEach(function (td) { + td.classList.toggle("hp-oo-side-selected", callOn); + }); + if (callBtn && callBtn.parentElement) { + callBtn.parentElement.classList.toggle("hp-oo-side-selected", callOn); + } + tr.querySelectorAll("td.opt-t-put").forEach(function (td) { + td.classList.toggle("hp-oo-side-selected", putOn); + }); + if (putBtn && putBtn.parentElement) { + putBtn.parentElement.classList.toggle("hp-oo-side-selected", putOn); + } + }); + } + function renderTStrikes() { const tbody = $("hp-oo-tbody"); if (!tbody) return; @@ -892,6 +936,7 @@ return; } const rows = buildStraddleRows(exp.contracts); + const selected = selectedOoLegMap(); rows.forEach(function (row) { const tr = document.createElement("tr"); const call = row.call; @@ -901,6 +946,8 @@ if (!callOk && !putOk) return; const callAsk = callOk ? fmtPxSz(call.ask, call.ask_sz, call.ask_estimated, call.tick_sz) : "—"; const putAsk = putOk ? fmtPxSz(put.ask, put.ask_sz, put.ask_estimated, put.tick_sz) : "—"; + const callLeg = callOk ? selected[String(call.inst_id)] : ""; + const putLeg = putOk ? selected[String(put.inst_id)] : ""; tr.innerHTML = '' + callAsk + @@ -908,9 +955,15 @@ (callOk ? moneynessBadge(call) : "—") + "" + (callOk - ? '' + '" aria-pressed="' + + (callLeg ? "true" : "false") + + '">' + + (callLeg ? "腿" + callLeg + " · Call" : "Call") + + "" : "—") + '' + row.strike + @@ -920,9 +973,15 @@ putAsk + "" + (putOk - ? '' + '" aria-pressed="' + + (putLeg ? "true" : "false") + + '">' + + (putLeg ? "腿" + putLeg + " · Put" : "Put") + + "" : "—") + ""; tbody.appendChild(tr); @@ -947,6 +1006,7 @@ renderOoLegs(); }); }); + syncOoPickHighlight(); } function renderOoLegs() { @@ -980,6 +1040,7 @@ fill("腿A", state.legA, "hp-oo-leg-a-info", "hp-oo-sheets-a"); fill("腿B", state.legB, "hp-oo-leg-b-info", "hp-oo-sheets-b"); autoFillOoSheets(); + syncOoPickHighlight(); } function ooSheets(id) { diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index c7fa1b3..11d9df9 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -3729,6 +3729,20 @@ html[data-theme="light"] .opt-be-dist-down { .hedge-plan-page-wrap .opt-row-selected td { background: rgba(90, 140, 255, 0.18); } +.hedge-plan-page-wrap .hp-oo-pick.is-selected, +.hedge-plan-page-wrap .hp-oo-pick.active { + border-color: var(--accent, #00d4ff); + color: var(--text, #fff); + background: rgba(0, 212, 255, 0.22); + box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.45), 0 0 0 2px rgba(0, 212, 255, 0.2); + font-weight: 700; +} +.hedge-plan-page-wrap .hp-oo-side-selected { + background: rgba(0, 212, 255, 0.12); +} +.hedge-plan-page-wrap tr.hp-oo-row-selected td.opt-t-strike { + color: var(--accent, #00d4ff); +} .hedge-plan-page-wrap .hp-tab-panel.hidden, .hedge-plan-page-wrap .hp-tab-panel[hidden] { display: none !important; diff --git a/lib/hedge_plan/templates/hedge_plan_panel.html b/lib/hedge_plan/templates/hedge_plan_panel.html index 36f622f..384390b 100644 --- a/lib/hedge_plan/templates/hedge_plan_panel.html +++ b/lib/hedge_plan/templates/hedge_plan_panel.html @@ -327,4 +327,4 @@ - + diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index 498f3a5..f95232a 100644 --- a/lib/instance/templates/embed_shell.html +++ b/lib/instance/templates/embed_shell.html @@ -8,7 +8,7 @@ - + diff --git a/lib/instance/templates/index.html b/lib/instance/templates/index.html index 890907c..2408495 100644 --- a/lib/instance/templates/index.html +++ b/lib/instance/templates/index.html @@ -19,7 +19,7 @@ {{ pwa_app_name }} - +