feat: add page layout i18n language config.

增加页面布局的国际化语言配置

src/App.vue

@@ -1,15 +1,21 @@
 <template>
-  <div id="app">
+  <a-config-provider :locale="locale">
     <router-view/>
-  </div>
+  </a-config-provider>
 </template>
 
 <script>
+import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import enquireScreen from './utils/device'
 import {mapState} from 'vuex'
 
 export default {
   name: 'App',
+  data() {
+    return {
+      locale: zh_CN
+    }
+  },
   created () {
     let _this = this
     enquireScreen(isMobile => {
@@ -25,6 +31,18 @@ export default {
     },
     lang(val) {
       this.$i18n.locale = val
+      switch (val) {
+        case 'CN':
+          this.locale = require('ant-design-vue/lib/locale-provider/zh_CN')
+          break
+        case 'HK':
+          this.locale = require('ant-design-vue/lib/locale-provider/zh_TW')
+          break
+        case 'US':
+        default:
+          this.locale = require('ant-design-vue/lib/locale-provider/en_US')
+          break
+      }
     }
   },
   computed: {

src/components/menu/SiderMenu.vue

@@ -6,12 +6,13 @@
         <h1>{{systemName}}</h1>
       </router-link>
     </div>
-    <i-menu :i18n="menuI18n" :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
+    <i-menu @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
   </a-layout-sider>
 </template>
 
 <script>
 import IMenu from './menu'
+import {mapState, mapMutations} from 'vuex'
 export default {
   name: 'SiderMenu',
   components: {IMenu},
@@ -38,17 +39,13 @@ export default {
     }
   },
   computed: {
-    isMobile () {
-      return this.$store.state.setting.isMobile
-    },
-    systemName () {
-      return this.$store.state.setting.systemName
-    }
+    ...mapState('setting', ['isMobile', 'systemName'])
   },
   methods: {
     onSelect (obj) {
       this.$emit('menuSelect', obj)
-    }
+    },
+    ...mapMutations('setting', ['setRoutesI18n'])
   }
 }
 </script>

src/components/menu/menu.js

@@ -87,6 +87,7 @@ export default {
         this.$i18n.mergeLocaleMessage(key, this.i18n[key])
       })
     }
+    this.$emit('i18nComplete', this.$i18n._getMessages())
   },
   created () {
     this.updateMenu()

src/components/page/PageHeader.vue

@@ -4,8 +4,8 @@
       <div class="breadcrumb">
         <a-breadcrumb>
           <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
-            <span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
-            <span v-else>{{item.name}}</span>
+            <span v-if="index === 0"><a href="#/dashboard/workplace">{{$t('home.name')}}</a></span>
+            <span v-else>{{$t(item.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')}}</span>
           </a-breadcrumb-item>
         </a-breadcrumb>
       </div>
@@ -46,7 +46,14 @@ export default {
     avatar: {
       type: String,
       required: false
-    }
+    },
+    i18n: Object
+  },
+  created() {
+    let i18n = this.i18n
+    Object.keys(i18n).forEach(key => {
+      this.$i18n.mergeLocaleMessage(key, i18n[key])
+    })
   },
   computed: {
     layout () {

src/layouts/GlobalHeader.vue

@@ -8,7 +8,7 @@
       <a-divider v-if="isMobile" type="vertical" />
       <a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
       <div v-if="layout == 'head' && !isMobile" class="global-header-menu">
-        <i-menu style="height: 64px; line-height: 64px;" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
+        <i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
       </div>
       <div :class="['global-header-right', headerTheme]">
           <header-search class="header-item" />
@@ -23,7 +23,7 @@
             <div>
               <a-icon type="global"/>
             </div>
-            <a-menu @click="changeLang" :selected-keys="[lang]" slot="overlay">
+            <a-menu @click="value => setLang(value.key)" :selected-keys="[lang]" slot="overlay">
               <a-menu-item key="CN"><span >cn</span> 简体中文</a-menu-item>
               <a-menu-item key="HK"><span >hk</span> 繁体中文</a-menu-item>
               <a-menu-item key="US"><span >us</span> English</a-menu-item>
@@ -39,7 +39,7 @@ import HeaderSearch from './HeaderSearch'
 import HeaderNotice from './HeaderNotice'
 import HeaderAvatar from './HeaderlAvatar'
 import IMenu from '../components/menu/menu'
-import {mapState} from 'vuex'
+import {mapState, mapMutations} from 'vuex'
 
 export default {
   name: 'GlobalHeader',
@@ -64,9 +64,7 @@ export default {
     onSelect (obj) {
       this.$emit('menuSelect', obj)
     },
-    changeLang(lang) {
-      this.$store.commit('setting/setLang', lang.key)
-    }
+    ...mapMutations('setting', ['setLang', 'setRoutesI18n'])
   }
 }
 </script>

src/layouts/PageLayout.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="page-layout">
-    <page-header :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
+    <page-header :i18n="routesI18n" :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
       <slot name="action"  slot="action"></slot>
       <slot slot="content" name="headerContent"></slot>
       <div slot="content" v-if="!this.$slots.headerContent && desc">
-        <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
+        <p>{{desc}}</p>
         <div v-if="this.linkList" class="link">
           <template  v-for="(link, index) in linkList">
             <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
@@ -21,6 +21,7 @@
 
 <script>
 import PageHeader from '../components/page/PageHeader'
+import {mapState} from 'vuex'
 export default {
   name: 'PageLayout',
   components: {PageHeader},
@@ -31,11 +32,9 @@ export default {
     }
   },
   computed: {
-    layout () {
-      return this.$store.state.setting.layout
-    }
+    ...mapState('setting', ['layout', 'routesI18n'])
   },
-  mounted () {
+  created () {
     this.getBreadcrumb()
   },
   updated () {
@@ -44,7 +43,7 @@ export default {
   methods: {
     getBreadcrumb () {
       this.breadcrumb = this.$route.matched
-    }
+    },
   }
 }
 </script>

src/layouts/PageView.vue

@@ -22,14 +22,24 @@ export default {
   components: {PageToggleTransition, PageLayout},
   data () {
     return {
-      title: '',
+      path: '',
       desc: '',
       linkList: [],
       extraImage: ''
     }
   },
   computed: {
-    ...mapState('setting', ['multiPage', 'animate'])
+    title() {
+      let key = this.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'
+      return this.$t(key)
+    },
+    ...mapState('setting', ['multiPage', 'animate', 'routesI18n'])
+  },
+  created() {
+    let i18n = this.routesI18n
+    Object.keys(i18n).forEach(key => {
+      this.$i18n.mergeLocaleMessage(key, i18n[key])
+    })
   },
   mounted () {
     this.getPageHeaderInfo()
@@ -39,7 +49,7 @@ export default {
   },
   methods: {
     getPageHeaderInfo () {
-      this.title = this.$route.name
+      this.path = this.$route.path
       const page = this.$refs.page
       if (page) {
         this.desc = page.desc

src/router/i18n.js

@@ -1,5 +1,12 @@
 export default {
+  CN: {
+    home: {name: '首页'},
+  },
+  US: {
+    home: {name: 'home'},
+  },
   HK: {
+    home: {name: '首頁'},
     dashboard: {
       name: 'Dashboard',
       workplace: {name: '工作台'},

src/store/modules/setting.js

@@ -4,7 +4,8 @@ export default {
   state: {
     isMobile: false,
     animates: require('@/config/animates'),
-    ...config
+    ...config,
+    routesI18n: {}
   },
   mutations: {
     setDevice (state, isMobile) {
@@ -36,6 +37,9 @@ export default {
     },
     setLang(state, lang) {
       state.lang = lang
+    },
+    setRoutesI18n(state, i18n) {
+      state.routesI18n = i18n
     }
   }
 }