feat: complete program platform experience

frontend/src/admin/pages/LiveBoard.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Button, Card, Col, Empty, Row, Select, Space, Statistic, Table, Tag, Typography, message } from 'antd'
-import { ReloadOutlined, SignalFilled, TeamOutlined, WarningOutlined } from '@ant-design/icons'
+import { DashboardOutlined, DatabaseOutlined, FullscreenExitOutlined, FullscreenOutlined, ReloadOutlined, SignalFilled, TeamOutlined, WarningOutlined } from '@ant-design/icons'
+import { getSystemMetrics, type SystemMetrics } from '../../api/system'
 import {
   createRemoteSession,
   fetchStreams,
@@ -18,7 +19,9 @@ export default function LiveBoard() {
   const [sessions, setSessions] = useState<ViewerSessionInfo[]>([])
   const [selected, setSelected] = useState<React.Key[]>([])
   const [loading, setLoading] = useState(true)
+  const [systemMetrics, setSystemMetrics] = useState<SystemMetrics | null>(null)
   const [quality, setQuality] = useState('auto')
+  const [wallMode, setWallMode] = useState(false)
 
   async function load() {
     try {
@@ -34,6 +37,11 @@ export default function LiveBoard() {
     } catch {
       message.error('看板数据加载失败')
     } finally {
+      try {
+        setSystemMetrics(await getSystemMetrics())
+      } catch {
+        setSystemMetrics(null)
+      }
       setLoading(false)
     }
   }
@@ -75,6 +83,7 @@ export default function LiveBoard() {
               options={streams.map(program => ({ value: program.id, label: `${program.title} · ${program.status}` }))}
               onChange={value => { setStreamId(value); setSelected([]) }}
             />
+            <Button icon={wallMode ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={() => setWallMode(value => !value)}>{wallMode ? '退出大屏' : '大屏模式'}</Button>
             <Button icon={<ReloadOutlined />} onClick={load}>刷新</Button>
           </Space>
         </div>
@@ -85,6 +94,12 @@ export default function LiveBoard() {
           <Col xs={24} sm={8}><Card><Statistic title="疑似卡顿" value={buffering.length} prefix={<WarningOutlined />} valueStyle={{ color: buffering.length ? '#cf5c36' : undefined }} /></Card></Col>
         </Row>
 
+        <Row gutter={[16, 16]}>
+          <Col xs={24} sm={8}><Card><Statistic title="CPU 使用率" value={systemMetrics?.cpu_percent ?? 0} precision={1} suffix="%" prefix={<DashboardOutlined />} /></Card></Col>
+          <Col xs={24} sm={8}><Card><Statistic title="内存使用率" value={systemMetrics?.memory_percent ?? 0} precision={1} suffix="%" prefix={<DatabaseOutlined />} /></Card></Col>
+          <Col xs={24} sm={8}><Card><Statistic title="存储使用率" value={systemMetrics?.disk_percent ?? 0} precision={1} suffix="%" prefix={<DatabaseOutlined />} /></Card></Col>
+        </Row>
+
         {!streamId ? <Empty description="当前没有可查看的直播节目" /> : (
           <Card
             title="审计式观众会话"