Merge pull request #166 from xiaoxian521/perf/storage

perf: storage

public/serverConfig.json

@@ -12,6 +12,10 @@
   "Grey": false,
   "Weak": false,
   "HideTabs": false,
+  "SidebarStatus": true,
+  "EpThemeColor": "#409EFF",
+  "ShowLogo": true,
+  "ShowModel": "smart",
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
     "options": {

src/layout/components/appMain.vue

@@ -27,7 +27,7 @@ const transitions = computed(() => {
 });
 
 const hideTabs = computed(() => {
-  return instance?.sets.hideTabs;
+  return instance?.configure.hideTabs;
 });
 
 const layout = computed(() => {

src/layout/components/setting/index.vue

@@ -79,17 +79,19 @@ if (unref(layoutTheme)) {
 }
 
 // 默认灵动模式
-const markValue = ref(storageLocal.getItem("showModel") || "smart");
+const markValue = ref(instance.configure?.showModel ?? "smart");
 
-const logoVal = ref(storageLocal.getItem("logoVal") || "1");
+const logoVal = ref(instance.configure?.showLogo ?? true);
 
 const epThemeColor = ref(useEpThemeStoreHook().getEpThemeColor);
 
 const settings = reactive({
-  greyVal: instance.sets.grey,
-  weakVal: instance.sets.weak,
-  tabsVal: instance.sets.hideTabs,
-  multiTagsCache: instance.sets.multiTagsCache
+  greyVal: instance.configure.grey,
+  weakVal: instance.configure.weak,
+  tabsVal: instance.configure.hideTabs,
+  showLogo: instance.configure.showLogo,
+  showModel: instance.configure.showModel,
+  multiTagsCache: instance.configure.multiTagsCache
 });
 
 const getThemeColorStyle = computed(() => {
@@ -98,6 +100,12 @@ const getThemeColorStyle = computed(() => {
   };
 });
 
+function changeStorageConfigure(key, val) {
+  const storageConfigure = instance.configure;
+  storageConfigure[key] = val;
+  instance.configure = storageConfigure;
+}
+
 function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
   const targetEl = target || document.body;
   let { className } = targetEl;
@@ -108,12 +116,7 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
 // 灰色模式设置
 const greyChange = (value): void => {
   toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
-  instance.sets = {
-    grey: value,
-    weak: instance.sets.weak,
-    hideTabs: instance.sets.hideTabs,
-    multiTagsCache: instance.sets.multiTagsCache
-  };
+  changeStorageConfigure("grey", value);
 };
 
 // 色弱模式设置
@@ -123,33 +126,18 @@ const weekChange = (value): void => {
     "html-weakness",
     document.querySelector("html")
   );
-  instance.sets = {
-    grey: instance.sets.grey,
-    weak: value,
-    hideTabs: instance.sets.hideTabs,
-    multiTagsCache: instance.sets.multiTagsCache
-  };
+  changeStorageConfigure("weak", value);
 };
 
 const tagsChange = () => {
   let showVal = settings.tabsVal;
-  instance.sets = {
-    grey: instance.sets.grey,
-    weak: instance.sets.weak,
-    hideTabs: showVal,
-    multiTagsCache: instance.sets.multiTagsCache
-  };
+  changeStorageConfigure("hideTabs", showVal);
   emitter.emit("tagViewsChange", showVal);
 };
 
 const multiTagsCacheChange = () => {
   let multiTagsCache = settings.multiTagsCache;
-  instance.sets = {
-    grey: instance.sets.grey,
-    weak: instance.sets.weak,
-    hideTabs: instance.sets.hideTabs,
-    multiTagsCache: multiTagsCache
-  };
+  changeStorageConfigure("multiTagsCache", multiTagsCache);
   useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
 };
 
@@ -174,22 +162,22 @@ function onReset() {
     }
   ]);
   useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache);
-  useEpThemeStoreHook().setEpThemeColor("#409EFF");
+  useEpThemeStoreHook().setEpThemeColor(getConfig().EpThemeColor);
   storageLocal.clear();
   storageSession.clear();
   router.push("/login");
 }
 
 function onChange(label) {
-  storageLocal.setItem("showModel", label);
+  changeStorageConfigure("showModel", label);
   emitter.emit("tagViewsShowModel", label);
 }
 
 // 侧边栏Logo
 function logoChange() {
-  unref(logoVal) === "1"
-    ? storageLocal.setItem("logoVal", "1")
-    : storageLocal.setItem("logoVal", "-1");
+  unref(logoVal)
+    ? changeStorageConfigure("showLogo", true)
+    : changeStorageConfigure("showLogo", false);
   emitter.emit("logoChange", unref(logoVal));
 }
 
@@ -238,13 +226,19 @@ function setLayoutModel(layout: string) {
   instance.layout = {
     layout,
     theme: layoutTheme.value.theme,
-    darkMode: instance.layout.darkMode
+    darkMode: instance.layout.darkMode,
+    sidebarStatus: instance.layout.sidebarStatus,
+    epThemeColor: instance.layout.epThemeColor
   };
   useAppStoreHook().setLayout(layout);
 }
 
+// 存放夜间主题切换前的导航主题色
+let tempLayoutThemeColor;
+
 // 设置导航主题色
 function setLayoutThemeColor(theme: string) {
+  tempLayoutThemeColor = instance.layout.theme;
   layoutTheme.value.theme = theme;
   toggleTheme({
     scopeName: `layout-theme-${theme}`
@@ -252,11 +246,13 @@ function setLayoutThemeColor(theme: string) {
   instance.layout = {
     layout: useAppStoreHook().layout,
     theme,
-    darkMode: dataTheme.value
+    darkMode: dataTheme.value,
+    sidebarStatus: instance.layout.sidebarStatus,
+    epThemeColor: instance.layout.epThemeColor
   };
 
   if (theme === "default" || theme === "light") {
-    setEpThemeColor("#409EFF");
+    setEpThemeColor(getConfig().EpThemeColor);
   } else {
     const colors = find(themeColors.value, { themeColor: theme });
     const color = "#" + rgbHex(colors.rgb);
@@ -280,10 +276,13 @@ function dataThemeChange() {
     setLayoutThemeColor("light");
   } else {
     body.setAttribute("data-theme", "");
+    tempLayoutThemeColor && setLayoutThemeColor(tempLayoutThemeColor);
     instance.layout = {
       layout: useAppStoreHook().layout,
       theme: instance.layout.theme,
-      darkMode: dataTheme.value
+      darkMode: dataTheme.value,
+      sidebarStatus: instance.layout.sidebarStatus,
+      epThemeColor: instance.layout.epThemeColor
     };
   }
 }
@@ -400,8 +399,8 @@ nextTick(() => {
         <el-switch
           v-model="logoVal"
           inline-prompt
-          active-value="1"
-          inactive-value="-1"
+          :active-value="true"
+          :inactive-value="false"
           inactive-color="#a6a6a6"
           active-text="开"
           inactive-text="关"

src/layout/components/sidebar/vertical.vue

@@ -12,7 +12,9 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 const route = useRoute();
 const pureApp = useAppStoreHook();
 const router = useRouter().options.routes;
-const showLogo = ref(storageLocal.getItem("logoVal") || "1");
+const showLogo = ref(
+  storageLocal.getItem("responsive-configure")?.showLogo ?? true
+);
 const isCollapse = computed(() => {
   return !pureApp.getSidebarStatus;
 });
@@ -58,7 +60,7 @@ onBeforeMount(() => {
 
 <template>
   <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
-    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
+    <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"

src/layout/components/tag/index.vue

@@ -232,9 +232,13 @@ const tagsViews = ref<Array<tagsViewsType>>([
 ]);
 
 // 显示模式，默认灵动模式显示
-const showModel = ref(storageLocal.getItem("showModel") || "smart");
+const showModel = ref(
+  storageLocal.getItem("responsive-configure")?.showModel || "smart"
+);
 if (!showModel.value) {
-  storageLocal.setItem("showModel", "card");
+  const configure = storageLocal.getItem("responsive-configure");
+  configure.showModel = "card";
+  storageLocal.setItem("responsive-configure", configure);
 }
 
 let visible = ref(false);

src/layout/index.vue

@@ -16,8 +16,8 @@ import { useAppStoreHook } from "/@/store/modules/app";
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
 import { deviceDetection } from "/@/utils/deviceDetection";
-import { useSettingStoreHook } from "/@/store/modules/settings";
 import { useMultiTagsStore } from "/@/store/modules/multiTags";
+import { useSettingStoreHook } from "/@/store/modules/settings";
 
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -52,16 +52,20 @@ const layout = computed(() => {
     instance.$storage.layout = {
       layout: instance.$config?.Layout ?? "vertical",
       theme: instance.$config?.Theme ?? "default",
-      darkMode: instance.$config?.DarkMode ?? false
+      darkMode: instance.$config?.DarkMode ?? false,
+      sidebarStatus: instance.$config?.SidebarStatus ?? true,
+      epThemeColor: instance.$config?.EpThemeColor ?? "#409EFF"
     };
   }
   // 灰色模式、色弱模式、隐藏标签页
-  if (!instance.$storage.sets) {
+  if (!instance.$storage.configure) {
     // eslint-disable-next-line
-    instance.$storage.sets = {
+    instance.$storage.configure = {
       grey: instance.$config?.Grey ?? false,
       weak: instance.$config?.Weak ?? false,
       hideTabs: instance.$config?.HideTabs ?? false,
+      showLogo: instance.$config?.ShowLogo ?? true,
+      showModel: instance.$config?.ShowModel ?? "smart",
       multiTagsCache: instance.$config?.MultiTagsCache ?? false
     };
   }
@@ -91,7 +95,7 @@ const set: setType = reactive({
   }),
 
   hideTabs: computed(() => {
-    return instance.$storage?.sets.hideTabs;
+    return instance.$storage?.configure.hideTabs;
   })
 });
 
@@ -100,7 +104,9 @@ function setTheme(layoutModel: string) {
   instance.$storage.layout = {
     layout: `${layoutModel}`,
     theme: instance.$storage.layout?.theme,
-    darkMode: instance.$storage.layout?.darkMode
+    darkMode: instance.$storage.layout?.darkMode,
+    sidebarStatus: instance.$storage.layout?.sidebarStatus,
+    epThemeColor: instance.$storage.layout?.epThemeColor
   };
 }
 

src/router/modules/index.ts

@@ -1,6 +1,7 @@
 // 静态路由
 import homeRouter from "./home";
 import errorRouter from "./error";
+import guideRouter from "./guide";
 import editorRouter from "./editor";
 import nestedRouter from "./nested";
 import menuTreeRouter from "./menuTree";
@@ -8,7 +9,6 @@ import externalLink from "./externalLink";
 import flowChartRouter from "./flowchart";
 import remainingRouter from "./remaining";
 import componentsRouter from "./components";
-import guideRouter from "./guide";
 import { RouteRecordRaw, RouteComponent } from "vue-router";
 
 import {
@@ -21,13 +21,13 @@ import {
 const routes = [
   homeRouter,
   errorRouter,
+  guideRouter,
   nestedRouter,
   externalLink,
   editorRouter,
   menuTreeRouter,
   flowChartRouter,
-  componentsRouter,
-  guideRouter
+  componentsRouter
 ];
 
 // 导出处理后的静态路由（三级及以上的路由全部拍成二级）

src/store/modules/app.ts

@@ -1,17 +1,17 @@
-import { storageLocal } from "/@/utils/storage";
-import { deviceDetection } from "/@/utils/deviceDetection";
 import { store } from "/@/store";
 import { appType } from "./types";
 import { defineStore } from "pinia";
 import { getConfig } from "/@/config";
+import { storageLocal } from "/@/utils/storage";
+import { deviceDetection } from "/@/utils/deviceDetection";
 
 export const useAppStore = defineStore({
   id: "pure-app",
   state: (): appType => ({
     sidebar: {
-      opened: storageLocal.getItem("sidebarStatus")
-        ? !!+storageLocal.getItem("sidebarStatus")
-        : true,
+      opened:
+        storageLocal.getItem("responsive-layout")?.sidebarStatus ??
+        getConfig().SidebarStatus,
       withoutAnimation: false,
       isClickHamburger: false
     },
@@ -30,20 +30,22 @@ export const useAppStore = defineStore({
   },
   actions: {
     TOGGLE_SIDEBAR(opened?: boolean, resize?: string) {
+      const layout = storageLocal.getItem("responsive-layout");
       if (opened && resize) {
         this.sidebar.withoutAnimation = true;
         this.sidebar.opened = true;
-        storageLocal.setItem("sidebarStatus", true);
+        layout.sidebarStatus = true;
       } else if (!opened && resize) {
         this.sidebar.withoutAnimation = true;
         this.sidebar.opened = false;
-        storageLocal.setItem("sidebarStatus", false);
+        layout.sidebarStatus = false;
       } else if (!opened && !resize) {
         this.sidebar.withoutAnimation = false;
         this.sidebar.opened = !this.sidebar.opened;
         this.sidebar.isClickHamburger = !this.sidebar.opened;
-        storageLocal.setItem("sidebarStatus", this.sidebar.opened);
+        layout.sidebarStatus = this.sidebar.opened;
       }
+      storageLocal.setItem("responsive-layout", layout);
     },
     TOGGLE_DEVICE(device: string) {
       this.device = device;

src/store/modules/epTheme.ts

@@ -1,11 +1,14 @@
 import { store } from "/@/store";
 import { defineStore } from "pinia";
+import { getConfig } from "/@/config";
 import { storageLocal } from "/@/utils/storage";
 
 export const useEpThemeStore = defineStore({
   id: "pure-epTheme",
   state: () => ({
-    epThemeColor: storageLocal.getItem("epThemeColor") || "#409EFF"
+    epThemeColor:
+      storageLocal.getItem("responsive-layout")?.epThemeColor ??
+      getConfig().EpThemeColor
   }),
   getters: {
     getEpThemeColor() {
@@ -14,8 +17,10 @@ export const useEpThemeStore = defineStore({
   },
   actions: {
     setEpThemeColor(newColor) {
+      const layout = storageLocal.getItem("responsive-layout");
       this.epThemeColor = newColor;
-      storageLocal.setItem("epThemeColor", newColor);
+      layout.epThemeColor = newColor;
+      storageLocal.setItem("responsive-layout", layout);
     }
   }
 });

src/store/modules/multiTags.ts

@@ -8,7 +8,7 @@ export const useMultiTagsStore = defineStore({
   id: "pure-multiTags",
   state: () => ({
     // 存储标签页信息（路由信息）
-    multiTags: storageLocal.getItem("responsive-sets").multiTagsCache
+    multiTags: storageLocal.getItem("responsive-configure").multiTagsCache
       ? storageLocal.getItem("responsive-tags")
       : [
           {
@@ -22,7 +22,7 @@ export const useMultiTagsStore = defineStore({
             }
           }
         ],
-    multiTagsCache: storageLocal.getItem("responsive-sets").multiTagsCache
+    multiTagsCache: storageLocal.getItem("responsive-configure").multiTagsCache
   }),
   getters: {
     getMultiTagsCache() {

src/utils/storage/responsive.ts

@@ -18,15 +18,19 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
         default: Storage.getData(undefined, "layout") ?? {
           layout: config.Layout ?? "vertical",
           theme: config.Theme ?? "default",
-          darkMode: config.DarkMode ?? false
+          darkMode: config.DarkMode ?? false,
+          sidebarStatus: config.SidebarStatus ?? true,
+          epThemeColor: config.EpThemeColor ?? "409EFF"
         }
       },
-      sets: {
+      configure: {
         type: Object,
-        default: Storage.getData(undefined, "sets") ?? {
+        default: Storage.getData(undefined, "configure") ?? {
           grey: config.Grey ?? false,
           weak: config.Weak ?? false,
           hideTabs: config.HideTabs ?? false,
+          showLogo: config.ShowLogo ?? true,
+          showModel: config.ShowModel ?? "smart",
           multiTagsCache: config.MultiTagsCache ?? false
         }
       }

types/global.d.ts

@@ -86,6 +86,10 @@ declare global {
     Grey?: boolean;
     Weak?: boolean;
     HideTabs?: boolean;
+    SidebarStatus?: boolean;
+    EpThemeColor?: string;
+    ShowLogo?: boolean;
+    ShowModel?: string;
     MapConfigure?: {
       amapKey?: string;
       options: {