Fix: 修复会话列表初次动画错误

KiWi233333 · Jan 20, 2025 · 823c596 · 823c596
1 parent cb0e13d
commit 823c596
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 64 deletions.
diff --git a/components/Chat/ContactList.vue b/components/Chat/ContactList.vue
@@ -313,14 +313,14 @@ onBeforeUnmount(() => {
     <!-- 会话列表 -->
     <el-scrollbar wrap-class="w-full h-full" class="contact-list">
       <el-radio-group v-model="theContactId" class="relative w-full">
-        <div ref="autoAnimateRef" class="h-full">
-          <ListAutoIncre
-            :immediate="true"
-            :auto-stop="false"
-            loading-class="op-0"
-            :no-more="pageInfo.isLast"
-            @load="loadData(dto)"
-          >
+        <ListAutoIncre
+          :immediate="true"
+          :auto-stop="false"
+          loading-class="op-0"
+          :no-more="pageInfo.isLast"
+          @load="loadData(dto)"
+        >
+          <div ref="autoAnimateRef" class="h-full">
             <el-radio
               v-for="room in chat.getContactList"
               :key="room.roomId"
@@ -335,7 +335,7 @@ onBeforeUnmount(() => {
             >
               <div
                 :class="{ 'shadow-inset': room.roomId === theContactId }"
-                class="flex gap-4 truncate px-4 py-3 transition-200 transition-shadow sm:(w-full p-4 px-5) hover:bg-[#7c7c7c1a] text-color"
+                class="flex gap-3 truncate px-4 py-3 transition-200 transition-shadow sm:(w-full p-4 px-5) hover:bg-[#7c7c7c1a] text-color"
                 @contextmenu.stop="onContextMenu($event, room)"
               >
                 <el-badge :hidden="!room.unreadCount" :max="99" :value="room.unreadCount" class="h-2.4rem w-2.4rem flex-shrink-0">
@@ -346,7 +346,7 @@ onBeforeUnmount(() => {
                     <p truncate>
                       {{ room.name }}
                     </p>
-                    <span ml-a mt-a hidden w-7em flex-shrink-0 truncate text-right text-0.8em sm:block text-mini-50>
+                    <span ml-a mt-a w-6em flex-shrink-0 truncate text-right text-mini>
                       {{ getTime(room.activeTime) }}
                     </span>
                   </div>
@@ -356,15 +356,15 @@ onBeforeUnmount(() => {
                 </div>
               </div>
             </el-radio>
-            <template #done>
-              <div
-                class="mb-6 w-full text-center text-mini"
-              >
-                暂无更多
-              </div>
-            </template>
-          </ListAutoIncre>
-        </div>
+          </div>
+        </ListAutoIncre>
+        <template #done>
+          <div
+            class="mb-6 w-full text-center text-mini"
+          >
+            暂无更多
+          </div>
+        </template>
       </el-radio-group>
     </el-scrollbar>
     <!-- 新建群聊 -->

diff --git a/components/Chat/MessageList.vue b/components/Chat/MessageList.vue
@@ -126,40 +126,10 @@ watch(() => chat.theContact.roomId, (val, oldVal) => {
   immediate: true,
 });
 
-// /**
-//  * 新消息
-//  */
-// watch(() => ws.wsMsgList.newMsg.length, () => {
-//   if (ws.wsMsgList.newMsg)
-//   resolveNewMsg([data]);
-
-// }, {
-//   immediate: false,
-// });
-// /**
-//  * 撤回消息
-//  */
-// watch(() => ws.wsMsgList.recallMsg.length, () => {
-//   // 2、撤回消息
-//   resolveRevokeMsg(ws.wsMsgList.recallMsg);
-// }, {
-//   immediate: false,
-// });
-// /**
-//  * 删除消息
-//  */
-// watch(() => ws.wsMsgList.deleteMsg.length, () => {
-//   // 3、删除消息
-//   resolveDeleteMsg(ws.wsMsgList.deleteMsg);
-// }, {
-//   immediate: false,
-// });
-
 // 监听消息
 onMounted(() => {
   // 1、新消息 type=1
   mitter.on(MittEventType.MESSAGE, (data: ChatMessageVO) => {
-    console.log("new message", data);
     resolveNewMsg([data]);
   });
   // 2、撤回消息 type=2
@@ -184,7 +154,7 @@ onBeforeMount(() => {
   chat.setReadList(chat.theContact.roomId);
 });
 /**
- * 新消息处理
+ * 1. 新消息处理
  * @param list 原始列表
  */
 async function resolveNewMsg(list: ChatMessageVO[]) {
@@ -219,17 +189,6 @@ async function resolveNewMsg(list: ChatMessageVO[]) {
   ws.wsMsgList.newMsg.splice(0);
 }
 
-// 处理rtc消息
-function handleRTCMsg(msg: ChatMessageVO) {
-  const rtcMsg = msg.message.body as RtcLiteBodyMsgVO;
-  // 更新滚动位置
-  if (msg.message.roomId === chat.theContact.roomId && rtcMsg.senderId === user.userInfo.id) {
-    nextTick(() => {
-      chat.scrollBottom(true);
-    });
-  }
-}
-
 // 计算消息内容
 function getBody(msg: ChatMessageVO) {
   if (msg.message.type === MessageType.SOUND) {
@@ -270,8 +229,20 @@ function getSecondsText(second?: number) {
   }
 }
 
+// 2. 处理rtc消息
+function handleRTCMsg(msg: ChatMessageVO) {
+  const rtcMsg = msg.message.body as RtcLiteBodyMsgVO;
+  // 更新滚动位置
+  if (msg.message.roomId === chat.theContact.roomId && rtcMsg.senderId === user.userInfo.id) {
+    nextTick(() => {
+      chat.scrollBottom(true);
+    });
+  }
+}
+
+
 /**
- * 撤回消息处理
+ * 3. 撤回消息处理
  * @param list 列表
  */
 function resolveRevokeMsg(list: WSMsgRecall[]) {
@@ -306,7 +277,7 @@ function resolveRevokeMsg(list: WSMsgRecall[]) {
 }
 
 /**
- * 删除消息处理
+ * 4. 删除消息处理
  * @param list 列表
  */
 function resolveDeleteMsg(list: WSMsgDelete[]) {

diff --git a/composables/store/useUserStore.ts b/composables/store/useUserStore.ts
@@ -162,7 +162,7 @@ export const useUserStore = defineStore(
         useChatStore().resetStore();
         useWs().resetStore();
         await nextTick();
-        // await navigateTo("/login");
+        await navigateTo("/login");
       }
     }
     /**