You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/09/28 05:23:03 UTC

[apisix-dashboard] branch master updated: fix: improve i18n (#522)

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new 2521a42  fix: improve  i18n (#522)
2521a42 is described below

commit 2521a4201fab60b714e72d3f0136d9e613b505e0
Author: liuxiran <be...@126.com>
AuthorDate: Mon Sep 28 13:22:52 2020 +0800

    fix: improve  i18n (#522)
    
    * fix(i18n): modify pluginPage i18n refer to Proposal (#331)
    
    * fix(i18n): modify global i18n refer to Proposal (#331)
    
    * fix(i18n): modify consumer page i18n refer to Proposal (#331)
    
    * fix(i18n): modify pluginPage i18n refer to Proposal (#331)
    
    * fix(i18n): modify page route i18n refer to Proposal (#331)
    
    * fix(i18n): update route i18n
    
    * fix(i18n): modify page routegroup i18n refer to Proposal
    
    * fix(i18n): modify page ssl i18n refer to Proposal
    
    * fix: update refer to the lint
---
 src/components/ActionBar/ActionBar.tsx             |   2 +-
 src/locales/en-US/component.ts                     |  39 +++-
 src/locales/zh-CN/component.ts                     |  35 +++-
 src/pages/Consumer/Create.tsx                      |  28 ++-
 src/pages/Consumer/List.tsx                        |  32 +--
 src/pages/Consumer/components/Step1.tsx            |  19 +-
 src/pages/Consumer/locales/en-US.ts                |  34 +---
 src/pages/Consumer/locales/zh-CN.ts                |  34 +---
 src/pages/Metrics/Metrics.tsx                      |  10 +-
 src/pages/Metrics/locales/en-US.ts                 |   5 +-
 src/pages/Metrics/locales/zh-CN.ts                 |   5 +-
 src/pages/Route/Create.tsx                         |  20 +-
 src/pages/Route/List.tsx                           |  84 +++++---
 .../Route/components/CreateStep4/CreateStep4.tsx   |   6 +-
 .../Route/components/ResultView/ResultView.tsx     |  10 +-
 .../Route/components/Step1/MatchingRulesView.tsx   | 104 ++++++----
 src/pages/Route/components/Step1/MetaView.tsx      |  47 +++--
 .../Route/components/Step1/RequestConfigView.tsx   |  60 ++++--
 .../components/Step2/HttpHeaderRewriteView.tsx     |  60 +++---
 .../Route/components/Step2/RequestRewriteView.tsx  |  94 +++++----
 src/pages/Route/locales/en-US.ts                   | 213 +++++++-------------
 src/pages/Route/locales/zh-CN.ts                   | 219 +++++++--------------
 src/pages/RouteGroup/Create.tsx                    |  22 ++-
 src/pages/RouteGroup/List.tsx                      |  32 +--
 src/pages/RouteGroup/components/Step1.tsx          |  10 +-
 src/pages/RouteGroup/locales/en-US.ts              |  28 +--
 src/pages/RouteGroup/locales/zh-CN.ts              |  28 +--
 src/pages/SSL/Create.tsx                           |  18 +-
 src/pages/SSL/List.tsx                             |  34 ++--
 src/pages/SSL/components/CertificateForm/index.tsx |  30 ++-
 .../SSL/components/CertificateUploader/index.tsx   |   7 +-
 src/pages/SSL/components/Step1/index.tsx           |  14 +-
 src/pages/SSL/locales/en-US.ts                     |  50 ++---
 src/pages/SSL/locales/zh-CN.ts                     |  48 ++---
 34 files changed, 742 insertions(+), 739 deletions(-)

diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx
index 4337389..ad2613e 100644
--- a/src/components/ActionBar/ActionBar.tsx
+++ b/src/components/ActionBar/ActionBar.tsx
@@ -61,7 +61,7 @@ const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView }
           <Button type="primary" onClick={() => onChange(step + 1)}>
             {step < lastStep
               ? formatMessage({ id: 'component.actionbar.button.nextStep' })
-              : formatMessage({ id: 'component.global.button.submit' })}
+              : formatMessage({ id: 'component.global.submit' })}
           </Button>
         </Col>
       </Row>
diff --git a/src/locales/en-US/component.ts b/src/locales/en-US/component.ts
index 85b2a4b..6e8b5d9 100644
--- a/src/locales/en-US/component.ts
+++ b/src/locales/en-US/component.ts
@@ -18,20 +18,53 @@ export default {
   'component.tagSelect.expand': 'Expand',
   'component.tagSelect.collapse': 'Collapse',
   'component.tagSelect.all': 'All',
-  'component.global.remove': 'Remove',
+  'component.global.confirm': 'Confirm',
+  'component.global.delete': 'Delete',
   'component.global.cancel': 'Cancel',
-  'component.global.button.submit': 'Submit',
+  'component.global.submit': 'Submit',
   'component.global.create': 'Create',
   'component.global.add': 'Add',
   'component.global.save': 'Save',
   'component.global.edit': 'Edit',
-  'component.global.action': 'Action',
   'component.global.update': 'Update',
   'component.global.get': 'Get',
   'component.global.edit.plugin': 'Edit plugin',
   'component.global.loading': 'Loading',
+  'component.global.list': 'List',
+  'component.global.description': 'Description',
+  'component.global.operation': 'Operation',
   'component.status.success': 'Successfully',
   'component.status.fail': 'Failed',
+  'component.global.popconfirm.title.delete': 'Are you sure to delete this record ?',
+  'component.global.notification.success.messaage.deleteSuccess': 'Deleted Successfully',
+
+  'component.global.steps.stepTitle.basicInformation': 'Basic Information',
+  'component.global.steps.stepTitle.preview': 'Preview',
+  'component.global.steps.stepTitle.pluginConfig': 'Plugin Config',
+
+  'component.global.pleaseEnter': 'Please Eneter',
+  'component.global.pleaseChoose': 'Please Choose',
+  'component.global.pleaseCheck': 'Please Check',
+
+  'component.global.input.ruleMessage.name':
+    'Only letters, numbers, - and _ are supported, and can only begin with letters',
+
+  'component.global.connectionTimeout': 'Connection Timeout',
+  'component.global.sendTimeout': 'Send Timeout',
+  'component.global.receiveTimeout': 'Receive Timeout',
+  'component.global.name': 'Name',
+  'component.global.editTime': 'Edit Time',
+  'component.global.form.itemExtraMessage.nameGloballyUnique': 'Name should be globally unique',
+  'component.global.input.placeholder.description': 'Can not more than 200 characters',
+  // User component
+  'component.user.loginByPassword': 'Username & Password',
+  'component.user.login': 'Login',
+  'component.user.username': 'Username',
+  'component.user.password': 'Password',
+  'component.user.rememberMe': 'Remember Me',
+  'component.user.inputUsername': 'Please input username!',
+  'component.user.inputPassword': 'Please input password!',
+  'component.user.wrongUsernameOrPassword': 'Wrong account or password!',
   // SSL Module
   'component.ssl.removeSSLItemModalContent': 'You are going to remove this item!',
   'component.ssl.removeSSLItemModalTitle': 'SSL Remove Alert',
diff --git a/src/locales/zh-CN/component.ts b/src/locales/zh-CN/component.ts
index 0e4f487..8a9dec3 100644
--- a/src/locales/zh-CN/component.ts
+++ b/src/locales/zh-CN/component.ts
@@ -18,20 +18,49 @@ export default {
   'component.tagSelect.expand': '展开',
   'component.tagSelect.collapse': '收起',
   'component.tagSelect.all': '全部',
-  'component.global.remove': '删除',
+  'component.global.confirm': '确认',
+  'component.global.delete': '删除',
   'component.global.cancel': '取消',
-  'component.global.button.submit': '提交',
+  'component.global.submit': '提交',
   'component.global.create': '创建',
   'component.global.add': '新建',
   'component.global.save': '保存',
   'component.global.edit': '编辑',
-  'component.global.action': '操作',
   'component.global.update': '更新',
   'component.global.get': '获取',
   'component.global.edit.plugin': '编辑插件',
   'component.global.loading': '加载中',
+  'component.global.list': '列表',
+  'component.global.description': '描述',
+  'component.global.operation': '操作',
   'component.status.success': '成功',
   'component.status.fail': '失败',
+  'component.global.pleaseEnter': '请输入',
+  'component.global.pleaseChoose': '请选择',
+  'component.global.pleaseCheck': '请检查',
+  'component.global.connectionTimeout': '连接超时时间',
+  'component.global.sendTimeout': '发送超时时间',
+  'component.global.receiveTimeout': '接收超时时间',
+  'component.global.name': '名称',
+  'component.global.editTime': '编辑时间',
+
+  'component.global.popconfirm.title.delete': '确定删除该条记录吗?',
+  'component.global.steps.stepTitle.basicInformation': '基础信息',
+  'component.global.steps.stepTitle.preview': '预览',
+  'component.global.steps.stepTitle.pluginConfig': '插件配置',
+  'component.global.input.ruleMessage.name': '仅支持字母、数字、- 和 _,且只能以字母开头',
+  'component.global.form.itemExtraMessage.nameGloballyUnique': '名称需全局唯一',
+  'component.global.input.placeholder.description': '不超过 200 个字符',
+
+  // User component
+  'component.user.loginByPassword': '账号密码登录',
+  'component.user.login': '登录',
+  'component.user.username': '账号',
+  'component.user.password': '密码',
+  'component.user.rememberMe': '自动登录',
+  'component.user.inputUsername': '请输入账号!',
+  'component.user.inputPassword': '请输入密码!',
+  'component.user.wrongUsernameOrPassword': '账号或密码错误!',
   // SSL Module
   'component.ssl.removeSSLItemModalContent': '确定要删除该项吗?',
   'component.ssl.removeSSLItemModalTitle': '删除 SSL',
diff --git a/src/pages/Consumer/Create.tsx b/src/pages/Consumer/Create.tsx
index f6ca8ae..7fd661f 100644
--- a/src/pages/Consumer/Create.tsx
+++ b/src/pages/Consumer/Create.tsx
@@ -51,9 +51,11 @@ const Page: React.FC = (props) => {
         notification.success({
           message: `${
             id
-              ? formatMessage({ id: 'consumer.create.edit' })
-              : formatMessage({ id: 'consumer.create.create' })
-          } Consumer ${formatMessage({ id: 'consumer.create.success' })}`,
+              ? formatMessage({ id: 'component.global.edit' })
+              : formatMessage({ id: 'component.global.create' })
+          } ${formatMessage({ id: 'menu.consumer' })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,
         });
         history.push('/consumer/list');
       })
@@ -77,7 +79,9 @@ const Page: React.FC = (props) => {
       const currentAuthPluginLen = currentAuthPlugin.length;
       if (currentAuthPluginLen > 1 || currentAuthPluginLen === 0) {
         notification.warning({
-          message: formatMessage({ id: 'consumer.create.enable.authentication.plugin' }),
+          message: formatMessage({
+            id: 'page.consumer.notification.warning.enableAuthenticationPlugin',
+          }),
         });
         return;
       }
@@ -94,15 +98,19 @@ const Page: React.FC = (props) => {
       <PageContainer
         title={`${
           (props as any).match.params.id
-            ? formatMessage({ id: 'consumer.create.edit' })
-            : formatMessage({ id: 'consumer.create.create' })
-        } Consumer`}
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        } ${formatMessage({ id: 'menu.consumer' })}`}
       >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>
-            <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
+              title={formatMessage({ id: 'component.global.steps.stepTitle.basicInformation' })}
+            />
+            <Steps.Step
+              title={formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}
+            />
+            <Steps.Step title={formatMessage({ id: 'component.global.steps.stepTitle.preview' })} />
           </Steps>
 
           {step === 1 && <Step1 form={form1} />}
diff --git a/src/pages/Consumer/List.tsx b/src/pages/Consumer/List.tsx
index cf25f6e..b382bc5 100644
--- a/src/pages/Consumer/List.tsx
+++ b/src/pages/Consumer/List.tsx
@@ -31,20 +31,20 @@ const Page: React.FC = () => {
 
   const columns: ProColumns<ConsumerModule.ResEntity>[] = [
     {
-      title: formatMessage({ id: 'consumer.list.username' }),
+      title: formatMessage({ id: 'page.consumer.username' }),
       dataIndex: 'username',
     },
     {
-      title: formatMessage({ id: 'consumer.list.description' }),
+      title: formatMessage({ id: 'component.global.description' }),
       dataIndex: 'desc',
     },
     {
-      title: formatMessage({ id: 'consumer.list.update.time' }),
+      title: formatMessage({ id: 'page.consumer.updateTime' }),
       dataIndex: 'update_time',
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: formatMessage({ id: 'consumer.list.operation' }),
+      title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -53,16 +53,18 @@ const Page: React.FC = () => {
             style={{ marginRight: 10 }}
             onClick={() => history.push(`/consumer/${record.id}/edit`)}
           >
-            {formatMessage({ id: 'consumer.list.edit' })}
+            {formatMessage({ id: 'component.global.edit' })}
           </Button>
           <Popconfirm
-            title={formatMessage({ id: 'consumer.list.delete.confirm' })}
-            okText={formatMessage({ id: 'consumer.list.confirm' })}
-            cancelText={formatMessage({ id: 'consumer.list.cancel' })}
+            title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
+            okText={formatMessage({ id: 'component.global.confirm' })}
+            cancelText={formatMessage({ id: 'component.global.cancel' })}
             onConfirm={() => {
               remove(record.id).then(() => {
                 notification.success({
-                  message: formatMessage({ id: 'consumer.list.delete.success' }),
+                  message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
+                    id: 'menu.consumer',
+                  })} ${formatMessage({ id: 'component.status.success' })}`,
                 });
                 /* eslint-disable no-unused-expressions */
                 ref.current?.reload();
@@ -70,7 +72,7 @@ const Page: React.FC = () => {
             }}
           >
             <Button type="primary" danger>
-              {formatMessage({ id: 'consumer.list.delete' })}
+              {formatMessage({ id: 'component.global.delete' })}
             </Button>
           </Popconfirm>
         </>
@@ -79,7 +81,11 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageContainer title={formatMessage({ id: 'consumer.list' })}>
+    <PageContainer
+      title={`${formatMessage({ id: 'menu.consumer' })} ${formatMessage({
+        id: 'component.global.list',
+      })}`}
+    >
       <ProTable<ConsumerModule.ResEntity>
         actionRef={ref}
         columns={columns}
@@ -88,7 +94,7 @@ const Page: React.FC = () => {
         request={(params) => fetchList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder={formatMessage({ id: 'consumer.list.input' })}
+            placeholder={formatMessage({ id: 'component.global.pleaseEnter' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -97,7 +103,7 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push('/consumer/create')}>
             <PlusOutlined />
-            {formatMessage({ id: 'consumer.list.create' })}
+            {formatMessage({ id: 'component.global.create' })}
           </Button>,
         ]}
       />
diff --git a/src/pages/Consumer/components/Step1.tsx b/src/pages/Consumer/components/Step1.tsx
index f4afcdf..948de14 100644
--- a/src/pages/Consumer/components/Step1.tsx
+++ b/src/pages/Consumer/components/Step1.tsx
@@ -38,24 +38,31 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
   return (
     <Form {...FORM_LAYOUT} form={form}>
       <Form.Item
-        label={formatMessage({ id: 'consumer.step.username' })} 
+        label={formatMessage({ id: 'page.consumer.username' })}
         name="username"
         rules={[
           { required: true },
           {
             pattern: new RegExp(/^[a-zA-Z][a-zA-Z0-9_]{0,100}$/, 'g'),
-            message: formatMessage({ id: 'consumer.step.username.rule' }),
+            message: formatMessage({ id: 'page.consumer.form.itemRuleMessage.username' }),
           },
         ]}
-        extra={formatMessage({ id: 'consumer.step.username.unique' })}
+        extra={formatMessage({ id: 'page.consumer.form.itemExtraMessage.username' })}
       >
         <Input
-          placeholder={formatMessage({ id: 'consumer.step.input.username' })}
+          placeholder={`${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+            id: 'page.consumer.username',
+          })}`}
           disabled={disabled || window.location.pathname.indexOf('edit') !== -1}
         />
       </Form.Item>
-      <Form.Item label={formatMessage({ id: 'consumer.step.description' })}  name="desc">
-        <Input.TextArea placeholder={formatMessage({ id: 'consumer.step.input.description' })} disabled={disabled} />
+      <Form.Item label={formatMessage({ id: 'component.global.description' })} name="desc">
+        <Input.TextArea
+          placeholder={`${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+            id: 'component.global.description',
+          })}`}
+          disabled={disabled}
+        />
       </Form.Item>
     </Form>
   );
diff --git a/src/pages/Consumer/locales/en-US.ts b/src/pages/Consumer/locales/en-US.ts
index 6e2ecf5..5cc5d03 100644
--- a/src/pages/Consumer/locales/en-US.ts
+++ b/src/pages/Consumer/locales/en-US.ts
@@ -15,33 +15,11 @@
  * limitations under the License.
  */
 export default {
-  'consumer.step.username': 'Username',
-  'consumer.step.username.rule':
+  'page.consumer.form.itemRuleMessage.username':
     '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 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': 'Consumer List',
-  'consumer.list.input': 'Please input',
-  'consumer.list.create': 'Create',
+  'page.consumer.form.itemExtraMessage.username': 'Username should be unique',
+  'page.consumer.notification.warning.enableAuthenticationPlugin':
+    'Please enable at least one authentication plugin',
+  'page.consumer.username': 'Username',
+  'page.consumer.updateTime': 'Update Time',
 };
diff --git a/src/pages/Consumer/locales/zh-CN.ts b/src/pages/Consumer/locales/zh-CN.ts
index 005fd0f..d5b2bd9 100644
--- a/src/pages/Consumer/locales/zh-CN.ts
+++ b/src/pages/Consumer/locales/zh-CN.ts
@@ -15,32 +15,10 @@
  * limitations under the License.
  */
 export default {
-  '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': '用户列表',
-  'consumer.list.input': '请输入',
-  'consumer.list.create': '创建',
+  'page.consumer.form.itemRuleMessage.username':
+    '最大长度100,仅支持字母、数字和 _ ,且只能以字母开头',
+  'page.consumer.form.itemExtraMessage.username': '用户名需唯一',
+  'page.consumer.notification.warning.enableAuthenticationPlugin': '请启用至少一种身份认证类插件',
+  'page.consumer.username': '用户名',
+  'page.consumer.updateTime': '更新时间',
 };
diff --git a/src/pages/Metrics/Metrics.tsx b/src/pages/Metrics/Metrics.tsx
index f288a9b..1da0e7f 100644
--- a/src/pages/Metrics/Metrics.tsx
+++ b/src/pages/Metrics/Metrics.tsx
@@ -32,7 +32,7 @@ const Metrics: React.FC = () => {
   }, []);
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'metrics.monitor' })}>
+    <PageHeaderWrapper title={formatMessage({ id: 'menu.metrics' })}>
       <Card>
         {!grafanaURL && (
           <Empty
@@ -40,7 +40,11 @@ const Metrics: React.FC = () => {
             imageStyle={{
               height: 60,
             }}
-            description={<span>{formatMessage({ id: 'metrics.grafana.not.config' })}</span>}
+            description={
+              <span>
+                {formatMessage({ id: 'page.metrics.empty.description.grafanaNotConfig' })}
+              </span>
+            }
           >
             <Button
               type="primary"
@@ -50,7 +54,7 @@ const Metrics: React.FC = () => {
                 });
               }}
             >
-              {formatMessage({ id: 'metrics.grafana.config' })}
+              {formatMessage({ id: 'page.metrics.button.grafanaConfig' })}
             </Button>
           </Empty>
         )}
diff --git a/src/pages/Metrics/locales/en-US.ts b/src/pages/Metrics/locales/en-US.ts
index b673952..7841b7e 100644
--- a/src/pages/Metrics/locales/en-US.ts
+++ b/src/pages/Metrics/locales/en-US.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 export default {
-  'metrics.monitor': 'Monitor',
-  'metrics.grafana.not.config': 'You have not configured Grafana',
-  'metrics.grafana.config': 'Configure Now',
+  'page.metrics.empty.description.grafanaNotConfig': 'You have not configured Grafana',
+  'page.metrics.button.grafanaConfig': 'Configure Now',
 };
diff --git a/src/pages/Metrics/locales/zh-CN.ts b/src/pages/Metrics/locales/zh-CN.ts
index fd60f35..134b1dc 100644
--- a/src/pages/Metrics/locales/zh-CN.ts
+++ b/src/pages/Metrics/locales/zh-CN.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 export default {
-  'metrics.monitor': '监控',
-  'metrics.grafana.not.config': '您还未配置 Grafana',
-  'metrics.grafana.config': '现在配置',
+  'page.metrics.empty.description.grafanaNotConfig': '您还未配置 Grafana',
+  'page.metrics.button.grafanaConfig': '现在配置',
 };
diff --git a/src/pages/Route/Create.tsx b/src/pages/Route/Create.tsx
index 86e2691..f9ff9cb 100644
--- a/src/pages/Route/Create.tsx
+++ b/src/pages/Route/Create.tsx
@@ -49,15 +49,15 @@ const Page: React.FC<Props> = (props) => {
   const { formatMessage } = useIntl();
 
   const STEP_HEADER_2 = [
-    formatMessage({ id: 'route.constants.define.api.request' }),
-    formatMessage({ id: 'route.constants.preview' }),
+    formatMessage({ id: 'page.route.steps.stepTitle.defineApiRequest' }),
+    formatMessage({ id: 'component.global.steps.stepTitle.preview' }),
   ];
 
   const STEP_HEADER_4 = [
-    formatMessage({ id: 'route.constants.define.api.request' }),
-    formatMessage({ id: 'route.constants.define.api.backend.serve' }),
-    formatMessage({ id: 'route.constants.plugin.configuration' }),
-    formatMessage({ id: 'route.constants.preview' }),
+    formatMessage({ id: 'page.route.steps.stepTitle.defineApiRequest' }),
+    formatMessage({ id: 'page.route.steps.stepTitle.defineApiBackendServe' }),
+    formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' }),
+    formatMessage({ id: 'component.global.steps.stepTitle.preview' }),
   ];
 
   const [advancedMatchingRules, setAdvancedMatchingRules] = useState<RouteModule.MatchingRule[]>(
@@ -266,7 +266,13 @@ const Page: React.FC<Props> = (props) => {
 
   return (
     <>
-      <PageHeaderWrapper title={formatMessage({ id: 'route.create.management' })}>
+      <PageHeaderWrapper
+        title={`${
+          (props as any).match.params.rid
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        } ${formatMessage({ id: 'menu.routes' })}`}
+      >
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>
             {stepHeader.map((item) => (
diff --git a/src/pages/Route/List.tsx b/src/pages/Route/List.tsx
index 92d7ac4..8aa7b85 100644
--- a/src/pages/Route/List.tsx
+++ b/src/pages/Route/List.tsx
@@ -31,11 +31,11 @@ const Page: React.FC = () => {
 
   const columns: ProColumns<RouteModule.BaseData>[] = [
     {
-      title: formatMessage({ id: 'route.list.name' }),
+      title: formatMessage({ id: 'component.global.name' }),
       dataIndex: 'name',
     },
     {
-      title: formatMessage({ id: 'route.list.domain.name' }),
+      title: formatMessage({ id: 'page.route.domainName' }),
       dataIndex: 'hosts',
       render: (_, record) =>
         (record.hosts || []).map((host) => (
@@ -45,7 +45,7 @@ const Page: React.FC = () => {
         )),
     },
     {
-      title: formatMessage({ id: 'route.list.path' }),
+      title: formatMessage({ id: 'page.route.path' }),
       dataIndex: 'uri',
       render: (_, record) =>
         record.uris.map((uri) => (
@@ -59,33 +59,33 @@ const Page: React.FC = () => {
     //   dataIndex: 'priority',
     // },
     {
-      title: formatMessage({ id: 'route.list.description' }),
+      title: formatMessage({ id: 'component.global.description' }),
       dataIndex: 'description',
     },
     {
-      title: formatMessage({ id: 'route.list.group.name' }),
+      title: formatMessage({ id: 'page.route.routeGroup' }),
       dataIndex: 'route_group_name',
     },
     {
-      title: formatMessage({ id: 'route.list.status' }),
+      title: formatMessage({ id: 'page.route.status' }),
       dataIndex: 'status',
       render: (_, record) => (
         <>
           {record.status ? (
-            <Tag color="green">{formatMessage({ id: 'route.list.status.publish' })}</Tag>
+            <Tag color="green">{formatMessage({ id: 'page.route.published' })}</Tag>
           ) : (
-            <Tag color="red">{formatMessage({ id: 'route.list.status.offline' })}</Tag>
+            <Tag color="red">{formatMessage({ id: 'page.route.unpublished' })}</Tag>
           )}
         </>
       ),
     },
     {
-      title: formatMessage({ id: 'route.list.edit.time' }),
+      title: formatMessage({ id: 'component.global.editTime' }),
       dataIndex: 'update_time',
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: formatMessage({ id: 'route.list.operation' }),
+      title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -95,7 +95,9 @@ const Page: React.FC = () => {
               onClick={() => {
                 publish(record.id!).then(() => {
                   notification.success({
-                    message: formatMessage({ id: 'route.list.publish.success' }),
+                    message: `${formatMessage({ id: 'page.route.publish' })} ${formatMessage({
+                      id: 'menu.routes',
+                    })} ${formatMessage({ id: 'component.status.success' })}`,
                   });
                   /* eslint-disable no-unused-expressions */
                   ref.current?.reload();
@@ -104,56 +106,80 @@ const Page: React.FC = () => {
               style={{ marginRight: 10 }}
               disabled={record.status}
             >
-              {formatMessage({ id: 'route.list.publish' })}
+              {formatMessage({ id: 'page.route.publish' })}
             </Button>
             <Button
               type="primary"
               onClick={() => history.push(`/routes/${record.id}/edit`)}
               style={{ marginRight: 10 }}
             >
-              {formatMessage({ id: 'route.list.edit' })}
+              {formatMessage({ id: 'component.global.edit' })}
             </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
+                      id: 'menu.routes',
+                    })} ${formatMessage({ id: 'component.status.success' })}`,
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+              okText={formatMessage({ id: 'component.global.confirm' })}
+              cancelText={formatMessage({ id: 'component.global.cancel' })}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'component.global.delete' })}
+              </Button>
+            </Popconfirm>
             <Button
               type="primary"
               onClick={() => history.push(`/routes/${record.id}/debug`)}
               style={{ marginRight: 10 }}
             >
-              {formatMessage({ id: 'route.list.debug' })}
+              {formatMessage({ id: 'page.route.button.onlineDebug' })}
             </Button>
             <Popconfirm
-              title={formatMessage({ id: 'route.list.offline.confirm' })}
+              title={formatMessage({ id: 'page.route.popconfirm.title.offline' })}
               onConfirm={() => {
                 offline(record.id!).then(() => {
                   notification.success({
-                    message: formatMessage({ id: 'route.list.offline.success' }),
+                    message: `${formatMessage({ id: 'menu.routes' })}
+                    ${formatMessage({ id: 'page.route.offline' })}
+                    ${formatMessage({ id: 'component.status.success' })}`,
                   });
                   /* eslint-disable no-unused-expressions */
                   ref.current?.reload();
                 });
               }}
-              okText={formatMessage({ id: 'route.list.offline' })}
-              cancelText={formatMessage({ id: 'route.list.cancel' })}
+              okText={formatMessage({ id: 'component.global.confirm' })}
+              cancelText={formatMessage({ id: 'component.global.cancel' })}
             >
               <Button type="primary" danger disabled={!record.status}>
-                {formatMessage({ id: 'route.list.offline' })}
+                {formatMessage({ id: 'page.route.offline' })}
               </Button>
             </Popconfirm>
             <Popconfirm
-              title={formatMessage({ id: 'route.list.delete.confrim' })}
+              title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
               onConfirm={() => {
                 remove(record.id!).then(() => {
                   notification.success({
-                    message: formatMessage({ id: 'route.list.delete.success' }),
+                    message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
+                      id: 'menu.routes',
+                    })} ${formatMessage({ id: 'component.status.success' })}`,
                   });
                   /* eslint-disable no-unused-expressions */
                   ref.current?.reload();
                 });
               }}
-              okText={formatMessage({ id: 'route.list.confirm' })}
-              cancelText={formatMessage({ id: 'route.list.cancel' })}
+              okText={formatMessage({ id: 'component.global.confirm' })}
+              cancelText={formatMessage({ id: 'component.global.cancel' })}
             >
               <Button type="primary" danger>
-                {formatMessage({ id: 'route.list.delete' })}
+                {formatMessage({ id: 'component.global.delete' })}
               </Button>
             </Popconfirm>
           </Space>
@@ -163,7 +189,11 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'route.list' })}>
+    <PageHeaderWrapper
+      title={`${formatMessage({ id: 'menu.routes' })} ${formatMessage({
+        id: 'component.global.list',
+      })}`}
+    >
       <ProTable<RouteModule.BaseData>
         actionRef={ref}
         rowKey="name"
@@ -172,7 +202,7 @@ const Page: React.FC = () => {
         request={(params) => fetchList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder={formatMessage({ id: 'route.list.input' })}
+            placeholder={formatMessage({ id: 'component.global.pleaseEnter' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -181,7 +211,7 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push('/routes/create')}>
             <PlusOutlined />
-            {formatMessage({ id: 'route.list.create' })}
+            {formatMessage({ id: 'component.global.create' })}
           </Button>,
         ]}
       />
diff --git a/src/pages/Route/components/CreateStep4/CreateStep4.tsx b/src/pages/Route/components/CreateStep4/CreateStep4.tsx
index 6b28150..617cb0a 100644
--- a/src/pages/Route/components/CreateStep4/CreateStep4.tsx
+++ b/src/pages/Route/components/CreateStep4/CreateStep4.tsx
@@ -42,18 +42,18 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, ...rest }) => {
 
   return (
     <>
-      <h2>{formatMessage({ id: 'route.create.define.api.request' })}</h2>
+      <h2>{formatMessage({ id: 'page.route.steps.stepTitle.defineApiRequest' })}</h2>
       <Step1 {...rest} form={form1} disabled />
       {!redirect && (
         <>
-          <h2 style={style}>{formatMessage({ id: 'route.create.define.api.backend.server' })}</h2>
+          <h2 style={style}>{formatMessage({ id: 'page.route.steps.stepTitle.defineApiBackendServe' })}</h2>
           <Step2
             upstreamHeaderList={rest.upstreamHeaderList}
             form={form2}
             disabled
             onChange={() => {}}
           />
-          <h2 style={style}>{formatMessage({ id: 'route.create.plugin.configuration' })}</h2>
+          <h2 style={style}>{formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}</h2>
           {Boolean(Object.keys(plugins).length !== 0) && (
             <PluginPage initialData={rest.step3Data.plugins} readonly />
           )}
diff --git a/src/pages/Route/components/ResultView/ResultView.tsx b/src/pages/Route/components/ResultView/ResultView.tsx
index 9013656..b70e035 100644
--- a/src/pages/Route/components/ResultView/ResultView.tsx
+++ b/src/pages/Route/components/ResultView/ResultView.tsx
@@ -27,13 +27,17 @@ const ResultView: React.FC<Props> = (props) => {
   return (
     <Result
       status="success"
-      title={formatMessage({ id: 'route.result.submit.success' })}
+      title={`${formatMessage({ id: 'component.global.submit' })}${formatMessage({
+        id: 'component.status.success',
+      })}`}
       extra={[
         <Button type="primary" key="goto-list" onClick={() => history.replace('/routes/list')}>
-          {formatMessage({ id: 'route.result.return.list' })}
+          {formatMessage({ id: 'page.route.button.returnList' })}
         </Button>,
         <Button key="create-new" onClick={() => props.createNew()}>
-          {formatMessage({ id: 'route.result.create' })}
+          {`${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'menu.routes',
+          })}`}
         </Button>,
       ]}
     />
diff --git a/src/pages/Route/components/Step1/MatchingRulesView.tsx b/src/pages/Route/components/Step1/MatchingRulesView.tsx
index 5d571c6..5f09d17 100644
--- a/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -76,16 +76,16 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
 
   const columns = [
     {
-      title: formatMessage({ id: 'route.match.parameter.position' }),
+      title: formatMessage({ id: 'page.route.parameterPosition' }),
       key: 'position',
       render: (text: RouteModule.MatchingRule) => {
         let renderText;
         switch (text.position) {
           case 'http':
-            renderText = formatMessage({ id: 'route.match.http.request.header' });
+            renderText = formatMessage({ id: 'page.route.httpRequestHeader' });
             break;
           case 'arg':
-            renderText = formatMessage({ id: 'route.match.request.parameter' });
+            renderText = formatMessage({ id: 'page.route.requestParameter' });
             break;
           case 'cookie':
             renderText = 'Cookie';
@@ -97,30 +97,30 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
       },
     },
     {
-      title: formatMessage({ id: 'route.match.parameter.name' }),
+      title: formatMessage({ id: 'page.route.parameterName' }),
       dataIndex: 'name',
       key: 'name',
     },
     {
-      title: formatMessage({ id: 'route.match.operational.character' }),
+      title: formatMessage({ id: 'page.route.operationalCharacter' }),
       key: 'operator',
       render: (text: RouteModule.MatchingRule) => {
         let renderText;
         switch (text.operator) {
           case '==':
-            renderText = formatMessage({ id: 'route.match.equal' });
+            renderText = formatMessage({ id: 'page.route.equal' });
             break;
           case '~=':
-            renderText = formatMessage({ id: 'route.match.unequal' });
+            renderText = formatMessage({ id: 'page.route.unequal' });
             break;
           case '>':
-            renderText = formatMessage({ id: 'route.match.greater.than' });
+            renderText = formatMessage({ id: 'page.route.greaterThan' });
             break;
           case '<':
-            renderText = formatMessage({ id: 'route.match.less.than' });
+            renderText = formatMessage({ id: 'page.route.lessThan' });
             break;
           case '~~':
-            renderText = formatMessage({ id: 'route.match.regex.match' });
+            renderText = formatMessage({ id: 'page.route.regexMatch' });
             break;
           default:
             renderText = '';
@@ -129,20 +129,22 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
       },
     },
     {
-      title: formatMessage({ id: 'route.match.parameter.value' }),
+      title: formatMessage({ id: 'page.route.value' }),
       dataIndex: 'value',
       key: 'value',
     },
     disabled
       ? {}
       : {
-          title: formatMessage({ id: 'route.match.operation' }),
+          title: formatMessage({ id: 'component.global.operation' }),
           key: 'action',
           render: (_: any, record: RouteModule.MatchingRule) => (
             <Space size="middle">
-              <a onClick={() => handleEdit(record)}>{formatMessage({ id: 'route.match.edit' })}</a>
+              <a onClick={() => handleEdit(record)}>
+                {formatMessage({ id: 'component.global.edit' })}
+              </a>
               <a onClick={() => handleRemove(record.key)}>
-                {formatMessage({ id: 'route.match.delete' })}
+                {formatMessage({ id: 'component.global.delete' })}
               </a>
             </Space>
           ),
@@ -151,11 +153,11 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
 
   const renderModal = () => (
     <Modal
-      title={
+      title={`${
         mode === 'EDIT'
-          ? formatMessage({ id: 'route.match.edit.rule' })
-          : formatMessage({ id: 'route.match.create.rule' })
-      }
+          ? formatMessage({ id: 'component.global.edit' })
+          : formatMessage({ id: 'component.global.create' })
+      } ${formatMessage({ id: 'page.route.rule' })}`}
       centered
       visible
       onOk={onOk}
@@ -163,72 +165,92 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
         setVisible(false);
         modalForm.resetFields();
       }}
-      okText={formatMessage({ id: 'route.match.confirm' })}
-      cancelText={formatMessage({ id: 'route.match.cancel' })}
+      okText={formatMessage({ id: 'component.global.confirm' })}
+      cancelText={formatMessage({ id: 'component.global.cancel' })}
       destroyOnClose
     >
       <Form form={modalForm} labelCol={{ span: 4 }}>
         <Form.Item
-          label={formatMessage({ id: 'route.match.parameter.position' })}
+          label={formatMessage({ id: 'page.route.parameterPosition' })}
           name="position"
           rules={[
             {
               required: true,
-              message: formatMessage({ id: 'route.match.select.parameter.position' }),
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                id: 'page.route.parameterPosition',
+              })}`,
             },
           ]}
         >
           <Select
             onChange={(value) => {
               if (value === 'http') {
-                setNamePlaceholder(formatMessage({ id: 'route.match.request.header.example' }));
+                setNamePlaceholder(
+                  formatMessage({ id: 'page.route.input.placeholder.parameterNameHttpHeader' }),
+                );
               } else {
-                setNamePlaceholder(formatMessage({ id: 'route.match.parameter.name.example' }));
+                setNamePlaceholder(
+                  formatMessage({
+                    id: 'page.route.input.placeholder.parameterNameRequestParameter',
+                  }),
+                );
               }
             }}
           >
-            <Option value="http">{formatMessage({ id: 'route.match.http.request.header' })}</Option>
-            <Option value="arg">{formatMessage({ id: 'route.match.request.parameter' })}</Option>
+            <Option value="http">{formatMessage({ id: 'page.route.httpRequestHeader' })}</Option>
+            <Option value="arg">{formatMessage({ id: 'page.route.requestParameter' })}</Option>
             <Option value="cookie">Cookie</Option>
           </Select>
         </Form.Item>
         <Form.Item
-          label={formatMessage({ id: 'route.match.parameter.name' })}
+          label={formatMessage({ id: 'page.route.parameterName' })}
           name="name"
           rules={[
-            { required: true, message: formatMessage({ id: 'route.match.input.parameter.name' }) },
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                id: 'page.route.parameterName',
+              })}`,
+            },
             {
               pattern: new RegExp(/^([a-zA-Z][a-zA-Z0-9_-]*$)/, 'g'),
-              message: formatMessage({ id: 'route.match.parameter.name.rule' }),
+              message: formatMessage({ id: 'component.global.input.ruleMessage.name' }),
             },
           ]}
-          extra={formatMessage({ id: 'route.match.rule' })}
+          extra={formatMessage({ id: 'page.route.form.itemRulesRequiredMessage.parameterName' })}
         >
           <Input placeholder={namePlaceholder} />
         </Form.Item>
         <Form.Item
-          label={formatMessage({ id: 'route.match.operational.character' })}
+          label={formatMessage({ id: 'page.route.operationalCharacter' })}
           name="operator"
           rules={[
             {
               required: true,
-              message: formatMessage({ id: 'route.match.choose.operational.character' }),
+              message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
+                id: 'page.route.operationalCharacter',
+              })}`,
             },
           ]}
         >
           <Select>
-            <Option value="==">{formatMessage({ id: 'route.match.equal' })}</Option>
-            <Option value="~=">{formatMessage({ id: 'route.match.unequal' })}</Option>
-            <Option value=">">{formatMessage({ id: 'route.match.greater.than' })}</Option>
-            <Option value="<">{formatMessage({ id: 'route.match.less.than' })}</Option>
-            <Option value="~~">{formatMessage({ id: 'route.match.regex.match' })}</Option>
+            <Option value="==">{formatMessage({ id: 'page.route.equal' })}</Option>
+            <Option value="~=">{formatMessage({ id: 'page.route.unequal' })}</Option>
+            <Option value=">">{formatMessage({ id: 'page.route.greaterThan' })}</Option>
+            <Option value="<">{formatMessage({ id: 'page.route.lessThan' })}</Option>
+            <Option value="~~">{formatMessage({ id: 'page.route.regexMatch' })}</Option>
           </Select>
         </Form.Item>
         <Form.Item
-          label={formatMessage({ id: 'route.match.value' })}
+          label={formatMessage({ id: 'page.route.value' })}
           name="value"
           rules={[
-            { required: true, message: formatMessage({ id: 'route.match.input.parameter.value' }) },
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                id: 'page.route.value',
+              })}`,
+            },
           ]}
         >
           <Input />
@@ -238,7 +260,7 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   );
 
   return (
-    <PanelSection title={formatMessage({ id: 'route.match.advanced.match.rule' })}>
+    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })}>
       {!disabled && (
         <Button
           onClick={() => {
@@ -250,7 +272,7 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
             marginBottom: 16,
           }}
         >
-          {formatMessage({ id: 'route.match.create' })}
+          {formatMessage({ id: 'component.global.create' })}
         </Button>
       )}
       <Table key="table" bordered dataSource={advancedMatchingRules} columns={columns} />
diff --git a/src/pages/Route/components/Step1/MetaView.tsx b/src/pages/Route/components/Step1/MetaView.tsx
index 4c87fc4..6c85339 100644
--- a/src/pages/Route/components/Step1/MetaView.tsx
+++ b/src/pages/Route/components/Step1/MetaView.tsx
@@ -32,32 +32,44 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ form, disabled, isEdit
     // eslint-disable-next-line no-shadow
     fetchRouteGroupList().then(({ data }) => {
       setRouteGroups([
-        { name: formatMessage({ id: 'route.meta.api.create.group.name' }), id: null },
+        {
+          name: `${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'page.route.routeGroup',
+          })}`,
+          id: null,
+        },
         ...data,
       ]);
     });
   }, []);
 
   return (
-    <PanelSection title={formatMessage({ id: 'route.meta.name.description' })}>
+    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.nameDescription' })}>
       <Form.Item
-        label={formatMessage({ id: 'route.meta.api.name' })}
+        label={formatMessage({ id: 'component.global.name' })}
         name="name"
         rules={[
-          { required: true, message: formatMessage({ id: 'route.meta.input.api.name' }) },
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+              id: 'page.route.form.itemLabel.apiName',
+            })}`,
+          },
           {
             pattern: new RegExp(/^[a-zA-Z][a-zA-Z0-9_-]{0,100}$/, 'g'),
-            message: formatMessage({ id: 'route.meta.api.name.rule' }),
+            message: formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' }),
           },
         ]}
-        extra={formatMessage({ id: 'rotue.meta.api.rule' })}
+        extra={formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' })}
       >
         <Input
-          placeholder={formatMessage({ id: 'route.meta.input.api.name' })}
+          placeholder={`${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+            id: 'page.route.form.itemLabel.apiName',
+          })}`}
           disabled={disabled}
         />
       </Form.Item>
-      <Form.Item label={formatMessage({ id: 'route.meta.api.group.name' })} name="route_group_id">
+      <Form.Item label={formatMessage({ id: 'page.route.routeGroup' })} name="route_group_id">
         <Select
           onChange={(value) => {
             if (!value) {
@@ -87,20 +99,27 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ form, disabled, isEdit
         </Select>
       </Form.Item>
       <Form.Item
-        label={formatMessage({ id: 'route.meta.group.name' })}
+        label={formatMessage({ id: 'page.route.groupName' })}
         name="route_group_name"
         rules={[
-          { required: true, message: formatMessage({ id: 'route.meta.input.api.group.name' }) },
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })}${formatMessage({
+              id: 'page.route.form.itemLable.routeGroup',
+            })}`,
+          },
         ]}
       >
         <Input
-          placeholder={formatMessage({ id: 'route.meta.input.api.group.name' })}
+          placeholder={`${formatMessage({ id: 'component.global.pleaseEnter' })}${formatMessage({
+            id: 'page.route.form.itemLable.routeGroup',
+          })}`}
           disabled={routeGroupDisabled}
         />
       </Form.Item>
       {!isEdit && (
         <Form.Item
-          label={formatMessage({ id: 'route.list.publish' })}
+          label={formatMessage({ id: 'page.route.publish' })}
           name="status"
           valuePropName="checked"
           help={formatMessage({ id: 'page.route.form.itemHelp.status' })}
@@ -108,9 +127,9 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ form, disabled, isEdit
           <Switch disabled={disabled} />
         </Form.Item>
       )}
-      <Form.Item label={formatMessage({ id: 'route.meta.description' })} name="desc">
+      <Form.Item label={formatMessage({ id: 'component.global.description' })} name="desc">
         <Input.TextArea
-          placeholder={formatMessage({ id: 'route.meta.description.rule' })}
+          placeholder={formatMessage({ id: 'component.global.input.placeholder.description' })}
           disabled={disabled}
         />
       </Form.Item>
diff --git a/src/pages/Route/components/Step1/RequestConfigView.tsx b/src/pages/Route/components/Step1/RequestConfigView.tsx
index 236e4e6..ea707fb 100644
--- a/src/pages/Route/components/Step1/RequestConfigView.tsx
+++ b/src/pages/Route/components/Step1/RequestConfigView.tsx
@@ -41,10 +41,12 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
             {fields.map((field, index) => (
               <Form.Item
                 {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
-                label={index === 0 ? formatMessage({ id: 'route.request.config.domain.name' }) : ''}
+                label={index === 0 ? formatMessage({ id: 'page.route.domainName' }) : ''}
                 key={field.key}
                 extra={
-                  index === 0 ? formatMessage({ id: 'route.request.config.domain.or.ip' }) : ''
+                  index === 0
+                    ? formatMessage({ id: 'page.route.form.itemExtraMessage.domain' })
+                    : ''
                 }
               >
                 <Form.Item
@@ -53,13 +55,17 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                   rules={[
                     {
                       pattern: new RegExp(/(^\*?[a-zA-Z0-9._-]+$|^\*$)/, 'g'),
-                      message: formatMessage({ id: 'route.request.config.domain.name.rule' }),
+                      message: formatMessage({
+                        id: 'page.route.form.itemRulesPatternMessage.domain',
+                      }),
                     },
                   ]}
                   noStyle
                 >
                   <Input
-                    placeholder={formatMessage({ id: 'route.request.config.input.domain.name' })}
+                    placeholder={`${formatMessage({
+                      id: 'component.global.pleaseEnter',
+                    })} ${formatMessage({ id: 'page.route.domainName' })}`}
                     style={{ width: '60%' }}
                     disabled={disabled}
                   />
@@ -83,7 +89,7 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                     add();
                   }}
                 >
-                  <PlusOutlined /> {formatMessage({ id: 'route.request.config.create' })}
+                  <PlusOutlined /> {formatMessage({ id: 'component.global.create' })}
                 </Button>
               </Form.Item>
             )}
@@ -101,15 +107,15 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
             {fields.map((field, index) => (
               <Form.Item
                 {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
-                label={index === 0 ? formatMessage({ id: 'route.request.config.path' }) : ''}
+                label={index === 0 ? formatMessage({ id: 'page.route.path' }) : ''}
                 required
                 key={field.key}
                 extra={
                   index === 0 ? (
                     <div>
-                      {formatMessage({ id: 'route.request.config.path.description1' })}
+                      {formatMessage({ id: 'page.route.form.itemExtraMessage1.path' })}
                       <br />
-                      {formatMessage({ id: 'route.request.config.path.description2' })}
+                      {formatMessage({ id: 'page.route.form.itemExtraMessage2.path' })}
                     </div>
                   ) : null
                 }
@@ -121,17 +127,23 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                     {
                       required: true,
                       whitespace: true,
-                      message: formatMessage({ id: 'route.request.config.input.path' }),
+                      message: `${formatMessage({
+                        id: 'component.global.pleaseEnter',
+                      })} ${formatMessage({ id: 'page.route.path' })}`,
                     },
                     {
                       pattern: new RegExp(/^\/[a-zA-Z0-9\-._~%!$&'()+,;=:@/]*\*?$/, 'g'),
-                      message: formatMessage({ id: 'route.request.config.path.rule' }),
+                      message: formatMessage({
+                        id: 'page.route.form.itemRulesPatternMessage.path',
+                      }),
                     },
                   ]}
                   noStyle
                 >
                   <Input
-                    placeholder={formatMessage({ id: 'route.request.config.input.path' })}
+                    placeholder={`${formatMessage({
+                      id: 'component.global.pleaseEnter',
+                    })} ${formatMessage({ id: 'page.route.path' })}`}
                     style={{ width: '60%' }}
                     disabled={disabled}
                   />
@@ -155,7 +167,7 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                     add();
                   }}
                 >
-                  <PlusOutlined /> {formatMessage({ id: 'route.request.config.create' })}
+                  <PlusOutlined /> {formatMessage({ id: 'component.global.create' })}
                 </Button>
               </Form.Item>
             )}
@@ -166,14 +178,18 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
   );
 
   return (
-    <PanelSection title={formatMessage({ id: 'route.request.config.basic.define' })}>
+    <PanelSection
+      title={formatMessage({ id: 'page.route.panelSection.title.requestConfigBasicDefine' })}
+    >
       <Form.Item
-        label={formatMessage({ id: 'route.request.config.protocol' })}
+        label={formatMessage({ id: 'page.route.protocol' })}
         name="protocols"
         rules={[
           {
             required: true,
-            message: formatMessage({ id: 'route.request.config.choose.protocol' }),
+            message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
+              id: 'page.route.protocol',
+            })}`,
           },
         ]}
       >
@@ -193,19 +209,21 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
       {renderHosts()}
       {renderPaths()}
       <Form.Item
-        label={formatMessage({ id: 'route.request.config.http.method' })}
+        label={formatMessage({ id: 'page.route.form.itemLabel.httpMethod' })}
         name="methods"
         rules={[
           {
             required: true,
-            message: formatMessage({ id: 'route.request.config.choose.http.method' }),
+            message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
+              id: 'page.route.form.itemLabel.httpMethod',
+            })}`,
           },
         ]}
       >
         <Checkbox.Group options={HTTP_METHOD_OPTION_LIST} disabled={disabled} />
       </Form.Item>
       <Form.Item
-        label={formatMessage({ id: 'route.request.config.redirect' })}
+        label={formatMessage({ id: 'page.route.form.itemLabel.redirect' })}
         name="redirectOption"
       >
         <Select
@@ -215,13 +233,13 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
           }}
         >
           <Select.Option value="forceHttps">
-            {formatMessage({ id: 'route.request.config.enable.https' })}
+            {formatMessage({ id: 'page.route.select.option.enableHttps' })}
           </Select.Option>
           <Select.Option value="customRedirect">
-            {formatMessage({ id: 'route.request.config.custom' })}
+            {formatMessage({ id: 'page.route.select.option.configCustom' })}
           </Select.Option>
           <Select.Option value="disabled">
-            {formatMessage({ id: 'route.request.config.forbidden' })}
+            {formatMessage({ id: 'page.route.select.option.forbidden' })}
           </Select.Option>
         </Select>
       </Form.Item>
diff --git a/src/pages/Route/components/Step2/HttpHeaderRewriteView.tsx b/src/pages/Route/components/Step2/HttpHeaderRewriteView.tsx
index bfc4901..d563173 100644
--- a/src/pages/Route/components/Step2/HttpHeaderRewriteView.tsx
+++ b/src/pages/Route/components/Step2/HttpHeaderRewriteView.tsx
@@ -45,29 +45,29 @@ const HttpHeaderRewriteView: React.FC<RouteModule.Step2PassProps> = ({
 
   const columns = [
     {
-      title: formatMessage({ id: 'route.http.request.header.name' }),
+      title: formatMessage({ id: 'page.route.httpHeaderName' }),
       dataIndex: 'header_name',
       key: 'header_name',
     },
     {
-      title: formatMessage({ id: 'route.http.action' }),
+      title: formatMessage({ id: 'page.route.httpAction' }),
       dataIndex: 'header_action',
       key: 'header_action',
       render: (action: 'override' | 'remove') => {
         return action === 'override'
-          ? formatMessage({ id: 'route.http.override.or.create' })
-          : formatMessage({ id: 'route.http.delete' });
+          ? formatMessage({ id: 'page.route.httpOverrideOrCreate' })
+          : formatMessage({ id: 'component.global.delete' });
       },
     },
     {
-      title: formatMessage({ id: 'route.http.value' }),
+      title: formatMessage({ id: 'page.route.value' }),
       dataIndex: 'header_value',
       key: 'header_value',
     },
     disabled
       ? {}
       : {
-          title: formatMessage({ id: 'route.http.operation' }),
+          title: formatMessage({ id: 'component.global.operation' }),
           key: 'action',
           render: (_: any, record: RouteModule.UpstreamHeader) => (
             <Space size="middle">
@@ -76,14 +76,14 @@ const HttpHeaderRewriteView: React.FC<RouteModule.Step2PassProps> = ({
                   handleEdit(record);
                 }}
               >
-                {formatMessage({ id: 'route.http.edit' })}
+                {formatMessage({ id: 'component.global.edit' })}
               </a>
               <a
                 onClick={() => {
                   handleRemove(record.key);
                 }}
               >
-                {formatMessage({ id: 'route.http.delete' })}
+                {formatMessage({ id: 'component.global.delete' })}
               </a>
             </Space>
           ),
@@ -122,8 +122,8 @@ const HttpHeaderRewriteView: React.FC<RouteModule.Step2PassProps> = ({
       <Modal
         title={
           mode === 'EDIT'
-            ? formatMessage({ id: 'route.http.edit.request.header' })
-            : formatMessage({ id: 'route.http.operate.request.header' })
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.operation' })
         }
         centered
         visible
@@ -132,44 +132,58 @@ const HttpHeaderRewriteView: React.FC<RouteModule.Step2PassProps> = ({
           setVisible(false);
           modalForm.resetFields();
         }}
-        okText={formatMessage({ id: 'route.http.confirm' })}
-        cancelText={formatMessage({ id: 'route.http.cancel' })}
+        okText={formatMessage({ id: 'component.global.confirm' })}
+        cancelText={formatMessage({ id: 'component.global.cancel' })}
         destroyOnClose
       >
         <Form form={modalForm} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
           <Form.Item
-            label={formatMessage({ id: 'route.http.request.header.name' })}
+            label={formatMessage({ id: 'page.route.httpHeaderName' })}
             name="header_name"
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'route.http.input.request.header.name' }),
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'page.route.httpHeaderName',
+                })}`,
               },
             ]}
           >
             <Input />
           </Form.Item>
           <Form.Item
-            label={formatMessage({ id: 'route.http.action' })}
+            label={formatMessage({ id: 'page.route.httpAction' })}
             name="header_action"
             rules={[
-              { required: true, message: formatMessage({ id: 'route.http.select.actions' }) },
+              {
+                required: true,
+                message: `${formatMessage({
+                  id: 'component.global.pleaseChoose',
+                })} ${formatMessage({ id: 'page.route.httpAction' })}`,
+              },
             ]}
           >
             <Select onChange={(e) => setShowModalValue(e === 'override')}>
               <Select.Option value="override">
-                {formatMessage({ id: 'route.http.override.or.create' })}
+                {formatMessage({ id: 'page.route.httpOverrideOrCreate' })}
               </Select.Option>
               <Select.Option value="remove">
-                {formatMessage({ id: 'route.http.delete' })}
+                {formatMessage({ id: 'component.global.delete' })}
               </Select.Option>
             </Select>
           </Form.Item>
           {showModalValue && (
             <Form.Item
-              label={formatMessage({ id: 'route.http.value' })}
+              label={formatMessage({ id: 'page.route.value' })}
               name="header_value"
-              rules={[{ required: true, message: formatMessage({ id: 'route.http.input.value' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: `${formatMessage({
+                    id: 'component.global.pleaseEnter',
+                  })} ${formatMessage({ id: 'page.route.value' })}`,
+                },
+              ]}
             >
               <Input />
             </Form.Item>
@@ -180,7 +194,9 @@ const HttpHeaderRewriteView: React.FC<RouteModule.Step2PassProps> = ({
   };
 
   return (
-    <PanelSection title={formatMessage({ id: 'route.http.override.request.header' })}>
+    <PanelSection
+      title={formatMessage({ id: 'page.route.panelSection.title.httpOverrideRequestHeader' })}
+    >
       {!disabled && (
         <Button
           onClick={() => {
@@ -193,7 +209,7 @@ const HttpHeaderRewriteView: React.FC<RouteModule.Step2PassProps> = ({
             marginBottom: 16,
           }}
         >
-          {formatMessage({ id: 'route.http.operation' })}
+          {formatMessage({ id: 'component.global.operation' })}
         </Button>
       )}
       <Table key="table" bordered dataSource={upstreamHeaderList} columns={columns} />
diff --git a/src/pages/Route/components/Step2/RequestRewriteView.tsx b/src/pages/Route/components/Step2/RequestRewriteView.tsx
index 7294b0c..007c9b8 100644
--- a/src/pages/Route/components/Step2/RequestRewriteView.tsx
+++ b/src/pages/Route/components/Step2/RequestRewriteView.tsx
@@ -52,7 +52,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
     // eslint-disable-next-line no-shadow
     fetchUpstreamList().then(({ data }) => {
       setUpstreams([
-        { name: formatMessage({ id: 'route.request.override.input' }), id: null },
+        { name: formatMessage({ id: 'page.route.select.option.inputManually' }), id: null },
         ...data,
       ]);
     });
@@ -104,13 +104,13 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                 {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
                 label={
                   index === 0
-                    ? formatMessage({ id: 'route.request.override.domain.name.or.ip' })
+                    ? formatMessage({ id: 'page.route.form.itemLabel.domainNameOrIp' })
                     : ''
                 }
                 extra={
                   index === 0
                     ? formatMessage({
-                        id: 'route.request.override.use.domain.name.default.analysis',
+                        id: 'page.route.form.itemExtraMessage.domainNameOrIp',
                       })
                     : ''
                 }
@@ -123,9 +123,11 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                       rules={[
                         {
                           required: true,
-                          message: formatMessage({
-                            id: 'route.request.override.input.domain.or.ip',
-                          }),
+                          message: `${formatMessage({
+                            id: 'component.global.pleaseEnter',
+                          })}${formatMessage({
+                            id: 'page.route.form.itemLabel.domainNameOrIp',
+                          })}`,
                         },
                         {
                           pattern: new RegExp(
@@ -133,14 +135,14 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                             'g',
                           ),
                           message: formatMessage({
-                            id: 'route.request.override.domain.or.ip.rules',
+                            id: 'page.route.form.itemRulesPatternMessage.domainNameOrIp',
                           }),
                         },
                       ]}
                     >
                       <Input
                         placeholder={formatMessage({
-                          id: 'route.request.override.domain.name.or.ip',
+                          id: 'page.route.form.itemLabel.domainNameOrIp',
                         })}
                         disabled={upstreamDisabled}
                       />
@@ -153,14 +155,16 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                       rules={[
                         {
                           required: true,
-                          message: formatMessage({
-                            id: 'route.request.override.input.port.number',
-                          }),
+                          message: `${formatMessage({
+                            id: 'component.global.pleaseEnter',
+                          })}${formatMessage({
+                            id: 'page.route.portNumber',
+                          })}`,
                         },
                       ]}
                     >
                       <InputNumber
-                        placeholder={formatMessage({ id: 'route.request.override.port.number' })}
+                        placeholder={formatMessage({ id: 'page.route.portNumber' })}
                         disabled={upstreamDisabled}
                         min={1}
                         max={65535}
@@ -174,12 +178,16 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                       rules={[
                         {
                           required: true,
-                          message: formatMessage({ id: 'route.request.override.input.weight' }),
+                          message: `${formatMessage({
+                            id: 'component.global.pleaseEnter',
+                          })}${formatMessage({
+                            id: 'page.route.weight',
+                          })}`,
                         },
                       ]}
                     >
                       <InputNumber
-                        placeholder={formatMessage({ id: 'route.request.override.weight' })}
+                        placeholder={formatMessage({ id: 'page.route.weight' })}
                         disabled={upstreamDisabled}
                         min={0}
                         max={1000}
@@ -208,7 +216,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                     add();
                   }}
                 >
-                  <PlusOutlined /> {formatMessage({ id: 'route.request.override.create' })}
+                  <PlusOutlined /> {formatMessage({ id: 'component.global.create' })}
                 </Button>
               </Form.Item>
             )}
@@ -220,27 +228,32 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
 
   const renderTimeUnit = () => <span style={{ margin: '0 8px' }}>ms</span>;
   return (
-    <PanelSection title={formatMessage({ id: 'route.request.override' })}>
+    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.requestOverride' })}>
       <Form {...FORM_ITEM_LAYOUT} form={form} layout="horizontal" className={styles.stepForm}>
         <Form.Item
-          label={formatMessage({ id: 'route.request.override.protocol' })}
+          label={formatMessage({ id: 'page.route.protocol' })}
           name="upstream_protocol"
           rules={[
             {
               required: true,
-              message: formatMessage({ id: 'route.request.override.select.protocol' }),
+              message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
+                id: 'page.route.protocol',
+              })}`,
             },
           ]}
         >
           <Radio.Group name="upstream_protocol" disabled={disabled}>
-            <Radio value="keep">{formatMessage({ id: 'route.request.override.stay.same' })}</Radio>
+            <Radio value="keep">{formatMessage({ id: 'page.route.radio.staySame' })}</Radio>
             <Radio value="http">HTTP</Radio>
             <Radio value="https">HTTPS</Radio>
           </Radio.Group>
         </Form.Item>
-        <Form.Item label={formatMessage({ id: 'route.request.override.path' })} name="rewriteType">
+        <Form.Item
+          label={formatMessage({ id: 'page.route.form.itemLabel.rewriteType' })}
+          name="rewriteType"
+        >
           <Radio.Group disabled={disabled}>
-            <Radio value="keep">{formatMessage({ id: 'route.request.override.stay.same' })}</Radio>
+            <Radio value="keep">{formatMessage({ id: 'page.route.radio.staySame' })}</Radio>
             <Radio value="static">{formatMessage({ id: 'page.route.radio.static' })}</Radio>
             <Radio value="regx">{formatMessage({ id: 'page.route.radio.regx' })}</Radio>
           </Radio.Group>
@@ -255,13 +268,14 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
                   rules={[
                     {
                       required: true,
-                      message: formatMessage({ id: 'route.request.override.input.path' }),
+                      message: `${formatMessage({ id: 'component.global.pleaseEnter' })}
+                      ${formatMessage({ id: 'page.route.form.itemLabel.from' })}`,
                     },
                   ]}
                 >
                   <Input
                     disabled={disabled}
-                    placeholder={formatMessage({ id: 'route.request.override.path.example' })}
+                    placeholder={formatMessage({ id: 'page.route.input.placeholder.newPath' })}
                   />
                 </Form.Item>
               );
@@ -277,18 +291,20 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
             ) {
               return (
                 <Form.Item
-                  label={formatMessage({ id: 'route.request.override.new.path' })}
+                  label={formatMessage({ id: 'page.route.form.itemLabel.newPath' })}
                   name="upstreamPath"
                   rules={[
                     {
                       required: true,
-                      message: formatMessage({ id: 'route.request.override.input.path' }),
+                      message: `${formatMessage({
+                        id: 'component.global.pleaseEnter',
+                      })} ${formatMessage({ id: 'page.route.form.itemLabel.newPath' })}`,
                     },
                   ]}
                 >
                   <Input
                     disabled={disabled}
-                    placeholder={formatMessage({ id: 'route.request.override.path.example' })}
+                    placeholder={formatMessage({ id: 'page.route.input.placeholder.newPath' })}
                   />
                 </Form.Item>
               );
@@ -297,10 +313,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
           }}
         </Form.Item>
 
-        <Form.Item
-          label={formatMessage({ id: 'route.request.override.upstream' })}
-          name="upstream_id"
-        >
+        <Form.Item label={formatMessage({ id: 'menu.upstream' })} name="upstream_id">
           <Select
             onChange={(value) => {
               setUpstreamId(value);
@@ -317,17 +330,16 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
           </Select>
         </Form.Item>
         {renderUpstreamMeta()}
-        <Form.Item
-          label={formatMessage({ id: 'route.request.override.connection.timeout' })}
-          required
-        >
+        <Form.Item label={formatMessage({ id: 'component.global.connectionTimeout' })} required>
           <Form.Item
             name={['timeout', 'connect']}
             noStyle
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'route.request.override.input.connection.timeout' }),
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'component.global.connectionTimeout',
+                })}`,
               },
             ]}
           >
@@ -335,14 +347,16 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
           </Form.Item>
           {renderTimeUnit()}
         </Form.Item>
-        <Form.Item label={formatMessage({ id: 'route.request.override.send.timeout' })} required>
+        <Form.Item label={formatMessage({ id: 'component.global.sendTimeout' })} required>
           <Form.Item
             name={['timeout', 'send']}
             noStyle
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'route.request.override.inout.send.timeout' }),
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'component.global.sendTimeout',
+                })}`,
               },
             ]}
           >
@@ -350,14 +364,16 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({ form, disabl
           </Form.Item>
           {renderTimeUnit()}
         </Form.Item>
-        <Form.Item label={formatMessage({ id: 'route.request.override.receive.timeout' })} required>
+        <Form.Item label={formatMessage({ id: 'component.global.receiveTimeout' })} required>
           <Form.Item
             name={['timeout', 'read']}
             noStyle
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'route.request.override.inout.receive.timeout' }),
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'component.global.receiveTimeout',
+                })}`,
               },
             ]}
           >
diff --git a/src/pages/Route/locales/en-US.ts b/src/pages/Route/locales/en-US.ts
index 6689640..8a2c25c 100644
--- a/src/pages/Route/locales/en-US.ts
+++ b/src/pages/Route/locales/en-US.ts
@@ -15,166 +15,91 @@
  * limitations under the License.
  */
 export default {
-  'route.create.define.api.request': 'Define API requests',
-  'route.create.define.api.backend.server': 'Define API Backend Server',
-  'route.create.plugin.configuration': 'Plugin Configuration',
+  'page.route.button.returnList': 'Return Route List',
+  'page.route.button.onlineDebug': 'Online Debug',
 
-  'route.result.submit.success': 'Submit Success',
-  'route.result.return.list': 'Return Route List',
-  'route.result.create': 'Create Route',
+  'page.route.parameterPosition': 'Parameter Position',
+  'page.route.httpRequestHeader': 'HTTP Request Header',
+  'page.route.requestParameter': 'Request Parameter',
+  'page.route.parameterName': 'Parameter Name',
+  'page.route.operationalCharacter': 'Operational Character',
+  'page.route.equal': 'Equal',
+  'page.route.unequal': 'Unequal',
+  'page.route.greaterThan': 'Greater Than',
+  'page.route.lessThan': 'Less Than',
+  'page.route.regexMatch': 'Regex Match',
+  'page.route.rule': 'Rule',
+  'page.route.httpHeaderName': 'HTTP Request Header Name',
 
-  'route.match.parameter.position': 'Parameter Position',
-  'route.match.http.request.header': 'HTTP Request Header',
-  'route.match.request.parameter': 'Request Parameter',
-  'route.match.parameter.name': 'Parameter Name',
-  'route.match.operational.character': 'Operational Character',
-  'route.match.equal': 'Equal',
-  'route.match.unequal': 'Unequal',
-  'route.match.greater.than': 'Greater Than',
-  'route.match.less.than': 'Less Than',
-  'route.match.regex.match': 'Regex Match',
-  'route.match.parameter.value': 'Parameter Value',
-  'route.match.operation': 'Operation',
-  'route.match.edit': 'Edit',
-  'route.match.delete': 'Delete',
-  'route.match.edit.rule': 'Edit Rule',
-  'route.match.create.rule': 'Create Rule',
-  'route.match.confirm': 'Confirm',
-  'route.match.cancel': 'Cancel',
-  'route.match.select.parameter.position': 'Please choose parameter position',
-  'route.match.request.header.example': 'Request header name, for example: HOST',
-  'route.match.parameter.name.example': 'Parameter name, for example: id',
-  'route.match.input.parameter.name': 'Please input parameter name',
-  'route.match.parameter.name.rule':
-    'Only letters, numbers, - and _ are supported, and can only begin with letters',
-  'route.match.rule': 'Only letters and Numbers are supported, and can only begin with letters',
-  'route.match.choose.operational.character': 'Please choose operational character',
-  'route.match.value': 'Value',
-  'route.match.input.parameter.value': 'Please input parameter value',
-  'route.match.advanced.match.rule': 'Advanced Routing Matching Conditions',
-  'route.match.create': 'Create',
+  'page.route.input.placeholder.parameterNameHttpHeader': 'Request header name, for example: HOST',
+  'page.route.input.placeholder.parameterNameRequestParameter': 'Parameter name, for example: id',
 
-  'route.meta.name.description': 'Name And Description',
-  'route.meta.api.name': 'API Name',
-  'route.meta.input.api.name': 'Please input API name',
-  'route.meta.api.name.rule':
+  'page.route.form.itemRulesRequiredMessage.parameterName':
+    'Only letters and Numbers are supported, and can only begin with letters',
+  'page.route.value': 'Value',
+  'page.route.panelSection.title.advancedMatchRule': 'Advanced Routing Matching Conditions',
+
+  'page.route.panelSection.title.nameDescription': 'Name And Description',
+  'page.route.form.itemLabel.apiName': 'API Name',
+  'page.route.form.itemLable.routeGroup': 'Route Group Name',
+  'page.route.form.itemRulesPatternMessage.apiNameRule':
     'Maximum length 100, only letters, Numbers, _, and - are supported, and can only begin with letters',
-  'rotue.meta.api.rule':
-    'Only letters, numbers, _ and - are supported, and can only begin with letters',
-  'route.meta.api.group.name': 'RouteGroup',
-  'route.meta.group.name': 'GroupName',
-  'route.meta.input.api.group.name': 'Please enter the group name',
-  'route.meta.api.create.group.name': 'Create route group',
-  'route.meta.description': 'APIDescription',
-  'route.meta.description.rule': 'Can not more than 200 characters',
-  'route.meta.group.description': 'GroupDescription',
 
-  'route.request.config.domain.name': 'Domain Name',
-  'route.request.config.domain.or.ip':
+  'page.route.panelSection.title.requestConfigBasicDefine': 'Request Basic Define',
+  'page.route.protocol': 'Protocol',
+  'page.route.form.itemLabel.httpMethod': 'HTTP Method',
+  'page.route.form.itemLabel.redirect': 'Redirect',
+  'page.route.select.option.enableHttps': 'Enable HTTPS',
+  'page.route.select.option.configCustom': 'Custom',
+  'page.route.select.option.forbidden': 'Forbidden',
+  'page.route.form.itemLabel.redirectCustom': 'Custom Redirect',
+  'page.route.input.placeholder.redirectCustom': 'For examle: /foo/index.html',
+  'page.route.select.option.redirect301': '301(Permanent Redirect)',
+  'page.route.select.option.redirect302': '302(Temporary Redirect)',
+
+  'page.route.form.itemExtraMessage.domain':
     'Domain Name or IP, support for generic Domain Name, for example: *.test.com',
-  'route.request.config.input.domain.name': 'Please input Domain Name',
-  'route.request.config.domain.name.rule':
+  'page.route.form.itemRulesPatternMessage.domain':
     'Only letters, numbers and * are supported. * can only be at the beginning, and only single * is supported',
-  'route.request.config.create': 'Create',
-  'route.request.config.path': 'Path',
-  'route.request.config.path.description1':
+  'page.route.form.itemExtraMessage1.path':
     '1. Request path, for example: /foo/index.html, supports request path prefix /foo/* ;',
-  'route.request.config.path.description2': '2. /* represents all paths',
-  'route.request.config.input.path': 'Please input request path',
-  'route.request.config.path.rule': 'Begin with / , and * can only at the end',
-  'route.request.config.basic.define': 'Request Basic Define',
-  'route.request.config.protocol': 'Protocol',
-  'route.request.config.choose.protocol': 'Please choose protocols',
-  'route.request.config.http.method': 'HTTP Method',
-  'route.request.config.choose.http.method': 'Please choose HTTP methods',
-  'route.request.config.redirect': 'Redirect',
-  'route.request.config.enable.https': 'Enable HTTPS',
-  'route.request.config.custom': 'Custom',
-  'route.request.config.forbidden': 'Forbidden',
-  'route.request.config.redirect.custom': 'Custom Redirect',
-  'route.request.config.redirect.custom.example': 'For examle: /foo/index.html',
-  'route.request.config.redirect.301': '301(Permanent Redirect)',
-  'route.request.config.redirect.302': '302(Temporary Redirect)',
+  'page.route.form.itemExtraMessage2.path': '2. /* represents all paths',
+  'page.route.form.itemRulesPatternMessage.path': 'Begin with / , and * can only at the end',
 
-  'route.http.request.header.name': 'HTTP Request Header Name',
-  'route.http.action': 'Action',
-  'route.http.override.or.create': 'Override/Create',
-  'route.http.delete': 'Delete',
-  'route.http.value': 'Value',
-  'route.http.operation': 'Operation',
-  'route.http.edit': 'Edit',
-  'route.http.edit.request.header': 'Edit HTTP request header',
-  'route.http.operate.request.header': 'Operate request header',
-  'route.http.confirm': 'Confirm',
-  'route.http.cancel': 'Cancel',
-  'route.http.input.request.header.name': 'Please input HTTP request header name',
-  'route.http.select.actions': 'Please select actions',
-  'route.http.input.value': 'Please input value',
-  'route.http.override.request.header': 'Override HTTP request header',
+  'page.route.httpAction': 'Action',
+  'page.route.httpOverrideOrCreate': 'Override/Create',
+  'page.route.panelSection.title.httpOverrideRequestHeader': 'Override HTTP request header',
+  'page.route.routeGroup': 'RouteGroup',
+  'page.route.status': 'Status',
+  'page.route.published': 'Published',
+  'page.route.unpublished': 'Unpublished',
+  'page.route.groupName': 'GroupName',
+  'page.route.publish': 'Publish',
+  'page.route.offline': 'Offline',
 
-  'route.request.override.input': 'Input',
-  'route.request.override.domain.name.or.ip': 'Domain Name/IP',
-  'route.request.override.use.domain.name.default.analysis':
+  'page.route.select.option.inputManually': 'Input Manually',
+  'page.route.form.itemLabel.domainNameOrIp': 'Domain Name/IP',
+  'page.route.form.itemExtraMessage.domainNameOrIp':
     'When using Domain Name, it will analysis the local: /etc/resolv.conf by default',
-  'route.request.override.input.domain.or.ip': 'Please input Domain Name/IP',
-  'route.request.override.domain.or.ip.rules': 'Only letters, numbers and . are supported',
-  'route.request.override.input.port.number': 'Please input port number',
-  'route.request.override.port.number': 'Port Number',
-  'route.request.override.input.weight': 'Please input weight',
-  'route.request.override.weight': 'Weight',
-  'route.request.override.create': 'Create',
-  'route.request.override': 'Requests Override',
-  'route.request.override.protocol': 'Protocol',
-  'route.request.override.select.protocol': 'Please select protocol',
-  'route.request.override.stay.same': 'Stay The Same',
-  'route.request.override.path': 'Request Path',
-  'route.request.override.edit': 'Edit',
-  'route.request.override.new.path': 'New Path',
-  'route.request.override.input.path': 'Please input request path',
-  'route.request.override.path.example': 'For example: /foo/bar/index.html',
-  'route.request.override.upstream': 'Upstream',
-  'route.request.override.connection.timeout': 'Connection Timeout',
-  'route.request.override.input.connection.timeout': 'Please inout connection timeout',
-  'route.request.override.send.timeout': 'Send Timeout',
-  'route.request.override.inout.send.timeout': 'Please input send timeout',
-  'route.request.override.receive.timeout': 'Receive Timeout',
-  'route.request.override.inout.receive.timeout': 'Please input receive timeout',
+  'page.route.form.itemRulesPatternMessage.domainNameOrIp':
+    'Only letters, numbers and . are supported',
+  'page.route.portNumber': 'Port Number',
+  'page.route.weight': 'Weight',
+  'page.route.radio.staySame': 'Stay The Same',
+  'page.route.form.itemLabel.newPath': 'New Path',
+  'page.route.form.itemLabel.rewriteType': 'Request Path',
+  'page.route.input.placeholder.newPath': 'For example: /foo/bar/index.html',
 
-  'route.constants.define.api.request': 'Define API Request',
-  'route.constants.preview': 'Preview',
-  'route.constants.define.api.backend.serve': 'Define API Backend Server',
-  'route.constants.plugin.configuration': 'Plugin Configuration',
+  'page.route.steps.stepTitle.defineApiRequest': 'Define API Request',
+  'page.route.steps.stepTitle.defineApiBackendServe': 'Define API Backend Server',
 
-  'route.create.management': 'Route Management',
-
-  'route.list.name': 'Name',
-  'route.list.domain.name': 'Domain Name',
-  'route.list.path': 'Path',
-  'route.list.description': 'Description',
-  'route.list.group.name': 'RouteGroup',
-  'route.list.status': 'Status',
-  'route.list.status.publish': 'Published',
-  'route.list.status.offline': 'Offline',
-  'route.list.edit.time': 'Edit Time',
-  'route.list.operation': 'Operation',
-  'route.list.edit': 'Edit',
-  'route.list.publish': 'Publish',
-  'route.list.debug': 'Online Debug',
-  'route.list.publish.success': 'Route publish success',
-  'route.list.offline': 'Offline',
-  'route.list.offline.success': 'Offline success',
-  'route.list.offline.confirm': 'Are you sure to offline this route?',
-  'route.list.delete.confrim': 'Are you sure to delete this route?',
-  'route.list.delete.success': 'Delete Success!',
-  'route.list.confirm': 'Confirm',
-  'route.list.cancel': 'Cancel',
-  'route.list.delete': 'Delete',
-  'route.list': 'Route List',
-  'route.list.input': 'Please input',
-  'route.list.create': 'Create',
+  'page.route.popconfirm.title.offline': 'Are you sure to offline this route?',
   'page.route.radio.static': 'Static',
   'page.route.radio.regx': 'Regx',
   'page.route.form.itemLabel.from': 'From',
   'page.route.form.itemHelp.status':
     'Whether a route can be used after it is created, the default value is false.',
+
+  'page.route.domainName': 'Domain Name',
+  'page.route.path': 'Path',
 };
diff --git a/src/pages/Route/locales/zh-CN.ts b/src/pages/Route/locales/zh-CN.ts
index 95aa016..0dce922 100644
--- a/src/pages/Route/locales/zh-CN.ts
+++ b/src/pages/Route/locales/zh-CN.ts
@@ -15,160 +15,91 @@
  * limitations under the License.
  */
 export default {
-  'route.create.define.api.request': '定义 API 请求',
-  'route.create.define.api.backend.server': '定义 API 后端服务',
-  'route.create.plugin.configuration': '插件配置',
+  // global
+  'page.route.parameterPosition': '参数位置',
+  'page.route.httpRequestHeader': 'HTTP 请求头',
+  'page.route.requestParameter': '请求参数',
+  'page.route.parameterName': '参数名称',
+  'page.route.operationalCharacter': '运算符',
+  'page.route.equal': '等于',
+  'page.route.unequal': '不等于',
+  'page.route.greaterThan': '大于',
+  'page.route.lessThan': '小于',
+  'page.route.regexMatch': '正则匹配',
+  'page.route.rule': '规则',
+  'page.route.domainName': '域名',
+  'page.route.path': '路径',
+  'page.route.value': '参数值',
+  'page.route.protocol': '协议',
+  'page.route.httpHeaderName': 'HTTP 请求头名称',
+  'page.route.routeGroup': '路由分组',
+  'page.route.status': '状态',
+  'page.route.published': '已发布',
+  'page.route.unpublished': '未发布',
+  'page.route.groupName': '分组名称',
+  'page.route.publish': '发布',
+  'page.route.offline': '下线',
 
-  'route.result.submit.success': '提交成功',
-  'route.result.return.list': '返回路由列表',
-  'route.result.create': '创建路由',
+  // button
+  'page.route.button.returnList': '返回路由列表',
+  'page.route.button.onlineDebug': '在线调试',
 
-  'route.match.parameter.position': '参数位置',
-  'route.match.http.request.header': 'HTTP 请求头',
-  'route.match.request.parameter': '请求参数',
-  'route.match.parameter.name': '参数名称',
-  'route.match.operational.character': '运算符',
-  'route.match.equal': '等于',
-  'route.match.unequal': '不等于',
-  'route.match.greater.than': '大于',
-  'route.match.less.than': '小于',
-  'route.match.regex.match': '正则匹配',
-  'route.match.parameter.value': '参数值',
-  'route.match.operation': '操作',
-  'route.match.edit': '编辑',
-  'route.match.delete': '删除',
-  'route.match.edit.rule': '编辑规则',
-  'route.match.create.rule': '创建规则',
-  'route.match.confirm': '确定',
-  'route.match.cancel': '取消',
-  'route.match.select.parameter.position': '请选择参数位置',
-  'route.match.request.header.example': '请求头键名,例如:HOST',
-  'route.match.parameter.name.example': '参数名称,例如:id',
-  'route.match.input.parameter.name': '请输入参数名称',
-  'route.match.parameter.name.rule': '仅支持字母、数字、- 和 _ ,且只能以字母开头',
-  'route.match.rule': '仅支持字母和数字,且只能以字母开头',
-  'route.match.choose.operational.character': '请选择运算符',
-  'route.match.value': '值',
-  'route.match.input.parameter.value': '请输入参数值',
-  'route.match.advanced.match.rule': '高级路由匹配条件',
-  'route.match.create': '创建',
-
-  'route.meta.name.description': '名称及其描述',
-  'route.meta.api.name': 'API 名称',
-  'route.meta.input.api.name': '请输入 API 名称',
-  'route.meta.api.name.rule': '最大长度100,仅支持字母、数字、- 和 _,且只能以字母开头',
-  'rotue.meta.api.rule': '仅支持字母、数字、- 和 _,且只能以字母开头',
-  'route.meta.api.group.name': '路由分组',
-  'route.meta.group.name': '分组名称',
-  'route.meta.input.api.group.name': '请输入路由分组名称',
-  'route.meta.api.create.group.name': '创建路由分组',
-  'route.meta.description': '路由描述',
-  'route.meta.description.rule': '不超过 200 个字符',
-  'route.meta.group.description': '分组描述',
-
-  'route.request.config.domain.name': '域名',
-  'route.request.config.domain.or.ip': '域名或IP,支持泛域名,如:*.test.com',
-  'route.request.config.input.domain.name': '请输入域名',
-  'route.request.config.domain.name.rule': '仅支持字母、数字和 * ,且 * 只能是在开头,支持单个 * ',
-  'route.request.config.create': '创建',
-  'route.request.config.path': '路径',
-  'route.request.config.path.description1':
+  // input
+  'page.route.input.placeholder.parameterNameHttpHeader': '请求头键名,例如:HOST',
+  'page.route.input.placeholder.parameterNameRequestParameter': '参数名称,例如:id',
+  'page.route.input.placeholder.redirectCustom': '例如:/foo/index.html',
+  // form
+  'page.route.form.itemRulesRequiredMessage.parameterName': '仅支持字母和数字,且只能以字母开头',
+  'page.route.form.itemLabel.apiName': 'API 名称',
+  'page.route.form.itemLable.routeGroup': '路由分组名称',
+  'page.route.form.itemRulesPatternMessage.apiNameRule':
+    '最大长度100,仅支持字母、数字、- 和 _,且只能以字母开头',
+  'page.route.form.itemLabel.httpMethod': 'HTTP 方法',
+  'page.route.form.itemLabel.redirect': '重定向',
+  'page.route.form.itemLabel.redirectCustom': '自定义重定向',
+  'page.route.form.itemLabel.rewriteType': '请求路径',
+  'page.route.form.itemExtraMessage.domain': '域名或IP,支持泛域名,如:*.test.com',
+  'page.route.form.itemRulesPatternMessage.domain':
+    '仅支持字母、数字和 * ,且 * 只能是在开头,支持单个 * ',
+  'page.route.form.itemExtraMessage1.path':
     '1. 请求路径,如 /foo/index.html,支持请求路径前缀 /foo/* ;',
-  'route.request.config.path.description2': '2. /* 代表所有路径',
-  'route.request.config.input.path': '请输入请求路径',
-  'route.request.config.path.rule': '以 / 开头,且 * 只能在最后',
-  'route.request.config.basic.define': '请求基础定义',
-  'route.request.config.protocol': '协议',
-  'route.request.config.choose.protocol': '请选择协议',
-  'route.request.config.http.method': 'HTTP 方法',
-  'route.request.config.choose.http.method': '请选择 HTTP 方法',
-  'route.request.config.redirect': '重定向',
-  'route.request.config.enable.https': '启用 HTTPS',
-  'route.request.config.custom': '自定义',
-  'route.request.config.forbidden': '禁用',
-  'route.request.config.redirect.custom': '自定义重定向',
-  'route.request.config.redirect.custom.example': '例如:/foo/index.html',
-  'route.request.config.redirect.301': '301(永久重定向)',
-  'route.request.config.redirect.302': '302(临时重定向)',
+  'page.route.form.itemExtraMessage2.path': '2. /* 代表所有路径',
+  'page.route.form.itemRulesPatternMessage.path': '以 / 开头,且 * 只能在最后',
+
+  // select
+  'page.route.select.option.enableHttps': '启用 HTTPS',
+  'page.route.select.option.configCustom': '自定义',
+  'page.route.select.option.forbidden': '禁用',
+  'page.route.select.option.redirect301': '301(永久重定向)',
+  'page.route.select.option.redirect302': '302(临时重定向)',
+  'page.route.select.option.inputManually': '手动填写',
 
-  'route.http.request.header.name': 'HTTP 请求头名称',
-  'route.http.action': '行为',
-  'route.http.override.or.create': '重写/创建',
-  'route.http.delete': '删除',
-  'route.http.value': '值',
-  'route.http.operation': '操作',
-  'route.http.edit': '编辑',
-  'route.http.edit.request.header': '编辑请求头',
-  'route.http.operate.request.header': '操作请求头',
-  'route.http.confirm': '确定',
-  'route.http.cancel': '取消',
-  'route.http.input.request.header.name': '请输入 HTTP 请求头名称',
-  'route.http.select.actions': '请选择行为',
-  'route.http.input.value': '请输入值',
-  'route.http.override.request.header': 'HTTP 请求头改写',
+  // steps
+  'page.route.steps.stepTitle.defineApiRequest': '定义 API 请求',
+  'page.route.steps.stepTitle.defineApiBackendServe': '定义 API 后端服务',
 
-  'route.request.override.input': '手动填写',
-  'route.request.override.domain.name.or.ip': '域名/IP',
-  'route.request.override.use.domain.name.default.analysis':
-    '使用域名时,默认解析本地:/etc/resolv.conf',
-  'route.request.override.input.domain.or.ip': '请输入域名/IP',
-  'route.request.override.domain.or.ip.rules': '仅支持字母、数字和 . ',
-  'route.request.override.input.port.number': '请输入端口号',
-  'route.request.override.port.number': '端口号',
-  'route.request.override.input.weight': '请输入权重',
-  'route.request.override.weight': '权重',
-  'route.request.override.create': '创建',
-  'route.request.override': '请求改写',
-  'route.request.override.protocol': '协议',
-  'route.request.override.select.protocol': '请选择协议',
-  'route.request.override.stay.same': '保持原样',
-  'route.request.override.path': '请求路径',
-  'route.request.override.edit': '编辑',
-  'route.request.override.new.path': '新路径',
-  'route.request.override.input.path': '请输入请求路径',
-  'route.request.override.path.example': '例如:/foo/bar/index.html',
-  'route.request.override.upstream': '上游',
-  'route.request.override.connection.timeout': '连接超时',
-  'route.request.override.input.connection.timeout': '请输入连接超时时间',
-  'route.request.override.send.timeout': '发送超时',
-  'route.request.override.inout.send.timeout': '请输入发送超时时间',
-  'route.request.override.receive.timeout': '接收超时',
-  'route.request.override.inout.receive.timeout': '请输入接收超时时间',
+  // panelSection
+  'page.route.panelSection.title.nameDescription': '名称及其描述',
+  'page.route.panelSection.title.httpOverrideRequestHeader': 'HTTP 请求头改写',
+  'page.route.panelSection.title.requestOverride': '请求改写',
+  'page.route.panelSection.title.requestConfigBasicDefine': '请求基础定义',
+  'page.route.panelSection.title.advancedMatchRule': '高级路由匹配条件',
 
-  'route.constants.define.api.request': '定义 API 请求',
-  'route.constants.preview': '预览',
-  'route.constants.define.api.backend.serve': '定义 API 后端服务',
-  'route.constants.plugin.configuration': '插件配置',
+  'page.route.httpAction': '行为',
+  'page.route.httpOverrideOrCreate': '重写/创建',
 
-  'route.create.management': '路由管理',
+  'page.route.form.itemLabel.domainNameOrIp': '域名/IP',
+  'page.route.form.itemExtraMessage.domainNameOrIp': '使用域名时,默认解析本地:/etc/resolv.conf',
+  'page.route.form.itemRulesPatternMessage.domainNameOrIp': '仅支持字母、数字和 . ',
+  'page.route.portNumber': '端口号',
+  'page.route.weight': '权重',
 
-  'route.list.name': '名称',
-  'route.list.domain.name': '域名',
-  'route.list.path': '路径',
-  'route.list.description': '描述',
-  'route.list.group.name': '路由分组',
-  'route.list.status': '状态',
-  'route.list.status.publish': '已发布',
-  'route.list.status.offline': '未发布',
-  'route.list.edit.time': '编辑时间',
-  'route.list.operation': '操作',
-  'route.list.edit': '编辑',
-  'route.list.publish': '发布',
-  'route.list.debug': '在线调试',
-  'route.list.publish.success': 'API发布成功!',
-  'route.list.offline': '下线',
-  'route.list.offline.success': 'API下线成功!',
-  'route.list.offline.confirm': '确定下线该路由吗?',
-  'route.list.delete.confrim': '确定删除该路由吗?',
-  'route.list.delete.success': '删除成功!',
-  'route.list.confirm': '确认',
-  'route.list.cancel': '取消',
-  'route.list.delete': '删除',
-  'route.list': '路由列表',
-  'route.list.input': '请输入',
-  'route.list.create': '创建',
   'page.route.radio.static': '静态重写',
   'page.route.radio.regx': '正则重写',
   'page.route.form.itemLabel.from': '原路径',
   'page.route.form.itemHelp.status': '路由创建后是否可以使用, 默认值为 false',
+  'page.route.radio.staySame': '保持原样',
+  'page.route.input.placeholder.newPath': '例如:/foo/bar/index.html',
+  'page.route.form.itemLabel.newPath': '新地址',
+  'page.route.popconfirm.title.offline': '确定下线该路由吗?',
 };
diff --git a/src/pages/RouteGroup/Create.tsx b/src/pages/RouteGroup/Create.tsx
index 80213a2..8008e49 100644
--- a/src/pages/RouteGroup/Create.tsx
+++ b/src/pages/RouteGroup/Create.tsx
@@ -47,9 +47,11 @@ const Page: React.FC = (props) => {
       notification.success({
         message: `${
           gid
-            ? formatMessage({ id: 'routegroup.create.edit' })
-            : formatMessage({ id: 'routegroup.create.create' })
-        } ${formatMessage({ id: 'routegroup.create.routegroup.successfully' })}`,
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        }${formatMessage({ id: 'menu.routegroup' })}${formatMessage({
+          id: 'component.status.success',
+        })}`,
       });
       history.replace('/routegroup/list');
     });
@@ -69,11 +71,19 @@ const Page: React.FC = (props) => {
 
   return (
     <>
-      <PageContainer title={formatMessage({ id: 'routegroup.create.create' })}>
+      <PageContainer
+        title={`${
+          (props as any).match.params.gid
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        }${formatMessage({ id: 'menu.routegroup' })}`}
+      >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>
-            <Steps.Step title={formatMessage({ id: 'routegroup.create.basic.info' })} />
-            <Steps.Step title={formatMessage({ id: 'routegroup.create.preview' })} />
+            <Steps.Step
+              title={formatMessage({ id: 'component.global.steps.stepTitle.basicInformation' })}
+            />
+            <Steps.Step title={formatMessage({ id: 'component.global.steps.stepTitle.preview' })} />
           </Steps>
 
           {step === 1 && <Step1 form={form1} />}
diff --git a/src/pages/RouteGroup/List.tsx b/src/pages/RouteGroup/List.tsx
index b2da173..8d8d071 100644
--- a/src/pages/RouteGroup/List.tsx
+++ b/src/pages/RouteGroup/List.tsx
@@ -32,20 +32,20 @@ const Page: React.FC = () => {
 
   const columns: ProColumns<RouteGroupModule.RouteGroupEntity>[] = [
     {
-      title: formatMessage({ id: 'routegroup.list.name' }),
+      title: formatMessage({ id: 'component.global.name' }),
       dataIndex: 'name',
     },
     {
-      title: formatMessage({ id: 'routegroup.list.description' }),
+      title: formatMessage({ id: 'component.global.description' }),
       dataIndex: 'description',
     },
     {
-      title: formatMessage({ id: 'routegroup.list.edit.time' }),
+      title: formatMessage({ id: 'component.global.editTime' }),
       dataIndex: 'update_time',
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: formatMessage({ id: 'routegroup.list.operation' }),
+      title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -54,16 +54,18 @@ const Page: React.FC = () => {
             style={{ marginRight: 10 }}
             onClick={() => history.push(`/routegroup/${record.id}/edit`)}
           >
-            {formatMessage({ id: 'routegroup.list.edit' })}
+            {formatMessage({ id: 'component.global.edit' })}
           </Button>
           <Popconfirm
-            title={formatMessage({ id: 'routegroup.list.confirm.delete' })}
-            okText={formatMessage({ id: 'routegroup.list.confirm' })}
-            cancelText={formatMessage({ id: 'routegroup.list.cancel' })}
+            title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
+            okText={formatMessage({ id: 'component.global.confirm' })}
+            cancelText={formatMessage({ id: 'component.global.cancel' })}
             onConfirm={() => {
               remove(record.id!).then(() => {
                 notification.success({
-                  message: formatMessage({ id: 'routegroup.list.delete.successfully' }),
+                  message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
+                    id: 'menu.routegroup',
+                  })} ${formatMessage({ id: 'component.status.success' })}`,
                 });
                 /* eslint-disable no-unused-expressions */
                 ref.current?.reload();
@@ -71,7 +73,7 @@ const Page: React.FC = () => {
             }}
           >
             <Button type="primary" danger>
-              {formatMessage({ id: 'routegroup.list.delete' })}
+              {formatMessage({ id: 'component.global.delete' })}
             </Button>
           </Popconfirm>
         </>
@@ -80,7 +82,11 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageContainer title={formatMessage({ id: 'routegroup.list' })}>
+    <PageContainer
+      title={`${formatMessage({ id: 'menu.routegroup' })}${formatMessage({
+        id: 'component.global.list',
+      })}`}
+    >
       <ProTable<RouteGroupModule.RouteGroupEntity>
         actionRef={ref}
         columns={columns}
@@ -89,7 +95,7 @@ const Page: React.FC = () => {
         request={(params) => fetchList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder={formatMessage({ id: 'routegroup.list.input' })}
+            placeholder={formatMessage({ id: 'component.global.pleaseEnter' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -98,7 +104,7 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push('/routegroup/create')}>
             <PlusOutlined />
-            {formatMessage({ id: 'routegroup.list.create' })}
+            {formatMessage({ id: 'component.global.create' })}
           </Button>,
         ]}
       />
diff --git a/src/pages/RouteGroup/components/Step1.tsx b/src/pages/RouteGroup/components/Step1.tsx
index 59f5dc4..89e61b3 100644
--- a/src/pages/RouteGroup/components/Step1.tsx
+++ b/src/pages/RouteGroup/components/Step1.tsx
@@ -36,19 +36,19 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
   return (
     <Form {...FORM_ITEM_LAYOUT} form={form} initialValues={initialValues}>
       <Form.Item
-        label={formatMessage({ id: 'routegroup.step.name' })}
+        label={formatMessage({ id: 'component.global.name' })}
         name="name"
         rules={[{ required: true }]}
-        extra={formatMessage({ id: 'routegroup.step.name.should.unique' })}
+        extra={formatMessage({ id: 'component.global.form.itemExtraMessage.nameGloballyUnique' })}
       >
         <Input
-          placeholder={formatMessage({ id: 'routegroup.step.input.routegroup.name' })}
+          placeholder={formatMessage({ id: 'page.routegroup.input.placeholder.name' })}
           disabled={disabled}
         />
       </Form.Item>
-      <Form.Item label={formatMessage({ id: 'routegroup.step.description' })} name="description">
+      <Form.Item label={formatMessage({ id: 'component.global.description' })} name="description">
         <Input.TextArea
-          placeholder={formatMessage({ id: 'routegroup.step.input.description' })}
+          placeholder={formatMessage({ id: 'component.global.input.placeholder.description' })}
           disabled={disabled}
         />
       </Form.Item>
diff --git a/src/pages/RouteGroup/locales/en-US.ts b/src/pages/RouteGroup/locales/en-US.ts
index 318809d..0338a7a 100644
--- a/src/pages/RouteGroup/locales/en-US.ts
+++ b/src/pages/RouteGroup/locales/en-US.ts
@@ -15,31 +15,5 @@
  * limitations under the License.
  */
 export default {
-  'routegroup.step.create': 'Create',
-  'routegroup.step.name': 'Name',
-  'routegroup.step.name.should.unique': 'Name should be unique',
-  'routegroup.step.input.routegroup.name': 'Please input routegroup name',
-  'routegroup.step.description': 'Description',
-  'routegroup.step.input.description': 'Please input description',
-
-  'routegroup.create.edit': 'Edit',
-  'routegroup.create.create': 'Create',
-  'routegroup.create.routegroup.successfully': 'routegroup successfully',
-  'routegroup.create.basic.info': 'Basic Information',
-  'routegroup.create.preview': 'Preview',
-
-  'routegroup.list.name': 'Name',
-  'routegroup.list.type': 'Type',
-  'routegroup.list.description': 'Description',
-  'routegroup.list.edit.time': 'Edit Time',
-  'routegroup.list.operation': 'Operation',
-  'routegroup.list.edit': 'Edit',
-  'routegroup.list.confirm.delete': 'Are you sure to delete ?',
-  'routegroup.list.confirm': 'Confirm',
-  'routegroup.list.cancel': 'Cancel',
-  'routegroup.list.delete.successfully': 'Delete successfully',
-  'routegroup.list.delete': 'Delete',
-  'routegroup.list': 'routegroup List',
-  'routegroup.list.input': 'Please input',
-  'routegroup.list.create': 'Create',
+  'page.routegroup.input.placeholder.name': 'Please input routegroup name',
 };
diff --git a/src/pages/RouteGroup/locales/zh-CN.ts b/src/pages/RouteGroup/locales/zh-CN.ts
index 9797ae4..cf4b167 100644
--- a/src/pages/RouteGroup/locales/zh-CN.ts
+++ b/src/pages/RouteGroup/locales/zh-CN.ts
@@ -15,31 +15,5 @@
  * limitations under the License.
  */
 export default {
-  'routegroup.step.create': '创建',
-  'routegroup.step.name': '名称',
-  'routegroup.step.name.should.unique': '名称需全局唯一',
-  'routegroup.step.input.routegroup.name': '请输入分组名称',
-  'routegroup.step.description': '描述',
-  'routegroup.step.input.description': '请输入描述',
-
-  'routegroup.create.edit': '编辑',
-  'routegroup.create.create': '创建',
-  'routegroup.create.routegroup.successfully': '分组成功',
-  'routegroup.create.basic.info': '基础信息',
-  'routegroup.create.preview': '预览',
-
-  'routegroup.list.name': '名称',
-  'routegroup.list.type': '类型',
-  'routegroup.list.description': '描述',
-  'routegroup.list.edit.time': '编辑时间',
-  'routegroup.list.operation': '操作',
-  'routegroup.list.edit': '编辑',
-  'routegroup.list.confirm.delete': '确定删除该条记录吗?',
-  'routegroup.list.confirm': '确定',
-  'routegroup.list.cancel': '取消',
-  'routegroup.list.delete.successfully': '删除记录成功',
-  'routegroup.list.delete': '删除',
-  'routegroup.list': '分组列表',
-  'routegroup.list.input': '请输入',
-  'routegroup.list.create': '创建',
+  'page.routegroup.input.placeholder.name': '请输入分组名称',
 };
diff --git a/src/pages/SSL/Create.tsx b/src/pages/SSL/Create.tsx
index fc39b33..01b64a2 100644
--- a/src/pages/SSL/Create.tsx
+++ b/src/pages/SSL/Create.tsx
@@ -50,7 +50,11 @@ const Page: React.FC = (props) => {
         setStep(2);
       })
       .catch(() => {
-        notification.warning({ message: formatMessage({ id: 'ssl.create.check' }) });
+        notification.warning({
+          message: `${formatMessage({ id: 'component.global.pleaseCheck' })}${formatMessage({
+            id: 'page.ssl.form.itemLabel.cert',
+          })}`,
+        });
       });
   };
 
@@ -84,12 +88,18 @@ const Page: React.FC = (props) => {
 
   return (
     <>
-      <PageHeaderWrapper title={formatMessage({ id: 'ssl.create' })}>
+      <PageHeaderWrapper
+        title={`${
+          (props as any).match.params.id
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        }${formatMessage({ id: 'menu.ssl' })}`}
+      >
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>
             {[
-              formatMessage({ id: 'ssl.create.complete.cert.info' }),
-              formatMessage({ id: 'ssl.create.preview' }),
+              formatMessage({ id: 'page.ssl.steps.stepTitle.completeCertInfo' }),
+              formatMessage({ id: 'component.global.steps.stepTitle.preview' }),
             ].map((item) => (
               <Steps.Step title={item} key={item} />
             ))}
diff --git a/src/pages/SSL/List.tsx b/src/pages/SSL/List.tsx
index 0966d3f..8d9ebf2 100644
--- a/src/pages/SSL/List.tsx
+++ b/src/pages/SSL/List.tsx
@@ -33,7 +33,11 @@ const Page: React.FC = () => {
   const onEnableChange = (id: string, checked: boolean) => {
     switchEnable(id, checked)
       .then(() => {
-        notification.success({ message: formatMessage({ id: 'ssl.list.update.cert.enable.status.successful' }) });
+        notification.success({
+          message: formatMessage({
+            id: 'page.ssl.notification.updateCertEnableStatusSuccessfully',
+          }),
+        });
       })
       .catch(() => {
         /* eslint-disable no-unused-expressions */
@@ -54,13 +58,13 @@ const Page: React.FC = () => {
       },
     },
     {
-      title: formatMessage({ id: 'ssl.list.expiration.time' }),
+      title: formatMessage({ id: 'page.ssl.list.expirationTime' }),
       dataIndex: 'validity_end',
       hideInSearch: true,
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: formatMessage({ id: 'ssl.list.if.enable' }),
+      title: formatMessage({ id: 'page.ssl.list.ifEnable' }),
       dataIndex: 'status',
       hideInSearch: true,
       render: (text, record) => (
@@ -73,13 +77,13 @@ const Page: React.FC = () => {
       ),
     },
     {
-      title: formatMessage({ id: 'ssl.list.update.time' }),
+      title: formatMessage({ id: 'component.global.editTime' }),
       dataIndex: 'update_time',
       hideInSearch: true,
       render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`,
     },
     {
-      title: formatMessage({ id: 'ssl.list.operation' }),
+      title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
       render: (_, record) => (
         <>
@@ -90,10 +94,10 @@ const Page: React.FC = () => {
             }}
             style={{ marginRight: 10 }}
           >
-            {formatMessage({ id: 'ssl.list.edit' })}
+            {formatMessage({ id: 'component.global.edit' })}
           </Button>
           <Popconfirm
-            title={formatMessage({ id: 'ssl.list.delete' })}
+            title={formatMessage({ id: 'component.global.delete' })}
             onConfirm={() =>
               removeSSL(record.id).then(() => {
                 notification.success({
@@ -103,8 +107,8 @@ const Page: React.FC = () => {
                 requestAnimationFrame(() => tableRef.current?.reload());
               })
             }
-            cancelText={formatMessage({ id: 'ssl.list.cancel' })}
-            okText={formatMessage({ id: 'ssl.list.confirm' })}
+            cancelText={formatMessage({ id: 'component.global.cancel' })}
+            okText={formatMessage({ id: 'component.global.confirm' })}
           >
             <Button type="primary" danger>
               {formatMessage({ id: 'component.global.remove' })}
@@ -114,7 +118,7 @@ const Page: React.FC = () => {
       ),
     },
     {
-      title: formatMessage({ id: 'ssl.list.period.of.validity' }),
+      title: formatMessage({ id: 'page.ssl.list.periodOfValidity' }),
       dataIndex: 'expire_range',
       hideInTable: true,
       hideInSearch: true,
@@ -122,7 +126,11 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'ssl.list' })}>
+    <PageHeaderWrapper
+      title={`${formatMessage({ id: 'menu.ssl' })}${formatMessage({
+        id: 'component.global.list',
+      })}`}
+    >
       <ProTable<SSLModule.ResSSL>
         search={false}
         rowKey="id"
@@ -131,7 +139,7 @@ const Page: React.FC = () => {
         request={(params) => fetchSSLList(params, search)}
         toolBarRender={(action) => [
           <Input.Search
-            placeholder={formatMessage({ id: 'ssl.list.input' })}
+            placeholder={formatMessage({ id: 'component.global.pleaseEnter' })}
             onSearch={(value) => {
               setSearch(value);
               action.setPageInfo({ page: 1 });
@@ -140,7 +148,7 @@ const Page: React.FC = () => {
           />,
           <Button type="primary" onClick={() => history.push(`/ssl/create`)}>
             <PlusOutlined />
-            {formatMessage({ id: 'ssl.list.create' })}
+            {formatMessage({ id: 'component.global.create' })}
           </Button>,
         ]}
       />
diff --git a/src/pages/SSL/components/CertificateForm/index.tsx b/src/pages/SSL/components/CertificateForm/index.tsx
index cddc39c..a0a4b26 100644
--- a/src/pages/SSL/components/CertificateForm/index.tsx
+++ b/src/pages/SSL/components/CertificateForm/index.tsx
@@ -45,7 +45,7 @@ const CertificateForm: React.FC<CertificateFormProps> = ({ mode, form }) => {
     if (mode === 'VIEW') {
       return (
         <Form.Item
-          label={formatMessage({ id: 'ssl.form.expiration.time' })}
+          label={formatMessage({ id: 'page.ssl.form.itemLabel.expireTime' })}
           name="expireTime"
           rules={[{ required: true, message: 'ExpireTime' }]}
         >
@@ -60,11 +60,19 @@ const CertificateForm: React.FC<CertificateFormProps> = ({ mode, form }) => {
     <Form form={form} layout="horizontal" initialValues={form?.getFieldsValue()}>
       {renderSNI()}
       <Form.Item
-        label={formatMessage({ id: 'ssl.form.cert' })}
+        label={formatMessage({ id: 'page.ssl.form.itemLabel.cert' })}
         name="cert"
         rules={[
-          { required: true, message: formatMessage({ id: 'ssl.form.check.cert.value' }) },
-          { min: 128, message: formatMessage({ id: 'ssl.form.cert.value.length' }) },
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseCheck' })}${formatMessage({
+              id: 'page.ssl.form.itemLabel.cert',
+            })}`,
+          },
+          {
+            min: 128,
+            message: formatMessage({ id: 'page.ssl.form.itemRuleMessage.certValueLength' }),
+          },
         ]}
       >
         <Input.TextArea
@@ -74,11 +82,19 @@ const CertificateForm: React.FC<CertificateFormProps> = ({ mode, form }) => {
         />
       </Form.Item>
       <Form.Item
-        label={formatMessage({ id: 'ssl.form.private.key' })}
+        label={formatMessage({ id: 'page.ssl.form.itemLabel.privateKey' })}
         name="key"
         rules={[
-          { required: true, message: formatMessage({ id: 'ssl.form.check.key.value' }) },
-          { min: 128, message: formatMessage({ id: 'ssl.form.key.value.length' }) },
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseCheck' })}${formatMessage({
+              id: 'page.ssl.form.itemLabel.privateKey',
+            })}`,
+          },
+          {
+            min: 128,
+            message: formatMessage({ id: 'page.ssl.form.itemRuleMessage.privateKeyLength' }),
+          },
         ]}
       >
         <Input.TextArea rows={6} disabled={mode !== 'EDIT'} />
diff --git a/src/pages/SSL/components/CertificateUploader/index.tsx b/src/pages/SSL/components/CertificateUploader/index.tsx
index 89f52a2..8b56803 100644
--- a/src/pages/SSL/components/CertificateUploader/index.tsx
+++ b/src/pages/SSL/components/CertificateUploader/index.tsx
@@ -84,7 +84,7 @@ const CertificateUploader: React.FC<UploaderProps> = ({ onSuccess, onRemove, dat
           beforeUpload={(file, fileList) => beforeUpload(file, fileList, 'PUBLIC_KEY')}
         >
           <Button disabled={publicKeyList.length === 1}>
-            <UploadOutlined /> {formatMessage({ id: 'ssl.upload.cert' })}
+            <UploadOutlined /> {formatMessage({ id: 'page.ssl.button.uploadCert' })}
           </Button>
         </Upload>
       </Form.Item>
@@ -96,7 +96,10 @@ const CertificateUploader: React.FC<UploaderProps> = ({ onSuccess, onRemove, dat
           beforeUpload={(file, fileList) => beforeUpload(file, fileList, 'PRIVATE_KEY')}
         >
           <Button disabled={privateKeyList.length === 1}>
-            <UploadOutlined /> {formatMessage({ id: 'ssl.upload.private.key' })}
+            <UploadOutlined />{' '}
+            {`${formatMessage({ id: 'page.ssl.upload' })}${formatMessage({
+              id: 'page.ssl.form.itemLabel.privateKey',
+            })}`}
           </Button>
         </Upload>
       </Form.Item>
diff --git a/src/pages/SSL/components/Step1/index.tsx b/src/pages/SSL/components/Step1/index.tsx
index c0aad19..af4341a 100644
--- a/src/pages/SSL/components/Step1/index.tsx
+++ b/src/pages/SSL/components/Step1/index.tsx
@@ -53,14 +53,16 @@ const Step: React.FC<Props> = ({ form }) => {
   return (
     <>
       <Form.Item
-        label={formatMessage({ id: 'ssl.step.way' })}
+        label={formatMessage({ id: 'page.ssl.form.itemLabel.way' })}
         required
         extra={
-          window.location.pathname.indexOf('edit') === -1 ? '' : formatMessage({ id: 'ssl.step.rules' })
+          window.location.pathname.indexOf('edit') === -1
+            ? ''
+            : formatMessage({ id: 'page.ssl.form.itemExtraMessage.way' })
         }
       >
         <Select
-          placeholder={formatMessage({ id: 'ssl.step.select.create.ways' })}
+          placeholder={formatMessage({ id: 'page.ssl.select.placeholder.selectCreateWays' })}
           defaultValue="Input"
           onChange={(value: CreateType) => {
             form.setFieldsValue({
@@ -73,8 +75,10 @@ const Step: React.FC<Props> = ({ form }) => {
           }}
           style={{ width: 100 }}
         >
-          <Select.Option value="Input">{formatMessage({ id: 'ssl.step.input' })}</Select.Option>
-          <Select.Option value="Upload">{formatMessage({ id: 'ssl.step.upload' })}</Select.Option>
+          <Select.Option value="Input">
+            {formatMessage({ id: 'page.ssl.selectOption.input' })}
+          </Select.Option>
+          <Select.Option value="Upload">{formatMessage({ id: 'page.ssl.upload' })}</Select.Option>
         </Select>
       </Form.Item>
       <div style={createType === 'Input' ? {} : { display: 'none' }}>
diff --git a/src/pages/SSL/locales/en-US.ts b/src/pages/SSL/locales/en-US.ts
index 50c9b71..c80b97d 100644
--- a/src/pages/SSL/locales/en-US.ts
+++ b/src/pages/SSL/locales/en-US.ts
@@ -15,42 +15,28 @@
  * limitations under the License.
  */
 export default {
-  'ssl.form.expiration.time': 'Expiration Time',
-  'ssl.form.cert': 'Certificate Content',
-  'ssl.form.check.cert.value': 'Please check Certificate Content',
-  'ssl.form.cert.value.length': 'The Certificate Content requires at least 128 characters',
-  'ssl.form.private.key': 'Private Key',
-  'ssl.form.check.key.value': 'Please check Private Key',
-  'ssl.form.key.value.length': 'The Private Key requires at least 128 characters',
+  'page.ssl.form.itemLabel.expireTime': 'Expiration Time',
+  'page.ssl.form.itemLabel.cert': 'Certificate Content',
+  'page.ssl.form.itemRuleMessage.certValueLength':
+    'The Certificate Content requires at least 128 characters',
+  'page.ssl.form.itemLabel.privateKey': 'Private Key',
+  'page.ssl.form.itemRuleMessage.privateKeyLength':
+    'The Private Key requires at least 128 characters',
   'page.ssl.textAreaPlaceholder.cert': 'Please enter the SSL Certificate Content',
 
-  'ssl.upload.cert': 'Upload Certificate',
-  'ssl.upload.private.key': 'Upload Private Key',
+  'page.ssl.button.uploadCert': 'Upload Certificate',
 
-  'ssl.step.way': 'Way',
-  'ssl.step.rules':
+  'page.ssl.form.itemLabel.way': 'Way',
+  'page.ssl.form.itemExtraMessage.way':
     'The new certificate should contain the same about SNI as the current certificate',
-  'ssl.step.select.create.ways': 'Please select create ways',
-  'ssl.step.input': 'Input',
-  'ssl.step.upload': 'Upload',
+  'page.ssl.select.placeholder.selectCreateWays': 'Please select create ways',
+  'page.ssl.selectOption.input': 'Input',
+  'page.ssl.upload': 'Upload',
 
-  'ssl.create.check': 'Please check certificate content',
-  'ssl.create': 'Create Certificate',
-  'ssl.create.complete.cert.info': 'Complete Certificate Information',
-  'ssl.create.preview': 'Preview',
-
-  'ssl.list.update.cert.enable.status.successfully':
+  'page.ssl.notification.updateCertEnableStatusSuccessfully':
     'Update certificate enable status successfully',
-  'ssl.list.expiration.time': 'Expiration Time',
-  'ssl.list.if.enable': 'If Enable',
-  'ssl.list.update.time': 'Update Time',
-  'ssl.list.operation': 'Operation',
-  'ssl.list.edit': 'Edit',
-  'ssl.list.delete': 'Delete',
-  'ssl.list.cancel': 'Cancle',
-  'ssl.list.confirm': 'Confirm',
-  'ssl.list.period.of.validity': 'Period Of Validity',
-  'ssl.list': 'Certificate List',
-  'ssl.list.input': 'Please input',
-  'ssl.list.create': 'Create',
+  'page.ssl.list.expirationTime': 'Expiration Time',
+  'page.ssl.list.ifEnable': 'If Enable',
+  'page.ssl.list.periodOfValidity': 'Period Of Validity',
+  'page.ssl.steps.stepTitle.completeCertInfo': 'Complete Certificate Information',
 };
diff --git a/src/pages/SSL/locales/zh-CN.ts b/src/pages/SSL/locales/zh-CN.ts
index d9c1660..232c80a 100644
--- a/src/pages/SSL/locales/zh-CN.ts
+++ b/src/pages/SSL/locales/zh-CN.ts
@@ -15,40 +15,24 @@
  * limitations under the License.
  */
 export default {
-  'ssl.form.expiration.time': '过期时间',
-  'ssl.form.cert': '证书内容',
-  'ssl.form.check.cert.value': '请检查 证书内容',
-  'ssl.form.cert.value.length': '证书内容至少需要128个字符',
-  'ssl.form.private.key': '私钥',
-  'ssl.form.check.key.value': '请检查 私钥',
-  'ssl.form.key.value.length': '私钥 至少需要128个字符',
+  'page.ssl.form.itemLabel.expireTime': '过期时间',
+  'page.ssl.form.itemLabel.cert': '证书内容',
+  'page.ssl.form.itemRuleMessage.certValueLength': '证书内容至少需要128个字符',
+  'page.ssl.form.itemLabel.privateKey': '私钥',
+  'page.ssl.form.itemRuleMessage.privateKeyLength': '私钥 至少需要128个字符',
   'page.ssl.textAreaPlaceholder.cert': '请填写SSL证书内容',
 
-  'ssl.upload.cert': '上传证书',
-  'ssl.upload.private.key': '上传私钥',
+  'page.ssl.button.uploadCert': '上传证书',
 
-  'ssl.step.way': '方式',
-  'ssl.step.rules': '新证书所含 SNI 应与当前证书一致',
-  'ssl.step.select.create.ways': '请选择创建方式',
-  'ssl.step.input': '输入',
-  'ssl.step.upload': '上传',
+  'page.ssl.form.itemLabel.way': '方式',
+  'page.ssl.form.itemExtraMessage.way': '新证书所含 SNI 应与当前证书一致',
+  'page.ssl.select.placeholder.selectCreateWays': '请选择创建方式',
+  'page.ssl.selectOption.input': '输入',
+  'page.ssl.upload': '上传',
 
-  'ssl.create.check': '请检查证书内容',
-  'ssl.create': '证书创建',
-  'ssl.create.complete.cert.info': '完善证书信息',
-  'ssl.create.preview': '预览',
-
-  'ssl.list.update.cert.enable.status.successful': '更新证书启用状态成功',
-  'ssl.list.expiration.time': '过期时间',
-  'ssl.list.if.enable': '是否启用',
-  'ssl.list.update.time': '更新时间',
-  'ssl.list.operation': '操作',
-  'ssl.list.edit': '编辑',
-  'ssl.list.delete': '删除',
-  'ssl.list.cancel': '取消',
-  'ssl.list.confirm': '确定',
-  'ssl.list.period.of.validity': '有效期',
-  'ssl.list': '证书列表',
-  'ssl.list.input': '请输入',
-  'ssl.list.create': '创建',
+  'page.ssl.notification.updateCertEnableStatusSuccessfully': '更新证书启用状态成功',
+  'page.ssl.list.expirationTime': '过期时间',
+  'page.ssl.list.ifEnable': '是否启用',
+  'page.ssl.list.periodOfValidity': '有效期',
+  'page.ssl.steps.stepTitle.completeCertInfo': '完善证书信息',
 };