From 8a148f8c2ba18989ecea0d57ba5a0b125186f34d Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sat, 25 Jul 2026 09:35:36 +0800
Subject: [PATCH] Pack plan summary into multi-column layout for ultrawide
 screens.

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

diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx
index cdd6868..0c88d33 100644
--- a/frontend/src/pages/Plan.tsx
+++ b/frontend/src/pages/Plan.tsx
@@ -172,6 +172,7 @@ export default function PlanPage() {
       </div>
 
       <div className="card plan-summary" style={{ marginBottom: 12 }}>
+        <div className="plan-metrics">
         <div className="kv">
           <span>策略</span>
           <span>
@@ -236,13 +237,14 @@ export default function PlanPage() {
           <span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
         </div>
         {plan?.last_error ? (
-          <div className="kv">
+          <div className="kv kv-span">
             <span>最近错误</span>
             <span className="err" style={{ margin: 0 }}>
               {plan.last_error}
             </span>
           </div>
         ) : null}
+        </div>
 
         <div className="pos-embed-grid">
           {open ? (
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 0348b37..84f2c19 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -210,6 +210,7 @@ input {
 .kv {
   display: flex;
   justify-content: space-between;
+  align-items: baseline;
   gap: 12px;
   padding: 8px 0;
   border-bottom: 1px solid var(--line);
@@ -220,8 +221,50 @@ input {
   border-bottom: 0;
 }
 
-.kv span:first-child {
+.kv > span:first-child {
   color: var(--muted);
+  flex: 0 0 auto;
+  min-width: 5.5em;
+}
+
+.kv > span:last-child {
+  text-align: right;
+  min-width: 0;
+}
+
+/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */
+.plan-metrics {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 28px;
+  row-gap: 0;
+  justify-content: start;
+}
+
+.plan-metrics .kv {
+  min-width: 0;
+}
+
+.plan-metrics .kv-span {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 720px) {
+  .plan-metrics {
+    grid-template-columns: repeat(2, minmax(240px, 360px));
+  }
+}
+
+@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));
+  }
 }
 
 .login-wrap {