应替换alert()为或role="alert"横幅，因其不阻塞脚本、可定制且兼容无障碍；console.warn()仅用于开发者调试，不可作用户提示。
别用 alert() 做用户可见的警告提示——它阻塞脚本、无法定制、移动端常被拦截，上线前必须替换。
console.warn() 只给开发者看，不面向用户
console.warn() 是调试工具，只输出到浏览器控制台（F12 打开），普通用户根本看不到。它适合标记“这里逻辑可能有隐患”，比如参数未定义、API 返回结构异常等。
- 调用简单：
console.warn("user.id 为空，将回退到 guest 模式") - 支持传对象或数组，方便排查上下文：
console.warn({ userId, timestamp: Date.now() }) - 不会影响页面渲染或交互，但也不该出现在生产环境的用户提示链路里
用户看到的警告，优先用 <dialog></dialog> 元素
现代浏览器（Chrome 37+、Edge 79+、Firefox 98+、Safari 15.4+）已原生支持 <dialog></dialog>，语义正确、可聚焦、支持 showModal()、无需 JS 库。
- 结构必须完整：
<dialog id="warn-dialog"><p>⚠️ 预算已超支 15%</p> <button onclick="this.closest('dialog').close()">知道了</button></dialog> - 显示必须手动触发：
document.getElementById('warn-dialog').showModal()，不能靠 CSSdisplay控制 - 常见报错
Failed to execute 'showModal' on 'HTMLDialogElement'，基本是两个原因：元素还没插入 DOM，或调用不在用户手势上下文（如fetch回调里直接调）。解决方法是先document.body.appendChild(dialog)，再加一层setTimeout(() => dialog.showModal(), 0)
要轻量、不打断操作，就用顶部固定横幅 + aria-live
比弹窗更可靠的是视觉强提示 + 无障碍播报，尤其适合风险预警、状态变更等需用户知晓但不强制中断的场景。
- 结构语义化：
<div role="alert" aria-live="assertive" class="warning-banner">项目延期 3 天</div> - CSS 关键点：
position: fixed; top: 0; width: 100%; z-index: 1000; display: flex; align-items: center;，背景色推荐#fff3cd，文字色#856404 - 关闭后必须调用
element.remove()，不能只设display: none——否则仍存在于 DOM 中，可能干扰焦点流或被读屏软件误读 - 如果横幅由数据驱动（如 Vue/React），要用
v-if或useState配合防抖判断，避免预算字段微小变动就反复创建销毁
真正难的不是“怎么弹出来”，而是“什么时候该消失”和“消失后是否真从 DOM 清除”。很多警告框关了还占着内存、挡着焦点、被 AT 读到，这才是线上问题高发点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
