代码块
Code Block
让代码与普通文本分离，便于阅读和复制。
example.js
const result = await agent.run({
task: "让过程可以理解"
});app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'code'
);
view.element.addEventListener('ui:copy', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
展示命令、配置或可复制的代码片段。
什么时候不用
需要运行或编辑代码时，应另设编辑器或执行环境。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
filename | "example.js" |
code | "const result = await agent.run({\n task: \"让过程可以理解\"\n});" |
copyLabel | "复制" |
事件
ui:copy ui:error
INTERACTION NOTES
交互与可访问性
- 使用 pre 与 code 语义。
- 允许横向滚动，复制结果提供文字反馈。
和相似组件的区别
代码块展示内容，不代表代码已执行或通过验证。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验