Lay out plan as strategy left and stacked position cards right.

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

frontend/src/pages/Plan.tsx

@@ -171,10 +171,12 @@ export default function PlanPage() {
         {busy ? <span className="meta">{busy}…</span> : null}
       </div>
 
-      <div className="card plan-summary" style={{ marginBottom: 12 }}>
+      <div className="plan-board">
+        <div className="card plan-strategy">
+          <h3 className="plan-panel-title">策略</h3>
           <div className="plan-metrics">
             <div className="kv">
-          <span>策略</span>
+              <span>状态</span>
               <span>
                 {plan?.running ? (
                   <span className="status-running">启动中</span>
@@ -190,7 +192,8 @@ export default function PlanPage() {
             <div className="kv">
               <span>选约条件</span>
               <span className="mono">
-            剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥{fmt(plan?.min_option_leverage, 0)}x
+                剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥
+                {fmt(plan?.min_option_leverage, 0)}x
               </span>
             </div>
             <div className="kv">
@@ -237,7 +240,7 @@ export default function PlanPage() {
               <span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
             </div>
             {plan?.last_error ? (
-          <div className="kv kv-span">
+              <div className="kv">
                 <span>最近错误</span>
                 <span className="err" style={{ margin: 0 }}>
                   {plan.last_error}
@@ -245,8 +248,9 @@ export default function PlanPage() {
               </div>
             ) : null}
           </div>
+        </div>
 
-        <div className="pos-embed-grid">
+        <div className="plan-positions">
           {open ? (
             <>
               <div className="pos-card">

frontend/src/styles/app.css

@@ -232,38 +232,68 @@ input {
   min-width: 0;
 }
 
-/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */
+/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
-.plan-metrics {
+.plan-board {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
-  column-gap: 28px;
+  gap: 12px;
-  row-gap: 0;
+  align-items: stretch;
-  justify-content: start;
+  margin-bottom: 12px;
+}
+
+.plan-panel-title {
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.plan-strategy {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.plan-metrics {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
 
 .plan-metrics .kv {
   min-width: 0;
 }
 
-.plan-metrics .kv-span {
+.plan-positions {
-  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  height: 100%;
 }
 
-@media (min-width: 720px) {
+.plan-positions .pos-card,
-  .plan-metrics {
+.plan-positions .pos-empty {
-    grid-template-columns: repeat(2, minmax(240px, 360px));
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.plan-positions .pos-grid {
+  margin-top: auto;
+}
+
+@media (max-width: 960px) {
+  .plan-board {
+    grid-template-columns: 1fr;
   }
-}
 
-@media (min-width: 1200px) {
+  .plan-positions .pos-card,
-  .plan-metrics {
+  .plan-positions .pos-empty {
-    grid-template-columns: repeat(3, minmax(240px, 340px));
+    flex: 0 0 auto;
-  }
-}
-
-@media (min-width: 1600px) {
-  .plan-metrics {
-    grid-template-columns: repeat(4, minmax(220px, 300px));
   }
 }