diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index fee20bc54..3e28eded3 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -176,3 +176,10 @@ td .nz-icon-gear:before{
   fill: currentColor;
   overflow: hidden;
 }
+.time-no-data {
+  text-align: center;
+  width: 100%;
+  color: $--color-text-secondary;
+  font-family: NotoSans !important;
+  font-size: 12px !important;
+}
diff --git a/nezha-fronted/src/assets/css/common/button.scss b/nezha-fronted/src/assets/css/common/button.scss
index ffd25b06b..63e5bd07c 100644
--- a/nezha-fronted/src/assets/css/common/button.scss
+++ b/nezha-fronted/src/assets/css/common/button.scss
@@ -36,62 +36,25 @@
   opacity: 1;
   color: white;
 }
-.nz-btn.nz-btn-size-normal {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 8px;
-}
-.nz-btn.nz-btn-size-small {
-  font-size: 12px;
-  padding: 2px 5px;
-}
-.nz-btn.nz-btn-size-small i {
-  font-size: 12px;
-}
 .nz-btn-size-large {
   padding: 0 15px;
   height: 28px;
 }
-.nz-btn.nz-btn-style-light { /* 浅色按钮 */
-  background-image: $--background-color-empty;
-  border:0;
-  color: $--color-text-regular;
-  box-shadow: 0 0 1px 1px rgba(162,162,162,0.50);
-  letter-spacing: 0;
-}
-.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/
-  background-color: $--background-color-empty;
-  color: #444;
-  border: 1px solid #dcdfe6;
-}
-.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标时是个正方形*/
-  padding: 2px 5px;
-}
-.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/
-  padding: 4px 6px;
-}
-.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
-  //background-image: $--background-color-empty-hover;
-}
-.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) {
-  background-color: $--border-color-base;
-}
-
-.nz-btn.nz-btn-size-normal-new{
+.nz-btn.nz-btn-size-normal {
   height: 30px;
   line-height: 30px;
   text-align: center;
   min-width: 74px;
   padding: 0 10px;
 }
-.nz-btn.nz-btn-size-small-new{
+.nz-btn.nz-btn-size-small {
   height: 24px;
   line-height: 22px;
   text-align: center;
   min-width: 60px;
   padding: 0 10px;
 }
-.nz-btn.nz-btn-size-mini-new{
+.nz-btn.nz-btn-size-mini {
   height: 22px;
   line-height: 22px;
   text-align: center;
@@ -99,49 +62,69 @@
   padding: 0 5px;
 }
 .nz-btn.nz-btn-style-normal { /* 新版橙色按钮 */
-  background: $--color-primary;
-  color: white;
-  border: 1px solid $--color-primary;
+  background: $--button-primary-background-color;
+  color: $--button-primary-color;
+  border: 1px solid $--button-primary-background-color;
 }
-.nz-btn.nz-btn-style-error-new { /* 新版红色色按钮 */
-  background: #EF7C62;
-  color: white;
-  border: 1px solid #EF7C62;
+.nz-btn.nz-btn-style-error { /* 红色按钮 */
+  background: $--color-danger;
+  color: $--button-primary-color;
+  border: 1px solid $--color-danger;
 }
-.nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */
-  background: $--background-color-empty;
-  border: 1px solid $--border-color-base;
-  color: $--color-text-regular;
+.nz-btn.nz-btn-style-gray { /* 灰色按钮 */
+  background: $--button-gray-background-color;
+  border: 1px solid $--button-gray-border-color;
+  color: $--button-gray-color;
   letter-spacing: 0;
 }
-.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 新版橙色按钮hover */
-  background: $--color-primary;
-  color: white;
-  border: 1px solid $--color-primary;
+.nz-btn.nz-btn-style-light-gray { /* 浅灰色按钮 */
+  background: $--button-light-gray-background-color;
+  border: 1px solid $--button-light-gray-border-color;
+  color: $--button-light-gray-color;
+  letter-spacing: 0;
 }
-.nz-btn.nz-btn-style-error-new:hover:not(.nz-btn-disabled) { /* 新版红色按钮hover */
+.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 橙色按钮hover */
+  background: $--button-primary-hover-background-color;
+  color: $--button-primary-color;
+  border: 1px solid $--button-primary-hover-background-color;
+}
+.nz-btn.nz-btn-style-error:hover:not(.nz-btn-disabled) { /* 红色按钮hover */
   background: #F38b73;
-  color: white;
+  color: $--button-primary-color;
   border: 1px solid  #F38b73;
 }
-.nz-btn.nz-btn-style-light-new:hover:not(.nz-btn-disabled) { /* 新版浅色按钮hover */
-  border: 1px solid rgba(250,144,28,0.3);
-  color: $--color-text-regular;
+.nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 灰色按钮hover */
+  border: 1px solid $--button-gray-hover-border-color;
+  background: $--button-gray-hover-background-color;
+  color: $--button-gray-hover-color;
   letter-spacing: 0;
 }
-.nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 新版橙色按钮active' */
-  background: $--color-primary;
-  color: white;
-  border-color: $--color-primary;
+.nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 浅灰色按钮hover */
+  border: 1px solid $--button-light-gray-hover-border-color;
+  background: $--button-light-gray-hover-background-color;
+  color: $--button-light-gray-hover-color;
+  letter-spacing: 0;
 }
-.nz-btn.nz-btn-style-error-new:active:not(.nz-btn-disabled) { /* 新版红色按钮active' */
+.nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 橙色按钮active' */
+  background: $--button-primary-active-background-color;
+  color: $--button-primary-color;
+  border-color: $--button-primary-active-background-color;
+}
+.nz-btn.nz-btn-style-error:active:not(.nz-btn-disabled) { /* 红色按钮active' */
   background: #EF7C62;
-  color: white;
+  color: $--button-primary-color;
   border-color: #Eb6D51;
 }
-.nz-btn.nz-btn-style-light-new:active:not(.nz-btn-disabled) { /* 新版浅色按钮active*/
-  border: 1px solid $--color-primary;
-  color: $--color-primary;
+.nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 灰色按钮active*/
+  background: $--button-gray-active-background-color;
+  border: 1px solid $--button-gray-active-border-color;
+  color: $--button-gray-active-color;
+  letter-spacing: 0;
+}
+.nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 浅灰色按钮active*/
+  background: $--button-light-gray-active-background-color;
+  border: 1px solid $--button-light-gray-active-border-color;
+  color: $--button-light-gray-active-color;
   letter-spacing: 0;
 }
 
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 2e56b9760..415f70450 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -74,17 +74,27 @@
     height: 32px;
     width: 36px;
     cursor: pointer;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--button-gray-border-color;
     outline: none;
     border-radius: $--button-border-radius;
     background-color: $--button-gray-background-color;
     transition: background-color linear .1s;
+    color: $--button-gray-color;
 
     i {
       font-size: 14px;
       color: $--button-gray-color;
     }
   }
+  .top-tool-btn.top-tool-btn--light-gray {
+    border: 1px solid $--button-light-gray-border-color;
+    color: $--button-light-gray-color;
+    background-color: $--button-light-gray-background-color;
+
+    i {
+      color: $--button-light-gray-color;
+    }
+  }
   .top-tool-btn.top-tool-btn--text {
     padding: 0 8px;
     width: unset;
@@ -92,10 +102,36 @@
   }
   .top-tool-btn:hover:not(.nz-btn-disabled) {
     background-color: $--button-gray-hover-background-color;
+    border: 1px solid $--button-gray-hover-border-color;
+    color: $--button-gray-hover-color;
+
+    i {
+      color: $--button-gray-hover-color;
+    }
   }
   .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
+    background-color: $--button-gray-active-background-color;
+    border: 1px solid $--button-gray-active-border-color;
+    color: $--button-gray-active-color;
+
+    i {
+      color: $--button-gray-active-color;
+    }
+  }
+  .top-tool-btn.top-tool-btn--light-gray:hover:not(.nz-btn-disabled) {
     background-color: $--button-gray-hover-background-color;
-    border: 1px solid #FBCEA4 !important;
+    border: 1px solid $--button-gray-hover-border-color;
+    color: $--button-gray-hover-color;
+
+    i {
+      color: $--button-gray-hover-color;
+    }
+  }
+  .top-tool-btn.top-tool-btn--light-gray:focus:not(.nz-btn-disabled), .top-tool-btn.top-tool-btn--light-gray.is-focus {
+    background-color: $--button-gray-active-background-color;
+    border: 1px solid $--button-gray-active-border-color;
+    color: $--button-gray-active-color;
+
     i {
       color: $--button-gray-active-color;
     }
@@ -103,7 +139,6 @@
   .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
     background-color: $--button-gray-hover-background-color;
     border-color: #FFC4B9;
-
     i {
       color: #F0745A;
     }
@@ -494,7 +529,7 @@
 /*table提示样式*/
 .el-tooltip__popper.is-light {
   border: 1px solid #EBEEF5;
-  color: #606266;
+  color: $--color-text-regular;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
 }
 .col-resize-area {
diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss
index 96a1fbc5e..0f105ec59 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart.scss
@@ -285,6 +285,10 @@
       }
     }
   }
+  .single-stat-content{
+    background-color: $--background-color-empty;
+    color: $--color-text-primary;
+  }
   .single-stat-screen-container{
     height: 100%;
     .single-stat-content{
@@ -690,49 +694,6 @@
     padding: 1px 0;
   }
 }
-.top-tool-btn-group {
-  display: flex;
-  .top-tool-btn:not(:last-of-type):not(:first-of-type) {
-    border-left: none;
-    border-radius: 0;
-  }
-  .top-tool-btn:first-of-type:not(:last-of-type) {
-    border-radius: $--button-border-radius 0 0 $--button-border-radius;
-  }
-  .top-tool-btn:last-of-type:not(:first-of-type) {
-    border-radius: 0 $--button-border-radius $--button-border-radius 0;
-    border-left: none;
-  }
-}
-.top-tool-btn {
-  height: 32px;
-  width: 36px;
-  border: 1px solid $--border-color-base;
-  outline: none;
-  border-radius: $--button-border-radius;
-  background-color: $--button-gray-background-color;
-  transition: background-color linear .1s;
-
-  i {
-    font-size: 14px;
-    color: $--button-gray-color;
-  }
-}
-.top-tool-btn.top-tool-btn--text {
-  padding: 0 8px;
-  width: unset;
-  color: $--color-text-regular;
-}
-.top-tool-btn:hover:not(.nz-btn-disabled) {
-  background-color: $--button-gray-hover-background-color;
-}
-.top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
-  background-color: $--button-gray-hover-background-color;
-  border: 1px solid $--color-primary !important;
-  i {
-    color: $--button-gray-active-color;
-  }
-}
 .line-area-box{
   height: 100%;
   width: 100%;
diff --git a/nezha-fronted/src/assets/css/components/cli/webSSH.scss b/nezha-fronted/src/assets/css/components/cli/webSSH.scss
index 34709f782..22cde8ac2 100644
--- a/nezha-fronted/src/assets/css/components/cli/webSSH.scss
+++ b/nezha-fronted/src/assets/css/components/cli/webSSH.scss
@@ -235,7 +235,7 @@ div.sp-header{
   .flex .el-form-item__content {
     display: flex;
   }
-  .nz-btn-style-normal-new {
+  .nz-btn-style-normal {
     margin-left: 10px;
     margin-top: 2px;
   }
diff --git a/nezha-fronted/src/assets/css/components/common/loading.scss b/nezha-fronted/src/assets/css/components/common/loading.scss
index c746db570..5a6d8ede8 100644
--- a/nezha-fronted/src/assets/css/components/common/loading.scss
+++ b/nezha-fronted/src/assets/css/components/common/loading.scss
@@ -2,7 +2,5 @@
   .loading-font {
     color: #232f3e !important;
   }
-  .el-loading-mask {
-    background-color: $--background-color-empty;
-  }
+  background-color: $--background-color-empty;
 }
diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
index 793d222d7..529cc73db 100644
--- a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
@@ -500,7 +500,7 @@
 .color-tab div {
   text-align: center;
   flex: 1;
-  color: #909399;
+  color: $--color-text-secondary;
   transition: all .3s cubic-bezier(.645, .045, .355, 1);
   background: #E4E7ED;
   cursor: pointer;
diff --git a/nezha-fronted/src/assets/css/components/common/project/chart.scss b/nezha-fronted/src/assets/css/components/common/project/chart.scss
index 065ce2a75..ee1949afd 100644
--- a/nezha-fronted/src/assets/css/components/common/project/chart.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/chart.scss
@@ -1,597 +1,52 @@
-.clearfix:after{
-  display: block;
-  content: "";
-  clear: both;
-}
-.clearfix{
-  margin-bottom: 0;
-}
-.hidden{
-  visibility: hidden;
-}
-.visible{
-  visibility: visible;
-}
-.legend-shape{
-  display:inline-block;
-  margin-right:5px;
-  border-radius:10px;
-  width:15px;
-  height:5px;
-  vertical-align: middle;
-}
-.ft-gr{
-  color:lightgray;
-}
-.legend-container{
-  width: calc(100% - 30px);
-  max-height:80px;
-  min-height:25px;
-  font-size:12px;
-  text-align:left;
-  left: 10px;
-  bottom: 0;
-  line-height: 18px;
-  position: absolute;
-  padding-bottom:3px;
-}
-.nz-icon-warning{
-  color:  #e6a23c;
-}
-.legend-container-screen.legend-container {
-  max-height: 80px;
-  min-height:25px;
-}
-.legend-item{
-  text-overflow:ellipsis;
-  white-space:nowrap;
-  /*width:100%;*/
-  margin-right:10px;
-  overflow-x:hidden;
-  cursor:pointer;
-  display:inline-block;
-  float:left;
-  line-height: 20px;
-}
-.nz-chart-dropdown {
-  height: 180px;
-  li {
-    padding-left:15px !important;
-    padding-right:0 !important;
-    width:140px;
-    text-align: left;
-    i {
-      margin-right: 10px;
+.project {
+  .nz-chart-dropdown {
+    height: 180px;
+    li {
+      width:140px;
     }
   }
-}
-.nz-chart-dropdown-one {
-  height: 36px;
-  li {
-    padding-left:15px !important;
-    padding-right:0 !important;
-    width:140px;
-    text-align: left;
-    i {
-      margin-right: 10px;
+  .nz-chart-dropdown-one {
+    li {
+      width:140px;
     }
   }
-}
-.panel-info-corner {
-  color: #767980;
-  cursor: pointer;
-  position: absolute;
-  display: none;
-  left: 0;
-  width: 28px;
-  height: 28px;
-  z-index: 2;
-  top: 0;
-}
-.panel-info-corner--error {
-  display: block;
-  color: #fff;
-}
-.panel-info-corner .fa {
-  position: relative;
-  top: -4px;
-  left: -6px;
-  font-size: 75%;
-  z-index: 3;
-}
-.panel-info-corner .fa-model {
-  position: relative;
-  top: -3px;
-  left: 4px;
-  font-size: 75%;
-  z-index: 3;
-}
-.fa, .fa-model{
-  display: inline-block;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-}
-
-.panel-info-corner--error .panel-info-corner-inner {
-   border-left: 28px solid #e02f44;
-   border-right: none;
-   border-bottom: 28px solid rgba(0,0,0,0);
- }
-.panel-info-corner-inner {
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-.chart-error-popper[x-placement^=top] .popper__arrow::after {
-  border-top-color: #e02f44;
-  bottom:0px;
-}
-.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #e02f44;
-}
-.popper__arrow::after{
-  border:solid 3px yellow
-}
-.chart-error-popper{
-  background-color:#e02f44;
-  color:#FFF;
-  word-wrap:break-word;
-  word-break:break-word;
-  max-width:280px;
-  border: 1px solid #e02f44;
-}
-.chart-warring-popper[x-placement^=top] .popper__arrow::after {
-  border-top-color: #e6a23c;
-  bottom:0;
-}
-.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #e6a23c;
-}
-.popper__arrow::after{
-  border:solid 3px yellow
-}
-.chart-warring-popper{
-  background-color:#e6a23c;
-  color:#FFF;
-  word-wrap:break-word;
-  word-break:break-word;
-  max-width:280px;
-  border: 1px solid #e6a23c;
-}
-.moreTitle{
-  .panel-info-corner--error .panel-info-corner-inner {
-    border-left: 28px solid #e6a23c;
-    border-right: none;
-    border-bottom: 28px solid rgba(0,0,0,0);
-  }
-  .panel-info-corner-inner {
-    width: 0;
-    height: 0;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-  }
-  .nz-icon-warning:before {
-    color: #fff;
-  }
-}
-.nz-chart-resize {
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-.resize-box {
-  border: 1px solid #d8dce1;
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.resize-shadow {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  box-sizing: border-box;
-}
-.resize-shadow-active {
-  background-color: #f5f9ff;
-  border: 1px solid #b7d0f7;
-  box-shadow: 1px 1px 1px #d3e1f8;
-}
-.drag-disabled .el-dropdown-link {
-  cursor: default !important;
-}
-.resize-box {
-  .pagination {
-    padding-top: 0;
-  }
-  .success {
-    background-color: #50d050;
-    color: white;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-  .danger {
-    background-color: #d64f40;
-    color: white;
-    padding:2px 5px;
-    border-radius: 4px;
-  }
-  .chart-table, .chart-alert-info {
-    width: 100%;
-    .table-container {
-      padding: 0 6px;
-      box-sizing: border-box;
-      .nz-table {
-        margin-top: 6px;
-        box-sizing: border-box;
-      }
-    }
-  }
-  .chart-single-stat {
-    width: 100%;
-    .single-stat-container {
-      padding-left: 8px;
-      padding-right: 8px;
-      display: table;
-      text-align: center;
-      width: calc(100% - 16px);
-      .single-stat-content{
-        text-align:center;
-        vertical-align: middle;
-        display:table-cell;
-        font-size:30px;
-      }
-    }
-  }
-  .chart-container.chart-detail {
-    height: 100%;
-    position: relative;
-    background-color: white;
-    .chart-title:hover {
-      background-color:#d8dce1;
-    }
-    .chart-title:not(.drag-disabled) {
-      cursor: move;
-    }
-    .chart-title {
-      text-align: center;
-      width: 100%;
-      line-height: 30px;
-      padding: 1px 3px 0 3px;
-      box-sizing: border-box;
-      .nz-chart-top{
-        width:100%;
-      }
-      .el-dropdown-link {
+  .resize-box {
+    .chart-container.chart-detail {
+      .chart-title:not(.drag-disabled) {
         cursor: move;
       }
-      .nz-icon-arrow-down {
-        font-size: 12px;
-      }
-      .chart-title-text {
-        font-size: 14px;
-        line-height: 26px;
-        color: #52545c;
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        max-width:calc(100% - 20px);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        .chart-title-icon{
-          display: inline-block;
-          cursor: pointer;
-        }
-      }
-    }
-    .chart-info {
-      padding-top: 6px;
-      width: 100%;
-      height: calc(100% - 34px);
-    }
-    .active-icon {
-      margin: 0;
-    }
-    .chart-sub {
-      padding: 0 15px;
-      margin-bottom: 5px;
-      :last-of-type {
-        margin-bottom: 0;
-      }
-    }
-    .chart-sub-title {
-      background-color: #efefef;
-      font-size: 13px;
-      color: #505255;
-      padding-left: 2px;
-      height: 25px;
-      line-height: 25px;
-      user-select: none;
-    }
-    .chart-sub-content, .chart-third-content, .chart-forth-content {
-      width: 100%;
-      box-sizing: border-box;
-      >.content-item>.item-tip {
-        display: inline-block;
-        box-sizing: border-box;
-      }
-      >.content-item>.item-tip:not(.content-item-value-muti) {
-        padding: 0 3px 0 13px;
-      }
-      >.content-item {
-        font-size: 13px;
-        line-height: 26px;
-        border-top: 1px solid rgb(235, 238, 245);
-        display: flex;
-        position: relative;
-        flex-wrap: wrap;
-        .item-tip> {
-          .item-tip-hide {
-            display: none;
-            position: absolute;
-            bottom: 34px;
-            min-width: 50px;
-            white-space: normal;
-          }
-          .item-tip-key {
-            left: 17%;
-            transform: translateX(-50%);
-            width: 33%;
-          }
-          .item-tip-value {
-            left: 67%;
-            width: 63%;
-            transform: translateX(-50%);
-          }
-          .item-tip-hide::after {
-            content: '';
-            display: block;
-            width:0;
-            height:0;
-            overflow: hidden;
-            font-size: 0;
-            line-height: 0;
-            border: 5px;
-            border-style: dashed dashed solid dashed;
-            border-color: white transparent transparent transparent;
-            position: absolute;
-            left: 50%;
-            bottom: 0;
-            transform: translate(-50%, 10px);
-          }
-        }
-        .item-tip:hover>.item-tip-show {
-          display: block;
-        }
-        .item-tip.deep {
-          padding-left: 26px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .item-tip.deepp {
-          padding-left: 39px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .item-tip.deep:nth-of-type(2) {
-          padding-left: 13px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .item-tip.deepp:last-of-type {
-          padding-left: 13px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .tag-value:hover .item-tip-show {
-          display: block;
-        }
-        .tag-value {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-        .content-item-key {
-          color: #666;
-          width: 35%;
-          height: 26px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-        .content-item-key .no-overflow, .content-item-value .no-overflow {
-          text-overflow: unset;
-          white-space: normal;
-        }
-        .content-item-value {
-          .item-value-sub {
-            padding: 0 3px 0 13px;
-            box-sizing: border-box;
-          }
-          .item-value-sub:not(:last-of-type) {
-            border-bottom: 1px solid rgb(235, 238, 245);
-          }
-          .nz-table {
-            th .cell {
-              height: 25px;
-              line-height: 25px;
-            }
-            td .cell {
-              min-height: 26px;
-              line-height: 26px;
-            }
-            .el-table__body {
-              background-color: white;
-            }
-            .el-table__body tr:last-of-type td {
-              border: none;
-            }
-            .el-table__body tr td {
-              background-color: white;
-            }
-            .el-table__body tr:hover>td {
-              background-color: white;
-            }
-          }
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          border-left: 1px solid rgb(235, 238, 245);
-          color: #1a1a1a;
-          width: 65%;
-          height: 99%;
-        }
-      }
-    }
-    .chart-sub-content {
-      >.content-item:first-of-type {
-        border-top: none;
-      }
-      >.content-item:last-of-type {
-        border-bottom: 1px solid rgb(235, 238, 245);
-      }
-    }
-  }
-  .chart-url {
-    .url-container {
-      padding: 0 8px 8px 8px;
-      box-sizing: border-box;
-    }
-  }
-  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
-    height: 100%;
-    position: relative;
-    background-color: white;
-    .chartTitle:hover {
-      background-color:#d8dce1;
-    }
-    .chartTitle {
-      text-align: center;
-      width: 100%;
-      line-height: 30px;
-      height: 28px;
-      padding: 1px 3px 0 3px;
-      box-sizing: border-box;
-      .nz-chart-top{
-        width:100%;
-      }
-      .el-dropdown-link {
-        cursor: move;
-      }
-      .nz-icon-arrow-down {
-        font-size: 12px;
-      }
       .chart-title {
-        font-size: 16px;
-        line-height: 26px;
-        color: #52545c;
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        .chart-title-text{
+        text-align: center;
+        width: 100%;
+        line-height: 30px;
+        padding: 1px 3px 0 3px;
+        box-sizing: border-box;
+        .nz-chart-top{
+          width:100%;
+        }
+        .el-dropdown-link {
+          cursor: move;
+        }
+        .nz-icon-arrow-down {
+          font-size: 12px;
+        }
+        .chart-title-text {
+          font-size: 14px;
+          line-height: 26px;
+          color: #52545c;
+          display:flex;
+          justify-content:center;
+          align-items:center;
           max-width:calc(100% - 20px);
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          cursor: pointer;
-        }
-        .chart-title-icon{
-          display: inline-block;
-          cursor: pointer;
+          .chart-title-icon{
+            display: inline-block;
+            cursor: pointer;
+          }
         }
       }
     }
-
-    .line-area {
-      box-sizing: border-box;
-      background: #FFF;
-      min-height: 95px;
-      padding-left:8px;
-      padding-right:8px;
-    }
-    .button-panel-height{
-      height:26px;
-    }
-    .button-panel-height button{
-      height:26px;
-    }
-    .edit {
-      position: absolute;
-      right: 20px;
-      top: 17px;
-      z-index: 10;
-
-    }
-    .chart-select {
-      position: absolute;
-      left: 40px;
-      top: 25px;
-      z-index: 10;
-      font-size: 14px;
-      .chart-select-btn {
-        margin-right: 10px;
-        cursor: pointer;
-        &.active {
-          color: #5aacff;
-        }
-      }
-    }
-    /*没有数据显示*/
-    .null {
-      position: absolute;
-      top: 50%;
-      width: 100%;
-      text-align: center;
-      font-size: 24px;
-      font-weight: 600;
-    }
   }
 }
-.dialog-tool {
-  margin-right: 40px;
-}
-.line-chart-block-modal {
-  .el-dialog{
-    height: 80%;
-  }
-  .line-area {
-    box-sizing: border-box;
-    background: #FFF;
-    height: 100%;
-    span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
-      display: block !important;
-      width: 50%;
-      font-size: 14px !important;
-      overflow: hidden;
-      word-wrap: break-word !important;
-      white-space: pre-wrap !important;
-    }
-  }
-  .element-top-border {
-    padding-bottom: 5px;
-    border-top: 1px solid #dfe7f2;
-    margin-top:-25px;
-  }
-
-  .element-bottom-border {
-    border-bottom: 1px solid #dfe7f2;
-    margin-bottom:-20px;
-  }
-  .pt10{
-    padding-top:10px;
-  }
-  .el-dialog__body {
-    height: calc(100% - 80px);
-  }
-
-  .el-dialog__header{
-    padding: 20px 20px 0;
-  }
-
-}
diff --git a/nezha-fronted/src/assets/css/components/common/project/topology.scss b/nezha-fronted/src/assets/css/components/common/project/topology.scss
index 822493eec..eefab6d23 100644
--- a/nezha-fronted/src/assets/css/components/common/project/topology.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss
@@ -455,27 +455,6 @@
     color: $--color-primary;
   }
 }
-.top-tool-btn{
-  height: 32px;
-  width: 32px;
-  border: 1px solid $--border-color-base;
-  outline: none;
-  border-radius: 2px;
-  background-color: $--background-color-base;
-  -webkit-transition: background-color linear .1s;
-  transition: background-color linear .1s;
-  padding: 0;
-}
-.top-tool-btn:hover{
-  background-color: $--background-color-empty;
-}
-.top-tool-btn:focus{
-  background-color: $--background-color-empty;
-  border-color: #FBCEA4;
-}
-.top-tool-btn:focus .nz-icon{
-  color: #FBCEA4;
-}
 .right-bottom-zoom{
   position: absolute;
   bottom: 30px;
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss
index d43deb051..7451f46ee 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss
@@ -94,27 +94,6 @@
     text-align: center;
     line-height: 28px;
   }
-  .top-tool-btn{
-    height: 32px;
-    width: 32px;
-    border: 1px solid $--border-color-base;
-    outline: none;
-    border-radius: 2px;
-    background-color: $--background-color-base;
-    -webkit-transition: background-color linear .1s;
-    transition: background-color linear .1s;
-    padding: 0;
-  }
-  .top-tool-btn:hover{
-    background-color: $--background-color-empty;
-  }
-  .top-tool-btn:focus{
-    background-color: $--background-color-empty;
-    border-color: #FBCEA4;
-  }
-  .top-tool-btn:focus .nz-icon{
-    color: #FBCEA4;
-  }
   .el-form-item__content .el-input-group {
     vertical-align: unset;
   }
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss b/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss
index aa10817e8..f8e4df33e 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss
@@ -212,27 +212,6 @@
     text-align: center;
     line-height: 28px;
   }
-  .top-tool-btn{
-    height: 32px;
-    width: 32px;
-    border: 1px solid $--border-color-base;
-    outline: none;
-    border-radius: 2px;
-    background-color: $--background-color-base;
-    -webkit-transition: background-color linear .1s;
-    transition: background-color linear .1s;
-    padding: 0;
-  }
-  .top-tool-btn:hover{
-    background-color: #fff;
-  }
-  .top-tool-btn:focus{
-    background-color: #fff;
-    border-color: #FBCEA4;
-  }
-  .top-tool-btn:focus .nz-icon{
-    color: #FBCEA4;
-  }
   .el-form-item__content .el-input-group {
     vertical-align: unset;
   }
diff --git a/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
index 429052401..00b368316 100644
--- a/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
@@ -16,11 +16,7 @@
   }
 
   .top-tool-btn--text {
-    background: $--background-color-empty;
     border-radius: 2px 0 0 2px;
-    outline: none;
-    height: 32px;
-    border: 1px solid $--border-color-base;
     border-right: none;
     line-height: 30px;
     margin-right: -5px;
diff --git a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
index dea03cd98..397e3d5eb 100644
--- a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
+++ b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
@@ -49,10 +49,10 @@
     }
   }
   .nz-alert-tag_info {
-    border-color: #909399;
+    border-color: $--color-text-secondary;
     .nz-alert-tag__label {
-      border-right: 1px solid #909399;
-      background-color: #909399;
+      border-right: 1px solid $--color-text-secondary;
+      background-color: $--color-text-secondary;
       color: white;
     }
   }
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index 294a087c1..fa2d24833 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -21,6 +21,10 @@
   overflow-y: auto;
   height: calc(100% - 50px);
   flex: 1;
+  background-color: $--dashboard-background-color-empty;
+  &>div {
+    background-color: $--dashboard-background-color-empty;
+  }
 }
 
 .box-content {
@@ -66,4 +70,5 @@
   text-overflow:ellipsis;
   white-space:nowrap;
   vertical-align: bottom;
+  color: $--color-text-primary;
 }
diff --git a/nezha-fronted/src/assets/css/font/metricPreview.scss b/nezha-fronted/src/assets/css/font/metricPreview.scss
index 974881bdd..99aeca509 100644
--- a/nezha-fronted/src/assets/css/font/metricPreview.scss
+++ b/nezha-fronted/src/assets/css/font/metricPreview.scss
@@ -9,7 +9,6 @@
   }
   .table-list {
     padding-top: 20px;
-    overflow-y:auto;
     height: 100%;
   }
   .row-width{
diff --git a/nezha-fronted/src/assets/css/themes/common.scss b/nezha-fronted/src/assets/css/themes/common.scss
index 9b37b5c6e..6b82f7831 100644
--- a/nezha-fronted/src/assets/css/themes/common.scss
+++ b/nezha-fronted/src/assets/css/themes/common.scss
@@ -2,16 +2,4 @@
 /* 按钮 */
 $--button-border-radius: $--border-radius-small; // 按钮圆角
 
-$--button-primary-color: $--background-color-empty; // 普通按钮字色
-$--button-primary-background-color: $--color-primary; // 普通按钮背景色
-
-$--button-gray-color: $--color-text-regular; // 灰色按钮字色
-$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
-$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
-$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
-$--button-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
-$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色
-$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
-
 $--pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
diff --git a/nezha-fronted/src/assets/css/themes/src/image.scss b/nezha-fronted/src/assets/css/themes/src/image.scss
index 39358e6b2..41c7e47fa 100644
--- a/nezha-fronted/src/assets/css/themes/src/image.scss
+++ b/nezha-fronted/src/assets/css/themes/src/image.scss
@@ -77,7 +77,7 @@
     height: 40px;
     font-size: 24px;
     color: #fff;
-    background-color: #606266;
+    background-color: $--color-text-regular;
   }
 
   @include e(canvas) {
@@ -95,7 +95,7 @@
     width: 282px;
     height: 44px;
     padding: 0 23px;
-    background-color: #606266;
+    background-color: $--color-text-regular;
     border-color: #fff;
     border-radius: 22px;
 
@@ -119,7 +119,7 @@
     height: 44px;
     font-size: 24px;
     color: #fff;
-    background-color: #606266;
+    background-color: $--color-text-regular;
     border-color: #fff;
     left: 40px;
   }
@@ -131,7 +131,7 @@
     height: 44px;
     font-size: 24px;
     color: #fff;
-    background-color: #606266;
+    background-color: $--color-text-regular;
     border-color: #fff;
     right: 40px;
     text-indent: 2px;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index ef4bf85b8..279a7b487 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -22,7 +22,7 @@ $--menu-item-hover-fill: #191A1E;
 
 /* 3.字色 */
 // 标题字色
-$--color-text-primary: #FFFFFE;
+$--color-text-primary: #D8D8D8;
 // 普通字色
 $--color-text-regular: #BEBEBE;
 // 次要字色
@@ -85,6 +85,33 @@ $--dropdown-menu-box-shadow-color: rgba(8,3,3,0.77);
 /* 11.input */
 $--input-background-color: $--background-color-base;
 
+/* 12.按钮 */
+$--button-primary-color: #FFFFFE; // 普通按钮字色
+$--button-primary-background-color: $--color-primary; // 普通按钮背景色
+$--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%);
+$--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
+
+// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的；
+// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
+$--button-gray-color: $--color-text-secondary; // 灰色按钮字色
+$--button-gray-hover-color: mix(#FFF, $--color-primary, 10%); // 灰色按钮hover字色
+$--button-gray-active-color: mix(#000, $--color-primary, 10%); // 灰色按钮focus字色
+$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
+$--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色
+$--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色
+$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色
+$--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色
+$--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
+
+$--button-light-gray-color: $--color-text-secondary; // 灰色按钮字色
+$--button-light-gray-hover-color: $--button-gray-hover-color; // 灰色按钮hover字色
+$--button-light-gray-active-color: $--button-gray-active-color; // 灰色按钮focus字色
+$--button-light-gray-background-color: $--background-color-empty; // 灰色按钮背景色
+$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
+$--button-light-gray-active-background-color: $--background-color-empty; // 灰色按钮focus背景色
+$--button-light-gray-border-color: $--background-color-empty; // 灰色按钮边框色
+$--button-light-gray-hover-border-color: $--button-gray-hover-border-color; // 灰色按钮hover边框色
+$--button-light-gray-active-border-color: $--button-gray-active-border-color; // 灰色按钮focus边框色
 
 
 
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index eac16cbbd..e031ba514 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -85,6 +85,34 @@ $--dropdown-menu-box-shadow-color: rgba(0, 0, 0, 0.1);
 /* 11.input */
 $--input-background-color: $--background-color-empty;
 
+/* 12.按钮 */
+$--button-primary-color: #FFFFFE; // 普通按钮字色
+$--button-primary-background-color: $--color-primary; // 普通按钮背景色
+$--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%);
+$--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
+
+// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的；
+// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
+$--button-gray-color: $--color-text-regular; // 灰色按钮字色
+$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
+$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
+$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
+$--button-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
+$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色
+$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
+$--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
+
+$--button-light-gray-color: $--color-text-regular; // 灰色按钮字色
+$--button-light-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
+$--button-light-gray-active-color: $--color-primary; // 灰色按钮focus字色
+$--button-light-gray-background-color: $--background-color-base; // 灰色按钮背景色
+$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
+$--button-light-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-light-gray-border-color: $--border-color-base; // 灰色按钮边框色
+$--button-light-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
+$--button-light-gray-active-border-color: $--button-gray-border-color; // 灰色按钮focus边框色
+
 
 /*** themes/common.scss是与主题切换无关的变量 ***/
 @import './src/common/var.scss';
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 282bac6d1..1375edbe9 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1043,10 +1043,10 @@ li {
 
   .el-message-box__btns {
     .el-button:not(.el-button--primary):focus{
-      color: #606266;
+      color: $--color-text-regular;
     }
     .el-button:not(.el-button--primary):hover {
-      color: #606266;
+      color: $--color-text-regular;
       opacity: .8;
       border-color: #DCDFE6;
       background-color: $--background-color-empty;
@@ -1327,7 +1327,7 @@ li {
   background-color: #FAFAFA;
 }
 .el-dropdown-multi .el-dropdown-menu__item:focus {
-  color: #606266;
+  color: $--color-text-regular;
 }
 /*一些单选label宽度设为一样*/
 .same-label-width .el-radio-button__inner {
@@ -1345,7 +1345,7 @@ li {
   top:50%;
   width:100%;
   text-align:center;
-  color: #909399;
+  color: $--color-text-secondary;
   font-family: NotoSans !important;
   font-size: 12px !important;
 }
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 1f5e9b754..60e47f0fe 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -52,7 +52,7 @@
           </el-dropdown>
         </div>
         <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}" class="single-stat-content" ref="chartContainer">
+          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
             {{serieSingleStat}}
             <div class="chart-no-data" v-show="noData">No Data</div>
           </div>
@@ -68,7 +68,7 @@
             </div>
           </div>
           <div class="single-stat-screen-container"  >
-            <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}"  class="single-stat-content" id="chartScreenContainer" ref="chartScreenContainer">
+            <div id="chartScreenContainer"  ref="chartScreenContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
               {{serieSingleStat}}
               <div class="chart-no-data" v-show="noData">No Data</div>
             </div>
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index fdddb6af8..b61cfc5b4 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -168,7 +168,7 @@
                 :placeholder="$t('dashboard.panel.chartForm.selectAsset')"
                 id="box-input-asset-id"
                 :result-format="resultFormat"></v-selectpage>
-              <button @click.prevent="connect" type="button" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">Connect</button>
+              <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click.prevent="connect">Connect</button>
             </el-form-item>
           </el-form>
         </div>
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 35922c7de..3e1e02c0b 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -104,18 +104,18 @@
           >
              {{$t('project.topology.preview')}}
            </button>
-            <button @click="previewExit" v-if="isPreview" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+            <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light-new" @click="previewExit"
                     style="margin-right: 20px"
             >
              {{$t('project.topology.previewExit')}}
            </button>
-           <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
                    :disabled="prevent_opt.save"
                    :class="{'nz-btn-disabled':prevent_opt.save}"
                    style="margin-right: 20px">
              {{$t('project.topology.save')}}
            </button>
-           <button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" style="margin-right: 20px">
+           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
              {{$t('project.topology.exit')}}
            </button>
          </span>
@@ -294,11 +294,11 @@
       </el-row>
       <div class="upload-pic-row" style="text-align: center">
             <span>
-               <button @click="uploadPicShow=false" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin-right: 20px">
+               <button class="nz-btn nz-btn-size-normal nz-btn-style-light-new" style="margin-right: 20px" @click="uploadPicShow=false">
              {{$t('project.topology.exit')}}
            </button>
 
-              <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+              <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="imgUpload"
                       v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index b405fa782..e16870d03 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -114,7 +114,7 @@
         {{$t("project.endpoint.dialogTitle")}}
         <div class="float-right panel-calendar dialog-tool" style="display: flex">
           <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
-          <button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'project_endpoint_query_chart_toAdd'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
+          <button id="endpoint-query-full-chart-save" v-has="'project_endpoint_query_chart_toAdd'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
         </div>
       </div>
       <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index 994a471d3..13d37b79b 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -20,17 +20,17 @@
       </div>
     </div>
     <div class="custom-bottom-btns">
-      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
+      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small nz-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
         <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
       </button>
-      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="batchHandler(true)">
+      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small nz-btn-style-light-new" type="button" @click="batchHandler(true)">
         <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
       </button>
       <div>
-        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="esc">
+        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click="esc">
           <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
         </button>
-        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" @click="save">
+        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" type="button" @click="save">
           <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
         </button>
       </div>
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index 096235934..3b4e59423 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -84,7 +84,7 @@
           </div>
           <div slot="footer" class="footer">
             <div class="el-message-box__btns">
-              <button @click="rollbackImport"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" :id="id+'-xlsx-import-rollback'">
+              <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
                 <span>{{$t('overall.rollbackImport')}}</span>
               </button>
             </div>
diff --git a/nezha-fronted/src/components/common/i18n.js b/nezha-fronted/src/components/common/i18n.js
index 9fb820f06..7ed9d7088 100644
--- a/nezha-fronted/src/components/common/i18n.js
+++ b/nezha-fronted/src/components/common/i18n.js
@@ -1,13 +1,30 @@
 import Vue from 'vue'
 import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
-import messages from './language'
+import { get } from '@/http'
+// import messages from './language'
 Vue.use(VueI18n)
 // 从localStorage获取语言选择。
 const i18n = new VueI18n({
-  locale: localStorage.getItem('nz-language') || 'en', // 初始未选择默认 en 英文
-  messages
+  locale: localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+  // messages
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
 
+export function loadI18n (i18nData) {
+  if (i18nData) {
+    Object.keys(i18nData).forEach(lang => {
+      i18n.setLocaleMessage(lang, i18nData[lang])
+    })
+  } else {
+    get('/sys/i18n/lang').then(response => {
+      if (response.code === 200) {
+        i18nData = response.data
+        Object.keys(i18nData).forEach(lang => {
+          i18n.setLocaleMessage(lang, i18nData[lang])
+        })
+      }
+    })
+  }
+}
 export default i18n
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index ff64efad6..942039211 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -112,6 +112,8 @@
 import { mapActions } from 'vuex'
 import QRCode from 'qrcodejs2'
 import bus from '@/libs/bus.js'
+import { get } from '@/http'
+import { loadI18n } from '@/components/common/i18n'
 export default {
   name: 'login',
   data () {
@@ -158,6 +160,28 @@ export default {
             this.authToken = res.data.authToken
             this.lang = res.data.user.lang
             this.$i18n.locale = this.lang
+            // 获取国际化内容
+            const getI18nData = new Promise(resolve => get('/sys/i18n/lang').then(response => {
+              if (response.code === 200) {
+                const i18nData = response.data
+                resolve(i18nData)
+              } else {
+                resolve()
+              }
+            }))
+            // 获取可选语言
+            const getLangList = new Promise(resolve => get('/sys/dict/all?type=lang').then(response => {
+              if (response.code === 200) {
+                const langList = response.data.map(lang => ({ name: lang.name, value: lang.value }))
+                this.$store.commit('setLangList', langList)
+                localStorage.setItem('nz-language-list', JSON.stringify(langList))
+              }
+              resolve()
+            }))
+            Promise.all([getI18nData, getLangList]).then(response => {
+              response[0] && loadI18n(response[0])
+              this.$store.commit('i18nReady', true)
+            })
             sessionStorage.setItem('nz-token', res.data.authToken)
             if (res.data.authFlag === 1) {
               if (res.data.authBind === 0) {
diff --git a/nezha-fronted/src/components/common/multipleTime.vue b/nezha-fronted/src/components/common/multipleTime.vue
index ca2414dd4..e44a367d7 100644
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -29,7 +29,7 @@
               </el-row>
             </template>
             <template v-else>
-              <div style="text-align: center;width: 100%;color: #909399;font-family: NotoSans !important;font-size: 12px !important;">{{$t("dashboard.panel.noDate")}}</div>
+              <div class="time-no-data">{{$t("dashboard.panel.noDate")}}</div>
             </template>
             <div  class="el-dropdown-link" slot="reference">
               <i class="nz-icon nz-icon-time" style="width:20px;"></i>
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index e70b9494b..ffbfddbd2 100644
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -96,7 +96,7 @@
         </div>
         <div slot="footer" class="footer">
           <div class="el-message-box__btns">
-            <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
+            <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
               <span>{{$t('overall.rollbackImport')}}</span>
             </button>
             <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 802ddac9d..a9b0d0d2d 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -105,18 +105,18 @@
           >
              {{$t('project.topology.preview')}}
            </button>
-            <button @click="previewExit" v-if="isPreview" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+            <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light-new" @click="previewExit"
                     style="margin-right: 20px"
             >
              {{$t('project.topology.previewExit')}}
            </button>
-           <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
                    :disabled="prevent_opt.save"
                    :class="{'nz-btn-disabled':prevent_opt.save}"
                    style="margin-right: 20px">
              {{$t('project.topology.save')}}
            </button>
-           <button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" style="margin-right: 20px">
+           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
              {{$t('project.topology.exit')}}
            </button>
          </span>
@@ -319,11 +319,11 @@
       </el-row>
       <div class="upload-pic-row" style="text-align: center">
             <span>
-               <button @click="uploadPicShow=false" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin-right: 20px">
+               <button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
              {{$t('project.topology.exit')}}
            </button>
 
-              <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+              <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="imgUpload"
                       v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 9ea799b65..5da2dce2c 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -16,10 +16,10 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button type="button" v-cancel="{obj:traffic,func:esc}" id="traffic-setting-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button id="traffic-setting-esc" v-cancel="{obj:traffic,func:esc}" class="nz-btn nz-btn-size-normal nz-btn-style-light-new" type="button">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="traffic-setting-save" type="button" v-has="'dc_trafficSetting_save'">
+      <button id="traffic-setting-save" v-has="'dc_trafficSetting_save'" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
index fb994e05a..b842d04eb 100644
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -70,7 +70,7 @@
         {{$t("project.endpoint.dialogTitle")}}
         <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">
           <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
-          <button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'panel_chart_add'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
+          <button id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
         </div>
       </div>
       <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 5e44149e5..8ccb7977f 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -28,7 +28,7 @@
           </el-row>
         </template>
         <template v-else>
-          <div style="text-align: center;width: 100%;color: #909399;font-family: NotoSans !important;font-size: 12px !important;">{{$t("dashboard.panel.noDate")}}</div>
+          <div class="time-no-data">{{$t("dashboard.panel.noDate")}}</div>
         </template>
         <div  class="el-dropdown-link" slot="reference">
           <i class="nz-icon nz-icon-time" style="width:20px;"></i>
diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue
index ca693331e..05d953a13 100644
--- a/nezha-fronted/src/components/page/config/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -57,7 +57,7 @@
             </el-select>
           </el-form-item>
           <el-form-item   class="half-form-item">
-            <button :class="{'nz-btn-disabled':downloadAgentFlag}" :disabled="downloadAgentFlag" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" @click="downloadAgent">{{$t('config.agent.agent.download')}}</button>
+            <button :class="{'nz-btn-disabled':downloadAgentFlag}" :disabled="downloadAgentFlag" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="downloadAgent">{{$t('config.agent.agent.download')}}</button>
           </el-form-item>
           <div class="right-box-sub-title">{{$t('config.agent.agent.autoScript')}}</div>
           <div style="margin-bottom: 20px;width: 100%"></div>
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index a8fa5ec60..6e922ffa3 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -227,6 +227,11 @@ export default {
   mounted () {
     this.personalCenter()
   },
+  computed: {
+    langList () {
+      return this.$store.getters.getLangList
+    }
+  },
   methods: {
     // 请求后端数据
     personalCenter () {
@@ -242,10 +247,9 @@ export default {
             }
             this.tableProfile[1].prop = this.userList.email
             this.tableProfile[2].prop = this.userList.mobile
-            if (this.userList.lang == 'cn') {
-              this.tableProfile[3].prop = '简体中文'
-            } else {
-              this.tableProfile[3].prop = 'English'
+            const findLang = this.langList.find(lang => this.userList.lang === lang.value)
+            if (findLang) {
+              this.tableProfile[3].prop = findLang.name
             }
             this.tableProfile[4].prop = this.userList.source
             const name = this.userList.name.substr(0, 1)
diff --git a/nezha-fronted/src/components/page/config/setup.vue b/nezha-fronted/src/components/page/config/setup.vue
index a9501480b..e9ed049fc 100644
--- a/nezha-fronted/src/components/page/config/setup.vue
+++ b/nezha-fronted/src/components/page/config/setup.vue
@@ -166,13 +166,13 @@
           </template>
           <div class="setup-bottom-btn">
 
-            <button @click="preStep" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-if="activeStep != 0" style="background-color:#fff;color:#333;border:1px solid rgba(0,0,0,0.15);">
+            <button v-if="activeStep != 0" class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="background-color:#fff;color:#333;border:1px solid rgba(0,0,0,0.15);" @click="preStep">
               <span>{{$t('setup.back')}}</span>
             </button>
-            <button @click="nextStep"  class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" :disabled="prevent_next" v-if="activeStep != 3" :class="{'nz-btn-disabled':prevent_next}">
+            <button v-if="activeStep != 3"  :class="{'nz-btn-disabled':prevent_next}" :disabled="prevent_next" class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="nextStep">
               <span>{{$t('setup.next')}}</span>
             </button>
-            <button  @click="finishStep" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" :disabled="prevent_finish" v-if="activeStep == 3" :class="{'nz-btn-disabled':prevent_finish}">
+            <button  v-if="activeStep == 3" :class="{'nz-btn-disabled':prevent_finish}" :disabled="prevent_finish" class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="finishStep">
               <span>{{$t('setup.finish')}}</span>
             </button>
           </div>
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 4be57820e..7ea21071e 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -42,7 +42,7 @@
               <div class="el-form-item__tip">{{$t('config.system.basic.TwoFactorAuthentication')}}</div>
             </el-form-item>
             <el-form-item>
-              <button style="margin-top: 8px;" id="system-basic-save" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'"  :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
+              <button id="system-basic-save" v-has="'system_basic_save'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-top: 8px;"  type="button" @click="saveSetInfo('basic','basicForm')">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div >
@@ -154,7 +154,7 @@
               <!--                @click="resetForm('basicForm','basic')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button" id="system-basic-reset"-->
               <!--                :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}"-->
               <!--              >{{$t('overall.reset')}}</button>-->
-              <button id="system-monitor-save" @click="saveSetInfo('monitor','monitorForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'"  :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
+              <button id="system-monitor-save" v-has="'system_basic_save'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal"  type="button" @click="saveSetInfo('monitor','monitorForm')">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -202,7 +202,7 @@
             <el-form-item style="padding-top: 20px;">
 <!--              <button id="system-email-reset" @click="resetForm('emailForm','email')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>-->
               <button id="system-email-test" :class="{'nz-btn-disabled':email.email_enable == 'off','nz-btn-disabled':prevent_opt.save}" :disabled="email.email_enable == 'off' || prevent_opt.save" @click="testSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('config.system.email.testConnection')}}</button>
-              <button id="system-email-save" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_email_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
+              <button id="system-email-save" v-has="'system_email_save'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveSetInfo('email','emailForm')">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -228,7 +228,7 @@
               </el-input>
             </el-form-item>
             <el-form-item>
-              <button @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_terminal_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
+              <button v-has="'system_terminal_save'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveSetInfo('terminal','terminalForm')">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -269,8 +269,8 @@
             </el-form-item>
             <el-form-item>
 <!--              <button id='system-ldap-reset' @click="resetForm('ldapForm','ldap')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>-->
-              <button id='system-ldap-test' @click="testSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('config.system.email.testConnection')}}</button>
-              <button id='system-ldap-save' @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_ldap_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
+              <button id='system-ldap-test' :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-light" type="button" @click="testSetInfo('ldap','ldapForm')">{{$t('config.system.email.testConnection')}}</button>
+              <button id='system-ldap-save' v-has="'system_ldap_save'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveSetInfo('ldap','ldapForm')">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -310,7 +310,7 @@
               <el-input id="system-reset-pin" v-model="reset.pin" type="password"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_reset_reset'"  :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.reset')}}</el-button>
+              <el-button v-has="'system_reset_reset'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal"  type="button" @click="resetSys()">{{$t('overall.reset')}}</el-button>
             </el-form-item>
           </el-form>
         </div>
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index 468c42d0f..72c9c7d62 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -90,8 +90,8 @@
         <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
         <div slot-scope="scope" class="table-operation-items">
           <template v-if="scope.row.edit">
-            <button type="button" class="nz-btn nz-btn-size-mini-new nz-btn-style-normal-new" v-has="'system_apiKey_edit'" :disabled="prevent_opt.save" @click="save(scope.row)"  style="margin-right: 10px"><span>{{$t('overall.save')}}</span></button>
-            <button type="button" class="nz-btn nz-btn-size-mini-new nz-btn-style-light-new" @click="cancel(scope.row)" :disabled="prevent_opt.save"><span>{{$t('overall.cancel')}}</span></button>
+            <button v-has="'system_apiKey_edit'" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="save(scope.row)"><span>{{$t('overall.save')}}</span></button>
+            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-light-new" type="button" @click="cancel(scope.row)"><span>{{$t('overall.cancel')}}</span></button>
           </template>
           <template v-else>
             <button class="table-operation-item" @click="$emit('del',scope.row)" v-has="'system_apiKey_delete'"><i class="nz-icon nz-icon-delete"></i></button>
diff --git a/nezha-fronted/src/components/page/config/system/linkTable.vue b/nezha-fronted/src/components/page/config/system/linkTable.vue
index e2f3aad4e..31d5ad1a2 100644
--- a/nezha-fronted/src/components/page/config/system/linkTable.vue
+++ b/nezha-fronted/src/components/page/config/system/linkTable.vue
@@ -61,8 +61,8 @@
         <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
         <div slot-scope="scope" class="table-operation-items">
           <template v-if="scope.row.edit">
-            <button type="button" class="nz-btn nz-btn-size-mini-new nz-btn-style-normal-new" :disabled="prevent_opt.save" @click="saveOrUpdate(scope.row)"  style="margin-right: 10px"><span>{{$t('overall.save')}}</span></button>
-            <button type="button" class="nz-btn nz-btn-size-mini-new nz-btn-style-light-new" @click="cancel(scope.row)" :disabled="prevent_opt.save"><span>{{$t('overall.cancel')}}</span></button>
+            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="saveOrUpdate(scope.row)"><span>{{$t('overall.save')}}</span></button>
+            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel(scope.row)"><span>{{$t('overall.cancel')}}</span></button>
           </template>
           <template v-else>
             <button class="table-operation-item" @click="toEdit(scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
diff --git a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
index a7a8e7536..6c62b23b9 100644
--- a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
+++ b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
@@ -71,8 +71,8 @@
         <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
         <div slot-scope="scope" class="table-operation-items">
           <template v-if="scope.row.edit">
-            <button type="button" class="nz-btn nz-btn-size-mini-new nz-btn-style-normal-new"  @click="saveOrUpdate(scope.row)" :disabled="prevent_opt.save" style="margin-right: 10px"><span>{{$t('overall.save')}}</span></button>
-            <button type="button" class="nz-btn nz-btn-size-mini-new nz-btn-style-light-new" @click="cancel(scope.row)" :disabled="prevent_opt.save"><span>{{$t('overall.cancel')}}</span></button>
+            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-normal"  style="margin-right: 10px" type="button" @click="saveOrUpdate(scope.row)"><span>{{$t('overall.save')}}</span></button>
+            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-light-new" type="button" @click="cancel(scope.row)"><span>{{$t('overall.cancel')}}</span></button>
           </template>
           <template v-else>
             <button :class="{'table-operation-item--disable':isBuiltIn(scope.row)}" :disabled="isBuiltIn(scope.row)" class="table-operation-item" @click="toEdit(scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index eb1c5afdf..9ef979e0a 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -144,10 +144,10 @@
         </el-form-item>
       </el-form>
       <span slot="footer">
-        <button id="temp-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="tempBoxShowChange(false)">
+        <button id="temp-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="tempBoxShowChange(false)">
           <span>{{$t('overall.cancel')}}</span>
         </button>
-      <button :disabled="prevent_opt.save" @click="tempBoxShowChange(true)" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-save" v-has="`expressionTemplate_add`" >
+      <button id="chart-box-save" v-has="`expressionTemplate_add`" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="tempBoxShowChange(true)" >
         <span>{{$t('overall.save')}}</span>
       </button>
       </span>
@@ -652,10 +652,10 @@ export default {
   .nz-temp-box /deep/ .el-dialog__footer{
     margin-top: 0;
   }
-  .nz-temp-box .nz-btn-style-light-new{
+  .nz-temp-box .nz-btn-style-light{
     margin-right: 10px;
   }
-  .nz-temp-box .nz-btn-style-normal-new{
+  .nz-temp-box .nz-btn-style-normal{
     margin-left: 10px;
   }
 </style>
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 7a01e9be1..027daa860 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -206,7 +206,7 @@
       </div>
       <div slot="footer" class="footer">
         <div class="el-message-box__btns">
-          <button :id="'xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
+          <button :id="'xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
             <span>{{$t('overall.rollbackImport')}}</span>
           </button>
           <button :id="'xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">