工件

一个容器组件,用于显示生成的内容,如代码、文档或其他输出,带有内置操作。

Artifact 组件提供了一个结构化容器,用于显示生成的内容,如代码、文档或其他输出,带有内置的标题操作。

使用 CLI 安装

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add artifact

手动安装

将以下代码复制并粘贴到同一文件夹中。

Artifact.vue
ArtifactAction.vue
ArtifactActions.vue
ArtifactClose.vue
ArtifactContent.vue
ArtifactDescription.vue
ArtifactHeader.vue
ArtifactTitle.vue
index.ts
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { computed } from 'vue'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const classes = computed(() => cn(
  'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
  props.class,
))
</script>

<template>
  <div
    :class="classes"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

特性

  • 具有标题和内容区域的结构化容器
  • 内置标题,支持标题和描述
  • 灵活的操作按钮,带有工具提示
  • 所有子组件的可自定义样式
  • 支持关闭按钮和操作组
  • 简洁、现代的设计,带有边框和阴影
  • 响应式布局,适应内容
  • 具有适当类型定义的 TypeScript 支持
  • 可组合架构,实现最大灵活性

示例

代码显示

Props

<Artifact />

[...props]HTMLAttributes
转发到根 <div> 元素的额外 props。

<ArtifactHeader />

[...props]HTMLAttributes
转发到标题 <div> 元素的额外 props。

<ArtifactTitle />

[...props]HTMLAttributes
转发到标题 <p> 元素的额外 props。

<ArtifactDescription />

[...props]HTMLAttributes
转发到描述 <p> 元素的额外 props。

<ArtifactActions />

[...props]HTMLAttributes
转发到操作 <div> 元素的额外 props。

<ArtifactAction />

tooltipstring
悬停操作按钮时显示的工具提示文本。
labelstring
用于可访问按钮文本的屏幕阅读器标签。
iconLucideIcon
在操作按钮内渲染的 Lucide 图标组件。
[...props]ButtonProps
转发到底层 shadcn-vue Button 的额外 props。

<ArtifactClose />

[...props]ButtonProps
转发到底层 shadcn-vue Button 的额外 props。

<ArtifactContent />

[...props]HTMLAttributes
转发到内容 <div> 元素的额外 props。