From 1e87be31da1035f7b9157417da91e70b6efd912a Mon Sep 17 00:00:00 2001
From: admin <admin@livestream.local>
Date: Thu, 20 Aug 2026 09:47:39 +0800
Subject: [PATCH] fix: keep dashboard aggregate metrics visible

---
 frontend/src/admin/pages/LiveBoard.tsx | 11 ++++---
 frontend/src/api/system.ts             | 42 +++++++++++++++++---------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/src/admin/pages/LiveBoard.tsx b/frontend/src/admin/pages/LiveBoard.tsx
index d4175ef..a5c07ee 100644
--- a/frontend/src/admin/pages/LiveBoard.tsx
+++ b/frontend/src/admin/pages/LiveBoard.tsx
@@ -98,6 +98,7 @@ export default function LiveBoard() {
 
   const activeSessions = sessions.filter(item => Date.now() - new Date(item.last_heartbeat).getTime() < 30000)
   const buffering = activeSessions.filter(item => item.playback_state === 'buffering' || Number(item.buffered_seconds || 0) < 1)
+  const totalCardsLoading = !systemMetrics
 
   return (
     <div>
@@ -127,11 +128,11 @@ export default function LiveBoard() {
         </Row>
 
         <Row gutter={[16, 16]}>
-          <Col xs={24} md={8}><Card><Statistic title="CPU 使用率" value={systemMetrics?.cpu_percent ?? 0} precision={1} suffix="%" prefix={<DashboardOutlined />} /></Card></Col>
-          <Col xs={24} md={8}><Card><Statistic title="内存使用率" value={systemMetrics?.memory_percent ?? 0} precision={1} suffix="%" prefix={<DatabaseOutlined />} /><Text type="secondary">{formatBytes(systemMetrics?.memory_used_bytes)} / {formatBytes(systemMetrics?.memory_total_bytes)}</Text></Card></Col>
-          <Col xs={24} md={8}><Card><Statistic title="存储使用率" value={systemMetrics?.disk_percent ?? 0} precision={1} suffix="%" prefix={<DatabaseOutlined />} /><Text type="secondary">{formatBytes(systemMetrics?.disk_used_bytes)} / {formatBytes(systemMetrics?.disk_total_bytes)}</Text></Card></Col>
-          <Col xs={24} md={12}><Card><Statistic title="NET I/O 下载总量" value={formatBytes(systemMetrics?.network_received_bytes)} /></Card></Col>
-          <Col xs={24} md={12}><Card><Statistic title="NET I/O 上传总量" value={formatBytes(systemMetrics?.network_sent_bytes)} /></Card></Col>
+          <Col xs={24} md={8}><Card><Statistic title="CPU 使用率" value={systemMetrics?.cpu_percent ?? 0} precision={1} suffix="%" loading={totalCardsLoading} prefix={<DashboardOutlined />} /></Card></Col>
+          <Col xs={24} md={8}><Card><Statistic title="内存使用率" value={systemMetrics?.memory_percent ?? 0} precision={1} suffix="%" loading={totalCardsLoading} prefix={<DatabaseOutlined />} /><Text type="secondary">{formatBytes(systemMetrics?.memory_used_bytes)} / {formatBytes(systemMetrics?.memory_total_bytes)}</Text></Card></Col>
+          <Col xs={24} md={8}><Card><Statistic title="存储使用率" value={systemMetrics?.disk_percent ?? 0} precision={1} suffix="%" loading={totalCardsLoading} prefix={<DatabaseOutlined />} /><Text type="secondary">{formatBytes(systemMetrics?.disk_used_bytes)} / {formatBytes(systemMetrics?.disk_total_bytes)}</Text></Card></Col>
+          <Col xs={24} md={12}><Card><Statistic title="NET I/O 下载总量" value={formatBytes(systemMetrics?.network_received_bytes)} loading={totalCardsLoading} /></Card></Col>
+          <Col xs={24} md={12}><Card><Statistic title="NET I/O 上传总量" value={formatBytes(systemMetrics?.network_sent_bytes)} loading={totalCardsLoading} /></Card></Col>
         </Row>
 
         <Card title="节点实时指标">
diff --git a/frontend/src/api/system.ts b/frontend/src/api/system.ts
index 4b4f462..a4da4b1 100644
--- a/frontend/src/api/system.ts
+++ b/frontend/src/api/system.ts
@@ -13,23 +13,37 @@ export interface SystemMetrics {
 }
 
 interface SystemMetricsResponse {
-  cpu: { load_percent: number }
-  memory: { total: number; available: number; used_percent: number }
-  disk: { total: number; free: number; used_percent: number }
-  network: { bytes_recv: number; bytes_sent: number }
+  cpu?: { load_percent?: number }
+  memory?: { total?: number; available?: number; used_percent?: number }
+  disk?: { total?: number; free?: number; used_percent?: number }
+  network?: { bytes_recv?: number; bytes_sent?: number }
+  cpu_percent?: number
+  memory_percent?: number
+  disk_percent?: number
+  disk_total_bytes?: number
+  disk_used_bytes?: number
+  network_received_bytes?: number
+  network_sent_bytes?: number
 }
 
+const numberOrZero = (value: unknown) => Number.isFinite(Number(value)) ? Number(value) : 0
+
 export async function getSystemMetrics(): Promise<SystemMetrics> {
   const { data } = await api.get<SystemMetricsResponse>('/settings/system-metrics')
+  const memoryTotal = numberOrZero(data.memory?.total)
+  const memoryAvailable = numberOrZero(data.memory?.available)
+  const diskTotal = numberOrZero(data.disk?.total ?? data.disk_total_bytes)
+  const diskUsed = numberOrZero(data.disk_used_bytes ?? (diskTotal - numberOrZero(data.disk?.free)))
+
   return {
-    cpu_percent: data.cpu.load_percent,
-    memory_percent: data.memory.used_percent,
-    memory_total_bytes: data.memory.total,
-    memory_used_bytes: Math.max(0, data.memory.total - data.memory.available),
-    disk_percent: data.disk.used_percent,
-    disk_total_bytes: data.disk.total,
-    disk_used_bytes: Math.max(0, data.disk.total - data.disk.free),
-    network_received_bytes: data.network.bytes_recv,
-    network_sent_bytes: data.network.bytes_sent,
+    cpu_percent: numberOrZero(data.cpu?.load_percent ?? data.cpu_percent),
+    memory_percent: numberOrZero(data.memory?.used_percent ?? data.memory_percent),
+    memory_total_bytes: memoryTotal,
+    memory_used_bytes: Math.max(0, memoryTotal - memoryAvailable),
+    disk_percent: numberOrZero(data.disk?.used_percent ?? data.disk_percent),
+    disk_total_bytes: diskTotal,
+    disk_used_bytes: Math.max(0, diskUsed),
+    network_received_bytes: numberOrZero(data.network?.bytes_recv ?? data.network_received_bytes),
+    network_sent_bytes: numberOrZero(data.network?.bytes_sent ?? data.network_sent_bytes),
   }
-}
+}
\ No newline at end of file