From 68d02b9c1718d05f14b7f090ecf9734795173400 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 6 Aug 2026 03:37:52 +0800
Subject: [PATCH] Move strategy residual table below market panels.

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

diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx
index f4e188f..ee9f408 100644
--- a/frontend/src/pages/Plan.tsx
+++ b/frontend/src/pages/Plan.tsx
@@ -569,79 +569,6 @@ export default function PlanPage() {
                 </div>
               ) : null}
             </div>
-            {plan?.residuals && plan.residuals.length > 0 ? (
-              <div className="plan-residual-block">
-                <div className="plan-residual-head">
-                  <h4>残留期权</h4>
-                  <span className="meta">
-                    自动平仓仍要求权利金≥设定比例；「平仓」仅验流动性
-                  </span>
-                </div>
-                <div className="plan-residual-wrap">
-                  <table className="plan-residual-table">
-                    <thead>
-                      <tr>
-                        <th>组名</th>
-                        <th>期权名</th>
-                        <th>数量</th>
-                        <th>开仓权利金</th>
-                        <th title="最新买一价格 / 买一数量(ETH)">买一流动性</th>
-                        <th title="买一价 × 持仓数量">买一权利金</th>
-                        <th title="买一权利金 ÷ 开仓权利金">占比</th>
-                        <th>操作</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {plan.residuals.map((r) => {
-                        const gid = String(r.group_id || "");
-                        const inst = String(r.option_inst_id || "—");
-                        const liqOk = r.liquidity_ok === true;
-                        return (
-                          <tr key={`${gid}:${inst}`}>
-                            <td className="mono">{gid || "—"}</td>
-                            <td className="mono">{inst}</td>
-                            <td className="mono">{fmt(r.option_qty_eth, 4)}</td>
-                            <td className="mono">{fmt(r.initial_premium, 2)}</td>
-                            <td
-                              className="mono"
-                              title={
-                                liqOk
-                                  ? "买一深度可覆盖持仓"
-                                  : "买一不足或盘口不可用"
-                              }
-                            >
-                              {fmtBidLiquidity(r.bid_px, r.bid_sz_eth)}
-                            </td>
-                            <td className="mono">{fmt(r.current_premium, 2)}</td>
-                            <td className="mono">
-                              {r.recovery_pct == null
-                                ? "—"
-                                : `${fmt(r.recovery_pct, 1)}%`}
-                            </td>
-                            <td>
-                              <button
-                                type="button"
-                                className="btn ghost"
-                                style={{ padding: "4px 10px", fontSize: 12 }}
-                                disabled={!!residualBusy || !!busy || !liqOk}
-                                title={
-                                  liqOk
-                                    ? "按最新买一 IOC 平仓（不验权利金比例）"
-                                    : "买一流动性不足或盘口不可用"
-                                }
-                                onClick={() => void closeResidual(gid, inst)}
-                              >
-                                {residualBusy === gid ? "平仓中…" : "平仓"}
-                              </button>
-                            </td>
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            ) : null}
           </div>
 
           <div className="plan-positions">
@@ -924,6 +851,80 @@ export default function PlanPage() {
             </div>
           </div>
         </div>
+
+        {plan?.residuals && plan.residuals.length > 0 ? (
+          <div className="card plan-residual-block">
+            <div className="plan-residual-head">
+              <h4>残留期权</h4>
+              <span className="meta">
+                自动平仓仍要求权利金≥设定比例；「平仓」仅验流动性
+              </span>
+            </div>
+            <div className="plan-residual-wrap">
+              <table className="plan-residual-table">
+                <thead>
+                  <tr>
+                    <th>组名</th>
+                    <th>期权名</th>
+                    <th>数量</th>
+                    <th>开仓权利金</th>
+                    <th title="最新买一价格 / 买一数量(ETH)">买一流动性</th>
+                    <th title="买一价 × 持仓数量">买一权利金</th>
+                    <th title="买一权利金 ÷ 开仓权利金">占比</th>
+                    <th>操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {plan.residuals.map((r) => {
+                    const gid = String(r.group_id || "");
+                    const inst = String(r.option_inst_id || "—");
+                    const liqOk = r.liquidity_ok === true;
+                    return (
+                      <tr key={`${gid}:${inst}`}>
+                        <td className="mono">{gid || "—"}</td>
+                        <td className="mono">{inst}</td>
+                        <td className="mono">{fmt(r.option_qty_eth, 4)}</td>
+                        <td className="mono">{fmt(r.initial_premium, 2)}</td>
+                        <td
+                          className="mono"
+                          title={
+                            liqOk
+                              ? "买一深度可覆盖持仓"
+                              : "买一不足或盘口不可用"
+                          }
+                        >
+                          {fmtBidLiquidity(r.bid_px, r.bid_sz_eth)}
+                        </td>
+                        <td className="mono">{fmt(r.current_premium, 2)}</td>
+                        <td className="mono">
+                          {r.recovery_pct == null
+                            ? "—"
+                            : `${fmt(r.recovery_pct, 1)}%`}
+                        </td>
+                        <td>
+                          <button
+                            type="button"
+                            className="btn ghost"
+                            style={{ padding: "4px 10px", fontSize: 12 }}
+                            disabled={!!residualBusy || !!busy || !liqOk}
+                            title={
+                              liqOk
+                                ? "按最新买一 IOC 平仓（不验权利金比例）"
+                                : "买一流动性不足或盘口不可用"
+                            }
+                            onClick={() => void closeResidual(gid, inst)}
+                          >
+                            {residualBusy === gid ? "平仓中…" : "平仓"}
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ) : null}
       </div>
     </div>
   );
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index a63b912..610cbaa 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -732,9 +732,11 @@ input {
 }
 
 .plan-residual-block {
-  margin-top: 14px;
+  margin-top: 0;
   padding-top: 12px;
-  border-top: 1px solid var(--line);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
 }
 
 .plan-residual-head {