chore: update

src/layout/hooks/useDataThemeChange.ts

@@ -1,9 +1,10 @@
+import { ref } from "vue";
 import { getConfig } from "/@/config";
 import { find } from "lodash-unified";
 import { useLayout } from "./useLayout";
 import { themeColorsType } from "../types";
 import { TinyColor } from "@ctrl/tinycolor";
-import { ref, getCurrentInstance } from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import {
   darken,
@@ -34,9 +35,9 @@ export function useDataThemeChange() {
     { color: "#722ed1", themeColor: "saucePurple" }
   ]);
 
+  const { $storage } = useGlobal<GlobalPropertiesApi>();
+
   const body = document.documentElement as HTMLElement;
-  const instance =
-    getCurrentInstance().appContext.app.config.globalProperties.$storage;
 
   /** 设置导航主题色 */
   function setLayoutThemeColor(theme = "default") {
@@ -44,8 +45,8 @@ export function useDataThemeChange() {
     toggleTheme({
       scopeName: `layout-theme-${theme}`
     });
-    instance.layout.theme = theme;
-    instance.layout.darkMode = dataTheme.value;
+    $storage.layout.theme = theme;
+    $storage.layout.darkMode = dataTheme.value;
 
     if (theme === "default" || theme === "light") {
       setEpThemeColor(getConfig().EpThemeColor);
@@ -81,7 +82,7 @@ export function useDataThemeChange() {
       );
     }
   };
-  const dataTheme = ref<boolean>(instance?.layout?.darkMode);
+  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
 
   /** 日间、夜间主题切换 */
   function dataThemeChange() {
@@ -93,17 +94,16 @@ export function useDataThemeChange() {
     }
 
     if (dataTheme.value) {
-      instance.layout.darkMode = true;
+      $storage.layout.darkMode = true;
       document.documentElement.classList.add("dark");
     } else {
-      instance.layout.darkMode = false;
+      $storage.layout.darkMode = false;
       document.documentElement.classList.remove("dark");
     }
   }
 
   return {
     body,
-    instance,
     dataTheme,
     layoutTheme,
     themeColors,

src/layout/hooks/useLayout.ts

@@ -1,60 +1,59 @@
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { routerArrays } from "../types";
-import { computed, getCurrentInstance } from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import { useMultiTagsStore } from "/@/store/modules/multiTags";
 
 export function useLayout() {
-  const instance = getCurrentInstance().appContext.app.config.globalProperties;
+  const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
 
   const initStorage = () => {
-    // 路由
+    /** 路由 */
     if (
       useMultiTagsStore().multiTagsCache &&
-      (!instance.$storage.tags || instance.$storage.tags.length === 0)
+      (!$storage.tags || $storage.tags.length === 0)
     ) {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      instance.$storage.tags = routerArrays;
+      $storage.tags = routerArrays;
     }
-    // 国际化
-    if (!instance.$storage.locale) {
-      // eslint-disable-next-line
-      instance.$storage.locale = { locale: instance.$config?.Locale ?? "zh" };
-      useI18n().locale.value = instance.$config?.Locale ?? "zh";
+    /** 国际化 */
+    if (!$storage.locale) {
+      $storage.locale = { locale: $config?.Locale ?? "zh" };
+      useI18n().locale.value = $config?.Locale ?? "zh";
     }
-    // 导航
-    if (!instance.$storage.layout) {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      instance.$storage.layout = {
-        layout: instance.$config?.Layout ?? "vertical",
-        theme: instance.$config?.Theme ?? "default",
-        darkMode: instance.$config?.DarkMode ?? false,
-        sidebarStatus: instance.$config?.SidebarStatus ?? true,
-        epThemeColor: instance.$config?.EpThemeColor ?? "#409EFF"
+    /** 导航 */
+    if (!$storage.layout) {
+      $storage.layout = {
+        layout: $config?.Layout ?? "vertical",
+        theme: $config?.Theme ?? "default",
+        darkMode: $config?.DarkMode ?? false,
+        sidebarStatus: $config?.SidebarStatus ?? true,
+        epThemeColor: $config?.EpThemeColor ?? "#409EFF"
       };
     }
-    // 灰色模式、色弱模式、隐藏标签页
-    if (!instance.$storage.configure) {
-      // eslint-disable-next-line
-      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
+    /** 灰色模式、色弱模式、隐藏标签页 */
+    if (!$storage.configure) {
+      $storage.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
       };
     }
   };
-  // 清空缓存后从serverConfig.json读取默认配置并赋值到storage中
+
+  /** 清空缓存后从serverConfig.json读取默认配置并赋值到storage中 */
   const layout = computed(() => {
-    return instance.$storage?.layout.layout;
+    return $storage?.layout.layout;
   });
+
   const layoutTheme = computed(() => {
-    return instance.$storage.layout;
+    return $storage.layout;
   });
+
   return {
     layout,
-    instance,
     layoutTheme,
     initStorage
   };

src/layout/hooks/useNav.ts

@@ -150,6 +150,7 @@ export function useNav() {
     layout,
     logout,
     routers,
+    $storage,
     backHome,
     onPanel,
     changeTitle,

src/layout/hooks/useTranslationLang.ts

@@ -1,23 +1,22 @@
 import { useNav } from "./useNav";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
-import { watch, getCurrentInstance, type Ref } from "vue";
+import { watch, type Ref } from "vue";
 
 export function useTranslationLang(ref?: Ref) {
-  const { changeTitle, changeWangeditorLanguage, handleResize } = useNav();
+  const { $storage, changeTitle, changeWangeditorLanguage, handleResize } =
+    useNav();
   const { locale, t } = useI18n();
   const route = useRoute();
-  const instance =
-    getCurrentInstance().appContext.config.globalProperties.$storage;
 
   function translationCh() {
-    instance.locale = { locale: "zh" };
+    $storage.locale = { locale: "zh" };
     locale.value = "zh";
     ref && handleResize(ref.value);
   }
 
   function translationEn() {
-    instance.locale = { locale: "en" };
+    $storage.locale = { locale: "en" };
     locale.value = "en";
     ref && handleResize(ref.value);
   }