品牌化重构: StreamCore + 现代UI主题 + 英文界面

- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标)
- 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体
  白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感
- 首页移除管理入口,纯观众视角(渐变横幅+卡片列表)
- 统一品牌名称 StreamCore (替换LiveStream)
- 全部界面英文(antd默认locale,去除zhCN)
- 登录页渐变+卡片居中布局
This commit is contained in:
admin committed 2026-08-10 14:40:58 +08:00
1 parent b81a7bf293
commit 5f19fc6aa5
14 files changed
+253 -225

No files matched your search

+1 -1
View File
@@ -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
View File
@@ -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 -2
View File
@@ -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 />} />
+17 -11
View File
@@ -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' }}>
+9 -9
View File
@@ -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>
+25 -20
View File
@@ -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}
+28 -27
View File
@@ -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}
+17 -17
View File
@@ -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 -24
View File
@@ -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>
+26 -23
View File
@@ -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 -2
View File
@@ -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;
} }
+36 -25
View File
@@ -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,
},
}, },
} }
+45 -42
View File
@@ -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 &copy; {new Date().getFullYear()}
</Text>
</div>
</div> </div>
) )
} }
+22 -18
View File
@@ -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>
)} )}