Checkpoint: Tennis Training Hub v1.0 - 完整功能版本：用户名登录、AI训练计划生成、MediaPipe视频姿势识别、击球统计、挥拍速度分析、NTRP自动评分系统、训练进度追踪、视频库管理、AI矫正建议

client/src/pages/Progress.tsx

@@ -0,0 +1,215 @@
+import { useAuth } from "@/_core/hooks/useAuth";
+import { trpc } from "@/lib/trpc";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Activity, Calendar, CheckCircle2, Clock, TrendingUp, Target } from "lucide-react";
+import {
+  ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
+  LineChart, Line, Legend
+} from "recharts";
+import { useLocation } from "wouter";
+
+export default function Progress() {
+  const { user } = useAuth();
+  const { data: records, isLoading } = trpc.record.list.useQuery({ limit: 100 });
+  const { data: analyses } = trpc.analysis.list.useQuery();
+  const { data: stats } = trpc.profile.stats.useQuery();
+  const [, setLocation] = useLocation();
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        {[1, 2, 3].map(i => <Skeleton key={i} className="h-32 w-full" />)}
+      </div>
+    );
+  }
+
+  // Aggregate data by date for charts
+  const dateMap = new Map<string, { date: string; sessions: number; minutes: number; avgScore: number; scores: number[] }>();
+  (records || []).forEach((r: any) => {
+    const date = new Date(r.trainingDate || r.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
+    const existing = dateMap.get(date) || { date, sessions: 0, minutes: 0, avgScore: 0, scores: [] };
+    existing.sessions++;
+    existing.minutes += r.durationMinutes || 0;
+    if (r.poseScore) existing.scores.push(r.poseScore);
+    dateMap.set(date, existing);
+  });
+
+  const chartData = Array.from(dateMap.values()).map(d => ({
+    ...d,
+    avgScore: d.scores.length > 0 ? Math.round(d.scores.reduce((a, b) => a + b, 0) / d.scores.length) : 0,
+  }));
+
+  // Analysis score trend
+  const scoreTrend = (analyses || []).map((a: any) => ({
+    date: new Date(a.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" }),
+    overall: Math.round(a.overallScore || 0),
+    consistency: Math.round(a.strokeConsistency || 0),
+    footwork: Math.round(a.footworkScore || 0),
+    fluidity: Math.round(a.fluidityScore || 0),
+  }));
+
+  const completedRecords = (records || []).filter((r: any) => r.completed === 1);
+  const totalMinutes = (records || []).reduce((sum: number, r: any) => sum + (r.durationMinutes || 0), 0);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">训练进度</h1>
+        <p className="text-muted-foreground text-sm mt-1">追踪您的训练历史和能力提升趋势</p>
+      </div>
+
+      {/* Summary stats */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="border-0 shadow-sm">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <Activity className="h-3 w-3" />总训练次数
+            </div>
+            <p className="text-2xl font-bold">{stats?.totalSessions || 0}</p>
+          </CardContent>
+        </Card>
+        <Card className="border-0 shadow-sm">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <Clock className="h-3 w-3" />总训练时长
+            </div>
+            <p className="text-2xl font-bold">{totalMinutes}<span className="text-sm font-normal ml-1">分钟</span></p>
+          </CardContent>
+        </Card>
+        <Card className="border-0 shadow-sm">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <CheckCircle2 className="h-3 w-3" />已完成
+            </div>
+            <p className="text-2xl font-bold">{completedRecords.length}</p>
+          </CardContent>
+        </Card>
+        <Card className="border-0 shadow-sm">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <Target className="h-3 w-3" />视频分析
+            </div>
+            <p className="text-2xl font-bold">{analyses?.length || 0}<span className="text-sm font-normal ml-1">次</span></p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Training frequency chart */}
+        <Card className="border-0 shadow-sm">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Calendar className="h-4 w-4 text-primary" />
+              训练频率
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {chartData.length > 0 ? (
+              <ResponsiveContainer width="100%" height={220}>
+                <BarChart data={chartData}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                  <XAxis dataKey="date" tick={{ fontSize: 11 }} />
+                  <YAxis tick={{ fontSize: 11 }} />
+                  <Tooltip />
+                  <Bar dataKey="sessions" fill="oklch(0.55 0.16 145)" radius={[4, 4, 0, 0]} name="训练次数" />
+                </BarChart>
+              </ResponsiveContainer>
+            ) : (
+              <div className="h-[220px] flex items-center justify-center text-muted-foreground text-sm">
+                <div className="text-center">
+                  <Calendar className="h-8 w-8 mx-auto mb-2 opacity-30" />
+                  <p>开始训练后将显示频率统计</p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Score improvement trend */}
+        <Card className="border-0 shadow-sm">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base flex items-center gap-2">
+              <TrendingUp className="h-4 w-4 text-primary" />
+              能力提升趋势
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {scoreTrend.length > 0 ? (
+              <ResponsiveContainer width="100%" height={220}>
+                <LineChart data={scoreTrend}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                  <XAxis dataKey="date" tick={{ fontSize: 11 }} />
+                  <YAxis domain={[0, 100]} tick={{ fontSize: 11 }} />
+                  <Tooltip />
+                  <Legend />
+                  <Line type="monotone" dataKey="overall" stroke="oklch(0.55 0.16 145)" strokeWidth={2} name="综合" dot={{ r: 3 }} />
+                  <Line type="monotone" dataKey="consistency" stroke="#3b82f6" strokeWidth={1.5} name="一致性" dot={{ r: 2 }} />
+                  <Line type="monotone" dataKey="footwork" stroke="#f59e0b" strokeWidth={1.5} name="脚步" dot={{ r: 2 }} />
+                </LineChart>
+              </ResponsiveContainer>
+            ) : (
+              <div className="h-[220px] flex items-center justify-center text-muted-foreground text-sm">
+                <div className="text-center">
+                  <TrendingUp className="h-8 w-8 mx-auto mb-2 opacity-30" />
+                  <p>完成视频分析后将显示能力趋势</p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent records */}
+      <Card className="border-0 shadow-sm">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">最近训练记录</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {(records?.length || 0) > 0 ? (
+            <div className="space-y-2">
+              {(records || []).slice(0, 20).map((record: any) => (
+                <div key={record.id} className="flex items-center justify-between py-2 border-b last:border-0">
+                  <div className="flex items-center gap-3">
+                    <div className={`h-8 w-8 rounded-lg flex items-center justify-center ${
+                      record.completed ? "bg-green-50 text-green-600" : "bg-muted text-muted-foreground"
+                    }`}>
+                      {record.completed ? <CheckCircle2 className="h-4 w-4" /> : <Activity className="h-4 w-4" />}
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium">{record.exerciseName}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {new Date(record.trainingDate || record.createdAt).toLocaleDateString("zh-CN")}
+                        {record.durationMinutes ? ` · ${record.durationMinutes}分钟` : ""}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {record.poseScore && (
+                      <Badge variant="secondary" className="text-xs">{Math.round(record.poseScore)}分</Badge>
+                    )}
+                    {record.completed ? (
+                      <Badge className="bg-green-100 text-green-700 text-xs">已完成</Badge>
+                    ) : (
+                      <Badge variant="outline" className="text-xs">进行中</Badge>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="py-8 text-center text-muted-foreground text-sm">
+              <Activity className="h-8 w-8 mx-auto mb-2 opacity-30" />
+              <p>还没有训练记录</p>
+              <Button variant="link" size="sm" onClick={() => setLocation("/training")} className="mt-2">
+                开始第一次训练
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}