关于Dialog 对话框的交互逻辑思考

对话框，有多种关闭方式：
1、遮罩关闭 2、右上角叉号关闭 3、最下方的取消或者确定 进行关闭 4、其他业务逻辑关闭

那么，问题来了：

1. 我们需要使用哪些关闭方式？
2. 关闭方式有什么规范？
3. 需要进行关闭的二次确认有哪些场景呢？
4. 如果对话框中包含表单，表单内容需不需要清空？

一个标准的企业后台对话框正常交互逻辑是什么样的？

一、要不要二次确认？

默认（无表单 / 纯展示）：不需要二次确认，直接关闭。

有表单且用户已输入 / 修改（脏数据）：必须二次确认。

文案：“你有未保存的修改，确定关闭吗？关闭后内容将丢失。”
技术：用 before-close 钩子拦截关闭行为。

//html
<el-dialog :before-close="dialogBeforeClose"> ... </el-dialog>

//js
 dialogBeforeClose(done) {
      this.$modal.confirm('你有未保存的修改，确定关闭吗？关闭后内容将丢失。').then(_ => {
        done()
      })
    }

二、点击遮罩层允许关闭吗？

分场景：
✅ 纯提示 / 详情展示：允许（默认 true）

❌ 表单填写 / 编辑：禁止（设为 false）

//html
<el-dialog :close-on-click-modal="false" > ... </el-dialog>

防止用户误点遮罩，导致辛苦填写的内容丢失。

三、取消、遮罩关闭，要不要保留输入内容？

正规 UX 原则：
取消 /×/ 遮罩关闭：一律保留内容，下次打开弹窗仍显示.(用户可能只是暂时离开，稍后继续编辑。)

确定：提交数据，关闭，内容可清空（新增）或保留（编辑）

新增：确定后清空，下次打开是空表单。
编辑：确定后保留原数据，下次打开仍显示。

关闭方式统一规则

操作行为	纯展示弹窗（详情 / 提示 / 预览）	表单弹窗（新增 / 编辑 / 提交）	复杂流程弹窗（分步 / 向导）
右上角关闭 ×	允许直接关闭，无需确认	有脏数据→二次确认；无修改→直接关	全程禁止直接关闭，必须走完流程 / 点取消
点击遮罩层	允许关闭 close-on-click-modal=true	禁止关闭 false（强制）	禁止关闭
键盘 ESC 键	允许关闭	有脏数据→二次确认；无修改→关闭	禁止 ESC 关闭
底部【取消】按钮	直接关闭	直接关闭，永久保留表单内容	返回上一步 / 关闭，保留内容