225 lines
11 KiB
TypeScript
225 lines
11 KiB
TypeScript
import { GetServerSideProps } from 'next';
|
||
import AdminLayout from '@/components/admin/AdminLayout';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Users, FileText, ShoppingBag, DollarSign } from 'lucide-react';
|
||
import { verifyToken } from '@/lib/auth';
|
||
import { User, Article, Order } from '@/models';
|
||
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';
|
||
|
||
// 定义统计数据接口
|
||
interface DashboardStats {
|
||
totalUsers: number;
|
||
totalArticles: number;
|
||
totalOrders: number;
|
||
totalRevenue: number;
|
||
}
|
||
|
||
export default function AdminDashboard({ stats }: { stats: DashboardStats }) {
|
||
// 模拟图表数据 (实际应从 API 获取)
|
||
const data = [
|
||
{ name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
{ name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },
|
||
];
|
||
|
||
return (
|
||
<AdminLayout>
|
||
<div className="space-y-6">
|
||
{/* ... (existing header and stats cards) ... */}
|
||
<div>
|
||
<h2 className="text-3xl font-bold tracking-tight">仪表盘</h2>
|
||
<p className="text-muted-foreground">
|
||
查看系统概览和关键指标。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">总用户数</CardTitle>
|
||
<Users className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.totalUsers}</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
+20.1% 较上月
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">文章总数</CardTitle>
|
||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.totalArticles}</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
+15 篇 本周新增
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">总订单数</CardTitle>
|
||
<ShoppingBag className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.totalOrders}</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
+19% 较上月
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">总收入</CardTitle>
|
||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">¥{stats.totalRevenue.toFixed(2)}</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
+10.5% 较上月
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||
<Card className="col-span-4">
|
||
<CardHeader>
|
||
<CardTitle>近期概览</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="pl-2">
|
||
<ResponsiveContainer width="100%" height={350}>
|
||
<BarChart data={data}>
|
||
<XAxis
|
||
dataKey="name"
|
||
stroke="#888888"
|
||
fontSize={12}
|
||
tickLine={false}
|
||
axisLine={false}
|
||
/>
|
||
<YAxis
|
||
stroke="#888888"
|
||
fontSize={12}
|
||
tickLine={false}
|
||
axisLine={false}
|
||
tickFormatter={(value) => `¥${value}`}
|
||
/>
|
||
<Bar dataKey="total" fill="#000000" radius={[4, 4, 0, 0]} />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="col-span-3">
|
||
<CardHeader>
|
||
<CardTitle>最新动态</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-8">
|
||
{/* 模拟动态数据 */}
|
||
<div className="flex items-center">
|
||
<span className="relative flex h-2 w-2 mr-2">
|
||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
|
||
<span className="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
|
||
</span>
|
||
<div className="ml-4 space-y-1">
|
||
<p className="text-sm font-medium leading-none">新用户注册</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
zhangsan@example.com
|
||
</p>
|
||
</div>
|
||
<div className="ml-auto font-medium text-xs text-muted-foreground">刚刚</div>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="relative flex h-2 w-2 mr-2">
|
||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||
</span>
|
||
<div className="ml-4 space-y-1">
|
||
<p className="text-sm font-medium leading-none">新订单支付成功</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
¥299.00 - 年度会员
|
||
</p>
|
||
</div>
|
||
<div className="ml-auto font-medium text-xs text-muted-foreground">5分钟前</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</AdminLayout>
|
||
);
|
||
}
|
||
|
||
export const getServerSideProps: GetServerSideProps = async (context) => {
|
||
const { req } = context;
|
||
const token = req.cookies.token;
|
||
|
||
// 1. 验证 Token
|
||
if (!token) {
|
||
return {
|
||
redirect: {
|
||
destination: '/auth/login?redirect=/admin',
|
||
permanent: false,
|
||
},
|
||
};
|
||
}
|
||
|
||
const user = verifyToken(token);
|
||
if (!user || user.role !== 'admin') {
|
||
return {
|
||
redirect: {
|
||
destination: '/', // 非管理员跳转首页
|
||
permanent: false,
|
||
},
|
||
};
|
||
}
|
||
|
||
// 2. 获取统计数据 (SSR)
|
||
// 使用 withDatabase 确保数据库连接
|
||
// 注意：getServerSideProps 中不能直接使用 withDatabase 高阶函数包裹，需要手动调用连接逻辑或确保全局连接
|
||
// 这里我们假设 mongoose 已经在 api 路由或其他地方连接过，或者我们在 _app.tsx 中处理了连接
|
||
// 为了稳妥，我们在 lib/dbConnect.ts 中应该有一个缓存连接的逻辑，这里简单起见，我们直接查询
|
||
// 更好的做法是把数据获取逻辑封装成 service
|
||
|
||
// 由于 withDatabase 是 API 路由的高阶函数，这里我们直接使用 mongoose
|
||
// 但为了避免连接问题，我们最好在 models/index.ts 导出时确保连接，或者在这里手动 connect
|
||
// 鉴于项目结构，我们假设 models 已经可用。
|
||
|
||
// 修正：在 getServerSideProps 中直接操作数据库需要确保连接。
|
||
// 我们临时引入 mongoose 并连接。
|
||
const mongoose = require('mongoose');
|
||
if (mongoose.connection.readyState === 0) {
|
||
await mongoose.connect(process.env.MONGODB_URI);
|
||
}
|
||
|
||
const totalUsers = await User.countDocuments();
|
||
const totalArticles = await Article.countDocuments();
|
||
const totalOrders = await Order.countDocuments();
|
||
|
||
// 计算总收入
|
||
const orders = await Order.find({ 订单状态: 'paid' }, '支付金额');
|
||
const totalRevenue = orders.reduce((acc: number, order: any) => acc + (order.支付金额 || 0), 0);
|
||
|
||
return {
|
||
props: {
|
||
stats: {
|
||
totalUsers,
|
||
totalArticles,
|
||
totalOrders,
|
||
totalRevenue
|
||
}
|
||
},
|
||
};
|
||
};
|