lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 15 Activity

添加获取价格响应异常显示loading & 时间显示到秒

Browse Source
This commit is contained in:
Eamon-meng
2026-05-12 16:15:02 +08:00
parent 84a5e27c05
commit 670961c17d
8 changed files with 129 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/admin/balance/page.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import {useCallback, useEffect, useState} from 'react'
import {Suspense, useCallback, useEffect, useState} from 'react'
import {PageRecord} from '@/lib/api'
import {Balance} from '@/lib/models'
import {useStatus} from '@/lib/states'
@@ -136,7 +136,7 @@ export default function BalancePage(props: BalancePageProps) {
</Button>
</Form>
</section>
<Suspense>
<DataTable
data={data.list}
status={status}
@@ -226,10 +226,11 @@ export default function BalancePage(props: BalancePageProps) {
header: '创建时间',
accessorKey: 'created_at',
cell: ({row}) =>
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm'),
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm:ss'),
},
]}
/>
</Suspense>
</Page>
)
}

4
src/app/admin/bills/page.tsx
View File

@@ -88,7 +88,7 @@ export default function BillsPage(props: BillsPageProps) {
<div>
</div>
<Form form={form} handler={form.handleSubmit(onSubmit)} className="flex items-end gap-4 flex-wrap">
<Form form={form} handler={form.handleSubmit(onSubmit)} className="flex-auto flex flex-wrap gap-4 items-end">
<FormField name="type" label={<span className="text-sm">账单类型</span>}>
{({id, field}) => (
<Select value={field.value} onValueChange={field.onChange}>
@@ -281,7 +281,7 @@ export default function BillsPage(props: BillsPageProps) {
},
{
accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm:ss')
),
},
// {

3
src/app/admin/channels/page.tsx
View File

@@ -93,6 +93,7 @@ export default function ChannelsPage(props: ChannelsPageProps) {
// ======================
// render
// ======================
console.log(data.list, 'data.listdata.list')
return (
<Page>
@@ -214,7 +215,7 @@ export default function ChannelsPage(props: ChannelsPageProps) {
},
{
header: '提取时间',
cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm'),
cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm:ss'),
},
{
header: '过期时间',

2
src/app/admin/resources/_components/filter.tsx
View File

@@ -29,7 +29,7 @@ export default function ResourceFilter({form, onSubmit, onReset}: ResourceFilter
const handler = form.handleSubmit(onSubmit)
return (
<Form form={form} handler={handler} className="flex items-end gap-4 flex-wrap">
<Form form={form} handler={handler} className="flex-auto flex flex-wrap gap-4 items-end">
<FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
{({id, field}) => (
<Input {...field} id={id} className="h-9"/>

2
src/app/admin/resources/_components/utils.tsx
View File

@@ -44,7 +44,7 @@ export function ExpireBadge({expireAt}: {expireAt: Date}) {
// 格式化日期
export function formatDateTime(date: Date | null | undefined) {
if (!date) return '-'
return format(date, 'yyyy-MM-dd HH:mm')
return format(date, 'yyyy-MM-dd HH:mm:ss')
}
// 计算今日使用量

2
src/app/admin/whitelist/page.tsx
View File

@@ -269,7 +269,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
header: `备注`, accessorKey: 'remark',
},
{
header: `添加时间`, cell: ({row}) => format(parseISO(row.original.created_at), 'yyyy-MM-dd HH:mm'),
header: `添加时间`, cell: ({row}) => format(parseISO(row.original.created_at), 'yyyy-MM-dd HH:mm:ss'),
},
{
id: 'actions', header: `操作`, cell: ({row}) => (

4
src/components/composites/extract/index.tsx
View File

@@ -427,7 +427,7 @@ function SelectResource() {
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
到期时间：
{format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
{format(resource.short.expire_at, 'yyyy-MM-dd HH:mm:ss')}
</span>
<span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
</div>
@@ -469,7 +469,7 @@ function SelectResource() {
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
到期时间：
{format(resource.long.expire_at, 'yyyy-MM-dd HH:mm')}
{format(resource.long.expire_at, 'yyyy-MM-dd HH:mm:ss')}
</span>
<span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
</div>

33
src/components/composites/purchase/shared/side-panel.tsx
View File

@@ -15,6 +15,7 @@ import {formatPurchaseLiveLabel} from './sku'
import {User} from '@/lib/models'
import {PurchaseFormValues} from './form-values'
import {IdCard} from 'lucide-react'
import {Loader2} from 'lucide-react'
const emptyPrice: ExtraResp<typeof getPrice> = {
price: '0.00',
@@ -43,7 +44,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
expire,
dailyLimit,
}
const priceData = usePurchasePrice(profile, selection)
const {priceData, isLoading, isError} = usePurchasePrice(profile, selection)
const {price, actual: discountedPrice = '0.00'} = priceData
const totalDiscount = getTotalDiscount(price, discountedPrice)
const hasDiscount = Number(totalDiscount) > 0
@@ -70,9 +71,13 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
</li>
<li className="flex justify-between items-center">
<span className="text-sm text-gray-500">原价</span>
{ isError ? (
<Loader2 className="h-4 w-4 animate-spin text-gray-400"/>
) : (
<span className="text-sm">￥{price}</span>
)}
</li>
{hasDiscount && (
{hasDiscount && !isError && (
<li className="flex justify-between items-center">
<span className="text-sm text-gray-500">总折扣</span>
<span className="text-sm">-￥{totalDiscount}</span>
@@ -91,9 +96,13 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
</li>
<li className="flex justify-between items-center">
<span className="text-sm text-gray-500">原价</span>
{ isError ? (
<Loader2 className="h-4 w-4 animate-spin text-gray-400"/>
) : (
<span className="text-sm">￥{price}</span>
)}
</li>
{hasDiscount && (
{hasDiscount && !isError && (
<li className="flex justify-between items-center">
<span className="text-sm text-gray-500">总折扣</span>
<span className="text-sm">-￥{totalDiscount}</span>
@@ -105,7 +114,11 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
<div className="border-b border-gray-200"></div>
<p className="flex justify-between items-center">
<span>实付价格</span>
{ isError ? (
<Loader2 className="h-5 w-5 animate-spin text-orange-500"/>
) : (
<span className="text-xl text-orange-500">￥{discountedPrice}</span>
)}
</p>
{profile ? (
profile.id_type !== 0 ? (
@@ -143,6 +156,8 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>(emptyPrice)
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const requestIdRef = useRef(0)
const {kind, mode, live, quota, expire, dailyLimit} = selection
@@ -150,6 +165,9 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
const requestId = ++requestIdRef.current
const loadPrice = async () => {
setIsLoading(true)
setIsError(false)
try {
const resource = buildPurchaseResource({
kind,
@@ -176,6 +194,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
actual: response.data.actual ?? response.data.price ?? '0.00',
discounted: response.data.discounted ?? '0.00',
})
setIsError(false)
}
catch (error) {
if (requestId !== requestIdRef.current) {
@@ -184,13 +203,19 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
console.error('获取价格失败:', error)
setPriceData(emptyPrice)
setIsError(true)
}
finally {
if (requestId === requestIdRef.current) {
setIsLoading(false)
}
}
}
loadPrice()
}, [dailyLimit, expire, kind, live, mode, profile, quota])
return priceData
return {priceData, isLoading, isError}
}
function getTotalDiscount(price: string, discountedPrice: string) {