fix: locale

Author: sendya

package.json

@@ -12,7 +12,7 @@
     "postinstall": "opencollective-postinstall"
   },
   "dependencies": {
-    "@ant-design-vue/pro-layout": "^0.2.3",
+    "@ant-design-vue/pro-layout": "^0.2.5",
     "@antv/data-set": "^0.10.2",
     "ant-design-vue": "1.5.3",
     "axios": "^0.19.0",

src/App.vue

@@ -7,16 +7,23 @@
 </template>
 
 <script>
-import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
-
 export default {
   data () {
     return {
-      locale: zhCN
+    }
+  },
+  computed: {
+    locale () {
+      return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
     }
   },
   mounted () {
-
+    this.test()
+  },
+  methods: {
+    test () {
+      console.log('this', this)
+    }
   }
 }
 </script>

src/config/router.config.js

@@ -13,7 +13,7 @@ export const asyncRouterMap = [
     path: '/',
     name: 'index',
     component: BasicLayout,
-    meta: { title: '首页' },
+    meta: { title: 'menu.home' },
     redirect: '/dashboard/workplace',
     children: [
       // dashboard
@@ -22,25 +22,25 @@ export const asyncRouterMap = [
         name: 'dashboard',
         redirect: '/dashboard/workplace',
         component: RouteView,
-        meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
+        meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
         children: [
           {
             path: '/dashboard/analysis/:pageNo([1-9]\\d*)?',
             name: 'Analysis',
             component: () => import('@/views/dashboard/Analysis'),
-            meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
+            meta: { title: 'menu.dashboard.analysis', keepAlive: false, permission: [ 'dashboard' ] }
           },
           // 外部链接
           {
             path: 'https://www.baidu.com/',
             name: 'Monitor',
-            meta: { title: '监控页（外部）', target: '_blank' }
+            meta: { title: 'menu.dashboard.monitor', target: '_blank' }
           },
           {
             path: '/dashboard/workplace',
             name: 'Workplace',
             component: () => import('@/views/dashboard/Workplace'),
-            meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
+            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: [ 'dashboard' ] }
           }
         ]
       },

src/layouts/BasicLayout.vue

@@ -27,7 +27,6 @@
 <script>
 import { i18nRender } from '@/locales'
 import { mapState } from 'vuex'
-import ProLayout from '@ant-design-vue/pro-layout'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import GlobalFooter from '@/components/GlobalFooter'
 
@@ -37,7 +36,6 @@ import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
 export default {
   name: 'BasicLayout',
   components: {
-    ProLayout,
     RightContent,
     GlobalFooter,
     LogoSvg

src/locales/lang/en-US.js

@@ -8,7 +8,12 @@ const components = {
 }
 
 const locale = {
-  'message': '-'
+  'message': '-',
+  'menu.home': 'Home',
+  'menu.dashboard': 'Dashboard',
+  'menu.dashboard.analysis': 'Analysis',
+  'menu.dashboard.monitor': 'Monitor',
+  'menu.dashboard.workplace': 'Workplace'
 }
 
 export default {

src/locales/lang/zh-CN.js

@@ -0,0 +1,22 @@
+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 = {
+  'message': '-',
+  'menu.home': '主页',
+  'menu.dashboard': '仪表盘',
+  'menu.dashboard.analysis': '分析页',
+  'menu.dashboard.monitor': '监控页',
+  'menu.dashboard.workplace': '工作台'
+}
+
+export default {
+  ...components,
+  ...locale
+}

src/main.js

@@ -6,8 +6,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store/'
+import i18n from './locales'
 import { VueAxios } from './utils/request'
-import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
+import ProLayout, { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
 
 // mock
 // WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
@@ -23,11 +24,13 @@ Vue.config.productionTip = false
 
 // mount axios to `Vue.$http` and `this.$http`
 Vue.use(VueAxios)
+Vue.component('pro-layout', ProLayout)
 Vue.component('page-header-wrapper', PageHeaderWrapper)
 
 new Vue({
   router,
   store,
+  i18n,
   created: bootstrap,
   render: h => h(App)
 }).$mount('#app')

src/store/getters.js

@@ -1,6 +1,6 @@
 const getters = {
   isMobile: state => state.app.isMobile,
-  lang: state => state.i18n.lang,
+  lang: state => state.app.lang,
   theme: state => state.app.theme,
   color: state => state.app.color,
   token: state => state.user.token,

src/views/result/Error.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" style="margin: -24px -24px 0px;">
+  <a-card :bordered="false">
     <a-result status="error" :title="title" :sub-title="description">
       <template #extra>
         <a-button type="primary" >返回修改</a-button>

src/views/result/Success.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" style="margin: -24px -24px 0px;">
+  <a-card :bordered="false">
     <a-result status="success" :sub-title="description" :title="title">
       <template #extra>
         <a-button type="primary">返回列表</a-button>