From 3e4b94f1f211f6694bfc0b566f94f8a7d0b0c56b Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 5 Aug 2025 18:24:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E7=94=A8=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/loadMore.js         | 31 ++++++++++++++++++++++++++
 frontend/src/views/HomePageView.vue    | 27 +++++-----------------
 frontend/src/views/MessagePageView.vue |  2 --
 3 files changed, 36 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/utils/loadMore.js

diff --git a/frontend/src/utils/loadMore.js b/frontend/src/utils/loadMore.js
new file mode 100644
index 000000000..c4ffb9cb1
--- /dev/null
+++ b/frontend/src/utils/loadMore.js
@@ -0,0 +1,31 @@
+import { ref, onMounted, onUnmounted, onActivated, nextTick } from 'vue'
+
+export function useScrollLoadMore(loadMore, offset = 50) {
+  const savedScrollTop = ref(0)
+
+  const handleScroll = () => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollHeight = document.documentElement.scrollHeight
+    const windowHeight = window.innerHeight
+    savedScrollTop.value = scrollTop
+    if (scrollHeight - (scrollTop + windowHeight) <= offset) {
+      loadMore()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true })
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+
+  onActivated(() => {
+    nextTick(() => {
+      window.scrollTo({ top: savedScrollTop.value })
+    })
+  })
+
+  return { savedScrollTop }
+}
diff --git a/frontend/src/views/HomePageView.vue b/frontend/src/views/HomePageView.vue
index 4813b02a4..bbae20c0b 100644
--- a/frontend/src/views/HomePageView.vue
+++ b/frontend/src/views/HomePageView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="homePage" class="home-page" @scroll="handleScroll">
+  <div class="home-page">
     <div v-if="!isMobile" class="search-container">
       <div class="search-title">一切可能，从此刻启航</div>
       <div class="search-subtitle">愿你在此遇见灵感与共鸣。若有疑惑，欢迎发问，亦可在知识的海洋中搜寻答案。</div>
@@ -107,8 +107,9 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, onActivated, nextTick } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { useScrollLoadMore } from '../utils/loadMore'
 import { stripMarkdown } from '../utils/markdown'
 import { API_BASE_URL } from '../main'
 import { getToken } from '../utils/auth'
@@ -134,8 +135,6 @@ export default {
   },
   setup() {
     const route = useRoute()
-    const homePage = ref(null)
-    const savedScrollTop = ref(0)
     const selectedCategory = ref('')
     if (route.query.category) {
       const c = decodeURIComponent(route.query.category)
@@ -167,14 +166,6 @@ export default {
     const pageSize = 10
     const allLoaded = ref(false)
 
-    onActivated(() => {
-      nextTick(() => {
-        if (homePage.value) {
-          homePage.value.scrollTop = savedScrollTop.value
-        }
-      })
-    })
-
     // Backend now returns comment counts directly
 
     const loadOptions = async () => {
@@ -366,13 +357,7 @@ export default {
         }
     }
 
-    const handleScroll = (e) => {
-      const el = e.target
-      savedScrollTop.value = el.scrollTop
-      if (el.scrollHeight - el.scrollTop <= el.clientHeight + 50) {
-        fetchContent()
-      }
-    }
+    useScrollLoadMore(fetchContent)
 
     onMounted(async () => {
       fetchContent()
@@ -389,7 +374,7 @@ export default {
 
     const sanitizeDescription = (text) => stripMarkdown(text)
 
-    return { topics, selectedTopic, articles, sanitizeDescription, isLoadingPosts, handleScroll, selectedCategory, selectedTags, tagOptions, categoryOptions, isMobile, homePage }
+    return { topics, selectedTopic, articles, sanitizeDescription, isLoadingPosts, selectedCategory, selectedTags, tagOptions, categoryOptions, isMobile }
   }
 }
 </script>
@@ -397,11 +382,9 @@ export default {
 <style scoped>
 .home-page {
   background-color: var(--background-color);
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow-y: auto;
   container-type: inline-size;
   container-name: home-page;
 }
diff --git a/frontend/src/views/MessagePageView.vue b/frontend/src/views/MessagePageView.vue
index c11d82efa..03b79d59f 100644
--- a/frontend/src/views/MessagePageView.vue
+++ b/frontend/src/views/MessagePageView.vue
@@ -628,8 +628,6 @@ export default {
 
 .message-page {
   background-color: var(--background-color);
-  height: 100%;
-  overflow-y: auto;
 }
 
 .message-page-header {