仪表盘骨架屏最难的是确保真实数据渲染后不跳动、不重排、不遮挡关键指标，必须让骨架与真实仪表共享完全一致的盒模型、缩放行为与坐标原点。
仪表盘类页面骨架屏最难的不是“画几个灰色块”，而是真实数据渲染后不跳动、不重排、不遮挡关键指标——必须让 .skeleton-gauge 和真实 <canvas></canvas> 或 SVG 仪表共享完全一致的盒模型、缩放行为与坐标原点。
为什么仪表盘骨架屏容易错位或闪烁
常见错误是把骨架当成普通卡片处理：用固定 width/height + background 渐变，但仪表组件（如 ECharts gauge、Chart.js radial、D3 仪表盘）往往依赖容器尺寸动态计算绘图区域，且内部使用 transform: scale() 或 viewBox 适配。一旦骨架占位块尺寸/比例和真实 canvas 不一致，hydration 后就会发生 layout shift。
- 真实仪表常设
width: 100%; aspect-ratio: 1，但骨架用了height: 200px→ 宽高比失配，圆心偏移 - 骨架用
border-radius: 50%画圆，但真实 canvas 绘制时基于getBoundingClientRect()计算半径 → 像素级偏差导致指针“抖一下” - 仪表盘有多个子模块（数值+环形图+进度条），但骨架只套了一个
div→ 内部 flex/gird 布局未对齐，文字行高错位
用 aspect-ratio + contain: layout paint 锁定占位结构
必须让骨架容器和真实仪表容器 DOM 结构、CSS 层级、尺寸计算路径完全一致。最简方案是复用同一套 class，并仅切换内容：
<div class="gauge-container"> <div class="gauge-skeleton" aria-hidden="true"></div> <canvas class="gauge-canvas" aria-hidden="true"></canvas> </div>
对应 CSS 强制统一约束：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
.gauge-container {
width: 100%;
aspect-ratio: 1;
contain: layout paint;
}
.gauge-skeleton,
.gauge-canvas {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
.gauge-canvas { display: none; }
.gauge-container.loaded .gauge-skeleton { display: none; }
.gauge-container.loaded .gauge-canvas { display: block; }
-
contain: layout paint防止骨架显隐触发父容器重排 - 禁用
visibility: hidden—— 它保留渲染树但不可见，仍参与布局计算，易引发 CLS - 所有尺寸单位统一用
%或aspect-ratio，不用px、em等相对值
Vue/React 中精准控制显隐时机的关键判断
不能等 loading: true 才显示骨架，而应在组件挂载、DOM 就绪、且仪表数据为 null 或 undefined 时立即激活。尤其要注意 SSR hydration 场景：
- Vue：
v-if="!gaugeData || gaugeData.value === undefined"，不要用v-show；在onMounted中检查document.readyState === 'complete'避免服务端已渲染真实内容后客户端又闪一次骨架 - React：
useEffect(() => { if (data == null) setLoaded(false); }, [data])，初始 state 设为null而非{}，否则骨架逻辑永远不会触发 - 仪表盘若含多个 gauge，需每个独立判断数据状态，避免一个加载完就隐藏全部骨架
真正难的不是写几行渐变 CSS，而是让骨架和真实仪表在浏览器 layout、paint、composite 三阶段都走完全相同的路径——哪怕 canvas 的 devicePixelRatio 补偿逻辑，也要在骨架上模拟出等效的缩放锚点。否则用户看到的不是“过渡”，而是“重绘”。
