diff --git a/nezha-fronted/src/components/cli/fileDirectory.vue b/nezha-fronted/src/components/cli/fileDirectory.vue
index e13f9341d..85fff5375 100644
--- a/nezha-fronted/src/components/cli/fileDirectory.vue
+++ b/nezha-fronted/src/components/cli/fileDirectory.vue
@@ -582,7 +582,6 @@ export default {
       }
     },
     orderBy (key, type, order) {
-      console.log(key, type, order)
       let orderType = type
       if (!orderType) {
         orderType = this[key] === 'asc' ? 'desc' : 'asc'
@@ -592,7 +591,6 @@ export default {
         this[key] = 0
         this.fileList = this.oldFileList
       } else if (orderType == 'nameOrderType') {
-        console.log(3)
         this[key] = orderType
         let isDirArr = this.oldFileList.filter(item => item.isDir)
         let isRegArr = this.oldFileList.filter(item => !item.isDir)
@@ -605,7 +603,6 @@ export default {
           this.fileList = this.fileList.concat(isRegArr, isDirArr)
         }
       } else {
-        console.log(4)
         this[key] = orderType
         let isDirArr = this.oldFileList.filter(item => item.isDir)
         let isRegArr = this.oldFileList.filter(item => !item.isDir)
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 158f25ad7..83274b6bf 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -11,10 +11,9 @@ export const clickoutside = {
     setTimeout(() => {
       if (!binding.expression) return
       const unsavedChange = localStorage.getItem('nz-unsaved-change')
-      let oldValue
       try {
         el.__oldValue__ = JSON.parse(JSON.stringify(binding.value.obj))
-        el.__newValue__ =  el.__oldValue__
+        el.__newValue__ = el.__oldValue__
       } catch (e) {
 
       }
@@ -37,9 +36,9 @@ export const clickoutside = {
           if (!flag) {
             return false
           }
-          if ( el.__oldValue__) {
+          if (el.__oldValue__) {
             // const newValue = JSON.parse(JSON.stringify(binding.value.obj))
-            if (unsavedChange == 'on' && !isEqual( el.__oldValue__, el.__newValue__) && !el.isShow) {
+            if (unsavedChange == 'on' && !isEqual(el.__oldValue__, el.__newValue__) && !el.isShow) {
               el.isShow = true
               MessageBox.confirm(i18n.t('tip.confirmCancel'), {
                 confirmButtonText: i18n.t('tip.yes'),
@@ -215,10 +214,10 @@ export const cancelWithChange = {
     setTimeout(() => {
       if (!binding.value || !binding.value.obj) return
       const unsavedChange = localStorage.getItem('nz-unsaved-change')
-      const oldValue = JSON.parse(JSON.stringify(binding.value.obj))
-      el.__newValue__ = oldValue
+      el.__oldValue__ = JSON.parse(JSON.stringify(binding.value.obj))
+      el.__newValue__ = el.__oldValue__
       function domClick (e) {
-        if (unsavedChange == 'on' && !isEqual(oldValue, el.__newValue__)) {
+        if (unsavedChange == 'on' && !isEqual(el.__oldValue__, el.__newValue__)) {
           MessageBox.confirm(i18n.t('tip.confirmCancel'), {
             confirmButtonText: i18n.t('tip.yes'),
             cancelButtonText: i18n.t('tip.no'),
@@ -237,6 +236,9 @@ export const cancelWithChange = {
     }, 100)
   },
   update (el, binding, vnode) {
+    if (binding.arg && binding.arg != 'stable') {
+      el.__oldValue__ = JSON.parse(JSON.stringify(binding.value.obj))
+    }
     el.__newValue__ = binding.value.obj
   },
   unbind: function (el, binding) {
diff --git a/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue b/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
index bdd6b441f..491dec3ea 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-clickoutside="{obj: editRole, func: esc}" class="right-box right-box-role">
+  <div v-clickoutside:[isStable]="{obj: editRole, func: esc}" class="right-box right-box-role">
     <div class="right-box__header">
       <div class="header__title">{{editRole.id ? $t('config.roles.editRole') : $t('overall.createRole')}}</div>
       <div class="header__operation">
-        <span v-cancel="{obj: editRole, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
+        <span v-cancel:[isStable]="{obj: editRole, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
       </div>
     </div>
     <div class="right-box__container right-box-container__left">
@@ -23,7 +23,17 @@
               <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light 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 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}" :default-checked-keys="[312]" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
+            <el-tree
+              :data="menus"
+              :default-expand-all="expandAllFlag"
+              :props="{label:labelFormatter}"
+              :default-checked-keys="[312]"
+              class="tree-border"
+              node-key="id"
+              ref="menuTree"
+              show-checkbox id="role-box-input-menus"
+              @check="checkChange"
+            >
               <div slot-scope="{ node, data }">
               <span>
                 <i v-if="data.type == '1'" class="el-icon-menu"></i>
@@ -37,7 +47,7 @@
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{obj: editRole, func: esc}" class="footer__btn footer__btn--light">
+      <button id="asset-edit-cancel" v-cancel:[isStable]="{obj: editRole, func: esc}" class="footer__btn footer__btn--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
@@ -100,6 +110,12 @@ export default {
       }
       if (this.$refs.menuTree && this.selectedIds && this.selectedIds.length > 0) {
         this.$refs.menuTree.setCheckedKeys(this.selectedIds, true)
+        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
+        setTimeout(() => {
+          this.isStable = 'stable'
+        }, 100)
+      } else {
+        this.isStable = 'stable'
       }
     })
   },
@@ -162,6 +178,11 @@ export default {
         })
       }
     },
+    checkChange () {
+      setTimeout(() => {
+        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
+      })
+    },
     save () {
       if (this.prevent_opt.save) { return } ;
       this.prevent_opt.save = true
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 8c35fc446..42a96929d 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -8,7 +8,7 @@
       <div class="header__title" v-if="from !== 'chartTemp'">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("overall.createChart")}}</div>
       <div class="header__title" v-if="from === 'chartTemp'">{{editChart.id ? $t("dashboard.panel.editChartTempTitle") : $t("dashboard.panel.createChartTempTitle")}}</div>
       <div class="header__operation">
-        <span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
+        <span v-cancel:[isStable]="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
       </div>
     </div>
 
@@ -96,7 +96,7 @@
     </div>
     <!--底部按钮-->
     <div class="right-box__footer">
-      <button id="chart-box-esc" v-cancel="{obj:editChart,func:esc}" class="footer__btn footer__btn--light">
+      <button id="chart-box-esc" v-cancel:[isStable]="{obj:editChart,func:esc}" class="footer__btn footer__btn--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'main_edit'" class="footer__btn">
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
index bcba26ade..e6dec3f55 100644
--- a/nezha-fronted/src/components/page/config/roles.vue
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -52,7 +52,7 @@
       </template>
     </nz-data-list>
     <transition name="right-box">
-      <role-box v-if="rightBox.show" :copyFlag="copyFlag" :obj="object" @close="closeRightBox"></role-box>
+      <role-box ref="roleBox" v-if="rightBox.show" :copyFlag="copyFlag" :obj="object" @close="closeRightBox"></role-box>
     </transition>
   </div>
 </template>
@@ -77,7 +77,9 @@ export default {
       url: 'sys/role',
       tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
       blankObject: { // 空白对象
-        name: ''
+        name: '',
+        remark: '',
+        menuIds: [312]
       },
       copyFlag: false,
       searchMsg: { // 给搜索框子组件传递的信息
@@ -108,6 +110,15 @@ export default {
       this.edit(u, true)
       this.copyFlag = true
     }
+  },
+  watch: {
+    'rightBox.show': {
+      handler (n) {
+        if (!n) {
+          this.$refs.roleBox.isStable = 'instability'
+        }
+      }
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index f08818873..5d680d3e8 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -93,7 +93,6 @@ const user = {
       localStorage.setItem(`nz-user-${res.data.user.id}-theme`, currentTheme)
       const body = document.getElementsByTagName('body')[0]
       body.setAttribute('class', `theme-${currentTheme}`)
-      console.log(res)
       localStorage.setItem('timezoneOffset', moment.tz(res.data.timezone || defaultAppearance.timezone).format('Z'))
       localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
       localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)