AI Chat UI

Appearance

Attachments 系列 ​

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

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

代码演示 ​

grid 网格 ​

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

当前 3 个附件
architecture.png
architecture.pngPNG · 248.0 KB
theme-tokens.png
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

基础用法 ​

vue
<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>

API ​

Attachments ​

属性名类型默认值说明
variant'grid' | 'inline' | 'list''grid'布局模式
插槽名说明
default附件项（Attachment 系列子组件，可混入 AttachmentEmpty 空态）

Attachment ​

属性名类型默认值说明
dataAttachment—附件数据（必填）
插槽名说明
default附件项内容（AttachmentPreview / AttachmentInfo / AttachmentRemove）

AttachmentPreview / AttachmentInfo / AttachmentRemove ​

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

AttachmentPreview 的事件：

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