品牌化重构: StreamCore + 现代UI主题 + 英文界面
- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标)
- 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体
白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感
- 首页移除管理入口,纯观众视角(渐变横幅+卡片列表)
- 统一品牌名称 StreamCore (替换LiveStream)
- 全部界面英文(antd默认locale,去除zhCN)
- 登录页渐变+卡片居中布局
This commit is contained in:
1 parent
b81a7bf293
commit
5f19fc6aa5
14 files changed
+253
-225
No files matched your search
+1
-1
@@ -19,7 +19,7 @@ async def lifespan(app: FastAPI):
|
|||||||
transcode_mgr.stop_all()
|
transcode_mgr.stop_all()
|
||||||
|
|
||||||
|
|
||||||
app = FastAPI(title="LiveStream Platform", lifespan=lifespan)
|
app = FastAPI(title="StreamCore", lifespan=lifespan)
|
||||||
|
|
||||||
app.add_middleware(
|
app.add_middleware(
|
||||||
CORSMiddleware,
|
CORSMiddleware,
|
||||||
|
|||||||
+1
-4
@@ -3,10 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>LiveStream Platform</title>
|
<title>StreamCore</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
import { ConfigProvider } from 'antd'
|
import { ConfigProvider } from 'antd'
|
||||||
import zhCN from 'antd/locale/zh_CN'
|
|
||||||
import theme from './theme/anthropic'
|
import theme from './theme/anthropic'
|
||||||
import AdminLayout from './admin/AdminLayout'
|
import AdminLayout from './admin/AdminLayout'
|
||||||
import LoginPage from './admin/LoginPage'
|
import LoginPage from './admin/LoginPage'
|
||||||
@@ -31,7 +30,7 @@ function AdminGuard({ children }: { children: React.ReactNode }) {
|
|||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<ConfigProvider theme={theme} locale={zhCN}>
|
<ConfigProvider theme={theme}>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/watch/:id" element={<WatchPage />} />
|
<Route path="/watch/:id" element={<WatchPage />} />
|
||||||
|
|||||||
@@ -15,11 +15,11 @@ const { Sider, Content, Header } = Layout
|
|||||||
const { Text } = Typography
|
const { Text } = Typography
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ key: '/admin', icon: <DashboardOutlined />, label: '概览' },
|
{ key: '/admin', icon: <DashboardOutlined />, label: 'Dashboard' },
|
||||||
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: '直播列表' },
|
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: 'Streams' },
|
||||||
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: '创建直播' },
|
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: 'New Stream' },
|
||||||
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: '边缘节点' },
|
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: 'Nodes' },
|
||||||
{ key: '/admin/settings', icon: <SettingOutlined />, label: '系统设置' },
|
{ key: '/admin/settings', icon: <SettingOutlined />, label: 'Settings' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function AdminLayout() {
|
export default function AdminLayout() {
|
||||||
@@ -44,7 +44,7 @@ export default function AdminLayout() {
|
|||||||
onCollapse={setCollapsed}
|
onCollapse={setCollapsed}
|
||||||
width={220}
|
width={220}
|
||||||
style={{
|
style={{
|
||||||
borderRight: '1px solid #E8E4DD',
|
borderRight: '1px solid #E8ECF1',
|
||||||
background: '#FFFFFF',
|
background: '#FFFFFF',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -53,10 +53,16 @@ export default function AdminLayout() {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
borderBottom: '1px solid #E8E4DD',
|
borderBottom: '1px solid #E8ECF1',
|
||||||
|
background: '#1E3A5F',
|
||||||
|
color: '#FFFFFF',
|
||||||
}}>
|
}}>
|
||||||
<Text strong style={{ fontSize: collapsed ? 14 : 18, letterSpacing: -0.5 }}>
|
<Text strong style={{
|
||||||
{collapsed ? 'LS' : 'LiveStream'}
|
fontSize: collapsed ? 14 : 18,
|
||||||
|
letterSpacing: -0.5,
|
||||||
|
color: '#FFFFFF',
|
||||||
|
}}>
|
||||||
|
{collapsed ? 'SC' : 'StreamCore'}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
<Menu
|
<Menu
|
||||||
@@ -70,7 +76,7 @@ export default function AdminLayout() {
|
|||||||
<Layout>
|
<Layout>
|
||||||
<Header style={{
|
<Header style={{
|
||||||
background: '#FFFFFF',
|
background: '#FFFFFF',
|
||||||
borderBottom: '1px solid #E8E4DD',
|
borderBottom: '1px solid #E8ECF1',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'flex-end',
|
justifyContent: 'flex-end',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -81,7 +87,7 @@ export default function AdminLayout() {
|
|||||||
icon={<LogoutOutlined />}
|
icon={<LogoutOutlined />}
|
||||||
onClick={handleLogout}
|
onClick={handleLogout}
|
||||||
>
|
>
|
||||||
退出登录
|
Logout
|
||||||
</Button>
|
</Button>
|
||||||
</Header>
|
</Header>
|
||||||
<Content style={{ padding: 32, overflow: 'auto' }}>
|
<Content style={{ padding: 32, overflow: 'auto' }}>
|
||||||
|
|||||||
@@ -14,10 +14,10 @@ export default function LoginPage() {
|
|||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
await login(values.password)
|
await login(values.password)
|
||||||
message.success('登录成功')
|
message.success('Login successful')
|
||||||
navigate('/admin')
|
navigate('/admin')
|
||||||
} catch {
|
} catch {
|
||||||
message.error('密码错误')
|
message.error('Invalid password')
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
@@ -29,28 +29,28 @@ export default function LoginPage() {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
background: '#FAF8F5',
|
background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 50%, #F5F6FA 50%)',
|
||||||
}}>
|
}}>
|
||||||
<Card style={{ width: 400, boxShadow: '0 2px 16px rgba(0,0,0,0.04)' }}>
|
<Card style={{ width: 400, borderRadius: 12, boxShadow: '0 8px 32px rgba(0,0,0,0.08)' }}>
|
||||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div style={{ textAlign: 'center' }}>
|
||||||
<Title level={2} style={{ marginBottom: 4 }}>LiveStream</Title>
|
<Title level={2} style={{ marginBottom: 4, color: '#1E3A5F', fontWeight: 700 }}>StreamCore</Title>
|
||||||
<Text type="secondary">管理后台</Text>
|
<Text type="secondary">Admin Console</Text>
|
||||||
</div>
|
</div>
|
||||||
<Form onFinish={handleSubmit} layout="vertical">
|
<Form onFinish={handleSubmit} layout="vertical">
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="password"
|
name="password"
|
||||||
rules={[{ required: true, message: '请输入密码' }]}
|
rules={[{ required: true, message: 'Please enter password' }]}
|
||||||
>
|
>
|
||||||
<Input.Password
|
<Input.Password
|
||||||
prefix={<LockOutlined />}
|
prefix={<LockOutlined />}
|
||||||
placeholder="密码"
|
placeholder="Password"
|
||||||
size="large"
|
size="large"
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Button type="primary" htmlType="submit" loading={loading} block size="large">
|
<Button type="primary" htmlType="submit" loading={loading} block size="large">
|
||||||
登录
|
Sign In
|
||||||
</Button>
|
</Button>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
|
import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
|
||||||
import { VideoCameraOutlined, EyeOutlined, SignalFilled } from '@ant-design/icons'
|
import { VideoCameraOutlined, SignalFilled, PlayCircleOutlined } from '@ant-design/icons'
|
||||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||||
|
|
||||||
const { Title } = Typography
|
const { Title, Text } = Typography
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const [streams, setStreams] = useState<StreamInfo[]>([])
|
const [streams, setStreams] = useState<StreamInfo[]>([])
|
||||||
@@ -27,60 +27,65 @@ export default function Dashboard() {
|
|||||||
const pendingCount = streams.filter((s) => s.status === 'pending').length
|
const pendingCount = streams.filter((s) => s.status === 'pending').length
|
||||||
|
|
||||||
const statusMap: Record<string, { color: string; label: string }> = {
|
const statusMap: Record<string, { color: string; label: string }> = {
|
||||||
pending: { color: 'blue', label: '待开播' },
|
pending: { color: 'blue', label: 'Scheduled' },
|
||||||
live: { color: 'green', label: '直播中' },
|
live: { color: 'green', label: 'Live' },
|
||||||
ended: { color: 'default', label: '已结束' },
|
ended: { color: 'default', label: 'Ended' },
|
||||||
cancelled: { color: 'red', label: '已取消' },
|
cancelled: { color: 'red', label: 'Cancelled' },
|
||||||
}
|
}
|
||||||
|
|
||||||
const recentColumns = [
|
const recentColumns = [
|
||||||
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||||
{
|
{
|
||||||
title: '状态', dataIndex: 'status', key: 'status',
|
title: 'Status', dataIndex: 'status', key: 'status',
|
||||||
render: (status: string) => {
|
render: (status: string) => {
|
||||||
const s = statusMap[status] || { color: 'default', label: status }
|
const s = statusMap[status] || { color: 'default', label: status }
|
||||||
return <Tag color={s.color}>{s.label}</Tag>
|
return <Tag color={s.color}>{s.label}</Tag>
|
||||||
},
|
},
|
||||||
|
width: 110,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Created', 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) },
|
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Title level={3} style={{ marginBottom: 24 }}>概览</Title>
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Overview</Title>
|
||||||
<Row gutter={[24, 24]}>
|
<Row gutter={[24, 24]}>
|
||||||
<Col xs={24} sm={8}>
|
<Col xs={24} sm={8}>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="直播中"
|
title="Live Now"
|
||||||
value={liveCount}
|
value={liveCount}
|
||||||
prefix={<SignalFilled style={{ color: '#52c41a' }} />}
|
prefix={<SignalFilled style={{ color: '#2E7D32' }} />}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} sm={8}>
|
<Col xs={24} sm={8}>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="待开播"
|
title="Scheduled"
|
||||||
value={pendingCount}
|
value={pendingCount}
|
||||||
prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />}
|
prefix={<VideoCameraOutlined style={{ color: '#1565C0' }} />}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} sm={8}>
|
<Col xs={24} sm={8}>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="直播总数"
|
title="Total Streams"
|
||||||
value={streams.length}
|
value={streams.length}
|
||||||
prefix={<EyeOutlined />}
|
prefix={<PlayCircleOutlined />}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Card title="最近直播" style={{ marginTop: 24 }}>
|
<Card title="Recent Streams" style={{ marginTop: 24, borderRadius: 12 }}>
|
||||||
<Table
|
<Table
|
||||||
dataSource={streams.slice(0, 10)}
|
dataSource={streams.slice(0, 10)}
|
||||||
columns={recentColumns}
|
columns={recentColumns}
|
||||||
|
|||||||
@@ -24,9 +24,9 @@ interface StrategyInfo {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const strategyLabels: Record<string, string> = {
|
const strategyLabels: Record<string, string> = {
|
||||||
'round-robin': '轮询',
|
'round-robin': 'Round-Robin',
|
||||||
'weighted': '权重',
|
'weighted': 'Weighted',
|
||||||
'least-conn': '最少连接',
|
'least-conn': 'Least-Conn',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function NodeManager() {
|
export default function NodeManager() {
|
||||||
@@ -45,15 +45,15 @@ export default function NodeManager() {
|
|||||||
])
|
])
|
||||||
setNodes(nodesRes.data)
|
setNodes(nodesRes.data)
|
||||||
setStrategy(strategyRes.data)
|
setStrategy(strategyRes.data)
|
||||||
} catch { message.error('加载失败') }
|
} catch { message.error('Failed to load') }
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateWeight(nodeId: string, weight: number) {
|
async function updateWeight(nodeId: string, weight: number) {
|
||||||
try {
|
try {
|
||||||
await api.put(`/nodes/${nodeId}`, { weight })
|
await api.put(`/nodes/${nodeId}`, { weight })
|
||||||
message.success('已更新')
|
message.success('Updated')
|
||||||
} catch { message.error('更新失败') }
|
} catch { message.error('Failed') }
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleNode(nodeId: string, enabled: boolean) {
|
async function toggleNode(nodeId: string, enabled: boolean) {
|
||||||
@@ -62,17 +62,17 @@ export default function NodeManager() {
|
|||||||
try {
|
try {
|
||||||
await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled })
|
await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled })
|
||||||
setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n)))
|
setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n)))
|
||||||
message.success('已更新')
|
message.success('Updated')
|
||||||
} catch { message.error('更新失败') }
|
} catch { message.error('Failed') }
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: '名称', dataIndex: 'name', key: 'name' },
|
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||||
{ title: '主机', dataIndex: 'host', key: 'host' },
|
{ title: 'Host', dataIndex: 'host', key: 'host' },
|
||||||
{ title: 'HLS 端口', dataIndex: 'hls_port', key: 'hls_port', width: 100 },
|
{ title: 'HLS Port', dataIndex: 'hls_port', key: 'hls_port', width: 100 },
|
||||||
{ title: 'API 端口', dataIndex: 'api_port', key: 'api_port', width: 100 },
|
{ title: 'API Port', dataIndex: 'api_port', key: 'api_port', width: 100 },
|
||||||
{
|
{
|
||||||
title: '权重', dataIndex: 'weight', key: 'weight', width: 140,
|
title: 'Weight', dataIndex: 'weight', key: 'weight', width: 140,
|
||||||
render: (_: number, record: NodeInfo) => (
|
render: (_: number, record: NodeInfo) => (
|
||||||
<InputNumber
|
<InputNumber
|
||||||
min={0}
|
min={0}
|
||||||
@@ -89,7 +89,7 @@ export default function NodeManager() {
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '启用', dataIndex: 'enabled', key: 'enabled', width: 80,
|
title: 'Enabled', dataIndex: 'enabled', key: 'enabled', width: 80,
|
||||||
render: (_: any, record: NodeInfo) => (
|
render: (_: any, record: NodeInfo) => (
|
||||||
<Switch
|
<Switch
|
||||||
checked={record.enabled}
|
checked={record.enabled}
|
||||||
@@ -99,45 +99,46 @@ export default function NodeManager() {
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '状态', key: 'health', width: 100,
|
title: 'Health', key: 'health', width: 100,
|
||||||
render: () => <Tag icon={<CheckCircleOutlined />} color="success">在线</Tag>,
|
render: () => <Tag icon={<CheckCircleOutlined />} color="success">Online</Tag>,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Title level={3} style={{ marginBottom: 24 }}>边缘节点管理</Title>
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Edge Nodes</Title>
|
||||||
|
|
||||||
{strategy && (
|
{strategy && (
|
||||||
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
|
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
|
||||||
<Col xs={24} sm={8}>
|
<Col xs={24} sm={8}>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="负载均衡策略"
|
title="Strategy"
|
||||||
value={strategyLabels[strategy.strategy] || strategy.strategy}
|
value={strategyLabels[strategy.strategy] || strategy.strategy}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} sm={8}>
|
<Col xs={24} sm={8}>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="组播状态"
|
title="Multicast"
|
||||||
value={strategy.multicast_available ? '可用' : '不可用'}
|
value={strategy.multicast_available ? 'Available' : 'N/A'}
|
||||||
valueStyle={{ color: strategy.multicast_available ? '#52c41a' : '#999' }}
|
valueStyle={{ color: strategy.multicast_available ? '#2E7D32' : '#999' }}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} sm={8}>
|
<Col xs={24} sm={8}>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Statistic title="边缘节点数" value={nodes.length} />
|
<Statistic title="Nodes" value={nodes.length} />
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Card
|
<Card
|
||||||
title="节点列表"
|
title="Node List"
|
||||||
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>}
|
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>Refresh</Button>}
|
||||||
|
style={{ borderRadius: 12 }}
|
||||||
>
|
>
|
||||||
<Table
|
<Table
|
||||||
dataSource={nodes}
|
dataSource={nodes}
|
||||||
|
|||||||
@@ -7,9 +7,9 @@ import api from '../../api/client'
|
|||||||
const { Title } = Typography
|
const { Title } = Typography
|
||||||
|
|
||||||
const strategies = [
|
const strategies = [
|
||||||
{ value: 'round-robin', label: '轮询 (Round-Robin)' },
|
{ value: 'round-robin', label: 'Round-Robin' },
|
||||||
{ value: 'weighted', label: '权重 (Weighted)' },
|
{ value: 'weighted', label: 'Weighted' },
|
||||||
{ value: 'least-conn', label: '最少连接 (Least Connections)' },
|
{ value: 'least-conn', label: 'Least Connections' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
@@ -36,8 +36,8 @@ export default function SettingsPage() {
|
|||||||
try {
|
try {
|
||||||
await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled })
|
await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled })
|
||||||
setStrategy(val)
|
setStrategy(val)
|
||||||
message.success('策略已更新')
|
message.success('Strategy updated')
|
||||||
} catch { message.error('更新失败') }
|
} catch { message.error('Update failed') }
|
||||||
setSaving(false)
|
setSaving(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -45,17 +45,17 @@ export default function SettingsPage() {
|
|||||||
setMulticastEnabled(val)
|
setMulticastEnabled(val)
|
||||||
try {
|
try {
|
||||||
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
|
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
|
||||||
message.success('组播设置已更新')
|
message.success('Multicast settings updated')
|
||||||
} catch { message.error('更新失败') }
|
} catch { message.error('Update failed') }
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ maxWidth: 720 }}>
|
<div style={{ maxWidth: 720 }}>
|
||||||
<Title level={3} style={{ marginBottom: 24 }}>系统设置</Title>
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>System Settings</Title>
|
||||||
|
|
||||||
<Card title="负载均衡" style={{ marginBottom: 24 }}>
|
<Card title="Load Balancing" style={{ marginBottom: 24, borderRadius: 12 }}>
|
||||||
<Descriptions column={1} labelStyle={{ width: 140 }}>
|
<Descriptions column={1} labelStyle={{ width: 120 }}>
|
||||||
<Descriptions.Item label="均衡策略">
|
<Descriptions.Item label="Strategy">
|
||||||
<Select
|
<Select
|
||||||
value={strategy}
|
value={strategy}
|
||||||
onChange={saveStrategy}
|
onChange={saveStrategy}
|
||||||
@@ -67,14 +67,14 @@ export default function SettingsPage() {
|
|||||||
</Descriptions>
|
</Descriptions>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card title="组播设置">
|
<Card title="Multicast" style={{ borderRadius: 12 }}>
|
||||||
<Descriptions column={1} labelStyle={{ width: 140 }}>
|
<Descriptions column={1} labelStyle={{ width: 120 }}>
|
||||||
<Descriptions.Item label="启用组播">
|
<Descriptions.Item label="Enable">
|
||||||
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
|
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="网络状态">
|
<Descriptions.Item label="Network Status">
|
||||||
<span style={{ color: multicastAvailable ? '#52c41a' : '#999' }}>
|
<span style={{ color: multicastAvailable ? '#2E7D32' : '#999' }}>
|
||||||
{multicastAvailable ? '可用 — 优先使用组播分发' : '不可用 — 回退至单播'}
|
{multicastAvailable ? 'Available - using multicast' : 'Unavailable - fallback to unicast'}
|
||||||
</span>
|
</span>
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
</Descriptions>
|
</Descriptions>
|
||||||
|
|||||||
@@ -24,9 +24,9 @@ export default function StreamForm() {
|
|||||||
scheduled_at: values.scheduled_at?.toISOString(),
|
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('Stream created')
|
||||||
} catch {
|
} catch {
|
||||||
message.error('创建失败')
|
message.error('Failed to create')
|
||||||
}
|
}
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
@@ -34,17 +34,17 @@ export default function StreamForm() {
|
|||||||
if (result) {
|
if (result) {
|
||||||
return (
|
return (
|
||||||
<div style={{ maxWidth: 640 }}>
|
<div style={{ maxWidth: 640 }}>
|
||||||
<Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Stream Created</Title>
|
||||||
<Alert
|
<Alert
|
||||||
type="success"
|
type="success"
|
||||||
message="推流信息已生成"
|
message="Push information generated"
|
||||||
description={
|
description={
|
||||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||||
<div>
|
<div>
|
||||||
<Text strong>推流码 (UUID):</Text>
|
<Text strong>Stream Key (UUID):</Text>
|
||||||
<div style={{
|
<div style={{
|
||||||
marginTop: 8, padding: 12,
|
marginTop: 8, padding: 12,
|
||||||
background: '#F5F2EE', borderRadius: 6,
|
background: '#F5F6FA', borderRadius: 8,
|
||||||
fontFamily: 'monospace', fontSize: 14,
|
fontFamily: 'monospace', fontSize: 14,
|
||||||
wordBreak: 'break-all',
|
wordBreak: 'break-all',
|
||||||
}}>
|
}}>
|
||||||
@@ -52,10 +52,10 @@ export default function StreamForm() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Text strong>RTMP 推流地址:</Text>
|
<Text strong>RTMP Push URL:</Text>
|
||||||
<div style={{
|
<div style={{
|
||||||
marginTop: 8, padding: 12,
|
marginTop: 8, padding: 12,
|
||||||
background: '#F5F2EE', borderRadius: 6,
|
background: '#F5F6FA', borderRadius: 8,
|
||||||
fontFamily: 'monospace', fontSize: 14,
|
fontFamily: 'monospace', fontSize: 14,
|
||||||
wordBreak: 'break-all',
|
wordBreak: 'break-all',
|
||||||
}}>
|
}}>
|
||||||
@@ -72,15 +72,15 @@ export default function StreamForm() {
|
|||||||
icon={<CopyOutlined />}
|
icon={<CopyOutlined />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigator.clipboard.writeText(
|
navigator.clipboard.writeText(
|
||||||
`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`
|
`Stream Key: ${result.stream_key}\nRTMP URL: ${result.rtmp_url}`
|
||||||
)
|
)
|
||||||
message.success('已复制到剪贴板')
|
message.success('Copied')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
复制全部
|
Copy All
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="primary" onClick={() => navigate('/admin/streams')}>
|
<Button type="primary" onClick={() => navigate('/admin/streams')}>
|
||||||
返回列表
|
Back to List
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
@@ -95,30 +95,30 @@ export default function StreamForm() {
|
|||||||
onClick={() => navigate('/admin/streams')}
|
onClick={() => navigate('/admin/streams')}
|
||||||
style={{ marginBottom: 16 }}
|
style={{ marginBottom: 16 }}
|
||||||
>
|
>
|
||||||
返回
|
Back
|
||||||
</Button>
|
</Button>
|
||||||
<Card>
|
<Card style={{ borderRadius: 12 }}>
|
||||||
<Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>New Stream</Title>
|
||||||
<Form layout="vertical" onFinish={handleSubmit}>
|
<Form layout="vertical" onFinish={handleSubmit}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="title"
|
name="title"
|
||||||
label="直播标题"
|
label="Stream Title"
|
||||||
rules={[{ required: true, message: '请输入直播标题' }]}
|
rules={[{ required: true, message: 'Please enter a title' }]}
|
||||||
>
|
>
|
||||||
<Input placeholder="输入直播标题" size="large" />
|
<Input placeholder="Enter stream title" size="large" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name="description" label="直播简介">
|
<Form.Item name="description" label="Description">
|
||||||
<TextArea rows={3} placeholder="可选,直播内容简介" />
|
<TextArea rows={3} placeholder="Optional description" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name="cover_url" label="封面图片地址">
|
<Form.Item name="cover_url" label="Cover Image URL">
|
||||||
<Input placeholder="https://..." />
|
<Input placeholder="https://..." />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name="scheduled_at" label="预定开播时间">
|
<Form.Item name="scheduled_at" label="Scheduled Time">
|
||||||
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择预定时间" />
|
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="Select schedule time" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Button type="primary" htmlType="submit" loading={loading} size="large" block>
|
<Button type="primary" htmlType="submit" loading={loading} size="large" block>
|
||||||
创建直播
|
Create Stream
|
||||||
</Button>
|
</Button>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
|
|||||||
@@ -9,10 +9,10 @@ import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '
|
|||||||
const { Title, Text } = Typography
|
const { Title, Text } = Typography
|
||||||
|
|
||||||
const statusMap: Record<string, { color: string; label: string }> = {
|
const statusMap: Record<string, { color: string; label: string }> = {
|
||||||
pending: { color: 'blue', label: '待开播' },
|
pending: { color: 'blue', label: 'Scheduled' },
|
||||||
live: { color: 'green', label: '直播中' },
|
live: { color: 'green', label: 'Live' },
|
||||||
ended: { color: 'default', label: '已结束' },
|
ended: { color: 'default', label: 'Ended' },
|
||||||
cancelled: { color: 'red', label: '已取消' },
|
cancelled: { color: 'red', label: 'Cancelled' },
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function StreamList() {
|
export default function StreamList() {
|
||||||
@@ -27,47 +27,50 @@ export default function StreamList() {
|
|||||||
try {
|
try {
|
||||||
const data = await fetchStreams()
|
const data = await fetchStreams()
|
||||||
setStreams(data)
|
setStreams(data)
|
||||||
} catch { message.error('加载失败') }
|
} catch { message.error('Failed to load streams') }
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDelete(id: number) {
|
async function handleDelete(id: number) {
|
||||||
try {
|
try {
|
||||||
await deleteStream(id)
|
await deleteStream(id)
|
||||||
message.success('已删除')
|
message.success('Deleted')
|
||||||
loadData()
|
loadData()
|
||||||
} catch { message.error('删除失败') }
|
} catch { message.error('Failed to delete') }
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleGoLive(id: number) {
|
async function handleGoLive(id: number) {
|
||||||
try {
|
try {
|
||||||
await goLive(id)
|
await goLive(id)
|
||||||
message.success('已设置为直播中')
|
message.success('Stream is now live')
|
||||||
loadData()
|
loadData()
|
||||||
} catch { message.error('操作失败') }
|
} catch { message.error('Operation failed') }
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleEnd(id: number) {
|
async function handleEnd(id: number) {
|
||||||
try {
|
try {
|
||||||
await endStream(id)
|
await endStream(id)
|
||||||
message.success('已结束直播')
|
message.success('Stream ended')
|
||||||
loadData()
|
loadData()
|
||||||
} catch { message.error('操作失败') }
|
} catch { message.error('Operation failed') }
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||||
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||||
{
|
{
|
||||||
title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
title: 'Status', dataIndex: 'status', key: 'status', width: 110,
|
||||||
render: (s: string) => {
|
render: (s: string) => {
|
||||||
const info = statusMap[s] || { color: 'default', label: s }
|
const info = statusMap[s] || { color: 'default', label: s }
|
||||||
return <Tag color={info.color}>{info.label}</Tag>
|
return <Tag color={info.color}>{info.label}</Tag>
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
|
|
||||||
{
|
{
|
||||||
title: '操作', key: 'actions', width: 280,
|
title: 'Created', dataIndex: 'created_at', key: 'created_at',
|
||||||
|
render: (v: string) => v?.slice(0, 16), width: 170,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Actions', key: 'actions', width: 280,
|
||||||
render: (_: any, record: StreamInfo) => (
|
render: (_: any, record: StreamInfo) => (
|
||||||
<Space size="small">
|
<Space size="small">
|
||||||
<Button
|
<Button
|
||||||
@@ -75,26 +78,26 @@ export default function StreamList() {
|
|||||||
icon={<LinkOutlined />}
|
icon={<LinkOutlined />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigator.clipboard.writeText(record.stream_key)
|
navigator.clipboard.writeText(record.stream_key)
|
||||||
message.success('推流码已复制')
|
message.success('Stream key copied')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
复制推流码
|
Copy Key
|
||||||
</Button>
|
</Button>
|
||||||
{record.status !== 'live' ? (
|
{record.status !== 'live' ? (
|
||||||
<Tooltip title="切换为直播中">
|
<Tooltip title="Go Live">
|
||||||
<Button size="small" type="primary" icon={<PlayCircleOutlined />}
|
<Button size="small" type="primary" icon={<PlayCircleOutlined />}
|
||||||
onClick={() => handleGoLive(record.id)} ghost />
|
onClick={() => handleGoLive(record.id)} ghost />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
) : (
|
) : (
|
||||||
<Tooltip title="结束直播">
|
<Tooltip title="End Stream">
|
||||||
<Button size="small" icon={<StopOutlined />}
|
<Button size="small" icon={<StopOutlined />}
|
||||||
onClick={() => handleEnd(record.id)} danger />
|
onClick={() => handleEnd(record.id)} danger />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
<Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
|
<Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
|
||||||
观看
|
Watch
|
||||||
</Button>
|
</Button>
|
||||||
<Popconfirm title="确定删除这条直播?" onConfirm={() => handleDelete(record.id)}>
|
<Popconfirm title="Delete this stream?" onConfirm={() => handleDelete(record.id)}>
|
||||||
<Button size="small" icon={<DeleteOutlined />} danger />
|
<Button size="small" icon={<DeleteOutlined />} danger />
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
</Space>
|
</Space>
|
||||||
@@ -105,9 +108,9 @@ 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: 'center', marginBottom: 24 }}>
|
||||||
<Title level={3} style={{ margin: 0 }}>直播列表</Title>
|
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>Streams</Title>
|
||||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
|
||||||
创建直播
|
New Stream
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Table
|
<Table
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
html, body, #root { height: 100%; }
|
html, body, #root { height: 100%; }
|
||||||
body {
|
body {
|
||||||
font-family: "Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
background: #FAF8F5;
|
background: #F5F6FA;
|
||||||
}
|
}
|
||||||
@@ -2,60 +2,71 @@ import type { ThemeConfig } from 'antd'
|
|||||||
|
|
||||||
const theme: ThemeConfig = {
|
const theme: ThemeConfig = {
|
||||||
token: {
|
token: {
|
||||||
fontFamily: `"Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif`,
|
fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif`,
|
||||||
fontSize: 15,
|
fontSize: 14,
|
||||||
colorPrimary: '#D97757',
|
colorPrimary: '#1E3A5F',
|
||||||
colorSuccess: '#6B9E7A',
|
colorSuccess: '#2E7D32',
|
||||||
colorWarning: '#D4A24E',
|
colorWarning: '#E65100',
|
||||||
colorError: '#C15C5C',
|
colorError: '#C62828',
|
||||||
colorInfo: '#7B93A8',
|
colorInfo: '#1565C0',
|
||||||
colorTextBase: '#1A1A16',
|
colorTextBase: '#1A1A1A',
|
||||||
colorBgBase: '#FAF8F5',
|
colorBgBase: '#FFFFFF',
|
||||||
colorBgContainer: '#FFFFFF',
|
colorBgContainer: '#FFFFFF',
|
||||||
colorBgLayout: '#FAF8F5',
|
colorBgLayout: '#F5F6FA',
|
||||||
colorBorder: '#E8E4DD',
|
colorBorder: '#E8ECF1',
|
||||||
colorBorderSecondary: '#F0EDE7',
|
colorBorderSecondary: '#EDF0F4',
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
|
borderRadiusLG: 12,
|
||||||
wireframe: false,
|
wireframe: false,
|
||||||
|
boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06)',
|
||||||
|
boxShadowSecondary: '0 4px 12px rgba(0,0,0,0.06)',
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Layout: {
|
Layout: {
|
||||||
headerBg: '#FFFFFF',
|
headerBg: '#1E3A5F',
|
||||||
headerHeight: 56,
|
headerHeight: 56,
|
||||||
headerPadding: '0 32px',
|
headerPadding: '0 32px',
|
||||||
siderBg: '#FFFFFF',
|
siderBg: '#FFFFFF',
|
||||||
bodyBg: '#FAF8F5',
|
bodyBg: '#F5F6FA',
|
||||||
},
|
},
|
||||||
Menu: {
|
Menu: {
|
||||||
itemBg: 'transparent',
|
itemBg: 'transparent',
|
||||||
itemSelectedBg: '#F5F2EE',
|
itemSelectedBg: '#E8F0FE',
|
||||||
itemSelectedColor: '#1A1A16',
|
itemSelectedColor: '#1E3A5F',
|
||||||
itemActiveBg: '#F5F2EE',
|
itemActiveBg: '#F0F4FA',
|
||||||
|
itemColor: '#4A5568',
|
||||||
},
|
},
|
||||||
Card: {
|
Card: {
|
||||||
paddingLG: 24,
|
paddingLG: 24,
|
||||||
borderRadiusLG: 8,
|
borderRadiusLG: 12,
|
||||||
},
|
},
|
||||||
Button: {
|
Button: {
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
primaryShadow: '0 2px 4px rgba(30,58,95,0.2)',
|
||||||
},
|
},
|
||||||
Input: {
|
Input: {
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
|
activeBorderColor: '#1E3A5F',
|
||||||
|
hoverBorderColor: '#4A7FA8',
|
||||||
},
|
},
|
||||||
Select: {
|
Select: {
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
|
activeBorderColor: '#1E3A5F',
|
||||||
},
|
},
|
||||||
Table: {
|
Table: {
|
||||||
headerBg: '#FAF8F5',
|
headerBg: '#FAFBFC',
|
||||||
rowHoverBg: '#F5F2EE',
|
rowHoverBg: '#F7F9FC',
|
||||||
},
|
},
|
||||||
Modal: {
|
Modal: {
|
||||||
borderRadiusLG: 10,
|
borderRadiusLG: 12,
|
||||||
},
|
},
|
||||||
Tag: {
|
Tag: {
|
||||||
borderRadiusSM: 4,
|
borderRadiusSM: 4,
|
||||||
},
|
},
|
||||||
|
Statistic: {
|
||||||
|
contentFontSize: 28,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,16 +3,16 @@ import { useNavigate } from 'react-router-dom'
|
|||||||
import {
|
import {
|
||||||
Row, Col, Card, Typography, Tag, Button, Skeleton, Empty, Space,
|
Row, Col, Card, Typography, Tag, Button, Skeleton, Empty, Space,
|
||||||
} from 'antd'
|
} from 'antd'
|
||||||
import { LoginOutlined, FireOutlined, ClockCircleOutlined } from '@ant-design/icons'
|
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
|
||||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||||
|
|
||||||
const { Title, Text } = Typography
|
const { Title, Text } = Typography
|
||||||
|
|
||||||
const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
|
const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
|
||||||
live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
|
live: { color: 'red', label: 'LIVE', icon: <FireOutlined /> },
|
||||||
pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
|
pending: { color: 'blue', label: 'SCHEDULED', icon: <ClockCircleOutlined /> },
|
||||||
ended: { color: 'default', label: '已结束', icon: null },
|
ended: { color: 'default', label: 'ENDED', icon: null },
|
||||||
cancelled: { color: 'default', label: '已取消', icon: null },
|
cancelled: { color: 'default', label: 'CANCELLED', icon: null },
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
@@ -33,43 +33,34 @@ export default function HomePage() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ minHeight: '100vh', background: '#FAF8F5' }}>
|
<div style={{ minHeight: '100vh', background: '#F5F6FA' }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
background: '#FFFFFF',
|
background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 100%)',
|
||||||
borderBottom: '1px solid #E8E4DD',
|
padding: '40px 48px',
|
||||||
display: 'flex',
|
color: '#FFFFFF',
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
padding: '0 32px',
|
|
||||||
height: 60,
|
|
||||||
}}>
|
}}>
|
||||||
<Title level={4} style={{ margin: 0, letterSpacing: -0.5, color: '#1A1A16' }}>
|
<div style={{ maxWidth: 1280, margin: '0 auto' }}>
|
||||||
LiveStream
|
<Title level={2} style={{ color: '#FFFFFF', margin: 0, fontWeight: 700, letterSpacing: -0.5 }}>
|
||||||
<Text type="secondary" style={{ fontSize: 14, marginLeft: 10, fontWeight: 400 }}>
|
StreamCore
|
||||||
简易直播平台
|
|
||||||
</Text>
|
|
||||||
</Title>
|
</Title>
|
||||||
<Button
|
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16, marginTop: 8, display: 'block' }}>
|
||||||
type="text"
|
Enterprise Streaming Platform
|
||||||
icon={<LoginOutlined />}
|
</Text>
|
||||||
onClick={() => navigate('/admin')}
|
</div>
|
||||||
>
|
|
||||||
管理后台
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 48px' }}>
|
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 48px' }}>
|
||||||
<Title level={3} style={{ marginBottom: 24 }}>全部直播</Title>
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Live Channels</Title>
|
||||||
|
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<Row gutter={[24, 24]}>
|
<Row gutter={[24, 24]}>
|
||||||
{[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} md={8} lg={8}>
|
||||||
<Card><Skeleton active /></Card>
|
<Card style={{ borderRadius: 12 }}><Skeleton active /></Card>
|
||||||
</Col>
|
</Col>
|
||||||
))}
|
))}
|
||||||
</Row>
|
</Row>
|
||||||
) : sorted.length === 0 ? (
|
) : sorted.length === 0 ? (
|
||||||
<Empty description="暂无直播" style={{ marginTop: 80 }} />
|
<Empty description="No live streams yet" style={{ marginTop: 80 }} />
|
||||||
) : (
|
) : (
|
||||||
<Row gutter={[24, 24]}>
|
<Row gutter={[24, 24]}>
|
||||||
{sorted.map((s) => {
|
{sorted.map((s) => {
|
||||||
@@ -78,39 +69,43 @@ export default function HomePage() {
|
|||||||
<Col key={s.id} xs={24} sm={12} md={8} lg={8}>
|
<Col key={s.id} xs={24} sm={12} md={8} lg={8}>
|
||||||
<Card
|
<Card
|
||||||
hoverable
|
hoverable
|
||||||
style={{ overflow: 'hidden', borderRadius: 8 }}
|
style={{ overflow: 'hidden', borderRadius: 12 }}
|
||||||
cover={
|
cover={
|
||||||
<div style={{
|
<div style={{
|
||||||
height: 160,
|
height: 160,
|
||||||
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, #2b2b2b 0%, #1a1a16 100%)',
|
: 'linear-gradient(135deg, #1E3A5F 0%, #3A6F9F 100%)',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
|
position: 'relative',
|
||||||
}}>
|
}}>
|
||||||
{!s.cover_url && (
|
{!s.cover_url && (
|
||||||
<Text style={{ color: '#666', fontSize: 36 }}>
|
<VideoCameraOutlined style={{ color: 'rgba(255,255,255,0.3)', fontSize: 48 }} />
|
||||||
{s.status === 'live' ? <FireOutlined style={{ color: '#D97757' }} /> : '🎬'}
|
|
||||||
</Text>
|
|
||||||
)}
|
)}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: 12, right: 12,
|
||||||
|
}}>
|
||||||
|
<Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0 }}>
|
||||||
|
{meta.icon} {meta.label}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
bodyStyle={{ padding: '16px 20px' }}
|
||||||
onClick={() => navigate(`/watch/${s.id}`)}
|
onClick={() => navigate(`/watch/${s.id}`)}
|
||||||
>
|
>
|
||||||
<Card.Meta
|
<Card.Meta
|
||||||
title={
|
title={
|
||||||
<Space>
|
<Text strong style={{ fontSize: 15, display: 'block' }} ellipsis>
|
||||||
<Tag color={meta.color} style={{ margin: 0 }}>
|
{s.title}
|
||||||
{meta.icon} {meta.label}
|
</Text>
|
||||||
</Tag>
|
|
||||||
<Text ellipsis style={{ maxWidth: 160 }}>{s.title}</Text>
|
|
||||||
</Space>
|
|
||||||
}
|
}
|
||||||
description={
|
description={
|
||||||
s.description
|
<Text type="secondary" ellipsis style={{ fontSize: 13 }}>
|
||||||
? <Text type="secondary" ellipsis>{s.description}</Text>
|
{s.description || 'No description'}
|
||||||
: <Text type="secondary" italic>暂无简介</Text>
|
</Text>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -120,6 +115,14 @@ export default function HomePage() {
|
|||||||
</Row>
|
</Row>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{
|
||||||
|
maxWidth: 1280, margin: '0 auto', padding: '16px 48px 48px',
|
||||||
|
textAlign: 'center',
|
||||||
|
}}>
|
||||||
|
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||||
|
StreamCore © {new Date().getFullYear()}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -79,7 +79,7 @@ export default function WatchPage() {
|
|||||||
})
|
})
|
||||||
hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
|
hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
|
||||||
if (data.fatal) {
|
if (data.fatal) {
|
||||||
message.warning('播放异常,尝试切换线路...')
|
message.warning('Playback error, try switching line...')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
setHls(hlsInstance)
|
setHls(hlsInstance)
|
||||||
@@ -103,50 +103,50 @@ export default function WatchPage() {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
background: '#FAF8F5',
|
background: '#F5F6FA',
|
||||||
}}>
|
}}>
|
||||||
<Empty description="未找到该直播" />
|
<Empty description="Stream not found" />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
|
const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? 'SCHEDULED' : info.status === 'ended' ? 'ENDED' : info.status.toUpperCase()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
background: '#1A1A16',
|
background: '#0F1419',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div style={{
|
||||||
height: 56,
|
height: 56,
|
||||||
minHeight: 56,
|
minHeight: 56,
|
||||||
background: 'rgba(26,26,22,0.95)',
|
background: 'rgba(15,20,25,0.97)',
|
||||||
borderBottom: '1px solid rgba(255,255,255,0.08)',
|
borderBottom: '1px solid rgba(255,255,255,0.06)',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
padding: '0 24px',
|
padding: '0 24px',
|
||||||
}}>
|
}}>
|
||||||
<Space>
|
<Space>
|
||||||
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#fff' }}
|
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#A0AEC0' }}
|
||||||
onClick={() => navigate('/')}>
|
onClick={() => navigate('/')}>
|
||||||
返回
|
Back
|
||||||
</Button>
|
</Button>
|
||||||
<div>
|
<div>
|
||||||
<Title level={5} style={{ color: '#fff', margin: 0 }}>
|
<Title level={5} style={{ color: '#E2E8F0', margin: 0, fontWeight: 600 }}>
|
||||||
{info.title}
|
{info.title}
|
||||||
</Title>
|
</Title>
|
||||||
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8 }}>
|
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>
|
||||||
{statusLabel}
|
{statusLabel}
|
||||||
</Tag>
|
</Tag>
|
||||||
</div>
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
<Space size="middle">
|
<Space size="middle">
|
||||||
<div style={{ color: '#aaa', fontSize: 13 }}>
|
<div style={{ color: '#718096', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||||
<SignalFilled style={{ color: info.multicast_available ? '#52c41a' : '#666', marginRight: 4 }} />
|
<SignalFilled style={{ color: info.multicast_available ? '#48BB78' : '#4A5568' }} />
|
||||||
{info.multicast_available ? '组播' : '单播'}
|
{info.multicast_available ? 'Multicast' : 'Unicast'}
|
||||||
</div>
|
</div>
|
||||||
<Select
|
<Select
|
||||||
value={activeQuality}
|
value={activeQuality}
|
||||||
@@ -154,7 +154,7 @@ export default function WatchPage() {
|
|||||||
style={{ width: 110 }}
|
style={{ width: 110 }}
|
||||||
size="small"
|
size="small"
|
||||||
options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
|
options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
|
||||||
placeholder="清晰度"
|
placeholder="Quality"
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
value={activeLine}
|
value={activeLine}
|
||||||
@@ -166,7 +166,7 @@ export default function WatchPage() {
|
|||||||
label: `${l.node_name} (${l.weight})`,
|
label: `${l.node_name} (${l.weight})`,
|
||||||
}))}
|
}))}
|
||||||
prefix={<WifiOutlined />}
|
prefix={<WifiOutlined />}
|
||||||
placeholder="选择线路"
|
placeholder="Line"
|
||||||
/>
|
/>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
@@ -184,6 +184,8 @@ export default function WatchPage() {
|
|||||||
maxHeight: 'calc(100vh - 56px - 48px)',
|
maxHeight: 'calc(100vh - 56px - 48px)',
|
||||||
background: '#000',
|
background: '#000',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
borderRadius: 8,
|
||||||
|
overflow: 'hidden',
|
||||||
}}>
|
}}>
|
||||||
<video
|
<video
|
||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
@@ -199,11 +201,13 @@ export default function WatchPage() {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
background: 'rgba(0,0,0,0.7)',
|
background: 'rgba(0,0,0,0.8)',
|
||||||
}}>
|
}}>
|
||||||
<Space direction="vertical" align="center">
|
<Space direction="vertical" align="center">
|
||||||
<Spin size="large" />
|
<Spin size="large" />
|
||||||
<Text style={{ color: '#fff' }}>等待主播开播...</Text>
|
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16 }}>
|
||||||
|
Waiting for streamer...
|
||||||
|
</Text>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in new issue
Block a user