Update soul-content project

app/admin/page.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useStore } from "@/lib/store"
+import { Users, BookOpen, ShoppingBag, TrendingUp } from "lucide-react"
+
+export default function AdminDashboard() {
+  const { getAllUsers, getAllPurchases } = useStore()
+  const users = getAllUsers()
+  const purchases = getAllPurchases()
+  
+  const totalRevenue = purchases.reduce((sum, p) => sum + p.amount, 0)
+  const totalUsers = users.length
+  const totalPurchases = purchases.length
+  
+  const stats = [
+    { title: "总用户数", value: totalUsers, icon: Users, color: "text-blue-500" },
+    { title: "总收入", value: `¥${totalRevenue.toFixed(2)}`, icon: TrendingUp, color: "text-green-500" },
+    { title: "订单数", value: totalPurchases, icon: ShoppingBag, color: "text-purple-500" },
+    { title: "转化率", value: `${totalUsers > 0 ? ((totalPurchases / totalUsers) * 100).toFixed(1) : 0}%`, icon: BookOpen, color: "text-orange-500" },
+  ]
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto text-white">
+      <h1 className="text-2xl font-bold mb-8">数据概览</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat, index) => (
+          <Card key={index} className="bg-[#1e293b] border-gray-700">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-gray-400">{stat.title}</CardTitle>
+              <stat.icon className={`w-4 h-4 ${stat.color}`} />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-white">{stat.value}</div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <Card className="bg-[#1e293b] border-gray-700">
+          <CardHeader>
+            <CardTitle className="text-white">最近订单</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {purchases.slice(-5).reverse().map((p) => (
+                <div key={p.id} className="flex items-center justify-between p-4 bg-[#0f172a] rounded-lg">
+                  <div>
+                    <p className="text-sm font-medium text-white">{p.sectionTitle || "整本购买"}</p>
+                    <p className="text-xs text-gray-400">{new Date(p.createdAt).toLocaleString()}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm font-bold text-[#38bdac]">+¥{p.amount}</p>
+                    <p className="text-xs text-gray-500">{p.paymentMethod}</p>
+                  </div>
+                </div>
+              ))}
+              {purchases.length === 0 && (
+                <p className="text-gray-500 text-center py-4">暂无订单数据</p>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-[#1e293b] border-gray-700">
+          <CardHeader>
+            <CardTitle className="text-white">新注册用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {users.slice(-5).reverse().map((u) => (
+                <div key={u.id} className="flex items-center justify-between p-4 bg-[#0f172a] rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs">
+                      {u.nickname.charAt(0)}
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-white">{u.nickname}</p>
+                      <p className="text-xs text-gray-400">{u.phone}</p>
+                    </div>
+                  </div>
+                  <p className="text-xs text-gray-500">{new Date(u.createdAt).toLocaleDateString()}</p>
+                </div>
+              ))}
+              {users.length === 0 && (
+                <p className="text-gray-500 text-center py-4">暂无用户数据</p>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}