From 32d6ac0183c7ff81d1e41f3a3d785c84a33ac86e Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 10 Jul 2024 14:34:12 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=BB=A3=E7=A0=81=E8=AF=84=E5=AE=A1=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20mall=20=E5=AE=A2=E6=9C=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...sationBox.vue => KeFuConversationList.vue} |  86 +++++++++---------
 .../{KeFuChatBox.vue => KeFuMessageList.vue}  |  32 +++----
 .../kefu/components/{images => asserts}/a.png | Bin
 .../components/{images => asserts}/aini.png   | Bin
 .../components/{images => asserts}/aixin.png  | Bin
 .../components/{images => asserts}/baiyan.png | Bin
 .../components/{images => asserts}/bizui.png  | Bin
 .../{images => asserts}/buhaoyisi.png         | Bin
 .../{images => asserts}/bukesiyi.png          | Bin
 .../components/{images => asserts}/dajing.png | Bin
 .../components/{images => asserts}/danao.png  | Bin
 .../components/{images => asserts}/daxiao.png | Bin
 .../{images => asserts}/dianzan.png           | Bin
 .../components/{images => asserts}/emo.png    | Bin
 .../components/{images => asserts}/esi.png    | Bin
 .../components/{images => asserts}/fadai.png  | Bin
 .../components/{images => asserts}/fankun.png | Bin
 .../components/{images => asserts}/feiwen.png | Bin
 .../components/{images => asserts}/fennu.png  | Bin
 .../components/{images => asserts}/ganga.png  | Bin
 .../components/{images => asserts}/ganmao.png | Bin
 .../components/{images => asserts}/hanyan.png | Bin
 .../components/{images => asserts}/haochi.png | Bin
 .../{images => asserts}/hongxin.png           | Bin
 .../{images => asserts}/huaixiao.png          | Bin
 .../{images => asserts}/jingkong.png          | Bin
 .../{images => asserts}/jingshu.png           | Bin
 .../components/{images => asserts}/jingya.png | Bin
 .../components/{images => asserts}/kaixin.png | Bin
 .../components/{images => asserts}/keai.png   | Bin
 .../components/{images => asserts}/keshui.png | Bin
 .../components/{images => asserts}/kun.png    | Bin
 .../components/{images => asserts}/lengku.png | Bin
 .../components/{images => asserts}/liuhan.png | Bin
 .../{images => asserts}/liukoushui.png        | Bin
 .../components/{images => asserts}/liulei.png | Bin
 .../components/{images => asserts}/mengbi.png | Bin
 .../{images => asserts}/mianwubiaoqing.png    | Bin
 .../components/{images => asserts}/nanguo.png | Bin
 .../components/{images => asserts}/outu.png   | Bin
 .../{images => asserts}/picture.svg           |   0
 .../{images => asserts}/shengqi.png           | Bin
 .../{images => asserts}/shuizhuo.png          | Bin
 .../{images => asserts}/tianshi.png           | Bin
 .../{images => asserts}/xiaodiaoya.png        | Bin
 .../components/{images => asserts}/xiaoku.png | Bin
 .../components/{images => asserts}/xinsui.png | Bin
 .../components/{images => asserts}/xiong.png  | Bin
 .../components/{images => asserts}/yiwen.png  | Bin
 .../components/{images => asserts}/yun.png    | Bin
 .../components/{images => asserts}/ziya.png   | Bin
 .../mall/promotion/kefu/components/index.ts   |   6 +-
 .../components/message/ImageMessageItem.vue   |  15 +--
 .../components/message/OrderMessageItem.vue   |  29 +++---
 .../kefu/components/message/ProductItem.vue   |  20 ++--
 .../components/message/ProductMessageItem.vue |   2 +-
 .../components/tools/EmojiSelectPopover.vue   |   3 +-
 .../components/tools/PictureSelectUpload.vue  |   6 +-
 .../promotion/kefu/components/tools/emoji.ts  |  25 ++---
 src/views/mall/promotion/kefu/index.vue       |  13 ++-
 60 files changed, 106 insertions(+), 131 deletions(-)
 rename src/views/mall/promotion/kefu/components/{KeFuConversationBox.vue => KeFuConversationList.vue} (67%)
 rename src/views/mall/promotion/kefu/components/{KeFuChatBox.vue => KeFuMessageList.vue} (91%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/a.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/aini.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/aixin.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/baiyan.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/bizui.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/buhaoyisi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/bukesiyi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/dajing.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/danao.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/daxiao.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/dianzan.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/emo.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/esi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/fadai.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/fankun.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/feiwen.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/fennu.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/ganga.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/ganmao.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/hanyan.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/haochi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/hongxin.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/huaixiao.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/jingkong.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/jingshu.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/jingya.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/kaixin.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/keai.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/keshui.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/kun.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/lengku.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/liuhan.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/liukoushui.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/liulei.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/mengbi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/mianwubiaoqing.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/nanguo.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/outu.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/picture.svg (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/shengqi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/shuizhuo.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/tianshi.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/xiaodiaoya.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/xiaoku.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/xinsui.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/xiong.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/yiwen.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/yun.png (100%)
 rename src/views/mall/promotion/kefu/components/{images => asserts}/ziya.png (100%)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
similarity index 67%
rename from src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
rename to src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index fdf9895e..1b97188d 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/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,19 +26,13 @@
               {{ 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>
@@ -47,7 +40,7 @@
     <!-- 右键，进行操作（类似微信） -->
     <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)"
       >
@@ -55,7 +48,7 @@
         置顶会话
       </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()
diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
similarity index 91%
rename from src/views/mall/promotion/kefu/components/KeFuChatBox.vue
rename to src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 0c815bff..70304751 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/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,12 +160,12 @@ 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
@@ -175,7 +173,7 @@ const refreshMessageList = async () => {
 }
 
 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: 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
 }
diff --git a/src/views/mall/promotion/kefu/components/images/a.png b/src/views/mall/promotion/kefu/components/asserts/a.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/a.png
rename to src/views/mall/promotion/kefu/components/asserts/a.png
diff --git a/src/views/mall/promotion/kefu/components/images/aini.png b/src/views/mall/promotion/kefu/components/asserts/aini.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/aini.png
rename to src/views/mall/promotion/kefu/components/asserts/aini.png
diff --git a/src/views/mall/promotion/kefu/components/images/aixin.png b/src/views/mall/promotion/kefu/components/asserts/aixin.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/aixin.png
rename to src/views/mall/promotion/kefu/components/asserts/aixin.png
diff --git a/src/views/mall/promotion/kefu/components/images/baiyan.png b/src/views/mall/promotion/kefu/components/asserts/baiyan.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/baiyan.png
rename to src/views/mall/promotion/kefu/components/asserts/baiyan.png
diff --git a/src/views/mall/promotion/kefu/components/images/bizui.png b/src/views/mall/promotion/kefu/components/asserts/bizui.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/bizui.png
rename to src/views/mall/promotion/kefu/components/asserts/bizui.png
diff --git a/src/views/mall/promotion/kefu/components/images/buhaoyisi.png b/src/views/mall/promotion/kefu/components/asserts/buhaoyisi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/buhaoyisi.png
rename to src/views/mall/promotion/kefu/components/asserts/buhaoyisi.png
diff --git a/src/views/mall/promotion/kefu/components/images/bukesiyi.png b/src/views/mall/promotion/kefu/components/asserts/bukesiyi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/bukesiyi.png
rename to src/views/mall/promotion/kefu/components/asserts/bukesiyi.png
diff --git a/src/views/mall/promotion/kefu/components/images/dajing.png b/src/views/mall/promotion/kefu/components/asserts/dajing.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/dajing.png
rename to src/views/mall/promotion/kefu/components/asserts/dajing.png
diff --git a/src/views/mall/promotion/kefu/components/images/danao.png b/src/views/mall/promotion/kefu/components/asserts/danao.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/danao.png
rename to src/views/mall/promotion/kefu/components/asserts/danao.png
diff --git a/src/views/mall/promotion/kefu/components/images/daxiao.png b/src/views/mall/promotion/kefu/components/asserts/daxiao.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/daxiao.png
rename to src/views/mall/promotion/kefu/components/asserts/daxiao.png
diff --git a/src/views/mall/promotion/kefu/components/images/dianzan.png b/src/views/mall/promotion/kefu/components/asserts/dianzan.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/dianzan.png
rename to src/views/mall/promotion/kefu/components/asserts/dianzan.png
diff --git a/src/views/mall/promotion/kefu/components/images/emo.png b/src/views/mall/promotion/kefu/components/asserts/emo.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/emo.png
rename to src/views/mall/promotion/kefu/components/asserts/emo.png
diff --git a/src/views/mall/promotion/kefu/components/images/esi.png b/src/views/mall/promotion/kefu/components/asserts/esi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/esi.png
rename to src/views/mall/promotion/kefu/components/asserts/esi.png
diff --git a/src/views/mall/promotion/kefu/components/images/fadai.png b/src/views/mall/promotion/kefu/components/asserts/fadai.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/fadai.png
rename to src/views/mall/promotion/kefu/components/asserts/fadai.png
diff --git a/src/views/mall/promotion/kefu/components/images/fankun.png b/src/views/mall/promotion/kefu/components/asserts/fankun.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/fankun.png
rename to src/views/mall/promotion/kefu/components/asserts/fankun.png
diff --git a/src/views/mall/promotion/kefu/components/images/feiwen.png b/src/views/mall/promotion/kefu/components/asserts/feiwen.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/feiwen.png
rename to src/views/mall/promotion/kefu/components/asserts/feiwen.png
diff --git a/src/views/mall/promotion/kefu/components/images/fennu.png b/src/views/mall/promotion/kefu/components/asserts/fennu.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/fennu.png
rename to src/views/mall/promotion/kefu/components/asserts/fennu.png
diff --git a/src/views/mall/promotion/kefu/components/images/ganga.png b/src/views/mall/promotion/kefu/components/asserts/ganga.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/ganga.png
rename to src/views/mall/promotion/kefu/components/asserts/ganga.png
diff --git a/src/views/mall/promotion/kefu/components/images/ganmao.png b/src/views/mall/promotion/kefu/components/asserts/ganmao.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/ganmao.png
rename to src/views/mall/promotion/kefu/components/asserts/ganmao.png
diff --git a/src/views/mall/promotion/kefu/components/images/hanyan.png b/src/views/mall/promotion/kefu/components/asserts/hanyan.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/hanyan.png
rename to src/views/mall/promotion/kefu/components/asserts/hanyan.png
diff --git a/src/views/mall/promotion/kefu/components/images/haochi.png b/src/views/mall/promotion/kefu/components/asserts/haochi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/haochi.png
rename to src/views/mall/promotion/kefu/components/asserts/haochi.png
diff --git a/src/views/mall/promotion/kefu/components/images/hongxin.png b/src/views/mall/promotion/kefu/components/asserts/hongxin.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/hongxin.png
rename to src/views/mall/promotion/kefu/components/asserts/hongxin.png
diff --git a/src/views/mall/promotion/kefu/components/images/huaixiao.png b/src/views/mall/promotion/kefu/components/asserts/huaixiao.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/huaixiao.png
rename to src/views/mall/promotion/kefu/components/asserts/huaixiao.png
diff --git a/src/views/mall/promotion/kefu/components/images/jingkong.png b/src/views/mall/promotion/kefu/components/asserts/jingkong.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/jingkong.png
rename to src/views/mall/promotion/kefu/components/asserts/jingkong.png
diff --git a/src/views/mall/promotion/kefu/components/images/jingshu.png b/src/views/mall/promotion/kefu/components/asserts/jingshu.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/jingshu.png
rename to src/views/mall/promotion/kefu/components/asserts/jingshu.png
diff --git a/src/views/mall/promotion/kefu/components/images/jingya.png b/src/views/mall/promotion/kefu/components/asserts/jingya.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/jingya.png
rename to src/views/mall/promotion/kefu/components/asserts/jingya.png
diff --git a/src/views/mall/promotion/kefu/components/images/kaixin.png b/src/views/mall/promotion/kefu/components/asserts/kaixin.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/kaixin.png
rename to src/views/mall/promotion/kefu/components/asserts/kaixin.png
diff --git a/src/views/mall/promotion/kefu/components/images/keai.png b/src/views/mall/promotion/kefu/components/asserts/keai.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/keai.png
rename to src/views/mall/promotion/kefu/components/asserts/keai.png
diff --git a/src/views/mall/promotion/kefu/components/images/keshui.png b/src/views/mall/promotion/kefu/components/asserts/keshui.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/keshui.png
rename to src/views/mall/promotion/kefu/components/asserts/keshui.png
diff --git a/src/views/mall/promotion/kefu/components/images/kun.png b/src/views/mall/promotion/kefu/components/asserts/kun.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/kun.png
rename to src/views/mall/promotion/kefu/components/asserts/kun.png
diff --git a/src/views/mall/promotion/kefu/components/images/lengku.png b/src/views/mall/promotion/kefu/components/asserts/lengku.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/lengku.png
rename to src/views/mall/promotion/kefu/components/asserts/lengku.png
diff --git a/src/views/mall/promotion/kefu/components/images/liuhan.png b/src/views/mall/promotion/kefu/components/asserts/liuhan.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/liuhan.png
rename to src/views/mall/promotion/kefu/components/asserts/liuhan.png
diff --git a/src/views/mall/promotion/kefu/components/images/liukoushui.png b/src/views/mall/promotion/kefu/components/asserts/liukoushui.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/liukoushui.png
rename to src/views/mall/promotion/kefu/components/asserts/liukoushui.png
diff --git a/src/views/mall/promotion/kefu/components/images/liulei.png b/src/views/mall/promotion/kefu/components/asserts/liulei.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/liulei.png
rename to src/views/mall/promotion/kefu/components/asserts/liulei.png
diff --git a/src/views/mall/promotion/kefu/components/images/mengbi.png b/src/views/mall/promotion/kefu/components/asserts/mengbi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/mengbi.png
rename to src/views/mall/promotion/kefu/components/asserts/mengbi.png
diff --git a/src/views/mall/promotion/kefu/components/images/mianwubiaoqing.png b/src/views/mall/promotion/kefu/components/asserts/mianwubiaoqing.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/mianwubiaoqing.png
rename to src/views/mall/promotion/kefu/components/asserts/mianwubiaoqing.png
diff --git a/src/views/mall/promotion/kefu/components/images/nanguo.png b/src/views/mall/promotion/kefu/components/asserts/nanguo.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/nanguo.png
rename to src/views/mall/promotion/kefu/components/asserts/nanguo.png
diff --git a/src/views/mall/promotion/kefu/components/images/outu.png b/src/views/mall/promotion/kefu/components/asserts/outu.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/outu.png
rename to src/views/mall/promotion/kefu/components/asserts/outu.png
diff --git a/src/views/mall/promotion/kefu/components/images/picture.svg b/src/views/mall/promotion/kefu/components/asserts/picture.svg
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/picture.svg
rename to src/views/mall/promotion/kefu/components/asserts/picture.svg
diff --git a/src/views/mall/promotion/kefu/components/images/shengqi.png b/src/views/mall/promotion/kefu/components/asserts/shengqi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/shengqi.png
rename to src/views/mall/promotion/kefu/components/asserts/shengqi.png
diff --git a/src/views/mall/promotion/kefu/components/images/shuizhuo.png b/src/views/mall/promotion/kefu/components/asserts/shuizhuo.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/shuizhuo.png
rename to src/views/mall/promotion/kefu/components/asserts/shuizhuo.png
diff --git a/src/views/mall/promotion/kefu/components/images/tianshi.png b/src/views/mall/promotion/kefu/components/asserts/tianshi.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/tianshi.png
rename to src/views/mall/promotion/kefu/components/asserts/tianshi.png
diff --git a/src/views/mall/promotion/kefu/components/images/xiaodiaoya.png b/src/views/mall/promotion/kefu/components/asserts/xiaodiaoya.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/xiaodiaoya.png
rename to src/views/mall/promotion/kefu/components/asserts/xiaodiaoya.png
diff --git a/src/views/mall/promotion/kefu/components/images/xiaoku.png b/src/views/mall/promotion/kefu/components/asserts/xiaoku.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/xiaoku.png
rename to src/views/mall/promotion/kefu/components/asserts/xiaoku.png
diff --git a/src/views/mall/promotion/kefu/components/images/xinsui.png b/src/views/mall/promotion/kefu/components/asserts/xinsui.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/xinsui.png
rename to src/views/mall/promotion/kefu/components/asserts/xinsui.png
diff --git a/src/views/mall/promotion/kefu/components/images/xiong.png b/src/views/mall/promotion/kefu/components/asserts/xiong.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/xiong.png
rename to src/views/mall/promotion/kefu/components/asserts/xiong.png
diff --git a/src/views/mall/promotion/kefu/components/images/yiwen.png b/src/views/mall/promotion/kefu/components/asserts/yiwen.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/yiwen.png
rename to src/views/mall/promotion/kefu/components/asserts/yiwen.png
diff --git a/src/views/mall/promotion/kefu/components/images/yun.png b/src/views/mall/promotion/kefu/components/asserts/yun.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/yun.png
rename to src/views/mall/promotion/kefu/components/asserts/yun.png
diff --git a/src/views/mall/promotion/kefu/components/images/ziya.png b/src/views/mall/promotion/kefu/components/asserts/ziya.png
similarity index 100%
rename from src/views/mall/promotion/kefu/components/images/ziya.png
rename to src/views/mall/promotion/kefu/components/asserts/ziya.png
diff --git a/src/views/mall/promotion/kefu/components/index.ts b/src/views/mall/promotion/kefu/components/index.ts
index 65234629..88e52832 100644
--- a/src/views/mall/promotion/kefu/components/index.ts
+++ b/src/views/mall/promotion/kefu/components/index.ts
@@ -1,4 +1,4 @@
-import KeFuConversationBox from './KeFuConversationBox.vue'
-import KeFuChatBox from './KeFuChatBox.vue'
+import KeFuConversationList from './KeFuConversationList.vue'
+import KeFuMessageList from './KeFuMessageList.vue'
 
-export { KeFuConversationBox, KeFuChatBox }
+export { KeFuConversationList, KeFuMessageList }
diff --git a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
index a9b299dd..6b60651b 100644
--- a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
@@ -10,12 +10,13 @@
             : ''
       ]"
     >
-      <!-- TODO @puhui999：unocss -->
       <el-image
+        :initial-index="0"
+        :preview-src-list="[message.content]"
         :src="message.content"
+        class="w-200px"
         fit="contain"
-        style="width: 200px"
-        @click="imagePreview(message.content)"
+        preview-teleported
       />
     </div>
   </template>
@@ -25,17 +26,9 @@
 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>
diff --git a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
index d0faf310..61c81e47 100644
--- a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
@@ -18,10 +18,9 @@
           </div>
         </div>
         <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
-          <!-- TODO @puhui999：要不把 img => picUrl 类似这种，搞的更匹配一点 -->
           <ProductItem
-            :img="item.picUrl"
             :num="item.count"
+            :picUrl="item.picUrl"
             :price="item.price"
             :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
             :title="item.spuName"
@@ -61,7 +60,7 @@ const getMessageContent = computed(() => JSON.parse(props.message.content))
  * @param order 订单
  * @return {string} 颜色的 class 名称
  */
-function formatOrderColor(order) {
+function formatOrderColor(order: any) {
   if (order.status === 0) {
     return 'info-color'
   }
@@ -79,7 +78,7 @@ function formatOrderColor(order) {
  *
  * @param order 订单
  */
-function formatOrderStatus(order) {
+function formatOrderStatus(order: any) {
   if (order.status === 0) {
     return '待付款'
   }
@@ -109,23 +108,23 @@ function formatOrderStatus(order) {
   background-color: #e2e2e2;
 
   .order-card-header {
-    height: 80rpx;
+    height: 80px;
 
     .order-no {
-      font-size: 26rpx;
+      font-size: 26px;
       font-weight: 500;
     }
   }
 
   .pay-box {
     .discounts-title {
-      font-size: 24rpx;
+      font-size: 24px;
       line-height: normal;
       color: #999999;
     }
 
     .discounts-money {
-      font-size: 24rpx;
+      font-size: 24px;
       line-height: normal;
       color: #999;
       font-family: OPPOSANS;
@@ -137,29 +136,29 @@ function formatOrderStatus(order) {
   }
 
   .order-card-footer {
-    height: 100rpx;
+    height: 100px;
 
     .more-item-box {
-      padding: 20rpx;
+      padding: 20px;
 
       .more-item {
-        height: 60rpx;
+        height: 60px;
 
         .title {
-          font-size: 26rpx;
+          font-size: 26px;
         }
       }
     }
 
     .more-btn {
       color: #999999;
-      font-size: 24rpx;
+      font-size: 24px;
     }
 
     .content {
-      width: 154rpx;
+      width: 154px;
       color: #333333;
-      font-size: 26rpx;
+      font-size: 26px;
       font-weight: 500;
     }
   }
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
index b58a0167..39233deb 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -8,7 +8,14 @@
       class="ss-order-card-warp flex items-stretch justify-between bg-white"
     >
       <div class="img-box mr-24px">
-        <el-image :src="img" class="order-img" fit="contain" @click="imagePrediv(img)" />
+        <el-image
+          :initial-index="0"
+          :preview-src-list="[picUrl]"
+          :src="picUrl"
+          class="order-img"
+          fit="contain"
+          preview-teleported
+        />
       </div>
       <div
         :style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
@@ -44,12 +51,11 @@
 </template>
 
 <script lang="ts" setup>
-import { createImageViewer } from '@/components/ImageViewer'
 import { fenToYuan } from '@/utils'
 
 defineOptions({ name: 'ProductItem' })
 const props = defineProps({
-  img: {
+  picUrl: {
     type: String,
     default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
   },
@@ -101,14 +107,6 @@ const skuString = computed(() => {
   }
   return props.skuText
 })
-
-// TODO @puhui999：可以使用 preview-teleported
-/** 图预览 */
-const imagePrediv = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
index 6bd2b29e..ea51d089 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
@@ -11,7 +11,7 @@
       ]"
     >
       <ProductItem
-        :img="getMessageContent.picUrl"
+        :picUrl="getMessageContent.picUrl"
         :price="getMessageContent.price"
         :skuText="getMessageContent.introduction"
         :title="getMessageContent.spuName"
diff --git a/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue b/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
index da3e7e51..43c096db 100644
--- a/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
+++ b/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
@@ -17,8 +17,7 @@
           class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
           @click="handleSelect(item)"
         >
-          <!-- TODO @puhui999：换成 unocss -->
-          <img :src="item.url" style="width: 24px; height: 24px" />
+          <img :src="item.url" class="w-24px h-24px" />
         </li>
       </ul>
     </ElScrollbar>
diff --git a/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue b/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
index 3f6ee22f..9742353a 100644
--- a/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
+++ b/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
@@ -1,14 +1,12 @@
 <!-- 图片选择 -->
 <template>
   <div>
-    <!-- TODO @puhui999：unocss -->
-    <img :src="Picture" style="width: 35px; height: 35px" @click="selectAndUpload" />
+    <img :src="Picture" class="w-35px h-35px" @click="selectAndUpload" />
   </div>
 </template>
 
 <script lang="ts" setup>
-// TODO @puhui999：images 换成 asserts
-import Picture from '@/views/mall/promotion/kefu/components/images/picture.svg'
+import Picture from '@/views/mall/promotion/kefu/components/asserts/picture.svg'
 import * as FileApi from '@/api/infra/file'
 
 defineOptions({ name: 'PictureSelectUpload' })
diff --git a/src/views/mall/promotion/kefu/components/tools/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts
index df45effd..7e3f19be 100644
--- a/src/views/mall/promotion/kefu/components/tools/emoji.ts
+++ b/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -59,12 +59,10 @@ export interface Emoji {
 export const useEmoji = () => {
   const emojiPathList = ref<any[]>([])
 
-  // TODO @puhui999：initStaticEmoji 会不会更好
   /** 加载本地图片 */
-  const getStaticEmojiPath = async () => {
-    // TODO @puhui999：images 改成 asserts 更合适哈。
+  const initStaticEmoji = async () => {
     const pathList = import.meta.glob(
-      '@/views/mall/promotion/kefu/components/images/*.{png,jpg,jpeg,svg}'
+      '@/views/mall/promotion/kefu/components/asserts/*.{png,jpg,jpeg,svg}'
     )
     for (const path in pathList) {
       const imageModule: any = await pathList[path]()
@@ -75,26 +73,24 @@ export const useEmoji = () => {
   /** 初始化 */
   onMounted(async () => {
     if (isEmpty(emojiPathList.value)) {
-      await getStaticEmojiPath()
+      await initStaticEmoji()
     }
   })
 
-  // TODO @puhui999：建议 function 都改成 const 这种来定义哈。保持统一风格
   /**
    * 将文本中的表情替换成图片
    *
-   * @param data 文本 TODO @puhui999：data => content
+   * @param data 文本
    * @return 替换后的文本
    */
-  function replaceEmoji(data: string) {
-    let newData = data
+  const replaceEmoji = (content: string) => {
+    let newData = content
     if (typeof newData !== 'object') {
-      // TODO @puhui999： \] 是不是可以简化成 ]。我看 idea 提示了哈
-      const reg = /\[(.+?)\]/g // [] 中括号
+      const reg = /\[(.+?)]/g // [] 中括号
       const zhEmojiName = newData.match(reg)
       if (zhEmojiName) {
         zhEmojiName.forEach((item) => {
-          const emojiFile = selEmojiFile(item)
+          const emojiFile = getEmojiFileByName(item)
           newData = newData.replace(
             item,
             `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}"/>`
@@ -112,13 +108,12 @@ export const useEmoji = () => {
    */
   function getEmojiList(): Emoji[] {
     return emojiList.map((item) => ({
-      url: selEmojiFile(item.name),
+      url: getEmojiFileByName(item.name),
       name: item.name
     })) as Emoji[]
   }
 
-  // TODO @puhui999：getEmojiFileByName 会不会更容易理解哈
-  function selEmojiFile(name: string) {
+  function getEmojiFileByName(name: string) {
     for (const emoji of emojiList) {
       if (emoji.name === name) {
         return emojiPathList.value.find((item: string) => item.indexOf(emoji.file) > -1)
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 2d8c1c64..92e0e791 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -1,23 +1,22 @@
 <template>
   <el-row :gutter="10">
-    <!-- TODO @puhui999：KeFuConversationBox => KeFuConversationList ；KeFuChatBox => KeFuMessageList -->
     <!-- 会话列表 -->
     <el-col :span="8">
       <ContentWrap>
-        <KeFuConversationBox ref="keFuConversationRef" @change="handleChange" />
+        <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
       </ContentWrap>
     </el-col>
     <!-- 会话详情（选中会话的消息列表） -->
     <el-col :span="16">
       <ContentWrap>
-        <KeFuChatBox ref="keFuChatBoxRef" @change="getConversationList" />
+        <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
       </ContentWrap>
     </el-col>
   </el-row>
 </template>
 
 <script lang="ts" setup>
-import { KeFuChatBox, KeFuConversationBox } from './components'
+import { KeFuConversationList, KeFuMessageList } from './components'
 import { WebSocketMessageTypeConstants } from './components/tools/constants'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { getAccessToken } from '@/utils/auth'
@@ -36,7 +35,7 @@ const server = ref(
 
 /** 发起 WebSocket 连接 */
 const { data, close, open } = useWebSocket(server.value, {
-  autoReconnect: false, // TODO @puhui999：重连要加下
+  autoReconnect: true,
   heartbeat: true
 })
 
@@ -78,13 +77,13 @@ watchEffect(() => {
 // ======================= WebSocket end =======================
 
 /** 加载会话列表 */
-const keFuConversationRef = ref<InstanceType<typeof KeFuConversationBox>>()
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
 const getConversationList = () => {
   keFuConversationRef.value?.getConversationList()
 }
 
 /** 加载指定会话的消息列表 */
-const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
+const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
 const handleChange = (conversation: KeFuConversationRespVO) => {
   keFuChatBoxRef.value?.getMessageList(conversation)
 }

From fa0892980d96e02d4dcc8a81e413c959395eb034 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 10 Jul 2024 15:40:37 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91mall=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E5=8A=A0=E8=BD=BD=E5=8E=86=E5=8F=B2=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=97=B6=E9=A1=B5=E9=9D=A2=E4=BF=9D=E6=8C=81=E5=9C=A8?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E6=AD=A3=E5=9C=A8=E6=9F=A5=E7=9C=8B=E7=9A=84?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  |  2 +-
 .../kefu/components/KeFuMessageList.vue       | 59 ++++++++++---------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 1b97188d..e15c18fb 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -73,7 +73,7 @@ import { useEmoji } from './tools/emoji'
 import { formatDate } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 
-defineOptions({ name: 'KeFuConversationBox' })
+defineOptions({ name: 'KeFuConversationList' })
 
 const message = useMessage() // 消息弹窗
 
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 70304751..0581b1fe 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -1,9 +1,7 @@
 <template>
-  <el-container v-if="showChatBox" class="kefu">
+  <el-container v-if="showKeFuMessageList" class="kefu">
     <el-header>
       <div class="kefu-title">{{ conversation.userNickname }}</div>
-    </el-header>
-    <el-main class="kefu-content overflow-visible">
       <!-- 加载历史消息 -->
       <div
         v-show="loadingMore"
@@ -12,6 +10,8 @@
       >
         加载更多
       </div>
+    </el-header>
+    <el-main class="kefu-content overflow-visible">
       <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
         <div ref="innerRef" class="w-[100%] pb-3px">
           <!-- 消息列表 -->
@@ -119,7 +119,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 
 dayjs.extend(relativeTime)
 
-defineOptions({ name: 'KeFuMessageBox' })
+defineOptions({ name: 'KeFuMessageList' })
 
 const message = ref('') // 消息弹窗
 
@@ -137,17 +137,24 @@ const total = ref(0) // 消息总条数
 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
   }
   const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
   total.value = res.total
-  for (const item of res.list) {
-    if (messageList.value.some((val) => val.id === item.id)) {
-      continue
+  // 情况二：加载最新消息
+  if (queryParams.pageNo === 1) {
+    messageList.value = res.list
+  } else {
+    // 情况三：加载历史消息
+    for (const item of res.list) {
+      if (messageList.value.some((val) => val.id === item.id)) {
+        continue
+      }
+      messageList.value.push(item)
     }
-    messageList.value.push(item)
   }
   await scrollToBottom()
 }
@@ -167,13 +174,13 @@ const refreshMessageList = async () => {
   queryParams.pageNo = 1
   await getMessageList(conversation.value)
   if (loadHistory.value) {
-    // 有下角显示有新消息提示
+    // 右下角显示有新消息提示
     showNewMessageTip.value = true
   }
 }
 
 defineExpose({ getMessageList, refreshMessageList })
-const showChatBox = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
+const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
 
 /** 处理表情选择 */
 const handleEmojiSelect = (item: Emoji) => {
@@ -252,12 +259,15 @@ const handleScroll = async ({ scrollTop }) => {
   loadingMore.value = scrollTop < 20
 }
 const handleOldMessage = async () => {
+  // 记录已有页面高度
+  const oldPageHeight = innerRef.value!.clientHeight
   loadHistory.value = true
   // 加载消息列表
   queryParams.pageNo += 1
   await getMessageList(conversation.value)
   loadingMore.value = false
-  // TODO puhui999: 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
+  // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
+  scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
 }
 
 /**
@@ -283,23 +293,18 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
     line-height: 60px;
   }
 
+  .loadingMore {
+    width: 100%;
+    height: 50px;
+    background-color: #eee;
+    color: #666;
+    text-align: center;
+    line-height: 50px;
+    transform: translateY(-100%);
+    transition: transform 0.3s ease-in-out;
+  }
+
   &-content {
-    position: relative;
-
-    .loadingMore {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 50px;
-      background-color: #eee;
-      color: #666;
-      text-align: center;
-      line-height: 50px;
-      transform: translateY(-100%);
-      transition: transform 0.3s ease-in-out;
-    }
-
     .newMessageTip {
       position: absolute;
       bottom: 35px;

From 993d070560c8386e5e103f09fa9982c6596ff17d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 10 Jul 2024 15:53:48 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91mall=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E8=A7=A6=E9=A1=B6=E8=87=AA=E5=8A=A8=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E4=B8=8B=E4=B8=80=E9=A1=B5=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuMessageList.vue       | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 0581b1fe..13e2b94e 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -2,14 +2,6 @@
   <el-container v-if="showKeFuMessageList" class="kefu">
     <el-header>
       <div class="kefu-title">{{ conversation.userNickname }}</div>
-      <!-- 加载历史消息 -->
-      <div
-        v-show="loadingMore"
-        class="loadingMore flex justify-center items-center cursor-pointer"
-        @click="handleOldMessage"
-      >
-        加载更多
-      </div>
     </el-header>
     <el-main class="kefu-content overflow-visible">
       <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
@@ -248,15 +240,16 @@ const handleToNewMessage = async () => {
 }
 
 /** 加载历史消息 */
-const loadingMore = ref(false) // 滚动到顶部加载更多
 const loadHistory = ref(false) // 加载历史消息
 const handleScroll = async ({ scrollTop }) => {
   const messageTotal = messageList.value.length
   if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) {
     return
   }
-  // 距顶 20 加载下一页数据
-  loadingMore.value = scrollTop < 20
+  // 触顶自动加载下一页数据
+  if (scrollTop === 0) {
+    await handleOldMessage()
+  }
 }
 const handleOldMessage = async () => {
   // 记录已有页面高度
@@ -265,7 +258,6 @@ const handleOldMessage = async () => {
   // 加载消息列表
   queryParams.pageNo += 1
   await getMessageList(conversation.value)
-  loadingMore.value = false
   // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
 }
@@ -293,17 +285,6 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
     line-height: 60px;
   }
 
-  .loadingMore {
-    width: 100%;
-    height: 50px;
-    background-color: #eee;
-    color: #666;
-    text-align: center;
-    line-height: 50px;
-    transform: translateY(-100%);
-    transition: transform 0.3s ease-in-out;
-  }
-
   &-content {
     .newMessageTip {
       position: absolute;

From b6cd12a300ab35879ceffb68672153291d671ff8 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 10 Jul 2024 17:05:46 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91mall=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E4=BC=9A=E8=AF=9D=E7=BD=AE=E9=A1=B6=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=EF=BC=8C=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E6=8A=98=E5=8F=A0=E8=8F=9C=E5=8D=95=E4=BA=A7=E7=94=9F?=
 =?UTF-8?q?=E7=9A=84=E4=BD=8D=E7=BD=AE=E5=81=8F=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuConversationList.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index e15c18fb..2a651672 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -72,18 +72,22 @@ import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotio
 import { useEmoji } from './tools/emoji'
 import { formatDate } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
+import { useAppStore } from '@/store/modules/app'
 
 defineOptions({ name: 'KeFuConversationList' })
 
 const message = useMessage() // 消息弹窗
-
+const appStore = useAppStore()
 const { replaceEmoji } = useEmoji()
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const activeConversationId = ref(-1) // 选中的会话
+const collapse = computed(() => appStore.getCollapse) // 折叠菜单
 
 /** 加载会话列表 */
 const getConversationList = async () => {
-  conversationList.value = await KeFuConversationApi.getConversationList()
+  const list = await KeFuConversationApi.getConversationList()
+  list.sort((a: KeFuConversationRespVO, _) => (a.adminPinned ? -1 : 1))
+  conversationList.value = list
 }
 defineExpose({ getConversationList })
 
@@ -132,7 +136,7 @@ const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
   showRightMenu.value = true
   rightMenuStyle.value = {
     top: mouseEvent.clientY - 110 + 'px',
-    left: mouseEvent.clientX - 80 + 'px'
+    left: collapse.value ? mouseEvent.clientX - 80 + 'px' : mouseEvent.clientX - 210 + 'px'
   }
 }
 /** 关闭右键菜单 */

From 79b6b877218950a0c345145888449e516e56b1f6 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 10 Jul 2024 18:09:04 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E3=80=90=E4=BF=AE=E5=A4=8D=E3=80=91mall=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E4=BC=9A=E8=AF=9D=E6=B6=88=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=AB=98=E5=BA=A6=E4=B8=8D=E4=B8=80=E8=87=B4=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E6=BB=9A=E5=8A=A8=E5=8A=9F=E8=83=BD=E7=B2=BE?=
 =?UTF-8?q?=E5=BA=A6=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuMessageList.vue       | 39 +++++++++++++------
 src/views/mall/promotion/kefu/index.vue       |  3 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 13e2b94e..ff48f08c 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -5,7 +5,7 @@
     </el-header>
     <el-main class="kefu-content overflow-visible">
       <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
-        <div ref="innerRef" class="w-[100%] pb-3px">
+        <div v-if="refreshContent" ref="innerRef" class="w-[100%] pb-3px">
           <!-- 消息列表 -->
           <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
             <div class="flex justify-center items-center mb-20px">
@@ -121,17 +121,25 @@ const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) /
 const showNewMessageTip = ref(false) // 显示有新消息提示
 const queryParams = reactive({
   pageNo: 1,
+  pageSize: 10,
   conversationId: 0
 })
 const total = ref(0) // 消息总条数
-
+const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
 /** 获得消息列表 */
-const getMessageList = async (val: KeFuConversationRespVO) => {
+const getMessageList = async (val: KeFuConversationRespVO, conversationChange: boolean) => {
+  // 会话切换,重置相关参数
+  if (conversationChange) {
+    queryParams.pageNo = 1
+    messageList.value = []
+    total.value = 0
+    loadHistory.value = false
+    refreshContent.value = false
+  }
   conversation.value = val
   queryParams.conversationId = val.id
   // 情况一：已经加载完所有消息
-  const messageTotal = messageList.value.length
-  if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) {
+  if (skipGetMessageList.value) {
     return
   }
   const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
@@ -148,6 +156,7 @@ const getMessageList = async (val: KeFuConversationRespVO) => {
       messageList.value.push(item)
     }
   }
+  refreshContent.value = true
   await scrollToBottom()
 }
 
@@ -164,7 +173,7 @@ const refreshMessageList = async () => {
   }
 
   queryParams.pageNo = 1
-  await getMessageList(conversation.value)
+  await getMessageList(conversation.value, false)
   if (loadHistory.value) {
     // 右下角显示有新消息提示
     showNewMessageTip.value = true
@@ -173,6 +182,10 @@ const refreshMessageList = async () => {
 
 defineExpose({ getMessageList, refreshMessageList })
 const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+}) // 跳过消息获取
 
 /** 处理表情选择 */
 const handleEmojiSelect = (item: Emoji) => {
@@ -212,7 +225,7 @@ const sendMessage = async (msg: any) => {
   await KeFuMessageApi.sendKeFuMessage(msg)
   message.value = ''
   // 加载消息列表
-  await getMessageList(conversation.value)
+  await getMessageList(conversation.value, false)
   // 滚动到最新消息处
   await scrollToBottom()
 }
@@ -242,8 +255,7 @@ const handleToNewMessage = async () => {
 /** 加载历史消息 */
 const loadHistory = ref(false) // 加载历史消息
 const handleScroll = async ({ scrollTop }) => {
-  const messageTotal = messageList.value.length
-  if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) {
+  if (skipGetMessageList.value) {
     return
   }
   // 触顶自动加载下一页数据
@@ -253,11 +265,14 @@ const handleScroll = async ({ scrollTop }) => {
 }
 const handleOldMessage = async () => {
   // 记录已有页面高度
-  const oldPageHeight = innerRef.value!.clientHeight
+  const oldPageHeight = innerRef.value?.clientHeight
+  if (!oldPageHeight) {
+    return
+  }
   loadHistory.value = true
   // 加载消息列表
   queryParams.pageNo += 1
-  await getMessageList(conversation.value)
+  await getMessageList(conversation.value, false)
   // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
 }
@@ -286,6 +301,8 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
   }
 
   &-content {
+    position: relative;
+
     .newMessageTip {
       position: absolute;
       bottom: 35px;
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 92e0e791..6fb87c8b 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -75,7 +75,6 @@ watchEffect(() => {
   }
 })
 // ======================= WebSocket end =======================
-
 /** 加载会话列表 */
 const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
 const getConversationList = () => {
@@ -85,7 +84,7 @@ const getConversationList = () => {
 /** 加载指定会话的消息列表 */
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
 const handleChange = (conversation: KeFuConversationRespVO) => {
-  keFuChatBoxRef.value?.getMessageList(conversation)
+  keFuChatBoxRef.value?.getMessageList(conversation, true)
 }
 
 /** 初始化 */

From 60d4175396f2936f179f161812239d87378e73bb Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 10 Jul 2024 21:02:10 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E3=80=90=E4=BF=AE=E5=A4=8D=E3=80=91mall=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E4=BC=9A=E8=AF=9D=E6=B6=88=E6=81=AF=E5=B0=91?=
 =?UTF-8?q?=E6=97=B6=E8=A7=A6=E9=A1=B6=E4=B8=8D=E5=8A=A0=E8=BD=BDbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/kefu/components/KeFuMessageList.vue    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index ff48f08c..a43ab0ec 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -138,17 +138,13 @@ const getMessageList = async (val: KeFuConversationRespVO, conversationChange: b
   }
   conversation.value = val
   queryParams.conversationId = val.id
-  // 情况一：已经加载完所有消息
-  if (skipGetMessageList.value) {
-    return
-  }
   const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
   total.value = res.total
-  // 情况二：加载最新消息
+  // 情况一：加载最新消息
   if (queryParams.pageNo === 1) {
     messageList.value = res.list
   } else {
-    // 情况三：加载历史消息
+    // 情况二：加载历史消息
     for (const item of res.list) {
       if (messageList.value.some((val) => val.id === item.id)) {
         continue