diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index a8e0a7333..ad6c1578d 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -175,6 +175,7 @@ export default {
   },
   data () {
     return {
+      currentMsg: null,
       tableHeight: 0,
       data: {}, // 该图表信息,chartItem
       unit: {},
@@ -338,7 +339,7 @@ export default {
       const vm = this
       this.$chartResizeTool.start(vm, this.data, e)
     },
-    formatThreshold: function (value, unit) {
+    formatThreshold (value, unit) {
       const unitMethod = chartDataFormat.getUnit(unit)
       if (unitMethod && value) {
         return unitMethod.compute(value, null, 2)
@@ -346,7 +347,7 @@ export default {
         return value
       }
     },
-    computeDistance: function (str) {
+    computeDistance (str) {
       let width = 0
       const html = document.createElement('span')
       html.innerText = str
@@ -356,7 +357,7 @@ export default {
       document.querySelector('.getTextWidth').remove()
       return Number('-' + (width + 5))
     },
-    returnMarkArea: function () {
+    returnMarkArea () {
       if (this.currentMsg) {
         if (this.currentMsg.alertRule.operator == '>' || this.currentMsg.alertRule.operator == '>=') {
           return [{ yAxis: this.currentMsg.alertRule.threshold }, {}]
@@ -382,7 +383,7 @@ export default {
       this.importBox.show = false
       this.deleteBox.show = false
     },
-    screenDialogClose: function () {
+    screenDialogClose () {
       this.screenModal = false
       this.deleteBox.ids = []
       this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection()
@@ -413,7 +414,7 @@ export default {
         })
       })
     },
-    chartUnitChange: function (unit) {
+    chartUnitChange (unit) {
       this.chartUnit = unit
       this.$nextTick(() => {
         this.queryChartDate()
@@ -448,7 +449,7 @@ export default {
         this.$refs.messageChart.startLoading()
       }
       const axiosArr = []
-      const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
+      const paramStr = this.currentMsg ? JSON.stringify(this.promQueryParamConvert(this.currentMsg)) : null
       if (paramStr && paramStr.trim() != '""') {
         axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
         this.legend = []
@@ -474,7 +475,7 @@ export default {
                         symbol: ['circle', 'circle'],
                         label: {
                           distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
-                          formatter: function (params) {
+                          formatter (params) {
                             return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
                           }
                         },
@@ -537,7 +538,7 @@ export default {
         })
       }
     },
-    getAlertList: function (filterType, isPreview = false, chartInfo) {
+    getAlertList (filterType, isPreview = false, chartInfo) {
       this.resize()
       this.loadingTable = true
       this.isPreview = isPreview
@@ -551,6 +552,66 @@ export default {
       } else {
         chart = Object.assign({}, this.chartInfo)
       }
+      if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
+        const param = chart.param
+        if (param.endpointId) {
+          queryParam.endpointIds = param.endpointId
+        } else {
+          if (param.moduleId) {
+            queryParam.moduleIds = param.moduleId
+          } else {
+            if (param.projectId) {
+              queryParam.projectIds = param.projectId
+            }
+          }
+        }
+
+        if (param.ruleId) {
+          queryParam.ruleIds = param.ruleId
+        }
+        if (param.severity) {
+          queryParam.severityIds = param.severity
+        }
+        if (param.state) {
+          queryParam.state = param.state
+        }
+      }
+      if (this.searchLabel.orderBy) {
+        queryParam.orderBy = this.searchLabel.orderBy
+      }
+      // this.startLoading(filterType);
+      this.$get('/alert/message', queryParam).then(response => {
+        if (response.code === 200) {
+          this.storedTableData = response.data.list
+          this.storedScreanTableData = response.data.list
+          this.pageObj.total = response.data.total
+          this.isError = false
+          this.errorContent = ''
+          this.divFirstShow = true
+
+          this.firstShow = true // 展示操作按键
+          this.loadingTable = false
+          this.endLoading(filterType)
+        } else {
+          this.isError = true
+          this.errorContent = response.msg
+        }
+      })
+    },
+    getAlerScreetList (filterType, isPreview = false, chartInfo) {
+      this.resize()
+      this.loadingTable = true
+      this.isPreview = isPreview
+      const queryParam = {
+        pageSize: this.screenPageObj.pageSize,
+        pageNo: this.screenPageObj.pageNo
+      }
+      let chart
+      if (chartInfo) {
+        chart = Object.assign({}, chartInfo)
+      } else {
+        chart = Object.assign({}, this.chartInfo)
+      }
       if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
         const param = chart.param
         if (param.endpointId && param.endpointId != '') {
@@ -566,70 +627,10 @@ export default {
         }
 
         if (param.ruleId && param.ruleId != '') {
-          queryParam.ruleId = param.ruleId
+          queryParam.ruleIds = param.ruleId
         }
         if (param.severity && param.severity != '') {
-          queryParam.severity = param.severity
-        }
-        if (param.state && param.state != '') {
-          queryParam.state = param.state
-        }
-      }
-      if (this.searchLabel.orderBy) {
-        queryParam.orderBy = this.searchLabel.orderBy
-      }
-      // this.startLoading(filterType);
-      this.$get('/alert/message', queryParam).then(response => {
-        if (response.code == 200) {
-          this.storedTableData = response.data.list
-          this.storedScreanTableData = response.data.list
-          this.pageObj.total = response.data.total
-          this.isError = false
-          this.errorContent = ''
-          this.divFirstShow = true
-
-          this.firstShow = true // 展示操作按键
-          this.loadingTable = false
-          this.endLoading(filterType)
-        } else {
-          this.isError = true
-          this.errorContent = response.msg
-        }
-      })
-    },
-    getAlerScreetList: function (filterType, isPreview = false, chartInfo) {
-      this.resize()
-      this.loadingTable = true
-      this.isPreview = isPreview
-      const queryParam = {
-        pageSize: this.screenPageObj.pageSize,
-        pageNo: this.screenPageObj.pageNo
-      }
-      let chart
-      if (chartInfo) {
-        chart = Object.assign({}, chartInfo)
-      } else {
-        chart = Object.assign({}, this.chartInfo)
-      }
-      if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
-        const param = chart.param
-        if (param.endpointId && param.endpointId != '') {
-          queryParam.endpointId = param.endpointId
-        } else {
-          if (param.moduleId && param.moduleId != '') {
-            queryParam.moduleId = param.moduleId
-          } else {
-            if (param.projectId && param.projectId != '') {
-              queryParam.projectId = param.projectId
-            }
-          }
-        }
-
-        if (param.ruleId && param.ruleId != '') {
-          queryParam.ruleId = param.ruleId
-        }
-        if (param.severity && param.severity != '') {
-          queryParam.severity = param.severity
+          queryParam.severityIds = param.severity
         }
         if (param.state && param.state != '') {
           queryParam.state = param.state
@@ -647,7 +648,7 @@ export default {
           this.$nextTick(() => {
             this.storedScreanTableData.forEach((item) => {
               item.labels = JSON.parse(item.labels)
-              if (item.alertRule.buildIn != 1) {
+              if (item.alertRule.buildIn !== 1) {
                 const paramStr = JSON.stringify(this.promQueryParamConvert(item))
                 axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
               } else {
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index dd001b54f..db96818fe 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -145,12 +145,12 @@
                     :chart-index="index"
         ></text-chart>
 
-        <chart-alert-list  :from="from" :ref="'editChart'+item.id"
-                           :panel-id="filter.panelId"
+        <chart-alert-list :ref="'editChart'+item.id" :chartData="item"
+                          :from="from"
                           :chart-index="index"
                           v-if="item.type  === 'alertList'"
                           :editChartId="'editChartId' + item.id"
-                           :is-lock="panelLock"
+                          :is-lock="panelLock"
                           :chart-info="item"
                           @on-refresh-data="refreshChart"
                           @on-search-data="searchData"
@@ -158,9 +158,9 @@
                           @on-duplicate-chart-block="duplicateChart"
                           @on-drag-chart="editChartForDrag"
                           @on-edit-chart-block="editData"
-                            @sync="()=>{chartBySync(item)}"
+                          :panel-id="filter.panelId"
                           @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                           :chartData="item"
+                          @sync="()=>{chartBySync(item)}"
         ></chart-alert-list>
 
         <chart-pie  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
@@ -240,7 +240,6 @@ export default {
   props: {
     fromRoute,
     isModel: { type: Boolean, default: false },
-    additionalInfo: {},
     draggable: { type: Boolean, default: true },
     from: { type: String },
     obj: Object,
@@ -631,12 +630,13 @@ export default {
       }
       if (!param.query) delete param.query
       // 根据panelId获得panel下的所有图表
-      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
+      const groupId = this.from === fromRoute.panel ? '&groupId=0' : ''
+      this.$get('visual/panel/chart?panelId=' + params.panelId + groupId + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
           })
-          // response.data.list = response.data.list.filter((item) => item.groupId === -1 || !item.groupId) // 处理外层存在的groupItem
+          // chart数据存在dataTotalListBak中
           if (response.data.list) {
             this.dataTotalListBak = response.data.list
           } else {
@@ -645,7 +645,7 @@ export default {
 
           let chartListTmp = []
           // 查询条件带name
-          if (this.filter.searchName && this.filter.searchName != '') {
+          if (this.filter.searchName) {
             const searchTitleStr = this.filter.searchName
             this.dataTotalListBak.forEach((item) => {
               if (item.name.indexOf(searchTitleStr) > -1) {
@@ -766,7 +766,7 @@ export default {
               this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
                 this.filter.panelId, this.filter, '', errorMsg)
             }
-          } else if (chartItem.type == 'text') {
+          } else if (chartItem.type === 'text') {
             if (filterType === 'showFullScreen') { // 全屏查询
               this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
                 panelId, filter, null, filterType)
@@ -789,7 +789,7 @@ export default {
         return
       }
       if (chartItem.type === 'assetInfo') {
-        if (chartItem.from != fromRoute.endpoint) {
+        if (chartItem.from !== fromRoute.endpoint) {
           this.$set(chartItem, 'draggable', true)
           this.$set(chartItem, 'resizable', true)
         }
@@ -800,7 +800,7 @@ export default {
         this.getEndpointInfoChartData(chartItem)
         return
       }
-      if (chartItem.type == 'projectInfo') {
+      if (chartItem.type === 'projectInfo') {
         chartItem.name = this.$t('project.chart.projectInfo')
         this.getProjectInfoChartData(chartItem)
         return
@@ -1350,7 +1350,7 @@ export default {
       chartInfo.name = this.$t('asset.assetInfo')
       const detail = []
       if (!this.isModel) {
-        const assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id
+        const assetId = this.obj.assetId ? this.obj.assetId : this.obj.id
         const arr = []
         arr.push(this.$get(`/asset/asset/${assetId}`))
         arr.push(this.$get(`/asset/asset/feature/${assetId}`))
@@ -1448,8 +1448,8 @@ export default {
       const detail = []
       if (!this.isModel) {
         this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
-        this.$get('/project/info?id=' + this.additionalInfo.id).then(response => {
-          if (response.code == 200) {
+        this.$get('/project/info?id=' + this.obj.id).then(response => {
+          if (response.code === 200) {
             response.data && (function () {
               response.data.basic && detail.push({
                 title: vm.$t('project.chart.basicTitle'),
@@ -1516,16 +1516,16 @@ export default {
       }
     },
     getAlertListChartData (chartInfo, filterType) {
-      if (this.additionalInfo) {
-        this.$set(chartInfo, 'param', { endpointId: this.additionalInfo.id })
+      if (this.obj) {
+        this.$set(chartInfo, 'param', { endpointId: this.obj.id })
       }
-      this.$refs['editChart' + chartInfo.id][0].getAlertList(filterType)
+      this.$refs['editChart' + chartInfo.id][0].getAlertList(null, null, chartInfo)
     },
     getAlertRuleChartData (chartInfo) {
       const vm = this
       const detail = []
       const req = new Promise((resolve, reject) => {
-        this.$get('alert/rule/stat?id=' + this.additionalInfo.id).then(response => {
+        this.$get('alert/rule/stat?id=' + this.obj.id).then(response => {
           if (response.code == 200) {
             response.data && (function () {
               if (response.data.project && response.data.project.length > 0) {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 0eb0fb38f..4a144317f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -88,7 +88,7 @@
           <div class="table-list" id="tableList">
             <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
               <div class="box-content">
-                <chart-list :additional-info="obj" :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
+                <chart-list :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
                             @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"
                             @on-add-group-item-chart="addGroupItem"></chart-list>
               </div>
@@ -254,7 +254,7 @@ export default {
       if (refresh) {
         this.refresh()
         if (this.from === fromRoute.chartTemp) {
-          this.$get('/visual/panel/chart', { ids: this.obj.id, groupId: 0 }).then(res => {
+          this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
             res.data.list.forEach(item => {
               if (!item.children) {
                 item.children = []
@@ -375,7 +375,7 @@ export default {
       } else {
         if (this.from === this.fromRoute.chartTemp) {
           if (this.obj.type === 'group') {
-            this.$get('/visual/panel/chart', { ids: this.obj.id, groupId: 0 }).then(res => {
+            this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
               res.data.list.forEach(item => {
                 if (!item.children) {
                   item.children = []
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 6b2690bc4..45aa2d4b0 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -1,109 +1,108 @@
 <template>
   <div v-clickoutside="{obj: editAlertRule, func: clickOutside}" class="right-box right-box-alert-config">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button v-if="alertRule.id" id="alert-box-del" v-has="'rule_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-      </button>
+    <div class="right-box__header">
+      <!-- begin--标题-->
+      <div class="header__title">{{alertRule.id ? $t("alert.config.editAlertConfig") : $t("alert.config.createAlertConfig")}}</div>
+      <!-- end--标题-->
+      <div class="header__operation">
+        <span v-cancel="{obj: editAlertRule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
     </div>
-    <!-- end--顶部按钮-->
-
-    <!-- begin--标题-->
-    <div class="right-box-title">{{editAlertRule.id ? $t("alert.config.editAlertConfig") : $t("alert.config.createAlertConfig")}}</div>
-    <!-- end--标题-->
 
     <!-- begin--表单-->
-    <div class="right-box-form-box">
-      <el-form ref="alertRuleForm" :model="editAlertRule" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" style="width:100%">
-        <!--name-->
-        <el-form-item :label='$t("alert.config.name")' prop="name">
-          <el-input id="alert-box-input-name" v-model="editAlertRule.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
-        </el-form-item>
-        <el-form-item :label='$t("alert.config.expr")' prop="expr" >
-          <promql-input
-            id="alert-box-input-promql"
-            ref="promql"
-            :expression-list.sync="expressions"
-            :index="0"
-            :plugins="['metric-selector','metric-input']"
-            :required="true"
-            :styleType="2"
-            @change="metricChange"
-          ></promql-input>
-        </el-form-item>
-        <!--threshold-->
-        <el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
-          <el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text">
-            <el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator"  class="input-with-select" placeholder="" popper-class="config-dropdown threshold-dropdown" size="small">
-              <el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="alertRuleForm" :model="editAlertRule" :rules="rules" label-position = "top" label-width="120px">
+          <!--name-->
+          <el-form-item :label='$t("alert.config.name")' prop="name">
+            <el-input id="alert-box-input-name" v-model="editAlertRule.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
+          </el-form-item>
+          <el-form-item :label='$t("alert.config.expr")' prop="expr" >
+            <promql-input
+              id="alert-box-input-promql"
+              ref="promql"
+              :expression-list.sync="expressions"
+              :index="0"
+              :plugins="['metric-selector','metric-input']"
+              :required="true"
+              :styleType="2"
+              @change="metricChange"
+            ></promql-input>
+          </el-form-item>
+          <!--threshold-->
+          <el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
+            <el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text">
+              <el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="hide-icon" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
+                <el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <!--unit-->
+          <el-form-item :label="$t('alert.config.unit')" prop="unit">
+            <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
+                         placeholder=""
+                         popper-class="no-style-class unit-popper-class"
+                         size="small"
+                         style="width: 100%"
+            >
+            </el-cascader>
+          </el-form-item>
+          <!--last-->
+          <el-form-item :label="$t('alert.config.for')" prop="last">
+            <el-input id="alert-box-input-last" v-model.number="editAlertRule.last" placeholder="" size="small" type="text">
+              <template slot="append">{{$t('alert.config.second')}}</template>
+            </el-input>
+          </el-form-item>
+          <!--severity-->
+          <el-form-item :label="$t('alert.severity')" class="severity-box" prop="severity">
+            <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
+              <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
+                <span>
+                   <i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}
+                </span>
+              </el-option>
             </el-select>
-          </el-input>
-        </el-form-item>
-        <!--unit-->
-        <el-form-item :label="$t('alert.config.unit')" prop="unit">
-          <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
-                       placeholder=""
-                       popper-class="no-style-class unit-popper-class"
-                       size="small"
-                       style="width: 100%"
-          >
-          </el-cascader>
-        </el-form-item>
-        <!--last-->
-        <el-form-item :label="$t('alert.config.for')" prop="last">
-          <el-input id="alert-box-input-last" v-model.number="editAlertRule.last" placeholder="" size="small" type="text">
-            <template slot="append">{{$t('alert.config.second')}}</template>
-          </el-input>
-        </el-form-item>
-        <!--severity-->
-        <el-form-item :label="$t('alert.severity')" prop="severity" class="severity-box">
-          <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" placeholder=""  popper-class="config-dropdown severity-box" size="small">
-            <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
-              <span>
-                 <i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}
-              </span>
-            </el-option>
-          </el-select>
-          <i class="nz-icon nz-icon-circle severity-circle" v-if="editAlertRule.severityId" :style="{color:severityData.find(severity => severity.id ===  editAlertRule.severityId).color,'font-size':'12px'}"></i>
-        </el-form-item>
-        <!--receiver-->
-        <el-form-item :label="$t('config.user.receiver')" prop="receiver">
-          <el-select
-            id="alert-box-input-receiver"
-            v-model.trim="editAlertRule.receiverShow"
-            filterable
-            multiple
-            placeholder=""
-            popper-class="no-style-class"
-            size="small"
-            value-key="userId"
-            @change="receiverShowChange"
-          >
-            <el-option
-              v-for="item in userData"
-              :key="item.id"
-              :label="item.username"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <!--notify-->
-        <el-form-item :label="$t('alert.notify')" prop="method" class="notify-box" :rules="[{ validator: validateNotify, trigger: 'change'},]">
-          <el-select id="alert-box-input-notify" v-model="editAlertRule.method" placeholder=""  popper-class="config-dropdown notify-box" size="small" multiple>
-            <el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <!--summary-->
-        <el-form-item :label="$t('alert.summary')" prop="summary">
-          <el-input id="alert-box-input-summary" v-model="editAlertRule.summary" maxlength="512" placeholder="" rows="3" show-word-limit size="small" type="textarea"></el-input>
-        </el-form-item>
-        <!--description-->
-        <el-form-item :label="$t('alert.description')" prop="description">
-          <el-input id="alert-box-input-description" v-model="editAlertRule.description" maxlength="512" placeholder="" rows="4" show-word-limit size="small" type="textarea"></el-input>
-        </el-form-item>
-      </el-form>
+            <i v-if="editAlertRule.severityId" :style="{color:severityData.find(severity => severity.id ===  editAlertRule.severityId).color,'font-size':'12px'}" class="nz-icon nz-icon-circle severity-circle"></i>
+          </el-form-item>
+          <!--receiver-->
+          <el-form-item :label="$t('config.user.receiver')" prop="receiver">
+            <el-select
+              id="alert-box-input-receiver"
+              v-model.trim="editAlertRule.receiverShow"
+              class="right-box__select"
+              filterable
+              multiple
+              placeholder=""
+              popper-class="right-box-select-dropdown prevent-clickoutside"
+              size="small"
+              value-key="userId"
+              @change="receiverShowChange"
+            >
+              <el-option
+                v-for="item in userData"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--notify-->
+          <el-form-item :label="$t('alert.notify')" :rules="[{ validator: validateNotify, trigger: 'change'},]" class="notify-box" prop="method">
+            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
+              <el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--summary-->
+          <el-form-item :label="$t('alert.summary')" prop="summary">
+            <el-input id="alert-box-input-summary" v-model="editAlertRule.summary" maxlength="512" placeholder="" rows="3" show-word-limit size="small" type="textarea"></el-input>
+          </el-form-item>
+          <!--description-->
+          <el-form-item :label="$t('alert.description')" prop="description">
+            <el-input id="alert-box-input-description" v-model="editAlertRule.description" maxlength="512" placeholder="" rows="4" show-word-limit size="small" type="textarea"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
     <!-- end--表单-->
 
@@ -331,79 +330,7 @@ export default {
 }
 </script>
 <style>
-  .unit-popper-class{
-    z-index: 2052 !important;
-  }
-  .input-with-select{
-    width: 70px !important;
-  }
-  .input-with-select #alert-box-input-operator{
-    padding: 0;
-    text-align: center;
-    border-top:1px solid #d0d4dC;
-    border-bottom:1px solid #d0d4dC;
-    border-radius: 4px 0 0 4px;
-  }
-  .input-with-select #alert-box-input-operator + .el-input__suffix{
-    display: none;
-  }
-</style>
-<style scoped>
-  .rule-severity-remark{
-    display: inline-flex;
-    justify-content: left;
-    justify-items: center;
-    align-items: center;
-    width: calc(100% - 46px);
-    padding: 10px 15px;
-    background: #F6F6F6;
-    color: #999999;
-    margin-top: -13px;
-    margin-bottom: 18px;
-    margin-left: 15px;
-    font-size: 14px;
-  }
-  .rule-severity-remark .nz-icon-info-normal{
-    margin-right: 10px;
-  }
-  /deep/ .metric-selector-title{
-    margin-left: 0 !important;
-  }
-  /* 标题样式 */
-  .right-box-title{
-    font-size: 16px;
-    font-weight: 700;
-    height: 60px;
-    line-height: 60px;
-    padding: 0 0 0 20px;
-    border-bottom:1px solid #E7EAED ;
-    box-sizing: border-box;
-  }
-  /* 表单 */
-  .el-form-item {
-    margin-left: 0  !important;
-    width: 100%  !important;
-    padding: 0 30px;
-    box-sizing: border-box;
-  }
-  .el-form-item__lable{
-    font-family: Roboto-Medium;
-    font-weight: 500;
-  }
-  .rule-severity-remark{
-    width: 640px;
-    box-sizing: border-box;
-    margin: -13px 30px 18px 30px;
-  }
-  .severity-circle{
-    position: absolute;
-    left: 10px;
-    top: 0;
-  }
-  .severity-box{
-    position: relative;
-  }
-  .severity-box /deep/ .el-select .el-input__inner{
-    padding-left: 25px;
-  }
+.hide-icon .el-input__suffix {
+  display: none;
+}
 </style>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 00e1a6758..dd2fb0ae8 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -302,7 +302,8 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         port: [
-          { validator: port, trigger: 'blur' }
+          { validator: port, trigger: 'blur' },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         username: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -444,13 +445,8 @@ export default {
         return
       }
       this.editModule.type = type
-      if (type == 'http') {
-        this.editModule.port = 9100
-      } else {
-        this.$nextTick(() => {
-          this.$refs.selectWalk.show()
-        })
-        this.editModule.port = 161
+      if (type !== 'http') {
+        this.$refs.selectWalk.show()
       }
     },
     /* 保存 */
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 42da05673..72ccecb52 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -170,8 +170,8 @@
             <el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
               <el-input v-model="ldap.ldap_dn" id="system-ldap-ldap_dn"></el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.system.ldap.pin')" prop="ldap_pin">
-              <el-input v-model="ldap.ldap_pin" type="password" id="system-ldap-ldap_pin"></el-input>
+            <el-form-item :label="$t('config.system.ldap.pin')" prop="ldap_password">
+              <el-input id="system-ldap-ldap_password" v-model="ldap.ldap_password" type="password"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.ldap.ou')" class="has-tip" prop="ldap_ou">
               <el-input v-model="ldap.ldap_ou" id="system-ldap-ldap_ou"></el-input>
@@ -331,7 +331,7 @@ export default {
       ldap: {
         ldap_address: '',
         ldap_dn: '',
-        ldap_pin: '',
+        ldap_password: '',
         ldap_ou: '',
         ldap_user_filter: '',
         ldap_mapping: '',
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 1dd11895a..69fa4dbb5 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -89,7 +89,7 @@ export default {
         name: '',
         endpointNameTmpl: '{{module.name}}-{{asset.name}}',
         type: 'http',
-        port: 9100,
+        port: '',
         chartIds: '',
         configs: {
           walk: [],
@@ -150,7 +150,7 @@ export default {
           this.object = JSON.parse(JSON.stringify(res.data))
           this.object.configs = JSON.parse(this.object.configs)
           this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
-          this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
+          this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
           this.object.paramObj = []
           this.object.labelModule = []
           if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {