iter(g284): 新增 progressRing 环形进度组件

This commit is contained in:
HIsheR
2026-10-26 23:12:33 +08:00
parent f20f673e76
commit c4384be959
12 changed files with 239 additions and 11 deletions
+43 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T15:08:10.710Z",
"generatedAt": "2026-10-26T15:11:40.469Z",
"repoRoot": ".",
"packages": [
{
@@ -228,7 +228,8 @@
"loading(props, ...children):区域加载遮罩,内容原地降透明度 + 转圈文案,带延迟出场避免快请求闪烁",
"relativeTime(props):把时间戳渲染成「3 分钟前」并自动刷新,超阈值改显示绝对日期,title 恒给精确值",
"sparkline(props):迷你趋势线,把数值序列压成折线(可填充 + 末点标记),无坐标轴无交互",
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细"
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细",
"progressRing(props):环形进度,SVG 双圆靠 dasharray 画弧 + 中心百分比,value 可传信号自动重绘"
],
"keyTypes": [
"ButtonProps",
@@ -4539,6 +4540,46 @@
"格子颜色是相对深浅:按序列最大值归一成四档——所以它说的是「哪天更密」,不是绝对值高低",
"默认 12 周、11px 格子;嵌进窄卡片就调小 weeks,看不出格子边界就调大 cellSize"
]
},
{
"id": "progressRing",
"title": "环形进度 ProgressRing",
"demo": "sec-ring",
"props": [
{
"n": "value",
"t": "number | Signal<number>",
"d": "当前进度 0-100;超出范围自动夹取,信号变化时自动重绘"
},
{
"n": "size",
"t": "number",
"d": "外径(px);缺省 96"
},
{
"n": "thickness",
"t": "number",
"d": "环宽(px);缺省 8"
},
{
"n": "showText",
"t": "boolean",
"d": "是否显示中心文字;缺省 true(关掉时请自行保证 aria 可读)"
},
{
"n": "label",
"t": "string",
"d": "中心文字;缺省「N%」"
}
],
"example": "progressRing({ value: pct, size: 96 })",
"steps": [
"value 给数字就是静态环,给信号就是活环:不用自己算弧长,组件按 0-100 换算 dasharray",
"0 点固定在 12 点方向顺时针走,和进度条的心理模型一致,不需要额外传旋转参数",
"要放进表格或卡片角落就用 size: 56 + showText: false 的小环,文字由附近的主体数字承担",
"换色在父级设 color:进度弧读 currentColor,底环固定描边色(--ua-color-border),不引入第二个色源",
"这是个「环形进度条」,不是仪表盘:只表达 0-100 单一进度,多段占比请用饼图类组件"
]
}
]
},