feat: 新增标签栏缓存功能

src/config/layout.ts

@@ -14,6 +14,8 @@ interface LayoutSettings {
   showThemeSwitch: boolean
   /** 是否显示全屏按钮 */
   showScreenfull: boolean
+  /** 是否缓存标签栏 */
+  cacheTagsView: boolean
   /** 是否显示灰色模式 */
   showGreyMode: boolean
   /** 是否显示色弱模式 */
@@ -28,6 +30,7 @@ const layoutSettings: LayoutSettings = {
   showNotify: true,
   showThemeSwitch: true,
   showScreenfull: true,
+  cacheTagsView: false,
   showGreyMode: false,
   showColorWeakness: false
 }

src/constants/cache-key.ts

@@ -5,6 +5,8 @@ class CacheKey {
   static readonly TOKEN = `${SYSTEM_NAME}-token-key`
   static readonly SIDEBAR_STATUS = `${SYSTEM_NAME}-sidebar-status-key`
   static readonly ACTIVE_THEME_NAME = `${SYSTEM_NAME}-active-theme-name-key`
+  static readonly VISITED_VIEWS = `${SYSTEM_NAME}-visited-views-key`
+  static readonly CACHED_VIEWS = `${SYSTEM_NAME}-cached-views-key`
 }
 
 export default CacheKey

src/layout/components/Settings/index.vue

@@ -12,6 +12,7 @@ const {
   showNotify,
   showThemeSwitch,
   showScreenfull,
+  cacheTagsView,
   showGreyMode,
   showColorWeakness
 } = storeToRefs(settingsStore)
@@ -24,6 +25,7 @@ const switchSettings = {
   显示消息通知: showNotify,
   显示切换主题按钮: showThemeSwitch,
   显示全屏按钮: showScreenfull,
+  是否缓存标签栏: cacheTagsView,
   显示灰色模式: showGreyMode,
   显示色弱模式: showColorWeakness
 }

src/store/modules/tags-view.ts

@@ -1,12 +1,21 @@
-import { ref } from "vue"
+import { ref, watchEffect } from "vue"
 import { defineStore } from "pinia"
+import { useSettingsStore } from "./settings"
 import { type RouteLocationNormalized } from "vue-router"
+import { getVisitedViews, setVisitedViews, getCachedViews, setCachedViews } from "@/utils/cache/local-storage"
 
 export type TagView = Partial<RouteLocationNormalized>
 
 export const useTagsViewStore = defineStore("tags-view", () => {
-  const visitedViews = ref<TagView[]>([])
-  const cachedViews = ref<string[]>([])
+  const { cacheTagsView } = useSettingsStore()
+  const visitedViews = ref<TagView[]>(cacheTagsView ? getVisitedViews() : [])
+  const cachedViews = ref<string[]>(cacheTagsView ? getCachedViews() : [])
+
+  /** 缓存标签栏数据 */
+  watchEffect(() => {
+    setVisitedViews(visitedViews.value)
+    setCachedViews(cachedViews.value)
+  })
 
   //#region add
   const addVisitedView = (view: TagView) => {

src/store/modules/user.ts

@@ -3,6 +3,7 @@ import store from "@/store"
 import { defineStore } from "pinia"
 import { usePermissionStore } from "./permission"
 import { useTagsViewStore } from "./tags-view"
+import { useSettingsStore } from "./settings"
 import { getToken, removeToken, setToken } from "@/utils/cache/cookies"
 import router, { resetRouter } from "@/router"
 import { loginApi, getUserInfoApi } from "@/api/login"
@@ -17,6 +18,7 @@ export const useUserStore = defineStore("user", () => {
 
   const permissionStore = usePermissionStore()
   const tagsViewStore = useTagsViewStore()
+  const settingsStore = useSettingsStore()
 
   /** 设置角色数组 */
   const setRoles = (value: string[]) => {
@@ -64,8 +66,10 @@ export const useUserStore = defineStore("user", () => {
   }
   /** 重置 Visited Views 和 Cached Views */
   const _resetTagsView = () => {
-    tagsViewStore.delAllVisitedViews()
-    tagsViewStore.delAllCachedViews()
+    if (!settingsStore.cacheTagsView) {
+      tagsViewStore.delAllVisitedViews()
+      tagsViewStore.delAllCachedViews()
+    }
   }
 
   return { token, roles, username, setRoles, login, getInfo, changeRoles, logout, resetToken }

src/utils/cache/local-storage.ts

@@ -3,17 +3,39 @@
 import CacheKey from "@/constants/cache-key"
 import { type SidebarOpened, type SidebarClosed } from "@/constants/app-key"
 import { type ThemeName } from "@/hooks/useTheme"
+import { type TagView } from "@/store/modules/tags-view"
 
+//#region 侧边栏状态
 export const getSidebarStatus = () => {
   return localStorage.getItem(CacheKey.SIDEBAR_STATUS)
 }
 export const setSidebarStatus = (sidebarStatus: SidebarOpened | SidebarClosed) => {
   localStorage.setItem(CacheKey.SIDEBAR_STATUS, sidebarStatus)
 }
+//#endregion
 
+//#region 正在应用的主题名称
 export const getActiveThemeName = () => {
   return localStorage.getItem(CacheKey.ACTIVE_THEME_NAME) as ThemeName | null
 }
 export const setActiveThemeName = (themeName: ThemeName) => {
   localStorage.setItem(CacheKey.ACTIVE_THEME_NAME, themeName)
 }
+//#endregion
+
+//#region 标签栏
+export const getVisitedViews = () => {
+  const json = localStorage.getItem(CacheKey.VISITED_VIEWS)
+  return JSON.parse(json ?? "[]") as TagView[]
+}
+export const setVisitedViews = (views: TagView[]) => {
+  localStorage.setItem(CacheKey.VISITED_VIEWS, JSON.stringify(views))
+}
+export const getCachedViews = () => {
+  const json = localStorage.getItem(CacheKey.CACHED_VIEWS)
+  return JSON.parse(json ?? "[]") as string[]
+}
+export const setCachedViews = (views: string[]) => {
+  localStorage.setItem(CacheKey.CACHED_VIEWS, JSON.stringify(views))
+}
+//#endregion