Wide order dialog (calc|form); enrich live cards with lev/bid/margin/time.

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

lib/common/static/hedge_plan.js

@@ -631,14 +631,26 @@
     const profitBox = $("hp-po-exit-profit");
     const targetBox = $("hp-po-exit-target");
     if (profitBox) {
-      profitBox.classList.toggle("hidden", mode !== "profit");
-      if (mode === "profit") profitBox.removeAttribute("hidden");
-      else profitBox.setAttribute("hidden", "hidden");
+      const show = mode === "profit";
+      profitBox.classList.toggle("hidden", !show);
+      if (show) {
+        profitBox.removeAttribute("hidden");
+        profitBox.style.display = "";
+      } else {
+        profitBox.setAttribute("hidden", "hidden");
+        profitBox.style.display = "none";
+      }
     }
     if (targetBox) {
-      targetBox.classList.toggle("hidden", mode !== "target");
-      if (mode === "target") targetBox.removeAttribute("hidden");
-      else targetBox.setAttribute("hidden", "hidden");
+      const show = mode === "target";
+      targetBox.classList.toggle("hidden", !show);
+      if (show) {
+        targetBox.removeAttribute("hidden");
+        targetBox.style.display = "";
+      } else {
+        targetBox.setAttribute("hidden", "hidden");
+        targetBox.style.display = "none";
+      }
     }
   }
 
@@ -904,6 +916,19 @@
     return n > 0 ? "+" + s : s;
   }
 
+  function fmtDuration(sec) {
+    if (sec == null || Number.isNaN(Number(sec))) return "—";
+    let s = Math.max(0, Math.floor(Number(sec)));
+    const d = Math.floor(s / 86400);
+    s -= d * 86400;
+    const h = Math.floor(s / 3600);
+    s -= h * 3600;
+    const m = Math.floor(s / 60);
+    if (d > 0) return d + "天 " + h + "时" + m + "分";
+    if (h > 0) return h + "时" + m + "分";
+    return m + "分";
+  }
+
   function renderLivePosCard(card) {
     const opt = card.option || {};
     const perp = card.perp || {};
@@ -911,6 +936,11 @@
     const optType = String(opt.opt_type || "").toUpperCase() === "P" ? "Put" : "Call";
     const perpSide = String(perp.side || "").toLowerCase() === "short" ? "空" : "多";
     const comboCls = pnlClsNum(combo.net_usdt);
+    const liqWarn = opt.liq_ok === false;
+    const bidTxt =
+      opt.bid != null
+        ? fmt(opt.bid, 4) + (opt.bid_sz != null ? "/" + fmt(opt.bid_sz, 0) : "")
+        : "—";
     return (
       '<article class="hp-live-card" data-plan-id="' +
       (card.plan_id || "") +
@@ -920,9 +950,18 @@
       (card.plan_id || "—") +
       " · " +
       (card.underlying || "") +
-      '</strong><span class="muted">' +
-      (card.opened_at || "") +
-      "</span></div>" +
+      "</strong></div>" +
+      '<div class="hp-live-time-row">' +
+      "<span>开仓 <strong>" +
+      (card.opened_at || "—") +
+      "</strong></span>" +
+      "<span>持仓时长 <strong>" +
+      fmtDuration(card.hold_sec) +
+      "</strong></span>" +
+      "<span>到期剩余 <strong>" +
+      fmtDuration(card.remain_sec) +
+      "</strong></span>" +
+      "</div>" +
       '<div class="hp-live-legs">' +
       '<div class="hp-live-leg">' +
       '<div class="hp-live-leg-title">期权 · ' +
@@ -935,12 +974,23 @@
       "<span>张数 <strong>" +
       fmt(opt.sheets, 0) +
       "</strong></span>" +
+      "<span>杠杆 <strong>" +
+      (opt.leverage != null ? fmt(opt.leverage, 1) + "×" : "—") +
+      "</strong></span>" +
       "<span>开仓 <strong>" +
       fmt(opt.avg_open, 4) +
       "</strong></span>" +
       "<span>标记 <strong>" +
       fmt(opt.mark_px, 4) +
       "</strong></span>" +
+      '<span class="' +
+      (liqWarn ? "hp-liq-warn" : "") +
+      '" title="' +
+      String(opt.liq_msg || "").replace(/"/g, "&quot;") +
+      '">买一/流动性 <strong>' +
+      bidTxt +
+      (liqWarn ? " · 不足" : "") +
+      "</strong></span>" +
       '<span>净利 <strong class="' +
       pnlClsNum(opt.net_usdt) +
       '">' +
@@ -958,12 +1008,18 @@
       "<span>张数 <strong>" +
       fmt(perp.contracts, 4) +
       "</strong></span>" +
+      "<span>杠杆 <strong>" +
+      (perp.leverage != null ? fmt(perp.leverage, 0) + "×" : "—") +
+      "</strong></span>" +
       "<span>开仓 <strong>" +
       fmt(perp.avg_open, 2) +
       "</strong></span>" +
       "<span>标记 <strong>" +
       fmt(perp.mark_px, 2) +
       "</strong></span>" +
+      "<span>保证金 <strong>" +
+      (perp.margin != null ? fmt(perp.margin, 2) + " U" : "—") +
+      "</strong></span>" +
       '<span>净利 <strong class="' +
       pnlClsNum(perp.net_usdt) +
       '">' +
@@ -985,7 +1041,7 @@
       '">成交细节</button> ' +
       '<button type="button" class="btn-secondary hp-btn-end" data-id="' +
       (card.plan_id || "") +
-      '">结束计划</button>' +
+      '">平仓</button>' +
       "</div></article>"
     );
   }
@@ -2864,9 +2920,9 @@
   async function endActivePlan(planId) {
     if (
       !window.confirm(
-        "确认结束计划 #" +
+        "确认平仓并结束计划 #" +
           planId +
-          "？\n不会自动平仓；未成交/待补腿将标为未成交取消。\n已有持仓请自行平掉。"
+          "？\n未成交/待补腿将取消。\n说明:当前为结束计划标记,交易所持仓请自行确认已平。"
       )
     ) {
       return;

lib/common/static/instance_theme.css

@@ -3507,6 +3507,44 @@ html[data-theme="light"] .opt-be-dist-down {
   padding: 20px 22px 22px;
   max-height: 90vh;
 }
+.opt-order-dialog.hp-po-order-dialog--wide {
+  width: min(96vw, 920px);
+}
+.hp-po-order-dialog .hp-po-order-split {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 18px;
+}
+@media (min-width: 760px) {
+  .hp-po-order-dialog .hp-po-order-split {
+    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
+    gap: 22px;
+    align-items: start;
+  }
+}
+.hp-po-order-dialog .hp-po-order-calc-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  min-height: 0;
+}
+.hp-po-order-dialog .hp-po-calc-box {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+.hp-po-order-dialog .hp-po-calc-box p {
+  margin: 0;
+}
+.hp-po-order-dialog .hp-po-order-form-pane {
+  gap: 16px;
+}
 .hp-po-order-dialog .opt-order-main {
   gap: 18px;
 }
@@ -4134,9 +4172,28 @@ html[data-theme="light"] .opt-be-dist-down {
   justify-content: space-between;
   gap: 8px;
   align-items: baseline;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   font-size: 0.88rem;
 }
+.hedge-plan-page-wrap .hp-live-time-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  margin: 0 0 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.16);
+  font-size: 0.76rem;
+  color: #9aa4b2;
+}
+.hedge-plan-page-wrap .hp-live-time-row strong {
+  color: #e8ecf4;
+  font-weight: 600;
+}
+.hedge-plan-page-wrap .hp-liq-warn,
+.hedge-plan-page-wrap .hp-liq-warn strong {
+  color: #f5c542 !important;
+}
 .hedge-plan-page-wrap .hp-live-legs {
   display: grid;
   grid-template-columns: 1fr;