From 2e90b7c6149959bd2fd9ae985442781d0d27b8a3 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Tue, 23 Jun 2020 22:05:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20page=20layout=20i18n=20language?=
 =?UTF-8?q?=20config.=20=E5=A2=9E=E5=8A=A0=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E7=9A=84=E5=9B=BD=E9=99=85=E5=8C=96=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 22 ++++++++++++++++++++--
 src/components/menu/SiderMenu.vue  | 13 +++++--------
 src/components/menu/menu.js        |  1 +
 src/components/page/PageHeader.vue | 13 ++++++++++---
 src/layouts/GlobalHeader.vue       | 10 ++++------
 src/layouts/PageLayout.vue         | 13 ++++++-------
 src/layouts/PageView.vue           | 16 +++++++++++++---
 src/router/i18n.js                 |  7 +++++++
 src/store/modules/setting.js       |  6 +++++-
 9 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 00ddb11..f77ecbf 100644
--- a/src/App.vue
+++ b/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: {
diff --git a/src/components/menu/SiderMenu.vue b/src/components/menu/SiderMenu.vue
index a36d5cb..dabebd8 100644
--- a/src/components/menu/SiderMenu.vue
+++ b/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>
diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
index 9bed16e..e0dc9b7 100644
--- a/src/components/menu/menu.js
+++ b/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()
diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
index bf4a873..59d4aea 100644
--- a/src/components/page/PageHeader.vue
+++ b/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 () {
diff --git a/src/layouts/GlobalHeader.vue b/src/layouts/GlobalHeader.vue
index 0d2f1c6..200a60e 100644
--- a/src/layouts/GlobalHeader.vue
+++ b/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>
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index ef09922..ad5df11 100644
--- a/src/layouts/PageLayout.vue
+++ b/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>
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
index 47df41e..0bb5d79 100644
--- a/src/layouts/PageView.vue
+++ b/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
diff --git a/src/router/i18n.js b/src/router/i18n.js
index 8966e9e..fab8771 100644
--- a/src/router/i18n.js
+++ b/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: '工作台'},
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index c9cea06..4f66afa 100644
--- a/src/store/modules/setting.js
+++ b/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
     }
   }
 }