feat: ✨新增消息动态表情、矢量emoji

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@icon-park/vue-next": "^1.4.2",
+    "@lottiefiles/lottie-player": "^2.0.2",
     "@vueuse/core": "^10.1.2",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
@@ -27,7 +28,8 @@
     "vue-color-kit": "^1.0.5",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.0"
+    "vue-router": "^4.2.0",
+    "vue3-lottie": "^2.7.4"
   },
   "devDependencies": {
     "@types/sortablejs": "^1.15.1",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@icon-park/vue-next':
     specifier: ^1.4.2
     version: 1.4.2(vue@3.3.4)
+  '@lottiefiles/lottie-player':
+    specifier: ^2.0.2
+    version: 2.0.2
   '@vueuse/core':
     specifier: ^10.1.2
     version: 10.1.2(vue@3.3.4)
@@ -56,6 +59,9 @@ dependencies:
   vue-router:
     specifier: ^4.2.0
     version: 4.2.0(vue@3.3.4)
+  vue3-lottie:
+    specifier: ^2.7.4
+    version: 2.7.4(vue@3.3.4)
 
 devDependencies:
   '@types/sortablejs':
@@ -1314,6 +1320,26 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /@lit-labs/ssr-dom-shim@1.1.1:
+    resolution: {integrity: sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==}
+    dev: false
+
+  /@lit/reactive-element@1.6.3:
+    resolution: {integrity: sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+    dev: false
+
+  /@lottiefiles/lottie-player@2.0.2:
+    resolution: {integrity: sha512-R9WF2/gFboZ0GW3QjqtbZF94JQq8oI1t5XWZPtTypvk2xTizphybZu+c08QFQbqY6rnkazHIyRBj2MK0qr6Hrw==}
+    dependencies:
+      '@types/pako': 1.0.4
+      lit: 2.8.0
+      lottie-web: 5.12.2
+      pako: 2.1.0
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
   /@nicolo-ribaudo/semver-v6@6.3.3:
     resolution: {integrity: sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==}
     hasBin: true
@@ -1416,6 +1442,10 @@ packages:
     resolution: {integrity: sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==}
     dev: true
 
+  /@types/pako@1.0.4:
+    resolution: {integrity: sha512-Z+5bJSm28EXBSUJEgx29ioWeEEHUh6TiMkZHDhLwjc9wVFH+ressbkmX6waUZc5R3Gobn4Qu5llGxaoflZ+yhA==}
+    dev: false
+
   /@types/semver@7.5.0:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
@@ -1430,6 +1460,10 @@ packages:
       '@types/node': 20.4.0
     dev: true
 
+  /@types/trusted-types@2.0.3:
+    resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
+    dev: false
+
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -3857,6 +3891,28 @@ packages:
       resolve: 1.22.2
     dev: true
 
+  /lit-element@3.3.3:
+    resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+      '@lit/reactive-element': 1.6.3
+      lit-html: 2.8.0
+    dev: false
+
+  /lit-html@2.8.0:
+    resolution: {integrity: sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==}
+    dependencies:
+      '@types/trusted-types': 2.0.3
+    dev: false
+
+  /lit@2.8.0:
+    resolution: {integrity: sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==}
+    dependencies:
+      '@lit/reactive-element': 1.6.3
+      lit-element: 3.3.3
+      lit-html: 2.8.0
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -3911,6 +3967,10 @@ packages:
       is-unicode-supported: 1.3.0
     dev: true
 
+  /lottie-web@5.12.2:
+    resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
+    dev: false
+
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
@@ -4304,6 +4364,10 @@ packages:
       aggregate-error: 3.1.0
     dev: true
 
+  /pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+    dev: false
+
   /param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
@@ -4635,6 +4699,10 @@ packages:
       functions-have-names: 1.2.3
     dev: true
 
+  /resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
   /resolve-dir@1.0.1:
     resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
     engines: {node: '>=0.10.0'}
@@ -5566,6 +5634,17 @@ packages:
       typescript: 5.0.4
     dev: true
 
+  /vue3-lottie@2.7.4(vue@3.3.4):
+    resolution: {integrity: sha512-EJATgpaWXyqdKxaSY2Q3lK4tTkxTSssKTqBmsIEG7Yj8jT75RGF6zhsoBc/kT10X41vt2HEpjPYmEQfKt6JfOw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: ^3.2
+    dependencies:
+      lodash-es: 4.17.21
+      lottie-web: 5.12.2
+      vue: 3.3.4
+    dev: false
+
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies:

public/index.html

@@ -6,6 +6,7 @@
 	<link rel="icon" type="image/png" href="/logo.png" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title><%- title %></title>
+  <!-- <script src="/js/tgs-player.js"></script> -->
 </head>
 
 <body>

src/components/BdMsg/index.vue

@@ -5,17 +5,17 @@
       {{ msg['content'] }}
     </span>
     <!-- 图片 -->
-    <img v-else-if="msg.type == 2" class="h-220px" :src="`${url}${msg['url']}`" />
+    <img v-else-if="msg.type == 2" class="w-120px" :src="`${url}${msg['url']}`" />
     <!-- GIF -->
-    <img v-else-if="msg.type == 3" class="w-320px" :src="`${url}${msg['url']}`" />
+    <img v-else-if="msg.type == 3" class="w-120px" :src="`${url}${msg['url']}`" />
     <!-- 语音 -->
     <audio v-else-if="msg.type == 4" :src="`${url}${msg['url']}`"></audio>
     <!-- 视频 -->
     <video v-else-if="msg.type == 5" controls :src="`${url}${msg['url']}`" class="w-25px h-200px"></video>
     <!-- 位置 -->
     <div v-else-if="msg.type == 6">
-      <div>{{ msg['title'] }}</div>
-      <div>{{ msg['address'] }}</div>
+      <div>位置标题：{{ msg['title'] }}</div>
+      <div>地址：{{ msg['address'] }}</div>
     </div>
     <!-- 名片 -->
     <div v-else-if="msg.type == 7">
@@ -24,8 +24,8 @@
     </div>
     <!-- 文件 -->
     <div v-else-if="msg.type == 8">
-      <div>{{ msg['title'] }}</div>
-      <div>{{ msg['address'] }}</div>
+      <div>文件标题：{{ msg['title'] }}</div>
+      <div>地址：{{ msg['address'] }}</div>
     </div>
     <!-- 红包 -->
     <div v-else-if="msg.type == 9">
@@ -40,19 +40,40 @@
     <!-- 合并转发 -->
     <span v-else-if="msg.type == 11"> [合并转发] </span>
     <!-- 动态表情 -->
-    <div v-else-if="msg.type == 12">[动态表情]</div>
+    <tgs-player
+      v-else-if="msg.type == 12"
+      :src="`${url}${msg['url']}`"
+      :data-src="`${url}${msg['url']}`"
+      autoplay
+      loop
+      mode="normal"
+      style="width: 120px; height: 100px"
+    ></tgs-player>
     <!-- 矢量emoji -->
-    <span v-else-if="msg.type == 13"> [矢量emoji] </span>
-    <!-- 矢量emoji -->
-    <span v-else-if="msg.type == 1014"> [截屏消息] </span>
+    <template v-else-if="msg.type == 13">
+      <tgs-player
+        v-if="msg.type == 13 && msg['url']"
+        :src="`${url}${msg['url']}`"
+        :data-src="`${url}${msg['url']}`"
+        autoplay
+        loop
+        mode="normal"
+        style="width: 120px; height: 100px"
+      ></tgs-player>
+      <span v-else> {{ msg['content'] ? msg['content'] : `[矢量emoji]` }} </span>
+    </template>
     <!-- 系统消息 -->
-    <span v-else-if="msg.type >= 1000 && msg.type <= 2000"> [系统消息] </span>
+    <template v-else-if="msg.type >= 1000 && msg.type <= 2000">
+      <span v-if="msg.type == 1014"> [截屏消息] </span>
+      <span v-else> [系统消息] </span>
+    </template>
     <!-- 未知消息类型 -->
     <span v-else> [未知消息类型] </span>
   </div>
 </template>
 
 <script lang="tsx" name="BdMsg" setup>
+import '@lottiefiles/lottie-player/dist/tgs-player';
 import { BU_DOU_CONFIG } from '@/config';
 interface IProps {
   msg: any;

vite.config.ts

@@ -26,7 +26,13 @@ const plugins = [
     dts: 'src/types/components.d.ts'
   }),
   VueDevTools(),
-  vue(),
+  vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => /^tgs-player/.test(tag)
+      }
+    }
+  }),
   vueJsx(),
   htmlTemplate({
     data: {
@@ -95,7 +101,8 @@ export default defineConfig({
         manualChunks: {
           // 分包配置，配置完成自动按需加载
           vue: ['vue', 'vue-router', 'pinia', 'vue-i18n', 'element-plus'],
-          echarts: ['echarts']
+          echarts: ['echarts'],
+          'tgs-player': ['@lottiefiles/lottie-player/dist/tgs-player']
         }
       }
     }