95145cd03b
- Add ranking-trend-card and school-wide-summary-card for broader analytics - Add score-cell and grade-filters components for table rendering - Add scope-filter and type-guards lib utilities for grade data filtering - Update actions, data-access (analytics, ranking, main), stats-service, export - Update schema, types, and grade-utils lib - Update all grade chart and report components (distribution, trend, comparison, query)
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
"use client"
|
||
|
||
import type { JSX } from "react"
|
||
import { cn } from "@/shared/lib/utils"
|
||
|
||
/**
|
||
* v4-P1-7: 成绩单元格组件，根据得分率着色。
|
||
*
|
||
* 着色规则（对标 PowerSchool / Canvas / 超星学习通）：
|
||
* - 得分率 < 60%：红色（不及格）
|
||
* - 得分率 60% ~ 84%：黄色（及格但未达优秀）
|
||
* - 得分率 ≥ 85%：绿色（优秀）
|
||
* - fullScore <= 0：不着色（异常数据，避免除零）
|
||
*
|
||
* 使用语义化的 Tailwind 类名，避免动态拼接。
|
||
*/
|
||
export function ScoreCell({
|
||
score,
|
||
fullScore,
|
||
className,
|
||
}: {
|
||
score: number
|
||
fullScore: number
|
||
className?: string
|
||
}): JSX.Element {
|
||
const ratio = fullScore > 0 ? score / fullScore : 1
|
||
const isFail = ratio < 0.6
|
||
const isExcellent = ratio >= 0.85
|
||
|
||
const colorClass = isFail
|
||
? "text-red-600 font-semibold"
|
||
: isExcellent
|
||
? "text-green-600 font-semibold"
|
||
: "text-yellow-600 font-medium"
|
||
|
||
return (
|
||
<span className={cn("font-mono tabular-nums", colorClass, className)}>
|
||
{score} / {fullScore}
|
||
</span>
|
||
)
|
||
}
|