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
155
src/app/admin/dashboard/page.tsx
Normal file
155
src/app/admin/dashboard/page.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
'use client';
|
||||
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useState, useEffect, useCallback, Suspense } from 'react';
|
||||
import PayPageLayout from '@/components/PayPageLayout';
|
||||
import DashboardStats from '@/components/admin/DashboardStats';
|
||||
import DailyChart from '@/components/admin/DailyChart';
|
||||
import Leaderboard from '@/components/admin/Leaderboard';
|
||||
import PaymentMethodChart from '@/components/admin/PaymentMethodChart';
|
||||
|
||||
interface DashboardData {
|
||||
summary: {
|
||||
today: { amount: number; orderCount: number; paidCount: number };
|
||||
total: { amount: number; orderCount: number; paidCount: number };
|
||||
successRate: number;
|
||||
avgAmount: number;
|
||||
};
|
||||
dailySeries: { date: string; amount: number; count: number }[];
|
||||
leaderboard: { userId: number; userName: string | null; userEmail: string | null; totalAmount: number; orderCount: number }[];
|
||||
paymentMethods: { paymentType: string; amount: number; count: number; percentage: number }[];
|
||||
meta: { days: number; generatedAt: string };
|
||||
}
|
||||
|
||||
const DAYS_OPTIONS = [7, 30, 90] as const;
|
||||
|
||||
function DashboardContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const token = searchParams.get('token');
|
||||
const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
|
||||
const uiMode = searchParams.get('ui_mode') || 'standalone';
|
||||
const isDark = theme === 'dark';
|
||||
const isEmbedded = uiMode === 'embedded';
|
||||
|
||||
const [days, setDays] = useState<number>(30);
|
||||
const [data, setData] = useState<DashboardData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!token) return;
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await fetch(`/api/admin/dashboard?token=${encodeURIComponent(token)}&days=${days}`);
|
||||
if (!res.ok) {
|
||||
if (res.status === 401) {
|
||||
setError('管理员凭证无效');
|
||||
return;
|
||||
}
|
||||
throw new Error('请求失败');
|
||||
}
|
||||
setData(await res.json());
|
||||
} catch {
|
||||
setError('加载数据失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [token, days]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
|
||||
<div className="text-center text-red-500">
|
||||
<p className="text-lg font-medium">缺少管理员凭证</p>
|
||||
<p className="mt-2 text-sm text-gray-500">请从 Sub2API 平台正确访问管理页面</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const navParams = new URLSearchParams();
|
||||
navParams.set('token', token);
|
||||
if (theme === 'dark') navParams.set('theme', 'dark');
|
||||
if (isEmbedded) navParams.set('ui_mode', 'embedded');
|
||||
|
||||
const btnBase = [
|
||||
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
isDark ? 'border-slate-600 text-slate-200 hover:bg-slate-800' : 'border-slate-300 text-slate-700 hover:bg-slate-100',
|
||||
].join(' ');
|
||||
|
||||
const btnActive = [
|
||||
'inline-flex items-center rounded-lg px-3 py-1.5 text-xs font-medium',
|
||||
isDark ? 'bg-indigo-500/30 text-indigo-200 ring-1 ring-indigo-400/40' : 'bg-blue-600 text-white',
|
||||
].join(' ');
|
||||
|
||||
return (
|
||||
<PayPageLayout
|
||||
isDark={isDark}
|
||||
isEmbedded={isEmbedded}
|
||||
maxWidth="full"
|
||||
title="数据概览"
|
||||
subtitle="充值订单统计与分析"
|
||||
actions={
|
||||
<>
|
||||
{DAYS_OPTIONS.map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
type="button"
|
||||
onClick={() => setDays(d)}
|
||||
className={days === d ? btnActive : btnBase}
|
||||
>
|
||||
{d}天
|
||||
</button>
|
||||
))}
|
||||
<a href={`/admin?${navParams}`} className={btnBase}>
|
||||
订单管理
|
||||
</a>
|
||||
<button type="button" onClick={fetchData} className={btnBase}>
|
||||
刷新
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{error && (
|
||||
<div className={`mb-4 rounded-lg border p-3 text-sm ${isDark ? 'border-red-800 bg-red-950/50 text-red-400' : 'border-red-200 bg-red-50 text-red-600'}`}>
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 opacity-60 hover:opacity-100">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className={`py-24 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载中...</div>
|
||||
) : data ? (
|
||||
<div className="space-y-6">
|
||||
<DashboardStats summary={data.summary} dark={isDark} />
|
||||
<DailyChart data={data.dailySeries} dark={isDark} />
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<Leaderboard data={data.leaderboard} dark={isDark} />
|
||||
<PaymentMethodChart data={data.paymentMethods} dark={isDark} />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</PayPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="text-gray-500">加载中...</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<DashboardContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -162,6 +162,16 @@ function AdminContent() {
|
||||
REFUNDED: '已退款',
|
||||
};
|
||||
|
||||
const navParams = new URLSearchParams();
|
||||
if (token) navParams.set('token', token);
|
||||
if (isDark) navParams.set('theme', 'dark');
|
||||
if (isEmbedded) navParams.set('ui_mode', 'embedded');
|
||||
|
||||
const btnBase = [
|
||||
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
isDark ? 'border-slate-600 text-slate-200 hover:bg-slate-800' : 'border-slate-300 text-slate-700 hover:bg-slate-100',
|
||||
].join(' ');
|
||||
|
||||
return (
|
||||
<PayPageLayout
|
||||
isDark={isDark}
|
||||
@@ -170,16 +180,14 @@ function AdminContent() {
|
||||
title="订单管理"
|
||||
subtitle="查看和管理所有充值订单"
|
||||
actions={
|
||||
<button
|
||||
type="button"
|
||||
onClick={fetchOrders}
|
||||
className={[
|
||||
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
isDark ? 'border-slate-600 text-slate-200 hover:bg-slate-800' : 'border-slate-300 text-slate-700 hover:bg-slate-100',
|
||||
].join(' ')}
|
||||
>
|
||||
刷新
|
||||
</button>
|
||||
<>
|
||||
<a href={`/admin/dashboard?${navParams}`} className={btnBase}>
|
||||
数据概览
|
||||
</a>
|
||||
<button type="button" onClick={fetchOrders} className={btnBase}>
|
||||
刷新
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{error && (
|
||||
|
||||
139
src/app/api/admin/dashboard/route.ts
Normal file
139
src/app/api/admin/dashboard/route.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { prisma } from '@/lib/db';
|
||||
import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
|
||||
import { OrderStatus } from '@prisma/client';
|
||||
|
||||
/** 格式化 Date 为 YYYY-MM-DD（使用本地时区，与 PostgreSQL DATE() 一致） */
|
||||
function toDateStr(d: Date): string {
|
||||
const y = d.getFullYear();
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
if (!(await verifyAdminToken(request))) return unauthorizedResponse();
|
||||
|
||||
const searchParams = request.nextUrl.searchParams;
|
||||
const days = Math.min(365, Math.max(1, Number(searchParams.get('days') || '30')));
|
||||
|
||||
const now = new Date();
|
||||
const startDate = new Date(now);
|
||||
startDate.setDate(startDate.getDate() - days);
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
|
||||
const todayStart = new Date(now);
|
||||
todayStart.setHours(0, 0, 0, 0);
|
||||
|
||||
const paidStatuses: OrderStatus[] = [
|
||||
OrderStatus.PAID,
|
||||
OrderStatus.RECHARGING,
|
||||
OrderStatus.COMPLETED,
|
||||
OrderStatus.REFUNDING,
|
||||
OrderStatus.REFUNDED,
|
||||
OrderStatus.REFUND_FAILED,
|
||||
];
|
||||
|
||||
const [todayStats, totalStats, todayOrders, totalOrders, dailyRaw, leaderboardRaw, paymentMethodStats] =
|
||||
await Promise.all([
|
||||
// Today paid aggregate
|
||||
prisma.order.aggregate({
|
||||
where: { status: { in: paidStatuses }, paidAt: { gte: todayStart } },
|
||||
_sum: { amount: true },
|
||||
_count: { _all: true },
|
||||
}),
|
||||
// Total paid aggregate
|
||||
prisma.order.aggregate({
|
||||
where: { status: { in: paidStatuses } },
|
||||
_sum: { amount: true },
|
||||
_count: { _all: true },
|
||||
}),
|
||||
// Today total orders
|
||||
prisma.order.count({ where: { createdAt: { gte: todayStart } } }),
|
||||
// Total orders
|
||||
prisma.order.count(),
|
||||
// Daily series (raw query for DATE truncation)
|
||||
prisma.$queryRaw<{ date: string; amount: string; count: bigint }[]>`
|
||||
SELECT DATE(paid_at) as date, SUM(amount)::text as amount, COUNT(*) as count
|
||||
FROM orders
|
||||
WHERE status IN ('PAID', 'RECHARGING', 'COMPLETED', 'REFUNDING', 'REFUNDED', 'REFUND_FAILED')
|
||||
AND paid_at >= ${startDate}
|
||||
GROUP BY DATE(paid_at)
|
||||
ORDER BY date
|
||||
`,
|
||||
// Leaderboard: GROUP BY user_id only, MAX() for name/email to avoid splitting rows on name changes
|
||||
prisma.$queryRaw<
|
||||
{ user_id: number; user_name: string | null; user_email: string | null; total_amount: string; order_count: bigint }[]
|
||||
>`
|
||||
SELECT user_id, MAX(user_name) as user_name, MAX(user_email) as user_email,
|
||||
SUM(amount)::text as total_amount, COUNT(*) as order_count
|
||||
FROM orders
|
||||
WHERE status IN ('PAID', 'RECHARGING', 'COMPLETED', 'REFUNDING', 'REFUNDED', 'REFUND_FAILED')
|
||||
AND paid_at >= ${startDate}
|
||||
GROUP BY user_id
|
||||
ORDER BY SUM(amount) DESC
|
||||
LIMIT 10
|
||||
`,
|
||||
// Payment method distribution (within time range)
|
||||
prisma.order.groupBy({
|
||||
by: ['paymentType'],
|
||||
where: { status: { in: paidStatuses }, paidAt: { gte: startDate } },
|
||||
_sum: { amount: true },
|
||||
_count: { _all: true },
|
||||
}),
|
||||
]);
|
||||
|
||||
// Fill missing dates for continuous line chart (use local timezone consistently)
|
||||
const dailyMap = new Map<string, { amount: number; count: number }>();
|
||||
for (const row of dailyRaw) {
|
||||
const dateStr = typeof row.date === 'string' ? row.date : toDateStr(new Date(row.date));
|
||||
dailyMap.set(dateStr, { amount: Number(row.amount), count: Number(row.count) });
|
||||
}
|
||||
|
||||
const dailySeries: { date: string; amount: number; count: number }[] = [];
|
||||
const cursor = new Date(startDate);
|
||||
while (cursor <= now) {
|
||||
const dateStr = toDateStr(cursor);
|
||||
const entry = dailyMap.get(dateStr);
|
||||
dailySeries.push({ date: dateStr, amount: entry?.amount ?? 0, count: entry?.count ?? 0 });
|
||||
cursor.setDate(cursor.getDate() + 1);
|
||||
}
|
||||
|
||||
// Calculate summary
|
||||
const todayPaidAmount = Number(todayStats._sum?.amount || 0);
|
||||
const todayPaidCount = todayStats._count._all;
|
||||
const totalPaidAmount = Number(totalStats._sum?.amount || 0);
|
||||
const totalPaidCount = totalStats._count._all;
|
||||
const successRate = totalOrders > 0 ? (totalPaidCount / totalOrders) * 100 : 0;
|
||||
const avgAmount = totalPaidCount > 0 ? totalPaidAmount / totalPaidCount : 0;
|
||||
|
||||
// Payment method total for percentage calc
|
||||
const paymentTotal = paymentMethodStats.reduce((sum, m) => sum + Number(m._sum?.amount || 0), 0);
|
||||
|
||||
return NextResponse.json({
|
||||
summary: {
|
||||
today: { amount: todayPaidAmount, orderCount: todayOrders, paidCount: todayPaidCount },
|
||||
total: { amount: totalPaidAmount, orderCount: totalOrders, paidCount: totalPaidCount },
|
||||
successRate: Math.round(successRate * 10) / 10,
|
||||
avgAmount: Math.round(avgAmount * 100) / 100,
|
||||
},
|
||||
dailySeries,
|
||||
leaderboard: leaderboardRaw.map((row) => ({
|
||||
userId: row.user_id,
|
||||
userName: row.user_name,
|
||||
userEmail: row.user_email,
|
||||
totalAmount: Number(row.total_amount),
|
||||
orderCount: Number(row.order_count),
|
||||
})),
|
||||
paymentMethods: paymentMethodStats.map((m) => {
|
||||
const amount = Number(m._sum?.amount || 0);
|
||||
return {
|
||||
paymentType: m.paymentType,
|
||||
amount,
|
||||
count: m._count._all,
|
||||
percentage: paymentTotal > 0 ? Math.round((amount / paymentTotal) * 1000) / 10 : 0,
|
||||
};
|
||||
}),
|
||||
meta: { days, generatedAt: now.toISOString() },
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user