456 行
21 KiB
TypeScript
456 行
21 KiB
TypeScript
import { useMemo, useState } from "react";
|
||
import { useAuth } from "@/_core/hooks/useAuth";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { trpc } from "@/lib/trpc";
|
||
import { cn } from "@/lib/utils";
|
||
import { toast } from "sonner";
|
||
import {
|
||
BookOpen,
|
||
CheckCircle2,
|
||
ChevronRight,
|
||
Clock3,
|
||
ExternalLink,
|
||
Flame,
|
||
Star,
|
||
Target,
|
||
Trophy,
|
||
type LucideIcon,
|
||
} from "lucide-react";
|
||
|
||
type TutorialRecord = Record<string, any>;
|
||
|
||
const CATEGORY_META: Record<string, { label: string; icon: LucideIcon; tone: string }> = {
|
||
forehand: { label: "正手", icon: Target, tone: "bg-green-500/10 text-green-700" },
|
||
backhand: { label: "反手", icon: Target, tone: "bg-blue-500/10 text-blue-700" },
|
||
serve: { label: "发球", icon: Target, tone: "bg-violet-500/10 text-violet-700" },
|
||
volley: { label: "截击", icon: Target, tone: "bg-orange-500/10 text-orange-700" },
|
||
footwork: { label: "脚步", icon: Flame, tone: "bg-yellow-500/10 text-yellow-700" },
|
||
shadow: { label: "影子挥拍", icon: BookOpen, tone: "bg-indigo-500/10 text-indigo-700" },
|
||
wall: { label: "墙壁练习", icon: Target, tone: "bg-pink-500/10 text-pink-700" },
|
||
fitness: { label: "体能", icon: Flame, tone: "bg-rose-500/10 text-rose-700" },
|
||
strategy: { label: "战术", icon: Trophy, tone: "bg-teal-500/10 text-teal-700" },
|
||
};
|
||
|
||
const SKILL_META: Record<string, { label: string; tone: string }> = {
|
||
beginner: { label: "初级", tone: "bg-emerald-500/10 text-emerald-700" },
|
||
intermediate: { label: "中级", tone: "bg-amber-500/10 text-amber-700" },
|
||
advanced: { label: "高级", tone: "bg-rose-500/10 text-rose-700" },
|
||
};
|
||
|
||
function parseStringArray(value: unknown) {
|
||
if (Array.isArray(value)) {
|
||
return value.filter((item): item is string => typeof item === "string");
|
||
}
|
||
if (typeof value === "string") {
|
||
try {
|
||
const parsed = JSON.parse(value);
|
||
return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
|
||
} catch {
|
||
return [];
|
||
}
|
||
}
|
||
return [];
|
||
}
|
||
|
||
function isTutorialCompleted(progress: TutorialRecord | undefined) {
|
||
return progress?.completed === 1 || progress?.watched === 1;
|
||
}
|
||
|
||
function formatEffortMinutes(tutorial: TutorialRecord) {
|
||
const effort = tutorial.estimatedEffortMinutes || (tutorial.duration ? Math.round(tutorial.duration / 60) : 0);
|
||
return effort > 0 ? `${effort} 分钟` : "按需学习";
|
||
}
|
||
|
||
export default function Tutorials() {
|
||
const { user } = useAuth();
|
||
const utils = trpc.useUtils();
|
||
const [selectedCategory, setSelectedCategory] = useState("all");
|
||
const [selectedSkill, setSelectedSkill] = useState("all");
|
||
const [draftNotes, setDraftNotes] = useState<Record<number, string>>({});
|
||
|
||
const tutorialsQuery = trpc.tutorial.list.useQuery({ topicArea: "tennis_skill" });
|
||
const progressQuery = trpc.tutorial.progress.useQuery(undefined, { enabled: !!user });
|
||
|
||
const updateProgress = trpc.tutorial.updateProgress.useMutation({
|
||
onSuccess: async () => {
|
||
await utils.tutorial.progress.invalidate();
|
||
toast.success("教程进度已更新");
|
||
},
|
||
});
|
||
|
||
const tutorials = tutorialsQuery.data ?? [];
|
||
const progressMap = useMemo(() => {
|
||
const map: Record<number, TutorialRecord> = {};
|
||
(progressQuery.data ?? []).forEach((item: TutorialRecord) => {
|
||
map[item.tutorialId] = item;
|
||
});
|
||
return map;
|
||
}, [progressQuery.data]);
|
||
|
||
const filteredTutorials = useMemo(
|
||
() => tutorials.filter((tutorial) => {
|
||
if (selectedCategory !== "all" && tutorial.category !== selectedCategory) return false;
|
||
if (selectedSkill !== "all" && tutorial.skillLevel !== selectedSkill) return false;
|
||
return true;
|
||
}),
|
||
[selectedCategory, selectedSkill, tutorials],
|
||
);
|
||
|
||
const categories = useMemo(
|
||
() => Array.from(new Set(tutorials.map((tutorial) => tutorial.category).filter(Boolean))),
|
||
[tutorials],
|
||
);
|
||
|
||
const completedTutorials = useMemo(
|
||
() => tutorials.filter((tutorial) => isTutorialCompleted(progressMap[tutorial.id])),
|
||
[progressMap, tutorials],
|
||
);
|
||
|
||
const handleSaveNotes = (tutorialId: number) => {
|
||
const notes = draftNotes[tutorialId] ?? progressMap[tutorialId]?.notes ?? "";
|
||
updateProgress.mutate({ tutorialId, notes });
|
||
};
|
||
|
||
const handleComplete = (tutorialId: number) => {
|
||
updateProgress.mutate({ tutorialId, completed: 1, watched: 1 });
|
||
};
|
||
|
||
const handleSelfScore = (tutorialId: number, score: number) => {
|
||
updateProgress.mutate({ tutorialId, selfScore: score });
|
||
};
|
||
|
||
if (tutorialsQuery.isLoading) {
|
||
return (
|
||
<div className="flex min-h-[60vh] items-center justify-center">
|
||
<div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<section className="overflow-hidden rounded-[30px] border border-border/60 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.18),_transparent_24%),radial-gradient(circle_at_82%_18%,_rgba(59,130,246,0.14),_transparent_24%),linear-gradient(135deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96))] p-5 shadow-sm md:p-7">
|
||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_360px]">
|
||
<div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge className="bg-emerald-500/10 text-emerald-700">
|
||
<BookOpen className="mr-1 h-3 w-3" />
|
||
网球教程库
|
||
</Badge>
|
||
<Badge variant="outline">仅保留网球训练相关内容</Badge>
|
||
</div>
|
||
<h1 className="mt-4 text-3xl font-semibold tracking-tight">专注正手、反手、发球、脚步和比赛能力</h1>
|
||
<p className="mt-3 max-w-3xl text-sm leading-7 text-muted-foreground">
|
||
这里现在只保留和网球训练直接相关的教程。你可以按动作类别和水平筛选，记录自评与训练笔记，把教程真正沉淀到自己的日常练习里。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||
<Card className="border-0 bg-background/90 shadow-sm">
|
||
<CardHeader className="pb-2">
|
||
<CardDescription>教程总数</CardDescription>
|
||
<CardTitle className="text-3xl">{tutorials.length}</CardTitle>
|
||
</CardHeader>
|
||
</Card>
|
||
<Card className="border-0 bg-background/90 shadow-sm">
|
||
<CardHeader className="pb-2">
|
||
<CardDescription>已完成</CardDescription>
|
||
<CardTitle className="text-3xl">{completedTutorials.length}</CardTitle>
|
||
</CardHeader>
|
||
</Card>
|
||
<Card className="border-0 bg-background/90 shadow-sm">
|
||
<CardHeader className="pb-2">
|
||
<CardDescription>当前筛选</CardDescription>
|
||
<CardTitle className="text-base">
|
||
{selectedCategory === "all" ? "全部分类" : (CATEGORY_META[selectedCategory] || { label: selectedCategory }).label}
|
||
{" · "}
|
||
{selectedSkill === "all" ? "全部级别" : (SKILL_META[selectedSkill] || { label: selectedSkill }).label}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-5">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<h2 className="text-xl font-semibold tracking-tight">网球基础教程</h2>
|
||
<p className="mt-1 text-sm text-muted-foreground">选择一个动作主题，完成学习、自评和训练复盘。</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-border/60 bg-background/85 px-4 py-3 text-sm text-muted-foreground">
|
||
已完成 {completedTutorials.length}/{tutorials.length}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
variant={selectedCategory === "all" ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setSelectedCategory("all")}
|
||
>
|
||
全部分类
|
||
</Button>
|
||
{categories.map((category) => (
|
||
<Button
|
||
key={category}
|
||
variant={selectedCategory === category ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setSelectedCategory(category)}
|
||
>
|
||
{(CATEGORY_META[category] || { label: category }).label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
variant={selectedSkill === "all" ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setSelectedSkill("all")}
|
||
>
|
||
全部级别
|
||
</Button>
|
||
{Object.entries(SKILL_META).map(([key, meta]) => (
|
||
<Button
|
||
key={key}
|
||
variant={selectedSkill === key ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setSelectedSkill(key)}
|
||
>
|
||
{meta.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
{filteredTutorials.map((tutorial) => {
|
||
const progress = progressMap[tutorial.id];
|
||
const completed = isTutorialCompleted(progress);
|
||
const category = CATEGORY_META[tutorial.category || "forehand"] || CATEGORY_META.forehand;
|
||
const skill = SKILL_META[tutorial.skillLevel || "beginner"] || SKILL_META.beginner;
|
||
const keyPoints = parseStringArray(tutorial.keyPoints);
|
||
const commonMistakes = parseStringArray(tutorial.commonMistakes);
|
||
|
||
return (
|
||
<Dialog key={tutorial.id}>
|
||
<Card className={cn(
|
||
"overflow-hidden border-0 shadow-sm transition-shadow hover:shadow-md",
|
||
completed && "ring-1 ring-emerald-200",
|
||
)}>
|
||
<div className="relative h-48 overflow-hidden bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.28),_transparent_30%),radial-gradient(circle_at_bottom_right,_rgba(59,130,246,0.18),_transparent_28%),linear-gradient(135deg,rgba(255,255,255,1),rgba(248,250,252,0.92))] px-5 py-4">
|
||
{tutorial.thumbnailUrl ? (
|
||
<>
|
||
<img
|
||
src={tutorial.thumbnailUrl}
|
||
alt={`${tutorial.title} 标准配图`}
|
||
loading="lazy"
|
||
className="absolute inset-0 h-full w-full object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(15,23,42,0.18),rgba(15,23,42,0.58))]" />
|
||
</>
|
||
) : null}
|
||
|
||
<div className="relative flex items-start justify-between gap-3">
|
||
<div className="flex flex-wrap gap-2">
|
||
<Badge className={category.tone}>{category.label}</Badge>
|
||
<Badge className={skill.tone}>{skill.label}</Badge>
|
||
</div>
|
||
{completed ? <CheckCircle2 className="h-5 w-5 text-emerald-600" /> : null}
|
||
</div>
|
||
|
||
<div className="relative mt-6">
|
||
<div className={cn("text-xl font-semibold", tutorial.thumbnailUrl && "text-white drop-shadow-sm")}>{tutorial.title}</div>
|
||
<div className={cn(
|
||
"mt-2 line-clamp-2 text-sm leading-6",
|
||
tutorial.thumbnailUrl ? "text-white/88 drop-shadow-sm" : "text-muted-foreground",
|
||
)}>
|
||
{tutorial.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CardContent className="p-5">
|
||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||
<span className="inline-flex items-center gap-1">
|
||
<Clock3 className="h-3.5 w-3.5" />
|
||
{formatEffortMinutes(tutorial)}
|
||
</span>
|
||
<span>{keyPoints.length} 个要点</span>
|
||
</div>
|
||
|
||
{progress?.selfScore ? (
|
||
<div className="mt-3 flex items-center gap-1">
|
||
{[1, 2, 3, 4, 5].map((score) => (
|
||
<Star
|
||
key={score}
|
||
className={cn(
|
||
"h-4 w-4",
|
||
score <= progress.selfScore ? "fill-yellow-400 text-yellow-400" : "text-slate-300",
|
||
)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
<DialogTrigger asChild>
|
||
<Button variant="outline" className="mt-4 w-full">查看详情</Button>
|
||
</DialogTrigger>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<DialogContent className="max-h-[85vh] max-w-2xl overflow-hidden">
|
||
<DialogHeader>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Badge className={category.tone}>{category.label}</Badge>
|
||
<Badge className={skill.tone}>{skill.label}</Badge>
|
||
</div>
|
||
<DialogTitle className="text-xl">{tutorial.title}</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<ScrollArea className="max-h-[68vh] pr-4">
|
||
<div className="space-y-5">
|
||
{tutorial.thumbnailUrl ? (
|
||
<div className="overflow-hidden rounded-[24px] border border-border/60 bg-muted/20">
|
||
<img
|
||
src={tutorial.thumbnailUrl}
|
||
alt={`${tutorial.title} 标准配图`}
|
||
loading="lazy"
|
||
className="h-64 w-full object-cover sm:h-80"
|
||
/>
|
||
</div>
|
||
) : null}
|
||
|
||
<p className="text-sm leading-7 text-muted-foreground">{tutorial.description}</p>
|
||
|
||
{tutorial.externalUrl ? (
|
||
<div className="flex flex-wrap items-center gap-2 rounded-2xl border border-border/60 bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
|
||
<span>标准配图来源</span>
|
||
<a
|
||
href={tutorial.externalUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-1 font-medium text-primary underline-offset-4 hover:underline"
|
||
>
|
||
Wikimedia Commons
|
||
<ExternalLink className="h-3.5 w-3.5" />
|
||
</a>
|
||
</div>
|
||
) : null}
|
||
|
||
<div>
|
||
<h4 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">技术要点</h4>
|
||
<div className="mt-3 space-y-2">
|
||
{keyPoints.map((item) => (
|
||
<div key={item} className="rounded-2xl border border-emerald-200 bg-emerald-50/70 px-4 py-3 text-sm">
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">常见错误</h4>
|
||
<div className="mt-3 space-y-2">
|
||
{commonMistakes.map((item) => (
|
||
<div key={item} className="rounded-2xl border border-amber-200 bg-amber-50/70 px-4 py-3 text-sm">
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{user ? (
|
||
<div className="rounded-[24px] border border-border/60 bg-muted/20 p-5">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<div>
|
||
<div className="text-base font-semibold">自我评估与训练笔记</div>
|
||
<div className="mt-1 text-sm text-muted-foreground">学完后给自己打分，并记录本次训练最需要修正的点。</div>
|
||
</div>
|
||
{!completed ? (
|
||
<Button size="sm" onClick={() => handleComplete(tutorial.id)}>
|
||
标记已学习
|
||
<CheckCircle2 className="h-4 w-4" />
|
||
</Button>
|
||
) : (
|
||
<Badge className="bg-emerald-500/10 text-emerald-700">
|
||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||
已完成
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-5">
|
||
<div className="mb-2 text-sm font-medium">掌握程度</div>
|
||
<div className="flex items-center gap-2">
|
||
{[1, 2, 3, 4, 5].map((score) => (
|
||
<button
|
||
key={score}
|
||
onClick={() => handleSelfScore(tutorial.id, score)}
|
||
className="transition-transform hover:scale-110"
|
||
>
|
||
<Star className={cn(
|
||
"h-6 w-6",
|
||
score <= (progress?.selfScore || 0) ? "fill-yellow-400 text-yellow-400" : "text-slate-300",
|
||
)} />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5">
|
||
<div className="mb-2 text-sm font-medium">学习笔记</div>
|
||
<Textarea
|
||
rows={4}
|
||
placeholder="记录今天的挥拍体感、移动节奏、失误原因和下次训练目标。"
|
||
value={draftNotes[tutorial.id] ?? progress?.notes ?? ""}
|
||
onChange={(event) => setDraftNotes((current) => ({
|
||
...current,
|
||
[tutorial.id]: event.target.value,
|
||
}))}
|
||
/>
|
||
<div className="mt-3 flex gap-2">
|
||
<Button size="sm" onClick={() => handleSaveNotes(tutorial.id)}>保存笔记</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{keyPoints.length > 0 ? (
|
||
<div>
|
||
<h4 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">训练建议</h4>
|
||
<div className="mt-3 space-y-2">
|
||
{keyPoints.slice(0, 3).map((item) => (
|
||
<div key={item} className="flex items-start gap-2 rounded-2xl bg-muted/20 px-4 py-3 text-sm">
|
||
<ChevronRight className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
||
<span>下次练习时优先检查：{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</ScrollArea>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{filteredTutorials.length === 0 ? (
|
||
<div className="rounded-[26px] border border-dashed border-border/60 px-6 py-14 text-center text-muted-foreground">
|
||
当前筛选下暂无匹配教程。
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|