✨ 完成多游戏多频道多排序帖子获取

close #67

src/pages/common/Posts.vue

@@ -1,76 +1,336 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <div class="posts-grid">
+  <div class="posts-box">
-    <v-card v-for="post in posts" :key="post.postId" class="post-card">
+    <div class="posts-switch">
-      <div class="post-cover" @click="createPost(post)">
+      <v-select
-        <img :src="post.cover" alt="cover" />
+        v-model="curGameLabel"
+        class="post-switch-item"
+        :items="gameItem"
+        :theme="vuetifyTheme"
+        variant="outlined"
+        label="游戏"
+      />
+      <v-select
+        v-model="curForumLabel"
+        class="post-switch-item"
+        :items="forumItem"
+        :theme="vuetifyTheme"
+        variant="outlined"
+        label="频道"
+      />
+      <v-select
+        v-model="curSortLabel"
+        class="post-switch-item"
+        :items="sortItem"
+        :theme="vuetifyTheme"
+        variant="outlined"
+        label="排序"
+      />
+      <v-btn class="post-fresh-btn" @click="freshPostData">
+        <v-icon>mdi-refresh</v-icon>
+        <span>刷新</span>
+      </v-btn>
+    </div>
+    <!-- todo: hover效果，本来是只有 icon，hover之后显示 title   -->
+    <div class="posts-nav">
+      <div
+        v-for="navItem in nav"
+        :key="navItem.id"
+        class="post-nav"
+        @click="toNav(navItem.app_path)"
+      >
+        <img alt="navIcon" :src="navItem.icon" />
+        <span>{{ navItem.name }}</span>
       </div>
-      <div class="post-content">
+    </div>
-        <div class="post-card-title" :title="post.title">{{ post.title }}</div>
+    <!-- todo 无限加载 -->
-        <div class="post-card-user">
+    <div class="posts-grid">
-          <div class="pcu-left">
+      <v-card v-for="post in posts" :key="post.postId" class="post-card">
-            <div class="pcu-icon">
+        <div class="post-cover" @click="createPost(post)">
-              <img :src="post.user.icon" alt="userIcon" />
+          <img :src="post.cover" alt="cover" />
+        </div>
+        <div class="post-content">
+          <div class="post-card-title" :title="post.title">{{ post.title }}</div>
+          <div class="post-card-user">
+            <div class="pcu-left">
+              <div class="pcu-icon">
+                <img :src="post.user.icon" alt="userIcon" />
+              </div>
+              <div v-if="post.user.pendant !== ''" class="pcu-pendent">
+                <img :src="post.user.pendant" alt="userPendant" />
+              </div>
             </div>
-            <div v-if="post.user.pendant !== ''" class="pcu-pendent">
+            <div class="pcu-right">
-              <img :src="post.user.pendant" alt="userPendant" />
+              <span>{{ post.user.nickname }}</span>
+              <span>{{ post.user.label }}</span>
             </div>
           </div>
-          <div class="pcu-right">
+          <div class="post-card-data">
-            <span>{{ post.user.nickname }}</span>
+            <div class="pcd-item" :title="`浏览数：${post.data.view}`">
-            <span>{{ post.user.label }}</span>
+              <v-icon>mdi-eye</v-icon>
+              <span>{{ post.data.view }}</span>
+            </div>
+            <div class="pcd-item" :title="`收藏数：${post.data.mark}`">
+              <v-icon>mdi-star</v-icon>
+              <span>{{ post.data.mark }}</span>
+            </div>
+            <div class="pcd-item" :title="`回复数：${post.data.reply}`">
+              <v-icon>mdi-comment</v-icon>
+              <span>{{ post.data.reply }}</span>
+            </div>
+            <div class="pcd-item" :title="`点赞数：${post.data.like}`">
+              <v-icon>mdi-thumb-up</v-icon>
+              <span>{{ post.data.like }}</span>
+            </div>
+            <div class="pcd-item" :title="`转发数：${post.data.forward}`">
+              <v-icon>mdi-share-variant</v-icon>
+              <span>{{ post.data.forward }}</span>
+            </div>
           </div>
         </div>
-        <div class="post-card-data">
+        <div class="post-card-forum" :title="`频道: ${post.forum.name}`">
-          <div class="pcd-item" :title="`浏览数：${post.data.view}`">
+          <img :src="post.forum.icon" :alt="post.forum.name" />
-            <v-icon>mdi-eye</v-icon>
+          <span>{{ post.forum.name }}</span>
-            <span>{{ post.data.view }}</span>
-          </div>
-          <div class="pcd-item" :title="`收藏数：${post.data.mark}`">
-            <v-icon>mdi-star</v-icon>
-            <span>{{ post.data.mark }}</span>
-          </div>
-          <div class="pcd-item" :title="`回复数：${post.data.reply}`">
-            <v-icon>mdi-comment</v-icon>
-            <span>{{ post.data.reply }}</span>
-          </div>
-          <div class="pcd-item" :title="`点赞数：${post.data.like}`">
-            <v-icon>mdi-thumb-up</v-icon>
-            <span>{{ post.data.like }}</span>
-          </div>
-          <div class="pcd-item" :title="`转发数：${post.data.forward}`">
-            <v-icon>mdi-share-variant</v-icon>
-            <span>{{ post.data.forward }}</span>
-          </div>
         </div>
-      </div>
+      </v-card>
-      <div class="post-card-forum" :title="`频道: ${post.forum.name}`">
+    </div>
-        <img :src="post.forum.icon" :alt="post.forum.name" />
-        <span>{{ post.forum.name }}</span>
-      </div>
-    </v-card>
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 
+import showConfirm from "../../components/func/confirm";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import Mys from "../../plugins/Mys";
+import { useAppStore } from "../../store/modules/app";
+import TGClient from "../../utils/TGClient";
 import { createPost } from "../../utils/TGWindow";
 
 const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载中...");
+const loadingTitle = ref<string>("正在加载数据");
+const appStore = useAppStore();
 
+// 常量
+const sortList = {
+  默认排序: 0,
+  最新回复: 1,
+  最新发布: 2,
+};
+const forumGenshin = {
+  酒馆: 26,
+  攻略: 43,
+  同人图: 29,
+  COS: 49,
+  硬核: 50,
+};
+const forumSr = {
+  候车室: 52,
+  攻略: 61,
+  同人图: 56,
+  COS: 62,
+};
+const forumBh3 = {
+  甲板: 1,
+  攻略: 14,
+  同人图: 4,
+  同人文: 41,
+};
+const forumBh2 = {
+  学园: 30,
+  攻略: 51,
+  同人图: 40,
+};
+const forumWd = {
+  律所: 37,
+  攻略: 60,
+  同人文: 42,
+  同人图: 38,
+};
+const forumZzz = {
+  咖啡馆: 57,
+  同人图: 59,
+};
+const forumDby = {
+  校园: 54,
+  ACG: 35,
+  生活: 34,
+  同人图: 39,
+  COS: 47,
+  脑洞: 48,
+  科技: 55,
+  公告: 36,
+};
+const forumList = {
+  原神: forumGenshin,
+  "崩坏：星穹铁道": forumSr,
+  崩坏3: forumBh3,
+  崩坏2: forumBh2,
+  未定事件簿: forumWd,
+  绝区零: forumZzz,
+  大别野: forumDby,
+};
+const gameList = {
+  原神: 2,
+  "崩坏：星穹铁道": 6,
+  崩坏3: 1,
+  崩坏2: 3,
+  未定事件簿: 4,
+  绝区零: 8,
+  大别野: 5,
+};
+
+// 主题
+const vuetifyTheme = computed(() => {
+  return appStore.theme === "dark" ? "dark" : "light";
+});
+
+// 渲染参数
+const curForumLabel = ref<string>("酒馆");
+const forumItem = ref<string[]>(["酒馆", "攻略", "同人图", "COS", "硬核"]);
+const curForum = ref<number>(26);
+
+// 游戏相关
+const curGameLabel = ref<keyof typeof gameList>("原神");
+const gameItem = ref<string[]>([
+  "原神",
+  "崩坏：星穹铁道",
+  "崩坏3",
+  "崩坏2",
+  "未定事件簿",
+  "绝区零",
+  "大别野",
+]);
+const curGid = ref<number>(2);
+
+// 排序相关
+const curSortLabel = ref<keyof typeof sortList>("默认排序");
+const sortItem = ref<string[]>(["默认排序", "最新回复", "最新发布"]);
+const curSortType = ref<number>(0);
+
+// 渲染数据
 const posts = ref<TGApp.Plugins.Mys.Forum.RenderCard[]>([]);
+const nav = ref<TGApp.BBS.Navigator.Navigator[]>([]);
 
 onMounted(async () => {
   loading.value = true;
-  const getData = await Mys.Posts.get(26, 2, 1);
+  await freshNavData();
-  posts.value = Mys.Posts.card(getData);
+  await freshPostData();
   loading.value = false;
 });
+
+// 监听游戏变化
+watch(curGameLabel, async (newVal) => {
+  curGid.value = gameList[newVal];
+  forumItem.value = Object.keys(forumList[newVal]);
+  curForumLabel.value = forumItem.value[0];
+  freshCurForum(forumItem.value[0]);
+  await freshNavData();
+});
+
+// 监听论坛变化
+watch(curForumLabel, async (newVal) => {
+  freshCurForum(newVal);
+  await freshPostData();
+});
+
+// 监听排序变化
+watch(curSortLabel, async (newVal) => {
+  curSortType.value = sortList[newVal];
+  await freshPostData();
+});
+
+async function toNav(path: string): Promise<void> {
+  // todo 记忆宽屏竖屏
+  const modeConfirm = await showConfirm({
+    title: "是否采用宽屏模式打开？",
+    text: "取消则采用竖屏模式打开",
+  });
+  if (modeConfirm) await TGClient.open("web_act", path);
+  else await TGClient.open("web_act_thin", path);
+}
+
+async function freshNavData(): Promise<void> {
+  nav.value = await Mys.Posts.nav(curGid.value);
+}
+
+async function freshPostData(): 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);
+  posts.value = Mys.Posts.card(postsGet);
+  await nextTick();
+  loading.value = false;
+}
+
+function freshCurForum(newVal: string): void {
+  const forum = forumList[curGameLabel.value];
+  // @ts-ignore
+  curForum.value = forum[newVal];
+}
 </script>
 <style lang="css" scoped>
+.posts-box {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
+.posts-nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 5px;
+  gap: 10px 10px;
+}
+
+.post-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border-radius: 5px;
+  backdrop-filter: blur(20px);
+  background: var(--common-shadow-t-4);
+  box-shadow: 0 0 5px var(--common-shadow-4);
+  color: var(--tgc-white-1);
+  cursor: pointer;
+}
+
+.post-nav img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.posts-nav span {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 16px;
+}
+
+.posts-switch {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 5px;
+  column-gap: 10px;
+}
+
+.post-switch-item {
+  max-width: 200px;
+  height: 50px;
+}
+
+.post-fresh-btn {
+  height: 40px;
+  background: var(--btn-bg-1);
+  color: var(--btn-text-1);
+  font-family: var(--font-title);
+}
+
+.dark .post-fresh-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .posts-grid {
   display: grid;
   padding: 5px;

src/plugins/Mys/api/index.ts

@@ -10,7 +10,8 @@ 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}",
+    "https://bbs-api.miyoushe.com/post/wapi/getForumPostList?forum_id={forum}&gids={gid}&sort_type={type}&page_size=20",
+  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",
   Post: {
     Api: "https://bbs-api.mihoyo.com/post/wapi/getPostFull?post_id={postId}",

src/plugins/Mys/index.ts

@@ -8,6 +8,7 @@ import MysApi from "./api";
 import { getLoginQr, getLoginStatus } from "./request/doGameLogin";
 import getForumList from "./request/getForumList";
 import getGachaData from "./request/getGachaData";
+import getHomeNavigator from "./request/getHomeNavigator";
 import getLotteryData from "./request/getLotteryData";
 import getNewsList from "./request/getNewsList";
 import getPositionData from "./request/getPositionData";
@@ -25,6 +26,7 @@ const Mys = {
   Posts: {
     get: getForumList,
     card: getNewsCard,
+    nav: getHomeNavigator,
   },
   Gacha: {
     get: getGachaData,

src/plugins/Mys/request/getHomeNavigator.ts

@@ -0,0 +1,24 @@
+/**
+ * @file plugins/Mys/request/getHomeNavigator.ts
+ * @description Mys 插件首页导航请求
+ * @since Beta v0.3.7
+ */
+
+import { http } from "@tauri-apps/api";
+
+import MysApi from "../api";
+
+/**
+ * @description 获取首页导航列表
+ * @since Beta v0.3.7
+ * @param {number} gid GID
+ * @return {Promise<TGApp.BBS.Navigator.Navigator[]>}
+ */
+async function getHomeNavigator(gid: number = 2): Promise<TGApp.BBS.Navigator.Navigator[]> {
+  const url = MysApi.Navigator.replace("{gid}", gid.toString());
+  return await http
+    .fetch<TGApp.BBS.Navigator.HomeResponse>(url)
+    .then((res) => res.data.data.navigator);
+}
+
+export default getHomeNavigator;

src/types/BBS/Navigator.d.ts

@@ -0,0 +1,267 @@
+/**
+ * @file types/BBS/Navigator.d.ts
+ * @description BBS 导航相关类型定义文件
+ * @since Beta v0.3.7
+ */
+
+/**
+ * @description 导航相关类型定义
+ * @since Beta v0.3.7
+ * @namespace TGApp.BBS.Navigator
+ * @memberof TGApp.BBS
+ */
+declare namespace TGApp.BBS.Navigator {
+  /**
+   * @description 导航列表返回响应类型
+   * @interface HomeResponse
+   * @since Beta v0.3.7
+   * @extends TGApp.BBS.Response.BaseWithData
+   * @property {HomeData} data - 导航列表数据
+   * @return HomeResponse
+   */
+  interface HomeResponse extends TGApp.BBS.Response.BaseWithData {
+    data: HomeData;
+  }
+
+  /**
+   * @description 导航列表数据
+   * @interface HomeData
+   * @since Beta v0.3.7
+   * @property {Navigator[]} navigator - 导航列表
+   * @property {Disscussion} discussion - 讨论区
+   * @property {Background} background - 背景
+   * @property {Official} official - 官方
+   * @property {Carousels} carousels - 轮播图
+   * @property {HotTopic[]} hot_topics - 热门话题
+   * @property {GameReception[]} game_receptions - 游戏接待
+   * @property {unknown[]} posts - 帖子
+   * @property {unknown[]} lives - 直播
+   * @property {unknown} recommend_villa - 推荐别墅
+   * @property {unknown[]} image_post_card - 图片帖子卡片
+   * @return HomeData
+   */
+  interface HomeData {
+    navigator: Navigator[];
+    discussion: Disscussion;
+    background: Background;
+    official: Official;
+    carousels: Carousels;
+    hot_topics: HotTopic[];
+    game_receptions: GameReception[];
+    posts: unknown[];
+    lives: unknown[];
+    recommend_villa: unknown;
+    image_post_card: unknown[];
+  }
+
+  /**
+   * @description 导航列表
+   * @interface Navigator
+   * @since Beta v0.3.7
+   * @property {number} id - 导航 id
+   * @property {string} name - 导航名称
+   * @property {string} icon - 导航图标
+   * @property {string} app_path - 导航路径
+   * @property {number} reddot_online_item - 红点在线项目
+   * @return Navigator
+   */
+  interface Navigator {
+    id: number;
+    name: string;
+    icon: string;
+    app_path: string;
+    reddot_online_item: number;
+  }
+
+  /**
+   * @description 讨论区
+   * @interface Disscussion
+   * @since Beta v0.3.7
+   * @property {string} icon - 讨论区图标
+   * @property {string} title - 讨论区标题
+   * @property {string} prompt - 讨论区提示
+   * @return Disscussion
+   */
+  interface Disscussion {
+    icon: string;
+    title: string;
+    prompt: string;
+  }
+
+  /**
+   * @description 背景
+   * @interface Background
+   * @since Beta v0.3.7
+   * @property {string} image - 背景图片
+   * @property {string} color - 背景颜色
+   * @return Background
+   */
+  interface Background {
+    image: string;
+    color: string;
+  }
+
+  /**
+   * @description 官方
+   * @interface Official
+   * @since Beta v0.3.7
+   * @property {number} position - 官方位置
+   * @property {number} forum_id - 官方论坛 id
+   * @property {string} data[].post_id - 官方帖子 id
+   * @property {string} data[].title - 官方帖子标题
+   * @property {string} data[].date - 官方帖子日期（时间戳，单位：秒）
+   * @property {string} data[].label - 官方帖子标签
+   * @property {boolean} data[].is_top - 官方帖子是否置顶
+   * @property {number} data[].view_type - 官方帖子视图类型
+   * @property {string} data[].image_url - 官方帖子图片 url
+   * @return Official
+   */
+  interface Official {
+    position: number;
+    forum_id: number;
+    data: Array<{
+      post_id: string;
+      title: string;
+      date: string;
+      label: string;
+      is_top: boolean;
+      view_type: number;
+      image_url: string;
+    }>;
+  }
+
+  /**
+   * @description 轮播图
+   * @interface Carousels
+   * @since Beta v0.3.7
+   * @property {number} position - 轮播图位置
+   * @property {string} data[].cover - 轮播图封面
+   * @property {string} data[].app_path - 轮播图路径
+   * @return Carousels
+   */
+  interface Carousels {
+    position: number;
+    data: Array<{
+      cover: string;
+      app_path: string;
+    }>;
+  }
+
+  /**
+   * @description 热门话题
+   * @interface HotTopic
+   * @since Beta v0.3.7
+   * @property {number} position - 热门话题位置
+   * @property {number} data[].topic_id - 热门话题 id
+   * @property {string} data[].image - 热门话题图片
+   * @property {string} data[].topic_name - 热门话题名称
+   * @property {string} data[].post_name - 热门话题帖子名称
+   * @property {number} data[].count.view - 热门话题浏览数
+   * @property {number} data[].count.discuss - 热门话题讨论数
+   * @return HotTopic
+   */
+  interface HotTopic {
+    position: number;
+    data: Array<{
+      topic_id: number;
+      image: string;
+      topic_name: string;
+      post_name: string;
+      count: {
+        view: number;
+        discuss: number;
+      };
+    }>;
+  }
+
+  /**
+   * @description 游戏接待
+   * @interface GameReception
+   * @since Beta v0.3.7
+   * @property {number} position - 游戏接待位置
+   * @property {number} data.config.id - 游戏接待 id
+   * @property {number} data.config.game_id - 游戏接待游戏 id
+   * @property {string} data.config.name - 游戏接待名称
+   * @property {string} data.config.description - 游戏接待描述
+   * @property {string} data.config.icon - 游戏接待图标
+   * @property {string} data.config.status - 游戏接待状态
+   * @property {number} data.config.rules.game_level - 游戏接待规则游戏等级
+   * @property {number} data.config.rules.community_level - 游戏接待规则社区等级
+   * @property {number} data.config.questionnaire.questionnaire_type - 游戏接待问卷类型
+   * @property {string} data.config.questionnaire.questionnaire_url - 游戏接待问卷 url
+   * @property {number} data.config.questionnaire.questionnaire_status - 游戏接待问卷状态
+   * @property {string} data.config.pkg.android_url - 游戏接待安卓包 url
+   * @property {string} data.config.pkg.pkg_name - 游戏接待安卓包名称
+   * @property {string} data.config.pkg.pkg_version - 游戏接待安卓包版本
+   * @property {string} data.config.pkg.ios_url - 游戏接待 ios 包 url
+   * @property {string} data.config.pkg.pkg_length - 游戏接待 ios 包大小
+   * @property {string} data.config.pkg.pkg_md5 - 游戏接待 ios 包 md5
+   * @property {string} data.config.pkg.pkg_version_code - 游戏接待 ios 包版本
+   * @property {string} data.config.pkg.ios_version - 游戏接待 ios 版本
+   * @property {string} data.config.pkg.new_filename - 游戏接待 ios 包新文件名
+   * @property {string} data.config.pkg.filename - 游戏接待 ios 包文件名
+   * @property {string} data.config.pkg.pkg_version_name - 游戏接待 ios 包版本名称
+   * @property {number} data.config.detail_servlet.type - 游戏接待详情类型
+   * @property {unknown} data.config.detail_servlet.normal_servlet - 游戏接待详情普通类型
+   * @property {unknown} data.config.detail_servlet.customize_detail - 游戏接待详情自定义类型
+   * @property {boolean} data.config.pre_register_count.show_count - 游戏接待预注册是否显示数量
+   * @property {string} data.config.pre_register_count.count - 游戏接待预注册数量
+   * @property {boolean} data.config.is_top - 游戏接待是否置顶
+   * @property {string} data.config.last_update_time - 游戏接待最后更新时间
+   * @property {number} data.config.app_store_switch - 游戏接待 app store 开关
+   * @property {number} data.config.download_switch - 游戏接待下载开关
+   * @property {string} data.config.developer - 游戏接待开发商
+   * @property {unknown} data.user_status - 游戏接待用户状态
+   * @return GameReception
+   */
+  interface GameReception {
+    position: number;
+    data: {
+      config: {
+        id: number;
+        game_id: number;
+        name: string;
+        description: string;
+        icon: string;
+        status: string;
+        rules: {
+          game_level: number;
+          community_level: number;
+        };
+        questionnaire: {
+          questionnaire_type: number;
+          questionnaire_url: string;
+          questionnaire_status: number;
+        };
+        pkg: {
+          android_url: string;
+          pkg_name: string;
+          pkg_version: string;
+          ios_url: string;
+          pkg_length: string;
+          pkg_md5: string;
+          pkg_version_code: string;
+          ios_version: string;
+          new_filename: string;
+          filename: string;
+          pkg_version_name: string;
+        };
+        detail_servlet: {
+          type: number;
+          normal_servlet: unknown;
+          customize_detail: unknown;
+        };
+        pre_register_count: {
+          show_count: boolean;
+          count: string;
+        };
+        is_top: boolean;
+        last_update_time: string;
+        app_store_switch: number;
+        download_switch: number;
+        developer: string;
+      };
+      user_status: unknown;
+    };
+  }
+}