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:
58
src/components/admin/DashboardStats.tsx
Normal file
58
src/components/admin/DashboardStats.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user