Show selected state on OO money filters and recommend buttons.

Muted idle chips, cyan checkmark when active so 平/虚 and 推荐跨式/双虚 are obvious after click.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-08-06 09:17:07 +08:00
parent baf928d064
commit 2181c81aba
5 changed files with 67 additions and 16 deletions
+24
View File
@@ -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();
+35 -8
View File
@@ -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);