UI · №28 · SPECIMEN

空状态Empty State

列表里什么都没有的时候显示的那个页面「暂无数据」那种页面第一次进来空空的引导页

LIVE SPECIMEN真的能玩，点点看

还没有项目

先看结论

视图没有内容时展示的引导性占位：插图/说明 + 一个明确的下一步动作按钮。

适合: 新用户首次进入、搜索无结果、列表被清空——三种「空」各需要不同文案。
不适合: 加载中的空白——那是骨架屏/Spinner 的活，别用空状态文案误导用户以为真的没数据。

直接发给 agent

When the project list is empty, show an empty state: a simple illustration, the line 'No projects yet', and a primary 'New project' button centered in the content area. Use different copy for 'no search results' (suggest changing keywords) vs 'first visit' (onboarding tone).

已于 2026-07-17 实测通过

技术标注2 项

web: 条件渲染：列表为空时显示 <section> 引导块
react: items.length === 0 ? <EmptyState/> : <List/>

详细说明

空状态是最容易被敷衍成「暂无数据」四个字的地方，却也是引导新用户的黄金位置。区分「首次进入」「搜索无结果」「已清空」三种空，给出不同的下一步，才是专业做法。