feat(i18n): consumer module

src/pages/Consumer/Create.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Steps, notification, Form } from 'antd';
 import { history } from 'umi';
+import { useIntl } from 'umi';
 
 import ActionBar from '@/components/ActionBar';
 import PluginPage from '@/components/PluginPage';
@@ -15,6 +16,7 @@ const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
   const [plugins, setPlugins] = useState<PluginPage.PluginData>({});
   const [form1] = Form.useForm();
+  const { formatMessage } = useIntl();
 
   useEffect(() => {
     const { id } = (props as any).match.params;
@@ -32,7 +34,7 @@ const Page: React.FC = (props) => {
     const { id } = (props as any).match.params;
     (id ? update(id, data) : create(data))
       .then(() => {
-        notification.success({ message: `${id ? '更新' : '创建'} Consumer 成功` });
+        notification.success({ message: `${id ? formatMessage({ id: 'consumer.create.edit' }) : formatMessage({ id: 'consumer.create.create' })} Consumer ${formatMessage({ id: 'consumer.create.success' })}` });
         history.push('/consumer/list');
       })
       .catch(() => {
@@ -51,7 +53,7 @@ const Page: React.FC = (props) => {
         .map((item) => item[0]);
       const isValid = Object.keys(plugins).some((name) => authPluginNames.includes(name));
       if (!isValid) {
-        notification.warning({ message: '请启用至少一种身份认证类插件' });
+        notification.warning({ message: formatMessage({ id: 'consumer.create.enable.authentication.plugin' }) });
         return;
       }
       setStep(3);
@@ -64,12 +66,12 @@ const Page: React.FC = (props) => {
 
   return (
     <>
-      <PageContainer title={`${(props as any).match.params.id ? '编辑' : '创建'} Consumer`}>
+      <PageContainer title={`${(props as any).match.params.id ? formatMessage({ id: 'consumer.create.edit' }) : formatMessage({ id: 'consumer.create.create' })} Consumer`}>
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>
-            <Steps.Step title="基础信息" />
-            <Steps.Step title="插件配置" />
-            <Steps.Step title="预览" />
+            <Steps.Step title={formatMessage({ id: 'consumer.create.basic.information' })} />
+            <Steps.Step title={formatMessage({ id: 'consumer.create.plugin.config' })} />
+            <Steps.Step title={formatMessage({ id: 'consumer.create.preview' })} />
           </Steps>
 
           {step === 1 && <Step1 form={form1} />}
@@ -82,4 +84,4 @@ const Page: React.FC = (props) => {
   );
 };
 
-export default Page;
+export default Page;

src/pages/Consumer/List.tsx

@@ -6,28 +6,30 @@ import { Popconfirm, Button, notification, Input } from 'antd';
 import moment from 'moment';
 
 import { history } from 'umi';
+import { useIntl } from 'umi';
 import { fetchList, remove } from './service';
 
 const Page: React.FC = () => {
   const ref = useRef<ActionType>();
   const [search, setSearch] = useState('');
+  const { formatMessage } = useIntl();
 
   const columns: ProColumns<ConsumerModule.ResEntity>[] = [
     {
-      title: '用户名',
+      title: formatMessage({ id: 'consumer.list.username' }),
       dataIndex: 'username',
     },
     {
-      title: '描述',
+      title: formatMessage({ id: 'consumer.list.description' }),
       dataIndex: 'desc',
     },
     {
-      title: '更新时间',
+      title: formatMessage({ id: 'consumer.list.update.time' }),
       dataIndex: 'update_time',
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: '操作',
+      title: formatMessage({ id: 'consumer.list.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -36,22 +38,22 @@ const Page: React.FC = () => {
             style={{ marginRight: 10 }}
             onClick={() => history.push(`/consumer/${record.id}/edit`)}
           >
-            编辑
+            {formatMessage({ id: 'consumer.list.edit' })}
           </Button>
           <Popconfirm
-            title="确定删除该条记录吗？"
-            okText="确定"
-            cancelText="取消"
+            title={formatMessage({ id: 'consumer.list.delete.confirm' })}
+            okText={formatMessage({ id: 'consumer.list.confirm' })}
+            cancelText={formatMessage({ id: 'consumer.list.cancel' })}
             onConfirm={() => {
               remove(record.id).then(() => {
-                notification.success({ message: '删除记录成功' });
+                notification.success({ message: formatMessage({ id: 'consumer.list.delete.success' }) });
                 /* eslint-disable no-unused-expressions */
                 ref.current?.reload();
               });
             }}
           >
             <Button type="primary" danger>
-              删除
+              {formatMessage({ id: 'consumer.list.delete' })}
             </Button>
           </Popconfirm>
         </>
@@ -60,7 +62,7 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageContainer title="Consumer 列表">
+    <PageContainer title={formatMessage({ id: 'consumer.list.list' })}>
       <ProTable<ConsumerModule.ResEntity>
         actionRef={ref}
         columns={columns}
@@ -69,7 +71,7 @@ const Page: React.FC = () => {
         request={(params) => fetchList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder="请输入"
+            placeholder={formatMessage({ id: 'consumer.list.input' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -78,7 +80,7 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push('/consumer/create')}>
             <PlusOutlined />
-            创建
+            {formatMessage({ id: 'consumer.list.create' })}
           </Button>,
         ]}
       />

src/pages/Consumer/components/Step1.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Form, Input } from 'antd';
 import { FormInstance } from 'antd/lib/form';
+import { useIntl } from 'umi';
 
 const FORM_LAYOUT = {
   labelCol: {
@@ -17,30 +18,31 @@ type Props = {
 };
 
 const Step1: React.FC<Props> = ({ form, disabled }) => {
+  const { formatMessage } = useIntl();
   return (
     <Form {...FORM_LAYOUT} form={form}>
       <Form.Item
-        label="用户名"
+        label={formatMessage({ id: 'consumer.step.username' })} 
         name="username"
         rules={[
           { required: true },
           {
             pattern: new RegExp(/^[a-zA-Z][a-zA-Z0-9_]{0,100}$/, 'g'),
-            message: '最大长度100，仅支持英文、数字和下划线，且只能以英文开头',
+            message: formatMessage({ id: 'consumer.step.username.rule' }),
           },
         ]}
-        extra="用户名全局唯一"
+        extra={formatMessage({ id: 'consumer.step.username.unique' })}
       >
         <Input
-          placeholder="请输入用户名"
+          placeholder={formatMessage({ id: 'consumer.step.input.username' })}
           disabled={disabled || window.location.pathname.indexOf('edit') !== -1}
         />
       </Form.Item>
-      <Form.Item label="描述" name="desc">
-        <Input.TextArea placeholder="在此输入描述" disabled={disabled} />
+      <Form.Item label={formatMessage({ id: 'consumer.step.description' })}  name="desc">
+        <Input.TextArea placeholder={formatMessage({ id: 'consumer.step.input.description' })} disabled={disabled} />
       </Form.Item>
     </Form>
   );
 };
 
-export default Step1;
+export default Step1;

src/pages/Consumer/locales/en-US.ts

@@ -3,4 +3,33 @@ export default {
   'menu.consumer.list': 'List',
   'menu.consumer.create': 'Create Consumer',
   'menu.consumer.edit': 'Edit Consumer',
-};
+
+  'consumer.step.username': 'Username',
+  'consumer.step.username.rule': 'Maximum length is 100, only letters, numbers and _ are supported, and can only begin with letters',
+  'consumer.step.username.unique': 'Username should be unique',
+  'consumer.step.input.username': 'Please input username',
+  'consumer.step.description': 'Description',
+  'consumer.step.input.description': 'Please input description',
+
+  'consumer.create.edit': 'Edit',
+  'consumer.create.create': 'Create',
+  'consumer.create.success': 'Success',
+  'consumer.create.enable.authentication.plugin': 'Please enable at least one authentication plugin',
+  'consumer.create.basic.information': 'Basic Information',
+  'consumer.create.plugin.config': 'Plugin Config',
+  'consumer.create.preview': 'Preview',
+
+  'consumer.list.username': 'Username',
+  'consumer.list.description': 'Description',
+  'consumer.list.update.time': 'Update Time',
+  'consumer.list.operation': 'Operation',
+  'consumer.list.edit': 'Edit',
+  'consumer.list.delete.confirm': 'Are you sure to delete this record ?',
+  'consumer.list.confirm': 'Confirm',
+  'consumer.list.cancel': 'Cancel',
+  'consumer.list.delete.success': 'Delete Success',
+  'consumer.list.delete': 'Delete',
+  'consumer.list.list': 'Consumer List',
+  'consumer.list.input': 'Please input',
+  'consumer.list.create': 'Create',
+};

src/pages/Consumer/locales/zh-CN.ts

@@ -3,4 +3,33 @@ export default {
   'menu.consumer.list': '列表',
   'menu.consumer.create': '创建 Consumer',
   'menu.consumer.edit': '编辑 Consumer',
-};
+
+  'consumer.step.username': '用户名',
+  'consumer.step.username.rule': '最大长度100，仅支持字母、数字和 _ ，且只能以字母开头',
+  'consumer.step.username.unique': '用户名需唯一',
+  'consumer.step.input.username': '请输入用户名',
+  'consumer.step.description': '描述',
+  'consumer.step.input.description': '请输入描述',
+
+  'consumer.create.edit': '编辑',
+  'consumer.create.create': '创建',
+  'consumer.create.success': '成功',
+  'consumer.create.enable.authentication.plugin': '请启用至少一种身份认证类插件',
+  'consumer.create.basic.information': '基础信息',
+  'consumer.create.plugin.config': '插件配置',
+  'consumer.create.preview': '预览',
+
+  'consumer.list.username': '用户名',
+  'consumer.list.description': '描述',
+  'consumer.list.update.time': '更新时间',
+  'consumer.list.operation': '操作',
+  'consumer.list.edit': '编辑',
+  'consumer.list.delete.confirm': '确定删除该条记录吗？',
+  'consumer.list.confirm': '确定',
+  'consumer.list.cancel': '取消',
+  'consumer.list.delete.success': '删除记录成功',
+  'consumer.list.delete': '删除',
+  'consumer.list.list': 'Consumer 列表',
+  'consumer.list.input': '请输入',
+  'consumer.list.create': '创建',
+};