diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 7caaf5002..c3197997e 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -850,3 +850,39 @@ input::placeholder{
     }
   }
 }
+
+.operationTutorial-dialog{
+  .el-dialog__title{
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .dialog-header {
+    margin-bottom: 15px;
+    word-wrap: break-word;
+    color: $--color-text-primary;
+    span{
+      word-break: break-word;
+    }
+    i.nz-icon-jinggao{
+      color: $--color-primary;
+    }
+  }
+  .el-dialog__body {
+    padding: 30px;
+    padding-top: 0;
+    .operationTutorial-img{
+      width: 100%;
+      height: 390px;
+      display: block;
+      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
+    }
+    .operationTutorial-msg{
+      font-family: PingFangSC-Regular;
+      font-size: 12px;
+      color: $--color-text-regular;
+      font-weight: 400;
+      text-align: center;
+      margin-top: 12px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/assets/img/system-sound-settings.gif b/nezha-fronted/src/assets/img/system-sound-settings.gif
new file mode 100644
index 000000000..b2df1f132
Binary files /dev/null and b/nezha-fronted/src/assets/img/system-sound-settings.gif differ
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index d8054a6ba..74d036a03 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -86,18 +86,32 @@
     </div>
     <guide :show-dialog="showGuide" @dialogClosed="dialogClosed" @close="showGuide = false"></guide>
     <intro></intro>
-<!--    <span v-for="item in fontData" :key="item">-->
-<!--      <span class="temp-dom" :class="`temp-dom&#45;&#45;${fontSzie}`" v-for="fontSzie in [12,13,14,15]" :key="fontSzie">{{item}}</span>-->
-<!--    </span>-->
+    <el-dialog
+      class="operationTutorial-dialog"
+      :title="$t('overall.tip')"
+      :visible.sync="dialogVisible"
+      @close='handleClose'
+      width="772px"
+      :append-to-body="true"
+    >
+      <div class="dialog-header">
+        <i class="nz-icon nz-icon-jinggao"></i>
+        <span>{{$t('overall.newAlertMessageTip')}}</span>
+      </div>
+      <img class="operationTutorial-img" :src="imageUrl">
+      <div class="operationTutorial-msg">{{$t('overall.operationTutorial')}}</div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+// import { theme } from '@/components/common/js/constants'
 import bus from '../../libs/bus'
 import { mapActions } from 'vuex'
 import guide from '@/components/common/popBox/guide'
 import intro from '@/components/common/intro'
-import { theme } from '@/components/common/js/constants'
+import imageUrl from '@/assets/img/system-sound-settings.gif'
+import audioUrl from '@/assets/audio/new_alert_message.mp3'
 export default {
   name: 'Header',
   components: {
@@ -160,7 +174,10 @@ export default {
       darkTheme: false,
       newAlertMessage: false,
       themeSave: false,
-      newAlertMessageSave: false
+      newAlertMessageSave: false,
+      dialogVisible: false,
+      imageUrl,
+      operationTutorial: false
     }
   },
   created () {
@@ -170,9 +187,24 @@ export default {
     this.darkTheme = theme == 'dark'
     this.newAlertMessage = newAlertMessage == 1
     bus.$on('themeChange', this.themeChange)
+    this.testAutoplay()
   },
   methods: {
     ...mapActions(['logoutSuccess']),
+    // 测试是否能自动播放 若不能 点击开关时弹窗
+    testAutoplay () {
+      const audio = new Audio(audioUrl)
+      audio.muted = true
+      audio.play().then(() => {
+        this.operationTutorial = false
+      }).catch((err) => {
+        console.log(err)
+        this.operationTutorial = true
+      })
+    },
+    handleClose () {
+      this.operationTutorial = false
+    },
     themeChange (theme) {
       this.darkTheme = theme == 'dark'
     },
@@ -207,6 +239,9 @@ export default {
           enable: val
         }
       }
+      if (val && this.operationTutorial) {
+        this.dialogVisible = true
+      }
       this.$put('/sys/user/preference', { notification: JSON.stringify(param) }).then(res => {
         this.newAlertMessageSave = false
         if (res.code === 200) {
diff --git a/nezha-fronted/src/components/layout/home.vue b/nezha-fronted/src/components/layout/home.vue
index be1360781..fc76234a8 100644
--- a/nezha-fronted/src/components/layout/home.vue
+++ b/nezha-fronted/src/components/layout/home.vue
@@ -24,7 +24,7 @@ import webSSH from '../cli/webSSH'
 import leftMenu from './leftMenu'
 import container from './container'
 import globalSearch from '@/components/common/globalSearch/globalSearch'
-
+import bus from '@/libs/bus'
 export default {
   name: 'home',
   components: {
@@ -62,6 +62,9 @@ export default {
       this.$store.commit('setIsRouteLive')
     }
   },
+  created () {
+    bus.openNotification()
+  },
   mounted () {
   },
   destroyed () {
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index 01dcd743b..033225013 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -352,22 +352,28 @@ export default new Vue({
       return handler(tempArr)
     },
     // 开启系统通知
-    openNotification (startAt) {
+    async openNotification () {
       const userId = localStorage.getItem('nz-user-id')
       const enable = localStorage.getItem(`nz-notification-${userId}`)
       if (enable != 1 || this.newAlertTimer) {
         return
       }
+      const queryParams = {
+        pageSize: 1,
+        orderBy: '-id'
+      }
+      const response = await get('/alert/message/query', queryParams, { headers: { notCancel: true } })
+      const lastId = this.$lodash.get(response, 'data.list[0].id', -1)
       const interval = store.state.nzDefaultConfig.interval
-      this.getNewAlert(startAt, interval || 10)
+      this.getNewAlert(lastId, interval || 10)
     },
     // 查询告警消息
-    getNewAlert (startAt, interval = 10) {
+    getNewAlert (lastId, interval = 10) {
       const ms = parseInt(interval) * 1000
       this.newAlertTimer = setTimeout(async () => {
         const queryParams = {
           body: encodeURIComponent(JSON.stringify({
-            startAt: [startAt],
+            id: ['>' + lastId],
             state: 1
           })),
           orderBy: '-id'
@@ -381,6 +387,9 @@ export default new Vue({
             this.audio = new Audio(audioUrl)
           }
           if (response.data.list && response.data.list.length) {
+            lastId = response.data.list.reduce(function (max, obj) {
+              return obj.id > max ? obj.id : max
+            }, -1)
             const h = this.$createElement
             const self = this
             response.data.list.forEach((item, index) => {
@@ -413,7 +422,7 @@ export default new Vue({
             this.audio.play()
           }
         }
-        this.getNewAlert(response.time, interval)
+        this.getNewAlert(lastId, interval)
       }, ms)
     },
     toAlertPage () {
diff --git a/nezha-fronted/src/permission.js b/nezha-fronted/src/permission.js
index 15e2e60ee..3f0846721 100644
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -50,7 +50,6 @@ router.beforeEach((to, from, next) => {
                 store.commit('i18nReady', false)
                 post('/sys/user/permissions', { token: localStorage.getItem('nz-token') }).then(res => {
                   if (res.code === 200) {
-                    bus.openNotification(res.time)
                     const menuList = sortByOrderNum(res.data.menus)
                     store.commit('setMenuList', menuList)
                     const arr = []
@@ -139,7 +138,6 @@ router.beforeEach((to, from, next) => {
         Vue.http.get(configUrl).then(config => {
           post(config.body.baseUrl + 'sys/user/permissions', { token: localStorage.getItem('nz-token') }).then(res => {
             if (res.code === 200) {
-              bus.openNotification(res.time)
               store.commit('setMenuList', sortByOrderNum(res.data.menus))
               const arr = []
               returnMenuCode(res.data.menus, arr)
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index 88c7e4f35..d8945ce79 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -117,7 +117,6 @@ const user = {
         }
       })
       post('/sys/user/permissions', { token: res.data.token }).then(res => {
-        bus.openNotification(res.time)
         const menuList = sortByOrderNum(res.data.menus)
         // localStorage.setItem('nz-user-permissions', JSON.stringify(res.data.buttons))
         store.commit('setMenuList', menuList)