From 2181c81aba39ccf05e1a5df3477d07cc4f10a009 Mon Sep 17 00:00:00 2001 From: dekun Date: Thu, 6 Aug 2026 09:17:07 +0800 Subject: [PATCH] Show selected state on OO money filters and recommend buttons. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Muted idle chips, cyan checkmark when active so 平/虚 and 推荐跨式/双虚 are obvious after click. Co-authored-by: Cursor --- lib/common/static/hedge_plan.js | 24 +++++++++++ lib/common/static/instance_theme.css | 43 +++++++++++++++---- .../templates/hedge_plan_panel.html | 12 +++--- lib/instance/templates/embed_shell.html | 2 +- lib/instance/templates/index.html | 2 +- 5 files changed, 67 insertions(+), 16 deletions(-) diff --git a/lib/common/static/hedge_plan.js b/lib/common/static/hedge_plan.js index b815a78..a04cf6a 100644 --- a/lib/common/static/hedge_plan.js +++ b/lib/common/static/hedge_plan.js @@ -24,6 +24,7 @@ underlying: root.getAttribute("data-default-underly") || "ETH", moneyFilter: "itm", // 永期锁定:实值+平值 ooMoneyFilter: "atm_otm", // 期期锁定:平值+虚值 + ooRecommend: null, // atm_straddle | double_otm | null chain: null, selected: null, legA: null, @@ -245,10 +246,24 @@ document.querySelectorAll(".hp-money-btn").forEach(function (b) { const on = b.getAttribute("data-money") === state.moneyFilter; b.classList.toggle("active", on); + b.classList.toggle("is-selected", on); + b.setAttribute("aria-pressed", on ? "true" : "false"); }); document.querySelectorAll(".hp-oo-money-btn").forEach(function (b) { const on = b.getAttribute("data-oo-money") === state.ooMoneyFilter; b.classList.toggle("active", on); + b.classList.toggle("is-selected", on); + b.setAttribute("aria-pressed", on ? "true" : "false"); + }); + } + + function syncOoRecommendUI() { + const cur = state.ooRecommend || ""; + document.querySelectorAll(".hp-oo-recommend-btn").forEach(function (b) { + const on = (b.getAttribute("data-oo-rec") || "") === cur; + b.classList.toggle("active", on); + b.classList.toggle("is-selected", on); + b.setAttribute("aria-pressed", on ? "true" : "false"); }); } @@ -1003,6 +1018,8 @@ state.legA = c; state.legB = null; } + state.ooRecommend = null; + syncOoRecommendUI(); renderOoLegs(); }); }); @@ -1091,6 +1108,8 @@ state.selected = null; state.legA = null; state.legB = null; + state.ooRecommend = null; + syncOoRecommendUI(); if ($("hp-entry")) $("hp-entry").value = ""; if ($("hp-contracts")) $("hp-contracts").value = ""; if ($("hp-tp")) $("hp-tp").value = ""; @@ -1348,6 +1367,8 @@ } state.legA = pair.call; state.legB = pair.put; + state.ooRecommend = "atm_straddle"; + syncOoRecommendUI(); renderOoLegs(); autoFillOoSheets(); updateOoPremiumLine(); @@ -1362,6 +1383,8 @@ } state.legA = pair.call; state.legB = pair.put; + state.ooRecommend = "double_otm"; + syncOoRecommendUI(); renderOoLegs(); autoFillOoSheets(); updateOoPremiumLine(); @@ -2052,6 +2075,7 @@ syncTabUI(); syncUnderlyingUI(); syncMoneyUI(); + syncOoRecommendUI(); syncPoDirUI(); syncOoSizeModeUI(); syncOoCloseModeUI(); diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index 11d9df9..34dd992 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -3643,7 +3643,9 @@ html[data-theme="light"] .opt-be-dist-down { } .hedge-plan-page-wrap .hp-uly-btn, .hedge-plan-page-wrap .hp-uly-btn-oo, -.hedge-plan-page-wrap .hp-money-btn { +.hedge-plan-page-wrap .hp-money-btn, +.hedge-plan-page-wrap .hp-oo-money-btn, +.hedge-plan-page-wrap .hp-oo-recommend-btn { min-width: 52px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.14); @@ -3652,11 +3654,29 @@ html[data-theme="light"] .opt-be-dist-down { } .hedge-plan-page-wrap .hp-uly-btn.active, .hedge-plan-page-wrap .hp-uly-btn-oo.active, -.hedge-plan-page-wrap .hp-money-btn.active { - color: #0b1220; - background: linear-gradient(180deg, #ffffff 0%, #9ec0ff 100%); - border-color: #fff; - box-shadow: 0 0 0 2px rgba(100, 160, 255, 0.5); +.hedge-plan-page-wrap .hp-money-btn.active, +.hedge-plan-page-wrap .hp-oo-money-btn.is-selected, +.hedge-plan-page-wrap .hp-oo-money-btn.active, +.hedge-plan-page-wrap .hp-oo-recommend-btn.is-selected, +.hedge-plan-page-wrap .hp-oo-recommend-btn.active { + border-color: var(--accent, #00d4ff); + color: var(--text, #fff); + background: rgba(0, 212, 255, 0.16); + box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.35); + font-weight: 700; +} +.hedge-plan-page-wrap .hp-oo-money-btn .hp-oo-check, +.hedge-plan-page-wrap .hp-oo-recommend-btn .hp-oo-check { + display: none; + margin-right: 4px; + font-weight: 700; +} +.hedge-plan-page-wrap .hp-oo-money-btn.is-selected .hp-oo-check, +.hedge-plan-page-wrap .hp-oo-money-btn.active .hp-oo-check, +.hedge-plan-page-wrap .hp-oo-recommend-btn.is-selected .hp-oo-check, +.hedge-plan-page-wrap .hp-oo-recommend-btn.active .hp-oo-check { + display: inline; + color: var(--accent, #00d4ff); } .hedge-plan-page-wrap .hp-money-hint { font-size: 0.68rem; @@ -3676,7 +3696,9 @@ html[data-theme="light"] .opt-be-dist-down { min-height: 26px; } .hedge-plan-page-wrap .hp-opt-toolbar .btn-secondary, -.hedge-plan-page-wrap .hp-opt-toolbar .hp-money-btn { +.hedge-plan-page-wrap .hp-opt-toolbar .hp-money-btn, +.hedge-plan-page-wrap .hp-oo-money-btn, +.hedge-plan-page-wrap .hp-oo-recommend-btn { padding: 3px 8px; min-height: 26px; font-size: 0.72rem; @@ -3907,10 +3929,15 @@ html[data-theme="light"] .hedge-plan-page-wrap .hp-tab.active { } html[data-theme="light"] .hedge-plan-page-wrap .hp-uly-btn.active, html[data-theme="light"] .hedge-plan-page-wrap .hp-uly-btn-oo.active, -html[data-theme="light"] .hedge-plan-page-wrap .hp-money-btn.active { +html[data-theme="light"] .hedge-plan-page-wrap .hp-money-btn.active, +html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-money-btn.is-selected, +html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-money-btn.active, +html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-recommend-btn.is-selected, +html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-recommend-btn.active { color: #0b1220; background: linear-gradient(180deg, #ffffff 0%, #b9d2ff 100%); border-color: #2f6fed; + box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.25); } html[data-theme="light"] .hedge-plan-page-wrap .hp-placeholder { border-color: rgba(15, 23, 42, 0.18); diff --git a/lib/hedge_plan/templates/hedge_plan_panel.html b/lib/hedge_plan/templates/hedge_plan_panel.html index 384390b..b7bcd9c 100644 --- a/lib/hedge_plan/templates/hedge_plan_panel.html +++ b/lib/hedge_plan/templates/hedge_plan_panel.html @@ -185,11 +185,11 @@

期权 T 型报价

- - - - - + + + + +
@@ -327,4 +327,4 @@
- + diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index f95232a..727692c 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 2408495..8992ee5 100644 --- a/lib/instance/templates/index.html +++ b/lib/instance/templates/index.html @@ -19,7 +19,7 @@ {{ pwa_app_name }} - +