From 43e2df2b628a2b003a864853c37421ef06fb4a16 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sat, 8 Aug 2026 15:11:10 +0800
Subject: [PATCH] Polish semi dual cards: equal height, quote header, holding
 state.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Right card stacks title then green expiry; left shows 持仓中 after open.

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

diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx
index e6a991c..729046b 100644
--- a/frontend/src/pages/Plan.tsx
+++ b/frontend/src/pages/Plan.tsx
@@ -902,7 +902,13 @@ export default function PlanPage() {
             <div className="plan-semi-head">
               <h3 className="plan-panel-title">半自动 · 本单</h3>
               <span className="mono meta">
-                {plan.semi_armed ? "已授权" : "未授权"}
+                {open ? (
+                  <span className="status-running">持仓中</span>
+                ) : plan.semi_armed ? (
+                  "已授权"
+                ) : (
+                  "未授权"
+                )}
                 {" · "}
                 {semiMny === "itm" ? "实值" : semiMny === "atm" ? "平值" : "虚值"}
                 {" · "}
@@ -1287,42 +1293,53 @@ export default function PlanPage() {
               })()}
             </div>
             <div className="plan-semi-btns">
-              <button
-                className="btn ghost"
-                type="button"
-                disabled={open || !!busy || !semiDirty}
-                onClick={() => void saveSemiParams()}
-              >
-                保存
-              </button>
-              <button
-                className="btn"
-                type="button"
-                disabled={open || !!busy || !!plan.semi_armed}
-                onClick={() => void armSemi(true)}
-              >
-                授权开下一单
-              </button>
-              <button
-                className="btn ghost"
-                type="button"
-                disabled={open || !!busy || !plan.semi_armed}
-                onClick={() => void armSemi(false)}
-              >
-                取消授权
-              </button>
+              {open ? (
+                <span className="plan-semi-holding status-running">持仓中</span>
+              ) : (
+                <>
+                  <button
+                    className="btn ghost"
+                    type="button"
+                    disabled={!!busy || !semiDirty}
+                    onClick={() => void saveSemiParams()}
+                  >
+                    保存
+                  </button>
+                  <button
+                    className="btn"
+                    type="button"
+                    disabled={!!busy || !!plan.semi_armed}
+                    onClick={() => void armSemi(true)}
+                  >
+                    授权开下一单
+                  </button>
+                  <button
+                    className="btn ghost"
+                    type="button"
+                    disabled={!!busy || !plan.semi_armed}
+                    onClick={() => void armSemi(false)}
+                  >
+                    取消授权
+                  </button>
+                </>
+              )}
             </div>
           </section>
 
           <section className="card plan-t-quote" aria-label="期权报价列表">
-            <div className="plan-semi-head">
-              <h3 className="plan-panel-title">
-                {semiView === "short" ? "Put" : "Call"} 报价 · 实值 / 平值 / 虚值
+            <div className="plan-t-head-stack">
+              <h3 className="plan-panel-title plan-t-title-line">
+                {semiView === "short" ? "Put" : "Call"}报价
+                {semiMny === "itm"
+                  ? "实值"
+                  : semiMny === "atm"
+                    ? "平值"
+                    : "虚值"}
               </h3>
-              <span className="mono meta">
+              <div className="mono plan-t-expiry-line">
                 {ladder?.expiry_ymd
                   ? `到期 ${ladder.expiry_ymd}`
-                  : "—"}
+                  : "到期 —"}
                 {ladder?.hours_left != null
                   ? ` · 剩余≈${fmt(ladder.hours_left, 1)}h`
                   : ""}
@@ -1333,7 +1350,7 @@ export default function PlanPage() {
                 {ladder?.index_px != null
                   ? ` · 指数 ${fmtExPx("index", ladder.index_px)}`
                   : ""}
-              </span>
+              </div>
             </div>
             {!ladder?.ok ? (
               <p className="meta">{ladder?.detail || "暂无报价链"}</p>
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 8535d88..ee5784a 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -478,24 +478,52 @@ input {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 10px;
   margin-bottom: 12px;
-  align-items: start;
+  align-items: stretch;
 }
 
 .plan-semi-tab > .card {
   margin-bottom: 0;
   min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.plan-semi-tab > .plan-semi-card .plan-semi-btns {
+  margin-top: auto;
+}
+
+.plan-semi-tab > .plan-t-quote .plan-t-wrap {
+  flex: 1;
+  min-height: 0;
 }
 
 @media (max-width: 960px) {
   .plan-semi-tab {
     grid-template-columns: 1fr;
   }
+
+  .plan-semi-tab > .card {
+    height: auto;
+  }
 }
 
 .plan-semi-compact {
   padding: 10px 12px;
 }
 
+.plan-semi-holding {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 700;
+  border-radius: 6px;
+  border: 1px solid rgba(14, 203, 129, 0.45);
+  background: rgba(14, 203, 129, 0.12);
+}
+
 .plan-semi-head {
   display: flex;
   align-items: baseline;
@@ -572,6 +600,25 @@ input {
   padding: 10px 12px;
 }
 
+.plan-t-head-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.plan-t-title-line {
+  margin: 0;
+  font-size: 14px;
+}
+
+.plan-t-expiry-line {
+  font-size: 12px;
+  font-weight: 600;
+  color: #0ecb81;
+  line-height: 1.4;
+}
+
 .plan-t-wrap {
   overflow-x: auto;
   margin-top: 4px;