更新网关信息配置布局表格变更为二维矩阵

src/app/dashboard/components/gatewayConfig.tsx

@@ -1,9 +1,9 @@
 'use client'
-import { useEffect, useState, Suspense } from 'react'
+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 { getGatewayConfig, type GatewayConfig } from '@/actions/stats'
+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'
@@ -11,15 +11,15 @@ 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'
+import { Search } from 'lucide-react'
 
 function GatewayConfigContent() {
   const [data, setData] = useState<GatewayConfig[]>([])
   const [loading, setLoading] = useState(false)
   const searchParams = useSearchParams()
-
-  // 分页状态
-  const [page, setPage] = useState(1)
-  const [total, setTotal] = useState(0)
+  const [infoData, setInfoData] = useState<GatewayInfo[]>([])
+  const [totalCount, setTotalCount] = useState(0)
 
   // 定义表单验证规则
   const filterSchema = z.object({
@@ -44,21 +44,80 @@ function GatewayConfigContent() {
   })
   const { watch, handleSubmit: formHandleSubmit, setValue } = form
   const macaddrValue = watch('macaddr')
-  // 监听URL的mac参数变化
-  useEffect(() => {
-    const urlMac = searchParams.get('mac')
-    if (urlMac) {
-      setValue('macaddr', urlMac)
-      setPage(1)
-      fetchData({ mac: urlMac }, 1)
-    }
-    else {
-      setValue('macaddr', '')
-      setPage(1)
-      fetchData({}, 1)
-    }
-  }, [searchParams, setValue])
 
+  // 将线性数据转换为二维矩阵数据
+  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 gatewayData = async () => {
+    try {
+      const result = await getGatewayInfo()
+      if (!result.success) {
+        throw new Error(result.error || '查询网关信息失败')
+      }
+      setInfoData(result.data)
+    }
+    catch (error) {
+      console.error('Failed to fetch gateway info:', error)
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+  // 网关配置数据
   const fetchData = async (filters: {
     mac?: string
     public?: string
@@ -84,7 +143,7 @@ function GatewayConfigContent() {
       })
 
       setData(result.data.items)
-      setTotal(result.data.total)
+      setTotalCount(result.data.total)
     }
     catch (error) {
       toast.error((error as Error).message || '获取网关配置失败')
@@ -95,7 +154,6 @@ function GatewayConfigContent() {
   }
 
   const onSubmit = (data: FilterFormValues) => {
-    setPage(1)
     const filters = {
       mac: data.macaddr || '',
       public: data.public || '',
@@ -106,70 +164,59 @@ function GatewayConfigContent() {
     fetchData(filters, 1)
   }
 
-  // 处理页码变化
-  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>
-    )
-  }
+  // 获取转换后的矩阵数据
+  const { matrixData, macAddresses } = transformToMatrix(data)
 
   return (
     <div className="flex flex-col bg-white shadow p-6 overflow-hidden">
 
       {/* 查询表单 */}
-      <div className="rounded-lg bg-white">
+      <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">
                 <div className="flex gap-4">
                   <FormField
                     name="macaddr"
                     render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>MAC地址</FormLabel>
-                    <Input placeholder="输入MAC地址查询" {...field} />
+                      <FormItem className="flex-1 relative">
+                        <div className="relative">
+                          <Input
+                            placeholder="搜索MAC地址..."
+                            {...field}
+                            className="w-full pr-10"
+                          />
+                          <Search
+                            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              onSubmit(form.getValues())
+                            }}
+                          />
+                        </div>
                       </FormItem>
                     )}
                   />
+                </div>
+              </form>
+            </Form>
+            <div className="flex gap-4 mb-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>
+              </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>
+          </div>
+        </div>
+        <div className="flex flex-3 rounded-lg bg-white">
+          <Form {...form}>
+            <form onSubmit={formHandleSubmit(onSubmit)} className="mb-6">
+              <div className="flex  gap-4">
                 <FormField
                   name="public"
                   render={({ field }) => (
@@ -213,6 +260,7 @@ function GatewayConfigContent() {
             </form>
           </Form>
         </div>
+      </div>
 
       {loading ? (
         <div className="text-center py-12">
@@ -221,75 +269,154 @@ function GatewayConfigContent() {
         </div>
       ) : data.length > 0 ? (
         <>
+          {/* 网关基本信息 */}
           <div className="flex gap-6 overflow-hidden">
-            <div className="flex-3 w-full flex">
+            <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' : '')}>
+                  <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="flex items-center">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full mr-2',
+                            item.enable === 1 ? 'bg-green-500' : 'bg-red-500',
+                          )}
+                        />
+                        <span className={cn(
+                          'text-xs font-medium',
+                          item.enable === 1 ? 'text-green-700' : 'text-red-700',
+                        )}>
+                          {item.enable === 1 ? '在线' : '离线'}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="text-sm text-gray-600 mb-3">
+                    {item.inner_ip || '未配置IP'}
+                  </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">
+                <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="text-sm text-gray-600">
+                    共 <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">端口</TableHead>
-                    <TableHead className="text-xs text-gray-500 uppercase tracking-wider">线路</TableHead>
-                    <TableHead className="text-xs text-gray-500 uppercase tracking-wider">城市</TableHead>
-                    <TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点MAC</TableHead>
-                    <TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点IP</TableHead>
-                    <TableHead className="text-xs text-gray-500 uppercase tracking-wider">配置更新</TableHead>
-                    <TableHead className="text-xs text-gray-500 uppercase tracking-wider">在用状态</TableHead>
+                      <TableHead className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 left-0 z-20 bg-gray-50 border-r">
+                        城市
+                      </TableHead>
+                      {macAddresses.map((mac, index) => (
+                        <TableHead
+                          key={index}
+                          className="text-xs text-gray-500 uppercase tracking-wider sticky top-0  text-center"
+                        >
+                          {mac}
+                        </TableHead>
+                      ))}
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                  {data.map((item, index) => (
-                    <TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                      <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, '正常', '更新')}
+                    {matrixData.map((row, rowIndex) => (
+                      <TableRow
+                        key={rowIndex}
+                        className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+                      >
+                        <TableCell className="px-4 py-2 font-medium sticky left-0 bg-inherit z-10 border-r">
+                          {row.city}
                         </TableCell>
-                      <TableCell className="px-4 py-2">
-                        {getOnlineStatus(item.isonline)}
+                        {macAddresses.map((mac, colIndex) => {
+                          const item = row.devices[mac]
+                          if (!item) {
+                            return (
+                              <TableCell
+                                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 className="flex flex-1 flex-col gap-4 mb-6">
-              <div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
-                <div className="text-2xl font-bold text-blue-600">{total}</div>
-                <div className="text-sm text-blue-800">配置条数</div>
             </div>
-              <div className="bg-green-50 p-4 rounded-lg border border-green-100">
-                <div className="text-2xl font-bold text-green-600">
-                  {data.filter(item => item.isonline === 1).length}
-                </div>
-                <div className="text-sm text-green-800">在用节点</div>
-              </div>
-              <div className="bg-orange-50 p-4 rounded-lg border border-orange-100">
-                <div className="text-2xl font-bold text-orange-600">
-                  {data.filter(item => item.ischange === 1).length}
-                </div>
-                <div className="text-sm text-orange-800">需要更新</div>
-              </div>
-            </div>
-          </div>
-
-          {/* 分页组件 */}
-          <div className="flex gap-6">
-            <div className="flex flex-3 justify-end">
-              {!macaddrValue && (
-                <Pagination
-                  total={total}
-                  page={page}
-                  size={250}
-                  sizeOptions={[250]}
-                  onPageChange={handlePageChange}
-                  onSizeChange={handleSizeChange}
-                  className="mt-4"
-                />
-              )}
-            </div>
-            <div className="flex flex-1"></div>
           </div>
         </>
       ) : (

src/app/dashboard/page.tsx

@@ -10,7 +10,6 @@ import Settings from './components/settings'
 import Edge from './components/edge'
 import { LogOut } from 'lucide-react'
 import { logout } from '@/actions/auth'
-import { toast } from 'sonner'
 
 const tabs = [
   { id: 'gatewayInfo', label: '网关信息' },