wmp/jh-monitor
1
0
Fork 0
Code Actions Packages Releases 5 Activity

更新字段枚举值展示&修复节点分页滑轮滚动和数据总数展示

Browse Source
This commit is contained in:
wmp
2025-09-22 15:11:09 +08:00
parent 826d8fc4c3
commit fd8fede301
4 changed files with 150 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/api/stats/route.ts
View File

@@ -91,11 +91,23 @@ async function getCityConfigCount() {
async function getCityNodeCount() {
try {
const result = await prisma.$queryRaw`
SELECT c.city, c.hash, c.label, COUNT(e.id) as count, c.offset
FROM cityhash c
LEFT JOIN edge e ON c.id = e.city_id
GROUP BY c.hash, c.city, c.label, c.offset
ORDER BY count DESC
select c.city, c.hash, c.label, e.count, c.\`offset\`
from
cityhash c
left join (
select city_id, count(*) as count
from
edge
where
edge.active is true
group by
city_id
) e
on c.id = e.city_id
group by
c.hash
order by
count desc
`
return NextResponse.json(safeSerialize(result))
} catch (error) {
@@ -158,21 +170,34 @@ async function getAllocationStatus(request: NextRequest) {
// 获取节点信息
async function getEdgeNodes(request: NextRequest) {
try {
const { searchParams } = new URL(request.url)
const threshold = searchParams.get('threshold') || '0'
const limit = searchParams.get('limit') || '100'
const offset = parseInt(searchParams.get('offset') || '0')
const limit = parseInt(searchParams.get('limit') || '100')
// 获取总数 - 使用类型断言
const totalCountResult = await prisma.$queryRaw<[{ total: bigint }]>`
SELECT COUNT(*) as total
FROM edge
WHERE active = true
`
const totalCount = Number(totalCountResult[0]?.total || 0)
// 使用参数化查询防止SQL注入
// 获取分页数据
const result = await prisma.$queryRaw`
SELECT edge.id, edge.macaddr, city, public, isp, single, sole, arch, online
FROM edge
LEFT JOIN cityhash ON cityhash.id = edge.city_id
WHERE edge.id > ${threshold} AND active = true
LIMIT ${limit}
WHERE edge.active = true
ORDER BY edge.id
LIMIT ${limit} OFFSET ${offset}
`
return NextResponse.json(safeSerialize(result))
return NextResponse.json({
data: safeSerialize(result),
totalCount: totalCount,
currentPage: Math.floor(offset / limit) + 1,
totalPages: Math.ceil(totalCount / limit)
})
} catch (error) {
console.error('Edge nodes query error:', error)
return NextResponse.json({ error: '查询边缘节点失败' }, { status: 500 })

128
src/app/dashboard/components/edge.tsx
View File

@@ -21,27 +21,28 @@ export default function Edge() {
const [data, setData] = useState<Edge[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [idThreshold,] = useState(0)
const [limit,] = useState(100)
// 分页状态
const [currentPage, setCurrentPage] = useState(1)
const [itemsPerPage, setItemsPerPage] = useState(10)
const [itemsPerPage, setItemsPerPage] = useState(100) // 默认100条
const [totalItems, setTotalItems] = useState(0)
useEffect(() => {
fetchData()
}, [])
}, [currentPage, itemsPerPage]) // 监听页码和每页数量的变化
const fetchData = async (threshold: number = idThreshold, resultLimit: number = limit) => {
const fetchData = async () => {
try {
setError(null)
setLoading(true)
const response = await fetch(`/api/stats?type=edge_nodes&threshold=${threshold}&limit=${resultLimit}`)
// 计算偏移量
const offset = (currentPage - 1) * itemsPerPage
const response = await fetch(`/api/stats?type=edge_nodes&offset=${offset}&limit=${itemsPerPage}`)
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
const result = await response.json()
type ResultEdge = {
id: number
macaddr: string
@@ -54,21 +55,20 @@ export default function Edge() {
online: number
}
const validatedData = (result as ResultEdge[]).map((item) => ({
const validatedData = (result.data as ResultEdge[]).map((item) => ({
id: validateNumber(item.id),
macaddr: item.macaddr || '',
city: item.city || '',
public: item.public || '',
isp: item.isp || '',
single: item.single === 1 || item.single === true,
sole: item.sole === 1 || item.sole === true,
single: item.single,
sole: item.sole,
arch: validateNumber(item.arch),
online: validateNumber(item.online)
}))
setData(validatedData)
setTotalItems(validatedData.length)
setCurrentPage(1) // 重置到第一页
setTotalItems(result.totalCount || 0)
} catch (error) {
console.error('Failed to fetch edge nodes:', error)
setError(error instanceof Error ? error.message : '获取边缘节点数据失败')
@@ -77,8 +77,66 @@ export default function Edge() {
}
}
const formatBoolean = (value: boolean | number): string => {
// 多IP节点格式化
const formatMultiIP = (value: number | boolean): string => {
if (typeof value === 'number') {
switch (value) {
case 1: return '是'
case 0: return '否'
case -1: return '未知'
default: return `未知 (${value})`
}
}
return value ? '是' : '否'
}
// 独享IP节点格式化
const formatExclusiveIP = (value: number | boolean): string => {
if (typeof value === 'number') {
return value === 1 ? '是' : '否'
}
return value ? '是' : '否'
}
// 多IP节点颜色
const getMultiIPColor = (value: number | boolean): string => {
if (typeof value === 'number') {
switch (value) {
case 1: return 'bg-red-100 text-red-800'
case 0: return 'bg-green-100 text-green-800'
case -1: return 'bg-gray-100 text-gray-800'
default: return 'bg-gray-100 text-gray-800'
}
}
return value ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
}
// 独享IP节点颜色
const getExclusiveIPColor = (value: number | boolean): string => {
if (typeof value === 'number') {
return value === 1 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
}
return value ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
}
const formatArchType = (arch: number): string => {
switch (arch) {
case 0: return '一代'
case 1: return '二代'
case 2: return 'AMD64'
case 3: return 'x86'
default: return `未知 (${arch})`
}
}
const getArchColor = (arch: number): string => {
switch (arch) {
case 0: return 'bg-blue-100 text-blue-800'
case 1: return 'bg-green-100 text-green-800'
case 2: return 'bg-purple-100 text-purple-800'
case 3: return 'bg-orange-100 text-orange-800'
default: return 'bg-gray-100 text-gray-800'
}
}
const formatOnlineTime = (seconds: number): string => {
@@ -88,11 +146,6 @@ export default function Edge() {
return `${Math.floor(seconds / 86400)}天`
}
// 计算分页数据
const indexOfLastItem = currentPage * itemsPerPage
const indexOfFirstItem = indexOfLastItem - itemsPerPage
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem)
// 处理页码变化
const handlePageChange = (page: number) => {
setCurrentPage(page)
@@ -125,7 +178,7 @@ export default function Edge() {
)
return (
<div className="bg-white shadow rounded-lg p-6">
<div className="flex bg-white flex-col shadow overflow-hidden rounded-lg p-6">
{data.length === 0 ? (
<div className="text-center py-12">
<div className="text-gray-400 text-4xl mb-4">📋</div>
@@ -138,7 +191,6 @@ export default function Edge() {
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">ID</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">MAC地址</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">城市</TableHead>
<TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">公网IP</TableHead>
@@ -150,9 +202,8 @@ export default function Edge() {
</TableRow>
</TableHeader>
<TableBody>
{currentItems.map((item, index) => (
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell className="px-4 py-3 text-sm text-gray-900">{item.id}</TableCell>
{data.map((item, index) => (
<TableRow key={item.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell className="px-4 py-3 text-sm font-mono text-blue-600">{item.macaddr}</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">{item.city}</TableCell>
<TableCell className="px-4 py-3 text-sm font-mono text-green-600">{item.public}</TableCell>
@@ -164,23 +215,23 @@ export default function Edge() {
'bg-gray-100 text-gray-800'
}`}>
{item.isp}
</span></TableCell>
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-center">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
item.single ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
}`}>
{formatBoolean(item.single)}
</span></TableCell>
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getMultiIPColor(item.single)}`}>
{formatMultiIP(item.single)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-center">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
item.sole ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
}`}>
{formatBoolean(item.sole)}
</span></TableCell>
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getExclusiveIPColor(item.sole)}`}>
{formatExclusiveIP(item.sole)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-center">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
{item.arch}
</span></TableCell>
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getArchColor(item.arch)}`}>
{formatArchType(item.arch)}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-gray-700">{formatOnlineTime(item.online)}</TableCell>
</TableRow>
))}
@@ -188,7 +239,8 @@ export default function Edge() {
</Table>
</div>
</div>
{/* 使用 Pagination 组件 */}
{/* 分页 */}
<Pagination
page={currentPage}
size={itemsPerPage}

17
src/app/dashboard/components/gatewayConfig.tsx
View File

@@ -98,24 +98,21 @@ function GatewayConfigContent() {
}
const getStatusBadge = (value: number, trueText: string = '是', falseText: string = '否') => {
// 0是正常1是更新，正常（绿）+ 更新（红）
return (
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
value === 0
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
}`}>
value === 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
{value === 0 ? trueText : falseText}
</span>
)
}
const getOnlineStatus = (isonline: number) => {
// 0是空闲1是在用，在用（红）+ 空闲（绿）
return (
<div className="flex items-center">
<div className={`w-2 h-2 rounded-full mr-2 ${
isonline === 1 ? 'bg-green-500' : 'bg-red-500'
}`} />
{getStatusBadge(isonline, '在线', '离线')}
<div className={`${isonline === 0 ? 'bg-green-500' : 'bg-red-500'}`} />
{getStatusBadge(isonline, '空闲', '在用')}
</div>
)
}
@@ -189,7 +186,7 @@ function GatewayConfigContent() {
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内网入口</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配置更新</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">在线状态</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">在用状态</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -213,7 +210,7 @@ function GatewayConfigContent() {
<div className="font-mono text-sm text-purple-600">{item.inner_ip}</div>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<div className="font-mono text-sm text-green-600">{getStatusBadge(item.ischange, '正常', '需更新')}</div>
<div className="font-mono text-sm text-green-600">{getStatusBadge(item.ischange, '正常', '更新')}</div>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<div className="font-mono text-sm text-purple-600">{getOnlineStatus(item.isonline)}</div>

14
src/app/dashboard/components/gatewayinfo.tsx
View File

@@ -42,7 +42,7 @@ export default function Gatewayinfo() {
const form = useForm<FilterSchema>({
resolver: zodResolver(filterSchema),
defaultValues: {
status: 'all',
status: '1',
},
})
@@ -53,21 +53,21 @@ export default function Gatewayinfo() {
fetchData()
}, [])
useEffect(() => {
useEffect(() => {
if (!data.length) return
if (statusFilter === 'all') {
setFilteredData(data)
} else {
const filterValue = statusFilter || 'all'
if (filterValue === 'all') {
const enableValue = parseInt(statusFilter)
// 添加 NaN 检查
if (isNaN(enableValue)) {
setFilteredData(data)
} else {
const enableValue = parseInt(filterValue)
setFilteredData(data.filter(item => item.enable === enableValue))
}
}
}, [data, statusFilter])
}, [data, statusFilter])
const fetchData = async () => {
try {
@@ -136,7 +136,7 @@ export default function Gatewayinfo() {
<Select
value={field.value}
onValueChange={field.onChange}
defaultValue="all"
defaultValue="1"
>
<SelectTrigger className="h-9 w-36">
<SelectValue placeholder="选择状态" />