Add mobile monitor layout with bottom nav and glance card.

EOF

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

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">
-          <NavLink to="/plan" className={({ isActive }) => (isActive ? "active" : "")}>
-            自动对冲计划
-          </NavLink>
-          <NavLink to="/trades" className={({ isActive }) => (isActive ? "active" : "")}>
-            交易记录
-          </NavLink>
-          <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
-            统计
-          </NavLink>
-          <NavLink to="/settings" className={({ isActive }) => (isActive ? "active" : "")}>
-            系统设置
-          </NavLink>
+        <nav className="topnav-center" aria-label="主导航">
+          {NAV.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) => (isActive ? "active" : "")}
+            >
+              <span className="nav-label-full">{item.full}</span>
+              <span className="nav-label-short">{item.label}</span>
+            </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>
   );
 }