diff --git a/console.yml b/console.yml
index 656240aa..9664305a 100644
--- a/console.yml
+++ b/console.yml
@@ -1,12 +1,13 @@
+#配置应用存储数据的 Elasticsearch 集群信息
 elasticsearch:
   - name: default
     enabled: true
     monitored: true
-    endpoint: http://192.168.3.188:9299
+    endpoint: http://localhost:9200
     basic_auth:
       username: elastic
       password: ZBdkVQUUdF1Sir4X4BGB
-
+#前端 UI HTTP 配置
 web:
   enabled: true
   ui:
@@ -14,9 +15,19 @@ web:
     path: .public
     vfs: true
     local: true
+    #api_endpoint: 10.0.2.5:9000 #配置 api_endpoint 可覆盖默认 api 访问地址
   network:
     binding: 0.0.0.0:9000
     skip_occupied_port: true
+#API IP 地址需要在前端可连通（虚拟机环境安装，宿主机访问）
+api:
+  enabled: true
+  network:
+    binding: 0.0.0.0:2900
+    skip_occupied_port: true
+  cors:
+    allowed_origins:
+      - "*"
 
 elastic:
     elasticsearch: default
@@ -56,4 +67,4 @@ pipeline:
           elasticsearch: "default"
           input_queue: "metrics"
           worker_size: 1
-          bulk_size_in_mb: 10
\ No newline at end of file
+          bulk_size_in_mb: 10
diff --git a/main.go b/main.go
index 12f55ad9..4e75ab2d 100644
--- a/main.go
+++ b/main.go
@@ -3,11 +3,9 @@ package main
 import (
 	"errors"
 	_ "expvar"
-	"fmt"
 	"infini.sh/framework"
 	"infini.sh/framework/core/elastic"
 	"infini.sh/framework/core/env"
-	"infini.sh/framework/core/global"
 	"infini.sh/framework/core/module"
 	"infini.sh/framework/core/orm"
 	pipe "infini.sh/framework/core/pipeline"
@@ -74,12 +72,12 @@ func main() {
 		//	global.Env().SystemConfig.APIConfig.CrossDomain.AllowedOrigins=
 		//		append(global.Env().SystemConfig.APIConfig.CrossDomain.AllowedOrigins,uiConfig.NetworkConfig.GetBindingAddr())
 		//}
-		apiConfig := global.Env().SystemConfig.APIConfig
-		if len(apiConfig.CrossDomain.AllowedOrigins) == 0 {
-			apiConfig.CrossDomain.AllowedOrigins = []string{
-				fmt.Sprintf("%s://%s", appConfig.GetSchema(), apiConfig.NetworkConfig.GetPublishAddr()),
-			}
-		}
+		//apiConfig := global.Env().SystemConfig.APIConfig
+		//if len(apiConfig.CrossDomain.AllowedOrigins) == 0 {
+		//	apiConfig.CrossDomain.AllowedOrigins = []string{
+		//		fmt.Sprintf("%s://%s", appConfig.GetSchema(), appConfig.Network.GetPublishAddr()),
+		//	}
+		//}
 
 		//start each module, with enabled provider
 		module.Start()
diff --git a/web/src/components/SelectLang/index.less b/web/src/components/SelectLang/index.less
index 819c0f8c..779d6f3d 100644
--- a/web/src/components/SelectLang/index.less
+++ b/web/src/components/SelectLang/index.less
@@ -1,4 +1,4 @@
-@import '~antd/lib/style/themes/default.less';
+@import "~antd/lib/style/themes/default.less";
 
 .menu {
   :global(.anticon) {
@@ -16,6 +16,5 @@
   line-height: 64px;
   > svg {
     position: relative;
-    top: 2px;
   }
 }
diff --git a/web/src/pages/Cluster/components/node_metric.jsx b/web/src/pages/Cluster/components/node_metric.jsx
index 51cb372d..2b34caac 100644
--- a/web/src/pages/Cluster/components/node_metric.jsx
+++ b/web/src/pages/Cluster/components/node_metric.jsx
@@ -38,19 +38,25 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
     node_name: undefined,
   });
 
-  const topChange = (e) => {
-    setFilter({
-      node_name: undefined,
-      top: e.target.value,
-    });
-  };
+  const topChange = React.useCallback(
+    (e) => {
+      setFilter({
+        node_name: undefined,
+        top: e.target.value,
+      });
+    },
+    [setFilter]
+  );
 
-  const nodeValueChange = (value) => {
-    setFilter({
-      top: undefined,
-      node_name: value,
-    });
-  };
+  const nodeValueChange = React.useCallback(
+    (value) => {
+      setFilter({
+        top: undefined,
+        node_name: value,
+      });
+    },
+    [setFilter]
+  );
   const queryParams = React.useMemo(() => {
     const bounds = calculateBounds({
       from: timeRange.min,
@@ -127,10 +133,18 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
           <div className="selector">
             <div className="top_radio">
               <Radio.Group onChange={topChange} value={filter.top}>
-                <Radio.Button value="5">Top5</Radio.Button>
-                <Radio.Button value="10">Top10</Radio.Button>
-                <Radio.Button value="15">Top15</Radio.Button>
-                <Radio.Button value="20">Top20</Radio.Button>
+                <Radio.Button key="5" value="5">
+                  Top5
+                </Radio.Button>
+                <Radio.Button key="10" value="10">
+                  Top10
+                </Radio.Button>
+                <Radio.Button key="15" value="15">
+                  Top15
+                </Radio.Button>
+                <Radio.Button key="20" value="20">
+                  Top20
+                </Radio.Button>
               </Radio.Group>
             </div>
             <div className="value-selector">
@@ -154,7 +168,7 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
           {//Object.keys(metrics)
           gorupOrder.map((e, i) => {
             return (
-              <div style={{ margin: "8px 0" }}>
+              <div key={e} style={{ margin: "8px 0" }}>
                 <MetricContainer
                   title={formatMessage({ id: `cluster.metrics.group.${e}` })}
                   collapsed={false}