feat: 将本地响应式存储的命名空间提升到全局配置中

public/serverConfig.json

@@ -19,6 +19,7 @@
   "MenuArrowIconNoTransition": true,
   "CachingAsyncRoutes": false,
   "TooltipEffect": "light",
+  "ResponsiveStorageNameSpace": "responsive-",
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
     "options": {

src/config/index.ts

@@ -49,4 +49,7 @@ export const getServerConfig = async (app: App): Promise<undefined> => {
     });
 };
 
-export { getConfig, setConfig };
+/** 本地响应式存储的命名空间 */
+const responsiveStorageNameSpace = () => getConfig().ResponsiveStorageNameSpace;
+
+export { getConfig, setConfig, responsiveStorageNameSpace };

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<StorageConfigs>("responsive-configure")?.showLogo ??
+  storageLocal().getItem<StorageConfigs>(
-    true
+    `${responsiveStorageNameSpace()}configure`
+  )?.showLogo ?? true
 );
 
 const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =

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<StorageConfigs>("responsive-configure")?.showModel ||
+    storageLocal().getItem<StorageConfigs>(
-      "smart"
+      `${responsiveStorageNameSpace()}configure`
+    )?.showModel || "smart"
   );
   /** 是否隐藏标签页，默认显示 */
   const showTags =
     ref(
-      storageLocal().getItem<StorageConfigs>("responsive-configure").hideTabs
+      storageLocal().getItem<StorageConfigs>(
+        `${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<StorageConfigs>(
-        "responsive-configure"
+        `${responsiveStorageNameSpace()}configure`
       );
       configure.showModel = "card";
-      storageLocal().setItem("responsive-configure", configure);
+      storageLocal().setItem(
+        `${responsiveStorageNameSpace()}configure`,
+        configure
+      );
     }
   });
 

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<StorageConfigs>("responsive-locale")?.locale ?? "zh",
+    storageLocal().getItem<StorageConfigs>(
+      `${responsiveStorageNameSpace()}locale`
+    )?.locale ?? "zh",
   fallbackLocale: "en",
   messages: localesConfigs
 });

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<StorageConfigs>("responsive-layout")
+        storageLocal().getItem<StorageConfigs>(
-          ?.sidebarStatus ?? getConfig().SidebarStatus,
+          `${responsiveStorageNameSpace()}layout`
+        )?.sidebarStatus ?? getConfig().SidebarStatus,
       withoutAnimation: false,
       isClickCollapse: false
     },
     // 这里的layout用于监听容器拖拉后恢复对应的导航模式
     layout:
-      storageLocal().getItem<StorageConfigs>("responsive-layout")?.layout ??
+      storageLocal().getItem<StorageConfigs>(
-      getConfig().Layout,
+        `${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 =
+      const layout = storageLocal().getItem<StorageConfigs>(
-        storageLocal().getItem<StorageConfigs>("responsive-layout");
+        `${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);

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<StorageConfigs>("responsive-layout")
+      storageLocal().getItem<StorageConfigs>(
-        ?.epThemeColor ?? getConfig().EpThemeColor,
+        `${responsiveStorageNameSpace()}layout`
+      )?.epThemeColor ?? getConfig().EpThemeColor,
     epTheme:
-      storageLocal().getItem<StorageConfigs>("responsive-layout")?.theme ??
+      storageLocal().getItem<StorageConfigs>(
-      getConfig().Theme
+        `${responsiveStorageNameSpace()}layout`
+      )?.theme ?? getConfig().Theme
   }),
   getters: {
     getEpThemeColor(state) {
@@ -30,13 +32,14 @@ export const useEpThemeStore = defineStore({
   },
   actions: {
     setEpThemeColor(newColor: string): void {
-      const layout =
+      const layout = storageLocal().getItem<StorageConfigs>(
-        storageLocal().getItem<StorageConfigs>("responsive-layout");
+        `${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);
     }
   }
 });

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<StorageConfigs>("responsive-configure")
+    multiTags: storageLocal().getItem<StorageConfigs>(
-      ?.multiTagsCache
+      `${responsiveStorageNameSpace()}configure`
-      ? storageLocal().getItem<StorageConfigs>("responsive-tags")
+    )?.multiTagsCache
+      ? storageLocal().getItem<StorageConfigs>(
+          `${responsiveStorageNameSpace()}tags`
+        )
       : [...routerArrays],
     multiTagsCache: storageLocal().getItem<StorageConfigs>(
-      "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<T>(
       mode: string,

src/utils/responsive.ts

@@ -2,10 +2,10 @@
 import { App } from "vue";
 import Storage from "responsive-storage";
 import { routerArrays } from "@/layout/types";
-
+import { responsiveStorageNameSpace } from "@/config";
-const nameSpace = "responsive-";
 
 export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
+  const nameSpace = responsiveStorageNameSpace();
   const configObj = Object.assign(
     {
       // 国际化 默认中文zh

types/global.d.ts

@@ -97,6 +97,7 @@ declare global {
     MenuArrowIconNoTransition?: boolean;
     CachingAsyncRoutes?: boolean;
     TooltipEffect?: Effect;
+    ResponsiveStorageNameSpace?: string;
     MapConfigure?: {
       amapKey?: string;
       options: {