空状态需包含状态说明、原因提示、可操作入口三要素，用语通俗，交互可聚焦，css控制动效与响应式，ssr需预渲染html，状态判断须细化而非仅依赖布尔值。
空状态不是“页面没内容”，而是用户预期有内容但系统无法提供时的明确反馈。直接丢个灰色图标加“暂无数据”是无效设计，关键在告诉用户「现在什么情况」「接下来能做什么」。
空状态必须包含三个要素：状态说明 + 原因提示 + 可操作入口
比如搜索结果为空，不能只写“没有找到”，要说明是「搜索词无匹配」还是「网络异常导致未加载」；如果是权限限制，则需明确提示「你没有查看该列表的权限」。可操作入口不一定是按钮——可以是 <a></a> 链接跳转设置页，也可以是 button 触发重试，甚至是一个带 onclick 的图标。常见错误是把空状态做成纯静态文案，用户看完只能刷新或关掉页面。
- 状态说明用简短主标题（
<h3></h3>或<strong></strong>），不超过 8 个字 - 原因提示用普通段落（
<p></p>），避免技术术语，如不说「HTTP 404」而说「这个页面可能已被移除」 - 操作入口必须可聚焦、可键盘触发，禁用
div onclick模拟按钮
用 CSS 控制空状态的可见性与过渡，别靠 JS 切换 class
空状态是否显示，应由数据逻辑决定，但它的入场动效和响应式表现得交给 CSS。常见做法是给容器加 empty-state 类，再用 :has() 或兄弟选择器联动控制。例如：
.list-container:has(> .empty-state) {
min-height: 200px;
}
.empty-state {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s, transform 0.2s;
}
.list-container:not(:has(> .empty-state)) .empty-state {
display: none;
}
.list-container:has(> .empty-state) .empty-state {
opacity: 1;
transform: translateY(0);
}
这样既避免 JS 频繁操作 DOM，又能让空状态随父容器自然响应高度变化。注意：IE 不支持 :has()，若需兼容，改用 JS 设置 data-empty 属性再用属性选择器。
图标、文字、间距必须统一尺寸系统
空状态里的图标不是装饰，是视觉锚点。它和文字的行高、上下边距、字体大小必须严格对齐。推荐用 em 或 rem 单位建立比例关系：
- 图标尺寸设为
2.5rem（即 40px） - 主标题字号
1.125rem（18px），行高1.4 - 图标与主标题间距
0.75rem（12px） - 主标题与说明文字间距
0.5rem（8px）
混用 px 和 rem 会导致缩放时错位；用 flex 布局时别忘了设 align-items: center，否则图标和文字容易垂直偏移。
服务端渲染场景下，空状态 HTML 必须提前输出
如果页面由 SSR（如 Next.js、Nuxt）生成，空状态结构不能等 JS 加载完才插入。否则首屏会闪出空白或骨架屏，再跳成空状态，体验断裂。正确做法是在模板中直接写好空状态 HTML，并用条件注释或服务端变量控制显隐：
<!-- 服务端已知无数据 -->
<div class="list-container">
<div class="empty-state">
<svg aria-hidden="true" width="40" height="40">...</svg><h3>暂无订单</h3>
<p>你还没有创建任何订单</p>
<button type="button" onclick="location.href='/orders/new'">去下单</button>
</div>
</div>
客户端 JS 只负责绑定事件和微调动效，不负责生成结构。漏掉这点，SEO 和首屏性能都会受损。
空状态最难的不是画图标或写文案，是判断「此刻到底该显示哪个空状态」——同一个列表，在加载中、加载失败、权限不足、数据为空、搜索无果时，应该展示完全不同的内容。这需要后端返回足够细的状态码，前端按码映射，而不是全堆在一个 isEmpty 布尔值上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
