🌱 仿照咨讯页写了个酒馆页面 #67

src/components/app/t-sidebar.vue

@@ -30,6 +30,11 @@
           <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon" />
         </template>
       </v-list-item>
+      <v-list-item title="酒馆" value="posts" :link="true" href="/posts">
+        <template #prepend>
+          <img src="/source/UI/posts.png" alt="posts" class="side-icon" />
+        </template>
+      </v-list-item>
       <v-list-item title="成就" value="achievements" :link="true" href="/achievements">
         <template #prepend>
           <img src="../../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon" />

src/pages/common/Posts.vue

@@ -0,0 +1,244 @@
+<template>
+  <ToLoading v-model="loading" :title="loadingTitle" />
+  <div class="posts-grid">
+    <v-card v-for="post in posts" :key="post.postId" class="post-card">
+      <div class="post-cover" @click="createPost(post)">
+        <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 class="pcu-right">
+            <span>{{ post.user.nickname }}</span>
+            <span>{{ post.user.label }}</span>
+          </div>
+        </div>
+        <div class="post-card-data">
+          <div class="pcd-item" :title="`浏览数：${post.data.view}`">
+            <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-forum" :title="`频道: ${post.forum.name}`">
+        <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 ToLoading from "../../components/overlay/to-loading.vue";
+import Mys from "../../plugins/Mys";
+import { createPost } from "../../utils/TGWindow";
+
+const loading = ref<boolean>(true);
+const loadingTitle = ref<string>("正在加载中...");
+
+const posts = ref<TGApp.Plugins.Mys.News.RenderCard[]>([]);
+
+onMounted(async () => {
+  loading.value = true;
+  const getData = await Mys.Post.forum(26);
+  posts.value = Mys.News.card.news(getData);
+  loading.value = false;
+});
+</script>
+<style lang="css" scoped>
+.posts-grid {
+  display: grid;
+  padding: 5px;
+  font-family: var(--font-title);
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+}
+
+.post-card {
+  border-radius: 5px;
+  background: var(--app-page-bg);
+  color: var(--box-text-1);
+}
+
+.dark .post-card {
+  border: 1px solid var(--common-shadow-2);
+}
+
+.post-cover {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 36 / 13;
+}
+
+.post-cover img {
+  min-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transition: all 0.3s linear;
+}
+
+.post-content {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 10px;
+  gap: 10px;
+}
+
+.post-card-title {
+  overflow: hidden;
+  width: 100%;
+  font-size: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.post-card-user {
+  display: flex;
+}
+
+.pcu-left {
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+
+.pcu-icon {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.pcu-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pcu-pendent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+.pcu-pendent img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pcu-right {
+  position: relative;
+  display: flex;
+  height: 50px;
+  flex-direction: column;
+  align-items: start;
+  color: var(--box-text-4);
+}
+
+.pcu-right :nth-child(1) {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  justify-content: start;
+  font-size: 16px;
+}
+
+.pcu-right :nth-child(2) {
+  display: flex;
+  width: 100%;
+  height: 20px;
+  align-items: center;
+  justify-content: start;
+  border-top: 2px solid var(--common-shadow-2);
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.post-card-forum {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  backdrop-filter: blur(20px);
+  background: rgb(0 0 0/20%);
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
+  box-shadow: 0 0 10px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
+}
+
+.post-card-forum img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.post-cover img:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+  transition: all 0.3s linear;
+}
+
+.post-card-data {
+  display: flex;
+  width: 100%;
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 5px;
+  column-gap: 10px;
+}
+
+.pcd-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--box-text-7);
+  font-size: 12px;
+  gap: 5px;
+  opacity: 0.6;
+}
+</style>

src/plugins/Mys/api/index.ts

@@ -1,8 +1,7 @@
 /**
- * @file plugins Mys api index.ts
+ * @file plugins/Mys/api/index.ts
  * @description Mys API
- * @author BTMuli <bt-muli@outlook.com>
+ * @since Beta v0.3.7
- * @since Alpha v0.2.1
  */
 
 const MysApi = {
@@ -10,6 +9,8 @@ const MysApi = {
   Gacha: "https://api-takumi.mihoyo.com/common/blackboard/ys_obc/v1/gacha_pool?app_sn=ys_obc",
   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}",
   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

@@ -6,6 +6,7 @@
 
 import MysApi from "./api";
 import { getLoginQr, getLoginStatus } from "./request/doGameLogin";
+import getForumList from "./request/getForumList";
 import getGachaData from "./request/getGachaData";
 import getLotteryData from "./request/getLotteryData";
 import getNewsList from "./request/getNewsList";
@@ -20,6 +21,7 @@ const Mys = {
   Api: MysApi,
   Post: {
     get: getPostData,
+    forum: getForumList,
   },
   Gacha: {
     get: getGachaData,

src/plugins/Mys/request/getForumList.ts

@@ -0,0 +1,30 @@
+/**
+ * @file plugins/Mys/request/getForumList.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} forumId 特定论坛 ID
+ * @param {number} gid GID
+ * @param {number} type 排序方式: 0-按热度排序，1-最新回复，2-按时间排序
+ * @return {Promise<TGApp.Plugins.Mys.Forum.FullData>}
+ */
+async function getForumList(
+  forumId: number,
+  gid: number = 2,
+  type: number = 0,
+): Promise<TGApp.Plugins.Mys.Forum.FullData> {
+  const url = MysApi.Forum.replace("{forum}", forumId.toString())
+    .replace("{gid}", gid.toString())
+    .replace("{type}", type.toString());
+  return await http.fetch<TGApp.Plugins.Mys.Forum.Response>(url).then((res) => res.data.data);
+}
+
+export default getForumList;

src/router/modules/main.ts

@@ -1,7 +1,7 @@
 /**
- * @file router modules main.ts
+ * @file router/modules/main.ts
  * @description 主路由模块
- * @since Beta v0.3.3
+ * @since Beta v0.3.7
  */
 
 const mainRoutes = [
@@ -20,6 +20,11 @@ const mainRoutes = [
     name: "咨讯",
     component: async () => await import("../../pages/common/News.vue"),
   },
+  {
+    path: "/posts",
+    name: "酒馆",
+    component: async () => await import("../../pages/common/Posts.vue"),
+  },
   {
     path: "/achievements/:app?",
     name: "成就",