🌎 localization: add English translation for Welcome screen, Admin screen, and Form in Search Table screen (partial) (#7551)

* feat: add English translation for Welcome screen, Admin screen, and Form in Search Table screen (partial)

* feat: add English translation for Welcome screen, Admin screen, and Form in Search Table screen (partial)

* refactor: add Chinese translation to locales

* refactor: add a litle of change

* feat: add Chinese translation to locales

Co-authored-by: chenshuai2144 <qixian.cs@outlook.com>

src/locales/en-US/pages.ts

@@ -21,4 +21,27 @@ export default {
   'pages.login.submit': 'Submit',
   'pages.login.loginWith': 'Login with :',
   'pages.login.registerAccount': 'Register Account',
+  'pages.welcome.advancedComponent': 'Advanced Component',
+  'pages.welcome.link': 'Welcome',
+  'pages.welcome.advancedLayout': 'Advanced Layout',
+  'pages.welcome.alertMessage': 'Faster and stronger heavy-duty components have been released.',
+  'pages.admin.subPage.title': 'This page can only be viewed by Admin',
+  'pages.admin.subPage.alertMessage':
+    'Umi ui is now released, welcome to use npm run ui to start the experience.',
+  'pages.searchTable.createForm.newRule': 'New Rule',
+  'pages.searchTable.updateForm.ruleConfig': 'Rule configuration',
+  'pages.searchTable.updateForm.basicConfig': 'Basic Information',
+  'pages.searchTable.updateForm.ruleName.nameLabel': 'Rule Name',
+  'pages.searchTable.updateForm.ruleName.nameRules': 'Please enter the rule name!',
+  'pages.searchTable.updateForm.ruleDesc.descLabel': 'Rule Description',
+  'pages.searchTable.updateForm.ruleDesc.descPlaceholder': 'Please enter at least five characters',
+  'pages.searchTable.updateForm.ruleDesc.descRules':
+    'Please enter a rule description of at least five characters!',
+  'pages.searchTable.updateForm.ruleProps.title': 'Configure Properties',
+  'pages.searchTable.updateForm.object': 'Monitoring Object',
+  'pages.searchTable.updateForm.ruleProps.templateLabel': 'Rule Template',
+  'pages.searchTable.updateForm.ruleProps.typeLabel': 'Rule Type',
+  'pages.searchTable.updateForm.schedulingPeriod.title': 'Set Scheduling Period',
+  'pages.searchTable.updateForm.schedulingPeriod.timeLabel': 'Starting Time',
+  'pages.searchTable.updateForm.schedulingPeriod.timeRules': 'Please choose a start time!',
 };

src/locales/zh-CN/pages.ts

@@ -20,4 +20,25 @@ export default {
   'pages.login.submit': '提交',
   'pages.login.loginWith': '其他登录方式 :',
   'pages.login.registerAccount': '注册账户',
+  'pages.welcome.advancedComponent': '高级表格',
+  'pages.welcome.link': '欢迎使用',
+  'pages.welcome.advancedLayout': '高级布局',
+  'pages.welcome.alertMessage': '更快更强的重型组件，已经发布。',
+  'pages.admin.subPage.title': ' 这个页面只有 admin 权限才能查看',
+  'pages.admin.subPage.alertMessage': 'umi ui 现已发布，欢迎使用 npm run ui 启动体验。',
+  'pages.searchTable.createForm.newRule': '新建规则',
+  'pages.searchTable.updateForm.ruleConfig': '规则配置',
+  'pages.searchTable.updateForm.basicConfig': '基本信息',
+  'pages.searchTable.updateForm.ruleName.nameLabel': '规则名称',
+  'pages.searchTable.updateForm.ruleName.nameRules': '请输入规则名称！',
+  'pages.searchTable.updateForm.ruleDesc.descLabel': '规则描述',
+  'pages.searchTable.updateForm.ruleDesc.descPlaceholder': '请输入至少五个字符',
+  'pages.searchTable.updateForm.ruleDesc.descRules': '请输入至少五个字符的规则描述！',
+  'pages.searchTable.updateForm.ruleProps.title': '配置规则属性',
+  'pages.searchTable.updateForm.object': '监控对象',
+  'pages.searchTable.updateForm.ruleProps.templateLabel': '规则模板',
+  'pages.searchTable.updateForm.ruleProps.typeLabel': '规则类型',
+  'pages.searchTable.updateForm.schedulingPeriod.title': '设定调度周期',
+  'pages.searchTable.updateForm.schedulingPeriod.timeLabel': '开始时间',
+  'pages.searchTable.updateForm.schedulingPeriod.timeRules': '请选择开始时间！',
 };

src/pages/Admin.tsx

@@ -2,30 +2,42 @@ import React from 'react';
 import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
 import { Card, Typography, Alert } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { useIntl } from 'umi';
 
-export default (): React.ReactNode => (
-  <PageHeaderWrapper content=" 这个页面只有 admin 权限才能查看">
-    <Card>
-      <Alert
-        message="umi ui 现已发布，欢迎使用 npm run ui 启动体验。"
-        type="success"
-        showIcon
-        banner
-        style={{
-          margin: -12,
-          marginBottom: 48,
-        }}
-      />
-      <Typography.Title level={2} style={{ textAlign: 'center' }}>
-        <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
-      </Typography.Title>
-    </Card>
-    <p style={{ textAlign: 'center', marginTop: 24 }}>
-      Want to add more pages? Please refer to{' '}
-      <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
-        use block
-      </a>
-      。
-    </p>
-  </PageHeaderWrapper>
-);
+export default (): React.ReactNode => {
+  const intl = useIntl();
+  return (
+    <PageHeaderWrapper
+      content={intl.formatMessage({
+        id: 'pages.admin.subPage.title',
+        defaultMessage: ' 这个页面只有 admin 权限才能查看',
+      })}
+    >
+      <Card>
+        <Alert
+          message={intl.formatMessage({
+            id: 'pages.welcome.alertMessage',
+            defaultMessage: '更快更强的重型组件，已经发布。',
+          })}
+          type="success"
+          showIcon
+          banner
+          style={{
+            margin: -12,
+            marginBottom: 48,
+          }}
+        />
+        <Typography.Title level={2} style={{ textAlign: 'center' }}>
+          <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
+        </Typography.Title>
+      </Card>
+      <p style={{ textAlign: 'center', marginTop: 24 }}>
+        Want to add more pages? Please refer to{' '}
+        <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
+          use block
+        </a>
+        。
+      </p>
+    </PageHeaderWrapper>
+  );
+};

src/pages/ListTableList/components/CreateForm.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Modal } from 'antd';
+import { useIntl } from 'umi';
 
 interface CreateFormProps {
   modalVisible: boolean;
@@ -8,11 +9,15 @@ interface CreateFormProps {
 
 const CreateForm: React.FC<CreateFormProps> = (props) => {
   const { modalVisible, onCancel } = props;
+  const intl = useIntl();
 
   return (
     <Modal
       destroyOnClose
-      title="新建规则"
+      title={intl.formatMessage({
+        id: 'pages.searchTable.createForm.newRule',
+        defaultMessage: '新建规则',
+      })}
       visible={modalVisible}
       onCancel={() => onCancel()}
       footer={null}

src/pages/ListTableList/components/UpdateForm.tsx

@@ -8,6 +8,7 @@ import {
   ProFormRadio,
   ProFormDateTimePicker,
 } from '@ant-design/pro-form';
+import { useIntl, FormattedMessage } from 'umi';
 
 import { TableListItem } from '../data.d';
 
@@ -26,108 +27,178 @@ export interface UpdateFormProps {
   values: Partial<TableListItem>;
 }
 
-const UpdateForm: React.FC<UpdateFormProps> = (props) => (
-  <StepsForm
-    stepsProps={{
-      size: 'small',
-    }}
-    stepsFormRender={(dom, submitter) => {
-      return (
-        <Modal
-          width={640}
-          bodyStyle={{ padding: '32px 40px 48px' }}
-          destroyOnClose
-          title="规则配置"
-          visible={props.updateModalVisible}
-          footer={submitter}
-          onCancel={() => props.onCancel()}
-        >
-          {dom}
-        </Modal>
-      );
-    }}
-    onFinish={props.onSubmit}
-  >
-    <StepsForm.StepForm
-      initialValues={{
-        name: props.values.name,
-        desc: props.values.desc,
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const intl = useIntl();
+  return (
+    <StepsForm
+      stepsProps={{
+        size: 'small',
       }}
-      title="基本信息"
-    >
-      <ProFormText
-        name="name"
-        label="规则名称"
-        rules={[{ required: true, message: '请输入规则名称！' }]}
-      />
-      <ProFormTextArea
-        name="desc"
-        label="规则描述"
-        placeholder="请输入至少五个字符"
-        rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}
-      />
-    </StepsForm.StepForm>
-    <StepsForm.StepForm
-      initialValues={{
-        target: '0',
-        template: '0',
+      stepsFormRender={(dom, submitter) => {
+        return (
+          <Modal
+            width={640}
+            bodyStyle={{ padding: '32px 40px 48px' }}
+            destroyOnClose
+            title={intl.formatMessage({
+              id: 'pages.searchTable.updateForm.ruleConfig',
+              defaultMessage: '规则配置',
+            })}
+            visible={props.updateModalVisible}
+            footer={submitter}
+            onCancel={() => props.onCancel()}
+          >
+            {dom}
+          </Modal>
+        );
       }}
-      title="配置规则属性"
+      onFinish={props.onSubmit}
     >
-      <ProFormSelect
-        name="target"
-        label="监控对象"
-        valueEnum={{
-          0: '表一',
-          1: '表二',
+      <StepsForm.StepForm
+        initialValues={{
+          name: props.values.name,
+          desc: props.values.desc,
         }}
-      />
-      <ProFormSelect
-        name="template"
-        label="规则模板"
-        valueEnum={{
-          0: '规则模板一',
-          1: '规则模板二',
+        title={intl.formatMessage({
+          id: 'pages.searchTable.updateForm.basicConfig',
+          defaultMessage: '基本信息',
+        })}
+      >
+        <ProFormText
+          name="name"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.ruleName.nameLabel',
+            defaultMessage: '规则名称',
+          })}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="pages.searchTable.updateForm.ruleName.nameRules"
+                  defaultMessage="请输入规则名称！"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="desc"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.ruleDesc.descLabel',
+            defaultMessage: '规则描述',
+          })}
+          placeholder={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.ruleDesc.descPlaceholder',
+            defaultMessage: '请输入至少五个字符',
+          })}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="pages.searchTable.updateForm.ruleDesc.descRules"
+                  defaultMessage="请输入至少五个字符的规则描述！"
+                />
+              ),
+              min: 5,
+            },
+          ]}
+        />
+      </StepsForm.StepForm>
+      <StepsForm.StepForm
+        initialValues={{
+          target: '0',
+          template: '0',
         }}
-      />
-      <ProFormRadio.Group
-        name="type"
-        label="规则类型"
-        options={[
-          {
-            value: '0',
-            label: '强',
-          },
-          {
-            value: '1',
-            label: '弱',
-          },
-        ]}
-      />
-    </StepsForm.StepForm>
-    <StepsForm.StepForm
-      initialValues={{
-        type: '1',
-        frequency: 'month',
-      }}
-      title="设定调度周期"
-    >
-      <ProFormDateTimePicker
-        name="time"
-        label="开始时间"
-        rules={[{ required: true, message: '请选择开始时间！' }]}
-      />
-      <ProFormSelect
-        name="frequency"
-        label="监控对象"
-        width="xs"
-        valueEnum={{
-          month: '月',
-          week: '周',
+        title={intl.formatMessage({
+          id: 'pages.searchTable.updateForm.ruleProps.title',
+          defaultMessage: '配置规则属性',
+        })}
+      >
+        <ProFormSelect
+          name="target"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.object',
+            defaultMessage: '监控对象',
+          })}
+          valueEnum={{
+            0: '表一',
+            1: '表二',
+          }}
+        />
+        <ProFormSelect
+          name="template"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.ruleProps.templateLabel',
+            defaultMessage: '规则模板',
+          })}
+          valueEnum={{
+            0: '规则模板一',
+            1: '规则模板二',
+          }}
+        />
+        <ProFormRadio.Group
+          name="type"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.ruleProps.typeLabel',
+            defaultMessage: '规则类型',
+          })}
+          options={[
+            {
+              value: '0',
+              label: '强',
+            },
+            {
+              value: '1',
+              label: '弱',
+            },
+          ]}
+        />
+      </StepsForm.StepForm>
+      <StepsForm.StepForm
+        initialValues={{
+          type: '1',
+          frequency: 'month',
         }}
-      />
-    </StepsForm.StepForm>
-  </StepsForm>
-);
+        title={intl.formatMessage({
+          id: 'pages.searchTable.updateForm.schedulingPeriod.title',
+          defaultMessage: '设定调度周期',
+        })}
+      >
+        <ProFormDateTimePicker
+          name="time"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.schedulingPeriod.timeLabel',
+            defaultMessage: '开始时间',
+          })}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="pages.searchTable.updateForm.schedulingPeriod.timeRules"
+                  defaultMessage="请选择开始时间！"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormSelect
+          name="frequency"
+          label={intl.formatMessage({
+            id: 'pages.searchTable.updateForm.object',
+            defaultMessage: '监控对象',
+          })}
+          width="xs"
+          valueEnum={{
+            month: '月',
+            week: '周',
+          }}
+        />
+      </StepsForm.StepForm>
+    </StepsForm>
+  );
+};
 
 export default UpdateForm;

src/pages/Welcome.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Alert, Typography } from 'antd';
+import { useIntl, FormattedMessage } from 'umi';
 import styles from './Welcome.less';
 
 const CodePreview: React.FC<{}> = ({ children }) => (
@@ -11,46 +12,52 @@ const CodePreview: React.FC<{}> = ({ children }) => (
   </pre>
 );
 
-export default (): React.ReactNode => (
-  <PageContainer>
-    <Card>
-      <Alert
-        message="更快更强的重型组件，已经发布。"
-        type="success"
-        showIcon
-        banner
-        style={{
-          margin: -12,
-          marginBottom: 24,
-        }}
-      />
-      <Typography.Text strong>
-        高级表格{' '}
-        <a
-          href="https://procomponents.ant.design/components/table"
-          rel="noopener noreferrer"
-          target="__blank"
+export default (): React.ReactNode => {
+  const intl = useIntl();
+  return (
+    <PageContainer>
+      <Card>
+        <Alert
+          message={intl.formatMessage({
+            id: 'pages.welcome.alertMessage',
+            defaultMessage: '更快更强的重型组件，已经发布。',
+          })}
+          type="success"
+          showIcon
+          banner
+          style={{
+            margin: -12,
+            marginBottom: 24,
+          }}
+        />
+        <Typography.Text strong>
+          <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="高级表格" />{' '}
+          <a
+            href="https://procomponents.ant.design/components/table"
+            rel="noopener noreferrer"
+            target="__blank"
+          >
+            <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" />
+          </a>
+        </Typography.Text>
+        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
+        <Typography.Text
+          strong
+          style={{
+            marginBottom: 12,
+          }}
         >
-          欢迎使用
-        </a>
-      </Typography.Text>
-      <CodePreview>yarn add @ant-design/pro-table</CodePreview>
-      <Typography.Text
-        strong
-        style={{
-          marginBottom: 12,
-        }}
-      >
-        高级布局{' '}
-        <a
-          href="https://procomponents.ant.design/components/layout"
-          rel="noopener noreferrer"
-          target="__blank"
-        >
-          欢迎使用
-        </a>
-      </Typography.Text>
-      <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
-    </Card>
-  </PageContainer>
-);
+          <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="高级布局" />{' '}
+          <a
+            href="https://procomponents.ant.design/components/layout"
+            rel="noopener noreferrer"
+            target="__blank"
+          >
+            <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" />
+          </a>
+        </Typography.Text>
+        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
+      </Card>
+    </PageContainer>
+  );
+};