From 8c05d0b332f37e46abda9f0b0b3b58505ee49ac0 Mon Sep 17 00:00:00 2001
From: luorijun <luorijun@outlook.com>
Date: Mon, 20 Oct 2025 16:20:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20&=20=E6=95=B0=E6=8D=AE=E8=A1=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20tanstack-table=20=E5=BA=93=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                               |  44 ++++++--
 .vscode/settings.json                    |  26 +++++
 bun.lock                                 |   5 +
 package.json                             |   1 +
 src/app/(root)/allocationStatus/page.tsx |   2 -
 src/app/(root)/layout.tsx                |  13 ++-
 src/app/globals.css                      |   4 +-
 src/components/data-table.tsx            | 124 +++++++++++------------
 src/components/ui/table.tsx              |   2 +-
 9 files changed, 142 insertions(+), 79 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.gitignore b/.gitignore
index 25de3be..d7b0419 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,39 @@
-node_modules
-src/generated/
-.next
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
 .env
-deploy.sh
-.volumes
-.vscode
\ No newline at end of file
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# dev
+.volumes/
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..81c02dd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,26 @@
+{
+    "sqltools.connections": [
+        {
+            "mysqlOptions": {
+                "authProtocol": "default",
+                "enableSsl": "Disabled"
+            },
+            "ssh": "Disabled",
+            "previewLimit": 50,
+            "server": "localhost",
+            "port": 23306,
+            "driver": "MariaDB",
+            "name": "localhost",
+            "database": "app",
+            "username": "root"
+        }
+    ],
+    "[typescript]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
+    "[typescriptreact]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    }
+}
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index 3283db6..0fe959f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,6 +10,7 @@
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@tanstack/react-table": "^8.21.3",
         "bcryptjs": "^3.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -363,6 +364,10 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.12", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.12", "@tailwindcss/oxide": "4.1.12", "postcss": "^8.4.41", "tailwindcss": "4.1.12" } }, "sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ=="],
 
+    "@tanstack/react-table": ["@tanstack/react-table@8.21.3", "https://registry.npmmirror.com/@tanstack/react-table/-/react-table-8.21.3.tgz", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="],
+
+    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "https://registry.npmmirror.com/@tanstack/table-core/-/table-core-8.21.3.tgz", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
diff --git a/package.json b/package.json
index 2cd1d5a..c29a3b4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@tanstack/react-table": "^8.21.3",
     "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/src/app/(root)/allocationStatus/page.tsx b/src/app/(root)/allocationStatus/page.tsx
index f2e9d47..06ab62e 100644
--- a/src/app/(root)/allocationStatus/page.tsx
+++ b/src/app/(root)/allocationStatus/page.tsx
@@ -39,7 +39,6 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
     ...item,
     overage: Math.max(0, Number(item.assigned) - Number(item.count)),
   }))
-  console.log(newData, 'newData')
 
   const fetchData = useCallback(async () => {
     try {
@@ -116,7 +115,6 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
           {
             label: '城市',
             props: 'city',
-            sortable: true,
           },
           {
             label: '可用IP量',
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index 1ef818a..825c138 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -5,6 +5,7 @@ import { useRouter, usePathname } from 'next/navigation'
 import { logout } from '@/actions/auth'
 import { LogOutIcon } from 'lucide-react'
 import Link from 'next/link'
+import { cn } from '@/lib/utils'
 
 export default function DashboardLayout({
   children,
@@ -62,7 +63,7 @@ export default function DashboardLayout({
       {/* 主要内容区域 */}
       <div className="flex-auto overflow-hidden flex">
         {/* 侧边栏 */}
-        <nav className="flex-none basis-64 p-4 space-y-2 border-r flex flex-col">
+        <nav className="flex-none basis-64 p-3 space-y-2 border-r flex flex-col">
           <NavbarItem href="/gatewayinfo" active={isActive('/gatewayinfo')}>网关信息</NavbarItem>
           <NavbarItem href="/gatewayConfig" active={isActive('/gatewayConfig')}>网关配置</NavbarItem>
           <NavbarItem href="/gatewayMonitor" active={isActive('/gatewayMonitor')}>网关查询</NavbarItem>
@@ -89,11 +90,13 @@ function NavbarItem(props: {
   return (
     <Link
       href={props.href}
-      className={`block px-3 py-2 rounded-md text-sm font-medium transition-colors text-center items-center justify-center ${
+      className={cn(
+        'transition-colors duration-150 ease-in-out',
+        'p-2 rounded-md text-sm flex items-center',
         props.active
-          ? 'border-blue-500 text-blue-600'
-          : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-200'
-      }`}
+          ? 'text-primary bg-primary/10'
+          : 'hover:bg-muted',
+      )}
     >
       {props.children}
     </Link>
diff --git a/src/app/globals.css b/src/app/globals.css
index a23a767..647921e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -51,8 +51,10 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+
+  --primary: oklch(0.65 0.175 255);
   --primary-foreground: oklch(0.985 0 0);
+
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
index 00daca3..b20ad7a 100644
--- a/src/components/data-table.tsx
+++ b/src/components/data-table.tsx
@@ -1,11 +1,12 @@
+'use client'
 import * as React from 'react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'
 import { ReactNode, useState } from 'react'
-import { ArrowUpDownIcon, ArrowUpIcon, ArrowDownIcon, Columns } from 'lucide-react'
+import { ArrowUpDownIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react'
+import { ColumnDef, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
 
-type Data = {
-  [key: string]: unknown
-}
+type Data = Record<string, unknown>
 
 type Column = {
   label: string
@@ -14,73 +15,68 @@ type Column = {
   sortable?: boolean
 }
 
-export function DataTable(props: { data: Data[], columns: Column[] }) {
-  const [sortKey, setSortKey] = useState<string>('')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-
-  const sortedData = [...props.data].sort((a, b) => {
-    let aValue = a[sortKey]
-    let bValue = b[sortKey]
-
-    if (aValue === undefined || aValue === null) aValue = ''
-    if (bValue === undefined || bValue === null) bValue = ''
-
-    const aStr = String(aValue)
-    const bStr = String(bValue)
-
-    const aNum = Number(aValue)
-    const bNum = Number(bValue)
-
-    if (!isNaN(aNum) && !isNaN(bNum)) {
-      return sortDirection === 'asc' ? aNum - bNum : bNum - aNum
-    }
-    else {
-      return sortDirection === 'asc'
-        ? aStr.localeCompare(bStr)
-        : bStr.localeCompare(aStr)
-    }
+export function DataTable<T extends Data>(props: {
+  data: T[]
+  columns: Column[]
+}) {
+  const table = useReactTable({
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    data: props.data,
+    columns: props.columns.map(col => ({
+      meta: col,
+      header: col.label,
+      accessorKey: col.props,
+      cell: info => col.render?.(info.row.original) || String(info.getValue()),
+      enableSorting: col.sortable,
+    })) as ColumnDef<T>[],
   })
 
-  const handleSort = (key: string) => {
-    if (!key) return
-    if (sortKey === key) {
-      setSortDirection(direction => direction === 'asc' ? 'desc' : 'asc')
-    }
-    else {
-      setSortKey(key)
-      setSortDirection('desc')
-    }
-  }
-
-  const renderSortIcon = (key: string) => {
-    if (sortKey !== key) {
-      return <ArrowUpDownIcon className="h-4 w-4 text-gray-400" />
-    }
-    return sortDirection === 'asc'
-      ? <ArrowUpIcon className="h-4 w-4 text-blue-600" />
-      : <ArrowDownIcon className="h-4 w-4 text-blue-600" />
-  }
-
   return (
     <Table>
       <TableHeader>
-        <TableRow>
-          {props.columns.map((item, index) => (
-            <TableHead key={index} onClick={() => item.sortable && handleSort(item.props || item.label)} className={item.sortable ? 'cursor-pointer hover:bg-gray-50' : ''}>
-              <div className="flex items-center gap-2">
-                <span> {item.label}</span>
-                {item.sortable && item.props && renderSortIcon(item.props)}
-              </div>
-            </TableHead>
-          ))}
-        </TableRow>
+
+        {/* 表头行 */}
+        {table.getHeaderGroups().map(group => (
+          <TableRow key={group.id}>
+
+            {/* 表头 */}
+            {group.headers.map(header => (
+              <TableHead
+                key={header.id}
+                className={cn(
+                  header.column.columnDef.enableSorting && 'hover:bg-gray-200 transition-colors duration-150 ease-in-out cursor-pointer',
+                  header.column.getIsSorted() && 'text-primary',
+                )}
+                onClick={header.column.getToggleSortingHandler()}>
+                <div className="flex flex-row items-center justify-between">
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                  {header.column.columnDef.enableSorting && (
+                    header.column.getIsSorted() == 'asc' ? (
+                      <ArrowUpIcon className="size-4" />
+                    ) : header.column.getIsSorted() == 'desc' ? (
+                      <ArrowDownIcon className="size-4" />
+                    ) : (
+                      <ArrowUpDownIcon className="size-4" />
+                    )
+                  )}
+                </div>
+              </TableHead>
+            ))}
+          </TableRow>
+        ))}
       </TableHeader>
+
       <TableBody>
-        {sortedData.map((row, index) => (
-          <TableRow key={index}>
-            {props.columns.map((colume, index) => (
-              <TableCell key={index}>
-                { colume.props ? String(row[colume.props]) : colume.render ? colume.render(row) : undefined }
+
+        {/* 表格行 */}
+        {table.getRowModel().rows.map(row => (
+          <TableRow key={row.id}>
+
+            {/* 表格 */}
+            {row.getVisibleCells().map(cell => (
+              <TableCell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </TableCell>
             ))}
           </TableRow>
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index f3fd9d7..7493a5c 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
     <tr
       data-slot="table-row"
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border/50 transition-colors',
+        'hover:data-[state=selected]:bg-muted border-b border-border/50 transition-colors',
         className,
       )}
       {...props}