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

UI彻底重做: 全新设计语言, 纯手工精调

Browse Source 
设计系统:
- CSS变量体系: 暖纸底色(#F9F7F4), 6级灰阶, 5级阴影
- 字体节奏: clamp响应式字号, -0.02em字间距
- 间距韵律: 4-128px 8级递进

首页:
- 96px大留白英雄区, clamp(36px,5vw,56px)巨型标题
- 200px暗色封面卡片(#2C2824)
- LIVE红点脉动标签, 待开播黑底白字徽章
- hover抬升2px + 阴影, 淡棕描边高亮

管理页:
- stat卡片: 1px边框+3px彩色顶线
- 表格卡片化: borderRadius 12, 统一白底+边框
- 表单/设置: 统一圆角8px, 大内边距36px

播放页:
- #1A1814暗底, 毛玻璃顶栏
- 视频圆角12px + boxShadow景深
- document.title动态标题

登录页: 56px内边距, 品牌居中, 返回链接
This commit is contained in:
admin committed 2026-08-10 17:44:24 +08:00
1 parent f0b8c2d64f
commit 2685ebdd47
11 files changed
+458 -525
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/admin/AdminLayout.tsx
+15 -19
View File
@@ -26,51 +26,47 @@ export default function AdminLayout() {
const location = useLocation() const location = useLocation()
const selectedKey = menuItems.find( const selectedKey = menuItems.find(
(item) => location.pathname === item.key || (location.pathname === '/' && item.key === '/admin') item => location.pathname === item.key || (location.pathname === '/' && item.key === '/admin')
)?.key || '/admin' )?.key || '/admin'
const handleLogout = () => { const handleLogout = () => { clearToken(); navigate('/admin/login') }
clearToken()
navigate('/admin/login')
}
return ( return (
<Layout style={{ minHeight: '100vh' }}> <Layout style={{ minHeight: '100vh' }}>
<Sider <Sider
collapsible collapsed={collapsed} onCollapse={setCollapsed} collapsible collapsed={collapsed} onCollapse={setCollapsed}
width={220} width={220}
style={{ borderRight: '1px solid #E8E3D8', background: '#FBF9F6' }} style={{
borderRight: '1px solid #EBE5DB',
background: '#fff',
}}
> >
<div style={{ <div style={{
height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
borderBottom: '1px solid #E8E3D8', borderBottom: '1px solid #EBE5DB',
}}> }}>
<Text strong style={{ <Text strong style={{
fontSize: collapsed ? 14 : 18, letterSpacing: -0.5, fontSize: collapsed ? 14 : 17, letterSpacing: '-0.02em',
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif', fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
color: '#C2693A', color: '#C2693A',
}}> }}>
{collapsed ? brand.brand_name.slice(0, 2) : brand.brand_name} {collapsed ? brand.brand_name.slice(0, 2) : brand.brand_name}
</Text> </Text>
</div> </div>
<Menu <Menu mode="inline" selectedKeys={[selectedKey]} items={menuItems}
mode="inline" selectedKeys={[selectedKey]} items={menuItems}
onClick={({ key }) => navigate(key)} onClick={({ key }) => navigate(key)}
style={{ border: 'none', marginTop: 8 }} style={{ border: 'none', marginTop: 8 }} />
/>
</Sider> </Sider>
<Layout> <Layout>
<Header style={{ <Header style={{
background: '#FBF9F6', borderBottom: '1px solid #E8E3D8', background: '#fff', borderBottom: '1px solid #EBE5DB',
display: 'flex', justifyContent: 'space-between', alignItems: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
padding: '0 40px', padding: '0 48px',
}}> }}>
<Text type="secondary" style={{ fontSize: 13 }}>{brand.brand_tagline}</Text> <Text style={{ color: '#949088', fontSize: 13 }}>{brand.brand_tagline}</Text>
<Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}> <Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>退出登录</Button>
退出登录
</Button>
</Header> </Header>
<Content style={{ padding: 32, overflow: 'auto' }}> <Content style={{ padding: 40, overflow: 'auto' }}>
<Outlet /> <Outlet />
</Content> </Content>
</Layout> </Layout>
frontend/src/admin/LoginPage.tsx
+28 -55
View File
@@ -1,6 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { Card, Form, Input, Button, Typography, message, Space, Divider } from 'antd' import { Form, Input, Button, Typography, message } from 'antd'
import { LockOutlined, ArrowLeftOutlined } from '@ant-design/icons' import { LockOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { login } from '../api/auth' import { login } from '../api/auth'
import { useBrand } from '../brand/BrandContext' import { useBrand } from '../brand/BrandContext'
@@ -14,89 +14,62 @@ export default function LoginPage() {
const handleSubmit = async (values: { password: string }) => { const handleSubmit = async (values: { password: string }) => {
setLoading(true) setLoading(true)
try { try { await login(values.password); message.success('登录成功'); navigate('/admin') }
await login(values.password) catch { message.error('密码错误') }
message.success('登录成功') finally { setLoading(false) }
navigate('/admin')
} catch {
message.error('密码错误')
} finally {
setLoading(false)
}
} }
return ( return (
<div style={{ <div style={{
minHeight: '100vh', minHeight: '100vh',
display: 'flex', display: 'flex', alignItems: 'center', justifyContent: 'center',
alignItems: 'center', background: '#F9F7F4',
justifyContent: 'center',
background: '#F6F3ED',
padding: 24,
}}> }}>
<Card <div style={{ width: '100%', maxWidth: 420, padding: 24 }}>
style={{ <div style={{
width: 420, background: '#fff',
borderRadius: 14, borderRadius: 14,
boxShadow: '0 12px 48px rgba(20,20,16,0.07), 0 2px 8px rgba(20,20,16,0.04)', border: '1px solid #EBE5DB',
border: '1px solid #E6E0D6', padding: 56,
}}
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: 40, marginBottom: 16 }} />
)}
<Title style={{
margin: '0 0 8px', fontWeight: 600, fontSize: 28, letterSpacing: -1,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}> }}>
<div style={{ textAlign: 'center', marginBottom: 40 }}>
{brand.brand_logo_url && (
<img src={brand.brand_logo_url} alt={brand.brand_name} style={{ height: 36, marginBottom: 20 }} />
)}
<Title style={{ margin: '0 0 8px', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>
{brand.brand_name} {brand.brand_name}
</Title> </Title>
<Text type="secondary" style={{ fontSize: 15 }}> <Text style={{ color: '#5E5A52', fontSize: 15 }}>
{brand.brand_tagline || '管理控制台'} {brand.brand_tagline || '管理控制台'}
</Text> </Text>
</div> </div>
<Form onFinish={handleSubmit} layout="vertical" size="large"> <Form onFinish={handleSubmit} layout="vertical" size="large">
<Form.Item <Form.Item name="password" rules={[{ required: true, message: '请输入管理员密码' }]}
name="password" style={{ marginBottom: 28 }}>
rules={[{ required: true, message: '请输入管理员密码' }]}
style={{ marginBottom: 24 }}
>
<Input.Password <Input.Password
prefix={<LockOutlined style={{ color: '#8B867D' }} />} prefix={<LockOutlined style={{ color: '#949088' }} />}
placeholder="管理员密码" placeholder="管理员密码"
style={{ height: 48 }} style={{ height: 48, borderRadius: 8 }}
/> />
</Form.Item> </Form.Item>
<Form.Item style={{ marginBottom: 0 }}> <Form.Item style={{ marginBottom: 0 }}>
<Button <Button type="primary" htmlType="submit" loading={loading} block
type="primary" style={{ height: 48, fontSize: 16, fontWeight: 600, borderRadius: 8 }}>
htmlType="submit"
loading={loading}
block
style={{ height: 48, fontSize: 16, fontWeight: 600 }}
>
登录管理控制台 登录管理控制台
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center', marginTop: 24 }}>
<Button <Button type="text" icon={<ArrowLeftOutlined />}
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/')} onClick={() => navigate('/')}
style={{ color: '#8B867D', fontSize: 13 }} style={{ color: '#949088', fontSize: 13 }}>
>
返回首页 返回首页
</Button> </Button>
</div> </div>
</Space> </div>
</Card> </div>
</div> </div>
) )
} }
frontend/src/admin/pages/Dashboard.tsx
+37 -25
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Row, Col, Card, Statistic, Typography, Table, Tag, Skeleton } from 'antd' import { Row, Col, Statistic, Table, Tag, Typography } from 'antd'
import { SignalFilled, ClockCircleOutlined, PlayCircleOutlined } from '@ant-design/icons' import { SignalFilled, ClockCircleOutlined, PlayCircleOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams' import { fetchStreams, type StreamInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext' import { useBrand } from '../../brand/BrandContext'
@@ -11,11 +11,7 @@ export default function Dashboard() {
const [streams, setStreams] = useState<StreamInfo[]>([]) const [streams, setStreams] = useState<StreamInfo[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
useEffect(() => { useEffect(() => { loadData(); const t = setInterval(loadData, 10000); return () => clearInterval(t) }, [])
loadData()
const timer = setInterval(loadData, 10000)
return () => clearInterval(timer)
}, [])
async function loadData() { async function loadData() {
try { setStreams(await fetchStreams()) } catch { /* */ } try { setStreams(await fetchStreams()) } catch { /* */ }
@@ -34,47 +30,63 @@ export default function Dashboard() {
const columns = [ const columns = [
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true }, { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, { title: '状态', dataIndex: 'status', key: 'status', width: 90,
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> }, 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: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
] ]
return ( return (
<div> <div>
<div style={{ marginBottom: 32 }}> <div style={{ marginBottom: 36 }}>
<Title level={2} style={{ margin: 0, fontWeight: 600 }}>{brand.brand_name}</Title> <Title level={1} style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 32, letterSpacing: '-0.03em' }}>
<Text type="secondary" style={{ fontSize: 15 }}>管理控制台</Text> {brand.brand_name}
</Title>
<Text style={{ color: '#5E5A52', fontSize: 15 }}>管理控制台</Text>
</div> </div>
<Row gutter={[28, 28]} style={{ marginBottom: 32 }}> <Row gutter={[24, 24]} style={{ marginBottom: 36 }}>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card style={{ borderRadius: 12, borderTop: '3px solid #5B8C5A' }}> <div style={{
background: '#fff', borderRadius: 12, padding: '28px 32px',
border: '1px solid #EBE5DB',
borderTop: '3px solid #5B8C5A',
}}>
<Statistic title="直播中" value={liveCount} loading={loading} <Statistic title="直播中" value={liveCount} loading={loading}
prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 18 }} />} /> prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 20 }} />} />
</Card> </div>
</Col> </Col>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card style={{ borderRadius: 12, borderTop: '3px solid #6B8CA8' }}> <div style={{
background: '#fff', borderRadius: 12, padding: '28px 32px',
border: '1px solid #EBE5DB',
borderTop: '3px solid #6B8CA8',
}}>
<Statistic title="待开播" value={pendingCount} loading={loading} <Statistic title="待开播" value={pendingCount} loading={loading}
prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 18 }} />} /> prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 20 }} />} />
</Card> </div>
</Col> </Col>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card style={{ borderRadius: 12, borderTop: '3px solid #C2693A' }}> <div style={{
background: '#fff', borderRadius: 12, padding: '28px 32px',
border: '1px solid #EBE5DB',
borderTop: '3px solid #C2693A',
}}>
<Statistic title="直播总数" value={streams.length} loading={loading} <Statistic title="直播总数" value={streams.length} loading={loading}
prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 18 }} />} /> prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 20 }} />} />
</Card> </div>
</Col> </Col>
</Row> </Row>
<Card <div style={{
title={<Title level={4} style={{ margin: 0, fontWeight: 600 }}>最近直播</Title>} background: '#fff', borderRadius: 12,
style={{ borderRadius: 12 }} border: '1px solid #EBE5DB',
> padding: '28px 32px',
}}>
<Title level={4} style={{ margin: '0 0 20px', fontWeight: 600 }}>最近直播</Title>
<Table dataSource={streams.slice(0, 10)} columns={columns} <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: '暂无直播数据' }} /> locale={{ emptyText: '暂无直播数据' }} />
</Card> </div>
</div> </div>
) )
} }
frontend/src/admin/pages/NodeManager.tsx
+52 -77
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Progress } from 'antd' import { Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Progress } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons' import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons'
import api from '../../api/client' import api from '../../api/client'
@@ -9,9 +9,7 @@ interface NodeMetrics { cpu_percent: number | null; memory_percent: number | nul
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 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 } interface StrategyInfo { strategy: string; multicast_enabled: boolean; multicast_available: boolean }
const strategyLabels: Record<string, string> = { const sL: Record<string, string> = { 'subnet': '子网优先', 'round-robin': '轮询', 'weighted': '权重', 'least-conn': '最少连接' }
'subnet': '子网优先', 'round-robin': '轮询', 'weighted': '权重', 'least-conn': '最少连接',
}
export default function NodeManager() { export default function NodeManager() {
const [nodes, setNodes] = useState<NodeInfo[]>([]) const [nodes, setNodes] = useState<NodeInfo[]>([])
@@ -22,10 +20,8 @@ export default function NodeManager() {
async function loadData() { async function loadData() {
setLoading(true) setLoading(true)
try { try { const [nr, sr] = await Promise.all([api.get('/nodes'), api.get('/nodes/strategy')]); setNodes(nr.data); setStrategy(sr.data) }
const [nr, sr] = await Promise.all([api.get('/nodes'), api.get('/nodes/strategy')]) catch { message.error('加载失败') }
setNodes(nr.data); setStrategy(sr.data)
} catch { message.error('加载失败') }
setLoading(false) setLoading(false)
} }
async function updateWeight(nid: string, w: number) { async function updateWeight(nid: string, w: number) {
@@ -33,110 +29,89 @@ export default function NodeManager() {
} }
async function toggleNode(nid: string, en: boolean) { async function toggleNode(nid: string, en: boolean) {
const node = nodes.find(n => n.id === nid); if (!node) return 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)) } catch { message.error('更新失败') }
} }
const onlineCount = nodes.filter(n => n.online).length const onlineCount = nodes.filter(n => n.online).length
const offlineCount = nodes.length - onlineCount
const columns = [ const columns = [
{ {
title: '', dataIndex: 'online', key: 'online', width: 48, title: '', dataIndex: 'online', key: 'online', width: 40,
render: (v: boolean, r: NodeInfo) => ( render: (v: boolean) => (
<div style={{ <div style={{ width: 10, height: 10, borderRadius: '50%', background: v ? '#5B8C5A' : '#B54A4A',
width: 10, height: 10, borderRadius: '50%', boxShadow: `0 0 6px ${v ? 'rgba(91,140,90,0.3)' : 'rgba(181,74,74,0.3)'}` }} />
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', { 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> }, render: (v: string, r: NodeInfo) => <span><Text strong>{v}</Text>{r.is_origin && <Tag color="warning" style={{ marginLeft: 8 }}>Origin</Tag>}</span> },
{ title: '地址', dataIndex: 'host', key: 'host', width: 130 }, { title: '地址', dataIndex: 'host', key: 'host', width: 130 },
{ title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130, { title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130, render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> }, { title: 'CPU', key: 'cpu', width: 80,
{
title: 'CPU', key: 'cpu', width: 80,
render: (_: any, r: NodeInfo) => r.metrics?.cpu_percent != null render: (_: any, r: NodeInfo) => r.metrics?.cpu_percent != null
? <Progress percent={Math.round(r.metrics.cpu_percent)} size="small" strokeColor={ ? <Progress percent={Math.round(r.metrics.cpu_percent)} size="small" showInfo={false}
r.metrics.cpu_percent > 80 ? '#B54A4A' : r.metrics.cpu_percent > 60 ? '#C2873A' : '#C2693A' strokeColor={r.metrics.cpu_percent > 80 ? '#B54A4A' : r.metrics.cpu_percent > 60 ? '#C28B3A' : '#C2693A'} />
} showInfo={false} />
: <Text type="secondary">--</Text>,
},
{
title: '内存', key: 'mem', width: 80,
render: (_: any, r: NodeInfo) => r.metrics?.memory_percent != null
? <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> }, : <Text type="secondary">--</Text> },
{ title: '内存', key: 'mem', width: 80,
render: (_: any, r: NodeInfo) => r.metrics?.memory_percent != null
? <Progress percent={Math.round(r.metrics.memory_percent)} size="small" showInfo={false}
strokeColor={r.metrics.memory_percent > 80 ? '#B54A4A' : r.metrics.memory_percent > 60 ? '#C28B3A' : '#C2693A'} />
: <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: 60, { title: '连接', key: 'conn', width: 60,
render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null ? r.metrics.active_connections : <Text type="secondary">--</Text> },
? r.metrics.active_connections : <Text type="secondary">--</Text> }, { title: '权重', dataIndex: 'weight', key: 'weight', width: 120,
{ render: (_: number, r: NodeInfo) => <InputNumber min={0} max={1000} value={r.weight} size="small" style={{ width: 80 }} disabled={r.is_origin}
title: '权重', dataIndex: 'weight', key: 'weight', width: 130, onChange={v => { const val = v || 0; setNodes(p => p.map(n => n.id === r.id ? { ...n, weight: val } : n)); updateWeight(r.id, val) }} /> },
render: (_: number, r: NodeInfo) => ( { title: '启用', dataIndex: 'enabled', key: 'enabled', width: 60,
<InputNumber min={0} max={1000} value={r.weight} size="small" style={{ width: 80 }} render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} /> },
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: 60,
render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} />,
},
] ]
return ( return (
<div> <div>
<div style={{ marginBottom: 28 }}> <div style={{ marginBottom: 32 }}>
<Title level={3} style={{ margin: '0 0 4px', fontWeight: 600 }}>边缘节点</Title> <Title level={2} style={{ margin: '0 0 4px', fontWeight: 600, fontSize: 28 }}>边缘节点</Title>
<Text type="secondary">管理 CDN 边缘节点集群，监控实时状态</Text> <Text style={{ color: '#949088' }}>管理 CDN 边缘节点集群，监控实时状态</Text>
</div> </div>
{strategy && ( {strategy && (
<Row gutter={[24, 24]} style={{ marginBottom: 28 }}> <Row gutter={[24, 24]} style={{ marginBottom: 32 }}>
<Col xs={24} sm={6}> <Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
<Statistic title="均衡策略" value={strategyLabels[strategy.strategy] || strategy.strategy} valueStyle={{ fontSize: 22 }} /> <Statistic title="均衡策略" value={sL[strategy.strategy] || strategy.strategy} valueStyle={{ fontSize: 20 }} />
</Card> </div>
</Col> </Col>
<Col xs={24} sm={6}> <Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
<Statistic title="组播状态" value={strategy.multicast_available ? '可用' : '不可用'} <Statistic title="组播状态" value={strategy.multicast_available ? '可用' : '不可用'}
valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#B0ABA3', fontSize: 22 }} /> valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#949088', fontSize: 20 }} />
</Card> </div>
</Col> </Col>
<Col xs={24} sm={6}> <Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
<Statistic title="在线节点" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A', fontSize: 22 }} <Statistic title="在线节点" value={onlineCount} suffix={<Text style={{ fontSize: 14, color: '#949088' }}>/ {nodes.length}</Text>}
suffix={<Text style={{ fontSize: 14, color: '#8B867D' }}>/ {nodes.length}</Text>} /> valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A', fontSize: 20 }} />
</Card> </div>
</Col> </Col>
<Col xs={24} sm={6}> <Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
<Statistic title="离线节点" value={offlineCount} <Statistic title="离线节点" value={nodes.length - onlineCount}
valueStyle={{ color: offlineCount > 0 ? '#B54A4A' : '#B0ABA3', fontSize: 22 }} valueStyle={{ color: (nodes.length - onlineCount) > 0 ? '#B54A4A' : '#949088', fontSize: 20 }}
prefix={offlineCount > 0 ? <WarningOutlined style={{ fontSize: 18 }} /> : undefined} /> prefix={(nodes.length - onlineCount) > 0 ? <WarningOutlined style={{ fontSize: 18 }} /> : undefined} />
</Card> </div>
</Col> </Col>
</Row> </Row>
)} )}
<Card <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '8px 8px 0' }}>
title={<Text strong style={{ fontSize: 16 }}>节点列表</Text>} <div style={{ padding: '16px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
extra={<Button icon={<ReloadOutlined />} onClick={loadData} type="text">刷新</Button>} <Text strong style={{ fontSize: 16 }}>节点列表</Text>
style={{ borderRadius: 12 }} <Button icon={<ReloadOutlined />} onClick={loadData} type="text">刷新</Button>
> </div>
<Table dataSource={nodes} columns={columns} rowKey="id" loading={loading} <Table dataSource={nodes} columns={columns} rowKey="id" loading={loading}
pagination={false} size="small" scroll={{ x: 1150 }} pagination={false} size="small" scroll={{ x: 1150 }}
locale={{ emptyText: '暂无边缘节点' }} /> locale={{ emptyText: '暂无边缘节点' }} />
</Card> </div>
</div> </div>
) )
} }
frontend/src/admin/pages/Settings.tsx
+24 -44
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Card, Select, Switch, Form, Input, Button, Typography, message } from 'antd' import { Select, Switch, Form, Input, Button, Typography, message } from 'antd'
import api from '../../api/client' import api from '../../api/client'
import { useBrand } from '../../brand/BrandContext' import { useBrand } from '../../brand/BrandContext'
@@ -14,12 +14,10 @@ const strategies = [
export default function SettingsPage() { export default function SettingsPage() {
const { brand, refresh } = useBrand() const { brand, refresh } = useBrand()
const [strategy, setStrategy] = useState('subnet') const [strategy, setStrategy] = useState('subnet')
const [multicastEnabled, setMulticastEnabled] = useState(true) const [multicastEnabled, setMulticastEnabled] = useState(true)
const [multicastAvailable, setMulticastAvailable] = useState(false) const [multicastAvailable, setMulticastAvailable] = useState(false)
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [brandName, setBrandName] = useState(brand.brand_name) const [brandName, setBrandName] = useState(brand.brand_name)
const [brandTagline, setBrandTagline] = useState(brand.brand_tagline) const [brandTagline, setBrandTagline] = useState(brand.brand_tagline)
const [brandLogoUrl, setBrandLogoUrl] = useState(brand.brand_logo_url) const [brandLogoUrl, setBrandLogoUrl] = useState(brand.brand_logo_url)
@@ -29,54 +27,37 @@ export default function SettingsPage() {
useEffect(() => { setBrandName(brand.brand_name); setBrandTagline(brand.brand_tagline); setBrandLogoUrl(brand.brand_logo_url) }, [brand]) useEffect(() => { setBrandName(brand.brand_name); setBrandTagline(brand.brand_tagline); setBrandLogoUrl(brand.brand_logo_url) }, [brand])
async function loadSettings() { async function loadSettings() {
try { try { const { data } = await api.get('/nodes/strategy'); setStrategy(data.strategy); setMulticastEnabled(data.multicast_enabled); setMulticastAvailable(data.multicast_available) } catch { /* */ }
const { data } = await api.get('/nodes/strategy')
setStrategy(data.strategy)
setMulticastEnabled(data.multicast_enabled)
setMulticastAvailable(data.multicast_available)
} catch { /* */ }
} }
async function saveStrategy(val: string) { async function saveStrategy(val: string) {
setSaving(true) setSaving(true)
try { try { await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled }); setStrategy(val); message.success('策略已更新') }
await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled }) catch { message.error('更新失败') }
setStrategy(val)
message.success('策略已更新')
} catch { message.error('更新失败') }
setSaving(false) setSaving(false)
} }
async function toggleMulticast(val: boolean) { async function toggleMulticast(val: boolean) {
setMulticastEnabled(val) setMulticastEnabled(val)
try { try { await api.put('/nodes/strategy', { strategy, multicast_enabled: val }); message.success('已更新') } catch { message.error('更新失败') }
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
message.success('组播设置已更新')
} catch { message.error('更新失败') }
} }
async function saveBrand() { async function saveBrand() {
setBrandSaving(true) setBrandSaving(true)
try { try { await api.put('/settings/brand', { brand_name: brandName, brand_tagline: brandTagline, brand_logo_url: brandLogoUrl }); await refresh(); message.success('品牌设置已保存') }
await api.put('/settings/brand', { catch { message.error('保存失败') }
brand_name: brandName,
brand_tagline: brandTagline,
brand_logo_url: brandLogoUrl,
})
await refresh()
message.success('品牌设置已保存')
} catch { message.error('保存失败') }
setBrandSaving(false) setBrandSaving(false)
} }
return ( return (
<div style={{ maxWidth: 720 }}> <div style={{ maxWidth: 720 }}>
<Title level={3} style={{ marginBottom: 24 }}>系统设置</Title> <div style={{ marginBottom: 32 }}>
<Title level={2} style={{ margin: '0 0 4px', fontWeight: 600, fontSize: 28 }}>系统设置</Title>
<Text style={{ color: '#949088' }}>配置负载均衡策略与品牌信息</Text>
</div>
<Card title="负载均衡" style={{ marginBottom: 24, borderRadius: 10 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: 32, marginBottom: 24 }}>
<Title level={4} style={{ margin: '0 0 24px', fontWeight: 600 }}>负载均衡</Title>
<Form layout="vertical"> <Form layout="vertical">
<Form.Item label="均衡策略" help="子网优先：根据客户端IP所属子网自动选择最近节点"> <Form.Item label="均衡策略" help="根据客户端 IP 所属子网自动选择最近的边缘节点">
<Select value={strategy} onChange={saveStrategy} options={strategies} loading={saving} style={{ width: 280 }} /> <Select value={strategy} onChange={saveStrategy} options={strategies} loading={saving} style={{ width: 280, borderRadius: 8 }} />
</Form.Item> </Form.Item>
<Form.Item label="组播"> <Form.Item label="组播">
<Switch checked={multicastEnabled} onChange={toggleMulticast} /> <Switch checked={multicastEnabled} onChange={toggleMulticast} />
@@ -85,29 +66,28 @@ export default function SettingsPage() {
</Text> </Text>
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </div>
<Card title="品牌设置" style={{ borderRadius: 10 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: 32 }}>
<Title level={4} style={{ margin: '0 0 24px', fontWeight: 600 }}>品牌设置</Title>
<Form layout="vertical"> <Form layout="vertical">
<Form.Item label="平台名称"> <Form.Item label="平台名称">
<Input value={brandName} onChange={e => setBrandName(e.target.value)} placeholder="StreamCore" size="large" /> <Input value={brandName} onChange={e => setBrandName(e.target.value)} size="large" style={{ borderRadius: 8 }} />
</Form.Item> </Form.Item>
<Form.Item label="标语"> <Form.Item label="标语">
<Input value={brandTagline} onChange={e => setBrandTagline(e.target.value)} placeholder="企业级直播平台" size="large" /> <Input value={brandTagline} onChange={e => setBrandTagline(e.target.value)} size="large" style={{ borderRadius: 8 }} />
</Form.Item> </Form.Item>
<Form.Item label="Logo 图片地址"> <Form.Item label="Logo 图片地址">
<Input value={brandLogoUrl} onChange={e => setBrandLogoUrl(e.target.value)} placeholder="https://..." /> <Input value={brandLogoUrl} onChange={e => setBrandLogoUrl(e.target.value)} style={{ borderRadius: 8 }} placeholder="https://..." />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" loading={brandSaving} onClick={saveBrand} size="large"> <Button type="primary" loading={brandSaving} onClick={saveBrand} size="large" style={{ borderRadius: 8 }}>
保存品牌设置 保存品牌设置
</Button> </Button>
<Text type="secondary" style={{ marginLeft: 12, fontSize: 13 }}> <Text type="secondary" style={{ marginLeft: 12, fontSize: 13 }}>保存后全站立即生效</Text>
保存后全站立即生效
</Text>
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </div>
</div> </div>
) )
} }
frontend/src/admin/pages/StreamForm.tsx
+27 -42
View File
@@ -1,6 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert, Divider } from 'antd' import { Form, Input, Button, DatePicker, Typography, message, Space, Alert } from 'antd'
import { CopyOutlined, ArrowLeftOutlined, CheckCircleOutlined } from '@ant-design/icons' import { CopyOutlined, ArrowLeftOutlined, CheckCircleOutlined } from '@ant-design/icons'
import { createStream } from '../../api/streams' import { createStream } from '../../api/streams'
@@ -15,12 +15,7 @@ export default function StreamForm() {
const handleSubmit = async (values: any) => { const handleSubmit = async (values: any) => {
setLoading(true) setLoading(true)
try { try {
const res = await createStream({ const res = await createStream({ title: values.title, description: values.description, cover_url: values.cover_url, scheduled_at: values.scheduled_at?.toISOString() })
title: values.title,
description: values.description,
cover_url: values.cover_url,
scheduled_at: values.scheduled_at?.toISOString(),
})
setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key }) setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key })
message.success('直播已创建') message.success('直播已创建')
} catch { message.error('创建失败') } } catch { message.error('创建失败') }
@@ -30,45 +25,33 @@ export default function StreamForm() {
if (result) { if (result) {
return ( return (
<div style={{ maxWidth: 680 }}> <div style={{ maxWidth: 680 }}>
<div style={{ marginBottom: 28 }}> <div style={{ marginBottom: 32 }}>
<CheckCircleOutlined style={{ fontSize: 36, color: '#5B8C5A', marginBottom: 12 }} /> <CheckCircleOutlined style={{ fontSize: 32, color: '#5B8C5A', marginBottom: 16 }} />
<Title level={3} style={{ margin: '0 0 8px', fontWeight: 600 }}>直播已创建</Title> <Title level={2} style={{ margin: '0 0 8px', fontWeight: 600 }}>直播已创建</Title>
<Text type="secondary">将以下信息提供给推流端即可开始直播</Text> <Text style={{ color: '#5E5A52' }}>将以下信息提供给推流端即可开始直播</Text>
</div> </div>
<Card style={{ borderRadius: 12, marginBottom: 20 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: 32, marginBottom: 24 }}>
<Space direction="vertical" size={20} style={{ width: '100%' }}> <Space direction="vertical" size={24} style={{ width: '100%' }}>
<div> <div>
<Text type="secondary" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.5 }}>推流码</Text> <Text style={{ color: '#949088', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>推流码</Text>
<div style={{ <div style={{ marginTop: 8, padding: '16px 20px', background: '#F7F5F1', borderRadius: 8, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
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} {result.stream_key}
</div> </div>
</div> </div>
<div> <div>
<Text type="secondary" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.5 }}>RTMP 推流地址</Text> <Text style={{ color: '#949088', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>RTMP 推流地址</Text>
<div style={{ <div style={{ marginTop: 8, padding: '16px 20px', background: '#F7F5F1', borderRadius: 8, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
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} {result.rtmp_url}
</div> </div>
</div> </div>
</Space> </Space>
</Card> </div>
<Space size={12}> <Space size={12}>
<Button size="large" icon={<CopyOutlined />} onClick={() => { <Button size="large" icon={<CopyOutlined />} onClick={() => {
navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`) navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`)
message.success('已复制到剪贴板') message.success('已复制')
}}>复制全部信息</Button> }}>复制全部信息</Button>
<Button type="primary" size="large" onClick={() => navigate('/admin/streams')}>返回列表</Button> <Button type="primary" size="large" onClick={() => navigate('/admin/streams')}>返回列表</Button>
</Space> </Space>
@@ -79,34 +62,36 @@ export default function StreamForm() {
return ( return (
<div style={{ maxWidth: 680 }}> <div style={{ maxWidth: 680 }}>
<Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')} <Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')}
style={{ marginBottom: 16, color: '#5C5952' }}>返回列表</Button> style={{ marginBottom: 20, color: '#5E5A52' }}>返回列表</Button>
<Card style={{ borderRadius: 12 }}> <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: 36 }}>
<Title level={3} style={{ marginBottom: 8, fontWeight: 600 }}>创建直播</Title> <Title level={2} style={{ margin: '0 0 8px', fontWeight: 600 }}>创建直播</Title>
<Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>填写直播信息，系统将生成推流码与 RTMP 地址</Text> <Text style={{ color: '#5E5A52', display: 'block', marginBottom: 36 }}>
填写直播信息，系统将生成推流码与 RTMP 地址
</Text>
<Form layout="vertical" onFinish={handleSubmit} size="large"> <Form layout="vertical" onFinish={handleSubmit} size="large">
<Form.Item name="title" label="直播标题" <Form.Item name="title" label="直播标题"
rules={[{ required: true, message: '请输入直播标题' }]}> rules={[{ required: true, message: '请输入直播标题' }]}>
<Input placeholder="输入直播标题" /> <Input placeholder="输入直播标题" style={{ borderRadius: 8 }} />
</Form.Item> </Form.Item>
<Form.Item name="description" label="简介"> <Form.Item name="description" label="简介">
<TextArea rows={3} placeholder="直播内容简介（可选）" /> <TextArea rows={3} placeholder="直播内容简介（可选）" style={{ borderRadius: 8 }} />
</Form.Item> </Form.Item>
<Form.Item name="cover_url" label="封面图片 URL"> <Form.Item name="cover_url" label="封面图片 URL">
<Input placeholder="https://..." /> <Input placeholder="https://..." style={{ borderRadius: 8 }} />
</Form.Item> </Form.Item>
<Form.Item name="scheduled_at" label="预定开播时间"> <Form.Item name="scheduled_at" label="预定开播时间">
<DatePicker showTime style={{ width: '100%' }} placeholder="选择日期（可选）" /> <DatePicker showTime style={{ width: '100%', borderRadius: 8 }} placeholder="选择日期（可选）" />
</Form.Item> </Form.Item>
<Divider style={{ margin: '8px 0 24px' }} /> <div style={{ borderTop: '1px solid #EBE5DB', margin: '8px 0 24px' }} />
<Form.Item style={{ marginBottom: 0 }}> <Form.Item style={{ marginBottom: 0 }}>
<Button type="primary" htmlType="submit" loading={loading} style={{ height: 48 }} block> <Button type="primary" htmlType="submit" loading={loading} block style={{ height: 48, borderRadius: 8 }}>
创建直播 创建直播
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </div>
</div> </div>
) )
} }
frontend/src/admin/pages/StreamList.tsx
+21 -44
View File
@@ -36,51 +36,29 @@ export default function StreamList() {
} }
const columns = [ const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 70 }, { title: 'ID', dataIndex: 'id', key: 'id', width: 60 },
{ { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
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, { title: '状态', dataIndex: 'status', key: 'status', width: 90,
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> }, render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
{ title: '推流码', dataIndex: 'stream_key', key: 'stream_key', width: 130, { title: '推流码', dataIndex: 'stream_key', key: 'stream_key', width: 120,
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v.slice(0, 12)}...</Text> }, 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: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 160 },
{ {
title: '操作', key: 'actions', width: 280, title: '操作', key: 'actions', width: 240,
render: (_: any, r: StreamInfo) => ( render: (_: any, r: StreamInfo) => (
<Space size={4}> <Space size={4}>
<Tooltip title="复制推流码"> <Tooltip title="复制推流码">
<Button size="small" icon={<LinkOutlined />} <Button size="small" icon={<LinkOutlined />}
onClick={e => { e.stopPropagation(); navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }} /> onClick={() => { navigator.clipboard.writeText(r.stream_key); message.success('已复制') }} />
</Tooltip> </Tooltip>
{r.status !== 'live' ? ( {r.status !== 'live' ? (
<Tooltip title="开播"> <Tooltip title="开播"><Button size="small" type="primary" ghost icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} /></Tooltip>
<Button size="small" type="primary" icon={<PlayCircleOutlined />} ghost
onClick={e => { e.stopPropagation(); handleGoLive(r.id) }} />
</Tooltip>
) : ( ) : (
<Tooltip title="结束直播"> <Tooltip title="结束"><Button size="small" danger icon={<StopOutlined />} onClick={() => handleEnd(r.id)} /></Tooltip>
<Button size="small" icon={<StopOutlined />} danger
onClick={e => { e.stopPropagation(); handleEnd(r.id) }} />
</Tooltip>
)} )}
<Tooltip title="观看"> <Tooltip title="观看"><Button size="small" icon={<EyeOutlined />} onClick={() => window.open(`/watch/${r.id}`, '_blank')} /></Tooltip>
<Button size="small" icon={<EyeOutlined />} <Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
onClick={e => { e.stopPropagation(); window.open(`/watch/${r.id}`, '_blank') }} /> <Tooltip title="删除"><Button size="small" danger icon={<DeleteOutlined />} /></Tooltip>
</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> </Popconfirm>
</Space> </Space>
), ),
@@ -89,24 +67,23 @@ export default function StreamList() {
return ( return (
<div> <div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
<div> <div>
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播列表</Title> <Title level={2} style={{ margin: '0 0 4px', fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }}>直播列表</Title>
<Text type="secondary" style={{ fontSize: 14 }}>管理所有直播流</Text> <Text style={{ color: '#949088', fontSize: 14 }}>管理所有直播流</Text>
</div> </div>
<Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => navigate('/admin/streams/new')}> <Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => navigate('/admin/streams/new')}>
创建直播 创建直播
</Button> </Button>
</div> </div>
<Table <div style={{
dataSource={streams} background: '#fff', borderRadius: 12,
columns={columns} border: '1px solid #EBE5DB', padding: '8px 8px 0',
rowKey="id" }}>
loading={loading} <Table dataSource={streams} columns={columns} rowKey="id" loading={loading}
pagination={{ pageSize: 15, showSizeChanger: false }} pagination={{ pageSize: 15, showSizeChanger: false }} size="middle"
size="middle" locale={{ emptyText: '暂无直播，创建第一条直播吧' }} />
locale={{ emptyText: '暂无直播，点击上方按钮创建' }} </div>
/>
</div> </div>
) )
} }
frontend/src/global.css
+71 -5
View File
@@ -1,8 +1,74 @@
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root {
html, body, #root { height: 100%; } --bg-page: #F9F7F4;
body { --bg-surface: #FFFFFF;
font-family: "Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif; --bg-surface-raised: #FAFAF8;
--bg-muted: #F3F0EC;
--bg-brand: #C2693A;
--bg-brand-light: #F6EEE5;
--bg-dark: #1A1814;
--text-primary: #1C1A17;
--text-secondary: #5E5A52;
--text-tertiary: #949088;
--text-inverse: #F9F7F4;
--border-default: #EBE5DB;
--border-light: #F3EFE9;
--border-brand: #D4A782;
--shadow-sm: 0 1px 2px rgba(28,26,23,0.03);
--shadow-md: 0 4px 12px rgba(28,26,23,0.04);
--shadow-lg: 0 12px 32px rgba(28,26,23,0.06);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--font-sans: "Source Serif 4", "Noto Serif SC", Georgia, serif;
--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background: #F6F3ED; text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.65;
color: var(--text-primary);
background: var(--bg-page);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
}
::selection {
background: #EAD7C8;
color: #1C1A17;
} }
frontend/src/theme/anthropic.ts
+35 -94
View File
@@ -2,135 +2,76 @@ import type { ThemeConfig } from 'antd'
const theme: ThemeConfig = { const theme: ThemeConfig = {
token: { token: {
fontFamily: `"Source Serif 4", "Noto Serif SC", "Noto Serif", Georgia, "Times New Roman", serif`, fontFamily: `"Source Serif 4", "Noto Serif SC", Georgia, serif`,
fontSize: 15, fontSize: 15,
fontSizeLG: 16,
fontSizeXL: 20,
fontSizeHeading1: 36,
fontSizeHeading2: 28,
fontSizeHeading3: 22,
fontSizeHeading4: 18,
fontSizeHeading5: 16,
lineHeight: 1.65, lineHeight: 1.65,
lineHeightLG: 1.6,
lineHeightSM: 1.5,
colorPrimary: '#C2693A', colorPrimary: '#C2693A',
colorPrimaryHover: '#A85730',
colorPrimaryActive: '#8E4726',
colorPrimaryBg: '#F6EEE5',
colorPrimaryBgHover: '#F0E2D4',
colorSuccess: '#5B8C5A', colorSuccess: '#5B8C5A',
colorWarning: '#C2873A', colorWarning: '#C28B3A',
colorError: '#B54A4A', colorError: '#B54A4A',
colorInfo: '#6B8CA8', colorInfo: '#6B8CA8',
colorTextBase: '#141410', colorTextBase: '#1C1A17',
colorTextSecondary: '#5C5952', colorTextSecondary: '#5E5A52',
colorTextTertiary: '#8B867D', colorTextTertiary: '#949088',
colorTextQuaternary: '#B0ABA3', colorBgBase: '#F9F7F4',
colorBgBase: '#FCFAF7', colorBgContainer: '#FFFFFF',
colorBgContainer: '#FDFCFB', colorBgLayout: '#F9F7F4',
colorBgElevated: '#FFFFFF', colorBgElevated: '#FAFAF8',
colorBgLayout: '#F6F3ED', colorBorder: '#EBE5DB',
colorBorder: '#E6E0D6', colorBorderSecondary: '#F3EFE9',
colorBorderSecondary: '#F0EBE2', colorFill: '#F3F0EC',
colorFill: '#F0EBE2', colorFillSecondary: '#F7F5F1',
colorFillSecondary: '#F6F3ED',
colorFillTertiary: '#FCFAF7',
borderRadius: 6, borderRadius: 6,
borderRadiusLG: 10, borderRadiusLG: 10,
borderRadiusSM: 4, borderRadiusSM: 4,
borderRadiusXS: 2,
wireframe: false, wireframe: false,
fontWeightStrong: 600, fontWeightStrong: 600,
paddingLG: 32,
paddingMD: 24,
paddingSM: 16,
paddingXS: 12,
paddingXXS: 8,
controlHeight: 40, controlHeight: 40,
controlHeightLG: 48, controlHeightLG: 48,
controlHeightSM: 32, controlHeightSM: 32,
boxShadow: '0 1px 3px rgba(20,20,16,0.03), 0 1px 2px rgba(20,20,16,0.02)', paddingLG: 32,
boxShadowSecondary: '0 4px 14px rgba(20,20,16,0.04), 0 2px 6px rgba(20,20,16,0.02)', paddingMD: 24,
boxShadowTertiary: '0 10px 30px rgba(20,20,16,0.06), 0 4px 10px rgba(20,20,16,0.03)', paddingSM: 16,
motionDurationSlow: '0.25s', boxShadow: '0 1px 2px rgba(28,26,23,0.03)',
motionDurationMid: '0.18s', boxShadowSecondary: '0 4px 12px rgba(28,26,23,0.04)',
motionDurationFast: '0.1s', boxShadowTertiary: '0 12px 32px rgba(28,26,23,0.06)',
}, },
components: { components: {
Layout: { Layout: {
headerBg: '#FCFAF7', headerBg: '#FFFFFF',
headerHeight: 60, headerHeight: 60,
headerPadding: '0 48px', headerPadding: '0 48px',
siderBg: '#FBF9F6', siderBg: '#FFFFFF',
bodyBg: '#F6F3ED', bodyBg: '#F9F7F4',
}, },
Menu: { Menu: {
itemBg: 'transparent', itemBg: 'transparent',
itemSelectedBg: '#EDE8DD', itemSelectedBg: '#F3F0EC',
itemSelectedColor: '#141410', itemSelectedColor: '#1C1A17',
itemActiveBg: '#F0EBE2', itemActiveBg: '#F7F5F1',
itemColor: '#5C5952', itemColor: '#5E5A52',
itemHeight: 44, itemHeight: 44,
fontSize: 14,
iconSize: 18,
collapsedIconSize: 18,
}, },
Card: { Card: {
paddingLG: 28, paddingLG: 28,
borderRadiusLG: 10, borderRadiusLG: 10,
colorBgContainer: '#FDFCFB',
}, },
Button: { Button: {
borderRadius: 6, borderRadius: 6,
fontWeight: 500, fontWeight: 500,
controlHeight: 40,
controlHeightLG: 48,
controlHeightSM: 32,
primaryShadow: '0 2px 6px rgba(194,105,58,0.1)', primaryShadow: '0 2px 6px rgba(194,105,58,0.1)',
}, },
Input: {
borderRadius: 6,
activeBorderColor: '#C2693A',
hoverBorderColor: '#D4956B',
controlHeight: 40,
controlHeightLG: 48,
},
Select: {
borderRadius: 6,
activeBorderColor: '#C2693A',
controlHeight: 40,
},
Table: { Table: {
headerBg: '#F6F3ED', headerBg: '#F7F5F1',
headerColor: '#5C5952', headerColor: '#5E5A52',
rowHoverBg: '#F3EFE7', rowHoverBg: '#F5F3F0',
borderColor: '#E6E0D6', borderColor: '#EBE5DB',
headerBorderRadius: 8,
cellPaddingBlock: 12,
cellPaddingInline: 16,
},
Modal: {
borderRadiusLG: 12,
paddingLG: 28,
},
Tag: {
borderRadiusSM: 4,
lineHeight: 1.6,
},
Statistic: {
contentFontSize: 30,
titleFontSize: 14,
},
Typography: {
titleMarginBottom: '0.5em',
titleMarginTop: '1.2em',
},
Tabs: {
inkBarColor: '#C2693A',
itemActiveColor: '#C2693A',
itemHoverColor: '#D4956B',
}, },
Tag: { borderRadiusSM: 4 },
Modal: { borderRadiusLG: 12, paddingLG: 28 },
Tabs: { inkBarColor: '#C2693A', itemActiveColor: '#C2693A', itemHoverColor: '#D4A782' },
Select: { borderRadius: 6 },
Input: { borderRadius: 6 },
}, },
} }
frontend/src/viewer/pages/HomePage.tsx
+118 -82
View File
@@ -1,18 +1,11 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Divider } from 'antd' import { Row, Col, Tag, Skeleton } from 'antd'
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons' import { VideoCameraOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams' import { fetchStreams, type StreamInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext' import { useBrand } from '../../brand/BrandContext'
const { Title, Text } = Typography const liveDot = { width: 8, height: 8, borderRadius: '50%', background: '#E53935', display: 'inline-block', marginRight: 6, boxShadow: '0 0 0 2px rgba(229,57,53,0.2)' }
const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
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 },
}
export default function HomePage() { export default function HomePage() {
const { brand } = useBrand() const { brand } = useBrand()
@@ -25,138 +18,181 @@ export default function HomePage() {
}, []) }, [])
const sorted = [...streams].sort((a, b) => { const sorted = [...streams].sort((a, b) => {
const order: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 } const o: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 }
return (order[a.status] ?? 9) - (order[b.status] ?? 9) return (o[a.status] ?? 9) - (o[b.status] ?? 9)
}) })
return ( return (
<div style={{ minHeight: '100vh', background: '#F6F3ED', display: 'flex', flexDirection: 'column' }}> <div style={{ minHeight: '100vh', background: '#F9F7F4' }}>
<div style={{ {/* Hero */}
background: 'linear-gradient(180deg, #FCFAF7 0%, #F6F3ED 100%)', <section style={{
borderBottom: '1px solid #E6E0D6', padding: '96px 48px 80px',
padding: '64px 48px 56px', maxWidth: 1200, margin: '0 auto',
}}> }}>
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
{brand.brand_logo_url && ( {brand.brand_logo_url && (
<img src={brand.brand_logo_url} alt={brand.brand_name} <img src={brand.brand_logo_url} alt={brand.brand_name}
style={{ height: 44, marginBottom: 20 }} /> style={{ height: 36, marginBottom: 24, display: 'block' }} />
)} )}
<Title style={{ <h1 style={{
margin: 0, fontWeight: 600, fontSize: 40, letterSpacing: -1.5, lineHeight: 1.2, fontSize: 'clamp(36px, 5vw, 56px)',
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif', fontWeight: 600,
lineHeight: 1.1,
letterSpacing: '-0.03em',
margin: 0,
color: '#1C1A17',
}}> }}>
{brand.brand_name} {brand.brand_name}
</Title> </h1>
{brand.brand_tagline && ( {brand.brand_tagline && (
<Text style={{ fontSize: 18, marginTop: 12, display: 'block', fontWeight: 400, color: '#5C5952' }}> <p style={{
fontSize: 'clamp(16px, 2vw, 20px)',
color: '#5E5A52', marginTop: 16,
fontWeight: 400, lineHeight: 1.5,
}}>
{brand.brand_tagline} {brand.brand_tagline}
</Text> </p>
)} )}
</div> </section>
</div>
<div style={{ flex: 1, maxWidth: 1200, margin: '0 auto', width: '100%', padding: '44px 48px' }}> {/* Streams */}
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 28 }}> <section style={{
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播频道</Title> maxWidth: 1200, margin: '0 auto',
<Text type="secondary" style={{ fontSize: 15 }}>共 {sorted.length} 个</Text> padding: '0 48px 96px',
}}>
<div style={{
display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
marginBottom: 40, paddingBottom: 16,
borderBottom: '1px solid #EBE5DB',
}}>
<h2 style={{ fontSize: 22, fontWeight: 600, margin: 0, letterSpacing: '-0.02em' }}>
直播频道
</h2>
<span style={{ fontSize: 14, color: '#949088' }}>
{sorted.length} 个节目
</span>
</div> </div>
{loading ? ( {loading ? (
<Row gutter={[28, 28]}> <Row gutter={[32, 40]}>
{[1,2,3,4,5,6].map(i => ( {[1,2,3,4,5,6].map(i => (
<Col key={i} xs={24} sm={12} md={8} lg={8}> <Col key={i} xs={24} sm={12} lg={8}>
<Card style={{ borderRadius: 12 }}><Skeleton active paragraph={{ rows: 3 }} /></Card> <div style={{ background: '#fff', borderRadius: 10, overflow: 'hidden' }}>
<div style={{ height: 200, background: '#F3F0EC' }} />
<div style={{ padding: '20px 24px 24px' }}>
<Skeleton active paragraph={{ rows: 2 }} title={{ width: '60%' }} />
</div>
</div>
</Col> </Col>
))} ))}
</Row> </Row>
) : sorted.length === 0 ? ( ) : sorted.length === 0 ? (
<div style={{ <div style={{
textAlign: 'center', padding: '80px 0', textAlign: 'center', padding: '80px 0',
background: '#FCFAF7', borderRadius: 12, border: '1px solid #E6E0D6', background: '#fff', borderRadius: 14,
}}> }}>
<VideoCameraOutlined style={{ fontSize: 48, color: '#B0ABA3', marginBottom: 16 }} /> <VideoCameraOutlined style={{ fontSize: 40, color: '#C4BCB0', marginBottom: 16 }} />
<Title level={4} type="secondary" style={{ fontWeight: 400 }}>暂无直播</Title> <h3 style={{ fontSize: 18, fontWeight: 500, color: '#5E5A52' }}>暂无直播</h3>
<Text type="secondary">当前没有正在播出或排期的直播节目</Text> <p style={{ color: '#949088', fontSize: 14, marginTop: 4 }}>当前没有正在播出或排期的直播节目</p>
</div> </div>
) : ( ) : (
<Row gutter={[28, 28]}> <Row gutter={[32, 40]}>
{sorted.map(s => { {sorted.map(s => {
const meta = statusMeta[s.status] ?? statusMeta.pending
const isLive = s.status === 'live' const isLive = s.status === 'live'
const isPending = s.status === 'pending'
return ( return (
<Col key={s.id} xs={24} sm={12} md={8} lg={8}> <Col key={s.id} xs={24} sm={12} lg={8}>
<Card <div
hoverable onClick={() => navigate(`/watch/${s.id}`)}
style={{ style={{
background: '#fff',
borderRadius: 10,
overflow: 'hidden', overflow: 'hidden',
borderRadius: 12, cursor: 'pointer',
borderColor: isLive ? '#E0C8B6' : '#E6E0D6', transition: 'transform 0.2s, box-shadow 0.2s',
transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s', border: `1px solid ${isLive ? '#E8D0BE' : '#EBE5DB'}`,
}} }}
bodyStyle={{ padding: '20px 24px' }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(28,26,23,0.06)' }}
cover={ onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none' }}
>
{/* Cover */}
<div style={{ <div style={{
height: 192, height: 200, position: 'relative',
position: 'relative',
background: s.cover_url background: s.cover_url
? `url(${s.cover_url}) center/cover no-repeat` ? `url(${s.cover_url}) center/cover no-repeat`
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #3D3226 100%)', : '#2C2824',
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
}}> }}>
{!s.cover_url && ( {!s.cover_url && (
<VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.08)', fontSize: 64 }} /> <VideoCameraOutlined style={{ color: 'rgba(249,247,244,0.08)', fontSize: 56 }} />
)} )}
{/* Status badge */}
{isLive && ( {isLive && (
<div style={{ <div style={{
position: 'absolute', top: 14, left: 14, position: 'absolute', top: 16, left: 16,
display: 'flex', alignItems: 'center', gap: 6, display: 'inline-flex', alignItems: 'center',
background: '#C62828', color: '#fff', background: 'rgba(229,57,53,0.92)', color: '#fff',
padding: '3px 10px', borderRadius: 4, padding: '4px 12px', borderRadius: 4,
fontSize: 12, fontWeight: 600, letterSpacing: 0.5, fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
}}> }}>
<span style={{ <span style={liveDot} />LIVE
width: 8, height: 8, borderRadius: '50%',
background: '#fff', display: 'inline-block',
animation: 'pulse 2s infinite',
}} />
LIVE
</div> </div>
)} )}
{!isLive && ( {isPending && (
<div style={{ position: 'absolute', bottom: 12, left: 12 }}> <div style={{
<Tag color={meta.color} style={{ margin: 0, fontWeight: 500, border: 0, fontSize: 12 }}> position: 'absolute', top: 16, left: 16,
{meta.icon} {meta.label} background: '#1C1A17', color: '#F9F7F4',
padding: '4px 12px', borderRadius: 4,
fontSize: 12, fontWeight: 600,
}}>
待开播
</div>
)}
{!isLive && !isPending && (
<div style={{
position: 'absolute', bottom: 16, left: 16,
}}>
<Tag color="default" style={{ margin: 0, border: 0, fontSize: 11 }}>
{s.status === 'ended' ? '已结束' : '已取消'}
</Tag> </Tag>
</div> </div>
)} )}
</div> </div>
} {/* Info */}
onClick={() => navigate(`/watch/${s.id}`)} <div style={{ padding: '20px 24px 24px' }}>
> <h3 style={{
<Text strong style={{ fontSize: 16, display: 'block', marginBottom: 4 }} ellipsis> fontSize: 17, fontWeight: 600, margin: '0 0 6px',
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
letterSpacing: '-0.01em',
}}>
{s.title} {s.title}
</Text> </h3>
<Text type="secondary" style={{ fontSize: 13, lineHeight: 1.5 }} ellipsis> <p style={{
fontSize: 14, color: '#949088', margin: 0,
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
lineHeight: 1.4,
}}>
{s.description || '暂无简介'} {s.description || '暂无简介'}
</Text> </p>
</Card> </div>
</div>
</Col> </Col>
) )
})} })}
</Row> </Row>
)} )}
</div> </section>
<div style={{ {/* Footer */}
borderTop: '1px solid #E6E0D6', <footer style={{
borderTop: '1px solid #EBE5DB',
padding: '24px 48px', padding: '24px 48px',
textAlign: 'center', textAlign: 'center',
background: '#FCFAF7', background: '#fff',
}}> }}>
<Text style={{ fontSize: 13, color: '#8B867D' }}> <span style={{ fontSize: 13, color: '#949088' }}>
{brand.brand_name} &copy; {new Date().getFullYear()} {brand.brand_name} &copy; {new Date().getFullYear()}
</Text> </span>
</div> </footer>
</div> </div>
) )
} }
frontend/src/viewer/pages/WatchPage.tsx
+30 -38
View File
@@ -1,12 +1,12 @@
import { useState, useEffect, useRef } from 'react' import { useState, useEffect, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom' import { useParams, useNavigate } from 'react-router-dom'
import { Select, Button, Typography, Space, Tag, Spin, Skeleton, Empty, message } from 'antd' import { Select, Button, Typography, Space, Tag, Spin, Empty, message } from 'antd'
import { ArrowLeftOutlined, WifiOutlined, SignalFilled } from '@ant-design/icons' import { ArrowLeftOutlined, WifiOutlined, SignalFilled } from '@ant-design/icons'
import Hls from 'hls.js' import Hls from 'hls.js'
import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams' import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext' import { useBrand } from '../../brand/BrandContext'
const { Title, Text } = Typography const { Text } = Typography
export default function WatchPage() { export default function WatchPage() {
const { brand } = useBrand() const { brand } = useBrand()
@@ -56,28 +56,26 @@ export default function WatchPage() {
const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0] const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0]
if (!quality) return if (!quality) return
if (hls) hls.destroy() if (hls) hls.destroy()
const url = quality.url
if (Hls.isSupported()) { if (Hls.isSupported()) {
const hi = new Hls({ enableWorker: false, lowLatencyMode: false }) const hi = new Hls({ enableWorker: false, lowLatencyMode: false })
hi.loadSource(url); hi.attachMedia(videoRef.current!) hi.loadSource(quality.url); hi.attachMedia(videoRef.current!)
hi.on(Hls.Events.MANIFEST_PARSED, () => { videoRef.current?.play().catch(() => {}) }) hi.on(Hls.Events.MANIFEST_PARSED, () => { videoRef.current?.play().catch(() => {}) })
hi.on(Hls.Events.ERROR, (_e, d) => { if (d.fatal) message.warning('播放异常，尝试切换线路...') }) hi.on(Hls.Events.ERROR, (_e, d) => { if (d.fatal) message.warning('播放异常，尝试切换线路...') })
setHls(hi) setHls(hi)
} else if (videoRef.current!.canPlayType('application/vnd.apple.mpegurl')) { } else if (videoRef.current!.canPlayType('application/vnd.apple.mpegurl')) {
videoRef.current!.src = url videoRef.current!.src = quality.url
} }
}, [activeLine, activeQuality, info]) }, [activeLine, activeQuality, info])
useEffect(() => { document.title = info ? `${info.title} - ${brand.brand_name}` : brand.brand_name }, [info, brand]) useEffect(() => { document.title = info ? `${info.title} - ${brand.brand_name}` : brand.brand_name }, [info, brand])
if (loading) return ( if (loading) return (
<div style={{ minHeight: '100vh', background: '#1A1815', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div style={{ minHeight: '100vh', background: '#1A1814', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Spin size="large" /> <Spin size="large" />
</div> </div>
) )
if (!info) return ( if (!info) return (
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}> <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F9F7F4' }}>
<Empty description="未找到该直播" /> <Empty description="未找到该直播" />
</div> </div>
) )
@@ -85,52 +83,46 @@ export default function WatchPage() {
const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
return ( return (
<div style={{ minHeight: '100vh', background: '#1A1815', display: 'flex', flexDirection: 'column' }}> <div style={{ minHeight: '100vh', background: '#1A1814', display: 'flex', flexDirection: 'column' }}>
{/* Top bar */}
<div style={{ <div style={{
height: 56, minHeight: 56, height: 52, minHeight: 52,
background: 'rgba(26,24,21,0.98)', background: 'rgba(26,24,20,0.97)',
borderBottom: '1px solid rgba(230,224,214,0.06)', backdropFilter: 'blur(12px)',
borderBottom: '1px solid rgba(235,229,219,0.06)',
display: 'flex', alignItems: 'center', justifyContent: 'space-between', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
padding: '0 28px', padding: '0 28px',
backdropFilter: 'blur(12px)',
}}> }}>
<Space size={16}> <Space size={16}>
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }} <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#949088' }}
onClick={() => navigate('/')}> onClick={() => navigate('/')}>{brand.brand_name}</Button>
{brand.brand_name} <div style={{ width: 1, height: 18, background: 'rgba(235,229,219,0.1)' }} />
</Button> <Text style={{ color: '#EBE5DB', fontSize: 14, fontWeight: 500 }}>{info.title}</Text>
<div style={{ width: 1, height: 20, background: 'rgba(230,224,214,0.1)' }} /> <Tag color={info.status === 'live' ? 'green' : 'default'} style={{ fontWeight: 600, fontSize: 11 }}>
<div>
<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} {statusLabel}
</Tag> </Tag>
</div>
</Space> </Space>
<Space size={16}> <Space size={16}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#8B867D', fontSize: 13 }}> <Text style={{ color: '#949088', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952', fontSize: 12 }} /> <SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5E5A52', fontSize: 12 }} />
{info.multicast_available ? '组播' : '单播'} {info.multicast_available ? '组播' : '单播'}
</div> </Text>
<Select value={activeQuality} onChange={setActiveQuality} style={{ width: 100 }} size="small" <Select value={activeQuality} onChange={setActiveQuality} style={{ width: 100 }} size="small"
options={info.qualities.map(q => ({ value: q.label, label: q.label }))} placeholder="清晰度" /> options={info.qualities.map(q => ({ value: q.label, label: q.label }))} placeholder="清晰度" />
<Select value={activeLine} onChange={setActiveLine} style={{ width: 160 }} size="small" <Select value={activeLine} onChange={setActiveLine} style={{ width: 150 }} size="small"
options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name}` }))} options={info.lines.map(l => ({ value: l.node_id, label: l.node_name }))}
prefix={<WifiOutlined />} placeholder="线路" /> prefix={<WifiOutlined />} placeholder="线路" />
</Space> </Space>
</div> </div>
<div style={{ {/* Video */}
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
padding: '32px',
}}>
<div style={{ <div style={{
width: '100%', maxWidth: 1280, width: '100%', maxWidth: 1280,
aspectRatio: '16 / 9', maxHeight: 'calc(100vh - 120px)', aspectRatio: '16/9', maxHeight: 'calc(100vh - 132px)',
background: '#0A0A08', position: 'relative', background: '#0A0A08', borderRadius: 12, overflow: 'hidden',
borderRadius: 10, overflow: 'hidden', position: 'relative',
boxShadow: '0 8px 40px rgba(0,0,0,0.4)', boxShadow: '0 12px 48px rgba(0,0,0,0.5)',
}}> }}>
<video ref={videoRef} controls autoPlay playsInline <video ref={videoRef} controls autoPlay playsInline
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} /> style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
@@ -138,12 +130,12 @@ export default function WatchPage() {
<div style={{ <div style={{
position: 'absolute', inset: 0, position: 'absolute', inset: 0,
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
background: 'rgba(10,10,8,0.9)', background: 'rgba(10,10,8,0.92)',
}}> }}>
<Space direction="vertical" align="center" size={16}> <Space direction="vertical" align="center" size={16}>
<Spin size="large" /> <Spin size="large" />
<Text style={{ <Text style={{
color: '#8B867D', fontSize: 17, color: '#949088', fontSize: 17,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif', fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}> }}>
等待主播开播... 等待主播开播...