空态页面 — 状态变体

共 5 个变体，覆盖文章列表无结果、留言空态、网络错误、加载中等场景。

📝
还没有文章
作者正在努力创作，敬请期待~
空列表
引导用户去其他板块浏览
🔍
没有找到匹配的结果
试试其他关键词
Vue3 React 旅行 摄影
搜索无结果
推荐热门标签引导用户点击
📡
加载失败了
网络连接异常，请检查网络后重试
网络错误
红色图标 + 重新加载按钮
💬
还没有留言
来做第一个留言的人吧！
留言空态
简洁鼓励，引导用户首次留言
📸
相册还是空的
作者会尽快上传照片的~
相册空态
与文章列表空态类似，文案不同
加载中（骨架屏）
骨架屏模拟卡片布局，pulse 动画

设计 Tokens

元素 值 说明
图标容器 w-20 h-20 rounded-full bg-[#f5f5f5] 圆形浅灰背景
图标大小 text-4xl（36px） emoji 图标
标题 text-base font-medium 描述当前状态
副标题 text-sm text-[#737373] 补充说明或鼓励
骨架屏色块 bg-[#f5f5f5] animate-pulse 圆角匹配实际内容形状
错误图标背景 bg-red-50 网络错误用红色容器