Use horizontal tables for strategy and stats in centered fullscreen modal.

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

control/frontend/src/pages/Monitor.tsx

@@ -1,9 +1,4 @@
-import {
+import { useCallback, useEffect, useState } from "react";
-  useCallback,
-  useEffect,
-  useState,
-  type ReactNode,
-} from "react";
 import { apiFetch, clearSession, getToken, type NodeCard } from "../api";
 
 function pickStrategy(n: NodeCard) {
@@ -635,89 +630,75 @@ export default function MonitorPage() {
               </button>
             </header>
 
-            <div className="modal-grid-2">
             <section className="modal-section">
               <h4>策略详情</h4>
-                <div className="kv-table-wrap">
-                  <table className="kv-table">
-                    <tbody>
               {(() => {
                 const r = riskLines(detail.strat);
-                        const rows: { k: string; v: ReactNode }[] = [
+                return (
-                          { k: "定仓", v: r.sizing },
+                  <div className="legs-table-wrap">
-                          ...(r.lossPct != null
+                    <table className="legs-table">
-                            ? [{ k: "风险比例", v: r.lossPct }]
+                      <thead>
-                            : []),
+                        <tr>
-                          { k: "出场", v: r.exit },
+                          <th>定仓</th>
-                          ...(r.openRatio
+                          {r.lossPct != null ? <th>风险比例</th> : null}
-                            ? [{ k: "开仓比例", v: r.openRatio }]
+                          <th>出场</th>
-                            : []),
+                          {r.openRatio ? <th>开仓比例</th> : null}
-                          { k: "杠杆", v: r.leverage },
+                          <th>杠杆</th>
-                          {
+                          <th>状态</th>
-                            k: "状态",
+                          <th>模式/交易所</th>
-                            v: `${detailRunning ? "运行中" : "已停"} · ${detail.phase}`,
+                          <th>轮次</th>
-                          },
+                          <th>组 ID</th>
-                          {
+                          <th>保证金</th>
-                            k: "模式 / 交易所",
+                          <th>名义永续/期权</th>
-                            v: `${detail.mode} / ${detail.exchange}`,
+                          <th>出场目标</th>
-                          },
+                          <th>指数</th>
-                          { k: "轮次", v: String(detail.rounds ?? "—") },
+                          <th>合约对</th>
-                          {
+                        </tr>
-                            k: "组 ID",
+                      </thead>
-                            v: (
+                      <tbody>
-                              <span className="mono">
+                        <tr>
+                          <td>{r.sizing}</td>
+                          {r.lossPct != null ? <td>{r.lossPct}</td> : null}
+                          <td>{r.exit}</td>
+                          {r.openRatio ? <td>{r.openRatio}</td> : null}
+                          <td>{r.leverage}</td>
+                          <td>
+                            {detailRunning ? "运行中" : "已停"} · {detail.phase}
+                          </td>
+                          <td>
+                            {detail.mode} / {detail.exchange}
+                          </td>
+                          <td>{detail.rounds ?? "—"}</td>
+                          <td className="mono">
                             {String(
                               detail.strat.group_id ||
                                 detail.position.group_id ||
                                 "—",
                             )}
-                              </span>
+                          </td>
-                            ),
+                          <td>{String(detail.strat.perp_margin_mode || "—")}</td>
-                          },
+                          <td>
-                          {
+                            {fmt(detail.strat.perp_qty_eth, 4)} /{" "}
-                            k: "保证金",
+                            {fmt(detail.strat.option_qty_eth, 4)} ETH
-                            v: String(detail.strat.perp_margin_mode || "—"),
+                          </td>
-                          },
+                          <td>{fmt(detail.strat.exit_target_usdt, 2)} USDT</td>
-                          {
+                          <td>{fmt(detail.index_px, 2)}</td>
-                            k: "名义 永续/期权",
+                          <td className="mono">
-                            v: `${fmt(detail.strat.perp_qty_eth, 4)} / ${fmt(detail.strat.option_qty_eth, 4)} ETH`,
-                          },
-                          {
-                            k: "出场目标",
-                            v: `${fmt(detail.strat.exit_target_usdt, 2)} USDT`,
-                          },
-                          { k: "指数", v: fmt(detail.index_px, 2) },
-                          {
-                            k: "合约对",
-                            v: (
-                              <span className="mono">
                             {detail.pair
                               ? `${detail.pair.expiry_ymd || "?"} @ ${detail.pair.strike ?? "?"}`
                               : "—"}
-                              </span>
+                          </td>
-                            ),
-                          },
-                        ];
-                        if (detail.strat.last_error) {
-                          rows.push({
-                            k: "最近错误",
-                            v: (
-                              <span className="err soft">
-                                {String(detail.strat.last_error)}
-                              </span>
-                            ),
-                          });
-                        }
-                        return rows.map((row) => (
-                          <tr key={row.k}>
-                            <th scope="row">{row.k}</th>
-                            <td>{row.v}</td>
                         </tr>
-                        ));
-                      })()}
                       </tbody>
                     </table>
                   </div>
+                );
+              })()}
+              {detail.strat.last_error ? (
+                <p className="err soft" style={{ marginTop: 8 }}>
+                  最近错误：{String(detail.strat.last_error)}
+                </p>
+              ) : null}
             </section>
 
             <section className="modal-section">
@@ -729,64 +710,54 @@ export default function MonitorPage() {
                 <p className="err soft">{detailStatsErr}</p>
               ) : null}
               {detailStats ? (
-                  <div className="kv-table-wrap">
+                <div className="legs-table-wrap">
-                    <table className="kv-table">
+                  <table className="legs-table">
+                    <thead>
+                      <tr>
+                        <th>组数/胜率</th>
+                        <th>总盈亏</th>
+                        <th>永续手续费</th>
+                        <th>期权手续费</th>
+                        <th>手续费合计</th>
+                        {(detailStats.show_slip ??
+                        detailStats.mode !== "LIVE") ? (
+                          <th>滑点合计</th>
+                        ) : null}
+                        <th>平仓原因</th>
+                      </tr>
+                    </thead>
                     <tbody>
                       <tr>
-                          <th scope="row">组数 / 胜率</th>
                         <td className="mono">
                           {detailStats.groups} /{" "}
                           {(detailStats.win_rate * 100).toFixed(1)}%
                         </td>
-                        </tr>
+                        <td className={pnlClass(detailStats.total_pnl)}>
-                        <tr>
-                          <th scope="row">总盈亏</th>
-                          <td
-                            className={`mono ${pnlClass(detailStats.total_pnl)}`}
-                          >
                           {fmt(detailStats.total_pnl, 2)} USDT
                         </td>
-                        </tr>
-                        <tr>
-                          <th scope="row">永续手续费</th>
                         <td className="mono">
                           {fmt(detailStats.fees_perp ?? 0, 4)}
                         </td>
-                        </tr>
-                        <tr>
-                          <th scope="row">期权手续费</th>
                         <td className="mono">
                           {fmt(detailStats.fees_option ?? 0, 4)}
                         </td>
-                        </tr>
-                        <tr>
-                          <th scope="row">手续费合计</th>
                         <td className="mono">
                           {fmt(detailStats.total_fees, 4)}
                         </td>
-                        </tr>
                         {(detailStats.show_slip ??
                         detailStats.mode !== "LIVE") ? (
-                          <tr>
-                            <th scope="row">滑点合计</th>
                           <td className="mono">
                             {fmt(detailStats.total_slip ?? 0, 4)}
                           </td>
-                          </tr>
                         ) : null}
-                        <tr>
-                          <th scope="row">平仓原因</th>
                         <td className="mono">
                           {Object.keys(detailStats.close_reasons || {})
                             .length === 0
                             ? "—"
                             : Object.entries(detailStats.close_reasons)
                                 .sort((a, b) => b[1] - a[1])
-                                  .map(([k, n]) => (
+                                .map(([k, n]) => `${closeReasonZh(k)}×${n}`)
-                                    <div key={k}>
+                                .join(" · ")}
-                                      {closeReasonZh(k)} × {n}
-                                    </div>
-                                  ))}
                         </td>
                       </tr>
                     </tbody>
@@ -796,7 +767,6 @@ export default function MonitorPage() {
                 <p className="meta">暂无统计</p>
               ) : null}
             </section>
-            </div>
 
             <section className="modal-section">
               <h4>按组盈亏</h4>

control/frontend/src/styles.css

@@ -451,21 +451,26 @@ td {
   transform: translateX(20px);
 }
 
+/* 全屏遮罩；带鱼屏两侧留黑，内容始终水平垂直居中 */
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(4, 8, 14, 0.88);
+  width: 100vw;
+  height: 100vh;
+  background: rgba(4, 8, 14, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
+  padding: 24px 16px;
   z-index: 50;
   overflow: auto;
+  box-sizing: border-box;
 }
 
 .modal-panel {
   width: min(920px, 100%);
-  max-height: calc(100vh - 32px);
+  max-width: 920px;
+  max-height: calc(100vh - 48px);
   overflow: auto;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -474,7 +479,8 @@ td {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  margin: auto;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .modal-panel.running {
@@ -482,18 +488,6 @@ td {
   box-shadow: 0 0 0 1px rgba(60, 179, 113, 0.2);
 }
 
-.modal-grid-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-@media (max-width: 760px) {
-  .modal-grid-2 {
-    grid-template-columns: 1fr;
-  }
-}
-
 .pager {
   display: flex;
   align-items: center;
@@ -530,41 +524,6 @@ td {
   font-size: 0.9rem;
 }
 
-.kv-table-wrap {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.kv-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.82rem;
-}
-
-.kv-table th {
-  width: 38%;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--muted);
-  font-weight: 500;
-  text-align: left;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--line);
-  white-space: nowrap;
-}
-
-.kv-table td {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--line);
-  text-align: left;
-  font-variant-numeric: tabular-nums;
-}
-
-.kv-table tr:last-child th,
-.kv-table tr:last-child td {
-  border-bottom: none;
-}
-
 .detail-kv {
   grid-template-columns: 1fr 1fr;
 }