更新网关配置的二维表格展示&修改节点信息的分页，取消网关信息的mac地址跳转功能

src/app/dashboard/components/edge.tsx

@@ -28,8 +28,9 @@ export default function Edge() {
   const [error, setError] = useState<string | null>(null)
 
   // 分页状态
-  const [page, setPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(1)
-  const [total, setTotal] = useState(0)
+  const [itemsPerPage, setItemsPerPage] = useState(100) // 默认100条
+  const [totalItems, setTotalItems] = useState(0)
 
   // 初始化表单
   const form = useForm<FilterFormValues>({
@@ -43,8 +44,8 @@ export default function Edge() {
   })
 
   useEffect(() => {
-    fetchData({}, page)
+    fetchData({}, currentPage)
-  }, [page])
+  }, [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() {
 
           {/* 分页 */}
           <Pagination
-            total={total}
+            page={currentPage}
-            page={page}
+            size={itemsPerPage}
-            size={250}
+            total={totalItems}
-            sizeOptions={[250]}
             onPageChange={handlePageChange}
             onSizeChange={handleSizeChange}
             className="mt-4"

src/app/dashboard/components/gatewayConfig.tsx

@@ -1,9 +1,8 @@
 'use client'
 import { useEffect, useState, Suspense, useCallback } from 'react'
-import { useSearchParams } from 'next/navigation'
 import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
-import { Pagination } from '@/components/ui/pagination'
 import { getGatewayInfo, getGatewayConfig, type GatewayConfig, type GatewayInfo } from '@/actions/stats'
+import { Pagination } from '@/components/ui/pagination'
 import { toast } from 'sonner'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
@@ -17,10 +16,11 @@ import { Search } from 'lucide-react'
 function GatewayConfigContent() {
   const [data, setData] = useState<GatewayConfig[]>([])
   const [loading, setLoading] = useState(false)
-  const searchParams = useSearchParams()
   const [infoData, setInfoData] = useState<GatewayInfo[]>([])
-  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<typeof filterSchema>
+
   // 初始化表单
   const form = useForm<FilterFormValues>({
     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)
+    const initData = async () => {
-    gatewayData()
+      setLoading(true)
-  }, [])
+      try {
+        // 获取网关基本信息
+        const infoResult = await getGatewayInfo()
+        if (!infoResult.success) {
+          throw new Error(infoResult.error || '查询网关信息失败')
+        }
 
-  // 获取网关基本信息
+        setInfoData(infoResult.data)
-  const gatewayData = async () => {
+      }
-    try {
+      catch (error) {
-      const result = await getGatewayInfo()
+        toast.error((error as Error).message || '获取数据失败')
-      if (!result.success) {
+      }
-        throw new Error(result.error || '查询网关信息失败')
+      finally {
+        setLoading(false)
       }
-      setInfoData(result.data)
     }
-    catch (error) {
+
-      console.error('Failed to fetch gateway info:', error)
+    initData()
-    }
+    fetchData({}, 1)
-    finally {
+  }, [])
-      setLoading(false)
+  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 (
+      <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 ? trueText : falseText}
+      </span>
+    )
+  }
+
+  const getOnlineStatus = (isonline: number) => {
+    // 0是空闲1是在用，在用（红）+ 空闲（绿）
+    return (
+      <div className="flex items-center">
+        <div className={`${isonline === 0 ? 'bg-green-500' : 'bg-red-500'}`} />
+        {getStatusBadge(isonline, '空闲', '在用')}
+      </div>
+    )
+  }
+  // 当前选中的mac
+  const [selectedMac, setSelectedMac] = useState<string>('')
+  const handleMacClick = useCallback(async (macaddr: string) => {
+    setSelectedMac(macaddr)
+    await fetchData({ mac: macaddr }, 1)
+  }, [])
 
   return (
     <div className="flex flex-col bg-white shadow p-6 overflow-hidden">
-
       {/* 查询表单 */}
       <div className="flex gap-6">
         <div className="flex flex-1">
           <div className="flex flex-col w-full">
             <Form {...form}>
-              <form onSubmit={formHandleSubmit(onSubmit)} className="mb-6">
+              <form onSubmit={formHandleSubmit(onSubmit)}>
-                <div className="flex gap-4">
+                <div className="flex gap-4 mb-2">
                   <FormField
                     name="macaddr"
                     render={({ field }) => (
@@ -201,7 +201,7 @@ function GatewayConfigContent() {
                 </div>
               </form>
             </Form>
-            <div className="flex gap-4 mb-4">
+            <div className="flex gap-4">
               <div className="flex items-center">
                 <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                 <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
@@ -215,8 +215,8 @@ function GatewayConfigContent() {
         </div>
         <div className="flex flex-3 rounded-lg bg-white">
           <Form {...form}>
-            <form onSubmit={formHandleSubmit(onSubmit)} className="mb-6">
+            <form onSubmit={formHandleSubmit(onSubmit)}>
-              <div className="flex  gap-4">
+              <div className="flex gap-4">
                 <FormField
                   name="public"
                   render={({ field }) => (
@@ -267,18 +267,24 @@ function GatewayConfigContent() {
           <div className="text-gray-400 text-4xl mb-4">⏳</div>
           <p className="text-gray-600">正在查询网关配置信息...</p>
         </div>
-      ) : data.length > 0 ? (
+      ) : infoData.length > 0 ? (
         <>
           {/* 网关基本信息 */}
-          <div className="flex gap-6 overflow-hidden">
+          <div className="flex gap-6 p-2 overflow-hidden">
             <div className="flex flex-1 flex-col overflow-auto mb-6 border-t bg-white">
               {infoData.map((item, index) => (
                 <div
                   key={index}
-                  className={cn('p-4 flex-col', index !== infoData.length - 1 ? 'border-b' : '')}>
+                  className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
                   <div className="flex flex-col">
                     <div className="flex items-center justify-between mb-2">
-                      <div className="font-medium text-gray-900">{item.macaddr}</div>
+                      <div
+                        className={cn('font-medium cursor-pointer',
+                          selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
+                        onClick={() => handleMacClick(item.macaddr)}
+                      >
+                        {item.macaddr}
+                      </div>
                       <div className="flex items-center">
                         <div
                           className={cn(
@@ -300,122 +306,66 @@ function GatewayConfigContent() {
                   </div>
                   <div className="flex gap-2 space-y-1 text-xs text-gray-500">
                     <div>配置版本: {item.setid || 'N/A'}</div>
-                    {/* <div>
-                      在用节点: {data.filter(d => d.isonline === 1).length}
-                    </div> */}
                   </div>
                 </div>
               ))}
             </div>
 
-            {/* 二维矩阵表格  */}
             <div className="flex-3 flex flex-col overflow-hidden">
-              <div className="flex gap-6 p-4 items-center justify-between text-sm border-t bg-white">
+              { data.length > 0
-                <div className="flex gap-2">
+                ? (
-                  <div className="flex items-center gap-2">
+                    <>
-                    <div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
+                      <div className="flex overflow-auto">
-                    <span className="text-xs font-medium">蓝色：在用</span>
+                        <Table>
-                  </div>
+                          <TableHeader>
-                  <div className="flex items-center gap-2">
+                            <TableRow className="bg-gray-50">
-                    <div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">端口</TableHead>
-                    <span className="text-xs font-medium">绿色：空闲</span>
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">线路</TableHead>
-                  </div>
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">城市</TableHead>
-                  <div className="flex items-center gap-2">
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点MAC</TableHead>
-                    <div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点IP</TableHead>
-                    <span className="text-xs font-medium">黄色：更新</span>
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">配置更新</TableHead>
-                  </div>
+                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">在用状态</TableHead>
-                </div>
+                            </TableRow>
-                <div className="flex items-center">
+                          </TableHeader>
-                  <div className="text-sm text-gray-600">
+                          <TableBody>
-                    共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
+                            {data.map((item, index) => (
-                  </div>
+                              <TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                </div>
+                                <TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
-              </div>
+                                <TableCell className="px-4 py-2">{item.user}</TableCell>
-
+                                <TableCell className="px-4 py-2">{item.city}</TableCell>
-              <div className="flex border rounded-lg overflow-auto">
+                                <TableCell className="px-4 py-2">{item.edge}</TableCell>
-                <Table>
+                                <TableCell className="px-4 py-2">{item.public}</TableCell>
-                  <TableHeader>
+                                <TableCell className="px-4 py-2">
-                    <TableRow className="bg-gray-50">
+                                  {getStatusBadge(item.ischange, '正常', '更新')}
-                      <TableHead className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 left-0 z-20 bg-gray-50 border-r">
+                                </TableCell>
-                        城市
+                                <TableCell className="px-4 py-2">
-                      </TableHead>
+                                  {getOnlineStatus(item.isonline)}
-                      {macAddresses.map((mac, index) => (
+                                </TableCell>
-                        <TableHead
+                              </TableRow>
-                          key={index}
+                            ))}
-                          className="text-xs text-gray-500 uppercase tracking-wider sticky top-0  text-center"
+                          </TableBody>
-                        >
+                        </Table>
-                          {mac}
+                      </div>
-                        </TableHead>
+                      {/* 分页组件 */}
-                      ))}
+                      <div className="flex gap-6">
-                    </TableRow>
+                        <Pagination
-                  </TableHeader>
+                          total={total}
-                  <TableBody>
+                          page={page}
-                    {matrixData.map((row, rowIndex) => (
+                          size={250}
-                      <TableRow
+                          sizeOptions={[250]}
-                        key={rowIndex}
+                          onPageChange={handlePageChange}
-                        className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+                          onSizeChange={handleSizeChange}
-                      >
+                          className="mt-4"
-                        <TableCell className="px-4 py-2 font-medium sticky left-0 bg-inherit z-10 border-r">
+                        />
-                          {row.city}
+                      </div>
-                        </TableCell>
+                    </>
-                        {macAddresses.map((mac, colIndex) => {
+                  ) : (
-                          const item = row.devices[mac]
+                    <div className="text-center py-12">
-                          if (!item) {
+                      <div className="text-gray-400 text-4xl mb-4">📋</div>
-                            return (
+                      <p className="text-gray-600">暂无网关配置数据</p>
-                              <TableCell
+                    </div>
-                                key={colIndex}
+                  )}
-                                className="px-2 py-3 text-center min-w-[180px]"
-                              >
-                                <div className="text-gray-400 text-sm py-6">-</div>
-                              </TableCell>
-                            )
-                          }
-
-                          // 状态颜色配置
-                          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 (
-                            <TableCell
-                              key={colIndex}
-                              className="px-2 py-3 min-w-[180px]"
-                            >
-                              <div className={`p-3 rounded-lg border ${statusConfig.isonline.bg} ${statusConfig.isonline.border}`}>
-                                <div className="flex justify-between items-center mb-1">
-                                  <span className="text-xs text-gray-600">IP地址:</span>
-                                  <span className="text-xs font-medium">{item.public || 'N/A'}</span>
-                                </div>
-                                <div className="flex justify-between items-center mb-1">
-                                  <span className="text-xs text-gray-600">线路:</span>
-                                  <span className="text-xs font-medium">{item.user || 'N/A'}</span>
-                                </div>
-                                <div className="flex justify-between items-center mb-2">
-                                  <span className="text-xs text-gray-600">端口:</span>
-                                  <span className="text-xs font-medium">{item.inner_ip || 'N/A'}</span>
-                                </div>
-                                <div className="flex justify-between items-center">
-                                  <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
-                                    {statusConfig.ischange.label}
-                                  </span>
-                                  <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
-                                    {statusConfig.isonline.label}
-                                  </span>
-                                </div>
-                              </div>
-                            </TableCell>
-                          )
-                        })}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
             </div>
           </div>
         </>

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<GatewayConfig[]>([])
+  const [loading, setLoading] = useState(false)
+  const [infoData, setInfoData] = useState<GatewayInfo[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [matrixData, setMatrixData] = useState<{ city: string, devices: { [macaddr: string]: GatewayConfig[] } }[]>([])
+  const [cities, setCities] = useState<string[]>([])
+  const [macAddresses, setMacAddresses] = useState<string[]>([])
+  const [currentTotal, setCurrentTotal] = useState(0)
+  // 缓存处理先保存初始MAC地址列表
+  const [initialMacAddresses, setInitialMacAddresses] = useState<string[]>([])
+  // 保存每个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<typeof filterSchema>
+
+  // 初始化表单
+  const form = useForm<FilterFormValues>({
+    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 (
+    <div className="flex flex-col bg-white shadow p-6 overflow-hidden">
+      {/* 查询表单 */}
+      <div className="flex gap-6">
+        <div className="flex flex-3 rounded-lg bg-white">
+          <Form {...form}>
+            <form onSubmit={formHandleSubmit(onSubmit)}>
+              <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="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>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12">
+          <div className="text-gray-400 text-4xl mb-4">⏳</div>
+          <p className="text-gray-600">正在查询网关配置信息...</p>
+        </div>
+      ) : matrixData.length > 0 ? (
+        <>
+          <div className="flex gap-6 overflow-hidden">
+            {/* 二维矩阵表格 */}
+            <div className="flex-3 flex flex-col overflow-hidden">
+              <div className="flex gap-6 p-2 items-center justify-between text-sm">
+                <div className="flex gap-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
+                    <span className="text-xs font-medium">蓝色：在用</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
+                    <span className="text-xs font-medium">绿色：空闲</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
+                    <span className="text-xs font-medium">黄色：更新</span>
+                  </div>
+                </div>
+                <div className="flex items-center">
+                  <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+                  <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
+                </div>
+                <div className="flex items-center">
+                  <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+                  <span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
+                </div>
+                <div className="flex items-center">
+                  <div className="text-sm text-gray-600">
+                    当前<span className="font-semibold text-blue-600">{currentTotal}</span> 条 |
+                    共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex border rounded-lg overflow-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-gray-50">
+                      <TableHead className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 left-0 z-20 bg-gray-50 border-r min-w-[120px]">
+                        城市
+                      </TableHead>
+                      {macAddresses.map((macaddr, index) => (
+                        <TableHead
+                          key={index}
+                          className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 text-center min-w-[200px]"
+                        >
+                          {macaddr}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {matrixData.map((row, rowIndex) => (
+                      <TableRow key={rowIndex}>
+                        <TableCell className="px-4 py-2 font-medium sticky left-0 bg-inherit z-10 border-r">
+                          {row.city}
+                        </TableCell>
+                        {macAddresses.map((macaddr, colIndex) => {
+                          const configs = row.devices[macaddr] || []
+
+                          if (configs.length === 0) {
+                            return (
+                              <TableCell
+                                key={`${rowIndex}-${colIndex}`}
+                                className="px-2 py-3 text-center min-w-[180px]"
+                              >
+                                <div className="text-gray-400 text-sm py-6">-</div>
+                              </TableCell>
+                            )
+                          }
+
+                          return (
+                            <TableCell
+                              key={`${rowIndex}-${colIndex}`}
+                              className="p-2 min-w-[180px]"
+                            >
+                              <div className="space-y-2">
+                                {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 (
+                                    <div key={itemIndex} className="flex flex-col gap-1">
+                                      <div className="flex justify-between items-center">
+                                        <span className="text-sm font-medium">{item.public || 'N/A'}</span>
+                                      </div>
+                                      <div className="flex justify-between items-center">
+                                        <span className="text-xs font-medium">{item.user || 'N/A'}</span>
+                                        <span className="text-xs font-medium">{item.inner_ip || 'N/A'}</span>
+                                      </div>
+                                      <div className="flex justify-between items-center">
+                                        <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
+                                          {statusConfig.ischange.label}
+                                        </span>
+                                        <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
+                                          {statusConfig.isonline.label}
+                                        </span>
+                                      </div>
+                                    </div>
+                                  )
+                                })}
+                              </div>
+                            </TableCell>
+                          )
+                        })}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="text-center py-12">
+          <div className="text-gray-400 text-4xl mb-4">📋</div>
+          <p className="text-gray-600">暂无网关配置数据</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function GatewayConfigs() {
+  return (
+    <Suspense fallback={(
+      <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>
+        </div>
+      </div>
+    )}>
+      <GatewayConfigContent />
+    </Suspense>
+  )
+}

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<GatewayInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
-  const router = useRouter()
 
   const form = useForm<FilterSchema>({
     resolver: zodResolver(filterSchema),
@@ -222,14 +220,14 @@ export default function Gatewayinfo() {
                 >
                   <TableCell className="px-4 py-2">
                     <div className="flex items-center gap-2">
-                      <button
+                      {/* <button
                         onClick={() => {
                           router.push(`/dashboard?tab=gateway&mac=${item.macaddr}`)
                         }}
                         className="font-mono text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
-                      >
+                      > */}
-                        {item.macaddr}
+                      {item.macaddr}
-                      </button>
+                      {/* </button> */}
                       <SmartCopyButton data={item.macaddr} />
                     </div>
                   </TableCell>

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() {
         <div className="grid grid-cols-1 gap-6 border flex-auto">
           {activeTab === 'gatewayInfo' && <Gatewayinfo />}
           {activeTab === 'gateway' && <GatewayConfig />}
+          {activeTab === 'gateways' && <GatewayConfigs />}
           {activeTab === 'city' && <CityNodeStats />}
           {activeTab === 'allocation' && <AllocationStatus detailed />}
           {activeTab === 'edge' && <Edge />}