发布v1.7.0版本

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-admin",
-  "version": "1.1.0",
+  "version": "1.7.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 -p 3001 --turbopack",

publish.ps1

@@ -9,8 +9,8 @@ if ($confrim -ne "y") {
     exit 0
 }
 
-docker build -t repo.lanhuip.com:8554/lanhu/admin:latest .
+docker build -t repo.lanhuip.com/lanhu/admin:latest .
-docker build -t repo.lanhuip.com:8554/lanhu/admin:$($args[0]) .
+docker build -t repo.lanhuip.com/lanhu/admin:$($args[0]) .
 
-docker push repo.lanhuip.com:8554/lanhu/admin:latest
+docker push repo.lanhuip.com/lanhu/admin:latest
-docker push repo.lanhuip.com:8554/lanhu/admin:$($args[0])
+docker push repo.lanhuip.com/lanhu/admin:$($args[0])

src/actions/balance.ts

@@ -6,7 +6,7 @@ export async function getPageBalance(params: {
   page: number
   size: number
   user_phone?: string
-  bill_id?: string
+  bill_no?: string
   created_at_start?: Date
   created_at_end?: Date
 }) {
@@ -21,7 +21,7 @@ export async function getBalance(params: {
   size: number
   user_id: number
   user_phone?: string
-  bill_id?: string
+  bill_no?: string
   created_at_start?: Date
   created_at_end?: Date
 }) {

src/actions/gateway.ts

@@ -0,0 +1,24 @@
+"use server"
+
+import type { PageRecord } from "@/lib/api"
+import type { Gateway } from "@/models/gateway"
+import { callByUser } from "./base"
+
+export async function getGatewayPage(params: { page: number; size: number }) {
+  return callByUser<PageRecord<Gateway>>("/api/admin/proxy/page", params)
+}
+
+export async function createGateway(data: {
+  mac: string
+  ip: string
+  host?: string
+  type: number
+  status: number
+  secret: string
+}) {
+  return callByUser<Gateway>("/api/admin/proxy/create", data)
+}
+
+export async function updateGateway(data: { id: number; status: number }) {
+  return callByUser<Gateway>("/api/admin/proxy/update/status", data)
+}

src/actions/product.ts

@@ -45,6 +45,7 @@ export async function updateProductSku(data: {
   price?: string
   discount_id?: number | null
   price_min?: string
+  count_min?: number | null
 }) {
   return callByUser<ProductSku>("/api/admin/product/sku/update", {
     id: data.id,
@@ -53,6 +54,7 @@ export async function updateProductSku(data: {
     price: data.price,
     discount_id: data.discount_id,
     price_min: data.price_min,
+    count_min: data.count_min,
   })
 }
 

src/actions/resources.ts

@@ -28,7 +28,7 @@ export async function listResourceShort(params: ResourceListParams) {
   )
 }
 
-export async function updateResource(data: { id: number; active?: boolean }) {
+export async function updateResource(data: { id: number; active?: boolean; checkip?: boolean}) {
   return callByUser<Resources>("/api/admin/resource/update", data)
 }
 

src/actions/trade.ts

@@ -30,10 +30,3 @@ export async function getTrade(params: {
 }) {
   return callByUser<PageRecord<Trade>>("/api/admin/trade/page/of-user", params)
 }
-export async function getTradeComplete(params: {
-  user_id: number
-  trade_no: string
-  method: number
-}) {
-  return callByUser<PageRecord<Trade>>("/api/admin/trade/complete", params)
-}

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

@@ -4,6 +4,7 @@ import { Suspense, useState } from "react"
 import { toast } from "sonner"
 import { deleteAdmin, getPageAdmin, updateAdmin } from "@/actions/admin"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -35,10 +36,9 @@ import { UpdateAdmin } from "./update"
 
 export default function AdminPage() {
   const table = useDataTable((page, size) => getPageAdmin({ page, size }))
-  console.log(table, "table")
 
   return (
-    <div className="flex flex-col gap-3">
+    <Page>
       {/* 操作栏 */}
       <div className="flex justify-between items-stretch">
         <div className="flex gap-3">
@@ -54,15 +54,15 @@ export default function AdminPage() {
             { header: "用户名", accessorKey: "username" },
             {
               header: "姓名",
-              accessorFn: row => row.name ?? "-",
+              accessorFn: row => row.name ?? "",
             },
             {
               header: "手机号",
-              accessorFn: row => row.phone ?? "-",
+              accessorFn: row => row.phone ?? "",
             },
             {
               header: "邮箱",
-              accessorFn: row => row.email ?? "-",
+              accessorFn: row => row.email ?? "",
             },
             {
               header: "状态",
@@ -129,7 +129,7 @@ export default function AdminPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }
 

src/app/(root)/appbar.tsx

@@ -88,6 +88,7 @@ export default function Appbar(props: { admin: Admin }) {
       discount: "折扣管理",
       statistics: "数据统计",
       balance: "余额明细",
+      gateway: "网关列表",
     }
 
     return labels[path] || path
@@ -103,7 +104,7 @@ export default function Appbar(props: { admin: Admin }) {
   }
 
   return (
-    <header className="bg-white h-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) => (
@@ -193,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)/balance/page.tsx

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form"
 import z from "zod"
 import { getPageBalance } from "@/actions/balance"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -14,12 +15,11 @@ import {
   FieldLabel,
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
-
 import type { Balance } from "@/models/balance"
 
 type FilterValues = {
   user_phone?: string
-  bill_id?: string
+  bill_no?: string
   admin_id?: string
   created_at_start?: Date
   created_at_end?: Date
@@ -28,7 +28,7 @@ type FilterValues = {
 const filterSchema = z
   .object({
     phone: z.string().optional(),
-    bill_id: z.string().optional(),
+    bill_no: z.string().optional(),
     admin_id: z.string().optional(),
     created_at_start: z.string().optional(),
     created_at_end: z.string().optional(),
@@ -56,7 +56,7 @@ export default function BalancePage() {
     resolver: zodResolver(filterSchema),
     defaultValues: {
       phone: "",
-      bill_id: "",
+      bill_no: "",
       admin_id: "",
       created_at_start: "",
       created_at_end: "",
@@ -70,11 +70,10 @@ export default function BalancePage() {
 
   const table = useDataTable<Balance>(fetchUsers)
 
-  console.log(table, "table")
   const onFilter = handleSubmit(data => {
     const result: FilterValues = {}
-    if (data.phone) result.user_phone = data.phone
+    if (data.phone?.trim()) result.user_phone = data.phone.trim()
-    if (data.bill_id) result.bill_id = data.bill_id
+    if (data.bill_no?.trim()) result.bill_no = data.bill_no.trim()
     if (data.created_at_start)
       result.created_at_start = new Date(data.created_at_start)
     if (data.created_at_end)
@@ -84,8 +83,8 @@ export default function BalancePage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="phone"
@@ -102,7 +101,7 @@ export default function BalancePage() {
             )}
           />
           <Controller
-            name="bill_id"
+            name="bill_no"
             control={control}
             render={({ field, fieldState }) => (
               <Field
@@ -146,7 +145,7 @@ export default function BalancePage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -226,6 +225,6 @@ export default function BalancePage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

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

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 import { getPageBatch } from "@/actions/batch"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -100,9 +101,9 @@ export default function BatchPage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      {/* 筛选表单 */}
+      {/* 搜索表单 */}
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="batch_no"
@@ -112,8 +113,8 @@ export default function BatchPage() {
                 data-invalid={fieldState.invalid}
                 className="w-40 flex-none"
               >
-                <FieldLabel>批次号</FieldLabel>
+                <FieldLabel>提取编号</FieldLabel>
-                <Input {...field} placeholder="请输入批次号" />
+                <Input {...field} placeholder="请输入提取编号" />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -231,7 +232,7 @@ export default function BatchPage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -255,10 +256,10 @@ export default function BatchPage() {
               accessorFn: row => row.user?.phone || "",
             },
             { header: "套餐号", accessorKey: "resource.resource_no" },
-            { header: "批次号", accessorKey: "batch_no" },
+            { header: "提取编号", accessorKey: "batch_no" },
             { header: "省份", accessorKey: "prov" },
             { header: "城市", accessorKey: "city" },
-            { header: "提取IP", accessorKey: "ip" },
+            { header: "用户IP", accessorKey: "ip" },
             { header: "运营商", accessorKey: "isp" },
             { header: "提取数量", accessorKey: "count" },
             {
@@ -270,6 +271,6 @@ export default function BatchPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

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

@@ -8,6 +8,7 @@ import { toast } from "sonner"
 import { z } from "zod"
 import { getPageBill, getSkuList } from "@/actions/bill"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -150,8 +151,8 @@ export default function BillingPage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="phone"
@@ -308,7 +309,7 @@ export default function BillingPage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -328,8 +329,14 @@ export default function BillingPage() {
         <DataTable<Billing>
           {...table}
           columns={[
-            { header: "会员号", accessorFn: row => row.user?.phone || "" },
+            {
+              header: "创建时间",
+              accessorKey: "created_at",
+              cell: ({ row }) =>
+                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+            },
             { header: "套餐号", accessorKey: "resource.resource_no" },
+            { header: "会员号", accessorFn: row => row.user?.phone || "" },
             {
               header: "账单详情",
               accessorKey: "info",
@@ -445,15 +452,9 @@ export default function BillingPage() {
                 )
               },
             },
-            {
-              header: "创建时间",
-              accessorKey: "created_at",
-              cell: ({ row }) =>
-                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
-            },
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

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

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 import { getPageChannel } from "@/actions/channel"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -101,8 +102,8 @@ export default function ChannelPage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="batch_no"
@@ -112,8 +113,8 @@ export default function ChannelPage() {
                 data-invalid={fieldState.invalid}
                 className="w-40 flex-none"
               >
-                <FieldLabel>批次号</FieldLabel>
+                <FieldLabel>提取编号</FieldLabel>
-                <Input {...field} placeholder="请输入批次号" />
+                <Input {...field} placeholder="请输入提取编号" />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -219,7 +220,7 @@ export default function ChannelPage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -243,7 +244,7 @@ export default function ChannelPage() {
               accessorFn: row => row.user?.phone || "-",
             },
             { header: "套餐号", accessorKey: "resource.resource_no" },
-            { header: "批次号", accessorKey: "batch_no" },
+            { header: "提取编号", accessorKey: "batch_no" },
             {
               header: "节点",
               accessorFn: row => row.ip || row.edge_ref || row.edge_id,
@@ -322,6 +323,6 @@ export default function ChannelPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

src/app/(root)/client/balance/page.tsx

@@ -7,6 +7,7 @@ import { Controller, useForm } from "react-hook-form"
 import z from "zod"
 import { getBalance } from "@/actions/balance"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -19,7 +20,7 @@ import type { Balance } from "@/models/balance"
 
 type FilterValues = {
   user_phone?: string
-  bill_id?: string
+  bill_no?: string
   created_at_start?: Date
   created_at_end?: Date
 }
@@ -27,7 +28,7 @@ type FilterValues = {
 const filterSchema = z
   .object({
     phone: z.string().optional(),
-    bill_id: z.string().optional(),
+    bill_no: z.string().optional(),
     admin_id: z.string().optional(),
     created_at_start: z.string().optional(),
     created_at_end: z.string().optional(),
@@ -54,14 +55,13 @@ export default function BalancePage() {
   const router = useRouter()
   const userId = searchParams.get("userId")
   const userPhone = searchParams.get("phone")
-  console.log(userPhone, "userPhone")
 
   const [filters, setFilters] = useState<FilterValues>({})
   const { control, handleSubmit, reset } = useForm<FormValues>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
       phone: "",
-      bill_id: "",
+      bill_no: "",
       admin_id: "",
       created_at_start: "",
       created_at_end: "",
@@ -71,12 +71,11 @@ export default function BalancePage() {
   const table = useDataTable<Balance>((page, size) =>
     getBalance({ page, size, user_id: Number(userId), ...filters }),
   )
-  console.log(table, "仅用户的table")
 
   const onFilter = handleSubmit(data => {
     const result: FilterValues = {}
-    if (data.phone) result.user_phone = data.phone
+    if (data.phone?.trim()) result.user_phone = data.phone.trim()
-    if (data.bill_id) result.bill_id = data.bill_id
+    if (data.bill_no?.trim()) result.bill_no = data.bill_no.trim()
     if (data.created_at_start)
       result.created_at_start = new Date(data.created_at_start)
     if (data.created_at_end)
@@ -86,7 +85,8 @@ export default function BalancePage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
+      <div>
         <Button
           onClick={() => {
             router.back()
@@ -96,10 +96,11 @@ export default function BalancePage() {
           返回上一级
         </Button>
         <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      </div>
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
-            name="bill_id"
+            name="bill_no"
             control={control}
             render={({ field, fieldState }) => (
               <Field
@@ -143,7 +144,7 @@ export default function BalancePage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -219,6 +220,6 @@ export default function BalancePage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

src/app/(root)/client/batch/page.tsx

@@ -1,12 +1,13 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 import { getBatch } from "@/actions/batch"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -65,7 +66,9 @@ type FilterSchema = z.infer<typeof filterSchema>
 
 export default function BatchPage() {
   const searchParams = useSearchParams()
+  const router = useRouter()
   const userId = searchParams.get("userId")
+  const userPhone = searchParams.get("phone")
   const [filters, setFilters] = useState<APIFilterParams>({})
 
   const { control, handleSubmit, reset } = useForm<FilterSchema>({
@@ -103,9 +106,19 @@ export default function BatchPage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      {/* 筛选表单 */}
+      <div>
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+        <Button
+          onClick={() => {
+            router.back()
+          }}
+          className="gap-2"
+        >
+          返回上一级
+        </Button>
+        <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
+      </div>
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="batch_no"
@@ -214,7 +227,7 @@ export default function BatchPage() {
           />
         </div>
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -253,6 +266,6 @@ export default function BatchPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

src/app/(root)/client/billing/page.tsx

@@ -2,13 +2,14 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
 import { CreditCard, Wallet } from "lucide-react"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useEffect, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
 import { z } from "zod"
 import { getBill, getSkuList } from "@/actions/bill"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -77,8 +78,10 @@ const filterSchema = z
 type FilterSchema = z.infer<typeof filterSchema>
 
 export default function BillingPage() {
+  const router = useRouter()
   const searchParams = useSearchParams()
   const userId = searchParams.get("userId")
+  const userPhone = searchParams.get("phone")
   const [filters, setFilters] = useState<FilterValues>({})
   const [skuOptions, setSkuOptions] = useState<SkuOption[]>([])
   const [loading, setLoading] = useState(true)
@@ -153,8 +156,19 @@ export default function BillingPage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4">
+      <div>
+        <Button
+          onClick={() => {
+            router.back()
+          }}
+          className="gap-2"
+        >
+          返回上一级
+        </Button>
+        <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
+      </div>
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="resource_no"
@@ -297,7 +311,7 @@ export default function BillingPage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -317,6 +331,12 @@ export default function BillingPage() {
         <DataTable<Billing>
           {...table}
           columns={[
+            {
+              header: "创建时间",
+              accessorKey: "created_at",
+              cell: ({ row }) =>
+                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+            },
             { header: "套餐号", accessorKey: "resource.resource_no" },
             {
               header: "账单详情",
@@ -433,15 +453,9 @@ export default function BillingPage() {
                 )
               },
             },
-            {
-              header: "创建时间",
-              accessorKey: "created_at",
-              cell: ({ row }) =>
-                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
-            },
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

src/app/(root)/client/channel/page.tsx

@@ -1,12 +1,13 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 import { getChannel } from "@/actions/channel"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -64,8 +65,10 @@ const ispMap: Record<number, string> = {
 }
 
 export default function ChannelPage() {
+  const router = useRouter()
   const searchParams = useSearchParams()
   const userId = searchParams.get("userId")
+  const userPhone = searchParams.get("phone")
   const [filters, setFilters] = useState<FilterValues>({})
   const { control, handleSubmit, reset } = useForm<FilterSchema>({
     resolver: zodResolver(filterSchema),
@@ -103,8 +106,19 @@ export default function ChannelPage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      <div>
+        <Button
+          onClick={() => {
+            router.back()
+          }}
+          className="gap-2"
+        >
+          返回上一级
+        </Button>
+        <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
+      </div>
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="batch_no"
@@ -207,7 +221,7 @@ export default function ChannelPage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -310,6 +324,6 @@ export default function ChannelPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

src/app/(root)/client/cust/page.tsx

@@ -7,13 +7,18 @@ import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
 import { z } from "zod"
 import { getPageUser } from "@/actions/user"
-// import { DeductionDialog } from "@/app/(root)/cust/deduction"
-// import { DepositDialog } from "@/app/(root)/cust/deposit"
 import { UpdateDialog } from "@/app/(root)/cust/update"
 import { Auth } from "@/components/auth"
 import { DataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
   Field,
   FieldError,
@@ -49,14 +54,7 @@ type FormValues = z.infer<typeof filterSchema>
 export default function UserQueryPage() {
   const [userList, setUserList] = useState<User[]>([])
   const [loading, setLoading] = useState(false)
-  // const [depositDialog, setDepositDialog] = useState(false)
-  // const [deposit, setDeposit] = useState<User | null>(null)
-  // const [deductionDialog, setDeductionDialog] = useState(false)
-  // const [deduction, setDeduction] = useState<User | null>(null)
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
-  const [currentEditUser, setCurrentEditUser] = useState<User | null>(null)
   const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
 
   const router = useRouter()
   const { control, handleSubmit, reset } = useForm<FormValues>({
@@ -91,7 +89,7 @@ export default function UserQueryPage() {
     if (data.phone?.trim()) params.account = data.phone.trim()
     if (data.name?.trim()) params.name = data.name.trim()
     if (Object.keys(params).length === 0) {
-      toast.info("请至少输入一个筛选条件")
+      toast.info("请至少输入一个搜索条件")
       return
     }
     setCurrentFilters(params)
@@ -111,8 +109,8 @@ export default function UserQueryPage() {
   }
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="phone"
@@ -147,14 +145,12 @@ export default function UserQueryPage() {
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
           <Auth scope={ScopeUserWrite}>
-            <Button type="button" onClick={() => setIsAddDialogOpen(true)}>
+            <AddUserDialog onSuccess={refreshTable} />
-              添加用户
-            </Button>
           </Auth>
           <Button type="button" variant="outline" onClick={handleReset}>
             重置
           </Button>
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
         </FieldGroup>
       </form>
 
@@ -180,7 +176,7 @@ export default function UserQueryPage() {
                   2: "代理商注册",
                   3: "代理商添加",
                 }
-                return sourceMap[row.original.source] ?? "未知"
+                return sourceMap[row.original.source] ?? "官网注册"
               },
             },
             {
@@ -250,53 +246,32 @@ export default function UserQueryPage() {
               cell: ({ row }) => {
                 return (
                   <div className="flex flex-wrap gap-2 w-75">
-                    {/* <Auth scope={ScopeUserWriteBalanceInc}>
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          setDeposit(row.original)
-                          setDepositDialog(true)
-                        }}
-                      >
-                        充值
-                      </Button>
-                    </Auth>
-                    <Auth scope={ScopeUserWriteBalanceDec}>
-                      <Button
-                        size="sm"
-                        variant="destructive"
-                        onClick={() => {
-                          setDeduction(row.original)
-                          setDeductionDialog(true)
-                        }}
-                      >
-                        扣款
-                      </Button>
-                    </Auth> */}
                     <Auth scope={ScopeUserWriteBalance}>
-                      <Button
+                      <UpdateDialog
-                        size="sm"
+                        user={row.original}
-                        onClick={() => {
+                        onSuccess={refreshTable}
-                          setCurrentEditUser(row.original)
+                      />
-                          setIsEditDialogOpen(true)
-                        }}
-                      >
-                        修改
-                      </Button>
                     </Auth>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button size="sm" variant="outline">
+                          打开菜单
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-8">
                         <Auth scope={ScopeTradeReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
                             onClick={() => {
-                          router.push(`/client/trade?userId=${row.original.id}`)
+                              router.push(
+                                `/client/trade?userId=${row.original.id}`,
+                              )
                             }}
                           >
                             交易明细
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
                         <Auth scope={ScopeBillReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
                             onClick={() => {
                               router.push(
                                 `/client/billing?userId=${row.original.id}`,
@@ -304,11 +279,10 @@ export default function UserQueryPage() {
                             }}
                           >
                             账单详情
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
                         <Auth scope={ScopeResourceRead}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
                             onClick={() => {
                               router.push(
                                 `/client/resources?userId=${row.original.id}`,
@@ -316,21 +290,21 @@ export default function UserQueryPage() {
                             }}
                           >
                             套餐管理
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
                         <Auth scope={ScopeBatchReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
                             onClick={() => {
-                          router.push(`/client/batch?userId=${row.original.id}`)
+                              router.push(
+                                `/client/batch?userId=${row.original.id}`,
+                              )
                             }}
                           >
                             提取记录
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
                         <Auth scope={ScopeChannelReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
                             onClick={() => {
                               router.push(
                                 `/client/channel?userId=${row.original.id}`,
@@ -338,20 +312,21 @@ export default function UserQueryPage() {
                             }}
                           >
                             IP管理
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
                         <Auth scope={ScopeBalanceActivityReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
                             onClick={() => {
                               router.push(
                                 `/client/balance?userId=${row.original.id}&phone=${row.original.phone}`,
                               )
                             }}
                           >
-                        余额操作
+                            余额明细
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </div>
                 )
               },
@@ -359,31 +334,6 @@ export default function UserQueryPage() {
           ]}
         />
       </Suspense>
-      <AddUserDialog
+    </Page>
-        open={isAddDialogOpen}
-        onOpenChange={setIsAddDialogOpen}
-        onSuccess={refreshTable}
-      />
-      <UpdateDialog
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        currentUser={currentEditUser}
-        onSuccess={refreshTable}
-      />
-
-      {/* <DepositDialog
-        open={depositDialog}
-        onOpenChange={setDepositDialog}
-        currentUser={deposit}
-        onSuccess={refreshTable}
-      /> */}
-
-      {/* <DeductionDialog
-        open={deductionDialog}
-        onOpenChange={setDeductionDialog}
-        currentUser={deduction}
-        onSuccess={refreshTable}
-      /> */}
-    </div>
   )
 }

src/app/(root)/client/resources/page.tsx

@@ -2,7 +2,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format, isBefore, isSameDay } from "date-fns"
 import { Box, Loader2, Timer } from "lucide-react"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useCallback, useMemo, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
@@ -13,6 +13,7 @@ import {
   updateResource,
 } from "@/actions/resources"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -169,8 +170,23 @@ function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
 }
 
 export default function ResourcesPage() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const userPhone = searchParams.get("phone")
+
   return (
+    <Page>
       <div>
+        <Button
+          onClick={() => {
+            router.back()
+          }}
+          className="gap-2"
+        >
+          返回上一级
+        </Button>
+        <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
+      </div>
       <Tabs defaultValue="short">
         <TabsList className="bg-card p-1.5 rounded-lg">
           <TabsTrigger
@@ -193,7 +209,7 @@ export default function ResourcesPage() {
           <ResourceList resourceType="long" />
         </TabsContent>
       </Tabs>
-    </div>
+    </Page>
   )
 }
 
@@ -424,7 +440,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
 
   return (
     <div className="space-y-3">
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="user_phone"
@@ -544,7 +560,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
           />
         </div>
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"

src/app/(root)/client/trade/page.tsx

@@ -2,12 +2,13 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
 import { CheckCircle, Clock, XCircle } from "lucide-react"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useCallback, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 import { getTrade } from "@/actions/trade"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -63,8 +64,10 @@ const filterSchema = z
 type FilterSchema = z.infer<typeof filterSchema>
 
 export default function TradePage() {
+  const router = useRouter()
   const searchParams = useSearchParams()
   const userId = searchParams.get("userId")
+  const userPhone = searchParams.get("phone")
   const [filters, setFilters] = useState<FilterValues>({})
 
   const { control, handleSubmit, reset } = useForm<FilterSchema>({
@@ -106,9 +109,19 @@ export default function TradePage() {
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      {/* 筛选表单 */}
+      <div>
-      <form onSubmit={onFilter} className="bg-white p-4">
+        <Button
+          onClick={() => {
+            router.back()
+          }}
+          className="gap-2"
+        >
+          返回上一级
+        </Button>
+        <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
+      </div>
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="inner_no"
@@ -224,7 +237,7 @@ export default function TradePage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -243,32 +256,17 @@ export default function TradePage() {
         <DataTable<Trade>
           {...table}
           columns={[
+            {
+              header: "创建时间",
+              accessorKey: "created_at",
+              cell: ({ row }) =>
+                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+            },
             {
               header: "订单号",
               accessorKey: "inner_no",
             },
-            {
+            { header: "购买套餐", accessorKey: "subject" },
-              header: "渠道订单号",
-              accessorKey: "outer_no",
-            },
-            {
-              header: "支付渠道",
-              accessorKey: "method",
-              cell: ({ row }) => {
-                const methodMap: Record<number, string> = {
-                  1: "支付宝",
-                  2: "微信",
-                  3: "商福通",
-                  4: "商福通渠道支付宝",
-                  5: "商福通渠道微信",
-                }
-                return (
-                  <div>
-                    {methodMap[row.original.method as number] || "未知"}
-                  </div>
-                )
-              },
-            },
             {
               header: "支付金额",
               accessorKey: "payment",
@@ -290,19 +288,6 @@ export default function TradePage() {
                 )
               },
             },
-            {
-              header: "支付平台",
-              accessorKey: "platform",
-              cell: ({ row }) => {
-                const platform = row.original.platform
-                if (!platform) return <span>-</span>
-                return platform === 1
-                  ? "电脑网站"
-                  : platform === 2
-                    ? "手机网站"
-                    : "-"
-              },
-            },
             {
               header: "支付状态",
               accessorKey: "status",
@@ -335,16 +320,44 @@ export default function TradePage() {
                 }
               },
             },
-            { header: "购买套餐", accessorKey: "subject" },
             {
-              header: "创建时间",
+              header: "支付平台",
-              accessorKey: "created_at",
+              accessorKey: "platform",
-              cell: ({ row }) =>
+              cell: ({ row }) => {
-                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+                const platform = row.original.platform
+                if (!platform) return <span>-</span>
+                return platform === 1
+                  ? "电脑网站"
+                  : platform === 2
+                    ? "手机网站"
+                    : "-"
+              },
+            },
+            {
+              header: "支付渠道",
+              accessorKey: "method",
+              cell: ({ row }) => {
+                const methodMap: Record<number, string> = {
+                  1: "支付宝",
+                  2: "微信",
+                  3: "商福通",
+                  4: "商福通渠道支付宝",
+                  5: "商福通渠道微信",
+                }
+                return (
+                  <div>
+                    {methodMap[row.original.method as number] || "未知"}
+                  </div>
+                )
+              },
+            },
+            {
+              header: "渠道订单号",
+              accessorKey: "outer_no",
             },
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

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

@@ -4,6 +4,7 @@ import { Suspense, useState } from "react"
 import { toast } from "sonner"
 import { deleteCoupon, getPagCoupon } from "@/actions/coupon"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,7 +25,7 @@ export default function CouponPage() {
   const table = useDataTable((page, size) => getPagCoupon({ page, size }))
 
   return (
-    <div className="flex flex-col gap-3">
+    <Page>
       <div className="flex justify-between items-stretch">
         <div className="flex gap-3">
           <CreateDiscount onSuccess={table.refresh} />
@@ -92,7 +93,7 @@ export default function CouponPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }
 

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

@@ -14,6 +14,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog"
 import {
   Field,
@@ -72,16 +73,11 @@ const addUserSchema = z
 export type AddUserFormValues = z.infer<typeof addUserSchema>
 
 interface AddUserDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
   onSuccess?: () => void
 }
 
-export function AddUserDialog({
+export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
-  open,
+  const [open, setOpen] = useState(false)
-  onOpenChange,
-  onSuccess,
-}: AddUserDialogProps) {
   const [isAdding, setIsAdding] = useState(false)
   const [discountList, setDiscountList] = useState<ProductDiscount[]>([])
   const [isLoadingDiscount, setIsLoadingDiscount] = useState(false)
@@ -176,7 +172,7 @@ export function AddUserDialog({
       const result = await createCust(payload)
       if (result?.success) {
         toast.success("添加用户成功")
-        onOpenChange(false)
+        setOpen(false)
         resetAddForm()
         onSuccess?.()
       } else {
@@ -194,11 +190,14 @@ export function AddUserDialog({
     if (!open) {
       resetAddForm()
     }
-    onOpenChange(open)
+    setOpen(open)
   }
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button type="button">添加用户</Button>
+      </DialogTrigger>
       <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>添加用户</DialogTitle>
@@ -396,7 +395,7 @@ export function AddUserDialog({
             <Button
               type="button"
               variant="outline"
-              onClick={() => onOpenChange(false)}
+              onClick={() => setOpen(false)}
             >
               取消
             </Button>

src/app/(root)/cust/deduction.tsx

@@ -14,6 +14,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog"
 import { Field, FieldError, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
@@ -30,18 +31,15 @@ const Schema = z.object({
 type FormValues = z.infer<typeof Schema>
 
 interface UpdateDeductionDialogProps {
-  open: boolean
+  user: User
-  onOpenChange: (open: boolean) => void
-  currentUser: User | null
   onSuccess: () => void
 }
 
 export function DeductionDialog({
-  open,
+  user,
-  onOpenChange,
-  currentUser,
   onSuccess,
 }: UpdateDeductionDialogProps) {
+  const [open, setOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
 
   const {
@@ -58,17 +56,16 @@ export function DeductionDialog({
   })
 
   const onSubmit = async (data: FormValues) => {
-    if (!currentUser) return
     setIsLoading(true)
     try {
       const result = await getDeduction({
-        user_id: currentUser.id,
+        user_id: user.id,
         amount: data.deduction,
       })
 
       if (result.success) {
         toast.success("扣款成功")
-        onOpenChange(false)
+        setOpen(false)
         reset()
         onSuccess()
       } else {
@@ -86,16 +83,19 @@ export function DeductionDialog({
     if (!open) {
       reset()
     }
-    onOpenChange(open)
+    setOpen(open)
   }
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button size="sm">扣款</Button>
+      </DialogTrigger>
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>扣款</DialogTitle>
           <DialogDescription>
-            扣减用户 {currentUser?.name || currentUser?.username} 的余额
+            扣减用户 {user.name || user.username} 的余额
           </DialogDescription>
         </DialogHeader>
 

src/app/(root)/cust/deposit.tsx

@@ -14,6 +14,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog"
 import { Field, FieldError, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
@@ -30,18 +31,12 @@ const Schema = z.object({
 type FormValues = z.infer<typeof Schema>
 
 interface UpdateDepositDialogProps {
-  open: boolean
+  user: User
-  onOpenChange: (open: boolean) => void
-  currentUser: User | null
   onSuccess: () => void
 }
 
-export function DepositDialog({
+export function DepositDialog({ user, onSuccess }: UpdateDepositDialogProps) {
-  open,
+  const [open, setOpen] = useState(false)
-  onOpenChange,
-  currentUser,
-  onSuccess,
-}: UpdateDepositDialogProps) {
   const [isLoading, setIsLoading] = useState(false)
 
   const {
@@ -58,17 +53,16 @@ export function DepositDialog({
   })
 
   const onSubmit = async (data: FormValues) => {
-    if (!currentUser) return
     setIsLoading(true)
     try {
       const result = await getDeposit({
-        user_id: currentUser.id,
+        user_id: user.id,
         amount: data.deposit,
       })
 
       if (result.success) {
         toast.success("充值成功")
-        onOpenChange(false)
+        setOpen(false)
         reset()
         onSuccess()
       } else {
@@ -86,16 +80,19 @@ export function DepositDialog({
     if (!open) {
       reset()
     }
-    onOpenChange(open)
+    setOpen(open)
   }
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button size="sm">充值</Button>
+      </DialogTrigger>
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>充值</DialogTitle>
           <DialogDescription>
-            充值用户 {currentUser?.name || currentUser?.username} 的余额
+            充值用户 {user?.name || user?.username} 的余额
           </DialogDescription>
         </DialogHeader>
 
@@ -104,7 +101,7 @@ export function DepositDialog({
             <Field data-invalid={!!errors.deposit}>
               <FieldLabel>充值（元）</FieldLabel>
               <Input
-                type="text" // 改为 text，避免 number 输入冲突
+                type="text"
                 placeholder="请输入充值金额"
                 {...register("deposit")}
                 onInput={(e: React.ChangeEvent<HTMLInputElement>) => {

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

@@ -9,8 +9,15 @@ import { z } from "zod"
 import { getPageCusts } from "@/actions/cust"
 import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
   Field,
   FieldError,
@@ -80,14 +87,7 @@ type FormValues = z.infer<typeof filterSchema>
 
 export default function CustPage() {
   const [filters, setFilters] = useState<FilterValues>({})
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
-  const [currentEditUser, setCurrentEditUser] = useState<User | null>(null)
-  const [depositDialog, setDepositDialog] = useState(false)
-  const [deposit, setDeposit] = useState<User | null>(null)
   const router = useRouter()
-  const [deductionDialog, setDeductionDialog] = useState(false)
-  const [deduction, setDeduction] = useState<User | null>(null)
   const { control, handleSubmit, reset } = useForm<FormValues>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
@@ -109,8 +109,8 @@ export default function CustPage() {
 
   const onFilter = handleSubmit(data => {
     const result: FilterValues = {}
-    if (data.account) result.account = data.account
+    if (data.account?.trim()) result.account = data.account.trim()
-    if (data.name) result.name = data.name
+    if (data.name?.trim()) result.name = data.name.trim()
     if (data.identified && data.identified !== "all")
       result.identified = data.identified === "1"
     if (data.enabled && data.enabled !== "all")
@@ -124,8 +124,8 @@ export default function CustPage() {
   }, [table])
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="account"
@@ -198,6 +198,7 @@ export default function CustPage() {
               </Field>
             )}
           />
+
           <Controller
             name="created_at_start"
             control={control}
@@ -231,9 +232,7 @@ export default function CustPage() {
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
           <Auth scope={ScopeUserWrite}>
-            <Button type="button" onClick={() => setIsAddDialogOpen(true)}>
+            <AddUserDialog onSuccess={refreshTable} />
-              添加用户
-            </Button>
           </Auth>
           <Button
             type="button"
@@ -246,13 +245,14 @@ export default function CustPage() {
           >
             重置
           </Button>
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
         </FieldGroup>
       </form>
 
       <Suspense>
         <DataTable<User>
           {...table}
+          classNames={{ root: "flex-auto overflow-hidden" }}
           columns={[
             { header: "手机", accessorKey: "phone" },
             {
@@ -361,109 +361,109 @@ export default function CustPage() {
               meta: { pin: "right" },
               header: "操作",
               cell: ({ row }) => {
+                const user = row.original
                 return (
-                  <div className="flex flex-wrap gap-2 w-75">
+                  <div className="flex gap-2">
                     <Auth scope={ScopeUserWriteBalanceInc}>
-                      <Button
+                      <DepositDialog
-                        size="sm"
+                        user={row.original}
-                        onClick={() => {
+                        onSuccess={refreshTable}
-                          setDeposit(row.original)
+                      />
-                          setDepositDialog(true)
-                        }}
-                      >
-                        充值
-                      </Button>
                     </Auth>
+
                     <Auth scope={ScopeUserWriteBalanceDec}>
-                      <Button
+                      <DeductionDialog
-                        size="sm"
+                        user={row.original}
-                        onClick={() => {
+                        onSuccess={refreshTable}
-                          setDeduction(row.original)
+                      />
-                          setDeductionDialog(true)
-                        }}
-                      >
-                        扣款
-                      </Button>
                     </Auth>
+
                     <Auth scope={ScopeUserWriteBalance}>
-                      <Button
+                      <UpdateDialog
-                        size="sm"
+                        user={row.original}
-                        onClick={() => {
+                        onSuccess={refreshTable}
-                          setCurrentEditUser(row.original)
+                      />
-                          setIsEditDialogOpen(true)
-                        }}
-                      >
-                        修改
-                      </Button>
                     </Auth>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button size="sm" variant="outline">
+                          打开菜单
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-8">
                         <Auth scope={ScopeTradeReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
+                            onClick={() =>
-                        onClick={() => {
+                              router.push(
-                          router.push(`/client/trade?userId=${row.original.id}`)
+                                `/client/trade?userId=${user.id}&phone=${user.phone}`,
-                        }}
+                              )
+                            }
                           >
                             交易明细
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+
                         <Auth scope={ScopeBillReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
+                            onClick={() =>
-                        onClick={() => {
                               router.push(
-                            `/client/billing?userId=${row.original.id}`,
+                                `/client/billing?userId=${user.id}&phone=${user.phone}`,
                               )
-                        }}
+                            }
                           >
                             账单详情
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+
                         <Auth scope={ScopeResourceRead}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
+                            onClick={() =>
-                        onClick={() => {
                               router.push(
-                            `/client/resources?userId=${row.original.id}`,
+                                `/client/resources?userId=${user.id}&phone=${user.phone}`,
                               )
-                        }}
+                            }
                           >
                             套餐管理
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+
                         <Auth scope={ScopeBatchReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
+                            onClick={() =>
-                        onClick={() => {
+                              router.push(
-                          router.push(`/client/batch?userId=${row.original.id}`)
+                                `/client/batch?userId=${user.id}&phone=${user.phone}`,
-                        }}
+                              )
+                            }
                           >
                             提取记录
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+
                         <Auth scope={ScopeChannelReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
+                            onClick={() =>
-                        onClick={() => {
                               router.push(
-                            `/client/channel?userId=${row.original.id}`,
+                                `/client/channel?userId=${user.id}&phone=${user.phone}`,
                               )
-                        }}
+                            }
                           >
                             IP管理
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+
                         <Auth scope={ScopeBalanceActivityReadOfUser}>
-                      <Button
+                          <DropdownMenuItem
-                        size="sm"
+                            onClick={() =>
-                        onClick={() => {
                               router.push(
-                            `/client/balance?userId=${row.original.id}&phone=${row.original.phone}`,
+                                `/client/balance?userId=${user.id}&phone=${user.phone}`,
                               )
-                        }}
+                            }
                           >
-                        余额操作
+                            余额明细
-                      </Button>
+                          </DropdownMenuItem>
                         </Auth>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </div>
                 )
               },
@@ -471,32 +471,6 @@ export default function CustPage() {
           ]}
         />
       </Suspense>
-
+    </Page>
-      <AddUserDialog
-        open={isAddDialogOpen}
-        onOpenChange={setIsAddDialogOpen}
-        onSuccess={refreshTable}
-      />
-
-      <UpdateDialog
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        currentUser={currentEditUser}
-        onSuccess={refreshTable}
-      />
-
-      <DepositDialog
-        open={depositDialog}
-        onOpenChange={setDepositDialog}
-        currentUser={deposit}
-        onSuccess={refreshTable}
-      />
-      <DeductionDialog
-        open={deductionDialog}
-        onOpenChange={setDeductionDialog}
-        currentUser={deduction}
-        onSuccess={refreshTable}
-      />
-    </div>
   )
 }

src/app/(root)/cust/update.tsx

@@ -14,6 +14,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog"
 import {
   Field,
@@ -30,8 +31,8 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import type { Admin } from "@/models/admin"
-import type { User } from "@/models/user"
 import type { ProductDiscount } from "@/models/product_discount"
+import type { User } from "@/models/user"
 
 // 表单验证规则
 const editUserSchema = z
@@ -67,18 +68,12 @@ const editUserSchema = z
 export type EditUserFormValues = z.infer<typeof editUserSchema>
 
 interface EditUserDialogProps {
-  open: boolean
+  user: User
-  onOpenChange: (open: boolean) => void
-  currentUser: User | null
   onSuccess: () => void
 }
 
-export function UpdateDialog({
+export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
-  open,
+  const [open, setOpen] = useState(false)
-  onOpenChange,
-  currentUser,
-  onSuccess,
-}: EditUserDialogProps) {
   const [admins, setAdmins] = useState<Admin[]>([])
   const [discounts, setDiscounts] = useState<ProductDiscount[]>([])
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -133,24 +128,21 @@ export function UpdateDialog({
   }, [open])
 
   useEffect(() => {
-    if (currentUser) {
+    if (open) {
       reset({
-        id: currentUser.id,
+        id: user.id,
-        username: currentUser.username,
+        username: user.username,
-        email: currentUser.email || "",
+        email: user.email || "",
         password: "",
         confirmPassword: "",
-        admin_id: currentUser.admin_id ? String(currentUser.admin_id) : "",
+        admin_id: user.admin_id ? String(user.admin_id) : "",
-        discount_id: currentUser.discount_id
+        discount_id: user.discount_id ? String(user.discount_id) : "",
-          ? String(currentUser.discount_id)
+        status: user.status !== undefined ? String(user.status) : "",
-          : "",
+        contact_qq: user.contact_qq || "",
-        status:
+        contact_wechat: user.contact_wechat || "",
-          currentUser.status !== undefined ? String(currentUser.status) : "",
-        contact_qq: currentUser.contact_qq || "",
-        contact_wechat: currentUser.contact_wechat || "",
       })
     }
-  }, [currentUser, reset])
+  }, [open, user, reset])
 
   const onSubmit = async (data: EditUserFormValues) => {
     setIsSubmitting(true)
@@ -194,7 +186,7 @@ export function UpdateDialog({
       const result = await updateCust(updateData)
       if (result?.success) {
         toast.success("修改成功")
-        onOpenChange(false)
+        setOpen(false)
         onSuccess()
       } else {
         toast.error(result?.message || "修改失败")
@@ -213,11 +205,14 @@ export function UpdateDialog({
     if (!open) {
       reset()
     }
-    onOpenChange(open)
+    setOpen(open)
   }
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button size="sm">修改</Button>
+      </DialogTrigger>
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>修改用户</DialogTitle>

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

@@ -7,6 +7,7 @@ import {
   getPageProductDiscount,
 } from "@/actions/product_discount"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -29,7 +30,7 @@ export default function DiscountPage() {
   )
 
   return (
-    <div className="flex flex-col gap-3">
+    <Page>
       {/* 操作栏 */}
       <div className="flex justify-between items-stretch">
         <div className="flex gap-3">
@@ -76,7 +77,7 @@ export default function DiscountPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }
 

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

@@ -0,0 +1,269 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { toast } from "sonner"
+import z from "zod"
+import { createGateway } from "@/actions/gateway"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const schema = z.object({
+  mac: z.string().min(1, "请填写mac地址"),
+  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 的格式",
+      },
+    ),
+  host: z
+    .string()
+    .regex(/^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/, {
+      message: "域名格式不正确，请使用如 example.com 的格式",
+    })
+    .or(z.literal("")),
+  type: z.string().optional(),
+  status: z.string().optional(),
+  secret: z.string().min(1, "请填写密钥"),
+})
+
+export default function CreatePage(props: { onSuccess?: () => void }) {
+  const [open, setOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      mac: "",
+      ip: "",
+      host: "",
+      type: "1",
+      status: "0",
+      secret: "",
+    },
+  })
+
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    setIsLoading(true)
+    try {
+      const payload = {
+        mac: data.mac.trim(),
+        ip: data.ip.trim(),
+        host: data?.host.trim(),
+        type: data.type ? Number(data.type) : 0,
+        status: data.status ? Number(data.status) : 0,
+        secret: data.secret.trim(),
+      }
+
+      const res = await createGateway(payload)
+
+      if (res.success) {
+        toast.success("添加网关成功")
+        setOpen(false)
+        props.onSuccess?.()
+        form.reset()
+      } else {
+        toast.error(res.message || "添加失败")
+      }
+    } catch (error) {
+      console.error("添加网关失败:", error)
+      const message = error instanceof Error ? error.message : error
+      toast.error(`添加失败: ${message}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setOpen(false)
+    form.reset()
+  }
+
+  const statusOptions = [
+    { value: "0", label: "离线" },
+    { value: "1", label: "在线" },
+  ]
+
+  const typeOptions = [
+    { value: "1", label: "自有" },
+    { value: "2", label: "白银" },
+  ]
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={newOpen => {
+        setOpen(newOpen)
+        if (!newOpen) {
+          form.reset()
+        }
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button>添加网关</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>添加网关</DialogTitle>
+        </DialogHeader>
+
+        <form id="gateway-create" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              control={form.control}
+              name="mac"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="gateway-create-mac">标识:</FieldLabel>
+                  <Input
+                    id="gateway-create-mac"
+                    placeholder="请输入MAC地址，如：00:11:22:33:44:55"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="ip"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="gateway-create-ip">IP地址:</FieldLabel>
+                  <Input
+                    id="gateway-create-ip"
+                    placeholder="请输入IP地址，如：192.168.1.1"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="host"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="gateway-create-host">域名:</FieldLabel>
+                  <Input
+                    id="gateway-create-host"
+                    placeholder="请输入域名，如：example.com"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="secret"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="gateway-create-secret">密匙:</FieldLabel>
+                  <Input
+                    id="gateway-create-secret"
+                    placeholder="请输入密匙"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="type"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel>类型</FieldLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="w-full h-9">
+                      <SelectValue placeholder="请选择网关类型" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {typeOptions.map(option => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {fieldState.invalid && fieldState.error && (
+                    <FieldError>{fieldState.error?.message}</FieldError>
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="status"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel>状态</FieldLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="w-full h-9">
+                      <SelectValue placeholder="请选择网关状态" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {statusOptions.map(option => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {fieldState.invalid && fieldState.error && (
+                    <FieldError>{fieldState.error?.message}</FieldError>
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+        </form>
+
+        <DialogFooter className="gap-2">
+          <Button variant="ghost" onClick={handleCancel} disabled={isLoading}>
+            取消
+          </Button>
+          <Button type="submit" form="gateway-create" disabled={isLoading}>
+            {isLoading ? "添加中..." : "添加"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,112 @@
+"use client"
+
+import { format } from "date-fns"
+import { Suspense, useCallback, useState } from "react"
+import { toast } from "sonner"
+import { getGatewayPage, updateGateway } from "@/actions/gateway"
+import { Auth } from "@/components/auth"
+import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
+import { Button } from "@/components/ui/button"
+import { ScopeProxyWrite } from "@/lib/scopes"
+import type { Gateway } from "@/models/gateway"
+import CreatePage from "./create"
+
+export default function GatewayPage() {
+  const [loading, setLoading] = useState(false)
+
+  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) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`操作失败: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+  return (
+    <Page>
+      <Auth scope={ScopeProxyWrite}>
+        <div className="flex justify-between items-stretch">
+          <div className="flex gap-3">
+            <CreatePage onSuccess={table.refresh} />
+          </div>
+        </div>
+      </Auth>
+      <Suspense>
+        <DataTable<Gateway>
+          {...table}
+          status={loading ? "load" : "done"}
+          columns={[
+            {
+              header: "域名",
+              accessorKey: "host",
+            },
+            { header: "IP地址", accessorKey: "ip" },
+            {
+              header: "MAC地址",
+              accessorKey: "mac",
+            },
+            {
+              header: "密钥",
+              accessorKey: "secret",
+            },
+            {
+              header: "类型",
+              accessorKey: "type",
+              cell: ({ row }) => (row.original.type === 1 ? "自有" : "白银"),
+            },
+            {
+              header: "状态",
+              accessorKey: "status",
+              cell: ({ row }) => (row.original.status === 0 ? "离线" : "在线"),
+            },
+            {
+              header: "创建时间",
+              accessorKey: "created_at",
+              cell: ({ row }) =>
+                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+            },
+            {
+              id: "action",
+              meta: { pin: "right" },
+              header: "操作",
+              cell: ({ row }) => (
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() =>
+                      handleToggle(row.original.id, row.original.status)
+                    }
+                    disabled={loading}
+                    variant={
+                      row.original.status === 0 ? "default" : "destructive"
+                    }
+                  >
+                    {row.original.status === 0 ? "启用" : "停用"}
+                  </Button>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Suspense>
+    </Page>
+  )
+}

src/app/(root)/layout.tsx

@@ -32,7 +32,7 @@ async function Layout(props: { children: ReactNode }) {
         <Appbar admin={profile.data} />
 
         {/* 内容区域 */}
-        <main className="flex-1 overflow-auto p-6">{props.children}</main>
+        <main className="flex-auto overflow-hidden">{props.children}</main>
       </div>
     </div>
   )

src/app/(root)/navigation.tsx

@@ -9,6 +9,7 @@ import {
   ComputerIcon,
   ContactRound,
   DollarSign,
+  DoorClosedIcon,
   FolderCode,
   Home,
   KeyRound,
@@ -46,6 +47,7 @@ import {
   ScopeDiscountRead,
   ScopePermissionRead,
   ScopeProductRead,
+  ScopeProxyRead,
   ScopeResourceRead,
   ScopeTradeRead,
   ScopeUserRead,
@@ -249,6 +251,12 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
   {
     title: "系统",
     items: [
+      {
+        href: "/gateway",
+        icon: DoorClosedIcon,
+        label: "网关列表",
+        requiredScope:ScopeProxyRead
+      },
       {
         href: "/admin",
         icon: Shield,

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

@@ -9,6 +9,7 @@ import { Copy } from "lucide-react"
 import { Suspense, useCallback, useEffect, useState } from "react"
 import { toast } from "sonner"
 import { getAllPermissions } from "@/actions/permission"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Table,
@@ -57,9 +58,11 @@ function generateScopeCode(roots: Node[]): string {
 
 export default function PermissionsPage() {
   return (
+    <Page>
       <Suspense>
         <PermissionTable />
       </Suspense>
+    </Page>
   )
 }
 
@@ -136,7 +139,7 @@ function PermissionTable() {
   }, [data])
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3 overflow-auto">
       {process.env.NODE_ENV === "development" && (
         <div>
           <Button variant="outline" size="sm" onClick={handleCopy}>
@@ -145,9 +148,9 @@ function PermissionTable() {
           </Button>
         </div>
       )}
-      <Table className="bg-background rounded-lg">
+      <Table>
         <TableHeader>
-          <TableRow className="h-10">
+          <TableRow className="h-10 sticky top-0 bg-background">
             <TableHead>编码</TableHead>
             <TableHead>描述</TableHead>
           </TableRow>

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

@@ -34,7 +34,8 @@ import {
 import type { ProductDiscount } from "@/models/product_discount"
 import type { SelectedProduct } from "./type"
 
-const schema = z.object({
+const schema = z
+  .object({
     code: z.string().min(1, "请输入套餐编码"),
     name: z.string().min(1, "请输入套餐名称"),
     price: z
@@ -45,15 +46,27 @@ const schema = z.object({
         "请输入有效的正数单价",
       ),
     discount_id: z.string().optional(),
+    count_min: z.string().min(1, "请输入最低购买数量"),
     price_min: z
       .string()
-    .optional()
+      .min(1, "请输入最低价格")
-    .or(z.literal(""))
       .refine(
-      v => !v || (!Number.isNaN(Number(v)) && Number(v) > 0),
+        v => !Number.isNaN(Number(v)) && Number(v) > 0,
         "请输入有效的正数价格",
       ),
-})
+  })
+  .refine(
+    data => {
+      const price = Number(data.price)
+      const priceMin = Number(data.price_min)
+      if (isNaN(price) || isNaN(priceMin)) return true
+      return price >= priceMin
+    },
+    {
+      message: "单价不能低于最低价格",
+      path: ["price"],
+    },
+  )
 
 export function CreateProductSku(props: {
   product?: SelectedProduct
@@ -159,9 +172,9 @@ export function CreateProductSku(props: {
               name="price"
               render={({ field, fieldState }) => (
                 <Field>
-                  <FieldLabel htmlFor="sku-create-price">单价</FieldLabel>
+                  <FieldLabel htmlFor="sku-update-price">单价</FieldLabel>
                   <Input
-                    id="sku-create-price"
+                    id="sku-update-price"
                     placeholder="请输入单价"
                     {...field}
                     aria-invalid={fieldState.invalid}
@@ -172,7 +185,6 @@ export function CreateProductSku(props: {
                 </Field>
               )}
             />
-
             <Controller
               control={form.control}
               name="price_min"
@@ -181,7 +193,27 @@ export function CreateProductSku(props: {
                   <FieldLabel htmlFor="sku-create-price">最低价格</FieldLabel>
                   <Input
                     id="sku-create-price"
-                    placeholder="请输入单价"
+                    placeholder="请输入最低价格"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="count_min"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="sku-create-price">
+                    最低购买数量
+                  </FieldLabel>
+                  <Input
+                    id="sku-create-price"
+                    placeholder="请输入最低购买数量"
                     {...field}
                     aria-invalid={fieldState.invalid}
                   />
@@ -191,7 +223,6 @@ export function CreateProductSku(props: {
                 </Field>
               )}
             />
-
             <Controller
               control={form.control}
               name="discount_id"

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

@@ -10,6 +10,7 @@ import {
   getPageProductSku,
 } from "@/actions/product"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { SkuCodeBadge } from "@/components/products/format"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -28,10 +29,10 @@ export default function ProductPage() {
   )
 
   return (
-    <div className="size-full flex gap-6 items-stretch">
+    <Page className="flex-row items-stretch">
       <Products selected={selected} onSelect={setSelected} />
       <ProductSkus selected={selected} />
-    </div>
+    </Page>
   )
 }
 
@@ -57,7 +58,7 @@ function Products(props: {
   }, [refresh])
 
   return (
-    <section className="flex-none basis-64 bg-background rounded-lg">
+    <section className="flex-none basis-50 bg-background rounded-lg">
       <header className="pl-3 pr-1 h-10 border-b flex items-center justify-between">
         <h3 className="text-sm">产品列表</h3>
       </header>
@@ -98,7 +99,6 @@ function ProductSkus(props: {
   )
 
   const table = useDataTable(action)
-  console.log(table, "table")
 
   return (
     <div className="flex-auto overflow-hidden flex flex-col items-stretch gap-3">
@@ -129,18 +129,19 @@ function ProductSkus(props: {
                 ),
             },
             { header: "套餐名称", accessorKey: "name" },
-            { header: "单价", accessorFn: row => Number(row.price).toFixed(2) },
+            { header: "单价", accessorFn: row => Number(row.price) },
             { header: "折扣", accessorFn: row => row.discount?.name ?? "—" },
             {
-              header: "最终价格",
+              header: "折后价",
               accessorFn: row => {
                 const value = row.discount
                   ? (Number(row.price) * Number(row.discount.discount)) / 100
                   : Number(row.price)
-                return Number(value.toFixed(2))
+                return Number(value)
               },
             },
             { header: "最低价格", accessorKey: "price_min" },
+            { header: "最低购买数量", accessorKey: "count_min" },
             {
               header: "创建时间",
               accessorFn: row => format(row.created_at, "yyyy-MM-dd HH:mm"),

src/app/(root)/product/update.tsx

@@ -34,7 +34,8 @@ import {
 import type { ProductDiscount } from "@/models/product_discount"
 import type { ProductSku } from "@/models/product_sku"
 
-const schema = z.object({
+const schema = z
+  .object({
     code: z.string().min(1, "请输入套餐编码"),
     name: z.string().min(1, "请输入套餐名称"),
     price: z
@@ -45,6 +46,16 @@ const schema = z.object({
         "请输入有效的正数单价",
       ),
     discount_id: z.string().optional(),
+    count_min: z
+      .string()
+      .min(1, "请输入最低购买数量")
+      .refine(
+        v =>
+          !Number.isNaN(Number(v)) &&
+          Number.isInteger(Number(v)) &&
+          Number(v) > 0,
+        "请输入有效的正整数",
+      ),
     price_min: z
       .string()
       .min(1, "请输入最低价格")
@@ -52,7 +63,19 @@ const schema = z.object({
         v => !Number.isNaN(Number(v)) && Number(v) > 0,
         "请输入有效的正数价格",
       ),
-})
+  })
+  .refine(
+    data => {
+      const price = Number(data.price)
+      const priceMin = Number(data.price_min)
+      if (isNaN(price) || isNaN(priceMin)) return true
+      return price >= priceMin
+    },
+    {
+      message: "单价不能低于最低价格",
+      path: ["price"],
+    },
+  )
 
 export function UpdateProductSku(props: {
   sku: ProductSku
@@ -69,6 +92,7 @@ export function UpdateProductSku(props: {
       price: props.sku.price,
       discount_id: props.sku.discount ? String(props.sku.discount.id) : "",
       price_min: props.sku.price_min ?? "",
+      count_min: String(props.sku.count_min),
     },
   })
 
@@ -83,8 +107,6 @@ export function UpdateProductSku(props: {
   }, [open])
 
   const onSubmit = async (data: z.infer<typeof schema>) => {
-    console.log(data, "data")
-
     try {
       const resp = await updateProductSku({
         id: props.sku.id,
@@ -96,19 +118,8 @@ export function UpdateProductSku(props: {
             ? Number(data.discount_id)
             : null,
         price_min: data.price_min,
+        count_min: Number(data.count_min),
       })
-      console.log({
-        id: props.sku.id,
-        code: data.code,
-        name: data.name,
-        price: data.price,
-        discount_id:
-          data.discount_id && data.discount_id !== ""
-            ? Number(data.discount_id)
-            : null,
-        price_min: data.price_min,
-      })
-
       console.log(resp, "resp")
 
       if (resp.success) {
@@ -132,6 +143,7 @@ export function UpdateProductSku(props: {
         price: props.sku.price,
         discount_id: props.sku.discount ? String(props.sku.discount.id) : "",
         price_min: props.sku.price_min ?? "",
+        count_min: props.sku.count_min ? String(props.sku.count_min) : "",
       })
     }
     setOpen(value)
@@ -194,9 +206,11 @@ export function UpdateProductSku(props: {
               name="price_min"
               render={({ field, fieldState }) => (
                 <Field>
-                  <FieldLabel htmlFor="sku-create-price">最低价格</FieldLabel>
+                  <FieldLabel htmlFor="sku-update-price-min">
+                    最低价格
+                  </FieldLabel>
                   <Input
-                    id="sku-create-price"
+                    id="sku-update-price-min"
                     placeholder="请输入最低价格"
                     {...field}
                     aria-invalid={fieldState.invalid}
@@ -207,6 +221,26 @@ export function UpdateProductSku(props: {
                 </Field>
               )}
             />
+            <Controller
+              control={form.control}
+              name="count_min"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="sku-update-count-min">
+                    最低购买数量
+                  </FieldLabel>
+                  <Input
+                    id="sku-update-count-min"
+                    placeholder="请输入最低购买数量"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
             <Controller
               control={form.control}
               name="discount_id"

src/app/(root)/proxy/nodes/page.tsx

@@ -1,625 +0,0 @@
-"use client"
-import Link from "next/link"
-import { useEffect, useState } from "react"
-
-// 定义节点数据接口
-interface ProxyNode {
-  id: string
-  ipAddress: string
-  location: {
-    country: string
-    region: string
-  }
-  type: string
-  status: "online" | "offline" | "warning"
-  responseTime: number
-  lastCheckTime: string
-  pool: string
-  isStatic: boolean
-}
-
-export type ProxyNodesPageProps = {}
-
-export default function ProxyNodesPage(props: ProxyNodesPageProps) {
-  const [loading, setLoading] = useState<boolean>(true)
-
-  const [nodes, setNodes] = useState<ProxyNode[]>([])
-  const [searchTerm, setSearchTerm] = useState<string>("")
-  const [filterStatus, setFilterStatus] = useState<string>("all")
-  const [filterType, setFilterType] = useState<string>("all")
-  const [filterPool, setFilterPool] = useState<string>("all")
-
-  // 模拟数据加载
-  useEffect(() => {
-    setTimeout(() => {
-      setNodes([
-        {
-          id: "ip-1",
-          ipAddress: "203.45.167.82",
-          location: { country: "美国", region: "纽约" },
-          type: "数据中心",
-          status: "online",
-          responseTime: 126,
-          lastCheckTime: "2024-05-10 15:30:22",
-          pool: "北美专用池",
-          isStatic: true,
-        },
-        {
-          id: "ip-2",
-          ipAddress: "185.72.193.54",
-          location: { country: "德国", region: "法兰克福" },
-          type: "住宅",
-          status: "online",
-          responseTime: 158,
-          lastCheckTime: "2024-05-10 15:28:45",
-          pool: "欧洲高速池",
-          isStatic: false,
-        },
-        {
-          id: "ip-3",
-          ipAddress: "118.96.244.105",
-          location: { country: "新加坡", region: "中心区" },
-          type: "移动",
-          status: "warning",
-          responseTime: 312,
-          lastCheckTime: "2024-05-10 15:25:12",
-          pool: "亚太地区池",
-          isStatic: false,
-        },
-        {
-          id: "ip-4",
-          ipAddress: "45.178.29.6",
-          location: { country: "加拿大", region: "多伦多" },
-          type: "数据中心",
-          status: "online",
-          responseTime: 143,
-          lastCheckTime: "2024-05-10 15:23:08",
-          pool: "北美专用池",
-          isStatic: false,
-        },
-        {
-          id: "ip-5",
-          ipAddress: "79.114.83.201",
-          location: { country: "英国", region: "伦敦" },
-          type: "住宅",
-          status: "offline",
-          responseTime: 0,
-          lastCheckTime: "2024-05-10 15:18:33",
-          pool: "欧洲高速池",
-          isStatic: false,
-        },
-        {
-          id: "ip-6",
-          ipAddress: "164.83.219.47",
-          location: { country: "日本", region: "东京" },
-          type: "住宅",
-          status: "online",
-          responseTime: 87,
-          lastCheckTime: "2024-05-10 15:15:21",
-          pool: "亚太地区池",
-          isStatic: true,
-        },
-        {
-          id: "ip-7",
-          ipAddress: "221.67.93.143",
-          location: { country: "中国", region: "上海" },
-          type: "移动",
-          status: "online",
-          responseTime: 104,
-          lastCheckTime: "2024-05-10 15:10:46",
-          pool: "亚太地区池",
-          isStatic: false,
-        },
-        {
-          id: "ip-8",
-          ipAddress: "37.209.148.72",
-          location: { country: "法国", region: "巴黎" },
-          type: "数据中心",
-          status: "warning",
-          responseTime: 276,
-          lastCheckTime: "2024-05-10 15:05:19",
-          pool: "欧洲高速池",
-          isStatic: false,
-        },
-      ])
-      setLoading(false)
-    }, 800)
-  }, [])
-
-  // 过滤节点数据
-  const filteredNodes = nodes.filter(node => {
-    return (
-      (searchTerm === "" ||
-        node.ipAddress.includes(searchTerm) ||
-        node.location.country.includes(searchTerm) ||
-        node.pool.includes(searchTerm)) &&
-      (filterStatus === "all" ||
-        (filterStatus === "online" && node.status === "online") ||
-        (filterStatus === "offline" && node.status === "offline") ||
-        (filterStatus === "warning" && node.status === "warning")) &&
-      (filterType === "all" || node.type === filterType) &&
-      (filterPool === "all" || node.pool === filterPool)
-    )
-  })
-
-  return (
-    <div className="space-y-5">
-      {/* 概览区域 - 使用色块和留白风格 */}
-      <div className="border border-gray-200 rounded-lg overflow-hidden">
-        {/* 标题区域 - 简洁风格 */}
-        <div className="bg-white px-5 py-4">
-          <div className="flex justify-between items-center">
-            <h1 className="text-lg font-bold text-gray-900">节点列表</h1>
-            <div className="flex gap-2">
-              <button className="bg-gray-50 border border-gray-200 text-gray-700 px-3 py-1.5 rounded-md text-sm font-medium flex items-center hover:bg-gray-100">
-                <svg
-                  className="w-4 h-4 mr-1"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-                  />
-                </svg>
-                导出
-              </button>
-              <button className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center">
-                <svg
-                  className="w-4 h-4 mr-1"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-                  />
-                </svg>
-                添加节点
-              </button>
-            </div>
-          </div>
-          <p className="mt-1 text-sm text-gray-500">
-            查看和管理所有代理IP资源，支持多维度筛选
-          </p>
-        </div>
-
-        {/* 统计信息区域 - 色块风格 */}
-        <div className="grid grid-cols-4 gap-px bg-gray-100">
-          {/* 总IP数量 */}
-          <div className="bg-white p-4">
-            <div className="flex items-center">
-              <div className="w-10 h-10 flex items-center justify-center bg-blue-50 rounded-md">
-                <svg
-                  className="h-5 w-5 text-blue-600"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"
-                  />
-                </svg>
-              </div>
-              <div className="ml-3">
-                <p className="text-xs font-medium text-gray-500">总IP数量</p>
-                <div className="text-lg font-semibold text-gray-900">
-                  152,487
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 在线IP */}
-          <div className="bg-white p-4">
-            <div className="flex items-center">
-              <div className="w-10 h-10 flex items-center justify-center bg-green-50 rounded-md">
-                <svg
-                  className="h-5 w-5 text-green-600"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </div>
-              <div className="ml-3">
-                <div className="flex items-center">
-                  <p className="text-xs font-medium text-gray-500">在线IP</p>
-                  <span className="ml-2 text-xs font-medium text-green-600">
-                    91%
-                  </span>
-                </div>
-                <div className="text-lg font-semibold text-gray-900">
-                  138,954
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* IP池分布 */}
-          <div className="bg-white p-4">
-            <div className="flex items-center">
-              <div className="w-10 h-10 flex items-center justify-center bg-indigo-50 rounded-md">
-                <svg
-                  className="h-5 w-5 text-indigo-600"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                  />
-                </svg>
-              </div>
-              <div className="ml-3">
-                <div className="flex items-center">
-                  <p className="text-xs font-medium text-gray-500">IP池分布</p>
-                  <span className="ml-2 text-xs font-medium text-gray-500">
-                    5个地区
-                  </span>
-                </div>
-                <div className="text-lg font-semibold text-gray-900">12</div>
-              </div>
-            </div>
-          </div>
-
-          {/* 异常IP */}
-          <div className="bg-white p-4">
-            <div className="flex items-center">
-              <div className="w-10 h-10 flex items-center justify-center bg-red-50 rounded-md">
-                <svg
-                  className="h-5 w-5 text-red-600"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
-              </div>
-              <div className="ml-3">
-                <div className="flex items-center">
-                  <p className="text-xs font-medium text-gray-500">异常IP</p>
-                  <span className="ml-2 text-xs font-medium text-red-600">
-                    需检查
-                  </span>
-                </div>
-                <div className="text-lg font-semibold text-gray-900">1,205</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* 数据展示 */}
-      <div className="border border-gray-200 rounded-lg overflow-hidden">
-        {/* 筛选搜索区域 */}
-        <div className="bg-white p-4 border-b border-gray-200">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
-            {/* 搜索框 */}
-            <div className="relative md:col-span-5">
-              <input
-                type="text"
-                placeholder="搜索IP地址、地区或标签..."
-                className="w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
-              />
-              <svg
-                className="absolute right-3 top-2.5 h-4 w-4 text-gray-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                />
-              </svg>
-            </div>
-
-            {/* 筛选区域 */}
-            <div className="flex space-x-3 md:col-span-7">
-              <select
-                className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
-                value={filterStatus}
-                onChange={e => setFilterStatus(e.target.value)}
-              >
-                <option value="all">全部状态</option>
-                <option value="online">在线</option>
-                <option value="offline">离线</option>
-                <option value="warning">异常</option>
-              </select>
-
-              <select
-                className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
-                value={filterType}
-                onChange={e => setFilterType(e.target.value)}
-              >
-                <option value="all">全部类型</option>
-                <option value="数据中心">数据中心</option>
-                <option value="住宅">住宅</option>
-                <option value="移动">移动</option>
-              </select>
-
-              <select
-                className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
-                value={filterPool}
-                onChange={e => setFilterPool(e.target.value)}
-              >
-                <option value="all">全部池</option>
-                <option value="北美专用池">北美专用池</option>
-                <option value="欧洲高速池">欧洲高速池</option>
-                <option value="亚太地区池">亚太地区池</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {/* IP表格区域 */}
-        {loading ? (
-          <div className="p-12 flex justify-center items-center bg-white">
-            <svg
-              className="animate-spin h-6 w-6 text-blue-600"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              ></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-          </div>
-        ) : (
-          <div className="overflow-x-auto bg-white">
-            <table className="min-w-full">
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    IP地址
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    位置
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    类型
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    状态
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    响应时间
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    所属池
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
-                  >
-                    操作
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                {filteredNodes.map((node, index) => (
-                  <tr
-                    key={node.id}
-                    className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}
-                  >
-                    <td className="px-4 py-3 whitespace-nowrap text-sm">
-                      <div className="flex items-center">
-                        <span
-                          className={`w-2 h-2 rounded-full mr-2 ${
-                            node.status === "online"
-                              ? "bg-green-500"
-                              : node.status === "offline"
-                                ? "bg-red-500"
-                                : "bg-yellow-500"
-                          }`}
-                        ></span>
-                        <span className="font-medium text-gray-900">
-                          {node.ipAddress}
-                        </span>
-                        {node.isStatic && (
-                          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                            静态
-                          </span>
-                        )}
-                      </div>
-                    </td>
-
-                    <td className="px-4 py-3 whitespace-nowrap text-sm">
-                      <div className="text-gray-900">
-                        {node.location.country}
-                      </div>
-                      <div className="text-xs text-gray-500">
-                        {node.location.region}
-                      </div>
-                    </td>
-
-                    <td className="px-4 py-3 whitespace-nowrap">
-                      <span
-                        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                          node.type === "数据中心"
-                            ? "bg-purple-100 text-purple-800"
-                            : node.type === "住宅"
-                              ? "bg-blue-100 text-blue-800"
-                              : "bg-indigo-100 text-indigo-800"
-                        }`}
-                      >
-                        {node.type}
-                      </span>
-                    </td>
-
-                    <td className="px-4 py-3 whitespace-nowrap text-sm">
-                      <span
-                        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                          node.status === "online"
-                            ? "bg-green-100 text-green-800"
-                            : node.status === "offline"
-                              ? "bg-red-100 text-red-800"
-                              : "bg-yellow-100 text-yellow-800"
-                        }`}
-                      >
-                        {node.status === "online"
-                          ? "在线"
-                          : node.status === "offline"
-                            ? "离线"
-                            : "异常"}
-                      </span>
-                    </td>
-
-                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
-                      {node.responseTime > 0 ? (
-                        <div className="flex items-center">
-                          <span
-                            className={`font-medium ${
-                              node.responseTime < 150
-                                ? "text-green-600"
-                                : node.responseTime < 250
-                                  ? "text-yellow-600"
-                                  : "text-red-600"
-                            }`}
-                          >
-                            {node.responseTime} ms
-                          </span>
-                        </div>
-                      ) : (
-                        <span className="text-gray-400">-</span>
-                      )}
-                    </td>
-
-                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
-                      {node.pool}
-                    </td>
-
-                    <td className="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-2">
-                      <Link
-                        href={`/proxy/nodes/${node.id}`}
-                        className="text-blue-600 hover:text-blue-900"
-                      >
-                        详情
-                      </Link>
-                      <button className="text-gray-600 hover:text-gray-900">
-                        编辑
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-
-        {/* 分页控制 */}
-        <div className="bg-gray-50 px-5 py-3 border-t border-gray-200">
-          <div className="flex items-center justify-between">
-            <div className="text-sm text-gray-700">
-              显示 <span className="font-medium">1</span> 至{" "}
-              <span className="font-medium">8</span> 条，共{" "}
-              <span className="font-medium">152,487</span> 条结果
-            </div>
-            <div>
-              <nav className="relative z-0 inline-flex -space-x-px">
-                <button className="relative inline-flex items-center px-2 py-1.5 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
-                  <svg
-                    className="h-4 w-4"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-                <button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium hover:bg-gray-50 text-blue-600 bg-blue-50 border-blue-300">
-                  1
-                </button>
-                <button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
-                  2
-                </button>
-                <button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
-                  3
-                </button>
-                <span className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700">
-                  ...
-                </span>
-                <button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
-                  152
-                </button>
-                <button className="relative inline-flex items-center px-2 py-1.5 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
-                  <svg
-                    className="h-4 w-4"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </nav>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/app/(root)/proxy/pools/page.tsx

@@ -1,527 +0,0 @@
-"use client"
-import Link from "next/link"
-import { useEffect, useState } from "react"
-
-export type ProxyPoolsPageProps = {}
-
-// 定义IP池接口
-interface ProxyPool {
-  id: string
-  name: string
-  description: string
-  ips: number
-  activeIps: number
-  region: string
-  type: string
-  createdAt: string
-  status: "active" | "inactive" | "maintenance"
-}
-
-export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
-  const [pools, setPools] = useState<ProxyPool[]>([])
-  const [loading, setLoading] = useState<boolean>(true)
-  const [searchTerm, setSearchTerm] = useState<string>("")
-  const [filterStatus, setFilterStatus] = useState<string>("all")
-  const [filterRegion, setFilterRegion] = useState<string>("all")
-
-  // 模拟数据加载
-  useEffect(() => {
-    // 实际项目中替换为API调用
-    setTimeout(() => {
-      setPools([
-        {
-          id: "pool-1",
-          name: "全球通用池",
-          description: "包含全球多个地区的高质量IP",
-          ips: 5000,
-          activeIps: 4328,
-          region: "全球",
-          type: "住宅IP",
-          createdAt: "2023-10-15",
-          status: "active",
-        },
-        {
-          id: "pool-2",
-          name: "北美专用池",
-          description: "美国和加拿大地区专用IP池",
-          ips: 3200,
-          activeIps: 2950,
-          region: "北美",
-          type: "数据中心IP",
-          createdAt: "2023-11-02",
-          status: "active",
-        },
-        {
-          id: "pool-3",
-          name: "欧洲高速池",
-          description: "欧洲地区高速稳定IP",
-          ips: 2800,
-          activeIps: 2180,
-          region: "欧洲",
-          type: "住宅IP",
-          createdAt: "2023-09-28",
-          status: "active",
-        },
-        {
-          id: "pool-4",
-          name: "亚太地区池",
-          description: "亚洲和太平洋地区IP",
-          ips: 4200,
-          activeIps: 3890,
-          region: "亚太",
-          type: "移动IP",
-          createdAt: "2023-12-05",
-          status: "maintenance",
-        },
-        {
-          id: "pool-5",
-          name: "电商专用池",
-          description: "适用于电商平台的IP池",
-          ips: 1500,
-          activeIps: 1200,
-          region: "全球",
-          type: "住宅IP",
-          createdAt: "2024-01-10",
-          status: "inactive",
-        },
-      ])
-      setLoading(false)
-    }, 800)
-  }, [])
-
-  // 过滤IP池
-  const filteredPools = pools.filter(pool => {
-    return (
-      (searchTerm === "" ||
-        pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        pool.description.toLowerCase().includes(searchTerm.toLowerCase())) &&
-      (filterStatus === "all" || pool.status === filterStatus) &&
-      (filterRegion === "all" || pool.region === filterRegion)
-    )
-  })
-
-  // 获取状态颜色和文本
-  const getStatusInfo = (status: string) => {
-    switch (status) {
-      case "active":
-        return { color: "bg-green-100 text-green-800", text: "运行中" }
-      case "inactive":
-        return { color: "bg-gray-100 text-gray-800", text: "未启用" }
-      case "maintenance":
-        return { color: "bg-yellow-100 text-yellow-800", text: "维护中" }
-      default:
-        return { color: "bg-gray-100 text-gray-800", text: "未知" }
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* 页面标题 */}
-      <div className="flex justify-between items-center">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">IP池管理</h1>
-          <p className="mt-1 text-sm text-gray-500">管理和配置代理IP池</p>
-        </div>
-        <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
-          <svg
-            className="w-4 h-4 mr-2"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-            />
-          </svg>
-          创建新IP池
-        </button>
-      </div>
-
-      {/* 筛选和搜索工具栏 */}
-      <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-          <div className="relative">
-            <input
-              type="text"
-              placeholder="搜索IP池..."
-              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-              value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
-            />
-            <svg
-              className="absolute right-3 top-2.5 h-5 w-5 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
-          </div>
-
-          <div className="flex space-x-4">
-            <div className="w-full">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                状态
-              </label>
-              <select
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-                value={filterStatus}
-                onChange={e => setFilterStatus(e.target.value)}
-              >
-                <option value="all">全部状态</option>
-                <option value="active">运行中</option>
-                <option value="inactive">未启用</option>
-                <option value="maintenance">维护中</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="w-full">
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              地区
-            </label>
-            <select
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-              value={filterRegion}
-              onChange={e => setFilterRegion(e.target.value)}
-            >
-              <option value="all">全部地区</option>
-              <option value="全球">全球</option>
-              <option value="北美">北美</option>
-              <option value="欧洲">欧洲</option>
-              <option value="亚太">亚太</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      {/* IP池列表 */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        {loading ? (
-          <div className="p-8 flex justify-center">
-            <svg
-              className="animate-spin h-8 w-8 text-blue-600"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              ></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-          </div>
-        ) : filteredPools.length === 0 ? (
-          <div className="p-8 text-center">
-            <svg
-              className="mx-auto h-12 w-12 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <p className="mt-4 text-gray-500 text-lg">没有找到匹配的IP池</p>
-          </div>
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    IP池名称
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    IP概况
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    地区
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    IP类型
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    状态
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    创建日期
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    操作
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {filteredPools.map(pool => {
-                  const statusInfo = getStatusInfo(pool.status)
-                  return (
-                    <tr key={pool.id} className="hover:bg-gray-50">
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div>
-                            <div className="text-sm font-medium text-gray-900">
-                              {pool.name}
-                            </div>
-                            <div className="text-sm text-gray-500 max-w-xs truncate">
-                              {pool.description}
-                            </div>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="text-sm text-gray-900">
-                          总IP: {pool.ips.toLocaleString()}
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          活跃IP: {pool.activeIps.toLocaleString()}
-                        </div>
-                        <div className="w-full bg-gray-200 rounded-full h-1.5 mt-1.5">
-                          <div
-                            className="bg-blue-600 h-1.5 rounded-full"
-                            style={{
-                              width: `${(pool.activeIps / pool.ips) * 100}%`,
-                            }}
-                          ></div>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="text-sm text-gray-900">
-                          {pool.region}
-                        </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="text-sm text-gray-900">{pool.type}</div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <span
-                          className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusInfo.color}`}
-                        >
-                          {statusInfo.text}
-                        </span>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        {pool.createdAt}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <Link
-                          href={`/proxy/pools/${pool.id}`}
-                          className="text-blue-600 hover:text-blue-900 mr-4"
-                        >
-                          详情
-                        </Link>
-                        <Link
-                          href={`/proxy/pools/${pool.id}/edit`}
-                          className="text-indigo-600 hover:text-indigo-900 mr-4"
-                        >
-                          编辑
-                        </Link>
-                        <button className="text-red-600 hover:text-red-900">
-                          删除
-                        </button>
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      {/* 数据卡片概览 */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-          <div className="flex items-center">
-            <div className="p-3 rounded-full bg-blue-100 text-blue-600">
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
-                />
-              </svg>
-            </div>
-            <div className="ml-4">
-              <h3 className="text-lg font-medium text-gray-900">总IP池</h3>
-              <div className="mt-1 text-3xl font-semibold">{pools.length}</div>
-            </div>
-          </div>
-          <div className="mt-4">
-            <div className="flex justify-between text-sm">
-              <span className="text-gray-500">活跃IP池</span>
-              <span className="font-medium text-gray-900">
-                {pools.filter(p => p.status === "active").length}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-          <div className="flex items-center">
-            <div className="p-3 rounded-full bg-green-100 text-green-600">
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </div>
-            <div className="ml-4">
-              <h3 className="text-lg font-medium text-gray-900">总IP数量</h3>
-              <div className="mt-1 text-3xl font-semibold">
-                {pools
-                  .reduce((sum, pool) => sum + pool.ips, 0)
-                  .toLocaleString()}
-              </div>
-            </div>
-          </div>
-          <div className="mt-4">
-            <div className="flex justify-between text-sm">
-              <span className="text-gray-500">活跃IP</span>
-              <span className="font-medium text-gray-900">
-                {pools
-                  .reduce((sum, pool) => sum + pool.activeIps, 0)
-                  .toLocaleString()}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-          <div className="flex items-center">
-            <div className="p-3 rounded-full bg-purple-100 text-purple-600">
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </div>
-            <div className="ml-4">
-              <h3 className="text-lg font-medium text-gray-900">IP利用率</h3>
-              <div className="mt-1 text-3xl font-semibold">
-                {Math.round(
-                  (pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
-                    pools.reduce((sum, pool) => sum + pool.ips, 0)) *
-                    100,
-                )}
-                %
-              </div>
-            </div>
-          </div>
-          <div className="mt-4">
-            <div className="w-full bg-gray-200 rounded-full h-2">
-              <div
-                className="bg-purple-600 h-2 rounded-full"
-                style={{
-                  width: `${
-                    (pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
-                      pools.reduce((sum, pool) => sum + pool.ips, 0)) *
-                    100
-                  }%`,
-                }}
-              ></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* 操作指南 */}
-      <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <svg
-              className="h-5 w-5 text-blue-600"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-          </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700">
-              IP池是管理IP资源的基础单位。您可以创建不同用途的IP池，并为客户分配相应的访问权限。
-            </p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
-              <a
-                href="/help/proxy-pools"
-                className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
-              >
-                查看文档 <span aria-hidden="true">&rarr;</span>
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -12,6 +12,7 @@ import {
   updateResource,
 } from "@/actions/resources"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -169,30 +170,28 @@ function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
 
 export default function ResourcesPage() {
   return (
-    <div>
+    <Page>
-      <Tabs defaultValue="short">
+      <Tabs defaultValue="short" className="overflow-hidden">
-        <TabsList className="bg-card p-1.5 rounded-lg">
+        <TabsList className="bg-card">
-          <TabsTrigger
+          <TabsTrigger value="short" className="h-10 px-4 shadow-none">
-            value="short"
-            className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md"
-          >
             短效套餐
           </TabsTrigger>
-          <TabsTrigger
+          <TabsTrigger value="long" className="h-10 px-4 shadow-none">
-            value="long"
-            className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md"
-          >
             长效套餐
           </TabsTrigger>
         </TabsList>
-        <TabsContent value="short" className="flex flex-col gap-4">
+
+        <TabsContent
+          value="short"
+          className="flex flex-col gap-4 overflow-hidden"
+        >
           <ResourceList resourceType="short" />
         </TabsContent>
         <TabsContent value="long" className="flex flex-col gap-4">
           <ResourceList resourceType="long" />
         </TabsContent>
       </Tabs>
-    </div>
+    </Page>
   )
 }
 
@@ -226,7 +225,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
   )
 
   const table = useDataTable<Resources>(fetchResources)
-  console.log(table, "我的套餐的table")
+
   const refreshTable = useCallback(() => {
     setFilters(prev => ({ ...prev }))
   }, [])
@@ -256,7 +255,30 @@ function ResourceList({ resourceType }: ResourceListProps) {
     },
     [refreshTable],
   )
-
+  const handleCheckipChange = useCallback(
+    async (resource: Resources) => {
+      const newCheckip = !resource.checkip
+      setUpdatingId(resource.id)
+      try {
+        await updateResource({
+          id: resource.id,
+          checkip: newCheckip,
+        })
+        toast.success("更新成功", {
+          description: `IP检查已${newCheckip ? "启用IP检查" : "停用IP检查"}`,
+        })
+        refreshTable()
+      } catch (error) {
+        console.error("更新IP检查状态失败:", error)
+        toast.error("更新失败", {
+          description: error instanceof Error ? error.message : "请稍后重试",
+        })
+      } finally {
+        setUpdatingId(null)
+      }
+    },
+    [refreshTable],
+  )
   const onFilter = handleSubmit(data => {
     const result: FilterParams = {}
     if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
@@ -389,7 +411,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
       {
         id: "action",
         meta: { pin: "right" },
-        header: "状态",
+        header: "操作",
         cell: ({ row }: { row: { original: Resources } }) => {
           const resource = row.original
           const isLoading = updatingId === resource.id
@@ -412,17 +434,24 @@ function ResourceList({ resourceType }: ResourceListProps) {
               {isLoading && (
                 <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
               )}
+              <Button
+                onClick={() => handleCheckipChange(resource)}
+                variant={resource.checkip ? "destructive" : "default"}
+                disabled={isLoading}
+              >
+                {resource.checkip ? "停用IP检查" : "启用IP检查"}
+              </Button>
             </div>
           )
         },
       },
     ],
-    [isLong, updatingId, handleStatusChange],
+    [isLong, updatingId, handleStatusChange, handleCheckipChange],
   )
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-3 overflow-hidden">
-      <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg flex-none">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="user_phone"
@@ -542,7 +571,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
           />
         </div>
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -558,7 +587,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
       </form>
 
       <Suspense fallback={<div className="text-center p-4">加载中...</div>}>
-        <DataTable<Resources> {...table} columns={columns} />
+        <DataTable<Resources>
+          {...table}
+          columns={columns}
+          classNames={{
+            root: "flex-auto overflow-hidden",
+          }}
+        />
       </Suspense>
     </div>
   )

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

@@ -3,6 +3,7 @@ import { Suspense, useState } from "react"
 import { toast } from "sonner"
 import { deleteRole, getPageRole, updateRole } from "@/actions/role"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -31,7 +32,7 @@ export default function RolesPage() {
   const table = useDataTable((page, size) => getPageRole({ page, size }))
 
   return (
-    <div className="flex flex-col gap-3">
+    <Page>
       {/* 操作栏 */}
       <div className="flex justify-between items-stretch">
         <div className="flex gap-3">
@@ -78,7 +79,7 @@ export default function RolesPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }
 

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

@@ -4,11 +4,10 @@ import { format } from "date-fns"
 import { CheckCircle, Clock, XCircle } from "lucide-react"
 import { Suspense, useCallback, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
-import { toast } from "sonner"
 import { z } from "zod"
-import { getPageTrade, getTradeComplete } from "@/actions/trade"
+import { getPageTrade } from "@/actions/trade"
-import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
 import {
   Field,
@@ -24,7 +23,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { ScopeTradeWriteComplete } from "@/lib/scopes"
 import type { Trade } from "@/models/trade"
 
 type FilterValues = {
@@ -113,31 +111,10 @@ export default function TradePage() {
     table.pagination.onPageChange(1)
   })
 
-  const [completingId, setCompletingId] = useState<string | null>(null)
-
-  const handleComplete = async (trade: Trade) => {
-    if (completingId) return
-    setCompletingId(trade.inner_no)
-    try {
-      const result = await getTradeComplete({
-        user_id: Number(trade.user_id),
-        trade_no: trade.inner_no,
-        method: trade.method,
-      })
-      if (result.success) {
-        toast.success("订单已完成")
-      } else {
-        toast.error(result.message || "操作失败")
-      }
-    } catch (error) {
-      console.error("完成订单失败:", error)
-      toast.error("网络错误，请稍后重试")
-    }
-  }
   return (
-    <div className="space-y-3">
+    <Page>
       {/* 筛选表单 */}
-      <form onSubmit={onFilter} className="bg-white p-4">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="user_phone"
@@ -268,7 +245,7 @@ export default function TradePage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -288,35 +265,14 @@ export default function TradePage() {
           {...table}
           columns={[
             {
-              header: "会员号",
+              header: "创建时间",
-              accessorFn: row => row.user?.phone || "",
+              accessorKey: "created_at",
-            },
+              cell: ({ row }) =>
-            {
+                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
-              header: "订单号",
-              accessorKey: "inner_no",
-            },
-            {
-              header: "渠道订单号",
-              accessorKey: "outer_no",
-            },
-            {
-              header: "支付渠道",
-              accessorKey: "method",
-              cell: ({ row }) => {
-                const methodMap: Record<number, string> = {
-                  1: "支付宝",
-                  2: "微信",
-                  3: "商福通",
-                  4: "商福通渠道支付宝",
-                  5: "商福通渠道微信",
-                }
-                return (
-                  <div>
-                    {methodMap[row.original.method as number] || "未知"}
-                  </div>
-                )
-              },
             },
+            { header: "会员号", accessorFn: row => row.user?.phone || "" },
+            { header: "订单号", accessorKey: "inner_no" },
+            { header: "购买套餐", accessorKey: "subject" },
             {
               header: "支付金额",
               accessorKey: "payment",
@@ -338,25 +294,6 @@ export default function TradePage() {
                 )
               },
             },
-            {
-              header: "支付平台",
-              accessorKey: "platform",
-              cell: ({ row }) => {
-                const platform = row.original.platform
-                if (!platform) return <span>-</span>
-                return (
-                  <div className="flex items-center gap-2">
-                    {platform === 1 ? (
-                      <span>电脑网站</span>
-                    ) : platform === 2 ? (
-                      <span>手机网站</span>
-                    ) : (
-                      <span>-</span>
-                    )}
-                  </div>
-                )
-              },
-            },
             {
               header: "支付状态",
               accessorKey: "status",
@@ -390,40 +327,47 @@ export default function TradePage() {
                 }
               },
             },
-            { header: "购买套餐", accessorKey: "subject" },
             {
-              header: "创建时间",
+              header: "支付平台",
-              accessorKey: "created_at",
+              accessorKey: "platform",
-              cell: ({ row }) =>
-                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
-            },
-            {
-              id: "action",
-              meta: { pin: "right" },
-              header: "操作",
               cell: ({ row }) => {
-                const isPending = row.original.status === 0
+                const platform = row.original.platform
-                const isLoading = completingId === row.original.inner_no
+                if (!platform) return <span>-</span>
                 return (
-                  <div className="flex  gap-2">
+                  <div className="flex items-center gap-2">
-                    <Auth scope={ScopeTradeWriteComplete}>
+                    {platform === 1 ? (
-                      {isPending && (
+                      <span>电脑网站</span>
-                        <Button
+                    ) : platform === 2 ? (
-                          size="sm"
+                      <span>手机网站</span>
-                          onClick={() => handleComplete(row.original)}
+                    ) : (
-                          disabled={isLoading}
+                      <span>-</span>
-                        >
-                          {isLoading ? "处理中..." : "完成订单"}
-                        </Button>
                     )}
-                    </Auth>
                   </div>
                 )
               },
             },
+            {
+              header: "支付渠道",
+              accessorKey: "method",
+              cell: ({ row }) => {
+                const methodMap: Record<number, string> = {
+                  1: "支付宝",
+                  2: "微信",
+                  3: "商福通",
+                  4: "商福通渠道支付宝",
+                  5: "商福通渠道微信",
+                }
+                return (
+                  <div>
+                    {methodMap[row.original.method as number] || "未知"}
+                  </div>
+                )
+              },
+            },
+            { header: "渠道订单号", accessorKey: "outer_no" },
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

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

@@ -7,6 +7,7 @@ import { z } from "zod"
 import { bindAdmin, getPageUserPage } from "@/actions/user"
 import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -54,14 +55,14 @@ export default function UserPage() {
 
   const onFilter = handleSubmit(data => {
     const result: FilterValues = {}
-    if (data.phone) result.phone = data.phone
+    if (data.phone?.trim()) result.phone = data.phone.trim()
     setFilters(result)
     table.pagination.onPageChange(1)
   })
 
   return (
-    <div className="space-y-3">
+    <Page>
-      <form onSubmit={onFilter} className="bg-white p-4">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="phone"
@@ -80,7 +81,7 @@ export default function UserPage() {
         </div>
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
-          <Button type="submit">筛选</Button>
+          <Button type="submit">搜索</Button>
           <Button
             type="button"
             variant="outline"
@@ -196,6 +197,6 @@ export default function UserPage() {
           ]}
         />
       </Suspense>
-    </div>
+    </Page>
   )
 }

src/components/data-table/component.tsx

@@ -10,11 +10,11 @@ import { Loader } from "lucide-react"
 import type { CSSProperties } from "react"
 import { Pagination, type PaginationProps } from "@/components/ui/pagination"
 import {
+  Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
-  Table as TableRoot,
   TableRow,
 } from "@/components/ui/table"
 import { cn } from "@/lib/utils"
@@ -75,31 +75,35 @@ export function DataTable<T extends Record<string, unknown>>(
     },
   })
 
-  const pinStyle = (column: Column<T>) => {
+  const pinStyle = (column: Column<T>, header?: boolean) => {
     const pinned = column.getIsPinned()
     if (!pinned) return {}
     return {
-      position: pinned ? ("sticky" as const) : undefined,
-      backgroundColor: "white",
-      zIndex: 1,
-      ...{
       left: {
         left: column.getStart(pinned),
-          boxShadow: "inset 1px 0 var(--border)",
+        boxShadow: header
-        },
+          ? "inset -1px -1px var(--border)"
+          : "inset -1px 0 var(--border)",
+      } as CSSProperties,
       right: {
         right: column.getAfter(pinned),
-          boxShadow: "inset 1px 0 var(--border)",
+        boxShadow: header
-        },
+          ? "inset 1px -1px var(--border)"
-      }[pinned],
+          : "inset 1px 0 var(--border)",
-    } as CSSProperties
+      } as CSSProperties,
+    }[pinned]
   }
 
   return (
-    <div className={cn("flex flex-col gap-3", props.classNames?.root)}>
+    <div
+      className={cn(
+        "flex-auto flex flex-col gap-3 overflow-hidden",
+        props.classNames?.root,
+      )}
+    >
       {/* 数据表 */}
-      <div className="rounded-md relative bg-card">
+      <div className="flex-auto overflow-hidden relative">
-        <TableRoot>
+        <Table className="max-w-full max-h-full">
           <TableHeader>
             {table.getHeaderGroups().map(group => (
               <TableRow key={group.id}>
@@ -107,7 +111,8 @@ export function DataTable<T extends Record<string, unknown>>(
                   <TableHead
                     key={header.id}
                     colSpan={header.colSpan}
-                    style={pinStyle(header.column)}
+                    className="sticky top-0 bg-card z-20 shadow-[inset_0_-1px_var(--border)]"
+                    style={pinStyle(header.column, true)}
                   >
                     {header.isPlaceholder
                       ? null
@@ -147,7 +152,11 @@ export function DataTable<T extends Record<string, unknown>>(
                   className={cn("h-14", props.classNames?.dataRow)}
                 >
                   {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id} style={pinStyle(cell.column)}>
+                    <TableCell
+                      key={cell.id}
+                      className="sticky bg-card z-10"
+                      style={pinStyle(cell.column)}
+                    >
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),
@@ -158,9 +167,9 @@ export function DataTable<T extends Record<string, unknown>>(
               ))
             )}
           </TableBody>
-        </TableRoot>
+        </Table>
         {props.status === "load" && (
-          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
+          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition z-50">
             <Loader className="animate-spin" />
             <span>加载中</span>
           </div>
@@ -168,7 +177,9 @@ export function DataTable<T extends Record<string, unknown>>(
       </div>
 
       {/* 分页器 */}
-      {props.pagination && <Pagination {...props.pagination} />}
+      {props.pagination && (
+        <Pagination {...props.pagination} className="flex-none self-center" />
+      )}
     </div>
   )
 }

src/components/page.tsx

@@ -1,5 +1,10 @@
 import type { ReactNode } from "react"
+import { cn } from "@/lib/utils"
 
-export function Page(props: { children: ReactNode }) {
+export function Page(props: { className?: string; children: ReactNode }) {
-  return <div className="flex flex-col">{props.children}</div>
+  return (
+    <div className={cn("h-full flex flex-col p-6 gap-4", props.className)}>
+      {props.children}
+    </div>
+  )
 }

src/components/products/index.tsx

@@ -45,20 +45,27 @@ function ProductShortCode<T extends { code: string }>(
   const { field, fieldState } = props
 
   const params = new URLSearchParams(field.value)
+  const mode = params.get("mode") || "quota"
+  const live = params.get("live") || "0"
+  const expire = params.get("expire") || "0"
+
   const setParams = (data: {
     mode?: string
     live?: string
     expire?: string
   }) => {
-    if (data.mode) params.set("mode", data.mode)
+    const newParams = new URLSearchParams()
-    if (data.live) params.set("live", data.live)
+    newParams.set("mode", data.mode || mode)
-    if (data.expire) params.set("expire", data.expire)
+    newParams.set("live", data.live || live)
-    field.onChange(params.toString())
+    newParams.set("expire", data.expire || expire)
+    console.log(newParams.toString())
+    field.onChange(newParams.toString())
   }
 
   const onModeChange = (value: string) => {
     setParams({ mode: value })
   }
+
   const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value || "0"
     if (value.length > 1 && value[0] === "0") {
@@ -67,6 +74,7 @@ function ProductShortCode<T extends { code: string }>(
     if (!/^([0-9]+)$/.test(value)) return
     setParams({ live: value })
   }
+
   const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value || "0"
     if (value.length > 1 && value[0] === "0") {
@@ -82,10 +90,7 @@ function ProductShortCode<T extends { code: string }>(
       <FieldGroup>
         <Field>
           <FieldLabel>套餐类型</FieldLabel>
-          <Select
+          <Select defaultValue={mode} onValueChange={onModeChange}>
-            defaultValue={params.get("mode") ?? "quota"}
-            onValueChange={onModeChange}
-          >
             <SelectTrigger>
               <SelectValue placeholder="请选择套餐类型" />
             </SelectTrigger>
@@ -97,20 +102,12 @@ function ProductShortCode<T extends { code: string }>(
         </Field>
         <Field>
           <FieldLabel>有效期（分钟）</FieldLabel>
-          <Input
+          <Input type="number" value={live} onChange={onLiveChange} />
-            type="number"
-            value={params.get("live") ?? "0"}
-            onChange={onLiveChange}
-          />
         </Field>
         {params.get("mode") === "time" && (
           <Field>
             <FieldLabel>过期时间（天）</FieldLabel>
-            <Input
+            <Input type="number" value={expire} onChange={onExpireChange} />
-              type="number"
-              value={params.get("expire") ?? "0"}
-              onChange={onExpireChange}
-            />
           </Field>
         )}
         {fieldState.error && <FieldError errors={[fieldState.error]} />}
@@ -125,20 +122,31 @@ function ProductLongCode<T extends { code: string }>(
   const { field, fieldState } = props
 
   const params = new URLSearchParams(field.value)
+  const mode = params.get("mode") || "quota"
+  const live = params.get("live") || "0"
+  const expire = params.get("expire") || "0"
+
   const setParams = (data: {
     mode?: string
     live?: string
     expire?: string
   }) => {
-    if (data.mode) params.set("mode", data.mode)
+    const newParams = new URLSearchParams()
-    if (data.live) params.set("live", data.live)
+    newParams.set("mode", data.mode || mode)
-    if (data.expire) params.set("expire", data.expire)
+    newParams.set("live", data.live || live)
-    field.onChange(params.toString())
+    newParams.set("expire", data.expire || expire)
+    console.log(newParams.toString())
+    field.onChange(newParams.toString())
   }
 
   const onModeChange = (value: string) => {
+    if (value === "quota") {
+      setParams({ mode: value, expire: "0" })
+    } else {
       setParams({ mode: value })
     }
+  }
+
   const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value || "0"
     if (value.length > 1 && value[0] === "0") {
@@ -147,6 +155,7 @@ function ProductLongCode<T extends { code: string }>(
     if (!/^([0-9]+)$/.test(value)) return
     setParams({ live: value })
   }
+
   const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value || "0"
     if (value.length > 1 && value[0] === "0") {
@@ -162,10 +171,7 @@ function ProductLongCode<T extends { code: string }>(
       <FieldGroup>
         <Field>
           <FieldLabel>套餐类型</FieldLabel>
-          <Select
+          <Select defaultValue={mode} onValueChange={onModeChange}>
-            defaultValue={params.get("mode") ?? "quota"}
-            onValueChange={onModeChange}
-          >
             <SelectTrigger>
               <SelectValue placeholder="请选择套餐类型" />
             </SelectTrigger>
@@ -177,20 +183,12 @@ function ProductLongCode<T extends { code: string }>(
         </Field>
         <Field>
           <FieldLabel>有效期（分钟）</FieldLabel>
-          <Input
+          <Input type="number" value={live} onChange={onLiveChange} />
-            type="number"
-            value={params.get("live") ?? "0"}
-            onChange={onLiveChange}
-          />
         </Field>
         {params.get("mode") === "time" && (
           <Field>
             <FieldLabel>过期时间（天）</FieldLabel>
-            <Input
+            <Input type="number" value={expire} onChange={onExpireChange} />
-              type="number"
-              value={params.get("expire") ?? "0"}
-              onChange={onExpireChange}
-            />
           </Field>
         )}
         {fieldState.error && <FieldError errors={[fieldState.error]} />}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/table.tsx

@@ -8,11 +8,11 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
     <div
       data-slot="table-container"
-      className="relative w-full overflow-x-auto"
+      className={cn("bg-card rounded-lg relative overflow-auto", className)}
     >
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className="w-full caption-bottom text-sm"
         {...props}
       />
     </div>
@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn("[&_tr]:border-b-0", className)}
       {...props}
     />
   )

src/components/ui/tabs.tsx

@@ -1,34 +1,56 @@
 "use client"
 
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
 import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
 function Tabs({
   className,
+  orientation = "horizontal",
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className,
+      )}
       {...props}
     />
   )
 }
 
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
 function TabsList({
   className,
+  variant = "default",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
+      data-variant={variant}
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+      className={cn(tabsListVariants({ variant }), className)}
-        className,
-      )}
       {...props}
     />
   )
@@ -42,7 +64,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:-bottom-1.25 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className,
       )}
       {...props}
@@ -63,4 +88,4 @@ function TabsContent({
   )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/lib/scopes.ts

@@ -73,7 +73,6 @@ export const ScopeTrade = "trade"
 export const ScopeTradeRead = "trade:read" // 读取交易列表
 export const ScopeTradeReadOfUser = "trade:read:of_user" // 读取指定用户的交易列表
 export const ScopeTradeWrite = "trade:write" // 写入交易
-export const ScopeTradeWriteComplete = "trade:write:complete" // 完成交易
 
 // 账单
 export const ScopeBill = "bill"
@@ -85,3 +84,9 @@ export const ScopeBillWrite = "bill:write" // 写入账单
 export const ScopeBalanceActivity = "balance_activity"
 export const ScopeBalanceActivityRead = "balance_activity:read" // 读取余额变动列表
 export const ScopeBalanceActivityReadOfUser = "balance_activity:read:of_user" // 读取指定用户的余额变动列表
+
+// 代理
+export const ScopeProxy = "proxy"
+export const ScopeProxyRead = "proxy:read" // 读取代理列表
+export const ScopeProxyWrite = "proxy:write" // 写入代理
+export const ScopeProxyWriteStatus = "proxy:write:status" // 更改代理状态

src/models/gateway.ts

@@ -0,0 +1,11 @@
+export type Gateway = {
+  id: number
+  version: string
+  mac: string
+  ip: string
+  host: string
+  type: number
+  status: number
+  meta: string
+  created_at: Date
+}

src/models/product_sku.ts

@@ -11,4 +11,6 @@ export type ProductSku = Model & {
   product?: Product
   price_min?: string
   discount?: ProductDiscount
+  sort: number
+  count_min: number
 }

src/models/resources.ts

@@ -10,6 +10,7 @@ type ResourceBase = {
   updated_at: Date
   deleted_at: Date | null
   user: User
+ checkip:boolean
 }
 
 type ResourceShort = {