Align plan columns and put option countdown on title row.

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

frontend/src/pages/Plan.tsx

@@ -172,85 +172,103 @@ export default function PlanPage() {
       </div>
 
       <div className="plan-board">
-        <div className="card plan-strategy">
+        <div className="plan-col">
-          <h3 className="plan-panel-title">策略</h3>
+          <div className="card plan-strategy">
-          <div className="plan-metrics">
+            <h3 className="plan-panel-title">策略</h3>
-            <div className="kv">
+            <div className="plan-metrics">
-              <span>状态</span>
-              <span>
-                {plan?.running ? (
-                  <span className="status-running">启动中</span>
-                ) : (
-                  <span className="status-stopped">已停</span>
-                )}
-                <span className="mono">
-                  {" "}
-                  · {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组
-                </span>
-              </span>
-            </div>
-            <div className="kv">
-              <span>选约条件</span>
-              <span className="mono">
-                剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥
-                {fmt(plan?.min_option_leverage, 0)}x
-              </span>
-            </div>
-            <div className="kv">
-              <span>休息</span>
-              <span className="mono">
-                {plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"}
-              </span>
-            </div>
-            <div className="kv">
-              <span>权益 / 杠杆</span>
-              <span className="mono">
-                {fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "}
-                {fmt(plan?.leverage, 0)}x
-              </span>
-            </div>
-            <div className="kv">
-              <span>当前组</span>
-              <span className="mono">{pos?.group_id || "—"}</span>
-            </div>
-            <div className="kv">
-              <span>信号方向</span>
-              <span className="mono">{biasTag}</span>
-            </div>
-            <div className="kv">
-              <span>出场规则</span>
-              <span className="mono">{exitRuleLabel}</span>
-            </div>
-            <div className="kv">
-              <span>净盈利 / 目标</span>
-              <span className="mono">
-                <span className={pnlClass(open ? netPnl : null)}>
-                  {open ? fmt(netPnl) : "—"}
-                </span>
-                {" / "}
-                {open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"}
-              </span>
-            </div>
-            <div className="kv">
-              <span>永续浮盈</span>
-              <span className={`mono ${pnlClass(pos?.perp_upl)}`}>{fmt(pos?.perp_upl)}</span>
-            </div>
-            <div className="kv">
-              <span>期权浮盈</span>
-              <span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
-            </div>
-            {plan?.last_error ? (
               <div className="kv">
-                <span>最近错误</span>
+                <span>状态</span>
-                <span className="err" style={{ margin: 0 }}>
+                <span>
-                  {plan.last_error}
+                  {plan?.running ? (
+                    <span className="status-running">启动中</span>
+                  ) : (
+                    <span className="status-stopped">已停</span>
+                  )}
+                  <span className="mono">
+                    {" "}
+                    · {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组
+                  </span>
                 </span>
               </div>
-            ) : null}
+              <div className="kv">
+                <span>选约条件</span>
+                <span className="mono">
+                  剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥
+                  {fmt(plan?.min_option_leverage, 0)}x
+                </span>
+              </div>
+              <div className="kv">
+                <span>休息</span>
+                <span className="mono">
+                  {plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"}
+                </span>
+              </div>
+              <div className="kv">
+                <span>权益 / 杠杆</span>
+                <span className="mono">
+                  {fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "}
+                  {fmt(plan?.leverage, 0)}x
+                </span>
+              </div>
+              <div className="kv">
+                <span>当前组</span>
+                <span className="mono">{pos?.group_id || "—"}</span>
+              </div>
+              <div className="kv">
+                <span>信号方向</span>
+                <span className="mono">{biasTag}</span>
+              </div>
+              <div className="kv">
+                <span>出场规则</span>
+                <span className="mono">{exitRuleLabel}</span>
+              </div>
+              <div className="kv">
+                <span>净盈利 / 目标</span>
+                <span className="mono">
+                  <span className={pnlClass(open ? netPnl : null)}>
+                    {open ? fmt(netPnl) : "—"}
+                  </span>
+                  {" / "}
+                  {open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"}
+                </span>
+              </div>
+              <div className="kv">
+                <span>永续浮盈</span>
+                <span className={`mono ${pnlClass(pos?.perp_upl)}`}>{fmt(pos?.perp_upl)}</span>
+              </div>
+              <div className="kv">
+                <span>期权浮盈</span>
+                <span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
+              </div>
+              {plan?.last_error ? (
+                <div className="kv">
+                  <span>最近错误</span>
+                  <span className="err" style={{ margin: 0 }}>
+                    {plan.last_error}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="card">
+            <h3 className="plan-panel-title">永续行情</h3>
+            <div className="kv">
+              <span>买一</span>
+              <span className="mono">{fmt(snap?.perp?.bid)}</span>
+            </div>
+            <div className="kv">
+              <span>卖一</span>
+              <span className="mono">{fmt(snap?.perp?.ask)}</span>
+            </div>
+            <div className="kv">
+              <span>指数</span>
+              <span className="mono">{fmt(snap?.index_px)}</span>
+            </div>
           </div>
         </div>
 
-        <div className="plan-positions">
+        <div className="plan-col plan-positions">
           {open ? (
             <>
               <div className="pos-card">
@@ -320,6 +338,12 @@ export default function PlanPage() {
                       {pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
                     </span>
                   </div>
+                  <div
+                    className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
+                    title="到期倒计时"
+                  >
+                    {countdown}
+                  </div>
                 </div>
                 <div className="pos-meta">
                   <span className="pos-meta-item">期权持仓</span>
@@ -330,14 +354,6 @@ export default function PlanPage() {
                   </span>
                 </div>
                 <div className="pos-grid">
-                  <div className="pos-cell pos-cell-wide">
-                    <span className="pos-label">到期倒计时</span>
-                    <span
-                      className={`pos-value mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
-                    >
-                      {countdown}
-                    </span>
-                  </div>
                   <div className="pos-cell">
                     <span className="pos-label">开仓均价</span>
                     <span className="pos-value mono">{fmt(pos?.option_entry_px)}</span>
@@ -365,44 +381,27 @@ export default function PlanPage() {
               <div className="pos-empty">期权持仓 · 暂无</div>
             </>
           )}
-        </div>
-      </div>
 
-      <div className="grid-2">
+          <div className="card">
-        <div className="card">
+            <h3 className="plan-panel-title">
-          <h3 style={{ marginTop: 0 }}>永续</h3>
+              期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""}
-          <div className="kv">
+            </h3>
-            <span>买一</span>
+            <div className="kv">
-            <span className="mono">{fmt(snap?.perp?.bid)}</span>
+              <span>Call 卖一/买一</span>
-          </div>
+              <span className="mono">
-          <div className="kv">
+                {fmt(snap?.call?.ask)} / {fmt(snap?.call?.bid)}
-            <span>卖一</span>
+              </span>
-            <span className="mono">{fmt(snap?.perp?.ask)}</span>
+            </div>
-          </div>
+            <div className="kv">
-          <div className="kv">
+              <span>Put 卖一/买一</span>
-            <span>指数</span>
+              <span className="mono">
-            <span className="mono">{fmt(snap?.index_px)}</span>
+                {fmt(snap?.put?.ask)} / {fmt(snap?.put?.bid)}
-          </div>
+              </span>
-        </div>
+            </div>
-        <div className="card">
+            <div className="kv">
-          <h3 style={{ marginTop: 0 }}>
+              <span>到期</span>
-            期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""}
+              <span className="mono">{snap?.pair?.expiry_ymd || "—"}</span>
-          </h3>
+            </div>
-          <div className="kv">
-            <span>Call 卖一/买一</span>
-            <span className="mono">
-              {fmt(snap?.call?.ask)} / {fmt(snap?.call?.bid)}
-            </span>
-          </div>
-          <div className="kv">
-            <span>Put 卖一/买一</span>
-            <span className="mono">
-              {fmt(snap?.put?.ask)} / {fmt(snap?.put?.bid)}
-            </span>
-          </div>
-          <div className="kv">
-            <span>到期</span>
-            <span className="mono">{snap?.pair?.expiry_ymd || "—"}</span>
           </div>
         </div>
       </div>

frontend/src/styles/app.css

@@ -232,15 +232,22 @@ input {
   min-width: 0;
 }
 
-/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
+/* 计划页：左右两列对齐（策略+行情 | 持仓+ATM） */
 .plan-board {
   display: grid;
-  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
+  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
   gap: 12px;
-  align-items: stretch;
+  align-items: start;
   margin-bottom: 12px;
 }
 
+.plan-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
 .plan-panel-title {
   margin: 0 0 10px;
   font-size: 14px;
@@ -251,14 +258,12 @@ input {
 .plan-strategy {
   display: flex;
   flex-direction: column;
-  height: 100%;
   min-height: 0;
 }
 
 .plan-metrics {
   display: flex;
   flex-direction: column;
-  flex: 1;
   min-height: 0;
 }
 
@@ -266,24 +271,20 @@ input {
   min-width: 0;
 }
 
-.plan-positions {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 0;
-  height: 100%;
-}
-
 .plan-positions .pos-card,
 .plan-positions .pos-empty {
-  flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.plan-positions .pos-grid {
+.pos-countdown {
-  margin-top: auto;
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #e8ecf4;
+  white-space: nowrap;
+  margin-left: auto;
 }
 
 @media (max-width: 960px) {
@@ -291,9 +292,9 @@ input {
     grid-template-columns: 1fr;
   }
 
-  .plan-positions .pos-card,
+  .pos-countdown {
-  .plan-positions .pos-empty {
+    margin-left: 0;
-    flex: 0 0 auto;
+    width: 100%;
   }
 }