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>
2026-06-22 17:33:29 +08:00
parent 76966581b8
commit f62b8c0f86
46 changed files with 1748 additions and 545 deletions
--- a/src/app/(dashboard)/teacher/attendance/loading.tsx
+++ b/src/app/(dashboard)/teacher/attendance/loading.tsx
@@ -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>
+  )
+}
--- a/src/app/(dashboard)/teacher/attendance/page.tsx
+++ b/src/app/(dashboard)/teacher/attendance/page.tsx
@@ -1,8 +1,10 @@
 import type { JSX } from "react"
 import Link from "next/link"
 import { PlusCircle, 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"
+import { ListPagination, computePagination, paginate } from "@/shared/components/ui/list-pagination"
 import { getAuthContext } from "@/shared/lib/auth-guard"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 import { getTeacherClasses } from "@/modules/classes/data-access"
@@ -25,6 +27,8 @@ function parseAttendanceStatus(v?: string): AttendanceStatus | undefined {
  return v && VALID_STATUSES.has(v) ? (v as AttendanceStatus) : undefined
 }

+const PAGE_SIZE = 20
+
 export default async function TeacherAttendancePage({
  searchParams,
 }: {
@@ -32,6 +36,7 @@ export default async function TeacherAttendancePage({
 }): Promise<JSX.Element> {
  const sp = await searchParams
  const ctx = await getAuthContext()
+  const t = await getTranslations("attendance")

  const classId = getParam(sp, "classId")
  const status = getParam(sp, "status")
@@ -49,24 +54,32 @@ export default async function TeacherAttendancePage({
  ])
  const classOptions = classes.map((c) => ({ id: c.id, name: c.name }))

+  // 分页计算
+  const { page } = computePagination(sp, PAGE_SIZE)
+  const total = result.items.length
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const currentPage = Math.min(page, totalPages)
+  const pagedRecords = paginate(result.items, currentPage, PAGE_SIZE)
+  const hasFilters = Boolean(classId || status || date)
+
  return (
    <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>
-          <h1 className="text-2xl font-bold tracking-tight">Attendance</h1>
-          <p className="text-muted-foreground">Manage student attendance records.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.teacherRecords")}</h1>
+          <p className="text-muted-foreground">{t("description.teacherRecords")}</p>
        </div>
        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href="/teacher/attendance/stats">
              <BarChart3 className="mr-2 h-4 w-4" aria-hidden="true" />
-              Statistics
+              {t("actions.stats")}
            </Link>
          </Button>
          <Button asChild>
            <Link href="/teacher/attendance/sheet">
              <PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
-              Take Attendance
+              {t("actions.record")}
            </Link>
          </Button>
        </div>
@@ -74,18 +87,31 @@ export default async function TeacherAttendancePage({

      <AttendanceFilters classes={classOptions} />

-      {result.items.length === 0 && !classId && !status && !date ? (
+      {result.items.length === 0 && !hasFilters ? (
        <EmptyState
-          title="No attendance records"
-          description="Start by taking attendance for your classes."
+          title={t("list.empty")}
+          description={t("list.emptyTeacherDescription")}
          icon={ClipboardList}
          action={{
-            label: "Take Attendance",
+            label: t("actions.record"),
            href: "/teacher/attendance/sheet",
          }}
        />
      ) : (
-        <AttendanceRecordList records={result.items} />
+        <div className="space-y-4">
+          <AttendanceRecordList records={pagedRecords} />
+          {total > 0 ? (
+            <ListPagination
+              page={currentPage}
+              pageSize={PAGE_SIZE}
+              total={total}
+              totalPages={totalPages}
+              basePath="/teacher/attendance"
+              searchParams={sp}
+              itemLabel={t("stats.totalRecords")}
+            />
+          ) : null}
+        </div>
      )}
    </div>
  )
--- a/src/app/(dashboard)/teacher/attendance/sheet/loading.tsx
+++ b/src/app/(dashboard)/teacher/attendance/sheet/loading.tsx
@@ -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="h-full flex-1 flex-col space-y-8 p-8 md:flex">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <Card>
+        <CardHeader className="space-y-2">
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex gap-3">
+            <Skeleton className="h-9 w-48" />
+            <Skeleton className="h-9 w-40" />
+          </div>
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
--- a/src/app/(dashboard)/teacher/attendance/sheet/page.tsx
+++ b/src/app/(dashboard)/teacher/attendance/sheet/page.tsx
@@ -1,4 +1,5 @@
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 import { getTeacherClasses } from "@/modules/classes/data-access"
 import { getClassStudentsForAttendance } from "@/modules/attendance/data-access"
 import { AttendanceSheet } from "@/modules/attendance/components/attendance-sheet"
@@ -11,6 +12,7 @@ export default async function AttendanceSheetPage({
 }: {
  searchParams: Promise<SearchParams>
 }): Promise<JSX.Element> {
+  const t = await getTranslations("attendance")
  const sp = await searchParams

  const defaultClassId = getParam(sp, "classId")
@@ -27,10 +29,8 @@ export default async function AttendanceSheetPage({
  return (
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Take Attendance</h1>
-        <p className="text-muted-foreground">
-          Select a class and date, then mark attendance for each student.
-        </p>
+        <h1 className="text-2xl font-bold tracking-tight">{t("title.sheet")}</h1>
+        <p className="text-muted-foreground">{t("sheet.description")}</p>
      </div>

      <AttendanceSheet
--- a/src/app/(dashboard)/teacher/attendance/stats/loading.tsx
+++ b/src/app/(dashboard)/teacher/attendance/stats/loading.tsx
@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <Skeleton className="h-10 w-full max-w-md" />
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 8 }).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>
+  )
+}
--- a/src/app/(dashboard)/teacher/attendance/stats/page.tsx
+++ b/src/app/(dashboard)/teacher/attendance/stats/page.tsx
@@ -1,4 +1,5 @@
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 import { getTeacherClasses } from "@/modules/classes/data-access"
 import { getClassAttendanceStats } from "@/modules/attendance/data-access-stats"
 import { AttendanceStatsCard } from "@/modules/attendance/components/attendance-stats-card"
@@ -15,6 +16,7 @@ export default async function AttendanceStatsPage({
 }: {
  searchParams: Promise<SearchParams>
 }): Promise<JSX.Element> {
+  const t = await getTranslations("attendance")
  const sp = await searchParams

  const classId = getParam(sp, "classId")
@@ -27,12 +29,12 @@ export default async function AttendanceStatsPage({
    return (
      <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
        <div>
-          <h1 className="text-2xl font-bold tracking-tight">Attendance Statistics</h1>
-          <p className="text-muted-foreground">View class attendance statistics.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.teacherStats")}</h1>
+          <p className="text-muted-foreground">{t("description.teacherStats")}</p>
        </div>
        <EmptyState
-          title="No classes"
-          description="You don't have any classes yet."
+          title={t("stats.noClasses")}
+          description={t("stats.noClassesDescription")}
          icon={BarChart3}
          className="border-none shadow-none"
        />
@@ -53,8 +55,8 @@ export default async function AttendanceStatsPage({
  return (
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Attendance Statistics</h1>
-        <p className="text-muted-foreground">View class attendance statistics and trends.</p>
+        <h1 className="text-2xl font-bold tracking-tight">{t("title.teacherStats")}</h1>
+        <p className="text-muted-foreground">{t("description.teacherStats")}</p>
      </div>

      <AttendanceStatsClassSelector
@@ -68,14 +70,14 @@ export default async function AttendanceStatsPage({
        <>
          <AttendanceStatsCard stats={summary.stats} />
          <div>
-            <h2 className="mb-4 text-lg font-semibold">Student Records</h2>
+            <h2 className="mb-4 text-lg font-semibold">{t("stats.studentRecords")}</h2>
            <AttendanceRecordList records={summary.studentRecords} />
          </div>
        </>
      ) : (
        <EmptyState
-          title="No data"
-          description="No attendance data available for this class."
+          title={t("stats.noData")}
+          description={t("stats.noDataDescription")}
          icon={BarChart3}
          className="border-none shadow-none"
        />