Translation (english + 中文) of the litemall-admin interface (#541)

* Add: i18n translations with vue-i18n (english + 中文)

* Add: LocaleChanger component on admin login page

Author: charlyisidore

litemall-admin/package.json

@@ -61,6 +61,7 @@
     "v-charts": "1.19.0",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
+    "vue-i18n": "^8.28.2",
     "vue-router": "3.0.2",
     "vuex": "3.1.0",
     "xlsx": ">=0.17.0"

litemall-admin/src/components/BackToTop/index.vue

@@ -2,7 +2,7 @@
   <transition :name="transitionName">
     <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
       <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
-        <title>回到顶部</title>
+        <title>{{ $t('app.button.back_to_top') }}</title>
         <g>
           <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"/>
         </g>

litemall-admin/src/components/Breadcrumb/index.vue

@@ -2,8 +2,8 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noredirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <span v-if="item.redirect === 'noredirect' || index == levelList.length - 1" class="no-redirect">{{ $t(item.meta.title) }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ $t(item.meta.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -38,7 +38,7 @@ export default {
       )
       const first = matched[0]
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: 'app.menu.dashboard' }}].concat(matched)
       }
       this.levelList = matched.filter(
         item => item.meta && item.meta.title && item.meta.breadcrumb !== false

litemall-admin/src/components/LocaleChanger/index.vue

@@ -0,0 +1,27 @@
+<!-- https://kazupon.github.io/vue-i18n/guide/locale.html -->
+<template>
+  <el-select v-model="$i18n.locale" size="mini" placeholder="lang" class="select">
+    <el-option v-for="(lang, i) in langs" :key="`Lang${i}`" :label="lang.label" :value="lang.value" />
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'LocaleChanger',
+  data() {
+    return {
+      langs: Object.entries(this.$i18n.messages)
+        .map(([key, messages]) => ({
+          label: messages.lang ?? key,
+          value: key
+        }))
+    }
+  }
+}
+</script>
+
+<style>
+.select {
+  width: 180px;
+}
+</style>