Files
NextEdu/src/app/(dashboard)/teacher/grades/analytics/page.tsx
SpecialX 1a9377222c feat(app): add error/loading boundaries and update dashboard routes
- Add error.tsx and loading.tsx boundaries for admin, parent, student, teacher routes

- Add dashboard-error-fallback and dashboard-loading-skeleton components

- Add student/learning page, parent/leave routes, teacher textbook components

- Update existing app routes across auth, dashboard, and API endpoints

- Update proxy middleware and next-auth type declarations
2026-06-23 17:38:28 +08:00

202 lines
7.0 KiB
TypeScript

import type { JSX } from "react"
import Link from "next/link"
import { BarChart3, ArrowLeft } from "lucide-react"
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 { getTeacherClasses } from "@/modules/classes/data-access"
import { getGrades } from "@/modules/school/data-access"
import { getSubjectOptions } from "@/modules/school/data-access"
import {
getClassComparison,
getExamOptionsForGrades,
getGradeDistribution,
getGradeTrend,
getSubjectComparison,
} from "@/modules/grades/data-access-analytics"
import { GradeTrendChart } from "@/modules/grades/components/grade-trend-chart"
import { ClassComparisonChart } from "@/modules/grades/components/class-comparison-chart"
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"
export const dynamic = "force-dynamic"
export default async function GradeAnalyticsPage({
searchParams,
}: {
searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
const sp = await searchParams
const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
const classId = getParam(sp, "classId")
const subjectId = getParam(sp, "subjectId")
const gradeId = getParam(sp, "gradeId")
// v3-P2-7: 学期和考试筛选
const examId = getParam(sp, "examId")
const semester = getParam(sp, "semester")
const [classes, allGrades, allSubjects] = await Promise.all([
getTeacherClasses(),
getGrades(),
getSubjectOptions(),
])
if (classes.length === 0) {
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>
</div>
<EmptyState
title="暂无班级"
description="您还没有任何班级。"
icon={BarChart3}
className="border-none shadow-none"
/>
</div>
)
}
const targetClassId = classId ?? classes[0].id
const targetSubjectId =
subjectId && subjectId !== "all" ? subjectId : undefined
const targetGradeId = gradeId ?? allGrades[0]?.id
// v3-P2-7: 解析 semester 和 examId
const targetSemester: "1" | "2" | undefined =
semester === "1" || semester === "2" ? semester : undefined
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,
}),
])
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>
</div>
<Button asChild variant="ghost" size="sm">
<Link href="/teacher/grades">
<ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
</Link>
</Button>
</div>
<AnalyticsFilters
classes={classes.map((c) => ({ id: c.id, name: c.name }))}
grades={allGrades.map((g) => ({ id: g.id, name: g.name }))}
subjects={allSubjects.map((s) => ({ id: s.id, name: s.name ?? "Unknown" }))}
exams={examOptions}
currentClassId={targetClassId}
currentSubjectId={subjectId ?? "all"}
currentGradeId={targetGradeId ?? ""}
currentExamId={examId ?? "all"}
currentSemester={semester ?? "all"}
/>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
<WidgetBoundary title="成绩趋势">
{trend ? (
<GradeTrendChart data={trend} />
) : (
<EmptyState
title="暂无趋势数据"
description="当前筛选条件下没有可显示的成绩趋势。"
icon={BarChart3}
className="border-none shadow-none"
/>
)}
</WidgetBoundary>
<WidgetBoundary title="分数分布">
{distribution.totalCount > 0 ? (
<GradeDistributionChart data={distribution} />
) : (
<EmptyState
title="暂无分布数据"
description="当前筛选条件下没有可显示的分数分布。"
icon={BarChart3}
className="border-none shadow-none"
/>
)}
</WidgetBoundary>
<WidgetBoundary title="科目对比">
{subjectComparison.length > 0 ? (
<SubjectComparisonChart data={subjectComparison} />
) : (
<EmptyState
title="暂无科目对比数据"
description="当前筛选条件下没有可显示的科目对比。"
icon={BarChart3}
className="border-none shadow-none"
/>
)}
</WidgetBoundary>
<WidgetBoundary title="班级对比">
{classComparison.length > 0 ? (
<ClassComparisonChart data={classComparison} />
) : (
<EmptyState
title="暂无班级对比数据"
description="当前筛选条件下没有可显示的班级对比。"
icon={BarChart3}
className="border-none shadow-none"
/>
)}
</WidgetBoundary>
</div>
</div>
)
}