Show each residual option on its own line.

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

docs/更新说明.md

@@ -5,6 +5,14 @@
 
 ---
 
+## 2026-07-27 — 残留期权一行一条
+
+### 变更
+
+1. 监控页「残留期权(待到期)」由用 `·` 拼成一行，改为**每条期权单独一行**（手机端卡片式）。
+
+---
+
 ## 2026-07-27 — 交易记录详情改为弹窗
 
 ### 变更

frontend/src/pages/Plan.tsx

@@ -306,18 +306,22 @@ export default function PlanPage() {
                 <span>当前组</span>
                 <span className="mono">{pos?.group_id || "—"}</span>
               </div>
-              <div className="kv">
+              <div className="kv kv-residuals">
                 <span>残留期权(待到期)</span>
-                <span className="mono">
+                {plan?.residuals && plan.residuals.length > 0 ? (
-                  {plan?.residuals && plan.residuals.length > 0
+                  <div className="residual-list mono">
-                    ? plan.residuals
+                    {plan.residuals.map((r) => (
-                        .map(
+                      <div
-                          (r) =>
+                        key={`${r.group_id}:${r.option_inst_id || ""}`}
-                            `${r.group_id}:${r.option_inst_id || "?"}@${r.expiry_ymd || "?"}`
+                        className="residual-item"
-                        )
+                      >
-                        .join(" · ")
+                        {r.group_id}:{r.option_inst_id || "?"}@{r.expiry_ymd || "?"}
-                    : "无"}
+                      </div>
-                </span>
+                    ))}
+                  </div>
+                ) : (
+                  <span className="mono">无</span>
+                )}
               </div>
               <div className="kv">
                 <span>信号方向</span>

frontend/src/styles/app.css

@@ -512,6 +512,51 @@ input {
   min-width: 0;
 }
 
+.kv-residuals {
+  align-items: flex-start;
+}
+
+.kv-residuals > span:first-child {
+  padding-top: 2px;
+}
+
+.residual-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 0;
+  max-width: min(100%, 28em);
+}
+
+.residual-item {
+  text-align: right;
+  line-height: 1.35;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 900px) {
+  .kv-residuals {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .residual-list {
+    align-items: stretch;
+    max-width: none;
+  }
+
+  .residual-item {
+    text-align: left;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--line);
+  }
+}
+
 .trade-list {
   padding-top: 4px;
   padding-bottom: 4px;