fix: 修复了点击Back按钮时白屏的问题

Author: Zecyel

layouts/default.vue

@@ -51,7 +51,7 @@
             <template #breadcrumb>
               <el-breadcrumb separator="/">
 
-                <template v-for="item in layout_store.path">
+                <template v-for="item in page_info.path">
                   <el-breadcrumb-item v-if="'path' in item" :to="{ path: item.path }">
                     {{ item.name }}
                   </el-breadcrumb-item>
@@ -66,12 +66,12 @@
 
             <template #content>
               <div class="flex items-center">
-                <span class="text-large font-600 mr-3">{{ layout_store.title }}</span>
+                <span class="text-large font-600 mr-3">{{ page_info.title }}</span>
                 <span
                   class="text-sm mr-2"
                   style="color: var(--el-text-color-regular)"
-                  v-if="'subtitle' in layout_store"
-                >{{ layout_store.subtitle }}</span>
+                  v-if="'subtitle' in page_info"
+                >{{ page_info.subtitle }}</span>
               </div>
             </template>
 
@@ -85,13 +85,18 @@
 </template>
 
 <script setup>
+import { pageInfoMapper } from '~/util/route';
 
-const layout_store = useLayoutStore()
 const user_store = useUserStore()
 const router = useRouter()
 
+const page_info = computed(() => {
+  return pageInfoMapper[router.currentRoute.value.fullPath]
+})
+
 function goBack() {
-  router.push('/')
+  // router.push('/')
+  window.location.href = '/'
 }
 
 function login() {

pages/decrypt/history.vue

@@ -20,15 +20,6 @@
 import { getDecryptHistorySchema } from '~/api/shamir/decrypt';
 import { callApi } from '~/util/callApi';
 
-const layoutStore = useLayoutStore();
-
-layoutStore.title = "我的解密历史"
-layoutStore.path = [
-  { name: "Home", path: "/" },
-  { name: "Decrypt" },
-  { name: "History" }
-]
-
 const identity_name = ref('')
 
 const history = ref([])

pages/decrypt/status.vue

@@ -29,15 +29,6 @@
 import { getDecryptStatusSchema, getDecryptedEmailSchema } from '~/api/shamir/decrypt';
 import { callApi } from '~/util/callApi';
 
-const layoutStore = useLayoutStore();
-
-layoutStore.title = "查询解密状态"
-layoutStore.path = [
-  { name: "Home", path: "/" },
-  { name: "Decrypt" },
-  { name: "Status" }
-]
-
 const user_id = ref('')
 
 const visibility = ref(false)

pages/decrypt/upload.vue

@@ -78,15 +78,6 @@ import { decryptSchema, getPGPMessageSchema } from '~/api/shamir/decrypt';
 import { callApi } from '~/util/callApi';
 import * as openpgp from 'openpgp';
 
-const layoutStore = useLayoutStore();
-
-layoutStore.title = "解密用户数据"
-layoutStore.path = [
-  { name: "Home", path: "/" },
-  { name: "Decrypt" },
-  { name: "Upload" }
-]
-
 const activeTab = ref('manual')
 
 const cipher = ref('')

pages/index.vue

@@ -8,14 +8,6 @@
 
 <script setup>
 
-import { useLayoutStore } from '@/store/layout'
-const layoutStore = useLayoutStore()
-
-layoutStore.title = 'Home'
-layoutStore.path = [
-    { name: "Home", path: "/" }
-]
-
 const target = ref([
     // { desc: "User", path: "/user" },
     // { desc: "Treehole", path: "/treehole" }

pages/treehole/message.vue

@@ -19,14 +19,6 @@
 <script setup lang="ts">
 import { callApi } from '@/util/callApi'
 import { sendMessageSchema } from '~/api/treehole/message'
-const layoutStore = useLayoutStore();
-
-layoutStore.title = "发送站内信"
-layoutStore.path = [
-    { name: "Home", path: "/" },
-    { name: "Treehole" },
-    { name: "Message" }
-]
 
 const message = ref('')
 

pages/treehole/tag.vue

@@ -67,20 +67,9 @@
 </template>
 
 <script setup async>
-
-import { useLayoutStore } from '@/store/layout'
 import { callApi } from '@/util/callApi'
 import { tagListSchema, tagDeleteSchema, tagCreateSchema } from '~/api/treehole/tag'
 
-const layoutStore = useLayoutStore()
-
-layoutStore.title = "Tag Management"
-layoutStore.path = [
-    { name: "Home", path: "/" },
-    { name: "Treehole" },
-    { name: "Tag" }
-]
-
 // the following code is mess
 // but it works
 

pages/user/index.vue

@@ -14,22 +14,13 @@
 </template>
 
 <script setup>
-import { useLayoutStore } from '@/store/layout'
 import { useUserStore } from '@/store/user'
 import { callApi } from '@/util/callApi'
 import { loginSchema } from '@/api/user/login'
 
-const layoutStore = useLayoutStore()
 const router = useRouter()
 const userStore = useUserStore();
 
-layoutStore.title = "Login"
-layoutStore.path = [
-  { name: "Home", path: "/" },
-  { name: "User", path: '/user' },
-  { name: "Login" }
-]
-
 let login_form = reactive({
   email: "",
   password: ""

pages/user/login.vue

@@ -3,19 +3,8 @@
 </template>
 
 <script setup>
-import { useLayoutStore } from '@/store/layout'
-// import { useUserStore } from '@/store/user'
-
-const layoutStore = useLayoutStore()
 const userStore = useUserStore()
 
-layoutStore.title = "Logout"
-layoutStore.path = [
-    { name: "Home", path: "/" },
-    { name: "User", path: '/user' },
-    { name: "Logout" }
-]
-
 function logout() {
     userStore.logout();
     const route = useRouter();