🎨 优化链接跳转，调整UI

2025-12-12 09:18:14 +08:00 · 2024-11-17 10:47:25 +08:00
parent c7b5bf34ef
commit 4bc1808478
7 changed files with 107 additions and 52 deletions
--- 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" />
--- 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>
--- 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-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-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 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,13 +303,10 @@ 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 {
@@ -299,13 +314,14 @@ async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
  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);
 }

--- 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;
+  }
 }
--- 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"),
  },
--- 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")) {
--- 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>