优化消息对话框和消息视图组件：增加消息对话框和滚动容器的引用，调整滚动逻辑以确保更流畅的用户体验，更新样式以改善消息显示效果

src/layouts/components/ShortcutBar.vue

@@ -46,8 +46,11 @@ const user_message = ref('')
 // 发送按钮是否可用
 const sendButtonDisabled = ref(false)
 
-// 聊天容器
+// 消息对话框引用
-const chatContainer = ref<HTMLElement>()
+const messageDialogRef = ref<any>(null)
+
+// 滚动容器引用
+const messageContentRef = ref<any>()
 
 // 定义捷径列表
 const shortcuts = [
@@ -102,11 +105,17 @@ function openDialog(dialogRef: any) {
 
 // 滚动到底部
 function scrollMessageToEnd() {
-  nextTick(() => {
+  // 使用更长的延迟确保DOM已更新
-    if (chatContainer.value) {
+  setTimeout(() => {
-      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+    try {
+      const cardText = document.querySelector('.v-dialog .v-card-text')
+      if (cardText) {
+        cardText.scrollTop = cardText.scrollHeight
       }
-  })
+    } catch (error) {
+      console.error(error)
+    }
+  }, 500) // 增加延迟时间
 }
 
 // 拼接全部日志url

src/views/system/MessageView.vue

@@ -39,7 +39,9 @@ function startSSEMessager() {
       const object = JSON.parse(message)
       if (compareTime(object.date, lastTime.value) <= 0) return
       messages.value.push(object)
+      nextTick(() => {
         emit('scroll')
+      })
     }
   })
 }
@@ -95,6 +97,13 @@ function compareTime(time1: string, time2: string) {
   return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
 }
 
+onMounted(() => {
+  // 组件挂载后触发一次滚动事件
+  nextTick(() => {
+    emit('scroll')
+  })
+})
+
 onBeforeUnmount(() => {
   if (eventSource) eventSource.close()
 })
@@ -105,7 +114,7 @@ onBeforeUnmount(() => {
     :mode="!isLoaded ? 'intersect' : 'manual'"
     side="start"
     :items="messages"
-    class="overflow-visible"
+    class="overflow-visible message-scroll h-full"
     @load="loadMessages"
     :load-more-text="t('message.loadMore') + ' ...'"
   >
@@ -127,3 +136,9 @@ onBeforeUnmount(() => {
     </div>
   </VInfiniteScroll>
 </template>
+
+<style scoped>
+.message-scroll {
+  overflow-y: auto !important;
+}
+</style>