AiArtifacts 智能组件
AiArtifacts 是一个沉浸式的侧边渲染面板，专门用于展示 AI 生成的复杂内容，如 HTML 页面、React/Vue 原型、长代码模块或结构化文档。
基础用法
通过 v-model:visible 控制显示隐藏，并传入 data 结构描述内容及其版本。
基础用法
多版本支持
Artifact 允许用户在不同的迭代版本之间自由切换，通过 versions 数组提供历史记录。您可以通过 version-change 事件监听用户的切换行为。
提示：在侧边面板顶部点击 v1/v2 即可体验版本切换。
版本切换
渲染模式
支持 preview (实时渲染) 和 code (源码高亮) 模式。目前预览模式支持标准的 HTML 结构沙盒。
源码模式
行内展示模式
通过设置 mode="inline"，组件将不再作为固定侧边栏出现，而是作为普通的块级元素嵌入在页面流或对话气泡中。
控制台原型预览
行内模式与主题自定义
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
visible | 是否可见 | boolean | false |
data | 数据结构 | ArtifactData | — |
width | 面板宽度 | string | number | '50%' |
mode | 初始模式 | 'preview' | 'code' | 'inline' | 'preview' |
themeOverrides | 主题变量覆盖 | ComponentThemeVars | — |
ArtifactData
| 属性名 | 说明 | 类型 |
|---|---|---|
id | 唯一标识 | string |
title | 标题/文件名 | string |
type | 类型 | 'code' | 'html' | 'markdown' | 'vue' | 'react' | 'diagram' | 'chart' | 'sandbox' | 'canvas' |
versions | 版本列表 | ArtifactVersion[] |
ArtifactVersion
| 属性名 | 说明 | 类型 |
|---|---|---|
version | 版本号 | string | number |
content | 源代码内容 | string |
description | 更改说明 | string |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
version-change | 切换版本时触发 | (v: ArtifactVersion) => void |
close | 关闭面板时触发 | — |