ArtifactPanel

ArtifactPanel 展示 HTML、Markdown、JSON 或代码类 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 · v1

<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 对象

事件	说明
update	内容更新时触发

注意事项

HTML 预览使用 iframe sandbox。仍建议只渲染可信内容或经过业务过滤的内容。