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:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user