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

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

Browse Source 
- 移除所有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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/admin/AdminLayout.tsx
+17 -11
View File
@@ -15,11 +15,11 @@ const { Sider, Content, Header } = Layout
const { Text } = Typography
const menuItems = [
{ key: '/admin', icon: <DashboardOutlined />, label: '概览' },
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: '直播列表' },
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: '创建直播' },
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: '边缘节点' },
{ key: '/admin/settings', icon: <SettingOutlined />, label: '系统设置' },
{ key: '/admin', icon: <DashboardOutlined />, label: 'Dashboard' },
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: 'Streams' },
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: 'New Stream' },
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: 'Nodes' },
{ key: '/admin/settings', icon: <SettingOutlined />, label: 'Settings' },
]
export default function AdminLayout() {
@@ -44,7 +44,7 @@ export default function AdminLayout() {
onCollapse={setCollapsed}
width={220}
style={{
borderRight: '1px solid #E8E4DD',
borderRight: '1px solid #E8ECF1',
background: '#FFFFFF',
}}
>
@@ -53,10 +53,16 @@ export default function AdminLayout() {
display: 'flex',
alignItems: '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 }}>
{collapsed ? 'LS' : 'LiveStream'}
<Text strong style={{
fontSize: collapsed ? 14 : 18,
letterSpacing: -0.5,
color: '#FFFFFF',
}}>
{collapsed ? 'SC' : 'StreamCore'}
</Text>
</div>
<Menu
@@ -70,7 +76,7 @@ export default function AdminLayout() {
<Layout>
<Header style={{
background: '#FFFFFF',
borderBottom: '1px solid #E8E4DD',
borderBottom: '1px solid #E8ECF1',
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
@@ -81,7 +87,7 @@ export default function AdminLayout() {
icon={<LogoutOutlined />}
onClick={handleLogout}
>
退出登录
Logout
</Button>
</Header>
<Content style={{ padding: 32, overflow: 'auto' }}>
frontend/src/admin/LoginPage.tsx
+9 -9
View File
@@ -14,10 +14,10 @@ export default function LoginPage() {
setLoading(true)
try {
await login(values.password)
message.success('登录成功')
message.success('Login successful')
navigate('/admin')
} catch {
message.error('密码错误')
message.error('Invalid password')
} finally {
setLoading(false)
}
@@ -29,28 +29,28 @@ export default function LoginPage() {
display: 'flex',
alignItems: '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%' }}>
<div style={{ textAlign: 'center' }}>
<Title level={2} style={{ marginBottom: 4 }}>LiveStream</Title>
<Text type="secondary">管理后台</Text>
<Title level={2} style={{ marginBottom: 4, color: '#1E3A5F', fontWeight: 700 }}>StreamCore</Title>
<Text type="secondary">Admin Console</Text>
</div>
<Form onFinish={handleSubmit} layout="vertical">
<Form.Item
name="password"
rules={[{ required: true, message: '请输入密码' }]}
rules={[{ required: true, message: 'Please enter password' }]}
>
<Input.Password
prefix={<LockOutlined />}
placeholder="密码"
placeholder="Password"
size="large"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading} block size="large">
登录
Sign In
</Button>
</Form.Item>
</Form>
frontend/src/admin/pages/Dashboard.tsx
+25 -20
View File
@@ -1,9 +1,9 @@
import { useState, useEffect } from 'react'
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'
const { Title } = Typography
const { Title, Text } = Typography
export default function Dashboard() {
const [streams, setStreams] = useState<StreamInfo[]>([])
@@ -27,60 +27,65 @@ export default function Dashboard() {
const pendingCount = streams.filter((s) => s.status === 'pending').length
const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: '待开播' },
live: { color: 'green', label: '直播中' },
ended: { color: 'default', label: '已结束' },
cancelled: { color: 'red', label: '已取消' },
pending: { color: 'blue', label: 'Scheduled' },
live: { color: 'green', label: 'Live' },
ended: { color: 'default', label: 'Ended' },
cancelled: { color: 'red', label: 'Cancelled' },
}
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) => {
const s = statusMap[status] || { color: 'default', label: status }
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 (
<div>
<Title level={3} style={{ marginBottom: 24 }}>概览</Title>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Overview</Title>
<Row gutter={[24, 24]}>
<Col xs={24} sm={8}>
<Card>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="直播中"
title="Live Now"
value={liveCount}
prefix={<SignalFilled style={{ color: '#52c41a' }} />}
prefix={<SignalFilled style={{ color: '#2E7D32' }} />}
loading={loading}
/>
</Card>
</Col>
<Col xs={24} sm={8}>
<Card>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="待开播"
title="Scheduled"
value={pendingCount}
prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />}
prefix={<VideoCameraOutlined style={{ color: '#1565C0' }} />}
loading={loading}
/>
</Card>
</Col>
<Col xs={24} sm={8}>
<Card>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="直播总数"
title="Total Streams"
value={streams.length}
prefix={<EyeOutlined />}
prefix={<PlayCircleOutlined />}
loading={loading}
/>
</Card>
</Col>
</Row>
<Card title="最近直播" style={{ marginTop: 24 }}>
<Card title="Recent Streams" style={{ marginTop: 24, borderRadius: 12 }}>
<Table
dataSource={streams.slice(0, 10)}
columns={recentColumns}
frontend/src/admin/pages/NodeManager.tsx
+28 -27
View File
@@ -24,9 +24,9 @@ interface StrategyInfo {
}
const strategyLabels: Record<string, string> = {
'round-robin': '轮询',
'weighted': '权重',
'least-conn': '最少连接',
'round-robin': 'Round-Robin',
'weighted': 'Weighted',
'least-conn': 'Least-Conn',
}
export default function NodeManager() {
@@ -45,15 +45,15 @@ export default function NodeManager() {
])
setNodes(nodesRes.data)
setStrategy(strategyRes.data)
} catch { message.error('加载失败') }
} catch { message.error('Failed to load') }
setLoading(false)
}
async function updateWeight(nodeId: string, weight: number) {
try {
await api.put(`/nodes/${nodeId}`, { weight })
message.success('已更新')
} catch { message.error('更新失败') }
message.success('Updated')
} catch { message.error('Failed') }
}
async function toggleNode(nodeId: string, enabled: boolean) {
@@ -62,17 +62,17 @@ export default function NodeManager() {
try {
await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled })
setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n)))
message.success('已更新')
} catch { message.error('更新失败') }
message.success('Updated')
} catch { message.error('Failed') }
}
const columns = [
{ title: '名称', dataIndex: 'name', key: 'name' },
{ title: '主机', dataIndex: 'host', key: 'host' },
{ title: 'HLS 端口', dataIndex: 'hls_port', key: 'hls_port', width: 100 },
{ title: 'API 端口', dataIndex: 'api_port', key: 'api_port', width: 100 },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Host', dataIndex: 'host', key: 'host' },
{ title: 'HLS Port', dataIndex: 'hls_port', key: 'hls_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) => (
<InputNumber
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) => (
<Switch
checked={record.enabled}
@@ -99,45 +99,46 @@ export default function NodeManager() {
),
},
{
title: '状态', key: 'health', width: 100,
render: () => <Tag icon={<CheckCircleOutlined />} color="success">在线</Tag>,
title: 'Health', key: 'health', width: 100,
render: () => <Tag icon={<CheckCircleOutlined />} color="success">Online</Tag>,
},
]
return (
<div>
<Title level={3} style={{ marginBottom: 24 }}>边缘节点管理</Title>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Edge Nodes</Title>
{strategy && (
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
<Col xs={24} sm={8}>
<Card>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="负载均衡策略"
title="Strategy"
value={strategyLabels[strategy.strategy] || strategy.strategy}
/>
</Card>
</Col>
<Col xs={24} sm={8}>
<Card>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="组播状态"
value={strategy.multicast_available ? '可用' : '不可用'}
valueStyle={{ color: strategy.multicast_available ? '#52c41a' : '#999' }}
title="Multicast"
value={strategy.multicast_available ? 'Available' : 'N/A'}
valueStyle={{ color: strategy.multicast_available ? '#2E7D32' : '#999' }}
/>
</Card>
</Col>
<Col xs={24} sm={8}>
<Card>
<Statistic title="边缘节点数" value={nodes.length} />
<Card style={{ borderRadius: 12 }}>
<Statistic title="Nodes" value={nodes.length} />
</Card>
</Col>
</Row>
)}
<Card
title="节点列表"
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>}
title="Node List"
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>Refresh</Button>}
style={{ borderRadius: 12 }}
>
<Table
dataSource={nodes}
frontend/src/admin/pages/Settings.tsx
+17 -17
View File
@@ -7,9 +7,9 @@ import api from '../../api/client'
const { Title } = Typography
const strategies = [
{ value: 'round-robin', label: '轮询 (Round-Robin)' },
{ value: 'weighted', label: '权重 (Weighted)' },
{ value: 'least-conn', label: '最少连接 (Least Connections)' },
{ value: 'round-robin', label: 'Round-Robin' },
{ value: 'weighted', label: 'Weighted' },
{ value: 'least-conn', label: 'Least Connections' },
]
export default function SettingsPage() {
@@ -36,8 +36,8 @@ export default function SettingsPage() {
try {
await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled })
setStrategy(val)
message.success('策略已更新')
} catch { message.error('更新失败') }
message.success('Strategy updated')
} catch { message.error('Update failed') }
setSaving(false)
}
@@ -45,17 +45,17 @@ export default function SettingsPage() {
setMulticastEnabled(val)
try {
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
message.success('组播设置已更新')
} catch { message.error('更新失败') }
message.success('Multicast settings updated')
} catch { message.error('Update failed') }
}
return (
<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 }}>
<Descriptions column={1} labelStyle={{ width: 140 }}>
<Descriptions.Item label="均衡策略">
<Card title="Load Balancing" style={{ marginBottom: 24, borderRadius: 12 }}>
<Descriptions column={1} labelStyle={{ width: 120 }}>
<Descriptions.Item label="Strategy">
<Select
value={strategy}
onChange={saveStrategy}
@@ -67,14 +67,14 @@ export default function SettingsPage() {
</Descriptions>
</Card>
<Card title="组播设置">
<Descriptions column={1} labelStyle={{ width: 140 }}>
<Descriptions.Item label="启用组播">
<Card title="Multicast" style={{ borderRadius: 12 }}>
<Descriptions column={1} labelStyle={{ width: 120 }}>
<Descriptions.Item label="Enable">
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
</Descriptions.Item>
<Descriptions.Item label="网络状态">
<span style={{ color: multicastAvailable ? '#52c41a' : '#999' }}>
{multicastAvailable ? '可用 — 优先使用组播分发' : '不可用 — 回退至单播'}
<Descriptions.Item label="Network Status">
<span style={{ color: multicastAvailable ? '#2E7D32' : '#999' }}>
{multicastAvailable ? 'Available - using multicast' : 'Unavailable - fallback to unicast'}
</span>
</Descriptions.Item>
</Descriptions>
frontend/src/admin/pages/StreamForm.tsx
+24 -24
View File
@@ -24,9 +24,9 @@ export default function StreamForm() {
scheduled_at: values.scheduled_at?.toISOString(),
})
setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key })
message.success('直播已创建')
message.success('Stream created')
} catch {
message.error('创建失败')
message.error('Failed to create')
}
setLoading(false)
}
@@ -34,17 +34,17 @@ export default function StreamForm() {
if (result) {
return (
<div style={{ maxWidth: 640 }}>
<Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Stream Created</Title>
<Alert
type="success"
message="推流信息已生成"
message="Push information generated"
description={
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div>
<Text strong>推流码 (UUID):</Text>
<Text strong>Stream Key (UUID):</Text>
<div style={{
marginTop: 8, padding: 12,
background: '#F5F2EE', borderRadius: 6,
background: '#F5F6FA', borderRadius: 8,
fontFamily: 'monospace', fontSize: 14,
wordBreak: 'break-all',
}}>
@@ -52,10 +52,10 @@ export default function StreamForm() {
</div>
</div>
<div>
<Text strong>RTMP 推流地址:</Text>
<Text strong>RTMP Push URL:</Text>
<div style={{
marginTop: 8, padding: 12,
background: '#F5F2EE', borderRadius: 6,
background: '#F5F6FA', borderRadius: 8,
fontFamily: 'monospace', fontSize: 14,
wordBreak: 'break-all',
}}>
@@ -72,15 +72,15 @@ export default function StreamForm() {
icon={<CopyOutlined />}
onClick={() => {
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 type="primary" onClick={() => navigate('/admin/streams')}>
返回列表
Back to List
</Button>
</Space>
</div>
@@ -95,30 +95,30 @@ export default function StreamForm() {
onClick={() => navigate('/admin/streams')}
style={{ marginBottom: 16 }}
>
返回
Back
</Button>
<Card>
<Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
<Card style={{ borderRadius: 12 }}>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>New Stream</Title>
<Form layout="vertical" onFinish={handleSubmit}>
<Form.Item
name="title"
label="直播标题"
rules={[{ required: true, message: '请输入直播标题' }]}
label="Stream Title"
rules={[{ required: true, message: 'Please enter a title' }]}
>
<Input placeholder="输入直播标题" size="large" />
<Input placeholder="Enter stream title" size="large" />
</Form.Item>
<Form.Item name="description" label="直播简介">
<TextArea rows={3} placeholder="可选，直播内容简介" />
<Form.Item name="description" label="Description">
<TextArea rows={3} placeholder="Optional description" />
</Form.Item>
<Form.Item name="cover_url" label="封面图片地址">
<Form.Item name="cover_url" label="Cover Image URL">
<Input placeholder="https://..." />
</Form.Item>
<Form.Item name="scheduled_at" label="预定开播时间">
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择预定时间" />
<Form.Item name="scheduled_at" label="Scheduled Time">
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="Select schedule time" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading} size="large" block>
创建直播
Create Stream
</Button>
</Form.Item>
</Form>
frontend/src/admin/pages/StreamList.tsx
+26 -23
View File
@@ -9,10 +9,10 @@ import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '
const { Title, Text } = Typography
const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: '待开播' },
live: { color: 'green', label: '直播中' },
ended: { color: 'default', label: '已结束' },
cancelled: { color: 'red', label: '已取消' },
pending: { color: 'blue', label: 'Scheduled' },
live: { color: 'green', label: 'Live' },
ended: { color: 'default', label: 'Ended' },
cancelled: { color: 'red', label: 'Cancelled' },
}
export default function StreamList() {
@@ -27,47 +27,50 @@ export default function StreamList() {
try {
const data = await fetchStreams()
setStreams(data)
} catch { message.error('加载失败') }
} catch { message.error('Failed to load streams') }
setLoading(false)
}
async function handleDelete(id: number) {
try {
await deleteStream(id)
message.success('已删除')
message.success('Deleted')
loadData()
} catch { message.error('删除失败') }
} catch { message.error('Failed to delete') }
}
async function handleGoLive(id: number) {
try {
await goLive(id)
message.success('已设置为直播中')
message.success('Stream is now live')
loadData()
} catch { message.error('操作失败') }
} catch { message.error('Operation failed') }
}
async function handleEnd(id: number) {
try {
await endStream(id)
message.success('已结束直播')
message.success('Stream ended')
loadData()
} catch { message.error('操作失败') }
} catch { message.error('Operation failed') }
}
const columns = [
{ 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) => {
const info = statusMap[s] || { color: 'default', label: s }
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) => (
<Space size="small">
<Button
@@ -75,26 +78,26 @@ export default function StreamList() {
icon={<LinkOutlined />}
onClick={() => {
navigator.clipboard.writeText(record.stream_key)
message.success('推流码已复制')
message.success('Stream key copied')
}}
>
复制推流码
Copy Key
</Button>
{record.status !== 'live' ? (
<Tooltip title="切换为直播中">
<Tooltip title="Go Live">
<Button size="small" type="primary" icon={<PlayCircleOutlined />}
onClick={() => handleGoLive(record.id)} ghost />
</Tooltip>
) : (
<Tooltip title="结束直播">
<Tooltip title="End Stream">
<Button size="small" icon={<StopOutlined />}
onClick={() => handleEnd(record.id)} danger />
</Tooltip>
)}
<Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
观看
Watch
</Button>
<Popconfirm title="确定删除这条直播？" onConfirm={() => handleDelete(record.id)}>
<Popconfirm title="Delete this stream?" onConfirm={() => handleDelete(record.id)}>
<Button size="small" icon={<DeleteOutlined />} danger />
</Popconfirm>
</Space>
@@ -105,9 +108,9 @@ export default function StreamList() {
return (
<div>
<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')}>
创建直播
New Stream
</Button>
</div>
<Table