From e95f9d33f3daac5b9e935cf4be1fc147ff7cf044 Mon Sep 17 00:00:00 2001 From: wmp <17516219072@163.com> Date: Mon, 13 Oct 2025 14:58:23 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BD=91=E5=85=B3=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E7=9A=84=E4=BA=8C=E7=BB=B4=E8=A1=A8=E6=A0=BC=E5=B1=95?= =?UTF-8?q?=E7=A4=BA&=E4=BF=AE=E6=94=B9=E8=8A=82=E7=82=B9=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E7=9A=84=E5=88=86=E9=A1=B5=EF=BC=8C=E5=8F=96=E6=B6=88?= =?UTF-8?q?=E7=BD=91=E5=85=B3=E4=BF=A1=E6=81=AF=E7=9A=84mac=E5=9C=B0?= =?UTF-8?q?=E5=9D=80=E8=B7=B3=E8=BD=AC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/dashboard/components/edge.tsx | 26 +- .../dashboard/components/gatewayConfig.tsx | 348 +++++------- .../dashboard/components/gatewayConfigs.tsx | 536 ++++++++++++++++++ src/app/dashboard/components/gatewayinfo.tsx | 10 +- src/app/dashboard/page.tsx | 3 + 5 files changed, 705 insertions(+), 218 deletions(-) create mode 100644 src/app/dashboard/components/gatewayConfigs.tsx diff --git a/src/app/dashboard/components/edge.tsx b/src/app/dashboard/components/edge.tsx index abffc04..c128390 100644 --- a/src/app/dashboard/components/edge.tsx +++ b/src/app/dashboard/components/edge.tsx @@ -28,8 +28,9 @@ export default function Edge() { const [error, setError] = useState(null) // 分页状态 - const [page, setPage] = useState(1) - const [total, setTotal] = useState(0) + const [currentPage, setCurrentPage] = useState(1) + const [itemsPerPage, setItemsPerPage] = useState(100) // 默认100条 + const [totalItems, setTotalItems] = useState(0) // 初始化表单 const form = useForm({ @@ -43,8 +44,8 @@ export default function Edge() { }) useEffect(() => { - fetchData({}, page) - }, [page]) + fetchData({}, currentPage) + }, [currentPage, itemsPerPage]) const fetchData = async (val: { macaddr?: string @@ -56,7 +57,6 @@ export default function Edge() { setError(null) setLoading(true) const result = await getEdgeNodes(val, page) - const validatedData = (result.data).map(item => ({ id: item.id, macaddr: item.macaddr || '', @@ -70,7 +70,7 @@ export default function Edge() { })) setData(validatedData) - setTotal(result.totalCount || 0) + setTotalItems(result.totalCount || 0) } catch (error) { console.error('Failed to fetch edge nodes:', error) @@ -82,7 +82,7 @@ export default function Edge() { } const onSubmit = async (values: FilterFormValues) => { - setPage(1) + setCurrentPage(1) const filters = { macaddr: values.macaddr || undefined, public: values.public || undefined, @@ -164,7 +164,7 @@ export default function Edge() { // 处理页码变化 const handlePageChange = (page: number) => { - setPage(page) + setCurrentPage(page) const formValues = form.getValues() const filters = { macaddr: formValues.macaddr || '', @@ -177,7 +177,8 @@ export default function Edge() { // 处理每页显示数量变化 const handleSizeChange = (size: number) => { - setPage(1) + setItemsPerPage(size) + setCurrentPage(1) const formValues = form.getValues() const filters = { macaddr: formValues.macaddr || '', @@ -329,10 +330,9 @@ export default function Edge() { {/* 分页 */} ([]) const [loading, setLoading] = useState(false) - const searchParams = useSearchParams() const [infoData, setInfoData] = useState([]) - const [totalCount, setTotalCount] = useState(0) + // 分页状态 + const [page, setPage] = useState(1) + const [total, setTotal] = useState(0) // 定义表单验证规则 const filterSchema = z.object({ macaddr: z.string().optional(), @@ -31,6 +31,7 @@ function GatewayConfigContent() { }) type FilterFormValues = z.infer + // 初始化表单 const form = useForm({ resolver: zodResolver(filterSchema), @@ -42,82 +43,33 @@ function GatewayConfigContent() { user: '', }, }) - const { watch, handleSubmit: formHandleSubmit, setValue } = form - const macaddrValue = watch('macaddr') - - // 将线性数据转换为二维矩阵数据 - const transformToMatrix = (data: GatewayConfig[]) => { - // 按城市分组 - const cityGroups: { [city: string]: GatewayConfig[] } = {} - - data.forEach((item) => { - if (!item.city) return - if (!cityGroups[item.city]) { - cityGroups[item.city] = [] - } - cityGroups[item.city].push(item) - }) - - // 获取所有唯一的MAC地址（作为列） - const allMacAddresses = Array.from(new Set(data.map(item => item.edge).filter(Boolean))).sort() as string[] - - // 使用安全的类型定义 - interface MatrixRow { - city: string - devices: { [mac: string]: GatewayConfig | null } - } - - // 构建矩阵数据 - const matrixData: MatrixRow[] = Object.entries(cityGroups).map(([city, items]) => { - const devices: { [mac: string]: GatewayConfig | null } = {} - - // 初始化所有MAC地址为null - allMacAddresses.forEach((mac) => { - devices[mac] = null - }) - - // 填充有数据的MAC地址 - items.forEach((item) => { - if (item.edge) { - devices[item.edge] = item - } - }) - - return { - city, - devices, - } - }) - - return { - matrixData, - macAddresses: allMacAddresses, - } - } // 初始化调用 useEffect(() => { - fetchData({}, 1) - gatewayData() - }, []) + const initData = async () => { + setLoading(true) + try { + // 获取网关基本信息 + const infoResult = await getGatewayInfo() + if (!infoResult.success) { + throw new Error(infoResult.error || '查询网关信息失败') + } - // 获取网关基本信息 - const gatewayData = async () => { - try { - const result = await getGatewayInfo() - if (!result.success) { - throw new Error(result.error || '查询网关信息失败') + setInfoData(infoResult.data) + } + catch (error) { + toast.error((error as Error).message || '获取数据失败') + } + finally { + setLoading(false) } - setInfoData(result.data) } - catch (error) { - console.error('Failed to fetch gateway info:', error) - } - finally { - setLoading(false) - } - } - // 网关配置数据 + + initData() + fetchData({}, 1) + }, []) + const { handleSubmit: formHandleSubmit } = form + // 网关配置数据查询函数（用于表单查询） const fetchData = async (filters: { mac?: string public?: string @@ -132,7 +84,6 @@ function GatewayConfigContent() { if (!result.success) { throw new Error(result.error || '查询网关配置失败') } - const shrink = ['黔东南', '延边'] result.data.items.forEach((item) => { shrink.forEach((s) => { @@ -141,9 +92,8 @@ function GatewayConfigContent() { } }) }) - setData(result.data.items) - setTotalCount(result.data.total) + setTotal(result.data.total) } catch (error) { toast.error((error as Error).message || '获取网关配置失败') @@ -154,6 +104,7 @@ function GatewayConfigContent() { } const onSubmit = (data: FilterFormValues) => { + setPage(1) const filters = { mac: data.macaddr || '', public: data.public || '', @@ -164,19 +115,68 @@ function GatewayConfigContent() { fetchData(filters, 1) } - // 获取转换后的矩阵数据 - const { matrixData, macAddresses } = transformToMatrix(data) + // 处理页码变化 + const handlePageChange = (page: number) => { + setPage(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) + 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 = '否') => { + // 0是正常1是更新，正常（绿）+ 更新（红） + return ( + + {value === 0 ? trueText : falseText} + + ) + } + + const getOnlineStatus = (isonline: number) => { + // 0是空闲1是在用，在用（红）+ 空闲（绿） + return ( +
+
+ {getStatusBadge(isonline, '空闲', '在用')} +
+ ) + } + // 当前选中的mac + const [selectedMac, setSelectedMac] = useState('') + const handleMacClick = useCallback(async (macaddr: string) => { + setSelectedMac(macaddr) + await fetchData({ mac: macaddr }, 1) + }, []) return (
- {/* 查询表单 */}
- -
+ +
( @@ -201,7 +201,7 @@ function GatewayConfigContent() {
-
+
在线 {infoData.filter(item => item.enable === 1).length} @@ -215,8 +215,8 @@ function GatewayConfigContent() {
- -
+ +
( @@ -267,18 +267,24 @@ function GatewayConfigContent() {
⏳

正在查询网关配置信息...

- ) : data.length > 0 ? ( + ) : infoData.length > 0 ? ( <> {/* 网关基本信息 */} -
+
{infoData.map((item, index) => (
+ className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
-
{item.macaddr}
+
handleMacClick(item.macaddr)} + > + {item.macaddr} +
配置版本: {item.setid || 'N/A'}
- {/*
- 在用节点: {data.filter(d => d.isonline === 1).length} -
*/}
))}
- {/* 二维矩阵表格 */}
-
-
-
-
- 蓝色：在用 -
-
-
- 绿色：空闲 -
-
-
- 黄色：更新 -
-
-
-
- 共 {totalCount} 条记录 -
-
-
- -
- - - - - 城市 - - {macAddresses.map((mac, index) => ( - - {mac} - - ))} - - - - {matrixData.map((row, rowIndex) => ( - - - {row.city} - - {macAddresses.map((mac, colIndex) => { - const item = row.devices[mac] - if (!item) { - return ( - -
-
- - ) - } - - // 状态颜色配置 - const statusConfig = { - ischange: item.ischange === 0 - ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' } - : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' }, - isonline: item.isonline === 0 - ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' } - : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' }, - } - - return ( - -
-
- IP地址: - {item.public || 'N/A'} -
-
- 线路: - {item.user || 'N/A'} -
-
- 端口: - {item.inner_ip || 'N/A'} -
-
- - {statusConfig.ischange.label} - - - {statusConfig.isonline.label} - -
-
- - ) - })} - - ))} - -
-
+ { data.length > 0 + ? ( + <> +
+ + + + 端口 + 线路 + 城市 + 节点MAC + 节点IP + 配置更新 + 在用状态 + + + + {data.map((item, index) => ( + + {item.inner_ip} + {item.user} + {item.city} + {item.edge} + {item.public} + + {getStatusBadge(item.ischange, '正常', '更新')} + + + {getOnlineStatus(item.isonline)} + + + ))} + +
+
+ {/* 分页组件 */} +
+ +
+ + ) : ( +
+
📋
+

暂无网关配置数据

+
+ )}
diff --git a/src/app/dashboard/components/gatewayConfigs.tsx b/src/app/dashboard/components/gatewayConfigs.tsx new file mode 100644 index 0000000..661245f --- /dev/null +++ b/src/app/dashboard/components/gatewayConfigs.tsx @@ -0,0 +1,536 @@ +'use client' +import { useEffect, useState, Suspense } from 'react' +import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table' +import { getGatewayInfo, getGatewayConfig, type GatewayConfig, type GatewayInfo } 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([]) + const [loading, setLoading] = useState(false) + const [infoData, setInfoData] = useState([]) + const [totalCount, setTotalCount] = useState(0) + const [matrixData, setMatrixData] = useState<{ city: string, devices: { [macaddr: string]: GatewayConfig[] } }[]>([]) + const [cities, setCities] = useState([]) + const [macAddresses, setMacAddresses] = useState([]) + const [currentTotal, setCurrentTotal] = useState(0) + // 缓存处理先保存初始MAC地址列表 + const [initialMacAddresses, setInitialMacAddresses] = useState([]) + // 保存每个MAC地址对应的完整配置数据 { mac1: [config1, config2], mac2: [config3] } + const [initialConfigData, setInitialConfigData] = useState<{ [mac: string]: GatewayConfig[] }>({}) + // 初始数据是否已加载完成 + const [isInitialDataLoaded, setIsInitialDataLoaded] = useState(false) + // 定义表单验证规则 + 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 + + // 初始化表单 + const form = useForm({ + resolver: zodResolver(filterSchema), + defaultValues: { + macaddr: '', + public: '', + city: '', + inner_ip: '', + user: '', + }, + }) + const { handleSubmit: formHandleSubmit } = form + + // 处理城市名称缩写 + const processCityNames = (items: GatewayConfig[]) => { + const shrink = ['黔东南', '延边'] + return items.map((item) => { + const processedItem = { ...item } + shrink.forEach((s) => { + if (processedItem.city?.startsWith(s)) { + processedItem.city = s + } + }) + return processedItem + }) + } + const getLastOctet = (ip: string | undefined): number => { + if (!ip) return 0 + const parts = ip.split('.') + if (parts.length !== 4) return 0 + const last = parseInt(parts[3], 10) + return isNaN(last) ? 0 : last + } + + // 端口排序函数 + const sortByInnerIp = (a: GatewayConfig, b: GatewayConfig): number => { + const lastOctetA = getLastOctet(a.inner_ip) + const lastOctetB = getLastOctet(b.inner_ip) + return lastOctetA - lastOctetB + } + + // 为每个MAC地址获取配置数据的函数 + const fetchConfigForMac = async (mac: string, filters: { + mac?: string | undefined + public?: string | undefined + city?: string | undefined + user?: string | undefined + inner_ip?: string | undefined + }) => { + try { + const queryParams = { ...filters, mac } + const result = await getGatewayConfig(1, queryParams) + if (result.success) { + const processedData = processCityNames(result.data.items) + const sortedData = [...processedData].sort(sortByInnerIp) + return sortedData + } + return [] + } + catch (error) { + console.error(`获取MAC地址 ${mac} 的配置失败:`, error) + return [] + } + } + const filterLocalData = (filters: { + mac?: string + public?: string + city?: string + user?: string + inner_ip?: string + }) => { + const { mac, public: publicIp, city, user, inner_ip } = filters + // 筛选MAC地址 + let filteredMacs = initialMacAddresses + if (mac) { + filteredMacs = filteredMacs.filter(macAddr => + macAddr.toLowerCase().includes(mac.toLowerCase()), + ) + } + // 筛选每个MAC地址对应的配置数据 + const filteredConfigs: { [mac: string]: GatewayConfig[] } = {} + filteredMacs.forEach((macAddr) => { + const configs = initialConfigData[macAddr] || [] + + const filtered = configs.filter((config) => { + // 按各个字段筛选 + const matchPublic = !publicIp || (config.public && config.public.includes(publicIp)) + const matchCity = !city || (config.city && config.city.includes(city)) + const matchUser = !user || (config.user && config.user.includes(user)) + const matchInnerIp = !inner_ip || (config.inner_ip && config.inner_ip.includes(inner_ip)) + return matchPublic && matchCity && matchUser && matchInnerIp + }) + + if (filtered.length > 0) { + filteredConfigs[macAddr] = filtered + } + }) + return { filteredMacs: Object.keys(filteredConfigs), filteredConfigs } + } + + // 矩阵数据构建函数 + const buildMatrixData = async ( + macList: string[], + configData: { [mac: string]: GatewayConfig[] } = {}, + useLocalData: boolean = false, + ) => { + setLoading(true) + try { + let macConfigMap: { [mac: string]: GatewayConfig[] } = {} + + if (useLocalData) { + // 使用本地数据 + macConfigMap = configData + } + else { + // 调用接口获取数据 + const configPromises = macList.map(mac => fetchConfigForMac(mac, {})) + const configResults = await Promise.all(configPromises) + + // 创建MAC地址到配置数据的映射 + macList.forEach((mac, index) => { + macConfigMap[mac] = configResults[index] || [] + }) + } + + const cityMinPortMap: { [city: string]: number } = {} + Object.values(macConfigMap).forEach((configs) => { + configs.forEach((config) => { + const city = config.city + if (!city) return // 跳过无城市的配置 + const currentPortLastOctet = getLastOctet(config.inner_ip) + if (!cityMinPortMap[city] || currentPortLastOctet < cityMinPortMap[city]) { + cityMinPortMap[city] = currentPortLastOctet + } + }) + }) + + // 获取所有唯一的城市 + const allCities = Array.from( + new Set( + Object.values(macConfigMap) + .flat() + .map(item => item.city) + .filter(Boolean), + ), + ).sort((cityA, cityB) => { + const portA = cityMinPortMap[cityA!] || 0 + const portB = cityMinPortMap[cityB!] || 0 + return portA - portB + }) as string[] + + // 构建矩阵数据 + const matrix = allCities.map((city) => { + const row = { + city, + devices: {} as { [macaddr: string]: GatewayConfig[] }, + } + + // 为每个MAC地址填充该城市的配置数据 + macList.forEach((mac) => { + const configsForCity = macConfigMap[mac] + .filter(item => item.city === city) + .sort(sortByInnerIp) + row.devices[mac] = configsForCity + }) + return row + }) + + setMatrixData(matrix) + setCities(allCities) + setMacAddresses(macList) + setCurrentTotal(matrix.length) + + // 计算总记录数 + const total = Object.values(macConfigMap).reduce((sum, configs) => sum + configs.length, 0) + setTotalCount(total) + } + catch (error) { + toast.error('构建矩阵数据失败') + console.error('构建矩阵数据错误:', error) + } + finally { + setLoading(false) + } + } + // 初始化调用 + useEffect(() => { + const initData = async () => { + setLoading(true) + try { + // 获取网关基本信息 + const infoResult = await getGatewayInfo() + if (!infoResult.success) { + throw new Error(infoResult.error || '查询网关信息失败') + } + setInfoData(infoResult.data) + // 获取所有MAC地址 + const allMacAddresses = Array.from( + new Set(infoResult.data.map(item => item.macaddr).filter(Boolean)), + ).sort() as string[] + setInitialMacAddresses(allMacAddresses) + setMacAddresses(allMacAddresses) + const configPromises = allMacAddresses.map(mac => fetchConfigForMac(mac, {})) + const configResults = await Promise.all(configPromises) + + const initialConfig: { [mac: string]: GatewayConfig[] } = {} + allMacAddresses.forEach((mac, index) => { + initialConfig[mac] = configResults[index] || [] + }) + + setInitialConfigData(initialConfig) + setIsInitialDataLoaded(true) + // 每个MAC地址调用接口 + await buildMatrixData(allMacAddresses, initialConfig, true) + } + catch (error) { + toast.error((error as Error).message || '获取数据失败') + } + finally { + setLoading(false) + } + } + + initData() + }, []) + + // 网关配置数据查询函数（用于表单查询） + const fetchData = async (filters: { + mac?: string + public?: string + city?: string + user?: string + inner_ip?: string + }, page: number = 1) => { + setLoading(true) + try { + // 如果有初始数据，就本地筛选 + if (isInitialDataLoaded) { + const { filteredMacs, filteredConfigs } = filterLocalData(filters) + + // 更新表格数据（扁平化所有配置数据） + const allFilteredData = Object.values(filteredConfigs).flat() + setData(allFilteredData) + setTotalCount(allFilteredData.length) + + // 构建矩阵数据 + await buildMatrixData(filteredMacs, filteredConfigs, true) + } + else { + // 如果没有初始数据，就接口查询 + const result = await getGatewayConfig(page, filters) + + if (!result.success) { + throw new Error(result.error || '查询网关配置失败') + } + const processedData = processCityNames(result.data.items) + const sortedData = [...processedData].sort(sortByInnerIp) + + setData(sortedData) + setTotalCount(result.data.total) + + const filteredMacs = Array.from( + new Set(sortedData.map(item => item.edge).filter(Boolean)), + ).sort() as string[] + + await buildMatrixData(filteredMacs, {}, false) + } + } + catch (error) { + toast.error((error as Error).message || '获取网关配置失败') + } + finally { + setLoading(false) + } + } + + const onSubmit = async (formData: FilterFormValues) => { + const filters = { + mac: formData.macaddr || '', + public: formData.public || '', + city: formData.city || '', + user: formData.user || '', + inner_ip: formData.inner_ip || '', + } + await fetchData(filters, 1) + } + return ( +
+ {/* 查询表单 */} +
+
+ + +
+ ( + + MAC地址 + + + )} + /> + ( + + IP地址 + + + )} + /> + ( + + 线路 + + + )} + /> + ( + + 端口号 + + + )} + /> + ( + + 城市 + + + )} + /> + +
+ + +
+
+ + {loading ? ( +
+
⏳
+

正在查询网关配置信息...

+
+ ) : matrixData.length > 0 ? ( + <> +
+ {/* 二维矩阵表格 */} +
+
+
+
+
+ 蓝色：在用 +
+
+
+ 绿色：空闲 +
+
+
+ 黄色：更新 +
+
+
+
+ 在线 {infoData.filter(item => item.enable === 1).length} +
+
+
+ 离线 {infoData.filter(item => item.enable === 0).length} +
+
+
+ 当前{currentTotal} 条 | + 共 {totalCount} 条记录 +
+
+
+ +
+ + + + + 城市 + + {macAddresses.map((macaddr, index) => ( + + {macaddr} + + ))} + + + + {matrixData.map((row, rowIndex) => ( + + + {row.city} + + {macAddresses.map((macaddr, colIndex) => { + const configs = row.devices[macaddr] || [] + + if (configs.length === 0) { + return ( + +
-
+ + ) + } + + return ( + +
+ {configs.map((item, itemIndex) => { + const statusConfig = { + ischange: item.ischange === 0 + ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' } + : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' }, + isonline: item.isonline === 0 + ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' } + : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' }, + } + + return ( +
+
+ {item.public || 'N/A'} +
+
+ {item.user || 'N/A'} + {item.inner_ip || 'N/A'} +
+
+ + {statusConfig.ischange.label} + + + {statusConfig.isonline.label} + +
+
+ ) + })} +
+ + ) + })} + + ))} + +
+
+
+
+ + ) : ( +
+
📋
+

暂无网关配置数据

+
+ )} +
+ ) +} + +export default function GatewayConfigs() { + return ( + +
+
+

加载搜索参数...

+
+
+ )}> + + + ) +} diff --git a/src/app/dashboard/components/gatewayinfo.tsx b/src/app/dashboard/components/gatewayinfo.tsx index f1bfac7..e45443a 100644 --- a/src/app/dashboard/components/gatewayinfo.tsx +++ b/src/app/dashboard/components/gatewayinfo.tsx @@ -1,7 +1,6 @@ 'use client' import { useEffect, useState } from 'react' -import { useRouter } from 'next/navigation' import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table' import { Form, FormField } from '@/components/ui/form' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' @@ -82,7 +81,6 @@ export default function Gatewayinfo() { const [filteredData, setFilteredData] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState('') - const router = useRouter() const form = useForm({ resolver: zodResolver(filterSchema), @@ -222,14 +220,14 @@ export default function Gatewayinfo() { >
- + > */} + {item.macaddr} + {/* */}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 39761b5..2f4df8d 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -4,6 +4,7 @@ import { useState, useEffect, Suspense } from 'react' import { useRouter, useSearchParams } from 'next/navigation' import Gatewayinfo from './components/gatewayinfo' import GatewayConfig from './components/gatewayConfig' +import GatewayConfigs from './components/gatewayConfigs' import CityNodeStats from './components/cityNodeStats' import AllocationStatus from './components/allocationStatus' import Settings from './components/settings' @@ -14,6 +15,7 @@ import { logout } from '@/actions/auth' const tabs = [ { id: 'gatewayInfo', label: '网关信息' }, { id: 'gateway', label: '网关配置' }, + { id: 'gateways', label: '网关查询' }, { id: 'city', label: '城市信息' }, { id: 'allocation', label: '分配状态' }, { id: 'edge', label: '节点信息' }, @@ -109,6 +111,7 @@ function DashboardContent() {
{activeTab === 'gatewayInfo' && } {activeTab === 'gateway' && } + {activeTab === 'gateways' && } {activeTab === 'city' && } {activeTab === 'allocation' && } {activeTab === 'edge' && }