33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
"use client"
|
|
|
|
import { Label } from "@/components/ui/label"
|
|
import { useWS } from "./ws-context"
|
|
|
|
export default function StatusBar() {
|
|
|
|
const { wsStatus } = useWS()
|
|
|
|
// 根据WebSocket状态返回对应颜色的圆点
|
|
const getStatusDot = () => {
|
|
switch (wsStatus) {
|
|
case 'connected':
|
|
return <div className="w-2 h-2 bg-green-500 rounded-full" title="已连接" />
|
|
case 'connecting':
|
|
return <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse" title="连接中..." />
|
|
case 'disconnected':
|
|
default:
|
|
return <div className="w-2 h-2 bg-red-500 rounded-full" title="连接断开" />
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="h-8 flex items-center justify-end px-4">
|
|
<div className="flex items-center">
|
|
{getStatusDot()}
|
|
<Label className="ml-2 text-xs font-bold text-muted-foreground">
|
|
{wsStatus}
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |