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

品牌化设置 + Claude米色衬线体主题 + 全站中文

Browse Source 
- 品牌设置API: GET/PUT /api/settings/brand (名称/标语/Logo)
- 管理页系统设置: 品牌编辑器表单(名称/标语/Logo URL)
- 恢复Anthropic风格: 米色(#FBF9F6) 底色, Source Serif 4 + Noto Serif SC 衬线体
- 暖棕(#C2693A) 主色调, 更充裕的间距与留白, 庄重大气
- 全站中文: antd zhCN locale, 所有页面文本汉化
- 数据存储在 Config singleton, 运行时更新
This commit is contained in:
admin committed 2026-08-10 16:24:45 +08:00
1 parent 409e5d314e
commit efde5597bd
16 files changed
+403 -672
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/admin/AdminLayout.tsx
+21 -44
View File
@@ -1,13 +1,9 @@
import { useState } from 'react'
import { Outlet, useNavigate, useLocation, Link } from 'react-router-dom'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Layout, Menu, Button, Typography } from 'antd'
import {
DashboardOutlined,
VideoCameraOutlined,
PlusOutlined,
CloudServerOutlined,
SettingOutlined,
LogoutOutlined,
DashboardOutlined, VideoCameraOutlined, PlusOutlined,
CloudServerOutlined, SettingOutlined, LogoutOutlined,
} from '@ant-design/icons'
import { clearToken } from '../api/client'
@@ -15,11 +11,11 @@ const { Sider, Content, Header } = Layout
const { Text } = Typography
const menuItems = [
{ 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' },
{ 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: '系统设置' },
]
export default function AdminLayout() {
@@ -39,55 +35,36 @@ export default function AdminLayout() {
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider
collapsible
collapsed={collapsed}
onCollapse={setCollapsed}
collapsible collapsed={collapsed} onCollapse={setCollapsed}
width={220}
style={{
borderRight: '1px solid #E8ECF1',
background: '#FFFFFF',
}}
style={{ borderRight: '1px solid #E8E3D8', background: '#FBF9F6' }}
>
<div style={{
height: 56,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderBottom: '1px solid #E8ECF1',
background: '#1E3A5F',
color: '#FFFFFF',
height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
borderBottom: '1px solid #E8E3D8',
}}>
<Text strong style={{
fontSize: collapsed ? 14 : 18,
letterSpacing: -0.5,
color: '#FFFFFF',
fontSize: collapsed ? 14 : 18, letterSpacing: -0.5,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
color: '#C2693A',
}}>
{collapsed ? 'SC' : 'StreamCore'}
</Text>
</div>
<Menu
mode="inline"
selectedKeys={[selectedKey]}
items={menuItems}
mode="inline" selectedKeys={[selectedKey]} items={menuItems}
onClick={({ key }) => navigate(key)}
style={{ border: 'none', marginTop: 8 }}
/>
</Sider>
<Layout>
<Header style={{
background: '#FFFFFF',
borderBottom: '1px solid #E8ECF1',
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
padding: '0 32px',
background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
display: 'flex', justifyContent: 'flex-end', alignItems: 'center',
padding: '0 40px',
}}>
<Button
type="text"
icon={<LogoutOutlined />}
onClick={handleLogout}
>
Logout
<Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>
退出登录
</Button>
</Header>
<Content style={{ padding: 32, overflow: 'auto' }}>
frontend/src/admin/LoginPage.tsx
+12 -9
View File
@@ -14,10 +14,10 @@ export default function LoginPage() {
setLoading(true)
try {
await login(values.password)
message.success('Login successful')
message.success('登录成功')
navigate('/admin')
} catch {
message.error('Invalid password')
message.error('密码错误')
} finally {
setLoading(false)
}
@@ -29,28 +29,31 @@ export default function LoginPage() {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 50%, #F5F6FA 50%)',
background: '#F6F3ED',
}}>
<Card style={{ width: 400, borderRadius: 12, boxShadow: '0 8px 32px rgba(0,0,0,0.08)' }}>
<Card style={{ width: 400, borderRadius: 12, boxShadow: '0 8px 32px rgba(20,20,16,0.06)' }}>
<Space direction="vertical" size="large" style={{ width: '100%' }}>
<div style={{ textAlign: 'center' }}>
<Title level={2} style={{ marginBottom: 4, color: '#1E3A5F', fontWeight: 700 }}>StreamCore</Title>
<Text type="secondary">Admin Console</Text>
<Title level={2} style={{ marginBottom: 4, color: '#C2693A', fontWeight: 600,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
StreamCore
</Title>
<Text type="secondary">管理控制台</Text>
</div>
<Form onFinish={handleSubmit} layout="vertical">
<Form.Item
name="password"
rules={[{ required: true, message: 'Please enter password' }]}
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password
prefix={<LockOutlined />}
placeholder="Password"
placeholder="管理员密码"
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
+27 -47
View File
@@ -1,9 +1,9 @@
import { useState, useEffect } from 'react'
import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
import { Row, Col, Card, Statistic, Typography, Table, Tag } from 'antd'
import { VideoCameraOutlined, SignalFilled, PlayCircleOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams'
const { Title, Text } = Typography
const { Title } = Typography
export default function Dashboard() {
const [streams, setStreams] = useState<StreamInfo[]>([])
@@ -27,73 +27,53 @@ 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: 'Scheduled' },
live: { color: 'green', label: 'Live' },
ended: { color: 'default', label: 'Ended' },
cancelled: { color: 'red', label: 'Cancelled' },
pending: { color: 'blue', label: '待开播' },
live: { color: 'green', label: '直播中' },
ended: { color: 'default', label: '已结束' },
cancelled: { color: 'red', label: '已取消' },
}
const recentColumns = [
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
const columns = [
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{
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>
title: '状态', dataIndex: 'status', key: 'status', width: 100,
render: (s: string) => {
const m = statusMap[s] || { color: 'default', label: s }
return <Tag color={m.color}>{m.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), width: 170,
},
]
return (
<div>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Overview</Title>
<Title level={3} style={{ marginBottom: 24 }}>概览</Title>
<Row gutter={[24, 24]}>
<Col xs={24} sm={8}>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="Live Now"
value={liveCount}
prefix={<SignalFilled style={{ color: '#2E7D32' }} />}
loading={loading}
/>
<Card style={{ borderRadius: 10 }}>
<Statistic title="直播中" value={liveCount}
prefix={<SignalFilled style={{ color: '#5B8C5A' }} />} loading={loading} />
</Card>
</Col>
<Col xs={24} sm={8}>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="Scheduled"
value={pendingCount}
prefix={<VideoCameraOutlined style={{ color: '#1565C0' }} />}
loading={loading}
/>
<Card style={{ borderRadius: 10 }}>
<Statistic title="待开播" value={pendingCount}
prefix={<VideoCameraOutlined style={{ color: '#6B8CA8' }} />} loading={loading} />
</Card>
</Col>
<Col xs={24} sm={8}>
<Card style={{ borderRadius: 12 }}>
<Statistic
title="Total Streams"
value={streams.length}
prefix={<PlayCircleOutlined />}
loading={loading}
/>
<Card style={{ borderRadius: 10 }}>
<Statistic title="直播总数" value={streams.length}
prefix={<PlayCircleOutlined />} loading={loading} />
</Card>
</Col>
</Row>
<Card title="Recent Streams" style={{ marginTop: 24, borderRadius: 12 }}>
<Table
dataSource={streams.slice(0, 10)}
columns={recentColumns}
rowKey="id"
loading={loading}
pagination={false}
size="middle"
/>
<Card title="最近直播" style={{ marginTop: 24, borderRadius: 10 }}>
<Table dataSource={streams.slice(0, 10)} columns={columns}
rowKey="id" loading={loading} pagination={false} size="middle" />
</Card>
</div>
)
frontend/src/admin/pages/NodeManager.tsx
+48 -147
View File
@@ -1,8 +1,6 @@
import { useState, useEffect } from 'react'
import {
Card, Table, InputNumber, Switch, Typography, message, Space, Tag, Statistic, Row, Col, Button, Tooltip, Progress,
} from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined, DashboardOutlined } from '@ant-design/icons'
import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Tooltip, Progress } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons'
import api from '../../api/client'
const { Title, Text } = Typography
@@ -14,32 +12,15 @@ interface NodeMetrics {
active_connections: number | null
hls_readers: number | null
}
interface NodeInfo {
id: string
name: string
host: string
hls_port: number
api_port: number
weight: number
enabled: boolean
subnet: string
is_origin: boolean
online: boolean
metrics: NodeMetrics | null
}
interface StrategyInfo {
strategy: string
multicast_enabled: boolean
multicast_available: boolean
id: string; name: string; host: string; hls_port: number; api_port: number
weight: number; enabled: boolean; subnet: string; is_origin: boolean
online: boolean; metrics: NodeMetrics | null
}
interface StrategyInfo { strategy: string; multicast_enabled: boolean; multicast_available: boolean }
const strategyLabels: Record<string, string> = {
'subnet': 'Subnet-Aware',
'round-robin': 'Round-Robin',
'weighted': 'Weighted',
'least-conn': 'Least-Conn',
'subnet': '子网优先', 'round-robin': '轮询', 'weighted': '权重', 'least-conn': '最少连接',
}
export default function NodeManager() {
@@ -52,146 +33,66 @@ export default function NodeManager() {
async function loadData() {
setLoading(true)
try {
const [nodesRes, strategyRes] = await Promise.all([
api.get('/nodes'),
api.get('/nodes/strategy'),
])
setNodes(nodesRes.data)
setStrategy(strategyRes.data)
} catch { message.error('Failed to load') }
const [nr, sr] = await Promise.all([api.get('/nodes'), api.get('/nodes/strategy')])
setNodes(nr.data); setStrategy(sr.data)
} catch { message.error('加载失败') }
setLoading(false)
}
async function updateWeight(nodeId: string, weight: number) {
try {
await api.put(`/nodes/${nodeId}`, { weight })
message.success('Updated')
} catch { message.error('Failed') }
async function updateWeight(nid: string, w: number) {
try { await api.put(`/nodes/${nid}`, { weight: w }); message.success('已更新') } catch { message.error('更新失败') }
}
async function toggleNode(nid: string, en: boolean) {
const node = nodes.find(n => n.id === nid); if (!node) return
try { await api.put(`/nodes/${nid}`, { weight: node.weight, enabled: en })
setNodes(p => p.map(n => n.id === nid ? { ...n, enabled: en } : n)); message.success('已更新') } catch { message.error('更新失败') }
}
async function toggleNode(nodeId: string, enabled: boolean) {
const node = nodes.find((n) => n.id === nodeId)
if (!node) return
try {
await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled })
setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n)))
message.success('Updated')
} catch { message.error('Failed') }
}
const onlineNodes = nodes.filter((n) => n.online).length
const onlineCount = nodes.filter(n => n.online).length
const columns = [
{
title: 'Status', dataIndex: 'online', key: 'online', width: 80,
render: (online: boolean) => (
<Tooltip title={online ? 'Online' : 'Offline'}>
<Tag icon={online ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
color={online ? 'success' : 'error'} />
</Tooltip>
),
},
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Host', dataIndex: 'host', key: 'host', width: 140 },
{
title: 'Subnet', dataIndex: 'subnet', key: 'subnet', width: 140,
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text>,
},
{
title: 'CPU', key: 'cpu', width: 80,
{ title: '状态', dataIndex: 'online', key: 'online', width: 70,
render: (v: boolean) => <Tag icon={v ? <CheckCircleOutlined /> : <CloseCircleOutlined />} color={v ? 'success' : 'error'} /> },
{ title: '名称', dataIndex: 'name', key: 'name' },
{ title: '地址', dataIndex: 'host', key: 'host', width: 130 },
{ title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130, render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
{ title: 'CPU', key: 'cpu', width: 70,
render: (_: any, r: NodeInfo) => r.metrics?.cpu_percent != null
? <Progress size="small" percent={Math.round(r.metrics.cpu_percent)} strokeColor="#1E3A5F" showInfo={false} />
: <Text type="secondary">--</Text>,
},
{
title: 'RAM', key: 'ram', width: 80,
? <Progress size="small" percent={Math.round(r.metrics.cpu_percent)} strokeColor="#C2693A" showInfo={false} />
: <Text type="secondary">--</Text> },
{ title: '内存', key: 'mem', width: 70,
render: (_: any, r: NodeInfo) => r.metrics?.memory_percent != null
? <Progress size="small" percent={Math.round(r.metrics.memory_percent)} strokeColor="#1E3A5F" showInfo={false} />
: <Text type="secondary">--</Text>,
},
{
title: 'BW', key: 'bw', width: 70,
? <Progress size="small" percent={Math.round(r.metrics.memory_percent)} strokeColor="#C2693A" showInfo={false} />
: <Text type="secondary">--</Text> },
{ title: '带宽', key: 'bw', width: 80,
render: (_: any, r: NodeInfo) => r.metrics?.bandwidth_mbps != null
? <Text style={{ fontSize: 12 }}>{r.metrics.bandwidth_mbps.toFixed(1)} Mbps</Text>
: <Text type="secondary">--</Text>,
},
{
title: 'Conn', dataIndex: 'connections', key: 'conn', width: 60,
: <Text type="secondary">--</Text> },
{ title: '连接', key: 'conn', width: 65,
render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null
? r.metrics.active_connections
: <Text type="secondary">--</Text>,
},
{
title: 'Weight', dataIndex: 'weight', key: 'weight', width: 140,
render: (_: number, record: NodeInfo) => (
<InputNumber
min={0} max={1000} value={record.weight}
onChange={(val) => {
const v = val || 0
setNodes((prev) => prev.map((n) => (n.id === record.id ? { ...n, weight: v } : n)))
updateWeight(record.id, v)
}}
size="small" style={{ width: 80 }}
disabled={record.is_origin}
/>
),
},
{
title: 'Enabled', dataIndex: 'enabled', key: 'enabled', width: 70,
render: (_: any, record: NodeInfo) => (
<Switch
checked={record.enabled} onChange={(val) => toggleNode(record.id, val)}
size="small" disabled={record.is_origin}
/>
),
},
? r.metrics.active_connections : <Text type="secondary">--</Text> },
{ title: '权重', dataIndex: 'weight', key: 'weight', width: 130,
render: (_: number, r: NodeInfo) => (
<InputNumber min={0} max={1000} value={r.weight} size="small" style={{ width: 80 }}
disabled={r.is_origin}
onChange={v => { const val = v || 0; setNodes(p => p.map(n => n.id === r.id ? { ...n, weight: val } : n)); updateWeight(r.id, val) }} />
) },
{ title: '启用', dataIndex: 'enabled', key: 'enabled', width: 65,
render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} /> },
]
return (
<div>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Edge Nodes</Title>
<Title level={3} style={{ marginBottom: 24 }}>边缘节点</Title>
{strategy && (
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="Strategy" value={strategyLabels[strategy.strategy] || strategy.strategy} />
</Card>
</Col>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="Multicast" value={strategy.multicast_available ? 'Available' : 'N/A'}
valueStyle={{ color: strategy.multicast_available ? '#2E7D32' : '#999' }} />
</Card>
</Col>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="Total Nodes" value={nodes.length} />
</Card>
</Col>
<Col xs={24} sm={6}>
<Card style={{ borderRadius: 12 }}>
<Statistic title="Online" value={onlineNodes}
valueStyle={{ color: onlineNodes > 0 ? '#2E7D32' : '#C62828' }} />
</Card>
</Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="策略" value={strategyLabels[strategy.strategy] || strategy.strategy} /></Card></Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="组播" value={strategy.multicast_available ? '可用' : '不可用'} valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#999' }} /></Card></Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="节点总数" value={nodes.length} /></Card></Col>
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="在线" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A' }} /></Card></Col>
</Row>
)}
<Card
title="Node List"
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>Refresh</Button>}
style={{ borderRadius: 12 }}
>
<Table
dataSource={nodes}
columns={columns}
rowKey="id"
loading={loading}
pagination={false}
size="small"
scroll={{ x: 1100 }}
/>
<Card title="节点列表" extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>} style={{ borderRadius: 10 }}>
<Table dataSource={nodes} columns={columns} rowKey="id" loading={loading} pagination={false} size="small" scroll={{ x: 1100 }} />
</Card>
</div>
)
frontend/src/admin/pages/Settings.tsx
+61 -46
View File
@@ -1,27 +1,28 @@
import { useState, useEffect } from 'react'
import {
Card, Select, Switch, Typography, message, Space, Descriptions, Button,
} from 'antd'
import { Card, Select, Switch, Form, Input, Button, Typography, message, Divider } from 'antd'
import api from '../../api/client'
const { Title } = Typography
const { Title, Text } = Typography
const strategies = [
{ value: 'subnet', label: 'Subnet-Aware (Recommended)' },
{ value: 'weighted', label: 'Weighted' },
{ value: 'round-robin', label: 'Round-Robin' },
{ value: 'least-conn', label: 'Least Connections' },
{ value: 'subnet', label: '子网优先（推荐）' },
{ value: 'weighted', label: '权重均衡' },
{ value: 'round-robin', label: '轮询' },
{ value: 'least-conn', label: '最少连接' },
]
export default function SettingsPage() {
const [strategy, setStrategy] = useState('weighted')
const [strategy, setStrategy] = useState('subnet')
const [multicastEnabled, setMulticastEnabled] = useState(true)
const [multicastAvailable, setMulticastAvailable] = useState(false)
const [saving, setSaving] = useState(false)
useEffect(() => {
loadSettings()
}, [])
const [brandName, setBrandName] = useState('StreamCore')
const [brandTagline, setBrandTagline] = useState('企业级直播平台')
const [brandLogoUrl, setBrandLogoUrl] = useState('')
const [brandSaving, setBrandSaving] = useState(false)
useEffect(() => { loadSettings(); loadBrand() }, [])
async function loadSettings() {
try {
@@ -29,56 +30,70 @@ export default function SettingsPage() {
setStrategy(data.strategy)
setMulticastEnabled(data.multicast_enabled)
setMulticastAvailable(data.multicast_available)
} catch { /* ignore */ }
} catch { /* */ }
}
async function loadBrand() {
try {
const { data } = await api.get('/settings/brand')
setBrandName(data.brand_name || 'StreamCore')
setBrandTagline(data.brand_tagline || '')
setBrandLogoUrl(data.brand_logo_url || '')
} catch { /* */ }
}
async function saveStrategy(val: string) {
setSaving(true)
try {
await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled })
setStrategy(val)
message.success('Strategy updated')
} catch { message.error('Update failed') }
try { await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled }); setStrategy(val); message.success('策略已更新') }
catch { message.error('更新失败') }
setSaving(false)
}
async function toggleMulticast(val: boolean) {
setMulticastEnabled(val)
try { await api.put('/nodes/strategy', { strategy, multicast_enabled: val }); message.success('组播设置已更新') }
catch { message.error('更新失败') }
}
async function saveBrand() {
setBrandSaving(true)
try {
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
message.success('Multicast settings updated')
} catch { message.error('Update failed') }
await api.put('/settings/brand', { brand_name: brandName, brand_tagline: brandTagline, brand_logo_url: brandLogoUrl })
message.success('品牌设置已保存')
} catch { message.error('保存失败') }
setBrandSaving(false)
}
return (
<div style={{ maxWidth: 720 }}>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>System Settings</Title>
<Title level={3} style={{ marginBottom: 24 }}>系统设置</Title>
<Card title="Load Balancing" style={{ marginBottom: 24, borderRadius: 12 }}>
<Descriptions column={1} labelStyle={{ width: 120 }}>
<Descriptions.Item label="Strategy">
<Select
value={strategy}
onChange={saveStrategy}
options={strategies}
loading={saving}
style={{ width: 280 }}
/>
</Descriptions.Item>
</Descriptions>
<Card title="负载均衡" style={{ marginBottom: 24, borderRadius: 10 }}>
<Form layout="vertical">
<Form.Item label="均衡策略" help="子网优先：根据客户端IP所属子网自动选择最近节点">
<Select value={strategy} onChange={saveStrategy} options={strategies} loading={saving} style={{ width: 280 }} />
</Form.Item>
<Form.Item label="组播">
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
<Text type="secondary" style={{ marginLeft: 12 }}>
{multicastAvailable ? '可用 — 优先使用组播分发' : '不可用 — 回退至单播'}
</Text>
</Form.Item>
</Form>
</Card>
<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="Network Status">
<span style={{ color: multicastAvailable ? '#2E7D32' : '#999' }}>
{multicastAvailable ? 'Available - using multicast' : 'Unavailable - fallback to unicast'}
</span>
</Descriptions.Item>
</Descriptions>
<Card title="品牌设置" style={{ borderRadius: 10 }}>
<Form layout="vertical">
<Form.Item label="平台名称">
<Input value={brandName} onChange={e => setBrandName(e.target.value)} placeholder="StreamCore" />
</Form.Item>
<Form.Item label="标语">
<Input value={brandTagline} onChange={e => setBrandTagline(e.target.value)} placeholder="企业级直播平台" />
</Form.Item>
<Form.Item label="Logo 图片地址">
<Input value={brandLogoUrl} onChange={e => setBrandLogoUrl(e.target.value)} placeholder="https://..." />
</Form.Item>
<Form.Item>
<Button type="primary" loading={brandSaving} onClick={saveBrand}>保存品牌设置</Button>
</Form.Item>
</Form>
</Card>
</div>
)
frontend/src/admin/pages/StreamForm.tsx
+25 -65
View File
@@ -1,8 +1,6 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert,
} from 'antd'
import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert } from 'antd'
import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { createStream } from '../../api/streams'
@@ -24,64 +22,39 @@ export default function StreamForm() {
scheduled_at: values.scheduled_at?.toISOString(),
})
setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key })
message.success('Stream created')
} catch {
message.error('Failed to create')
}
message.success('直播已创建')
} catch { message.error('创建失败') }
setLoading(false)
}
if (result) {
return (
<div style={{ maxWidth: 640 }}>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Stream Created</Title>
<Alert
type="success"
message="Push information generated"
<Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
<Alert type="success" showIcon message="推流信息" style={{ marginBottom: 24 }}
description={
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div>
<Text strong>Stream Key (UUID):</Text>
<div style={{
marginTop: 8, padding: 12,
background: '#F5F6FA', borderRadius: 8,
fontFamily: 'monospace', fontSize: 14,
wordBreak: 'break-all',
}}>
<Text strong>推流码:</Text>
<div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', borderRadius: 6, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
{result.stream_key}
</div>
</div>
<div>
<Text strong>RTMP Push URL:</Text>
<div style={{
marginTop: 8, padding: 12,
background: '#F5F6FA', borderRadius: 8,
fontFamily: 'monospace', fontSize: 14,
wordBreak: 'break-all',
}}>
<Text strong>RTMP 推流地址:</Text>
<div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', borderRadius: 6, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
{result.rtmp_url}
</div>
</div>
</Space>
}
showIcon
style={{ marginBottom: 24 }}
/>
<Space>
<Button
icon={<CopyOutlined />}
onClick={() => {
navigator.clipboard.writeText(
`Stream Key: ${result.stream_key}\nRTMP URL: ${result.rtmp_url}`
)
message.success('Copied')
}}
>
Copy All
</Button>
<Button type="primary" onClick={() => navigate('/admin/streams')}>
Back to List
</Button>
<Button icon={<CopyOutlined />} onClick={() => {
navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`)
message.success('已复制')
}}>复制全部</Button>
<Button type="primary" onClick={() => navigate('/admin/streams')}>返回列表</Button>
</Space>
</div>
)
@@ -89,37 +62,24 @@ export default function StreamForm() {
return (
<div style={{ maxWidth: 640 }}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/admin/streams')}
style={{ marginBottom: 16 }}
>
Back
</Button>
<Card style={{ borderRadius: 12 }}>
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>New Stream</Title>
<Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')} style={{ marginBottom: 16 }}>返回</Button>
<Card style={{ borderRadius: 10 }}>
<Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
<Form layout="vertical" onFinish={handleSubmit}>
<Form.Item
name="title"
label="Stream Title"
rules={[{ required: true, message: 'Please enter a title' }]}
>
<Input placeholder="Enter stream title" size="large" />
<Form.Item name="title" label="直播标题" rules={[{ required: true, message: '请输入标题' }]}>
<Input placeholder="输入直播标题" size="large" />
</Form.Item>
<Form.Item name="description" label="Description">
<TextArea rows={3} placeholder="Optional description" />
<Form.Item name="description" label="简介">
<TextArea rows={3} placeholder="可选简介" />
</Form.Item>
<Form.Item name="cover_url" label="Cover Image URL">
<Form.Item name="cover_url" label="封面图片地址">
<Input placeholder="https://..." />
</Form.Item>
<Form.Item name="scheduled_at" label="Scheduled Time">
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="Select schedule time" />
<Form.Item name="scheduled_at" label="预定开播时间">
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择时间" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading} size="large" block>
Create Stream
</Button>
<Button type="primary" htmlType="submit" loading={loading} size="large" block>创建直播</Button>
</Form.Item>
</Form>
</Card>
frontend/src/admin/pages/StreamList.tsx
+27 -78
View File
@@ -1,18 +1,16 @@
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import {
Table, Button, Tag, Space, Modal, Typography, message, Tooltip, Popconfirm,
} from 'antd'
import { Table, Button, Tag, Space, Typography, message, Tooltip, Popconfirm } from 'antd'
import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '../../api/streams'
const { Title, Text } = Typography
const { Title } = Typography
const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: 'Scheduled' },
live: { color: 'green', label: 'Live' },
ended: { color: 'default', label: 'Ended' },
cancelled: { color: 'red', label: 'Cancelled' },
pending: { color: 'blue', label: '待开播' },
live: { color: 'green', label: '直播中' },
ended: { color: 'default', label: '已结束' },
cancelled: { color: 'red', label: '已取消' },
}
export default function StreamList() {
@@ -24,80 +22,40 @@ export default function StreamList() {
async function loadData() {
setLoading(true)
try {
const data = await fetchStreams()
setStreams(data)
} catch { message.error('Failed to load streams') }
try { setStreams(await fetchStreams()) } catch { message.error('加载失败') }
setLoading(false)
}
async function handleDelete(id: number) {
try {
await deleteStream(id)
message.success('Deleted')
loadData()
} catch { message.error('Failed to delete') }
try { await deleteStream(id); message.success('已删除'); loadData() } catch { message.error('删除失败') }
}
async function handleGoLive(id: number) {
try {
await goLive(id)
message.success('Stream is now live')
loadData()
} catch { message.error('Operation failed') }
try { await goLive(id); message.success('已开播'); loadData() } catch { message.error('操作失败') }
}
async function handleEnd(id: number) {
try {
await endStream(id)
message.success('Stream ended')
loadData()
} catch { message.error('Operation failed') }
try { await endStream(id); message.success('已结束'); loadData() } catch { message.error('操作失败') }
}
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{ title: '状态', dataIndex: 'status', key: 'status', width: 100,
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
{
title: '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: '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) => (
title: '操作', key: 'actions', width: 280,
render: (_: any, r: StreamInfo) => (
<Space size="small">
<Button
size="small"
icon={<LinkOutlined />}
onClick={() => {
navigator.clipboard.writeText(record.stream_key)
message.success('Stream key copied')
}}
>
Copy Key
<Button size="small" icon={<LinkOutlined />}
onClick={() => { navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }}>
复制推流码
</Button>
{record.status !== 'live' ? (
<Tooltip title="Go Live">
<Button size="small" type="primary" icon={<PlayCircleOutlined />}
onClick={() => handleGoLive(record.id)} ghost />
</Tooltip>
{r.status !== 'live' ? (
<Tooltip title="开播"><Button size="small" type="primary" icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} ghost /></Tooltip>
) : (
<Tooltip title="End Stream">
<Button size="small" icon={<StopOutlined />}
onClick={() => handleEnd(record.id)} danger />
</Tooltip>
<Tooltip title="结束"><Button size="small" icon={<StopOutlined />} onClick={() => handleEnd(r.id)} danger /></Tooltip>
)}
<Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
Watch
</Button>
<Popconfirm title="Delete this stream?" onConfirm={() => handleDelete(record.id)}>
<Button size="small" onClick={() => window.open(`/watch/${r.id}`, '_blank')}>观看</Button>
<Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
<Button size="small" icon={<DeleteOutlined />} danger />
</Popconfirm>
</Space>
@@ -108,19 +66,10 @@ export default function StreamList() {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>Streams</Title>
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
New Stream
</Button>
<Title level={3} style={{ margin: 0 }}>直播列表</Title>
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>创建直播</Button>
</div>
<Table
dataSource={streams}
columns={columns}
rowKey="id"
loading={loading}
pagination={{ pageSize: 15 }}
size="middle"
/>
<Table dataSource={streams} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 15 }} size="middle" />
</div>
)
}