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

src/app/(dashboard)/student/elective/[id]/loading.tsx

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

src/app/(dashboard)/student/elective/[id]/page.tsx

@@ -0,0 +1,47 @@
+import { notFound } from "next/navigation"
+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 { getElectiveCourseById } from "@/modules/elective/data-access"
+import { ElectiveCourseDetail } from "@/modules/elective/components/elective-course-detail"
+import { ElectivePageLayout } from "@/modules/elective/components/elective-page-layout"
+
+export const dynamic = "force-dynamic"
+
+export default async function StudentElectiveDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}): Promise<JSX.Element> {
+  const t = await getTranslations("elective")
+  await requirePermission(Permissions.ELECTIVE_READ)
+  const { id } = await params
+
+  const course = await getElectiveCourseById(id)
+
+  if (!course) notFound()
+
+  const header = (
+    <div className="space-y-1">
+      <h2 className="text-2xl font-bold tracking-tight">{t("title.detail")}</h2>
+      <p className="text-muted-foreground">{t("description.detail")}</p>
+    </div>
+  )
+
+  return (
+    <ElectivePageLayout header={header}>
+      {/*
+        学生视角：只展示课程信息，不展示选课名单（保护其他学生隐私）。
+        selections 传空数组，showEditButton=false（学生无编辑权限）。
+      */}
+      <ElectiveCourseDetail
+        course={course}
+        selections={[]}
+        backHref="/student/elective"
+        showEditButton={false}
+      />
+    </ElectivePageLayout>
+  )
+}

src/app/(dashboard)/student/elective/_components/available-courses-loader.tsx

@@ -0,0 +1,51 @@
+import type { JSX } from "react"
+import { getAvailableCoursesForStudent, getStudentSelections } from "@/modules/elective/data-access-selections"
+import { StudentAvailableCoursesSection } from "@/modules/elective/components/student-selection-view"
+import { ElectiveFilters } from "@/modules/elective/components/elective-filters"
+import { getParam, type SearchParams } from "@/shared/lib/search-params"
+
+/**
+ * 可选课程 - 异步 RSC loader
+ * 独立 Suspense 边界，可流式渲染
+ * 同时获取 mySelections（通过 React cache() 自动去重）以计算 selectedCourseIds
+ * 过滤逻辑（搜索关键词 + 选课模式）在本 loader 内完成，保持组件纯净
+ */
+export async function AvailableCoursesLoader({
+  studentId,
+  searchParams,
+}: {
+  studentId: string
+  searchParams: Promise<SearchParams>
+}): Promise<JSX.Element> {
+  const [sp, availableCourses, mySelections] = await Promise.all([
+    searchParams,
+    getAvailableCoursesForStudent(studentId),
+    // 通过 React cache() 去重：若 MySelectionsLoader 已先一步获取，则此处直接返回缓存
+    getStudentSelections(studentId),
+  ])
+
+  const q = (getParam(sp, "q") || "").toLowerCase().trim()
+  const modeFilter = getParam(sp, "mode") || "all"
+
+  const filteredCourses = availableCourses.filter((c) => {
+    if (q && !c.name.toLowerCase().includes(q) && !(c.teacherName?.toLowerCase().includes(q) ?? false)) return false
+    if (modeFilter !== "all" && c.selectionMode !== modeFilter) return false
+    return true
+  })
+
+  const selectedCourseIds = new Set(
+    mySelections
+      .filter((s) => ["selected", "enrolled", "waitlist"].includes(s.status))
+      .map((s) => s.courseId)
+  )
+
+  return (
+    <div className="space-y-4">
+      {availableCourses.length > 0 && <ElectiveFilters />}
+      <StudentAvailableCoursesSection
+        availableCourses={filteredCourses}
+        selectedCourseIds={selectedCourseIds}
+      />
+    </div>
+  )
+}

src/app/(dashboard)/student/elective/_components/my-selections-loader.tsx

@@ -0,0 +1,17 @@
+import type { JSX } from "react"
+import { getStudentSelections } from "@/modules/elective/data-access-selections"
+import { StudentMySelectionsSection } from "@/modules/elective/components/student-selection-view"
+
+/**
+ * 我的选课 - 异步 RSC loader
+ * 独立 Suspense 边界，可流式渲染
+ * 数据获取通过 React cache() 自动去重
+ */
+export async function MySelectionsLoader({
+  studentId,
+}: {
+  studentId: string
+}): Promise<JSX.Element> {
+  const mySelections = await getStudentSelections(studentId)
+  return <StudentMySelectionsSection mySelections={mySelections} />
+}

src/app/(dashboard)/student/elective/error.tsx

@@ -11,8 +11,8 @@ export default function StudentElectiveError({ reset }: { error: Error & { diges
     <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
       <EmptyState
         icon={AlertCircle}
-        title={t("errors.unexpected")}
-        description={t("errors.unexpected")}
+        title={t("errors.title")}
+        description={t("errors.description")}
         action={{
           label: t("actions.retry"),
           onClick: () => reset(),

src/app/(dashboard)/student/elective/loading.tsx

@@ -1,6 +1,9 @@
 import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
 import { Skeleton } from "@/shared/components/ui/skeleton"
 
+/**
+ * 全页骨架屏 - 路由级 loading.tsx 默认导出
+ */
 export default function Loading() {
   return (
     <div className="space-y-8">
@@ -8,6 +11,51 @@ export default function Loading() {
         <Skeleton className="h-8 w-48" />
         <Skeleton className="h-4 w-64" />
       </div>
+      <MySelectionsSkeleton />
+      <AvailableCoursesSkeleton />
+    </div>
+  )
+}
+
+/**
+ * 我的选课区块骨架屏
+ * 用于独立 Suspense 边界 fallback
+ */
+export function MySelectionsSkeleton() {
+  return (
+    <section className="space-y-4" aria-busy="true" aria-label="Loading my selections">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-6 w-32" />
+        <Skeleton className="h-4 w-8" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-5 w-32" />
+              <Skeleton className="mt-2 h-4 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-9 w-28" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * 可选课程区块骨架屏
+ * 用于独立 Suspense 边界 fallback
+ */
+export function AvailableCoursesSkeleton() {
+  return (
+    <section className="space-y-4" aria-busy="true" aria-label="Loading available courses">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-6 w-32" />
+        <Skeleton className="h-4 w-8" />
+      </div>
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {Array.from({ length: 6 }).map((_, i) => (
           <Card key={i}>
@@ -21,6 +69,6 @@ export default function Loading() {
           </Card>
         ))}
       </div>
-    </div>
+    </section>
   )
 }

src/app/(dashboard)/student/elective/page.tsx

@@ -1,10 +1,12 @@
+import { Suspense } from "react"
 import { getTranslations } from "next-intl/server"
-import { getAuthContext } from "@/shared/lib/auth-guard"
+import { requirePermission } from "@/shared/lib/auth-guard"
+import { Permissions } from "@/shared/types/permissions"
 
-import { getAvailableCoursesForStudent, getStudentSelections } from "@/modules/elective/data-access-selections"
-import { StudentSelectionView } from "@/modules/elective/components/student-selection-view"
-import { ElectiveFilters } from "@/modules/elective/components/elective-filters"
-import { getParam, type SearchParams } from "@/shared/lib/search-params"
+import { MySelectionsLoader } from "./_components/my-selections-loader"
+import { AvailableCoursesLoader } from "./_components/available-courses-loader"
+import { MySelectionsSkeleton, AvailableCoursesSkeleton } from "./loading"
+import type { SearchParams } from "@/shared/lib/search-params"
 
 export const dynamic = "force-dynamic"
 
@@ -14,35 +16,24 @@ export default async function StudentElectivePage({
   searchParams: Promise<SearchParams>
 }) {
   const t = await getTranslations("elective")
-  const ctx = await getAuthContext()
+  const ctx = await requirePermission(Permissions.ELECTIVE_READ)
   const studentId = ctx.userId
 
-  const [sp, availableCourses, mySelections] = await Promise.all([
-    searchParams,
-    getAvailableCoursesForStudent(studentId),
-    getStudentSelections(studentId),
-  ])
-
-  const q = (getParam(sp, "q") || "").toLowerCase().trim()
-  const modeFilter = getParam(sp, "mode") || "all"
-
-  const filteredCourses = availableCourses.filter((c) => {
-    if (q && !c.name.toLowerCase().includes(q) && !(c.teacherName?.toLowerCase().includes(q) ?? false)) return false
-    if (modeFilter !== "all" && c.selectionMode !== modeFilter) return false
-    return true
-  })
-
   return (
     <div className="space-y-8">
       <div>
         <h2 className="text-2xl font-bold tracking-tight">{t("title.student")}</h2>
         <p className="text-muted-foreground">{t("description.student")}</p>
       </div>
-      {availableCourses.length > 0 && <ElectiveFilters />}
-      <StudentSelectionView
-        availableCourses={filteredCourses}
-        mySelections={mySelections}
-      />
+      <Suspense fallback={<MySelectionsSkeleton />}>
+        <MySelectionsLoader studentId={studentId} />
+      </Suspense>
+      <Suspense fallback={<AvailableCoursesSkeleton />}>
+        <AvailableCoursesLoader
+          studentId={studentId}
+          searchParams={searchParams}
+        />
+      </Suspense>
     </div>
   )
 }