From b3c2037b883b37d723bc1c0abc93b9e7fe919763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=A7=80=E7=8E=B2?= Date: Mon, 9 Jul 2018 15:42:51 +0800 Subject: [PATCH] translate settings page --- src/locale/en-US.js | 21 +++++ src/locale/zh-CN.js | 19 ++++ src/pages/Account/Settings/BaseView.js | 92 +++++++++++-------- src/pages/Account/Settings/BindingView.js | 35 +++++-- src/pages/Account/Settings/Info.js | 10 +- .../Account/Settings/NotificationView.js | 32 +++++-- src/pages/Account/Settings/SecurityView.js | 71 ++++++++++---- 7 files changed, 202 insertions(+), 78 deletions(-) diff --git a/src/locale/en-US.js b/src/locale/en-US.js index a73fb32f..95407f0a 100644 --- a/src/locale/en-US.js +++ b/src/locale/en-US.js @@ -108,6 +108,27 @@ export default { 'app.settings.security.mfa': 'MFA Device', 'app.settings.security.mfa-description': 'Unbound MFA device, after binding, can be confirmed twice', + 'app.settings.security.modify': 'Modify', + 'app.settings.security.set': 'Set', + 'app.settings.security.bind': 'Bind', + 'app.settings.binding.taobao': 'Binding Taobao', + 'app.settings.binding.taobao-description': 'Currently unbound Taobao account', + 'app.settings.binding.alipay': 'Binding Alipay', + 'app.settings.binding.alipay-description': 'Currently unbound Alipay account', + 'app.settings.binding.dingding': 'Binding DingTalk', + 'app.settings.binding.dingding-description': 'Currently unbound DingTalk account', + 'app.settings.binding.bind': 'Bind', + 'app.settings.notification.password': 'Account Password', + 'app.settings.notification.password-description': + 'Messages from other users will be notified in the form of a station letter', + 'app.settings.notification.messages': 'System Messages', + 'app.settings.notification.messages-description': + 'System messages will be notified in the form of a station letter', + 'app.settings.notification.todo': 'To-do Notification', + 'app.settings.notification.todo-description': + 'The to-do list will be notified in the form of a letter from the station', + 'app.settings.open': 'Open', + 'app.settings.close': 'Close', // ...enMessages, }, }; diff --git a/src/locale/zh-CN.js b/src/locale/zh-CN.js index c1f7c347..059c5314 100644 --- a/src/locale/zh-CN.js +++ b/src/locale/zh-CN.js @@ -105,6 +105,25 @@ export default { 'app.settings.security.email-description': '已绑定邮箱：', 'app.settings.security.mfa': 'MFA 设备', 'app.settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认', + 'app.settings.security.modify': '修改', + 'app.settings.security.set': '设置', + 'app.settings.security.bind': '绑定', + 'app.settings.binding.taobao': '绑定淘宝', + 'app.settings.binding.taobao-description': '当前未绑定淘宝账号', + 'app.settings.binding.alipay': '绑定支付宝', + 'app.settings.binding.alipay-description': '当前未绑定支付宝账号', + 'app.settings.binding.dingding': '绑定钉钉', + 'app.settings.binding.dingding-description': '当前未绑定钉钉账号', + 'app.settings.binding.bind': '绑定', + 'app.settings.notification.password': '账户密码', + 'app.settings.notification.password-description': '其他用户的消息将以站内信的形式通知', + 'app.settings.notification.messages': '系统消息', + 'app.settings.notification.messages-description': '系统消息将以站内信的形式通知', + 'app.settings.notification.todo': '账户密码', + 'app.settings.notification.todo-description': '账户密码', + 'app.settings.open': '开', + 'app.settings.close': '关', + // ...zhMessages, }, }; diff --git a/src/pages/Account/Settings/BaseView.js b/src/pages/Account/Settings/BaseView.js index f2dd1cf1..38b00980 100644 --- a/src/pages/Account/Settings/BaseView.js +++ b/src/pages/Account/Settings/BaseView.js @@ -54,28 +54,6 @@ const validatorPhone = (rule, value, callback) => { })) @Form.create() class BaseView extends Component { - constructor(props) { - super(props); - const { intl } = props; - this.formLabelData = { - email: intl.formatMessage({ id: 'app.settings.basic.email' }, {}), - emailMessage: intl.formatMessage({ id: 'app.settings.basic.email-message' }, {}), - nickname: intl.formatMessage({ id: 'app.settings.basic.nickname' }, {}), - nicknameMessage: intl.formatMessage({ id: 'app.settings.basic.nickname-message' }, {}), - profile: intl.formatMessage({ id: 'app.settings.basic.profile' }, {}), - profileMessage: intl.formatMessage({ id: 'app.settings.basic.profile-message' }, {}), - profilePlaceholder: intl.formatMessage({ id: 'app.settings.basic.profile-placeholder' }, {}), - country: intl.formatMessage({ id: 'app.settings.basic.country' }, {}), - countryMessage: intl.formatMessage({ id: 'app.settings.basic.country-message' }, {}), - geographic: intl.formatMessage({ id: 'app.settings.basic.geographic' }, {}), - geographicMessage: intl.formatMessage({ id: 'app.settings.basic.geographic-message' }, {}), - address: intl.formatMessage({ id: 'app.settings.basic.address' }, {}), - addressMessage: intl.formatMessage({ id: 'app.settings.basic.address-message' }, {}), - phone: intl.formatMessage({ id: 'app.settings.basic.phone' }, {}), - phoneMessage: intl.formatMessage({ id: 'app.settings.basic.phone-message' }, {}), - }; - } - componentDidMount() { this.setBaseInfo(); } @@ -105,41 +83,73 @@ class BaseView extends Component { render() { const { form: { getFieldDecorator }, + intl, } = this.props; return (
- + {getFieldDecorator('email', { - rules: [{ required: true, message: this.formLabelData.emailMessage }], + rules: [ + { + required: true, + message: intl.formatMessage({ id: 'app.settings.basic.email-message' }, {}), + }, + ], })()} - + {getFieldDecorator('name', { - rules: [{ required: true, message: this.formLabelData.nicknameMessage }], + rules: [ + { + required: true, + message: intl.formatMessage({ id: 'app.settings.basic.nickname-message' }, {}), + }, + ], })()} - + {getFieldDecorator('profile', { - rules: [{ required: true, message: this.formLabelData.profileMessage }], - })()} + rules: [ + { + required: true, + message: intl.formatMessage({ id: 'app.settings.basic.profile-message' }, {}), + }, + ], + })( + + )} - + {getFieldDecorator('country', { - rules: [{ required: true, message: this.formLabelData.countryMessage }], + rules: [ + { + required: true, + message: intl.formatMessage({ id: 'app.settings.basic.country-message' }, {}), + }, + ], })( )} - + {getFieldDecorator('geographic', { rules: [ { required: true, - message: this.formLabelData.geographicMessage, + message: intl.formatMessage( + { id: 'app.settings.basic.geographic-message' }, + {} + ), }, { validator: validatorGeographic, @@ -147,15 +157,23 @@ class BaseView extends Component { ], })()} - + {getFieldDecorator('address', { - rules: [{ required: true, message: this.formLabelData.addressMessage }], + rules: [ + { + required: true, + message: intl.formatMessage({ id: 'app.settings.basic.address-message' }, {}), + }, + ], })()} - + {getFieldDecorator('phone', { rules: [ - { required: true, message: this.formLabelData.phoneMessage }, + { + required: true, + message: intl.formatMessage({ id: 'app.settings.basic.phone-message' }, {}), + }, { validator: validatorPhone }, ], })()} diff --git a/src/pages/Account/Settings/BindingView.js b/src/pages/Account/Settings/BindingView.js index 9b9ff7fb..aa82235d 100644 --- a/src/pages/Account/Settings/BindingView.js +++ b/src/pages/Account/Settings/BindingView.js @@ -1,25 +1,39 @@ import React, { Component, Fragment } from 'react'; +import { injectIntl, FormattedMessage } from 'react-intl'; import { Icon, List } from 'antd'; -export default class BindingView extends Component { +class BindingView extends Component { getData = () => { + const { intl } = this.props; return [ { - title: '绑定淘宝', - description: '当前未绑定淘宝账号', - actions: [绑定], + title: intl.formatMessage({ id: 'app.settings.binding.taobao' }, {}), + description: intl.formatMessage({ id: 'app.settings.binding.taobao-description' }, {}), + actions: [ + + + , + ], avatar: , }, { - title: '绑定支付宝', - description: '当前未绑定支付宝账号', - actions: [绑定], + title: intl.formatMessage({ id: 'app.settings.binding.alipay' }, {}), + description: intl.formatMessage({ id: 'app.settings.binding.alipay-description' }, {}), + actions: [ + + + , + ], avatar: , }, { - title: '绑定钉钉', - description: '当前未绑定钉钉账号', - actions: [绑定], + title: intl.formatMessage({ id: 'app.settings.binding.dingding' }, {}), + description: intl.formatMessage({ id: 'app.settings.binding.dingding-description' }, {}), + actions: [ + + + , + ], avatar: , }, ]; @@ -45,3 +59,4 @@ export default class BindingView extends Component { ); } } +export default injectIntl(BindingView); diff --git a/src/pages/Account/Settings/Info.js b/src/pages/Account/Settings/Info.js index d817f1ed..2567a011 100644 --- a/src/pages/Account/Settings/Info.js +++ b/src/pages/Account/Settings/Info.js @@ -15,11 +15,7 @@ export default class Info extends Component { constructor(props) { super(props); const { match, location } = props; - const key = location.pathname.replace(`${match.path}/`, ''); - // let key = location.pathname.replace(`${match.path}/`, ''); - // key = this.state.menuMap[key] ? key : 'base'; this.state = { - selectKey: key, mode: 'inline', menuMap: { base: , @@ -37,6 +33,12 @@ export default class Info extends Component { ), }, }; + let key = location.pathname.replace(`${match.path}/`, ''); + const { menuMap } = this.state; + key = menuMap[key] ? key : 'base'; + this.setState({ + selectKey: key, + }); } componentDidMount() { diff --git a/src/pages/Account/Settings/NotificationView.js b/src/pages/Account/Settings/NotificationView.js index 14826d91..440ebfdb 100644 --- a/src/pages/Account/Settings/NotificationView.js +++ b/src/pages/Account/Settings/NotificationView.js @@ -1,24 +1,37 @@ import React, { Component, Fragment } from 'react'; +import { injectIntl } from 'react-intl'; import { Switch, List } from 'antd'; -const Action = ; - -export default class NotificationView extends Component { +class NotificationView extends Component { getData = () => { + const { intl } = this.props; + const Action = ( + + ); return [ { - title: '账户密码', - description: '其他用户的消息将以站内信的形式通知', + title: intl.formatMessage({ id: 'app.settings.notification.password' }, {}), + description: intl.formatMessage( + { id: 'app.settings.notification.password-description' }, + {} + ), actions: [Action], }, { - title: '系统消息', - description: '系统消息将以站内信的形式通知', + title: intl.formatMessage({ id: 'app.settings.notification.messages' }, {}), + description: intl.formatMessage( + { id: 'app.settings.notification.messages-description' }, + {} + ), actions: [Action], }, { - title: '待办通知', - description: '待办事项将以站内信的形式通知', + title: intl.formatMessage({ id: 'app.settings.notification.todo' }, {}), + description: intl.formatMessage({ id: 'app.settings.notification.todo-description' }, {}), actions: [Action], }, ]; @@ -40,3 +53,4 @@ export default class NotificationView extends Component { ); } } +export default injectIntl(NotificationView); diff --git a/src/pages/Account/Settings/SecurityView.js b/src/pages/Account/Settings/SecurityView.js index 62cb6caa..b3f27432 100644 --- a/src/pages/Account/Settings/SecurityView.js +++ b/src/pages/Account/Settings/SecurityView.js @@ -1,6 +1,7 @@ import React, { Component, Fragment } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { injectIntl, FormattedMessage } from 'react-intl'; import { List } from 'antd'; +// import { getTimeDistance } from '../../../utils/utils'; const passwordStrength = { strong: ( @@ -20,34 +21,67 @@ const passwordStrength = { ), }; -export default class SecurityView extends Component { +class SecurityView extends Component { getData = () => { + const { intl } = this.props; return [ { - title: 'account password', - description: Current password strength：{passwordStrength.strong}, - actions: [Modify], + title: intl.formatMessage({ id: 'app.settings.security.password' }, {}), + description: ( + + {' '} + {intl.formatMessage({ id: 'app.settings.security.password-description' }, {})}：{ + passwordStrength.strong + } + + ), + actions: [ + + + , + ], }, { - title: 'Security phone', - description: 'Bound phone：138****8293', - actions: [Modify], + title: intl.formatMessage({ id: 'app.settings.security.phone' }, {}), + description: `${intl.formatMessage( + { id: 'app.settings.security.phone-description' }, + {} + )}：138****8293`, + actions: [ + + + , + ], }, { - title: 'Security Question', - description: - 'The security question is not set, and the security policy can effectively protect the account security', - actions: [Set], + title: intl.formatMessage({ id: 'app.settings.security.question' }, {}), + description: intl.formatMessage({ id: 'app.settings.security.question-description' }, {}), + actions: [ + + + , + ], }, { - title: 'Backup Email', - description: 'Bound Email：ant***sign.com', - actions: [Modify], + title: intl.formatMessage({ id: 'app.settings.security.email' }, {}), + description: `${intl.formatMessage( + { id: 'app.settings.security.email-description' }, + {} + )}：ant***sign.com`, + actions: [ + + + , + ], }, { - title: 'MFA Device', - description: 'Unbound MFA device, after binding, can be confirmed twice', - actions: [Bind], + title: intl.formatMessage({ id: 'app.settings.security.mfa' }, {}), + description: intl.formatMessage({ id: 'app.settings.security.mfa-description' }, {}), + actions: [ + + + , + ], }, ]; }; @@ -68,3 +102,4 @@ export default class SecurityView extends Component { ); } } +export default injectIntl(SecurityView); -- GitLab