AiArtifacts 智能组件
AiArtifacts 是一个沉浸式的侧边渲染面板，专门用于展示 AI 生成的复杂内容，如 HTML 页面、React/Vue 原型、长代码模块、结构化文档以及交互式 ECharts 图表。
基础用法
通过 v-model:visible 控制显示隐藏，并传入 data 结构描述内容及其版本。
多版本支持
Artifact 允许用户在不同的迭代版本之间自由切换，通过 versions 数组提供历史记录。您可以通过 version-change 事件监听用户的切换行为。
渲染模式
支持 preview (实时渲染) 和 code (源码高亮) 模式。目前预览模式支持标准的 HTML 结构沙盒。
行内展示模式
通过设置 mode="inline"，组件将不再作为固定侧边栏出现，而是作为普通的块级元素嵌入在页面流或对话气泡中。
ECharts 动态图表 - 折线图
当 data.type 设为 'echarts' 时，组件自动加载 ECharts 并渲染交互式图表。通过 echartsOption 传入图表类型与 ECharts 配置项。支持数据缩放（dataZoom）、工具栏（toolbox）以及 chart-ready / chart-click 等图表事件。
ECharts 动态图表 - 柱状图
柱状图适合用于多维度类别对比。将 echartsOption.chartType 设为 'bar' 即可。同时可通过 @chart-error 捕获图表加载异常。
ECharts 动态图表 - 饼图
环形饼图适合展示占比关系，将 chartType 设为 'pie'，并在 series[].radius 中配置内外半径即可实现环形效果。
ECharts 动态图表 - 雷达图
雷达图适合进行多维能力/指标评估分析，将 chartType 设为 'radar'，在 radar.indicator 中定义各维度的名称与最大值。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
visible | 是否可见（支持 v-model:visible） | boolean | false |
data | Artifact 数据结构 | ArtifactData | — |
width | 面板宽度 | string | number | '50%' |
fullscreen | 是否全屏展示 | boolean | false |
mode | 渲染模式 | 'preview' | 'code' | 'inline' | 'preview' |
theme-overrides | 主题变量覆盖 | ComponentThemeVars | — |
echarts-option | ECharts 图表配置（chart/echarts 类型） | ArtifactEChartsOption | — |
auto-load-e-charts | 是否自动加载 ECharts 库 | boolean | true |
echarts-theme | ECharts 主题 | 'light' | 'dark' | 'default' | 'light' |
echarts-data-zoom | 是否启用数据缩放 | boolean | true |
echarts-toolbox | 是否显示工具栏 | boolean | true |
chart-height | 图表高度 | string | number | 400 |
responsive-width | 是否响应式宽度 | boolean | true |
chart-loading-text | 图表加载时的占位文案 | string | '加载图表中...' |
ArtifactData
| 属性名 | 说明 | 类型 |
|---|---|---|
id | 唯一标识 | string |
title | 标题/文件名 | string |
type | 类型 | 'code' | 'html' | 'markdown' | 'vue' | 'react' | 'diagram' | 'chart' | 'sandbox' | 'canvas' | 'echarts' |
currentVersion | 当前选中版本号 | string | number |
versions | 版本列表 | ArtifactVersion[] |
echartsOption | ECharts 图表配置（chart/echarts 类型使用） | ArtifactEChartsOption |
ArtifactVersion
| 属性名 | 说明 | 类型 |
|---|---|---|
version | 版本号 | string | number |
content | 源代码内容 | string |
description | 更改说明 | string |
timestamp | 版本时间戳 | string | number |
ArtifactEChartsOption
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
chartType | 图表类型 | 'line' | 'bar' | 'pie' | 'scatter' | 'gauge' | 'radar' | 'funnel' | 'treemap' | 'sunburst' | 'heatmap' | 'candlestick' | 'boxplot' | 'sankey' | 'themeRiver' | 'graph' | 'custom' | — |
option | 标准 ECharts 配置项对象 | Record<string, unknown> | — |
theme | 图表主题（覆盖全局主题） | 'light' | 'dark' | 'default' | — |
dataZoom | 是否启用数据缩放 | boolean | — |
toolbox | 是否显示工具栏 | boolean | — |
interactive | 是否可交互（点击、悬浮等） | boolean | — |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:visible | 显示状态变更时触发 | (val: boolean) => void |
update:mode | 渲染模式切换时触发 | (mode: string) => void |
version-change | 切换版本时触发 | (v: ArtifactVersion) => void |
chart-ready | ECharts 实例初始化完成 | (chart: unknown) => void |
chart-click | 点击图表数据点时触发 | (params: unknown) => void |
chart-error | 图表加载失败时触发 | (error: Error) => void |
close | 关闭面板时触发 | — |
Slots
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
chart | 自定义图表渲染区域（type='chart'） | { data: ArtifactVersion | null, title: string } |
canvas | 自定义画板渲染区域（type='canvas'） | { data: ArtifactVersion | null } |
在 Nuxt 中使用
本组件完整支持 Nuxt 3/4。在 Nuxt 项目中，组件将被自动导入。由于 ECharts 采用动态 import 懒加载，对 SSR 友好，无需额外配置。
如需手动注册，请参考 Nuxt 集成 文档。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-artifacts-bg-color | 面板背景色 | var(--yh-bg-color-overlay) |
--yh-ai-artifacts-header-height | 顶部栏高度 | 56px |
--yh-ai-artifacts-border-color | 分割线颜色 | var(--yh-border-color-lighter) |
--yh-ai-artifacts-shadow | 面板阴影 | var(--yh-box-shadow-light) |