feat(i18n) setup i18n config

ly525
1 parent f929fef0
Showing 11 changed files with 208 additions and 3 deletions
front-end/h5/package.json
front-end/h5/src/components/common/header/LangSelect.vue
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/locales/index.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
front-end/h5/src/main.js
front-end/h5/src/mixins/i18n.js
front-end/h5/src/store/index.js
front-end/h5/src/store/modules/i18n.js
front-end/h5/yarn.lock
@@ -23,6 +23,7 @@
     "register-service-worker": "^1.6.2",
     "strapi-sdk-javascript": "^0.3.1",
     "vue": "^2.6.10",
+    "vue-i18n": "^8.14.1",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
+<template>
+  <a-dropdown>
+    <span class="action global-lang">
+      <!-- <a-icon type="global" style="font-size: 16px"/> -->
+      {{langFlag}}
+    </span>
+    <a-menu slot="overlay" style="width: 150px;" @click="SwitchLang">
+      <a-menu-item key="zh-CN">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="简体中文">🇨🇳</span> 简体中文
+        </a>
+      </a-menu-item>
+      <a-menu-item key="en-US">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="English">🇺🇸</span> English
+        </a>
+      </a-menu-item>
+    </a-menu>
+  </a-dropdown>
+</template>
+
+<script>
+import langMixin from '@/mixins/i18n'
+
+export default {
+  name: 'LangSelect',
+  mixins: [langMixin],
+  computed: {
+    langFlag () {
+      switch (this.currentLang) {
+        case 'zh-CN':
+          return '🇨🇳'
+        case 'en-US':
+          return '🇺🇸'
+        default:
+          return '🇨🇳'
+      }
+    }
+  },
+  methods: {
+    SwitchLang (row) {
+      this.setLang(row.key)
+    }
+  }
+}
+</script>
@@ -16,6 +16,7 @@ import PreviewDialog from &#39;./modals/preview.vue&#39;
 import LogoOfHeader from '@/components/common/header/logo.js'
 import ExternalLinksOfHeader from '@/components/common/header/links.js'
+import LangSelect from '@/components/common/header/LangSelect.vue'
 const sidebarMenus = [
   {
@@ -85,7 +86,8 @@ export default {
   name: 'Editor',
   components: {
     LogoOfHeader,
-    ExternalLinksOfHeader
+    ExternalLinksOfHeader,
+    LangSelect
   },
   data: () => ({
     activeMenuKey: 'pluginList',
@@ -195,6 +197,7 @@ export default {
             </a-menu-item>
           </a-menu>
           <ExternalLinksOfHeader />
+          <LangSelect />
         </a-layout-header>
         <a-layout>
           <a-layout-sider width="160" style="background: #fff" collapsed>
@@ -217,7 +220,7 @@ export default {
           <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
             { this._renderMenuContent() }
           </a-layout-sider>
-          <a-layout style="padding: 0 24px 24px">
+          <a-layout style="padding: 0 0 24px">
             <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
               <div style="text-align: center;">
                 <a-radio-group
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+// default language
+import enUSLang from './lang/en-US'
+import zhCNLang from './lang/zh-CN'
+
+Vue.use(VueI18n)
+
+const messages = {
+  'en-US': {
+    ...enUSLang
+  },
+  'zh-CN': {
+    ...zhCNLang
+  }
+}
+export const defaultLang = 'zh-CN'
+
+const i18n = new VueI18n({
+  locale: defaultLang,
+  fallbackLocale: defaultLang,
+  messages
+})
+
+export default i18n
+
+const loadedLanguages = [defaultLang]
+
+function setI18nLanguage (lang) {
+  i18n.locale = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync (lang = defaultLang) {
+  return new Promise(resolve => {
+    if (i18n.locale !== lang) {
+      if (!loadedLanguages.includes(lang)) {
+        return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msg => {
+          i18n.setLocaleMessage(lang, msg.default)
+          loadedLanguages.push(lang)
+          return setI18nLanguage(lang)
+        })
+      }
+      return resolve(setI18nLanguage(lang))
+    }
+    return resolve(lang)
+  })
+}
+export default {
+  app: {
+    title: 'Luban H5'
+  },
+  header: {
+    chineseDocument: '中文文档',
+    englishDocument: 'Document(En)',
+    chat: 'Discussion Group', //
+    logout: 'Logout'
+  },
+  sidebar: {
+    myWorks: 'My Works',
+    dataCenter: 'Data Center',
+    basicData: 'Basic Data',
+    templateCenter: 'Templates',
+    freeTemplates: 'Templates List',
+    accountCenter: 'Account'
+  },
+  workCard: {
+    description: 'Desc',
+    createTime: 'Time',
+    useNow: 'Use it Now',
+    preview: 'Preview',
+    edit: 'Edit',
+    createNewWork: 'Create New'
+  },
+  basicData: {
+    viewData: 'View Data'
+  }
+}
+export default {
+  header: {
+    chineseDocument: '中文文档',
+    englishDocument: '英文文档',
+    chat: '交流群', //  Discussion Group
+    logout: '退出登录'
+  },
+  sidebar: {
+    myWorks: '我的作品',
+    dataCenter: '数据中心',
+    basicData: '基础数据',
+    templateCenter: '模板中心',
+    freeTemplates: '模板列表',
+    accountCenter: '账号中心'
+  },
+  workCard: {
+    description: '描述',
+    createTime: '时间',
+    useNow: '立即使用',
+    preview: '预览',
+    createNewWork: '创建新作品',
+    edit: '编辑'
+  },
+  basicData: {
+    viewData: 'View Data'
+  }
+}
@@ -2,6 +2,7 @@ import Vue from &#39;vue&#39;
 import App from './App.vue'
 import router from './router'
 import store from './store/'
+import i18n from './locales'
 // import './registerServiceWorker'
 // import ElementUI from 'element-ui'
 import Antd from 'ant-design-vue'
@@ -18,5 +19,6 @@ Vue.use(Antd)
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App)
 }).$mount('#app')
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      currentLang: state => state.i18n.lang
+    })
+  },
+  methods: {
+    ...mapActions('i18n', ['SetLang']),
+    setLang (lang) {
+      this.SetLang(lang)
+    }
+  }
+}
@@ -5,6 +5,7 @@ import editor from &#39;./modules/editor&#39;
 import user from './modules/user'
 import visible from './modules/visible'
 import loading from './modules/loading'
+import i18n from './modules/i18n'
 Vue.use(Vuex)
@@ -22,7 +23,8 @@ export default new Vuex.Store({
     editor,
     user,
     visible,
-    loading
+    loading,
+    i18n
   },
   plugins: [undoRedoPlugin]
 })
+import { loadLanguageAsync } from '@/locales'
+
+const i18n = {
+  namespaced: true,
+  state: {
+    lang: 'zh-CN'
+  },
+  mutations: {
+    SET_LANG: (state, lang) => {
+      state.lang = lang
+    }
+  },
+  actions: {
+    // 设置界面语言
+    SetLang ({ commit }, lang) {
+      return new Promise(resolve => {
+        commit('SET_LANG', lang)
+        loadLanguageAsync(lang)
+        resolve()
+      })
+    }
+  }
+}
+
+export default i18n
@@ -10885,6 +10885,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha1-J1b0bLMlgFTF9HI96K5+hzAqHM8=
+vue-i18n@^8.14.1:
+  version "8.14.1"
+  resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.14.1.tgz#0ca0a2742c14e0144481655157fffcc7cc313e50"
+  integrity sha1-DKCidCwU4BREgWVRV//8x8wxPlA=
+
 vue-jest@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npm.taobao.org/vue-jest/download/vue-jest-3.0.4.tgz#b6a2b0d874968f26fa775ac901903fece531e08b"