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

新增表单查询和复制功能

Browse Source
This commit is contained in:
wmp
2025-09-29 09:49:53 +08:00
parent e36cfbca83
commit 969d49ab50
9 changed files with 601 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/actions/stats.ts
View File

@@ -105,15 +105,22 @@ export type GatewayConfig = {
}
// 网关配置
export async function getGatewayConfig(page?: number, mac?: string): Promise<Res<Page<GatewayConfig>>> {
export async function getGatewayConfig(page?: number, filters?: {
mac?: string
public?: string
city?: string
user?: string
inner_ip?: string
}): Promise<Res<Page<GatewayConfig>>> {
try {
if (!page && !mac) {
if (!page && !filters?.mac) {
throw new Error('页码和MAC地址不能同时为空')
}
page = mac ? 1 : Math.max(1, page || 1)
page = filters?.mac ? 1 : Math.max(1, page || 1)
const [total, result] = await Promise.all([
drizzle.$count(gateway, mac ? eq(gateway.macaddr, mac) : undefined),
drizzle.$count(gateway, filters?.mac ? eq(gateway.macaddr, filters?.mac) : undefined),
drizzle
.select({
city: cityhash.city,
@@ -127,12 +134,11 @@ export async function getGatewayConfig(page?: number, mac?: string): Promise<Res
.from(gateway)
.leftJoin(cityhash, eq(cityhash.hash, gateway.cityhash))
.leftJoin(edge, eq(edge.macaddr, gateway.edge))
.where(mac ? eq(gateway.macaddr, mac) : undefined)
.where(filters?.mac ? eq(gateway.macaddr, filters?.mac) : undefined)
.orderBy(sql`inet_aton(gateway.inner_ip)`)
.offset((page - 1) * 250)
.limit(250),
])
return {
success: true,
data: {
@@ -201,12 +207,44 @@ export async function getCityNodeCount() {
}
}
// 获取节点信息
export async function getEdgeNodes(page: number, size: number) {
try {
const offset = Math.max(0, (page - 1)) * size
const limit = Math.min(100, Math.max(10, size))
export type Edge = {
id: number
macaddr: string
city: string
public: string
isp: string
single: number | boolean
sole: number | boolean
arch: number
online: number
}
// 获取节点信息
export async function getEdgeNodes(props?: {
macaddr?: string
public?: string
city?: string
isp?: string
},
page: number = 1) {
try {
const size = 250
const offset = Math.max(0, (page - 1)) * size
// 构建查询条件
let whereCondition = eq(edge.active, 1)
if (props?.macaddr) {
whereCondition = sql`${whereCondition} AND ${edge.macaddr} = ${props.macaddr}`
}
if (props?.public) {
whereCondition = sql`${whereCondition} AND ${edge.public} LIKE ${`%${props.public}%`}`
}
if (props?.city) {
whereCondition = sql`${whereCondition} AND ${cityhash.city} LIKE ${`%${props.city}%`}`
}
if (props?.isp) {
whereCondition = sql`${whereCondition} AND ${edge.isp} LIKE ${`%${props.isp}%`}`
}
const [total, data] = await Promise.all([
drizzle.$count(edge, eq(edge.active, 1)),
drizzle
@@ -226,15 +264,14 @@ export async function getEdgeNodes(page: number, size: number) {
.where(eq(edge.active, 1))
.orderBy(edge.id)
.offset(offset)
.limit(limit),
.limit(size),
])
return {
success: true,
data,
totalCount: total,
currentPage: Math.floor(offset / limit) + 1,
totalPages: Math.ceil(total / limit),
}
}
catch (error) {

207
src/app/dashboard/components/allocationStatus.tsx
View File

@@ -5,30 +5,82 @@ import LoadingCard from '@/components/ui/loadingCard'
import ErrorCard from '@/components/ui/errorCard'
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
import { getAllocationStatus, type AllocationStatus } from '@/actions/stats'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Form, FormField } from '@/components/ui/form'
import { z } from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Button } from '@/components/ui/button'
import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
const filterSchema = z.object({
timeFilter: z.string(),
})
type FilterSchema = z.infer<typeof filterSchema>
type SortKey = 'city' | 'count' | 'assigned' | 'overage'
export default function AllocationStatus({ detailed = false }: { detailed?: boolean }) {
const [data, setData] = useState<AllocationStatus[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [timeFilter, setTimeFilter] = useState('24') // 默认24小时
const [customHours, setCustomHours] = useState('')
// 3.添加状态管理
const [sortKey, setSortKey] = useState<SortKey>('count')
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
const form = useForm<FilterSchema>({
resolver: zodResolver(filterSchema),
defaultValues: {
timeFilter: '24',
},
})
const timeFilter = form.watch('timeFilter')
// 获取时间参数（小时数）
const getTimeHours = useCallback(() => {
if (timeFilter === 'custom' && customHours) {
const hours = parseInt(customHours)
return isNaN(hours) ? 24 : Math.max(1, hours) // 默认24小时，最少1小时
}
return parseInt(timeFilter) || 24 // 默认24小时
}, [timeFilter, customHours])
// 计算超额量
return parseInt(timeFilter) || 24
}, [timeFilter])
// 1.准备计算超额量的工具函数
const calculateOverage = (assigned: number, count: number) => {
const overage = assigned - count
return Math.max(0, overage)
return Math.max(0, assigned - count)
}
// 2.写一个排序数据的函数
// 5.计算排序后的数据
const sortedData = [...data].sort((a, b) => {
let aValue: string | number
let bValue: string | number
switch (sortKey) {
case 'city':
aValue = a.city || '未知'
bValue = b.city || '未知'
break
case 'count':
aValue = Number(a.count)
bValue = Number(b.count)
break
case 'assigned':
aValue = Number(a.assigned)
bValue = Number(b.assigned)
break
case 'overage':
aValue = calculateOverage(Number(a.assigned), Number(a.count))
bValue = calculateOverage(Number(b.assigned), Number(b.count))
break
}
if (typeof aValue === 'string') {
return sortDirection === 'asc'
? aValue.localeCompare(bValue as string)
: (bValue as string).localeCompare(aValue)
}
else {
return sortDirection === 'asc'
? aValue - (bValue as number)
: (bValue as number) - aValue
}
})
const fetchData = useCallback(async () => {
try {
setError(null)
@@ -37,16 +89,13 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
const hours = getTimeHours()
const result = await getAllocationStatus(hours)
// 数据验证
const validatedData = (result.data).map(item => ({
const validatedData = result.data.map(item => ({
city: item.city || '未知',
count: item.count,
assigned: item.assigned,
}))
const sortedData = validatedData.sort((a, b) => b.count - a.count)
setData(sortedData)
setData(validatedData)
}
catch (error) {
console.error('Failed to fetch allocation status:', error)
@@ -61,36 +110,67 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
fetchData()
}, [fetchData])
// 4.封装一个函数用于处理排序问题
const handleSort = (key: SortKey) => {
if (sortKey === key) {
setSortDirection(direction => direction === 'asc' ? 'desc' : 'asc')
}
else {
setSortKey(key)
setSortDirection('desc')
}
}
// 6. 渲染排序图标，然后集成到ui里
const renderSortIcon = (key: SortKey) => {
if (sortKey !== key) {
return <ArrowUpDown className="h-4 w-4 text-gray-400" />
}
return sortDirection === 'asc'
? <ArrowUp className="h-4 w-4 text-blue-600" />
: <ArrowDown className="h-4 w-4 text-blue-600" />
}
const onSubmit = (data: FilterSchema) => {
fetchData()
}
if (loading) return <LoadingCard title="节点分配状态" />
if (error) return <ErrorCard title="节点分配状态" error={error} onRetry={fetchData} />
const problematicCities = data.filter(item => item.assigned > item.count)
return (
<div className="flex flex-col bg-white shadow rounded-lg p-6 overflow-hidden ">
<div className="flex flex-col bg-white shadow p-6 overflow-hidden">
<h2 className="text-lg font-semibold mb-4">节点分配状态</h2>
{/* 时间筛选器 */}
<div className="mb-4 flex flex-wrap items-center gap-3">
<label className="font-medium">时间筛选:</label>
<select
value={timeFilter}
onChange={e => setTimeFilter(e.target.value)}
className="border rounded p-2"
>
<option value="1">最近1小时</option>
<option value="6">最近6小时</option>
<option value="12">最近12小时</option>
<option value="24">最近24小时</option>
<option value="168">最近7天</option>
</select>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex items-center gap-4">
<FormField
name="timeFilter"
render={({ field }) => (
<div className="flex items-center">
<span className="text-sm mr-2">时间筛选:</span>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="h-9 w-36">
<SelectValue placeholder="选择时间范围" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">最近1小时</SelectItem>
<SelectItem value="4">最近4小时</SelectItem>
<SelectItem value="12">最近12小时</SelectItem>
<SelectItem value="24">最近24小时</SelectItem>
<SelectItem value="168">最近7天</SelectItem>
</SelectContent>
</Select>
</div>
)}
/>
<button
onClick={fetchData}
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
<Button type="submit" className="py-2 bg-blue-600 hover:bg-blue-700">
查询
</button>
</Button>
</form>
</Form>
</div>
<div className="flex gap-6 overflow-hidden">
@@ -98,20 +178,49 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
<TableHead className="px-4 py-2 text-left">城市</TableHead>
<TableHead className="px-4 py-2 text-left">可用IP量</TableHead>
<TableHead className="px-4 py-2 text-left">分配IP量</TableHead>
<TableHead className="px-4 py-2 text-left">超额量</TableHead>
<TableHead
className="px-4 py-2 text-left cursor-pointer hover:bg-blue-50 transition-colors"
onClick={() => handleSort('city')}
>
<div className="flex items-center gap-2">
<span>城市</span>
{renderSortIcon('city')}
</div>
</TableHead>
<TableHead
className="px-4 py-2 text-left cursor-pointer hover:bg-blue-50 transition-colors"
onClick={() => handleSort('count')}
>
<div className="flex items-center gap-2">
<span>可用IP量</span>
{renderSortIcon('count')}
</div>
</TableHead>
<TableHead
className="px-4 py-2 text-left cursor-pointer hover:bg-blue-50 transition-colors"
onClick={() => handleSort('assigned')}
>
<div className="flex items-center gap-2">
<span>分配IP量</span>
{renderSortIcon('assigned')}
</div>
</TableHead>
<TableHead
className="px-4 py-2 text-left cursor-pointer hover:bg-blue-50 transition-colors"
onClick={() => handleSort('overage')}
>
<div className="flex items-center gap-2">
<span>超额量</span>
{renderSortIcon('overage')}
</div>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((item, index) => {
{sortedData.map((item, index) => {
const overage = calculateOverage(Number(item.assigned), Number(item.count))
return (
<TableRow
key={index}
className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
>
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell className="px-4 py-2">{item.city}</TableCell>
<TableCell className="px-4 py-2">{item.count}</TableCell>
<TableCell className="px-4 py-2">{item.assigned}</TableCell>

9
src/app/dashboard/components/cityNodeStats.tsx
View File

@@ -15,6 +15,9 @@ export default function CityNodeStats() {
const fetchData = async () => {
try {
const result = await getCityNodeCount()
if (!result.success) {
throw new Error(result.error || '查询城市节点失败')
}
setData(result.data)
}
catch (error) {
@@ -27,7 +30,7 @@ export default function CityNodeStats() {
if (loading) {
return (
<div className="bg-white rounded-lg p-6 overflow-hidden">
<div className="bg-white p-6 overflow-hidden">
<h2 className="text-lg font-semibold mb-4">城市节点数量分布</h2>
<div className="text-gray-600">加载中...</div>
</div>
@@ -35,7 +38,7 @@ export default function CityNodeStats() {
}
return (
<div className="flex flex-col bg-white rounded-lg p-6 overflow-hidden">
<div className="flex flex-col bg-white p-6 overflow-hidden">
<div className="flex justify-between items-center mb-4">
<h2 className="text-lg font-semibold">城市节点数量分布</h2>
<span className="text-sm text-gray-500">
@@ -66,7 +69,7 @@ export default function CityNodeStats() {
<TableCell className="px-4 py-2">{item.hash}</TableCell>
<TableCell className="px-4 py-2">
<span className="bg-gray-100 px-2 py-1 rounded text-gray-700">
{item.label}
{item.label || '无标签'}
</span>
</TableCell>
<TableCell className="px-4 py-2">{item.offset}</TableCell>

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

@@ -3,19 +3,24 @@
import { useEffect, useState } from 'react'
import { Pagination } from '@/components/ui/pagination'
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
import { getEdgeNodes } from '@/actions/stats'
import { getEdgeNodes, type Edge } from '@/actions/stats'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils'
interface Edge {
id: number
macaddr: string
city: string
public: string
isp: string
single: number | boolean
sole: number | boolean
arch: number
online: number
}
// 定义表单验证规则
const filterSchema = z.object({
macaddr: z.string().optional(),
public: z.string().optional(),
city: z.string().optional(),
isp: z.string().optional(),
})
type FilterFormValues = z.infer<typeof filterSchema>
export default function Edge() {
const [data, setData] = useState<Edge[]>([])
@@ -23,38 +28,36 @@ export default function Edge() {
const [error, setError] = useState<string | null>(null)
// 分页状态
const [currentPage, setCurrentPage] = useState(1)
const [itemsPerPage, setItemsPerPage] = useState(100) // 默认100条
const [totalItems, setTotalItems] = useState(0)
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
// 初始化表单
const form = useForm<FilterFormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
macaddr: '',
public: '',
city: '',
isp: '',
},
})
useEffect(() => {
fetchData()
}, [currentPage, itemsPerPage]) // 监听页码和每页数量的变化
fetchData({}, page)
}, [page])
const fetchData = async () => {
const fetchData = async (val: {
macaddr?: string
public?: string
city?: string
isp?: string
}, page: number = 1) => {
try {
setError(null)
setLoading(true)
const result = await getEdgeNodes(val, page)
// 计算偏移量
const offset = (currentPage - 1) * itemsPerPage
// if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
const result = await getEdgeNodes(offset, itemsPerPage)
type ResultEdge = {
id: number
macaddr: string
city: string
public: string
isp: string
single: number | boolean
sole: number | boolean
arch: number
online: number
}
const validatedData = (result.data as ResultEdge[]).map(item => ({
const validatedData = (result.data).map(item => ({
id: item.id,
macaddr: item.macaddr || '',
city: item.city || '',
@@ -67,7 +70,7 @@ export default function Edge() {
}))
setData(validatedData)
setTotalItems(result.totalCount || 0)
setTotal(result.totalCount || 0)
}
catch (error) {
console.error('Failed to fetch edge nodes:', error)
@@ -78,6 +81,18 @@ export default function Edge() {
}
}
const onSubmit = async (values: FilterFormValues) => {
setPage(1)
const filters = {
macaddr: values.macaddr || undefined,
public: values.public || undefined,
city: values.city || undefined,
isp: values.isp || undefined,
}
fetchData(filters, 1)
}
// 多IP节点格式化
const formatMultiIP = (value: number | boolean): string => {
if (typeof value === 'number') {
@@ -149,28 +164,43 @@ export default function Edge() {
// 处理页码变化
const handlePageChange = (page: number) => {
setCurrentPage(page)
setPage(page)
const formValues = form.getValues()
const filters = {
macaddr: formValues.macaddr || '',
public: formValues.public || '',
city: formValues.city || '',
isp: formValues.isp || '',
}
fetchData(filters, page)
}
// 处理每页显示数量变化
const handleSizeChange = (size: number) => {
setItemsPerPage(size)
setCurrentPage(1) // 重置到第一页
setPage(1)
const formValues = form.getValues()
const filters = {
macaddr: formValues.macaddr || '',
public: formValues.public || '',
city: formValues.city || '',
isp: formValues.isp || '',
}
fetchData(filters, 1)
}
if (loading) return (
<div className="bg-white shadow rounded-lg p-6">
<div className="bg-white shadow p-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">节点列表</h2>
<div className="text-center py-8">加载节点数据中...</div>
</div>
)
if (error) return (
<div className="bg-white shadow rounded-lg p-6">
<div className="bg-white shadow p-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">节点列表</h2>
<div className="text-center py-8 text-red-600">{error}</div>
<button
onClick={() => fetchData()}
onClick={() => fetchData({}, 1)}
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors mx-auto block"
>
重试
@@ -179,7 +209,60 @@ export default function Edge() {
)
return (
<div className="flex bg-white flex-col shadow overflow-hidden rounded-lg p-6">
<div className="flex bg-white flex-col shadow overflow-hidden p-6">
<div className="mb-6 p-4rounded-lg bg-white">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<div className="flex gap-4">
<FormField
name="macaddr"
render={({ field }) => (
<FormItem>
<FormLabel>MAC地址</FormLabel>
<Input placeholder="输入MAC地址" {...field} />
</FormItem>
)}
/>
<FormField
name="public"
render={({ field }) => (
<FormItem>
<FormLabel>公网IP</FormLabel>
<Input placeholder="输入公网IP" {...field} />
</FormItem>
)}
/>
<FormField
name="city"
render={({ field }) => (
<FormItem>
<FormLabel>城市</FormLabel>
<Input placeholder="输入城市名称" {...field} />
</FormItem>
)}
/>
<FormField
name="isp"
render={({ field }) => (
<FormItem>
<FormLabel>运营商</FormLabel>
<Input placeholder="输入运营商" {...field} />
</FormItem>
)}
/>
<Button type="submit" className="mt-5 py-2 bg-blue-600 hover:bg-blue-700">
查询
</Button>
<Button type="button" variant="outline" className="mt-5 py-2" onClick={() => form.reset()}>
重置
</Button>
</div>
</form>
</Form>
</div>
{data.length === 0 ? (
<div className="text-center py-12">
<div className="text-gray-400 text-4xl mb-4">📋</div>
@@ -188,7 +271,7 @@ export default function Edge() {
) : (
<>
<div className="flex gap-6 overflow-hidden">
<div className="flex-3 w-full overflow-y-auto">
<div className="flex-3 w-full flex overflow-y-auto">
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
@@ -209,30 +292,29 @@ export default function Edge() {
<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>
<TableCell className="px-4 py-3 text-sm text-gray-700">
<span className={`px-2 py-1 rounded-full text-xs ${
item.isp === '移动'
? 'bg-blue-100 text-blue-800'
: item.isp === '电信'
? 'bg-purple-100 text-purple-800'
: item.isp === '联通'
? 'bg-red-100 text-red-800'
: 'bg-gray-100 text-gray-800'
}`}
>
<span className={cn(
'px-2 py-1 rounded-full text-xs',
'bg-gray-100 text-gray-800',
{
移动: 'bg-blue-100 text-blue-800',
电信: 'bg-purple-100 text-purple-800',
联通: 'bg-red-100 text-red-800',
}[item.isp],
)}>
{item.isp}
</span>
</TableCell>
<TableCell className="px-4 py-3 text-sm text-center">
<TableCell className="px-4 py-3 text-sm">
<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">
<TableCell className="px-4 py-3 text-sm">
<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">
<TableCell className="px-4 py-3 text-sm">
<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>
@@ -247,9 +329,10 @@ export default function Edge() {
{/* 分页 */}
<Pagination
page={currentPage}
size={itemsPerPage}
total={totalItems}
total={total}
page={page}
size={250}
sizeOptions={[250]}
onPageChange={handlePageChange}
onSizeChange={handleSizeChange}
className="mt-4"

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

@@ -5,37 +5,71 @@ import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@
import { Pagination } from '@/components/ui/pagination'
import { getGatewayConfig, type GatewayConfig } from '@/actions/stats'
import { toast } from 'sonner'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
function GatewayConfigContent() {
const [data, setData] = useState<GatewayConfig[]>([])
const [loading, setLoading] = useState(false)
const [macAddress, setMacAddress] = useState('')
const searchParams = useSearchParams()
// 分页状态
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
// 定义表单验证规则
const filterSchema = z.object({
macaddr: z.string().optional(),
public: z.string().optional(),
city: z.string().optional(),
inner_ip: z.string().optional(),
user: z.string().optional(),
})
type FilterFormValues = z.infer<typeof filterSchema>
// 初始化表单
const form = useForm<FilterFormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
macaddr: '',
public: '',
city: '',
inner_ip: '',
user: '',
},
})
const { watch, handleSubmit: formHandleSubmit, setValue } = form
const macaddrValue = watch('macaddr')
// 监听URL的mac参数变化
useEffect(() => {
const urlMac = searchParams.get('mac')
if (urlMac) {
setMacAddress(urlMac)
setPage(1) // 重置到第一页
fetchData(urlMac, 1)
setValue('macaddr', urlMac)
setPage(1)
fetchData({ mac: urlMac }, 1)
}
else {
setMacAddress('')
setPage(1) // 重置到第一页
fetchData('', 1)
setValue('macaddr', '')
setPage(1)
fetchData({}, 1)
}
}, [searchParams])
}, [searchParams, setValue])
const fetchData = async (mac: string, page: number = 1) => {
const fetchData = async (filters: {
mac?: string
public?: string
city?: string
user?: string
inner_ip?: string
}, page: number = 1) => {
setLoading(true)
try {
// 计算偏移量
const result = await getGatewayConfig(page, mac)
const result = await getGatewayConfig(page, filters)
if (!result.success) {
throw new Error(result.error || '查询网关配置失败')
}
@@ -60,22 +94,44 @@ function GatewayConfigContent() {
}
}
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
setPage(1) // 重置到第一页
fetchData(macAddress, 1)
const onSubmit = (data: FilterFormValues) => {
setPage(1)
const filters = {
mac: data.macaddr || '',
public: data.public || '',
city: data.city || '',
user: data.user || '',
inner_ip: data.inner_ip || '',
}
fetchData(filters, 1)
}
// 处理页码变化
const handlePageChange = (page: number) => {
setPage(page)
fetchData(macAddress, page)
const formValues = form.getValues()
const filters = {
mac: formValues.macaddr || undefined,
public: formValues.public || undefined,
city: formValues.city || undefined,
user: formValues.user || undefined,
inner_ip: formValues.inner_ip || undefined,
}
fetchData(filters, page)
}
// 处理每页显示数量变化
const handleSizeChange = (size: number) => {
setPage(1)
fetchData(macAddress, 1)
const formValues = form.getValues()
const filters = {
mac: formValues.macaddr || undefined,
public: formValues.public || undefined,
city: formValues.city || undefined,
user: formValues.user || undefined,
inner_ip: formValues.inner_ip || undefined,
}
fetchData(filters, 1)
}
const getStatusBadge = (value: number, trueText: string = '是', falseText: string = '否') => {
@@ -98,32 +154,65 @@ function GatewayConfigContent() {
}
return (
<div className="flex flex-col bg-white shadow rounded-lg p-6 overflow-hidden">
<div className="flex justify-between items-start mb-6">
<div>
<h2 className="text-xl font-semibold text-gray-800">网关配置状态</h2>
<p className="text-sm text-gray-600 mt-1">查询和管理网关设备的配置信息</p>
</div>
</div>
<div className="flex flex-col bg-white shadow p-6 overflow-hidden">
{/* 查询表单 */}
<form onSubmit={handleSubmit} className="mb-6">
<div className="flex items-center gap-2">
<input
type="text"
value={macAddress}
onChange={e => setMacAddress(e.target.value)}
placeholder="输入MAC地址查询"
className="px-4 py-2 h-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
<div className="rounded-lg bg-white">
<Form {...form}>
<form onSubmit={formHandleSubmit(onSubmit)} className="mb-6">
<div className="flex gap-4">
<FormField
name="macaddr"
render={({ field }) => (
<FormItem>
<FormLabel>MAC地址</FormLabel>
<Input placeholder="输入MAC地址查询" {...field} />
</FormItem>
)}
/>
<button
type="submit"
className="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
<FormField
name="public"
render={({ field }) => (
<FormItem>
<FormLabel>IP地址</FormLabel>
<Input placeholder="输入IP地址" {...field} />
</FormItem>
)}
/>
<FormField
name="user"
render={({ field }) => (
<FormItem>
<FormLabel>线路</FormLabel>
<Input placeholder="输入线路" {...field} />
</FormItem>
)}
/>
<FormField
name="inner_ip"
render={({ field }) => (
<FormItem>
<FormLabel>端口号</FormLabel>
<Input placeholder="输入端口" {...field} />
</FormItem>
)}
/>
<FormField
name="city"
render={({ field }) => (
<FormItem>
<FormLabel>城市</FormLabel>
<Input placeholder="输入城市" {...field} />
</FormItem>
)}
/>
<Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
查询
</button>
</Button>
</div>
</form>
</Form>
</div>
{loading ? (
<div className="text-center py-12">
@@ -149,15 +238,15 @@ function GatewayConfigContent() {
<TableBody>
{data.map((item, index) => (
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell>{item.inner_ip}</TableCell>
<TableCell>{item.user}</TableCell>
<TableCell>{item.city}</TableCell>
<TableCell>{item.edge}</TableCell>
<TableCell>{item.public}</TableCell>
<TableCell>
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
<TableCell className="px-4 py-2">{item.user}</TableCell>
<TableCell className="px-4 py-2">{item.city}</TableCell>
<TableCell className="px-4 py-2">{item.edge}</TableCell>
<TableCell className="px-4 py-2">{item.public}</TableCell>
<TableCell className="px-4 py-2">
{getStatusBadge(item.ischange, '正常', '更新')}
</TableCell>
<TableCell>
<TableCell className="px-4 py-2">
{getOnlineStatus(item.isonline)}
</TableCell>
</TableRow>
@@ -186,7 +275,9 @@ function GatewayConfigContent() {
</div>
{/* 分页组件 */}
{!macAddress && (
<div className="flex gap-6">
<div className="flex flex-3 justify-end">
{!macaddrValue && (
<Pagination
total={total}
page={page}
@@ -197,6 +288,9 @@ function GatewayConfigContent() {
className="mt-4"
/>
)}
</div>
<div className="flex flex-1"></div>
</div>
</>
) : (
<div className="text-center py-12">
@@ -211,7 +305,7 @@ function GatewayConfigContent() {
export default function GatewayConfig() {
return (
<Suspense fallback={(
<div className="bg-white shadow rounded-lg p-6">
<div className="bg-white shadow p-6">
<div className="text-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
<p className="mt-4 text-gray-600">加载搜索参数...</p>

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

@@ -9,6 +9,7 @@ import { z } from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { getGatewayInfo, type GatewayInfo } from '@/actions/stats'
import { Copy, Check } from 'lucide-react'
const filterSchema = z.object({
status: z.string(),
@@ -16,6 +17,66 @@ const filterSchema = z.object({
type FilterSchema = z.infer<typeof filterSchema>
const SmartCopyButton = ({
data,
mode = 'single',
}: {
data: string | GatewayInfo[]
mode?: 'single' | 'batch'
}) => {
const [isCopied, setIsCopied] = useState(false)
const handleCopy = async () => {
try {
let textToCopy: string
if (mode === 'single' && typeof data === 'string') {
textToCopy = data
}
else if (mode === 'batch' && Array.isArray(data)) {
if (data.length === 0) return
textToCopy = data.map(item => item.macaddr).join('\n')
}
else {
return
}
await navigator.clipboard.writeText(textToCopy)
setIsCopied(true)
setTimeout(() => setIsCopied(false), 2000)
}
catch (err) {
console.error('复制失败:', err)
}
}
const isBatch = mode === 'batch'
const disabled = isBatch && Array.isArray(data) && data.length === 0
return (
<button
onClick={handleCopy}
className={`
flex items-center gap-1 transition-colors
${isBatch
? 'px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded hover:bg-blue-100'
: 'ml-2 p-1 rounded hover:bg-gray-100'
}
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
`}
title={isBatch ? '复制所有MAC地址' : '复制MAC地址'}
disabled={disabled}
>
{isCopied ? (
<Check className="w-3 h-3 text-green-600" />
) : (
<Copy className="w-3 h-3 text-gray-500" />
)}
{isBatch && <span>{isCopied ? '已复制' : '复制全部'}</span>}
</button>
)
}
export default function Gatewayinfo() {
const [data, setData] = useState<GatewayInfo[]>([])
const [filteredData, setFilteredData] = useState<GatewayInfo[]>([])
@@ -85,7 +146,7 @@ export default function Gatewayinfo() {
if (loading) {
return (
<div className="bg-white shadow rounded-lg p-6 overflow-hidden">
<div className="bg-white shadow p-6 overflow-hidden">
<h2 className="text-lg font-semibold mb-4">网关基本信息</h2>
<div className="text-center py-8">加载网关信息中...</div>
</div>
@@ -94,7 +155,7 @@ export default function Gatewayinfo() {
if (error) {
return (
<div className="bg-white shadow rounded-lg p-6">
<div className="bg-white shadow p-6">
<h2 className="text-lg font-semibold mb-4">网关基本信息</h2>
<div className="text-center py-8 text-red-600">{error}</div>
</div>
@@ -102,7 +163,7 @@ export default function Gatewayinfo() {
}
return (
<div className="flex flex-col bg-white shadow rounded-lg p-6 overflow-hidden">
<div className="flex flex-col bg-white p-6 overflow-hidden">
<div className="flex gap-6">
<div className="flex flex-3 justify-between ">
<span className="text-lg pt-2 font-semibold mb-4">网关基本信息</span>
@@ -142,7 +203,12 @@ export default function Gatewayinfo() {
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
<TableHead className="px-4 py-2 text-left">MAC地址</TableHead>
<TableHead className="px-4 py-2 text-left">
<div className="flex items-center">
<span>MAC地址</span>
<SmartCopyButton data={filteredData} mode="batch" />
</div>
</TableHead>
<TableHead className="px-4 py-2 text-left">内网IP</TableHead>
<TableHead className="px-4 py-2 text-left">配置版本</TableHead>
<TableHead className="px-4 py-2 text-left">状态</TableHead>
@@ -155,6 +221,7 @@ export default function Gatewayinfo() {
className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
>
<TableCell className="px-4 py-2">
<div className="flex items-center gap-2">
<button
onClick={() => {
router.push(`/dashboard?tab=gateway&mac=${item.macaddr}`)
@@ -163,6 +230,8 @@ export default function Gatewayinfo() {
>
{item.macaddr}
</button>
<SmartCopyButton data={item.macaddr} />
</div>
</TableCell>
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
<TableCell className="px-4 py-2">{item.setid}</TableCell>

4
src/app/dashboard/page.tsx
View File

@@ -88,7 +88,7 @@ function DashboardContent() {
</div>
</nav>
<div className="flex flex-3 overflow-hidden px-4 sm:px-6 lg:px-8 py-8">
<div className="flex flex-3 overflow-hidden">
<div className="border-b border-gray-200 mb-6">
<nav className="flex flex-col w-64 -mb-px space-x-8">
{tabs.map(tab => (
@@ -107,7 +107,7 @@ function DashboardContent() {
</nav>
</div>
<div className="grid grid-cols-1 gap-6 flex-auto">
<div className="grid grid-cols-1 gap-6 border flex-auto">
{activeTab === 'gatewayInfo' && <Gatewayinfo />}
{activeTab === 'gateway' && <GatewayConfig />}
{activeTab === 'city' && <CityNodeStats />}

2
src/components/ui/errorCard.tsx
View File

@@ -8,7 +8,7 @@ export default function ErrorCard({
onRetry: () => void
}) {
return (
<div className="bg-white shadow rounded-lg p-6 text-red-600">
<div className="bg-white shadow p-6 text-red-600">
<h2 className="text-lg font-semibold mb-2">{title}</h2>
<p>加载失败: {error}</p>
<button

2
src/components/ui/loadingCard.tsx
View File

@@ -1,6 +1,6 @@
export default function LoadingCard({ title }: { title: string }) {
return (
<div className="bg-white shadow rounded-lg p-6">
<div className="bg-white shadow p-6">
<div className="animate-pulse">
<div className="h-6 bg-gray-200 rounded w-1/4 mb-4"></div>
<div className="grid grid-cols-3 gap-4">