diff --git a/public/serverConfig.json b/public/serverConfig.json index 40bbe05f9..c27581808 100644 --- a/public/serverConfig.json +++ b/public/serverConfig.json @@ -19,6 +19,7 @@ "MenuArrowIconNoTransition": true, "CachingAsyncRoutes": false, "TooltipEffect": "light", + "ResponsiveStorageNameSpace": "responsive-", "MapConfigure": { "amapKey": "97b3248d1553172e81f168cf94ea667e", "options": { diff --git a/src/config/index.ts b/src/config/index.ts index 9b0a3726f..4cd301665 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -49,4 +49,7 @@ export const getServerConfig = async (app: App): Promise => { }); }; -export { getConfig, setConfig }; +/** 本地响应式存储的命名空间 */ +const responsiveStorageNameSpace = () => getConfig().ResponsiveStorageNameSpace; + +export { getConfig, setConfig, responsiveStorageNameSpace }; diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue index 8eeda9fc7..7f5cb3180 100644 --- a/src/layout/components/sidebar/vertical.vue +++ b/src/layout/components/sidebar/vertical.vue @@ -6,14 +6,16 @@ import SidebarItem from "./sidebarItem.vue"; import leftCollapse from "./leftCollapse.vue"; import { useNav } from "@/layout/hooks/useNav"; import { storageLocal } from "@pureadmin/utils"; +import { responsiveStorageNameSpace } from "@/config"; import { ref, computed, watch, onBeforeMount } from "vue"; import { findRouteByPath, getParentPaths } from "@/router/utils"; import { usePermissionStoreHook } from "@/store/modules/permission"; const route = useRoute(); const showLogo = ref( - storageLocal().getItem("responsive-configure")?.showLogo ?? - true + storageLocal().getItem( + `${responsiveStorageNameSpace()}configure` + )?.showLogo ?? true ); const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } = diff --git a/src/layout/hooks/useTag.ts b/src/layout/hooks/useTag.ts index 40fb1922b..8d35cdfc1 100644 --- a/src/layout/hooks/useTag.ts +++ b/src/layout/hooks/useTag.ts @@ -12,6 +12,7 @@ import { tagsViewsType } from "../types"; import { useEventListener } from "@vueuse/core"; import { useRoute, useRouter } from "vue-router"; import { transformI18n, $t } from "@/plugins/i18n"; +import { responsiveStorageNameSpace } from "@/config"; import { useSettingStoreHook } from "@/store/modules/settings"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags"; import { @@ -46,13 +47,16 @@ export function useTags() { /** 显示模式,默认灵动模式 */ const showModel = ref( - storageLocal().getItem("responsive-configure")?.showModel || - "smart" + storageLocal().getItem( + `${responsiveStorageNameSpace()}configure` + )?.showModel || "smart" ); /** 是否隐藏标签页,默认显示 */ const showTags = ref( - storageLocal().getItem("responsive-configure").hideTabs + storageLocal().getItem( + `${responsiveStorageNameSpace()}configure` + ).hideTabs ) ?? ref("false"); const multiTags: any = computed(() => { return useMultiTagsStoreHook().multiTags; @@ -201,10 +205,13 @@ export function useTags() { onMounted(() => { if (!showModel.value) { const configure = storageLocal().getItem( - "responsive-configure" + `${responsiveStorageNameSpace()}configure` ); configure.showModel = "card"; - storageLocal().setItem("responsive-configure", configure); + storageLocal().setItem( + `${responsiveStorageNameSpace()}configure`, + configure + ); } }); diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts index 0d32f233a..98fa6b803 100644 --- a/src/plugins/i18n.ts +++ b/src/plugins/i18n.ts @@ -2,6 +2,7 @@ import { App, WritableComputedRef } from "vue"; import { storageLocal } from "@pureadmin/utils"; import { type I18n, createI18n } from "vue-i18n"; +import { responsiveStorageNameSpace } from "@/config"; // element-plus国际化 import enLocale from "element-plus/lib/locale/lang/en"; @@ -63,7 +64,9 @@ export const $t = (key: string) => key; export const i18n: I18n = createI18n({ legacy: false, locale: - storageLocal().getItem("responsive-locale")?.locale ?? "zh", + storageLocal().getItem( + `${responsiveStorageNameSpace()}locale` + )?.locale ?? "zh", fallbackLocale: "en", messages: localesConfigs }); diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index d9de982b4..f90e94ca0 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -1,7 +1,7 @@ import { store } from "@/store"; import { appType } from "./types"; import { defineStore } from "pinia"; -import { getConfig } from "@/config"; +import { getConfig, responsiveStorageNameSpace } from "@/config"; import { deviceDetection, storageLocal } from "@pureadmin/utils"; export const useAppStore = defineStore({ @@ -9,15 +9,17 @@ export const useAppStore = defineStore({ state: (): appType => ({ sidebar: { opened: - storageLocal().getItem("responsive-layout") - ?.sidebarStatus ?? getConfig().SidebarStatus, + storageLocal().getItem( + `${responsiveStorageNameSpace()}layout` + )?.sidebarStatus ?? getConfig().SidebarStatus, withoutAnimation: false, isClickCollapse: false }, // 这里的layout用于监听容器拖拉后恢复对应的导航模式 layout: - storageLocal().getItem("responsive-layout")?.layout ?? - getConfig().Layout, + storageLocal().getItem( + `${responsiveStorageNameSpace()}layout` + )?.layout ?? getConfig().Layout, device: deviceDetection() ? "mobile" : "desktop", // 作用于 src/views/components/draggable/index.vue 页面,当离开页面并不会销毁 new Swap(),sortablejs 官网也没有提供任何销毁的 api sortSwap: false @@ -32,8 +34,9 @@ export const useAppStore = defineStore({ }, actions: { TOGGLE_SIDEBAR(opened?: boolean, resize?: string) { - const layout = - storageLocal().getItem("responsive-layout"); + const layout = storageLocal().getItem( + `${responsiveStorageNameSpace()}layout` + ); if (opened && resize) { this.sidebar.withoutAnimation = true; this.sidebar.opened = true; @@ -48,7 +51,7 @@ export const useAppStore = defineStore({ this.sidebar.isClickCollapse = !this.sidebar.opened; layout.sidebarStatus = this.sidebar.opened; } - storageLocal().setItem("responsive-layout", layout); + storageLocal().setItem(`${responsiveStorageNameSpace()}layout`, layout); }, async toggleSideBar(opened?: boolean, resize?: string) { await this.TOGGLE_SIDEBAR(opened, resize); diff --git a/src/store/modules/epTheme.ts b/src/store/modules/epTheme.ts index 956148745..b5ec91c09 100644 --- a/src/store/modules/epTheme.ts +++ b/src/store/modules/epTheme.ts @@ -1,17 +1,19 @@ import { store } from "@/store"; import { defineStore } from "pinia"; -import { getConfig } from "@/config"; import { storageLocal } from "@pureadmin/utils"; +import { getConfig, responsiveStorageNameSpace } from "@/config"; export const useEpThemeStore = defineStore({ id: "pure-epTheme", state: () => ({ epThemeColor: - storageLocal().getItem("responsive-layout") - ?.epThemeColor ?? getConfig().EpThemeColor, + storageLocal().getItem( + `${responsiveStorageNameSpace()}layout` + )?.epThemeColor ?? getConfig().EpThemeColor, epTheme: - storageLocal().getItem("responsive-layout")?.theme ?? - getConfig().Theme + storageLocal().getItem( + `${responsiveStorageNameSpace()}layout` + )?.theme ?? getConfig().Theme }), getters: { getEpThemeColor(state) { @@ -30,13 +32,14 @@ export const useEpThemeStore = defineStore({ }, actions: { setEpThemeColor(newColor: string): void { - const layout = - storageLocal().getItem("responsive-layout"); + const layout = storageLocal().getItem( + `${responsiveStorageNameSpace()}layout` + ); this.epTheme = layout?.theme; this.epThemeColor = newColor; if (!layout) return; layout.epThemeColor = newColor; - storageLocal().setItem("responsive-layout", layout); + storageLocal().setItem(`${responsiveStorageNameSpace()}layout`, layout); } } }); diff --git a/src/store/modules/multiTags.ts b/src/store/modules/multiTags.ts index fbbd9b5b2..0f0d0481b 100644 --- a/src/store/modules/multiTags.ts +++ b/src/store/modules/multiTags.ts @@ -2,18 +2,22 @@ import { defineStore } from "pinia"; import { store } from "@/store"; import { routerArrays } from "@/layout/types"; import { multiType, positionType } from "./types"; +import { responsiveStorageNameSpace } from "@/config"; import { isEqual, isBoolean, isUrl, storageLocal } from "@pureadmin/utils"; export const useMultiTagsStore = defineStore({ id: "pure-multiTags", state: () => ({ // 存储标签页信息(路由信息) - multiTags: storageLocal().getItem("responsive-configure") - ?.multiTagsCache - ? storageLocal().getItem("responsive-tags") + multiTags: storageLocal().getItem( + `${responsiveStorageNameSpace()}configure` + )?.multiTagsCache + ? storageLocal().getItem( + `${responsiveStorageNameSpace()}tags` + ) : [...routerArrays], multiTagsCache: storageLocal().getItem( - "responsive-configure" + `${responsiveStorageNameSpace()}configure` )?.multiTagsCache }), getters: { @@ -25,14 +29,20 @@ export const useMultiTagsStore = defineStore({ multiTagsCacheChange(multiTagsCache: boolean) { this.multiTagsCache = multiTagsCache; if (multiTagsCache) { - storageLocal().setItem("responsive-tags", this.multiTags); + storageLocal().setItem( + `${responsiveStorageNameSpace()}tags`, + this.multiTags + ); } else { - storageLocal().removeItem("responsive-tags"); + storageLocal().removeItem(`${responsiveStorageNameSpace()}tags`); } }, tagsCache(multiTags) { this.getMultiTagsCache && - storageLocal().setItem("responsive-tags", multiTags); + storageLocal().setItem( + `${responsiveStorageNameSpace()}tags`, + multiTags + ); }, handleTags( mode: string, diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts index b4daef706..73fa54cee 100644 --- a/src/utils/responsive.ts +++ b/src/utils/responsive.ts @@ -2,10 +2,10 @@ import { App } from "vue"; import Storage from "responsive-storage"; import { routerArrays } from "@/layout/types"; - -const nameSpace = "responsive-"; +import { responsiveStorageNameSpace } from "@/config"; export const injectResponsiveStorage = (app: App, config: ServerConfigs) => { + const nameSpace = responsiveStorageNameSpace(); const configObj = Object.assign( { // 国际化 默认中文zh diff --git a/types/global.d.ts b/types/global.d.ts index f3ccc2d82..64b562345 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -97,6 +97,7 @@ declare global { MenuArrowIconNoTransition?: boolean; CachingAsyncRoutes?: boolean; TooltipEffect?: Effect; + ResponsiveStorageNameSpace?: string; MapConfigure?: { amapKey?: string; options: {