购买套餐页面更改字段和添加小字提示 & 添加余额管理页面

Co-authored-by: Copilot <copilot@github.com>
2026-04-25 17:53:26 +08:00
parent 6adcd33943
commit 6a9e7289b5
10 changed files with 309 additions and 26 deletions
--- a/src/actions/balance.ts
+++ b/src/actions/balance.ts
@@ -0,0 +1,14 @@
+'use server'
+import {Balance} from '@/lib/models'
+import {callByUser} from '@/actions/base'
+import {PageRecord} from '@/lib/api'
+
+export async function listBalances(params: {
+  page?: number
+  size?: number
+  bill_no?: string
+  created_at_start?: Date
+  created_at_end?: Date
+}) {
+  return await callByUser<PageRecord<Balance>>('/api/balance/page', params)
+}
--- a/src/app/admin/balance/layout.tsx
+++ b/src/app/admin/balance/layout.tsx
@@ -0,0 +1,16 @@
+import {ReactNode} from 'react'
+import {Metadata} from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '余额管理 - 蓝狐代理',
+  }
+}
+
+export type PurchaseLayoutProps = {
+  children: ReactNode
+}
+
+export default async function PurchaseLayout(props: PurchaseLayoutProps) {
+  return props.children
+}
--- a/src/app/admin/balance/page.tsx
+++ b/src/app/admin/balance/page.tsx
@@ -0,0 +1,235 @@
+'use client'
+import {useCallback, useEffect, useState} from 'react'
+import {PageRecord} from '@/lib/api'
+import {Balance} from '@/lib/models'
+import {useStatus} from '@/lib/states'
+import {Search, Eraser} from 'lucide-react'
+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 {CheckCircle, AlertCircle} from 'lucide-react'
+import {Input} from '@/components/ui/input'
+import {listBalances} from '@/actions/balance'
+
+const filterSchema = zod.object({
+  created_at_start: zod.date().optional(),
+  created_at_end: zod.date().optional(),
+  bill_no: zod.string().optional(),
+})
+type FilterSchema = zod.infer<typeof filterSchema>
+
+export type BalancePageProps = {}
+
+export default function BalancePage(props: BalancePageProps) {
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<PageRecord<Balance>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const form = useForm<FilterSchema>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      bill_no: '',
+      created_at_start: undefined,
+      created_at_end: undefined,
+    },
+  })
+
+  const onSubmit = async (value: FilterSchema) => {
+    await refresh(1, data.size)
+  }
+
+  const refresh = useCallback(async (page: number, size: number) => {
+    setStatus('load')
+    try {
+      const created_at_start = form.getValues('created_at_start')
+      const created_at_end = form.getValues('created_at_end')
+      const bill_no = form.getValues('bill_no')
+
+      const res = await listBalances({
+        page, size,
+        created_at_start,
+        created_at_end,
+        bill_no: bill_no || undefined,
+      })
+
+      if (res.success) {
+        setData(res.data)
+        setStatus('done')
+      }
+      else {
+        throw new Error('Failed to load bills')
+      }
+    }
+    catch (e) {
+      setStatus('fail')
+    }
+  }, [form, setStatus])
+
+  useEffect(() => {
+    refresh(1, 10).then()
+  }, [refresh])
+
+  return (
+    <Page>
+      <section className="flex justify-between flex-wrap">
+        <Form form={form} handler={form.handleSubmit(onSubmit)} className="flex-auto flex flex-wrap gap-4 items-end">
+          <FormField name="bill_no" label={<span className="text-sm">账单编号</span>}>
+            {({id, field}) => {
+              return <Input {...field} id={id} className="h-9"/>
+            }}
+          </FormField>
+          <div className="flex flex-col gap-2">
+            <Label className="text-sm">创建时间</Label>
+            <div className="flex items-center">
+              <FormField name="created_at_start">
+                {({field}) => {
+                  const dateValue = typeof field.value === 'string' && field.value ? new Date(field.value) : undefined
+                  return (
+                    <DatePicker
+                      placeholder="选择开始时间"
+                      {...field}
+                      format="yyyy-MM-dd"
+                    />
+                  )
+                }
+                }
+              </FormField>
+              <span className="px-1">-</span>
+              <FormField name="created_at_end">
+                {({field}) => (
+                  <DatePicker
+                    placeholder="选择结束时间"
+                    {...field}
+                    format="yyyy-MM-dd"
+                  />
+                )
+                }
+              </FormField>
+            </div>
+          </div>
+          <Button className="h-9" type="submit">
+            <Search/>
+            <span>筛选</span>
+          </Button>
+          <Button
+            theme="outline"
+            className="h-9"
+            type="button"
+            onClick={() => {
+              form.reset()
+              refresh(1, data.size)
+            }}
+          >
+            <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: `账单编号`,
+            accessorFn: row => row.bill?.bill_no || '',
+          },
+          {
+            accessorKey: 'status',
+            header: `状态`,
+            cell: ({row}) => {
+              const trade = row.original.trade
+              if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+                return (
+                  <div className="flex items-center gap-2">
+                    <CheckCircle size={16} className="text-done"/>
+                    <span>已完成</span>
+                  </div>
+                )
+              }
+              if (!trade) return <span>-</span>
+              return (
+                <div className="flex items-center gap-2">
+                  {trade?.status === 1 ? (
+                    <CheckCircle size={16} className="text-done"/>
+                  ) : trade?.status === 2 ? (
+                    <AlertCircle size={16} className="text-weak"/>
+                  ) : trade?.status === 3 ? (
+                    <AlertCircle size={16} className="text-fail"/>
+                  ) : null}
+                  <span>
+                    {trade?.status === 1 ? '已完成'
+                      : trade?.status === 2 ? '已取消'
+                        : trade?.status === 3 ? '已退款' : '-'}
+                  </span>
+                </div>
+              )
+            },
+          },
+          {
+            accessorKey: 'amount',
+            header: '变动金额',
+            cell: ({row}) => {
+              const amount = row.original.amount
+              const isPositive = Number(amount) > 0
+              return (
+                <div className="flex items-center gap-1">
+                  <span
+                    className={`font-semibold ${
+                      isPositive ? 'text-green-600' : 'text-red-600'
+                    }`}
+                  >
+                    {isPositive ? '+' : ''}
+                    {Number(amount).toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
+          },
+          {
+            header: '余额变化',
+            accessorKey: 'balance_prev',
+            cell: ({row}) => (
+              <div className="flex items-center gap-2">
+                <span className="text-gray-500 text-sm">¥{Number(row.original.balance_prev).toFixed(2)}</span>
+                <span className="text-muted-foreground">→</span>
+                <span>¥{Number(row.original.balance_curr).toFixed(2)}</span>
+              </div>
+            ),
+          },
+          {
+            header: '备注',
+            accessorKey: 'remark',
+          },
+          {
+            header: '创建时间',
+            accessorKey: 'created_at',
+            cell: ({row}) =>
+              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm'),
+          },
+        ]}
+      />
+    </Page>
+  )
+}
--- a/src/app/admin/clients.tsx
+++ b/src/app/admin/clients.tsx
@@ -6,7 +6,7 @@ import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-
 import UserCenter from '@/components/composites/user-center'
 import {Button} from '@/components/ui/button'
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
-import {Archive, ArchiveRestore, Eye, HardDriveUpload, IdCard, LockKeyhole, MessageCircleMoreIcon, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
+import {Archive, ArchiveRestore, CircleDollarSign, Eye, HardDriveUpload, IdCard, LockKeyhole, MessageCircleMoreIcon, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
 import {merge} from '@/lib/utils'
 import logoAvatar from '@/assets/logo-avatar.svg'
 import logoText from '@/assets/logo-text.svg'
@@ -211,6 +211,7 @@ export function Navbar() {
          <NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>
          <NavTitle label="个人中心"/>
          <NavItem href="/admin/profile" icon={<UserRoundPen size={20}/>} label="基本信息" expand={navbar}/>
+          <NavItem href="/admin/balance" icon={<CircleDollarSign size={20}/>} label="余额管理" expand={navbar}/>
          <NavItem href="/admin/bills" icon={<Wallet size={20}/>} label="我的账单" expand={navbar}/>
          <NavTitle label="资源管理"/>
          <NavItem href="/admin/resources" icon={<Package size={20}/>} label="我的套餐" expand={navbar}/>
--- a/src/app/admin/resources/_components/list.tsx
+++ b/src/app/admin/resources/_components/list.tsx
@@ -150,7 +150,6 @@ export default function ResourceList({resourceType}: ResourceListProps) {
      toast.error(e instanceof Error ? e.message : '更新IP检查状态失败')
    }
  }
-  console.log(data.list, 'data.list')

  // 表格列定义
  const columns = useMemo<ColumnDef<Resource<1> | Resource<2>>[]>(() => {
@@ -262,7 +261,7 @@ export default function ResourceList({resourceType}: ResourceListProps) {
          const checkip = row.original.checkip
          return (
            <Button
-              theme="default"
+              theme={checkip ? 'fail' : 'default'}
              className="h-7 px-3 text-sm"
              onClick={() => handleCheckipChange(row.original.id, row.original.checkip)}
            >
--- a/src/components/composites/purchase/long/center.tsx
+++ b/src/components/composites/purchase/long/center.tsx
@@ -84,9 +84,10 @@ export default function Center({skuData}: {

      {/* IP 时效 */}
      <FormField<Schema, 'live'>
-        className="space-y-4"
        name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
        {({id, field}) => (
          <RadioGroup
            id={id}
@@ -130,7 +131,7 @@ export default function Center({skuData}: {

      {/* 套餐时效 */}
      {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
          {({id, field}) => (
            <RadioGroup
              id={id}
@@ -162,14 +163,16 @@ export default function Center({skuData}: {
      {type === '1' ? (
        <NumberStepperField
          name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
+          description="本套餐每日可提取 IP 的最大数量"
          min={currentCountMin}
          step={100}
        />
      ) : (
        <NumberStepperField
          name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
+          description="本套餐总计可提取 IP 的最大数量"
          min={currentCountMin}
          step={100}
        />
--- a/src/components/composites/purchase/shared/number-stepper-field.tsx
+++ b/src/components/composites/purchase/shared/number-stepper-field.tsx
@@ -12,6 +12,7 @@ type PurchaseStepperFieldName = 'quota' | 'daily_limit'
 type NumberStepperFieldProps = {
  name: PurchaseStepperFieldName
  label: string
+  description?: string
  min: number
  step: number
 }
@@ -25,7 +26,7 @@ export function NumberStepperField(props: NumberStepperFieldProps) {

  return (
    <FormField<PurchaseFormValues, PurchaseStepperFieldName>
-      className="space-y-4"
+      description={props.description}
      name={props.name}
      label={props.label}
    >
--- a/src/components/composites/purchase/short/center.tsx
+++ b/src/components/composites/purchase/short/center.tsx
@@ -85,9 +85,10 @@ export default function Center({

      {/* IP 时效 */}
      <FormField<Schema, 'live'>
-        className="space-y-4"
        name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
        {({id, field}) => (
          <RadioGroup
            id={id}
@@ -134,7 +135,7 @@ export default function Center({

      {/* 套餐时效 */}
      {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
          {({id, field}) => (
            <RadioGroup
              id={id}
@@ -166,14 +167,16 @@ export default function Center({
      {type === '1' ? (
        <NumberStepperField
          name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
+          description="本套餐每日可提取 IP 的最大数量"
          min={currentCountMin}
          step={1000}
        />
      ) : (
        <NumberStepperField
          name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
+          description="本套餐总计可提取 IP 的最大数量"
          min={currentCountMin}
          step={5000}
        />
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -80,18 +80,6 @@ function FormField<
            )
          }

-          {/* control */}
-          <Slot
-            data-slot="form-control"
-            aria-invalid={!!fieldState.error}
-            aria-describedby={
-              !!fieldState.error
-                ? `${id}-description`
-                : `${id}-description ${id}-message`
-            }>
-            {props.children({id, field, fieldState, formState})}
-          </Slot>
-
          {/* description */}
          {!!props.description && (
            <FormDescription
@@ -105,6 +93,18 @@ function FormField<
            </FormDescription>
          )}

+          {/* control */}
+          <Slot
+            data-slot="form-control"
+            aria-invalid={!!fieldState.error}
+            aria-describedby={
+              !!fieldState.error
+                ? `${id}-description`
+                : `${id}-description ${id}-message`
+            }>
+            {props.children({id, field, fieldState, formState})}
+          </Slot>
+
          {/* message */}
          {!fieldState.error ? null : (
            <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
--- a/src/lib/models/models.ts
+++ b/src/lib/models/models.ts
@@ -39,6 +39,17 @@ export type Bill = {
  refund: Refund
  resource: Resource
 }
+export type Balance = {
+  id: number
+  resource_id: number
+  bill_no: string
+  amount: number
+  created_at: Date
+  trade: Trade
+  balance_prev: number
+  balance_curr: number
+  bill: Bill
+}

 export type Trade = {
  id: number