重构项目结构，将数据层集中在 lib 包中；resource 类型更新，支持多个子套餐类型分别表示；新增长效套餐的购买流程，以及已购查询功能

src/app/admin/bills/page.tsx

@@ -174,12 +174,6 @@ export default function BillsPage(props: BillsPageProps) {
           }, {
             accessorKey: 'type', header: `类型`, cell: ({row}) => (
               <div className={`flex gap-2 items-center`}>
-                {row.original.type === 2 && (
-                  <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
-                    <CreditCard size={16}/>
-                    <span>充值</span>
-                  </div>
-                )}
                 {row.original.type === 1 && (
                   <div className={`flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md`}>
                     <CreditCard size={16}/>
@@ -192,6 +186,12 @@ export default function BillsPage(props: BillsPageProps) {
                     <span>退款</span>
                   </div>
                 )}
+                {row.original.type === 3 && (
+                  <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
+                    <CreditCard size={16}/>
+                    <span>充值</span>
+                  </div>
+                )}
               </div>
             ),
           },
@@ -238,7 +238,7 @@ export default function BillsPage(props: BillsPageProps) {
           {
             accessorKey: 'amount', header: `支付信息`, cell: ({row}) => (
               <div className={`flex gap-1`}>
-                <span>
+                <span className={`text-sm`}>
                   {!row.original.trade && '余额'}
                   {row.original.trade && row.original.trade.method === 1 && '支付宝'}
                   {row.original.trade && row.original.trade.method === 2 && '微信'}

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

@@ -0,0 +1,308 @@
+'use client'
+
+import {useStatus} from '@/lib/states'
+import {useEffect, useState} from 'react'
+import {ExtraResp} from '@/lib/api'
+import {listResourceLong} from '@/actions/resource'
+import zod from 'zod'
+import {useSearchParams} from 'next/navigation'
+import {useForm} from 'react-hook-form'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {Form, FormField} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
+import {Label} from '@/components/ui/label'
+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'
+
+export type LongResourceProps = {}
+
+export default function LongResource(props: LongResourceProps) {
+  // ======================
+  // 查询
+  // ======================
+
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<ExtraResp<typeof listResourceLong>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const refresh = async (page: number, size: number) => {
+    setStatus('load')
+    try {
+      const type = {
+        all: undefined,
+        expire: 1,
+        quota: 2,
+      }[form.getValues('type')]
+      const create_after = form.getValues('create_after')
+      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 listResourceLong({
+        page, size,
+        type,
+        create_after,
+        create_before,
+        expire_after,
+        expire_before,
+        resource_no,
+      })
+
+      if (res.success) {
+        setData(res.data)
+        setStatus('done')
+      }
+      else {
+        throw new Error('Failed to load short resource')
+      }
+    }
+    catch (e) {
+      setStatus('fail')
+    }
+  }
+
+  useEffect(() => {
+    refresh(1, 10).then()
+  }, [])
+
+  // ======================
+  // 筛选
+  // ======================
+
+  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 onSubmit = async (value: FilterSchema) => {
+    await refresh(1, data.size)
+  }
+
+  return <>
+    {/* 操作区 */}
+    <section className={`flex justify-between flex-wrap`}>
+      <div>
+
+      </div>
+
+      <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>}>
+          {({field}) => (
+            <Select value={field.value} onValueChange={field.onChange}>
+              <SelectTrigger className={`w-24 h-9`}>
+                <SelectValue placeholder={`选择套餐类型`}/>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={`all`}>全部</SelectItem>
+                <SelectItem value={`expire`}>包时</SelectItem>
+                <SelectItem value={`quota`}>包量</SelectItem>
+              </SelectContent>
+            </Select>
+          )}
+        </FormField>
+        <div className={`flex flex-col gap-2`}>
+          <Label className={`text-sm`}>开通时间</Label>
+          <div className={`flex items-center`}>
+            <FormField name={`create_after`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`开始时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+            <span className={`px-1`}>-</span>
+            <FormField name={`create_before`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`结束时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+          </div>
+        </div>
+        <div className={`flex flex-col gap-2`}>
+          <Label className={`text-sm`}>最后使用时间</Label>
+          <div className={`flex items-center`}>
+            <FormField name={`expire_after`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`开始时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+            <span className={`px-1`}>-</span>
+            <FormField name={`expire_before`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`结束时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+          </div>
+        </div>
+        <div className={`flex gap-4`}>
+          <Button className={`h-9`}>
+            <Search/>
+            <span>筛选</span>
+          </Button>
+          <Button theme={`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>
+
+    {/* 数据表 */}
+    <DataTable
+      data={data.list}
+      status={status}
+      pagination={{
+        total: data.total,
+        page: data.page,
+        size: data.size,
+        onPageChange: async (page: number) => {
+          await refresh(page, data.size)
+        },
+        onSizeChange: async (size: number) => {
+          await refresh(data.page, size)
+        },
+      }}
+      columns={[
+        {
+          accessorKey: 'resource_no', header: `套餐编号`,
+        },
+        {
+          accessorKey: 'type', header: `类型`, cell: ({row}) => (
+            <div className={`flex gap-2 items-center`}>
+              {row.original.long.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.long.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>
+                </div>
+              )}
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
+            <span>
+              {row.original.long.live} 小时
+            </span>
+          ),
+        },
+        {
+          accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
+            <div className={`flex gap-1`}>
+              {row.original.long.type === 1 ? (
+                <div className={`flex gap-1`}>
+                  {isAfter(row.original.long.expire, new Date())
+                    ? <span className={`text-green-500`}>正常</span>
+                    : <span className={`text-red-500`}>过期</span>}
+                  <span>|</span>
+                  <span>今日限额：{row.original.long.daily_used} / {row.original.long.daily_limit}</span>
+                  <span>|</span>
+                  <span>{intlFormatDistance(row.original.long.expire, new Date())} 到期</span>
+                </div>
+              ) : row.original.long.type === 2 ? (
+                <div className={`flex gap-1`}>
+                  {row.original.long.used < row.original.long.quota
+                    ? <span className={`text-green-500`}>正常</span>
+                    : <span className={`text-red-500`}>已用完</span>}
+                  <span>|</span>
+                  <span>用量统计：{row.original.long.used} / {row.original.long.quota}</span>
+                </div>
+              ) : (
+                <span>-</span>
+              )}
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
+            return (
+              format(row.original.long.daily_last, 'yyyy-MM-dd') === '0001-01-01'
+                ? '-'
+                : format(row.original.long.daily_last, '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>
+          ),
+        },
+      ]}
+    />
+  </>
+}

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

@@ -0,0 +1,309 @@
+'use client'
+import {ReactNode, 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'
+import {Label} from '@/components/ui/label'
+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 {useStatus} from '@/lib/states'
+import {ExtraResp, PageRecord} from '@/lib/api'
+import {Resource} from '@/lib/models'
+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 = {
+}
+
+export default function ShortResource(props: ShortResourceProps) {
+  // ======================
+  // 查询
+  // ======================
+
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<ExtraResp<typeof listResourceShort>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const refresh = async (page: number, size: number) => {
+    setStatus('load')
+    try {
+      const type = {
+        all: undefined,
+        expire: 1,
+        quota: 2,
+      }[form.getValues('type')]
+      const create_after = form.getValues('create_after')
+      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 listResourceShort({
+        page, size,
+        type,
+        create_after,
+        create_before,
+        expire_after,
+        expire_before,
+        resource_no,
+      })
+
+      if (res.success) {
+        setData(res.data)
+        setStatus('done')
+      }
+      else {
+        throw new Error('Failed to load short resource')
+      }
+    }
+    catch (e) {
+      setStatus('fail')
+    }
+  }
+
+  useEffect(() => {
+    refresh(1, 10).then()
+  }, [])
+
+  // ======================
+  // 筛选
+  // ======================
+
+  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 onSubmit = async (value: FilterSchema) => {
+    await refresh(1, data.size)
+  }
+
+  return <>
+    {/* 操作区 */}
+    <section className={`flex justify-between flex-wrap`}>
+      <div>
+
+      </div>
+
+      <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>}>
+          {({field}) => (
+            <Select value={field.value} onValueChange={field.onChange}>
+              <SelectTrigger className={`w-24 h-9`}>
+                <SelectValue placeholder={`选择套餐类型`}/>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={`all`}>全部</SelectItem>
+                <SelectItem value={`expire`}>包时</SelectItem>
+                <SelectItem value={`quota`}>包量</SelectItem>
+              </SelectContent>
+            </Select>
+          )}
+        </FormField>
+        <div className={`flex flex-col gap-2`}>
+          <Label className={`text-sm`}>开通时间</Label>
+          <div className={`flex items-center`}>
+            <FormField name={`create_after`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`开始时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+            <span className={`px-1`}>-</span>
+            <FormField name={`create_before`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`结束时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+          </div>
+        </div>
+        <div className={`flex flex-col gap-2`}>
+          <Label className={`text-sm`}>最后使用时间</Label>
+          <div className={`flex items-center`}>
+            <FormField name={`expire_after`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`开始时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+            <span className={`px-1`}>-</span>
+            <FormField name={`expire_before`}>
+              {({field}) => (
+                <DatePicker
+                  {...field}
+                  className={`w-36`}
+                  placeholder={`结束时间`}
+                  format={`yyyy-MM-dd`}
+                />
+              )}
+            </FormField>
+          </div>
+        </div>
+        <div className={`flex gap-4`}>
+          <Button className={`h-9`}>
+            <Search/>
+            <span>筛选</span>
+          </Button>
+          <Button theme={`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>
+
+    {/* 数据表 */}
+    <DataTable
+      data={data.list}
+      status={status}
+      pagination={{
+        total: data.total,
+        page: data.page,
+        size: data.size,
+        onPageChange: async (page: number) => {
+          await refresh(page, data.size)
+        },
+        onSizeChange: async (size: number) => {
+          await refresh(data.page, size)
+        },
+      }}
+      columns={[
+        {
+          accessorKey: 'resource_no', header: `套餐编号`,
+        },
+        {
+          accessorKey: 'type', header: `类型`, cell: ({row}) => (
+            <div className={`flex gap-2 items-center`}>
+              {row.original.short.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.short.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>
+                </div>
+              )}
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
+            <span>
+              {row.original.short.live / 60} 分钟
+            </span>
+          ),
+        },
+        {
+          accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
+            <div className={`flex gap-1`}>
+              {row.original.short.type === 1 ? (
+                <div className={`flex gap-1`}>
+                  {isAfter(row.original.short.expire, new Date())
+                    ? <span className={`text-green-500`}>正常</span>
+                    : <span className={`text-red-500`}>过期</span>}
+                  <span>|</span>
+                  <span>今日限额：{row.original.short.daily_used} / {row.original.short.daily_limit}</span>
+                  <span>|</span>
+                  <span>{intlFormatDistance(row.original.short.expire, new Date())} 到期</span>
+                </div>
+              ) : row.original.short.type === 2 ? (
+                <div className={`flex gap-1`}>
+                  {row.original.short.used < row.original.short.quota
+                    ? <span className={`text-green-500`}>正常</span>
+                    : <span className={`text-red-500`}>已用完</span>}
+                  <span>|</span>
+                  <span>用量统计：{row.original.short.used} / {row.original.short.quota}</span>
+                </div>
+              ) : (
+                <span>-</span>
+              )}
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
+            return (
+              format(row.original.short.daily_last, 'yyyy-MM-dd') === '0001-01-01'
+                ? '-'
+                : format(row.original.short.daily_last, '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>
+          ),
+        },
+      ]}
+    />
+  </>
+}

src/app/admin/resources/page.tsx

@@ -1,117 +1,9 @@
-'use client'
-import {useEffect, useState} from 'react'
-import {PageRecord} from '@/lib/api'
-import {Resource} from '@/lib/models'
-import {useStatus} from '@/lib/states'
-import {listResourcePss} from '@/actions/resource'
-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/data-table'
-import {format, intlFormatDistance, isAfter} from 'date-fns'
-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'
-import {Input} from '@/components/ui/input'
 import Page from '@/components/page'
-import {useSearchParams} from 'next/navigation'
+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'
 
-export type ResourcesPageProps = {}
-
-export default function ResourcesPage(props: ResourcesPageProps) {
-
-  // ======================
-  // 查询
-  // ======================
-
-  const [status, setStatus] = useStatus()
-  const [data, setData] = useState<PageRecord<Resource>>({
-    page: 1,
-    size: 10,
-    total: 0,
-    list: [],
-  })
-
-  const refresh = async (page: number, size: number) => {
-    setStatus('load')
-    try {
-      const type = {
-        all: undefined,
-        expire: 1,
-        quota: 2,
-      }[form.getValues('type')]
-      const create_after = form.getValues('create_after')
-      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,
-        resource_no,
-      })
-
-      if (res.success) {
-        setData(res.data)
-        setStatus('done')
-      }
-      else {
-        throw new Error('Failed to load resource pss')
-      }
-    }
-    catch (e) {
-      setStatus('fail')
-    }
-  }
-
-  useEffect(() => {
-    refresh(1, 10).then()
-  }, [])
-
-  // ======================
-  // 筛选
-  // ======================
-
-  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 onSubmit = async (value: FilterSchema) => {
-    await refresh(1, data.size)
-  }
+export default async function ResourcesPage() {
 
   // ======================
   // render
@@ -119,199 +11,18 @@ export default function ResourcesPage(props: ResourcesPageProps) {
 
   return (
     <Page>
-
-      {/* 操作区 */}
-      <section className={`flex justify-between flex-wrap`}>
-        <div>
-
-        </div>
-
-        <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>}>
-            {({field}) => (
-              <Select value={field.value} onValueChange={field.onChange}>
-                <SelectTrigger className={`w-24 h-9`}>
-                  <SelectValue placeholder={`选择套餐类型`}/>
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={`all`}>全部</SelectItem>
-                  <SelectItem value={`expire`}>包时</SelectItem>
-                  <SelectItem value={`quota`}>包量</SelectItem>
-                </SelectContent>
-              </Select>
-            )}
-          </FormField>
-          <div className={`flex flex-col gap-2`}>
-            <Label className={`text-sm`}>开通时间</Label>
-            <div className={`flex items-center`}>
-              <FormField name={`create_after`}>
-                {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className={`w-36`}
-                    placeholder={`开始时间`}
-                    format={`yyyy-MM-dd`}
-                  />
-                )}
-              </FormField>
-              <span className={`px-1`}>-</span>
-              <FormField name={`create_before`}>
-                {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className={`w-36`}
-                    placeholder={`结束时间`}
-                    format={`yyyy-MM-dd`}
-                  />
-                )}
-              </FormField>
-            </div>
-          </div>
-          <div className={`flex flex-col gap-2`}>
-            <Label className={`text-sm`}>最后使用时间</Label>
-            <div className={`flex items-center`}>
-              <FormField name={`expire_after`}>
-                {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className={`w-36`}
-                    placeholder={`开始时间`}
-                    format={`yyyy-MM-dd`}
-                  />
-                )}
-              </FormField>
-              <span className={`px-1`}>-</span>
-              <FormField name={`expire_before`}>
-                {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className={`w-36`}
-                    placeholder={`结束时间`}
-                    format={`yyyy-MM-dd`}
-                  />
-                )}
-              </FormField>
-            </div>
-          </div>
-          <div className={`flex gap-4`}>
-            <Button className={`h-9`}>
-              <Search/>
-              <span>筛选</span>
-            </Button>
-            <Button theme={`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>
-
-      {/* 数据表 */}
-      <DataTable
-        data={data.list}
-        status={status}
-        pagination={{
-          total: data.total,
-          page: data.page,
-          size: data.size,
-          onPageChange: async (page: number) => {
-            await refresh(page, data.size)
-          },
-          onSizeChange: async (size: number) => {
-            await refresh(data.page, size)
-          },
-        }}
-        columns={[
-          {
-            accessorKey: 'resource_no', header: `套餐编号`,
-          },
-          {
-            accessorKey: 'type', header: `类型`, cell: ({row}) => (
-              <div className={`flex gap-2 items-center`}>
-                {row.original.short.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.short.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>
-                  </div>
-                )}
-              </div>
-            ),
-          },
-          {
-            accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
-              <span>
-                {row.original.short.live / 60} 分钟
-              </span>
-            ),
-          },
-          {
-            accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
-              <div className={`flex gap-1`}>
-                {row.original.short.type === 1 ? (
-                  <div className={`flex gap-1`}>
-                    {isAfter(row.original.short.expire, new Date())
-                      ? <span className={`text-green-500`}>正常</span>
-                      : <span className={`text-red-500`}>过期</span>}
-                    <span>|</span>
-                    <span>今日限额：{row.original.short.daily_used} / {row.original.short.daily_limit}</span>
-                    <span>|</span>
-                    <span>{intlFormatDistance(row.original.short.expire, new Date())} 到期</span>
-                  </div>
-                ) : row.original.short.type === 2 ? (
-                  <div className={`flex gap-1`}>
-                    {row.original.short.used < row.original.short.quota
-                      ? <span className={`text-green-500`}>正常</span>
-                      : <span className={`text-red-500`}>已用完</span>}
-                    <span>|</span>
-                    <span>用量统计：{row.original.short.used} / {row.original.short.quota}</span>
-                  </div>
-                ) : (
-                  <span>-</span>
-                )}
-              </div>
-            ),
-          },
-          {
-            accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
-              return (
-                format(row.original.short.daily_last, 'yyyy-MM-dd') === '0001-01-01'
-                  ? '-'
-                  : format(row.original.short.daily_last, '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>
-            ),
-          },
-        ]}
-      />
+      <Tabs defaultValue={`short`}>
+        <TabsList className={`bg-card p-1.5 rounded-lg`}>
+          <TabsTrigger value={`short`} className={`w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md`}>短效套餐</TabsTrigger>
+          <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/>
+        </TabsContent>
+        <TabsContent value={`long`} className={`flex flex-col gap-4`}>
+          <LongResource/>
+        </TabsContent>
+      </Tabs>
     </Page>
   )
 }