Browse Source

fix: 修复本地响应式存储对象设置问题

xiaoxian521 2 years ago
parent
commit
241fc618b8
2 changed files with 12 additions and 9 deletions
  1. 3 2
      src/layout/components/setting/index.vue
  2. 9 7
      src/layout/hooks/useDataThemeChange.ts

+ 3 - 2
src/layout/components/setting/index.vue

@@ -211,8 +211,9 @@ function setLayoutModel(layout: string) {
   $storage.layout = {
     layout,
     theme: layoutTheme.value.theme,
-    darkMode: $storage.layout.darkMode,
-    sidebarStatus: $storage.layout.sidebarStatus
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor
   };
   useAppStoreHook().setLayout(layout);
 }

+ 9 - 7
src/layout/hooks/useDataThemeChange.ts

@@ -13,7 +13,7 @@ import {
 } from "@pureadmin/theme/dist/browser-utils";
 
 export function useDataThemeChange() {
-  const { layoutTheme } = useLayout();
+  const { layoutTheme, layout } = useLayout();
   const themeColors = ref<Array<themeColorsType>>([
     /* 道奇蓝(默认) */
     { color: "#1b2a47", themeColor: "default" },
@@ -36,7 +36,7 @@ export function useDataThemeChange() {
   ]);
 
   const { $storage } = useGlobal<GlobalPropertiesApi>();
-
+  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
   const body = document.documentElement as HTMLElement;
 
   /** 设置导航主题色 */
@@ -45,8 +45,13 @@ export function useDataThemeChange() {
     toggleTheme({
       scopeName: `layout-theme-${theme}`
     });
-    $storage.layout.theme = theme;
-    $storage.layout.darkMode = dataTheme.value;
+    $storage.layout = {
+      layout: layout.value,
+      theme,
+      darkMode: dataTheme.value,
+      sidebarStatus: $storage.layout?.sidebarStatus,
+      epThemeColor: $storage.layout?.epThemeColor
+    };
 
     if (theme === "default" || theme === "light") {
       setEpThemeColor(getConfig().EpThemeColor);
@@ -82,7 +87,6 @@ export function useDataThemeChange() {
       );
     }
   };
-  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
 
   /** 日间、夜间主题切换 */
   function dataThemeChange() {
@@ -94,10 +98,8 @@ export function useDataThemeChange() {
     }
 
     if (dataTheme.value) {
-      $storage.layout.darkMode = true;
       document.documentElement.classList.add("dark");
     } else {
-      $storage.layout.darkMode = false;
       document.documentElement.classList.remove("dark");
     }
   }