n-circle-progress 环形进度条
展示操作或任务的当前进度（上传 / 下载 / 加载完成度）的圆环形态：轨道环 + 进度弧，percent 驱动进度动画（每变动 1% 所需毫秒数可调，0 关动画直接到位），动画到位派发 activeend。中心悬浮百分比文字（unit 后缀可换），默认插槽整位替换中心内容。起始角与顺 / 逆时针方向可调，进度弧为实色，轨道色默认跟随主题深浅。与 n-progress（线性进度条）互补。
- 零配置即用：
<n-circle-progress :percent="40" />出一个品牌色进度环，中心悬浮百分比文字- 进度动画：
percent变化从当前显示值续播到新目标（挂载从 0 起步入场），duration调速、0 关动画；到位派发activeend（参数为到达值）- 中心自定义：默认插槽整位替换内置百分比（如图标 + 文案组合的加载完成态）；
start-angle/clockwise调起始角与方向
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
如何调用
html
<n-circle-progress :percent="40" />API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| percent | number | 0 | 进度百分比 0~100，越界自动夹取到边界；支持小数（到位后文字按原值显示） |
| size | number | 120 | 圆环直径（px）；中心文字区随之中置 |
| strokeWidth | number | 8 | 环线宽度（px） |
| color | string | "" | 进度弧颜色；空 = 品牌色（跟随 --n-color-primary）。仅实色（渐变不收，见实现说明） |
| inactiveColor | string | "" | 轨道环颜色；空 = 次级表面色（跟随主题深浅自动）；transparent 关闭轨道（纯进度弧形态） |
| showText | boolean | true | 中心显示百分比文字（unit 拼接在后）；提供插槽时显示插槽内容（整位替换） |
| unit | string | "%" | 百分比文字后缀单位 |
| textSize | number | 16 | 中心文字字号（px） |
| textColor | string | "" | 中心文字颜色；空 = 主题墨色（深浅自动） |
| textStyle | string | "" | 中心文字行内样式（如 "font-weight:600"）；仅对内置百分比文本生效 |
| duration | number | 15 | 进度动画速度：进度每变动 1% 所需毫秒数；0 = 关闭动画（直接到位） |
| clockwise | boolean | true | 进度方向：true 顺时针 / false 逆时针（均从起始角出发） |
| startAngle | number | 0 | 起始角（度）：0 = 12 点方向，正值顺时针偏移（如 90 = 3 点方向） |
| customClass | string | "" | 挂到根节点的额外 class（类需定义在组件样式表内） |
| customStyle | string | "" | 根节点行内样式：排间距（如 "margin:10px 0"）走它 |
事件
| 事件名 | 说明 |
|---|---|
| activeend | 进度到达目标值时触发（含挂载到位与无动画直达到位），参数为到达的百分比数值 |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 中心内容，整位替换内置百分比文字（如图标 + 文案组合）；仅 showText 开启时渲染 |
主题令牌
| 令牌 | 默认值 | 说明 |
|---|---|---|
| --n-circle-progress-color | var(--n-color-primary) | 进度弧颜色（缺省挂全局品牌色，深浅不变） |
| --n-circle-progress-track-color | var(--n-bg-2) | 轨道环颜色（缺省挂全局表面色，深浅主题自动） |
实现说明
与参考实现对照的取舍（同类组件功能面取并集、冲突从使用者视角择优融合）
| 机制 | 参考做法 | 本库做法 | 分歧理由 |
|---|---|---|---|
| 组件拆分 | 线性 / 环形各自独立组件（各参考一致） | 相同：n-progress（线性）+ n-circle-progress（环形） | 四家参考无一做成单组件形态开关；两类几何与定制面差异大 |
| 绘制机制 | canvas 2d + dpr 缩放 + requestAnimationFrame（各家一致） | 纯 view 半圆遮罩双弧（左右半圆裁剪容器各转一根整圆 border 环） | 主题令牌原生接入、无 canvas 各端初始化 / 高分屏 / 主题重绘差异，与库内动画规范同构；代价：渐变弧与圆头线帽不可得（裁剪记录） |
| 中心悬浮数值 | 百分比画在 canvas 圆心（开关）+ 中心插槽 | showText + unit + 默认插槽整位替换 | 并集；文字为原生 text（主题 / 多语言 / 可选中），插槽覆盖任意内容 |
| 动画 | 总时长固定缓动 / 速度档位（1~100） | 帧循环：时长 = |目标 - 当前| × duration（每 1% 毫秒） | 与 n-progress 同族链路；「每 1% 毫秒」语义跨进度差可比 |
| 起始角 | 弧度 / 半圈数两种单位 | 度（0 = 12 点方向，顺时针为正） | 直白单位，免换算 |
| 方向 | clockwise / counterclockwise 两种命名 | clockwise（默认顺时针，正向命名） | 择正向命名，语义同 |
| 零角处理 | 按角度增删绘制段 | 半圆常驻渲染 + 零角透明度关断 | App 端子节点插拔不重绘铁律；透明度行内更新可靠 |
| 不收项 | 渐变弧（gradient + foreground 组合）/ 圆头线帽 lineCap / max 基数 / speed 速度档 + activeMode 播放模式 / fillStyle 环心底色填充 / change 逐帧事件 / 预设主题色枚举（type，设置后进度色失效）/ animate 实例驱动方法 | 不收 | 渐变与圆头是 canvas 描边能力、view border 弧不可得；percent 已是 0~100 归一（max 冗余）；duration + 续播语义已覆盖 speed/activeMode；环心底色由默认插槽内容自理（插槽内放带背景的 view 即达成）；change 逐帧发事件噪音大（activeend 已覆盖到位语义）；主题色枚举由 color 直达（任意色比固定预设全）；animate 由 percent 受控续播覆盖（设值即等效） |