组件选型笔记草稿
让用户理解下一步
先呈现计划，再显示每一步的结果。
下载示例笔记产物预览
Artifact / Generated Output
把文档、代码或图表作为可独立查看的成果。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'artifact'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
产物需要继续编辑、导出或离开聊天后使用。
什么时候不用
短句回答无需额外建立一个产物面板。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "组件选型笔记" |
state | "草稿" |
heading | "让用户理解下一步" |
content | "先呈现计划，再显示每一步的结果。" |
filename | "component-notes.txt" |
downloadLabel | "下载示例笔记" |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 预览区域有名称。
- 更新时保留用户阅读位置和操作焦点。
和相似组件的区别
产物有独立生命周期；消息负责解释产物是如何得到的。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验