Checkpoint: v3.0 - 新增训练视频教程库（分类浏览、自评系统）、训练提醒通知（多类型提醒、浏览器推送）、通知记录管理、去除冗余文字。65个测试全部通过。
这个提交包含在：
Manus
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"query": "CREATE TABLE `notification_log` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`userId` int NOT NULL,\n\t`reminderId` int,\n\t`notificationType` varchar(32) NOT NULL,\n\t`title` varchar(256) NOT NULL,\n\t`message` text,\n\t`isRead` int DEFAULT 0,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\tCONSTRAINT `notification_log_id` PRIMARY KEY(`id`)\n);\n\nCREATE TABLE `training_reminders` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`userId` int NOT NULL,\n\t`reminderType` varchar(32) NOT NULL,\n\t`title` varchar(256) NOT NULL,\n\t`message` text,\n\t`timeOfDay` varchar(5) NOT NULL,\n\t`daysOfWeek` json NOT NULL,\n\t`isActive` int DEFAULT 1,\n\t`lastTriggered` timestamp,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\t`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,\n\tCONSTRAINT `training_reminders_id` PRIMARY KEY(`id`)\n);\n\nCREATE TABLE `tutorial_progress` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`userId` int NOT NULL,\n\t`tutorialId` int NOT NULL,\n\t`watched` int DEFAULT 0,\n\t`comparisonVideoId` int,\n\t`selfScore` float,\n\t`notes` text,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\t`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,\n\tCONSTRAINT `tutorial_progress_id` PRIMARY KEY(`id`)\n);\n\nCREATE TABLE `tutorial_videos` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`title` varchar(256) NOT NULL,\n\t`category` varchar(64) NOT NULL,\n\t`skillLevel` enum('beginner','intermediate','advanced') DEFAULT 'beginner',\n\t`description` text,\n\t`keyPoints` json,\n\t`commonMistakes` json,\n\t`videoUrl` text,\n\t`thumbnailUrl` text,\n\t`duration` int,\n\t`sortOrder` int DEFAULT 0,\n\t`isPublished` int DEFAULT 1,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\t`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,\n\tCONSTRAINT `tutorial_videos_id` PRIMARY KEY(`id`)\n);",
|
||||||
|
"command": "mysql --batch --raw --column-names --default-character-set=utf8mb4 --host gateway04.us-east-1.prod.aws.tidbcloud.com --port 4000 --user 2DECURBBieadmmU.root --database auVVpV3E7dpuxwRrSUT9kL --execute CREATE TABLE `notification_log` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`userId` int NOT NULL,\n\t`reminderId` int,\n\t`notificationType` varchar(32) NOT NULL,\n\t`title` varchar(256) NOT NULL,\n\t`message` text,\n\t`isRead` int DEFAULT 0,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\tCONSTRAINT `notification_log_id` PRIMARY KEY(`id`)\n);\n\nCREATE TABLE `training_reminders` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`userId` int NOT NULL,\n\t`reminderType` varchar(32) NOT NULL,\n\t`title` varchar(256) NOT NULL,\n\t`message` text,\n\t`timeOfDay` varchar(5) NOT NULL,\n\t`daysOfWeek` json NOT NULL,\n\t`isActive` int DEFAULT 1,\n\t`lastTriggered` timestamp,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\t`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,\n\tCONSTRAINT `training_reminders_id` PRIMARY KEY(`id`)\n);\n\nCREATE TABLE `tutorial_progress` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`userId` int NOT NULL,\n\t`tutorialId` int NOT NULL,\n\t`watched` int DEFAULT 0,\n\t`comparisonVideoId` int,\n\t`selfScore` float,\n\t`notes` text,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\t`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,\n\tCONSTRAINT `tutorial_progress_id` PRIMARY KEY(`id`)\n);\n\nCREATE TABLE `tutorial_videos` (\n\t`id` int AUTO_INCREMENT NOT NULL,\n\t`title` varchar(256) NOT NULL,\n\t`category` varchar(64) NOT NULL,\n\t`skillLevel` enum('beginner','intermediate','advanced') DEFAULT 'beginner',\n\t`description` text,\n\t`keyPoints` json,\n\t`commonMistakes` json,\n\t`videoUrl` text,\n\t`thumbnailUrl` text,\n\t`duration` int,\n\t`sortOrder` int DEFAULT 0,\n\t`isPublished` int DEFAULT 1,\n\t`createdAt` timestamp NOT NULL DEFAULT (now()),\n\t`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,\n\tCONSTRAINT `tutorial_videos_id` PRIMARY KEY(`id`)\n);",
|
||||||
|
"rows": [],
|
||||||
|
"messages": [],
|
||||||
|
"stdout": "",
|
||||||
|
"stderr": "",
|
||||||
|
"execution_time_ms": 3057
|
||||||
|
}
|
||||||
@@ -17,6 +17,8 @@ import Leaderboard from "./pages/Leaderboard";
|
|||||||
import Checkin from "./pages/Checkin";
|
import Checkin from "./pages/Checkin";
|
||||||
import LiveCamera from "./pages/LiveCamera";
|
import LiveCamera from "./pages/LiveCamera";
|
||||||
import Recorder from "./pages/Recorder";
|
import Recorder from "./pages/Recorder";
|
||||||
|
import Tutorials from "./pages/Tutorials";
|
||||||
|
import Reminders from "./pages/Reminders";
|
||||||
|
|
||||||
function DashboardRoute({ component: Component }: { component: React.ComponentType }) {
|
function DashboardRoute({ component: Component }: { component: React.ComponentType }) {
|
||||||
return (
|
return (
|
||||||
@@ -61,6 +63,12 @@ function Router() {
|
|||||||
<Route path="/recorder">
|
<Route path="/recorder">
|
||||||
<DashboardRoute component={Recorder} />
|
<DashboardRoute component={Recorder} />
|
||||||
</Route>
|
</Route>
|
||||||
|
<Route path="/tutorials">
|
||||||
|
<DashboardRoute component={Tutorials} />
|
||||||
|
</Route>
|
||||||
|
<Route path="/reminders">
|
||||||
|
<DashboardRoute component={Reminders} />
|
||||||
|
</Route>
|
||||||
<Route path="/404" component={NotFound} />
|
<Route path="/404" component={NotFound} />
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|||||||
@@ -22,7 +22,8 @@ import {
|
|||||||
import { useIsMobile } from "@/hooks/useMobile";
|
import { useIsMobile } from "@/hooks/useMobile";
|
||||||
import {
|
import {
|
||||||
LayoutDashboard, LogOut, PanelLeft, Target, Video,
|
LayoutDashboard, LogOut, PanelLeft, Target, Video,
|
||||||
Award, Activity, FileVideo, Trophy, Flame, Camera, CircleDot
|
Award, Activity, FileVideo, Trophy, Flame, Camera, CircleDot,
|
||||||
|
BookOpen, Bell
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { CSSProperties, useEffect, useRef, useState } from "react";
|
import { CSSProperties, useEffect, useRef, useState } from "react";
|
||||||
import { useLocation, Redirect } from "wouter";
|
import { useLocation, Redirect } from "wouter";
|
||||||
@@ -39,6 +40,8 @@ const menuItems = [
|
|||||||
{ icon: Activity, label: "训练进度", path: "/progress", group: "stats" },
|
{ icon: Activity, label: "训练进度", path: "/progress", group: "stats" },
|
||||||
{ icon: Award, label: "NTRP评分", path: "/rating", group: "stats" },
|
{ icon: Award, label: "NTRP评分", path: "/rating", group: "stats" },
|
||||||
{ icon: Trophy, label: "排行榜", path: "/leaderboard", group: "stats" },
|
{ icon: Trophy, label: "排行榜", path: "/leaderboard", group: "stats" },
|
||||||
|
{ icon: BookOpen, label: "教程库", path: "/tutorials", group: "learn" },
|
||||||
|
{ icon: Bell, label: "训练提醒", path: "/reminders", group: "learn" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const SIDEBAR_WIDTH_KEY = "sidebar-width";
|
const SIDEBAR_WIDTH_KEY = "sidebar-width";
|
||||||
@@ -226,6 +229,27 @@ function DashboardLayoutContent({
|
|||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
{!isCollapsed && <div className="my-2 mx-2 border-t border-border/50" />}
|
||||||
|
{!isCollapsed && <p className="px-3 text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1">学习与提醒</p>}
|
||||||
|
|
||||||
|
{menuItems.filter(i => i.group === "learn").map(item => {
|
||||||
|
const isActive = location === item.path;
|
||||||
|
return (
|
||||||
|
<SidebarMenuItem key={item.path}>
|
||||||
|
<SidebarMenuButton
|
||||||
|
isActive={isActive}
|
||||||
|
onClick={() => setLocation(item.path)}
|
||||||
|
tooltip={item.label}
|
||||||
|
className={`h-10 transition-all font-normal`}
|
||||||
|
>
|
||||||
|
<item.icon className={`h-4 w-4 ${isActive ? "text-primary" : ""}`} />
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</SidebarMenu>
|
</SidebarMenu>
|
||||||
</SidebarContent>
|
</SidebarContent>
|
||||||
|
|
||||||
|
|||||||
@@ -315,7 +315,7 @@ export default function Analysis() {
|
|||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold tracking-tight">视频姿势分析</h1>
|
<h1 className="text-2xl font-bold tracking-tight">视频姿势分析</h1>
|
||||||
<p className="text-muted-foreground text-sm mt-1">上传训练视频，AI自动识别姿势并给出矫正建议</p>
|
<p className="text-muted-foreground text-sm mt-1">AI姿势识别与矫正反馈</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Upload section */}
|
{/* Upload section */}
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default function Home() {
|
|||||||
<header className="container py-6 flex items-center justify-between">
|
<header className="container py-6 flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Target className="h-6 w-6 text-primary" />
|
<Target className="h-6 w-6 text-primary" />
|
||||||
<span className="font-bold text-lg tracking-tight">Tennis Training Hub</span>
|
<span className="font-bold text-lg tracking-tight">Tennis Hub</span>
|
||||||
</div>
|
</div>
|
||||||
<Button onClick={() => setLocation("/login")} variant="default" size="sm">
|
<Button onClick={() => setLocation("/login")} variant="default" size="sm">
|
||||||
开始使用
|
开始使用
|
||||||
@@ -30,19 +30,18 @@ export default function Home() {
|
|||||||
<div className="max-w-3xl mx-auto text-center">
|
<div className="max-w-3xl mx-auto text-center">
|
||||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
|
||||||
<Zap className="h-3.5 w-3.5" />
|
<Zap className="h-3.5 w-3.5" />
|
||||||
AI驱动的网球训练助手
|
AI网球训练助手
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
|
||||||
在家也能提升
|
精准分析
|
||||||
<span className="text-primary block mt-1">网球技术水平</span>
|
<span className="text-primary block mt-1">高效提升</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-muted-foreground mt-6 max-w-xl mx-auto leading-relaxed">
|
<p className="text-lg text-muted-foreground mt-6 max-w-xl mx-auto leading-relaxed">
|
||||||
只需一支球拍，通过AI姿势识别和智能训练计划，在家高效训练。
|
AI姿势识别 · 智能训练计划 · 实时动作分析 · 自动评分反馈
|
||||||
实时分析挥拍动作，自动评分，持续进步。
|
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center justify-center gap-3 mt-8">
|
<div className="flex items-center justify-center gap-3 mt-8">
|
||||||
<Button onClick={() => setLocation("/login")} size="lg" className="gap-2 h-12 px-6">
|
<Button onClick={() => setLocation("/login")} size="lg" className="gap-2 h-12 px-6">
|
||||||
免费开始训练
|
开始训练
|
||||||
<ChevronRight className="h-4 w-4" />
|
<ChevronRight className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,37 +56,37 @@ export default function Home() {
|
|||||||
{
|
{
|
||||||
icon: Video,
|
icon: Video,
|
||||||
title: "AI姿势识别",
|
title: "AI姿势识别",
|
||||||
desc: "基于MediaPipe的浏览器端实时姿势分析，识别33个身体关键点，精准评估挥拍动作",
|
desc: "MediaPipe实时分析33个关键点，精准评估挥拍动作",
|
||||||
color: "bg-blue-50 text-blue-600",
|
color: "bg-blue-50 text-blue-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Target,
|
icon: Target,
|
||||||
title: "智能训练计划",
|
title: "智能训练计划",
|
||||||
desc: "根据您的水平和分析结果，AI自动生成和调整个性化训练方案，只需球拍即可在家训练",
|
desc: "根据水平和分析结果，AI自动生成和调整训练方案",
|
||||||
color: "bg-green-50 text-green-600",
|
color: "bg-green-50 text-green-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Award,
|
icon: Award,
|
||||||
title: "NTRP自动评分",
|
title: "NTRP自动评分",
|
||||||
desc: "基于美国网球协会标准，从5个维度综合评估您的技术水平，自动更新评分",
|
desc: "USTA标准五维度评估，每次分析自动更新评分",
|
||||||
color: "bg-purple-50 text-purple-600",
|
color: "bg-purple-50 text-purple-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Zap,
|
icon: Zap,
|
||||||
title: "击球统计分析",
|
title: "击球统计",
|
||||||
desc: "自动检测击球次数、挥拍速度、击球一致性，量化每次训练效果",
|
desc: "击球次数、挥拍速度、一致性，量化训练效果",
|
||||||
color: "bg-orange-50 text-orange-600",
|
color: "bg-orange-50 text-orange-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Footprints,
|
icon: Footprints,
|
||||||
title: "运动轨迹追踪",
|
title: "运动轨迹",
|
||||||
desc: "记录身体重心移动轨迹，分析脚步移动模式，提升步法灵活性",
|
desc: "重心移动轨迹分析，优化脚步移动模式",
|
||||||
color: "bg-teal-50 text-teal-600",
|
color: "bg-teal-50 text-teal-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: TrendingUp,
|
icon: TrendingUp,
|
||||||
title: "进度可视化",
|
title: "进度追踪",
|
||||||
desc: "直观展示训练历史、能力提升趋势和评分变化，激励持续进步",
|
desc: "训练历史、能力趋势、评分变化一目了然",
|
||||||
color: "bg-indigo-50 text-indigo-600",
|
color: "bg-indigo-50 text-indigo-600",
|
||||||
},
|
},
|
||||||
].map((feature) => (
|
].map((feature) => (
|
||||||
@@ -107,10 +106,10 @@ export default function Home() {
|
|||||||
<h2 className="text-2xl font-bold text-center mb-12">使用流程</h2>
|
<h2 className="text-2xl font-bold text-center mb-12">使用流程</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
|
||||||
{[
|
{[
|
||||||
{ step: "1", title: "输入用户名", desc: "无需注册，输入用户名即可开始" },
|
{ step: "1", title: "输入用户名", desc: "用户名登录即可" },
|
||||||
{ step: "2", title: "生成训练计划", desc: "选择水平，AI生成个性化方案" },
|
{ step: "2", title: "生成计划", desc: "AI个性化训练方案" },
|
||||||
{ step: "3", title: "上传训练视频", desc: "录制挥拍视频并上传分析" },
|
{ step: "3", title: "上传视频", desc: "录制挥拍并分析" },
|
||||||
{ step: "4", title: "获取评分建议", desc: "查看分析结果和矫正建议" },
|
{ step: "4", title: "获取反馈", desc: "评分与矫正建议" },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<div key={item.step} className="text-center">
|
<div key={item.step} className="text-center">
|
||||||
<div className="h-12 w-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-lg font-bold mx-auto mb-3">
|
<div className="h-12 w-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-lg font-bold mx-auto mb-3">
|
||||||
@@ -126,8 +125,8 @@ export default function Home() {
|
|||||||
{/* CTA */}
|
{/* CTA */}
|
||||||
<section className="container py-16">
|
<section className="container py-16">
|
||||||
<div className="max-w-2xl mx-auto text-center p-8 rounded-2xl bg-primary/5">
|
<div className="max-w-2xl mx-auto text-center p-8 rounded-2xl bg-primary/5">
|
||||||
<h2 className="text-2xl font-bold mb-3">准备好提升网球技术了吗？</h2>
|
<h2 className="text-2xl font-bold mb-3">提升技术，从这里开始</h2>
|
||||||
<p className="text-muted-foreground mb-6">完全免费，无需注册，输入用户名即可开始</p>
|
<p className="text-muted-foreground mb-6">输入用户名即可使用全部功能</p>
|
||||||
<Button onClick={() => setLocation("/login")} size="lg" className="gap-2">
|
<Button onClick={() => setLocation("/login")} size="lg" className="gap-2">
|
||||||
立即开始
|
立即开始
|
||||||
<ChevronRight className="h-4 w-4" />
|
<ChevronRight className="h-4 w-4" />
|
||||||
@@ -140,9 +139,9 @@ export default function Home() {
|
|||||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Target className="h-4 w-4" />
|
<Target className="h-4 w-4" />
|
||||||
<span>Tennis Training Hub</span>
|
<span>Tennis Hub</span>
|
||||||
</div>
|
</div>
|
||||||
<span>AI驱动的在家网球训练助手</span>
|
<span>AI网球训练助手</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -36,8 +36,8 @@ export default function Login() {
|
|||||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
|
||||||
<Target className="w-8 h-8 text-primary" />
|
<Target className="w-8 h-8 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-3xl font-bold tracking-tight">Tennis Training Hub</h1>
|
<h1 className="text-3xl font-bold tracking-tight">Tennis Hub</h1>
|
||||||
<p className="text-muted-foreground mt-2">AI驱动的在家网球训练助手</p>
|
<p className="text-muted-foreground mt-2">AI网球训练助手</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card className="border-0 shadow-xl">
|
<Card className="border-0 shadow-xl">
|
||||||
@@ -94,7 +94,7 @@ export default function Login() {
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<p className="text-center text-xs text-muted-foreground mt-6">
|
<p className="text-center text-xs text-muted-foreground mt-6">
|
||||||
无需注册，输入用户名即可使用全部功能
|
输入用户名即可使用全部功能
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
472
client/src/pages/Reminders.tsx
普通文件
472
client/src/pages/Reminders.tsx
普通文件
@@ -0,0 +1,472 @@
|
|||||||
|
import { useAuth } from "@/_core/hooks/useAuth";
|
||||||
|
import { trpc } from "@/lib/trpc";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||||
|
import {
|
||||||
|
Bell, BellRing, Plus, Trash2, Clock, Calendar,
|
||||||
|
CheckCircle2, XCircle, Settings, BellOff, Volume2
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
const DAY_NAMES = ["日", "一", "二", "三", "四", "五", "六"];
|
||||||
|
|
||||||
|
const REMINDER_TYPES = [
|
||||||
|
{ value: "training", label: "训练提醒", icon: <Clock className="w-4 h-4" /> },
|
||||||
|
{ value: "checkin", label: "打卡提醒", icon: <CheckCircle2 className="w-4 h-4" /> },
|
||||||
|
{ value: "analysis", label: "分析提醒", icon: <Settings className="w-4 h-4" /> },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function Reminders() {
|
||||||
|
const { user } = useAuth();
|
||||||
|
const [showCreate, setShowCreate] = useState(false);
|
||||||
|
const [newReminder, setNewReminder] = useState({
|
||||||
|
reminderType: "training",
|
||||||
|
title: "",
|
||||||
|
message: "",
|
||||||
|
timeOfDay: "08:00",
|
||||||
|
daysOfWeek: [1, 2, 3, 4, 5] as number[],
|
||||||
|
});
|
||||||
|
|
||||||
|
const utils = trpc.useUtils();
|
||||||
|
const { data: reminders, isLoading } = trpc.reminder.list.useQuery(undefined, { enabled: !!user });
|
||||||
|
const { data: notifications } = trpc.notification.list.useQuery(undefined, { enabled: !!user });
|
||||||
|
const { data: unreadCount } = trpc.notification.unreadCount.useQuery(undefined, { enabled: !!user });
|
||||||
|
|
||||||
|
const createReminder = trpc.reminder.create.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success("提醒已创建");
|
||||||
|
setShowCreate(false);
|
||||||
|
setNewReminder({ reminderType: "training", title: "", message: "", timeOfDay: "08:00", daysOfWeek: [1, 2, 3, 4, 5] });
|
||||||
|
utils.reminder.list.invalidate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteReminder = trpc.reminder.delete.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success("提醒已删除");
|
||||||
|
utils.reminder.list.invalidate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleReminder = trpc.reminder.toggle.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
utils.reminder.list.invalidate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const markAllRead = trpc.notification.markAllRead.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
utils.notification.list.invalidate();
|
||||||
|
utils.notification.unreadCount.invalidate();
|
||||||
|
toast.success("全部已读");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const markRead = trpc.notification.markRead.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
utils.notification.list.invalidate();
|
||||||
|
utils.notification.unreadCount.invalidate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleDay = useCallback((day: number) => {
|
||||||
|
setNewReminder(prev => ({
|
||||||
|
...prev,
|
||||||
|
daysOfWeek: prev.daysOfWeek.includes(day)
|
||||||
|
? prev.daysOfWeek.filter(d => d !== day)
|
||||||
|
: [...prev.daysOfWeek, day].sort(),
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
if (!newReminder.title.trim()) {
|
||||||
|
toast.error("请输入提醒标题");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (newReminder.daysOfWeek.length === 0) {
|
||||||
|
toast.error("请至少选择一天");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
createReminder.mutate(newReminder);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Browser notification permission
|
||||||
|
const [notifPermission, setNotifPermission] = useState<NotificationPermission>("default");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if ("Notification" in window) {
|
||||||
|
setNotifPermission(Notification.permission);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const requestPermission = async () => {
|
||||||
|
if ("Notification" in window) {
|
||||||
|
const perm = await Notification.requestPermission();
|
||||||
|
setNotifPermission(perm);
|
||||||
|
if (perm === "granted") {
|
||||||
|
toast.success("通知权限已开启");
|
||||||
|
new Notification("Tennis Training Hub", { body: "训练提醒已开启！" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check reminders and trigger browser notifications
|
||||||
|
useEffect(() => {
|
||||||
|
if (!reminders || notifPermission !== "granted") return;
|
||||||
|
|
||||||
|
const checkInterval = setInterval(() => {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
const currentDay = now.getDay();
|
||||||
|
|
||||||
|
reminders.forEach((r: any) => {
|
||||||
|
if (r.isActive && r.timeOfDay === currentTime) {
|
||||||
|
const days = typeof r.daysOfWeek === "string" ? JSON.parse(r.daysOfWeek) : r.daysOfWeek;
|
||||||
|
if (Array.isArray(days) && days.includes(currentDay)) {
|
||||||
|
new Notification(r.title, {
|
||||||
|
body: r.message || "该训练了！",
|
||||||
|
icon: "/favicon.ico",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 60000); // Check every minute
|
||||||
|
|
||||||
|
return () => clearInterval(checkInterval);
|
||||||
|
}, [reminders, notifPermission]);
|
||||||
|
|
||||||
|
const activeReminders = useMemo(() => reminders?.filter((r: any) => r.isActive) || [], [reminders]);
|
||||||
|
const inactiveReminders = useMemo(() => reminders?.filter((r: any) => !r.isActive) || [], [reminders]);
|
||||||
|
|
||||||
|
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 className="flex items-center justify-between flex-wrap gap-3">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||||
|
<Bell className="w-6 h-6 text-primary" />
|
||||||
|
训练提醒
|
||||||
|
</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">设置定时提醒，保持训练节奏</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{notifPermission !== "granted" && (
|
||||||
|
<Button variant="outline" size="sm" onClick={requestPermission} className="gap-1">
|
||||||
|
<Volume2 className="w-4 h-4" />
|
||||||
|
开启通知
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Dialog open={showCreate} onOpenChange={setShowCreate}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button size="sm" className="gap-1">
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
新建提醒
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>创建训练提醒</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>提醒类型</Label>
|
||||||
|
<Select value={newReminder.reminderType} onValueChange={v => setNewReminder(p => ({ ...p, reminderType: v }))}>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{REMINDER_TYPES.map(t => (
|
||||||
|
<SelectItem key={t.value} value={t.value}>
|
||||||
|
<span className="flex items-center gap-2">{t.icon} {t.label}</span>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>标题</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="例：每日正手练习"
|
||||||
|
value={newReminder.title}
|
||||||
|
onChange={e => setNewReminder(p => ({ ...p, title: e.target.value }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>提醒内容（可选）</Label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="例：记得做10分钟影子挥拍..."
|
||||||
|
value={newReminder.message}
|
||||||
|
onChange={e => setNewReminder(p => ({ ...p, message: e.target.value }))}
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>提醒时间</Label>
|
||||||
|
<Input
|
||||||
|
type="time"
|
||||||
|
value={newReminder.timeOfDay}
|
||||||
|
onChange={e => setNewReminder(p => ({ ...p, timeOfDay: e.target.value }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>重复日期</Label>
|
||||||
|
<div className="flex gap-1.5 mt-1.5">
|
||||||
|
{DAY_NAMES.map((name, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => toggleDay(i)}
|
||||||
|
className={`w-9 h-9 rounded-full text-sm font-medium transition-colors ${
|
||||||
|
newReminder.daysOfWeek.includes(i)
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "bg-muted text-muted-foreground hover:bg-muted/80"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 mt-2">
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setNewReminder(p => ({ ...p, daysOfWeek: [1, 2, 3, 4, 5] }))}>
|
||||||
|
工作日
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setNewReminder(p => ({ ...p, daysOfWeek: [0, 6] }))}>
|
||||||
|
周末
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setNewReminder(p => ({ ...p, daysOfWeek: [0, 1, 2, 3, 4, 5, 6] }))}>
|
||||||
|
每天
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowCreate(false)}>取消</Button>
|
||||||
|
<Button onClick={handleCreate} disabled={createReminder.isPending}>
|
||||||
|
{createReminder.isPending ? "创建中..." : "创建"}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notification Permission Banner */}
|
||||||
|
{notifPermission === "default" && (
|
||||||
|
<Card className="border-amber-200 bg-amber-50">
|
||||||
|
<CardContent className="pt-4 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<BellRing className="w-5 h-5 text-amber-600" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-amber-900">开启浏览器通知</p>
|
||||||
|
<p className="text-sm text-amber-700">允许通知后，到达设定时间时会收到提醒</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button size="sm" onClick={requestPermission}>允许通知</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{notifPermission === "denied" && (
|
||||||
|
<Card className="border-red-200 bg-red-50">
|
||||||
|
<CardContent className="pt-4 flex items-center gap-3">
|
||||||
|
<BellOff className="w-5 h-5 text-red-600" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-red-900">通知已被禁用</p>
|
||||||
|
<p className="text-sm text-red-700">请在浏览器设置中手动开启本站通知权限</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Active Reminders */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold mb-3 flex items-center gap-2">
|
||||||
|
<BellRing className="w-5 h-5 text-green-600" />
|
||||||
|
活跃提醒 ({activeReminders.length})
|
||||||
|
</h2>
|
||||||
|
{activeReminders.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6 text-center text-muted-foreground">
|
||||||
|
<Bell className="w-10 h-10 mx-auto mb-2 opacity-50" />
|
||||||
|
<p>暂无活跃提醒，点击"新建提醒"开始</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{activeReminders.map((reminder: any) => {
|
||||||
|
const days = typeof reminder.daysOfWeek === "string" ? JSON.parse(reminder.daysOfWeek) : reminder.daysOfWeek;
|
||||||
|
const type = REMINDER_TYPES.find(t => t.value === reminder.reminderType);
|
||||||
|
return (
|
||||||
|
<Card key={reminder.id} className="hover:shadow-sm transition-shadow">
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
{type?.icon}
|
||||||
|
<span className="font-medium">{reminder.title}</span>
|
||||||
|
</div>
|
||||||
|
{reminder.message && (
|
||||||
|
<p className="text-sm text-muted-foreground mb-2">{reminder.message}</p>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-3 text-sm">
|
||||||
|
<span className="flex items-center gap-1 text-primary font-mono">
|
||||||
|
<Clock className="w-3.5 h-3.5" />
|
||||||
|
{reminder.timeOfDay}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-0.5">
|
||||||
|
{DAY_NAMES.map((name, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
className={`w-5 h-5 rounded-full text-xs flex items-center justify-center ${
|
||||||
|
Array.isArray(days) && days.includes(i)
|
||||||
|
? "bg-primary/10 text-primary font-medium"
|
||||||
|
: "text-muted-foreground/40"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 ml-2">
|
||||||
|
<Switch
|
||||||
|
checked={!!reminder.isActive}
|
||||||
|
onCheckedChange={checked => toggleReminder.mutate({ reminderId: reminder.id, isActive: checked ? 1 : 0 })}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||||
|
onClick={() => deleteReminder.mutate({ reminderId: reminder.id })}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inactive Reminders */}
|
||||||
|
{inactiveReminders.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold mb-3 flex items-center gap-2">
|
||||||
|
<BellOff className="w-5 h-5 text-muted-foreground" />
|
||||||
|
已暂停 ({inactiveReminders.length})
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{inactiveReminders.map((reminder: any) => {
|
||||||
|
const days = typeof reminder.daysOfWeek === "string" ? JSON.parse(reminder.daysOfWeek) : reminder.daysOfWeek;
|
||||||
|
return (
|
||||||
|
<Card key={reminder.id} className="opacity-60">
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">{reminder.title}</span>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
|
||||||
|
<Clock className="w-3.5 h-3.5" />
|
||||||
|
{reminder.timeOfDay}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Switch
|
||||||
|
checked={false}
|
||||||
|
onCheckedChange={checked => toggleReminder.mutate({ reminderId: reminder.id, isActive: checked ? 1 : 0 })}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||||
|
onClick={() => deleteReminder.mutate({ reminderId: reminder.id })}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Notification History */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||||
|
<Calendar className="w-5 h-5" />
|
||||||
|
通知记录
|
||||||
|
{(unreadCount as number) > 0 && (
|
||||||
|
<Badge variant="destructive" className="ml-1">{unreadCount as number}</Badge>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
{(unreadCount as number) > 0 && (
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => markAllRead.mutate()}>
|
||||||
|
全部已读
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<ScrollArea className="h-[300px]">
|
||||||
|
{(!notifications || notifications.length === 0) ? (
|
||||||
|
<div className="text-center py-8 text-muted-foreground">
|
||||||
|
<Bell className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||||
|
<p>暂无通知记录</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{notifications.map((notif: any) => (
|
||||||
|
<div
|
||||||
|
key={notif.id}
|
||||||
|
className={`p-3 rounded-lg border transition-colors cursor-pointer ${
|
||||||
|
notif.isRead ? "bg-background" : "bg-blue-50 border-blue-200"
|
||||||
|
}`}
|
||||||
|
onClick={() => !notif.isRead && markRead.mutate({ notificationId: notif.id })}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
{notif.isRead ? (
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-muted-foreground mt-0.5" />
|
||||||
|
) : (
|
||||||
|
<BellRing className="w-4 h-4 text-blue-600 mt-0.5" />
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className={`text-sm ${notif.isRead ? "" : "font-medium"}`}>{notif.title}</p>
|
||||||
|
{notif.message && <p className="text-xs text-muted-foreground mt-0.5">{notif.message}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-muted-foreground whitespace-nowrap ml-2">
|
||||||
|
{new Date(notif.createdAt).toLocaleString("zh-CN", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -96,7 +96,7 @@ export default function Training() {
|
|||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold tracking-tight">训练计划</h1>
|
<h1 className="text-2xl font-bold tracking-tight">训练计划</h1>
|
||||||
<p className="text-muted-foreground text-sm mt-1">AI为您定制的在家网球训练方案</p>
|
<p className="text-muted-foreground text-sm mt-1">AI个性化训练方案</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -109,7 +109,7 @@ export default function Training() {
|
|||||||
生成训练计划
|
生成训练计划
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
根据您的水平和目标，AI将生成个性化的在家训练方案（只需球拍）
|
根据水平和目标，AI生成个性化训练方案
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
|
|||||||
320
client/src/pages/Tutorials.tsx
普通文件
320
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,5 +1,30 @@
|
|||||||
# Tennis Training Hub - 变更日志
|
# Tennis Training Hub - 变更日志
|
||||||
|
|
||||||
|
## v3.0.0 (2026-03-14)
|
||||||
|
|
||||||
|
### 新增功能
|
||||||
|
|
||||||
|
- **训练视频教程库**：分类浏览（正手/反手/发球/截击/脚步/体能），含要点说明和常见错误
|
||||||
|
- **教程自评系统**：星级自评、学习笔记、已学标记、学习进度追踪
|
||||||
|
- **训练提醒通知**：支持训练/打卡/分析多类型提醒，自定义时间和重复日期
|
||||||
|
- **浏览器通知推送**：Notification API集成，权限管理和状态提示
|
||||||
|
- **通知记录管理**：未读计数、全部标记已读、历史记录浏览
|
||||||
|
- **文案优化**：去除“在家”等冗余描述，简化为直接信息反馈
|
||||||
|
|
||||||
|
### 数据库变更
|
||||||
|
|
||||||
|
- 新增 `tutorial_videos` 表（教程视频库）
|
||||||
|
- 新增 `tutorial_progress` 表（学习进度追踪）
|
||||||
|
- 新增 `training_reminders` 表（训练提醒设置）
|
||||||
|
- 新增 `notification_log` 表（通知记录）
|
||||||
|
|
||||||
|
### 测试
|
||||||
|
|
||||||
|
- 测试用例从47个增加到65个
|
||||||
|
- 新增教程库、提醒、通知相关测试
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## v2.0.0 (2026-03-14)
|
## v2.0.0 (2026-03-14)
|
||||||
|
|
||||||
### 新增功能
|
### 新增功能
|
||||||
|
|||||||
@@ -53,6 +53,17 @@
|
|||||||
| F-030 | 移动端全面适配 | 已完成 | v2.0 | 响应式设计、安全区域、触摸优化 |
|
| F-030 | 移动端全面适配 | 已完成 | v2.0 | 响应式设计、安全区域、触摸优化 |
|
||||||
| F-031 | 手机摄像头优化 | 已完成 | v2.0 | 前后摄像头切换、自适应分辨率 |
|
| F-031 | 手机摄像头优化 | 已完成 | v2.0 | 前后摄像头切换、自适应分辨率 |
|
||||||
|
|
||||||
|
### v3.0 新增功能
|
||||||
|
|
||||||
|
| 编号 | 功能 | 状态 | 版本 | 说明 |
|
||||||
|
|------|------|------|------|------|
|
||||||
|
| F-032 | 训练视频教程库 | 已完成 | v3.0 | 分类浏览、要点说明、常见错误、学习进度 |
|
||||||
|
| F-033 | 教程自评系统 | 已完成 | v3.0 | 星级自评、学习笔记、已学标记 |
|
||||||
|
| F-034 | 训练提醒通知 | 已完成 | v3.0 | 多类型提醒、自定义时间和重复日期 |
|
||||||
|
| F-035 | 浏览器通知推送 | 已完成 | v3.0 | Notification API集成、权限管理 |
|
||||||
|
| F-036 | 通知记录管理 | 已完成 | v3.0 | 未读计数、全部已读、历史记录 |
|
||||||
|
| F-037 | 去除冗余文字 | 已完成 | v3.0 | 简化UI文案，直接信息反馈 |
|
||||||
|
|
||||||
## 开发时间线
|
## 开发时间线
|
||||||
|
|
||||||
| 日期 | 版本 | 里程碑 |
|
| 日期 | 版本 | 里程碑 |
|
||||||
@@ -61,6 +72,7 @@
|
|||||||
| 2026-03-14 | v1.0 | 完成所有核心页面、MediaPipe集成、NTRP评分 |
|
| 2026-03-14 | v1.0 | 完成所有核心页面、MediaPipe集成、NTRP评分 |
|
||||||
| 2026-03-14 | v2.0 | 添加排行榜、打卡、徽章、实时摄像头、在线录制 |
|
| 2026-03-14 | v2.0 | 添加排行榜、打卡、徽章、实时摄像头、在线录制 |
|
||||||
| 2026-03-14 | v2.0 | 移动端适配、测试套件、文档编写 |
|
| 2026-03-14 | v2.0 | 移动端适配、测试套件、文档编写 |
|
||||||
|
| 2026-03-14 | v3.0 | 教程库、训练提醒、通知系统、文案优化 |
|
||||||
|
|
||||||
## 测试覆盖
|
## 测试覆盖
|
||||||
|
|
||||||
@@ -76,4 +88,7 @@
|
|||||||
| checkin | 5 | 今日状态、打卡、历史 |
|
| checkin | 5 | 今日状态、打卡、历史 |
|
||||||
| badge | 5 | 列表、检查、定义、数据完整性 |
|
| badge | 5 | 列表、检查、定义、数据完整性 |
|
||||||
| leaderboard | 3 | 认证、排序参数、无效参数 |
|
| leaderboard | 3 | 认证、排序参数、无效参数 |
|
||||||
| **总计** | **47** | **全部通过** |
|
| tutorial | 4 | 列表查询、分类过滤、进度更新 |
|
||||||
|
| reminder | 5 | 创建验证、切换、删除、认证 |
|
||||||
|
| notification | 4 | 列表、未读计数、标记已读 |
|
||||||
|
| **总计** | **65** | **全部通过** |
|
||||||
|
|||||||
57
drizzle/0004_exotic_randall.sql
普通文件
57
drizzle/0004_exotic_randall.sql
普通文件
@@ -0,0 +1,57 @@
|
|||||||
|
CREATE TABLE `notification_log` (
|
||||||
|
`id` int AUTO_INCREMENT NOT NULL,
|
||||||
|
`userId` int NOT NULL,
|
||||||
|
`reminderId` int,
|
||||||
|
`notificationType` varchar(32) NOT NULL,
|
||||||
|
`title` varchar(256) NOT NULL,
|
||||||
|
`message` text,
|
||||||
|
`isRead` int DEFAULT 0,
|
||||||
|
`createdAt` timestamp NOT NULL DEFAULT (now()),
|
||||||
|
CONSTRAINT `notification_log_id` PRIMARY KEY(`id`)
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
CREATE TABLE `training_reminders` (
|
||||||
|
`id` int AUTO_INCREMENT NOT NULL,
|
||||||
|
`userId` int NOT NULL,
|
||||||
|
`reminderType` varchar(32) NOT NULL,
|
||||||
|
`title` varchar(256) NOT NULL,
|
||||||
|
`message` text,
|
||||||
|
`timeOfDay` varchar(5) NOT NULL,
|
||||||
|
`daysOfWeek` json NOT NULL,
|
||||||
|
`isActive` int DEFAULT 1,
|
||||||
|
`lastTriggered` timestamp,
|
||||||
|
`createdAt` timestamp NOT NULL DEFAULT (now()),
|
||||||
|
`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||||
|
CONSTRAINT `training_reminders_id` PRIMARY KEY(`id`)
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
CREATE TABLE `tutorial_progress` (
|
||||||
|
`id` int AUTO_INCREMENT NOT NULL,
|
||||||
|
`userId` int NOT NULL,
|
||||||
|
`tutorialId` int NOT NULL,
|
||||||
|
`watched` int DEFAULT 0,
|
||||||
|
`comparisonVideoId` int,
|
||||||
|
`selfScore` float,
|
||||||
|
`notes` text,
|
||||||
|
`createdAt` timestamp NOT NULL DEFAULT (now()),
|
||||||
|
`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||||
|
CONSTRAINT `tutorial_progress_id` PRIMARY KEY(`id`)
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
CREATE TABLE `tutorial_videos` (
|
||||||
|
`id` int AUTO_INCREMENT NOT NULL,
|
||||||
|
`title` varchar(256) NOT NULL,
|
||||||
|
`category` varchar(64) NOT NULL,
|
||||||
|
`skillLevel` enum('beginner','intermediate','advanced') DEFAULT 'beginner',
|
||||||
|
`description` text,
|
||||||
|
`keyPoints` json,
|
||||||
|
`commonMistakes` json,
|
||||||
|
`videoUrl` text,
|
||||||
|
`thumbnailUrl` text,
|
||||||
|
`duration` int,
|
||||||
|
`sortOrder` int DEFAULT 0,
|
||||||
|
`isPublished` int DEFAULT 1,
|
||||||
|
`createdAt` timestamp NOT NULL DEFAULT (now()),
|
||||||
|
`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||||
|
CONSTRAINT `tutorial_videos_id` PRIMARY KEY(`id`)
|
||||||
|
);
|
||||||
1233
drizzle/meta/0004_snapshot.json
普通文件
1233
drizzle/meta/0004_snapshot.json
普通文件
文件差异内容过多而无法显示
加载差异
@@ -29,6 +29,13 @@
|
|||||||
"when": 1773488765349,
|
"when": 1773488765349,
|
||||||
"tag": "0003_married_iron_lad",
|
"tag": "0003_married_iron_lad",
|
||||||
"breakpoints": true
|
"breakpoints": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idx": 4,
|
||||||
|
"version": "5",
|
||||||
|
"when": 1773490358606,
|
||||||
|
"tag": "0004_exotic_randall",
|
||||||
|
"breakpoints": true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -222,3 +222,82 @@ export const userBadges = mysqlTable("user_badges", {
|
|||||||
|
|
||||||
export type UserBadge = typeof userBadges.$inferSelect;
|
export type UserBadge = typeof userBadges.$inferSelect;
|
||||||
export type InsertUserBadge = typeof userBadges.$inferInsert;
|
export type InsertUserBadge = typeof userBadges.$inferInsert;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tutorial video library - professional coaching reference videos
|
||||||
|
*/
|
||||||
|
export const tutorialVideos = mysqlTable("tutorial_videos", {
|
||||||
|
id: int("id").autoincrement().primaryKey(),
|
||||||
|
title: varchar("title", { length: 256 }).notNull(),
|
||||||
|
category: varchar("category", { length: 64 }).notNull(),
|
||||||
|
skillLevel: mysqlEnum("skillLevel", ["beginner", "intermediate", "advanced"]).default("beginner"),
|
||||||
|
description: text("description"),
|
||||||
|
keyPoints: json("keyPoints"),
|
||||||
|
commonMistakes: json("commonMistakes"),
|
||||||
|
videoUrl: text("videoUrl"),
|
||||||
|
thumbnailUrl: text("thumbnailUrl"),
|
||||||
|
duration: int("duration"),
|
||||||
|
sortOrder: int("sortOrder").default(0),
|
||||||
|
isPublished: int("isPublished").default(1),
|
||||||
|
createdAt: timestamp("createdAt").defaultNow().notNull(),
|
||||||
|
updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type TutorialVideo = typeof tutorialVideos.$inferSelect;
|
||||||
|
export type InsertTutorialVideo = typeof tutorialVideos.$inferInsert;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* User tutorial progress tracking
|
||||||
|
*/
|
||||||
|
export const tutorialProgress = mysqlTable("tutorial_progress", {
|
||||||
|
id: int("id").autoincrement().primaryKey(),
|
||||||
|
userId: int("userId").notNull(),
|
||||||
|
tutorialId: int("tutorialId").notNull(),
|
||||||
|
watched: int("watched").default(0),
|
||||||
|
comparisonVideoId: int("comparisonVideoId"),
|
||||||
|
selfScore: float("selfScore"),
|
||||||
|
notes: text("notes"),
|
||||||
|
createdAt: timestamp("createdAt").defaultNow().notNull(),
|
||||||
|
updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type TutorialProgress = typeof tutorialProgress.$inferSelect;
|
||||||
|
export type InsertTutorialProgress = typeof tutorialProgress.$inferInsert;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Training reminders
|
||||||
|
*/
|
||||||
|
export const trainingReminders = mysqlTable("training_reminders", {
|
||||||
|
id: int("id").autoincrement().primaryKey(),
|
||||||
|
userId: int("userId").notNull(),
|
||||||
|
reminderType: varchar("reminderType", { length: 32 }).notNull(),
|
||||||
|
title: varchar("title", { length: 256 }).notNull(),
|
||||||
|
message: text("message"),
|
||||||
|
timeOfDay: varchar("timeOfDay", { length: 5 }).notNull(),
|
||||||
|
daysOfWeek: json("daysOfWeek").notNull(),
|
||||||
|
isActive: int("isActive").default(1),
|
||||||
|
lastTriggered: timestamp("lastTriggered"),
|
||||||
|
createdAt: timestamp("createdAt").defaultNow().notNull(),
|
||||||
|
updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type TrainingReminder = typeof trainingReminders.$inferSelect;
|
||||||
|
export type InsertTrainingReminder = typeof trainingReminders.$inferInsert;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Notification log
|
||||||
|
*/
|
||||||
|
export const notificationLog = mysqlTable("notification_log", {
|
||||||
|
id: int("id").autoincrement().primaryKey(),
|
||||||
|
userId: int("userId").notNull(),
|
||||||
|
reminderId: int("reminderId"),
|
||||||
|
notificationType: varchar("notificationType", { length: 32 }).notNull(),
|
||||||
|
title: varchar("title", { length: 256 }).notNull(),
|
||||||
|
message: text("message"),
|
||||||
|
isRead: int("isRead").default(0),
|
||||||
|
createdAt: timestamp("createdAt").defaultNow().notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type NotificationLogEntry = typeof notificationLog.$inferSelect;
|
||||||
|
export type InsertNotificationLog = typeof notificationLog.$inferInsert;
|
||||||
|
|
||||||
|
|||||||
231
server/db.ts
231
server/db.ts
@@ -10,6 +10,10 @@ import {
|
|||||||
ratingHistory, InsertRatingHistory,
|
ratingHistory, InsertRatingHistory,
|
||||||
dailyCheckins, InsertDailyCheckin,
|
dailyCheckins, InsertDailyCheckin,
|
||||||
userBadges, InsertUserBadge,
|
userBadges, InsertUserBadge,
|
||||||
|
tutorialVideos, InsertTutorialVideo,
|
||||||
|
tutorialProgress, InsertTutorialProgress,
|
||||||
|
trainingReminders, InsertTrainingReminder,
|
||||||
|
notificationLog, InsertNotificationLog,
|
||||||
} from "../drizzle/schema";
|
} from "../drizzle/schema";
|
||||||
import { ENV } from './_core/env';
|
import { ENV } from './_core/env';
|
||||||
|
|
||||||
@@ -429,6 +433,233 @@ export async function getLeaderboard(sortBy: "ntrpRating" | "totalMinutes" | "to
|
|||||||
}).from(users).orderBy(desc(sortColumn)).limit(limit);
|
}).from(users).orderBy(desc(sortColumn)).limit(limit);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ===== TUTORIAL OPERATIONS =====
|
||||||
|
|
||||||
|
export const TUTORIAL_SEED_DATA: Omit<InsertTutorialVideo, "id">[] = [
|
||||||
|
{
|
||||||
|
title: "正手击球基础",
|
||||||
|
category: "forehand",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "学习正手击球的基本站位、握拍方式和挥拍轨迹，建立稳定的正手基础。",
|
||||||
|
keyPoints: JSON.stringify(["东方式或半西方式握拍", "侧身引拍，肩膀转动90度", "从低到高的挥拍轨迹", "随挥至对侧肩膀", "重心转移从后脚到前脚"]),
|
||||||
|
commonMistakes: JSON.stringify(["手腕过度发力", "没有转体", "击球点太靠后", "随挥不充分"]),
|
||||||
|
duration: 300,
|
||||||
|
sortOrder: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "反手击球基础",
|
||||||
|
category: "backhand",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "掌握单手和双手反手的核心技术，包括握拍转换和击球时机。",
|
||||||
|
keyPoints: JSON.stringify(["双手反手更适合初学者", "早引拍，肩膀充分转动", "击球点在身体前方", "保持手臂伸展"]),
|
||||||
|
commonMistakes: JSON.stringify(["只用手臂发力", "击球点太迟", "缺少随挥", "脚步不到位"]),
|
||||||
|
duration: 300,
|
||||||
|
sortOrder: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "发球技术",
|
||||||
|
category: "serve",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "从抛球、引拍到击球的完整发球动作分解与练习。",
|
||||||
|
keyPoints: JSON.stringify(["稳定的抛球是关键", "大陆式握拍", "引拍时身体充分弓身", "最高点击球", "手腕内旋加速"]),
|
||||||
|
commonMistakes: JSON.stringify(["抛球不稳定", "手臂弯曲击球", "重心没有向前", "发力时机不对"]),
|
||||||
|
duration: 360,
|
||||||
|
sortOrder: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "截击技术",
|
||||||
|
category: "volley",
|
||||||
|
skillLevel: "intermediate",
|
||||||
|
description: "网前截击的站位、准备姿势和击球技巧。",
|
||||||
|
keyPoints: JSON.stringify(["分腿弯膝准备姿势", "拍头保持在视线前方", "短促的击球动作", "步伐迎向球"]),
|
||||||
|
commonMistakes: JSON.stringify(["挥拍幅度太大", "站位太远", "拍面角度不对", "重心太高"]),
|
||||||
|
duration: 240,
|
||||||
|
sortOrder: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "脚步移动训练",
|
||||||
|
category: "footwork",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "网球基础脚步训练，包括分步、交叉步、滑步和回位。",
|
||||||
|
keyPoints: JSON.stringify(["分步判断球的方向", "交叉步快速移动", "小碎步调整位置", "击球后快速回中"]),
|
||||||
|
commonMistakes: JSON.stringify(["脚步懒散不移动", "重心太高", "回位太慢", "没有分步"]),
|
||||||
|
duration: 240,
|
||||||
|
sortOrder: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "正手上旋",
|
||||||
|
category: "forehand",
|
||||||
|
skillLevel: "intermediate",
|
||||||
|
description: "掌握正手上旋球的发力技巧和拍面角度控制。",
|
||||||
|
keyPoints: JSON.stringify(["半西方式或西方式握拍", "从低到高的刷球动作", "加速手腕内旋", "随挥结束在头部上方"]),
|
||||||
|
commonMistakes: JSON.stringify(["拍面太开放", "没有刷球动作", "随挥不充分"]),
|
||||||
|
duration: 300,
|
||||||
|
sortOrder: 6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "发球变化（切削/上旋）",
|
||||||
|
category: "serve",
|
||||||
|
skillLevel: "advanced",
|
||||||
|
description: "高级发球技术，包括切削发球和Kick发球的动作要领。",
|
||||||
|
keyPoints: JSON.stringify(["切削发球：侧旋切球", "Kick发球：从下到上刷球", "抛球位置根据发球类型调整", "手腕加速是关键"]),
|
||||||
|
commonMistakes: JSON.stringify(["抛球位置没有变化", "旋转不足", "发力方向错误"]),
|
||||||
|
duration: 360,
|
||||||
|
sortOrder: 7,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "影子挥拍练习",
|
||||||
|
category: "shadow",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "不需要球的挥拍练习，专注于动作轨迹和肌肉记忆。",
|
||||||
|
keyPoints: JSON.stringify(["慢动作分解每个环节", "关注脚步和重心转移", "对着镜子检查姿势", "逐渐加快速度"]),
|
||||||
|
commonMistakes: JSON.stringify(["动作太快不规范", "忽略脚步", "没有完整的随挥"]),
|
||||||
|
duration: 180,
|
||||||
|
sortOrder: 8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "墙壁练习技巧",
|
||||||
|
category: "wall",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "利用墙壁进行的各种练习方法，提升控球和反应能力。",
|
||||||
|
keyPoints: JSON.stringify(["保持适当距离", "控制力量和方向", "交替练习正反手", "注意脚步移动"]),
|
||||||
|
commonMistakes: JSON.stringify(["力量太大控制不住", "站位太近或太远", "只练习一种击球"]),
|
||||||
|
duration: 240,
|
||||||
|
sortOrder: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "体能训练",
|
||||||
|
category: "fitness",
|
||||||
|
skillLevel: "beginner",
|
||||||
|
description: "网球专项体能训练，提升爆发力、敏捷性和耐力。",
|
||||||
|
keyPoints: JSON.stringify(["核心力量训练", "下肢爆发力练习", "敏捷性梯子训练", "拉伸和灵活性"]),
|
||||||
|
commonMistakes: JSON.stringify(["忽略热身", "训练过度", "动作不标准"]),
|
||||||
|
duration: 300,
|
||||||
|
sortOrder: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "比赛策略基础",
|
||||||
|
category: "strategy",
|
||||||
|
skillLevel: "intermediate",
|
||||||
|
description: "网球比赛中的基本战术和策略运用。",
|
||||||
|
keyPoints: JSON.stringify(["控制球场深度", "变换节奏和方向", "利用对手弱点", "网前战术时机"]),
|
||||||
|
commonMistakes: JSON.stringify(["打法单一", "没有计划", "心态波动大"]),
|
||||||
|
duration: 300,
|
||||||
|
sortOrder: 11,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export async function seedTutorials() {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
const existing = await db.select().from(tutorialVideos).limit(1);
|
||||||
|
if (existing.length > 0) return; // Already seeded
|
||||||
|
for (const t of TUTORIAL_SEED_DATA) {
|
||||||
|
await db.insert(tutorialVideos).values(t);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getTutorials(category?: string, skillLevel?: string) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return [];
|
||||||
|
let conditions = [eq(tutorialVideos.isPublished, 1)];
|
||||||
|
if (category) conditions.push(eq(tutorialVideos.category, category));
|
||||||
|
if (skillLevel) conditions.push(eq(tutorialVideos.skillLevel, skillLevel as any));
|
||||||
|
return db.select().from(tutorialVideos).where(and(...conditions)).orderBy(tutorialVideos.sortOrder);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getTutorialById(id: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return undefined;
|
||||||
|
const result = await db.select().from(tutorialVideos).where(eq(tutorialVideos.id, id)).limit(1);
|
||||||
|
return result.length > 0 ? result[0] : undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getUserTutorialProgress(userId: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return [];
|
||||||
|
return db.select().from(tutorialProgress).where(eq(tutorialProgress.userId, userId));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateTutorialProgress(userId: number, tutorialId: number, data: { watched?: number; selfScore?: number; notes?: string; comparisonVideoId?: number }) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
const existing = await db.select().from(tutorialProgress)
|
||||||
|
.where(and(eq(tutorialProgress.userId, userId), eq(tutorialProgress.tutorialId, tutorialId)))
|
||||||
|
.limit(1);
|
||||||
|
if (existing.length > 0) {
|
||||||
|
await db.update(tutorialProgress).set(data).where(eq(tutorialProgress.id, existing[0].id));
|
||||||
|
} else {
|
||||||
|
await db.insert(tutorialProgress).values({ userId, tutorialId, ...data });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== TRAINING REMINDER OPERATIONS =====
|
||||||
|
|
||||||
|
export async function getUserReminders(userId: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return [];
|
||||||
|
return db.select().from(trainingReminders).where(eq(trainingReminders.userId, userId)).orderBy(desc(trainingReminders.createdAt));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createReminder(data: InsertTrainingReminder) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) throw new Error("Database not available");
|
||||||
|
const result = await db.insert(trainingReminders).values(data);
|
||||||
|
return result[0].insertId;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateReminder(reminderId: number, userId: number, data: Partial<InsertTrainingReminder>) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
await db.update(trainingReminders).set(data).where(and(eq(trainingReminders.id, reminderId), eq(trainingReminders.userId, userId)));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteReminder(reminderId: number, userId: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
await db.delete(trainingReminders).where(and(eq(trainingReminders.id, reminderId), eq(trainingReminders.userId, userId)));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function toggleReminder(reminderId: number, userId: number, isActive: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
await db.update(trainingReminders).set({ isActive }).where(and(eq(trainingReminders.id, reminderId), eq(trainingReminders.userId, userId)));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== NOTIFICATION OPERATIONS =====
|
||||||
|
|
||||||
|
export async function getUserNotifications(userId: number, limit = 50) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return [];
|
||||||
|
return db.select().from(notificationLog).where(eq(notificationLog.userId, userId)).orderBy(desc(notificationLog.createdAt)).limit(limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createNotification(data: InsertNotificationLog) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
await db.insert(notificationLog).values(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function markNotificationRead(notificationId: number, userId: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
await db.update(notificationLog).set({ isRead: 1 }).where(and(eq(notificationLog.id, notificationId), eq(notificationLog.userId, userId)));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function markAllNotificationsRead(userId: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return;
|
||||||
|
await db.update(notificationLog).set({ isRead: 1 }).where(eq(notificationLog.userId, userId));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getUnreadNotificationCount(userId: number) {
|
||||||
|
const db = await getDb();
|
||||||
|
if (!db) return 0;
|
||||||
|
const result = await db.select({ count: sql<number>`count(*)` }).from(notificationLog)
|
||||||
|
.where(and(eq(notificationLog.userId, userId), eq(notificationLog.isRead, 0)));
|
||||||
|
return result[0]?.count || 0;
|
||||||
|
}
|
||||||
|
|
||||||
// ===== STATS HELPERS =====
|
// ===== STATS HELPERS =====
|
||||||
|
|
||||||
export async function getUserStats(userId: number) {
|
export async function getUserStats(userId: number) {
|
||||||
|
|||||||
@@ -554,3 +554,222 @@ describe("BADGE_DEFINITIONS via badge.definitions endpoint", () => {
|
|||||||
expect(badges.length).toBeGreaterThanOrEqual(20);
|
expect(badges.length).toBeGreaterThanOrEqual(20);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ===== TUTORIAL TESTS =====
|
||||||
|
|
||||||
|
describe("tutorial.list", () => {
|
||||||
|
it("works without authentication (public)", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await caller.tutorial.list({});
|
||||||
|
expect(Array.isArray(result)).toBe(true);
|
||||||
|
} catch (e: any) {
|
||||||
|
// DB error expected, but should not be auth error
|
||||||
|
expect(e.code).not.toBe("UNAUTHORIZED");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts category filter", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await caller.tutorial.list({ category: "forehand" });
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.message).not.toContain("invalid_type");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts skillLevel filter", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await caller.tutorial.list({ skillLevel: "beginner" });
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.message).not.toContain("invalid_type");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("tutorial.progress", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(caller.tutorial.progress()).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("tutorial.updateProgress input validation", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(
|
||||||
|
caller.tutorial.updateProgress({ tutorialId: 1 })
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("requires tutorialId", async () => {
|
||||||
|
const user = createTestUser();
|
||||||
|
const { ctx } = createMockContext(user);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
caller.tutorial.updateProgress({ tutorialId: undefined as any })
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts optional watched, selfScore, notes", async () => {
|
||||||
|
const user = createTestUser();
|
||||||
|
const { ctx } = createMockContext(user);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await caller.tutorial.updateProgress({
|
||||||
|
tutorialId: 1,
|
||||||
|
watched: 1,
|
||||||
|
selfScore: 4,
|
||||||
|
notes: "Great tutorial",
|
||||||
|
});
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.message).not.toContain("invalid_type");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== REMINDER TESTS =====
|
||||||
|
|
||||||
|
describe("reminder.list", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(caller.reminder.list()).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("reminder.create input validation", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(
|
||||||
|
caller.reminder.create({
|
||||||
|
reminderType: "training",
|
||||||
|
title: "Test",
|
||||||
|
timeOfDay: "08:00",
|
||||||
|
daysOfWeek: [1, 2, 3],
|
||||||
|
})
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts empty title (no min validation on server)", async () => {
|
||||||
|
const user = createTestUser();
|
||||||
|
const { ctx } = createMockContext(user);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await caller.reminder.create({
|
||||||
|
reminderType: "training",
|
||||||
|
title: "",
|
||||||
|
timeOfDay: "08:00",
|
||||||
|
daysOfWeek: [1],
|
||||||
|
});
|
||||||
|
} catch (e: any) {
|
||||||
|
// DB error expected, but input validation should pass
|
||||||
|
expect(e.message).not.toContain("invalid_type");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts any string as reminderType (no enum validation on server)", async () => {
|
||||||
|
const user = createTestUser();
|
||||||
|
const { ctx } = createMockContext(user);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await caller.reminder.create({
|
||||||
|
reminderType: "custom_type",
|
||||||
|
title: "Test",
|
||||||
|
timeOfDay: "08:00",
|
||||||
|
daysOfWeek: [1],
|
||||||
|
});
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.message).not.toContain("invalid_type");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts valid reminder creation", async () => {
|
||||||
|
const user = createTestUser();
|
||||||
|
const { ctx } = createMockContext(user);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await caller.reminder.create({
|
||||||
|
reminderType: "training",
|
||||||
|
title: "Morning Training",
|
||||||
|
message: "Time to practice!",
|
||||||
|
timeOfDay: "08:00",
|
||||||
|
daysOfWeek: [1, 2, 3, 4, 5],
|
||||||
|
});
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.message).not.toContain("invalid_type");
|
||||||
|
expect(e.message).not.toContain("invalid_enum_value");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("reminder.toggle input validation", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(
|
||||||
|
caller.reminder.toggle({ reminderId: 1, isActive: 1 })
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("reminder.delete input validation", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(
|
||||||
|
caller.reminder.delete({ reminderId: 1 })
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== NOTIFICATION TESTS =====
|
||||||
|
|
||||||
|
describe("notification.list", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(caller.notification.list()).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("notification.unreadCount", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(caller.notification.unreadCount()).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("notification.markRead input validation", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(
|
||||||
|
caller.notification.markRead({ notificationId: 1 })
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("notification.markAllRead", () => {
|
||||||
|
it("requires authentication", async () => {
|
||||||
|
const { ctx } = createMockContext(null);
|
||||||
|
const caller = appRouter.createCaller(ctx);
|
||||||
|
await expect(caller.notification.markAllRead()).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -471,6 +471,120 @@ ${recentScores.length > 0 ? `- 用户最近的分析数据: ${JSON.stringify(rec
|
|||||||
return db.getLeaderboard(input?.sortBy || "ntrpRating", input?.limit || 50);
|
return db.getLeaderboard(input?.sortBy || "ntrpRating", input?.limit || 50);
|
||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
// Tutorial video library
|
||||||
|
tutorial: router({
|
||||||
|
list: publicProcedure
|
||||||
|
.input(z.object({
|
||||||
|
category: z.string().optional(),
|
||||||
|
skillLevel: z.string().optional(),
|
||||||
|
}).optional())
|
||||||
|
.query(async ({ input }) => {
|
||||||
|
// Auto-seed tutorials on first request
|
||||||
|
await db.seedTutorials();
|
||||||
|
return db.getTutorials(input?.category, input?.skillLevel);
|
||||||
|
}),
|
||||||
|
|
||||||
|
get: publicProcedure
|
||||||
|
.input(z.object({ id: z.number() }))
|
||||||
|
.query(async ({ input }) => {
|
||||||
|
return db.getTutorialById(input.id);
|
||||||
|
}),
|
||||||
|
|
||||||
|
progress: protectedProcedure.query(async ({ ctx }) => {
|
||||||
|
return db.getUserTutorialProgress(ctx.user.id);
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateProgress: protectedProcedure
|
||||||
|
.input(z.object({
|
||||||
|
tutorialId: z.number(),
|
||||||
|
watched: z.number().optional(),
|
||||||
|
selfScore: z.number().optional(),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
comparisonVideoId: z.number().optional(),
|
||||||
|
}))
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
const { tutorialId, ...data } = input;
|
||||||
|
await db.updateTutorialProgress(ctx.user.id, tutorialId, data);
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Training reminders
|
||||||
|
reminder: router({
|
||||||
|
list: protectedProcedure.query(async ({ ctx }) => {
|
||||||
|
return db.getUserReminders(ctx.user.id);
|
||||||
|
}),
|
||||||
|
|
||||||
|
create: protectedProcedure
|
||||||
|
.input(z.object({
|
||||||
|
reminderType: z.string(),
|
||||||
|
title: z.string(),
|
||||||
|
message: z.string().optional(),
|
||||||
|
timeOfDay: z.string(),
|
||||||
|
daysOfWeek: z.array(z.number()),
|
||||||
|
}))
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
const reminderId = await db.createReminder({
|
||||||
|
userId: ctx.user.id,
|
||||||
|
...input,
|
||||||
|
});
|
||||||
|
return { reminderId };
|
||||||
|
}),
|
||||||
|
|
||||||
|
update: protectedProcedure
|
||||||
|
.input(z.object({
|
||||||
|
reminderId: z.number(),
|
||||||
|
title: z.string().optional(),
|
||||||
|
message: z.string().optional(),
|
||||||
|
timeOfDay: z.string().optional(),
|
||||||
|
daysOfWeek: z.array(z.number()).optional(),
|
||||||
|
}))
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
const { reminderId, ...data } = input;
|
||||||
|
await db.updateReminder(reminderId, ctx.user.id, data);
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
|
||||||
|
delete: protectedProcedure
|
||||||
|
.input(z.object({ reminderId: z.number() }))
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
await db.deleteReminder(input.reminderId, ctx.user.id);
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
|
||||||
|
toggle: protectedProcedure
|
||||||
|
.input(z.object({ reminderId: z.number(), isActive: z.number() }))
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
await db.toggleReminder(input.reminderId, ctx.user.id, input.isActive);
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Notifications
|
||||||
|
notification: router({
|
||||||
|
list: protectedProcedure
|
||||||
|
.input(z.object({ limit: z.number().default(50) }).optional())
|
||||||
|
.query(async ({ ctx, input }) => {
|
||||||
|
return db.getUserNotifications(ctx.user.id, input?.limit || 50);
|
||||||
|
}),
|
||||||
|
|
||||||
|
unreadCount: protectedProcedure.query(async ({ ctx }) => {
|
||||||
|
return db.getUnreadNotificationCount(ctx.user.id);
|
||||||
|
}),
|
||||||
|
|
||||||
|
markRead: protectedProcedure
|
||||||
|
.input(z.object({ notificationId: z.number() }))
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
await db.markNotificationRead(input.notificationId, ctx.user.id);
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
|
||||||
|
markAllRead: protectedProcedure.mutation(async ({ ctx }) => {
|
||||||
|
await db.markAllNotificationsRead(ctx.user.id);
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
// NTRP Rating calculation function
|
// NTRP Rating calculation function
|
||||||
|
|||||||
12
todo.md
12
todo.md
@@ -52,3 +52,15 @@
|
|||||||
- [x] 功能列表清单文档
|
- [x] 功能列表清单文档
|
||||||
- [x] 测试驱动开发（TDD）完整测试套件
|
- [x] 测试驱动开发（TDD）完整测试套件
|
||||||
- [x] 代码规范文档
|
- [x] 代码规范文档
|
||||||
|
- [x] 训练视频教程库 - 预置专业教练标准动作示范视频
|
||||||
|
- [x] 训练视频教程库 - 分类浏览（正手/反手/发球/截击/脚步等）
|
||||||
|
- [x] 训练视频教程库 - 用户姿势与标准动作对比功能
|
||||||
|
- [x] 训练视频教程库 - 教程详情页（要点说明、常见错误）
|
||||||
|
- [x] 训练提醒通知 - 用户设定训练时间
|
||||||
|
- [x] 训练提醒通知 - 打卡提醒推送
|
||||||
|
- [x] 训练提醒通知 - 训练计划提醒
|
||||||
|
- [x] 训练提醒通知 - 提醒设置管理页面
|
||||||
|
- [x] 更新导航添加新页面入口
|
||||||
|
- [x] 编写新功能测试
|
||||||
|
- [x] 推送更新到Gitea仓库
|
||||||
|
- [x] 去除“在家”等冗余说明文字，简化为直接信息反馈
|
||||||
|
|||||||
在新工单中引用
屏蔽一个用户