feat: Phase 1-3 全部完成 — 沙盒增强、学情分析、学习路径

2026-05-18 09:48:51 +08:00
commit 11bb86854c
277 changed files with 37755 additions and 0 deletions
@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { apiFetch } from '../../../lib/auth';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface Stats {
+  totalCourses: number;
+  completedCourses: number;
+  totalSandboxSessions: number;
+  totalPrompts: number;
+  totalLikes: number;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  async function loadStats() {
+    try {
+      const res = await apiFetch('/dashboard/stats');
+      const data = await res.json();
+      setStats(data);
+    } catch (e) { console.error(e) }
+    setLoading(false);
+  }
+
+  if (loading) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-48 mb-6" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+      </div>
+      <Skeleton className="h-64 w-full rounded-xl" />
+    </div>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <button onClick={() => router.back()} className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+          &larr; 返回
+        </button>
+        <h1 className="text-3xl font-bold text-foreground">数据看板</h1>
+        <p className="mt-2 text-muted-foreground">查看你的学习数据</p>
+      </div>
+
+      {stats && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+          <div className="bg-card rounded-xl border border-border p-6">
+            <div className="text-sm text-muted-foreground mb-1">学习课程</div>
+            <div className="text-2xl font-bold text-brand-600">{stats.completedCourses}/{stats.totalCourses}</div>
+            <div className="text-xs text-muted-foreground mt-1">已完成/总数</div>
+          </div>
+
+          <div className="bg-card rounded-xl border border-border p-6">
+            <div className="text-sm text-muted-foreground mb-1">沙箱使用</div>
+            <div className="text-2xl font-bold text-purple-600">{stats.totalSandboxSessions}</div>
+            <div className="text-xs text-muted-foreground mt-1">总对话次数</div>
+          </div>
+
+          <div className="bg-card rounded-xl border border-border p-6">
+            <div className="text-sm text-muted-foreground mb-1">提示词</div>
+            <div className="text-2xl font-bold text-green-600">{stats.totalPrompts}</div>
+            <div className="text-xs text-muted-foreground mt-1">收藏/创建</div>
+          </div>
+
+          <div className="bg-card rounded-xl border border-border p-6">
+            <div className="text-sm text-muted-foreground mb-1">获得点赞</div>
+            <div className="text-2xl font-bold text-red-600">{stats.totalLikes}</div>
+            <div className="text-xs text-muted-foreground mt-1">总点赞数</div>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-card rounded-2xl border border-border p-6">
+        <h2 className="text-lg font-semibold text-foreground mb-4">学习进度</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="text-center p-4 bg-muted/50 rounded-xl">
+            <div className="text-3xl font-bold text-foreground">{stats?.totalCourses || 0}</div>
+            <div className="text-sm text-muted-foreground">总课程数</div>
+          </div>
+          <div className="text-center p-4 bg-muted/50 rounded-xl">
+            <div className="text-3xl font-bold text-foreground">{stats?.completedCourses || 0}</div>
+            <div className="text-sm text-muted-foreground">已完成</div>
+          </div>
+          <div className="text-center p-4 bg-muted/50 rounded-xl">
+            <div className="text-3xl font-bold text-foreground">
+              {stats?.totalCourses ? Math.round((stats.completedCourses / stats.totalCourses) * 100) : 0}%
+            </div>
+            <div className="text-sm text-muted-foreground">完成率</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}