From e4ae3445f7aba9bd0fe5ef3ab551e9920a5a328e Mon Sep 17 00:00:00 2001
From: liumangmang <a362165265@qq.com>
Date: Fri, 6 Mar 2026 15:06:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(room):=20=E6=96=B0=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/RoomView.vue | 43 +++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/RoomView.vue b/frontend/src/views/RoomView.vue
index 506e29c..6e071d3 100644
--- a/frontend/src/views/RoomView.vue
+++ b/frontend/src/views/RoomView.vue
@@ -28,7 +28,11 @@
 
     <!-- 右侧消息与输入区域 -->
     <section class="flex-1 flex flex-col bg-slate-100/80 min-w-0">
-      <div ref="messageListRef" class="flex-1 overflow-auto px-4 sm:px-6 py-4">
+      <div
+        ref="messageListRef"
+        class="flex-1 overflow-auto px-4 sm:px-6 py-4"
+        @scroll="handleMessageListScroll"
+      >
         <div class="max-w-2xl mx-auto space-y-4">
           <template v-for="(msg, index) in wsStore.roomMessages" :key="messageKey(msg, index)">
             <SystemMessage
@@ -92,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue';
+import { computed, ref, watch, onMounted, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import BaseButton from '@/components/ui/BaseButton.vue';
 import RoomPanel from '@/components/RoomPanel.vue';
@@ -119,10 +123,34 @@ const joinToken = computed(() => {
 });
 
 const messageListRef = ref<HTMLElement | null>(null);
+const shouldAutoScroll = ref(true);
 const wsStore = useWsStore();
 const downloadToast = ref('');
 let downloadToastTimer: ReturnType<typeof setTimeout> | null = null;
 
+function isNearBottom(element: HTMLElement): boolean {
+  const threshold = 72;
+  return element.scrollHeight - element.scrollTop - element.clientHeight <= threshold;
+}
+
+function scrollToBottom(behavior: ScrollBehavior = 'smooth'): void {
+  const container = messageListRef.value;
+  if (!container) return;
+  container.scrollTo({ top: container.scrollHeight, behavior });
+}
+
+function handleMessageListScroll(): void {
+  const container = messageListRef.value;
+  if (!container) return;
+  shouldAutoScroll.value = isNearBottom(container);
+}
+
+function isLastMessageMine(): boolean {
+  const last = wsStore.roomMessages[wsStore.roomMessages.length - 1];
+  if (!last) return false;
+  return !!last.senderId && last.senderId === wsStore.myUserId;
+}
+
 const transferStats = computed(() => {
   let sendingCount = 0;
   let receivingCount = 0;
@@ -160,8 +188,19 @@ function showDownloadToast(message: string) {
 onMounted(() => {
   wsStore.init(API_BASE, '/ws');
   wsStore.connect();
+  void nextTick(() => scrollToBottom('auto'));
 });
 
+watch(
+  () => wsStore.roomMessages.length,
+  async (nextLen, prevLen) => {
+    if (nextLen <= prevLen) return;
+    if (!shouldAutoScroll.value && !isLastMessageMine()) return;
+    await nextTick();
+    scrollToBottom();
+  },
+);
+
 watch(
   () => wsStore.status,
   (status) => {