18152827937/AOUN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025.11.27.17.50

Browse Source
This commit is contained in:
RUI
2025-11-27 17:50:44 +08:00
commit 5dbb30b32c
111 changed files with 18320 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/pages/admin/index.tsx Normal file
View File

@@ -0,0 +1,191 @@
import React, { useEffect, useState } from 'react';
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';
// 定义统计数据接口
interface DashboardStats {
totalUsers: number;
totalArticles: number;
totalOrders: number;
totalRevenue: number;
}
export default function AdminDashboard({ stats }: { stats: DashboardStats }) {
return (
<AdminLayout>
<div className="space-y-6">
<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">
<div className="h-[200px] flex items-center justify-center text-muted-foreground">
图表组件待集成 (Recharts)
</div>
</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
}
},
};
};