refactor: save

src/App.vue

@@ -1,22 +1,11 @@
 <template>
   <router-view v-slot="{ Component }">
     <transition :name="transitionName">
-      <keep-alive :exclude="store.excludeRoutes">
+      <keep-alive :exclude="store.excludeNames">
         <component :is="Component" />
       </keep-alive>
     </transition>
   </router-view>
-  <BaseMask v-if="!isMobile" @click="isMobile = true" />
-  <div v-if="!isMobile" class="guide">
-    <Icon class="danger" icon="mynaui:danger-triangle" />
-    <Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
-    <div class="txt">
-      <h2>切换至手机模式获取最佳体验</h2>
-      <h3>1. 按 F12 调出控制台</h3>
-      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
-    </div>
-    <img src="@/assets/img/guide.png" alt="" />
-  </div>
   <Call />
 </template>
 <script setup lang="ts">
@@ -35,7 +24,6 @@ import { BASE_URL } from '@/config'
 
 const store = useBaseStore()
 const route = useRoute()
-const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
 const transitionName = ref('go')
 
 // watch $route 决定使用哪种过渡
@@ -104,44 +92,6 @@ onMounted(() => {
   }
 }
 
-.guide {
-  color: white;
-  z-index: 999;
-  background: var(--active-main-bg);
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 16rem;
-  overflow: hidden;
-  text-align: center;
-
-  .danger {
-    margin-top: 10rem;
-    font-size: 40rem;
-    color: red;
-  }
-
-  .close {
-    cursor: pointer;
-    font-size: 18rem;
-    color: white;
-    position: absolute;
-    right: 15rem;
-    top: 15rem;
-  }
-
-  .txt {
-    text-align: left;
-    padding: 0 24rem;
-  }
-
-  img {
-    display: block;
-    width: 350rem;
-  }
-}
-
 .go-enter-from {
   transform: translate3d(100%, 0, 0);
 }

src/pages/BasePage.js

@@ -1,17 +0,0 @@
-export default {
-  data() {
-    return {
-      mainScrollTop: 0
-    }
-  },
-  activated() {
-    if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) {
-      this.$refs.mainScroll.wrapper.scrollTop = this.mainScrollTop
-    }
-  },
-  deactivated() {
-    if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) {
-      this.mainScrollTop = this.$refs.mainScroll.wrapper.scrollTop
-    }
-  }
-}

src/pages/home/index.vue

@@ -196,6 +196,18 @@
     </ConfirmDialog>
 
     <ShareToFriend v-model="state.shareToFriend" />
+
+    <BaseMask v-if="!isMobile" @click="isMobile = true" />
+    <div v-if="!isMobile" class="guide">
+      <Icon class="danger" icon="mynaui:danger-triangle" />
+      <Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
+      <div class="txt">
+        <h2>切换至手机模式获取最佳体验</h2>
+        <h3>1. 按 F12 调出控制台</h3>
+        <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
+      </div>
+      <img src="@/assets/img/guide.png" alt="" />
+    </div>
   </div>
 </template>
 
@@ -226,10 +238,12 @@ import { DefaultUser } from '@/utils/const_var'
 import { _no } from '@/utils'
 import LongVideo from '@/pages/home/slide/LongVideo.vue'
 import { useBaseStore } from '@/store/pinia'
+import BaseMask from '@/components/BaseMask.vue'
 
 const nav = useNav()
 const baseStore = useBaseStore()
 const uploader = ref()
+const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
 
 const state = reactive({
   active: true,
@@ -457,4 +471,42 @@ function dislike() {
   overflow: hidden;
   border-radius: 10rem;
 }
+
+.guide {
+  color: white;
+  z-index: 999;
+  background: var(--active-main-bg);
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 16rem;
+  overflow: hidden;
+  text-align: center;
+
+  .danger {
+    margin-top: 10rem;
+    font-size: 40rem;
+    color: red;
+  }
+
+  .close {
+    cursor: pointer;
+    font-size: 18rem;
+    color: white;
+    position: absolute;
+    right: 15rem;
+    top: 15rem;
+  }
+
+  .txt {
+    text-align: left;
+    padding: 0 24rem;
+  }
+
+  img {
+    display: block;
+    width: 350rem;
+  }
+}
 </style>

src/router/index.ts

@@ -30,24 +30,19 @@ router.beforeEach((to, from) => {
   if (toDepth > fromDepth) {
     if (to.matched && to.matched.length) {
       const toComponentName = to.matched[0].components?.default.name
-      // store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName})
+      baseStore.updateExcludeNames({ type: 'remove', value: toComponentName })
-      baseStore.updateExcludeRoutes({ type: 'remove', value: toComponentName })
-      // console.log('to', toComponentName)
       // console.log('前进')
       // console.log('删除', toComponentName)
     }
   } else {
     if (from.matched && from.matched.length) {
       const fromComponentName = from.matched[0].components?.default.name
-      // store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName})
+      baseStore.updateExcludeNames({ type: 'add', value: fromComponentName })
-      baseStore.updateExcludeRoutes({ type: 'add', value: fromComponentName })
 
       // console.log('后退')
       // console.log('添加', fromComponentName)
     }
   }
-  // ...
-  // 返回 false 以取消导航
   return true
 })
 

src/store/pinia.ts

@@ -11,7 +11,7 @@ export const useBaseStore = defineStore('base', {
       maskDialog: false,
       maskDialogMode: 'dark',
       version: '17.1.0',
-      excludeRoutes: [],
+      excludeNames: [],
       judgeValue: 20,
       homeRefresh: 60,
       loading: false,
@@ -78,18 +78,18 @@ export const useBaseStore = defineStore('base', {
         this.maskDialogMode = val.mode
       }
     },
-    updateExcludeRoutes(val) {
+    updateExcludeNames(val) {
       if (val.type === 'add') {
-        if (!this.excludeRoutes.find((v) => v === val.value)) {
+        if (!this.excludeNames.find((v) => v === val.value)) {
-          this.excludeRoutes.push(val.value)
+          this.excludeNames.push(val.value)
         }
       } else {
-        const resIndex = this.excludeRoutes.findIndex((v) => v === val.value)
+        const resIndex = this.excludeNames.findIndex((v) => v === val.value)
         if (resIndex !== -1) {
-          this.excludeRoutes.splice(resIndex, 1)
+          this.excludeNames.splice(resIndex, 1)
         }
       }
-      // console.log('store.excludeRoutes', store.excludeRoutes,val)
+      // console.log('store.excludeNames', store.excludeNames,val)
     }
   }
 })