增加消息提示

src/App.vue

@@ -3,6 +3,7 @@
     <tools></tools>
     <desktop></desktop>
     <dock ref="dock_model"></dock>
+    <notice-tip ref="notice_tip_model"></notice-tip>
     <notification-center></notification-center>
   </div>
 </template>
@@ -12,11 +13,12 @@
   import Dock from './components/Dock';
   import Tools from './components/Tools';
   import NotificationCenter from './components/NotificationCenter';
+  import NoticeTip from './components/NoticeTip';
 
   export default {
     name: 'app',
     components: {
-      Desktop, Dock, Tools, NotificationCenter
+      Desktop, Dock, Tools, NotificationCenter, NoticeTip
     },
     mounted() {
       document.getElementById('app').style.backgroundImage = process.env.VUE_APP_MAIN_URL;
@@ -76,6 +78,7 @@
         if (ding) {
           new Audio('sounds/ping.mp3').play();
         }
+        this.$refs.notice_tip_model.showTip(message);
       },
       addWeather: function (weather) {
         this.$store.commit('desktop/addWeather', weather);

src/components/NoticeTip.vue

@@ -0,0 +1,98 @@
+<template>
+  <transition name="tip-slide">
+    <div class="notice-tip" v-show="count > 0">
+      <div class="notice-tip-icon">
+        <img :src="icon"/>
+      </div>
+      <div class="notice-tip-content">
+        <div class="notice-tip-content-title">{{title}}</div>
+        <div class="notice-tip-content-body" v-html="body"></div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: "NoticeTip",
+    data() {
+      return {
+        icon: '',
+        title: '',
+        body: '',
+        count: 0
+      }
+    },
+    created() {
+      let _that = this;
+      if (window.noticeTipIntervalArr) {
+        window.noticeTipIntervalArr.forEach(item => clearInterval(item));
+      }
+      window.noticeTipIntervalArr = [setInterval(function () {
+        _that.count -= 1;
+      }, 1000)];
+    },
+    methods: {
+      showTip: function (notice) {
+        this.icon = notice.icon;
+        this.title = notice.title;
+        this.body = notice.body;
+        this.count = 3;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .notice-tip {
+    position: absolute;
+    right: 10px;
+    top: 40px;
+    height: 60px;
+    width: 250px;
+    background-color: rgba(200, 200, 200, 0.7);
+    z-index: 140;
+    border-radius: 5px;
+  }
+
+  .notice-tip-icon {
+    display: inline-block;
+    float: left;
+  }
+
+  .notice-tip-icon img {
+    width: 40px;
+    height: 40px;
+    margin: 8px;
+  }
+
+  .notice-tip-content {
+    display: inline-block;
+    padding: 8px;
+    width: 170px;
+  }
+
+  .notice-tip-content-title {
+    color: #333333;
+  }
+
+  .notice-tip-content-body {
+    color: #333333;
+    overflow: hidden;
+    height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
+
+  .tip-slide-enter-active {
+    transition: all 0.5s;
+  }
+
+  .tip-slide-leave-active {
+    transition: all 0.5s;
+  }
+
+  .tip-slide-enter, .tip-slide-leave-to {
+    transform: translateX(260px);
+  }
+</style>

src/components/Timer.vue

@@ -14,10 +14,13 @@
     },
     created() {
       let _that = this;
-      setInterval(function () {
+      if (window.timerIntervalArr) {
+        window.timerIntervalArr.forEach(item => clearInterval(item));
+      }
+      window.timerIntervalArr = [setInterval(function () {
         _that.$store.commit('desktop/refreshTime');
         _that.timer = Calendar.dateFormatMacOs(_that.$store.state.desktop.currentTime);
-      }, 1000);
+      }, 1000)];
     }
   }
 </script>

src/components/Tools.vue

@@ -35,10 +35,10 @@
     },
     created() {
       let _that = this;
-      if (window.intervalArr) {
-        window.intervalArr.forEach(item => clearInterval(item));
+      if (window.toolIntervalArr) {
+        window.toolIntervalArr.forEach(item => clearInterval(item));
       }
-      window.intervalArr = [setInterval(function () {
+      window.toolIntervalArr = [setInterval(function () {
         _that.notificationCenterMessageCount += 1;
       }, 600)];
     },