✨ 话题跳转

src/pages/common/PostForum.vue

@@ -5,7 +5,6 @@
       <div class="posts-top">
         <img src="/source/UI/posts.png" alt="posts" />
         <span>帖子</span>
-        <!-- todo 提供话题入口 -->
       </div>
     </template>
     <div class="posts-switch">

src/pages/common/PostTopic.vue

@@ -0,0 +1,237 @@
+<template>
+  <ToLoading v-model="loading" :title="loadingTitle" />
+  <v-app-bar>
+    <template #prepend>
+      <div class="post-topic-top" v-if="topicInfo">
+        <img :src="topicInfo.topic.cover" alt="cover" />
+        <div class="post-topic-info">
+          <span>{{ topicInfo.topic.name }}({{ topic }})</span>
+          <span>{{ topicInfo.topic.desc }}</span>
+        </div>
+      </div>
+    </template>
+    <template #extension>
+      <TGameNav :model-value="curGid" v-if="curGid !== 0" />
+    </template>
+    <div class="post-topic-switch">
+      <v-select
+        v-model="curGame"
+        class="post-switch-item"
+        :items="topicInfo?.game_info_list"
+        item-title="name"
+        :item-value="(item) => item"
+        variant="outlined"
+        label="分区"
+      />
+      <v-select
+        v-model="curSortType"
+        class="post-switch-item"
+        :items="sortOrderList"
+        item-title="text"
+        item-value="value"
+        variant="outlined"
+        label="排序"
+      />
+      <v-text-field
+        v-model="search"
+        class="post-switch-item"
+        append-inner-icon="mdi-magnify"
+        label="请输入帖子 ID 或搜索词"
+        variant="outlined"
+        :single-line="true"
+        :hide-details="true"
+        @click:append="searchPost"
+        @keyup.enter="searchPost"
+      />
+      <v-btn :rounded="true" class="post-fresh-btn" @click="freshPostData()">
+        <v-icon>mdi-refresh</v-icon>
+        <span>刷新</span>
+      </v-btn>
+    </div>
+  </v-app-bar>
+  <div class="post-topic-grid">
+    <div v-for="post in posts" :key="post.post.post_id">
+      <TPostCard :model-value="post" v-if="post" />
+    </div>
+  </div>
+  <div class="load-more">
+    <v-btn class="post-topic-btn" :rounded="true" @click="freshPostData()">
+      已加载：{{ posts.length }}，加载更多
+    </v-btn>
+  </div>
+  <ToPostSearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, toRaw, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import showSnackbar from "../../components/func/snackbar.js";
+import TGameNav from "../../components/main/t-gamenav.vue";
+import TPostCard from "../../components/main/t-postcard.vue";
+import ToLoading from "../../components/overlay/to-loading.vue";
+import ToPostSearch from "../../components/post/to-postSearch.vue";
+import Mys from "../../plugins/Mys/index.js";
+import { createPost } from "../../utils/TGWindow.js";
+
+const gid = <string>useRoute().params.gid;
+const topic = <string>useRoute().params.topic;
+
+const loading = ref<boolean>(false);
+const loadingTitle = ref<string>("");
+const showSearch = ref<boolean>(false);
+
+const curGid = ref<number>(Number(gid));
+const curSortType = ref<0 | 1 | 2>(0);
+const search = ref<string>("");
+const topicInfo = ref<TGApp.Plugins.Mys.Topic.InfoData>();
+const posts = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
+const lastPostId = ref<string>();
+const isLastPage = ref<boolean>(false);
+const curGame = ref<TGApp.Plugins.Mys.Topic.GameInfo>();
+
+type SortSelect = { text: string; value: number };
+// todo 根据实际情况修改
+const sortOrderList: SortSelect[] = [
+  { text: "默认排序", value: 0 },
+  { text: "按时间排序", value: 1 },
+  { text: "按热度排序", value: 2 },
+];
+
+onMounted(async () => await firstLoad());
+watch(
+  () => curGame.value,
+  async () => await firstLoad(),
+);
+watch(
+  () => curSortType.value,
+  async () => await firstLoad(),
+);
+
+async function firstLoad(): Promise<void> {
+  loading.value = true;
+  loadingTitle.value = `正在加载话题${topic}信息`;
+  const info = await Mys.Post.getTopicFullInfo(gid, topic);
+  if ("retcode" in info) {
+    showSnackbar.error(`[${info.retcode}] ${info.message}`);
+    loading.value = false;
+    return;
+  }
+  topicInfo.value = info;
+  if (curGame.value === undefined) {
+    curGame.value = toRaw(info.game_info_list.find((i) => i.id === curGid.value));
+  }
+  if (curGame.value === undefined) curGame.value = info.game_info_list[0];
+  loadingTitle.value = `正在加载${curGame.value.name}帖子列表`;
+  const postList = await Mys.Post.getTopicPostList(gid, topic);
+  if ("retcode" in postList) {
+    showSnackbar.error(`[${postList.retcode}] ${postList.message}`);
+    loading.value = false;
+    return;
+  }
+  isLastPage.value = postList.is_last;
+  lastPostId.value = postList.last_id;
+  posts.value = postList.posts;
+  loading.value = false;
+  showSnackbar.success(`加载了 ${postList.posts.length} 条帖子`);
+}
+
+async function freshPostData(): Promise<void> {
+  if (isLastPage.value) {
+    showSnackbar.warn("已经到底了");
+    return;
+  }
+  loading.value = true;
+  loadingTitle.value = "正在加载帖子列表";
+  const postList = await Mys.Post.getTopicPostList(gid, topic, curSortType.value, lastPostId.value);
+  if ("retcode" in postList) {
+    showSnackbar.error(`[${postList.retcode}] ${postList.message}`);
+    loading.value = false;
+    return;
+  }
+  isLastPage.value = postList.is_last;
+  lastPostId.value = postList.last_id;
+  posts.value = posts.value.concat(postList.posts);
+  loading.value = false;
+  showSnackbar.success(`加载了 ${postList.posts.length} 条帖子`);
+}
+
+function searchPost(): void {
+  if (search.value === "") {
+    showSnackbar.warn("请输入搜索内容");
+    return;
+  }
+  const numCheck = Number(search.value);
+  if (isNaN(numCheck)) showSearch.value = true;
+  else createPost(search.value);
+}
+</script>
+<style lang="css" scoped>
+.post-topic-top {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  padding-right: 5px;
+  border-radius: 5px;
+  background: var(--box-bg-2);
+  gap: 5px;
+
+  img {
+    width: 64px;
+    height: 64px;
+  }
+
+  .post-topic-info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    :first-child {
+      color: var(--common-text-title);
+      font-family: var(--font-title);
+      font-size: 20px;
+    }
+  }
+}
+
+.post-topic-switch {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  margin: 0 10px;
+  gap: 10px;
+}
+
+.post-switch-item {
+  width: 250px;
+  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);
+}
+
+.post-topic-grid {
+  display: grid;
+  padding: 5px;
+  font-family: var(--font-title);
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+}
+
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  font-family: var(--font-title);
+  transition: all 0.3s linear;
+}
+</style>

src/plugins/Mys/request/postReq.ts

@@ -8,6 +8,8 @@ import TGHttp from "../../../utils/TGHttp.js";
 
 // MysPostApiBaseUrl => Mpabu
 const Mpabu = "https://bbs-api.mihoyo.com/post/wapi/";
+// MysTopicApiBaseUrl => Mtapu
+const Mtabu = "https://bbs-api.miyoushe.com/topic/wapi/";
 const Referer = "https://bbs.mihoyo.com/";
 
 /**
@@ -146,6 +148,59 @@ export async function getSubReplies(
   return resp.data;
 }
 
+/**
+ * @description 获取特定话题信息
+ * @since Beta v0.6.3
+ * @param {string} gid 游戏分区 ID
+ * @param {string} topicId 话题 ID
+ * @return {Promise<TGApp.Plugins.Mys.Topic.InfoData|TGApp.BBS.Response.Base>}
+ */
+export async function getTopicFullInfo(
+  gid: string,
+  topicId: string,
+): Promise<TGApp.Plugins.Mys.Topic.InfoData | TGApp.BBS.Response.Base> {
+  const resp = await TGHttp<TGApp.Plugins.Mys.Topic.InfoResponse>(`${Mtabu}getTopicFullInfo`, {
+    method: "GET",
+    headers: { referer: Referer },
+    query: { gids: gid, id: topicId },
+  });
+  if (resp.retcode !== 0) return <TGApp.BBS.Response.Base>resp;
+  return resp.data;
+}
+
+/**
+ * @description 获取特定话题帖子列表
+ * @since Beta v0.6.3
+ * @param {string} gid 游戏分区 ID
+ * @param {string} topicId 话题 ID
+ * @param {string} orderType 排序方式
+ * @param {string} lastId 最后一条帖子 ID
+ * @param {number} size 每页大小
+ * @return {Promise<TGApp.Plugins.Mys.Topic.PostData|TGApp.BBS.Response.Base>}
+ */
+export async function getTopicPostList(
+  gid: string,
+  topicId: string,
+  orderType: number = 0,
+  lastId?: string,
+  size: number = 20,
+): Promise<TGApp.Plugins.Mys.Topic.PostData | TGApp.BBS.Response.Base> {
+  const resp = await TGHttp<TGApp.Plugins.Mys.Topic.PostResponse>(`${Mpabu}getTopicPostList`, {
+    method: "GET",
+    headers: { referer: Referer },
+    query: {
+      gids: gid,
+      game_id: gid,
+      topic_id: topicId,
+      list_type: orderType,
+      last_id: lastId ?? "",
+      page_size: size,
+    },
+  });
+  if (resp.retcode !== 0) return <TGApp.BBS.Response.Base>resp;
+  return resp.data;
+}
+
 /**
  * @description 搜索帖子
  * @since Beta v0.6.2

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

@@ -0,0 +1,164 @@
+/**
+ * @file plugins/Mys/types/Topic.d.ts
+ * @description Mys 插件话题类型定义文件
+ * @since Beta v0.6.3
+ */
+
+declare namespace TGApp.Plugins.Mys.Topic {
+  /**
+   * @description 特定话题返回数据-话题信息
+   * @since Beta v0.6.3
+   * @interface InfoResponse
+   * @extends TGApp.BBS.Response.BaseWithData
+   * @property {InfoData} data 特定话题数据
+   * @return InfoResponse
+   */
+  interface InfoResponse extends TGApp.BBS.Response.BaseWithData {
+    data: InfoData;
+  }
+
+  /**
+   * @description 特定话题返回数据-帖子列表
+   * @since Beta v0.6.3
+   * @interface PostResponse
+   * @extends TGApp.BBS.Response.BaseWithData
+   * @property {PostData} data 特定话题帖子列表数据
+   * @return PostResponse
+   */
+  interface PostResponse extends TGApp.BBS.Response.BaseWithData {
+    data: PostData;
+  }
+
+  /**
+   * @description 特定话题数据
+   * @since Beta v0.6.3
+   * @interface InfoData
+   * @property {GameInfo[]} game_info_list 游戏信息列表
+   * @property {boolean} good_exist 是否有精华帖
+   * @property {number} good_post_cnt 精华帖数量
+   * @property {boolean} good_post_exist 是否有精华帖
+   * @property {number} hot_post_cnt 热帖数量
+   * @property {unknown[]} related_forums 相关版块
+   * @property {unknown[]} related_topics 相关话题
+   * @property {unknown[]} top_posts 置顶帖
+   * @property {Info} topic 话题信息
+   * @return InfoData
+   */
+  interface InfoData {
+    game_info_list: GameInfo[];
+    good_exist: boolean;
+    good_post_cnt: number;
+    good_post_exist: boolean;
+    hot_post_cnt: number;
+    related_forums: unknown[];
+    related_topics: unknown[];
+    top_posts: unknown[];
+    topic: Info;
+  }
+
+  /**
+   * @description 特定话题帖子列表数据
+   * @since Beta v0.6.3
+   * @interface PostData
+   * @property {boolean} is_last 是否最后一页
+   * @property {boolean} is_origin 是否原创
+   * @property {string} last_id 最后一条帖子 ID
+   * @property {TGApp.Plugins.Mys.Post.FullData[]} posts 帖子列表
+   * @return PostData
+   */
+  interface PostData {
+    is_last: boolean;
+    is_origin: boolean;
+    last_id: string;
+    posts: TGApp.Plugins.Mys.Post.FullData[];
+  }
+
+  /**
+   * @description 游戏信息
+   * @since Beta v0.6.3
+   * @interface GameInfo
+   * @property {number} id 游戏 ID
+   * @property {string} name 游戏名称
+   * @property {boolean} has_good 是否有精华帖
+   * @property {boolean} has_hot 是否有热帖
+   * @return GameInfo
+   */
+  interface GameInfo {
+    id: number;
+    name: string;
+    has_good: boolean;
+    has_hot: boolean;
+  }
+
+  /**
+   * @description 话题信息
+   * @since Beta v0.6.3
+   * @interface Info
+   * @property {string[]} alias 话题别名
+   * @property {number} content_type 内容类型
+   * @property {string} cover 封面图片 URL
+   * @property {number} created_at 创建时间(秒级时间戳)
+   * @property {string} creator 创建者
+   * @property {number} creator_type 创建者类型
+   * @property {number} default_game_id 默认游戏 ID
+   * @property {string} desc 话题描述
+   * @property {number} game_id 游戏 ID
+   * @property {number} good_cnt 精华帖数量
+   * @property {string} id 话题 ID
+   * @property {number} is_deleted 是否已删除，0-未删除，1-已删除
+   * @property {boolean} is_focus 是否关注
+   * @property {boolean} is_interactive 是否互动
+   * @property {string} name 话题名称
+   * @property {number} order 排序
+   * @property {unknown} related_forum_ids 相关版块 ID
+   * @property {unknown} stat 话题统计-可能为null
+   * @property {SortConfig[]} topic_sort_config 话题排序配置
+   * @property {number} topic_type 话题类型
+   * @property {string} updated_at 更新时间(秒级时间戳)
+   * @property {number[]} view_type 查看类型
+   * @return Info
+   */
+  interface Info {
+    alias: string[];
+    content_type: number;
+    cover: string;
+    created_at: number;
+    creator: string;
+    creator_type: number;
+    default_game_id: number;
+    desc: string;
+    game_id: number;
+    good_cnt: number;
+    id: string;
+    is_deleted: number;
+    is_focus: boolean;
+    is_interactive: boolean;
+    name: string;
+    order: number;
+    related_forum_ids: unknown;
+    stat: unknown;
+    topic_sort_config: SortConfig[];
+    topic_type: number;
+    updated_at: string;
+    view_type: number[];
+  }
+
+  /**
+   * @description 话题排序配置
+   * @since Beta v0.6.3
+   * @interface SortConfig
+   * @property {string} name 排序名称
+   * @property {number} type 排序类型
+   * @property {string} url 排序 URL
+   * @property {number} show_sort 展示顺序
+   * @property {string} data_report_name 数据报告名称
+   * @return SortConfig
+   */
+  interface SortConfig {
+    name: string;
+    type: number;
+    url: string;
+    show_sort: number;
+    data_report_name: string;
+  }
+}

src/router/modules/main.ts

@@ -1,7 +1,7 @@
 /**
  * @file router/modules/main.ts
  * @description 主路由模块
- * @since Beta v0.5.1
+ * @since Beta v0.6.3
  */
 
 const mainRoutes = [
@@ -23,7 +23,12 @@ const mainRoutes = [
   {
     path: "/posts/:gid?/:forum?",
     name: "酒馆",
-    component: async () => await import("../../pages/common/Posts.vue"),
+    component: async () => await import("../../pages/common/PostForum.vue"),
+  },
+  {
+    path: "/posts/:gid?/:topic",
+    name: "话题",
+    component: async () => await import("../../pages/common/PostTopic.vue"),
   },
   {
     path: "/achievements/:app?",

src/views/t-post.vue

@@ -61,8 +61,12 @@
         <span>{{ postData.collection.collection_title }}</span>
         <span>{{ postData.collection.cur }}/{{ postData.collection.total }}</span>
       </div>
-      <!-- todo 点击跳转 -->
+      <div
-      <div v-for="topic in postData.topics" :key="topic.id" class="tp-post-topic">
+        v-for="topic in postData.topics"
+        :key="topic.id"
+        class="tp-post-topic"
+        @click="toTopic(topic)"
+      >
         <v-icon size="12">mdi-tag</v-icon>
         <span>{{ topic.name }}</span>
       </div>
@@ -88,6 +92,7 @@
 <script lang="ts" setup>
 import { app } from "@tauri-apps/api";
 import { webviewWindow } from "@tauri-apps/api";
+import { emit } from "@tauri-apps/api/event";
 import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
@@ -125,8 +130,8 @@ const renderPost = ref<TGApp.Plugins.Mys.SctPost.Base[]>([]);
 const postData = ref<TGApp.Plugins.Mys.Post.FullData>();
 // 当前时间，秒级时间戳
 const shareTime = ref<number>(Math.floor(Date.now() / 1000));
-// 时间更新定时器
+// eslint-disable-next-line no-undef
-const shareTimeTimer = ref<any>();
+const shareTimeTimer = ref<NodeJS.Timeout | undefined>(undefined);
 // 合集
 const showCollection = ref<boolean>(false);
 
@@ -177,28 +182,39 @@ onMounted(async () => {
     await TGLogger.Info(`[t-post][${postId}][onMounted] 打开 JSON 窗口`);
     await createPostJson(postId);
   }
-  await nextTick(() => {
+  await nextTick();
-    shareTimeTimer.value = setInterval(() => {
+  if (shareTimeTimer.value !== undefined) {
-      shareTime.value = Math.floor(Date.now() / 1000);
+    clearInterval(shareTimeTimer.value);
-    }, 1000);
+    shareTimeTimer.value = undefined;
+  }
+  shareTimeTimer.value = setInterval(() => (shareTime.value = Math.floor(Date.now() / 1000)), 1000);
+  postRef.value = <HTMLElement>document.querySelector(".tp-post-title");
   loading.value = false;
-    postRef.value = <HTMLElement>document.querySelector(".tp-post-body");
-  });
 });
 
-watch(loadShare, async (value) => {
+watch(
-  if (value) {
+  () => loadShare.value,
+  async () => {
+    if (!loadShare.value) {
+      loadingSub.value = "";
+      loading.value = false;
+      await TGLogger.Info(
+        `[t-post.vue][${postId}][share] 生成分享图片完成：${shareTitle.value}.png`,
+      );
+      return;
+    }
     shareTime.value = Math.floor(Date.now() / 1000);
     loadingTitle.value = "正在生成分享图片";
     loadingSub.value = `${shareTitle.value}.png`;
     loading.value = true;
     await TGLogger.Info(`[t-post.vue][${postId}][share] 生成分享图片：${shareTitle.value}.png`);
-  } else {
+  },
-    loadingSub.value = "";
+);
-    loading.value = false;
+
-    await TGLogger.Info(`[t-post.vue][${postId}][share] 生成分享图片完成：${shareTitle.value}.png`);
+async function toTopic(topic: TGApp.Plugins.Mys.Post.Topic): Promise<void> {
+  const gid = postData.value?.post.game_id ?? topic.game_id;
+  await emit("active_deep_link", `router?path=/posts/${gid}/${topic.id}`);
 }
-});
 
 function showOverlayC() {
   showCollection.value = true;
@@ -270,7 +286,10 @@ async function toPost(): Promise<void> {
 }
 
 onUnmounted(() => {
+  if (shareTimeTimer.value !== undefined) {
     clearInterval(shareTimeTimer.value);
+    shareTimeTimer.value = undefined;
+  }
 });
 </script>
 <style lang="css" scoped>
@@ -417,6 +436,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   color: var(--box-text-5);
+  cursor: pointer;
   font-family: var(--font-title);
   font-size: 12px;
 }