卡片容器必须用 article，因其语义正确且定位上下文稳定；.badge 需父容器设 position: relative 并配合 transform: translate(50%, -50%)；主体用 CSS Grid 三行轨道布局；通知数字须走框架响应式更新；深色模式需单独重置 badge 颜色。
卡片容器必须用 article，不是 div 或 section
语义错误会导致通知数字在缩放、打印或屏幕阅读器下错位或不可读。浏览器对 article 的定位上下文识别更稳定，尤其当卡片内嵌 position: relative 用于角标时，不会因祖先元素 transform 干扰而偏移。常见错误是套个 div class="card"> 就完事，结果 .badge 相对于 body 定位，飘到页面右上角。
.badge 绝对定位要配 transform: translate(50%, -50%)
只写 top: -6px; right: -6px 在 SVG 图标或缩放容器里会失效。必须让父容器（比如包裹图标的 span 或 button）设 position: relative，再给 badge 加：
position: absolute; top: 0; right: 0; transform: translate(50%, -50%); min-width: 18px; padding: 0 4px; font-size: 12px; line-height: 1; border-radius: 9px; background: #ff4757; color: white;
数字超 99 时建议前端逻辑截断为 "99+"，避免宽度撑开破坏卡片边距。
卡片主体用 CSS Grid 三行轨道，别靠 margin 推小贴士
标题、内容区、小贴士（aside）堆叠容易挤在一起，尤其响应式下。正确做法是给 article 设：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.5rem;
这样中间内容区自动撑开，aside 始终钉在底部且不抢高度。小贴士本身加 font-size: 0.875em 和 margin-top: 1rem，视觉上退后半步。
通知数字更新不能直接改 DOM，得走框架响应式链路
React 里写 document.querySelector('.badge').textContent = count 看似快，但下次重渲染会被覆盖；Vue 里用 v-html 渲染 badge 会丢失响应性。正确姿势：
- React：用
{count > 0 && <span classname="badge">{count}</span>}，由useState驱动 - Vue：用
<span v-if="count > 0" class="badge">{{ count }}</span> - 纯 JS：确保 badge 是卡片 HTML 字符串的一部分，每次更新整张卡片 innerHTML（慎用），或用
dataset存值再由 CSS 计数器渲染
最易被忽略的是深色模式下 badge 的 alpha 值——rgba(0,0,0,0.8) 在黑底上几乎看不见，得单独 media query 重置为 rgba(255,255,255,0.9)。
