From 30c20f4399de39f166913de4032b79f2f9680864 Mon Sep 17 00:00:00 2001
From: jiangfeng <popular_style_k@qq.com>
Date: Fri, 31 Jul 2020 09:56:02 +0800
Subject: [PATCH] i18n PluginPage

---
 src/components/PluginPage/PluginCard.tsx   |   4 +-
 src/components/PluginPage/PluginDrawer.tsx |   4 +-
 src/components/PluginPage/PluginPage.tsx   |   2 +-
 src/components/PluginPage/locales/en-US.ts | 270 ++++++++++-----------
 src/components/PluginPage/locales/zh-CN.ts | 269 ++++++++++----------
 5 files changed, 276 insertions(+), 273 deletions(-)

diff --git a/src/components/PluginPage/PluginCard.tsx b/src/components/PluginPage/PluginCard.tsx
index d883c681ef..bcbc12e90e 100644
--- a/src/components/PluginPage/PluginCard.tsx
+++ b/src/components/PluginPage/PluginCard.tsx
@@ -15,8 +15,8 @@ const PluginCard: React.FC<Props> = ({ name, actions }) => {
       <Card.Meta
         title={name}
         description={formatMessage({
-          id: `PluginPage.plugin.${name}.desc`,
-          defaultMessage: formatMessage({ id: 'PluginPage.refer.documents' }),
+          id: `PluginPage.card.${name}.desc`,
+          defaultMessage: formatMessage({ id: 'PluginPage.card.refer.documents' }),
         })}
       />
     </Card>
diff --git a/src/components/PluginPage/PluginDrawer.tsx b/src/components/PluginPage/PluginDrawer.tsx
index fd0bfa2c55..5df4fb33a0 100644
--- a/src/components/PluginPage/PluginDrawer.tsx
+++ b/src/components/PluginPage/PluginDrawer.tsx
@@ -63,7 +63,9 @@ const PluginDrawer: React.FC<Props> = ({
             </div>
             {Boolean(active) && (
               <div>
-                <Button onClick={onClose}>取消</Button>
+                <Button onClick={onClose}>
+                  {formatMessage({ id: 'PluginPage.drawer.cancel' })}
+                </Button>
                 <Button
                   type="primary"
                   style={{ marginRight: 8, marginLeft: 8 }}
diff --git a/src/components/PluginPage/PluginPage.tsx b/src/components/PluginPage/PluginPage.tsx
index f5ac114d6a..1dcaa884b8 100644
--- a/src/components/PluginPage/PluginPage.tsx
+++ b/src/components/PluginPage/PluginPage.tsx
@@ -45,7 +45,7 @@ const PluginPage: React.FC<Props> = ({ data = {}, disabled, onChange }) => {
   return (
     <>
       {pluginList.map(({ list, title }) => {
-        if (disabled && title === '未启用') {
+        if (disabled && title === formatMessage({ id: 'PluginPage.drawer.not.enabled' })) {
           return null;
         }
         return (
diff --git a/src/components/PluginPage/locales/en-US.ts b/src/components/PluginPage/locales/en-US.ts
index 2c0b309230..c5e57ddcc2 100644
--- a/src/components/PluginPage/locales/en-US.ts
+++ b/src/components/PluginPage/locales/en-US.ts
@@ -1,171 +1,171 @@
 export default {
-  'PluginPage.plugin.limit-conn.desc': 'Limit the number of concurrent connections',
-  'PluginPage.plugin.limit-conn.property.conn': 'conn',
-  'PluginPage.plugin.limit-conn.property.conn.extra': 'Maximum number of concurrent connections',
-  'PluginPage.plugin.limit-conn.property.burst': 'burst',
-  'PluginPage.plugin.limit-conn.property.burst.extra':
+  'PluginPage.card.limit-conn.desc': 'Limit the number of concurrent connections',
+  'PluginPage.card.limit-conn.property.conn': 'conn',
+  'PluginPage.card.limit-conn.property.conn.extra': 'Maximum number of concurrent connections',
+  'PluginPage.card.limit-conn.property.burst': 'burst',
+  'PluginPage.card.limit-conn.property.burst.extra':
     'When the number of concurrent connections more than conn but less than burst, the request will be delayed',
-  'PluginPage.plugin.limit-conn.property.default_conn_delay': 'delay time',
-  'PluginPage.plugin.limit-conn.property.default_conn_delay.extra':
+  'PluginPage.card.limit-conn.property.default_conn_delay': 'delay time',
+  'PluginPage.card.limit-conn.property.default_conn_delay.extra':
     'Waiting time(seconds) for requests being delayed',
-  'PluginPage.plugin.limit-conn.property.key': 'key',
-  'PluginPage.plugin.limit-conn.property.key.extra': 'Basis of restriction',
-  'PluginPage.plugin.limit-conn.property.rejected_code': 'Reject status code',
-  'PluginPage.plugin.limit-conn.property.rejected_code.extra':
+  'PluginPage.card.limit-conn.property.key': 'key',
+  'PluginPage.card.limit-conn.property.key.extra': 'Basis of restriction',
+  'PluginPage.card.limit-conn.property.rejected_code': 'Reject status code',
+  'PluginPage.card.limit-conn.property.rejected_code.extra':
     'When the number of concurrent connections more than conn + burst, HTTP status code will be returned to the terminal',
 
-  'PluginPage.plugin.limit-count.desc': 'Limit the total requests within the specified time range',
-  'PluginPage.plugin.limit-count.property.count': 'Total requests',
-  'PluginPage.plugin.limit-count.property.count.extra': 'Threshold for the number of requests within a specified time window',
-  'PluginPage.plugin.limit-count.property.time_window': 'Time window',
-  'PluginPage.plugin.limit-count.property.time_window.extra':
+  'PluginPage.card.limit-count.desc': 'Limit the total requests within the specified time range',
+  'PluginPage.card.limit-count.property.count': 'Total requests',
+  'PluginPage.card.limit-count.property.count.extra': 'Threshold for the number of requests within a specified time window',
+  'PluginPage.card.limit-count.property.time_window': 'Time window',
+  'PluginPage.card.limit-count.property.time_window.extra':
     'When the size of time window(seconds) is exceeded, the total number of requests will be reset',
-  'PluginPage.plugin.limit-count.property.key': 'key',
-  'PluginPage.plugin.limit-count.property.key.extra': 'Basis of request count',
-  'PluginPage.plugin.limit-count.property.rejected_code': 'Reject status code',
-  'PluginPage.plugin.limit-count.property.rejected_code.extra':
+  'PluginPage.card.limit-count.property.key': 'key',
+  'PluginPage.card.limit-count.property.key.extra': 'Basis of request count',
+  'PluginPage.card.limit-count.property.rejected_code': 'Reject status code',
+  'PluginPage.card.limit-count.property.rejected_code.extra':
     'When the requests exceed threshold, HTTP status code will be returned to the terminal',
-  'PluginPage.plugin.limit-count.property.policy': 'policy',
-  'PluginPage.plugin.limit-count.property.redis_host': 'host address',
-  'PluginPage.plugin.limit-count.property.redis_host.extra': 'Redis node address for cluster flow limited',
-  'PluginPage.plugin.limit-count.property.redis_port': 'port',
-  'PluginPage.plugin.limit-count.property.redis_password': 'password',
-  'PluginPage.plugin.limit-count.property.redis_timeout': 'timeout(millisecond)',
-
-  'PluginPage.plugin.limit-req.desc': 'A plugin which is base leaky bucket algorithm to limit the speed of requests',
-  'PluginPage.plugin.limit-req.property.rate': 'rate',
-  'PluginPage.plugin.limit-req.property.rate.extra': 'Request rate per second',
-  'PluginPage.plugin.limit-req.property.burst': 'burst',
-  'PluginPage.plugin.limit-req.property.burst.extra':
+  'PluginPage.card.limit-count.property.policy': 'policy',
+  'PluginPage.card.limit-count.property.redis_host': 'host address',
+  'PluginPage.card.limit-count.property.redis_host.extra': 'Redis node address for cluster flow limited',
+  'PluginPage.card.limit-count.property.redis_port': 'port',
+  'PluginPage.card.limit-count.property.redis_password': 'password',
+  'PluginPage.card.limit-count.property.redis_timeout': 'timeout(millisecond)',
+
+  'PluginPage.card.limit-req.desc': 'A plugin which is base leaky bucket algorithm to limit the speed of requests',
+  'PluginPage.card.limit-req.property.rate': 'rate',
+  'PluginPage.card.limit-req.property.rate.extra': 'Request rate per second',
+  'PluginPage.card.limit-req.property.burst': 'burst',
+  'PluginPage.card.limit-req.property.burst.extra':
     'When request rate per second exceed date but blow rate + burst, the request will be delayed',
-  'PluginPage.plugin.limit-req.property.key': 'key',
-  'PluginPage.plugin.limit-req.property.key.extra': 'Basis of request count',
-  'PluginPage.plugin.limit-req.property.rejected_code': 'Reject status code',
-  'PluginPage.plugin.limit-req.property.rejected_code.extra':
+  'PluginPage.card.limit-req.property.key': 'key',
+  'PluginPage.card.limit-req.property.key.extra': 'Basis of request count',
+  'PluginPage.card.limit-req.property.rejected_code': 'Reject status code',
+  'PluginPage.card.limit-req.property.rejected_code.extra':
     'When the rate exceed rate + burst, HTTP status code will be returned to the terminal',
 
-  'PluginPage.plugin.cors.desc': 'The CORS plugin can enable the return header of CORS for the server',
-  'PluginPage.plugin.cors.property.allow_origins': 'The origin which allow cross-domain access',
-  'PluginPage.plugin.cors.property.allow_origins.extra': 'For example: https://somehost.com:8081',
-  'PluginPage.plugin.cors.property.allow_methods': 'The method which allow cross-domain access',
+  'PluginPage.card.cors.desc': 'The CORS plugin can enable the return header of CORS for the server',
+  'PluginPage.card.cors.property.allow_origins': 'The origin which allow cross-domain access',
+  'PluginPage.card.cors.property.allow_origins.extra': 'For example: https://somehost.com:8081',
+  'PluginPage.card.cors.property.allow_methods': 'The method which allow cross-domain access',
 
-  'PluginPage.plugin.fault-injection.desc': 'Fault-injection plugin used to simulate various backend failures and high latency',
-  'PluginPage.plugin.fault-injection.property.http_status': 'HTTP status code',
-  'PluginPage.plugin.fault-injection.property.body': 'response body',
-  'PluginPage.plugin.fault-injection.property.duration': 'delay time(seconds)',
+  'PluginPage.card.fault-injection.desc': 'Fault-injection plugin used to simulate various backend failures and high latency',
+  'PluginPage.card.fault-injection.property.http_status': 'HTTP status code',
+  'PluginPage.card.fault-injection.property.body': 'response body',
+  'PluginPage.card.fault-injection.property.duration': 'delay time(seconds)',
 
-  'PluginPage.plugin.http-logger.desc': 'http-logger can push log data requests to the HTTP/HTTPS server',
-  'PluginPage.plugin.http-logger.property.uri': 'log server address',
-  'PluginPage.plugin.http-logger.property.uri.extra': 'For example: 127.0.0.1:80/postendpoint?param=1',
+  'PluginPage.card.http-logger.desc': 'http-logger can push log data requests to the HTTP/HTTPS server',
+  'PluginPage.card.http-logger.property.uri': 'log server address',
+  'PluginPage.card.http-logger.property.uri.extra': 'For example: 127.0.0.1:80/postendpoint?param=1',
 
-  'PluginPage.plugin.ip-restriction.desc':
+  'PluginPage.card.ip-restriction.desc':
     'IP-restriction can add a batch of IP addresses in whitelist or blacklist(either), time complexity is O(1), and can use CIDR to represent IP range',
-  'PluginPage.plugin.ip-restriction.property.whitelist': 'whitelist',
-  'PluginPage.plugin.ip-restriction.property.blacklist': 'blacklist',
+  'PluginPage.card.ip-restriction.property.whitelist': 'whitelist',
+  'PluginPage.card.ip-restriction.property.blacklist': 'blacklist',
 
-  'PluginPage.plugin.kafka-logger.desc': 'Push the interface request logs as JSON to the external Kafka clusters',
-  'PluginPage.plugin.kafka-logger.property.broker_list': 'broker',
-  'PluginPage.plugin.kafka-logger.property.kafka_topic': 'topic',
+  'PluginPage.card.kafka-logger.desc': 'Push the interface request logs as JSON to the external Kafka clusters',
+  'PluginPage.card.kafka-logger.property.broker_list': 'broker',
+  'PluginPage.card.kafka-logger.property.kafka_topic': 'topic',
 
-  'PluginPage.plugin.prometheus.desc': 'Provide metrics data which is accord with prometheus data formate',
+  'PluginPage.card.prometheus.desc': 'Provide metrics data which is accord with prometheus data formate',
 
-  'PluginPage.plugin.proxy-cache.desc': 'Proxy-cache plugin can cache the response data of the backend service',
-  'PluginPage.plugin.proxy-cache.property.cache_zone': 'cache area name',
-  'PluginPage.plugin.proxy-cache.property.cache_zone.extra':
+  'PluginPage.card.proxy-cache.desc': 'Proxy-cache plugin can cache the response data of the backend service',
+  'PluginPage.card.proxy-cache.property.cache_zone': 'cache area name',
+  'PluginPage.card.proxy-cache.property.cache_zone.extra':
     'The local directory is /TMP/{area name}, when modify the default area name, config.yaml must be modified too',
-  'PluginPage.plugin.proxy-cache.property.cache_key': 'cache key',
-  'PluginPage.plugin.proxy-cache.property.cache_key.extra':
+  'PluginPage.card.proxy-cache.property.cache_key': 'cache key',
+  'PluginPage.card.proxy-cache.property.cache_key.extra':
     'can use Nginx variables, for example: $host, $uri',
-  'PluginPage.plugin.proxy-cache.property.cache_bypass': 'skip cache retrieval',
-  'PluginPage.plugin.proxy-cache.property.cache_bypass.extra':
+  'PluginPage.card.proxy-cache.property.cache_bypass': 'skip cache retrieval',
+  'PluginPage.card.proxy-cache.property.cache_bypass.extra':
     'You can use the Nginx variables here, when the value of this parameter is not null or non-zero, it will skip cache retrieval',
-  'PluginPage.plugin.proxy-cache.property.cache_method': 'cache Method',
-  'PluginPage.plugin.proxy-cache.property.cache_http_status': 'cache the response status code',
-  'PluginPage.plugin.proxy-cache.property.hide_cache_headers': 'hidden cache header',
-  'PluginPage.plugin.proxy-cache.property.hide_cache_headers.extra':
+  'PluginPage.card.proxy-cache.property.cache_method': 'cache Method',
+  'PluginPage.card.proxy-cache.property.cache_http_status': 'cache the response status code',
+  'PluginPage.card.proxy-cache.property.hide_cache_headers': 'hidden cache header',
+  'PluginPage.card.proxy-cache.property.hide_cache_headers.extra':
     'Whether to return Expires and Cache-Control response headers to the client',
-  'PluginPage.plugin.proxy-cache.property.no_cache': 'uncached data',
-  'PluginPage.plugin.proxy-cache.property.no_cache.extra':
+  'PluginPage.card.proxy-cache.property.no_cache': 'uncached data',
+  'PluginPage.card.proxy-cache.property.no_cache.extra':
     'You can use the Nginx variables here, when the value of this parameter is not null or non-zero, it will not be cached',
 
-  'PluginPage.plugin.proxy-mirror.desc': 'Proxy-mirror plugin provides the ability to mirror client',
-  'PluginPage.plugin.proxy-mirror.property.host': 'mirror service address',
-  'PluginPage.plugin.proxy-mirror.property.host.extra':
+  'PluginPage.card.proxy-mirror.desc': 'Proxy-mirror plugin provides the ability to mirror client',
+  'PluginPage.card.proxy-mirror.property.host': 'mirror service address',
+  'PluginPage.card.proxy-mirror.property.host.extra':
     'For example: http://127.0.0.1:9797. Address need to include HTTP or HTTPS but not include the URI part',
 
-  'PluginPage.plugin.response-rewrite.desc': 'The plugin supports modifying the body and header information returned by the upstream service',
-  'PluginPage.plugin.response-rewrite.property.status_code': 'status code',
-  'PluginPage.plugin.response-rewrite.property.body': 'response body',
-  'PluginPage.plugin.response-rewrite.property.body_base64': 'Whether the response body requires base64 decoding',
-  'PluginPage.plugin.response-rewrite.property.headers': 'HTTP header',
-
-  'PluginPage.plugin.syslog.desc': 'Relate to the syslog log server',
-  'PluginPage.plugin.syslog.property.host': 'log server address',
-  'PluginPage.plugin.syslog.property.port': 'log server port',
-  'PluginPage.plugin.syslog.property.timeout': 'timeout',
-  'PluginPage.plugin.syslog.property.tls': 'open SSL',
-  'PluginPage.plugin.syslog.property.flush_limit': 'cache size',
-  'PluginPage.plugin.syslog.property.sock_type': 'protocol type',
-  'PluginPage.plugin.syslog.property.max_retry_times': 'number of retries',
-  'PluginPage.plugin.syslog.property.retry_interval': 'retry interval(milliseconds)',
-  'PluginPage.plugin.syslog.property.pool_size': 'connection pool size',
-
-  'PluginPage.plugin.tcp-logger.desc': 'Relate to the TCP log server',
-  'PluginPage.plugin.tcp-logger.property.host': 'log server address',
-  'PluginPage.plugin.tcp-logger.property.port': 'log server port',
-  'PluginPage.plugin.tcp-logger.property.timeout': 'timeout',
-  'PluginPage.plugin.tcp-logger.property.tls': 'open SSL',
-  'PluginPage.plugin.tcp-logger.property.tls_options': 'TLS selection',
-
-  'PluginPage.plugin.udp-logger.desc': 'Relate to the UDP log server',
-  'PluginPage.plugin.udp-logger.property.host': 'log server address',
-  'PluginPage.plugin.udp-logger.property.port': 'log server port',
-  'PluginPage.plugin.udp-logger.property.timeout': 'timeout',
-
-  'PluginPage.plugin.zipkin.desc': 'Relate to zipkin',
-  'PluginPage.plugin.zipkin.property.endpoint': 'endpoint',
-  'PluginPage.plugin.zipkin.property.endpoint.extra': 'For example: http://127.0.0.1:9411/api/v2/spans',
-  'PluginPage.plugin.zipkin.property.sample_ratio': 'sampling rate',
-  'PluginPage.plugin.zipkin.property.service_name': 'service name',
-  'PluginPage.plugin.zipkin.property.server_addr': 'gateway instance IP',
-  'PluginPage.plugin.zipkin.property.server_addr.extra': 'default value is Nginx variable server_addr',
-
-  'PluginPage.plugin.skywalking.desc': 'Relate to Apache Skywalking',
-  'PluginPage.plugin.skywalking.property.endpoint': 'endpoint',
-  'PluginPage.plugin.skywalking.property.endpoint.extra': 'For example: http://127.0.0.1:12800',
-  'PluginPage.plugin.skywalking.property.sample_ratio': 'sampling rate',
-  'PluginPage.plugin.skywalking.property.service_name': 'service name',
-
-  'PluginPage.plugin.serverless-pre-function.desc': 'Runs the specified Lua function at the beginning of the specified phase',
-  'PluginPage.plugin.serverless-pre-function.property.phase': 'run phase',
-  'PluginPage.plugin.serverless-pre-function.property.functions': 'the set of functions to run',
-
-  'PluginPage.plugin.serverless-post-function.desc': 'Runs the specified Lua function at the ending of the specified phase',
-  'PluginPage.plugin.serverless-post-function.property.phase': 'run phase',
-  'PluginPage.plugin.serverless-post-function.property.functions': 'the set of functions to run',
-
-  'PluginPage.plugin.basic-auth.desc': 'basic auth plugin',
-  'PluginPage.plugin.jwt-auth.desc': 'JWT authentication plugin',
-  'PluginPage.plugin.key-auth.desc': 'key auth plugin',
-  'PluginPage.plugin.wolf-rbac.desc': 'Relate to wolf RBAC service',
-  'PluginPage.plugin.openid-connect.desc': 'Open ID Connect(OIDC) plugin provide the ability to deal with external certification services',
-
-  'PluginPage.plugin.redirect.desc': 'redirect plugin',
-  'PluginPage.plugin.proxy-rewrite.desc': 'proxy rewrite plugin, which can rewrite client request',
-  'PluginPage.plugin.mqtt-proxy.desc':
+  'PluginPage.card.response-rewrite.desc': 'The plugin supports modifying the body and header information returned by the upstream service',
+  'PluginPage.card.response-rewrite.property.status_code': 'status code',
+  'PluginPage.card.response-rewrite.property.body': 'response body',
+  'PluginPage.card.response-rewrite.property.body_base64': 'Whether the response body requires base64 decoding',
+  'PluginPage.card.response-rewrite.property.headers': 'HTTP header',
+
+  'PluginPage.card.syslog.desc': 'Relate to the syslog log server',
+  'PluginPage.card.syslog.property.host': 'log server address',
+  'PluginPage.card.syslog.property.port': 'log server port',
+  'PluginPage.card.syslog.property.timeout': 'timeout',
+  'PluginPage.card.syslog.property.tls': 'open SSL',
+  'PluginPage.card.syslog.property.flush_limit': 'cache size',
+  'PluginPage.card.syslog.property.sock_type': 'protocol type',
+  'PluginPage.card.syslog.property.max_retry_times': 'number of retries',
+  'PluginPage.card.syslog.property.retry_interval': 'retry interval(milliseconds)',
+  'PluginPage.card.syslog.property.pool_size': 'connection pool size',
+
+  'PluginPage.card.tcp-logger.desc': 'Relate to the TCP log server',
+  'PluginPage.card.tcp-logger.property.host': 'log server address',
+  'PluginPage.card.tcp-logger.property.port': 'log server port',
+  'PluginPage.card.tcp-logger.property.timeout': 'timeout',
+  'PluginPage.card.tcp-logger.property.tls': 'open SSL',
+  'PluginPage.card.tcp-logger.property.tls_options': 'TLS selection',
+
+  'PluginPage.card.udp-logger.desc': 'Relate to the UDP log server',
+  'PluginPage.card.udp-logger.property.host': 'log server address',
+  'PluginPage.card.udp-logger.property.port': 'log server port',
+  'PluginPage.card.udp-logger.property.timeout': 'timeout',
+
+  'PluginPage.card.zipkin.desc': 'Relate to zipkin',
+  'PluginPage.card.zipkin.property.endpoint': 'endpoint',
+  'PluginPage.card.zipkin.property.endpoint.extra': 'For example: http://127.0.0.1:9411/api/v2/spans',
+  'PluginPage.card.zipkin.property.sample_ratio': 'sampling rate',
+  'PluginPage.card.zipkin.property.service_name': 'service name',
+  'PluginPage.card.zipkin.property.server_addr': 'gateway instance IP',
+  'PluginPage.card.zipkin.property.server_addr.extra': 'default value is Nginx variable server_addr',
+
+  'PluginPage.card.skywalking.desc': 'Relate to Apache Skywalking',
+  'PluginPage.card.skywalking.property.endpoint': 'endpoint',
+  'PluginPage.card.skywalking.property.endpoint.extra': 'For example: http://127.0.0.1:12800',
+  'PluginPage.card.skywalking.property.sample_ratio': 'sampling rate',
+  'PluginPage.card.skywalking.property.service_name': 'service name',
+
+  'PluginPage.card.serverless-pre-function.desc': 'Runs the specified Lua function at the beginning of the specified phase',
+  'PluginPage.card.serverless-pre-function.property.phase': 'run phase',
+  'PluginPage.card.serverless-pre-function.property.functions': 'the set of functions to run',
+
+  'PluginPage.card.serverless-post-function.desc': 'Runs the specified Lua function at the ending of the specified phase',
+  'PluginPage.card.serverless-post-function.property.phase': 'run phase',
+  'PluginPage.card.serverless-post-function.property.functions': 'the set of functions to run',
+
+  'PluginPage.card.basic-auth.desc': 'basic auth plugin',
+  'PluginPage.card.jwt-auth.desc': 'JWT authentication plugin',
+  'PluginPage.card.key-auth.desc': 'key auth plugin',
+  'PluginPage.card.wolf-rbac.desc': 'Relate to wolf RBAC service',
+  'PluginPage.card.openid-connect.desc': 'Open ID Connect(OIDC) plugin provide the ability to deal with external certification services',
+
+  'PluginPage.card.redirect.desc': 'redirect plugin',
+  'PluginPage.card.proxy-rewrite.desc': 'proxy rewrite plugin, which can rewrite client request',
+  'PluginPage.card.mqtt-proxy.desc':
     'mqtt-proxy plugin can achieve load balancing based on client_id of MQTT',
-  'PluginPage.plugin.grpc-transcoding.desc':
+  'PluginPage.card.grpc-transcoding.desc':
     'gRPC transform plugin can achieve HTTP(s) -> APISIX -> gRPC server',
-  'PluginPage.plugin.batch-requests.desc':
+  'PluginPage.card.batch-requests.desc':
     'batch-requests plugin can accept multiple requests at one time and initiate mutiple HTTP requests in the way of HTTP pipeline, merge the resules and return to client, which can significantly improve the request performance when the client needs to access multiple interfaces',
 
-  'PluginPage.plugin.node-status.desc': 'node-status',
-
-  'PluginPage.refer.documents':'Please refer to the official documents',
+  'PluginPage.card.node-status.desc': 'node-status',
+  'PluginPage.card.refer.documents':'Please refer to the official documents',
   
   'PluginPage.drawer.configure.plugin':'Configure plugin',
   'PluginPage.drawer.disabled':'Disabled',
   'PluginPage.drawer.enable':'Enable',
+  'PluginPage.drawer.cancel':'Cancel',
   'PluginPage.drawer.confirm':'Confirm',
   'PluginPage.drawer.is.enabled':'Is Enabled',
   'PluginPage.drawer.not.enabled':'Not Enabled',
diff --git a/src/components/PluginPage/locales/zh-CN.ts b/src/components/PluginPage/locales/zh-CN.ts
index c67b5aeee1..548132abb2 100644
--- a/src/components/PluginPage/locales/zh-CN.ts
+++ b/src/components/PluginPage/locales/zh-CN.ts
@@ -1,170 +1,171 @@
 export default {
-  'PluginPage.plugin.limit-conn.desc': '限制并发连接数',
-  'PluginPage.plugin.limit-conn.property.conn': 'conn',
-  'PluginPage.plugin.limit-conn.property.conn.extra': '最大并发连接数',
-  'PluginPage.plugin.limit-conn.property.burst': 'burst',
-  'PluginPage.plugin.limit-conn.property.burst.extra':
+  'PluginPage.card.limit-conn.desc': '限制并发连接数',
+  'PluginPage.card.limit-conn.property.conn': 'conn',
+  'PluginPage.card.limit-conn.property.conn.extra': '最大并发连接数',
+  'PluginPage.card.limit-conn.property.burst': 'burst',
+  'PluginPage.card.limit-conn.property.burst.extra':
     '并发连接数超过 conn，但是低于 conn + burst 时，请求将被延迟处理',
-  'PluginPage.plugin.limit-conn.property.default_conn_delay': '延迟时间',
-  'PluginPage.plugin.limit-conn.property.default_conn_delay.extra':
+  'PluginPage.card.limit-conn.property.default_conn_delay': '延迟时间',
+  'PluginPage.card.limit-conn.property.default_conn_delay.extra':
     '被延迟处理的请求，需要等待多少秒',
-  'PluginPage.plugin.limit-conn.property.key': 'key',
-  'PluginPage.plugin.limit-conn.property.key.extra': '用来做限制的依据',
-  'PluginPage.plugin.limit-conn.property.rejected_code': '拒绝状态码',
-  'PluginPage.plugin.limit-conn.property.rejected_code.extra':
+  'PluginPage.card.limit-conn.property.key': 'key',
+  'PluginPage.card.limit-conn.property.key.extra': '用来做限制的依据',
+  'PluginPage.card.limit-conn.property.rejected_code': '拒绝状态码',
+  'PluginPage.card.limit-conn.property.rejected_code.extra':
     '当并发连接数超过 conn + burst 的限制时，返回给终端的 HTTP 状态码',
 
-  'PluginPage.plugin.limit-count.desc': '在指定的时间范围内，限制总的请求次数',
-  'PluginPage.plugin.limit-count.property.count': '总请求次数',
-  'PluginPage.plugin.limit-count.property.count.extra': '指定时间窗口内的请求数量阈值',
-  'PluginPage.plugin.limit-count.property.time_window': '时间窗口',
-  'PluginPage.plugin.limit-count.property.time_window.extra':
+  'PluginPage.card.limit-count.desc': '在指定的时间范围内，限制总的请求次数',
+  'PluginPage.card.limit-count.property.count': '总请求次数',
+  'PluginPage.card.limit-count.property.count.extra': '指定时间窗口内的请求数量阈值',
+  'PluginPage.card.limit-count.property.time_window': '时间窗口',
+  'PluginPage.card.limit-count.property.time_window.extra':
     '时间窗口的大小（以秒为单位），超过这个时间，总请求次数就会重置',
-  'PluginPage.plugin.limit-count.property.key': 'key',
-  'PluginPage.plugin.limit-count.property.key.extra': '用来做请求计数的依据',
-  'PluginPage.plugin.limit-count.property.rejected_code': '拒绝状态码',
-  'PluginPage.plugin.limit-count.property.rejected_code.extra':
+  'PluginPage.card.limit-count.property.key': 'key',
+  'PluginPage.card.limit-count.property.key.extra': '用来做请求计数的依据',
+  'PluginPage.card.limit-count.property.rejected_code': '拒绝状态码',
+  'PluginPage.card.limit-count.property.rejected_code.extra':
     '当请求超过阈值时，返回给终端的 HTTP 状态码',
-  'PluginPage.plugin.limit-count.property.policy': '策略',
-  'PluginPage.plugin.limit-count.property.redis_host': '地址',
-  'PluginPage.plugin.limit-count.property.redis_host.extra': '用于集群限流的 Redis 节点地址',
-  'PluginPage.plugin.limit-count.property.redis_port': '端口',
-  'PluginPage.plugin.limit-count.property.redis_password': '密码',
-  'PluginPage.plugin.limit-count.property.redis_timeout': '超时时间（毫秒）',
-
-  'PluginPage.plugin.limit-req.desc': '限制请求速度的插件，基于漏桶算法',
-  'PluginPage.plugin.limit-req.property.rate': 'rate',
-  'PluginPage.plugin.limit-req.property.rate.extra': '每秒请求速率',
-  'PluginPage.plugin.limit-req.property.burst': 'burst',
-  'PluginPage.plugin.limit-req.property.burst.extra':
+  'PluginPage.card.limit-count.property.policy': '策略',
+  'PluginPage.card.limit-count.property.redis_host': '地址',
+  'PluginPage.card.limit-count.property.redis_host.extra': '用于集群限流的 Redis 节点地址',
+  'PluginPage.card.limit-count.property.redis_port': '端口',
+  'PluginPage.card.limit-count.property.redis_password': '密码',
+  'PluginPage.card.limit-count.property.redis_timeout': '超时时间（毫秒）',
+
+  'PluginPage.card.limit-req.desc': '限制请求速度的插件，基于漏桶算法',
+  'PluginPage.card.limit-req.property.rate': 'rate',
+  'PluginPage.card.limit-req.property.rate.extra': '每秒请求速率',
+  'PluginPage.card.limit-req.property.burst': 'burst',
+  'PluginPage.card.limit-req.property.burst.extra':
     '每秒请求速率超过 rate，但是低于 rate + burst 时，请求将被延迟处理',
-  'PluginPage.plugin.limit-req.property.key': 'key',
-  'PluginPage.plugin.limit-req.property.key.extra': '用来做请求计数的依据',
-  'PluginPage.plugin.limit-req.property.rejected_code': '拒绝状态码',
-  'PluginPage.plugin.limit-req.property.rejected_code.extra':
+  'PluginPage.card.limit-req.property.key': 'key',
+  'PluginPage.card.limit-req.property.key.extra': '用来做请求计数的依据',
+  'PluginPage.card.limit-req.property.rejected_code': '拒绝状态码',
+  'PluginPage.card.limit-req.property.rejected_code.extra':
     '速率超过 rate + burst 的限制时，返回给终端的 HTTP 状态码',
 
-  'PluginPage.plugin.cors.desc': 'CORS 插件可以为服务端启用 CORS 的返回头',
-  'PluginPage.plugin.cors.property.allow_origins': '允许跨域访问的 Origin',
-  'PluginPage.plugin.cors.property.allow_origins.extra': '比如：https://somehost.com:8081',
-  'PluginPage.plugin.cors.property.allow_methods': '允许跨域访问的 Method',
+  'PluginPage.card.cors.desc': 'CORS 插件可以为服务端启用 CORS 的返回头',
+  'PluginPage.card.cors.property.allow_origins': '允许跨域访问的 Origin',
+  'PluginPage.card.cors.property.allow_origins.extra': '比如：https://somehost.com:8081',
+  'PluginPage.card.cors.property.allow_methods': '允许跨域访问的 Method',
 
-  'PluginPage.plugin.fault-injection.desc': '故障注入插件，用来模拟各种后端故障和高延迟',
-  'PluginPage.plugin.fault-injection.property.http_status': 'HTTP 状态码',
-  'PluginPage.plugin.fault-injection.property.body': '响应体',
-  'PluginPage.plugin.fault-injection.property.duration': '延迟时间（秒）',
+  'PluginPage.card.fault-injection.desc': '故障注入插件，用来模拟各种后端故障和高延迟',
+  'PluginPage.card.fault-injection.property.http_status': 'HTTP 状态码',
+  'PluginPage.card.fault-injection.property.body': '响应体',
+  'PluginPage.card.fault-injection.property.duration': '延迟时间（秒）',
 
-  'PluginPage.plugin.http-logger.desc': 'http-logger 可以将日志数据请求推送到 HTTP/HTTPS 服务器',
-  'PluginPage.plugin.http-logger.property.uri': '日志服务器地址',
-  'PluginPage.plugin.http-logger.property.uri.extra': '比如：127.0.0.1:80/postendpoint?param=1',
+  'PluginPage.card.http-logger.desc': 'http-logger 可以将日志数据请求推送到 HTTP/HTTPS 服务器',
+  'PluginPage.card.http-logger.property.uri': '日志服务器地址',
+  'PluginPage.card.http-logger.property.uri.extra': '比如：127.0.0.1:80/postendpoint?param=1',
 
-  'PluginPage.plugin.ip-restriction.desc':
+  'PluginPage.card.ip-restriction.desc':
     'ip-restriction 可以把一批 IP 地址列入白名单或黑名单（二选一），时间复杂度是O(1)，并支持用 CIDR 来表示 IP 范围',
-  'PluginPage.plugin.ip-restriction.property.whitelist': '白名单',
-  'PluginPage.plugin.ip-restriction.property.blacklist': '黑名单',
+  'PluginPage.card.ip-restriction.property.whitelist': '白名单',
+  'PluginPage.card.ip-restriction.property.blacklist': '黑名单',
 
-  'PluginPage.plugin.kafka-logger.desc': '把接口请求日志以 JSON 的形式推送给外部 Kafka 集群',
-  'PluginPage.plugin.kafka-logger.property.broker_list': 'broker',
-  'PluginPage.plugin.kafka-logger.property.kafka_topic': 'topic',
+  'PluginPage.card.kafka-logger.desc': '把接口请求日志以 JSON 的形式推送给外部 Kafka 集群',
+  'PluginPage.card.kafka-logger.property.broker_list': 'broker',
+  'PluginPage.card.kafka-logger.property.kafka_topic': 'topic',
 
-  'PluginPage.plugin.prometheus.desc': '提供符合 prometheus 数据格式的 metrics 数据',
+  'PluginPage.card.prometheus.desc': '提供符合 prometheus 数据格式的 metrics 数据',
 
-  'PluginPage.plugin.proxy-cache.desc': '代理缓存插件，缓存后端服务的响应数据',
-  'PluginPage.plugin.proxy-cache.property.cache_zone': '缓存区域名',
-  'PluginPage.plugin.proxy-cache.property.cache_zone.extra':
+  'PluginPage.card.proxy-cache.desc': '代理缓存插件，缓存后端服务的响应数据',
+  'PluginPage.card.proxy-cache.property.cache_zone': '缓存区域名',
+  'PluginPage.card.proxy-cache.property.cache_zone.extra':
     ' 本地目录为 /tmp/区域名，修改默认区域名必须同时修改 config.yaml',
-  'PluginPage.plugin.proxy-cache.property.cache_key': '缓存 key',
-  'PluginPage.plugin.proxy-cache.property.cache_key.extra':
+  'PluginPage.card.proxy-cache.property.cache_key': '缓存 key',
+  'PluginPage.card.proxy-cache.property.cache_key.extra':
     '可以使用 Nginx 变量，例如：$host, $uri',
-  'PluginPage.plugin.proxy-cache.property.cache_bypass': '跳过缓存检索',
-  'PluginPage.plugin.proxy-cache.property.cache_bypass.extra':
+  'PluginPage.card.proxy-cache.property.cache_bypass': '跳过缓存检索',
+  'PluginPage.card.proxy-cache.property.cache_bypass.extra':
     '这里可以使用 Nginx 变量，当此参数的值不为空或非0时将会跳过缓存的检索',
-  'PluginPage.plugin.proxy-cache.property.cache_method': '缓存 Method',
-  'PluginPage.plugin.proxy-cache.property.cache_http_status': '缓存响应状态码',
-  'PluginPage.plugin.proxy-cache.property.hide_cache_headers': '隐藏缓存头',
-  'PluginPage.plugin.proxy-cache.property.hide_cache_headers.extra':
+  'PluginPage.card.proxy-cache.property.cache_method': '缓存 Method',
+  'PluginPage.card.proxy-cache.property.cache_http_status': '缓存响应状态码',
+  'PluginPage.card.proxy-cache.property.hide_cache_headers': '隐藏缓存头',
+  'PluginPage.card.proxy-cache.property.hide_cache_headers.extra':
     '是否将 Expires 和 Cache-Control 响应头返回给客户端',
-  'PluginPage.plugin.proxy-cache.property.no_cache': '不缓存的数据',
-  'PluginPage.plugin.proxy-cache.property.no_cache.extra':
+  'PluginPage.card.proxy-cache.property.no_cache': '不缓存的数据',
+  'PluginPage.card.proxy-cache.property.no_cache.extra':
     '这里可以使用 Nginx 变量, 当此参数的值不为空或非0时将不会缓存数据',
 
-  'PluginPage.plugin.proxy-mirror.desc': 'proxy mirror 代理镜像插件，提供了镜像客户端请求的能力',
-  'PluginPage.plugin.proxy-mirror.property.host': '镜像服务地址',
-  'PluginPage.plugin.proxy-mirror.property.host.extra':
+  'PluginPage.card.proxy-mirror.desc': 'proxy mirror 代理镜像插件，提供了镜像客户端请求的能力',
+  'PluginPage.card.proxy-mirror.property.host': '镜像服务地址',
+  'PluginPage.card.proxy-mirror.property.host.extra':
     '例如：http://127.0.0.1:9797。地址中需要包含 http 或 https，不能包含 URI 部分',
 
-  'PluginPage.plugin.response-rewrite.desc': '该插件支持修改上游服务返回的 body 和 header 信息',
-  'PluginPage.plugin.response-rewrite.property.status_code': '状态码',
-  'PluginPage.plugin.response-rewrite.property.body': '响应体',
-  'PluginPage.plugin.response-rewrite.property.body_base64': '响应体是否需要 base64 解码',
-  'PluginPage.plugin.response-rewrite.property.headers': 'HTTP 头',
-
-  'PluginPage.plugin.syslog.desc': '对接 syslog 日志服务器',
-  'PluginPage.plugin.syslog.property.host': '日志服务器地址',
-  'PluginPage.plugin.syslog.property.port': '日志服务器端口',
-  'PluginPage.plugin.syslog.property.timeout': '超时时间',
-  'PluginPage.plugin.syslog.property.tls': '开启 SSL',
-  'PluginPage.plugin.syslog.property.flush_limit': '缓存区大小',
-  'PluginPage.plugin.syslog.property.sock_type': '协议类型',
-  'PluginPage.plugin.syslog.property.max_retry_times': '重试次数',
-  'PluginPage.plugin.syslog.property.retry_interval': '重试间隔时间（毫秒）',
-  'PluginPage.plugin.syslog.property.pool_size': '连接池大小',
-
-  'PluginPage.plugin.tcp-logger.desc': '对接 TCP 日志服务器',
-  'PluginPage.plugin.tcp-logger.property.host': '日志服务器地址',
-  'PluginPage.plugin.tcp-logger.property.port': '日志服务器端口',
-  'PluginPage.plugin.tcp-logger.property.timeout': '超时时间',
-  'PluginPage.plugin.tcp-logger.property.tls': '开启 SSL',
-  'PluginPage.plugin.tcp-logger.property.tls_options': 'TLS 选型',
-
-  'PluginPage.plugin.udp-logger.desc': '对接 UDP 日志服务器',
-  'PluginPage.plugin.udp-logger.property.host': '日志服务器地址',
-  'PluginPage.plugin.udp-logger.property.port': '日志服务器端口',
-  'PluginPage.plugin.udp-logger.property.timeout': '超时时间',
-
-  'PluginPage.plugin.zipkin.desc': '对接 zipkin',
-  'PluginPage.plugin.zipkin.property.endpoint': 'endpoint',
-  'PluginPage.plugin.zipkin.property.endpoint.extra': '例如：http://127.0.0.1:9411/api/v2/spans',
-  'PluginPage.plugin.zipkin.property.sample_ratio': '采样率',
-  'PluginPage.plugin.zipkin.property.service_name': '服务名',
-  'PluginPage.plugin.zipkin.property.server_addr': '网关实例 IP',
-  'PluginPage.plugin.zipkin.property.server_addr.extra': '默认值是 Nginx 内置变量 server_addr',
-
-  'PluginPage.plugin.skywalking.desc': '对接 Apache Skywalking',
-  'PluginPage.plugin.skywalking.property.endpoint': 'endpoint',
-  'PluginPage.plugin.skywalking.property.endpoint.extra': '例如：http://127.0.0.1:12800',
-  'PluginPage.plugin.skywalking.property.sample_ratio': '采样率',
-  'PluginPage.plugin.skywalking.property.service_name': '服务名',
-
-  'PluginPage.plugin.serverless-pre-function.desc': '在指定阶段最开始的位置，运行指定的 Lua 函数',
-  'PluginPage.plugin.serverless-pre-function.property.phase': '运行阶段',
-  'PluginPage.plugin.serverless-pre-function.property.functions': '运行的函数集',
-
-  'PluginPage.plugin.serverless-post-function.desc': '在指定阶段最后的位置，运行指定的 Lua 函数',
-  'PluginPage.plugin.serverless-post-function.property.phase': '运行阶段',
-  'PluginPage.plugin.serverless-post-function.property.functions': '运行的函数集',
-
-  'PluginPage.plugin.basic-auth.desc': 'basic auth 插件',
-  'PluginPage.plugin.jwt-auth.desc': 'JWT 认证插件',
-  'PluginPage.plugin.key-auth.desc': 'key auth 插件',
-  'PluginPage.plugin.wolf-rbac.desc': '对接 wolf RBAC 服务',
-  'PluginPage.plugin.openid-connect.desc': 'Open ID Connect(OIDC) 插件提供对接外部认证服务的能力',
-
-  'PluginPage.plugin.redirect.desc': '重定向插件',
-  'PluginPage.plugin.proxy-rewrite.desc': 'proxy rewrite 代理改写插件，可以改写客户端请求',
-  'PluginPage.plugin.mqtt-proxy.desc':
+  'PluginPage.card.response-rewrite.desc': '该插件支持修改上游服务返回的 body 和 header 信息',
+  'PluginPage.card.response-rewrite.property.status_code': '状态码',
+  'PluginPage.card.response-rewrite.property.body': '响应体',
+  'PluginPage.card.response-rewrite.property.body_base64': '响应体是否需要 base64 解码',
+  'PluginPage.card.response-rewrite.property.headers': 'HTTP 头',
+
+  'PluginPage.card.syslog.desc': '对接 syslog 日志服务器',
+  'PluginPage.card.syslog.property.host': '日志服务器地址',
+  'PluginPage.card.syslog.property.port': '日志服务器端口',
+  'PluginPage.card.syslog.property.timeout': '超时时间',
+  'PluginPage.card.syslog.property.tls': '开启 SSL',
+  'PluginPage.card.syslog.property.flush_limit': '缓存区大小',
+  'PluginPage.card.syslog.property.sock_type': '协议类型',
+  'PluginPage.card.syslog.property.max_retry_times': '重试次数',
+  'PluginPage.card.syslog.property.retry_interval': '重试间隔时间（毫秒）',
+  'PluginPage.card.syslog.property.pool_size': '连接池大小',
+
+  'PluginPage.card.tcp-logger.desc': '对接 TCP 日志服务器',
+  'PluginPage.card.tcp-logger.property.host': '日志服务器地址',
+  'PluginPage.card.tcp-logger.property.port': '日志服务器端口',
+  'PluginPage.card.tcp-logger.property.timeout': '超时时间',
+  'PluginPage.card.tcp-logger.property.tls': '开启 SSL',
+  'PluginPage.card.tcp-logger.property.tls_options': 'TLS 选型',
+
+  'PluginPage.card.udp-logger.desc': '对接 UDP 日志服务器',
+  'PluginPage.card.udp-logger.property.host': '日志服务器地址',
+  'PluginPage.card.udp-logger.property.port': '日志服务器端口',
+  'PluginPage.card.udp-logger.property.timeout': '超时时间',
+
+  'PluginPage.card.zipkin.desc': '对接 zipkin',
+  'PluginPage.card.zipkin.property.endpoint': 'endpoint',
+  'PluginPage.card.zipkin.property.endpoint.extra': '例如：http://127.0.0.1:9411/api/v2/spans',
+  'PluginPage.card.zipkin.property.sample_ratio': '采样率',
+  'PluginPage.card.zipkin.property.service_name': '服务名',
+  'PluginPage.card.zipkin.property.server_addr': '网关实例 IP',
+  'PluginPage.card.zipkin.property.server_addr.extra': '默认值是 Nginx 内置变量 server_addr',
+
+  'PluginPage.card.skywalking.desc': '对接 Apache Skywalking',
+  'PluginPage.card.skywalking.property.endpoint': 'endpoint',
+  'PluginPage.card.skywalking.property.endpoint.extra': '例如：http://127.0.0.1:12800',
+  'PluginPage.card.skywalking.property.sample_ratio': '采样率',
+  'PluginPage.card.skywalking.property.service_name': '服务名',
+
+  'PluginPage.card.serverless-pre-function.desc': '在指定阶段最开始的位置，运行指定的 Lua 函数',
+  'PluginPage.card.serverless-pre-function.property.phase': '运行阶段',
+  'PluginPage.card.serverless-pre-function.property.functions': '运行的函数集',
+
+  'PluginPage.card.serverless-post-function.desc': '在指定阶段最后的位置，运行指定的 Lua 函数',
+  'PluginPage.card.serverless-post-function.property.phase': '运行阶段',
+  'PluginPage.card.serverless-post-function.property.functions': '运行的函数集',
+
+  'PluginPage.card.basic-auth.desc': 'basic auth 插件',
+  'PluginPage.card.jwt-auth.desc': 'JWT 认证插件',
+  'PluginPage.card.key-auth.desc': 'key auth 插件',
+  'PluginPage.card.wolf-rbac.desc': '对接 wolf RBAC 服务',
+  'PluginPage.card.openid-connect.desc': 'Open ID Connect(OIDC) 插件提供对接外部认证服务的能力',
+
+  'PluginPage.card.redirect.desc': '重定向插件',
+  'PluginPage.card.proxy-rewrite.desc': 'proxy rewrite 代理改写插件，可以改写客户端请求',
+  'PluginPage.card.mqtt-proxy.desc':
     'mqtt-proxy 插件可以帮助你根据 MQTT 的 client_id 实现动态负载均衡',
-  'PluginPage.plugin.grpc-transcoding.desc':
+  'PluginPage.card.grpc-transcoding.desc':
     'gRPC 转换插件，实现 HTTP(s) -> APISIX -> gRPC server 的转换',
-  'PluginPage.plugin.batch-requests.desc':
+  'PluginPage.card.batch-requests.desc':
     'batch-requests 插件可以一次接受多个请求并以 http pipeline 的方式在网关发起多个 http 请求，合并结果后再返回客户端，这在客户端需要访问多个接口时可以显著地提升请求性能',
 
-  'PluginPage.plugin.node-status.desc': 'node-status 节点状态',
+  'PluginPage.card.node-status.desc': '节点状态',
+  'PluginPage.card.refer.documents':'请查阅官方文档',
 
-  'PluginPage.refer.documents':'请查阅官方文档',
   'PluginPage.drawer.configure.plugin':'配置插件',
   'PluginPage.drawer.disabled':'禁用',
   'PluginPage.drawer.enable':'启用',
+  'PluginPage.drawer.cancel':'取消',
   'PluginPage.drawer.confirm':'确认',
   'PluginPage.drawer.is.enabled':'已启用',
   'PluginPage.drawer.not.enabled':'未启用',