102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useConfigStore } from '../stores/configStore'
|
|
|
|
type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error'
|
|
|
|
interface ConnectionStatusProps {
|
|
showDetails?: boolean
|
|
}
|
|
|
|
export function ConnectionStatus({ showDetails = false }: ConnectionStatusProps) {
|
|
const { config } = useConfigStore()
|
|
const [status, setStatus] = useState<ConnectionState>('connecting')
|
|
const [latency, setLatency] = useState<number | null>(null)
|
|
|
|
useEffect(() => {
|
|
const checkConnection = async () => {
|
|
if (!config?.server_url) {
|
|
setStatus('disconnected')
|
|
return
|
|
}
|
|
|
|
try {
|
|
const start = performance.now()
|
|
const response = await fetch(`${config.server_url}/api/v1/health`, {
|
|
signal: AbortSignal.timeout(5000),
|
|
})
|
|
const elapsed = Math.round(performance.now() - start)
|
|
|
|
if (response.ok) {
|
|
setStatus('connected')
|
|
setLatency(elapsed)
|
|
} else {
|
|
setStatus('error')
|
|
setLatency(null)
|
|
}
|
|
} catch {
|
|
setStatus('disconnected')
|
|
setLatency(null)
|
|
}
|
|
}
|
|
|
|
checkConnection()
|
|
const interval = setInterval(checkConnection, 30000)
|
|
return () => clearInterval(interval)
|
|
}, [config?.server_url])
|
|
|
|
const statusConfig = {
|
|
connected: {
|
|
color: 'bg-green-500',
|
|
text: '已连接',
|
|
icon: '🟢',
|
|
},
|
|
connecting: {
|
|
color: 'bg-yellow-500 animate-pulse',
|
|
text: '连接中',
|
|
icon: '🟡',
|
|
},
|
|
disconnected: {
|
|
color: 'bg-red-500',
|
|
text: '未连接',
|
|
icon: '🔴',
|
|
},
|
|
error: {
|
|
color: 'bg-orange-500',
|
|
text: '连接异常',
|
|
icon: '🟠',
|
|
},
|
|
}
|
|
|
|
const { color, text, icon } = statusConfig[status]
|
|
|
|
if (!showDetails) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${color}`} />
|
|
<span className="text-xs text-gray-400">{text}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 px-3 py-2 bg-gray-800/50 rounded-lg">
|
|
<span className="text-sm">{icon}</span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-white">{config?.server_name || 'FunMC'}</p>
|
|
<p className="text-xs text-gray-400 truncate">{config?.server_url}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs text-gray-400">{text}</p>
|
|
{latency !== null && (
|
|
<p className={`text-xs font-mono ${
|
|
latency < 100 ? 'text-green-400' :
|
|
latency < 300 ? 'text-yellow-400' : 'text-red-400'
|
|
}`}>
|
|
{latency}ms
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|