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

src/actions/bill.ts

@@ -0,0 +1,15 @@
+import {Bill} from '@/lib/models'
+import {callByUser} from '@/actions/base'
+import {PageRecord} from '@/lib/api'
+
+export async function listBills(params: {
+  page?: number
+  size?: number
+  bill_no?: string
+  type?: number
+  status?: number
+  create_after?: Date
+  create_before?: Date
+}) {
+  return await callByUser<PageRecord<Bill>>('/api/bill/list', params)
+}

src/actions/resource.ts

@@ -1,19 +1,20 @@
 'use server'
 
 import {callByUser} from '@/actions/base'
-import {ResourcePss} from '@/lib/models'
+import {Resource} from '@/lib/models'
 import {PageRecord} from '@/lib/api'
 
 async function listResourcePss(props: {
   page: number
   size: number
+  resource_no?: string
   type?: number
   create_after?: Date
   create_before?: Date
   expire_after?: Date
   expire_before?: Date
-}){
-  return await callByUser<PageRecord<ResourcePss>>('/api/resource/list/pss', props)
+}) {
+  return await callByUser<PageRecord<Resource>>('/api/resource/list/pss', props)
 }
 
 async function createResourceByBalance(props: {

src/app/admin/(dashboard)/page.tsx

@@ -1,9 +1,11 @@
+import Page from '@/components/page'
+
 export type DashboardPageProps = {}
 
 export default async function DashboardPage(props: DashboardPageProps) {
 
   return (
-    <main className={`flex-auto overflow-hidden grid grid-cols-4 grid-rows-4 gap-4 mr-4 mb-4`}>
+    <Page mode={`blank`} className={`flex-auto grid grid-cols-4 grid-rows-4`}>
       {/* banner */}
       <section className={`col-start-1 row-start-1 col-span-3 bg-red-200`}>
 
@@ -36,6 +38,6 @@ export default async function DashboardPage(props: DashboardPageProps) {
       <section className={`col-start-4 row-start-3 row-span-2 bg-red-200`}>
 
       </section>
-    </main>
+    </Page>
   )
 }

src/app/admin/bills/page.tsx

@@ -1,10 +1,321 @@
-import {ReactNode} from 'react'
+'use client'
+import {useEffect, useState} from 'react'
+import {PageRecord} from '@/lib/api'
+import {Bill} from '@/lib/models'
+import {useStatus} from '@/lib/states'
+import {listBills} from '@/actions/bill'
+import {Search, Eraser, CreditCard, AlertCircle, CheckCircle} 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} 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 Page from '@/components/page'
+import Link from 'next/link'
 
-export type BillsPageProps = {
-}
+const filterSchema = zod.object({
+  type: zod.enum(['all', '0', '1', '2']).default('all'),
+  status: zod.enum(['all', '0', '1', '2']).default('all'),
+  create_after: zod.date().optional(),
+  create_before: zod.date().optional(),
+})
+
+type FilterSchema = zod.infer<typeof filterSchema>
+
+export type BillsPageProps = {}
+
+export default function BillsPage(props: BillsPageProps) {
+
+  // ======================
+  // 查询
+  // ======================
+
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<PageRecord<Bill>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const refresh = async (page: number, size: number) => {
+    setStatus('load')
+    try {
+      const typeValue = form.getValues('type')
+      const statusValue = form.getValues('status')
+      const type = typeValue === 'all' ? undefined : parseInt(typeValue)
+      const statusParam = statusValue === 'all' ? undefined : parseInt(statusValue)
+      const create_after = form.getValues('create_after')
+      const create_before = form.getValues('create_before')
+
+      const res = await listBills({
+        page, size, type, status: statusParam, create_after, create_before,
+      })
+
+      if (res.success) {
+        setData(res.data)
+        setStatus('done')
+      }
+      else {
+        throw new Error('Failed to load bills')
+      }
+    }
+    catch (e) {
+      setStatus('fail')
+    }
+  }
+
+  useEffect(() => {
+    refresh(1, 10).then()
+  }, [])
+
+  // ======================
+  // 筛选
+  // ======================
+
+  const form = useForm<FilterSchema>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      type: 'all',
+      status: 'all',
+    },
+  })
+
+  const onSubmit = async (value: FilterSchema) => {
+    console.log(value)
+    await refresh(1, data.size)
+  }
+
+  // 获取类型显示内容
+  const getBillTypeText = (type: number) => {
+    switch (type) {
+      case 1:
+        return '充值'
+      case 2:
+        return '消费'
+      case 3:
+        return '退款'
+      default:
+        return '未知'
+    }
+  }
+
+  // 获取状态显示内容
+  const getBillStatusText = (status: number) => {
+    switch (status) {
+      case 1:
+        return '待支付'
+      case 2:
+        return '已完成'
+      case 3:
+        return '已取消'
+      default:
+        return '未知'
+    }
+  }
+
+  // ======================
+  // render
+  // ======================
 
-export default async function BillsPage(props: BillsPageProps) {
   return (
-    <main></main>
+    <Page>
+
+      {/* 操作区 */}
+      <section className={`flex justify-between flex-wrap`}>
+        <div>
+          <h1 className="text-xl font-bold">账单管理</h1>
+        </div>
+
+        <Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4`}>
+          <FormField name={`type`} label={<span className={`text-sm`}>账单类型</span>}>
+            {({id, field}) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger className={`w-24`}>
+                  <SelectValue placeholder={`选择类型`}/>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={`all`}>全部</SelectItem>
+                  <SelectItem value={`0`}>充值</SelectItem>
+                  <SelectItem value={`1`}>消费</SelectItem>
+                  <SelectItem value={`2`}>退款</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+          </FormField>
+          <FormField name={`status`} label={<span className={`text-sm`}>状态</span>}>
+            {({id, field}) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger className={`w-24`}>
+                  <SelectValue placeholder={`选择状态`}/>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={`all`}>全部</SelectItem>
+                  <SelectItem value={`0`}>未完成</SelectItem>
+                  <SelectItem value={`1`}>已完成</SelectItem>
+                  <SelectItem value={`2`}>已作废</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>
+          <Button className={`h-9`} type="submit">
+            <Search/>
+            <span>筛选</span>
+          </Button>
+          <Button variant={`outline`} className={`h-9`} type="button" onClick={() => form.reset()}>
+            <Eraser/>
+            <span>重置</span>
+          </Button>
+        </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: 'bill_no', header: `账单编号`,
+          }, {
+            accessorKey: 'type', header: `类型`, cell: ({row}) => (
+              <div className={`flex gap-2 items-center`}>
+                {row.original.type === 0 && (
+                  <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}/>
+                    <span>消费</span>
+                  </div>
+                )}
+                {row.original.type === 2 && (
+                  <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
+                    <CreditCard size={16}/>
+                    <span>退款</span>
+                  </div>
+                )}
+              </div>
+            ),
+          },
+          {
+            accessorKey: 'info', header: `账单详情`, cell: ({row}) => (
+              <div className={`flex flex-col gap-1`}>
+                <span>{row.original.info}</span>
+
+                {row.original.type === 1 && (
+                  <Link
+                    href={`/admin/resources?resource_no=${row.original.resource.resource_no}`}
+                    className={`text-sm text-blue-500 hover:underline`}>
+                    <span>
+                      {row.original.resource.pss.type === 1 && `包时`}
+                      {row.original.resource.pss.type === 2 && `包量`}
+                    </span>
+                    <span>-</span>
+                    <span>
+                      {row.original.resource.pss.live / 60 + `分钟`}
+                    </span>
+                  </Link>
+                )}
+              </div>
+            ),
+          },
+          {
+            accessorKey: 'status', header: `状态`, cell: ({row}) => (
+              <>
+                {row.original.status === 0 && (
+                  <div className={`flex gap-1 items-center text-orange-500`}>
+                    <AlertCircle size={16}/>
+                    <span>未完成</span>
+                  </div>
+                )}
+                {row.original.status === 1 && (
+                  <div className={`flex gap-1 items-center text-green-500`}>
+                    <CheckCircle size={16}/>
+                    <span>已完成</span>
+                  </div>
+                )}
+                {row.original.status === 2 && (
+                  <div className={`flex gap-1 items-center text-gray-500`}>
+                    <AlertCircle size={16}/>
+                    <span>已作废</span>
+                  </div>
+                )}
+              </>
+            ),
+          },
+          {
+            accessorKey: 'amount', header: `支付信息`, cell: ({row}) => (
+              <div className={`flex gap-1`}>
+              <span>
+                {!row.original.trade && '余额'}
+                {row.original.trade && row.original.trade.method === 1 && '支付宝'}
+                {row.original.trade && row.original.trade.method === 2 && '微信'}
+              </span>
+                <span className={
+                  row.original.amount > 0 ? `text-green-400` : `text-orange-400`
+                }>￥{row.original.amount}</span>
+              </div>
+            ),
+          },
+          {
+            accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
+              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
+            ),
+          },
+          {
+            accessorKey: 'action', header: `操作`, cell: (item) => (
+              <div className={`flex gap-2`}>
+                -
+              </div>
+            ),
+          },
+        ]}
+      />
+    </Page>
   )
 }

src/app/admin/extract/page.tsx

@@ -1,10 +1,13 @@
 import {ReactNode} from 'react'
+import Page from '@/components/page'
 
 export type ExtractPageProps = {
 }
 
 export default async function ExtractPage(props: ExtractPageProps) {
   return (
-    <main></main>
+    <Page>
+
+    </Page>
   )
 }

src/app/admin/identify/page.tsx

@@ -2,12 +2,13 @@ import {Button} from '@/components/ui/button'
 import banner from './_assets/banner.webp'
 import personal from './_assets/personal.webp'
 import Image from 'next/image'
+import Page from '@/components/page'
 
 export type IdentifyPageProps = {}
 
 export default async function IdentifyPage(props: IdentifyPageProps) {
   return (
-    <main className={`flex-auto flex items-stretch gap-4 pb-4 pr-4`}>
+    <Page mode={`blank`}>
       <div className={`flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16`}>
 
         {/* banner */}
@@ -34,6 +35,6 @@ export default async function IdentifyPage(props: IdentifyPageProps) {
         <h3>操作引导</h3>
         <p>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
       </section>
-    </main>
+    </Page>
   )
 }

src/app/admin/purchase/page.tsx

@@ -1,11 +1,12 @@
-import Purchase from '@/components/composites/purchase'
+import Purchase from '@/components/composites/purchase/purchase'
+import Page from '@/components/page'
 
 export type PurchasePageProps = {}
 
 export default async function PurchasePage(props: PurchasePageProps) {
   return (
-    <main className={`flex-auto mb-4 mr-4`}>
+    <Page mode={`blank`} className={`flex-col`}>
       <Purchase/>
-    </main>
+    </Page>
   )
 }

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>
   )
 }

src/app/admin/whitelist/page.tsx

@@ -23,6 +23,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import {Pagination} from '@/components/ui/pagination'
 import {Checkbox} from '@/components/ui/checkbox'
+import Page from '@/components/page'
 
 const schema = z.object({
   host: z.string().min(1, {message: 'IP地址不能为空'}),
@@ -187,7 +188,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
         // 添加白名单
         const resp = await createWhitelist(value)
         if (resp && resp.success) {
-          await refresh(data.page, data.size)
+          await refresh(1, data.size)
           toggleDialog(false)
           toast.success('添加成功')
         }
@@ -203,7 +204,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
         }
         const resp = await updateWhitelist({...value, id: dialogData.id})
         if (resp && resp.success) {
-          await refresh(data.page, data.size)
+          await refresh(1, data.size)
           toggleDialog(false)
           toast.success('编辑成功')
         }
@@ -234,7 +235,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
   }
 
   return (
-    <main className={`flex-auto bg-white rounded-tl-lg p-4 flex flex-col gap-4`}>
+    <Page>
 
       {/* 全局操作 */}
       <section>
@@ -376,7 +377,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </main>
+    </Page>
   )
 
   // endregion

src/components/composites/purchase/_client/center.tsx

@@ -4,11 +4,11 @@ import {RadioGroup} from '@/components/ui/radio-group'
 import {Input} from '@/components/ui/input'
 import {Button} from '@/components/ui/button'
 import {Minus, Plus} from 'lucide-react'
-import {PurchaseFormContext, Schema} from '@/components/composites/_client/form'
+import {PurchaseFormContext, Schema} from '@/components/composites/purchase/_client/form'
 import {useContext} from 'react'
-import FormOption from '@/components/composites/_client/option'
+import FormOption from '@/components/composites/purchase/_client/option'
 import Image from 'next/image'
-import check from '../_assets/check.svg'
+import check from '@/components/composites/purchase/_assets/check.svg'
 
 export default function Center() {
 

src/components/composites/purchase/_client/form.tsx

@@ -1,9 +1,9 @@
 'use client'
 import {createContext, useContext} from 'react'
 import {useForm, UseFormReturn} from 'react-hook-form'
-import Center from '@/components/composites/_client/center'
-import Right from '@/components/composites/_client/right'
-import Left from '@/components/composites/_client/left'
+import Center from '@/components/composites/purchase/_client/center'
+import Right from '@/components/composites/purchase/_client/right'
+import Left from '@/components/composites/purchase/_client/left'
 import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'

src/components/composites/purchase/_client/left.tsx

@@ -1,7 +1,7 @@
 'use client'
 import {useState} from 'react'
 import Image from 'next/image'
-import banner from '@/components/composites/_assets/banner.webp'
+import banner from '@/components/composites/purchase/_assets/banner.webp'
 
 export type LeftProps = {
 }

src/components/composites/purchase/_client/recharge.tsx

@@ -10,11 +10,11 @@ import {Button} from '@/components/ui/button'
 import {Form, FormField} from '@/components/ui/form'
 import {useForm} from 'react-hook-form'
 import zod from 'zod'
-import FormOption from '@/components/composites/_client/option'
+import FormOption from '@/components/composites/purchase/_client/option'
 import {RadioGroup} from '@/components/ui/radio-group'
 import Image from 'next/image'
-import wechat from '../_assets/wechat.svg'
-import alipay from '../_assets/alipay.svg'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {tradeRecharge} from '@/actions/trade'
 import {toast} from 'sonner'

src/components/composites/purchase/_client/right.tsx

@@ -1,16 +1,16 @@
 'use client'
 import {useContext} from 'react'
-import {PurchaseFormContext} from '@/components/composites/_client/form'
+import {PurchaseFormContext} from '@/components/composites/purchase/_client/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
-import FormOption from '@/components/composites/_client/option'
+import FormOption from '@/components/composites/purchase/_client/option'
 import Image from 'next/image'
-import alipay from '../_assets/alipay.svg'
-import wechat from '../_assets/wechat.svg'
-import balance from '../_assets/balance.svg'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import balance from '@/components/composites/purchase/_assets/balance.svg'
 import {Button} from '@/components/ui/button'
 import {AuthContext} from '@/components/providers/AuthProvider'
-import RechargeModal from '@/components/composites/_client/recharge'
+import RechargeModal from '@/components/composites/purchase/_client/recharge'
 
 export type RightProps = {}
 

src/components/composites/purchase/purchase.tsx

@@ -1,4 +1,4 @@
-import PurchaseForm from '@/components/composites/_client/form'
+import PurchaseForm from '@/components/composites/purchase/_client/form'
 
 export type PurchaseProps = {}
 

src/components/data-table.tsx

@@ -3,12 +3,17 @@ import {Table as TableRoot, TableBody, TableCell, TableHead, TableHeader, TableR
 import {ColumnDef, flexRender, getCoreRowModel, useReactTable} from '@tanstack/react-table'
 import {Pagination, PaginationProps} from '@/components/ui/pagination'
 import {Loader} from 'lucide-react'
+import {merge} from '@/lib/utils'
 
 export type DataTableProps<T> = {
   data: T[]
   status: 'load' | 'done' | 'fail'
   columns: ColumnDef<T>[]
   pagination: PaginationProps
+  classNames?: {
+    headRow?: string
+    dataRow?: string
+  }
 }
 
 export default function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>) {
@@ -30,7 +35,7 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
 
   return (<>
     {/* 数据表*/}
-    <div className={`border rounded-md overflow-hidden relative`}>
+    <div className={`border rounded-md relative`}>
       <TableRoot>
         <TableHeader>
           {table.getHeaderGroups().map(group => (
@@ -56,7 +61,7 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
               <TableCell colSpan={props.columns.length} className={`text-center`}>暂无数据</TableCell>
             </TableRow>
           ) : table.getRowModel().rows.map(row => (
-            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className={merge(props.classNames?.dataRow)}>
               {row.getVisibleCells().map(cell => (
                 <TableCell key={cell.id}>
                   {flexRender(

src/components/page.tsx

@@ -0,0 +1,21 @@
+import {ComponentProps, ReactNode} from 'react'
+import {merge} from '@/lib/utils'
+
+export type PageProps = {
+  mode?: 'full' | 'blank'
+}
+
+export default function Page(props: ComponentProps<'main'> & PageProps) {
+  return (
+    <main {...props} className={merge(
+      `flex-auto flex gap-4`,
+      {
+        full: `bg-white rounded-tl-xl p-4 flex-col overflow-auto`,
+        blank: `items-stretch pb-4 pr-4 overflow-hidden`,
+      }[props.mode ?? 'full'],
+      props.className,
+    )}>
+      {props.children}
+    </main>
+  )
+}

src/components/ui/input.tsx

@@ -10,7 +10,7 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
       className={merge(
         `transition-[color,box-shadow] duration-200 ease-in-out`,
         `h-10 min-w-0 w-full`,
-        ' placeholder:text-muted-foreground',
+        'placeholder:text-muted-foreground',
         'selection:bg-primary selection:text-primary-foreground',
         'flex rounded-md border bg-transparent px-3 py-1 text-base shadow-xs',
         'outline-none focus-visible:ring-4 ring-ring/50',

src/lib/models.ts

@@ -20,8 +20,19 @@ export type User = {
   updated_at: Date
 }
 
+export type Resource = {
+  id: number
+  user_id: number
+  resource_no: string
+  active: boolean
+  created_at: Date
+  updated_at: Date
+  pss: ResourcePss
+}
+
 export type ResourcePss = {
   id: number
+  resource_id: number
   type: number
   live: number
   expire: Date
@@ -33,3 +44,51 @@ export type ResourcePss = {
   created_at: Date
   updated_at: Date
 }
+
+
+export type Bill = {
+  id: number
+  user_id: number
+  trade_id: number
+  refund_id: number
+  resource_id: number
+  bill_no: string
+  info: string
+  type: number
+  status: number
+  amount: number
+  created_at: Date
+  updated_at: Date
+  trade: Trade
+  refund: Refund
+  resource: Resource
+}
+
+export type Trade = {
+  id: number
+  user_id: number
+  inner_no: string
+  outer_no: string
+  type: number
+  subject: string
+  remark: string
+  amount: number
+  payment: number
+  method: number
+  status: number
+  paid_at: Date
+  cancel_at: Date
+  created_at: Date
+  updated_at: Date
+}
+
+export type Refund = {
+  id: number
+  product_id: number
+  trade_id: number
+  amount: number
+  reason: string
+  status: number
+  created_at: Date
+  updated_at: Date
+}