feat: add lang-select

src/components/page/GlobalHeader.vue

@@ -13,7 +13,7 @@
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
         @click="toggle"/>
 
-      <user-menu></user-menu>
+      <head-menu />
     </div>
     <div v-else :class="['top-nav-header-index', theme]">
       <div class="header-index-wide">
@@ -31,7 +31,9 @@
             :type="collapsed ? 'menu-fold' : 'menu-unfold'"
             @click="toggle"></a-icon>
         </div>
-        <user-menu class="header-index-right"></user-menu>
+        <div class="header-index-right">
+          <head-menu />
+        </div>
       </div>
     </div>
 
@@ -39,16 +41,15 @@
 </template>
 
 <script>
-  import UserMenu from '../tools/UserMenu'
+  import HeadMenu from '../tools/HeadMenu'
   import SMenu from '../menu/'
   import Logo from '../tools/Logo'
-
   import { mixin } from '@/utils/mixin.js'
 
   export default {
     name: 'GlobalHeader',
     components: {
-      UserMenu,
+      HeadMenu,
       SMenu,
       Logo
     },

src/components/page/GlobalLayout.vue

@@ -279,7 +279,7 @@
 
     .header, .top-nav-header-index {
 
-      .user-wrapper {
+      .global-header-wrapper {
         float: right;
         height: 100%;
 
@@ -301,16 +301,23 @@
             vertical-align: middle;
           }
 
-
           .icon {
             font-size: 16px;
             padding: 4px;
           }
         }
+
+        .nickname {
+          user-select: none;
+        }
+
+        .global-lang {
+
+        }
       }
       
       &.dark {
-        .user-wrapper {
+        .global-header-wrapper {
 
           .action {
             color: rgba(255, 255, 255, 0.85);

src/components/tools/UserMenu.vue → src/components/tools/HeadMenu.vue

 <template>
-  <div class="user-wrapper">
+  <div class="global-header-wrapper">
     <span class="action">
       <a-icon type="question-circle-o"></a-icon>
     </span>
@@ -7,7 +7,7 @@
     <a-dropdown>
       <span class="action ant-dropdown-link user-dropdown-menu">
         <a-avatar class="avatar" size="small" :src="avatar()"/>
-        <span>{{ nickname() }}</span>
+        <span class="nickname">{{ nickname() }}</span>
       </span>
       <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
         <a-menu-item key="0">
@@ -35,17 +35,21 @@
         </a-menu-item>
       </a-menu>
     </a-dropdown>
+    <!-- select lang component -->
+    <lang-select />
   </div>
 </template>
 
 <script>
   import HeaderNotice from './HeaderNotice'
+  import LangSelect from '@/components/tools/LangSelect'
   import { mapActions, mapGetters } from 'vuex'
 
   export default {
-    name: 'UserMenu',
+    name: 'HeadMenu',
     components: {
-      HeaderNotice
+      HeaderNotice,
+      LangSelect
     },
     methods: {
       ...mapActions(['Logout']),

src/components/tools/LangSelect.vue

+<template>
+  <a-dropdown>
+    <span class="action global-lang">
+      <a-icon type="global" style="font-size: 16px" />
+    </span>
+    <a-menu slot="overlay" style="width: 150px;">
+      <a-menu-item key="zhCN">
+        <a rel="noopener noreferrer"><span role="img" aria-label="简体中文">🇨🇳</span>简体中文</a>
+      </a-menu-item>
+      <a-menu-item key="zhTW">
+        <a rel="noopener noreferrer"><span role="img" aria-label="繁体中文">🇭🇰</span>繁体中文</a>
+      </a-menu-item>
+      <a-menu-item key="enUS">
+        <a rel="noopener noreferrer"><span role="img" aria-label="English">🇬🇧</span>English</a>
+      </a-menu-item>
+      <a-menu-item key="Português">
+        <a rel="noopener noreferrer"><span role="img" aria-label="Português">🇧🇷</span>Português</a>
+      </a-menu-item>
+    </a-menu>
+  </a-dropdown>
+</template>
+
+<script>
+export default {
+    name: 'LangSelect',
+    data () {
+        return {}
+    },
+    methods: {
+
+    }
+}
+</script>