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('策略已更新')
|
|
} catch { message.error('更新失败') }
|
|
setSaving(false)
|
|
}
|
|
|
|
async function toggleMulticast(val: boolean) {
|
|
setMulticastEnabled(val)
|
|
try {
|
|
await api.put(`/nodes/strategy?strategy=${strategy}&multicast_enabled=${val}`)
|
|
message.success('组播设置已更新')
|
|
} catch { message.error('更新失败') }
|
|
}
|
|
|
|
return (
|
|
<div style={{ maxWidth: 720 }}>
|
|
<Title level={3} style={{ marginBottom: 24 }}>系统设置</Title>
|
|
|
|
<Card title="负载均衡" style={{ marginBottom: 24 }}>
|
|
<Descriptions column={1} labelStyle={{ width: 140 }}>
|
|
<Descriptions.Item label="均衡策略">
|
|
<Select
|
|
value={strategy}
|
|
onChange={saveStrategy}
|
|
options={strategies}
|
|
loading={saving}
|
|
style={{ width: 280 }}
|
|
/>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Card>
|
|
|
|
<Card title="组播设置">
|
|
<Descriptions column={1} labelStyle={{ width: 140 }}>
|
|
<Descriptions.Item label="启用组播">
|
|
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="网络状态">
|
|
<span style={{ color: multicastAvailable ? '#52c41a' : '#999' }}>
|
|
{multicastAvailable ? '可用 — 优先使用组播分发' : '不可用 — 回退至单播'}
|
|
</span>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|