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
110
src/components/admin/DailyChart.tsx
Normal file
110
src/components/admin/DailyChart.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
'use client';
|
||||
|
||||
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
|
||||
|
||||
interface DailyData {
|
||||
date: string;
|
||||
amount: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface DailyChartProps {
|
||||
data: DailyData[];
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
const [, m, d] = dateStr.split('-');
|
||||
return `${m}/${d}`;
|
||||
}
|
||||
|
||||
function formatAmount(value: number) {
|
||||
if (value >= 10000) return `¥${(value / 10000).toFixed(1)}w`;
|
||||
if (value >= 1000) return `¥${(value / 1000).toFixed(1)}k`;
|
||||
return `¥${value}`;
|
||||
}
|
||||
|
||||
interface TooltipPayload {
|
||||
value: number;
|
||||
dataKey: string;
|
||||
}
|
||||
|
||||
function CustomTooltip({
|
||||
active,
|
||||
payload,
|
||||
label,
|
||||
dark,
|
||||
}: {
|
||||
active?: boolean;
|
||||
payload?: TooltipPayload[];
|
||||
label?: string;
|
||||
dark?: boolean;
|
||||
}) {
|
||||
if (!active || !payload?.length) return null;
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'rounded-lg border px-3 py-2 text-sm shadow-lg',
|
||||
dark ? 'border-slate-600 bg-slate-800 text-slate-200' : 'border-slate-200 bg-white text-slate-800',
|
||||
].join(' ')}
|
||||
>
|
||||
<p className={['mb-1 text-xs', dark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>{label}</p>
|
||||
{payload.map((p) => (
|
||||
<p key={p.dataKey}>
|
||||
{p.dataKey === 'amount' ? '金额' : '笔数'}: {p.dataKey === 'amount' ? `¥${p.value.toLocaleString()}` : p.value}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DailyChart({ data, dark }: DailyChartProps) {
|
||||
// Auto-calculate tick interval: show ~10-15 labels max
|
||||
const tickInterval = data.length > 30 ? Math.ceil(data.length / 12) - 1 : 0;
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||||
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>每日充值趋势</h3>
|
||||
<p className={['text-center text-sm py-16', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const axisColor = dark ? '#64748b' : '#94a3b8';
|
||||
const gridColor = dark ? '#334155' : '#e2e8f0';
|
||||
|
||||
return (
|
||||
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||||
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>每日充值趋势</h3>
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 10 }}>
|
||||
<CartesianGrid stroke={gridColor} strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={formatDate}
|
||||
tick={{ fill: axisColor, fontSize: 12 }}
|
||||
axisLine={{ stroke: gridColor }}
|
||||
tickLine={false}
|
||||
interval={tickInterval}
|
||||
/>
|
||||
<YAxis
|
||||
tickFormatter={formatAmount}
|
||||
tick={{ fill: axisColor, fontSize: 12 }}
|
||||
axisLine={{ stroke: gridColor }}
|
||||
tickLine={false}
|
||||
width={60}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip dark={dark} />} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="amount"
|
||||
stroke={dark ? '#818cf8' : '#4f46e5'}
|
||||
strokeWidth={2}
|
||||
dot={{ r: 3, fill: dark ? '#818cf8' : '#4f46e5' }}
|
||||
activeDot={{ r: 5 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
86
src/components/admin/Leaderboard.tsx
Normal file
86
src/components/admin/Leaderboard.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
'use client';
|
||||
|
||||
interface LeaderboardEntry {
|
||||
userId: number;
|
||||
userName: string | null;
|
||||
userEmail: string | null;
|
||||
totalAmount: number;
|
||||
orderCount: number;
|
||||
}
|
||||
|
||||
interface LeaderboardProps {
|
||||
data: LeaderboardEntry[];
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const RANK_STYLES: Record<number, { light: string; dark: string }> = {
|
||||
1: { light: 'bg-amber-100 text-amber-700', dark: 'bg-amber-500/20 text-amber-300' },
|
||||
2: { light: 'bg-slate-200 text-slate-600', dark: 'bg-slate-500/20 text-slate-300' },
|
||||
3: { light: 'bg-orange-100 text-orange-700', dark: 'bg-orange-500/20 text-orange-300' },
|
||||
};
|
||||
|
||||
export default function Leaderboard({ data, dark }: LeaderboardProps) {
|
||||
const thCls = `px-4 py-3 text-left text-xs font-medium uppercase ${dark ? 'text-slate-400' : 'text-gray-500'}`;
|
||||
const tdCls = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-300' : 'text-slate-700'}`;
|
||||
const tdMuted = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-400' : 'text-gray-500'}`;
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||||
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>充值排行榜 (Top 10)</h3>
|
||||
<p className={['text-center text-sm py-8', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={['rounded-xl border', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||||
<h3 className={['px-6 pt-5 pb-2 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>
|
||||
充值排行榜 (Top 10)
|
||||
</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className={`min-w-full divide-y ${dark ? 'divide-slate-700' : 'divide-gray-200'}`}>
|
||||
<thead className={dark ? 'bg-slate-800/50' : 'bg-gray-50'}>
|
||||
<tr>
|
||||
<th className={thCls}>#</th>
|
||||
<th className={thCls}>用户</th>
|
||||
<th className={thCls}>累计金额</th>
|
||||
<th className={thCls}>订单数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className={`divide-y ${dark ? 'divide-slate-700/60' : 'divide-gray-200'}`}>
|
||||
{data.map((entry, i) => {
|
||||
const rank = i + 1;
|
||||
const rankStyle = RANK_STYLES[rank];
|
||||
return (
|
||||
<tr key={entry.userId} className={dark ? 'hover:bg-slate-700/40' : 'hover:bg-gray-50'}>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
||||
{rankStyle ? (
|
||||
<span className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${dark ? rankStyle.dark : rankStyle.light}`}>
|
||||
{rank}
|
||||
</span>
|
||||
) : (
|
||||
<span className={dark ? 'text-slate-500' : 'text-gray-400'}>{rank}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={tdCls}>
|
||||
<div>{entry.userName || `#${entry.userId}`}</div>
|
||||
{entry.userEmail && (
|
||||
<div className={['text-xs', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>
|
||||
{entry.userEmail}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className={`whitespace-nowrap px-4 py-3 text-sm font-medium ${dark ? 'text-slate-200' : 'text-slate-900'}`}>
|
||||
¥{entry.totalAmount.toLocaleString()}
|
||||
</td>
|
||||
<td className={tdMuted}>{entry.orderCount}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/components/admin/PaymentMethodChart.tsx
Normal file
61
src/components/admin/PaymentMethodChart.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
'use client';
|
||||
|
||||
interface PaymentMethod {
|
||||
paymentType: string;
|
||||
amount: number;
|
||||
count: number;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
interface PaymentMethodChartProps {
|
||||
data: PaymentMethod[];
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const TYPE_CONFIG: Record<string, { label: string; light: string; dark: string }> = {
|
||||
alipay: { label: '支付宝', light: 'bg-blue-500', dark: 'bg-blue-400' },
|
||||
wechat: { label: '微信支付', light: 'bg-green-500', dark: 'bg-green-400' },
|
||||
stripe: { label: 'Stripe', light: 'bg-purple-500', dark: 'bg-purple-400' },
|
||||
};
|
||||
|
||||
export default function PaymentMethodChart({ data, dark }: PaymentMethodChartProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||||
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>支付方式分布</h3>
|
||||
<p className={['text-center text-sm py-8', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||||
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>支付方式分布</h3>
|
||||
<div className="space-y-4">
|
||||
{data.map((method) => {
|
||||
const config = TYPE_CONFIG[method.paymentType] || {
|
||||
label: method.paymentType,
|
||||
light: 'bg-gray-500',
|
||||
dark: 'bg-gray-400',
|
||||
};
|
||||
return (
|
||||
<div key={method.paymentType}>
|
||||
<div className="mb-1.5 flex items-center justify-between text-sm">
|
||||
<span className={dark ? 'text-slate-300' : 'text-slate-700'}>{config.label}</span>
|
||||
<span className={dark ? 'text-slate-400' : 'text-slate-500'}>
|
||||
¥{method.amount.toLocaleString()} · {method.percentage}%
|
||||
</span>
|
||||
</div>
|
||||
<div className={['h-3 w-full overflow-hidden rounded-full', dark ? 'bg-slate-700' : 'bg-slate-100'].join(' ')}>
|
||||
<div
|
||||
className={['h-full rounded-full transition-all', dark ? config.dark : config.light].join(' ')}
|
||||
style={{ width: `${method.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user