组件状态示例
本页集中展示文档中心与业务组件的加载、空、错误、骨架状态,便于接入时统一交互与视觉。
加载中
正在加载会话列表…
空状态
暂无会话
发起一条消息后,会话会出现在这里。
错误状态
加载失败
网络异常(code 1005),请检查连接后重试。
骨架屏
使用建议
| 状态 | 触发 | 建议 |
|---|---|---|
| 加载中 | 首次进入/翻页 | 超过 300ms 展示 loading,避免闪烁 |
| 空 | 数据为空且非错误 | 给出下一步操作按钮 |
| 错误 | 请求失败 | 展示错误码与重试入口,保留已有数据 |
| 骨架 | 首屏列表 | 按行数占位,避免布局跳动 |
相关样式
类名:.page-loading、.spinner、.empty-state、.error-state、.skeleton。深色模式下自动适配 CSS 变量。