Modal Template Builder

目标

输出统一、安全、可访问的弹窗交互模板，减少误触发和状态混乱问题。

在 smart-admin 的表单弹窗场景中，需同时保证结构统一、组件统一、校验行为统一，避免每个弹窗各自实现。

输入信息采集

1. 弹窗类型（确认、表单、详情、危险操作）。
2. 打开来源和关闭条件。
3. 是否允许遮罩关闭、ESC 关闭。
4. 提交动作是否需要二次确认与防重复提交。

执行流程

1. 采用 references/modal-template.md 作为基础结构。
2. 明确动作层级：主动作、次动作、危险动作。
3. 补充焦点规则：打开聚焦首元素，关闭回退触发源。
4. 规范关闭时机：成功后关闭、失败保留并提示。
5. 输出交互状态：idle、submitting、success、error。
6. 表单弹窗一律接入 useFormErrorScroll，并在打开弹窗后执行滚动与校验状态重置。
7. 表单容器一律使用
   包裹。
8. 表单项组件按统一控件规范输出（输入框、上传、枚举、多行文本）。

项目强制规范（Vue + Ant Design Vue）

1. 表单区域必须使用 class="common-form" 包裹，不允许省略。
2. 必须使用 useFormErrorScroll：
• 从 hook 中解构 validateAndScroll、resetFormScroll、formContainerRef；
• 提交时使用 await validateAndScroll(formModelRef)；
• showDialog 或弹窗打开后执行 resetFormScroll()；
• 配合 formModelRef.value.clearValidate() 重置校验状态。
3. 输入控件统一：
• 单行输入使用 admin-input；
• 上传使用业务对应上传组件（如 base-upload），并绑定业务目录枚举（如 :folder="FileEnum.XXX"）；
• 多行输入使用 a-textarea，必须设置 :maxlength 与 show-count；
• 枚举字段使用枚举选择器 SmartEnumSelect（或项目等价枚举组件），不使用手写 options。
4. a-form-item 的 name 必须与 formModel 字段保持一致，避免校验失效。

输出要求

1. 弹窗结构（标题、正文、操作区）。
2. 交互约束（可否关闭、何时可点确定）。
3. 异常策略（接口失败、校验失败、超时）。
4. 示例实现骨架（与项目技术栈一致）。
5. 若为表单弹窗，输出必须显式体现上述 4 条强制规范，不允许只给通用描述。