diff --git a/web/config/router.config.js b/web/config/router.config.js
index d94334b3..867d3e46 100644
--- a/web/config/router.config.js
+++ b/web/config/router.config.js
@@ -18,7 +18,7 @@ export default [
     authority: ["admin", "user"],
     routes: [
       // cluster
-      { path: "/", redirect: "/cluster/overview" },
+      { path: "/", redirect: "/cluster/metrics" },
       {
         path: "/cluster",
         name: "cluster",
@@ -33,20 +33,20 @@ export default [
           //           { path: '/', redirect: '/' },
           //         ],
           //       },
-          {
-            path: "/cluster/overview",
-            name: "overview",
-            component: "./Cluster/NewOverview",
-            // hideInMenu: true,
-            routes: [{ path: "/", redirect: "/" }],
-          },
-          {
-            path: "/cluster/monitoring/:cluster_id",
-            name: "cluster",
-            component: "./Cluster/ClusterMonitor",
-            hideInMenu: true,
-            routes: [{ path: "/", redirect: "/" }],
-          },
+          // {
+          //   path: "/cluster/overview",
+          //   name: "overview",
+          //   component: "./Cluster/NewOverview",
+          //   // hideInMenu: true,
+          //   routes: [{ path: "/", redirect: "/" }],
+          // },
+          // {
+          //   path: "/cluster/monitoring/:cluster_id",
+          //   name: "cluster",
+          //   component: "./Cluster/ClusterMonitor",
+          //   hideInMenu: true,
+          //   routes: [{ path: "/", redirect: "/" }],
+          // },
           {
             path: "/cluster/metrics/",
             name: "monitoring",
@@ -101,243 +101,243 @@ export default [
       // },
 
       //alerting
-      {
-        path: "/alerting",
-        name: "alerting",
-        icon: "alert",
-        routes: [
-          {
-            routes: [{ path: "/", redirect: "/" }],
-            path: "/alerting/overview",
-            component: "./Alerting/pages/Overview/Overview",
-            name: "overview",
-          },
-          {
-            routes: [{ path: "/", redirect: "/" }],
-            path: "/alerting/monitor",
-            component: "./Alerting/index",
-            name: "monitor",
-          },
-          {
-            routes: [{ path: "/", redirect: "/" }],
-            path: "/alerting/destination",
-            component: "./Alerting/destination",
-            name: "destination",
-          },
-        ],
-      },
+      // {
+      //   path: "/alerting",
+      //   name: "alerting",
+      //   icon: "alert",
+      //   routes: [
+      //     {
+      //       routes: [{ path: "/", redirect: "/" }],
+      //       path: "/alerting/overview",
+      //       component: "./Alerting/pages/Overview/Overview",
+      //       name: "overview",
+      //     },
+      //     {
+      //       routes: [{ path: "/", redirect: "/" }],
+      //       path: "/alerting/monitor",
+      //       component: "./Alerting/index",
+      //       name: "monitor",
+      //     },
+      //     {
+      //       routes: [{ path: "/", redirect: "/" }],
+      //       path: "/alerting/destination",
+      //       component: "./Alerting/destination",
+      //       name: "destination",
+      //     },
+      //   ],
+      // },
 
       //data
-      {
-        path: "/data",
-        name: "data",
-        icon: "database",
-        routes: [
-          // {
-          //   path: '/data/overview',
-          //   name: 'overview',
-          //   component: './DataManagement/IndexSummary',
-          //   routes:[
-          //     { path: '/', redirect: '/' },
-          //   ],
-          // },
-          {
-            path: "/data/index",
-            name: "index",
-            component: "./DataManagement/Index",
-            routes: [{ path: "/", redirect: "/" }],
-          },
-          // {
-          //   path: '/data/document',
-          //   name: 'document',
-          //   component: './DataManagement/Document',
-          //   routes:[
-          //     { path: '/', redirect: '/' },
-          //   ],
-          // },
-          // {
-          //   path: '/data/template',
-          //   name: 'template',
-          //   component: './DataManagement/IndexTemplate',
-          //   routes:[
-          //     { path: '/', redirect: '/' },
-          //   ],
-          // },
-          // {
-          //   path: '/data/lifecycle',
-          //   name: 'lifecycle',
-          //   component: './DataManagement/IndexLifeCycle',
-          //   routes:[
-          //     { path: '/', redirect: '/' },
-          //   ],
-          // },
-          {
-            routes: [{ path: "/", redirect: "/" }],
-            path: "/data/discover",
-            name: "discover",
-            component: "./DataManagement/Discover",
-          },
-          {
-            routes: [{ path: "/", redirect: "/" }],
-            path: "/data/views/",
-            name: "indexPatterns",
-            component: "./DataManagement/IndexPatterns",
-          },
-        ],
-      },
+      // {
+      //   path: "/data",
+      //   name: "data",
+      //   icon: "database",
+      //   routes: [
+      //     // {
+      //     //   path: '/data/overview',
+      //     //   name: 'overview',
+      //     //   component: './DataManagement/IndexSummary',
+      //     //   routes:[
+      //     //     { path: '/', redirect: '/' },
+      //     //   ],
+      //     // },
+      //     {
+      //       path: "/data/index",
+      //       name: "index",
+      //       component: "./DataManagement/Index",
+      //       routes: [{ path: "/", redirect: "/" }],
+      //     },
+      //     // {
+      //     //   path: '/data/document',
+      //     //   name: 'document',
+      //     //   component: './DataManagement/Document',
+      //     //   routes:[
+      //     //     { path: '/', redirect: '/' },
+      //     //   ],
+      //     // },
+      //     // {
+      //     //   path: '/data/template',
+      //     //   name: 'template',
+      //     //   component: './DataManagement/IndexTemplate',
+      //     //   routes:[
+      //     //     { path: '/', redirect: '/' },
+      //     //   ],
+      //     // },
+      //     // {
+      //     //   path: '/data/lifecycle',
+      //     //   name: 'lifecycle',
+      //     //   component: './DataManagement/IndexLifeCycle',
+      //     //   routes:[
+      //     //     { path: '/', redirect: '/' },
+      //     //   ],
+      //     // },
+      //     {
+      //       routes: [{ path: "/", redirect: "/" }],
+      //       path: "/data/discover",
+      //       name: "discover",
+      //       component: "./DataManagement/Discover",
+      //     },
+      //     {
+      //       routes: [{ path: "/", redirect: "/" }],
+      //       path: "/data/views/",
+      //       name: "indexPatterns",
+      //       component: "./DataManagement/IndexPatterns",
+      //     },
+      //   ],
+      // },
 
       //search
-      {
-        path: "/search",
-        name: "search",
-        icon: "search",
-        routes: [
-          // {
-          //   path: '/search/overview',
-          //   name: 'overview',
-          //   component: './SearchManage/template/Template',
-          //   routes:[
-          //     { path: '/', redirect: '/' },
-          //   ],
-          // },
-          // {
-          //     path: '/search/template',
-          //     name: 'template',
-          //     component: './SearchManage/template/Template',
-          //     routes: [
-          //         {
-          //             path: '/search/template',
-          //             redirect: '/search/template/template',
-          //         },
-          //         {
-          //             path: '/search/template/template',
-          //             component: './SearchManage/template/SearchTemplate',
-          //             routes:[
-          //               { path: '/', redirect: '/' },
-          //             ],
-          //         },
-          //         {
-          //             path: '/search/template/:cluster_id',
-          //             component: './SearchManage/template/SearchTemplate',
-          //             routes:[
-          //               { path: '/', redirect: '/' },
-          //             ],
-          //         },
-          //         {
-          //             path: '/search/template/history',
-          //             component: './SearchManage/template/History',
-          //             routes:[
-          //               { path: '/', redirect: '/' },
-          //             ],
-          //         },
-          //     ]
-          // },
-          {
-            path: "/search/alias",
-            name: "alias",
-            component: "./SearchManage/alias/Alias",
-            routes: [
-              {
-                path: "/search/alias",
-                redirect: "/search/alias/index",
-                // routes:[
-                //   { path: '/', redirect: '/' },
-                // ],
-              },
-              {
-                path: "/search/alias/index",
-                component: "./SearchManage/alias/AliasManage",
-                routes: [{ path: "/", redirect: "/" }],
-              },
-              {
-                path: "/search/alias/rule",
-                component: "./SearchManage/alias/Rule",
-                routes: [{ path: "/", redirect: "/" }],
-              },
-            ],
-          },
-          //  {
-          //   path: '/search/dict',
-          //   name: 'dict',
-          //   component: './SearchManage/dict/Dict',
-          //       routes: [
-          //           {
-          //               path: '/search/dict',
-          //               redirect: '/search/dict/professional',
-          //               // routes:[
-          //               //   { path: '/', redirect: '/' },
-          //               // ],
-          //           },
-          //           {
-          //               path: '/search/dict/professional',
-          //               component: './SearchManage/dict/Pro',
-          //               routes:[
-          //                 { path: '/', redirect: '/' },
-          //               ],
-          //           },
-          //           {
-          //               path: '/search/dict/common',
-          //               component: './SearchManage/dict/Common',
-          //               routes:[
-          //                 { path: '/', redirect: '/' },
-          //               ],
-          //           }
-          //       ]
-          // },
-          //  {
-          //   path: '/search/analyzer',
-          //   name: 'analyzer',
-          //   component: './SearchManage/analyzer/Analyzer',
-          //       routes: [
-          //           {
-          //               path: '/search/analyzer',
-          //               redirect: '/search/analyzer/manage',
-          //           },
-          //           {
-          //               path: '/search/analyzer/manage',
-          //               component: './SearchManage/analyzer/Manage',
-          //               routes:[
-          //                 { path: '/', redirect: '/' },
-          //               ],
-          //           },
-          //           {
-          //               path: '/search/analyzer/test',
-          //               component: './SearchManage/analyzer/AnalyzerTest',
-          //               routes:[
-          //                 { path: '/', redirect: '/' },
-          //               ],
-          //           }
-          //       ]
-          // }
-          //, {
-          //  path: '/search/nlp',
-          // name: 'nlp',
-          // component: './SearchManage/nlp/NLP',
-          // routes: [
-          //    {
-          //        path: '/search/nlp',
-          //        redirect: '/search/nlp/query',
-          //    },
-          //    {
-          //       path: '/search/nlp/query',
-          //        component: './SearchManage/nlp/Query',
-          //  },
-          //  {
-          //      path: '/search/nlp/intention',
-          //     component: './SearchManage/nlp/Intention',
-          // },
-          // {
-          //     path: '/search/nlp/knowledge',
-          //      component: './SearchManage/nlp/Knowledge',
-          //  },
-          // {
-          //      path: '/search/nlp/text',
-          //      component: './SearchManage/nlp/Text',
-          //     }
-          //]
-          //},
-        ],
-      },
+      // {
+      //   path: "/search",
+      //   name: "search",
+      //   icon: "search",
+      //   routes: [
+      //     // {
+      //     //   path: '/search/overview',
+      //     //   name: 'overview',
+      //     //   component: './SearchManage/template/Template',
+      //     //   routes:[
+      //     //     { path: '/', redirect: '/' },
+      //     //   ],
+      //     // },
+      //     // {
+      //     //     path: '/search/template',
+      //     //     name: 'template',
+      //     //     component: './SearchManage/template/Template',
+      //     //     routes: [
+      //     //         {
+      //     //             path: '/search/template',
+      //     //             redirect: '/search/template/template',
+      //     //         },
+      //     //         {
+      //     //             path: '/search/template/template',
+      //     //             component: './SearchManage/template/SearchTemplate',
+      //     //             routes:[
+      //     //               { path: '/', redirect: '/' },
+      //     //             ],
+      //     //         },
+      //     //         {
+      //     //             path: '/search/template/:cluster_id',
+      //     //             component: './SearchManage/template/SearchTemplate',
+      //     //             routes:[
+      //     //               { path: '/', redirect: '/' },
+      //     //             ],
+      //     //         },
+      //     //         {
+      //     //             path: '/search/template/history',
+      //     //             component: './SearchManage/template/History',
+      //     //             routes:[
+      //     //               { path: '/', redirect: '/' },
+      //     //             ],
+      //     //         },
+      //     //     ]
+      //     // },
+      //     {
+      //       path: "/search/alias",
+      //       name: "alias",
+      //       component: "./SearchManage/alias/Alias",
+      //       routes: [
+      //         {
+      //           path: "/search/alias",
+      //           redirect: "/search/alias/index",
+      //           // routes:[
+      //           //   { path: '/', redirect: '/' },
+      //           // ],
+      //         },
+      //         {
+      //           path: "/search/alias/index",
+      //           component: "./SearchManage/alias/AliasManage",
+      //           routes: [{ path: "/", redirect: "/" }],
+      //         },
+      //         {
+      //           path: "/search/alias/rule",
+      //           component: "./SearchManage/alias/Rule",
+      //           routes: [{ path: "/", redirect: "/" }],
+      //         },
+      //       ],
+      //     },
+      //     //  {
+      //     //   path: '/search/dict',
+      //     //   name: 'dict',
+      //     //   component: './SearchManage/dict/Dict',
+      //     //       routes: [
+      //     //           {
+      //     //               path: '/search/dict',
+      //     //               redirect: '/search/dict/professional',
+      //     //               // routes:[
+      //     //               //   { path: '/', redirect: '/' },
+      //     //               // ],
+      //     //           },
+      //     //           {
+      //     //               path: '/search/dict/professional',
+      //     //               component: './SearchManage/dict/Pro',
+      //     //               routes:[
+      //     //                 { path: '/', redirect: '/' },
+      //     //               ],
+      //     //           },
+      //     //           {
+      //     //               path: '/search/dict/common',
+      //     //               component: './SearchManage/dict/Common',
+      //     //               routes:[
+      //     //                 { path: '/', redirect: '/' },
+      //     //               ],
+      //     //           }
+      //     //       ]
+      //     // },
+      //     //  {
+      //     //   path: '/search/analyzer',
+      //     //   name: 'analyzer',
+      //     //   component: './SearchManage/analyzer/Analyzer',
+      //     //       routes: [
+      //     //           {
+      //     //               path: '/search/analyzer',
+      //     //               redirect: '/search/analyzer/manage',
+      //     //           },
+      //     //           {
+      //     //               path: '/search/analyzer/manage',
+      //     //               component: './SearchManage/analyzer/Manage',
+      //     //               routes:[
+      //     //                 { path: '/', redirect: '/' },
+      //     //               ],
+      //     //           },
+      //     //           {
+      //     //               path: '/search/analyzer/test',
+      //     //               component: './SearchManage/analyzer/AnalyzerTest',
+      //     //               routes:[
+      //     //                 { path: '/', redirect: '/' },
+      //     //               ],
+      //     //           }
+      //     //       ]
+      //     // }
+      //     //, {
+      //     //  path: '/search/nlp',
+      //     // name: 'nlp',
+      //     // component: './SearchManage/nlp/NLP',
+      //     // routes: [
+      //     //    {
+      //     //        path: '/search/nlp',
+      //     //        redirect: '/search/nlp/query',
+      //     //    },
+      //     //    {
+      //     //       path: '/search/nlp/query',
+      //     //        component: './SearchManage/nlp/Query',
+      //     //  },
+      //     //  {
+      //     //      path: '/search/nlp/intention',
+      //     //     component: './SearchManage/nlp/Intention',
+      //     // },
+      //     // {
+      //     //     path: '/search/nlp/knowledge',
+      //     //      component: './SearchManage/nlp/Knowledge',
+      //     //  },
+      //     // {
+      //     //      path: '/search/nlp/text',
+      //     //      component: './SearchManage/nlp/Text',
+      //     //     }
+      //     //]
+      //     //},
+      //   ],
+      // },
       //
       // //sync
       // {
diff --git a/web/src/components/GlobalHeader/RightContent.js b/web/src/components/GlobalHeader/RightContent.js
index 82ac01d8..16338c44 100644
--- a/web/src/components/GlobalHeader/RightContent.js
+++ b/web/src/components/GlobalHeader/RightContent.js
@@ -119,6 +119,14 @@ export default class GlobalHeaderRight extends PureComponent {
           {" "}
           <Icon type="code" />
         </a>
+        <a
+          className={styles.action}
+          target="_blank"
+          href="https://www.infinilabs.com"
+        >
+          {" "}
+          <Icon type="question-circle" />
+        </a>
 
         {/* <NoticeIcon
           className={styles.action}
@@ -172,7 +180,10 @@ export default class GlobalHeaderRight extends PureComponent {
         ) : (
           <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
         )} */}
-        <SelectLang className={styles.action} />
+        <a className={styles.action}>
+          <SelectLang />
+        </a>
+
         <div
           style={{
             display: this.state.consoleVisible ? "block" : "none",
diff --git a/web/src/components/SelectLang/index.js b/web/src/components/SelectLang/index.js
index 380c470b..1c22add5 100644
--- a/web/src/components/SelectLang/index.js
+++ b/web/src/components/SelectLang/index.js
@@ -1,8 +1,8 @@
-import React, { PureComponent } from 'react';
-import { formatMessage, setLocale, getLocale } from 'umi/locale';
-import { Menu, Icon, Dropdown } from 'antd';
-import classNames from 'classnames';
-import styles from './index.less';
+import React, { PureComponent } from "react";
+import { formatMessage, setLocale, getLocale } from "umi/locale";
+import { Menu, Icon, Dropdown } from "antd";
+import classNames from "classnames";
+import styles from "./index.less";
 
 export default class SelectLang extends PureComponent {
   changLang = ({ key }) => {
@@ -13,21 +13,24 @@ export default class SelectLang extends PureComponent {
     const { className } = this.props;
     const selectedLang = getLocale();
     const langMenu = (
-      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changLang}>
+      <Menu
+        className={styles.menu}
+        selectedKeys={[selectedLang]}
+        onClick={this.changLang}
+      >
         <Menu.Item key="zh-CN">
           <span role="img" aria-label="简体中文">
             🇨🇳
-          </span>{' '}
+          </span>{" "}
           简体中文
         </Menu.Item>
-        
+
         <Menu.Item key="en-US">
           <span role="img" aria-label="English">
             🇬🇧
-          </span>{' '}
+          </span>{" "}
           English
         </Menu.Item>
-        
       </Menu>
     );
     return (
@@ -35,7 +38,7 @@ export default class SelectLang extends PureComponent {
         <Icon
           type="global"
           className={classNames(styles.dropDown, className)}
-          title={formatMessage({ id: 'navBar.lang' })}
+          title={formatMessage({ id: "navBar.lang" })}
         />
       </Dropdown>
     );
diff --git a/web/src/components/kibana/console/modules/mappings/mappings.js b/web/src/components/kibana/console/modules/mappings/mappings.js
index f446b925..6c09e1af 100644
--- a/web/src/components/kibana/console/modules/mappings/mappings.js
+++ b/web/src/components/kibana/console/modules/mappings/mappings.js
@@ -30,9 +30,9 @@
  * GitHub history for details.
  */
 
-import $ from 'jquery';
-import _ from 'lodash';
-import * as es from '../es';
+import $ from "jquery";
+import _ from "lodash";
+import * as es from "../es";
 
 // NOTE: If this value ever changes to be a few seconds or less, it might introduce flakiness
 // due to timing issues in our app.js tests.
@@ -45,7 +45,7 @@ let templates = {};
 //new add
 let commands = [];
 const mappingObj = {};
-let clusterID = '';
+let clusterID = "";
 
 export function expandAliases(indicesOrAliases, clusterID) {
   const clusterPerAliasIndexes = perAliasIndexes[clusterID] || {};
@@ -56,10 +56,10 @@ export function expandAliases(indicesOrAliases, clusterID) {
     return indicesOrAliases;
   }
 
-  if (typeof indicesOrAliases === 'string') {
+  if (typeof indicesOrAliases === "string") {
     indicesOrAliases = [indicesOrAliases];
   }
-  indicesOrAliases = $.map(indicesOrAliases, function (iOrA) {
+  indicesOrAliases = $.map(indicesOrAliases, function(iOrA) {
     if (clusterPerAliasIndexes[iOrA]) {
       return clusterPerAliasIndexes[iOrA];
     }
@@ -68,7 +68,7 @@ export function expandAliases(indicesOrAliases, clusterID) {
   let ret = [].concat.apply([], indicesOrAliases);
   ret.sort();
   let last;
-  ret = $.map(ret, function (v) {
+  ret = $.map(ret, function(v) {
     const r = last === v ? null : v;
     last = v;
     return r;
@@ -83,24 +83,24 @@ export function getTemplates(key) {
 }
 
 export function getFields(indices, types, key) {
-  key = key || clusterID
-  const clusterPerIndexTypes = perIndexTypes[key] || {}; 
+  key = key || clusterID;
+  const clusterPerIndexTypes = perIndexTypes[key] || {};
   // get fields for indices and types. Both can be a list, a string or null (meaning all).
   let ret = [];
   indices = expandAliases(indices, key);
 
-  if (typeof indices === 'string') {
+  if (typeof indices === "string") {
     const typeDict = clusterPerIndexTypes[indices];
     if (!typeDict) {
       return [];
     }
 
-    if (typeof types === 'string') {
+    if (typeof types === "string") {
       const f = typeDict[types];
       ret = f ? f : [];
     } else {
       // filter what we need
-      $.each(typeDict, function (type, fields) {
+      $.each(typeDict, function(type, fields) {
         if (!types || types.length === 0 || $.inArray(type, types) !== -1) {
           ret.push(fields);
         }
@@ -110,36 +110,40 @@ export function getFields(indices, types, key) {
     }
   } else {
     // multi index mode.
-    $.each(clusterPerIndexTypes, function (index) {
-      if (!indices || indices.length === 0 || $.inArray(index, indices) !== -1) {
+    $.each(clusterPerIndexTypes, function(index) {
+      if (
+        !indices ||
+        indices.length === 0 ||
+        $.inArray(index, indices) !== -1
+      ) {
         ret.push(getFields(index, types, key));
       }
     });
     ret = [].concat.apply([], ret);
   }
 
-  return _.uniqBy(ret, function (f) {
-    return f.name + ':' + f.type;
+  return _.uniqBy(ret, function(f) {
+    return f.name + ":" + f.type;
   });
 }
 
 export function getTypes(indices, clusterID) {
-  const clusterPerIndexTypes = perIndexTypes[clusterID] || {}; 
+  const clusterPerIndexTypes = perIndexTypes[clusterID] || {};
   let ret = [];
   indices = expandAliases(indices, clusterID);
-  if (typeof indices === 'string') {
+  if (typeof indices === "string") {
     const typeDict = clusterPerIndexTypes[indices];
     if (!typeDict) {
       return [];
     }
 
     // filter what we need
-    $.each(typeDict, function (type) {
+    $.each(typeDict, function(type) {
       ret.push(type);
     });
   } else {
     // multi index mode.
-    $.each(clusterPerIndexTypes, function (index) {
+    $.each(clusterPerIndexTypes, function(index) {
       if (!indices || $.inArray(index, indices) !== -1) {
         ret.push(getTypes(index, clusterID));
       }
@@ -151,17 +155,17 @@ export function getTypes(indices, clusterID) {
 }
 
 export function getIndices(includeAliases, key) {
-  if(typeof key != 'string') {
-    key = key?.editor?.clusterID || clusterID
+  if (typeof key != "string") {
+    key = key?.editor?.clusterID || clusterID;
   }
   const clusterPerIndexTypes = perIndexTypes[key] || {};
   const clusterPerAliasIndexes = perAliasIndexes[key] || [];
   const ret = [];
-  $.each(clusterPerIndexTypes, function (index) {
+  $.each(clusterPerIndexTypes, function(index) {
     ret.push(index);
   });
-  if (typeof includeAliases === 'undefined' ? true : includeAliases) {
-    $.each(clusterPerAliasIndexes, function (alias) {
+  if (typeof includeAliases === "undefined" ? true : includeAliases) {
+    $.each(clusterPerAliasIndexes, function(alias) {
       ret.push(alias);
     });
   }
@@ -175,10 +179,10 @@ function getFieldNamesFromFieldMapping(fieldName, fieldMapping) {
   let nestedFields;
 
   function applyPathSettings(nestedFieldNames) {
-    const pathType = fieldMapping.path || 'full';
-    if (pathType === 'full') {
-      return $.map(nestedFieldNames, function (f) {
-        f.name = fieldName + '.' + f.name;
+    const pathType = fieldMapping.path || "full";
+    if (pathType === "full") {
+      return $.map(nestedFieldNames, function(f) {
+        f.name = fieldName + "." + f.name;
         return f;
       });
     }
@@ -200,7 +204,10 @@ function getFieldNamesFromFieldMapping(fieldName, fieldMapping) {
   }
 
   if (fieldMapping.fields) {
-    nestedFields = $.map(fieldMapping.fields, function (fieldMapping, fieldName) {
+    nestedFields = $.map(fieldMapping.fields, function(
+      fieldMapping,
+      fieldName
+    ) {
       return getFieldNamesFromFieldMapping(fieldName, fieldMapping);
     });
     nestedFields = applyPathSettings(nestedFields);
@@ -212,13 +219,13 @@ function getFieldNamesFromFieldMapping(fieldName, fieldMapping) {
 }
 
 function getFieldNamesFromProperties(properties = {}) {
-  const fieldList = $.map(properties, function (fieldMapping, fieldName) {
+  const fieldList = $.map(properties, function(fieldMapping, fieldName) {
     return getFieldNamesFromFieldMapping(fieldName, fieldMapping);
   });
 
   // deduping
-  return _.uniqBy(fieldList, function (f) {
-    return f.name + ':' + f.type;
+  return _.uniqBy(fieldList, function(f) {
+    return f.name + ":" + f.type;
   });
 }
 
@@ -228,29 +235,31 @@ function loadTemplates(templatesObject = {}, clusterID) {
 }
 
 function getRawBody(body) {
-  if(body.response_body){
+  if (body.response_body) {
     return JSON.parse(body.response_body);
   }
   return body;
 }
 
 export function loadMappings(mappings, clusterID) {
-  mappings = getRawBody(mappings)
+  mappings = getRawBody(mappings);
   let clusterPerIndexTypes = {};
 
-  $.each(mappings, function (index, indexMapping) {
+  $.each(mappings, function(index, indexMapping) {
     const normalizedIndexMappings = {};
     // Migrate 1.0.0 mappings. This format has changed, so we need to extract the underlying mapping.
     if (indexMapping.mappings && _.keys(indexMapping).length === 1) {
       indexMapping = indexMapping.mappings;
     }
 
-    $.each(indexMapping, function (typeName, typeMapping) {
-      if (typeName === 'properties') {
+    $.each(indexMapping, function(typeName, typeMapping) {
+      if (typeName === "properties") {
         const fieldList = getFieldNamesFromProperties(typeMapping);
         normalizedIndexMappings[typeName] = fieldList;
       } else {
-        normalizedIndexMappings[typeName] = getFieldNamesFromProperties(typeMapping.properties); // for es 2.x, 5.x, 6.x
+        normalizedIndexMappings[typeName] = getFieldNamesFromProperties(
+          typeMapping.properties
+        ); // for es 2.x, 5.x, 6.x
       }
     });
     clusterPerIndexTypes[index] = normalizedIndexMappings;
@@ -259,17 +268,17 @@ export function loadMappings(mappings, clusterID) {
 }
 
 export function loadAliases(aliases, clusterID) {
-  aliases = getRawBody(aliases)
+  aliases = getRawBody(aliases);
   let clusterPerAliasIndexes = {};
-  $.each(aliases || {}, function (index, omdexAliases) {
+  $.each(aliases || {}, function(index, omdexAliases) {
     // verify we have an index defined. useful when mapping loading is disabled
     // clusterPerAliasIndexes[index] = clusterPerAliasIndexes[index] || {};
 
-    $.each(omdexAliases.aliases || {}, function (alias) {
+    $.each(omdexAliases.aliases || {}, function(alias) {
       if (alias === index) {
         return;
       } // alias which is identical to index means no index.
-      
+
       let curAliases = clusterPerAliasIndexes[alias];
       if (!curAliases) {
         curAliases = [];
@@ -290,18 +299,21 @@ export function clear() {
 
 function retrieveSettings(settingsKey, settingsToRetrieve, clusterID) {
   const settingKeyToPathMap = {
-    fields: '_mapping',
-    indices: '_aliases',
-    templates: '_template',
-    commands: 'commands/_search',
+    fields: "_mapping",
+    indices: "_aliases",
+    templates: "_template",
+    commands: "commands/_search",
   };
 
   // Fetch autocomplete info if setting is set to true, and if user has made changes.
   if (settingsToRetrieve[settingsKey] === true) {
-    if(settingsKey === 'commands'){
+    if (settingsKey === "commands") {
       return es.queryCommonCommands();
     }
-    return es.send('GET', settingKeyToPathMap[settingsKey], null, {clusterID, asSystemRequest: true});
+    return es.send("GET", settingKeyToPathMap[settingsKey], null, {
+      clusterID,
+      asSystemRequest: true,
+    });
   } else {
     const settingsPromise = new $.Deferred();
     if (settingsToRetrieve[settingsKey] === false) {
@@ -331,8 +343,8 @@ export function clearSubscriptions() {
   }
 }
 
-function getObject(value){
-  return typeof(value) === 'string' ? JSON.parse(value): value;
+function getObject(value) {
+  return typeof value === "string" ? JSON.parse(value) : value;
 }
 
 /**
@@ -340,17 +352,41 @@ function getObject(value){
  * @param settings Settings A way to retrieve the current settings
  * @param settingsToRetrieve any
  */
-export function retrieveAutoCompleteInfo(settings, settingsToRetrieve, clusterID) {
+export function retrieveAutoCompleteInfo(
+  settings,
+  settingsToRetrieve,
+  clusterID
+) {
   clearSubscriptions();
 
-  const mappingPromise = retrieveSettings('fields', settingsToRetrieve, clusterID);
-  const aliasesPromise = retrieveSettings('indices', settingsToRetrieve, clusterID);
-  const templatesPromise = retrieveSettings('templates', settingsToRetrieve, clusterID);
-  const commandsPromise = retrieveSettings('commands', settingsToRetrieve, clusterID);
+  const mappingPromise = retrieveSettings(
+    "fields",
+    settingsToRetrieve,
+    clusterID
+  );
+  const aliasesPromise = retrieveSettings(
+    "indices",
+    settingsToRetrieve,
+    clusterID
+  );
+  const templatesPromise = retrieveSettings(
+    "templates",
+    settingsToRetrieve,
+    clusterID
+  );
+  const commandsPromise = retrieveSettings(
+    "commands",
+    settingsToRetrieve,
+    clusterID
+  );
 
-
-  $.when(mappingPromise, aliasesPromise, templatesPromise, commandsPromise).done((mappings, aliases, templates, commands) => {
-    if(commands){
+  $.when(
+    mappingPromise,
+    aliasesPromise,
+    templatesPromise,
+    commandsPromise
+  ).done((mappings, aliases, templates, commands) => {
+    if (commands) {
       loadCommands(commands);
     }
     let mappingsResponse;
@@ -358,9 +394,11 @@ export function retrieveAutoCompleteInfo(settings, settingsToRetrieve, clusterID
       const maxMappingSize = mappings[0].length > 10 * 1024 * 1024;
       if (maxMappingSize) {
         console.warn(
-          `Mapping size is larger than 10MB (${mappings[0].length / 1024 / 1024} MB). Ignoring...`
+          `Mapping size is larger than 10MB (${mappings[0].length /
+            1024 /
+            1024} MB). Ignoring...`
         );
-        mappingsResponse = '[{}]';
+        mappingsResponse = "[{}]";
       } else {
         mappingsResponse = mappings[0];
       }
@@ -377,7 +415,7 @@ export function retrieveAutoCompleteInfo(settings, settingsToRetrieve, clusterID
 
     if (mappings && aliases) {
       // Trigger an update event with the mappings, aliases
-      $(mappingObj).trigger('update', [mappingsResponse, aliases[0]]);
+      $(mappingObj).trigger("update", [mappingsResponse, aliases[0]]);
     }
 
     // Schedule next request.
@@ -391,13 +429,13 @@ export function retrieveAutoCompleteInfo(settings, settingsToRetrieve, clusterID
   });
 }
 
-async function loadCommands(commandsPromise){
+async function loadCommands(commandsPromise) {
   const commandRes = await commandsPromise.json();
   const hits = commandRes.hits.hits;
-  if(hits && hits.length > 0){
-    hits.forEach((hit)=>{
+  if (hits && hits.length > 0) {
+    hits.forEach((hit) => {
       commands.push(hit);
-    })
+    });
   }
 }
 
@@ -405,10 +443,10 @@ export function pushCommand(cmd) {
   commands.push(cmd);
 }
 
-export function getCommands({editor}) {
+export function getCommands({ editor }) {
   const ret = [];
-  commands.forEach(command=>{
-    ret.push(command._source['title']);
+  commands.forEach((command) => {
+    ret.push(command._source["title"]);
   });
   return ret;
   // const curPosition = editor.getCurrentPosition();
@@ -427,12 +465,17 @@ export function getCommands({editor}) {
 }
 
 export function getCommand(title) {
-  const command = commands.filter(c=>{
-    return c._source['title'] == title;
-  })
+  const command = commands.filter((c) => {
+    return c._source["title"] == title;
+  });
   return command && command[0];
 }
 
+export function deleteCommand(id) {
+  commands = commands.filter((c) => {
+    return c._id != id;
+  });
+}
 export function setClusterID(id) {
   clusterID = id;
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/hooks/use_async.js b/web/src/lib/hooks/use_async.js
index 5b053e47..3b0d4b47 100644
--- a/web/src/lib/hooks/use_async.js
+++ b/web/src/lib/hooks/use_async.js
@@ -8,7 +8,7 @@ export default function useAsync(callback, dependencies = []) {
   const callbackMemoized = React.useCallback(() => {
     setLoading(true);
     setError(undefined);
-    setValue(undefined);
+    // setValue(undefined);
     callback()
       .then(setValue)
       .catch(setError)
diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
index ab955f21..8ac7be45 100644
--- a/web/src/locales/en-US.js
+++ b/web/src/locales/en-US.js
@@ -1,411 +1,421 @@
-import alert from './en-US/alert';
-import console from './en-US/console';
+import alert from "./en-US/alert";
+import console from "./en-US/console";
+import cluster from "./en-US/cluster";
 
 export default {
-  'navBar.lang': 'Languages',
+  "navBar.lang": "Languages",
 
-  'layout.user.appname':"INFINI SEARCH CENTER",
-  'layout.user.appslogon':"INFINI search center is the best search platform in the world",
-  'app.setting.appname':"Search Center",
+  "layout.user.appname": "INFINI SEARCH CENTER",
+  "layout.user.appslogon":
+    "INFINI search center is the best search platform in the world",
+  "app.setting.appname": "Search Center",
 
-
-  'layout.user.link.help': 'Help',
-  'layout.user.link.privacy': 'Privacy',
-  'layout.user.link.terms': 'Terms',
-  'validation.email.required': 'Please enter your email!',
-  'validation.email.wrong-format': 'The email address is in the wrong format!',
-  'validation.password.required': 'Please enter your password!',
-  'validation.password.twice': 'The passwords entered twice do not match!',
-  'validation.password.strength.msg':
+  "layout.user.link.help": "Help",
+  "layout.user.link.privacy": "Privacy",
+  "layout.user.link.terms": "Terms",
+  "validation.email.required": "Please enter your email!",
+  "validation.email.wrong-format": "The email address is in the wrong format!",
+  "validation.password.required": "Please enter your password!",
+  "validation.password.twice": "The passwords entered twice do not match!",
+  "validation.password.strength.msg":
     "Please enter at least 6 characters and don't use passwords that are easy to guess.",
-  'validation.password.strength.strong': 'Strength: strong',
-  'validation.password.strength.medium': 'Strength: medium',
-  'validation.password.strength.short': 'Strength: too short',
-  'validation.confirm-password.required': 'Please confirm your password!',
-  'validation.phone-number.required': 'Please enter your phone number!',
-  'validation.phone-number.wrong-format': 'Malformed phone number!',
-  'validation.verification-code.required': 'Please enter the verification code!',
-  'validation.title.required': 'Please enter a title',
-  'validation.date.required': 'Please select the start and end date',
-  'validation.goal.required': 'Please enter a description of the goal',
-  'validation.standard.required': 'Please enter a metric',
-  'form.optional': ' (optional) ',
-  'form.submit': 'Submit',
-  'form.save': 'Save',
-  'form.email.placeholder': 'Email',
-  'form.password.placeholder': 'Password',
-  'form.confirm-password.placeholder': 'Confirm password',
-  'form.phone-number.placeholder': 'Phone number',
-  'form.verification-code.placeholder': 'Verification code',
-  'form.title.label': 'Title',
-  'form.title.placeholder': 'Give the target a name',
-  'form.date.label': 'Start and end date',
-  'form.date.placeholder.start': 'Start date',
-  'form.date.placeholder.end': 'End date',
-  'form.goal.label': 'Goal description',
-  'form.goal.placeholder': 'Please enter your work goals',
-  'form.standard.label': 'Metrics',
-  'form.standard.placeholder': 'Please enter a metric',
-  'form.client.label': 'Client',
-  'form.client.label.tooltip': 'Target service object',
-  'form.client.placeholder':
-    'Please describe your customer service, internal customers directly @ Name / job number',
-  'form.invites.label': 'Inviting critics',
-  'form.invites.placeholder': 'Please direct @ Name / job number, you can invite up to 5 people',
-  'form.weight.label': 'Weight',
-  'form.weight.placeholder': 'Please enter weight',
-  'form.public.label': 'Target disclosure',
-  'form.public.label.help': 'Customers and invitees are shared by default',
-  'form.public.radio.public': 'Public',
-  'form.public.radio.partially-public': 'Partially public',
-  'form.public.radio.private': 'Private',
-  'form.publicUsers.placeholder': 'Open to',
-  'form.publicUsers.option.A': 'Colleague A',
-  'form.publicUsers.option.B': 'Colleague B',
-  'form.publicUsers.option.C': 'Colleague C',
-  'form.button.search': 'Search',
-  'form.button.new': 'New',
-  'form.button.create': 'Create',
-  'form.button.add': 'Add',
-  'form.button.edit': 'Edit',
-  'form.button.update': 'Update',
-  'form.button.save': 'Save',
-  'form.button.delete': 'Delete',
-  'form.button.cancel': 'Cancel',
-  'form.button.collapse': 'Collapse',
-  'form.button.advanced': 'Advanced',
-  'table.field.operation': 'Operation',
+  "validation.password.strength.strong": "Strength: strong",
+  "validation.password.strength.medium": "Strength: medium",
+  "validation.password.strength.short": "Strength: too short",
+  "validation.confirm-password.required": "Please confirm your password!",
+  "validation.phone-number.required": "Please enter your phone number!",
+  "validation.phone-number.wrong-format": "Malformed phone number!",
+  "validation.verification-code.required":
+    "Please enter the verification code!",
+  "validation.title.required": "Please enter a title",
+  "validation.date.required": "Please select the start and end date",
+  "validation.goal.required": "Please enter a description of the goal",
+  "validation.standard.required": "Please enter a metric",
+  "form.optional": " (optional) ",
+  "form.submit": "Submit",
+  "form.save": "Save",
+  "form.email.placeholder": "Email",
+  "form.password.placeholder": "Password",
+  "form.confirm-password.placeholder": "Confirm password",
+  "form.phone-number.placeholder": "Phone number",
+  "form.verification-code.placeholder": "Verification code",
+  "form.title.label": "Title",
+  "form.title.placeholder": "Give the target a name",
+  "form.date.label": "Start and end date",
+  "form.date.placeholder.start": "Start date",
+  "form.date.placeholder.end": "End date",
+  "form.goal.label": "Goal description",
+  "form.goal.placeholder": "Please enter your work goals",
+  "form.standard.label": "Metrics",
+  "form.standard.placeholder": "Please enter a metric",
+  "form.client.label": "Client",
+  "form.client.label.tooltip": "Target service object",
+  "form.client.placeholder":
+    "Please describe your customer service, internal customers directly @ Name / job number",
+  "form.invites.label": "Inviting critics",
+  "form.invites.placeholder":
+    "Please direct @ Name / job number, you can invite up to 5 people",
+  "form.weight.label": "Weight",
+  "form.weight.placeholder": "Please enter weight",
+  "form.public.label": "Target disclosure",
+  "form.public.label.help": "Customers and invitees are shared by default",
+  "form.public.radio.public": "Public",
+  "form.public.radio.partially-public": "Partially public",
+  "form.public.radio.private": "Private",
+  "form.publicUsers.placeholder": "Open to",
+  "form.publicUsers.option.A": "Colleague A",
+  "form.publicUsers.option.B": "Colleague B",
+  "form.publicUsers.option.C": "Colleague C",
+  "form.button.search": "Search",
+  "form.button.new": "New",
+  "form.button.create": "Create",
+  "form.button.add": "Add",
+  "form.button.edit": "Edit",
+  "form.button.update": "Update",
+  "form.button.save": "Save",
+  "form.button.delete": "Delete",
+  "form.button.cancel": "Cancel",
+  "form.button.collapse": "Collapse",
+  "form.button.advanced": "Advanced",
+  "table.field.operation": "Operation",
+  "form.button.next": "Next",
+  "form.button.pre": "Previous",
 
-  'component.globalHeader.search': 'Search',
-  'component.globalHeader.search.example1': 'Search example 1',
-  'component.globalHeader.search.example2': 'Search example 2',
-  'component.globalHeader.search.example3': 'Search example 3',
-  'component.globalHeader.help': 'Help',
-  'component.globalHeader.notification': 'Notification',
-  'component.globalHeader.notification.empty': 'You have viewed all notifications.',
-  'component.globalHeader.message': 'Message',
-  'component.globalHeader.message.empty': 'You have viewed all messsages.',
-  'component.globalHeader.event': 'Event',
-  'component.globalHeader.event.empty': 'You have viewed all events.',
-  'component.noticeIcon.clear': 'Clear',
-  'component.noticeIcon.cleared': 'Cleared',
-  'component.noticeIcon.empty': 'No notifications',
-  'menu.home': 'Home',
-  'menu.devtool': 'CONSOLE',
-  'menu.alerting': 'AERTING',
-  'menu.alerting.overview': 'OVERVIEW',
-  'menu.alerting.monitor': 'MONITORS',
-  'menu.alerting.destination': 'DESTINATIONS',
-  
-  'menu.cluster': 'CLUSTER',
-  'menu.cluster.overview': 'OVERVIEW',
-  'menu.cluster.monitoring': 'METRICS',
-  'menu.cluster.settings': 'SETTINGS',
-  'menu.cluster.logging': 'LOGS',
+  "component.globalHeader.search": "Search",
+  "component.globalHeader.search.example1": "Search example 1",
+  "component.globalHeader.search.example2": "Search example 2",
+  "component.globalHeader.search.example3": "Search example 3",
+  "component.globalHeader.help": "Help",
+  "component.globalHeader.notification": "Notification",
+  "component.globalHeader.notification.empty":
+    "You have viewed all notifications.",
+  "component.globalHeader.message": "Message",
+  "component.globalHeader.message.empty": "You have viewed all messsages.",
+  "component.globalHeader.event": "Event",
+  "component.globalHeader.event.empty": "You have viewed all events.",
+  "component.noticeIcon.clear": "Clear",
+  "component.noticeIcon.cleared": "Cleared",
+  "component.noticeIcon.empty": "No notifications",
+  "menu.home": "Home",
+  "menu.devtool": "CONSOLE",
+  "menu.alerting": "AERTING",
+  "menu.alerting.overview": "OVERVIEW",
+  "menu.alerting.monitor": "MONITORS",
+  "menu.alerting.destination": "DESTINATIONS",
 
+  "menu.cluster": "CLUSTER",
+  "menu.cluster.overview": "OVERVIEW",
+  "menu.cluster.monitoring": "METRICS",
+  "menu.cluster.settings": "SETTINGS",
+  "menu.cluster.logging": "LOGS",
 
-  'menu.data': 'DATA',
-  'menu.data.overview': 'OVERVIEW',
-  'menu.data.index': 'INDICES',
-  'menu.data.document': 'DOCUMENTS',
-  'menu.data.template': 'TEMPLATES',
-  'menu.data.lifecycle': 'LIFECYCLES',
-  'menu.data.discover': 'EXPLORE',
-  'menu.data.indexPatterns': 'VIEWS',
+  "menu.data": "DATA",
+  "menu.data.overview": "OVERVIEW",
+  "menu.data.index": "INDICES",
+  "menu.data.document": "DOCUMENTS",
+  "menu.data.template": "TEMPLATES",
+  "menu.data.lifecycle": "LIFECYCLES",
+  "menu.data.discover": "EXPLORE",
+  "menu.data.indexPatterns": "VIEWS",
 
-  'menu.search': 'SEARCH',
-  'menu.search.overview': 'OVERVIEW',
-  'menu.search.template': 'TEMPLATES',
-  'menu.search.alias': 'ALIAS',
-  'menu.search.dict': 'DICTIONARY',
-  'menu.search.analyzer': 'ANALYZER',
-  'menu.search.nlp': 'NLP',
+  "menu.search": "SEARCH",
+  "menu.search.overview": "OVERVIEW",
+  "menu.search.template": "TEMPLATES",
+  "menu.search.alias": "ALIAS",
+  "menu.search.dict": "DICTIONARY",
+  "menu.search.analyzer": "ANALYZER",
+  "menu.search.nlp": "NLP",
 
-  'menu.synchronize': 'SYNCHRONIZE',
-  'menu.synchronize.overview': 'OVERVIEW',
-  'menu.synchronize.pipeline': 'PIPELINES',
-  'menu.synchronize.rebuild': 'REBUILD',
-  'menu.synchronize.inout': 'CONNECT',
+  "menu.synchronize": "SYNCHRONIZE",
+  "menu.synchronize.overview": "OVERVIEW",
+  "menu.synchronize.pipeline": "PIPELINES",
+  "menu.synchronize.rebuild": "REBUILD",
+  "menu.synchronize.inout": "CONNECT",
 
-  'menu.backup': 'BACKUP',
-  'menu.backup.overview': 'OVERVIEW',
-  'menu.backup.index': 'BACKUPS',
-  'menu.backup.lifecycle': 'POLICIES',
+  "menu.backup": "BACKUP",
+  "menu.backup.overview": "OVERVIEW",
+  "menu.backup.index": "BACKUPS",
+  "menu.backup.lifecycle": "POLICIES",
 
-  'menu.system': 'SYSTEM',
-  'menu.system.cluster': 'CLUSTERS',
-  'menu.system.registCluster': 'REGIST CLUSTER',
-  'menu.system.editCluster': 'EDIT CLUSTER',
-  'menu.system.settings': 'SETTINGS',
-  'menu.system.settings.global': 'GLOBAL',
-  'menu.system.settings.gateway': 'GATEWAY',
+  "menu.system": "SYSTEM",
+  "menu.system.cluster": "CLUSTERS",
+  "menu.system.registCluster": "REGIST CLUSTER",
+  "menu.system.editCluster": "EDIT CLUSTER",
+  "menu.system.settings": "SETTINGS",
+  "menu.system.settings.global": "GLOBAL",
+  "menu.system.settings.gateway": "GATEWAY",
 
-  'menu.system.security': 'SECURITY',
-  'menu.system.security.general': 'GENERAL',
-  'menu.system.security.sso': 'SSO',
-  'menu.system.security.roles': 'ROLES',
-  'menu.system.security.users': 'USERS',
-  'menu.system.security.certs': 'CERTS',
+  "menu.system.security": "SECURITY",
+  "menu.system.security.general": "GENERAL",
+  "menu.system.security.sso": "SSO",
+  "menu.system.security.roles": "ROLES",
+  "menu.system.security.users": "USERS",
+  "menu.system.security.certs": "CERTS",
 
+  "menu.system.logs": "LOGS",
+  "menu.system.logs.overview": "OVERVIEW",
+  "menu.system.logs.audit": "AUDIT",
+  "menu.system.logs.query": "QUERY",
+  "menu.system.logs.slow": "SLOW",
+  "menu.system.commonCommand": "COMMON COMMAND",
 
-  'menu.system.logs': 'LOGS',
-  'menu.system.logs.overview': 'OVERVIEW',
-  'menu.system.logs.audit': 'AUDIT',
-  'menu.system.logs.query': 'QUERY',
-  'menu.system.logs.slow': 'SLOW',
-  'menu.system.commonCommand': 'COMMON COMMAND',
+  "menu.form": "Form",
+  "menu.form.basicform": "Basic Form",
+  "menu.form.stepform": "Step Form",
+  "menu.form.stepform.info": "Step Form(write transfer information)",
+  "menu.form.stepform.confirm": "Step Form(confirm transfer information)",
+  "menu.form.stepform.result": "Step Form(finished)",
+  "menu.form.advancedform": "Advanced Form",
+  "menu.list": "List",
+  "menu.list.searchtable": "Search Table",
+  "menu.list.basiclist": "Basic List",
+  "menu.list.cardlist": "Card List",
+  "menu.list.searchlist": "Search List",
+  "menu.list.searchlist.articles": "Search List(articles)",
+  "menu.list.searchlist.projects": "Search List(projects)",
+  "menu.list.searchlist.applications": "Search List(applications)",
+  "menu.profile": "Profile",
+  "menu.profile.basic": "Basic Profile",
+  "menu.profile.advanced": "Advanced Profile",
+  "menu.result": "Result",
+  "menu.result.success": "Success",
+  "menu.result.fail": "Fail",
+  "menu.exception": "Exception",
+  "menu.exception.not-permission": "403",
+  "menu.exception.not-find": "404",
+  "menu.exception.server-error": "500",
+  "menu.exception.trigger": "Trigger",
+  "menu.account": "Account",
+  "menu.account.center": "Account Center",
+  "menu.account.settings": "Account Settings",
+  "menu.account.trigger": "Trigger Error",
+  "menu.account.logout": "Logout",
 
+  "dashboard.charts.title.cluster_throughput.axis.indexing":
+    "Indexing Throughput",
+  "dashboard.charts.title.cluster_throughput.axis.searching":
+    "Searching Throughput",
+  "dashboard.charts.title.cluster_latency.axis.indexing": "Indexing Latency",
+  "dashboard.charts.title.cluster_latency.axis.searching": "Searching Latency",
+  "dashboard.charts.title.system_load.axis.load": "System Load",
+  "dashboard.charts.title.system_network.axis.traffic": "Network Throughput",
+  "dashboard.charts.title.system_disk.axis.throughput": "Disk Throughput",
+  "dashboard.charts.title.system_disk.axis.iops": "Disk IOPS",
+  "dashboard.charts.title.system_memory.axis.memory": "Memory Usage",
+  "dashboard.charts.title.system_memory.axis.gc": "GC Activity",
+  "dashboard.charts.title.cluster_storage.axis.indices_storage":
+    "Storage Usage",
+  "dashboard.charts.title.cluster_storage.axis.available_storage":
+    "Storage Available",
+  "dashboard.charts.title.cluster_documents.axis.documents": "Documents Count",
+  "dashboard.charts.title.cluster_documents.axis.counts": "Shards Count",
 
-  'menu.form': 'Form',
-  'menu.form.basicform': 'Basic Form',
-  'menu.form.stepform': 'Step Form',
-  'menu.form.stepform.info': 'Step Form(write transfer information)',
-  'menu.form.stepform.confirm': 'Step Form(confirm transfer information)',
-  'menu.form.stepform.result': 'Step Form(finished)',
-  'menu.form.advancedform': 'Advanced Form',
-  'menu.list': 'List',
-  'menu.list.searchtable': 'Search Table',
-  'menu.list.basiclist': 'Basic List',
-  'menu.list.cardlist': 'Card List',
-  'menu.list.searchlist': 'Search List',
-  'menu.list.searchlist.articles': 'Search List(articles)',
-  'menu.list.searchlist.projects': 'Search List(projects)',
-  'menu.list.searchlist.applications': 'Search List(applications)',
-  'menu.profile': 'Profile',
-  'menu.profile.basic': 'Basic Profile',
-  'menu.profile.advanced': 'Advanced Profile',
-  'menu.result': 'Result',
-  'menu.result.success': 'Success',
-  'menu.result.fail': 'Fail',
-  'menu.exception': 'Exception',
-  'menu.exception.not-permission': '403',
-  'menu.exception.not-find': '404',
-  'menu.exception.server-error': '500',
-  'menu.exception.trigger': 'Trigger',
-  'menu.account': 'Account',
-  'menu.account.center': 'Account Center',
-  'menu.account.settings': 'Account Settings',
-  'menu.account.trigger': 'Trigger Error',
-  'menu.account.logout': 'Logout',
+  "app.login.message-invalid-credentials":
+    "Invalid username or password（admin/888888）",
+  "app.login.message-invalid-verification-code": "Invalid verification code",
+  "app.login.tab-login-credentials": "Credentials",
+  "app.login.tab-login-mobile": "Mobile number",
+  "app.login.remember-me": "Remember me",
+  "app.login.forgot-password": "Forgot your password?",
+  "app.login.sign-in-with": "Sign in with",
+  "app.login.signup": "Sign up",
+  "app.login.login": "Login",
+  "app.register.register": "Register",
+  "app.register.get-verification-code": "Get code",
+  "app.register.sing-in": "Already have an account?",
+  "app.register-result.msg": "Account：registered at {email}",
+  "app.register-result.activation-email":
+    "The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.",
+  "app.register-result.back-home": "Back to home",
+  "app.register-result.view-mailbox": "View mailbox",
+  "app.home.introduce": "introduce",
+  "app.analysis.test": "Gongzhuan No.{no} shop",
+  "app.analysis.introduce": "Introduce",
+  "app.analysis.total-sales": "Total Sales",
+  "app.analysis.day-sales": "Day Sales",
+  "app.analysis.visits": "Visits",
+  "app.analysis.visits-trend": "Visits Trend",
+  "app.analysis.visits-ranking": "Visits Ranking",
+  "app.analysis.day-visits": "Day Visits",
+  "app.analysis.week": "Week Ratio",
+  "app.analysis.day": "Day Ratio",
+  "app.analysis.payments": "Payments",
+  "app.analysis.conversion-rate": "Conversion Rate",
+  "app.analysis.operational-effect": "Operational Effect",
+  "app.analysis.sales-trend": "Stores Sales Trend",
+  "app.analysis.sales-ranking": "Sales Ranking",
+  "app.analysis.all-year": "All Year",
+  "app.analysis.all-month": "All Month",
+  "app.analysis.all-week": "All Week",
+  "app.analysis.all-day": "All day",
+  "app.analysis.search-users": "Search Users",
+  "app.analysis.per-capita-search": "Per Capita Search",
+  "app.analysis.online-top-search": "Online Top Search",
+  "app.analysis.the-proportion-of-sales": "The Proportion Of Sales",
+  "app.analysis.channel.all": "ALL",
+  "app.analysis.channel.online": "Online",
+  "app.analysis.channel.stores": "Stores",
+  "app.analysis.sales": "Sales",
+  "app.analysis.traffic": "Traffic",
+  "app.analysis.table.rank": "Rank",
+  "app.analysis.table.search-keyword": "Keyword",
+  "app.analysis.table.users": "Users",
+  "app.analysis.table.weekly-range": "Weekly Range",
+  "app.forms.basic.title": "Basic form",
+  "app.forms.basic.description":
+    "Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.",
+  "app.monitor.trading-activity": "Real-Time Trading Activity",
+  "app.monitor.total-transactions": "Total transactions today",
+  "app.monitor.sales-target": "Sales target completion rate",
+  "app.monitor.remaining-time": "Remaining time of activity",
+  "app.monitor.total-transactions-per-second": "Total transactions per second",
+  "app.monitor.activity-forecast": "Activity forecast",
+  "app.monitor.efficiency": "Efficiency",
+  "app.monitor.ratio": "Ratio",
+  "app.monitor.proportion-per-category": "Proportion Per Category",
+  "app.monitor.fast-food": "Fast food",
+  "app.monitor.western-food": "Western food",
+  "app.monitor.hot-pot": "Hot pot",
+  "app.monitor.waiting-for-implementation": "Waiting for implementation",
+  "app.monitor.popular-searches": "Popular Searches",
+  "app.monitor.resource-surplus": "Resource Surplus",
+  "app.monitor.fund-surplus": "Fund Surplus",
 
+  "app.settings.security.update": "Update Setting",
+  "app.settings.global.update": "Update Setting",
+  "app.settings.global.site_name": "Site Name",
+  "app.settings.global.domain": "Site Domain",
+  "app.settings.global.listen_addr": "Listen Address",
+  "app.settings.global.is_tls": "Enable TLS",
+  "app.settings.global.data_path": "Data Path",
+  "app.settings.global.log_path": "Log Path",
 
-  'dashboard.charts.title.cluster_throughput.axis.indexing':"Indexing Throughput",
-  'dashboard.charts.title.cluster_throughput.axis.searching':"Searching Throughput",
-  'dashboard.charts.title.cluster_latency.axis.indexing':"Indexing Latency",
-  'dashboard.charts.title.cluster_latency.axis.searching':"Searching Latency",
-  'dashboard.charts.title.system_load.axis.load':"System Load",
-  'dashboard.charts.title.system_network.axis.traffic':"Network Throughput",
-  'dashboard.charts.title.system_disk.axis.throughput':"Disk Throughput",
-  'dashboard.charts.title.system_disk.axis.iops':"Disk IOPS",
-  'dashboard.charts.title.system_memory.axis.memory':"Memory Usage",
-  'dashboard.charts.title.system_memory.axis.gc':"GC Activity",
-  'dashboard.charts.title.cluster_storage.axis.indices_storage':"Storage Usage",
-  'dashboard.charts.title.cluster_storage.axis.available_storage':"Storage Available",
-  'dashboard.charts.title.cluster_documents.axis.documents':"Documents Count",
-  'dashboard.charts.title.cluster_documents.axis.counts':"Shards Count",
+  "app.settings.security.auth2factor_enabled":
+    "Enable 2FA(two-factor) Authentication",
+  "app.settings.security.audit_enabled": "Enable Audit Logging",
 
-
-  'app.login.message-invalid-credentials': 'Invalid username or password（admin/888888）',
-  'app.login.message-invalid-verification-code': 'Invalid verification code',
-  'app.login.tab-login-credentials': 'Credentials',
-  'app.login.tab-login-mobile': 'Mobile number',
-  'app.login.remember-me': 'Remember me',
-  'app.login.forgot-password': 'Forgot your password?',
-  'app.login.sign-in-with': 'Sign in with',
-  'app.login.signup': 'Sign up',
-  'app.login.login': 'Login',
-  'app.register.register': 'Register',
-  'app.register.get-verification-code': 'Get code',
-  'app.register.sing-in': 'Already have an account?',
-  'app.register-result.msg': 'Account：registered at {email}',
-  'app.register-result.activation-email':
-    'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
-  'app.register-result.back-home': 'Back to home',
-  'app.register-result.view-mailbox': 'View mailbox',
-  'app.home.introduce': 'introduce',
-  'app.analysis.test': 'Gongzhuan No.{no} shop',
-  'app.analysis.introduce': 'Introduce',
-  'app.analysis.total-sales': 'Total Sales',
-  'app.analysis.day-sales': 'Day Sales',
-  'app.analysis.visits': 'Visits',
-  'app.analysis.visits-trend': 'Visits Trend',
-  'app.analysis.visits-ranking': 'Visits Ranking',
-  'app.analysis.day-visits': 'Day Visits',
-  'app.analysis.week': 'Week Ratio',
-  'app.analysis.day': 'Day Ratio',
-  'app.analysis.payments': 'Payments',
-  'app.analysis.conversion-rate': 'Conversion Rate',
-  'app.analysis.operational-effect': 'Operational Effect',
-  'app.analysis.sales-trend': 'Stores Sales Trend',
-  'app.analysis.sales-ranking': 'Sales Ranking',
-  'app.analysis.all-year': 'All Year',
-  'app.analysis.all-month': 'All Month',
-  'app.analysis.all-week': 'All Week',
-  'app.analysis.all-day': 'All day',
-  'app.analysis.search-users': 'Search Users',
-  'app.analysis.per-capita-search': 'Per Capita Search',
-  'app.analysis.online-top-search': 'Online Top Search',
-  'app.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
-  'app.analysis.channel.all': 'ALL',
-  'app.analysis.channel.online': 'Online',
-  'app.analysis.channel.stores': 'Stores',
-  'app.analysis.sales': 'Sales',
-  'app.analysis.traffic': 'Traffic',
-  'app.analysis.table.rank': 'Rank',
-  'app.analysis.table.search-keyword': 'Keyword',
-  'app.analysis.table.users': 'Users',
-  'app.analysis.table.weekly-range': 'Weekly Range',
-  'app.forms.basic.title': 'Basic form',
-  'app.forms.basic.description':
-    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
-  'app.monitor.trading-activity': 'Real-Time Trading Activity',
-  'app.monitor.total-transactions': 'Total transactions today',
-  'app.monitor.sales-target': 'Sales target completion rate',
-  'app.monitor.remaining-time': 'Remaining time of activity',
-  'app.monitor.total-transactions-per-second': 'Total transactions per second',
-  'app.monitor.activity-forecast': 'Activity forecast',
-  'app.monitor.efficiency': 'Efficiency',
-  'app.monitor.ratio': 'Ratio',
-  'app.monitor.proportion-per-category': 'Proportion Per Category',
-  'app.monitor.fast-food': 'Fast food',
-  'app.monitor.western-food': 'Western food',
-  'app.monitor.hot-pot': 'Hot pot',
-  'app.monitor.waiting-for-implementation': 'Waiting for implementation',
-  'app.monitor.popular-searches': 'Popular Searches',
-  'app.monitor.resource-surplus': 'Resource Surplus',
-  'app.monitor.fund-surplus': 'Fund Surplus',
-
-  'app.settings.security.update':"Update Setting",
-  'app.settings.global.update':"Update Setting",
-  'app.settings.global.site_name':"Site Name",
-  'app.settings.global.domain':"Site Domain",
-  'app.settings.global.listen_addr':"Listen Address",
-  'app.settings.global.is_tls':"Enable TLS",
-  'app.settings.global.data_path':"Data Path",
-  'app.settings.global.log_path':"Log Path",
-
-  'app.settings.security.auth2factor_enabled':"Enable 2FA(two-factor) Authentication",
-  'app.settings.security.audit_enabled':"Enable Audit Logging",
-
-
-  'app.settings.menuMap.basic': 'Basic Settings',
-  'app.settings.menuMap.security': 'Security Settings',
-  'app.settings.menuMap.binding': 'Account Binding',
-  'app.settings.menuMap.notification': 'New Message Notification',
-  'app.settings.basic.avatar': 'Avatar',
-  'app.settings.basic.change-avatar': 'Change avatar',
-  'app.settings.basic.email': 'Email',
-  'app.settings.basic.email-message': 'Please input your email!',
-  'app.settings.basic.nickname': 'Nickname',
-  'app.settings.basic.nickname-message': 'Please input your Nickname!',
-  'app.settings.basic.profile': 'Personal profile',
-  'app.settings.basic.profile-message': 'Please input your personal profile!',
-  'app.settings.basic.profile-placeholder': 'Brief introduction to yourself',
-  'app.settings.basic.country': 'Country/Region',
-  'app.settings.basic.country-message': 'Please input your country!',
-  'app.settings.basic.geographic': 'Province or city',
-  'app.settings.basic.geographic-message': 'Please input your geographic info!',
-  'app.settings.basic.address': 'Street Address',
-  'app.settings.basic.address-message': 'Please input your address!',
-  'app.settings.basic.phone': 'Phone Number',
-  'app.settings.basic.phone-message': 'Please input your phone!',
-  'app.settings.basic.update': 'Update Information',
-  'app.settings.security.strong': 'Strong',
-  'app.settings.security.medium': 'Medium',
-  'app.settings.security.weak': 'Weak',
-  'app.settings.security.password': 'Account Password',
-  'app.settings.security.password-description': 'Current password strength：',
-  'app.settings.security.phone': 'Security Phone',
-  'app.settings.security.phone-description': 'Bound phone：',
-  'app.settings.security.question': 'Security Question',
-  'app.settings.security.question-description':
-    'The security question is not set, and the security policy can effectively protect the account security',
-  'app.settings.security.email': 'Backup Email',
-  'app.settings.security.email-description': 'Bound Email：',
-  'app.settings.security.mfa': 'MFA Device',
-  'app.settings.security.mfa-description':
-    'Unbound MFA device, after binding, can be confirmed twice',
-  'app.settings.security.modify': 'Modify',
-  'app.settings.security.set': 'Set',
-  'app.settings.security.bind': 'Bind',
-  'app.settings.binding.taobao': 'Binding Taobao',
-  'app.settings.binding.taobao-description': 'Currently unbound Taobao account',
-  'app.settings.binding.alipay': 'Binding Alipay',
-  'app.settings.binding.alipay-description': 'Currently unbound Alipay account',
-  'app.settings.binding.dingding': 'Binding DingTalk',
-  'app.settings.binding.dingding-description': 'Currently unbound DingTalk account',
-  'app.settings.binding.bind': 'Bind',
-  'app.settings.notification.password': 'Account Password',
-  'app.settings.notification.password-description':
-    'Messages from other users will be notified in the form of a station letter',
-  'app.settings.notification.messages': 'System Messages',
-  'app.settings.notification.messages-description':
-    'System messages will be notified in the form of a station letter',
-  'app.settings.notification.todo': 'To-do Notification',
-  'app.settings.notification.todo-description':
-    'The to-do list will be notified in the form of a letter from the station',
-  'app.settings.open': 'Open',
-  'app.settings.close': 'Close',
-  'app.exception.back': 'Back to home',
-  'app.exception.description.403': "Sorry, you don't have access to this page",
-  'app.exception.description.404': 'Sorry, the page you visited does not exist',
-  'app.exception.description.500': 'Sorry, the server is reporting an error',
-  'app.result.error.title': 'Submission Failed',
-  'app.result.error.description':
-    'Please check and modify the following information before resubmitting.',
-  'app.result.error.hint-title': 'The content you submitted has the following error:',
-  'app.result.error.hint-text1': 'Your account has been frozen',
-  'app.result.error.hint-btn1': 'Thaw immediately',
-  'app.result.error.hint-text2': 'Your account is not yet eligible to apply',
-  'app.result.error.hint-btn2': 'Upgrade immediately',
-  'app.result.error.btn-text': 'Return to modify',
-  'app.result.success.title': 'Submission Success',
-  'app.result.success.description':
-    'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.',
-  'app.result.success.operate-title': 'Project Name',
-  'app.result.success.operate-id': 'Project ID：',
-  'app.result.success.principal': 'Principal：',
-  'app.result.success.operate-time': 'Effective time：',
-  'app.result.success.step1-title': 'Create project',
-  'app.result.success.step1-operator': 'Qu Lili',
-  'app.result.success.step2-title': 'Departmental preliminary review',
-  'app.result.success.step2-operator': 'Zhou Maomao',
-  'app.result.success.step2-extra': 'Urge',
-  'app.result.success.step3-title': 'Financial review',
-  'app.result.success.step4-title': 'Finish',
-  'app.result.success.btn-return': 'Back to list',
-  'app.result.success.btn-project': 'View project',
-  'app.result.success.btn-print': 'Print',
-  'app.setting.pagestyle': 'Page style setting',
-  'app.setting.pagestyle.dark': 'Dark style',
-  'app.setting.pagestyle.light': 'Light style',
-  'app.setting.content-width': 'Content Width',
-  'app.setting.content-width.fixed': 'Fixed',
-  'app.setting.content-width.fluid': 'Fluid',
-  'app.setting.themecolor': 'Theme Color',
-  'app.setting.themecolor.dust': 'Dust Red',
-  'app.setting.themecolor.volcano': 'Volcano',
-  'app.setting.themecolor.sunset': 'Sunset Orange',
-  'app.setting.themecolor.cyan': 'Cyan',
-  'app.setting.themecolor.green': 'Polar Green',
-  'app.setting.themecolor.daybreak': 'Daybreak Blue (default)',
-  'app.setting.themecolor.geekblue': 'Geek Glue',
-  'app.setting.themecolor.purple': 'Golden Purple',
-  'app.setting.navigationmode': 'Navigation Mode',
-  'app.setting.sidemenu': 'Side Menu Layout',
-  'app.setting.topmenu': 'Top Menu Layout',
-  'app.setting.fixedheader': 'Fixed Header',
-  'app.setting.fixedsidebar': 'Fixed Sidebar',
-  'app.setting.fixedsidebar.hint': 'Works on Side Menu Layout',
-  'app.setting.hideheader': 'Hidden Header when scrolling',
-  'app.setting.hideheader.hint': 'Works when Hidden Header is enabled',
-  'app.setting.othersettings': 'Other Settings',
-  'app.setting.weakmode': 'Weak Mode',
-  'app.setting.copy': 'Copy Setting',
-  'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
-  'app.setting.production.hint':
-    'Setting panel shows in development environment only, please manually modify',
+  "app.settings.menuMap.basic": "Basic Settings",
+  "app.settings.menuMap.security": "Security Settings",
+  "app.settings.menuMap.binding": "Account Binding",
+  "app.settings.menuMap.notification": "New Message Notification",
+  "app.settings.basic.avatar": "Avatar",
+  "app.settings.basic.change-avatar": "Change avatar",
+  "app.settings.basic.email": "Email",
+  "app.settings.basic.email-message": "Please input your email!",
+  "app.settings.basic.nickname": "Nickname",
+  "app.settings.basic.nickname-message": "Please input your Nickname!",
+  "app.settings.basic.profile": "Personal profile",
+  "app.settings.basic.profile-message": "Please input your personal profile!",
+  "app.settings.basic.profile-placeholder": "Brief introduction to yourself",
+  "app.settings.basic.country": "Country/Region",
+  "app.settings.basic.country-message": "Please input your country!",
+  "app.settings.basic.geographic": "Province or city",
+  "app.settings.basic.geographic-message": "Please input your geographic info!",
+  "app.settings.basic.address": "Street Address",
+  "app.settings.basic.address-message": "Please input your address!",
+  "app.settings.basic.phone": "Phone Number",
+  "app.settings.basic.phone-message": "Please input your phone!",
+  "app.settings.basic.update": "Update Information",
+  "app.settings.security.strong": "Strong",
+  "app.settings.security.medium": "Medium",
+  "app.settings.security.weak": "Weak",
+  "app.settings.security.password": "Account Password",
+  "app.settings.security.password-description": "Current password strength：",
+  "app.settings.security.phone": "Security Phone",
+  "app.settings.security.phone-description": "Bound phone：",
+  "app.settings.security.question": "Security Question",
+  "app.settings.security.question-description":
+    "The security question is not set, and the security policy can effectively protect the account security",
+  "app.settings.security.email": "Backup Email",
+  "app.settings.security.email-description": "Bound Email：",
+  "app.settings.security.mfa": "MFA Device",
+  "app.settings.security.mfa-description":
+    "Unbound MFA device, after binding, can be confirmed twice",
+  "app.settings.security.modify": "Modify",
+  "app.settings.security.set": "Set",
+  "app.settings.security.bind": "Bind",
+  "app.settings.binding.taobao": "Binding Taobao",
+  "app.settings.binding.taobao-description": "Currently unbound Taobao account",
+  "app.settings.binding.alipay": "Binding Alipay",
+  "app.settings.binding.alipay-description": "Currently unbound Alipay account",
+  "app.settings.binding.dingding": "Binding DingTalk",
+  "app.settings.binding.dingding-description":
+    "Currently unbound DingTalk account",
+  "app.settings.binding.bind": "Bind",
+  "app.settings.notification.password": "Account Password",
+  "app.settings.notification.password-description":
+    "Messages from other users will be notified in the form of a station letter",
+  "app.settings.notification.messages": "System Messages",
+  "app.settings.notification.messages-description":
+    "System messages will be notified in the form of a station letter",
+  "app.settings.notification.todo": "To-do Notification",
+  "app.settings.notification.todo-description":
+    "The to-do list will be notified in the form of a letter from the station",
+  "app.settings.open": "Open",
+  "app.settings.close": "Close",
+  "app.exception.back": "Back to home",
+  "app.exception.description.403": "Sorry, you don't have access to this page",
+  "app.exception.description.404": "Sorry, the page you visited does not exist",
+  "app.exception.description.500": "Sorry, the server is reporting an error",
+  "app.result.error.title": "Submission Failed",
+  "app.result.error.description":
+    "Please check and modify the following information before resubmitting.",
+  "app.result.error.hint-title":
+    "The content you submitted has the following error:",
+  "app.result.error.hint-text1": "Your account has been frozen",
+  "app.result.error.hint-btn1": "Thaw immediately",
+  "app.result.error.hint-text2": "Your account is not yet eligible to apply",
+  "app.result.error.hint-btn2": "Upgrade immediately",
+  "app.result.error.btn-text": "Return to modify",
+  "app.result.success.title": "Submission Success",
+  "app.result.success.description":
+    "The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.",
+  "app.result.success.operate-title": "Project Name",
+  "app.result.success.operate-id": "Project ID：",
+  "app.result.success.principal": "Principal：",
+  "app.result.success.operate-time": "Effective time：",
+  "app.result.success.step1-title": "Create project",
+  "app.result.success.step1-operator": "Qu Lili",
+  "app.result.success.step2-title": "Departmental preliminary review",
+  "app.result.success.step2-operator": "Zhou Maomao",
+  "app.result.success.step2-extra": "Urge",
+  "app.result.success.step3-title": "Financial review",
+  "app.result.success.step4-title": "Finish",
+  "app.result.success.btn-return": "Back to list",
+  "app.result.success.btn-project": "View project",
+  "app.result.success.btn-print": "Print",
+  "app.setting.pagestyle": "Page style setting",
+  "app.setting.pagestyle.dark": "Dark style",
+  "app.setting.pagestyle.light": "Light style",
+  "app.setting.content-width": "Content Width",
+  "app.setting.content-width.fixed": "Fixed",
+  "app.setting.content-width.fluid": "Fluid",
+  "app.setting.themecolor": "Theme Color",
+  "app.setting.themecolor.dust": "Dust Red",
+  "app.setting.themecolor.volcano": "Volcano",
+  "app.setting.themecolor.sunset": "Sunset Orange",
+  "app.setting.themecolor.cyan": "Cyan",
+  "app.setting.themecolor.green": "Polar Green",
+  "app.setting.themecolor.daybreak": "Daybreak Blue (default)",
+  "app.setting.themecolor.geekblue": "Geek Glue",
+  "app.setting.themecolor.purple": "Golden Purple",
+  "app.setting.navigationmode": "Navigation Mode",
+  "app.setting.sidemenu": "Side Menu Layout",
+  "app.setting.topmenu": "Top Menu Layout",
+  "app.setting.fixedheader": "Fixed Header",
+  "app.setting.fixedsidebar": "Fixed Sidebar",
+  "app.setting.fixedsidebar.hint": "Works on Side Menu Layout",
+  "app.setting.hideheader": "Hidden Header when scrolling",
+  "app.setting.hideheader.hint": "Works when Hidden Header is enabled",
+  "app.setting.othersettings": "Other Settings",
+  "app.setting.weakmode": "Weak Mode",
+  "app.setting.copy": "Copy Setting",
+  "app.setting.copyinfo":
+    "copy success，please replace defaultSettings in src/models/setting.js",
+  "app.setting.production.hint":
+    "Setting panel shows in development environment only, please manually modify",
 
   ...alert,
   ...console,
+  ...cluster,
 };
diff --git a/web/src/locales/en-US/cluster.js b/web/src/locales/en-US/cluster.js
new file mode 100644
index 00000000..41c2d089
--- /dev/null
+++ b/web/src/locales/en-US/cluster.js
@@ -0,0 +1,108 @@
+export default {
+  "cluster.manage.title": "CLUSTERS",
+  "cluster.manage.description":
+    "集群管理可以帮助您快速接入不同版本的 Elasticsearch 集群，以及删除和修改集群配置。",
+  "cluster.manage.label.cluster_name": "Cluster Name",
+  "cluster.manage.btn.regist": "Regist Cluster",
+  "cluster.manage.table.column.name": "Name",
+  "cluster.manage.table.column.health": "Health",
+  "cluster.manage.table.column.version": "Version",
+  "cluster.manage.table.column.node_count": "Node Count",
+  "cluster.manage.table.column.endpoint": "Endpoint",
+  "cluster.manage.table.column.monitored": "Monitored",
+  "cluster.manage.table.column.operation": "Operation",
+  "cluster.manage.table.column.description": "Description",
+  "cluster.manage.monitored.on": "ON",
+  "cluster.manage.monitored.off": "OFF",
+  "cluster.regist.title": "REGIST CLUSTER",
+  "cluster.regist.description": "输入集群地址和身份验证信息分步创建集群。",
+  "cluster.regist.step.connect.title": "Connect",
+  "cluster.regist.step.confirm.title": "Confirm",
+  "cluster.regist.step.complete.title": "Complete",
+  "cluster.regist.step.connect.label.auth": "Auth",
+  "cluster.regist.step.connect.label.username": "Username",
+  "cluster.regist.step.connect.label.password": "Password",
+  "cluster.regist.step.connect.label.data_nodes": "Data Nodes",
+  "cluster.regist.step.connect.label.shards": "Active Shards",
+  "cluster.regist.step.complete.success": "Succeed",
+  "cluster.regist.step.complete.btn.create": "Regist Again",
+  "cluster.regist.step.complete.btn.goto": "Go To Cluster List",
+  "cluster.regist.step.complete.tls.yes": "Yes",
+  "cluster.regist.step.complete.tls.no": "No",
+  "cluster.monitor.cluster.title": "Cluster",
+  "cluster.monitor.node.title": "Node",
+  "cluster.monitor.index.title": "Index",
+  "cluster.monitor.summary.name": "Cluster Name",
+  "cluster.monitor.summary.online_time": "Uptime",
+  "cluster.monitor.summary.version": "Version",
+  "cluster.monitor.summary.health": "Health",
+  "cluster.monitor.summary.node_count": "Node Count",
+  "cluster.monitor.summary.total_index": "Total Index",
+  "cluster.monitor.summary.shard": "Pri/Total Shard",
+  "cluster.monitor.summary.unassign_shard": "Unassigned Shard",
+  "cluster.monitor.summary.total_docs": "Total Docs",
+  "cluster.monitor.summary.storage": "Storage",
+  "cluster.monitor.summary.jvm": "JVM Memory",
+
+  "cluster.monitor.timepicker.last15minutes": "Last 15 minutes",
+  "cluster.monitor.timepicker.thisweek": "This week",
+  "cluster.monitor.timepicker.last30minutes": "Last 30 minutes",
+  "cluster.monitor.timepicker.lasthour": "Last hour",
+  "cluster.monitor.timepicker.lastday": "Last day",
+  "cluster.monitor.timepicker.lastweek": "Last week",
+  "cluster.monitor.timepicker.lastmonth": "Last month",
+  "cluster.monitor.timepicker.last3month": "Last 3 month",
+  "cluster.monitor.timepicker.lastyear": "Last year",
+  "cluster.monitor.timepicker.today": "Today",
+
+  "cluster.metrics.node.axis.cpu.title": "CPU Usage",
+  "cluster.metrics.node.axis.disk.title": "Disk Available",
+  "cluster.metrics.node.axis.indexing_rate.title": "Indexing Rate",
+  "cluster.metrics.node.axis.query_rate.title": "Query Rate",
+  "cluster.metrics.node.axis.fetch_rate.title": "Fetch Rate",
+  "cluster.metrics.node.axis.flush_latency.title": "Flush Latency",
+  "cluster.metrics.node.axis.indexing_latency.title": "Indexing Latency",
+  "cluster.metrics.node.axis.query_latency.title": "Query Latency",
+  "cluster.metrics.node.axis.fetch_latency.title": "Fetch Latency",
+  "cluster.metrics.node.axis.merge_latency.title": "Merge Latency",
+  "cluster.metrics.node.axis.refresh_latency.title": "Refresh Latency",
+  "cluster.metrics.node.axis.flush_latency.title": "Flush Latency",
+  "cluster.metrics.node.axis.query_cache.title": "Query Cache",
+  "cluster.metrics.node.axis.request_cache.title": "Request Cache",
+  "cluster.metrics.node.axis.http_connect_num.title": "Http Connections",
+  "cluster.metrics.node.axis.http_rate.title": "Rate Of Opened Connections",
+  "cluster.metrics.node.axis.segment_memory.title": "Segment Memory",
+  "cluster.metrics.node.axis.segment_count.title": "Segment Count",
+  "cluster.metrics.node.axis.docs_count.title": "Document Count",
+  "cluster.metrics.node.axis.index_storage.title": "Indices Storage",
+  "cluster.metrics.node.axis.jvm_heap_used_percent.title": "JVM Heap Usage",
+
+  "cluster.metrics.index.axis.index_storage.title": "Index Storage",
+  "cluster.metrics.index.axis.doc_count.title": "Document count",
+  "cluster.metrics.index.axis.query_times.title": "Query Requests",
+  "cluster.metrics.index.axis.fetch_times.title": "Fetch Requests",
+  "cluster.metrics.index.axis.merge_times.title": "Merge Requests",
+  "cluster.metrics.index.axis.refresh_times.title": "Refresh Requests",
+  "cluster.metrics.index.axis.indexing_rate.title": "Indexing Rate",
+  "cluster.metrics.index.axis.indexing_latency.title": "Indexing Latency",
+  "cluster.metrics.index.axis.query_latency.title": "Query Latency",
+  "cluster.metrics.index.axis.fetch_latency.title": "Fetch Latency",
+  "cluster.metrics.index.axis.merge_latency.title": "Merge Latency",
+  "cluster.metrics.index.axis.refresh_latency.title": "Refresh Latency",
+  "cluster.metrics.index.axis.query_cache.title": "Query Cache",
+  "cluster.metrics.index.axis.request_cache.title": "Request Cache",
+  "cluster.metrics.index.axis.segment_memory.title": "Segment Memory",
+  "cluster.metrics.index.axis.segment_fields_memory.title":
+    "Segment Stored Fields Memory",
+  "cluster.metrics.index.axis.segment_doc_values_memory.title":
+    "Segment Doc Values Memory",
+  "cluster.metrics.index.axis.segment_terms_memory.title":
+    "Segment Terms Memory",
+  "cluster.metrics.group.system": "System",
+  "cluster.metrics.group.storage": "Storage",
+  "cluster.metrics.group.latency": "Latency",
+  "cluster.metrics.group.operations": "Operations",
+  "cluster.metrics.group.http": "Http Traffic",
+  "cluster.metrics.group.memory": "Memory",
+  "cluster.metrics.group.cache": "Cache",
+};
diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
index d58d79b5..1c87bd69 100644
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@@ -1,412 +1,418 @@
-import alert from './zh-CN/alert';
-import console from './zh-CN/console'; 
+import alert from "./zh-CN/alert";
+import console from "./zh-CN/console";
+import cluster from "./zh-CN/cluster";
 
 export default {
-  'navBar.lang': '语言',
-  
-  'layout.user.appname':"极限搜索管理后台",
-  'layout.user.appslogon':"极限科技的搜索平台是东半球最好用的搜索服务平台",
-  'app.setting.appname':"极限搜索中心",
+  "navBar.lang": "语言",
 
-  'layout.user.link.help': '帮助',
-  'layout.user.link.privacy': '隐私',
-  'layout.user.link.terms': '条款',
+  "layout.user.appname": "极限搜索管理后台",
+  "layout.user.appslogon": "极限科技的搜索平台是东半球最好用的搜索服务平台",
+  "app.setting.appname": "极限搜索中心",
 
-  'validation.email.required': '请输入邮箱地址！',
-  'validation.email.wrong-format': '邮箱地址格式错误！',
-  'validation.password.required': '请输入密码！',
-  'validation.password.twice': '两次输入的密码不匹配!',
-  'validation.password.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
-  'validation.password.strength.strong': '强度：强',
-  'validation.password.strength.medium': '强度：中',
-  'validation.password.strength.short': '强度：太短',
-  'validation.confirm-password.required': '请确认密码！',
-  'validation.phone-number.required': '请输入手机号！',
-  'validation.phone-number.wrong-format': '手机号格式错误！',
-  'validation.verification-code.required': '请输入验证码！',
-  'validation.title.required': '请输入标题',
-  'validation.date.required': '请选择起止日期',
-  'validation.goal.required': '请输入目标描述',
-  'validation.standard.required': '请输入衡量标准',
-  'validation.dbtype.required':"请选择数据库类型",
-  'validation.logstashconf.required':"请输入Logstash jdbc配置",
-  'validation.kafkaconf.required':"请输入Logstash Kafka配置",
-  'form.optional': '（选填）',
-  'form.submit': '提交',
-  'form.save': '保存',
-  'form.email.placeholder': '邮箱',
-  'form.password.placeholder': '至少6位密码，区分大小写',
-  'form.confirm-password.placeholder': '确认密码',
-  'form.phone-number.placeholder': '位手机号',
-  'form.verification-code.placeholder': '验证码',
-  'form.title.label': '标题',
-  'form.title.placeholder': '给目标起个名字',
-  'form.date.label': '起止日期',
-  'form.date.placeholder.start': '开始日期',
-  'form.date.placeholder.end': '结束日期',
-  'form.goal.label': '目标描述',
-  'form.goal.placeholder': '请输入你的阶段性工作目标',
-  'form.standard.label': '衡量标准',
-  'form.standard.placeholder': '请输入衡量标准',
-  'form.client.label': '客户',
-  'form.client.label.tooltip': '目标的服务对象',
-  'form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
-  'form.invites.label': '邀评人',
-  'form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
-  'form.weight.label': '权重',
-  'form.weight.placeholder': '请输入',
-  'form.public.label': '目标公开',
-  'form.public.label.help': '客户、邀评人默认被分享',
-  'form.public.radio.public': '公开',
-  'form.public.radio.partially-public': '部分公开',
-  'form.public.radio.private': '不公开',
-  'form.publicUsers.placeholder': '公开给',
-  'form.publicUsers.option.A': '同事甲',
-  'form.publicUsers.option.B': '同事乙',
-  'form.publicUsers.option.C': '同事丙',
-  'form.dbtype.label':'数据库类型',
-  'form.logstash.jdbcconf.label':"Logstash JDBC 配置",
-  'form.logstash.jdbcconf.placeholder':"请输入JDBC配置",
-  'form.logstash.kafkaconf.label':"Logstash Kafka 配置",
-  'form.logstash.kafkaconf.placeholder':"请输入Kafka配置",
-  'form.button.search': '搜索',
-  'form.button.new': '新建',
-  'form.button.create': '创建',
-  'form.button.add': '添加',
-  'form.button.edit': '编辑',
-  'form.button.update': '更新',
-  'form.button.save': '保存',
-  'form.button.delete': '删除',
-  'form.button.cancel': '取消',
-  'form.button.collapse': '收起',
-  'form.button.advanced': '高级',
-  'table.field.operation': '操作',
+  "layout.user.link.help": "帮助",
+  "layout.user.link.privacy": "隐私",
+  "layout.user.link.terms": "条款",
 
-  'component.globalHeader.search': '站内搜索',
-  'component.globalHeader.search.example1': '搜索提示一',
-  'component.globalHeader.search.example2': '搜索提示二',
-  'component.globalHeader.search.example3': '搜索提示三',
-  'component.globalHeader.help': '使用文档',
-  'component.globalHeader.notification': '通知',
-  'component.globalHeader.notification.empty': '你已查看所有通知',
-  'component.globalHeader.message': '消息',
-  'component.globalHeader.message.empty': '您已读完所有消息',
-  'component.globalHeader.event': '待办',
-  'component.globalHeader.event.empty': '你已完成所有待办',
-  'component.noticeIcon.clear': '清空',
-  'component.noticeIcon.cleared': '清空了',
-  'component.noticeIcon.empty': '暂无数据',
-  
-  'menu.home': '首页',
-  'menu.devtool': '开发工具',
-  'menu.alerting': '告警管理',
-  'menu.alerting.overview': '概览',
-  'menu.alerting.monitor': '监控管理',
-  'menu.alerting.destination': '渠道管理',
+  "validation.email.required": "请输入邮箱地址！",
+  "validation.email.wrong-format": "邮箱地址格式错误！",
+  "validation.password.required": "请输入密码！",
+  "validation.password.twice": "两次输入的密码不匹配!",
+  "validation.password.strength.msg":
+    "请至少输入 6 个字符。请不要使用容易被猜到的密码。",
+  "validation.password.strength.strong": "强度：强",
+  "validation.password.strength.medium": "强度：中",
+  "validation.password.strength.short": "强度：太短",
+  "validation.confirm-password.required": "请确认密码！",
+  "validation.phone-number.required": "请输入手机号！",
+  "validation.phone-number.wrong-format": "手机号格式错误！",
+  "validation.verification-code.required": "请输入验证码！",
+  "validation.title.required": "请输入标题",
+  "validation.date.required": "请选择起止日期",
+  "validation.goal.required": "请输入目标描述",
+  "validation.standard.required": "请输入衡量标准",
+  "validation.dbtype.required": "请选择数据库类型",
+  "validation.logstashconf.required": "请输入Logstash jdbc配置",
+  "validation.kafkaconf.required": "请输入Logstash Kafka配置",
+  "form.optional": "（选填）",
+  "form.submit": "提交",
+  "form.save": "保存",
+  "form.email.placeholder": "邮箱",
+  "form.password.placeholder": "至少6位密码，区分大小写",
+  "form.confirm-password.placeholder": "确认密码",
+  "form.phone-number.placeholder": "位手机号",
+  "form.verification-code.placeholder": "验证码",
+  "form.title.label": "标题",
+  "form.title.placeholder": "给目标起个名字",
+  "form.date.label": "起止日期",
+  "form.date.placeholder.start": "开始日期",
+  "form.date.placeholder.end": "结束日期",
+  "form.goal.label": "目标描述",
+  "form.goal.placeholder": "请输入你的阶段性工作目标",
+  "form.standard.label": "衡量标准",
+  "form.standard.placeholder": "请输入衡量标准",
+  "form.client.label": "客户",
+  "form.client.label.tooltip": "目标的服务对象",
+  "form.client.placeholder": "请描述你服务的客户，内部客户直接 @姓名／工号",
+  "form.invites.label": "邀评人",
+  "form.invites.placeholder": "请直接 @姓名／工号，最多可邀请 5 人",
+  "form.weight.label": "权重",
+  "form.weight.placeholder": "请输入",
+  "form.public.label": "目标公开",
+  "form.public.label.help": "客户、邀评人默认被分享",
+  "form.public.radio.public": "公开",
+  "form.public.radio.partially-public": "部分公开",
+  "form.public.radio.private": "不公开",
+  "form.publicUsers.placeholder": "公开给",
+  "form.publicUsers.option.A": "同事甲",
+  "form.publicUsers.option.B": "同事乙",
+  "form.publicUsers.option.C": "同事丙",
+  "form.dbtype.label": "数据库类型",
+  "form.logstash.jdbcconf.label": "Logstash JDBC 配置",
+  "form.logstash.jdbcconf.placeholder": "请输入JDBC配置",
+  "form.logstash.kafkaconf.label": "Logstash Kafka 配置",
+  "form.logstash.kafkaconf.placeholder": "请输入Kafka配置",
+  "form.button.search": "搜索",
+  "form.button.new": "新建",
+  "form.button.create": "创建",
+  "form.button.add": "添加",
+  "form.button.edit": "编辑",
+  "form.button.update": "更新",
+  "form.button.save": "保存",
+  "form.button.delete": "删除",
+  "form.button.cancel": "取消",
+  "form.button.collapse": "收起",
+  "form.button.advanced": "高级",
+  "table.field.operation": "操作",
+  "form.button.next": "下一步",
+  "form.button.pre": "上一步",
 
-  'menu.cluster': '集群管理',
-  'menu.cluster.overview': '概览',
-  'menu.cluster.monitoring': '集群监控',
-  'menu.cluster.settings': '集群设置',
-  'menu.cluster.logging': '集群日志',
+  "component.globalHeader.search": "站内搜索",
+  "component.globalHeader.search.example1": "搜索提示一",
+  "component.globalHeader.search.example2": "搜索提示二",
+  "component.globalHeader.search.example3": "搜索提示三",
+  "component.globalHeader.help": "使用文档",
+  "component.globalHeader.notification": "通知",
+  "component.globalHeader.notification.empty": "你已查看所有通知",
+  "component.globalHeader.message": "消息",
+  "component.globalHeader.message.empty": "您已读完所有消息",
+  "component.globalHeader.event": "待办",
+  "component.globalHeader.event.empty": "你已完成所有待办",
+  "component.noticeIcon.clear": "清空",
+  "component.noticeIcon.cleared": "清空了",
+  "component.noticeIcon.empty": "暂无数据",
 
+  "menu.home": "首页",
+  "menu.devtool": "开发工具",
+  "menu.alerting": "告警管理",
+  "menu.alerting.overview": "概览",
+  "menu.alerting.monitor": "监控管理",
+  "menu.alerting.destination": "渠道管理",
 
-  'menu.data': '数据管理',
-  'menu.data.overview': '概览',
-  'menu.data.index': '索引管理',
-  'menu.data.document': '文档管理',
-  'menu.data.template': '模版管理',
-  'menu.data.lifecycle': '周期管理',
-  'menu.data.discover': '数据探索',
-  'menu.data.indexPatterns': '数据视图',
+  "menu.cluster": "集群管理",
+  "menu.cluster.overview": "概览",
+  "menu.cluster.monitoring": "集群监控",
+  "menu.cluster.settings": "集群设置",
+  "menu.cluster.logging": "集群日志",
 
-  'menu.search': '搜索管理',
-  'menu.search.overview': '概览',
-  'menu.search.template': '搜索模板',
-  'menu.search.alias': '别名管理',
-  'menu.search.dict': '词库管理',
-  'menu.search.analyzer': '分词管理',
-  'menu.search.nlp': '自然语言处理',
+  "menu.data": "数据管理",
+  "menu.data.overview": "概览",
+  "menu.data.index": "索引管理",
+  "menu.data.document": "文档管理",
+  "menu.data.template": "模版管理",
+  "menu.data.lifecycle": "周期管理",
+  "menu.data.discover": "数据探索",
+  "menu.data.indexPatterns": "数据视图",
 
-  'menu.synchronize': '同步管理',
-  'menu.synchronize.overview': '概览',
-  'menu.synchronize.pipeline': '数据加工',
-  'menu.synchronize.rebuild': '数据重建',
-  'menu.synchronize.inout': '导入导出',
+  "menu.search": "搜索管理",
+  "menu.search.overview": "概览",
+  "menu.search.template": "搜索模板",
+  "menu.search.alias": "别名管理",
+  "menu.search.dict": "词库管理",
+  "menu.search.analyzer": "分词管理",
+  "menu.search.nlp": "自然语言处理",
 
-  'menu.backup': '备份管理',
-  'menu.backup.overview': '概览',
-  'menu.backup.index': '备份还原',
-  'menu.backup.lifecycle': '备份策略',
+  "menu.synchronize": "同步管理",
+  "menu.synchronize.overview": "概览",
+  "menu.synchronize.pipeline": "数据加工",
+  "menu.synchronize.rebuild": "数据重建",
+  "menu.synchronize.inout": "导入导出",
 
-  'menu.system': '系统管理',
-  'menu.system.cluster': '集群管理',
-  'menu.system.registCluster': '集群注册',
-  'menu.system.editCluster': '集群修改',
-  'menu.system.settings': '系统设置',
-  'menu.system.settings.global': '全局设置',
-  'menu.system.settings.gateway': '网关设置',
+  "menu.backup": "备份管理",
+  "menu.backup.overview": "概览",
+  "menu.backup.index": "备份还原",
+  "menu.backup.lifecycle": "备份策略",
 
-  'menu.system.security': '安全设置',
-  'menu.system.security.general': '基础设置',
-  'menu.system.security.sso': '单点登录',
-  'menu.system.security.roles': '角色管理',
-  'menu.system.security.users': '用户管理',
-  'menu.system.security.certs': '证书管理',
+  "menu.system": "系统管理",
+  "menu.system.cluster": "集群管理",
+  "menu.system.registCluster": "集群注册",
+  "menu.system.editCluster": "集群修改",
+  "menu.system.settings": "系统设置",
+  "menu.system.settings.global": "全局设置",
+  "menu.system.settings.gateway": "网关设置",
 
-  'menu.system.logs': '系统日志',
-  'menu.system.logs.overview': '日志概要',
-  'menu.system.logs.audit': '审计日志',
-  'menu.system.logs.query': '查询日志',
-  'menu.system.logs.slow': '慢日志',
-  'menu.system.commonCommand': '常用命令',
+  "menu.system.security": "安全设置",
+  "menu.system.security.general": "基础设置",
+  "menu.system.security.sso": "单点登录",
+  "menu.system.security.roles": "角色管理",
+  "menu.system.security.users": "用户管理",
+  "menu.system.security.certs": "证书管理",
 
+  "menu.system.logs": "系统日志",
+  "menu.system.logs.overview": "日志概要",
+  "menu.system.logs.audit": "审计日志",
+  "menu.system.logs.query": "查询日志",
+  "menu.system.logs.slow": "慢日志",
+  "menu.system.commonCommand": "常用命令",
 
-  'menu.form': '表单页',
-  'menu.form.basicform': '基础表单',
-  'menu.form.stepform': '分步表单',
-  'menu.form.stepform.info': '分步表单（填写转账信息）',
-  'menu.form.stepform.confirm': '分步表单（确认转账信息）',
-  'menu.form.stepform.result': '分步表单（完成）',
-  'menu.form.advancedform': '高级表单',
-  'menu.list': '列表页',
-  'menu.list.searchtable': '查询表格',
-  'menu.list.basiclist': '标准列表',
-  'menu.list.cardlist': '卡片列表',
-  'menu.list.searchlist': '搜索列表',
-  'menu.list.searchlist.articles': '搜索列表（文章）',
-  'menu.list.searchlist.projects': '搜索列表（项目）',
-  'menu.list.searchlist.applications': '搜索列表（应用）',
-  'menu.profile': '详情页',
-  'menu.profile.basic': '基础详情页',
-  'menu.profile.advanced': '高级详情页',
-  'menu.result': '结果页',
-  'menu.result.success': '成功页',
-  'menu.result.fail': '失败页',
-  'menu.exception': '异常页',
-  'menu.exception.not-permission': '403',
-  'menu.exception.not-find': '404',
-  'menu.exception.server-error': '500',
-  'menu.exception.trigger': '触发错误',
-  'menu.account': '个人页',
-  'menu.account.center': '个人中心',
-  'menu.account.settings': '个人设置',
-  'menu.account.trigger': '触发报错',
-  'menu.account.logout': '退出登录',
+  "menu.form": "表单页",
+  "menu.form.basicform": "基础表单",
+  "menu.form.stepform": "分步表单",
+  "menu.form.stepform.info": "分步表单（填写转账信息）",
+  "menu.form.stepform.confirm": "分步表单（确认转账信息）",
+  "menu.form.stepform.result": "分步表单（完成）",
+  "menu.form.advancedform": "高级表单",
+  "menu.list": "列表页",
+  "menu.list.searchtable": "查询表格",
+  "menu.list.basiclist": "标准列表",
+  "menu.list.cardlist": "卡片列表",
+  "menu.list.searchlist": "搜索列表",
+  "menu.list.searchlist.articles": "搜索列表（文章）",
+  "menu.list.searchlist.projects": "搜索列表（项目）",
+  "menu.list.searchlist.applications": "搜索列表（应用）",
+  "menu.profile": "详情页",
+  "menu.profile.basic": "基础详情页",
+  "menu.profile.advanced": "高级详情页",
+  "menu.result": "结果页",
+  "menu.result.success": "成功页",
+  "menu.result.fail": "失败页",
+  "menu.exception": "异常页",
+  "menu.exception.not-permission": "403",
+  "menu.exception.not-find": "404",
+  "menu.exception.server-error": "500",
+  "menu.exception.trigger": "触发错误",
+  "menu.account": "个人页",
+  "menu.account.center": "个人中心",
+  "menu.account.settings": "个人设置",
+  "menu.account.trigger": "触发报错",
+  "menu.account.logout": "退出登录",
 
-  'dashboard.charts.title.cluster_throughput.axis.indexing':"索引吞吐",
-  'dashboard.charts.title.cluster_throughput.axis.searching':"查询吞吐",
-  'dashboard.charts.title.cluster_latency.axis.indexing':"索引延迟",
-  'dashboard.charts.title.cluster_latency.axis.searching':"查询延迟",
-  'dashboard.charts.title.system_load.axis.load':"系统负载",
-  'dashboard.charts.title.system_network.axis.traffic':"网络吞吐",
-  'dashboard.charts.title.system_disk.axis.throughput':"磁盘吞吐",
-  'dashboard.charts.title.system_disk.axis.iops':"磁盘 IOPS",
-  'dashboard.charts.title.system_memory.axis.memory':"内存统计",
-  'dashboard.charts.title.system_memory.axis.gc':"GC 次数",
+  "dashboard.charts.title.cluster_throughput.axis.indexing": "索引吞吐",
+  "dashboard.charts.title.cluster_throughput.axis.searching": "查询吞吐",
+  "dashboard.charts.title.cluster_latency.axis.indexing": "索引延迟",
+  "dashboard.charts.title.cluster_latency.axis.searching": "查询延迟",
+  "dashboard.charts.title.system_load.axis.load": "系统负载",
+  "dashboard.charts.title.system_network.axis.traffic": "网络吞吐",
+  "dashboard.charts.title.system_disk.axis.throughput": "磁盘吞吐",
+  "dashboard.charts.title.system_disk.axis.iops": "磁盘 IOPS",
+  "dashboard.charts.title.system_memory.axis.memory": "内存统计",
+  "dashboard.charts.title.system_memory.axis.gc": "GC 次数",
 
-  'dashboard.charts.title.cluster_storage.axis.indices_storage':"索引存储",
-  'dashboard.charts.title.cluster_storage.axis.available_storage':"剩余存储",
+  "dashboard.charts.title.cluster_storage.axis.indices_storage": "索引存储",
+  "dashboard.charts.title.cluster_storage.axis.available_storage": "剩余存储",
 
-  'dashboard.charts.title.cluster_documents.axis.documents':"文档总数",
-  'dashboard.charts.title.cluster_documents.axis.counts':"分片总数",
+  "dashboard.charts.title.cluster_documents.axis.documents": "文档总数",
+  "dashboard.charts.title.cluster_documents.axis.counts": "分片总数",
 
-  'app.login.message-invalid-credentials': '账户或密码错误（admin/888888）',
-  'app.login.message-invalid-verification-code': '验证码错误',
-  'app.login.tab-login-credentials': '账户密码登录',
-  'app.login.tab-login-mobile': '手机号登录',
-  'app.login.remember-me': '自动登录',
-  'app.login.forgot-password': '忘记密码',
-  'app.login.sign-in-with': '其他登录方式',
-  'app.login.signup': '注册账户',
-  'app.login.login': '登录',
-  'app.register.register': '注册',
-  'app.register.get-verification-code': '获取验证码',
-  'app.register.sing-in': '使用已有账户登录',
-  'app.register-result.msg': '你的账户：{email} 注册成功',
-  'app.register-result.activation-email':
-    '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
-  'app.register-result.back-home': '返回首页',
-  'app.register-result.view-mailbox': '查看邮箱',
-  'app.home.introduce': '介绍',
-  'app.analysis.test': '工专路 {no} 号店',
-  'app.analysis.introduce': '指标说明',
-  'app.analysis.total-sales': '总销售额',
-  'app.analysis.day-sales': '日销售额',
-  'app.analysis.visits': '访问量',
-  'app.analysis.visits-trend': '访问量趋势',
-  'app.analysis.visits-ranking': '门店访问量排名',
-  'app.analysis.day-visits': '日访问量',
-  'app.analysis.week': '周同比',
-  'app.analysis.day': '日同比',
-  'app.analysis.payments': '支付笔数',
-  'app.analysis.conversion-rate': '转化率',
-  'app.analysis.operational-effect': '运营活动效果',
-  'app.analysis.sales-trend': '销售趋势',
-  'app.analysis.sales-ranking': '门店销售额排名',
-  'app.analysis.all-year': '全年',
-  'app.analysis.all-month': '本月',
-  'app.analysis.all-week': '本周',
-  'app.analysis.all-day': '今日',
-  'app.analysis.search-users': '搜索用户数',
-  'app.analysis.per-capita-search': '人均搜索次数',
-  'app.analysis.online-top-search': '线上热门搜索',
-  'app.analysis.the-proportion-of-sales': '销售额类别占比',
-  'app.analysis.channel.all': '全部渠道',
-  'app.analysis.channel.online': '线上',
-  'app.analysis.channel.stores': '门店',
-  'app.analysis.sales': '销售额',
-  'app.analysis.traffic': '客流量',
-  'app.analysis.table.rank': '排名',
-  'app.analysis.table.search-keyword': '搜索关键词',
-  'app.analysis.table.users': '用户数',
-  'app.analysis.table.weekly-range': '周涨幅',
-  'app.forms.basic.title': '基础表单',
-  'app.forms.basic.description':
-    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
-  'app.monitor.trading-activity': '活动实时交易情况',
-  'app.monitor.total-transactions': '今日交易总额',
-  'app.monitor.sales-target': '销售目标完成率',
-  'app.monitor.remaining-time': '活动剩余时间',
-  'app.monitor.total-transactions-per-second': '每秒交易总额',
-  'app.monitor.activity-forecast': '活动情况预测',
-  'app.monitor.efficiency': '券核效率',
-  'app.monitor.ratio': '跳出率',
-  'app.monitor.proportion-per-category': '各品类占比',
-  'app.monitor.fast-food': '中式快餐',
-  'app.monitor.western-food': '西餐',
-  'app.monitor.hot-pot': '火锅',
-  'app.monitor.waiting-for-implementation': 'Waiting for implementation',
-  'app.monitor.popular-searches': '热门搜索',
-  'app.monitor.resource-surplus': '资源剩余',
-  'app.monitor.fund-surplus': '补贴资金剩余',
-  
+  "app.login.message-invalid-credentials": "账户或密码错误（admin/888888）",
+  "app.login.message-invalid-verification-code": "验证码错误",
+  "app.login.tab-login-credentials": "账户密码登录",
+  "app.login.tab-login-mobile": "手机号登录",
+  "app.login.remember-me": "自动登录",
+  "app.login.forgot-password": "忘记密码",
+  "app.login.sign-in-with": "其他登录方式",
+  "app.login.signup": "注册账户",
+  "app.login.login": "登录",
+  "app.register.register": "注册",
+  "app.register.get-verification-code": "获取验证码",
+  "app.register.sing-in": "使用已有账户登录",
+  "app.register-result.msg": "你的账户：{email} 注册成功",
+  "app.register-result.activation-email":
+    "激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。",
+  "app.register-result.back-home": "返回首页",
+  "app.register-result.view-mailbox": "查看邮箱",
+  "app.home.introduce": "介绍",
+  "app.analysis.test": "工专路 {no} 号店",
+  "app.analysis.introduce": "指标说明",
+  "app.analysis.total-sales": "总销售额",
+  "app.analysis.day-sales": "日销售额",
+  "app.analysis.visits": "访问量",
+  "app.analysis.visits-trend": "访问量趋势",
+  "app.analysis.visits-ranking": "门店访问量排名",
+  "app.analysis.day-visits": "日访问量",
+  "app.analysis.week": "周同比",
+  "app.analysis.day": "日同比",
+  "app.analysis.payments": "支付笔数",
+  "app.analysis.conversion-rate": "转化率",
+  "app.analysis.operational-effect": "运营活动效果",
+  "app.analysis.sales-trend": "销售趋势",
+  "app.analysis.sales-ranking": "门店销售额排名",
+  "app.analysis.all-year": "全年",
+  "app.analysis.all-month": "本月",
+  "app.analysis.all-week": "本周",
+  "app.analysis.all-day": "今日",
+  "app.analysis.search-users": "搜索用户数",
+  "app.analysis.per-capita-search": "人均搜索次数",
+  "app.analysis.online-top-search": "线上热门搜索",
+  "app.analysis.the-proportion-of-sales": "销售额类别占比",
+  "app.analysis.channel.all": "全部渠道",
+  "app.analysis.channel.online": "线上",
+  "app.analysis.channel.stores": "门店",
+  "app.analysis.sales": "销售额",
+  "app.analysis.traffic": "客流量",
+  "app.analysis.table.rank": "排名",
+  "app.analysis.table.search-keyword": "搜索关键词",
+  "app.analysis.table.users": "用户数",
+  "app.analysis.table.weekly-range": "周涨幅",
+  "app.forms.basic.title": "基础表单",
+  "app.forms.basic.description":
+    "表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。",
+  "app.monitor.trading-activity": "活动实时交易情况",
+  "app.monitor.total-transactions": "今日交易总额",
+  "app.monitor.sales-target": "销售目标完成率",
+  "app.monitor.remaining-time": "活动剩余时间",
+  "app.monitor.total-transactions-per-second": "每秒交易总额",
+  "app.monitor.activity-forecast": "活动情况预测",
+  "app.monitor.efficiency": "券核效率",
+  "app.monitor.ratio": "跳出率",
+  "app.monitor.proportion-per-category": "各品类占比",
+  "app.monitor.fast-food": "中式快餐",
+  "app.monitor.western-food": "西餐",
+  "app.monitor.hot-pot": "火锅",
+  "app.monitor.waiting-for-implementation": "Waiting for implementation",
+  "app.monitor.popular-searches": "热门搜索",
+  "app.monitor.resource-surplus": "资源剩余",
+  "app.monitor.fund-surplus": "补贴资金剩余",
 
-  'app.settings.security.update':"更新设置",
-  'app.settings.global.update':"更新设置",
-  'app.settings.global.site_name':"站点名称",
-  'app.settings.global.domain':"站点域名",
-  'app.settings.global.listen_addr':"监听地址",
-  'app.settings.global.is_tls':"开启 TLS",
-  'app.settings.global.data_path':"数据目录",
-  'app.settings.global.log_path':"日志目录",
+  "app.settings.security.update": "更新设置",
+  "app.settings.global.update": "更新设置",
+  "app.settings.global.site_name": "站点名称",
+  "app.settings.global.domain": "站点域名",
+  "app.settings.global.listen_addr": "监听地址",
+  "app.settings.global.is_tls": "开启 TLS",
+  "app.settings.global.data_path": "数据目录",
+  "app.settings.global.log_path": "日志目录",
 
-  'app.settings.security.auth2factor_enabled':"开启双因子身份认证",
-  'app.settings.security.audit_enabled':"开启审计日志",
+  "app.settings.security.auth2factor_enabled": "开启双因子身份认证",
+  "app.settings.security.audit_enabled": "开启审计日志",
 
-
-  'app.settings.menuMap.basic': '基本设置',
-  'app.settings.menuMap.security': '安全设置',
-  'app.settings.menuMap.binding': '账号绑定',
-  'app.settings.menuMap.notification': '新消息通知',
-  'app.settings.basic.avatar': '头像',
-  'app.settings.basic.change-avatar': '更换头像',
-  'app.settings.basic.email': '邮箱',
-  'app.settings.basic.email-message': '请输入您的邮箱!',
-  'app.settings.basic.nickname': '昵称',
-  'app.settings.basic.nickname-message': '请输入您的昵称!',
-  'app.settings.basic.profile': '个人简介',
-  'app.settings.basic.profile-message': '请输入个人简介!',
-  'app.settings.basic.profile-placeholder': '个人简介',
-  'app.settings.basic.country': '国家/地区',
-  'app.settings.basic.country-message': '请输入您的国家或地区!',
-  'app.settings.basic.geographic': '所在省市',
-  'app.settings.basic.geographic-message': '请输入您的所在省市!',
-  'app.settings.basic.address': '街道地址',
-  'app.settings.basic.address-message': '请输入您的街道地址!',
-  'app.settings.basic.phone': '联系电话',
-  'app.settings.basic.phone-message': '请输入您的联系电话!',
-  'app.settings.basic.update': '更新基本信息',
-  'app.settings.security.strong': '强',
-  'app.settings.security.medium': '中',
-  'app.settings.security.weak': '弱',
-  'app.settings.security.password': '账户密码',
-  'app.settings.security.password-description': '当前密码强度：',
-  'app.settings.security.phone': '密保手机',
-  'app.settings.security.phone-description': '已绑定手机：',
-  'app.settings.security.question': '密保问题',
-  'app.settings.security.question-description': '未设置密保问题，密保问题可有效保护账户安全',
-  'app.settings.security.email': '备用邮箱',
-  'app.settings.security.email-description': '已绑定邮箱：',
-  'app.settings.security.mfa': 'MFA 设备',
-  'app.settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
-  'app.settings.security.modify': '修改',
-  'app.settings.security.set': '设置',
-  'app.settings.security.bind': '绑定',
-  'app.settings.binding.taobao': '绑定淘宝',
-  'app.settings.binding.taobao-description': '当前未绑定淘宝账号',
-  'app.settings.binding.alipay': '绑定支付宝',
-  'app.settings.binding.alipay-description': '当前未绑定支付宝账号',
-  'app.settings.binding.dingding': '绑定钉钉',
-  'app.settings.binding.dingding-description': '当前未绑定钉钉账号',
-  'app.settings.binding.bind': '绑定',
-  'app.settings.notification.password': '账户密码',
-  'app.settings.notification.password-description': '其他用户的消息将以站内信的形式通知',
-  'app.settings.notification.messages': '系统消息',
-  'app.settings.notification.messages-description': '系统消息将以站内信的形式通知',
-  'app.settings.notification.todo': '账户密码',
-  'app.settings.notification.todo-description': '账户密码',
-  'app.settings.open': '开',
-  'app.settings.close': '关',
-  'app.exception.back': '返回首页',
-  'app.exception.description.403': '抱歉，你无权访问该页面',
-  'app.exception.description.404': '抱歉，你访问的页面不存在',
-  'app.exception.description.500': '抱歉，服务器出错了',
-  'app.result.error.title': '提交失败',
-  'app.result.error.description': '请核对并修改以下信息后，再重新提交。',
-  'app.result.error.hint-title': '您提交的内容有如下错误：',
-  'app.result.error.hint-text1': '您的账户已被冻结',
-  'app.result.error.hint-btn1': '立即解冻',
-  'app.result.error.hint-text2': '您的账户还不具备申请资格',
-  'app.result.error.hint-btn2': '立即升级',
-  'app.result.error.btn-text': '返回修改',
-  'app.result.success.title': '提交成功',
-  'app.result.success.description':
-    '提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
-  'app.result.success.operate-title': '项目名称',
-  'app.result.success.operate-id': '项目 ID：',
-  'app.result.success.principal': '负责人：',
-  'app.result.success.operate-time': '生效时间：',
-  'app.result.success.step1-title': '创建项目',
-  'app.result.success.step1-operator': '曲丽丽',
-  'app.result.success.step2-title': '部门初审',
-  'app.result.success.step2-operator': '周毛毛',
-  'app.result.success.step2-extra': '催一下',
-  'app.result.success.step3-title': '财务复核',
-  'app.result.success.step4-title': '完成',
-  'app.result.success.btn-return': '返回列表',
-  'app.result.success.btn-project': '查看项目',
-  'app.result.success.btn-print': '打印',
-  'app.setting.pagestyle': '整体风格设置',
-  'app.setting.pagestyle.dark': '暗色菜单风格',
-  'app.setting.pagestyle.light': '亮色菜单风格',
-  'app.setting.content-width': '内容区域宽度',
-  'app.setting.content-width.fixed': '定宽',
-  'app.setting.content-width.fluid': '流式',
-  'app.setting.themecolor': '主题色',
-  'app.setting.themecolor.dust': '薄暮',
-  'app.setting.themecolor.volcano': '火山',
-  'app.setting.themecolor.sunset': '日暮',
-  'app.setting.themecolor.cyan': '明青',
-  'app.setting.themecolor.green': '极光绿',
-  'app.setting.themecolor.daybreak': '拂晓蓝（默认）',
-  'app.setting.themecolor.geekblue': '极客蓝',
-  'app.setting.themecolor.purple': '酱紫',
-  'app.setting.navigationmode': '导航模式',
-  'app.setting.sidemenu': '侧边菜单布局',
-  'app.setting.topmenu': '顶部菜单布局',
-  'app.setting.fixedheader': '固定 Header',
-  'app.setting.fixedsidebar': '固定侧边菜单',
-  'app.setting.fixedsidebar.hint': '侧边菜单布局时可配置',
-  'app.setting.hideheader': '下滑时隐藏 Header',
-  'app.setting.hideheader.hint': '固定 Header 时可配置',
-  'app.setting.othersettings': '其他设置',
-  'app.setting.weakmode': '色弱模式',
-  'app.setting.copy': '拷贝设置',
-  'app.setting.copyinfo': '拷贝成功，请到 src/defaultSettings.js 中替换默认配置',
-  'app.setting.production.hint':
-    '配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',
+  "app.settings.menuMap.basic": "基本设置",
+  "app.settings.menuMap.security": "安全设置",
+  "app.settings.menuMap.binding": "账号绑定",
+  "app.settings.menuMap.notification": "新消息通知",
+  "app.settings.basic.avatar": "头像",
+  "app.settings.basic.change-avatar": "更换头像",
+  "app.settings.basic.email": "邮箱",
+  "app.settings.basic.email-message": "请输入您的邮箱!",
+  "app.settings.basic.nickname": "昵称",
+  "app.settings.basic.nickname-message": "请输入您的昵称!",
+  "app.settings.basic.profile": "个人简介",
+  "app.settings.basic.profile-message": "请输入个人简介!",
+  "app.settings.basic.profile-placeholder": "个人简介",
+  "app.settings.basic.country": "国家/地区",
+  "app.settings.basic.country-message": "请输入您的国家或地区!",
+  "app.settings.basic.geographic": "所在省市",
+  "app.settings.basic.geographic-message": "请输入您的所在省市!",
+  "app.settings.basic.address": "街道地址",
+  "app.settings.basic.address-message": "请输入您的街道地址!",
+  "app.settings.basic.phone": "联系电话",
+  "app.settings.basic.phone-message": "请输入您的联系电话!",
+  "app.settings.basic.update": "更新基本信息",
+  "app.settings.security.strong": "强",
+  "app.settings.security.medium": "中",
+  "app.settings.security.weak": "弱",
+  "app.settings.security.password": "账户密码",
+  "app.settings.security.password-description": "当前密码强度：",
+  "app.settings.security.phone": "密保手机",
+  "app.settings.security.phone-description": "已绑定手机：",
+  "app.settings.security.question": "密保问题",
+  "app.settings.security.question-description":
+    "未设置密保问题，密保问题可有效保护账户安全",
+  "app.settings.security.email": "备用邮箱",
+  "app.settings.security.email-description": "已绑定邮箱：",
+  "app.settings.security.mfa": "MFA 设备",
+  "app.settings.security.mfa-description":
+    "未绑定 MFA 设备，绑定后，可以进行二次确认",
+  "app.settings.security.modify": "修改",
+  "app.settings.security.set": "设置",
+  "app.settings.security.bind": "绑定",
+  "app.settings.binding.taobao": "绑定淘宝",
+  "app.settings.binding.taobao-description": "当前未绑定淘宝账号",
+  "app.settings.binding.alipay": "绑定支付宝",
+  "app.settings.binding.alipay-description": "当前未绑定支付宝账号",
+  "app.settings.binding.dingding": "绑定钉钉",
+  "app.settings.binding.dingding-description": "当前未绑定钉钉账号",
+  "app.settings.binding.bind": "绑定",
+  "app.settings.notification.password": "账户密码",
+  "app.settings.notification.password-description":
+    "其他用户的消息将以站内信的形式通知",
+  "app.settings.notification.messages": "系统消息",
+  "app.settings.notification.messages-description":
+    "系统消息将以站内信的形式通知",
+  "app.settings.notification.todo": "账户密码",
+  "app.settings.notification.todo-description": "账户密码",
+  "app.settings.open": "开",
+  "app.settings.close": "关",
+  "app.exception.back": "返回首页",
+  "app.exception.description.403": "抱歉，你无权访问该页面",
+  "app.exception.description.404": "抱歉，你访问的页面不存在",
+  "app.exception.description.500": "抱歉，服务器出错了",
+  "app.result.error.title": "提交失败",
+  "app.result.error.description": "请核对并修改以下信息后，再重新提交。",
+  "app.result.error.hint-title": "您提交的内容有如下错误：",
+  "app.result.error.hint-text1": "您的账户已被冻结",
+  "app.result.error.hint-btn1": "立即解冻",
+  "app.result.error.hint-text2": "您的账户还不具备申请资格",
+  "app.result.error.hint-btn2": "立即升级",
+  "app.result.error.btn-text": "返回修改",
+  "app.result.success.title": "提交成功",
+  "app.result.success.description":
+    "提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。",
+  "app.result.success.operate-title": "项目名称",
+  "app.result.success.operate-id": "项目 ID：",
+  "app.result.success.principal": "负责人：",
+  "app.result.success.operate-time": "生效时间：",
+  "app.result.success.step1-title": "创建项目",
+  "app.result.success.step1-operator": "曲丽丽",
+  "app.result.success.step2-title": "部门初审",
+  "app.result.success.step2-operator": "周毛毛",
+  "app.result.success.step2-extra": "催一下",
+  "app.result.success.step3-title": "财务复核",
+  "app.result.success.step4-title": "完成",
+  "app.result.success.btn-return": "返回列表",
+  "app.result.success.btn-project": "查看项目",
+  "app.result.success.btn-print": "打印",
+  "app.setting.pagestyle": "整体风格设置",
+  "app.setting.pagestyle.dark": "暗色菜单风格",
+  "app.setting.pagestyle.light": "亮色菜单风格",
+  "app.setting.content-width": "内容区域宽度",
+  "app.setting.content-width.fixed": "定宽",
+  "app.setting.content-width.fluid": "流式",
+  "app.setting.themecolor": "主题色",
+  "app.setting.themecolor.dust": "薄暮",
+  "app.setting.themecolor.volcano": "火山",
+  "app.setting.themecolor.sunset": "日暮",
+  "app.setting.themecolor.cyan": "明青",
+  "app.setting.themecolor.green": "极光绿",
+  "app.setting.themecolor.daybreak": "拂晓蓝（默认）",
+  "app.setting.themecolor.geekblue": "极客蓝",
+  "app.setting.themecolor.purple": "酱紫",
+  "app.setting.navigationmode": "导航模式",
+  "app.setting.sidemenu": "侧边菜单布局",
+  "app.setting.topmenu": "顶部菜单布局",
+  "app.setting.fixedheader": "固定 Header",
+  "app.setting.fixedsidebar": "固定侧边菜单",
+  "app.setting.fixedsidebar.hint": "侧边菜单布局时可配置",
+  "app.setting.hideheader": "下滑时隐藏 Header",
+  "app.setting.hideheader.hint": "固定 Header 时可配置",
+  "app.setting.othersettings": "其他设置",
+  "app.setting.weakmode": "色弱模式",
+  "app.setting.copy": "拷贝设置",
+  "app.setting.copyinfo":
+    "拷贝成功，请到 src/defaultSettings.js 中替换默认配置",
+  "app.setting.production.hint":
+    "配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件",
 
   ...alert,
   ...console,
+  ...cluster,
 };
diff --git a/web/src/locales/zh-CN/cluster.js b/web/src/locales/zh-CN/cluster.js
new file mode 100644
index 00000000..599632ab
--- /dev/null
+++ b/web/src/locales/zh-CN/cluster.js
@@ -0,0 +1,109 @@
+export default {
+  "cluster.manage.title": "集群管理",
+  "cluster.manage.description":
+    "集群管理可以帮助您快速接入不同版本的 Elasticsearch 集群，以及删除和修改集群配置。",
+  "cluster.manage.label.cluster_name": "集群名称",
+  "cluster.manage.btn.regist": "注册集群",
+  "cluster.manage.table.column.name": "集群名称",
+  "cluster.manage.table.column.health": "集群状态",
+  "cluster.manage.table.column.version": "程序版本",
+  "cluster.manage.table.column.node_count": "节点数",
+  "cluster.manage.table.column.endpoint": "集群地址",
+  "cluster.manage.table.column.monitored": "监控启用状态",
+  "cluster.manage.table.column.operation": "操作",
+  "cluster.manage.table.column.description": "描述",
+  "cluster.manage.monitored.on": "启用",
+  "cluster.manage.monitored.off": "关闭",
+  "cluster.regist.title": "集群注册",
+  "cluster.regist.description": "输入集群地址和身份验证信息分步创建集群。",
+  "cluster.regist.step.connect.title": "连接",
+  "cluster.regist.step.confirm.title": "确认",
+  "cluster.regist.step.complete.title": "完成",
+  "cluster.regist.step.connect.label.auth": "身份验证",
+  "cluster.regist.step.connect.label.username": "用户名",
+  "cluster.regist.step.connect.label.password": "密码",
+  "cluster.regist.step.connect.label.data_nodes": "数据节点数",
+  "cluster.regist.step.connect.label.shards": "分片数",
+  "cluster.regist.step.complete.success": "注册成功",
+  "cluster.regist.step.complete.btn.create": "再注册一个集群",
+  "cluster.regist.step.complete.btn.goto": "查看集群列表",
+  "cluster.regist.step.complete.tls.yes": "是",
+  "cluster.regist.step.complete.tls.no": "否",
+
+  "cluster.monitor.cluster.title": "集群",
+  "cluster.monitor.node.title": "节点",
+  "cluster.monitor.index.title": "索引",
+  "cluster.monitor.summary.name": "集群名称",
+  "cluster.monitor.summary.online_time": "在线时长",
+  "cluster.monitor.summary.version": "集群版本",
+  "cluster.monitor.summary.health": "健康状态",
+  "cluster.monitor.summary.node_count": "节点数",
+  "cluster.monitor.summary.total_index": "索引数",
+  "cluster.monitor.summary.shard": "主/总分片",
+  "cluster.monitor.summary.unassign_shard": "未分配分片",
+  "cluster.monitor.summary.total_docs": "文档数",
+  "cluster.monitor.summary.storage": "存储空间",
+  "cluster.monitor.summary.jvm": "JVM 内存",
+
+  "cluster.monitor.timepicker.last15minutes": "最近15分钟",
+  "cluster.monitor.timepicker.thisweek": "这个星期",
+  "cluster.monitor.timepicker.last30minutes": "最近30分钟",
+  "cluster.monitor.timepicker.lasthour": "最近1小时",
+  "cluster.monitor.timepicker.lastday": "最近1天",
+  "cluster.monitor.timepicker.lastweek": "最近1周",
+  "cluster.monitor.timepicker.lastmonth": "最近1个月",
+  "cluster.monitor.timepicker.last3month": "最近3个月",
+  "cluster.monitor.timepicker.lastyear": "最近1年",
+  "cluster.monitor.timepicker.today": "今天",
+
+  "cluster.metrics.node.axis.cpu.title": "CPU Usage",
+  "cluster.metrics.node.axis.disk.title": "Disk Available",
+  "cluster.metrics.node.axis.indexing_rate.title": "Indexing Rate",
+  "cluster.metrics.node.axis.query_rate.title": "Query Rate",
+  "cluster.metrics.node.axis.fetch_rate.title": "Fetch Rate",
+  "cluster.metrics.node.axis.flush_latency.title": "Flush Latency",
+  "cluster.metrics.node.axis.indexing_latency.title": "Indexing Latency",
+  "cluster.metrics.node.axis.query_latency.title": "Query Latency",
+  "cluster.metrics.node.axis.fetch_latency.title": "Fetch Latency",
+  "cluster.metrics.node.axis.merge_latency.title": "Merge Latency",
+  "cluster.metrics.node.axis.refresh_latency.title": "Refresh Latency",
+  "cluster.metrics.node.axis.flush_latency.title": "Flush Latency",
+  "cluster.metrics.node.axis.query_cache.title": "Query Cache",
+  "cluster.metrics.node.axis.request_cache.title": "Request Cache",
+  "cluster.metrics.node.axis.http_connect_num.title": "Http Connections",
+  "cluster.metrics.node.axis.http_rate.title": "Rate Of Opened Connections",
+  "cluster.metrics.node.axis.segment_memory.title": "Segment Memory",
+  "cluster.metrics.node.axis.segment_count.title": "Segment Count",
+  "cluster.metrics.node.axis.docs_count.title": "Document Count",
+  "cluster.metrics.node.axis.index_storage.title": "Indices Storage",
+  "cluster.metrics.node.axis.jvm_heap_used_percent.title": "JVM Heap Usage",
+
+  "cluster.metrics.index.axis.index_storage.title": "Index Storage",
+  "cluster.metrics.index.axis.doc_count.title": "Document count",
+  "cluster.metrics.index.axis.query_times.title": "Query Requests",
+  "cluster.metrics.index.axis.fetch_times.title": "Fetch Requests",
+  "cluster.metrics.index.axis.merge_times.title": "Merge Requests",
+  "cluster.metrics.index.axis.refresh_times.title": "Refresh Requests",
+  "cluster.metrics.index.axis.indexing_rate.title": "Indexing Rate",
+  "cluster.metrics.index.axis.indexing_latency.title": "Indexing Latency",
+  "cluster.metrics.index.axis.query_latency.title": "Query Latency",
+  "cluster.metrics.index.axis.fetch_latency.title": "Fetch Latency",
+  "cluster.metrics.index.axis.merge_latency.title": "Merge Latency",
+  "cluster.metrics.index.axis.refresh_latency.title": "Refresh Latency",
+  "cluster.metrics.index.axis.query_cache.title": "Query Cache",
+  "cluster.metrics.index.axis.request_cache.title": "Request Cache",
+  "cluster.metrics.index.axis.segment_memory.title": "Segment Memory",
+  "cluster.metrics.index.axis.segment_fields_memory.title":
+    "Segment Stored Fields Memory",
+  "cluster.metrics.index.axis.segment_doc_values_memory.title":
+    "Segment Doc Values Memory",
+  "cluster.metrics.index.axis.segment_terms_memory.title":
+    "Segment Terms Memory",
+  "cluster.metrics.group.system": "System",
+  "cluster.metrics.group.storage": "Storage",
+  "cluster.metrics.group.latency": "Latency",
+  "cluster.metrics.group.operations": "Operations",
+  "cluster.metrics.group.http": "Http Traffic",
+  "cluster.metrics.group.memory": "Memory",
+  "cluster.metrics.group.cache": "Cache",
+};
diff --git a/web/src/pages/Cluster/Metrics.js b/web/src/pages/Cluster/Metrics.js
index bcf4e86e..4c7d507f 100644
--- a/web/src/pages/Cluster/Metrics.js
+++ b/web/src/pages/Cluster/Metrics.js
@@ -162,6 +162,7 @@ const MonitorDatePicker = ({
   clusterMonitor,
   selectedCluster: global.selectedCluster,
   clusterList: global.clusterList,
+  clusterStatus: global.clusterStatus,
 }))
 class ClusterMonitor extends PureComponent {
   constructor(props) {
@@ -376,52 +377,72 @@ class ClusterMonitor extends PureComponent {
       {
         from: "now-15m",
         to: "now",
-        display: "最近15分钟",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.last15minutes",
+        }),
       },
       {
         from: "now-30m",
         to: "now",
-        display: "最近30分钟",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.last30minutes",
+        }),
       },
       {
         from: "now-1h",
         to: "now",
-        display: "最近一小时",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.lasthour",
+        }),
       },
       {
         from: "now-24h",
         to: "now",
-        display: "最近一天",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.lastday",
+        }),
       },
       {
         from: "now/d",
         to: "now/d",
-        display: "今天",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.today",
+        }),
       },
       {
         from: "now/w",
         to: "now/w",
-        display: "这个星期",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.thisweek",
+        }),
       },
       {
         from: "now-7d",
         to: "now",
-        display: "最近一周",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.lastweek",
+        }),
       },
       {
         from: "now-30d",
         to: "now",
-        display: "最近一个月",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.lastmonth",
+        }),
       },
       {
         from: "now-90d",
         to: "now",
-        display: "最近三个月",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.last3month",
+        }),
       },
       {
         from: "now-1y",
         to: "now",
-        display: "最近一年",
+        display: formatMessage({
+          id: "cluster.monitor.timepicker.lastyear",
+        }),
       },
     ].map(({ from, to, display }) => {
       return {
@@ -430,240 +451,278 @@ class ClusterMonitor extends PureComponent {
         label: display,
       };
     });
+    let clusterAvailable = true;
+    const { clusterStatus: cstatus, selectedCluster } = this.props;
+    if (cstatus && selectedCluster) {
+      clusterAvailable = cstatus[selectedCluster.id].available;
+    }
 
     return (
-      <Spin spinning={this.state.spinning} tip="Loading...">
-        <div style={{ background: "#fff" }}>
-          <div style={{ background: "#fff", padding: "5px", marginBottom: 5 }}>
-            <MonitorDatePicker
-              timeRange={this.state.timeRange}
-              commonlyUsedRanges={commonlyUsedRanges}
-              isLoading={this.state.spinning}
-              onChange={this.handleTimeChange}
-            />
-          </div>
-
-          <div
-            style={{
-              padding: 15,
-              borderTop: "1px solid rgb(232, 232, 232)",
-              borderBottom: "1px solid rgb(232, 232, 232)",
-            }}
-          >
-            <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="集群名称"
-                  value={clusterStats.cluster_name}
-                />
-              </Col>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="在线时长"
-                  value={clusterStats.uptime}
-                />
-              </Col>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="集群版本"
-                  value={clusterStats.version}
-                />
-              </Col>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="健康情况"
-                  value={clusterStats.status}
-                  prefix={<HealthCircle color={clusterStats.status} />}
-                />
-              </Col>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="节点数"
-                  value={clusterStats.nodes_count}
-                />
-              </Col>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="索引数"
-                  value={clusterStats.indices_count}
-                />
-              </Col>
-
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="主/总分片"
-                  value={
-                    clusterStats.primary_shards +
-                    "/" +
-                    clusterStats.total_shards
-                  }
-                />
-              </Col>
-
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="未分配分片"
-                  value={clusterStats.unassigned_shards}
-                />
-              </Col>
-
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="文档数"
-                  value={clusterStats.document_count}
-                />
-              </Col>
-
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="存储空间"
-                  value={
-                    clusterStats.used_store_bytes +
-                    "/" +
-                    clusterStats.max_store_bytes
-                  }
-                />
-              </Col>
-              <Col md={2} xs={4}>
-                <Statistic
-                  valueStyle={vstyle}
-                  title="JVM 内存"
-                  value={
-                    clusterStats.used_jvm_bytes +
-                    "/" +
-                    clusterStats.max_jvm_bytes
-                  }
-                />
-              </Col>
-            </Row>
-          </div>
-          <div>
-            <Tabs animated={false}>
-              <Tabs.TabPane key="cluster" tab="Cluster">
-                {Object.keys(clusterMetrics).map((e, i) => {
-                  let axis = clusterMetrics[e].axis;
-                  let lines = clusterMetrics[e].lines;
-                  let disableHeaderFormat = false;
-                  let headerUnit = "";
-                  return (
-                    <div key={e} className={styles.vizChartContainer}>
-                      <Chart
-                        size={[, 200]}
-                        className={styles.vizChartItem}
-                        ref={this.chartRefs[i]}
-                      >
-                        <Settings
-                          pointerUpdateDebounce={0}
-                          pointerUpdateTrigger="x"
-                          externalPointerEvents={{
-                            tooltip: { visible: true },
-                          }}
-                          onPointerUpdate={this.pointerUpdate}
-                          theme={theme}
-                          showLegend
-                          legendPosition={Position.Top}
-                          onBrushEnd={this.handleChartBrush}
-                          tooltip={{
-                            headerFormatter: disableHeaderFormat
-                              ? undefined
-                              : ({ value }) =>
-                                  `${formatter.full_dates(value)}${
-                                    headerUnit ? ` ${headerUnit}` : ""
-                                  }`,
-                          }}
-                          debug={false}
-                        />
-                        <Axis
-                          id="{e}-bottom"
-                          position={Position.Bottom}
-                          showOverlappingTicks
-                          labelFormat={this.state.timeRange.timeFormatter}
-                          tickFormat={this.state.timeRange.timeFormatter}
-                        />
-                        {axis.map((item) => {
-                          return (
-                            <Axis
-                              key={e + "-" + item.id}
-                              id={e + "-" + item.id}
-                              showGridLines={item.showGridLines}
-                              groupId={item.group}
-                              title={formatMessage({
-                                id:
-                                  "dashboard.charts.title." +
-                                  e +
-                                  ".axis." +
-                                  item.title,
-                              })}
-                              position={item.position}
-                              ticks={item.ticks}
-                              labelFormat={getFormatter(
-                                item.formatType,
-                                item.labelFormat
-                              )}
-                              tickFormat={getFormatter(
-                                item.formatType,
-                                item.tickFormat
-                              )}
-                            />
-                          );
-                        })}
-
-                        {lines.map((item) => {
-                          return (
-                            <LineSeries
-                              key={item.metric.label}
-                              id={item.metric.label}
-                              groupId={item.metric.group}
-                              timeZone={timezone}
-                              xScaleType={ScaleType.Time}
-                              yScaleType={ScaleType.Linear}
-                              xAccessor={0}
-                              tickFormat={getFormatter(
-                                item.metric.formatType,
-                                item.metric.tickFormat,
-                                item.metric.units
-                              )}
-                              yAccessors={[1]}
-                              data={item.data}
-                              curve={CurveType.CURVE_MONOTONE_X}
-                            />
-                          );
-                        })}
-                      </Chart>
-                    </div>
-                  );
-                })}
-              </Tabs.TabPane>
-              <Tabs.TabPane key="node" tab="Node">
-                <NodeMetric
-                  clusterID={this.props.selectedCluster.id}
-                  timezone={timezone}
-                  timeRange={this.state.timeRange}
-                  handleTimeChange={this.handleTimeChange}
-                />
-              </Tabs.TabPane>
-              <Tabs.TabPane key="index" tab="Index">
-                <IndexMetric
-                  clusterID={this.props.selectedCluster.id}
-                  timezone={timezone}
-                  timeRange={this.state.timeRange}
-                  handleTimeChange={this.handleTimeChange}
-                />
-              </Tabs.TabPane>
-            </Tabs>
-          </div>
+      //   <Spin spinning={this.state.spinning} tip="Loading...">
+      <div style={{ background: "#fff" }}>
+        <div style={{ background: "#fff", padding: "5px", marginBottom: 5 }}>
+          <MonitorDatePicker
+            timeRange={this.state.timeRange}
+            commonlyUsedRanges={commonlyUsedRanges}
+            isLoading={this.state.spinning}
+            onChange={this.handleTimeChange}
+          />
         </div>
-      </Spin>
+
+        <div className={styles.summary}>
+          {!clusterAvailable ? (
+            <div className={styles.mask}>Cluster is not availabe.</div>
+          ) : null}
+          <Row
+            gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}
+            className={!clusterAvailable ? styles.metricMask : ""}
+          >
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.name",
+                })}
+                value={clusterStats.cluster_name}
+              />
+            </Col>
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.online_time",
+                })}
+                value={clusterStats.uptime}
+              />
+            </Col>
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.version",
+                })}
+                value={clusterStats.version}
+              />
+            </Col>
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.health",
+                })}
+                value={clusterStats.status}
+                prefix={<HealthCircle color={clusterStats.status} />}
+              />
+            </Col>
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.node_count",
+                })}
+                value={clusterStats.nodes_count}
+              />
+            </Col>
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.total_index",
+                })}
+                value={clusterStats.indices_count}
+              />
+            </Col>
+
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.shard",
+                })}
+                value={
+                  clusterStats.primary_shards + "/" + clusterStats.total_shards
+                }
+              />
+            </Col>
+
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.unassign_shard",
+                })}
+                value={clusterStats.unassigned_shards}
+              />
+            </Col>
+
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.total_docs",
+                })}
+                value={clusterStats.document_count}
+              />
+            </Col>
+
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.storage",
+                })}
+                value={
+                  clusterStats.used_store_bytes +
+                  "/" +
+                  clusterStats.max_store_bytes
+                }
+              />
+            </Col>
+            <Col md={2} xs={4}>
+              <Statistic
+                valueStyle={vstyle}
+                title={formatMessage({
+                  id: "cluster.monitor.summary.jvm",
+                })}
+                value={
+                  clusterStats.used_jvm_bytes + "/" + clusterStats.max_jvm_bytes
+                }
+              />
+            </Col>
+          </Row>
+        </div>
+        <div>
+          <Tabs animated={false}>
+            <Tabs.TabPane
+              key="cluster"
+              tab={formatMessage({
+                id: "cluster.monitor.cluster.title",
+              })}
+            >
+              {Object.keys(clusterMetrics).map((e, i) => {
+                let axis = clusterMetrics[e].axis;
+                let lines = clusterMetrics[e].lines;
+                let disableHeaderFormat = false;
+                let headerUnit = "";
+                return (
+                  <div key={e} className={styles.vizChartContainer}>
+                    <Chart
+                      size={[, 200]}
+                      className={styles.vizChartItem}
+                      ref={this.chartRefs[i]}
+                    >
+                      <Settings
+                        pointerUpdateDebounce={0}
+                        pointerUpdateTrigger="x"
+                        // externalPointerEvents={{
+                        //   tooltip: { visible: true },
+                        // }}
+                        onPointerUpdate={this.pointerUpdate}
+                        theme={theme}
+                        showLegend
+                        legendPosition={Position.Top}
+                        onBrushEnd={this.handleChartBrush}
+                        tooltip={{
+                          headerFormatter: disableHeaderFormat
+                            ? undefined
+                            : ({ value }) =>
+                                `${formatter.full_dates(value)}${
+                                  headerUnit ? ` ${headerUnit}` : ""
+                                }`,
+                        }}
+                        debug={false}
+                      />
+                      <Axis
+                        id="{e}-bottom"
+                        position={Position.Bottom}
+                        showOverlappingTicks
+                        labelFormat={this.state.timeRange.timeFormatter}
+                        tickFormat={this.state.timeRange.timeFormatter}
+                      />
+                      {axis.map((item) => {
+                        return (
+                          <Axis
+                            key={e + "-" + item.id}
+                            id={e + "-" + item.id}
+                            showGridLines={item.showGridLines}
+                            groupId={item.group}
+                            title={formatMessage({
+                              id:
+                                "dashboard.charts.title." +
+                                e +
+                                ".axis." +
+                                item.title,
+                            })}
+                            position={item.position}
+                            ticks={item.ticks}
+                            labelFormat={getFormatter(
+                              item.formatType,
+                              item.labelFormat
+                            )}
+                            tickFormat={getFormatter(
+                              item.formatType,
+                              item.tickFormat
+                            )}
+                          />
+                        );
+                      })}
+
+                      {lines.map((item) => {
+                        return (
+                          <LineSeries
+                            key={item.metric.label}
+                            id={item.metric.label}
+                            groupId={item.metric.group}
+                            timeZone={timezone}
+                            xScaleType={ScaleType.Time}
+                            yScaleType={ScaleType.Linear}
+                            xAccessor={0}
+                            tickFormat={getFormatter(
+                              item.metric.formatType,
+                              item.metric.tickFormat,
+                              item.metric.units
+                            )}
+                            yAccessors={[1]}
+                            data={item.data}
+                            curve={CurveType.CURVE_MONOTONE_X}
+                          />
+                        );
+                      })}
+                    </Chart>
+                  </div>
+                );
+              })}
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              key="node"
+              tab={formatMessage({
+                id: "cluster.monitor.node.title",
+              })}
+            >
+              <NodeMetric
+                clusterID={this.props.selectedCluster.id}
+                timezone={timezone}
+                timeRange={this.state.timeRange}
+                handleTimeChange={this.handleTimeChange}
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              key="index"
+              tab={formatMessage({
+                id: "cluster.monitor.index.title",
+              })}
+            >
+              <IndexMetric
+                clusterID={this.props.selectedCluster.id}
+                timezone={timezone}
+                timeRange={this.state.timeRange}
+                handleTimeChange={this.handleTimeChange}
+              />
+            </Tabs.TabPane>
+          </Tabs>
+        </div>
+      </div>
+      //   </Spin>
     );
   }
 }
diff --git a/web/src/pages/Cluster/Metrics.less b/web/src/pages/Cluster/Metrics.less
index 4ca47bce..4210fed3 100644
--- a/web/src/pages/Cluster/Metrics.less
+++ b/web/src/pages/Cluster/Metrics.less
@@ -15,3 +15,27 @@
   fill-opacity: 50%;
   padding-left: 5px;
 }
+
+.summary {
+  padding: 15px;
+  border-top: 1px solid rgb(232, 232, 232);
+  border-bottom: 1px solid rgb(232, 232, 232);
+  position: relative;
+  .mask {
+    position: absolute;
+    inset: 0;
+    background: rgba(96, 96, 96, 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: red;
+    font-size: 20px;
+  }
+  .metricMask {
+    filter: blur(4px);
+    -o-filter: blur(4px);
+    -ms-filter: blur(4px);
+    -moz-filter: blur(4px);
+    -webkit-filter: blur(4px);
+  }
+}
diff --git a/web/src/pages/Cluster/components/index_metric.jsx b/web/src/pages/Cluster/components/index_metric.jsx
index c991c3d9..09537167 100644
--- a/web/src/pages/Cluster/components/index_metric.jsx
+++ b/web/src/pages/Cluster/components/index_metric.jsx
@@ -18,6 +18,9 @@ import { formatter, getFormatter, getNumFormatter } from "../format";
 import "./node_metric.scss";
 import { calculateBounds } from "@/components/kibana/data/common/query/timefilter";
 import moment from "moment";
+import { formatMessage } from "umi/locale";
+import MetricContainer from "./metric_container";
+import _ from "lodash";
 
 export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
   const [filter, setFilter] = React.useState({
@@ -58,16 +61,21 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
   );
 
   const metrics = React.useMemo(() => {
-    return Object.values(value?.metrics || {}).sort(
-      (a, b) => a.order - b.order
-    );
+    return _.groupBy(value?.metrics, "group");
+    // return Object.values(value?.metrics || {}).sort(
+    //   (a, b) => a.order - b.order
+    // );
   }, [value]);
 
   const chartRefs = React.useRef();
   React.useEffect(() => {
-    chartRefs.current = metrics.map(() => {
-      return React.createRef();
+    let refs = [];
+    Object.values(metrics).map((m) => {
+      m.forEach(() => {
+        refs.push(React.createRef());
+      });
     });
+    chartRefs.current = refs;
   }, [metrics]);
 
   const { value: indices } = useFetch(
@@ -99,9 +107,10 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
       });
     }
   };
+  let refIdx = 0;
 
   return (
-    <div>
+    <div id="node-metric">
       <div className="px">
         <div className="metric-control">
           <div className="selector">
@@ -117,7 +126,7 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
               <Select
                 style={{ width: 200 }}
                 onChange={indexValueChange}
-                placeholder="请选择索引"
+                placeholder="Select index"
                 value={filter.index_name}
                 showSearch={true}
               >
@@ -130,91 +139,110 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
         </div>
       </div>
       <div className="px">
-        <Skeleton active loading={loading} paragraph={{ rows: 20 }}>
+        <Skeleton active loading={!value} paragraph={{ rows: 20 }}>
           {Object.keys(metrics).map((e, i) => {
-            let axis = metrics[e].axis;
-            let lines = metrics[e].lines;
-            let disableHeaderFormat = false;
-            let headerUnit = "";
             return (
-              <div key={e} className={styles.vizChartContainer}>
-                <Chart
-                  size={[, 200]}
-                  className={styles.vizChartItem}
-                  ref={chartRefs.current[i]}
+              <div style={{ margin: "8px 0" }}>
+                <MetricContainer
+                  title={formatMessage({ id: `cluster.metrics.group.${e}` })}
+                  collapsed={false}
                 >
-                  <Settings
-                    // theme={theme}
-                    pointerUpdateDebounce={0}
-                    pointerUpdateTrigger="x"
-                    externalPointerEvents={{
-                      tooltip: { visible: true },
-                    }}
-                    onPointerUpdate={pointerUpdate}
-                    showLegend
-                    legendPosition={Position.Top}
-                    onBrushEnd={handleChartBrush}
-                    tooltip={{
-                      headerFormatter: disableHeaderFormat
-                        ? undefined
-                        : ({ value }) =>
-                            `${formatter.full_dates(value)}${
-                              headerUnit ? ` ${headerUnit}` : ""
-                            }`,
-                    }}
-                    debug={false}
-                  />
-                  <Axis
-                    id="{e}-bottom"
-                    position={Position.Bottom}
-                    showOverlappingTicks
-                    labelFormat={timeRange.timeFormatter}
-                    tickFormat={timeRange.timeFormatter}
-                  />
-                  {axis.map((item) => {
-                    return (
-                      <Axis
-                        key={e + "-" + item.id}
-                        id={e + "-" + item.id}
-                        showGridLines={item.showGridLines}
-                        groupId={item.group}
-                        title={item.title}
-                        position={item.position}
-                        ticks={item.ticks}
-                        labelFormat={getFormatter(
-                          item.formatType,
-                          item.labelFormat
-                        )}
-                        tickFormat={getFormatter(
-                          item.formatType,
-                          item.tickFormat
-                        )}
-                      />
-                    );
-                  })}
+                  <div className="metric-inner-cnt">
+                    {metrics[e].map((metric) => {
+                      let axis = metric.axis;
+                      let lines = metric.lines;
+                      let disableHeaderFormat = false;
+                      let headerUnit = "";
+                      return (
+                        <div key={metric.key} className="metric-item">
+                          <Chart
+                            size={[, 200]}
+                            className={styles.vizChartItem}
+                            ref={chartRefs.current[refIdx++]}
+                          >
+                            <Settings
+                              // theme={theme}
+                              pointerUpdateDebounce={0}
+                              pointerUpdateTrigger="x"
+                              // externalPointerEvents={{
+                              //   tooltip: { visible: true },
+                              // }}
+                              onPointerUpdate={pointerUpdate}
+                              showLegend
+                              legendPosition={Position.Top}
+                              onBrushEnd={handleChartBrush}
+                              tooltip={{
+                                headerFormatter: disableHeaderFormat
+                                  ? undefined
+                                  : ({ value }) =>
+                                      `${formatter.full_dates(value)}${
+                                        headerUnit ? ` ${headerUnit}` : ""
+                                      }`,
+                              }}
+                              debug={false}
+                            />
+                            <Axis
+                              id="{e}-bottom"
+                              position={Position.Bottom}
+                              showOverlappingTicks
+                              labelFormat={timeRange.timeFormatter}
+                              tickFormat={timeRange.timeFormatter}
+                              ticks={8}
+                            />
+                            {axis.map((item) => {
+                              return (
+                                <Axis
+                                  key={e + "-" + item.id}
+                                  id={e + "-" + item.id}
+                                  showGridLines={item.showGridLines}
+                                  groupId={item.group}
+                                  title={formatMessage({
+                                    id:
+                                      "cluster.metrics.index.axis." +
+                                      metric.key +
+                                      ".title",
+                                  })}
+                                  position={item.position}
+                                  ticks={item.ticks}
+                                  labelFormat={getFormatter(
+                                    item.formatType,
+                                    item.labelFormat
+                                  )}
+                                  tickFormat={getFormatter(
+                                    item.formatType,
+                                    item.tickFormat
+                                  )}
+                                />
+                              );
+                            })}
 
-                  {lines.map((item) => {
-                    return (
-                      <LineSeries
-                        key={item.metric.label}
-                        id={item.metric.label}
-                        groupId={item.metric.group}
-                        timeZone={timezone}
-                        xScaleType={ScaleType.Time}
-                        yScaleType={ScaleType.Linear}
-                        xAccessor={0}
-                        tickFormat={getFormatter(
-                          item.metric.formatType,
-                          item.metric.tickFormat,
-                          item.metric.units
-                        )}
-                        yAccessors={[1]}
-                        data={item.data}
-                        curve={CurveType.CURVE_MONOTONE_X}
-                      />
-                    );
-                  })}
-                </Chart>
+                            {lines.map((item) => {
+                              return (
+                                <LineSeries
+                                  key={item.metric.label}
+                                  id={item.metric.label}
+                                  groupId={item.metric.group}
+                                  timeZone={timezone}
+                                  xScaleType={ScaleType.Time}
+                                  yScaleType={ScaleType.Linear}
+                                  xAccessor={0}
+                                  tickFormat={getFormatter(
+                                    item.metric.formatType,
+                                    item.metric.tickFormat,
+                                    item.metric.units
+                                  )}
+                                  yAccessors={[1]}
+                                  data={item.data}
+                                  curve={CurveType.CURVE_MONOTONE_X}
+                                />
+                              );
+                            })}
+                          </Chart>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </MetricContainer>
               </div>
             );
           })}
diff --git a/web/src/pages/Cluster/components/metric_container.js b/web/src/pages/Cluster/components/metric_container.js
new file mode 100644
index 00000000..2001fc39
--- /dev/null
+++ b/web/src/pages/Cluster/components/metric_container.js
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import "./metric_container.scss";
+import { Icon } from "antd";
+
+export default ({ children, title, collapsed = true }) => {
+  const [isCollapsed, setIsCollapsed] = useState(collapsed);
+  return (
+    <div data-metric-container className={isCollapsed ? "collapsed" : ""}>
+      <div className="header">
+        <div
+          className="collapse-icon"
+          onClick={() => {
+            setIsCollapsed(!isCollapsed);
+          }}
+        >
+          <Icon
+            style={{ fontSize: 12 }}
+            type={isCollapsed ? "right" : "down"}
+          />
+        </div>
+        <div className="h-item title">{title}</div>
+      </div>
+
+      {!isCollapsed ? (
+        <div className="body">
+          <div className="wrapper">{children}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
diff --git a/web/src/pages/Cluster/components/metric_container.scss b/web/src/pages/Cluster/components/metric_container.scss
new file mode 100644
index 00000000..ba2d3323
--- /dev/null
+++ b/web/src/pages/Cluster/components/metric_container.scss
@@ -0,0 +1,29 @@
+div[data-metric-container] {
+  border: 1px solid #d9d9d9;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
+  &.collapsed {
+    border-bottom: none;
+  }
+  .header {
+    background-color: #fafafa;
+    display: flex;
+    border-bottom: 1px solid #d9d9d9;
+    align-items: center;
+    .h-item {
+      padding: 6px 10px;
+    }
+    .collapse-icon {
+      display: flex;
+      flex: none;
+      align-self: stretch;
+      align-items: center;
+      cursor: pointer;
+      padding-left: 10px;
+    }
+  }
+  .body {
+    padding: 6px 10px;
+    .wrapper {
+    }
+  }
+}
diff --git a/web/src/pages/Cluster/components/node_metric.jsx b/web/src/pages/Cluster/components/node_metric.jsx
index e1c0b47b..bf0cf59c 100644
--- a/web/src/pages/Cluster/components/node_metric.jsx
+++ b/web/src/pages/Cluster/components/node_metric.jsx
@@ -13,11 +13,14 @@ import {
 import useFetch from "@/lib/hooks/use_fetch";
 import { ESPrefix } from "@/services/common";
 import styles from "../Metrics.less";
-import { Spin, Radio, Select, Skeleton } from "antd";
+import { Spin, Radio, Select, Skeleton, Row, Col } from "antd";
 import { formatter, getFormatter, getNumFormatter } from "../format";
 import "./node_metric.scss";
 import { calculateBounds } from "@/components/kibana/data/common/query/timefilter";
 import moment from "moment";
+import { formatMessage } from "umi/locale";
+import MetricContainer from "./metric_container";
+import _ from "lodash";
 
 export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
   const [filter, setFilter] = React.useState({
@@ -58,23 +61,28 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
   );
 
   const metrics = React.useMemo(() => {
-    return Object.values(value?.metrics || {}).sort(
-      (a, b) => a.order - b.order
-    );
+    return _.groupBy(value?.metrics, "group");
+    // return Object.values(value?.metrics || {}).sort(
+    //   (a, b) => a.order - b.order
+    // );
   }, [value]);
 
   const chartRefs = React.useRef();
   React.useEffect(() => {
-    chartRefs.current = metrics.map(() => {
-      return React.createRef();
+    let refs = [];
+    Object.values(metrics).map((m) => {
+      m.forEach(() => {
+        refs.push(React.createRef());
+      });
     });
+    chartRefs.current = refs;
   }, [metrics]);
 
   const { value: nodes } = useFetch(`${ESPrefix}/${clusterID}/nodes`, {}, [
     clusterID,
   ]);
   const nodeNames = React.useMemo(() => {
-    return Object.keys(nodes || {}).map((k) => nodes[k].name);
+    return Object.keys(nodes || {}).map((k) => nodes[k].transport_address);
   }, [nodes]);
 
   const pointerUpdate = (event) => {
@@ -98,8 +106,9 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
     }
   };
 
+  let refIdx = 0;
   return (
-    <div>
+    <div id="node-metric">
       <div className="px">
         <div className="metric-control">
           <div className="selector">
@@ -115,7 +124,7 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
               <Select
                 style={{ width: 200 }}
                 onChange={nodeValueChange}
-                placeholder="请选择节点"
+                placeholder="Select node"
                 value={filter.node_name}
                 showSearch={true}
               >
@@ -128,91 +137,110 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
         </div>
       </div>
       <div className="px">
-        <Skeleton active loading={loading} paragraph={{ rows: 20 }}>
+        <Skeleton active loading={!value} paragraph={{ rows: 20 }}>
           {Object.keys(metrics).map((e, i) => {
-            let axis = metrics[e].axis;
-            let lines = metrics[e].lines;
-            let disableHeaderFormat = false;
-            let headerUnit = "";
             return (
-              <div key={e} className={styles.vizChartContainer}>
-                <Chart
-                  size={[, 200]}
-                  className={styles.vizChartItem}
-                  ref={chartRefs.current[i]}
+              <div style={{ margin: "8px 0" }}>
+                <MetricContainer
+                  title={formatMessage({ id: `cluster.metrics.group.${e}` })}
+                  collapsed={false}
                 >
-                  <Settings
-                    // theme={theme}
-                    pointerUpdateDebounce={0}
-                    pointerUpdateTrigger="x"
-                    externalPointerEvents={{
-                      tooltip: { visible: true },
-                    }}
-                    onPointerUpdate={pointerUpdate}
-                    showLegend
-                    legendPosition={Position.Top}
-                    onBrushEnd={handleChartBrush}
-                    tooltip={{
-                      headerFormatter: disableHeaderFormat
-                        ? undefined
-                        : ({ value }) =>
-                            `${formatter.full_dates(value)}${
-                              headerUnit ? ` ${headerUnit}` : ""
-                            }`,
-                    }}
-                    debug={false}
-                  />
-                  <Axis
-                    id="{e}-bottom"
-                    position={Position.Bottom}
-                    showOverlappingTicks
-                    labelFormat={timeRange.timeFormatter}
-                    tickFormat={timeRange.timeFormatter}
-                  />
-                  {axis.map((item) => {
-                    return (
-                      <Axis
-                        key={e + "-" + item.id}
-                        id={e + "-" + item.id}
-                        showGridLines={item.showGridLines}
-                        groupId={item.group}
-                        title={item.title}
-                        position={item.position}
-                        ticks={item.ticks}
-                        labelFormat={getFormatter(
-                          item.formatType,
-                          item.labelFormat
-                        )}
-                        tickFormat={getFormatter(
-                          item.formatType,
-                          item.tickFormat
-                        )}
-                      />
-                    );
-                  })}
+                  <div className="metric-inner-cnt">
+                    {metrics[e].map((metric) => {
+                      let axis = metric.axis;
+                      let lines = metric.lines;
+                      let disableHeaderFormat = false;
+                      let headerUnit = "";
+                      return (
+                        <div key={metrics.key} className="metric-item">
+                          <Chart
+                            size={[, 200]}
+                            className={styles.vizChartItem}
+                            ref={chartRefs.current[refIdx++]}
+                          >
+                            <Settings
+                              // theme={theme}
+                              pointerUpdateDebounce={0}
+                              pointerUpdateTrigger="x"
+                              // externalPointerEvents={{
+                              //   tooltip: { visible: true },
+                              // }}
+                              onPointerUpdate={pointerUpdate}
+                              showLegend
+                              legendPosition={Position.Top}
+                              onBrushEnd={handleChartBrush}
+                              tooltip={{
+                                headerFormatter: disableHeaderFormat
+                                  ? undefined
+                                  : ({ value }) =>
+                                      `${formatter.full_dates(value)}${
+                                        headerUnit ? ` ${headerUnit}` : ""
+                                      }`,
+                              }}
+                              debug={false}
+                            />
+                            <Axis
+                              id="{e}-bottom"
+                              position={Position.Bottom}
+                              showOverlappingTicks
+                              labelFormat={timeRange.timeFormatter}
+                              tickFormat={timeRange.timeFormatter}
+                              ticks={8}
+                            />
+                            {axis.map((item) => {
+                              return (
+                                <Axis
+                                  key={e + "-" + item.id}
+                                  id={e + "-" + item.id}
+                                  showGridLines={item.showGridLines}
+                                  groupId={item.group}
+                                  title={formatMessage({
+                                    id:
+                                      "cluster.metrics.node.axis." +
+                                      metric.key +
+                                      ".title",
+                                  })}
+                                  position={item.position}
+                                  ticks={item.ticks}
+                                  labelFormat={getFormatter(
+                                    item.formatType,
+                                    item.labelFormat
+                                  )}
+                                  tickFormat={getFormatter(
+                                    item.formatType,
+                                    item.tickFormat
+                                  )}
+                                />
+                              );
+                            })}
 
-                  {lines.map((item) => {
-                    return (
-                      <LineSeries
-                        key={item.metric.label}
-                        id={item.metric.label}
-                        groupId={item.metric.group}
-                        timeZone={timezone}
-                        xScaleType={ScaleType.Time}
-                        yScaleType={ScaleType.Linear}
-                        xAccessor={0}
-                        tickFormat={getFormatter(
-                          item.metric.formatType,
-                          item.metric.tickFormat,
-                          item.metric.units
-                        )}
-                        yAccessors={[1]}
-                        data={item.data}
-                        curve={CurveType.CURVE_MONOTONE_X}
-                      />
-                    );
-                  })}
-                </Chart>
+                            {lines.map((item) => {
+                              return (
+                                <LineSeries
+                                  key={item.metric.label}
+                                  id={item.metric.label}
+                                  groupId={item.metric.group}
+                                  timeZone={timezone}
+                                  xScaleType={ScaleType.Time}
+                                  yScaleType={ScaleType.Linear}
+                                  xAccessor={0}
+                                  tickFormat={getFormatter(
+                                    item.metric.formatType,
+                                    item.metric.tickFormat,
+                                    item.metric.units
+                                  )}
+                                  yAccessors={[1]}
+                                  data={item.data}
+                                  curve={CurveType.CURVE_MONOTONE_X}
+                                />
+                              );
+                            })}
+                          </Chart>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </MetricContainer>
               </div>
             );
           })}
diff --git a/web/src/pages/Cluster/components/node_metric.scss b/web/src/pages/Cluster/components/node_metric.scss
index 2fd2008c..27b9328e 100644
--- a/web/src/pages/Cluster/components/node_metric.scss
+++ b/web/src/pages/Cluster/components/node_metric.scss
@@ -1,5 +1,6 @@
 .metric-control {
   display: flex;
+  margin-bottom: 15px;
   .selector {
     margin-left: auto;
     display: flex;
@@ -11,3 +12,28 @@
 .px {
   padding: 0 15px;
 }
+
+#node-metric,
+#index-metric {
+  .metric-inner-cnt {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .metric-item {
+      flex: 0 0 calc(50% - 5px);
+      border: 1px solid #d9d9d9;
+      margin: 5px 0;
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  #node-metric,
+  #index-metric {
+    .metric-inner-cnt {
+      .metric-item {
+        flex: 0 0 100%;
+      }
+    }
+  }
+}
diff --git a/web/src/pages/Cluster/format.js b/web/src/pages/Cluster/format.js
index 93f81b29..47a020d9 100644
--- a/web/src/pages/Cluster/format.js
+++ b/web/src/pages/Cluster/format.js
@@ -16,7 +16,13 @@ export const formatter = {
     size = size.toFixed(1);
     return size + unitArr[index];
   },
-  dates: (day) => timeFormatter(niceTimeFormatByDay(day)),
+  dates: (day) => {
+    let formatStr = niceTimeFormatByDay(day).replace(":ss", "");
+    if (day == 7) {
+      formatStr = formatStr.replace(":mm", "");
+    }
+    return timeFormatter(formatStr);
+  },
   full_dates: (d) => DateTime.fromMillis(d).toFormat("yyyy-MM-dd HH:mm:ss"),
   utc_full_dates: (d) =>
     DateTime.fromMillis(d)
diff --git a/web/src/pages/DevTool/Console.tsx b/web/src/pages/DevTool/Console.tsx
index b5c12a11..f92c7b52 100644
--- a/web/src/pages/DevTool/Console.tsx
+++ b/web/src/pages/DevTool/Console.tsx
@@ -319,9 +319,12 @@ export const ConsoleUI = ({
 
   setClusterID(tabState.activeKey?.split(":")[0]);
   const panes = tabState.panes.filter((pane: any) => {
+    pane.closable = true;
     return typeof clusterMap[pane.cluster_id] != "undefined";
   });
-
+  if (panes.length == 1) {
+    panes[0].closable = false;
+  }
   const saveTitle = (key: string, title: string) => {
     dispatch({
       type: "saveTitle",
@@ -337,6 +340,18 @@ export const ConsoleUI = ({
     setEditorHeight(refToElement.clientHeight);
   };
 
+  useEffect(() => {
+    const winResize = () => {
+      if (isFullscreen) {
+        setEditorHeight(rootRef.current.offsetHeight);
+      }
+    };
+    window.addEventListener("resize", winResize);
+    return () => {
+      window.removeEventListener("resize", winResize);
+    };
+  }, [isFullscreen]);
+
   const disableWindowScroll = () => {
     document.body.style.overflow = "hidden";
   };
diff --git a/web/src/pages/List/TableList.less b/web/src/pages/List/TableList.less
index 1808e50b..b0c717a0 100644
--- a/web/src/pages/List/TableList.less
+++ b/web/src/pages/List/TableList.less
@@ -1,5 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
-@import '~@/utils/utils.less';
+@import "~antd/lib/style/themes/default.less";
+@import "~@/utils/utils.less";
 
 .tableList {
   .tableListOperator {
@@ -48,3 +48,30 @@
     margin-right: 8px;
   }
 }
+
+.extraImg {
+  margin-top: -60px;
+  text-align: center;
+  width: 195px;
+  img {
+    width: 100%;
+  }
+}
+
+.pageHeaderContent {
+  position: relative;
+}
+
+.contentLink {
+  margin-top: 16px;
+  a {
+    margin-right: 32px;
+    img {
+      width: 24px;
+    }
+  }
+  img {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+}
diff --git a/web/src/pages/System/Cluster/Index.js b/web/src/pages/System/Cluster/Index.js
index 8510d075..792e9761 100644
--- a/web/src/pages/System/Cluster/Index.js
+++ b/web/src/pages/System/Cluster/Index.js
@@ -1,256 +1,353 @@
-import  React from 'react';
-import {Button, Card, Col, Divider, Form, Input, Row, Table, Switch, Icon, Popconfirm, message} from "antd";
+import React from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  Input,
+  Row,
+  Table,
+  Switch,
+  Icon,
+  Popconfirm,
+  message,
+} from "antd";
 import Link from "umi/link";
-import {connect} from "dva";
-import {HealthStatusCircle} from '@/components/infini/health_status_circle';
-import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import styles from './step.less';
-import clusterBg from '@/assets/cluster_bg.png';
+import { connect } from "dva";
+import { HealthStatusCircle } from "@/components/infini/health_status_circle";
+import PageHeaderWrapper from "@/components/PageHeaderWrapper";
+import styles from "./step.less";
+import clusterBg from "@/assets/cluster_bg.png";
+import { formatMessage } from "umi/locale";
 
 const content = (
   <div className={styles.pageHeaderContent}>
     <p>
-      集群管理通过注册新集群，删除集群让您高效的管理多个 Elasticsearch 集群。
+      {formatMessage({
+        id: "cluster.manage.description",
+      })}
     </p>
   </div>
 );
 
 const extraContent = (
   <div className={styles.extraImg}>
-    <img
-      alt="集群管理"
-      src={clusterBg}
-    />
+    <img src={clusterBg} />
   </div>
 );
 
 @Form.create()
-@connect(({clusterConfig, global}) =>({
+@connect(({ clusterConfig, global }) => ({
   clusterConfig,
   clusterStatus: global.clusterStatus,
 }))
-class Index extends  React.Component {
-  columns = [{
-    title: '集群名称',
-    dataIndex: 'name',
-    key: 'name',
-  },{
-    title: '健康状态',
-    dataIndex: 'id',
-    key: 'health_status',
-    render: (val)=>{
-      const {clusterStatus} = this.props;
-      if(!clusterStatus || !clusterStatus[val]){
-        return
-      }
-      const isAvailable = clusterStatus[val].available;
-      if(!isAvailable){
-        return <Icon type="close-circle" style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}}/>
-      }
-      const status = clusterStatus[val].health?.status;
-      return <HealthStatusCircle  status={status}/>
-      
-    }
-  },{
-    title: '所属业务',
-    dataIndex: 'business',
-    key: 'business',
-    render: ()=>{
-      return 'eu-de-1'
-    }
-  },
-  {
-    title: '所属部门',
-    dataIndex: 'business_department',
-    key: 'business_department',
-    render: ()=>{
-      return '部门X'
-    }
-  }, {
-    title: '部署环境',
-    dataIndex: 'deploy_env',
-    key: 'deploy_env',
-    render: ()=>{
-      return 'PROD'
-    }
-  },{
-    title: '程序版本',
-    dataIndex: 'version',
-    key: 'elasticsearch_version',
-    // render: (data)=>{
-    //   return 
-    // }
-  },{
-    title: '节点数',
-    dataIndex: 'id',
-    key: 'number_of_nodes',
-    render: (val)=>{
-      const {clusterStatus} = this.props;
-      if(!clusterStatus || !clusterStatus[val]){
-        return
-      }
-      return clusterStatus[val].health?.number_of_nodes;
-    }
-  },{
-    title: '集群地址',
-    dataIndex: 'host',
-    key: 'host',
-  },
-  {
-      title: '监控启用状态',
-      dataIndex: 'monitored',
-      key: 'monitored',
-      render: (val) => {
-        return val? '启用': '关闭';
-      }
+class Index extends React.Component {
+  columns = [
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.name",
+      }),
+      dataIndex: "name",
+      key: "name",
     },
-  // {
-  //   title: '是否需要身份验证',
-  //   dataIndex: 'basic_auth',
-  //   key: 'username',
-  //   render: (val) => {
-  //     //console.log(val)
-  //     return (val && typeof val.username !=='undefined' && val.username !== '')? '是': '否';
-  //   }
-  // },
-  // {
-  //   title: '描述',
-  //   dataIndex: 'description',
-  //   key: 'description',
-  // },{
-  //   title: '是否启用',
-  //   dataIndex: 'enabled',
-  //   key: 'enabled',
-  //   render: (val) =>{
-  //     return val === true ? '是': '否';
-  //   }
-  // },
-  {
-    title: '操作',
-    render: (text, record) => (
-      <div>
-        <Link to='/system/cluster/edit' onClick={()=>{this.handleEditClick(record)}}>编辑</Link>
-        <span><Divider type="vertical" />
-          <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDeleteClick(record)}><a key="delete">删除</a>
-         </Popconfirm>
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.health",
+      }),
+      dataIndex: "id",
+      key: "health_status",
+      render: (val) => {
+        const { clusterStatus } = this.props;
+        if (!clusterStatus || !clusterStatus[val]) {
+          return;
+        }
+        const isAvailable = clusterStatus[val].available;
+        if (!isAvailable) {
+          return (
+            <Icon
+              type="close-circle"
+              style={{
+                width: 14,
+                height: 14,
+                color: "red",
+                borderRadius: 14,
+                boxShadow: "0px 0px 5px #555",
+              }}
+            />
+          );
+        }
+        const status = clusterStatus[val].health?.status;
+        return <HealthStatusCircle status={status} />;
+      },
+    },
+    // {
+    //   title: "所属业务",
+    //   dataIndex: "business",
+    //   key: "business",
+    //   render: () => {
+    //     return "eu-de-1";
+    //   },
+    // },
+    // {
+    //   title: "所属部门",
+    //   dataIndex: "business_department",
+    //   key: "business_department",
+    //   render: () => {
+    //     return "部门X";
+    //   },
+    // },
+    // {
+    //   title: "部署环境",
+    //   dataIndex: "deploy_env",
+    //   key: "deploy_env",
+    //   render: () => {
+    //     return "PROD";
+    //   },
+    // },
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.version",
+      }),
+      dataIndex: "version",
+      key: "elasticsearch_version",
+      // render: (data)=>{
+      //   return
+      // }
+    },
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.node_count",
+      }),
+      dataIndex: "id",
+      key: "number_of_nodes",
+      render: (val) => {
+        const { clusterStatus } = this.props;
+        if (!clusterStatus || !clusterStatus[val]) {
+          return;
+        }
+        return clusterStatus[val].health?.number_of_nodes;
+      },
+    },
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.endpoint",
+      }),
+      dataIndex: "host",
+      key: "host",
+    },
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.monitored",
+      }),
+      dataIndex: "monitored",
+      key: "monitored",
+      render: (val) => {
+        return formatMessage({
+          id: val
+            ? "cluster.manage.monitored.on"
+            : "cluster.manage.monitored.off",
+        });
+      },
+    },
+    // {
+    //   title: '是否需要身份验证',
+    //   dataIndex: 'basic_auth',
+    //   key: 'username',
+    //   render: (val) => {
+    //     //console.log(val)
+    //     return (val && typeof val.username !=='undefined' && val.username !== '')? '是': '否';
+    //   }
+    // },
+    // {
+    //   title: '描述',
+    //   dataIndex: 'description',
+    //   key: 'description',
+    // },{
+    //   title: '是否启用',
+    //   dataIndex: 'enabled',
+    //   key: 'enabled',
+    //   render: (val) =>{
+    //     return val === true ? '是': '否';
+    //   }
+    // },
+    {
+      title: formatMessage({
+        id: "cluster.manage.table.column.operation",
+      }),
+      render: (text, record) => (
+        <div>
+          <Link
+            to="/system/cluster/edit"
+            onClick={() => {
+              this.handleEditClick(record);
+            }}
+          >
+            {formatMessage({
+              id: "form.button.edit",
+            })}
+          </Link>
+          <span>
+            <Divider type="vertical" />
+            <Popconfirm
+              title="Sure to delete?"
+              onConfirm={() => this.handleDeleteClick(record)}
+            >
+              <a key="delete">
+                {" "}
+                {formatMessage({
+                  id: "form.button.delete",
+                })}
+              </a>
+            </Popconfirm>
           </span>
-      </div>
-    ),
-  }]
+        </div>
+      ),
+    },
+  ];
 
-  fetchData = (params)=>{
-    const {dispatch} = this.props;
+  fetchData = (params) => {
+    const { dispatch } = this.props;
     dispatch({
-      type: 'clusterConfig/fetchClusterList',
+      type: "clusterConfig/fetchClusterList",
       payload: params,
-    })
-  }
+    });
+  };
   componentDidMount() {
-    this.fetchData({})
+    this.fetchData({});
   }
 
-  handleSearchClick = ()=>{
-    const {form} = this.props;
+  handleSearchClick = () => {
+    const { form } = this.props;
     this.fetchData({
-      name: form.getFieldValue('name'),
-    })
-  }
+      name: form.getFieldValue("name"),
+    });
+  };
 
-  handleDeleteClick = (record)=>{
-    const {dispatch} = this.props;
+  handleDeleteClick = (record) => {
+    const { dispatch } = this.props;
     return dispatch({
-      type:'clusterConfig/deleteCluster',
+      type: "clusterConfig/deleteCluster",
       payload: {
-        id: record.id
-      }
-    }).then((result)=>{
-      if(result){
+        id: record.id,
+      },
+    }).then((result) => {
+      if (result) {
         message.success("删除成功");
       }
     });
-  }
+  };
 
-  saveData = (payload)=>{
-    const {dispatch} = this.props;
+  saveData = (payload) => {
+    const { dispatch } = this.props;
     return dispatch({
-      type:'clusterConfig/saveData',
+      type: "clusterConfig/saveData",
       payload: {
-        ...payload
-      }
+        ...payload,
+      },
     });
-  }
+  };
   handleNewClick = () => {
     this.saveData({
-      editMode: 'NEW',
-      editValue: {basic_auth: {}},
-    })
-  }
-  handleEditClick = (record)=>{
+      editMode: "NEW",
+      editValue: { basic_auth: {} },
+    });
+  };
+  handleEditClick = (record) => {
     this.saveData({
-      editMode : 'UPDATE',
+      editMode: "UPDATE",
       editValue: record,
-    })
-  }
+    });
+  };
 
   handleEnabledChange = (enabled) => {
-    const {form} = this.props;
+    const { form } = this.props;
     this.fetchData({
-      name: form.getFieldValue('name'),
+      name: form.getFieldValue("name"),
       enabled: enabled,
-    })
-  }
+    });
+  };
 
   render() {
-    const {getFieldDecorator} = this.props.form;
+    const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
       labelCol: { span: 10 },
       wrapperCol: { span: 14 },
-      style: {marginBottom: 0}
+      style: { marginBottom: 0 },
     };
-    const {data} = this.props.clusterConfig;
+    const { data } = this.props.clusterConfig;
     return (
-      <PageHeaderWrapper title="集群管理" content={content} extraContent={extraContent}>
+      <PageHeaderWrapper
+        title={formatMessage({ id: "cluster.manage.title" })}
+        content={content}
+        extraContent={extraContent}
+      >
         <Card>
-          <div style={{display:'flex', marginBottom:10, flex:"1 1 auto", justifyContent: 'space-between',alignItems:'center',}}>
-              <div>
-                <Form>
-                  <Row gutter={{md:24, sm:16}}>
-                    <Col md={16} sm={20}>
-                      <Form.Item {...formItemLayout} label="集群名称">
-                        {getFieldDecorator('name')(<Input placeholder="please input cluster name" />)}
-                      </Form.Item>
-                    </Col>
-                    <Col md={8} sm={16}>
-                      <div style={{paddingTop:4}}>
-                        <Button type="primary" icon="search" onClick={this.handleSearchClick}>
-                          搜索
-                        </Button>
-                      </div>
-                    </Col>
-                  </Row>
-                </Form>
-              </div>
-              <div>
-                {/* <span style={{marginRight:24}}><Switch
+          <div
+            style={{
+              display: "flex",
+              marginBottom: 10,
+              flex: "1 1 auto",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <div>
+              <Form>
+                <Row gutter={{ md: 24, sm: 16 }}>
+                  <Col md={16} sm={20}>
+                    <Form.Item
+                      {...formItemLayout}
+                      label={formatMessage({
+                        id: "cluster.manage.label.cluster_name",
+                      })}
+                    >
+                      {getFieldDecorator("name")(
+                        <Input placeholder="please input cluster name" />
+                      )}
+                    </Form.Item>
+                  </Col>
+                  <Col md={8} sm={16}>
+                    <div style={{ paddingTop: 4 }}>
+                      <Button
+                        type="primary"
+                        icon="search"
+                        onClick={this.handleSearchClick}
+                      >
+                        {formatMessage({ id: "form.button.search" })}
+                      </Button>
+                    </div>
+                  </Col>
+                </Row>
+              </Form>
+            </div>
+            <div>
+              {/* <span style={{marginRight:24}}><Switch
                   checkedChildren={<Icon type="check" />}
                   unCheckedChildren={<Icon type="close" />}
                   onChange={this.handleEnabledChange}
                   defaultChecked
                 />是否启用</span> */}
-              <Link to='/system/cluster/regist' onClick={this.handleNewClick}> <Button type="primary" icon="plus">注册集群</Button></Link>
-              </div>
+              <Link to="/system/cluster/regist" onClick={this.handleNewClick}>
+                {" "}
+                <Button type="primary" icon="plus">
+                  {formatMessage({
+                    id: "cluster.manage.btn.regist",
+                  })}
+                </Button>
+              </Link>
             </div>
-            <Table
-              bordered
-              columns={this.columns}
-              dataSource={data}
-              rowKey='id'
-            />
+          </div>
+          <Table
+            bordered
+            columns={this.columns}
+            dataSource={data}
+            rowKey="id"
+          />
         </Card>
       </PageHeaderWrapper>
     );
   }
-
 }
 
-export default  Index;
+export default Index;
diff --git a/web/src/pages/System/Cluster/Step.js b/web/src/pages/System/Cluster/Step.js
index 5188dba9..773da42f 100644
--- a/web/src/pages/System/Cluster/Step.js
+++ b/web/src/pages/System/Cluster/Step.js
@@ -1,83 +1,86 @@
-import { Steps, Button, message, Spin, Card } from 'antd';
-import {connect} from "dva";
-import { useState, useRef } from 'react';
-import {InitialStep, ExtraStep, ResultStep} from './steps';
-import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import styles from './step.less';
-import clusterBg from '@/assets/cluster_bg.png';
+import { Steps, Button, message, Spin, Card } from "antd";
+import { connect } from "dva";
+import { useState, useRef } from "react";
+import { InitialStep, ExtraStep, ResultStep } from "./steps";
+import PageHeaderWrapper from "@/components/PageHeaderWrapper";
+import styles from "./step.less";
+import clusterBg from "@/assets/cluster_bg.png";
+import { formatMessage } from "umi/locale";
 
 const { Step } = Steps;
 
 const steps = [
   {
-    title: '连接',
+    title: formatMessage({
+      id: "cluster.regist.step.connect.title",
+    }),
   },
   {
-    title: '确认',
+    title: formatMessage({
+      id: "cluster.regist.step.confirm.title",
+    }),
   },
   {
-    title: '完成',
+    title: formatMessage({
+      id: "cluster.regist.step.complete.title",
+    }),
   },
 ];
 
-const ClusterStep = ({
-  current,
-  changeStep,
-  dispatch,
-  history,
-}) => {
+const ClusterStep = ({ current, changeStep, dispatch, history }) => {
   const formRef = useRef();
-  const [clusterConfig, setClusterConfig] = useState({})
+  const [clusterConfig, setClusterConfig] = useState({});
   const [isLoading, setIsLoading] = useState(false);
   // const [clusterInfo, setClusterInfo] = useState({});
 
-  const handleConnect = async ()=>{
-    const result = await formRef.current.validateFields((errors, values) => {
-      if(errors){
+  const handleConnect = async () => {
+    const result = await formRef.current
+      .validateFields((errors, values) => {
+        if (errors) {
+          return false;
+        }
+        return values;
+      })
+      .catch((err) => {
         return false;
-      }
-      return values;
-      
-    }).catch((err)=>{
-      return false;
-    });
+      });
 
-    if(!result){
-      return false
+    if (!result) {
+      return false;
     }
-    setIsLoading(true)
+    setIsLoading(true);
     const res = await dispatch({
-      type: 'clusterConfig/doTryConnect',
+      type: "clusterConfig/doTryConnect",
       payload: {
-        basic_auth:{
+        basic_auth: {
           username: result.username,
           password: result.password,
         },
         host: result.host,
-        schema: result.isTLS === true ? 'https': 'http',
+        schema: result.isTLS === true ? "https" : "http",
       },
     });
-    if(res && !res.error){
+    if (res && !res.error) {
       setClusterConfig({
         ...result,
         ...res,
       });
       return true;
-    }else{
-      setIsLoading(false)
+    } else {
+      setIsLoading(false);
       return false;
     }
-  }
+  };
 
-  const handleCommit = async ()=>{
+  const handleCommit = async () => {
     const result = await formRef.current.validateFields((errors, values) => {
-      if(errors){
+      if (errors) {
         return false;
       }
       // console.log(values);
-      return values
+      return values;
     });
-    if(!result){
+    if (!result) {
       return fasle;
     }
     const newVals = {
@@ -85,71 +88,76 @@ const ClusterStep = ({
       version: clusterConfig.version,
       host: clusterConfig.host,
       basic_auth: {
-        username: clusterConfig.username || '',
-        password: clusterConfig.password || '',
+        username: clusterConfig.username || "",
+        password: clusterConfig.password || "",
       },
       description: result.description,
       enabled: true,
       monitored: result.monitored,
-      schema: clusterConfig.isTLS ? 'https': 'http'
-    }
+      schema: clusterConfig.isTLS ? "https" : "http",
+    };
     setIsLoading(true);
     const res = await dispatch({
-      type: 'clusterConfig/addCluster',
+      type: "clusterConfig/addCluster",
       payload: newVals,
     });
-    if(res && !res.error){
+    if (res && !res.error) {
       return true;
-    }else{
-      setIsLoading(false)
+    } else {
+      setIsLoading(false);
       return false;
     }
-  }
+  };
 
   const next = async () => {
-    let result
-    if(current === 0){
+    let result;
+    if (current === 0) {
       result = await handleConnect();
-    }else if(current === 1){
+    } else if (current === 1) {
       result = await handleCommit();
     }
-    if(!result){
-      return
+    if (!result) {
+      return;
     }
-    setIsLoading(false)
-    changeStep(current + 1)
+    setIsLoading(false);
+    changeStep(current + 1);
   };
 
   const prev = () => {
-    changeStep(current - 1)
+    changeStep(current - 1);
   };
 
-  const oneMoreClick = ()=>{
+  const oneMoreClick = () => {
     setClusterConfig({});
     changeStep(0);
-  }
-  
-  const goToClusterList = ()=>{
-    history.push('/system/cluster');
-  }
+  };
 
-  const renderContent = (current)=>{
-    if(current===0){
-      return <InitialStep ref={formRef} initialValue={clusterConfig} />
-    }else if(current === 1){
-      return <ExtraStep initialValue={clusterConfig} ref={formRef}/>
-    }else if(current === 2){
-      return <ResultStep clusterConfig={clusterConfig} oneMoreClick={oneMoreClick}
-      goToClusterList={goToClusterList}
-       />
+  const goToClusterList = () => {
+    history.push("/system/cluster");
+  };
+
+  const renderContent = (current) => {
+    if (current === 0) {
+      return <InitialStep ref={formRef} initialValue={clusterConfig} />;
+    } else if (current === 1) {
+      return <ExtraStep initialValue={clusterConfig} ref={formRef} />;
+    } else if (current === 2) {
+      return (
+        <ResultStep
+          clusterConfig={clusterConfig}
+          oneMoreClick={oneMoreClick}
+          goToClusterList={goToClusterList}
+        />
+      );
     }
-  }
-
+  };
 
   const content = (
     <div className={styles.pageHeaderContent}>
       <p>
-        输入集群地址和身份验证信息分步创建集群。
+        {formatMessage({
+          id: "cluster.regist.description",
+        })}
       </p>
       {/* <div className={styles.contentLink}>
         <a>
@@ -170,55 +178,63 @@ const ClusterStep = ({
 
   const extraContent = (
     <div className={styles.extraImg}>
-      <img
-        alt="集群管理"
-        src={clusterBg}
-      />
+      <img src={clusterBg} />
     </div>
   );
 
-
   return (
-    <PageHeaderWrapper title="集群注册" content={content} extraContent={extraContent}>
+    <PageHeaderWrapper
+      title={formatMessage({
+        id: "cluster.regist.title",
+      })}
+      content={content}
+      extraContent={extraContent}
+    >
       <Card>
-      <Spin spinning={isLoading}>
-        <div style={{maxWidth:720, margin:'0 auto'}}>
-          <Steps current={current} style={{marginBottom:24}}>
-            {steps.map(item => (
-              <Step key={item.title} title={item.title} />
-            ))}
-          </Steps>
-          <div className="steps-content">{renderContent(current)}</div>
-          <div className="steps-action" style={{textAlign:'center'}}>
-            {current === 1 && (
-              <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
-                上一步
-              </Button>
-            )}
-            {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => next()}>
-                下一步
-              </Button>
-            )}
-          
+        <Spin spinning={isLoading}>
+          <div style={{ maxWidth: 720, margin: "0 auto" }}>
+            <Steps current={current} style={{ marginBottom: 24 }}>
+              {steps.map((item) => (
+                <Step key={item.title} title={item.title} />
+              ))}
+            </Steps>
+            <div className="steps-content">{renderContent(current)}</div>
+            <div className="steps-action" style={{ textAlign: "center" }}>
+              {current === 1 && (
+                <Button style={{ margin: "0 8px" }} onClick={() => prev()}>
+                  {formatMessage({
+                    id: "form.button.pre",
+                  })}
+                </Button>
+              )}
+              {current < steps.length - 1 && (
+                <Button type="primary" onClick={() => next()}>
+                  {formatMessage({
+                    id: "form.button.next",
+                  })}
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
-      </Spin>
+        </Spin>
       </Card>
     </PageHeaderWrapper>
   );
 };
 
-const NewCluster = (props)=>{
-  const {dispatch, history} = props;
+const NewCluster = (props) => {
+  const { dispatch, history } = props;
   const [current, setCurrent] = useState(0);
-  return <ClusterStep current={current} changeStep={setCurrent} 
-    history={history}
-   dispatch={dispatch} />
-}
+  return (
+    <ClusterStep
+      current={current}
+      changeStep={setCurrent}
+      history={history}
+      dispatch={dispatch}
+    />
+  );
+};
 
-export default connect(({
-  clusterConfig
-})=>({
-  clusterConfig
-}))(NewCluster)
\ No newline at end of file
+export default connect(({ clusterConfig }) => ({
+  clusterConfig,
+}))(NewCluster);
diff --git a/web/src/pages/System/Cluster/steps/extra_step.js b/web/src/pages/System/Cluster/steps/extra_step.js
index 1e9095e3..8df74d11 100644
--- a/web/src/pages/System/Cluster/steps/extra_step.js
+++ b/web/src/pages/System/Cluster/steps/extra_step.js
@@ -1,12 +1,23 @@
-import {Form, Input, Switch, Icon, InputNumber, Divider, Descriptions} from 'antd';
-import {HealthStatusCircle} from '@/components/infini/health_status_circle';
+import {
+  Form,
+  Input,
+  Switch,
+  Icon,
+  InputNumber,
+  Divider,
+  Descriptions,
+} from "antd";
+import { HealthStatusCircle } from "@/components/infini/health_status_circle";
+import { formatMessage } from "umi/locale";
 
 @Form.create()
 export class ExtraStep extends React.Component {
-  state = {
-  }
-  render(){
-    const {form:{getFieldDecorator}, initialValue} = this.props;
+  state = {};
+  render() {
+    const {
+      form: { getFieldDecorator },
+      initialValue,
+    } = this.props;
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
@@ -20,43 +31,81 @@ export class ExtraStep extends React.Component {
     return (
       <>
         <Descriptions column={2} size="small" bordered>
-          <Descriptions.Item label="集群地址" >
-              {initialValue?.host}
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.endpoint",
+            })}
+          >
+            {initialValue?.host}
           </Descriptions.Item>
-          <Descriptions.Item label="TLS" >
-            {initialValue?.isTLS ? <Icon type="lock" style={{color:  '#52c41a'}}/> : null}
+          <Descriptions.Item label="TLS">
+            {initialValue?.isTLS ? (
+              <Icon type="lock" style={{ color: "#52c41a" }} />
+            ) : null}
           </Descriptions.Item>
-          <Descriptions.Item label="集群版本" >
-              {initialValue?.version}
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.version",
+            })}
+          >
+            {initialValue?.version}
           </Descriptions.Item>
-          <Descriptions.Item label="身份验证" >
-            {initialValue?.username ? <Icon type="user"/>: null}
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.regist.step.connect.label.auth",
+            })}
+          >
+            {initialValue?.username ? <Icon type="user" /> : null}
           </Descriptions.Item>
-          <Descriptions.Item label="健康状态" >
-            <HealthStatusCircle status={initialValue?.status}/>
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.health",
+            })}
+          >
+            <HealthStatusCircle status={initialValue?.status} />
           </Descriptions.Item>
-          <Descriptions.Item label="节点总数" >
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.node_count",
+            })}
+          >
             {initialValue?.number_of_nodes}
-          </Descriptions.Item>     
-          <Descriptions.Item label="数据节点数" >
+          </Descriptions.Item>
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.regist.step.connect.label.data_nodes",
+            })}
+          >
             {initialValue?.number_of_data_nodes}
           </Descriptions.Item>
-          <Descriptions.Item label="分片总数" >
+          <Descriptions.Item
+            label={formatMessage({
+              id: "cluster.regist.step.connect.label.shards",
+            })}
+          >
             {initialValue?.active_shards}
           </Descriptions.Item>
         </Descriptions>
-        <Divider/>
-        <Form {...formItemLayout} style={{marginTop:15}} form={this.props.formRef}>
-          <Form.Item label="集群名称" >
-            {getFieldDecorator('name', {
-              initialValue: initialValue?.cluster_name || '',
+        <Divider />
+        <Form
+          {...formItemLayout}
+          style={{ marginTop: 15 }}
+          form={this.props.formRef}
+        >
+          <Form.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.name",
+            })}
+          >
+            {getFieldDecorator("name", {
+              initialValue: initialValue?.cluster_name || "",
               rules: [
                 {
                   required: true,
-                  message: 'Please input cluster name!',
+                  message: "Please input cluster name!",
                 },
               ],
-            })(<Input autoComplete='off' placeholder="cluster-name" />)}
+            })(<Input autoComplete="off" placeholder="cluster-name" />)}
           </Form.Item>
           {/* <Form.Item label="Elasticsearch 版本">
             {getFieldDecorator('version', {
@@ -68,10 +117,14 @@ export class ExtraStep extends React.Component {
               initialValue: 0,
             })(<InputNumber />)}
           </Form.Item> */}
-          <Form.Item label="描述">
-            {getFieldDecorator('description', {
-              initialValue: '',
-            })(<Input.TextArea placeholder="集群应用描述" />)}
+          <Form.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.description",
+            })}
+          >
+            {getFieldDecorator("description", {
+              initialValue: "",
+            })(<Input.TextArea placeholder="cluster description" />)}
           </Form.Item>
           {/* <Form.Item label="是否启用">
             {getFieldDecorator('enabled', {
@@ -82,17 +135,23 @@ export class ExtraStep extends React.Component {
               unCheckedChildren={<Icon type="close" />}
             />)}
           </Form.Item> */}
-          <Form.Item label="启用监控">
-            {getFieldDecorator('monitored', {
-              valuePropName: 'checked',
+          <Form.Item
+            label={formatMessage({
+              id: "cluster.manage.table.column.monitored",
+            })}
+          >
+            {getFieldDecorator("monitored", {
+              valuePropName: "checked",
               initialValue: true,
-            })(<Switch
-              checkedChildren={<Icon type="check" />}
-              unCheckedChildren={<Icon type="close" />}
-            />)}
+            })(
+              <Switch
+                checkedChildren={<Icon type="check" />}
+                unCheckedChildren={<Icon type="close" />}
+              />
+            )}
           </Form.Item>
         </Form>
       </>
-      )
-    }
+    );
+  }
 }
diff --git a/web/src/pages/System/Cluster/steps/initial_step.js b/web/src/pages/System/Cluster/steps/initial_step.js
index ea818b09..95f81217 100644
--- a/web/src/pages/System/Cluster/steps/initial_step.js
+++ b/web/src/pages/System/Cluster/steps/initial_step.js
@@ -1,20 +1,24 @@
-import {Form, Input, Switch, Icon} from 'antd';
+import { Form, Input, Switch, Icon } from "antd";
+import { formatMessage } from "umi/locale";
 
 @Form.create()
 export class InitialStep extends React.Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       needAuth: props.initialValue?.username !== undefined,
-    }
+    };
   }
   handleAuthChange = (val) => {
     this.setState({
       needAuth: val,
-    })
-  }
-  render(){
-    const {form:{getFieldDecorator}, initialValue} = this.props;
+    });
+  };
+  render() {
+    const {
+      form: { getFieldDecorator },
+      initialValue,
+    } = this.props;
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
@@ -27,32 +31,41 @@ export class InitialStep extends React.Component {
     };
     return (
       <Form {...formItemLayout} form={this.props.formRef}>
-        <Form.Item label="集群地址">
-          {getFieldDecorator('host', {
-            initialValue: initialValue?.host || '',
+        <Form.Item
+          label={formatMessage({
+            id: "cluster.manage.table.column.endpoint",
+          })}
+        >
+          {getFieldDecorator("host", {
+            initialValue: initialValue?.host || "",
             rules: [
               {
-                type: 'string',
+                type: "string",
                 pattern: /^[\w\.]+\:\d+$/, //(https?:\/\/)?
-                message: '请输入域名或 IP 地址和端口号',
+                message: "请输入域名或 IP 地址和端口号",
               },
               {
                 required: true,
-                message: '请输入集群地址!',
+                message: "请输入集群地址!",
               },
             ],
           })(<Input placeholder="127.0.0.1:9200" />)}
         </Form.Item>
         <Form.Item label="TLS">
-        {getFieldDecorator('isTLS', {
+          {getFieldDecorator("isTLS", {
             initialValue: initialValue?.isTLS || false,
-        })(
-          <Switch
-            checkedChildren={<Icon type="check" />}
-            unCheckedChildren={<Icon type="close" />}
-          />)}
+          })(
+            <Switch
+              checkedChildren={<Icon type="check" />}
+              unCheckedChildren={<Icon type="close" />}
+            />
+          )}
         </Form.Item>
-        <Form.Item label="身份验证">
+        <Form.Item
+          label={formatMessage({
+            id: "cluster.regist.step.connect.label.auth",
+          })}
+        >
           <Switch
             defaultChecked={this.state.needAuth}
             onChange={this.handleAuthChange}
@@ -60,31 +73,47 @@ export class InitialStep extends React.Component {
             unCheckedChildren={<Icon type="close" />}
           />
         </Form.Item>
-        {this.state.needAuth === true ? (<div>
-        <Form.Item label="用户名">
-          {getFieldDecorator('username', {
-            initialValue: initialValue?.username || '',
-            rules: [
-              {
-                required: true,
-                message: 'Please input auth username!',
-              },
-            ],
-          })(<Input autoComplete='off'  placeholder="auth user name"  />)}
-        </Form.Item>
-        <Form.Item label="密码" hasFeedback>
-          {getFieldDecorator('password', {
-            initialValue: initialValue?.password || '',
-            rules: [
-              {
-                required: true,
-                message: 'Please input auth password!',
-              },
-            ],
-          })(<Input.Password autoComplete='off' placeholder="auth user password"/>)}
-        </Form.Item>
-        </div>):null}
+        {this.state.needAuth === true ? (
+          <div>
+            <Form.Item
+              label={formatMessage({
+                id: "cluster.regist.step.connect.label.username",
+              })}
+            >
+              {getFieldDecorator("username", {
+                initialValue: initialValue?.username || "",
+                rules: [
+                  {
+                    required: true,
+                    message: "Please input auth username!",
+                  },
+                ],
+              })(<Input autoComplete="off" placeholder="auth user name" />)}
+            </Form.Item>
+            <Form.Item
+              label={formatMessage({
+                id: "cluster.regist.step.connect.label.password",
+              })}
+              hasFeedback
+            >
+              {getFieldDecorator("password", {
+                initialValue: initialValue?.password || "",
+                rules: [
+                  {
+                    required: true,
+                    message: "Please input auth password!",
+                  },
+                ],
+              })(
+                <Input.Password
+                  autoComplete="off"
+                  placeholder="auth user password"
+                />
+              )}
+            </Form.Item>
+          </div>
+        ) : null}
       </Form>
-      )
-    }
-}
\ No newline at end of file
+    );
+  }
+}
diff --git a/web/src/pages/System/Cluster/steps/result_step.js b/web/src/pages/System/Cluster/steps/result_step.js
index 4b0f9fe7..5ecd587d 100644
--- a/web/src/pages/System/Cluster/steps/result_step.js
+++ b/web/src/pages/System/Cluster/steps/result_step.js
@@ -1,15 +1,19 @@
-import Result from '@/components/Result';
-import React, { Fragment } from 'react';
-import { Button, Row, Col } from 'antd';
-import styles from './styles.less';
+import Result from "@/components/Result";
+import React, { Fragment } from "react";
+import { Button, Row, Col } from "antd";
+import styles from "./styles.less";
+import { formatMessage } from "umi/locale";
 
-export const ResultStep = (props)=>{
-  const {clusterConfig, oneMoreClick, goToClusterList} = props;
+export const ResultStep = (props) => {
+  const { clusterConfig, oneMoreClick, goToClusterList } = props;
   const information = (
     <div className={styles.information}>
       <Row>
         <Col xs={24} sm={8} className={styles.label}>
-          集群名称：
+          {formatMessage({
+            id: "cluster.manage.table.column.name",
+          })}
+          ：
         </Col>
         <Col xs={24} sm={16}>
           {clusterConfig?.cluster_name}
@@ -17,18 +21,24 @@ export const ResultStep = (props)=>{
       </Row>
       <Row>
         <Col xs={24} sm={8} className={styles.label}>
-          集群版本：
+          {formatMessage({
+            id: "cluster.manage.table.column.version",
+          })}
+          ：
         </Col>
         <Col xs={24} sm={16}>
-        {clusterConfig?.version}
+          {clusterConfig?.version}
         </Col>
       </Row>
       <Row>
         <Col xs={24} sm={8} className={styles.label}>
-          集群地址：
+          {formatMessage({
+            id: "cluster.manage.table.column.endpoint",
+          })}
+          ：
         </Col>
         <Col xs={24} sm={16}>
-        {clusterConfig?.host}
+          {clusterConfig?.host}
         </Col>
       </Row>
       <Row>
@@ -36,7 +46,11 @@ export const ResultStep = (props)=>{
           TLS：
         </Col>
         <Col xs={24} sm={16}>
-        {clusterConfig?.isTLS ? '是': '否'}
+          {formatMessage({
+            id: clusterConfig?.isTLS
+              ? "cluster.regist.step.complete.tls.yes"
+              : "cluster.regist.step.complete.tls.no",
+          })}
         </Col>
       </Row>
     </div>
@@ -44,20 +58,28 @@ export const ResultStep = (props)=>{
   const actions = (
     <Fragment>
       <Button type="primary" onClick={oneMoreClick}>
-        再创建一个集群
+        {formatMessage({
+          id: "cluster.regist.step.complete.btn.create",
+        })}
+      </Button>
+      <Button onClick={goToClusterList}>
+        {formatMessage({
+          id: "cluster.regist.step.complete.btn.goto",
+        })}
       </Button>
-      <Button onClick={goToClusterList}>查看集群列表</Button>
     </Fragment>
   );
 
   return (
     <Result
       type="success"
-      title="创建成功"
+      title={formatMessage({
+        id: "cluster.regist.step.complete.success",
+      })}
       description=""
       extra={information}
       actions={actions}
       className={styles.result}
     />
   );
-}
\ No newline at end of file
+};
diff --git a/web/src/pages/System/Command/Index.js b/web/src/pages/System/Command/Index.js
index 7daead01..76875201 100644
--- a/web/src/pages/System/Command/Index.js
+++ b/web/src/pages/System/Command/Index.js
@@ -24,6 +24,7 @@ import {
 // import { loader } from "@monaco-editor/react";
 import Editor from "@monaco-editor/react";
 import { EuiCodeBlock } from "@elastic/eui";
+import clusterBg from "@/assets/cluster_bg.png";
 // loader.config({
 //   paths: {
 //     vs: "monaco-editor/min/vs",
@@ -34,11 +35,28 @@ import styles from "../../List/TableList.less";
 import { transformSettingsForApi } from "@/lib/elasticsearch/edit_settings";
 import PageHeaderWrapper from "@/components/PageHeaderWrapper";
 import { TagGenerator } from "@/components/kibana/console/components/CommonCommandModal";
+import { formatMessage } from "umi/locale";
+import { deleteCommand } from "@/components/kibana/console/modules/mappings/mappings";
 
 const FormItem = Form.Item;
 const { TextArea } = Input;
 const { TabPane } = Tabs;
 
+const content = (
+  <div className={styles.pageHeaderContent}>
+    <p>
+      常用命令可以帮助您保存常用的请求，并且在开发工具里面通过 LOAD
+      命令快速地加载。
+    </p>
+  </div>
+);
+
+const extraContent = (
+  <div className={styles.extraImg}>
+    <img src={clusterBg} />
+  </div>
+);
+
 /* eslint react/no-multi-comp:0 */
 @connect(({ command }) => ({
   command,
@@ -125,6 +143,7 @@ class Index extends PureComponent {
       },
     }).then((res) => {
       if (!res.error) {
+        deleteCommand(id);
         message.success("删除成功！");
       }
     });
@@ -235,7 +254,11 @@ class Index extends PureComponent {
     } = this.props;
 
     return (
-      <PageHeaderWrapper>
+      <PageHeaderWrapper
+        title="常用命令管理"
+        content={content}
+        extraContent={extraContent}
+      >
         <Card bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListForm}>
@@ -313,7 +336,7 @@ class Index extends PureComponent {
             <div>标签：</div>
             <div>
               <TagGenerator
-                value={editingCommand.tag}
+                value={editingCommand.tag || []}
                 onChange={this.onEditTagChange}
               />
               {/* <Input  style={{ width: 250 }} /> */}