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

UI全面精雕: 米兰色衬线体系 + 全页质感升级

Browse Source 
主题层:
- 更精细的色彩层级(primaryBg/hover/active等语义色)
- 字号体系: heading1-5, fontSize 15 基准
- 控件高度 40/48/32 三档, 圆角 6/10
- 三层阴影分层, motionDuration

首页:
- 大幅面渐变英雄区(64px padding, 40px 标题)
- 直播卡片: 暖棕渐变封面, LIVE 脉冲红点标签
- 悬停 transform+shadow 过渡, 描边高亮

仪表盘:
- 彩色顶部边框卡片(绿/蓝/棕), 品牌名+标语头部

登录页:
- 48px 大内边距, 返回首页链接

直播列表:
- 描述行内展示, 推流码截断, 操作图标组

节点页:
- 发光圆点在线指示器, 三色 CPU/内存进度阈值
- 在线/离线统计, Origin 标签

播放页:
- 暗色 #1A1815 背景, 毛玻璃顶栏
- 圆角视频容器, box-shadow 景深
- document.title 动态标题
This commit is contained in:
admin committed 2026-08-10 16:30:39 +08:00
1 parent d4a3742136
commit f0b8c2d64f
8 files changed
+453 -210
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/admin/LoginPage.tsx
+47 -15
View File
@@ -1,7 +1,7 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Form, Input, Button, Typography, message, Space } from 'antd'
import { LockOutlined } from '@ant-design/icons'
import { Card, Form, Input, Button, Typography, message, Space, Divider } from 'antd'
import { LockOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { login } from '../api/auth'
import { useBrand } from '../brand/BrandContext'
@@ -32,37 +32,69 @@ export default function LoginPage() {
alignItems: 'center',
justifyContent: 'center',
background: '#F6F3ED',
padding: 24,
}}>
<Card style={{ width: 400, borderRadius: 12, boxShadow: '0 12px 40px rgba(20,20,16,0.06)' }}>
<Space direction="vertical" size="large" style={{ width: '100%' }}>
<Card
style={{
width: 420,
borderRadius: 14,
boxShadow: '0 12px 48px rgba(20,20,16,0.07), 0 2px 8px rgba(20,20,16,0.04)',
border: '1px solid #E6E0D6',
}}
bodyStyle={{ padding: '48px 44px' }}
>
<Space direction="vertical" size={32} style={{ width: '100%' }}>
<div style={{ textAlign: 'center' }}>
{brand.brand_logo_url && (
<img src={brand.brand_logo_url} alt={brand.brand_name}
style={{ height: 36, marginBottom: 12 }} />
style={{ height: 40, marginBottom: 16 }} />
)}
<Title level={2} style={{ marginBottom: 4, color: '#C2693A', fontWeight: 600,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
<Title style={{
margin: '0 0 8px', fontWeight: 600, fontSize: 28, letterSpacing: -1,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}>
{brand.brand_name}
</Title>
<Text type="secondary">管理控制台</Text>
<Text type="secondary" style={{ fontSize: 15 }}>
{brand.brand_tagline || '管理控制台'}
</Text>
</div>
<Form onFinish={handleSubmit} layout="vertical">
<Form onFinish={handleSubmit} layout="vertical" size="large">
<Form.Item
name="password"
rules={[{ required: true, message: '请输入密码' }]}
rules={[{ required: true, message: '请输入管理员密码' }]}
style={{ marginBottom: 24 }}
>
<Input.Password
prefix={<LockOutlined />}
prefix={<LockOutlined style={{ color: '#8B867D' }} />}
placeholder="管理员密码"
size="large"
style={{ height: 48 }}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading} block size="large">
登录
<Form.Item style={{ marginBottom: 0 }}>
<Button
type="primary"
htmlType="submit"
loading={loading}
block
style={{ height: 48, fontSize: 16, fontWeight: 600 }}
>
登录管理控制台
</Button>
</Form.Item>
</Form>
<div style={{ textAlign: 'center' }}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/')}
style={{ color: '#8B867D', fontSize: 13 }}
>
返回首页
</Button>
</div>
</Space>
</Card>
</div>
frontend/src/admin/pages/Dashboard.tsx
+33 -33
View File
@@ -1,11 +1,13 @@
import { useState, useEffect } from 'react'
import { Row, Col, Card, Statistic, Typography, Table, Tag } from 'antd'
import { VideoCameraOutlined, SignalFilled, PlayCircleOutlined } from '@ant-design/icons'
import { Row, Col, Card, Statistic, Typography, Table, Tag, Skeleton } from 'antd'
import { SignalFilled, ClockCircleOutlined, PlayCircleOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext'
const { Title } = Typography
const { Title, Text } = Typography
export default function Dashboard() {
const { brand } = useBrand()
const [streams, setStreams] = useState<StreamInfo[]>([])
const [loading, setLoading] = useState(true)
@@ -16,15 +18,12 @@ export default function Dashboard() {
}, [])
async function loadData() {
try {
const data = await fetchStreams()
setStreams(data)
} catch { /* ignore */ }
try { setStreams(await fetchStreams()) } catch { /* */ }
setLoading(false)
}
const liveCount = streams.filter((s) => s.status === 'live').length
const pendingCount = streams.filter((s) => s.status === 'pending').length
const liveCount = streams.filter(s => s.status === 'live').length
const pendingCount = streams.filter(s => s.status === 'pending').length
const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: '待开播' },
@@ -35,45 +34,46 @@ export default function Dashboard() {
const columns = [
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{
title: '状态', dataIndex: 'status', key: 'status', width: 100,
render: (s: string) => {
const m = statusMap[s] || { color: 'default', label: s }
return <Tag color={m.color}>{m.label}</Tag>
},
},
{
title: '创建时间', dataIndex: 'created_at', key: 'created_at',
render: (v: string) => v?.slice(0, 16), width: 170,
},
{ title: '状态', dataIndex: 'status', key: 'status', width: 100,
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
]
return (
<div>
<Title level={3} style={{ marginBottom: 24 }}>概览</Title>
<Row gutter={[24, 24]}>
<div style={{ marginBottom: 32 }}>
<Title level={2} style={{ margin: 0, fontWeight: 600 }}>{brand.brand_name}</Title>
<Text type="secondary" style={{ fontSize: 15 }}>管理控制台</Text>
</div>
<Row gutter={[28, 28]} style={{ marginBottom: 32 }}>
<Col xs={24} sm={8}>
<Card style={{ borderRadius: 10 }}>
<Statistic title="直播中" value={liveCount}
prefix={<SignalFilled style={{ color: '#5B8C5A' }} />} loading={loading} />
<Card style={{ borderRadius: 12, borderTop: '3px solid #5B8C5A' }}>
<Statistic title="直播中" value={liveCount} loading={loading}
prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 18 }} />} />
</Card>
</Col>
<Col xs={24} sm={8}>
<Card style={{ borderRadius: 10 }}>
<Statistic title="待开播" value={pendingCount}
prefix={<VideoCameraOutlined style={{ color: '#6B8CA8' }} />} loading={loading} />
<Card style={{ borderRadius: 12, borderTop: '3px solid #6B8CA8' }}>
<Statistic title="待开播" value={pendingCount} loading={loading}
prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 18 }} />} />
</Card>
</Col>
<Col xs={24} sm={8}>
<Card style={{ borderRadius: 10 }}>
<Statistic title="直播总数" value={streams.length}
prefix={<PlayCircleOutlined />} loading={loading} />
<Card style={{ borderRadius: 12, borderTop: '3px solid #C2693A' }}>
<Statistic title="直播总数" value={streams.length} loading={loading}
prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 18 }} />} />
</Card>
</Col>
</Row>
<Card title="最近直播" style={{ marginTop: 24, borderRadius: 10 }}>
<Card
title={<Title level={4} style={{ margin: 0, fontWeight: 600 }}>最近直播</Title>}
style={{ borderRadius: 12 }}
>
<Table dataSource={streams.slice(0, 10)} columns={columns}
rowKey="id" loading={loading} pagination={false} size="middle" />
rowKey="id" loading={loading} pagination={false} size="middle"
locale={{ emptyText: '暂无直播数据' }} />
</Card>
</div>
)
frontend/src/admin/pages/NodeManager.tsx
+83 -40
View File
@@ -1,22 +1,12 @@
import { useState, useEffect } from 'react'
import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Tooltip, Progress } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons'
import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Progress } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons'
import api from '../../api/client'
const { Title, Text } = Typography
interface NodeMetrics {
cpu_percent: number | null
memory_percent: number | null
bandwidth_mbps: number | null
active_connections: number | null
hls_readers: number | null
}
interface NodeInfo {
id: string; name: string; host: string; hls_port: number; api_port: number
weight: number; enabled: boolean; subnet: string; is_origin: boolean
online: boolean; metrics: NodeMetrics | null
}
interface NodeMetrics { cpu_percent: number | null; memory_percent: number | null; bandwidth_mbps: number | null; active_connections: number | null; hls_readers: number | null }
interface NodeInfo { id: string; name: string; host: string; hls_port: number; api_port: number; weight: number; enabled: boolean; subnet: string; is_origin: boolean; online: boolean; metrics: NodeMetrics | null }
interface StrategyInfo { strategy: string; multicast_enabled: boolean; multicast_available: boolean }
const strategyLabels: Record<string, string> = {
@@ -43,56 +33,109 @@ export default function NodeManager() {
}
async function toggleNode(nid: string, en: boolean) {
const node = nodes.find(n => n.id === nid); if (!node) return
try { await api.put(`/nodes/${nid}`, { weight: node.weight, enabled: en })
setNodes(p => p.map(n => n.id === nid ? { ...n, enabled: en } : n)); message.success('已更新') } catch { message.error('更新失败') }
try { await api.put(`/nodes/${nid}`, { weight: node.weight, enabled: en }); setNodes(p => p.map(n => n.id === nid ? { ...n, enabled: en } : n)); message.success('已更新') } catch { message.error('更新失败') }
}
const onlineCount = nodes.filter(n => n.online).length
const offlineCount = nodes.length - onlineCount
const columns = [
{ title: '状态', dataIndex: 'online', key: 'online', width: 70,
render: (v: boolean) => <Tag icon={v ? <CheckCircleOutlined /> : <CloseCircleOutlined />} color={v ? 'success' : 'error'} /> },
{ title: '名称', dataIndex: 'name', key: 'name' },
{
title: '', dataIndex: 'online', key: 'online', width: 48,
render: (v: boolean, r: NodeInfo) => (
<div style={{
width: 10, height: 10, borderRadius: '50%',
background: v ? '#5B8C5A' : '#B54A4A',
boxShadow: `0 0 6px ${v ? 'rgba(91,140,90,0.4)' : 'rgba(181,74,74,0.3)'}`,
}} />
),
},
{ title: '名称', dataIndex: 'name', key: 'name',
render: (v: string, r: NodeInfo) => <Text strong>{v}{r.is_origin ? <Tag color="warning" style={{ marginLeft: 8 }}>Origin</Tag> : null}</Text> },
{ title: '地址', dataIndex: 'host', key: 'host', width: 130 },
{ title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130, render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
{ title: 'CPU', key: 'cpu', width: 70,
{ title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130,
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
{
title: 'CPU', key: 'cpu', width: 80,
render: (_: any, r: NodeInfo) => r.metrics?.cpu_percent != null
? <Progress size="small" percent={Math.round(r.metrics.cpu_percent)} strokeColor="#C2693A" showInfo={false} />
: <Text type="secondary">--</Text> },
{ title: '内存', key: 'mem', width: 70,
? <Progress percent={Math.round(r.metrics.cpu_percent)} size="small" strokeColor={
r.metrics.cpu_percent > 80 ? '#B54A4A' : r.metrics.cpu_percent > 60 ? '#C2873A' : '#C2693A'
} showInfo={false} />
: <Text type="secondary">--</Text>,
},
{
title: '内存', key: 'mem', width: 80,
render: (_: any, r: NodeInfo) => r.metrics?.memory_percent != null
? <Progress size="small" percent={Math.round(r.metrics.memory_percent)} strokeColor="#C2693A" showInfo={false} />
: <Text type="secondary">--</Text> },
{ title: '带宽', key: 'bw', width: 80,
? <Progress percent={Math.round(r.metrics.memory_percent)} size="small" strokeColor={
r.metrics.memory_percent > 80 ? '#B54A4A' : r.metrics.memory_percent > 60 ? '#C2873A' : '#C2693A'
} showInfo={false} />
: <Text type="secondary">--</Text>,
},
{ title: '带宽', key: 'bw', width: 85,
render: (_: any, r: NodeInfo) => r.metrics?.bandwidth_mbps != null
? <Text style={{ fontSize: 12 }}>{r.metrics.bandwidth_mbps.toFixed(1)} Mbps</Text>
: <Text type="secondary">--</Text> },
{ title: '连接', key: 'conn', width: 65,
{ title: '连接', key: 'conn', width: 60,
render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null
? r.metrics.active_connections : <Text type="secondary">--</Text> },
{ title: '权重', dataIndex: 'weight', key: 'weight', width: 130,
{
title: '权重', dataIndex: 'weight', key: 'weight', width: 130,
render: (_: number, r: NodeInfo) => (
<InputNumber min={0} max={1000} value={r.weight} size="small" style={{ width: 80 }}
disabled={r.is_origin}
onChange={v => { const val = v || 0; setNodes(p => p.map(n => n.id === r.id ? { ...n, weight: val } : n)); updateWeight(r.id, val) }} />
) },
{ title: '启用', dataIndex: 'enabled', key: 'enabled', width: 65,
render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} /> },
),
},
{
title: '启用', dataIndex: 'enabled', key: 'enabled', width: 60,
render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} />,
},
]
return (
<div>
<Title level={3} style={{ marginBottom: 24 }}>边缘节点</Title>
<div style={{ marginBottom: 28 }}>
<Title level={3} style={{ margin: '0 0 4px', fontWeight: 600 }}>边缘节点</Title>
<Text type="secondary">管理 CDN 边缘节点集群，监控实时状态</Text>
</div>
{strategy && (
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="策略" value={strategyLabels[strategy.strategy] || strategy.strategy} /></Card></Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="组播" value={strategy.multicast_available ? '可用' : '不可用'} valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#999' }} /></Card></Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="节点总数" value={nodes.length} /></Card></Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="在线" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A' }} /></Card></Col>
<Row gutter={[24, 24]} style={{ marginBottom: 28 }}>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="均衡策略" value={strategyLabels[strategy.strategy] || strategy.strategy} valueStyle={{ fontSize: 22 }} />
</Card>
</Col>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="组播状态" value={strategy.multicast_available ? '可用' : '不可用'}
valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#B0ABA3', fontSize: 22 }} />
</Card>
</Col>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="在线节点" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A', fontSize: 22 }}
suffix={<Text style={{ fontSize: 14, color: '#8B867D' }}>/ {nodes.length}</Text>} />
</Card>
</Col>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="离线节点" value={offlineCount}
valueStyle={{ color: offlineCount > 0 ? '#B54A4A' : '#B0ABA3', fontSize: 22 }}
prefix={offlineCount > 0 ? <WarningOutlined style={{ fontSize: 18 }} /> : undefined} />
</Card>
</Col>
</Row>
)}
<Card title="节点列表" extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>} style={{ borderRadius: 10 }}>
<Table dataSource={nodes} columns={columns} rowKey="id" loading={loading} pagination={false} size="small" scroll={{ x: 1100 }} />
<Card
title={<Text strong style={{ fontSize: 16 }}>节点列表</Text>}
extra={<Button icon={<ReloadOutlined />} onClick={loadData} type="text">刷新</Button>}
style={{ borderRadius: 12 }}
>
<Table dataSource={nodes} columns={columns} rowKey="id" loading={loading}
pagination={false} size="small" scroll={{ x: 1150 }}
locale={{ emptyText: '暂无边缘节点' }} />
</Card>
</div>
)
frontend/src/admin/pages/StreamForm.tsx
+54 -30
View File
@@ -1,7 +1,7 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert } from 'antd'
import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert, Divider } from 'antd'
import { CopyOutlined, ArrowLeftOutlined, CheckCircleOutlined } from '@ant-design/icons'
import { createStream } from '../../api/streams'
const { Title, Text } = Typography
@@ -29,57 +29,81 @@ export default function StreamForm() {
if (result) {
return (
<div style={{ maxWidth: 640 }}>
<Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
<Alert type="success" showIcon message="推流信息" style={{ marginBottom: 24 }}
description={
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div style={{ maxWidth: 680 }}>
<div style={{ marginBottom: 28 }}>
<CheckCircleOutlined style={{ fontSize: 36, color: '#5B8C5A', marginBottom: 12 }} />
<Title level={3} style={{ margin: '0 0 8px', fontWeight: 600 }}>直播已创建</Title>
<Text type="secondary">将以下信息提供给推流端即可开始直播</Text>
</div>
<Card style={{ borderRadius: 12, marginBottom: 20 }}>
<Space direction="vertical" size={20} style={{ width: '100%' }}>
<div>
<Text strong>推流码:</Text>
<div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', borderRadius: 6, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
<Text type="secondary" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.5 }}>推流码</Text>
<div style={{
marginTop: 8, padding: '14px 18px',
background: '#F6F3ED', borderRadius: 8,
fontFamily: '"SF Mono", "Fira Code", "Cascadia Code", monospace',
fontSize: 14, wordBreak: 'break-all',
border: '1px solid #E6E0D6',
}}>
{result.stream_key}
</div>
</div>
<div>
<Text strong>RTMP 推流地址:</Text>
<div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', borderRadius: 6, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
<Text type="secondary" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.5 }}>RTMP 推流地址</Text>
<div style={{
marginTop: 8, padding: '14px 18px',
background: '#F6F3ED', borderRadius: 8,
fontFamily: '"SF Mono", "Fira Code", "Cascadia Code", monospace',
fontSize: 14, wordBreak: 'break-all',
border: '1px solid #E6E0D6',
}}>
{result.rtmp_url}
</div>
</div>
</Space>
}
/>
<Space>
<Button icon={<CopyOutlined />} onClick={() => {
</Card>
<Space size={12}>
<Button size="large" icon={<CopyOutlined />} onClick={() => {
navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`)
message.success('已复制')
}}>复制全部</Button>
<Button type="primary" onClick={() => navigate('/admin/streams')}>返回列表</Button>
message.success('已复制到剪贴板')
}}>复制全部信息</Button>
<Button type="primary" size="large" onClick={() => navigate('/admin/streams')}>返回列表</Button>
</Space>
</div>
)
}
return (
<div style={{ maxWidth: 640 }}>
<Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')} style={{ marginBottom: 16 }}>返回</Button>
<Card style={{ borderRadius: 10 }}>
<Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
<Form layout="vertical" onFinish={handleSubmit}>
<Form.Item name="title" label="直播标题" rules={[{ required: true, message: '请输入标题' }]}>
<Input placeholder="输入直播标题" size="large" />
<div style={{ maxWidth: 680 }}>
<Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')}
style={{ marginBottom: 16, color: '#5C5952' }}>返回列表</Button>
<Card style={{ borderRadius: 12 }}>
<Title level={3} style={{ marginBottom: 8, fontWeight: 600 }}>创建直播</Title>
<Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>填写直播信息，系统将生成推流码与 RTMP 地址</Text>
<Form layout="vertical" onFinish={handleSubmit} size="large">
<Form.Item name="title" label="直播标题"
rules={[{ required: true, message: '请输入直播标题' }]}>
<Input placeholder="输入直播标题" />
</Form.Item>
<Form.Item name="description" label="简介">
<TextArea rows={3} placeholder="可选简介" />
<TextArea rows={3} placeholder="直播内容简介（可选）" />
</Form.Item>
<Form.Item name="cover_url" label="封面图片地址">
<Form.Item name="cover_url" label="封面图片 URL">
<Input placeholder="https://..." />
</Form.Item>
<Form.Item name="scheduled_at" label="预定开播时间">
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择时间" />
<DatePicker showTime style={{ width: '100%' }} placeholder="选择日期（可选）" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading} size="large" block>创建直播</Button>
<Divider style={{ margin: '8px 0 24px' }} />
<Form.Item style={{ marginBottom: 0 }}>
<Button type="primary" htmlType="submit" loading={loading} style={{ height: 48 }} block>
创建直播
</Button>
</Form.Item>
</Form>
</Card>
frontend/src/admin/pages/StreamList.tsx
+55 -18
View File
@@ -1,10 +1,10 @@
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Table, Button, Tag, Space, Typography, message, Tooltip, Popconfirm } from 'antd'
import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined, EyeOutlined } from '@ant-design/icons'
import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '../../api/streams'
const { Title } = Typography
const { Title, Text } = Typography
const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: '待开播' },
@@ -36,27 +36,51 @@ export default function StreamList() {
}
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{ title: '状态', dataIndex: 'status', key: 'status', width: 100,
{ title: 'ID', dataIndex: 'id', key: 'id', width: 70 },
{
title: '标题', dataIndex: 'title', key: 'title', ellipsis: true,
render: (v: string, r: StreamInfo) => (
<Space direction="vertical" size={0}>
<Text strong>{v}</Text>
{r.description && <Text type="secondary" style={{ fontSize: 12 }} ellipsis>{r.description}</Text>}
</Space>
),
},
{ title: '状态', dataIndex: 'status', key: 'status', width: 90,
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
{ title: '推流码', dataIndex: 'stream_key', key: 'stream_key', width: 130,
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v.slice(0, 12)}...</Text> },
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 160 },
{
title: '操作', key: 'actions', width: 280,
render: (_: any, r: StreamInfo) => (
<Space size="small">
<Space size={4}>
<Tooltip title="复制推流码">
<Button size="small" icon={<LinkOutlined />}
onClick={() => { navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }}>
复制推流码
</Button>
onClick={e => { e.stopPropagation(); navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }} />
</Tooltip>
{r.status !== 'live' ? (
<Tooltip title="开播"><Button size="small" type="primary" icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} ghost /></Tooltip>
<Tooltip title="开播">
<Button size="small" type="primary" icon={<PlayCircleOutlined />} ghost
onClick={e => { e.stopPropagation(); handleGoLive(r.id) }} />
</Tooltip>
) : (
<Tooltip title="结束"><Button size="small" icon={<StopOutlined />} onClick={() => handleEnd(r.id)} danger /></Tooltip>
<Tooltip title="结束直播">
<Button size="small" icon={<StopOutlined />} danger
onClick={e => { e.stopPropagation(); handleEnd(r.id) }} />
</Tooltip>
)}
<Button size="small" onClick={() => window.open(`/watch/${r.id}`, '_blank')}>观看</Button>
<Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
<Button size="small" icon={<DeleteOutlined />} danger />
<Tooltip title="观看">
<Button size="small" icon={<EyeOutlined />}
onClick={e => { e.stopPropagation(); window.open(`/watch/${r.id}`, '_blank') }} />
</Tooltip>
<Popconfirm title="确定删除这条直播？" okText="删除" cancelText="取消" placement="left"
onConfirm={e => { e?.stopPropagation(); handleDelete(r.id) }}
onCancel={e => e?.stopPropagation()}>
<Tooltip title="删除">
<Button size="small" icon={<DeleteOutlined />} danger
onClick={e => e.stopPropagation()} />
</Tooltip>
</Popconfirm>
</Space>
),
@@ -66,10 +90,23 @@ export default function StreamList() {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
<Title level={3} style={{ margin: 0 }}>直播列表</Title>
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>创建直播</Button>
<div>
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播列表</Title>
<Text type="secondary" style={{ fontSize: 14 }}>管理所有直播流</Text>
</div>
<Table dataSource={streams} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 15 }} size="middle" />
<Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => navigate('/admin/streams/new')}>
创建直播
</Button>
</div>
<Table
dataSource={streams}
columns={columns}
rowKey="id"
loading={loading}
pagination={{ pageSize: 15, showSizeChanger: false }}
size="middle"
locale={{ emptyText: '暂无直播，点击上方按钮创建' }}
/>
</div>
)
}
frontend/src/theme/anthropic.ts
+47 -17
View File
@@ -2,11 +2,23 @@ import type { ThemeConfig } from 'antd'
const theme: ThemeConfig = {
token: {
fontFamily: `"Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif`,
fontFamily: `"Source Serif 4", "Noto Serif SC", "Noto Serif", Georgia, "Times New Roman", serif`,
fontSize: 15,
fontSizeLG: 16,
fontSizeXL: 20,
fontSizeHeading1: 36,
fontSizeHeading2: 28,
fontSizeHeading3: 22,
fontSizeHeading4: 18,
fontSizeHeading5: 16,
lineHeight: 1.65,
lineHeightLG: 1.6,
lineHeightSM: 1.5,
colorPrimary: '#C2693A',
colorPrimaryHover: '#A85730',
colorPrimaryActive: '#8E4726',
colorPrimaryBg: '#F6EEE5',
colorPrimaryBgHover: '#F0E2D4',
colorSuccess: '#5B8C5A',
colorWarning: '#C2873A',
colorError: '#B54A4A',
@@ -14,29 +26,42 @@ const theme: ThemeConfig = {
colorTextBase: '#141410',
colorTextSecondary: '#5C5952',
colorTextTertiary: '#8B867D',
colorBgBase: '#FBF9F6',
colorTextQuaternary: '#B0ABA3',
colorBgBase: '#FCFAF7',
colorBgContainer: '#FDFCFB',
colorBgElevated: '#FFFFFF',
colorBgLayout: '#F6F3ED',
colorBorder: '#E8E3D8',
colorBorder: '#E6E0D6',
colorBorderSecondary: '#F0EBE2',
colorFill: '#F0EBE2',
colorFillSecondary: '#F6F3ED',
colorFillTertiary: '#FCFAF7',
borderRadius: 6,
borderRadiusLG: 10,
borderRadiusSM: 4,
borderRadiusXS: 2,
wireframe: false,
lineHeight: 1.6,
fontWeightStrong: 600,
paddingLG: 32,
paddingMD: 24,
paddingSM: 16,
boxShadow: '0 1px 3px rgba(20,20,16,0.04), 0 1px 2px rgba(20,20,16,0.03)',
boxShadowSecondary: '0 6px 16px rgba(20,20,16,0.05), 0 2px 6px rgba(20,20,16,0.03)',
boxShadowTertiary: '0 12px 32px rgba(20,20,16,0.08), 0 4px 12px rgba(20,20,16,0.04)',
paddingXS: 12,
paddingXXS: 8,
controlHeight: 40,
controlHeightLG: 48,
controlHeightSM: 32,
boxShadow: '0 1px 3px rgba(20,20,16,0.03), 0 1px 2px rgba(20,20,16,0.02)',
boxShadowSecondary: '0 4px 14px rgba(20,20,16,0.04), 0 2px 6px rgba(20,20,16,0.02)',
boxShadowTertiary: '0 10px 30px rgba(20,20,16,0.06), 0 4px 10px rgba(20,20,16,0.03)',
motionDurationSlow: '0.25s',
motionDurationMid: '0.18s',
motionDurationFast: '0.1s',
},
components: {
Layout: {
headerBg: '#FBF9F6',
headerBg: '#FCFAF7',
headerHeight: 60,
headerPadding: '0 40px',
headerPadding: '0 48px',
siderBg: '#FBF9F6',
bodyBg: '#F6F3ED',
},
@@ -46,8 +71,10 @@ const theme: ThemeConfig = {
itemSelectedColor: '#141410',
itemActiveBg: '#F0EBE2',
itemColor: '#5C5952',
itemHeight: 42,
itemHeight: 44,
fontSize: 14,
iconSize: 18,
collapsedIconSize: 18,
},
Card: {
paddingLG: 28,
@@ -57,28 +84,31 @@ const theme: ThemeConfig = {
Button: {
borderRadius: 6,
fontWeight: 500,
controlHeight: 38,
controlHeightLG: 46,
controlHeight: 40,
controlHeightLG: 48,
controlHeightSM: 32,
primaryShadow: '0 2px 4px rgba(194,105,58,0.12)',
primaryShadow: '0 2px 6px rgba(194,105,58,0.1)',
},
Input: {
borderRadius: 6,
activeBorderColor: '#C2693A',
hoverBorderColor: '#D4956B',
controlHeight: 38,
controlHeightLG: 46,
controlHeight: 40,
controlHeightLG: 48,
},
Select: {
borderRadius: 6,
activeBorderColor: '#C2693A',
controlHeight: 38,
controlHeight: 40,
},
Table: {
headerBg: '#F6F3ED',
headerColor: '#5C5952',
rowHoverBg: '#F3EFE7',
borderColor: '#E8E3D8',
borderColor: '#E6E0D6',
headerBorderRadius: 8,
cellPaddingBlock: 12,
cellPaddingInline: 16,
},
Modal: {
borderRadiusLG: 12,
frontend/src/viewer/pages/HomePage.tsx
+71 -37
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Row, Col, Card, Typography, Tag, Skeleton, Empty } from 'antd'
import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Divider } from 'antd'
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext'
@@ -8,7 +8,7 @@ import { useBrand } from '../../brand/BrandContext'
const { Title, Text } = Typography
const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
live: { color: 'red', label: 'LIVE', icon: <FireOutlined /> },
pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
ended: { color: 'default', label: '已结束', icon: null },
cancelled: { color: 'default', label: '已取消', icon: null },
@@ -30,86 +30,115 @@ export default function HomePage() {
})
return (
<div style={{ minHeight: '100vh', background: '#F6F3ED' }}>
<div style={{ minHeight: '100vh', background: '#F6F3ED', display: 'flex', flexDirection: 'column' }}>
<div style={{
background: '#FBF9F6',
borderBottom: '1px solid #E8E3D8',
padding: '56px 48px 48px',
background: 'linear-gradient(180deg, #FCFAF7 0%, #F6F3ED 100%)',
borderBottom: '1px solid #E6E0D6',
padding: '64px 48px 56px',
}}>
<div style={{ maxWidth: 1280, margin: '0 auto' }}>
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
{brand.brand_logo_url && (
<img src={brand.brand_logo_url} alt={brand.brand_name}
style={{ height: 40, marginBottom: 16, display: 'block' }} />
style={{ height: 44, marginBottom: 20 }} />
)}
<Title level={1} style={{
margin: 0, fontWeight: 600, letterSpacing: -1, fontSize: 36,
<Title style={{
margin: 0, fontWeight: 600, fontSize: 40, letterSpacing: -1.5, lineHeight: 1.2,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}>
{brand.brand_name}
</Title>
{brand.brand_tagline && (
<Text type="secondary" style={{ fontSize: 17, marginTop: 8, display: 'block', fontWeight: 400 }}>
<Text style={{ fontSize: 18, marginTop: 12, display: 'block', fontWeight: 400, color: '#5C5952' }}>
{brand.brand_tagline}
</Text>
)}
</div>
</div>
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px' }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 24 }}>
<div style={{ flex: 1, maxWidth: 1200, margin: '0 auto', width: '100%', padding: '44px 48px' }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 28 }}>
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播频道</Title>
<Text type="secondary">{sorted.length} 个直播</Text>
<Text type="secondary" style={{ fontSize: 15 }}>共 {sorted.length} 个</Text>
</div>
{loading ? (
<Row gutter={[24, 24]}>
{[1,2,3,4,5,6].map(i => (
<Row gutter={[28, 28]}>
{[1, 2, 3, 4, 5, 6].map(i => (
<Col key={i} xs={24} sm={12} md={8} lg={8}>
<Card style={{ borderRadius: 10 }}><Skeleton active /></Card>
<Card style={{ borderRadius: 12 }}><Skeleton active paragraph={{ rows: 3 }} /></Card>
</Col>
))}
</Row>
) : sorted.length === 0 ? (
<Empty description="暂无直播" style={{ marginTop: 80 }} />
<div style={{
textAlign: 'center', padding: '80px 0',
background: '#FCFAF7', borderRadius: 12, border: '1px solid #E6E0D6',
}}>
<VideoCameraOutlined style={{ fontSize: 48, color: '#B0ABA3', marginBottom: 16 }} />
<Title level={4} type="secondary" style={{ fontWeight: 400 }}>暂无直播</Title>
<Text type="secondary">当前没有正在播出或排期的直播节目</Text>
</div>
) : (
<Row gutter={[24, 24]}>
<Row gutter={[28, 28]}>
{sorted.map(s => {
const meta = statusMeta[s.status] ?? statusMeta.pending
const isLive = s.status === 'live'
return (
<Col key={s.id} xs={24} sm={12} md={8} lg={8}>
<Card hoverable style={{ overflow: 'hidden', borderRadius: 10, transition: 'box-shadow 0.2s, transform 0.2s' }}
<Card
hoverable
style={{
overflow: 'hidden',
borderRadius: 12,
borderColor: isLive ? '#E0C8B6' : '#E6E0D6',
transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
}}
bodyStyle={{ padding: '20px 24px' }}
cover={
<div style={{
height: 180, position: 'relative',
height: 192,
position: 'relative',
background: s.cover_url
? `url(${s.cover_url}) center/cover no-repeat`
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #2B241C 100%)',
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #3D3226 100%)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
{!s.cover_url && <VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.15)', fontSize: 52 }} />}
{s.status === 'live' && (
<div style={{ position: 'absolute', top: 12, left: 12 }}>
<Tag color="red" style={{ margin: 0, fontWeight: 600, border: 0, fontSize: 12 }}>
{meta.icon} {meta.label}
</Tag>
{!s.cover_url && (
<VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.08)', fontSize: 64 }} />
)}
{isLive && (
<div style={{
position: 'absolute', top: 14, left: 14,
display: 'flex', alignItems: 'center', gap: 6,
background: '#C62828', color: '#fff',
padding: '3px 10px', borderRadius: 4,
fontSize: 12, fontWeight: 600, letterSpacing: 0.5,
}}>
<span style={{
width: 8, height: 8, borderRadius: '50%',
background: '#fff', display: 'inline-block',
animation: 'pulse 2s infinite',
}} />
LIVE
</div>
)}
{s.status !== 'live' && (
{!isLive && (
<div style={{ position: 'absolute', bottom: 12, left: 12 }}>
<Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0, fontSize: 12 }}>
<Tag color={meta.color} style={{ margin: 0, fontWeight: 500, border: 0, fontSize: 12 }}>
{meta.icon} {meta.label}
</Tag>
</div>
)}
</div>
}
bodyStyle={{ padding: '18px 22px' }}
onClick={() => navigate(`/watch/${s.id}`)}
>
<Card.Meta
title={<Text strong style={{ fontSize: 15 }} ellipsis>{s.title}</Text>}
description={<Text type="secondary" ellipsis style={{ fontSize: 13 }}>{s.description || '暂无简介'}</Text>}
/>
<Text strong style={{ fontSize: 16, display: 'block', marginBottom: 4 }} ellipsis>
{s.title}
</Text>
<Text type="secondary" style={{ fontSize: 13, lineHeight: 1.5 }} ellipsis>
{s.description || '暂无简介'}
</Text>
</Card>
</Col>
)
@@ -118,8 +147,13 @@ export default function HomePage() {
)}
</div>
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px 48px', textAlign: 'center' }}>
<Text type="secondary" style={{ fontSize: 13 }}>
<div style={{
borderTop: '1px solid #E6E0D6',
padding: '24px 48px',
textAlign: 'center',
background: '#FCFAF7',
}}>
<Text style={{ fontSize: 13, color: '#8B867D' }}>
{brand.brand_name} &copy; {new Date().getFullYear()}
</Text>
</div>
frontend/src/viewer/pages/WatchPage.tsx
+63 -20
View File
@@ -68,41 +68,84 @@ export default function WatchPage() {
}
}, [activeLine, activeQuality, info])
if (loading) return <div style={{ minHeight: '100vh', background: '#000' }}><Skeleton active /></div>
if (!info) return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}><Empty description="未找到该直播" /></div>
useEffect(() => { document.title = info ? `${info.title} - ${brand.brand_name}` : brand.brand_name }, [info, brand])
const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
if (loading) return (
<div style={{ minHeight: '100vh', background: '#1A1815', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Spin size="large" />
</div>
)
if (!info) return (
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}>
<Empty description="未找到该直播" />
</div>
)
const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
return (
<div style={{ minHeight: '100vh', background: '#141410', display: 'flex', flexDirection: 'column' }}>
<div style={{ height: 56, minHeight: 56, background: 'rgba(20,20,16,0.97)', borderBottom: '1px solid rgba(232,227,216,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px' }}>
<Space>
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }} onClick={() => navigate('/')}>返回</Button>
<div style={{ minHeight: '100vh', background: '#1A1815', display: 'flex', flexDirection: 'column' }}>
<div style={{
height: 56, minHeight: 56,
background: 'rgba(26,24,21,0.98)',
borderBottom: '1px solid rgba(230,224,214,0.06)',
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
padding: '0 28px',
backdropFilter: 'blur(12px)',
}}>
<Space size={16}>
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }}
onClick={() => navigate('/')}>
{brand.brand_name}
</Button>
<div style={{ width: 1, height: 20, background: 'rgba(230,224,214,0.1)' }} />
<div>
<Title level={5} style={{ color: '#E8E3D8', margin: 0, fontWeight: 600 }}>{info.title}</Title>
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>{statusLabel}</Tag>
<Text style={{ color: '#E6E0D6', fontSize: 15, fontWeight: 500 }}>{info.title}</Text>
<Tag color={info.status === 'live' ? 'green' : 'default'}
style={{ marginLeft: 10, fontWeight: 600, fontSize: 11 }}>
{statusLabel}
</Tag>
</div>
</Space>
<Space size="middle">
<div style={{ color: '#8B867D', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952' }} />
<Space size={16}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#8B867D', fontSize: 13 }}>
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952', fontSize: 12 }} />
{info.multicast_available ? '组播' : '单播'}
</div>
<Select value={activeQuality} onChange={setActiveQuality} style={{ width: 110 }} size="small"
<Select value={activeQuality} onChange={setActiveQuality} style={{ width: 100 }} size="small"
options={info.qualities.map(q => ({ value: q.label, label: q.label }))} placeholder="清晰度" />
<Select value={activeLine} onChange={setActiveLine} style={{ width: 160 }} size="small"
options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name} (${l.weight})` }))}
options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name}` }))}
prefix={<WifiOutlined />} placeholder="线路" />
</Space>
</div>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
<div style={{ width: '100%', maxWidth: 1280, aspectRatio: '16/9', maxHeight: 'calc(100vh - 56px - 48px)', background: '#000', position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
<video ref={videoRef} controls autoPlay playsInline style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
<div style={{
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
padding: '32px',
}}>
<div style={{
width: '100%', maxWidth: 1280,
aspectRatio: '16 / 9', maxHeight: 'calc(100vh - 120px)',
background: '#0A0A08', position: 'relative',
borderRadius: 10, overflow: 'hidden',
boxShadow: '0 8px 40px rgba(0,0,0,0.4)',
}}>
<video ref={videoRef} controls autoPlay playsInline
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
{info.status !== 'live' && (
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)' }}>
<Space direction="vertical" align="center">
<div style={{
position: 'absolute', inset: 0,
display: 'flex', alignItems: 'center', justifyContent: 'center',
background: 'rgba(10,10,8,0.9)',
}}>
<Space direction="vertical" align="center" size={16}>
<Spin size="large" />
<Text style={{ color: 'rgba(232,227,216,0.6)', fontSize: 16, fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
<Text style={{
color: '#8B867D', fontSize: 17,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}>
等待主播开播...
</Text>
</Space>