技能介绍

背景：弹窗各自实现带来的问题

在 smart-admin 这类后台里，确认框、表单弹窗、详情与危险操作弹窗如果每个页面手写一套，很容易出现遮罩误关、ESC 与焦点乱跳、提交中仍可重复点击、校验失败后用户找不到第一个错误字段等问题。结构和组件不统一时，评审与联调成本也会抬高。

技能如何组织输出

本技能按你提供的交互约束生成可落地的弹窗骨架，而不是泛泛的 Modal 示例：

信息采集：弹窗类型、打开/关闭条件、是否允许遮罩与 ESC 关闭、提交是否需要二次确认与防重复提交。
结构基线：以 references/modal-template.md 为模板，区分主动作、次动作与危险动作的层级。
焦点与关闭：打开时聚焦首元素，关闭时焦点回退到触发源；成功关闭、失败保留并提示。
状态机：显式区分 idle、submitting、success、error，约束「何时可点确定」。
表单强制规范（Vue + Ant Design Vue）：表单区域用 class="common-form"；接入 useFormErrorScroll（validateAndScroll、resetFormScroll、formContainerRef）；打开后 resetFormScroll() 并 clearValidate()；控件统一为 admin-input、a-textarea（含 maxlength / show-count）、SmartEnumSelect、业务上传组件；a-form-item 的 name 与 formModel 字段一致。

交付物包括弹窗结构、交互约束、异常策略（接口失败、校验失败、超时）以及与项目技术栈一致的示例骨架；表单弹窗必须体现上述规范，不能只写通用描述。

适用边界

技能面向 Vue + Ant Design Vue + smart-admin 约定栈；若项目未提供 useFormErrorScroll、admin-input 等等价能力，需要先对齐组件与 hook 再套用输出。非表单类弹窗不会强行套用表单滚动规范，但仍会按类型补齐关闭与焦点规则。