feat: 新增视频消息、修复消息一系列bug

package.json

@@ -72,6 +72,6 @@
     "vite": "4.3.5",
     "vite-plugin-mkcert": "^1.16.0",
     "vue-tsc": "^1.6.5",
-    "xgplayer": "^3.0.5"
+    "xgplayer": "^2.31.2"
   }
 }

src/assets/iconfont/index-color.css

@@ -5,9 +5,9 @@
   font-family: "mallchatcolor"; /* Project id 4141022 */
   /* Color fonts */
   src: 
-       url('//at.alicdn.com/t/c/font_4141022_j7dvq8wg0dr.woff2?t=1688220706250') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4141022_j7dvq8wg0dr.woff?t=1688220706250') format('woff'),
-       url('//at.alicdn.com/t/c/font_4141022_j7dvq8wg0dr.ttf?t=1688220706250') format('truetype');
+       url('//at.alicdn.com/t/c/font_4141022_l6s8lv2vhvi.woff2?t=1688484028839') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4141022_l6s8lv2vhvi.woff?t=1688484028839') format('woff'),
+       url('//at.alicdn.com/t/c/font_4141022_l6s8lv2vhvi.ttf?t=1688484028839') format('truetype');
 }
 
 .mallchatcolor {
@@ -18,6 +18,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-md:before {
+  content: '\e90d';
+}
+
+.icon-sketch:before {
+  content: '\e67f';
+}
+
+.icon-exe:before {
+  content: '\e96f';
+}
+
+.icon-svg:before {
+  content: '\e67c';
+}
+
+.icon-txt:before {
+  content: '\e67b';
+}
+
 .icon-happy1:before {
   content: '\e620';
 }
@@ -110,11 +130,11 @@
   content: '\e603';
 }
 
-.icon-txt:before {
+.icon-log:before {
   content: '\e604';
 }
 
-.icon-java:before {
+.icon-log1:before {
   content: '\e605';
 }
 

src/assets/iconfont/index.css

@@ -3,9 +3,9 @@
 /* prettier-ignore */
 @font-face {
   font-family: "mallchat"; /* Project id 4142069 */
-  src: url('//at.alicdn.com/t/c/font_4142069_q7wdf7ccbx.woff2?t=1688219879090') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4142069_q7wdf7ccbx.woff?t=1688219879090') format('woff'),
-       url('//at.alicdn.com/t/c/font_4142069_q7wdf7ccbx.ttf?t=1688219879090') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4142069_nzdc1c9l0lr.woff2?t=1688480111830') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4142069_nzdc1c9l0lr.woff?t=1688480111830') format('woff'),
+       url('//at.alicdn.com/t/c/font_4142069_nzdc1c9l0lr.ttf?t=1688480111830') format('truetype');
 }
 
 .mallchat {
@@ -16,6 +16,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bofang:before {
+  content: '\e62a';
+}
+
+.icon-guanbi1:before {
+  content: '\eaf2';
+}
+
+.icon-guanbi:before {
+  content: '\e61e';
+}
+
+.icon-aite:before {
+  content: '\e60c';
+}
+
 .icon-tupian1:before {
   content: '\e640';
 }

src/components/RenderMessage/image.vue

@@ -1,57 +1,55 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import { ref, type PropType, computed } from 'vue'
 import type { ImageBody } from '@/services/types'
+import { useImgPreviewStore } from '@/stores/preview'
+import { formatImage } from '@/utils'
 
-defineProps({
+const props = defineProps({
   body: {
     type: Object as PropType<ImageBody>,
     required: true,
   },
 })
 
-const MAX_WIDTH = 200 // 预设宽度
-const MAX_HEIGHT = 150 // 预设高度
+const imageStore = useImgPreviewStore()
+const hasLoadError = ref(false)
+const isLoading = ref(true)
 
 /**
  * 核心就是的到高度，产生明确占位防止图片加载时页面抖动
  * @param width 宽度
  * @param height 高度
  */
-const getImageHeight = (width: number, height: number) => {
-  // 小： 如果图片宽高都小于最大宽高，直接返回原高度
-  if (width < MAX_WIDTH && height < MAX_HEIGHT) {
-    return height
-    // 宽： 根据宽度等比缩放
-  } else if (width > height) {
-    return (MAX_WIDTH / width) * height
-    // 窄：返回最大高度
-  } else if (width === height || width < height) {
-    return MAX_HEIGHT
-  }
+const getImageHeight = computed(() => {
+  const { width, height } = props.body
+  return formatImage(width, height)
+})
+
+// 没有图片的情况下计算出按比例的宽度
+const getWidthStyle = () => {
+  const { width, height } = props.body
+  return `width: ${(getImageHeight.value / height) * width}px`
+}
+
+const handleError = () => {
+  isLoading.value = false
+  hasLoadError.value = true
 }
 </script>
 
 <template>
-  <el-image
-    class="image"
-    hide-on-click-modal
-    preview-teleported
-    :src="body?.url"
-    :style="{ height: getImageHeight(body.width, body.height) + 'px' }"
-    :preview-src-list="[body?.url]"
-    fit="scale-down"
-  >
-    <template #placeholder>
-      <div class="image-slot">
-        <Icon icon="loading2" :size="18" spin colorful />
-        Loading...
-      </div>
-    </template>
-    <template #error>
-      <div class="image-slot">
-        <Icon icon="dazed" :size="36" colorful />
-        加载失败
-      </div>
+  <div class="image" :style="{ height: getImageHeight + 'px' }" @click="imageStore.show(body?.url)">
+    <div v-if="hasLoadError" class="image-slot" :style="getWidthStyle()">
+      <Icon icon="dazed" :size="36" colorful />
+      加载失败
+    </div>
+    <template v-else>
+      <img
+        v-if="body?.url"
+        :src="body?.url"
+        @click="imageStore.show(body?.url)"
+        @error="handleError"
+      />
     </template>
-  </el-image>
+  </div>
 </template>