From 1ab1f1b224e40a57bff162582a1574c1d656b5fb Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Wed, 24 Jun 2020 16:31:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20optimize=20international=20language=20s?=
 =?UTF-8?q?ettings;=20:star2:=20=E4=BC=98=E5=8C=96=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E8=AF=AD=E8=A8=80=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/GlobalHeader.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/layouts/GlobalHeader.vue b/src/layouts/GlobalHeader.vue
index 200a60e..a81982b 100644
--- a/src/layouts/GlobalHeader.vue
+++ b/src/layouts/GlobalHeader.vue
@@ -21,12 +21,10 @@
           <header-avatar class="header-item"/>
           <a-dropdown class="lang header-item">
             <div>
-              <a-icon type="global"/>
+              <a-icon type="global"/> {{langAlias}}
             </div>
-            <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>
+            <a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
+              <a-menu-item v-for=" lang in langList" :key="lang.key">{{lang.key.toLowerCase() + ' ' + lang.name}}</a-menu-item>
             </a-menu>
           </a-dropdown>
       </div>
@@ -45,16 +43,24 @@ export default {
   name: 'GlobalHeader',
   components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
   props: ['collapsed', 'menuData'],
-  provide() {
+  inject: ['menuI18n'],
+  data() {
     return {
-      headerTheme: this.theme
+      langList: [
+        {key: 'CN', name: '简体中文', alias: '简体'},
+        {key: 'HK', name: '繁体中文', alias: '繁体'},
+        {key: 'US', name: 'English', alias: 'English'}
+      ]
     }
   },
-  inject: ['menuI18n'],
   computed: {
     ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
     headerTheme () {
       return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme
+    },
+    langAlias() {
+      let lang = this.langList.find(item => item.key == this.lang)
+      return lang.alias
     }
   },
   methods: {
@@ -101,6 +107,7 @@ export default {
         margin: auto;
       }
       &.side{
+        padding-right: 12px;
       }
       .logo {
         height: 64px;