refactor(dashboard): V2 审计重构 — i18n 补齐 + 共享抽象 + 单测 + a11y
V2 审计报告(docs/architecture/audit/dashboard-audit-report-v2.md)发现并修复: - P0 i18n:10 个子组件硬编码字符串全部接入 next-intl(teacher-quick-actions / teacher-classes-card / teacher-homework-card / teacher-schedule / recent-submissions / teacher-grade-trends / student-grades-card / student-today-schedule-card / student-upcoming-assignments-card / admin-dashboard),新增 ~50 个翻译键 - P1 共享抽象:新增 DashboardGreetingHeader 组件,消除 teacher/student 头部 90% 重复代码,两个 Header 改为薄包装 - P2 单测:为 6 个纯函数添加 31 个单元测试 (tests/integration/dashboard/dashboard-utils.test.ts) - P2 a11y:admin 表格 caption、teacher/student 视图语义化标签 (header / section aria-label / aside aria-label) - 同步架构图 004/005
This commit is contained in:
@@ -1,26 +1,13 @@
|
||||
"use client"
|
||||
|
||||
import { useTranslations } from "next-intl"
|
||||
import { formatLongDate } from "@/shared/lib/utils"
|
||||
import { getGreetingKey } from "@/modules/dashboard/lib/dashboard-utils"
|
||||
import { DashboardGreetingHeader } from "../dashboard-greeting-header"
|
||||
|
||||
interface StudentDashboardHeaderProps {
|
||||
studentName: string
|
||||
}
|
||||
|
||||
export function StudentDashboardHeader({ studentName }: StudentDashboardHeaderProps) {
|
||||
const t = useTranslations("dashboard")
|
||||
const today = formatLongDate(new Date())
|
||||
const greetingKey = getGreetingKey(new Date())
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
{t(`greeting.${greetingKey}`)},{studentName}
|
||||
</h2>
|
||||
<p className="text-muted-foreground">{t("greeting.todayIs", { date: today })}</p>
|
||||
</div>
|
||||
</div>
|
||||
<DashboardGreetingHeader userName={studentName} />
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
import type { StudentDashboardProps } from "@/modules/dashboard/types"
|
||||
|
||||
import { DashboardSection } from "../dashboard-section"
|
||||
@@ -17,9 +19,12 @@ export async function StudentDashboard({
|
||||
upcomingAssignments,
|
||||
grades,
|
||||
}: StudentDashboardProps) {
|
||||
const t = await getTranslations("dashboard")
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<StudentDashboardHeader studentName={studentName} />
|
||||
<header>
|
||||
<StudentDashboardHeader studentName={studentName} />
|
||||
</header>
|
||||
|
||||
<DashboardSection variant="stats">
|
||||
<StudentStatsGrid
|
||||
@@ -32,19 +37,22 @@ export async function StudentDashboard({
|
||||
</DashboardSection>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<section
|
||||
aria-label={t("sections.upcomingAssignments")}
|
||||
className="lg:col-span-2 space-y-6"
|
||||
>
|
||||
<DashboardSection variant="list">
|
||||
<StudentUpcomingAssignmentsCard upcomingAssignments={upcomingAssignments} />
|
||||
</DashboardSection>
|
||||
<DashboardSection variant="card">
|
||||
<StudentGradesCard grades={grades} />
|
||||
</DashboardSection>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
</section>
|
||||
<aside aria-label={t("sections.todaySchedule")} className="space-y-6">
|
||||
<DashboardSection variant="card">
|
||||
<StudentTodayScheduleCard items={todayScheduleItems} />
|
||||
</DashboardSection>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
|
||||
import Link from "next/link"
|
||||
import { BarChart3 } from "lucide-react"
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
|
||||
import { TrendLineChart } from "@/shared/components/charts/trend-line-chart"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
@@ -10,6 +12,7 @@ import { formatDate } from "@/shared/lib/utils"
|
||||
import type { StudentDashboardGradeProps } from "@/modules/homework/types"
|
||||
|
||||
export function StudentGradesCard({ grades }: { grades: StudentDashboardGradeProps }) {
|
||||
const t = useTranslations("dashboard")
|
||||
const hasGradeTrend = grades.trend.length > 0
|
||||
const hasRecentGrades = grades.recent.length > 0
|
||||
|
||||
@@ -26,13 +29,20 @@ export function StudentGradesCard({ grades }: { grades: StudentDashboardGradePro
|
||||
|
||||
return (
|
||||
<ChartCardShell
|
||||
title="Recent Grades"
|
||||
title={t("sections.recentGrades")}
|
||||
icon={BarChart3}
|
||||
iconClassName="text-muted-foreground"
|
||||
isEmpty={!hasGradeTrend}
|
||||
emptyTitle="No graded work yet"
|
||||
emptyDescription="Finish and submit assignments to see your score trend."
|
||||
emptyTitle={t("empty.noGradedWork")}
|
||||
emptyDescription={t("empty.noGradedWorkDesc")}
|
||||
emptyClassName="h-72"
|
||||
action={
|
||||
hasGradeTrend ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/student/grades">{t("quickActions.viewAll")}</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border bg-card p-4">
|
||||
@@ -41,7 +51,7 @@ export function StudentGradesCard({ grades }: { grades: StudentDashboardGradePro
|
||||
series={[
|
||||
{
|
||||
dataKey: "score",
|
||||
name: "Score (%)",
|
||||
name: t("chart.scorePercent"),
|
||||
color: "hsl(var(--primary))",
|
||||
dotRadius: 4,
|
||||
activeDotRadius: 6,
|
||||
@@ -56,13 +66,13 @@ export function StudentGradesCard({ grades }: { grades: StudentDashboardGradePro
|
||||
{latestGrade ? (
|
||||
<div className="mt-3 flex items-center justify-between text-sm text-muted-foreground">
|
||||
<div>
|
||||
Latest:{" "}
|
||||
{t("chart.latest")}:{" "}
|
||||
<span className="font-medium text-foreground tabular-nums">
|
||||
{Math.round(latestGrade.percentage)}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
Points:{" "}
|
||||
{t("chart.points")}:{" "}
|
||||
<span className="font-medium text-foreground tabular-nums">
|
||||
{latestGrade.score}/{latestGrade.maxScore}
|
||||
</span>
|
||||
@@ -76,9 +86,9 @@ export function StudentGradesCard({ grades }: { grades: StudentDashboardGradePro
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Assignment</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">When</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.assignment")}</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.score")}</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.when")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useMemo } from "react"
|
||||
import Link from "next/link"
|
||||
import { CalendarDays, CalendarX } from "lucide-react"
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
@@ -12,18 +13,15 @@ import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
import type { StudentTodayScheduleItem } from "@/modules/dashboard/types"
|
||||
|
||||
/**
|
||||
* Parse "HH:MM" time string into minutes since midnight for comparison.
|
||||
*/
|
||||
const timeToMinutes = (t: string): number => {
|
||||
const [h, m] = t.split(":").map(Number)
|
||||
return (h ?? 0) * 60 + (m ?? 0)
|
||||
}
|
||||
|
||||
export function StudentTodayScheduleCard({ items }: { items: StudentTodayScheduleItem[] }) {
|
||||
const t = useTranslations("dashboard")
|
||||
const hasSchedule = items.length > 0
|
||||
|
||||
// Compute current/next class status based on client time
|
||||
const { currentId, nextId } = useMemo(() => {
|
||||
const now = new Date()
|
||||
const nowMin = now.getHours() * 60 + now.getMinutes()
|
||||
@@ -49,18 +47,18 @@ export function StudentTodayScheduleCard({ items }: { items: StudentTodaySchedul
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CalendarDays className="h-4 w-4 text-muted-foreground" />
|
||||
Today's Schedule
|
||||
{t("sections.todaySchedule")}
|
||||
</CardTitle>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/student/schedule">View all</Link>
|
||||
<Link href="/student/schedule">{t("quickActions.viewAll")}</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasSchedule ? (
|
||||
<EmptyState
|
||||
icon={CalendarX}
|
||||
title="No classes today"
|
||||
description="Your timetable is clear for today."
|
||||
title={t("empty.noClassesToday")}
|
||||
description={t("empty.noClassesTodayDesc")}
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
@@ -74,14 +72,14 @@ export function StudentTodayScheduleCard({ items }: { items: StudentTodaySchedul
|
||||
if (isCurrent) {
|
||||
return (
|
||||
<Badge className="shrink-0 bg-emerald-500 text-white hover:bg-emerald-500">
|
||||
In Progress
|
||||
{t("badge.inProgress")}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
if (isNext) {
|
||||
return (
|
||||
<Badge variant="outline" className="shrink-0 border-primary text-primary">
|
||||
Up Next
|
||||
{t("badge.upNext")}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Link from "next/link"
|
||||
import { PenTool } from "lucide-react"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
@@ -14,11 +15,11 @@ import {
|
||||
STUDENT_HOMEWORK_PROGRESS_LABEL,
|
||||
} from "@/modules/homework/types"
|
||||
|
||||
const getActionLabel = (status: string) => {
|
||||
if (status === "graded") return "Review"
|
||||
if (status === "submitted") return "View"
|
||||
if (status === "in_progress") return "Continue"
|
||||
return "Start"
|
||||
const getActionLabelKey = (status: string): "action.review" | "action.view" | "action.continue" | "action.start" => {
|
||||
if (status === "graded") return "action.review"
|
||||
if (status === "submitted") return "action.view"
|
||||
if (status === "in_progress") return "action.continue"
|
||||
return "action.start"
|
||||
}
|
||||
|
||||
const getActionVariant = (status: string): "default" | "secondary" | "outline" => {
|
||||
@@ -33,12 +34,13 @@ const getDueUrgency = (dueAt: string | null) => {
|
||||
const diffHours = (due.getTime() - now.getTime()) / (1000 * 60 * 60)
|
||||
|
||||
if (diffHours < 0) return "overdue"
|
||||
if (diffHours < 48) return "urgent" // 2 days
|
||||
if (diffHours < 120) return "warning" // 5 days
|
||||
if (diffHours < 48) return "urgent"
|
||||
if (diffHours < 120) return "warning"
|
||||
return "normal"
|
||||
}
|
||||
|
||||
export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
|
||||
export async function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
|
||||
const t = await getTranslations("dashboard")
|
||||
const hasAssignments = upcomingAssignments.length > 0
|
||||
|
||||
return (
|
||||
@@ -46,18 +48,18 @@ export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomi
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PenTool className="h-4 w-4 text-muted-foreground" />
|
||||
Upcoming Assignments
|
||||
{t("sections.upcomingAssignments")}
|
||||
</CardTitle>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/student/learning/assignments">View all</Link>
|
||||
<Link href="/student/learning/assignments">{t("quickActions.viewAll")}</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasAssignments ? (
|
||||
<EmptyState
|
||||
icon={PenTool}
|
||||
title="No assignments"
|
||||
description="You have no assigned homework right now."
|
||||
title={t("empty.noAssignmentsStudent")}
|
||||
description={t("empty.noAssignmentsStudentDesc")}
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
@@ -65,18 +67,18 @@ export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomi
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Title</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Status</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Due</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground text-right">Action</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.title")}</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.status")}</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.due")}</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.score")}</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground text-right">{t("table.action")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{upcomingAssignments.map((a) => {
|
||||
const urgency = getDueUrgency(a.dueAt)
|
||||
const isGraded = a.progressStatus === "graded"
|
||||
|
||||
|
||||
return (
|
||||
<TableRow key={a.id} className="h-12">
|
||||
<TableCell className="font-medium">
|
||||
@@ -85,7 +87,7 @@ export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomi
|
||||
{a.title}
|
||||
</Link>
|
||||
{!isGraded && urgency === "overdue" && (
|
||||
<Badge variant="destructive" className="h-5 px-1.5 text-[10px] uppercase">Late</Badge>
|
||||
<Badge variant="destructive" className="h-5 px-1.5 text-[10px] uppercase">{t("badge.late")}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -107,7 +109,7 @@ export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomi
|
||||
<TableCell className="text-right">
|
||||
<Button asChild size="sm" variant={getActionVariant(a.progressStatus)} className="h-7 text-xs">
|
||||
<Link href={`/student/learning/assignments/${a.id}`}>
|
||||
{getActionLabel(a.progressStatus)}
|
||||
{t(getActionLabelKey(a.progressStatus))}
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
|
||||
Reference in New Issue
Block a user