Add live expiry countdown for options positions on instance page and trading hub.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-08 11:14:30 +08:00
parent f68197b775
commit 189b27e076
12 changed files with 185 additions and 6 deletions
+11
View File
@@ -771,6 +771,7 @@ _TRADE_STATS_CALENDAR_CSS = _REPO_STATIC / "trade_stats_calendar.css"
_TRADE_STATS_CALENDAR_JS = _REPO_STATIC / "trade_stats_calendar.js"
_ACCOUNT_RISK_BADGE_CSS = _REPO_STATIC / "account_risk_badge.css"
_ACCOUNT_RISK_BADGE_JS = _REPO_STATIC / "account_risk_badge.js"
_OPTIONS_EXPIRY_COUNTDOWN_JS = _REPO_STATIC / "options_expiry_countdown.js"
@app.get("/assets/account_risk_badge.css")
@@ -795,6 +796,16 @@ def hub_account_risk_badge_js():
)
@app.get("/assets/options_expiry_countdown.js")
def hub_options_expiry_countdown_js():
if not _OPTIONS_EXPIRY_COUNTDOWN_JS.is_file():
raise HTTPException(status_code=404, detail="options_expiry_countdown.js not found")
return FileResponse(
str(_OPTIONS_EXPIRY_COUNTDOWN_JS),
media_type="application/javascript; charset=utf-8",
)
@app.get("/assets/ai_review_render.js")
def hub_ai_review_render_js():
"""与三所实例共用仓库根 static/ai_review_render.js(须在 /assets mount 之前注册)。"""
+14
View File
@@ -8161,6 +8161,20 @@ html[data-theme="light"] .hub-monitor-options .hub-monitor-block-label {
margin-top: 6px;
}
.opt-expiry-cd {
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.opt-expiry-cd--urgent {
color: #ffb347;
}
.opt-expiry-cd--expired {
color: var(--muted);
}
html[data-theme="light"] .hub-options-table th {
color: #3a5068;
}
+14 -1
View File
@@ -2250,6 +2250,9 @@
TimeCloseUI.tickLocalCountdowns();
}
ensureHubHoldDurationTimer();
if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
OptionsExpiryCountdown.ensureTimer();
}
if (expandedExchangeId && fs && fsInner) {
const row = rows.find((r) => String(r.id) === String(expandedExchangeId));
@@ -2264,6 +2267,9 @@
TimeCloseUI.tickLocalCountdowns();
}
ensureHubHoldDurationTimer();
if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
OptionsExpiryCountdown.ensureTimer();
}
fsInner.querySelectorAll(".btn-expand-back").forEach((btn) => {
btn.onclick = (ev) => {
ev.stopPropagation();
@@ -3472,10 +3478,16 @@
return s.slice(0, 10) + "…" + s.slice(-8);
}
function optionsExpiryCdHtml(expMs) {
const ms = expMs != null && expMs !== "" ? String(expMs) : "";
if (!ms) return "—";
return `<span class="opt-expiry-cd" data-opt-exp-ms="${esc(ms)}">—</span>`;
}
function renderOptionsPositionsTable(pos) {
if (!pos.length) return '<div class="empty-hint">暂无期权持仓</div>';
let html = '<div class="table-wrap hub-options-table-wrap"><table class="hub-options-table"><thead><tr>';
html += "<th>合约</th><th>类型</th><th>张数</th><th>指数</th><th>到期平衡</th><th>平掉回本</th><th>浮盈</th><th>浮盈%</th>";
html += "<th>合约</th><th>类型</th><th>张数</th><th>到期倒计时</th><th>指数</th><th>到期平衡</th><th>平掉回本</th><th>浮盈</th><th>浮盈%</th>";
html += "</tr></thead><tbody>";
pos.forEach((p) => {
const optType = (p.opt_type || "").toUpperCase() === "C" ? "Call" : (p.opt_type || "").toUpperCase() === "P" ? "Put" : (p.opt_type || "—");
@@ -3483,6 +3495,7 @@
<td><code class="hub-options-inst" title="${esc(p.inst_id || "")}">${esc(shortOptionsInst(p.inst_id))}</code></td>
<td>${esc(optType)}</td>
<td>${esc(p.pos)}</td>
<td>${optionsExpiryCdHtml(p.exp_time_ms != null ? p.exp_time_ms : p.exp_time)}</td>
<td>${p.idx_px != null ? fmt(p.idx_px, 0) : "—"}</td>
<td>${p.expiry_be_px != null ? fmt(p.expiry_be_px, 0) : "—"}</td>
<td>${p.close_be_px != null ? fmt(p.close_be_px, 0) : "—"}</td>
+11 -1
View File
@@ -118,6 +118,12 @@
return chips;
}
function dashOptionsExpiryCd(expMs) {
const ms = expMs != null && expMs !== "" ? String(expMs) : "";
if (!ms) return "—";
return `<span class="opt-expiry-cd" data-opt-exp-ms="${esc(ms)}">—</span>`;
}
function renderDashboardOptionsTable(positions) {
const pos = Array.isArray(positions) ? positions : [];
if (!pos.length) return "";
@@ -132,6 +138,7 @@
return `<tr>
<td title="${esc(p.inst_id || "")}">${esc(shortDashInst(p.inst_id))}</td>
<td>${esc(optType)}</td>
<td>${dashOptionsExpiryCd(p.exp_time_ms != null ? p.exp_time_ms : p.exp_time)}</td>
<td>${p.idx_px != null ? fmt(p.idx_px, 0) : "—"}</td>
<td>${p.expiry_be_px != null ? fmt(p.expiry_be_px, 0) : "—"}</td>
<td>${p.close_be_px != null ? fmt(p.close_be_px, 0) : "—"}</td>
@@ -144,7 +151,7 @@
<div class="dash-table-wrap dash-options-table-wrap">
<table class="dash-table dash-options-table">
<thead><tr>
<th>合约</th><th></th><th></th><th></th><th></th><th></th>
<th>合约</th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr></thead>
<tbody>${rows}</tbody>
</table>
@@ -303,6 +310,9 @@
})
.join("");
bindDashboardExpand();
if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
OptionsExpiryCountdown.ensureTimer();
}
}
function renderTrades(trades, accounts) {
+3 -2
View File
@@ -1146,11 +1146,12 @@
<script src="/assets/trade_stats_calendar.js?v=3"></script>
<script src="/assets/archive.js?v=20260626-archive-layout"></script>
<script src="/assets/funds.js?v=20260707-hub-options-funds"></script>
<script src="/assets/dashboard.js?v=20260707-dash-okx-options"></script>
<script src="/assets/dashboard.js?v=20260708-options-expiry-cd"></script>
<script src="/assets/strategy.js?v=3"></script>
<script src="/assets/ai_review_render.js?v=3"></script>
<script src="/assets/time_close_ui.js?v=3"></script>
<script src="/assets/options_expiry_countdown.js?v=1"></script>
<script src="/assets/backup.js?v=1"></script>
<script src="/assets/app.js?v=20260707-monitor-options-split"></script>
<script src="/assets/app.js?v=20260708-options-expiry-cd"></script>
</body>
</html>