搜索框添加一键清除功能

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

@@ -2,7 +2,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format, isBefore, isSameDay } from "date-fns"
 import { Box, Loader2, Timer } from "lucide-react"
-import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useCallback, useMemo, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
@@ -17,6 +16,12 @@ import { DataTable, useDataTable } from "@/components/data-table"
 import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
   Field,
   FieldError,
@@ -249,10 +254,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
 
   const table = useDataTable<Resources>(fetchResources)
 
-  // const refreshTable = useCallback(() => {
-  //   setFilters(prev => ({ ...prev }))
-  // }, [])
-
   const handleStatusChange = useCallback(
     async (resource: Resources, newStatusValue: string) => {
       const newActive = newStatusValue === "0"
@@ -322,14 +323,34 @@ function ResourceList({ resourceType }: ResourceListProps) {
             <div className="flex flex-col gap-1">
               <div>{name}</div>
               <div className="flex items-center gap-2">
-                <Link
-                  href={`/batch?resource_no=${resourceNo}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-xs text-gray-500"
-                >
-                  {resourceNo}
-                </Link>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <span className="text-xs text-gray-500">{resourceNo}</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-40">
+                    <DropdownMenuItem
+                      onClick={() => {
+                        router.push(`/billing?resource_no=${resourceNo}`)
+                      }}
+                    >
+                      账单详情
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        router.push(`/batch?resource_no=${resourceNo}`)
+                      }}
+                    >
+                      提取记录
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        router.push(`/channel?resource_no=${resourceNo}`)
+                      }}
+                    >
+                      IP管理
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
                 <ExpireBadge expireAt={expireAt} />
               </div>
             </div>
@@ -458,7 +479,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
         },
       },
     ],
-    [isLong, updatingId, handleStatusChange, handleCheckipChange],
+    [isLong, updatingId, handleStatusChange, handleCheckipChange, router],
   )
 
   return (
@@ -474,7 +495,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
                 className="w-40 flex-none"
               >
                 <FieldLabel>会员号</FieldLabel>
-                <Input {...field} placeholder="请输入会员号" />
+                <Input {...field} placeholder="请输入会员号" clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -488,7 +509,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
                 className="w-40 flex-none"
               >
                 <FieldLabel>套餐号</FieldLabel>
-                <Input {...field} placeholder="请输入套餐号" />
+                <Input {...field} placeholder="请输入套餐号" clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -562,7 +583,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
                 className="w-40 flex-none"
               >
                 <FieldLabel>开始时间</FieldLabel>
-                <Input type="date" {...field} />
+                <Input type="date" {...field} clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
@@ -576,7 +597,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
                 className="w-40 flex-none"
               >
                 <FieldLabel>结束时间</FieldLabel>
-                <Input type="date" {...field} />
+                <Input type="date" {...field} clearable />
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}