feat: Element Plus 最新版本国际化和集成i18n插件实现自定义国际化(包括动态路由)

src/App.vue

@@ -1,16 +1,34 @@
 <template>
-  <div id="app">
+  <el-config-provider :locale="locale">
-    <router-view />
+    <router-view/>
-  </div>
+  </el-config-provider>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+
-  name: 'App'
+import {computed, ref, watch} from "vue";
-}
+import {useAppStoreHook} from "@/store/modules/app";
+import {ElConfigProvider} from 'element-plus'
+
+//官方文档: https://element-plus.gitee.io/zh-CN/guide/i18n.html
+
+// 导入 Element Plus 语言包
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
+
+const language = computed(() => useAppStoreHook().language)
+
+const locale = ref()
+watch(language, (value) => {
+  if (value == 'en') {
+    locale.value = en
+  } else {
+    locale.value = zhCn
+  }
+})
 </script>
 <style>
-/*表格未对齐*/
+/* 表格线条对齐 */
 .el-table__header col[name="gutter"] {
   display: table-cell !important;
 }

src/components/Breadcrumb/index.vue

@@ -11,7 +11,7 @@
         <span
             v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
             class="no-redirect"
-        >{{ item.meta.title }}</span>
+        >{{ generateTitle(item.meta.title) }}</span>
         <a
             v-else
             @click.prevent="handleLink(item)"
@@ -21,71 +21,66 @@
   </el-breadcrumb>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
+import {onBeforeMount, ref, watch} from 'vue'
-import { useRoute, RouteLocationMatched } from 'vue-router'
+import {useRoute, RouteLocationMatched} from 'vue-router'
-import { compile } from 'path-to-regexp'
+import {compile} from 'path-to-regexp'
 import router from '@/router'
-export default defineComponent({
+import {generateTitle} from '@/utils/i18n'
-  setup() {
-    const currentRoute = useRoute()
-    const pathCompile = (path: string) => {
-      const { params } = currentRoute
-      const toPath = compile(path)
-      return toPath(params)
-    }
 
-    const state = reactive({
+const currentRoute = useRoute()
-      breadcrumbs: [] as Array<RouteLocationMatched>,
+const pathCompile = (path: string) => {
-      getBreadcrumb: () => {
+  const {params} = currentRoute
-        let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
+  const toPath = compile(path)
-        const first = matched[0]
+  return toPath(params)
-        if (!state.isDashboard(first)) {
+}
-          matched = [{ path: '/dashboard', meta: { title: '首页' } } as any].concat(matched)
-        }
-        state.breadcrumbs = matched.filter((item) => {
-          return item.meta && item.meta.title && item.meta.breadcrumb !== false
-        })
-      },
-      isDashboard(route: RouteLocationMatched) {
-        const name = route && route.name
-        if (!name) {
-          return false
-        }
-        return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
-      },
-      handleLink(item: any) {
-        const { redirect, path } = item
-        if (redirect) {
-          router.push(redirect).catch((err) => {
-            console.warn(err)
-          })
-          return
-        }
-        router.push(pathCompile(path)).catch((err) => {
-          console.warn(err)
-        })
-      }
-    })
 
-    watch(() => currentRoute.path, (path) => {
+const breadcrumbs = ref( [] as Array<RouteLocationMatched>)
-      if (path.startsWith('/redirect/')) {
-        return
-      }
-      state.getBreadcrumb()
-    })
 
-    onBeforeMount(() => {
+function getBreadcrumb() {
-      state.getBreadcrumb()
+  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
-    })
+  const first = matched[0]
-
+  if (!isDashboard(first)) {
-    return {
+    matched = [{path: '/dashboard', meta: {title: 'dashboard'}} as any].concat(matched)
-      ...toRefs(state)
-    }
   }
+  breadcrumbs.value = matched.filter((item) => {
+    return item.meta && item.meta.title && item.meta.breadcrumb !== false
+  })
+}
 
+function isDashboard(route: RouteLocationMatched) {
+  const name = route && route.name
+  if (!name) {
+    return false
+  }
+  return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+}
+
+function handleLink(item: any) {
+  const {redirect, path} = item
+  if (redirect) {
+    router.push(redirect).catch((err) => {
+      console.warn(err)
+    })
+    return
+  }
+  router.push(pathCompile(path)).catch((err) => {
+    console.warn(err)
+  })
+}
+
+watch(() => currentRoute.path, (path) => {
+  if (path.startsWith('/redirect/')) {
+    return
+  }
+  getBreadcrumb()
 })
 
+onBeforeMount(() => {
+  getBreadcrumb()
+})
+
+
 </script>
 
 <style lang="scss" scoped>

src/components/LangSelect/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-dropdown class="lang-select" trigger="click" @command="handleSetLanguage">
+    <div class="lang-select__icon">
+      <svg-icon class-name="international-icon" icon-class="language"/>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item :disabled="language==='zh-cn'" command="zh-cn">
+          中文
+        </el-dropdown-item>
+        <el-dropdown-item :disabled="language==='en'" command="en">
+          English
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+
+import {computed} from "vue";
+import {useAppStoreHook} from "@/store/modules/app";
+
+const language = computed(() => useAppStoreHook().language)
+
+import {useI18n} from 'vue-i18n'
+import {ElMessage} from 'element-plus'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+const {locale} = useI18n()
+
+function handleSetLanguage(lang: string) {
+  locale.value = lang
+  useAppStoreHook().setLanguage(lang)
+  if (lang == 'en') {
+    ElMessage.success('Switch Language Successful!')
+  } else {
+    ElMessage.success('切换语言成功！')
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+.lang-select__icon {
+  line-height: 50px;
+}
+</style>

src/components/RightPanel/index.vue

@@ -2,8 +2,7 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background"/>
     <div class="rightPanel">
-      <!--      <div class="handle-button" :style="{'top':buttonTop+'px','background-color:blue'}" @click="show=!show">-->
+       <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
-        <div class="handle-button" @click="show=!show">
           <Close v-show="show"/>
           <Setting v-show="!show"/>
         </div>
@@ -31,9 +30,7 @@ const props = defineProps({
   }
 })
 
-const theme = computed(() => {
+const theme =  ""
-  useSettingStoreHook().theme
-})
 
 const show = ref(false)
 

src/layout/components/Settings/index.vue

@@ -3,11 +3,6 @@
     <div>
       <h3 class="drawer-title">系统布局配置</h3>
 
-      <div class="drawer-item">
-        <span>主题色</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange"/>
-      </div>
-
       <div class="drawer-item">
         <span>开启 Tags-View</span>
         <el-switch v-model="tagsView" class="drawer-switch"/>
@@ -27,11 +22,9 @@
 </template>
 
 <script>
-import ThemePicker from '@/components/ThemePicker/index.vue'
 import {defineComponent, reactive, toRefs, watch} from "vue"
 import { useSettingStoreHook } from "@/store/modules/settings";
 export default defineComponent({
-  components: {ThemePicker},
   setup() {
     const state = reactive({
       fixedHeader:useSettingStoreHook().fixedHeader,

src/layout/components/Sidebar/SidebarItem.vue

@@ -5,8 +5,10 @@
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
+          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
-          <template #title>{{ onlyOneChild.meta.title }}</template>
+          <template #title>
+            {{ generateTitle(onlyOneChild.meta.title ) }}
+          </template>
         </el-menu-item>
       </app-link>
     </template>
@@ -14,7 +16,7 @@
       <!-- popper-append-to-body -->
       <template #title>
         <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+        <span v-if="item.meta && item.meta.title">{{generateTitle(item.meta.title) }}</span>
       </template>
 
       <sidebar-item
@@ -32,12 +34,14 @@
 
 <script setup lang="ts">
 import path from 'path-browserify'
-import {PropType, ref} from "vue";
+import { ref} from "vue";
 import {isExternal} from '@/utils/validate'
 import AppLink from './Link.vue'
-import SvgIcon from '@/components/SvgIcon/index.vue';
 import {RouteRecordRaw} from "vue-router";
 
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { generateTitle } from '@/utils/i18n'
+
 const props = defineProps({
   item: {
     type: Object,

src/layout/components/TagsView/ScrollPane.vue

@@ -28,7 +28,6 @@ const scrollWrapper = computed(() => {
 })
 
 onMounted(() => {
-  console.log('scrollWrapper', scrollWrapper.value)
   //scrollWrapper.value.addEventListener('scroll', emitScroll, true);
 })
 

src/layout/components/TagsView/index.vue

@@ -10,7 +10,7 @@
           @click.middle="!isAffix(tag)?closeSelectedTag(tag):''"
           @contextmenu.prevent="openMenu(tag,$event)"
       >
-        {{ tag.meta.title }}
+        {{ generateTitle(tag.meta.title) }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)">
           <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;"/>
         </span>
@@ -63,6 +63,7 @@ import {TagView} from "@/store/interface";
 
 import ScrollPane from './ScrollPane.vue'
 import {Close} from '@element-plus/icons'
+import { generateTitle } from '@/utils/i18n'
 
 const {ctx} = getCurrentInstance() as any
 const router = useRouter()

src/router/index.ts

@@ -2,7 +2,6 @@ import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
 
 export const Layout = () => import( '@/layout/index.vue')
 
-
 // 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 export const constantRoutes: Array<RouteRecordRaw> = [
     {
@@ -40,10 +39,11 @@ export const constantRoutes: Array<RouteRecordRaw> = [
                 path: 'dashboard',
                 component: () => import('@/views/dashboard/index.vue'),
                 name: 'Dashboard',
-                meta: {title: '首页', icon: 'dashboard', affix: true}
+                meta: {title: 'dashboard', icon: 'dashboard', affix: true}
             }
         ]
     },
+
     // 外部链接
     /*{
         path: '/external-link',