Attachments 系列

附件展示组件，支持图片缩略图和文件图标。包含 6 个子组件：

• Attachments — 容器，支持 variant 布局模式
• Attachment — 单个附件，provide 数据给子组件
• AttachmentPreview — 图片缩略图（96px）/ 文件图标，图片可点击触发 preview 事件
• AttachmentInfo — 文件名 + 类型 + 大小
• AttachmentRemove — hover 显示删除按钮
• AttachmentEmpty — 空状态

代码演示

grid 网格

缩略图网格，最适合消息内展示多图与混合附件：点击图片缩略图经 preview 事件打开 ImageLightbox 大图，hover 卡片右上角出现移除按钮，清空后回落到 AttachmentEmpty 空态：

当前 3 个附件

architecture.pngPNG · 248.0 KB

theme-tokens.pngPNG · 190.0 KB

📄

调研报告.pdfPDF · 3.2 MB

inline 行内

横向流动、自动换行的窄条形态，适合输入区上方待发送的文件 chip 列表：

📄

需求说明.pdfPDF · 412.0 KB

📄

排期表.xlsxXLSX · 96.0 KB

📄

接口草案.mdMARKDOWN · 12.0 KB

list 列表

纵向文件列表，信息密度最高，适合文档类附件明细与逐项移除：

📄

ai-chat-ui-调研报告.pdfPDF · 3.2 MB

📄

竞品对比.xlsxXLSX · 886.0 KB

📄

会议纪要.docxDOCX · 154.0 KB

基础用法

<Attachments variant="grid">
  <Attachment
    v-for="file in files"
    :key="file.id"
    :data="file"
  >
    <AttachmentPreview @preview="openPreview(file)" />
    <AttachmentInfo />
    <AttachmentRemove @remove="remove(file.id)" />
  </Attachment>
</Attachments>

附件数据模型（Attachment）

Attachment 类型来自 @toimc/core，展示组件只消费 url / name / mediaType / size：

字段	类型	说明
id	string	唯一标识（必填）
name	string	文件名（必填）
mediaType	string	MIME 类型（必填）
size	number	文件字节大小
url	string	本地预览地址（通常是 URL.createObjectURL 产出的 blob: 地址），只给浏览器渲染用
dataUrl	string	模型可读的 base64 数据 URL（data:image/jpeg;base64,...），随消息发送给多模态模型

两个字段职责分离，不要混用：

• url 是浏览器本地地址，模型服务端读不到——只管预览；
• dataUrl 是图片内容本身（经 canvas 压缩后的 base64），模型真正"看到"的是它。

如何从 File 生成 dataUrl，见指南 多模态发送。

API

Attachments

属性名	类型	默认值	说明
variant	'grid' | 'inline' | 'list'	'grid'	布局模式

插槽名	说明
default	附件项（Attachment 系列子组件，可混入 AttachmentEmpty 空态）

Attachment

属性名	类型	默认值	说明
data	Attachment	—	附件数据（必填）

插槽名	说明
default	附件项内容（AttachmentPreview / AttachmentInfo / AttachmentRemove）

AttachmentPreview / AttachmentInfo / AttachmentRemove

通过 inject 从父级 Attachment 获取数据，无需 Props。

AttachmentPreview 的事件：

事件名	参数	说明
preview	—	点击图片缩略图时触发（非图片不触发）