ArtifactPanel

ArtifactPanel 展示 HTML、Markdown、JSON 或代码类 Artifact，并提供预览与源码切换。HTML Artifact 默认只展示源码。

导入方式

按需导入

import { ArtifactPanel } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <ArtifactPanel />

基础用法

HTML

状态卡片

HTML · v1

<div style="font-family:sans-serif;padding:24px"><h2>构建完成</h2><p>示例 Artifact 预览。</p></div>

<script setup lang="ts">
import { ArtifactPanel } from '@weimin96/ai-chat-vue'
import { sampleArtifact } from '../../.vitepress/theme/demo-data'
</script>

<template>
  <ArtifactPanel :artifact="sampleArtifact" />
</template>

API

属性	类型	默认值	说明
artifact	Artifact	必填	Artifact 对象
enableUnsafeHtmlPreview	boolean	false	是否允许 HTML Artifact 生成 iframe 预览

事件	说明
update	内容更新时触发
fullscreen-change	全屏状态变化时返回 boolean
tab-change	预览和源码页签切换时返回 'preview' | 'source'
copy	点击复制按钮时返回当前内容

注意事项

HTML 预览需要显式传入 enableUnsafeHtmlPreview。开启后组件会创建 Blob URL，并使用 sandbox="allow-scripts" 和 referrerpolicy="no-referrer"；内容更新或组件卸载时会回收 URL。模型输出或用户输入生成的 HTML 不建议开启执行预览。