💄 精简侧边栏，游戏切换置于页面内

src/components/t-sidebar.vue

@@ -29,57 +29,17 @@
           <img src="../assets/icons/board.svg" alt="annoIcon" class="side-icon">
         </template>
       </v-list-item>
+      <v-list-item title="咨讯" value="news" link href="/news/2">
+        <template #prepend>
+          <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon">
+        </template>
+      </v-list-item>
       <v-list-item title="成就" value="achievements" link href="/achievements">
         <template #prepend>
           <img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
         </template>
       </v-list-item>
       <v-divider />
-      <v-list-group value="mihoyo" fluid>
-        <template #activator="{ props }">
-          <v-list-item title="米游社" v-bind="props">
-            <template #prepend>
-              <img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon">
-            </template>
-          </v-list-item>
-        </template>
-        <v-list-item title="原神" value="mhy-ys" link href="/news/2">
-          <template #prepend>
-            <img src="/platforms/mhy/ys.webp" alt="ys" class="side-icon">
-          </template>
-        </v-list-item>
-        <v-list-item title="星穹铁道" value="mhy-sr" link href="/news/6">
-          <template #prepend>
-            <img src="/platforms/mhy/sr.webp" alt="sr" class="side-icon">
-          </template>
-        </v-list-item>
-        <v-list-item title="崩坏3" value="mhy-bh3" link href="/news/1">
-          <template #prepend>
-            <img src="/platforms/mhy/bh3.webp" alt="bh3" class="side-icon">
-          </template>
-        </v-list-item>
-        <v-list-item title="崩坏2" value="mhy-bh2" link href="/news/3">
-          <template #prepend>
-            <img src="/platforms/mhy/bh2.webp" alt="bh2" class="side-icon">
-          </template>
-        </v-list-item>
-        <v-list-item title="未定事件簿" value="mhy-wd" link href="/news/4">
-          <template #prepend>
-            <img src="/platforms/mhy/wd.webp" alt="wd" class="side-icon">
-          </template>
-        </v-list-item>
-        <v-list-item title="绝区零" value="mhy-zzz" link href="/news/8">
-          <template #prepend>
-            <img src="/platforms/mhy/zzz.webp" alt="zzz" class="side-icon">
-          </template>
-        </v-list-item>
-        <v-list-item title="大别野" value="mhy-dby" link href="/news/5">
-          <template #prepend>
-            <img src="/platforms/mhy/dby.webp" alt="dby" class="side-icon">
-          </template>
-        </v-list-item>
-      </v-list-group>
-      <v-divider />
       <v-list-group value="wiki" fluid>
         <template #activator="{ props }">
           <v-list-item title="图鉴" v-bind="props">
@@ -141,8 +101,6 @@ import { event } from "@tauri-apps/api";
 // store
 import { useAppStore } from "../store/modules/app";
 import { useUserStore } from "../store/modules/user";
-// utils
-import TGRequest from "../web/request/TGRequest";
 
 const appStore = useAppStore();
 const userStore = useUserStore();
@@ -173,7 +131,6 @@ const open = computed({
     return appStore.getSubmenu();
   },
   set (value: string[]) {
-    appStore.sidebar.submenu.mihoyo = value.includes("mihoyo");
     appStore.sidebar.submenu.wiki = value.includes("wiki");
   },
 });

src/store/modules/app.ts

@@ -32,8 +32,6 @@ export const useAppStore = defineStore(
       collapse: true,
       // 是否显示
       submenu: {
-        // 米游社
-        mihoyo: false,
         // 数据库
         wiki: false,
       },
@@ -59,15 +57,15 @@ export const useAppStore = defineStore(
     function init (): void {
       loading.value = false;
       devMode.value = false;
-      sidebar.submenu.mihoyo = false;
-      sidebar.submenu.wiki = false;
+      sidebar.submenu = {
+        wiki: false,
+      };
       theme.value = "default";
     }
 
     function getSubmenu (): string[] {
       const open = [];
       if (sidebar.submenu.wiki) open.push("wiki");
-      if (sidebar.submenu.mihoyo) open.push("mihoyo");
       return open;
     }
 

src/views/t-news.vue

@@ -14,12 +14,15 @@
         新闻
       </v-tab>
       <v-spacer />
-      <v-btn v-if="showSwitch" class="switch-btn" @click="switchAnno">
+      <v-btn class="switch-btn" @click="switchAnno">
         <template #prepend>
           <v-icon>mdi-bullhorn</v-icon>
         </template>
         切换游戏内公告
       </v-btn>
+      <v-btn class="switch-chan" @click="showList=true">
+        <v-icon>mdi-view-list</v-icon>
+      </v-btn>
       <v-text-field
         v-show="appStore.devMode"
         v-model="search"
@@ -143,6 +146,71 @@
     <v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
       {{ snackbarText }}
     </v-snackbar>
+    <v-overlay v-model="showList">
+      <div class="choice-box">
+        <div class="choice-title">
+          请选择要跳转的频道
+        </div>
+        <div class="choice-list">
+          <div class="choice-item" @click="toChannel('/news/2')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/ys.webp" alt="ys">
+            </div>
+            <div class="choice-name">
+              原神
+            </div>
+          </div>
+          <div class="choice-item" @click="toChannel('/news/6')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/sr.webp" alt="sr">
+            </div>
+            <div class="choice-name">
+              崩坏：星穹铁道
+            </div>
+          </div>
+          <div class="choice-item" @click="toChannel('/news/1')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/bh3.webp" alt="bh3">
+            </div>
+            <div class="choice-name">
+              崩坏3
+            </div>
+          </div>
+          <div class="choice-item" @click="toChannel('/news/3')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/bh2.webp" alt="bh2">
+            </div>
+            <div class="choice-name">
+              崩坏2
+            </div>
+          </div>
+          <div class="choice-item" @click="toChannel('/news/4')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/wd.webp" alt="wd">
+            </div>
+            <div class="choice-name">
+              未定事件簿
+            </div>
+          </div>
+          <div class="choice-item" @click="toChannel('/news/8')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/zzz.webp" alt="zzz">
+            </div>
+            <div class="choice-name">
+              绝区零
+            </div>
+          </div>
+          <div class="choice-item" @click="toChannel('/news/5')">
+            <div class="choice-icon">
+              <img src="/platforms/mhy/dby.webp" alt="sg">
+            </div>
+            <div class="choice-name">
+              大别野
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-overlay>
   </div>
 </template>
 
@@ -164,7 +232,6 @@ import { NewsCard, NewsData } from "../plugins/Mys/interface/news";
 const router = useRouter();
 const gid = useRoute().params.gid as string;
 const showNews = ref((gid !== "5") as boolean);
-const showSwitch = ref((gid === "2") as boolean);
 
 // Store
 const appStore = useAppStore();
@@ -183,6 +250,7 @@ const search = ref("" as string);
 
 // 数据
 const tab = ref("" as string);
+const showList = ref(false as boolean);
 const postData = ref({
   notice: [] as NewsCard[],
   activity: [] as NewsCard[],
@@ -237,6 +305,12 @@ async function switchAnno () {
   await router.push("/announcements");
 }
 
+async function toChannel (chan:string) {
+  showList.value = false;
+  await router.push(chan);
+  await window.location.reload();
+}
+
 // 加载更多
 async function loadMore (data: string) {
   loadingSub.value = true;
@@ -379,7 +453,7 @@ async function searchPost () {
   overflow: hidden;
 }
 
-.news-cover :hover {
+.news-cover:hover {
   transform: scale(1.1);
   transition: all 0.3s linear;
   cursor: pointer;
@@ -402,6 +476,15 @@ async function searchPost () {
   color: var(--content-text-3);
 }
 
+.switch-chan {
+  font-family: Genshin, serif;
+  background: var(--btn-bg-1);
+  height: 40px;
+  margin-right: 10px;
+  margin-top: 5px;
+  color: var(--content-text-3);
+}
+
 /* load more */
 .load-news {
   font-family: Genshin, serif;
@@ -423,4 +506,75 @@ async function searchPost () {
   width: 18px;
   height: 18px;
 }
+
+/* chan choice */
+.choice-box {
+  position: absolute;
+  top: calc(50vh - 200px);
+  left: calc(50vw - 140px);
+  width: 400px;
+  height: 280px;
+  background: var(--content-bg-2);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.choice-title {
+  font-family: Genshin, serif;
+  font-size: 20px;
+  color: var(--content-text-3);
+  margin-bottom: 10px;
+}
+
+.choice-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+}
+
+.choice-item {
+  cursor: pointer;
+  font-family: Genshin, serif;
+  background: rgb(0 0 0 / 30%);
+  color: var(--content-text-3);
+  height: 45px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-around;
+  transition: all 0.3s linear;
+}
+
+.choice-item:hover {
+  border-radius: 5px;
+  background: rgb(0 0 0 / 50%);
+  transition: all 0.5s linear;
+}
+
+.choice-icon {
+  position: relative;
+  width: 45px;
+  height: 45px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.choice-icon img {
+  width: 45px;
+  height: 45px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.choice-name {
+  width: calc(100% - 50px);
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+  position: relative;
+  color: #fff;
+  font-size: 12px;
+  font-family: Genshin-Light, serif;
+}
 </style>