状态组件测试页

集中展示骨架屏、空状态、加载、表单等各类状态,供测试与设计走查。切换右上角外观模式可同时验证深色/浅色。

骨架屏 · 卡片网格(数据加载中)
.skeleton-card
骨架屏 · 列表行
.skeleton-avatar + .skeleton
空状态 · 暂无数据
.empty-state

暂无订单

还没有相关订单,去发布一个需求吧

空状态 · 网络异常
.empty-state(错误类型)

网络连接失败

请检查网络设置后重试

空状态 · 无搜索结果
.empty-state(搜索类型)

未找到相关结果

换个关键词试试,或减少筛选条件

加载状态 · Spinner 与按钮加载
.spinner / .btn-loading
正在生成内容…
表单状态 · 正常 / 错误 / 成功
.form-control.error / .form-status
请输入有效的邮箱地址
提交成功,我们会尽快与您联系
徽章与状态点
.badge / .status-dot
默认主推 成功警告 错误
已完成 进行中 待处理 已失败