dekun
531 lines
20 KiB
JavaScript
531 lines
20 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
const root = document.getElementById("options-root");
|
|
if (!root) return;
|
|
|
|
const panelCache = (window.__optionsPanelCache = window.__optionsPanelCache || {});
|
|
|
|
const state = {
|
|
underlying: root.dataset.defaultUnderly || "ETH",
|
|
optType: "C",
|
|
chain: panelCache.chain || null,
|
|
selectedInst: null,
|
|
};
|
|
|
|
function fmt(v, d) {
|
|
if (v === null || v === undefined || Number.isNaN(Number(v))) return "—";
|
|
return Number(v).toFixed(d == null ? 2 : d);
|
|
}
|
|
|
|
async function apiJson(url, opts) {
|
|
const r = await fetch(url, Object.assign({ credentials: "same-origin" }, opts || {}));
|
|
return r.json();
|
|
}
|
|
|
|
function orderPanel() {
|
|
return document.getElementById("opt-order-panel");
|
|
}
|
|
|
|
function orderPanelHost() {
|
|
return document.getElementById("opt-order-panel-host");
|
|
}
|
|
|
|
function parkOrderPanel() {
|
|
const panel = orderPanel();
|
|
const host = orderPanelHost();
|
|
const inline = document.querySelector(".opt-order-inline-row");
|
|
if (inline) inline.remove();
|
|
if (panel && host && panel.parentElement !== host) {
|
|
host.appendChild(panel);
|
|
host.hidden = true;
|
|
}
|
|
if (panel) panel.style.display = "none";
|
|
document.querySelectorAll(".opt-strike-row").forEach(function (r) {
|
|
r.classList.remove("opt-row-selected");
|
|
});
|
|
document.querySelectorAll(".opt-pick-btn").forEach(function (b) {
|
|
b.classList.remove("active");
|
|
b.disabled = false;
|
|
if (b.dataset.origText) b.textContent = b.dataset.origText;
|
|
});
|
|
}
|
|
|
|
function placeOrderPanelAfter(instId) {
|
|
const panel = orderPanel();
|
|
if (!panel || !instId) return;
|
|
const row = document.querySelector('#opt-strike-tbody tr.opt-strike-row[data-inst="' + CSS.escape(instId) + '"]');
|
|
if (!row) return;
|
|
document.querySelectorAll(".opt-strike-row").forEach(function (r) {
|
|
r.classList.toggle("opt-row-selected", r === row);
|
|
});
|
|
document.querySelectorAll(".opt-pick-btn").forEach(function (btn) {
|
|
const on = btn.getAttribute("data-inst") === instId;
|
|
btn.classList.toggle("active", on);
|
|
if (!btn.dataset.origText) btn.dataset.origText = btn.textContent;
|
|
if (on) btn.textContent = "已选";
|
|
});
|
|
const oldInline = document.querySelector(".opt-order-inline-row");
|
|
if (oldInline) oldInline.remove();
|
|
const tr = document.createElement("tr");
|
|
tr.className = "opt-order-inline-row";
|
|
const td = document.createElement("td");
|
|
td.colSpan = 6;
|
|
td.appendChild(panel);
|
|
tr.appendChild(td);
|
|
row.after(tr);
|
|
panel.style.display = "";
|
|
orderPanelHost().hidden = true;
|
|
tr.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
}
|
|
|
|
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 += "ð_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>";
|
|
}
|
|
|
|
function optTypeLabel(t) {
|
|
return (t || "").toUpperCase() === "P" ? "看跌 Put" : "看涨 Call";
|
|
}
|
|
|
|
function expLabel(ms) {
|
|
try {
|
|
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);
|
|
}
|
|
}
|
|
|
|
function renderExpiries() {
|
|
const sel = document.getElementById("opt-exp-select");
|
|
sel.innerHTML = '<option value="">选择到期日</option>';
|
|
const exps = (state.chain && state.chain.expiries) || [];
|
|
exps.forEach(function (e) {
|
|
const o = document.createElement("option");
|
|
o.value = String(e.exp_time);
|
|
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(idx, 2) + " · 实值=价内 · 虚值=价外";
|
|
}
|
|
|
|
function renderStrikes() {
|
|
const tbody = document.getElementById("opt-strike-tbody");
|
|
const expMs = document.getElementById("opt-exp-select").value;
|
|
const prevSelected = state.selectedInst;
|
|
parkOrderPanel();
|
|
tbody.innerHTML = "";
|
|
if (!expMs || !state.chain) {
|
|
tbody.innerHTML = '<tr><td colspan="6" class="muted">请选择到期日</td></tr>';
|
|
state.selectedInst = null;
|
|
return;
|
|
}
|
|
const exp = (state.chain.expiries || []).find(function (e) {
|
|
return String(e.exp_time) === String(expMs);
|
|
});
|
|
if (!exp) return;
|
|
const list = (exp.contracts || []).filter(function (c) {
|
|
return c.opt_type === state.optType;
|
|
});
|
|
if (!list.length) {
|
|
tbody.innerHTML = '<tr><td colspan="6" class="muted">该到期日暂无报价</td></tr>';
|
|
state.selectedInst = null;
|
|
return;
|
|
}
|
|
let stillVisible = false;
|
|
list.forEach(function (c) {
|
|
const tr = document.createElement("tr");
|
|
tr.className = "opt-strike-row";
|
|
tr.setAttribute("data-inst", c.inst_id);
|
|
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>" +
|
|
'<td class="opt-row-actions">' +
|
|
'<button type="button" class="btn-secondary opt-pick-btn" data-inst="' + c.inst_id + '">选择</button> ' +
|
|
'<button type="button" class="btn-primary opt-buy-btn" data-inst="' + c.inst_id + '">买入</button>' +
|
|
"</td>";
|
|
tbody.appendChild(tr);
|
|
if (c.inst_id === prevSelected) stillVisible = true;
|
|
});
|
|
tbody.querySelectorAll(".opt-pick-btn").forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
selectContract(btn.getAttribute("data-inst"), btn);
|
|
});
|
|
});
|
|
tbody.querySelectorAll(".opt-buy-btn").forEach(function (btn) {
|
|
btn.addEventListener("click", async function () {
|
|
await selectContract(btn.getAttribute("data-inst"), null);
|
|
await openPosition();
|
|
});
|
|
});
|
|
if (stillVisible && prevSelected) {
|
|
selectContract(prevSelected, null, true);
|
|
} else {
|
|
state.selectedInst = null;
|
|
}
|
|
}
|
|
|
|
function fillOrderPanel(d) {
|
|
const sz = d.sizing || {};
|
|
document.getElementById("opt-order-inst").textContent = d.inst_id || state.selectedInst || "";
|
|
document.getElementById("opt-order-ask").textContent = fmt(d.ask, 4);
|
|
document.getElementById("opt-order-sheets").textContent = sz.sheets != null ? sz.sheets : "—";
|
|
document.getElementById("opt-order-eth").textContent = sz.eth_amount != null ? sz.eth_amount : "—";
|
|
document.getElementById("opt-order-premium").textContent = sz.total_premium != null ? fmt(sz.total_premium, 4) + " USDC" : "—";
|
|
const msgEl = document.getElementById("opt-order-msg");
|
|
if (!d.ok) {
|
|
msgEl.textContent = d.msg || "报价失败";
|
|
msgEl.classList.add("opt-error");
|
|
} else if (sz.ok === false) {
|
|
msgEl.textContent = sz.msg || "";
|
|
msgEl.classList.add("opt-error");
|
|
} else {
|
|
msgEl.textContent = "";
|
|
msgEl.classList.remove("opt-error");
|
|
}
|
|
}
|
|
|
|
async function selectContract(instId, pickBtn, silent) {
|
|
state.selectedInst = instId;
|
|
placeOrderPanelAfter(instId);
|
|
if (pickBtn) {
|
|
pickBtn.disabled = true;
|
|
if (!pickBtn.dataset.origText) pickBtn.dataset.origText = "选择";
|
|
pickBtn.textContent = "加载…";
|
|
}
|
|
try {
|
|
const d = await apiJson(quoteUrl(instId));
|
|
fillOrderPanel(d);
|
|
return d;
|
|
} finally {
|
|
if (pickBtn) {
|
|
pickBtn.disabled = false;
|
|
pickBtn.textContent = "已选";
|
|
pickBtn.classList.add("active");
|
|
}
|
|
if (!silent) placeOrderPanelAfter(instId);
|
|
}
|
|
}
|
|
|
|
async function loadChain() {
|
|
const d = await apiJson("/api/options/chain?underlying=" + encodeURIComponent(state.underlying));
|
|
if (!d.ok) {
|
|
alert(d.msg || "加载失败");
|
|
return;
|
|
}
|
|
state.chain = d;
|
|
panelCache.chain = d;
|
|
panelCache.underlying = state.underlying;
|
|
panelCache.optType = state.optType;
|
|
state.selectedInst = null;
|
|
parkOrderPanel();
|
|
renderExpiries();
|
|
renderStrikes();
|
|
}
|
|
|
|
async function openPosition() {
|
|
if (!state.selectedInst) {
|
|
alert("请先选择合约");
|
|
return;
|
|
}
|
|
const btn = document.getElementById("opt-open-btn");
|
|
btn.disabled = true;
|
|
try {
|
|
const mode = currentSizeMode();
|
|
const body = {
|
|
inst_id: state.selectedInst,
|
|
mode: mode,
|
|
signal_note: document.getElementById("opt-signal-note").value || "",
|
|
};
|
|
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",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body),
|
|
});
|
|
const msgEl = document.getElementById("opt-order-msg");
|
|
msgEl.textContent = d.ok ? "下单已提交，可在 OKX 委托中查看" : (d.msg || "失败");
|
|
msgEl.classList.toggle("opt-error", !d.ok);
|
|
if (d.ok) {
|
|
refreshAllPositions();
|
|
if (typeof refreshAccountSnapshot === "function") refreshAccountSnapshot();
|
|
} else {
|
|
alert(d.msg || "下单失败");
|
|
}
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
function renderPositionCard(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";
|
|
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>" +
|
|
'<div class="pos-head-actions">' +
|
|
'<button type="button" class="btn-primary opt-close-btn" data-inst="' + p.inst_id + '">限价平仓</button>' +
|
|
"</div></div>" +
|
|
'<div class="pos-meta">' +
|
|
'<span class="pos-meta-item">行权价: ' + fmt(p.strike, 0) + "</span>" +
|
|
'<span class="pos-meta-item">张数: ' + fmt(p.pos, 0) + " · 币量 " + fmt(p.eth_amount, 4) + "</span>" +
|
|
"</div>" +
|
|
'<div class="pos-grid">' +
|
|
'<div class="pos-cell"><span class="pos-label">开仓均价</span><span class="pos-value">' + fmt(p.avg_px, 4) + "</span></div>" +
|
|
'<div class="pos-cell"><span class="pos-label">标记价</span><span class="pos-value">' + fmt(p.mark_px, 4) + "</span></div>" +
|
|
'<div class="pos-cell"><span class="pos-label">浮盈亏</span><span class="pos-value ' + uplCls + '">' + fmt(p.upl, 4) + "</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>"
|
|
);
|
|
}
|
|
|
|
async function closePosition(inst, btn) {
|
|
const q = await apiJson("/api/options/quote?inst_id=" + encodeURIComponent(inst) + "&mode=sheets&sheets=1");
|
|
if (!q.ok) {
|
|
alert(q.msg || "获取买一价失败");
|
|
return;
|
|
}
|
|
const bid = q.bid;
|
|
if (bid == null || bid <= 0) {
|
|
alert("暂无买一价，请稍后在 OKX App 平仓或等盘口恢复");
|
|
return;
|
|
}
|
|
if (!confirm("限价卖出 @ 买一 " + fmt(bid, 4) + "（每 1 ETH/BTC）？\n合约：" + inst)) return;
|
|
if (btn) btn.disabled = true;
|
|
try {
|
|
const r = await apiJson("/api/options/close", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ inst_id: inst }),
|
|
});
|
|
if (r.ok) {
|
|
alert("平仓单已提交" + (r.bid != null ? " @ " + fmt(r.bid, 4) : ""));
|
|
} else {
|
|
alert(r.msg || "平仓失败");
|
|
}
|
|
refreshAllPositions();
|
|
if (typeof refreshAccountSnapshot === "function") refreshAccountSnapshot();
|
|
} finally {
|
|
if (btn) btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
async function refreshPositions() {
|
|
const d = await apiJson("/api/options/positions");
|
|
const wrap = document.getElementById("opt-pos-cards");
|
|
const empty = document.getElementById("opt-pos-empty");
|
|
const list = (d.ok && d.positions) || [];
|
|
wrap.innerHTML = "";
|
|
if (!list.length) {
|
|
empty.style.display = "";
|
|
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);
|
|
});
|
|
});
|
|
}
|
|
|
|
async function refreshStats() {
|
|
const d = await apiJson("/api/options/stats");
|
|
const winEl = document.getElementById("opt-stats-winrate");
|
|
const plrEl = document.getElementById("opt-stats-plr");
|
|
const closedEl = document.getElementById("opt-stats-closed");
|
|
const profitEl = document.getElementById("opt-stats-profit");
|
|
const lossEl = document.getElementById("opt-stats-loss");
|
|
if (!d.ok) {
|
|
[winEl, plrEl, closedEl, profitEl, lossEl].forEach(function (el) {
|
|
if (el) el.textContent = "—";
|
|
});
|
|
return;
|
|
}
|
|
if (winEl) winEl.textContent = d.total_closed ? d.win_rate + "%" : "0%";
|
|
if (plrEl) {
|
|
plrEl.textContent = d.profit_loss_ratio != null ? String(d.profit_loss_ratio) : "—";
|
|
}
|
|
if (closedEl) closedEl.textContent = String(d.total_closed || 0);
|
|
if (profitEl) {
|
|
profitEl.textContent = d.total_profit != null && d.total_profit > 0
|
|
? fmt(d.total_profit, 4) + " USDC" : (d.total_closed ? "0 USDC" : "—");
|
|
}
|
|
if (lossEl) {
|
|
lossEl.textContent = d.total_loss != null && d.total_loss > 0
|
|
? fmt(d.total_loss, 4) + " USDC" : (d.total_closed ? "0 USDC" : "—");
|
|
}
|
|
}
|
|
|
|
async function deleteHistoryRow(id, status) {
|
|
const warn = status === "open"
|
|
? "该记录仍为持仓中，仅删除本地记录，不影响交易所持仓。确认删除？"
|
|
: "确认删除该条期权历史记录？";
|
|
if (!confirm(warn)) return;
|
|
const r = await apiJson("/api/options/history/" + encodeURIComponent(id), { method: "DELETE" });
|
|
if (!r.ok) {
|
|
alert(r.msg || "删除失败");
|
|
return;
|
|
}
|
|
refreshAllPositions();
|
|
}
|
|
|
|
async function refreshHistory() {
|
|
const d = await apiJson("/api/options/history");
|
|
const tbody = document.getElementById("opt-history-tbody");
|
|
tbody.innerHTML = "";
|
|
const list = (d.ok && d.history) || [];
|
|
if (!list.length) {
|
|
tbody.innerHTML = '<tr><td colspan="7" class="muted">暂无历史记录</td></tr>';
|
|
return;
|
|
}
|
|
list.forEach(function (h) {
|
|
const tr = document.createElement("tr");
|
|
const prem = h.status === "closed" ? h.premium_received : h.premium_paid;
|
|
const pnl = h.realized_pnl;
|
|
const pnlTxt = pnl != null ? fmt(pnl, 4) : "—";
|
|
const pnlCls = pnl > 0 ? "pos-pnl-profit" : pnl < 0 ? "pos-pnl-loss" : "";
|
|
tr.innerHTML =
|
|
"<td><code>" + (h.inst_id || "") + "</code></td>" +
|
|
"<td>" + fmt(h.sheets, 0) + "</td>" +
|
|
"<td>" + fmt(prem, 4) + "</td>" +
|
|
"<td>" + (h.status === "closed" ? "已平" : "持仓中") + "</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>';
|
|
tbody.appendChild(tr);
|
|
});
|
|
tbody.querySelectorAll(".opt-history-del").forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
deleteHistoryRow(btn.getAttribute("data-id"), btn.getAttribute("data-status"));
|
|
});
|
|
});
|
|
}
|
|
|
|
function refreshAllPositions() {
|
|
refreshPositions();
|
|
refreshStats();
|
|
refreshHistory();
|
|
}
|
|
|
|
function bootOptionsPanel() {
|
|
updateSizeInputs();
|
|
const hasCache =
|
|
panelCache.chain &&
|
|
panelCache.underlying === state.underlying &&
|
|
panelCache.optType === state.optType;
|
|
if (hasCache) {
|
|
state.chain = panelCache.chain;
|
|
renderExpiries();
|
|
renderStrikes();
|
|
refreshAllPositions();
|
|
return;
|
|
}
|
|
requestAnimationFrame(function () {
|
|
loadChain();
|
|
refreshAllPositions();
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll(".opt-uly-btn").forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
document.querySelectorAll(".opt-uly-btn").forEach(function (b) { b.classList.remove("active"); });
|
|
btn.classList.add("active");
|
|
state.underlying = btn.getAttribute("data-uly");
|
|
loadChain();
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".opt-type-btn").forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
document.querySelectorAll(".opt-type-btn").forEach(function (b) { b.classList.remove("active"); });
|
|
btn.classList.add("active");
|
|
state.optType = btn.getAttribute("data-type");
|
|
renderStrikes();
|
|
});
|
|
});
|
|
|
|
document.getElementById("opt-exp-select").addEventListener("change", renderStrikes);
|
|
document.getElementById("opt-load-chain").addEventListener("click", loadChain);
|
|
document.getElementById("opt-refresh-positions").addEventListener("click", refreshAllPositions);
|
|
document.getElementById("opt-open-btn").addEventListener("click", openPosition);
|
|
|
|
document.querySelectorAll('input[name="opt-size-mode"]').forEach(function (r) {
|
|
r.addEventListener("change", function () {
|
|
updateSizeInputs();
|
|
if (state.selectedInst) selectContract(state.selectedInst, null, true);
|
|
});
|
|
});
|
|
|
|
["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, null, true);
|
|
});
|
|
});
|
|
|
|
bootOptionsPanel();
|
|
|
|
window.OptionsPanelLive = {
|
|
refreshSoft: function () {
|
|
refreshAllPositions();
|
|
},
|
|
refreshChain: loadChain,
|
|
};
|
|
})();
|