feat: update

frontend/wechat/src/views/ArticleList.vue

@@ -1,28 +1,51 @@
 <script setup>
+import { postApi } from '@/api/postApi'
 import ArticleListItem from '@/components/ArticleListItem.vue'
-import { useArticleStore } from '@/stores/article'
 import { useIntersectionObserver } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const store = useArticleStore()
 const searchInput = ref('')
 const loadingTrigger = ref(null)
+const articles = ref([])
+const loading = ref(false)
+const hasMore = ref(true)
+const currentPage = ref(1)
+const limit = 10
+
+const fetchArticles = async () => {
+    if (loading.value) return
+    loading.value = true
+    try {
+        const { data } = await postApi.list({
+            page: currentPage.value,
+            limit,
+            keyword: searchInput.value
+        })
+        if (data.items?.length === 0) {
+            hasMore.value = false
+        } else {
+            articles.value.push(...data.items)
+            currentPage.value += 1
+        }
+    } catch (error) {
+        console.error('Failed to fetch articles:', error)
+    } finally {
+        loading.value = false
+    }
+}
 
-// 优化 Intersection Observer 配置
 useIntersectionObserver(
     loadingTrigger,
     ([{ isIntersecting }]) => {
-        console.log('Intersection state:', { isIntersecting, loading: store.loading, hasMore: store.hasMore })
-        if (isIntersecting && !store.loading && store.hasMore) {
-            console.log('Fetching more articles...')
-            store.fetchArticles()
+        if (isIntersecting && !loading.value && hasMore.value) {
+            fetchArticles()
         }
     },
     {
         threshold: 0,
-        rootMargin: '100px' // 提前 100px 触发加载
+        rootMargin: '100px'
     }
 )
 
@@ -31,7 +54,10 @@ const showArticle = (id) => {
 }
 
 const handleSearch = () => {
-    store.setSearchQuery(searchInput.value)
+    articles.value = []
+    currentPage.value = 1
+    hasMore.value = true
+    fetchArticles()
 }
 
 const handleKeyup = (e) => {
@@ -41,9 +67,7 @@ const handleKeyup = (e) => {
 }
 
 onMounted(() => {
-    if (store.articles.length === 0) {
-        store.fetchArticles()
-    }
+    fetchArticles()
 })
 </script>
 
@@ -58,16 +82,15 @@ onMounted(() => {
 
         <div class="flex-1 overflow-y-auto">
             <div class="p-4">
-                <div v-if="store.articles.length === 0 && !store.loading" class="text-center text-gray-500 py-8">
+                <div v-if="articles.length === 0 && !loading" class="text-center text-gray-500 py-8">
                     暂无文章
                 </div>
 
-                <ArticleListItem v-for="article in store.articles" :key="article.id" :article="article"
+                <ArticleListItem v-for="article in articles" :key="article.id" :article="article"
                     @click="showArticle(article.id)" class="mb-4" />
 
-                <!-- 优化加载触发器位置和显示 -->
-                <div ref="loadingTrigger" class="py-4 text-center" v-show="store.hasMore || store.loading">
-                    <div v-if="store.loading"
+                <div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
+                    <div v-if="loading"
                         class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600 mx-auto">
                     </div>
                     <div v-else class="h-8">
@@ -75,7 +98,7 @@ onMounted(() => {
                     </div>
                 </div>
 
-                <div v-if="!store.hasMore && store.articles.length > 0" class="text-center text-gray-500 py-4">
+                <div v-if="!hasMore && articles.length > 0" class="text-center text-gray-500 py-4">
                     没有更多文章了
                 </div>
             </div>