diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 32b58e0b4..da6d3b214 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1129,6 +1129,7 @@ const cn = {
         defaultEndpointSet: '默认的Endpoint设置',
         relation: '模块关联的Endpoint将默认配置以下端口/路径/参数'
       },
+      type: '类型',
       version: '版本',
       walk: 'Walk',
       maxRepetitions: '最大迭代次数',
@@ -1139,6 +1140,7 @@ const cn = {
       authProtocol: '认证协议',
       privProtocol: '隐私协议',
       contextName: '内容名称',
+      alerts: 'Alerts',
       privPassword: '隐私密码'
     },
     endpoint: {
@@ -1163,7 +1165,20 @@ const cn = {
       stateInfo_230010: 'Prometheus服务可用',
       stateInfo_230011: 'Endpoint 连接错误',
       alerts: '告警',
-      labels: '标签'
+      labels: '标签',
+      pattern: 'Name pattern',
+      credentials: '资格证书',
+      scrape_interval: '时间间隔',
+      scrape_interval_placeholder: '默认全局时间间隔',
+      scrape_timeout: '超时时间',
+      scrape_timeout_placeholder: '默认全局超时时间',
+      type: '类型',
+      bearer_token: 'Token',
+      username: '用户名',
+      password: '密码',
+      authTypeNull: '无',
+      authTypeWord: '用户名密码',
+      authTypeToken: 'Token',
     },
     metrics: {
       metrics: '指标',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 2c6a84b8e..2f7a55b34 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1132,6 +1132,7 @@ const en = {
       createModule: 'New module', // "新增组件"
       version: 'Version',
       walk: 'Walk',
+      type: 'Type',
       maxRepetitions: 'Max repetitions',
       retries: 'Retries',
       timeout: 'Timeout',
@@ -1141,6 +1142,7 @@ const en = {
       privProtocol: 'Priv protocol',
       contextName: 'Context name',
       privPassword: 'Priv password',
+      alerts: 'Alerts',
       tip: {
         defaultEndpointSet: 'Default endpoint settings', // "默认的Endpoint设置"
         relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'// "组件关联的Endpoint将默认配置以下端口/路径/参数"
@@ -1168,7 +1170,20 @@ const en = {
       stateInfo_230010: 'Promserver can be used',
       stateInfo_230011: 'Endpoint connection refused',
       alerts: 'Alerts',
-      labels: 'Labels'
+      labels: 'Labels',
+      pattern: 'Name pattern',
+      credentials: 'Credentials',
+      scrape_interval: 'Scrape interval',
+      scrape_interval_placeholder: 'default global scrape interval',
+      scrape_timeout: 'Scrape timeout',
+      scrape_timeout_placeholder: 'default global scrape timeout',
+      type: 'Type',
+      bearer_token: 'Token',
+      username: 'Username',
+      password: 'Password',
+      authTypeNull: 'None',
+      authTypeWord: 'Username and password',
+      authTypeToken: 'Token',
     },
     metrics: {
       metrics: 'Metrics', // "指标"
diff --git a/nezha-fronted/src/components/common/popBox/selectWalk.vue b/nezha-fronted/src/components/common/popBox/selectWalk.vue
index fc4a796e3..5ad5c94e7 100644
--- a/nezha-fronted/src/components/common/popBox/selectWalk.vue
+++ b/nezha-fronted/src/components/common/popBox/selectWalk.vue
@@ -22,18 +22,20 @@
           :default-checked-keys="currentWalk"
         >
           <div slot-scope="data" :class="getClass(data.data.objectID)" class="walk-tree-item">
-            <span v-if="!data.data.type"><i class="nz-icon nz-icon-reading"></i></span>
-            <span v-else>
-              <i v-if="data.data.type.toUpperCase() === 'IDENTIFIER'" class="el-icon-folder-opened"></i>
-              <i v-if="data.data.type.toUpperCase() === 'OBJECT' && data.data.subTree.length > 0" class="el-icon-folder-opened"></i>
-              <i v-if="data.data.type.toUpperCase() === 'OBJECT' && data.data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
-              <i v-if="data.data.type.toUpperCase() === 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
-              <i v-if="data.data.type.toUpperCase() === 'TABLE'" class="nz-icon nz-icon-table"></i>
-              <span style="position: relative;" @click.stop="showDetail(data.data, $event)">
-                <i class="nz-icon nz-icon-info-normal metric-tip-icon"></i>
+            <span>
+              <span v-if="!data.data.type"><i class="nz-icon nz-icon-reading"></i></span>
+              <span v-else>
+                <i v-if="data.data.type.toUpperCase() === 'IDENTIFIER'" class="el-icon-folder-opened"></i>
+                <i v-if="data.data.type.toUpperCase() === 'OBJECT' && data.data.subTree.length > 0" class="el-icon-folder-opened"></i>
+                <i v-if="data.data.type.toUpperCase() === 'OBJECT' && data.data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
+                <i v-if="data.data.type.toUpperCase() === 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
+                <i v-if="data.data.type.toUpperCase() === 'TABLE'" class="nz-icon nz-icon-table"></i>
+                <span style="position: relative;" @click.stop="showDetail(data.data, $event)">
+                  <i class="nz-icon nz-icon-info-normal metric-tip-icon"></i>
+                </span>
               </span>
             </span>
-            {{data.name}}
+            {{data.data.name}}
           </div>
         </el-tree>
       </div>
@@ -64,6 +66,9 @@ export default {
   computed: {
     getClass () {
       return (value) => {
+        if (!value) {
+          return ''
+        }
         return this.currentWalk.indexOf(value) == -1 ? '' : 'walk-active'
       }
     },
@@ -98,7 +103,8 @@ export default {
     show () {
       this.popBox.show = true
     },
-    hideDetail () {
+    hideDetail (data,num) {
+      console.log(data,num)
       this.tempWalk.detailShow = false
     },
     showDetail (data, e) {
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 4c3fa269a..4466b033f 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -113,7 +113,11 @@
       <div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
         <div>{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
-
+<button @click="changeScreen" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
+        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+>
+                  <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
+        </button>
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
                 style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
         >
@@ -128,12 +132,7 @@
             :showTimePicker="false"
             ref="pickTime">
           </pick-time>
-          <button @click="changeScreen" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
-                  style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
-                  :class="topoScreen?'':''"
-          >
-                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
-        </button>
+
       </span>
       </div>
     </div>
@@ -758,7 +757,7 @@ export default {
         if (this.fromPrev) {
           resolve(this.topoPrevDataS)
         }
-        this.$get('/project/topo', { projectId: this.obj.id }).then(res => {
+        this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
           let data = res.data.topo
           if (!res.data.topo || !data.pens) {
             data = {
@@ -806,9 +805,17 @@ export default {
                   item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
                 }
                 if (item.type === 0) {
-                  promiseArr.push(this.$get('/module/stat', { id: item.data.moduleId }))
+                  // promiseArr.push(this.$get('/monitor/module/stat', { id: item.data.moduleId }))
+                  item.data.state = {}
+                  item.data.state.asset = false
+                  item.data.state.endpoint = false
+                  item.data.state.alert = false
                 } else {
-                  promiseArr.push({ type: 1 })
+                  // promiseArr.push({ type: 1 })
+                  item.data.state = {}
+                  item.data.state.asset = false
+                  item.data.state.endpoint = false
+                  item.data.state.alert = false
                 }
               })
 
@@ -1547,11 +1554,11 @@ export default {
         form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
       }
       form.append('unit', this.uploadPic.unit)
-      this.$post('/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.dealImg(`/project/topo/icon/${res.data.id}`).then((data) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
@@ -1587,7 +1594,7 @@ export default {
     },
 
     delImg (item) {
-      this.$delete('/project/topo/icon?ids=' + item.data.imageId).then(res => {
+      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
           this.addNodeInit()
@@ -1599,7 +1606,7 @@ export default {
 
     addNodeInit (imgidList) {
       if (!this.fromOverView) {
-        this.$get('/project/topo/icon').then(res => {
+        this.$get('monitor/project/topo/icon').then(res => {
           this.imgageLoading = true
           // this.tools[1].children=[];
           const imgArr = []
@@ -1607,7 +1614,7 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            promiseArr.push(this.dealImg(`/project/topo/icon/${item.id}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2) => {
@@ -1651,7 +1658,7 @@ export default {
         const promiseArr = []
         imgidList.forEach((item, index) => {
           if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`/project/topo/icon/${item.data.imageId}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
           } else {
             promiseArr.push('')
           }
@@ -1832,7 +1839,7 @@ export default {
         if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
           getTopology(this.topologyIndex).data.scale = this.oldScale
         }
-        this.$put('/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+        this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
           this.prevent_opt.save = false
           if (res.code === 200) {
             this.$message({
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index 952d8ff20..a0d0f05d0 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -797,7 +797,7 @@
           if (this.fromPrev) {
             resolve(this.topoPrevDataS)
           }
-          this.$get('/project/topo', { projectId: this.obj.id }).then(res => {
+          this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
             let data = res.data.topo
             if (!res.data.topo || !data.pens) {
               data = {
@@ -1587,11 +1587,11 @@
           form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
         }
         form.append('unit', this.uploadPic.unit)
-        this.$post('/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
           if (res.code == 200) {
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
             this.uploadPicShow = false
-            this.dealImg(`/project/topo/icon/${res.data.id}`).then((data) => {
+            this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
               const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
               if (group) {
                 group.children.push({
@@ -1627,7 +1627,7 @@
       },
 
       delImg (item) {
-        this.$delete('/project/topo/icon?ids=' + item.data.imageId).then(res => {
+        this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
           if (res.code == 200) {
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.addNodeInit()
@@ -1639,7 +1639,7 @@
 
       addNodeInit (imgidList) {
         if (!this.fromOverView) {
-          this.$get('/project/topo/icon').then(res => {
+          this.$get('monitor/project/topo/icon').then(res => {
             this.imgageLoading = true
             // this.tools[1].children=[];
             const imgArr = []
@@ -1647,7 +1647,7 @@
             res.data.list.forEach((item, index) => {
               item.imageName = item.name
               delete item.name
-              promiseArr.push(this.dealImg(`/project/topo/icon/${item.id}`))
+              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
               imgArr.push({ ...item })
             })
             Promise.all(promiseArr).then((res2) => {
@@ -1691,7 +1691,7 @@
           const promiseArr = []
           imgidList.forEach((item, index) => {
             if (item.data.imageId) {
-              promiseArr.push(this.dealImg(`/project/topo/icon/${item.data.imageId}`))
+              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
             } else {
               promiseArr.push('')
             }
@@ -1872,7 +1872,7 @@
           if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
             getTopology(this.topologyIndex).data.scale = this.oldScale
           }
-          this.$put('/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+          this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
             this.prevent_opt.save = false
             if (res.code === 200) {
               this.$message({
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 0e64d7be8..e9ad84287 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -16,27 +16,40 @@
     <!-- begin--表单-->
     <div class="right-box-form-box" ref="scrollbar">
       <el-form class="right-box-form right-box-form-left" :model="editModule" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm">
-        <el-form-item :label='$t("project.project.project")' prop="project">
-          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.project" placeholder="" size="small" id="module-box-input-project">
-            <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
-          </el-select>
-        </el-form-item>
+        <!--name-->
         <el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="125px">
           <el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small" id="module-box-input-name"></el-input>
         </el-form-item>
+        <!--project-->
+        <el-form-item :label='$t("project.project.project")' prop="projectId">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.projectId" placeholder="" size="small" id="module-box-input-project">
+            <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--remark-->
+        <el-form-item :label='$t("project.module.description")' prop="remark">
+          <el-input
+            type="textarea"
+            placeholder=""
+            maxlength="1024"
+            v-model="editModule.remark"
+            size="small"
+            :autosize="{ minRows: 1, maxRows: 6}"
+            class="not-fixed-height no-resize"
+            id="module-box-input-remark"></el-input>
+        </el-form-item>
 
-        <div class="nz-tab module-box-type" style="margin-bottom: 15px;">
-          <div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'http', 'unclickable': editModule.id}">HTTP</div>
-          </div>
-          <div @click="changeType('snmp')" class="nz-tab-item-box" id="module-type-2">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'snmp', 'unclickable': editModule.id}">SNMP</div>
-          </div>
-        </div>
+        <!--type-->
+        <el-form-item :label='$t("project.endpoint.type")' prop="type">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.type" placeholder="" size="small" id="module-box-input-type" :disabled="!!editModule.id" @change="changeAuthType">
+            <el-option :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
 
         <!-- snmp表单 -->
         <span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
-          <div class="right-box-sub-title">SNMP settings</div>
+          <div class="right-box-sub-title">SNMP settings
+          </div>
           <div class="right-box-line"></div>
 
           <el-row>
@@ -67,239 +80,158 @@
               </el-form-item>
             </el-col>
           </el-row>
-
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label">{{$t('project.module.version')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="version">
-                <el-radio-group v-model.number="editModule.version" size="small" id="module-box-input-version">
-                  <el-radio-button :label="2"></el-radio-button>
-                  <el-radio-button :label="3"></el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="max_repetitions">
-                <el-input v-model.number="editModule.max_repetitions" size="small" id="module-box-input-max_repetitions"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label">{{$t('project.module.retries')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="retries">
-                <el-input v-model.number="editModule.retries" size="small" id="module-box-input-retries"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label">{{$t('project.module.timeout')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="timeout">
-                <el-input v-model.number="editModule.timeout" size="small" id="module-box-input-timeout">
-                  <template slot="append">second</template>
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="24">
-              <div class="right-box-sub-title">Auth</div>
-              <div class="right-box-line"></div>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="community">
-                <el-input v-model.trim="editModule.community" maxlength="64" show-word-limit size="small" id="module-box-input-community"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <!--SNMP V3 setting-->
-          <template v-if="editModule.version == 3">
-            <el-row>
-              <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('login.username')}}</div>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="username">
-                  <el-input v-model.trim="editModule.username" maxlength="64" show-word-limit size="small" id="module-box-input-username"></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <el-row>
-              <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.securityLevel')}}</div>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="security_level">
-                  <el-radio-group size="small" v-model="editModule.security_level" id="module-box-input-security_level">
-                    <el-radio-button label="noAuthNoPriv"></el-radio-button>
-                    <el-radio-button label="authNoPriv"></el-radio-button>
-                    <el-radio-button label="authPriv"></el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <el-row v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
-              <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('login.password')}}</div>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="password">
-                  <el-input v-model.trim="editModule.password" type="password" show-password maxlength="64" show-word-limit size="small" id="module-box-input-password"></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <el-row class="same-label-width" v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
-              <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.authProtocol')}}</div>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="auth_protocol">
-                  <el-radio-group v-model="editModule.auth_protocol" size="small" id="module-box-input-auth_protocol">
-                    <el-radio-button label="MD5"></el-radio-button>
-                    <el-radio-button label="SHA"></el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <el-row class="same-label-width" v-if="editModule.security_level == 'authPriv'">
-              <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.privProtocol')}}</div>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="priv_protocol">
-                  <el-radio-group v-model="editModule.priv_protocol" size="small" id="module-box-input-priv_protocol">
-                    <el-radio-button label="DES"></el-radio-button>
-                    <el-radio-button label="AES"></el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <el-row v-if="editModule.security_level == 'authPriv'">
-              <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="priv_password">
-                  <el-input v-model.trim="editModule.priv_password" type="password" show-password maxlength="64" show-word-limit size="small" id="module-box-input-priv_password"></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </template>
-
-          <el-row v-if="editModule.version == 3">
-            <el-col :span="6">
-              <div class="sub-label">{{$t('project.module.contextName')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="context_name">
-                <el-input v-model.trim="editModule.context_name" maxlength="64" show-word-limit size="small" id="module-box-input-context_name"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <!--credentials-->
+        <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.configs.snmpCredentialsId" placeholder="" size="small" id="module-box-input-credentials">
+            <el-option :id="'module-type-'+item.id" v-for="item in credentialList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
         </span>
 
-        <div class="right-box-form-tip" :style="{'margin-bottom': '15px','margin-left':editModule.type.toLowerCase()=='snmp'?'15px':'0'}">
-          {{$t('project.module.tip.defaultEndpointSet')}}
-          <div></div>
-          {{$t('project.module.tip.relation')}}
+        <!--Enpoint template-->
+        <div class="right-box-sub-title">Enpoint template
+          <el-tooltip placement="top" effect="light">
+            <div slot="content">
+              {{$t('project.module.tip.defaultEndpointSet')}}
+              <div></div>
+              {{$t('project.module.tip.relation')}}
+            </div>
+            <i class="nz-icon nz-icon-info-normal"></i>
+          </el-tooltip>
+        </div>
+        <div class="right-box-line"></div>
+
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="Basic" name="Basic">
+            <!--path-->
+            <el-form-item :label='$t("project.endpoint.path")' prop="configs.metrics_path" class="half-form-item">
+              <el-input placeholder="" v-model="editModule.configs.metrics_path" size="small" id="module-box-input-path"></el-input>
+            </el-form-item>
+            <!--port-->
+            <el-form-item :label='$t("project.endpoint.port")' prop="port" class="half-form-item">
+              <el-input placeholder="" v-model.number="editModule.port" size="small" id="module-box-input-port"></el-input>
+            </el-form-item>
+            <!--name pattern-->
+            <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">
+<!--              <el-input placeholder="" v-model=""></el-input>-->
+              <el-autocomplete
+                class="inline-input"
+                size="small"
+                id="module-box-input-pattern"
+                v-model="editModule.endpointNameTmpl"
+                :fetch-suggestions="querySearch"
+                placeholder="请输入内容"
+              ></el-autocomplete>
+            </el-form-item>
+            <!--host-->
+            <el-form-item :label='$t("project.endpoint.host")' prop="host" class="half-form-item">
+              <el-input placeholder="" v-model.number="editModule.configs.host" size="small" id="module-box-input-host"></el-input>
+            </el-form-item>
+            <transition name="el-zoom-in-top">
+              <div v-show="showAllBasicOption" >
+                <!--scrape_interval-->
+                <el-form-item :label='$t("project.endpoint.scrape_interval")' prop="scrape_interval" class="half-form-item">
+                  <el-input :placeholder='$t("project.endpoint.scrape_interval_placeholder")' v-model.number="editModule.configs.scrape_interval" size="small" id="module-box-input-scrape_interval"></el-input>
+                </el-form-item>
+                <!--scrape_timeout-->
+                <el-form-item :label='$t("project.endpoint.scrape_timeout")' prop="scrape_timeout" class="half-form-item">
+                  <el-input :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' v-model.number="editModule.configs.scrape_timeout" size="small" id="module-box-input-scrape_timeout"></el-input>
+                </el-form-item>
+              </div>
+            </transition>
+
+            <div style="text-align: center"><i class="nz-icon nz-icon-drop-down need-rotate" :class="showAllBasicOption?'is-active':''" @click="showAllBasicOption=!showAllBasicOption"></i></div>
+          </el-tab-pane>
+          <el-tab-pane label="Labels" name="Labels">
+            <el-form-item :label="$t('project.endpoint.labels')" class="right-box-form-param label-position">
+
+              <div style="text-align: right;margin-bottom: 5px">
+                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+                <!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
+                <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
+                <!--</button>-->
+                <span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+              </div>
+
+              <div class="param-box param-box-module">
+                <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
+                  <div v-for="(item, index) in editModule.configs.labelModule" :key="index" class="param-box-row">
+                    <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
+                      <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
+                    </el-form-item>
+                    <span class="param-box-row-eq">=</span>
+                    <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.value'">
+                      <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                    </el-form-item>
+                    <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+          </el-tab-pane>
+          <el-tab-pane label="Parameter" name="Parameter">
+            <el-form-item :label="$t('project.endpoint.param')" class="right-box-form-param label-position">
+
+              <div style="text-align: right;margin-bottom: 5px">
+                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+                <!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
+                <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
+                <!--</button>-->
+                <span id="module-add-param" type="button" @click="addParam" class="right-box-form-add">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+              </div>
+
+              <div class="param-box param-box-module">
+                <div style="height: 100%; overflow: auto;" id="module-box-params">
+                  <div v-for="(item, index) in editModule.configs.paramObj" :key="index" class="param-box-row">
+                    <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
+                      <el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
+                    </el-form-item>
+                    <span class="param-box-row-eq">=</span>
+                    <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
+                      <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                    </el-form-item>
+                    <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+          </el-tab-pane>
+          <el-tab-pane label="Auth" name="Auth" v-if="editModule.type !== 'snmp'">
+            <!--authtype-->
+            <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
+              <el-select @change="changeAuthType" value-key="id" popper-class="config-dropdown" v-model="authType" placeholder="" size="small" id="module-box-input-auth-type">
+                <el-option :id="'module-type-'+item.id" v-for="item in authTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <!--authtype 1-->
+            <el-form-item :label='$t("project.endpoint.username")' prop="authtype" v-if="authType === 1" class="half-form-item">
+              <el-input placeholder='' v-model.number="editModule.configs.basic_auth.username" size="small" id="module-box-input-uername"></el-input>
+            </el-form-item>
+
+            <el-form-item :label='$t("project.endpoint.password")' prop="authtype" v-if="authType === 1" class="half-form-item">
+              <el-input placeholder='' v-model.number="editModule.configs.basic_auth.password" size="small" id="module-box-input-password"></el-input>
+            </el-form-item>
+
+            <!--authtype 2-->
+            <el-form-item :label='$t("project.endpoint.bearer_token")' prop="authtype" v-if="authType === 2">
+              <el-input placeholder='' v-model.number="editModule.configs.bearer_token" size="small" id="module-box-input-bearer_token"></el-input>
+            </el-form-item>
+
+          </el-tab-pane>
+        </el-tabs>
+
+        <div>
+          asd
         </div>
 
-        <el-form-item :label='$t("project.endpoint.port")' prop="port" >
-          <el-input placeholder="" v-model.number="editModule.port" size="small" id="module-box-input-port"></el-input>
-        </el-form-item>
-
-        <el-form-item v-if="editModule.type && editModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
-          <el-input placeholder="" v-model="editModule.path" size="small" id="module-box-input-path"></el-input>
-        </el-form-item>
-
-        <el-form-item :label="$t('project.endpoint.param')" class="right-box-form-param label-position" v-if="editModule.type.toLowerCase() == 'http'">
-
-          <div style="text-align: right;margin-bottom: 5px">
-            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-            <!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
-            <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
-            <!--</button>-->
-            <span id="module-add-param" type="button" @click="addParam" class="right-box-form-add">
-              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
-            </span>
-          </div>
-
-          <div class="param-box param-box-module">
-            <div style="height: 100%; overflow: auto;" id="module-box-params">
-              <div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
-                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                  <el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
-                </el-form-item>
-                <span class="param-box-row-eq">=</span>
-                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                </el-form-item>
-                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-
-        <el-form-item :label="$t('project.endpoint.labels')" class="right-box-form-param label-position">
-
-          <div style="text-align: right;margin-bottom: 5px">
-            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-            <!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
-            <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
-            <!--</button>-->
-            <span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add">
-              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
-            </span>
-          </div>
-
-          <div class="param-box param-box-module">
-            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
-              <div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row">
-                <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
-                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                </el-form-item>
-                <span class="param-box-row-eq">=</span>
-                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.value'">
-                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                </el-form-item>
-                <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-
-        <el-form-item :label='$t("project.module.description")' prop="remark">
-          <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="editModule.remark" size="small" id="module-box-input-project"></el-input>
-        </el-form-item>
+        <div class="right-box-form-tip" :style="{'margin-bottom': '15px','margin-left':editModule.type.toLowerCase()=='snmp'?'15px':'0'}">
 
+        </div>
       </el-form>
     </div>
 
@@ -331,14 +263,21 @@ export default {
   data () {
     return {
       walkData: [],
+      activeName: 'Basic',
       expandedWalkData: [],
+      radio: 'password',
       editModule: {},
+      restaurants: [
+        { value: '{{module.name}}-{{asset.name}}' },
+        { value: '{{module.name}}-{{asset.manageIp}}' }
+      ],
+      showAllBasicOption: false,
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { validator: noSpecialChar, trigger: 'change' }
         ],
-        project: [
+        projectId: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ],
         walk: [
@@ -366,7 +305,24 @@ export default {
           { validator: nzNumber, trigger: 'blur' }
         ]
       },
-      projectList: []
+      projectList: [],
+      credentialList: [],
+      typetList: [
+        {
+          value: 'http',
+          name: 'HTTP'
+        },
+        {
+          value: 'snmp',
+          name: 'SNMP'
+        }
+      ],
+      authType: 0,
+      authTypeList: [
+        { name: this.$t('project.endpoint.authTypeNull'), value: 0 },
+        { name: this.$t('project.endpoint.authTypeWord'), value: 1 },
+        { name: this.$t('project.endpoint.authTypeToken'), value: 2 }
+      ]
     }
   },
   methods: {
@@ -437,11 +393,13 @@ export default {
       this.$get('mib/tree', { pageSize: -1, pageNo: 1 }).then(response => {
         if (response.code === 200) {
           const obj = JSON.parse(response.data)
+          console.log(obj)
           this.walkData = []
           for (const item in obj) {
             setAttr(obj[item], 'detailShow', false)
             this.walkData.push({ name: item, detailShow: false, subTree: obj[item] })
           }
+          console.log(this.walkData)
         }
       })
       function setAttr (tree, name, value) {
@@ -478,79 +436,26 @@ export default {
         this.editModule.port = 161
       }
     },
-    // 转化snmpParam属性
-    parseSnmpParam (module) {
-      const snmpObj = { // 下划线命名是因为业务需求
-        walk: module.walk,
-        version: module.version, // 2/3
-        max_repetitions: module.max_repetitions ? module.max_repetitions : 25,
-        retries: module.retries ? module.retries : 3,
-        timeout: module.timeout ? module.timeout + 's' : '10s', // s
-        auth: {
-          community: module.community
-        }
-      }
-      if (module.version == 3) {
-        snmpObj.auth.username = module.username
-        snmpObj.auth.security_level = module.security_level
-        snmpObj.auth.context_name = module.context_name
-      }
-      if (module.security_level == 'authNoPriv' || module.security_level == 'authPriv') {
-        snmpObj.auth.password = module.password
-        snmpObj.auth.auth_protocol = module.auth_protocol
-        if (module.security_level != 'authNoPriv') {
-          snmpObj.auth.priv_password = module.priv_password
-          snmpObj.auth.priv_protocol = module.priv_protocol
-        }
-      }
-      module.snmpParam = JSON.stringify(snmpObj)
-    },
-    // 回显时解析snmpParam
-    reparseSnmpParam (module) {
-      if (!module.snmpParam) {
-        return
-      }
-      const snmpObj = JSON.parse(module.snmpParam)
-      module.walk = snmpObj.walk
-      module.version = snmpObj.version
-      module.max_repetitions = snmpObj.max_repetitions
-      module.retries = snmpObj.retries
-      module.timeout = parseInt(snmpObj.timeout.replace('s', ''))
-      module.community = snmpObj.auth.community
-      if (snmpObj.version == 3) {
-        module.username = snmpObj.auth.username
-        module.security_level = snmpObj.auth.security_level
-        module.context_name = snmpObj.auth.context_name
-      }
-      if (snmpObj.auth.security_level == 'authNoPriv' || snmpObj.auth.security_level == 'authPriv') {
-        module.password = snmpObj.auth.password
-        module.auth_protocol = snmpObj.auth.auth_protocol
-        if (snmpObj.auth.security_level != 'authNoPriv') {
-          module.priv_password = snmpObj.auth.priv_password
-          module.priv_protocol = snmpObj.auth.priv_protocol
-        }
-      }
-    },
     /* 保存 */
     save () {
-      if (this.editModule.type.toLowerCase() == 'snmp') {
-        this.editModule.paramObj = []// 处理snmp可能会带有param的问题
+      this.editModule.configs.param = this.paramToJson(this.editModule.configs.paramObj)
+      this.editModule.configs.labels = this.labelsToJson(this.editModule.configs.labelModule)
+      const params = { ...this.editModule }
+      params.configs.walk = params.walk
+      params.configs.prot = params.prot
+      params.configs = JSON.stringify(params.configs)
+      if (this.authType === 2 && !this.editModule.configs.bearer_token) {
+        this.$message.error("'token' is required")
+      } else if (this.authType === 1 && !(this.editModule.configs.basic_auth.username && this.editModule.configs.basic_auth.password)) {
+        this.$message.error("'username' and 'password' is required")
+      } else {
+        this.authType = 0
       }
-      this.editModule.param = this.paramToJson(this.editModule.paramObj)
-      this.editModule.labels = this.labelsToJson(this.editModule.labelModule)
       this.$refs.moduleForm.validate((valid) => {
         if (valid) {
           this.prevent_opt.save = true
-          if (this.editModule.type.toLowerCase() == 'snmp') {
-            this.parseSnmpParam(this.editModule)
-          } else {
-            if (this.editModule.snmpParam) {
-              this.editModule.snmpParam = ''
-            }
-          }
-          this.editModule.projectId = this.editModule.project.id
           if (this.editModule.id) {
-            this.$put('module', this.editModule).then(response => {
+            this.$put('monitor/module', params).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.$store.commit('setReloadFacade')
@@ -561,7 +466,7 @@ export default {
               this.prevent_opt.save = false
             })
           } else {
-            this.$post('module', this.editModule).then(response => {
+            this.$post('monitor/module', params).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.$store.commit('setReloadFacade')
@@ -584,7 +489,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('module?ids=' + this.editModule.id).then(response => {
+        this.$delete('monitor/module?ids=' + this.editModule.id).then(response => {
           if (response.code === 200) {
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.$store.commit('setReloadFacade')
@@ -598,33 +503,40 @@ export default {
 
     /* 获取project列表 */
     getProjectList () {
-      this.$get('project', { pageSize: -1, pageNo: 1 }).then(response => {
+      this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
         if (response.code === 200) {
           this.projectList = response.data.list
         }
       })
     },
-
+    // get snmp
+    getCredential () {
+      this.$get('/snmp/credential', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.credentialList = response.data.list
+        }
+      })
+    },
     // 清除param
     clearAllParam () {
-      this.editModule.paramObj = []
+      this.editModule.configs.paramObj = []
     },
 
     // 新增param
     addParam () {
-      this.editModule.paramObj.push({ key: '', value: '' })
+      this.editModule.configs.paramObj.push({ key: '', value: '' })
     },
     // 移除单个param
     removeParam (index) {
-      this.editModule.paramObj.splice(index, 1)
+      this.editModule.configs.paramObj.splice(index, 1)
     },
     // 新增label
     addLabel () {
-      this.editModule.labelModule.push({ key: '', value: '' })
+      this.editModule.configs.labelModule.push({ key: '', value: '' })
     },
     // 移除单个Label
     removeLabel (index) {
-      this.editModule.labelModule.splice(index, 1)
+      this.editModule.configs.labelModule.splice(index, 1)
     },
     // 将param转为json字符串格式
     paramToJson (param) {
@@ -651,6 +563,25 @@ export default {
       } else {
         return jsonString
       }
+    },
+    // 输入建议
+    querySearch (queryString, cb) {
+      const restaurants = this.restaurants
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    changeAuthType () {
+      this.editModule.configs.bearer_token = ''
+      this.editModule.configs.basic_auth = {
+        username: '',
+        password: ''
+      }
     }
   },
   mounted () {
@@ -658,6 +589,7 @@ export default {
   },
   created () {
     this.getProjectList()
+    this.getCredential()
   },
   computed: {
     mibName () {
@@ -672,16 +604,30 @@ export default {
       deep: true,
       handler (n, o) {
         this.editModule = JSON.parse(JSON.stringify(n))
-        if (n.id) {
-          this.reparseSnmpParam(this.editModule)
+        this.activeName = 'Basic'
+
+        if (this.editModule.configs.bearer_token) {
+          this.authType = 2
+        } else if (this.editModule.configs.basic_auth.username) {
+          this.authType = 1
         } else {
-          if (n.type && n.type.toLowerCase() == 'snmp') {
-            this.$refs.selectWalk.show()
-            for (let i = 0; i < this.editModule.walk.length; i++) {
-              this.expandedWalkData.push(this.editModule.walk[i].substring(0, this.editModule.walk[i].lastIndexOf('.')))
-            }
+          this.authType = 0
+        }
+        if (n.type && n.type.toLowerCase() == 'snmp') {
+          this.$refs.selectWalk.show()
+          for (let i = 0; i < this.editModule.walk.length; i++) {
+            this.expandedWalkData.push(this.editModule.configs.walk[i].substring(0, this.editModule.configs.walk[i].lastIndexOf('.')))
           }
         }
+        // if (n.id) {
+        // } else {
+        //   if (n.type && n.type.toLowerCase() == 'snmp') {
+        //     this.$refs.selectWalk.show()
+        //     for (let i = 0; i < this.editModule.walk.length; i++) {
+        //       this.expandedWalkData.push(this.editModule.walk[i].substring(0, this.editModule.walk[i].lastIndexOf('.')))
+        //     }
+        //   }
+        // }
       }
     }
   }
@@ -733,6 +679,40 @@ export default {
     color: #999999;
     line-height: 21px;
   }
+  .half-form-item {
+    width: calc(50% - 30px);
+    display: inline-block;
+    padding: 0 18px 0 8px;
+  }
+  /deep/ .el-tabs__item{
+    width: 90px;
+    padding: 0;
+    text-align: center;
+  }
+  /deep/ .el-tabs__item.is-active{
+    color: #FA901C
+  }
+  /deep/ .el-tabs__active-bar{
+    background-color: #FA901C
+  }
+  /deep/ .el-radio-group{
+    width: 100%;
+  }
+  /deep/ .el-radio{
+    width: 100%;
+  }
+  /deep/ .el-autocomplete{
+    width: 100%;
+  }
+  .need-rotate.nz-icon-drop-down{
+    display: inline-block;
+    transition: transform .3s;
+  }
+  .need-rotate.nz-icon-drop-down.is-active{
+    transform: rotate(
+      -180deg
+    );
+  }
 </style>
 <style>
   .sub-label {
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
new file mode 100644
index 000000000..c528512c4
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-table
+    id="userTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="(selection) => { batchDeleteObjs = selection }"
+  >
+    <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 === 'name'">
+          {{scope.row[item.prop]}}
+        </template>
+        <template v-else-if="item.prop === 'type'">
+          {{scope.row[item.prop]}}
+        </template>
+        <template v-else-if="item.prop === 'project'">
+          {{scope.row[item.prop].name}}
+        </template>
+        <template v-else-if="item.prop === 'endpointNum'">
+          {{scope.row[item.prop]}}
+        </template>
+        <template v-else-if="item.prop === 'alertNum'">
+          {{scope.row[item.prop]}}
+        </template>
+        <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
+      </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="showBottomBox( scope.row)"><i class="nz-icon nz-icon-view1"></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="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><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: 'userTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('project.module.moduleName'),
+          prop: 'name',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.module.type'),
+          prop: 'type',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.project.project'),
+          prop: 'project',
+          show: true,
+          width: 150
+        },
+        {
+          label: this.$t('project.endpoint.endpoint'),
+          prop: 'endpointNum',
+          show: true,
+          width: 150
+        },{
+          label: this.$t('project.module.alerts'),
+          prop: 'alertNum',
+          show: true,
+          width: 150
+        },
+        {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true,
+          minWidth: 150
+        }
+      ]
+    }
+  },
+  methods: {
+    showBottomBox (project) {
+      this.$store.commit('currentProjectChange', project)
+    },
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') === username
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 50b6e4ee9..3b210cee1 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -432,7 +432,7 @@ export default {
           this.topologyLoading = false
         }
         res.data.list.forEach((item) => {
-          axiosAll.push(axios.get(`/project/topo?projectId=${item.id}`))
+          axiosAll.push(axios.get(`monitor/project/topo?projectId=${item.id}`))
         })
         axios.all(axiosAll).then(res2 => {
           res2 = res2.map((item, index) => {
@@ -460,7 +460,7 @@ export default {
           this.$get('/module/stat', { id: item.id }).then(res => {
             item.state = res.data
           })
-          promiseArr.push(this.dealImg(`/project/topo/icon/${item.iconId}`))
+          promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.iconId}`))
         })
         Promise.all(promiseArr).then(res => {
           arr.forEach((item, index) => {
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
new file mode 100644
index 000000000..642a11a57
--- /dev/null
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="module-list">
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.user"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg">
+      <template v-slot:top-tool-right>
+        <button id="account-add" v-has="'monitor_module_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
+                type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+        <delete-button id="account-list-batch-delete" v-has="'monitor_module_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot="slotProps">
+        <module-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"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></module-table>
+      </template>
+      <template v-slot:pagination>
+        <div class="module-page">
+          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+        </div>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <moduleBox v-if="rightBox.show" :module="object" @close="closeRightBox"></moduleBox>
+    </transition>
+  </div>
+</template>
+<script>
+import deleteButton from '@/components/common/deleteButton'
+import moduleBox from '@/components/common/rightBox/moduleBox'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import moduleTable from '@/components/common/table/settings/moduleTable'
+
+export default {
+  name: 'moduleList',
+  components: {
+    nzDataList,
+    moduleBox,
+    deleteButton,
+    moduleTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'monitor/module',
+      blankObject: {
+        id: '',
+        projectId: '',
+        name: '',
+        endpointNameTmpl: '{{module.name}}-{{asset.name}}',
+        endpointHostTmpl: '',
+        type: 'http',
+        port: 9100,
+        configs: {
+          scrape_interval: '',
+          scrape_timeout: '',
+          metrics_path: '',
+          basic_auth: {
+            username: '',
+            password: ''
+          },
+          bearer_token: '',
+          labels: '',
+          params: '',
+          paramObj: [],
+          labelModule: [],
+          walk: [],
+          host: '{{asset.manageIp}}',
+          port: '',
+          snmpCredentialsId: 'public'
+        },
+        walk: []
+      }, // 新增/编辑的module
+      tableId: 'moduleTable',
+      queryPermission: 'account_view',
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: 'module name',
+          type: 'input',
+          label: 'name',
+          disabled: false
+        },
+        {
+          id: 10,
+          name: 'module id',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }]
+      },
+      roles: []
+    }
+  },
+  methods: {
+    edit (u) {
+      this.object = JSON.parse(JSON.stringify(u))
+      this.object.configs = JSON.parse(this.object.configs)
+      this.object.walk = JSON.parse(this.object.configs.walk)
+      this.object.port = JSON.parse(this.object.configs.port)
+      this.rightBox.show = true
+    },
+  },
+  computed: {
+  },
+  mounted () {
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/monitor/project/index.vue b/nezha-fronted/src/components/page/monitor/project/index.vue
index 38bb04552..428f5df62 100644
--- a/nezha-fronted/src/components/page/monitor/project/index.vue
+++ b/nezha-fronted/src/components/page/monitor/project/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-list">
     <projectList  :class="showList?'projectList':'hide'" />
-    <projectTopo class="projectTopo"/>
+    <projectTopo  :class="showList?'projectTopo':'projectTopo ml10'" />
   </div>
 </template>
 
@@ -45,5 +45,8 @@ export default {
   .hide{
     display: none;
   }
+  .ml10{
+    margin-left: 10px;
+  }
 }
 </style>
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index 1991679b9..1b0cfa1af 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -8,11 +8,11 @@
       :layout="['searchInput', 'elementSet']"
       :search-msg="searchMsg">
       <template v-slot:top-tool-right>
-        <button id="account-add" v-has="'project_toAdd'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
+        <button id="account-add" v-has="'project_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="account-list-batch-delete" v-has="'account_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button id="account-list-batch-delete" v-has="'project_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot="slotProps">
         <project-table
@@ -47,7 +47,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import projectTable from '@/components/common/table/settings/projectTable'
 
 export default {
-  name: 'user',
+  name: 'projectList',
   components: {
     nzDataList,
     projectBox,
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index b15b7bd9f..0a7e92a84 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -37,6 +37,10 @@ export default new Router({
           path: '/monitor/project',
           component: resolve => require(['../components/page/monitor/project/index.vue'], resolve)
         },
+        {
+          path: '/monitor/module',
+          component: resolve => require(['../components/page/monitor/module/moduleList.vue'], resolve)
+        },
         {
           path: '/asset',
           component: resolve => require(['../components/page/asset/asset.vue'], resolve)