🎨 优化链接跳转，调整UI

BTMuli · Nov 17, 2024 · 4bc1808 · 4bc1808
1 parent c7b5bf3
commit 4bc1808
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 52 deletions.
diff --git a/src/components/app/t-sidebar.vue b/src/components/app/t-sidebar.vue
@@ -38,7 +38,7 @@
           <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon" />
         </template>
       </v-list-item>
-      <v-list-item :title.attr="'帖子'" value="posts" :link="true" href="/posts">
+      <v-list-item :title.attr="'帖子'" value="posts" :link="true" href="/posts/forum">
         <template #title>帖子</template>
         <template #prepend>
           <img src="/source/UI/posts.png" alt="posts" class="side-icon" />

diff --git a/src/components/main/t-gamenav.vue b/src/components/main/t-gamenav.vue
@@ -152,13 +152,13 @@ function getLocalPath(forum?: string): string {
   const wdForums = ["37", "60", "42", "38"];
   const zzzForums = ["57", "59", "64", "65"];
   const dbyForums = ["54", "35", "34", "39", "47", "48", "55", "36"];
-  if (ysForums.includes(forum)) return `/posts/2/${forum}`;
-  if (srForums.includes(forum)) return `/posts/6/${forum}`;
-  if (bh3Forums.includes(forum)) return `/posts/1/${forum}`;
-  if (bh2Forums.includes(forum)) return `/posts/3/${forum}`;
-  if (wdForums.includes(forum)) return `/posts/4/${forum}`;
-  if (zzzForums.includes(forum)) return `/posts/8/${forum}`;
-  if (dbyForums.includes(forum)) return `/posts/5/${forum}`;
+  if (ysForums.includes(forum)) return `/posts/forum/2/${forum}`;
+  if (srForums.includes(forum)) return `/posts/forum/6/${forum}`;
+  if (bh3Forums.includes(forum)) return `/posts/forum/1/${forum}`;
+  if (bh2Forums.includes(forum)) return `/posts/forum/3/${forum}`;
+  if (wdForums.includes(forum)) return `/posts/forum/4/${forum}`;
+  if (zzzForums.includes(forum)) return `/posts/forum/8/${forum}`;
+  if (dbyForums.includes(forum)) return `/posts/forum/5/${forum}`;
   return "";
 }
 </script>

diff --git a/src/components/main/t-postcard.vue b/src/components/main/t-postcard.vue
@@ -1,27 +1,27 @@
 <template>
   <div v-if="card" :id="`post-card-${card.postId}`" class="tpc-card">
-    <div class="tpc-cover" @click="createPost(card)">
-      <img :src="localCover" alt="cover" v-if="localCover" />
-      <v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
-      <img src="/source/UI/defaultCover.webp" alt="cover" v-else />
-      <div v-if="isAct" class="tpc-act">
-        <div class="tpc-status">
-          {{ card.status?.status }}
-        </div>
-        <div class="tpc-time">
-          <v-icon>mdi-clock-time-four-outline</v-icon>
-          <span>{{ card.subtitle }}</span>
+    <div class="tpc-top">
+      <div class="tpc-cover" @click="createPost(card)">
+        <img :src="localCover" alt="cover" v-if="localCover" />
+        <v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
+        <img src="/source/UI/defaultCover.webp" alt="cover" v-else />
+        <div v-if="isAct" class="tpc-act">
+          <div class="tpc-status">{{ card.status?.status }}</div>
+          <div class="tpc-time">
+            <v-icon>mdi-clock-time-four-outline</v-icon>
+            <span>{{ card.subtitle }}</span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="tpc-content">
       <div class="tpc-title" :title="card.title" @click="shareCard">{{ card.title }}</div>
-      <TpAvatar v-if="card.user" :data="card.user" position="left" />
+    </div>
+    <div class="tpc-mid" v-if="card.user">
+      <TpAvatar :data="card.user" position="left" />
     </div>
     <div class="tpc-bottom" v-if="card.data">
       <div class="tpc-tags">
         <div v-for="topic in card.topics" :key="topic.id" class="tpc-tag" @click="toTopic(topic)">
-          <v-icon>mdi-tag</v-icon>
+          <v-icon size="10">mdi-tag</v-icon>
           <span>{{ topic.name }}</span>
         </div>
       </div>
@@ -52,6 +52,7 @@
       class="tpc-forum"
       v-if="card.forum && card.forum.name !== ''"
       :title="`频道: ${card.forum.name}`"
+      @click="toForum(card.forum)"
     >
       <img :src="card.forum.icon" :alt="card.forum.name" />
       <span>{{ card.forum.name }}</span>
@@ -193,12 +194,13 @@ function getPostCover(item: TGApp.Plugins.Mys.Post.FullData): string {
  * @returns {TGApp.Plugins.Mys.News.RenderCard} 渲染用咨讯列表项
  */
 function getCommonCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.News.RenderCard {
-  let forum = null;
-  let data = null;
+  let forum: TGApp.Plugins.Mys.News.RenderForum | null = null;
+  let data: TGApp.Plugins.Mys.News.RenderData | null = null;
   if (item.forum !== null) {
     forum = {
       name: item.forum.name,
       icon: item.forum.icon,
+      id: item.forum.id,
     };
   }
   if (item.stat !== null) {
@@ -248,7 +250,12 @@ async function shareCard(): Promise<void> {
 
 async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
   const gid = props.modelValue.post.game_id;
-  await emit("active_deep_link", `router?path=/posts/${gid}/${topic.id}`);
+  await emit("active_deep_link", `router?path=/posts/topic/${gid}/${topic.id}`);
+}
+
+async function toForum(forum: TGApp.Plugins.Mys.News.RenderForum): Promise<void> {
+  const gid = props.modelValue.post.game_id;
+  await emit("active_deep_link", `router?path=/posts/forum/${gid}/${forum.id}`);
 }
 </script>
 <style lang="css" scoped>
@@ -263,7 +270,18 @@ async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
   justify-content: space-between;
   border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
+  background: var(--box-bg-1);
   box-shadow: 2px 2px 5px var(--common-shadow-2);
+  row-gap: 10px;
+}
+
+.tpc-top {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 5px;
 }
 
 .tpc-cover {
@@ -285,27 +303,25 @@ async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
   transition: all 0.3s linear;
 }
 
-.tpc-content {
+.tpc-mid {
   position: relative;
-  display: flex;
   width: 100%;
-  flex-direction: column;
-  padding: 10px;
-  gap: 10px;
+  padding: 0 10px;
 }
 
 .tpc-bottom {
   position: relative;
   display: flex;
   width: 100%;
   flex-direction: column;
-  padding: 10px;
-  gap: 10px;
+  padding: 5px 10px;
+  row-gap: 5px;
 }
 
 .tpc-title {
   overflow: hidden;
   width: 100%;
+  padding: 5px 10px;
   cursor: pointer;
   font-family: var(--font-title);
   font-size: 18px;
@@ -318,20 +334,25 @@ async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
-  color: var(--tgc-pink-1);
+  color: var(--box-text-5);
   cursor: pointer;
   font-size: 12px;
-  gap: 3px;
+  gap: 5px;
 
   :hover {
-    color: var(--tgc-blue-2);
+    color: var(--box-text-3);
   }
 }
 
 .tpc-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0 3px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-2);
+  gap: 3px;
 }
 
 .tpc-forum {
@@ -348,6 +369,7 @@ async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
   border-bottom-left-radius: 5px;
   box-shadow: 0 0 10px var(--tgc-dark-1);
   color: var(--tgc-white-1);
+  cursor: pointer;
   text-shadow: 0 0 5px var(--tgc-dark-1);
 }
 

diff --git a/src/plugins/Mys/types/News.d.ts b/src/plugins/Mys/types/News.d.ts
@@ -81,17 +81,8 @@ declare namespace TGApp.Plugins.Mys.News {
     postId: number;
     subtitle: string;
     user: TGApp.Plugins.Mys.User.Post | null;
-    forum: {
-      name: string;
-      icon: string;
-    } | null;
-    data: {
-      mark: number;
-      forward: number;
-      like: number;
-      reply: number;
-      view: number;
-    } | null;
+    forum: RenderForum | null;
+    data: RenderData | null;
     status?: RenderStatus;
     topics: TGApp.Plugins.Mys.Topic.Info[];
   }
@@ -107,4 +98,38 @@ declare namespace TGApp.Plugins.Mys.News {
     status: string;
     colorCss: string;
   }
+
+  /**
+   * @description 用于渲染的咨讯信息
+   * @since Beta v0.6.3
+   * @interface RenderData
+   * @property {number} mark 帖子收藏数
+   * @property {number} forward 帖子转发数
+   * @property {number} like 帖子点赞数
+   * @property {number} reply 帖子回复数
+   * @property {number} view 帖子浏览数
+   * @return RenderData
+   */
+  interface RenderData {
+    mark: number;
+    forward: number;
+    like: number;
+    reply: number;
+    view: number;
+  }
+
+  /**
+   * @description 用于渲染的版块信息
+   * @since Beta v0.6.3
+   * @interface RenderForum
+   * @property {string} name 版块名称
+   * @property {string} icon 版块图标
+   * @property {string} id 版块 ID
+   * @return RenderForum
+   */
+  interface RenderForum {
+    name: string;
+    icon: string;
+    id: number;
+  }
 }
diff --git a/src/router/modules/main.ts b/src/router/modules/main.ts
@@ -21,12 +21,12 @@ const mainRoutes = [
     component: async () => await import("../../pages/common/News.vue"),
   },
   {
-    path: "/posts/:gid?/:forum?",
+    path: "/posts/forum/:gid?/:forum?",
     name: "酒馆",
     component: async () => await import("../../pages/common/PostForum.vue"),
   },
   {
-    path: "/posts/:gid?/:topic",
+    path: "/posts/topic/:gid?/:topic",
     name: "话题",
     component: async () => await import("../../pages/common/PostTopic.vue"),
   },

diff --git a/src/utils/linkParser.ts b/src/utils/linkParser.ts
@@ -89,7 +89,7 @@ export async function parseLink(
       if (url.pathname.startsWith("//discussion")) {
         const gid = url.pathname.split("/").pop();
         const forum = url.searchParams.get("forum_id");
-        await emit("active_deep_link", `router?path=/posts/${gid}/${forum}`);
+        await emit("active_deep_link", `router?path=/posts/forum/${gid}/${forum}`);
         return true;
       }
       if (url.pathname.startsWith("//homeForum")) {

diff --git a/src/views/t-post.vue b/src/views/t-post.vue
@@ -10,8 +10,7 @@
         PostID：{{ postId }} | Render by TeyvatGuide v{{ appVersion }}
       </div>
       <div class="tp-post-meta">
-        <!-- todo 点击跳转 -->
-        <div class="mpm-forum" v-if="postData.forum">
+        <div class="mpm-forum" v-if="postData.forum" @click="toForum(postData.forum)">
           <img :src="getGameIcon(postData.forum.game_id)" alt="gameIcon" />
           <img :src="postData.forum.icon" alt="forumIcon" />
           <span>{{ postData.forum.name }}</span>
@@ -246,6 +245,10 @@ async function toPost(): Promise<void> {
   await TGClient.open("web_thin", url);
 }
 
+async function toForum(forum: TGApp.Plugins.Mys.Post.Forum): Promise<void> {
+  await emit("active_deep_link", `router?path=/posts/forum/${forum.game_id}/${forum.id}`);
+}
+
 onUnmounted(() => {
   if (shareTimeTimer.value !== undefined) {
     clearInterval(shareTimeTimer.value);
@@ -339,6 +342,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .mpm-forum img {
@@ -400,5 +404,9 @@ onUnmounted(() => {
   cursor: pointer;
   font-family: var(--font-title);
   font-size: 12px;
+
+  &:hover {
+    color: var(--box-text-3);
+  }
 }
 </style>