历史与搜索
Thread History / Search
让用户找回过去的会话，并知道当前处在哪个上下文。
今天
- 刚刚
- 09:30
- 昨天
没有匹配记录
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'history'
);
view.element.addEventListener('ui:select', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
会话跨多次访问，或用户同时处理多个主题。
什么时候不用
一次性的临时工具无需自动保存所有输入。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "今天" |
items | [{"label":"组件图鉴的目录结构","time":"刚刚","value":"structure"},{"label":"对比审批和确认弹层","time":"09:30","value":"compare"},{"label":"整理输入组件","time":"昨天","value":"i |
copyable | true |
editable | true |
removable | true |
searchLabel | "搜索历史" |
copyLabel | "复制" |
editLabel | "重命名" |
removeLabel | "删除" |
undoLabel | "撤销删除" |
emptyLabel | "没有匹配记录" |
事件
ui:select ui:copy ui:rename ui:remove ui:restore ui:error
INTERACTION NOTES
交互与可访问性
- 当前会话可被识别。
- 归档、重命名等操作能通过键盘访问。
和相似组件的区别
历史管理会话对象；会话中的消息滚动不等于历史搜索。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验