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

Improve OKX options sizing, expiry sync, and multi-position accordion UI.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-09 16:51:48 +08:00
parent d092f213a7
commit f41af0bf1c
7 changed files with 542 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/options_panel.js
+100 -13
View File
@@ -14,6 +14,7 @@
chain: panelCache.chain || null,
selectedInst: null,
orderQuote: null,
expandedPosInst: null,
};
function fmt(v, d) {
@@ -427,14 +428,13 @@
}
}
function renderPositionCard(p) {
function renderPositionCardInner(p) {
const upl = p.upl;
const uplCls = upl > 0 ? "pos-pnl-profit" : upl < 0 ? "pos-pnl-loss" : "";
const sideCls = (p.opt_type || "").toUpperCase() === "P" ? "pos-side-short" : "pos-side-long";
const expMs = p.exp_time_ms != null ? p.exp_time_ms : p.exp_time;
const expAttr = expMs != null && expMs !== "" ? String(expMs) : "";
return (
'<div class="pos-card opt-pos-card" data-inst="' + (p.inst_id || "") + '">' +
'<div class="pos-card-head">' +
'<div class="pos-card-symbol"><strong>' + (p.inst_id || "") + '</strong>' +
'<span class="pos-side-badge ' + sideCls + '">' + optTypeLabel(p.opt_type) + "</span></div>" +
@@ -458,10 +458,77 @@
'<div class="pos-cell"><span class="pos-label">浮盈亏</span><span class="pos-value ' + uplCls + '">' + fmt(p.upl, 2) + "</span></div>" +
'<div class="pos-cell"><span class="pos-label">收益率</span><span class="pos-value ' + uplCls + '">' +
(p.upl_ratio_pct != null ? p.upl_ratio_pct + "%" : "—") + "</span></div>" +
"</div></div>"
"</div>"
);
}
function renderPositionCard(p) {
return (
'<div class="pos-card opt-pos-card" data-inst="' + (p.inst_id || "") + '">' +
renderPositionCardInner(p) +
"</div>"
);
}
function renderPositionAccordionItem(p, expanded) {
const upl = p.upl;
const uplCls = upl > 0 ? "pos-pnl-profit" : upl < 0 ? "pos-pnl-loss" : "";
const sideCls = (p.opt_type || "").toUpperCase() === "P" ? "pos-side-short" : "pos-side-long";
const expMs = p.exp_time_ms != null ? p.exp_time_ms : p.exp_time;
const expAttr = expMs != null && expMs !== "" ? String(expMs) : "";
const inst = p.inst_id || "";
return (
'<div class="opt-pos-accordion-item' + (expanded ? " is-expanded" : "") + '" data-inst="' + inst + '">' +
'<button type="button" class="opt-pos-bar" aria-expanded="' + (expanded ? "true" : "false") + '">' +
'<span class="opt-pos-bar-main">' +
'<span class="opt-pos-bar-chevron" aria-hidden="true">▶</span>' +
'<strong class="opt-pos-bar-title">' + inst + "</strong>" +
'<span class="pos-side-badge ' + sideCls + '">' + optTypeLabel(p.opt_type) + "</span>" +
'<span class="opt-pos-bar-meta">行权 ' + fmt(p.strike, 0) + " · " + fmt(p.pos, 0) + "张</span>" +
"</span>" +
'<span class="opt-pos-bar-side">' +
(expAttr
? '<span class="opt-pos-bar-cd">到期 <span class="opt-expiry-cd" data-opt-exp-ms="' + expAttr + '">—</span></span>'
: "") +
'<span class="opt-pos-bar-pnl ' + uplCls + '">' + fmt(p.upl, 2) + " USDC</span>" +
'<span class="opt-pos-bar-roi ' + uplCls + '">' +
(p.upl_ratio_pct != null ? p.upl_ratio_pct + "%" : "—") + "</span>" +
"</span>" +
"</button>" +
'<div class="opt-pos-accordion-body"' + (expanded ? "" : ' hidden') + ">" +
'<div class="pos-card opt-pos-card opt-pos-card--nested" data-inst="' + inst + '">' +
renderPositionCardInner(p) +
"</div></div></div>"
);
}
function bindPositionActions(container) {
if (!container) return;
container.querySelectorAll(".opt-close-btn").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.stopPropagation();
closePosition(btn.getAttribute("data-inst"), btn);
});
});
container.querySelectorAll(".opt-pos-bar").forEach(function (bar) {
bar.addEventListener("click", function () {
const item = bar.closest(".opt-pos-accordion-item");
if (!item) return;
const inst = item.getAttribute("data-inst");
state.expandedPosInst = state.expandedPosInst === inst ? null : inst;
const wrap = document.getElementById("opt-pos-cards");
wrap.querySelectorAll(".opt-pos-accordion-item").forEach(function (el) {
const open = el.getAttribute("data-inst") === state.expandedPosInst;
el.classList.toggle("is-expanded", open);
const body = el.querySelector(".opt-pos-accordion-body");
const btn = el.querySelector(".opt-pos-bar");
if (body) body.hidden = !open;
if (btn) btn.setAttribute("aria-expanded", open ? "true" : "false");
});
});
});
}
async function closePosition(inst, btn) {
const q = await apiJson("/api/options/quote?inst_id=" + encodeURIComponent(inst) + "&mode=sheets&sheets=1");
if (!q.ok) {
@@ -504,16 +571,27 @@
return;
}
empty.style.display = "none";
list.forEach(function (p) {
const div = document.createElement("div");
div.innerHTML = renderPositionCard(p);
wrap.appendChild(div.firstChild);
});
wrap.querySelectorAll(".opt-close-btn").forEach(function (btn) {
btn.addEventListener("click", function () {
closePosition(btn.getAttribute("data-inst"), btn);
const multi = list.length >= 2;
wrap.classList.toggle("opt-pos-cards--accordion", multi);
if (multi) {
const ids = list.map(function (p) { return p.inst_id; });
if (!state.expandedPosInst || ids.indexOf(state.expandedPosInst) < 0) {
state.expandedPosInst = list[0].inst_id || null;
}
list.forEach(function (p) {
const div = document.createElement("div");
div.innerHTML = renderPositionAccordionItem(p, p.inst_id === state.expandedPosInst);
wrap.appendChild(div.firstChild);
});
});
} else {
state.expandedPosInst = null;
list.forEach(function (p) {
const div = document.createElement("div");
div.innerHTML = renderPositionCard(p);
wrap.appendChild(div.firstChild);
});
}
bindPositionActions(wrap);
if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
OptionsExpiryCountdown.ensureTimer();
}
@@ -560,6 +638,15 @@
refreshAllPositions();
}
function optHistoryStatus(h) {
if (h.status !== "closed") return "持仓中";
if ((h.signal_note || "").indexOf("到期结算") >= 0) return "到期";
if (h.premium_received === 0 && h.realized_pnl != null && h.realized_pnl < 0 && !h.close_ord_id) {
return "到期";
}
return "已平";
}
async function refreshHistory() {
const d = await apiJson("/api/options/history");
const tbody = document.getElementById("opt-history-tbody");
@@ -579,7 +666,7 @@
"<td><code>" + (h.inst_id || "") + "</code></td>" +
"<td>" + fmt(h.sheets, 0) + "</td>" +
"<td>" + fmt(prem, 4) + "</td>" +
"<td>" + (h.status === "closed" ? "已平" : "持仓中") + "</td>" +
"<td>" + optHistoryStatus(h) + "</td>" +
'<td class="' + pnlCls + '">' + pnlTxt + "</td>" +
"<td>" + (h.closed_at || h.created_at || "—") + "</td>" +
'<td><button type="button" class="btn-secondary btn-sm opt-history-del" data-id="' + h.id + '" data-status="' + (h.status || "") + '">删除</button></td>';