2025.11.27.22.40

src/pages/admin/index.tsx

@@ -5,6 +5,7 @@ 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, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 
 // 定义统计数据接口
 interface DashboardStats {
@@ -15,9 +16,26 @@ interface DashboardStats {
 }
 
 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">
@@ -82,9 +100,25 @@ export default function AdminDashboard({ stats }: { stats: DashboardStats }) {
                             <CardTitle>近期概览</CardTitle>
                         </CardHeader>
                         <CardContent className="pl-2">
-                            <div className="h-[200px] flex items-center justify-center text-muted-foreground">
-                                图表组件待集成 (Recharts)
-                            </div>
+                            <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">