品牌化重构: StreamCore + 现代UI主题 + 英文界面
- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标)
- 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体
白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感
- 首页移除管理入口,纯观众视角(渐变横幅+卡片列表)
- 统一品牌名称 StreamCore (替换LiveStream)
- 全部界面英文(antd默认locale,去除zhCN)
- 登录页渐变+卡片居中布局
This commit is contained in:
1 parent
b81a7bf293
commit
5f19fc6aa5
14 files changed
+253
-225
No files matched your search
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user