feat: 管理后台数据看板

新增 /admin/dashboard 页面,提供充值订单统计与分析:
- 汇总统计卡片(今日/累计充值金额、订单数、成功率、平均充值)
- 每日充值趋势折线图(recharts,支持 7/30/90 天切换)
- 充值排行榜(Top 10 用户)
- 支付方式分布(水平条形图)
- 与 /admin 订单管理页面互相导航

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
miwei
2026-03-04 17:06:27 +08:00
parent d7d91857c7
commit 3a9a32e2c2
9 changed files with 937 additions and 10 deletions

View File

@@ -0,0 +1,58 @@
'use client';
interface Summary {
today: { amount: number; orderCount: number; paidCount: number };
total: { amount: number; orderCount: number; paidCount: number };
successRate: number;
avgAmount: number;
}
interface DashboardStatsProps {
summary: Summary;
dark?: boolean;
}
export default function DashboardStats({ summary, dark }: DashboardStatsProps) {
const cards = [
{ label: '今日充值', value: `¥${summary.today.amount.toLocaleString()}`, accent: true },
{ label: '今日订单', value: `${summary.today.paidCount}/${summary.today.orderCount}` },
{ label: '累计充值', value: `¥${summary.total.amount.toLocaleString()}`, accent: true },
{ label: '累计订单', value: String(summary.total.paidCount) },
{ label: '成功率', value: `${summary.successRate}%` },
{ label: '平均充值', value: `¥${summary.avgAmount.toFixed(2)}` },
];
return (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
{cards.map((card) => (
<div
key={card.label}
className={[
'rounded-xl border p-4',
dark
? 'border-slate-700 bg-slate-800/60'
: 'border-slate-200 bg-white shadow-sm',
].join(' ')}
>
<p className={['text-xs font-medium', dark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
{card.label}
</p>
<p
className={[
'mt-1 text-xl font-semibold tracking-tight',
card.accent
? dark
? 'text-indigo-400'
: 'text-indigo-600'
: dark
? 'text-slate-100'
: 'text-slate-900',
].join(' ')}
>
{card.value}
</p>
</div>
))}
</div>
);
}