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

2025-04-11 17:34:42 +08:00
parent 7238166a95
commit e0c75f9506
26 changed files with 542 additions and 84 deletions
--- a/src/app/admin/(dashboard)/page.tsx
+++ b/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>
  )
 }
--- a/src/app/admin/bills/page.tsx
+++ b/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>
  )
 }
--- a/src/app/admin/extract/page.tsx
+++ b/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>
  )
 }
--- a/src/app/admin/identify/page.tsx
+++ b/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>
  )
 }
--- a/src/app/admin/purchase/page.tsx
+++ b/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>
  )
 }
--- a/src/app/admin/resources/page.tsx
+++ b/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>
  )
 }
--- a/src/app/admin/whitelist/page.tsx
+++ b/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