Checkpoint: v3.0 - 新增训练视频教程库（分类浏览、自评系统）、训练提醒通知（多类型提醒、浏览器推送）、通知记录管理、去除冗余文字。65个测试全部通过。

client/src/pages/Tutorials.tsx

@@ -0,0 +1,320 @@
+import { useAuth } from "@/_core/hooks/useAuth";
+import { trpc } from "@/lib/trpc";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { toast } from "sonner";
+import { useState, useMemo } from "react";
+import {
+  BookOpen, Play, CheckCircle2, Star, Target,
+  ChevronRight, Filter, AlertTriangle, Lightbulb,
+  ArrowUpDown, Clock, Dumbbell
+} from "lucide-react";
+
+const CATEGORY_LABELS: Record<string, { label: string; icon: React.ReactNode; color: string }> = {
+  forehand: { label: "正手", icon: <Target className="w-4 h-4" />, color: "bg-green-100 text-green-700" },
+  backhand: { label: "反手", icon: <ArrowUpDown className="w-4 h-4" />, color: "bg-blue-100 text-blue-700" },
+  serve: { label: "发球", icon: <Dumbbell className="w-4 h-4" />, color: "bg-purple-100 text-purple-700" },
+  volley: { label: "截击", icon: <Target className="w-4 h-4" />, color: "bg-orange-100 text-orange-700" },
+  footwork: { label: "脚步", icon: <Dumbbell className="w-4 h-4" />, color: "bg-yellow-100 text-yellow-700" },
+  shadow: { label: "影子挥拍", icon: <Play className="w-4 h-4" />, color: "bg-indigo-100 text-indigo-700" },
+  wall: { label: "墙壁练习", icon: <Target className="w-4 h-4" />, color: "bg-pink-100 text-pink-700" },
+  fitness: { label: "体能", icon: <Dumbbell className="w-4 h-4" />, color: "bg-red-100 text-red-700" },
+  strategy: { label: "战术", icon: <Lightbulb className="w-4 h-4" />, color: "bg-teal-100 text-teal-700" },
+};
+
+const SKILL_LABELS: Record<string, { label: string; color: string }> = {
+  beginner: { label: "初级", color: "bg-emerald-100 text-emerald-700" },
+  intermediate: { label: "中级", color: "bg-amber-100 text-amber-700" },
+  advanced: { label: "高级", color: "bg-rose-100 text-rose-700" },
+};
+
+export default function Tutorials() {
+  const { user } = useAuth();
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+  const [selectedSkill, setSelectedSkill] = useState<string>("all");
+  const [selectedTutorial, setSelectedTutorial] = useState<number | null>(null);
+  const [notes, setNotes] = useState("");
+
+  const { data: tutorials, isLoading } = trpc.tutorial.list.useQuery({
+    category: selectedCategory === "all" ? undefined : selectedCategory,
+    skillLevel: selectedSkill === "all" ? undefined : selectedSkill,
+  });
+
+  const { data: progressData } = trpc.tutorial.progress.useQuery(undefined, { enabled: !!user });
+
+  const updateProgress = trpc.tutorial.updateProgress.useMutation({
+    onSuccess: () => toast.success("进度已更新"),
+  });
+
+  const progressMap = useMemo(() => {
+    const map: Record<number, any> = {};
+    progressData?.forEach((p: any) => { map[p.tutorialId] = p; });
+    return map;
+  }, [progressData]);
+
+  const totalTutorials = tutorials?.length || 0;
+  const watchedCount = tutorials?.filter((t: any) => progressMap[t.id]?.watched).length || 0;
+  const progressPercent = totalTutorials > 0 ? Math.round((watchedCount / totalTutorials) * 100) : 0;
+
+  const categories = useMemo(() => {
+    const cats = new Set<string>();
+    tutorials?.forEach((t: any) => cats.add(t.category));
+    return Array.from(cats);
+  }, [tutorials]);
+
+  const handleMarkWatched = (tutorialId: number) => {
+    updateProgress.mutate({ tutorialId, watched: 1 });
+  };
+
+  const handleSaveNotes = (tutorialId: number) => {
+    updateProgress.mutate({ tutorialId, notes });
+    setNotes("");
+    toast.success("笔记已保存");
+  };
+
+  const handleSelfScore = (tutorialId: number, score: number) => {
+    updateProgress.mutate({ tutorialId, selfScore: score });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold flex items-center gap-2">
+          <BookOpen className="w-6 h-6 text-primary" />
+          教程库
+        </h1>
+        <p className="text-muted-foreground mt-1">专业动作分解与要领，对照标准动作提升技术</p>
+      </div>
+
+      {/* Progress Overview */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium">学习进度</span>
+            <span className="text-sm text-muted-foreground">{watchedCount}/{totalTutorials} 已学习</span>
+          </div>
+          <Progress value={progressPercent} className="h-2" />
+          <p className="text-xs text-muted-foreground mt-1">{progressPercent}% 完成</p>
+        </CardContent>
+      </Card>
+
+      {/* Filters */}
+      <div className="flex flex-wrap gap-3">
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm font-medium">分类:</span>
+        </div>
+        <div className="flex flex-wrap gap-1.5">
+          <Button
+            variant={selectedCategory === "all" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedCategory("all")}
+          >
+            全部
+          </Button>
+          {Object.entries(CATEGORY_LABELS).map(([key, { label, icon }]) => (
+            <Button
+              key={key}
+              variant={selectedCategory === key ? "default" : "outline"}
+              size="sm"
+              onClick={() => setSelectedCategory(key)}
+              className="gap-1"
+            >
+              {icon} {label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <div className="flex items-center gap-2">
+          <Star className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm font-medium">级别:</span>
+        </div>
+        <div className="flex gap-1.5">
+          <Button
+            variant={selectedSkill === "all" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedSkill("all")}
+          >
+            全部
+          </Button>
+          {Object.entries(SKILL_LABELS).map(([key, { label }]) => (
+            <Button
+              key={key}
+              variant={selectedSkill === key ? "default" : "outline"}
+              size="sm"
+              onClick={() => setSelectedSkill(key)}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tutorial Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {tutorials?.map((tutorial: any) => {
+          const cat = CATEGORY_LABELS[tutorial.category] || { label: tutorial.category, color: "bg-gray-100 text-gray-700" };
+          const skill = SKILL_LABELS[tutorial.skillLevel] || { label: tutorial.skillLevel, color: "bg-gray-100 text-gray-700" };
+          const progress = progressMap[tutorial.id];
+          const isWatched = progress?.watched === 1;
+          const keyPoints = typeof tutorial.keyPoints === "string" ? JSON.parse(tutorial.keyPoints) : tutorial.keyPoints || [];
+          const mistakes = typeof tutorial.commonMistakes === "string" ? JSON.parse(tutorial.commonMistakes) : tutorial.commonMistakes || [];
+
+          return (
+            <Dialog key={tutorial.id}>
+              <DialogTrigger asChild>
+                <Card className={`cursor-pointer hover:shadow-md transition-all ${isWatched ? "border-green-300 bg-green-50/30" : ""}`}>
+                  <CardHeader className="pb-3">
+                    <div className="flex items-start justify-between">
+                      <div className="flex gap-2 flex-wrap">
+                        <Badge variant="secondary" className={cat.color}>{cat.label}</Badge>
+                        <Badge variant="secondary" className={skill.color}>{skill.label}</Badge>
+                      </div>
+                      {isWatched && <CheckCircle2 className="w-5 h-5 text-green-600 shrink-0" />}
+                    </div>
+                    <CardTitle className="text-base mt-2">{tutorial.title}</CardTitle>
+                    <CardDescription className="line-clamp-2">{tutorial.description}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Clock className="w-3 h-3" />
+                        {Math.round((tutorial.duration || 0) / 60)}分钟
+                      </span>
+                      <span className="flex items-center gap-1">
+                        {keyPoints.length}个要点
+                        <ChevronRight className="w-3 h-3" />
+                      </span>
+                    </div>
+                    {progress?.selfScore && (
+                      <div className="flex items-center gap-1 mt-2">
+                        {[1, 2, 3, 4, 5].map(s => (
+                          <Star key={s} className={`w-3 h-3 ${s <= progress.selfScore ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} />
+                        ))}
+                        <span className="text-xs text-muted-foreground ml-1">自评</span>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </DialogTrigger>
+
+              <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+                <DialogHeader>
+                  <div className="flex gap-2 mb-2">
+                    <Badge variant="secondary" className={cat.color}>{cat.label}</Badge>
+                    <Badge variant="secondary" className={skill.color}>{skill.label}</Badge>
+                    <Badge variant="outline" className="gap-1">
+                      <Clock className="w-3 h-3" />
+                      {Math.round((tutorial.duration || 0) / 60)}分钟
+                    </Badge>
+                  </div>
+                  <DialogTitle className="text-xl">{tutorial.title}</DialogTitle>
+                </DialogHeader>
+
+                <ScrollArea className="flex-1 pr-4">
+                  <div className="space-y-5">
+                    <p className="text-muted-foreground">{tutorial.description}</p>
+
+                    {/* Key Points */}
+                    <div>
+                      <h3 className="font-semibold flex items-center gap-2 mb-3">
+                        <Lightbulb className="w-4 h-4 text-yellow-500" />
+                        技术要点
+                      </h3>
+                      <div className="space-y-2">
+                        {keyPoints.map((point: string, i: number) => (
+                          <div key={i} className="flex items-start gap-2 p-2 rounded-lg bg-green-50 border border-green-100">
+                            <CheckCircle2 className="w-4 h-4 text-green-600 mt-0.5 shrink-0" />
+                            <span className="text-sm">{point}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Common Mistakes */}
+                    <div>
+                      <h3 className="font-semibold flex items-center gap-2 mb-3">
+                        <AlertTriangle className="w-4 h-4 text-orange-500" />
+                        常见错误
+                      </h3>
+                      <div className="space-y-2">
+                        {mistakes.map((mistake: string, i: number) => (
+                          <div key={i} className="flex items-start gap-2 p-2 rounded-lg bg-orange-50 border border-orange-100">
+                            <AlertTriangle className="w-4 h-4 text-orange-500 mt-0.5 shrink-0" />
+                            <span className="text-sm">{mistake}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Self Assessment */}
+                    {user && (
+                      <div>
+                        <h3 className="font-semibold mb-3">自我评估</h3>
+                        <div className="flex items-center gap-2 mb-3">
+                          <span className="text-sm text-muted-foreground">掌握程度:</span>
+                          {[1, 2, 3, 4, 5].map(s => (
+                            <button
+                              key={s}
+                              onClick={() => handleSelfScore(tutorial.id, s)}
+                              className="hover:scale-110 transition-transform"
+                            >
+                              <Star className={`w-6 h-6 ${s <= (progress?.selfScore || 0) ? "fill-yellow-400 text-yellow-400" : "text-gray-300 hover:text-yellow-300"}`} />
+                            </button>
+                          ))}
+                        </div>
+
+                        <Textarea
+                          placeholder="记录学习笔记和心得..."
+                          value={notes || progress?.notes || ""}
+                          onChange={e => setNotes(e.target.value)}
+                          className="mb-2"
+                          rows={3}
+                        />
+                        <div className="flex gap-2">
+                          <Button size="sm" onClick={() => handleSaveNotes(tutorial.id)}>
+                            保存笔记
+                          </Button>
+                          {!isWatched && (
+                            <Button size="sm" variant="outline" onClick={() => handleMarkWatched(tutorial.id)} className="gap-1">
+                              <CheckCircle2 className="w-4 h-4" />
+                              标记已学习
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </DialogContent>
+            </Dialog>
+          );
+        })}
+      </div>
+
+      {tutorials?.length === 0 && (
+        <div className="text-center py-12 text-muted-foreground">
+          <BookOpen className="w-12 h-12 mx-auto mb-3 opacity-50" />
+          <p>暂无匹配的教程</p>
+        </div>
+      )}
+    </div>
+  );
+}