Switch hedge-plan modes to high-contrast tabs with history/stats placeholders.
EOF Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -6,6 +6,7 @@
|
||||
if (!root) return;
|
||||
|
||||
const state = {
|
||||
tab: "perp_options",
|
||||
mode: "perp_options",
|
||||
underlying: root.getAttribute("data-default-underly") || "ETH",
|
||||
chain: null,
|
||||
@@ -37,14 +38,28 @@
|
||||
return dir === "short" ? "C" : "P";
|
||||
}
|
||||
|
||||
function syncModeUI() {
|
||||
document.querySelectorAll(".hp-mode-btn").forEach(function (b) {
|
||||
b.classList.toggle("active", b.getAttribute("data-mode") === state.mode);
|
||||
function syncTabUI() {
|
||||
const tab = state.tab || "perp_options";
|
||||
document.querySelectorAll(".hp-tab").forEach(function (b) {
|
||||
const on = b.getAttribute("data-tab") === tab;
|
||||
b.classList.toggle("active", on);
|
||||
b.setAttribute("aria-selected", on ? "true" : "false");
|
||||
});
|
||||
const po = $("hp-po-layout");
|
||||
const oo = $("hp-oo-layout");
|
||||
if (po) po.classList.toggle("hidden", state.mode !== "perp_options");
|
||||
if (oo) oo.classList.toggle("hidden", state.mode !== "options_options");
|
||||
["perp_options", "options_options", "history", "stats"].forEach(function (id) {
|
||||
const panel = $("hp-tab-" + id);
|
||||
if (!panel) return;
|
||||
const on = id === tab;
|
||||
panel.classList.toggle("hidden", !on);
|
||||
if (on) panel.removeAttribute("hidden");
|
||||
else panel.setAttribute("hidden", "");
|
||||
});
|
||||
if (tab === "perp_options" || tab === "options_options") {
|
||||
state.mode = tab;
|
||||
}
|
||||
}
|
||||
|
||||
function syncModeUI() {
|
||||
syncTabUI();
|
||||
}
|
||||
|
||||
function setGateLine(gates) {
|
||||
@@ -341,11 +356,12 @@
|
||||
}
|
||||
|
||||
async function runPreview() {
|
||||
const tbody = $("hp-result-tbody");
|
||||
const summary = $("hp-summary");
|
||||
const isOo = state.mode === "options_options";
|
||||
const tbody = $(isOo ? "hp-result-tbody-oo" : "hp-result-tbody");
|
||||
const summary = $(isOo ? "hp-summary-oo" : "hp-summary");
|
||||
try {
|
||||
let body;
|
||||
if (state.mode === "options_options") {
|
||||
if (isOo) {
|
||||
if (!state.legA || !state.legB) throw new Error("请选用两条期权腿");
|
||||
const target = Number(($("hp-target") && $("hp-target").value) || 0);
|
||||
if (!target) throw new Error("请填写目标价");
|
||||
@@ -408,6 +424,7 @@
|
||||
(s.expiry_is_loss ? " · 到期无盈利(记总亏损)" : "");
|
||||
}
|
||||
}
|
||||
if (!tbody) return;
|
||||
tbody.innerHTML = "";
|
||||
(d.scenarios || []).forEach(function (sc) {
|
||||
const tr = document.createElement("tr");
|
||||
@@ -441,11 +458,21 @@
|
||||
}
|
||||
|
||||
function bind() {
|
||||
document.querySelectorAll(".hp-mode-btn").forEach(function (b) {
|
||||
document.querySelectorAll(".hp-tab").forEach(function (b) {
|
||||
b.addEventListener("click", function () {
|
||||
state.mode = b.getAttribute("data-mode") || "perp_options";
|
||||
syncModeUI();
|
||||
loadGates();
|
||||
state.tab = b.getAttribute("data-tab") || "perp_options";
|
||||
syncTabUI();
|
||||
if (state.tab === "perp_options" || state.tab === "options_options") {
|
||||
void loadGates();
|
||||
} else {
|
||||
const el = $("hp-gate-line");
|
||||
if (el) {
|
||||
el.textContent =
|
||||
state.tab === "history"
|
||||
? "历史记录:独立对冲表,与普通交易记录分离"
|
||||
: "统计:止盈=盈利−保费;止损=期权盈利−永续亏损";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
document.querySelectorAll(".hp-uly-btn, .hp-uly-btn-oo").forEach(function (b) {
|
||||
@@ -468,27 +495,37 @@
|
||||
});
|
||||
});
|
||||
}
|
||||
if ($("hp-refresh")) $("hp-refresh").addEventListener("click", function () {
|
||||
void refreshAll();
|
||||
});
|
||||
if ($("hp-load-chain")) $("hp-load-chain").addEventListener("click", function () {
|
||||
void loadChain();
|
||||
});
|
||||
if ($("hp-oo-load-chain")) $("hp-oo-load-chain").addEventListener("click", function () {
|
||||
void loadChain();
|
||||
});
|
||||
if ($("hp-exp-select"))
|
||||
$("hp-exp-select").addEventListener("change", renderListStrikes);
|
||||
if ($("hp-oo-exp-select"))
|
||||
$("hp-oo-exp-select").addEventListener("change", renderTStrikes);
|
||||
if ($("hp-refresh"))
|
||||
$("hp-refresh").addEventListener("click", function () {
|
||||
void refreshAll();
|
||||
});
|
||||
if ($("hp-load-chain"))
|
||||
$("hp-load-chain").addEventListener("click", function () {
|
||||
void loadChain();
|
||||
});
|
||||
if ($("hp-oo-load-chain"))
|
||||
$("hp-oo-load-chain").addEventListener("click", function () {
|
||||
void loadChain();
|
||||
});
|
||||
if ($("hp-exp-select")) $("hp-exp-select").addEventListener("change", renderListStrikes);
|
||||
if ($("hp-oo-exp-select")) $("hp-oo-exp-select").addEventListener("change", renderTStrikes);
|
||||
if ($("hp-sheets")) $("hp-sheets").addEventListener("input", updatePremiumLine);
|
||||
if ($("hp-preview-btn")) $("hp-preview-btn").addEventListener("click", function () {
|
||||
void runPreview();
|
||||
});
|
||||
if ($("hp-preview-btn"))
|
||||
$("hp-preview-btn").addEventListener("click", function () {
|
||||
state.mode = "perp_options";
|
||||
void runPreview();
|
||||
});
|
||||
if ($("hp-preview-btn-oo"))
|
||||
$("hp-preview-btn-oo").addEventListener("click", function () {
|
||||
state.mode = "options_options";
|
||||
void runPreview();
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
await loadGates();
|
||||
if (state.tab === "perp_options" || state.tab === "options_options") {
|
||||
await loadGates();
|
||||
}
|
||||
try {
|
||||
await loadMarket();
|
||||
} catch (e) {
|
||||
@@ -503,7 +540,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
syncModeUI();
|
||||
syncTabUI();
|
||||
bind();
|
||||
void refreshAll();
|
||||
})();
|
||||
|
||||
@@ -3167,6 +3167,95 @@ html[data-theme="light"] .opt-be-dist-down {
|
||||
.options-strike-table-wrap--t {
|
||||
max-height: 380px;
|
||||
}
|
||||
|
||||
/* 对冲计划 Tab：高对比选中态 */
|
||||
.hedge-plan-page-wrap .hp-head-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-head-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-title {
|
||||
margin: 0;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-title-sub {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 0 0 10px;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-tab {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #aeb6c5;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
padding: 9px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
line-height: 1.2;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-tab:hover {
|
||||
color: #eef3ff;
|
||||
border-color: rgba(120, 170, 255, 0.45);
|
||||
background: rgba(74, 124, 255, 0.16);
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-tab.active {
|
||||
color: #0b1220;
|
||||
background: linear-gradient(180deg, #d7e6ff 0%, #8eb6ff 100%);
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 0 2px rgba(142, 182, 255, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-tab-panel.hidden,
|
||||
.hedge-plan-page-wrap .hp-tab-panel[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-placeholder {
|
||||
margin: 16px 0 4px;
|
||||
padding: 18px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.16);
|
||||
color: #9aa4b2;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
.hedge-plan-page-wrap #hp-gate-line {
|
||||
margin: 0;
|
||||
}
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-tabs {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
border-color: rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-tab {
|
||||
background: #fff;
|
||||
color: #5b6472;
|
||||
border-color: rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-tab.active {
|
||||
color: #0b1220;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #b9d2ff 100%);
|
||||
border-color: #2f6fed;
|
||||
box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.25);
|
||||
}
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-placeholder {
|
||||
border-color: rgba(15, 23, 42, 0.18);
|
||||
background: rgba(15, 23, 42, 0.03);
|
||||
}
|
||||
.options-strike-table--t thead th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -11,134 +11,179 @@
|
||||
<div class="flash" style="margin-bottom:12px">期权模块未启用,无法拉期权链.请先配置期权账户.</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card" style="margin-bottom:12px">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between">
|
||||
<h2 style="margin:0">对冲计划 <span class="muted" style="font-size:.85rem;font-weight:400">P0 测算</span></h2>
|
||||
<div class="form-row" style="margin:0">
|
||||
<button type="button" class="btn-secondary hp-mode-btn active" data-mode="perp_options">永期对冲</button>
|
||||
<button type="button" class="btn-secondary hp-mode-btn" data-mode="options_options">期期对冲</button>
|
||||
<button type="button" class="btn-secondary" id="hp-refresh">刷新行情</button>
|
||||
</div>
|
||||
<div class="card hp-head-card">
|
||||
<div class="hp-head-row">
|
||||
<h2 class="hp-title">对冲计划 <span class="muted hp-title-sub">P0 测算</span></h2>
|
||||
<button type="button" class="btn-secondary" id="hp-refresh" title="刷新永续行情与期权链">刷新行情</button>
|
||||
</div>
|
||||
<p class="muted" id="hp-gate-line" style="margin:8px 0 0"></p>
|
||||
<div class="hp-tabs" role="tablist" aria-label="对冲计划分类">
|
||||
<button type="button" class="hp-tab active" role="tab" aria-selected="true" data-tab="perp_options">永期对冲</button>
|
||||
<button type="button" class="hp-tab" role="tab" aria-selected="false" data-tab="options_options">期期对冲</button>
|
||||
<button type="button" class="hp-tab" role="tab" aria-selected="false" data-tab="history">历史记录</button>
|
||||
<button type="button" class="hp-tab" role="tab" aria-selected="false" data-tab="stats">统计分析</button>
|
||||
</div>
|
||||
<p class="muted" id="hp-gate-line"></p>
|
||||
</div>
|
||||
|
||||
<div class="options-dual-grid" id="hp-po-layout">
|
||||
<div class="card">
|
||||
<h2>永续(列表行情)</h2>
|
||||
<div class="form-row">
|
||||
<button type="button" class="btn-secondary hp-uly-btn active" data-uly="ETH">ETH</button>
|
||||
<button type="button" class="btn-secondary hp-uly-btn" data-uly="BTC">BTC</button>
|
||||
<select id="hp-direction">
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
<div id="hp-tab-perp_options" class="hp-tab-panel" role="tabpanel">
|
||||
<div class="options-dual-grid" id="hp-po-layout">
|
||||
<div class="card">
|
||||
<h2>永续(列表行情)</h2>
|
||||
<div class="form-row">
|
||||
<button type="button" class="btn-secondary hp-uly-btn active" data-uly="ETH">ETH</button>
|
||||
<button type="button" class="btn-secondary hp-uly-btn" data-uly="BTC">BTC</button>
|
||||
<select id="hp-direction">
|
||||
<option value="long">做多</option>
|
||||
<option value="short">做空</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="hp-perp-quote" class="muted" style="margin:8px 0;line-height:1.6">加载中…</div>
|
||||
<div class="form-row" style="flex-wrap:wrap">
|
||||
<label>开仓价 <input type="number" step="any" id="hp-entry" /></label>
|
||||
<label>止盈 <input type="number" step="any" id="hp-tp" /></label>
|
||||
<label>止损 <input type="number" step="any" id="hp-sl" /></label>
|
||||
<label>张数 <input type="number" step="any" id="hp-contracts" /></label>
|
||||
</div>
|
||||
<p class="muted" id="hp-sizing-line"></p>
|
||||
</div>
|
||||
<div id="hp-perp-quote" class="muted" style="margin:8px 0;line-height:1.6">加载中…</div>
|
||||
<div class="form-row" style="flex-wrap:wrap">
|
||||
<label>开仓价 <input type="number" step="any" id="hp-entry" /></label>
|
||||
<label>止盈 <input type="number" step="any" id="hp-tp" /></label>
|
||||
<label>止损 <input type="number" step="any" id="hp-sl" /></label>
|
||||
<label>张数 <input type="number" step="any" id="hp-contracts" /></label>
|
||||
<div class="card">
|
||||
<h2>期权(列表) · <span id="hp-opt-type-label">Put</span></h2>
|
||||
<div class="form-row">
|
||||
<select id="hp-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
|
||||
</div>
|
||||
<div id="hp-index-line" class="muted"></div>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="hp-strike-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>行权价</th>
|
||||
<th>类型</th>
|
||||
<th>卖一/张</th>
|
||||
<th>买一</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hp-strike-tbody">
|
||||
<tr><td colspan="5" class="muted">请刷新期权链</td></tr>
|
||||
</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>
|
||||
<p class="muted" id="hp-sizing-line"></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>期权(列表) · <span id="hp-opt-type-label">Put</span></h2>
|
||||
<div class="form-row">
|
||||
<select id="hp-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary" id="hp-load-chain">刷新链</button>
|
||||
<div class="card" style="margin-top:12px" id="hp-preview-card-po">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between">
|
||||
<h2 style="margin:0">情景测算</h2>
|
||||
<div class="form-row" style="margin:0">
|
||||
<button type="button" class="primary" id="hp-preview-btn">计算</button>
|
||||
<button type="button" class="btn-secondary" id="hp-start-btn" disabled title="P0 不开仓">启动计划(P0禁用)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hp-index-line" class="muted"></div>
|
||||
<div id="hp-summary" class="muted" style="margin:8px 0"></div>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="hp-strike-table">
|
||||
<table class="options-strike-table" id="hp-result-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>行权价</th>
|
||||
<th>类型</th>
|
||||
<th>卖一/张</th>
|
||||
<th>买一</th>
|
||||
<th>操作</th>
|
||||
<th>情景</th>
|
||||
<th>现货价</th>
|
||||
<th>永续/腿盈亏</th>
|
||||
<th>期权盈亏</th>
|
||||
<th>合计≈U</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hp-strike-tbody">
|
||||
<tr><td colspan="5" class="muted">请刷新期权链</td></tr>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="options-dual-grid hidden" id="hp-oo-layout">
|
||||
<div class="card">
|
||||
<h2>期期参数</h2>
|
||||
<div class="form-row">
|
||||
<button type="button" class="btn-secondary hp-uly-btn-oo active" data-uly="ETH">ETH</button>
|
||||
<button type="button" class="btn-secondary hp-uly-btn-oo" data-uly="BTC">BTC</button>
|
||||
<label>目标价 S* <input type="number" step="any" id="hp-target" /></label>
|
||||
</div>
|
||||
<div id="hp-oo-index" class="muted"></div>
|
||||
<div id="hp-oo-legs" class="muted" style="margin-top:8px;line-height:1.6">尚未选用两腿</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>期权 T 型报价</h2>
|
||||
<div class="form-row">
|
||||
<select id="hp-oo-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary" id="hp-oo-load-chain">刷新链</button>
|
||||
</div>
|
||||
<div class="options-strike-table-wrap options-strike-table-wrap--t">
|
||||
<table class="options-strike-table options-strike-table--t" id="hp-oo-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="opt-t-head-call">Call</th>
|
||||
<th class="opt-t-head-mid">行权</th>
|
||||
<th colspan="2" class="opt-t-head-put">Put</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>卖一</th><th>选用</th>
|
||||
<th>K</th>
|
||||
<th>卖一</th><th>选用</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hp-oo-tbody">
|
||||
<tr><td colspan="5" class="muted">请刷新期权链</td></tr>
|
||||
<tbody id="hp-result-tbody">
|
||||
<tr><td colspan="6" class="muted">填写参数后点计算</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:12px">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between">
|
||||
<h2 style="margin:0">情景测算</h2>
|
||||
<div class="form-row" style="margin:0">
|
||||
<button type="button" class="primary" id="hp-preview-btn">计算</button>
|
||||
<button type="button" class="btn-secondary" id="hp-start-btn" disabled title="P0 不开仓">启动计划(P0禁用)</button>
|
||||
<div id="hp-tab-options_options" class="hp-tab-panel hidden" role="tabpanel" hidden>
|
||||
<div class="options-dual-grid" id="hp-oo-layout">
|
||||
<div class="card">
|
||||
<h2>期期参数</h2>
|
||||
<div class="form-row">
|
||||
<button type="button" class="btn-secondary hp-uly-btn-oo active" data-uly="ETH">ETH</button>
|
||||
<button type="button" class="btn-secondary hp-uly-btn-oo" data-uly="BTC">BTC</button>
|
||||
<label>目标价 S* <input type="number" step="any" id="hp-target" /></label>
|
||||
</div>
|
||||
<div id="hp-oo-index" class="muted"></div>
|
||||
<div id="hp-oo-legs" class="muted" style="margin-top:8px;line-height:1.6">尚未选用两腿</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>期权 T 型报价</h2>
|
||||
<div class="form-row">
|
||||
<select id="hp-oo-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary" id="hp-oo-load-chain">刷新链</button>
|
||||
</div>
|
||||
<div class="options-strike-table-wrap options-strike-table-wrap--t">
|
||||
<table class="options-strike-table options-strike-table--t" id="hp-oo-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="opt-t-head-call">Call</th>
|
||||
<th class="opt-t-head-mid">行权</th>
|
||||
<th colspan="2" class="opt-t-head-put">Put</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>卖一</th><th>选用</th>
|
||||
<th>K</th>
|
||||
<th>卖一</th><th>选用</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hp-oo-tbody">
|
||||
<tr><td colspan="5" class="muted">请刷新期权链</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hp-summary" class="muted" style="margin:8px 0"></div>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="hp-result-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>情景</th>
|
||||
<th>现货价</th>
|
||||
<th>永续/腿盈亏</th>
|
||||
<th>期权盈亏</th>
|
||||
<th>合计≈U</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hp-result-tbody">
|
||||
<tr><td colspan="6" class="muted">填写参数后点计算</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card" style="margin-top:12px">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between">
|
||||
<h2 style="margin:0">情景测算</h2>
|
||||
<button type="button" class="primary" id="hp-preview-btn-oo">计算</button>
|
||||
</div>
|
||||
<div id="hp-summary-oo" class="muted" style="margin:8px 0"></div>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>情景</th>
|
||||
<th>现货价</th>
|
||||
<th>腿盈亏</th>
|
||||
<th>期权</th>
|
||||
<th>合计≈U</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hp-result-tbody-oo">
|
||||
<tr><td colspan="6" class="muted">选用两腿并填目标价后点计算</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hp-tab-history" class="hp-tab-panel hidden" role="tabpanel" hidden>
|
||||
<div class="card">
|
||||
<h2>历史记录</h2>
|
||||
<p class="muted">独立对冲计划历史(永期 / 期期)将在此展示合计盈亏、平仓原因与复盘短评.</p>
|
||||
<p class="hp-placeholder">P1–P5 落地后可查;当前无计划记录.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hp-tab-stats" class="hp-tab-panel hidden" role="tabpanel" hidden>
|
||||
<div class="card">
|
||||
<h2>统计分析</h2>
|
||||
<p class="muted">止盈口径:止盈盈利 − 权利金;止损口径:期权盈利 − 永续亏损;期期到期无盈利记总亏损.</p>
|
||||
<p class="hp-placeholder">统计看板随历史表上线后提供.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/hedge_plan.js?v=1"></script>
|
||||
<script src="/static/hedge_plan.js?v=3"></script>
|
||||
|
||||
@@ -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=80">
|
||||
<link rel="stylesheet" href="/static/instance_theme.css?v=81">
|
||||
<script src="/static/account_risk_badge.js?v=4"></script>
|
||||
<meta name="theme-color" content="#0b0d14">
|
||||
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
|
||||
|
||||
@@ -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=80">
|
||||
<link rel="stylesheet" href="/static/instance_theme.css?v=81">
|
||||
|
||||
</head>
|
||||
<body
|
||||
|
||||
Reference in New Issue
Block a user