iter(g213): 新增 timePicker 时间选择组件

This commit is contained in:
HIsheR
2026-10-26 19:53:22 +08:00
parent 3b0888d56b
commit 350544927d
12 changed files with 372 additions and 12 deletions
+43 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T11:50:16.380Z",
"generatedAt": "2026-10-26T11:52:57.122Z",
"repoRoot": ".",
"packages": [
{
@@ -212,7 +212,8 @@
"link(props):链接,站内跳转与站外跳转统一入口,external 自动补 ↗ 与 rel=noopener noreferrer 并给读屏播报",
"avatarGroup(props):头像组,横向叠放并在超出 max 时折叠成 +N,整组 title 列出全部姓名",
"virtualList(props):虚拟列表,固定行高长列表只渲染可视窗口 + 上下缓冲条,万级数据滚动不随总量掉帧;返回 { el, scrollTo } 句柄",
"commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄"
"commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄",
"timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起"
],
"keyTypes": [
"ButtonProps",
@@ -3781,6 +3782,46 @@
"键盘:↑↓ 环形选择、Home/End 跳首尾、回车执行、Esc 交给弹层栈(嵌套弹窗时只关最上层);鼠标划过即高亮",
"hotkey 缺省注册 ⌘K / Ctrl+K,同一页面多个面板请只留一个开 hotkey,其余传 hotkey: false"
]
},
{
"id": "timePicker",
"title": "时间选择 TimePicker",
"demo": "sec-timepicker",
"props": [
{
"n": "value",
"t": "Signal<string>",
"d": "选中时间信号(HH:mm);不传则内部维护"
},
{
"n": "minuteStep",
"t": "number",
"d": "分钟步长;缺省 5,超过 30 按 30 处理(如 15 只有 00/15/30/45)"
},
{
"n": "placeholder",
"t": "string",
"d": "未选时占位文案;缺省「请选择时间」"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用触发器"
},
{
"n": "onChange",
"t": "(time: string) => void",
"d": "写回回调:选时即触发一次(分默认 00),选完分再触发一次"
}
],
"example": "const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) })",
"steps": [
"创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定",
"点触发器展开时 / 分两列,当前值所在格高亮并自动滚到列中部,不必手动找",
"先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器",
"列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起",
"需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档"
]
}
]
},