开启 ppr 优化渲染性能

src/app/admin/resources/_client/short.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {ReactNode, useEffect, useState} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {Form, FormField} from '@/components/ui/form'
 import {Input} from '@/components/ui/input'
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
@@ -8,24 +8,27 @@ import DatePicker from '@/components/date-picker'
 import {Button} from '@/components/ui/button'
 import {Box, Eraser, Search, Timer} from 'lucide-react'
 import DataTable from '@/components/data-table'
-import {format, intlFormatDistance, isAfter} from 'date-fns'
+import {format, isAfter, isSameDay} from 'date-fns'
 import {useStatus} from '@/lib/states'
-import {ExtraResp, PageRecord} from '@/lib/api'
-import {Resource} from '@/lib/models'
+import {ExtraResp} from '@/lib/api'
 import {listResourceShort} from '@/actions/resource'
 import zod from 'zod'
 import {useSearchParams} from 'next/navigation'
 import {useForm} from 'react-hook-form'
 import {zodResolver} from '@hookform/resolvers/zod'
 
-export type ShortResourceProps = {
-}
+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(),
+})
 
-export default function ShortResource(props: ShortResourceProps) {
-  // ======================
-  // 查询
-  // ======================
+type FilterSchema = zod.infer<typeof filterSchema>
 
+export default function ShortResource() {
   const [status, setStatus] = useStatus()
   const [data, setData] = useState<ExtraResp<typeof listResourceShort>>({
     page: 1,
@@ -34,7 +37,30 @@ export default function ShortResource(props: ShortResourceProps) {
     list: [],
   })
 
-  const refresh = async (page: number, size: number) => {
+  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: {
+      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 handler = form.handleSubmit(async (value: FilterSchema) => {
+    await refresh(1, data.size)
+  })
+
+  // 查询
+  const refresh = useCallback(async (page: number, size: number) => {
     setStatus('load')
     try {
       const type = {
@@ -63,54 +89,19 @@ export default function ShortResource(props: ShortResourceProps) {
         setStatus('done')
       }
       else {
-        throw new Error('Failed to load short resource')
+        throw new Error(`Failed to load short resource`)
       }
     }
     catch (e) {
       setStatus('fail')
     }
-  }
+  }, [form, setStatus])
 
   useEffect(() => {
     refresh(1, 10).then()
-  }, [])
+  }, [refresh])
 
-  // ======================
   // 筛选
-  // ======================
-
-  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: {
-      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 handler = form.handleSubmit(async (value: FilterSchema) => {
-    await refresh(1, data.size)
-  })
 
   return (
     <>
@@ -166,7 +157,7 @@ export default function ShortResource(props: ShortResourceProps) {
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <Label className="text-sm">最后使用时间</Label>
+            <Label className="text-sm">到期时间</Label>
             <div className="flex items-center">
               <FormField name="expire_after">
                 {({field}) => (
@@ -253,11 +244,7 @@ export default function ShortResource(props: ShortResourceProps) {
           },
           {
             accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
-              <span>
-                {row.original.short.live / 60}
-                {' '}
-                分钟
-              </span>
+              <span>{row.original.short.live / 60}分钟</span>
             ),
           },
           {
@@ -270,15 +257,12 @@ export default function ShortResource(props: ShortResourceProps) {
                       : <span className="text-red-500">过期</span>}
                     <span>|</span>
                     <span>
-                      今日限额： {row.original.short.last_at
-                        && new Date(row.original.short.last_at).toDateString() === new Date().toDateString()
+                      {row.original.short.last_at && isSameDay(row.original.short.expire_at, new Date())
                         ? row.original.short.daily
-                        : 0}/{row.original.short.quota}
+                        : 0
+                      }/{row.original.short.quota}
                     </span>
                     <span>|</span>
-                    <span>
-                      {intlFormatDistance(row.original.short.expire_at, new Date())}到期
-                    </span>
                   </div>
                 ) : row.original.short.type === 2 ? (
                   <div className="flex gap-1">
@@ -301,28 +285,12 @@ export default function ShortResource(props: ShortResourceProps) {
             ),
           },
           {
-            accessorKey: 'last_at',
-            header: '最近使用时间',
-            cell: ({row}) => {
-              const lastAt = row.original.short.last_at
-              if (!lastAt) {
-                return '暂未使用'
-              }
-              return format(lastAt, 'yyyy-MM-dd HH:mm')
-            },
-          },
-          {
-            accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
-              format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
-            ),
-          },
-          {
-            accessorKey: 'action', header: `操作`, cell: item => (
-              <div className="flex gap-2">
-                -
-              </div>
-            ),
+            header: '最近使用时间', cell: ({row}) => row.original.short.last_at
+              ? format(row.original.short.last_at, 'yyyy-MM-dd HH:mm')
+              : '-',
           },
+          {header: '开通时间', cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm')},
+          {header: '到期时间', cell: ({row}) => format(row.original.short.expire_at, 'yyyy-MM-dd HH:mm')},
         ]}
       />
     </>

src/app/admin/resources/page.tsx

@@ -2,6 +2,7 @@ import Page from '@/components/page'
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import ShortResource from '@/app/admin/resources/_client/short'
 import LongResource from '@/app/admin/resources/_client/long'
+import {Suspense} from 'react'
 
 export default async function ResourcesPage() {
   // ======================
@@ -16,10 +17,14 @@ export default async function ResourcesPage() {
           <TabsTrigger value="long" className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md">长效套餐</TabsTrigger>
         </TabsList>
         <TabsContent value="short" className="flex flex-col gap-4">
-          <ShortResource/>
+          <Suspense>
+            <ShortResource/>
+          </Suspense>
         </TabsContent>
         <TabsContent value="long" className="flex flex-col gap-4">
-          <LongResource/>
+          <Suspense>
+            <LongResource/>
+          </Suspense>
         </TabsContent>
       </Tabs>
     </Page>