UI彻底重做: 全新设计语言, 纯手工精调
设计系统: - 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
1 parent
f0b8c2d64f
commit
2685ebdd47
11 files changed
+486
-553
No files matched your search
@@ -26,51 +26,47 @@ export default function AdminLayout() {
|
||||
const location = useLocation()
|
||||
|
||||
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'
|
||||
|
||||
const handleLogout = () => {
|
||||
clearToken()
|
||||
navigate('/admin/login')
|
||||
}
|
||||
const handleLogout = () => { clearToken(); navigate('/admin/login') }
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider
|
||||
collapsible collapsed={collapsed} onCollapse={setCollapsed}
|
||||
width={220}
|
||||
style={{ borderRight: '1px solid #E8E3D8', background: '#FBF9F6' }}
|
||||
style={{
|
||||
borderRight: '1px solid #EBE5DB',
|
||||
background: '#fff',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
borderBottom: '1px solid #E8E3D8',
|
||||
borderBottom: '1px solid #EBE5DB',
|
||||
}}>
|
||||
<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',
|
||||
color: '#C2693A',
|
||||
}}>
|
||||
{collapsed ? brand.brand_name.slice(0, 2) : brand.brand_name}
|
||||
</Text>
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline" selectedKeys={[selectedKey]} items={menuItems}
|
||||
<Menu mode="inline" selectedKeys={[selectedKey]} items={menuItems}
|
||||
onClick={({ key }) => navigate(key)}
|
||||
style={{ border: 'none', marginTop: 8 }}
|
||||
/>
|
||||
style={{ border: 'none', marginTop: 8 }} />
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header style={{
|
||||
background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
|
||||
background: '#fff', borderBottom: '1px solid #EBE5DB',
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
padding: '0 40px',
|
||||
padding: '0 48px',
|
||||
}}>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>{brand.brand_tagline}</Text>
|
||||
<Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>
|
||||
退出登录
|
||||
</Button>
|
||||
<Text style={{ color: '#949088', fontSize: 13 }}>{brand.brand_tagline}</Text>
|
||||
<Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>退出登录</Button>
|
||||
</Header>
|
||||
<Content style={{ padding: 32, overflow: 'auto' }}>
|
||||
<Content style={{ padding: 40, overflow: 'auto' }}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
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 { login } from '../api/auth'
|
||||
import { useBrand } from '../brand/BrandContext'
|
||||
@@ -14,89 +14,62 @@ export default function LoginPage() {
|
||||
|
||||
const handleSubmit = async (values: { password: string }) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
await login(values.password)
|
||||
message.success('登录成功')
|
||||
navigate('/admin')
|
||||
} catch {
|
||||
message.error('密码错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
try { await login(values.password); message.success('登录成功'); navigate('/admin') }
|
||||
catch { message.error('密码错误') }
|
||||
finally { setLoading(false) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#F6F3ED',
|
||||
padding: 24,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
background: '#F9F7F4',
|
||||
}}>
|
||||
<Card
|
||||
style={{
|
||||
width: 420,
|
||||
<div style={{ width: '100%', maxWidth: 420, padding: 24 }}>
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
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' }}>
|
||||
border: '1px solid #EBE5DB',
|
||||
padding: 56,
|
||||
}}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 40 }}>
|
||||
{brand.brand_logo_url && (
|
||||
<img src={brand.brand_logo_url} alt={brand.brand_name}
|
||||
style={{ height: 40, marginBottom: 16 }} />
|
||||
<img src={brand.brand_logo_url} alt={brand.brand_name} style={{ height: 36, marginBottom: 20 }} />
|
||||
)}
|
||||
<Title style={{
|
||||
margin: '0 0 8px', fontWeight: 600, fontSize: 28, letterSpacing: -1,
|
||||
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
|
||||
}}>
|
||||
<Title style={{ margin: '0 0 8px', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>
|
||||
{brand.brand_name}
|
||||
</Title>
|
||||
<Text type="secondary" style={{ fontSize: 15 }}>
|
||||
<Text style={{ color: '#5E5A52', fontSize: 15 }}>
|
||||
{brand.brand_tagline || '管理控制台'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Form onFinish={handleSubmit} layout="vertical" size="large">
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: '请输入管理员密码' }]}
|
||||
style={{ marginBottom: 24 }}
|
||||
>
|
||||
<Form.Item name="password" rules={[{ required: true, message: '请输入管理员密码' }]}
|
||||
style={{ marginBottom: 28 }}>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={{ color: '#8B867D' }} />}
|
||||
prefix={<LockOutlined style={{ color: '#949088' }} />}
|
||||
placeholder="管理员密码"
|
||||
style={{ height: 48 }}
|
||||
style={{ height: 48, borderRadius: 8 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginBottom: 0 }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
block
|
||||
style={{ height: 48, fontSize: 16, fontWeight: 600 }}
|
||||
>
|
||||
<Button type="primary" htmlType="submit" loading={loading} block
|
||||
style={{ height: 48, fontSize: 16, fontWeight: 600, borderRadius: 8 }}>
|
||||
登录管理控制台
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
<div style={{ textAlign: 'center', marginTop: 24 }}>
|
||||
<Button type="text" icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/')}
|
||||
style={{ color: '#8B867D', fontSize: 13 }}
|
||||
>
|
||||
style={{ color: '#949088', fontSize: 13 }}>
|
||||
返回首页
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
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 { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||
import { useBrand } from '../../brand/BrandContext'
|
||||
@@ -11,11 +11,7 @@ export default function Dashboard() {
|
||||
const [streams, setStreams] = useState<StreamInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
const timer = setInterval(loadData, 10000)
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
useEffect(() => { loadData(); const t = setInterval(loadData, 10000); return () => clearInterval(t) }, [])
|
||||
|
||||
async function loadData() {
|
||||
try { setStreams(await fetchStreams()) } catch { /* */ }
|
||||
@@ -34,47 +30,63 @@ export default function Dashboard() {
|
||||
|
||||
const columns = [
|
||||
{ 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> },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 32 }}>
|
||||
<Title level={2} style={{ margin: 0, fontWeight: 600 }}>{brand.brand_name}</Title>
|
||||
<Text type="secondary" style={{ fontSize: 15 }}>管理控制台</Text>
|
||||
<div style={{ marginBottom: 36 }}>
|
||||
<Title level={1} style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 32, letterSpacing: '-0.03em' }}>
|
||||
{brand.brand_name}
|
||||
</Title>
|
||||
<Text style={{ color: '#5E5A52', fontSize: 15 }}>管理控制台</Text>
|
||||
</div>
|
||||
|
||||
<Row gutter={[28, 28]} style={{ marginBottom: 32 }}>
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: 36 }}>
|
||||
<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}
|
||||
prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 18 }} />} />
|
||||
</Card>
|
||||
prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 20 }} />} />
|
||||
</div>
|
||||
</Col>
|
||||
<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}
|
||||
prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 18 }} />} />
|
||||
</Card>
|
||||
prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 20 }} />} />
|
||||
</div>
|
||||
</Col>
|
||||
<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}
|
||||
prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 18 }} />} />
|
||||
</Card>
|
||||
prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 20 }} />} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card
|
||||
title={<Title level={4} style={{ margin: 0, fontWeight: 600 }}>最近直播</Title>}
|
||||
style={{ borderRadius: 12 }}
|
||||
>
|
||||
<div style={{
|
||||
background: '#fff', 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}
|
||||
rowKey="id" loading={loading} pagination={false} size="middle"
|
||||
locale={{ emptyText: '暂无直播数据' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
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 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 StrategyInfo { strategy: string; multicast_enabled: boolean; multicast_available: boolean }
|
||||
|
||||
const strategyLabels: Record<string, string> = {
|
||||
'subnet': '子网优先', 'round-robin': '轮询', 'weighted': '权重', 'least-conn': '最少连接',
|
||||
}
|
||||
const sL: Record<string, string> = { 'subnet': '子网优先', 'round-robin': '轮询', 'weighted': '权重', 'least-conn': '最少连接' }
|
||||
|
||||
export default function NodeManager() {
|
||||
const [nodes, setNodes] = useState<NodeInfo[]>([])
|
||||
@@ -22,10 +20,8 @@ export default function NodeManager() {
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [nr, sr] = await Promise.all([api.get('/nodes'), api.get('/nodes/strategy')])
|
||||
setNodes(nr.data); setStrategy(sr.data)
|
||||
} catch { message.error('加载失败') }
|
||||
try { const [nr, sr] = await Promise.all([api.get('/nodes'), api.get('/nodes/strategy')]); setNodes(nr.data); setStrategy(sr.data) }
|
||||
catch { message.error('加载失败') }
|
||||
setLoading(false)
|
||||
}
|
||||
async function updateWeight(nid: string, w: number) {
|
||||
@@ -33,110 +29,89 @@ 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)) } catch { message.error('更新失败') }
|
||||
}
|
||||
|
||||
const onlineCount = nodes.filter(n => n.online).length
|
||||
const offlineCount = nodes.length - onlineCount
|
||||
|
||||
const columns = [
|
||||
{
|
||||
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: 'online', key: 'online', width: 40,
|
||||
render: (v: boolean) => (
|
||||
<div style={{ width: 10, height: 10, borderRadius: '50%', background: v ? '#5B8C5A' : '#B54A4A',
|
||||
boxShadow: `0 0 6px ${v ? 'rgba(91,140,90,0.3)' : '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> },
|
||||
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: 'subnet', key: 'subnet', width: 130,
|
||||
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
|
||||
{
|
||||
title: 'CPU', key: 'cpu', width: 80,
|
||||
{ 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 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 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>
|
||||
? <Progress percent={Math.round(r.metrics.cpu_percent)} size="small" showInfo={false}
|
||||
strokeColor={r.metrics.cpu_percent > 80 ? '#B54A4A' : r.metrics.cpu_percent > 60 ? '#C28B3A' : '#C2693A'} />
|
||||
: <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,
|
||||
render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null
|
||||
? r.metrics.active_connections : <Text type="secondary">--</Text> },
|
||||
{
|
||||
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: 60,
|
||||
render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} />,
|
||||
},
|
||||
render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null ? 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}
|
||||
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 (
|
||||
<div>
|
||||
<div style={{ marginBottom: 28 }}>
|
||||
<Title level={3} style={{ margin: '0 0 4px', fontWeight: 600 }}>边缘节点</Title>
|
||||
<Text type="secondary">管理 CDN 边缘节点集群，监控实时状态</Text>
|
||||
<div style={{ marginBottom: 32 }}>
|
||||
<Title level={2} style={{ margin: '0 0 4px', fontWeight: 600, fontSize: 28 }}>边缘节点</Title>
|
||||
<Text style={{ color: '#949088' }}>管理 CDN 边缘节点集群，监控实时状态</Text>
|
||||
</div>
|
||||
|
||||
{strategy && (
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: 28 }}>
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: 32 }}>
|
||||
<Col xs={24} sm={6}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic title="均衡策略" value={strategyLabels[strategy.strategy] || strategy.strategy} valueStyle={{ fontSize: 22 }} />
|
||||
</Card>
|
||||
<div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
|
||||
<Statistic title="均衡策略" value={sL[strategy.strategy] || strategy.strategy} valueStyle={{ fontSize: 20 }} />
|
||||
</div>
|
||||
</Col>
|
||||
<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 ? '可用' : '不可用'}
|
||||
valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#B0ABA3', fontSize: 22 }} />
|
||||
</Card>
|
||||
valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#949088', fontSize: 20 }} />
|
||||
</div>
|
||||
</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>
|
||||
<div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
|
||||
<Statistic title="在线节点" value={onlineCount} suffix={<Text style={{ fontSize: 14, color: '#949088' }}>/ {nodes.length}</Text>}
|
||||
valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A', fontSize: 20 }} />
|
||||
</div>
|
||||
</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>
|
||||
<div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '24px 28px' }}>
|
||||
<Statistic title="离线节点" value={nodes.length - onlineCount}
|
||||
valueStyle={{ color: (nodes.length - onlineCount) > 0 ? '#B54A4A' : '#949088', fontSize: 20 }}
|
||||
prefix={(nodes.length - onlineCount) > 0 ? <WarningOutlined style={{ fontSize: 18 }} /> : undefined} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Card
|
||||
title={<Text strong style={{ fontSize: 16 }}>节点列表</Text>}
|
||||
extra={<Button icon={<ReloadOutlined />} onClick={loadData} type="text">刷新</Button>}
|
||||
style={{ borderRadius: 12 }}
|
||||
>
|
||||
<div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: '8px 8px 0' }}>
|
||||
<div style={{ padding: '16px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Text strong style={{ fontSize: 16 }}>节点列表</Text>
|
||||
<Button icon={<ReloadOutlined />} onClick={loadData} type="text">刷新</Button>
|
||||
</div>
|
||||
<Table dataSource={nodes} columns={columns} rowKey="id" loading={loading}
|
||||
pagination={false} size="small" scroll={{ x: 1150 }}
|
||||
locale={{ emptyText: '暂无边缘节点' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
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 { useBrand } from '../../brand/BrandContext'
|
||||
|
||||
@@ -14,12 +14,10 @@ const strategies = [
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { brand, refresh } = useBrand()
|
||||
|
||||
const [strategy, setStrategy] = useState('subnet')
|
||||
const [multicastEnabled, setMulticastEnabled] = useState(true)
|
||||
const [multicastAvailable, setMulticastAvailable] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const [brandName, setBrandName] = useState(brand.brand_name)
|
||||
const [brandTagline, setBrandTagline] = useState(brand.brand_tagline)
|
||||
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])
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const { data } = await api.get('/nodes/strategy')
|
||||
setStrategy(data.strategy)
|
||||
setMulticastEnabled(data.multicast_enabled)
|
||||
setMulticastAvailable(data.multicast_available)
|
||||
} catch { /* */ }
|
||||
try { const { data } = await api.get('/nodes/strategy'); setStrategy(data.strategy); setMulticastEnabled(data.multicast_enabled); setMulticastAvailable(data.multicast_available) } catch { /* */ }
|
||||
}
|
||||
|
||||
async function saveStrategy(val: string) {
|
||||
setSaving(true)
|
||||
try {
|
||||
await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled })
|
||||
setStrategy(val)
|
||||
message.success('策略已更新')
|
||||
} catch { message.error('更新失败') }
|
||||
try { await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled }); setStrategy(val); message.success('策略已更新') }
|
||||
catch { message.error('更新失败') }
|
||||
setSaving(false)
|
||||
}
|
||||
|
||||
async function toggleMulticast(val: boolean) {
|
||||
setMulticastEnabled(val)
|
||||
try {
|
||||
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
|
||||
message.success('组播设置已更新')
|
||||
} catch { message.error('更新失败') }
|
||||
try { await api.put('/nodes/strategy', { strategy, multicast_enabled: val }); message.success('已更新') } catch { message.error('更新失败') }
|
||||
}
|
||||
|
||||
async function saveBrand() {
|
||||
setBrandSaving(true)
|
||||
try {
|
||||
await api.put('/settings/brand', {
|
||||
brand_name: brandName,
|
||||
brand_tagline: brandTagline,
|
||||
brand_logo_url: brandLogoUrl,
|
||||
})
|
||||
await refresh()
|
||||
message.success('品牌设置已保存')
|
||||
} catch { message.error('保存失败') }
|
||||
try { await api.put('/settings/brand', { brand_name: brandName, brand_tagline: brandTagline, brand_logo_url: brandLogoUrl }); await refresh(); message.success('品牌设置已保存') }
|
||||
catch { message.error('保存失败') }
|
||||
setBrandSaving(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<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.Item label="均衡策略" help="子网优先：根据客户端IP所属子网自动选择最近节点">
|
||||
<Select value={strategy} onChange={saveStrategy} options={strategies} loading={saving} style={{ width: 280 }} />
|
||||
<Form.Item label="均衡策略" help="根据客户端 IP 所属子网自动选择最近的边缘节点">
|
||||
<Select value={strategy} onChange={saveStrategy} options={strategies} loading={saving} style={{ width: 280, borderRadius: 8 }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="组播">
|
||||
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
|
||||
@@ -85,29 +66,28 @@ export default function SettingsPage() {
|
||||
</Text>
|
||||
</Form.Item>
|
||||
</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.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 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 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>
|
||||
<Button type="primary" loading={brandSaving} onClick={saveBrand} size="large">
|
||||
<Button type="primary" loading={brandSaving} onClick={saveBrand} size="large" style={{ borderRadius: 8 }}>
|
||||
保存品牌设置
|
||||
</Button>
|
||||
<Text type="secondary" style={{ marginLeft: 12, fontSize: 13 }}>
|
||||
保存后全站立即生效
|
||||
</Text>
|
||||
<Text type="secondary" style={{ marginLeft: 12, fontSize: 13 }}>保存后全站立即生效</Text>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
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 { createStream } from '../../api/streams'
|
||||
|
||||
@@ -15,12 +15,7 @@ export default function StreamForm() {
|
||||
const handleSubmit = async (values: any) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await createStream({
|
||||
title: values.title,
|
||||
description: values.description,
|
||||
cover_url: values.cover_url,
|
||||
scheduled_at: values.scheduled_at?.toISOString(),
|
||||
})
|
||||
const res = await createStream({ 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 })
|
||||
message.success('直播已创建')
|
||||
} catch { message.error('创建失败') }
|
||||
@@ -30,45 +25,33 @@ export default function StreamForm() {
|
||||
if (result) {
|
||||
return (
|
||||
<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 style={{ marginBottom: 32 }}>
|
||||
<CheckCircleOutlined style={{ fontSize: 32, color: '#5B8C5A', marginBottom: 16 }} />
|
||||
<Title level={2} style={{ margin: '0 0 8px', fontWeight: 600 }}>直播已创建</Title>
|
||||
<Text style={{ color: '#5E5A52' }}>将以下信息提供给推流端即可开始直播</Text>
|
||||
</div>
|
||||
|
||||
<Card style={{ borderRadius: 12, marginBottom: 20 }}>
|
||||
<Space direction="vertical" size={20} style={{ width: '100%' }}>
|
||||
<div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: 32, marginBottom: 24 }}>
|
||||
<Space direction="vertical" size={24} style={{ width: '100%' }}>
|
||||
<div>
|
||||
<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',
|
||||
}}>
|
||||
<Text style={{ color: '#949088', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>推流码</Text>
|
||||
<div style={{ marginTop: 8, padding: '16px 20px', background: '#F7F5F1', borderRadius: 8, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
|
||||
{result.stream_key}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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',
|
||||
}}>
|
||||
<Text style={{ color: '#949088', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>RTMP 推流地址</Text>
|
||||
<div style={{ marginTop: 8, padding: '16px 20px', background: '#F7F5F1', borderRadius: 8, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
|
||||
{result.rtmp_url}
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Space size={12}>
|
||||
<Button size="large" icon={<CopyOutlined />} onClick={() => {
|
||||
navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`)
|
||||
message.success('已复制到剪贴板')
|
||||
message.success('已复制')
|
||||
}}>复制全部信息</Button>
|
||||
<Button type="primary" size="large" onClick={() => navigate('/admin/streams')}>返回列表</Button>
|
||||
</Space>
|
||||
@@ -79,34 +62,36 @@ export default function StreamForm() {
|
||||
return (
|
||||
<div style={{ maxWidth: 680 }}>
|
||||
<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 }}>
|
||||
<Title level={3} style={{ marginBottom: 8, fontWeight: 600 }}>创建直播</Title>
|
||||
<Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>填写直播信息，系统将生成推流码与 RTMP 地址</Text>
|
||||
<div style={{ background: '#fff', borderRadius: 12, border: '1px solid #EBE5DB', padding: 36 }}>
|
||||
<Title level={2} style={{ margin: '0 0 8px', fontWeight: 600 }}>创建直播</Title>
|
||||
<Text style={{ color: '#5E5A52', display: 'block', marginBottom: 36 }}>
|
||||
填写直播信息，系统将生成推流码与 RTMP 地址
|
||||
</Text>
|
||||
|
||||
<Form layout="vertical" onFinish={handleSubmit} size="large">
|
||||
<Form.Item name="title" label="直播标题"
|
||||
rules={[{ required: true, message: '请输入直播标题' }]}>
|
||||
<Input placeholder="输入直播标题" />
|
||||
<Input placeholder="输入直播标题" style={{ borderRadius: 8 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="简介">
|
||||
<TextArea rows={3} placeholder="直播内容简介（可选）" />
|
||||
<TextArea rows={3} placeholder="直播内容简介（可选）" style={{ borderRadius: 8 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="cover_url" label="封面图片 URL">
|
||||
<Input placeholder="https://..." />
|
||||
<Input placeholder="https://..." style={{ borderRadius: 8 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="scheduled_at" label="预定开播时间">
|
||||
<DatePicker showTime style={{ width: '100%' }} placeholder="选择日期（可选）" />
|
||||
<DatePicker showTime style={{ width: '100%', borderRadius: 8 }} placeholder="选择日期（可选）" />
|
||||
</Form.Item>
|
||||
<Divider style={{ margin: '8px 0 24px' }} />
|
||||
<div style={{ borderTop: '1px solid #EBE5DB', margin: '8px 0 24px' }} />
|
||||
<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>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -36,51 +36,29 @@ export default function StreamList() {
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ 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: 'ID', dataIndex: 'id', key: 'id', width: 60 },
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 90,
|
||||
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> },
|
||||
{ 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) => (
|
||||
<Space size={4}>
|
||||
<Tooltip title="复制推流码">
|
||||
<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>
|
||||
{r.status !== 'live' ? (
|
||||
<Tooltip title="开播">
|
||||
<Button size="small" type="primary" icon={<PlayCircleOutlined />} ghost
|
||||
onClick={e => { e.stopPropagation(); handleGoLive(r.id) }} />
|
||||
</Tooltip>
|
||||
<Tooltip title="开播"><Button size="small" type="primary" ghost icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} /></Tooltip>
|
||||
) : (
|
||||
<Tooltip title="结束直播">
|
||||
<Button size="small" icon={<StopOutlined />} danger
|
||||
onClick={e => { e.stopPropagation(); handleEnd(r.id) }} />
|
||||
</Tooltip>
|
||||
<Tooltip title="结束"><Button size="small" danger icon={<StopOutlined />} onClick={() => handleEnd(r.id)} /></Tooltip>
|
||||
)}
|
||||
<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>
|
||||
<Tooltip title="观看"><Button size="small" icon={<EyeOutlined />} onClick={() => window.open(`/watch/${r.id}`, '_blank')} /></Tooltip>
|
||||
<Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
|
||||
<Tooltip title="删除"><Button size="small" danger icon={<DeleteOutlined />} /></Tooltip>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
@@ -89,24 +67,23 @@ export default function StreamList() {
|
||||
|
||||
return (
|
||||
<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>
|
||||
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播列表</Title>
|
||||
<Text type="secondary" style={{ fontSize: 14 }}>管理所有直播流</Text>
|
||||
<Title level={2} style={{ margin: '0 0 4px', fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }}>直播列表</Title>
|
||||
<Text style={{ color: '#949088', fontSize: 14 }}>管理所有直播流</Text>
|
||||
</div>
|
||||
<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 style={{
|
||||
background: '#fff', borderRadius: 12,
|
||||
border: '1px solid #EBE5DB', padding: '8px 8px 0',
|
||||
}}>
|
||||
<Table dataSource={streams} columns={columns} rowKey="id" loading={loading}
|
||||
pagination={{ pageSize: 15, showSizeChanger: false }} size="middle"
|
||||
locale={{ emptyText: '暂无直播，创建第一条直播吧' }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+71
-5
@@ -1,8 +1,74 @@
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body, #root { height: 100%; }
|
||||
body {
|
||||
font-family: "Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif;
|
||||
:root {
|
||||
--bg-page: #F9F7F4;
|
||||
--bg-surface: #FFFFFF;
|
||||
--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;
|
||||
-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;
|
||||
}
|
||||
@@ -2,135 +2,76 @@ import type { ThemeConfig } from 'antd'
|
||||
|
||||
const theme: ThemeConfig = {
|
||||
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,
|
||||
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',
|
||||
colorWarning: '#C28B3A',
|
||||
colorError: '#B54A4A',
|
||||
colorInfo: '#6B8CA8',
|
||||
colorTextBase: '#141410',
|
||||
colorTextSecondary: '#5C5952',
|
||||
colorTextTertiary: '#8B867D',
|
||||
colorTextQuaternary: '#B0ABA3',
|
||||
colorBgBase: '#FCFAF7',
|
||||
colorBgContainer: '#FDFCFB',
|
||||
colorBgElevated: '#FFFFFF',
|
||||
colorBgLayout: '#F6F3ED',
|
||||
colorBorder: '#E6E0D6',
|
||||
colorBorderSecondary: '#F0EBE2',
|
||||
colorFill: '#F0EBE2',
|
||||
colorFillSecondary: '#F6F3ED',
|
||||
colorFillTertiary: '#FCFAF7',
|
||||
colorTextBase: '#1C1A17',
|
||||
colorTextSecondary: '#5E5A52',
|
||||
colorTextTertiary: '#949088',
|
||||
colorBgBase: '#F9F7F4',
|
||||
colorBgContainer: '#FFFFFF',
|
||||
colorBgLayout: '#F9F7F4',
|
||||
colorBgElevated: '#FAFAF8',
|
||||
colorBorder: '#EBE5DB',
|
||||
colorBorderSecondary: '#F3EFE9',
|
||||
colorFill: '#F3F0EC',
|
||||
colorFillSecondary: '#F7F5F1',
|
||||
borderRadius: 6,
|
||||
borderRadiusLG: 10,
|
||||
borderRadiusSM: 4,
|
||||
borderRadiusXS: 2,
|
||||
wireframe: false,
|
||||
fontWeightStrong: 600,
|
||||
paddingLG: 32,
|
||||
paddingMD: 24,
|
||||
paddingSM: 16,
|
||||
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',
|
||||
paddingLG: 32,
|
||||
paddingMD: 24,
|
||||
paddingSM: 16,
|
||||
boxShadow: '0 1px 2px rgba(28,26,23,0.03)',
|
||||
boxShadowSecondary: '0 4px 12px rgba(28,26,23,0.04)',
|
||||
boxShadowTertiary: '0 12px 32px rgba(28,26,23,0.06)',
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: '#FCFAF7',
|
||||
headerBg: '#FFFFFF',
|
||||
headerHeight: 60,
|
||||
headerPadding: '0 48px',
|
||||
siderBg: '#FBF9F6',
|
||||
bodyBg: '#F6F3ED',
|
||||
siderBg: '#FFFFFF',
|
||||
bodyBg: '#F9F7F4',
|
||||
},
|
||||
Menu: {
|
||||
itemBg: 'transparent',
|
||||
itemSelectedBg: '#EDE8DD',
|
||||
itemSelectedColor: '#141410',
|
||||
itemActiveBg: '#F0EBE2',
|
||||
itemColor: '#5C5952',
|
||||
itemSelectedBg: '#F3F0EC',
|
||||
itemSelectedColor: '#1C1A17',
|
||||
itemActiveBg: '#F7F5F1',
|
||||
itemColor: '#5E5A52',
|
||||
itemHeight: 44,
|
||||
fontSize: 14,
|
||||
iconSize: 18,
|
||||
collapsedIconSize: 18,
|
||||
},
|
||||
Card: {
|
||||
paddingLG: 28,
|
||||
borderRadiusLG: 10,
|
||||
colorBgContainer: '#FDFCFB',
|
||||
},
|
||||
Button: {
|
||||
borderRadius: 6,
|
||||
fontWeight: 500,
|
||||
controlHeight: 40,
|
||||
controlHeightLG: 48,
|
||||
controlHeightSM: 32,
|
||||
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: {
|
||||
headerBg: '#F6F3ED',
|
||||
headerColor: '#5C5952',
|
||||
rowHoverBg: '#F3EFE7',
|
||||
borderColor: '#E6E0D6',
|
||||
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',
|
||||
headerBg: '#F7F5F1',
|
||||
headerColor: '#5E5A52',
|
||||
rowHoverBg: '#F5F3F0',
|
||||
borderColor: '#EBE5DB',
|
||||
},
|
||||
Tag: { borderRadiusSM: 4 },
|
||||
Modal: { borderRadiusLG: 12, paddingLG: 28 },
|
||||
Tabs: { inkBarColor: '#C2693A', itemActiveColor: '#C2693A', itemHoverColor: '#D4A782' },
|
||||
Select: { borderRadius: 6 },
|
||||
Input: { borderRadius: 6 },
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Divider } from 'antd'
|
||||
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
|
||||
import { Row, Col, Tag, Skeleton } from 'antd'
|
||||
import { VideoCameraOutlined } from '@ant-design/icons'
|
||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||
import { useBrand } from '../../brand/BrandContext'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
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 },
|
||||
}
|
||||
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)' }
|
||||
|
||||
export default function HomePage() {
|
||||
const { brand } = useBrand()
|
||||
@@ -25,138 +18,181 @@ export default function HomePage() {
|
||||
}, [])
|
||||
|
||||
const sorted = [...streams].sort((a, b) => {
|
||||
const order: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 }
|
||||
return (order[a.status] ?? 9) - (order[b.status] ?? 9)
|
||||
const o: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 }
|
||||
return (o[a.status] ?? 9) - (o[b.status] ?? 9)
|
||||
})
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#F6F3ED', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{
|
||||
background: 'linear-gradient(180deg, #FCFAF7 0%, #F6F3ED 100%)',
|
||||
borderBottom: '1px solid #E6E0D6',
|
||||
padding: '64px 48px 56px',
|
||||
<div style={{ minHeight: '100vh', background: '#F9F7F4' }}>
|
||||
{/* Hero */}
|
||||
<section style={{
|
||||
padding: '96px 48px 80px',
|
||||
maxWidth: 1200, 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: 44, marginBottom: 20 }} />
|
||||
)}
|
||||
<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_logo_url && (
|
||||
<img src={brand.brand_logo_url} alt={brand.brand_name}
|
||||
style={{ height: 36, marginBottom: 24, display: 'block' }} />
|
||||
)}
|
||||
<h1 style={{
|
||||
fontSize: 'clamp(36px, 5vw, 56px)',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.1,
|
||||
letterSpacing: '-0.03em',
|
||||
margin: 0,
|
||||
color: '#1C1A17',
|
||||
}}>
|
||||
{brand.brand_name}
|
||||
</h1>
|
||||
{brand.brand_tagline && (
|
||||
<p style={{
|
||||
fontSize: 'clamp(16px, 2vw, 20px)',
|
||||
color: '#5E5A52', marginTop: 16,
|
||||
fontWeight: 400, lineHeight: 1.5,
|
||||
}}>
|
||||
{brand.brand_name}
|
||||
</Title>
|
||||
{brand.brand_tagline && (
|
||||
<Text style={{ fontSize: 18, marginTop: 12, display: 'block', fontWeight: 400, color: '#5C5952' }}>
|
||||
{brand.brand_tagline}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{brand.brand_tagline}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<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" style={{ fontSize: 15 }}>共 {sorted.length} 个</Text>
|
||||
{/* Streams */}
|
||||
<section style={{
|
||||
maxWidth: 1200, margin: '0 auto',
|
||||
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>
|
||||
|
||||
{loading ? (
|
||||
<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: 12 }}><Skeleton active paragraph={{ rows: 3 }} /></Card>
|
||||
<Row gutter={[32, 40]}>
|
||||
{[1,2,3,4,5,6].map(i => (
|
||||
<Col key={i} xs={24} sm={12} lg={8}>
|
||||
<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>
|
||||
))}
|
||||
</Row>
|
||||
) : sorted.length === 0 ? (
|
||||
<div style={{
|
||||
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 }} />
|
||||
<Title level={4} type="secondary" style={{ fontWeight: 400 }}>暂无直播</Title>
|
||||
<Text type="secondary">当前没有正在播出或排期的直播节目</Text>
|
||||
<VideoCameraOutlined style={{ fontSize: 40, color: '#C4BCB0', marginBottom: 16 }} />
|
||||
<h3 style={{ fontSize: 18, fontWeight: 500, color: '#5E5A52' }}>暂无直播</h3>
|
||||
<p style={{ color: '#949088', fontSize: 14, marginTop: 4 }}>当前没有正在播出或排期的直播节目</p>
|
||||
</div>
|
||||
) : (
|
||||
<Row gutter={[28, 28]}>
|
||||
<Row gutter={[32, 40]}>
|
||||
{sorted.map(s => {
|
||||
const meta = statusMeta[s.status] ?? statusMeta.pending
|
||||
const isLive = s.status === 'live'
|
||||
const isPending = s.status === 'pending'
|
||||
return (
|
||||
<Col key={s.id} xs={24} sm={12} md={8} lg={8}>
|
||||
<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: 192,
|
||||
position: 'relative',
|
||||
background: s.cover_url
|
||||
? `url(${s.cover_url}) center/cover no-repeat`
|
||||
: '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.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>
|
||||
)}
|
||||
{!isLive && (
|
||||
<div style={{ position: 'absolute', bottom: 12, left: 12 }}>
|
||||
<Tag color={meta.color} style={{ margin: 0, fontWeight: 500, border: 0, fontSize: 12 }}>
|
||||
{meta.icon} {meta.label}
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
<Col key={s.id} xs={24} sm={12} lg={8}>
|
||||
<div
|
||||
onClick={() => navigate(`/watch/${s.id}`)}
|
||||
style={{
|
||||
background: '#fff',
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s, box-shadow 0.2s',
|
||||
border: `1px solid ${isLive ? '#E8D0BE' : '#EBE5DB'}`,
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(28,26,23,0.06)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
>
|
||||
<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>
|
||||
{/* Cover */}
|
||||
<div style={{
|
||||
height: 200, position: 'relative',
|
||||
background: s.cover_url
|
||||
? `url(${s.cover_url}) center/cover no-repeat`
|
||||
: '#2C2824',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
{!s.cover_url && (
|
||||
<VideoCameraOutlined style={{ color: 'rgba(249,247,244,0.08)', fontSize: 56 }} />
|
||||
)}
|
||||
{/* Status badge */}
|
||||
{isLive && (
|
||||
<div style={{
|
||||
position: 'absolute', top: 16, left: 16,
|
||||
display: 'inline-flex', alignItems: 'center',
|
||||
background: 'rgba(229,57,53,0.92)', color: '#fff',
|
||||
padding: '4px 12px', borderRadius: 4,
|
||||
fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
|
||||
}}>
|
||||
<span style={liveDot} />LIVE
|
||||
</div>
|
||||
)}
|
||||
{isPending && (
|
||||
<div style={{
|
||||
position: 'absolute', top: 16, left: 16,
|
||||
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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Info */}
|
||||
<div style={{ padding: '20px 24px 24px' }}>
|
||||
<h3 style={{
|
||||
fontSize: 17, fontWeight: 600, margin: '0 0 6px',
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
letterSpacing: '-0.01em',
|
||||
}}>
|
||||
{s.title}
|
||||
</h3>
|
||||
<p style={{
|
||||
fontSize: 14, color: '#949088', margin: 0,
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
lineHeight: 1.4,
|
||||
}}>
|
||||
{s.description || '暂无简介'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
)
|
||||
})}
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style={{
|
||||
borderTop: '1px solid #E6E0D6',
|
||||
{/* Footer */}
|
||||
<footer style={{
|
||||
borderTop: '1px solid #EBE5DB',
|
||||
padding: '24px 48px',
|
||||
textAlign: 'center',
|
||||
background: '#FCFAF7',
|
||||
background: '#fff',
|
||||
}}>
|
||||
<Text style={{ fontSize: 13, color: '#8B867D' }}>
|
||||
<span style={{ fontSize: 13, color: '#949088' }}>
|
||||
{brand.brand_name} © {new Date().getFullYear()}
|
||||
</Text>
|
||||
</div>
|
||||
</span>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
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 Hls from 'hls.js'
|
||||
import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams'
|
||||
import { useBrand } from '../../brand/BrandContext'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
const { Text } = Typography
|
||||
|
||||
export default function WatchPage() {
|
||||
const { brand } = useBrand()
|
||||
@@ -56,28 +56,26 @@ export default function WatchPage() {
|
||||
const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0]
|
||||
if (!quality) return
|
||||
if (hls) hls.destroy()
|
||||
const url = quality.url
|
||||
if (Hls.isSupported()) {
|
||||
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.ERROR, (_e, d) => { if (d.fatal) message.warning('播放异常，尝试切换线路...') })
|
||||
setHls(hi)
|
||||
} else if (videoRef.current!.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
videoRef.current!.src = url
|
||||
videoRef.current!.src = quality.url
|
||||
}
|
||||
}, [activeLine, activeQuality, info])
|
||||
|
||||
useEffect(() => { document.title = info ? `${info.title} - ${brand.brand_name}` : brand.brand_name }, [info, brand])
|
||||
|
||||
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" />
|
||||
</div>
|
||||
)
|
||||
|
||||
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="未找到该直播" />
|
||||
</div>
|
||||
)
|
||||
@@ -85,52 +83,46 @@ export default function WatchPage() {
|
||||
const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
|
||||
|
||||
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={{
|
||||
height: 56, minHeight: 56,
|
||||
background: 'rgba(26,24,21,0.98)',
|
||||
borderBottom: '1px solid rgba(230,224,214,0.06)',
|
||||
height: 52, minHeight: 52,
|
||||
background: 'rgba(26,24,20,0.97)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
borderBottom: '1px solid rgba(235,229,219,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>
|
||||
<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>
|
||||
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#949088' }}
|
||||
onClick={() => navigate('/')}>{brand.brand_name}</Button>
|
||||
<div style={{ width: 1, height: 18, background: 'rgba(235,229,219,0.1)' }} />
|
||||
<Text style={{ color: '#EBE5DB', fontSize: 14, fontWeight: 500 }}>{info.title}</Text>
|
||||
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ fontWeight: 600, fontSize: 11 }}>
|
||||
{statusLabel}
|
||||
</Tag>
|
||||
</Space>
|
||||
<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 }} />
|
||||
<Text style={{ color: '#949088', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5E5A52', fontSize: 12 }} />
|
||||
{info.multicast_available ? '组播' : '单播'}
|
||||
</div>
|
||||
</Text>
|
||||
<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}` }))}
|
||||
<Select value={activeLine} onChange={setActiveLine} style={{ width: 150 }} size="small"
|
||||
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: '32px',
|
||||
}}>
|
||||
{/* Video */}
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
|
||||
<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)',
|
||||
aspectRatio: '16/9', maxHeight: 'calc(100vh - 132px)',
|
||||
background: '#0A0A08', borderRadius: 12, overflow: 'hidden',
|
||||
position: 'relative',
|
||||
boxShadow: '0 12px 48px rgba(0,0,0,0.5)',
|
||||
}}>
|
||||
<video ref={videoRef} controls autoPlay playsInline
|
||||
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
|
||||
@@ -138,12 +130,12 @@ export default function WatchPage() {
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
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}>
|
||||
<Spin size="large" />
|
||||
<Text style={{
|
||||
color: '#8B867D', fontSize: 17,
|
||||
color: '#949088', fontSize: 17,
|
||||
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
|
||||
}}>
|
||||
等待主播开播...
|
||||
|
||||
Reference in new issue
Block a user