应使用 CSS Grid 而非 table 实现多指标并排，因 table 语义错误、响应式差、无障碍不达标；Grid 支持自适应布局、单卡独立控制、语义清晰，配合 metric-card 结构、基准线可视化、动态 DOM 更新与无障碍标记，才能支撑真实决策。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
多个指标并排对比，为什么不能直接用 table 套 div？
很多人一想“并排”，就立刻写 <table>
<tr>
<td>CPU</td>
<td>内存</td>
</tr>，结果发现：数值对不齐、小屏横向滚动、导出 Excel 列名丢失、屏幕阅读器读成“一行两个独立词”而非“CPU 使用率 42% vs 内存使用率 68%”。根本问题在于，<code><table> 的语义是「二维关系矩阵」，而仪表盘里多个指标（如 CPU、内存、磁盘）本质是**平行维度**，不是行列交叉数据。
<ul><li>用 <code><table> 强行并排，会迫使每项加 <code>colspan 或空 <td> 补位，破坏语义结构
<li>响应式时无法单独控制某一项的折叠/展开，所有指标被绑死在同一行流中</li>
<li>无障碍测试工具（如 axe）会报 <code>table-duplicate-header 错误——因为没有真正的列头定义
用 CSS Grid 实现等宽并排指标卡片最稳
真正适合仪表盘多指标并排的是 display: grid，它天然支持等分布局、自动换行、单卡独立交互，且不污染语义结构。关键不是“怎么画格子”，而是怎么组织 DOM 层级。
- 外层容器设
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))); gap: 12px;—— 自适应列数，最小 240px，超出自动新增一列 - 每个指标用
<article class="metric-card"></article>包裹，内部结构统一：<h3 class="metric-label">CPU 使用率</h3> <strong class="metric-value">42%</strong><div class="metric-trend">↑2.1%</div> - 不要用
float或inline-block：前者脱离文档流易导致高度塌陷；后者在小屏下换行不可控 - 若需突出某项（如告警状态），直接给对应
article加grid-column: 1 / -1占满整行，无需改 HTML 结构
数值对比要带基准线，别只靠颜色
仪表盘里“CPU 42%”和“内存 68%”放一起，用户没法直观判断哪个更紧急。单纯用红/绿背景色是危险的——色盲用户无法识别，且缺乏量化参照。
- 每个指标卡片内必须有一条视觉基准线，比如用
<div class="metric-bar"><div style="width: 42%"></div></div>，配合background: linear-gradient(to right, #e0e0e0, #e0e0e0)绘制灰底 - 阈值分段用伪元素实现，避免 JS 动态插入 DOM：
.metric-bar::before { content: ""; position: absolute; width: 70%; height: 100%; background: #ffcc00; }（表示 70% 以下为黄区） - 绝对数值旁标注相对变化（如
+2.1% vs 上一分钟），但要把“上一分钟”这类时间锚点用<time datetime="2026-10-27T12:20"></time>包裹，供自动化工具提取 - 禁用仅靠颜色传达信息：红色背景 + 向下的
↓图标 + “较前值下降”文字三者必须同时存在
动态更新时，DOM 复用比重绘更关键
实时仪表盘每秒刷新，如果每次更新都 innerHTML = newCardHTML，会导致焦点丢失、动画中断、屏幕阅读器重复播报。重点不在“怎么刷”，而在“刷什么”。
立即学习“前端免费学习笔记（深入）”；
- 只更新实际变动的文本节点：
card.querySelector('.metric-value').textContent = '45%';，而不是替换整个<article></article> - 数值变化超过 ±5%，才触发动画类名（如
metric-value--changed），避免高频抖动干扰判断 - 用
requestIdleCallback批量更新非关键指标（如“网络延迟 P95”），保证主指标（CPU、内存）优先渲染 - 如果某指标暂时无数据，显示
<span aria-live="polite">离线</span>而非留空或占位符，确保辅助技术可感知状态变更
time[datetime]、缺阈值分段视觉提示、或更新时粗暴重写 DOM，整个对比逻辑就从“辅助决策”退化成了“装饰性动效”。
