【优化】根据代码评审优化 mall 客服

Author: puhui999

src/views/mall/promotion/kefu/components/KeFuConversationBox.vue renamed to src/views/mall/promotion/kefu/components/KeFuConversationList.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="kefu">
     <div
-      v-for="(item, index) in conversationList"
+      v-for="item in conversationList"
       :key="item.id"
-      :class="{ active: index === activeConversationIndex, pinned: item.adminPinned }"
+      :class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
       class="kefu-conversation flex items-center"
-      @click="openRightMessage(item, index)"
+      @click="openRightMessage(item)"
       @contextmenu.prevent="rightClick($event as PointerEvent, item)"
     >
       <div class="flex justify-center items-center w-100%">
-        <!-- TODO style 换成 unocss -->
-        <div class="flex justify-center items-center" style="width: 50px; height: 50px">
+        <div class="flex justify-center items-center w-50px h-50px">
           <!-- 头像 + 未读 -->
           <el-badge
             :hidden="item.adminUnreadMessageCount === 0"
@@ -27,35 +26,29 @@
               {{ formatDate(item.lastMessageTime) }}
             </span>
           </div>
-          <!-- 文本消息 -->
-          <template v-if="KeFuMessageContentTypeEnum.TEXT === item.lastMessageContentType">
-            <div
-              v-dompurify-html="replaceEmoji(item.lastMessageContent)"
-              class="last-message flex items-center color-[#989EA6]"
-            ></div>
-          </template>
-          <!-- 图片消息 -->
-          <template v-else>
-            <div class="last-message flex items-center color-[#989EA6]">
-              {{ getContentType(item.lastMessageContentType) }}
-            </div>
-          </template>
+          <!-- 最后聊天内容 -->
+          <div
+            v-dompurify-html="
+              getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
+            "
+            class="last-message flex items-center color-[#989EA6]"
+          ></div>
         </div>
       </div>
     </div>
 
     <!-- 右键，进行操作（类似微信） -->
     <ul v-show="showRightMenu" :style="rightMenuStyle" class="right-menu-ul">
       <li
-        v-show="!selectedConversation.adminPinned"
+        v-show="!rightClickConversation.adminPinned"
         class="flex items-center"
         @click.stop="updateConversationPinned(true)"
       >
         <Icon class="mr-5px" icon="ep:top" />
         置顶会话
       </li>
       <li
-        v-show="selectedConversation.adminPinned"
+        v-show="rightClickConversation.adminPinned"
         class="flex items-center"
         @click.stop="updateConversationPinned(false)"
       >
@@ -86,7 +79,7 @@ const message = useMessage() // 消息弹窗
 
 const { replaceEmoji } = useEmoji()
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
-const activeConversationIndex = ref(-1) // 选中的会话 index 位置 TODO @puhui999：这个可以改成 activeConversationId 么？因为一般是选中的对话编号
+const activeConversationId = ref(-1) // 选中的会话
 
 /** 加载会话列表 */
 const getConversationList = async () => {
@@ -98,40 +91,43 @@ defineExpose({ getConversationList })
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
 }>()
-const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
-  activeConversationIndex.value = index
+const openRightMessage = (item: KeFuConversationRespVO) => {
+  activeConversationId.value = item.id
   emits('change', item)
 }
 
-// TODO @puhui999：这个，是不是改成 getConversationDisplayText，获取会话的展示文本。然后，把文本消息类型，也统一处理（包括上面的 replaceEmoji）。这样，更统一。
 /** 获得消息类型 */
-const getContentType = computed(() => (lastMessageContentType: number) => {
-  switch (lastMessageContentType) {
-    case KeFuMessageContentTypeEnum.SYSTEM:
-      return '[系统消息]'
-    case KeFuMessageContentTypeEnum.VIDEO:
-      return '[视频消息]'
-    case KeFuMessageContentTypeEnum.IMAGE:
-      return '[图片消息]'
-    case KeFuMessageContentTypeEnum.PRODUCT:
-      return '[商品消息]'
-    case KeFuMessageContentTypeEnum.ORDER:
-      return '[订单消息]'
-    case KeFuMessageContentTypeEnum.VOICE:
-      return '[语音消息]'
-    default:
-      return ''
+const getConversationDisplayText = computed(
+  () => (lastMessageContentType: number, lastMessageContent: string) => {
+    switch (lastMessageContentType) {
+      case KeFuMessageContentTypeEnum.SYSTEM:
+        return '[系统消息]'
+      case KeFuMessageContentTypeEnum.VIDEO:
+        return '[视频消息]'
+      case KeFuMessageContentTypeEnum.IMAGE:
+        return '[图片消息]'
+      case KeFuMessageContentTypeEnum.PRODUCT:
+        return '[商品消息]'
+      case KeFuMessageContentTypeEnum.ORDER:
+        return '[订单消息]'
+      case KeFuMessageContentTypeEnum.VOICE:
+        return '[语音消息]'
+      case KeFuMessageContentTypeEnum.TEXT:
+        return replaceEmoji(lastMessageContent)
+      default:
+        return ''
+    }
   }
-})
+)
 
 //======================= 右键菜单 =======================
 const showRightMenu = ref(false) // 显示右键菜单
 const rightMenuStyle = ref<any>({}) // 右键菜单 Style
-const selectedConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象 TODO puhui999：这个是不是叫 rightClickConversation 会好点。因为 selected 容易和选中的对话，定义上有点重叠
+const rightClickConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象
 
 /** 打开右键菜单 */
 const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
-  selectedConversation.value = item
+  rightClickConversation.value = item
   // 显示右键菜单
   showRightMenu.value = true
   rightMenuStyle.value = {
@@ -148,7 +144,7 @@ const closeRightMenu = () => {
 const updateConversationPinned = async (adminPinned: boolean) => {
   // 1. 会话置顶/取消置顶
   await KeFuConversationApi.updateConversationPinned({
-    id: selectedConversation.value.id,
+    id: rightClickConversation.value.id,
     adminPinned
   })
   message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功')
@@ -161,7 +157,7 @@ const updateConversationPinned = async (adminPinned: boolean) => {
 const deleteConversation = async () => {
   // 1. 删除会话
   await message.confirm('您确定要删除该会话吗？')
-  await KeFuConversationApi.deleteConversation(selectedConversation.value.id)
+  await KeFuConversationApi.deleteConversation(rightClickConversation.value.id)
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu()
   await getConversationList()

src/views/mall/promotion/kefu/components/KeFuChatBox.vue renamed to src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -1,11 +1,9 @@
 <template>
   <el-container v-if="showChatBox" class="kefu">
     <el-header>
-      <!-- TODO @puhui999：keFuConversation => conversation -->
-      <div class="kefu-title">{{ keFuConversation.userNickname }}</div>
+      <div class="kefu-title">{{ conversation.userNickname }}</div>
     </el-header>
-    <!-- TODO @puhui999：unocss -->
-    <el-main class="kefu-content" style="overflow: visible">
+    <el-main class="kefu-content overflow-visible">
       <!-- 加载历史消息 -->
       <div
         v-show="loadingMore"
@@ -48,7 +46,7 @@
             >
               <el-avatar
                 v-if="item.senderType === UserTypeEnum.MEMBER"
-                :src="keFuConversation.userAvatar"
+                :src="conversation.userAvatar"
                 alt="avatar"
               />
               <div
@@ -127,7 +125,7 @@ const message = ref('') // 消息弹窗
 
 const messageTool = useMessage()
 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
-const keFuConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
+const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
 const showNewMessageTip = ref(false) // 显示有新消息提示
 const queryParams = reactive({
   pageNo: 1,
@@ -136,9 +134,9 @@ const queryParams = reactive({
 const total = ref(0) // 消息总条数
 
 /** 获得消息列表 */
-const getMessageList = async (conversation: KeFuConversationRespVO) => {
-  keFuConversation.value = conversation
-  queryParams.conversationId = conversation.id
+const getMessageList = async (val: KeFuConversationRespVO) => {
+  conversation.value = val
+  queryParams.conversationId = val.id
   const messageTotal = messageList.value.length
   if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) {
     return
@@ -162,20 +160,20 @@ const getMessageList0 = computed(() => {
 
 /** 刷新消息列表 */
 const refreshMessageList = async () => {
-  if (!keFuConversation.value) {
+  if (!conversation.value) {
     return
   }
 
   queryParams.pageNo = 1
-  await getMessageList(keFuConversation.value)
+  await getMessageList(conversation.value)
   if (loadHistory.value) {
     // 有下角显示有新消息提示
     showNewMessageTip.value = true
   }
 }
 
 defineExpose({ getMessageList, refreshMessageList })
-const showChatBox = computed(() => !isEmpty(keFuConversation.value)) // 是否显示聊天区域
+const showChatBox = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
 
 /** 处理表情选择 */
 const handleEmojiSelect = (item: Emoji) => {
@@ -186,7 +184,7 @@ const handleEmojiSelect = (item: Emoji) => {
 const handleSendPicture = async (picUrl: string) => {
   // 组织发送消息
   const msg = {
-    conversationId: keFuConversation.value.id,
+    conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.IMAGE,
     content: picUrl
   }
@@ -202,7 +200,7 @@ const handleSendMessage = async () => {
   }
   // 2. 组织发送消息
   const msg = {
-    conversationId: keFuConversation.value.id,
+    conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.TEXT,
     content: message.value
   }
@@ -215,7 +213,7 @@ const sendMessage = async (msg: any) => {
   await KeFuMessageApi.sendKeFuMessage(msg)
   message.value = ''
   // 加载消息列表
-  await getMessageList(keFuConversation.value)
+  await getMessageList(conversation.value)
   // 滚动到最新消息处
   await scrollToBottom()
 }
@@ -233,7 +231,7 @@ const scrollToBottom = async () => {
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
   showNewMessageTip.value = false
   // 2.2 消息已读
-  await KeFuMessageApi.updateKeFuMessageReadStatus(keFuConversation.value.id)
+  await KeFuMessageApi.updateKeFuMessageReadStatus(conversation.value.id)
 }
 
 /** 查看新消息 */
@@ -257,7 +255,7 @@ const handleOldMessage = async () => {
   loadHistory.value = true
   // 加载消息列表
   queryParams.pageNo += 1
-  await getMessageList(keFuConversation.value)
+  await getMessageList(conversation.value)
   loadingMore.value = false
   // TODO puhui999: 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
 }