文件消息气泡组件

麦麦大约 3 分钟

文件消息气泡组件

文件消息气泡组件用于在聊天界面中显示文件消息，支持多种文件类型的预览和下载功能。

功能特性

✅ 支持图片和视频文件预览
✅ 自定义预览链接（可独立于下载链接）
✅ 文件大小智能格式化显示
✅ 多种文件类型图标支持
✅ 右下角固定下载按钮
✅ 响应式设计，适配移动端
✅ 加载状态和错误处理
✅ 滚动动画效果

组件参数

参数名	类型	必填	默认值	描述
`fileName`	String	✅	-	文件名称
`fileSize`	String/Number	❌	0	文件大小（字节）
`downloadUrl`	String	✅	-	文件下载链接
`previewUrl`	String	❌	''	文件预览链接（可选，不填则使用下载链接）
`fileType`	String	❌	'unknown'	文件类型：'image', 'video', 'audio', 'document', 'archive', 'unknown'

使用示例

基本用法

<template>
  <ChatMessage nickname="用户" type="user">
    <FileMessage
      fileName="示例图片.jpg"
      :fileSize="2048576"
      downloadUrl="https://example.com/file.jpg"
      fileType="image"
    />
  </ChatMessage>
</template>

<script>
import FileMessage from '../components/FileMessage.vue'
import ChatMessage from '../components/ChatMessage.vue'

export default {
  components: {
    FileMessage,
    ChatMessage
  }
}
</script>

带独立预览链接的图片文件

<FileMessage
  fileName="高清图片.png"
  :fileSize="5123456"
  downloadUrl="https://example.com/download/high-quality.png"
  previewUrl="https://example.com/preview/low-quality.png"
  fileType="image"
/>

视频文件预览

<FileMessage
  fileName="演示视频.mp4"
  :fileSize="15728640"
  downloadUrl="https://example.com/video.mp4"
  fileType="video"
/>

不支持预览的文件类型

<FileMessage
  fileName="项目文档.pdf"
  :fileSize="1048576"
  downloadUrl="https://example.com/document.pdf"
  fileType="document"
/>

压缩包文件

<FileMessage
  fileName="项目源码.zip"
  :fileSize="5242880"
  downloadUrl="https://example.com/source-code.zip"
  fileType="archive"
/>

文件类型支持

支持预览的文件类型

image: 图片文件（JPG、PNG、GIF等）
video: 视频文件（MP4、WebM等）

不支持预览的文件类型

audio: 音频文件（MP3、WAV等）
document: 文档文件（PDF、DOC、TXT等）
archive: 压缩文件（ZIP、RAR等）
unknown: 未知文件类型

样式特点

支持预览的文件布局

预览内容在上方
文件名称和大小在同一行显示在下方
右下角固定下载按钮

不支持预览的文件布局

文件图标在左侧
文件名称在上方
文件大小在下方
右下角固定下载按钮

响应式设计

组件会自动适配不同屏幕尺寸：

桌面端：最大宽度 320px
移动端：最大宽度 280px
图片/视频预览最大高度自动调整

交互效果

悬停时卡片有轻微上浮效果
下载按钮悬停时有颜色变化和阴影
滚动进入视口时有淡入动画
加载状态显示加载动画
错误状态显示错误提示

自定义样式

组件使用 CSS 变量，可以轻松自定义：

--vp-c-bg: 背景色
--vp-c-border: 边框色
--vp-c-brand: 品牌色（下载按钮）
--vp-c-text-1: 主要文字色
--vp-c-text-2: 次要文字色

浏览器兼容性

现代浏览器（Chrome、Firefox、Safari、Edge）
支持 Intersection Observer API
支持 CSS Grid 和 Flexbox
支持 CSS 自定义属性（CSS Variables）

注意事项

预览链接和下载链接可以是相同的，也可以是不同的
文件大小会自动格式化为合适的单位（B、KB、MB、GB）
组件会自动处理加载状态和错误状态
下载按钮始终显示在右下角，便于用户操作
组件设计符合现代聊天应用的用户体验标准