apache · juzhiyuan · Jul 24, 2020 · Jul 21, 2020
diff --git a/src/pages/Upstream/Create.tsx b/src/pages/Upstream/Create.tsx
@@ -4,6 +4,7 @@ import { Card, Steps, notification, Form } from 'antd';
 
 import ActionBar from '@/components/ActionBar';
 import { history } from 'umi';
+import { useIntl } from 'umi';
 
 import Step1 from './components/Step1';
 import Preview from './components/Preview';
@@ -13,6 +14,7 @@ import { transformCreate, transformFetch } from './transform';
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
   const [form1] = Form.useForm();
+  const { formatMessage } = useIntl();
 
   useEffect(() => {
     const { id } = (props as any).match.params;
@@ -28,7 +30,7 @@ const Page: React.FC = (props) => {
     const data = transformCreate({ ...form1.getFieldsValue() } as UpstreamModule.Body);
     const { id } = (props as any).match.params;
     (id ? update(id, data) : create(data)).then(() => {
-      notification.success({ message: `${id ? '更新' : '创建'} 上游成功` });
+      notification.success({ message: `${id ? formatMessage({ id: 'upstream.create.edit' }) : formatMessage({ id: 'upstream.create.create' })} ` + formatMessage({ id: 'upstream.create.upstream.successfully' }) });
       history.replace('/upstream/list');
     });
   };
@@ -47,11 +49,11 @@ const Page: React.FC = (props) => {
 
   return (
     <>
-      <PageContainer title="创建上游">
+      <PageContainer title={formatMessage({ id: 'upstream.create.create' })}>
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>
-            <Steps.Step title="基础信息" />
-            <Steps.Step title="预览" />
+            <Steps.Step title={formatMessage({ id: 'upstream.create.basic.info' })} />
+            <Steps.Step title={formatMessage({ id: 'upstream.create.preview' })} />
           </Steps>
 
           {step === 1 && <Step1 form={form1} />}

diff --git a/src/pages/Upstream/List.tsx b/src/pages/Upstream/List.tsx
@@ -4,6 +4,7 @@ import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 import { PlusOutlined } from '@ant-design/icons';
 import { Popconfirm, Button, notification, Input } from 'antd';
 import { history } from 'umi';
+import { useIntl } from 'umi';
 import moment from 'moment';
 
 import { fetchList, remove } from './service';
@@ -12,27 +13,28 @@ const Page: React.FC = () => {
   const ref = useRef<ActionType>();
 
   const [search, setSearch] = useState('');
+  const { formatMessage } = useIntl();
 
   const columns: ProColumns<UpstreamModule.ResEntity>[] = [
     {
-      title: '名称',
+      title: formatMessage({ id: 'upstream.list.name' }),
       dataIndex: 'name',
     },
     {
-      title: '类型',
+      title: formatMessage({ id: 'upstream.list.type' }),
       dataIndex: 'type',
     },
     {
-      title: '描述',
+      title: formatMessage({ id: 'upstream.list.description' }),
       dataIndex: 'description',
     },
     {
-      title: '更新时间',
+      title: formatMessage({ id: 'upstream.list.edit.time' }),
       dataIndex: 'update_time',
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: '操作',
+      title: formatMessage({ id: 'upstream.list.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -41,24 +43,24 @@ const Page: React.FC = () => {
             style={{ marginRight: 10 }}
             onClick={() => history.push(`/upstream/${record.id}/edit`)}
           >
-            编辑
+            {formatMessage({ id: 'upstream.list.edit' })}
           </Button>
           <Popconfirm
-            title="确定删除该条记录吗？"
-            okText="确定"
-            cancelText="取消"
+            title={formatMessage({ id: 'upstream.list.confirm.delete' })}
+            okText={formatMessage({ id: 'upstream.list.confirm' })}
+            cancelText={formatMessage({ id: 'upstream.list.cancel' })}
             onConfirm={() => {
               remove(record.id!).then(() => {
                 notification.success({
-                  message: '删除记录成功',
+                  message: formatMessage({ id: 'upstream.list.delete.successfully' }),
                 });
                 /* eslint-disable no-unused-expressions */
                 ref.current?.reload();
               });
             }}
           >
             <Button type="primary" danger>
-              删除
+              {formatMessage({ id: 'upstream.list.delete' })}
             </Button>
           </Popconfirm>
         </>
@@ -67,7 +69,7 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageContainer title="上游列表">
+    <PageContainer title={formatMessage({ id: 'upstream.list' })}>
       <ProTable<UpstreamModule.ResEntity>
         actionRef={ref}
         columns={columns}
@@ -76,7 +78,7 @@ const Page: React.FC = () => {
         request={(params) => fetchList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder="请输入"
+            placeholder={formatMessage({ id: 'upstream.list.input' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -85,8 +87,8 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push('/upstream/create')}>
             <PlusOutlined />
-            创建
-          </Button>,
+            {formatMessage({ id: 'upstream.list.create' })}
+          </Button>
         ]}
       />
     </PageContainer>

diff --git a/src/pages/Upstream/components/Step1.tsx b/src/pages/Upstream/components/Step1.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Form, Input, Row, Col, InputNumber, Select } from 'antd';
 import { FormInstance } from 'antd/lib/form';
+import { useIntl } from 'umi';
 
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import Button from 'antd/es/button';
@@ -24,6 +25,9 @@ const initialValues = {
 };
 
 const Step1: React.FC<Props> = ({ form, disabled }) => {
+
+  const { formatMessage } = useIntl();
+
   const renderUpstreamMeta = () => (
     <Form.List name="upstreamHostList">
       {(fields, { add, remove }) => (
@@ -33,10 +37,10 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
               required
               key={field.key}
               {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
-              label={index === 0 ? '后端服务域名/IP' : ''}
+              label={index === 0 ? formatMessage({ id: 'upstream.step.backend.server.domain.or.ip' }) : ''}
               extra={
                 index === 0
-                  ? '使用域名时，默认解析本地 /etc/resolv.conf；权重为0则熔断该节点。'
+                  ? formatMessage({ id: 'upstream.step.domain.name.default.analysis' })
                   : ''
               }
             >
@@ -46,35 +50,35 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
                     style={{ marginBottom: 0 }}
                     name={[field.name, 'host']}
                     rules={[
-                      { required: true, message: '请输入域名/IP' },
+                      { required: true, message: formatMessage({ id: 'upstream.step.input.domain.name.or.ip' }) },
                       {
                         pattern: new RegExp(
                           /(^([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(\.(25[0-5]|1\d{2}|2[0-4]\d|[1-9]?\d)){3}$|^(?![0-9.]+$)([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+){0,}$)/,
                           'g',
                         ),
-                        message: '仅支持数字或者字符 或者 . (.不是必须)',
+                        message: formatMessage({ id: 'upstream.step.domain.name.or.ip.rule' }),
                       },
                     ]}
                   >
-                    <Input placeholder="域名/IP" disabled={disabled} />
+                    <Input placeholder={formatMessage({ id: 'upstream.step.domain.name.or.ip' })} disabled={disabled} />
                   </Form.Item>
                 </Col>
                 <Col span={3}>
                   <Form.Item
                     style={{ marginBottom: 0 }}
                     name={[field.name, 'port']}
-                    rules={[{ required: true, message: '请输入端口' }]}
+                    rules={[{ required: true, message: formatMessage({ id: 'upstream.step.input.port' }) }]}
                   >
-                    <InputNumber placeholder="端口号" disabled={disabled} min={1} max={65535} />
+                    <InputNumber placeholder={formatMessage({ id: 'upstream.step.port' })} disabled={disabled} min={1} max={65535} />
                   </Form.Item>
                 </Col>
                 <Col span={3}>
                   <Form.Item
                     style={{ marginBottom: 0 }}
                     name={[field.name, 'weight']}
-                    rules={[{ required: true, message: '请输入权重' }]}
+                    rules={[{ required: true, message: formatMessage({ id: 'upstream.step.input.weight' }) }]}
                   >
-                    <InputNumber placeholder="权重" disabled={disabled} min={0} max={1000} />
+                    <InputNumber placeholder={formatMessage({ id: 'upstream.step.weight' })} disabled={disabled} min={0} max={1000} />
                   </Form.Item>
                 </Col>
                 <Col
@@ -105,7 +109,7 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
                   add();
                 }}
               >
-                <PlusOutlined /> 新建
+                <PlusOutlined />{formatMessage({ id: 'upstream.step.create' })}
               </Button>
             </Form.Item>
           )}
@@ -118,44 +122,44 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
 
   return (
     <Form {...FORM_ITEM_LAYOUT} form={form} initialValues={initialValues}>
-      <Form.Item label="名称" name="name" rules={[{ required: true }]} extra="名称需全局唯一">
-        <Input placeholder="请输入上游名称" disabled={disabled} />
+      <Form.Item label={formatMessage({ id: 'upstream.step.name' })} name="name" rules={[{ required: true }]} extra={formatMessage({ id: 'upstream.step.name.should.unique' })}>
+        <Input placeholder={formatMessage({ id: 'upstream.step.input.upstream.name' })} disabled={disabled} />
       </Form.Item>
-      <Form.Item label="描述" name="description">
-        <Input.TextArea placeholder="请输入描述" disabled={disabled} />
+      <Form.Item label={formatMessage({ id: 'upstream.step.description' })} name="description">
+        <Input.TextArea placeholder={formatMessage({ id: 'upstream.step.input.description' })} disabled={disabled} />
       </Form.Item>
-      <Form.Item label="类型" name="type" rules={[{ required: true }]}>
+      <Form.Item label={formatMessage({ id: 'upstream.step.type' })} name="type" rules={[{ required: true }]}>
         <Select disabled={disabled}>
           <Select.Option value="roundrobin">roundrobin</Select.Option>
           {/* TODO: chash */}
         </Select>
       </Form.Item>
       {renderUpstreamMeta()}
-      <Form.Item label="连接超时" required>
+      <Form.Item label={formatMessage({ id: 'upstream.step.connect.timeout' })} required>
         <Form.Item
           name={['timeout', 'connect']}
           noStyle
-          rules={[{ required: true, message: '请输入连接超时时间' }]}
+          rules={[{ required: true, message: formatMessage({ id: 'upstream.step.input.connect.timeout' }) }]}
         >
           <InputNumber disabled={disabled} />
         </Form.Item>
         {renderTimeUnit()}
       </Form.Item>
-      <Form.Item label="发送超时" required>
+      <Form.Item label={formatMessage({ id: 'upstream.step.send.timeout' })} required>
         <Form.Item
           name={['timeout', 'send']}
           noStyle
-          rules={[{ required: true, message: '请输入发送超时时间' }]}
+          rules={[{ required: true, message: formatMessage({ id: 'upstream.step.input.send.timeout' }) }]}
         >
           <InputNumber disabled={disabled} />
         </Form.Item>
         {renderTimeUnit()}
       </Form.Item>
-      <Form.Item label="接收超时" required>
+      <Form.Item label={formatMessage({ id: 'upstream.step.receive.timeout' })} required>
         <Form.Item
           name={['timeout', 'read']}
           noStyle
-          rules={[{ required: true, message: '请输入接收超时时间' }]}
+          rules={[{ required: true, message: formatMessage({ id: 'upstream.step.input.receive.timeout' }) }]}
         >
           <InputNumber disabled={disabled} />
         </Form.Item>

diff --git a/src/pages/Upstream/locales/en-US.ts b/src/pages/Upstream/locales/en-US.ts
@@ -3,4 +3,48 @@ export default {
   'menu.upstream.list': 'List',
   'menu.upstream.create': 'Create a Upstream',
   'menu.upstream.edit': 'Edit the Upstream',
+
+  'upstream.step.backend.server.domain.or.ip':'Backend Server Domain Name/IP',
+  'upstream.step.domain.name.default.analysis':'When using domain name, it will analysis local: /etc/resolv.conf by default, if weight is 0, then fusing this node',
+  'upstream.step.input.domain.name.or.ip':'Please input domain name/IP',
+  'upstream.step.domain.name.or.ip.rule':'Only letters, numbers and . are supported',
+  'upstream.step.domain.name.or.ip':'Domain Name/IP',
+  'upstream.step.input.port':'Please input port number',
+  'upstream.step.port':'Port Number',
+  'upstream.step.input.weight':'Please input weight',
+  'upstream.step.weight':'Weight',
+  'upstream.step.create':'Create',
+  'upstream.step.name':'Name',
+  'upstream.step.name.should.unique':'Name should be unique',
+  'upstream.step.input.upstream.name':'Please input upstream name',
+  'upstream.step.description':'Description',
+  'upstream.step.input.description':'Please input description',
+  'upstream.step.type':'Type',
+  'upstream.step.connect.timeout':'Connect Timeout',
+  'upstream.step.input.connect.timeout':'Please input connect timeout',
+  'upstream.step.send.timeout':'Send Timeout',
+  'upstream.step.input.send.timeout':'Please input send timeout',
+  'upstream.step.receive.timeout':'Receive Timeout',
+  'upstream.step.input.receive.timeout':'Please input receive timeout',
+
+  'upstream.create.edit':'Edit',
+  'upstream.create.create':'Create',
+  'upstream.create.upstream.successfully':'upstream successfully',
+  'upstream.create.basic.info':'Basic Information',
+  'upstream.create.preview':'Preview',
+
+  'upstream.list.name':'Name',
+  'upstream.list.type':'Type',
+  'upstream.list.description':'Description',
+  'upstream.list.edit.time':'Edit Time',
+  'upstream.list.operation':'Operation',
+  'upstream.list.edit':'Edit',
+  'upstream.list.confirm.delete':'Are you sure to delete ?',
+  'upstream.list.confirm':'Confirm',
+  'upstream.list.cancel':'Cancel',
+  'upstream.list.delete.successfully':'Delete successfully',
+  'upstream.list.delete':'Delete',
+  'upstream.list':'Upstream List',
+  'upstream.list.input':'Please input',
+  'upstream.list.create':'Create',
 };
diff --git a/src/pages/Upstream/locales/zh-CN.ts b/src/pages/Upstream/locales/zh-CN.ts
@@ -3,4 +3,48 @@ export default {
   'menu.upstream.list': '列表',
   'menu.upstream.create': '创建上游',
   'menu.upstream.edit': '编辑上游',
+
+  'upstream.step.backend.server.domain.or.ip':'后端服务域名/IP',
+  'upstream.step.domain.name.default.analysis':'使用域名时，默认解析本地 /etc/resolv.conf；权重为0则熔断该节点',
+  'upstream.step.input.domain.name.or.ip':'请输入域名/IP',
+  'upstream.step.domain.name.or.ip.rule':'仅支持字母、数字和 . ',
+  'upstream.step.domain.name.or.ip':'域名/IP',
+  'upstream.step.input.port':'请输入端口号',
+  'upstream.step.port':'端口号',
+  'upstream.step.input.weight':'请输入权重',
+  'upstream.step.weight':'权重',
+  'upstream.step.create':'创建',
+  'upstream.step.name':'名称',
+  'upstream.step.name.should.unique':'名称需全局唯一',
+  'upstream.step.input.upstream.name':'请输入上游名称',
+  'upstream.step.description':'描述',
+  'upstream.step.input.description':'请输入描述',
+  'upstream.step.type':'类型',
+  'upstream.step.connect.timeout':'连接超时',
+  'upstream.step.input.connect.timeout':'请输入连接超时时间',
+  'upstream.step.send.timeout':'发送超时',
+  'upstream.step.input.send.timeout':'请输入发送超时时间',
+  'upstream.step.receive.timeout':'接收超时',
+  'upstream.step.input.receive.timeout':'请输入接收超时时间',
+
+  'upstream.create.edit':'编辑',
+  'upstream.create.create':'创建',
+  'upstream.create.upstream.successfully':'上游成功',
+  'upstream.create.basic.info':'基础信息',
+  'upstream.create.preview':'预览',
+
+  'upstream.list.name':'名称',
+  'upstream.list.type':'类型',
+  'upstream.list.description':'描述',
+  'upstream.list.edit.time':'编辑时间',
+  'upstream.list.operation':'操作',
+  'upstream.list.edit':'编辑',
+  'upstream.list.confirm.delete':'确定删除该条记录吗？',
+  'upstream.list.confirm':'确定',
+  'upstream.list.cancel':'取消',
+  'upstream.list.delete.successfully':'删除记录成功',
+  'upstream.list.delete':'删除',
+  'upstream.list':'上游列表',
+  'upstream.list.input':'请输入',
+  'upstream.list.create':'创建',
 };