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);
@@ -185,11 +185,11 @@
<h2>期权 T 型报价</h2>
<div class="form-row">
<select id="hp-oo-exp-select"><option value="">选择到期日</option></select>
<button type="button" class="btn-secondary hp-oo-money-btn active" data-oo-money="atm_otm" title="平值+虚值">平/虚</button>
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="atm" title="仅平值">仅平值</button>
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="otm" title="仅虚值">仅虚值</button>
<button type="button" class="btn-secondary" id="hp-oo-recommend-atm" title="最近平值 Call+Put">推荐跨式</button>
<button type="button" class="btn-secondary" id="hp-oo-recommend-otm" title="最近虚值 Call+Put">推荐双虚</button>
<button type="button" class="btn-secondary hp-oo-money-btn is-selected active" data-oo-money="atm_otm" title="平值+虚值" aria-pressed="true"><span class="hp-oo-check" aria-hidden="true"></span>平/虚</button>
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="atm" title="仅平值" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true"></span>仅平值</button>
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="otm" title="仅虚值" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true"></span>仅虚值</button>
<button type="button" class="btn-secondary hp-oo-recommend-btn" id="hp-oo-recommend-atm" data-oo-rec="atm_straddle" title="最近平值 Call+Put" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true"></span>推荐跨式</button>
<button type="button" class="btn-secondary hp-oo-recommend-btn" id="hp-oo-recommend-otm" data-oo-rec="double_otm" title="最近虚值 Call+Put" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true"></span>推荐双虚</button>
<button type="button" class="btn-secondary" id="hp-oo-load-chain">刷新链</button>
</div>
<div class="options-strike-table-wrap options-strike-table-wrap--t">
@@ -327,4 +327,4 @@
</div>
</div>
</div>
<script src="/static/hedge_plan.js?v=34"></script>
<script src="/static/hedge_plan.js?v=35"></script>
+1 -1
View File
@@ -8,7 +8,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=13">
<link rel="stylesheet" href="/static/instance_theme.css?v=112">
<link rel="stylesheet" href="/static/instance_theme.css?v=113">
<script src="/static/account_risk_badge.js?v=4"></script>
<script src="/static/open_submit_gate.js?v=1"></script>
<meta name="theme-color" content="#0b0d14">
+1 -1
View File
@@ -19,7 +19,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ pwa_app_name }}</title>
<link rel="stylesheet" href="/static/instance_page.css?v=13">
<link rel="stylesheet" href="/static/instance_theme.css?v=112">
<link rel="stylesheet" href="/static/instance_theme.css?v=113">
</head>
<body