From 12a6365fc98cbff65ead8a19c69efd5d365b056f Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sat, 25 Jul 2026 09:39:04 +0800
Subject: [PATCH] Lay out plan as strategy left and stacked position cards
 right.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/pages/Plan.tsx | 150 ++++++++++++++++++------------------
 frontend/src/styles/app.css |  72 ++++++++++++-----
 2 files changed, 128 insertions(+), 94 deletions(-)

diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx
index 0c88d33..065bb41 100644
--- a/frontend/src/pages/Plan.tsx
+++ b/frontend/src/pages/Plan.tsx
@@ -171,82 +171,86 @@ export default function PlanPage() {
         {busy ? <span className="meta">{busy}…</span> : null}
       </div>
 
-      <div className="card plan-summary" style={{ marginBottom: 12 }}>
-        <div className="plan-metrics">
-        <div className="kv">
-          <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 kv-span">
-            <span>最近错误</span>
-            <span className="err" style={{ margin: 0 }}>
-              {plan.last_error}
-            </span>
+      <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>
+                {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 className="err" style={{ margin: 0 }}>
+                  {plan.last_error}
+                </span>
+              </div>
+            ) : null}
           </div>
-        ) : null}
         </div>
 
-        <div className="pos-embed-grid">
+        <div className="plan-positions">
           {open ? (
             <>
               <div className="pos-card">
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 84f2c19..a6b5b5a 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -232,38 +232,68 @@ input {
   min-width: 0;
 }
 
-/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */
-.plan-metrics {
+/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
+.plan-board {
   display: grid;
-  grid-template-columns: 1fr;
-  column-gap: 28px;
-  row-gap: 0;
-  justify-content: start;
+  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
+  gap: 12px;
+  align-items: stretch;
+  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 {
-  grid-column: 1 / -1;
+.plan-positions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  height: 100%;
 }
 
-@media (min-width: 720px) {
-  .plan-metrics {
-    grid-template-columns: repeat(2, minmax(240px, 360px));
+.plan-positions .pos-card,
+.plan-positions .pos-empty {
+  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-metrics {
-    grid-template-columns: repeat(3, minmax(240px, 340px));
-  }
-}
-
-@media (min-width: 1600px) {
-  .plan-metrics {
-    grid-template-columns: repeat(4, minmax(220px, 300px));
+  .plan-positions .pos-card,
+  .plan-positions .pos-empty {
+    flex: 0 0 auto;
   }
 }