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

---
 .gitpod.yml                                  |  2 +-
 src/layout/components/sidebar/horizontal.vue | 47 ++++------------
 src/layout/components/sidebar/logo.vue       |  6 +--
 src/layout/components/sidebar/mixNav.vue     | 56 ++++----------------
 src/layout/components/sidebar/vertical.vue   |  8 +--
 src/layout/hooks/nav.ts                      | 25 ++++++---
 src/layout/hooks/useDataThemeChange.ts       | 10 +---
 src/layout/hooks/useTranslationLang.ts       | 10 ++--
 src/views/login/index.vue                    |  6 +--
 types/global.d.ts                            |  1 +
 10 files changed, 56 insertions(+), 115 deletions(-)

diff --git a/.gitpod.yml b/.gitpod.yml
index 40a855a97..57324a3b8 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -2,4 +2,4 @@ ports:
   - port: 3344
     onOpen: open-preview
 tasks:
-  - init: npm install && npm run serve
+  - init: pnpm install && pnpm serve
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index 4b50b8a6c..ad0836f84 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -1,39 +1,32 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
 import { useNav } from "../../hooks/nav";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
-import { templateRef } from "@vueuse/core";
 import SidebarItem from "./sidebarItem.vue";
 import avatars from "/@/assets/avatars.jpg";
 import screenfull from "../screenfull/index.vue";
-import { useRoute, useRouter } from "vue-router";
 import { deviceDetection } from "@pureadmin/utils";
-import { watch, nextTick, onMounted, getCurrentInstance } from "vue";
+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";
 
-const route = useRoute();
-const { locale, t } = useI18n();
-const routers = useRouter().options.routes;
-const menuRef = templateRef<ElRef | null>("menu", null);
-const instance =
-  getCurrentInstance().appContext.config.globalProperties.$storage;
-const title =
-  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
+const menuRef = ref();
 
+const { t, route, locale, translationCh, translationEn } =
+  useTranslationLang(menuRef);
 const {
+  title,
+  routers,
   logout,
   backHome,
   onPanel,
-  changeTitle,
   handleResize,
   menuSelect,
   username,
   avatarsStyle,
   getDropdownItemStyle,
-  getDropdownItemClass,
-  changeWangeditorLanguage
+  getDropdownItemClass
 } = useNav();
 
 onMounted(() => {
@@ -42,34 +35,12 @@ onMounted(() => {
   });
 });
 
-watch(
-  () => locale.value,
-  () => {
-    changeTitle(route.meta);
-    locale.value === "en"
-      ? changeWangeditorLanguage(locale.value)
-      : changeWangeditorLanguage("zh-CN");
-  }
-);
-
 watch(
   () => route.path,
   () => {
     menuSelect(route.path, routers);
   }
 );
-
-function translationCh() {
-  instance.locale = { locale: "zh" };
-  locale.value = "zh";
-  handleResize(menuRef.value);
-}
-
-function translationEn() {
-  instance.locale = { locale: "en" };
-  locale.value = "en";
-  handleResize(menuRef.value);
-}
 </script>
 
 <template>
@@ -80,7 +51,7 @@ function translationEn() {
     </div>
     <el-menu
       router
-      ref="menu"
+      ref="menuRef"
       mode="horizontal"
       class="horizontal-header-menu"
       :default-active="route.path"
diff --git a/src/layout/components/sidebar/logo.vue b/src/layout/components/sidebar/logo.vue
index 34bc4b15e..644a3cdf7 100644
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { getCurrentInstance } from "vue";
+import { useNav } from "../../hooks/nav";
+
 const props = defineProps({
   collapse: Boolean
 });
 
-const title =
-  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
+const { title } = useNav();
 </script>
 
 <template>
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
index 8cd1bad53..8bf53ef1f 100644
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -1,54 +1,40 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
 import { useNav } from "../../hooks/nav";
-import { templateRef } from "@vueuse/core";
 import avatars from "/@/assets/avatars.jpg";
 import { transformI18n } from "/@/plugins/i18n";
 import screenfull from "../screenfull/index.vue";
-import { useRoute, useRouter } from "vue-router";
 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,
-  getCurrentInstance
-} from "vue";
 
-const route = useRoute();
-const { locale, t } = useI18n();
-const routers = useRouter().options.routes;
-const menuRef = templateRef<ElRef | null>("menu", null);
-const instance =
-  getCurrentInstance().appContext.config.globalProperties.$storage;
+const menuRef = ref();
+let defaultActive = ref(null);
 
+const { t, route, locale, translationCh, translationEn } =
+  useTranslationLang(menuRef);
 const {
   device,
+  routers,
   logout,
   onPanel,
-  changeTitle,
   handleResize,
   menuSelect,
   resolvePath,
   username,
   avatarsStyle,
   getDropdownItemStyle,
-  getDropdownItemClass,
-  changeWangeditorLanguage
+  getDropdownItemClass
 } = useNav();
 
-let defaultActive = ref(null);
-
 function getDefaultActive(routePath) {
   const wholeMenus = usePermissionStoreHook().wholeMenus;
-  // 当前路由的父级路径
+  /** 当前路由的父级路径 */
   const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
   defaultActive.value = findRouteByPath(
     parentRoutes,
@@ -63,41 +49,19 @@ onMounted(() => {
   });
 });
 
-watch(
-  () => locale.value,
-  () => {
-    changeTitle(route.meta);
-    locale.value === "en"
-      ? changeWangeditorLanguage(locale.value)
-      : changeWangeditorLanguage("zh-CN");
-  }
-);
-
 watch(
   () => route.path,
   () => {
     getDefaultActive(route.path);
   }
 );
-
-function translationCh() {
-  instance.locale = { locale: "zh" };
-  locale.value = "zh";
-  handleResize(menuRef.value);
-}
-
-function translationEn() {
-  instance.locale = { locale: "en" };
-  locale.value = "en";
-  handleResize(menuRef.value);
-}
 </script>
 
 <template>
   <div v-if="device !== 'mobile'" class="horizontal-header">
     <el-menu
       router
-      ref="menu"
+      ref="menuRef"
       mode="horizontal"
       class="horizontal-header-menu"
       :default-active="defaultActive"
diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue
index 7ce2dcbff..a72b8dbef 100644
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
 import Logo from "./logo.vue";
+import { useRoute } from "vue-router";
 import { emitter } from "/@/utils/mitt";
 import { useNav } from "../../hooks/nav";
 import SidebarItem from "./sidebarItem.vue";
 import leftCollapse from "./leftCollapse.vue";
 import type { StorageConfigs } from "/#/index";
 import { storageLocal } from "@pureadmin/utils";
-import { useRoute, useRouter } from "vue-router";
 import { ref, computed, watch, onBeforeMount } from "vue";
 import { findRouteByPath, getParentPaths } from "/@/router/utils";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 const route = useRoute();
-const routers = useRouter().options.routes;
 const showLogo = ref(
   storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
 );
 
-const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
+const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
+  useNav();
 
 let subMenuData = ref([]);
 
 const menuData = computed(() => {
-  return pureApp.layout === "mix"
+  return pureApp.layout === "mix" && device.value !== "mobile"
     ? subMenuData.value
     : usePermissionStoreHook().wholeMenus;
 });
diff --git a/src/layout/hooks/nav.ts b/src/layout/hooks/nav.ts
index 5e964dbc5..e29c06a44 100644
--- a/src/layout/hooks/nav.ts
+++ b/src/layout/hooks/nav.ts
@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { router } from "/@/router";
 import { getConfig } from "/@/config";
+import { useRouter } from "vue-router";
 import { emitter } from "/@/utils/mitt";
 import { routeMetaType } from "../types";
 import { remainingPaths } from "/@/router";
@@ -17,11 +18,12 @@ const errorInfo = "当前路由配置不正确，请检查配置";
 
 export function useNav() {
   const pureApp = useAppStoreHook();
-  // 用户名
+  const routers = useRouter().options.routes;
+  /** 用户名 */
   const username: string =
     storageSession.getItem<StorageConfigs>("info")?.username;
 
-  // 设置国际化选中后的样式
+  /** 设置国际化选中后的样式 */
   const getDropdownItemStyle = computed(() => {
     return (locale, t) => {
       return {
@@ -30,6 +32,7 @@ export function useNav() {
       };
     };
   });
+
   const getDropdownItemClass = computed(() => {
     return (locale, t) => {
       return locale === t ? "" : "!dark:hover:color-primary";
@@ -48,19 +51,23 @@ export function useNav() {
     return pureApp.getDevice;
   });
 
-  const { $storage } = useGlobal<GlobalPropertiesApi>();
+  const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
   const layout = computed(() => {
     return $storage?.layout?.layout;
   });
 
-  // 动态title
+  const title = computed(() => {
+    return $config.Title;
+  });
+
+  /** 动态title */
   function changeTitle(meta: routeMetaType) {
     const Title = getConfig().Title;
     if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
     else document.title = transformI18n(meta.title);
   }
 
-  // 退出登录
+  /** 退出登录 */
   function logout() {
     useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
     storageSession.removeItem("info");
@@ -101,7 +108,7 @@ export function useNav() {
     if (parentPathIndex > 0) {
       parentPath = indexPath.slice(0, parentPathIndex);
     }
-    // 找到当前路由的信息
+    /** 找到当前路由的信息 */
     function findCurrentRoute(indexPath: string, routes) {
       if (!routes) return console.error(errorInfo);
       return routes.map(item => {
@@ -109,7 +116,7 @@ export function useNav() {
           if (item.redirect) {
             findCurrentRoute(item.redirect, item.children);
           } else {
-            // 切换左侧菜单 通知标签页
+            /** 切换左侧菜单 通知标签页 */
             emitter.emit("changLayoutRoute", {
               indexPath,
               parentPath
@@ -123,7 +130,7 @@ export function useNav() {
     findCurrentRoute(indexPath, routers);
   }
 
-  // 判断路径是否参与菜单
+  /** 判断路径是否参与菜单 */
   function isRemaining(path: string): boolean {
     return remainingPaths.includes(path);
   }
@@ -138,9 +145,11 @@ export function useNav() {
   }
 
   return {
+    title,
     device,
     layout,
     logout,
+    routers,
     backHome,
     onPanel,
     changeTitle,
diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts
index 36a156b7b..f52fcb928 100644
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -4,7 +4,6 @@ import { useLayout } from "./useLayout";
 import { themeColorsType } from "../types";
 import { TinyColor } from "@ctrl/tinycolor";
 import { ref, getCurrentInstance } from "vue";
-import { useAppStoreHook } from "/@/store/modules/app";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import {
   darken,
@@ -45,13 +44,8 @@ export function useDataThemeChange() {
     toggleTheme({
       scopeName: `layout-theme-${theme}`
     });
-    instance.layout = {
-      layout: useAppStoreHook().layout,
-      theme,
-      darkMode: dataTheme.value,
-      sidebarStatus: instance.layout.sidebarStatus,
-      epThemeColor: instance.layout.epThemeColor
-    };
+    instance.layout.theme = theme;
+    instance.layout.darkMode = dataTheme.value;
 
     if (theme === "default" || theme === "light") {
       setEpThemeColor(getConfig().EpThemeColor);
diff --git a/src/layout/hooks/useTranslationLang.ts b/src/layout/hooks/useTranslationLang.ts
index c3b8915f9..b65a13469 100644
--- a/src/layout/hooks/useTranslationLang.ts
+++ b/src/layout/hooks/useTranslationLang.ts
@@ -1,10 +1,10 @@
 import { useNav } from "./nav";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
-import { watch, getCurrentInstance } from "vue";
+import { watch, getCurrentInstance, type Ref } from "vue";
 
-export function useTranslationLang() {
-  const { changeTitle, changeWangeditorLanguage } = useNav();
+export function useTranslationLang(ref?: Ref) {
+  const { changeTitle, changeWangeditorLanguage, handleResize } = useNav();
   const { locale, t } = useI18n();
   const route = useRoute();
   const instance =
@@ -13,11 +13,13 @@ export function useTranslationLang() {
   function translationCh() {
     instance.locale = { locale: "zh" };
     locale.value = "zh";
+    ref && handleResize(ref.value);
   }
 
   function translationEn() {
     instance.locale = { locale: "en" };
     locale.value = "en";
+    ref && handleResize(ref.value);
   }
 
   watch(
@@ -29,8 +31,10 @@ export function useTranslationLang() {
         : changeWangeditorLanguage("zh-CN");
     }
   );
+
   return {
     t,
+    route,
     locale,
     translationCh,
     translationEn
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 643546ed6..b69761989 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -13,6 +13,7 @@ import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { storageSession } from "@pureadmin/utils";
 import { $t, transformI18n } from "/@/plugins/i18n";
+import { ref, reactive, watch, computed } from "vue";
 import { operates, thirdParty } from "./utils/enums";
 import { useLayout } from "/@/layout/hooks/useLayout";
 import { useUserStoreHook } from "/@/store/modules/user";
@@ -21,7 +22,6 @@ import { ReImageVerify } from "/@/components/ReImageVerify";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
-import { ref, reactive, watch, computed, getCurrentInstance } from "vue";
 
 import dayIcon from "/@/assets/svg/day.svg?component";
 import darkIcon from "/@/assets/svg/dark.svg?component";
@@ -30,8 +30,6 @@ import globalization from "/@/assets/svg/globalization.svg?component";
 defineOptions({
   name: "Login"
 });
-const title =
-  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
 const imgCode = ref("");
 const router = useRouter();
 const loading = ref(false);
@@ -46,7 +44,7 @@ initStorage();
 
 const { t } = useI18n();
 const { dataTheme, dataThemeChange } = useDataThemeChange();
-const { getDropdownItemStyle, getDropdownItemClass } = useNav();
+const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
diff --git a/types/global.d.ts b/types/global.d.ts
index 41ca60fa8..191f61c14 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -113,6 +113,7 @@ declare global {
   declare interface GlobalPropertiesApi {
     $echarts: ECharts;
     $storage: ResponsiveStorage;
+    $config: ServerConfigs;
   }
 
   function parseInt(s: string | number, radix?: number): number;