优化组件页面代码

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<FilterFormValues>({
+  const { control, handleSubmit, reset } = useForm<FormValues>({
     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({
-                user_phone: "",
-                resource_no: "",
-                status: "all",
-                type: "all",
-                created_at_start: "",
-                created_at_end: "",
-                expired: "all",
-              })
+              reset()
               setFilters({})
               table.pagination.onPageChange(1)
             }}