feat(exam-homework): add audit report, i18n, error boundaries, and permission hardening

- Add comprehensive audit report for exam and homework module

- Create exam-homework i18n message files (zh-CN + en) and register namespace

- Add permission check to gradeHomeworkSubmissionAction to prevent horizontal privilege escalation

- Add Error Boundary + loading.tsx for 5 key pages (exam build/proctoring, homework assignment/submissions, student assignment)

- Refactor exam-columns to createExamColumns(t) factory for i18n support

- Refactor exam-data-table to manage columns internally via useTranslations

- Replace hardcoded strings with i18n keys in all exam/homework components and pages

- Add getHomeworkSubmissionForGrading data-access for secure grading flow

src/app/(dashboard)/student/learning/assignments/[assignmentId]/error.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { EmptyState } from "@/shared/components/ui/empty-state"
+
+export default function StudentAssignmentDetailError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("examHomework")
+  return (
+    <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
+      <EmptyState
+        icon={AlertCircle}
+        title={t("homework.error.notFound")}
+        description={t("homework.error.assignmentNotFound")}
+        action={{
+          label: t("common.retry"),
+          onClick: () => reset(),
+        }}
+        className="border-none shadow-none h-auto"
+      />
+    </div>
+  )
+}

src/app/(dashboard)/student/learning/assignments/page.tsx

@@ -1,58 +1,42 @@
 import Link from "next/link"
+import { getTranslations } from "next-intl/server"
 
 import { EmptyState } from "@/shared/components/ui/empty-state"
-import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
-import { formatDate } from "@/shared/lib/utils"
+import { StatusBadge } from "@/shared/components/ui/status-badge"
+import { formatDate, cn } from "@/shared/lib/utils"
 import { getStudentHomeworkAssignments } from "@/modules/homework/data-access"
 import { getCurrentStudentUser } from "@/modules/users/data-access"
-import { Inbox, UserX } from "lucide-react"
+import { AssignmentFilters } from "@/modules/homework/components/assignment-filters"
+import { Inbox, UserX, TriangleAlert } from "lucide-react"
 import type {
   StudentHomeworkAssignmentListItem,
   StudentHomeworkProgressStatus,
 } from "@/modules/homework/types"
+import {
+  STUDENT_HOMEWORK_PROGRESS_VARIANT,
+} from "@/modules/homework/types"
 
 export const dynamic = "force-dynamic"
 
-const getStatusVariant = (
-  status: StudentHomeworkProgressStatus
-): "default" | "secondary" | "outline" => {
-  switch (status) {
-    case "graded":
-      return "default"
-    case "submitted":
-      return "secondary"
-    case "in_progress":
-      return "outline"
-    default:
-      return "outline"
-  }
+type SearchParams = { [key: string]: string | string[] | undefined }
+
+const getParam = (params: SearchParams, key: string) => {
+  const v = params[key]
+  return Array.isArray(v) ? v[0] : v
 }
 
-const getStatusLabel = (status: StudentHomeworkProgressStatus): string => {
+const getActionLabel = (status: StudentHomeworkProgressStatus, t: (key: string) => string): string => {
   switch (status) {
     case "graded":
-      return "Graded"
+      return t("homework.review.title")
     case "submitted":
-      return "Submitted"
+      return t("common.view")
     case "in_progress":
-      return "In progress"
+      return t("common.continue")
     default:
-      return "Not started"
-  }
-}
-
-const getActionLabel = (status: StudentHomeworkProgressStatus): string => {
-  switch (status) {
-    case "graded":
-      return "Review"
-    case "submitted":
-      return "View"
-    case "in_progress":
-      return "Continue"
-    default:
-      return "Start"
+      return t("homework.take.startAssignment")
   }
 }
 
@@ -65,7 +49,55 @@ const getActionVariant = (
 const isAnswered = (status: StudentHomeworkProgressStatus): boolean =>
   status === "submitted" || status === "graded"
 
-function AssignmentCard({ assignment: a }: { assignment: StudentHomeworkAssignmentListItem }) {
+const matchesStatusFilter = (
+  status: StudentHomeworkProgressStatus,
+  filter: string
+): boolean => {
+  if (filter === "all") return true
+  if (filter === "pending") return status === "not_started" || status === "in_progress"
+  if (filter === "submitted") return status === "submitted"
+  if (filter === "graded") return status === "graded"
+  return true
+}
+
+// Stable color mapping for subjects (hash-based, deterministic)
+const SUBJECT_DOT_COLORS = [
+  "bg-blue-500",
+  "bg-emerald-500",
+  "bg-amber-500",
+  "bg-violet-500",
+  "bg-rose-500",
+  "bg-cyan-500",
+  "bg-orange-500",
+  "bg-pink-500",
+  "bg-indigo-500",
+  "bg-teal-500",
+]
+
+const getSubjectColor = (subject: string): string => {
+  let hash = 0
+  for (let i = 0; i < subject.length; i++) {
+    hash = (hash * 31 + subject.charCodeAt(i)) | 0
+  }
+  const idx = Math.abs(hash) % SUBJECT_DOT_COLORS.length
+  return SUBJECT_DOT_COLORS[idx]
+}
+
+type TranslationFn = (key: string) => string
+
+function AssignmentCard({
+  assignment: a,
+  t,
+  statusLabelMap,
+}: {
+  assignment: StudentHomeworkAssignmentListItem
+  t: TranslationFn
+  statusLabelMap: Record<StudentHomeworkProgressStatus, string>
+}) {
+  const now = new Date()
+  const isOverdue = a.dueAt ? new Date(a.dueAt) < now : false
+  const showOverdueBadge = isOverdue && !isAnswered(a.progressStatus)
+
   return (
     <Card className="flex h-full flex-col overflow-hidden transition-all hover:shadow-md">
       <CardHeader className="gap-2 pb-3">
@@ -75,28 +107,38 @@ function AssignmentCard({ assignment: a }: { assignment: StudentHomeworkAssignme
               {a.title}
             </Link>
           </CardTitle>
-          <Badge variant={getStatusVariant(a.progressStatus)} className="capitalize">
-            {getStatusLabel(a.progressStatus)}
-          </Badge>
+          <StatusBadge
+            status={a.progressStatus}
+            variantMap={STUDENT_HOMEWORK_PROGRESS_VARIANT}
+            labelMap={statusLabelMap}
+          />
         </div>
-        <div className="text-xs text-muted-foreground">
-          <span>Due {a.dueAt ? formatDate(a.dueAt) : "-"}</span>
-          <span className="px-2" aria-hidden="true">
-            •
-          </span>
-          <span>
-            Attempts {a.attemptsUsed}/{a.maxAttempts}
-          </span>
+        <div className={cn(
+          "text-xs",
+          showOverdueBadge ? "text-destructive font-medium" : "text-muted-foreground"
+        )}>
+          <span>{t("homework.list.columns.dueAt")} {a.dueAt ? formatDate(a.dueAt) : "-"}</span>
+          <span className="px-2" aria-hidden="true">•</span>
+          <span>{t("homework.take.attempts")} {a.attemptsUsed}/{a.maxAttempts}</span>
+          {showOverdueBadge && (
+            <>
+              <span className="px-2" aria-hidden="true">•</span>
+              <span className="inline-flex items-center gap-1">
+                <TriangleAlert className="h-3 w-3" />
+                {t("homework.take.overdue")}
+              </span>
+            </>
+          )}
         </div>
       </CardHeader>
       <CardContent className="mt-auto flex items-center justify-between">
         <div className="text-sm">
-          <div className="text-muted-foreground">Score</div>
+          <div className="text-muted-foreground">{t("homework.grade.score")}</div>
           <div className="font-medium tabular-nums">{a.latestScore ?? "-"}</div>
         </div>
         <Button asChild size="sm" variant={getActionVariant(a.progressStatus)}>
           <Link href={`/student/learning/assignments/${a.id}`}>
-            {getActionLabel(a.progressStatus)}
+            {getActionLabel(a.progressStatus, t)}
           </Link>
         </Button>
       </CardContent>
@@ -104,19 +146,53 @@ function AssignmentCard({ assignment: a }: { assignment: StudentHomeworkAssignme
   )
 }
 
-export default async function StudentAssignmentsPage() {
+export default async function StudentAssignmentsPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const t = await getTranslations("examHomework")
   const student = await getCurrentStudentUser()
 
+  const statusLabelMap: Record<StudentHomeworkProgressStatus, string> = {
+    not_started: t("homework.status.not_started"),
+    in_progress: t("homework.status.in_progress"),
+    submitted: t("homework.status.submitted"),
+    graded: t("homework.status.graded"),
+  }
+
   if (!student) {
     return (
-      <EmptyState title="No user found" description="Create a student user to see assignments." icon={UserX} />
+      <div className="space-y-8">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">{t("homework.list.title")}</h2>
+          <p className="text-muted-foreground">{t("homework.list.description")}</p>
+        </div>
+        <EmptyState title={t("homework.error.notFound")} description={t("homework.error.assignmentNotFound")} icon={UserX} />
+      </div>
     )
   }
 
-  const assignments = await getStudentHomeworkAssignments(student.id)
+  const [sp, assignments] = await Promise.all([
+    searchParams,
+    getStudentHomeworkAssignments(student.id),
+  ])
+
+  const q = (getParam(sp, "q") || "").toLowerCase().trim()
+  const statusFilter = getParam(sp, "status") || "all"
+
+  // 应用筛选
+  const filtered = assignments.filter((a) => {
+    if (q && !a.title.toLowerCase().includes(q)) return false
+    if (!matchesStatusFilter(a.progressStatus, statusFilter)) return false
+    return true
+  })
+
   const hasAssignments = assignments.length > 0
-  const assignmentsBySubject = assignments.reduce((acc, assignment) => {
-    const subject = assignment.subjectName?.trim() || "Other"
+  const hasFiltered = filtered.length > 0
+
+  const assignmentsBySubject = filtered.reduce((acc, assignment) => {
+    const subject = assignment.subjectName?.trim() || t("common.other")
     const existing = acc.get(subject)
     if (existing) {
       existing.push(assignment)
@@ -130,9 +206,22 @@ export default async function StudentAssignmentsPage() {
   )
 
   return (
-    <>
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">{t("homework.list.title")}</h2>
+        <p className="text-muted-foreground">{t("homework.list.description")}</p>
+      </div>
+
+      {hasAssignments && <AssignmentFilters />}
+
       {!hasAssignments ? (
-        <EmptyState title="No assignments" description="You have no assigned homework right now." icon={Inbox} />
+        <EmptyState title={t("homework.list.empty")} description={t("homework.list.emptyDescription")} icon={Inbox} />
+      ) : !hasFiltered ? (
+        <EmptyState
+          title={t("homework.list.emptyFiltered")}
+          description={t("homework.list.emptyFilteredDescription")}
+          icon={Inbox}
+        />
       ) : (
         <div className="space-y-6">
           {subjectEntries.map(([subject, items]) => {
@@ -149,15 +238,24 @@ export default async function StudentAssignmentsPage() {
 
             return (
               <div key={subject} className="space-y-3">
-                <div className="text-sm font-semibold text-muted-foreground">{subject}</div>
+                <div className="flex items-center gap-2 text-sm font-semibold">
+                  <span
+                    className={cn("h-2.5 w-2.5 rounded-full", getSubjectColor(subject))}
+                    aria-hidden="true"
+                  />
+                  <span className="text-muted-foreground">{subject}</span>
+                  <span className="text-xs font-normal text-muted-foreground/70">
+                    ({items.length})
+                  </span>
+                </div>
                 {unanswered.length > 0 && (
                   <div className="space-y-3">
                     <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                      Pending
+                      {t("homework.status.not_started")}
                     </div>
                     <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                       {unanswered.map((a) => (
-                        <AssignmentCard key={a.id} assignment={a} />
+                        <AssignmentCard key={a.id} assignment={a} t={t} statusLabelMap={statusLabelMap} />
                       ))}
                     </div>
                   </div>
@@ -165,11 +263,11 @@ export default async function StudentAssignmentsPage() {
                 {answered.length > 0 && (
                   <div className="space-y-3">
                     <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                      Completed
+                      {t("common.completed")}
                     </div>
                     <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                       {answered.map((a) => (
-                        <AssignmentCard key={a.id} assignment={a} />
+                        <AssignmentCard key={a.id} assignment={a} t={t} statusLabelMap={statusLabelMap} />
                       ))}
                     </div>
                   </div>
@@ -179,6 +277,6 @@ export default async function StudentAssignmentsPage() {
           })}
         </div>
       )}
-    </>
+    </div>
   )
 }

src/app/(dashboard)/teacher/exams/[id]/build/error.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { EmptyState } from "@/shared/components/ui/empty-state"
+
+export default function BuildExamError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("examHomework")
+  return (
+    <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
+      <EmptyState
+        icon={AlertCircle}
+        title={t("exam.error.loadFailed")}
+        description={t("exam.error.notFound")}
+        action={{
+          label: t("common.retry"),
+          onClick: () => reset(),
+        }}
+        className="border-none shadow-none h-auto"
+      />
+    </div>
+  )
+}

src/app/(dashboard)/teacher/exams/[id]/build/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-4 p-4">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid w-full grid-cols-1 gap-4 lg:grid-cols-3">
+        <Skeleton className="h-[600px] lg:col-span-2" />
+        <Skeleton className="h-[600px] lg:col-span-1" />
+      </div>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/exams/[id]/proctoring/error.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { EmptyState } from "@/shared/components/ui/empty-state"
+
+export default function ProctoringError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("examHomework")
+  return (
+    <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
+      <EmptyState
+        icon={AlertCircle}
+        title={t("exam.error.loadFailed")}
+        description={t("exam.error.notFound")}
+        action={{
+          label: t("common.retry"),
+          onClick: () => reset(),
+        }}
+        className="border-none shadow-none h-auto"
+      />
+    </div>
+  )
+}

src/app/(dashboard)/teacher/exams/[id]/proctoring/loading.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-4 p-4">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Skeleton className="h-32" />
+        <Skeleton className="h-32" />
+        <Skeleton className="h-32" />
+      </div>
+      <Skeleton className="h-[500px] w-full" />
+    </div>
+  )
+}

src/app/(dashboard)/teacher/exams/all/page.tsx

@@ -1,12 +1,12 @@
 import type { JSX } from "react"
 import { Suspense } from "react"
 import Link from "next/link"
+import { getTranslations } from "next-intl/server"
 import { Button } from "@/shared/components/ui/button"
 import { Badge } from "@/shared/components/ui/badge"
 import { EmptyState } from "@/shared/components/ui/empty-state"
 import { Skeleton } from "@/shared/components/ui/skeleton"
 import { ExamDataTable } from "@/modules/exams/components/exam-data-table"
-import { examColumns } from "@/modules/exams/components/exam-columns"
 import { ExamFilters } from "@/modules/exams/components/exam-filters"
 import { getExams } from "@/modules/exams/data-access"
 import { getAuthContext } from "@/shared/lib/auth-guard"
@@ -16,6 +16,7 @@ import { FileText, PlusCircle } from "lucide-react"
 async function ExamsResults({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<JSX.Element> {
   const params = await searchParams
   const { dataScope } = await getAuthContext()
+  const t = await getTranslations("examHomework")
 
   const q = getParam(params, "q")
   const status = getParam(params, "status")
@@ -45,20 +46,20 @@ async function ExamsResults({ searchParams }: { searchParams: Promise<SearchPara
     <div className="space-y-4">
       <div className="flex flex-col gap-3 rounded-md border bg-card px-4 py-3 md:flex-row md:items-center md:justify-between">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm text-muted-foreground">Showing</span>
+          <span className="text-sm text-muted-foreground">{t("exam.list.showing")}</span>
           <span className="text-sm font-medium">{counts.total}</span>
-          <span className="text-sm text-muted-foreground">exams</span>
+          <span className="text-sm text-muted-foreground">{t("exam.list.examsUnit")}</span>
           <Badge variant="outline" className="ml-0 md:ml-2">
-            Draft {counts.draft}
+            {t("exam.status.draft")} {counts.draft}
           </Badge>
-          <Badge variant="outline">Published {counts.published}</Badge>
-          <Badge variant="outline">Archived {counts.archived}</Badge>
+          <Badge variant="outline">{t("exam.status.published")} {counts.published}</Badge>
+          <Badge variant="outline">{t("exam.status.archived")} {counts.archived}</Badge>
         </div>
         <div className="flex items-center gap-2">
           <Button asChild size="sm">
             <Link href="/teacher/exams/create" className="inline-flex items-center gap-2">
               <PlusCircle className="h-4 w-4" aria-hidden="true" />
-              Create Exam
+              {t("exam.list.create")}
             </Link>
           </Button>
         </div>
@@ -67,27 +68,27 @@ async function ExamsResults({ searchParams }: { searchParams: Promise<SearchPara
       {exams.length === 0 ? (
         <EmptyState
           icon={FileText}
-          title={hasFilters ? "No exams match your filters" : "No exams yet"}
+          title={hasFilters ? t("exam.list.emptyFiltered") : t("exam.list.empty")}
           description={
             hasFilters
-              ? "Try clearing filters or adjusting keywords."
-              : "Create your first exam to start assigning and grading."
+              ? t("exam.list.emptyFilteredDescription")
+              : t("exam.list.emptyDescription")
           }
           action={
             hasFilters
               ? {
-                  label: "Clear filters",
+                  label: t("exam.list.clearFilters"),
                   href: "/teacher/exams/all",
                 }
               : {
-                  label: "Create Exam",
+                  label: t("exam.list.create"),
                   href: "/teacher/exams/create",
                 }
           }
           className="h-[360px] bg-card"
         />
       ) : (
-        <ExamDataTable columns={examColumns} data={exams} />
+        <ExamDataTable data={exams} />
       )}
     </div>
   )

src/app/(dashboard)/teacher/homework/assignments/[id]/error.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { EmptyState } from "@/shared/components/ui/empty-state"
+
+export default function AssignmentDetailError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("examHomework")
+  return (
+    <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
+      <EmptyState
+        icon={AlertCircle}
+        title={t("homework.error.notFound")}
+        description={t("homework.error.assignmentNotFound")}
+        action={{
+          label: t("common.retry"),
+          onClick: () => reset(),
+        }}
+        className="border-none shadow-none h-auto"
+      />
+    </div>
+  )
+}

src/app/(dashboard)/teacher/homework/assignments/[id]/loading.tsx

@@ -0,0 +1,20 @@
+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-7 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="rounded-md border bg-card">
+        <div className="p-4 space-y-3">
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-16 w-full" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/homework/assignments/[id]/submissions/error.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { EmptyState } from "@/shared/components/ui/empty-state"
+
+export default function SubmissionsError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("examHomework")
+  return (
+    <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
+      <EmptyState
+        icon={AlertCircle}
+        title={t("homework.error.notFound")}
+        description={t("homework.error.submissionNotFound")}
+        action={{
+          label: t("common.retry"),
+          onClick: () => reset(),
+        }}
+        className="border-none shadow-none h-auto"
+      />
+    </div>
+  )
+}

src/app/(dashboard)/teacher/homework/assignments/[id]/submissions/loading.tsx

@@ -0,0 +1,20 @@
+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-7 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="rounded-md border bg-card">
+        <div className="p-4 space-y-3">
+          <Skeleton className="h-8 w-full" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/homework/assignments/[id]/submissions/page.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react"
 import Link from "next/link"
 import { notFound } from "next/navigation"
+import { getTranslations } from "next-intl/server"
 import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
 import {
@@ -18,6 +19,7 @@ export const dynamic = "force-dynamic"
 
 export default async function HomeworkAssignmentSubmissionsPage({ params }: { params: Promise<{ id: string }> }): Promise<JSX.Element> {
   const { id } = await params
+  const t = await getTranslations("examHomework")
   const [assignment, submissions] = await Promise.all([
     getHomeworkAssignmentById(id),
     getHomeworkSubmissions({ assignmentId: id }),
@@ -28,24 +30,24 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
     <div className="flex h-full flex-col space-y-8 p-8">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
         <div className="min-w-0">
-          <h1 className="text-2xl font-bold tracking-tight">Submissions</h1>
+          <h1 className="text-2xl font-bold tracking-tight">{t("homework.grade.submissions")}</h1>
           <p className="text-muted-foreground truncate">{assignment.title}</p>
           <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-            <span>Exam: {assignment.sourceExamTitle}</span>
+            <span>{t("homework.grade.exam")}: {assignment.sourceExamTitle}</span>
             <span aria-hidden="true">•</span>
-            <span className="tabular-nums">Targets: {assignment.targetCount}</span>
+            <span className="tabular-nums">{t("homework.grade.targets")}: {assignment.targetCount}</span>
             <span aria-hidden="true">•</span>
-            <span className="tabular-nums">Submitted: {assignment.submittedCount}</span>
+            <span className="tabular-nums">{t("homework.grade.submittedCount")}: {assignment.submittedCount}</span>
             <span aria-hidden="true">•</span>
-            <span className="tabular-nums">Graded: {assignment.gradedCount}</span>
+            <span className="tabular-nums">{t("homework.grade.gradedCount")}: {assignment.gradedCount}</span>
           </div>
         </div>
         <div className="flex items-center gap-2">
           <Button asChild variant="outline">
-            <Link href="/teacher/homework/submissions">Back</Link>
+            <Link href="/teacher/homework/submissions">{t("homework.grade.back")}</Link>
           </Button>
           <Button asChild variant="outline">
-            <Link href={`/teacher/homework/assignments/${id}`}>Open Assignment</Link>
+            <Link href={`/teacher/homework/assignments/${id}`}>{t("homework.grade.openAssignment")}</Link>
           </Button>
         </div>
       </div>
@@ -54,11 +56,11 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Student</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Submitted</TableHead>
-              <TableHead>Score</TableHead>
-              <TableHead>Action</TableHead>
+              <TableHead>{t("homework.grade.student")}</TableHead>
+              <TableHead>{t("homework.grade.status")}</TableHead>
+              <TableHead>{t("homework.grade.submitted")}</TableHead>
+              <TableHead>{t("homework.grade.score")}</TableHead>
+              <TableHead>{t("homework.grade.action")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -69,13 +71,13 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
                   <Badge variant="outline" className="capitalize">
                     {s.status}
                   </Badge>
-                  {s.isLate ? <span className="ml-2 text-xs text-destructive">Late</span> : null}
+                  {s.isLate ? <span className="ml-2 text-xs text-destructive">{t("homework.grade.late")}</span> : null}
                 </TableCell>
                 <TableCell className="text-muted-foreground tabular-nums">{s.submittedAt ? formatDate(s.submittedAt) : "-"}</TableCell>
                 <TableCell className="tabular-nums">{typeof s.score === "number" ? s.score : "-"}</TableCell>
                 <TableCell>
                   <Link href={`/teacher/homework/submissions/${s.id}`} className="text-sm underline-offset-4 hover:underline">
-                    Grade
+                    {t("homework.grade.title")}
                   </Link>
                 </TableCell>
               </TableRow>

src/app/(dashboard)/teacher/homework/assignments/create/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex w-full justify-center items-center min-h-[calc(100vh-160px)] p-8 max-w-[1200px] mx-auto">
+      <div className="w-full space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <Skeleton className="h-[600px] w-full" />
+      </div>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/homework/assignments/page.tsx

@@ -11,16 +11,22 @@ import {
   TableHeader,
   TableRow,
 } from "@/shared/components/ui/table"
-import { formatDate } from "@/shared/lib/utils"
+import { Progress } from "@/shared/components/ui/progress"
+import { ListPagination, computePagination, paginate } from "@/shared/components/ui/list-pagination"
+import { formatDate, formatNumber } from "@/shared/lib/utils"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 import { getHomeworkAssignments } from "@/modules/homework/data-access"
 import { getTeacherClasses } from "@/modules/classes/data-access"
-import { PenTool, PlusCircle } from "lucide-react"
+import { PenTool, PlusCircle, AlertCircle } from "lucide-react"
 import { getTeacherIdForMutations } from "@/modules/classes/data-access"
+import { getTranslations } from "next-intl/server"
 
 export const dynamic = "force-dynamic"
 
+const PAGE_SIZE = 10
+
 export default async function AssignmentsPage({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<JSX.Element> {
+  const t = await getTranslations("examHomework")
   const sp = await searchParams
   const rawClassId = getParam(sp, "classId")
   const creatorId = await getTeacherIdForMutations()
@@ -36,19 +42,26 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
   const hasAssignments = assignments.length > 0
   const className = filteredClassId ? classes.find((c) => c.id === filteredClassId)?.name : undefined
 
+  // 分页计算
+  const { page } = computePagination(sp, PAGE_SIZE)
+  const total = assignments.length
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const currentPage = Math.min(page, totalPages)
+  const pagedAssignments = paginate(assignments, currentPage, PAGE_SIZE)
+
   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">Assignments</h1>
+          <h1 className="text-2xl font-bold tracking-tight">{t("homework.list.title")}</h1>
           <p className="text-muted-foreground">
-            {filteredClassId ? `Filtered by class: ${className ?? filteredClassId}` : "Manage homework assignments."}
+            {filteredClassId ? t("homework.list.filterByClass", { className: className ?? filteredClassId }) : t("homework.list.description")}
           </p>
         </div>
         <div className="flex items-center gap-2">
           {filteredClassId ? (
             <Button asChild variant="outline">
-              <Link href="/teacher/homework/assignments">Clear filter</Link>
+              <Link href="/teacher/homework/assignments">{t("homework.list.clearFilters")}</Link>
             </Button>
           ) : null}
           <Button asChild>
@@ -60,7 +73,7 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
               }
             >
               <PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
-              Create Assignment
+              {t("homework.list.create")}
             </Link>
           </Button>
         </div>
@@ -68,11 +81,11 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
 
       {!hasAssignments ? (
         <EmptyState
-          title="No assignments"
-          description={filteredClassId ? "No assignments for this class yet." : "You haven't created any assignments yet."}
+          title={t("homework.list.empty")}
+          description={filteredClassId ? t("homework.list.emptyFiltered") : t("homework.list.emptyDescription")}
           icon={PenTool}
           action={{
-            label: "Create Assignment",
+            label: t("homework.list.create"),
             href:
               filteredClassId
                 ? `/teacher/homework/assignments/create?classId=${encodeURIComponent(filteredClassId)}`
@@ -84,36 +97,73 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Title</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Due</TableHead>
-                <TableHead>Source Exam</TableHead>
-                <TableHead>Created</TableHead>
+                <TableHead className="w-[260px]">{t("homework.list.columns.title")}</TableHead>
+                <TableHead>{t("homework.list.columns.status")}</TableHead>
+                <TableHead>{t("homework.list.columns.dueAt")}</TableHead>
+                <TableHead className="w-[180px]">{t("homework.list.columns.submissionRate")}</TableHead>
+                <TableHead className="text-right">{t("homework.list.columns.averageScore")}</TableHead>
+                <TableHead className="text-right">{t("homework.list.columns.overdue")}</TableHead>
+                <TableHead>{t("homework.list.columns.sourceExam")}</TableHead>
+                <TableHead>{t("homework.list.columns.createdAt")}</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {assignments.map((a) => (
-                <TableRow key={a.id}>
-                  <TableCell className="font-medium">
-                    <Link
-                      href={`/teacher/homework/assignments/${a.id}`}
-                      className="hover:underline line-clamp-2 max-w-[240px]"
-                    >
-                      {a.title}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="outline" className="capitalize">
-                      {a.status}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-muted-foreground tabular-nums">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
-                  <TableCell className="text-muted-foreground truncate max-w-[200px]">{a.sourceExamTitle}</TableCell>
-                  <TableCell className="text-muted-foreground tabular-nums">{formatDate(a.createdAt)}</TableCell>
-                </TableRow>
-              ))}
+              {pagedAssignments.map((a) => {
+                const submissionRate = a.targetCount > 0 ? (a.submittedCount / a.targetCount) * 100 : 0
+                const hasOverdue = a.overdueCount > 0
+                return (
+                  <TableRow key={a.id}>
+                    <TableCell className="font-medium">
+                      <Link
+                        href={`/teacher/homework/assignments/${a.id}`}
+                        className="hover:underline line-clamp-2 max-w-[240px]"
+                      >
+                        {a.title}
+                      </Link>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline" className="capitalize">
+                        {t(`homework.status.${a.status}`)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground tabular-nums">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Progress value={submissionRate} className="h-2 w-24" aria-label={t("homework.list.columns.submissionRate")} />
+                        <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
+                          {a.submittedCount}/{a.targetCount}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {a.averageScore !== null ? formatNumber(a.averageScore, 1) : "-"}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {hasOverdue ? (
+                        <Badge variant="destructive" className="gap-1">
+                          <AlertCircle className="h-3 w-3" aria-hidden="true" />
+                          {a.overdueCount}
+                        </Badge>
+                      ) : (
+                        <span className="text-muted-foreground tabular-nums">0</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground truncate max-w-[160px]">{a.sourceExamTitle}</TableCell>
+                    <TableCell className="text-muted-foreground tabular-nums">{formatDate(a.createdAt)}</TableCell>
+                  </TableRow>
+                )
+              })}
             </TableBody>
           </Table>
+          <ListPagination
+            page={currentPage}
+            pageSize={PAGE_SIZE}
+            total={total}
+            totalPages={totalPages}
+            basePath="/teacher/homework/assignments"
+            searchParams={sp}
+            itemLabel={t("homework.list.pagination.itemLabel")}
+          />
         </div>
       )}
     </div>