refactor(attendance,elective): 审计第二轮 — 全量完成 P0/P1 改进项
P0 修复: - 页面层 i18n 全量补齐(admin/teacher/parent/student × attendance/elective) - types.ts 状态标签常量迁移至 constants.ts(i18n key + Badge variant) - 修复 getTranslations 导入路径(next-intl → next-intl/server) P1 改进: - 解耦 parent 模块对 attendance 类型的直接依赖(本地 view-model 类型) - 导出纯函数(computeStats/buildWarnings/buildLotteryRankCase 等) - 统一空状态为 EmptyState 组件 - 清理死代码读 Action(attendance 5 个 + elective 3 个) - 预留监控埋点接口(trackEvent 13 个新事件名) - 补齐骨架屏 loading.tsx(8 个页面) - AlertDialog 替换 window.confirm(student-selection-view) - a11y 改进(aria-label/role/键盘导航) 修复: - AttendanceStatus 从 constants.ts 重导出,消除 types/constants 双源混乱 - buildWarnings 的 Translator 类型改用 ReturnType<typeof useTranslations>
This commit is contained in:
130
src/modules/parent/components/parent-attendance-rate-card.tsx
Normal file
130
src/modules/parent/components/parent-attendance-rate-card.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client"
|
||||
|
||||
import { CalendarCheck, CalendarX, Clock, TrendingUp } from "lucide-react"
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { Card } from "@/shared/components/ui/card"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
import type { ParentStudentAttendanceSummary } from "@/modules/parent/types"
|
||||
|
||||
type AggregateStats = {
|
||||
totalStudents: number
|
||||
avgPresentRate: number
|
||||
totalAbsent: number
|
||||
totalLate: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 聚合多个子女的考勤统计(纯函数,便于测试)。
|
||||
*/
|
||||
export function aggregateStats(
|
||||
summaries: ParentStudentAttendanceSummary[],
|
||||
): AggregateStats {
|
||||
if (summaries.length === 0) {
|
||||
return { totalStudents: 0, avgPresentRate: 0, totalAbsent: 0, totalLate: 0 }
|
||||
}
|
||||
const totalStudents = summaries.length
|
||||
const sumRate = summaries.reduce(
|
||||
(sum, s) => sum + (s.stats.total > 0 ? s.stats.presentRate : 0),
|
||||
0,
|
||||
)
|
||||
const avgPresentRate = sumRate / totalStudents
|
||||
const totalAbsent = summaries.reduce((sum, s) => sum + s.stats.absent, 0)
|
||||
const totalLate = summaries.reduce((sum, s) => sum + s.stats.late, 0)
|
||||
return { totalStudents, avgPresentRate, totalLate, totalAbsent }
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据出勤率返回语气色调(纯函数,便于测试)。
|
||||
*/
|
||||
export function rateTone(rate: number): "good" | "warn" | "bad" {
|
||||
if (rate >= 95) return "good"
|
||||
if (rate >= 90) return "warn"
|
||||
return "bad"
|
||||
}
|
||||
|
||||
const TONE_STYLES: Record<"good" | "warn" | "bad", string> = {
|
||||
good: "text-emerald-600",
|
||||
warn: "text-amber-600",
|
||||
bad: "text-destructive",
|
||||
}
|
||||
|
||||
/**
|
||||
* 家长考勤页顶部的出勤率汇总卡片。
|
||||
* 聚合所有子女的出勤率、缺勤、迟到总数,让家长一眼掌握整体情况。
|
||||
*/
|
||||
export function ParentAttendanceRateCard({
|
||||
summaries,
|
||||
}: {
|
||||
summaries: ParentStudentAttendanceSummary[]
|
||||
}) {
|
||||
const t = useTranslations("attendance")
|
||||
const stats = aggregateStats(summaries)
|
||||
if (stats.totalStudents === 0) return null
|
||||
|
||||
const tone = rateTone(stats.avgPresentRate)
|
||||
const rateLabel =
|
||||
stats.avgPresentRate >= 95
|
||||
? t("parent.rateExcellent")
|
||||
: stats.avgPresentRate >= 90
|
||||
? t("parent.rateNeedsAttention")
|
||||
: t("parent.rateBelowStandard")
|
||||
|
||||
return (
|
||||
<Card className="p-4" aria-label={t("parent.rateCardTitle")}>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<TrendingUp className="h-3 w-3" aria-hidden />
|
||||
{t("stats.attendanceRate")}
|
||||
</div>
|
||||
<div className={cn("text-2xl font-bold tabular-nums", TONE_STYLES[tone])}>
|
||||
{stats.avgPresentRate.toFixed(1)}%
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">{rateLabel}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<CalendarCheck className="h-3 w-3" aria-hidden />
|
||||
{t("parent.children")}
|
||||
</div>
|
||||
<div className="text-2xl font-bold tabular-nums">{stats.totalStudents}</div>
|
||||
<div className="text-xs text-muted-foreground">{t("parent.linked")}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<CalendarX className="h-3 w-3" aria-hidden />
|
||||
{t("stats.absent")}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-2xl font-bold tabular-nums",
|
||||
stats.totalAbsent > 0 && "text-destructive",
|
||||
)}
|
||||
>
|
||||
{stats.totalAbsent}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">{t("parent.thisPeriod")}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock className="h-3 w-3" aria-hidden />
|
||||
{t("stats.late")}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-2xl font-bold tabular-nums",
|
||||
stats.totalLate > 0 && "text-amber-600",
|
||||
)}
|
||||
>
|
||||
{stats.totalLate}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">{t("parent.thisPeriod")}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user