diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 59ebadac3..84144a626 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -971,7 +971,7 @@ li{
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
 .right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
 .right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart, .right-box-asset-type,
-.right-box-asset-state {
+.right-box-asset-state , .right-box-credential{
   width: 850px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 52939a2ab..f49001d80 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -129,7 +129,23 @@ export const setting = {
     { value: 'OFF', label: i18n.t('config.dc.suspended') }
   ]
 }
-
+export const snmpProtocolTypes=[
+  // {label:'V1',value:1},
+  {label:'V2',value:2},
+  {label:'V3',value:3}
+]
+export const snmpAuthMethod=[
+  {label:'None',value:''},
+  {label:'MD5',value:'MD5'},
+  {label:'SHA',value:'SHA'},
+]
+export const snmpEncryptionMethod=[
+  {label:'None',value:''},
+  {label:'DES',value:'DES'},
+  {label:'AES-128',value:'AES-128'},
+  {label:'AES-192',value:'AES-192'},
+  {label:'AES-256',value:'AES-256'},
+]
 export const terminalLog = {
   status: {
     0: i18n.t('config.terminallog.statusItem.connecting'),
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 6dbe412bb..4f4ec0a73 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -698,11 +698,13 @@ const cn = {
       perms: '权限',
       button: '按钮',
       menu: '菜单',
+      tab:'Tab',
       parent: '上级菜单',
       mainMenu: '主菜单',
       createMenu: '新增菜单',
       editMenu: '编辑菜单',
-      orderNum: '排序'
+      orderNum: '排序',
+      icon:'图标',
     },
     promServer: {
       promServerList: 'Prometheus服务',
@@ -856,7 +858,17 @@ const cn = {
       vendor: '厂商',
       type: '类型',
       mibBrowser: 'MIB浏览器',
-      noData: '暂无数据'
+      credentials: '证书',
+      noData: '暂无数据',
+      credential:{
+        type:"协议类型",
+        port:"端口",
+        remark:"备注",
+        auth:"认证",
+        method:'方式',
+        encryption:"加密",
+        pin:"密码"
+      }
     },
     system: {
       system: '系统设置',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 2b3eb04e8..fc66c6802 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -701,11 +701,13 @@ const en = {
       perms: 'Permission',
       button: 'Button',
       menu: 'Menu',
+      tab:'Tab',
       parent: 'Previous menu',
       mainMenu: 'Primary menu',
       createMenu: 'Create menu',
       editMenu: 'Edit menu',
-      orderNum: 'Order'
+      orderNum: 'Order',
+      icon:'Icon'
     },
     agent: {
       // 侧滑框
@@ -858,7 +860,19 @@ const en = {
       vendor: 'Vendor',
       type: 'Type',
       mibBrowser: 'MIB browser',
-      noData: 'No Data'
+      credentials: 'Credentials',
+      noData: 'No Data',
+      credential:{
+        type:"Protocol type",
+        port:"Port",
+        remark:"Description",
+        edit:"Edit",
+        create:"Create",
+        auth:'Authentication',
+        method:'Method',
+        encryption:"Encryption",
+        pin:"Password"
+      }
     },
     system: {
       system: 'System',
diff --git a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
new file mode 100644
index 000000000..a7fbabb89
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
@@ -0,0 +1,243 @@
+<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-title">{{editCredential.id ? ($t("config.mib.credential.edit") + "  ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <div class="right-box-form-box">
+        <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="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>
+
+          <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>
+      </div>
+      <!--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button v-cancel="{obj:editCredential,func:esc}" id="credential-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+          <span>{{$t('overall.cancel')}}</span>
+        </button>
+        <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="credential-box-save">
+          <span>{{$t('overall.save')}}</span>
+        </button>
+      </div>
+
+    </div>
+</template>
+
+<script>
+
+  import {port} from "../js/validate";
+
+  export default {
+  name: 'credentialBox',
+
+  props: {
+    credential: Object,
+  },
+  data () {
+    return {
+      editCredential: {},
+
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        type:[
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        port:[
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: port, trigger: 'blur' }
+        ]
+      },
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+
+    typeChange:function(type){
+      if(type === 1 || type === 2){
+        this.$set(this.editCredential,'config',{
+          readCommunity:'',
+          writeCommunity:'',
+        })
+      }else{
+        this.$set(this.editCredential,'config',{
+          username:'',
+          contextname:'',
+          securityLevel:'',
+          authProtocol:'',
+          authPin:'',
+          privProtocol:'',
+          privPin:'',
+        })
+      }
+    },
+    /* 保存 */
+    save: function () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      this.prevent_opt.save = true
+      this.$refs.credentialForm.validate((valid) => {
+        if (valid) {
+          if(this.editCredential.type === 3 ){
+            if(this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol){
+              this.editCredential.securityLevel = 'authNoPriv'
+            }else if(this.editCredential.config.authProtocol && this.editCredential.config.privProtocol){
+              this.editCredential.securityLevel = 'authPriv'
+            }else{
+              this.editCredential.securityLevel = 'noAuthNoPriv'
+            }
+          }
+          let param = JSON.parse(JSON.stringify(this.editCredential))
+          param.config = JSON.stringify(param.config)
+          if (this.editCredential.id) {
+            this.$put('/snmp/credential',param).then(response=>{
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            this.$post('/snmp/credential',param).then(response=>{
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/snmp/credential?ids=' + this.editCredential.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+  },
+  mounted () {
+
+  },
+  watch: {
+    credential: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editCredential = JSON.parse(JSON.stringify(n))
+        this.editCredential.config = JSON.parse(this.editCredential.config)
+        console.log('edit',this.editCredential)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .right-box-credential .half-form-item {
+    width: calc(50% - 20px);
+  }
+  .right-box-credential .half-form-item:nth-child(odd) {
+    width: calc(50% - 15px);
+    margin-left: 15px;
+
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
new file mode 100644
index 000000000..d19298878
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
@@ -0,0 +1,124 @@
+<template>
+  <el-table
+    id="credentialTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'id'">
+          <template v-if="scope.row.id">
+            {{scope.row.id}}
+          </template>
+          <template v-else>-</template>
+        </template>
+        <template v-if="item.prop === 'name'">
+          <template v-if="scope.row.name">
+            {{scope.row.name}}
+          </template>
+          <template v-else>-</template>
+        </template>
+        <template v-if="item.prop === 'type'">
+          <template v-if="scope.row.type">
+            {{$CONSTANTS.snmpProtocolTypes.find(t=>t.value == scope.row.type).label}}
+          </template>
+          <template v-else>-</template>
+        </template>
+        <template v-if="item.prop === 'port'">
+          <template v-if="scope.row.port">
+            {{scope.row.port}}
+          </template>
+          <template v-else>-</template>
+        </template>
+        <template v-if="item.prop === 'remark'">
+          <template v-if="scope.row.remark">
+            {{scope.row.remark}}
+          </template>
+          <template v-else>-</template>
+        </template>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  import table from '@/components/common/mixin/table'
+  export default {
+    name: "credentialsTable",
+    mixins: [table],
+    data(){
+      return{
+        tableTitle:[{
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },{
+          label:this.$t('config.mib.credential.type'),
+          prop: 'type',
+          show: true
+        },{
+          label:this.$t('config.mib.credential.port'),
+          prop: 'port',
+          show: true
+        },{
+          label:this.$t('config.mib.credential.remark'),
+          prop: 'remark',
+          show: true
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue
index 4da20eefc..d683a341c 100644
--- a/nezha-fronted/src/components/page/config/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -12,7 +12,7 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <button id="load-agent" class="top-tool-btn margin-r-10" type="button" @click="toDownloadAgent">
+        <button id="load-agent" class="top-tool-btn margin-r-10" type="button" @click="toDownloadAgent" v-has="'agent_add'">
           <i class="nz-icon-download nz-icon"></i>
         </button>
         <delete-button id="promserver-list-batch-delete" v-has="'agent_delete'" :delete-objs="batchDeleteObjs" api="agent" @after="getTableData" @before="delFlag=true"></delete-button>
@@ -72,21 +72,21 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="cURL"  v-if="loadFinish" class="download-url">
+            <el-input id="download-url-curl" :disabled="true" v-model="curlUrl">
+              <el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="curlVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('curl')">
+                <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-curl')"></i>
+              </el-popover>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="Wget"  v-if="loadFinish" class="download-url">
+            <el-input id="download-url-wget" :disabled="true" v-model="wgetUrl">
+              <el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="wgetVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('wget')">
+                <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-wget')"></i>
+              </el-popover>
+            </el-input>
+          </el-form-item>
         </el-form>
-        <div v-if="loadFinish" class="download-url">
-          <el-input id="download-url-curl" v-model="curlUrl" :disabled="true">
-            <el-popover slot="suffix" v-model="curlVisible" :content="$t('tip.copySuccess')" placement="top" popper-class="small-pop" trigger="manual" @after-enter="popShow('curl')">
-              <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-curl')"></i>
-            </el-popover>
-          </el-input>
-        </div>
-        <div v-if="loadFinish" class="download-url">
-          <el-input id="download-url-wget" v-model="wgetUrl" :disabled="true">
-            <el-popover slot="suffix" v-model="wgetVisible" :content="$t('tip.copySuccess')" placement="top" popper-class="small-pop" trigger="manual" @after-enter="popShow('wget')">
-              <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-wget')"></i>
-            </el-popover>
-          </el-input>
-        </div>
       </div>
     </el-dialog>
   </div>
@@ -203,8 +203,10 @@ export default {
         this.tools.loading = false
         if (response.code === 200) {
           this.allDc = response.data.list
-          this.loadFinish = true
-          this.agentParam.dc = this.allDc[0].id
+          if(this.allDc&&this.allDc.length>0){
+            this.loadFinish = true
+            this.agentParam.dc = this.allDc[0].id
+          }
         }
       })
     },
@@ -291,14 +293,10 @@ export default {
   }
 
   .agent-box .download-url{
-    height: 40px;
-    position: relative;
-    margin-bottom: 10px;
+      margin-left: 12px !important;
   }
   .agent-box .download-url .url-copy{
-    position: absolute;
-    right: 10px;
-    top: 5px;
+
   }
   .agent-box .download-url .url-copy i{
     font-size: 20px;
@@ -320,7 +318,7 @@ export default {
 
 </style>
 <style>
-  .download-url > .el-input.is-disabled .el-input__inner{
+  .download-url  .el-input.is-disabled .el-input__inner{
     background-color: #F6F8FA;;
     border-color: #E4E7ED;
     color: #333;
@@ -328,7 +326,6 @@ export default {
   }
   .download-url  .el-input__suffix {
     position: absolute;
-    top: 8px;
     -webkit-transition: all .3s;
     height: 100%;
     color: #333;
diff --git a/nezha-fronted/src/components/page/config/credentials.vue b/nezha-fronted/src/components/page/config/credentials.vue
new file mode 100644
index 000000000..23bd71b56
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/credentials.vue
@@ -0,0 +1,126 @@
+<template>
+  <div style="height: 100%">
+    <nz-data-list
+      v-show="showTab === 'credentials'"
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.mib"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg">
+      <template v-slot:top-tool-left>
+        <div id="module-type-6" class="nz-tab-item-box" @click="toFileTab">
+          <div class="nz-tab-item ">{{$t("config.mib.mibFiles")}}</div>
+        </div>
+        <div id="module-type-7"  class="nz-tab-item-box" @click="toBrowserTab"><!--v-has="'snmp_browser_view'"-->
+          <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
+        </div>
+        <div id="module-type-8"  class="nz-tab-item-box" >
+          <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.credentials")}}</div>
+        </div>
+      </template>
+      <template v-slot:top-tool-right>
+        <button id="mib-add" v-has="'credential_add'" :title="$t('overall.createMib')" class="top-tool-btn margin-r-10" type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+        <delete-button id="mib-list-batch-delete" v-has="'credential_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot:default="slotProps">
+        <credentials-table
+          ref="dataTable"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
+        ></credentials-table>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <snmp-credential-box :credential="object" v-if="rightBox.show" ref="credentialBox"  @close="closeRightBox" @reload="getTableData"></snmp-credential-box>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import mibBrowser from './mibBrowser'
+  import deleteButton from '@/components/common/deleteButton'
+  import nzDataList from '@/components/common/table/nzDataList'
+  import dataListMixin from '@/components/common/mixin/dataList'
+  import credentialsTable from '@/components/common/table/settings/credentialsTable'
+  import snmpCredentialBox from "../../common/rightBox/snmpCredentialBox";
+  export default {
+    name: "credentials",
+    props: {
+      showTab: String
+    },
+    components: {
+      mibBrowser,
+      deleteButton,
+      nzDataList,
+      credentialsTable,
+      snmpCredentialBox
+    },
+    mixins: [dataListMixin],
+    data(){
+      return{
+        url:'snmp/credential',
+        tableId: 'credentialTable', // 需要分页的table的id，用于记录每页数量
+        blankObject: {
+          id: null,
+          name: '',
+          type:2,
+          port:161,
+          remark: '',
+          config:{
+
+          },
+        },
+        searchMsg: { // 给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 5,
+            name: this.$t('overall.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          },{
+            id:6,
+            name: 'Type',
+            type: 'input',
+            label: 'types',
+            disabled: false
+          }]
+        }
+      }
+    },
+    methods:{
+      toFileTab () {
+        this.$emit('toFileTab')
+      },
+      toBrowserTab(){
+        this.$emit('toBrowserTab')
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/config/menus.vue b/nezha-fronted/src/components/page/config/menus.vue
index ce220c513..a447ff59b 100644
--- a/nezha-fronted/src/components/page/config/menus.vue
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -63,7 +63,8 @@ export default {
         type: 1,
         route: '',
         orderNum: 1,
-        perms: ''
+        perms: '',
+        icon:''
       },
       tableTitle: [ // 原table列
         {
@@ -87,6 +88,10 @@ export default {
           label: this.$t('config.menus.type'),
           prop: 'type',
           show: true
+        },{
+          label: this.$t('config.menus.icon'),
+          prop: 'icon',
+          show: true
         }, {
           label: this.$t('config.menus.route'),
           prop: 'route',
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index cb6e43699..ecc33d64d 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -8,14 +8,17 @@
       :from="fromRoute.mib"
       :layout="['searchInput', 'elementSet']"
       :search-msg="searchMsg">
-<!--      <template v-slot:top-tool-left>
+      <template v-slot:top-tool-left>
         <div id="module-type-1" class="nz-tab-item-box">
           <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
         </div>
-        <div id="module-type-2" v-has="'snmp_browser_view'" class="nz-tab-item-box" @click="showTab = 'browser'">
+        <div id="module-type-2"  class="nz-tab-item-box" @click="showTab = 'browser'"><!--v-has="'snmp_browser_view'"-->
           <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
         </div>
-      </template>-->
+        <div id="module-type-3"  class="nz-tab-item-box" @click="showTab = 'credentials'">
+          <div class="nz-tab-item">{{$t("config.mib.credentials")}}</div>
+        </div>
+      </template>
       <template v-slot:top-tool-right>
         <button id="mib-add" v-has="'snmp_mibFile_add'" :title="$t('overall.createMib')" class="top-tool-btn margin-r-10" type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
@@ -43,7 +46,8 @@
         <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
       </template>
     </nz-data-list>
-    <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
+    <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'" @toCredentialTab="showTab = 'credentials'"></mib-browser>
+    <credentials :show-tab="showTab" v-if="showTab == 'credentials'" @toFileTab="showTab = 'file'" @toBrowserTab="showTab = 'browser'"></credentials>
     <transition name="right-box">
       <mib-box v-if="rightBox.show" ref="mibBox" :mib="object" @close="closeRightBox" @reload="getTableData"></mib-box>
     </transition>
@@ -56,10 +60,11 @@ import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import mibTable from '@/components/common/table/settings/mibTable'
-
+import credentials from "./credentials";
 export default {
   name: 'mib',
   components: {
+    credentials,
     mibBox,
     mibBrowser,
     deleteButton,
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 523056d17..285ecb7ab 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -8,6 +8,9 @@
         <div class="nz-tab-item-box" id="module-type-4">
           <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibBrowser")}}</div>
         </div>
+        <div class="nz-tab-item-box" id="module-type-5" @click="toCredentialTab">
+          <div class="nz-tab-item ">{{$t("config.mib.credentials")}}</div>
+        </div>
       </div>
       <div class="top-tool-main-right">
         <div class="top-tool-search host-input">
@@ -332,6 +335,9 @@ export default {
     toFileTab () {
       this.$emit('toFileTab')
     },
+    toCredentialTab () {
+      this.$emit('toCredentialTab')
+    },
     showDetail (data, node) {
       this.currentWalk = data
       this.searchParam.oid = data.objectID