弹窗 CRUD：一个实例贯穿新建、编辑、详情
列表页不持有表单。打开弹窗时调用 form.load()；新建和编辑继续使用 Element Plus Form，详情切换为只读 Descriptions。
- 01新增任务 → 空标题直接保存，查看宿主报错。
- 02编辑一行并修改任意字段 — dirty 与 changedPaths 随之更新。
- 03保存后在状态面板查看最近写入的记录。
- 04打开详情 → 表单切换为只读 Descriptions。
预期详情模式没有保存按钮，submit 会被拒绝。
可运行示例
本页用真实 Element Plus 控件运行四个现场场景，按一次接入通常遇到的顺序排列。从 01 开始往下走——每个场景持有独立表单实例，可以随意改字段、提交和重置。
条件字段与联动：状态仍在普通 TypeScript 里
when 控制显隐，rules 条件回调只在字段生效时挂规则；省份变化通过 linkage 清空城市并清除旧校验。
- 01打开「需要发票」— 抬头字段和必填规则一起出现。
- 02切换支付方式 — 账号字段与校验规则随之替换。
- 03先选省份再改省份 — 城市被清空，旧错误同时清除。
- 04先空表提交再填好提交 — 对比报错与解析结果。
预期只有生效中的字段参与校验，也只有它们进入提交数据。
动态数组与 Zod：稳定行 key，提交拿解析后数据
form.list() 管理动态成员行，fieldPath() 生成宿主 prop；Zod 同时约束数组长度和嵌套字段，并在提交前执行 trim。
- 01空表提交 — 项目与成员报错，滚动定位到第一个错误。
- 02删除唯一成员 — 触发数组级 min(1) 错误。
- 03添加成员并在姓名里夹空格 — 输出返回 trim 后的值。
预期输出打印的是 schema 解析后的 JSON，不是原始 model。
点击保存，自动滚动到第一个错误字段
操作按钮保持可见，必填字段藏在长表单下方。submit 失败时默认自动滚动，由宿主表单完成字段定位。
- 01保持滚动区在顶部，下方的「审批理由」默认留空。
- 02直接点击保存，不需要先寻找错误字段。
- 03表单自动滚动到底部，并在目标字段旁显示错误。
- 04填写审批理由后再次保存，确认提交成功。
预期滚动只发生在表单工作区，保存按钮保持原位；状态面板同步显示目标字段与错误。
仓库 playground
四套 playground 针对真实 UI 组件库跑同一套契约。启动离你技术栈最近的一套，然后走完下面的评估流程。
评估流程启动任意一套 playground，按顺序走完这五步：
- 01空表提交，确认宿主显示字段错误。
- 02加载编辑数据，改一个值，查看 dirty 和 changedPaths。
- 03重置，确认回到刚加载的记录。
- 04用 setErrors() 写入接口错误，再修改出错字段。
- 05切到详情模式，确认 submit 被拒绝。
- Element Plus · Vue 3
pnpm dev:vue3基础表单、CRUD 弹窗和页面、条件字段、跨字段规则、动态数组、Zod、自定义 adapter。源码 ↗ - element-ui · Vue 2.7
pnpm dev:vue2同一套新建、编辑、详情、重置、提交流程，放进遗留技术栈验证。源码 ↗ - Naive UI · Vue 3
pnpm dev:naive@vformjs/naive-ui — useNaiveForm、弹窗模式、宿主校验、Zod。源码 ↗ - Ant Design Vue · Vue 3
pnpm dev:antd@vformjs/ant-design-vue — 局部校验、滚动、弹窗模式、Zod。源码 ↗
反馈
接入问题和评估结果直接发到仓库：
- GitHub Discussions：用法问题与案例展示
- Integration-feedback issue：记录接入中可行或被阻塞的部分