- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标)
- 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体
白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感
- 首页移除管理入口,纯观众视角(渐变横幅+卡片列表)
- 统一品牌名称 StreamCore (替换LiveStream)
- 全部界面英文(antd默认locale,去除zhCN)
- 登录页渐变+卡片居中布局
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import {
|
|
Card, Select, Switch, Typography, message, Space, Descriptions, Button,
|
|
} from 'antd'
|
|
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' },
|
|
]
|
|
|
|
export default function SettingsPage() {
|
|
const [strategy, setStrategy] = useState('weighted')
|
|
const [multicastEnabled, setMulticastEnabled] = useState(true)
|
|
const [multicastAvailable, setMulticastAvailable] = useState(false)
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadSettings()
|
|
}, [])
|
|
|
|
async function loadSettings() {
|
|
try {
|
|
const { data } = await api.get('/nodes/strategy')
|
|
setStrategy(data.strategy)
|
|
setMulticastEnabled(data.multicast_enabled)
|
|
setMulticastAvailable(data.multicast_available)
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
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') }
|
|
setSaving(false)
|
|
}
|
|
|
|
async function toggleMulticast(val: boolean) {
|
|
setMulticastEnabled(val)
|
|
try {
|
|
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
|
|
message.success('Multicast settings updated')
|
|
} catch { message.error('Update failed') }
|
|
}
|
|
|
|
return (
|
|
<div style={{ maxWidth: 720 }}>
|
|
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>System Settings</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>
|
|
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|