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

feat: options sheet sizing, ITM/OTM labels, and 14-day chain view

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 09:06:45 +08:00
parent d6d1ac5818
commit c1647822fb
8 changed files with 172 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_theme.css
+26
View File
@@ -2401,4 +2401,30 @@ html[data-theme="light"] .settings-export-link {
.opt-row-actions .btn-secondary {
margin-right: 4px;
}
.opt-moneyness {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 600;
}
.opt-moneyness-itm {
color: #7ee787;
background: rgba(46, 160, 67, 0.15);
}
.opt-moneyness-otm {
color: #a8b3cf;
background: rgba(136, 146, 176, 0.12);
}
.opt-moneyness-atm {
color: #ffd166;
background: rgba(255, 209, 102, 0.12);
}
.options-order-mode-row {
flex-wrap: wrap;
gap: 8px;
}
.options-order-mode-row input[type="number"] {
width: 88px;
}
lib/common/static/options_panel.js
+66 -15
View File
@@ -29,6 +29,38 @@
}
}
function currentSizeMode() {
const el = document.querySelector('input[name="opt-size-mode"]:checked');
return el ? el.value : "sheets";
}
function updateSizeInputs() {
const mode = currentSizeMode();
const sheetsEl = document.getElementById("opt-sheets-amount");
const ethEl = document.getElementById("opt-eth-amount");
if (sheetsEl) sheetsEl.style.display = mode === "sheets" ? "" : "none";
if (ethEl) ethEl.style.display = mode === "eth_amount" ? "" : "none";
}
function quoteUrl(instId) {
const mode = currentSizeMode();
let url = "/api/options/quote?inst_id=" + encodeURIComponent(instId) + "&mode=" + mode;
if (mode === "eth_amount") {
const eth = document.getElementById("opt-eth-amount").value;
if (eth) url += "&eth_amount=" + encodeURIComponent(eth);
} else if (mode === "sheets") {
const sheets = document.getElementById("opt-sheets-amount").value;
if (sheets) url += "&sheets=" + encodeURIComponent(sheets);
}
return url;
}
function moneynessBadge(c) {
const m = (c && c.moneyness) || "";
const label = (c && c.moneyness_label) || "—";
return '<span class="opt-moneyness opt-moneyness-' + m + '">' + label + "</span>";
}
async function refreshBalances() {
const d = await apiJson("/api/options/balances");
if (!d.ok) return;
@@ -42,7 +74,11 @@
function expLabel(ms) {
try {
return new Date(Number(ms)).toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
const dt = new Date(Number(ms));
const now = Date.now();
const dte = Math.max(0, Math.ceil((Number(ms) - now) / 86400000));
const base = dt.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
return base + " · " + dte + "D";
} catch (e) {
return String(ms);
}
@@ -58,8 +94,14 @@
o.textContent = expLabel(e.exp_time) + " (" + e.contracts.length + ")";
sel.appendChild(o);
});
const idx = state.chain && state.chain.index_px;
const dte = state.chain && state.chain.chain_max_dte_days;
if (dte != null) {
const el = document.getElementById("opt-chain-dte");
if (el) el.textContent = String(Math.round(dte));
}
document.getElementById("opt-index-line").textContent =
"指数 " + state.underlying + " ≈ " + fmt(state.chain && state.chain.index_px, 2);
"指数 " + state.underlying + " ≈ " + fmt(idx, 2) + " · 实值=价内 · 虚值=价外";
}
function renderStrikes() {
@@ -67,7 +109,7 @@
const expMs = document.getElementById("opt-exp-select").value;
tbody.innerHTML = "";
if (!expMs || !state.chain) {
tbody.innerHTML = '<tr><td colspan="5" class="muted">请选择到期日</td></tr>';
tbody.innerHTML = '<tr><td colspan="6" class="muted">请选择到期日</td></tr>';
return;
}
const exp = (state.chain.expiries || []).find(function (e) {
@@ -78,13 +120,15 @@
return c.opt_type === state.optType;
});
if (!list.length) {
tbody.innerHTML = '<tr><td colspan="5" class="muted">无符合的实值合约</td></tr>';
tbody.innerHTML = '<tr><td colspan="6" class="muted">该到期日暂无报价</td></tr>';
return;
}
list.forEach(function (c) {
const tr = document.createElement("tr");
if (c.moneyness) tr.classList.add("opt-row-" + c.moneyness);
tr.innerHTML =
"<td>" + c.strike + "</td>" +
"<td>" + moneynessBadge(c) + "</td>" +
"<td><code>" + c.inst_id + "</code></td>" +
"<td>" + fmt(c.ask, 4) + "</td>" +
"<td>" + fmt(c.bid, 4) + "</td>" +
@@ -109,13 +153,7 @@
async function selectContract(instId) {
state.selectedInst = instId;
const mode = document.querySelector('input[name="opt-size-mode"]:checked').value;
const ethInput = document.getElementById("opt-eth-amount");
let url = "/api/options/quote?inst_id=" + encodeURIComponent(instId) + "&mode=" + mode;
if (mode === "eth_amount" && ethInput.value) {
url += "&eth_amount=" + encodeURIComponent(ethInput.value);
}
const d = await apiJson(url);
const d = await apiJson(quoteUrl(instId));
const panel = document.getElementById("opt-order-panel");
panel.style.display = "";
document.getElementById("opt-order-inst").textContent = instId;
@@ -158,7 +196,7 @@
const btn = document.getElementById("opt-open-btn");
btn.disabled = true;
try {
const mode = document.querySelector('input[name="opt-size-mode"]:checked').value;
const mode = currentSizeMode();
const body = {
inst_id: state.selectedInst,
mode: mode,
@@ -166,6 +204,8 @@
};
if (mode === "eth_amount") {
body.eth_amount = parseFloat(document.getElementById("opt-eth-amount").value);
} else if (mode === "sheets") {
body.sheets = parseInt(document.getElementById("opt-sheets-amount").value, 10);
}
const d = await apiJson("/api/options/open", {
method: "POST",
@@ -187,7 +227,7 @@
}
async function closePosition(inst, btn) {
const q = await apiJson("/api/options/quote?inst_id=" + encodeURIComponent(inst) + "&mode=budget_full");
const q = await apiJson("/api/options/quote?inst_id=" + encodeURIComponent(inst) + "&mode=sheets&sheets=1");
if (!q.ok) {
alert(q.msg || "获取买一价失败");
return;
@@ -272,8 +312,18 @@
document.querySelectorAll('input[name="opt-size-mode"]').forEach(function (r) {
r.addEventListener("change", function () {
document.getElementById("opt-eth-amount").style.display =
r.value === "eth_amount" && r.checked ? "" : "none";
updateSizeInputs();
if (state.selectedInst) selectContract(state.selectedInst);
});
});
["opt-sheets-amount", "opt-eth-amount"].forEach(function (id) {
const el = document.getElementById(id);
if (!el) return;
el.addEventListener("change", function () {
if (state.selectedInst) selectContract(state.selectedInst);
});
el.addEventListener("input", function () {
if (state.selectedInst) selectContract(state.selectedInst);
});
});
@@ -331,6 +381,7 @@
refreshBalances();
});
updateSizeInputs();
refreshBalances();
loadChain();
refreshPositions();