diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 2e0a7fcda..68b39ad04 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1053,7 +1053,7 @@ li{
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
+.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
 .right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart {
   width: 850px;
 }
@@ -2303,3 +2303,15 @@ li{
     margin-right: 4px;
   }
 }
+.el-radio-group .el-radio__inner:hover{
+  border-color: #ee9d3f !important;
+}
+.el-radio-group .is-checked {
+  .el-radio__inner{
+    background-color: #ee9d3f !important;
+    border-color: #ee9d3f !important;
+  }
+  .el-radio__label{
+    color: #ee9d3f !important;;
+  }
+}
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 6a896cd01..84af5567e 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -41,7 +41,7 @@
           </el-dropdown>
         </div>
         <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="single-stat-content" >
+          <div :id="'chartContainer'+chartIndex"  :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}" class="single-stat-content" ref="chartContainer">
             {{serieSingleStat}}
             <div class="chart-no-data" v-show="noData">No Data</div>
           </div>
@@ -58,7 +58,7 @@
             <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <div class="single-stat-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" >
+            <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}"  class="single-stat-content" id="chartScreenContainer" ref="chartScreenContainer">
               {{serieSingleStat}}
               <div class="chart-no-data" v-show="noData">No Data</div>
             </div>
@@ -112,6 +112,7 @@ export default {
       seriesItem: [], // 保存信息
       seriesItemScreen:[],//全屏数据
       serieSingleStat:'',
+      mapping:'',//满足valueMapping时 mapping的值
       images: '',
       loading:Object,
       items: {
@@ -409,8 +410,24 @@ export default {
           this.data = chartItem;
           this.unit = chartDataFormat.getUnit(this.data.unit);
           if(Number(seriesItem)){
-            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
-            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
+            if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
+              let type=chartItem.param.valueMapping.type;
+              let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
+              let mapping;
+              if(type == 'value'){
+                mapping=mappings.find(item=>{return item.value == singleStatTmp})
+              }else{
+                mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
+              }
+              this.mapping=mapping;
+              if(this.mapping&&!this.mapping.color){
+                this.mapping.color={bac:'#fff',text:'#000'}
+              }
+              this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            }else{
+              this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            }
           }else {
             this.serieSingleStat =seriesItem;
           }
@@ -439,7 +456,11 @@ export default {
               }else{
                 mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
               }
-              this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+              this.mapping=mapping;
+              if(this.mapping&&!this.mapping.color){
+                this.mapping.color={bac:'#fff',text:'#000'}
+              }
+              this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
             }else{
               this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
             }
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index a429d635e..fd8186b98 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -52,7 +52,7 @@
         <div class="mt-10 table-container" v-cloak v-show="firstShow">
           <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
                     :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
-                    @sort-change="tableDataSort">
+                    @sort-change="tableDataSort" >
             <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
             <el-table-column sortable prop="element" :show-overflow-tooltip="true"
@@ -65,7 +65,7 @@
             <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
-                {{ scope.row.value}}
+                <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
               </template>
             </el-table-column>
           </el-table>
@@ -97,7 +97,7 @@
             <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
-                {{ scope.row.value}}
+                <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
               </template>
             </el-table-column>
           </el-table>
@@ -210,7 +210,8 @@
           }],
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
         oldSearchTime: [],
-        ps: null
+        ps: null,
+        mapping:{},
       };
     },
     created() {
@@ -395,7 +396,9 @@
             }else{
               mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
             }
-            item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
+            this.mapping=mapping;
+            item.mapping=mapping;
+            item.value = mapping?mapping.text.replace('{{value}}', item.value):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
           }
           return item;
         }));
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 8aeea9032..cd2aebdb9 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -248,8 +248,7 @@
   .chart-single-stat {
     width: 100%;
     .single-stat-container {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding: 8px;
       display: table;
       text-align: center;
       width: calc(100% - 16px);
@@ -261,6 +260,18 @@
       }
     }
   }
+  .single-stat-screen-container{
+    height: 100%;
+    .single-stat-content{
+      font-size: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
   .chart-container.chart-detail {
     height: 100%;
     position: relative;
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index e9c0436af..3c47eb3d0 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -120,7 +120,7 @@
       <template v-if="chart.type==='singleStat'">
         <div id="chartSingleStatPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"
          style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;" >
-          <div class="line-area" ref="singleStatArea"  id="singleStatArea"  style="margin-top:0px; text-align:center;
+          <div class="line-area" ref="singleStatArea"  id="singleStatArea"  :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff'}" style="margin-top:0px; text-align:center;
       vertical-align: middle;
       display:table-cell;
       font-size:30px;">
@@ -143,7 +143,7 @@
           </el-table-column>
           <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
             <template slot-scope="scope">
-              {{scope.row.value}}
+              <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
             </template>
           </el-table-column>
         </el-table>
@@ -252,6 +252,7 @@
         pageHeight:40,
         hasLegendOptions:false,
         screenLegendOptions:[],
+        mapping:{},
       };
     },
     computed: {
@@ -400,6 +401,9 @@
             const axiosArr = chartItem.elements.map((ele) => {
               const filterItem = ele;
               let query = encodeURIComponent(filterItem.expression);
+              if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
+                return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              }
               return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
             });
             // 一个图表的所有element单独获取数据
@@ -553,7 +557,7 @@
                     this.setData(_chartItem, series, legend);
                   }else if(chartItem.type ==='singleStat'){
                     if(Number(singleStatRlt)){
-                      let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
+                      let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
                       if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
                         let type=chartItem.param.valueMapping.type;
                         let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
@@ -563,7 +567,11 @@
                         }else{
                           mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
                         }
-                        this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+                        this.mapping=mapping;
+                        if(this.mapping&&!this.mapping.color){
+                          this.mapping.color={bac:'#fff',text:'#000'}
+                        }
+                        this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
                       }else{
                         this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
                       }
@@ -1042,8 +1050,9 @@
             }else{
               mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
             }
-            item.value = mapping?mapping.text:this.unit.compute(value,null,2);
-            console.log('value',value,'mapping',mapping)
+            this.mapping=mapping;
+            item.mapping=mapping;
+            item.value = mapping?mapping.text.replace('{{value}}', item.value):this.unit.compute(value,null,2);
           }
           return item;
         })
@@ -1115,6 +1124,8 @@
       // 查询数据,修改日期查询全屏数据
       getQueryChart(type) {
         let axiosArr = [];
+        const chartItem = this.chart;
+        console.log(chartItem);
         this.$nextTick(() => {
           let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
           let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
@@ -1129,6 +1140,9 @@
           axiosArr = this.chart.elements.map((ele) => {
             const filterItem = ele;
             let query = encodeURIComponent(filterItem.expression);
+            if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
+              return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+            }
             return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
           });
           // 一个图表
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 573f975d3..10161c731 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -344,6 +344,7 @@
           })
         }
       },
+
       clickLegend(legendName,index){
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGrey[index];
@@ -524,7 +525,7 @@
             show:false,
             top:'0',
             right:'18',
-            showTitle:true,
+            showTitle:false,
             feature:{
               dataZoom:{
                 yAxisIndex:false,
@@ -536,14 +537,27 @@
               magicType:{
                 type:['stack'],
                 title:{
-                  stack:self.$t('overall.toolBox.stack')
+                  stack:self.$t('overall.toolBox.stack'),
                 },
                 iconStyle:{
                   borderColor:stackIconBorderColor,
                 },
                 emphasis:{
                   borderColor:stackIconChooseBorderColor,
-                }
+                },
+              },
+            },
+            tooltip: { // 和 option.tooltip 的配置项相同
+              show: true,
+              position:'top',
+              formatter: function (param) {
+                return param.title; // 自定义的 DOM 结构
+              },
+              backgroundColor:'rgba(255,255,255,0)',
+              borderColor :'rgba(255,255,255,0)',
+              textStyle: {
+                fontSize: 12,
+                color : '#439AC6'
               },
             }
           },
@@ -831,7 +845,8 @@
             getChart(this.chartIndex).on('magictypechanged', function (params) {
                 self.isStackArea = !self.isStackArea;
                 if(self.isStackArea){
-                  this.setOption({
+                  console.log(123123);
+                  getChart(self.chartIndex).setOption({
                     toolbox:{
                       feature:{
                         dataZoom:{
@@ -897,7 +912,33 @@
                         },
                     }
                   });
-                }
+                }else{
+                getChart(self.chartIndex).setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+                  },
+                })
+              }
             });
           });
         } else if (chartSite === 'screen') { // 全屏显示
@@ -1035,6 +1076,32 @@
                     },
                   }
                 });
+              }else{
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+                  },
+                })
               }
             });
           });
diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
index ede24a47c..fa04ea695 100644
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -98,7 +98,7 @@ export default {
       if (resizeHeight) {
         this.termimalHeight = resizeHeight;
       }
-      this.isFullScreen = isFullScreen;
+      // this.isFullScreen = isFullScreen;
       //this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
       let height = document.body.clientHeight-this.topMenuHeight;//可视高度
       let width = document.body.clientWidth;//可视宽度
diff --git a/nezha-fronted/src/components/cli/webSSH.scss b/nezha-fronted/src/components/cli/webSSH.scss
index 0f1137a06..233cd2349 100644
--- a/nezha-fronted/src/components/cli/webSSH.scss
+++ b/nezha-fronted/src/components/cli/webSSH.scss
@@ -128,9 +128,8 @@
   }
 }
 .shell-service-max {
-  height: 100% !important;
+  height: 100%;
   position: fixed !important;
-  top: 0;
   bottom: 0;
 }
 
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index ef2d3355f..896c9018b 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -7,170 +7,171 @@
       <div class="sub-list-resize-copy">一</div>
     </div>
     <div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>-->
-  <div ref="webSShBox" id="shell-service" class="sub-box" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" v-show="consoleShow">
-    <div class="resize-modal">
-      <div class="sub-list-resize-copy" style="width: 100%">一</div>
-    </div>
-    <div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
-    <div style='position: relative;' class="sub-list">
-      <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
-      <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
-      <el-menu  mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
-        <el-submenu index="1"  style="width:40px;" popper-class="fontSizeBox">
-          <template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
-          <!--<el-submenu index="1-1">-->
+    <div :class="{'shell-service-max': isFullScreen,'shell-service':true}" class="sub-box ani-webSHH-height" data-yunlog-scope="popup" id="shell-service" ref="webSShBox" style="height: 0;background: #000">
+      <div class="resize-modal">
+        <div class="sub-list-resize-copy" style="width: 100%">一</div>
+      </div>
+      <div @mousedown="dragEagle" class="sub-list-resize" id="shell-split" v-show="!isFullScreen">一</div>
+      <div class="sub-list-resize" v-show="isFullScreen"></div>
+      <div class="sub-list" style='position: relative;'>
+        <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
+        <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
+        <el-menu  @select="handleSelect" mode="horizontal" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
+          <el-submenu index="1"  popper-class="fontSizeBox" style="width:40px;">
+            <template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
+            <!--<el-submenu index="1-1">-->
             <!--<template slot="title">文字大小</template>-->
             <el-menu-item @click="changeFontSize(12)" :class="{fontSet:true,menuActive:fontSize==12, smallFont:true}" index="1-1">A</el-menu-item>
             <el-menu-item @click="changeFontSize(15)" :class="{fontSet:true,menuActive:fontSize==15, middleFont:true}" index="1-2">A</el-menu-item>
             <el-menu-item @click="changeFontSize(20)" :class="{fontSet:true,menuActive:fontSize==20, bigFont:true}" index="1-3">A</el-menu-item>
             <!--<el-menu-item class="fontSet" index="1-4">大</el-menu-item>-->
-          <!--</el-submenu>-->
-          <!--<el-submenu index="1-2" >-->
+            <!--</el-submenu>-->
+            <!--<el-submenu index="1-2" >-->
             <!--<template slot="title">字体</template>-->
             <!--<el-menu-item index="1-2-1">Monosapace</el-menu-item>-->
             <!--<el-menu-item index="1-2-2">Courier New</el-menu-item>-->
-          <!--</el-submenu>-->
-        </el-submenu>
-        <el-submenu index="2" style="width:50px;">
-          <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
-          <el-menu-item index="2-1" @click="showUploadBox">
+            <!--</el-submenu>-->
+          </el-submenu>
+          <el-submenu index="2" style="width:50px;">
+            <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
+            <el-menu-item @click="showUploadBox" index="2-1">
               <div>{{$t('webshell.upload')}}</div>
-          </el-menu-item>
-          <el-menu-item index="2-2" @click="showDownloadBox">
-            <div>{{$t('webshell.download')}}</div>
-          </el-menu-item>
-        </el-submenu>
-      </el-menu>
+            </el-menu-item>
+            <el-menu-item @click="showDownloadBox" index="2-2">
+              <div>{{$t('webshell.download')}}</div>
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
 
-      <el-tabs v-model="editableTabsValue"
-               @tab-click="handleClick"
-               @tab-remove="removeTab"
-               :before-leave="beforeLeave"
-               style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
-               type="border-card" >
-        <el-tab-pane v-for="(item, index) in editableTabs"
-          :key="item.name"
-          :label="item.title"
-          :name="item.name"
-           closable
-        >
-          <!-- tab显示的内容 1 grey,2 green, 3 red-->
-          <span slot="label" style="">
+        <el-tabs :before-leave="beforeLeave"
+                 @tab-click="handleClick"
+                 @tab-remove="removeTab"
+                 style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
+                 type="border-card"
+                 v-model="editableTabsValue" >
+          <el-tab-pane :key="item.name"
+                       :label="item.title"
+                       :name="item.name"
+                       closable
+                       v-for="(item, index) in editableTabs"
+          >
+            <!-- tab显示的内容 1 grey,2 green, 3 red-->
+            <span slot="label" style="">
             <div :class="{'active-icon grey':item.circleColor == 1,'active-icon green':item.circleColor == 2,'active-icon red':item.circleColor == 3}"
-                  style="margin-top: 0px;"></div>{{item.title}}
+                 style="margin-top: 0px;"></div>{{item.title}}
           </span>
 
-          <my-console :terminal="item.terminal"    @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index"    @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console>
+            <my-console :fontSize="fontSize"    :idIndex="index" :isFullScreen="isFullScreen"    :ref="'console'+index" :terminal="item.terminal" @closeConsole="removeTab" @refreshConsoleTitle="refreshTabTitle"></my-console>
 
-        </el-tab-pane>
-        <el-tab-pane key="add" name="add">
-          <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
-        </el-tab-pane>
-      </el-tabs>
-      <i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
-      <i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
-      <i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i>
-      <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
-      <!--
-      <i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
-      <i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
-      <i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
-      <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
-      -->
-      <!--nz-icon-setting  nz-icon nz-icon-minus  el-icon-full-screen  el-icon-copy-document-->
-    </div>
+          </el-tab-pane>
+          <el-tab-pane key="add" name="add">
+            <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
+          </el-tab-pane>
+        </el-tabs>
+        <i @click="minScreen" class="nz-icon nz-icon-minus console-title-icon" style='right:70px;'></i>
+        <i @click="fullScreen" class="el-icon-full-screen console-title-icon" style='right:38px;' v-if="!isFullScreen"></i>
+        <i @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon" style='right:38px;' v-else></i>
+        <i @click="closeConsole" class="nz-icon nz-icon-close console-title-icon" style='right:8px;'></i>
+        <!--
+        <i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
+        <i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
+        <i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
+        <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
+        -->
+        <!--nz-icon-setting  nz-icon nz-icon-minus  el-icon-full-screen  el-icon-copy-document-->
+      </div>
 
-    <div >
-      <el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
-        <div >
-          <div class="upload-body">
+      <div >
+        <el-dialog :modal-append-to-body='false' :show-close="true" :title="uploadBox.title" :visible.sync="uploadBox.showUpload" @close="closeDialog" class="nz-dialog" width="500px" >
+          <div >
+            <div class="upload-body">
 
-            <el-row >
-              <el-col :span="24">
-                <el-upload drag class="upload-demo"
-                           ref="uploadFile" action=""
-                           :file-list="uploadFileList"
-                           :on-change="handleChange"
-                           :auto-upload="false" >
-                  <i class="nz-icon nz-icon-upload"></i>
-                  <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-                  <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                    <span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
-                  </button>-->
-                </el-upload>
-              </el-col>
-            </el-row>
-            <el-row style="margin-top: 20px;">
-              <el-col :span="3" style="text-align:center;line-height: 24px;">
-                <label>{{$t('webshell.filePath')}}</label>
-              </el-col>
-              <el-col :span="21">
-                <el-input v-model="uploadFile.path" size="mini"></el-input>
-              </el-col>
-            </el-row>
-          </div>
-          <div slot="footer" class="footer">
-            <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
-              <button  @click="upload"  class="el-button el-button--default el-button--small">
-                <span>{{$t('webshell.uploadButtonTitle')}}</span>
-              </button>
-              <button @click="closeDialog"  class="el-button el-button--default el-button--small" >
-                <span>{{$t('overall.cancel')}}</span>
-              </button>
+              <el-row >
+                <el-col :span="24">
+                  <el-upload :auto-upload="false" :file-list="uploadFileList"
+                             :on-change="handleChange" action=""
+                             class="upload-demo"
+                             drag
+                             ref="uploadFile" >
+                    <i class="nz-icon nz-icon-upload"></i>
+                    <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+                    <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+                      <span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
+                    </button>-->
+                  </el-upload>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top: 20px;">
+                <el-col :span="3" style="text-align:center;line-height: 24px;">
+                  <label>{{$t('webshell.filePath')}}</label>
+                </el-col>
+                <el-col :span="21">
+                  <el-input size="mini" v-model="uploadFile.path"></el-input>
+                </el-col>
+              </el-row>
             </div>
-          </div>
-        </div>
-      </el-dialog>
-      <el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
-        <div>
-          <div class="upload-body">
-            <el-row style="margin-top: 20px;">
-              <el-col :span="3" style="text-align:center;line-height: 24px;">
-                <label>{{$t('webshell.filePath')}}</label>
-              </el-col>
-              <el-col :span="21">
-                <el-input v-model="downloadFile.path" size="mini"></el-input>
-              </el-col>
-            </el-row>
-          </div>
-          <div slot="footer" class="footer">
-            <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
-              <button @click="download"  class="el-button el-button--default el-button--small">
-                <span>{{$t('webshell.downloadButtonTitle')}}</span>
-              </button>
-              <button  @click="closeDownloadDialog"  class="el-button el-button--default el-button--small">
-                <span>{{$t('overall.cancel')}}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </el-dialog>
-      <el-dialog :visible.sync="closeConfirmShow"  :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
-        <div >
-          <div class="el-message-box__content">
-            <div class="el-message-box__container">
-              <div class="el-message-box__status el-icon-warning">
-              </div>
-              <div class="el-message-box__message">
-                <p>{{$t('webshell.closeTip')}}</p>
+            <div class="footer" slot="footer">
+              <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
+                <button  @click="upload"  class="el-button el-button--default el-button--small">
+                  <span>{{$t('webshell.uploadButtonTitle')}}</span>
+                </button>
+                <button @click="closeDialog"  class="el-button el-button--default el-button--small" >
+                  <span>{{$t('overall.cancel')}}</span>
+                </button>
               </div>
             </div>
           </div>
-          <div slot="footer" class="footer">
-            <div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
-              <el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
-              <button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right">
-                <span>{{$t('tip.yes')}}</span>
-              </button>
-              <button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right">
-                <span>{{$t('tip.no')}}</span>
-              </button>
+        </el-dialog>
+        <el-dialog :modal-append-to-body='false' :show-close="true" :title="downloadBox.title" :visible.sync="downloadBox.showDownload" @close="closeDownloadDialog" class="nz-dialog" width="500px" >
+          <div>
+            <div class="upload-body">
+              <el-row style="margin-top: 20px;">
+                <el-col :span="3" style="text-align:center;line-height: 24px;">
+                  <label>{{$t('webshell.filePath')}}</label>
+                </el-col>
+                <el-col :span="21">
+                  <el-input size="mini" v-model="downloadFile.path"></el-input>
+                </el-col>
+              </el-row>
+            </div>
+            <div class="footer" slot="footer">
+              <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
+                <button @click="download"  class="el-button el-button--default el-button--small">
+                  <span>{{$t('webshell.downloadButtonTitle')}}</span>
+                </button>
+                <button  @click="closeDownloadDialog"  class="el-button el-button--default el-button--small">
+                  <span>{{$t('overall.cancel')}}</span>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </el-dialog>
+        </el-dialog>
+        <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="closeConfirmShow" @close="cancleConfirm" class="nz-dialog" width="500px" >
+          <div >
+            <div class="el-message-box__content">
+              <div class="el-message-box__container">
+                <div class="el-message-box__status el-icon-warning">
+                </div>
+                <div class="el-message-box__message">
+                  <p>{{$t('webshell.closeTip')}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="footer" slot="footer">
+              <div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
+                <el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
+                <button @click="closeShellWindow" class="el-button el-button--default el-button--small el-button--primary float-right" type="button">
+                  <span>{{$t('tip.yes')}}</span>
+                </button>
+                <button @click="cancleConfirm" class="el-button el-button--default el-button--small float-right" type="button">
+                  <span>{{$t('tip.no')}}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -212,6 +213,7 @@
         downloadResult:null,
         // 字体大小
         fontSize:termFontSize?termFontSize:15,
+        webSSHHeight:'',//最小化之前的高度
       }
     },
     methods: {
@@ -311,7 +313,7 @@
         this.isFullScreen = false;
 
         let targetDiv= document.getElementById('shell-service');
-        targetDiv.style.height=this.initConsoleHeight+'px';
+        targetDiv.style.height=0+'px';
         this.consoleHeight = this.initConsoleHeight-50;
 
         this.$store.commit('closeConsole');
@@ -451,6 +453,9 @@
       minScreen(){
         this.consoleShow = false;
         this.$store.commit('minConsole');
+        let targetDiv= document.getElementById('shell-service');
+        this.webSSHHeight=targetDiv.style.height;
+        targetDiv.style.height=0+'px';
       },
       fullScreen(isChange){
         this.resizeConsoleHeight = document.querySelector("#shell-service").offsetHeight; //记录全屏前主列表的高度
@@ -663,6 +668,8 @@
             let host = this.$store.state.consoleParam.host;
             let accountId = this.$store.state.consoleParam.accountId;
             let port = this.$store.state.consoleParam.port;
+            let targetDiv= document.getElementById('shell-service');
+            targetDiv.style.height=this.initConsoleHeight+'px';
             this.show(id,host,accountId,port);
           }else {
             this.consoleShow = true;
@@ -676,6 +683,8 @@
                 });
               }
             });
+            let targetDiv= document.getElementById('shell-service');
+            targetDiv.style.height=this.webSSHHeight;
           }
           this.$store.state.consoleShow = false;
         }
@@ -694,5 +703,11 @@
   }
 </script>
 <style scoped>
+  .ani-webSHH-height{
+    transition: height .25s ease-in;
+  }
+  .sub-list{
+    background: #E4E7ED;
 
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 71cd03dc6..a4f062602 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -191,6 +191,9 @@
         <el-menu-item index="5-0">
           <div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
         </el-menu-item>
+        <el-menu-item index="5-9">
+          <div @click="jumpTo('/roles')" :class="{'menu-item-active' :(route == '/roles' )}">{{$t('config.roles.roles')}}</div>
+        </el-menu-item>
         <el-menu-item index="5-1">
           <div @click="jumpTo('/promServer')" :class="{'menu-item-active' :(route == '/promServer' )}">{{$t('config.promServer.promServerList')}}</div>
         </el-menu-item>
diff --git a/nezha-fronted/src/components/common/home.vue b/nezha-fronted/src/components/common/home.vue
index 71463e2a9..b2bfd3b15 100644
--- a/nezha-fronted/src/components/common/home.vue
+++ b/nezha-fronted/src/components/common/home.vue
@@ -4,7 +4,8 @@
     <!--<div class="content-box" >
       <router-view/>
     </div>-->
-    <left-menu></left-menu>
+    <left-menu ></left-menu>
+    <menus v-if="isMenuPage"></menus>
     <web-ssh ref="webSsh" ></web-ssh>
   </div>
 
@@ -14,12 +15,20 @@
 import Header from "./header";
 import webSSH from "../cli/webSSH";
 import leftMenu from "./leftMenu";
+import menus from "../page/config/menus";
 export default {
   name: "home",
   components: {
     Header,
     'web-ssh': webSSH,
-    'left-menu': leftMenu
+    'left-menu': leftMenu,
+    menus
+  },
+  computed:{
+    isMenuPage:function(){
+      console.log(this.$route.path )
+      return this.$route.path == '/menu'
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 5fcb4db11..29d510e45 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -5,6 +5,7 @@ export const staticMenus = {
     title: i18n.t('overall.config'),
     menu: [
       {route: '/account', name: i18n.t('config.account.account')},
+      {route: '/roles', name: i18n.t('config.roles.roles')},
       {route: '/promServer', name: i18n.t('config.promServer.promServerList')},
       {route: '/dc', name: i18n.t('config.dc.dc')},
       {route: '/model', name: i18n.t('config.model.model')},
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index b6b288bc6..94415bc3f 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -72,7 +72,9 @@ export const clickoutside = {
         if (binding.arg) {
           binding.value(e, binding.arg);
         } else {
-          binding.value(e);
+          if(binding.value){
+            binding.value(e);
+          }
         }
 
       }
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 558154282..4820c37e4 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -182,6 +182,9 @@ const cn = {
         unit: "单位",
         legend: "图例",
         legendTip: "使用名称或表达式控制时间序列的名称。例如{{hostname}将替换为标签主机名的标签值。",
+        valueMappingTip: '使用{{value}}可以显示原值\n'+
+          '例如：total alive: {{value}}\n'+
+          '结果为：total alive: 100',
         option: "操作",
         alertParam:{
           param:'参数',
@@ -349,7 +352,7 @@ const cn = {
         total: "总计",
         up: "up",
         down: "down",
-        prometheus: "prometheus"
+        prometheus: "prometheus",
       }
     }
   },
@@ -554,6 +557,7 @@ const cn = {
     account: {
       accountList: "用户列表",
       account: "用户",
+      roles:"角色",
       language: "语言",
       receiver: "接收人",
       createTime: "创建时间",
@@ -575,6 +579,35 @@ const cn = {
       reinputPwd: "请再次输入密码",
       notification: "通知"
     },
+    roles:{
+      roles:"角色",
+      name:"名称",
+      remark:"备注",
+      option: '操作',//"操作"
+      permission:"权限",
+      menu:"菜单",
+      createRole:"新增角色",
+      editRole:"编辑角色",
+
+    },
+    menus:{
+      menus:'菜单',
+      name:"名称",
+      remark:"备注",
+      option: '操作',//"操作"
+      code:'Code',
+      i18n:'I18n',
+      type:'类型',
+      route:'路由',
+      perms:'权限',
+      button:"按钮",
+      menu:"菜单",
+      parent:"上级菜单",
+      mainMenu:"主菜单",
+      createMenu:"新增菜单",
+      editMenu:"编辑菜单",
+      orderNum:"排序",
+    },
     promServer: {
       promServerList: "Prometheus服务",
       promId: "Prometheus服务ID",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 9327151a8..2f21aac04 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -145,6 +145,9 @@ const en = {
         legend:'Legend',
         statistics:'Statistics',
         legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
+        valueMappingTip: 'Use {{value}} to display the original value\n'+
+          'For example: Total Alive: {{value}}\n'+
+          'The result is: Total Alive: 100',
         sync: 'Sync to assets',
         last:'Last',
         threshold:'Threshold',
@@ -557,6 +560,7 @@ const en = {
       accountList: 'Account list',//"用户列表"
       //列表表头
       account: 'Account',//"用户"
+      roles:"Roles",
       language: 'Language',//"语言"
       receiver: 'Receiver',//"用户组"
       createTime: 'Create time',//"创建时间"
@@ -579,6 +583,34 @@ const en = {
       reinputPwd:'Enter password again',
       notification: 'Notification'
     },
+    roles:{
+      roles:"Roles",
+      name:"Name",
+      remark:"Remark",
+      option: 'Operation',//"操作"
+      permission:"Permission",
+      menu:"Menu",
+      createRole:"Create role",
+      editRole:"Edit role"
+    },
+    menus:{
+      menus:'Menus',
+      name:"Name",
+      remark:"Remark",
+      option: 'Operation',//"操作",
+      code:'Code',
+      i18n:'I18n',
+      type:'Type',
+      route:'Route',
+      perms:'Permission',
+      button:"Button",
+      menu:"Menu",
+      parent:"Previous menu",
+      mainMenu:'Primary menu',
+      createMenu:"Create menu",
+      editMenu:"Edit menu",
+      orderNum:"Order",
+    },
     promServer: {
       promServerList: 'Prometheus server',//"Prometheus Server"
       //侧滑框
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index 7737a3aa6..6a906b566 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -48,7 +48,7 @@
                       </el-popover>
                       <span v-else>{{item.name}}</span>
                     </div>
-                    <el-badge class="mark" :value="item.total" />
+                    <el-badge :value="item.total" class="mark" type="primary"/>
                   </el-checkbox>
                 </el-checkbox-group>
               </el-collapse-item>
@@ -61,7 +61,7 @@
                       </el-popover>
                       <span v-else>{{item.name}}</span>
                     </div>
-                    <el-badge class="mark" :value="item.total" />
+                    <el-badge :value="item.total" class="mark" type="primary"/>
                   </el-checkbox>
                 </el-checkbox-group>
               </el-collapse-item>
@@ -74,7 +74,7 @@
                       </el-popover>
                       <span v-else>{{item.name}}</span>
                     </div>
-                    <el-badge class="mark" :value="item.total" />
+                    <el-badge :value="item.total" class="mark" type="primary"/>
                   </el-checkbox>
                 </el-checkbox-group>
               </el-collapse-item>
@@ -84,7 +84,7 @@
                     <div class="sidebar-info-item-txt">
                       <span>{{item.label}}</span>
                     </div>
-                    <el-badge class="mark" :value="item.total" />
+                    <el-badge :value="item.total" class="mark" type="primary"/>
                   </el-checkbox>
                 </el-checkbox-group>
               </el-collapse-item>
@@ -103,7 +103,7 @@
                       </el-popover>
                       <span v-else>{{tag.value}}</span>
                     </div>
-                    <el-badge class="mark" :value="tag.total" :max="99"/>
+                    <el-badge :max="99" :value="tag.total" class="mark" type="primary"/>
                   </el-checkbox>
                 </el-checkbox-group>
               </el-collapse-item>
@@ -790,6 +790,9 @@
     padding-left: 0;
     justify-content: center;
   }
+  /deep/ .el-badge__content--primary{
+    background-color: #74A7FA;
+  }
 </style>
 <style lang="scss">
 
diff --git a/nezha-fronted/src/components/common/project/popData/lineChart.vue b/nezha-fronted/src/components/common/project/popData/lineChart.vue
index 755ed0b7a..9f29b4b99 100644
--- a/nezha-fronted/src/components/common/project/popData/lineChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/lineChart.vue
@@ -472,7 +472,8 @@
           toolbox:{
             show:false,
             top:'0',
-            showTitle:true,
+            right:'18',
+            showTitle:false,
             feature:{
               dataZoom:{
                 yAxisIndex:false,
@@ -484,14 +485,27 @@
               magicType:{
                 type:['stack'],
                 title:{
-                  stack:self.$t('overall.toolBox.stack')
+                  stack:self.$t('overall.toolBox.stack'),
                 },
                 iconStyle:{
                   borderColor:stackIconBorderColor,
                 },
                 emphasis:{
                   borderColor:stackIconChooseBorderColor,
-                }
+                },
+              },
+            },
+            tooltip: { // 和 option.tooltip 的配置项相同
+              show: true,
+              position:'top',
+              formatter: function (param) {
+                return param.title; // 自定义的 DOM 结构
+              },
+              backgroundColor:'rgba(255,255,255,0)',
+              borderColor :'rgba(255,255,255,0)',
+              textStyle: {
+                fontSize: 12,
+                color : '#439AC6'
               },
             }
           },
@@ -870,6 +884,32 @@
                     },
                   }
                 });
+              }else{
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+                  },
+                })
               }
             });
           });
@@ -1001,7 +1041,34 @@
                     },
                   }
                 });
+              }else{
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+                  },
+                })
               }
+
             });
           });
         }
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 1cd3d4c61..ed1b532e5 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -38,6 +38,14 @@
                      inactive-value="0">
           </el-switch>
         </el-form-item>
+        <!--roles-->
+        <el-form-item :label="$t('config.account.roles')">
+          <el-select @change="()=>{this.$forceUpdate()}" clearable collapse-tags multiple placeholder="" popper-class="config-dropdown" size="small" v-model="editUser.roleIds">
+            <template v-for="role in roles">
+              <el-option :label="role.i18n?$t(role.i18n):role.name" :value="role.id"></el-option>
+            </template>
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('config.account.createTime')" v-if="editUser.userId">
           <div class="right-box-form-content-txt">{{editUser.createTime}}</div>
         </el-form-item>
@@ -51,7 +59,7 @@
         <div class="right-box-line"></div>
 
         <el-form-item v-for="(notification, index) in editUser.notifications" :key="index" class="notification-item">
-          <el-select v-model="notification.scriptId" slot="label" placeholder="" popper-class="no-style-class" size="small">
+          <el-select class='form-item-title' placeholder="" popper-class="no-style-class" size="small" v-model="notification.scriptId">
             <el-option v-for="(item, i) in selectableScripts" :label="item.name" :key="i" :value="item.id" :disabled="item.disabled"></el-option>
           </el-select>
           <el-input placeholder="" v-model="notification.account" size="small" style="width: calc(100% - 37px);"></el-input>
@@ -109,7 +117,8 @@
         },
         editUser: {},
         scripts: [],
-        selectableScripts: []
+        selectableScripts: [],
+        roles:[],
       }
     },
     methods: {
@@ -171,6 +180,7 @@
           this.scripts = response.data.list;
           this.getSelectableScripts();
         });
+        this.getRoles();
         /*this.scripts = [
           {id: 1, name: "DOLBY"},
           {id: 2, name: "IMAX"},
@@ -202,7 +212,16 @@
           });
         }
       },
-
+      getRoles:function(){
+        this.roles = [];
+        this.$get("sys/role").then(response=>{
+          if (response.code  == 200){
+            this.roles = response.data.list;
+          }else{
+            this.$message.error("load roles faild")
+          }
+        })
+      },
       addNotification() {
         let scripts = this.selectableScripts.find(item => {
           return item.disabled === false;
@@ -229,6 +248,8 @@
         deep: true,
         handler(n) {
           this.editUser = JSON.parse(JSON.stringify(n));
+          this.editUser.roleIds=n.roles&&n.roles.map(t=>t.id)
+          console.log(this.editUser)
         }
       },
       "editUser.notifications": {
@@ -237,6 +258,13 @@
         handler(n) {
           this.getSelectableScripts();
         }
+      },
+      editUser:{
+        deep:true,
+        immediate:true,
+        handler(n,o){
+          console.log('editUser',n)
+        }
       }
     },
   }
@@ -264,3 +292,9 @@
     }
   }
 </style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
new file mode 100644
index 000000000..806680c3f
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="right-box right-box-menu" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="menus-edit-del"
+              type="button"
+              v-if="editMenu.id">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editMenu.id ? ($t("config.menus.editMenu") + "  ID：" + editMenu.id) : $t("config.menus.createMenu")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form :model="editMenu" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="130px" ref="menuForm" size="small">
+        <el-form-item :label="$t('config.menus.parent')" prop="parentId">
+          <tree-select :multiple="false" :options="menus" label="id" noChildrenText="" noOptionsText="" placeholder="" v-model="editMenu.parentId"></tree-select>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.type')" prop="type">
+          <el-radio-group v-model="editMenu.type">
+            <el-radio :label="1">{{$t('config.menus.menu')}}</el-radio>
+            <el-radio :label="2">{{$t('config.menus.button')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <!--name-->
+        <el-form-item :label="$t('config.menus.name')" prop="name">
+          <el-input  placeholder="" type="text" v-model="editMenu.name" ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.code')" prop="code">
+          <el-input  placeholder="" type="text" v-model="editMenu.code" ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.i18n')" prop="i18n">
+          <el-input  placeholder="" type="text" v-model="editMenu.i18n" ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.route')" prop="route">
+          <el-input  placeholder="" type="text" v-model="editMenu.route" ></el-input>
+        </el-form-item>
+        <!--<el-form-item :label="$t('config.menus.perms')" prop="perms">
+          <el-input  type="text" placeholder="" v-model="editMenu.perms" ></el-input>
+        </el-form-item>-->
+        <el-form-item :label="$t('config.menus.orderNum')" prop="orderNum">
+          <el-input-number :max="1000" :min="1" :precision="0" controls-position="right" style="width: 100%;" v-model="editMenu.orderNum" ></el-input-number>
+        </el-form-item>
+
+        <div class="right-box-sub-title">{{$t('config.menus.perms')}}
+          <button @click="addPermission" class="float-right" id="add-permission" type="button" >
+            <span><i class="nz-icon nz-icon-create-square"></i></span>
+          </button>
+        </div>
+
+        <div class="right-box-line"></div>
+
+        <el-form-item :key="index" :label="index+1+''" v-for="(permission,index) in editMenu.permissions" >
+          <el-input oninput="this.value = this.value.replace(/[,]/g,'')" placeholder="" style="width: calc(100% - 37px);" type="text" v-model="editMenu.permissions[index].value"></el-input>
+          <span @click="removePermission(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+              id="menus-esc">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+              id="menus-save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  import Treeselect from '@riophae/vue-treeselect'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  export default {
+    name: "menuBox",
+    components:{
+      'tree-select':Treeselect,
+    },
+    props: {
+      menu: Object
+    },
+    computed: {
+      isCurrentUser() {
+        return function(username) {
+          return localStorage.getItem('nz-username') == username;
+        }
+      },
+      addDisabled() {
+        let enabled = this.selectableScripts.filter(item => {
+          return !item.disabled
+        });
+        return enabled.length === 0;
+      }
+    },
+    data() {
+      return {
+        rules: { //表单校验规则
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          type: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          code: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          i18n: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          orderNum: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        editMenu: {},
+        menus:[],
+      }
+    },
+    methods: {
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      /*保存*/
+      save() {
+        this.$refs.menuForm.validate(valid => {
+          if (valid) {
+            this.editMenu.perms = this.editMenu.permissions&&this.editMenu.permissions.length>0?this.editMenu.permissions.map(t=>t.value).join(','):'';
+            delete this.editMenu.permissions;
+            if (this.editMenu.id) {
+              this.$put('sys/menu', this.editMenu).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('sys/menu', this.editMenu).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        })
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/menu/?ids=" + this.editMenu.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.esc(true);
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      addPermission:function(){
+        if(this.editMenu.permissions){
+          this.editMenu.permissions.push({value:''})
+        } else{
+          this.$set(this.editMenu,'permissions',[{value:''}])
+        }
+      },
+      removePermission:function(index){
+        this.editMenu.permissions.splice(index,1)
+      },
+      getMenus:function(){
+        this.menus = [];
+        this.$get("sys/menu").then(response=>{
+          if (response.code  == 200){
+            this.menus = response.data.list;
+            function replaceFunc(data){
+              data.forEach(t=>{
+                t.label = t.name;
+                if(t.children&&t.children instanceof Array&&t.children.length>0){
+                  replaceFunc(t.children)
+                }else{
+                  delete t.children
+                }
+              })
+            }
+            replaceFunc(this.menus)
+            this.menus = [{
+              id:0,
+              label:this.$t('config.menus.mainMenu'),
+              children:JSON.parse(JSON.stringify(this.menus))
+            }]
+          }else{
+            this.$message.error("load menu faild")
+          }
+        })
+      },
+      inputValid:function(val){
+        return val.replace(/[,]/g,'')
+        console.log(val)
+      },
+    },
+    mounted() {
+      this.getMenus();
+    },
+    watch: {
+      //将prop里的user转为组件内部对象
+      menu: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          this.editMenu = JSON.parse(JSON.stringify(n));
+          if(this.editMenu.perms&&this.editMenu.perms != ''){
+            this.$set(this.editMenu,'permissions',this.editMenu.perms.split(',').map(t=>{return {value:t};}))
+          }
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .right-box-menu .el-input-number .el-input__inner{
+
+    text-align: left !important;
+  }
+  .right-box-menu {
+    .right-box-sub-title {
+      #add-permission {
+        border: none;
+        outline: none;
+        cursor: pointer;
+
+        i {
+          font-size: 17px;
+          background-color: #f6f6f6;
+        }
+      }
+    }
+  }
+</style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
new file mode 100644
index 000000000..b14d9ab88
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="right-box right-box-role" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="roles-edit-del"
+              type="button"
+              v-if="editRole.id && !detail">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editRole.id ? ($t("config.roles.editRole") + "  ID：" + editRole.id) : $t("config.roles.createRole")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="roleForm">
+        <!--name-->
+        <el-form-item :label="$t('config.roles.name')" prop="name">
+          <el-input  maxlength="64" placeholder=""
+                    show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.roles.remark')">
+          <el-input :rows="2" size='mini' type="textarea" v-model="editRole.remark"/>
+        </el-form-item>
+
+        <el-form-item :label="$t('config.roles.permission')">
+          <!--<div class="tree-option">
+            <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
+            <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
+          </div>-->
+          <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox>
+            <div slot-scope="{node, data}" >
+              <span>
+                <i class="el-icon-menu" v-if="data.type == '1'"></i>
+                <i class="el-icon-edit" v-if="data.type == '2'"></i>
+              </span>
+              {{data.name}}
+            </div>
+          </el-tree>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns" v-if="!detail">
+      <button @click="esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+              id="roles-esc">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+              id="roles-save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "roleBox",
+    props: {
+      role: Object,
+      detail:Boolean,
+    },
+    computed: {
+    },
+    data() {
+      return {
+        rules: { //表单校验规则
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        editRole: {},
+        menus:[],
+        selectAllFlag:false,
+        expandAllFlag:true,
+      }
+    },
+    methods: {
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      /*保存*/
+      save() {
+        this.$refs.roleForm.validate(valid => {
+          if (valid) {
+            if (this.editRole.id) {
+              this.$put('sys/role', this.editRole).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('sys/role', this.editRole).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        })
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/role/?ids=" + this.editRole.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.esc(true);
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      getMenus:function(){
+        this.menus = [];
+        if(this.editRole.id){
+          this.$get("sys/role/menu/"+this.editRole.id).then(response=>{
+            if(response.code == 200){
+              this.menus = response.data.menus;
+              this.editRole.menuIds = response.data.selectedIds;
+              if(this.$refs.menuTree){
+                this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds,true);
+              }
+            }else{
+              this.$message.error("load menu faild")
+            }
+          })
+        }else{
+          this.$get("sys/menu").then(response=>{
+            if (response.code  == 200){
+              this.menus = response.data.list;
+            }else{
+              this.$message.error("load menu faild")
+            }
+          })
+        }
+      },
+      labelFormatter:function(data,node){
+        return data&&data.i18n?this.$t(data.i18n):data.name;
+      },
+      selectChange:function(data,isCheck,childIsCheck){
+        if(this.$refs.menuTree){
+          this.editRole.menuIds=this.$refs.menuTree.getCheckedKeys(true);
+        }
+      },
+      selectAllOrNone:function(){
+        if(this.$refs.menuTree){
+          if(!this.selectAllFlag){
+            this.$refs.menuTree.setCheckedNodes(this.menus);
+          }else{
+            this.$refs.menuTree.setCheckedNodes([]);
+          }
+          this.selectAllFlag = !this.selectAllFlag;
+        }
+      },
+      expandAllOrNone:function(){
+        this.expandAllFlag = !this.expandAllFlag;
+        let $self=this;
+        if(this.$refs.menuTree){
+          this.menus.forEach(t=>{
+            $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag;
+          })
+        }
+      }
+    },
+    mounted() {
+      this.getMenus();
+    },
+    watch: {
+      //将prop里的user转为组件内部对象
+      role: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          this.editRole = JSON.parse(JSON.stringify(n));
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .right-box-role .tree-border{
+    margin-top: 5px;
+    border: 1px solid #e5e6e7;
+    background: #fff none;
+    border-radius: 4px;
+    /*margin-top: 40px;*/
+  }
+  .right-box-role .tree-option{
+    float: right;
+  }
+  .right-box-role .option-btn{
+    margin: 6px 0 0 7px;
+  }
+  .right-box-role .btn-active{
+    color: #ee9d3f;
+    font-weight: bold;
+    border-color: #ee9d3f !important;
+  }
+</style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index c610d48f8..4150863bb 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -2,6 +2,19 @@
   .account {
     height: 100%;
   }
+  .account .account-role-item{
+    background-color: #409eff;
+    border: 1px solid #409eff;
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    border-radius: 4px;
+    display: inline-block;
+    box-sizing: content-box;
+    padding:3px;
+    margin-right: 3px;
+    color: white;
+  }
 </style>
 <template>
   <div class="account">
@@ -72,6 +85,16 @@
               &nbsp;
               <span :id="'account-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'account_delete'"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
+            <template v-if="item.prop == 'roles'">
+              <template v-if="scope.row[item.prop]">
+                <template  v-for="role in scope.row[item.prop]">
+                  <div class="account-role-item" v-if="role"><span>{{role.i18n?$t(role.i18n):role.name}}</span></div>
+                </template>
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
             <span v-else-if="item.prop == 'lang'">
                 {{scope.row[item.prop] == 'en' ? 'English' : ''}}
                 {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
@@ -169,6 +192,7 @@
           status: '1',
           createTime: '',
           receiver: [],
+          roles:[],
           lang: '',
           notifications: []
         },
@@ -187,6 +211,10 @@
             label: this.$t("config.account.account"),
             prop: 'username',
             show: true,
+          }, {
+            label: this.$t("config.account.roles"),
+            prop: 'roles',
+            show: true,
           }, {
             label: 'E-mail',
             prop: 'email',
diff --git a/nezha-fronted/src/components/page/config/menus.vue b/nezha-fronted/src/components/page/config/menus.vue
new file mode 100644
index 000000000..566a97b76
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -0,0 +1,344 @@
+<style scoped>
+  .menus {
+    position: relative;
+    height: calc(100% - 50px) !important;
+  }
+</style>
+<template>
+  <div class="menus">
+    <!-- 主页面 -->
+    <div class="main-list" >
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="top-tools" >
+        <div class="top-tool-main-right" >
+          <div class="top-tool-search">
+            <search-input :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input>
+          </div>
+          <button :title="$t('overall.createMenus')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"
+                  id="menus-add" type="button">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/menu"></delete-button>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          @close="tools.showCustomTableTitle = false"
+          ref="customTableTitle"
+          v-if="tools.showCustomTableTitle"
+        ></element-set>
+      </transition>
+      <el-table
+        :data="tableData"
+        :height="mainTableHeight"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+        @sort-change="tableDataSort"
+        border
+        class="nz-table"
+        ref="menusTable"
+        row-key="id"
+        style="width: 100%;"
+        v-loading="tools.loading"
+        v-scrollBar:el-table="'large'"
+      >
+        <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="40">
+        </el-table-column>
+        <el-table-column
+          :fixed="item.fixed"
+          :key="`col-${index}`"
+          :label="item.label"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          v-for="(item, index) in tools.customTableTitle"
+          v-if="item.show"
+        >
+          <template slot="header" slot-scope="scope">
+          <span :title="item.label" class="tag-header" v-if="item.type == 'tag'"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
+          <span v-else><span>{{item.label}}</span></span>
+        </template>
+          <template :column="item" slot-scope="scope">
+            <div class="content-right-options" v-if="item.prop == 'option'">
+              <span :id="'menus-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
+              &nbsp;
+              <span :id="'menus-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
+            </div>
+            <template v-if="item.prop == 'name'">
+              <template v-if="scope.row.i18n">
+                <span>{{$t(scope.row.i18n)}}</span>
+              </template>
+              <template v-else-if="scope.row.name">
+                <span>{{scope.row.name}}</span>
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
+            <template v-else-if="item.prop == 'type'">
+              <span>{{scope.row[item.prop] == 2?$t('config.menus.button'):$t('config.menus.menu')}}</span>
+            </template>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" width="28">
+          <template :resizable="false" slot="header" slot-scope="scope">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="$toTop('ps', 0)" class="to-top" v-show="tools.showTopBtn "><i class="nz-icon nz-icon-top"></i></button>
+    </div>
+    <transition name="right-box">
+      <menu-box :menu="menu" @close="closeRightBox" v-if="rightBox.show"></menu-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import deleteButton from "../../common/deleteButton";
+  import menuBox from '../../common/rightBox/menuBox';
+
+  export default {
+    name: "menus",
+    components: {
+      'menu-box': menuBox,
+      'delete-button':deleteButton,
+    },
+    data() {
+      return {
+        //侧滑
+        rightBox: {
+          show: false,
+        },
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showTopBtn: false, //显示To top按钮
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        batchDeleteObjs:[],
+        menu: {},
+
+        tableId: 'menusTable', //需要分页的table的id，用于记录每页数量
+        blankMenu: { //空白对象
+          "name": "",
+          "code": "",
+          "i18n": "",
+          "parentId": 0,
+          "type": 1,
+          "route": "",
+          "orderNum": 1,
+          "perms": "",
+        },
+        pageObj: { //分页对象
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        tableTitle: [ //原table列
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("config.menus.name"),
+            prop: 'name',
+            show: true,
+          }, {
+            label: this.$t("config.menus.code"),
+            prop: 'code',
+            show: true,
+          }, {
+            label: this.$t("config.menus.i18n"),
+            prop: 'i18n',
+            show: true,
+          },{
+            label: this.$t("config.menus.type"),
+            prop: 'type',
+            show: true,
+          },{
+            label: this.$t("config.menus.route"),
+            prop: 'route',
+            show: true,
+          },{
+            label: this.$t("config.menus.perms"),
+            prop: 'perms',
+            show: true,
+          },{
+            label: this.$t("config.menus.orderNum"),
+            prop: 'orderNum',
+            show: true,
+          },{
+            label: this.$t('config.menus.option'),
+            prop: 'option',
+            show: true,
+            width: 120,
+            fixed: "right"
+          }
+        ],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 10,
+            name: "ID",
+            type: 'input',
+            label: "id",
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+      }
+    },
+    methods: {
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.getTableData();
+        }
+      },
+      edit(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.menu = JSON.parse(JSON.stringify(u));
+        this.rightBox.show = true;
+      },
+      del(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/menu?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      getTableData() {
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.tools.loading = true;
+        this.$get('sys/menu', this.searchLabel).then(response => {
+          this.tools.loading = false;
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+            this.tools.loading = false;
+          }
+        })
+      },
+      add() {
+        this.menu = this.newMenu();
+        this.rightBox.show = true;
+      },
+      esc() {
+        this.rightBox.show = false;
+      },
+      newMenu() {
+        return JSON.parse(JSON.stringify(this.blankMenu));
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search(searchObj) {
+        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(this.$refs.menusTable){
+          this.$refs.menusTable.bodyWrapper.scrollTop = 0;
+        }
+        this.getTableData();
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy = '';
+        if(item.order === 'ascending') {
+          orderBy = item.prop;
+        }
+        if(item.order === 'descending') {
+          orderBy = '-' + item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+      plpsscrolly(el,self){
+        if (el._ps_.scrollbarYTop > 50) {
+          self.tools.showTopBtn = true;
+          self.tools.tableHover = true;
+        } else {
+          self.tools.showTopBtn = false;
+          self.tools.tableHover = true;
+        }
+      },
+
+    },
+    computed: {
+    },
+    watch: {
+    },
+    created(){
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+    },
+    mounted() {
+      //初始化表头
+      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
+      this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        }
+      });
+    },
+    beforeDestroy(){
+      let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
+      if (el._ps_) {
+        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        el._ps_.destroy();
+      }
+    }
+  }
+</script>
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
new file mode 100644
index 000000000..1d8cc0e06
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -0,0 +1,325 @@
+<style scoped>
+  .roles {
+    height: 100%;
+  }
+</style>
+<template>
+  <div class="roles">
+    <!-- 主页面 -->
+    <div class="main-list" >
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="top-tools" >
+        <div class="top-tool-main-right" >
+          <div class="top-tool-search">
+            <search-input :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input>
+          </div>
+          <button :title="$t('overall.createRoles')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"
+                  id="roles-add" type="button">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/role"></delete-button>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          @close="tools.showCustomTableTitle = false"
+          ref="customTableTitle"
+          v-if="tools.showCustomTableTitle"
+        ></element-set>
+      </transition>
+      <el-table
+        :data="tableData"
+        :height="mainTableHeight"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+        @sort-change="tableDataSort"
+        border
+        class="nz-table"
+        ref="rolesTable"
+        style="width: 100%;"
+        v-loading="tools.loading"
+        v-scrollBar:el-table="'large'"
+      >
+        <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="40">
+        </el-table-column>
+        <el-table-column
+          :fixed="item.fixed"
+          :key="`col-${index}`"
+          :label="item.label"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          v-for="(item, index) in tools.customTableTitle"
+          v-if="item.show"
+        >
+          <template slot="header" slot-scope="scope">
+          <span :title="item.label" class="tag-header" v-if="item.type == 'tag'"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
+          <span v-else><span>{{item.label}}</span></span>
+        </template>
+          <template :column="item" slot-scope="scope">
+            <div class="content-right-options" v-if="item.prop == 'option'">
+              <template v-if="scope.row.buildIn != 1">
+                <span :id="'roles-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
+                &nbsp;
+                <span :id="'roles-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
+              </template>
+              <template v-else>
+                <span :id="'roles-detail-'+scope.row.id" :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-view"></i></span>
+              </template>
+            </div>
+            <template v-if="item.prop == 'name'">
+              <template v-if="scope.row.i18n">
+                <span>{{$t(scope.row.i18n)}}</span>
+              </template>
+              <template v-else-if="scope.row.name">
+                <span>{{scope.row.name}}</span>
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" width="28">
+          <template :resizable="false" slot="header" slot-scope="scope">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="$toTop('ps', 0)" class="to-top" v-show="tools.showTopBtn "><i class="nz-icon nz-icon-top"></i></button>
+    </div>
+    <transition name="right-box">
+      <role-box :detail="rightBox.detail" :role="role" @close="closeRightBox" v-if="rightBox.show"></role-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import deleteButton from "../../common/deleteButton";
+  import roleBox from '../../common/rightBox/roleBox';
+
+  export default {
+    name: "roles",
+    components: {
+      'role-box': roleBox,
+      'delete-button':deleteButton,
+    },
+    data() {
+      return {
+        //侧滑
+        rightBox: {
+          show: false,
+          detail:false
+        },
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showTopBtn: false, //显示To top按钮
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        batchDeleteObjs:[],
+        role: {},
+
+        tableId: 'rolesTable', //需要分页的table的id，用于记录每页数量
+        blankRole: { //空白对象
+
+        },
+        pageObj: { //分页对象
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        tableTitle: [ //原table列
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("config.roles.name"),
+            prop: 'name',
+            show: true,
+          }, {
+            label: this.$t("config.roles.remark"),
+            prop: 'remark',
+            show: true,
+          }, {
+            label: this.$t('config.roles.option'),
+            prop: 'option',
+            show: true,
+            width: 120,
+            fixed: "right"
+          }
+        ],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 10,
+            name: this.$t('config.roles.name'),
+            type: 'input',
+            label: this.$t('config.roles.name'),
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+      }
+    },
+    methods: {
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.getTableData();
+        }
+      },
+      edit(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.role = JSON.parse(JSON.stringify(u));
+        this.rightBox.show = true;
+        this.rightBox.detail=false;
+      },
+      del(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/role?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      getTableData() {
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.tools.loading = true;
+        this.$get('sys/role', this.searchLabel).then(response => {
+          this.tools.loading = false;
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+            this.tools.loading = false;
+          }
+        })
+      },
+      add() {
+        this.role = this.newRole();
+        this.rightBox.show = true;
+        this.rightBox.detail=false;
+      },
+      esc() {
+        this.rightBox.show = false;
+        this.rightBox.detail=false;
+      },
+      detail:function(data){
+        this.role = JSON.parse(JSON.stringify(data))
+        this.rightBox.show = true;
+        this.rightBox.detail=true;
+      },
+      newRole() {
+        return JSON.parse(JSON.stringify(this.blankRole));
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search(searchObj) {
+        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(this.$refs.rolesTable){
+          this.$refs.rolesTable.bodyWrapper.scrollTop = 0;
+        }
+        this.getTableData();
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy = '';
+        if(item.order === 'ascending') {
+          orderBy = item.prop;
+        }
+        if(item.order === 'descending') {
+          orderBy = '-' + item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+      plpsscrolly(el,self){
+        if (el._ps_.scrollbarYTop > 50) {
+          self.tools.showTopBtn = true;
+          self.tools.tableHover = true;
+        } else {
+          self.tools.showTopBtn = false;
+          self.tools.tableHover = true;
+        }
+      },
+
+    },
+    computed: {
+    },
+    watch: {
+    },
+    created(){
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+    },
+    mounted() {
+      //初始化表头
+      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
+      this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        }
+      });
+    },
+    beforeDestroy(){
+      let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
+      if (el._ps_) {
+        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        el._ps_.destroy();
+      }
+    }
+  }
+</script>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index e81d5b6c3..c96e647e2 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -58,196 +58,284 @@
   .save-chart-box{
     z-index: 2900;
   }
+  .mc{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 410;
+  }
+  /deep/ .el-color-picker{
+    position: absolute;
+  }
+  .range /deep/ .el-color-picker{
+   left: -17px;
+  }
+  .color-content{
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    position: absolute;
+    top: -280px;
+    left: 140px;
+  }
+  .color-tab{
+    position: absolute;
+    top: -268px;
+    left: -14px;
+    height: 28px;
+    border-radius: 5px 5px 0 0;
+    width: 312px;
+    border: 1px solid #EBEEF5;
+    border-bottom: none;
+    background-color: #FFF;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  }
+  .color-tab div{
+    text-align: center;
+    flex: 1;
+    color: #909399;
+    transition: all .3s cubic-bezier(.645,.045,.355,1);
+    background: #E4E7ED;
+    cursor: pointer;
+  }
+  .color-tab div:first-child{
+    border-right-color: #DCDFE6;
+  }
+  .color-tab div:hover{
+    color: #409EFF;
+  }
+  .color-tab .color-active{
+    color: #409EFF;
+    background-color: #FFF;
+  }
+  .color{
+    position: relative;
+  }
+  .color-show{
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+  }
+  .color-show-left{
+    width: 28px;
+    height: 28px;
+    border-radius: 5px;
+    text-align: center;
+    line-height: 28px;
+  }
+  .color-arrows{
+    color: #fff;
+    font-weight: bold;
+  }
+  .color-arrows .nz-icon{
+    font-size: 12px;
+  }
 </style>
 <template key="chartBox">
-  <div v-clickoutside="clickOutside" class="right-box right-box-add-chart z-top right-box-chart" :class="boxClass">
-    <transition name="right-box">
-      <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
-    </transition>
+  <div @click.self="clickOutside" class="mc">
+    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart">
+      <transition name="right-box">
+        <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
+      </transition>
 
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-      </button>
-    </div>
-    <!-- end--顶部按钮-->
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns right-box-form-delete">
+        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">
+          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+        </button>
+      </div>
+      <!-- end--顶部按钮-->
 
-    <!-- begin--标题-->
-    <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
-    <!-- end--标题-->
+      <!-- begin--标题-->
+      <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
+      <!-- end--标题-->
 
-    <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box" ref="scrollbar">
-      <el-form class="right-box-form  right-box-form-left" :model="editChart" label-width="120px" label-position="right" :rules="rules" ref="chartForm">
-        <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'dashboard' && showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
-          <el-autocomplete
-            :fetch-suggestions="panelSuggestion"
-            v-model.trim="editChart.panelName"
-            placeholder=""
-            size="small"
-            value-key="name"
-            v-if="!editChart.id"
-            @input="inputPanel"
-            popper-class="chart-box-autocomplete no-style-class"
-          >
-          </el-autocomplete>
-          <el-input size="small" v-if="editChart.id" readonly="readonly" :value="editChart.panelName"></el-input>
+      <!-- begin--表单-->
+      <el-scrollbar class="right-box-form-box" ref="scrollbar">
+        <el-form :model="editChart" :rules="rules" class="right-box-form  right-box-form-left" label-position="right" label-width="120px" ref="chartForm">
+          <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'dashboard' && showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
+            <el-autocomplete
+              :fetch-suggestions="panelSuggestion"
+              @input="inputPanel"
+              placeholder=""
+              popper-class="chart-box-autocomplete no-style-class"
+              size="small"
+              v-if="!editChart.id"
+              v-model.trim="editChart.panelName"
+              value-key="name"
+            >
+            </el-autocomplete>
+            <el-input :value="editChart.panelName" readonly="readonly" size="small" v-if="editChart.id"></el-input>
 
-        </el-form-item>
-        <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
-          <el-input size="small" maxlength="64" show-word-limit v-model="editChart.title"></el-input>
-        </el-form-item>
+          </el-form-item>
+          <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
+            <el-input maxlength="64" show-word-limit size="small" v-model="editChart.title"></el-input>
+          </el-form-item>
 
-        <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
-        <div style="margin-bottom: 20px;width: 100%"></div>
+          <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
+          <div style="margin-bottom: 20px;width: 100%"></div>
 
-        <!-- type unit start-->
-        <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="type" class="half-form-item">
-          <el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-small" v-model="editChart.type" placeholder="" size="mini">
-            <el-option v-for="item in chartTypeList" :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>
+          <!-- type unit start-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
+            <el-select @change="chartTypeChange" class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.type" value-key="chartType">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item" v-show="editChart.type !='text'">
-          <el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"  style="width: 100%"
-                       :options="unitOptions"
-                       :props="{ expandTrigger: 'hover',emitPath:false }"
-                       :show-all-levels="false"
-                       v-model="editChart.unit"
-                       @change="unitSelected"
-          >
-          </el-cascader>
-        </el-form-item>
-        <!--type unit end-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text'">
+            <el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected"  filterable
+                         placeholder=""
+                         popper-class="dc-dropdown"
+                         size="mini"
+                         style="width: 100%"
+                         v-model="editChart.unit"
+            >
+            </el-cascader>
+          </el-form-item>
+          <!--type unit end-->
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.width')" prop="span" class="half-form-item">
-          <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="editChart.span" placeholder="" size="mini">
-            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-            </el-option>
-          </el-select>
-        </el-form-item>
+          <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
+            <el-select class="right-box-row-with-btn"  placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan">
+              <el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
+                <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight"  class="half-form-item">
-          <el-autocomplete
-            v-model="editChart.height"
-            :fetch-suggestions="querySearch"
-            placeholder=""
-            size="mini"
-            popper-class="popper-z-index no-style-class"
-            @select="handleSelect">
-            <template slot-scope="{ item }">
-              <div class="name">{{ item }}</div>
-            </template>
-          </el-autocomplete>
-          <span class="nz-input-append">px</span>
-        </el-form-item>
+          <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item"  prop="hight">
+            <el-autocomplete
+              :fetch-suggestions="querySearch"
+              @select="handleSelect"
+              placeholder=""
+              popper-class="popper-z-index no-style-class"
+              size="mini"
+              v-model="editChart.height">
+              <template slot-scope="{ item }">
+                <div class="name">{{ item }}</div>
+              </template>
+            </el-autocomplete>
+            <span class="nz-input-append">px</span>
+          </el-form-item>
 
-        <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
-          <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="editChart.param.url"></el-input>
-        </el-form-item>
+          <el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl">
+            <el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url"></el-input>
+          </el-form-item>
 
-        <el-form-item  v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'" :label='"Null value"' prop="nullType"  class="half-form-item">
-          <el-select class="right-box-row-with-btn"  popper-class="chart-box-dropdown-small" v-model="editChart.param.nullType" placeholder="" size="mini" @change="$forceUpdate()">
-            <el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
+          <el-form-item  :label='"Null value"' class="half-form-item" prop="nullType"  v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'">
+            <el-select @change="$forceUpdate()"  class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.param.nullType">
+              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in nullTypeList"></el-option>
+            </el-select>
+          </el-form-item>
 
-        <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item">
-          <el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
-        </el-form-item>
+          <el-form-item :label='$t("dashboard.panel.chartForm.threshold")' class="half-form-item" prop="param.threshold"  v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
+            <el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
+          </el-form-item>
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
-          <el-switch class="exporter-switch" v-model="editChart.param.last" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
-        </el-form-item>
+          <el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
+            <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last"></el-switch>
+          </el-form-item>
 
-        <!--<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">-->
+          <!--<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">-->
           <!--<el-switch class="exporter-switch" v-model="editChart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>-->
-        <!--</el-form-item>-->
+          <!--</el-form-item>-->
 
-        <div v-if="!isUrl&&!isAlert&& editChart.type != 'text'" class="right-box-sub-title" style="margin-bottom: 20px">
-          <span>{{$t('alert.config.expr')}}</span>
-          <span v-if="!isSingleStat" style="height: 19px;display: inline-block;line-height: 1;" class="float-right" @click="addExpression">
+          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'">
+            <span>{{$t('alert.config.expr')}}</span>
+            <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat">
             <span class="create-square-box">
               <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
             </span>
           </span>
-        </div>
-        <div v-if="editChart.type == 'text'" class="right-box-sub-title" style="margin-bottom: 20px">
-          <span>{{$t('dashboard.panel.chartForm.content')}}</span>
-        </div>
-        <div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
-        <div v-if="!isUrl" style="width: 100%"></div>
+          </div>
+          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="editChart.type == 'text'">
+            <span>{{$t('dashboard.panel.chartForm.content')}}</span>
+          </div>
+          <div class="right-box-sub-title" v-if="isAlert">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
+          <div style="width: 100%" v-if="!isUrl"></div>
 
-        <el-row v-if="isAlert" class="element-item" style="width: calc(100% - 108px);margin-left: 108px">
-          <alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
-        </el-row>
-
-        <el-row v-if="!isUrl &&!isAlert && editChart.type != 'text'" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-          <promql-input
-            :ref="'promql-'+(index-1)"
-            :id="promqlKeys[index-1]"
-            :key="promqlKeys[index-1]"
-            :expression-list="expressions"
-            :index="index-1"
-            :styleType="2"
-            :plugins="['metric-selector', 'metric-input', 'remove']"
-            @change="expressionChange"
-            @removeExpression="removeExpression"
-            :showRemove="false"
-          ></promql-input>
-<!--
-          <promql-input
-            :ref="'promql-'+(index-1)"
-            :id="promqlKeys[index-1]"
-            :key="promqlKeys[index-1]"
-            :expression-list="expressions"
-            :metric-options="metricOptions"
-            :metric-store="metricStore"
-            :index="index-1"
-            :styleType="2"
-            :plugins="['metric-selector', 'metric-input', 'remove']"
-            @change="expressionChange"
-            @removeExpression="removeExpression"
-            :showRemove="false"
-          ></promql-input>
--->
-          <el-row>
-            <template v-if="editChart.type != 'singleStat'">
-              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
-                <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
-                  <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
-                </el-popover>
-              </el-col>
-              <el-col style="width: calc(100% - 120px);">
-                <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
-              </el-col>
-            </template>
-            <template v-else>
-              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666" class="required-marker">
-                <label >{{$t('dashboard.panel.chartForm.statistics')}}</label>&nbsp;
-              </el-col>
-              <el-col style="width: calc(100% - 120px);">
-                <el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">
-                  <el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">
-                    <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-                  </el-option>
-                </el-select>
-              </el-col>
-            </template>
+          <el-row class="element-item" style="width: calc(100% - 108px);margin-left: 108px" v-if="isAlert">
+            <alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
           </el-row>
-          <span class="nz-icon-minus-medium nz-icon-minus-position">
+
+          <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'">
+            <promql-input
+              :expression-list="expressions"
+              :id="promqlKeys[index-1]"
+              :index="index-1"
+              :key="promqlKeys[index-1]"
+              :plugins="['metric-selector', 'metric-input', 'remove']"
+              :ref="'promql-'+(index-1)"
+              :showRemove="false"
+              :styleType="2"
+              @change="expressionChange"
+              @removeExpression="removeExpression"
+            ></promql-input>
+            <!--
+                      <promql-input
+                        :ref="'promql-'+(index-1)"
+                        :id="promqlKeys[index-1]"
+                        :key="promqlKeys[index-1]"
+                        :expression-list="expressions"
+                        :metric-options="metricOptions"
+                        :metric-store="metricStore"
+                        :index="index-1"
+                        :styleType="2"
+                        :plugins="['metric-selector', 'metric-input', 'remove']"
+                        @change="expressionChange"
+                        @removeExpression="removeExpression"
+                        :showRemove="false"
+                      ></promql-input>
+            -->
+            <el-row>
+              <template v-if="editChart.type != 'singleStat'">
+                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" trigger="hover" width="150">
+                    <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 120px);">
+                  <el-input size="small" type="text" v-model="legends[index-1]"></el-input>
+                </el-col>
+              </template>
+              <template v-else>
+                <el-col class="required-marker" style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  <label >{{$t('dashboard.panel.chartForm.statistics')}}</label>&nbsp;
+                </el-col>
+                <el-col style="width: calc(100% - 120px);">
+                  <el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="statistics">
+                    <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
+                      <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                    </el-option>
+                  </el-select>
+                </el-col>
+              </template>
+            </el-row>
+            <span class="nz-icon-minus-medium nz-icon-minus-position">
             <i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
           </span>
         </el-row>
         <!--value mapping start-->
         <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
-          <span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
+          <span>
+            {{$t('dashboard.panel.chartForm.valMapping.name')}}
+            <el-popover  placement="top" trigger="hover" width="275">
+              <div style="white-space: pre-wrap;">{{$t('dashboard.panel.chartForm.valueMappingTip')}}</div>
+              <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+            </el-popover>
+          </span>
           <span  class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
         </div>
         <div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
@@ -258,18 +346,47 @@
           </el-radio-group>
         </el-form-item>
         <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'">
-          <template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
+          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
             <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
               <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
             </el-form-item>
             <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other  half-form-item-other-two">
-              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);"></el-input>
+              <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text"></el-input>
+              <!--颜色选择器 start-->
+              <div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
+                <div :style="{background:mapping.color.bac}" class="color-show-left">
+                     <span :style="{color:mapping.color.text}" class="color-arrows">
+                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                    T
+                </span>
+                </div>
+              </div>
+              <div class="color-content" ref="color-content">
+                <el-color-picker
+                  :ref="'colorPickerBac'+index"
+                  @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
+                  v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
+                >
+                </el-color-picker>
+                <!--<el-color-picker-->
+                <!--v-model="mapping.color.text"-->
+                <!--:ref="'colorPickerText'+index"-->
+                <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
+                <!--&gt;-->
+                <!--</el-color-picker>-->
+              </div>
+              <div class="color-tab" v-show="showPicker[index].bac ||  showPicker[index].text">
+                <div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
+                <div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
+              </div>
+              <!--颜色选择器 end-->
               <span  @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
             </el-form-item>
           </template>
         </template>
         <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'">
-          <template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
+          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
             <div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
               <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
                 <el-input size="mini" type="input" v-model="mapping.from"></el-input>
@@ -278,8 +395,37 @@
                 <el-input size="mini" type="input" v-model="mapping.to"></el-input>
               </el-form-item>
             </div>
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other-two">
-              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);" ></el-input>
+            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
+              <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text" ></el-input>
+              <!--颜色选择器 start-->
+              <div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
+                <div :style="{background:mapping.color.bac}" class="color-show-left">
+                     <span :style="{color:mapping.color.text}" class="color-arrows">
+                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                    T
+                </span>
+                </div>
+              </div>
+              <div class="color-content" ref="color-content">
+                <el-color-picker
+                  :ref="'colorPickerBac'+index"
+                  @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
+                  v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
+                >
+                </el-color-picker>
+                <!--<el-color-picker-->
+                <!--v-model="mapping.color.text"-->
+                <!--:ref="'colorPickerText'+index"-->
+                <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
+                <!--&gt;-->
+                <!--</el-color-picker>-->
+              </div>
+              <div class="color-tab" v-show="showPicker[index].bac ||  showPicker[index].text">
+                <div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
+                <div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
+              </div>
+              <!--颜色选择器 end-->
               <span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus"  style="color: #EC7F66"></i></span>
             </el-form-item>
           </template>
@@ -287,7 +433,7 @@
 
         <!--value mapping end-->
         <template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
-          <div class="right-box-sub-title" >
+          <div  class="right-box-sub-title" >
             <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
           </div>
           <div style="margin-bottom: 20px; width: 100%" ></div>
@@ -311,8 +457,8 @@
           <rich-text-editor ref="richTextEditor" :edit-data="editChart.param.text"></rich-text-editor>
         </template>
 
-      </el-form>
-    </el-scrollbar>
+        </el-form>
+      </el-scrollbar>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
@@ -462,6 +608,7 @@
         sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
         textShow:false,
         metricOptions: [],
+        showPicker:[],
         //metricStore: []
       }
     },
@@ -1132,7 +1279,7 @@
         param.last=0;
         param.url='';
         param.threshold='';
-        param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
+        param.valueMapping={type:'text',mapping:[{value:'',text:'',color:{bac:'#fff',text:'#000'}}]};
         param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
         param.nullType='connected';
         this.$set(this.editChart, "param", param);
@@ -1189,9 +1336,10 @@
             statistics:'',
             valueMapping:{
               type:'value',
-              mapping:[{text:'',value:''}]
+              mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
             }
           }
+          this.showPicker=[{bac:false,text:false}];
         }else {
           this.setIsOtherChart();
           if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
@@ -1202,9 +1350,10 @@
               statistics:'',
               valueMapping:{
                 type:'value',
-                mapping:[{text:'',value:''}]
+                mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
               }
             }
+            this.showPicker=[{bac:false,text:false}];
           }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
@@ -1283,6 +1432,7 @@
                 }
                 params.param.nullType=this.editChart.param.nullType;
                 params.param.legendValue=this.editChart.param.legendValue;
+                params.param.last=this.editChart.param.last;
               } else {
                 delete params.param.threshold;
                 delete params.param.nullType;
@@ -1372,18 +1522,66 @@
       },
       valueMappingChange:function(value){
         if(this.editChart.param.valueMapping.type == 'value'){
-          this.editChart.param.valueMapping.mapping =[{text:'',value:''}];
+          this.editChart.param.valueMapping.mapping =[{text:'',value:'',color:{bac:'#fff',text:'#000'}}];
+          this.showPicker=[{bac:false,text:false}]
         }else{
-          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:''}];
+          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}}];
+          this.showPicker=[{bac:false,text:false}]
         }
       },
       addMapping:function(){
         if(this.editChart.param.valueMapping.type == 'value'){
-          this.editChart.param.valueMapping.mapping .push({text:'',value:''});
+          this.editChart.param.valueMapping.mapping .push({text:'',value:'',color:{bac:'#fff',text:'#000'}});
+          this.showPicker.push({bac:false,text:false})
         }else{
-          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:''});
+          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}});
+          this.showPicker.push({bac:false,text:false})
         }
       },
+      colorPickerClick(index){
+        if(this.showPicker[index].bac|| this.showPicker[index].text){//再次点击关闭
+          this.showPicker[index].bac=false;
+          this.showPicker[index].text=false;
+          return
+        }
+        this.showPicker[index].bac=true;
+        this.$refs['colorPickerBac'+ index][0].showPicker=true;
+      },
+      changeShowPicker(index,atr){
+        this.$refs['colorPickerBac'  + index][0].showPicker=true;
+        this.showPicker[index].bac=false;
+        this.showPicker[index].text=false;
+        this.showPicker[index][atr]=true;
+        // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
+      },
+      colorChange(mapping,flag,val){
+        if(flag){
+          mapping.color['bac']=this.colorRGBtoHex(val)
+        }else{
+          mapping.color['text']=this.colorRGBtoHex(val)
+        }
+      },
+      colorRGBtoHex(color) {
+        let rgb = color.split(',');
+        let r = parseInt(rgb[0].split('(')[1]);
+        let g = parseInt(rgb[1]);
+        let b = parseInt(rgb[2].split(')')[0]);
+        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        return hex;
+      },
+      colorOut(index,e){
+        let flag=false;
+        e.path.forEach((item)=>{
+          if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
+            flag=true
+          }
+        })
+        if(flag){
+          return
+        }
+        this.showPicker[index].bac=false;
+        this.showPicker[index].text=false;
+      },
       delMapping:function(index){
         this.editChart.param.valueMapping.mapping.splice(index,1)
       },
@@ -1437,7 +1635,15 @@
         deep: true,
         immediate: true,
         handler(n) {
-          //console.log(n);
+          if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
+            n.param.valueMapping.mapping.forEach(item=>{
+              this.showPicker.push({bac:false,text:false})
+              if(!item.color){
+                item.color={bac:'#fff',text:'#000'};
+              }
+            })
+          }
+
           if(n.title){
             this.isEdit=true;
           }
@@ -1450,11 +1656,11 @@
           } else if(n.type === 'alertList'){
             this.setIsAlertList();
           } else if(n.type === 'singleStat'){
-            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
+            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]})
             this.setIsSingleStat();
           } else if(n.type  === 'table'){
             n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
-            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
+            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
           }else {
             this.setIsOtherChart();
             n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
@@ -1509,5 +1715,8 @@
   .val-mapping-type .no-fill span{
     background-color: unset !important;
   }
+  .el-color-picker__panel{
+    border-radius: 0 0 5px 5px;
+  }
 </style>
 
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index c8aedcc2f..68f3ee290 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -14,7 +14,7 @@
             <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
               <!--            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
               <!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
-              <el-input v-model="expressionList[index]"></el-input>
+              <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]"></el-input>
               <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
               <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
             </div>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index 6fa129111..ef0e0a70b 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -595,4 +595,7 @@
     }
   }
 }
+.over-num{
+  margin-left: -11px;
+}
 
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index c3c1b1583..7a00d4de2 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -26,10 +26,14 @@
           <div class="content-col-content clickable" v-loading="assetLoading" @click="jumpTo('asset')">
             <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
             <div class="content-num-box">
+              <el-tooltip :content="assetData ? assetData.totalStat.total  + '' : ''" class="item" effect="light" placement="top">
               <div class="content-col-content-num">
-                <vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total  : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total  : 0) < 1000 ? 0 : 1"></vue-countup>
+                <vue-countup :decimals="(assetData ? assetData.totalStat.total  : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(assetData ? assetData.totalStat.total  : '') | numberFormat"
+                             :start-value="0"></vue-countup>
+                <span class="over-num" v-if="(assetData ? assetData.totalStat.total  : 0) > 1000 ">+</span>
                 <span class="overview-row-unit">{{(assetData ? assetData.totalStat.total  : '') | unitFormat}}</span>
               </div>
+              </el-tooltip>
               <div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
             </div>
           </div>
@@ -38,10 +42,13 @@
           <div class="content-col-content" v-loading="projectLoading">
             <div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
             <div class="content-num-box">
+              <el-tooltip :content="projectData ? projectData.projectStat.length + '' : ''" class="item" effect="light" placement="top">
               <div class="content-col-content-num">
-                <vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
+                <vue-countup :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="over-num" v-if="(projectData ? projectData.projectStat.length : 0) > 1000 ">+</span>
                 <span class="overview-row-unit">{{(projectData ? projectData.projectStat.length  : '') | unitFormat}}</span>
               </div>
+              </el-tooltip>
               <div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
             </div>
           </div>
@@ -50,10 +57,13 @@
           <div class="content-col-content" v-loading="moduleLoading">
             <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
             <div class="content-num-box">
+              <el-tooltip :content="moduleData ? moduleData.moduleStat.length + '' : ''" class="item" effect="light" placement="top">
               <div class="content-col-content-num">
-                <vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
+                <vue-countup :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="over-num" v-if="(moduleData ? moduleData.moduleStat.length : 0) > 1000 ">+</span>
                 <span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length  : '') | unitFormat}}</span>
               </div>
+              </el-tooltip>
               <div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
             </div>
           </div>
@@ -62,10 +72,13 @@
           <div class="content-col-content" v-loading="endpointLoading">
             <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
             <div class="content-num-box">
+              <el-tooltip :content="endpointData ? endpointData.total + '' : ''" class="item" effect="light" placement="top">
               <div class="content-col-content-num">
-                <vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
+                <vue-countup :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="over-num" v-if="(endpointData ? endpointData.total : 0) > 1000 ">+</span>
                 <span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
               </div>
+              </el-tooltip>
               <div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
             </div>
           </div>
@@ -74,10 +87,13 @@
           <div class="content-col-content clickable" v-loading="alertMessageLoading" @click="jumpTo('alertList')">
             <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
             <div class="content-num-box">
+              <el-tooltip :content="alertMessageData ? alertMessageData.alertMessageTotal + '' : ''" class="item" effect="light" placement="top">
               <div class="content-col-content-num">
-                <vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup>
+                <vue-countup :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :start-value="0"></vue-countup>
+                <span class="over-num" v-if="(alertMessageData ? alertMessageData.alertMessageTotal : 0) > 1000 ">+</span>
                 <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
               </div>
+              </el-tooltip>
               <div class="content-col-content-title">{{$t("overall.alert")}}</div>
             </div>
             <div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
@@ -305,9 +321,25 @@
             if (num < 1000) {
               return num;
             } else if (num < 1000000) {
-              return (num/1000).toFixed(fixed);
+              num=num/1000;
+              num = num.toString();
+              let index = num.indexOf('.');
+              if (index !== -1) {
+                num = num.substring(0, fixed + index + 1);
+              } else {
+                num = num.substring(0);
+              }
+              return parseFloat(num).toFixed(fixed)
             } else if (num < 1000000000) {
-              return (num/1000000).toFixed(fixed);
+              num=num/1000000;
+              num = num.toString();
+              let index = num.indexOf('.');
+              if (index !== -1) {
+                num = num.substring(0, fixed + index + 1);
+              } else {
+                num = num.substring(0);
+              }
+              return parseFloat(num).toFixed(fixed)
             }
           } catch (err) {
             return 0;
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 061a3500f..8519bcdf5 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -41,6 +41,14 @@ export default new Router({
           path: '/account',
           component: resolve => require(['../components/page/config/account.vue'], resolve),
         },
+        {
+          path: '/menu',
+          component: resolve => require(['../components/page/config/menus.vue'], resolve),
+        },
+        {
+          path: '/roles',
+          component: resolve => require(['../components/page/config/roles.vue'], resolve),
+        },
         {
           path: '/promServer',
           component: resolve => require(['../components/page/config/promServer.vue'], resolve),