feat: 消息置底

src/views/remote/videoCall/videoChat.vue

@@ -13,48 +13,42 @@
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon :size="16" icon="user-group"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length
-                        }} 人</span>
+                    <span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length }} 人</span>
                 </div>
             </a-col>
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon :size="16" icon="mic"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">{{
-                            webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启'
-                        }}</span>
+                    <span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启' }}</span>
                 </div>
             </a-col>
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon :size="16" icon="camera"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">{{
-                            webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启'
-                        }}</span>
+                    <span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启' }}</span>
                 </div>
             </a-col>
         </a-row>
-        <div class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0">
-            <chat-details v-for="q in mapChatMessageQueue" :key="q.record_id" :data="q.data" :is-self="q.isSelf"
-                          :type="q.type"></chat-details>
+        <div class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0" ref="scrollContainer">
+            <chat-details v-for="q in mapChatMessageQueue" :key="q.record_id" :data="q.data" :is-self="q.isSelf" :type="q.type"></chat-details>
         </div>
         <div class="px-4 py-2">
             <a-space size="medium">
-                <a-upload :custom-request="option => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*">
+                <a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*">
                     <template #upload-button>
                         <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
                             <global-icon :size="15" icon="image"></global-icon>
                         </div>
                     </template>
                 </a-upload>
-                <a-upload :custom-request="option => uploadMuFile(option, 'file')" :show-file-list="false" accept=".pdf">
+                <a-upload :custom-request="(option) => uploadMuFile(option, 'file')" :show-file-list="false" accept=".pdf">
                     <template #upload-button>
                         <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
                             <global-icon :size="15" icon="pdf"></global-icon>
                         </div>
                     </template>
                 </a-upload>
-                <a-upload :custom-request="option => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*">
+                <a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*">
                     <template #upload-button>
                         <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
                             <global-icon :size="15" icon="video"></global-icon>
@@ -62,8 +56,7 @@
                     </template>
                 </a-upload>
             </a-space>
-            <a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入"
-                        @keydown.enter="sendMessageText" />
+            <a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入" @keydown.enter="sendMessageText" />
         </div>
     </div>
 </template>
@@ -124,12 +117,12 @@ const uploadMuFile = (option: any, type: string) => {
             }
         })
         .catch((error) => {
-            console.log('出现错误', error);
+            console.log('出现错误', error)
             onError(error)
         }) as any
 }
-const mapChatMessageQueue = computed(function() {
-    return chatChannelState.value.messageQueue.map(function(a: any) {
+const mapChatMessageQueue = computed(function () {
+    return chatChannelState.value.messageQueue.map(function (a: any) {
         return {
             isSelf: a.uid === userStates.value.currentUserId,
             type: a.type,
@@ -144,6 +137,21 @@ const mapChatMessageQueue = computed(function() {
         }
     })
 })
+
+//消息置底
+const scrollContainer = ref()
+const scrollToBottom = () => {
+    if (scrollContainer.value) {
+        scrollContainer.value.scrollTop = scrollContainer.value?.scrollHeight
+    }
+}
+watch(
+    mapChatMessageQueue,
+    () => {
+        scrollToBottom()
+    },
+    { deep: true }
+)
 </script>
 <style lang="less" scoped>
 .chat-list {