生产环境操作必须二次确认，因前端操作不可逆且易误触；应使用<dialog> + showModal()实现可控弹窗，服务端注入环境标识，并在确认后禁用按钮、反馈真实状态。
生产环境操作为什么必须二次确认
因为浏览器里没有“撤回”按钮，fetch发出去的请求、localStorage.removeItem删掉的数据、window.location.href跳转的目标，全都是不可逆的。一次点击就触发生产变更，出错概率远高于开发环境——不是用户手滑，是 UI 没拦住。
常见错误现象：confirm("确定要发布吗？")被直接绕过（按空格/回车自动确认）、没区分环境导致测试环境也弹窗、弹窗文案没写清影响范围（比如没提“将覆盖线上配置”）。
关键点：
- 确认逻辑必须和服务端环境标识对齐，不能只靠前端判断
location.hostname - 弹窗文案要包含具体动作+影响范围，例如：“将立即停用所有线上 API 密钥”
- 禁止用
alert或原生confirm做生产确认——它们无法阻止键盘默认行为，且样式不可控
用 showModal() 实现可控的二次弹窗
现代方案首选 <dialog> + showModal()，它原生支持焦点锁定、ESC 关闭拦截、Backdrop 点击穿透控制，比手写 div 层级和 focusin 监听靠谱得多。
立即学习“前端免费学习笔记（深入）”；
使用场景：部署按钮、删除线上资源、切换灰度开关等高危操作入口。
实操建议：
- 把
<dialog>放在<body>底部，避免被父容器overflow: hidden截断 - 调用
dialogElement.showModal()前，先检查dialogElement.open === false，防止重复打开 - 绑定
click到取消按钮时，显式调用dialogElement.close()，不要依赖close事件自动触发 - 兼容性注意：Safari 15.4+ 才支持
showModal()，旧版本需降级为show()+ 手动加inert属性锁页面
<dialog id="prod-confirm"> <p>⚠️ 即将停用全部生产环境缓存</p> <button id="confirm-btn">确认执行</button> <button id="cancel-btn">取消</button> </dialog>
如何安全地判断“当前是生产环境”
前端不能信任任何运行时拼接的域名或路径做环境判定。真实项目里，location.hostname === "example.com" 可能被本地 hosts 劫持，process.env.NODE_ENV 在构建后已固化，无法反映实际部署环境。
正确做法是让服务端注入明确的环境标识：
- 在 HTML 的
<head>中写入<meta name="env" content="production">，JS 读取document.querySelector('meta[name="env"]').content - 或者由后端在初始化 JS 时注入全局变量，如
window.__ENV__ = { isProd: true } - 绝对不要用
fetch("/api/env")异步判断后再决定是否弹窗——网络延迟会导致用户误点，且失败时逻辑断裂
参数差异：测试环境可能有多个（staging、preprod），但生产环境标识必须唯一、不可伪造、不可通过 URL 参数覆盖。
点击确认后的防重提交与状态反馈
弹窗点了“确认”，不等于操作成功。用户看到空白按钮或无响应，大概率会狂点——这是 80% 的重复提交根源。
性能与体验要点：
- 点击确认按钮后，立刻禁用该按钮并加
disabled属性，同时修改文字为“执行中…” - 网络请求完成前，保持
<dialog>打开状态；成功则dialog.close()，失败则保留弹窗并在内部显示错误信息（如"502 Bad Gateway"） - 不要用
setTimeout模拟加载，真实请求超时应明确提示，比如 “操作已超时，请检查网络后重试” - 若操作涉及页面跳转（如发布后跳转到监控页），确保跳转前已收到服务端 200 响应，而不是仅靠前端计时器
容易被忽略的是：某些 CI/CD 页面的“上线”按钮，点击后服务端异步触发构建，前端却立即关闭弹窗并显示“发布成功”。实际上构建可能失败，而用户毫无感知。
