## 36 · 评分 Rate

### 36.1 用途
让用户对一次体验给出星级评价（商品、物流、服务），或只读展示已有的平均分；移动端与桌面端的关键差别是**没有悬停预览**：桌面上鼠标划过就能预告「点下去会是几分」，触屏上这个预告不存在，所以填充比例（含半星）必须直接可读，且星形本体只有 24px、热区要补到 44px 高，否则手指点不准相邻的两颗星。

### 36.2 结构（anatomy）
- `rate`：根元素，一行里放进「星组 + 数值文案」
- `stars`：星组，横向排列，只负责布局
- `star`：单颗星，可点区域（原生 `button`），自身撑满 44px 高
- `glyph`：星形本体（视觉 24px），由灰底星 + 品牌色覆盖层叠成
- `fill`：覆盖层，宽度即该颗星的填充比例（100% 整星 / 50% 半星 / 0% 未选）
- `text`：数值文案，默认「N 分」，可由默认插槽替换

### 36.3 变体维度
- `size`：`default`（星形 24px）/ `small`（星形 18px，行内展示用）
- `allowHalf`：`false`（只能取整星）/ `true`（允许半星）
- `readonly`：`false`（可评分）/ `true`（只读展示已有评分）

### 36.4 状态
- default：未评分（全部灰底星）
- selected：已评分（填充比例 = 所选分值与满分的比例）
- disabled：置灰且不可聚焦，点击不改值

### 36.5 交互与触控
- **取值规则**：点第 N 颗星取 N 分；`allowHalf=true` 时点第 N 颗星的**左半**取 N-0.5 分、**右半**取 N 分（半星只在开启该项时存在，默认整星）
- 星形本体视觉 24px（`size=small` 时 18px），但每颗星的可点区域高度是 44px；横向不做死区，相邻星的边界就是两半分界
- 一次触摸即取值，不需要二次确认；不响应长按与拖动（拖动选分在触屏上容易滑错，规格未纳入）
- 已选中的部分用**填充比例**表达（半星就是左半填充），不能只靠颜色深浅区分
- 取值后立即触发 change 事件（回传 3.5 这类半星值也是合法输入）
- `readonly=true` 时不渲染任何可点区域（只读展示不抢键盘序列）

### 36.6 无障碍
- 可评分形态：根是 `role="radiogroup"` + `aria-label`，每颗星是原生 `button` + `role="radio"` + `aria-checked`
- 星形的名称是「N 星」（`aria-label`），读屏播报的是分值而不是符号
- 只读形态：整组是一个 `role="img"` + `aria-label`（「评分 4.5 分（满分 5 分）」），组内星形 `aria-hidden`
- 禁用态用原生 `disabled` 并补 `aria-disabled="true"`
- 键盘：聚焦后左右方向键步进（整星模式步长 1，半星模式步长 0.5）

### 36.7 doNotInvent
- 评分的业务含义映射（如「4 分以上算好评」）与统计口径
- 拖动选分与悬停预览（触屏没有悬停，拖动容易滑错）
- 评分理由 / 标签的联动采集（由宿主另行组合）
- 异步提交与失败回滚（宿主负责）

### 36.8 unknowns
- 分值是否允许与文案一一对应（如 1 分「很差」、5 分「很好」）
- 星形换用图标字体或 SVG 后填充比例的表达是否仍然一致
- 只读形态是否要显示评价条数（当前由宿主用插槽补）

---