fix: scroll message list container to latest

src/views/system/MessageView.vue

@@ -9,15 +9,6 @@ import { useBackgroundOptimization } from '@/composables/useBackgroundOptimizati
 const { t } = useI18n()
 const { useSSE } = useBackgroundOptimization()
 
-type ScrollPayload = {
-  force?: boolean
-}
-
-// 定义事件
-const emit = defineEmits<{
-  (e: 'scroll', payload?: ScrollPayload): void
-}>()
-
 // 消息列表
 const messages = ref<Message[]>([])
 // 当前页数据
@@ -39,6 +30,18 @@ const page = ref(1)
 // 存量消息最新时间
 const lastTime = ref('')
 
+// 消息列表滚动容器
+const messageListRef = ref<any>(null)
+
+// 自动滚动状态
+const shouldAutoScroll = ref(true)
+const isSyncingScroll = ref(false)
+
+const MESSAGE_AUTO_SCROLL_THRESHOLD = 64
+
+let scrollTimer: number | undefined
+let scrollReleaseTimer: number | undefined
+
 // 获取消息时间
 function getMessageTime(message: Message) {
   return message.reg_time || message.date || ''
@@ -72,13 +75,98 @@ function updateLastTime(message: Message) {
   }
 }
 
-// 请求父组件滚动，首屏历史消息需要强制到底，实时消息继续使用智能滚动。
-function requestScrollToEnd(force = false) {
-  nextTick(() => {
-    emit('scroll', { force })
+function getScrollContainer() {
+  const container = messageListRef.value?.$el ?? messageListRef.value
+
+  return container instanceof HTMLElement ? container : null
+}
+
+function isNearBottom(container: HTMLElement) {
+  const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight
+
+  return distanceFromBottom <= Math.max(MESSAGE_AUTO_SCROLL_THRESHOLD, container.clientHeight / 3)
+}
+
+function updateAutoScrollState() {
+  const container = getScrollContainer()
+  if (!container || isSyncingScroll.value) {
+    return
+  }
+
+  shouldAutoScroll.value = isNearBottom(container)
+}
+
+function handleScroll() {
+  updateAutoScrollState()
+}
+
+function bindScrollListener() {
+  const container = getScrollContainer()
+  if (!container) {
+    return
+  }
+
+  container.removeEventListener('scroll', handleScroll)
+  container.addEventListener('scroll', handleScroll, { passive: true })
+  updateAutoScrollState()
+}
+
+function unbindScrollListener() {
+  getScrollContainer()?.removeEventListener('scroll', handleScroll)
+}
+
+function scrollContainerToEnd() {
+  const container = getScrollContainer()
+  if (!container) {
+    return
+  }
+
+  isSyncingScroll.value = true
+  container.scrollTop = container.scrollHeight
+
+  requestAnimationFrame(() => {
+    const latestContainer = getScrollContainer()
+    if (!latestContainer) {
+      isSyncingScroll.value = false
+      return
+    }
+
+    latestContainer.scrollTop = latestContainer.scrollHeight
+    shouldAutoScroll.value = true
+
+    if (scrollReleaseTimer) {
+      window.clearTimeout(scrollReleaseTimer)
+    }
+
+    scrollReleaseTimer = window.setTimeout(() => {
+      isSyncingScroll.value = false
+      updateAutoScrollState()
+    }, 80)
   })
 }
 
+function requestScrollToEnd(force = false) {
+  if (!force && !shouldAutoScroll.value) {
+    return
+  }
+
+  if (scrollTimer) {
+    window.clearTimeout(scrollTimer)
+  }
+
+  scrollTimer = window.setTimeout(() => {
+    nextTick(() => {
+      requestAnimationFrame(() => {
+        scrollContainerToEnd()
+      })
+    })
+  }, force ? 0 : 80)
+}
+
+function forceScrollToEnd() {
+  requestScrollToEnd(true)
+}
+
 // 合并消息到当前列表
 function mergeMessages(items: Message[]) {
   let hasNewMessage = false
@@ -239,16 +327,32 @@ defineExpose({
   pauseSSE,
   resumeSSE,
   refreshLatestMessages,
+  forceScrollToEnd,
 })
 
 onMounted(() => {
-  // 组件挂载后触发一次滚动事件
-  requestScrollToEnd()
+  nextTick(() => {
+    bindScrollListener()
+    requestScrollToEnd(true)
+  })
+})
+
+onBeforeUnmount(() => {
+  if (scrollTimer) {
+    window.clearTimeout(scrollTimer)
+  }
+
+  if (scrollReleaseTimer) {
+    window.clearTimeout(scrollReleaseTimer)
+  }
+
+  unbindScrollListener()
 })
 </script>
 
 <template>
   <VInfiniteScroll
+    ref="messageListRef"
     :mode="!isLoaded ? 'intersect' : 'manual'"
     side="start"
     :items="messages"