fix(i18n): Account Settings page lang support

Author: sendya

src/config/router.config.js

@@ -4,11 +4,10 @@ import { bxAnaalyse } from '@/core/icons'
 
 const RouteView = {
   name: 'RouteView',
-  render: (h) => h('router-view')
+  render: h => h('router-view')
 }
 
 export const asyncRouterMap = [
-
   {
     path: '/',
     name: 'index',
@@ -22,13 +21,13 @@ export const asyncRouterMap = [
         name: 'dashboard',
         redirect: '/dashboard/workplace',
         component: RouteView,
-        meta: { title: 'menu.dashboard', 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: 'menu.dashboard.analysis', keepAlive: false, permission: [ 'dashboard' ] }
+            meta: { title: 'menu.dashboard.analysis', keepAlive: false, permission: ['dashboard'] }
           },
           // 外部链接
           {
@@ -40,7 +39,7 @@ export const asyncRouterMap = [
             path: '/dashboard/workplace',
             name: 'Workplace',
             component: () => import('@/views/dashboard/Workplace'),
-            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: [ 'dashboard' ] }
+            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: ['dashboard'] }
           }
         ]
       },
@@ -49,25 +48,25 @@ export const asyncRouterMap = [
         path: '/form',
         redirect: '/form/base-form',
         component: RouteView,
-        meta: { title: 'menu.form', icon: 'form', permission: [ 'form' ] },
+        meta: { title: 'menu.form', icon: 'form', permission: ['form'] },
         children: [
           {
             path: '/form/base-form',
             name: 'BaseForm',
             component: () => import('@/views/form/basicForm'),
-            meta: { title: 'menu.form.basic-form', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: 'menu.form.basic-form', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/step-form',
             name: 'StepForm',
             component: () => import('@/views/form/stepForm/StepForm'),
-            meta: { title: 'menu.form.step-form', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: 'menu.form.step-form', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/advanced-form',
             name: 'AdvanceForm',
             component: () => import('@/views/form/advancedForm/AdvancedForm'),
-            meta: { title: 'menu.form.advanced-form', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: 'menu.form.advanced-form', keepAlive: true, permission: ['form'] }
           }
         ]
       },
@@ -77,51 +76,51 @@ export const asyncRouterMap = [
         name: 'list',
         component: RouteView,
         redirect: '/list/table-list',
-        meta: { title: 'menu.list', icon: 'table', permission: [ 'table' ] },
+        meta: { title: 'menu.list', icon: 'table', permission: ['table'] },
         children: [
           {
             path: '/list/table-list/:pageNo([1-9]\\d*)?',
             name: 'TableListWrapper',
             hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
             component: () => import('@/views/list/TableList'),
-            meta: { title: 'menu.list.table-list', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: 'menu.list.table-list', keepAlive: true, permission: ['table'] }
           },
           {
             path: '/list/basic-list',
             name: 'BasicList',
             component: () => import('@/views/list/BasicList'),
-            meta: { title: 'menu.list.basic-list', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: 'menu.list.basic-list', keepAlive: true, permission: ['table'] }
           },
           {
             path: '/list/card',
             name: 'CardList',
             component: () => import('@/views/list/CardList'),
-            meta: { title: 'menu.list.card-list', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: 'menu.list.card-list', keepAlive: true, permission: ['table'] }
           },
           {
             path: '/list/search',
             name: 'SearchList',
             component: () => import('@/views/list/search/SearchLayout'),
             redirect: '/list/search/article',
-            meta: { title: 'menu.list.search-list', keepAlive: true, permission: [ 'table' ] },
+            meta: { title: 'menu.list.search-list', keepAlive: true, permission: ['table'] },
             children: [
               {
                 path: '/list/search/article',
                 name: 'SearchArticles',
                 component: () => import('../views/list/search/Article'),
-                meta: { title: 'menu.list.search-list.articles', permission: [ 'table' ] }
+                meta: { title: 'menu.list.search-list.articles', permission: ['table'] }
               },
               {
                 path: '/list/search/project',
                 name: 'SearchProjects',
                 component: () => import('../views/list/search/Projects'),
-                meta: { title: 'menu.list.search-list.projects', permission: [ 'table' ] }
+                meta: { title: 'menu.list.search-list.projects', permission: ['table'] }
               },
               {
                 path: '/list/search/application',
                 name: 'SearchApplications',
                 component: () => import('../views/list/search/Applications'),
-                meta: { title: 'menu.list.search-list.applications', permission: [ 'table' ] }
+                meta: { title: 'menu.list.search-list.applications', permission: ['table'] }
               }
             ]
           }
@@ -134,19 +133,19 @@ export const asyncRouterMap = [
         name: 'profile',
         component: RouteView,
         redirect: '/profile/basic',
-        meta: { title: 'menu.profile', icon: 'profile', permission: [ 'profile' ] },
+        meta: { title: 'menu.profile', icon: 'profile', permission: ['profile'] },
         children: [
           {
             path: '/profile/basic',
             name: 'ProfileBasic',
             component: () => import('@/views/profile/basic'),
-            meta: { title: 'menu.profile.basic', permission: [ 'profile' ] }
+            meta: { title: 'menu.profile.basic', permission: ['profile'] }
           },
           {
             path: '/profile/advanced',
             name: 'ProfileAdvanced',
             component: () => import('@/views/profile/advanced/Advanced'),
-            meta: { title: 'menu.profile.advanced', permission: [ 'profile' ] }
+            meta: { title: 'menu.profile.advanced', permission: ['profile'] }
           }
         ]
       },
@@ -157,19 +156,19 @@ export const asyncRouterMap = [
         name: 'result',
         component: RouteView,
         redirect: '/result/success',
-        meta: { title: 'menu.result', icon: 'check-circle-o', permission: [ 'result' ] },
+        meta: { title: 'menu.result', icon: 'check-circle-o', permission: ['result'] },
         children: [
           {
             path: '/result/success',
             name: 'ResultSuccess',
             component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
-            meta: { title: 'menu.result.success', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+            meta: { title: 'menu.result.success', keepAlive: false, hiddenHeaderContent: true, permission: ['result'] }
           },
           {
             path: '/result/fail',
             name: 'ResultFail',
             component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
-            meta: { title: 'menu.result.fail', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+            meta: { title: 'menu.result.fail', keepAlive: false, hiddenHeaderContent: true, permission: ['result'] }
           }
         ]
       },
@@ -180,25 +179,25 @@ export const asyncRouterMap = [
         name: 'exception',
         component: RouteView,
         redirect: '/exception/403',
-        meta: { title: 'menu.exception', icon: 'warning', permission: [ 'exception' ] },
+        meta: { title: 'menu.exception', icon: 'warning', permission: ['exception'] },
         children: [
           {
-             path: '/exception/403',
+            path: '/exception/403',
             name: 'Exception403',
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
-            meta: { title: 'menu.exception.not-permission', permission: [ 'exception' ] }
+            meta: { title: 'menu.exception.not-permission', permission: ['exception'] }
           },
           {
             path: '/exception/404',
             name: 'Exception404',
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
-            meta: { title: 'menu.exception.not-find', permission: [ 'exception' ] }
+            meta: { title: 'menu.exception.not-find', permission: ['exception'] }
           },
           {
             path: '/exception/500',
             name: 'Exception500',
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
-            meta: { title: 'menu.exception.server-error', permission: [ 'exception' ] }
+            meta: { title: 'menu.exception.server-error', permission: ['exception'] }
           }
         ]
       },
@@ -209,51 +208,61 @@ export const asyncRouterMap = [
         component: RouteView,
         redirect: '/account/center',
         name: 'account',
-        meta: { title: 'menu.account', icon: 'user', keepAlive: true, permission: [ 'user' ] },
+        meta: { title: 'menu.account', icon: 'user', keepAlive: true, permission: ['user'] },
         children: [
-           {
+          {
             path: '/account/center',
             name: 'center',
             component: () => import('@/views/account/center'),
-            meta: { title: 'menu.account.center', keepAlive: true, permission: [ 'user' ] }
+            meta: { title: 'menu.account.center', keepAlive: true, permission: ['user'] }
           },
           {
             path: '/account/settings',
             name: 'settings',
             component: () => import('@/views/account/settings/Index'),
-            meta: { title: 'menu.account.settings', hideHeader: true, permission: [ 'user' ] },
+            meta: { title: 'menu.account.settings', hideHeader: true, permission: ['user'] },
             redirect: '/account/settings/basic',
             hideChildrenInMenu: true,
             children: [
               {
                 path: '/account/settings/basic',
                 name: 'BasicSettings',
                 component: () => import('@/views/account/settings/BasicSetting'),
-                meta: { title: 'account.settings.menuMap.basic', hidden: true, permission: [ 'user' ] }
+                meta: { title: 'account.settings.menuMap.basic', hidden: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/security',
                 name: 'SecuritySettings',
                 component: () => import('@/views/account/settings/Security'),
-                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: {
+                  title: 'account.settings.menuMap.security',
+                  hidden: true,
+                  keepAlive: true,
+                  permission: ['user']
+                }
               },
               {
                 path: '/account/settings/custom',
                 name: 'CustomSettings',
                 component: () => import('@/views/account/settings/Custom'),
-                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: { title: 'account.settings.menuMap.custom', hidden: true, keepAlive: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/binding',
                 name: 'BindingSettings',
                 component: () => import('@/views/account/settings/Binding'),
-                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: { title: 'account.settings.menuMap.binding', hidden: true, keepAlive: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/notification',
                 name: 'NotificationSettings',
                 component: () => import('@/views/account/settings/Notification'),
-                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: {
+                  title: 'account.settings.menuMap.notification',
+                  hidden: true,
+                  keepAlive: true,
+                  permission: ['user']
+                }
               }
             ]
           }
@@ -325,7 +334,9 @@ export const asyncRouterMap = [
     ]
   },
   {
-    path: '*', redirect: '/404', hidden: true
+    path: '*',
+    redirect: '/404',
+    hidden: true
   }
 ]
 
@@ -367,5 +378,4 @@ export const constantRouterMap = [
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   }
-
 ]

src/locales/lang/en-US.js

@@ -1,5 +1,7 @@
 import antdEnUS from 'ant-design-vue/es/locale-provider/en_US'
 import momentEU from 'moment/locale/eu'
+import global from './en-US/global'
+
 import menu from './en-US/menu'
 import setting from './en-US/setting'
 import dashboard from './en-US/dashboard'
@@ -14,12 +16,13 @@ const components = {
 }
 
 export default {
-  'message': '-',
+  message: '-',
 
   'layouts.usermenu.dialog.title': 'Message',
   'layouts.usermenu.dialog.content': 'Are you sure you would like to logout?',
 
   ...components,
+  ...global,
   ...menu,
   ...setting,
   ...dashboard,

src/locales/lang/en-US/global.js

@@ -0,0 +1,6 @@
+export default {
+  submit: 'Submit',
+  save: 'Save',
+  'submit.ok': 'Submit successfully',
+  'save.ok': 'Saved successfully'
+}

src/locales/lang/zh-CN.js

@@ -1,5 +1,7 @@
 import antd from 'ant-design-vue/es/locale-provider/zh_CN'
 import momentCN from 'moment/locale/zh-cn'
+import global from './zh-CN/global'
+
 import menu from './zh-CN/menu'
 import dashboard from './zh-CN/dashboard'
 import form from './zh-CN/form'
@@ -13,12 +15,13 @@ const components = {
 }
 
 export default {
-  'message': '-',
+  message: '-',
 
   'layouts.usermenu.dialog.title': '信息',
   'layouts.usermenu.dialog.content': '您确定要注销吗？',
 
   ...components,
+  ...global,
   ...menu,
   ...dashboard,
   ...form,

src/locales/lang/zh-CN/global.js

@@ -0,0 +1,6 @@
+export default {
+  submit: '提交',
+  save: '保存',
+  'submit.ok': '提交成功',
+  'save.ok': '保存成功'
+}

src/views/account/settings/BasicSetting.vue

@@ -19,34 +19,11 @@
             :label="$t('account.settings.basic.email')"
             :required="false"
           >
-            <a-input placeholder="exp@admin.com"/>
-          </a-form-item>
-          <a-form-item
-            label="加密方式"
-            :required="false"
-          >
-            <a-select defaultValue="aes-256-cfb">
-              <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
-              <a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
-              <a-select-option value="chacha20">chacha20</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item
-            label="连接密码"
-            :required="false"
-          >
-            <a-input placeholder="h3gSbecd"/>
-          </a-form-item>
-          <a-form-item
-            label="登录密码"
-            :required="false"
-          >
-            <a-input placeholder="密码"/>
+            <a-input placeholder="example@ant.design"/>
           </a-form-item>
 
           <a-form-item>
-            <a-button type="primary">提交</a-button>
-            <a-button style="margin-left: 8px">保存</a-button>
+            <a-button type="primary">{{ $t('account.settings.basic.update') }}</a-button>
           </a-form-item>
         </a-form>
 

src/views/account/settings/Index.vue

@@ -39,7 +39,7 @@
         </div>
         <div class="account-settings-info-right">
           <div class="account-settings-info-title">
-            <span>{{ $route.meta.title }}</span>
+            <span>{{ $t($route.meta.title) }}</span>
           </div>
           <route-view></route-view>
         </div>