Move fleet stats to nav page; backfill funds and loss metrics from curve/status.

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

control/frontend/src/App.tsx

@@ -10,6 +10,7 @@ import { apiFetch, clearSession, getToken, getUsername } from "./api";
 import LoginPage from "./pages/Login";
 import MonitorPage from "./pages/Monitor";
 import SettingsPage from "./pages/Settings";
+import StatsPage from "./pages/Stats";
 
 function Shell({ children }: { children: ReactNode }) {
   const user = getUsername();
@@ -29,6 +30,9 @@ function Shell({ children }: { children: ReactNode }) {
           <NavLink to="/monitor" className={({ isActive }) => (isActive ? "active" : "")}>
             监控区
           </NavLink>
+          <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
+            数据统计
+          </NavLink>
           <NavLink to="/settings" className={({ isActive }) => (isActive ? "active" : "")}>
             系统设置
           </NavLink>
@@ -54,13 +58,15 @@ function Shell({ children }: { children: ReactNode }) {
   );
 }
 
-/** 监控页保活：切设置不断 SSE、不丢卡片状态 */
+/** 监控页保活：切设置/统计不断 SSE、不丢卡片状态 */
 function AuthedPages() {
   const loc = useLocation();
   const onMonitor =
     loc.pathname === "/" ||
     loc.pathname === "/monitor" ||
     loc.pathname.startsWith("/monitor/");
+  const onStats =
+    loc.pathname === "/stats" || loc.pathname.startsWith("/stats/");
   const onSettings =
     loc.pathname === "/settings" || loc.pathname.startsWith("/settings/");
   return (
@@ -68,10 +74,15 @@ function AuthedPages() {
       <div className={onMonitor ? "page-pane" : "page-pane hidden"} aria-hidden={!onMonitor}>
         <MonitorPage />
       </div>
+      <div className={onStats ? "page-pane" : "page-pane hidden"} aria-hidden={!onStats}>
+        <StatsPage />
+      </div>
       <div className={onSettings ? "page-pane" : "page-pane hidden"} aria-hidden={!onSettings}>
         <SettingsPage />
       </div>
-      {!onMonitor && !onSettings ? <Navigate to="/monitor" replace /> : null}
+      {!onMonitor && !onStats && !onSettings ? (
+        <Navigate to="/monitor" replace />
+      ) : null}
     </Shell>
   );
 }

control/frontend/src/pages/Monitor.tsx

@@ -98,21 +98,6 @@ type NodeStats = {
   }[];
 };
 
-type FleetStatsRow = {
-  id: number;
-  name: string;
-  ok: boolean;
-  error?: string | null;
-  latest_funds?: number | null;
-  groups?: number | null;
-  fees_perp?: number | null;
-  fees_option?: number | null;
-  total_fees?: number | null;
-  max_single_loss?: number | null;
-  loss_streak?: number | null;
-  total_pnl?: number | null;
-};
-
 const CLOSE_REASON_ZH: Record<string, string> = {
   fixed_usdt: "固定净盈利达标·双腿全平",
   premium_multiple: "权利金倍数达标·双腿全平",
@@ -264,28 +249,12 @@ export default function MonitorPage() {
   const [detailStatsLoading, setDetailStatsLoading] = useState(false);
   const [equityPage, setEquityPage] = useState(0);
   const EQUITY_PAGE_SIZE = 5;
-  const [fleetStats, setFleetStats] = useState<FleetStatsRow[]>([]);
-  const [fleetStatsErr, setFleetStatsErr] = useState("");
-  const [fleetStatsLoading, setFleetStatsLoading] = useState(false);
 
   const applyNodes = useCallback((list: NodeCard[]) => {
     cachedNodes = list;
     setNodes(list);
   }, []);
 
-  const refreshStats = useCallback(async () => {
-    setFleetStatsLoading(true);
-    try {
-      const r = await apiFetch<{ nodes: FleetStatsRow[] }>("/api/nodes/stats/all");
-      setFleetStats(r.nodes || []);
-      setFleetStatsErr("");
-    } catch (ex) {
-      setFleetStatsErr(ex instanceof Error ? ex.message : String(ex));
-    } finally {
-      setFleetStatsLoading(false);
-    }
-  }, []);
-
   useEffect(() => {
     if (detailId == null) {
       setDetailStats(null);
@@ -324,14 +293,7 @@ export default function MonitorPage() {
     } catch (ex) {
       setErr(ex instanceof Error ? ex.message : String(ex));
     }
-    void refreshStats();
-  }, [applyNodes, refreshStats]);
-
-  useEffect(() => {
-    void refreshStats();
-    const id = window.setInterval(() => void refreshStats(), 60_000);
-    return () => window.clearInterval(id);
-  }, [refreshStats]);
+  }, [applyNodes]);
 
   useEffect(() => {
     apiFetch<{ sse_interval_sec?: number }>("/api/auth/me")
@@ -729,126 +691,6 @@ export default function MonitorPage() {
         <p className="meta">暂无策略机。请到「系统设置」添加并生成 Token。</p>
       )}
 
-      <section className="stats-section">
-        <div className="toolbar stats-toolbar">
-          <h2>数据统计</h2>
-          <div className="toolbar-actions">
-            <button
-              type="button"
-              className="btn ghost"
-              disabled={fleetStatsLoading}
-              onClick={() => void refreshStats()}
-            >
-              {fleetStatsLoading ? "加载中…" : "刷新统计"}
-            </button>
-          </div>
-        </div>
-        {fleetStatsErr ? <div className="err soft">{fleetStatsErr}</div> : null}
-        {fleetStats.length ? (
-          <div className="monitor-table-wrap">
-            <table className="monitor-table stats-table">
-              <thead>
-                <tr>
-                  <th>机器名</th>
-                  <th>最新资金</th>
-                  <th>轮次</th>
-                  <th>永续手续费</th>
-                  <th>期权手续费</th>
-                  <th>手续费合计</th>
-                  <th>单笔最大亏损</th>
-                  <th>连亏次数</th>
-                  <th>盈亏</th>
-                </tr>
-              </thead>
-              <tbody>
-                {fleetStats.map((row) => (
-                  <tr key={row.id}>
-                    <td>
-                      <strong className="machine-name">{row.name}</strong>
-                      {!row.ok && row.error ? (
-                        <div className="meta" title={row.error}>
-                          拉取失败
-                        </div>
-                      ) : null}
-                    </td>
-                    <td className="mono">
-                      {row.latest_funds != null
-                        ? fmt(row.latest_funds, 2)
-                        : "—"}
-                    </td>
-                    <td className="mono">
-                      {row.groups != null ? row.groups : "—"}
-                    </td>
-                    <td className="mono">
-                      {row.fees_perp != null ? fmt(row.fees_perp, 4) : "—"}
-                    </td>
-                    <td className="mono">
-                      {row.fees_option != null
-                        ? fmt(row.fees_option, 4)
-                        : "—"}
-                    </td>
-                    <td className="mono">
-                      {row.total_fees != null ? fmt(row.total_fees, 4) : "—"}
-                    </td>
-                    <td className={`mono ${pnlClass(row.max_single_loss)}`}>
-                      {row.max_single_loss != null
-                        ? fmt(row.max_single_loss, 2)
-                        : "—"}
-                    </td>
-                    <td className="mono">
-                      {row.loss_streak != null ? row.loss_streak : "—"}
-                    </td>
-                    <td className={`mono ${pnlClass(row.total_pnl)}`}>
-                      {row.total_pnl != null ? fmt(row.total_pnl, 2) : "—"}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-              <tfoot>
-                {(() => {
-                  const okRows = fleetStats.filter((r) => r.ok);
-                  const sum = (key: keyof FleetStatsRow) =>
-                    okRows.reduce((a, r) => a + (Number(r[key]) || 0), 0);
-                  const maxLoss = okRows.length
-                    ? Math.min(
-                        0,
-                        ...okRows.map((r) => Number(r.max_single_loss) || 0),
-                      )
-                    : 0;
-                  return (
-                    <tr className="stats-total-row">
-                      <td>
-                        <strong>合计</strong>
-                        <span className="meta">
-                          {" "}
-                          ({okRows.length}/{fleetStats.length})
-                        </span>
-                      </td>
-                      <td className="mono">{fmt(sum("latest_funds"), 2)}</td>
-                      <td className="mono">{sum("groups")}</td>
-                      <td className="mono">{fmt(sum("fees_perp"), 4)}</td>
-                      <td className="mono">{fmt(sum("fees_option"), 4)}</td>
-                      <td className="mono">{fmt(sum("total_fees"), 4)}</td>
-                      <td className={`mono ${pnlClass(maxLoss)}`}>
-                        {fmt(maxLoss, 2)}
-                      </td>
-                      <td className="mono">—</td>
-                      <td className={`mono ${pnlClass(sum("total_pnl"))}`}>
-                        {fmt(sum("total_pnl"), 2)}
-                      </td>
-                    </tr>
-                  );
-                })()}
-              </tfoot>
-            </table>
-          </div>
-        ) : (
-          <p className="meta">
-            {fleetStatsLoading ? "正在拉取各策略机统计…" : "暂无统计数据"}
-          </p>
-        )}
-      </section>
-
       {detailNode && detail ? (
         <div
           className="modal-backdrop"

control/frontend/src/pages/Stats.tsx

@@ -0,0 +1,165 @@
+import { useCallback, useEffect, useState } from "react";
+import { apiFetch } from "../api";
+
+type FleetStatsRow = {
+  id: number;
+  name: string;
+  ok: boolean;
+  error?: string | null;
+  latest_funds?: number | null;
+  groups?: number | null;
+  fees_perp?: number | null;
+  fees_option?: number | null;
+  total_fees?: number | null;
+  max_single_loss?: number | null;
+  loss_streak?: number | null;
+  total_pnl?: number | null;
+};
+
+function fmt(v: unknown, digits = 4): string {
+  if (v == null || v === "") return "—";
+  const n = Number(v);
+  if (!Number.isFinite(n)) return String(v);
+  return n.toFixed(digits);
+}
+
+function pnlClass(v: unknown): string {
+  const n = Number(v);
+  if (!Number.isFinite(n) || n === 0) return "pnl-flat";
+  return n > 0 ? "pnl-pos" : "pnl-neg";
+}
+
+export default function StatsPage() {
+  const [fleetStats, setFleetStats] = useState<FleetStatsRow[]>([]);
+  const [fleetStatsErr, setFleetStatsErr] = useState("");
+  const [fleetStatsLoading, setFleetStatsLoading] = useState(false);
+
+  const refreshStats = useCallback(async () => {
+    setFleetStatsLoading(true);
+    try {
+      const r = await apiFetch<{ nodes: FleetStatsRow[] }>("/api/nodes/stats/all");
+      setFleetStats(r.nodes || []);
+      setFleetStatsErr("");
+    } catch (ex) {
+      setFleetStatsErr(ex instanceof Error ? ex.message : String(ex));
+    } finally {
+      setFleetStatsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshStats();
+    const id = window.setInterval(() => void refreshStats(), 60_000);
+    return () => window.clearInterval(id);
+  }, [refreshStats]);
+
+  const okRows = fleetStats.filter((r) => r.ok);
+  const sum = (key: keyof FleetStatsRow) =>
+    okRows.reduce((a, r) => a + (Number(r[key]) || 0), 0);
+  const maxLoss = okRows.length
+    ? Math.min(0, ...okRows.map((r) => Number(r.max_single_loss) || 0))
+    : 0;
+
+  return (
+    <div>
+      <div className="toolbar stats-toolbar">
+        <h2>数据统计</h2>
+        <div className="toolbar-actions">
+          <button
+            type="button"
+            className="btn ghost"
+            disabled={fleetStatsLoading}
+            onClick={() => void refreshStats()}
+          >
+            {fleetStatsLoading ? "加载中…" : "刷新统计"}
+          </button>
+        </div>
+      </div>
+      {fleetStatsErr ? <div className="err soft">{fleetStatsErr}</div> : null}
+      {fleetStats.length ? (
+        <div className="monitor-table-wrap">
+          <table className="monitor-table stats-table">
+            <thead>
+              <tr>
+                <th>机器名</th>
+                <th>最新资金</th>
+                <th>轮次</th>
+                <th>永续手续费</th>
+                <th>期权手续费</th>
+                <th>手续费合计</th>
+                <th>单笔最大亏损</th>
+                <th>连亏次数</th>
+                <th>盈亏</th>
+              </tr>
+            </thead>
+            <tbody>
+              {fleetStats.map((row) => (
+                <tr key={row.id}>
+                  <td>
+                    <strong className="machine-name">{row.name}</strong>
+                    {!row.ok && row.error ? (
+                      <div className="meta" title={row.error}>
+                        拉取失败
+                      </div>
+                    ) : null}
+                  </td>
+                  <td className="mono">
+                    {row.ok ? fmt(row.latest_funds ?? 0, 2) : "—"}
+                  </td>
+                  <td className="mono">
+                    {row.groups != null ? row.groups : "—"}
+                  </td>
+                  <td className="mono">
+                    {row.fees_perp != null ? fmt(row.fees_perp, 4) : "—"}
+                  </td>
+                  <td className="mono">
+                    {row.fees_option != null ? fmt(row.fees_option, 4) : "—"}
+                  </td>
+                  <td className="mono">
+                    {row.total_fees != null ? fmt(row.total_fees, 4) : "—"}
+                  </td>
+                  <td className={`mono ${pnlClass(row.max_single_loss)}`}>
+                    {row.ok ? fmt(row.max_single_loss ?? 0, 2) : "—"}
+                  </td>
+                  <td className="mono">
+                    {row.ok ? String(row.loss_streak ?? 0) : "—"}
+                  </td>
+                  <td className={`mono ${pnlClass(row.total_pnl)}`}>
+                    {row.total_pnl != null ? fmt(row.total_pnl, 2) : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr className="stats-total-row">
+                <td>
+                  <strong>合计</strong>
+                  <span className="meta">
+                    {" "}
+                    ({okRows.length}/{fleetStats.length})
+                  </span>
+                </td>
+                <td className="mono">{fmt(sum("latest_funds"), 2)}</td>
+                <td className="mono">{sum("groups")}</td>
+                <td className="mono">{fmt(sum("fees_perp"), 4)}</td>
+                <td className="mono">{fmt(sum("fees_option"), 4)}</td>
+                <td className="mono">{fmt(sum("total_fees"), 4)}</td>
+                <td className={`mono ${pnlClass(maxLoss)}`}>
+                  {fmt(maxLoss, 2)}
+                </td>
+                <td className="mono">—</td>
+                <td className={`mono ${pnlClass(sum("total_pnl"))}`}>
+                  {fmt(sum("total_pnl"), 2)}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      ) : (
+        <p className="meta">
+          {fleetStatsLoading ? "正在拉取各策略机统计…" : "暂无统计数据"}
+        </p>
+      )}
+    </div>
+  );
+}