78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { getCityNodeCount, type CityNode } from '@/actions/stats'
|
|
import { Page } from '@/components/page'
|
|
import { DataTable } from '@/components/data-table'
|
|
|
|
export default function CityNodeStats() {
|
|
const [data, setData] = useState<CityNode[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [])
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const result = await getCityNodeCount()
|
|
if (!result.success) {
|
|
throw new Error(result.error || '查询城市节点失败')
|
|
}
|
|
setData(result.data)
|
|
}
|
|
catch (error) {
|
|
console.error('获取城市节点数据失败:', error)
|
|
}
|
|
finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="bg-white p-6 w-full overflow-hidden">
|
|
<h2 className="text-lg font-semibold mb-4">城市节点数量分布</h2>
|
|
<div className="text-gray-600">加载中...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">城市节点数量分布</h2>
|
|
<span className="text-sm text-gray-500">
|
|
共 {data.length} 个城市
|
|
</span>
|
|
</div>
|
|
|
|
<DataTable
|
|
data={data}
|
|
columns={[
|
|
{
|
|
label: '城市',
|
|
props: 'city',
|
|
},
|
|
{
|
|
label: '节点数量',
|
|
props: 'count',
|
|
},
|
|
{
|
|
label: 'Hash',
|
|
props: 'hash',
|
|
},
|
|
{
|
|
label: '标签',
|
|
props: 'label',
|
|
},
|
|
{
|
|
label: '轮换顺位',
|
|
props: 'offset',
|
|
},
|
|
]}
|
|
/>
|
|
</Page>
|
|
)
|
|
}
|