@@ -37,14 +37,10 @@ export default {
}
},
created() {
- let i18n = this.routesI18n
- Object.keys(i18n).forEach(key => {
- this.$i18n.mergeLocaleMessage(key, i18n[key])
- })
this.page = this.$route.meta.page
},
computed: {
- ...mapState('setting', ['layout', 'routesI18n']),
+ ...mapState('setting', ['layout']),
pageTitle() {
let pageTitle = this.page && this.page.title
return this.title || this.$t(pageTitle) || this.routeName
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
index eee6881..725f86a 100644
--- a/src/layouts/PageView.vue
+++ b/src/layouts/PageView.vue
@@ -26,7 +26,7 @@ export default {
}
},
computed: {
- ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n', 'dustbins']),
+ ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'dustbins']),
desc() {
return this.page.desc
},
diff --git a/src/layouts/header/AdminHeader.vue b/src/layouts/header/AdminHeader.vue
index 8b9cd40..03e17b1 100644
--- a/src/layouts/header/AdminHeader.vue
+++ b/src/layouts/header/AdminHeader.vue
@@ -8,7 +8,7 @@
@@ -43,7 +43,6 @@ export default {
name: 'AdminHeader',
components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
props: ['collapsed', 'menuData'],
- inject: ['menuI18n'],
data() {
return {
langList: [
@@ -73,7 +72,7 @@ export default {
onSelect (obj) {
this.$emit('menuSelect', obj)
},
- ...mapMutations('setting', ['setLang', 'setRoutesI18n'])
+ ...mapMutations('setting', ['setLang'])
}
}
diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue
index 8fee523..209e641 100644
--- a/src/layouts/tabs/TabsView.vue
+++ b/src/layouts/tabs/TabsView.vue
@@ -44,7 +44,7 @@ export default {
}
},
computed: {
- ...mapState('setting', ['multiPage', 'animate', 'layout', 'dustbins', 'routesI18n']),
+ ...mapState('setting', ['multiPage', 'animate', 'layout', 'dustbins']),
menuItemList() {
return [
{ key: '1', icon: 'vertical-right', text: this.$t('closeLeft') },
@@ -57,10 +57,6 @@ export default {
const route = this.$route
this.pageList.push(route)
this.activePage = route.fullPath
- let i18n = this.routesI18n
- Object.keys(i18n).forEach(key => {
- this.$i18n.mergeLocaleMessage(key, i18n[key])
- })
},
watch: {
'$route': function (newRoute) {
diff --git a/src/main.js b/src/main.js
index 1235c30..3e73cc0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,22 +7,15 @@ import Viser from 'viser-vue'
import '@/mock'
import store from './store'
import 'animate.css/source/animate.css'
-import VueI18n from 'vue-i18n'
import Plugins from '@/plugins'
+import {initI18n} from '@/utils/i18n'
Vue.config.productionTip = false
Vue.use(Viser)
Vue.use(Antd)
-Vue.use(VueI18n)
Vue.use(Plugins)
-
-
-const i18n = new VueI18n({
- locale: 'CN',
- fallbackLocale: 'US',
- silentFallbackWarn: true
-})
+const i18n = initI18n(router, 'CN', 'US')
new Vue({
router,
diff --git a/src/mock/extend/index.js b/src/mock/extend/index.js
index cdeb9ab..b3741a6 100644
--- a/src/mock/extend/index.js
+++ b/src/mock/extend/index.js
@@ -16,11 +16,15 @@ const timeList = [
CN: '中午好',
HK: '中午好',
US: 'Good afternoon',
+ },{
+ CN: '下午好',
+ HK: '下午好',
+ US: 'Good afternoon',
},{
CN: '晚上好',
HK: '晚上好',
US: 'Good evening',
- },
+ }
]
const welcomeMessages = [
@@ -56,7 +60,8 @@ Random.extend({
timeFix () {
const time = new Date()
const hour = time.getHours()
- return hour < 9 ? timeList[0] : (hour <= 11 ? timeList[1] : (hour <= 13 ? timeList[2] : (hour <= 20 ? timeList[3] : timeList[4])))
+ return hour < 9
+ ? timeList[0] : (hour <= 11 ? timeList[1] : (hour <= 13 ? timeList[2] : (hour <= 20 ? timeList[3] : timeList[4])))
},
avatar () {
return this.pick(avatars)
diff --git a/src/router/i18n.js b/src/router/i18n.js
index fab8771..905fc4d 100644
--- a/src/router/i18n.js
+++ b/src/router/i18n.js
@@ -1,55 +1,57 @@
-export default {
- CN: {
- home: {name: '首页'},
- },
- US: {
- home: {name: 'home'},
- },
- HK: {
- home: {name: '首頁'},
- dashboard: {
- name: 'Dashboard',
- workplace: {name: '工作台'},
- analysis: {name: '分析頁'}
+module.exports = {
+ messages: {
+ CN: {
+ home: {name: '首页'},
},
- form: {
- name: '表單頁',
- basic: {name: '基礎表單'},
- step: {name: '分步表單'},
- advance: {name: '分步表單'}
+ US: {
+ home: {name: 'home'},
},
- list: {
- name: '列表頁',
- query: {name: '查詢表格'},
- primary: {name: '標準列表'},
- card: {name: '卡片列表'},
- search: {
- name: '搜索列表',
- article: {name: '文章'},
- application: {name: '應用'},
- project: {name: '項目'}
+ HK: {
+ home: {name: '首頁'},
+ dashboard: {
+ name: 'Dashboard',
+ workplace: {name: '工作台'},
+ analysis: {name: '分析頁'}
+ },
+ form: {
+ name: '表單頁',
+ basic: {name: '基礎表單'},
+ step: {name: '分步表單'},
+ advance: {name: '分步表單'}
+ },
+ list: {
+ name: '列表頁',
+ query: {name: '查詢表格'},
+ primary: {name: '標準列表'},
+ card: {name: '卡片列表'},
+ search: {
+ name: '搜索列表',
+ article: {name: '文章'},
+ application: {name: '應用'},
+ project: {name: '項目'}
+ }
+ },
+ details: {
+ name: '詳情頁',
+ basic: {name: '基礎詳情頁'},
+ advance: {name: '高級詳情頁'}
+ },
+ result: {
+ name: '結果頁',
+ success: {name: '成功'},
+ error: {name: '失敗'}
+ },
+ exception: {
+ name: '異常頁',
+ 404: {name: '404'},
+ 403: {name: '403'},
+ 500: {name: '500'}
+ },
+ components: {
+ name: '小組件',
+ taskCard: {name: '任務卡片'},
+ palette: {name: '顏色複選框'}
}
- },
- details: {
- name: '詳情頁',
- basic: {name: '基礎詳情頁'},
- advance: {name: '高級詳情頁'}
- },
- result: {
- name: '結果頁',
- success: {name: '成功'},
- error: {name: '失敗'}
- },
- exception: {
- name: '異常頁',
- 404: {name: '404'},
- 403: {name: '403'},
- 500: {name: '500'}
- },
- components: {
- name: '小組件',
- taskCard: {name: '任務卡片'},
- palette: {name: '顏色複選框'}
}
}
}
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index 332a9dd..ca9e826 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -6,7 +6,6 @@ export default {
isMobile: false,
animates: ADMIN.animates,
palettes: ADMIN.palettes,
- routesI18n: {},
dustbins: [],
...config,
},
@@ -38,9 +37,6 @@ export default {
setLang(state, lang) {
state.lang = lang
},
- setRoutesI18n(state, i18n) {
- state.routesI18n = i18n
- },
setHideSetting(state, hideSetting) {
state.hideSetting = hideSetting
},
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
new file mode 100644
index 0000000..3f9d5a5
--- /dev/null
+++ b/src/utils/i18n.js
@@ -0,0 +1,67 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import routesI18n from '@/router/i18n'
+import './Objects'
+
+/**
+ * 创建 i18n 配置
+ * @param router 路由
+ * @param locale 本地化语言
+ * @param fallback 回退语言
+ * @returns {VueI18n}
+ */
+function initI18n(router, locale, fallback) {
+ Vue.use(VueI18n)
+ const options = router.options.routes.find(item => item.path === '/').children
+ formatOptions(options, '')
+ const CN = generateI18n(new Object(), options, 'name')
+ const US = generateI18n(new Object(), options, 'path')
+ const i18n = new VueI18n({
+ locale,
+ fallbackLocale: fallback,
+ silentFallbackWarn: true,
+ messages: {CN, US}
+ })
+ const messages = routesI18n.messages
+ Object.keys(messages).forEach(key => {
+ i18n.mergeLocaleMessage(key, messages[key])
+ })
+ return i18n
+}
+
+/**
+ * 根据 router options 配置生成 国际化语言
+ * @param lang
+ * @param options
+ * @param valueKey
+ * @returns {*}
+ */
+function generateI18n(lang, options, valueKey) {
+ options.forEach(menu => {
+ let keys = menu.fullPath.substring(1).split('/').concat('name')
+ lang.assignProps(keys, menu[valueKey])
+ if (menu.children) {
+ generateI18n(lang, menu.children, valueKey)
+ }
+ })
+ return lang
+}
+
+/**
+ * 格式化 router options，生成 fullPath
+ * @param options
+ * @param parentPath
+ */
+function formatOptions(options, parentPath) {
+ options.forEach(route => {
+ let isFullPath = route.path.substring(0, 1) === '/'
+ route.fullPath = isFullPath ? route.path : parentPath + '/' + route.path
+ if (route.children) {
+ formatOptions(route.children, route.fullPath)
+ }
+ })
+}
+
+export {
+ initI18n
+}
\ No newline at end of file