From af855915896562c488c2b4669e24883cd140cfb5 Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Thu, 5 Aug 2021 23:22:57 -0500
Subject: [PATCH] run prettier on whole project (#2039)

---
 web/config/config.ts                          |  11 +-
 web/cypress/fixtures/plugin-dataset.json      |   4 +-
 .../fixtures/rawDataEditor-dataset.json       |  14 +-
 web/cypress/fixtures/route-json-data.json     |  12 +-
 ...sumer-with-api-breaker-plugin-form.spec.js |  13 +-
 ...sumer-with-limit-count-plugin-form.spec.js |  10 +-
 ...te-consumer-with-proxy-mirror-form.spec.js |   9 +-
 .../create-upstream-with-cors-form.spec.js    |  11 +-
 ...reate-upstream-with-limit-req-form.spec.js |   9 +-
 .../create-with-limit-conn-form.spec.js       |   9 +-
 ...eate-with-referer-restriction-form.spec.js |  13 +-
 .../create_and_delete_consumer.spec.js        |  13 +-
 .../dashboard/dashboard-smoketest.spec.js     |   2 +-
 .../integration/lang/switch-language.spec.js  |   2 +-
 .../create-delete-in-drawer-plugin.spec.js    |  70 ++--
 .../plugin/create-edit-delete-plugin.spec.js  |  16 +-
 ...create-edit-delete-plugin-template.spec.js |   1 -
 .../rawDataEditor/test-rawDataEditor.spec.js  |   4 +-
 .../check-route-required-field-flag.spec.js   |  34 +-
 ...create-edit-duplicate-delete-route.spec.js |  10 +-
 ...te-edit-route-with-redirect-plugin.spec.js |  15 +-
 ...e-route-when-not-select-upsteam-id.spec.js |   1 -
 .../create-route-with-chash-upstream.spec.js  |   6 +-
 .../route/create-route-with-cors-form.spec.js |  67 ++--
 ...route-with-limit-count-plugin-form.spec.js |   2 +-
 .../integration/route/search-route.spec.js    |   4 +-
 .../create-edit-delete-service.spec.js        |   2 +-
 ...create-service-with-chash-upstream.spec.js |   5 +-
 .../create_and_delete_upstream.spec.js        |  49 ++-
 ...dit_upstream_with_custom_chash_key.spec.js |   4 +-
 web/cypress/support/commands.js               |  46 +--
 .../components/LabelsfDrawer/LabelsDrawer.tsx |  10 +-
 web/src/components/PanelSection/index.tsx     |   6 +-
 web/src/components/Plugin/PluginDetail.tsx    | 121 ++++---
 web/src/components/Plugin/PluginPage.tsx      |  55 ++-
 web/src/components/Plugin/UI/api-breaker.tsx  |  50 +--
 web/src/components/Plugin/UI/basic-auth.tsx   |  21 +-
 web/src/components/Plugin/UI/cors.tsx         |  49 +--
 web/src/components/Plugin/UI/limit-conn.tsx   |  27 +-
 web/src/components/Plugin/UI/limit-count.tsx  | 210 +++++++----
 web/src/components/Plugin/UI/limit-req.tsx    |  50 ++-
 web/src/components/Plugin/UI/plugin.tsx       |  49 ++-
 web/src/components/Plugin/UI/proxy-mirror.tsx |  16 +-
 .../Plugin/UI/referer-restriction.tsx         |  58 +--
 web/src/components/Plugin/data.tsx            | 206 +++++------
 web/src/components/Plugin/locales/en-US.ts    | 113 ++++--
 web/src/components/Plugin/locales/zh-CN.ts    |  98 +++--
 web/src/components/Plugin/service.ts          |  34 +-
 web/src/components/Plugin/typing.d.ts         |   4 +-
 web/src/components/PluginFlow/PluginFlow.tsx  | 215 ++++++-----
 .../components/FlowGraph/FlowGraph.ts         | 342 ++++++++++--------
 .../PluginFlow/components/FlowGraph/index.ts  |   2 +-
 .../PluginFlow/components/FlowGraph/shapes.ts |  23 +-
 .../PluginFlow/components/Toolbar/index.tsx   | 168 ++++-----
 web/src/components/PluginFlow/constants.ts    |  71 ++--
 web/src/components/PluginFlow/index.ts        |   2 +-
 .../components/PluginFlow/locales/en-US.ts    |  16 +-
 .../components/PluginFlow/locales/zh-CN.ts    |   4 +-
 .../RawDataEditor/RawDataEditor.tsx           | 124 ++++---
 web/src/components/Upstream/UpstreamForm.tsx  | 166 +++++----
 .../Upstream/components/DiscoveryType.tsx     |  27 +-
 .../components/Upstream/components/Nodes.tsx  |  46 ++-
 .../Upstream/components/PassHost.tsx          |  70 ++--
 .../Upstream/components/Retries.tsx           |  22 +-
 .../components/Upstream/components/Scheme.tsx |  49 +--
 .../Upstream/components/ServiceName.tsx       |  27 +-
 .../components/Upstream/components/TLS.tsx    | 101 +++---
 .../Upstream/components/TimeUnit.tsx          |   4 +-
 .../Upstream/components/Timeout.tsx           |  16 +-
 .../components/Upstream/components/Type.tsx   |  51 ++-
 .../Upstream/components/UpstreamSelector.tsx  |  26 +-
 .../components/active-check/Concurrency.tsx   |  23 +-
 .../active-check/Healthy/HttpStatuses.tsx     |  30 +-
 .../active-check/Healthy/Interval.tsx         |  24 +-
 .../active-check/Healthy/Successes.tsx        |  26 +-
 .../components/active-check/Healthy/index.ts  |  10 +-
 .../Upstream/components/active-check/Host.tsx |  23 +-
 .../components/active-check/HttpPath.tsx      |  28 +-
 .../active-check/HttpsVerifyCertificate.tsx   |  26 +-
 .../Upstream/components/active-check/Port.tsx |  18 +-
 .../components/active-check/ReqHeaders.tsx    |  30 +-
 .../components/active-check/Timeout.tsx       |  25 +-
 .../Upstream/components/active-check/Type.tsx |  47 ++-
 .../active-check/Unhealthy/HttpFailures.tsx   |  26 +-
 .../active-check/Unhealthy/HttpStatuses.tsx   |  27 +-
 .../active-check/Unhealthy/Interval.tsx       |  24 +-
 .../active-check/Unhealthy/TCPFailures.tsx    |  30 +-
 .../active-check/Unhealthy/Timeouts.tsx       |  28 +-
 .../active-check/Unhealthy/index.ts           |  14 +-
 .../Upstream/components/active-check/index.ts |  24 +-
 .../passive-check/Healthy/HttpStatuses.tsx    |  53 ++-
 .../passive-check/Healthy/Successes.tsx       |  26 +-
 .../components/passive-check/Healthy/index.ts |   8 +-
 .../components/passive-check/Type.tsx         |  47 ++-
 .../passive-check/Unhealthy/HttpFailures.tsx  |  26 +-
 .../passive-check/Unhealthy/HttpStatuses.tsx  |  31 +-
 .../passive-check/Unhealthy/TcpFailures.tsx   |  22 +-
 .../passive-check/Unhealthy/Timeouts.tsx      |  28 +-
 .../passive-check/Unhealthy/index.ts          |  12 +-
 .../components/passive-check/index.ts         |  10 +-
 web/src/components/Upstream/constant.ts       |  24 +-
 web/src/components/Upstream/locales/en-US.ts  |  74 ++--
 web/src/components/Upstream/locales/zh-CN.ts  |  59 ++-
 web/src/components/Upstream/service.ts        |  50 +--
 web/src/components/Upstream/typings.d.ts      |  18 +-
 web/src/locales/en-US.ts                      |   6 +-
 web/src/locales/en-US/component.ts            |   3 +-
 web/src/locales/en-US/menu.ts                 |   2 +-
 web/src/locales/en-US/other.ts                |   2 +-
 web/src/locales/zh-CN.ts                      |   6 +-
 web/src/locales/zh-CN/menu.ts                 |   2 +-
 web/src/locales/zh-CN/other.ts                |   2 +-
 web/src/pages/Consumer/List.tsx               |  51 ++-
 web/src/pages/Consumer/locales/en-US.ts       |   5 +-
 web/src/pages/Consumer/locales/zh-CN.ts       |   3 +-
 web/src/pages/PluginTemplate/Create.tsx       |  39 +-
 web/src/pages/PluginTemplate/List.tsx         |  44 +--
 .../pages/PluginTemplate/components/Step1.tsx |  11 +-
 web/src/pages/PluginTemplate/service.ts       |   8 +-
 web/src/pages/Route/Create.tsx                |  42 ++-
 web/src/pages/Route/List.tsx                  | 173 +++++----
 .../components/CreateStep4/CreateStep4.tsx    |  10 +-
 .../components/DebugViews/DebugDrawView.tsx   | 216 ++++++-----
 .../DebugViews/DebugFormDataView.tsx          |  67 ++--
 .../components/DebugViews/DebugParamsView.tsx |  17 +-
 .../components/Step1/MatchingRulesView.tsx    |  97 ++---
 .../pages/Route/components/Step1/MetaView.tsx | 148 ++++----
 .../Route/components/Step1/ProxyRewrite.tsx   | 154 ++++----
 .../components/Step1/RequestConfigView.tsx    |  53 ++-
 .../pages/Route/components/Step3/index.tsx    |  36 +-
 web/src/pages/Route/constants.ts              | 134 +++----
 web/src/pages/Route/locales/en-US.ts          |  27 +-
 web/src/pages/Route/locales/zh-CN.ts          |  12 +-
 web/src/pages/Route/service.ts                |  16 +-
 web/src/pages/Route/transform.ts              |  82 +++--
 web/src/pages/Route/typing.d.ts               |  18 +-
 web/src/pages/SSL/List.tsx                    |   7 +-
 .../SSL/components/CertificateForm/index.tsx  |  12 +-
 web/src/pages/SSL/components/Step1/index.tsx  |   5 +-
 web/src/pages/SSL/locales/en-US.ts            |   3 +-
 web/src/pages/SSL/locales/zh-CN.ts            |   3 +-
 web/src/pages/ServerInfo/List.tsx             |   4 +-
 web/src/pages/ServerInfo/service.ts           |   2 +-
 web/src/pages/ServerInfo/typing.d.ts          |   6 +-
 web/src/pages/Service/Create.tsx              |  27 +-
 web/src/pages/Service/List.tsx                |  53 +--
 web/src/pages/Service/components/Step1.tsx    |  27 +-
 web/src/pages/Service/locales/en-US.ts        |   5 +-
 web/src/pages/Service/locales/zh-CN.ts        |   5 +-
 web/src/pages/Upstream/Create.tsx             |  23 +-
 web/src/pages/Upstream/List.tsx               |  54 +--
 web/src/pages/Upstream/components/Step1.tsx   |  14 +-
 web/src/pages/Upstream/locales/en-US.ts       |  28 +-
 web/src/pages/Upstream/locales/zh-CN.ts       |  20 +-
 web/src/pages/Upstream/service.ts             |   3 +-
 web/src/pages/User/Login.tsx                  |   5 +-
 .../User/components/LoginMethodPassword.tsx   |   9 +-
 web/src/pages/User/locales/en-US.ts           |   5 +-
 web/src/pages/User/locales/zh-CN.ts           |   3 +-
 web/src/typings.d.ts                          |  11 +-
 160 files changed, 3366 insertions(+), 2642 deletions(-)

diff --git a/web/config/config.ts b/web/config/config.ts
index dd09625e04..920a17821c 100644
--- a/web/config/config.ts
+++ b/web/config/config.ts
@@ -63,10 +63,11 @@ export default defineConfig({
   },
   outputPath: '../output/html',
   extraBabelPlugins: [
-    ['babel-plugin-istanbul',  {
-      "exclude": [
-        "**/.umi", "**/locales"
-      ]
-    }],
+    [
+      'babel-plugin-istanbul',
+      {
+        exclude: ['**/.umi', '**/locales'],
+      },
+    ],
   ],
 });
diff --git a/web/cypress/fixtures/plugin-dataset.json b/web/cypress/fixtures/plugin-dataset.json
index 5f3739ad67..940f34af79 100644
--- a/web/cypress/fixtures/plugin-dataset.json
+++ b/web/cypress/fixtures/plugin-dataset.json
@@ -192,8 +192,8 @@
     {
       "shouldValid": true,
       "data": {
-        "client_id" : "foo",
-        "token_endpoint" : "https://host.domain/auth/realms/foo/protocol/openid-connect/token"
+        "client_id": "foo",
+        "token_endpoint": "https://host.domain/auth/realms/foo/protocol/openid-connect/token"
       }
     },
     {
diff --git a/web/cypress/fixtures/rawDataEditor-dataset.json b/web/cypress/fixtures/rawDataEditor-dataset.json
index 613322f9f0..d13c4706e2 100644
--- a/web/cypress/fixtures/rawDataEditor-dataset.json
+++ b/web/cypress/fixtures/rawDataEditor-dataset.json
@@ -1,18 +1,8 @@
 {
   "Route": {
-    "uris": [
-      "/*"
-    ],
+    "uris": ["/*"],
     "name": "root",
-    "methods": [
-      "GET",
-      "HEAD",
-      "POST",
-      "PUT",
-      "DELETE",
-      "OPTIONS",
-      "PATCH"
-    ],
+    "methods": ["GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"],
     "upstream": {
       "nodes": [
         {
diff --git a/web/cypress/fixtures/route-json-data.json b/web/cypress/fixtures/route-json-data.json
index c9ee52c2ef..2bf983205e 100644
--- a/web/cypress/fixtures/route-json-data.json
+++ b/web/cypress/fixtures/route-json-data.json
@@ -14,11 +14,13 @@
     "vars": [],
     "upstream": {
       "type": "roundrobin",
-      "nodes": [{
-        "host": "httpbin.org",
-        "port": 80,
-        "weight": 1
-      }],
+      "nodes": [
+        {
+          "host": "httpbin.org",
+          "port": 80,
+          "weight": 1
+        }
+      ],
       "pass_host": "pass",
       "timeout": {
         "connect": 6,
diff --git a/web/cypress/integration/consumer/create-consumer-with-api-breaker-plugin-form.spec.js b/web/cypress/integration/consumer/create-consumer-with-api-breaker-plugin-form.spec.js
index a4df5d2caf..a5f2c09542 100644
--- a/web/cypress/integration/consumer/create-consumer-with-api-breaker-plugin-form.spec.js
+++ b/web/cypress/integration/consumer/create-consumer-with-api-breaker-plugin-form.spec.js
@@ -17,26 +17,25 @@
 /* eslint-disable no-undef */
 
 context('Create and delete consumer with api-breaker plugin form', () => {
-
   const selector = {
-    break_response_code: "#break_response_code",
-    empty:'.ant-empty-normal',
+    break_response_code: '#break_response_code',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
     drawer: '.ant-drawer-content',
     disabledSwitcher: '#disable',
     notification: '.ant-notification-notice-message',
-    monacoViewZones: '.view-zones'
-  }
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     break_response_code: 200,
     consumerName: 'test_consumer',
     description: 'desc_by_autotest',
     createConsumerSuccess: 'Create Consumer Successfully',
-    deleteConsumerSuccess: 'Delete Consumer Successfully'
-  }
+    deleteConsumerSuccess: 'Delete Consumer Successfully',
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/consumer/create-consumer-with-limit-count-plugin-form.spec.js b/web/cypress/integration/consumer/create-consumer-with-limit-count-plugin-form.spec.js
index 562b79c4a5..a676588114 100644
--- a/web/cypress/integration/consumer/create-consumer-with-limit-count-plugin-form.spec.js
+++ b/web/cypress/integration/consumer/create-consumer-with-limit-count-plugin-form.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and delete consumer with limit-count plugin form', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -39,8 +38,8 @@ context('Create and delete consumer with limit-count plugin form', () => {
     redis_cluster_name: '#redis_cluster_name',
     redis_cluster_nodes_0: '#redis_cluster_nodes_0',
     redis_cluster_nodes_1: '#redis_cluster_nodes_1',
-    monacoViewZones: '.view-zones'
-  }
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
@@ -49,7 +48,7 @@ context('Create and delete consumer with limit-count plugin form', () => {
     deleteConsumerSuccess: 'Delete Consumer Successfully',
     redisClusterName: 'Please Enter redis_cluster_name',
     redisClusterNode: 'Please Enter redis_cluster_node',
-  }
+  };
 
   beforeEach(() => {
     cy.login();
@@ -122,7 +121,6 @@ context('Create and delete consumer with limit-count plugin form', () => {
     });
     cy.get(selector.drawer).should('not.exist');
 
-
     // config limit-count form with redis-cluster policy
     cy.contains(selector.pluginCard, 'limit-count').within(() => {
       cy.contains('Enable').click({
diff --git a/web/cypress/integration/consumer/create-consumer-with-proxy-mirror-form.spec.js b/web/cypress/integration/consumer/create-consumer-with-proxy-mirror-form.spec.js
index f49f35c871..700204c1ae 100644
--- a/web/cypress/integration/consumer/create-consumer-with-proxy-mirror-form.spec.js
+++ b/web/cypress/integration/consumer/create-consumer-with-proxy-mirror-form.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and delete consumer with proxy-mirror plugin form', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -32,8 +31,8 @@ context('Create and delete consumer with proxy-mirror plugin form', () => {
     allow_origins_by_regex: '#allow_origins_by_regex_0',
     host: '#host',
     alert: '[role=alert]',
-    monacoViewZones: '.view-zones'
-  }
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
@@ -41,7 +40,7 @@ context('Create and delete consumer with proxy-mirror plugin form', () => {
     createConsumerSuccess: 'Create Consumer Successfully',
     deleteConsumerSuccess: 'Delete Consumer Successfully',
     time: 2,
-  }
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/consumer/create-upstream-with-cors-form.spec.js b/web/cypress/integration/consumer/create-upstream-with-cors-form.spec.js
index 03cb35ccbe..6dc7d5fc7f 100644
--- a/web/cypress/integration/consumer/create-upstream-with-cors-form.spec.js
+++ b/web/cypress/integration/consumer/create-upstream-with-cors-form.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and Delete Consumer', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -34,8 +33,8 @@ context('Create and Delete Consumer', () => {
     remote_addr: '[title=remote_addr]',
     max_age: '#max_age',
     allow_origins_by_regex: '#allow_origins_by_regex_0',
-    monacoViewZones: '.view-zones'
-  }
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
@@ -43,7 +42,7 @@ context('Create and Delete Consumer', () => {
     createConsumerSuccess: 'Create Consumer Successfully',
     deleteConsumerSuccess: 'Delete Consumer Successfully',
     time: 2,
-  }
+  };
 
   beforeEach(() => {
     cy.login();
@@ -62,7 +61,7 @@ context('Create and Delete Consumer', () => {
     // config auth plugin
     cy.contains(selector.pluginCard, 'key-auth').within(() => {
       cy.contains('Enable').click({
-        force: true
+        force: true,
       });
     });
     cy.focused(selector.drawer).should('exist');
diff --git a/web/cypress/integration/consumer/create-upstream-with-limit-req-form.spec.js b/web/cypress/integration/consumer/create-upstream-with-limit-req-form.spec.js
index 1c4fa7ff6b..ccf144a92f 100644
--- a/web/cypress/integration/consumer/create-upstream-with-limit-req-form.spec.js
+++ b/web/cypress/integration/consumer/create-upstream-with-limit-req-form.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and Delete Consumer', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -31,8 +30,8 @@ context('Create and Delete Consumer', () => {
     burst: '#burst',
     key: '#key',
     remote_addr: '[title=remote_addr]',
-    monacoViewZones: '.view-zones'
-  }
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
@@ -40,7 +39,7 @@ context('Create and Delete Consumer', () => {
     createConsumerSuccess: 'Create Consumer Successfully',
     deleteConsumerSuccess: 'Delete Consumer Successfully',
     time: 2,
-  }
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/consumer/create-with-limit-conn-form.spec.js b/web/cypress/integration/consumer/create-with-limit-conn-form.spec.js
index 4d096f3d42..b4cac1d5a6 100644
--- a/web/cypress/integration/consumer/create-with-limit-conn-form.spec.js
+++ b/web/cypress/integration/consumer/create-with-limit-conn-form.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and delete consumer with limit-conn plugin form', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -34,8 +33,8 @@ context('Create and delete consumer with limit-conn plugin form', () => {
     key: '#key',
     rejected_code: '#rejected_code',
     title: '[title="remote_addr"]',
-    monacoViewZones: '.view-zones'
-  }
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
@@ -46,7 +45,7 @@ context('Create and delete consumer with limit-conn plugin form', () => {
     burst: 0,
     default_conn_delay: 1,
     key: 'remote_addr',
-  }
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/consumer/create-with-referer-restriction-form.spec.js b/web/cypress/integration/consumer/create-with-referer-restriction-form.spec.js
index eb9d7c2936..7d10f751aa 100644
--- a/web/cypress/integration/consumer/create-with-referer-restriction-form.spec.js
+++ b/web/cypress/integration/consumer/create-with-referer-restriction-form.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and delete Consumer with referer-restriction form ', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -27,10 +26,10 @@ context('Create and delete Consumer with referer-restriction form ', () => {
     dropdown: '.rc-virtual-list',
     disabledSwitcher: '#disable',
     notification: '.ant-notification-notice-message',
-    whitelist: "#whitelist_0",
-    bypass_missing: "#bypass_missing",
-    monacoViewZones: '.view-zones'
-  }
+    whitelist: '#whitelist_0',
+    bypass_missing: '#bypass_missing',
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
@@ -38,7 +37,7 @@ context('Create and delete Consumer with referer-restriction form ', () => {
     createConsumerSuccess: 'Create Consumer Successfully',
     deleteConsumerSuccess: 'Delete Consumer Successfully',
     whitelist: 'yy.com',
-  }
+  };
 
   beforeEach(() => {
     cy.login();
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 ffd669d88a..b510e20579 100644
--- a/web/cypress/integration/consumer/create_and_delete_consumer.spec.js
+++ b/web/cypress/integration/consumer/create_and_delete_consumer.spec.js
@@ -17,9 +17,8 @@
 /* eslint-disable no-undef */
 
 context('Create and Delete Consumer', () => {
-
   const selector = {
-    empty:'.ant-empty-normal',
+    empty: '.ant-empty-normal',
     username: '#username',
     description: '#desc',
     pluginCard: '.ant-card',
@@ -28,17 +27,17 @@ context('Create and Delete Consumer', () => {
     notification: '.ant-notification-notice-message',
     nameSelector: '[title=Name]',
     serviceSelector: '[title=test_service]',
-    monacoScroll: ".monaco-scrollable-element",
-    monacoViewZones: '.view-zones'
-  }
+    monacoScroll: '.monaco-scrollable-element',
+    monacoViewZones: '.view-zones',
+  };
 
   const data = {
     consumerName: 'test_consumer',
     description: 'desc_by_autotest',
     createConsumerSuccess: 'Create Consumer Successfully',
     deleteConsumerSuccess: 'Delete Consumer Successfully',
-    pluginErrorAlert: 'Invalid plugin data'
-  }
+    pluginErrorAlert: 'Invalid plugin data',
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/dashboard/dashboard-smoketest.spec.js b/web/cypress/integration/dashboard/dashboard-smoketest.spec.js
index 4a67c690c5..c2530f9065 100644
--- a/web/cypress/integration/dashboard/dashboard-smoketest.spec.js
+++ b/web/cypress/integration/dashboard/dashboard-smoketest.spec.js
@@ -19,7 +19,7 @@
 context('dashboard page smoke test', () => {
   const selector = {
     pageContent: '.ant-pro-page-container',
-  }
+  };
   beforeEach(() => {
     cy.login();
   });
diff --git a/web/cypress/integration/lang/switch-language.spec.js b/web/cypress/integration/lang/switch-language.spec.js
index dfdaf9a80f..bb86ba5937 100644
--- a/web/cypress/integration/lang/switch-language.spec.js
+++ b/web/cypress/integration/lang/switch-language.spec.js
@@ -21,7 +21,7 @@ context('Switch language', () => {
 
   const selector = {
     languageSwitcher: '.ant-space-align-center',
-  }
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
index 0141c3b040..7aa9b3c996 100644
--- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
+++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
@@ -30,11 +30,11 @@ context('Delete Plugin List with the Drawer', () => {
     checkedSwitcher: '.ant-switch-checked',
     refresh: '.anticon-reload',
     empty: '.ant-empty-normal',
-  }
+  };
 
   const data = {
     basicAuthPlugin: 'basic-auth',
-  }
+  };
 
   beforeEach(() => {
     cy.login();
@@ -45,28 +45,34 @@ context('Delete Plugin List with the Drawer', () => {
     cy.contains('Plugin').click();
     cy.contains('Enable').click();
 
-    cy.contains(data.basicAuthPlugin).parents(selector.pluginCardBordered).within(() => {
-      cy.get('button').click({
-        force: true
+    cy.contains(data.basicAuthPlugin)
+      .parents(selector.pluginCardBordered)
+      .within(() => {
+        cy.get('button').click({
+          force: true,
+        });
       });
-    });
 
-    cy.get(selector.monacoMode).invoke('text').then(text => {
-      if (text === 'Form') {
-        cy.get(selector.monacoMode).click();
-        cy.get(selector.selectDropdown).should('be.visible');
-        cy.get(selector.selectJSON).click();
-      }
-    });
+    cy.get(selector.monacoMode)
+      .invoke('text')
+      .then((text) => {
+        if (text === 'Form') {
+          cy.get(selector.monacoMode).click();
+          cy.get(selector.selectDropdown).should('be.visible');
+          cy.get(selector.selectJSON).click();
+        }
+      });
 
-    cy.get(selector.drawer).should('be.visible').within(() => {
-      cy.get(selector.disabledSwitcher).click();
-      cy.get(selector.checkedSwitcher).should('exist');
-    });
+    cy.get(selector.drawer)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.disabledSwitcher).click();
+        cy.get(selector.checkedSwitcher).should('exist');
+      });
 
     cy.contains('button', 'Submit').click();
     cy.get(selector.drawer, {
-      timeout
+      timeout,
     }).should('not.exist');
   });
 
@@ -75,27 +81,31 @@ context('Delete Plugin List with the Drawer', () => {
     cy.contains('Plugin').click();
     cy.contains('Enable').click();
     ['openid-connect', 'authz-keycloak'].forEach((plugin) => {
-      cy.contains(plugin).parents(selector.pluginCardBordered).within(() => {
-        cy.get('button').click({
-          force: true
+      cy.contains(plugin)
+        .parents(selector.pluginCardBordered)
+        .within(() => {
+          cy.get('button').click({
+            force: true,
+          });
         });
-      });
-      cy.get(selector.drawer).should('be.visible').within(() => {
-        cy.contains('.ant-alert-warning', 'Doesn\'t need configuration').should('not.exist');
-        cy.contains('button', 'Cancel').click();
-      });
-    })
-  })
+      cy.get(selector.drawer)
+        .should('be.visible')
+        .within(() => {
+          cy.contains('.ant-alert-warning', "Doesn't need configuration").should('not.exist');
+          cy.contains('button', 'Cancel').click();
+        });
+    });
+  });
 
   it('should delete the plugin with the drawer', function () {
     cy.visit('/plugin/list');
     cy.get(selector.refresh).click();
     cy.contains('button', 'Configure').click();
     cy.get(selector.drawerFooter).contains('button', 'Delete').click({
-      force: true
+      force: true,
     });
     cy.contains('button', 'Confirm').click({
-      force: true
+      force: true,
     });
     cy.get(selector.empty).should('be.visible');
   });
diff --git a/web/cypress/integration/plugin/create-edit-delete-plugin.spec.js b/web/cypress/integration/plugin/create-edit-delete-plugin.spec.js
index c924d29fcf..6f5f4335f0 100644
--- a/web/cypress/integration/plugin/create-edit-delete-plugin.spec.js
+++ b/web/cypress/integration/plugin/create-edit-delete-plugin.spec.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable no-undef */
+/* eslint-disable */
 
 context('Enable and Delete Plugin List', () => {
   const timeout = 5000;
@@ -55,12 +55,14 @@ context('Enable and Delete Plugin List', () => {
     cy.get(this.domSelector.fiftyPerPage).should('exist');
     cy.location('href').should('include', 'pageSize=50');
 
-    cy.get(this.domSelector.deleteButton, { timeout }).should('exist').each(function ($el) {
-      cy.wrap($el).click().click({ timeout });
-      cy.contains('button', 'Confirm').click({ force: true });
-      cy.get(this.domSelector.notification).should('contain', this.data.deletePluginSuccess);
-      cy.get(this.domSelector.notificationCloseIcon).click().should('not.exist');
-    });
+    cy.get(this.domSelector.deleteButton, { timeout })
+      .should('exist')
+      .each(function ($el) {
+        cy.wrap($el).click().click({ timeout });
+        cy.contains('button', 'Confirm').click({ force: true });
+        cy.get(this.domSelector.notification).should('contain', this.data.deletePluginSuccess);
+        cy.get(this.domSelector.notificationCloseIcon).click().should('not.exist');
+      });
 
     // check if plugin list is empty
     cy.get(this.domSelector.empty).should('be.visible');
diff --git a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js
index 2567931c09..706135b799 100644
--- a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js
+++ b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js
@@ -17,7 +17,6 @@
 /* eslint-disable no-undef */
 
 context('Create Configure and Delete PluginTemplate', () => {
-
   const selector = {
     pluginCard: '.ant-card',
     empty: '.ant-empty-normal',
diff --git a/web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js b/web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js
index f89b341f21..797536381c 100644
--- a/web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js
+++ b/web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable no-undef */
+/* eslint-disable */
 
 context('Test RawDataEditor', () => {
   const timeout = 1000;
@@ -24,7 +24,7 @@ context('Test RawDataEditor', () => {
     tableBody: '.ant-table-tbody',
     drawer: '.ant-drawer-content',
     notification: '.ant-notification-notice-message',
-    monacoViewZones: '.view-zones'
+    monacoViewZones: '.view-zones',
   };
 
   const data = {
diff --git a/web/cypress/integration/route/check-route-required-field-flag.spec.js b/web/cypress/integration/route/check-route-required-field-flag.spec.js
index 13e2a64412..bdf7345ab2 100644
--- a/web/cypress/integration/route/check-route-required-field-flag.spec.js
+++ b/web/cypress/integration/route/check-route-required-field-flag.spec.js
@@ -25,29 +25,27 @@ context('Check Route Required Field Flag', () => {
     cy.visit('/');
     cy.contains('Route').click();
     cy.contains('Create').click();
-    cy.get('label[title="Name"]')
-      .then($els => {
-        // get Window reference from element
-        const win = $els[0].ownerDocument.defaultView
-        // use getComputedStyle to read the pseudo selector
-        const before = win.getComputedStyle($els[0], 'before')
-        // read the value of the `content` CSS property
-        const contentValue = before.getPropertyValue('content')
-        // the returned value will have double quotes around it, but this is correct
-        expect(contentValue).to.eq('"*"')
-      })
+    cy.get('label[title="Name"]').then(($els) => {
+      // get Window reference from element
+      const win = $els[0].ownerDocument.defaultView;
+      // use getComputedStyle to read the pseudo selector
+      const before = win.getComputedStyle($els[0], 'before');
+      // read the value of the `content` CSS property
+      const contentValue = before.getPropertyValue('content');
+      // the returned value will have double quotes around it, but this is correct
+      expect(contentValue).to.eq('"*"');
+    });
   });
 
   it('should exist required flag for Route path', function () {
     cy.visit('/');
     cy.contains('Route').click();
     cy.contains('Create').click();
-    cy.get('label[title="Path"]')
-      .then($els => {
-        const win = $els[0].ownerDocument.defaultView
-        const before = win.getComputedStyle($els[0], 'before')
-        const contentValue = before.getPropertyValue('content')
-        expect(contentValue).to.eq('"*"')
-      })
+    cy.get('label[title="Path"]').then(($els) => {
+      const win = $els[0].ownerDocument.defaultView;
+      const before = win.getComputedStyle($els[0], 'before');
+      const contentValue = before.getPropertyValue('content');
+      expect(contentValue).to.eq('"*"');
+    });
   });
 });
diff --git a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js
index 87e3cbfcb8..952833cb7a 100644
--- a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js
+++ b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js
@@ -47,14 +47,14 @@ context('Create and Delete Route', () => {
     selectJSON: '.ant-select-dropdown [label=JSON]',
     drawerFooter: '.ant-drawer-footer',
     nameSelector: '[title=Name]',
-    monacoScroll: ".monaco-scrollable-element",
+    monacoScroll: '.monaco-scrollable-element',
     deleteAlert: '.ant-modal-body',
     notificationCloseIcon: '.ant-notification-close-icon',
     notification: '.ant-notification-notice-message',
     addHost: '[data-cy=addHost]',
-    schemaErrorMessage: ".ant-form-item-explain.ant-form-item-explain-error",
-    advancedMatchingTable: ".ant-table-row.ant-table-row-level-0",
-    advancedMatchingTableOperation: ".ant-space"
+    schemaErrorMessage: '.ant-form-item-explain.ant-form-item-explain-error',
+    advancedMatchingTable: '.ant-table-row.ant-table-row-level-0',
+    advancedMatchingTableOperation: '.ant-space',
   };
 
   const data = {
@@ -183,7 +183,7 @@ context('Create and Delete Route', () => {
 
     cy.get(selector.monacoScroll).within(() => {
       cy.contains('upstream').should('exist');
-      cy.contains('vars').should('exist')
+      cy.contains('vars').should('exist');
       cy.contains(name).should('exist');
     });
   });
diff --git a/web/cypress/integration/route/create-edit-route-with-redirect-plugin.spec.js b/web/cypress/integration/route/create-edit-route-with-redirect-plugin.spec.js
index c6537055f3..15662dc5e9 100644
--- a/web/cypress/integration/route/create-edit-route-with-redirect-plugin.spec.js
+++ b/web/cypress/integration/route/create-edit-route-with-redirect-plugin.spec.js
@@ -27,7 +27,7 @@ context('Create Edit and Delete Route with redirect plugin', () => {
     customRedirectSelectOpt: '#redirectOption_list_1',
     customRedirectUrI: '#redirectURI',
     customRedirectCode: '[data-cy=redirect_code]',
-    customRedirectLabel: '[title=\'Custom Redirect\']',
+    customRedirectLabel: "[title='Custom Redirect']",
     deleteAlert: '.ant-modal-body',
     notificationCloseIcon: '.ant-notification-close-icon',
     notification: '.ant-notification-notice-message',
@@ -39,7 +39,7 @@ context('Create Edit and Delete Route with redirect plugin', () => {
     deleteRouteSuccess: 'Delete Route Successfully',
     step2Title: 'Define API Backend Server',
     step3Title: 'Plugin Config',
-    setUpstreamNotice: 'If you do not bind the service, you must set the Upstream (Step 2)'
+    setUpstreamNotice: 'If you do not bind the service, you must set the Upstream (Step 2)',
   };
 
   beforeEach(() => {
@@ -54,7 +54,7 @@ context('Create Edit and Delete Route with redirect plugin', () => {
     cy.contains('Next').click().click();
     cy.get(selector.name).type(name);
     cy.get(selector.redirect).click();
-    cy.contains('Custom').click({force: true});
+    cy.contains('Custom').click({ force: true });
     // after choose Custom option, Custom Redirect form field should be visible
     cy.get(selector.customRedirectLabel).should('be.visible');
     cy.get(selector.customRedirectUrI).should('be.visible');
@@ -94,7 +94,6 @@ context('Create Edit and Delete Route with redirect plugin', () => {
     cy.contains('Goto List').click();
     cy.url().should('contains', 'routes/list');
     cy.contains(newName).should('be.visible');
-
   });
 
   it('should delete the route', function () {
@@ -104,11 +103,11 @@ context('Create Edit and Delete Route with redirect plugin', () => {
     cy.contains(newName).siblings().contains('More').click();
     cy.contains('Delete').click();
     cy.get(selector.deleteAlert)
-        .should('be.visible')
-        .within(() => {
+      .should('be.visible')
+      .within(() => {
         cy.contains('OK').click();
-        });
+      });
     cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
-    cy.get(selector.notificationCloseIcon).click({multiple: true});
+    cy.get(selector.notificationCloseIcon).click({ multiple: true });
   });
 });
diff --git a/web/cypress/integration/route/create-route-when-not-select-upsteam-id.spec.js b/web/cypress/integration/route/create-route-when-not-select-upsteam-id.spec.js
index 6057011264..adda2568cd 100644
--- a/web/cypress/integration/route/create-route-when-not-select-upsteam-id.spec.js
+++ b/web/cypress/integration/route/create-route-when-not-select-upsteam-id.spec.js
@@ -17,7 +17,6 @@
 /* eslint-disable no-undef */
 
 context('Create Route without Upstream', () => {
-
   const selector = {
     name: '#name',
     nodes_0_host: '#nodes_0_host',
diff --git a/web/cypress/integration/route/create-route-with-chash-upstream.spec.js b/web/cypress/integration/route/create-route-with-chash-upstream.spec.js
index f2aef94371..1a014bb20f 100644
--- a/web/cypress/integration/route/create-route-with-chash-upstream.spec.js
+++ b/web/cypress/integration/route/create-route-with-chash-upstream.spec.js
@@ -23,8 +23,8 @@ context('Create and Edit Route With Custom CHash Key Upstream', () => {
     roundRobinSelect: '[title="Round Robin"]',
     varSelect: '[title="vars"]',
     defaultCHashKey: '[value="remote_addr"]',
-    upstreamType: ".ant-select-item-option-content",
-    hashPosition: ".ant-select-item-option-content",
+    upstreamType: '.ant-select-item-option-content',
+    hashPosition: '.ant-select-item-option-content',
     nodes_0_host: '#nodes_0_host',
     nodes_0_port: '#nodes_0_port',
     nodes_0_weight: '#nodes_0_weight',
@@ -119,6 +119,6 @@ context('Create and Edit Route With Custom CHash Key Upstream', () => {
         cy.contains('OK').click();
       });
     cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
-    cy.get(selector.notificationCloseIcon).click({multiple: true});
+    cy.get(selector.notificationCloseIcon).click({ multiple: true });
   });
 });
diff --git a/web/cypress/integration/route/create-route-with-cors-form.spec.js b/web/cypress/integration/route/create-route-with-cors-form.spec.js
index 3c9471136f..67ee8f43bb 100644
--- a/web/cypress/integration/route/create-route-with-cors-form.spec.js
+++ b/web/cypress/integration/route/create-route-with-cors-form.spec.js
@@ -31,11 +31,11 @@ context('Create and delete route with cors form', () => {
     deleteAlert: '.ant-modal-body',
     notificationCloseIcon: '.ant-notification-close-icon',
     notification: '.ant-notification-notice-message',
-    allow_credential: "#allow_credential",
-    allow_origins_by_regex0: "#allow_origins_by_regex_0",
-    allow_origins_by_regex1: "#allow_origins_by_regex_1",
-    addButton: "[data-cy=add-allow_origins_by_regex]",
-  }
+    allow_credential: '#allow_credential',
+    allow_origins_by_regex0: '#allow_origins_by_regex_0',
+    allow_origins_by_regex1: '#allow_origins_by_regex_1',
+    addButton: '[data-cy=add-allow_origins_by_regex]',
+  };
 
   const data = {
     deleteRouteSuccess: 'Delete Route Successfully',
@@ -64,16 +64,20 @@ context('Create and delete route with cors form', () => {
     cy.contains('Next').click();
 
     // config cors plugin
-    cy.contains('cors').parents(selector.pluginCardBordered).within(() => {
-      cy.get('button').click({
-        force: true
+    cy.contains('cors')
+      .parents(selector.pluginCardBordered)
+      .within(() => {
+        cy.get('button').click({
+          force: true,
+        });
       });
-    });
 
-    cy.get(selector.drawer).should('be.visible').within(() => {
-      cy.get(selector.disabledSwitcher).click();
-      cy.get(selector.checkedSwitcher).should('exist');
-    });
+    cy.get(selector.drawer)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.disabledSwitcher).click();
+        cy.get(selector.checkedSwitcher).should('exist');
+      });
 
     // config cors form
     cy.get(selector.allow_credential).click();
@@ -83,7 +87,10 @@ context('Create and delete route with cors form', () => {
     cy.get(selector.addButton).click();
     cy.get(selector.allow_origins_by_regex1).should('exist');
     cy.get(selector.allow_origins_by_regex0).next().should('have.class', 'anticon-minus-circle');
-    cy.get(selector.allow_origins_by_regex1).type('foo.com').next().should('have.class', 'anticon-minus-circle');
+    cy.get(selector.allow_origins_by_regex1)
+      .type('foo.com')
+      .next()
+      .should('have.class', 'anticon-minus-circle');
 
     cy.get(selector.drawer).within(() => {
       cy.contains('Submit').click({
@@ -107,21 +114,25 @@ context('Create and delete route with cors form', () => {
     cy.get(selector.name).clear().type('routeName');
     cy.contains('Search').click();
     cy.contains('routeName').siblings().contains('Configure').click();
-    cy.get(selector.name).should('have.value','routeName');
+    cy.get(selector.name).should('have.value', 'routeName');
     cy.contains('Next').click();
     cy.contains('Next').click();
 
     // config cors plugin
-    cy.contains('cors').parents(selector.pluginCardBordered).within(() => {
-      cy.get('button').click({
-        force: true
+    cy.contains('cors')
+      .parents(selector.pluginCardBordered)
+      .within(() => {
+        cy.get('button').click({
+          force: true,
+        });
       });
-    });
 
-    cy.get(selector.drawer).should('be.visible').within(() => {
-      cy.get(selector.disabledSwitcher).click();
-      cy.get(selector.checkedSwitcher).should('exist');
-    });
+    cy.get(selector.drawer)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.disabledSwitcher).click();
+        cy.get(selector.checkedSwitcher).should('exist');
+      });
 
     // edit allow_origins_by_regex ''
     cy.get(selector.allow_origins_by_regex0).clear();
@@ -149,10 +160,12 @@ context('Create and delete route with cors form', () => {
     cy.contains('Search').click();
     cy.contains('routeName').siblings().contains('More').click();
     cy.contains('Delete').click();
-    cy.get(selector.deleteAlert).should('be.visible').within(() => {
-      cy.contains('OK').click();
-    });
+    cy.get(selector.deleteAlert)
+      .should('be.visible')
+      .within(() => {
+        cy.contains('OK').click();
+      });
     cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
-    cy.get(selector.notificationCloseIcon).click({ multiple: true});
+    cy.get(selector.notificationCloseIcon).click({ multiple: true });
   });
 });
diff --git a/web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js b/web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js
index 78c7734600..2ab7d0ff96 100644
--- a/web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js
+++ b/web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js
@@ -53,7 +53,7 @@ context('Create and delete route with limit-count form', () => {
     weight: 1,
     redisClusterName: 'Please Enter redis_cluster_name',
     redisClusterNode: 'Please Enter redis_cluster_node',
-  }
+  };
 
   beforeEach(() => {
     cy.login();
diff --git a/web/cypress/integration/route/search-route.spec.js b/web/cypress/integration/route/search-route.spec.js
index 2c8c601092..77b5def307 100644
--- a/web/cypress/integration/route/search-route.spec.js
+++ b/web/cypress/integration/route/search-route.spec.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable no-undef */
+/* eslint-disable */
 
 context('Create and Search Route', () => {
   const timeout = 500;
@@ -39,7 +39,7 @@ context('Create and Search Route', () => {
     drawerBody: '.ant-drawer-wrapper-body',
     notification: '.ant-notification-notice-message',
     notificationClose: '.anticon-close',
-    expandSearch: '.ant-pro-form-collapse-button'
+    expandSearch: '.ant-pro-form-collapse-button',
   };
 
   const data = {
diff --git a/web/cypress/integration/service/create-edit-delete-service.spec.js b/web/cypress/integration/service/create-edit-delete-service.spec.js
index 74ae8f8732..bb0ac4eafd 100644
--- a/web/cypress/integration/service/create-edit-delete-service.spec.js
+++ b/web/cypress/integration/service/create-edit-delete-service.spec.js
@@ -29,7 +29,7 @@ context('Create and Delete Service ', () => {
     disabledSwitcher: '#disable',
     drawer: '.ant-drawer-content',
     checkedSwitcher: '.ant-switch-checked',
-    monacoScroll: ".monaco-scrollable-element",
+    monacoScroll: '.monaco-scrollable-element',
     monacoMode: "[data-cy='monaco-mode']",
     selectDropdown: '.ant-select-dropdown',
     selectJSON: '.ant-select-dropdown [label=JSON]',
diff --git a/web/cypress/integration/service/create-service-with-chash-upstream.spec.js b/web/cypress/integration/service/create-service-with-chash-upstream.spec.js
index e61358616e..59daec6182 100644
--- a/web/cypress/integration/service/create-service-with-chash-upstream.spec.js
+++ b/web/cypress/integration/service/create-service-with-chash-upstream.spec.js
@@ -26,8 +26,8 @@ context('Create and Edit Service with Custom CHash Key Upstream', () => {
     nodes_0_host: '#nodes_0_host',
     nodes_0_port: '#nodes_0_port',
     nodes_0_weight: '#nodes_0_weight',
-    upstreamType: ".ant-select-item-option-content",
-    hashPosition: ".ant-select-item-option-content",
+    upstreamType: '.ant-select-item-option-content',
+    hashPosition: '.ant-select-item-option-content',
     chash_key: '#key',
     notification: '.ant-notification-notice-message',
     nameSearch: '[title=Name]',
@@ -93,7 +93,6 @@ context('Create and Edit Service with Custom CHash Key Upstream', () => {
     cy.get(selector.notification).should('contain', data.editServiceSuccess);
   });
 
-
   it('should delete this service', function () {
     cy.visit('/service/list');
     cy.get(selector.nameSearch).type(data.serviceName);
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 7d8a48d9cf..31aba9f428 100644
--- a/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
+++ b/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
@@ -17,32 +17,31 @@
 /* eslint-disable no-undef */
 
 context('Create and Delete Upstream', () => {
-
   const selector = {
-    "name": "#name",
-    "nodes_0_host": "#nodes_0_host",
-    "nodes_0_port": "#nodes_0_port",
-    "nodes_0_weight": "#nodes_0_weight",
-    "input": ":input",
-    "notification": ".ant-notification-notice-message",
-    "nameSelector": "[title=Name]",
-    "upstreamType": ".ant-select-item-option-content",
-    "drawer": ".ant-drawer-content",
-    "monacoScroll": ".monaco-scrollable-element",
-    "description": "#desc",
-  }
+    name: '#name',
+    nodes_0_host: '#nodes_0_host',
+    nodes_0_port: '#nodes_0_port',
+    nodes_0_weight: '#nodes_0_weight',
+    input: ':input',
+    notification: '.ant-notification-notice-message',
+    nameSelector: '[title=Name]',
+    upstreamType: '.ant-select-item-option-content',
+    drawer: '.ant-drawer-content',
+    monacoScroll: '.monaco-scrollable-element',
+    description: '#desc',
+  };
 
   const data = {
-    "upstreamName": "test_upstream",
-    "description": "desc_by_autotest",
-    "ip1": "127.0.0.1",
-    "createUpstreamSuccess": "Create Upstream Successfully",
-    "deleteUpstreamSuccess": "Delete Upstream Successfully",
-    "port0": "7000",
-    "weight0": "2",
-    "port1": "7001",
-    "weight1": "2"
-  }
+    upstreamName: 'test_upstream',
+    description: 'desc_by_autotest',
+    ip1: '127.0.0.1',
+    createUpstreamSuccess: 'Create Upstream Successfully',
+    deleteUpstreamSuccess: 'Delete Upstream Successfully',
+    port0: '7000',
+    weight0: '2',
+    port1: '7001',
+    weight1: '2',
+  };
 
   beforeEach(() => {
     cy.login();
@@ -77,7 +76,7 @@ context('Create and Delete Upstream', () => {
     cy.get('.ant-drawer-content').should('be.visible');
 
     cy.get(selector.monacoScroll).within(() => {
-      cy.contains('nodes').should("exist");
+      cy.contains('nodes').should('exist');
       cy.contains('roundrobin').should('exist');
       cy.contains(data.upstreamName).should('exist');
     });
@@ -141,7 +140,7 @@ context('Create and Delete Upstream', () => {
     cy.get(selector.drawer).should('be.visible');
 
     cy.get(selector.monacoScroll).within(() => {
-      cy.contains('nodes').should("exist");
+      cy.contains('nodes').should('exist');
       cy.contains('chash').should('exist');
       cy.contains(data.upstreamName).should('exist');
     });
diff --git a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
index dda114593f..0b3b9236f6 100644
--- a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
+++ b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
@@ -26,8 +26,8 @@ context('Create and Delete Upstream With Custom CHash Key', () => {
     nodes_0_host: '#nodes_0_host',
     nodes_0_port: '#nodes_0_port',
     nodes_0_weight: '#nodes_0_weight',
-    upstreamType: ".ant-select-item-option-content",
-    hashPosition: ".ant-select-item-option-content",
+    upstreamType: '.ant-select-item-option-content',
+    hashPosition: '.ant-select-item-option-content',
     chash_key: '#key',
     notification: '.ant-notification-notice-message',
     nameSelector: '[title=Name]',
diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js
index e46ca78372..72d18b343e 100644
--- a/web/cypress/support/commands.js
+++ b/web/cypress/support/commands.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable no-undef */
+/* eslint-disable */
 import defaultSettings from '../../config/defaultSettings';
 import 'cypress-file-upload';
 import '@4tw/cypress-drag-drop';
@@ -45,7 +45,7 @@ Cypress.Commands.add('configurePlugins', (cases) => {
     selectDropdown: '.ant-select-dropdown',
     monacoMode: '[data-cy="monaco-mode"]',
     selectJSON: '.ant-select-dropdown [label=JSON]',
-    monacoViewZones: '.view-zones'
+    monacoViewZones: '.view-zones',
   };
 
   cy.get(domSelector.name, { timeout }).then(function (cards) {
@@ -69,15 +69,17 @@ Cypress.Commands.add('configurePlugins', (cases) => {
         // NOTE: wait for the Drawer to appear on the DOM
         cy.focused(domSelector.drawer).should('exist');
 
-        cy.get(domSelector.monacoMode).invoke('text').then(text => {
-          if (text === 'Form') {
-            cy.wait(5000);
-            cy.get(domSelector.monacoMode).should('be.visible');
-            cy.get(domSelector.monacoMode).click();
-            cy.get(domSelector.selectDropdown).should('be.visible');
-            cy.get(domSelector.selectJSON).click();
-          }
-        });
+        cy.get(domSelector.monacoMode)
+          .invoke('text')
+          .then((text) => {
+            if (text === 'Form') {
+              cy.wait(5000);
+              cy.get(domSelector.monacoMode).should('be.visible');
+              cy.get(domSelector.monacoMode).click();
+              cy.get(domSelector.selectDropdown).should('be.visible');
+              cy.get(domSelector.selectJSON).click();
+            }
+          });
 
         cy.get(domSelector.drawer, { timeout }).within(() => {
           cy.get(domSelector.switch).click({
@@ -85,16 +87,18 @@ Cypress.Commands.add('configurePlugins', (cases) => {
           });
         });
 
-        cy.get(domSelector.monacoMode).invoke('text').then(text => {
-          if (text === 'Form') {
-            // FIXME: https://github.com/cypress-io/cypress/issues/7306
-            cy.wait(5000);
-            cy.get(domSelector.monacoMode).should('be.visible');
-            cy.get(domSelector.monacoMode).click();
-            cy.get(domSelector.selectDropdown).should('be.visible');
-            cy.get(domSelector.selectJSON).click();
-          }
-        });
+        cy.get(domSelector.monacoMode)
+          .invoke('text')
+          .then((text) => {
+            if (text === 'Form') {
+              // FIXME: https://github.com/cypress-io/cypress/issues/7306
+              cy.wait(5000);
+              cy.get(domSelector.monacoMode).should('be.visible');
+              cy.get(domSelector.monacoMode).click();
+              cy.get(domSelector.selectDropdown).should('be.visible');
+              cy.get(domSelector.selectJSON).click();
+            }
+          });
         // edit monaco
         cy.get(domSelector.monacoViewZones).should('exist').click({ force: true });
         cy.window().then((window) => {
diff --git a/web/src/components/LabelsfDrawer/LabelsDrawer.tsx b/web/src/components/LabelsfDrawer/LabelsDrawer.tsx
index 9f6ff5b38c..467a597703 100644
--- a/web/src/components/LabelsfDrawer/LabelsDrawer.tsx
+++ b/web/src/components/LabelsfDrawer/LabelsDrawer.tsx
@@ -25,8 +25,8 @@ type Props = {
   title?: string;
   actionName: string;
   dataSource: string[];
-  filterList?: string[],
-  fetchLabelList: any,
+  filterList?: string[];
+  fetchLabelList: any;
   disabled: boolean;
   onClose: () => void;
 } & Pick<RouteModule.Step1PassProps, 'onChange'>;
@@ -113,14 +113,14 @@ const LabelList = (disabled: boolean, labelList: LabelList, filterList: string[]
 };
 
 const LabelsDrawer: React.FC<Props> = ({
-  title = "",
+  title = '',
   actionName = '',
   disabled = false,
   dataSource = [],
   filterList = [],
   fetchLabelList,
   onClose,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const transformLabel = transformLableValueToKeyValue(dataSource);
 
@@ -135,7 +135,7 @@ const LabelsDrawer: React.FC<Props> = ({
 
   return (
     <Drawer
-      title={title || formatMessage({ id: "component.label-manager" })}
+      title={title || formatMessage({ id: 'component.label-manager' })}
       placement="right"
       width={512}
       visible
diff --git a/web/src/components/PanelSection/index.tsx b/web/src/components/PanelSection/index.tsx
index 0fdfd10a92..6af6311264 100644
--- a/web/src/components/PanelSection/index.tsx
+++ b/web/src/components/PanelSection/index.tsx
@@ -29,7 +29,11 @@ const PanelSection: React.FC<{
       <Divider orientation="left">
         {title}
         &nbsp;
-        {tooltip && <Tooltip title={tooltip}><QuestionCircleOutlined /></Tooltip>}
+        {tooltip && (
+          <Tooltip title={tooltip}>
+            <QuestionCircleOutlined />
+          </Tooltip>
+        )}
       </Divider>
       <div style={style}>{children}</div>
     </div>
diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
index 882a910c7a..6137299b64 100644
--- a/web/src/components/Plugin/PluginDetail.tsx
+++ b/web/src/components/Plugin/PluginDetail.tsx
@@ -36,9 +36,9 @@ import Ajv from 'ajv';
 import type { DefinedError } from 'ajv';
 import addFormats from 'ajv-formats';
 import { compact, omit } from 'lodash';
-import type { Monaco } from "@monaco-editor/react";
-import Editor from "@monaco-editor/react";
-import type {languages} from "monaco-editor";
+import type { Monaco } from '@monaco-editor/react';
+import Editor from '@monaco-editor/react';
+import type { languages } from 'monaco-editor';
 
 import { fetchSchema } from './service';
 import { json2yaml, yaml2json } from '../../helpers';
@@ -94,14 +94,14 @@ const PluginDetail: React.FC<Props> = ({
   maskClosable = true,
   isEnabled = false,
   initialData = {},
-  onClose = () => { },
-  onChange = () => { },
+  onClose = () => {},
+  onChange = () => {},
 }) => {
   const { formatMessage } = useIntl();
   enum monacoModeList {
     JSON = 'JSON',
     YAML = 'YAML',
-    UIForm = 'Form'
+    UIForm = 'Form',
   }
   const [form] = Form.useForm();
   const [UIForm] = Form.useForm();
@@ -116,17 +116,20 @@ const PluginDetail: React.FC<Props> = ({
   ];
 
   if (PLUGIN_UI_LIST.includes(name)) {
-    modeOptions.push({ label: formatMessage({ id: 'component.plugin.form' }), value: monacoModeList.UIForm });
+    modeOptions.push({
+      label: formatMessage({ id: 'component.plugin.form' }),
+      value: monacoModeList.UIForm,
+    });
   }
 
   const getUIFormData = () => {
     if (name === 'cors') {
       const formData = UIForm.getFieldsValue();
-      const newMethods = formData.allow_methods.join(",");
+      const newMethods = formData.allow_methods.join(',');
       const compactAllowRegex = compact(formData.allow_origins_by_regex);
       // Note: default allow_origins_by_regex setted for UI is [''], but this is not allowed, omit it.
       if (compactAllowRegex.length === 0) {
-        return omit({ ...formData, allow_methods: newMethods }, ['allow_origins_by_regex'])
+        return omit({ ...formData, allow_methods: newMethods }, ['allow_origins_by_regex']);
       }
 
       return { ...formData, allow_methods: newMethods };
@@ -136,7 +139,9 @@ const PluginDetail: React.FC<Props> = ({
 
   const setUIFormData = (formData: any) => {
     if (name === 'cors' && formData) {
-      const methods = (formData.allow_methods || '').length ? formData.allow_methods.split(",") : ["*"];
+      const methods = (formData.allow_methods || '').length
+        ? formData.allow_methods.split(',')
+        : ['*'];
       UIForm.setFieldsValue({ ...formData, allow_methods: methods });
       return;
     }
@@ -145,7 +150,7 @@ const PluginDetail: React.FC<Props> = ({
 
   useEffect(() => {
     form.setFieldsValue({
-      disable: isEnabled ? true : (initialData[name] && !initialData[name].disable),
+      disable: isEnabled ? true : initialData[name] && !initialData[name].disable,
       scope: 'global',
     });
     if (PLUGIN_UI_LIST.includes(name)) {
@@ -155,15 +160,15 @@ const PluginDetail: React.FC<Props> = ({
   }, []);
 
   const formatYaml = (yaml: string): string => {
-    const json=yaml2json(yaml,true)
-    if (json.error){
-      return yaml
+    const json = yaml2json(yaml, true);
+    if (json.error) {
+      return yaml;
     }
     return json2yaml(json.data).data;
-  }
+  };
 
   const editorWillMount = (monaco: Monaco) => {
-    fetchSchema(name, schemaType).then((schema)=> {
+    fetchSchema(name, schemaType).then((schema) => {
       const schemaConfig: languages.json.DiagnosticsOptions = {
         validate: true,
         schemas: [
@@ -171,25 +176,27 @@ const PluginDetail: React.FC<Props> = ({
             // useless placeholder
             uri: `https://apisix.apache.org/`,
             fileMatch: ['*'],
-            schema
-          }
+            schema,
+          },
         ],
-        trailingCommas: "error",
-        enableSchemaRequest: false
+        trailingCommas: 'error',
+        enableSchemaRequest: false,
       };
       const yamlFormatProvider: languages.DocumentFormattingEditProvider = {
         provideDocumentFormattingEdits(model) {
-          return [{
-            text: formatYaml(model.getValue()),
-            range: model.getFullModelRange()
-          }];
-        }
+          return [
+            {
+              text: formatYaml(model.getValue()),
+              range: model.getFullModelRange(),
+            },
+          ];
+        },
       };
-      monaco.languages.registerDocumentFormattingEditProvider("yaml",yamlFormatProvider);
-      monaco.editor.getModels().forEach(model => model.updateOptions({tabSize: 2}));
+      monaco.languages.registerDocumentFormattingEditProvider('yaml', yamlFormatProvider);
+      monaco.editor.getModels().forEach((model) => model.updateOptions({ tabSize: 2 }));
       monaco.languages.json.jsonDefaults.setDiagnosticsOptions(schemaConfig);
-    })
-  }
+    });
+  };
 
   const validateData = (pluginName: string, value: PluginComponent.Data) => {
     return fetchSchema(pluginName, schemaType).then((schema) => {
@@ -242,20 +249,21 @@ const PluginDetail: React.FC<Props> = ({
         if (monacoMode === monacoModeList.YAML) {
           const { data: yamlData, error } = yaml2json(content, true);
           if (error) {
-            notification.error({message: formatMessage({id: 'component.global.invalidYaml'})});
+            notification.error({ message: formatMessage({ id: 'component.global.invalidYaml' }) });
             return;
           }
-          setContent(js_beautify(yamlData, { indent_size: 2 }))
+          setContent(js_beautify(yamlData, { indent_size: 2 }));
         } else {
-          setContent(js_beautify(JSON.stringify(getUIFormData()), { indent_size: 2 }))
+          setContent(js_beautify(JSON.stringify(getUIFormData()), { indent_size: 2 }));
         }
         break;
       }
       case monacoModeList.YAML: {
-        const jsonData = monacoMode === monacoModeList.JSON ? content : JSON.stringify(getUIFormData());
+        const jsonData =
+          monacoMode === monacoModeList.JSON ? content : JSON.stringify(getUIFormData());
         const { data: yamlData, error } = json2yaml(jsonData);
-        if (error){
-          notification.error({ message: formatMessage({ id:'component.global.invalidJson' }) });
+        if (error) {
+          notification.error({ message: formatMessage({ id: 'component.global.invalidJson' }) });
           return;
         }
         setContent(yamlData);
@@ -268,7 +276,7 @@ const PluginDetail: React.FC<Props> = ({
         } else {
           const { data: yamlData, error } = yaml2json(content, true);
           if (error) {
-            notification.error({ message: formatMessage({ id:'component.global.invalidYaml' }) });
+            notification.error({ message: formatMessage({ id: 'component.global.invalidYaml' }) });
             return;
           }
           setUIFormData(JSON.parse(yamlData));
@@ -281,7 +289,8 @@ const PluginDetail: React.FC<Props> = ({
     setMonacoMode(value);
   };
 
-  const isNoConfigurationRequired = pluginType === 'auth' && schemaType !== 'consumer' && (monacoMode !== monacoModeList.UIForm);
+  const isNoConfigurationRequired =
+    pluginType === 'auth' && schemaType !== 'consumer' && monacoMode !== monacoModeList.UIForm;
 
   return (
     <Drawer
@@ -338,7 +347,9 @@ const PluginDetail: React.FC<Props> = ({
                     onChange({ formData: form.getFieldsValue(), monacoData: value });
                   });
                 } catch (error) {
-                  notification.error({ message: formatMessage({ id:'component.global.invalidJson' }) });
+                  notification.error({
+                    message: formatMessage({ id: 'component.global.invalidJson' }),
+                  });
                 }
               }}
             >
@@ -364,7 +375,11 @@ const PluginDetail: React.FC<Props> = ({
         <Form.Item label={formatMessage({ id: 'component.global.name' })}>
           <Input value={name} bordered={false} disabled />
         </Form.Item>
-        <Form.Item label={formatMessage({ id: 'component.global.enable' })} valuePropName="checked" name="disable">
+        <Form.Item
+          label={formatMessage({ id: 'component.global.enable' })}
+          valuePropName="checked"
+          name="disable"
+        >
           <Switch
             defaultChecked={isEnabled ? true : initialData[name] && !initialData[name].disable}
             disabled={readonly || isEnabled}
@@ -373,7 +388,7 @@ const PluginDetail: React.FC<Props> = ({
         {type === 'global' && (
           <Form.Item label={formatMessage({ id: 'component.global.scope' })} name="scope">
             <Select disabled>
-              <Select.Option value="global">{formatMessage({ id: "other.global" })}</Select.Option>
+              <Select.Option value="global">{formatMessage({ id: 'other.global' })}</Select.Option>
             </Select>
           </Form.Item>
         )}
@@ -383,7 +398,10 @@ const PluginDetail: React.FC<Props> = ({
         title=""
         subTitle={
           isNoConfigurationRequired ? (
-            <Alert message={formatMessage({ id: 'component.plugin.noConfigurationRequired' })} type="warning" />
+            <Alert
+              message={formatMessage({ id: 'component.plugin.noConfigurationRequired' })}
+              type="warning"
+            />
           ) : null
         }
         ghost={false}
@@ -393,7 +411,7 @@ const PluginDetail: React.FC<Props> = ({
             value={monacoMode}
             options={modeOptions}
             onChange={handleModeChange}
-            data-cy='monaco-mode'
+            data-cy="monaco-mode"
             key={1}
           />,
           <Button
@@ -409,14 +427,21 @@ const PluginDetail: React.FC<Props> = ({
             key={3}
           >
             {formatMessage({ id: 'component.global.document' })}
-          </Button>
+          </Button>,
         ]}
       />
-      {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} schema={pluginSchema} form={UIForm} renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')} />}
+      {Boolean(monacoMode === monacoModeList.UIForm) && (
+        <PluginForm
+          name={name}
+          schema={pluginSchema}
+          form={UIForm}
+          renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')}
+        />
+      )}
       <div style={{ display: monacoMode === monacoModeList.UIForm ? 'none' : 'unset' }}>
         <Editor
           value={content}
-          onChange={text=>{
+          onChange={(text) => {
             if (text) {
               setContent(text);
             } else {
@@ -424,7 +449,7 @@ const PluginDetail: React.FC<Props> = ({
             }
           }}
           language={monacoMode.toLocaleLowerCase()}
-          onMount={(editor)=>{
+          onMount={(editor) => {
             // NOTE: for debug & test
             // @ts-ignore
             window.monacoEditor = editor;
@@ -435,8 +460,8 @@ const PluginDetail: React.FC<Props> = ({
               vertical: 'hidden',
               horizontal: 'hidden',
             },
-            wordWrap: "on",
-            minimap: {enabled: false},
+            wordWrap: 'on',
+            minimap: { enabled: false },
             readOnly: readonly,
           }}
         />
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index 609ddc313e..3f5a52e79c 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -28,11 +28,11 @@ import defaultPluginImg from '../../../public/static/default-plugin.png';
 type Props = {
   readonly?: boolean;
   type?: 'global' | 'scoped';
-  initialData?: PluginComponent.Data,
-  plugin_config_id?: string,
+  initialData?: PluginComponent.Data;
+  plugin_config_id?: string;
   schemaType?: PluginComponent.Schema;
   referPage?: PluginComponent.ReferPage;
-  showSelector?: boolean,
+  showSelector?: boolean;
   onChange?: (plugins: PluginComponent.Data, plugin_config_id?: string) => void;
 };
 
@@ -52,17 +52,19 @@ const NEVER_EXIST_PLUGIN_FLAG = 'NEVER_EXIST_PLUGIN_FLAG';
 const PluginPage: React.FC<Props> = ({
   readonly = false,
   initialData = {},
-  plugin_config_id = "",
+  plugin_config_id = '',
   schemaType = 'route',
   referPage = '',
   type = 'scoped',
   showSelector = false,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const { formatMessage } = useIntl();
   const [form] = Form.useForm();
   const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
-  const [pluginTemplateList, setPluginTemplateList] = useState<PluginTemplateModule.ResEntity[]>([]);
+  const [pluginTemplateList, setPluginTemplateList] = useState<PluginTemplateModule.ResEntity[]>(
+    [],
+  );
   const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);
   const [typeList, setTypeList] = useState<string[]>([]);
   const [plugins, setPlugins] = useState({});
@@ -87,8 +89,8 @@ const PluginPage: React.FC<Props> = ({
     });
     fetchPluginTemplateList().then((data) => {
       setPluginTemplateList(data);
-      form.setFieldsValue({ plugin_config_id })
-    })
+      form.setFieldsValue({ plugin_config_id });
+    });
   }, []);
 
   const PluginList = () => (
@@ -112,7 +114,11 @@ const PluginPage: React.FC<Props> = ({
         <Anchor offsetTop={150}>
           {typeList.map((typeItem) => {
             return (
-              <Anchor.Link href={`#plugin-category-${typeItem}`} title={formatMessage({ id: `component.plugin.${typeItem}` })} key={typeItem} />
+              <Anchor.Link
+                href={`#plugin-category-${typeItem}`}
+                title={formatMessage({ id: `component.plugin.${typeItem}` })}
+                key={typeItem}
+              />
             );
           })}
         </Anchor>
@@ -149,7 +155,9 @@ const PluginPage: React.FC<Props> = ({
                   {[
                     {
                       id: '',
-                      desc: formatMessage({ id: 'component.step.select.pluginTemplate.select.option' }),
+                      desc: formatMessage({
+                        id: 'component.step.select.pluginTemplate.select.option',
+                      }),
                     },
                     ...pluginTemplateList,
                   ].map((item) => (
@@ -160,10 +168,15 @@ const PluginPage: React.FC<Props> = ({
                 </Select>
               </Form.Item>
             </Form>
-            <Alert message={<>
-              <p>{formatMessage({ id: 'component.plugin.pluginTemplate.tip1' })}</p>
-              <p>{formatMessage({ id: 'component.plugin.pluginTemplate.tip2' })}</p>
-            </>} type="info" />
+            <Alert
+              message={
+                <>
+                  <p>{formatMessage({ id: 'component.plugin.pluginTemplate.tip1' })}</p>
+                  <p>{formatMessage({ id: 'component.plugin.pluginTemplate.tip2' })}</p>
+                </>
+              }
+              type="info"
+            />
           </>
         )}
         {typeList.map((typeItem) => {
@@ -183,17 +196,19 @@ const PluginPage: React.FC<Props> = ({
                   key={item.name}
                   actions={[
                     <Button
-                      type={initialData[item.name] && !initialData[item.name].disable ? 'primary' : 'default'}
+                      type={
+                        initialData[item.name] && !initialData[item.name].disable
+                          ? 'primary'
+                          : 'default'
+                      }
                       danger={initialData[item.name] && !initialData[item.name].disable}
                       onClick={() => {
                         setName(item.name);
                       }}
                     >
-                      {
-                        initialData[item.name] && !initialData[item.name].disable
-                          ? formatMessage({ id: 'component.plugin.disable' })
-                          : formatMessage({ id: 'component.plugin.enable' })
-                      }
+                      {initialData[item.name] && !initialData[item.name].disable
+                        ? formatMessage({ id: 'component.plugin.disable' })
+                        : formatMessage({ id: 'component.plugin.enable' })}
                     </Button>,
                   ]}
                   title={[
diff --git a/web/src/components/Plugin/UI/api-breaker.tsx b/web/src/components/Plugin/UI/api-breaker.tsx
index 28f851846d..f86a9bb237 100644
--- a/web/src/components/Plugin/UI/api-breaker.tsx
+++ b/web/src/components/Plugin/UI/api-breaker.tsx
@@ -29,7 +29,7 @@ const FORM_ITEM_LAYOUT = {
     span: 7,
   },
   wrapperCol: {
-    span: 7
+    span: 7,
   },
 };
 
@@ -40,7 +40,7 @@ const FORM_ITEM_WITHOUT_LABEL = {
 };
 
 const ApiBreaker: React.FC<Props> = ({ form }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form
@@ -51,11 +51,15 @@ const ApiBreaker: React.FC<Props> = ({ form }) => {
       <Form.Item
         label="break_response_code"
         name="break_response_code"
-        rules={[{
-          required: true,
-          message: `${formatMessage({ id: 'component.global.pleaseEnter' })} break_response_code`
-        }]}
-        tooltip={formatMessage({ id: 'component.pluginForm.api-breaker.break_response_code.tooltip' })}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} break_response_code`,
+          },
+        ]}
+        tooltip={formatMessage({
+          id: 'component.pluginForm.api-breaker.break_response_code.tooltip',
+        })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
         <InputNumber min={200} max={599} required />
@@ -78,14 +82,12 @@ const ApiBreaker: React.FC<Props> = ({ form }) => {
                 <Form.Item
                   {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
                   label={index === 0 && 'unhealthy.http_statuses'}
-                  tooltip={formatMessage({ id: 'component.pluginForm.api-breaker.unhealthy.http_statuses.tooltip' })}
+                  tooltip={formatMessage({
+                    id: 'component.pluginForm.api-breaker.unhealthy.http_statuses.tooltip',
+                  })}
                   key={field.key}
                 >
-                  <Form.Item
-                    {...field}
-                    validateTrigger={['onChange', 'onBlur']}
-                    noStyle
-                  >
+                  <Form.Item {...field} validateTrigger={['onChange', 'onBlur']} noStyle>
                     <InputNumber min={500} max={599} />
                   </Form.Item>
                   {fields.length > 1 ? (
@@ -120,7 +122,9 @@ const ApiBreaker: React.FC<Props> = ({ form }) => {
         label="unhealthy.failures"
         name={['unhealthy', 'failures']}
         initialValue={3}
-        tooltip={formatMessage({ id: 'component.pluginForm.api-breaker.unhealthy.failures.tooltip' })}
+        tooltip={formatMessage({
+          id: 'component.pluginForm.api-breaker.unhealthy.failures.tooltip',
+        })}
       >
         <InputNumber min={1} />
       </Form.Item>
@@ -134,13 +138,11 @@ const ApiBreaker: React.FC<Props> = ({ form }) => {
                   {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
                   key={field.key}
                   label={index === 0 && 'healthy.http_statuses'}
-                  tooltip={formatMessage({ id: 'component.pluginForm.api-breaker.healthy.http_statuses.tooltip' })}
+                  tooltip={formatMessage({
+                    id: 'component.pluginForm.api-breaker.healthy.http_statuses.tooltip',
+                  })}
                 >
-                  <Form.Item
-                    {...field}
-                    validateTrigger={['onChange', 'onBlur']}
-                    noStyle
-                  >
+                  <Form.Item {...field} validateTrigger={['onChange', 'onBlur']} noStyle>
                     <InputNumber min={200} max={499} />
                   </Form.Item>
                   {fields.length > 1 ? (
@@ -175,12 +177,14 @@ const ApiBreaker: React.FC<Props> = ({ form }) => {
         label="healthy.successes"
         name={['healthy', 'successes']}
         initialValue={3}
-        tooltip={formatMessage({ id: 'component.pluginForm.api-breaker.healthy.successes.tooltip' })}
+        tooltip={formatMessage({
+          id: 'component.pluginForm.api-breaker.healthy.successes.tooltip',
+        })}
       >
         <InputNumber min={1} />
       </Form.Item>
-    </Form >
+    </Form>
   );
-}
+};
 
 export default ApiBreaker;
diff --git a/web/src/components/Plugin/UI/basic-auth.tsx b/web/src/components/Plugin/UI/basic-auth.tsx
index 8d95aa0bdd..8613b89095 100644
--- a/web/src/components/Plugin/UI/basic-auth.tsx
+++ b/web/src/components/Plugin/UI/basic-auth.tsx
@@ -28,32 +28,21 @@ export const FORM_ITEM_LAYOUT = {
     span: 4,
   },
   wrapperCol: {
-    span: 8
+    span: 8,
   },
 };
 
 const BasicAuth: React.FC<Props> = ({ form }) => {
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-    >
-      <Form.Item
-        label="username"
-        name="username"
-        required
-      >
+    <Form form={form} {...FORM_ITEM_LAYOUT}>
+      <Form.Item label="username" name="username" required>
         <Input></Input>
       </Form.Item>
-      <Form.Item
-        label="password"
-        name="password"
-        required
-      >
+      <Form.Item label="password" name="password" required>
         <Input></Input>
       </Form.Item>
     </Form>
   );
-}
+};
 
 export default BasicAuth;
diff --git a/web/src/components/Plugin/UI/cors.tsx b/web/src/components/Plugin/UI/cors.tsx
index a052d078b2..12f5e39aab 100644
--- a/web/src/components/Plugin/UI/cors.tsx
+++ b/web/src/components/Plugin/UI/cors.tsx
@@ -30,7 +30,7 @@ const FORM_ITEM_LAYOUT = {
     span: 7,
   },
   wrapperCol: {
-    span: 8
+    span: 8,
   },
 };
 
@@ -50,10 +50,7 @@ const Cors: React.FC<Props> = ({ form }) => {
     >
       <Row>
         <Col span={24}>
-          <Form.Item
-            name="allow_methods"
-            initialValue={["*"]}
-          >
+          <Form.Item name="allow_methods" initialValue={['*']}>
             <Select
               mode="multiple"
               optionLabelProp="label"
@@ -65,21 +62,33 @@ const Cors: React.FC<Props> = ({ form }) => {
                 }
               }}
             >
-              {['*', 'GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH', 'CONNECT', 'TRACE'].map((item) => {
-                return <Select.Option value={item} key={item}>{item}</Select.Option>
+              {[
+                '*',
+                'GET',
+                'HEAD',
+                'POST',
+                'PUT',
+                'DELETE',
+                'OPTIONS',
+                'PATCH',
+                'CONNECT',
+                'TRACE',
+              ].map((item) => {
+                return (
+                  <Select.Option value={item} key={item}>
+                    {item}
+                  </Select.Option>
+                );
               })}
             </Select>
           </Form.Item>
         </Col>
       </Row>
-    </Form.Item >
+    </Form.Item>
   );
 
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-    >
+    <Form form={form} {...FORM_ITEM_LAYOUT}>
       <Form.Item
         extra={formatMessage({ id: 'component.pluginForm.cors.allow_origins.extra' })}
         name="allow_origins"
@@ -125,7 +134,7 @@ const Cors: React.FC<Props> = ({ form }) => {
         <Switch />
       </Form.Item>
 
-      <Form.List name='allow_origins_by_regex' initialValue={['']}>
+      <Form.List name="allow_origins_by_regex" initialValue={['']}>
         {(fields, { add, remove }) => {
           return (
             <div>
@@ -134,13 +143,11 @@ const Cors: React.FC<Props> = ({ form }) => {
                   {...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
                   label={index === 0 && 'allow_origins_by_regex'}
                   key={field.key}
-                  tooltip={formatMessage({ id: 'component.pluginForm.cors.allow_origins_by_regex.tooltip' })}
+                  tooltip={formatMessage({
+                    id: 'component.pluginForm.cors.allow_origins_by_regex.tooltip',
+                  })}
                 >
-                  <Form.Item
-                    {...field}
-                    validateTrigger={['onChange', 'onBlur']}
-                    noStyle
-                  >
+                  <Form.Item {...field} validateTrigger={['onChange', 'onBlur']} noStyle>
                     <Input style={{ width: '80%' }} />
                   </Form.Item>
                   {fields.length > 1 ? (
@@ -171,8 +178,8 @@ const Cors: React.FC<Props> = ({ form }) => {
           );
         }}
       </Form.List>
-    </Form >
+    </Form>
   );
-}
+};
 
 export default Cors;
diff --git a/web/src/components/Plugin/UI/limit-conn.tsx b/web/src/components/Plugin/UI/limit-conn.tsx
index ec535fc889..558ed39cc1 100644
--- a/web/src/components/Plugin/UI/limit-conn.tsx
+++ b/web/src/components/Plugin/UI/limit-conn.tsx
@@ -29,17 +29,14 @@ const FORM_ITEM_LAYOUT = {
     span: 6,
   },
   wrapperCol: {
-    span: 8
+    span: 8,
   },
 };
 
 const LimitConn: React.FC<Props> = ({ form }) => {
   const { formatMessage } = useIntl();
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-    >
+    <Form form={form} {...FORM_ITEM_LAYOUT}>
       <Form.Item
         label="conn"
         required
@@ -60,7 +57,9 @@ const LimitConn: React.FC<Props> = ({ form }) => {
         label="default_conn_delay"
         required
         name="default_conn_delay"
-        tooltip={formatMessage({ id: 'component.pluginForm.limit-conn.default_conn_delay.tooltip' })}
+        tooltip={formatMessage({
+          id: 'component.pluginForm.limit-conn.default_conn_delay.tooltip',
+        })}
       >
         <InputNumber step={0.001} min={0.001} required />
       </Form.Item>
@@ -72,8 +71,18 @@ const LimitConn: React.FC<Props> = ({ form }) => {
         tooltip={formatMessage({ id: 'component.pluginForm.limit-conn.key.tooltip' })}
       >
         <Select>
-          {["remote_addr", "server_addr", "http_x_real_ip", "http_x_forwarded_for", "consumer_name"].map(item => {
-            return <Select.Option value={item} key={item}>{item}</Select.Option>
+          {[
+            'remote_addr',
+            'server_addr',
+            'http_x_real_ip',
+            'http_x_forwarded_for',
+            'consumer_name',
+          ].map((item) => {
+            return (
+              <Select.Option value={item} key={item}>
+                {item}
+              </Select.Option>
+            );
           })}
         </Select>
       </Form.Item>
@@ -88,6 +97,6 @@ const LimitConn: React.FC<Props> = ({ form }) => {
       </Form.Item>
     </Form>
   );
-}
+};
 
 export default LimitConn;
diff --git a/web/src/components/Plugin/UI/limit-count.tsx b/web/src/components/Plugin/UI/limit-count.tsx
index cf86a2e0c9..e18b841a72 100644
--- a/web/src/components/Plugin/UI/limit-count.tsx
+++ b/web/src/components/Plugin/UI/limit-count.tsx
@@ -24,20 +24,21 @@ type Props = {
   form: FormInstance;
 };
 
-type PolicyProps = "local" | "redis" | "redis-cluster"
+type PolicyProps = 'local' | 'redis' | 'redis-cluster';
 
 const FORM_ITEM_LAYOUT = {
   labelCol: {
     span: 7,
   },
   wrapperCol: {
-    span: 10
+    span: 10,
   },
 };
 
 const FORM_ITEM_WITHOUT_LABEL = {
   wrapperCol: {
-    span: 10, offset: 7,
+    span: 10,
+    offset: 7,
   },
 };
 
@@ -50,54 +51,69 @@ const removeBtnStyle = {
 const RedisForm: React.FC = () => {
   const { formatMessage } = useIntl();
 
-  return (<>
-    <Form.Item
-      label="redis_host"
-      name="redis_host"
-      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_host.tooltip' })}
-      rules={[
-        { required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_host` },
-        { min: 2, message: formatMessage({ id: 'component.pluginForm.limit-count.atLeast2Characters.rule' }) }
-      ]}
-      validateTrigger={['onChange', 'onBlur', 'onClick']}
-    >
-      <Input />
-    </Form.Item>
-    <Form.Item
-      initialValue={6379}
-      label="redis_port"
-      name="redis_port"
-      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_port.tooltip' })}
-    >
-      <InputNumber min={1} max={65535} />
-    </Form.Item>
-    <Form.Item
-      label="redis_password"
-      name="redis_password"
-      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_password.tooltip' })}
-      rules={[{ required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_password` }]}
-      validateTrigger={['onChange', 'onBlur', 'onClick']}
-    >
-      <Input />
-    </Form.Item>
-    <Form.Item
-      initialValue={0}
-      label="redis_database"
-      name="redis_database"
-      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_database.tooltip' })}
-    >
-      <InputNumber min={0} />
-    </Form.Item>
-    <Form.Item
-      initialValue={1000}
-      label="redis_timeout"
-      name="redis_timeout"
-      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_timeout.tooltip' })}
-    >
-      <InputNumber min={1} />
-    </Form.Item>
-  </>)
-}
+  return (
+    <>
+      <Form.Item
+        label="redis_host"
+        name="redis_host"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_host.tooltip' })}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_host`,
+          },
+          {
+            min: 2,
+            message: formatMessage({
+              id: 'component.pluginForm.limit-count.atLeast2Characters.rule',
+            }),
+          },
+        ]}
+        validateTrigger={['onChange', 'onBlur', 'onClick']}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        initialValue={6379}
+        label="redis_port"
+        name="redis_port"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_port.tooltip' })}
+      >
+        <InputNumber min={1} max={65535} />
+      </Form.Item>
+      <Form.Item
+        label="redis_password"
+        name="redis_password"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_password.tooltip' })}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_password`,
+          },
+        ]}
+        validateTrigger={['onChange', 'onBlur', 'onClick']}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        initialValue={0}
+        label="redis_database"
+        name="redis_database"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_database.tooltip' })}
+      >
+        <InputNumber min={0} />
+      </Form.Item>
+      <Form.Item
+        initialValue={1000}
+        label="redis_timeout"
+        name="redis_timeout"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_timeout.tooltip' })}
+      >
+        <InputNumber min={1} />
+      </Form.Item>
+    </>
+  );
+};
 
 const RedisClusterForm: React.FC = () => {
   const { formatMessage } = useIntl();
@@ -108,8 +124,15 @@ const RedisClusterForm: React.FC = () => {
         label="redis_cluster_name"
         name="redis_cluster_name"
         validateTrigger={['onChange', 'onBlur', 'onClick']}
-        rules={[{ required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_cluster_name` }]}
-        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_cluster_name.tooltip' })}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_cluster_name`,
+          },
+        ]}
+        tooltip={formatMessage({
+          id: 'component.pluginForm.limit-count.redis_cluster_name.tooltip',
+        })}
       >
         <Input />
       </Form.Item>
@@ -118,10 +141,12 @@ const RedisClusterForm: React.FC = () => {
           return (
             <div>
               <Form.Item
-                label='redis_cluster_nodes'
+                label="redis_cluster_nodes"
                 style={{ marginBottom: 0 }}
                 required
-                tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_cluster_nodes.tooltip' })}
+                tooltip={formatMessage({
+                  id: 'component.pluginForm.limit-count.redis_cluster_nodes.tooltip',
+                })}
               >
                 {fields.map((field, index) => (
                   <Row style={{ marginBottom: 10 }} gutter={16} key={index}>
@@ -130,7 +155,20 @@ const RedisClusterForm: React.FC = () => {
                         {...field}
                         noStyle
                         validateTrigger={['onChange', 'onBlur', 'onClick']}
-                        rules={[{ required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} redis_cluster_node` }, { min: 2, message: formatMessage({ id: 'component.pluginForm.limit-count.atLeast2Characters.rule' }) }]}
+                        rules={[
+                          {
+                            required: true,
+                            message: `${formatMessage({
+                              id: 'component.global.pleaseEnter',
+                            })} redis_cluster_node`,
+                          },
+                          {
+                            min: 2,
+                            message: formatMessage({
+                              id: 'component.pluginForm.limit-count.atLeast2Characters.rule',
+                            }),
+                          },
+                        ]}
                       >
                         <Input />
                       </Form.Item>
@@ -178,22 +216,25 @@ const RedisClusterForm: React.FC = () => {
       >
         <InputNumber min={1} />
       </Form.Item>
-    </>)
-}
+    </>
+  );
+};
 
 const LimitCount: React.FC<Props> = ({ form }) => {
   const [policy, setPoicy] = useState<PolicyProps>('local');
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-    >
+    <Form form={form} {...FORM_ITEM_LAYOUT}>
       <Form.Item
         label="count"
         name="count"
-        rules={[{ required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} count` }]}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} count`,
+          },
+        ]}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-count.count.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
@@ -202,20 +243,36 @@ const LimitCount: React.FC<Props> = ({ form }) => {
       <Form.Item
         label="time_window"
         name="time_window"
-        rules={[{ required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} time_window` }]}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} time_window`,
+          },
+        ]}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-count.time_window.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
         <InputNumber min={1} />
       </Form.Item>
       <Form.Item
-        initialValue='remote_addr'
+        initialValue="remote_addr"
         label="key"
         name="key"
         tooltip={formatMessage({ id: 'component.pluginForm.limit-count.key.tooltip' })}
       >
         <Select>
-          {["remote_addr", "server_addr", "http_x_real_ip", "http_x_forwarded_for", "consumer_name", "service_id"].map(item => (<Select.Option value={item} key={item}>{item}</Select.Option>))}
+          {[
+            'remote_addr',
+            'server_addr',
+            'http_x_real_ip',
+            'http_x_forwarded_for',
+            'consumer_name',
+            'service_id',
+          ].map((item) => (
+            <Select.Option value={item} key={item}>
+              {item}
+            </Select.Option>
+          ))}
         </Select>
       </Form.Item>
       <Form.Item
@@ -232,11 +289,22 @@ const LimitCount: React.FC<Props> = ({ form }) => {
         name="policy"
         tooltip={formatMessage({ id: 'component.pluginForm.limit-count.policy.tooltip' })}
       >
-        <Select onChange={(e: PolicyProps) => { setPoicy(e) }}>
-          {["local", "redis", "redis-cluster"].map(item => (<Select.Option value={item} key={item}>{item}</Select.Option>))}
+        <Select
+          onChange={(e: PolicyProps) => {
+            setPoicy(e);
+          }}
+        >
+          {['local', 'redis', 'redis-cluster'].map((item) => (
+            <Select.Option value={item} key={item}>
+              {item}
+            </Select.Option>
+          ))}
         </Select>
       </Form.Item>
-      <Form.Item shouldUpdate={(prev, next) => prev.policy !== next.policy} style={{ display: 'none' }}>
+      <Form.Item
+        shouldUpdate={(prev, next) => prev.policy !== next.policy}
+        style={{ display: 'none' }}
+      >
         {() => {
           setPoicy(form.getFieldValue('policy'));
         }}
@@ -245,6 +313,6 @@ const LimitCount: React.FC<Props> = ({ form }) => {
       {Boolean(policy === 'redis-cluster') && <RedisClusterForm />}
     </Form>
   );
-}
+};
 
 export default LimitCount;
diff --git a/web/src/components/Plugin/UI/limit-req.tsx b/web/src/components/Plugin/UI/limit-req.tsx
index 7f106a4554..13318dc65e 100644
--- a/web/src/components/Plugin/UI/limit-req.tsx
+++ b/web/src/components/Plugin/UI/limit-req.tsx
@@ -30,7 +30,7 @@ export const FORM_ITEM_LAYOUT = {
     span: 4,
   },
   wrapperCol: {
-    span: 8
+    span: 8,
   },
 };
 
@@ -38,17 +38,16 @@ const LimitReq: React.FC<Props> = ({ form, schema }) => {
   const { formatMessage } = useIntl();
   const propertires = schema?.properties;
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-    >
+    <Form form={form} {...FORM_ITEM_LAYOUT}>
       <Form.Item
         label="rate"
         name="rate"
-        rules={[{
-          required: true,
-          message: `${formatMessage({ id: 'component.global.pleaseEnter' })} rate`
-        }]}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} rate`,
+          },
+        ]}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rate.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
@@ -57,10 +56,12 @@ const LimitReq: React.FC<Props> = ({ form, schema }) => {
       <Form.Item
         label="burst"
         name="burst"
-        rules={[{
-          required: true,
-          message: `${formatMessage({ id: 'component.global.pleaseEnter' })} burst`
-        }]}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseEnter' })} burst`,
+          },
+        ]}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.burst.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
@@ -69,16 +70,22 @@ const LimitReq: React.FC<Props> = ({ form, schema }) => {
       <Form.Item
         label="key"
         name="key"
-        rules={[{
-          required: true,
-          message: `${formatMessage({ id: 'component.global.pleaseChoose' })} key`
-        }]}
+        rules={[
+          {
+            required: true,
+            message: `${formatMessage({ id: 'component.global.pleaseChoose' })} key`,
+          },
+        ]}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.key.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
         <Select>
           {propertires.key.enum.map((item: string) => {
-            return <Select.Option value={item} key={item}>{item}</Select.Option>
+            return (
+              <Select.Option value={item} key={item}>
+                {item}
+              </Select.Option>
+            );
           })}
         </Select>
       </Form.Item>
@@ -88,10 +95,13 @@ const LimitReq: React.FC<Props> = ({ form, schema }) => {
         initialValue={propertires.rejected_code.default}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rejected_code.tooltip' })}
       >
-        <InputNumber min={propertires.rejected_code.minimum} max={propertires.rejected_code.maximum} />
+        <InputNumber
+          min={propertires.rejected_code.minimum}
+          max={propertires.rejected_code.maximum}
+        />
       </Form.Item>
     </Form>
   );
-}
+};
 
 export default LimitReq;
diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx
index d937e2e025..d0ea0de869 100644
--- a/web/src/components/Plugin/UI/plugin.tsx
+++ b/web/src/components/Plugin/UI/plugin.tsx
@@ -29,38 +29,53 @@ import RefererRestriction from './referer-restriction';
 import Cors from './cors';
 
 type Props = {
-  name: string,
-  schema: Record<string, any> | undefined,
-  form: FormInstance,
-  renderForm: boolean
-}
+  name: string;
+  schema: Record<string, any> | undefined;
+  form: FormInstance;
+  renderForm: boolean;
+};
 
-export const PLUGIN_UI_LIST = ['api-breaker', 'basic-auth', 'cors', 'limit-req', 'limit-conn', 'proxy-mirror', 'referer-restriction', 'limit-count'];
+export const PLUGIN_UI_LIST = [
+  'api-breaker',
+  'basic-auth',
+  'cors',
+  'limit-req',
+  'limit-conn',
+  'proxy-mirror',
+  'referer-restriction',
+  'limit-count',
+];
 
 export const PluginForm: React.FC<Props> = ({ name, schema, renderForm, form }) => {
-
   const { formatMessage } = useIntl();
 
-  if (!renderForm) { return <Empty style={{ marginTop: 100 }} description={formatMessage({ id: 'component.plugin.noConfigurationRequired' })} /> };
+  if (!renderForm) {
+    return (
+      <Empty
+        style={{ marginTop: 100 }}
+        description={formatMessage({ id: 'component.plugin.noConfigurationRequired' })}
+      />
+    );
+  }
 
   switch (name) {
     case 'api-breaker':
-      return <ApiBreaker form={form} />
+      return <ApiBreaker form={form} />;
     case 'basic-auth':
-      return <BasicAuth form={form} />
+      return <BasicAuth form={form} />;
     case 'limit-count':
-      return <LimitCount form={form} />
+      return <LimitCount form={form} />;
     case 'cors':
-      return <Cors form={form} />
+      return <Cors form={form} />;
     case 'limit-req':
-      return <LimitReq form={form} schema={schema} />
+      return <LimitReq form={form} schema={schema} />;
     case 'proxy-mirror':
-      return <ProxyMirror form={form} />
+      return <ProxyMirror form={form} />;
     case 'limit-conn':
-      return <LimitConn form={form} />
+      return <LimitConn form={form} />;
     case 'referer-restriction':
-      return <RefererRestriction form={form} />
+      return <RefererRestriction form={form} />;
     default:
       return null;
   }
-}
+};
diff --git a/web/src/components/Plugin/UI/proxy-mirror.tsx b/web/src/components/Plugin/UI/proxy-mirror.tsx
index aa5db8f7a9..e1e9fb051b 100644
--- a/web/src/components/Plugin/UI/proxy-mirror.tsx
+++ b/web/src/components/Plugin/UI/proxy-mirror.tsx
@@ -28,7 +28,7 @@ const FORM_ITEM_LAYOUT = {
     span: 4,
   },
   wrapperCol: {
-    span: 10
+    span: 10,
   },
 };
 
@@ -36,10 +36,7 @@ const ProxyMirror: React.FC<Props> = ({ form }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-    >
+    <Form form={form} {...FORM_ITEM_LAYOUT}>
       <Form.Item
         label="host"
         name="host"
@@ -47,15 +44,18 @@ const ProxyMirror: React.FC<Props> = ({ form }) => {
         tooltip={formatMessage({ id: 'component.pluginForm.proxy-mirror.host.tooltip' })}
         rules={[
           {
-            pattern: new RegExp(/^http(s)?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:[0-9]{1,5})?$/, 'g'),
+            pattern: new RegExp(
+              /^http(s)?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:[0-9]{1,5})?$/,
+              'g',
+            ),
             message: formatMessage({ id: 'component.pluginForm.proxy-mirror.host.ruletip' }),
-          }
+          },
         ]}
       >
         <Input />
       </Form.Item>
     </Form>
   );
-}
+};
 
 export default ProxyMirror;
diff --git a/web/src/components/Plugin/UI/referer-restriction.tsx b/web/src/components/Plugin/UI/referer-restriction.tsx
index 0e527a1e9b..3083ac8955 100644
--- a/web/src/components/Plugin/UI/referer-restriction.tsx
+++ b/web/src/components/Plugin/UI/referer-restriction.tsx
@@ -29,13 +29,14 @@ const FORM_ITEM_LAYOUT = {
     span: 5,
   },
   wrapperCol: {
-    span: 18
+    span: 18,
   },
 };
 
 const FORM_ITEM_WITHOUT_LABEL = {
   wrapperCol: {
-    span: 10, offset: 5
+    span: 10,
+    offset: 5,
   },
 };
 
@@ -46,21 +47,21 @@ const removeBtnStyle = {
 };
 
 const RefererRestriction: React.FC<Props> = ({ form }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
-    <Form
-      form={form}
-      {...FORM_ITEM_LAYOUT}
-      initialValues={{ whitelist: [''] }}
-    >
+    <Form form={form} {...FORM_ITEM_LAYOUT} initialValues={{ whitelist: [''] }}>
       <Form.List name="whitelist">
         {(fields, { add, remove }) => {
           return (
             <div>
               <Form.Item
-                extra={formatMessage({ id: 'component.pluginForm.referer-restriction.whitelist.tooltip' })}
-                label='whitelist'
-                tooltip={formatMessage({ id: 'component.pluginForm.referer-restriction.whitelist.tooltip' })}
+                extra={formatMessage({
+                  id: 'component.pluginForm.referer-restriction.whitelist.tooltip',
+                })}
+                label="whitelist"
+                tooltip={formatMessage({
+                  id: 'component.pluginForm.referer-restriction.whitelist.tooltip',
+                })}
                 required
                 style={{ marginBottom: 0 }}
               >
@@ -72,15 +73,20 @@ const RefererRestriction: React.FC<Props> = ({ form }) => {
                         validateTrigger={['onChange', 'onBlur', 'onClick']}
                         noStyle
                         required
-                        rules={[{
-                          message: formatMessage({
-                            id: 'page.route.form.itemRulesPatternMessage.domain',
-                          }),
-                          pattern: new RegExp(/^\*?[0-9a-zA-Z-._]+$/, 'g')
-                        }, {
-                          required: true,
-                          message: `${formatMessage({ id: 'component.global.pleaseEnter' })} whitelist`
-                        }]}
+                        rules={[
+                          {
+                            message: formatMessage({
+                              id: 'page.route.form.itemRulesPatternMessage.domain',
+                            }),
+                            pattern: new RegExp(/^\*?[0-9a-zA-Z-._]+$/, 'g'),
+                          },
+                          {
+                            required: true,
+                            message: `${formatMessage({
+                              id: 'component.global.pleaseEnter',
+                            })} whitelist`,
+                          },
+                        ]}
                       >
                         <Input />
                       </Form.Item>
@@ -113,16 +119,20 @@ const RefererRestriction: React.FC<Props> = ({ form }) => {
         }}
       </Form.List>
       <Form.Item
-        extra={formatMessage({ id: 'component.pluginForm.referer-restriction.bypass_missing.tooltip' })}
+        extra={formatMessage({
+          id: 'component.pluginForm.referer-restriction.bypass_missing.tooltip',
+        })}
         label="bypass_missing"
         name="bypass_missing"
-        tooltip={formatMessage({ id: 'component.pluginForm.referer-restriction.bypass_missing.tooltip' })}
+        tooltip={formatMessage({
+          id: 'component.pluginForm.referer-restriction.bypass_missing.tooltip',
+        })}
         valuePropName="checked"
       >
         <Switch />
       </Form.Item>
-    </Form >
+    </Form>
   );
-}
+};
 
 export default RefererRestriction;
diff --git a/web/src/components/Plugin/data.tsx b/web/src/components/Plugin/data.tsx
index 7281ea1e0c..1cfd297e19 100644
--- a/web/src/components/Plugin/data.tsx
+++ b/web/src/components/Plugin/data.tsx
@@ -27,7 +27,7 @@ export const PLUGIN_ICON_LIST: Record<string, any> = {
   'kafka-logger': <IconFont name="iconApache_kafka" />,
   'basic-auth': <IconFont name="iconbasic-auth" />,
   'hmac-auth': <IconFont name="iconhmac-auth" />,
-  'cors': <IconFont name="iconcors" />,
+  cors: <IconFont name="iconcors" />,
   'wolf-rbac': <IconFont name="iconwolf-rbac" />,
   'key-auth': <IconFont name="iconkey-auth" />,
   'request-validation': <IconFont name="iconrequest-validation" />,
@@ -49,13 +49,13 @@ export const PLUGIN_ICON_LIST: Record<string, any> = {
   'proxy-cache': <IconFont name="iconproxy-cache" />,
   'grpc-transcode': <IconFont name="icongrpc-transcode" />,
   'batch-requests': <IconFont name="iconbatch-request" />,
-  'zipkin': <IconFont name="iconzipkin" />,
+  zipkin: <IconFont name="iconzipkin" />,
   'udp-logger': <IconFont name="iconudp-logger" />,
   'error-log-logger': <IconFont name="iconerror-logger" />,
   'http-logger': <IconFont name="iconhttp-logger" />,
   'request-id': <IconFont name="iconrequest-id" />,
   'sls-logger': <IconFont name="iconsls-logger" />,
-  'syslog': <IconFont name="iconsys-logger" />,
+  syslog: <IconFont name="iconsys-logger" />,
   'tcp-logger': <IconFont name="icontcp-logger" />,
 };
 
@@ -66,162 +66,162 @@ export const PLUGIN_FILTER_LIST: Record<string, { list: PluginComponent.ReferPag
 };
 
 export enum PluginType {
-  authentication = "authentication",
-  security = "security",
-  traffic = "traffic",
-  serverless = "serverless",
-  observability = "observability",
-  other = "other"
+  authentication = 'authentication',
+  security = 'security',
+  traffic = 'traffic',
+  serverless = 'serverless',
+  observability = 'observability',
+  other = 'other',
 }
 
 /**
  * Plugin List that contains type field
-*/
+ */
 export const PLUGIN_LIST = {
-  "hmac-auth": {
-    type: PluginType.authentication
+  'hmac-auth': {
+    type: PluginType.authentication,
   },
-  "serverless-post-function": {
-    type: PluginType.serverless
+  'serverless-post-function': {
+    type: PluginType.serverless,
   },
-  "mqtt-proxy": {
+  'mqtt-proxy': {
     type: PluginType.other,
-    hidden: true
+    hidden: true,
   },
-  "response-rewrite": {
-    type: PluginType.other
+  'response-rewrite': {
+    type: PluginType.other,
   },
-  "basic-auth": {
-    type: PluginType.authentication
+  'basic-auth': {
+    type: PluginType.authentication,
   },
-  "error-log-logger": {
-    type: PluginType.observability
+  'error-log-logger': {
+    type: PluginType.observability,
   },
-  "fault-injection": {
-    type: PluginType.security
+  'fault-injection': {
+    type: PluginType.security,
   },
-  "limit-count": {
-    type: PluginType.traffic
+  'limit-count': {
+    type: PluginType.traffic,
   },
-  "prometheus": {
-    type: PluginType.observability
+  prometheus: {
+    type: PluginType.observability,
   },
-  "proxy-rewrite": {
-    type: PluginType.other
+  'proxy-rewrite': {
+    type: PluginType.other,
   },
-  "syslog": {
-    type: PluginType.observability
+  syslog: {
+    type: PluginType.observability,
   },
-  "traffic-split": {
-    type: PluginType.traffic
+  'traffic-split': {
+    type: PluginType.traffic,
   },
-  "jwt-auth": {
-    type: PluginType.authentication
+  'jwt-auth': {
+    type: PluginType.authentication,
   },
-  "kafka-logger": {
-    type: PluginType.observability
+  'kafka-logger': {
+    type: PluginType.observability,
   },
-  "limit-conn": {
-    type: PluginType.traffic
+  'limit-conn': {
+    type: PluginType.traffic,
   },
-  "udp-logger": {
-    type: PluginType.observability
+  'udp-logger': {
+    type: PluginType.observability,
   },
-  "zipkin": {
-    type: PluginType.observability
+  zipkin: {
+    type: PluginType.observability,
   },
-  "echo": {
+  echo: {
     type: PluginType.other,
-    hidden: true
+    hidden: true,
   },
-  "log-rotate": {
+  'log-rotate': {
     type: PluginType.observability,
-    hidden: true
+    hidden: true,
   },
-  "serverless-pre-function": {
-    type: PluginType.serverless
+  'serverless-pre-function': {
+    type: PluginType.serverless,
   },
-  "dubbo-proxy": {
+  'dubbo-proxy': {
     type: PluginType.other,
-    hidden: true
+    hidden: true,
   },
-  "node-status": {
+  'node-status': {
     type: PluginType.other,
-    hidden: true
+    hidden: true,
   },
-  "referer-restriction": {
-    type: PluginType.security
+  'referer-restriction': {
+    type: PluginType.security,
   },
-  "api-breaker": {
+  'api-breaker': {
     type: PluginType.security,
   },
-  "consumer-restriction": {
-    type: PluginType.security
+  'consumer-restriction': {
+    type: PluginType.security,
   },
-  "cors": {
-    type: PluginType.security
+  cors: {
+    type: PluginType.security,
   },
-  "limit-req": {
-    type: PluginType.traffic
+  'limit-req': {
+    type: PluginType.traffic,
   },
-  "proxy-mirror": {
-    type: PluginType.other
+  'proxy-mirror': {
+    type: PluginType.other,
   },
-  "request-validation": {
-    type: PluginType.security
+  'request-validation': {
+    type: PluginType.security,
   },
-  "example-plugin": {
+  'example-plugin': {
     type: PluginType.other,
-    hidden: true
+    hidden: true,
   },
-  "ip-restriction": {
-    type: PluginType.security
+  'ip-restriction': {
+    type: PluginType.security,
   },
-  "key-auth": {
-    type: PluginType.authentication
+  'key-auth': {
+    type: PluginType.authentication,
   },
-  "proxy-cache": {
-    type: PluginType.other
+  'proxy-cache': {
+    type: PluginType.other,
   },
-  "redirect": {
+  redirect: {
     type: PluginType.other,
-    hidden: true
+    hidden: true,
   },
-  "request-id": {
-    type: PluginType.observability
+  'request-id': {
+    type: PluginType.observability,
   },
-  "skywalking": {
-    type: PluginType.observability
+  skywalking: {
+    type: PluginType.observability,
   },
-  "batch-requests": {
-    type: PluginType.other
+  'batch-requests': {
+    type: PluginType.other,
   },
-  "http-logger": {
-    type: PluginType.observability
+  'http-logger': {
+    type: PluginType.observability,
   },
-  "openid-connect": {
-    type: PluginType.authentication
+  'openid-connect': {
+    type: PluginType.authentication,
   },
-  "sls-logger": {
-    type: PluginType.observability
+  'sls-logger': {
+    type: PluginType.observability,
   },
-  "tcp-logger": {
-    type: PluginType.observability
+  'tcp-logger': {
+    type: PluginType.observability,
   },
-  "uri-blocker": {
-    type: PluginType.security
+  'uri-blocker': {
+    type: PluginType.security,
   },
-  "wolf-rbac": {
-    type: PluginType.other
+  'wolf-rbac': {
+    type: PluginType.other,
   },
-  "authz-keycloak": {
-    type: PluginType.authentication
+  'authz-keycloak': {
+    type: PluginType.authentication,
   },
-  "grpc-transcode": {
-    type: PluginType.other
+  'grpc-transcode': {
+    type: PluginType.other,
   },
-  "server-info": {
+  'server-info': {
     type: PluginType.other,
-    hidden: true
-  }
-}
+    hidden: true,
+  },
+};
diff --git a/web/src/components/Plugin/locales/en-US.ts b/web/src/components/Plugin/locales/en-US.ts
index ebf77f8407..cba6e1962e 100644
--- a/web/src/components/Plugin/locales/en-US.ts
+++ b/web/src/components/Plugin/locales/en-US.ts
@@ -19,8 +19,10 @@ export default {
   'component.plugin.tip2': 'How to update?',
   'component.select.pluginTemplate': 'Select a plugin template',
   'component.step.select.pluginTemplate.select.option': 'Custom',
-  'component.plugin.pluginTemplate.tip1': '1. When a route already have plugins field configured, the plugins in the plugin template will be merged into it.',
-  'component.plugin.pluginTemplate.tip2': '2. The same plugin in the plugin template will override one in the plugins.',
+  'component.plugin.pluginTemplate.tip1':
+    '1. When a route already have plugins field configured, the plugins in the plugin template will be merged into it.',
+  'component.plugin.pluginTemplate.tip2':
+    '2. The same plugin in the plugin template will override one in the plugins.',
   'component.plugin.enable': 'Enable',
   'component.plugin.disable': 'Disable',
   'component.plugin.authentication': 'Authentication',
@@ -31,62 +33,97 @@ export default {
   'component.plugin.other': 'Other',
 
   // cors
-  'component.pluginForm.cors.allow_origins.tooltip': 'Which Origins is allowed to enable CORS, format as：scheme://host:port, for example: https://somehost.com:8081. Multiple origin use , to split. When allow_credential is false, you can use * to indicate allow any origin. you also can allow all any origins forcefully using ** even already enable allow_credential, but it will bring some security risks.',
+  'component.pluginForm.cors.allow_origins.tooltip':
+    'Which Origins is allowed to enable CORS, format as：scheme://host:port, for example: https://somehost.com:8081. Multiple origin use , to split. When allow_credential is false, you can use * to indicate allow any origin. you also can allow all any origins forcefully using ** even already enable allow_credential, but it will bring some security risks.',
   'component.pluginForm.cors.allow_origins.extra': 'For example: https://somehost.com:8081',
-  'component.pluginForm.cors.allow_methods.tooltip': 'Which Method is allowed to enable CORS, such as: GET, POST etc. Multiple method use , to split. When allow_credential is false, you can use * to indicate allow all any method. You also can allow any method forcefully using ** even already enable allow_credential, but it will bring some security risks.',
-  'component.pluginForm.cors.allow_headers.tooltip': 'Which headers are allowed to set in request when access cross-origin resource. Multiple value use , to split. When allow_credential is false, you can use * to indicate allow all request headers. You also can allow any header forcefully using ** even already enable allow_credential, but it will bring some security risks.',
-  'component.pluginForm.cors.expose_headers.tooltip': 'Which headers are allowed to set in response when access cross-origin resource. Multiple value use , to split.',
-  'component.pluginForm.cors.max_age.tooltip': 'Maximum number of seconds the results can be cached.. Within this time range, the browser will reuse the last check result. -1 means no cache. Please note that the maximum value is depended on browser, please refer to MDN for details.',
-  'component.pluginForm.cors.allow_credential.tooltip': 'If you set this option to true, you can not use \'*\' for other options.',
-  'component.pluginForm.cors.allow_origins_by_regex.tooltip': 'Use regex expressions to match which origin is allowed to enable CORS, for example, [".*.test.com"] can use to match all subdomain of test.com.',
+  'component.pluginForm.cors.allow_methods.tooltip':
+    'Which Method is allowed to enable CORS, such as: GET, POST etc. Multiple method use , to split. When allow_credential is false, you can use * to indicate allow all any method. You also can allow any method forcefully using ** even already enable allow_credential, but it will bring some security risks.',
+  'component.pluginForm.cors.allow_headers.tooltip':
+    'Which headers are allowed to set in request when access cross-origin resource. Multiple value use , to split. When allow_credential is false, you can use * to indicate allow all request headers. You also can allow any header forcefully using ** even already enable allow_credential, but it will bring some security risks.',
+  'component.pluginForm.cors.expose_headers.tooltip':
+    'Which headers are allowed to set in response when access cross-origin resource. Multiple value use , to split.',
+  'component.pluginForm.cors.max_age.tooltip':
+    'Maximum number of seconds the results can be cached.. Within this time range, the browser will reuse the last check result. -1 means no cache. Please note that the maximum value is depended on browser, please refer to MDN for details.',
+  'component.pluginForm.cors.allow_credential.tooltip':
+    "If you set this option to true, you can not use '*' for other options.",
+  'component.pluginForm.cors.allow_origins_by_regex.tooltip':
+    'Use regex expressions to match which origin is allowed to enable CORS, for example, [".*.test.com"] can use to match all subdomain of test.com.',
 
   // referer-restriction
-  'component.pluginForm.referer-restriction.whitelist.tooltip': 'List of hostname to whitelist. The hostname can be started with * as a wildcard.',
-  'component.pluginForm.referer-restriction.bypass_missing.tooltip': 'Whether to bypass the check when the Referer header is missing or malformed.',
+  'component.pluginForm.referer-restriction.whitelist.tooltip':
+    'List of hostname to whitelist. The hostname can be started with * as a wildcard.',
+  'component.pluginForm.referer-restriction.bypass_missing.tooltip':
+    'Whether to bypass the check when the Referer header is missing or malformed.',
 
   // api-breaker
-  'component.pluginForm.api-breaker.break_response_code.tooltip': 'Return error code when unhealthy.',
+  'component.pluginForm.api-breaker.break_response_code.tooltip':
+    'Return error code when unhealthy.',
   'component.pluginForm.api-breaker.max_breaker_sec.tooltip': 'Maximum breaker time(seconds).',
-  'component.pluginForm.api-breaker.unhealthy.http_statuses.tooltip': 'Status codes when unhealthy.',
-  'component.pluginForm.api-breaker.unhealthy.failures.tooltip': 'Number of consecutive error requests that triggered an unhealthy state.',
+  'component.pluginForm.api-breaker.unhealthy.http_statuses.tooltip':
+    'Status codes when unhealthy.',
+  'component.pluginForm.api-breaker.unhealthy.failures.tooltip':
+    'Number of consecutive error requests that triggered an unhealthy state.',
   'component.pluginForm.api-breaker.healthy.http_statuses.tooltip': 'Status codes when healthy.',
-  'component.pluginForm.api-breaker.healthy.successes.tooltip': 'Number of consecutive normal requests that trigger health status.',
+  'component.pluginForm.api-breaker.healthy.successes.tooltip':
+    'Number of consecutive normal requests that trigger health status.',
 
   // proxy-mirror
-  'component.pluginForm.proxy-mirror.host.tooltip': 'Specify a mirror service address, e.g. http://127.0.0.1:9797 (address needs to contain schema: http or https, not URI part)',
+  'component.pluginForm.proxy-mirror.host.tooltip':
+    'Specify a mirror service address, e.g. http://127.0.0.1:9797 (address needs to contain schema: http or https, not URI part)',
   'component.pluginForm.proxy-mirror.host.extra': 'e.g. http://127.0.0.1:9797',
-  'component.pluginForm.proxy-mirror.host.ruletip': 'address needs to contain schema: http or https, not URI part',
+  'component.pluginForm.proxy-mirror.host.ruletip':
+    'address needs to contain schema: http or https, not URI part',
 
   // limit-conn
-  'component.pluginForm.limit-conn.conn.tooltip': 'the maximum number of concurrent requests allowed. Requests exceeding this ratio (and below conn + burst) will get delayed(the latency seconds is configured by default_conn_delay) to conform to this threshold.',
-  'component.pluginForm.limit-conn.burst.tooltip': 'the number of excessive concurrent requests (or connections) allowed to be delayed.',
-  'component.pluginForm.limit-conn.default_conn_delay.tooltip': 'the latency seconds of request when concurrent requests exceeding conn but below (conn + burst).',
-  'component.pluginForm.limit-conn.key.tooltip': 'to limit the concurrency level.For example, one can use the host name (or server zone) as the key so that we limit concurrency per host name. Otherwise, we can also use the client address as the key so that we can avoid a single client from flooding our service with too many parallel connections or requests.Now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username).',
-  'component.pluginForm.limit-conn.rejected_code.tooltip': 'returned when the request exceeds conn + burst will be rejected.',
+  'component.pluginForm.limit-conn.conn.tooltip':
+    'the maximum number of concurrent requests allowed. Requests exceeding this ratio (and below conn + burst) will get delayed(the latency seconds is configured by default_conn_delay) to conform to this threshold.',
+  'component.pluginForm.limit-conn.burst.tooltip':
+    'the number of excessive concurrent requests (or connections) allowed to be delayed.',
+  'component.pluginForm.limit-conn.default_conn_delay.tooltip':
+    'the latency seconds of request when concurrent requests exceeding conn but below (conn + burst).',
+  'component.pluginForm.limit-conn.key.tooltip':
+    'to limit the concurrency level.For example, one can use the host name (or server zone) as the key so that we limit concurrency per host name. Otherwise, we can also use the client address as the key so that we can avoid a single client from flooding our service with too many parallel connections or requests.Now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username).',
+  'component.pluginForm.limit-conn.rejected_code.tooltip':
+    'returned when the request exceeds conn + burst will be rejected.',
 
   // limit-req
-  'component.pluginForm.limit-req.rate.tooltip': 'The specified request rate (number per second) threshold. Requests exceeding this rate (and below burst) will get delayed to conform to the rate.',
-  'component.pluginForm.limit-req.burst.tooltip': 'The number of excessive requests per second allowed to be delayed. Requests exceeding this hard limit will get rejected immediately.',
-  'component.pluginForm.limit-req.key.tooltip': 'The user specified key to limit the rate, now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username).',
-  'component.pluginForm.limit-req.rejected_code.tooltip': 'The HTTP status code returned when the request exceeds the threshold is rejected.',
+  'component.pluginForm.limit-req.rate.tooltip':
+    'The specified request rate (number per second) threshold. Requests exceeding this rate (and below burst) will get delayed to conform to the rate.',
+  'component.pluginForm.limit-req.burst.tooltip':
+    'The number of excessive requests per second allowed to be delayed. Requests exceeding this hard limit will get rejected immediately.',
+  'component.pluginForm.limit-req.key.tooltip':
+    'The user specified key to limit the rate, now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username).',
+  'component.pluginForm.limit-req.rejected_code.tooltip':
+    'The HTTP status code returned when the request exceeds the threshold is rejected.',
 
   'component.plugin.form': 'Form',
   'component.plugin.format-codes.disable': 'Format JSON or YAML data',
   'component.plugin.editor': 'Plugin Editor',
-  'component.plugin.noConfigurationRequired': 'Doesn\'t need configuration',
+  'component.plugin.noConfigurationRequired': "Doesn't need configuration",
 
   // limit-count
   'component.pluginForm.limit-count.count.tooltip': 'The specified number of requests threshold.',
-  'component.pluginForm.limit-count.time_window.tooltip': 'The time window in seconds before the request count is reset.',
-  'component.pluginForm.limit-count.key.tooltip': 'The user specified key to limit the count, now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username) and "service_id".',
-  'component.pluginForm.limit-count.rejected_code.tooltip': 'The HTTP status code returned when the request exceeds the threshold is rejected, default 503.',
-  'component.pluginForm.limit-count.policy.tooltip': 'The rate-limiting policies to use for retrieving and incrementing the limits. Available values are local(the counters will be stored locally in-memory on the node) and redis(counters are stored on a Redis server and will be shared across the nodes, usually use it to do the global speed limit).',
-  'component.pluginForm.limit-count.redis_host.tooltip': 'When using the redis policy, this property specifies the address of the Redis server.',
-  'component.pluginForm.limit-count.redis_port.tooltip': 'When using the redis policy, this property specifies the port of the Redis server.',
-  'component.pluginForm.limit-count.redis_password.tooltip': 'When using the redis policy, this property specifies the password of the Redis server.',
-  'component.pluginForm.limit-count.redis_database.tooltip': 'When using the redis policy, this property specifies the database you selected of the Redis server, and only for non Redis cluster mode (single instance mode or Redis public cloud service that provides single entry).',
-  'component.pluginForm.limit-count.redis_timeout.tooltip': 'When using the redis policy, this property specifies the timeout in milliseconds of any command submitted to the Redis server.',
-  'component.pluginForm.limit-count.redis_cluster_nodes.tooltip': 'When using redis-cluster policy, this property is a list of addresses of Redis cluster service nodes (at least two nodes).',
-  'component.pluginForm.limit-count.redis_cluster_name.tooltip': 'When using redis-cluster policy, this property is the name of Redis cluster service nodes.',
+  'component.pluginForm.limit-count.time_window.tooltip':
+    'The time window in seconds before the request count is reset.',
+  'component.pluginForm.limit-count.key.tooltip':
+    'The user specified key to limit the count, now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username) and "service_id".',
+  'component.pluginForm.limit-count.rejected_code.tooltip':
+    'The HTTP status code returned when the request exceeds the threshold is rejected, default 503.',
+  'component.pluginForm.limit-count.policy.tooltip':
+    'The rate-limiting policies to use for retrieving and incrementing the limits. Available values are local(the counters will be stored locally in-memory on the node) and redis(counters are stored on a Redis server and will be shared across the nodes, usually use it to do the global speed limit).',
+  'component.pluginForm.limit-count.redis_host.tooltip':
+    'When using the redis policy, this property specifies the address of the Redis server.',
+  'component.pluginForm.limit-count.redis_port.tooltip':
+    'When using the redis policy, this property specifies the port of the Redis server.',
+  'component.pluginForm.limit-count.redis_password.tooltip':
+    'When using the redis policy, this property specifies the password of the Redis server.',
+  'component.pluginForm.limit-count.redis_database.tooltip':
+    'When using the redis policy, this property specifies the database you selected of the Redis server, and only for non Redis cluster mode (single instance mode or Redis public cloud service that provides single entry).',
+  'component.pluginForm.limit-count.redis_timeout.tooltip':
+    'When using the redis policy, this property specifies the timeout in milliseconds of any command submitted to the Redis server.',
+  'component.pluginForm.limit-count.redis_cluster_nodes.tooltip':
+    'When using redis-cluster policy, this property is a list of addresses of Redis cluster service nodes (at least two nodes).',
+  'component.pluginForm.limit-count.redis_cluster_name.tooltip':
+    'When using redis-cluster policy, this property is the name of Redis cluster service nodes.',
   'component.pluginForm.limit-count.atLeast2Characters.rule': 'Please enter at least 2 characters',
 };
diff --git a/web/src/components/Plugin/locales/zh-CN.ts b/web/src/components/Plugin/locales/zh-CN.ts
index d7438d3ca8..666c95aabf 100644
--- a/web/src/components/Plugin/locales/zh-CN.ts
+++ b/web/src/components/Plugin/locales/zh-CN.ts
@@ -17,9 +17,10 @@
 export default {
   'component.plugin.tip1': '注意：自定义插件后（修改、新增、删除等），需更新 schema.json。',
   'component.plugin.tip2': '如何更新？',
-  "component.select.pluginTemplate": '选择插件模板',
+  'component.select.pluginTemplate': '选择插件模板',
   'component.step.select.pluginTemplate.select.option': '手动配置',
-  'component.plugin.pluginTemplate.tip1': '1. 若路由已配置插件，则插件模板数据将与已配置的插件数据合并。',
+  'component.plugin.pluginTemplate.tip1':
+    '1. 若路由已配置插件，则插件模板数据将与已配置的插件数据合并。',
   'component.plugin.pluginTemplate.tip2': '2. 插件模板相同的插件会覆盖掉原有的插件。',
   'component.plugin.enable': '启用',
   'component.plugin.disable': '禁用',
@@ -31,43 +32,63 @@ export default {
   'component.plugin.other': '其它',
 
   // cors
-  'component.pluginForm.cors.allow_origins.tooltip': '允许跨域访问的 Origin，格式如：scheme://host:port，比如: https://somehost.com:8081 。多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所有 Origin 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Origin 都通过，但请注意这样存在安全隐患。',
+  'component.pluginForm.cors.allow_origins.tooltip':
+    '允许跨域访问的 Origin，格式如：scheme://host:port，比如: https://somehost.com:8081 。多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所有 Origin 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Origin 都通过，但请注意这样存在安全隐患。',
   'component.pluginForm.cors.allow_origins.extra': '例如: https://somehost.com:8081',
-  'component.pluginForm.cors.allow_methods.tooltip': '允许跨域访问的 Method，比如: GET，POST等。多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所有 Origin 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Method 都通过，但请注意这样存在安全隐患。',
-  'component.pluginForm.cors.allow_headers.tooltip': '允许跨域访问时请求方携带哪些非 CORS规范 以外的 Header， 多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所 有 Header 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Method 都通过，但请注意这样存在安全隐患。',
-  'component.pluginForm.cors.expose_headers.tooltip': '允许跨域访问时响应方携带哪些非 CORS规范 以外的 Header， 多个值使用 , 分割。',
-  'component.pluginForm.cors.max_age.tooltip': '浏览器缓存 CORS 结果的最大时间，单位为秒，在这个时间范围内浏览器会复用上一次的检查结果，-1 表示不缓存。',
-  'component.pluginForm.cors.allow_credential.tooltip': '是否允许跨域访问的请求方携带凭据（如 Cookie 等）。根据 CORS 规范，如果设置该选项为 true，那么将不能在其他选项中使用 * 。',
-  'component.pluginForm.cors.allow_origins_by_regex.tooltip': '使用正则表达式数组来匹配允许跨域访问的 Origin, 如[".*.test.com"] 可以匹配任何test.com的子域名 * 。',
+  'component.pluginForm.cors.allow_methods.tooltip':
+    '允许跨域访问的 Method，比如: GET，POST等。多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所有 Origin 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Method 都通过，但请注意这样存在安全隐患。',
+  'component.pluginForm.cors.allow_headers.tooltip':
+    '允许跨域访问时请求方携带哪些非 CORS规范 以外的 Header， 多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所 有 Header 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Method 都通过，但请注意这样存在安全隐患。',
+  'component.pluginForm.cors.expose_headers.tooltip':
+    '允许跨域访问时响应方携带哪些非 CORS规范 以外的 Header， 多个值使用 , 分割。',
+  'component.pluginForm.cors.max_age.tooltip':
+    '浏览器缓存 CORS 结果的最大时间，单位为秒，在这个时间范围内浏览器会复用上一次的检查结果，-1 表示不缓存。',
+  'component.pluginForm.cors.allow_credential.tooltip':
+    '是否允许跨域访问的请求方携带凭据（如 Cookie 等）。根据 CORS 规范，如果设置该选项为 true，那么将不能在其他选项中使用 * 。',
+  'component.pluginForm.cors.allow_origins_by_regex.tooltip':
+    '使用正则表达式数组来匹配允许跨域访问的 Origin, 如[".*.test.com"] 可以匹配任何test.com的子域名 * 。',
 
   // referer-restriction
-  'component.pluginForm.referer-restriction.whitelist.tooltip': '域名列表。域名开头可以用\'*\'作为通配符。',
-  'component.pluginForm.referer-restriction.bypass_missing.tooltip': '当 Referer 不存在或格式有误时，是否绕过检查。',
+  'component.pluginForm.referer-restriction.whitelist.tooltip':
+    "域名列表。域名开头可以用'*'作为通配符。",
+  'component.pluginForm.referer-restriction.bypass_missing.tooltip':
+    '当 Referer 不存在或格式有误时，是否绕过检查。',
 
   // api-breaker
   'component.pluginForm.api-breaker.break_response_code.tooltip': '不健康返回错误码。',
   'component.pluginForm.api-breaker.max_breaker_sec.tooltip': '最大熔断持续时间。',
   'component.pluginForm.api-breaker.unhealthy.http_statuses.tooltip': '不健康时候的状态码。',
-  'component.pluginForm.api-breaker.unhealthy.failures.tooltip': '触发不健康状态的连续错误请求次数。',
+  'component.pluginForm.api-breaker.unhealthy.failures.tooltip':
+    '触发不健康状态的连续错误请求次数。',
   'component.pluginForm.api-breaker.healthy.http_statuses.tooltip': '健康时候的状态码。',
   'component.pluginForm.api-breaker.healthy.successes.tooltip': '触发健康状态的连续正常请求次数。',
 
   // proxy-mirror
-  'component.pluginForm.proxy-mirror.host.tooltip': '指定镜像服务地址，例如：http://127.0.0.1:9797（地址中需要包含 schema ：http或https，不能包含 URI 部分）',
+  'component.pluginForm.proxy-mirror.host.tooltip':
+    '指定镜像服务地址，例如：http://127.0.0.1:9797（地址中需要包含 schema ：http或https，不能包含 URI 部分）',
   'component.pluginForm.proxy-mirror.host.extra': '例如：http://127.0.0.1:9797',
-  'component.pluginForm.proxy-mirror.host.ruletip': '地址中需要包含 schema ：http或https，不能包含 URI 部分',
+  'component.pluginForm.proxy-mirror.host.ruletip':
+    '地址中需要包含 schema ：http或https，不能包含 URI 部分',
 
   // limit-conn
-  'component.pluginForm.limit-conn.conn.tooltip': '允许的最大并发请求数。超过 conn 的限制、但是低于 conn + burst 的请求，将被延迟处理。',
+  'component.pluginForm.limit-conn.conn.tooltip':
+    '允许的最大并发请求数。超过 conn 的限制、但是低于 conn + burst 的请求，将被延迟处理。',
   'component.pluginForm.limit-conn.burst.tooltip': '允许被延迟处理的并发请求数。',
-  'component.pluginForm.limit-conn.default_conn_delay.tooltip': '默认的典型连接（或请求）的处理延迟时间。',
-  'component.pluginForm.limit-conn.key.tooltip': '用户指定的限制并发级别的关键字，可以是客户端 IP 或服务端 IP。例如，可以使用主机名（或服务器区域）作为关键字，以便限制每个主机名的并发性。 否则，我们也可以使用客户端地址作为关键字，这样我们就可以避免单个客户端用太多的并行连接或请求淹没我们的服务。当前接受的 key 有："remote_addr"（客户端 IP 地址）, "server_addr"（服务端 IP 地址）, 请求头中的"X-Forwarded-For" 或 "X-Real-IP", "consumer_name"（consumer 的 username）。',
-  'component.pluginForm.limit-conn.rejected_code.tooltip': '当请求超过 conn + burst 这个阈值时，返回的 HTTP 状态码。',
+  'component.pluginForm.limit-conn.default_conn_delay.tooltip':
+    '默认的典型连接（或请求）的处理延迟时间。',
+  'component.pluginForm.limit-conn.key.tooltip':
+    '用户指定的限制并发级别的关键字，可以是客户端 IP 或服务端 IP。例如，可以使用主机名（或服务器区域）作为关键字，以便限制每个主机名的并发性。 否则，我们也可以使用客户端地址作为关键字，这样我们就可以避免单个客户端用太多的并行连接或请求淹没我们的服务。当前接受的 key 有："remote_addr"（客户端 IP 地址）, "server_addr"（服务端 IP 地址）, 请求头中的"X-Forwarded-For" 或 "X-Real-IP", "consumer_name"（consumer 的 username）。',
+  'component.pluginForm.limit-conn.rejected_code.tooltip':
+    '当请求超过 conn + burst 这个阈值时，返回的 HTTP 状态码。',
   // limit-req
-  'component.pluginForm.limit-req.rate.tooltip': '指定的请求速率（以秒为单位），请求速率超过 rate 但没有超过 （rate + brust）的请求会被加上延时。',
-  'component.pluginForm.limit-req.burst.tooltip': '请求速率超过（rate + brust）的请求会被直接拒绝。',
-  'component.pluginForm.limit-req.key.tooltip': '用来做请求计数的依据，当前接受的 key 有："remote_addr"(客户端IP地址), "server_addr"(服务端 IP 地址), 请求头中的"X-Forwarded-For" 或 "X-Real-IP"，"consumer_name"(consumer 的 username).',
-  'component.pluginForm.limit-req.rejected_code.tooltip': '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
+  'component.pluginForm.limit-req.rate.tooltip':
+    '指定的请求速率（以秒为单位），请求速率超过 rate 但没有超过 （rate + brust）的请求会被加上延时。',
+  'component.pluginForm.limit-req.burst.tooltip':
+    '请求速率超过（rate + brust）的请求会被直接拒绝。',
+  'component.pluginForm.limit-req.key.tooltip':
+    '用来做请求计数的依据，当前接受的 key 有："remote_addr"(客户端IP地址), "server_addr"(服务端 IP 地址), 请求头中的"X-Forwarded-For" 或 "X-Real-IP"，"consumer_name"(consumer 的 username).',
+  'component.pluginForm.limit-req.rejected_code.tooltip':
+    '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
 
   'component.plugin.form': '表单',
   'component.plugin.format-codes.disable': '用于格式化 JSON 或 YAML 内容',
@@ -76,16 +97,27 @@ export default {
 
   // limit-count
   'component.pluginForm.limit-count.count.tooltip': '指定时间窗口内的请求数量阈值。',
-  'component.pluginForm.limit-count.time_window.tooltip': '时间窗口的大小（以秒为单位），超过这个时间就会重置。',
-  'component.pluginForm.limit-count.key.tooltip': '用来做请求计数的有效值。例如，可以使用主机名（或服务器区域）作为关键字，以便限制每个主机名规定时间内的请求次数。我们也可以使用客户端地址作为关键字，这样我们就可以避免单个客户端规定时间内多次的连接我们的服务。当前接受的 key 有："remote_addr"（客户端 IP 地址）, "server_addr"（服务端 IP 地址）, 请求头中的"X-Forwarded-For" 或 "X-Real-IP", "consumer_name"（consumer 的 username）, "service_id" 。',
-  'component.pluginForm.limit-count.rejected_code.tooltip': '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
-  'component.pluginForm.limit-count.policy.tooltip': '用于检索和增加限制的速率限制策略。可选的值有：local(计数器被以内存方式保存在节点本地，默认选项) 和 redis(计数器保存在 Redis 服务节点上，从而可以跨节点共享结果，通常用它来完成全局限速)；以及redis-cluster，跟 redis 功能一样，只是使用 redis 集群方式。',
-  'component.pluginForm.limit-count.redis_host.tooltip': '当使用 redis 限速策略时，该属性是 Redis 服务节点的地址。',
-  'component.pluginForm.limit-count.redis_port.tooltip': '当使用 redis 限速策略时，该属性是 Redis 服务节点的端口。',
-  'component.pluginForm.limit-count.redis_password.tooltip': '当使用 redis 限速策略时，该属性是 Redis 服务节点的密码。',
-  'component.pluginForm.limit-count.redis_database.tooltip': '当使用 redis 限速策略时，该属性是 Redis 服务节点中使用的 database，并且只针对非 Redis 集群模式（单实例模式或者提供单入口的 Redis 公有云服务）生效。',
-  'component.pluginForm.limit-count.redis_timeout.tooltip': '当使用 redis 限速策略时，该属性是 Redis 服务节点以毫秒为单位的超时时间。',
-  'component.pluginForm.limit-count.redis_cluster_nodes.tooltip': '当使用 redis-cluster 限速策略时，该属性是 Redis 集群服务节点的地址列表（至少需要两个地址）。',
-  'component.pluginForm.limit-count.redis_cluster_name.tooltip': '当使用 redis-cluster 限速策略时，该属性是 Redis 集群服务节点的名称。',
+  'component.pluginForm.limit-count.time_window.tooltip':
+    '时间窗口的大小（以秒为单位），超过这个时间就会重置。',
+  'component.pluginForm.limit-count.key.tooltip':
+    '用来做请求计数的有效值。例如，可以使用主机名（或服务器区域）作为关键字，以便限制每个主机名规定时间内的请求次数。我们也可以使用客户端地址作为关键字，这样我们就可以避免单个客户端规定时间内多次的连接我们的服务。当前接受的 key 有："remote_addr"（客户端 IP 地址）, "server_addr"（服务端 IP 地址）, 请求头中的"X-Forwarded-For" 或 "X-Real-IP", "consumer_name"（consumer 的 username）, "service_id" 。',
+  'component.pluginForm.limit-count.rejected_code.tooltip':
+    '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
+  'component.pluginForm.limit-count.policy.tooltip':
+    '用于检索和增加限制的速率限制策略。可选的值有：local(计数器被以内存方式保存在节点本地，默认选项) 和 redis(计数器保存在 Redis 服务节点上，从而可以跨节点共享结果，通常用它来完成全局限速)；以及redis-cluster，跟 redis 功能一样，只是使用 redis 集群方式。',
+  'component.pluginForm.limit-count.redis_host.tooltip':
+    '当使用 redis 限速策略时，该属性是 Redis 服务节点的地址。',
+  'component.pluginForm.limit-count.redis_port.tooltip':
+    '当使用 redis 限速策略时，该属性是 Redis 服务节点的端口。',
+  'component.pluginForm.limit-count.redis_password.tooltip':
+    '当使用 redis 限速策略时，该属性是 Redis 服务节点的密码。',
+  'component.pluginForm.limit-count.redis_database.tooltip':
+    '当使用 redis 限速策略时，该属性是 Redis 服务节点中使用的 database，并且只针对非 Redis 集群模式（单实例模式或者提供单入口的 Redis 公有云服务）生效。',
+  'component.pluginForm.limit-count.redis_timeout.tooltip':
+    '当使用 redis 限速策略时，该属性是 Redis 服务节点以毫秒为单位的超时时间。',
+  'component.pluginForm.limit-count.redis_cluster_nodes.tooltip':
+    '当使用 redis-cluster 限速策略时，该属性是 Redis 集群服务节点的地址列表（至少需要两个地址）。',
+  'component.pluginForm.limit-count.redis_cluster_name.tooltip':
+    '当使用 redis-cluster 限速策略时，该属性是 Redis 集群服务节点的名称。',
   'component.pluginForm.limit-count.atLeast2Characters.rule': '请至少输入 2 个字符',
 };
diff --git a/web/src/components/Plugin/service.ts b/web/src/components/Plugin/service.ts
index bf2f0a59f2..5829468e2c 100644
--- a/web/src/components/Plugin/service.ts
+++ b/web/src/components/Plugin/service.ts
@@ -20,35 +20,35 @@ import { request } from 'umi';
 import { PLUGIN_LIST, PluginType } from './data';
 
 const cached: {
-  list: PluginComponent.Meta[]
+  list: PluginComponent.Meta[];
 } = {
-  list: []
-}
+  list: [],
+};
 
 export const fetchList = () => {
   if (cached.list.length) {
-    return Promise.resolve(cached.list)
+    return Promise.resolve(cached.list);
   }
 
   return request<Res<PluginComponent.Meta[]>>('/plugins?all=true').then((data) => {
-    const typedData = data.data.map(item => ({
+    const typedData = data.data.map((item) => ({
       ...item,
-      type: PLUGIN_LIST[item.name]?.type || "other",
+      type: PLUGIN_LIST[item.name]?.type || 'other',
       originType: item.type,
-      hidden: PLUGIN_LIST[item.name]?.hidden || false
+      hidden: PLUGIN_LIST[item.name]?.hidden || false,
     }));
 
-    let finalList: PluginComponent.Meta[] = []
+    let finalList: PluginComponent.Meta[] = [];
 
-    Object.values(PluginType).forEach(type => {
-      finalList = finalList.concat(typedData.filter(item => item.type === type))
-    })
+    Object.values(PluginType).forEach((type) => {
+      finalList = finalList.concat(typedData.filter((item) => item.type === type));
+    });
 
     if (cached.list.length === 0) {
-      cached.list = finalList
+      cached.list = finalList;
     }
 
-    return finalList
+    return finalList;
   });
 };
 
@@ -82,7 +82,9 @@ export const fetchSchema = async (
 };
 
 export const fetchPluginTemplateList = () => {
-  return request<Res<ResListData<PluginTemplateModule.ResEntity>>>('/plugin_configs').then((data) => {
-    return data.data.rows;
-  });
+  return request<Res<ResListData<PluginTemplateModule.ResEntity>>>('/plugin_configs').then(
+    (data) => {
+      return data.data.rows;
+    },
+  );
 };
diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts
index c6400f1c76..7dd46d6568 100644
--- a/web/src/components/Plugin/typing.d.ts
+++ b/web/src/components/Plugin/typing.d.ts
@@ -24,7 +24,7 @@ declare namespace PluginComponent {
     priority: number;
     schema: Record<string, any>;
     type: string;
-    originType: string,
+    originType: string;
     version: number;
     consumer_schema?: Record<string, any>;
     hidden?: boolean;
@@ -36,7 +36,7 @@ declare namespace PluginComponent {
     formData: any;
     monacoData: any;
     shouldDelete?: boolean;
-  }
+  };
 
   type MonacoLanguage = 'JSON' | 'YAML' | 'Form';
 }
diff --git a/web/src/components/PluginFlow/PluginFlow.tsx b/web/src/components/PluginFlow/PluginFlow.tsx
index 21afb12263..7794139def 100644
--- a/web/src/components/PluginFlow/PluginFlow.tsx
+++ b/web/src/components/PluginFlow/PluginFlow.tsx
@@ -14,190 +14,213 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect, useState } from 'react'
-import { Modal, Form, Input, Alert } from 'antd'
-import { Cell } from '@antv/x6'
-import { useIntl } from 'umi'
-
-import FlowGraph from './components/FlowGraph'
-import Toolbar from './components/Toolbar'
-import { DEFAULT_CONDITION_PROPS, DEFAULT_PLUGIN_PROPS, DEFAULT_STENCIL_WIDTH, DEFAULT_TOOLBAR_HEIGHT, FlowGraphEvent } from './constants'
-import styles from './style.less'
-import PluginDetail from '../Plugin/PluginDetail'
-import { fetchList } from '../Plugin/service'
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, Alert } from 'antd';
+import { Cell } from '@antv/x6';
+import { useIntl } from 'umi';
+
+import FlowGraph from './components/FlowGraph';
+import Toolbar from './components/Toolbar';
+import {
+  DEFAULT_CONDITION_PROPS,
+  DEFAULT_PLUGIN_PROPS,
+  DEFAULT_STENCIL_WIDTH,
+  DEFAULT_TOOLBAR_HEIGHT,
+  FlowGraphEvent,
+} from './constants';
+import styles from './style.less';
+import PluginDetail from '../Plugin/PluginDetail';
+import { fetchList } from '../Plugin/service';
 
 type Props = {
   chart: {
     cells: Cell.Properties[];
   };
   readonly?: boolean;
-}
+};
 
 type PluginProps = {
   id: string;
   name: string;
   visible: boolean;
   data: any;
-}
+};
 
 type ConditionProps = {
   id: string;
   visible: boolean;
   data: string;
-}
+};
 
 const PluginFlow: React.FC<Props> = ({ chart, readonly = false }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   // NOTE: To prevent from graph is not initialized
-  const [isReady, setIsReady] = useState(false)
-  const [plugins, setPlugins] = useState<PluginComponent.Meta[]>([])
+  const [isReady, setIsReady] = useState(false);
+  const [plugins, setPlugins] = useState<PluginComponent.Meta[]>([]);
 
-  const [pluginProps, setPluginProps] = useState<PluginProps>(DEFAULT_PLUGIN_PROPS)
-  const [conditionProps, setConditionProps] = useState<ConditionProps>(DEFAULT_CONDITION_PROPS)
+  const [pluginProps, setPluginProps] = useState<PluginProps>(DEFAULT_PLUGIN_PROPS);
+  const [conditionProps, setConditionProps] = useState<ConditionProps>(DEFAULT_CONDITION_PROPS);
 
   const getContainerSize = () => {
-    const leftSidebar = document.querySelector('aside.ant-layout-sider')
-    const blankSpaceWidth = 24 * 4
+    const leftSidebar = document.querySelector('aside.ant-layout-sider');
+    const blankSpaceWidth = 24 * 4;
 
-    const globalHeaderHeight = 48
-    const pageHeaderHeight = 72
-    const otherHeight = 191
+    const globalHeaderHeight = 48;
+    const pageHeaderHeight = 72;
+    const otherHeight = 191;
 
-    const width = document.body.offsetWidth - (leftSidebar?.clientWidth || 0) - blankSpaceWidth - DEFAULT_STENCIL_WIDTH
-    const height = document.body.offsetHeight - globalHeaderHeight - pageHeaderHeight - otherHeight
+    const width =
+      document.body.offsetWidth -
+      (leftSidebar?.clientWidth || 0) -
+      blankSpaceWidth -
+      DEFAULT_STENCIL_WIDTH;
+    const height = document.body.offsetHeight - globalHeaderHeight - pageHeaderHeight - otherHeight;
 
     return {
       width,
-      height: height < 800 ? 800 : height
-    }
-  }
+      height: height < 800 ? 800 : height,
+    };
+  };
 
   useEffect(() => {
     if (!plugins.length) {
-      return
+      return;
     }
 
-    const container = document.getElementById("container")
+    const container = document.getElementById('container');
     if (!container) {
-      return
+      return;
     }
 
-    const siderbarCollapsedButton = document.querySelector('.ant-pro-sider-collapsed-button')
+    const siderbarCollapsedButton = document.querySelector('.ant-pro-sider-collapsed-button');
 
     const graph = FlowGraph.init(container, plugins, chart);
-    (window as any).graph = FlowGraph
-    setIsReady(true)
+    (window as any).graph = FlowGraph;
+    setIsReady(true);
 
-    const stencilContainer = document.querySelector('#stencil') as HTMLElement
+    const stencilContainer = document.querySelector('#stencil') as HTMLElement;
 
     const handleResize = () => {
-      const { width, height } = getContainerSize()
-      graph.resize(width, height)
+      const { width, height } = getContainerSize();
+      graph.resize(width, height);
 
-      stencilContainer.style.height = `${height + DEFAULT_TOOLBAR_HEIGHT}px`
-      stencilContainer.style.width = `${DEFAULT_STENCIL_WIDTH}px`
-    }
+      stencilContainer.style.height = `${height + DEFAULT_TOOLBAR_HEIGHT}px`;
+      stencilContainer.style.width = `${DEFAULT_STENCIL_WIDTH}px`;
+    };
 
     const handleLeftSidebarResize = () => {
       setTimeout(() => {
-        handleResize()
-      }, 200)
-    }
+        handleResize();
+      }, 200);
+    };
 
-    handleResize()
+    handleResize();
 
-    graph.on(FlowGraphEvent.PLUGIN_CHANGE, setPluginProps)
+    graph.on(FlowGraphEvent.PLUGIN_CHANGE, setPluginProps);
     graph.on(FlowGraphEvent.CONDITION_CHANGE, (props: ConditionProps) => {
-      setConditionProps(props)
-    })
+      setConditionProps(props);
+    });
 
     if (readonly) {
-      graph.disableKeyboard()
+      graph.disableKeyboard();
     }
 
-    window.addEventListener("resize", handleResize)
-    siderbarCollapsedButton?.addEventListener('click', handleLeftSidebarResize)
+    window.addEventListener('resize', handleResize);
+    siderbarCollapsedButton?.addEventListener('click', handleLeftSidebarResize);
     // eslint-disable-next-line
     return () => {
-      window.removeEventListener("resize", handleResize)
-      siderbarCollapsedButton?.removeEventListener('click', handleLeftSidebarResize)
-    }
-  }, [plugins])
+      window.removeEventListener('resize', handleResize);
+      siderbarCollapsedButton?.removeEventListener('click', handleLeftSidebarResize);
+    };
+  }, [plugins]);
 
   useEffect(() => {
-    fetchList().then(setPlugins)
-  }, [])
+    fetchList().then(setPlugins);
+  }, []);
 
   return (
     <React.Fragment>
-      {readonly && <Alert type="warning" message={formatMessage({ id: 'component.plugin-flow.text.preview.readonly' })} showIcon style={{ marginBottom: 20 }} />}
+      {readonly && (
+        <Alert
+          type="warning"
+          message={formatMessage({ id: 'component.plugin-flow.text.preview.readonly' })}
+          showIcon
+          style={{ marginBottom: 20 }}
+        />
+      )}
       <div className={styles.container}>
-        <div id="stencil" className={styles.stencil} style={readonly ? { width: 0, height: 0 } : {}} />
+        <div
+          id="stencil"
+          className={styles.stencil}
+          style={readonly ? { width: 0, height: 0 } : {}}
+        />
         <div className={styles.panel}>
           <div className={styles.toolbar}>{isReady && <Toolbar />}</div>
           <div id="container" className={styles.flow}></div>
         </div>
       </div>
-      {
-        pluginProps.visible && (
-          <PluginDetail
-            readonly={readonly}
-            schemaType="route"
-            name={pluginProps.name}
-            visible={pluginProps.visible}
-            pluginList={plugins}
-            isEnabled
-            initialData={{
-              // NOTE: We use {PluginName: data} because initialData is all plugins' data
-              [pluginProps.name]: pluginProps.data
-            }}
-            onClose={() => {
-              setPluginProps(DEFAULT_PLUGIN_PROPS)
-            }}
-            onChange={({ formData, monacoData, shouldDelete }) => {
-              if (shouldDelete) {
-                FlowGraph.graph.removeCell(pluginProps.id)
-              } else {
-                const disable = !formData.disable
-                FlowGraph.setData(pluginProps.id, { ...monacoData, disable })
-              }
-              setPluginProps(DEFAULT_PLUGIN_PROPS)
-            }}
-          />
-        )
-      }
+      {pluginProps.visible && (
+        <PluginDetail
+          readonly={readonly}
+          schemaType="route"
+          name={pluginProps.name}
+          visible={pluginProps.visible}
+          pluginList={plugins}
+          isEnabled
+          initialData={{
+            // NOTE: We use {PluginName: data} because initialData is all plugins' data
+            [pluginProps.name]: pluginProps.data,
+          }}
+          onClose={() => {
+            setPluginProps(DEFAULT_PLUGIN_PROPS);
+          }}
+          onChange={({ formData, monacoData, shouldDelete }) => {
+            if (shouldDelete) {
+              FlowGraph.graph.removeCell(pluginProps.id);
+            } else {
+              const disable = !formData.disable;
+              FlowGraph.setData(pluginProps.id, { ...monacoData, disable });
+            }
+            setPluginProps(DEFAULT_PLUGIN_PROPS);
+          }}
+        />
+      )}
 
       <Modal
         visible={conditionProps.visible}
         title={formatMessage({ id: 'component.plugin-flow.text.condition.required' })}
         onOk={() => {
           FlowGraph.setData(conditionProps.id, conditionProps.data);
-          setConditionProps(DEFAULT_CONDITION_PROPS)
+          setConditionProps(DEFAULT_CONDITION_PROPS);
         }}
         onCancel={() => setConditionProps(DEFAULT_CONDITION_PROPS)}
         okText={formatMessage({ id: 'component.global.confirm' })}
         cancelText={formatMessage({ id: 'component.global.cancel' })}
         okButtonProps={{
-          disabled: readonly
+          disabled: readonly,
         }}
       >
-        <Form.Item label={formatMessage({ id: 'component.plugin-flow.text.condition' })} style={{ marginBottom: 0 }} tooltip={formatMessage({ id: 'component.plugin-flow.text.condition-rule.tooltip' })}>
+        <Form.Item
+          label={formatMessage({ id: 'component.plugin-flow.text.condition' })}
+          style={{ marginBottom: 0 }}
+          tooltip={formatMessage({ id: 'component.plugin-flow.text.condition-rule.tooltip' })}
+        >
           <Input
             value={conditionProps.data}
             disabled={readonly}
             placeholder={formatMessage({ id: 'component.plugin-flow.text.condition.placeholder' })}
-            onChange={e => {
+            onChange={(e) => {
               setConditionProps({
                 ...conditionProps,
-                data: e.target.value
-              })
+                data: e.target.value,
+              });
             }}
           />
         </Form.Item>
       </Modal>
     </React.Fragment>
-  )
-}
+  );
+};
 
-export default PluginFlow
+export default PluginFlow;
diff --git a/web/src/components/PluginFlow/components/FlowGraph/FlowGraph.ts b/web/src/components/PluginFlow/components/FlowGraph/FlowGraph.ts
index af9fc32647..cb3592018b 100644
--- a/web/src/components/PluginFlow/components/FlowGraph/FlowGraph.ts
+++ b/web/src/components/PluginFlow/components/FlowGraph/FlowGraph.ts
@@ -14,54 +14,66 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Graph, Addon, FunctionExt } from '@antv/x6'
-import type { Model, Cell } from '@antv/x6'
-import { formatMessage } from 'umi'
-import { notification } from 'antd'
-
-import './shapes'
-import { DEFAULT_OPINIONS, DEFAULT_PLUGIN_FLOW_DATA, DEFAULT_STENCIL_OPINIONS, FlowGraphEvent, FlowGraphShape } from '../../constants'
+import { Graph, Addon, FunctionExt } from '@antv/x6';
+import type { Model, Cell } from '@antv/x6';
+import { formatMessage } from 'umi';
+import { notification } from 'antd';
+
+import './shapes';
+import {
+  DEFAULT_OPINIONS,
+  DEFAULT_PLUGIN_FLOW_DATA,
+  DEFAULT_STENCIL_OPINIONS,
+  FlowGraphEvent,
+  FlowGraphShape,
+} from '../../constants';
 
 class FlowGraph {
-  public static graph: Graph
-  private static stencil: Addon.Stencil
-  private static pluginTypeList: string[] = []
-  private static plugins: PluginComponent.Meta[] = []
-
-  public static init(container: HTMLElement, plugins: PluginComponent.Meta[] = [], chart: Model.FromJSONData) {
+  public static graph: Graph;
+  private static stencil: Addon.Stencil;
+  private static pluginTypeList: string[] = [];
+  private static plugins: PluginComponent.Meta[] = [];
+
+  public static init(
+    container: HTMLElement,
+    plugins: PluginComponent.Meta[] = [],
+    chart: Model.FromJSONData,
+  ) {
     this.graph = new Graph({
       container,
-      ...DEFAULT_OPINIONS
-    })
+      ...DEFAULT_OPINIONS,
+    });
 
-    this.plugins = plugins
-    this.pluginTypeList = Array.from(new Set(plugins.map(item => item.type)))
+    this.plugins = plugins;
+    this.pluginTypeList = Array.from(new Set(plugins.map((item) => item.type)));
 
-    this.initStencil()
-    this.initShape()
-    this.initGraphShape(chart)
-    this.initEvent()
-    return this.graph
+    this.initStencil();
+    this.initShape();
+    this.initGraphShape(chart);
+    this.initEvent();
+    return this.graph;
   }
 
   // NOTE: set cell data according to Cell ID
   public static setData(id: string, data: any): void {
-    const cell = this.graph.getCell(id)
+    const cell = this.graph.getCell(id);
     if (cell) {
-      cell.setData(data, { overwrite: true })
+      cell.setData(data, { overwrite: true });
     }
   }
 
   // NOTE: Generate groups for stencil
   private static generateGroups(): Addon.Stencil.Group[] {
-    const otherGroupList = [{
-      name: 'basic',
-      title: formatMessage({ id: 'component.plugin-flow.text.general' }),
-      graphHeight: 104,
-    }]
-
-    const pluginGroupList = this.pluginTypeList.map(item => {
-      const count = this.plugins.filter(plugin => plugin.type === item).length
+    const otherGroupList = [
+      {
+        name: 'basic',
+        title: formatMessage({ id: 'component.plugin-flow.text.general' }),
+        graphHeight: 104,
+      },
+    ];
+
+    const pluginGroupList = this.pluginTypeList.map((item) => {
+      const count = this.plugins.filter((plugin) => plugin.type === item).length;
       return {
         name: item,
         title: formatMessage({ id: `component.plugin.${item}` }),
@@ -70,24 +82,24 @@ class FlowGraph {
           marginX: 60,
         },
         graphHeight: count * 82,
-      }
-    })
+      };
+    });
 
-    return otherGroupList.concat(pluginGroupList)
+    return otherGroupList.concat(pluginGroupList);
   }
 
   private static initStencil() {
     this.stencil = new Addon.Stencil({
       target: this.graph,
       ...DEFAULT_STENCIL_OPINIONS,
-      groups: this.generateGroups()
-    })
-    const stencilContainer = document.querySelector('#stencil')
-    stencilContainer?.appendChild(this.stencil.container)
+      groups: this.generateGroups(),
+    });
+    const stencilContainer = document.querySelector('#stencil');
+    stencilContainer?.appendChild(this.stencil.container);
   }
 
   private static initShape() {
-    const { graph } = this
+    const { graph } = this;
     const r1 = graph.createNode({
       shape: FlowGraphShape.start,
       attrs: {
@@ -101,7 +113,7 @@ class FlowGraph {
           },
         },
       },
-    })
+    });
 
     const r3 = graph.createNode({
       shape: FlowGraphShape.condition,
@@ -152,243 +164,259 @@ class FlowGraph {
           },
         },
       },
-    })
-
-    this.stencil.load([r1, r3], 'basic')
-    this.pluginTypeList.forEach(type => {
-      const plugins = this.plugins.filter(plugin => plugin.type === type).map(plugin => {
-        return graph.createNode({
-          shape: FlowGraphShape.plugin,
-          attrs: {
-            title: {
-              text: plugin.name
+    });
+
+    this.stencil.load([r1, r3], 'basic');
+    this.pluginTypeList.forEach((type) => {
+      const plugins = this.plugins
+        .filter((plugin) => plugin.type === type)
+        .map((plugin) => {
+          return graph.createNode({
+            shape: FlowGraphShape.plugin,
+            attrs: {
+              title: {
+                text: plugin.name,
+              },
+              text: {
+                text: plugin.name,
+              },
             },
-            text: {
-              text: plugin.name
-            }
-          }
-        })
-      })
+          });
+        });
 
-      this.stencil.load(plugins, type)
-    })
+      this.stencil.load(plugins, type);
+    });
   }
 
   private static initGraphShape(chart: Model.FromJSONData) {
     if (!chart) {
-      return
+      return;
     }
-    this.graph.fromJSON(chart)
+    this.graph.fromJSON(chart);
   }
 
   private static showPorts(ports: NodeListOf<SVGAElement>, show: boolean) {
     // eslint-disable-next-line
     for (let i = 0, len = ports.length; i < len; i = i + 1) {
       // eslint-disable-next-line
-      ports[i].style.visibility = show ? 'visible' : 'hidden'
+      ports[i].style.visibility = show ? 'visible' : 'hidden';
     }
   }
 
   private static initEvent() {
-    const { graph } = this
-    const container = document.getElementById('container')!
+    const { graph } = this;
+    const container = document.getElementById('container')!;
 
     graph.on(
       'node:mouseenter',
       FunctionExt.debounce(() => {
-        const ports = container.querySelectorAll(
-          '.x6-port-body',
-        ) as NodeListOf<SVGAElement>
-        this.showPorts(ports, true)
+        const ports = container.querySelectorAll('.x6-port-body') as NodeListOf<SVGAElement>;
+        this.showPorts(ports, true);
       }),
       500,
-    )
+    );
 
     graph.on('node:mouseleave', () => {
-      const ports = container.querySelectorAll(
-        '.x6-port-body',
-      ) as NodeListOf<SVGAElement>
-      this.showPorts(ports, false)
-    })
+      const ports = container.querySelectorAll('.x6-port-body') as NodeListOf<SVGAElement>;
+      this.showPorts(ports, false);
+    });
 
     graph.on('node:dblclick', ({ node }) => {
       if (node.shape === FlowGraphShape.plugin) {
-        const name = node.getAttrByPath('text/text') as string
+        const name = node.getAttrByPath('text/text') as string;
         if (!name) {
-          return
+          return;
         }
 
         this.graph.trigger(FlowGraphEvent.PLUGIN_CHANGE, {
           visible: true,
           id: node.id,
           name,
-          data: node.getData()
-        })
+          data: node.getData(),
+        });
       }
 
       if (node.shape === FlowGraphShape.condition) {
         this.graph.trigger(FlowGraphEvent.CONDITION_CHANGE, {
           id: node.id,
           data: node.getData(),
-          visible: true
-        })
+          visible: true,
+        });
       }
-    })
+    });
 
     graph.bindKey('backspace', () => {
-      const cells = graph.getSelectedCells()
+      const cells = graph.getSelectedCells();
       if (cells.length) {
-        graph.removeCells(cells)
+        graph.removeCells(cells);
       }
-    })
+    });
   }
 
   private static getNextCell(id = '', position = ''): Cell.Properties | undefined {
-    const { cells = [] } = this.graph.toJSON()
-    const cell = cells.find(item => item.id === id)
+    const { cells = [] } = this.graph.toJSON();
+    const cell = cells.find((item) => item.id === id);
     if (!cell) {
-      return undefined
+      return undefined;
     }
 
     if (!cell.ports) {
-      return undefined
+      return undefined;
     }
 
-    const port = cell.ports.items.find((item: { group: string }) => item.group === position)
+    const port = cell.ports.items.find((item: { group: string }) => item.group === position);
     if (!port) {
-      return undefined
+      return undefined;
     }
 
-    const targetCellId = cells.find(item => item.source?.port === port.id && item.source?.cell === id)?.target.cell
-    const targetCell = cells.find(item => item.id === targetCellId)
-    return targetCell
+    const targetCellId = cells.find(
+      (item) => item.source?.port === port.id && item.source?.cell === id,
+    )?.target.cell;
+    const targetCell = cells.find((item) => item.id === targetCellId);
+    return targetCell;
   }
 
   private static getLeafList(currentId = '') {
-    let ids: string[] = []
+    let ids: string[] = [];
 
     const fn = (id: string) => {
-      const cell = this.getNextCell(id, "right")
+      const cell = this.getNextCell(id, 'right');
       if (!cell || !cell.id) {
-        return
+        return;
       }
       ids = ids.concat(cell.id);
-      fn(cell.id)
-    }
+      fn(cell.id);
+    };
 
-    fn(currentId)
-    return [currentId].concat(ids)
+    fn(currentId);
+    return [currentId].concat(ids);
   }
 
   /**
    * Convert Graph JSON Data to API Request Body Data
-  */
-  public static convertToData(chart: typeof DEFAULT_PLUGIN_FLOW_DATA.chart | undefined = undefined): {
-    chart: {
-      cells: Cell.Properties[];
-    };
-    conf: Record<string, any>;
-    rule: Record<string, any>;
-  } | undefined {
+   */
+  public static convertToData(
+    chart: typeof DEFAULT_PLUGIN_FLOW_DATA.chart | undefined = undefined,
+  ):
+    | {
+        chart: {
+          cells: Cell.Properties[];
+        };
+        conf: Record<string, any>;
+        rule: Record<string, any>;
+      }
+    | undefined {
     const data = {
       ...DEFAULT_PLUGIN_FLOW_DATA,
-      chart: chart || this.graph.toJSON()
-    }
+      chart: chart || this.graph.toJSON(),
+    };
 
-    const { cells = [] } = data.chart
+    const { cells = [] } = data.chart;
 
-    const edgeCells = cells.filter(cell => cell.shape === 'edge')
+    const edgeCells = cells.filter((cell) => cell.shape === 'edge');
 
-    const startCell = cells.find(cell => cell.shape === FlowGraphShape.start)
+    const startCell = cells.find((cell) => cell.shape === FlowGraphShape.start);
     if (!startCell) {
       notification.warn({
-        message: formatMessage({ id: 'component.plugin-flow.text.no-start-node' })
-      })
-      return
+        message: formatMessage({ id: 'component.plugin-flow.text.no-start-node' }),
+      });
+      return;
     }
 
-    const rootCell = cells.find(cell => cell.shape === 'edge' && cell.source.cell === startCell.id)
+    const rootCell = cells.find(
+      (cell) => cell.shape === 'edge' && cell.source.cell === startCell.id,
+    );
     if (!rootCell) {
       notification.warn({
-        message: formatMessage({ id: 'component.plugin-flow.text.no-root-node' })
-      })
-      return
+        message: formatMessage({ id: 'component.plugin-flow.text.no-root-node' }),
+      });
+      return;
     }
-    data.rule.root = rootCell.target.cell
+    data.rule.root = rootCell.target.cell;
 
     // Get the ID associated with each node, the relationship between nodes is in edgeCells.
-    edgeCells.forEach(edge => {
-      const sourceId = edge.source.cell
-      const targetId = edge.target.cell
+    edgeCells.forEach((edge) => {
+      const sourceId = edge.source.cell;
+      const targetId = edge.target.cell;
 
-      data.rule[sourceId] = []
+      data.rule[sourceId] = [];
 
-      this.getLeafList(targetId).forEach(id => {
-        const cell = cells.find(item => item.id === id)
+      this.getLeafList(targetId).forEach((id) => {
+        const cell = cells.find((item) => item.id === id);
         if (!cell) {
-          return
+          return;
         }
 
         if (cell.shape === FlowGraphShape.condition) {
-          const nextCell = this.getNextCell(cell.id, "bottom");
+          const nextCell = this.getNextCell(cell.id, 'bottom');
           if (!nextCell) {
-            return
+            return;
           }
-          data.rule[sourceId].push([cell.data, nextCell.id])
+          data.rule[sourceId].push([cell.data, nextCell.id]);
         }
 
         if (cell.shape === FlowGraphShape.plugin) {
-          data.rule[sourceId].push(['', cell.id])
+          data.rule[sourceId].push(['', cell.id]);
         }
-      })
-    })
+      });
+    });
 
     // NOTE: Omit empty array, or API will throw error.
     Object.entries(data.rule).forEach(([key, value]) => {
       if (value.length === 0) {
-        delete data.rule[key]
+        delete data.rule[key];
       }
 
       if (key === 'root') {
-        return
+        return;
       }
-      const cell = cells.find(item => item.id === key)
+      const cell = cells.find((item) => item.id === key);
       if (cell?.shape !== FlowGraphShape.plugin) {
-        delete data.rule[key]
+        delete data.rule[key];
       }
-    })
+    });
 
-    const invalidPluginCell = cells.find(item => item.shape === FlowGraphShape.plugin && !item.data)
+    const invalidPluginCell = cells.find(
+      (item) => item.shape === FlowGraphShape.plugin && !item.data,
+    );
     if (invalidPluginCell) {
       notification.warn({
         message: formatMessage({ id: 'component.plugin-flow.text.without-data' }),
-        description: `${formatMessage({ id: 'component.plugin-flow.text.plugin-without-data.description' })}${invalidPluginCell.attrs?.text.text}`
-      })
-      return
+        description: `${formatMessage({
+          id: 'component.plugin-flow.text.plugin-without-data.description',
+        })}${invalidPluginCell.attrs?.text.text}`,
+      });
+      return;
     }
 
-    const invalidConditionCell = cells.find(item => item.shape === FlowGraphShape.condition && !item.data)
+    const invalidConditionCell = cells.find(
+      (item) => item.shape === FlowGraphShape.condition && !item.data,
+    );
     if (invalidConditionCell) {
       notification.warn({
         message: formatMessage({ id: 'component.plugin-flow.text.without-data' }),
-        description: `${formatMessage({ id: 'component.plugin-flow.text.condition-without-configuration' })}`
-      })
-      return
+        description: `${formatMessage({
+          id: 'component.plugin-flow.text.condition-without-configuration',
+        })}`,
+      });
+      return;
     }
 
-    data.conf = {}
-    cells.filter(item => item.shape === FlowGraphShape.plugin && item.id).forEach(item => {
-      if (item.id) {
-        data.conf[item.id] = {
-          name: item.attrs?.text.text,
-          conf: item.data
+    data.conf = {};
+    cells
+      .filter((item) => item.shape === FlowGraphShape.plugin && item.id)
+      .forEach((item) => {
+        if (item.id) {
+          data.conf[item.id] = {
+            name: item.attrs?.text.text,
+            conf: item.data,
+          };
         }
-      }
-    })
+      });
 
     // eslint-disable-next-line
-    return data
+    return data;
   }
 }
 
-export default FlowGraph
+export default FlowGraph;
diff --git a/web/src/components/PluginFlow/components/FlowGraph/index.ts b/web/src/components/PluginFlow/components/FlowGraph/index.ts
index 5dc41d5fc5..8111495737 100644
--- a/web/src/components/PluginFlow/components/FlowGraph/index.ts
+++ b/web/src/components/PluginFlow/components/FlowGraph/index.ts
@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default } from './FlowGraph'
+export { default } from './FlowGraph';
diff --git a/web/src/components/PluginFlow/components/FlowGraph/shapes.ts b/web/src/components/PluginFlow/components/FlowGraph/shapes.ts
index 2e9756ea60..42d9721f70 100644
--- a/web/src/components/PluginFlow/components/FlowGraph/shapes.ts
+++ b/web/src/components/PluginFlow/components/FlowGraph/shapes.ts
@@ -14,12 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Graph } from '@antv/x6'
+import { Graph } from '@antv/x6';
 
 import defaultPluginImg from '../../../../../public/static/default-plugin.png';
 import { DEFAULT_SHAPE_RECT_OPINIONS, FlowGraphShape } from '../../constants';
 
-export const FlowChartRect = Graph.registerNode(FlowGraphShape.base, DEFAULT_SHAPE_RECT_OPINIONS)
+export const FlowChartRect = Graph.registerNode(FlowGraphShape.base, DEFAULT_SHAPE_RECT_OPINIONS);
 
 export const FlowChartConditionRect = Graph.registerNode(FlowGraphShape.condition, {
   ...DEFAULT_SHAPE_RECT_OPINIONS,
@@ -36,8 +36,8 @@ export const FlowChartConditionRect = Graph.registerNode(FlowGraphShape.conditio
         group: 'bottom',
       },
     ],
-  }
-})
+  },
+});
 
 export const FlowChartStartRect = Graph.registerNode(FlowGraphShape.start, {
   ...DEFAULT_SHAPE_RECT_OPINIONS,
@@ -48,8 +48,8 @@ export const FlowChartStartRect = Graph.registerNode(FlowGraphShape.start, {
         group: 'bottom',
       },
     ],
-  }
-})
+  },
+});
 
 export const FlowChartEndRect = Graph.registerNode(FlowGraphShape.end, {
   ...DEFAULT_SHAPE_RECT_OPINIONS,
@@ -60,8 +60,8 @@ export const FlowChartEndRect = Graph.registerNode(FlowGraphShape.end, {
         group: 'top',
       },
     ],
-  }
-})
+  },
+});
 
 export const FlowChartPluginRect = Graph.registerNode(FlowGraphShape.plugin, {
   inherit: 'rect',
@@ -74,8 +74,7 @@ export const FlowChartPluginRect = Graph.registerNode(FlowGraphShape.plugin, {
       fill: 'rgba(95,149,255,0.05)',
     },
     image: {
-      'xlink:href':
-        defaultPluginImg,
+      'xlink:href': defaultPluginImg,
       width: 16,
       height: 16,
       x: 12,
@@ -155,7 +154,7 @@ export const FlowChartPluginRect = Graph.registerNode(FlowGraphShape.plugin, {
       },
       {
         group: 'bottom',
-      }
+      },
     ],
   },
-})
+});
diff --git a/web/src/components/PluginFlow/components/Toolbar/index.tsx b/web/src/components/PluginFlow/components/Toolbar/index.tsx
index 7931a26223..8cb2cf348e 100644
--- a/web/src/components/PluginFlow/components/Toolbar/index.tsx
+++ b/web/src/components/PluginFlow/components/Toolbar/index.tsx
@@ -21,10 +21,10 @@
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
-import React, { useEffect, useState } from 'react'
-import { Toolbar } from '@antv/x6-react-components'
-import FlowGraph from '../FlowGraph'
-import { DataUri } from '@antv/x6'
+import React, { useEffect, useState } from 'react';
+import { Toolbar } from '@antv/x6-react-components';
+import FlowGraph from '../FlowGraph';
+import { DataUri } from '@antv/x6';
 import {
   ClearOutlined,
   SaveOutlined,
@@ -34,127 +34,123 @@ import {
   CopyOutlined,
   ScissorOutlined,
   SnippetsOutlined,
-} from '@ant-design/icons'
-import '@antv/x6-react-components/es/toolbar/style/index.css'
+} from '@ant-design/icons';
+import '@antv/x6-react-components/es/toolbar/style/index.css';
 
-const { Item, Group } = Toolbar
+const { Item, Group } = Toolbar;
 
 const ToolbarComponent = () => {
-  const [canUndo, setCanUndo] = useState(false)
-  const [canRedo, setCanRedo] = useState(false)
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
 
   const copy = () => {
-    const { graph } = FlowGraph
-    const cells = graph.getSelectedCells()
+    const { graph } = FlowGraph;
+    const cells = graph.getSelectedCells();
     if (cells.length) {
-      graph.copy(cells)
+      graph.copy(cells);
     }
-    return false
-  }
+    return false;
+  };
 
   const cut = () => {
-    const { graph } = FlowGraph
-    const cells = graph.getSelectedCells()
+    const { graph } = FlowGraph;
+    const cells = graph.getSelectedCells();
     if (cells.length) {
-      graph.cut(cells)
+      graph.cut(cells);
     }
-    return false
-  }
+    return false;
+  };
 
   const paste = () => {
-    const { graph } = FlowGraph
+    const { graph } = FlowGraph;
     if (!graph.isClipboardEmpty()) {
-      const cells = graph.paste({ offset: 32 })
-      graph.cleanSelection()
-      graph.select(cells)
+      const cells = graph.paste({ offset: 32 });
+      graph.cleanSelection();
+      graph.select(cells);
     }
-    return false
-  }
+    return false;
+  };
 
   useEffect(() => {
-    const { graph } = FlowGraph
-    const { history } = graph
-    setCanUndo(history.canUndo())
-    setCanRedo(history.canRedo())
+    const { graph } = FlowGraph;
+    const { history } = graph;
+    setCanUndo(history.canUndo());
+    setCanRedo(history.canRedo());
     history.on('change', () => {
-      setCanUndo(history.canUndo())
-      setCanRedo(history.canRedo())
-    })
+      setCanUndo(history.canUndo());
+      setCanRedo(history.canRedo());
+    });
 
     graph.bindKey(['meta+z', 'ctrl+z'], () => {
       if (history.canUndo()) {
-        history.undo()
+        history.undo();
       }
-      return false
-    })
+      return false;
+    });
     graph.bindKey(['meta+shift+z', 'ctrl+y'], () => {
       if (history.canRedo()) {
-        history.redo()
+        history.redo();
       }
-      return false
-    })
+      return false;
+    });
     graph.bindKey(['meta+d', 'ctrl+d'], () => {
-      graph.clearCells()
-      return false
-    })
+      graph.clearCells();
+      return false;
+    });
     graph.bindKey(['meta+s', 'ctrl+s'], () => {
       graph.toPNG((datauri: string) => {
-        DataUri.downloadDataUri(datauri, 'chart.png')
-      })
-      return false
-    })
+        DataUri.downloadDataUri(datauri, 'chart.png');
+      });
+      return false;
+    });
     graph.bindKey(['meta+p', 'ctrl+p'], () => {
-      graph.printPreview()
-      return false
-    })
-    graph.bindKey(['meta+c', 'ctrl+c'], copy)
-    graph.bindKey(['meta+v', 'ctrl+v'], paste)
-    graph.bindKey(['meta+x', 'ctrl+x'], cut)
-  }, [])
+      graph.printPreview();
+      return false;
+    });
+    graph.bindKey(['meta+c', 'ctrl+c'], copy);
+    graph.bindKey(['meta+v', 'ctrl+v'], paste);
+    graph.bindKey(['meta+x', 'ctrl+x'], cut);
+  }, []);
 
   const handleClick = (name: string) => {
-    const { graph } = FlowGraph
+    const { graph } = FlowGraph;
     switch (name) {
       case 'undo':
-        graph.history.undo()
-        break
+        graph.history.undo();
+        break;
       case 'redo':
-        graph.history.redo()
-        break
+        graph.history.redo();
+        break;
       case 'delete':
-        graph.clearCells()
-        break
+        graph.clearCells();
+        break;
       case 'save':
         graph.toPNG((datauri: string) => {
-          DataUri.downloadDataUri(datauri, 'chart.png')
-        })
-        break
+          DataUri.downloadDataUri(datauri, 'chart.png');
+        });
+        break;
       case 'print':
-        graph.printPreview()
-        break
+        graph.printPreview();
+        break;
       case 'copy':
-        copy()
-        break
+        copy();
+        break;
       case 'cut':
-        cut()
-        break
+        cut();
+        break;
       case 'paste':
-        paste()
-        break
+        paste();
+        break;
       default:
-        break
+        break;
     }
-  }
+  };
 
   return (
     <div>
       <Toolbar hoverEffect={true} size="small" onClick={handleClick}>
         <Group>
-          <Item
-            name="delete"
-            icon={<ClearOutlined />}
-            tooltip="Clear (Cmd + D, Ctrl + D)"
-          />
+          <Item name="delete" icon={<ClearOutlined />} tooltip="Clear (Cmd + D, Ctrl + D)" />
         </Group>
         <Group>
           <Item
@@ -173,23 +169,15 @@ const ToolbarComponent = () => {
         <Group>
           <Item name="copy" tooltip="Copy (Cmd + C, Ctrl + C)" icon={<CopyOutlined />} />
           <Item name="cut" tooltip="Cut (Cmd + X, Ctrl + X)" icon={<ScissorOutlined />} />
-          <Item
-            name="paste"
-            tooltip="Paste (Cmd + V, Ctrl + V)"
-            icon={<SnippetsOutlined />}
-          />
+          <Item name="paste" tooltip="Paste (Cmd + V, Ctrl + V)" icon={<SnippetsOutlined />} />
         </Group>
         <Group>
           <Item name="save" icon={<SaveOutlined />} tooltip="Save (Cmd + S, Ctrl + S)" />
-          <Item
-            name="print"
-            icon={<PrinterOutlined />}
-            tooltip="Print (Cmd + P, Ctrl + P)"
-          />
+          <Item name="print" icon={<PrinterOutlined />} tooltip="Print (Cmd + P, Ctrl + P)" />
         </Group>
       </Toolbar>
     </div>
-  )
-}
+  );
+};
 
-export default ToolbarComponent
+export default ToolbarComponent;
diff --git a/web/src/components/PluginFlow/constants.ts b/web/src/components/PluginFlow/constants.ts
index 88212ca0e3..f1d3987a3b 100644
--- a/web/src/components/PluginFlow/constants.ts
+++ b/web/src/components/PluginFlow/constants.ts
@@ -14,13 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Shape, Dom } from '@antv/x6'
-import type { Addon, Graph, Cell } from '@antv/x6'
-import { formatMessage } from 'umi'
+import { Shape, Dom } from '@antv/x6';
+import type { Addon, Graph, Cell } from '@antv/x6';
+import { formatMessage } from 'umi';
 
-export const DEFAULT_STENCIL_WIDTH = 280
-export const DEFAULT_TOOLBAR_HEIGHT = 38
-export const DEFAULT_SHAPE_TEXT_EDIT_CLASS_NAME = ".flow-graph-shape-text-editor"
+export const DEFAULT_STENCIL_WIDTH = 280;
+export const DEFAULT_TOOLBAR_HEIGHT = 38;
+export const DEFAULT_SHAPE_TEXT_EDIT_CLASS_NAME = '.flow-graph-shape-text-editor';
 
 export const DEFAULT_OPINIONS: Partial<Graph.Options> = {
   scroller: true,
@@ -58,24 +58,19 @@ export const DEFAULT_OPINIONS: Partial<Graph.Options> = {
           name: 'manhattan',
         },
         zIndex: 0,
-      })
+      });
     },
-    validateConnection({
-      sourceView,
-      targetView,
-      sourceMagnet,
-      targetMagnet,
-    }) {
+    validateConnection({ sourceView, targetView, sourceMagnet, targetMagnet }) {
       if (sourceView === targetView) {
-        return false
+        return false;
       }
       if (!sourceMagnet) {
-        return false
+        return false;
       }
       if (!targetMagnet) {
-        return false
+        return false;
       }
-      return true
+      return true;
     },
   },
   highlighting: {
@@ -101,32 +96,32 @@ export const DEFAULT_OPINIONS: Partial<Graph.Options> = {
   embedding: {
     enabled: true,
     findParent({ node }) {
-      const bbox = node.getBBox()
+      const bbox = node.getBBox();
       return this.getNodes().filter((item) => {
-        const data = item.getData<any>()
+        const data = item.getData<any>();
         if (data && data.parent) {
-          const targetBBox = item.getBBox()
-          return bbox.isIntersectWithRect(targetBBox)
+          const targetBBox = item.getBBox();
+          return bbox.isIntersectWithRect(targetBBox);
         }
-        return false
-      })
+        return false;
+      });
     },
   },
-}
+};
 
 export const DEFAULT_STENCIL_OPINIONS: Partial<Addon.Stencil.Options> = {
   title: formatMessage({ id: 'component.plugin-flow.text.nodes-area' }),
   stencilGraphWidth: DEFAULT_STENCIL_WIDTH,
   search: (cell, keyword) => {
     if (keyword) {
-      return (cell as any).label?.indexOf(keyword) !== -1
+      return (cell as any).label?.indexOf(keyword) !== -1;
     }
-    return true
+    return true;
   },
   notFoundText: formatMessage({ id: 'component.plugin-flow.text.nodes.not-found' }),
   placeholder: formatMessage({ id: 'component.plugin-flow.text.search-nodes.placeholder' }),
   collapsable: true,
-}
+};
 
 export const DEFAULT_SHAPE_RECT_OPINIONS = {
   inherit: 'rect',
@@ -169,7 +164,7 @@ export const DEFAULT_SHAPE_RECT_OPINIONS = {
     {
       tagName: 'text',
       selector: 'text',
-    }
+    },
   ],
   ports: {
     groups: {
@@ -249,14 +244,14 @@ export const DEFAULT_SHAPE_RECT_OPINIONS = {
       },
     ],
   },
-}
+};
 
 export enum FlowGraphShape {
   base = 'flow-chart-rect',
   condition = 'flow-chart-condition-rect',
   start = 'flow-chart-start-rect',
   end = 'flow-chart-end-rect',
-  plugin = 'flow-chart-plugin-rect'
+  plugin = 'flow-chart-plugin-rect',
 }
 
 export enum FlowGraphEvent {
@@ -268,14 +263,14 @@ export const DEFAULT_PLUGIN_PROPS = {
   id: '',
   name: '',
   visible: false,
-  data: {}
-}
+  data: {},
+};
 
 export const DEFAULT_CONDITION_PROPS = {
   visible: false,
   id: '',
-  data: ''
-}
+  data: '',
+};
 
 export const DEFAULT_PLUGIN_FLOW_DATA: {
   chart: {
@@ -285,10 +280,10 @@ export const DEFAULT_PLUGIN_FLOW_DATA: {
   rule: Record<string, any>;
 } = {
   chart: {
-    cells: []
+    cells: [],
   },
   conf: {},
   rule: {
-    root: ""
-  }
-}
+    root: '',
+  },
+};
diff --git a/web/src/components/PluginFlow/index.ts b/web/src/components/PluginFlow/index.ts
index fd368ef213..eb201067a9 100644
--- a/web/src/components/PluginFlow/index.ts
+++ b/web/src/components/PluginFlow/index.ts
@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default } from './PluginFlow'
+export { default } from './PluginFlow';
diff --git a/web/src/components/PluginFlow/locales/en-US.ts b/web/src/components/PluginFlow/locales/en-US.ts
index fdec09a1bc..4e5c8f215c 100644
--- a/web/src/components/PluginFlow/locales/en-US.ts
+++ b/web/src/components/PluginFlow/locales/en-US.ts
@@ -28,14 +28,18 @@ export default {
   'component.plugin-flow.text.nodes-area': 'Available Nodes',
   'component.plugin-flow.text.nodes.not-found': 'Not Found',
   'component.plugin-flow.text.search-nodes.placeholder': 'Search plugin by name',
-  'component.plugin-flow.text.condition-rule.tooltip': 'The judgment condition of the node. e.g: code == 503',
+  'component.plugin-flow.text.condition-rule.tooltip':
+    'The judgment condition of the node. e.g: code == 503',
   'component.plugin-flow.text.line': 'Line',
   'component.plugin-flow.text.grid': 'Grid',
   'component.plugin-flow.text.background': 'Background',
   'component.plugin-flow.text.node': 'Node',
   'component.plugin-flow.text.text': 'Text',
-  'component.plugin-flow.text.condition-without-configuration': 'Please check all condition nodes\' data',
-  'component.plugin-flow.text.preview.readonly': 'NOTE: your actions on the following drawer will not be preserved.',
-  'component.plugin-flow.text.both-modes-exist': 'The orchestration mode configuration will override the normal mode configuration, are you sure to continue?',
-  'component.plugin-flow.text.both-modes-exist.title': 'Attention'
-}
+  'component.plugin-flow.text.condition-without-configuration':
+    "Please check all condition nodes' data",
+  'component.plugin-flow.text.preview.readonly':
+    'NOTE: your actions on the following drawer will not be preserved.',
+  'component.plugin-flow.text.both-modes-exist':
+    'The orchestration mode configuration will override the normal mode configuration, are you sure to continue?',
+  'component.plugin-flow.text.both-modes-exist.title': 'Attention',
+};
diff --git a/web/src/components/PluginFlow/locales/zh-CN.ts b/web/src/components/PluginFlow/locales/zh-CN.ts
index 4486dff121..e3b3746a4f 100644
--- a/web/src/components/PluginFlow/locales/zh-CN.ts
+++ b/web/src/components/PluginFlow/locales/zh-CN.ts
@@ -37,5 +37,5 @@ export default {
   'component.plugin-flow.text.condition-without-configuration': '请检查条件判断元件的配置',
   'component.plugin-flow.text.preview.readonly': '请注意：在当前页面，您在画布上地操作不会被保留。',
   'component.plugin-flow.text.both-modes-exist': '编排模式配置将覆盖普通模式配置，是否继续操作？',
-  'component.plugin-flow.text.both-modes-exist.title': '配置冲突'
-}
+  'component.plugin-flow.text.both-modes-exist.title': '配置冲突',
+};
diff --git a/web/src/components/RawDataEditor/RawDataEditor.tsx b/web/src/components/RawDataEditor/RawDataEditor.tsx
index bf8a24d946..7d13510ace 100644
--- a/web/src/components/RawDataEditor/RawDataEditor.tsx
+++ b/web/src/components/RawDataEditor/RawDataEditor.tsx
@@ -20,17 +20,17 @@ import { LinkOutlined } from '@ant-design/icons';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useIntl } from 'umi';
 import { js_beautify } from 'js-beautify';
-import type {Monaco} from "@monaco-editor/react";
-import Editor from "@monaco-editor/react";
-import type {languages} from "monaco-editor";
+import type { Monaco } from '@monaco-editor/react';
+import Editor from '@monaco-editor/react';
+import type { languages } from 'monaco-editor';
 
 import { json2yaml, yaml2json } from '../../helpers';
 
 type Props = {
-  visible: boolean,
-  readonly: boolean,
-  type: 'route' | 'service' | 'consumer' | 'upstream'
-  data: Record<string, any>,
+  visible: boolean;
+  readonly: boolean;
+  type: 'route' | 'service' | 'consumer' | 'upstream';
+  data: Record<string, any>;
   onClose?: () => void;
   onSubmit?: (data: Record<string, any>) => void;
 };
@@ -40,12 +40,19 @@ enum monacoLanguageList {
   YAML = 'YAML',
 }
 
-const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = {}, onClose = () => { }, onSubmit = () => { } }) => {
+const RawDataEditor: React.FC<Props> = ({
+  visible,
+  readonly = true,
+  type,
+  data = {},
+  onClose = () => {},
+  onSubmit = () => {},
+}) => {
   const { formatMessage } = useIntl();
   const [monacoLanguage, setMonacoLanguage] = useState<PluginComponent.MonacoLanguage>(
     monacoLanguageList.JSON,
   );
-  const [content, setContent] = useState('')
+  const [content, setContent] = useState('');
 
   useEffect(() => {
     switch (monacoLanguage) {
@@ -53,17 +60,17 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
         setContent(JSON.stringify(data, null, 2));
         break;
       case monacoLanguageList.YAML: {
-        const {data: yamlData} = json2yaml(JSON.stringify(data, null, 2));
-        setContent(yamlData)
+        const { data: yamlData } = json2yaml(JSON.stringify(data, null, 2));
+        setContent(yamlData);
         break;
       }
       default:
     }
-  }, [data])
+  }, [data]);
 
   useEffect(() => {
     setMonacoLanguage(monacoLanguageList.JSON);
-  }, [visible])
+  }, [visible]);
 
   const modeOptions = [
     { label: monacoLanguageList.JSON, value: monacoLanguageList.JSON },
@@ -73,20 +80,20 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
   const handleModeChange = (value: PluginComponent.MonacoLanguage) => {
     switch (value) {
       case monacoLanguageList.JSON:
-        setContent(c => {
-          const {data:jsonData,error} = yaml2json(c, true);
-          if (error){
-            notification.error({message: formatMessage({ id: 'component.global.invalidYaml' })});
+        setContent((c) => {
+          const { data: jsonData, error } = yaml2json(c, true);
+          if (error) {
+            notification.error({ message: formatMessage({ id: 'component.global.invalidYaml' }) });
             return c;
           }
-          return js_beautify(jsonData, {indent_size: 2});
+          return js_beautify(jsonData, { indent_size: 2 });
         });
         break;
       case monacoLanguageList.YAML:
-        setContent(c => {
-          const {data:yamlData,error} = json2yaml(c);
-          if (error){
-            notification.error({message: formatMessage({ id: 'component.global.invalidJson' })});
+        setContent((c) => {
+          const { data: yamlData, error } = json2yaml(c);
+          if (error) {
+            notification.error({ message: formatMessage({ id: 'component.global.invalidJson' }) });
             return c;
           }
           return yamlData;
@@ -95,32 +102,34 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
       default:
         break;
     }
-    setMonacoLanguage(value)
+    setMonacoLanguage(value);
   };
 
-  const formatYaml = (yaml: string): string=> {
-    const json=yaml2json(yaml,true)
-    if (json.error){
+  const formatYaml = (yaml: string): string => {
+    const json = yaml2json(yaml, true);
+    if (json.error) {
       return yaml;
     }
     return json2yaml(json.data).data;
-  }
+  };
 
   const editorWillMount = (monaco: Monaco) => {
     const yamlFormatProvider: languages.DocumentFormattingEditProvider = {
       provideDocumentFormattingEdits(model) {
-        return [{
-          text: formatYaml(model.getValue()),
-          range: model.getFullModelRange()
-        }];
-      }
+        return [
+          {
+            text: formatYaml(model.getValue()),
+            range: model.getFullModelRange(),
+          },
+        ];
+      },
     };
-    monaco.languages.registerDocumentFormattingEditProvider("yaml",yamlFormatProvider);
+    monaco.languages.registerDocumentFormattingEditProvider('yaml', yamlFormatProvider);
     monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
       validate: true,
-      trailingCommas: "error",
+      trailingCommas: 'error',
     });
-  }
+  };
 
   return (
     <>
@@ -147,7 +156,9 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
                         : yaml2json(content, false).data;
                     onSubmit(editorData);
                   } catch (error) {
-                    notification.error({message: formatMessage({ id: 'component.global.invalidJson' })});
+                    notification.error({
+                      message: formatMessage({ id: 'component.global.invalidJson' }),
+                    });
                   }
                 }}
               >
@@ -167,19 +178,22 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               onChange={(value: PluginComponent.MonacoLanguage) => {
                 handleModeChange(value);
               }}
-              data-cy='monaco-language'
+              data-cy="monaco-language"
             />,
-            <CopyToClipboard text={content} onCopy={(_: string, result: boolean) => {
-              if (!result) {
-                notification.error({
-                  message: formatMessage({ id: 'component.global.copyFail' }),
+            <CopyToClipboard
+              text={content}
+              onCopy={(_: string, result: boolean) => {
+                if (!result) {
+                  notification.error({
+                    message: formatMessage({ id: 'component.global.copyFail' }),
+                  });
+                  return;
+                }
+                notification.success({
+                  message: formatMessage({ id: 'component.global.copySuccess' }),
                 });
-                return;
-              }
-              notification.success({
-                message: formatMessage({ id: 'component.global.copySuccess' }),
-              });
-            }}>
+              }}
+            >
               <Button type="primary" key={2}>
                 {formatMessage({ id: 'component.global.copy' })}
               </Button>
@@ -188,9 +202,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               type="default"
               icon={<LinkOutlined />}
               onClick={() => {
-                window.open(
-                  `https://apisix.apache.org/docs/apisix/admin-api#${type}`,
-                );
+                window.open(`https://apisix.apache.org/docs/apisix/admin-api#${type}`);
               }}
               key={1}
             >
@@ -200,14 +212,14 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
         />
         <Editor
           value={content}
-          onChange={text=>{
-            if (text){
+          onChange={(text) => {
+            if (text) {
               setContent(text);
             } else {
               setContent('');
             }
           }}
-          onMount={(editor)=>{
+          onMount={(editor) => {
             // NOTE: for debug & test
             // @ts-ignore
             window.monacoEditor = editor;
@@ -215,12 +227,12 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
           beforeMount={editorWillMount}
           language={monacoLanguage.toLocaleLowerCase()}
           options={{
-            scrollbar:{
+            scrollbar: {
               vertical: 'hidden',
               horizontal: 'hidden',
             },
-            wordWrap: "on",
-            minimap: {enabled: false},
+            wordWrap: 'on',
+            minimap: { enabled: false },
             readOnly: readonly,
           }}
         />
diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index 8f07e6e3ec..2a7cb84f2e 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -21,8 +21,8 @@ import type { FormInstance } from 'antd/es/form';
 
 import PanelSection from '@/components/PanelSection';
 import PassiveCheck from './components/passive-check';
-import ActiveCheck from './components/active-check'
-import Nodes from './components/Nodes'
+import ActiveCheck from './components/active-check';
+import Nodes from './components/Nodes';
 import Scheme from './components/Scheme';
 import Timeout from './components/Timeout';
 import Type from './components/Type';
@@ -45,16 +45,26 @@ type Props = {
   // FIXME: use proper typing
   ref?: any;
   required?: boolean;
-  neverReadonly?: boolean
+  neverReadonly?: boolean;
 };
 
 /**
  * UpstreamForm is used to reuse Upstream Form UI,
  * before using this component, we need to execute the following command:
  * form.setFieldsValue(convertToFormData(VALUE_FROM_API))
-*/
+ */
 const UpstreamForm: React.FC<Props> = forwardRef(
-  ({ form, disabled = false, list = [], showSelector = false, required = true, neverReadonly = false }, ref) => {
+  (
+    {
+      form,
+      disabled = false,
+      list = [],
+      showSelector = false,
+      required = true,
+      neverReadonly = false,
+    },
+    ref,
+  ) => {
     const { formatMessage } = useIntl();
     const [readonly, setReadonly] = useState(false);
     const [hiddenForm, setHiddenForm] = useState(false);
@@ -63,17 +73,17 @@ const UpstreamForm: React.FC<Props> = forwardRef(
       {
         label: formatMessage({ id: 'page.upstream.step.connect.timeout' }),
         name: ['timeout', 'connect'],
-        desc: formatMessage({ id: 'page.upstream.step.connect.timeout.desc' })
+        desc: formatMessage({ id: 'page.upstream.step.connect.timeout.desc' }),
       },
       {
         label: formatMessage({ id: 'page.upstream.step.send.timeout' }),
         name: ['timeout', 'send'],
-        desc: formatMessage({ id: 'page.upstream.step.send.timeout.desc' })
+        desc: formatMessage({ id: 'page.upstream.step.send.timeout.desc' }),
       },
       {
         label: formatMessage({ id: 'page.upstream.step.read.timeout' }),
         name: ['timeout', 'read'],
-        desc: formatMessage({ id: 'page.upstream.step.read.timeout.desc' })
+        desc: formatMessage({ id: 'page.upstream.step.read.timeout.desc' }),
       },
     ];
 
@@ -84,64 +94,69 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     const resetForm = (upstream_id: string) => {
       if (upstream_id === undefined) {
         setReadonly(disabled);
-        return
+        return;
       }
 
       if (!neverReadonly) {
-        setReadonly(!["Custom", "None"].includes(upstream_id) || disabled);
+        setReadonly(!['Custom', 'None'].includes(upstream_id) || disabled);
       }
 
       /**
        * upstream_id === None <==> required === false
        * No need to bind Upstream object.
        * When creating Route and binds with a Service, no need to configure Upstream in Route.
-      */
+       */
       if (upstream_id === 'None') {
         setHiddenForm(true);
-        form.resetFields()
-        form.setFieldsValue({ upstream_id: 'None' })
-        return
+        form.resetFields();
+        form.setFieldsValue({ upstream_id: 'None' });
+        return;
       }
 
-      setHiddenForm(false)
+      setHiddenForm(false);
 
       // NOTE: Use Ant Design's form object to set data automatically
-      if (upstream_id === "Custom") {
-        return
+      if (upstream_id === 'Custom') {
+        return;
       }
 
       // NOTE: Set data from Upstream List (Upstream Selector)
       if (list.length === 0) {
-        return
+        return;
       }
-      form.resetFields()
-      const targetData = list.find((item) => item.id === upstream_id) as UpstreamComponent.ResponseData
+      form.resetFields();
+      const targetData = list.find(
+        (item) => item.id === upstream_id,
+      ) as UpstreamComponent.ResponseData;
       if (targetData) {
         form.setFieldsValue(targetData);
       }
-    }
+    };
 
     /**
      * upstream_id
      * - None: No need to bind Upstream to a resource (e.g Service).
      * - Custom: Users could input values on UpstreamForm
      * - Upstream ID from API
-    */
+     */
     useEffect(() => {
       const upstream_id = form.getFieldValue('upstream_id');
-      resetForm(upstream_id)
+      resetForm(upstream_id);
     }, [form.getFieldValue('upstream_id'), list]);
 
     const ActiveHealthCheck = () => (
       <React.Fragment>
         <ActiveCheck.Type readonly={readonly} />
-        <Form.Item noStyle shouldUpdate={(prev, next) => prev.checks.active.type !== next.checks.active.type}>
+        <Form.Item
+          noStyle
+          shouldUpdate={(prev, next) => prev.checks.active.type !== next.checks.active.type}
+        >
           {() => {
-            const type = form.getFieldValue(['checks', 'active', 'type'])
+            const type = form.getFieldValue(['checks', 'active', 'type']);
             if (['https'].includes(type)) {
-              return <ActiveCheck.HttpsVerifyCertificate readonly={readonly} />
+              return <ActiveCheck.HttpsVerifyCertificate readonly={readonly} />;
             }
-            return null
+            return null;
           }}
         </Form.Item>
         <ActiveCheck.Timeout readonly={readonly} />
@@ -198,58 +213,65 @@ const UpstreamForm: React.FC<Props> = forwardRef(
         <PanelSection
           title={formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.check' })}
         >
-          <Form.Item label={formatMessage({ id: 'page.upstream.step.healthyCheck.active' })} name={['custom', 'checks', 'active']} valuePropName="checked">
+          <Form.Item
+            label={formatMessage({ id: 'page.upstream.step.healthyCheck.active' })}
+            name={['custom', 'checks', 'active']}
+            valuePropName="checked"
+          >
             <Switch disabled={readonly} />
           </Form.Item>
           <Form.Item shouldUpdate noStyle>
-            {
-              () => {
-                const active = form.getFieldValue(['custom', 'checks', 'active'])
-                if (active) {
-                  return (
-                    <ActiveHealthCheck />
-                  )
-                }
-                return null
+            {() => {
+              const active = form.getFieldValue(['custom', 'checks', 'active']);
+              if (active) {
+                return <ActiveHealthCheck />;
               }
-            }
+              return null;
+            }}
           </Form.Item>
           <Divider orientation="left" plain />
-          <Form.Item label={formatMessage({ id: 'page.upstream.step.healthyCheck.passive' })} name={['custom', 'checks', 'passive']} valuePropName="checked" tooltip={formatMessage({ id: 'component.upstream.other.health-check.passive-only' })}>
+          <Form.Item
+            label={formatMessage({ id: 'page.upstream.step.healthyCheck.passive' })}
+            name={['custom', 'checks', 'passive']}
+            valuePropName="checked"
+            tooltip={formatMessage({ id: 'component.upstream.other.health-check.passive-only' })}
+          >
             <Switch disabled={readonly} />
           </Form.Item>
-          <Form.Item shouldUpdate={(prev, next) => prev.custom?.checks?.passive !== next.custom?.checks?.passive} noStyle>
-            {
-              () => {
-                const passive = form.getFieldValue(['custom', 'checks', 'passive'])
-                const active = form.getFieldValue(['custom', 'checks', 'active'])
-                if (passive) {
-                  /*
-                  * When enable passive check, we should enable active check, too.
-                  * When we use form.setFieldsValue to enable active check, error throws.
-                  * We choose to alert users first, and need users to enable active check manually.
-                  */
-                  if (!active) {
-                    notification.warn({
-                      message: formatMessage({ id: 'component.upstream.other.health-check.invalid' }),
-                      description: formatMessage({ id: 'component.upstream.other.health-check.passive-only' })
-                    })
-                  }
-                  return <PassiveHealthCheck />
+          <Form.Item
+            shouldUpdate={(prev, next) =>
+              prev.custom?.checks?.passive !== next.custom?.checks?.passive
+            }
+            noStyle
+          >
+            {() => {
+              const passive = form.getFieldValue(['custom', 'checks', 'passive']);
+              const active = form.getFieldValue(['custom', 'checks', 'active']);
+              if (passive) {
+                /*
+                 * When enable passive check, we should enable active check, too.
+                 * When we use form.setFieldsValue to enable active check, error throws.
+                 * We choose to alert users first, and need users to enable active check manually.
+                 */
+                if (!active) {
+                  notification.warn({
+                    message: formatMessage({ id: 'component.upstream.other.health-check.invalid' }),
+                    description: formatMessage({
+                      id: 'component.upstream.other.health-check.passive-only',
+                    }),
+                  });
                 }
-                return null
+                return <PassiveHealthCheck />;
               }
-            }
+              return null;
+            }}
           </Form.Item>
         </PanelSection>
-      )
-    }
+      );
+    };
 
     return (
-      <Form
-        form={form}
-        labelCol={{ span: 3 }}
-      >
+      <Form form={form} labelCol={{ span: 3 }}>
         {showSelector && (
           <UpstreamSelector
             list={list}
@@ -271,15 +293,13 @@ const UpstreamForm: React.FC<Props> = forwardRef(
 
             <Scheme readonly={readonly} />
             <Form.Item noStyle shouldUpdate={(prev, next) => prev.scheme !== next.scheme}>
-              {
-                () => {
-                  const scheme = form.getFieldValue("scheme") as string
-                  if (["https", "grpcs"].includes(scheme)) {
-                    return <TLSComponent form={form} readonly={readonly} />
-                  }
-                  return null
+              {() => {
+                const scheme = form.getFieldValue('scheme') as string;
+                if (['https', 'grpcs'].includes(scheme)) {
+                  return <TLSComponent form={form} readonly={readonly} />;
                 }
-              }
+                return null;
+              }}
             </Form.Item>
 
             {timeoutFields.map((item, index) => (
diff --git a/web/src/components/Upstream/components/DiscoveryType.tsx b/web/src/components/Upstream/components/DiscoveryType.tsx
index 031de335af..40d512feb3 100644
--- a/web/src/components/Upstream/components/DiscoveryType.tsx
+++ b/web/src/components/Upstream/components/DiscoveryType.tsx
@@ -14,21 +14,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Input } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Input } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
   readonly?: boolean;
-}
+};
 
 const DiscoveryType: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
-    <Form.Item name="discovery_type" label={formatMessage({ id: 'component.upstream.fields.discovery_type' })} tooltip={formatMessage({ id: 'component.upstream.fields.discovery_type.tooltip' })}>
-      <Input disabled={readonly} placeholder={formatMessage({ id: 'component.upstream.fields.discovery_type.placeholder' })} />
+    <Form.Item
+      name="discovery_type"
+      label={formatMessage({ id: 'component.upstream.fields.discovery_type' })}
+      tooltip={formatMessage({ id: 'component.upstream.fields.discovery_type.tooltip' })}
+    >
+      <Input
+        disabled={readonly}
+        placeholder={formatMessage({ id: 'component.upstream.fields.discovery_type.placeholder' })}
+      />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default DiscoveryType
+export default DiscoveryType;
diff --git a/web/src/components/Upstream/components/Nodes.tsx b/web/src/components/Upstream/components/Nodes.tsx
index 4b95c5a5d5..c4a8ff778b 100644
--- a/web/src/components/Upstream/components/Nodes.tsx
+++ b/web/src/components/Upstream/components/Nodes.tsx
@@ -14,30 +14,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Input, Row, Col, InputNumber, Button } from 'antd'
-import { useIntl } from 'umi'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import React from 'react';
+import { Form, Input, Row, Col, InputNumber, Button } from 'antd';
+import { useIntl } from 'umi';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import { removeBtnStyle } from '..'
+import { removeBtnStyle } from '..';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
-    <Form.List name="nodes" initialValue={[{ host: undefined, port: undefined, weight: undefined }]}>
+    <Form.List
+      name="nodes"
+      initialValue={[{ host: undefined, port: undefined, weight: undefined }]}
+    >
       {(fields, { add, remove }) => (
         <>
-          <Form.Item label={formatMessage({ id: 'page.upstream.form.item-label.node.domain.or.ip' })} style={{ marginBottom: 0 }}>
+          <Form.Item
+            label={formatMessage({ id: 'page.upstream.form.item-label.node.domain.or.ip' })}
+            style={{ marginBottom: 0 }}
+          >
             {fields.map((field, index) => (
               <Row style={{ marginBottom: 10 }} gutter={16} key={index}>
                 <Col span={5}>
                   <Form.Item
-                    label={formatMessage({id: 'page.upstream.step.host'})}
+                    label={formatMessage({ id: 'page.upstream.step.host' })}
                     style={{ marginBottom: 0 }}
                     name={[field.name, 'host']}
                     rules={[
@@ -48,13 +54,10 @@ const Component: React.FC<Props> = ({ readonly }) => {
                         }),
                       },
                       {
-                        pattern: new RegExp(
-                          /^\*?[0-9a-zA-Z-._]+$/,
-                          'g',
-                        ),
+                        pattern: new RegExp(/^\*?[0-9a-zA-Z-._]+$/, 'g'),
                         message: formatMessage({
                           id: 'page.route.form.itemRulesPatternMessage.domain',
-                        })
+                        }),
                       },
                     ]}
                   >
@@ -107,7 +110,10 @@ const Component: React.FC<Props> = ({ readonly }) => {
                 </Col>
                 <Col style={{ ...removeBtnStyle, marginLeft: -50 }}>
                   {!readonly && (
-                    <MinusCircleOutlined data-cy={`upstream-node-minus-${index}`} onClick={() => remove(field.name)} />
+                    <MinusCircleOutlined
+                      data-cy={`upstream-node-minus-${index}`}
+                      onClick={() => remove(field.name)}
+                    />
                   )}
                 </Col>
               </Row>
@@ -124,7 +130,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         </>
       )}
     </Form.List>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/PassHost.tsx b/web/src/components/Upstream/components/PassHost.tsx
index 72b582120b..3a09262328 100644
--- a/web/src/components/Upstream/components/PassHost.tsx
+++ b/web/src/components/Upstream/components/PassHost.tsx
@@ -14,32 +14,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Input, notification, Select } from 'antd'
-import { useIntl } from 'umi'
-import type { FormInstance } from 'antd/lib/form'
+import React from 'react';
+import { Form, Input, notification, Select } from 'antd';
+import { useIntl } from 'umi';
+import type { FormInstance } from 'antd/lib/form';
 
 type Props = {
-  form: FormInstance
-  readonly?: boolean
-}
+  form: FormInstance;
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ form, readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   const options = [
     {
-      value: "pass",
-      label: formatMessage({ id: 'page.upstream.step.pass-host.pass' })
-    }, {
-      value: "node",
-      label: formatMessage({ id: 'page.upstream.step.pass-host.node' })
-    }, {
-      value: "rewrite",
+      value: 'pass',
+      label: formatMessage({ id: 'page.upstream.step.pass-host.pass' }),
+    },
+    {
+      value: 'node',
+      label: formatMessage({ id: 'page.upstream.step.pass-host.node' }),
+    },
+    {
+      value: 'rewrite',
       label: formatMessage({ id: 'page.upstream.step.pass-host.rewrite' }),
-      disabled: true
-    }
-  ]
+      disabled: true,
+    },
+  ];
 
   return (
     <React.Fragment>
@@ -49,7 +51,7 @@ const Component: React.FC<Props> = ({ form, readonly }) => {
         initialValue="pass"
       >
         <Select disabled={readonly}>
-          {options.map(item => (
+          {options.map((item) => (
             <Select.Option value={item.value} key={item.value} disabled={item.disabled}>
               {item.label}
             </Select.Option>
@@ -71,27 +73,37 @@ const Component: React.FC<Props> = ({ form, readonly }) => {
                 rules={[
                   {
                     required: true,
-                    message: "",
+                    message: '',
                   },
                 ]}
               >
-                <Input disabled={readonly} placeholder={formatMessage({ id: `page.upstream.upstream_host.required` })} />
+                <Input
+                  disabled={readonly}
+                  placeholder={formatMessage({ id: `page.upstream.upstream_host.required` })}
+                />
               </Form.Item>
             );
           }
 
-          if (form.getFieldValue('pass_host') === 'node' && (form.getFieldValue('nodes') || []).length !== 1) {
+          if (
+            form.getFieldValue('pass_host') === 'node' &&
+            (form.getFieldValue('nodes') || []).length !== 1
+          ) {
             notification.warning({
-              message: formatMessage({id: 'component.upstream.other.pass_host-with-multiple-nodes.title'}),
-              description: formatMessage({id: 'component.upstream.other.pass_host-with-multiple-nodes'})
-            })
-            form.setFieldsValue({pass_host: 'pass'})
+              message: formatMessage({
+                id: 'component.upstream.other.pass_host-with-multiple-nodes.title',
+              }),
+              description: formatMessage({
+                id: 'component.upstream.other.pass_host-with-multiple-nodes',
+              }),
+            });
+            form.setFieldsValue({ pass_host: 'pass' });
           }
           return null;
         }}
       </Form.Item>
     </React.Fragment>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/Retries.tsx b/web/src/components/Upstream/components/Retries.tsx
index 51d346e7a6..7baf7b43aa 100644
--- a/web/src/components/Upstream/components/Retries.tsx
+++ b/web/src/components/Upstream/components/Retries.tsx
@@ -14,27 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.retries' })}
       tooltip={formatMessage({ id: 'component.upstream.fields.retries.tooltip' })}
       name="retries"
     >
-      <InputNumber
-        disabled={readonly}
-      />
+      <InputNumber disabled={readonly} />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/Scheme.tsx b/web/src/components/Upstream/components/Scheme.tsx
index c289e28101..c173c26d2d 100644
--- a/web/src/components/Upstream/components/Scheme.tsx
+++ b/web/src/components/Upstream/components/Scheme.tsx
@@ -14,32 +14,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Select } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Select } from 'antd';
+import { useIntl } from 'umi';
 
 const options = [
   {
-    label: "HTTP",
-    value: "http"
-  }, {
-    label: "HTTPs",
-    value: "https"
-  }, {
-    label: "gRPC",
-    value: "grpc"
-  }, {
-    label: "gRPCs",
-    value: "grpcs"
-  }
-]
+    label: 'HTTP',
+    value: 'http',
+  },
+  {
+    label: 'HTTPs',
+    value: 'https',
+  },
+  {
+    label: 'gRPC',
+    value: 'grpc',
+  },
+  {
+    label: 'gRPCs',
+    value: 'grpcs',
+  },
+];
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Scheme: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'page.upstream.scheme' })}
@@ -48,7 +51,7 @@ const Scheme: React.FC<Props> = ({ readonly }) => {
       initialValue="http"
     >
       <Select disabled={readonly}>
-        {options.map(item => {
+        {options.map((item) => {
           return (
             <Select.Option value={item.value} key={item.value}>
               {item.label}
@@ -57,7 +60,7 @@ const Scheme: React.FC<Props> = ({ readonly }) => {
         })}
       </Select>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Scheme
+export default Scheme;
diff --git a/web/src/components/Upstream/components/ServiceName.tsx b/web/src/components/Upstream/components/ServiceName.tsx
index b0ef62cc3f..18055ebeff 100644
--- a/web/src/components/Upstream/components/ServiceName.tsx
+++ b/web/src/components/Upstream/components/ServiceName.tsx
@@ -14,21 +14,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Input } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Input } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
   readonly?: boolean;
-}
+};
 
 const ServiceName: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
-    <Form.Item name="service_name" label={formatMessage({ id: 'component.upstream.fields.service_name' })} tooltip={formatMessage({ id: 'component.upstream.fields.service_name.tooltip' })}>
-      <Input disabled={readonly} placeholder={formatMessage({ id: 'component.upstream.fields.service_name.placeholder' })} />
+    <Form.Item
+      name="service_name"
+      label={formatMessage({ id: 'component.upstream.fields.service_name' })}
+      tooltip={formatMessage({ id: 'component.upstream.fields.service_name.tooltip' })}
+    >
+      <Input
+        disabled={readonly}
+        placeholder={formatMessage({ id: 'component.upstream.fields.service_name.placeholder' })}
+      />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default ServiceName
+export default ServiceName;
diff --git a/web/src/components/Upstream/components/TLS.tsx b/web/src/components/Upstream/components/TLS.tsx
index bdc01030d7..b2472714df 100644
--- a/web/src/components/Upstream/components/TLS.tsx
+++ b/web/src/components/Upstream/components/TLS.tsx
@@ -14,17 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Row, Col, Select, FormInstance, Input } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Row, Col, Select, FormInstance, Input } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
   form: FormInstance;
   readonly?: boolean;
-}
+};
 
 const TLSComponent: React.FC<Props> = ({ form, readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <React.Fragment>
@@ -35,18 +35,13 @@ const TLSComponent: React.FC<Props> = ({ form, readonly }) => {
       >
         <Row>
           <Col span={5}>
-            <Form.Item
-              name={["custom", "tls"]}
-              initialValue="disable"
-            >
+            <Form.Item name={['custom', 'tls']} initialValue="disable">
               <Select disabled={readonly}>
-                {
-                  ["disable", "enable"].map(item => (
-                    <Select.Option value={item} key={item}>
-                      {formatMessage({ id: `component.global.${item}` })}
-                    </Select.Option>
-                  ))
-                }
+                {['disable', 'enable'].map((item) => (
+                  <Select.Option value={item} key={item}>
+                    {formatMessage({ id: `component.global.${item}` })}
+                  </Select.Option>
+                ))}
               </Select>
             </Form.Item>
           </Col>
@@ -55,39 +50,53 @@ const TLSComponent: React.FC<Props> = ({ form, readonly }) => {
       <Form.Item
         noStyle
         shouldUpdate={(prev, next) => {
-          return prev.custom.tls !== next.custom.tls
+          return prev.custom.tls !== next.custom.tls;
         }}
       >
-        {
-          () => {
-            if (form.getFieldValue(["custom", "tls"]) === 'enable') {
-              return (
-                <React.Fragment>
-                  <Form.Item
-                    label={formatMessage({ id: 'component.upstream.fields.tls.client_cert' })}
-                    name={["tls", "client_cert"]}
-                    required
-                    rules={[{ required: true, message: "" }, { max: 64 * 1024 }, { min: 128 }]}
-                  >
-                    <Input.TextArea disabled={readonly} minLength={128} maxLength={64 * 1024} rows={5} placeholder={formatMessage({id: 'component.upstream.fields.tls.client_cert.required'})} />
-                  </Form.Item>
-                  <Form.Item
-                    label={formatMessage({ id: 'component.upstream.fields.tls.client_key' })}
-                    name={["tls", "client_key"]}
-                    required
-                    rules={[{ required: true, message: "" }, { max: 64 * 1024 }, { min: 128 }]}
-                  >
-                    <Input.TextArea disabled={readonly} minLength={128} maxLength={64 * 1024} rows={5} placeholder={formatMessage({id: 'component.upstream.fields.tls.client_key.required'})} />
-                  </Form.Item>
-                </React.Fragment>
-              )
-            }
-            return null
+        {() => {
+          if (form.getFieldValue(['custom', 'tls']) === 'enable') {
+            return (
+              <React.Fragment>
+                <Form.Item
+                  label={formatMessage({ id: 'component.upstream.fields.tls.client_cert' })}
+                  name={['tls', 'client_cert']}
+                  required
+                  rules={[{ required: true, message: '' }, { max: 64 * 1024 }, { min: 128 }]}
+                >
+                  <Input.TextArea
+                    disabled={readonly}
+                    minLength={128}
+                    maxLength={64 * 1024}
+                    rows={5}
+                    placeholder={formatMessage({
+                      id: 'component.upstream.fields.tls.client_cert.required',
+                    })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label={formatMessage({ id: 'component.upstream.fields.tls.client_key' })}
+                  name={['tls', 'client_key']}
+                  required
+                  rules={[{ required: true, message: '' }, { max: 64 * 1024 }, { min: 128 }]}
+                >
+                  <Input.TextArea
+                    disabled={readonly}
+                    minLength={128}
+                    maxLength={64 * 1024}
+                    rows={5}
+                    placeholder={formatMessage({
+                      id: 'component.upstream.fields.tls.client_key.required',
+                    })}
+                  />
+                </Form.Item>
+              </React.Fragment>
+            );
           }
-        }
+          return null;
+        }}
       </Form.Item>
     </React.Fragment>
-  )
-}
+  );
+};
 
-export default TLSComponent
+export default TLSComponent;
diff --git a/web/src/components/Upstream/components/TimeUnit.tsx b/web/src/components/Upstream/components/TimeUnit.tsx
index 292c0cfe7a..67642a1117 100644
--- a/web/src/components/Upstream/components/TimeUnit.tsx
+++ b/web/src/components/Upstream/components/TimeUnit.tsx
@@ -14,8 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
+import React from 'react';
 
 const TimeUnit = () => <span style={{ margin: '0 8px' }}>s</span>;
 
-export default TimeUnit
+export default TimeUnit;
diff --git a/web/src/components/Upstream/components/Timeout.tsx b/web/src/components/Upstream/components/Timeout.tsx
index 8eefdf0118..2063018b99 100644
--- a/web/src/components/Upstream/components/Timeout.tsx
+++ b/web/src/components/Upstream/components/Timeout.tsx
@@ -14,11 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
-import TimeUnit from './TimeUnit'
+import TimeUnit from './TimeUnit';
 
 const Timeout: React.FC<{
   label: string;
@@ -26,7 +26,7 @@ const Timeout: React.FC<{
   name: string[];
   readonly?: boolean;
 }> = ({ label, desc, name, readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item label={label} required tooltip={desc}>
       <Form.Item
@@ -44,7 +44,7 @@ const Timeout: React.FC<{
       </Form.Item>
       <TimeUnit />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Timeout
+export default Timeout;
diff --git a/web/src/components/Upstream/components/Type.tsx b/web/src/components/Upstream/components/Type.tsx
index ed656700fc..b72d6cdfb8 100644
--- a/web/src/components/Upstream/components/Type.tsx
+++ b/web/src/components/Upstream/components/Type.tsx
@@ -14,20 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react'
-import { AutoComplete, Form, Select } from 'antd'
-import { useIntl } from 'umi'
-import type { FormInstance } from 'antd/es/form'
+import React, { useState } from 'react';
+import { AutoComplete, Form, Select } from 'antd';
+import { useIntl } from 'umi';
+import type { FormInstance } from 'antd/es/form';
 
-import { HashOnEnum, CommonHashKeyEnum, AlgorithmEnum } from '../constant'
+import { HashOnEnum, CommonHashKeyEnum, AlgorithmEnum } from '../constant';
 
 type Props = {
-  readonly?: boolean
-  form: FormInstance
-}
+  readonly?: boolean;
+  form: FormInstance;
+};
 
 const CHash: React.FC<Pick<Props, 'readonly'>> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   const [keySearchWord, setKeySearchWord] = useState('');
 
   const handleSearch = (search: string) => {
@@ -35,7 +35,13 @@ const CHash: React.FC<Pick<Props, 'readonly'>> = ({ readonly }) => {
   };
   return (
     <React.Fragment>
-      <Form.Item name="hash_on" rules={[{ required: true }]} label={formatMessage({ id: 'component.upstream.fields.hash_on' })} tooltip={formatMessage({ id: 'component.upstream.fields.hash_on.tooltip' })} initialValue="vars">
+      <Form.Item
+        name="hash_on"
+        rules={[{ required: true }]}
+        label={formatMessage({ id: 'component.upstream.fields.hash_on' })}
+        tooltip={formatMessage({ id: 'component.upstream.fields.hash_on.tooltip' })}
+        initialValue="vars"
+      >
         <Select disabled={readonly}>
           {Object.entries(HashOnEnum).map(([label, value]) => (
             <Select.Option value={value} key={value}>
@@ -44,12 +50,19 @@ const CHash: React.FC<Pick<Props, 'readonly'>> = ({ readonly }) => {
           ))}
         </Select>
       </Form.Item>
-      <Form.Item name="key" rules={[{ required: true }]}
-                 label={formatMessage({ id: 'component.upstream.fields.key' })}
-                 tooltip={formatMessage({ id: 'component.upstream.fields.key.tooltip' })} initialValue="remote_addr">
+      <Form.Item
+        name="key"
+        rules={[{ required: true }]}
+        label={formatMessage({ id: 'component.upstream.fields.key' })}
+        tooltip={formatMessage({ id: 'component.upstream.fields.key.tooltip' })}
+        initialValue="remote_addr"
+      >
         <AutoComplete disabled={readonly} onSearch={handleSearch}>
           {Object.entries(CommonHashKeyEnum)
-            .filter((([label, value]) => label.startsWith(keySearchWord) || value.startsWith(keySearchWord)))
+            .filter(
+              ([label, value]) =>
+                label.startsWith(keySearchWord) || value.startsWith(keySearchWord),
+            )
             .map(([label, value]) => (
               <Select.Option value={value} key={value}>
                 {label}
@@ -58,11 +71,11 @@ const CHash: React.FC<Pick<Props, 'readonly'>> = ({ readonly }) => {
         </AutoComplete>
       </Form.Item>
     </React.Fragment>
-  )
+  );
 };
 
 const Component: React.FC<Props> = ({ readonly, form }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <React.Fragment>
@@ -91,7 +104,7 @@ const Component: React.FC<Props> = ({ readonly, form }) => {
         }}
       </Form.Item>
     </React.Fragment>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/UpstreamSelector.tsx b/web/src/components/Upstream/components/UpstreamSelector.tsx
index 34f7fec16b..2bfa4c03a9 100644
--- a/web/src/components/Upstream/components/UpstreamSelector.tsx
+++ b/web/src/components/Upstream/components/UpstreamSelector.tsx
@@ -14,9 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Select } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Select } from 'antd';
+import { useIntl } from 'umi';
 
 type Upstream = {
   name?: string;
@@ -27,11 +27,11 @@ type Props = {
   list?: Upstream[];
   disabled?: boolean;
   required?: boolean;
-  onChange: (id: string) => void
-}
+  onChange: (id: string) => void;
+};
 
 const UpstreamSelector: React.FC<Props> = ({ onChange, list = [], disabled, required }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
@@ -43,11 +43,11 @@ const UpstreamSelector: React.FC<Props> = ({ onChange, list = [], disabled, requ
         data-cy="upstream_selector"
         disabled={disabled}
         onChange={onChange}
-        filterOption={(input, item) =>
-          item?.children.toLowerCase().includes(input.toLowerCase())
-        }
+        filterOption={(input, item) => item?.children.toLowerCase().includes(input.toLowerCase())}
       >
-        <Select.Option value="None" disabled={required}>{formatMessage({id: 'component.upstream.other.none'})}</Select.Option>
+        <Select.Option value="None" disabled={required}>
+          {formatMessage({ id: 'component.upstream.other.none' })}
+        </Select.Option>
         {[
           {
             name: formatMessage({ id: 'page.upstream.step.select.upstream.select.option' }),
@@ -61,7 +61,7 @@ const UpstreamSelector: React.FC<Props> = ({ onChange, list = [], disabled, requ
         ))}
       </Select>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default UpstreamSelector
+export default UpstreamSelector;
diff --git a/web/src/components/Upstream/components/active-check/Concurrency.tsx b/web/src/components/Upstream/components/active-check/Concurrency.tsx
index 8ef19d3d76..4233ee3ee5 100644
--- a/web/src/components/Upstream/components/active-check/Concurrency.tsx
+++ b/web/src/components/Upstream/components/active-check/Concurrency.tsx
@@ -14,24 +14,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const ConcurrencyComponent: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
-    <Form.Item label={formatMessage({ id: 'component.upstream.fields.checks.active.concurrency' })} tooltip={formatMessage({ id: "component.upstream.fields.checks.active.concurrency.tooltip" })}>
+    <Form.Item
+      label={formatMessage({ id: 'component.upstream.fields.checks.active.concurrency' })}
+      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.concurrency.tooltip' })}
+    >
       <Form.Item name={['checks', 'active', 'concurrency']} noStyle initialValue={10}>
         <InputNumber disabled={readonly} min={0} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default ConcurrencyComponent
+export default ConcurrencyComponent;
diff --git a/web/src/components/Upstream/components/active-check/Healthy/HttpStatuses.tsx b/web/src/components/Upstream/components/active-check/Healthy/HttpStatuses.tsx
index 5357ef7f68..0b4d6443e9 100644
--- a/web/src/components/Upstream/components/active-check/Healthy/HttpStatuses.tsx
+++ b/web/src/components/Upstream/components/active-check/Healthy/HttpStatuses.tsx
@@ -14,19 +14,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Row, Col, Button, InputNumber } from 'antd'
-import { useIntl } from 'umi'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import React from 'react';
+import { Form, Row, Col, Button, InputNumber } from 'antd';
+import { useIntl } from 'umi';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import { removeBtnStyle } from '@/components/Upstream'
+import { removeBtnStyle } from '@/components/Upstream';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.List name={['checks', 'active', 'healthy', 'http_statuses']} initialValue={[200, 302]}>
@@ -34,9 +34,13 @@ const Component: React.FC<Props> = ({ readonly }) => {
         <>
           <Form.Item
             required
-            label={formatMessage({ id: 'component.upstream.fields.checks.active.healthy.http_statuses' })}
+            label={formatMessage({
+              id: 'component.upstream.fields.checks.active.healthy.http_statuses',
+            })}
             style={{ marginBottom: 0 }}
-            tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.healthy.http_statuses.tooltip' })}
+            tooltip={formatMessage({
+              id: 'component.upstream.fields.checks.active.healthy.http_statuses.tooltip',
+            })}
           >
             {fields.map((field, index) => (
               <Row style={{ marginBottom: 10 }} key={index}>
@@ -70,6 +74,6 @@ const Component: React.FC<Props> = ({ readonly }) => {
         </>
       )}
     </Form.List>
-  )
-}
-export default Component
+  );
+};
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Healthy/Interval.tsx b/web/src/components/Upstream/components/active-check/Healthy/Interval.tsx
index 0a4e3c8a1a..53240d0bba 100644
--- a/web/src/components/Upstream/components/active-check/Healthy/Interval.tsx
+++ b/web/src/components/Upstream/components/active-check/Healthy/Interval.tsx
@@ -14,22 +14,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
-import TimeUnit from '../../TimeUnit'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
+import TimeUnit from '../../TimeUnit';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.active.healthy.interval' })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.healthy.interval.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.healthy.interval.tooltip',
+      })}
     >
       <Form.Item
         noStyle
@@ -49,7 +51,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
       </Form.Item>
       <TimeUnit />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Healthy/Successes.tsx b/web/src/components/Upstream/components/active-check/Healthy/Successes.tsx
index a096cdfd27..fe16b0cc4c 100644
--- a/web/src/components/Upstream/components/active-check/Healthy/Successes.tsx
+++ b/web/src/components/Upstream/components/active-check/Healthy/Successes.tsx
@@ -14,22 +14,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Form, InputNumber } from 'antd'
-import React from 'react'
-import { useIntl } from 'umi'
+import { Form, InputNumber } from 'antd';
+import React from 'react';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.active.healthy.successes' })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.healthy.successes.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.healthy.successes.tooltip',
+      })}
     >
       <Form.Item
         name={['checks', 'active', 'healthy', 'successes']}
@@ -37,7 +39,9 @@ const Component: React.FC<Props> = ({ readonly }) => {
         rules={[
           {
             required: true,
-            message: formatMessage({ id: 'component.upstream.fields.checks.active.healthy.successes.required' }),
+            message: formatMessage({
+              id: 'component.upstream.fields.checks.active.healthy.successes.required',
+            }),
           },
         ]}
         initialValue={2}
@@ -45,7 +49,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Healthy/index.ts b/web/src/components/Upstream/components/active-check/Healthy/index.ts
index f803f58c61..e6ea2ca680 100644
--- a/web/src/components/Upstream/components/active-check/Healthy/index.ts
+++ b/web/src/components/Upstream/components/active-check/Healthy/index.ts
@@ -14,12 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Interval from './Interval'
-import Successes from './Successes'
-import HttpStatuses from './HttpStatuses'
+import Interval from './Interval';
+import Successes from './Successes';
+import HttpStatuses from './HttpStatuses';
 
 export default {
   Interval,
   Successes,
-  HttpStatuses
-}
+  HttpStatuses,
+};
diff --git a/web/src/components/Upstream/components/active-check/Host.tsx b/web/src/components/Upstream/components/active-check/Host.tsx
index 87e68a3d93..10fe1aca39 100644
--- a/web/src/components/Upstream/components/active-check/Host.tsx
+++ b/web/src/components/Upstream/components/active-check/Host.tsx
@@ -14,16 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Input } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Input } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.active.host' })}
@@ -34,10 +34,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         name={['checks', 'active', 'host']}
         rules={[
           {
-            pattern: new RegExp(
-              /^\*?[0-9a-zA-Z-._]+$/,
-              'g',
-            ),
+            pattern: new RegExp(/^\*?[0-9a-zA-Z-._]+$/, 'g'),
             message: formatMessage({ id: 'component.upstream.fields.checks.active.host.scope' }),
           },
         ]}
@@ -50,7 +47,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/HttpPath.tsx b/web/src/components/Upstream/components/active-check/HttpPath.tsx
index b99457a27d..c62a81a49f 100644
--- a/web/src/components/Upstream/components/active-check/HttpPath.tsx
+++ b/web/src/components/Upstream/components/active-check/HttpPath.tsx
@@ -14,16 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Input } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Input } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
@@ -32,18 +32,16 @@ const Component: React.FC<Props> = ({ readonly }) => {
         id: 'component.upstream.fields.checks.active.http_path.tooltip',
       })}
     >
-      <Form.Item
-        name={['checks', 'active', 'http_path']}
-        noStyle
-        initialValue="/"
-      >
+      <Form.Item name={['checks', 'active', 'http_path']} noStyle initialValue="/">
         <Input
           disabled={readonly}
-          placeholder={formatMessage({ id: 'component.upstream.fields.checks.active.http_path.placeholder' })}
+          placeholder={formatMessage({
+            id: 'component.upstream.fields.checks.active.http_path.placeholder',
+          })}
         />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/HttpsVerifyCertificate.tsx b/web/src/components/Upstream/components/active-check/HttpsVerifyCertificate.tsx
index 0d33feff17..f53c5834fe 100644
--- a/web/src/components/Upstream/components/active-check/HttpsVerifyCertificate.tsx
+++ b/web/src/components/Upstream/components/active-check/HttpsVerifyCertificate.tsx
@@ -14,27 +14,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Switch } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Switch } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const HttpsVerifyCertificateComponent: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
-      label={formatMessage({ id: 'component.upstream.fields.checks.active.https_verify_certificate' })}
+      label={formatMessage({
+        id: 'component.upstream.fields.checks.active.https_verify_certificate',
+      })}
       name={['checks', 'active', 'https_verify_certificate']}
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.https_verify_certificate.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.https_verify_certificate.tooltip',
+      })}
       initialValue={true}
       valuePropName="checked"
     >
       <Switch disabled={readonly} />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default HttpsVerifyCertificateComponent
+export default HttpsVerifyCertificateComponent;
diff --git a/web/src/components/Upstream/components/active-check/Port.tsx b/web/src/components/Upstream/components/active-check/Port.tsx
index 030a6c7258..a2d3043702 100644
--- a/web/src/components/Upstream/components/active-check/Port.tsx
+++ b/web/src/components/Upstream/components/active-check/Port.tsx
@@ -14,16 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item label={formatMessage({ id: 'component.upstream.fields.checks.active.port' })}>
       <Form.Item name={['checks', 'active', 'port']} noStyle initialValue={80}>
@@ -37,7 +37,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/ReqHeaders.tsx b/web/src/components/Upstream/components/active-check/ReqHeaders.tsx
index 9280ed4428..ce0d72e367 100644
--- a/web/src/components/Upstream/components/active-check/ReqHeaders.tsx
+++ b/web/src/components/Upstream/components/active-check/ReqHeaders.tsx
@@ -14,29 +14,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Row, Col, Input, Button } from 'antd'
-import { useIntl } from 'umi'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import React from 'react';
+import { Form, Row, Col, Input, Button } from 'antd';
+import { useIntl } from 'umi';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import { removeBtnStyle } from '../../constant'
+import { removeBtnStyle } from '../../constant';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.List name={['checks', 'active', 'req_headers']}>
       {(fields, { add, remove }) => (
         <>
           <Form.Item
-            label={
-              formatMessage({ id: 'component.upstream.fields.checks.active.req_headers' })
-            }
-            tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.req_headers.tooltip' })}
+            label={formatMessage({ id: 'component.upstream.fields.checks.active.req_headers' })}
+            tooltip={formatMessage({
+              id: 'component.upstream.fields.checks.active.req_headers.tooltip',
+            })}
             style={{ marginBottom: 0 }}
           >
             {fields.map((field, index) => (
@@ -76,7 +76,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         </>
       )}
     </Form.List>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Timeout.tsx b/web/src/components/Upstream/components/active-check/Timeout.tsx
index f2b6bdc813..1289cca06e 100644
--- a/web/src/components/Upstream/components/active-check/Timeout.tsx
+++ b/web/src/components/Upstream/components/active-check/Timeout.tsx
@@ -14,26 +14,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
-import TimeUnit from '../TimeUnit'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
+import TimeUnit from '../TimeUnit';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const ActiveCheckTimeoutComponent: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
-    <Form.Item label={formatMessage({ id: 'page.upstream.step.healthyCheck.active.timeout' })} tooltip={formatMessage({ id: 'page.upstream.checks.active.timeout.description' })}>
+    <Form.Item
+      label={formatMessage({ id: 'page.upstream.step.healthyCheck.active.timeout' })}
+      tooltip={formatMessage({ id: 'page.upstream.checks.active.timeout.description' })}
+    >
       <Form.Item name={['checks', 'active', 'timeout']} noStyle initialValue={1}>
         <InputNumber disabled={readonly} min={0} />
       </Form.Item>
       <TimeUnit />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default ActiveCheckTimeoutComponent
+export default ActiveCheckTimeoutComponent;
diff --git a/web/src/components/Upstream/components/active-check/Type.tsx b/web/src/components/Upstream/components/active-check/Type.tsx
index 067bf96fa4..cb7ab79f90 100644
--- a/web/src/components/Upstream/components/active-check/Type.tsx
+++ b/web/src/components/Upstream/components/active-check/Type.tsx
@@ -14,29 +14,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Select, Row, Col } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Select, Row, Col } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const options = [
   {
-    label: "HTTP",
-    value: "http"
-  }, {
-    label: "HTTPs",
-    value: "https"
-  }, {
-    label: "TCP",
-    value: "tcp"
-  }
-]
+    label: 'HTTP',
+    value: 'http',
+  },
+  {
+    label: 'HTTPs',
+    value: 'https',
+  },
+  {
+    label: 'TCP',
+    value: 'tcp',
+  },
+];
 
 const ActiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
@@ -46,12 +48,9 @@ const ActiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
     >
       <Row>
         <Col span={5}>
-          <Form.Item
-            name={['checks', 'active', 'type']}
-            initialValue="http"
-          >
+          <Form.Item name={['checks', 'active', 'type']} initialValue="http">
             <Select disabled={readonly}>
-              {options.map(item => {
+              {options.map((item) => {
                 return (
                   <Select.Option value={item.value} key={item.value}>
                     {item.label}
@@ -63,7 +62,7 @@ const ActiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
         </Col>
       </Row>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default ActiveCheckTypeComponent
+export default ActiveCheckTypeComponent;
diff --git a/web/src/components/Upstream/components/active-check/Unhealthy/HttpFailures.tsx b/web/src/components/Upstream/components/active-check/Unhealthy/HttpFailures.tsx
index 953e7851e3..795dfaf725 100644
--- a/web/src/components/Upstream/components/active-check/Unhealthy/HttpFailures.tsx
+++ b/web/src/components/Upstream/components/active-check/Unhealthy/HttpFailures.tsx
@@ -14,22 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Form, InputNumber } from 'antd'
-import React from 'react'
-import { useIntl } from 'umi'
+import { Form, InputNumber } from 'antd';
+import React from 'react';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
-      label={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.http_failures' })}
+      label={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.http_failures',
+      })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip',
+      })}
     >
       <Form.Item
         name={['checks', 'active', 'unhealthy', 'http_failures']}
@@ -47,7 +51,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Unhealthy/HttpStatuses.tsx b/web/src/components/Upstream/components/active-check/Unhealthy/HttpStatuses.tsx
index 3e5830ccfb..1d38531bc5 100644
--- a/web/src/components/Upstream/components/active-check/Unhealthy/HttpStatuses.tsx
+++ b/web/src/components/Upstream/components/active-check/Unhealthy/HttpStatuses.tsx
@@ -14,22 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Row, Col, Button, InputNumber } from 'antd'
-import { useIntl } from 'umi'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import React from 'react';
+import { Form, Row, Col, Button, InputNumber } from 'antd';
+import { useIntl } from 'umi';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import { removeBtnStyle } from '@/components/Upstream'
+import { removeBtnStyle } from '@/components/Upstream';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
-    <Form.List name={['checks', 'active', 'unhealthy', 'http_statuses']} initialValue={[429, 404, 500, 501, 502, 503, 504, 505]}>
+    <Form.List
+      name={['checks', 'active', 'unhealthy', 'http_statuses']}
+      initialValue={[429, 404, 500, 501, 502, 503, 504, 505]}
+    >
       {(fields, { add, remove }) => (
         <>
           <Form.Item
@@ -69,6 +72,6 @@ const Component: React.FC<Props> = ({ readonly }) => {
         </>
       )}
     </Form.List>
-  )
-}
-export default Component
+  );
+};
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Unhealthy/Interval.tsx b/web/src/components/Upstream/components/active-check/Unhealthy/Interval.tsx
index 5b41aa0554..38c9826a28 100644
--- a/web/src/components/Upstream/components/active-check/Unhealthy/Interval.tsx
+++ b/web/src/components/Upstream/components/active-check/Unhealthy/Interval.tsx
@@ -14,23 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
-import TimeUnit from '../../TimeUnit'
+import TimeUnit from '../../TimeUnit';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.interval' })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.interval.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.interval.tooltip',
+      })}
     >
       <Form.Item
         name={['checks', 'active', 'unhealthy', 'interval']}
@@ -49,7 +51,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
       </Form.Item>
       <TimeUnit />
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Unhealthy/TCPFailures.tsx b/web/src/components/Upstream/components/active-check/Unhealthy/TCPFailures.tsx
index 20011b7b87..79657bf364 100644
--- a/web/src/components/Upstream/components/active-check/Unhealthy/TCPFailures.tsx
+++ b/web/src/components/Upstream/components/active-check/Unhealthy/TCPFailures.tsx
@@ -14,22 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Form, InputNumber } from 'antd'
-import React from 'react'
-import { useIntl } from 'umi'
+import { Form, InputNumber } from 'antd';
+import React from 'react';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const TCPFailures: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
-      label={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.tcp_failures' })}
+      label={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.tcp_failures',
+      })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip',
+      })}
     >
       <Form.Item
         name={['checks', 'active', 'unhealthy', 'tcp_Failures']}
@@ -37,7 +41,9 @@ const TCPFailures: React.FC<Props> = ({ readonly }) => {
         rules={[
           {
             required: true,
-            message: formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.tcp_failures.required' }),
+            message: formatMessage({
+              id: 'component.upstream.fields.checks.active.unhealthy.tcp_failures.required',
+            }),
           },
         ]}
         initialValue={2}
@@ -45,7 +51,7 @@ const TCPFailures: React.FC<Props> = ({ readonly }) => {
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default TCPFailures
+export default TCPFailures;
diff --git a/web/src/components/Upstream/components/active-check/Unhealthy/Timeouts.tsx b/web/src/components/Upstream/components/active-check/Unhealthy/Timeouts.tsx
index c1faa1e33c..2ba2280aea 100644
--- a/web/src/components/Upstream/components/active-check/Unhealthy/Timeouts.tsx
+++ b/web/src/components/Upstream/components/active-check/Unhealthy/Timeouts.tsx
@@ -14,31 +14,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.timeouts' })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip',
+      })}
     >
-      <Form.Item
-        name={['checks', 'active', 'unhealthy', 'timeouts']}
-        noStyle
-        initialValue={3}
-      >
+      <Form.Item name={['checks', 'active', 'unhealthy', 'timeouts']} noStyle initialValue={3}>
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/active-check/Unhealthy/index.ts b/web/src/components/Upstream/components/active-check/Unhealthy/index.ts
index 6dde012e89..06d6c8b115 100644
--- a/web/src/components/Upstream/components/active-check/Unhealthy/index.ts
+++ b/web/src/components/Upstream/components/active-check/Unhealthy/index.ts
@@ -14,16 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Timeouts from './Timeouts'
-import Interval from './Interval'
-import HttpStatuses from './HttpStatuses'
-import HttpFailures from './HttpFailures'
-import TCPFailures from './TCPFailures'
+import Timeouts from './Timeouts';
+import Interval from './Interval';
+import HttpStatuses from './HttpStatuses';
+import HttpFailures from './HttpFailures';
+import TCPFailures from './TCPFailures';
 
 export default {
   Timeouts,
   Interval,
   HttpStatuses,
   HttpFailures,
-  TCPFailures
-}
+  TCPFailures,
+};
diff --git a/web/src/components/Upstream/components/active-check/index.ts b/web/src/components/Upstream/components/active-check/index.ts
index 0a9929030c..4b82188f42 100644
--- a/web/src/components/Upstream/components/active-check/index.ts
+++ b/web/src/components/Upstream/components/active-check/index.ts
@@ -14,17 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Unhealthy from './Unhealthy'
-import Healthy from './Healthy'
+import Unhealthy from './Unhealthy';
+import Healthy from './Healthy';
 
-import Timeout from './Timeout'
-import Type from './Type'
-import ReqHeaders from './ReqHeaders'
-import Host from './Host'
-import Port from './Port'
-import HttpPath from './HttpPath'
-import Concurrency from './Concurrency'
-import HttpsVerifyCertificate from './HttpsVerifyCertificate'
+import Timeout from './Timeout';
+import Type from './Type';
+import ReqHeaders from './ReqHeaders';
+import Host from './Host';
+import Port from './Port';
+import HttpPath from './HttpPath';
+import Concurrency from './Concurrency';
+import HttpsVerifyCertificate from './HttpsVerifyCertificate';
 
 export default {
   Unhealthy,
@@ -36,5 +36,5 @@ export default {
   Port,
   HttpPath,
   Concurrency,
-  HttpsVerifyCertificate
-}
+  HttpsVerifyCertificate,
+};
diff --git a/web/src/components/Upstream/components/passive-check/Healthy/HttpStatuses.tsx b/web/src/components/Upstream/components/passive-check/Healthy/HttpStatuses.tsx
index 8ac8ecb033..6c93ef6731 100644
--- a/web/src/components/Upstream/components/passive-check/Healthy/HttpStatuses.tsx
+++ b/web/src/components/Upstream/components/passive-check/Healthy/HttpStatuses.tsx
@@ -14,30 +14,53 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Row, Col, InputNumber, Button } from 'antd'
-import { useIntl } from 'umi'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import React from 'react';
+import { Form, Row, Col, InputNumber, Button } from 'antd';
+import { useIntl } from 'umi';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import { removeBtnStyle } from '@/components/Upstream/constant'
+import { removeBtnStyle } from '@/components/Upstream/constant';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
-    <Form.List name={['checks', 'passive', 'healthy', 'http_statuses']} initialValue={[200, 201, 202, 203, 204, 205, 206, 207,
-      208, 226, 300, 301, 302, 303, 304, 305,
-      306, 307, 308]}>
+    <Form.List
+      name={['checks', 'passive', 'healthy', 'http_statuses']}
+      initialValue={[
+        200,
+        201,
+        202,
+        203,
+        204,
+        205,
+        206,
+        207,
+        208,
+        226,
+        300,
+        301,
+        302,
+        303,
+        304,
+        305,
+        306,
+        307,
+        308,
+      ]}
+    >
       {(fields, { add, remove }) => (
         <>
           <Form.Item
             required
             label={formatMessage({ id: 'page.upstream.step.healthyCheck.passive.http_statuses' })}
-            tooltip={formatMessage({ id: 'page.upstream.checks.passive.healthy.http_statuses.description' })}
+            tooltip={formatMessage({
+              id: 'page.upstream.checks.passive.healthy.http_statuses.description',
+            })}
             style={{ marginBottom: 0 }}
           >
             {fields.map((field, index) => (
@@ -72,7 +95,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         </>
       )}
     </Form.List>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/passive-check/Healthy/Successes.tsx b/web/src/components/Upstream/components/passive-check/Healthy/Successes.tsx
index a85a69f05e..714f9d9f5f 100644
--- a/web/src/components/Upstream/components/passive-check/Healthy/Successes.tsx
+++ b/web/src/components/Upstream/components/passive-check/Healthy/Successes.tsx
@@ -14,20 +14,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.passive.healthy.successes' })}
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.passive.healthy.successes.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.passive.healthy.successes.tooltip',
+      })}
       required
     >
       <Form.Item
@@ -37,14 +39,16 @@ const Component: React.FC<Props> = ({ readonly }) => {
         rules={[
           {
             required: true,
-            message: formatMessage({ id: 'component.upstream.fields.checks.passive.healthy.successes.required' }),
+            message: formatMessage({
+              id: 'component.upstream.fields.checks.passive.healthy.successes.required',
+            }),
           },
         ]}
       >
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/passive-check/Healthy/index.ts b/web/src/components/Upstream/components/passive-check/Healthy/index.ts
index 737fbf4e9e..ff4367a342 100644
--- a/web/src/components/Upstream/components/passive-check/Healthy/index.ts
+++ b/web/src/components/Upstream/components/passive-check/Healthy/index.ts
@@ -14,10 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import HttpStatuses from './HttpStatuses'
-import Successes from './Successes'
+import HttpStatuses from './HttpStatuses';
+import Successes from './Successes';
 
 export default {
   HttpStatuses,
-  Successes
-}
+  Successes,
+};
diff --git a/web/src/components/Upstream/components/passive-check/Type.tsx b/web/src/components/Upstream/components/passive-check/Type.tsx
index eeab15030b..881b060b39 100644
--- a/web/src/components/Upstream/components/passive-check/Type.tsx
+++ b/web/src/components/Upstream/components/passive-check/Type.tsx
@@ -14,29 +14,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Select, Row, Col } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, Select, Row, Col } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const options = [
   {
-    label: "HTTP",
-    value: "http"
-  }, {
-    label: "HTTPs",
-    value: "https"
-  }, {
-    label: "TCP",
-    value: "tcp"
-  }
-]
+    label: 'HTTP',
+    value: 'http',
+  },
+  {
+    label: 'HTTPs',
+    value: 'https',
+  },
+  {
+    label: 'TCP',
+    value: 'tcp',
+  },
+];
 
 const PassiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
@@ -46,12 +48,9 @@ const PassiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
     >
       <Row>
         <Col span={5}>
-          <Form.Item
-            name={['checks', 'passive', 'type']}
-            initialValue="http"
-          >
+          <Form.Item name={['checks', 'passive', 'type']} initialValue="http">
             <Select disabled={readonly}>
-              {options.map(item => {
+              {options.map((item) => {
                 return (
                   <Select.Option value={item.value} key={item.value}>
                     {item.label}
@@ -63,7 +62,7 @@ const PassiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
         </Col>
       </Row>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default PassiveCheckTypeComponent
+export default PassiveCheckTypeComponent;
diff --git a/web/src/components/Upstream/components/passive-check/Unhealthy/HttpFailures.tsx b/web/src/components/Upstream/components/passive-check/Unhealthy/HttpFailures.tsx
index be282b7312..632bd158e7 100644
--- a/web/src/components/Upstream/components/passive-check/Unhealthy/HttpFailures.tsx
+++ b/web/src/components/Upstream/components/passive-check/Unhealthy/HttpFailures.tsx
@@ -14,22 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
 
   return (
     <Form.Item
-      label={formatMessage({ id: 'component.upstream.fields.checks.active.unhealthy.http_failures' })}
+      label={formatMessage({
+        id: 'component.upstream.fields.checks.active.unhealthy.http_failures',
+      })}
       required
-      tooltip={formatMessage({ id: 'page.upstream.checks.passive.unhealthy.http_failures.description' })}
+      tooltip={formatMessage({
+        id: 'page.upstream.checks.passive.unhealthy.http_failures.description',
+      })}
     >
       <Form.Item
         name={['checks', 'passive', 'unhealthy', 'http_failures']}
@@ -47,7 +51,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/passive-check/Unhealthy/HttpStatuses.tsx b/web/src/components/Upstream/components/passive-check/Unhealthy/HttpStatuses.tsx
index 2127c05728..3b3e37be31 100644
--- a/web/src/components/Upstream/components/passive-check/Unhealthy/HttpStatuses.tsx
+++ b/web/src/components/Upstream/components/passive-check/Unhealthy/HttpStatuses.tsx
@@ -14,27 +14,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, Row, Col, InputNumber, Button } from 'antd'
-import { useIntl } from 'umi'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import React from 'react';
+import { Form, Row, Col, InputNumber, Button } from 'antd';
+import { useIntl } from 'umi';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import { removeBtnStyle } from '@/components/Upstream/constant'
+import { removeBtnStyle } from '@/components/Upstream/constant';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
-    <Form.List name={['checks', 'passive', 'unhealthy', 'http_statuses']} initialValue={[429, 500, 503]}>
+    <Form.List
+      name={['checks', 'passive', 'unhealthy', 'http_statuses']}
+      initialValue={[429, 500, 503]}
+    >
       {(fields, { add, remove }) => (
         <>
           <Form.Item
             required
             label={formatMessage({ id: 'page.upstream.step.healthyCheck.passive.http_statuses' })}
-            tooltip={formatMessage({ id: 'page.upstream.checks.passive.unhealthy.http_statuses.description' })}
+            tooltip={formatMessage({
+              id: 'page.upstream.checks.passive.unhealthy.http_statuses.description',
+            })}
             style={{ marginBottom: 0 }}
           >
             {fields.map((field, index) => (
@@ -69,7 +74,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         </>
       )}
     </Form.List>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/passive-check/Unhealthy/TcpFailures.tsx b/web/src/components/Upstream/components/passive-check/Unhealthy/TcpFailures.tsx
index 7828cb2e0b..fec689eb80 100644
--- a/web/src/components/Upstream/components/passive-check/Unhealthy/TcpFailures.tsx
+++ b/web/src/components/Upstream/components/passive-check/Unhealthy/TcpFailures.tsx
@@ -14,21 +14,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'page.upstream.step.healthyCheck.passive.tcp_failures' })}
       required
-      tooltip={formatMessage({ id: 'page.upstream.checks.passive.unhealthy.tcp_failures.description' })}
+      tooltip={formatMessage({
+        id: 'page.upstream.checks.passive.unhealthy.tcp_failures.description',
+      })}
     >
       <Form.Item
         name={['checks', 'passive', 'unhealthy', 'tcp_failures']}
@@ -46,7 +48,7 @@ const Component: React.FC<Props> = ({ readonly }) => {
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/passive-check/Unhealthy/Timeouts.tsx b/web/src/components/Upstream/components/passive-check/Unhealthy/Timeouts.tsx
index 6eff53a7e7..aeaacf74b4 100644
--- a/web/src/components/Upstream/components/passive-check/Unhealthy/Timeouts.tsx
+++ b/web/src/components/Upstream/components/passive-check/Unhealthy/Timeouts.tsx
@@ -14,31 +14,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
-import { Form, InputNumber } from 'antd'
-import { useIntl } from 'umi'
+import React from 'react';
+import { Form, InputNumber } from 'antd';
+import { useIntl } from 'umi';
 
 type Props = {
-  readonly?: boolean
-}
+  readonly?: boolean;
+};
 
 const Component: React.FC<Props> = ({ readonly }) => {
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
   return (
     <Form.Item
       label={formatMessage({ id: 'component.upstream.fields.checks.passive.unhealthy.timeouts' })}
       required
-      tooltip={formatMessage({ id: 'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip' })}
+      tooltip={formatMessage({
+        id: 'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip',
+      })}
     >
-      <Form.Item
-        name={['checks', 'passive', 'unhealthy', 'timeouts']}
-        noStyle
-        initialValue={7}
-      >
+      <Form.Item name={['checks', 'passive', 'unhealthy', 'timeouts']} noStyle initialValue={7}>
         <InputNumber disabled={readonly} min={1} max={254} />
       </Form.Item>
     </Form.Item>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/web/src/components/Upstream/components/passive-check/Unhealthy/index.ts b/web/src/components/Upstream/components/passive-check/Unhealthy/index.ts
index 88ab9c2275..e00e5219c2 100644
--- a/web/src/components/Upstream/components/passive-check/Unhealthy/index.ts
+++ b/web/src/components/Upstream/components/passive-check/Unhealthy/index.ts
@@ -14,14 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Timeouts from './Timeouts'
-import HttpFailures from './HttpFailures'
-import TcpFailures from './TcpFailures'
-import HttpStatuses from './HttpStatuses'
+import Timeouts from './Timeouts';
+import HttpFailures from './HttpFailures';
+import TcpFailures from './TcpFailures';
+import HttpStatuses from './HttpStatuses';
 
 export default {
   Timeouts,
   HttpFailures,
   TcpFailures,
-  HttpStatuses
-}
+  HttpStatuses,
+};
diff --git a/web/src/components/Upstream/components/passive-check/index.ts b/web/src/components/Upstream/components/passive-check/index.ts
index f0637fd910..1756651ce5 100644
--- a/web/src/components/Upstream/components/passive-check/index.ts
+++ b/web/src/components/Upstream/components/passive-check/index.ts
@@ -14,12 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Healthy from './Healthy'
-import Unhealthy from './Unhealthy'
-import Type from './Type'
+import Healthy from './Healthy';
+import Unhealthy from './Unhealthy';
+import Type from './Type';
 
 export default {
   Healthy,
   Unhealthy,
-  Type
-}
+  Type,
+};
diff --git a/web/src/components/Upstream/constant.ts b/web/src/components/Upstream/constant.ts
index 66ddc45143..394b53292a 100644
--- a/web/src/components/Upstream/constant.ts
+++ b/web/src/components/Upstream/constant.ts
@@ -22,10 +22,10 @@ export const removeBtnStyle = {
 };
 
 export enum AlgorithmEnum {
-  chash = "chash",
-  roundrobin = "roundrobin",
-  ewma = "ewma",
-  least_conn = "least_conn"
+  chash = 'chash',
+  roundrobin = 'roundrobin',
+  ewma = 'ewma',
+  least_conn = 'least_conn',
 }
 
 export enum HashOnEnum {
@@ -33,7 +33,7 @@ export enum HashOnEnum {
   header = 'header',
   cookie = 'cookie',
   consumer = 'consumer',
-  vars_combinations = 'vars_combinations'
+  vars_combinations = 'vars_combinations',
 }
 
 export enum CommonHashKeyEnum {
@@ -50,14 +50,14 @@ export enum CommonHashKeyEnum {
 }
 
 export enum SchemeEnum {
-  grpc = "grpc",
-  grpcs = "grpcs",
-  http = "http",
-  https = "https"
+  grpc = 'grpc',
+  grpcs = 'grpcs',
+  http = 'http',
+  https = 'https',
 }
 
 export enum PassHostEnum {
-  pass = "pass",
-  node = "node",
-  rewrite = "rewrite"
+  pass = 'pass',
+  node = 'node',
+  rewrite = 'rewrite',
 }
diff --git a/web/src/components/Upstream/locales/en-US.ts b/web/src/components/Upstream/locales/en-US.ts
index fca1919a31..6bb9cb6e72 100644
--- a/web/src/components/Upstream/locales/en-US.ts
+++ b/web/src/components/Upstream/locales/en-US.ts
@@ -38,65 +38,89 @@ export default {
   'component.upstream.fields.key.tooltip': 'Key as hashing input',
 
   'component.upstream.fields.retries': 'Retries',
-  'component.upstream.fields.retries.tooltip': 'The retry mechanism sends the request to the next upstream node. A value of 0 disables the retry mechanism and leaves the table empty to use the number of available backend nodes.',
+  'component.upstream.fields.retries.tooltip':
+    'The retry mechanism sends the request to the next upstream node. A value of 0 disables the retry mechanism and leaves the table empty to use the number of available backend nodes.',
 
   'component.upstream.fields.checks.active.type': 'Type',
-  'component.upstream.fields.checks.active.type.tooltip': 'Whether to perform active health checks using HTTP or HTTPS, or just attempt a TCP connection.',
+  'component.upstream.fields.checks.active.type.tooltip':
+    'Whether to perform active health checks using HTTP or HTTPS, or just attempt a TCP connection.',
 
   'component.upstream.fields.checks.active.concurrency': 'Concurrency',
-  'component.upstream.fields.checks.active.concurrency.tooltip': 'Number of targets to check concurrently in active health checks.',
+  'component.upstream.fields.checks.active.concurrency.tooltip':
+    'Number of targets to check concurrently in active health checks.',
 
   'component.upstream.fields.checks.active.host': 'Host',
   'component.upstream.fields.checks.active.host.required': 'Please enter the hostname',
-  'component.upstream.fields.checks.active.host.tooltip': 'The hostname of the HTTP request used to perform the active health check',
+  'component.upstream.fields.checks.active.host.tooltip':
+    'The hostname of the HTTP request used to perform the active health check',
   'component.upstream.fields.checks.active.host.scope': 'Only letters, numbers and . are supported',
 
   'component.upstream.fields.checks.active.port': 'Port',
 
   'component.upstream.fields.checks.active.http_path': 'HTTP Path',
-  'component.upstream.fields.checks.active.http_path.tooltip': 'The path that should be used when issuing the HTTP GET request to the target. The default value is /.',
+  'component.upstream.fields.checks.active.http_path.tooltip':
+    'The path that should be used when issuing the HTTP GET request to the target. The default value is /.',
 
   'component.upstream.fields.checks.active.https_verify_certificate': 'Verify HTTPs Certificate',
-  'component.upstream.fields.checks.active.https_verify_certificate.tooltip': 'Whether to check the validity of the SSL certificate of the remote host when performing active health checks using HTTPS.',
+  'component.upstream.fields.checks.active.https_verify_certificate.tooltip':
+    'Whether to check the validity of the SSL certificate of the remote host when performing active health checks using HTTPS.',
 
   'component.upstream.fields.checks.active.req_headers': 'Request Headers',
-  'component.upstream.fields.checks.active.req_headers.tooltip': 'Additional request headers, example: User-Agent: curl/7.29.0',
+  'component.upstream.fields.checks.active.req_headers.tooltip':
+    'Additional request headers, example: User-Agent: curl/7.29.0',
 
   'component.upstream.fields.checks.active.healthy.interval': 'Interval',
-  'component.upstream.fields.checks.active.healthy.interval.tooltip': 'Interval between checks for healthy targets (in seconds)',
+  'component.upstream.fields.checks.active.healthy.interval.tooltip':
+    'Interval between checks for healthy targets (in seconds)',
 
   'component.upstream.fields.checks.active.healthy.successes': 'Successes',
-  'component.upstream.fields.checks.active.healthy.successes.tooltip': 'Number of successes to consider a target healthy',
-  'component.upstream.fields.checks.active.healthy.successes.required': 'Please enter successes number',
+  'component.upstream.fields.checks.active.healthy.successes.tooltip':
+    'Number of successes to consider a target healthy',
+  'component.upstream.fields.checks.active.healthy.successes.required':
+    'Please enter successes number',
 
   'component.upstream.fields.checks.active.healthy.http_statuses': 'HTTP Statuses',
-  'component.upstream.fields.checks.active.healthy.http_statuses.tooltip': 'An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.',
+  'component.upstream.fields.checks.active.healthy.http_statuses.tooltip':
+    'An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.',
 
   'component.upstream.fields.checks.active.unhealthy.timeouts': 'Timeouts',
-  'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip': 'Number of timeouts in active probes to consider a target unhealthy.',
+  'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip':
+    'Number of timeouts in active probes to consider a target unhealthy.',
 
   'component.upstream.fields.checks.active.unhealthy.http_failures': 'HTTP Failures',
-  'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip': 'Number of HTTP failures to consider a target unhealthy',
-  'component.upstream.fields.checks.active.unhealthy.http_failures.required': 'Please enter the HTTP failures',
+  'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip':
+    'Number of HTTP failures to consider a target unhealthy',
+  'component.upstream.fields.checks.active.unhealthy.http_failures.required':
+    'Please enter the HTTP failures',
 
   'component.upstream.fields.checks.active.unhealthy.tcp_failures': 'TCP Failures',
-  'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip': 'Number of TCP failures to consider a target unhealthy',
-  'component.upstream.fields.checks.active.unhealthy.tcp_failures.required': 'Please enter the TCP Failures',
+  'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip':
+    'Number of TCP failures to consider a target unhealthy',
+  'component.upstream.fields.checks.active.unhealthy.tcp_failures.required':
+    'Please enter the TCP Failures',
 
   'component.upstream.fields.checks.active.unhealthy.interval': 'Interval',
-  'component.upstream.fields.checks.active.unhealthy.interval.tooltip': 'Interval between active health checks for unhealthy targets (in seconds). A value of zero indicates that active probes for healthy targets should not be performed.',
-  'component.upstream.fields.checks.active.unhealthy.required': 'Please enter the unhelthy interval',
+  'component.upstream.fields.checks.active.unhealthy.interval.tooltip':
+    'Interval between active health checks for unhealthy targets (in seconds). A value of zero indicates that active probes for healthy targets should not be performed.',
+  'component.upstream.fields.checks.active.unhealthy.required':
+    'Please enter the unhelthy interval',
 
   'component.upstream.fields.checks.passive.healthy.successes': 'Successes',
-  'component.upstream.fields.checks.passive.healthy.successes.tooltip': 'Number of successes to consider a target healthy',
-  'component.upstream.fields.checks.passive.healthy.successes.required': 'Please enter the successes number',
+  'component.upstream.fields.checks.passive.healthy.successes.tooltip':
+    'Number of successes to consider a target healthy',
+  'component.upstream.fields.checks.passive.healthy.successes.required':
+    'Please enter the successes number',
 
   'component.upstream.fields.checks.passive.unhealthy.timeouts': 'Timeouts',
-  'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip': 'Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.',
+  'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip':
+    'Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.',
 
   'component.upstream.other.none': 'None',
-  'component.upstream.other.pass_host-with-multiple-nodes.title': 'Please check the target node configuration',
-  'component.upstream.other.pass_host-with-multiple-nodes': 'When using a host name or IP in the target node list, make sure there is only one target node',
-  'component.upstream.other.health-check.passive-only': 'When passive health check is enabled, active health check needs to be enabled at the same time.',
+  'component.upstream.other.pass_host-with-multiple-nodes.title':
+    'Please check the target node configuration',
+  'component.upstream.other.pass_host-with-multiple-nodes':
+    'When using a host name or IP in the target node list, make sure there is only one target node',
+  'component.upstream.other.health-check.passive-only':
+    'When passive health check is enabled, active health check needs to be enabled at the same time.',
   'component.upstream.other.health-check.invalid': 'Please check the health check configuration',
-}
+};
diff --git a/web/src/components/Upstream/locales/zh-CN.ts b/web/src/components/Upstream/locales/zh-CN.ts
index 7e623ecee1..3a803cad86 100644
--- a/web/src/components/Upstream/locales/zh-CN.ts
+++ b/web/src/components/Upstream/locales/zh-CN.ts
@@ -38,66 +38,85 @@ export default {
   'component.upstream.fields.key.tooltip': '哈希键（Hash Key）',
 
   'component.upstream.fields.retries': '重试次数',
-  'component.upstream.fields.retries.tooltip': '重试机制将请求发到下一个上游节点。值为 0 表示禁用重试机制，留空表示使用可用后端节点的数量。',
+  'component.upstream.fields.retries.tooltip':
+    '重试机制将请求发到下一个上游节点。值为 0 表示禁用重试机制，留空表示使用可用后端节点的数量。',
 
   'component.upstream.fields.checks.active.type': '类型',
-  'component.upstream.fields.checks.active.type.tooltip': '是使用 HTTP 或 HTTPS 进行主动健康检查，还是只尝试 TCP 连接。',
+  'component.upstream.fields.checks.active.type.tooltip':
+    '是使用 HTTP 或 HTTPS 进行主动健康检查，还是只尝试 TCP 连接。',
 
   'component.upstream.fields.checks.active.concurrency': '并行数量',
-  'component.upstream.fields.checks.active.concurrency.tooltip': '在主动健康检查中同时检查的目标数量。',
+  'component.upstream.fields.checks.active.concurrency.tooltip':
+    '在主动健康检查中同时检查的目标数量。',
 
   'component.upstream.fields.checks.active.host': '主机名',
   'component.upstream.fields.checks.active.host.required': '请输入主机名',
-  'component.upstream.fields.checks.active.host.tooltip': '进行主动健康检查时使用的 HTTP 请求主机名',
+  'component.upstream.fields.checks.active.host.tooltip':
+    '进行主动健康检查时使用的 HTTP 请求主机名',
   'component.upstream.fields.checks.active.host.scope': '仅支持字母、数字和 . ',
 
   'component.upstream.fields.checks.active.port': '端口',
 
   'component.upstream.fields.checks.active.http_path': '请求路径',
-  'component.upstream.fields.checks.active.http_path.tooltip': '向目标节点发出 HTTP GET 请求时应使用的路径。',
+  'component.upstream.fields.checks.active.http_path.tooltip':
+    '向目标节点发出 HTTP GET 请求时应使用的路径。',
   'component.upstream.fields.checks.active.http_path.placeholder': '请输入 HTTP 请求路径',
 
   'component.upstream.fields.checks.active.https_verify_certificate': '验证证书',
-  'component.upstream.fields.checks.active.https_verify_certificate.tooltip': '在使用 HTTPS 执行主动健康检查时，是否检查远程主机的 SSL 证书的有效性。',
+  'component.upstream.fields.checks.active.https_verify_certificate.tooltip':
+    '在使用 HTTPS 执行主动健康检查时，是否检查远程主机的 SSL 证书的有效性。',
 
   'component.upstream.fields.checks.active.req_headers': '请求头',
-  'component.upstream.fields.checks.active.req_headers.tooltip': '额外的请求头，示例：User-Agent: curl/7.29.0',
+  'component.upstream.fields.checks.active.req_headers.tooltip':
+    '额外的请求头，示例：User-Agent: curl/7.29.0',
 
   'component.upstream.fields.checks.active.healthy.interval': '间隔时间',
-  'component.upstream.fields.checks.active.healthy.interval.tooltip': '对健康的上游服务目标节点进行主动健康检查的间隔时间（以秒为单位）。数值为0表示对健康节点不进行主动健康检查。',
+  'component.upstream.fields.checks.active.healthy.interval.tooltip':
+    '对健康的上游服务目标节点进行主动健康检查的间隔时间（以秒为单位）。数值为0表示对健康节点不进行主动健康检查。',
 
   'component.upstream.fields.checks.active.healthy.successes': '成功次数',
-  'component.upstream.fields.checks.active.healthy.successes.tooltip': '主动健康检查的 HTTP 成功次数，若达到此值，表示上游服务目标节点是健康的。',
+  'component.upstream.fields.checks.active.healthy.successes.tooltip':
+    '主动健康检查的 HTTP 成功次数，若达到此值，表示上游服务目标节点是健康的。',
   'component.upstream.fields.checks.active.healthy.successes.required': '请输入成功次数',
 
   'component.upstream.fields.checks.active.healthy.http_statuses': '状态码',
-  'component.upstream.fields.checks.active.healthy.http_statuses.tooltip': 'HTTP 状态码列表，当探针在主动健康检查中返回时，视为健康。',
+  'component.upstream.fields.checks.active.healthy.http_statuses.tooltip':
+    'HTTP 状态码列表，当探针在主动健康检查中返回时，视为健康。',
 
   'component.upstream.fields.checks.active.unhealthy.timeouts': '超时时间',
-  'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip': '活动探针中认为目标不健康的超时次数。',
+  'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip':
+    '活动探针中认为目标不健康的超时次数。',
 
   'component.upstream.fields.checks.active.unhealthy.interval': '间隔时间',
-  'component.upstream.fields.checks.active.unhealthy.interval.tooltip': '对不健康目标的主动健康检查之间的间隔（以秒为单位）。数值为0表示不应该对健康目标进行主动探查。',
+  'component.upstream.fields.checks.active.unhealthy.interval.tooltip':
+    '对不健康目标的主动健康检查之间的间隔（以秒为单位）。数值为0表示不应该对健康目标进行主动探查。',
   'component.upstream.fields.checks.active.unhealthy.required': '请输入间隔时间',
 
   'component.upstream.fields.checks.active.unhealthy.http_failures': 'HTTP 失败次数',
-  'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip': '主动健康检查的 HTTP 失败次数，默认值为0。若达到此值，表示上游服务目标节点是不健康的。',
-  'component.upstream.fields.checks.active.unhealthy.http_failures.required': '请输入 HTTP 失败次数',
+  'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip':
+    '主动健康检查的 HTTP 失败次数，默认值为0。若达到此值，表示上游服务目标节点是不健康的。',
+  'component.upstream.fields.checks.active.unhealthy.http_failures.required':
+    '请输入 HTTP 失败次数',
 
   'component.upstream.fields.checks.active.unhealthy.tcp_failures': 'TCP 失败次数',
-  'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip': '主动探测中 TCP 失败次数超过该值时，认为目标不健康。',
+  'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip':
+    '主动探测中 TCP 失败次数超过该值时，认为目标不健康。',
   'component.upstream.fields.checks.active.unhealthy.tcp_failures.required': '请输入 TCP 失败次数',
 
   'component.upstream.fields.checks.passive.healthy.successes': '成功次数',
-  'component.upstream.fields.checks.passive.healthy.successes.tooltip': '通过被动健康检查观察到的正常代理流量的成功次数。如果达到该值，上游服务目标节点将被视为健康。',
+  'component.upstream.fields.checks.passive.healthy.successes.tooltip':
+    '通过被动健康检查观察到的正常代理流量的成功次数。如果达到该值，上游服务目标节点将被视为健康。',
   'component.upstream.fields.checks.passive.healthy.successes.required': '请输入成功次数',
 
   'component.upstream.fields.checks.passive.unhealthy.timeouts': '超时时间',
-  'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip': '根据被动健康检查的观察，在代理中认为目标不健康的超时次数。',
+  'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip':
+    '根据被动健康检查的观察，在代理中认为目标不健康的超时次数。',
 
   'component.upstream.other.none': '不选择（仅在绑定服务时可用）',
   'component.upstream.other.pass_host-with-multiple-nodes.title': '请检查目标节点配置',
-  'component.upstream.other.pass_host-with-multiple-nodes': '当使用目标节点列表中的主机名或者 IP 时，请确认只有一个目标节点',
-  'component.upstream.other.health-check.passive-only': '启用被动健康检查时，需要同时启用主动健康检查。',
+  'component.upstream.other.pass_host-with-multiple-nodes':
+    '当使用目标节点列表中的主机名或者 IP 时，请确认只有一个目标节点',
+  'component.upstream.other.health-check.passive-only':
+    '启用被动健康检查时，需要同时启用主动健康检查。',
   'component.upstream.other.health-check.invalid': '请检查健康检查配置',
-}
+};
diff --git a/web/src/components/Upstream/service.ts b/web/src/components/Upstream/service.ts
index 168df8b8d7..ce9359cc85 100644
--- a/web/src/components/Upstream/service.ts
+++ b/web/src/components/Upstream/service.ts
@@ -21,43 +21,43 @@ import { formatMessage, request } from 'umi';
 /**
  * Because we have some `custom` field in Upstream Form, like custom.tls/custom.checks.active etc,
  * we need to transform data that doesn't have `custom` field to data contains `custom` field
-*/
+ */
 export const convertToFormData = (originData: UpstreamComponent.ResponseData) => {
   if (originData === undefined) {
     // NOTE: When binding Service without Upstream configuration (None), originData === undefined
-    return undefined
+    return undefined;
   }
 
-  const data = cloneDeep(originData)
-  data.custom = {}
-  data.upstream_id = "Custom"
+  const data = cloneDeep(originData);
+  data.custom = {};
+  data.upstream_id = 'Custom';
 
   if (data.checks) {
-    data.custom.checks = {}
+    data.custom.checks = {};
 
     if (data.checks.active) {
-      data.custom.checks.active = true
+      data.custom.checks.active = true;
     }
 
     if (data.checks.passive) {
-      data.custom.checks.passive = true
+      data.custom.checks.passive = true;
     }
   }
 
   if (data.tls) {
-    data.custom.tls = "enable"
+    data.custom.tls = 'enable';
   }
 
   if (data.id) {
     data.upstream_id = data.id;
   }
 
-  return data
-}
+  return data;
+};
 
 /**
  * Transform Upstream Form data from custom data to API needed data
-*/
+ */
 export const convertToRequestData = (
   formData: UpstreamModule.RequestBody,
 ): UpstreamModule.RequestBody | undefined | { upstream_id: string } => {
@@ -71,15 +71,15 @@ export const convertToRequestData = (
     nodes,
     pass_host,
     upstream_host,
-    upstream_id = "Custom",
-    checks
+    upstream_id = 'Custom',
+    checks,
   } = data;
 
-  if (!["Custom", "None"].includes(upstream_id)) {
+  if (!['Custom', 'None'].includes(upstream_id)) {
     return { upstream_id };
   }
 
-  data = omit(data, "upstream_id") as any
+  data = omit(data, 'upstream_id') as any;
 
   if (type === 'chash') {
     if (!hash_on) {
@@ -97,10 +97,10 @@ export const convertToRequestData = (
 
   if (checks?.passive && !checks.active) {
     notification.error({
-      message: formatMessage({id: 'component.upstream.other.health-check.invalid'}),
-      description: formatMessage({id: 'component.upstream.other.health-check.passive-only'})
-    })
-    return undefined
+      message: formatMessage({ id: 'component.upstream.other.health-check.invalid' }),
+      description: formatMessage({ id: 'component.upstream.other.health-check.passive-only' }),
+    });
+    return undefined;
   }
 
   /**
@@ -119,8 +119,10 @@ export const convertToRequestData = (
 };
 
 export const fetchUpstreamList = () => {
-  return request<Res<ResListData<UpstreamComponent.ResponseData>>>('/upstreams').then(({ data }) => ({
-    data: data.rows.map(row => convertToFormData(row)),
-    total: data.total_size,
-  }));
+  return request<Res<ResListData<UpstreamComponent.ResponseData>>>('/upstreams').then(
+    ({ data }) => ({
+      data: data.rows.map((row) => convertToFormData(row)),
+      total: data.total_size,
+    }),
+  );
 };
diff --git a/web/src/components/Upstream/typings.d.ts b/web/src/components/Upstream/typings.d.ts
index e7b238290d..dc2cee1ec0 100644
--- a/web/src/components/Upstream/typings.d.ts
+++ b/web/src/components/Upstream/typings.d.ts
@@ -17,29 +17,29 @@
 
 /**
  * Schema: https://github.com/apache/apisix/blob/master/apisix/schema_def.lua#L335
-*/
+ */
 declare namespace UpstreamComponent {
-  type ActiveCheck = {}
+  type ActiveCheck = {};
 
-  type PassiveCheck = {}
+  type PassiveCheck = {};
 
   type TLS = {
     client_cert: string;
-    client_key: string
-  }
+    client_key: string;
+  };
 
   type Node = {
     host: string;
     port: number;
     weight: number;
     priority?: number;
-  }
+  };
 
   type Timeout = {
     connect: number;
     send: number;
     read: number;
-  }
+  };
 
   type ResponseData = {
     nodes?: Node[];
@@ -50,7 +50,7 @@ declare namespace UpstreamComponent {
     checks?: {
       active?: ActiveCheck;
       passive?: PassiveCheck;
-    }
+    };
     hash_on?: string;
     key?: string;
     scheme?: string;
@@ -64,5 +64,5 @@ declare namespace UpstreamComponent {
     upstream_id?: string;
     // NOTE: custom field
     custom?: Record<string, any>;
-  }
+  };
 }
diff --git a/web/src/locales/en-US.ts b/web/src/locales/en-US.ts
index 049f03dc9e..fa2bfdd7ca 100644
--- a/web/src/locales/en-US.ts
+++ b/web/src/locales/en-US.ts
@@ -22,11 +22,11 @@ import menu from './en-US/menu';
 import pwa from './en-US/pwa';
 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/setting';
-import other from './en-US/other'
+import other from './en-US/other';
 import Plugin from '../components/Plugin/locales/en-US';
 import PluginFlow from '../components/PluginFlow/locales/en-US';
 import RawDataEditor from '../components/RawDataEditor/locales/en-US';
-import UpstreamComponent from '../components/Upstream/locales/en-US'
+import UpstreamComponent from '../components/Upstream/locales/en-US';
 
 export default {
   'navBar.lang': 'Languages',
@@ -45,5 +45,5 @@ export default {
   ...Plugin,
   ...PluginFlow,
   ...RawDataEditor,
-  ...UpstreamComponent
+  ...UpstreamComponent,
 };
diff --git a/web/src/locales/en-US/component.ts b/web/src/locales/en-US/component.ts
index 71e959b80e..6cf033ab32 100644
--- a/web/src/locales/en-US/component.ts
+++ b/web/src/locales/en-US/component.ts
@@ -69,7 +69,8 @@ export default {
   'component.global.name': 'Name',
   'component.global.updateTime': 'Update Time',
   'component.global.form.itemExtraMessage.nameGloballyUnique': 'Name should be globally unique',
-  'component.global.input.placeholder.description': 'Please enter the description for this route, max 256 characters',
+  'component.global.input.placeholder.description':
+    'Please enter the description for this route, max 256 characters',
   // User component
   'component.user.loginByPassword': 'Username & Password',
   'component.user.login': 'Login',
diff --git a/web/src/locales/en-US/menu.ts b/web/src/locales/en-US/menu.ts
index e7389b969d..6784959ffb 100644
--- a/web/src/locales/en-US/menu.ts
+++ b/web/src/locales/en-US/menu.ts
@@ -73,5 +73,5 @@ export default {
   'menu.setting': 'Settings',
   'menu.serverinfo': 'System Info',
   'menu.advanced-feature': 'Advanced',
-  'menu.more': 'More'
+  'menu.more': 'More',
 };
diff --git a/web/src/locales/en-US/other.ts b/web/src/locales/en-US/other.ts
index 07942ead53..7cb72082bb 100644
--- a/web/src/locales/en-US/other.ts
+++ b/web/src/locales/en-US/other.ts
@@ -16,4 +16,4 @@
  */
 export default {
   'other.global': 'Global',
-}
+};
diff --git a/web/src/locales/zh-CN.ts b/web/src/locales/zh-CN.ts
index 17487518c1..11a8ec086b 100644
--- a/web/src/locales/zh-CN.ts
+++ b/web/src/locales/zh-CN.ts
@@ -20,13 +20,13 @@ import component from './zh-CN/component';
 import globalHeader from './zh-CN/globalHeader';
 import menu from './zh-CN/menu';
 import pwa from './zh-CN/pwa';
-import other from './zh-CN/other'
+import other from './zh-CN/other';
 import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/setting';
 import Plugin from '../components/Plugin/locales/zh-CN';
 import PluginFlow from '../components/PluginFlow/locales/zh-CN';
 import RawDataEditor from '../components/RawDataEditor/locales/zh-CN';
-import UpstreamComponent from '../components/Upstream/locales/zh-CN'
+import UpstreamComponent from '../components/Upstream/locales/zh-CN';
 
 export default {
   'navBar.lang': '语言',
@@ -45,5 +45,5 @@ export default {
   ...Plugin,
   ...PluginFlow,
   ...RawDataEditor,
-  ...UpstreamComponent
+  ...UpstreamComponent,
 };
diff --git a/web/src/locales/zh-CN/menu.ts b/web/src/locales/zh-CN/menu.ts
index d86b7f67c3..4d1ba77c95 100644
--- a/web/src/locales/zh-CN/menu.ts
+++ b/web/src/locales/zh-CN/menu.ts
@@ -70,5 +70,5 @@ export default {
   'menu.setting': '系统设置',
   'menu.serverinfo': '系统信息',
   'menu.advanced-feature': '高级特性',
-  'menu.more': '更多'
+  'menu.more': '更多',
 };
diff --git a/web/src/locales/zh-CN/other.ts b/web/src/locales/zh-CN/other.ts
index 145cb0c8a9..36c99f5b86 100644
--- a/web/src/locales/zh-CN/other.ts
+++ b/web/src/locales/zh-CN/other.ts
@@ -16,4 +16,4 @@
  */
 export default {
   'other.global': '全局',
-}
+};
diff --git a/web/src/pages/Consumer/List.tsx b/web/src/pages/Consumer/List.tsx
index fea131e8cd..a0c9425994 100644
--- a/web/src/pages/Consumer/List.tsx
+++ b/web/src/pages/Consumer/List.tsx
@@ -21,7 +21,7 @@ import type { ProColumns, ActionType } from '@ant-design/pro-table';
 import { Popconfirm, Button, notification } from 'antd';
 import { history, useIntl } from 'umi';
 import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string'
+import querystring from 'query-string';
 import { omit } from 'lodash';
 
 import { DELETE_FIELDS } from '@/constants';
@@ -77,12 +77,16 @@ const Page: React.FC = () => {
           >
             {formatMessage({ id: 'component.global.edit' })}
           </Button>
-          <Button type="primary" style={{ marginRight: 10 }} onClick={() => {
-            setId(record.username);
-            setRawData(omit(record, DELETE_FIELDS));
-            setVisible(true);
-            setEditorMode('update');
-          }}>
+          <Button
+            type="primary"
+            style={{ marginRight: 10 }}
+            onClick={() => {
+              setId(record.username);
+              setRawData(omit(record, DELETE_FIELDS));
+              setVisible(true);
+              setEditorMode('update');
+            }}
+          >
             {formatMessage({ id: 'component.global.view' })}
           </Button>
           <Popconfirm
@@ -111,7 +115,10 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageContainer title={formatMessage({ id: 'page.consumer.list' })} content={formatMessage({ id: "page.consumer.description" })}>
+    <PageContainer
+      title={formatMessage({ id: 'page.consumer.list' })}
+      content={formatMessage({ id: 'page.consumer.description' })}
+    >
       <ProTable<ConsumerModule.ResEntity>
         actionRef={ref}
         columns={columns}
@@ -131,11 +138,14 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <Button type="primary" onClick={() => {
-            setVisible(true);
-            setEditorMode('create');
-            setRawData({});
-          }}>
+          <Button
+            type="primary"
+            onClick={() => {
+              setVisible(true);
+              setEditorMode('create');
+              setRawData({});
+            }}
+          >
             <PlusOutlined />
             {formatMessage({ id: 'component.global.data.editor' })}
           </Button>,
@@ -143,16 +153,17 @@ const Page: React.FC = () => {
       />
       <RawDataEditor
         visible={visible}
-        type='consumer'
+        type="consumer"
         readonly={false}
         data={rawData}
-        onClose={() => { setVisible(false) }}
+        onClose={() => {
+          setVisible(false);
+        }}
         onSubmit={(data: any) => {
-          (editorMode === 'create' ? create(data) : update(id, data))
-            .then(() => {
-              setVisible(false);
-              ref.current?.reload();
-            })
+          (editorMode === 'create' ? create(data) : update(id, data)).then(() => {
+            setVisible(false);
+            ref.current?.reload();
+          });
         }}
       />
     </PageContainer>
diff --git a/web/src/pages/Consumer/locales/en-US.ts b/web/src/pages/Consumer/locales/en-US.ts
index cc2cf0c20e..9fabb8928b 100644
--- a/web/src/pages/Consumer/locales/en-US.ts
+++ b/web/src/pages/Consumer/locales/en-US.ts
@@ -21,10 +21,11 @@ export default {
   'page.consumer.notification.warning.enableAuthenticationPlugin':
     'Please enable one authentication plugin',
   'page.consumer.username': 'Name',
-  'page.consumer.username.required': 'Please enter the Consumer\'s name',
+  'page.consumer.username.required': "Please enter the Consumer's name",
   'page.consumer.updateTime': 'Update Time',
   'page.consumer.list': 'Consumer List',
-  'page.consumer.description': 'Consumers are the consumers of Routes, e.g developers, end users, API calls, etc. When creating a consumer, you need to bind at least one Authentication plugin.',
+  'page.consumer.description':
+    'Consumers are the consumers of Routes, e.g developers, end users, API calls, etc. When creating a consumer, you need to bind at least one Authentication plugin.',
   'page.consumer.create': 'Create Consumer',
   'page.consumer.configure': 'Configure Consumer',
 };
diff --git a/web/src/pages/Consumer/locales/zh-CN.ts b/web/src/pages/Consumer/locales/zh-CN.ts
index 3c48fc1546..0218657aec 100644
--- a/web/src/pages/Consumer/locales/zh-CN.ts
+++ b/web/src/pages/Consumer/locales/zh-CN.ts
@@ -23,7 +23,8 @@ export default {
   'page.consumer.username.required': '请输入消费者名称',
   'page.consumer.updateTime': '更新时间',
   'page.consumer.list': '消费者列表',
-  'page.consumer.description': '消费者是路由的消费方，形式包括开发者、最终用户、API 调用等。创建消费者时，需绑定至少一个认证类插件。',
+  'page.consumer.description':
+    '消费者是路由的消费方，形式包括开发者、最终用户、API 调用等。创建消费者时，需绑定至少一个认证类插件。',
   'page.consumer.create': '创建消费者',
   'page.consumer.configure': '配置消费者',
 };
diff --git a/web/src/pages/PluginTemplate/Create.tsx b/web/src/pages/PluginTemplate/Create.tsx
index 8bf3824978..1d15e210b3 100644
--- a/web/src/pages/PluginTemplate/Create.tsx
+++ b/web/src/pages/PluginTemplate/Create.tsx
@@ -25,7 +25,7 @@ import { transformLableValueToKeyValue } from '@/helpers';
 
 import Step1 from './components/Step1';
 import Preview from './components/Preview';
-import { fetchItem, create, update, } from './service';
+import { fetchItem, create, update } from './service';
 
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
@@ -39,8 +39,9 @@ const Page: React.FC = (props) => {
       fetchItem(id).then(({ data }) => {
         const { desc, labels = {}, ...rest } = data;
         form1.setFieldsValue({
-          id, desc, custom_normal_labels: Object.keys(labels)
-            .map((key) => `${key}:${labels[key]}`)
+          id,
+          desc,
+          custom_normal_labels: Object.keys(labels).map((key) => `${key}:${labels[key]}`),
         });
         setPlugins(rest.plugins);
       });
@@ -50,21 +51,24 @@ const Page: React.FC = (props) => {
   const onSubmit = () => {
     const { desc, custom_normal_labels } = form1.getFieldsValue();
     const labels: Record<string, string> = {};
-    transformLableValueToKeyValue(custom_normal_labels || []).forEach(({ labelKey, labelValue }) => {
-      labels[labelKey] = labelValue;
-    });
+    transformLableValueToKeyValue(custom_normal_labels || []).forEach(
+      ({ labelKey, labelValue }) => {
+        labels[labelKey] = labelValue;
+      },
+    );
     const data = { desc, labels, plugins } as PluginTemplateModule.Entity;
 
     const { id } = (props as any).match.params;
     (id ? update(id, data) : create(data))
       .then(() => {
         notification.success({
-          message: `${id
-            ? formatMessage({ id: 'component.global.edit' })
-            : formatMessage({ id: 'component.global.create' })
-            } ${formatMessage({ id: 'menu.pluginTemplate' })} ${formatMessage({
-              id: 'component.status.success',
-            })}`,
+          message: `${
+            id
+              ? formatMessage({ id: 'component.global.edit' })
+              : formatMessage({ id: 'component.global.create' })
+          } ${formatMessage({ id: 'menu.pluginTemplate' })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,
         });
         history.push('/plugin-template/list');
       })
@@ -90,10 +94,11 @@ const Page: React.FC = (props) => {
   return (
     <>
       <PageContainer
-        title={`${(props as any).match.params.id
-          ? formatMessage({ id: 'component.global.edit' })
-          : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.pluginTemplate' })}`}
+        title={`${
+          (props as any).match.params.id
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        } ${formatMessage({ id: 'menu.pluginTemplate' })}`}
       >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>
@@ -113,7 +118,7 @@ const Page: React.FC = (props) => {
               onChange={setPlugins}
               referPage="route"
               schemaType="route"
-             />
+            />
           )}
           {step === 3 && <Preview form1={form1} plugins={plugins} />}
         </Card>
diff --git a/web/src/pages/PluginTemplate/List.tsx b/web/src/pages/PluginTemplate/List.tsx
index 69f92d1284..14cc247ad5 100644
--- a/web/src/pages/PluginTemplate/List.tsx
+++ b/web/src/pages/PluginTemplate/List.tsx
@@ -21,7 +21,7 @@ import ProTable from '@ant-design/pro-table';
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import { Button, notification, Popconfirm, Select, Space, Tag } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string'
+import querystring from 'query-string';
 
 import { fetchList, remove, fetchLabelList } from './service';
 
@@ -66,13 +66,13 @@ const Page: React.FC = () => {
       title: formatMessage({ id: 'component.global.labels' }),
       dataIndex: 'labels',
       render: (_, record) => {
-        return Object.keys(record.labels || {})
-          .map((item) => (
-            <Tag key={Math.random().toString(36).slice(2)}>
-              {item}:{record.labels[item]}
-            </Tag>
-          ));
-      }, renderFormItem: (_, { type }) => {
+        return Object.keys(record.labels || {}).map((item) => (
+          <Tag key={Math.random().toString(36).slice(2)}>
+            {item}:{record.labels[item]}
+          </Tag>
+        ));
+      },
+      renderFormItem: (_, { type }) => {
         if (type === 'form') {
           return null;
         }
@@ -90,18 +90,20 @@ const Page: React.FC = () => {
               );
             }}
           >
-            {Object.keys(labelList)
-              .map((key) => {
-                return (
-                  <Select.OptGroup label={key} key={Math.random().toString(36).slice(2)}>
-                    {(labelList[key] || []).map((value: string) => (
-                      <Select.Option key={Math.random().toString(36).slice(2)} value={`${key}:${value}`}>
-                        {value}
-                      </Select.Option>
-                    ))}
-                  </Select.OptGroup>
-                );
-              })}
+            {Object.keys(labelList).map((key) => {
+              return (
+                <Select.OptGroup label={key} key={Math.random().toString(36).slice(2)}>
+                  {(labelList[key] || []).map((value: string) => (
+                    <Select.Option
+                      key={Math.random().toString(36).slice(2)}
+                      value={`${key}:${value}`}
+                    >
+                      {value}
+                    </Select.Option>
+                  ))}
+                </Select.OptGroup>
+              );
+            })}
           </Select>
         );
       },
@@ -115,7 +117,7 @@ const Page: React.FC = () => {
             <Button
               type="primary"
               onClick={() => {
-                history.push(`/plugin-template/${record.id}/edit`)
+                history.push(`/plugin-template/${record.id}/edit`);
               }}
               style={{ marginRight: 10 }}
             >
diff --git a/web/src/pages/PluginTemplate/components/Step1.tsx b/web/src/pages/PluginTemplate/components/Step1.tsx
index 6e46b775d2..37d5f04c38 100644
--- a/web/src/pages/PluginTemplate/components/Step1.tsx
+++ b/web/src/pages/PluginTemplate/components/Step1.tsx
@@ -73,13 +73,18 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
               const labels = form.getFieldValue(field) || [];
               return (
                 <LabelsDrawer
-                  title={formatMessage({ id: "component.label-manager" })}
+                  title={formatMessage({ id: 'component.label-manager' })}
                   actionName={field}
                   dataSource={labels}
                   disabled={disabled || false}
                   onChange={({ data }) => {
-                    const handledLabels = [...new Set([...(form.getFieldValue('custom_normal_labels') || []), ...data])];
-                    form.setFieldsValue({ ...form.getFieldsValue(), custom_normal_labels: handledLabels });
+                    const handledLabels = [
+                      ...new Set([...(form.getFieldValue('custom_normal_labels') || []), ...data]),
+                    ];
+                    form.setFieldsValue({
+                      ...form.getFieldsValue(),
+                      custom_normal_labels: handledLabels,
+                    });
                   }}
                   onClose={() => setVisible(false)}
                   filterList={[]}
diff --git a/web/src/pages/PluginTemplate/service.ts b/web/src/pages/PluginTemplate/service.ts
index edd449d325..c4b5e58204 100644
--- a/web/src/pages/PluginTemplate/service.ts
+++ b/web/src/pages/PluginTemplate/service.ts
@@ -32,9 +32,9 @@ export const fetchList = ({ current = 1, pageSize = 10, ...res }) => {
     return {
       data: data.rows,
       total: data.total_size,
-    }
+    };
   });
-}
+};
 
 export const remove = (rid: string) => request(`/plugin_configs/${rid}`, { method: 'DELETE' });
 
@@ -54,6 +54,4 @@ export const update = (id: string, data: PluginTemplateModule.Entity) =>
   });
 
 export const fetchLabelList = () =>
-  request('/labels/plugin_config').then(
-    ({ data }) => transformLabelList(data.rows) as LabelList,
-  );
+  request('/labels/plugin_config').then(({ data }) => transformLabelList(data.rows) as LabelList);
diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index 770cc09477..fe7458ca05 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -71,9 +71,9 @@ const Page: React.FC<Props> = (props) => {
 
   const setupRoute = (rid: number) =>
     fetchItem(rid).then((data) => {
-      const routeData = {...data};
+      const routeData = { ...data };
       if (props.route.path.indexOf('duplicate') !== -1) {
-        routeData.form1Data.name = "";
+        routeData.form1Data.name = '';
       }
       form1.setFieldsValue(routeData.form1Data);
       setAdvancedMatchingRules(routeData.advancedMatchingRules);
@@ -98,7 +98,7 @@ const Page: React.FC<Props> = (props) => {
 
   const getProxyRewriteEnable = () => {
     return !isEmpty(transformProxyRewrite2Plugin(form1.getFieldValue('proxyRewrite')));
-  }
+  };
 
   const renderStepList = () => {
     if (step === 1) {
@@ -194,37 +194,37 @@ const Page: React.FC<Props> = (props) => {
   };
 
   const savePlugins = (): boolean => {
-    const isScriptConfigured = FlowGraph.graph?.toJSON().cells.length
-    const isPluginsConfigured = Object.keys(step3Data.plugins || {}).length
+    const isScriptConfigured = FlowGraph.graph?.toJSON().cells.length;
+    const isPluginsConfigured = Object.keys(step3Data.plugins || {}).length;
 
     if (step === 3 && isScriptConfigured && isPluginsConfigured) {
       Modal.confirm({
         title: formatMessage({ id: 'component.plugin-flow.text.both-modes-exist.title' }),
         content: formatMessage({ id: 'component.plugin-flow.text.both-modes-exist' }),
         onOk: () => {
-          const data = FlowGraph.convertToData()
+          const data = FlowGraph.convertToData();
           if (data) {
             setStep3Data({ script: data, plugins: {} });
-            setStep(4)
+            setStep(4);
           }
         },
         okText: formatMessage({ id: 'component.global.confirm' }),
         cancelText: formatMessage({ id: 'component.global.cancel' }),
-      })
-      return false
+      });
+      return false;
     }
 
     if (isScriptConfigured) {
-      const data = FlowGraph.convertToData()
+      const data = FlowGraph.convertToData();
       if (!data) {
-        return false
+        return false;
       }
       setStep3Data({ script: data, plugins: {} });
     } else {
       setStep3Data({ ...step3Data, script: {} });
     }
-    return true
-  }
+    return true;
+  };
 
   const onStepChange = (nextStep: number) => {
     const onUpdateOrCreate = () => {
@@ -258,13 +258,16 @@ const Page: React.FC<Props> = (props) => {
             redirectOption === 'forceHttps' && filterHosts.length !== 0
               ? checkHostWithSSL(hosts)
               : Promise.resolve(),
-            checkUniqueName(value.name, props.route.path.indexOf('edit') > 0 ? (props as any).match.params.rid : ''),
+            checkUniqueName(
+              value.name,
+              props.route.path.indexOf('edit') > 0 ? (props as any).match.params.rid : '',
+            ),
           ]).then(() => {
             setStep(nextStep);
           });
         });
       } else {
-        setStep(nextStep)
+        setStep(nextStep);
       }
       return;
     }
@@ -281,9 +284,9 @@ const Page: React.FC<Props> = (props) => {
     }
 
     if (nextStep === 4) {
-      const result = savePlugins()
+      const result = savePlugins();
       if (!result) {
-        return
+        return;
       }
       setStep(nextStep);
     }
@@ -296,8 +299,9 @@ const Page: React.FC<Props> = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${formatMessage({ id: `component.global.${props.route.path.split('/').slice(-1)[0]}` })
-          } ${formatMessage({ id: 'menu.routes' })}`}
+        title={`${formatMessage({
+          id: `component.global.${props.route.path.split('/').slice(-1)[0]}`,
+        })} ${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 23544fc077..23ea82ec9c 100644
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -40,7 +40,7 @@ import { js_beautify } from 'js-beautify';
 import yaml from 'js-yaml';
 import moment from 'moment';
 import { saveAs } from 'file-saver';
-import querystring from 'query-string'
+import querystring from 'query-string';
 import { omit } from 'lodash';
 
 import { DELETE_FIELDS } from '@/constants';
@@ -187,43 +187,47 @@ const Page: React.FC = () => {
         name: formatMessage({ id: 'page.route.pluginTemplateConfig' }),
         icon: <PlusOutlined />,
         onClick: () => {
-          history.push('/plugin-template/list')
-        }
-      }, {
+          history.push('/plugin-template/list');
+        },
+      },
+      {
         name: formatMessage({ id: 'component.global.data.editor' }),
         icon: <PlusOutlined />,
         onClick: () => {
           setVisible(true);
           setEditorMode('create');
           setRawData({});
-        }
-      }, {
+        },
+      },
+      {
         name: formatMessage({ id: 'page.route.button.importOpenApi' }),
         icon: <ImportOutlined />,
         onClick: () => {
           setUploadFileList([]);
           setShowImportModal(true);
-        }
-      }
-    ]
+        },
+      },
+    ];
 
     return (
-      <Dropdown overlay={<Menu>
-        {
-          tools.map(item => (
-            <Menu.Item key={item.name} onClick={item.onClick}>
-              {item.icon}
-              {item.name}
-            </Menu.Item>
-          ))
+      <Dropdown
+        overlay={
+          <Menu>
+            {tools.map((item) => (
+              <Menu.Item key={item.name} onClick={item.onClick}>
+                {item.icon}
+                {item.name}
+              </Menu.Item>
+            ))}
+          </Menu>
         }
-      </Menu>}>
+      >
         <Button type="dashed">
-          <DownOutlined /> {formatMessage({ id: "menu.advanced-feature" })}
+          <DownOutlined /> {formatMessage({ id: 'menu.advanced-feature' })}
         </Button>
       </Dropdown>
-    )
-  }
+    );
+  };
 
   const RecordActionDropdown: React.FC<{ record: any }> = ({ record }) => {
     const tools: {
@@ -231,65 +235,68 @@ const Page: React.FC = () => {
       onClick: () => void;
       icon?: ReactNode;
     }[] = [
-        {
-          name: formatMessage({ id: 'component.global.view' }),
-          onClick: () => {
-            setId(record.id);
-            setRawData(omit(record, DELETE_FIELDS));
-            setVisible(true);
-            setEditorMode('update');
-          }
-        }, {
-          name: formatMessage({ id: 'component.global.duplicate' }),
-          onClick: () => {
-            history.push(`/routes/${record.id}/duplicate`)
-          }
-        }, {
-          name: formatMessage({ id: 'component.global.delete' }),
-          onClick: () => {
-            Modal.confirm({
-              type: "warning",
-              title: formatMessage({ id: 'component.global.popconfirm.title.delete' }),
-              content: (
-                <>
-                  {formatMessage({ id: 'component.global.name' })} - {record.name}<br />
-                  ID - {record.id}
-                </>
-              ),
-              onOk: () => {
-                remove(record.id!).then(() => {
-                  handleTableActionSuccessResponse(
-                    `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
-                      id: 'menu.routes',
-                    })} ${formatMessage({ id: 'component.status.success' })}`,
-                  );
-                });
-              }
-            })
-          }
-        }
-      ]
+      {
+        name: formatMessage({ id: 'component.global.view' }),
+        onClick: () => {
+          setId(record.id);
+          setRawData(omit(record, DELETE_FIELDS));
+          setVisible(true);
+          setEditorMode('update');
+        },
+      },
+      {
+        name: formatMessage({ id: 'component.global.duplicate' }),
+        onClick: () => {
+          history.push(`/routes/${record.id}/duplicate`);
+        },
+      },
+      {
+        name: formatMessage({ id: 'component.global.delete' }),
+        onClick: () => {
+          Modal.confirm({
+            type: 'warning',
+            title: formatMessage({ id: 'component.global.popconfirm.title.delete' }),
+            content: (
+              <>
+                {formatMessage({ id: 'component.global.name' })} - {record.name}
+                <br />
+                ID - {record.id}
+              </>
+            ),
+            onOk: () => {
+              remove(record.id!).then(() => {
+                handleTableActionSuccessResponse(
+                  `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
+                    id: 'menu.routes',
+                  })} ${formatMessage({ id: 'component.status.success' })}`,
+                );
+              });
+            },
+          });
+        },
+      },
+    ];
 
     return (
-      <Dropdown overlay={
-        <Menu>
-          {
-            tools.map(item => (
+      <Dropdown
+        overlay={
+          <Menu>
+            {tools.map((item) => (
               <Menu.Item key={item.name} onClick={item.onClick}>
                 {item.icon && item.icon}
                 {item.name}
               </Menu.Item>
-            ))
-          }
-        </Menu>
-      }>
+            ))}
+          </Menu>
+        }
+      >
         <Button type="dashed">
           <DownOutlined />
-          {formatMessage({ id: "menu.more" })}
+          {formatMessage({ id: 'menu.more' })}
         </Button>
       </Dropdown>
-    )
-  }
+    );
+  };
 
   const ListFooter: React.FC = () => {
     return (
@@ -465,9 +472,9 @@ const Page: React.FC = () => {
         return (
           <Select
             style={{ width: '100%' }}
-            placeholder={
-              `${formatMessage({ id: 'page.route.unpublished' })}/${formatMessage({ id: 'page.route.published' })}`
-            }
+            placeholder={`${formatMessage({ id: 'page.route.unpublished' })}/${formatMessage({
+              id: 'page.route.published',
+            })}`}
             allowClear
           >
             <Option key={RouteStatus.Offline} value={RouteStatus.Offline}>
@@ -532,7 +539,10 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'page.route.list' })} content={formatMessage({ id: 'page.route.list.description' })}>
+    <PageHeaderWrapper
+      title={formatMessage({ id: 'page.route.list' })}
+      content={formatMessage({ id: 'page.route.list.description' })}
+    >
       <ProTable<RouteModule.ResponseBody>
         actionRef={ref}
         rowKey="id"
@@ -552,7 +562,7 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <ListToolbar />
+          <ListToolbar />,
         ]}
         rowSelection={rowSelection}
         footer={() => <ListFooter />}
@@ -567,16 +577,19 @@ const Page: React.FC = () => {
       />
       <RawDataEditor
         visible={visible}
-        type='route'
+        type="route"
         readonly={false}
         data={rawData}
-        onClose={() => { setVisible(false) }}
+        onClose={() => {
+          setVisible(false);
+        }}
         onSubmit={(data: any) => {
-          (editorMode === 'create' ? create(data, 'RawData') : update(id, data, 'RawData'))
-            .then(() => {
+          (editorMode === 'create' ? create(data, 'RawData') : update(id, data, 'RawData')).then(
+            () => {
               setVisible(false);
               ref.current?.reload();
-            })
+            },
+          );
         }}
       />
       <Modal
diff --git a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
index fb49fbdf1b..0c327df09c 100644
--- a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
+++ b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
@@ -59,7 +59,15 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, upstreamRef, ...
           <h2 style={style}>
             {formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}
           </h2>
-          {Boolean(Object.keys(plugins).length !== 0 || plugin_config_id !== '') && <PluginPage referPage='route' initialData={plugins} plugin_config_id={plugin_config_id} showSelector readonly />}
+          {Boolean(Object.keys(plugins).length !== 0 || plugin_config_id !== '') && (
+            <PluginPage
+              referPage="route"
+              initialData={plugins}
+              plugin_config_id={plugin_config_id}
+              showSelector
+              readonly
+            />
+          )}
           {Boolean(Object.keys(script || {}).length !== 0) && (
             <PluginFlow chart={script.chart} readonly />
           )}
diff --git a/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx b/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx
index 602a1fe2cc..11c971f05e 100644
--- a/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx
+++ b/web/src/pages/Route/components/DebugViews/DebugDrawView.tsx
@@ -20,11 +20,11 @@ import { useIntl } from 'umi';
 import queryString from 'query-string';
 import Base64 from 'base-64';
 import urlRegexSafe from 'url-regex-safe';
-import CopyToClipboard from "react-copy-to-clipboard";
-import { CopyOutlined } from "@ant-design/icons";
-import type * as monacoEditor from "monaco-editor";
-import type { Monaco } from "@monaco-editor/react";
-import Editor from "@monaco-editor/react";
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { CopyOutlined } from '@ant-design/icons';
+import type * as monacoEditor from 'monaco-editor';
+import type { Monaco } from '@monaco-editor/react';
+import Editor from '@monaco-editor/react';
 
 import PanelSection from '@/components/PanelSection';
 
@@ -56,18 +56,16 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
   const [formDataForm] = Form.useForm();
   const [authForm] = Form.useForm();
   const [headerForm] = Form.useForm();
-  const [response, setResponse] = useState<RouteModule.debugResponse | null>()
+  const [response, setResponse] = useState<RouteModule.debugResponse | null>();
   const [loading, setLoading] = useState(false);
   const [body, setBody] = useState('');
-  const [height,setHeight] = useState(50);
+  const [height, setHeight] = useState(50);
   const [bodyType, setBodyType] = useState('none');
   const methodWithoutBody = ['GET', 'HEAD'];
   const [responseBodyMode, setResponseBodyMode] = useState(
     DEBUG_RESPONSE_BODY_MODE_SUPPORTED[0].mode,
   );
-  const [bodyMode, setBodyCodeMode] = useState(
-    DEBUG_BODY_MODE_SUPPORTED[0].mode,
-  );
+  const [bodyMode, setBodyCodeMode] = useState(DEBUG_BODY_MODE_SUPPORTED[0].mode);
 
   enum DebugBodyType {
     None = 0,
@@ -100,7 +98,8 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
     switch (bodyType) {
       case DEBUG_BODY_TYPE_SUPPORTED[DebugBodyType.FormUrlencoded]: {
         let transformFormUrlencoded: string[] = [];
-        const FormUrlencodedData: RouteModule.debugRequestParamsFormData[] = urlencodedForm.getFieldsValue().params;
+        const FormUrlencodedData: RouteModule.debugRequestParamsFormData[] = urlencodedForm.getFieldsValue()
+          .params;
         transformFormUrlencoded = (FormUrlencodedData || [])
           .filter((data) => data && data.check)
           .map((data) => {
@@ -110,9 +109,9 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
         return {
           bodyFormData: transformFormUrlencoded.join('&'),
           header: {
-            'Content-type': ['application/x-www-form-urlencoded;charset=UTF-8']
-          }
-        }
+            'Content-type': ['application/x-www-form-urlencoded;charset=UTF-8'],
+          },
+        };
       }
       case DEBUG_BODY_TYPE_SUPPORTED[DebugBodyType.RawInput]: {
         let contentType = [''];
@@ -126,32 +125,34 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
           case DEBUG_BODY_MODE_SUPPORTED[2].mode:
             contentType = ['application/xml;charset=UTF-8'];
             break;
-          default: break;
+          default:
+            break;
         }
 
         return {
           bodyFormData: body,
           header: {
-            'Content-type': contentType
-          }
-        }
+            'Content-type': contentType,
+          },
+        };
       }
       case DEBUG_BODY_TYPE_SUPPORTED[DebugBodyType.FormData]: {
         const transformFormData = new FormData();
-        const formDataData: RouteModule.debugRequestParamsFormData[] = formDataForm.getFieldsValue().params;
+        const formDataData: RouteModule.debugRequestParamsFormData[] = formDataForm.getFieldsValue()
+          .params;
 
         (formDataData || [])
           .filter((data) => data && data.check)
           .forEach((data) => {
             if (data.type === DebugBodyFormDataValueType.File) {
-              transformFormData.append(data.key, data.value.originFileObj)
+              transformFormData.append(data.key, data.value.originFileObj);
             } else {
-              transformFormData.append(data.key, data.value)
+              transformFormData.append(data.key, data.value);
             }
-          })
+          });
         return {
           bodyFormData: transformFormData,
-        }
+        };
       }
       case DEBUG_BODY_TYPE_SUPPORTED[DebugBodyType.None]:
       default:
@@ -177,7 +178,11 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
     return transformData;
   };
 
-  const transformAuthFormData = (formData: RouteModule.authData, userHeaderData: any, formHeaderData: any) => {
+  const transformAuthFormData = (
+    formData: RouteModule.authData,
+    userHeaderData: any,
+    formHeaderData: any,
+  ) => {
     const { authType } = formData;
 
     switch (authType) {
@@ -206,7 +211,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
     return {
       ...formHeaderData,
       ...userHeaderData,
-    }
+    };
   };
 
   const handleDebug = (url: string) => {
@@ -223,35 +228,45 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
     const pureHeaderFormData = transformHeaderAndQueryParamsFormData(
       headerForm.getFieldsValue().params,
     );
-    const headerFormData = transformAuthFormData(authForm.getFieldsValue(), pureHeaderFormData, bodyFormHeader);
-    const urlQueryString = url.indexOf('?') === -1 ? `?${queryString.stringify(queryFormData)}` : `&${queryString.stringify(queryFormData)}`
+    const headerFormData = transformAuthFormData(
+      authForm.getFieldsValue(),
+      pureHeaderFormData,
+      bodyFormHeader,
+    );
+    const urlQueryString =
+      url.indexOf('?') === -1
+        ? `?${queryString.stringify(queryFormData)}`
+        : `&${queryString.stringify(queryFormData)}`;
 
     setLoading(true);
     // TODO: grpc and websocket
-    debugRoute({
-      online_debug_header_params: JSON.stringify(headerFormData),
-      online_debug_url: `${requestProtocol}://${url}${urlQueryString}`,
-      online_debug_request_protocol: requestProtocol,
-      online_debug_method: httpMethod,
-    }, bodyFormData)
+    debugRoute(
+      {
+        online_debug_header_params: JSON.stringify(headerFormData),
+        online_debug_url: `${requestProtocol}://${url}${urlQueryString}`,
+        online_debug_request_protocol: requestProtocol,
+        online_debug_method: httpMethod,
+      },
+      bodyFormData,
+    )
       .then((req) => {
         setLoading(false);
         const resp: RouteModule.debugResponse = req.data;
-        if (typeof (resp.data) !== 'string') {
+        if (typeof resp.data !== 'string') {
           resp.data = JSON.stringify(resp.data, null, 2);
         }
         setResponse(resp);
-        const contentType = resp.header["Content-Type"];
+        const contentType = resp.header['Content-Type'];
         if (contentType == null || contentType.length !== 1) {
-          setResponseBodyMode("TEXT");
-        } else if (contentType[0].toLowerCase().indexOf("json") !== -1) {
-          setResponseBodyMode("JSON");
-        } else if (contentType[0].toLowerCase().indexOf("xml") !== -1) {
-          setResponseBodyMode("XML");
-        } else if (contentType[0].toLowerCase().indexOf("html") !== -1) {
-          setResponseBodyMode("HTML");
+          setResponseBodyMode('TEXT');
+        } else if (contentType[0].toLowerCase().indexOf('json') !== -1) {
+          setResponseBodyMode('JSON');
+        } else if (contentType[0].toLowerCase().indexOf('xml') !== -1) {
+          setResponseBodyMode('XML');
+        } else if (contentType[0].toLowerCase().indexOf('html') !== -1) {
+          setResponseBodyMode('HTML');
         } else {
-          setResponseBodyMode("TEXT");
+          setResponseBodyMode('TEXT');
         }
       })
       .catch(() => {
@@ -268,7 +283,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
       const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
       const lineCount = editor.getModel()?.getLineCount() || 1;
       setHeight(editor.getTopForLineNumber(lineCount + 1) + lineHeight + padding);
-    })
+    });
   };
 
   return (
@@ -282,7 +297,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
         props.onClose();
       }}
       className={styles.routeDebugDraw}
-      data-cy='debug-draw'
+      data-cy="debug-draw"
     >
       <Card bordered={false}>
         <Input.Group compact>
@@ -294,7 +309,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
               setShowBodyTab(!(methodWithoutBody.indexOf(value) > -1));
             }}
             size="large"
-            data-cy='debug-method'
+            data-cy="debug-method"
           >
             {HTTP_METHOD_OPTION_LIST.map((method) => {
               return (
@@ -311,7 +326,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
               setRequestProtocol(value);
             }}
             size="large"
-            data-cy='debug-protocol'
+            data-cy="debug-protocol"
           >
             {PROTOCOL_SUPPORTED.map((protocol) => {
               return (
@@ -343,17 +358,33 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
           title={formatMessage({ id: 'page.route.PanelSection.title.defineRequestParams' })}
         >
           <Tabs>
-            <TabPane data-cy='query' tab={formatMessage({ id: 'page.route.TabPane.queryParams' })} key="query">
-              <DebugParamsView form={queryForm} name='queryForm' />
+            <TabPane
+              data-cy="query"
+              tab={formatMessage({ id: 'page.route.TabPane.queryParams' })}
+              key="query"
+            >
+              <DebugParamsView form={queryForm} name="queryForm" />
             </TabPane>
-            <TabPane data-cy='auth' tab={formatMessage({ id: 'page.route.TabPane.authentication' })} key="auth">
+            <TabPane
+              data-cy="auth"
+              tab={formatMessage({ id: 'page.route.TabPane.authentication' })}
+              key="auth"
+            >
               <AuthenticationView form={authForm} />
             </TabPane>
-            <TabPane data-cy='header' tab={formatMessage({ id: 'page.route.TabPane.headerParams' })} key="header">
-              <DebugParamsView form={headerForm} name='headerForm' inputType="header" />
+            <TabPane
+              data-cy="header"
+              tab={formatMessage({ id: 'page.route.TabPane.headerParams' })}
+              key="header"
+            >
+              <DebugParamsView form={headerForm} name="headerForm" inputType="header" />
             </TabPane>
             {showBodyTab && (
-              <TabPane data-cy='body' tab={formatMessage({ id: 'page.route.TabPane.bodyParams' })} key="body">
+              <TabPane
+                data-cy="body"
+                tab={formatMessage({ id: 'page.route.TabPane.bodyParams' })}
+                key="body"
+              >
                 <Radio.Group
                   onChange={(e) => {
                     setBodyType(e.target.value);
@@ -384,7 +415,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
                 )}
                 <div style={{ marginTop: 16 }}>
                   {bodyType === DEBUG_BODY_TYPE_SUPPORTED[DebugBodyType.FormUrlencoded] && (
-                    <DebugParamsView form={urlencodedForm} name='urlencodedForm' />
+                    <DebugParamsView form={urlencodedForm} name="urlencodedForm" />
                   )}
 
                   {bodyType === DEBUG_BODY_TYPE_SUPPORTED[DebugBodyType.FormData] && (
@@ -397,8 +428,8 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
                         <Editor
                           value={body}
                           language={bodyMode.toLowerCase()}
-                          onChange={(text)=>{
-                            if (text){
+                          onChange={(text) => {
+                            if (text) {
                               setBody(text);
                             } else {
                               setBody('');
@@ -406,15 +437,17 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
                           }}
                           height={250}
                           beforeMount={(monaco) => {
-                            monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({validate: false});
+                            monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
+                              validate: false,
+                            });
                           }}
                           options={{
-                            scrollbar:{
+                            scrollbar: {
                               vertical: 'hidden',
                               horizontal: 'hidden',
                             },
-                            wordWrap: "on",
-                            minimap: {enabled: false},
+                            wordWrap: 'on',
+                            minimap: { enabled: false },
                           }}
                         />
                       </Form.Item>
@@ -427,22 +460,29 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
         </PanelSection>
         <PanelSection title={formatMessage({ id: 'page.route.PanelSection.title.responseResult' })}>
           <Spin tip="Loading..." spinning={loading}>
-            <Tabs tabBarExtraContent={
-              response ? response.message : formatMessage({ id: 'page.route.debug.showResultAfterSendRequest' })
-            }>
+            <Tabs
+              tabBarExtraContent={
+                response
+                  ? response.message
+                  : formatMessage({ id: 'page.route.debug.showResultAfterSendRequest' })
+              }
+            >
               <TabPane tab={formatMessage({ id: 'page.route.TabPane.response' })} key="response">
                 <Select
                   disabled={response == null}
                   value={responseBodyMode}
-                  onSelect={(mode) => setResponseBodyMode(mode as string)}>
-                  {
-                    DEBUG_RESPONSE_BODY_MODE_SUPPORTED.map(mode => {
-                      return <Option value={mode.mode} key={mode.mode}>{mode.name}</Option>
-                    })
-                  }
+                  onSelect={(mode) => setResponseBodyMode(mode as string)}
+                >
+                  {DEBUG_RESPONSE_BODY_MODE_SUPPORTED.map((mode) => {
+                    return (
+                      <Option value={mode.mode} key={mode.mode}>
+                        {mode.name}
+                      </Option>
+                    );
+                  })}
                 </Select>
                 <CopyToClipboard
-                  text={response ? response.data : ""}
+                  text={response ? response.data : ''}
                   onCopy={(_: string, result: boolean) => {
                     if (!result) {
                       notification.error({
@@ -453,41 +493,47 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
                     notification.success({
                       message: formatMessage({ id: 'component.global.copySuccess' }),
                     });
-                  }}>
+                  }}
+                >
                   <Button type="text" disabled={!response}>
                     <CopyOutlined />
                   </Button>
                 </CopyToClipboard>
-                <div id='monaco-response' style={{ marginTop: 16 }}>
+                <div id="monaco-response" style={{ marginTop: 16 }}>
                   <Editor
-                    value={response ? response.data : ""}
+                    value={response ? response.data : ''}
                     height={height}
                     language={responseBodyMode.toLowerCase()}
                     onMount={handleEditorMount}
                     beforeMount={(monaco) => {
-                      monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({validate: false});
+                      monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
+                        validate: false,
+                      });
                     }}
                     options={{
-                      automaticLayout:true,
-                      scrollbar:{
+                      automaticLayout: true,
+                      scrollbar: {
                         vertical: 'hidden',
                         horizontal: 'hidden',
                       },
-                      wordWrap: "on",
-                      minimap: {enabled: false},
+                      wordWrap: 'on',
+                      minimap: { enabled: false },
                       readOnly: true,
                     }}
                   />
                 </div>
               </TabPane>
               <TabPane tab={formatMessage({ id: 'page.route.TabPane.header' })} key="header">
-                {response && Object.keys(response.header)
-                  .map(header => {
-                    return response.header[header].map(value => {
-                      return <div><b>{header}</b>: {value}</div>
-                    })
-                  })
-                }
+                {response &&
+                  Object.keys(response.header).map((header) => {
+                    return response.header[header].map((value) => {
+                      return (
+                        <div>
+                          <b>{header}</b>: {value}
+                        </div>
+                      );
+                    });
+                  })}
               </TabPane>
             </Tabs>
           </Spin>
diff --git a/web/src/pages/Route/components/DebugViews/DebugFormDataView.tsx b/web/src/pages/Route/components/DebugViews/DebugFormDataView.tsx
index 39e6c8424d..7bedf86879 100644
--- a/web/src/pages/Route/components/DebugViews/DebugFormDataView.tsx
+++ b/web/src/pages/Route/components/DebugViews/DebugFormDataView.tsx
@@ -28,10 +28,10 @@ const DebugFormDataView: React.FC<RouteModule.DebugViewProps> = (props) => {
     { label: DebugBodyFormDataValueType.Text, value: DebugBodyFormDataValueType.Text },
     { label: DebugBodyFormDataValueType.File, value: DebugBodyFormDataValueType.File },
   ];
-  const [typeList, setTypeList] = useState({0: DebugBodyFormDataValueType.Text});
+  const [typeList, setTypeList] = useState({ 0: DebugBodyFormDataValueType.Text });
   const handleTypeChanged = (value: string, index: number) => {
-    setTypeList({...typeList, [index]: value})
-  }
+    setTypeList({ ...typeList, [index]: value });
+  };
   const normFile = (e: any) => {
     if (Array.isArray(e)) {
       return e;
@@ -75,42 +75,45 @@ const DebugFormDataView: React.FC<RouteModule.DebugViewProps> = (props) => {
                   </Col>
                   <Col span={4}>
                     <Form.Item name={[field.name, 'type']}>
-                      <Select defaultValue={DebugBodyFormDataValueType.Text} options={typeOptions} onChange={(value) => {
-                        handleTypeChanged(value, index)
-                      }} data-cy={`debug-formdata-type-${index}`}/>
+                      <Select
+                        defaultValue={DebugBodyFormDataValueType.Text}
+                        options={typeOptions}
+                        onChange={(value) => {
+                          handleTypeChanged(value, index);
+                        }}
+                        data-cy={`debug-formdata-type-${index}`}
+                      />
                     </Form.Item>
                   </Col>
                   <Col span={7}>
-                    {
-                      ( typeList[index] === DebugBodyFormDataValueType.Text || !typeList[index] )&&
-                      (
-                        <Form.Item name={[field.name, 'value']}>
-                          <Input
-                            placeholder={formatMessage({
-                              id: 'page.route.input.placeholder.paramValue',
-                            })}
-                          />
-                        </Form.Item>
-                      )
-                    }
-                    {
-                      typeList[index] === DebugBodyFormDataValueType.File &&
-                      (
-                        <Form.Item>
-                          <Form.Item
+                    {(typeList[index] === DebugBodyFormDataValueType.Text || !typeList[index]) && (
+                      <Form.Item name={[field.name, 'value']}>
+                        <Input
+                          placeholder={formatMessage({
+                            id: 'page.route.input.placeholder.paramValue',
+                          })}
+                        />
+                      </Form.Item>
+                    )}
+                    {typeList[index] === DebugBodyFormDataValueType.File && (
+                      <Form.Item>
+                        <Form.Item
                           name={[field.name, 'value']}
                           valuePropName="file"
                           getValueFromEvent={normFile}
-                          >
-                            <Upload maxCount={1}>
-                              <Button type="primary" icon={<ImportOutlined />} data-cy={`debug-upload-btn-${index}`}>
-                                {formatMessage({ id: 'page.route.button.selectFile' })}
-                              </Button>
-                            </Upload>
-                          </Form.Item>
+                        >
+                          <Upload maxCount={1}>
+                            <Button
+                              type="primary"
+                              icon={<ImportOutlined />}
+                              data-cy={`debug-upload-btn-${index}`}
+                            >
+                              {formatMessage({ id: 'page.route.button.selectFile' })}
+                            </Button>
+                          </Upload>
                         </Form.Item>
-                      )
-                    }
+                      </Form.Item>
+                    )}
                   </Col>
                   <Col>
                     {fields.length > 1 && index !== fields.length - 1 && (
diff --git a/web/src/pages/Route/components/DebugViews/DebugParamsView.tsx b/web/src/pages/Route/components/DebugViews/DebugParamsView.tsx
index 85fc924836..9a897aebf2 100644
--- a/web/src/pages/Route/components/DebugViews/DebugParamsView.tsx
+++ b/web/src/pages/Route/components/DebugViews/DebugParamsView.tsx
@@ -27,12 +27,14 @@ const { Option } = AutoComplete;
 const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
   const { formatMessage } = useIntl();
 
-  const allSelectOptions = props.inputType === "header" ? HEADER_LIST : []
+  const allSelectOptions = props.inputType === 'header' ? HEADER_LIST : [];
   const [result, setResult] = useState<string[]>(allSelectOptions);
 
   const onSearch = (value: string) => {
-    setResult(allSelectOptions.filter((option) => option.toLowerCase().startsWith(value.toLowerCase())))
-  }
+    setResult(
+      allSelectOptions.filter((option) => option.toLowerCase().startsWith(value.toLowerCase())),
+    );
+  };
 
   return (
     <Form name={props.name} className={styles.routeDebugDraw} form={props.form}>
@@ -57,7 +59,8 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                     <Form.Item
                       {...field}
                       name={[field.name, 'key']}
-                      fieldKey={[field.fieldKey, 'key']}>
+                      fieldKey={[field.fieldKey, 'key']}
+                    >
                       <AutoComplete
                         onSearch={onSearch}
                         placeholder={formatMessage({ id: 'page.route.input.placeholder.paramKey' })}
@@ -70,7 +73,8 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                             prevData.params[index].check = true;
                             props.form.setFieldsValue(prevData);
                           }
-                        }}>
+                        }}
+                      >
                         {result.map((value) => (
                           <Option key={value} value={value}>
                             {value}
@@ -83,7 +87,8 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                     <Form.Item
                       {...field}
                       name={[field.name, 'value']}
-                      fieldKey={[field.fieldKey, 'value']}>
+                      fieldKey={[field.fieldKey, 'value']}
+                    >
                       <Input
                         placeholder={formatMessage({
                           id: 'page.route.input.placeholder.paramValue',
diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
index 81f4dd2f1b..d5528a4f6e 100644
--- a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -23,14 +23,14 @@ import PanelSection from '@/components/PanelSection';
 const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   advancedMatchingRules,
   disabled,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const [visible, setVisible] = useState(false);
   const [mode, setMode] = useState<RouteModule.ModalType>('CREATE');
   const [namePlaceholder, setNamePlaceholder] = useState('');
   const [modalForm] = Form.useForm();
 
-  const [operatorValueSample, setOperatorValueSample] = useState("")
+  const [operatorValueSample, setOperatorValueSample] = useState('');
 
   const { Option } = Select;
 
@@ -38,15 +38,15 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
 
   const onOk = () => {
     modalForm.validateFields().then((value: RouteModule.MatchingRule) => {
-      if (value.operator === "IN") {
+      if (value.operator === 'IN') {
         try {
-          JSON.parse(value.value as string)
+          JSON.parse(value.value as string);
         } catch (error) {
           notification.warning({
             message: formatMessage({ id: 'page.route.fields.vars.invalid' }),
-            description: formatMessage({ id: 'page.route.fields.vars.in.invalid' })
-          })
-          return
+            description: formatMessage({ id: 'page.route.fields.vars.in.invalid' }),
+          });
+          return;
         }
       }
       if (mode === 'EDIT') {
@@ -153,27 +153,29 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
     disabled
       ? {}
       : {
-        title: formatMessage({ id: 'component.global.operation' }),
-        key: 'action',
-        render: (_: any, record: RouteModule.MatchingRule) => (
-          <Space size="middle">
-            <a onClick={() => handleEdit(record)}>
-              {formatMessage({ id: 'component.global.edit' })}
-            </a>
-            <a onClick={() => handleRemove(record.key)}>
-              {formatMessage({ id: 'component.global.delete' })}
-            </a>
-          </Space>
-        ),
-      },
+          title: formatMessage({ id: 'component.global.operation' }),
+          key: 'action',
+          render: (_: any, record: RouteModule.MatchingRule) => (
+            <Space size="middle">
+              <a onClick={() => handleEdit(record)}>
+                {formatMessage({ id: 'component.global.edit' })}
+              </a>
+              <a onClick={() => handleRemove(record.key)}>
+                {formatMessage({ id: 'component.global.delete' })}
+              </a>
+            </Space>
+          ),
+        },
   ].filter((item) => Object.keys(item).length);
 
   const renderModal = () => {
     return (
       <Modal
-        title={mode === 'EDIT'
-          ? formatMessage({ id: 'page.route.rule.edit' })
-          : formatMessage({ id: 'page.route.rule.create' })}
+        title={
+          mode === 'EDIT'
+            ? formatMessage({ id: 'page.route.rule.edit' })
+            : formatMessage({ id: 'page.route.rule.create' })
+        }
         centered
         visible
         onOk={onOk}
@@ -234,7 +236,9 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
                 message: formatMessage({ id: 'component.global.input.ruleMessage.name' }),
               },
             ]}
-            tooltip={formatMessage({ id: 'page.route.form.itemRulesRequiredMessage.parameterName' })}
+            tooltip={formatMessage({
+              id: 'page.route.form.itemRulesRequiredMessage.parameterName',
+            })}
             extra={namePlaceholder}
           >
             <Input />
@@ -245,24 +249,32 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
             rules={[
               {
                 required: true,
-                message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
-                  id: 'page.route.operationalCharacter',
-                })}`,
+                message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage(
+                  {
+                    id: 'page.route.operationalCharacter',
+                  },
+                )}`,
               },
             ]}
           >
-            <Select onChange={(e: string) => {
-              switch (e) {
-                case "IN":
-                  setOperatorValueSample(formatMessage({ id: 'page.route.advanced-match.operator.sample.IN' }))
-                  break
-                case "~~":
-                  setOperatorValueSample(formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }))
-                  break
-                default:
-                  setOperatorValueSample("")
-              }
-            }}>
+            <Select
+              onChange={(e: string) => {
+                switch (e) {
+                  case 'IN':
+                    setOperatorValueSample(
+                      formatMessage({ id: 'page.route.advanced-match.operator.sample.IN' }),
+                    );
+                    break;
+                  case '~~':
+                    setOperatorValueSample(
+                      formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }),
+                    );
+                    break;
+                  default:
+                    setOperatorValueSample('');
+                }
+              }}
+            >
               <Option value="==">{formatMessage({ id: 'page.route.equal' })}</Option>
               <Option value="~=">{formatMessage({ id: 'page.route.unequal' })}</Option>
               <Option value=">">{formatMessage({ id: 'page.route.greaterThan' })}</Option>
@@ -288,11 +300,14 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
           </Form.Item>
         </Form>
       </Modal>
-    )
+    );
   };
 
   return (
-    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })} tooltip={formatMessage({id: 'page.route.advanced-match.tooltip'})}>
+    <PanelSection
+      title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })}
+      tooltip={formatMessage({ id: 'page.route.advanced-match.tooltip' })}
+    >
       {!disabled && (
         <Button
           onClick={() => {
diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx
index deaa343f4e..1d56c1812f 100644
--- a/web/src/pages/Route/components/Step1/MetaView.tsx
+++ b/web/src/pages/Route/components/Step1/MetaView.tsx
@@ -24,7 +24,13 @@ import { FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants';
 import LabelsDrawer from '@/components/LabelsfDrawer';
 import { fetchLabelList, fetchServiceList } from '../../service';
 
-const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit, upstreamForm, onChange = () => { } }) => {
+const MetaView: React.FC<RouteModule.Step1PassProps> = ({
+  disabled,
+  form,
+  isEdit,
+  upstreamForm,
+  onChange = () => {},
+}) => {
   const { formatMessage } = useIntl();
   const [visible, setVisible] = useState(false);
   const [labelList, setLabelList] = useState<LabelList>({});
@@ -40,7 +46,11 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
 
     return (
       <React.Fragment>
-        <Form.Item label={formatMessage({ id: 'component.global.labels' })} name={field} tooltip={formatMessage({ id: 'page.route.configuration.normal-labels.tooltip' })}>
+        <Form.Item
+          label={formatMessage({ id: 'component.global.labels' })}
+          name={field}
+          tooltip={formatMessage({ id: 'page.route.configuration.normal-labels.tooltip' })}
+        >
           <Select
             mode="tags"
             style={{ width: '100%' }}
@@ -69,13 +79,13 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
               const labels = form.getFieldValue(field) || [];
               return (
                 <LabelsDrawer
-                  title={formatMessage({ id: "component.label-manager" })}
+                  title={formatMessage({ id: 'component.label-manager' })}
                   actionName={field}
                   dataSource={labels}
                   disabled={disabled || false}
                   onChange={onChange}
                   onClose={() => setVisible(false)}
-                  filterList={["API_VERSION"]}
+                  filterList={['API_VERSION']}
                   fetchLabelList={fetchLabelList}
                 />
               );
@@ -89,17 +99,16 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
   const VersionLabelComponent = () => {
     return (
       <Form.Item
-        label={formatMessage({ id: 'component.global.version' })} tooltip={formatMessage({ id: "page.route.configuration.version.tooltip" })}>
+        label={formatMessage({ id: 'component.global.version' })}
+        tooltip={formatMessage({ id: 'page.route.configuration.version.tooltip' })}
+      >
         <Row>
           <Col span={10}>
-            <Form.Item
-              noStyle
-              name="custom_version_label"
-            >
+            <Form.Item noStyle name="custom_version_label">
               <AutoComplete
                 options={(labelList.API_VERSION || []).map((item) => ({ value: item }))}
                 disabled={disabled}
-                placeholder={formatMessage({ id: "page.route.configuration.version.placeholder" })}
+                placeholder={formatMessage({ id: 'page.route.configuration.version.placeholder' })}
               />
             </Form.Item>
           </Col>
@@ -109,7 +118,11 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
   };
 
   const Name: React.FC = () => (
-    <Form.Item label={formatMessage({ id: 'component.global.name' })} required tooltip={formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' })}>
+    <Form.Item
+      label={formatMessage({ id: 'component.global.name' })}
+      required
+      tooltip={formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' })}
+    >
       <Row>
         <Col span={10}>
           <Form.Item
@@ -118,11 +131,15 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
             rules={[
               {
                 required: true,
-                message: formatMessage({ id: 'page.route.configuration.name.rules.required.description' }),
+                message: formatMessage({
+                  id: 'page.route.configuration.name.rules.required.description',
+                }),
               },
               {
                 pattern: new RegExp(/^[a-zA-Z][a-zA-Z0-9_-]{0,100}$/, 'g'),
-                message: formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' }),
+                message: formatMessage({
+                  id: 'page.route.form.itemRulesPatternMessage.apiNameRule',
+                }),
               },
             ]}
           >
@@ -134,7 +151,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
         </Col>
       </Row>
     </Form.Item>
-  )
+  );
 
   const Description: React.FC = () => (
     <Form.Item label={formatMessage({ id: 'component.global.description' })}>
@@ -151,23 +168,22 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
         </Col>
       </Row>
     </Form.Item>
-  )
+  );
 
   const Publish: React.FC = () => (
-    <Form.Item label={formatMessage({ id: 'page.route.publish' })} tooltip={formatMessage({ id: 'page.route.configuration.publish.tooltip' })}>
+    <Form.Item
+      label={formatMessage({ id: 'page.route.publish' })}
+      tooltip={formatMessage({ id: 'page.route.configuration.publish.tooltip' })}
+    >
       <Row>
         <Col>
-          <Form.Item
-            noStyle
-            name="status"
-            valuePropName="checked"
-          >
+          <Form.Item noStyle name="status" valuePropName="checked">
             <Switch disabled={isEdit} />
           </Form.Item>
         </Col>
       </Row>
     </Form.Item>
-  )
+  );
 
   const WebSocket: React.FC = () => (
     <Form.Item label="WebSocket">
@@ -179,38 +195,40 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
         </Col>
       </Row>
     </Form.Item>
-  )
+  );
 
   const Redirect: React.FC = () => {
     const list = [
       {
-        value: "forceHttps",
-        label: formatMessage({ id: 'page.route.select.option.enableHttps' })
-      }, {
-        value: "customRedirect",
-        label: formatMessage({ id: 'page.route.select.option.configCustom' })
-      }, {
-        value: "disabled",
-        label: formatMessage({ id: 'page.route.select.option.forbidden' })
-      }
-    ]
+        value: 'forceHttps',
+        label: formatMessage({ id: 'page.route.select.option.enableHttps' }),
+      },
+      {
+        value: 'customRedirect',
+        label: formatMessage({ id: 'page.route.select.option.configCustom' }),
+      },
+      {
+        value: 'disabled',
+        label: formatMessage({ id: 'page.route.select.option.forbidden' }),
+      },
+    ];
 
     return (
-      <Form.Item label={formatMessage({ id: 'page.route.form.itemLabel.redirect' })} tooltip={formatMessage({ id: 'page.route.fields.custom.redirectOption.tooltip' })}>
+      <Form.Item
+        label={formatMessage({ id: 'page.route.form.itemLabel.redirect' })}
+        tooltip={formatMessage({ id: 'page.route.fields.custom.redirectOption.tooltip' })}
+      >
         <Row>
           <Col span={5}>
-            <Form.Item
-              name="redirectOption"
-              noStyle
-            >
+            <Form.Item name="redirectOption" noStyle>
               <Select
                 disabled={disabled}
-                data-cy='route-redirect'
+                data-cy="route-redirect"
                 onChange={(params) => {
                   onChange({ action: 'redirectOptionChange', data: params });
                 }}
               >
-                {list.map(item => (
+                {list.map((item) => (
                   <Select.Option value={item.value} key={item.value}>
                     {item.label}
                   </Select.Option>
@@ -220,8 +238,8 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
           </Col>
         </Row>
       </Form.Item>
-    )
-  }
+    );
+  };
 
   const CustomRedirect: React.FC = () => (
     <Form.Item
@@ -266,7 +284,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
                 </Col>
                 <Col span={5}>
                   <Form.Item name="ret_code" rules={[{ required: true }]}>
-                    <Select disabled={disabled} data-cy='redirect_code'>
+                    <Select disabled={disabled} data-cy="redirect_code">
                       <Select.Option value={301}>
                         {formatMessage({ id: 'page.route.select.option.redirect301' })}
                       </Select.Option>
@@ -283,18 +301,21 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
         return null;
       }}
     </Form.Item>
-  )
+  );
 
   const ServiceSelector: React.FC = () => (
     <React.Fragment>
-      <Form.Item label={formatMessage({ id: 'page.route.service' })} tooltip={formatMessage({ id: 'page.route.fields.service_id.tooltip' })}>
+      <Form.Item
+        label={formatMessage({ id: 'page.route.service' })}
+        tooltip={formatMessage({ id: 'page.route.fields.service_id.tooltip' })}
+      >
         <Row>
           <Col span={5}>
             <Form.Item noStyle 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)}>
-                  {formatMessage({ id: "page.route.service.none" })}
+                  {formatMessage({ id: 'page.route.service.none' })}
                 </Select.Option>
                 {serviceList.map((item) => {
                   return (
@@ -308,26 +329,29 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
           </Col>
         </Row>
       </Form.Item>
-      <Form.Item noStyle shouldUpdate={(prev, next) => {
-        // route with redirect plugin can be edit without service and upstream
-        if (next.redirectOption === 'customRedirect') {
-          return false;
-        }
-        if (next.service_id === '') {
-          const upstream_id = upstreamForm?.getFieldValue('upstream_id')
-          if (upstream_id === 'None') {
-            notification.warning({
-              message: formatMessage({ id: 'page.route.fields.service_id.invalid' }),
-              description: formatMessage({ id: 'page.route.fields.service_id.without-upstream' })
-            })
+      <Form.Item
+        noStyle
+        shouldUpdate={(prev, next) => {
+          // route with redirect plugin can be edit without service and upstream
+          if (next.redirectOption === 'customRedirect') {
+            return false;
           }
-        }
-        return prev.service_id !== next.service_id
-      }}>
+          if (next.service_id === '') {
+            const upstream_id = upstreamForm?.getFieldValue('upstream_id');
+            if (upstream_id === 'None') {
+              notification.warning({
+                message: formatMessage({ id: 'page.route.fields.service_id.invalid' }),
+                description: formatMessage({ id: 'page.route.fields.service_id.without-upstream' }),
+              });
+            }
+          }
+          return prev.service_id !== next.service_id;
+        }}
+      >
         {() => null}
       </Form.Item>
     </React.Fragment>
-  )
+  );
 
   return (
     <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.nameDescription' })}>
diff --git a/web/src/pages/Route/components/Step1/ProxyRewrite.tsx b/web/src/pages/Route/components/Step1/ProxyRewrite.tsx
index e9157118f4..9844305e45 100644
--- a/web/src/pages/Route/components/Step1/ProxyRewrite.tsx
+++ b/web/src/pages/Route/components/Step1/ProxyRewrite.tsx
@@ -26,7 +26,7 @@ import {
   FORM_ITEM_WITHOUT_LABEL,
   SCHEME_REWRITE,
   URI_REWRITE_TYPE,
-  HOST_REWRITE_TYPE
+  HOST_REWRITE_TYPE,
 } from '@/pages/Route/constants';
 
 const removeBtnStyle = {
@@ -38,7 +38,7 @@ const removeBtnStyle = {
 /**
  * https://apisix.apache.org/docs/apisix/plugins/proxy-rewrite
  * UI for ProxyRewrite plugin
-*/
+ */
 const ProxyRewrite: React.FC<RouteModule.Step1PassProps> = ({ form, disabled }) => {
   const { formatMessage } = useIntl();
 
@@ -68,10 +68,7 @@ const ProxyRewrite: React.FC<RouteModule.Step1PassProps> = ({ form, disabled })
         );
       case URI_REWRITE_TYPE.REGEXP:
         return (
-          <Form.List
-            name={['proxyRewrite', 'regex_uri']}
-            initialValue={['', '']}
-          >
+          <Form.List name={['proxyRewrite', 'regex_uri']} initialValue={['', '']}>
             {(fields) =>
               fields.map((field, index) => {
                 switch (index) {
@@ -168,15 +165,17 @@ const ProxyRewrite: React.FC<RouteModule.Step1PassProps> = ({ form, disabled })
     const options = [
       {
         value: SCHEME_REWRITE.KEEP,
-        label: formatMessage({ id: 'page.route.radio.staySame' })
-      }, {
+        label: formatMessage({ id: 'page.route.radio.staySame' }),
+      },
+      {
         value: SCHEME_REWRITE.HTTP,
-        label: (SCHEME_REWRITE.HTTP).toLocaleUpperCase()
-      }, {
+        label: SCHEME_REWRITE.HTTP.toLocaleUpperCase(),
+      },
+      {
         value: SCHEME_REWRITE.HTTPS,
-        label: (SCHEME_REWRITE.HTTPS).toLocaleUpperCase()
-      }
-    ]
+        label: SCHEME_REWRITE.HTTPS.toLocaleUpperCase(),
+      },
+    ];
 
     return (
       <Form.Item
@@ -184,108 +183,105 @@ const ProxyRewrite: React.FC<RouteModule.Step1PassProps> = ({ form, disabled })
         name={['proxyRewrite', 'scheme']}
       >
         <Radio.Group disabled={disabled}>
-          {
-            options.map(item => (
-              <Radio value={item.value} key={item.value}>{item.label}</Radio>
-            ))
-          }
+          {options.map((item) => (
+            <Radio value={item.value} key={item.value}>
+              {item.label}
+            </Radio>
+          ))}
         </Radio.Group>
       </Form.Item>
-    )
-  }
+    );
+  };
 
   const URIRewriteType: React.FC = () => {
     const options = [
       {
         value: URI_REWRITE_TYPE.KEEP,
-        label: formatMessage({ id: 'page.route.radio.staySame' })
-      }, {
+        label: formatMessage({ id: 'page.route.radio.staySame' }),
+      },
+      {
         value: URI_REWRITE_TYPE.STATIC,
         label: formatMessage({ id: 'page.route.radio.static' }),
-        dataCypress: 'uri-static'
-      }, {
+        dataCypress: 'uri-static',
+      },
+      {
         value: URI_REWRITE_TYPE.REGEXP,
-        label: formatMessage({ id: 'page.route.radio.regex' })
-      }
-    ]
+        label: formatMessage({ id: 'page.route.radio.regex' }),
+      },
+    ];
 
     return (
       <React.Fragment>
         <Form.Item
           label={formatMessage({ id: 'page.route.form.itemLabel.URIRewriteType' })}
-          name='URIRewriteType'
+          name="URIRewriteType"
         >
-          <Radio.Group
-            disabled={disabled}
-          >
-            {
-              options.map(item => (
-                <Radio data-cy={item.dataCypress} value={item.value} key={item.value}>
-                  {item.label}
-                </Radio>
-              ))
-            }
+          <Radio.Group disabled={disabled}>
+            {options.map((item) => (
+              <Radio data-cy={item.dataCypress} value={item.value} key={item.value}>
+                {item.label}
+              </Radio>
+            ))}
           </Radio.Group>
         </Form.Item>
-        <Form.Item shouldUpdate={
-          (prevValues, curValues) => prevValues.URIRewriteType !== curValues.URIRewriteType} noStyle>
-          {
-            () => {
-              return getUriRewriteItems()
-            }
+        <Form.Item
+          shouldUpdate={(prevValues, curValues) =>
+            prevValues.URIRewriteType !== curValues.URIRewriteType
           }
+          noStyle
+        >
+          {() => {
+            return getUriRewriteItems();
+          }}
         </Form.Item>
       </React.Fragment>
-    )
-  }
+    );
+  };
 
   const HostRewriteType: React.FC = () => {
     const options = [
       {
         label: formatMessage({ id: 'page.route.radio.staySame' }),
         value: HOST_REWRITE_TYPE.KEEP,
-        dataCypress: "host-keep"
-      }, {
+        dataCypress: 'host-keep',
+      },
+      {
         label: formatMessage({ id: 'page.route.radio.static' }),
         value: HOST_REWRITE_TYPE.REWRITE,
-        dataCypress: "host-static"
-      }
-    ]
+        dataCypress: 'host-static',
+      },
+    ];
     return (
       <React.Fragment>
         <Form.Item
           label={formatMessage({ id: 'page.route.form.itemLabel.hostRewriteType' })}
-          name='hostRewriteType'
+          name="hostRewriteType"
         >
-          <Radio.Group
-            disabled={disabled}
-          >
-            {
-              options.map(item => (
-                <Radio data-cy={item.dataCypress} value={item.value} key={item.value}>
-                  {item.label}
-                </Radio>
-              ))
-            }
+          <Radio.Group disabled={disabled}>
+            {options.map((item) => (
+              <Radio data-cy={item.dataCypress} value={item.value} key={item.value}>
+                {item.label}
+              </Radio>
+            ))}
           </Radio.Group>
         </Form.Item>
-        <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.hostRewriteType !== curValues.hostRewriteType} noStyle>
-          {
-            () => {
-              return getHostRewriteItems();
-            }
+        <Form.Item
+          shouldUpdate={(prevValues, curValues) =>
+            prevValues.hostRewriteType !== curValues.hostRewriteType
           }
+          noStyle
+        >
+          {() => {
+            return getHostRewriteItems();
+          }}
         </Form.Item>
       </React.Fragment>
-    )
-  }
+    );
+  };
 
   const Headers: React.FC = () => {
     return (
-      <Form.List
-        name={['proxyRewrite', 'kvHeaders']}
-        initialValue={[{}]}
-      >
+      <Form.List name={['proxyRewrite', 'kvHeaders']} initialValue={[{}]}>
         {(fields, { add, remove }) => (
           <>
             <Form.Item
@@ -334,15 +330,21 @@ const ProxyRewrite: React.FC<RouteModule.Step1PassProps> = ({ form, disabled })
               ))}
             </Form.Item>
             <Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
-              <Button data-cy='create-new-rewrite-header' type="dashed" disabled={disabled} onClick={() => add()} icon={<PlusOutlined />}>
+              <Button
+                data-cy="create-new-rewrite-header"
+                type="dashed"
+                disabled={disabled}
+                onClick={() => add()}
+                icon={<PlusOutlined />}
+              >
                 {formatMessage({ id: 'component.global.add' })}
               </Button>
             </Form.Item>
           </>
         )}
       </Form.List>
-    )
-  }
+    );
+  };
 
   return (
     <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.requestOverride' })}>
diff --git a/web/src/pages/Route/components/Step1/RequestConfigView.tsx b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
index 2c7bf89eba..a2ae82d348 100644
--- a/web/src/pages/Route/components/Step1/RequestConfigView.tsx
+++ b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
@@ -22,10 +22,7 @@ import { useIntl } from 'umi';
 
 import PanelSection from '@/components/PanelSection';
 
-import {
-  HTTP_METHOD_OPTION_LIST,
-  FORM_ITEM_WITHOUT_LABEL,
-} from '@/pages/Route/constants';
+import { HTTP_METHOD_OPTION_LIST, FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants';
 
 const removeBtnStyle = {
   marginLeft: 20,
@@ -33,10 +30,7 @@ const removeBtnStyle = {
   alignItems: 'center',
 };
 
-const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
-  form,
-  disabled,
-}) => {
+const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({ form, disabled }) => {
   const { formatMessage } = useIntl();
 
   const HostList = () => (
@@ -67,7 +61,9 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                       noStyle
                     >
                       <Input
-                        placeholder={formatMessage({ id: 'page.route.configuration.host.placeholder' })}
+                        placeholder={formatMessage({
+                          id: 'page.route.configuration.host.placeholder',
+                        })}
                         disabled={disabled}
                       />
                     </Form.Item>
@@ -112,9 +108,7 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
             <Form.Item
               label={formatMessage({ id: 'page.route.path' })}
               required
-              tooltip={
-                formatMessage({ id: 'page.route.form.itemExtraMessage1.path' })
-              }
+              tooltip={formatMessage({ id: 'page.route.form.itemExtraMessage1.path' })}
               style={{ marginBottom: 0 }}
             >
               {fields.map((field, index) => (
@@ -127,13 +121,17 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                         {
                           required: true,
                           whitespace: true,
-                          message: formatMessage({ id: "page.route.configuration.path.rules.required.description" }),
+                          message: formatMessage({
+                            id: 'page.route.configuration.path.rules.required.description',
+                          }),
                         },
                       ]}
                       noStyle
                     >
                       <Input
-                        placeholder={formatMessage({ id: 'page.route.configuration.path.placeholder' })}
+                        placeholder={formatMessage({
+                          id: 'page.route.configuration.path.placeholder',
+                        })}
                         disabled={disabled}
                       />
                     </Form.Item>
@@ -146,7 +144,8 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                           remove(field.name);
                         }}
                       />
-                    )}</Col>
+                    )}
+                  </Col>
                 </Row>
               ))}
             </Form.Item>
@@ -199,7 +198,9 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
                       noStyle
                     >
                       <Input
-                        placeholder={formatMessage({ id: 'page.route.configuration.remote_addrs.placeholder' })}
+                        placeholder={formatMessage({
+                          id: 'page.route.configuration.remote_addrs.placeholder',
+                        })}
                         disabled={disabled}
                       />
                     </Form.Item>
@@ -237,15 +238,10 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
   );
 
   const HTTPMethods: React.FC = () => (
-    <Form.Item
-      label={formatMessage({ id: 'page.route.form.itemLabel.httpMethod' })}
-    >
+    <Form.Item label={formatMessage({ id: 'page.route.form.itemLabel.httpMethod' })}>
       <Row>
         <Col span={10}>
-          <Form.Item
-            name="methods"
-            noStyle
-          >
+          <Form.Item name="methods" noStyle>
             <Select
               mode="multiple"
               style={{ width: '100%' }}
@@ -271,16 +267,13 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
         </Col>
       </Row>
     </Form.Item>
-  )
+  );
 
   const RoutePriority: React.FC = () => (
     <Form.Item label={formatMessage({ id: 'page.route.form.itemLabel.priority' })}>
       <Row>
         <Col span={5}>
-          <Form.Item
-            noStyle
-            name="priority"
-          >
+          <Form.Item noStyle name="priority">
             <InputNumber
               placeholder={`Please input ${formatMessage({
                 id: 'page.route.form.itemLabel.priority',
@@ -291,9 +284,7 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
         </Col>
       </Row>
     </Form.Item>
-  )
-
-
+  );
 
   return (
     <PanelSection
diff --git a/web/src/pages/Route/components/Step3/index.tsx b/web/src/pages/Route/components/Step3/index.tsx
index 2bfd0292a8..2264795b21 100644
--- a/web/src/pages/Route/components/Step3/index.tsx
+++ b/web/src/pages/Route/components/Step3/index.tsx
@@ -35,7 +35,11 @@ type Props = {
     };
     plugin_config_id?: string;
   };
-  onChange: (data: { plugins: PluginComponent.Data; script: any, plugin_config_id?: string; }) => void;
+  onChange: (data: {
+    plugins: PluginComponent.Data;
+    script: any;
+    plugin_config_id?: string;
+  }) => void;
   readonly?: boolean;
   isForceHttps?: boolean;
   isProxyEnable?: boolean;
@@ -43,7 +47,13 @@ type Props = {
 
 type Mode = 'NORMAL' | 'DRAW';
 
-const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps = false, isProxyEnable = false }) => {
+const Page: React.FC<Props> = ({
+  data,
+  onChange,
+  readonly = false,
+  isForceHttps = false,
+  isProxyEnable = false,
+}) => {
   const { formatMessage } = useIntl();
   const { plugins = {}, script = DEFAULT_PLUGIN_FLOW_DATA, plugin_config_id = '' } = data;
 
@@ -51,7 +61,9 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
   const useSupportBrowser = isChrome || isEdgeChromium || isChromium;
   const disableDraw = !useSupportBrowser || isForceHttps || isProxyEnable;
 
-  const [mode, setMode] = useState<Mode>(Object.keys(script.chart?.cells || {}).length === 0 || disableDraw ? 'NORMAL' : 'DRAW');
+  const [mode, setMode] = useState<Mode>(
+    Object.keys(script.chart?.cells || {}).length === 0 || disableDraw ? 'NORMAL' : 'DRAW',
+  );
 
   return (
     <>
@@ -61,7 +73,7 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
           onChange={(e) => {
             if (e.target.value === 'NORMAL') {
               // NOTE: current is DRAW
-              onChange({ ...data, script: { chart: FlowGraph.graph.toJSON() } })
+              onChange({ ...data, script: { chart: FlowGraph.graph.toJSON() } });
             }
 
             setMode(e.target.value);
@@ -83,13 +95,19 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
                 // NOTE: forceHttps do not support DRAW mode
                 const titleArr: string[] = [];
                 if (!useSupportBrowser) {
-                  titleArr.push(formatMessage({ id: 'page.route.tooltip.pluginOrchOnlySupportChrome' }));
+                  titleArr.push(
+                    formatMessage({ id: 'page.route.tooltip.pluginOrchOnlySupportChrome' }),
+                  );
                 }
                 if (isForceHttps) {
-                  titleArr.push(formatMessage({ id: 'page.route.tooltip.pluginOrchWithoutRedirect' }));
+                  titleArr.push(
+                    formatMessage({ id: 'page.route.tooltip.pluginOrchWithoutRedirect' }),
+                  );
                 }
                 if (isProxyEnable) {
-                  titleArr.push(formatMessage({ id: 'page.route.tooltip.pluginOrchWithoutProxyRewrite' }));
+                  titleArr.push(
+                    formatMessage({ id: 'page.route.tooltip.pluginOrchWithoutProxyRewrite' }),
+                  );
                 }
                 return titleArr.map((item, index) => `${index + 1}.${item}`).join('');
               }}
@@ -108,11 +126,11 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
           referPage="route"
           showSelector
           onChange={(pluginsData, id) => {
-            onChange({ ...data, plugins: pluginsData, plugin_config_id: id })
+            onChange({ ...data, plugins: pluginsData, plugin_config_id: id });
           }}
         />
       )}
-      {Boolean(mode === 'DRAW') && (<PluginFlow chart={script.chart as any} />)}
+      {Boolean(mode === 'DRAW') && <PluginFlow chart={script.chart as any} />}
     </>
   );
 };
diff --git a/web/src/pages/Route/constants.ts b/web/src/pages/Route/constants.ts
index 6688287fa0..76d22f9f05 100644
--- a/web/src/pages/Route/constants.ts
+++ b/web/src/pages/Route/constants.ts
@@ -15,14 +15,21 @@
  * limitations under the License.
  */
 export const HTTP_METHOD_OPTION_LIST: HttpMethod[] = [
-  "GET", "POST", "PUT", "DELETE", "PATCH", "HEAD",
-  "OPTIONS", "CONNECT", "TRACE"
+  'GET',
+  'POST',
+  'PUT',
+  'DELETE',
+  'PATCH',
+  'HEAD',
+  'OPTIONS',
+  'CONNECT',
+  'TRACE',
 ];
 
 export const FORM_ITEM_LAYOUT = {
   labelCol: {
     span: 3,
-  }
+  },
 };
 
 export const FORM_ITEM_WITHOUT_LABEL = {
@@ -67,76 +74,75 @@ export const DEFAULT_STEP_1_DATA: RouteModule.Form1Data = {
   },
   URIRewriteType: URI_REWRITE_TYPE.KEEP,
   hostRewriteType: HOST_REWRITE_TYPE.KEEP,
-
 };
 
 export const DEFAULT_STEP_3_DATA: RouteModule.Step3Data = {
   plugins: {},
   script: {},
-  plugin_config_id: ""
+  plugin_config_id: '',
 };
 
 export const AUTH_LIST = ['basic-auth', 'jwt-auth', 'key-auth'];
 
 export const HEADER_LIST = [
-  "A-IM",
-  "Accept",
-  "Accept-Charset",
-  "Accept-Datetime",
-  "Accept-Encoding",
-  "Accept-Language",
-  "Access-Control-Request-Method",
-  "Access-Control-Request-Headers",
-  "Allow",
-  "Authorization",
-  "Cache-Control",
-  "Connection",
-  "Content-Encoding",
-  "Content-Length",
-  "Content-MD5",
-  "Content-Type",
-  "Cookie",
-  "DNT",
-  "Date",
-  "Expect",
-  "Forwarded",
-  "From",
-  "Front-End-Https",
-  "Host",
-  "HTTP2-Settings",
-  "If-Match",
-  "If-Modified-Since",
-  "If-None-Match",
-  "If-Range",
-  "If-Unmodified-Since",
-  "Max-Forwards",
-  "Origin",
-  "Pragma",
-  "Prefer",
-  "Proxy-Authorization",
-  "Proxy-Connection",
-  "Range",
-  "Referer",
-  "Save-Data",
-  "TE",
-  "Trailer",
-  "Transfer-Encoding",
-  "Upgrade",
-  "Upgrade-Insecure-Requests",
-  "User-Agent",
-  "Via",
-  "Warning",
-  "X-ATT-DeviceId",
-  "X-Correlation-ID",
-  "X-Csrf-Token",
-  "X-Forwarded-For",
-  "X-Forwarded-Host",
-  "X-Forwarded-Proto",
-  "X-Http-Method-Override",
-  "X-Request-ID",
-  "X-Requested-With",
-  "X-UIDH",
-  "X-Wap-Profile",
+  'A-IM',
+  'Accept',
+  'Accept-Charset',
+  'Accept-Datetime',
+  'Accept-Encoding',
+  'Accept-Language',
+  'Access-Control-Request-Method',
+  'Access-Control-Request-Headers',
+  'Allow',
+  'Authorization',
+  'Cache-Control',
+  'Connection',
+  'Content-Encoding',
+  'Content-Length',
+  'Content-MD5',
+  'Content-Type',
+  'Cookie',
+  'DNT',
+  'Date',
+  'Expect',
+  'Forwarded',
+  'From',
+  'Front-End-Https',
+  'Host',
+  'HTTP2-Settings',
+  'If-Match',
+  'If-Modified-Since',
+  'If-None-Match',
+  'If-Range',
+  'If-Unmodified-Since',
+  'Max-Forwards',
+  'Origin',
+  'Pragma',
+  'Prefer',
+  'Proxy-Authorization',
+  'Proxy-Connection',
+  'Range',
+  'Referer',
+  'Save-Data',
+  'TE',
+  'Trailer',
+  'Transfer-Encoding',
+  'Upgrade',
+  'Upgrade-Insecure-Requests',
+  'User-Agent',
+  'Via',
+  'Warning',
+  'X-ATT-DeviceId',
+  'X-Correlation-ID',
+  'X-Csrf-Token',
+  'X-Forwarded-For',
+  'X-Forwarded-Host',
+  'X-Forwarded-Proto',
+  'X-Http-Method-Override',
+  'X-Request-ID',
+  'X-Requested-With',
+  'X-UIDH',
+  'X-Wap-Profile',
 ];
 
 export const PROTOCOL_SUPPORTED: RouteModule.debugRequest['request_protocol'][] = ['http', 'https'];
@@ -181,5 +187,5 @@ export const EXPORT_FILE_MIME_TYPE_SUPPORTED = ['application/json', 'application
 
 export enum DebugBodyFormDataValueType {
   Text = 'Text',
-  File = 'File'
+  File = 'File',
 }
diff --git a/web/src/pages/Route/locales/en-US.ts b/web/src/pages/Route/locales/en-US.ts
index a5fdf5f4a9..a467ad886f 100644
--- a/web/src/pages/Route/locales/en-US.ts
+++ b/web/src/pages/Route/locales/en-US.ts
@@ -140,23 +140,29 @@ export default {
   'page.route.panelSection.title.requestOverride': 'Request Override',
   'page.route.form.itemLabel.headerRewrite': 'Header Override',
   'page.route.tooltip.pluginOrchOnlySupportChrome': 'Plugin orchestration only supports Chrome.',
-  'page.route.tooltip.pluginOrchWithoutProxyRewrite': 'Plugin orchestration mode cannot be used when request override is configured in Step 1.',
-  'page.route.tooltip.pluginOrchWithoutRedirect': 'Plugin orchestration mode cannot be used when Redirect in Step 1 is selected to enable HTTPS.',
+  'page.route.tooltip.pluginOrchWithoutProxyRewrite':
+    'Plugin orchestration mode cannot be used when request override is configured in Step 1.',
+  'page.route.tooltip.pluginOrchWithoutRedirect':
+    'Plugin orchestration mode cannot be used when Redirect in Step 1 is selected to enable HTTPS.',
 
   'page.route.tabs.normalMode': 'Normal',
   'page.route.tabs.orchestration': 'Orchestration',
 
-  'page.route.list.description': 'Route is the entry point of a request, which defines the matching rules between a client request and a service. A route can be associated with a service (Service), an upstream (Upstream), a service can correspond to a set of routes, and a route can correspond to an upstream object (a set of backend service nodes), so each request matching to a route will be proxied by the gateway to the route-bound upstream service.',
+  'page.route.list.description':
+    'Route is the entry point of a request, which defines the matching rules between a client request and a service. A route can be associated with a service (Service), an upstream (Upstream), a service can correspond to a set of routes, and a route can correspond to an upstream object (a set of backend service nodes), so each request matching to a route will be proxied by the gateway to the route-bound upstream service.',
 
   'page.route.configuration.name.rules.required.description': 'Please enter the route name',
   'page.route.configuration.name.placeholder': 'Please enter the route name',
   'page.route.configuration.desc.tooltip': 'Please enter the description of the route',
-  'page.route.configuration.publish.tooltip': 'Used to control whether a route is published to the gateway immediately after it is created',
+  'page.route.configuration.publish.tooltip':
+    'Used to control whether a route is published to the gateway immediately after it is created',
   'page.route.configuration.version.placeholder': 'Please enter the routing version number',
   'page.route.configuration.version.tooltip': 'Version number of the route, e.g. V1',
-  'page.route.configuration.normal-labels.tooltip': 'Add custom labels to routes that can be used for route grouping.',
+  'page.route.configuration.normal-labels.tooltip':
+    'Add custom labels to routes that can be used for route grouping.',
 
-  'page.route.configuration.path.rules.required.description': 'Please enter a valid HTTP request path',
+  'page.route.configuration.path.rules.required.description':
+    'Please enter a valid HTTP request path',
   'page.route.configuration.path.placeholder': 'Please enter the HTTP request path',
   'page.route.configuration.remote_addrs.placeholder': 'Please enter the client address',
   'page.route.configuration.host.placeholder': 'Please enter the HTTP request hostname',
@@ -169,12 +175,15 @@ export default {
   'page.route.advanced-match.operator.sample.IN': 'Please enter an array, e.g ["1", "2"]',
   'page.route.advanced-match.operator.sample.~~': 'Please enter a regular expression, e.g [a-z]+',
   'page.route.fields.service_id.invalid': 'Please check the configuration of binding service',
-  'page.route.fields.service_id.without-upstream': 'If you do not bind the service, you must set the Upstream (Step 2)',
-  'page.route.advanced-match.tooltip': 'It supports route matching through request headers, request parameters and cookies, and can be applied to scenarios such as grayscale publishing and blue-green testing.',
+  'page.route.fields.service_id.without-upstream':
+    'If you do not bind the service, you must set the Upstream (Step 2)',
+  'page.route.advanced-match.tooltip':
+    'It supports route matching through request headers, request parameters and cookies, and can be applied to scenarios such as grayscale publishing and blue-green testing.',
 
   'page.route.fields.custom.redirectOption.tooltip': 'This is related to redirect plugin',
   'page.route.fields.service_id.tooltip': 'Bind Service object to reuse their configuration.',
 
   'page.route.fields.vars.invalid': 'Please check the advanced match condition configuration',
-  'page.route.fields.vars.in.invalid': 'When using the IN operator, enter the parameter values in array format.',
+  'page.route.fields.vars.in.invalid':
+    'When using the IN operator, enter the parameter values in array format.',
 };
diff --git a/web/src/pages/Route/locales/zh-CN.ts b/web/src/pages/Route/locales/zh-CN.ts
index 529e3738df..9ce349300a 100644
--- a/web/src/pages/Route/locales/zh-CN.ts
+++ b/web/src/pages/Route/locales/zh-CN.ts
@@ -140,13 +140,16 @@ export default {
   'page.route.button.selectFile': '请选择上传文件',
   'page.route.list': '路由列表',
   'page.route.tooltip.pluginOrchOnlySupportChrome': '插件编排仅支持 Chrome 浏览器。',
-  'page.route.tooltip.pluginOrchWithoutProxyRewrite': '当步骤一中 配置了 请求改写时，不可使用插件编排模式。',
-  'page.route.tooltip.pluginOrchWithoutRedirect': '当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。',
+  'page.route.tooltip.pluginOrchWithoutProxyRewrite':
+    '当步骤一中 配置了 请求改写时，不可使用插件编排模式。',
+  'page.route.tooltip.pluginOrchWithoutRedirect':
+    '当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。',
 
   'page.route.tabs.normalMode': '普通模式',
   'page.route.tabs.orchestration': '编排模式',
 
-  'page.route.list.description': '路由（Route）是请求的入口点，它定义了客户端请求与服务之间的匹配规则。路由可以与服务（Service）、上游（Upstream）关联，一个服务可对应一组路由，一个路由可以对应一个上游对象（一组后端服务节点），因此，每个匹配到路由的请求将被网关代理到路由绑定的上游服务中。',
+  'page.route.list.description':
+    '路由（Route）是请求的入口点，它定义了客户端请求与服务之间的匹配规则。路由可以与服务（Service）、上游（Upstream）关联，一个服务可对应一组路由，一个路由可以对应一个上游对象（一组后端服务节点），因此，每个匹配到路由的请求将被网关代理到路由绑定的上游服务中。',
 
   'page.route.configuration.name.rules.required.description': '请输入路由名称',
   'page.route.configuration.name.placeholder': '请输入路由名称',
@@ -170,7 +173,8 @@ export default {
   'page.route.advanced-match.operator.sample.~~': '请输入正则表达式，示例：[a-z]+',
   'page.route.fields.service_id.invalid': '请检查路由绑定的服务',
   'page.route.fields.service_id.without-upstream': '如果不绑定服务，则必须设置上游服务（步骤 2）',
-  'page.route.advanced-match.tooltip': '支持通过请求头，请求参数、Cookie 进行路由匹配，可应用于灰度发布，蓝绿测试等场景。',
+  'page.route.advanced-match.tooltip':
+    '支持通过请求头，请求参数、Cookie 进行路由匹配，可应用于灰度发布，蓝绿测试等场景。',
 
   'page.route.fields.custom.redirectOption.tooltip': '在此配置 redirect 插件',
   'page.route.fields.service_id.tooltip': '绑定服务（Service）对象，以便复用其中的配置。',
diff --git a/web/src/pages/Route/service.ts b/web/src/pages/Route/service.ts
index 99144cd72c..ae317c5d37 100644
--- a/web/src/pages/Route/service.ts
+++ b/web/src/pages/Route/service.ts
@@ -17,11 +17,7 @@
 import { request } from 'umi';
 import { pickBy, identity } from 'lodash';
 
-import {
-  transformStepData,
-  transformRouteData,
-  transformUpstreamNodes,
-} from './transform';
+import { transformStepData, transformRouteData, transformUpstreamNodes } from './transform';
 import { transformLabelList } from '@/helpers';
 
 export const create = (data: RouteModule.RequestData, mode?: RouteModule.RequestMode) =>
@@ -30,7 +26,11 @@ export const create = (data: RouteModule.RequestData, mode?: RouteModule.Request
     data: mode === 'RawData' ? data : transformStepData(data),
   });
 
-export const update = (rid: string, data: RouteModule.RequestData, mode?: RouteModule.RequestMode) =>
+export const update = (
+  rid: string,
+  data: RouteModule.RequestData,
+  mode?: RouteModule.RequestMode,
+) =>
   request(`/routes/${rid}`, {
     method: 'PUT',
     data: mode === 'RawData' ? data : transformStepData(data),
@@ -89,9 +89,7 @@ export const checkHostWithSSL = (hosts: string[]) =>
   });
 
 export const fetchLabelList = () =>
-  request('/labels/route').then(
-    ({ data }) => transformLabelList(data.rows) as LabelList,
-  );
+  request('/labels/route').then(({ data }) => transformLabelList(data.rows) as LabelList);
 
 export const updateRouteStatus = (rid: string, status: RouteModule.RouteStatus) =>
   request(`/routes/${rid}`, {
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index 6146b101ea..bd9c597701 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -17,22 +17,17 @@
 import { omit, pick, cloneDeep, isEmpty, unset } from 'lodash';
 
 import { transformLableValueToKeyValue } from '@/helpers';
-import {
-  SCHEME_REWRITE,
-  URI_REWRITE_TYPE,
-  HOST_REWRITE_TYPE
-} from '@/pages/Route/constants';
+import { SCHEME_REWRITE, URI_REWRITE_TYPE, HOST_REWRITE_TYPE } from '@/pages/Route/constants';
 import { convertToFormData } from '@/components/Upstream/service';
 
-export const transformProxyRewrite2Plugin = (data: RouteModule.ProxyRewrite): RouteModule.ProxyRewrite => {
+export const transformProxyRewrite2Plugin = (
+  data: RouteModule.ProxyRewrite,
+): RouteModule.ProxyRewrite => {
   let omitFieldsList: string[] = ['kvHeaders'];
   let headers: Record<string, string> = {};
 
   if (data.scheme !== 'http' && data.scheme !== 'https') {
-    omitFieldsList = [
-      ...omitFieldsList,
-      'scheme',
-    ]
+    omitFieldsList = [...omitFieldsList, 'scheme'];
   }
 
   (data.kvHeaders || []).forEach((kvHeader) => {
@@ -46,39 +41,45 @@ export const transformProxyRewrite2Plugin = (data: RouteModule.ProxyRewrite): Ro
   });
 
   if (!isEmpty(headers)) {
-    return omit({
-      ...data,
-      headers,
-    }, omitFieldsList);
+    return omit(
+      {
+        ...data,
+        headers,
+      },
+      omitFieldsList,
+    );
   }
 
   return omit(data, omitFieldsList);
-}
+};
 
 const transformProxyRewrite2Formdata = (pluginsData: any) => {
   const proxyRewriteData: RouteModule.ProxyRewrite = {
-    scheme: SCHEME_REWRITE.KEEP
+    scheme: SCHEME_REWRITE.KEEP,
   };
   let URIRewriteType = URI_REWRITE_TYPE.KEEP;
   let hostRewriteType = HOST_REWRITE_TYPE.KEEP;
 
   if (pluginsData) {
     if (pluginsData.regex_uri) {
-      URIRewriteType = URI_REWRITE_TYPE.REGEXP
+      URIRewriteType = URI_REWRITE_TYPE.REGEXP;
     }
 
     if (pluginsData.uri && !pluginsData.regex_uri) {
-      URIRewriteType = URI_REWRITE_TYPE.STATIC
+      URIRewriteType = URI_REWRITE_TYPE.STATIC;
     }
 
     if (pluginsData.host) {
-      hostRewriteType = HOST_REWRITE_TYPE.REWRITE
+      hostRewriteType = HOST_REWRITE_TYPE.REWRITE;
     }
 
-    Object.keys(pluginsData).forEach(key => {
+    Object.keys(pluginsData).forEach((key) => {
       switch (key) {
         case 'scheme':
-          proxyRewriteData[key] = pluginsData[key] === SCHEME_REWRITE.HTTP || pluginsData[key] === SCHEME_REWRITE.HTTPS ? pluginsData[key] : SCHEME_REWRITE.KEEP;
+          proxyRewriteData[key] =
+            pluginsData[key] === SCHEME_REWRITE.HTTP || pluginsData[key] === SCHEME_REWRITE.HTTPS
+              ? pluginsData[key]
+              : SCHEME_REWRITE.KEEP;
           break;
         case 'uri':
         case 'regex_uri':
@@ -91,22 +92,23 @@ const transformProxyRewrite2Formdata = (pluginsData: any) => {
               ...(proxyRewriteData.kvHeaders || []),
               {
                 key: headerKey,
-                value: pluginsData[key][headerKey]
-              }
-            ]
-          })
+                value: pluginsData[key][headerKey],
+              },
+            ];
+          });
+          break;
+        default:
           break;
-        default: break;
       }
-    })
+    });
   }
 
   return {
     proxyRewriteData,
     URIRewriteType,
     hostRewriteType,
-  }
-}
+  };
+};
 
 // Transform Route data then sent to API
 export const transformStepData = ({
@@ -138,7 +140,6 @@ export const transformStepData = ({
     labels[labelKey] = labelValue;
   });
 
-
   if (custom_version_label) {
     labels.API_VERSION = custom_version_label;
   }
@@ -159,9 +160,9 @@ export const transformStepData = ({
         default:
           key = `arg_${name}`;
       }
-      let finalValue = value
-      if (operator === "IN") {
-        finalValue = JSON.parse(value as string)
+      let finalValue = value;
+      if (operator === 'IN') {
+        finalValue = JSON.parse(value as string);
       }
       return [key, operator, finalValue];
     }),
@@ -184,11 +185,11 @@ export const transformStepData = ({
      * Due to convertToRequestData under the Upstream component,
      * if upstream_id === Custom or None, it will be omitted.
      * So upstream_id here mush be a valid Upstream ID from API.
-    */
+     */
     if (form2Data.upstream_id) {
-      data.upstream_id = form2Data.upstream_id
+      data.upstream_id = form2Data.upstream_id;
     } else {
-      data.upstream = form2Data
+      data.upstream = form2Data;
     }
 
     if (redirect.http_to_https) {
@@ -325,19 +326,22 @@ export const transformRouteData = (data: RouteModule.Body) => {
   }
 
   const proxyRewrite = data.plugins ? data.plugins['proxy-rewrite'] : {};
-  const { proxyRewriteData, URIRewriteType, hostRewriteType } = transformProxyRewrite2Formdata(proxyRewrite);
+  const { proxyRewriteData, URIRewriteType, hostRewriteType } = transformProxyRewrite2Formdata(
+    proxyRewrite,
+  );
   form1Data.proxyRewrite = proxyRewriteData;
   form1Data.URIRewriteType = URIRewriteType;
   form1Data.hostRewriteType = hostRewriteType;
 
-
   const advancedMatchingRules: RouteModule.MatchingRule[] = transformVarsToRules(vars);
 
   if (upstream && Object.keys(upstream).length) {
     upstream.upstream_id = 'Custom';
   }
 
-  const form2Data: UpstreamComponent.ResponseData = convertToFormData(upstream) || { upstream_id: upstream_id || 'None' };
+  const form2Data: UpstreamComponent.ResponseData = convertToFormData(upstream) || {
+    upstream_id: upstream_id || 'None',
+  };
 
   const { plugins, script, plugin_config_id = '' } = data;
 
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index 3245c7aaa7..5192494a48 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -36,7 +36,7 @@ declare namespace RouteModule {
     plugins: PluginPage.PluginData;
     //  TEMP
     script: any;
-    plugin_config_id?: string
+    plugin_config_id?: string;
   };
 
   type UpstreamHost = {
@@ -130,7 +130,7 @@ declare namespace RouteModule {
   type Kvobject = {
     key: string;
     value: string;
-  }
+  };
   type ProxyRewrite = {
     scheme?: 'keep' | 'http' | 'https';
     uri?: string;
@@ -138,7 +138,7 @@ declare namespace RouteModule {
     host?: string;
     kvHeaders?: Kvobject[];
     headers?: Record<string, string>;
-  }
+  };
 
   type AdvancedMatchingRules = {
     advancedMatchingRules: MatchingRule[];
@@ -217,12 +217,12 @@ declare namespace RouteModule {
     header_params?: any;
   };
 
-  type debugResponse ={
-    code: number,
-    message: string,
-    data: any,
-    header: Record<string, string[]>
-  }
+  type debugResponse = {
+    code: number;
+    message: string;
+    data: any;
+    header: Record<string, string[]>;
+  };
 
   type authData = {
     authType: string;
diff --git a/web/src/pages/SSL/List.tsx b/web/src/pages/SSL/List.tsx
index 26452f1acd..7a9858f5eb 100644
--- a/web/src/pages/SSL/List.tsx
+++ b/web/src/pages/SSL/List.tsx
@@ -21,7 +21,7 @@ import type { ProColumns, ActionType } from '@ant-design/pro-table';
 import { Button, Popconfirm, notification, Tag } from 'antd';
 import { useIntl, history } from 'umi';
 import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string'
+import querystring from 'query-string';
 
 import { fetchList, remove as removeSSL } from '@/pages/SSL/service';
 import { timestampToLocaleString } from '@/helpers';
@@ -108,7 +108,10 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'page.ssl.list' })} content={formatMessage({ id: 'component.ssl.description' })}>
+    <PageHeaderWrapper
+      title={formatMessage({ id: 'page.ssl.list' })}
+      content={formatMessage({ id: 'component.ssl.description' })}
+    >
       <ProTable<SSLModule.ResponseBody>
         rowKey="id"
         columns={columns}
diff --git a/web/src/pages/SSL/components/CertificateForm/index.tsx b/web/src/pages/SSL/components/CertificateForm/index.tsx
index 73dcf6f5ab..9395d99e9b 100644
--- a/web/src/pages/SSL/components/CertificateForm/index.tsx
+++ b/web/src/pages/SSL/components/CertificateForm/index.tsx
@@ -75,7 +75,11 @@ const CertificateForm: React.FC<CertificateFormProps> = ({ mode, form }) => {
           },
         ]}
       >
-        <Input.TextArea rows={6} disabled={mode !== 'EDIT'} placeholder={formatMessage({ id: 'component.ssl.fields.cert.required' })} />
+        <Input.TextArea
+          rows={6}
+          disabled={mode !== 'EDIT'}
+          placeholder={formatMessage({ id: 'component.ssl.fields.cert.required' })}
+        />
       </Form.Item>
       <Form.Item
         label={formatMessage({ id: 'page.ssl.form.itemLabel.privateKey' })}
@@ -93,7 +97,11 @@ const CertificateForm: React.FC<CertificateFormProps> = ({ mode, form }) => {
           },
         ]}
       >
-        <Input.TextArea rows={6} disabled={mode !== 'EDIT'} placeholder={formatMessage({ id: 'component.ssl.fields.key.required' })} />
+        <Input.TextArea
+          rows={6}
+          disabled={mode !== 'EDIT'}
+          placeholder={formatMessage({ id: 'component.ssl.fields.key.required' })}
+        />
       </Form.Item>
       {renderExpireTime()}
     </Form>
diff --git a/web/src/pages/SSL/components/Step1/index.tsx b/web/src/pages/SSL/components/Step1/index.tsx
index 5d101039fb..21c48ef6d7 100644
--- a/web/src/pages/SSL/components/Step1/index.tsx
+++ b/web/src/pages/SSL/components/Step1/index.tsx
@@ -67,10 +67,7 @@ const Step: React.FC<Props> = ({ form }) => {
   };
   return (
     <>
-      <Form.Item
-        label={formatMessage({ id: 'page.ssl.form.itemLabel.way' })}
-        required
-      >
+      <Form.Item label={formatMessage({ id: 'page.ssl.form.itemLabel.way' })} required>
         <Select
           placeholder={formatMessage({ id: 'page.ssl.select.placeholder.selectCreateWays' })}
           defaultValue="Input"
diff --git a/web/src/pages/SSL/locales/en-US.ts b/web/src/pages/SSL/locales/en-US.ts
index cc6ddc5b62..54b88c9e8e 100644
--- a/web/src/pages/SSL/locales/en-US.ts
+++ b/web/src/pages/SSL/locales/en-US.ts
@@ -40,7 +40,8 @@ export default {
   'component.ssl.removeSSLSuccess': 'Remove target SSL successfully',
   'component.ssl.removeSSLItemModalContent': 'You are going to remove this item!',
 
-  'component.ssl.description': 'The certificate is used by the gateway to process encrypted requests, which will be associated with the SNI and bound to the host name in the Route.',
+  'component.ssl.description':
+    'The certificate is used by the gateway to process encrypted requests, which will be associated with the SNI and bound to the host name in the Route.',
   'component.ssl.fields.cert.required': 'Please enter the certificate',
   'component.ssl.fields.key.required': 'Please enter the key',
 };
diff --git a/web/src/pages/SSL/locales/zh-CN.ts b/web/src/pages/SSL/locales/zh-CN.ts
index 4608a21a6d..5b98dc7379 100644
--- a/web/src/pages/SSL/locales/zh-CN.ts
+++ b/web/src/pages/SSL/locales/zh-CN.ts
@@ -37,7 +37,8 @@ export default {
   'component.ssl.removeSSLSuccess': '删除证书成功',
   'component.ssl.removeSSLItemModalContent': '确定要删除该证书吗？',
 
-  'component.ssl.description': '证书被网关用于处理加密请求，它将与 SNI 关联，并与路由中主机名绑定。',
+  'component.ssl.description':
+    '证书被网关用于处理加密请求，它将与 SNI 关联，并与路由中主机名绑定。',
   'component.ssl.fields.cert.required': '请输入证书内容',
   'component.ssl.fields.key.required': '请输入私钥内容',
 };
diff --git a/web/src/pages/ServerInfo/List.tsx b/web/src/pages/ServerInfo/List.tsx
index 0d8e63e303..63d6c5f328 100644
--- a/web/src/pages/ServerInfo/List.tsx
+++ b/web/src/pages/ServerInfo/List.tsx
@@ -41,7 +41,9 @@ const ServerInfo: React.FC = () => {
           ...item,
           boot_time: moment(item.boot_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
           last_report_time: moment(item.last_report_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
-          up_time: moment(item.boot_time * 1000).locale(locale).fromNow(true),
+          up_time: moment(item.boot_time * 1000)
+            .locale(locale)
+            .fromNow(true),
         };
       });
 
diff --git a/web/src/pages/ServerInfo/service.ts b/web/src/pages/ServerInfo/service.ts
index e678bcf620..015490aac9 100644
--- a/web/src/pages/ServerInfo/service.ts
+++ b/web/src/pages/ServerInfo/service.ts
@@ -23,5 +23,5 @@ export const fetchInfoList = () => {
 };
 
 export const fetchVersion = () => {
-  return request<Res<ServerInfoModule.DashboardInfo>>('/tool/version').then(({ data }) => data)
+  return request<Res<ServerInfoModule.DashboardInfo>>('/tool/version').then(({ data }) => data);
 };
diff --git a/web/src/pages/ServerInfo/typing.d.ts b/web/src/pages/ServerInfo/typing.d.ts
index 025a40fe72..98c95cd4c6 100644
--- a/web/src/pages/ServerInfo/typing.d.ts
+++ b/web/src/pages/ServerInfo/typing.d.ts
@@ -26,7 +26,7 @@ declare namespace ServerInfoModule {
   };
 
   type DashboardInfo = {
-    commit_hash: string,
-    version: string
-  }
+    commit_hash: string;
+    version: string;
+  };
 }
diff --git a/web/src/pages/Service/Create.tsx b/web/src/pages/Service/Create.tsx
index 04ad579163..4397b4eb3d 100644
--- a/web/src/pages/Service/Create.tsx
+++ b/web/src/pages/Service/Create.tsx
@@ -50,11 +50,11 @@ const Page: React.FC = (props) => {
     if (serviceId) {
       fetchItem(serviceId).then(({ data }) => {
         if (data.upstream_id) {
-          upstreamForm.setFieldsValue({ upstream_id: data.upstream_id })
+          upstreamForm.setFieldsValue({ upstream_id: data.upstream_id });
         } else if (data.upstream) {
-          upstreamForm.setFieldsValue(convertToFormData(data.upstream))
+          upstreamForm.setFieldsValue(convertToFormData(data.upstream));
         } else {
-          upstreamForm.setFieldsValue({ upstream_id: 'None' })
+          upstreamForm.setFieldsValue({ upstream_id: 'None' });
         }
 
         form.setFieldsValue(omit(data, ['upstream_id', 'upstream', 'plugins']));
@@ -80,12 +80,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');
       })
@@ -113,9 +114,11 @@ const Page: React.FC = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={(props as any).match.params.serviceId
-          ? formatMessage({ id: 'page.service.configure' })
-          : formatMessage({ id: 'page.service.create' })}
+        title={
+          (props as any).match.params.serviceId
+            ? formatMessage({ id: 'page.service.configure' })
+            : formatMessage({ id: 'page.service.create' })
+        }
       >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: '25px' }}>
diff --git a/web/src/pages/Service/List.tsx b/web/src/pages/Service/List.tsx
index 2c5c5124df..acc7447f58 100644
--- a/web/src/pages/Service/List.tsx
+++ b/web/src/pages/Service/List.tsx
@@ -21,7 +21,7 @@ import ProTable from '@ant-design/pro-table';
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, notification, Popconfirm, Space } from 'antd';
-import querystring from 'query-string'
+import querystring from 'query-string';
 import { omit } from 'lodash';
 
 import { DELETE_FIELDS } from '@/constants';
@@ -68,18 +68,18 @@ const Page: React.FC = () => {
       render: (_, record) => (
         <>
           <Space align="baseline">
+            <Button type="primary" onClick={() => history.push(`/service/${record.id}/edit`)}>
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
             <Button
               type="primary"
-              onClick={() => history.push(`/service/${record.id}/edit`)}
+              onClick={() => {
+                setId(record.id);
+                setRawData(omit(record, DELETE_FIELDS));
+                setVisible(true);
+                setEditorMode('update');
+              }}
             >
-              {formatMessage({ id: 'component.global.edit' })}
-            </Button>
-            <Button type="primary" onClick={() => {
-              setId(record.id);
-              setRawData(omit(record, DELETE_FIELDS));
-              setVisible(true);
-              setEditorMode('update');
-            }}>
               {formatMessage({ id: 'component.global.view' })}
             </Button>
             <Popconfirm
@@ -109,7 +109,10 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageHeaderWrapper title={formatMessage({ id: 'page.service.list' })} content={formatMessage({ id: 'page.service.description' })}>
+    <PageHeaderWrapper
+      title={formatMessage({ id: 'page.service.list' })}
+      content={formatMessage({ id: 'page.service.description' })}
+    >
       <ProTable<ServiceModule.ResponseBody>
         actionRef={ref}
         rowKey="id"
@@ -129,27 +132,31 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <Button type="default" onClick={() => {
-            setVisible(true);
-            setEditorMode('create');
-            setRawData({});
-          }}>
+          <Button
+            type="default"
+            onClick={() => {
+              setVisible(true);
+              setEditorMode('create');
+              setRawData({});
+            }}
+          >
             {formatMessage({ id: 'component.global.data.editor' })}
           </Button>,
         ]}
       />
       <RawDataEditor
         visible={visible}
-        type='service'
+        type="service"
         readonly={false}
         data={rawData}
-        onClose={() => { setVisible(false) }}
+        onClose={() => {
+          setVisible(false);
+        }}
         onSubmit={(data: any) => {
-          (editorMode === 'create' ? create(data) : update(id, data))
-            .then(() => {
-              setVisible(false);
-              ref.current?.reload();
-            })
+          (editorMode === 'create' ? create(data) : update(id, data)).then(() => {
+            setVisible(false);
+            ref.current?.reload();
+          });
         }}
       />
     </PageHeaderWrapper>
diff --git a/web/src/pages/Service/components/Step1.tsx b/web/src/pages/Service/components/Step1.tsx
index 0577e69d59..7a9bedda91 100644
--- a/web/src/pages/Service/components/Step1.tsx
+++ b/web/src/pages/Service/components/Step1.tsx
@@ -45,16 +45,27 @@ const Step1: React.FC<ServiceModule.Step1PassProps> = ({
   return (
     <>
       <Form {...FORM_LAYOUT} form={form}>
-        <Form.Item name="name" label={formatMessage({ id: 'component.global.name' })} required rules={[
-          {
-            required: true,
-            message: formatMessage({ id: 'page.service.fields.name.required' })
-          }
-        ]}>
-          <Input disabled={disabled} placeholder={formatMessage({ id: 'page.service.fields.name.required' })} />
+        <Form.Item
+          name="name"
+          label={formatMessage({ id: 'component.global.name' })}
+          required
+          rules={[
+            {
+              required: true,
+              message: formatMessage({ id: 'page.service.fields.name.required' }),
+            },
+          ]}
+        >
+          <Input
+            disabled={disabled}
+            placeholder={formatMessage({ id: 'page.service.fields.name.required' })}
+          />
         </Form.Item>
         <Form.Item name="desc" label={formatMessage({ id: 'component.global.description' })}>
-          <Input.TextArea disabled={disabled} placeholder={formatMessage({ id: 'component.global.description.required' })} />
+          <Input.TextArea
+            disabled={disabled}
+            placeholder={formatMessage({ id: 'component.global.description.required' })}
+          />
         </Form.Item>
       </Form>
       <UpstreamForm
diff --git a/web/src/pages/Service/locales/en-US.ts b/web/src/pages/Service/locales/en-US.ts
index f2ef94297f..10bbe5dc00 100644
--- a/web/src/pages/Service/locales/en-US.ts
+++ b/web/src/pages/Service/locales/en-US.ts
@@ -19,8 +19,9 @@ export default {
   'page.service.steps.stepTitle.pluginConfig': 'Plugin',
   'page.service.steps.stepTitle.preview': 'Preview',
   'page.service.list': 'Service List',
-  'page.service.description': 'A service consists of a combination of public plugin configuration and upstream target information in a route. Services are associated with Routes and Upstreams, and a service can correspond to a set of upstream nodes and can be bound by multiple routes.',
+  'page.service.description':
+    'A service consists of a combination of public plugin configuration and upstream target information in a route. Services are associated with Routes and Upstreams, and a service can correspond to a set of upstream nodes and can be bound by multiple routes.',
   'page.service.fields.name.required': 'Please enter service name',
   'page.service.create': 'Create Service',
-  'page.service.configure': 'Configure Service'
+  'page.service.configure': 'Configure Service',
 };
diff --git a/web/src/pages/Service/locales/zh-CN.ts b/web/src/pages/Service/locales/zh-CN.ts
index b56b78467f..c18e9043a3 100644
--- a/web/src/pages/Service/locales/zh-CN.ts
+++ b/web/src/pages/Service/locales/zh-CN.ts
@@ -19,8 +19,9 @@ export default {
   'page.service.steps.stepTitle.pluginConfig': '插件配置',
   'page.service.steps.stepTitle.preview': '预览',
   'page.service.list': '服务列表',
-  'page.service.description': '服务由路由中公共的插件配置、上游目标信息组合而成。服务与路由、上游关联，一个服务可对应一组上游节点、可被多条路由绑定。',
+  'page.service.description':
+    '服务由路由中公共的插件配置、上游目标信息组合而成。服务与路由、上游关联，一个服务可对应一组上游节点、可被多条路由绑定。',
   'page.service.fields.name.required': '请输入服务名称',
   'page.service.create': '创建服务',
-  'page.service.configure': '配置服务'
+  'page.service.configure': '配置服务',
 };
diff --git a/web/src/pages/Upstream/Create.tsx b/web/src/pages/Upstream/Create.tsx
index b276d7491b..9b709c85c5 100644
--- a/web/src/pages/Upstream/Create.tsx
+++ b/web/src/pages/Upstream/Create.tsx
@@ -34,7 +34,7 @@ const Page: React.FC = (props) => {
     const { id } = (props as any).match.params;
 
     if (id) {
-      fetchOne(id).then(data => {
+      fetchOne(id).then((data) => {
         form1.setFieldsValue(data);
       });
     }
@@ -44,17 +44,20 @@ const Page: React.FC = (props) => {
     form1.validateFields().then(() => {
       const data = upstreamRef.current?.getData();
       if (!data) {
-        notification.error({ message: formatMessage({id: 'page.upstream.other.configuration.invalid'}) });
+        notification.error({
+          message: formatMessage({ id: 'page.upstream.other.configuration.invalid' }),
+        });
         return;
       }
 
       const { id } = (props as any).match.params;
       (id ? update(id, data) : create(data)).then(() => {
         notification.success({
-          message: `${id
-            ? formatMessage({ id: 'page.upstream.edit.upstream.successfully' })
-            : formatMessage({ id: 'page.upstream.create.upstream.successfully' })
-            }`,
+          message: `${
+            id
+              ? formatMessage({ id: 'page.upstream.edit.upstream.successfully' })
+              : formatMessage({ id: 'page.upstream.create.upstream.successfully' })
+          }`,
         });
         history.replace('/upstream/list');
       });
@@ -76,9 +79,11 @@ const Page: React.FC = (props) => {
   return (
     <>
       <PageContainer
-        title={(props as any).match.params.id
-          ? formatMessage({ id: 'page.upstream.configure' })
-          : formatMessage({ id: 'page.upstream.create' })}
+        title={
+          (props as any).match.params.id
+            ? formatMessage({ id: 'page.upstream.configure' })
+            : formatMessage({ id: 'page.upstream.create' })
+        }
       >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>
diff --git a/web/src/pages/Upstream/List.tsx b/web/src/pages/Upstream/List.tsx
index 486fbbeb28..249abd2827 100644
--- a/web/src/pages/Upstream/List.tsx
+++ b/web/src/pages/Upstream/List.tsx
@@ -21,7 +21,7 @@ import type { ProColumns, ActionType } from '@ant-design/pro-table';
 import { Popconfirm, Button, notification, Space } from 'antd';
 import { history, useIntl } from 'umi';
 import { PlusOutlined } from '@ant-design/icons';
-import querystring from 'query-string'
+import querystring from 'query-string';
 import { omit } from 'lodash';
 
 import { DELETE_FIELDS } from '@/constants';
@@ -41,7 +41,6 @@ const Page: React.FC = () => {
 
   const { formatMessage } = useIntl();
 
-
   const savePageList = (page = 1, pageSize = 10) => {
     history.replace(`/upstream/list?page=${page}&pageSize=${pageSize}`);
   };
@@ -78,18 +77,18 @@ const Page: React.FC = () => {
       hideInSearch: true,
       render: (_, record) => (
         <Space align="baseline">
+          <Button type="primary" onClick={() => history.push(`/upstream/${record.id}/edit`)}>
+            {formatMessage({ id: 'page.upstream.list.edit' })}
+          </Button>
           <Button
             type="primary"
-            onClick={() => history.push(`/upstream/${record.id}/edit`)}
+            onClick={() => {
+              setId(record.id);
+              setRawData(omit(record, DELETE_FIELDS));
+              setVisible(true);
+              setEditorMode('update');
+            }}
           >
-            {formatMessage({ id: 'page.upstream.list.edit' })}
-          </Button>
-          <Button type="primary" onClick={() => {
-            setId(record.id);
-            setRawData(omit(record, DELETE_FIELDS));
-            setVisible(true);
-            setEditorMode('update');
-          }}>
             {formatMessage({ id: 'component.global.view' })}
           </Button>
           <Popconfirm
@@ -116,7 +115,10 @@ const Page: React.FC = () => {
   ];
 
   return (
-    <PageContainer title={formatMessage({ id: 'page.upstream.list' })} content={formatMessage({ id: "page.upstream.list.content" })}>
+    <PageContainer
+      title={formatMessage({ id: 'page.upstream.list' })}
+      content={formatMessage({ id: 'page.upstream.list.content' })}
+    >
       <ProTable<UpstreamModule.ResponseBody>
         actionRef={ref}
         columns={columns}
@@ -136,27 +138,31 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <Button type="default" onClick={() => {
-            setVisible(true);
-            setEditorMode('create');
-            setRawData({});
-          }}>
+          <Button
+            type="default"
+            onClick={() => {
+              setVisible(true);
+              setEditorMode('create');
+              setRawData({});
+            }}
+          >
             {formatMessage({ id: 'component.global.data.editor' })}
           </Button>,
         ]}
       />
       <RawDataEditor
         visible={visible}
-        type='upstream'
+        type="upstream"
         readonly={false}
         data={rawData}
-        onClose={() => { setVisible(false) }}
+        onClose={() => {
+          setVisible(false);
+        }}
         onSubmit={(data: any) => {
-          (editorMode === 'create' ? create(data) : update(id, data))
-            .then(() => {
-              setVisible(false);
-              ref.current?.reload();
-            })
+          (editorMode === 'create' ? create(data) : update(id, data)).then(() => {
+            setVisible(false);
+            ref.current?.reload();
+          });
         }}
       />
     </PageContainer>
diff --git a/web/src/pages/Upstream/components/Step1.tsx b/web/src/pages/Upstream/components/Step1.tsx
index 226e71c278..0157056c08 100644
--- a/web/src/pages/Upstream/components/Step1.tsx
+++ b/web/src/pages/Upstream/components/Step1.tsx
@@ -37,7 +37,12 @@ const Step1: React.FC<Props> = ({ form, disabled, upstreamRef, neverReadonly })
         <Form.Item
           label={formatMessage({ id: 'page.upstream.step.name' })}
           name="name"
-          rules={[{ required: true, message: formatMessage({ id: 'page.upstream.step.input.upstream.name' }) }]}
+          rules={[
+            {
+              required: true,
+              message: formatMessage({ id: 'page.upstream.step.input.upstream.name' }),
+            },
+          ]}
         >
           <Input
             placeholder={formatMessage({ id: 'page.upstream.step.input.upstream.name' })}
@@ -51,7 +56,12 @@ const Step1: React.FC<Props> = ({ form, disabled, upstreamRef, neverReadonly })
           />
         </Form.Item>
       </Form>
-      <UpstreamForm ref={upstreamRef} form={form} disabled={disabled} neverReadonly={neverReadonly} />
+      <UpstreamForm
+        ref={upstreamRef}
+        form={form}
+        disabled={disabled}
+        neverReadonly={neverReadonly}
+      />
     </>
   );
 };
diff --git a/web/src/pages/Upstream/locales/en-US.ts b/web/src/pages/Upstream/locales/en-US.ts
index 84007702b1..8cbd7988e2 100644
--- a/web/src/pages/Upstream/locales/en-US.ts
+++ b/web/src/pages/Upstream/locales/en-US.ts
@@ -33,7 +33,7 @@ export default {
   'page.upstream.step.name.should.unique': 'Name should be unique',
   'page.upstream.step.input.upstream.name': 'Please enter upstream name',
   'page.upstream.step.description': 'Description',
-  'page.upstream.step.input.description': 'Please enter upstream\'s description',
+  'page.upstream.step.input.description': "Please enter upstream's description",
   'page.upstream.step.type': 'Algorithm',
   'page.upstream.step.pass-host': 'Hostname',
   'page.upstream.step.pass-host.pass': 'Keep the same Host from client request',
@@ -41,7 +41,8 @@ export default {
   'page.upstream.step.pass-host.rewrite': 'Custom Host (Will be deprecated in the future)',
   'page.upstream.step.pass-host.upstream_host': 'Custom Host',
   'page.upstream.step.connect.timeout': 'Connect Timeout',
-  'page.upstream.step.connect.timeout.desc': 'Timeout for establishing a connection from the request to the upstream server',
+  'page.upstream.step.connect.timeout.desc':
+    'Timeout for establishing a connection from the request to the upstream server',
   'page.upstream.step.input.connect.timeout': 'Please enter connect timeout',
   'page.upstream.step.send.timeout': 'Send Timeout',
   'page.upstream.step.send.timeout.desc': 'Timeout for sending data to upstream servers',
@@ -94,15 +95,22 @@ export default {
   'page.upstream.type.ewma': 'EWMA',
   'page.upstream.type.least_conn': 'Least conn',
 
-  'page.upstream.list.content': 'The upstream list contains the created upstream services (i.e., backend services) and allows load balancing and health checking of multiple target nodes of the upstream services.',
+  'page.upstream.list.content':
+    'The upstream list contains the created upstream services (i.e., backend services) and allows load balancing and health checking of multiple target nodes of the upstream services.',
 
-  'page.upstream.checks.active.timeout.description': 'Socket timeout for active checks (in seconds)',
-  'page.upstream.checks.active.unhealthy.interval.description': 'Interval between checks for unhealthy targets (in seconds)',
-  'page.upstream.checks.passive.healthy.http_statuses.description': 'Which HTTP statuses to consider a failure',
-  'page.upstream.checks.passive.unhealthy.http_statuses.description': 'Which HTTP statuses to consider a success',
-  'page.upstream.checks.passive.unhealthy.http_failures.description': 'Number of HTTP failures to consider a target unhealthy',
-  'page.upstream.checks.passive.unhealthy.tcp_failures.description': 'Number of TCP failures to consider a target unhealthy',
+  'page.upstream.checks.active.timeout.description':
+    'Socket timeout for active checks (in seconds)',
+  'page.upstream.checks.active.unhealthy.interval.description':
+    'Interval between checks for unhealthy targets (in seconds)',
+  'page.upstream.checks.passive.healthy.http_statuses.description':
+    'Which HTTP statuses to consider a failure',
+  'page.upstream.checks.passive.unhealthy.http_statuses.description':
+    'Which HTTP statuses to consider a success',
+  'page.upstream.checks.passive.unhealthy.http_failures.description':
+    'Number of HTTP failures to consider a target unhealthy',
+  'page.upstream.checks.passive.unhealthy.tcp_failures.description':
+    'Number of TCP failures to consider a target unhealthy',
   'page.upstream.scheme': 'Scheme',
 
-  'page.upstream.other.configuration.invalid': 'Please check the Upstream configuration'
+  'page.upstream.other.configuration.invalid': 'Please check the Upstream configuration',
 };
diff --git a/web/src/pages/Upstream/locales/zh-CN.ts b/web/src/pages/Upstream/locales/zh-CN.ts
index c8610079c1..2db82eb20d 100644
--- a/web/src/pages/Upstream/locales/zh-CN.ts
+++ b/web/src/pages/Upstream/locales/zh-CN.ts
@@ -94,15 +94,21 @@ export default {
   'page.upstream.type.ewma': '指数加权移动平均法（EWMA）',
   'page.upstream.type.least_conn': '最小连接数（least_conn）',
 
-  'page.upstream.list.content': '上游列表包含了已创建的上游服务（即后端服务），可以对上游服务的多个目标节点进行负载均衡和健康检查。',
+  'page.upstream.list.content':
+    '上游列表包含了已创建的上游服务（即后端服务），可以对上游服务的多个目标节点进行负载均衡和健康检查。',
 
   'page.upstream.checks.active.timeout.description': '主动健康检查的套接字的超时时间',
-  'page.upstream.checks.active.unhealthy.interval.description': '对不健康的上游服务目标节点进行主动健康检查的间隔时间，默认值为0，表示对不健康节点不进行主动健康检查。',
-  'page.upstream.checks.passive.healthy.http_statuses.description': '当被动健康检查的探针返回值是 HTTP 状态码列表的某一个值时，代表健康状态是由代理流量产生的。',
-  'page.upstream.checks.passive.unhealthy.http_statuses.description': '当被动健康检查的探针返回值是 HTTP 状态码列表的某一个值时，代表不健康状态是由代理流量产生的。',
-  'page.upstream.checks.passive.unhealthy.http_failures.description': '由被动健康检查所观察，代理流量中 HTTP 失败的次数。如果达到此值，则认为上游服务目标节点是不健康的。',
-  'page.upstream.checks.passive.unhealthy.tcp_failures.description': '被动健康检查所观察到的代理流量中 TCP 失败的次数。如果达到此值，则认为上游服务目标节点是不健康的。',
+  'page.upstream.checks.active.unhealthy.interval.description':
+    '对不健康的上游服务目标节点进行主动健康检查的间隔时间，默认值为0，表示对不健康节点不进行主动健康检查。',
+  'page.upstream.checks.passive.healthy.http_statuses.description':
+    '当被动健康检查的探针返回值是 HTTP 状态码列表的某一个值时，代表健康状态是由代理流量产生的。',
+  'page.upstream.checks.passive.unhealthy.http_statuses.description':
+    '当被动健康检查的探针返回值是 HTTP 状态码列表的某一个值时，代表不健康状态是由代理流量产生的。',
+  'page.upstream.checks.passive.unhealthy.http_failures.description':
+    '由被动健康检查所观察，代理流量中 HTTP 失败的次数。如果达到此值，则认为上游服务目标节点是不健康的。',
+  'page.upstream.checks.passive.unhealthy.tcp_failures.description':
+    '被动健康检查所观察到的代理流量中 TCP 失败的次数。如果达到此值，则认为上游服务目标节点是不健康的。',
   'page.upstream.scheme': '协议',
 
-  'page.upstream.other.configuration.invalid': '请检查上游配置'
+  'page.upstream.other.configuration.invalid': '请检查上游配置',
 };
diff --git a/web/src/pages/Upstream/service.ts b/web/src/pages/Upstream/service.ts
index 9dee86260e..a04925fdc6 100644
--- a/web/src/pages/Upstream/service.ts
+++ b/web/src/pages/Upstream/service.ts
@@ -31,7 +31,8 @@ export const fetchList = ({ current = 1, pageSize = 10, ...res }) => {
   }));
 };
 
-export const fetchOne = (id: string) => request<Res<any>>(`/upstreams/${id}`).then(({data}) => convertToFormData(data));
+export const fetchOne = (id: string) =>
+  request<Res<any>>(`/upstreams/${id}`).then(({ data }) => convertToFormData(data));
 
 export const create = (data: UpstreamModule.RequestBody) =>
   request('/upstreams', {
diff --git a/web/src/pages/User/Login.tsx b/web/src/pages/User/Login.tsx
index 799b3d4b3c..e3c05ef87d 100644
--- a/web/src/pages/User/Login.tsx
+++ b/web/src/pages/User/Login.tsx
@@ -41,7 +41,6 @@ const Page: React.FC = () => {
   const { formatMessage } = useIntl();
   const [loginMethod, setLoginMethod] = useState(loginMethods[0]);
 
-
   const onTabChange = (activeKey: string) => {
     loginMethods.forEach((item, index) => {
       if (activeKey === item.id) setLoginMethod(loginMethods[index]);
@@ -72,7 +71,7 @@ const Page: React.FC = () => {
     if (event.key === 'Enter') {
       onSubmit();
     }
-  }
+  };
 
   if (localStorage.getItem('token')) {
     history.replace('/');
@@ -81,7 +80,7 @@ const Page: React.FC = () => {
   return (
     <div className={styles.container}>
       <div className={styles.lang}>
-        <div className={styles.github} >
+        <div className={styles.github}>
           <a target="_blank" href="https://apisix.apache.org">
             <GithubOutlined />
           </a>
diff --git a/web/src/pages/User/components/LoginMethodPassword.tsx b/web/src/pages/User/components/LoginMethodPassword.tsx
index 10176a4c09..dda2e5b8bf 100644
--- a/web/src/pages/User/components/LoginMethodPassword.tsx
+++ b/web/src/pages/User/components/LoginMethodPassword.tsx
@@ -69,8 +69,13 @@ const LoginMethodPassword: UserModule.LoginMethod = {
           />
         </Form.Item>
         <Form.Item>
-          <Tooltip title={formatMessage({ id: 'component.user.loginMethodPassword.modificationMethod' })}>
-            <a href="https://github.com/apache/apisix-dashboard/blob/master/api/conf/conf.yaml#L53-L57" target="_blank">
+          <Tooltip
+            title={formatMessage({ id: 'component.user.loginMethodPassword.modificationMethod' })}
+          >
+            <a
+              href="https://github.com/apache/apisix-dashboard/blob/master/api/conf/conf.yaml#L53-L57"
+              target="_blank"
+            >
               {formatMessage({ id: 'component.user.loginMethodPassword.changeDefaultAccount' })}
             </a>
           </Tooltip>
diff --git a/web/src/pages/User/locales/en-US.ts b/web/src/pages/User/locales/en-US.ts
index 763f174672..77ffaf8553 100644
--- a/web/src/pages/User/locales/en-US.ts
+++ b/web/src/pages/User/locales/en-US.ts
@@ -26,5 +26,6 @@ export default {
   'component.user.loginMethodPassword.fieldInvalid': 'Please check username and password',
   'component.user.loginMethodPassword.success': 'Login Success',
   'component.user.loginMethodPassword.changeDefaultAccount': 'How to update username/password?',
-  'component.user.loginMethodPassword.modificationMethod': 'Please modify the users field in the /api/conf/conf.yaml file',
-  };
+  'component.user.loginMethodPassword.modificationMethod':
+    'Please modify the users field in the /api/conf/conf.yaml file',
+};
diff --git a/web/src/pages/User/locales/zh-CN.ts b/web/src/pages/User/locales/zh-CN.ts
index 1e7ac10010..a487a5990b 100644
--- a/web/src/pages/User/locales/zh-CN.ts
+++ b/web/src/pages/User/locales/zh-CN.ts
@@ -26,5 +26,6 @@ export default {
   'component.user.loginMethodPassword.fieldInvalid': '请检查账号和密码',
   'component.user.loginMethodPassword.success': '登录成功',
   'component.user.loginMethodPassword.changeDefaultAccount': '如何修改默认账户和密码？',
-  'component.user.loginMethodPassword.modificationMethod': '请修改 /api/conf/conf.yaml 文件中 users 字段',
+  'component.user.loginMethodPassword.modificationMethod':
+    '请修改 /api/conf/conf.yaml 文件中 users 字段',
 };
diff --git a/web/src/typings.d.ts b/web/src/typings.d.ts
index 48d483ed39..da3c68dd2f 100644
--- a/web/src/typings.d.ts
+++ b/web/src/typings.d.ts
@@ -67,7 +67,16 @@ type ResListData<T> = {
   total_size: number;
 };
 
-type HttpMethod = 'GET' | 'POST' | 'DELETE' | 'PUT' | 'OPTIONS' | 'HEAD' | 'PATCH' | 'CONNECT' | 'TRACE';
+type HttpMethod =
+  | 'GET'
+  | 'POST'
+  | 'DELETE'
+  | 'PUT'
+  | 'OPTIONS'
+  | 'HEAD'
+  | 'PATCH'
+  | 'CONNECT'
+  | 'TRACE';
 
 type ResponseLabelList = Record<string, string>[];