dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact hedge-plan option list to 5 rows with overflow select.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-14 12:33:30 +08:00
parent 09cd680e4a
commit 8d37b2cba3
5 changed files with 123 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/hedge_plan.js
+72 -13
View File
@@ -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
+33
View File
@@ -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);
lib/hedge_plan/templates/hedge_plan_panel.html
+16 -14
View File
@@ -47,21 +47,27 @@
</div>
<p class="muted" id="hp-sizing-line"></p>
</div>
<div class="card">
<div class="card hp-opt-card">
<h2>期权(列表) · <span id="hp-opt-type-label">Put</span> <span class="muted hp-acct-tag" id="hp-opt-acct-tag">期权账户</span></h2>
<div class="form-row">
<div class="form-row hp-opt-toolbar">
<select id="hp-exp-select"><option value="">选择到期日</option></select>
<button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
</div>
<div class="form-row hp-money-row">
<button type="button" class="btn-secondary hp-money-btn active" data-money="all">全部</button>
<button type="button" class="btn-secondary hp-money-btn" data-money="itm">实值</button>
<button type="button" class="btn-secondary hp-money-btn" data-money="otm">虚值</button>
<span class="muted hp-money-hint">实值含平值</span>
<button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
</div>
<div id="hp-index-line" class="muted hp-quote-line"></div>
<div id="hp-opt-bal-line" class="muted hp-quote-line"></div>
<div class="options-strike-table-wrap">
<div class="form-row hp-pick-row">
<label class="hp-strike-pick-label">合约
<select id="hp-strike-select" title="从列表外合约中快速选用">
<option value="">更多行权价…</option>
</select>
</label>
<label>已选 <code id="hp-sel-inst">—</code></label>
<label>张数 <input type="number" step="1" min="1" id="hp-sheets" value="1" /></label>
<span class="muted" id="hp-premium-line"></span>
</div>
<div class="options-strike-table-wrap hp-strike-table-wrap--5">
<table class="options-strike-table" id="hp-strike-table">
<thead>
<tr>
@@ -77,11 +83,7 @@
</tbody>
</table>
</div>
<div class="form-row" style="margin-top:8px;flex-wrap:wrap">
<label>已选合约 <code id="hp-sel-inst">—</code></label>
<label>张数 <input type="number" step="1" min="1" id="hp-sheets" value="1" /></label>
<span class="muted" id="hp-premium-line"></span>
</div>
<div id="hp-opt-bal-line" class="muted hp-quote-line hp-opt-bal-line"></div>
</div>
</div>
<div class="card" style="margin-top:12px" id="hp-preview-card-po">
@@ -195,4 +197,4 @@
</div>
</div>
</div>
<script src="/static/hedge_plan.js?v=4"></script>
<script src="/static/hedge_plan.js?v=5"></script>
lib/instance/templates/embed_shell.html
+1 -1
View File
@@ -7,7 +7,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=6">
<link rel="stylesheet" href="/static/instance_theme.css?v=82">
<link rel="stylesheet" href="/static/instance_theme.css?v=83">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
lib/instance/templates/index.html
+1 -1
View File
@@ -17,7 +17,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
<link rel="stylesheet" href="/static/instance_page.css?v=3">
<link rel="stylesheet" href="/static/instance_theme.css?v=82">
<link rel="stylesheet" href="/static/instance_theme.css?v=83">
</head>
<body