feat(app): add lesson-plans, practice, and grade dashboard routes

- Add admin/lesson-plans, parent/lesson-plans, student/lesson-plans routes

- Add student/practice and teacher/practice routes for adaptive practice

- Add management/grade/dashboard and management/grade/practice routes

- Add teacher/lesson-plans error and loading boundaries

- Update existing admin, parent, student, teacher pages with new features

- Update globals.css and proxy middleware

src/app/(dashboard)/management/grade/dashboard/loading.tsx

@@ -0,0 +1,42 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function ManagementGradeDashboardLoading() {
+  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>
+
+      <Skeleton className="h-10 w-full max-w-md" />
+
+      <Skeleton className="h-10 w-full max-w-2xl" />
+
+      <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" />
+              <Skeleton className="mt-2 h-3 w-28" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/management/grade/dashboard/page.tsx

@@ -0,0 +1,178 @@
+import type { Metadata } from "next"
+import type { JSX } from "react"
+
+import { getTranslations } from "next-intl/server"
+import { requirePermission } from "@/shared/lib/auth-guard"
+import { Permissions } from "@/shared/types/permissions"
+import { getTeacherIdForMutations } from "@/modules/classes/data-access"
+import { getGradeHomeworkInsights } from "@/modules/classes/data-access"
+import { getGradesForStaff } from "@/modules/school/data-access"
+import { getGradeDistributionByGradeId } from "@/modules/grades/data-access-analytics"
+import { getExamsByGradeId } from "@/modules/exams/data-access"
+import { getGradeCoursePlanProgress } from "@/modules/course-plans/data-access"
+import { GradeInsightsFilters } from "@/modules/school/components/grade-insights-filters"
+import { GradeDistributionPanel } from "@/modules/school/components/grade-dashboard/grade-distribution-panel"
+import { GradeHomeworkPanel } from "@/modules/school/components/grade-dashboard/grade-homework-panel"
+import { GradeExamsPanel } from "@/modules/school/components/grade-dashboard/grade-exams-panel"
+import { GradeProgressPanel } from "@/modules/school/components/grade-dashboard/grade-progress-panel"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { ChipNav } from "@/shared/components/ui/chip-nav"
+import { BarChart3 } from "lucide-react"
+import { getParam, type SearchParams } from "@/shared/lib/search-params"
+
+export const dynamic = "force-dynamic"
+
+const TAB_OPTIONS = [
+  { id: "distribution", name: "" },
+  { id: "homework", name: "" },
+  { id: "exams", name: "" },
+  { id: "progress", name: "" },
+] as const
+
+type TabId = (typeof TAB_OPTIONS)[number]["id"]
+
+const isTabId = (v: string): v is TabId =>
+  v === "distribution" || v === "homework" || v === "exams" || v === "progress"
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("school")
+  return {
+    title: `${t("grades.gradeDashboard.title")} - Next_Edu`,
+    description: t("grades.gradeDashboard.description"),
+  }
+}
+
+export default async function GradeDashboardPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}): Promise<JSX.Element> {
+  const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
+  const t = await getTranslations("school")
+  const params = await searchParams
+  const gradeId = getParam(params, "gradeId")
+  const tabRaw = getParam(params, "tab") || "distribution"
+  const tab: TabId = isTabId(tabRaw) ? tabRaw : "distribution"
+
+  const teacherId = await getTeacherIdForMutations()
+  const grades = await getGradesForStaff(teacherId)
+  const allowedIds = new Set(grades.map((g) => g.id))
+  const selected = gradeId && gradeId !== "all" && allowedIds.has(gradeId) ? gradeId : ""
+
+  const buildHref = (gId: string): string => {
+    const p = new URLSearchParams()
+    if (gId && gId !== "all") p.set("gradeId", gId)
+    if (tab !== "distribution") p.set("tab", tab)
+    const qs = p.toString()
+    return qs ? `/management/grade/dashboard?${qs}` : "/management/grade/dashboard"
+  }
+
+  const buildTabHref = (tId: string): string => {
+    const p = new URLSearchParams()
+    if (selected) p.set("gradeId", selected)
+    if (tId !== "distribution") p.set("tab", tId)
+    const qs = p.toString()
+    return qs ? `/management/grade/dashboard?${qs}` : "/management/grade/dashboard"
+  }
+
+  const tabOptions = TAB_OPTIONS.map((o) => ({
+    id: o.id,
+    name: t(`grades.gradeDashboard.tabs.${o.id}` as const),
+  }))
+
+  if (grades.length === 0) {
+    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">{t("grades.gradeDashboard.title")}</h2>
+          <p className="text-muted-foreground">{t("grades.gradeDashboard.description")}</p>
+        </div>
+        <EmptyState
+          icon={BarChart3}
+          title={t("grades.gradeDashboard.selectToView")}
+          description={t("grades.gradeDashboard.selectToViewDescription")}
+          className="h-[360px] bg-card"
+        />
+      </div>
+    )
+  }
+
+  // Fetch data for the active tab only
+  let distributionData = null
+  let homeworkData = null
+  let examsData = null
+  let progressData = null
+
+  if (selected) {
+    if (tab === "distribution") {
+      distributionData = await getGradeDistributionByGradeId({
+        gradeId: selected,
+        scope: ctx.dataScope,
+      })
+    } else if (tab === "homework") {
+      homeworkData = await getGradeHomeworkInsights({ gradeId: selected, limit: 50 })
+    } else if (tab === "exams") {
+      examsData = await getExamsByGradeId({ gradeId: selected, scope: ctx.dataScope })
+    } else if (tab === "progress") {
+      progressData = await getGradeCoursePlanProgress({ gradeId: selected })
+    }
+  }
+
+  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">{t("grades.gradeDashboard.title")}</h2>
+        <p className="text-muted-foreground">{t("grades.gradeDashboard.description")}</p>
+      </div>
+
+      <GradeInsightsFilters
+        grades={grades.map((g) => ({ id: g.id, name: g.name, schoolName: g.school.name }))}
+        currentGradeId={selected || "all"}
+        buildHref={buildHref}
+      />
+
+      {!selected ? (
+        <EmptyState
+          icon={BarChart3}
+          title={t("grades.gradeDashboard.selectToView")}
+          description={t("grades.gradeDashboard.selectToViewDescription")}
+          className="h-[360px] bg-card"
+        />
+      ) : (
+        <div className="space-y-6">
+          <ChipNav
+            options={tabOptions}
+            currentId={tab}
+            buildHref={buildTabHref}
+          />
+
+          {tab === "distribution" && distributionData && (
+            <GradeDistributionPanel data={distributionData} />
+          )}
+          {tab === "homework" && homeworkData && (
+            <GradeHomeworkPanel data={homeworkData} />
+          )}
+          {tab === "exams" && examsData && (
+            <GradeExamsPanel data={examsData} />
+          )}
+          {tab === "progress" && progressData && (
+            <GradeProgressPanel data={progressData} />
+          )}
+
+          {/* Fallback: data was null (e.g. homework insights returned null) */}
+          {((tab === "distribution" && !distributionData) ||
+            (tab === "homework" && !homeworkData) ||
+            (tab === "exams" && !examsData) ||
+            (tab === "progress" && !progressData)) && (
+            <EmptyState
+              icon={BarChart3}
+              title={t("grades.gradeDashboard.noData")}
+              description={t("grades.gradeDashboard.noDataDescription")}
+              className="h-[360px] bg-card"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

src/app/(dashboard)/management/grade/insights/page.tsx

@@ -7,25 +7,23 @@ import { Permissions } from "@/shared/types/permissions"
 import { getTeacherIdForMutations } from "@/modules/classes/data-access"
 import { getGradeHomeworkInsights } from "@/modules/classes/data-access"
 import { getGradesForStaff } from "@/modules/school/data-access"
+import { GradeInsightsFilters } from "@/modules/school/components/grade-insights-filters"
 import { EmptyState } from "@/shared/components/ui/empty-state"
 import { StatCard } from "@/shared/components/ui/stat-card"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { Badge } from "@/shared/components/ui/badge"
-import { Button } from "@/shared/components/ui/button"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
 import { BarChart3 } from "lucide-react"
-import { formatDate } from "@/shared/lib/utils"
+import { formatDate, formatNumber } from "@/shared/lib/utils"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 
 export const dynamic = "force-dynamic"
 
-const formatScore = (v: number | null, digits = 1) => (typeof v === "number" && Number.isFinite(v) ? v.toFixed(digits) : "-")
-
 export async function generateMetadata(): Promise<Metadata> {
   const t = await getTranslations("school")
   return {
-    title: `${t("classManagement.grade.insights.title")} - Next_Edu`,
-    description: t("classManagement.grade.insights.description"),
+    title: `${t("grades.gradeInsights.title")} - Next_Edu`,
+    description: t("grades.gradeInsights.description"),
   }
 }
 
@@ -42,17 +40,24 @@ export default async function TeacherGradeInsightsPage({ searchParams }: { searc
 
   const insights = selected ? await getGradeHomeworkInsights({ gradeId: selected, limit: 50 }) : null
 
+  const buildHref = (gId: string): string => {
+    const p = new URLSearchParams()
+    if (gId && gId !== "all") p.set("gradeId", gId)
+    const qs = p.toString()
+    return qs ? `/management/grade/insights?${qs}` : "/management/grade/insights"
+  }
+
   if (grades.length === 0) {
     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">{t("classManagement.grade.insights.title")}</h2>
-          <p className="text-muted-foreground">{t("classManagement.grade.insights.description")}</p>
+          <h2 className="text-2xl font-bold tracking-tight">{t("grades.gradeInsights.title")}</h2>
+          <p className="text-muted-foreground">{t("grades.gradeInsights.description")}</p>
         </div>
         <EmptyState
           icon={BarChart3}
-          title={t("classManagement.grade.insights.noGrades")}
-          description={t("classManagement.grade.insights.noGradesDescription")}
+          title={t("grades.gradeInsights.selectToView")}
+          description={t("grades.gradeInsights.selectToViewDescription")}
           className="h-[360px] bg-card"
         />
       </div>
@@ -62,85 +67,62 @@ export default async function TeacherGradeInsightsPage({ searchParams }: { searc
   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">{t("classManagement.grade.insights.title")}</h2>
-        <p className="text-muted-foreground">{t("classManagement.grade.insights.description")}</p>
+        <h2 className="text-2xl font-bold tracking-tight">{t("grades.gradeInsights.title")}</h2>
+        <p className="text-muted-foreground">{t("grades.gradeInsights.description")}</p>
       </div>
 
-      <Card className="shadow-none">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0">
-          <CardTitle className="text-base">{t("classManagement.grade.insights.filters")}</CardTitle>
-          <Badge variant="secondary" className="tabular-nums">
-            {grades.length}
-          </Badge>
-        </CardHeader>
-        <CardContent>
-          <form action="/management/grade/insights" method="get" className="flex flex-col gap-3 md:flex-row md:items-center">
-            <label htmlFor="gradeId" className="text-sm font-medium">{t("classManagement.grade.insights.grade")}</label>
-            <select
-              id="gradeId"
-              name="gradeId"
-              defaultValue={selected || "all"}
-              className="h-10 w-full rounded-md border bg-background px-3 text-sm md:w-[360px]"
-            >
-              <option value="all">{t("classManagement.grade.insights.selectGrade")}</option>
-              {grades.map((g) => (
-                <option key={g.id} value={g.id}>
-                  {g.school.name} / {g.name}
-                </option>
-              ))}
-            </select>
-            <Button type="submit" className="md:ml-2">
-              {t("classManagement.grade.insights.apply")}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+      {/* 年级筛选：ChipNav 即时切换，无整页刷新 */}
+      <GradeInsightsFilters
+        grades={grades.map((g) => ({ id: g.id, name: g.name, schoolName: g.school.name }))}
+        currentGradeId={selected || "all"}
+        buildHref={buildHref}
+      />
 
       {!selected ? (
         <EmptyState
           icon={BarChart3}
-          title={t("classManagement.grade.insights.selectToView")}
-          description={t("classManagement.grade.insights.selectToViewDescription")}
+          title={t("grades.gradeInsights.selectToView")}
+          description={t("grades.gradeInsights.selectToViewDescription")}
           className="h-[360px] bg-card"
         />
       ) : !insights ? (
         <EmptyState
           icon={BarChart3}
-          title={t("classManagement.grade.insights.notFound")}
-          description={t("classManagement.grade.insights.notFoundDescription")}
+          title={t("grades.gradeInsights.notFound")}
+          description={t("grades.gradeInsights.notFoundDescription")}
           className="h-[360px] bg-card"
         />
       ) : insights.assignments.length === 0 ? (
         <EmptyState
           icon={BarChart3}
-          title={t("classManagement.grade.insights.noData")}
-          description={t("classManagement.grade.insights.noDataDescription")}
+          title={t("grades.gradeInsights.noData")}
+          description={t("grades.gradeInsights.noDataDescription")}
           className="h-[360px] bg-card"
         />
       ) : (
         <div className="space-y-6">
           <div className="grid gap-4 md:grid-cols-4">
             <StatCard
-              title={t("classManagement.grade.insights.classes")}
+              title={t("grades.gradeInsights.classes")}
               value={insights.classCount}
               description={`${insights.grade.school.name} / ${insights.grade.name}`}
               valueClassName="tabular-nums"
             />
             <StatCard
-              title={t("classManagement.grade.insights.students")}
+              title={t("grades.gradeInsights.students")}
               value={insights.studentCounts.total}
-              description={`${t("classManagement.grade.insights.active")} ${insights.studentCounts.active} • ${t("classManagement.grade.insights.inactive")} ${insights.studentCounts.inactive}`}
+              description={`${t("grades.gradeInsights.active")} ${insights.studentCounts.active} • ${t("grades.gradeInsights.inactive")} ${insights.studentCounts.inactive}`}
               valueClassName="tabular-nums"
             />
             <StatCard
-              title={t("classManagement.grade.insights.overallAvg")}
-              value={formatScore(insights.overallScores.avg)}
+              title={t("grades.gradeInsights.overallAvg")}
+              value={formatNumber(insights.overallScores.avg)}
               description="-"
               valueClassName="tabular-nums"
             />
             <StatCard
-              title={t("classManagement.grade.insights.latestAvg")}
-              value={formatScore(insights.latest?.scoreStats.avg ?? null)}
+              title={t("grades.gradeInsights.latestAvg")}
+              value={formatNumber(insights.latest?.scoreStats.avg ?? null)}
               description={insights.latest ? insights.latest.title : "-"}
               valueClassName="tabular-nums"
             />
@@ -148,85 +130,91 @@ export default async function TeacherGradeInsightsPage({ searchParams }: { searc
 
           <Card className="shadow-none">
             <CardHeader className="flex flex-row items-center justify-between space-y-0">
-              <CardTitle className="text-base">{t("classManagement.grade.insights.homeworkTimeline")}</CardTitle>
+              <CardTitle className="text-base">{t("grades.gradeInsights.homeworkTimeline")}</CardTitle>
               <Badge variant="secondary" className="tabular-nums">
                 {insights.assignments.length}
               </Badge>
             </CardHeader>
             <CardContent>
               <div className="rounded-md border">
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-muted/50">
-                      <TableHead>{t("classManagement.grade.insights.assignment")}</TableHead>
-                      <TableHead>{t("classManagement.grade.insights.status")}</TableHead>
-                      <TableHead>{t("classManagement.grade.insights.created")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.targeted")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.submitted")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.graded")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.avg")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.median")}</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {insights.assignments.map((a) => (
-                      <TableRow key={a.assignmentId}>
-                        <TableCell className="font-medium">{a.title}</TableCell>
-                        <TableCell>
-                          <Badge variant="secondary" className="capitalize">
-                            {a.status}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-muted-foreground">{formatDate(a.createdAt)}</TableCell>
-                        <TableCell className="text-right tabular-nums">{a.targetCount}</TableCell>
-                        <TableCell className="text-right tabular-nums">{a.submittedCount}</TableCell>
-                        <TableCell className="text-right tabular-nums">{a.gradedCount}</TableCell>
-                        <TableCell className="text-right tabular-nums">{formatScore(a.scoreStats.avg)}</TableCell>
-                        <TableCell className="text-right tabular-nums">{formatScore(a.scoreStats.median)}</TableCell>
+                {/* v4-P1-11: 移动端表格水平滚动 */}
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow className="bg-muted/50">
+                        <TableHead>{t("grades.gradeInsights.assignment")}</TableHead>
+                        <TableHead>{t("grades.gradeInsights.status")}</TableHead>
+                        <TableHead>{t("grades.gradeInsights.created")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.targeted")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.submitted")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.graded")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.avg")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.median")}</TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
+                    </TableHeader>
+                    <TableBody>
+                      {insights.assignments.map((a) => (
+                        <TableRow key={a.assignmentId}>
+                          <TableCell className="font-medium">{a.title}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="capitalize">
+                              {a.status}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">{formatDate(a.createdAt)}</TableCell>
+                          <TableCell className="text-right tabular-nums">{a.targetCount}</TableCell>
+                          <TableCell className="text-right tabular-nums">{a.submittedCount}</TableCell>
+                          <TableCell className="text-right tabular-nums">{a.gradedCount}</TableCell>
+                          <TableCell className="text-right tabular-nums">{formatNumber(a.scoreStats.avg)}</TableCell>
+                          <TableCell className="text-right tabular-nums">{formatNumber(a.scoreStats.median)}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
               </div>
             </CardContent>
           </Card>
 
           <Card className="shadow-none">
             <CardHeader className="flex flex-row items-center justify-between space-y-0">
-              <CardTitle className="text-base">{t("classManagement.grade.insights.classRanking")}</CardTitle>
+              <CardTitle className="text-base">{t("grades.gradeInsights.classRanking")}</CardTitle>
               <Badge variant="secondary" className="tabular-nums">
                 {insights.classes.length}
               </Badge>
             </CardHeader>
             <CardContent>
               <div className="rounded-md border">
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-muted/50">
-                      <TableHead>{t("classManagement.grade.insights.class")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.students")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.latestAvgCol")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.prevAvg")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.delta")}</TableHead>
-                      <TableHead className="text-right">{t("classManagement.grade.insights.overallAvgCol")}</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {insights.classes.map((c) => (
-                      <TableRow key={c.class.id}>
-                        <TableCell className="font-medium">
-                          {c.class.name}
-                          {c.class.homeroom ? <span className="text-muted-foreground"> • {c.class.homeroom}</span> : null}
-                        </TableCell>
-                        <TableCell className="text-right tabular-nums">{c.studentCounts.total}</TableCell>
-                        <TableCell className="text-right tabular-nums">{formatScore(c.latestAvg)}</TableCell>
-                        <TableCell className="text-right tabular-nums">{formatScore(c.prevAvg)}</TableCell>
-                        <TableCell className="text-right tabular-nums">{formatScore(c.deltaAvg)}</TableCell>
-                        <TableCell className="text-right tabular-nums">{formatScore(c.overallScores.avg)}</TableCell>
+                {/* v4-P1-11: 移动端表格水平滚动 */}
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow className="bg-muted/50">
+                        <TableHead>{t("grades.gradeInsights.class")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.students")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.latestAvgCol")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.prevAvg")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.delta")}</TableHead>
+                        <TableHead className="text-right">{t("grades.gradeInsights.overallAvgCol")}</TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
+                    </TableHeader>
+                    <TableBody>
+                      {insights.classes.map((c) => (
+                        <TableRow key={c.class.id}>
+                          <TableCell className="font-medium">
+                            {c.class.name}
+                            {c.class.homeroom ? <span className="text-muted-foreground"> • {c.class.homeroom}</span> : null}
+                          </TableCell>
+                          <TableCell className="text-right tabular-nums">{c.studentCounts.total}</TableCell>
+                          <TableCell className="text-right tabular-nums">{formatNumber(c.latestAvg)}</TableCell>
+                          <TableCell className="text-right tabular-nums">{formatNumber(c.prevAvg)}</TableCell>
+                          <TableCell className="text-right tabular-nums">{formatNumber(c.deltaAvg)}</TableCell>
+                          <TableCell className="text-right tabular-nums">{formatNumber(c.overallScores.avg)}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
               </div>
             </CardContent>
           </Card>

src/app/(dashboard)/management/grade/practice/error.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { useEffect } from "react"
+import { BarChart3 } from "lucide-react"
+
+import { EmptyState } from "@/shared/components/ui/empty-state"
+
+export default function Error() {
+  useEffect(() => {
+    console.error("Grade practice analytics page error")
+  }, [])
+
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">年级专项练习总览</h1>
+        <p className="text-muted-foreground">加载年级练习数据时发生错误</p>
+      </div>
+      <EmptyState
+        icon={BarChart3}
+        title="加载失败"
+        description="请刷新页面重试，或联系管理员检查数据访问权限。"
+        className="h-[360px] bg-card"
+      />
+    </div>
+  )
+}

src/app/(dashboard)/management/grade/practice/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-8 p-8">
+      <Skeleton className="h-10 w-48" />
+      <Skeleton className="h-20 w-full" />
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-[100px]" />
+        ))}
+      </div>
+      <Skeleton className="h-[300px] w-full" />
+    </div>
+  )
+}

src/app/(dashboard)/management/grade/practice/page.tsx

@@ -0,0 +1,141 @@
+import type { Metadata } from "next"
+import type { JSX } from "react"
+import { BarChart3 } from "lucide-react"
+import { getTranslations } from "next-intl/server"
+
+import { requirePermission } from "@/shared/lib/auth-guard"
+import { Permissions } from "@/shared/types/permissions"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { getParam, type SearchParams } from "@/shared/lib/search-params"
+import { getTeacherIdForMutations } from "@/modules/classes/data-access"
+import { getGradesForStaff } from "@/modules/school/data-access"
+import { GradeInsightsFilters } from "@/modules/school/components/grade-insights-filters"
+
+import {
+  getGradePracticeOverview,
+  getGradeClassPracticeComparison,
+  getPracticeTypeBreakdown,
+} from "@/modules/adaptive-practice/data-access-analytics"
+import { getUserIdsByGradeId } from "@/modules/users/data-access"
+import { PracticeOverviewStatsCards } from "@/modules/adaptive-practice/components/practice-overview-stats-cards"
+import { ClassPracticeComparisonTable } from "@/modules/adaptive-practice/components/class-practice-comparison-table"
+import { PracticeTypeBreakdownChart } from "@/modules/adaptive-practice/components/practice-type-breakdown-chart"
+
+export const dynamic = "force-dynamic"
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("practice")
+  return {
+    title: `${t("grade.title")} - Next_Edu`,
+    description: t("grade.description"),
+  }
+}
+
+export default async function GradePracticePage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}): Promise<JSX.Element> {
+  await requirePermission(Permissions.ADAPTIVE_PRACTICE_READ)
+  const t = await getTranslations("practice")
+  const params = await searchParams
+  const gradeId = getParam(params, "gradeId")
+
+  const teacherId = await getTeacherIdForMutations()
+  const grades = await getGradesForStaff(teacherId)
+  const allowedIds = new Set(grades.map((g) => g.id))
+  const selected = gradeId && gradeId !== "all" && allowedIds.has(gradeId) ? gradeId : ""
+
+  const buildHref = (gId: string): string => {
+    const p = new URLSearchParams()
+    if (gId && gId !== "all") p.set("gradeId", gId)
+    const qs = p.toString()
+    return qs ? `/management/grade/practice?${qs}` : "/management/grade/practice"
+  }
+
+  if (grades.length === 0) {
+    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">{t("grade.title")}</h2>
+          <p className="text-muted-foreground">{t("grade.description")}</p>
+        </div>
+        <EmptyState
+          icon={BarChart3}
+          title={t("grade.noGrade")}
+          description={t("grade.noGradeDescription")}
+          className="h-[360px] bg-card"
+        />
+      </div>
+    )
+  }
+
+  // 仅在选中年级时查询数据
+  let overview: Awaited<ReturnType<typeof getGradePracticeOverview>> = null
+  let classComparison: Awaited<ReturnType<typeof getGradeClassPracticeComparison>> = []
+  let typeBreakdown: Awaited<ReturnType<typeof getPracticeTypeBreakdown>> = []
+
+  if (selected) {
+    const studentIds = await getUserIdsByGradeId(selected)
+    const [ov, cmp, breakdown] = await Promise.all([
+      getGradePracticeOverview(selected),
+      getGradeClassPracticeComparison(selected),
+      getPracticeTypeBreakdown(studentIds),
+    ])
+    overview = ov
+    classComparison = cmp
+    typeBreakdown = breakdown
+  }
+
+  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">{t("grade.title")}</h2>
+        <p className="text-muted-foreground">{t("grade.description")}</p>
+      </div>
+
+      <GradeInsightsFilters
+        grades={grades.map((g) => ({ id: g.id, name: g.name, schoolName: g.school.name }))}
+        currentGradeId={selected || "all"}
+        buildHref={buildHref}
+      />
+
+      {!selected ? (
+        <EmptyState
+          icon={BarChart3}
+          title={t("grade.noGrade")}
+          description={t("grade.noGradeDescription")}
+          className="h-[360px] bg-card"
+        />
+      ) : !overview ? (
+        <EmptyState
+          icon={BarChart3}
+          title={t("teacher.noData")}
+          description={t("teacher.noDataDescription")}
+          className="h-[360px] bg-card"
+        />
+      ) : (
+        <div className="space-y-6">
+          {/* 年级整体统计卡片 */}
+          <PracticeOverviewStatsCards
+            totalClasses={overview.totalClasses}
+            totalSessions={overview.totalSessions}
+            totalAnswered={overview.totalQuestionsAnswered}
+            averageAccuracy={overview.averageAccuracy}
+            participationRate={overview.participationRate}
+          />
+
+          {/* 各班级练习对比表 */}
+          {classComparison.length > 0 ? (
+            <ClassPracticeComparisonTable data={classComparison} />
+          ) : null}
+
+          {/* 练习类型分布图 */}
+          {typeBreakdown.length > 0 ? (
+            <PracticeTypeBreakdownChart data={typeBreakdown} />
+          ) : null}
+        </div>
+      )}
+    </div>
+  )
+}