From 3067c6380a2519fc7aad94d8d6d08d8a99c3f2a4 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 20:03:10 +0800 Subject: [PATCH] =?UTF-8?q?iter(g222):=20=E6=97=B6=E9=97=B4=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E6=94=AF=E6=8C=81=E9=AB=98=E5=BA=A6=E6=A1=A3=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/demo/main.ts | 1 + llms-full.txt | 4 +++- packages/skin/ui/src/timePicker.ts | 2 +- packages/skin/ui/src/types.ts | 1 + packages/skin/ui/ua.manifest.json | 8 +++++++- packages/skin/ui/ui.css | 12 +++++++----- 6 files changed, 20 insertions(+), 8 deletions(-) diff --git a/apps/demo/main.ts b/apps/demo/main.ts index faa4744..17da2ce 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -1067,6 +1067,7 @@ const content = h( 'div', { class: 'row' }, timePicker({ value: atTime, minuteStep: 15, clearable: true, onChange: (t) => toast.success(t ? `定在 ${t}` : '已清空时间') }), + timePicker({ placeholder: '小号', size: 'sm' }), timePicker({ placeholder: '禁用态', disabled: true }), h('span', { class: 'out' }, () => `当前时间：${atTime() || '未选'}`), ), diff --git a/llms-full.txt b/llms-full.txt index 997f9ac..5ea5f7d 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T11:59:09.023Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T12:02:54.662Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -1995,6 +1995,7 @@ const cmdk = commandPalette({ open: signal(false), items: [{ id: 'save', label: - value：Signal —— 选中时间信号（HH:mm）；不传则内部维护 - minuteStep：number —— 分钟步长；缺省 5，超过 30 按 30 处理（如 15 只有 00/15/30/45） - clearable：boolean —— 显示清空按钮 ×（仅在有值时出现）；缺省 false，键盘 Delete / Backspace 等价 +- size：'sm' | 'md' | 'lg' —— 触发器高度档位，与 textField / select 同口径；缺省 md - placeholder：string —— 未选时占位文案；缺省「请选择时间」 - disabled：boolean | Signal —— 禁用触发器 - onChange：(time: string) => void —— 写回回调：选时即触发一次（分默认 00），选完分再触发一次 @@ -2013,6 +2014,7 @@ const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t 4. 列内可用 ↑↓ 环形移动、Home/End 直达首末；Tab、Esc、点击外部都能正常进出与收起 5. 需要 15 分钟一档就传 minuteStep: 15，步长只影响分列的可选值，时列始终 24 档 6. 需要允许回到「未选」态就传 clearable: true：有值时触发器右侧出现 ×（不进 Tab 序），聚焦触发器按 Delete / Backspace 也能清空，回调收到空串 +7. 要和输入框并排对齐就传 size（sm / md / lg）：高度走 --ua-control-h-* 三档，与 textField、select 的档位完全同源，不会出现「旁边的输入框矮 6px」 现场演示：apps/docs/demo.html#sec-timepicker diff --git a/packages/skin/ui/src/timePicker.ts b/packages/skin/ui/src/timePicker.ts index c953736..7c5cd9f 100644 --- a/packages/skin/ui/src/timePicker.ts +++ b/packages/skin/ui/src/timePicker.ts @@ -80,7 +80,7 @@ export function timePicker(props: TimePickerProps): HTMLElement { 'button', { type: 'button', - class: 'ua-timepicker-trigger', + class: `ua-timepicker-trigger${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`, 'aria-haspopup': 'dialog', 'aria-expanded': () => String(open()), disabled: props.disabled, // 布尔或信号禁用，h() 直接透传 diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 51e0871..05f2ff9 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -671,6 +671,7 @@ export interface TimePickerProps { minuteStep?: number; // 分钟步长；缺省 5，超过 30 按 30 处理 placeholder?: string; // 未选时占位文案；缺省「请选择时间」 clearable?: boolean; // 显示清空按钮 ×（有值时才出现）；缺省 false，键盘 Delete / Backspace 等价 + size?: 'sm' | 'md' | 'lg'; // 触发器高度档位，与 textField / select 同口径；缺省 md disabled?: boolean | Signal; // 禁用触发器 onChange?: (time: string) => void; // 写回回调（选时也会触发，分默认落到首个步长值） } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index e7588ac..03931c8 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -3674,6 +3674,11 @@ "t": "boolean", "d": "显示清空按钮 ×（仅在有值时出现）；缺省 false，键盘 Delete / Backspace 等价" }, + { + "n": "size", + "t": "'sm' | 'md' | 'lg'", + "d": "触发器高度档位，与 textField / select 同口径；缺省 md" + }, { "n": "placeholder", "t": "string", @@ -3697,7 +3702,8 @@ "先点时列定小时（分默认落到首个步长值，值立刻可用），再点分列即完成并收起，焦点回到触发器", "列内可用 ↑↓ 环形移动、Home/End 直达首末；Tab、Esc、点击外部都能正常进出与收起", "需要 15 分钟一档就传 minuteStep: 15，步长只影响分列的可选值，时列始终 24 档", - "需要允许回到「未选」态就传 clearable: true：有值时触发器右侧出现 ×（不进 Tab 序），聚焦触发器按 Delete / Backspace 也能清空，回调收到空串" + "需要允许回到「未选」态就传 clearable: true：有值时触发器右侧出现 ×（不进 Tab 序），聚焦触发器按 Delete / Backspace 也能清空，回调收到空串", + "要和输入框并排对齐就传 size（sm / md / lg）：高度走 --ua-control-h-* 三档，与 textField、select 的档位完全同源，不会出现「旁边的输入框矮 6px」" ] } ] diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 230a75b..17a4ae7 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -10,20 +10,23 @@ .ua-btn, .ua-input, .ua-select-trigger, -.ua-input-number-field { +.ua-input-number-field, +.ua-timepicker-trigger { box-sizing: border-box; height: var(--ua-control-h-md); } .ua-btn.is-sm, .ua-input.is-sm, .ua-select-trigger.is-sm, -.ua-input-number-field.is-sm { +.ua-input-number-field.is-sm, +.ua-timepicker-trigger.is-sm { height: var(--ua-control-h-sm); } .ua-btn.is-lg, .ua-input.is-lg, .ua-select-trigger.is-lg, -.ua-input-number-field.is-lg { +.ua-input-number-field.is-lg, +.ua-timepicker-trigger.is-lg { height: var(--ua-control-h-lg); } @@ -5024,8 +5027,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } 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: 1px solid var(--ua-color-border); /* 高度由文件顶部三档统一给，组件段不再重复声明 */ border-radius: var(--ua-radius-md); background: var(--ua-color-bg); color: var(--ua-color-text);