diff --git a/nezha-fronted/src/components/common/popBox/guide.vue b/nezha-fronted/src/components/common/popBox/guide.vue
index 522c3cafa..ac5e961ee 100644
--- a/nezha-fronted/src/components/common/popBox/guide.vue
+++ b/nezha-fronted/src/components/common/popBox/guide.vue
@@ -4,6 +4,7 @@
     :visible.sync="visible"
     custom-class="guild-pop"
     width="1000px"
+    @close="close"
   >
     <div class="guide-list">
       <div ref="guideShadow" class="guide-shadow"></div>
@@ -119,7 +120,7 @@ export default {
   },
   methods: {
     close () {
-      this.visible = false
+      this.$emit('close')
     },
     enter (index) {
       this.interval = setInterval(() => {
@@ -130,13 +131,27 @@ export default {
       this.interval && clearInterval(this.interval)
     },
     downloadAgent () {
-      // TODO
+      this.$emit('close')
+      this.$router.push({
+        path: '/agent',
+        query: {
+          t: +new Date(),
+          download: 'agent'
+        }
+      })
     },
     openTerminal () {
-      // TODO
+      this.$emit('close')
+      this.$router.push({
+        path: '/asset',
+        query: {
+          t: +new Date()
+        }
+      })
+      this.$store.commit('openConsole')
     },
     jump (route) {
-      this.visible = false
+      this.$emit('close')
       this.$router.push({
         path: route,
         query: {
@@ -145,7 +160,7 @@ export default {
       })
     },
     jumpAndOpen (cmd, open) {
-      this.visible = false
+      this.$emit('close')
       switch (cmd) {
         case 'dc': {
           this.$router.push({
@@ -177,6 +192,16 @@ export default {
           })
           break
         }
+        case 'importAsset': {
+          this.$router.push({
+            path: '/asset',
+            query: {
+              t: +new Date(),
+              importAsset: 'importAsset'
+            }
+          })
+          break
+        }
         case 'project': {
           this.$router.push({
             path: '/monitor/project',
@@ -207,6 +232,16 @@ export default {
           })
           break
         }
+        case 'importEndpoint': {
+          this.$router.push({
+            path: '/monitor/endpoint',
+            query: {
+              t: +new Date(),
+              importEndpoint: 'importEndpoint'
+            }
+          })
+          break
+        }
         case 'panel': {
           this.$router.push({
             path: '/panel',
@@ -237,12 +272,24 @@ export default {
           })
           break
         }
+        case 'cabinet': {
+          this.$router.push({
+            path: '/dc',
+            query: {
+              t: +new Date(),
+              add: 'cabinet'
+            }
+          })
+          break
+        }
         default: break
       }
+      // location.reload()
     }
   },
   watch: {
     showDialog (n) {
+      console.log(n)
       this.visible = n
     },
     activeIndex (n) {
diff --git a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
index f9f3e4ce0..adf17065f 100644
--- a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
@@ -1,16 +1,21 @@
 <template>
   <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">
-        <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--顶部按钮-->
+<!--    &lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;-->
+<!--    <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">-->
+<!--        <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>-->
+<!--    &lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;-->
 
     <!-- begin--标题-->
-    <div class="right-box-title">{{editCabinet.id ? $t("config.dc.editCabinet") : $t("overall.createCabinet")}}</div>
+    <div class="right-box__header">
+      <div class="header__title">{{editCabinet.id ? $t("config.dc.editCabinet") : $t("overall.createCabinet")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editCabinet, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
@@ -20,10 +25,13 @@
           <el-input size='mini' v-model="editCabinet.name" id="cabinet-box-input-name"/>
         </el-form-item>
         <el-form-item :label="$t('config.dc.dc')" prop="idcId">
-          <el-input size='mini' v-model="currentDc.name" disabled id="cabinet-box-input-dc"/>
+          <el-input v-if="dcDisabled" size='mini' v-model="currentDc.name" disabled id="cabinet-box-input-dc"/>
+          <el-select v-if="!dcDisabled" size='mini' v-model="editCabinet.idcId" id="cabinet-box-input-dc" :popper-class="'no-style-class'">
+            <el-option v-for="dc in dcData" :key="dc.id" :value="dc.id" :label="dc.name"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('asset.uSize')" prop="uSize">
-          <el-input v-model.number="editCabinet.uSize" :max="47" id="cabinet-box-input-uSize"></el-input>
+          <el-input v-model.number="editCabinet.uSize" :max="47" size="small" id="cabinet-box-input-uSize"></el-input>
         </el-form-item>
         <el-form-item :label="$t('config.dc.remark')">
           <el-input size='mini' v-model="editCabinet.remark" type="textarea" :rows="2" id="cabinet-box-input-remark"/>
@@ -48,15 +56,23 @@ export default {
   name: 'cabinetBox',
   props: {
     obj: { type: Object },
-    currentDc: { type: Object }
+    currentDc: { type: Object },
+    dcDisabled: {
+      type: Boolean,
+      default: true
+    }
   },
   data () {
     return {
       editCabinet: {},
+      dcData: '',
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
+        idcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
         uSize: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { type: 'number', min: 1, max: 47, message: this.$t('validate.uSize'), trigger: 'blur' }
@@ -75,9 +91,12 @@ export default {
     save () {
       if (this.prevent_opt.save) { return } ;
       this.prevent_opt.save = true
+      if (!this.editCabinet.idcId) {
+        this.editCabinet.idcId = this.currentDc.id
+      }
       this.$refs.cabinetForm.validate(valid => {
         if (valid) {
-          this.editCabinet.idcId = this.currentDc.id
+          this.editCabinet.dcId = this.currentDc.id || this.editCabinet.idcId
           if (this.editCabinet.id) {
             this.$put('/dc/cabinet', this.editCabinet).then(res => {
               this.prevent_opt.save = false
@@ -125,6 +144,11 @@ export default {
       }).catch(() => {
         this.prevent_opt.save = false
       })
+    },
+    getDcData () {
+      this.$get('dc', { pageSize: -1 }).then(res => {
+        this.dcData = res.data.list
+      })
     }
   },
   watch: {
@@ -137,6 +161,11 @@ export default {
         }
       }
     }
+  },
+  mounted () {
+    if (!this.dcDisabled) {
+      this.getDcData()
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index fb240cdac..395f5b143 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -40,7 +40,7 @@ export default {
   },
   data () {
     return {
-      url: '/panel',
+      url: 'visual/panel',
       editPanel: {},
       rules: {
         name: [
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index de11427e2..e67f841b0 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -55,7 +55,7 @@
       </el-dropdown>
     </div>
     <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>
-    <guide :show-dialog="showGuide" @dialogClosed="dialogClosed"></guide>
+    <guide :show-dialog="showGuide" @dialogClosed="dialogClosed" @close="showGuide = false"></guide>
   </div>
 </template>
 
diff --git a/nezha-fronted/src/components/page/alert/alertRule.vue b/nezha-fronted/src/components/page/alert/alertRule.vue
index 7c199c25b..ed6038c1a 100644
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -162,11 +162,17 @@ export default {
     }
   },
   mounted () {
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'alertRule') {
-        this.add()
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        const add = this.$route.query.add
+        if (add) {
+          if (add === 'alertRule') {
+            this.add()
+          }
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 218aac5d6..34f907ebb 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -14,6 +14,7 @@
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
         <export-excel
+          ref="export"
           id="asset-list"
           :params="searchLabel"
           :permissions="{import: 'asset_add', export: 'asset_view'}"
@@ -434,12 +435,24 @@ export default {
     this.getSearchableMetaData()
     this.getSnmpCredentialData()
     this.getFieldGroupData()
-
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'asset') {
-        this.add()
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        const importAsset = this.$route.query.importAsset
+        if (add) {
+          if (add === 'asset') {
+            this.add()
+          }
+        }
+        if (importAsset) {
+          this.$nextTick(() => {
+            this.$refs.export.showImportBox(1)
+          })
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue
index a9acc2833..5f95520a2 100644
--- a/nezha-fronted/src/components/page/config/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -270,11 +270,22 @@ export default {
     }
   },
   mounted () {
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'agent') {
-        this.add()
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        const download = this.$route.query.download
+        if (add) {
+          if (add === 'agent') {
+            this.add()
+          }
+        }
+        if (download) {
+          this.toDownloadAgent()
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 6bfc1159e..1fb9651f0 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -39,10 +39,14 @@
     <transition name="right-box">
       <dc-box v-if="rightBox.show" :obj="object" :user-data="userData" @close="closeRightBox" @reload="getTableData"></dc-box>
     </transition>
+    <transition name="right-box">
+      <cabinetBox v-if="cabinetBoxShow" :obj="cabinet" :current-dc="{}" @close="closeRightBox" :dcDisabled="false" @reload="getTableData"></cabinetBox>
+    </transition>
   </div>
 </template>
 <script>
 import dcBox from '@/components/common/rightBox/dcBox' // dc弹框
+import cabinetBox from '@/components/common/rightBox/cabinetBox' // dc弹框
 import trafficSettingBox from '@/components/common/rightBox/trafficSetting/trafficSettingBox'
 import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
@@ -55,7 +59,8 @@ export default {
     dcBox,
     deleteButton,
     nzDataList,
-    dcTable
+    dcTable,
+    cabinetBox
   },
   mixins: [dataListMixin],
   data () {
@@ -72,6 +77,14 @@ export default {
         longitude: undefined,
         latitude: undefined
       },
+      cabinet: {
+        id: '',
+        idcId: '',
+        name: '',
+        remark: '',
+        seq: '',
+        uSize: 1
+      },
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [
@@ -102,7 +115,8 @@ export default {
         ]
       },
       regNum: /^[0-9]+.?[0-9]*/,
-      userData: []
+      userData: [],
+      cabinetBoxShow: false
     }
   },
   methods: {
@@ -129,15 +143,36 @@ export default {
     },
     regNumTest (val) { // 校验是否是数字
       return this.regNum.test(val)
+    },
+    addCabinet () {
+      this.cabinetBoxShow = true
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      this.cabinetBoxShow = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
     }
   },
   mounted () {
     this.getUserData()
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'dc') {
-        this.add()
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        if (add) {
+          if (add === 'dc') {
+            this.add()
+          }
+          if (add === 'cabinet') {
+            this.addCabinet()
+          }
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index 0700d2674..c6d3e2de1 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -18,23 +18,24 @@
         </div>
       </template>
       <template v-slot:top-tool-right>
-        <export-excel
-          id="expression-template-list"
-          export-url="expression/tmpl/export"
-          import-url="expression/tmpl/import"
-          export-file-name="expression-template"
-          :params="searchLabel"
-          :permissions="{import: 'expressionTemplate_add', export: 'expressionTemplate_view'}"
-          @afterImport="getTableData"
-          class="top-tool-export margin-r-10"
-        >
-          <template slot="optionZone">
-            <button id="expr-tmpl-list-export" v-has="'expressionTemplate_add'" :title="$t('overall.createTemplate')" class="top-tool-btn"
-                    type="button" @click="add">
-              <i class="nz-icon nz-icon-create-square"></i>
-            </button>
-          </template>
-        </export-excel>
+<!--        <export-excel-->
+<!--          id="expression-template-list"-->
+<!--          export-url="expression/tmpl/export"-->
+<!--          import-url="expression/tmpl/import"-->
+<!--          export-file-name="expression-template"-->
+<!--          :params="searchLabel"-->
+<!--          :permissions="{import: 'expressionTemplate_add', export: 'expressionTemplate_view'}"-->
+<!--          @afterImport="getTableData"-->
+<!--          class="top-tool-export margin-r-10"-->
+<!--        >-->
+<!--          <template slot="optionZone">-->
+<!--          -->
+<!--          </template>-->
+<!--        </export-excel>-->
+        <button id="expr-tmpl-list-export" v-has="'expressionTemplate_add'" :title="$t('overall.createTemplate')" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
 
         <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
                        id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button></template>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 74346c460..e5e52e766 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -289,7 +289,7 @@ export default {
       this.expressionList[this.index] = value
       // this.$refs.editor.setContent(value)
       this.dropDownVisible = false
-      this.$emit('change', value)
+      // this.$emit('change', value)
       this.$forceUpdate()
       this.cascaderValue = ''
     },
@@ -299,7 +299,7 @@ export default {
       }
     },
     expressionChange: function () {
-      this.$emit('change')
+      // this.$emit('change')
     },
     setError: function (errMsg) {
       // console.log(errMsg)
@@ -393,7 +393,7 @@ export default {
           this.tempBoxShow = false
           // eslint-disable-next-line vue/no-mutating-props
           this.expressionList[this.index] = params.expression
-          this.$emit('change', params.expression)
+          // this.$emit('change', params.expression)
           return
         }
 
@@ -401,7 +401,7 @@ export default {
           if (res.code === 200) {
             this.tempBoxShow = false
             this.expressionList[this.index] = res.data.expression
-            this.$emit('change', res.data.expression)
+            // this.$emit('change', res.data.expression)
           }
         })
       } else {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index c72677070..578760685 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -83,7 +83,7 @@
       <chart-temp-box :obj="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess" v-if="rightBox.chartTemp.show"></chart-temp-box>
     </transition>
     <transition name="right-box">
-      <panel-box v-if="rightBox.panel.show" ref="panelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel"></panel-box>
+      <panel-box v-if="rightBox.panel.show" ref="panelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" @close="closePanelBox" ></panel-box>
     </transition>
   </div>
 </template>
@@ -263,6 +263,7 @@ export default {
       if (!this.hasButton('panel_view')) {
         return
       }
+      this.rightBox.panel.show = true
       this.$refs.panelBox.show(true)
       this.panel = {
         id: '',
@@ -331,9 +332,9 @@ export default {
     },
     closePanelBox (refresh) {
       this.rightBox.panel.show = false
-      /* if (refresh) {
-
-      } */
+      if (refresh) {
+        this.getTableData()
+      }
     },
     // 移除图表:弹出确认框询问
     delChart (data, from) {
@@ -779,14 +780,6 @@ export default {
     this.onScroll()
     document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
     document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
-
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'chart') {
-        this.addChart()
-      }
-    }
   },
   watch: {
     'filter.searchName': function (n, o) {
@@ -794,6 +787,23 @@ export default {
       setTimeout(function () {
         temp.search()
       }, 1000)
+    },
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        this.$nextTick(() => {
+          if (add) {
+            if (add === 'chart') {
+              this.addChart()
+            }
+            if (add === 'panel') {
+              this.toAdd()
+            }
+          }
+        })
+      }
     }
   },
   beforeDestroy () {
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 700aa606e..8a0ab98ed 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -14,8 +14,8 @@
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
         <export-excel
+          ref="export"
           id="expression-template-list"
-          v-has="''"
           export-url="monitor/endpoint/export"
           import-url="monitor/endpoint/import"
           export-file-name="expression-template"
@@ -319,12 +319,24 @@ export default {
       })
       this.$refs.dataList.$refs.searchInput.sreach_num = 1
     }
-
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'endpoint') {
-        this.add()
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        const importEndpoint = this.$route.query.importEndpoint
+        if (add) {
+          if (add === 'endpoint') {
+            this.add()
+          }
+        }
+        if (importEndpoint) {
+          this.$nextTick(() => {
+            this.$refs.export.showImportBox(1)
+          })
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 5bc8f41f1..e4777665c 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -213,11 +213,18 @@ export default {
     }
   },
   mounted () {
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'module') {
-        this.add()
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        if (add) {
+          if (add === 'module') {
+            this.add()
+          }
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/monitor/project/index.vue b/nezha-fronted/src/components/page/monitor/project/index.vue
index 48e26d0b1..f37b1d3b0 100644
--- a/nezha-fronted/src/components/page/monitor/project/index.vue
+++ b/nezha-fronted/src/components/page/monitor/project/index.vue
@@ -23,16 +23,24 @@ export default {
   data () {
     return {}
   },
-  watch: {},
-  mounted () {
-    // 是否弹出侧滑
-    const add = this.$route.query.add
-    if (add) {
-      if (add === 'project') {
-        this.$refs.dataList.add()
+  watch: {
+    $route: {
+      immediate: true,
+      handler () {
+        // 是否弹出侧滑
+        const add = this.$route.query.add
+        if (add) {
+          if (add === 'project') {
+            this.$nextTick(() => {
+              this.$refs.dataList.add()
+            })
+          }
+        }
       }
     }
   },
+  mounted () {
+  },
   methods: {}
 }
 </script>