52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Alert, Card, Col, Row, Skeleton, Statistic } from 'antd'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import PageHeader from '@/components/admin/PageHeader'
|
|
import { fetchAdminDashboardSummary } from '@/services/admin'
|
|
|
|
const cards = [
|
|
{ key: 'todayOrders', label: '今日订单' },
|
|
{ key: 'paidPendingClaim', label: '待领取' },
|
|
{ key: 'claimingTasks', label: '领取中' },
|
|
{ key: 'redeemedToday', label: '今日成功' },
|
|
{ key: 'abnormalTasks', label: '异常任务' },
|
|
] as const
|
|
|
|
export default function AdminDashboardPage() {
|
|
const query = useQuery({
|
|
queryKey: ['admin-dashboard-summary'],
|
|
queryFn: () => fetchAdminDashboardSummary(),
|
|
})
|
|
const summary = query.data?.data
|
|
|
|
return (
|
|
<section className="page-stack">
|
|
<PageHeader title="系统概览" description="快速查看订单和交付链路的运行状态。" />
|
|
|
|
{query.error ? (
|
|
<Alert
|
|
type="error"
|
|
showIcon
|
|
message={query.error instanceof Error ? query.error.message : '读取概览失败'}
|
|
/>
|
|
) : null}
|
|
|
|
{query.isLoading ? (
|
|
<Card>
|
|
<Skeleton active paragraph={{ rows: 8 }} />
|
|
</Card>
|
|
) : (
|
|
<Row gutter={[16, 16]}>
|
|
{cards.map((card) => (
|
|
<Col xs={24} md={12} xl={8} key={card.key}>
|
|
<Card>
|
|
<Statistic title={card.label} value={summary?.[card.key] ?? 0} />
|
|
</Card>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|