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

frontend/src/app/learning/analytics/page.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '@/lib/auth';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface Domain {
+  id: string;
+  name: string;
+  sessionCount: number;
+  mastery: number;
+  lastActive: string | null;
+  weak: boolean;
+}
+
+interface Recommendation {
+  title: string;
+  url: string;
+}
+
+interface Analytics {
+  domains: Domain[];
+  totalSessions: number;
+  weakDomains: string[];
+  recommendations: Recommendation[];
+}
+
+export default function LearningAnalyticsPage() {
+  const [data, setData] = useState<Analytics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    loadAnalytics();
+  }, []);
+
+  async function loadAnalytics() {
+    try {
+      const res = await apiFetch('/learning/analytics');
+      if (!res.ok) throw new Error('加载失败');
+      const json = await res.json();
+      setData(json);
+    } catch (e: any) {
+      setError(e.message);
+    }
+    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-2" />
+      <Skeleton className="h-5 w-72 mb-8" />
+      <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 rounded-xl" />
+    </div>
+  );
+
+  if (error) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
+      <p className="text-red-500 mb-4">{error}</p>
+      <button onClick={loadAnalytics} className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">重试</button>
+    </div>
+  );
+
+  const coveredDomains = data?.domains.filter(d => d.sessionCount > 0) || [];
+  const weakDomains = data?.domains.filter(d => d.weak) || [];
+  const avgMastery = data?.domains.length
+    ? Math.round(data.domains.reduce((sum, d) => sum + d.mastery, 0) / data.domains.length)
+    : 0;
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+          &larr; 返回我的
+        </Link>
+        <h1 className="text-3xl font-bold text-foreground">学情分析</h1>
+        <p className="mt-2 text-muted-foreground">基于 AI 沙盒对话分析你的学习情况</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="bg-card rounded-xl border border-border p-6">
+          <div className="text-sm text-muted-foreground mb-1">AI 对话次数</div>
+          <div className="text-2xl font-bold text-foreground">{data?.totalSessions || 0}</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-foreground">{coveredDomains.length}/{data?.domains.length || 0}</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-foreground">{avgMastery}%</div>
+        </div>
+      </div>
+
+      {data && data.domains.length > 0 && (
+        <div className="bg-card rounded-2xl border border-border p-6 mb-8">
+          <h2 className="text-lg font-semibold text-foreground mb-4">知识领域覆盖</h2>
+          <div className="space-y-4">
+            {data.domains.map(domain => (
+              <div key={domain.id}>
+                <div className="flex items-center justify-between mb-1.5">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">{domain.name}</span>
+                    {domain.weak && (
+                      <span className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded">待加强</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-xs text-muted-foreground">{domain.sessionCount} 次对话</span>
+                    <span className={`text-xs font-medium tabular-nums ${
+                      domain.mastery >= 60 ? 'text-green-600' : domain.mastery >= 30 ? 'text-amber-600' : 'text-red-500'
+                    }`}>{domain.mastery}%</span>
+                  </div>
+                </div>
+                <div className="w-full bg-muted rounded-full h-2">
+                  <div className={`h-2 rounded-full transition-all ${
+                    domain.mastery >= 60 ? 'bg-green-500' : domain.mastery >= 30 ? 'bg-amber-500' : 'bg-red-500'
+                  }`} style={{ width: `${domain.mastery}%` }} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {weakDomains.length > 0 && (
+        <div className="bg-card rounded-2xl border border-border p-6 mb-8">
+          <h2 className="text-lg font-semibold text-foreground mb-2">薄弱环节</h2>
+          <p className="text-sm text-muted-foreground mb-4">
+            以下领域你较少涉及，建议加强学习：
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {weakDomains.map(d => (
+              <span key={d.id} className="px-3 py-1.5 text-sm bg-amber-50 text-amber-700 rounded-lg border border-amber-200">
+                {d.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {data && data.recommendations.length > 0 && (
+        <div className="bg-card rounded-2xl border border-border p-6">
+          <h2 className="text-lg font-semibold text-foreground mb-2">推荐学习</h2>
+          <p className="text-sm text-muted-foreground mb-4">根据你的薄弱环节推荐以下内容</p>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {data.recommendations.map((rec, i) => (
+              <Link key={i} href={rec.url}
+                className="flex items-center gap-3 p-4 rounded-xl border border-border hover:bg-accent transition-colors group">
+                <div className="w-10 h-10 bg-brand-100 rounded-lg flex items-center justify-center text-brand-600 font-bold shrink-0">
+                  {rec.title[0]}
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-foreground group-hover:text-brand-600 transition-colors">{rec.title}</div>
+                  <div className="text-xs text-muted-foreground mt-0.5">点击前往</div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/app/learning/path/page.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '@/lib/auth';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface Task {
+  label: string;
+  action: string;
+  keyword: string;
+}
+
+interface StageLink {
+  title: string;
+  url: string;
+}
+
+interface Stage {
+  id: string;
+  title: string;
+  icon: string;
+  description: string;
+  tasks: Task[];
+  links: StageLink[];
+  completedCount: number;
+  totalTasks: number;
+  progress: number;
+  unlocked: boolean;
+}
+
+export default function LearningPathPage() {
+  const [stages, setStages] = useState<Stage[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadPath();
+  }, []);
+
+  async function loadPath() {
+    try {
+      const res = await apiFetch('/learning/path');
+      if (res.ok) setStages(await res.json());
+    } catch {}
+    setLoading(false);
+  }
+
+  if (loading) return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-48 mb-2" />
+      <Skeleton className="h-5 w-64 mb-8" />
+      {[1,2,3,4].map(i => <Skeleton key={i} className="h-40 w-full rounded-xl mb-4" />)}
+    </div>
+  );
+
+  const totalProgress = stages.length
+    ? Math.round(stages.reduce((s, st) => s + st.progress, 0) / stages.length)
+    : 0;
+  const totalCompleted = stages.reduce((s, st) => s + st.completedCount, 0);
+  const totalTasks = stages.reduce((s, st) => s + st.totalTasks, 0);
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+          &larr; 返回我的
+        </Link>
+        <h1 className="text-3xl font-bold text-foreground">学习路径</h1>
+        <p className="mt-2 text-muted-foreground">从入门到精通，系统掌握 AI 技能</p>
+      </div>
+
+      <div className="bg-card rounded-2xl border border-border p-6 mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium text-foreground">总进度</span>
+          <span className="text-sm text-muted-foreground">{totalCompleted}/{totalTasks} 任务</span>
+        </div>
+        <div className="w-full bg-muted rounded-full h-3">
+          <div className="bg-brand-600 h-3 rounded-full transition-all" style={{ width: `${totalProgress}%` }} />
+        </div>
+      </div>
+
+      <div className="relative">
+        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-muted hidden md:block" />
+
+        <div className="space-y-8">
+          {stages.map((stage, index) => (
+            <div key={stage.id} className="relative md:pl-20">
+              <div className="hidden md:flex absolute left-0 top-0 w-16 items-center justify-center">
+                <div className={`w-12 h-12 rounded-full flex items-center justify-center text-xl border-2 z-10 bg-card ${
+                  stage.progress === 100 ? 'border-green-500' : 'border-brand-600'
+                }`}>
+                  {stage.progress === 100 ? '✅' : stage.icon}
+                </div>
+              </div>
+
+              <div className="bg-card rounded-2xl border border-border p-6">
+                <div className="flex items-start justify-between mb-3">
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="md:hidden text-xl">{stage.progress === 100 ? '✅' : stage.icon}</span>
+                      <h2 className="text-lg font-semibold text-foreground">{stage.title}</h2>
+                    </div>
+                    <p className="text-sm text-muted-foreground">{stage.description}</p>
+                  </div>
+                  <span className="text-xs text-muted-foreground tabular-nums shrink-0">
+                    {stage.completedCount}/{stage.totalTasks}
+                  </span>
+                </div>
+
+                <div className="w-full bg-muted rounded-full h-1.5 mb-4">
+                  <div className={`h-1.5 rounded-full transition-all ${
+                    stage.progress === 100 ? 'bg-green-500' : 'bg-brand-600'
+                  }`} style={{ width: `${stage.progress}%` }} />
+                </div>
+
+                <div className="space-y-1.5 mb-4">
+                  {stage.tasks.map((task, ti) => {
+                    const done = ti < stage.completedCount;
+                    return (
+                      <div key={ti} className="flex items-center gap-2 text-sm">
+                        <span className={`w-4 h-4 rounded-full border flex items-center justify-center shrink-0 ${
+                          done ? 'bg-green-500 border-green-500 text-white' : 'border-muted-foreground'
+                        }`}>
+                          {done && <span className="text-[10px]">✓</span>}
+                        </span>
+                        <span className={done ? 'text-muted-foreground line-through' : 'text-foreground'}>{task.label}</span>
+                        <span className="text-xs text-muted-foreground/60">— {task.action}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  {stage.links.map((link, li) => (
+                    <Link key={li} href={link.url}
+                      className="text-xs px-3 py-1.5 rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors">
+                      {link.title}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}