♻️ 优化加载逻辑

src/pages/common/PostForum.vue

@@ -61,7 +61,8 @@
   </div>
   <div class="posts-load-more">
     <v-btn class="post-forum-btn" :rounded="true" @click="loadMore()">
-      已加载：{{ posts.length }}，加载更多
+      已加载：{{ posts.length }}，
+      {{ postRaw.isLast ? "已加载完毕" : "加载更多" }}
     </v-btn>
   </div>
   <VpOverlaySearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
@@ -81,6 +82,7 @@ import { createPost } from "@/utils/TGWindow.js";
 
 type SortSelect = { text: string; value: number };
 type SortSelectGame = { gid: number; forum: Array<SortSelect>; text: string };
+type PostRaw = { isLast: boolean; lastId: string; total: number };
 
 const sortOrderList: Array<SortSelect> = [
   { text: "最新回复", value: 1 },
@@ -147,11 +149,10 @@ const curGid = ref<number>(2);
 const curSortType = ref<number>(1);
 const curForum = ref<number>(26);
 const curForumLabel = ref<string>("");
-const lastId = ref<string>("");
-const isLast = ref<boolean>(false);
 const search = ref<string>("");
 const showSearch = ref<boolean>(false);
 const firstLoad = ref<boolean>(false);
+const postRaw = shallowRef<PostRaw>({ isLast: false, lastId: "", total: 0 });
 const posts = shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]);
 
 onMounted(async () => {
@@ -221,9 +222,16 @@ function getSortLabel(value: number): string {
 async function getCurrentPosts(
   loadMore: boolean = false,
 ): Promise<TGApp.Plugins.Mys.Forum.FullData> {
+  const mod20 = postRaw.value.total % 20;
+  const pageSize = mod20 === 0 ? 20 : 20 - mod20;
   if (curSortType.value === 3) {
     if (loadMore) {
-      return await Mys.Painter.getHotForumPostList(curForum.value, curGid.value, lastId.value);
+      return await Mys.Painter.getHotForumPostList(
+        curForum.value,
+        curGid.value,
+        postRaw.value.lastId,
+        pageSize,
+      );
     }
     return await Mys.Painter.getHotForumPostList(curForum.value, curGid.value);
   }
@@ -232,7 +240,8 @@ async function getCurrentPosts(
       curForum.value,
       curGid.value,
       curSortType.value,
-      lastId.value,
+      postRaw.value.lastId,
+      pageSize,
     );
   }
   return await Mys.Painter.getRecentForumPostList(curForum.value, curGid.value, curSortType.value);
@@ -250,14 +259,17 @@ async function freshPostData(): Promise<void> {
   document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
   const postsGet = await getCurrentPosts();
   posts.value = postsGet.list;
-  lastId.value = postsGet.last_id;
+  postRaw.value = {
-  isLast.value = postsGet.is_last;
+    isLast: postsGet.is_last,
+    lastId: postsGet.last_id,
+    total: postsGet.list.length,
+  };
   showSnackbar.success(`刷新成功，共加载 ${postsGet.list.length} 条帖子`);
   await showLoading.end();
 }
 
 async function loadMore(): Promise<void> {
-  if (isLast.value) {
+  if (postRaw.value.isLast) {
     showSnackbar.warn("没有更多帖子了");
     return;
   }
@@ -267,8 +279,11 @@ async function loadMore(): Promise<void> {
     `版块：${curForumLabel.value}，排序：${getSortLabel(curSortType.value)}，数量：${postsGet.list.length}`,
   );
   posts.value = posts.value.concat(postsGet.list);
-  lastId.value = postsGet.last_id;
+  postRaw.value = {
-  isLast.value = postsGet.is_last;
+    isLast: postsGet.is_last,
+    lastId: postsGet.last_id,
+    total: postRaw.value.total + postsGet.list.length,
+  };
   showSnackbar.success(`加载成功，共加载 ${postsGet.list.length} 条帖子`);
   await showLoading.end();
 }

src/pages/common/PostNews.vue

@@ -46,7 +46,8 @@
       </div>
       <div class="load-news">
         <v-btn class="post-news-btn" :rounded="true" :loading="loading" @click="loadMore(value)">
-          已加载：{{ rawData[value].lastId }}，加载更多
+          已加载：{{ rawData[value].lastId }}，
+          {{ rawData[value].isLast ? "已加载完毕" : "加载更多" }}
         </v-btn>
       </div>
     </v-window-item>
@@ -62,7 +63,8 @@ import ToChannel from "@comp/pageNews/to-channel.vue";
 import VpOverlaySearch from "@comp/viewPost/vp-overlay-search.vue";
 import Mys from "@Mys/index.js";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref, shallowRef, triggerRef } from "vue";
+import type { Ref } from "vue";
+import { computed, onMounted, reactive, ref, shallowRef } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import { type NewsType, NewsTypeEnum, useAppStore } from "@/store/modules/app.js";
@@ -70,8 +72,9 @@ import TGLogger from "@/utils/TGLogger.js";
 import { createPost } from "@/utils/TGWindow.js";
 import { getGameName } from "@/utils/toolFunc.js";
 
-type PostData = { [key in NewsType]: Array<TGApp.Plugins.Mys.Post.FullData> };
+type PostData = { [key in NewsType]: Ref<Array<TGApp.Plugins.Mys.Post.FullData>> };
-type RawData = { [key in NewsType]: { isLast: boolean; name: string; lastId: number } };
+type RawItem = { isLast: boolean; name: string; lastId: number };
+type RawData = { [key in NewsType]: Ref<RawItem> };
 
 const router = useRouter();
 const { recentNewsType } = storeToRefs(useAppStore());
@@ -82,11 +85,15 @@ const loading = ref<boolean>(false);
 const showList = ref<boolean>(false);
 const showSearch = ref<boolean>(false);
 const search = ref<string>("");
-const postData = shallowRef<PostData>({ notice: [], activity: [], news: [] });
+const postData = reactive<PostData>({
-const rawData = shallowRef<RawData>({
+  notice: shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]),
-  notice: { isLast: false, name: "公告", lastId: 0 },
+  activity: shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]),
-  activity: { isLast: false, name: "活动", lastId: 0 },
+  news: shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]),
-  news: { isLast: false, name: "咨讯", lastId: 0 },
+});
+const rawData = reactive<RawData>({
+  notice: shallowRef<RawItem>({ isLast: false, name: "公告", lastId: 0 }),
+  activity: shallowRef<RawItem>({ isLast: false, name: "活动", lastId: 0 }),
+  news: shallowRef<RawItem>({ isLast: false, name: "咨讯", lastId: 0 }),
 });
 const tab = computed<NewsType>({
   get: () => ((recentNewsType.value satisfies NewsType) ? recentNewsType.value : "notice"),
@@ -96,25 +103,20 @@ const tab = computed<NewsType>({
 onMounted(async () => await firstLoad(tab.value));
 
 async function firstLoad(key: NewsType, refresh: boolean = false): Promise<void> {
-  if (rawData.value[key].lastId !== 0) {
+  if (rawData[key].lastId !== 0) {
     if (!refresh) return;
-    postData.value[key] = [];
+    postData[key] = [];
-    rawData.value[key].lastId = 0;
+    rawData[key].lastId = 0;
   }
-  await showLoading.start(`正在获取${gameName}${rawData.value[key].name}数据`);
+  await showLoading.start(`正在获取${gameName}${rawData[key].name}数据`);
   document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
   const getData = await Mys.Painter.getNewsList(gid, NewsTypeEnum[key]);
   await showLoading.update(`数量：${getData.list.length}，是否最后一页：${getData.is_last}`);
-  rawData.value[key].isLast = getData.is_last;
+  rawData[key] = { isLast: getData.is_last, name: rawData[key].name, lastId: getData.list.length };
-  rawData.value[key].lastId = getData.list.length;
+  postData[key] = getData.list;
-  postData.value[key] = getData.list;
-  triggerRef(postData);
-  triggerRef(rawData);
   await showLoading.end();
-  await TGLogger.Info(`[News][${gid}][firstLoad] 获取${rawData.value[key].name}数据成功`);
+  await TGLogger.Info(`[News][${gid}][firstLoad] 获取${rawData[key].name}数据成功`);
-  showSnackbar.success(
+  showSnackbar.success(`获取${gameName}${rawData[key].name}数据成功，共 ${getData.list.length} 条`);
-    `获取${gameName}${rawData.value[key].name}数据成功，共 ${getData.list.length} 条`,
-  );
 }
 
 async function switchAnno(): Promise<void> {
@@ -125,25 +127,25 @@ async function switchAnno(): Promise<void> {
 // 加载更多
 async function loadMore(key: NewsType): Promise<void> {
   loading.value = true;
-  if (rawData.value[key].isLast) {
+  if (rawData[key].isLast) {
     showSnackbar.warn("已经是最后一页了");
     loading.value = false;
     return;
   }
-  await showLoading.start(`正在获取${gameName}${rawData.value[key].name}数据`);
+  await showLoading.start(`正在获取${gameName}${rawData[key].name}数据`);
+  const mod = rawData[key].lastId % 20;
+  const pageSize = mod === 0 ? 20 : 20 - mod;
   const getData = await Mys.Painter.getNewsList(
     gid,
     NewsTypeEnum[key],
-    20,
+    pageSize,
-    rawData.value[key].lastId,
+    rawData[key].lastId,
   );
   await showLoading.update(`数量：${getData.list.length}，是否最后一页：${getData.is_last}`);
-  rawData.value[key].lastId = rawData.value[key].lastId + getData.list.length;
+  rawData[key].lastId = rawData[key].lastId + getData.list.length;
-  rawData.value[key].isLast = getData.is_last;
+  rawData[key].isLast = getData.is_last;
-  postData.value[key] = postData.value[key].concat(getData.list);
+  postData[key] = postData[key].concat(getData.list);
-  triggerRef(postData);
+  if (rawData[key].isLast) {
-  triggerRef(rawData);
-  if (rawData.value[key].isLast) {
     await showLoading.end();
     showSnackbar.warn("已经是最后一页了");
     loading.value = false;

src/pages/common/PostTopic.vue

@@ -52,7 +52,8 @@
   </div>
   <div class="load-more">
     <v-btn class="post-topic-btn" @click="freshPostData()">
-      已加载：{{ posts.length }}，加载更多
+      已加载：{{ posts.length }}，
+      {{ postRaw.isLast ? "已加载完毕" : "加载更多" }}
     </v-btn>
   </div>
   <VpOverlaySearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
@@ -70,14 +71,14 @@ import { useRoute } from "vue-router";
 import { createPost } from "@/utils/TGWindow.js";
 
 type SortSelect = { text: string; value: number };
+type PostMiniData = { isLast: boolean; lastId: string; total: number };
 
 const { gid, topic } = <{ gid: string; topic: string }>useRoute().params;
 const showSearch = ref<boolean>(false);
 const curGid = ref<number>(Number(gid));
 const curSortType = ref<0 | 1 | 2>(0);
 const search = ref<string>("");
-const lastPostId = ref<string>();
+const postRaw = shallowRef<PostMiniData>({ isLast: false, lastId: "", total: 0 });
-const isLastPage = ref<boolean>(false);
 const topicInfo = shallowRef<TGApp.Plugins.Mys.Topic.InfoData>();
 const posts = shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]);
 const curGame = shallowRef<TGApp.Plugins.Mys.Topic.GameInfo>();
@@ -134,24 +135,30 @@ async function firstLoad(): Promise<void> {
     return;
   }
   await showLoading.update(`数量：${postList.posts.length}，是否最后一页：${postList.is_last}`);
-  isLastPage.value = postList.is_last;
+  postRaw.value = {
-  lastPostId.value = postList.last_id;
+    isLast: postList.is_last,
+    lastId: postList.last_id,
+    total: postList.posts.length,
+  };
   posts.value = postList.posts;
   await showLoading.end();
   showSnackbar.success(`加载了 ${postList.posts.length} 条帖子`);
 }
 
 async function freshPostData(): Promise<void> {
-  if (isLastPage.value) {
+  if (postRaw.value.isLast) {
     showSnackbar.warn("已经到底了");
     return;
   }
   await showLoading.start(`正在刷新${topicInfo.value?.topic.name}帖子列表`);
+  const mod20 = postRaw.value.total % 20;
+  const pageSize = mod20 === 0 ? 20 : 20 - mod20;
   const postList = await Mys.Post.getTopicPostList(
     curGid.value,
     topic,
     curSortType.value,
-    lastPostId.value,
+    postRaw.value.lastId,
+    pageSize,
   );
   if ("retcode" in postList) {
     await showLoading.end();
@@ -159,8 +166,11 @@ async function freshPostData(): Promise<void> {
     return;
   }
   await showLoading.update(`数量：${postList.posts.length}，是否最后一页：${postList.is_last}`);
-  isLastPage.value = postList.is_last;
+  postRaw.value = {
-  lastPostId.value = postList.last_id;
+    isLast: postList.is_last,
+    lastId: postList.last_id,
+    total: postRaw.value.total + postList.posts.length,
+  };
   posts.value = posts.value.concat(postList.posts);
   await showLoading.end();
   showSnackbar.success(`加载了 ${postList.posts.length} 条帖子`);