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

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/hedge_plan.js

@@ -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

@@ -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 {
+.hedge-plan-page-wrap .hp-po-order-err,
-  display: flex;
+.hp-po-order-dialog .hp-po-order-err {
-  flex-wrap: wrap;
+  margin: 8px 0 0;
-  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;
   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

@@ -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">
+                  <p class="muted hp-po-dialog-sub" id="hp-premium-line"></p>
-                  <span id="hp-po-mark" class="hp-po-mark" aria-live="polite">标记 —</span>
+                  <p class="muted hp-po-dialog-sub" id="hp-po-mark" aria-live="polite">标记 —</p>
-                  <span class="muted" id="hp-premium-line"></span>
+                  <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 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" 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>