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

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>
-          <template #title>{{ onlyOneChild.meta.title }}</template>
+          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
+          <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()