⚡️ 优化咨讯页版块跳转，记忆当前类型

src/components/overlay/to-channel.vue

@@ -2,13 +2,15 @@
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
     <div class="toc-box">
       <div class="toc-top">
-        <div class="toc-title">请选择要跳转的频道</div>
+        <div class="toc-title">
+          <span>请选择要跳转的频道</span>
+        </div>
         <div class="toc-list">
           <div
             v-for="(item, index) in channelList"
             :key="index"
-            class="toc-list-item"
-            @click="toChannel(item.link)"
+            :class="props.gid === item.gid ? 'toc-list-item active' : 'toc-list-item'"
+            @click="toChannel(item)"
           >
             <img :src="item.icon" alt="icon" />
             <span>{{ item.title }}</span>
@@ -27,9 +29,13 @@
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 
+import { useAppStore } from "../../store/modules/app";
+import showSnackbar from "../func/snackbar";
 import TOverlay from "../main/t-overlay.vue";
 
 interface ToChannelProps {
+  gid?: string;
+  curType?: string;
   modelValue: boolean;
 }
 
@@ -38,7 +44,7 @@ type ToChannelEmits = (e: "update:modelValue", value: boolean) => void;
 interface ToChannelItem {
   title: string;
   icon: string;
-  link: string;
+  gid: string;
 }
 
 const props = withDefaults(defineProps<ToChannelProps>(), {
@@ -53,42 +59,43 @@ const visible = computed({
   },
 });
 const router = useRouter();
+const appStore = useAppStore();
 
 const channelList: ToChannelItem[] = [
   {
     title: "原神",
     icon: "/platforms/mhy/ys.webp",
-    link: "/news/2",
+    gid: "2",
   },
   {
     title: "崩坏：星穹铁道",
     icon: "/platforms/mhy/sr.webp",
-    link: "/news/6",
+    gid: "6",
   },
   {
     title: "崩坏3",
     icon: "/platforms/mhy/bh3.webp",
-    link: "/news/1",
+    gid: "1",
   },
   {
     title: "崩坏2",
     icon: "/platforms/mhy/bh2.webp",
-    link: "/news/3",
+    gid: "3",
   },
   {
     title: "未定事件簿",
     icon: "/platforms/mhy/wd.webp",
-    link: "/news/4",
+    gid: "4",
   },
   {
     title: "绝区零",
     icon: "/platforms/mhy/zzz.webp",
-    link: "/news/8",
+    gid: "8",
   },
   {
     title: "大别野",
     icon: "/platforms/mhy/dby.webp",
-    link: "/news/5",
+    gid: "5",
   },
 ];
 
@@ -96,14 +103,24 @@ function onCancel(): void {
   visible.value = false;
 }
 
-async function toChannel(link: string): Promise<void> {
-  visible.value = false;
-  await router.push(link).then(() => {
-    window.scrollTo(0, 0);
+async function toChannel(item: ToChannelItem): Promise<void> {
+  if (props.gid === item.gid) {
+    showSnackbar({
+      text: "当前已经在该频道",
+      color: "warn",
     });
-  setTimeout(() => {
-    window.location.reload();
-  }, 300);
+    return;
+  }
+  visible.value = false;
+  let link = `/news/${item.gid}/{type}`;
+  const typeList = ["notice", "news", "activity"];
+  if (typeList.includes(appStore.recentNewsType)) {
+    link = link.replace("{type}", appStore.recentNewsType);
+  } else {
+    link = link.replace("{type}", "notice");
+    appStore.recentNewsType = "notice";
+  }
+  await router.push(link);
 }
 </script>
 <style lang="css" scoped>
@@ -114,7 +131,7 @@ async function toChannel(link: string): Promise<void> {
 .toc-top {
   padding: 10px;
   border-radius: 5px;
-  background: var(--box-bg-1);
+  background: var(--app-page-bg);
 }
 
 .toc-title {
@@ -134,14 +151,20 @@ async function toChannel(link: string): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: start;
-  border: 1px solid var(--common-shadow-2);
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: var(--box-bg-2);
-  color: var(--box-text-2);
+  background: var(--box-bg-1);
+  color: var(--box-text-1);
   cursor: pointer;
   transition: all 0.5s linear;
 }
 
+.toc-list-item.active {
+  border: 1px solid var(--common-shadow-1);
+  background: var(--box-bg-2);
+  color: var(--box-text-2);
+}
+
 .toc-list-item img {
   width: 45px;
   height: 45px;

src/pages/common/News.vue

@@ -85,11 +85,11 @@
       </div>
     </v-window-item>
   </v-window>
-  <ToChannel v-model="showList" />
+  <ToChannel v-model="showList" :gid="gid" />
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import showSnackbar from "../../components/func/snackbar";
@@ -97,6 +97,7 @@ import ToChannel from "../../components/overlay/to-channel.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import TpAvatar from "../../components/post/tp-avatar.vue";
 import Mys from "../../plugins/Mys";
+import { useAppStore } from "../../store/modules/app";
 import TGLogger from "../../utils/TGLogger";
 import { createPost } from "../../utils/TGWindow";
 
@@ -129,6 +130,7 @@ const loadingTitle = ref<string>("正在加载");
 const loadingSub = ref<boolean>(false);
 
 // UI 数据
+const appStore = useAppStore();
 const tab = ref<NewsKey>("notice");
 const showList = ref<boolean>(false);
 const tabValues = ref<Array<NewsKey>>(["notice", "activity", "news"]);
@@ -160,8 +162,19 @@ const rawData = ref<RawData>({
 
 onMounted(async () => {
   await TGLogger.Info(`[News][${gid}][onMounted] 打开咨讯页面`);
+  const typeList = ["notice", "activity", "news"];
+  const curType = appStore.recentNewsType;
+  if (typeList.includes(curType)) {
+    tab.value = <NewsKey>curType;
+  } else {
     tab.value = "notice";
-  await firstLoad("notice");
+    appStore.recentNewsType = "notice";
+  }
+  await firstLoad(tab.value);
+});
+
+watch(tab, (val) => {
+  appStore.recentNewsType = val;
 });
 
 async function firstLoad(key: NewsKey): Promise<void> {

src/router/modules/main.ts

@@ -1,7 +1,7 @@
 /**
  * @file router/modules/main.ts
  * @description 主路由模块
- * @since Beta v0.3.7
+ * @since Beta v0.4.4
  */
 
 const mainRoutes = [
@@ -16,7 +16,7 @@ const mainRoutes = [
     component: async () => await import("../../pages/common/Announcements.vue"),
   },
   {
-    path: "/news/:gid",
+    path: "/news/:gid/:type?",
     name: "咨讯",
     component: async () => await import("../../pages/common/News.vue"),
   },

src/store/modules/app.ts

@@ -1,7 +1,7 @@
 /**
  * @file store/modules/app.ts
  * @description App store module
- * @since Beta v0.4.3
+ * @since Beta v0.4.4
  */
 
 import { path } from "@tauri-apps/api";
@@ -48,6 +48,8 @@ export const useAppStore = defineStore(
     const server = ref<SERVER>(SERVER.CN_ISLAND);
     // 语言
     const lang = ref<string>("zh-cn");
+    // 最近的咨讯类型
+    const recentNewsType = ref("notice");
 
     // 初始化
     function init(): void {
@@ -58,6 +60,7 @@ export const useAppStore = defineStore(
       sidebar.collapse = true;
       server.value = SERVER.CN_ISLAND;
       lang.value = "zh-cn";
+      recentNewsType.value = "notice";
       initDevice();
     }
 
@@ -83,6 +86,7 @@ export const useAppStore = defineStore(
       logDir,
       server,
       lang,
+      recentNewsType,
       init,
       changeTheme,
     };
@@ -107,7 +111,7 @@ export const useAppStore = defineStore(
       {
         key: "theme",
         storage: window.localStorage,
-        paths: ["theme", "server", "lang"],
+        paths: ["theme", "server", "lang", "recentNewsType"],
       },
       {
         key: "deviceInfo",