diff --git a/src/config/layout.ts b/src/config/layout.ts index aaa0d3d..9d45b58 100644 --- a/src/config/layout.ts +++ b/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 } diff --git a/src/constants/cache-key.ts b/src/constants/cache-key.ts index e1f0692..a99c6f4 100644 --- a/src/constants/cache-key.ts +++ b/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 diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue index f837f41..3b83a88 100644 --- a/src/layout/components/Settings/index.vue +++ b/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 } diff --git a/src/store/modules/tags-view.ts b/src/store/modules/tags-view.ts index 272cd63..51194de 100644 --- a/src/store/modules/tags-view.ts +++ b/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 export const useTagsViewStore = defineStore("tags-view", () => { - const visitedViews = ref([]) - const cachedViews = ref([]) + const { cacheTagsView } = useSettingsStore() + const visitedViews = ref(cacheTagsView ? getVisitedViews() : []) + const cachedViews = ref(cacheTagsView ? getCachedViews() : []) + + /** 缓存标签栏数据 */ + watchEffect(() => { + setVisitedViews(visitedViews.value) + setCachedViews(cachedViews.value) + }) //#region add const addVisitedView = (view: TagView) => { diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 687df83..70ac62b 100644 --- a/src/store/modules/user.ts +++ b/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 } diff --git a/src/utils/cache/local-storage.ts b/src/utils/cache/local-storage.ts index 639b769..d384227 100644 --- a/src/utils/cache/local-storage.ts +++ b/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