diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 0c0ee6476..632bb4200 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -171,12 +171,12 @@ export default {
         },
         dc: {
           cabinet: [
-            { prop: 'asset', name: this.$t('asset.assets'), active: false },
-            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true }
+            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
+            { prop: 'asset', name: this.$t('asset.assets'), active: false }
           ],
           asset: [
-            { prop: 'asset', name: this.$t('asset.assets'), active: true },
-            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false }
+            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
+            { prop: 'asset', name: this.$t('asset.assets'), active: true }
           ]
         }
 
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index c02b03a9b..640dda90b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -691,7 +691,7 @@ const en = {
       area: 'Area',
       dcName: 'Data center name',
       selectArea: 'Select area',
-      cabinetNum: 'Cabinet number',
+      cabinetNum: 'Cabinet',
       assets: 'Assets',
       remark: 'Remark',
       cabinets: 'Cabinets',
diff --git a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
index 4bb12c244..ea6bac563 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
@@ -170,7 +170,6 @@ export default {
       this.$refs.assetTypeForm.validate((valid) => {
         if (valid) {
           if (this.editAssetType.id) {
-            console.log(this.editAssetType);
             this.$put(this.url, this.editAssetType).then(res => {
               this.prevent_opt.save = false
               if (res.code === 200) {
@@ -198,7 +197,6 @@ export default {
       })
     },
     selectWalk (walk) {
-      console.log(walk);
       if (this.editModule.walk.indexOf(walk) != -1) {
         this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
       } else {
@@ -208,7 +206,6 @@ export default {
     assetType(){
       this.$get('asset/typeConf').then(res => {
         this.assetTypeList = res.data.list
-        console.log(this.assetTypeList);
       })
     }
   }
diff --git a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
index ef4eb982a..5389983fa 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
@@ -125,7 +125,6 @@ export default {
       this.$refs.modelForm.validate((valid) => {
         if (valid) {
           if (this.editModel.id) {
-            console.log(this.editModel)
             this.$put(this.url, this.editModel).then(res => {
               this.prevent_opt.save = false
               if (res.code === 200) {
@@ -170,7 +169,6 @@ export default {
       }
     },
     selectWalk (walk) {
-      console.log(walk)
       if (this.editModule.walk.indexOf(walk) != -1) {
         this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
       } else {
@@ -191,7 +189,6 @@ export default {
     /* 获取chart列表数据 */
     ChartTemplateList () {
       this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
-        console.log(res)
         this.chartlList = res.data.list
       })
     }
diff --git a/nezha-fronted/src/components/common/rightBox/agentBox.vue b/nezha-fronted/src/components/common/rightBox/agentBox.vue
index 053552635..cac6d6fb9 100644
--- a/nezha-fronted/src/components/common/rightBox/agentBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/agentBox.vue
@@ -1,65 +1,61 @@
 <template>
   <div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button v-if="editPromServer.id" id="promServer-edit-del" v-has="'prom_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
-              type="button"
-              @click="del">
-        <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--顶部按钮-->
-
     <!-- begin--标题-->
-    <div class="right-box__header">{{editPromServer.id ? ($t("config.promServer.editProm") + "  ID：" + editPromServer.id) : $t("config.promServer.createProm")}}</div>
+    <div class="right-box__header">
+      <div class="right-box__header">{{editPromServer.id ? ($t("config.promServer.editProm") + "  ID：" + editPromServer.id) : $t("config.promServer.createProm")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editPromServer, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
     <!-- end--标题-->
-
     <!-- begin--表单-->
     <div class="right-box__container">
-      <el-form ref="promServerForm" :model="editPromServer" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px">
-        <!--DC-->
-        <el-form-item :label="$t('config.dc.dc')" prop="dc.name">
-          <div class="right-box-form-content">
-            <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
-              <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
-                <span class="config-dropdown-label-txt">{{item.name}}</span>
+      <div class="container__form">
+        <el-form ref="promServerForm" :model="editPromServer" :rules="rules" label-position = "top" label-width="120px">
+          <!--DC-->
+          <el-form-item :label="$t('config.dc.dc')" prop="dc.name">
+            <div class="right-box-form-content">
+              <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+                <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
+                  <span class="config-dropdown-label-txt">{{item.name}}</span>
+                </el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+
+          <!--host-->
+          <el-form-item label="Host" prop="host">
+            <el-input id="prom-box-input-host" v-model="editPromServer.host" placeholder="" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--Port-->
+          <el-form-item label="Port" prop="port">
+            <el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--type-->
+          <el-form-item :label="$t('config.promServer.type')" prop="type">
+  <!--          <el-cascader-->
+  <!--            id="prom-box-input-type"-->
+  <!--            style="width: 100%"-->
+  <!--            v-model="editPromServer.type"-->
+  <!--            placeholder=""-->
+  <!--            size="small"-->
+  <!--            :options="$CONSTANTS.promServer.theData"-->
+  <!--            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
+  <!--            clearable></el-cascader>-->
+            <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+              <el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
+                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
               </el-option>
             </el-select>
-          </div>
-        </el-form-item>
-
-        <!--host-->
-        <el-form-item label="Host" prop="host">
-          <el-input id="prom-box-input-host" v-model="editPromServer.host" placeholder="" size="small" type="text"></el-input>
-        </el-form-item>
-        <!--Port-->
-        <el-form-item label="Port" prop="port">
-          <el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
-        </el-form-item>
-        <!--type-->
-        <el-form-item :label="$t('config.promServer.type')" prop="type">
-<!--          <el-cascader-->
-<!--            id="prom-box-input-type"-->
-<!--            style="width: 100%"-->
-<!--            v-model="editPromServer.type"-->
-<!--            placeholder=""-->
-<!--            size="small"-->
-<!--            :options="$CONSTANTS.promServer.theData"-->
-<!--            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
-<!--            clearable></el-cascader>-->
-          <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
-            <el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
-              <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Token" prop="token">
-          <el-input id="prom-box-input-token" v-model="editPromServer.token" class="right-box-row-with-btn" placeholder="" size="small" type="text">
-            <i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
-          </el-input>
-        </el-form-item>
-      </el-form>
+          </el-form-item>
+          <el-form-item label="Token" prop="token">
+            <el-input id="prom-box-input-token" v-model="editPromServer.token" class="right-box-row-with-btn" placeholder="" size="small" type="text">
+              <i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      
     </div>
     <!-- end--表单-->
     <!--底部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 83ee47b5d..86041f083 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,59 +1,54 @@
 <template>
   <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">
-          <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--顶部按钮-->
-
       <!-- begin--标题-->
-      <div class="right-box__header">{{editDc.id ? ($t("config.dc.editDc") + "  ID：" + editDc.id) : $t("config.dc.createDc")}}</div>
-      <!-- end--标题-->
-
+      <div class="right-box__header">
+        <div class="right-box__header">{{editDc.id ? ($t("config.dc.editDc") + "  ID：" + editDc.id) : $t("config.dc.createDc")}}</div>
+        <div class="header__operation">
+          <span v-cancel="{obj: editDc, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+        </div>
+      </div>
       <!-- begin--表单-->
       <div class="right-box__container">
-        <el-form class="right-box-form right-box-form-left" label-width="120px" size="small" :model="editDc" label-position = "top" :rules="rules" ref="dcForm">
-          <el-form-item :label='$t("overall.name")' prop="name">
-            <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small" id="dc-box-input-name"></el-input>
-          </el-form-item>
-          <el-form-item :label='$t("asset.location")' prop="location">
-            <el-input placeholder="" v-model="editDc.location" size="small" id="dc-box-input-location"></el-input>
-          </el-form-item>
-          <el-form-item :label='$t("asset.tel")' prop="tel">
-            <el-input placeholder="" v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
-          </el-form-item>
-          <el-form-item :label='$t("asset.principal")' prop="principal">
-            <el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
-              <el-option v-for="item in userData" :id="'dc-principal-op-'+item.userId" :key="item.userId" :label="item.username" :value="item.userId">
-                <span>{{item.username}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <!--<el-form-item :label='$t("config.dc.area")' prop="area">-->
-            <!--<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">-->
-              <!--<template v-slot:trigger>-->
-                <!--<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>-->
-              <!--</template>-->
-            <!--</select-area>-->
-          <!--</el-form-item>-->
-          <el-form-item :label="$t('config.dc.lnglat')" prop="state">
-            <latlng-picker ref="latlngPicker" :append-to-body="false" :show-zoom="false"></latlng-picker>
-          </el-form-item>
-          <el-form-item :label='$t("config.dc.state")' prop="state">
-            <el-switch
-              id="dc-box-input-name"
-              v-model="editDc.state"
-              active-value="ON"
-              inactive-value="OFF"
-              active-color="#ee9d3f"
-            >
-            </el-switch>
-          </el-form-item>
-
-        </el-form>
+        <div class="container__form">
+          <el-form label-width="120px" size="small" :model="editDc" label-position = "top" :rules="rules" ref="dcForm">
+            <el-form-item :label='$t("overall.name")' prop="name">
+              <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small" id="dc-box-input-name"></el-input>
+            </el-form-item>
+            <el-form-item :label='$t("asset.location")' prop="location">
+              <el-input placeholder="" v-model="editDc.location" size="small" id="dc-box-input-location"></el-input>
+            </el-form-item>
+            <el-form-item :label='$t("asset.tel")' prop="tel">
+              <el-input placeholder="" v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
+            </el-form-item>
+            <el-form-item :label='$t("asset.principal")' prop="principal">
+              <el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
+                <el-option v-for="item in userData" :id="'dc-principal-op-'+item.userId" :key="item.userId" :label="item.username" :value="item.userId">
+                  <span>{{item.username}}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <!--<el-form-item :label='$t("config.dc.area")' prop="area">-->
+              <!--<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">-->
+                <!--<template v-slot:trigger>-->
+                  <!--<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>-->
+                <!--</template>-->
+              <!--</select-area>-->
+            <!--</el-form-item>-->
+            <el-form-item :label="$t('config.dc.lnglat')" prop="state">
+              <latlng-picker ref="latlngPicker" :append-to-body="false" :show-zoom="false"></latlng-picker>
+            </el-form-item>
+            <el-form-item :label='$t("config.dc.state")' prop="state">
+              <el-switch
+                id="dc-box-input-name"
+                v-model="editDc.state"
+                active-value="ON"
+                inactive-value="OFF"
+                active-color="#ee9d3f"
+              >
+              </el-switch>
+            </el-form-item>
+          </el-form>
+        </div>
       </div>
 
       <!--底部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue b/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
index ba7e140b9..ce2ccc6d1 100644
--- a/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
@@ -1,68 +1,60 @@
 <template>
   <div v-clickoutside="{obj:editExprTemp,func:clickOutside}" class="right-box right-box-alert-config">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button v-if="editExprTemp.id" id="alert-box-del" v-has="'alert_silence_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
-              type="button" @click="del">
-        <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--顶部按钮-->
-
     <!-- begin--标题-->
-    <div class="right-box__header">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id :
+    <div class="right-box__header">
+      <div class="right-box__header">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id :
       $t("config.exprTemp.create")}}
     </div>
-    <!-- end--标题-->
-
+      <div class="header__operation">
+        <span v-cancel="{obj: editExprTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
     <!-- begin--表单-->
     <div class="right-box__container">
-      <el-form ref="ExprTempForm" :model="editExprTemp" :rules="rules"
-               class="right-box-form right-box-form-left" label-position="top" label-width="120px">
-        <el-form-item :label="$t('config.exprTemp.name')" prop="name">
-          <el-input v-model="editExprTemp.name" :placeholder="$t('overall.placeHolder')" size="small"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('config.exprTemp.gname')" prop="gname">
-          <!--<el-input v-model="editExprTemp.gname" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
-          <el-autocomplete
-            v-model="editExprTemp.gname"
-            :fetch-suggestions="querySearch"
-            :placeholder="$t('overall.placeHolder')"
-            class="inline-input"
-            size="small"
-            style="width: 100%;"
-          ></el-autocomplete>
-        </el-form-item>
-        <el-form-item :label="$t('config.exprTemp.expression')" prop="expression">
-          <!--<el-input v-model="editExprTemp.expression" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
-          <promql-input
-            :id="'promqlKeys0'"
-            :key="'promqlKeys0'"
-            :expression-list="editExprTemp.expression"
-            :index="0"
-            :plugins="['metric-selector', 'metric-input', 'remove']"
-            :show-temp="false"
-            :showRemove="false"
-            :styleType="2"
-            @change="expressionChange"
-          ></promql-input>
-        </el-form-item>
-        <el-form-item :label="$t('config.exprTemp.remark')" prop="remark">
-          <el-input
-            v-model="editExprTemp.remark"
-            :placeholder="$t('alert.description')"
-            maxlength="512"
-            show-word-limit
-            size="small"
-            type="textarea"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-
+      <div class="container__form">
+        <el-form ref="ExprTempForm" :model="editExprTemp" :rules="rules" label-position="top" label-width="120px">
+          <el-form-item :label="$t('config.exprTemp.name')" prop="name">
+            <el-input v-model="editExprTemp.name" :placeholder="$t('overall.placeHolder')" size="small"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('config.exprTemp.gname')" prop="gname">
+            <!--<el-input v-model="editExprTemp.gname" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
+            <el-autocomplete
+              v-model="editExprTemp.gname"
+              :fetch-suggestions="querySearch"
+              :placeholder="$t('overall.placeHolder')"
+              class="inline-input"
+              size="small"
+              style="width: 100%;"
+            ></el-autocomplete>
+          </el-form-item>
+          <el-form-item :label="$t('config.exprTemp.expression')" prop="expression">
+            <!--<el-input v-model="editExprTemp.expression" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
+            <promql-input
+              :id="'promqlKeys0'"
+              :key="'promqlKeys0'"
+              :expression-list="editExprTemp.expression"
+              :index="0"
+              :plugins="['metric-selector', 'metric-input', 'remove']"
+              :show-temp="false"
+              :showRemove="false"
+              :styleType="2"
+              @change="expressionChange"
+            ></promql-input>
+          </el-form-item>
+          <el-form-item :label="$t('config.exprTemp.remark')" prop="remark">
+            <el-input
+              v-model="editExprTemp.remark"
+              :placeholder="$t('alert.description')"
+              maxlength="512"
+              show-word-limit
+              size="small"
+              type="textarea"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
     <!-- end--表单-->
-
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
       <button id="alert-box-esc" v-cancel="{obj:editExprTemp,func:esc}"
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index f7e6eddc3..03dcc963e 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -1,51 +1,47 @@
 <template>
   <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">
-        <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--顶部按钮-->
-
     <!-- begin--标题-->
-    <div class="right-box__header">{{editMib.id ? ($t("config.mib.editMib") + "  ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
-    <!-- end--标题-->
-
+   <div class="right-box__header">
+      <div class="right-box__header">{{editMib.id ? ($t("config.mib.editMib") + "  ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editMib, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
     <!-- begin--表单-->
     <div class="right-box__container">
-      <el-form class="right-box-form  right-box-form-left" :model="editMib" label-position = "top" label-width="120px" :rules="rules" ref="mibForm">
-        <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
-          <el-cascader
-            id="mib-input-selected-models"
-            :options="modelOptions"
-            :props="modelProps"
-            :show-all-levels="false"
-            v-model="selectedModels"
-            @change="selectedModelChange"
-            ref="modelSelector"
-            collapse-tags
-            :placeholder="$t('config.mib.modelTip')"
-            size="small"
-            class="right-box__select" 
-            popper-class="right-box-select-dropdown prevent-clickoutside"
-            clearable></el-cascader>
-        </el-form-item>
-        <el-form-item :label="$t('config.mib.remark')" prop="remark">
-          <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editMib.remark" size="small" id="mib-box-input-remark"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}">
-          <el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row" id="mib-box-input-file">
-            <div slot="tip" class="el-upload__tip" >
-              <span v-if="editMib.fileName">{{editMib.fileName}}</span>
-              <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
-            </div>
-            <i class="nz-icon nz-icon-upload"></i>
-            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-          </el-upload>
-        </el-form-item>
-      </el-form>
+      <div class="container__form">
+        <el-form :model="editMib" label-position = "top" label-width="120px" :rules="rules" ref="mibForm">
+          <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
+            <el-cascader
+              id="mib-input-selected-models"
+              :options="modelOptions"
+              :props="modelProps"
+              :show-all-levels="false"
+              v-model="selectedModels"
+              @change="selectedModelChange"
+              ref="modelSelector"
+              collapse-tags
+              :placeholder="$t('config.mib.modelTip')"
+              size="small"
+              class="right-box__select" 
+              popper-class="right-box-select-dropdown prevent-clickoutside"
+              clearable></el-cascader>
+          </el-form-item>
+          <el-form-item :label="$t('config.mib.remark')" prop="remark">
+            <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editMib.remark" size="small" id="mib-box-input-remark"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}">
+            <el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row" id="mib-box-input-file">
+              <div slot="tip" class="el-upload__tip" >
+                <span v-if="editMib.fileName">{{editMib.fileName}}</span>
+                <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
+              </div>
+              <i class="nz-icon nz-icon-upload"></i>
+              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
 
     <!--底部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
index cec742b66..ab50ae9ae 100644
--- a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
@@ -1,78 +1,74 @@
 <template>
   <div class="right-box right-box-credential" v-clickoutside="{obj:editCredential,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="credential-del" type="button" v-has="'credential_delete'" v-if="editCredential.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--顶部按钮-->
-
       <!-- begin--标题-->
-      <div class="right-box__header">{{editCredential.id ? ($t("config.mib.credential.edit") + "  ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
-      <!-- end--标题-->
-
+      <div class="right-box__header">
+        <div class="right-box__header">{{editCredential.id ? ($t("config.mib.credential.edit") + "  ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
+        <div class="header__operation">
+          <span v-cancel="{obj: editCredential, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+        </div>
+      </div>
       <!-- begin--表单-->
       <div class="right-box__container">
-        <el-form class="right-box-form right-box-form-left" label-width="120px" size="small" :model="editCredential" label-position = "top" :rules="rules" ref="credentialForm">
-          <el-form-item :label='$t("overall.name")' prop="name">
-            <el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
-          </el-form-item>
-          <el-form-item :label='$t("config.mib.credential.remark")' prop="remark">
-            <el-input placeholder="" v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
-          </el-form-item>
-          <el-form-item :label='$t("config.mib.credential.type")' prop="type" class="half-form-item">
-            <el-select v-model="editCredential.type" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" @change="typeChange">
-              <el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label='$t("config.mib.credential.port")' prop="port" class="half-form-item" >
-            <el-input placeholder=""   v-model.number="editCredential.port" size="small" id="credential-box-input-port"></el-input>
-          </el-form-item>
-          <el-form-item label='Read community' prop="readCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
-            <el-input placeholder=""   v-model="editCredential.config.readCommunity" size="small" id="credential-box-input-readCommunity"></el-input>
-          </el-form-item>
-          <el-form-item label='Write community' prop="writeCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
-            <el-input placeholder=""   v-model="editCredential.config.writeCommunity" size="small" id="credential-box-input-writeCommunity" type="password" show-password></el-input>
-          </el-form-item>
-          <el-form-item label="Username" prop="username" v-if="editCredential.type === 3" class="half-form-item">
-            <el-input placeholder=""   v-model="editCredential.config.username" size="small" id="credential-box-input-username"></el-input>
-          </el-form-item>
-          <el-form-item label="Content name" prop="contextname"  v-if="editCredential.type === 3" class="half-form-item">
-            <el-input placeholder=""   v-model="editCredential.config.contextname" size="small" id="credential-box-input-contextname"></el-input>
-          </el-form-item>
+        <div class="container__form">
+          <el-form label-width="120px" size="small" :model="editCredential" label-position = "top" :rules="rules" ref="credentialForm">
+            <el-form-item :label='$t("overall.name")' prop="name">
+              <el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
+            </el-form-item>
+            <el-form-item :label='$t("config.mib.credential.remark")' prop="remark">
+              <el-input placeholder="" v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
+            </el-form-item>
+            <el-form-item :label='$t("config.mib.credential.type")' prop="type" class="half-form-item">
+              <el-select v-model="editCredential.type" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" @change="typeChange">
+                <el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
+                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label='$t("config.mib.credential.port")' prop="port" class="half-form-item" >
+              <el-input placeholder=""   v-model.number="editCredential.port" size="small" id="credential-box-input-port"></el-input>
+            </el-form-item>
+            <el-form-item label='Read community' prop="readCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
+              <el-input placeholder=""   v-model="editCredential.config.readCommunity" size="small" id="credential-box-input-readCommunity"></el-input>
+            </el-form-item>
+            <el-form-item label='Write community' prop="writeCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
+              <el-input placeholder=""   v-model="editCredential.config.writeCommunity" size="small" id="credential-box-input-writeCommunity" type="password" show-password></el-input>
+            </el-form-item>
+            <el-form-item label="Username" prop="username" v-if="editCredential.type === 3" class="half-form-item">
+              <el-input placeholder=""   v-model="editCredential.config.username" size="small" id="credential-box-input-username"></el-input>
+            </el-form-item>
+            <el-form-item label="Content name" prop="contextname"  v-if="editCredential.type === 3" class="half-form-item">
+              <el-input placeholder=""   v-model="editCredential.config.contextname" size="small" id="credential-box-input-contextname"></el-input>
+            </el-form-item>
 
-          <div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.auth')}}</div>
-          <div style="margin-bottom: 20px;width: 100%"></div>
+            <div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.auth')}}</div>
+            <div style="margin-bottom: 20px;width: 100%"></div>
 
-          <el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol"  v-if="editCredential.type === 3" class="half-form-item">
-            <el-select v-model="editCredential.config.authProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small">
-              <el-option v-for="item in $CONSTANTS.snmpAuthMethod" :key="item.value" :label="item.label" :value="item.value">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label='$t("config.mib.credential.pin")' prop="authPin" v-if="editCredential.type === 3" class="half-form-item">
-            <el-input placeholder=""   v-model="editCredential.config.authPin" size="small" id="credential-box-input-authPin" type="password" show-password></el-input>
-          </el-form-item>
+            <el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol"  v-if="editCredential.type === 3" class="half-form-item">
+              <el-select v-model="editCredential.config.authProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small">
+                <el-option v-for="item in $CONSTANTS.snmpAuthMethod" :key="item.value" :label="item.label" :value="item.value">
+                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label='$t("config.mib.credential.pin")' prop="authPin" v-if="editCredential.type === 3" class="half-form-item">
+              <el-input placeholder=""   v-model="editCredential.config.authPin" size="small" id="credential-box-input-authPin" type="password" show-password></el-input>
+            </el-form-item>
 
-          <div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.encryption')}}</div>
-          <div style="margin-bottom: 20px;width: 100%"></div>
+            <div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.encryption')}}</div>
+            <div style="margin-bottom: 20px;width: 100%"></div>
 
-          <el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol"  v-if="editCredential.type === 3" class="half-form-item">
-            <el-select v-model="editCredential.config.privProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
-              <el-option v-for="item in $CONSTANTS.snmpEncryptionMethod" :key="item.value" :label="item.label" :value="item.value">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label='$t("config.mib.credential.pin")' prop="privPin"  v-if="editCredential.type === 3" class="half-form-item">
-            <el-input placeholder=""   v-model="editCredential.config.privPin" size="small" id="credential-box-input-privPin" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''" type="password" show-password></el-input>
-          </el-form-item>
-        </el-form>
+            <el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol"  v-if="editCredential.type === 3" class="half-form-item">
+              <el-select v-model="editCredential.config.privProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
+                <el-option v-for="item in $CONSTANTS.snmpEncryptionMethod" :key="item.value" :label="item.label" :value="item.value">
+                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label='$t("config.mib.credential.pin")' prop="privPin"  v-if="editCredential.type === 3" class="half-form-item">
+              <el-input placeholder=""   v-model="editCredential.config.privPin" size="small" id="credential-box-input-privPin" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''" type="password" show-password></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
       </div>
       <!--底部按钮-->
       <div class="right-box-bottom-btns">
diff --git a/nezha-fronted/src/components/common/table/settings/dcTable.vue b/nezha-fronted/src/components/common/table/settings/dcTable.vue
index e753b0f65..5d43f5055 100644
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dcTable.vue
@@ -61,7 +61,7 @@
         </template>
         <template v-else-if="item.prop === 'assetNum'">
           <span class="endpoint-num"  @click="showBottomBox('asset', scope.row)">
-             <i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
+             <i class="nz-icon nz-icon-overview-project" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
           {{scope.row[item.prop]}}
           </span>
         </template>
@@ -74,7 +74,7 @@
 
         <template v-else-if="item.prop === 'cabinetNum'">
           <span class="alert-num" @click="showBottomBox('cabinet', scope.row)">
-            <i class="nz-icon nz-icon-Cabinet" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
+            <i class="nz-icon nz-icon-cabinet" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
             {{scope.row[item.prop]}}
           </span>
         </template>
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index 88be48342..82a1f601b 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <nz-data-list
       v-if="showTab === 'file'"
       ref="dataList"
diff --git a/nezha-fronted/src/components/page/config/snmp.vue b/nezha-fronted/src/components/page/config/snmp.vue
index 4533bbd83..cd1f17a72 100644
--- a/nezha-fronted/src/components/page/config/snmp.vue
+++ b/nezha-fronted/src/components/page/config/snmp.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="hight: 100%">
       <mib-file :show-tab="showTab" v-if="showTab == 'file'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></mib-file>
       <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toCredentialTab="changeTab(['mib','credentials'],'credentials')"></mib-browser>
       <credentials :show-tab="showTab" v-if="showTab == 'credentials'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></credentials>