fix: update language enums (#476)

website/app.vue

@@ -14,17 +14,18 @@ import zhLocale from '@element-plus/locale/lang/zh-CN'
 import enLocale from '@element-plus/locale/lang/en'
 import esLocale from '@element-plus/locale/lang/es'
 import frLocale from '@element-plus/locale/lang/fr'
+import { Language } from './enums/language'
 
-const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN'
+const lang = location.hash.replace('#', '').split('/')[1] || Language.CN
 const localize = lang => {
   switch (lang) {
-    case 'zh-CN':
+    case Language.CN:
       use(zhLocale)
       break
-    case 'es':
+    case Language.ES:
       use(esLocale)
       break
-    case 'fr-FR':
+    case Language.FR:
       use(frLocale)
       break
     default:
@@ -38,7 +39,7 @@ export default {
 
   computed: {
     lang() {
-      return this.$route.path.split('/')[1] || 'zh-CN'
+      return this.$route.path.split('/')[1] || Language.CN
     },
     isComponent() {
       return /^component-/.test(this.$route.name || '')
@@ -47,7 +48,7 @@ export default {
 
   watch: {
     lang(val) {
-      if (val === 'zh-CN') {
+      if (val === Language.CN) {
         this.suggestJump()
       }
       localize(val)
@@ -56,7 +57,7 @@ export default {
 
   mounted() {
     localize(this.lang)
-    if (this.lang === 'zh-CN') {
+    if (this.lang === Language.CN) {
       this.suggestJump()
     }
   },
@@ -70,7 +71,7 @@ export default {
       const cnHref = href.indexOf('eleme.cn') > -1 || href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1
       if (cnHref || preferGithub) return
       setTimeout(() => {
-        if (this.lang !== 'zh-CN') return
+        if (this.lang !== Language.CN) return
         this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
           .then(() => {
             location.replace('https://element-plus.gitee.io')

website/components/footer.vue

@@ -52,6 +52,7 @@
 </template>
 <script>
 import compoLang from '../i18n/component.json'
+import { Language } from '../enums/language'
 const version = '1.0.0' // element version
 
 export default {
@@ -64,7 +65,7 @@ export default {
 
   computed: {
     lang() {
-      return this.$route.path.split('/')[1] || 'zh-CN'
+      return this.$route.path.split('/')[1] || Language.CN
     },
 
     langConfig() {
@@ -72,7 +73,7 @@ export default {
     },
 
     gitterLink() {
-      return this.lang === 'zh-CN' ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby'
+      return this.lang === Language.CN ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby'
     },
   },
 }

website/components/header.vue

@@ -116,6 +116,7 @@
 </template>
 <script>
 import AlgoliaSearch from './search.vue'
+import { Language } from '../enums/language'
 import compoLang from '../i18n/component.json'
 
 const version = '1.0.0' // element version
@@ -133,17 +134,17 @@ export default {
       verDropdownVisible: true,
       langDropdownVisible: true,
       langs: {
-        'zh-CN': '中文',
-        'en-US': 'English',
-        'es': 'Español',
-        'fr-FR': 'Français',
+        [Language.CN]: '中文',
+        [Language.EN]: 'English',
+        [Language.ES]: 'Español',
+        [Language.FR]: 'Français',
       },
     }
   },
 
   computed: {
     lang() {
-      return this.$route.path.split('/')[1] || 'zh-CN'
+      return this.$route.path.split('/')[1] || [Language.CN]
     },
     displayedLang() {
       return this.langs[this.lang] || '中文'

website/components/search.vue

@@ -44,6 +44,7 @@
 
 <script>
 import algoliasearch from 'algoliasearch'
+import { Language } from '../enums/language'
 
 export default {
   data() {
@@ -52,22 +53,22 @@ export default {
       query: '',
       isEmpty: false,
       langs: {
-        'zh-CN': {
+        [Language.CN]: {
           search: '搜索文档',
           empty: '无匹配结果',
           index: 'zh',
         },
-        'en-US': {
+        [Language.EN]: {
           search: 'Search',
           empty: 'No results',
           index: 'en',
         },
-        'es': {
+        [Language.ES]: {
           search: 'Buscar',
           empty: 'No hay datos que coincidan',
           index: 'es',
         },
-        'fr-FR': {
+        [Language.FR]: {
           search: 'Rechercher',
           empty: 'Aucun résultat',
           index: 'fr',

website/enums/language.ts

@@ -0,0 +1,10 @@
+export enum Language {
+  /** Chinese */
+  CN = 'zh-CN',
+  /** English */
+  EN = 'en-US',
+  /** Spanish */
+  ES = 'es',
+  /** French */
+  FR = 'fr-FR',
+}

website/route.config.js

@@ -1,6 +1,8 @@
 import { defineAsyncComponent } from 'vue'
 import langs from './i18n/route'
 import navConfig from './nav.config'
+import { Language } from './enums/language'
+
 const LoadingComponent = {
   template: `<div v-loading="true" style="min-height: 500px; width: 100%;"></div>`,
 }
@@ -19,35 +21,35 @@ const getAsyncComponent = func => {
 }
 
 const LOAD_MAP = {
-  'zh-CN': name => {
+  [Language.CN]: name => {
     return getAsyncComponent(() => import(/* webpackChunkName: "zh-CN" */ `./pages/${name}.vue`))
   },
-  'en-US': name => {
+  [Language.EN]: name => {
     return getAsyncComponent(() => import(/* webpackChunkName: "en-US" */ `./pages/${name}.vue`))
   },
-  'es': name => {
+  [Language.ES]: name => {
     return getAsyncComponent(() => import(/* webpackChunkName: "es" */ `./pages/${name}.vue`))
   },
-  'fr-FR': name => {
+  [Language.FR]: name => {
     return getAsyncComponent(() => import(/* webpackChunkName: "fr-FR" */ `./pages/${name}.vue`))
   },
-}
+},
 
 const load = function(lang, path) {
   return LOAD_MAP[lang](path)
 }
 
 const LOAD_DOCS_MAP = {
-  'zh-CN': path => {
+  [Language.CN]: path => {
     return getAsyncComponent(() => import(/* webpackChunkName: "DOCS zh-CN" */ `./docs/zh-CN${path}.md`))
   },
-  'en-US': path => {
+  [Language.EN]: path => {
     return getAsyncComponent(() => import(/* webpackChunkName: "DOCS en-US" */ `./docs/en-US${path}.md`))
   },
-  'es': path => {
+  [Language.ES]: path => {
     return getAsyncComponent(() => import(/* webpackChunkName: "DOCS es" */ `./docs/es${path}.md`))
   },
-  'fr-FR': path => {
+  [Language.FR]: path => {
     return getAsyncComponent(() => import(/* webpackChunkName: "DOCS fr-FR" */ `./docs/fr-FR${path}.md`))
   },
 }
@@ -100,7 +102,6 @@ const registerRoute = navConfig => {
 
     route[index].children.push(child)
   }
-
   return route
 }
 
@@ -145,22 +146,22 @@ langs.forEach(lang => {
   route = route.concat(generateMiscRoutes(lang.lang))
 })
 
-let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.language || 'en-US'
-let defaultPath = '/en-US'
+let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.language || Language.EN
+let defaultPath = Language.EN
 if (userLanguage.indexOf('zh-') !== -1) {
-  defaultPath = '/zh-CN'
+  defaultPath = Language.CN
 } else if (userLanguage.indexOf('es') !== -1) {
-  defaultPath = '/es'
+  defaultPath = Language.ES
 } else if (userLanguage.indexOf('fr') !== -1) {
-  defaultPath = '/fr-FR'
+  defaultPath = Language.FR
 }
 
 route = route.concat([{
   path: '/',
-  redirect: { path: defaultPath },
+  redirect: { path: `/${defaultPath}` },
 }, {
   path: '/*',
-  redirect: { path: defaultPath },
+  redirect: { path: `/${defaultPath}` },
 }])
 
 export default route