🗑️ loadMore

src/pages/common/Posts.vue

@@ -37,7 +37,7 @@
         @click:append="searchPost"
         @keyup.enter="searchPost"
       />
-      <v-btn class="post-fresh-btn" @click="freshPostData">
+      <v-btn class="post-fresh-btn" @click="freshPostData(false)">
         <v-icon>mdi-refresh</v-icon>
         <span>刷新</span>
       </v-btn>
@@ -105,6 +105,11 @@
         </div>
       </v-card>
     </div>
+    <div class="load-more">
+      <v-btn :loading="loading" @click="freshPostData(true)">
+        第{{ rawData.page }}页，已加载：{{ posts.length }}，加载更多
+      </v-btn>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -200,6 +205,7 @@ const vuetifyTheme = computed(() => {
 const curForumLabel = ref<string>("酒馆");
 const forumItem = ref<string[]>(["酒馆", "攻略", "同人图", "COS", "硬核"]);
 const curForum = ref<number>(26);
+const rawData = ref({ page: 1, is_last: false });
 
 // 游戏相关
 const curGameLabel = ref<keyof typeof gameList>("原神");
@@ -227,7 +233,7 @@ const search = ref<string>();
 onMounted(async () => {
   loading.value = true;
   await freshNavData();
-  await freshPostData();
+  await freshPostData(false);
   loading.value = false;
 });
 
@@ -243,13 +249,13 @@ watch(curGameLabel, async (newVal) => {
 // 监听论坛变化
 watch(curForumLabel, async (newVal) => {
   freshCurForum(newVal);
-  await freshPostData();
+  await freshPostData(false);
 });
 
 // 监听排序变化
 watch(curSortLabel, async (newVal) => {
   curSortType.value = sortList[newVal];
-  await freshPostData();
+  await freshPostData(false);
 });
 
 async function toNav(path: string): Promise<void> {
@@ -266,11 +272,33 @@ async function freshNavData(): Promise<void> {
   nav.value = await Mys.Posts.nav(curGid.value);
 }
 
-async function freshPostData(): Promise<void> {
+async function freshPostData(more: boolean = false): Promise<void> {
   loading.value = true;
   loadingTitle.value = `正在加载 ${curGameLabel.value}-${curForumLabel.value}-${curSortLabel.value} 的数据`;
-  const postsGet = await Mys.Posts.get(curForum.value, curGid.value, curSortType.value);
+  if (more) {
-  posts.value = Mys.Posts.card(postsGet);
+    const postsGet = await Mys.Posts.get(
+      curForum.value,
+      curGid.value,
+      curSortType.value,
+      rawData.value.page,
+    );
+    if (rawData.value.is_last) {
+      showSnackbar({
+        text: "已经是最后一页了",
+        color: "warn",
+      });
+      loading.value = false;
+      return;
+    }
+    posts.value = posts.value.concat(Mys.Posts.card(postsGet));
+    rawData.value.is_last = postsGet.is_last;
+    rawData.value.page = postsGet.page;
+  } else {
+    const postsGet = await Mys.Posts.get(curForum.value, curGid.value, curSortType.value);
+    posts.value = Mys.Posts.card(postsGet);
+    rawData.value.is_last = false;
+    rawData.value.page = 1;
+  }
   await nextTick();
   loading.value = false;
 }
@@ -534,4 +562,19 @@ function searchPost(): void {
   gap: 5px;
   opacity: 0.6;
 }
+
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  font-family: var(--font-title);
+  transition: all 0.3s linear;
+}
+
+.load-more button {
+  border-radius: 5px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+}
 </style>

src/plugins/Mys/api/index.ts

@@ -10,7 +10,7 @@ const MysApi = {
   Lottery: "https://bbs-api.miyoushe.com/painter/wapi/lottery/user/show?id={lotteryId}",
   News: "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids={gid}&page_size={pageSize}&type={newsType}&last_id={lastId}",
   Forum:
-    "https://bbs-api.miyoushe.com/post/wapi/getForumPostList?forum_id={forum}&gids={gid}&sort_type={type}&page_size=20",
+    "https://bbs-api.miyoushe.com/post/wapi/getForumPostList?forum_id={forum}&gids={gid}&sort_type={type}&page={page}&page_size=20",
   Feed: "https://bbs-api.miyoushe.com/post/api/feeds/posts?gids={gid}",
   Navigator: "https://bbs-api.miyoushe.com/apihub/api/home/new?gids={gid}",
   Position: "https://api-static.mihoyo.com/common/blackboard/ys_obc/v1/home/position?app_sn=ys_obc",

src/plugins/Mys/request/getForumList.ts

@@ -14,16 +14,19 @@ import MysApi from "../api";
  * @param {number} forumId 特定论坛 ID
  * @param {number} gid GID
  * @param {number} type 排序方式: 0-按热度排序，1-最新回复，2-按时间排序
+ * @param {number} page 页码
  * @return {Promise<TGApp.Plugins.Mys.Forum.FullData>}
  */
 async function getForumList(
   forumId: number,
   gid: number = 2,
   type: number = 0,
+  page: number = 1,
 ): Promise<TGApp.Plugins.Mys.Forum.FullData> {
   const url = MysApi.Forum.replace("{forum}", forumId.toString())
     .replace("{gid}", gid.toString())
-    .replace("{type}", type.toString());
+    .replace("{type}", type.toString())
+    .replace("{page}", page.toString());
   return await http.fetch<TGApp.Plugins.Mys.Forum.Response>(url).then((res) => res.data.data);
 }
 

src/plugins/Mys/types/Forum.d.ts

@@ -30,7 +30,7 @@ declare namespace TGApp.Plugins.Mys.Forum {
    * @property {number} last_id 最后一条帖子 ID
    * @property {boolean} is_last 是否最后一页
    * @property {boolean} is_origin 是否原创
-   * @property {string} page 页码
+   * @property {number} page 页码
    * @property {unknown} databox 数据盒子
    * @property {TGApp.Plugins.Mys.News.Item[]} list 帖子列表
    * @return FullData
@@ -39,15 +39,57 @@ declare namespace TGApp.Plugins.Mys.Forum {
     last_id: number;
     is_last: boolean;
     is_origin: boolean;
-    page: string;
+    page: number;
     databox: unknown;
     list: TGApp.Plugins.Mys.News.Item[];
   }
 
   /**
-   * @description 渲染数据
+   * @description 用于渲染的咨讯卡片
    * @since Beta v0.3.7
    * @interface RenderCard
+   * @property {string} title 标题
+   * @property {string} cover 封面图片 URL
+   * @property {string} postId 帖子 ID
+   * @property {string} subtitle 副标题
+   * @property user 发帖用户
+   * @property {string} user.nickname 用户昵称
+   * @property {string} user.pendant 用户头像挂件
+   * @property {string} user.icon 用户头像
+   * @property {string} user.label 用户标签
+   * @property forum 版块
+   * @property {string} forum.name 版块名称
+   * @property {string} forum.icon 版块图标
+   * @property {RenderStatus} status 活动状态，仅活动咨讯有
+   * @property data 帖子统计
+   * @property {number} data.mark 帖子收藏数
+   * @property {number} data.forward 帖子转发数
+   * @property {number} data.like 帖子点赞数
+   * @property {number} data.reply 帖子回复数
+   * @property {number} data.view 帖子浏览数
+   * @return RenderCard
    */
-  type RenderCard = TGApp.Plugins.Mys.News.RenderCard;
+  interface RenderCard {
+    title: string;
+    cover: string;
+    postId: string;
+    subtitle: string;
+    user: {
+      nickname: string;
+      pendant: string;
+      icon: string;
+      label: string;
+    };
+    forum: {
+      name: string;
+      icon: string;
+    };
+    data: {
+      mark: number;
+      forward: number;
+      like: number;
+      reply: number;
+      view: number;
+    };
+  }
 }

src/plugins/Mys/utils/getPostsCard.ts

@@ -18,7 +18,7 @@ function getPostCard(post: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.Forum
   return {
     title: post.post.subject,
     cover: postCover,
-    postId: Number(post.post.post_id),
+    postId: post.post.post_id,
     subtitle: post.post.post_id,
     user: {
       nickname: post.user.nickname,

src/utils/TGWindow.ts

@@ -1,7 +1,7 @@
 /**
- * @file utils TGWindow.ts
+ * @file utils/TGWindow.ts
  * @description 窗口创建相关工具函数
- * @since Beta v0.3.4
+ * @since Beta v0.3.7
  */
 
 import { invoke, window as TauriWindow } from "@tauri-apps/api";
@@ -73,13 +73,13 @@ export function createTGWindow(
 
 /**
  * @description 打开帖子
- * @since Beta v0.3.3
+ * @since Beta v0.3.7
- * @param {TGApp.Plugins.Mys.News.RenderCard|string|number} item 帖子内容或ID
+ * @param {TGApp.Plugins.Mys.News.RenderCard | string | number | TGApp.Plugins.Mys.Forum.RenderCard} item 帖子内容或ID
  * @param {string} title 帖子标题
  * @returns {void}
  */
 export function createPost(
-  item: TGApp.Plugins.Mys.News.RenderCard | string | number,
+  item: TGApp.Plugins.Mys.News.RenderCard | string | number | TGApp.Plugins.Mys.Forum.RenderCard,
   title?: string,
 ): void {
   let postId, postTitle, jsonTitle;