iter(g215): 新增日期加时间组合配方

This commit is contained in:
HIsheR
2026-10-26 19:55:38 +08:00
parent 756a7e899d
commit 0fb919893f
2 changed files with 68 additions and 0 deletions
+34
View File
@@ -259,6 +259,40 @@ document.body.append(cmdk.el); // 面板是 fixed + 遮罩,挂 body 最省事
- 一页只留一个实例用缺省 `hotkey`(⌘K / Ctrl+K),其余传 `hotkey: false` 自己绑,否则一次按键会同时开两个面板。
- 命令集随权限变化时**重建实例**(`items` 是创建时快照),不要往原数组里 push。
## 配方 13:预约时点(日期 + 时间两段拼装)
```ts
import { computed, signal } from '@ui-arch/frame';
import { datePicker, form, formItem, timePicker, toast } from '@ui-arch/ui';
const day = signal(''); // 日期段:YYYY-MM-DD
const clock = signal('09:00'); // 时间段:HH:mm(给初值,用户只需要改自己想改的那半)
const at = computed(() => (day() ? `${day()} ${clock()}` : '')); // 拼装交给业务层:两个组件各管一段,互不知道对方
const dateField = formItem(
{ label: '预约日期', value: day, required: true },
datePicker({ value: day, min: new Date().toISOString().slice(0, 10) }), // 早于今天的日期直接置灰,比事后校验更省事
);
const timeField = formItem(
{ label: '预约时间', value: clock, required: true, hint: '每 15 分钟一档' },
timePicker({ value: clock, minuteStep: 15 }), // 步长只影响分列,时列始终 24 档
);
form({
layout: 'horizontal',
submitText: '确认预约',
items: [dateField, timeField],
onSubmit: () => toast.success(`已预约 ${at()}`), // 两段都非空才会走到这里:required 已经拦住半截状态
});
```
要点:
- **两段各管一段**:`datePicker` 只写 `YYYY-MM-DD`、`timePicker` 只写 `HH:mm`,拼成完整时点交给业务 `computed`——不要试图让某个组件同时产出日期与时间,否则一半值缺失时格式全靠猜。
- **时间给初值**:`clock` 预置 `09:00` 这类合理默认,用户多数只想改小时;日期保持空值,避免「默认今天」被误提交。
- **约束优先于校验**:日期上限下限用 `datePicker` 的 `min` / `max` 置灰,时间粒度用 `minuteStep` 收窄,`required` 只兜底空值——能点不出来的选项比报错文案更友好。
- **半截状态别提交**:`form` 的 `required` 依赖各自 `value` 信号,日期没选时提交会被拦下并定位到该字段;不要自己写 `if (!day()) return` 之类的旁路判断。
- 需要区间就用 `datePicker({ range: true })` + 两个 `timePicker`(起 / 止),拼装时各自独立,别指望一个信号同时表达两端。
## 通用约定
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。