iter(g236): 新增 countdown 倒计时组件,秒级递减自动停表并带句柄控制(73 组件)

This commit is contained in:
HIsheR
2026-10-26 21:28:56 +08:00
parent 671c87456e
commit d50455318d
12 changed files with 176 additions and 10 deletions
+40 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T13:25:25.456Z",
"generatedAt": "2026-10-26T13:28:41.290Z",
"repoRoot": ".",
"packages": [
{
@@ -215,7 +215,8 @@
"commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄",
"timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起",
"pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示",
"copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand"
"copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand",
"countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset"
],
"keyTypes": [
"ButtonProps",
@@ -3937,6 +3938,43 @@
"label / copiedLabel 可改文案;variant / size 透传给内部 button,视觉与普通按钮完全一致",
"非安全上下文(http)或旧浏览器自动降级为隐藏 textarea + execCommand,无需业务处理兼容"
]
},
{
"id": "countdown",
"title": "倒计时 Countdown",
"demo": "sec-countdown",
"props": [
{
"n": "seconds",
"t": "number",
"r": 1,
"d": "总时长(秒),> 0"
},
{
"n": "running",
"t": "boolean",
"df": "true",
"d": "创建即开始倒数;传 false 用句柄 start 手动启动"
},
{
"n": "format",
"t": "(seconds: number) => string",
"d": "展示格式化;缺省 mm:ss 两位补零"
},
{
"n": "onFinish",
"t": "() => void",
"k": 1,
"d": "归零回调(自动停表后触发)"
}
],
"example": "const cd = countdown({ seconds: 60, onFinish: () => console.log('结束') }); // cd.start / stop / reset",
"steps": [
"传 seconds 即可用,缺省挂载即开始、mm:ss 展示;返回句柄 { el, start, stop, reset }",
"running: false 先摆好再手动 start,典型场景是「发送验证码」后才开始 60s 重发倒计时",
"归零自动停表并触发 onFinish;之后 start() 会重开一轮,reset() 复位到总时长",
"format 自定义展示:如只显示秒 (s) => `${s}s`,或带上小时位"
]
}
]
},