diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 69f21f8e4..fffca3ccd 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -1,11 +1,14 @@
 import PerfectScrollbar from "perfect-scrollbar";
 import {getChart} from "./common";
-
+import MessageBox from "element-ui/packages/message-box/src/main";
+import i18n from "../i18n";
 /*弹窗点击外部后关闭*/
 const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion"]; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {
+    if(!binding.value||!binding.value.obj) return;
+    let oldValue = JSON.parse(JSON.stringify(binding.value.obj));
     function documentHandler(e) {
       if (el.contains(e.target)) {
         return false;
@@ -23,18 +26,21 @@ export const clickoutside = {
         if (!flag) {
           return false;
         }
-      }
-      // 判断指令中是否绑定了函数
-      if (binding.expression) {
-        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
-        if (binding.arg) {
-          binding.value(e, binding.arg);
-        } else {
-          if(binding.value){
-            binding.value(e);
-          }
-        }
 
+        let newValue = JSON.parse(JSON.stringify(binding.value.obj));
+        if(!isEqual(oldValue,newValue)){
+          MessageBox.confirm(i18n.t("tip.confirmCancel"), {
+            confirmButtonText: i18n.t("tip.yes"),
+            cancelButtonText: i18n.t("tip.no"),
+            type: 'warning'
+          }).then(() => {
+            if(binding.value.func){
+              binding.value.func();
+            }
+          })
+        }else{
+          binding.value.func();
+        }
       }
     }
 
@@ -48,7 +54,63 @@ export const clickoutside = {
     delete el.__vueClickOutside__;
   },
 };
+function isEqual (o1, o2) {
+  console.log(o1,o2)
+  var isEqualForInner = function (obj1, obj2) {
+    var o1 = obj1 instanceof Object;
+    var o2 = obj2 instanceof Object;
+    if (!o1 || !o2) {
+      return obj1 === obj2;
+    }
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+      return false;
+    }
 
+    for (var attr of Object.keys(obj1)) {
+
+      var t1 = obj1[attr] instanceof Object;
+      var t2 = obj2[attr] instanceof Object;
+      if (t1 && t2) {
+        if(!isEqualForInner(obj1[attr], obj2[attr])){
+          return false;
+        }
+      } else if (obj1[attr] !== obj2[attr]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return isEqualForInner(o1, o2);
+}
+export const cancelWithChange={
+  bind:function(el,binding){
+    if(!binding.value||!binding.value.obj) return;
+    let oldValue = JSON.parse(JSON.stringify(binding.value.obj));
+    function domClick(e){
+      let newValue = JSON.parse(JSON.stringify(binding.value.obj));
+      if(!isEqual(oldValue,newValue)){
+        MessageBox.confirm(i18n.t("tip.confirmCancel"), {
+          confirmButtonText: i18n.t("tip.yes"),
+          cancelButtonText: i18n.t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          if(binding.value.func){
+            binding.value.func();
+          }
+        })
+      }else{
+        binding.value.func();
+      }
+    }
+    el.__vueDomClick__ = domClick
+    el.addEventListener('click',domClick)
+  },
+  unbind:function(el,binding){
+// 解除事件监听
+    document.removeEventListener('click', el.__vueDomClick__);
+    delete el.__vueDomClick__;
+  }
+}
 // 底部上滑框窗口控制
 export const bottomBoxWindow = {
   // 鼠标拖动二级列表
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index af5dbfdea..e95a9c99d 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -405,7 +405,8 @@ const cn = {
     syncTip:"此操作可能造成原有数据或图表被覆盖，确认同步吗？",
     noImportFile:'没有可导入的文件',
     noAccess: "无访问权限",
-    confirmDuplicate:"确认复制吗？"
+    confirmDuplicate:"确认复制吗？",
+    confirmCancel:'您所做的修改将不会被保存？',
   },
   asset: {
     asset: "资产",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 26cab8383..2007c740a 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -408,7 +408,8 @@ const en = {
     syncTip:'This operation may cause the original data or chart to be overwritten. Are you sure to synchronize?',
     noImportFile:'No import file found',
     noAccess: "No access",
-    confirmDuplicate:"Are you sure to duplicate this chart?"
+    confirmDuplicate:"Are you sure to duplicate this chart?",
+    confirmCancel:'Changes you made are not saved?',
   },
   asset:{
     asset: 'Asset',
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 499a16ce1..3a946dc94 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-account" v-clickoutside="clickOutside">
+  <div class="right-box right-box-account" v-clickoutside="{obj:editUser,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" type="button" v-has="'account_delete'" v-if="editUser.userId&&editUser.userId!==1"
@@ -75,7 +75,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="account-esc"
+      <button id="account-esc" v-cancel="{obj:editUser,func:esc}"
               class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
@@ -92,7 +92,8 @@
   export default {
     name: "accountBox",
     props: {
-      user: Object
+      user: Object,
+      roles:Array
     },
     computed: {
       isCurrentUser() {
@@ -165,6 +166,7 @@
       /*关闭弹框*/
       esc(refresh) {
         this.prevent_opt.save=false;
+        console.log('cancel function ')
         this.$emit("close", refresh);
       },
       clickOutside() {
@@ -269,19 +271,6 @@
           });
         }
       },
-      getRoles:function(){
-        this.roles = [];
-        this.$get("sys/role?pageSize=-1").then(response=>{
-          if (response.code  == 200){
-            this.roles = response.data.list;
-            if(!this.editUser.userId){
-              this.editUser.roleIds = this.roles.find(t=>t.name == 'common').id;
-            }
-          }else{
-            this.$message.error("load roles faild")
-          }
-        })
-      },
       addNotification() {
         let scripts = this.selectableScripts.find(item => {
           return item.disabled === false;
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index fb43364c6..4d5e14a5f 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="()=>{showEditParamBox(false);showEditLabelsBox(false)}" v-clickoutside="clickOutside">
+  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="()=>{showEditParamBox(false);showEditLabelsBox(false)}" v-clickoutside="{obj:endpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns"></div>
     <!-- end--顶部按钮-->
@@ -291,7 +291,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-add" v-has="['asset_endpoint_save', 'project_endpoint_save']">
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index b7d9ab88c..b20304119 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
+  <div class="right-box right-box-alert-config" v-clickoutside="{obj:editAlertRule,func: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="alert-box-del" type="button" v-has="'rule_delete'" v-if="alertRule.id">
@@ -108,7 +108,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editAlertRule,func:esc}" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="alert-box-save" v-has="'rule_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 6a60178aa..f963241b0 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-asset" v-clickoutside="clickOutside">
+  <div class="right-box right-box-asset" v-clickoutside="{obj:editAsset,func:clickOutside}">
     <!--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" id="asset-edit-del" type="button" v-has="'asset_delete'" v-if="editAsset.id"
@@ -151,7 +151,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
+      <button v-cancel="{obj:editAsset,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save" v-has="'asset_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
index 72da7d4cd..ae750e008 100644
--- a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-asset" v-clickoutside="clickOutside">
+  <div class="right-box right-box-asset" v-clickoutside="{obj:editAsset,func:clickOutside}">
     <!--顶部按钮-->
     <!--<div class="right-box-top-btns right-box-form-delete">-->
     <!--<button v-if="editAsset.id" type="button" @click="del" id="asset-edit-del"-->
@@ -247,7 +247,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
+      <button v-cancel="{obj:editAsset,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save" v-has="'asset_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
index 21bfb3c2a..017ebc4d9 100644
--- a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
+  <div class="right-box right-box-cabinet" v-clickoutside="{obj:editCabinet,func: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="cab-del" type="button" v-has="'dc_cabinet_delete'" v-if="!editCabinet.id">
@@ -33,7 +33,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="cab-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editCabinet,func:esc}" id="cab-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="cab-box-save" v-has="'dc_cabinet_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index c6c930eaf..3a1496eff 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-dc" v-clickoutside="clickOutside">
+  <div class="right-box right-box-dc" v-clickoutside="{obj:editDc,func: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="dc-del" type="button" v-has="'dc_delete'" v-if="editDc.id">
@@ -79,7 +79,7 @@
 
       <!--底部按钮-->
       <div class="right-box-bottom-btns">
-        <button @click="esc" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <button v-cancel="{obj:editDc,func:esc}" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
           <span>{{$t('overall.cancel')}}</span>
         </button>
         <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="dc-box-save" v-has="'dc_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 9456afe93..83262f694 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
+  <div class="right-box right-box-edit-endpoint" v-clickoutside="{obj:editEndpoint,func: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="edit-ep-del" type="button" v-has="['project_endpoint_delete', 'asset_endpoint_delete']" v-if="editEndpoint.id">
@@ -124,7 +124,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editEndpoint,func:esc}" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-edit-save" v-has="['asset_endpoint_save', 'project_endpoint_save']" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
index a99b26cda..81de3b9b9 100644
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-menu" v-clickoutside="clickOutside">
+  <div class="right-box right-box-menu" v-clickoutside="{obj:editMenu,func: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"
@@ -64,7 +64,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+      <button v-cancel="{obj:editMenu,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
               id="menus-esc">
         <span>{{$t('overall.cancel')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index e0e83b3d6..68fcd7d6e 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-mib" v-clickoutside="clickOutside" >
+  <div class="right-box right-box-mib" v-clickoutside="{obj:editMib,func: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="mib-del" type="button" v-has="'snmp_file_delete'" v-if="editMib.id">
@@ -48,7 +48,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editMib,func:esc}" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="model-box-save" v-has="'snmp_file_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
index bbed611c7..ee8cdd8d7 100644
--- a/nezha-fronted/src/components/common/rightBox/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-model" v-clickoutside="clickOutside" @click="inputHandler">
+  <div class="right-box right-box-model" v-clickoutside="{obj:editModel,func:clickOutside}" @click="inputHandler">
     <!-- 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="model-del" type="button" v-has="'model_delete'" v-if="editModel.id">
@@ -73,7 +73,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editModel,func:esc}" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="model-box-save" v-has="['model_save', 'asset_vendor_save']" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 092481a30..7adf24ff6 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-module" v-clickoutside="clickOutside">
+  <div class="right-box right-box-module" v-clickoutside="{obj:editModule,func: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="module-del" type="button" v-has="'project_module_delete'" v-if="editModule.id">
@@ -305,7 +305,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editModule,func:esc}" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save" v-has="'project_module_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 4da68889c..8a5433bc2 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -1,6 +1,6 @@
 <template key="panelBox">
   <transition name="right-box-580">
-    <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
+    <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="{obj:panel,func:clickos}">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns right-box-form-delete">
         <button @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" type="button" v-has="'panel_delete'" v-if="panel.id != ''">
@@ -26,7 +26,7 @@
 
       <!-- begin--底部按钮-->
       <div class="right-box-bottom-btns">
-        <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <button v-cancel="{obj:panel,func:esc}" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
           <span>{{$t('overall.cancel')}}</span>
         </button>
         <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save" v-has="'panel_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index b3f0778e3..138ccd618 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-project" v-clickoutside="clickOutside">
+  <div class="right-box right-box-project" v-clickoutside="{obj:editProject,func: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="project-del" type="button" v-has="'project_delete'" v-if="project.id">
@@ -25,7 +25,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editProject,func:esc}" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save" v-has="'project_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">
diff --git a/nezha-fronted/src/components/common/rightBox/promServerBox.vue b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
index 914541ddd..f624630fc 100644
--- a/nezha-fronted/src/components/common/rightBox/promServerBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-prom" v-clickoutside="clickOutside">
+  <div class="right-box right-box-prom" v-clickoutside="{obj:editPromServer,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" type="button" v-has="'prom_delete'" v-if="editPromServer.id"
@@ -53,7 +53,7 @@
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="prom-esc"
+      <button v-cancel="{obj:editPromServer,func:esc}" id="prom-esc"
               class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
index 25741fc24..613c5449f 100644
--- a/nezha-fronted/src/components/common/rightBox/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-role" v-clickoutside="clickOutside">
+  <div class="right-box right-box-role" v-clickoutside="{obj:editRole,func: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"
@@ -47,7 +47,7 @@
     <!-- 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"
+      <button v-cancel="{obj:editRole,func:esc}" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
               id="roles-esc">
         <span>{{$t('overall.cancel')}}</span>
       </button>
@@ -138,27 +138,15 @@
       },
       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")
-            }
-          })
-        }
+
+        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;
@@ -188,8 +176,11 @@
         }
       }
     },
-    mounted() {
+    created() {
       this.getMenus();
+    },
+    mounted() {
+
     },
     watch: {
       //将prop里的user转为组件内部对象
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 9e19007bf..e80d23dc7 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-project" v-clickoutside="clickOutside" >
+  <div class="right-box right-box-project" v-clickoutside="{obj:traffic,func:clickOutside}" >
 
     <!-- begin--标题-->
     <div class="right-box-title">{{$t('config.dc.traffic.title')}}</div>
@@ -16,7 +16,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button type="button" @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button type="button" v-cancel="{obj:traffic,func:esc}" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save" type="button" v-has="'dc_trafficSetting_save'">
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 04813944d..63b7058f1 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -594,6 +594,13 @@
       },
       add() {
         this.asset = this.newAsset();
+        this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            if(this.asset.model&&!this.asset.model.type.code){
+              this.asset.model.type.code=response.data[0].code;
+            }
+          }
+        });
         this.rightBox.show = true;
       },
       batchEdit(){
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 9fff39d79..2f8f4739c 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -138,7 +138,7 @@
                   @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </transition>
     <transition name="right-box">
-      <account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
+      <account-box v-if="rightBox.show" :user="user" :roles="roles" @close="closeRightBox"></account-box>
     </transition>
   </div>
 </template>
@@ -251,6 +251,7 @@
         searchLabel: {}, //搜索参数
         scrollbarWrap: null,
         delFlag:false,
+        roles:[],
       }
     },
     methods: {
@@ -288,6 +289,9 @@
       },
       edit(u) {
         this.user = JSON.parse(JSON.stringify(u));
+        if(!this.user.userId){
+          this.user.roleIds = this.roles.find(t=>t.name == 'common').id;
+        }
         this.rightBox.show = true;
       },
       detail(u) {
@@ -340,6 +344,9 @@
       },
       add() {
         this.user = this.newUser();
+        if(!this.user.userId){
+          this.user.roleIds = this.roles.find(t=>t.name == 'common').id;
+        }
         this.rightBox.show = true;
       },
       statusChange(user) {
@@ -362,6 +369,16 @@
       newUser() {
         return JSON.parse(JSON.stringify(this.blankUser));
       },
+      getRoles:function(){
+        this.roles = [];
+        this.$get("sys/role?pageSize=-1").then(response=>{
+          if (response.code  == 200){
+            this.roles = response.data.list;
+          }else{
+            this.$message.error("load roles faild")
+          }
+        })
+      },
       pageNo(val) {
         this.pageObj.pageNo = val;
         this.getTableData();
@@ -480,6 +497,7 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
+      this.getRoles();
     },
     mounted() {
       //初始化表头
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
index fcacb5c27..f9ada3953 100644
--- a/nezha-fronted/src/components/page/config/roles.vue
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -198,8 +198,13 @@
           return ;
         }
         this.role = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-        this.rightBox.detail=false;
+        this.$get("sys/role/menu/"+this.role.id).then(response=>{
+          if(response.code == 200){
+            this.role.menuIds = response.data.selectedIds;
+            this.rightBox.show = true;
+            this.rightBox.detail=false;
+          }
+        })
       },
       del(u) {
         if(u.buildIn == 1){
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index e1f269638..c74504306 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -64,7 +64,7 @@
     height: 100vh;
     top: 0;
     left: 0;
-    z-index: 2100;
+    /*z-index: 2100;*/
   }
   /deep/ .el-color-picker{
     position: absolute;
@@ -145,8 +145,8 @@
 
 </style>
 <template key="chartBox">
-  <div @click.self="clickOutside" class="mc">
-    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart">
+  <div  class="mc">
+    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
       <transition name="right-box">
         <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
       </transition>
@@ -477,7 +477,7 @@
       </div>
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc(false)" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+      <button v-cancel="{obj:editChart,func:esc}" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="SyncSave" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-Sync" v-has:all="[`${from}_chart_save`, `${from}_chart_sync`]" v-if="showPanel.type && showPanel.type == 'model'">
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 6170d34d8..5e6eca972 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -47,6 +47,7 @@ import mibBox from "./components/common/rightBox/mibBox";
 import leftMenu from "./components/common/leftMenu";
 import pickTime from "./components/common/pickTime";
 import bus from "./libs/bus";
+import {cancelWithChange} from "./components/common/js/tools";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -203,6 +204,7 @@ Vue.use(plTable);
 Vue.use(hasPermission);
 
 /*指令*/
+Vue.directive('cancel',cancelWithChange)
 Vue.directive('clickoutside', clickoutside);
 window.resizing = false;
 window.vm = new Vue({