工件
一个容器组件,用于显示生成的内容,如代码、文档或其他输出,带有内置操作。
Artifact 组件提供了一个结构化容器,用于显示生成的内容,如代码、文档或其他输出,带有内置的标题操作。
使用 CLI 安装
AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add artifact
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/artifact.json
手动安装
将以下代码复制并粘贴到同一文件夹中。
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>
<script setup lang="ts">
import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
import type { LucideIcon } from 'lucide-vue-next'
import { Button } from '@repo/shadcn-vue/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { computed } from 'vue'
interface ArtifactActionProps {
class?: string
tooltip?: string
label?: string
variant?: ButtonVariants['variant']
size?: ButtonVariants['size']
icon?: LucideIcon
}
const props = withDefaults(defineProps<ArtifactActionProps>(), {
variant: 'ghost',
size: 'sm',
})
const classes = computed(() => cn(
'size-8 p-0 text-muted-foreground hover:text-foreground',
props.class,
))
</script>
<template>
<TooltipProvider v-if="props.tooltip">
<Tooltip>
<TooltipTrigger as-child>
<Button
type="button"
v-bind="{
...props,
class: classes,
}"
>
<component
:is="props.icon"
v-if="props.icon"
class="size-4"
/>
<slot v-else />
<span class="sr-only">{{ props.label || props.tooltip }}</span>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{{ props.tooltip }}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button
v-else
type="button"
v-bind="{
...props,
class: classes,
}"
>
<component
:is="props.icon"
v-if="props.icon"
class="size-4"
/>
<slot v-else />
<span class="sr-only">{{ props.label || props.tooltip }}</span>
</Button>
</template>
<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 items-center gap-1', props.class))
</script>
<template>
<div
:class="classes"
v-bind="$attrs"
>
<slot />
</div>
</template>
<script setup lang="ts">
import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
import { Button } from '@repo/shadcn-vue/components/ui/button'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { X } from 'lucide-vue-next'
import { computed } from 'vue'
interface ArtifactCloseProps {
class?: string
variant?: ButtonVariants['variant']
size?: ButtonVariants['size']
}
const props = withDefaults(defineProps<ArtifactCloseProps>(), {
variant: 'ghost',
size: 'sm',
})
const classes = computed(() => cn(
'size-8 p-0 text-muted-foreground hover:text-foreground',
props.class,
))
</script>
<template>
<Button
type="button"
v-bind="{
...props,
class: classes,
}"
>
<slot>
<X class="size-4" />
</slot>
<span class="sr-only">Close</span>
</Button>
</template>
<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-1 overflow-auto p-4', props.class))
</script>
<template>
<div
:class="classes"
v-bind="$attrs"
>
<slot />
</div>
</template>
<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('text-muted-foreground text-sm', props.class))
</script>
<template>
<p
:class="classes"
v-bind="$attrs"
>
<slot />
</p>
</template>
<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 items-center justify-between border-b bg-muted/50 px-4 py-3',
props.class,
))
</script>
<template>
<div
:class="classes"
v-bind="$attrs"
>
<slot />
</div>
</template>
<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('font-medium text-foreground text-sm', props.class))
</script>
<template>
<p
v-bind="$attrs"
:class="classes"
>
<slot />
</p>
</template>
export { default as Artifact } from './Artifact.vue'
export { default as ArtifactAction } from './ArtifactAction.vue'
export { default as ArtifactActions } from './ArtifactActions.vue'
export { default as ArtifactClose } from './ArtifactClose.vue'
export { default as ArtifactContent } from './ArtifactContent.vue'
export { default as ArtifactDescription } from './ArtifactDescription.vue'
export { default as ArtifactHeader } from './ArtifactHeader.vue'
export { default as ArtifactTitle } from './ArtifactTitle.vue'
特性
- 具有标题和内容区域的结构化容器
- 内置标题,支持标题和描述
- 灵活的操作按钮,带有工具提示
- 所有子组件的可自定义样式
- 支持关闭按钮和操作组
- 简洁、现代的设计,带有边框和阴影
- 响应式布局,适应内容
- 具有适当类型定义的 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
[...props]ButtonProps
Button 的额外 props。 <ArtifactClose />
[...props]ButtonProps
Button 的额外 props。 <ArtifactContent />
[...props]HTMLAttributes
<div> 元素的额外 props。