From 350544927d8a611e7c3fd67573f466041f695c34 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 19:53:22 +0800 Subject: [PATCH] =?UTF-8?q?iter(g213):=20=E6=96=B0=E5=A2=9E=20timePicker?= =?UTF-8?q?=20=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 45 +++++++++++- AGENTS.md | 2 +- ARCHITECTURE.md | 2 +- README.md | 8 +- apps/demo/main.ts | 14 ++++ llms-full.txt | 29 +++++++- llms.txt | 1 + packages/skin/ui/src/index.ts | 1 + packages/skin/ui/src/timePicker.ts | 113 +++++++++++++++++++++++++++++ packages/skin/ui/src/types.ts | 9 +++ packages/skin/ui/ua.manifest.json | 47 +++++++++++- packages/skin/ui/ui.css | 113 +++++++++++++++++++++++++++++ 12 files changed, 372 insertions(+), 12 deletions(-) create mode 100644 packages/skin/ui/src/timePicker.ts diff --git a/.ua/index.json b/.ua/index.json index f76df00..72005cd 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -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", + "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", + "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 档" + ] } ] }, diff --git a/AGENTS.md b/AGENTS.md index 387250e..65c6420 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -21,7 +21,7 @@ - `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核 - `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架 -- `packages/skin/ui`（@ui-arch/ui）：69 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 +- `packages/skin/ui`（@ui-arch/ui）：70 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 - `packages/design/tokens`（@ui-arch/tokens）：设计令牌 - `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private） - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 5506b39..2713e7f 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -34,7 +34,7 @@ ui-arch-mvp/ │ │ ├── table-core/ # 表格状态内核 │ │ └── frame/ # 信号 + hyperscript 微框架 │ ├── skin/ # 皮肤层（DOM 组件，可发布） -│ │ └── ui/ # 69 个组件 + ui.css +│ │ └── ui/ # 70 个组件 + ui.css │ ├── design/ # 资产层（可发布） │ │ └── tokens/ # --ua-* 设计令牌 │ └── tools/ # 工程层（private，不发布） diff --git a/README.md b/README.md index f7402e3..d0b49d6 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,13 @@ npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全 npm run changelog # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移） ``` -## 组件（共 69 个） +## 组件（共 70 个） -accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · image · inputNumber · link · list · menu · modal · mentions · multiSelect · notification · pagination · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark +accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · image · inputNumber · link · list · menu · modal · mentions · multiSelect · notification · pagination · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark -分组：表单（button / textField / inputNumber / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / link / space / divider / splitter / backTop / affix / tour / watermark）。 +分组：表单（button / textField / inputNumber / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / link / space / divider / splitter / backTop / affix / tour / watermark）。 ## 可访问性约定 @@ -32,7 +32,7 @@ accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup |---|---| | `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） | | `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） | -| `packages/skin/ui` | @ui-arch/ui：69 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | +| `packages/skin/ui` | @ui-arch/ui：70 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） | | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server | | `apps/demo` | 交互演示（esbuild 打包成单文件） | diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 89966ef..9e7b40e 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -25,6 +25,7 @@ import { checkbox, checkboxGroup, colorPicker, + timePicker, commandPalette, dataTable, datePicker, @@ -241,6 +242,7 @@ const tagPick = signal(['ts']); // 多选下拉选中值（外部受 const tagFold = signal(['ts', 'dom', 'css']); // 多选下拉折叠演示：预置 3 项看溢出 const permPick = signal(['read']); // 多选组选中值（外部受控演示） const colorVal = signal('var(--ua-color-accent)'); // 颜色选择值（外部受控演示） +const atTime = signal('09:30'); // 时间选择值：给定初值即受控，组件选完写回 const dateVal = signal('2026-10-26'); // 日期选择值（外部受控演示） const rangeFrom = signal(''); // 区间起点 const rangeTo = signal(''); // 区间终点 @@ -1057,6 +1059,18 @@ const content = h( h('span', { class: 'ua-colorpicker-swatch', style: () => `background:${colorVal()}` }), ), ), + section( + 'sec-timepicker', + '时间选择', + 'timePicker：时 / 分两列弹层，value 双向绑定 HH:mm；minuteStep 控制分的粒度，选完分自动收起并归还焦点。', + h( + 'div', + { class: 'row' }, + timePicker({ value: atTime, minuteStep: 15, onChange: (t) => toast.success(`定在 ${t}`) }), + timePicker({ placeholder: '禁用态', disabled: true }), + h('span', { class: 'out' }, () => `当前时间：${atTime() || '未选'}`), + ), + ), section( 'sec-affix', '固钉', diff --git a/llms-full.txt b/llms-full.txt index aa677de..f95c799 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T11:50:16.380Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T11:52:57.122Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -1986,6 +1986,32 @@ const cmdk = commandPalette({ open: signal(false), items: [{ id: 'save', label: 现场演示：apps/docs/demo.html#sec-cmdk +### timePicker — 时间选择 TimePicker + +参数： + +- value：Signal —— 选中时间信号（HH:mm）；不传则内部维护 +- minuteStep：number —— 分钟步长；缺省 5，超过 30 按 30 处理（如 15 只有 00/15/30/45） +- placeholder：string —— 未选时占位文案；缺省「请选择时间」 +- disabled：boolean | Signal —— 禁用触发器 +- onChange：(time: string) => void —— 写回回调：选时即触发一次（分默认 00），选完分再触发一次 + +示例： + +``` +const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) }) +``` + +手把手： + +1. 创建信号 at = signal('09:30') 并传入 value：组件读它显示、选完写回，双向绑定 +2. 点触发器展开时 / 分两列，当前值所在格高亮并自动滚到列中部，不必手动找 +3. 先点时列定小时（分默认落到首个步长值，值立刻可用），再点分列即完成并收起，焦点回到触发器 +4. 列内可用 ↑↓ 环形移动、Home/End 直达首末；Tab、Esc、点击外部都能正常进出与收起 +5. 需要 15 分钟一档就传 minuteStep: 15，步长只影响分列的可选值，时列始终 24 档 + +现场演示：apps/docs/demo.html#sec-timepicker + API 速览： - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交） @@ -2059,6 +2085,7 @@ API 速览： - avatarGroup(props)：头像组，横向叠放并在超出 max 时折叠成 +N，整组 title 列出全部姓名 - virtualList(props)：虚拟列表，固定行高长列表只渲染可视窗口 + 上下缓冲条，万级数据滚动不随总量掉帧；返回 { el, scrollTo } 句柄 - commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄 +- timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起 一行用法： diff --git a/llms.txt b/llms.txt index f12cb47..631ef85 100644 --- a/llms.txt +++ b/llms.txt @@ -118,6 +118,7 @@ - avatarGroup(props)：头像组，横向叠放并在超出 max 时折叠成 +N，整组 title 列出全部姓名 - virtualList(props)：虚拟列表，固定行高长列表只渲染可视窗口 + 上下缓冲条，万级数据滚动不随总量掉帧；返回 { el, scrollTo } 句柄 - commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄 + - timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')` - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调 diff --git a/packages/skin/ui/src/index.ts b/packages/skin/ui/src/index.ts index 17360c1..0a9fadf 100644 --- a/packages/skin/ui/src/index.ts +++ b/packages/skin/ui/src/index.ts @@ -69,3 +69,4 @@ export { link } from './link.js'; export { avatarGroup } from './avatarGroup.js'; export { virtualList } from './virtualList.js'; export { commandPalette } from './commandPalette.js'; +export { timePicker } from './timePicker.js'; diff --git a/packages/skin/ui/src/timePicker.ts b/packages/skin/ui/src/timePicker.ts new file mode 100644 index 0000000..fd622f5 --- /dev/null +++ b/packages/skin/ui/src/timePicker.ts @@ -0,0 +1,113 @@ +import { effect, h, signal } from '@ui-arch/frame'; +import type { Signal } from '@ui-arch/frame'; +import type { TimePickerProps } from './types.js'; +import { flip } from './position.js'; +import { bindOutside, pushOverlay } from './overlay.js'; + +/*** 两位补零：时钟显示固定宽度，避免 9:5 这类不对齐的写法 ***/ +const pad = (n: number): string => String(n).padStart(2, '0'); + +/*** 时间选择：时 / 分两列自绘弹层，value 信号双向绑定（HH:mm）；Esc 收起，↑↓/Home/End 在列内移动 ***/ +export function timePicker(props: TimePickerProps): HTMLElement { + // —— 状态集中声明 —— + const value: Signal = props.value ?? signal(''); // 选中时间（HH:mm），未传信号则内部持有 + const open = signal(false); // 弹层开合 + const place = signal<'top' | 'bottom'>('bottom'); // 实际生效方位：打开时按视口空间自动翻转 + const step = props.minuteStep && props.minuteStep > 0 ? Math.min(props.minuteStep, 30) : 5; // 分钟步长，越界回退 5 + let releaseEsc: (() => void) | null = null; // Esc 栈注销函数：展开期间占一层，收起即释放 + + const hours = Array.from({ length: 24 }, (_, i) => pad(i)); // 00..23 + const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => pad(i * step)); // 00..55（按步长取） + const picked = () => { const [hh = '', mm = ''] = value().split(':'); return { hh, mm }; }; // 拆分当前值 + + /*** 写回时间：两段都补齐后调用回调；值未变时不重复派发（选时与选分各写一次） ***/ + const commit = (hh: string, mm: string): void => { + const next = `${hh}:${mm}`; + if (next === value()) return; // 卫语句：没变化不重复派发回调 + value(next); + props.onChange?.(next); + }; + + /*** 列内聚焦导航：↑↓ 环形移动、Home/End 直达首末（列内按钮顺序即时间顺序） ***/ + const navigate = (col: HTMLElement, cells: HTMLButtonElement[]) => { + col.addEventListener('keydown', (e: KeyboardEvent) => { + const at = cells.indexOf(document.activeElement as HTMLButtonElement); + if (at < 0) return; // 卫语句：焦点不在本列 + const dir = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0; // 单步方向 + if (!dir && e.key !== 'Home' && e.key !== 'End') return; // 卫语句：其它键放行（Enter/空格 由按钮自己响应） + e.preventDefault(); // 阻止页面滚动 + const next = dir ? cells[(at + dir + cells.length) % cells.length] : e.key === 'Home' ? cells[0] : cells[cells.length - 1]; + next.focus(); + }); + }; + + /*** 造一列时间格：点击写回，激活格加 is-active 供样式与初始滚动定位 ***/ + const column = (label: string, list: string[], isHour: boolean) => { + const cells = list.map((text) => + h('button', { + type: 'button', + class: () => `ua-timepicker-cell${(isHour ? picked().hh : picked().mm) === text ? ' is-active' : ''}`, + role: 'option', + 'aria-selected': () => String((isHour ? picked().hh : picked().mm) === text), + onClick: () => { + const cur = picked(); + if (isHour) return commit(text, cur.mm || minutes[0]); // 先选时：分默认落到首个步长值，值立即可用 + commit(cur.hh || hours[0], text); // 选分即视为选完 + open(false); // 分选完收起，指针交回触发器 + trigger.focus(); + }, + }, text), + ); + const col = h('div', { class: 'ua-timepicker-col', role: 'listbox', 'aria-label': label }, ...cells); + const buttons = cells as HTMLButtonElement[]; + navigate(col, buttons); + return { col, buttons }; + }; + + const hourCol = column('时', hours, true); + const minuteCol = column('分', minutes, false); + + // —— 触发器 —— + const trigger = h( + 'button', + { + type: 'button', + class: 'ua-timepicker-trigger', + 'aria-haspopup': 'dialog', + 'aria-expanded': () => String(open()), + disabled: props.disabled, // 布尔或信号禁用，h() 直接透传 + onClick: () => open(!open()), + }, + h('span', { class: () => `ua-timepicker-value${value() ? '' : ' is-empty'}` }, () => value() || props.placeholder || '请选择时间'), + h('span', { class: 'ua-timepicker-arrow', 'aria-hidden': 'true' }, '▾'), + ); + + const pop = h( + 'div', + { class: () => `ua-timepicker-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}`, role: 'dialog', 'aria-label': '选择时间' }, + hourCol.col, + minuteCol.col, + ); + const root = h('div', { class: () => `ua-timepicker${open() ? ' is-open' : ''}` }, trigger, pop); + + /*** 把激活格滚到列中部：列是独立滚动容器，直接算 scrollTop 不惊动页面 ***/ + const reveal = (col: HTMLElement, cells: HTMLButtonElement[]) => { + const cell = cells.find((el) => el.classList.contains('is-active')); + if (!cell) return; // 卫语句：还没选过，停在列首 + const target = cell.offsetTop - (col.clientHeight - cell.offsetHeight) / 2; // 居中，上下都留出邻近项 + col.scrollTop = Math.max(0, target); + }; + + bindOutside(root, open, () => open(false)); // 点外部收起：仅展开期间挂监听 + effect(() => { + if (open()) { + releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入 Esc 栈：与弹窗/抽屉共用逐层关闭 + requestAnimationFrame(() => { reveal(hourCol.col, hourCol.buttons); reveal(minuteCol.col, minuteCol.buttons); }); // 布局就绪后再量 + } else { + releaseEsc?.(); + releaseEsc = null; + } + }); + effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 空间不足自动翻到上方 + return root; +} diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 113cad8..a59cccd 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -665,6 +665,15 @@ export interface ColorPickerProps { onChange?: (color: string) => void; // 选定回调（色板或自定义输入） } +/*** 时间选择入参 ***/ +export interface TimePickerProps { + value?: Signal; // 选中时间（HH:mm），未传则组件内部持有 + minuteStep?: number; // 分钟步长；缺省 5，超过 30 按 30 处理 + placeholder?: string; // 未选时占位文案；缺省「请选择时间」 + disabled?: boolean | Signal; // 禁用触发器 + onChange?: (time: string) => void; // 写回回调（选时也会触发，分默认落到首个步长值） +} + /*** 引导步骤 ***/ export interface TourStep { target: string; // 目标元素选择器（document.querySelector 语义） diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 40abe1f..3cfd5b0 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -83,7 +83,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", @@ -1343,7 +1344,7 @@ "创建信号 tab = signal('a')，初值为默认页签", "tabs 只渲染页签头；页签内容用响应式函数按信号切换，如 () => tab() === 'a' ? panelA : panelB", "点击或方向键（←→ 环形）、Home/End（直达首/末页签）切换，滑动指示条自动跟随；disabled: true 的页签置灰不可点", - "页签多到一屏放不下（页签条横向溢出）时，切到被裁掉的页签会自动滚回可视区：只滚页签条本身、不带动页面，系统开启「减弱动效」时直接跳位；已完整可见则不动，不打断用户手动滚动", + "页签多到一屏放不下（页签条横向溢出）时，切到被裁掉的页签会自动滚回可视区：只滚页签条本身、不带动页面，系统开启「减弱动效」时直接跳位；已完整可见则不动，不打断用户手动滚动", "需要可关闭页签时给该项加 closable: true，× 或聚焦后按 Delete 触发 onClose(value)；组件不改数据源，调用方从数组里摘掉该项再重绘", "键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动，Home/End 跳首个/末个启用页签", "页签栏右侧要放「新建 / 设置」这类操作就传 extra（按钮或链接）：它与页签同一行共用一条分隔线，不传时 DOM 结构保持不变" @@ -3652,7 +3653,47 @@ "键盘：↑↓ 环形选择、Home/End 跳首尾、回车执行、Esc 交给弹层栈（嵌套弹窗时只关最上层）；鼠标划过即高亮", "hotkey 缺省注册 ⌘K / Ctrl+K，同一页面多个面板请只留一个开 hotkey，其余传 hotkey: false" ] + }, + { + "id": "timePicker", + "title": "时间选择 TimePicker", + "demo": "sec-timepicker", + "props": [ + { + "n": "value", + "t": "Signal", + "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", + "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 档" + ] } ] } -} \ No newline at end of file +} diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index d2768ac..e6fe0b8 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -5033,3 +5033,116 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } [class*=' ua-']::-webkit-scrollbar-corner { background: transparent; /* 双向滚动容器的右下角不留白块 */ } + +/* ---- 时间选择（时 / 分两列弹层） ---- */ +.ua-timepicker { + position: relative; + display: inline-flex; +} +.ua-timepicker-trigger { + display: inline-flex; + align-items: center; + gap: var(--ua-space-2); + min-width: 116px; + padding: 0 var(--ua-space-3); + height: var(--ua-control-h-md); + border: 1px solid var(--ua-color-border); + border-radius: var(--ua-radius-md); + background: var(--ua-color-bg); + color: var(--ua-color-text); + font-size: var(--ua-font-size-lg); + cursor: pointer; + transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease); +} +.ua-timepicker-trigger:hover:not(:disabled) { + border-color: var(--ua-color-accent-soft); /* 悬停只提一档强调，不抢聚焦态 */ +} +.ua-timepicker-trigger:disabled { + background: var(--ua-color-surface-2); + color: var(--ua-color-text-faint); + cursor: not-allowed; +} +.ua-timepicker.is-open .ua-timepicker-trigger { + border-color: var(--ua-color-accent); + box-shadow: var(--ua-focus-ring); /* 展开即视为聚焦：环与描边同时成立 */ +} +.ua-timepicker-value { + flex: 1 1 auto; + text-align: left; + font-variant-numeric: tabular-nums; /* 等宽数字：时与分切换时不抖动 */ +} +.ua-timepicker-value.is-empty { + color: var(--ua-color-text-faint); +} +.ua-timepicker-arrow { + color: var(--ua-color-text-muted); + transition: transform var(--ua-duration-fast) var(--ua-ease); +} +.ua-timepicker.is-open .ua-timepicker-arrow { + transform: rotate(180deg); /* 展开时箭头翻转，指示「再点收起」 */ +} +.ua-timepicker-pop { + position: absolute; + z-index: var(--ua-z-dropdown); + top: calc(100% + 4px); + left: 0; + display: flex; + gap: var(--ua-space-1); + padding: var(--ua-space-1); + border: 1px solid var(--ua-color-border); + border-radius: var(--ua-radius-md); + background: var(--ua-color-surface); + box-shadow: var(--ua-shadow-2); + opacity: 0; + transform: translateY(-4px); + visibility: hidden; + transition: opacity var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease), visibility var(--ua-duration-fast) var(--ua-ease); +} +.ua-timepicker-pop.is-flip { + top: auto; /* 空间不足翻到触发器上方 */ + bottom: calc(100% + 4px); + transform: translateY(4px); /* 入场方向随翻转镜像 */ +} +.ua-timepicker-pop.ua-open { + opacity: 1; + transform: none; + visibility: visible; +} +.ua-timepicker-col { + position: relative; /* 供激活格 offsetTop 定位（滚动到列中部） */ + display: flex; + flex-direction: column; + gap: var(--ua-space-05); + padding: var(--ua-space-05); + max-height: 208px; + overflow-y: auto; +} +.ua-timepicker-cell { + border: none; + border-radius: var(--ua-radius-sm); + padding: var(--ua-space-1) var(--ua-space-3); + background: none; + color: var(--ua-color-text); + font-size: var(--ua-font-size-md); + font-variant-numeric: tabular-nums; + cursor: pointer; + transition: background-color var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease); +} +.ua-timepicker-cell:hover { + background: var(--ua-color-surface-2); +} +.ua-timepicker-cell.is-active { + background: var(--ua-color-tint-accent); /* 选中态低视觉比重：淡底 + 强调色文字 */ + color: var(--ua-color-accent); +} +@media (prefers-reduced-motion: reduce) { + .ua-timepicker-pop, + .ua-timepicker-arrow, + .ua-timepicker-trigger, + .ua-timepicker-cell { + transition: none; /* 降动效：弹层直接显隐，箭头不翻转动画 */ + } + .ua-timepicker.is-open .ua-timepicker-arrow { + transform: none; + } +}