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/12/28 08:11:02 UTC

[apisix-dashboard] branch guoqi/dev created (now f3958dc)

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

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


      at f3958dc  style: format codes

This branch includes the following new commits:

     new f3958dc  style: format codes

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[apisix-dashboard] 01/01: style: format codes

Posted by ju...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit f3958dc767c27d4cf4ba9b1c6a0b2e3717b2f75b
Author: juzhiyuan <ju...@apache.org>
AuthorDate: Mon Dec 28 16:10:42 2020 +0800

    style: format codes
---
 web/cypress.json                                   |   8 +-
 web/cypress/fixtures/certificate.json              |  18 +--
 .../consumer/create_and_delete_consumer.spec.js    |  30 +++--
 .../integration/metrics/metrics-smoketest.spec.js  |  10 +-
 .../route/create-and-delete-route.spec.js          |  18 +--
 .../settings/settings-smoketest.spec.js            |  14 +--
 web/cypress/integration/ssl/ssl-smoketest.spec.js  |  11 +-
 .../upstream/create_and_delete_upstream.spec.js    |  14 ++-
 web/cypress/integration/user/login.spec.js         |   4 +-
 web/cypress/integration/user/logout.spec.js        |   6 +-
 web/cypress/plugins/index.js                       |   2 +-
 web/cypress/support/commands.js                    |  25 ++--
 web/cypress/support/index.js                       |   6 +-
 web/src/components/Plugin/PluginPage.tsx           |   6 +-
 web/src/components/RightContent/AvatarDropdown.tsx |   4 +-
 web/src/components/Upstream/UpstreamForm.tsx       | 132 ++++++++++++---------
 web/src/helpers.tsx                                |  16 +--
 web/src/locales/en-US/menu.ts                      |   2 -
 web/src/locales/zh-CN/menu.ts                      |   2 -
 web/src/pages/Route/Create.tsx                     |  11 +-
 web/src/pages/Route/List.tsx                       |  12 +-
 .../Route/components/DebugViews/DebugDrawView.tsx  |   2 +-
 .../pages/Route/components/Step1/LabelsDrawer.tsx  |   8 +-
 web/src/pages/Route/components/Step1/MetaView.tsx  |   2 +-
 .../Route/components/Step1/RequestConfigView.tsx   |  21 ++--
 web/src/pages/Route/constants.ts                   |   5 +-
 web/src/pages/Route/service.ts                     |  10 +-
 web/src/pages/Route/transform.ts                   |  12 +-
 web/src/pages/Route/typing.d.ts                    |  10 +-
 web/src/pages/ServerInfo/List.tsx                  |   2 +-
 web/src/pages/ServerInfo/service.ts                |   6 +-
 web/src/pages/Service/Create.tsx                   |  81 ++++++-------
 web/src/pages/Service/List.tsx                     |  41 ++++---
 web/src/pages/Service/components/Step1.tsx         |  46 ++++---
 web/src/pages/Service/locales/en-US.ts             |   8 +-
 web/src/pages/Service/locales/zh-CN.ts             |   8 +-
 web/src/pages/Service/service.ts                   |   5 +-
 web/src/pages/Service/typing.d.ts                  |  51 ++++----
 web/src/pages/Upstream/locales/en-US.ts            |  62 +++++-----
 web/src/pages/Upstream/locales/zh-CN.ts            |  59 +++++----
 40 files changed, 410 insertions(+), 380 deletions(-)

diff --git a/web/cypress.json b/web/cypress.json
index a326fda..b937532 100644
--- a/web/cypress.json
+++ b/web/cypress.json
@@ -1,6 +1,6 @@
 {
-    "viewportWidth": 1920,
-    "viewportHeight": 1080,
-    "baseUrl": "http://localhost:8000",
-    "video": false
+  "viewportWidth": 1920,
+  "viewportHeight": 1080,
+  "baseUrl": "http://localhost:8000",
+  "video": false
 }
diff --git a/web/cypress/fixtures/certificate.json b/web/cypress/fixtures/certificate.json
index a7a36d7..b29126e 100644
--- a/web/cypress/fixtures/certificate.json
+++ b/web/cypress/fixtures/certificate.json
@@ -1,11 +1,11 @@
 {
-	"valid": {
-		"cert": "-----BEGIN CERTIFICATE-----\nMIIENzCCAx+gAwIBAgICEAAwDQYJKoZIhvcNAQELBQAwaTELMAkGA1UEBhMCQ04x\nEjAQBgNVBAgMCUd1YW5nZG9uZzESMBAGA1UEBwwJR3Vhbmd6aG91MRQwEgYDVQQK\nDAtGaXNoZHJvd25lZDEcMBoGA1UEAwwTRmlzaGRyb3duZWQgUk9PVCBDQTAeFw0y\nMDExMDYwOTQ3NDhaFw0yMjExMDYwOTQ3NDhaMH8xCzAJBgNVBAYTAkNOMRIwEAYD\nVQQIDAlHdWFuZ2RvbmcxEjAQBgNVBAcMCUd1YW5nemhvdTEUMBIGA1UECgwLRmlz\naGRyb3duZWQxFzAVBgNVBAsMDnd3dy50ZXN0aGouY29tMRkwFwYDVQQDDBAqLnd3\ndy50ZXN0aGouY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC [...]
-		"key": "-----BEGIN RSA PRIVATE KEY-----\nMIIEpQIBAAKCAQEAzt2VU3JAtNkiUhC/FKA0D3z9gRHaNR2+JYqnMHbetXJXF0oh\nWMKzjmzauaMYXUDPfQ8yc7leR6Gj9Ow5A0sUwlSdH1P0viM1gnQj0kLxeb59vQaW\nSNuPm73C26R6en/Jgu8I09c+gsBkhNykcnLevR5YPw2mOOKgLllmpCJsjqMkUUF1\nSLI503ZK2hVH6FdSntBSYDbQVJVQ8j3M71eKr/D8Z5wN4Px41Y2bTke+xXm/2x5Y\nRkZdtLCx/rbXPnYLruhG/C7aLqlA/ykQV0AWQgu1tc5gnAcT3mb/3y7GlybC8poM\nNPcEWic05hBJhpxlDNllwmUpcLEI3orAfbZnBwIDAQABAoIBAQCGvLCMP3iB0oOW\nLC4pAwelpuV+8d/MhOjajurCmEoKqMSs+K2roHVPKPt1uhMeeh4q+ [...]
-		"sni": "*.www.testhj.com"
-	},
-	"invalid": {
-		"cert": "-----BEGIN CERTIFICATE-----\nMIIENzCCAx+gAwIBAgICEAAwDQYJKoZIhvcNAQELBQAwaTELMAkGA1UEBhMCQ04x\nEjAQBgNVBAgMCUd1YW5nZG9uZzESMBAGA1UEBwwJR3Vhbmd6aG91MRQwEgYDVQQK\n-----END CERTIFICATE-----",
-		"key": "-----BEGIN RSA PRIVATE KEY-----\nMIIEpQIBAAKCAQEAzt2VU3JAtNkiUhC/FKA0D3z9gRHaNR2+JYqnMHbetXJXF0oh\nWMKzjmzauaMYXUDPfQ8yc7leR6Gj9Ow5A0sUwlSdH1P0viM1gnQj0kLxeb59vQaW\n-----END RSA PRIVATE KEY-----"
-	}
+  "valid": {
+    "cert": "-----BEGIN CERTIFICATE-----\nMIIENzCCAx+gAwIBAgICEAAwDQYJKoZIhvcNAQELBQAwaTELMAkGA1UEBhMCQ04x\nEjAQBgNVBAgMCUd1YW5nZG9uZzESMBAGA1UEBwwJR3Vhbmd6aG91MRQwEgYDVQQK\nDAtGaXNoZHJvd25lZDEcMBoGA1UEAwwTRmlzaGRyb3duZWQgUk9PVCBDQTAeFw0y\nMDExMDYwOTQ3NDhaFw0yMjExMDYwOTQ3NDhaMH8xCzAJBgNVBAYTAkNOMRIwEAYD\nVQQIDAlHdWFuZ2RvbmcxEjAQBgNVBAcMCUd1YW5nemhvdTEUMBIGA1UECgwLRmlz\naGRyb3duZWQxFzAVBgNVBAsMDnd3dy50ZXN0aGouY29tMRkwFwYDVQQDDBAqLnd3\ndy50ZXN0aGouY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCg [...]
+    "key": "-----BEGIN RSA PRIVATE KEY-----\nMIIEpQIBAAKCAQEAzt2VU3JAtNkiUhC/FKA0D3z9gRHaNR2+JYqnMHbetXJXF0oh\nWMKzjmzauaMYXUDPfQ8yc7leR6Gj9Ow5A0sUwlSdH1P0viM1gnQj0kLxeb59vQaW\nSNuPm73C26R6en/Jgu8I09c+gsBkhNykcnLevR5YPw2mOOKgLllmpCJsjqMkUUF1\nSLI503ZK2hVH6FdSntBSYDbQVJVQ8j3M71eKr/D8Z5wN4Px41Y2bTke+xXm/2x5Y\nRkZdtLCx/rbXPnYLruhG/C7aLqlA/ykQV0AWQgu1tc5gnAcT3mb/3y7GlybC8poM\nNPcEWic05hBJhpxlDNllwmUpcLEI3orAfbZnBwIDAQABAoIBAQCGvLCMP3iB0oOW\nLC4pAwelpuV+8d/MhOjajurCmEoKqMSs+K2roHVPKPt1uhMeeh4 [...]
+    "sni": "*.www.testhj.com"
+  },
+  "invalid": {
+    "cert": "-----BEGIN CERTIFICATE-----\nMIIENzCCAx+gAwIBAgICEAAwDQYJKoZIhvcNAQELBQAwaTELMAkGA1UEBhMCQ04x\nEjAQBgNVBAgMCUd1YW5nZG9uZzESMBAGA1UEBwwJR3Vhbmd6aG91MRQwEgYDVQQK\n-----END CERTIFICATE-----",
+    "key": "-----BEGIN RSA PRIVATE KEY-----\nMIIEpQIBAAKCAQEAzt2VU3JAtNkiUhC/FKA0D3z9gRHaNR2+JYqnMHbetXJXF0oh\nWMKzjmzauaMYXUDPfQ8yc7leR6Gj9Ow5A0sUwlSdH1P0viM1gnQj0kLxeb59vQaW\n-----END RSA PRIVATE KEY-----"
+  }
 }
diff --git a/web/cypress/integration/consumer/create_and_delete_consumer.spec.js b/web/cypress/integration/consumer/create_and_delete_consumer.spec.js
index bae929d..e434df7 100644
--- a/web/cypress/integration/consumer/create_and_delete_consumer.spec.js
+++ b/web/cypress/integration/consumer/create_and_delete_consumer.spec.js
@@ -21,13 +21,13 @@ context('Create and Delete Consumer', () => {
   const sleepTime = 100;
   const domSelectors = {
     notification: '.ant-notification-notice-message',
-    pluginsCard: '.ant-card'
+    pluginsCard: '.ant-card',
   };
 
   beforeEach(() => {
-    // init login 
+    // init login
     cy.login();
-  })
+  });
 
   it('creates consumer with key-auth', () => {
     // go to consumer create page
@@ -45,14 +45,16 @@ context('Create and Delete Consumer', () => {
     // plugin config
     cy.contains(domSelectors.pluginsCard, 'key-auth').within(() => {
       cy.get('button').first().click();
-    })
+    });
     // edit codemirror
     cy.get('.CodeMirror')
       .first()
       .then((editor) => {
-        editor[0].CodeMirror.setValue(JSON.stringify({
-          "key": "test"
-        }));
+        editor[0].CodeMirror.setValue(
+          JSON.stringify({
+            key: 'test',
+          }),
+        );
         cy.contains('button', 'Submit').click();
       });
     cy.contains('button', 'Next').click();
@@ -64,7 +66,7 @@ context('Create and Delete Consumer', () => {
   it('delete the consumer', () => {
     cy.visit('/');
     cy.contains('Consumer').click();
-    cy.wait(sleepTime * 5)
+    cy.wait(sleepTime * 5);
     cy.contains(name).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get(domSelectors.notification).should('contain', 'Delete Consumer Successfully');
@@ -86,16 +88,18 @@ context('Create and Delete Consumer', () => {
     // plugin config
     cy.contains(domSelectors.pluginsCard, 'key-auth').within(() => {
       cy.get('button').first().click();
-    })
+    });
     // edit codeMirror
     cy.get('.CodeMirror')
       .first()
       .then((editor) => {
-        editor[0].CodeMirror.setValue(JSON.stringify({
-          "key_not_exst": "test"
-        }));
+        editor[0].CodeMirror.setValue(
+          JSON.stringify({
+            key_not_exst: 'test',
+          }),
+        );
         cy.contains('button', 'Submit').click();
       });
     cy.get(domSelectors.notification).should('contain', 'Invalid plugin data');
   });
-})
+});
diff --git a/web/cypress/integration/metrics/metrics-smoketest.spec.js b/web/cypress/integration/metrics/metrics-smoketest.spec.js
index 21ed446..cd10c4a 100644
--- a/web/cypress/integration/metrics/metrics-smoketest.spec.js
+++ b/web/cypress/integration/metrics/metrics-smoketest.spec.js
@@ -18,13 +18,13 @@
 
 context('metrics page smoke test', () => {
   const domSelectors = {
-    pageContent: '.ant-pro-page-container'
+    pageContent: '.ant-pro-page-container',
   };
 
   beforeEach(() => {
-    // init login 
+    // init login
     cy.login();
-  })
+  });
 
   it('visit metrics page', () => {
     // go to metrics page
@@ -36,6 +36,6 @@ context('metrics page smoke test', () => {
       .children()
       .should('contain', 'Metrics')
       .and('contain', 'You have not configured Grafana')
-      .and('contain', 'Configure Now')
+      .and('contain', 'Configure Now');
   });
-})
+});
diff --git a/web/cypress/integration/route/create-and-delete-route.spec.js b/web/cypress/integration/route/create-and-delete-route.spec.js
index 2045abe..f7fa054 100644
--- a/web/cypress/integration/route/create-and-delete-route.spec.js
+++ b/web/cypress/integration/route/create-and-delete-route.spec.js
@@ -20,9 +20,9 @@ context('Create and Delete Route', () => {
   const name = `routeName${new Date().valueOf()}`;
 
   beforeEach(() => {
-    // init login 
+    // init login
     cy.login();
-  })
+  });
 
   it('create route', () => {
     //  go to route create page
@@ -41,9 +41,13 @@ context('Create and Delete Route', () => {
     cy.get('#remote_addrs_0').type('12.12.12.12');
     cy.get('[data-cy=addRemoteAddr]').click();
     cy.get('#remote_addrs_1').type('10.10.10.10');
-    cy.contains('Advanced Routing Matching Conditions').parent().siblings().contains('Create').click();
+    cy.contains('Advanced Routing Matching Conditions')
+      .parent()
+      .siblings()
+      .contains('Create')
+      .click();
 
-    // create Advanced Routing Matching Conditions 
+    // create Advanced Routing Matching Conditions
     cy.get('#position').click();
     cy.contains('Cookie').click();
     cy.get('.ant-modal').within(() => {
@@ -56,7 +60,7 @@ context('Create and Delete Route', () => {
 
     // go to step2
     cy.contains('Next').click();
-    cy.get('#nodes_0_host').type('12.12.12.12')
+    cy.get('#nodes_0_host').type('12.12.12.12');
 
     // go to step3
     cy.contains('Next').click();
@@ -84,5 +88,5 @@ context('Create and Delete Route', () => {
     cy.contains(name).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get('.ant-notification-notice-message').should('contain', 'Delete Route Successfully');
-  })
-})
+  });
+});
diff --git a/web/cypress/integration/settings/settings-smoketest.spec.js b/web/cypress/integration/settings/settings-smoketest.spec.js
index 77b3676..a6b1e0c 100644
--- a/web/cypress/integration/settings/settings-smoketest.spec.js
+++ b/web/cypress/integration/settings/settings-smoketest.spec.js
@@ -19,13 +19,13 @@
 context('settings page smoke test', () => {
   const domSelectors = {
     pageContent: '.ant-pro-page-container',
-    notificationMsg: '.ant-notification-notice-message'
+    notificationMsg: '.ant-notification-notice-message',
   };
 
   beforeEach(() => {
-    // init login 
+    // init login
     cy.login();
-  })
+  });
 
   it('should visit settings page', () => {
     // go to settings page
@@ -37,7 +37,7 @@ context('settings page smoke test', () => {
       .children()
       .should('contain', 'Setting')
       .and('contain', 'Grafana Address')
-      .and('contain', 'Grafana address should begin with HTTP or HTTPS')
+      .and('contain', 'Grafana address should begin with HTTP or HTTPS');
   });
 
   it('should set a invaild url', () => {
@@ -58,8 +58,6 @@ context('settings page smoke test', () => {
     cy.contains('Submit').click();
     cy.get(domSelectors.notificationMsg).should('contain', 'Update Configuration Successfully');
     cy.wait(1000);
-    cy.get(domSelectors.pageContent)
-      .children()
-      .should('contain', 'Metrics')
+    cy.get(domSelectors.pageContent).children().should('contain', 'Metrics');
   });
-})
+});
diff --git a/web/cypress/integration/ssl/ssl-smoketest.spec.js b/web/cypress/integration/ssl/ssl-smoketest.spec.js
index 307bb3b..f0bc964 100644
--- a/web/cypress/integration/ssl/ssl-smoketest.spec.js
+++ b/web/cypress/integration/ssl/ssl-smoketest.spec.js
@@ -19,16 +19,17 @@
 context('ssl smoke test', () => {
   const domSelectors = {
     notificationDesc: '.ant-notification-notice-description',
-    notificationMsg: '.ant-notification-notice-message'
+    notificationMsg: '.ant-notification-notice-message',
   };
 
   beforeEach(() => {
-    // init login 
+    // init login
     cy.login();
     cy.fixture('certificate.json').as('certificate');
-  })
+  });
 
-  it('should set match certificate and key by input', function () { // use `function () if used `fixture` above` 
+  it('should set match certificate and key by input', function () {
+    // use `function () if used `fixture` above`
     // go to ssl create page
     cy.visit('/');
     cy.contains('SSL').click();
@@ -72,4 +73,4 @@ context('ssl smoke test', () => {
     cy.wait(100);
     cy.get(domSelectors.notificationDesc).should('contain', "key and cert don't match");
   });
-})
+});
diff --git a/web/cypress/integration/upstream/create_and_delete_upstream.spec.js b/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
index f6e73ea..1822a38 100644
--- a/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
+++ b/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
@@ -20,13 +20,13 @@ context('Create and Delete Upstream', () => {
   const name = `upstreamName${new Date().valueOf()}`;
   const sleepTime = 100; // the unit is milliseconds
   const domSelectors = {
-    notification: '.ant-notification-notice-message'
+    notification: '.ant-notification-notice-message',
   };
 
   beforeEach(() => {
-    // init login 
+    // init login
     cy.login();
-  })
+  });
 
   it('should create upstream with default type (roundrobin)', () => {
     // go to upstream create page
@@ -53,7 +53,7 @@ context('Create and Delete Upstream', () => {
   it('should delete the upstream', () => {
     cy.visit('/');
     cy.contains('Upstream').click();
-    cy.wait(sleepTime * 5)
+    cy.wait(sleepTime * 5);
     cy.contains(name).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get(domSelectors.notification).should('contain', 'Delete successfully');
@@ -79,7 +79,9 @@ context('Create and Delete Upstream', () => {
     cy.get('.ant-select-item-option-active:nth-child(1) > .ant-select-item-option-content').click();
     cy.get('#key').click();
     cy.wait(sleepTime);
-    cy.get('div:nth-child(8) .ant-select-item:nth-child(1) > .ant-select-item-option-content:nth-child(1)').click();
+    cy.get(
+      'div:nth-child(8) .ant-select-item:nth-child(1) > .ant-select-item-option-content:nth-child(1)',
+    ).click();
 
     // add first upstream node
     cy.get('#nodes_0_host').type('127.0.0.1');
@@ -107,4 +109,4 @@ context('Create and Delete Upstream', () => {
     cy.contains('button', 'Confirm').click();
     cy.get(domSelectors.notification).should('contain', 'Delete successfully');
   });
-})
+});
diff --git a/web/cypress/integration/user/login.spec.js b/web/cypress/integration/user/login.spec.js
index 65e67c2..60adad7 100644
--- a/web/cypress/integration/user/login.spec.js
+++ b/web/cypress/integration/user/login.spec.js
@@ -19,7 +19,7 @@
 context('Login Test', () => {
   beforeEach(() => {
     // set default language
-    localStorage.setItem('umi_locale', "en-US");
+    localStorage.setItem('umi_locale', 'en-US');
   });
 
   it('login failed with empty username and password', () => {
@@ -44,4 +44,4 @@ context('Login Test', () => {
     cy.contains('Login').click();
     cy.get('.ant-notification-notice-message').should('contain', 'Successfully');
   });
-})
+});
diff --git a/web/cypress/integration/user/logout.spec.js b/web/cypress/integration/user/logout.spec.js
index 853f334..ec3f368 100644
--- a/web/cypress/integration/user/logout.spec.js
+++ b/web/cypress/integration/user/logout.spec.js
@@ -24,11 +24,11 @@ context('Logout Test', () => {
   it('logout', () => {
     cy.visit('/');
     cy.contains('.anticon', 'APISIX User', {
-      matchCase: false
+      matchCase: false,
     }).click({
-      force: true
+      force: true,
     });
     cy.get('[aria-label=logout]').click();
     cy.url().should('contains', '/user/login');
   });
-})
+});
diff --git a/web/cypress/plugins/index.js b/web/cypress/plugins/index.js
index ed129f2..1e51e89 100644
--- a/web/cypress/plugins/index.js
+++ b/web/cypress/plugins/index.js
@@ -21,4 +21,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};
diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js
index bfb1955..5ff9062 100644
--- a/web/cypress/support/commands.js
+++ b/web/cypress/support/commands.js
@@ -22,20 +22,15 @@ Cypress.Commands.add('login', () => {
     test: 'http://localhost:9000',
   };
 
-  const {
-    SERVE_ENV = 'dev'
-  } = Cypress.env();
+  const { SERVE_ENV = 'dev' } = Cypress.env();
 
   cy.request('POST', `${serveUrlMap[SERVE_ENV]}/apisix/admin/user/login`, {
-      "username": "user",
-      "password": "user"
-    })
-    .then(res => {
-      expect(res.body.code).to.equal(0);
-      localStorage.setItem(
-        'token', res.body.data.token
-      );
-      // set default language
-      localStorage.setItem('umi_locale', "en-US");
-    })
-})
+    username: 'user',
+    password: 'user',
+  }).then((res) => {
+    expect(res.body.code).to.equal(0);
+    localStorage.setItem('token', res.body.data.token);
+    // set default language
+    localStorage.setItem('umi_locale', 'en-US');
+  });
+});
diff --git a/web/cypress/support/index.js b/web/cypress/support/index.js
index 113a8ce..a7c4744 100644
--- a/web/cypress/support/index.js
+++ b/web/cypress/support/index.js
@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 /* eslint-disable no-undef */
-import './commands'
+import './commands';
 
 Cypress.on('uncaught:exception', () => {
   // returning false here prevents Cypress from
   // failing the test
-  return false
-})
+  return false;
+});
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index e9b10af..e88f417 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -49,7 +49,7 @@ const PluginPage: React.FC<Props> = ({
   readonly = false,
   initialData = {},
   schemaType = '',
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const [pluginList, setPlugin] = useState<PluginComponent.Meta[][]>([]);
   const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);
@@ -95,9 +95,7 @@ const PluginPage: React.FC<Props> = ({
         let description = '';
         switch (err.keyword) {
           case 'enum':
-            description = `${err.dataPath} ${err.message}: ${err.params.allowedValues.join(
-              ', ',
-            )}`;
+            description = `${err.dataPath} ${err.message}: ${err.params.allowedValues.join(', ')}`;
             break;
           case 'minItems':
           case 'type':
diff --git a/web/src/components/RightContent/AvatarDropdown.tsx b/web/src/components/RightContent/AvatarDropdown.tsx
index b33863c..a87f831 100644
--- a/web/src/components/RightContent/AvatarDropdown.tsx
+++ b/web/src/components/RightContent/AvatarDropdown.tsx
@@ -104,14 +104,14 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
       {menu && (
         <Menu.Item key="settings">
           <SettingOutlined />
-          {formatMessage({ id: 'menu.account.settings' })}
+          {formatMessage({ id: 'menu.setting' })}
         </Menu.Item>
       )}
       {menu && <Menu.Divider />}
 
       <Menu.Item key="settings">
         <SettingFilled />
-        {formatMessage({ id: 'menu.account.settings' })}
+        {formatMessage({ id: 'menu.setting' })}
       </Menu.Item>
       <Menu.Divider />
       <Menu.Item key="logout">
diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index 254c5f8..3e7cff7 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -101,7 +101,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
         setReadonly(true);
         requestAnimationFrame(() => {
           form.setFieldsValue(list.find((item) => item.id === id));
-        })
+        });
       }
     }, [list]);
 
@@ -137,9 +137,13 @@ const UpstreamForm: React.FC<Props> = forwardRef(
               <Form.Item
                 required
                 key={field.key}
-                label={index === 0 && formatMessage({ id: 'page.upstream.form.item-label.node.domain.or.ip' })}
+                label={
+                  index === 0 &&
+                  formatMessage({ id: 'page.upstream.form.item-label.node.domain.or.ip' })
+                }
                 extra={
-                  index === 0 && formatMessage({ id: 'page.upstream.form.item.extra-message.node.domain.or.ip' })
+                  index === 0 &&
+                  formatMessage({ id: 'page.upstream.form.item.extra-message.node.domain.or.ip' })
                 }
                 labelCol={{ span: index === 0 ? 3 : 0 }}
                 wrapperCol={{ offset: index === 0 ? 0 : 3 }}
@@ -152,7 +156,9 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                       rules={[
                         {
                           required: true,
-                          message: formatMessage({ id: 'page.upstream.step.input.domain.name.or.ip' }),
+                          message: formatMessage({
+                            id: 'page.upstream.step.input.domain.name.or.ip',
+                          }),
                         },
                         {
                           pattern: new RegExp(
@@ -229,14 +235,14 @@ const UpstreamForm: React.FC<Props> = forwardRef(
 
     const ActiveHealthCheck = () => (
       <>
-        <Form.Item label={formatMessage({ id: 'page.upstream.step.healthy.checks.active.timeout' })}>
+        <Form.Item label={formatMessage({ id: 'page.upstream.step.healthyCheck.active.timeout' })}>
           <Form.Item name={['checks', 'active', 'timeout']} noStyle>
             <InputNumber disabled={readonly} />
           </Form.Item>
           <span style={{ margin: '0 8px' }}>s</span>
         </Form.Item>
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.active.host' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.activeHost' })}
           required
         >
           <Form.Item
@@ -245,7 +251,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'page.upstream.step.input.healthy.checks.active.host' }),
+                message: formatMessage({ id: 'page.upstream.step.input.healthyCheck.activeHost' }),
               },
               {
                 pattern: new RegExp(
@@ -257,23 +263,27 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             ]}
           >
             <Input
-              placeholder={formatMessage({ id: 'page.upstream.step.input.healthy.checks.active.host' })}
+              placeholder={formatMessage({
+                id: 'page.upstream.step.input.healthyCheck.activeHost',
+              })}
               disabled={readonly}
             />
           </Form.Item>
         </Form.Item>
 
-        <Form.Item label={formatMessage({ id: 'page.upstream.step.healthy.checks.active.port' })}>
+        <Form.Item label={formatMessage({ id: 'page.upstream.step.healthyCheck.activePort' })}>
           <Form.Item name={['checks', 'active', 'port']} noStyle>
             <InputNumber
-              placeholder={formatMessage({ id: 'page.upstream.step.input.healthy.checks.active.port' })}
+              placeholder={formatMessage({
+                id: 'page.upstream.step.input.healthyCheck.activePort',
+              })}
               disabled={readonly}
             />
           </Form.Item>
         </Form.Item>
 
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.active.http_path' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.active.http_path' })}
           required
         >
           <Form.Item
@@ -283,7 +293,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
               {
                 required: true,
                 message: formatMessage({
-                  id: 'page.upstream.step.input.healthy.checks.active.http_path',
+                  id: 'page.upstream.step.input.healthyCheck.active.http_path',
                 }),
               },
             ]}
@@ -291,17 +301,17 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             <Input
               disabled={readonly}
               placeholder={formatMessage({
-                id: 'page.upstream.step.input.healthy.checks.active.http_path',
+                id: 'page.upstream.step.input.healthyCheck.active.http_path',
               })}
             />
           </Form.Item>
         </Form.Item>
 
         <Divider orientation="left" plain>
-          {formatMessage({ id: 'page.upstream.step.healthy.checks.healthy.status' })}
+          {formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.status' })}
         </Divider>
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.active.interval' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.activeInterval' })}
           required
         >
           <Form.Item
@@ -311,7 +321,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
               {
                 required: true,
                 message: formatMessage({
-                  id: 'page.upstream.step.input.healthy.checks.active.interval',
+                  id: 'page.upstream.step.input.healthyCheck.activeInterval',
                 }),
               },
             ]}
@@ -319,14 +329,17 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             <InputNumber disabled={readonly} min={1} />
           </Form.Item>
         </Form.Item>
-        <Form.Item label={formatMessage({ id: 'page.upstream.step.healthy.checks.successes' })} required>
+        <Form.Item
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.successes' })}
+          required
+        >
           <Form.Item
             name={['checks', 'active', 'healthy', 'successes']}
             noStyle
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'page.upstream.step.input.healthy.checks.successes' }),
+                message: formatMessage({ id: 'page.upstream.step.input.healthyCheck.successes' }),
               },
             ]}
           >
@@ -335,10 +348,10 @@ const UpstreamForm: React.FC<Props> = forwardRef(
         </Form.Item>
 
         <Divider orientation="left" plain>
-          {formatMessage({ id: 'page.upstream.step.healthy.checks.unhealthy.status' })}
+          {formatMessage({ id: 'page.upstream.step.healthyCheck.unhealthyStatus' })}
         </Divider>
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.active.interval' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.activeInterval' })}
           required
         >
           <Form.Item
@@ -348,7 +361,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
               {
                 required: true,
                 message: formatMessage({
-                  id: 'page.upstream.step.input.healthy.checks.active.interval',
+                  id: 'page.upstream.step.input.healthyCheck.activeInterval',
                 }),
               },
             ]}
@@ -357,7 +370,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
           </Form.Item>
         </Form.Item>
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.http_failures' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.http_failures' })}
           required
         >
           <Form.Item
@@ -366,7 +379,9 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'page.upstream.step.input.healthy.checks.http_failures' }),
+                message: formatMessage({
+                  id: 'page.upstream.step.input.healthyCheck.http_failures',
+                }),
               },
             ]}
           >
@@ -381,7 +396,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   key={field.key}
                   label={
                     index === 0 &&
-                    formatMessage({ id: 'page.upstream.step.healthy.checks.active.req_headers' })
+                    formatMessage({ id: 'page.upstream.step.healthyCheck.active.req_headers' })
                   }
                   wrapperCol={{ offset: index === 0 ? 0 : 3 }}
                 >
@@ -390,7 +405,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                       <Form.Item style={{ marginBottom: 0 }} name={[field.name]}>
                         <Input
                           placeholder={formatMessage({
-                            id: 'page.upstream.step.input.healthy.checks.active.req_headers',
+                            id: 'page.upstream.step.input.healthyCheck.active.req_headers',
                           })}
                           disabled={readonly}
                         />
@@ -414,7 +429,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   <Button type="dashed" onClick={() => add()}>
                     <PlusOutlined />
                     {formatMessage({
-                      id: 'page.upstream.step.healthy.checks.active.create.req_headers',
+                      id: 'page.upstream.step.healthyCheck.active.create.req_headers',
                     })}
                   </Button>
                 </Form.Item>
@@ -427,7 +442,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     const InActiveHealthCheck = () => (
       <>
         <Divider orientation="left" plain>
-          {formatMessage({ id: 'page.upstream.step.healthy.checks.healthy.status' })}
+          {formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.status' })}
         </Divider>
         <Form.List name={['checks', 'passive', 'healthy', 'http_statuses']}>
           {(fields, { add, remove }) => (
@@ -438,7 +453,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   key={field.key}
                   label={
                     index === 0 &&
-                    formatMessage({ id: 'page.upstream.step.healthy.checks.passive.http_statuses' })
+                    formatMessage({ id: 'page.upstream.step.healthyCheck.passive.http_statuses' })
                   }
                   labelCol={{ span: index === 0 ? 3 : 0 }}
                   wrapperCol={{ offset: index === 0 ? 0 : 3 }}
@@ -466,7 +481,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   <Button type="dashed" onClick={() => add()}>
                     <PlusOutlined />
                     {formatMessage({
-                      id: 'page.upstream.step.healthy.checks.passive.create.http_statuses',
+                      id: 'page.upstream.step.healthyCheck.passive.create.http_statuses',
                     })}
                   </Button>
                 </Form.Item>
@@ -474,14 +489,17 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             </>
           )}
         </Form.List>
-        <Form.Item label={formatMessage({ id: 'page.upstream.step.healthy.checks.successes' })} required>
+        <Form.Item
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.successes' })}
+          required
+        >
           <Form.Item
             name={['checks', 'passive', 'healthy', 'successes']}
             noStyle
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'page.upstream.step.input.healthy.checks.successes' }),
+                message: formatMessage({ id: 'page.upstream.step.input.healthyCheck.successes' }),
               },
             ]}
           >
@@ -490,7 +508,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
         </Form.Item>
 
         <Divider orientation="left" plain>
-          {formatMessage({ id: 'page.upstream.step.healthy.checks.unhealthy.status' })}
+          {formatMessage({ id: 'page.upstream.step.healthyCheck.unhealthyStatus' })}
         </Divider>
         <Form.List name={['checks', 'passive', 'unhealthy', 'http_statuses']}>
           {(fields, { add, remove }) => (
@@ -501,7 +519,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   key={field.key}
                   label={
                     index === 0 &&
-                    formatMessage({ id: 'page.upstream.step.healthy.checks.passive.http_statuses' })
+                    formatMessage({ id: 'page.upstream.step.healthyCheck.passive.http_statuses' })
                   }
                   labelCol={{ span: index === 0 ? 3 : 0 }}
                   wrapperCol={{ offset: index === 0 ? 0 : 3 }}
@@ -529,7 +547,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   <Button type="dashed" onClick={() => add()}>
                     <PlusOutlined />
                     {formatMessage({
-                      id: 'page.upstream.step.healthy.checks.passive.create.http_statuses',
+                      id: 'page.upstream.step.healthyCheck.passive.create.http_statuses',
                     })}
                   </Button>
                 </Form.Item>
@@ -538,7 +556,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
           )}
         </Form.List>
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.http_failures' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.http_failures' })}
           required
         >
           <Form.Item
@@ -547,7 +565,9 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'page.upstream.step.input.healthy.checks.http_failures' }),
+                message: formatMessage({
+                  id: 'page.upstream.step.input.healthyCheck.http_failures',
+                }),
               },
             ]}
           >
@@ -555,7 +575,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
           </Form.Item>
         </Form.Item>
         <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.healthy.checks.passive.tcp_failures' })}
+          label={formatMessage({ id: 'page.upstream.step.healthyCheck.passive.tcp_failures' })}
           required
         >
           <Form.Item
@@ -565,7 +585,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
               {
                 required: true,
                 message: formatMessage({
-                  id: 'page.upstream.step.input.healthy.checks.passive.tcp_failures',
+                  id: 'page.upstream.step.input.healthyCheck.passive.tcp_failures',
                 }),
               },
             ]}
@@ -585,19 +605,23 @@ const UpstreamForm: React.FC<Props> = forwardRef(
         }}
       >
         {showSelector && (
-          <Form.Item label={formatMessage({ id: 'page.upstream.step.select.upstream' })} name="upstream_id" shouldUpdate={(prev, next) => {
-            setReadonly(Boolean(next.upstream_id));
-            if (prev.upstream_id !== next.upstream_id) {
-              const id = next.upstream_id;
-              if (id) {
-                form.setFieldsValue(list.find((item) => item.id === id));
-                form.setFieldsValue({
-                  upstream_id: id,
-                });
+          <Form.Item
+            label={formatMessage({ id: 'page.upstream.step.select.upstream' })}
+            name="upstream_id"
+            shouldUpdate={(prev, next) => {
+              setReadonly(Boolean(next.upstream_id));
+              if (prev.upstream_id !== next.upstream_id) {
+                const id = next.upstream_id;
+                if (id) {
+                  form.setFieldsValue(list.find((item) => item.id === id));
+                  form.setFieldsValue({
+                    upstream_id: id,
+                  });
+                }
               }
-            }
-            return prev.upstream_id !== next.upstream_id;
-          }}>
+              return prev.upstream_id !== next.upstream_id;
+            }}
+          >
             <Select
               disabled={disabled}
               onChange={(id) => {
@@ -699,15 +723,17 @@ const UpstreamForm: React.FC<Props> = forwardRef(
           </Form.Item>
         ))}
 
-        <PanelSection title={formatMessage({ id: 'page.upstream.step.healthy.checks.healthy.check' })}>
+        <PanelSection
+          title={formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.check' })}
+        >
           {[
             {
-              label: formatMessage({ id: 'page.upstream.step.healthy.checks.active' }),
+              label: formatMessage({ id: 'page.upstream.step.healthyCheck.active' }),
               name: ['checks', 'active'],
               component: <ActiveHealthCheck />,
             },
             {
-              label: formatMessage({ id: 'page.upstream.step.healthy.checks.passive' }),
+              label: formatMessage({ id: 'page.upstream.step.healthyCheck.passive' }),
               name: ['checks', 'passive'],
               component: <InActiveHealthCheck />,
             },
diff --git a/web/src/helpers.tsx b/web/src/helpers.tsx
index ac40f42..2942aee 100644
--- a/web/src/helpers.tsx
+++ b/web/src/helpers.tsx
@@ -32,16 +32,16 @@ export const getMenuData = (): MenuDataItem[] => {
       icon: <IconFont name="icondashboard" />,
     },
     {
+      name: 'service',
+      path: '/service/list',
+      icon: <IconFont name="iconconsumer" />,
+    },
+    {
       name: 'routes',
       path: '/routes/list',
       icon: <IconFont name="iconroute" />,
     },
     {
-      name: 'ssl',
-      path: '/ssl/list',
-      icon: <IconFont name="iconssl" />,
-    },
-    {
       name: 'upstream',
       path: '/upstream/list',
       icon: <IconFont name="iconserver" />,
@@ -52,9 +52,9 @@ export const getMenuData = (): MenuDataItem[] => {
       icon: <IconFont name="iconconsumer" />,
     },
     {
-      name: 'service',
-      path: '/service/list',
-      icon: <IconFont name="iconconsumer" />,
+      name: 'ssl',
+      path: '/ssl/list',
+      icon: <IconFont name="iconssl" />,
     },
     {
       name: 'setting',
diff --git a/web/src/locales/en-US/menu.ts b/web/src/locales/en-US/menu.ts
index 6cc2717..ae4018a 100644
--- a/web/src/locales/en-US/menu.ts
+++ b/web/src/locales/en-US/menu.ts
@@ -57,8 +57,6 @@ export default {
   'menu.exception.trigger': 'Trigger',
   'menu.account': 'Account',
   'menu.account.center': 'Account Center',
-  'menu.account.settings': 'Account Settings',
-  'menu.account.settings': 'Settings',
   'menu.account.trigger': 'Trigger Error',
   'menu.account.logout': 'Logout',
   'menu.editor': 'Graphic Editor',
diff --git a/web/src/locales/zh-CN/menu.ts b/web/src/locales/zh-CN/menu.ts
index 54c019e..6524131 100644
--- a/web/src/locales/zh-CN/menu.ts
+++ b/web/src/locales/zh-CN/menu.ts
@@ -57,8 +57,6 @@ export default {
   'menu.exception.trigger': '触发错误',
   'menu.account': '个人页',
   'menu.account.center': '个人中心',
-  'menu.account.settings': '个人设置',
-  'menu.account.settings': '修改设置',
   'menu.account.trigger': '触发报错',
   'menu.account.logout': '退出登录',
   'menu.editor': '图形编辑器',
diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index 4fcc921..41cadae 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -113,7 +113,7 @@ const Page: React.FC<Props> = (props) => {
               setAdvancedMatchingRules(data);
             }
             if (action === 'labelsChange') {
-              form1.setFieldsValue({ ...form1.getFieldsValue(), labels: data })
+              form1.setFieldsValue({ ...form1.getFieldsValue(), labels: data });
             }
           }}
           isEdit={props.route.path.indexOf('edit') > 0}
@@ -256,10 +256,11 @@ const Page: React.FC<Props> = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${(props as any).match.params.rid
-          ? formatMessage({ id: 'component.global.edit' })
-          : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.routes' })}`}
+        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}>
diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index e110e6f..304ad3b 100644
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -25,7 +25,6 @@ import { timestampToLocaleString } from '@/helpers';
 import { fetchList, remove, fetchLabelList, updateRouteStatus } from './service';
 import { DebugDrawView } from './components/DebugViews';
 
-
 const { OptGroup, Option } = Select;
 
 const Page: React.FC = () => {
@@ -132,14 +131,17 @@ const Page: React.FC = () => {
               return (
                 <OptGroup label={key} key={Math.random().toString(36).slice(2)}>
                   {(labelList[key] || []).map((value: string) => (
-                    <Option key={Math.random().toString(36).slice(2)} value={`${key}:${value}`}> {value} </Option>
+                    <Option key={Math.random().toString(36).slice(2)} value={`${key}:${value}`}>
+                      {' '}
+                      {value}{' '}
+                    </Option>
                   ))}
                 </OptGroup>
               );
             })}
           </Select>
         );
-      }
+      },
     },
     {
       title: formatMessage({ id: 'page.route.status' }),
@@ -149,8 +151,8 @@ const Page: React.FC = () => {
           {record.status ? (
             <Tag color="green">{formatMessage({ id: 'page.route.published' })}</Tag>
           ) : (
-              <Tag color="red">{formatMessage({ id: 'page.route.unpublished' })}</Tag>
-            )}
+            <Tag color="red">{formatMessage({ id: 'page.route.unpublished' })}</Tag>
+          )}
         </>
       ),
     },
diff --git a/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx b/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx
index 16c15db..c73af82 100644
--- a/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx
+++ b/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx
@@ -39,7 +39,7 @@ const { TabPane } = Tabs;
 const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
   const { formatMessage } = useIntl();
   const [httpMethod, setHttpMethod] = useState(HTTP_METHOD_OPTION_LIST[0]);
-  const [requestProtocol, setRequestProtocol] = useState(PROTOCOL_SUPPORTED[0])
+  const [requestProtocol, setRequestProtocol] = useState(PROTOCOL_SUPPORTED[0]);
   const [showBodyTab, setShowBodyTab] = useState(false);
   const [queryForm] = Form.useForm();
   const [bodyForm] = Form.useForm();
diff --git a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx
index 6fb0a70..ba5b221 100644
--- a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx
+++ b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx
@@ -111,7 +111,7 @@ const LabelsDrawer: React.FC<Props> = ({
   disabled,
   labelsDataSource,
   onClose,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const transformLabel = transformLableValueToKeyValue(labelsDataSource);
 
@@ -141,7 +141,7 @@ const LabelsDrawer: React.FC<Props> = ({
             onClick={(e) => {
               e.persist();
               form.validateFields().then(({ labels }) => {
-                const data = labels.map((item: any) => `${item.labelKey}:${item.labelValue}`)
+                const data = labels.map((item: any) => `${item.labelKey}:${item.labelValue}`);
                 // check for duplicates
                 if (new Set(data).size !== data.length) {
                   notification.warning({
@@ -161,13 +161,13 @@ const LabelsDrawer: React.FC<Props> = ({
           >
             {formatMessage({ id: 'component.global.confirm' })}
           </Button>
-        </div >
+        </div>
       }
     >
       <Form form={form} layout="horizontal">
         {LabelList(disabled, labelList || {})}
       </Form>
-    </Drawer >
+    </Drawer>
   );
 };
 
diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx
index 8234be9..25e1f31 100644
--- a/web/src/pages/Route/components/Step1/MetaView.tsx
+++ b/web/src/pages/Route/components/Step1/MetaView.tsx
@@ -23,7 +23,7 @@ import { PanelSection } from '@api7-dashboard/ui';
 import { FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants';
 import LabelsDrawer from './LabelsDrawer';
 
-const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit, onChange, }) => {
+const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit, onChange }) => {
   const { formatMessage } = useIntl();
   const [visible, setVisible] = useState(false);
 
diff --git a/web/src/pages/Route/components/Step1/RequestConfigView.tsx b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
index 957d260..7ad1631 100644
--- a/web/src/pages/Route/components/Step1/RequestConfigView.tsx
+++ b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
@@ -31,7 +31,7 @@ import { fetchServiceList } from '../../service';
 const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
   form,
   disabled,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const { formatMessage } = useIntl();
   const [serviceList, setServiceList] = useState<ServiceModule.ResponseBody[]>([]);
@@ -383,17 +383,18 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
           return null;
         }}
       </Form.Item>
-      <Form.Item
-        label={formatMessage({ id: 'page.route.service' })}
-        name='service_id'
-      >
+      <Form.Item label={formatMessage({ id: 'page.route.service' })} name="service_id">
         <Select disabled={disabled}>
           {/* TODO: value === '' means  no service_id select, need to find a better way */}
-          <Select.Option value='' key={Math.random().toString(36).substring(7)}>None</Select.Option>
-          {serviceList.map(item => {
-            return <Select.Option value={item.id} key={item.id}>
-              {item.name}
-            </Select.Option>
+          <Select.Option value="" key={Math.random().toString(36).substring(7)}>
+            None
+          </Select.Option>
+          {serviceList.map((item) => {
+            return (
+              <Select.Option value={item.id} key={item.id}>
+                {item.name}
+              </Select.Option>
+            );
           })}
         </Select>
       </Form.Item>
diff --git a/web/src/pages/Route/constants.ts b/web/src/pages/Route/constants.ts
index ab6c30c..1a8dc46 100644
--- a/web/src/pages/Route/constants.ts
+++ b/web/src/pages/Route/constants.ts
@@ -43,7 +43,7 @@ export const FORM_ITEM_WITHOUT_LABEL = {
 export const DEFAULT_STEP_1_DATA: RouteModule.Form1Data = {
   name: '',
   desc: '',
-  labels:[],
+  labels: [],
   status: 1,
   priority: 0,
   websocket: false,
@@ -54,6 +54,7 @@ export const DEFAULT_STEP_1_DATA: RouteModule.Form1Data = {
   redirectURI: '',
   ret_code: 302,
   methods: HTTP_METHOD_OPTION_LIST,
+  service_id: '',
 };
 
 export const DEFAULT_STEP_3_DATA: RouteModule.Step3Data = {
@@ -87,7 +88,7 @@ export const HASH_ON_LIST = ['vars', 'header', 'cookie', 'consumer'];
 
 export const AUTH_LIST = ['basic-auth', 'jwt-auth', 'key-auth'];
 
-export const PROTOCOL_SUPPORTED = ['http', 'https'];
+export const PROTOCOL_SUPPORTED: RouteModule.debugRequest['request_protocol'][] = ['http', 'https'];
 
 export const DEFAULT_DEBUG_PARAM_FORM_DATA = {
   params: [
diff --git a/web/src/pages/Route/service.ts b/web/src/pages/Route/service.ts
index 099428b..bc1a469 100644
--- a/web/src/pages/Route/service.ts
+++ b/web/src/pages/Route/service.ts
@@ -21,7 +21,7 @@ import {
   transformStepData,
   transformRouteData,
   transformUpstreamNodes,
-  transformLabelList
+  transformLabelList,
 } from './transform';
 
 export const create = (data: RouteModule.RequestData) =>
@@ -37,7 +37,7 @@ export const update = (rid: number, data: RouteModule.RequestData) =>
   });
 
 export const fetchItem = (rid: number) =>
-  request(`/routes/${rid}`).then((data) => (transformRouteData(data.data)));
+  request(`/routes/${rid}`).then((data) => transformRouteData(data.data));
 
 export const fetchList = ({ current = 1, pageSize = 10, ...res }) => {
   const { labels } = res;
@@ -94,12 +94,14 @@ export const checkHostWithSSL = (hosts: string[]) =>
   });
 
 export const fetchLabelList = () =>
-  request('/labels/route').then(({ data }) => ((transformLabelList(data.rows)) as RouteModule.LabelList));
+  request('/labels/route').then(
+    ({ data }) => transformLabelList(data.rows) as RouteModule.LabelList,
+  );
 
 export const updateRouteStatus = (rid: string, status: RouteModule.RouteStatus) =>
   request(`/routes/${rid}`, {
     method: 'PATCH',
-    data: { status }
+    data: { status },
   });
 
 export const debugRoute = (data: RouteModule.debugRequest) => {
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index c7b442d..401b15d 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -45,9 +45,9 @@ export const transformStepData = ({
   }
 
   const labels = {};
-  transformLableValueToKeyValue(form1Data.labels).forEach(item => {
+  transformLableValueToKeyValue(form1Data.labels).forEach((item) => {
     labels[item.labelKey] = item.labelValue;
-  })
+  });
   const { service_id = '' } = form1Data;
 
   const data: Partial<RouteModule.Body> = {
@@ -70,7 +70,7 @@ export const transformStepData = ({
       return [key, operator, value];
     }),
     // @ts-ignore
-    methods: form1Data.methods.includes("ALL") ? [] : form1Data.methods
+    methods: form1Data.methods.includes('ALL') ? [] : form1Data.methods,
   };
 
   if (Object.keys(redirect).length === 0 || redirect.http_to_https) {
@@ -171,7 +171,7 @@ export const transformRouteData = (data: RouteModule.Body) => {
     upstream_id,
     service_id = '',
     priority = 0,
-    enable_websocket
+    enable_websocket,
   } = data;
   const form1Data: Partial<RouteModule.Form1Data> = {
     name,
@@ -182,10 +182,10 @@ export const transformRouteData = (data: RouteModule.Body) => {
     remote_addrs: remote_addrs || [''],
     labels: Object.keys(labels || []).map((item) => `${item}:${labels[item]}`),
     // @ts-ignore
-    methods: methods.length ? methods : ["ALL"],
+    methods: methods.length ? methods : ['ALL'],
     priority,
     enable_websocket,
-    service_id
+    service_id,
   };
 
   const redirect = data.plugins?.redirect || {};
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index f104b19..6b87a0b 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -124,10 +124,10 @@ declare namespace RouteModule {
   type LabelList = Record<string, string[]>;
 
   type LabelTableProps = {
-    labelKey: string,
-    labelValue: string,
-    key: string
-  }
+    labelKey: string;
+    labelValue: string;
+    key: string;
+  };
 
   type Step1PassProps = {
     form: FormInstance;
@@ -253,7 +253,7 @@ declare namespace RouteModule {
   // TODO: grpc and websocket
   type debugRequest = {
     url: string;
-    request_protocol: 'http' | 'grpc' | 'websocket';
+    request_protocol: 'http' | 'https' | 'grpc' | 'websocket';
     method: string;
     body_params?: any;
     header_params?: any;
diff --git a/web/src/pages/ServerInfo/List.tsx b/web/src/pages/ServerInfo/List.tsx
index 2f59050..c4ae9ad 100644
--- a/web/src/pages/ServerInfo/List.tsx
+++ b/web/src/pages/ServerInfo/List.tsx
@@ -54,7 +54,7 @@ const ServerInfo: React.FC = () => {
                 setData(
                   nodeList.find((item) => {
                     return item.id === value;
-                  })
+                  }),
                 );
               }}
             >
diff --git a/web/src/pages/ServerInfo/service.ts b/web/src/pages/ServerInfo/service.ts
index 0dc2029..60fab5b 100644
--- a/web/src/pages/ServerInfo/service.ts
+++ b/web/src/pages/ServerInfo/service.ts
@@ -17,7 +17,7 @@
 import { request } from 'umi';
 
 export const fetchInfoList = () => {
-  return request<Res<ResListData<ServerInfoModule.Node>>>(
-    '/server_info',
-  ).then(({ data }) => data.rows);
+  return request<Res<ResListData<ServerInfoModule.Node>>>('/server_info').then(
+    ({ data }) => data.rows,
+  );
 };
diff --git a/web/src/pages/Service/Create.tsx b/web/src/pages/Service/Create.tsx
index 3c8bf3a..5a644f5 100644
--- a/web/src/pages/Service/Create.tsx
+++ b/web/src/pages/Service/Create.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react';
 import { useIntl, history } from 'umi';
 import { Card, Steps, Form, notification } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
@@ -24,7 +24,7 @@ import ActionBar from '@/components/ActionBar';
 import PluginPage from '@/components/Plugin';
 import { DEFAULT_UPSTREAM } from '@/components/Upstream';
 import Preview from './components/Preview';
-import Step1 from "./components/Step1";
+import Step1 from './components/Step1';
 import { create, update, fetchItem } from './service';
 
 const { Step } = Steps;
@@ -40,13 +40,12 @@ const Page: React.FC = (props) => {
     formatMessage({ id: 'page.service.steps.stepTitle.basicInformation' }),
     formatMessage({ id: 'page.service.steps.stepTitle.pluginConfig' }),
     formatMessage({ id: 'component.global.steps.stepTitle.preview' }),
-  ]
+  ];
 
   const [stepHeader] = useState(STEP_HEADER);
   const [step, setStep] = useState(1);
 
   useEffect(() => {
-
     // init upstream default value
     upstreamForm.setFieldsValue(DEFAULT_UPSTREAM);
 
@@ -82,12 +81,13 @@ const Page: React.FC = (props) => {
     (serviceId ? update(serviceId, data) : create(data))
       .then(() => {
         notification.success({
-          message: `${serviceId
-            ? formatMessage({ id: 'component.global.edit' })
-            : formatMessage({ id: 'component.global.create' })
-            } ${formatMessage({ id: 'menu.service' })} ${formatMessage({
-              id: 'component.status.success',
-            })}`,
+          message: `${
+            serviceId
+              ? formatMessage({ id: 'component.global.edit' })
+              : formatMessage({ id: 'component.global.create' })
+          } ${formatMessage({ id: 'menu.service' })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,
         });
         history.push('/service/list');
       })
@@ -101,43 +101,44 @@ const Page: React.FC = (props) => {
       form.validateFields().then(() => {
         upstreamForm.validateFields().then(() => {
           setStep(nextStep);
-        })
-      })
+        });
+      });
       return;
     }
     if (nextStep === 4) {
       onSubmit();
       return;
-    };
+    }
     setStep(nextStep);
-  }
+  };
 
-  return (<>
-    <PageHeaderWrapper
-      title={`${(props as any).match.params.rid
-        ? formatMessage({ id: 'component.global.edit' })
-        : formatMessage({ id: 'component.global.create' })
+  return (
+    <>
+      <PageHeaderWrapper
+        title={`${
+          (props as any).match.params.rid
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
         } ${formatMessage({ id: 'menu.service' })}`}
-    >
-      <Card bordered={false}>
-        <Steps current={step - 1} style={{ marginBottom: "25px" }}>
-          {stepHeader.map((item) => (
-            <Step title={item} key={item} />
-          ))}
-        </Steps>
-        {step === 1 && <Step1
-          form={form}
-          upstreamForm={upstreamForm}
-          upstreamRef={upstreamRef}
-        />}
-        {step === 2 && (
-          <PluginPage initialData={plugins} onChange={setPlugins} schemaType="route" />
-        )}
-        {step === 3 && <Preview upstreamForm={upstreamForm} form={form} plugins={plugins} />}
-      </Card>
-    </PageHeaderWrapper>
-    <ActionBar step={step} lastStep={3} onChange={onStepChange} withResultView />
-  </>)
-}
+      >
+        <Card bordered={false}>
+          <Steps current={step - 1} style={{ marginBottom: '25px' }}>
+            {stepHeader.map((item) => (
+              <Step title={item} key={item} />
+            ))}
+          </Steps>
+          {step === 1 && (
+            <Step1 form={form} upstreamForm={upstreamForm} upstreamRef={upstreamRef} />
+          )}
+          {step === 2 && (
+            <PluginPage initialData={plugins} onChange={setPlugins} schemaType="route" />
+          )}
+          {step === 3 && <Preview upstreamForm={upstreamForm} form={form} plugins={plugins} />}
+        </Card>
+      </PageHeaderWrapper>
+      <ActionBar step={step} lastStep={3} onChange={onStepChange} withResultView />
+    </>
+  );
+};
 
 export default Page;
diff --git a/web/src/pages/Service/List.tsx b/web/src/pages/Service/List.tsx
index e3e5b99..c14d11c 100644
--- a/web/src/pages/Service/List.tsx
+++ b/web/src/pages/Service/List.tsx
@@ -31,7 +31,7 @@ const Page: React.FC = () => {
     {
       title: 'ID',
       dataIndex: 'id',
-      hideInSearch: true
+      hideInSearch: true,
     },
     {
       title: formatMessage({ id: 'component.global.name' }),
@@ -81,23 +81,26 @@ const Page: React.FC = () => {
     },
   ];
 
-  return (<PageHeaderWrapper
-    title={`${formatMessage({ id: 'menu.service' })} ${formatMessage({
-      id: 'component.global.list',
-    })}`}
-  >
-    <ProTable<ServiceModule.ResponseBody>
-      actionRef={ref}
-      rowKey="id"
-      columns={columns}
-      request={fetchList}
-      toolBarRender={() => [
-        <Button type="primary" onClick={() => history.push(`/service/create`)}>
-          <PlusOutlined />
-          {formatMessage({ id: 'component.global.create' })}
-        </Button>,
-      ]} />
-  </PageHeaderWrapper>)
-}
+  return (
+    <PageHeaderWrapper
+      title={`${formatMessage({ id: 'menu.service' })} ${formatMessage({
+        id: 'component.global.list',
+      })}`}
+    >
+      <ProTable<ServiceModule.ResponseBody>
+        actionRef={ref}
+        rowKey="id"
+        columns={columns}
+        request={fetchList}
+        toolBarRender={() => [
+          <Button type="primary" onClick={() => history.push(`/service/create`)}>
+            <PlusOutlined />
+            {formatMessage({ id: 'component.global.create' })}
+          </Button>,
+        ]}
+      />
+    </PageHeaderWrapper>
+  );
+};
 
 export default Page;
diff --git a/web/src/pages/Service/components/Step1.tsx b/web/src/pages/Service/components/Step1.tsx
index d1f508d..fd805ba 100644
--- a/web/src/pages/Service/components/Step1.tsx
+++ b/web/src/pages/Service/components/Step1.tsx
@@ -42,30 +42,26 @@ const Step1: React.FC<ServiceModule.Step1PassProps> = ({
     fetchUpstreamList().then(({ data }) => setList(data));
   }, []);
 
-  return <>
-    <Form {...FORM_LAYOUT} form={form}>
-      <Form.Item
-        name="name"
-        label={formatMessage({ id: 'component.global.name' })}
-      >
-        <Input disabled={disabled} />
-      </Form.Item>
-      <Form.Item
-        name="desc"
-        label={formatMessage({ id: 'component.global.description' })}
-      >
-        <Input.TextArea disabled={disabled} />
-      </Form.Item>
-    </Form>
-    <UpstreamForm
-      ref={upstreamRef}
-      form={upstreamForm}
-      disabled={disabled}
-      list={list}
-      showSelector
-      key={1}
-    />
-  </>
-}
+  return (
+    <>
+      <Form {...FORM_LAYOUT} form={form}>
+        <Form.Item name="name" label={formatMessage({ id: 'component.global.name' })}>
+          <Input disabled={disabled} />
+        </Form.Item>
+        <Form.Item name="desc" label={formatMessage({ id: 'component.global.description' })}>
+          <Input.TextArea disabled={disabled} />
+        </Form.Item>
+      </Form>
+      <UpstreamForm
+        ref={upstreamRef}
+        form={upstreamForm}
+        disabled={disabled}
+        list={list}
+        showSelector
+        key={1}
+      />
+    </>
+  );
+};
 
 export default Step1;
diff --git a/web/src/pages/Service/locales/en-US.ts b/web/src/pages/Service/locales/en-US.ts
index 2923865..cb26341 100644
--- a/web/src/pages/Service/locales/en-US.ts
+++ b/web/src/pages/Service/locales/en-US.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 export default {
-    'page.service.steps.stepTitle.basicInformation': 'Basic Information',
-    'page.service.steps.stepTitle.pluginConfig': 'Plugin Config',
-    'page.service.steps.stepTitle.preview': 'Preview',
-}
+  'page.service.steps.stepTitle.basicInformation': 'Basic Information',
+  'page.service.steps.stepTitle.pluginConfig': 'Plugin Config',
+  'page.service.steps.stepTitle.preview': 'Preview',
+};
diff --git a/web/src/pages/Service/locales/zh-CN.ts b/web/src/pages/Service/locales/zh-CN.ts
index 53fda03..4050259 100644
--- a/web/src/pages/Service/locales/zh-CN.ts
+++ b/web/src/pages/Service/locales/zh-CN.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 export default {
-    'page.service.steps.stepTitle.basicInformation': '基本信息',
-    'page.service.steps.stepTitle.pluginConfig': '插件配置',
-    'page.service.steps.stepTitle.preview': '预览',
-}
+  'page.service.steps.stepTitle.basicInformation': '基本信息',
+  'page.service.steps.stepTitle.pluginConfig': '插件配置',
+  'page.service.steps.stepTitle.preview': '预览',
+};
diff --git a/web/src/pages/Service/service.ts b/web/src/pages/Service/service.ts
index 1b541b2..bda706e 100644
--- a/web/src/pages/Service/service.ts
+++ b/web/src/pages/Service/service.ts
@@ -47,7 +47,8 @@ export const update = (serviceId: string, data: ServiceModule.Entity) =>
     data,
   });
 
-export const remove = (serviceId: string) => request(`/services/${serviceId}`, { method: 'DELETE' });
+export const remove = (serviceId: string) =>
+  request(`/services/${serviceId}`, { method: 'DELETE' });
 
 export const fetchItem = (serviceId: number) =>
-  request(`/services/${serviceId}`).then((data) => (data));
+  request(`/services/${serviceId}`).then((data) => data);
diff --git a/web/src/pages/Service/typing.d.ts b/web/src/pages/Service/typing.d.ts
index a9e52d0..3be9c32 100644
--- a/web/src/pages/Service/typing.d.ts
+++ b/web/src/pages/Service/typing.d.ts
@@ -15,33 +15,32 @@
  * limitations under the License.
  */
 declare namespace ServiceModule {
-
-    type Entity = {
-        name: string;
-        desc: string;
-        upstream: any;
-        upstream_id: string;
-        labels: string;
-        enable_websocket: boolean;
-        plugins: {
-            [name: string]: any;
-        };
+  type Entity = {
+    name: string;
+    desc: string;
+    upstream: any;
+    upstream_id: string;
+    labels: string;
+    enable_websocket: boolean;
+    plugins: {
+      [name: string]: any;
     };
+  };
 
-    type ResponseBody = {
-        id: string,
-        plugins: Record<string, any>,
-        upstream_id: string,
-        upstream: Record<string, any>,
-        name: string,
-        desc: string,
-        enable_websocket: boolean,
-    }
+  type ResponseBody = {
+    id: string;
+    plugins: Record<string, any>;
+    upstream_id: string;
+    upstream: Record<string, any>;
+    name: string;
+    desc: string;
+    enable_websocket: boolean;
+  };
 
-    type Step1PassProps = {
-        form: FormInstance;
-        upstreamForm: FormInstance;
-        disabled?: boolean;
-        upstreamRef: any;
-    };
+  type Step1PassProps = {
+    form: FormInstance;
+    upstreamForm: FormInstance;
+    disabled?: boolean;
+    upstreamRef: any;
+  };
 }
diff --git a/web/src/pages/Upstream/locales/en-US.ts b/web/src/pages/Upstream/locales/en-US.ts
index ea9b397..e94583f 100644
--- a/web/src/pages/Upstream/locales/en-US.ts
+++ b/web/src/pages/Upstream/locales/en-US.ts
@@ -37,7 +37,8 @@ export default {
   'page.upstream.step.type': 'Type',
   'page.upstream.step.create.node': 'Create Node',
   'page.upstream.step.pass-host': 'Pass Host',
-  'page.upstream.step.pass-host.tips': 'When selecting node, there can only be ONE node in node list.',
+  'page.upstream.step.pass-host.tips':
+    'When selecting node, there can only be ONE node in node list.',
   'page.upstream.step.pass-host.pass': 'pass',
   'page.upstream.step.pass-host.node': 'node',
   'page.upstream.step.pass-host.rewrite': 'rewrite',
@@ -48,36 +49,35 @@ export default {
   'page.upstream.step.input.send.timeout': 'Please input send timeout',
   'page.upstream.step.read.timeout': 'Read Timeout',
   'page.upstream.step.input.read.timeout': 'Please input read timeout',
-  'page.upstream.step.healthy.checks.healthy.check': 'Health Check',
-  'page.upstream.step.healthy.check': 'Upstream Healthy Check',
-  'page.upstream.step.healthy.checks.healthy': 'Healthy',
-  'page.upstream.step.healthy.checks.unhealthy': 'Unhealthy',
-  'page.upstream.step.healthy.checks.healthy.status': 'Healthy Status',
-  'page.upstream.step.healthy.checks.unhealthy.status': 'Unhealthy Status',
-  'page.upstream.step.healthy.checks.active': 'Upstream Healthy Check Active',
-  'page.upstream.step.healthy.checks.active.timeout': 'Timeout',
-  'page.upstream.step.input.healthy.checks.active.timeout': 'Please input timeout',
-  'page.upstream.step.healthy.checks.active.http_path': 'HttpPath',
-  'page.upstream.step.input.healthy.checks.active.http_path': 'HttpPath',
-  'page.upstream.step.healthy.checks.active.port': "Port",
-  'page.upstream.step.input.healthy.checks.active.port': 'Please input port',
-  'page.upstream.step.healthy.checks.active.host': 'Host',
-  'page.upstream.step.input.healthy.checks.active.host': 'Please input Host',
-  'page.upstream.step.healthy.checks.active.interval': 'Interval',
-  'page.upstream.step.input.healthy.checks.active.interval': 'Please input Interval',
-  'page.upstream.step.healthy.checks.successes': 'Successes',
-  'page.upstream.step.input.healthy.checks.successes': 'Please input successes',
-  'page.upstream.step.healthy.checks.http_failures': 'HttpFailures',
-  'page.upstream.step.healthy.checks.active.create.req_headers': 'Create req_headers',
-  'page.upstream.step.input.healthy.checks.http_failures': 'Please input httpFailures',
-  'page.upstream.step.healthy.checks.active.req_headers': 'req_headers',
-  'page.upstream.step.input.healthy.checks.active.req_headers': 'Please input req_headers',
-  'page.upstream.step.healthy.checks.passive': 'Passive',
-  'page.upstream.step.healthy.checks.passive.create.http_statuses': 'Create http_statuses',
-  'page.upstream.step.healthy.checks.passive.http_statuses': 'http_statuses',
-  'page.upstream.step.input.healthy.checks.passive.http_statuses': 'Please input http_statuses',
-  'page.upstream.step.healthy.checks.passive.tcp_failures': 'tcp_failures',
-  'page.upstream.step.input.healthy.checks.passive.tcp_failures': 'Please input tcp_failures',
+  'page.upstream.step.healthyCheck.healthy.check': 'Health Check',
+  'page.upstream.step.healthyCheck.healthy': 'Healthy',
+  'page.upstream.step.healthyCheck.unhealthy': 'Unhealthy',
+  'page.upstream.step.healthyCheck.healthy.status': 'Healthy Status',
+  'page.upstream.step.healthyCheck.unhealthyStatus': 'Unhealthy Status',
+  'page.upstream.step.healthyCheck.active': 'Active',
+  'page.upstream.step.healthyCheck.active.timeout': 'Timeout',
+  'page.upstream.step.input.healthyCheck.active.timeout': 'Please input timeout',
+  'page.upstream.step.healthyCheck.active.http_path': 'HTTP Path',
+  'page.upstream.step.input.healthyCheck.active.http_path': 'Please input HTTP path',
+  'page.upstream.step.healthyCheck.activePort': 'Port',
+  'page.upstream.step.input.healthyCheck.activePort': 'Port',
+  'page.upstream.step.healthyCheck.activeHost': 'Host',
+  'page.upstream.step.input.healthyCheck.activeHost': 'Please input active host',
+  'page.upstream.step.healthyCheck.activeInterval': 'Interval',
+  'page.upstream.step.input.healthyCheck.activeInterval': 'Please input interval',
+  'page.upstream.step.healthyCheck.successes': 'Successes',
+  'page.upstream.step.input.healthyCheck.successes': 'Please input successes',
+  'page.upstream.step.healthyCheck.http_failures': 'HTTP Failures',
+  'page.upstream.step.healthyCheck.active.create.req_headers': 'Create Request Headers',
+  'page.upstream.step.input.healthyCheck.http_failures': 'Please input http failures',
+  'page.upstream.step.healthyCheck.active.req_headers': 'Request Headers',
+  'page.upstream.step.input.healthyCheck.active.req_headers': 'Please input request headers',
+  'page.upstream.step.healthyCheck.passive': 'Passive',
+  'page.upstream.step.healthyCheck.passive.create.http_statuses': 'Create HTTP Status',
+  'page.upstream.step.healthyCheck.passive.http_statuses': 'HTTP Status',
+  'page.upstream.step.input.healthyCheck.passive.http_statuses': 'Please input http status',
+  'page.upstream.step.healthyCheck.passive.tcp_failures': 'TCP Failures',
+  'page.upstream.step.input.healthyCheck.passive.tcp_failures': 'Please input TCP failures',
   'page.upstream.notificationMessage.enableHealthCheckFirst': 'Please enable health check first.',
 
   'page.upstream.create.edit': 'Edit',
diff --git a/web/src/pages/Upstream/locales/zh-CN.ts b/web/src/pages/Upstream/locales/zh-CN.ts
index 3445170..335d378 100644
--- a/web/src/pages/Upstream/locales/zh-CN.ts
+++ b/web/src/pages/Upstream/locales/zh-CN.ts
@@ -48,36 +48,35 @@ export default {
   'page.upstream.step.input.send.timeout': '请输入发送超时时间',
   'page.upstream.step.read.timeout': '接收超时',
   'page.upstream.step.input.read.timeout': '请输入接收超时时间',
-  'page.upstream.step.healthy.checks.healthy.check': '健康检查',
-  'page.upstream.step.healthy.check': '上游健康检查',
-  'page.upstream.step.healthy.checks.healthy': '健康',
-  'page.upstream.step.healthy.checks.unhealthy': '不健康',
-  'page.upstream.step.healthy.checks.healthy.status': '健康状态',
-  'page.upstream.step.healthy.checks.unhealthy.status': '不健康状态',
-  'page.upstream.step.healthy.checks.active': '探活健康检查',
-  'page.upstream.step.healthy.checks.active.timeout': '超时时间',
-  'page.upstream.step.input.healthy.checks.active.timeout': '请输入超时时间',
-  'page.upstream.step.healthy.checks.active.http_path': '路径',
-  'page.upstream.step.input.healthy.checks.active.http_path': '请输入路径',
-  'page.upstream.step.healthy.checks.active.port': "端口",
-  'page.upstream.step.input.healthy.checks.active.port': '请输入端口',
-  'page.upstream.step.healthy.checks.active.host': '域名',
-  'page.upstream.step.input.healthy.checks.active.host': '请输入域名',
-  'page.upstream.step.healthy.checks.active.interval': '间隔',
-  'page.upstream.step.input.healthy.checks.active.interval': '请输入间隔',
-  'page.upstream.step.healthy.checks.successes': '成功次数',
-  'page.upstream.step.input.healthy.checks.successes': '请输入成功次数',
-  'page.upstream.step.healthy.checks.http_failures': '失败次数',
-  'page.upstream.step.healthy.checks.active.create.req_headers': '创建请求头',
-  'page.upstream.step.input.healthy.checks.http_failures': '请输入失败次数',
-  'page.upstream.step.healthy.checks.active.req_headers': '请求头',
-  'page.upstream.step.input.healthy.checks.active.req_headers': '请输入请求头',
-  'page.upstream.step.healthy.checks.passive': '被动健康检查',
-  'page.upstream.step.healthy.checks.passive.create.http_statuses': '创建状态码',
-  'page.upstream.step.healthy.checks.passive.http_statuses': '状态码',
-  'page.upstream.step.input.healthy.checks.passive.http_statuses': '请输入状态码',
-  'page.upstream.step.healthy.checks.passive.tcp_failures': 'tcp失败次数',
-  'page.upstream.step.input.healthy.checks.passive.tcp_failures': '请输入tcp失败次数',
+  'page.upstream.step.healthyCheck.healthy.check': '健康检查',
+  'page.upstream.step.healthyCheck.healthy': '健康',
+  'page.upstream.step.healthyCheck.unhealthy': '不健康',
+  'page.upstream.step.healthyCheck.healthy.status': '健康状态',
+  'page.upstream.step.healthyCheck.unhealthyStatus': '不健康状态',
+  'page.upstream.step.healthyCheck.active': '主动',
+  'page.upstream.step.healthyCheck.active.timeout': '超时时间',
+  'page.upstream.step.input.healthyCheck.active.timeout': '请输入超时时间',
+  'page.upstream.step.healthyCheck.active.http_path': '路径',
+  'page.upstream.step.input.healthyCheck.active.http_path': '请输入路径',
+  'page.upstream.step.healthyCheck.activePort': '端口',
+  'page.upstream.step.input.healthyCheck.activePort': '请输入端口',
+  'page.upstream.step.healthyCheck.activeHost': '域名',
+  'page.upstream.step.input.healthyCheck.activeHost': '请输入域名',
+  'page.upstream.step.healthyCheck.activeInterval': '间隔',
+  'page.upstream.step.input.healthyCheck.activeInterval': '请输入间隔',
+  'page.upstream.step.healthyCheck.successes': '成功次数',
+  'page.upstream.step.input.healthyCheck.successes': '请输入成功次数',
+  'page.upstream.step.healthyCheck.http_failures': '失败次数',
+  'page.upstream.step.healthyCheck.active.create.req_headers': '创建请求头',
+  'page.upstream.step.input.healthyCheck.http_failures': '请输入失败次数',
+  'page.upstream.step.healthyCheck.active.req_headers': '请求头',
+  'page.upstream.step.input.healthyCheck.active.req_headers': '请输入请求头',
+  'page.upstream.step.healthyCheck.passive': '被动',
+  'page.upstream.step.healthyCheck.passive.create.http_statuses': '创建状态码',
+  'page.upstream.step.healthyCheck.passive.http_statuses': '状态码',
+  'page.upstream.step.input.healthyCheck.passive.http_statuses': '请输入状态码',
+  'page.upstream.step.healthyCheck.passive.tcp_failures': 'tcp失败次数',
+  'page.upstream.step.input.healthyCheck.passive.tcp_failures': '请输入tcp失败次数',
   'page.upstream.notificationMessage.enableHealthCheckFirst': '请先启用探活健康检查。',
 
   'page.upstream.create.edit': '编辑',