yhlhoh/live
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand livestream management platform

Browse Source
This commit is contained in:
admin committed 2026-08-19 22:24:01 +08:00
1 parent 383c066d86
commit ed62d42a63
12 files changed
+223 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/admin/pages/LiveBoard.tsx
+45 -8
View File
@@ -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 { DashboardOutlined, DatabaseOutlined, FullscreenExitOutlined, FullscreenOutlined, ReloadOutlined, SignalFilled, TeamOutlined, WarningOutlined } from '@ant-design/icons'
import api from '../../api/client'
import { getSystemMetrics, type SystemMetrics } from '../../api/system'
import {
createRemoteSession,
@@ -13,6 +14,27 @@ import {
const { Title, Text } = Typography
interface NodeMetric {
id: string
name: string
online: boolean
metrics?: {
cpu_percent?: number | null
memory_percent?: number | null
network_in_mbps?: number | null
network_out_mbps?: number | null
viewer_count?: number | null
} | null
}
const formatBytes = (value = 0) => {
const units = ['B', 'KB', 'MB', 'GB', 'TB']
let amount = Math.max(0, value)
let index = 0
while (amount >= 1024 && index < units.length - 1) { amount /= 1024; index += 1 }
return `${amount.toFixed(index ? 1 : 0)} ${units[index]}`
}
export default function LiveBoard() {
const [streams, setStreams] = useState<StreamInfo[]>([])
const [streamId, setStreamId] = useState<number>()
@@ -20,7 +42,9 @@ export default function LiveBoard() {
const [selected, setSelected] = useState<React.Key[]>([])
const [loading, setLoading] = useState(true)
const [systemMetrics, setSystemMetrics] = useState<SystemMetrics | null>(null)
const [nodes, setNodes] = useState<NodeMetric[]>([])
const [quality, setQuality] = useState('auto')
const [nodeId, setNodeId] = useState('auto')
const [wallMode, setWallMode] = useState(false)
async function load() {
@@ -38,7 +62,9 @@ export default function LiveBoard() {
message.error('看板数据加载失败')
} finally {
try {
setSystemMetrics(await getSystemMetrics())
const [metrics, nodeResponse] = await Promise.all([getSystemMetrics(), api.get<NodeMetric[]>('/nodes')])
setSystemMetrics(metrics)
setNodes(nodeResponse.data)
} catch {
setSystemMetrics(null)
}
@@ -56,9 +82,11 @@ export default function LiveBoard() {
if (!streamId || selected.length === 0) return
try {
const session = await createRemoteSession(streamId)
const action = quality === 'auto' ? 'restore_auto' : 'switch_quality'
await sendRemoteCommand(streamId, session.token, action, selected.map(String), quality === 'auto' ? undefined : quality)
message.success(`已向 ${selected.length} 个观众下发播放策略`)
const targets = selected.map(String)
if (nodeId !== 'auto') await sendRemoteCommand(streamId, session.token, 'switch_node', targets, nodeId)
if (quality !== 'auto') await sendRemoteCommand(streamId, session.token, 'switch_quality', targets, quality)
if (nodeId === 'auto' && quality === 'auto') await sendRemoteCommand(streamId, session.token, 'restore_auto', targets)
message.success(`已向 ${selected.length} 个观众下发节点与清晰度策略`)
} catch {
message.error('控制命令下发失败，请确认节目已启用审计式播放控制')
}
@@ -95,17 +123,26 @@ export default function LiveBoard() {
</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>
<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>
</Row>
<Card title="节点实时指标">
<Row gutter={[12, 12]}>
{nodes.map(node => <Col xs={24} md={12} xl={8} key={node.id}><Card size="small" title={<Space>{node.name}<Tag color={node.online ? 'green' : 'default'}>{node.online ? '在线' : '离线'}</Tag></Space>}><Space direction="vertical"><Text>CPU：{node.metrics?.cpu_percent?.toFixed(1) ?? '-'}%</Text><Text>内存：{node.metrics?.memory_percent?.toFixed(1) ?? '-'}%</Text><Text>NET IN：{node.metrics?.network_in_mbps?.toFixed(2) ?? '-'} Mbps</Text><Text>NET OUT：{node.metrics?.network_out_mbps?.toFixed(2) ?? '-'} Mbps</Text><Text>观众：{node.metrics?.viewer_count ?? 0}</Text></Space></Card></Col>)}
</Row>
</Card>
{!streamId ? <Empty description="当前没有可查看的直播节目" /> : (
<Card
title="审计式观众会话"
extra={
<Space wrap>
<Select value={quality} onChange={setQuality} style={{ width: 150 }} options={[
<Select value={nodeId} onChange={setNodeId} style={{ width: 180 }} options={[{ value: 'auto', label: '节点：保持自动' }, ...nodes.filter(node => node.online).map(node => ({ value: node.id, label: `节点：${node.name}` }))]} />
<Select value={quality} onChange={setQuality} style={{ width: 160 }} options={[
{ value: 'auto', label: '恢复自动' },
{ value: '1080p', label: '1080p' },
{ value: '720p', label: '720p' },