告警列表应使用语义化 实现：它天然适配结构化数据、保障可访问性、支持横向滚动；状态用 data-status 驱动渲染与无障碍支持；操作后仅局部更新对应 元素，配合后端实时过滤确保分页/筛选状态同步。
告警列表页不是“堆数据”，而是要让人一眼看清状态、快速定位问题。核心是：状态可视化 + 操作可达性 + 信息不过载。
用语义化 <table> 还是 <code><div> 布局？
<p>告警列表本质是结构化数据（时间、级别、设备、状态、操作），<code><table> 天然语义正确、可访问性好、横向滚动兼容性强。别被“table 过时”误导——只要数据有行列关系，它就是最稳妥的选择。
<ul><li>用 <code><table>：列对齐稳定，<code>colgroup 可控宽度，屏幕阅读器能自然读出行列关系
<div> + Flex/Grid 实现“伪表格”：缩放或窄屏下容易错行，排序/导出等后续扩展成本高
<li>真要响应式折叠？用 <code>@media 隐藏非关键列（如 description），或加“详情展开”按钮，别强行把表格压成卡片流
status 字段怎么渲染成颜色+文字标签？
别用一堆 <span class="status-critical"></span> 手动写样式。用数据驱动渲染，兼顾可维护性和无障碍支持：
- 后端或 JS 中统一映射：
{ critical: { text: '严重', color: '#d32f2f' } } - HTML 中用
data-status保留原始值：<td data-status="critical"><span>严重</span></td> - CSS 用属性选择器控制背景/边框：
td[data-status="critical"] span { background: #ffebee; color: #d32f2f; } - 加
aria-label补充语义：<span aria-label="告警级别：严重">严重</span>
点击“确认”“屏蔽”按钮后，DOM 怎么局部更新不刷新整页？
关键不是“要不要 AJAX”，而是“更新哪一块 DOM”。直接操作行级元素，避免重绘整张表：
- 每个
<tr> 加唯一 <code>data-id：<tr data-id="alert_8274"> <li>按钮点击后，发请求，成功则只更新该行：<code>document.querySelector('tr[data-id="alert_8274"]').classList.add('resolved') - 用
classList.replace()切换状态类，比innerHTML重写更轻量 - 禁用按钮期间加
disabled和aria-busy="true"，防止重复提交
最容易被忽略的是分页和筛选后的状态同步——比如在第 3 页屏蔽了一条告警，返回第 1 页时它不该再出现。这要求后端接口必须支持实时过滤，前端不能只靠本地数组 splice。
