feat(i18n): route module

src/pages/Route/Create.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Steps, Form } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { useIntl } from 'umi';
 
 import ActionBar from '@/components/ActionBar';
 import PluginPage from '@/components/PluginPage';
@@ -64,6 +65,8 @@ const Page: React.FC<Props> = (props) => {
       setStep3Data(data.step3Data);
     });
 
+  const { formatMessage } = useIntl();
+
   useEffect(() => {
     if (props.route.path.indexOf('edit') !== -1) {
       setupRoute(props.match.params.rid);
@@ -208,7 +211,7 @@ const Page: React.FC<Props> = (props) => {
 
   return (
     <>
-      <PageHeaderWrapper title="路由管理">
+      <PageHeaderWrapper title={formatMessage({ id: 'route.create.management' })}>
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>
             {stepHeader.map((item) => (

src/pages/Route/List.tsx

@@ -5,20 +5,22 @@ import { Button, Popconfirm, notification, Tag, Input } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 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<RouteModule.BaseData>[] = [
     {
-      title: '名称',
+      title: formatMessage({ id: 'route.list.name' }),
       dataIndex: 'name',
     },
     {
-      title: '域名',
+      title: formatMessage({ id: 'route.list.domain.name' }),
       dataIndex: 'hosts',
       render: (_, record) =>
         record.hosts.map((host) => (
@@ -28,7 +30,7 @@ const Page: React.FC = () => {
         )),
     },
     {
-      title: '路径',
+      title: formatMessage({ id: 'route.list.path' }),
       dataIndex: 'uri',
       render: (_, record) =>
         record.uris.map((uri) => (
@@ -42,16 +44,16 @@ const Page: React.FC = () => {
     //   dataIndex: 'priority',
     // },
     {
-      title: '描述',
+      title: formatMessage({ id: 'route.list.description' }),
       dataIndex: 'description',
     },
     {
-      title: '更新时间',
+      title: formatMessage({ id: 'route.list.edit.time' }),
       dataIndex: 'update_time',
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: '操作',
+      title: formatMessage({ id: 'route.list.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -60,22 +62,22 @@ const Page: React.FC = () => {
             onClick={() => history.push(`/routes/${record.id}/edit`)}
             style={{ marginRight: 10 }}
           >
-            编辑
+            {formatMessage({ id: 'route.list.edit' })}
           </Button>
           <Popconfirm
-            title="确定删除该路由吗？"
+            title={formatMessage({ id: 'route.list.delete.confrim' })}
             onConfirm={() => {
               remove(record.id!).then(() => {
-                notification.success({ message: '删除记录成功' });
+                notification.success({ message: formatMessage({ id: 'route.list.delete.success' }) });
                 /* eslint-disable no-unused-expressions */
                 ref.current?.reload();
               });
             }}
-            okText="确定"
-            cancelText="取消"
+            okText={formatMessage({ id: 'route.list.confirm' })}
+            cancelText={formatMessage({ id: 'route.list.cancel' })}
           >
             <Button type="primary" danger>
-              删除
+            {formatMessage({ id: 'route.list.delete' })}
             </Button>
           </Popconfirm>
         </>
@@ -84,7 +86,7 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title="路由列表">
+    <PageHeaderWrapper title={formatMessage({ id: 'route.list' })}>
       <ProTable<RouteModule.BaseData>
         actionRef={ref}
         rowKey="name"
@@ -93,7 +95,7 @@ const Page: React.FC = () => {
         request={(params) => fetchList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder="请输入"
+            placeholder={formatMessage({ id: 'route.list.input' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -102,7 +104,7 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push('/routes/create')}>
             <PlusOutlined />
-            创建
+            {formatMessage({ id: 'route.list.create' })}
           </Button>,
         ]}
       />

src/pages/Route/components/CreateStep4/CreateStep4.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormInstance } from 'antd/lib/form';
+import { useIntl } from 'umi';
 
 import PluginPage from '@/components/PluginPage';
 
@@ -17,15 +18,18 @@ const style = {
 };
 
 const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, ...rest }) => {
+
+  const { formatMessage } = useIntl();
+
   return (
     <>
-      <h2>定义 API 请求</h2>
+      <h2>{formatMessage({ id: 'route.create.define.api.request' })}</h2>
       <Step1 {...rest} form={form1} disabled />
       {!redirect && (
         <>
-          <h2 style={style}>定义 API 后端服务</h2>
+          <h2 style={style}>{formatMessage({ id: 'route.create.define.api.backend.server' })}</h2>
           <Step2 {...rest} form={form2} disabled />
-          <h2 style={style}>插件配置</h2>
+          <h2 style={style}>{formatMessage({ id: 'route.create.plugin.configuration' })}</h2>
           <PluginPage data={rest.data.step3Data.plugins} disabled />
         </>
       )}

src/pages/Route/components/ResultView/ResultView.tsx

@@ -1,24 +1,30 @@
 import React from 'react';
 import { Result, Button } from 'antd';
-import { history } from 'umi';
+import { history, useIntl } from 'umi';
 
 type Props = {
   onReset?(): void;
 };
 
-const ResultView: React.FC<Props> = () => (
-  <Result
+const ResultView: React.FC<Props> = () => {
+
+  const { formatMessage } = useIntl();
+
+  return(
+    <Result
     status="success"
-    title="提交成功"
+    title={formatMessage({ id: 'route.result.submit.success' })}
     extra={[
       <Button type="primary" key="goto-list" onClick={() => history.replace('/routes/list')}>
-        返回路由列表
+        {formatMessage({ id: 'route.result.return.list' })}
       </Button>,
       <Button key="create-new" onClick={() => history.replace('/routes/create')}>
-        创建新路由
+        {formatMessage({ id: 'route.result.create' })}
       </Button>,
     ]}
   />
-);
+  );
+
+};
 
 export default ResultView;