diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
index d3b79407f..3a960177b 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
@@ -31,7 +31,22 @@
           .el-tabs__header{
             margin: 0;
             .el-tabs__item{
+              border: 1px solid $--border-color-light;
+              border-radius: 2px;
+              border-bottom: none;
               margin-right: 6px;
+              background: $--background-color-base;
+              color: $--color-text-regular;
+            }
+            .el-tabs__item:hover{
+              color: $--color-warning;
+              background: $--background-color-empty;
+              border-bottom-color: $--background-color-empty;
+            }
+            .el-tabs__item.is-active{
+              color: $--color-warning;
+              background: $--background-color-empty;
+              border-bottom-color: $--background-color-empty;
             }
           }
           .el-tabs__content{
@@ -47,6 +62,17 @@
     .info-box-right{
       flex: 1;
     }
+    .table-no-data {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .el-tabs__nav{
+      border: none;
+    }
   }
 }
 
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
index b17a5ab4d..2683af6fb 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
@@ -42,7 +42,7 @@
         ></chart>
         <alertMessageInfoTab
           class="alert-message-info-tab"
-          :id="chartInfo.id" />
+          :infoData="infoData" />
       </div>
       <div class="info-box-right">
         时间
@@ -93,7 +93,8 @@ export default {
       showAllData: false,
       allDataLength: 0,
       severityData: this.$store.getters.severityData,
-      severityDataWeight: this.$store.getters.severityDataWeight
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      infoData: {}
     }
   },
   computed: {
@@ -306,6 +307,17 @@ export default {
     },
     showFullscreen (show) {
       this.$emit('showFullscreen', show, this.chartInfo)
+    },
+    getAlertMessageInfo () {
+      this.nodata = false
+      this.$get('/alert/message/' + this.chartInfo.id).then(res => {
+        if (res.code === 200) {
+          this.infoData = res.data
+          this.nodata = false
+        } else {
+          this.nodata = true
+        }
+      })
     }
   },
   watch: {
@@ -326,6 +338,7 @@ export default {
   mounted () {
     this.chartInfo.loaded && this.getChartData()
     this.showAllData = !this.showMultiple(this.chartInfo.type)
+    this.getAlertMessageInfo()
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
index 36a7dd25f..19cfa73e6 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -1,10 +1,9 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" type="card" v-if="nodata">
-      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+    <el-tabs v-model="activeName" type="card" v-if="!nodata">
+      <el-tab-pane v-for="item in cardNames" :label="item.label" :name="item.key" :key="item.key">
+        {{item.key}}
+      </el-tab-pane>
     </el-tabs>
     <div v-else class="table-no-data">
       <svg class="icon" aria-hidden="true">
@@ -19,34 +18,62 @@
 export default {
   name: 'alertMessageInfoTab',
   props: {
-    id: {
-      type: Number
+    infoData: {
+      type: Object
     }
   },
   data () {
     return {
-      activeName: '',
+      activeName: 'detail',
       nodata: false,
       cardNames: [{
         key: 'detail',
         label: this.$t('overall.detail')
+      }],
+      sysArr: [{
+        key: 'dc',
+        label: this.$t('overall.dc')
+      }, {
+        key: 'asset',
+        label: this.$t('overall.asset')
+      }, {
+        key: 'alertRule',
+        label: this.$t('alert.alertRule')
+      }, {
+        key: 'endpoint',
+        label: this.$t('overall.endpoint')
+      }, {
+        key: 'module',
+        label: this.$t('overall.module')
+      }, {
+        key: 'project',
+        label: this.$t('overall.project')
       }]
     }
   },
+  watch: {
+    infoData: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.cardNames = [{
+            key: 'detail',
+            label: this.$t('overall.detail')
+          }]
+          this.sysArr.forEach(item => {
+            if (n[item.key]) {
+              this.cardNames.push(item)
+            }
+          })
+        }
+      }
+    }
+  },
   mounted () {
-    this.getAlertMessageInfo()
+
   },
   methods: {
-    getAlertMessageInfo () {
-      this.nodata = false
-      this.$get('/alert/message/' + this.id).then(res => {
-        if (res.code === 200) {
-          console.log(res)
-        } else {
-          this.nodata = true
-        }
-      })
-    }
+
   }
 }
 </script>