feat(components): language switch

Author: GeekQiaQia

README.md

@@ -48,11 +48,11 @@ Give a ⭐️ if this project helped you!
 - [x] 图片拖拽/裁剪
 - [x] 支持切换主题色:一键换肤
 - [x] 指令权限：v-permisson /全局方法：$permission (参考 tableList.vue)
+- [x] 国际化
 
 ## 正在完成功能 | The functionality is being completed
 
 - [x] 可拖拽弹窗
-- [x] 国际化
 - [x] 导航模式切换
 - [x] 内容区域控制
 
@@ -166,6 +166,10 @@ git merge upstream/main
 
 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd27dbaba4f94db88a98468640f3ca00~tplv-k3u1fbpfcp-watermark.image)
 
+### 国际化
+
+![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d97113bee9994d5891ea4f38f5f6c85b~tplv-k3u1fbpfcp-watermark.image)
+
 ### 全屏功能
 
 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17ee79df049c4536a73177e4ae086650~tplv-k3u1fbpfcp-watermark.image)

src/components/Breadcrumb/index.vue

@@ -2,26 +2,31 @@
   <el-breadcrumb class="app-breadcremb" separator-class="el-icon-arrow-right">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title[lang] }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title[lang] }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, watch, computed } from 'vue'
 import { compile } from 'path-to-regexp'
-import { useRoute, useRouter } from 'vue-router'
+import { RouteLocationMatched, useRoute, useRouter } from 'vue-router'
+import { useStore } from '@/store/index'
 
 export default defineComponent({
   setup() {
     const levelList = ref([] as any)
     const route = useRoute()
     const router = useRouter()
+    const store = useStore()
+
+    const lang = computed(() => store.getters['settingsModule/getLangState'])
+
     // 获取面包屑
     const getBreadcrumb = () => {
       // 只展示路由中设置了meta.title的元素；
-      const matched = route.matched.filter((item) => item.meta && item.meta.title)
+      const matched = route.matched.filter((item: RouteLocationMatched) => item?.meta?.title)
       levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     }
 
@@ -48,6 +53,7 @@ export default defineComponent({
     })
     return {
       levelList,
+      lang,
       handleLink
     }
   }

src/components/LangSwitch/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <ul id="lang" class="lang-switch">
+    <li class="header-lang" :class="{ 'is-active': lang === '/zh-CN' }" @click="handleSwitchLang('/zh-CN')">中文</li>
+    <span>/</span>
+    <li class="header-lang" :class="{ 'is-active': lang === '/en-US' }" @click="handleSwitchLang('/en-US')">En</li>
+  </ul>
+</template>
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useStore } from '@/store/index'
+import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
+import enLocale from 'element-plus/lib/locale/lang/en'
+import { use } from 'element-plus/lib/locale'
+import { locale } from 'element-plus'
+
+export default defineComponent({
+  setup() {
+    const store = useStore()
+
+    const lang = computed(() => {
+      const langState = store.getters['settingsModule/getLangState']
+      const local = langState === '/zh-CN' ? zhLocale : enLocale
+      // eslint-disable-next-line no-unused-expressions
+      import.meta.env.DEV ? locale(local) : use(local)
+      return langState
+    })
+    /**
+     * @description 语言切换
+     */
+    const handleSwitchLang = (_lang: string) => {
+      store.dispatch('settingsModule/toToggleLang', { lang: _lang })
+    }
+    return {
+      lang,
+      handleSwitchLang
+    }
+  }
+})
+</script>
+<style lang="stylus" scoped>
+.lang-switch {
+     display: inline-block;
+     float: right;
+     height: 100%;
+     & li {
+       color: #2c3e50;
+       display: inline-block;
+       vertical-align: middle;
+       padding: 0 10px;
+       cursor: pointer;
+     }
+     .header-download {
+       opacity: 0.4;
+       cursor: default;
+       &.is-available {
+         opacity: 1;
+         cursor: pointer;
+       }
+     }
+     span {
+       opacity: 0.7;
+     }
+     .header-lang {
+       cursor: pointer;
+       opacity: 0.7;
+       &.is-active {
+         opacity: 1;
+         color: rgba(24, 144, 255, 1);
+       }
+     }
+   }
+
+   .lang-switch::after {
+     display: inline-block;
+     content: '';
+     height: 100%;
+     vertical-align: middle;
+     .header-lang {
+       cursor: pointer;
+       opacity: 0.7;
+       &.is-active {
+         opacity: 1;
+       }
+     }
+   }
+</style>

src/components/Search/index.vue

@@ -29,6 +29,8 @@ export default defineComponent({
     const router = useRouter()
     const fuse = ref()
     const routes = computed(() => store.state.permissionModule.accessRoutes)
+    const lang = computed(() => store.getters['settingsModule/getLangState'])
+
     const state = reactive<stateType>({
       options: [],
       value: ''
@@ -72,7 +74,7 @@ export default defineComponent({
             title: [...prefixTitle]
           }
           if (route?.meta?.title) {
-            data.title = [...data.title, route.meta.title]
+            data.title = [...data.title, route.meta.title[lang.value]]
             list.push(data)
           }
           if (route.children) {
@@ -99,6 +101,7 @@ export default defineComponent({
     })
 
     return {
+      lang,
       handleChange,
       querySearch,
       ...toRefs(state)

src/layout/components/AppMain.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="app-main">
     <el-tabs id="Tabs" v-model="currentIndex" type="card" closable @tab-click="clickTab" @tab-remove="removeTab">
-      <el-tab-pane v-for="item in tabsOption" :key="item.route" :closable="item.route !== '/home'" :label="item.title" :name="item.route">
+      <el-tab-pane v-for="item in tabsOption" :key="item.route" :closable="item.route !== '/home'" :label="item.title[lang]" :name="item.route">
         <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
           <transition name="fade" mode="out-in">
             <component :is="Component" />
@@ -30,8 +30,9 @@ export default defineComponent({
     // store 中获取当前路由以及所有的路由对象；
     const store = useStore()
     const tabsOption = computed(() => store.getters['tabModule/getTabsOption'])
-    console.log('tabsOption.value is ', tabsOption.value)
     const currentIndex = computed(() => store.getters['tabModule/getCurrentIndex'])
+    const lang = computed(() => store.getters['settingsModule/getLangState'])
+
     const router = useRouter()
     // mothods
     /**
@@ -61,6 +62,7 @@ export default defineComponent({
     }
     return {
       tabsOption,
+      lang,
       currentIndex,
       removeTab,
       clickTab

src/layout/components/Navbar.vue

@@ -5,6 +5,7 @@
       <breadcrumb class="breadcrumb-container" />
       <div class="right-menu">
         <search></search>
+        <lang-switch></lang-switch>
         <div id="Message">
           <el-dropdown>
             <el-badge :value="messageNum" :max="99" class="message-badge" type="danger">
@@ -24,10 +25,10 @@
           </el-dropdown>
         </div>
         <el-button id="fullScreen" class="full-screen">
-          <el-tooltip content="全屏浏览" effect="dark" placement="left">
+          <el-tooltip :content="langConfig.header.fullScreen[lang]" effect="dark" placement="left">
             <i v-show="fullScreen == false" class="el-icon-full-screen" @click="toShowFullScreen()"></i>
           </el-tooltip>
-          <el-tooltip content="退出全屏" effect="dark" placement="left">
+          <el-tooltip :content="langConfig.header.exitFullScreen[lang]" effect="dark" placement="left">
             <i v-show="fullScreen == true" class="el-icon-bottom-left" @click="toExitFullScreen()"></i>
           </el-tooltip>
         </el-button>
@@ -39,16 +40,16 @@
           <template #dropdown>
             <el-dropdown-menu class="user-dropdown">
               <router-link to="/">
-                <el-dropdown-item>首页</el-dropdown-item>
+                <el-dropdown-item>{{ langConfig.header.user.homePage[lang] }}</el-dropdown-item>
               </router-link>
               <router-link to="/personal/personalCenter">
-                <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item>{{ langConfig.header.user.personalCenter[lang] }}</el-dropdown-item>
               </router-link>
               <router-link to="/personal/personalSetting">
-                <el-dropdown-item>个人设置</el-dropdown-item>
+                <el-dropdown-item>{{ langConfig.header.user.personalSetting[lang] }}</el-dropdown-item>
               </router-link>
               <el-dropdown-item divided>
-                <span style="display: block" @click="logout">退出登录</span>
+                <span style="display: block" @click="logout">{{ langConfig.header.user.logout[lang] }}</span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>
@@ -62,17 +63,20 @@ import { defineComponent, computed, ref } from 'vue'
 import Hamburger from '@/components/Hamburger/Hamburger.vue'
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Search from '@/components/Search/index.vue'
+import LangSwitch from '@/components/LangSwitch/index.vue'
 import avatar from '@/assets/avatar-default.jpg'
 import { useRouter } from 'vue-router'
 import { toFullScreen, exitFullScreen } from '@/utils/screen'
 import { useStore } from '@/store/index'
+import { langConfig } from '@/utils/constant/config'
 
 export default defineComponent({
   name: 'Navbar',
   components: {
     Hamburger,
     Breadcrumb,
-    Search
+    Search,
+    LangSwitch
   },
   props: {
     primary: {
@@ -84,12 +88,13 @@ export default defineComponent({
     const router = useRouter()
     const store = useStore()
     const opened = computed(() => store.getters['appModule/getSidebarState'])
-    const nickname = computed(() => JSON.parse(localStorage.getItem('userInfo') as string)?.userName ?? '极客恰恰')
     const fullScreen = ref(false)
     const messageNum = computed(() => store.getters['messageModule/getMessageNum'])
+    const lang = computed((): string => store.getters['settingsModule/getLangState'])
+    const nickname = computed(() => JSON.parse(localStorage.getItem('userInfo') as string)?.userName ?? '极客恰恰')
+
     // methods
     const toggleSideBar = () => {
-      console.log('into toggleSideBar')
       store.dispatch('appModule/toggleSideBar')
     }
 
@@ -109,6 +114,7 @@ export default defineComponent({
 
       router.replace('/login')
     }
+
     return {
       messageNum,
       toShowFullScreen,
@@ -117,9 +123,11 @@ export default defineComponent({
       exitFullScreen,
       fullScreen,
       nickname,
+      lang,
       avatar,
       toggleSideBar,
       opened,
+      langConfig,
       logout
     }
   }
@@ -166,6 +174,7 @@ export default defineComponent({
     &:focus {
       outline: none;
     }
+
     .message-badge {
       .is-fixed {
         top: 12px !important;

src/layout/components/Sidebar/sidebarItem.vue

@@ -4,29 +4,29 @@
     <template v-if="hasOneShowingChild(item.children, item)">
       <el-menu-item :key="item.path" :index="item.path" :route="item.path">
         <i :class="item.meta.icon"></i>
-        <template #title>{{ item.meta.title }}</template>
+        <template #title>{{ item.meta.title[lang] }}</template>
       </el-menu-item>
     </template>
     <el-submenu v-else ref="subMenu" :index="item.path" popper-append-to-body>
       <template #title>
         <i :class="item.meta.icon"></i>
-        <span>{{ item.meta.title }}</span>
+        <span>{{ item.meta.title[lang] }}</span>
       </template>
       <!--children 进行递归调用自身组件-->
       <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="child.path" class="nest-menu" />
     </el-submenu>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, toRef } from 'vue'
-// import { isExternal } from '@/utils/validate'
-// import path from 'path'
+import { defineComponent, onMounted, ref, toRef, computed } from 'vue'
+import { useStore } from '@/store/index'
+
 interface childType {
   path: string
   name?: string
   component: Function
   meta: {
-    title: string
+    title: Object
     icon: string
     hidden?: boolean
     [key: string]: any
@@ -52,9 +52,11 @@ export default defineComponent({
   setup(props) {
     // 是否只有一个孩子
     const onlyOneChild = ref()
+    const store = useStore()
+
     // 析构获取 props 属性 basePath
     const basePath = toRef(props, 'basePath')
-
+    const lang = computed(() => store.getters['settingsModule/getLangState'])
     onMounted(() => {
       // eslint-disable-next-line no-console
       console.log('basePath.value', basePath.value)
@@ -103,7 +105,8 @@ export default defineComponent({
 
     return {
       onlyOneChild,
-      hasOneShowingChild
+      hasOneShowingChild,
+      lang
       // resolvePath,
     }
   }