重构套餐管理页面 & 修复支付弹窗无法打开问题 & 修复用户中心展示问题
This commit is contained in:
119
src/app/admin/resources/_components/filter.tsx
Normal file
119
src/app/admin/resources/_components/filter.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
'use client'
|
||||
|
||||
import {UseFormReturn} from 'react-hook-form'
|
||||
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 {Eraser, Search} from 'lucide-react'
|
||||
|
||||
export interface ResourceFilterValues {
|
||||
resource_no: string
|
||||
type: 'expire' | 'quota' | 'all'
|
||||
create_after?: Date
|
||||
create_before?: Date
|
||||
expire_after?: Date
|
||||
expire_before?: Date
|
||||
}
|
||||
|
||||
interface ResourceFilterProps {
|
||||
form: UseFormReturn<ResourceFilterValues>
|
||||
onSubmit: () => void | Promise<void>
|
||||
onReset: () => void
|
||||
}
|
||||
|
||||
export default function ResourceFilter({form, onSubmit, onReset}: ResourceFilterProps) {
|
||||
const handler = form.handleSubmit(onSubmit)
|
||||
|
||||
return (
|
||||
<Form form={form} handler={handler} 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 type="submit" className="h-9">
|
||||
<Search/>
|
||||
<span>筛选</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
theme="outline"
|
||||
className="h-9"
|
||||
onClick={onReset}>
|
||||
<Eraser/>
|
||||
<span>重置</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
260
src/app/admin/resources/_components/list.tsx
Normal file
260
src/app/admin/resources/_components/list.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
'use client'
|
||||
|
||||
import {useCallback, useEffect, useMemo, useState} from 'react'
|
||||
import {useSearchParams} from 'next/navigation'
|
||||
import {useForm} from 'react-hook-form'
|
||||
import {zodResolver} from '@hookform/resolvers/zod'
|
||||
import zod from 'zod'
|
||||
import {toast} from 'sonner'
|
||||
import {useStatus} from '@/lib/states'
|
||||
import {ExtraResp} from '@/lib/api'
|
||||
import {listResourceLong, listResourceShort} from '@/actions/resource'
|
||||
import DataTable from '@/components/data-table'
|
||||
import {ColumnDef} from '@tanstack/react-table'
|
||||
import {Resource} from '@/lib/models/resource'
|
||||
import ResourceFilter, {ResourceFilterValues} from './filter'
|
||||
import {
|
||||
ExpireBadge,
|
||||
formatDateTime,
|
||||
getTodayUsage,
|
||||
isValidResourceType,
|
||||
ResourceTypeBadge,
|
||||
} from './utils'
|
||||
|
||||
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(),
|
||||
})
|
||||
|
||||
interface ResourceListProps {
|
||||
resourceType: 'long' | 'short'
|
||||
}
|
||||
|
||||
export default function ResourceList({resourceType}: ResourceListProps) {
|
||||
const isLong = resourceType === 'long'
|
||||
const [status, setStatus] = useStatus()
|
||||
const [data, setData] = useState<ExtraResp<typeof listResourceLong | typeof listResourceShort>>({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
list: [],
|
||||
})
|
||||
|
||||
// 从 URL 参数初始化筛选条件
|
||||
const params = useSearchParams()
|
||||
const paramType = params.get('type')
|
||||
|
||||
const form = useForm<ResourceFilterValues>({
|
||||
resolver: zodResolver(filterSchema),
|
||||
defaultValues: {
|
||||
resource_no: params.get('resource_no') || '',
|
||||
type: isValidResourceType(paramType) ? paramType : '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 getValues = form.getValues
|
||||
|
||||
// 查询数据
|
||||
const refresh = useCallback(async (page: number, size: number) => {
|
||||
setStatus('load')
|
||||
try {
|
||||
const type = {
|
||||
all: undefined,
|
||||
expire: 1,
|
||||
quota: 2,
|
||||
}[getValues('type')]
|
||||
const create_after = getValues('create_after')
|
||||
const create_before = getValues('create_before')
|
||||
const expire_after = getValues('expire_after')
|
||||
const expire_before = getValues('expire_before')
|
||||
const resource_no = getValues('resource_no')
|
||||
|
||||
const listFn = isLong ? listResourceLong : listResourceShort
|
||||
const res = await listFn({
|
||||
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 ${resourceType} resource`)
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
setStatus('fail')
|
||||
toast.error(e instanceof Error ? e.message : `加载${isLong ? '长' : '短'}效资源失败`)
|
||||
}
|
||||
}, [getValues, setStatus, isLong, resourceType])
|
||||
|
||||
useEffect(() => {
|
||||
refresh(1, 10).then()
|
||||
}, [refresh])
|
||||
|
||||
// 处理筛选提交
|
||||
const handleSubmit = async () => {
|
||||
await refresh(1, data.size)
|
||||
}
|
||||
|
||||
// 处理重置
|
||||
const handleReset = () => {
|
||||
form.reset({
|
||||
type: 'all',
|
||||
resource_no: '',
|
||||
create_after: undefined,
|
||||
create_before: undefined,
|
||||
expire_after: undefined,
|
||||
expire_before: undefined,
|
||||
})
|
||||
}
|
||||
|
||||
// 表格列定义
|
||||
const columns = useMemo<ColumnDef<Resource<1> | Resource<2>>[]>(() => {
|
||||
const resourceKey = isLong ? 'long' : 'short'
|
||||
|
||||
const baseColumns: ColumnDef<Resource<1> | Resource<2>>[] = [
|
||||
{
|
||||
header: '套餐编号',
|
||||
cell: ({row}) => {
|
||||
const expireAt = resourceKey === 'long'
|
||||
? (row.original as Resource<2>).long.expire_at
|
||||
: (row.original as Resource<1>).short.expire_at
|
||||
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<span>{row.original.resource_no}</span>
|
||||
<ExpireBadge expireAt={expireAt}/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '类型',
|
||||
cell: ({row}) => {
|
||||
const type = resourceKey === 'long'
|
||||
? (row.original as Resource<2>).long.type
|
||||
: (row.original as Resource<1>).short.type
|
||||
return <ResourceTypeBadge type={type}/>
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'IP 时效',
|
||||
cell: ({row}) => {
|
||||
const live = resourceKey === 'long'
|
||||
? (row.original as Resource<2>).long.live
|
||||
: (row.original as Resource<1>).short.live
|
||||
return <span>{isLong ? `${live}小时` : `${live / 60}分钟`}</span>
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '使用情况',
|
||||
cell: ({row}) => {
|
||||
const resource = resourceKey === 'long'
|
||||
? (row.original as Resource<2>).long
|
||||
: (row.original as Resource<1>).short
|
||||
|
||||
if (resource.type === 1) {
|
||||
const todayUsage = getTodayUsage(resource.last_at, resource.daily)
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<span>{todayUsage}/{resource.quota}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
else if (resource.type === 2) {
|
||||
if (isLong) {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{resource.used < resource.quota
|
||||
? <span className="text-green-500">正常</span>
|
||||
: <span className="text-red-500">已用完</span>}
|
||||
<span>|</span>
|
||||
<span>用量统计：{resource.used} / {resource.quota}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<span>{resource.used}/{resource.quota}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return <span>-</span>
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '最近使用时间',
|
||||
cell: ({row}) => {
|
||||
const lastAt = resourceKey === 'long'
|
||||
? (row.original as Resource<2>).long.last_at
|
||||
: (row.original as Resource<1>).short.last_at
|
||||
return lastAt ? formatDateTime(lastAt) : '暂未使用'
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '开通时间',
|
||||
cell: ({row}) => formatDateTime(row.original.created_at),
|
||||
},
|
||||
]
|
||||
|
||||
// 短效资源增加到期时间列
|
||||
if (!isLong) {
|
||||
baseColumns.push({
|
||||
header: '到期时间',
|
||||
cell: ({row}) => formatDateTime((row.original as Resource<1>).short.expire_at),
|
||||
})
|
||||
}
|
||||
|
||||
return baseColumns
|
||||
}, [isLong])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 操作区 */}
|
||||
<section className="flex justify-between flex-wrap">
|
||||
<div></div>
|
||||
<ResourceFilter
|
||||
form={form}
|
||||
onSubmit={handleSubmit}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</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={columns}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
51
src/app/admin/resources/_components/utils.tsx
Normal file
51
src/app/admin/resources/_components/utils.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import {format, isBefore, isSameDay} from 'date-fns'
|
||||
import {Badge} from '@/components/ui/badge'
|
||||
import {Box, Timer} from 'lucide-react'
|
||||
|
||||
// 类型守卫函数
|
||||
export function isValidResourceType(type: string | null): type is 'expire' | 'quota' | 'all' {
|
||||
return type === 'expire' || type === 'quota' || type === 'all'
|
||||
}
|
||||
|
||||
// 资源类型徽章
|
||||
export function ResourceTypeBadge({type}: {type: number}) {
|
||||
if (type === 1) {
|
||||
return (
|
||||
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
|
||||
<Timer size={20}/>
|
||||
<span>包时</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (type === 2) {
|
||||
return (
|
||||
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
|
||||
<Box size={20}/>
|
||||
<span>包量</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 过期徽章
|
||||
export function ExpireBadge({expireAt}: {expireAt: Date}) {
|
||||
if (isBefore(expireAt, new Date())) {
|
||||
return <Badge variant="destructive">过期</Badge>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
export function formatDateTime(date: Date | null | undefined) {
|
||||
if (!date) return '-'
|
||||
return format(date, 'yyyy-MM-dd HH:mm')
|
||||
}
|
||||
|
||||
// 计算今日使用量
|
||||
export function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
|
||||
if (lastAt && isSameDay(lastAt, new Date())) {
|
||||
return daily
|
||||
}
|
||||
return 0
|
||||
}
|
||||
Reference in New Issue
Block a user