From f27787d560a189de542749255afd3a7ba5275488 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Mon, 15 Aug 2022 15:53:27 +0800
Subject: [PATCH] chore: update

---
 src/layout/components/appMain.vue            | 25 +++-----
 src/layout/components/setting/index.vue      | 34 +++++-----
 src/layout/components/sidebar/horizontal.vue | 12 +++-
 src/layout/components/sidebar/mixNav.vue     | 14 +++-
 src/layout/components/sidebar/vertical.vue   |  2 +-
 src/layout/hooks/useDataThemeChange.ts       | 18 +++---
 src/layout/hooks/useLayout.ts                | 67 ++++++++++----------
 src/layout/hooks/useNav.ts                   |  1 +
 src/layout/hooks/useTranslationLang.ts       | 11 ++--
 src/layout/index.vue                         | 18 +++---
 src/utils/mitt.ts                            |  2 +-
 11 files changed, 107 insertions(+), 97 deletions(-)

diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 86a672e6e..ba3238a80 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
-import {
-  h,
-  ref,
-  computed,
-  Transition,
-  defineComponent,
-  getCurrentInstance
-} from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import backTop from "/@/assets/svg/back_top.svg?component";
+import { h, computed, Transition, defineComponent } from "vue";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 const props = defineProps({
   fixedHeader: Boolean
 });
-const keepAlive: Boolean = ref(
-  getCurrentInstance().appContext.config.globalProperties.$config?.KeepAlive
-);
-const instance =
-  getCurrentInstance().appContext.app.config.globalProperties.$storage;
+
+const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+
+const keepAlive = computed(() => {
+  return $config?.KeepAlive;
+});
 
 const transitions = computed(() => {
   return route => {
@@ -26,11 +21,11 @@ const transitions = computed(() => {
 });
 
 const hideTabs = computed(() => {
-  return instance?.configure.hideTabs;
+  return $storage?.configure.hideTabs;
 });
 
 const layout = computed(() => {
-  return instance?.layout.layout === "vertical";
+  return $storage?.layout.layout === "vertical";
 });
 
 const getSectionStyle = computed(() => {
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index bd9b7917c..cebf97f63 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -20,6 +20,7 @@ import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
 import {
   useDark,
   debounce,
+  useGlobal,
   storageLocal,
   storageSession
 } from "@pureadmin/utils";
@@ -31,6 +32,7 @@ import darkIcon from "/@/assets/svg/dark.svg?component";
 const router = useRouter();
 const { isDark } = useDark();
 const { isSelect } = useCssModule();
+const { $storage } = useGlobal<GlobalPropertiesApi>();
 
 const mixRef = templateRef<HTMLElement | null>("mixRef", null);
 const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
@@ -38,7 +40,6 @@ const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
 
 const {
   body,
-  instance,
   dataTheme,
   layoutTheme,
   themeColors,
@@ -58,17 +59,17 @@ if (unref(layoutTheme)) {
 }
 
 /** 默认灵动模式 */
-const markValue = ref(instance.configure?.showModel ?? "smart");
+const markValue = ref($storage.configure?.showModel ?? "smart");
 
-const logoVal = ref(instance.configure?.showLogo ?? true);
+const logoVal = ref($storage.configure?.showLogo ?? true);
 
 const settings = reactive({
-  greyVal: instance.configure.grey,
-  weakVal: instance.configure.weak,
-  tabsVal: instance.configure.hideTabs,
-  showLogo: instance.configure.showLogo,
-  showModel: instance.configure.showModel,
-  multiTagsCache: instance.configure.multiTagsCache
+  greyVal: $storage.configure.grey,
+  weakVal: $storage.configure.weak,
+  tabsVal: $storage.configure.hideTabs,
+  showLogo: $storage.configure.showLogo,
+  showModel: $storage.configure.showModel,
+  multiTagsCache: $storage.configure.multiTagsCache
 });
 
 const getThemeColorStyle = computed(() => {
@@ -85,9 +86,9 @@ const showThemeColors = computed(() => {
 });
 
 function storageConfigureChange<T>(key: string, val: T): void {
-  const storageConfigure = instance.configure;
+  const storageConfigure = $storage.configure;
   storageConfigure[key] = val;
-  instance.configure = storageConfigure;
+  $storage.configure = storageConfigure;
 }
 
 function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
@@ -116,7 +117,7 @@ const weekChange = (value): void => {
 const tagsChange = () => {
   let showVal = settings.tabsVal;
   storageConfigureChange("hideTabs", showVal);
-  emitter.emit("tagViewsChange", showVal);
+  emitter.emit("tagViewsChange", showVal as unknown as string);
 };
 
 const multiTagsCacheChange = () => {
@@ -158,7 +159,7 @@ function setFalse(Doms): any {
   });
 }
 
-watch(instance, ({ layout }) => {
+watch($storage, ({ layout }) => {
   /* 设置wangeditorV5主题色 */
   body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
   switch (layout["layout"]) {
@@ -203,12 +204,11 @@ const getThemeColor = computed(() => {
 function setLayoutModel(layout: string) {
   layoutTheme.value.layout = layout;
   window.document.body.setAttribute("layout", layout);
-  instance.layout = {
+  $storage.layout = {
     layout,
     theme: layoutTheme.value.theme,
-    darkMode: instance.layout.darkMode,
-    sidebarStatus: instance.layout.sidebarStatus,
-    epThemeColor: instance.layout.epThemeColor
+    darkMode: $storage.layout.darkMode,
+    sidebarStatus: $storage.layout.sidebarStatus
   };
   useAppStoreHook().setLayout(layout);
 }
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index a1d214e41..bdf0b6b0d 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -6,10 +6,10 @@ import avatars from "/@/assets/avatars.jpg";
 import { useNav } from "/@/layout/hooks/useNav";
 import screenfull from "../screenfull/index.vue";
 import { deviceDetection } from "@pureadmin/utils";
-import { ref, watch, nextTick, onMounted } from "vue";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 
 const menuRef = ref();
 
@@ -29,10 +29,18 @@ const {
   getDropdownItemClass
 } = useNav();
 
-onMounted(() => {
+function onResizeMenu() {
   nextTick(() => {
     handleResize(menuRef.value);
   });
+}
+
+onMounted(() => {
+  window.addEventListener("resize", onResizeMenu);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", onResizeMenu);
 });
 
 watch(
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
index 5e2d63d2c..d2f713dd0 100644
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -6,12 +6,12 @@ import { useNav } from "/@/layout/hooks/useNav";
 import { transformI18n } from "/@/plugins/i18n";
 import screenfull from "../screenfull/index.vue";
 import { deviceDetection } from "@pureadmin/utils";
-import { ref, toRaw, watch, nextTick, onMounted } from "vue";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
+import { ref, toRaw, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 
 const menuRef = ref();
 let defaultActive = ref(null);
@@ -42,11 +42,19 @@ function getDefaultActive(routePath) {
   )?.children[0]?.path;
 }
 
-onMounted(() => {
-  getDefaultActive(route.path);
+function onResizeMenu() {
   nextTick(() => {
     handleResize(menuRef.value);
   });
+}
+
+onMounted(() => {
+  getDefaultActive(route.path);
+  window.addEventListener("resize", onResizeMenu);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", onResizeMenu);
 });
 
 watch(
diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue
index 740a80903..cc6653759 100644
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -45,7 +45,7 @@ getSubMenuData(route.path);
 
 onBeforeMount(() => {
   emitter.on("logoChange", key => {
-    showLogo.value = key as unknown as boolean;
+    showLogo.value = key;
   });
 });
 
diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts
index f52fcb928..7976331cf 100644
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/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,
diff --git a/src/layout/hooks/useLayout.ts b/src/layout/hooks/useLayout.ts
index 6f7c3f84a..6f88dbdae 100644
--- a/src/layout/hooks/useLayout.ts
+++ b/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
   };
diff --git a/src/layout/hooks/useNav.ts b/src/layout/hooks/useNav.ts
index e29c06a44..3cfbcbbf6 100644
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -150,6 +150,7 @@ export function useNav() {
     layout,
     logout,
     routers,
+    $storage,
     backHome,
     onPanel,
     changeTitle,
diff --git a/src/layout/hooks/useTranslationLang.ts b/src/layout/hooks/useTranslationLang.ts
index d631cee8e..9fc714e57 100644
--- a/src/layout/hooks/useTranslationLang.ts
+++ b/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);
   }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index cb473b5a6..03ddd2d72 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -3,8 +3,8 @@ import { setType } from "./types";
 import { emitter } from "/@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { deviceDetection, useDark } from "@pureadmin/utils";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
 import { h, reactive, computed, onMounted, defineComponent } from "vue";
 
 import backTop from "/@/assets/svg/back_top.svg?component";
@@ -19,10 +19,10 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 
 const { isDark } = useDark();
+const { layout } = useLayout();
 const isMobile = deviceDetection();
 const pureSetting = useSettingStoreHook();
-
-const { instance, layout } = useLayout();
+const { $storage } = useGlobal<GlobalPropertiesApi>();
 
 const set: setType = reactive({
   sidebar: computed(() => {
@@ -47,18 +47,18 @@ const set: setType = reactive({
   }),
 
   hideTabs: computed(() => {
-    return instance.$storage?.configure.hideTabs;
+    return $storage?.configure.hideTabs;
   })
 });
 
 function setTheme(layoutModel: string) {
   window.document.body.setAttribute("layout", layoutModel);
-  instance.$storage.layout = {
+  $storage.layout = {
     layout: `${layoutModel}`,
-    theme: instance.$storage.layout?.theme,
-    darkMode: instance.$storage.layout?.darkMode,
-    sidebarStatus: instance.$storage.layout?.sidebarStatus,
-    epThemeColor: instance.$storage.layout?.epThemeColor
+    theme: $storage.layout?.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor
   };
 }
 
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
index 14abd09fc..0022e8dbb 100644
--- a/src/utils/mitt.ts
+++ b/src/utils/mitt.ts
@@ -11,7 +11,7 @@ type Events = {
   openPanel: string;
   tagViewsChange: string;
   tagViewsShowModel: string;
-  logoChange: string;
+  logoChange: boolean;
   changLayoutRoute: {
     indexPath: string;
     parentPath: string;