n-rate 评分
打分/评级组件：一排可点选、可横滑的星级格子，适用订单评价、商品评分、满意度调查等场景。图形三档：默认内置星形（开箱即用）、图标名 prop 换形、插槽全定制，组件负责取值、状态与交互。支持半星（点选同格连点降级、滑动 0.5 步进）与任意小数按比例裁切显示。
- 不给插槽时默认渲染
star-fill/star（内置 n-icon，active-icon/inactive-icon可换形）；图形走「底图 + 蒙层」双层：每格恒渲未选中图形作底，选中部分按填充比例裁切选中图形盖在上面。两槽各自独立生效：#iconActive供选中图形、#icon供未选中图形；只给#iconActive一个槽时底图复用它并整体降透明——一颗星即成型。插槽存在性在组件创建时判定（非响应式）：同一实例运行期增删插槽不会切换通道，需要在插槽/内置两路间动态切换时用:key重建节点- 组件看不见插槽内容，
color/voidColor通过 CSS 变量（--n-rate-color/--n-rate-void-color）下发给插槽图形与内部 n-icon，图形里用var()引用即可跟随属性；内部 n-icon 已自动引用，color/void-color非空即联动- 显示侧任意小数按比例裁切（3.5 = 3 颗整星 + 半颗，3.7 = 3 颗 + 0.7 颗，评分回显直接传）；
allow-half只控制交互取值步长（点选同格连点依次降为半星/空，滑动按 0.5 步进）
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 当前评分，0 ~ count（0 = 未选）；小数按比例裁切显示（如 3.5 = 3 颗整星 + 半颗，3.7 = 3 颗 + 0.7 颗） | Number | 0 | - |
| count | 星级总数（非整数向下取整；小于 1 或非法值按 1 处理） | Number | 5 | - |
| size | 单元格边长 px（正方形格子，小于 1 按 1 处理；插槽图形与内部 n-icon 的 size 均建议与此一致） | Number | 24 | - |
| gutter | 格间距 px：挂在格子的 margin-left 上（首格除外，行尾不占宽，负值按 0 处理）；滑动换算步长随之联动 | Number | 0 | - |
| allow-half | 半星模式：点选同格连点依次降为半星、空，滑动按 0.5 步进取值；显示侧任意小数按比例裁切，不受此开关限制 | Boolean | false | - |
| min-count | 最少星数：点选与滑动的取值下限（0 = 不限，负值按 0、超过 count 按 count 处理；外部传入的显示值不受钳制） | Number | 0 | - |
| touchable | 可滑动：false 时仅保留点选，根节点手势让位页面滚动 | Boolean | true | - |
| active-icon | 选中态图标名：未提供 #iconActive 插槽时，组件内部用 n-icon 渲染此图标；空串 = 无内置选中图形（需插槽提供） | String | star-fill | n-icon 名称 |
| inactive-icon | 未选中态图标名：未提供 #icon 插槽且未复用 #iconActive 时，组件内部用 n-icon 渲染；空串 = 无内置未选中图形 | String | star | n-icon 名称 |
| readonly | 只读：纯展示，拦截点选与滑动，无视觉降级（评价展示、结果回显场景） | Boolean | false | - |
| disabled | 禁用：保色相整体降透明（--n-rate-disabled-opacity），拦截点选与滑动 | Boolean | false | - |
| color | 选中色：非空时写入 --n-rate-color 变量供插槽图形与内部 n-icon 引用；空串 = 不设变量，回落兜底色 #f59e0b | String | "" | 与 css 相同 |
| void-color | 未选中色：非空时写入 --n-rate-void-color 变量供插槽图形与内部 n-icon 引用；空串 = 不设变量，回落兜底色 #d1d5db | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内，如 n-rate--end 右对齐） | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 点选或滑动改变评分后触发，参数为最新评分值；配合 :model-value 手动双向绑定 | 最新评分值 |
| change | 评分变化时触发，参数为最新评分值（语义化入口，与 update:modelValue 同时发出） | 最新评分值 |
插槽
| 插槽名 | 说明 |
|---|---|
| iconActive | 选中态图形（每格一个实例，蒙层按填充比例裁切）；提供后覆盖内置 active-icon |
| icon | 未选中态图形（每格一个实例，作底图恒渲）；提供后覆盖内置 inactive-icon，独立生效。未提供且仅有 iconActive 槽时，底图复用 iconActive 图形并整体降透明（--n-rate-void-opacity） |
主题令牌
| 令牌 | 默认值 | 说明 |
|---|---|---|
| --n-rate-disabled-opacity | 0.5 | 禁用态整体透明度（保色相降透明） |
| --n-rate-void-opacity | 0.35 | 底图复用选中图形（仅有 #iconActive 槽）时的整体透明度 |
另有两个 prop 驱动的运行时变量：color / void-color 非空时写入根节点 --n-rate-color / --n-rate-void-color，供插槽图形与内部 n-icon 用 var() 引用（见属性表）。
实现说明
与参考实现（同类评分组件）的机制对照：
| 机制 | 参考做法 | 本库做法 | 分歧理由 |
|---|---|---|---|
| 小数回显 | un/fui 半星专用图标或丢小数取整；cl 同款底图 + 蒙层按比例裁切（宽度经 prop 下发） | 底图 + 蒙层双层：任意小数按填充比例裁切选中图形（3.7 = 3 颗 + 0.7 颗） | 与 cl 同路径，并让三档图形（双插槽/单槽复用/内置图标）共用同一条裁切管线；不依赖半星专用字形（un/fui 路线丢任意小数） |
| 半星点选 | un 按落点左半/右半给半星或整星；fui 左侧固定比例阈值（halfRate 默认 20%）；cl 同款连点降级链 | 同格连点降级链：n → n-0.5 → 空 → 再点回 n | 与 cl 一致（连点可预期、拇指不必精确落点）；不收 un/fui 的位置阈值（分界在移动端误触率高） |
| 滑动取值 | un/fui 覆盖距离 / (size + spacing) 换算；cl 仅 touchstart 点选 | 同款公式 (x - 根左缘) / (size + gutter)，整星向上取整、半星按 0.5 步进 |
与 un/fui 公式一致；另加轴向锁定（首位移 ≥8px 判横竖，纵向让位页面滚动） |
| 值通道 | change 纯值 / change({score, param}) 对象载荷 / update + change 双发 | update:modelValue 与 change 同参纯值双发 | v-model 标准通道 + 语义事件；业务自带上下文，对象载荷徒增解构负担 |
| minCount 默认 | 默认 1（不能清到 0）；或无此能力 | 默认 0（不限），需要下限显式传 | 未评分是真实初始态（0 = 未选）；强制下限属业务约束 |
| 禁用视觉 | un/fui disabledColor 专用灰色；cl 保色相降透明（同款 opacity-50） | 保色相整体降透明（--n-rate-disabled-opacity 0.5）+ 事件拦截 | 与 cl 及库内禁用统一规范一致；灰色会在深浅主题与自定义色下失衡 |
| readonly | 部分参考与 disabled 合并为一个开关 | 独立开关：纯展示契约，无视觉降级 | 评价回显场景语义就是只读而非不可用，不应带禁用视觉 |
| 图形定制 | 图标名 prop；或全量 class 通道（star-class） | 图标名 prop（便捷通道）+ 双插槽（全定制），插槽色彩经 CSS 变量下发 | 星级图形即组件本体（库内图标族条款，用户确认开放图标名 prop）；插槽覆盖自绘需求，class 通道与令牌体系冲突 |
| 分数回显 | showScore 组件内开关 | 不设：与 n-text 组合（<n-rate readonly /> + <n-text>3.5 分</n-text>） |
文案字号/颜色/位置是布局职责，组合优于内置耦合 |
| 未收项 | halfRate 点击比例阈值（连点降级已覆盖）；param 事件载荷；disabledColor；半星专用图标 | 见左列对应行的做法 | 见左列说明 |