feat: 完成 P1 全部功能 + 修复 proxy 导出 + 切换 MySQL 端口至 14013
## P1 功能（20 项） - 站内消息系统、家长仪表盘、学生考勤管理 - Excel 导入导出、用户批量导入、成绩导出 - 排课规则+自动排课+课表调整 - 成绩趋势+对比分析、密码安全策略、速率限制 - 数据变更日志、文件预览+存储策略、全文检索 - 依赖审计集成 CI、数据库定时备份、E2E 测试完善 - 通知偏好管理 ## 基础设施修复 - src/proxy.ts: 将 middleware 导出重命名为 proxy（Next.js 16 要求） - .env: MySQL 端口从 13002 切换至 14013 - scripts/create-db.ts: 新增数据库初始化脚本 ## 架构文档同步 - 004_architecture_impact_map.md 和 005_architecture_data.json 完整记录所有新增表、模块、路由、权限、依赖关系
This commit is contained in:
SpecialX
@@ -0,0 +1,260 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { useActionState } from "react"
|
||||
import { useFormStatus } from "react-dom"
|
||||
import { Loader2, Save, Bell, Mail, MessageSquare, Megaphone, GraduationCap, BookOpen, CalendarCheck } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Switch } from "@/shared/components/ui/switch"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Separator } from "@/shared/components/ui/separator"
|
||||
import { updateNotificationPreferencesAction } from "@/modules/messaging/actions"
|
||||
import type { NotificationPreferences } from "@/modules/messaging/types"
|
||||
|
||||
interface NotificationPreferencesFormProps {
|
||||
preferences: NotificationPreferences
|
||||
}
|
||||
|
||||
interface ChannelItem {
|
||||
key: keyof Pick<
|
||||
NotificationPreferences,
|
||||
"emailEnabled" | "smsEnabled" | "pushEnabled"
|
||||
>
|
||||
label: string
|
||||
description: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
interface CategoryItem {
|
||||
key: keyof Pick<
|
||||
NotificationPreferences,
|
||||
| "homeworkNotifications"
|
||||
| "gradeNotifications"
|
||||
| "announcementNotifications"
|
||||
| "messageNotifications"
|
||||
| "attendanceNotifications"
|
||||
>
|
||||
label: string
|
||||
description: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
const CHANNELS: ChannelItem[] = [
|
||||
{
|
||||
key: "pushEnabled",
|
||||
label: "Push Notifications",
|
||||
description: "Receive in-app and browser push notifications.",
|
||||
icon: Bell,
|
||||
},
|
||||
{
|
||||
key: "emailEnabled",
|
||||
label: "Email",
|
||||
description: "Send notifications to my registered email address.",
|
||||
icon: Mail,
|
||||
},
|
||||
{
|
||||
key: "smsEnabled",
|
||||
label: "SMS",
|
||||
description: "Send critical notifications via SMS (charges may apply).",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
]
|
||||
|
||||
const CATEGORIES: CategoryItem[] = [
|
||||
{
|
||||
key: "messageNotifications",
|
||||
label: "Messages",
|
||||
description: "New direct messages and replies.",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
{
|
||||
key: "announcementNotifications",
|
||||
label: "Announcements",
|
||||
description: "School, grade, and class announcements.",
|
||||
icon: Megaphone,
|
||||
},
|
||||
{
|
||||
key: "homeworkNotifications",
|
||||
label: "Homework",
|
||||
description: "New assignments and submission reminders.",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
key: "gradeNotifications",
|
||||
label: "Grades",
|
||||
description: "Exam and assignment grade releases.",
|
||||
icon: GraduationCap,
|
||||
},
|
||||
{
|
||||
key: "attendanceNotifications",
|
||||
label: "Attendance",
|
||||
description: "Attendance records and absence alerts.",
|
||||
icon: CalendarCheck,
|
||||
},
|
||||
]
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Save Preferences
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function NotificationPreferencesForm({ preferences }: NotificationPreferencesFormProps) {
|
||||
const [state, formAction] = useActionState(updateNotificationPreferencesAction, null)
|
||||
|
||||
// 本地状态用于即时反馈 Switch 切换
|
||||
const [channels, setChannels] = React.useState({
|
||||
emailEnabled: preferences.emailEnabled,
|
||||
smsEnabled: preferences.smsEnabled,
|
||||
pushEnabled: preferences.pushEnabled,
|
||||
})
|
||||
const [categories, setCategories] = React.useState({
|
||||
homeworkNotifications: preferences.homeworkNotifications,
|
||||
gradeNotifications: preferences.gradeNotifications,
|
||||
announcementNotifications: preferences.announcementNotifications,
|
||||
messageNotifications: preferences.messageNotifications,
|
||||
attendanceNotifications: preferences.attendanceNotifications,
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
if (state?.success) {
|
||||
toast.success(state.message ?? "Preferences updated")
|
||||
} else if (state?.success === false && state.message) {
|
||||
toast.error(state.message)
|
||||
}
|
||||
}, [state])
|
||||
|
||||
const toggleChannel = (key: keyof typeof channels) => {
|
||||
setChannels((prev) => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
|
||||
const toggleCategory = (key: keyof typeof categories) => {
|
||||
setCategories((prev) => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Notification Preferences</CardTitle>
|
||||
<CardDescription>
|
||||
Choose how and when you want to be notified.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<form action={formAction}>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 通知渠道 */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium">Delivery Channels</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select the channels through which you want to receive notifications.
|
||||
</p>
|
||||
</div>
|
||||
{CHANNELS.map((item) => {
|
||||
const Icon = item.icon
|
||||
const checked = channels[item.key]
|
||||
return (
|
||||
<div key={item.key} className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor={item.key} className="text-sm font-medium cursor-pointer">
|
||||
{item.label}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 隐藏的 checkbox 用于表单提交 */}
|
||||
<input
|
||||
type="checkbox"
|
||||
name={item.key}
|
||||
checked={checked}
|
||||
onChange={() => toggleChannel(item.key)}
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<Switch
|
||||
id={item.key}
|
||||
checked={checked}
|
||||
onCheckedChange={() => toggleChannel(item.key)}
|
||||
aria-label={item.label}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 通知类别 */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium">Notification Categories</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Choose which types of events should trigger notifications.
|
||||
</p>
|
||||
</div>
|
||||
{CATEGORIES.map((item) => {
|
||||
const Icon = item.icon
|
||||
const checked = categories[item.key]
|
||||
return (
|
||||
<div key={item.key} className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor={item.key} className="text-sm font-medium cursor-pointer">
|
||||
{item.label}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name={item.key}
|
||||
checked={checked}
|
||||
onChange={() => toggleCategory(item.key)}
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<Switch
|
||||
id={item.key}
|
||||
checked={checked}
|
||||
onCheckedChange={() => toggleCategory(item.key)}
|
||||
aria-label={item.label}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end border-t px-6 py-4">
|
||||
<SubmitButton />
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user