完善账单页面，抽取公共页面组件

src/app/admin/resources/page.tsx

@@ -1,31 +1,23 @@
 'use client'
 import {useEffect, useState} from 'react'
 import {PageRecord} from '@/lib/api'
-import {ResourcePss} from '@/lib/models'
+import {Resource} from '@/lib/models'
 import {useStatus} from '@/lib/states'
 import {listResourcePss} from '@/actions/resource'
-import {Box, Eraser, Search, Timer, Trash2} from 'lucide-react'
-import {Pagination} from '@/components/ui/pagination'
+import {Box, Eraser, Search, Timer} from 'lucide-react'
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
 import {Button} from '@/components/ui/button'
-import DataTable from '@/components/DataTable'
+import DataTable from '@/components/data-table'
 import {format, intlFormatDistance, isAfter, isEqual, parse} from 'date-fns'
-import DatePicker from '@/components/DatePicker'
+import DatePicker from '@/components/date-picker'
 import {Form, FormField} from '@/components/ui/form'
 import {useForm} from 'react-hook-form'
 import zod from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {Label} from '@/components/ui/label'
-
-const filterSchema = zod.object({
-  type: zod.enum(['expire', 'quota', 'all']),
-  create_after: zod.date().optional(),
-  create_before: zod.date().optional(),
-  expire_after: zod.date().optional(),
-  expire_before: zod.date().optional(),
-})
-
-type FilterSchema = zod.infer<typeof filterSchema>
+import {Input} from '@/components/ui/input'
+import Page from '@/components/page'
+import {useSearchParams} from 'next/navigation'
 
 export type ResourcesPageProps = {}
 
@@ -36,7 +28,7 @@ export default function ResourcesPage(props: ResourcesPageProps) {
   // ======================
 
   const [status, setStatus] = useStatus()
-  const [data, setData] = useState<PageRecord<ResourcePss>>({
+  const [data, setData] = useState<PageRecord<Resource>>({
     page: 1,
     size: 10,
     total: 0,
@@ -55,12 +47,20 @@ export default function ResourcesPage(props: ResourcesPageProps) {
       const create_before = form.getValues('create_before')
       const expire_after = form.getValues('expire_after')
       const expire_before = form.getValues('expire_before')
+      const resource_no = form.getValues('resource_no')
 
       const res = await listResourcePss({
-        page, size, type, create_after, create_before, expire_after, expire_before,
+        page, size,
+        type,
+        create_after,
+        create_before,
+        expire_after,
+        expire_before,
+        resource_no,
       })
 
       if (res.success) {
+        console.log(res.data)
         setData(res.data)
         setStatus('done')
       }
@@ -81,16 +81,37 @@ export default function ResourcesPage(props: ResourcesPageProps) {
   // 筛选
   // ======================
 
+  const filterSchema = zod.object({
+    resource_no: zod.string().optional().default(''),
+    type: zod.enum(['expire', 'quota', 'all']).default('all'),
+    create_after: zod.date().optional(),
+    create_before: zod.date().optional(),
+    expire_after: zod.date().optional(),
+    expire_before: zod.date().optional(),
+  })
+
+  type FilterSchema = zod.infer<typeof filterSchema>
+
+  const params = useSearchParams()
+  let paramType = params.get('type')
+  if (paramType != 'all' && paramType != 'expire' && paramType != 'quota') {
+    paramType = 'all'
+  }
+
   const form = useForm<FilterSchema>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
-      type: 'all',
+      resource_no: params.get('resource_no') || '',
+      type: paramType as 'expire' | 'quota' | 'all',
+      create_after: params.get('create_after') ? new Date(params.get('create_after')!) : undefined,
+      create_before: params.get('create_before') ? new Date(params.get('create_before')!) : undefined,
+      expire_after: params.get('expire_after') ? new Date(params.get('expire_after')!) : undefined,
+      expire_before: params.get('expire_before') ? new Date(params.get('expire_before')!) : undefined,
     },
   })
 
   const onSubmit = async (value: FilterSchema) => {
-    console.log(value)
-    await refresh(data.page, data.size)
+    await refresh(1, data.size)
   }
 
   // ======================
@@ -98,7 +119,7 @@ export default function ResourcesPage(props: ResourcesPageProps) {
   // ======================
 
   return (
-    <main className={`flex-auto bg-white rounded-tl-xl p-4 flex flex-col gap-4`}>
+    <Page>
 
       {/* 操作区 */}
       <section className={`flex justify-between flex-wrap`}>
@@ -106,7 +127,12 @@ export default function ResourcesPage(props: ResourcesPageProps) {
 
         </div>
 
-        <Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4`}>
+        <Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4 flex-wrap`}>
+          <FormField name={`resource_no`} label={<span className={`text-sm`}>套餐编号</span>}>
+            {({id, field}) => (
+              <Input {...field} id={id} className={`h-9`}/>
+            )}
+          </FormField>
           <FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
             {({id, field}) => (
               <Select value={field.value} onValueChange={field.onChange}>
@@ -173,14 +199,23 @@ export default function ResourcesPage(props: ResourcesPageProps) {
               </FormField>
             </div>
           </div>
-          <Button className={`h-9`}>
-            <Search/>
-            <span>筛选</span>
-          </Button>
-          <Button variant={`outline`} className={`h-9`} onClick={() => form.reset()}>
-            <Eraser/>
-            <span>重置</span>
-          </Button>
+          <div className={`flex gap-4`}>
+            <Button className={`h-9`}>
+              <Search/>
+              <span>筛选</span>
+            </Button>
+            <Button variant={`outline`} className={`h-9`} onClick={() => form.reset({
+              type: 'all',
+              resource_no: '',
+              create_after: undefined,
+              create_before: undefined,
+              expire_after: undefined,
+              expire_before: undefined,
+            })}>
+              <Eraser/>
+              <span>重置</span>
+            </Button>
+          </div>
         </Form>
       </section>
 
@@ -201,18 +236,18 @@ export default function ResourcesPage(props: ResourcesPageProps) {
         }}
         columns={[
           {
-            accessorKey: 'id', header: `编号`,
+            accessorKey: 'resource_no', header: `套餐编号`,
           },
           {
             accessorKey: 'type', header: `类型`, cell: ({row}) => (
               <div className={`flex gap-2 items-center`}>
-                {row.original.type === 1 && (
+                {row.original.pss.type === 1 && (
                   <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
                     <Timer size={20}/>
                     <span>包时</span>
                   </div>
                 )}
-                {row.original.type === 2 && (
+                {row.original.pss.type === 2 && (
                   <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
                     <Box size={20}/>
                     <span>包量</span>
@@ -224,30 +259,30 @@ export default function ResourcesPage(props: ResourcesPageProps) {
           {
             accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
               <span>
-                              {row.original.live / 60} 分钟
+                              {row.original.pss.live / 60} 分钟
                           </span>
             ),
           },
           {
             accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
               <div className={`flex gap-1`}>
-                {row.original.type === 1 ? (
+                {row.original.pss.type === 1 ? (
                   <div className={`flex gap-1`}>
-                    {isAfter(row.original.expire, new Date())
+                    {isAfter(row.original.pss.expire, new Date())
                       ? <span className={`text-green-500`}>正常</span>
                       : <span className={`text-red-500`}>已过期</span>}
                     <span>|</span>
-                    <span>今日限额：{row.original.daily_used} / {row.original.daily_limit}</span>
+                    <span>今日限额：{row.original.pss.daily_used} / {row.original.pss.daily_limit}</span>
                     <span>|</span>
-                    <span>{intlFormatDistance(row.original.expire, new Date())} 到期</span>
+                    <span>{intlFormatDistance(row.original.pss.expire, new Date())} 到期</span>
                   </div>
-                ) : row.original.type === 2 ? (
+                ) : row.original.pss.type === 2 ? (
                   <div className={`flex gap-1`}>
-                    {row.original.used < row.original.quota
+                    {row.original.pss.used < row.original.pss.quota
                       ? <span className={`text-green-500`}>正常</span>
                       : <span className={`text-red-500`}>已用完</span>}
                     <span>|</span>
-                    <span>用量统计：{row.original.used} / {row.original.quota}</span>
+                    <span>用量统计：{row.original.pss.used} / {row.original.pss.quota}</span>
                   </div>
                 ) : (
                   <span>-</span>
@@ -258,9 +293,9 @@ export default function ResourcesPage(props: ResourcesPageProps) {
           {
             accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
               return (
-                isEqual(row.original.daily_last, parse('0001-01-01 08:05:43', 'yyyy-MM-dd HH:mm:ss', new Date()))
+                isEqual(row.original.pss.daily_last, parse('0001-01-01 00:05:43', 'yyyy-MM-dd HH:mm:ss', new Date()))
                   ? '-'
-                  : format(row.original.daily_last, 'yyyy-MM-dd HH:mm')
+                  : format(row.original.pss.daily_last, 'yyyy-MM-dd HH:mm')
               )
             },
           },
@@ -277,7 +312,10 @@ export default function ResourcesPage(props: ResourcesPageProps) {
             ),
           },
         ]}
+        classNames={{
+          dataRow: `h-14`,
+        }}
       />
-    </main>
+    </Page>
   )
 }