空状态

Empty State

布局模式也叫：空页面、无数据状态、缺省页、暂无数据、Empty

一句话：列表、表格或页面没有内容时显示的占位区块，用插图和一句话说明为什么是空的，并给出下一步操作按钮。

详细解释

空状态出现在「还没有任何数据」的时候：新用户第一次打开项目列表、搜索没有结果、筛选后什么都没有、消息全部已读。它通常居中显示一个灰色插图或图标，一行标题（「还没有项目」），一行说明（「创建第一个项目，开始管理你的任务」），再加一个主按钮（「新建项目」）。

它的价值是把死胡同变成引导：如果只留一片空白，用户会以为页面坏了或者还在加载；好的空状态会说清原因，并告诉用户接下来能做什么。

要区分几种不同的「空」：首次使用的空，要引导创建；搜索或筛选无结果的空，要提示换个关键词或清除筛选。加载中、加载失败、没有权限都不属于空状态，应该分别显示加载状态和错误提示，而不是假装「暂无数据」。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

列表没有数据时显示空状态：在列表区域水平垂直居中，放一个 120px 的灰色线条插图，下方是标题「还没有项目」和一行灰色说明「创建第一个项目，开始管理你的任务」，再下方是主按钮「新建项目」。搜索无结果时改为「没有找到相关结果」并提供「清除筛选」按钮。加载中和加载失败不要显示空状态。

在内容区中央纵向排列插图或图标、标题、一行说明和一个操作按钮，整体水平垂直居中。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。