优化ForwardRecord.vue中的消息文本背景色，新增UserCardModal.vue的离开事件处理逻辑，调整useTalkRecord.ts中的数据加载日志，更新SkipBottom.vue中的滚动到底部逻辑，增强用户体验。

src/components/talk/ForwardRecord.vue

@@ -168,7 +168,9 @@ const onContextMenu = (e:any,item: ITalkRecord) => {
   display: flex;
   margin-bottom: 10px;
   padding: 24px 42px;
-
+  .im-message-text{
+    background-color: #fff;
+  }
   .left-box {
     width: 38px;
     display: flex;

src/components/user/UserCardModal.vue

@@ -170,10 +170,25 @@ const onToTalk = () => {
 const onAfterEnter = () => {
   onLoadData()
 }
+const onAfterLeave = () => {
+  // loading.value = true
+  userInfo.value = {
+  id: 0,
+  avatar: '',
+  gender: 0,
+  mobile: '',
+  motto: '',
+  nickname: '',
+  remark: '',
+  email: '',
+  status: 1,
+  text: ''
+}
+}
 </script>
 
 <template>
-  <x-n-modal content-style="padding:0;" :closable="false" class="w-311px min-h-445px" style="border-radius: 10px;overflow:hidden;" :show="show"  :on-after-enter="onAfterEnter">
+  <x-n-modal content-style="padding:0;" :closable="false" class="w-311px min-h-445px" style="border-radius: 10px;overflow:hidden;" :show="show" :on-after-leave="onAfterLeave" :on-after-enter="onAfterEnter">
     <div class="section relative px-7px pt-82px pb-20px">
       <div class="absolute top-9px right-7px pointer z-10" @click="emit('update:show', false)">
         <img class="w-20px h-20px" src="@/assets/image/close.png" alt="">
@@ -181,8 +196,8 @@ const onAfterEnter = () => {
       
       <template v-if="loading">
         <div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
-          <div class="w-59px h-59px rounded-8px mr-12px overflow-hidden">
+          <div class="w-59px h-59px rounded-8px mr-12px">
-            <n-skeleton circle height="59px" width="59px" />
+            <n-skeleton  height="59px" width="59px" />
           </div>
           <div class="w-full">
             <n-skeleton text style="width: 80%; margin-bottom: 5px;" />

src/hooks/useTalkRecord.ts

@@ -79,6 +79,7 @@ export const useTalkRecord = (uid: number) => {
     loadConfig.status = 0
 
     let scrollHeight = 0
+    console.log('加载数据列表load')
     const el = document.getElementById('imChatPanel')
     if (el) {
       scrollHeight = el.scrollHeight
@@ -88,7 +89,6 @@ export const useTalkRecord = (uid: number) => {
     if (code != 200) {
       return (loadConfig.status = 1)
     }
-
     // 防止对话切换过快，数据渲染错误
     if (
       request.talk_type != loadConfig.talk_type ||
@@ -118,9 +118,13 @@ export const useTalkRecord = (uid: number) => {
           el.scrollTop = el.scrollHeight
           
           setTimeout(() => {
+            console.log('el.scrollHeight',el.scrollHeight)
+            console.log('request.cursor == 0')
             el.scrollTop = el.scrollHeight + 1000
-          }, 50)
+
+          }, 500)
         } else {
+          console.log('request.cursor !== 0')
           el.scrollTop = el.scrollHeight - scrollHeight
         }
       }

src/views/message/inner/panel/SkipBottom.vue

@@ -7,6 +7,7 @@ const dialogueStore = useDialogueStore()
 
 // 聊天版本滚动到底部
 const onSkipBottom = () => {
+  console.log('onSkipBottom')
   let el = document.getElementById('imChatPanel')
   if (el) {
     el.scrollTo({