搜索框添加一键清除功能

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

@@ -1,6 +1,7 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
+import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useCallback } from "react"
 import { Controller, useForm } from "react-hook-form"
@@ -95,7 +96,7 @@ export default function BalancePage() {
                 className="w-40 flex-none"
               >
                 <FieldLabel>会员号</FieldLabel>
-                <Input {...field} placeholder="请输入会员号" />
+                <Input {...field} placeholder="请输入会员号" clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -109,7 +110,7 @@ export default function BalancePage() {
                 className="w-40 flex-none"
               >
                 <FieldLabel>账单号</FieldLabel>
-                <Input {...field} placeholder="请输入账单号" />
+                <Input {...field} placeholder="请输入账单号" clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -123,7 +124,7 @@ export default function BalancePage() {
                 className="w-40 flex-none"
               >
                 <FieldLabel>开始时间</FieldLabel>
-                <Input type="date" {...field} />
+                <Input type="date" {...field} clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -137,7 +138,7 @@ export default function BalancePage() {
                 className="w-40 flex-none"
               >
                 <FieldLabel>结束时间</FieldLabel>
-                <Input type="date" {...field} />
+                <Input type="date" {...field} clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -174,7 +175,20 @@ export default function BalancePage() {
             },
             {
               header: "账单编号",
-              accessorFn: row => row.bill?.bill_no || "",
+              accessorKey: "bill?.bill_no",
+              cell: ({ row }) => {
+                const bill_no = row.original.bill?.bill_no
+                return (
+                  <Link
+                    href={`/billing?bill_no=${bill_no}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600"
+                  >
+                    {bill_no}
+                  </Link>
+                )
+              },
             },
             {
               header: "管理员",