🌐 localization of basic form page (#2464)

src/locales/en-US.js

@@ -16,11 +16,44 @@ export default {
   'validation.phone-number.required': 'Please enter your phone number!',
   'validation.phone-number.wrong-format': 'Malformed phone number!',
   'validation.verification-code.required': 'Please enter the verification code!',
+  'validation.title.required': 'Please enter a title',
+  'validation.date.required': 'Please select the start and end date',
+  'validation.goal.required': 'Please enter a description of the goal',
+  'validation.standard.required': 'Please enter a metric',
+  'form.optional': ' (optional) ',
+  'form.submit': 'Submit',
+  'form.save': 'Save',
   'form.email.placeholder': 'Email',
   'form.password.placeholder': 'Password',
   'form.confirm-password.placeholder': 'Confirm password',
   'form.phone-number.placeholder': 'Phone number',
   'form.verification-code.placeholder': 'Verification code',
+  'form.title.label': 'Title',
+  'form.title.placeholder': 'Give the target a name',
+  'form.date.label': 'Start and end date',
+  'form.date.placeholder.start': 'Start date',
+  'form.date.placeholder.end': 'End date',
+  'form.goal.label': 'Goal description',
+  'form.goal.placeholder': 'Please enter your work goals',
+  'form.standard.label': 'Metrics',
+  'form.standard.placeholder': 'Please enter a metric',
+  'form.client.label': 'Client',
+  'form.client.label.tooltip': 'Target service object',
+  'form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'form.invites.label': 'Inviting critics',
+  'form.invites.placeholder': 'Please direct @ Name / job number, you can invite up to 5 people',
+  'form.weight.label': 'Weight',
+  'form.weight.placeholder': 'Please enter weight',
+  'form.public.label': 'Target disclosure',
+  'form.public.label.help': 'Customers and invitees are shared by default',
+  'form.public.radio.public': 'Public',
+  'form.public.radio.partially-public': 'Partially public',
+  'form.public.radio.private': 'Private',
+  'form.publicUsers.placeholder': 'Open to',
+  'form.publicUsers.option.A': 'Colleague A',
+  'form.publicUsers.option.B': 'Colleague B',
+  'form.publicUsers.option.C': 'Colleague C',
   'component.globalHeader.search': 'Search',
   'component.globalHeader.search.example1': 'Search example 1',
   'component.globalHeader.search.example2': 'Search example 2',
@@ -119,6 +152,9 @@ export default {
   'app.analysis.table.search-keyword': 'Keyword',
   'app.analysis.table.users': 'Users',
   'app.analysis.table.weekly-range': 'Weekly Range',
+  'app.forms.basic.title': 'Basic form',
+  'app.forms.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
   'app.settings.menuMap.basic': 'Basic Settings',
   'app.settings.menuMap.security': 'Security Settings',
   'app.settings.menuMap.binding': 'Account Binding',

src/locales/zh-CN.js

@@ -17,11 +17,43 @@ export default {
   'validation.phone-number.required': '请输入手机号！',
   'validation.phone-number.wrong-format': '手机号格式错误！',
   'validation.verification-code.required': '请输入验证码！',
+  'validation.title.required': '请输入标题',
+  'validation.date.required': '请选择起止日期',
+  'validation.goal.required': '请输入目标描述',
+  'validation.standard.required': '请输入衡量标准',
+  'form.optional': '（选填）',
+  'form.submit': '提交',
+  'form.save': '保存',
   'form.email.placeholder': '邮箱',
   'form.password.placeholder': '至少6位密码，区分大小写',
   'form.confirm-password.placeholder': '确认密码',
   'form.phone-number.placeholder': '位手机号',
   'form.verification-code.placeholder': '验证码',
+  'form.title.label': '标题',
+  'form.title.placeholder': '给目标起个名字',
+  'form.date.label': '起止日期',
+  'form.date.placeholder.start': '开始日期',
+  'form.date.placeholder.end': '结束日期',
+  'form.goal.label': '目标描述',
+  'form.goal.placeholder': '请输入你的阶段性工作目标',
+  'form.standard.label': '衡量标准',
+  'form.standard.placeholder': '请输入衡量标准',
+  'form.client.label': '客户',
+  'form.client.label.tooltip': '目标的服务对象',
+  'form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'form.invites.label': '邀评人',
+  'form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'form.weight.label': '权重',
+  'form.weight.placeholder': '请输入',
+  'form.public.label': '目标公开',
+  'form.public.label.help': '客户、邀评人默认被分享',
+  'form.public.radio.public': '公开',
+  'form.public.radio.partially-public': '部分公开',
+  'form.public.radio.private': '不公开',
+  'form.publicUsers.placeholder': '公开给',
+  'form.publicUsers.option.A': '同事甲',
+  'form.publicUsers.option.B': '同事乙',
+  'form.publicUsers.option.C': '同事丙',
   'component.globalHeader.search': '站内搜索',
   'component.globalHeader.search.example1': '搜索提示一',
   'component.globalHeader.search.example2': '搜索提示二',
@@ -120,6 +152,9 @@ export default {
   'app.analysis.table.search-keyword': '搜索关键词',
   'app.analysis.table.users': '用户数',
   'app.analysis.table.weekly-range': '周涨幅',
+  'app.forms.basic.title': '基础表单',
+  'app.forms.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
   'app.settings.menuMap.basic': '基本设置',
   'app.settings.menuMap.security': '安全设置',
   'app.settings.menuMap.binding': '账号绑定',

src/pages/Forms/BasicForm.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
+import { formatMessage, FormattedMessage } from 'umi/locale';
 import {
   Form,
   Input,
@@ -65,65 +66,79 @@ class BasicForms extends PureComponent {
 
     return (
       <PageHeaderWrapper
-        title="基础表单"
-        content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
+        title={<FormattedMessage id="app.forms.basic.title" />}
+        content={<FormattedMessage id="app.forms.basic.description" />}
       >
         <Card bordered={false}>
           <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
-            <FormItem {...formItemLayout} label="标题">
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form.title.label" />}>
               {getFieldDecorator('title', {
                 rules: [
                   {
                     required: true,
-                    message: '请输入标题',
+                    message: formatMessage({ id: 'validation.title.required' }),
                   },
                 ],
-              })(<Input placeholder="给目标起个名字" />)}
+              })(<Input placeholder={formatMessage({ id: 'form.title.placeholder' })} />)}
             </FormItem>
-            <FormItem {...formItemLayout} label="起止日期">
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form.date.label" />}>
               {getFieldDecorator('date', {
                 rules: [
                   {
                     required: true,
-                    message: '请选择起止日期',
+                    message: formatMessage({ id: 'validation.date.required' }),
                   },
                 ],
-              })(<RangePicker style={{ width: '100%' }} placeholder={['开始日期', '结束日期']} />)}
+              })(
+                <RangePicker
+                  style={{ width: '100%' }}
+                  placeholder={[
+                    formatMessage({ id: 'form.date.placeholder.start' }),
+                    formatMessage({ id: 'form.date.placeholder.end' }),
+                  ]}
+                />
+              )}
             </FormItem>
-            <FormItem {...formItemLayout} label="目标描述">
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form.goal.label" />}>
               {getFieldDecorator('goal', {
                 rules: [
                   {
                     required: true,
-                    message: '请输入目标描述',
+                    message: formatMessage({ id: 'validation.goal.required' }),
                   },
                 ],
               })(
                 <TextArea
                   style={{ minHeight: 32 }}
-                  placeholder="请输入你的阶段性工作目标"
+                  placeholder={formatMessage({ id: 'form.goal.placeholder' })}
                   rows={4}
                 />
               )}
             </FormItem>
-            <FormItem {...formItemLayout} label="衡量标准">
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form.standard.label" />}>
               {getFieldDecorator('standard', {
                 rules: [
                   {
                     required: true,
-                    message: '请输入衡量标准',
+                    message: formatMessage({ id: 'validation.standard.required' }),
                   },
                 ],
-              })(<TextArea style={{ minHeight: 32 }} placeholder="请输入衡量标准" rows={4} />)}
+              })(
+                <TextArea
+                  style={{ minHeight: 32 }}
+                  placeholder={formatMessage({ id: 'form.standard.placeholder' })}
+                  rows={4}
+                />
+              )}
             </FormItem>
             <FormItem
               {...formItemLayout}
               label={
                 <span>
-                  客户
+                  <FormattedMessage id="form.client.label" />
                   <em className={styles.optional}>
-                    （选填）
-                    <Tooltip title="目标的服务对象">
+                    <FormattedMessage id="form.optional" />
+                    <Tooltip title={<FormattedMessage id="form.client.label.tooltip" />}>
                       <Icon type="info-circle-o" style={{ marginRight: 4 }} />
                     </Tooltip>
                   </em>
@@ -131,58 +146,84 @@ class BasicForms extends PureComponent {
               }
             >
               {getFieldDecorator('client')(
-                <Input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" />
+                <Input placeholder={formatMessage({ id: 'form.client.placeholder' })} />
               )}
             </FormItem>
             <FormItem
               {...formItemLayout}
               label={
                 <span>
-                  邀评人
-                  <em className={styles.optional}>（选填）</em>
+                  <FormattedMessage id="form.invites.label" />
+                  <em className={styles.optional}>
+                    <FormattedMessage id="form.optional" />
+                  </em>
                 </span>
               }
             >
               {getFieldDecorator('invites')(
-                <Input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
+                <Input placeholder={formatMessage({ id: 'form.invites.placeholder' })} />
               )}
             </FormItem>
             <FormItem
               {...formItemLayout}
               label={
                 <span>
-                  权重
-                  <em className={styles.optional}>（选填）</em>
+                  <FormattedMessage id="form.weight.label" />
+                  <em className={styles.optional}>
+                    <FormattedMessage id="form.optional" />
+                  </em>
                 </span>
               }
             >
-              {getFieldDecorator('weight')(<InputNumber placeholder="请输入" min={0} max={100} />)}
+              {getFieldDecorator('weight')(
+                <InputNumber
+                  placeholder={formatMessage({ id: 'form.weight.placeholder' })}
+                  min={0}
+                  max={100}
+                />
+              )}
               <span className="ant-form-text">%</span>
             </FormItem>
-            <FormItem {...formItemLayout} label="目标公开" help="客户、邀评人默认被分享">
+            <FormItem
+              {...formItemLayout}
+              label={<FormattedMessage id="form.public.label" />}
+              help={<FormattedMessage id="form.public.label.help" />}
+            >
               <div>
                 {getFieldDecorator('public', {
                   initialValue: '1',
                 })(
                   <Radio.Group>
-                    <Radio value="1">公开</Radio>
-                    <Radio value="2">部分公开</Radio>
-                    <Radio value="3">不公开</Radio>
+                    <Radio value="1">
+                      <FormattedMessage id="form.public.radio.public" />
+                    </Radio>
+                    <Radio value="2">
+                      <FormattedMessage id="form.public.radio.partially-public" />
+                    </Radio>
+                    <Radio value="3">
+                      <FormattedMessage id="form.public.radio.private" />
+                    </Radio>
                   </Radio.Group>
                 )}
                 <FormItem style={{ marginBottom: 0 }}>
                   {getFieldDecorator('publicUsers')(
                     <Select
                       mode="multiple"
-                      placeholder="公开给"
+                      placeholder={formatMessage({ id: 'form.publicUsers.placeholder' })}
                       style={{
                         margin: '8px 0',
                         display: getFieldValue('public') === '2' ? 'block' : 'none',
                       }}
                     >
-                      <Option value="1">同事甲</Option>
-                      <Option value="2">同事乙</Option>
-                      <Option value="3">同事丙</Option>
+                      <Option value="1">
+                        <FormattedMessage id="form.publicUsers.option.A" />
+                      </Option>
+                      <Option value="2">
+                        <FormattedMessage id="form.publicUsers.option.B" />
+                      </Option>
+                      <Option value="3">
+                        <FormattedMessage id="form.publicUsers.option.C" />
+                      </Option>
                     </Select>
                   )}
                 </FormItem>
@@ -190,9 +231,11 @@ class BasicForms extends PureComponent {
             </FormItem>
             <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
               <Button type="primary" htmlType="submit" loading={submitting}>
-                提交
+                <FormattedMessage id="form.submit" />
+              </Button>
+              <Button style={{ marginLeft: 8 }}>
+                <FormattedMessage id="form.save" />
               </Button>
-              <Button style={{ marginLeft: 8 }}>保存</Button>
             </FormItem>
           </Form>
         </Card>