55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Loader2 } from "lucide-react"
|
|
|
|
export default function ServerStats() {
|
|
const [serverStat, setServerStat] = useState<{ timestamp: number } | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
const fetchServerStat = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const response = await fetch("https://v-api-proxy-cn-1.mei.lv:3389/basic/v1/ServerStat/info")
|
|
if (!response.ok) {
|
|
throw new Error("服务器响应错误")
|
|
}
|
|
const data = await response.json()
|
|
setServerStat(data)
|
|
} catch (error) {
|
|
console.error("获取服务器统计信息时出错:", error)
|
|
setError("无法获取服务器统计信息")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchServerStat()
|
|
}, [])
|
|
|
|
return (
|
|
<Card className="bg-gradient-to-br from-blue-100 to-purple-100">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl font-bold text-primary">服务器统计</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
) : error ? (
|
|
<p className="text-red-500">{error}</p>
|
|
) : serverStat ? (
|
|
<p className="text-lg">最后更新时间: {new Date(serverStat.timestamp * 1000).toLocaleString("zh-CN")}</p>
|
|
) : (
|
|
<p>暂无数据</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|