feat: 完成 P1 全部功能 + 修复 proxy 导出 + 切换 MySQL 端口至 14013
## P1 功能（20 项） - 站内消息系统、家长仪表盘、学生考勤管理 - Excel 导入导出、用户批量导入、成绩导出 - 排课规则+自动排课+课表调整 - 成绩趋势+对比分析、密码安全策略、速率限制 - 数据变更日志、文件预览+存储策略、全文检索 - 依赖审计集成 CI、数据库定时备份、E2E 测试完善 - 通知偏好管理 ## 基础设施修复 - src/proxy.ts: 将 middleware 导出重命名为 proxy（Next.js 16 要求） - .env: MySQL 端口从 13002 切换至 14013 - scripts/create-db.ts: 新增数据库初始化脚本 ## 架构文档同步 - 004_architecture_impact_map.md 和 005_architecture_data.json 完整记录所有新增表、模块、路由、权限、依赖关系
This commit is contained in:
SpecialX
259
src/app/(dashboard)/teacher/grades/analytics/page.tsx
Normal file
259
src/app/(dashboard)/teacher/grades/analytics/page.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import Link from "next/link"
|
||||
import { BarChart3, ArrowLeft } from "lucide-react"
|
||||
import { asc } from "drizzle-orm"
|
||||
|
||||
import { db } from "@/shared/db"
|
||||
import { subjects } from "@/shared/db/schema"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { getAuthContext } from "@/shared/lib/auth-guard"
|
||||
import { getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { getGrades } from "@/modules/school/data-access"
|
||||
|
||||
import {
|
||||
getClassComparison,
|
||||
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"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
export default async function GradeAnalyticsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<SearchParams>
|
||||
}) {
|
||||
const sp = await searchParams
|
||||
const ctx = await getAuthContext()
|
||||
|
||||
const classId = getParam(sp, "classId")
|
||||
const subjectId = getParam(sp, "subjectId")
|
||||
const gradeId = getParam(sp, "gradeId")
|
||||
|
||||
const [classes, allGrades, allSubjects] = await Promise.all([
|
||||
getTeacherClasses(),
|
||||
getGrades(),
|
||||
db.query.subjects.findMany({
|
||||
orderBy: [asc(subjects.order), asc(subjects.name)],
|
||||
}),
|
||||
])
|
||||
|
||||
if (classes.length === 0) {
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Grade Analytics</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Trend analysis, class comparisons, and score distributions.
|
||||
</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
title="No classes"
|
||||
description="You don't have any classes yet."
|
||||
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
|
||||
|
||||
// Run analytics queries in parallel
|
||||
const [trend, distribution, subjectComparison, classComparison] =
|
||||
await Promise.all([
|
||||
getGradeTrend({
|
||||
classId: targetClassId,
|
||||
subjectId: targetSubjectId,
|
||||
scope: ctx.dataScope,
|
||||
currentUserId: ctx.userId,
|
||||
}),
|
||||
getGradeDistribution({
|
||||
classId: targetClassId,
|
||||
subjectId: targetSubjectId,
|
||||
scope: ctx.dataScope,
|
||||
currentUserId: ctx.userId,
|
||||
}),
|
||||
getSubjectComparison({
|
||||
classId: targetClassId,
|
||||
scope: ctx.dataScope,
|
||||
}),
|
||||
targetGradeId
|
||||
? getClassComparison({
|
||||
gradeId: targetGradeId,
|
||||
subjectId: targetSubjectId ?? allSubjects[0]?.id ?? "",
|
||||
scope: ctx.dataScope,
|
||||
})
|
||||
: Promise.resolve([]),
|
||||
])
|
||||
|
||||
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>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Grade Analytics</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Trend analysis, class comparisons, and score distributions.
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/teacher/grades">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Grades
|
||||
</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" }))}
|
||||
currentClassId={targetClassId}
|
||||
currentSubjectId={subjectId ?? "all"}
|
||||
currentGradeId={targetGradeId ?? ""}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<GradeTrendChart data={trend} />
|
||||
<GradeDistributionChart data={distribution} />
|
||||
<SubjectComparisonChart data={subjectComparison} />
|
||||
<ClassComparisonChart data={classComparison} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface AnalyticsFiltersProps {
|
||||
classes: Array<{ id: string; name: string }>
|
||||
grades: Array<{ id: string; name: string }>
|
||||
subjects: Array<{ id: string; name: string }>
|
||||
currentClassId: string
|
||||
currentSubjectId: string
|
||||
currentGradeId: string
|
||||
}
|
||||
|
||||
function AnalyticsFilters({
|
||||
classes,
|
||||
grades,
|
||||
subjects,
|
||||
currentClassId,
|
||||
currentSubjectId,
|
||||
currentGradeId,
|
||||
}: AnalyticsFiltersProps) {
|
||||
const buildHref = (overrides: {
|
||||
classId?: string
|
||||
subjectId?: string
|
||||
gradeId?: string
|
||||
}) => {
|
||||
const params = new URLSearchParams()
|
||||
params.set(
|
||||
"classId",
|
||||
overrides.classId !== undefined ? overrides.classId : currentClassId
|
||||
)
|
||||
params.set(
|
||||
"subjectId",
|
||||
overrides.subjectId !== undefined ? overrides.subjectId : currentSubjectId
|
||||
)
|
||||
if (
|
||||
overrides.gradeId !== undefined
|
||||
? overrides.gradeId
|
||||
: currentGradeId
|
||||
) {
|
||||
params.set(
|
||||
"gradeId",
|
||||
overrides.gradeId !== undefined ? overrides.gradeId : currentGradeId
|
||||
)
|
||||
}
|
||||
return `/teacher/grades/analytics?${params.toString()}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">Class</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{classes.map((c) => (
|
||||
<a
|
||||
key={c.id}
|
||||
href={buildHref({ classId: c.id })}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
|
||||
c.id === currentClassId
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "bg-background hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{c.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">Subject</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<a
|
||||
href={buildHref({ subjectId: "all" })}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
|
||||
currentSubjectId === "all"
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "bg-background hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</a>
|
||||
{subjects.map((s) => (
|
||||
<a
|
||||
key={s.id}
|
||||
href={buildHref({ subjectId: s.id })}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
|
||||
s.id === currentSubjectId
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "bg-background hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{s.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">
|
||||
Grade (for class comparison)
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{grades.map((g) => (
|
||||
<a
|
||||
key={g.id}
|
||||
href={buildHref({ gradeId: g.id })}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
|
||||
g.id === currentGradeId
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "bg-background hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{g.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user