refactor 'views-account-settings' from hardcoded to locale support

src/locales/lang/en-US.js

@@ -5,6 +5,7 @@ import setting from './en-US/setting'
 import dashboard from './en-US/dashboard'
 import form from './en-US/form'
 import result from './en-US/result'
+import account from './en-US/account'
 
 const components = {
   antLocale: antdEnUS,
@@ -23,5 +24,6 @@ export default {
   ...setting,
   ...dashboard,
   ...form,
-  ...result
+  ...result,
+  ...account
 }

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

@@ -0,0 +1,5 @@
+import settings from './account/settings'
+
+export default {
+    ...settings
+  }

src/locales/lang/en-US/account/settings.js

@@ -0,0 +1,62 @@
+export default {
+  'account.settings.menuMap.basic': 'Basic Settings',
+  'account.settings.menuMap.security': 'Security Settings',
+  'account.settings.menuMap.custom': 'Custom Settings',
+  'account.settings.menuMap.binding': 'Account Binding',
+  'account.settings.menuMap.notification': 'New Message Notification',
+  'account.settings.basic.avatar': 'Avatar',
+  'account.settings.basic.change-avatar': 'Change avatar',
+  'account.settings.basic.email': 'Email',
+  'account.settings.basic.email-message': 'Please input your email!',
+  'account.settings.basic.nickname': 'Nickname',
+  'account.settings.basic.nickname-message': 'Please input your Nickname!',
+  'account.settings.basic.profile': 'Personal profile',
+  'account.settings.basic.profile-message': 'Please input your personal profile!',
+  'account.settings.basic.profile-placeholder': 'Brief introduction to yourself',
+  'account.settings.basic.country': 'Country/Region',
+  'account.settings.basic.country-message': 'Please input your country!',
+  'account.settings.basic.geographic': 'Province or city',
+  'account.settings.basic.geographic-message': 'Please input your geographic info!',
+  'account.settings.basic.address': 'Street Address',
+  'account.settings.basic.address-message': 'Please input your address!',
+  'account.settings.basic.phone': 'Phone Number',
+  'account.settings.basic.phone-message': 'Please input your phone!',
+  'account.settings.basic.update': 'Update Information',
+  'account.settings.basic.update.success': 'Update basic information successfully',
+  'account.settings.security.strong': 'Strong',
+  'account.settings.security.medium': 'Medium',
+  'account.settings.security.weak': 'Weak',
+  'account.settings.security.password': 'Account Password',
+  'account.settings.security.password-description': 'Current password strength：',
+  'account.settings.security.phone': 'Security Phone',
+  'account.settings.security.phone-description': 'Bound phone：',
+  'account.settings.security.question': 'Security Question',
+  'account.settings.security.question-description':
+    'The security question is not set, and the security policy can effectively protect the account security',
+  'account.settings.security.email': 'Backup Email',
+  'account.settings.security.email-description': 'Bound Email：',
+  'account.settings.security.mfa': 'MFA Device',
+  'account.settings.security.mfa-description':
+    'Unbound MFA device, after binding, can be confirmed twice',
+  'account.settings.security.modify': 'Modify',
+  'account.settings.security.set': 'Set',
+  'account.settings.security.bind': 'Bind',
+  'account.settings.binding.taobao': 'Binding Taobao',
+  'account.settings.binding.taobao-description': 'Currently unbound Taobao account',
+  'account.settings.binding.alipay': 'Binding Alipay',
+  'account.settings.binding.alipay-description': 'Currently unbound Alipay account',
+  'account.settings.binding.dingding': 'Binding DingTalk',
+  'account.settings.binding.dingding-description': 'Currently unbound DingTalk account',
+  'account.settings.binding.bind': 'Bind',
+  'account.settings.notification.password': 'Account Password',
+  'account.settings.notification.password-description':
+    'Messages from other users will be notified in the form of a station letter',
+  'account.settings.notification.messages': 'System Messages',
+  'account.settings.notification.messages-description':
+    'System messages will be notified in the form of a station letter',
+  'account.settings.notification.todo': 'To-do Notification',
+  'account.settings.notification.todo-description':
+    'The to-do list will be notified in the form of a letter from the station',
+  'account.settings.settings.open': 'Open',
+  'account.settings.settings.close': 'Close'
+}

src/locales/lang/zh-CN.js

@@ -4,6 +4,7 @@ import menu from './zh-CN/menu'
 import dashboard from './zh-CN/dashboard'
 import form from './zh-CN/form'
 import result from './zh-CN/result'
+import account from './zh-CN/account'
 
 const components = {
   antLocale: antd,
@@ -21,5 +22,6 @@ export default {
   ...menu,
   ...dashboard,
   ...form,
-  ...result
+  ...result,
+  ...account
 }

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

@@ -0,0 +1,5 @@
+import settings from './account/settings'
+
+export default {
+    ...settings
+  }

src/locales/lang/zh-CN/account/settings.js

@@ -0,0 +1,57 @@
+export default {
+  'account.settings.menuMap.basic': '基本设置',
+  'account.settings.menuMap.security': '安全设置',
+  'account.settings.menuMap.custom': '个性化',
+  'account.settings.menuMap.binding': '账号绑定',
+  'account.settings.menuMap.notification': '新消息通知',
+  'account.settings.basic.avatar': '头像',
+  'account.settings.basic.change-avatar': '更换头像',
+  'account.settings.basic.email': '邮箱',
+  'account.settings.basic.email-message': '请输入您的邮箱!',
+  'account.settings.basic.nickname': '昵称',
+  'account.settings.basic.nickname-message': '请输入您的昵称!',
+  'account.settings.basic.profile': '个人简介',
+  'account.settings.basic.profile-message': '请输入个人简介!',
+  'account.settings.basic.profile-placeholder': '个人简介',
+  'account.settings.basic.country': '国家/地区',
+  'account.settings.basic.country-message': '请输入您的国家或地区!',
+  'account.settings.basic.geographic': '所在省市',
+  'account.settings.basic.geographic-message': '请输入您的所在省市!',
+  'account.settings.basic.address': '街道地址',
+  'account.settings.basic.address-message': '请输入您的街道地址!',
+  'account.settings.basic.phone': '联系电话',
+  'account.settings.basic.phone-message': '请输入您的联系电话!',
+  'account.settings.basic.update': '更新基本信息',
+  'account.settings.basic.update.success': '更新基本信息成功',
+  'account.settings.security.strong': '强',
+  'account.settings.security.medium': '中',
+  'account.settings.security.weak': '弱',
+  'account.settings.security.password': '账户密码',
+  'account.settings.security.password-description': '当前密码强度：',
+  'account.settings.security.phone': '密保手机',
+  'account.settings.security.phone-description': '已绑定手机：',
+  'account.settings.security.question': '密保问题',
+  'account.settings.security.question-description': '未设置密保问题，密保问题可有效保护账户安全',
+  'account.settings.security.email': '备用邮箱',
+  'account.settings.security.email-description': '已绑定邮箱：',
+  'account.settings.security.mfa': 'MFA 设备',
+  'account.settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
+  'account.settings.security.modify': '修改',
+  'account.settings.security.set': '设置',
+  'account.settings.security.bind': '绑定',
+  'account.settings.binding.taobao': '绑定淘宝',
+  'account.settings.binding.taobao-description': '当前未绑定淘宝账号',
+  'account.settings.binding.alipay': '绑定支付宝',
+  'account.settings.binding.alipay-description': '当前未绑定支付宝账号',
+  'account.settings.binding.dingding': '绑定钉钉',
+  'account.settings.binding.dingding-description': '当前未绑定钉钉账号',
+  'account.settings.binding.bind': '绑定',
+  'account.settings.notification.password': '账户密码',
+  'account.settings.notification.password-description': '其他用户的消息将以站内信的形式通知',
+  'account.settings.notification.messages': '系统消息',
+  'account.settings.notification.messages-description': '系统消息将以站内信的形式通知',
+  'account.settings.notification.todo': '待办任务',
+  'account.settings.notification.todo-description': '待办任务将以站内信的形式通知',
+  'account.settings.settings.open': '开',
+  'account.settings.settings.close': '关'
+}

src/views/account/settings/BaseSetting.vue

@@ -5,24 +5,24 @@
 
         <a-form layout="vertical">
           <a-form-item
-            label="昵称"
+            :label="$t('account.settings.basic.nickname')"
           >
-            <a-input placeholder="给自己起个名字" />
+            <a-input :placeholder="$t('account.settings.basic.nickname-message')" />
           </a-form-item>
           <a-form-item
-            label="Bio"
+            :label="$t('account.settings.basic.profile')"
           >
-            <a-textarea rows="4" placeholder="You are not alone."/>
+            <a-textarea rows="4" :placeholder="$t('account.settings.basic.profile-message')"/>
           </a-form-item>
 
           <a-form-item
-            label="电子邮件"
+            :label="$t('account.settings.basic.email')"
             :required="false"
           >
             <a-input placeholder="exp@admin.com"/>
           </a-form-item>
           <a-form-item
-            label="加密方式"
+            :label="$t('account.settings.basic.nickname')"
             :required="false"
           >
             <a-select defaultValue="aes-256-cfb">

src/views/account/settings/Index.vue

@@ -12,27 +12,27 @@
           >
             <a-menu-item key="/account/settings/base">
               <router-link :to="{ name: 'BaseSettings' }">
-                基本设置
+                {{ $t('account.settings.menuMap.basic') }}
               </router-link>
             </a-menu-item>
             <a-menu-item key="/account/settings/security">
               <router-link :to="{ name: 'SecuritySettings' }">
-                安全设置
+                {{ $t('account.settings.menuMap.security') }}
               </router-link>
             </a-menu-item>
             <a-menu-item key="/account/settings/custom">
               <router-link :to="{ name: 'CustomSettings' }">
-                个性化
+                {{ $t('account.settings.menuMap.custom') }}
               </router-link>
             </a-menu-item>
             <a-menu-item key="/account/settings/binding">
               <router-link :to="{ name: 'BindingSettings' }">
-                账户绑定
+                {{ $t('account.settings.menuMap.binding') }}
               </router-link>
             </a-menu-item>
             <a-menu-item key="/account/settings/notification">
               <router-link :to="{ name: 'NotificationSettings' }">
-                新消息通知
+                {{ $t('account.settings.menuMap.notification') }}
               </router-link>
             </a-menu-item>
           </a-menu>

src/views/account/settings/Security.vue

@@ -22,14 +22,14 @@
 
 <script>
 export default {
-  data () {
-    return {
-      data: [
-        { title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message') } } },
-        { title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } },
-        { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
-        { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
-        { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
+computed: {
+    data () {
+        return [
+        { title: this.$t('account.settings.security.password'), description: this.$t('account.settings.security.password-description'), value: '强', actions: { title: this.$t('account.settings.security.modify'), callback: () => { this.$message.info('This is a normal message') } } },
+        { title: this.$t('account.settings.security.phone'), description: this.$t('account.settings.security.phone-description'), value: '138****8293', actions: { title: this.$t('account.settings.security.modify'), callback: () => { this.$message.success('This is a message of success') } } },
+        { title: this.$t('account.settings.security.question'), description: this.$t('account.settings.security.question-description'), value: '', actions: { title: this.$t('account.settings.security.set'), callback: () => { this.$message.error('This is a message of error') } } },
+        { title: this.$t('account.settings.security.email'), description: this.$t('account.settings.security.email-description'), value: 'ant***sign.com', actions: { title: this.$t('account.settings.security.modify'), callback: () => { this.$message.warning('This is message of warning') } } },
+        { title: this.$t('account.settings.security.mfa'), description: this.$t('account.settings.security.mfa-description'), value: '', actions: { title: this.$t('account.settings.security.bind'), callback: () => { this.$message.info('This is a normal message') } } }
       ]
     }
   }