From 56c79d67744316b2795cb78ce5719d39a624b60d Mon Sep 17 00:00:00 2001
From: aaron <462826@qq.com>
Date: Mon, 7 Dec 2020 13:09:45 +0800
Subject: [PATCH] i18n mechanism and language switch

---
 ui/package.json                         |  5 ++-
 ui/public/index.html                    |  2 +-
 ui/src/App.vue                          | 15 ++++---
 ui/src/components/SelectLang/index.jsx  | 51 +++++++++++++++++++++
 ui/src/components/SelectLang/index.less | 31 +++++++++++++
 ui/src/config/config.js                 |  3 ++
 ui/src/layout/Header.vue                | 10 +++++
 ui/src/locales/index.js                 | 59 +++++++++++++++++++++++++
 ui/src/locales/lang/en-US.js            | 30 +++++++++++++
 ui/src/locales/lang/zh-CN.js            | 30 +++++++++++++
 ui/src/main.js                          |  8 +---
 ui/src/router/index.js                  | 36 ++++++++++-----
 ui/src/store/getters.js                 |  5 +++
 ui/src/store/i18nMixin.js               | 16 +++++++
 ui/src/store/index.js                   | 23 ++++++++++
 ui/src/store/modules/app.js             | 33 ++++++++++++++
 ui/src/store/mutation-types.js          |  1 +
 ui/src/utils/dom.js                     | 21 +++++++++
 18 files changed, 354 insertions(+), 25 deletions(-)
 create mode 100644 ui/src/components/SelectLang/index.jsx
 create mode 100644 ui/src/components/SelectLang/index.less
 create mode 100644 ui/src/config/config.js
 create mode 100644 ui/src/locales/index.js
 create mode 100644 ui/src/locales/lang/en-US.js
 create mode 100644 ui/src/locales/lang/zh-CN.js
 create mode 100644 ui/src/store/getters.js
 create mode 100644 ui/src/store/i18nMixin.js
 create mode 100644 ui/src/store/index.js
 create mode 100644 ui/src/store/modules/app.js
 create mode 100644 ui/src/store/mutation-types.js
 create mode 100644 ui/src/utils/dom.js
diff --git a/ui/package.json b/ui/package.json
index befed7e2..5461c4b7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,9 +14,12 @@
     "less": "^2.x",
     "less-loader": "^3.x",
     "lodash.debounce": "^4.0.8",
+    "moment": "^2.29.1",
+    "store": "^2.0.12",
     "vue": "^2.6.11",
     "vue-i18n": "^8.22.1",
-    "vue-router": "^3.4.8"
+    "vue-router": "^3.4.8",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/ui/public/index.html b/ui/public/index.html
index 41235286..3a787c2b 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title></title>
   </head>
   <body>
     <noscript>
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 4aed0cc4..7b00446d 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -8,11 +8,9 @@
 
 <script>
 
-import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
+import { domTitle, setDocumentTitle } from './utils/dom'
+import { i18nRender } from '@/locales'
 
-moment.locale('zh-cn');
 export default {
   name: 'App',
   components: {
@@ -20,9 +18,16 @@ export default {
 
   data() {
     return {
-      locale: zh_CN,
     };
   },
+  computed: {
+    locale () {
+      // 切换语言时，更新标题
+      const { title } = this.$route.meta
+      title && (setDocumentTitle(`${i18nRender(title)} - ${domTitle}`))
+      return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
+    }
+  }
 }
 </script>
 
diff --git a/ui/src/components/SelectLang/index.jsx b/ui/src/components/SelectLang/index.jsx
new file mode 100644
index 00000000..83fa2e47
--- /dev/null
+++ b/ui/src/components/SelectLang/index.jsx
@@ -0,0 +1,51 @@
+import { i18nRender } from '@/locales'
+import i18nMixin from '../../store/i18nMixin'
+import { Dropdown, Icon, Menu } from 'ant-design-vue'
+import './index.less'
+
+const locales = ['zh-CN', 'en-US']
+const languageLabels = {
+  'zh-CN': '简体中文',
+  'en-US': 'English'
+}
+const languageIcons = {
+  'zh-CN': '🇨🇳',
+  'en-US': '🇺🇸'
+}
+
+const SelectLang = {
+  props: {
+    prefixCls: {
+      type: String,
+    }
+  },
+  name: 'SelectLang',
+  mixins: [i18nMixin],
+  render () {
+    const { prefixCls } = this
+    const changeLang = ({ key }) => {
+      this.setLang(key)
+    }
+    const langMenu = (
+      <Menu class={['menu', 'ant-pro-header-menu']} selectedKeys={[this.currentLang]} onClick={changeLang}>
+        {locales.map(locale => (
+          <Menu.Item key={locale}>
+            <span role="img" aria-label={languageLabels[locale]}>
+              {languageIcons[locale]}
+            </span>{' '}
+            {languageLabels[locale]}
+          </Menu.Item>
+        ))}
+      </Menu>
+    )
+    return (
+      <Dropdown overlay={langMenu} placement="bottomRight">
+        <span class={prefixCls}>
+          <Icon type="global" title={i18nRender('navBar.lang')} />
+        </span>
+      </Dropdown>
+    )
+  }
+}
+
+export default SelectLang
diff --git a/ui/src/components/SelectLang/index.less b/ui/src/components/SelectLang/index.less
new file mode 100644
index 00000000..750c9c7d
--- /dev/null
+++ b/ui/src/components/SelectLang/index.less
@@ -0,0 +1,31 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@header-menu-prefix-cls: ~'@{ant-prefix}-pro-header-menu';
+@header-drop-down-prefix-cls: ~'@{ant-prefix}-pro-drop-down';
+
+.@{header-menu-prefix-cls} {
+
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.@{header-drop-down-prefix-cls} {
+
+  line-height: @layout-header-height;
+  vertical-align: top;
+  cursor: pointer;
+
+  > i {
+    font-size: 16px !important;
+    transform: none !important;
+
+    svg {
+      position: relative;
+      top: -1px;
+    }
+  }
+}
diff --git a/ui/src/config/config.js b/ui/src/config/config.js
new file mode 100644
index 00000000..fbfc4680
--- /dev/null
+++ b/ui/src/config/config.js
@@ -0,0 +1,3 @@
+export default {
+    title: 'ZenData',
+}
diff --git a/ui/src/layout/Header.vue b/ui/src/layout/Header.vue
index 9fad0dcc..d14e5afa 100644
--- a/ui/src/layout/Header.vue
+++ b/ui/src/layout/Header.vue
@@ -6,6 +6,9 @@
     <div class="center"></div>
     <div class="right">
       <span class="dir">工作目录：{{workDir}}</span>
+
+      <select-lang :prefixCls="'select-lang'" />
+
       <a href="https://www.zendata.cn/book/zendata/" target="_blank">帮助</a>
     </div>
   </div>
@@ -15,10 +18,12 @@
 
 import {getWorkDir} from "../api/manage";
 import {config} from "../utils/vari";
+import SelectLang from '../components/SelectLang'
 
 export default {
   name: 'Header',
   components: {
+    SelectLang
   },
   data () {
     return {
@@ -71,5 +76,10 @@ export default {
       padding-right: 20px;
     }
   }
+
+  .select-lang {
+    padding-right: 10px;
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/ui/src/locales/index.js b/ui/src/locales/index.js
new file mode 100644
index 00000000..ce12b05c
--- /dev/null
+++ b/ui/src/locales/index.js
@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import storage from 'store'
+import moment from 'moment'
+
+// default lang
+import enUS from './lang/en-US'
+
+Vue.use(VueI18n)
+
+export const defaultLang = 'en-US'
+
+const messages = {
+  'en-US': {
+    ...enUS
+  }
+}
+
+const i18n = new VueI18n({
+  silentTranslationWarn: true,
+  locale: defaultLang,
+  fallbackLocale: defaultLang,
+  messages
+})
+
+const loadedLanguages = [defaultLang]
+
+function setI18nLanguage (lang) {
+  i18n.locale = lang
+  // request.headers['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync (lang = defaultLang) {
+  return new Promise(resolve => {
+    // 缓存语言设置
+    storage.set('lang', lang)
+    if (i18n.locale !== lang) {
+      if (!loadedLanguages.includes(lang)) {
+        return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msg => {
+          const locale = msg.default
+          i18n.setLocaleMessage(lang, locale)
+          loadedLanguages.push(lang)
+          moment.updateLocale(locale.momentName, locale.momentLocale)
+          return setI18nLanguage(lang)
+        })
+      }
+      return resolve(setI18nLanguage(lang))
+    }
+    return resolve(lang)
+  })
+}
+
+export function i18nRender (key) {
+  return i18n.t(`${key}`)
+}
+
+export default i18n
diff --git a/ui/src/locales/lang/en-US.js b/ui/src/locales/lang/en-US.js
new file mode 100644
index 00000000..75f27b34
--- /dev/null
+++ b/ui/src/locales/lang/en-US.js
@@ -0,0 +1,30 @@
+import antdEnUS from 'ant-design-vue/es/locale-provider/en_US'
+import momentEU from 'moment/locale/eu'
+
+const components = {
+  antLocale: antdEnUS,
+  momentName: 'eu',
+  momentLocale: momentEU
+}
+
+const locale = {
+  'site.title': 'ZenData',
+
+  'menu.data.list': 'Data List',
+  'menu.data.edit': 'Data Edit',
+  'menu.config.list': 'Config List',
+  'menu.config.edit': 'Config Edit',
+  'menu.ranges.list': 'Ranges List',
+  'menu.ranges.edit': 'Ranges Edit',
+  'menu.instances.list': 'Instances List',
+  'menu.instances.edit': 'Instances Edit',
+  'menu.excel.list': 'Excel List',
+  'menu.excel.edit': 'Excel Edit',
+  'menu.text.list': 'Text List',
+  'menu.text.edit': 'Text Edit',
+}
+
+export default {
+  ...components,
+  ...locale
+}
diff --git a/ui/src/locales/lang/zh-CN.js b/ui/src/locales/lang/zh-CN.js
new file mode 100644
index 00000000..b7103c05
--- /dev/null
+++ b/ui/src/locales/lang/zh-CN.js
@@ -0,0 +1,30 @@
+import antd from 'ant-design-vue/es/locale-provider/zh_CN'
+import momentCN from 'moment/locale/zh-cn'
+
+const components = {
+  antLocale: antd,
+  momentName: 'zh-cn',
+  momentLocale: momentCN
+}
+
+const locale = {
+  'site.title': 'ZenData数据生成工具',
+
+  'menu.data.list': '数据列表',
+  'menu.data.edit': '数据编辑',
+  'menu.config.list': '字段列表',
+  'menu.config.edit': '字段编辑',
+  'menu.ranges.list': '序列列表',
+  'menu.ranges.edit': '序列编辑',
+  'menu.instances.list': '实例列表',
+  'menu.instances.edit': '实例编辑',
+  'menu.excel.list': '表格列表',
+  'menu.excel.edit': '表格编辑',
+  'menu.text.list': '文本列表',
+  'menu.text.edit': '文本编辑',
+}
+
+export default {
+  ...components,
+  ...locale
+}
diff --git a/ui/src/main.js b/ui/src/main.js
index 19dd1242..ef383a9a 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-
-// import { Button, message } from 'ant-design-vue';
+import store from './store/'
 
 import VueI18n from 'vue-i18n'
 import ConfigProvider from "ant-design-vue/lib/config-provider";
@@ -61,9 +60,6 @@ import 'ant-design-vue/lib/popover/style';
 import Tooltip from "ant-design-vue/lib/tooltip";
 import 'ant-design-vue/lib/tooltip/style';
 
-// import TreeSelect from "ant-design-vue/lib/tree-select";
-// import 'ant-design-vue/lib/tree-select/style';
-
 import Pagination from "ant-design-vue/lib/pagination";
 import 'ant-design-vue/lib/pagination/style';
 
@@ -104,7 +100,6 @@ Vue.use(Radio)
 Vue.use(Spin)
 Vue.use(Popover)
 Vue.use(Tooltip)
-// Vue.use(TreeSelect)
 Vue.use(Pagination)
 
 const i18n = new VueI18n({
@@ -116,6 +111,7 @@ const i18n = new VueI18n({
 
 new Vue({
   router,
+  store,
   i18n,
   render: h => h(App),
 }).$mount('#app')
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 7a8cc4f9..14896802 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -27,12 +27,14 @@ const routes = [
                             {
                                 path: 'list',
                                 name: 'mine-list',
-                                component: () => import('../views/data/mine/List')
+                                component: () => import('../views/data/mine/List'),
+                                meta: { title: 'menu.data.list' }
                             },
                             {
                                 path: 'edit/:id',
                                 name: 'mine-edit',
-                                component: () => import('../views/data/mine/Edit')
+                                component: () => import('../views/data/mine/Edit'),
+                                meta: { title: 'menu.data.edit' }
                             },
                         ],
                     },
@@ -49,12 +51,14 @@ const routes = [
                                     {
                                         path: 'list',
                                         name: 'ranges-list',
-                                        component: () => import('../views/data/buildin/ranges/List')
+                                        component: () => import('../views/data/buildin/ranges/List'),
+                                        meta: { title: 'menu.ranges.list' }
                                     },
                                     {
                                         path: 'edit/:id',
                                         name: 'ranges-edit',
-                                        component: () => import('../views/data/buildin/ranges/Edit')
+                                        component: () => import('../views/data/buildin/ranges/Edit'),
+                                        meta: { title: 'menu.ranges.edit' }
                                     },
                                 ],
                             },
@@ -66,12 +70,14 @@ const routes = [
                                     {
                                         path: 'list',
                                         name: 'instances-list',
-                                        component: () => import('../views/data/buildin/instances/List')
+                                        component: () => import('../views/data/buildin/instances/List'),
+                                        meta: { title: 'menu.instances.list' }
                                     },
                                     {
                                         path: 'edit/:id',
                                         name: 'instances-edit',
-                                        component: () => import('../views/data/buildin/instances/Edit')
+                                        component: () => import('../views/data/buildin/instances/Edit'),
+                                        meta: { title: 'menu.instances.edit' }
                                     },
                                 ],
                             },
@@ -83,12 +89,14 @@ const routes = [
                                     {
                                         path: 'list',
                                         name: 'excel-list',
-                                        component: () => import('../views/data/buildin/excel/List')
+                                        component: () => import('../views/data/buildin/excel/List'),
+                                        meta: { title: 'menu.excel.list' }
                                     },
                                     {
                                         path: 'edit/:id',
                                         name: 'excel-edit',
-                                        component: () => import('../views/data/buildin/excel/Edit')
+                                        component: () => import('../views/data/buildin/excel/Edit'),
+                                        meta: { title: 'menu.excel.edit' }
                                     },
                                 ],
                             },
@@ -100,12 +108,14 @@ const routes = [
                                     {
                                         path: 'list',
                                         name: 'config-list',
-                                        component: () => import('../views/data/buildin/config/List')
+                                        component: () => import('../views/data/buildin/config/List'),
+                                        meta: { title: 'menu.config.list' }
                                     },
                                     {
                                         path: 'edit/:id',
                                         name: 'config-edit',
-                                        component: () => import('../views/data/buildin/config/Edit')
+                                        component: () => import('../views/data/buildin/config/Edit'),
+                                        meta: { title: 'menu.config.edit' }
                                     },
                                 ],
                             },
@@ -117,12 +127,14 @@ const routes = [
                                     {
                                         path: 'list',
                                         name: 'text-list',
-                                        component: () => import('../views/data/buildin/text/List')
+                                        component: () => import('../views/data/buildin/text/List'),
+                                        meta: { title: 'menu.text.list' }
                                     },
                                     {
                                         path: 'edit/:id',
                                         name: 'text-edit',
-                                        component: () => import('../views/data/buildin/text/Edit')
+                                        component: () => import('../views/data/buildin/text/Edit'),
+                                        meta: { title: 'menu.text.edit' }
                                     },
                                 ],
                             },
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
new file mode 100644
index 00000000..bdaab6b9
--- /dev/null
+++ b/ui/src/store/getters.js
@@ -0,0 +1,5 @@
+const getters = {
+  lang: state => state.app.lang,
+}
+
+export default getters
diff --git a/ui/src/store/i18nMixin.js b/ui/src/store/i18nMixin.js
new file mode 100644
index 00000000..715b0c8b
--- /dev/null
+++ b/ui/src/store/i18nMixin.js
@@ -0,0 +1,16 @@
+import { mapState } from 'vuex'
+
+const i18nMixin = {
+  computed: {
+    ...mapState({
+      currentLang: state => state.app.lang
+    })
+  },
+  methods: {
+    setLang (lang) {
+      this.$store.dispatch('setLang', lang)
+    }
+  }
+}
+
+export default i18nMixin
diff --git a/ui/src/store/index.js b/ui/src/store/index.js
new file mode 100644
index 00000000..171bad7e
--- /dev/null
+++ b/ui/src/store/index.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import app from './modules/app'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    app,
+  },
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+  getters
+})
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
new file mode 100644
index 00000000..de4bb355
--- /dev/null
+++ b/ui/src/store/modules/app.js
@@ -0,0 +1,33 @@
+import { loadLanguageAsync } from '@/locales'
+import storage from 'store'
+import { APP_LANGUAGE } from '@/store/mutation-types'
+
+const app = {
+  state: {
+    lang: 'zh-CN',
+    _antLocale: {}
+  },
+  mutations: {
+    [APP_LANGUAGE]: (state, lang, antd = {}) => {
+      state.lang = lang
+      state._antLocale = antd
+      storage.set(APP_LANGUAGE, lang)
+    },
+  },
+  actions: {
+    setLang ({ commit }, lang) {
+      return new Promise((resolve, reject) => {
+        commit(APP_LANGUAGE, lang)
+        loadLanguageAsync(lang)
+          .then(() => {
+            resolve()
+          })
+          .catch(e => {
+            reject(e)
+          })
+      })
+    }
+  }
+}
+
+export default app
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
new file mode 100644
index 00000000..8e3a2236
--- /dev/null
+++ b/ui/src/store/mutation-types.js
@@ -0,0 +1 @@
+export const APP_LANGUAGE = 'app_language'
diff --git a/ui/src/utils/dom.js b/ui/src/utils/dom.js
new file mode 100644
index 00000000..65676ad9
--- /dev/null
+++ b/ui/src/utils/dom.js
@@ -0,0 +1,21 @@
+import config from '../config/config'
+
+export const setDocumentTitle = function (title) {
+  document.title = title
+  const ua = navigator.userAgent
+  // eslint-disable-next-line
+  const regex = /\bMicroMessenger\/([\d\.]+)/
+  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
+    const i = document.createElement('iframe')
+    i.src = '/favicon.ico'
+    i.style.display = 'none'
+    i.onload = function () {
+      setTimeout(function () {
+        i.remove()
+      }, 9)
+    }
+    document.body.appendChild(i)
+  }
+}
+
+export const domTitle = config.title
-- 
GitLab

