feat: 资源库和社区分页加载、网络超时错误提示优化

frontend/src/views/Community.vue

@@ -81,6 +81,11 @@
             </div>
           </div>
         </div>
+        <div v-if="comHasMore && !loading && filteredPosts.length > 0" class="com-load-more">
+          <button type="button" :disabled="comLoadingMore" @click="loadMorePosts">
+            {{ comLoadingMore ? '加载中...' : '加载更多' }}
+          </button>
+        </div>
         <div v-if="!loading && filteredPosts.length === 0" class="empty-state">
           <el-icon :size="48" color="#CBD5E1"><ChatDotRound /></el-icon>
           <p>{{ emptyText }}</p>
@@ -163,6 +168,10 @@ const userStore = useUserStore()
 const loading = ref(false)
 const posts = ref<any[]>([])
 const rankedPosts = ref<any[]>([])
+const comPageSize = 20
+const comCurrentPage = ref(1)
+const comHasMore = ref(false)
+const comLoadingMore = ref(false)
 const hotTags = ['互动课件', '教学动画', '课堂游戏', 'AI工具', '公开课', '单元复习', '实验模拟']
 const postTypes = [{ value: 'discussion', label: '案例' }, { value: 'share', label: '模板' }, { value: 'help', label: '需求' }]
 const scopeOptions = [
@@ -267,23 +276,49 @@ function pathFromContentRef(ref: string) {
   return '/courseware/create'
 }
 
+async function fetchPostPage(page: number): Promise<any[]> {
+  const base = activeScope.value === 'all' ? {} : { scope: activeScope.value }
+  const res: any = await getPosts({ ...base, skip: (page - 1) * comPageSize, limit: comPageSize })
+  return Array.isArray(res) ? res : []
+}
+
 async function loadData() {
   loading.value = true
+  comCurrentPage.value = 1
   try {
-    const params = activeScope.value === 'all' ? undefined : { scope: activeScope.value }
-    const [res, ranking] = await Promise.all([
-      getPosts(params),
+    const [items, ranking] = await Promise.all([
+      fetchPostPage(1),
       getPostRanking({ limit: 5 }),
     ]) as any[]
-    posts.value = Array.isArray(res) ? res : []
+    posts.value = Array.isArray(items) ? items : []
     rankedPosts.value = Array.isArray(ranking) ? ranking : []
+    comHasMore.value = posts.value.length >= comPageSize
   } catch {
     posts.value = []
     rankedPosts.value = []
+    comHasMore.value = false
   }
   finally { loading.value = false }
 }
 
+async function loadMorePosts() {
+  if (comLoadingMore.value || !comHasMore.value) return
+  comLoadingMore.value = true
+  try {
+    const nextPage = comCurrentPage.value + 1
+    const items = await fetchPostPage(nextPage)
+    if (items.length > 0) {
+      posts.value = [...posts.value, ...items]
+      comCurrentPage.value = nextPage
+    }
+    comHasMore.value = items.length >= comPageSize
+  } catch {
+    ElMessage.warning('加载更多失败，请稍后重试')
+  } finally {
+    comLoadingMore.value = false
+  }
+}
+
 function syncScopeFromRoute() {
   const scope = route.query.scope
   const nextScope = scopeOptions.some(item => item.value === scope) ? String(scope) : 'all'
@@ -490,4 +525,8 @@ watch(() => route.query.scope, () => {
   .post-card { grid-template-columns: 1fr; }
   .post-actions { flex-direction: column; }
 }
+.com-load-more { display: flex; justify-content: center; padding: 20px 0; }
+.com-load-more button { border: 1px solid #d1e7dd; border-radius: 22px; background: rgba(255,255,255,.85); color: #00543d; padding: 8px 36px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
+.com-load-more button:hover:not(:disabled) { background: #00543d; color: #fff; }
+.com-load-more button:disabled { opacity: .6; cursor: not-allowed; }
 </style>