Attachments / FilesCard 附件

展示对话中的文件附件（图片、文档、代码等），内置 18 种文件类型图标。

在线演示

Attachments — 附件列表

Prop	类型	默认值	说明
files	FileCardItem[]	[]	文件列表
maxCount	number	undefined	最多显示数量
showMore	boolean	true	超出时显示"+N"

FilesCard — 文件卡片

Prop	类型	默认值	说明
file	FileCardItem	—	单个文件信息
size	'small' | 'default' | 'large'	'default'	卡片尺寸
showPreview	boolean	true	是否显示预览图
clickable	boolean	true	是否可点击

FileCardItem 类型

interface FileCardItem {
  name: string
  size?: number         // 字节
  type: FilesType       // 'image' | 'pdf' | 'word' | 'excel' | 'code' | ...
  url?: string          // 预览/下载 URL
  thumbnail?: string    // 缩略图
}

用法

<script setup lang="ts">
const files = [
  { name: 'screenshot.png', type: 'image', size: 204800, thumbnail: '/thumb.png' },
  { name: 'report.pdf', type: 'pdf', size: 1048576, url: '/report.pdf' },
  { name: 'main.ts', type: 'code', size: 4096 },
]
</script>

<template>
  <Attachments :files="files" :max-count="4" />
</template>

内置文件类型图标

word · excel · ppt · pdf · txt · mark · image · audio · video · code · database · link · zip · file · three · unknown（18 种 SVG）。