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

Relax perp order dialog spacing; fix styles when dialog mounts on body.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-14 16:25:22 +08:00
parent 7d29181a04
commit 5c95625817
3 changed files with 194 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/hedge_plan.js
+17 -5
View File
@@ -1385,9 +1385,17 @@
const tag = $("hp-perp-acct-tag");
if (tag) tag.textContent = acctLabel;
const amtPrec = d.amount_precision != null ? Number(d.amount_precision) : 4;
// 弹窗只保留一行行情;明细进测算折叠
const markEl = $("hp-po-mark");
if (markEl) markEl.textContent = "标记 " + fmt(d.mark, 2);
// 指数优先用行情接口,期权链慢/失败时也不再显示 --
if (markEl) {
markEl.textContent =
"标记 " +
fmt(d.mark, 2) +
" · 永续" +
(d.perp_direction === "short" ? "空" : "多") +
" · 面值 " +
fmt(d.contract_size, 4);
}
const mIdx = d.index_px != null ? Number(d.index_px) : NaN;
if (Number.isFinite(mIdx) && mIdx > 0) {
const idxLine = $("hp-index-line");
@@ -1399,7 +1407,6 @@
ooIdx.textContent = "指数 " + fmt(mIdx, 2);
}
}
// OKX 交易账户 USDT 共用,永续行情不单独显示「可用 USDT」
const quoteHtml =
"卖一 " +
fmt(d.ask, 2) +
@@ -1414,7 +1421,12 @@
? " · 永续方向 " + (d.perp_direction === "short" ? "空" : "多")
: "");
const q = $("hp-perp-quote");
if (q) q.innerHTML = quoteHtml;
if (q) {
q.innerHTML = quoteHtml;
// 弹窗内行情已压缩到 mark 行,避免重复挤占
if (q.closest && q.closest(".hp-po-order-dialog")) q.setAttribute("hidden", "");
else q.removeAttribute("hidden");
}
const contractsInput = $("hp-contracts");
if (contractsInput) {
const step = amtPrec <= 0 ? "1" : String(Math.pow(10, -amtPrec));
@@ -1732,7 +1744,7 @@
const ct = Number(state.selected.ct_mult || 0.01);
const ask = Number(state.selected.ask || 0);
const prem = ask * sheets * ct;
line.textContent = "预估权利金 ≈ " + fmt(prem, 4) + " 币(币本位) · 卖一 " + fmt(ask, 4);
line.textContent = "权利金 ≈ " + fmt(prem, 4) + " 币 · 卖一 " + fmt(ask, 4);
}
function buildStraddleRows(contracts) {
lib/common/static/instance_theme.css
+162 -19
View File
@@ -3486,33 +3486,176 @@ html[data-theme="light"] .opt-be-dist-down {
font-size: 0.82rem;
line-height: 1.35;
}
.hedge-plan-page-wrap .hp-po-order-dialog .hp-po-quote-compact {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: baseline;
font-size: 0.84rem;
}
.hedge-plan-page-wrap .hp-po-order-dialog .hp-po-quote-one {
margin: 2px 0 0;
font-size: 0.78rem;
}
.hedge-plan-page-wrap .hp-po-order-dialog .hp-po-order-calc {
margin-top: 4px;
}
.hedge-plan-page-wrap .hp-po-order-err {
margin: 6px 0 0;
.hedge-plan-page-wrap .hp-po-order-err,
.hp-po-order-dialog .hp-po-order-err {
margin: 8px 0 0;
font-size: 0.82rem;
}
.hedge-plan-page-wrap .hp-input-invalid {
.hedge-plan-page-wrap .hp-input-invalid,
.hp-po-order-dialog .hp-input-invalid {
border-color: #e85d5d !important;
box-shadow: 0 0 0 1px rgba(232, 93, 93, 0.45);
}
.hedge-plan-page-wrap .hp-po-field--wide {
.hedge-plan-page-wrap .hp-po-field--wide,
.hp-po-order-dialog .hp-po-field--wide {
grid-column: 1 / -1;
}
/* 弹窗挂 body 后脱离 .hedge-plan-page-wrap,样式必须写在 .hp-po-order-dialog 上 */
.opt-order-dialog.hp-po-order-dialog {
width: min(96vw, 560px);
width: min(94vw, 440px);
padding: 20px 22px 22px;
max-height: 90vh;
}
.hp-po-order-dialog .opt-order-main {
gap: 18px;
}
.hp-po-order-dialog .opt-order-dialog-head {
margin-bottom: 4px;
}
.hp-po-order-dialog .hp-po-dialog-x {
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: #9aa4b2;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.hp-po-order-dialog .hp-po-dialog-x:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.hp-po-order-dialog .hp-po-dialog-meta {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hp-po-order-dialog .options-order-inst {
font-size: 0.92rem;
font-weight: 650;
}
.hp-po-order-dialog .hp-po-dialog-sub {
margin: 0;
font-size: 0.78rem;
line-height: 1.45;
color: #8b93a7;
}
.hp-po-order-dialog .hp-po-dialog-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.hp-po-order-dialog .hp-po-section {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.hp-po-order-dialog .hp-po-section-title {
margin: 0;
font-size: 0.84rem;
font-weight: 650;
color: #c5cdd9;
}
.hp-po-order-dialog .hp-po-fields {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0;
padding: 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.hp-po-order-dialog .hp-po-fields--capital {
grid-template-columns: 1fr;
}
@media (min-width: 420px) {
.hp-po-order-dialog .hp-po-fields--capital {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hp-po-order-dialog #hp-po-exit-target.hp-po-fields {
grid-template-columns: 1fr 1fr;
}
}
.hp-po-order-dialog .hp-po-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
margin: 0;
font-size: 0.8rem;
}
.hp-po-order-dialog .hp-po-field-lab {
color: #9aa4b2;
font-size: 0.74rem;
}
.hp-po-order-dialog .hp-po-field-lab em {
font-style: normal;
color: #6b7388;
margin-left: 2px;
}
.hp-po-order-dialog .hp-po-field input {
width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 36px;
padding: 8px 10px;
font-size: 0.9rem;
}
.hp-po-order-dialog .hp-po-exit-seg {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.hp-po-order-dialog .hp-po-exit-mode {
flex: 1 1 120px;
min-height: 36px;
}
.hp-po-order-dialog .hp-po-exit-mode .hp-oo-check {
display: none;
margin-right: 4px;
font-weight: 700;
}
.hp-po-order-dialog .hp-po-exit-mode.is-selected,
.hp-po-order-dialog .hp-po-exit-mode.active {
border-color: var(--accent, #00d4ff);
color: var(--text, #fff);
background: rgba(0, 212, 255, 0.16);
box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.35);
font-weight: 700;
}
.hp-po-order-dialog .hp-po-exit-mode.is-selected .hp-oo-check,
.hp-po-order-dialog .hp-po-exit-mode.active .hp-oo-check {
display: inline;
color: var(--accent, #00d4ff);
}
.hp-po-order-dialog .hp-po-order-calc {
margin: 0;
}
.hp-po-order-dialog .opt-order-dialog-actions {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
align-items: center;
}
.hp-po-order-dialog .opt-order-dialog-actions .hp-po-strategy-status {
flex: 1 1 auto;
font-size: 0.78rem;
color: #8b93a7;
}
.hp-po-order-dialog .opt-order-dialog-actions .btn-primary,
.hp-po-order-dialog .opt-order-dialog-actions .btn-secondary {
flex: 0 0 auto;
min-width: 96px;
min-height: 40px;
}
.hedge-plan-page-wrap .hp-po-top {
display: flex;
lib/hedge_plan/templates/hedge_plan_panel.html
+14 -14
View File
@@ -101,22 +101,22 @@
</div>
<div id="hp-opt-bal-line" class="muted hp-po-meta hp-opt-bal-line"></div>
<!-- 弹窗下单 -->
<!-- 弹窗下单(挂到 body 时样式靠 .hp-po-order-dialog 自身,不依赖页 wrap) -->
<div id="hp-order-panel-host" class="opt-order-backdrop" hidden aria-hidden="true">
<div id="hp-order-panel" class="opt-order-dialog hp-po-order-dialog" role="dialog" aria-modal="true" aria-labelledby="hp-order-dialog-title" style="display:none">
<div class="opt-order-dialog-head">
<h3 class="opt-order-title" id="hp-order-dialog-title">手动下单 · <span id="hp-perp-uly-label">ETH</span></h3>
<button type="button" class="btn-secondary" id="hp-order-close-btn" style="font-size:.72rem;padding:2px 10px">取消</button>
<button type="button" class="hp-po-dialog-x" id="hp-order-close-btn" aria-label="关闭">×</button>
</div>
<div class="opt-order-layout">
<div class="opt-order-main">
<div class="hp-po-dialog-meta">
<div id="hp-sel-inst" class="options-order-inst">—</div>
<div class="hp-po-quote-compact">
<span id="hp-po-mark" class="hp-po-mark" aria-live="polite">标记 —</span>
<span class="muted" id="hp-premium-line"></span>
<p class="muted hp-po-dialog-sub" id="hp-premium-line"></p>
<p class="muted hp-po-dialog-sub" id="hp-po-mark" aria-live="polite">标记 —</p>
<p id="hp-perp-quote" class="muted hp-po-dialog-sub" hidden>加载中…</p>
<p id="hp-po-perp-quote-right" class="muted" hidden></p>
</div>
<p id="hp-perp-quote" class="muted hp-po-meta hp-po-quote-one">加载中…</p>
<p id="hp-po-perp-quote-right" class="muted hp-po-meta" hidden></p>
<span id="hp-po-mode-badge" class="hp-po-mode-badge" hidden>手动下单</span>
<span id="hp-po-card-title" hidden>下单</span>
<span class="muted hp-acct-tag" id="hp-perp-acct-tag" hidden>合约账户</span>
@@ -140,7 +140,7 @@
</label>
</div>
<div id="hp-po-fields-option-primary">
<div id="hp-po-fields-option-primary" class="hp-po-dialog-body">
<section class="hp-po-section">
<h3 class="hp-po-section-title">开仓</h3>
<div class="hp-po-fields hp-po-fields--section hp-po-fields--capital">
@@ -159,15 +159,15 @@
</div>
</section>
<section class="hp-po-section">
<h3 class="hp-po-section-title">出场条件 <span class="muted" style="font-weight:500;font-size:.78rem">必填其一</span></h3>
<h3 class="hp-po-section-title">出场条件</h3>
<div class="hp-oo-seg hp-po-exit-seg" role="group" aria-label="出场方式">
<button type="button" class="btn-secondary hp-po-exit-mode is-selected" data-exit="profit"><span class="hp-oo-check" aria-hidden="true">✓</span>盈利金额出场</button>
<button type="button" class="btn-secondary hp-po-exit-mode" data-exit="target"><span class="hp-oo-check" aria-hidden="true">✓</span>目标位出场</button>
<button type="button" class="btn-secondary hp-po-exit-mode is-selected" data-exit="profit"><span class="hp-oo-check" aria-hidden="true">✓</span>盈利金额</button>
<button type="button" class="btn-secondary hp-po-exit-mode" data-exit="target"><span class="hp-oo-check" aria-hidden="true">✓</span>目标位</button>
</div>
<div class="hp-po-fields hp-po-fields--section" id="hp-po-exit-profit">
<label class="hp-po-field hp-po-field--wide">
<span class="hp-po-field-lab">目标盈利 <em>USDT</em></span>
<input type="number" step="any" min="0.01" id="hp-profit-target" placeholder="必填 · 扣双边手续费后净利" autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other" required />
<input type="number" step="any" min="0.01" id="hp-profit-target" placeholder="扣双边手续费后净利" autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other" required />
</label>
</div>
<div class="hp-po-fields hp-po-fields--section hidden" id="hp-po-exit-target" hidden>
@@ -194,8 +194,8 @@
</div>
<div class="opt-order-dialog-actions">
<span id="hp-po-strategy-status" class="hp-po-strategy-status" aria-live="polite"></span>
<button type="button" class="btn-primary" id="hp-preview-btn" title="卖一限价开期权+永续对冲">手动下单</button>
<button type="button" class="btn-secondary" id="hp-order-cancel-btn">取消</button>
<button type="button" class="btn-primary" id="hp-preview-btn" title="卖一限价开期权+永续对冲">手动下单</button>
</div>
</div>
</div>
@@ -426,4 +426,4 @@
</div>
</div>
</div>
<script src="/static/hedge_plan.js?v=52"></script>
<script src="/static/hedge_plan.js?v=53"></script>