【代码优化】客服聊天

pages/chat/components/messageListItem.vue

@@ -42,11 +42,12 @@
             sheep.$url.static('/static/img/shop/chat/default.png')
           "
           mode="aspectFill"
+          lazy-load
         ></image>
         <!-- 内容 -->
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
           <view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
-            <mp-html :content="replaceEmoji(getMessageContent(message).text || message.content)" />
+            <mp-html :content="processedContent" :domain="sheep.$url.cdn('')" lazy-load />
           </view>
         </template>
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
@@ -138,7 +139,16 @@
     return false;
   });
 
-  // 处理表情
+  // 缓存表情映射
+  const emojiMap = computed(() => {
+    const map = new Map();
+    emojiList.forEach(emoji => {
+      map.set(emoji.name, emoji.file);
+    });
+    return map;
+  });
+
+  // 处理表情 - 进行缓存优化
   function replaceEmoji(data) {
     let newData = data;
     if (typeof newData !== 'object') {
@@ -146,27 +156,28 @@
       let zhEmojiName = newData.match(reg);
       if (zhEmojiName) {
         zhEmojiName.forEach((item) => {
-          let emojiFile = selEmojiFile(item);
-          newData = newData.replace(
-            item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
-              '/static/img/chat/emoji/' + emojiFile,
-            )}"/>`,
-          );
+          const emojiFile = emojiMap.value.get(item) || '';
+          if (emojiFile) {
+            newData = newData.replace(
+              item,
+              `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
+                '/static/img/chat/emoji/' + emojiFile,
+              )}"/>`,
+            );
+          }
         });
       }
     }
     return newData;
   }
 
-  function selEmojiFile(name) {
-    for (let index in emojiList) {
-      if (emojiList[index].name === name) {
-        return emojiList[index].file;
-      }
+  // 预处理内容，避免重复计算
+  const processedContent = computed(() => {
+    if (props.message.contentType === KeFuMessageContentTypeEnum.TEXT) {
+      return replaceEmoji(getMessageContent.value(props.message).text || props.message.content);
     }
-    return false;
-  }
+    return props.message.content;
+  });
 </script>
 
 <style scoped lang="scss">