fix: /admin 直接显示数据概览,去掉管理首页导航项
This commit is contained in:
@@ -5,8 +5,7 @@ import { Suspense } from 'react';
|
|||||||
import { resolveLocale } from '@/lib/locale';
|
import { resolveLocale } from '@/lib/locale';
|
||||||
|
|
||||||
const NAV_ITEMS = [
|
const NAV_ITEMS = [
|
||||||
{ path: '/admin', label: { zh: '管理首页', en: 'Home' } },
|
{ path: '/admin', label: { zh: '数据概览', en: 'Dashboard' } },
|
||||||
{ path: '/admin/dashboard', label: { zh: '数据概览', en: 'Dashboard' } },
|
|
||||||
{ path: '/admin/orders', label: { zh: '订单管理', en: 'Orders' } },
|
{ path: '/admin/orders', label: { zh: '订单管理', en: 'Orders' } },
|
||||||
{ path: '/admin/channels', label: { zh: '渠道管理', en: 'Channels' } },
|
{ path: '/admin/channels', label: { zh: '渠道管理', en: 'Channels' } },
|
||||||
{ path: '/admin/subscriptions', label: { zh: '订阅管理', en: 'Subscriptions' } },
|
{ path: '/admin/subscriptions', label: { zh: '订阅管理', en: 'Subscriptions' } },
|
||||||
@@ -31,7 +30,7 @@ function AdminNav() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const isActive = (navPath: string) => {
|
const isActive = (navPath: string) => {
|
||||||
if (navPath === '/admin') return pathname === '/admin';
|
if (navPath === '/admin') return pathname === '/admin' || pathname === '/admin/dashboard';
|
||||||
return pathname.startsWith(navPath);
|
return pathname.startsWith(navPath);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,54 +1,36 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useSearchParams } from 'next/navigation';
|
import { useSearchParams } from 'next/navigation';
|
||||||
import { Suspense } from 'react';
|
import { useState, useEffect, useCallback, Suspense } from 'react';
|
||||||
import PayPageLayout from '@/components/PayPageLayout';
|
import PayPageLayout from '@/components/PayPageLayout';
|
||||||
import { resolveLocale } from '@/lib/locale';
|
import DashboardStats from '@/components/admin/DashboardStats';
|
||||||
|
import DailyChart from '@/components/admin/DailyChart';
|
||||||
|
import Leaderboard from '@/components/admin/Leaderboard';
|
||||||
|
import PaymentMethodChart from '@/components/admin/PaymentMethodChart';
|
||||||
|
import { resolveLocale, type Locale } from '@/lib/locale';
|
||||||
|
|
||||||
const MODULES = [
|
interface DashboardData {
|
||||||
{
|
summary: {
|
||||||
path: '/admin/dashboard',
|
today: { amount: number; orderCount: number; paidCount: number };
|
||||||
label: { zh: '数据概览', en: 'Dashboard' },
|
total: { amount: number; orderCount: number; paidCount: number };
|
||||||
desc: { zh: '收入统计与订单趋势', en: 'Revenue statistics and order trends' },
|
successRate: number;
|
||||||
icon: (
|
avgAmount: number;
|
||||||
<svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
};
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
dailySeries: { date: string; amount: number; count: number }[];
|
||||||
</svg>
|
leaderboard: {
|
||||||
),
|
userId: number;
|
||||||
},
|
userName: string | null;
|
||||||
{
|
userEmail: string | null;
|
||||||
path: '/admin/orders',
|
totalAmount: number;
|
||||||
label: { zh: '订单管理', en: 'Order Management' },
|
orderCount: number;
|
||||||
desc: { zh: '查看和管理所有充值订单', en: 'View and manage all recharge orders' },
|
}[];
|
||||||
icon: (
|
paymentMethods: { paymentType: string; amount: number; count: number; percentage: number }[];
|
||||||
<svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
meta: { days: number; generatedAt: string };
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
|
}
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/admin/channels',
|
|
||||||
label: { zh: '渠道管理', en: 'Channel Management' },
|
|
||||||
desc: { zh: '配置 API 渠道与倍率', en: 'Configure API channels and rate multipliers' },
|
|
||||||
icon: (
|
|
||||||
<svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m-3.75 0h7.5m-7.5 0H3m4.5 0a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m7.5-12a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m-3.75 0h7.5m-7.5 0H3m4.5 0a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3M18 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m-3.75 0h7.5M14.25 16.5H21m-4.5 0a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/admin/subscriptions',
|
|
||||||
label: { zh: '订阅管理', en: 'Subscription Management' },
|
|
||||||
desc: { zh: '管理订阅套餐与用户订阅', en: 'Manage subscription plans and user subscriptions' },
|
|
||||||
icon: (
|
|
||||||
<svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function AdminOverviewContent() {
|
const DAYS_OPTIONS = [7, 30, 90] as const;
|
||||||
|
|
||||||
|
function DashboardContent() {
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const token = searchParams.get('token');
|
const token = searchParams.get('token');
|
||||||
const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
|
const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
|
||||||
@@ -62,16 +44,60 @@ function AdminOverviewContent() {
|
|||||||
? {
|
? {
|
||||||
missingToken: 'Missing admin token',
|
missingToken: 'Missing admin token',
|
||||||
missingTokenHint: 'Please access the admin page from the Sub2API platform.',
|
missingTokenHint: 'Please access the admin page from the Sub2API platform.',
|
||||||
title: 'Admin Panel',
|
invalidToken: 'Invalid admin token',
|
||||||
subtitle: 'Manage orders, analytics, channels and subscriptions',
|
requestFailed: 'Request failed',
|
||||||
|
loadFailed: 'Failed to load data',
|
||||||
|
title: 'Dashboard',
|
||||||
|
subtitle: 'Recharge order analytics and insights',
|
||||||
|
daySuffix: 'd',
|
||||||
|
orders: 'Order Management',
|
||||||
|
refresh: 'Refresh',
|
||||||
|
loading: 'Loading...',
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
missingToken: '缺少管理员凭证',
|
missingToken: '缺少管理员凭证',
|
||||||
missingTokenHint: '请从 Sub2API 平台正确访问管理页面',
|
missingTokenHint: '请从 Sub2API 平台正确访问管理页面',
|
||||||
title: '管理后台',
|
invalidToken: '管理员凭证无效',
|
||||||
subtitle: '订单、数据、渠道与订阅的统一管理入口',
|
requestFailed: '请求失败',
|
||||||
|
loadFailed: '加载数据失败',
|
||||||
|
title: '数据概览',
|
||||||
|
subtitle: '充值订单统计与分析',
|
||||||
|
daySuffix: '天',
|
||||||
|
orders: '订单管理',
|
||||||
|
refresh: '刷新',
|
||||||
|
loading: '加载中...',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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(text.invalidToken);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
throw new Error(text.requestFailed);
|
||||||
|
}
|
||||||
|
setData(await res.json());
|
||||||
|
} catch {
|
||||||
|
setError(text.loadFailed);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [token, days]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
return (
|
return (
|
||||||
<div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
|
<div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
|
||||||
@@ -84,66 +110,76 @@ function AdminOverviewContent() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const navParams = new URLSearchParams();
|
const navParams = new URLSearchParams();
|
||||||
if (token) navParams.set('token', token);
|
navParams.set('token', token);
|
||||||
if (locale === 'en') navParams.set('lang', 'en');
|
if (locale === 'en') navParams.set('lang', 'en');
|
||||||
if (isDark) navParams.set('theme', 'dark');
|
if (theme === 'dark') navParams.set('theme', 'dark');
|
||||||
if (isEmbedded) navParams.set('ui_mode', 'embedded');
|
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 (
|
return (
|
||||||
<PayPageLayout isDark={isDark} isEmbedded={isEmbedded} maxWidth="full" title={text.title} subtitle={text.subtitle} locale={locale}>
|
<PayPageLayout
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
isDark={isDark}
|
||||||
{MODULES.map((mod) => (
|
isEmbedded={isEmbedded}
|
||||||
<a
|
maxWidth="full"
|
||||||
key={mod.path}
|
title={text.title}
|
||||||
href={`${mod.path}?${navParams}`}
|
subtitle={text.subtitle}
|
||||||
className={[
|
locale={locale}
|
||||||
'group flex items-start gap-4 rounded-xl border p-5 transition-all',
|
actions={
|
||||||
isDark
|
<>
|
||||||
? 'border-slate-700 bg-slate-800/70 hover:border-indigo-500/50 hover:bg-slate-800'
|
{DAYS_OPTIONS.map((d) => (
|
||||||
: 'border-slate-200 bg-white shadow-sm hover:border-blue-300 hover:shadow-md',
|
<button key={d} type="button" onClick={() => setDays(d)} className={days === d ? btnActive : btnBase}>
|
||||||
].join(' ')}
|
{d}
|
||||||
>
|
{text.daySuffix}
|
||||||
<div
|
</button>
|
||||||
className={[
|
))}
|
||||||
'flex h-12 w-12 shrink-0 items-center justify-center rounded-lg transition-colors',
|
<a href={`/admin/orders?${navParams}`} className={btnBase}>
|
||||||
isDark
|
{text.orders}
|
||||||
? 'bg-slate-700 text-slate-300 group-hover:bg-indigo-500/20 group-hover:text-indigo-300'
|
|
||||||
: 'bg-slate-100 text-slate-500 group-hover:bg-blue-50 group-hover:text-blue-600',
|
|
||||||
].join(' ')}
|
|
||||||
>
|
|
||||||
{mod.icon}
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<h3
|
|
||||||
className={[
|
|
||||||
'text-base font-semibold transition-colors',
|
|
||||||
isDark ? 'text-slate-100 group-hover:text-indigo-200' : 'text-slate-900 group-hover:text-blue-700',
|
|
||||||
].join(' ')}
|
|
||||||
>
|
|
||||||
{mod.label[locale]}
|
|
||||||
</h3>
|
|
||||||
<p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>{mod.desc[locale]}</p>
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
className={[
|
|
||||||
'mt-1 h-5 w-5 shrink-0 transition-transform group-hover:translate-x-0.5',
|
|
||||||
isDark ? 'text-slate-600' : 'text-slate-300',
|
|
||||||
].join(' ')}
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={2}
|
|
||||||
>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
</a>
|
||||||
))}
|
<button type="button" onClick={fetchData} className={btnBase}>
|
||||||
</div>
|
{text.refresh}
|
||||||
|
</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'}`}>{text.loading}</div>
|
||||||
|
) : data ? (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<DashboardStats summary={data.summary} dark={isDark} locale={locale} />
|
||||||
|
<DailyChart data={data.dailySeries} dark={isDark} locale={locale} />
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
<Leaderboard data={data.leaderboard} dark={isDark} locale={locale} />
|
||||||
|
<PaymentMethodChart data={data.paymentMethods} dark={isDark} locale={locale} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</PayPageLayout>
|
</PayPageLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AdminOverviewFallback() {
|
function DashboardPageFallback() {
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const locale = resolveLocale(searchParams.get('lang'));
|
const locale = resolveLocale(searchParams.get('lang'));
|
||||||
|
|
||||||
@@ -154,10 +190,10 @@ function AdminOverviewFallback() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AdminPage() {
|
export default function DashboardPage() {
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<AdminOverviewFallback />}>
|
<Suspense fallback={<DashboardPageFallback />}>
|
||||||
<AdminOverviewContent />
|
<DashboardContent />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user