气泡提醒需结合视觉强化与行为触发，依赖CSS定位、JS状态控制及aria-live可访问性支持，伪元素实现更轻量，状态同步须由数据源驱动而非UI操作。
气泡提醒不是加个 div 就完事
HTML 仪表盘里用“气泡”做关键指标提醒，本质是视觉强化 + 行为触发的组合动作，不是单纯画个圆点。浏览器原生不提供「气泡提醒」组件，必须靠 CSS 定位 + JS 状态控制 + 可访问性兜底。常见错误是只加了红点但没绑定状态变化逻辑，结果数据更新了气泡还挂着；或者用 title 属性当提示，结果移动端不触发、屏幕阅读器读不出来。
aria-live 是气泡提醒可访问性的底线
用户可能靠键盘导航或使用读屏软件，气泡出现必须被感知。仅靠颜色/动画无法满足 WCAG 2.1。必须配合 aria-live="polite" 区域监听状态变更：
<span aria-live="polite" aria-atomic="true" class="bubble-alert"></span>
JS 更新时写入文本（如 "新增 3 条高风险告警"），浏览器会自动朗读。别用 aria-hidden="true" 遮住气泡本身——那等于把提醒藏起来。
- 气泡 DOM 必须保留在正常文档流中，不能全靠
position: absolute脱离 - 避免在
aria-live区域里塞 HTML 标签，纯文本最稳 - 首次加载就有的提醒，需在 DOM ready 后再设值，否则读屏器可能跳过
用 CSS ::after 实现轻量气泡，别堆 div
每个指标旁硬加一个 会导致 DOM 膨胀、渲染卡顿，尤其指标数超 20 个时。推荐用伪元素：
.metric-item[data-has-alert="true"]::after {<br> content: "";<br> position: absolute;<br> top: -6px;<br> right: -6px;<br> width: 12px;<br> height: 12px;<br> background: #ff4757;<br> border-radius: 50%;<br> box-shadow: 0 0 0 2px #fff;<br>}
这样只需 JS 切换 data-has-alert 属性，CSS 自动响应。注意：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 确保父容器
position: relative，否则::after会相对 body 定位 - 移动端点击热区太小，建议给父元素加
padding-right避免误触 - 不要用
animation: pulse无限闪烁，连续动效易引发眩晕，改用单次缩放或颜色渐变
气泡消失逻辑比出现更难处理
用户点开告警列表、确认已读、或后台自动修复后，气泡该不该立刻消失？直接删 DOM 或清属性常导致状态不同步。正确做法是：由数据源驱动，而非 UI 操作反向写回。
例如指标数据来自 WebSocket：onmessage 收到新包后，先比对当前缓存状态，再统一更新所有 data-has-alert 属性。别在「用户点击气泡」事件里直接 element.removeAttribute("data-has-alert") —— 这会让下次数据刷新时因状态不一致而漏掉提醒。
真正容易被忽略的是时间维度：某个指标连续 3 分钟异常才标气泡，恢复后还需持续 1 分钟无异常才清除。这种滞后期必须在业务逻辑层实现，不能靠前端定时器硬等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
