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

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">
-import { defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
-import { useRoute, RouteLocationMatched } from 'vue-router'
-import { compile } from 'path-to-regexp'
+<script setup lang="ts">
+import {onBeforeMount, ref, watch} from 'vue'
+import {useRoute, RouteLocationMatched} from 'vue-router'
+import {compile} from 'path-to-regexp'
 import router from '@/router'
-export default defineComponent({
-  setup() {
-    const currentRoute = useRoute()
-    const pathCompile = (path: string) => {
-      const { params } = currentRoute
-      const toPath = compile(path)
-      return toPath(params)
-    }
+import {generateTitle} from '@/utils/i18n'
 
-    const state = reactive({
-      breadcrumbs: [] as Array<RouteLocationMatched>,
-      getBreadcrumb: () => {
-        let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
-        const first = matched[0]
-        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)
-        })
-      }
-    })
+const currentRoute = useRoute()
+const pathCompile = (path: string) => {
+  const {params} = currentRoute
+  const toPath = compile(path)
+  return toPath(params)
+}
 
-    watch(() => currentRoute.path, (path) => {
-      if (path.startsWith('/redirect/')) {
-        return
-      }
-      state.getBreadcrumb()
-    })
+const breadcrumbs = ref( [] as Array<RouteLocationMatched>)
 
-    onBeforeMount(() => {
-      state.getBreadcrumb()
-    })
-
-    return {
-      ...toRefs(state)
-    }
+function getBreadcrumb() {
+  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
+  const first = matched[0]
+  if (!isDashboard(first)) {
+    matched = [{path: '/dashboard', meta: {title: 'dashboard'}} as any].concat(matched)
   }
+  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" @click="show=!show">
+       <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
           <Close v-show="show"/>
           <Setting v-show="!show"/>
         </div>
@@ -31,9 +30,7 @@ const props = defineProps({
   }
 })
 
-const theme = computed(() => {
-  useSettingStoreHook().theme
-})
+const theme =  ""
 
 const show = ref(false)