diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 206e19ee5..12bdda464 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -473,11 +473,17 @@ textarea {
 .is-disabled{
   color: $--color-text-disabled !important;
 }
-.ql-tooltip {
+.ql-snow .ql-tooltip {
   background: $--background-color-empty;
+  border: 1px solid $--select-page-focus-color;
+  box-shadow: 0px 0px 5px $--scrollbar-background-color;
+  color: $--color-text-primary;
+  input[type=text]{
+    border: 1px solid $--select-page-focus-color;
+    background: $--background-color-empty;
+    outline: none;
+  }
 }
-
-
 .chart-time-series.hide{
   display: none !important;
 }
diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 3bd277531..3aac0c05b 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -3,9 +3,8 @@
 }
 .my-loading-parent--relative {
   position: relative;
-  display: inline-block;
   height: 100%;
-  width: 100%;
+  width: auto;
 }
 .panel-chart {
   border: 1px solid $--chart-box-border-color;
diff --git a/nezha-fronted/src/assets/css/components/common/intro.scss b/nezha-fronted/src/assets/css/components/common/intro.scss
new file mode 100644
index 000000000..932c2245f
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/intro.scss
@@ -0,0 +1,46 @@
+.is-intro.el-dialog{
+  max-height: unset;
+  max-width: unset;
+  height: 100%;
+  .el-dialog__header{
+    display: none;
+  }
+  .el-dialog__body{
+    height: 100%;
+    padding: 0;
+    > div{
+      height: 100%;
+    }
+  }
+}
+.dc-img{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/jj.png") no-repeat;
+  background-size:cover;
+}
+.dc-img1{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/jj1.png") no-repeat;
+  background-size:cover;
+}
+.dc-img2{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/jj3.png") no-repeat;
+  background-size:cover;
+}
+.dc-img3{
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/dc3.png") no-repeat;
+  background-size:cover;
+}
+.intro-bottom{
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
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 d8833a65d..fa9a5445b 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
@@ -37,7 +37,7 @@
 }
 
 .project-title {
-  background: #eeeeee;
+  background: $--background-color-base;
   height: 36px;
   line-height: 36px;
   border-radius: 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 b3197b5c0..757201ff9 100644
--- a/nezha-fronted/src/assets/css/components/common/project/topology.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss
@@ -60,7 +60,7 @@
     }
   }
   .edit-topologyLine{
-    background: rgba(196,196,196,0.4) !important;
+    //background: rgba(196,196,196,0.4) !important;
     border-bottom: 1px solid $--explore-border-color-bottom;
   }
   .topology-scroll{
@@ -333,10 +333,9 @@
     margin-right: 10px;
   }
   .project-title {
-    height: 55px;
+    height: 36px;
     padding-bottom: 0;
   }
-
   .drag-header {
     cursor: move;
     background: #1a1a1a;
@@ -543,3 +542,12 @@
   overflow: hidden;
   box-sizing: border-box;
 }
+.full.pr10 {
+  .el-select.el-select--small,.el-input {
+    background-color: $--background-color-empty;
+    border: 1px solid $--background-color-empty;
+  }
+}
+.el-upload-dragger{
+  background-color: $--background-color-empty;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 4308be3b6..b68c315c0 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -38,12 +38,12 @@
     }
     .metrics-input-box{
       .input-box .el-textarea .el-textarea__inner {
-        width: calc(100% + 42px);
+        width: 100%;
       }
       .metric-selector-input-box{
         line-height: 32px;
         .el-input__count{
-          right: -38px !important;
+          right: 18px !important;
         }
       }
       .el-col-24{
@@ -330,4 +330,4 @@
   .nz-icon-mimabukejian{
     font-size: 18px;
   }
-}
\ No newline at end of file
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
index 86d720ff9..6f8bf674e 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -1,96 +1,131 @@
 .right-box-panel{
+  .item-report{
+    .form__sub-title{
+      margin-bottom: 5px;
+    }
+  }
   .item-receivers{
     .el-select.el-select--small{
       width: 100%;
     }
     .item-receivers-text{
+      font-size: 12px;
       color: $--color-text-secondary;
+      padding-left: 5px;
     }
   }
-    .el-input--suffix.el-date-editor--datetime .el-input__inner{
-      padding-left: 15px;
-    }
-    .form-items--half-width-group{
-      .item-receivers{
+  .el-input--suffix.el-date-editor--datetime .el-input__inner{
+    padding-left: 15px;
+  }
+  .form-items--half-width-group{
+    .item-receivers{
+      width: 100%;
+      .el-select.el-select--small{
         width: 100%;
-        .el-select.el-select--small{
-          width: 100%;
+      }
+    }
+    .form-item--half-width{
+      .el-date-editor.el-date-editor--datetime{
+        width: 100%;
+        .el-input__inner{
+          height: 32px;
         }
       }
-      .form-item--half-width{
-        .el-date-editor.el-date-editor--datetime{
-          width: 100%;
-          .el-input__inner{
-            height: 32px;
-          }
-        }
-      }
-      .check-month_box{
-        .el-checkbox-group{
+    }
+    .check-month_box{
+      .el-checkbox-group{
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        flex-wrap: wrap;
+        .el-checkbox-button{
           display: flex;
-          justify-content: start;
+          justify-content: center;
           align-items: center;
-          flex-wrap: wrap;
-          .el-checkbox-button{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: calc(100% / 7);
-            margin-right: -2px;
-            margin-bottom: -1px;
-            border: 1px solid $--border-color-light;
-            .el-checkbox-button__inner{
-              border: 0px;
-              border-left: 0px !important;
-              border-bottom: 0px !important;
-              display: block;
-              width: 100%;
-              height: 100%;
-              background-color: $--background-color-empty;
-              border-radius: 0;
-            }
+          width: calc(100% / 7);
+          margin-right: -2px;
+          margin-bottom: -1px;
+          border: 1px solid $--border-color-light;
+          .el-checkbox-button__inner{
+            border: 0px;
+            border-left: 0px !important;
+            border-bottom: 0px !important;
+            display: block;
+            width: 100%;
+            height: 100%;
+            background-color: $--background-color-empty;
+            border-radius: 0;
           }
         }
+      }
+      .el-checkbox-button.is-checked{
+        border: 1px solid #fbb569 !important;
+      }
         
-    .el-checkbox-button.is-checked .el-checkbox-button__inner {
-      color: #fff;
-      border-radius: 0;
-      background-color: $--color-primary !important;
+      .el-checkbox-button.is-checked .el-checkbox-button__inner {
+        color: #fff;
+        border-radius: 0;
+        background-color: $--color-primary !important;
+      }
     }
-    }
-      .range-time{
-        width: 100%;
-        .el-form-item__content{
-          height: 41px;
-          .el-radio-group{
-            height: 100%;
-            border-left: 1px solid $--border-color-light;
-            .el-radio-button__inner{
-              height: 100%;
-              line-height: 1.5;
-              font-size: 14px;
-              color: $--color-text-primary;
-            }
-          }
-          .el-checkbox-group{
-            height: 100%;
-            .el-checkbox-button{
-              margin-right: -2px;
-              .el-checkbox-button__inner{
-                background-color: $--background-color-empty;
-                border:1px solid $--border-color-light;
-              }
-            }
-          }
-        }
+    .range-time{
+      width: 100%;
+      .el-form-item__content{
+        height: 41px;
         .el-radio-group{
-          display: flex;
-          border-left: 0;
+          height: 100%;
           .el-radio-button{
-            flex: 1;
+            border: 1px solid $--border-color-light;
+            margin-right: -1px;
+          }
+          .el-radio-button.is-active{
+            border: 1px solid #fbb569 !important;
+            border-radius: 0;
+          }
+          .el-radio-button__inner{
+            border: 0;
+            height: 100%;
+            line-height: 1.5;
+            font-size: 14px;
+            color: $--color-text-primary;
           }
         }
+        .el-checkbox-group{
+          height: 100%;
+          .el-checkbox-button{
+            margin-right: -2px;
+            width: calc(100% / 6.9) !important;
+            .el-checkbox-button__inner{
+              background-color: $--background-color-empty;
+              border:1px solid $--border-color-light;
+            }
+          }
+        }
+      }
+      .el-radio-group{
+        display: flex;
+        border-left: 0;
+        .el-radio-button{
+          flex: 1;
+        }
+      }
 
+      .el-checkbox-button.is-checked .el-checkbox-button__inner {
+        color: #fff;
+        border-radius: 0;
+        background-color: $--color-primary !important;
+        border: 1px solid $--color-primary !important;
+        // margin-right: -1px;
+      }
+    }
+    .form-tabs{
+      width: 100%;
+      margin-bottom: 0 !important;
+      .el-tabs__nav{
+        display: flex;
+        .el-tabs__item{
+          flex: 1;
+        }
         .el-checkbox-button.is-checked .el-checkbox-button__inner {
           color: #fff;
           border-radius: 0;
@@ -99,31 +134,16 @@
           // margin-right: -1px;
         }
       }
-      .form-tabs{
-        width: 100%;
-        .el-tabs__nav{
-          display: flex;
-          .el-tabs__item{
-            flex: 1;
-          }
-          .el-checkbox-button.is-checked .el-checkbox-button__inner {
-            color: #fff;
-            border-radius: 0;
-            background-color: $--color-primary !important;
-            border: 1px solid $--color-primary !important;
-            // margin-right: -1px;
-          }
-        }
+    }
+    .form-day-week{
+      width: 100%;
+      .el-input-group__append{
+        border: 1px solid $--border-color-light;
+        background-color: $--right-box-sub-title-background-color;
       }
-      .form-day-week{
-        width: 100%;
-        .el-input-group__append{
-          border: 1px solid $--border-color-light;
-          background-color: $--right-box-sub-title-background-color;
-        }
-      }
-   }
-   .variable-box{
+    }
+  }
+  .variable-box{
     margin-bottom: 16px;
     .variable-title{
       border: 1px solid $--border-color-light;
@@ -178,12 +198,10 @@
       cursor: pointer;
       margin-top: 16px;
     }
-   }
-   
- }
-      
+  }
+}
+    
 .el-form-item__content{
-  text-align: unset !important;
   .el-checkbox-button{
     width: calc(100% / 7) !important;
     .el-checkbox-button__inner{
@@ -212,6 +230,4 @@
 }
 .allOptionTip{
   max-width:208px;
-}
-
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 17add18bb..63f21c1d0 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -67,6 +67,7 @@
 @import './common/elementSet.scss';
 @import './common/loading.scss';
 @import './common/login.scss';
+@import './common/intro.scss';
 @import './common/multipleTime.scss';
 @import './common/nezhaColor.scss';
 @import './common/nzTransfer.scss';
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
index 053ac4e9d..b9b3e7815 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
@@ -58,6 +58,7 @@
   }
   .el-cascader-menu {
     width: 200px;
+    height: 100%;
   }
   .metric-btn:hover, .metric-btn:focus {
     background-image:  linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);
diff --git a/nezha-fronted/src/assets/css/themes/src/table.scss b/nezha-fronted/src/assets/css/themes/src/table.scss
index 319c5d135..d64dac5f0 100644
--- a/nezha-fronted/src/assets/css/themes/src/table.scss
+++ b/nezha-fronted/src/assets/css/themes/src/table.scss
@@ -259,6 +259,7 @@
       right: 0;
       width: 1px;
       height: 100%;
+      background: $--border-color-light;
     }
   }
 
diff --git a/nezha-fronted/src/assets/img/dc.png b/nezha-fronted/src/assets/img/dc.png
new file mode 100644
index 000000000..53bd7fc95
Binary files /dev/null and b/nezha-fronted/src/assets/img/dc.png differ
diff --git a/nezha-fronted/src/assets/img/dc1.png b/nezha-fronted/src/assets/img/dc1.png
new file mode 100644
index 000000000..722e69b16
Binary files /dev/null and b/nezha-fronted/src/assets/img/dc1.png differ
diff --git a/nezha-fronted/src/assets/img/dc2.png b/nezha-fronted/src/assets/img/dc2.png
new file mode 100644
index 000000000..77553a22d
Binary files /dev/null and b/nezha-fronted/src/assets/img/dc2.png differ
diff --git a/nezha-fronted/src/assets/img/dc3.png b/nezha-fronted/src/assets/img/dc3.png
new file mode 100644
index 000000000..e8859fa13
Binary files /dev/null and b/nezha-fronted/src/assets/img/dc3.png differ
diff --git a/nezha-fronted/src/assets/img/jj.png b/nezha-fronted/src/assets/img/jj.png
new file mode 100644
index 000000000..99cea293c
Binary files /dev/null and b/nezha-fronted/src/assets/img/jj.png differ
diff --git a/nezha-fronted/src/assets/img/jj1.png b/nezha-fronted/src/assets/img/jj1.png
new file mode 100644
index 000000000..f57d4e7a1
Binary files /dev/null and b/nezha-fronted/src/assets/img/jj1.png differ
diff --git a/nezha-fronted/src/assets/img/jj3.png b/nezha-fronted/src/assets/img/jj3.png
new file mode 100644
index 000000000..55bf6fb1c
Binary files /dev/null and b/nezha-fronted/src/assets/img/jj3.png differ
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index f7e408179..480b2fa31 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -61,7 +61,7 @@
                <div slot="prefix">
                 <div class="icon-item" style="width: 100%;padding: 0">
                   <svg>
-                    <g fill="none" stroke="black" stroke-width="1">
+                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
                       <path
                         :d="penLineType.find((item,i)=>item.id==lineName).d"
                       >
@@ -74,7 +74,7 @@
                 <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
                   <div class="icon-item" style="position: relative;width: 100%;padding: 0">
                     <svg>
-                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
                     <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                     </g>
                     </svg>
@@ -354,7 +354,9 @@ const canvasOptions = {
 export default {
   name: 'diagram',
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
+      theme,
       title: this.$t('overall.uploadCustomPicture'),
       objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
       chartDataInfo: {},
@@ -517,10 +519,10 @@ export default {
       chartData: {},
       chartGetData: [],
       penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
       ],
       lineName: 'curve',
       cachesIndex: 0,
@@ -831,8 +833,10 @@ export default {
           this.projectAlertShow = true
           this.saveData = { ...data }
           this.topologyInfo.name = ''
+          data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
           resolve(data)
         } else {
+          data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
           if (data.data) {
             this.topologyInfo = {
               fontSize: data.data.fontSize,
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index 166c68258..4c9328ccc 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -638,7 +638,7 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{ $t("overall.login.name") }}</div>
+        <div class="alert-label-title">{{ $t("profile.username") }}</div>
         <div class="alert-label-value">
           {{ alertLabelData && alertLabelData.username ? alertLabelData.username : "--" }}
         </div>
@@ -656,13 +656,13 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{ $t("overall.soure") }}</div>
+        <div class="alert-label-title">{{ $t("profile.source") }}</div>
         <div class="alert-label-value">
           {{ alertLabelData && alertLabelData.source ? alertLabelData.source : "--" }}
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{ $t("config.operationlog.state") }}</div>
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
         <div class="alert-label-value">
           <div
             v-if="alertLabelData"
@@ -776,30 +776,14 @@ export default {
           topOffSetView = topOffSet
         }
         if (position.top > clientHeight / 2) {
-          if (this.type === 'user') {
-            labelPosition = {
-              // user info 距离
-              left: `${position.left + position.width / 3 + leftOffSet}px`,
-              top: `${position.top - this.heightList - topOffSetView}px`
-            }
-          } else {
-            labelPosition = {
-              left: `${position.left + position.width + leftOffSet}px`,
-              top: `${position.top - this.heightList - topOffSetView}px`
-            }
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - this.heightList - topOffSetView}px`
           }
         } else {
-          if (this.type === 'user') {
-            // user info 距离
-            labelPosition = {
-              left: `${position.left + position.width / 3 + leftOffSet}px`,
-              top: `${position.top + topOffSet}px`
-            }
-          } else {
-            labelPosition = {
-              left: `${position.left + position.width + leftOffSet}px`,
-              top: `${position.top + topOffSet}px`
-            }
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top + topOffSet}px`
           }
         }
         if (position.left > clientWidth / 2) {
diff --git a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
index 01742bf03..f0941a92c 100644
--- a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
@@ -137,7 +137,7 @@ export default {
           width: 120,
           sortable: 'custom'
         }, {
-          label: this.$t('alert.config.receiver'),
+          label: this.$t('alert.receiver'),
           prop: 'receivers',
           show: false,
           minWidth: 100
diff --git a/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue b/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
index 122dce97b..daf701152 100644
--- a/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
@@ -109,7 +109,7 @@ export default {
           show: true,
           width: 150
         }, {
-          label: this.$t('overall.enable'),
+          label: this.$t('overall.enabled'),
           prop: 'status',
           show: true,
           width: 100
diff --git a/nezha-fronted/src/components/common/i18n.js b/nezha-fronted/src/components/common/i18n.js
index 1165394f8..a4c930eca 100644
--- a/nezha-fronted/src/components/common/i18n.js
+++ b/nezha-fronted/src/components/common/i18n.js
@@ -3,6 +3,8 @@ import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import { get } from '@/http'
 import messages from './language'
+import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
 Vue.use(VueI18n)
 // 从localStorage获取语言选择。
 const i18n = new VueI18n({
@@ -14,7 +16,12 @@ 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])
+      if (lang === 'zh') {
+        Object.assign(i18nData[lang], { ...zhLocale })
+      } else if (lang === 'en') {
+        Object.assign(i18nData[lang], { ...enLocale })
+      }
+      i18n.setLocaleMessage(lang, { ...i18nData[lang] })
     })
   }
 }
diff --git a/nezha-fronted/src/components/common/intro.vue b/nezha-fronted/src/components/common/intro.vue
new file mode 100644
index 000000000..86a7d25ce
--- /dev/null
+++ b/nezha-fronted/src/components/common/intro.vue
@@ -0,0 +1,78 @@
+<template>
+  <el-dialog
+    width="100%"
+    height="100%"
+    title="内层 Dialog"
+    :custom-class="'is-intro'"
+    :show-close="false"
+    :visible.sync="showIntro"
+    append-to-body>
+    <div>
+      <div v-if="introStep==='main'">
+        <el-button @click="introStepChange('dc')">设置dc</el-button>
+        <el-button>设置asset</el-button>
+        <el-button>设置project</el-button>
+        <el-button>设置dc</el-button>
+      </div>
+      <div v-if="introStep === 'dc'" style="height: 100%">
+        <div v-if="step === 0" class="dc-img"></div>
+        <div v-else-if="step === 1" class="dc-img1"></div>
+        <div v-else-if="step === 2" class="dc-img2"></div>
+        <div v-else-if="step === 3" class="dc-img3"></div>
+        <div v-else>
+          <el-button @click="introStepChange('asset')">继续设置asset</el-button>
+        </div>
+      </div>
+      <div v-if="introStep === 'asset'" style="height: 100%">
+        <div v-if="step === 0" >设置asset</div>
+        <div v-if="step === 1" ></div>
+        <div v-if="step === 2" ></div>
+        <div v-if="step === 3" ></div>
+        <div v-if="step === 4" ></div>
+      </div>
+      <div class="intro-bottom">
+        <el-button @click="prev()">上一步</el-button>
+        <el-button @click="next()">下一步</el-button>
+        <el-button @click="exit()">退出</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'intro',
+  data: function () {
+    return {
+      showIntro: false,
+      introStep: 'main',
+      step: 0,
+      timer: ''
+    }
+  },
+  methods: {
+    introStepChange (type) {
+      this.step = 0
+      this.introStep = type
+    },
+    prev () {
+      this.step--
+    },
+    next () {
+      this.step++
+      if (this.introStep == 'dc' && this.step === 4) {
+        this.timer = setTimeout(() => {
+          this.introStepChange('main')
+        })
+      }
+    },
+    exit () {
+      this.showIntro = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/language/newen.js b/nezha-fronted/src/components/common/language/newen.js
index 357de2c2f..fd30a31f0 100644
--- a/nezha-fronted/src/components/common/language/newen.js
+++ b/nezha-fronted/src/components/common/language/newen.js
@@ -97,5 +97,4 @@ const newen = {
   },
   ...enLocale
 }
-
 export default newen
diff --git a/nezha-fronted/src/components/common/latlngPicker.vue b/nezha-fronted/src/components/common/latlngPicker.vue
index c194d9179..33c6b269c 100644
--- a/nezha-fronted/src/components/common/latlngPicker.vue
+++ b/nezha-fronted/src/components/common/latlngPicker.vue
@@ -3,7 +3,7 @@
     <div class="input-box">
       <div class="input-box-item" style="display: none;">
         <el-input v-model="lnglat" @blur="setLatlng" @change="setLatlng">
-          <template slot="prepend" v-if="showZoom">{{$t('config.dc.lnglat')}}</template>
+          <template slot="prepend" v-if="showZoom">{{$t('config.system.basic.lnglat')}}</template>
         </el-input>
       </div>
       <div class="input-box-item" v-if="showZoom">
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 3dbf52dda..3113461e2 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -828,9 +828,11 @@ export default {
             this.projectAlertShow = true
             this.saveData = JSON.parse(JSON.stringify(data))
             this.topologyInfo.name = this.obj.name
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
             resolve(data)
             data = null
           } else {
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
             if (data.data) {
               this.topologyInfo = {
                 fontSize: data.data.fontSize,
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 78fc8a14e..5312f7aeb 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -2,7 +2,7 @@
   <div v-clickoutside="{obj:endpoint,func:clickOutside}" :class="{'right-box-add-endpoint-snmp': currentModule.type && currentModule.type.toLowerCase() == 'snmp'}" class="right-box right-box-add-endpoint">
     <div class="right-box__header">
       <!-- begin--标题-->
-      <div class="header__title">{{$t("overall.createEndpoint")}}</div>
+      <div class="header__title">{{$t("config.system.basic.lnglatll.createEndpoint")}}</div>
       <!-- end--标题-->
       <div class="header__operation">
         <span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue b/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
index 078040f89..585a9df72 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
@@ -127,7 +127,7 @@
           </el-form-item>
 
           <el-form-item
-            :label="$t('overall.enable')"
+            :label="$t('overall.enabled')"
             prop="status"
             class="form-item__switch"
           >
diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
index 1c1cf3411..996d4fea2 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
@@ -184,7 +184,7 @@ export default {
       roles: [],
       mfaLevelList: [
         { value: 0, label: this.$t('profile.close') },
-        { value: 1, label: this.$t('overall.enable') },
+        { value: 1, label: this.$t('overall.enabled') },
         { value: 2, label: this.$t('config.user.forceEnable') }
       ],
       languageList: [
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 62e3e3b09..4d901525f 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -100,7 +100,7 @@
             </el-input>
           </el-form-item>
           <!--unit-->
-          <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
+          <el-form-item v-if="showSnmpTrap" :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
             <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
                          placeholder=""
                          popper-class="no-style-class dc-dropdown  unit-popper-class"
@@ -290,7 +290,7 @@
             </el-select>
           </el-form-item>
           <!--receiver-->
-          <el-form-item :label="$t('alert.config.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
+          <el-form-item :label="$t('alert.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
             <el-select
               id="alert-box-input-receiver"
               v-model.trim="editAlertRule.receiverShow"
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 9d2362b34..38d4a94b8 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -27,7 +27,7 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('config.dc.lnglat')" prop="lnglat">
+            <el-form-item :label="$t('config.system.basic.lnglat')" prop="lnglat">
               <div style="display: flex">
                 <el-input v-model="editDc.lnglat" maxlength="256" placeholder="" size="small" style="width: calc(100% - 50px);margin-right: 20px;"></el-input>
                 <latlng-picker
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index b3acfc830..9e82b7373 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -715,7 +715,7 @@ export default {
         { name: this.$t('project.endpoint.authTypeToken'), value: 2 }
       ],
       endpointStateList: [
-        { name: this.$t('overall.enable'), value: 1 },
+        { name: this.$t('overall.enabled'), value: 1 },
         { name: this.$t('profile.close'), value: 0 }
       ],
       configsCopyValue: '',
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index b0d1661d8..0c96ef7d8 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -155,120 +155,121 @@
 
           <!--   Report  -->
           <div>
-            <div class="form__sub-title">
-              <span>{{$t('dashboard.panel.report')}}</span>
-              <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
-            </div>
+            <el-form-item class="item-report">
+              <div class="form__sub-title">
+                <span>{{$t('dashboard.panel.report')}}</span>
+                <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
+              </div>
+            </el-form-item>
             <div v-if="editPanel.param.report.enable">
               <transition name="el-zoom-in-top" >
                 <div class="form-items--half-width-group">
                   <el-form-item
-                  :label="$t('backup.start')"
-                  class="form-item--half-width"
-                  prop="param.report.schedule.stime"
+                    :label="$t('backup.start')"
+                    class="form-item--half-width"
+                    prop="param.report.schedule.stime"
                   >
-                  <my-date-picker align="right" class=" "
-                              v-model="editPanel.param.report.schedule.stime"
-                              :format="timeFormatStrToDatePickFormat(dateFormatStr)"
-                              popper-class="panel-time-picker-popper right-box-select-top"
-                              prefix-icon=" "
-                              size="mini"
-                              type="datetime">
-                      </my-date-picker>
-                    </el-form-item>
+                    <my-date-picker align="right" class=" "
+                      v-model="editPanel.param.report.schedule.stime"
+                      :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+                      popper-class="panel-time-picker-popper right-box-select-top"
+                      prefix-icon=" "
+                      size="mini"
+                      type="datetime">
+                    </my-date-picker>
+                  </el-form-item>
                   <el-form-item
-                  :label="$t('dashboard.panel.endAt')"
-                  class="form-item--half-width"
-                  prop="param.report.schedule.etime"
-                  >
-                     <my-date-picker align="right" class=" "
-                            v-model="editPanel.param.report.schedule.etime"
-                            :format="timeFormatStrToDatePickFormat(dateFormatStr)"
-                            popper-class="panel-time-picker-popper right-box-select-top"
-                            prefix-icon=" "
-                            size="mini"
-                            type="datetime">
-                         </my-date-picker>
-                    </el-form-item>
+                    :label="$t('dashboard.panel.endAt')"
+                    class="form-item--half-width"
+                    prop="param.report.schedule.etime"
+                    >
+                    <my-date-picker align="right" class=" "
+                      v-model="editPanel.param.report.schedule.etime"
+                      :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+                      popper-class="panel-time-picker-popper right-box-select-top"
+                      prefix-icon=" "
+                      size="mini"
+                      type="datetime">
+                    </my-date-picker>
+                  </el-form-item>
                   <el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="param.report.range.unit">
                     <el-radio-group v-model="editPanel.param.report.range.unit" size="small">
                       <el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
                       <el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
                       <el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
                     </el-radio-group>
-                    </el-form-item>
-            <el-form-item
-            :label="$t('backup.schedule')"
-            prop="param.report.schedule.type"
-            class="form-tabs">
-            <el-tabs
-              v-model="editPanel.param.report.schedule.type"
-              type="card"
-              @tab-click="datasourceChange"
-              class="backups-info-tab"
-            >
-              <el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
-              <el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
-              <el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
-            </el-tabs>
-               </el-form-item>
-          <el-form-item
-            v-if="isShow === 2 || isShow === 3 ? true :false"
-            :label="$t('backup.RepeatEvery')"
-            prop="param.report.schedule.repeat"
-            class="form-day-week">
-            <el-input
-              size="small"
-              v-model="editPanel.param.report.schedule.repeat"
-              id="chart-box-title"
-              v-if="isShow === 3 ? true :false">
-              <template slot="append">{{ $t("backup.week") }}</template>
-            </el-input>
-            <el-input
-              size="small"
-              v-model="editPanel.param.report.schedule.repeat"
-              id="chart-box-title"
-              v-if="isShow === 2 ? true :false">
-              <template slot="append">{{ $t("backup.day") }}</template>
-            </el-input>
-                </el-form-item>
-         <el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
-            <el-checkbox-group
-              v-model="editPanel.param.report.schedule.nums">
-              <el-checkbox-button
-                v-for="(item,index) in week"
-                :label="index + 1"
-                :key="index"
-                >{{item}}</el-checkbox-button>
-            </el-checkbox-group>
-                    </el-form-item>
-           <el-form-item
-            v-show="isShow === 4 ? true : false"
-            :label="$t('backup.DayOfMonth')"
-            prop="nums"
-            class="check-month_box"
-            id="day-of-month"
-          >
-             <el-checkbox-group v-model="editPanel.param.report.schedule.nums">
-               <el-checkbox-button
-                v-for="(item, index) in month"
-                :label="index === 31 ? -1 : index + 1"
-                :key="item"
-                >{{ item }}</el-checkbox-button>
-             </el-checkbox-group>
-                </el-form-item>
-           <el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
-             <el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
-               <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
-               <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-               </el-option>
-            </el-select>
-                </el-form-item>
-          </div>
+                  </el-form-item>
+                  <el-form-item
+                    :label="$t('backup.schedule')"
+                    prop="param.report.schedule.type"
+                    class="form-tabs">
+                    <el-tabs
+                      v-model="editPanel.param.report.schedule.type"
+                      type="card"
+                      @tab-click="datasourceChange"
+                      class="backups-info-tab"
+                    >
+                      <el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
+                      <el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
+                      <el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
+                    </el-tabs>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="isShow === 2 || isShow === 3 ? true :false"
+                    :label="$t('backup.RepeatEvery')"
+                    prop="param.report.schedule.repeat"
+                    class="form-day-week">
+                    <el-input
+                      size="small"
+                      v-model="editPanel.param.report.schedule.repeat"
+                      id="chart-box-title"
+                      v-if="isShow === 3 ? true :false">
+                      <template slot="append">{{ $t("backup.week") }}</template>
+                    </el-input>
+                    <el-input
+                      size="small"
+                      v-model="editPanel.param.report.schedule.repeat"
+                      id="chart-box-title"
+                      v-if="isShow === 2 ? true :false">
+                      <template slot="append">{{ $t("backup.day") }}</template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
+                    <el-checkbox-group
+                      v-model="editPanel.param.report.schedule.nums">
+                      <el-checkbox-button
+                        v-for="(item,index) in week"
+                        :label="index + 1"
+                        :key="index"
+                        >{{item}}</el-checkbox-button>
+                    </el-checkbox-group>
+                  </el-form-item>
+                  <el-form-item
+                    v-show="isShow === 4 ? true : false"
+                    :label="$t('backup.DayOfMonth')"
+                    prop="nums"
+                    class="check-month_box"
+                    id="day-of-month"
+                  >
+                    <el-checkbox-group v-model="editPanel.param.report.schedule.nums">
+                      <el-checkbox-button
+                      v-for="(item, index) in month"
+                      :label="index === 31 ? -1 : index + 1"
+                      :key="item"
+                      >{{ item }}</el-checkbox-button>
+                    </el-checkbox-group>
+                  </el-form-item>
+                  <el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
+                    <el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+                      <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
+                      <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
               </transition>
             </div>
-      </div>
-
+          </div>
         </el-form>
       </div>
     </div>
@@ -377,17 +378,6 @@ export default {
     this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
     if (this.editPanel.id) {
       this.isShow = Number(this.editPanel.param.report.schedule.type)
-      this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
-      if (this.editPanel.param.report.schedule.stime !== '') {
-        this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
-      } else {
-        this.editPanel.param.report.schedule.stime = ''
-      }
-      if (this.editPanel.param.report.schedule.etime !== '') {
-        this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
-      } else {
-        this.editPanel.param.report.schedule.etime = ''
-      }
     }
   },
   mounted () {
@@ -496,8 +486,8 @@ export default {
               type: Number(this.editPanel.param.report.schedule.type),
               repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
               nums: this.editPanel.param.report.schedule.nums,
-              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
-              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
+              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.stime,
+              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.etime
             },
             receivers: this.editPanel.param.report.receivers
           },
@@ -584,15 +574,21 @@ export default {
     'editPanel.param.report.schedule.stime': {
       deep: true,
       handler (n) {
-        this.editPanel.param.report.schedule.stime = bus
-          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        const startTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.stime', '')
+        if (startTime !== '') {
+          this.editPanel.param.report.schedule.stime = bus
+            .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        }
       }
     },
     'editPanel.param.report.schedule.etime': {
       deep: true,
       handler (n) {
-        this.editPanel.param.report.schedule.etime = bus
-          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.etime', '')
+        if (endTime !== '') {
+          this.editPanel.param.report.schedule.etime = bus
+            .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
index 497be7f43..842c4074a 100644
--- a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
@@ -15,7 +15,7 @@
               <el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
             </el-form-item>
             <el-form-item :label='$t("overall.remark")' prop="remark">
-              <el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
+              <el-input placeholder="" maxlength="256"  rows="2" show-word-limit size="small" type="textarea" v-model="editCredential.remark"  id="credential-box-input-remark"></el-input>
             </el-form-item>
             <el-form-item :label='$t("config.mib.credential.type")' prop="type">
               <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 979d9ec11..8c20f519b 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -243,7 +243,7 @@ export default {
           width: 120,
           sortable: 'custom'
         }, {
-          label: this.$t('alert.config.receiver'),
+          label: this.$t('alert.receiver'),
           prop: 'receivers',
           show: false,
           minWidth: 100
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 5e2173785..f0e09483e 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -153,7 +153,7 @@
             </nz-tooltip>
           </template>
           <template v-else-if="item.prop === 'enabled'">
-            <span v-if="scope.row[item.prop] === 1">{{$t('overall.enable')}}</span>
+            <span v-if="scope.row[item.prop] === 1">{{$t('overall.enabled')}}</span>
             <span v-else>{{$t('profile.close')}}</span>
           </template>
           <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 5d3ac88a4..24ea30f62 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -66,6 +66,7 @@
       </el-dropdown>
     </div>
     <guide :show-dialog="showGuide" @dialogClosed="dialogClosed" @close="showGuide = false"></guide>
+    <intro></intro>
 <!--    <span v-for="item in fontData" :key="item">-->
 <!--      <span class="temp-dom" :class="`temp-dom&#45;&#45;${fontSzie}`" v-for="fontSzie in [12,13,14,15]" :key="fontSzie">{{item}}</span>-->
 <!--    </span>-->
@@ -76,16 +77,19 @@
 import bus from '../../libs/bus'
 import { mapActions } from 'vuex'
 import guide from '@/components/common/popBox/guide'
+import intro from '@/components/common/intro'
 export default {
   name: 'Header',
   components: {
-    guide
+    guide,
+    intro
   },
   data () {
     return {
       username: '',
       name: '',
       language: 'en',
+      showIntro: 'true',
       // 顶部菜单相关
       createMenu: [ // 新增按钮内容
         {
@@ -228,32 +232,6 @@ export default {
       this.getLinkData()
     }
     window.addEventListener('visibilitychange', this.testUser)
-    // setTimeout(() => {
-    //   this.$intro()
-    //     .setOptions({
-    //       // 我给看的效果图是英⽂的（默认英⽂），这⾥是更换成中⽂
-    //       prevLabel: '上⼀步',
-    //       nextLabel: '下⼀步',
-    //       skipLabel: '跳过',
-    //       doneLabel: '完成',
-    //       // steps步骤，可以写个⼯具类保存起来
-    //       steps: this.steps,
-    //       dontShowAgain: true
-    //     })
-    //     .oncomplete(() => {
-    //       // 需要注意的是，这⾥⽤了箭头函数
-    //       // 点击结束按钮后执⾏的事件
-    //     })
-    //     .onexit(() => {
-    //       // 点击跳过按钮后执⾏的事件
-    //     })
-    //     .onbeforeexit(() => {
-    //       // 确认完毕之后执⾏的事件
-    //       // return confirm('Are you sure?')
-    //     })
-    //   // this.$intro('#personal').start() // start the guide
-    //   // this.$intro('#personal').showHints() // show hints
-    // }, 1000)
   },
   computed: {
     linkData () {
diff --git a/nezha-fronted/src/components/page/config/backups.vue b/nezha-fronted/src/components/page/config/backups.vue
index 392c74eae..c8a4e26a7 100644
--- a/nezha-fronted/src/components/page/config/backups.vue
+++ b/nezha-fronted/src/components/page/config/backups.vue
@@ -72,7 +72,7 @@ export default {
       customTableTitle: [
         { label: this.$t('alert.config.schedEnable'), prop: 'schedule' },
         { label: this.$t('backup.backupRetention'), prop: 'retention' },
-        { label: this.$t('overall.enable'), prop: 'state' }
+        { label: this.$t('overall.enabled'), prop: 'state' }
       ],
       customTableTitle2: [
         { label: this.$t('config.assetLabel.date'), prop: 'time', minwidth: 228 },
diff --git a/nezha-fronted/src/components/page/config/basic.vue b/nezha-fronted/src/components/page/config/basic.vue
index 09564ca97..f2d6a54fe 100644
--- a/nezha-fronted/src/components/page/config/basic.vue
+++ b/nezha-fronted/src/components/page/config/basic.vue
@@ -60,7 +60,7 @@
         <el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
           <div style="display: flex">
             <el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
-              <template slot="prepend">{{$t('config.dc.lnglat')}}</template>
+              <template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
             </el-input>
             <latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
           </div>
diff --git a/nezha-fronted/src/components/page/config/monitor.vue b/nezha-fronted/src/components/page/config/monitor.vue
index df8883669..d47506631 100644
--- a/nezha-fronted/src/components/page/config/monitor.vue
+++ b/nezha-fronted/src/components/page/config/monitor.vue
@@ -70,7 +70,7 @@
             <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
           </el-input>
         </el-form-item>
-        <el-form-item :label="$t('config.system.monitor.logs_storage_type')" prop="logs_storage_type">
+        <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="logs_storage_type">
           <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
             <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
             <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index 9337f2949..b42dbb359 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -50,7 +50,7 @@
      </div>
       <div class="profile-left__button table-operation-items">
         <button @click="profileEnable" class="footer__btn"  v-if="mfaEnable != '1' && mfaLevel == 0">
-          <span>{{$t('overall.enable')}}</span>
+          <span>{{$t('overall.enabled')}}</span>
         </button>
         <button @click="profileDisable" class="footer__btn footer__btn--light"  :class="{'footer__btn--disabled': mfaEnable == 1 ||  mfaLevel == 2}" v-if="mfaEnable == '1' || mfaLevel > 0" :disabled="mfaEnable == 1 ||  mfaLevel == 2 ">
           <span>{{$t('profile.close')}}</span>
diff --git a/nezha-fronted/src/components/page/config/setup.vue b/nezha-fronted/src/components/page/config/setup.vue
index 147076021..f7de2db92 100644
--- a/nezha-fronted/src/components/page/config/setup.vue
+++ b/nezha-fronted/src/components/page/config/setup.vue
@@ -149,7 +149,7 @@
                 </el-form-item>
                 <el-form-item :label="$t('setup.system.federation')" prop="prometheusFederationEnabled" key="sysprometheusFederationEnabled" >
                   <el-select v-model="system.prometheusFederationEnabled" :placeholder="$t('el.select.placeholder')" style="width: 100%" >
-                    <el-option :label="$t('overall.enable')" :value="1"></el-option>
+                    <el-option :label="$t('overall.enabled')" :value="1"></el-option>
                     <el-option :label="$t('overall.unavailable')"  :value="0"></el-option>
                   </el-select>
                 </el-form-item>
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index f4c3bbd6d..5ac27b0d9 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -56,7 +56,7 @@
             <el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
               <div style="display: flex">
                 <el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
-                  <template slot="prepend">{{$t('config.dc.lnglat')}}</template>
+                  <template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
                 </el-input>
                 <latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
               </div>
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index 1875e00ed..24bb7cc6c 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -131,7 +131,7 @@ export default {
           prop: 'name',
           show: true
         }, {
-          label: 'Token',
+          label: this.$t('apiKey.key'),
           prop: 'token',
           show: true
         }, {
diff --git a/nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue b/nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue
index 9cc03097d..f9700230d 100644
--- a/nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue
+++ b/nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue
@@ -89,7 +89,7 @@ export default {
           minWidth: 100,
           show: true
         }, {
-          label: this.$t('asset.talon.token'),
+          label: this.$t('apiKey.key'),
           prop: 'token',
           minWidth: 180,
           show: true
diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
index 7bfbb1752..f1668a6be 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -125,7 +125,9 @@ export default {
     }
   },
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
+      theme,
       operations: {
         levels: [0, 1, 2, 3, 4, 5, 6],
         descending: true
@@ -262,8 +264,10 @@ export default {
             itemHeight: 4,
             borderRadius: 3,
             textStyle: {
-              padding: [0, 0, 0, 6]
-            }
+              padding: [0, 0, 0, 6],
+              color: this.theme == 'light' ? '#666666' : '#BEBEBE',
+            },
+            inactiveColor: this.theme == 'light' ? '#BEBEBE' : '#666666' // 字体颜色
           },
           series,
           xAxis: {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 488e5ba41..063361185 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -23,7 +23,6 @@
               v-model="cascaderValue"
               v-clickoutside="closeDropdown"
               v-my-loading="tempBoxShowLoading"
-              :loading="loading"
               :options="metricOptions"
               v-if="type !== 'log'"
               :props="cascaderProps"
@@ -925,7 +924,7 @@ export default {
             let childrenCopy = JSON.parse(JSON.stringify(children))
             const findChild = this.metricOptions.find(item => item.label === data.parent)
             if (childrenCopy.length > 100) {
-              childrenCopy = childrenCopy.splice(findChild.children.length, findChild.children.length + 101)
+              childrenCopy = childrenCopy.splice(findChild.children.length, 100)
               findChild.children.splice(findChild.children.length - 1, 1)
               findChild.children.push(...childrenCopy)
               if (findChild.children.length < children.length - 1) {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index dbf772d03..b3ff2b0a5 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -391,30 +391,48 @@ export default {
       })
     },
     edit (u) {
-      this.panel = Object.assign({}, u)
-      if (!this.panel.param.report) {
-        this.panel = {
-          ...u,
-          param: {
-            report: {
-              enable: false,
-              range: {
-                unit: ''
-              },
-              schedule: {
-                type: '0',
-                repeat: 1,
-                nums: [],
-                stime: '',
-                etime: ''
-              },
-              receivers: []
-            },
-            chartShare: 'none'
+      this.$get('visual/panel?ids=' + u.id).then(res => {
+        if (res.code === 200) {
+          this.panel = res.data.list[0]
+          if (!this.panel.param.report) {
+            this.panel = {
+              ...this.panel,
+              param: {
+                report: {
+                  enable: false,
+                  range: {
+                    unit: ''
+                  },
+                  schedule: {
+                    type: '0',
+                    repeat: 1,
+                    nums: [],
+                    stime: '',
+                    etime: ''
+                  },
+                  receivers: []
+                },
+                chartShare: 'none'
+              }
+            }
           }
+          this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.etime = ''
+          }
+          this.rightBox.panel.show = true
         }
-      }
-      this.rightBox.panel.show = true
+      })
+      // this.panel = Object.assign({}, u)
     },
     toAdd () {
       if (!this.hasButton('panel_view')) {