diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 90c29683c..321afec36 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -16,7 +16,7 @@
         <!-- asset -->
         <div v-if="from === fromRoute.asset" style="display: flex">
           <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
-          <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChart">
+          <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
           <top-tool-more-options
@@ -244,16 +244,25 @@ export default {
           enable: {
             legend: true,
             valueMapping: false,
-            thresholds: false
+            thresholds: false,
+            visibility: false
           },
           thresholdShow: true,
-          thresholds: [{ value: undefined, color: randomcolor() }]
+          thresholds: [{ value: undefined, color: randomcolor() }],
+          showHeader: 1,
+          visibility: {
+            varName: '',
+            operator: 'equal',
+            varValue: '',
+            result: 'show'
+          }
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
         panel: '',
         sync: 0,
         remark: '',
-        groupId: ''
+        groupId: '',
+        varType: ''
       },
       pageObj: {
         pageNo: 1,
@@ -347,9 +356,11 @@ export default {
     /* 图表相关操作--start */
     addChart () {
       this.chart = this.newChart()
-      this.$store.dispatch('dispatchEditChart', {
-        chart: '',
-        type: 'add'
+      this.chart.param.thresholds = [{ value: undefined, color: randomcolor() }]
+      this.chart.panelId = this.showPanel.id
+      this.chart.panelName = this.showPanel.name
+      this.$nextTick(() => {
+        this.$refs.addChartModal.isStable = 'stable'
       })
     },
     addChartByTemp () {
@@ -441,6 +452,9 @@ export default {
                 }
               })
             }
+            this.$nextTick(() => {
+              this.$refs.addChartModal.isStable = 'stable'
+            })
           } else {
             this.$message.error(res.msg)
           }
@@ -774,6 +788,12 @@ export default {
         }
       })
     },
+    addChartBefore () {
+      this.$store.dispatch('dispatchEditChart', {
+        chart: '',
+        type: 'add'
+      })
+    },
     disposeChart () {
       const chartInfo = this.$store.getters.getChart
       const groupId = this.$store.getters.getGroupId
@@ -882,6 +902,8 @@ export default {
       handler (n) {
         if (n) {
           this.disposeChart()
+        } else {
+          this.$refs.addChartModal.isStable = 'instability'
         }
       }
     },
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 15d89cee0..158f25ad7 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -13,8 +13,8 @@ export const clickoutside = {
       const unsavedChange = localStorage.getItem('nz-unsaved-change')
       let oldValue
       try {
-        oldValue = JSON.parse(JSON.stringify(binding.value.obj))
-        el.__newValue__ = oldValue
+        el.__oldValue__ = JSON.parse(JSON.stringify(binding.value.obj))
+        el.__newValue__ =  el.__oldValue__
       } catch (e) {
 
       }
@@ -37,10 +37,9 @@ export const clickoutside = {
           if (!flag) {
             return false
           }
-          if (oldValue) {
-            console.log(oldValue, el.__newValue__)
+          if ( el.__oldValue__) {
             // const newValue = JSON.parse(JSON.stringify(binding.value.obj))
-            if (unsavedChange == 'on' && !isEqual(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'),
@@ -75,6 +74,9 @@ export const clickoutside = {
     }, 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 (el, binding) {
diff --git a/nezha-fronted/src/components/common/mixin/editRigthBox.js b/nezha-fronted/src/components/common/mixin/editRigthBox.js
index 85198f626..7cf365ff7 100644
--- a/nezha-fronted/src/components/common/mixin/editRigthBox.js
+++ b/nezha-fronted/src/components/common/mixin/editRigthBox.js
@@ -9,7 +9,9 @@ export default {
         emit: ''
       },
       closeMessage: null,
-      uuid: getUUID()
+      uuid: getUUID(),
+      isStable: 'instability',
+      stableTime: null
     }
   },
   mounted () {
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 8851bf20c..daa3efd48 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj: editAlertRule, func: clickOutside}" class="right-box right-box-alert-rule">
+  <div v-clickoutside="{obj: editAlertRule, func: clickOutside}" class="right-box right-box-alert-rule" ref="rightBox">
     <div class="right-box__header">
       <!-- begin--标题-->
       <div class="header__title">{{alertRule.id ? $t("alert.config.editAlertConfig") : $t("overall.createAlertRule")}}</div>
@@ -406,7 +406,7 @@ export default {
         }
       ],
       showMetrics: true,
-      showSnmpTrap: true,
+      showSnmpTrap: false,
       showTypeSelect: false,
       editAlertRule: {},
       rules: {
@@ -664,7 +664,13 @@ export default {
           this.showTypeSelect = !!this.editAlertRule.id // 当 edit 时禁用 type下拉框
           if (n.type === 1) {
             this.editAlertRule.type = 1
+            setTimeout(() => {
+              this.showSnmpTrap = true
+            }, 150)
           } else if (n.type === 2) {
+            setTimeout(() => {
+              this.showSnmpTrap = true
+            }, 150)
             this.showMetrics = false // showMetrics 为 false 时,展示 Logs label
             this.editAlertRule.type = 2
           } else if (n.type === 3) {
@@ -680,6 +686,10 @@ export default {
               }
             })
           })
+        } else {
+          setTimeout(() => {
+            this.showSnmpTrap = true
+          }, 150)
         }
       }
     }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index d1674a492..8c35fc446 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj: editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
+  <div v-clickoutside:[isStable]="{obj: editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
     <transition v-if="from !== 'chartTemp'" name="right-box">
 <!--      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>-->
     </transition>
@@ -607,6 +607,10 @@ export default {
           }
         }
         this.editChart = obj
+        if (this.stableTime) {
+          clearTimeout(this.stableTime)
+          this.stableTime = null
+        }
       }
     },
     'editChart.type': {
diff --git a/nezha-fronted/src/components/page/alert/alertRule.vue b/nezha-fronted/src/components/page/alert/alertRule.vue
index e775a872a..8379eb3a5 100644
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -194,12 +194,13 @@ export default {
         alertName: '',
         linkObject: { id: '', name: '' },
         expr: '',
+        inr: 15,
         state: 1,
         type: 1,
         unit: 2,
         operator: '>',
         last: 60,
-        severityId: '',
+        severityId: 1,
         summary: '',
         description: '',
         method: [],
@@ -359,6 +360,7 @@ export default {
         if (response.code === 200) {
           this.object = {
             ...response.data,
+            expr: response.data.expression,
             method: response.data.method ? response.data.method.split(',').map(item => Number(item)) : [],
             schedDays: response.data.schedDays ? response.data.schedDays.split(',').map(item => Number(item)) : [],
             receiverShow: response.data.receiver ? response.data.receiver.split(',').map(item => Number(item)) : []
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 9c12f8eaf..a922edd1a 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -260,11 +260,12 @@ export default {
             result: 'show'
           }
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
         panel: '',
         sync: 0,
         remark: '',
-        groupId: ''
+        groupId: '',
+        varType: ''
       },
       pageObj: {
         pageNo: 1,
@@ -532,6 +533,9 @@ export default {
       this.chart.param.thresholds = [{ value: undefined, color: randomcolor() }]
       this.chart.panelId = this.showPanel.id
       this.chart.panelName = this.showPanel.name
+      this.$nextTick(() => {
+        this.$refs.addChartModal.isStable = 'stable'
+      })
     },
     addChartByTemp () {
       this.chart = JSON.parse(JSON.stringify(this.blankChartTemp))
@@ -556,6 +560,9 @@ export default {
       this.chart.panelId = this.showPanel.id
       this.chart.panelName = this.showPanel.name
       this.chart.isGroup = true
+      this.$nextTick(() => {
+        this.$refs.addChartModal.isStable = 'stable'
+      })
     },
     newChart () {
       return JSON.parse(JSON.stringify(this.blankChart))
@@ -607,6 +614,9 @@ export default {
                 }
               })
             }
+            this.$nextTick(() => {
+              this.$refs.addChartModal.isStable = 'stable'
+            })
           } else {
             this.$message.error(res.msg)
           }
@@ -1184,6 +1194,8 @@ export default {
       handler (n) {
         if (n) {
           this.disposeChart()
+        } else {
+          this.$refs.addChartModal.isStable = 'instability'
         }
       }
     },
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index 07041cb13..b7d09e081 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -179,9 +179,9 @@ const panel = {
       store.commit('setPanelNowTimeType', playload.nowTimeType)
     },
     dispatchEditChart (store, playload) {
-      store.commit('setShowRightBox', true)
       store.commit('setChart', playload.chart)
       store.commit('setType', playload.type)
+      store.commit('setShowRightBox', true)
     },
     dispatchHeaderH (store, playload) {
       store.commit('setHeaderH', playload.headerH)