feat(app): add error/loading boundaries across all dashboard routes and new routes

- Add error.tsx and loading.tsx boundaries for admin, parent, student, teacher routes - Add admin announcements edit, audit-logs overview, curriculum-map, invitation-codes, permissions, questions, roles routes - Add admin elective detail and components, files, course-plans, users, scheduling boundaries - Add messages group-compose route - Add parent course-plans, elective, grades report-card, practice routes - Add student course-plans, elective detail, error-book dialogs, grades report-card, learning study-path, leave, schedule boundaries - Add teacher attendance report, classes boundaries, course-plans boundaries, elective, exams analytics/edit-rich/all/create/new, grades report-card, homework boundaries, leave, lesson-plans calendar - Add auth loading, onboarding loading, api cron
2026-07-03 10:26:25 +08:00
parent e9a5264fe7
commit 21142f9b99
280 changed files with 7137 additions and 1855 deletions
--- a/src/app/(dashboard)/teacher/grades/analytics/loading.tsx
+++ b/src/app/(dashboard)/teacher/grades/analytics/loading.tsx
@@ -1,7 +1,8 @@
+import type { JSX } from "react"
 import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
 import { Skeleton } from "@/shared/components/ui/skeleton"

-export default function Loading() {
+export default function Loading(): JSX.Element {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
--- a/src/app/(dashboard)/teacher/grades/analytics/page.tsx
+++ b/src/app/(dashboard)/teacher/grades/analytics/page.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from "react"
 import Link from "next/link"
 import { BarChart3, ArrowLeft } from "lucide-react"
+import { getTranslations } from "next-intl/server"

 import { Button } from "@/shared/components/ui/button"
 import { EmptyState } from "@/shared/components/ui/empty-state"
@@ -12,7 +13,7 @@ import { getGrades } from "@/modules/school/data-access"
 import { getSubjectOptions } from "@/modules/school/data-access"

 import {
-  getClassComparison,
+  getClassComparisonWithSignificance,
  getExamOptionsForGrades,
  getGradeDistribution,
  getGradeTrend,
@@ -23,7 +24,9 @@ import { ClassComparisonChart } from "@/modules/grades/components/class-comparis
 import { SubjectComparisonChart } from "@/modules/grades/components/subject-comparison-chart"
 import { GradeDistributionChart } from "@/modules/grades/components/grade-distribution-chart"
 import { AnalyticsFilters } from "@/modules/grades/components/analytics-filters"
-import { WidgetBoundary } from "@/modules/grades/components/widget-boundary"
+import { KnowledgePointMasteryChart } from "@/modules/grades/components/knowledge-point-mastery-chart"
+import { getClassMasterySummary } from "@/modules/diagnostic/data-access"
+import { WidgetBoundary } from "@/shared/components/widget-boundary"

 export const dynamic = "force-dynamic"

@@ -34,6 +37,7 @@ export default async function GradeAnalyticsPage({
 }): Promise<JSX.Element> {
  const sp = await searchParams
  const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
+  const t = await getTranslations("grades")

  const classId = getParam(sp, "classId")
  const subjectId = getParam(sp, "subjectId")
@@ -52,14 +56,12 @@ export default async function GradeAnalyticsPage({
    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">成绩分析</h1>
-          <p className="text-muted-foreground">
-            趋势分析、班级对比与分数分布。
-          </p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.analytics")}</h1>
+          <p className="text-muted-foreground">{t("page.analytics.description")}</p>
        </div>
        <EmptyState
-          title="暂无班级"
-          description="您还没有任何班级。"
+          title={t("page.analytics.noClassesTitle")}
+          description={t("page.analytics.noClassesDescription")}
          icon={BarChart3}
          className="border-none shadow-none"
        />
@@ -77,59 +79,65 @@ export default async function GradeAnalyticsPage({
  const targetExamId = examId && examId !== "all" ? examId : undefined

  // Run analytics queries in parallel
-  const [trend, distribution, subjectComparison, classComparison, examOptions] =
-    await Promise.all([
-      getGradeTrend({
-        classId: targetClassId,
-        subjectId: targetSubjectId,
-        semester: targetSemester,
-        examId: targetExamId,
-        scope: ctx.dataScope,
-        currentUserId: ctx.userId,
-      }),
-      getGradeDistribution({
-        classId: targetClassId,
-        subjectId: targetSubjectId,
-        examId: targetExamId,
-        semester: targetSemester,
-        scope: ctx.dataScope,
-        currentUserId: ctx.userId,
-      }),
-      getSubjectComparison({
-        classId: targetClassId,
-        examId: targetExamId,
-        semester: targetSemester,
-        scope: ctx.dataScope,
-      }),
-      targetGradeId
-        ? getClassComparison({
-            gradeId: targetGradeId,
-            subjectId: targetSubjectId ?? allSubjects[0]?.id ?? "",
-            examId: targetExamId,
-            semester: targetSemester,
-            scope: ctx.dataScope,
-          })
-        : Promise.resolve([]),
-      getExamOptionsForGrades({
-        classId: targetClassId,
-        subjectId: targetSubjectId,
-        scope: ctx.dataScope,
-      }),
-    ])
+  // P3-3: 集成 diagnostic 模块的知识点掌握度视图（classId 已由 getTeacherClasses 校验在 scope 内）
+  const [
+    trend,
+    distribution,
+    subjectComparison,
+    classComparisonResult,
+    examOptions,
+    classMasterySummary,
+  ] = await Promise.all([
+    getGradeTrend({
+      classId: targetClassId,
+      subjectId: targetSubjectId,
+      semester: targetSemester,
+      examId: targetExamId,
+      scope: ctx.dataScope,
+      currentUserId: ctx.userId,
+    }),
+    getGradeDistribution({
+      classId: targetClassId,
+      subjectId: targetSubjectId,
+      examId: targetExamId,
+      semester: targetSemester,
+      scope: ctx.dataScope,
+      currentUserId: ctx.userId,
+    }),
+    getSubjectComparison({
+      classId: targetClassId,
+      examId: targetExamId,
+      semester: targetSemester,
+      scope: ctx.dataScope,
+    }),
+    targetGradeId
+      ? getClassComparisonWithSignificance({
+          gradeId: targetGradeId,
+          subjectId: targetSubjectId ?? allSubjects[0]?.id ?? "",
+          examId: targetExamId,
+          semester: targetSemester,
+          scope: ctx.dataScope,
+        })
+      : Promise.resolve({ items: [], significance: null }),
+    getExamOptionsForGrades({
+      classId: targetClassId,
+      subjectId: targetSubjectId,
+      scope: ctx.dataScope,
+    }),
+    getClassMasterySummary(targetClassId),
+  ])

  return (
    <div className="h-full flex-1 flex-col space-y-6 p-8 md:flex">
      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <div>
-          <h1 className="text-2xl font-bold tracking-tight">成绩分析</h1>
-          <p className="text-muted-foreground">
-            趋势分析、班级对比与分数分布。
-          </p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.analytics")}</h1>
+          <p className="text-muted-foreground">{t("page.analytics.description")}</p>
        </div>
        <Button asChild variant="ghost" size="sm">
          <Link href="/teacher/grades">
            <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
-            返回成绩列表
+            {t("page.analytics.backToGrades")}
          </Link>
        </Button>
      </div>
@@ -147,54 +155,63 @@ export default async function GradeAnalyticsPage({
      />

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-        <WidgetBoundary title="成绩趋势">
+        <WidgetBoundary title={t("page.analytics.trendTitle")}>
          {trend ? (
            <GradeTrendChart data={trend} />
          ) : (
            <EmptyState
-              title="暂无趋势数据"
-              description="当前筛选条件下没有可显示的成绩趋势。"
+              title={t("page.analytics.trendEmptyTitle")}
+              description={t("page.analytics.trendEmptyDescription")}
              icon={BarChart3}
              className="border-none shadow-none"
            />
          )}
        </WidgetBoundary>
-        <WidgetBoundary title="分数分布">
+        <WidgetBoundary title={t("page.analytics.distributionTitle")}>
          {distribution.totalCount > 0 ? (
            <GradeDistributionChart data={distribution} />
          ) : (
            <EmptyState
-              title="暂无分布数据"
-              description="当前筛选条件下没有可显示的分数分布。"
+              title={t("page.analytics.distributionEmptyTitle")}
+              description={t("page.analytics.distributionEmptyDescription")}
              icon={BarChart3}
              className="border-none shadow-none"
            />
          )}
        </WidgetBoundary>
-        <WidgetBoundary title="科目对比">
+        <WidgetBoundary title={t("page.analytics.subjectComparisonTitle")}>
          {subjectComparison.length > 0 ? (
            <SubjectComparisonChart data={subjectComparison} />
          ) : (
            <EmptyState
-              title="暂无科目对比数据"
-              description="当前筛选条件下没有可显示的科目对比。"
+              title={t("page.analytics.subjectComparisonEmptyTitle")}
+              description={t("page.analytics.subjectComparisonEmptyDescription")}
              icon={BarChart3}
              className="border-none shadow-none"
            />
          )}
        </WidgetBoundary>
-        <WidgetBoundary title="班级对比">
-          {classComparison.length > 0 ? (
-            <ClassComparisonChart data={classComparison} />
+        <WidgetBoundary title={t("page.analytics.classComparisonTitle")}>
+          {classComparisonResult.items.length > 0 ? (
+            <ClassComparisonChart
+              data={classComparisonResult.items}
+              significance={classComparisonResult.significance}
+            />
          ) : (
            <EmptyState
-              title="暂无班级对比数据"
-              description="当前筛选条件下没有可显示的班级对比。"
+              title={t("page.analytics.classComparisonEmptyTitle")}
+              description={t("page.analytics.classComparisonEmptyDescription")}
              icon={BarChart3}
              className="border-none shadow-none"
            />
          )}
        </WidgetBoundary>
+        <WidgetBoundary title={t("knowledgePointMastery.title")}>
+          <KnowledgePointMasteryChart
+            data={classMasterySummary?.knowledgePointStats ?? []}
+            detailHref="/teacher/diagnostic"
+          />
+        </WidgetBoundary>
      </div>
    </div>
  )
--- a/src/app/(dashboard)/teacher/grades/entry/loading.tsx
+++ b/src/app/(dashboard)/teacher/grades/entry/loading.tsx
@@ -1,7 +1,8 @@
+import type { JSX } from "react"
 import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
 import { Skeleton } from "@/shared/components/ui/skeleton"

-export default function Loading() {
+export default function Loading(): JSX.Element {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
--- a/src/app/(dashboard)/teacher/grades/entry/page.tsx
+++ b/src/app/(dashboard)/teacher/grades/entry/page.tsx
@@ -8,6 +8,7 @@ import { Permissions } from "@/shared/types/permissions"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 import { EmptyState } from "@/shared/components/ui/empty-state"
 import { ClipboardList } from "lucide-react"
+import { getTranslations } from "next-intl/server"

 export const dynamic = "force-dynamic"

@@ -18,6 +19,7 @@ export default async function BatchEntryPage({
 }): Promise<JSX.Element> {
  const ctx = await requirePermission(Permissions.GRADE_RECORD_MANAGE)
  const sp = await searchParams
+  const t = await getTranslations("grades")

  const examId = getParam(sp, "examId")
  const classId = getParam(sp, "classId")
@@ -62,16 +64,14 @@ export default async function BatchEntryPage({
  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">批量录入成绩</h1>
-        <p className="text-muted-foreground">
-          从试卷库选择试卷，按每题得分录入，像填 Excel 表格一样。
-        </p>
+        <h1 className="text-2xl font-bold tracking-tight">{t("page.entry.title")}</h1>
+        <p className="text-muted-foreground">{t("page.entry.description")}</p>
      </div>

      {exams.length === 0 ? (
        <EmptyState
-          title="没有可用的试卷"
-          description="请先在试卷管理中创建试卷并添加题目，才能录入成绩。"
+          title={t("page.entry.noExamsTitle")}
+          description={t("page.entry.noExamsDescription")}
          icon={ClipboardList}
          className="border-none shadow-none"
        />
--- a/src/app/(dashboard)/teacher/grades/error.tsx
+++ b/src/app/(dashboard)/teacher/grades/error.tsx
@@ -1,6 +1,8 @@
 "use client"

+import type { JSX } from "react"
 import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"

 import { EmptyState } from "@/shared/components/ui/empty-state"

@@ -9,15 +11,16 @@ export default function TeacherGradesError({
 }: {
  error: Error & { digest?: string }
  reset: () => void
-}) {
+}): JSX.Element {
+  const t = useTranslations("grades")
  return (
    <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
      <EmptyState
        icon={AlertCircle}
-        title="成绩页面加载失败"
-        description="抱歉，页面加载时发生了意外错误。请稍后重试。"
+        title={t("page.error.title")}
+        description={t("page.error.description")}
        action={{
-          label: "重试",
+          label: t("page.error.retry"),
          onClick: () => reset(),
        }}
        className="border-none shadow-none h-auto"
--- a/src/app/(dashboard)/teacher/grades/loading.tsx
+++ b/src/app/(dashboard)/teacher/grades/loading.tsx
@@ -1,7 +1,8 @@
+import type { JSX } from "react"
 import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
 import { Skeleton } from "@/shared/components/ui/skeleton"

-export default function Loading() {
+export default function Loading(): JSX.Element {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
--- a/src/app/(dashboard)/teacher/grades/page.tsx
+++ b/src/app/(dashboard)/teacher/grades/page.tsx
@@ -1,9 +1,11 @@
 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 } from "@/shared/components/ui/list-pagination"
+import { WidgetBoundary } from "@/shared/components/widget-boundary"
 import { requirePermission } from "@/shared/lib/auth-guard"
 import { Permissions } from "@/shared/types/permissions"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
@@ -13,21 +15,11 @@ import { getSubjectOptions } from "@/modules/school/data-access"
 import { GradeQueryFilters } from "@/modules/grades/components/grade-query-filters"
 import { GradeRecordList } from "@/modules/grades/components/grade-record-list"
 import { ExportButton } from "@/modules/grades/components/export-button"
-import type { GradeRecordType, GradeRecordSemester } from "@/modules/grades/types"
+import { ExcelImportDialog } from "@/modules/grades/components/excel-import-dialog"
+import { isGradeType, isSemester } from "@/modules/grades/lib/type-guards"

 export const dynamic = "force-dynamic"

-const VALID_GRADE_TYPES: ReadonlySet<string> = new Set(["exam", "quiz", "homework", "other"])
-const VALID_SEMESTERS: ReadonlySet<string> = new Set(["1", "2"])
-
-function parseGradeType(v?: string): GradeRecordType | undefined {
-  return v && VALID_GRADE_TYPES.has(v) ? (v as GradeRecordType) : undefined
-}
-
-function parseSemester(v?: string): GradeRecordSemester | undefined {
-  return v && VALID_SEMESTERS.has(v) ? (v as GradeRecordSemester) : undefined
-}
-
 const PAGE_SIZE = 20

 export default async function TeacherGradesPage({
@@ -37,6 +29,7 @@ export default async function TeacherGradesPage({
 }): Promise<JSX.Element> {
  const sp = await searchParams
  const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
+  const t = await getTranslations("grades")

  const classId = getParam(sp, "classId")
  const subjectId = getParam(sp, "subjectId")
@@ -55,8 +48,8 @@ export default async function TeacherGradesPage({
      currentUserId: ctx.userId,
      classId: classId && classId !== "all" ? classId : undefined,
      subjectId: subjectId && subjectId !== "all" ? subjectId : undefined,
-      type: type && type !== "all" ? parseGradeType(type) : undefined,
-      semester: semester && semester !== "all" ? parseSemester(semester) : undefined,
+      type: type && type !== "all" ? isGradeType(type) ? type : undefined : undefined,
+      semester: semester && semester !== "all" ? isSemester(semester) ? semester : undefined : undefined,
      limit: PAGE_SIZE,
      offset,
    }),
@@ -76,20 +69,20 @@ export default async function TeacherGradesPage({
    <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">成绩记录</h1>
-          <p className="text-muted-foreground">管理学生成绩记录。</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.list")}</h1>
+          <p className="text-muted-foreground">{t("page.list.description")}</p>
        </div>
        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href="/teacher/grades/stats">
              <BarChart3 className="mr-2 h-4 w-4" aria-hidden="true" />
-              统计
+              {t("page.list.stats")}
            </Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="/teacher/grades/entry">
              <ClipboardList className="mr-2 h-4 w-4" aria-hidden="true" />
-              批量录入
+              {t("page.list.batchEntry")}
            </Link>
          </Button>
          <ExportButton
@@ -97,10 +90,15 @@ export default async function TeacherGradesPage({
            subjectId={subjectId && subjectId !== "all" ? subjectId : undefined}
            variant="outline"
          />
+          <ExcelImportDialog
+            classId={classId && classId !== "all" ? classId : (classes[0]?.id ?? "")}
+            classes={classes.map((c) => ({ id: c.id, name: c.name }))}
+            subjects={allSubjects.map((s) => ({ id: s.id, name: s.name ?? "Unknown" }))}
+          />
          <Button asChild>
            <Link href="/teacher/grades/entry">
              <PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
-              录入成绩
+              {t("page.list.enterGrades")}
            </Link>
          </Button>
        </div>
@@ -110,17 +108,20 @@ export default async function TeacherGradesPage({

      {total === 0 && !hasFilters ? (
        <EmptyState
-          title="暂无成绩记录"
-          description="开始为您的班级录入成绩。"
+          title={t("page.list.emptyTitle")}
+          description={t("page.list.emptyDescription")}
          icon={ClipboardList}
          action={{
-            label: "录入成绩",
+            label: t("page.list.emptyActionLabel"),
            href: "/teacher/grades/entry",
          }}
        />
      ) : (
        <div className="space-y-4">
-          <GradeRecordList records={pagedRecords} />
+          {/* P1-9: 用 WidgetBoundary 包裹独立数据区块，隔离故障域 */}
+          <WidgetBoundary title={t("title.list")}>
+            <GradeRecordList records={pagedRecords} />
+          </WidgetBoundary>
          {total > 0 ? (
            <ListPagination
              page={currentPage}
@@ -129,7 +130,7 @@ export default async function TeacherGradesPage({
              totalPages={totalPages}
              basePath="/teacher/grades"
              searchParams={sp}
-              itemLabel="条记录"
+              itemLabel={t("page.list.recordUnit")}
            />
          ) : null}
        </div>
--- a/src/app/(dashboard)/teacher/grades/report-card/error.tsx
+++ b/src/app/(dashboard)/teacher/grades/report-card/error.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import type { JSX } from "react"
+import { useEffect } from "react"
+import { AlertTriangle } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { useTranslations } from "next-intl"
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}): JSX.Element {
+  const t = useTranslations("grades")
+  useEffect(() => {
+    console.error("[ReportCard] Route error:", error)
+  }, [error])
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-12">
+      <AlertTriangle className="h-10 w-10 text-destructive" aria-hidden="true" />
+      <div className="text-center">
+        <h2 className="text-lg font-semibold">{t("reportCard.errorTitle")}</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {t("reportCard.errorDescription")}
+        </p>
+      </div>
+      <Button onClick={reset} variant="outline">
+        {t("reportCard.retry")}
+      </Button>
+    </div>
+  )
+}
--- a/src/app/(dashboard)/teacher/grades/report-card/loading.tsx
+++ b/src/app/(dashboard)/teacher/grades/report-card/loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+import { getTranslations } from "next-intl/server"
+
+export default async function Loading() {
+  const t = await getTranslations("grades")
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 p-12">
+      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden="true" />
+      <p className="text-sm text-muted-foreground">{t("reportCard.loading")}</p>
+    </div>
+  )
+}
--- a/src/app/(dashboard)/teacher/grades/report-card/page.tsx
+++ b/src/app/(dashboard)/teacher/grades/report-card/page.tsx
@@ -0,0 +1,116 @@
+import type { JSX } from "react"
+import { ArrowLeft } from "lucide-react"
+import Link from "next/link"
+import { getTranslations } from "next-intl/server"
+
+import { Button } from "@/shared/components/ui/button"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { requirePermission } from "@/shared/lib/auth-guard"
+import { Permissions } from "@/shared/types/permissions"
+import { getParam, type SearchParams } from "@/shared/lib/search-params"
+
+import { getReportCardData } from "@/modules/grades/lib/report-card"
+import { ReportCardView } from "@/modules/grades/components/report-card-view"
+import { ReportCardPrintAction } from "@/modules/grades/components/report-card-print-action"
+import { getAcademicYears } from "@/modules/school/data-access"
+
+export const dynamic = "force-dynamic"
+
+/**
+ * P3-1: 教师视角的学生成绩报告卡页面。
+ *
+ * 路由：/teacher/grades/report-card?studentId=xxx
+ * 查询参数：
+ *   - studentId: 必填，目标学生 ID
+ *   - academicYearId?: 指定学年（不传则使用当前活跃学年）
+ *   - semester?: "1" | "2"（不传则全部学期）
+ *
+ * 权限：GRADE_RECORD_READ（class_taught scope 在 data-access 层校验学生归属）
+ */
+export default async function TeacherReportCardPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}): Promise<JSX.Element> {
+  const sp = await searchParams
+  const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
+  const t = await getTranslations("grades")
+
+  const studentId = getParam(sp, "studentId")
+  const academicYearIdParam = getParam(sp, "academicYearId")
+  const semesterParam = getParam(sp, "semester")
+  const academicYearId =
+    academicYearIdParam && academicYearIdParam !== "all"
+      ? academicYearIdParam
+      : undefined
+  const semester =
+    semesterParam === "1" || semesterParam === "2" ? semesterParam : undefined
+
+  if (!studentId) {
+    return (
+      <div className="h-full flex-1 flex-col space-y-6 p-8 md:flex">
+        <Button asChild variant="ghost" size="sm" className="w-fit">
+          <Link href="/teacher/grades">
+            <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
+            {t("reportCard.backToGrades")}
+          </Link>
+        </Button>
+        <EmptyState
+          title={t("reportCard.missingStudentTitle")}
+          description={t("reportCard.missingStudentDescription")}
+          icon={ArrowLeft}
+          className="border-none shadow-none"
+        />
+      </div>
+    )
+  }
+
+  const [data, academicYears] = await Promise.all([
+    getReportCardData(studentId, ctx.dataScope, {
+      academicYearId,
+      semester,
+    }),
+    getAcademicYears(),
+  ])
+
+  if (!data) {
+    return (
+      <div className="h-full flex-1 flex-col space-y-6 p-8 md:flex">
+        <Button asChild variant="ghost" size="sm" className="w-fit">
+          <Link href="/teacher/grades">
+            <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
+            {t("reportCard.backToGrades")}
+          </Link>
+        </Button>
+        <EmptyState
+          title={t("reportCard.emptyTitle")}
+          description={t("reportCard.emptyDescription")}
+          icon={ArrowLeft}
+          className="border-none shadow-none"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="flex items-center justify-between gap-4">
+        <Button asChild variant="ghost" size="sm">
+          <Link href="/teacher/grades">
+            <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
+            {t("reportCard.backToGrades")}
+          </Link>
+        </Button>
+        <ReportCardPrintAction />
+      </div>
+
+      <ReportCardView data={data} />
+
+      <p className="text-center text-xs text-muted-foreground">
+        {t("reportCard.academicYearsCount", {
+          count: academicYears.length,
+        })}
+      </p>
+    </div>
+  )
+}
--- a/src/app/(dashboard)/teacher/grades/stats/loading.tsx
+++ b/src/app/(dashboard)/teacher/grades/stats/loading.tsx
@@ -1,7 +1,8 @@
+import type { JSX } from "react"
 import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
 import { Skeleton } from "@/shared/components/ui/skeleton"

-export default function Loading() {
+export default function Loading(): JSX.Element {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
--- a/src/app/(dashboard)/teacher/grades/stats/page.tsx
+++ b/src/app/(dashboard)/teacher/grades/stats/page.tsx
@@ -10,6 +10,7 @@ import { requirePermission } from "@/shared/lib/auth-guard"
 import { Permissions } from "@/shared/types/permissions"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 import { BarChart3 } from "lucide-react"
+import { getTranslations } from "next-intl/server"

 export const dynamic = "force-dynamic"

@@ -20,6 +21,7 @@ export default async function StatsPage({
 }): Promise<JSX.Element> {
  const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
  const sp = await searchParams
+  const t = await getTranslations("grades")

  const classId = getParam(sp, "classId")
  const subjectId = getParam(sp, "subjectId")
@@ -33,12 +35,12 @@ export default async function StatsPage({
    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">Grade Statistics</h1>
-          <p className="text-muted-foreground">View class grade statistics and rankings.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.stats")}</h1>
+          <p className="text-muted-foreground">{t("page.stats.description")}</p>
        </div>
        <EmptyState
-          title="No classes"
-          description="You don't have any classes yet."
+          title={t("page.stats.noClassesTitle")}
+          description={t("page.stats.noClassesDescription")}
          icon={BarChart3}
          className="border-none shadow-none"
        />
@@ -57,12 +59,12 @@ export default async function StatsPage({
    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">Grade Statistics</h1>
-          <p className="text-muted-foreground">View class grade statistics and rankings.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.stats")}</h1>
+          <p className="text-muted-foreground">{t("page.stats.description")}</p>
        </div>
        <EmptyState
-          title="No accessible classes"
-          description="You don't have permission to view any classes."
+          title={t("page.stats.noAccessTitle")}
+          description={t("page.stats.noAccessDescription")}
          icon={BarChart3}
          className="border-none shadow-none"
        />
@@ -98,14 +100,14 @@ export default async function StatsPage({
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div className="flex items-center justify-between">
        <div>
-          <h1 className="text-2xl font-bold tracking-tight">Grade Statistics</h1>
-          <p className="text-muted-foreground">View class grade statistics and rankings.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.stats")}</h1>
+          <p className="text-muted-foreground">{t("page.stats.description")}</p>
        </div>
        <ExportButton
          classId={targetClassId}
          subjectId={targetSubjectId}
          variant="outline"
-          label="导出成绩"
+          label={t("page.stats.exportLabel")}
        />
      </div>