diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index 21d4fd8e3..2b9268073 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -65,14 +65,23 @@ export default {
       this.$emit('refresh')
     },
     editChart () {
-      this.$emit('edit-chart', this.chartInfo)
-      this.$store.dispatch('dispatchEditChart', this.chartInfo)
+      // this.$emit('edit-chart', this.chartInfo)
+      this.$store.dispatch('dispatchEditChart', {
+        chart: this.chartInfo,
+        type: 'edit'
+      })
     },
     removeChart () {
-      this.$emit('delChart', this.chartInfo)
+      this.$store.dispatch('dispatchDelChart', {
+        chart: this.chartInfo,
+        type: 'delete'
+      })
     },
     duplicate () {
-
+      this.$store.dispatch('dispatchEditChart', {
+        chart: this.chartInfo,
+        type: 'duplicate'
+      })
     },
     clickos () {
       this.dropdownMenuShow = false
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 8b9281fdd..66643baa5 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -149,9 +149,9 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading || !this.license.valid || !this.license.token) {
-        return
-      }
+      // if (this.loading || !this.license.valid || !this.license.token) {
+      //   return
+      // }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
         this.loading = true
         this.$post('/sys/login', this.loginData).then(res => {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 3087f7503..6d3e89fc9 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -171,8 +171,8 @@ export default {
           this.$put('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.esc(true)
               this.$emit('on-create-success')
+              this.esc(true)
             } else {
               this.$message.error(response.msg)
             }
@@ -181,8 +181,8 @@ export default {
           this.$post('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.esc(true)
               this.$emit('on-create-success')
+              this.esc(true)
             } else {
               this.$message.error(response.msg)
             }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index cc6cda34f..d01e1019e 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -461,7 +461,7 @@ export default {
               this.groupList = system.group
               this.selectList = system.select
             }
-            this.$refs.chartForm.clearValidate()
+            this.$refs.chartForm && this.$refs.chartForm.clearValidate()
           }
         } else {
           this.$message.error(res.msg)
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index dc7031f22..ee2becd36 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -43,7 +43,7 @@
               <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10"></pick-time>
 
               <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
-                      type="button" @click="addChart">
+                      type="button" @click="addChartBefore">
                 <i class="nz-icon-create-square nz-icon"></i>
               </button>
 
@@ -120,7 +120,7 @@
 <!--        @on-delete-success="delChartOk"-->
 <!--      ></chart-box>-->
       <chart-right-box
-        v-if="rightBox.chart.show"
+        v-if="chartRightBoxShow"
         ref="addChartModal"
         :chart="chart"
         :from="fromRoute.panel"
@@ -278,6 +278,14 @@ export default {
     chartTempBox,
     chartRightBox
   },
+  computed: {
+    chartRightBoxShow () {
+      return this.$store.getters.getShowRightBox
+    },
+    delChartFlag () {
+      return this.$store.getters.getDelChart
+    }
+  },
   methods: {
     // 刷新
     Refresh () {
@@ -355,7 +363,6 @@ export default {
       this.chart = this.newChart()
       this.chart.panelId = this.showPanel.id
       this.chart.panelName = this.showPanel.name
-      this.rightBox.chart.show = true
     },
     addChartByTemp () {
       this.chart = JSON.parse(JSON.stringify(this.blankChartTemp))
@@ -380,7 +387,6 @@ export default {
       this.chart.panelId = this.showPanel.id
       this.chart.panelName = this.showPanel.name
       this.chart.isGroup = true
-      this.rightBox.chart.show = true
     },
     newChart () {
       return JSON.parse(JSON.stringify(this.blankChart))
@@ -391,7 +397,7 @@ export default {
         this.chart = JSON.parse(JSON.stringify(data))
         this.chart.panelId = this.showPanel.id
         this.chart.panelName = this.showPanel.name
-        this.rightBox.chart.show = true
+        this.chart.id = ''
       } else {
         this.$get('visual/panel/chart/' + data.id).then(res => {
           if (res.code === 200) {
@@ -403,7 +409,6 @@ export default {
             if (!this.chart.groupId || this.chart.groupId == -1) {
               this.chart.groupId = ''
             }
-            this.rightBox.chart.show = true
           } else {
             this.$message.error(res.msg)
           }
@@ -411,7 +416,8 @@ export default {
       }
     },
     closeChartBox (refresh) {
-      this.rightBox.chart.show = false
+      // this.rightBox.chart.show = false
+      this.$store.dispatch('clearPanel')
       /* if (refresh) {
          this.getData(this.filter)
       } */
@@ -442,26 +448,7 @@ export default {
               type: 'success',
               message: this.$t('tip.deleteSuccess')
             })
-            this.rightBox.chart.show = false
-            const chartList = this.$refs.chartList.dataList
-            for (let i = 0; i < chartList.length; i++) {
-              /* if (chartList[i].id === data.id) {
-                chartList.splice(i, 1)
-              }
-              if (chartList[i].type === 'group') {
-                chartList[i].children = chartList[i].children.filter((item) => item.id !== data.id)
-              } */
-              // if(data.next != -1){
-              //   if(chartList[i].id === data.next){
-              //     nextChart = chartList[i]
-              //   }
-              // }
-              // if(data.prev != 0){
-              //   if(chartList[i].id === data.prev){
-              //     prevChart = chartList[i]
-              //   }
-              // }
-            }
+            this.getData(this.filter)
             // this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
             // if(nextChart&&prevChart){ //删除图表为中间位置
             //   prevChart.next = nextChart.id;
@@ -736,6 +723,32 @@ export default {
     },
     load () {
 
+    },
+    addChartBefore () {
+      this.$store.dispatch('dispatchEditChart', {
+        chart: '',
+        type: 'add'
+      })
+    },
+    disposeChart () {
+      const chartInfo = this.$store.getters.getChart
+      const groupId = this.$store.getters.getGroupId
+      const type = this.$store.getters.getType
+      if (type === 'add') {
+        this.addChart()
+      }
+      if (type === 'edit') {
+        this.editChart(chartInfo)
+      }
+      if (type === 'addGroupItem') {
+        this.addGroupItem(groupId)
+      }
+      if (type === 'delete') {
+        this.delChart(chartInfo)
+      }
+      if (type === 'duplicate') {
+        this.editChart(chartInfo, true)
+      }
     }
   },
   created () {
@@ -761,6 +774,24 @@ export default {
         localStorage.setItem('panelTime', JSON.stringify(n))
       }
     },
+    chartRightBoxShow: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        }
+      }
+    },
+    delChartFlag: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        }
+      }
+    },
     $route: {
       immediate: true,
       handler () {
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index e0fd8bc22..021f6cb00 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -2,7 +2,9 @@ const panel = {
   state: {
     showRightBox: false,
     chart: '',
-    delChart: false
+    delChart: false,
+    groupId: '',
+    type: ''
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -12,12 +14,20 @@ const panel = {
       state.chart = chart
     },
     setDelChart (state, flag) {
-      state.chart = flag
+      state.delChart = flag
     },
-    clean (state) {
+    setType (state, type) {
+      state.type = type
+    },
+    setGroupId (state, id) {
+      state.groupId = id
+    },
+    cleanPanel (state) {
       state.showRightBox = false
       state.chart = ''
       state.delChart = false
+      state.groupId = ''
+      state.type = ''
     }
   },
   getters: {
@@ -27,23 +37,35 @@ const panel = {
     getChart (state) {
       return state.chart
     },
+    getType (state) {
+      return state.type
+    },
+    getGroupId (state) {
+      return state.groupId
+    },
     getDelChart (state) {
       return state.delChart
     }
   },
   actions: {
-    dispatchShowRightBox (flag) {
-      this.store.commit('setShowRightBox', flag)
+    dispatchShowRightBox (store,flag) {
+      store.commit('setShowRightBox', flag)
     },
-    dispatchChart (chart) {
-      this.store.commit('setShowRightBox', chart)
+    dispatchChart (store, chart) {
+      store.commit('setShowRightBox', chart)
     },
-    dispatchDelChart (flag) {
-      this.store.commit('setChart', flag)
+    dispatchDelChart (store, playload) {
+      store.commit('setDelChart', true)
+      store.commit('setChart', playload.chart)
+      store.commit('setType', playload.type)
     },
-    dispatchEditChart (chart) {
-      this.store.commit('setShowRightBox', true)
-      this.store.commit('setChart', chart)
+    dispatchEditChart (store, playload) {
+      store.commit('setShowRightBox', true)
+      store.commit('setChart', playload.chart)
+      store.commit('setType', playload.type)
+    },
+    clearPanel (store) {
+      store.commit('cleanPanel')
     }
   }
 }