473 行
19 KiB
TypeScript
473 行
19 KiB
TypeScript
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>
|
||
);
|
||
}
|