5g-fe-components

fe-5g-component 消息接收组件

fe-5g-component 是一个功能丰富的消息接收组件，支持多种消息类型的展示和交互。

功能特性

• 支持多种消息类型：

  • 文本消息
  • 撤回消息
  • 地理位置
  • 音频消息
  • 视频消息
  • 图片消息
  • 单卡片消息
  • 多卡片消息

• 文本消息支持：

  • Markdown 格式
  • LaTeX 数学公式
  • 代码高亮
  • 链接自动识别
  • 手机号码自动识别和脱敏
  • 文本复制功能

• 多媒体消息支持：

  • 图片预览
  • 视频播放
  • 音频播放
  • 地理位置查看

使用方法

基础用法

<template>
  <fe-5g-component
    :data="messageData"
    :floatMenuShow="true"
    :copyBtnShow="true"
    @play-audio="handlePlayAudio"
    @copy-text="handleCopyText"
    @redirect-url="handleRedirectUrl"
    @showSwiper="handleShowSwiper"
    @showPhotoLargeView="handleShowPhotoLargeView"
    @open-location="handleOpenLocation"
    @post-back="handlePostBack"
    @open-url="handleOpenUrl"
    @tel-click="handleTelClick"
  />
</template>

// main.js
import Fe5gCompoents from '5g-fe-components'
import '5g-fe-components/dist/index.css'
Vue.use(Fe5gCompoents)

Props

| 属性名 | 类型 | 必填 | 说明 | |--------|------|------|------| | data | Object | 是 | 消息数据对象 | | floatMenuShow | Boolean | 否 | 是否显示浮动菜单 | | copyBtnShow | Boolean | 否 | 是否显示复制按钮 | | useCustomImagePreview | Boolean | 否 | 是否使用自定义的图片预览 | | dataPath | String | 否 | 数据路径，指向data中的卡片内容路径 |

消息数据格式

{
  contentType: String, // 消息类型：'text'|'Revoke'|'location'|'audio'|'video'|'image'|'singleCard'|'multiCard'
  message: String, // 文本消息内容
  messageId: String, // 消息ID
  data: {
    thumbUrl: String, // 缩略图URL
    audioUrl: String, // 音频URL
    videoUrl: String, // 视频URL
    imageUrl: String, // 图片URL
  },
  generalPurposeCard: { // 卡片消息数据
    content: Object,
    layout: {
      cardOrientation: String // 'vertical'|'horizontal'
    }
  }
}

事件

| 事件名 | 说明 | 参数 | |--------|------|------| | play-audio | 播放音频时触发 | - | | copy-text | 复制文本时触发 | text: String | | redirect-url | 点击链接时触发 | url: String | | showSwiper | 显示图片轮播时触发 | { isphotoOpen, photoItem, data } | | showPhotoLargeView | 显示大图时触发 | { isphotoOpen, src } | | open-location | 打开地理位置时触发 | locationData: Object | | post-back | 点击卡片回复时触发 | data: Object, idx: Number | | open-url | 打开URL时触发 | item: Object | | tel-click | 点击电话号码时触发 | item: Object |

依赖

• Muse-UI
• Showdown (Markdown 转换)
• Showdown-Katex (LaTeX 支持)
• Highlight.js (代码高亮)

注意事项

1. 文本消息支持 Markdown 格式，包括表格、删除线、下划线等语法
2. 支持 LaTeX 数学公式，使用 $ 或 $$ 包裹
3. 代码块会自动进行语法高亮
4. 图片加载失败时会显示错误提示
5. 视频下载功能在 iOS 设备上不可用
6. 在微信环境中，视频下载需要通过复制链接到浏览器实现