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

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>
)
}