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

.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<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 档"
+            ]
           }
         ]
       },

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

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，不发布）

README.md

@@ -12,13 +12,13 @@ npm run docs            # 生成人类文档站 apps/docs/index.html + Agent 全
 npm run changelog       # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移）
 ```
 
-## 组件（共 69 个）
+## 组件（共 70 个）
 
 <!-- ua:components -->
-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
 <!-- /ua:components -->
 
-分组：表单（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 打包成单文件） |

apps/demo/main.ts

@@ -25,6 +25,7 @@ import {
   checkbox,
   checkboxGroup,
   colorPicker,
+  timePicker,
   commandPalette,
   dataTable,
   datePicker,
@@ -241,6 +242,7 @@ const tagPick = signal<string[]>(['ts']); // 多选下拉选中值（外部受
 const tagFold = signal<string[]>(['ts', 'dom', 'css']); // 多选下拉折叠演示：预置 3 项看溢出
 const permPick = signal<string[]>(['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',
     '固钉',

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<string> —— 选中时间信号（HH:mm）；不传则内部维护
+- minuteStep：number —— 分钟步长；缺省 5，超过 30 按 30 处理（如 15 只有 00/15/30/45）
+- placeholder：string —— 未选时占位文案；缺省「请选择时间」
+- disabled：boolean | Signal<boolean> —— 禁用触发器
+- 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 收起
 
 一行用法：
 

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 为回调

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';

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<string> = 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;
+}

packages/skin/ui/src/types.ts

@@ -665,6 +665,15 @@ export interface ColorPickerProps {
   onChange?: (color: string) => void;     // 选定回调（色板或自定义输入）
 }
 
+/*** 时间选择入参 ***/
+export interface TimePickerProps {
+  value?: Signal<string>;                  // 选中时间（HH:mm），未传则组件内部持有
+  minuteStep?: number;                     // 分钟步长；缺省 5，超过 30 按 30 处理
+  placeholder?: string;                    // 未选时占位文案；缺省「请选择时间」
+  disabled?: boolean | Signal<boolean>;    // 禁用触发器
+  onChange?: (time: string) => void;       // 写回回调（选时也会触发，分默认落到首个步长值）
+}
+
 /*** 引导步骤 ***/
 export interface TourStep {
   target: string;              // 目标元素选择器（document.querySelector 语义）

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",
@@ -3652,6 +3653,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 档"
+        ]
       }
     ]
   }

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;
+  }
+}