空数据提示页必须嵌套在真实数据容器内部，如表格空状态放里、列表放内，以保障语义结构、屏幕阅读器可访问性、CSS :empty 伪类生效及响应式正确；应使用 CSS（:has() 或相邻兄弟选择器）自动控制显隐，避免 JS 漏判边界情况；文案需匹配实际原因，提供操作入口，支持深色模式与 Seed 数据兜底，并显性反映筛选/分页上下文。
空数据提示页该放在哪个 DOM 位置
必须嵌套在真实数据容器内部，而不是整个页面顶部或侧边栏外层。比如表格空状态要放在 <tbody> 里，列表空状态要放在 <code><ul></ul> 或 <div class="list-container"> 内部。否则会破坏语义结构，导致屏幕阅读器跳过、CSS <code>:empty 伪类失效，且响应式断点错位。
用 CSS 实现“有数据时自动隐藏，无数据时居中显示”
别依赖 JS 控制显隐——容易漏掉异步加载失败、过滤后清空等边界情况。直接用原生 CSS 更稳：
<tbody> 里放一个 <code><tr class="empty-state"><td colspan="5">暂无数据</td></tr>，再配tbody:has(tr:not(.empty-state)) .empty-state { display: none; }（需浏览器支持:has()）- 不支持
:has()的旧环境（如 IE 或部分安卓 WebView），改用tbody tr:not(.empty-state) + .empty-state { display: none; }，并确保空状态<tr> 紧跟在真实数据行之后 <li>文字居中用 <code>text-align: center; padding: 48px 0;，图标用<svg></svg>行内渲染，避免额外 HTTP 请求 - 写“数据加载失败”但实际是筛选条件太严——应改成“未匹配到符合条件的数据”，并附带
清除筛选按钮 - 只放静态文字，没给操作入口——至少加一个
刷新按钮绑定location.reload()或对应 API 重载逻辑 - 图标用 PNG 而非 SVG，缩放模糊；或用 font-icon，在无网络/字体加载失败时变成方块
- 没考虑深色模式：灰色文字在暗背景上对比度不足，需用
color: var(--text-secondary);配合 CSS 自定义属性 - 在空状态区域加
data-seed-fallback="true"属性，供 JS 检测是否处于兜底模式 - 兜底模式下，
刷新按钮应替换为恢复示例数据，点击后调用window.seed.restore()（若存在）或注入预置 JSON - 避免在空状态里写“请联系管理员”，因为 seed 场景根本没后端——换成“此页面可离线运行，示例数据已加载完毕”更准确
空状态文案和交互设计容易踩的坑
空状态不是报错，而是用户当前操作路径的自然结果。常见错误包括：
如何兼容 Seed 数据兜底场景（如 live-dashboard）
当模板设计为“零后端也能跑”，空状态可能出现在 seed 数据被手动清空、或 mock 接口返回 [] 时。这时不能只靠视觉提示：
立即学习“前端免费学习笔记（深入）”；
