【优化】：mall 客服消息组件抽离

Author: puhui999

src/views/mall/promotion/kefu/components/KeFuChatBox.vue

@@ -19,49 +19,18 @@
             class="flex mb-20px w-[100%]"
           >
             <el-avatar
-              v-show="item.senderType === UserTypeEnum.MEMBER"
+              v-if="item.senderType === UserTypeEnum.MEMBER"
               :src="keFuConversation.userAvatar"
               alt="avatar"
             />
             <div class="kefu-message p-10px">
-              <!-- TODO puhui999: 消息相关等后续完成后统一抽离封装 -->
               <!-- 文本消息 -->
-              <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
-                <div
-                  v-dompurify-html="replaceEmoji(item.content)"
-                  :class="[
-                    item.senderType === UserTypeEnum.MEMBER
-                      ? `ml-10px`
-                      : item.senderType === UserTypeEnum.ADMIN
-                        ? `mr-10px`
-                        : ''
-                  ]"
-                  class="flex items-center"
-                ></div>
-              </template>
+              <TextMessageItem :message="item" />
               <!-- 图片消息 -->
-              <template v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType">
-                <div
-                  :class="[
-                    item.senderType === UserTypeEnum.MEMBER
-                      ? `ml-10px`
-                      : item.senderType === UserTypeEnum.ADMIN
-                        ? `mr-10px`
-                        : ''
-                  ]"
-                  class="flex items-center"
-                >
-                  <el-image
-                    :src="item.content"
-                    fit="contain"
-                    style="width: 200px; height: 200px"
-                    @click="imagePreview(item.content)"
-                  />
-                </div>
-              </template>
+              <ImageMessageItem :message="item" />
             </div>
             <el-avatar
-              v-show="item.senderType === UserTypeEnum.ADMIN"
+              v-if="item.senderType === UserTypeEnum.ADMIN"
               :src="item.senderAvatar"
               alt="avatar"
             />
@@ -94,14 +63,14 @@ import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/mes
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
 import PictureSelectUpload from './tools/PictureSelectUpload.vue'
-import { Emoji, useEmoji } from './tools/emoji'
+import TextMessageItem from './message/TextMessageItem.vue'
+import ImageMessageItem from './message/ImageMessageItem.vue'
+import { Emoji } from './tools/emoji'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'
 import { UserTypeEnum } from '@/utils/constants'
-import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'KeFuMessageBox' })
-const { replaceEmoji } = useEmoji()
 const messageTool = useMessage()
 const message = ref('') // 消息
 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
@@ -175,13 +144,6 @@ const scrollToBottom = async () => {
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
 }
 
-/** 图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
-
 // TODO puhui999: 轮训相关，功能完善后移除
 onBeforeUnmount(() => {
   if (!poller.value) {

src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <!-- 图片消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.IMAGE === message.contentType">
+    <div
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+      class="flex messages-center"
+    >
+      <el-image
+        :src="message.content"
+        fit="contain"
+        style="width: 200px; height: 200px"
+        @click="imagePreview(message.content)"
+      />
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'ImageMessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+/** 图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>

src/views/mall/promotion/kefu/components/message/TextMessageItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <!-- 文本消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.TEXT === message.contentType">
+    <div
+      v-dompurify-html="replaceEmoji(message.content)"
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+      class="flex items-center"
+    ></div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { useEmoji } from '../tools/emoji'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+defineOptions({ name: 'TextMessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+const { replaceEmoji } = useEmoji()
+</script>