空状态恢复契约

大理论

空状态不是一种统一视觉组件，而是一组状态原因：首次无数据、用户清空后的完成、搜索无结果、筛选为空、权限不足、配置缺失、数据源不可用、后端失败、离线或索引未就绪。每一种原因都需要不同的文案、行动和渲染条件。把它们都写成“暂无数据”会让用户无法判断系统是否仍在加载、是否出错、是否自己没有权限，最终导致刷新、重复提交或放弃。

小知识点

1. 先区分 loading、empty、error：请求未完成时不能展示 no results，数据可能存在但无法显示时不能归入 no-data。

1. Search empty 要回显 query 并建议改词、清除搜索或查看相邻分类；filtered empty 要显示 active filters 和 reset path。

1. Permission empty 要说明需要什么权限、向谁申请、能否返回安全位置；不要只写 Access denied。

1. Configuration required 要命名缺失的连接、设置或先决条件，并给出第一个配置动作。

1. Backend/source failure 要用普通语言说明无法连接或加载，并提供安全 retry、状态页、日志或支持路径。

1. Completed/cleared empty 是成功反馈，应确认任务完成，再给出继续工作的下一步。

设计判断

一个空状态成立，当用户能回答四个问题：这里通常会显示什么，为什么现在没有，系统是否完成了当前请求，我能采取哪一个最有用的下一步。若用户只能看到空白、插图或泛泛的 No data，就不是可恢复状态。

实现建议

建立 EmptyReason 枚举，例如 no-data、search-empty、filtered-empty、permission、configuration、source-unavailable、backend-error、offline、index-not-ready、complete。空状态只在 fetch/search 完成后渲染，例如 status === "success" && items.length === 0；错误和 retry 使用单独分支。模型至少包含 title、body、primaryAction、secondaryAction、details(query/filters/source/timestamp/owner/retryAfter)。搜索和筛选页应在空状态旁保持 result count、query、active chips 与 reset action；表格为空时不要保留无意义表头和分页让读屏器先读一堆空结构。

反例/风险

加载中先显示 No records，几秒后又出现内容；权限不足时仍显示创建按钮；筛选为空但没有 reset；后端错误被伪装成暂无数据；空表格保留表头、分页和批量操作；大插图占满后台 widget；移动端主恢复按钮被 sticky bar 或键盘遮挡。

案例分析

Carbon 把 empty states 分为 no data、user action 和 error management，并明确 permissions issue、systems issue、configuration required 等错误管理空状态需要更具体的说明。NN/g 对复杂应用的分析指出，完全空白或错误的 No records 会让用户分不清加载、错误和真实无数据，降低信任。PatternFly 则把 no results、required configuration、no access、back-end failure、success、creation 分开给出不同标题、正文和行动。可复用结论是：空状态应被实现成状态机和恢复路径，而不是一个可替换插图组件。

来源链接

Carbon Empty States: https://carbondesignsystem.com/patterns/empty-states-pattern/

NN/g Empty States in Complex Applications: https://www.nngroup.com/articles/empty-state-interface-design/

PatternFly Empty State Guidelines: https://www.patternfly.org/components/empty-state/design-guidelines/

Atlassian Empty State: https://atlassian.design/components/empty-state

Material Design Empty States: https://m2.material.io/design/communication/empty-states.html