chore: update element-plus to the latest version

package.json

@@ -26,10 +26,10 @@
     "await-to-js": "^3.0.0",
     "axios": "^0.21.1",
     "cropperjs": "^1.5.11",
-    "dayjs": "^1.10.5",
+    "dayjs": "^1.10.6",
     "dotenv": "^8.2.0",
     "echarts": "^5.1.1",
-    "element-plus": "^1.0.2-beta.53",
+    "element-plus": "^1.0.2-beta.71",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mitt": "^2.1.0",
@@ -76,12 +76,12 @@
     "postcss": "^8.2.6",
     "postcss-import": "^14.0.0",
     "prettier": "^2.3.2",
-    "sass": "^1.32.8",
+    "sass": "^1.38.0",
-    "sass-loader": "^11.0.1",
+    "sass-loader": "^12.1.0",
     "typescript": "^4.2.4",
-    "vite": "^2.4.3",
+    "vite": "^2.5.0",
     "vite-plugin-mock": "^2.8.0",
-    "vite-plugin-style-import": "^1.0.1",
+    "vite-plugin-style-import": "^1.1.1",
     "vue-eslint-parser": "^7.7.2"
   },
   "lint-staged": {

src/App.vue

@@ -1,3 +1,27 @@
 <template>
-  <router-view />
+  <el-config-provider :locale="currentLocale">
+    <router-view />
+  </el-config-provider>
 </template>
+
+<script>
+import { ElConfigProvider } from "element-plus";
+import zhCn from "element-plus/lib/locale/lang/zh-cn";
+import en from "element-plus/lib/locale/lang/en";
+export default {
+  components: {
+    [ElConfigProvider.name]: ElConfigProvider
+  },
+  computed: {
+    // eslint-disable-next-line vue/return-in-computed-property
+    currentLocale() {
+      switch (this.$storage.locale?.locale) {
+        case "zh":
+          return zhCn;
+        case "en":
+          return en;
+      }
+    }
+  }
+};
+</script>

src/layout/components/Navbar.vue

@@ -15,10 +15,10 @@
       <div
         v-show="!deviceDetection()"
         class="inter"
-        :title="langs ? '中文' : 'English'"
+        :title="currentLocale ? '中文' : 'English'"
         @click="toggleLang"
       >
-        <img :src="langs ? ch : en" />
+        <img :src="currentLocale ? ch : en" />
       </div>
       <i
         class="el-icon-setting hsset"
@@ -33,9 +33,9 @@
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
+            <el-dropdown-item icon="el-icon-switch-button" @click="logout">
-              $t("message.hsLoginOut")
+              {{ $t("message.hsLoginOut") }}
-            }}</el-dropdown-item>
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -44,7 +44,13 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted, unref, watch } from "vue";
+import {
+  defineComponent,
+  onMounted,
+  unref,
+  watch,
+  getCurrentInstance
+} from "vue";
 import Breadcrumb from "/@/components/ReBreadCrumb";
 import Hamburger from "/@/components/ReHamBurger";
 import screenfull from "../components/screenfull/index.vue";
@@ -58,10 +64,6 @@ import { emitter } from "/@/utils/mitt";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { useI18n } from "vue-i18n";
 
-import ElementLocale from "element-plus/lib/locale";
-import enLocale from "element-plus/lib/locale/lang/en";
-import zhLocale from "element-plus/lib/locale/lang/zh-cn";
-
 export default defineComponent({
   name: "Navbar",
   components: {
@@ -69,9 +71,25 @@ export default defineComponent({
     Hamburger,
     screenfull
   },
+  computed: {
+    // eslint-disable-next-line vue/return-in-computed-property
+    currentLocale() {
+      if (!this.$storage.locale) {
+        // eslint-disable-next-line
+        this.$storage.locale = { locale: "zh" }
+        useI18n().locale.value = "zh";
+      }
+      switch (this.$storage.locale?.locale) {
+        case "zh":
+          return true;
+        case "en":
+          return false;
+      }
+    }
+  },
   setup() {
-    let langs = ref(true);
+    // eslint-disable-next-line no-unused-vars
-
+    let vm: any;
     const pureApp = useAppStoreHook();
     const router = useRouter();
     const route = useRoute();
@@ -82,18 +100,20 @@ export default defineComponent({
 
     // 国际化语言切换
     const toggleLang = (): void => {
-      langs.value = !langs.value;
+      switch (vm.locale.locale) {
-      if (langs.value) {
+        case "zh":
-        locale.value = "zh";
+          vm.locale = { locale: "en" };
-        ElementLocale.use(zhLocale);
+          locale.value = "en";
-      } else {
+          break;
-        locale.value = "en";
+        case "en":
-        ElementLocale.use(enLocale);
+          vm.locale = { locale: "zh" };
+          locale.value = "zh";
+          break;
       }
     };
 
     watch(
-      () => langs.value,
+      () => locale.value,
       () => {
         //@ts-ignore
         document.title = t(unref(route.meta.title)); // 动态title
@@ -115,6 +135,8 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      vm = getCurrentInstance().appContext.config.globalProperties.$storage;
       document
         .querySelector(".el-dropdown__popper")
         ?.setAttribute("class", "resetTop");
@@ -126,7 +148,6 @@ export default defineComponent({
     return {
       pureApp,
       toggleSideBar,
-      langs,
       usename,
       toggleLang,
       logout,

src/main.ts

@@ -29,7 +29,7 @@ import Storage from "responsive-storage";
 app.use(Storage, {
   // 默认显示首页tag
   routesInStorage: {
-    type: String,
+    type: Array,
     default: Storage.getData(undefined, "routesInStorage") ?? [
       {
         path: "/welcome",
@@ -41,6 +41,13 @@ app.use(Storage, {
         }
       }
     ]
+  },
+  // 国际化 默认中文zh
+  locale: {
+    type: Object,
+    default: Storage.getData(undefined, "locale") ?? {
+      locale: "zh"
+    }
   }
 });
 

src/plugins/element-plus/index.ts

@@ -69,10 +69,6 @@ const components = [
 
 const plugins = [ElLoading];
 
-import ElementLocale from "element-plus/lib/locale";
-import zhLocale from "element-plus/lib/locale/lang/zh-cn";
-ElementLocale.use(zhLocale);
-
 export function useElementPlus(app: App) {
   components.forEach((component: Component) => {
     app.component(component.name, component);

src/plugins/i18n/index.ts

@@ -2,10 +2,11 @@
 import { App } from "vue";
 import { createI18n } from "vue-i18n";
 import { localesConfigs } from "./config";
+import { storageLocal } from "/@/utils/storage";
 
 export const i18n = createI18n({
-  locale: "zh", // set locale
+  locale: storageLocal.getItem("responsive-locale")?.locale ?? "zh",
-  fallbackLocale: "en", // set fallback locale
+  fallbackLocale: "en",
   messages: localesConfigs
 });