iter(g127): 补长表单编辑页组合配方
This commit is contained in:
@@ -1372,6 +1372,14 @@
|
|||||||
"acceptance": "InputNumberProps 新增 precision(缺省不处理):写回与显示都按 toFixed(p) 归一(写回量化 + 输入框定长显示),步进浮点尾差消除;min/max 夹取语义不变;文档参数表 / api 说明 / 手把手与 llms-full.txt 同步;npm run check 全绿",
|
"acceptance": "InputNumberProps 新增 precision(缺省不处理):写回与显示都按 toFixed(p) 归一(写回量化 + 输入框定长显示),步进浮点尾差消除;min/max 夹取语义不变;文档参数表 / api 说明 / 手把手与 llms-full.txt 同步;npm run check 全绿",
|
||||||
"notes": "自补:组件能力补齐;量化收敛在 emit/sync 单点,不改夹取与连发逻辑",
|
"notes": "自补:组件能力补齐;量化收敛在 emit/sync 单点,不改夹取与连发逻辑",
|
||||||
"status": "done"
|
"status": "done"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "g127",
|
||||||
|
"title": "补充长表单编辑页组合配方",
|
||||||
|
"motivation": "affix 贴底、form 汇总条、hint、maxCount、saving 三处锁定这些能力都是本轮及此前几轮陆续落地的,但「长表单编辑页怎么拼」没有一篇端到端指导,Agent 与新人仍要自己试错组合",
|
||||||
|
"acceptance": "recipes.md 新增「配方 6:长表单编辑页(吸底操作条 + 提交锁定)」:affix position bottom 固定操作条、form 聚合校验与汇总条、同一 saving 信号锁按钮/开关/请求出口、maxCount 与 rules max 同源约束;npm run docs 后 llms-full.txt 出现该配方;npm run check 全绿",
|
||||||
|
"notes": "自补:文档完善;只写用法不碰实现,配方随 docs 注入 llms-full",
|
||||||
|
"status": "open"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -97,6 +97,35 @@ const pager = pagination({ page, pageSize: 5, total: rows.length, jumpable: true
|
|||||||
- 列宽拖拽只对 `width` 给数字的列生效(`'flex'` 列交给浏览器自适应);双击手柄回到声明宽度。
|
- 列宽拖拽只对 `width` 给数字的列生效(`'flex'` 列交给浏览器自适应);双击手柄回到声明宽度。
|
||||||
- 行选择一律按 rowKey 记账,筛选换掉可见行后已选仍在,批量操作前用已选计数确认。
|
- 行选择一律按 rowKey 记账,筛选换掉可见行后已选仍在,批量操作前用已选计数确认。
|
||||||
|
|
||||||
|
## 配方 6:长表单编辑页(吸底操作条 + 提交锁定)
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const saving = signal(false);
|
||||||
|
form(
|
||||||
|
{
|
||||||
|
onSubmit: (ok) => {
|
||||||
|
if (!ok) return; // 失败时汇总条已定位到第一处错误,无需自己数红框
|
||||||
|
saving(true);
|
||||||
|
save().then(() => toast.success('已保存')).finally(() => saving(false));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[
|
||||||
|
formItem({ label: '标题', value: title, required: true, rules: [{ max: 20 }] }, textField({ value: title, maxCount: 20 })),
|
||||||
|
formItem({ label: '权重', value: weight, hint: '0–100%,一位小数' }, inputNumber({ value: weight, min: 0, max: 100, step: 0.1, precision: 1 })),
|
||||||
|
formItem({ label: '上架', value: online }, switchButton({ label: '保存后自动上架', checked: online, loading: saving })),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
affix({ position: 'bottom', offset: 0 }, h('div', { class: 'row' },
|
||||||
|
button({ label: '保存', type: 'submit', disabled: saving }),
|
||||||
|
));
|
||||||
|
```
|
||||||
|
|
||||||
|
要点:
|
||||||
|
- 长表单的操作条用 `affix({ position: 'bottom' })` 贴底固定,翻到表单底部按钮也不丢;提交按钮 `type: 'submit'` 走 `form` 聚合校验。
|
||||||
|
- 校验失败时 `form` 顶部的汇总条会播报「有 N 项需要修改」并聚焦第一处(`errorSummary: false` 可关);`hint` 写格式说明,报错时自动让位。
|
||||||
|
- 提交期间用同一个 `saving` 信号锁三处:按钮 `disabled`、开关 `loading`(转圈 + aria-busy)、业务请求出口,防重复提交与中途改状态。
|
||||||
|
- 长度约束一处写够:`textField` 的 `maxCount` 设原生上限并实时计数,`formItem` 的 `rules: [{ max }]` 只做提交兜底,两处数字保持一致。
|
||||||
|
|
||||||
## 通用约定
|
## 通用约定
|
||||||
|
|
||||||
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。
|
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。
|
||||||
|
|||||||
Reference in New Issue
Block a user