feature:add i18n

src/views/layout/components/Navbar.vue

@@ -12,6 +12,14 @@
         <screenfull class="screenfull right-menu-item"></screenfull>
       </el-tooltip>
 
+      <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+        <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
+          <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
       <el-tooltip effect="dark" content="换肤" placement="bottom">
         <theme-picker class="theme-switch right-menu-item"></theme-picker>
       </el-tooltip>
@@ -21,8 +29,8 @@
           <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
           <i class="el-icon-caret-bottom"></i>
         </div>
-        <el-dropdown-menu class="user-dropdown" slot="dropdown">
-          <router-link class="inlineBlock" to="/">
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/">
             <el-dropdown-item>
               首页
             </el-dropdown-item>
@@ -41,10 +49,6 @@
   </el-menu>
 </template>
 
-
-
-
-
 <script>
 import { mapGetters } from 'vuex'
 import Levelbar from './Levelbar'
@@ -71,13 +75,22 @@ export default {
     ...mapGetters([
       'sidebar',
       'name',
-      'avatar'
+      'avatar',
+      'language'
     ])
   },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },
+    handleSetLanguage(lang) {
+      this.$i18n.locale = lang
+      this.$store.dispatch('setLanguage', lang)
+      this.$message({
+        message: 'switch language success',
+        type: 'success'
+      })
+    },
     logout() {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()// 为了重新实例化vue-router对象 避免bug
@@ -115,6 +128,14 @@ export default {
     .screenfull {
       height: 20px;
     }
+    .international{
+      vertical-align: top;
+      .international-icon{
+        font-size: 20px;
+        cursor: pointer;
+        vertical-align: -5px;
+      }
+    }
     .theme-switch {
       vertical-align: 15px;
     }

src/views/layout/components/SidebarItem.vue

@@ -5,14 +5,14 @@
       <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key='item.children[0].name'>
         <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
           <svg-icon v-if='item.children[0].meta&&item.children[0].meta.icon' :icon-class="item.children[0].meta.icon"></svg-icon>
-          <span>{{item.children[0].meta?item.children[0].meta.title:'no title'}}</span>
+          <span>{{item.children[0].meta?generateTitle(item.children[0].meta.title):'no title'}}</span>
         </el-menu-item>
       </router-link>
 
       <el-submenu :index="item.name" v-if="item.children&&item.children.length>1&&!item.hidden" :key='item.name'>
         <template slot="title">
           <svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
-          <span>{{item.meta?item.meta.title:'no title'}}</span>
+          <span>{{item.meta?generateTitle(item.meta.title):'no title'}}</span>
         </template>
         <template v-for="child in item.children" v-if='!child.hidden'>
 
@@ -21,7 +21,7 @@
           <router-link v-else :to="item.path+'/'+child.path" :key='child.name'>
             <el-menu-item :index="item.path+'/'+child.path">
               <svg-icon v-if='child.meta&&child.meta.icon' :icon-class="child.meta.icon"></svg-icon>
-              <span v-if='child.meta' >{{child.meta.title}}</span>
+              <span v-if='child.meta' >{{generateTitle(child.meta.title)}}</span>
             </el-menu-item>
           </router-link>
 
@@ -39,6 +39,11 @@ export default {
     routes: {
       type: Array
     }
+  },
+  methods: {
+    generateTitle(title) {
+      return this.$t('route.' + title)
+    }
   }
 }
 </script>