添加表单查询和调整表格字段以及功能

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

@@ -1,107 +1,375 @@
 "use client"
+import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { Suspense } from "react"
+import { Suspense, useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { z } from "zod"
 import { getPageChannel } from "@/actions/channel"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
 import type { Channel } from "@/models/channel"
 
+type FilterValues = {
+  batch_no?: string
+  user_phone?: string
+  resource_no?: string
+  proxy_host?: string
+  proxy_port?: number
+  node_ip?: string
+  expired_at_start?: Date
+  expired_at_end?: Date
+}
+
+const filterSchema = z
+  .object({
+    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(),
+    expired_at_start: z.string().optional(),
+    expired_at_end: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.expired_at_start && data.expired_at_end) {
+      const start = new Date(data.expired_at_start)
+      const end = new Date(data.expired_at_end)
+
+      if (end < start) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "结束时间不能早于开始时间",
+          path: ["created_at_end"],
+        })
+      }
+    }
+  })
+
+type FilterSchema = z.infer<typeof filterSchema>
+
+// 运营商映射
+const ispMap: Record<number, string> = {
+  1: "电信",
+  2: "联通",
+  3: "移动",
+}
+
 export default function ChannelPage() {
+  const [filters, setFilters] = useState<FilterValues>({})
+
+  const { control, handleSubmit, reset } = useForm<FilterSchema>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      batch_no: "",
+      user_phone: "",
+      resource_no: "",
+      filter_prov: "",
+      filter_city: "",
+      filter_isp: "all",
+      proxy_port: "",
+      proxy_host: "",
+      node_ip: "",
+      expired_at_start: "",
+      expired_at_end: "",
+    },
+  })
+
   const table = useDataTable<Channel>((page, size) =>
-    getPageChannel({ page, size }),
+    getPageChannel({ page, size, ...filters }),
   )
+  console.log(table, "IP管理的table")
+
+  const onFilter = handleSubmit(data => {
+    console.log(data, "data")
+
+    const result: FilterValues = {}
+
+    if (data.batch_no?.trim()) result.batch_no = data.batch_no.trim()
+    if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
+    if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
+    if (data.proxy_host?.trim()) result.proxy_host = data.proxy_host.trim()
+    if (data.proxy_port?.trim())
+      result.proxy_port = Number(data.proxy_port.trim())
+    if (data.node_ip?.trim()) result.node_ip = data.node_ip.trim()
+    if (data.expired_at_start)
+      result.expired_at_start = new Date(data.expired_at_start)
+    if (data.expired_at_end)
+      result.expired_at_end = new Date(data.expired_at_end)
+    setFilters(result)
+    table.pagination.onPageChange(1)
+  })
 
   return (
-    <Suspense>
-      <DataTable<Channel>
-        {...table}
-        columns={[
-          { header: "ID", accessorKey: "id" },
-          { header: "批次号", accessorKey: "batch_no" },
-          { header: "省份", accessorKey: "filter_prov" },
-          { header: "城市", accessorKey: "filter_city" },
-          {
-            header: "运营商",
-            accessorKey: "filter_isp",
-            cell: ({ row }) => {
-              const value = row.getValue("filter_isp")
-              if (!value || value === "all") return "不限"
-              if (value === 1) return "电信"
-              if (value === 2) return "联通"
-              if (value === 3) return "移动"
-              return String(value)
-            },
-          },
-          {
-            header: "代理地址",
-            accessorKey: "host",
-            cell: ({ row }) => {
-              const ip = row.original.host
-              const port = row.original.port
-              return (
-                <span>
-                  {ip}:{port}{" "}
-                </span>
-              )
-            },
-          },
-          {
-            header: "认证方式",
-            cell: ({ row }) => {
-              const channel = row.original
+    <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
+            name="batch_no"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>批次号</FieldLabel>
+                <Input {...field} placeholder="请输入批次号" />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
 
-              const hasWhitelist =
-                channel.whitelists && channel.whitelists.trim() !== ""
-              const hasAuth = channel.username && channel.password
+          <Controller
+            name="user_phone"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>会员号</FieldLabel>
+                <Input {...field} placeholder="请输入会员号" />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
 
-              return (
-                <div className="flex flex-col gap-1 min-w-0">
-                  {hasWhitelist ? (
-                    <div className="flex flex-col">
-                      <span>白名单</span>
-                      <div className="flex flex-wrap gap-1 max-w-50">
-                        {channel.whitelists.split(",").map(ip => (
-                          <Badge key={ip.trim()} variant="secondary">
-                            {ip.trim()}
-                          </Badge>
-                        ))}
+          <Controller
+            name="resource_no"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>套餐号</FieldLabel>
+                <Input {...field} placeholder="请输入套餐号" />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="proxy_host"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>代理IP</FieldLabel>
+                <Input {...field} placeholder="请输入代理IP" />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="proxy_port"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-32 flex-none"
+              >
+                <FieldLabel>代理端口</FieldLabel>
+                <Input {...field} placeholder="请输入代理端口" />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="node_ip"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>节点</FieldLabel>
+                <Input {...field} placeholder="请输入节点" />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="expired_at_start"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>开始时间</FieldLabel>
+                <Input type="date" {...field} />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="expired_at_end"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>结束时间</FieldLabel>
+                <Input type="date" {...field} />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+        </div>
+
+        <FieldGroup className="flex-row justify-start mt-4 gap-2">
+          <Button type="submit">筛选</Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              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)
+            }}
+          >
+            重置
+          </Button>
+        </FieldGroup>
+      </form>
+
+      <Suspense>
+        <DataTable<Channel>
+          {...table}
+          columns={[
+            { header: "ID", accessorKey: "id" },
+            {
+              header: "会员号",
+              accessorFn: row => row.user?.phone || "-",
+            },
+            { header: "套餐号", accessorKey: "resource.resource_no" },
+            { header: "批次号", accessorKey: "batch_no" },
+            {
+              header: "节点",
+              accessorFn: row => row.ip || row.edge_ref || row.edge_id,
+            },
+
+            {
+              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
+                const isp = row.original.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 (
+                  <div className="text-sm">
+                    {parts.length > 0 ? parts.join(" / ") : "不限"}
+                  </div>
+                )
+              },
+            },
+            {
+              header: "网关地址",
+              accessorKey: "host",
+              cell: ({ row }) => {
+                const ip = row.original.host
+                const port = row.original.port
+                return (
+                  <span>
+                    {ip}:{port}{" "}
+                  </span>
+                )
+              },
+            },
+            {
+              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 ? (
+                      <div className="flex flex-col">
+                        <span>白名单</span>
+                        <div className="flex flex-wrap gap-1 max-w-50">
+                          {channel.whitelists.split(",").map(ip => (
+                            <Badge key={ip.trim()} variant="secondary">
+                              {ip.trim()}
+                            </Badge>
+                          ))}
+                        </div>
                       </div>
-                    </div>
-                  ) : hasAuth ? (
-                    <div className="flex flex-col">
-                      <span>账号密码</span>
-                      <Badge variant="secondary">
-                        {channel.username}:{channel.password}
-                      </Badge>
-                    </div>
-                  ) : (
-                    <span className="text-sm text-gray-400">无认证</span>
-                  )}
-                </div>
-              )
+                    ) : hasAuth ? (
+                      <div className="flex flex-col">
+                        <span>账号密码</span>
+                        <Badge variant="secondary">
+                          {channel.username}:{channel.password}
+                        </Badge>
+                      </div>
+                    ) : (
+                      <span className="text-sm text-gray-400">无认证</span>
+                    )}
+                  </div>
+                )
+              },
             },
-          },
-          { header: "资源数量", accessorKey: "resource_id" },
-          {
-            header: "创建时间",
-            accessorKey: "created_at",
-            cell: ({ row }) =>
-              format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
-          },
-          {
-            header: "更新时间",
-            accessorKey: "updated_at",
-            cell: ({ row }) =>
-              format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
-          },
-          {
-            header: "过期时间",
-            accessorKey: "expired_at",
-            cell: ({ row }) =>
-              format(new Date(row.original.expired_at), "yyyy-MM-dd HH:mm"),
-          },
-        ]}
-      />
-    </Suspense>
+            {
+              header: "过期时间",
+              accessorKey: "expired_at",
+              cell: ({ row }) =>
+                format(new Date(row.original.expired_at), "yyyy-MM-dd HH:mm"),
+            },
+          ]}
+        />
+      </Suspense>
+    </div>
   )
 }