fix: 修复 <transition> 和 <keep-alive> 组合使用导致的页面空白

src/router/permission.ts

@@ -3,6 +3,7 @@ import { useUserStoreHook } from "@/store/modules/user"
 import { usePermissionStoreHook } from "@/store/modules/permission"
 import { ElMessage } from "element-plus"
 import { getToken } from "@/utils/cache/cookies"
+import { fixBlankPage } from "@/utils/fix-blank-page"
 import routeSettings from "@/config/route"
 import isWhiteList from "@/config/white-list"
 import NProgress from "nprogress"
@@ -11,6 +12,7 @@ import "nprogress/nprogress.css"
 NProgress.configure({ showSpinner: false })
 
 router.beforeEach(async (to, _from, next) => {
+  fixBlankPage()
   NProgress.start()
   const userStore = useUserStoreHook()
   const permissionStore = usePermissionStoreHook()

src/store/modules/tags-view.ts

@@ -1,4 +1,5 @@
 import { ref, watchEffect } from "vue"
+import store from "@/store"
 import { defineStore } from "pinia"
 import { useSettingsStore } from "./settings"
 import { type RouteLocationNormalized } from "vue-router"
@@ -93,3 +94,8 @@ export const useTagsViewStore = defineStore("tags-view", () => {
     delAllCachedViews
   }
 })
+
+/** 在 setup 外使用 */
+export function useTagsViewStoreHook() {
+  return useTagsViewStore(store)
+}

src/utils/fix-blank-page.ts

@@ -0,0 +1,15 @@
+import { useTagsViewStoreHook } from "@/store/modules/tags-view"
+
+/**
+ * 功能：修复 <transition> 和 <keep-alive> 组合使用导致的页面空白
+ * 原因：似乎是 Vue 本身的 BUG：https://github.com/vuejs/core/issues/7121
+ * 复现：在不使用该函数，可以通过如下步骤复现：
+ * 1. 进入一个页面
+ * 2. 修改该页面的 TS 代码并保存
+ * 3. 回到浏览器切换一下页面
+ * 4. 结果：内容区没有加载出来呈现空白状态
+ */
+export const fixBlankPage = () => {
+  const tagsViewStore = useTagsViewStoreHook()
+  tagsViewStore.cachedViews = [...tagsViewStore.cachedViews]
+}