AiFileCard 文件卡片

用卡片的形式展示文件，支持文档/图片/音视频类型、多种尺寸、加载状态与遮罩。

何时使用

用于在对话或输入场景中展示单个文件，如附件列表、消息气泡中的文件预览。

基础用法

传入 name（必填），可选 byte、size、type、src 等。卡片统一宽高展示，长文件名自动省略，悬停可查看完整名称。

基础用法

卡片大小

通过 size 设置：small、default、large。

卡片大小

图片文件

type="image" 且传入 src 时展示图片预览。

图片文件

图片加载

使用 loading 属性展示加载状态；加载中图片呈模糊并显示旋转图标，加载完成后由模糊过渡为清晰。下方示例通过按钮切换加载/完成状态。

图片加载

使用遮罩

通过 mask 在卡片上显示遮罩文案（如「已加密」）。

使用遮罩

预设图标类型

通过 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 扩展原生播放能力。

音频 / 视频

文件列表

多个文件卡片可与 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	卡片点击时触发（非加载中时）；图片类型点击会打开预览