🎨 调整加载逻辑

BTMuli · Nov 17, 2024 · 63929bc · 63929bc
1 parent 53f2612
commit 63929bc
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 22 deletions.
diff --git a/src/pages/common/News.vue b/src/pages/common/News.vue
@@ -24,13 +24,13 @@
       />
     </template>
     <template #append>
-      <v-btn class="news-top-btn" @click="firstLoad(tab, true)">
+      <v-btn class="post-news-btn" @click="firstLoad(tab, true)">
         <v-icon>mdi-refresh</v-icon>
       </v-btn>
-      <v-btn class="news-top-btn" @click="showList = true">
+      <v-btn class="post-news-btn" @click="showList = true">
         <v-icon>mdi-view-list</v-icon>
       </v-btn>
-      <v-btn class="news-top-btn" @click="switchAnno" v-if="gid === '2'">
+      <v-btn class="post-news-btn" @click="switchAnno" v-if="gid === '2'">
         <template #prepend>
           <v-icon>mdi-bullhorn</v-icon>
         </template>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="load-news">
-        <v-btn class="news-top-btn" :rounded="true" :loading="loading" @click="loadMore(value)">
+        <v-btn class="post-news-btn" :rounded="true" :loading="loading" @click="loadMore(value)">
           已加载：{{ rawData[value].lastId }}，加载更多
         </v-btn>
       </div>
@@ -149,6 +149,7 @@ async function firstLoad(key: NewsKey, refresh: boolean = false): Promise<void>
     rawData.value[key].lastId = 0;
   }
   showLoading.start(`正在获取${gameName}${rawData.value[key].name}数据...`);
+  document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
   const getData = await Mys.Painter.getNewsList(gid, NewsType[key]);
   rawData.value[key].isLast = getData.is_last;
   rawData.value[key].lastId = getData.list.length;
@@ -207,15 +208,15 @@ async function searchPost(): Promise<void> {
   font-family: var(--font-title);
 }
 
-.news-top-btn {
+.post-news-btn {
   height: 40px;
   margin-left: 15px;
   background: var(--btn-bg-1);
   color: var(--btn-text-1);
   font-family: var(--font-title);
 }
 
-.dark .news-top-btn {
+.dark .post-news-btn {
   border: 1px solid var(--common-shadow-2);
 }
 

diff --git a/src/pages/common/PostForum.vue b/src/pages/common/PostForum.vue
@@ -45,7 +45,7 @@
         @click:append="searchPost"
         @keyup.enter="searchPost"
       />
-      <v-btn :rounded="true" class="post-fresh-btn" @click="freshPostData()">
+      <v-btn :rounded="true" class="post-forum-btn" @click="freshPostData()">
         <v-icon>mdi-refresh</v-icon>
         <span>刷新</span>
       </v-btn>
@@ -59,6 +59,11 @@
       <TPostCard :model-value="post" v-if="post" />
     </div>
   </div>
+  <div class="posts-load-more">
+    <v-btn class="post-forum-btn" :rounded="true" @click="loadMore()">
+      已加载：{{ posts.length }}，加载更多
+    </v-btn>
+  </div>
   <ToPostSearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
 </template>
 <script setup lang="ts">
@@ -86,9 +91,9 @@ type SortSelectGame = {
 };
 
 const sortOrderList: SortSelect[] = [
-  { text: "默认排序", value: 0 },
   { text: "最新回复", value: 1 },
   { text: "最新发布", value: 2 },
+  { text: "热门", value: 3 },
 ];
 const forumYsList: SortSelect[] = [
   { text: "酒馆", value: 26 },
@@ -175,12 +180,14 @@ function getSortLabel(value: number): string {
 
 // 渲染参数
 const curGid = ref<number>(2);
-const curSortType = ref<number>(0);
+const curSortType = ref<number>(1);
 const curForum = ref<number>(26);
 const curForumLabel = ref<string>("");
 
 // 渲染数据
 const posts = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
+const lastId = ref<string>("");
+const isLast = ref<boolean>(false);
 const search = ref<string>("");
 const showSearch = ref<boolean>(false);
 const firstLoad = ref<boolean>(false);
@@ -236,9 +243,26 @@ async function freshPostData(): Promise<void> {
   await TGLogger.Info(
     `[Posts][${gameLabel}][freshPostData][${forumLabel}][${sortLabel}] 刷新帖子列表`,
   );
-  showLoading.update(`正在加载 ${gameLabel}-${forumLabel}-${sortLabel} 数据`);
+  showLoading.update(`正在刷新 ${gameLabel}-${forumLabel}-${sortLabel} 数据`);
+  document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
   const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value);
   posts.value = postsGet.list;
+  lastId.value = postsGet.last_id;
+  isLast.value = postsGet.is_last;
+  showLoading.end();
+}
+
+async function loadMore(): Promise<void> {
+  if (isLast.value) {
+    showSnackbar.warn("没有更多帖子了");
+    return;
+  }
+  showLoading.start("正在加载更多帖子数据...");
+  const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value, lastId.value);
+  posts.value = posts.value.concat(postsGet.list);
+  lastId.value = postsGet.last_id;
+  isLast.value = postsGet.is_last;
+  showSnackbar.success(`加载成功，共加载 ${postsGet.list.length} 条帖子`);
   showLoading.end();
 }
 
@@ -285,14 +309,14 @@ function searchPost(): void {
   height: 50px;
 }
 
-.post-fresh-btn {
+.post-forum-btn {
   height: 40px;
   background: var(--btn-bg-1);
   color: var(--btn-text-1);
   font-family: var(--font-title);
 }
 
-.dark .post-fresh-btn {
+.dark .post-forum-btn {
   border: 1px solid var(--common-shadow-2);
 }
 
@@ -303,4 +327,13 @@ function searchPost(): void {
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 }
+
+.posts-load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  font-family: var(--font-title);
+  transition: all 0.3s linear;
+}
 </style>
diff --git a/src/pages/common/PostTopic.vue b/src/pages/common/PostTopic.vue
@@ -42,7 +42,7 @@
         @click:append="searchPost"
         @keyup.enter="searchPost"
       />
-      <v-btn :rounded="true" class="post-fresh-btn" @click="firstLoad()">
+      <v-btn :rounded="true" class="post-topic-btn" @click="firstLoad()">
         <v-icon>mdi-refresh</v-icon>
         <span>刷新</span>
       </v-btn>
@@ -97,7 +97,7 @@ const sortList = computed<SortSelect[]>(() => {
   return [
     { text: "最新", value: 0 },
     { text: "热门", value: 2 },
-    { text: "精华", value: 1 },
+    { text: "精选", value: 1 },
   ];
 });
 
@@ -130,6 +130,7 @@ watch(
 
 async function firstLoad(): Promise<void> {
   if (curGame.value) showLoading.update(`正在加载${curGame.value.name}帖子列表`);
+  document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
   const postList = await Mys.Post.getTopicPostList(curGid.value, topic, curSortType.value);
   if ("retcode" in postList) {
     showLoading.end();
@@ -229,14 +230,14 @@ function searchPost(): void {
   height: 50px;
 }
 
-.post-fresh-btn {
+.post-topic-btn {
   height: 40px;
   background: var(--btn-bg-1);
   color: var(--btn-text-1);
   font-family: var(--font-title);
 }
 
-.dark .post-fresh-btn {
+.dark .post-topic-btn {
   border: 1px solid var(--common-shadow-2);
 }
 

diff --git a/src/plugins/Mys/request/postReq.ts b/src/plugins/Mys/request/postReq.ts
@@ -17,18 +17,38 @@ const Referer = "https://bbs.mihoyo.com/";
  * @since Beta v0.6.2
  * @param {number} forumId 特定论坛 ID
  * @param {number} type 排序方式: 0-按热度排序，1-最新回复，2-按时间排序
+ * @param {string} last_id 最后 ID
  * @param {number} page_size 每页数量
  * @return {Promise<TGApp.Plugins.Mys.Forum.FullData>}
  */
 export async function getForumPostList(
   forumId: number,
-  type: number = 0,
+  type: number = 1,
+  last_id?: string,
   page_size: number = 20,
 ): Promise<TGApp.Plugins.Mys.Forum.FullData> {
+  let params;
+  if (type === 3) {
+    params = {
+      forum_id: forumId,
+      is_hot: true,
+      page_size: page_size,
+      last_id: last_id,
+    };
+  } else {
+    params = {
+      forum_id: forumId,
+      sort_type: type,
+      is_good: false,
+      is_hot: false,
+      page_size: page_size,
+      last_id: last_id,
+    };
+  }
   return (
     await TGHttp<TGApp.Plugins.Mys.Forum.Response>(`${Mpabu}getForumPostList`, {
       method: "GET",
-      query: { forum_id: forumId, sort_type: type, page_size: page_size },
+      query: params,
     })
   ).data;
 }

diff --git a/src/plugins/Mys/types/Forum.d.ts b/src/plugins/Mys/types/Forum.d.ts
@@ -1,7 +1,7 @@
 /**
  * @file plugins/Mys/types/Forum.d.ts
  * @description Mys 插件论坛类型定义文件
- * @since Beta v0.4.5
+ * @since Beta v0.6.3
  */
 
 /**
@@ -25,9 +25,9 @@ declare namespace TGApp.Plugins.Mys.Forum {
 
   /**
    * @description 特定论坛数据
-   * @since Beta v0.4.5
+   * @since Beta v0.6.3
    * @interface FullData
-   * @property {number} last_id 最后一条帖子 ID
+   * @property {string} last_id 最后一条帖子 ID
    * @property {boolean} is_last 是否最后一页
    * @property {boolean} is_origin 是否原创
    * @property {number} page 页码
@@ -36,7 +36,7 @@ declare namespace TGApp.Plugins.Mys.Forum {
    * @return FullData
    */
   interface FullData {
-    last_id: number;
+    last_id: string;
     is_last: boolean;
     is_origin: boolean;
     page: number;