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

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

@@ -1,25 +1,214 @@
 "use client"
+import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { Suspense } from "react"
+import { Suspense, useCallback, useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { z } from "zod"
 import { bindAdmin, getPageUsers } from "@/actions/user"
 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { useFetch } from "@/hooks/data"
 import type { User } from "@/models/user"
 
+type FilterValues = {
+  phone?: string
+  name?: string
+  identified?: boolean
+  enabled?: boolean
+  assigned?: boolean
+}
+
+const filterSchema = z.object({
+  phone: z.string().optional(),
+  name: z.string().optional(),
+  identified: z.string().optional(),
+  enabled: z.string().optional(),
+  assigned: z.string().optional(),
+})
+
+type FormValues = z.infer<typeof filterSchema>
+
 export default function UserPage() {
-  const table = useDataTable<User>((page, size) => getPageUsers({ page, size }))
+  const [filters, setFilters] = useState<FilterValues>({})
+
+  const { control, handleSubmit, reset } = useForm<FormValues>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      phone: "",
+      name: "",
+      identified: "all",
+      enabled: "all",
+      assigned: "all",
+    },
+  })
+
+  const fetchUsers = useCallback(
+    (page: number, size: number) => getPageUsers({ page, size, ...filters }),
+    [filters],
+  )
+
+  const table = useDataTable<User>(fetchUsers)
   const bind = useFetch(table, (id: number) => bindAdmin({ id }), {
     done: "用户已认领",
     fail: "用户认领失败",
   })
+
+  const onFilter = handleSubmit(data => {
+    const result: FilterValues = {}
+
+    if (data.phone) result.phone = data.phone
+    if (data.name) result.name = data.name
+    if (data.identified && data.identified !== "all")
+      result.identified = data.identified === "1"
+    if (data.enabled && data.enabled !== "all")
+      result.enabled = data.enabled === "1"
+    if (data.assigned && data.assigned !== "all")
+      result.assigned = data.assigned === "has"
+
+    setFilters(result)
+    table.pagination.onPageChange(1)
+  })
+
   return (
-    <div>
+    <div className="space-y-3">
+      <form onSubmit={onFilter} className="bg-white p-4">
+        <div className="flex flex-wrap items-end gap-4">
+          <Controller
+            name="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>
+            )}
+          />
+
+          <Controller
+            name="name"
+            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="identified"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-24">
+                <FieldLabel>实名状态</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="1">已认证</SelectItem>
+                    <SelectItem value="0">未认证</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="enabled"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-24">
+                <FieldLabel>账号状态</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="1">正常</SelectItem>
+                    <SelectItem value="0">禁用</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+
+          <Controller
+            name="assigned"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-24">
+                <FieldLabel>认领状态</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="has">已认领</SelectItem>
+                    <SelectItem value="none">未认领</SelectItem>
+                  </SelectContent>
+                </Select>
+                <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({
+                phone: "",
+                name: "",
+                identified: "all",
+                enabled: "all",
+                assigned: "all",
+              })
+              setFilters({})
+              table.pagination.onPageChange(1)
+            }}
+          >
+            重置
+          </Button>
+        </FieldGroup>
+      </form>
+
       <Suspense>
         <DataTable<User>
           {...table}
           columns={[
+            { header: "ID", accessorKey: "id" },
             { header: "账号", accessorKey: "username" },
             { header: "手机", accessorKey: "phone" },
             { header: "邮箱", accessorKey: "email" },
@@ -28,60 +217,67 @@ export default function UserPage() {
               header: "余额",
               accessorKey: "balance",
               cell: ({ row }) => {
-                const balance =
-                  typeof row.original.balance === "string"
-                    ? parseFloat(row.original.balance)
-                    : row.original.balance || 0
+                const balance = Number(row.original.balance) || 0
                 return (
-                  <div className="flex gap-1">
-                    <span
-                      className={
-                        balance > 0 ? "text-green-500" : "text-orange-500"
-                      }
-                    >
-                      ￥{balance.toFixed(2)}
-                    </span>
-                  </div>
+                  <span
+                    className={
+                      balance > 0 ? "text-green-500" : "text-orange-500"
+                    }
+                  >
+                    ￥{balance.toFixed(2)}
+                  </span>
                 )
               },
             },
             {
-              header: "认证状态",
+              header: "实名状态",
               accessorKey: "id_type",
+              cell: ({ row }) => (
+                <Badge
+                  variant={row.original.id_type === 1 ? "default" : "secondary"}
+                  className={
+                    row.original.id_type === 1
+                      ? "bg-green-100 text-green-800"
+                      : "bg-gray-100 text-gray-800"
+                  }
+                >
+                  {row.original.id_type === 1 ? "已认证" : "未认证"}
+                </Badge>
+              ),
+            },
+            {
+              header: "身份证号",
+              accessorKey: "id_no",
               cell: ({ row }) => {
-                const status = row.original.id_type
-                return (
-                  <Badge
-                    variant={status === 1 ? "default" : "secondary"}
-                    className={
-                      status === 1
-                        ? "bg-green-100 text-green-800"
-                        : "bg-gray-100 text-gray-800"
-                    }
-                  >
-                    {status === 1 ? "已认证" : "未认证"}
-                  </Badge>
-                )
+                const idNo = row.original.id_no
+                return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : "-"
               },
             },
             {
               header: "账号状态",
               accessorKey: "status",
-              cell: ({ row }) => {
-                const status = row.original.status
-                return status === 1 ? "正常" : ""
-              },
+              cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
             },
             { header: "联系方式", accessorKey: "contact_wechat" },
             {
               header: "管理员",
-              cell: ({ row }) => row.original.admin?.name,
+              cell: ({ row }) => row.original.admin?.name || "-",
             },
             {
               header: "最后登录时间",
               accessorKey: "last_login",
               cell: ({ row }) =>
-                format(new Date(row.original.last_login), "yyyy-MM-dd HH:mm"),
+                row.original.last_login
+                  ? format(
+                      new Date(row.original.last_login),
+                      "yyyy-MM-dd HH:mm",
+                    )
+                  : "-",
+            },
+            {
+              header: "最后登录IP",
+              accessorKey: "last_login_ip",
+              cell: ({ row }) => row.original.last_login_ip || "-",
             },
             {
               header: "创建时间",
@@ -95,7 +291,7 @@ export default function UserPage() {
               header: "操作",
               cell: ctx => (
                 <Button
-                  size={"sm"}
+                  size="sm"
                   onClick={() => bind(ctx.row.original.id)}
                   disabled={!!ctx.row.original.admin_id}
                 >