perf: storage

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 || "1");
 
 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");
+    ? changeStorageConfigure("showLogo", "1")
+    : changeStorageConfigure("showLogo", "-1");
   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
     };
   }
 }

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 || "1"
+);
 const isCollapse = computed(() => {
   return !pureApp.getSidebarStatus;
 });

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 ?? "1",
+      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
   };
 }