空状态
Empty State
解释为什么没有内容，以及用户可以做什么。
还没有会话
发起一个问题，第一段对话就从这里开始。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'empty'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
首次使用、筛选无结果或确实没有数据。
什么时候不用
请求失败和加载中不应伪装成没有数据。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "还没有会话" |
description | "发起一个问题，第一段对话就从这里开始。" |
actionLabel | "" |
url | "/" |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 保留区域标题与下一步操作。
- 装饰图形不替代文字解释。
和相似组件的区别
空状态说明数据缺席；Skeleton 表示还在加载，Error 表示没能取到。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Svelte / SvelteKit · 来源核验