Add mobile monitor layout with bottom nav and glance card.

EOF

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

docs/更新说明.md

@@ -5,6 +5,16 @@
 
 ---
 
+## 2026-07-27 — 手机端监控布局
+
+### 变更
+
+1. **底部导航**：窄屏隐藏顶栏菜单，改用底栏「监控 / 记录 / 统计 / 设置」（含安全区）。  
+2. **监控首页卡**：一屏看状态（启动/暂停/已停）、盘口、阶段、净盈利 vs 目标、到期倒计时、最近错误。  
+3. **操作区**：启动 / 暂停 / 紧急全平触摸友好；紧急全平通栏；桌面布局不变。
+
+---
+
 ## 2026-07-26 — 企业微信通知 + 暂停盯目标
 
 ### 变更

frontend/src/App.tsx

@@ -12,6 +12,13 @@ import TradesPage from "./pages/Trades";
 import StatsPage from "./pages/Stats";
 import SettingsPage from "./pages/Settings";
 
+const NAV = [
+  { to: "/plan", label: "监控", full: "自动对冲计划" },
+  { to: "/trades", label: "记录", full: "交易记录" },
+  { to: "/stats", label: "统计", full: "统计" },
+  { to: "/settings", label: "设置", full: "系统设置" },
+] as const;
+
 function Shell({ children }: { children: ReactNode }) {
   const user = getUsername();
   return (
@@ -26,27 +33,26 @@ function Shell({ children }: { children: ReactNode }) {
               width={28}
               height={28}
             />
-            <span>比特骆驼自动化对冲系统</span>
+            <span className="brand-full">比特骆驼自动化对冲系统</span>
+            <span className="brand-short">比特骆驼</span>
           </div>
         </div>
-        <nav className="topnav-center">
+        <nav className="topnav-center" aria-label="主导航">
-          <NavLink to="/plan" className={({ isActive }) => (isActive ? "active" : "")}>
+          {NAV.map((item) => (
-            自动对冲计划
+            <NavLink
-          </NavLink>
+              key={item.to}
-          <NavLink to="/trades" className={({ isActive }) => (isActive ? "active" : "")}>
+              to={item.to}
-            交易记录
+              className={({ isActive }) => (isActive ? "active" : "")}
-          </NavLink>
+            >
-          <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
+              <span className="nav-label-full">{item.full}</span>
-            统计
+              <span className="nav-label-short">{item.label}</span>
-          </NavLink>
+            </NavLink>
-          <NavLink to="/settings" className={({ isActive }) => (isActive ? "active" : "")}>
+          ))}
-            系统设置
-          </NavLink>
         </nav>
         <div className="topnav-side right">
-          <span className="meta mono">{user}</span>
+          <span className="meta mono topnav-user">{user}</span>
           <button
-            className="btn ghost"
+            className="btn ghost topnav-logout"
             type="button"
             onClick={() => {
               clearSession();
@@ -58,6 +64,19 @@ function Shell({ children }: { children: ReactNode }) {
         </div>
       </header>
       <main className="page">{children}</main>
+      <nav className="bottom-nav" aria-label="手机导航">
+        {NAV.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            className={({ isActive }) =>
+              isActive ? "bottom-nav-item active" : "bottom-nav-item"
+            }
+          >
+            <span className="bottom-nav-label">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
     </div>
   );
 }

frontend/src/pages/Plan.tsx

@@ -128,21 +128,71 @@ export default function PlanPage() {
   const countdownUrgent =
     open && expiryMs != null && expiryMs - nowMs > 0 && expiryMs - nowMs < 6 * 3600_000;
 
+  const venueShort =
+    plan?.mode === "LIVE"
+      ? `实盘·${(snap?.exchange || "okx").toUpperCase()}`
+      : "模拟盘";
+
   return (
-    <div>
+    <div className="plan-page">
-      <h2 style={{ marginTop: 0 }}>自动对冲计划</h2>
+      <div className="plan-desktop-head">
-      <p style={{ color: "var(--muted)", marginTop: -8 }}>
+        <h2 style={{ marginTop: 0 }}>自动对冲计划</h2>
-        {plan?.mode === "LIVE" ? "LIVE 实盘下单" : "SIM 本地撮合"} · 行情{" "}
+        <p style={{ color: "var(--muted)", marginTop: -8 }}>
-        {(snap?.exchange || "okx").toUpperCase()}
+          {plan?.mode === "LIVE" ? "LIVE 实盘下单" : "SIM 本地撮合"} · 行情{" "}
-        {snap?.perp_inst_id ? ` · ${snap.perp_inst_id}` : ""} ·
+          {(snap?.exchange || "okx").toUpperCase()}
-        目标平仓(双腿/远虚只平永续) · 未达标则到期结算
+          {snap?.perp_inst_id ? ` · ${snap.perp_inst_id}` : ""} ·
-        {plan?.mode === "LIVE" && plan.live_ready === false
+          目标平仓(双腿/远虚只平永续) · 未达标则到期结算
-          ? ` · 未就绪: ${plan.live_ready_reason || "请配置 API"}`
+          {plan?.mode === "LIVE" && plan.live_ready === false
-          : ""}
+            ? ` · 未就绪: ${plan.live_ready_reason || "请配置 API"}`
-      </p>
+            : ""}
+        </p>
+      </div>
+
+      {/* 手机端一屏监控卡：状态 / 净利 / 倒计时 */}
+      <section className="plan-mobile-hero" aria-label="监控摘要">
+        <div className="plan-mobile-hero-top">
+          <span
+            className={
+              plan?.running
+                ? "plan-pill plan-pill-on"
+                : plan?.phase === "paused"
+                  ? "plan-pill plan-pill-pause"
+                  : "plan-pill plan-pill-off"
+            }
+          >
+            {plan?.running ? "启动中" : plan?.phase === "paused" ? "已暂停" : "已停"}
+          </span>
+          <span className="plan-pill plan-pill-muted mono">{venueShort}</span>
+          <span className="plan-mobile-phase mono">{phaseLabel}</span>
+        </div>
+        <div className="plan-mobile-hero-pnl">
+          <div className="plan-mobile-pnl-block">
+            <span className="plan-mobile-label">净盈利</span>
+            <span className={`plan-mobile-pnl-num mono ${pnlClass(open ? netPnl : null)}`}>
+              {open ? fmt(netPnl) : "—"}
+            </span>
+            <span className="plan-mobile-sub mono">目标 {fmt(exitTarget)} U</span>
+          </div>
+          <div className="plan-mobile-pnl-block">
+            <span className="plan-mobile-label">到期</span>
+            <span
+              className={`plan-mobile-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
+            >
+              {countdown}
+            </span>
+            <span className="plan-mobile-sub mono">
+              {open ? pos?.group_id || "持仓中" : "空仓"}
+            </span>
+          </div>
+        </div>
+        {plan?.last_error ? (
+          <div className="plan-mobile-err">{plan.last_error}</div>
+        ) : null}
+      </section>
+
       {err ? <div className="err">{err}</div> : null}
 
-      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 12 }}>
+      <div className="plan-actions">
         <button
           className={plan?.running ? "btn btn-running" : "btn"}
           type="button"

frontend/src/styles/app.css

@@ -183,32 +183,253 @@ input {
   }
 }
 
+.brand-short {
+  display: none;
+}
+
+.nav-label-short {
+  display: none;
+}
+
+.bottom-nav {
+  display: none;
+}
+
+.plan-mobile-hero {
+  display: none;
+}
+
+.plan-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
 @media (max-width: 900px) {
   .page {
-    padding: 12px 14px 24px;
+    padding: 12px 14px calc(72px + env(safe-area-inset-bottom, 0px));
   }
 
   .topnav {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr auto;
-    gap: 10px;
+    gap: 8px;
-  }
-
-  .topnav-side.left,
-  .topnav-side.right {
-    justify-content: space-between;
   }
 
   .topnav-center {
-    justify-content: flex-start;
+    display: none;
-    flex-wrap: wrap;
-    gap: 2px;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
   }
 
-  .topnav a {
+  .topnav-side.left {
-    padding: 8px 10px;
+    min-width: 0;
+  }
+
+  .topnav-side.right {
+    justify-content: flex-end;
+  }
+
+  .brand-full {
+    display: none;
+  }
+
+  .brand-short {
+    display: inline;
+  }
+
+  .nav-label-full {
+    display: none;
+  }
+
+  .nav-label-short {
+    display: inline;
+  }
+
+  .bottom-nav {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    border-top: 1px solid var(--line);
+    background: rgba(11, 14, 17, 0.96);
+    backdrop-filter: blur(10px);
+    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .bottom-nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    text-decoration: none;
+    color: var(--muted);
     font-size: 13px;
+    font-weight: 600;
+    border-radius: 8px;
+  }
+
+  .bottom-nav-item.active {
+    color: var(--accent);
+    background: rgba(240, 185, 11, 0.08);
+  }
+
+  .plan-desktop-head {
+    display: none;
+  }
+
+  .plan-mobile-hero {
+    display: block;
+    margin: 0 0 12px;
+    padding: 14px 14px 12px;
+    border-radius: 12px;
+    border: 1px solid var(--line);
+    background:
+      linear-gradient(160deg, rgba(240, 185, 11, 0.08), transparent 55%),
+      var(--bg-panel);
+  }
+
+  .plan-mobile-hero-top {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 12px;
+  }
+
+  .plan-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 700;
+    border: 1px solid var(--line);
+  }
+
+  .plan-pill-on {
+    color: #0ecb81;
+    border-color: rgba(14, 203, 129, 0.45);
+    background: rgba(14, 203, 129, 0.12);
+  }
+
+  .plan-pill-off {
+    color: var(--muted);
+  }
+
+  .plan-pill-pause {
+    color: #f0b90b;
+    border-color: rgba(240, 185, 11, 0.45);
+    background: rgba(240, 185, 11, 0.12);
+  }
+
+  .plan-pill-muted {
+    color: var(--muted);
+    font-weight: 600;
+  }
+
+  .plan-mobile-phase {
+    margin-left: auto;
+    color: var(--text);
+    font-size: 13px;
+  }
+
+  .plan-mobile-hero-pnl {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+
+  .plan-mobile-pnl-block {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .plan-mobile-label {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .plan-mobile-pnl-num {
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+  }
+
+  .plan-mobile-countdown {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .plan-mobile-sub {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .plan-mobile-err {
+    margin-top: 10px;
+    font-size: 12px;
+    color: var(--danger);
+    line-height: 1.4;
+    word-break: break-word;
+  }
+
+  .plan-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .plan-actions .btn {
+    min-height: 44px;
+    width: 100%;
+  }
+
+  .plan-actions .btn.danger {
+    grid-column: 1 / -1;
+  }
+
+  .plan-actions .meta {
+    grid-column: 1 / -1;
+  }
+
+  .topnav-user {
+    max-width: 6em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .topnav-logout {
+    padding: 8px 10px;
+    min-height: 40px;
+  }
+
+  .tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+  }
+
+  .tab {
+    flex: 0 0 auto;
+    padding: 10px 12px;
+    min-height: 44px;
+  }
+
+  .settings-subtabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+  }
+
+  .settings-actions .btn {
+    min-height: 44px;
   }
 }