refactor(attendance,elective): 审计第二轮 — 全量完成 P0/P1 改进项

P0 修复:
- 页面层 i18n 全量补齐(admin/teacher/parent/student × attendance/elective)
- types.ts 状态标签常量迁移至 constants.ts(i18n key + Badge variant)
- 修复 getTranslations 导入路径(next-intl → next-intl/server)

P1 改进:
- 解耦 parent 模块对 attendance 类型的直接依赖(本地 view-model 类型)
- 导出纯函数(computeStats/buildWarnings/buildLotteryRankCase 等)
- 统一空状态为 EmptyState 组件
- 清理死代码读 Action(attendance 5 个 + elective 3 个)
- 预留监控埋点接口(trackEvent 13 个新事件名)
- 补齐骨架屏 loading.tsx(8 个页面)
- AlertDialog 替换 window.confirm(student-selection-view)
- a11y 改进(aria-label/role/键盘导航)

修复:
- AttendanceStatus 从 constants.ts 重导出,消除 types/constants 双源混乱
- buildWarnings 的 Translator 类型改用 ReturnType<typeof useTranslations>
This commit is contained in:
SpecialX
2026-06-22 17:33:29 +08:00
parent 76966581b8
commit f62b8c0f86
46 changed files with 1748 additions and 545 deletions

View File

@@ -0,0 +1,35 @@
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
import { Skeleton } from "@/shared/components/ui/skeleton"
export default function Loading() {
return (
<div className="space-y-8 p-8">
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-72" />
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{Array.from({ length: 4 }).map((_, i) => (
<Card key={i}>
<CardHeader className="pb-2">
<Skeleton className="h-4 w-24" />
</CardHeader>
<CardContent>
<Skeleton className="h-8 w-16" />
</CardContent>
</Card>
))}
</div>
<Card>
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent className="space-y-3">
{Array.from({ length: 5 }).map((_, i) => (
<Skeleton key={i} className="h-10 w-full" />
))}
</CardContent>
</Card>
</div>
)
}

View File

@@ -1,7 +1,8 @@
import Link from "next/link"
import Link from "next/link"
import type { Metadata } from "next"
import type { JSX } from "react"
import { BarChart3, ClipboardList } from "lucide-react"
import { getTranslations } from "next-intl/server"
import { Button } from "@/shared/components/ui/button"
import { EmptyState } from "@/shared/components/ui/empty-state"
@@ -15,11 +16,6 @@ import { AttendanceStatsCards } from "@/modules/attendance/components/attendance
import { AttendanceRecordList } from "@/modules/attendance/components/attendance-record-list"
import type { AttendanceStatus } from "@/modules/attendance/types"
export const metadata: Metadata = {
title: "考勤总览 - Next_Edu",
description: "查看全校所有班级的考勤记录",
}
export const dynamic = "force-dynamic"
const isValidAttendanceStatus = (v?: string): v is AttendanceStatus =>
@@ -33,6 +29,7 @@ export default async function AdminAttendancePage({
await requirePermission(Permissions.ATTENDANCE_READ)
const sp = await searchParams
const ctx = await getAuthContext()
const t = await getTranslations("attendance")
const classId = getSearchParam(sp, "classId")
const statusParam = getSearchParam(sp, "status")
@@ -62,13 +59,13 @@ export default async function AdminAttendancePage({
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
<div className="flex items-center justify-between space-y-2">
<div>
<h2 className="text-2xl font-bold tracking-tight"></h2>
<p className="text-muted-foreground"></p>
<h2 className="text-2xl font-bold tracking-tight">{t("title.adminOverview")}</h2>
<p className="text-muted-foreground">{t("description.adminOverview")}</p>
</div>
<Button asChild variant="outline">
<Link href="/teacher/attendance/stats">
<BarChart3 className="mr-2 h-4 w-4" />
{t("actions.stats")}
</Link>
</Button>
</div>
@@ -79,8 +76,8 @@ export default async function AdminAttendancePage({
{result.items.length === 0 && !classId && !status && !date ? (
<EmptyState
title="暂无考勤记录"
description="系统中尚未产生任何考勤记录。"
title={t("list.empty")}
description={t("list.emptyDescription")}
icon={ClipboardList}
/>
) : (

View File

@@ -0,0 +1,27 @@
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
import { Skeleton } from "@/shared/components/ui/skeleton"
export default function Loading() {
return (
<div className="flex h-full flex-col space-y-8 p-8">
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-64" />
</div>
<Card>
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent className="space-y-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-9 w-full" />
</div>
))}
<Skeleton className="h-10 w-32" />
</CardContent>
</Card>
</div>
)
}

View File

@@ -1,16 +1,11 @@
import { notFound } from "next/navigation"
import type { Metadata } from "next"
import type { JSX } from "react"
import { getTranslations } from "next-intl/server"
import { getElectiveCourseById } from "@/modules/elective/data-access"
import { getGrades, getStaffOptions, getSubjectOptions } from "@/modules/school/data-access"
import { ElectiveCourseForm } from "@/modules/elective/components/elective-course-form"
export const metadata: Metadata = {
title: "编辑选修课程 - Next_Edu",
description: "更新选修课程详情",
}
export const dynamic = "force-dynamic"
export default async function EditElectiveCoursePage({
@@ -18,6 +13,7 @@ export default async function EditElectiveCoursePage({
}: {
params: Promise<{ id: string }>
}): Promise<JSX.Element> {
const t = await getTranslations("elective")
const { id } = await params
const [course, subjects, grades, teachers] = await Promise.all([
@@ -32,15 +28,15 @@ export default async function EditElectiveCoursePage({
return (
<div className="flex h-full flex-col space-y-8 p-8">
<div>
<h2 className="text-2xl font-bold tracking-tight"></h2>
<p className="text-muted-foreground"></p>
<h2 className="text-2xl font-bold tracking-tight">{t("title.edit")}</h2>
<p className="text-muted-foreground">{t("description.edit")}</p>
</div>
<ElectiveCourseForm
mode="edit"
course={course}
subjects={subjects}
grades={grades.map((g) => ({ id: g.id, name: g.name }))}
teachers={teachers.map((t) => ({ id: t.id, name: t.name }))}
teachers={teachers.map((teacher) => ({ id: teacher.id, name: teacher.name }))}
backHref="/admin/elective"
/>
</div>

View File

@@ -0,0 +1,27 @@
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
import { Skeleton } from "@/shared/components/ui/skeleton"
export default function Loading() {
return (
<div className="flex h-full flex-col space-y-8 p-8">
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-64" />
</div>
<Card>
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent className="space-y-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-9 w-full" />
</div>
))}
<Skeleton className="h-10 w-32" />
</CardContent>
</Card>
</div>
)
}

View File

@@ -1,17 +1,13 @@
import type { Metadata } from "next"
import type { JSX } from "react"
import { getTranslations } from "next-intl/server"
import { getGrades, getStaffOptions, getSubjectOptions } from "@/modules/school/data-access"
import { ElectiveCourseForm } from "@/modules/elective/components/elective-course-form"
export const metadata: Metadata = {
title: "新建选修课程 - Next_Edu",
description: "创建新的选修课程",
}
export const dynamic = "force-dynamic"
export default async function CreateElectiveCoursePage(): Promise<JSX.Element> {
const t = await getTranslations("elective")
const [subjects, grades, teachers] = await Promise.all([
getSubjectOptions(),
getGrades(),
@@ -21,14 +17,14 @@ export default async function CreateElectiveCoursePage(): Promise<JSX.Element> {
return (
<div className="flex h-full flex-col space-y-8 p-8">
<div>
<h2 className="text-2xl font-bold tracking-tight"></h2>
<p className="text-muted-foreground"></p>
<h2 className="text-2xl font-bold tracking-tight">{t("title.create")}</h2>
<p className="text-muted-foreground">{t("description.create")}</p>
</div>
<ElectiveCourseForm
mode="create"
subjects={subjects}
grades={grades.map((g) => ({ id: g.id, name: g.name }))}
teachers={teachers.map((t) => ({ id: t.id, name: t.name }))}
teachers={teachers.map((teacher) => ({ id: teacher.id, name: teacher.name }))}
backHref="/admin/elective"
/>
</div>

View File

@@ -0,0 +1,27 @@
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
import { Skeleton } from "@/shared/components/ui/skeleton"
export default function Loading() {
return (
<div className="space-y-8 p-8">
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-72" />
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<Card key={i}>
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-8 w-24" />
</CardContent>
</Card>
))}
</div>
</div>
)
}

View File

@@ -1,16 +1,12 @@
import type { Metadata } from "next"
import type { Metadata } from "next"
import type { JSX } from "react"
import { getTranslations } from "next-intl/server"
import { getElectiveCourses } from "@/modules/elective/data-access"
import { ElectiveCourseList } from "@/modules/elective/components/elective-course-list"
import { getSearchParam, type SearchParams } from "@/shared/lib/utils"
import type { ElectiveCourseStatus } from "@/modules/elective/types"
export const metadata: Metadata = {
title: "选修课程 - Next_Edu",
description: "管理选修课程、开放/关闭选课与抽签",
}
export const dynamic = "force-dynamic"
const isValidStatus = (v?: string): v is ElectiveCourseStatus =>
@@ -22,6 +18,7 @@ export default async function AdminElectivePage({
searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
const sp = await searchParams
const t = await getTranslations("elective")
const statusParam = getSearchParam(sp, "status")
const status = isValidStatus(statusParam) ? statusParam : undefined
@@ -30,9 +27,9 @@ export default async function AdminElectivePage({
return (
<div className="flex h-full flex-col space-y-8 p-8">
<div className="space-y-1">
<h2 className="text-2xl font-bold tracking-tight"></h2>
<h2 className="text-2xl font-bold tracking-tight">{t("title.adminList")}</h2>
<p className="text-muted-foreground">
/
{t("description.adminList")}
</p>
</div>
<ElectiveCourseList