AiFileCard 文件卡片
用卡片的形式展示文件，支持文档/图片/音视频类型、多种尺寸、加载状态与遮罩。
何时使用
用于在对话或输入场景中展示单个文件，如附件列表、消息气泡中的文件预览。
基础用法
传入 name（必填），可选 byte、size、type、src 等。卡片统一宽高展示，长文件名自动省略，悬停可查看完整名称。
需求文档.pdf
100.0 KB
报表.xlsx
50.0 KB
这是一份非常长的文件名用于测试溢出省略效果.xlsx
200.0 KB
基础用法
卡片大小
通过 size 设置：small、default、large。
small.pdf
default.pdf
large.pdf
卡片大小
图片文件
type="image" 且传入 src 时展示图片预览。
图片文件
图片加载
使用 loading 属性展示加载状态；加载中图片呈模糊并显示旋转图标，加载完成后由模糊过渡为清晰。下方示例通过按钮切换加载/完成状态。
图片加载
使用遮罩
通过 mask 在卡片上显示遮罩文案（如「已加密」）。
已加密.pdf
100.0 KB
已加密
使用遮罩
预设图标类型
通过 icon 使用预设图标，支持以下类型：default、pdf、excel、word、ppt、image、markdown、zip、video、audio、java、javascript、python、txt。也可不传 icon，由文件名扩展名自动推断。
预设图标类型
音频 / 视频
与 Ant Design X FileCard 一致，使用浏览器原生 <audio> / <video>，传入 src 时可直接播放。超过 2 个时采用遍历方式展示（v-for），悬停点击删除按钮可移除该项。无 src 时展示预设图标占位。可通过 audioProps / videoProps 扩展原生播放能力。
video-file.mp4
1.0 KB
video-2.mp4
3.0 KB
音频 / 视频
文件列表
多个文件卡片可与 AiAttachments 配合使用，由 AiAttachments 负责列表布局、溢出方式与删除，详见 AiAttachments 附件。
API
FileCard Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 文件名称（必填） | string | - |
| byte | 文件大小（字节） | number | - |
| size | 卡片大小 | 'small' | 'default' | 'large' | 'default' |
| type | 文件类型 | 'file' | 'image' | 'audio' | 'video' | string | 'file' |
| src | 图片或文件地址 | string | - |
| description | 文件描述 | string | - |
| loading | 是否加载中 | boolean | false |
| mask | 遮罩内容 | string | - |
| icon | 预设图标 | PresetFileIcons | 'default' |
| imageProps | 图片属性（透传给 img 元素） | Record<string, unknown> | {} |
| videoProps | 视频属性（透传给 video 元素） | Record<string, unknown> | {} |
| audioProps | 音频属性（透传给 audio 元素） | Record<string, unknown> | {} |
| themeOverrides | 主题覆盖变量 | Record<string, unknown> | - |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 扩展内容，用于挂载删除按钮、进度条等（如与 AiAttachments 配合时的删除与上传进度） |
PresetFileIcons
预设图标类型：
default- 默认文件图标excel- Excel 文件图标image- 图片文件图标markdown- Markdown 文件图标pdf- PDF 文件图标ppt- PowerPoint 文件图标word- Word 文件图标zip- 压缩文件图标video- 视频文件图标audio- 音频文件图标java- Java 文件图标javascript- JavaScript 文件图标python- Python 文件图标txt- 文本文件图标
FileCardListItem
列表项接口继承自 FileCardProps，还扩展了以下属性：
| 属性 | 说明 | 类型 |
|---|---|---|
| uid | 唯一标识 | string | number |
| url | 文件 URL | string |
| thumbUrl | 缩略图 URL | string |
Events
| 事件名 | 说明 |
|---|---|
| click | 卡片点击时触发（非加载中时）；图片类型点击会打开预览 |