ScoreRing
score-ring评分环 · 半径仪表盘 + A-F 等级带(value→grade tone 映射·纯函数 resolveGrade 可测) + 环心分值/等级 · 区别线性 Meter/Progress·SVG dasharray 非 transform·RSC
用法
基础用法
value 驱动环进度与中心数字，默认满分 100、显示 A-F 等级字。
82
B
质量分
tsx
<ScoreRing value={82} label="质量分" />等级带
默认 A-F 等级带按分值自动取色：A 优秀 / B 良好 / C 及格 / F 不及格。
95
A
质量分
82
B
质量分
68
D
质量分
42
F
质量分
tsx
<>
<ScoreRing value={95} label="质量分" />
<ScoreRing value={82} label="质量分" />
<ScoreRing value={68} label="质量分" />
<ScoreRing value={42} label="质量分" />
</>尺寸与环宽
size 控直径、thickness 控环宽；小尺寸可 showGrade={false} 只留数字。
88
88
B
质量分
88
B
质量分
tsx
<>
<ScoreRing value={88} size={48} thickness={5} showGrade={false} />
<ScoreRing value={88} size={96} thickness={8} label="质量分" />
<ScoreRing value={88} size={128} thickness={12} label="质量分" />
</>何时用
把一个分值（质量分/健康度/评级）显示成圆环仪表盘，按 value 落入 A–F 等级带自动着色，环心显示分值与等级。要圆环用本组件；要线性进度/容量用 [Meter]/[Progress]；要趋势用 Sparkline。可 RSC（SVG dasharray 渲染，非 transform 动画）。
导入
ts
import { ScoreRing, resolveGrade, DEFAULT_GRADES } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value* | number | — | 当前分值 |
| max | number | 100 | 满分 |
| grades | Grade[] | — | 等级带（不传用默认 A-F，即 DEFAULT_GRADES） |
| size | number | 96 | 直径 px |
| thickness | number | 8 | 环宽 px |
| showGrade | boolean | true | 是否显示等级字 |
| className | string | — | 自定义类 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label | ReactNode | 环心副标签（如「质量分」） |
禁忌 / 坑
暂无已知坑。等级颜色由 resolveGrade(value, max, grades) 纯函数映射；自定义评级体系传 grades 覆盖默认 A–F。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · Badge · Dot
Playground
82
B
质量分
<ScoreRing value={82} size={96} thickness={8} label="质量分" />