From e1b8089386af16785f3b0e64bff56b5aba4c01ef Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 20 Jun 2023 20:07:06 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E5=8D=95=E6=8F=90=E5=87=BA=E6=9D=A5=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/overlay/to-channel.vue | 143 +++++++++++++++++++++++++
 src/views/t-news.vue                  | 144 +-------------------------
 2 files changed, 145 insertions(+), 142 deletions(-)
 create mode 100644 src/components/overlay/to-channel.vue

diff --git a/src/components/overlay/to-channel.vue b/src/components/overlay/to-channel.vue
new file mode 100644
index 00000000..3d2486c1
--- /dev/null
+++ b/src/components/overlay/to-channel.vue
@@ -0,0 +1,143 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div class="toc-box">
+      <div class="toc-title">
+        请选择要跳转的频道
+      </div>
+      <div class="toc-list">
+        <div v-for="item in channelList" class="toc-list-item" @click="toChannel(item.link)">
+          <img :src="item.icon" alt="icon">
+          <span>{{ item.title }}</span>
+        </div>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import TOverlay from "../main/t-overlay.vue";
+
+interface ToChannelProps {
+  modelValue: boolean;
+}
+
+interface ToChannelEmits {
+  (e: "update:modelValue", value: boolean): void;
+}
+
+interface ToChannelItem {
+  title: string;
+  icon: string;
+  link: string;
+}
+
+const props = withDefaults(defineProps<ToChannelProps>(), {
+  modelValue: false,
+});
+const emits = defineEmits<ToChannelEmits>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emits("update:modelValue", value),
+});
+const router = useRouter();
+
+const channelList: ToChannelItem[] = [
+  {
+    title: "原神",
+    icon: "/platforms/mhy/ys.webp",
+    link: "/news/2",
+  },
+  {
+    title: "崩坏：星穹铁道",
+    icon: "/platforms/mhy/sr.webp",
+    link: "/news/6",
+  },
+  {
+    title: "崩坏3",
+    icon: "/platforms/mhy/bh3.webp",
+    link: "/news/1",
+  },
+  {
+    title: "崩坏2",
+    icon: "/platforms/mhy/bh2.webp",
+    link: "/news/3",
+  },
+  {
+    title: "未定事件簿",
+    icon: "/platforms/mhy/wd.webp",
+    link: "/news/4",
+  },
+  {
+    title: "绝区零",
+    icon: "/platforms/mhy/zzz.webp",
+    link: "/news/8",
+  },
+  {
+    title: "大别野",
+    icon: "/platforms/mhy/dby.webp",
+    link: "/news/5",
+  }];
+
+function onCancel () {
+  visible.value = false;
+}
+function toChannel (link:string) {
+  visible.value = false;
+  router.push(link);
+  setTimeout(() => {
+    window.location.reload();
+  }, 300);
+}
+</script>
+<style lang="css" scoped>
+.toc-box {
+  background: rgb(255 255 255 / 30%);
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.toc-title {
+  font-family: var(--font-title);
+  font-size: 20px;
+  color: var(--common-color-blue);
+}
+
+.toc-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+}
+
+.toc-list-item {
+  cursor: pointer;
+  display: flex;
+  background: rgb(0 0 0 / 20%);
+  border-radius: 5px;
+  align-items: center;
+  justify-content: start;
+  color: var(--common-color-black);
+  transition: all 0.5s linear;
+}
+
+.toc-list-item:hover {
+  background: rgb(0 0 0 / 50%);
+  color: var(--common-color-white);
+}
+
+.toc-list-item img {
+  width: 45px;
+  height: 45px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  margin-right: 10px;
+}
+
+.toc-list-item span {
+  font-family: var(--font-title);
+  font-size: 16px;
+  margin-right: 10px;
+}
+</style>
diff --git a/src/views/t-news.vue b/src/views/t-news.vue
index 123377fc..1593ae12 100644
--- a/src/views/t-news.vue
+++ b/src/views/t-news.vue
@@ -143,71 +143,7 @@
   <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>
+  <ToChannel v-model="showList" />
 </template>
 
 <script lang="ts" setup>
@@ -215,6 +151,7 @@
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import TOLoading from "../components/overlay/to-loading.vue";
+import ToChannel from "../components/overlay/to-channel.vue";
 // store
 import { useAppStore } from "../store/modules/app";
 // plugin
@@ -311,12 +248,6 @@ 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;
@@ -488,75 +419,4 @@ 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>