From db3de00fcfbba52d6c3a6bb478654be0afae297a Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 24 Aug 2023 14:08:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20<transition>=20?=
 =?UTF-8?q?=E5=92=8C=20<keep-alive>=20=E7=BB=84=E5=90=88=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=9A=84=E9=A1=B5=E9=9D=A2=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/permission.ts       |  2 ++
 src/store/modules/tags-view.ts |  6 ++++++
 src/utils/fix-blank-page.ts    | 15 +++++++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 src/utils/fix-blank-page.ts

diff --git a/src/router/permission.ts b/src/router/permission.ts
index 8d0d145..22c9ad6 100644
--- a/src/router/permission.ts
+++ b/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()
diff --git a/src/store/modules/tags-view.ts b/src/store/modules/tags-view.ts
index 51194de..63aa7cb 100644
--- a/src/store/modules/tags-view.ts
+++ b/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)
+}
diff --git a/src/utils/fix-blank-page.ts b/src/utils/fix-blank-page.ts
new file mode 100644
index 0000000..de34bb1
--- /dev/null
+++ b/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]
+}