修复页面重叠的问题 & 网关状态转换

src/actions/gateway.ts

@@ -19,8 +19,11 @@ export async function createGateway(data: {
   return callByUser<Gateway>("/api/admin/proxy/create", data)
 }
 
-export async function deletegateway(id: number) {
-  return callByUser<Gateway>("/api/admin/proxy/remove", {
-    id,
-  })
+export async function updateGateway(data:{
+    id: number,
+    status: number}
+  ) {
+  return callByUser<Gateway>("/api/admin/proxy/update/status",
+  data
+  )
 }

src/app/(root)/appbar.tsx

@@ -104,7 +104,7 @@ export default function Appbar(props: { admin: Admin }) {
   }
 
   return (
-    <header className="bg-white flex-none basis-16 border-b border-gray-200 flex items-center justify-between px-6">
+    <header className="bg-white flex-none basis-16 border-b border-gray-200 flex items-center justify-between px-6 z-40">
       {/* 面包屑导航 */}
       <div className="flex items-center text-sm">
         {breadcrumbs.map((crumb, index) => (
@@ -194,7 +194,7 @@ export default function Appbar(props: { admin: Admin }) {
                 </div>
               )}
 
-              <div className="py-1">
+              <div className="py-1  ">
                 <Link
                   href="/profile"
                   className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"

src/app/(root)/gateway/create.tsx

@@ -31,9 +31,7 @@ import { toast } from "sonner"
 import { createGateway } from "@/actions/gateway"
 
 const schema = z.object({
-  mac: z.string().regex(/^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/, {
-    message: "MAC地址格式不正确，请使用如 00:11:22:AA:BB:CC 或 00-11-22-AA-BB-CC 的格式"
-  }),
+  mac: z.string(),
   ip: z.string().regex(/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/, {
     message: "IP地址格式不正确，请使用如 192.168.1.1 的格式"
   }),
@@ -131,7 +129,7 @@ export default function CreatePage(props: { onSuccess?: () => void }) {
               name="mac"
               render={({ field, fieldState }) => (
                 <Field>
-                  <FieldLabel htmlFor="gateway-create-mac">MAC地址:</FieldLabel>
+                  <FieldLabel htmlFor="gateway-create-mac">标识:</FieldLabel>
                   <Input
                     id="gateway-create-mac"
                     placeholder="请输入MAC地址，如：00:11:22:33:44:55"

src/app/(root)/gateway/page.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import { format } from "date-fns"
-import { Suspense, useState } from "react"
+import { Suspense, useCallback, useState } from "react"
 import { toast } from "sonner"
-import { getGatewayPage } from "@/actions/gateway"
+import { getGatewayPage, updateGateway } from "@/actions/gateway"
 import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Page } from "@/components/page"
@@ -15,8 +15,31 @@ import CreatePage from "./create"
 export default function GatewayPage() {
   const [loading, setLoading] = useState(false)
 
-  const table = useDataTable((page, size) => getGatewayPage({ page, size }))
+const getGatewayPageWrapper = useCallback((page: number, size: number) => {
+  return getGatewayPage({ page, size })
+}, [])
 
+const table = useDataTable(getGatewayPageWrapper)
+
+ const handleToggle = async (id: number, status: number) => {
+    setLoading(true)
+    try {
+      const result = await updateGateway({
+        id:id,
+        status: status === 0 ? 1 : 0
+      })
+      if (result.success) {
+        toast.success(status === 0 ? "启用成功" : "停用成功")
+        table.refresh()
+      } else {
+        toast.error(result.message || "操作失败")
+      }
+    } catch (error) {
+      toast.error("操作失败")
+    } finally {
+      setLoading(false)
+    }
+  }
   return (
     <Page>
       <Auth scope={ScopeProxyWrite}>
@@ -62,10 +85,13 @@ export default function GatewayPage() {
               header: "操作",
               cell: ({ row }) => (
                 <div className="flex gap-2">
-                  <Button className="bg-green-600/60 hover:bg-green-600/60 active:bg-green-600/60">
-                    启用
-                  </Button>
-                  <Button>停用</Button>
+                  <Button
+                  onClick={() => handleToggle(row.original.id, row.original.status)}
+                  disabled={loading}
+                  variant={row.original.status === 0 ? "default" : "destructive"}
+                >
+                  {row.original.status === 0 ? "启用" : "停用"}
+                </Button>
                 </div>
               ),
             },