优化组件页面代码

.zed/settings.json

@@ -5,18 +5,18 @@
       "formatter": { "language_server": { "name": "biome" } },
       "code_actions_on_format": {
         "source.fixAll.biome": true,
-        "source.organizeImports.biome": true,
+        "source.organizeImports.biome": true
-      },
+      }
     },
     "TSX": {
       "formatter": { "language_server": { "name": "biome" } },
       "code_actions_on_format": {
         "source.fixAll.biome": true,
-        "source.organizeImports.biome": true,
+        "source.organizeImports.biome": true
-      },
+      }
     },
     "JSON": {
-      "formatter": { "language_server": { "name": "biome" } },
+      "formatter": { "language_server": { "name": "biome" } }
-    },
+    }
-  },
+  }
 }

biome.json

@@ -18,6 +18,15 @@
       "recommended": true,
       "style": {
         "useNodejsImportProtocol": "off"
+      },
+      "a11y": {
+        "useButtonType": "off",
+        "noLabelWithoutControl": "off",
+        "noSvgWithoutTitle": "off",
+        "useSemanticElements": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off"
       }
     }
   },

postcss.config.mjs

@@ -1,5 +1,5 @@
 const config = {
   plugins: ["@tailwindcss/postcss"],
-};
+}
 
-export default config;
+export default config

src/actions/cust.ts

@@ -20,9 +20,9 @@ export async function updateCust(data: {
 }
 
 export async function createCust(data: {
-  password: string
-  username: string
   phone: string
+  password?: string
+  username?: string
   admin_id?: number
   discount_id?: number
   email?: string

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

@@ -236,15 +236,7 @@ export default function BatchPage() {
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
+              reset()
-                user_phone: "",
-                batch_no: "",
-                prov: "",
-                city: "",
-                isp: "all",
-                created_at_start: "",
-                created_at_end: "",
-              })
               setFilters({})
               table.pagination.onPageChange(1)
             }}

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

@@ -1,7 +1,7 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { CreditCard } from "lucide-react"
+import { CreditCard, Wallet } from "lucide-react"
 import { Suspense, useEffect, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
@@ -63,7 +63,6 @@ const filterSchema = z
     if (data.created_at_start && data.created_at_end) {
       const start = new Date(data.created_at_start)
       const end = new Date(data.created_at_end)
-
       if (end < start) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -152,7 +151,6 @@ export default function BillingPage() {
 
   return (
     <div className="space-y-3">
-      {/* 筛选表单 */}
       <form onSubmit={onFilter} className="bg-white p-4">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
@@ -211,7 +209,6 @@ export default function BillingPage() {
                   value={skuProductCode}
                   onValueChange={value => {
                     setSkuProductCode(value as ProductCode)
-                    // 同步到表单值
                     field.onChange(value)
                   }}
                 >
@@ -316,16 +313,7 @@ export default function BillingPage() {
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
+              reset()
-                bill_no: "",
-                inner_no: "",
-                created_at_start: "",
-                created_at_end: "",
-                phone: "",
-                resource_no: "",
-                product_code: ProductCode.All,
-                sku_code: "all",
-              })
               setSkuProductCode(ProductCode.All)
               setFilters({})
               table.pagination.onPageChange(1)
@@ -351,7 +339,6 @@ export default function BillingPage() {
 
                 return (
                   <div className="flex items-center gap-2">
-                    {/* 类型展示 */}
                     <div className="shrink-0">
                       {bill.type === 1 && (
                         <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
@@ -372,8 +359,6 @@ export default function BillingPage() {
                         </div>
                       )}
                     </div>
-
-                    {/* 账单详情 */}
                     <div className="text-sm">{bill.info}</div>
                   </div>
                 )
@@ -421,9 +406,46 @@ export default function BillingPage() {
                 )
               },
             },
-            // { header: "套餐名称", accessorKey: "info" },
             { header: "账单号", accessorKey: "bill_no" },
-            { header: "订单号", accessorKey: "trade.inner_no" },
+            {
+              header: "订单号",
+              accessorKey: "trade.inner_no",
+              cell: ({ row }) => {
+                const bill = row.original
+
+                return (
+                  <div className="flex items-center gap-2">
+                    <div className="shrink-0 w-20">
+                      {bill.trade?.acquirer === 1 && (
+                        <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16} />
+                          <span>支付宝</span>
+                        </div>
+                      )}
+                      {bill.trade?.acquirer === 2 && (
+                        <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16} />
+                          <span>微信</span>
+                        </div>
+                      )}
+                      {bill.trade?.acquirer === 3 && (
+                        <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16} />
+                          <span>银联</span>
+                        </div>
+                      )}
+                      {!bill.trade?.acquirer && (
+                        <div className="flex gap-2 items-center bg-red-50 w-full px-2 py-1 rounded-md">
+                          <Wallet size={16} />
+                          <span>余额</span>
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-sm">{bill.trade?.inner_no}</div>
+                  </div>
+                )
+              },
+            },
             {
               header: "创建时间",
               accessorKey: "created_at",

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

@@ -33,9 +33,6 @@ const filterSchema = z
     batch_no: z.string().optional(),
     user_phone: z.string().optional(),
     resource_no: z.string().optional(),
-    filter_prov: z.string().optional(),
-    filter_city: z.string().optional(),
-    filter_isp: z.string().optional(),
     proxy_host: z.string().optional(),
     proxy_port: z.string().optional(),
     node_ip: z.string().optional(),
@@ -51,7 +48,7 @@ const filterSchema = z
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: "结束时间不能早于开始时间",
-          path: ["created_at_end"],
+          path: ["expired_at_end"],
         })
       }
     }
@@ -59,7 +56,6 @@ const filterSchema = z
 
 type FilterSchema = z.infer<typeof filterSchema>
 
-// 运营商映射
 const ispMap: Record<number, string> = {
   1: "电信",
   2: "联通",
@@ -75,9 +71,6 @@ export default function ChannelPage() {
       batch_no: "",
       user_phone: "",
       resource_no: "",
-      filter_prov: "",
-      filter_city: "",
-      filter_isp: "all",
       proxy_port: "",
       proxy_host: "",
       node_ip: "",
@@ -109,7 +102,6 @@ export default function ChannelPage() {
 
   return (
     <div className="space-y-3">
-      {/* 筛选表单 */}
       <form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
@@ -126,7 +118,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="user_phone"
             control={control}
@@ -141,7 +132,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="resource_no"
             control={control}
@@ -156,7 +146,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="proxy_host"
             control={control}
@@ -171,7 +160,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="proxy_port"
             control={control}
@@ -186,7 +174,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="node_ip"
             control={control}
@@ -201,7 +188,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="expired_at_start"
             control={control}
@@ -216,7 +202,6 @@ export default function ChannelPage() {
               </Field>
             )}
           />
-
           <Controller
             name="expired_at_end"
             control={control}
@@ -239,19 +224,7 @@ export default function ChannelPage() {
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
+              reset()
-                batch_no: "",
-                user_phone: "",
-                resource_no: "",
-                filter_prov: "",
-                filter_city: "",
-                filter_isp: "all",
-                proxy_host: "",
-                proxy_port: "",
-                node_ip: "",
-                expired_at_start: "",
-                expired_at_end: "",
-              })
               setFilters({})
               table.pagination.onPageChange(1)
             }}
@@ -279,18 +252,6 @@ export default function ChannelPage() {
 
             {
               header: "自动配置",
-              accessorFn: row => {
-                const prov = row.filter_prov
-                const city = row.filter_city
-                const isp = row.filter_isp
-                const parts = []
-                if (prov && prov !== "all") parts.push(prov)
-                if (city && city !== "all") parts.push(city)
-                if (isp && isp !== "all") {
-                  parts.push(ispMap[Number(isp)] || isp)
-                }
-                return parts.length > 0 ? parts.join(" / ") : "不限"
-              },
               cell: ({ row }) => {
                 const prov = row.original.filter_prov
                 const city = row.original.filter_city
@@ -312,11 +273,9 @@ export default function ChannelPage() {
               header: "网关地址",
               accessorKey: "host",
               cell: ({ row }) => {
-                const ip = row.original.host
-                const port = row.original.port
                 return (
                   <span>
-                    {ip}:{port}{" "}
+                    {row.original.host}:{row.original.port}
                   </span>
                 )
               },
@@ -325,11 +284,9 @@ export default function ChannelPage() {
               header: "认证方式",
               cell: ({ row }) => {
                 const channel = row.original
-
                 const hasWhitelist =
                   channel.whitelists && channel.whitelists.trim() !== ""
                 const hasAuth = channel.username && channel.password
-
                 return (
                   <div className="flex flex-col gap-1 min-w-0">
                     {hasWhitelist ? (

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

@@ -67,9 +67,7 @@ export function BalanceDialog({
 
   const onSubmit = async (data: BalanceFormValues) => {
     if (!currentUser) return
-
     setIsLoading(true)
-
     try {
       const result = await getBalance({
         user_id: currentUser.id,
@@ -85,9 +83,8 @@ export function BalanceDialog({
         toast.error(result.message || "修改余额失败")
       }
     } catch (error) {
-      const message =
+      const message = error instanceof Error ? error.message : error
-        error instanceof Error ? error.message : "网络错误，请稍后重试"
+      toast.error(`网络错误，请稍后重试: ${message}`)
-      toast.error(message)
     } finally {
       setIsLoading(false)
     }
@@ -155,7 +152,7 @@ export function BalanceDialog({
               取消
             </Button>
             <Button type="submit" disabled={isLoading}>
-              {isLoading ? "保存中..." : "保存"}
+              {isLoading ? "保存中" : "保存"}
             </Button>
           </DialogFooter>
         </form>

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

@@ -35,9 +35,12 @@ import type { ProductDiscount } from "@/models/product_discount"
 // 表单验证规则
 const addUserSchema = z
   .object({
-    username: z.string().min(1, "账号不能为空"),
+    username: z.string().optional(),
-    password: z.string().min(6, "密码至少6位"),
+    password: z
-    confirmPassword: z.string().min(1, "请确认密码"),
+      .string()
+      .optional()
+      .refine(val => !val || val.length >= 6, { message: "密码至少6位" }),
+    confirmPassword: z.string().optional(),
     phone: z.string().regex(/^1[3-9]\d{9}$/, "请输入正确的手机号格式"),
     email: z
       .string()
@@ -53,10 +56,18 @@ const addUserSchema = z
     contact_qq: z.string().optional(),
     contact_wechat: z.string().optional(),
   })
-  .refine(data => data.password === data.confirmPassword, {
+  .refine(
-    message: "两次输入的密码不一致",
+    data => {
-    path: ["confirmPassword"],
+      if (data.password) {
-  })
+        return data.password === data.confirmPassword
+      }
+      return true
+    },
+    {
+      message: "两次输入的密码不一致",
+      path: ["confirmPassword"],
+    },
+  )
 
 export type AddUserFormValues = z.infer<typeof addUserSchema>
 
@@ -147,9 +158,9 @@ export function AddUserDialog({
 
   const onSubmit = handleSubmit(async data => {
     const payload = {
-      username: data.username,
-      password: data?.password,
       phone: data.phone,
+      username: data?.username,
+      password: data?.password,
       email: data?.email || "",
       name: data?.name,
       admin_id: data.admin_id ? Number(data.admin_id) : undefined,
@@ -228,7 +239,10 @@ export function AddUserDialog({
               control={control}
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel>用户密码</FieldLabel>
+                  <FieldLabel>
+                    用户密码
+                    <span className="text-gray-400 text-xs">（选填）</span>
+                  </FieldLabel>
                   <Input
                     {...field}
                     type="password"

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

@@ -88,7 +88,6 @@ export default function UserPage() {
   )
 
   const table = useDataTable<Cust>(fetchUsers)
-  console.log(table, "客户管理table")
 
   const onFilter = handleSubmit(data => {
     const result: FilterValues = {}
@@ -106,10 +105,6 @@ export default function UserPage() {
     table.refresh()
   }, [table])
 
-  const handleAddUserSuccess = () => {
-    refreshTable()
-  }
-
   return (
     <div className="space-y-3">
       <form onSubmit={onFilter} className="bg-white p-4">
@@ -222,14 +217,7 @@ export default function UserPage() {
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
+              reset()
-                account: "",
-                name: "",
-                identified: "all",
-                enabled: "all",
-                created_at_start: "",
-                created_at_end: "",
-              })
               setFilters({})
               table.pagination.onPageChange(1)
             }}
@@ -386,7 +374,7 @@ export default function UserPage() {
       <AddUserDialog
         open={isAddDialogOpen}
         onOpenChange={setIsAddDialogOpen}
-        onSuccess={handleAddUserSuccess}
+        onSuccess={refreshTable}
       />
 
       <UpdateDialog

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

@@ -37,7 +37,7 @@ import type { ProductDiscount } from "@/models/product_discount"
 const editUserSchema = z
   .object({
     id: z.number(),
-    username: z.string().min(2, "用户名至少2个字符"),
+    username: z.string().optional(),
     email: z.string().email("邮箱格式不正确").optional().or(z.literal("")),
     password: z.string().optional(),
     confirmPassword: z.string().optional(),
@@ -230,7 +230,7 @@ export function UpdateDialog({
               control={control}
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel>用户名 *</FieldLabel>
+                  <FieldLabel>用户名</FieldLabel>
                   <Input {...field} placeholder="请输入用户名" />
                   <FieldError>{fieldState.error?.message}</FieldError>
                 </Field>
@@ -258,7 +258,7 @@ export function UpdateDialog({
                   <Input
                     {...field}
                     type="password"
-                    placeholder="留空则保持不变，修改请输入新密码（至少6位）"
+                    placeholder="选填,修改请输入新密码（至少6位）"
                   />
                   <FieldError>{fieldState.error?.message}</FieldError>
                 </Field>

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

@@ -92,7 +92,7 @@ export function CreateDiscount(props: { onSuccess?: () => void }) {
               render={({ field, fieldState }) => (
                 <Field>
                   <FieldLabel htmlFor="discount-create-discount">
-                    代码
+                    折扣
                   </FieldLabel>
                   <Input
                     id="discount-create-discount"

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

@@ -110,7 +110,7 @@ export function UpdateDiscount(props: {
               render={({ field, fieldState }) => (
                 <Field>
                   <FieldLabel htmlFor="discount-update-discount">
-                    代码
+                    折扣
                   </FieldLabel>
                   <Input
                     id="discount-update-discount"

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

@@ -92,9 +92,8 @@ function Products(props: {
 
 function ProductSkus(props: { selected?: number }) {
   const action = useCallback(
-    (page: number, size: number) => {
+    (page: number, size: number) =>
-      return getPageProductSku({ page, size, product_id: props.selected })
+      getPageProductSku({ page, size, product_id: props.selected }),
-    },
     [props.selected],
   )
 

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

@@ -1,21 +1,21 @@
-'use client'
+"use client"
-import {useState, useEffect} from 'react'
+import Link from "next/link"
-import Link from 'next/link'
+import { useEffect, useState } from "react"
 
 // 定义节点数据接口
 interface ProxyNode {
-  id: string;
+  id: string
-  ipAddress: string;
+  ipAddress: string
   location: {
-    country: string;
+    country: string
-    region: string;
+    region: string
-  };
+  }
-  type: string;
+  type: string
-  status: 'online' | 'offline' | 'warning';
+  status: "online" | "offline" | "warning"
-  responseTime: number;
+  responseTime: number
-  lastCheckTime: string;
+  lastCheckTime: string
-  pool: string;
+  pool: string
-  isStatic: boolean;
+  isStatic: boolean
 }
 
 export type ProxyNodesPageProps = {}
@@ -24,101 +24,101 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
   const [loading, setLoading] = useState<boolean>(true)
 
   const [nodes, setNodes] = useState<ProxyNode[]>([])
-  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [searchTerm, setSearchTerm] = useState<string>("")
-  const [filterStatus, setFilterStatus] = useState<string>('all')
+  const [filterStatus, setFilterStatus] = useState<string>("all")
-  const [filterType, setFilterType] = useState<string>('all')
+  const [filterType, setFilterType] = useState<string>("all")
-  const [filterPool, setFilterPool] = useState<string>('all')
+  const [filterPool, setFilterPool] = useState<string>("all")
 
   // 模拟数据加载
   useEffect(() => {
     setTimeout(() => {
       setNodes([
         {
-          id: 'ip-1',
+          id: "ip-1",
-          ipAddress: '203.45.167.82',
+          ipAddress: "203.45.167.82",
-          location: {country: '美国', region: '纽约'},
+          location: { country: "美国", region: "纽约" },
-          type: '数据中心',
+          type: "数据中心",
-          status: 'online',
+          status: "online",
           responseTime: 126,
-          lastCheckTime: '2024-05-10 15:30:22',
+          lastCheckTime: "2024-05-10 15:30:22",
-          pool: '北美专用池',
+          pool: "北美专用池",
           isStatic: true,
         },
         {
-          id: 'ip-2',
+          id: "ip-2",
-          ipAddress: '185.72.193.54',
+          ipAddress: "185.72.193.54",
-          location: {country: '德国', region: '法兰克福'},
+          location: { country: "德国", region: "法兰克福" },
-          type: '住宅',
+          type: "住宅",
-          status: 'online',
+          status: "online",
           responseTime: 158,
-          lastCheckTime: '2024-05-10 15:28:45',
+          lastCheckTime: "2024-05-10 15:28:45",
-          pool: '欧洲高速池',
+          pool: "欧洲高速池",
           isStatic: false,
         },
         {
-          id: 'ip-3',
+          id: "ip-3",
-          ipAddress: '118.96.244.105',
+          ipAddress: "118.96.244.105",
-          location: {country: '新加坡', region: '中心区'},
+          location: { country: "新加坡", region: "中心区" },
-          type: '移动',
+          type: "移动",
-          status: 'warning',
+          status: "warning",
           responseTime: 312,
-          lastCheckTime: '2024-05-10 15:25:12',
+          lastCheckTime: "2024-05-10 15:25:12",
-          pool: '亚太地区池',
+          pool: "亚太地区池",
           isStatic: false,
         },
         {
-          id: 'ip-4',
+          id: "ip-4",
-          ipAddress: '45.178.29.6',
+          ipAddress: "45.178.29.6",
-          location: {country: '加拿大', region: '多伦多'},
+          location: { country: "加拿大", region: "多伦多" },
-          type: '数据中心',
+          type: "数据中心",
-          status: 'online',
+          status: "online",
           responseTime: 143,
-          lastCheckTime: '2024-05-10 15:23:08',
+          lastCheckTime: "2024-05-10 15:23:08",
-          pool: '北美专用池',
+          pool: "北美专用池",
           isStatic: false,
         },
         {
-          id: 'ip-5',
+          id: "ip-5",
-          ipAddress: '79.114.83.201',
+          ipAddress: "79.114.83.201",
-          location: {country: '英国', region: '伦敦'},
+          location: { country: "英国", region: "伦敦" },
-          type: '住宅',
+          type: "住宅",
-          status: 'offline',
+          status: "offline",
           responseTime: 0,
-          lastCheckTime: '2024-05-10 15:18:33',
+          lastCheckTime: "2024-05-10 15:18:33",
-          pool: '欧洲高速池',
+          pool: "欧洲高速池",
           isStatic: false,
         },
         {
-          id: 'ip-6',
+          id: "ip-6",
-          ipAddress: '164.83.219.47',
+          ipAddress: "164.83.219.47",
-          location: {country: '日本', region: '东京'},
+          location: { country: "日本", region: "东京" },
-          type: '住宅',
+          type: "住宅",
-          status: 'online',
+          status: "online",
           responseTime: 87,
-          lastCheckTime: '2024-05-10 15:15:21',
+          lastCheckTime: "2024-05-10 15:15:21",
-          pool: '亚太地区池',
+          pool: "亚太地区池",
           isStatic: true,
         },
         {
-          id: 'ip-7',
+          id: "ip-7",
-          ipAddress: '221.67.93.143',
+          ipAddress: "221.67.93.143",
-          location: {country: '中国', region: '上海'},
+          location: { country: "中国", region: "上海" },
-          type: '移动',
+          type: "移动",
-          status: 'online',
+          status: "online",
           responseTime: 104,
-          lastCheckTime: '2024-05-10 15:10:46',
+          lastCheckTime: "2024-05-10 15:10:46",
-          pool: '亚太地区池',
+          pool: "亚太地区池",
           isStatic: false,
         },
         {
-          id: 'ip-8',
+          id: "ip-8",
-          ipAddress: '37.209.148.72',
+          ipAddress: "37.209.148.72",
-          location: {country: '法国', region: '巴黎'},
+          location: { country: "法国", region: "巴黎" },
-          type: '数据中心',
+          type: "数据中心",
-          status: 'warning',
+          status: "warning",
           responseTime: 276,
-          lastCheckTime: '2024-05-10 15:05:19',
+          lastCheckTime: "2024-05-10 15:05:19",
-          pool: '欧洲高速池',
+          pool: "欧洲高速池",
           isStatic: false,
         },
       ])
@@ -129,16 +129,16 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
   // 过滤节点数据
   const filteredNodes = nodes.filter(node => {
     return (
-      (searchTerm === '' ||
+      (searchTerm === "" ||
         node.ipAddress.includes(searchTerm) ||
         node.location.country.includes(searchTerm) ||
         node.pool.includes(searchTerm)) &&
-      (filterStatus === 'all' ||
+      (filterStatus === "all" ||
-        (filterStatus === 'online' && node.status === 'online') ||
+        (filterStatus === "online" && node.status === "online") ||
-        (filterStatus === 'offline' && node.status === 'offline') ||
+        (filterStatus === "offline" && node.status === "offline") ||
-        (filterStatus === 'warning' && node.status === 'warning')) &&
+        (filterStatus === "warning" && node.status === "warning")) &&
-      (filterType === 'all' || node.type === filterType) &&
+      (filterType === "all" || node.type === filterType) &&
-      (filterPool === 'all' || node.pool === filterPool)
+      (filterPool === "all" || node.pool === filterPool)
     )
   })
 
@@ -151,25 +151,43 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
           <div className="flex justify-between items-center">
             <h1 className="text-lg font-bold text-gray-900">节点列表</h1>
             <div className="flex gap-2">
-              <button
+              <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">
-                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
-                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  className="w-4 h-4 mr-1"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
                   <path
-                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    strokeLinecap="round"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                    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
+              <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">
-                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
-                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  className="w-4 h-4 mr-1"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                  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>
+          <p className="mt-1 text-sm text-gray-500">
+            查看和管理所有代理IP资源，支持多维度筛选
+          </p>
         </div>
 
         {/* 统计信息区域 - 色块风格 */}
@@ -178,15 +196,25 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
           <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">
+                <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}
+                    strokeLinecap="round"
-                    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"/>
+                    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 className="text-lg font-semibold text-gray-900">
+                  152,487
+                </div>
               </div>
             </div>
           </div>
@@ -195,18 +223,30 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
           <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">
+                <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}
+                    strokeLinecap="round"
-                    d="M5 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    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>
+                  <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 className="text-lg font-semibold text-gray-900">138,954</div>
               </div>
             </div>
           </div>
@@ -215,16 +255,26 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
           <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">
+                <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}
+                    strokeLinecap="round"
-                    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"/>
+                    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>
+                  <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>
@@ -235,16 +285,26 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
           <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">
+                <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}
+                    strokeLinecap="round"
-                    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"/>
+                    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>
+                  <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>
@@ -285,7 +345,7 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
               <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)}
+                onChange={e => setFilterStatus(e.target.value)}
               >
                 <option value="all">全部状态</option>
                 <option value="online">在线</option>
@@ -296,7 +356,7 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
               <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)}
+                onChange={e => setFilterType(e.target.value)}
               >
                 <option value="all">全部类型</option>
                 <option value="数据中心">数据中心</option>
@@ -307,7 +367,7 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
               <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)}
+                onChange={e => setFilterPool(e.target.value)}
               >
                 <option value="all">全部池</option>
                 <option value="北美专用池">北美专用池</option>
@@ -327,7 +387,14 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
               <path
                 className="opacity-75"
                 fill="currentColor"
@@ -340,79 +407,133 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
             <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">
+                  <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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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'}>
+                  <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 ${
+                        <span
-                node.status === 'online' ? 'bg-green-500' :
+                          className={`w-2 h-2 rounded-full mr-2 ${
-                  node.status === 'offline' ? 'bg-red-500' : 'bg-yellow-500'
+                            node.status === "online"
-              }`}></span>
+                              ? "bg-green-500"
-                        <span className="font-medium text-gray-900">{node.ipAddress}</span>
+                              : 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>
+                          </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-gray-900">
-                      <div className="text-xs text-gray-500">{node.location.region}</div>
+                        {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 ${
+                      <span
-              node.type === '数据中心' ? 'bg-purple-100 text-purple-800' :
+                        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                node.type === '住宅' ? 'bg-blue-100 text-blue-800' : 'bg-indigo-100 text-indigo-800'
+                          node.type === "数据中心"
-            }`}>
+                            ? "bg-purple-100 text-purple-800"
-              {node.type}
+                            : node.type === "住宅"
-            </span>
+                              ? "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 ${
+                      <span
-              node.status === 'online' ? 'bg-green-100 text-green-800' :
+                        className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                node.status === 'offline' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                          node.status === "online"
-            }`}>
+                            ? "bg-green-100 text-green-800"
-              {node.status === 'online' ? '在线' : node.status === 'offline' ? '离线' : '异常'}
+                            : node.status === "offline"
-            </span>
+                              ? "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 ${
+                          <span
-                  node.responseTime < 150 ? 'text-green-600' :
+                            className={`font-medium ${
-                    node.responseTime < 250 ? 'text-yellow-600' : 'text-red-600'
+                              node.responseTime < 150
-                }`}>
+                                ? "text-green-600"
-                  {node.responseTime} ms
+                                : node.responseTime < 250
-                </span>
+                                  ? "text-yellow-600"
+                                  : "text-red-600"
+                            }`}
+                          >
+                            {node.responseTime} ms
+                          </span>
                         </div>
                       ) : (
                         <span className="text-gray-400">-</span>
@@ -424,7 +545,10 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
                     </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
+                        href={`/proxy/nodes/${node.id}`}
+                        className="text-blue-600 hover:text-blue-900"
+                      >
                         详情
                       </Link>
                       <button className="text-gray-600 hover:text-gray-900">
@@ -442,47 +566,53 @@ export default function ProxyNodesPage(props: ProxyNodesPageProps) {
         <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
+              显示 <span className="font-medium">1</span> 至{" "}
-              className="font-medium">152,487</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
+                <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">
-                  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
-                  <svg className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    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"/>
+                      clipRule="evenodd"
+                    />
                   </svg>
                 </button>
-                <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">
-                  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
+                <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">
-                  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
+                <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">
-                  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
+                <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">
-                  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>
-          </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">
-                <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
+                <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">
-                  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
-                  <svg className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    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"/>
+                      clipRule="evenodd"
+                    />
                   </svg>
                 </button>
               </nav>

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

@@ -1,28 +1,28 @@
-'use client'
+"use client"
-import {useState, useEffect} from 'react'
+import Link from "next/link"
-import Link from 'next/link'
+import { useEffect, useState } from "react"
 
 export type ProxyPoolsPageProps = {}
 
 // 定义IP池接口
 interface ProxyPool {
-  id: string;
+  id: string
-  name: string;
+  name: string
-  description: string;
+  description: string
-  ips: number;
+  ips: number
-  activeIps: number;
+  activeIps: number
-  region: string;
+  region: string
-  type: string;
+  type: string
-  createdAt: string;
+  createdAt: string
-  status: 'active' | 'inactive' | 'maintenance';
+  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 [searchTerm, setSearchTerm] = useState<string>("")
-  const [filterStatus, setFilterStatus] = useState<string>('all')
+  const [filterStatus, setFilterStatus] = useState<string>("all")
-  const [filterRegion, setFilterRegion] = useState<string>('all')
+  const [filterRegion, setFilterRegion] = useState<string>("all")
 
   // 模拟数据加载
   useEffect(() => {
@@ -30,59 +30,59 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
     setTimeout(() => {
       setPools([
         {
-          id: 'pool-1',
+          id: "pool-1",
-          name: '全球通用池',
+          name: "全球通用池",
-          description: '包含全球多个地区的高质量IP',
+          description: "包含全球多个地区的高质量IP",
           ips: 5000,
           activeIps: 4328,
-          region: '全球',
+          region: "全球",
-          type: '住宅IP',
+          type: "住宅IP",
-          createdAt: '2023-10-15',
+          createdAt: "2023-10-15",
-          status: 'active',
+          status: "active",
         },
         {
-          id: 'pool-2',
+          id: "pool-2",
-          name: '北美专用池',
+          name: "北美专用池",
-          description: '美国和加拿大地区专用IP池',
+          description: "美国和加拿大地区专用IP池",
           ips: 3200,
           activeIps: 2950,
-          region: '北美',
+          region: "北美",
-          type: '数据中心IP',
+          type: "数据中心IP",
-          createdAt: '2023-11-02',
+          createdAt: "2023-11-02",
-          status: 'active',
+          status: "active",
         },
         {
-          id: 'pool-3',
+          id: "pool-3",
-          name: '欧洲高速池',
+          name: "欧洲高速池",
-          description: '欧洲地区高速稳定IP',
+          description: "欧洲地区高速稳定IP",
           ips: 2800,
           activeIps: 2180,
-          region: '欧洲',
+          region: "欧洲",
-          type: '住宅IP',
+          type: "住宅IP",
-          createdAt: '2023-09-28',
+          createdAt: "2023-09-28",
-          status: 'active',
+          status: "active",
         },
         {
-          id: 'pool-4',
+          id: "pool-4",
-          name: '亚太地区池',
+          name: "亚太地区池",
-          description: '亚洲和太平洋地区IP',
+          description: "亚洲和太平洋地区IP",
           ips: 4200,
           activeIps: 3890,
-          region: '亚太',
+          region: "亚太",
-          type: '移动IP',
+          type: "移动IP",
-          createdAt: '2023-12-05',
+          createdAt: "2023-12-05",
-          status: 'maintenance',
+          status: "maintenance",
         },
         {
-          id: 'pool-5',
+          id: "pool-5",
-          name: '电商专用池',
+          name: "电商专用池",
-          description: '适用于电商平台的IP池',
+          description: "适用于电商平台的IP池",
           ips: 1500,
           activeIps: 1200,
-          region: '全球',
+          region: "全球",
-          type: '住宅IP',
+          type: "住宅IP",
-          createdAt: '2024-01-10',
+          createdAt: "2024-01-10",
-          status: 'inactive',
+          status: "inactive",
         },
       ])
       setLoading(false)
@@ -92,25 +92,25 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
   // 过滤IP池
   const filteredPools = pools.filter(pool => {
     return (
-      (searchTerm === '' ||
+      (searchTerm === "" ||
         pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
         pool.description.toLowerCase().includes(searchTerm.toLowerCase())) &&
-      (filterStatus === 'all' || pool.status === filterStatus) &&
+      (filterStatus === "all" || pool.status === filterStatus) &&
-      (filterRegion === 'all' || pool.region === filterRegion)
+      (filterRegion === "all" || pool.region === filterRegion)
     )
   })
 
   // 获取状态颜色和文本
   const getStatusInfo = (status: string) => {
     switch (status) {
-      case 'active':
+      case "active":
-        return {color: 'bg-green-100 text-green-800', text: '运行中'}
+        return { color: "bg-green-100 text-green-800", text: "运行中" }
-      case 'inactive':
+      case "inactive":
-        return {color: 'bg-gray-100 text-gray-800', text: '未启用'}
+        return { color: "bg-gray-100 text-gray-800", text: "未启用" }
-      case 'maintenance':
+      case "maintenance":
-        return {color: 'bg-yellow-100 text-yellow-800', text: '维护中'}
+        return { color: "bg-yellow-100 text-yellow-800", text: "维护中" }
       default:
-        return {color: 'bg-gray-100 text-gray-800', text: '未知'}
+        return { color: "bg-gray-100 text-gray-800", text: "未知" }
     }
   }
 
@@ -122,10 +122,19 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
           <h1 className="text-2xl font-bold text-gray-900">IP池管理</h1>
           <p className="mt-1 text-sm text-gray-500">管理和配置代理IP池</p>
         </div>
-        <button
+        <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
-          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
+          <svg
-          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            className="w-4 h-4 mr-2"
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+            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>
@@ -140,7 +149,7 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
               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)}
+              onChange={e => setSearchTerm(e.target.value)}
             />
             <svg
               className="absolute right-3 top-2.5 h-5 w-5 text-gray-400"
@@ -159,11 +168,13 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
 
           <div className="flex space-x-4">
             <div className="w-full">
-              <label className="block text-sm font-medium text-gray-700 mb-1">状态</label>
+              <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)}
+                onChange={e => setFilterStatus(e.target.value)}
               >
                 <option value="all">全部状态</option>
                 <option value="active">运行中</option>
@@ -174,11 +185,13 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
           </div>
 
           <div className="w-full">
-            <label className="block text-sm font-medium text-gray-700 mb-1">地区</label>
+            <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)}
+              onChange={e => setFilterRegion(e.target.value)}
             >
               <option value="all">全部地区</option>
               <option value="全球">全球</option>
@@ -195,20 +208,40 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
         {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"
+              className="animate-spin h-8 w-8 text-blue-600"
-              viewBox="0 0 24 24">
+              xmlns="http://www.w3.org/2000/svg"
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              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"
+                className="opacity-75"
-                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>
+                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">
+            <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}
+                strokeLinecap="round"
-                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"/>
+                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>
@@ -219,73 +252,93 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
                 <tr>
                   <th
                     scope="col"
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    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">
+                    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">
+                    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">
+                    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">
+                    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">
+                    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">
+                    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) => {
+                {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 font-medium text-gray-900">
-                            <div className="text-sm text-gray-500 max-w-xs truncate">{pool.description}</div>
+                              {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-900">
-                        <div className="text-sm text-gray-500">活跃IP: {pool.activeIps.toLocaleString()}</div>
+                          总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}%`}}
+                            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>
+                        <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}`}>
+                          className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusInfo.color}`}
+                        >
                           {statusInfo.text}
                         </span>
                       </td>
@@ -293,11 +346,16 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
                         {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
+                          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">
+                          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">
@@ -318,10 +376,18 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
         <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">
+              <svg
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
                 <path
-                  strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  strokeLinecap="round"
-                  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"/>
+                  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">
@@ -332,7 +398,9 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
           <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>
+              <span className="font-medium text-gray-900">
+                {pools.filter(p => p.status === "active").length}
+              </span>
             </div>
           </div>
         </div>
@@ -340,16 +408,26 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
         <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">
+              <svg
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
                 <path
-                  strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  strokeLinecap="round"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  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()}
+                {pools
+                  .reduce((sum, pool) => sum + pool.ips, 0)
+                  .toLocaleString()}
               </div>
             </div>
           </div>
@@ -357,7 +435,9 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
             <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()}
+                {pools
+                  .reduce((sum, pool) => sum + pool.activeIps, 0)
+                  .toLocaleString()}
               </span>
             </div>
           </div>
@@ -366,17 +446,29 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
         <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">
+              <svg
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
                 <path
-                  strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  strokeLinecap="round"
-                  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"/>
+                  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) /
+                {Math.round(
-                  pools.reduce((sum, pool) => sum + pool.ips, 0)) * 100)}%
+                  (pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
+                    pools.reduce((sum, pool) => sum + pool.ips, 0)) *
+                    100,
+                )}
+                %
               </div>
             </div>
           </div>
@@ -385,8 +477,11 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
               <div
                 className="bg-purple-600 h-2 rounded-full"
                 style={{
-                  width: `${(pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
+                  width: `${
-                    pools.reduce((sum, pool) => sum + pool.ips, 0)) * 100}%`,
+                    (pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
+                      pools.reduce((sum, pool) => sum + pool.ips, 0)) *
+                    100
+                  }%`,
                 }}
               ></div>
             </div>
@@ -398,10 +493,18 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
       <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">
+            <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}
+                strokeLinecap="round"
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                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">
@@ -409,7 +512,10 @@ export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
               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">
+              <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>

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

@@ -56,7 +56,7 @@ const filterSchema = z
     }
   })
 
-type FilterFormValues = z.infer<typeof filterSchema>
+type FormValues = z.infer<typeof filterSchema>
 
 interface FilterParams {
   user_phone?: string
@@ -68,7 +68,7 @@ interface FilterParams {
   expired?: boolean
 }
 
-// 获取资源类型（从内部对象获取）
+// 获取资源类型
 function getResourceType(resource: Resources): number {
   if ("short" in resource && resource.short) {
     return resource.short.type
@@ -125,7 +125,6 @@ function getLastAt(resource: Resources): Date | null | undefined {
 // 资源类型徽章
 function ResourceTypeBadge({ resource }: { resource: Resources }) {
   const type = getResourceType(resource)
-
   if (type === 1) {
     return (
       <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
@@ -206,8 +205,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
   const listFn = isLong ? listResourceLong : listResourceShort
   const [filters, setFilters] = useState<FilterParams>({})
   const [updatingId, setUpdatingId] = useState<number | null>(null)
-
+  const { control, handleSubmit, reset } = useForm<FormValues>({
-  const { control, handleSubmit, reset } = useForm<FilterFormValues>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
       user_phone: "",
@@ -228,9 +226,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
   )
 
   const table = useDataTable<Resources>(fetchResources)
-
   console.log(table, "我的套餐的table")
-
   const refreshTable = useCallback(() => {
     setFilters(prev => ({ ...prev }))
   }, [])
@@ -392,12 +388,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
           ]
         : []),
       {
+        id: "action",
+        meta: { pin: "right" },
         header: "状态",
         cell: ({ row }: { row: { original: Resources } }) => {
           const resource = row.original
           const isLoading = updatingId === resource.id
           const currentActive = resource.active
-
           return (
             <div className="flex items-center gap-2">
               <Select
@@ -442,7 +439,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
               </Field>
             )}
           />
-
           <Controller
             name="resource_no"
             control={control}
@@ -457,7 +453,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
               </Field>
             )}
           />
-
           <Controller
             name="status"
             control={control}
@@ -478,7 +473,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
               </Field>
             )}
           />
-
           <Controller
             name="type"
             control={control}
@@ -533,7 +527,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
               </Field>
             )}
           />
-
           <Controller
             name="created_at_end"
             control={control}
@@ -549,22 +542,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
             )}
           />
         </div>
-
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
           <Button type="submit">筛选</Button>
           <Button
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
+              reset()
-                user_phone: "",
-                resource_no: "",
-                status: "all",
-                type: "all",
-                created_at_start: "",
-                created_at_end: "",
-                expired: "all",
-              })
               setFilters({})
               table.pagination.onPageChange(1)
             }}

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

@@ -244,15 +244,7 @@ export default function TradePage() {
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
+              reset()
-                user_phone: "",
-                inner_no: "",
-                method: "all",
-                platform: "all",
-                status: "all",
-                created_at_start: "",
-                created_at_end: "",
-              })
               setFilters({})
               table.pagination.onPageChange(1)
             }}

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

@@ -46,8 +46,6 @@ export default function UserPage() {
     setLoading(true)
     try {
       const res = await getPageUser(filters)
-      console.log(res, "res")
-
       if (res.success) {
         const req = [{ ...res.data }]
         setUserList(req)

src/app/globals.css

@@ -3,122 +3,122 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --color-background: var(--background);
+  --color-background: var(--background);
-    --color-foreground: var(--foreground);
+  --color-foreground: var(--foreground);
-    --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-geist-sans);
-    --font-mono: var(--font-geist-mono);
+  --font-mono: var(--font-geist-mono);
-    --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
+  --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
+  --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
+  --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
+  --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
+  --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
+  --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
+  --color-ring: var(--ring);
-    --color-input: var(--input);
+  --color-input: var(--input);
-    --color-border: var(--border);
+  --color-border: var(--border);
-    --color-destructive: var(--destructive);
+  --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
+  --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
+  --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
+  --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
+  --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
+  --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
+  --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
+  --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
+  --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
+  --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
+  --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
+  --color-card: var(--card);
-    --radius-sm: calc(var(--radius) - 4px);
+  --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
+  --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
+  --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
+  --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
 :root {
-    --radius: 0.625rem;
+  --radius: 0.625rem;
-    --background: oklch(1 0 0);
+  --background: oklch(1 0 0);
-    --foreground: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.13 0.028 261.692);
-    --card: oklch(1 0 0);
+  --card: oklch(1 0 0);
-    --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: oklch(0.13 0.028 261.692);
-    --popover: oklch(1 0 0);
+  --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.13 0.028 261.692);
+  --popover-foreground: oklch(0.13 0.028 261.692);
-    --primary: oklch(0.7 0.12 265);
+  --primary: oklch(0.7 0.12 265);
-    --primary-foreground: oklch(0.985 0.002 247.839);
+  --primary-foreground: oklch(0.985 0.002 247.839);
-    --secondary: oklch(0.967 0.003 264.542);
+  --secondary: oklch(0.967 0.003 264.542);
-    --secondary-foreground: oklch(0.21 0.034 264.665);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
-    --muted: oklch(0.967 0.003 264.542);
+  --muted: oklch(0.967 0.003 264.542);
-    --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted-foreground: oklch(0.551 0.027 264.364);
-    --accent: oklch(0.967 0.003 264.542);
+  --accent: oklch(0.967 0.003 264.542);
-    --accent-foreground: oklch(0.21 0.034 264.665);
+  --accent-foreground: oklch(0.21 0.034 264.665);
-    --destructive: oklch(0.577 0.245 27.325);
+  --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.928 0.006 264.531);
+  --border: oklch(0.928 0.006 264.531);
-    --input: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
-    --ring: oklch(0.7 0.12 265);
+  --ring: oklch(0.7 0.12 265);
-    --chart-1: oklch(0.646 0.222 41.116);
+  --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
+  --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
+  --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
+  --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
+  --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar: oklch(0.985 0.002 247.839);
-    --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
-    --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
-    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-    --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
-    --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-    --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-border: oklch(0.928 0.006 264.531);
-    --sidebar-ring: oklch(0.707 0.022 261.325);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
 }
 
 .dark {
-    --background: oklch(0.13 0.028 261.692);
+  --background: oklch(0.13 0.028 261.692);
-    --foreground: oklch(0.985 0.002 247.839);
+  --foreground: oklch(0.985 0.002 247.839);
-    --card: oklch(0.21 0.034 264.665);
+  --card: oklch(0.21 0.034 264.665);
-    --card-foreground: oklch(0.985 0.002 247.839);
+  --card-foreground: oklch(0.985 0.002 247.839);
-    --popover: oklch(0.21 0.034 264.665);
+  --popover: oklch(0.21 0.034 264.665);
-    --popover-foreground: oklch(0.985 0.002 247.839);
+  --popover-foreground: oklch(0.985 0.002 247.839);
-    --primary: oklch(0.928 0.006 264.531);
+  --primary: oklch(0.928 0.006 264.531);
-    --primary-foreground: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.21 0.034 264.665);
-    --secondary: oklch(0.278 0.033 256.848);
+  --secondary: oklch(0.278 0.033 256.848);
-    --secondary-foreground: oklch(0.985 0.002 247.839);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
-    --muted: oklch(0.278 0.033 256.848);
+  --muted: oklch(0.278 0.033 256.848);
-    --muted-foreground: oklch(0.707 0.022 261.325);
+  --muted-foreground: oklch(0.707 0.022 261.325);
-    --accent: oklch(0.278 0.033 256.848);
+  --accent: oklch(0.278 0.033 256.848);
-    --accent-foreground: oklch(0.985 0.002 247.839);
+  --accent-foreground: oklch(0.985 0.002 247.839);
-    --destructive: oklch(0.704 0.191 22.216);
+  --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
+  --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
+  --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.551 0.027 264.364);
+  --ring: oklch(0.551 0.027 264.364);
-    --chart-1: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
+  --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
+  --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
+  --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
+  --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar: oklch(0.21 0.034 264.665);
-    --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-    --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
-    --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
-    --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
 }
 
 @layer base {
-    * {
+  * {
-        @apply border-border outline-ring/50;
+    @apply border-border outline-ring/50;
-    }
+  }
-    body {
+  body {
-        @apply bg-background text-foreground;
+    @apply bg-background text-foreground;
-    }
+  }
 }

src/components/data-table/component.tsx

@@ -3,11 +3,10 @@ import {
   type ColumnDef,
   flexRender,
   getCoreRowModel,
-  getExpandedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 import { Loader } from "lucide-react"
-import { type CSSProperties, useCallback, useMemo } from "react"
+import type { CSSProperties } from "react"
 import { Pagination, type PaginationProps } from "@/components/ui/pagination"
 import {
   TableBody,

src/components/data-table/hooks.ts

@@ -1,5 +1,5 @@
 "use client"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { toast } from "sonner"
 import { useStatus } from "@/hooks/data"
 import type { ApiResponse, PageRecord } from "@/lib/api"
@@ -13,15 +13,12 @@ export function useDataTable<T>(
   const [page, setPage] = useState(1)
   const [size, setSize] = useState(10)
   const [total, setTotal] = useState(0)
-  const fetchRef = useRef(fetch)
+
-  useEffect(() => {
+  const _refresh = useCallback(
-    fetchRef.current = fetch
+    async (_page: number, _size: number) => {
-  }, [fetch])
-  const refresh = useCallback(
-    async (_page?: number, _size?: number) => {
       setStatus("load")
       try {
-        const resp = await fetch(_page ?? page, _size ?? size)
+        const resp = await fetch(_page, _size)
         if (!resp.success) {
           throw new Error("获取数据失败")
         }
@@ -37,21 +34,22 @@ export function useDataTable<T>(
         setStatus("fail")
       }
     },
-    [fetch, page, size, setStatus],
+    [fetch, setStatus],
   )
 
-  const onPageChange = (page: number) => {
+  const onPageChange = useCallback(
-    setPage(page)
+    (page: number) => _refresh(page, size),
-  }
+    [_refresh, size],
+  )
 
-  const onSizeChange = (size: number) => {
+  const onSizeChange = useCallback(
-    setPage(1)
+    (size: number) => _refresh(1, size),
-    setSize(size)
+    [_refresh],
-  }
+  )
 
   useEffect(() => {
-    refresh(page, size).then()
+    _refresh(1, size)
-  }, [refresh, page, size])
+  }, [_refresh, size])
 
   return {
     data,
@@ -64,6 +62,8 @@ export function useDataTable<T>(
       onPageChange,
       onSizeChange,
     },
-    refresh,
+    refresh: (_page?: number, _size?: number) => {
+      _refresh(_page ?? page, _size ?? size)
+    },
   }
 }

src/components/ui/alert-dialog.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
-
+import type * as React from "react"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 function AlertDialog({
   ...props
@@ -37,7 +36,7 @@ function AlertDialogOverlay({
       data-slot="alert-dialog-overlay"
       className={cn(
         "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -59,7 +58,7 @@ function AlertDialogContent({
         data-size={size}
         className={cn(
           "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs 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 data-[size=default]:sm:max-w-lg",
-          className
+          className,
         )}
         {...props}
       />
@@ -76,7 +75,7 @@ function AlertDialogHeader({
       data-slot="alert-dialog-header"
       className={cn(
         "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-        className
+        className,
       )}
       {...props}
     />
@@ -92,7 +91,7 @@ function AlertDialogFooter({
       data-slot="alert-dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     />
@@ -108,7 +107,7 @@ function AlertDialogTitle({
       data-slot="alert-dialog-title"
       className={cn(
         "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
+        className,
       )}
       {...props}
     />
@@ -137,7 +136,7 @@ function AlertDialogMedia({
       data-slot="alert-dialog-media"
       className={cn(
         "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/badge.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -22,7 +22,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function Badge({

src/components/ui/dialog.tsx

@@ -1,11 +1,10 @@
 "use client"
 
-import * as React from "react"
 import { XIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
-
+import type * as React from "react"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 function Dialog({
   ...props
@@ -40,7 +39,7 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -62,7 +61,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none 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 sm:max-w-lg",
-          className
+          className,
         )}
         {...props}
       >
@@ -104,7 +103,7 @@ function DialogFooter({
       data-slot="dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     >

src/components/ui/field.tsx

@@ -1,11 +1,10 @@
 "use client"
 
-import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
+import { useMemo } from "react"
-import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
@@ -14,7 +13,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        className,
       )}
       {...props}
     />
@@ -34,7 +33,7 @@ function FieldLegend({
         "mb-3 font-medium",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
-        className
+        className,
       )}
       {...props}
     />
@@ -47,7 +46,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-group"
       className={cn(
         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -75,7 +74,7 @@ const fieldVariants = cva(
     defaultVariants: {
       orientation: "vertical",
     },
-  }
+  },
 )
 
 function Field({
@@ -100,7 +99,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-content"
       className={cn(
         "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
+        className,
       )}
       {...props}
     />
@@ -118,7 +117,7 @@ function FieldLabel({
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
+        className,
       )}
       {...props}
     />
@@ -131,7 +130,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-label"
       className={cn(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -146,7 +145,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
         "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -166,7 +165,7 @@ function FieldSeparator({
       data-content={!!children}
       className={cn(
         "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -201,10 +200,10 @@ function FieldError({
     }
 
     const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
+      ...new Map(errors.map(error => [error?.message, error])).values(),
     ]
 
-    if (uniqueErrors?.length == 1) {
+    if (uniqueErrors?.length === 1) {
       return uniqueErrors[0]?.message
     }
 
@@ -212,7 +211,7 @@ function FieldError({
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+            error?.message && <li key={index}>{error.message}</li>,
         )}
       </ul>
     )

src/components/ui/hover-card.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import { HoverCard as HoverCardPrimitive } from "radix-ui"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -33,7 +33,7 @@ function HoverCardContent({
         sideOffset={sideOffset}
         className={cn(
           "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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
+          className,
         )}
         {...props}
       />

src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -11,7 +11,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -14,7 +14,7 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/pagination.tsx

@@ -193,7 +193,6 @@ function PaginationLayout({
 }: React.ComponentProps<"nav">) {
   return (
     <nav
-      role="navigation"
       aria-label="pagination"
       data-slot="pagination"
       className={cn("flex-none", className)}

src/components/ui/select.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -38,7 +38,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -65,7 +65,7 @@ function SelectContent({
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         align={align}
@@ -76,7 +76,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
@@ -110,7 +110,7 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -149,7 +149,7 @@ function SelectScrollUpButton({
       data-slot="select-scroll-up-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
@@ -167,7 +167,7 @@ function SelectScrollDownButton({
       data-slot="select-scroll-down-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >

src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -18,7 +18,7 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -45,7 +45,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
       data-slot="table-footer"
       className={cn(
         "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -58,7 +58,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
       data-slot="table-row"
       className={cn(
         "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
+        className,
       )}
       {...props}
     />
@@ -71,7 +71,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
       data-slot="table-head"
       className={cn(
         "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+        className,
       )}
       {...props}
     />
@@ -84,7 +84,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
       data-slot="table-cell"
       className={cn(
         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -8,7 +8,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -47,7 +47,7 @@ function TooltipContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          className,
         )}
         {...props}
       >

src/hooks/data.ts

@@ -1,10 +1,4 @@
-import {
+import { useCallback, useState } from "react"
-  type Dispatch,
-  type SetStateAction,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
 import { toast } from "sonner"
 import type { useDataTable } from "@/components/data-table"
 import type { ApiResponse } from "@/lib/api"

src/models/trade.ts

@@ -3,8 +3,9 @@ import type { User } from "./user"
 export type Trade = {
   id: number
   inner_no: string
-  method: number
+  method: number // 支付方式：1-支付宝，2-微信，3-商福通，4-商福通渠道支付宝，5-商福通渠道微信
   payment: string
+  acquirer: number //收单机构：1-支付宝，2-微信，3-银联
   platform: number
   type: number
   subject: string

src/proxy.ts

@@ -1,4 +1,3 @@
-import { useSetAtom } from "jotai"
 import { type NextRequest, NextResponse, type ProxyConfig } from "next/server"
 import { refreshAuth } from "@/actions/auth"
 

tsconfig.json

@@ -15,19 +15,19 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
+        "name": "next"
-      },
+      }
     ],
     "paths": {
-      "@/*": ["./src/*"],
+      "@/*": ["./src/*"]
-    },
+    }
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }