空列表应由数据驱动渲染，长度为0时只渲染语义化空提示文案，避免display切换；需区分“无数据”与“加载失败”，移动端确保热区≥44×44px且文案可读可操作。
空列表时直接显示提示文案，别用 CSS 隐藏/显示切换
空状态不是靠 display: none 控制显隐，而是由数据驱动——列表数组长度为 0 时，DOM 里就不该渲染 li，只留提示文案。否则会多一层 DOM 判断逻辑，也容易在 SSR 或 hydrate 阶段出现闪烁或不一致。
常见错误是写两套结构：v-if 渲染列表 + v-else 渲染提示，但忘了加 key 或没处理过渡；React 里则有人用 map() 后接 || 渲染提示，结果空数组 map 出来是空数组，[] || '暂无数据' 还是空数组，根本不会显示文案。
- Vue：用
v-if="list.length"包住ul，else块放提示文案，确保两者互斥且无残留节点 - React：写成
{list.length === 0 ? <code>NoData /> : list.map(...)}，别依赖 falsy 判断（比如list?.length是 number，但list ||检查的是数组本身） - 纯 HTML + JS：渲染前先判断
data.length === 0，然后container.innerHTML = data.length ? htmlList : htmlEmpty，避免插入空ul
提示文案要带语义化标签，别只用 div
空状态不是装饰，是可访问性关键路径。屏幕阅读器需要知道“这里本该有列表，但现在没有”。用 div 包文案，它默认是 role=generic，无法传达结构意图。
正确做法是复用列表容器的语义层级：如果主列表是 ul，空状态就用 ul + li，并加 aria-live="polite" 和 aria-label。这样当数据加载完成、列表出现时，辅助技术能感知到内容变更。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要：
<div class="empty">暂无数据</div> - 推荐：
<ul aria-live="polite" aria-label="空列表提示"><li>暂无数据</li></ul> - 如果必须用非列表结构（如卡片式空态），至少加
role="region"和aria-labelledby关联标题
fetch 后列表为空，得区分“没数据”和“加载失败”
空列表不等于正常流程终点。用户看到“暂无数据”，可能以为功能坏了，其实可能是接口返回了 200 但 data: []，也可能是网络中断、401、500 导致根本没拿到数据——这两者提示文案、操作按钮、重试逻辑都不同。
关键在请求状态管理：不能只看响应体是否为空，得结合 response.ok、response.status、以及 catch 是否触发。
- 成功响应但 data 为空 → 显示“暂无符合筛选条件的数据”，可带重置筛选按钮
- 网络错误或非 2xx 状态 → 显示“加载失败”，按钮文案为“重新加载”，并绑定重试函数
- 避免把
try/catch里的 error message 直接展示给用户（比如 “TypeError: Failed to fetch”），要映射为用户能理解的提示
移动端空状态需预留足够点击热区，别让文案变成“不可点的摆设”
很多空页面在手机上放个“+ 新建”按钮，但文案紧贴底部、字号小、行高窄，手指点下去经常失焦。这不是 UI 问题，是交互链路断裂：用户想操作，却找不到明确入口。
解决重点不在美化，而在行为引导。空状态区域本身应具备可点击性（哪怕只是透传到按钮），且热区尺寸符合移动最小触控标准（建议 ≥ 44×44px）。
- 把整个空状态容器设为
display: flex，按钮用margin: auto居中，并包裹在button内（别用div + click） - 文案行高设为
1.5，字体不小于16px，上下留白至少24px - 如果空状态含多个操作（如“新建”“导入”“查看帮助”），用垂直排列 + 足够间距，别挤成一排
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
