feat: add notitication center

src/renderer/assets/locales/en.json

@@ -909,5 +909,9 @@
     "unknown": "Unknown Version",
     "unset": "Unset"
   },
-  "yes": "Yes"
-}
+  "yes": "Yes",
+  "notification": {
+    "name:": "Notification",
+    "empty": "No Notification"
+  }
+}

src/renderer/assets/locales/zh-CN.json

@@ -875,5 +875,9 @@
     "unknown": "未知的版本",
     "unset": "未启用"
   },
-  "yes": "是"
+  "yes": "是",
+  "notification": {
+    "name": "通知",
+    "empty": "暂时没有通知"
+  }
 }

src/renderer/windows/main/dialog/BaseTaskDialog.vue

@@ -21,6 +21,11 @@
           >
             {{ $t('issue.name') }}
           </v-tab>
+           <v-tab
+            :key="2"
+          >
+            {{ $t('notification.name') }}
+          </v-tab>
         </v-tabs>
       </template>
     </v-toolbar>
@@ -35,6 +40,11 @@
       >
         <issue-view />
       </v-tab-item>
+      <v-tab-item
+        :key="2"
+      >
+        <notification-view />
+      </v-tab-item>
     </v-tabs-items>
   </v-dialog>
 </template>
@@ -44,9 +54,10 @@ import { reactive, toRefs, defineComponent } from '@vue/composition-api';
 import { useDialog } from '../hooks';
 import TaskView from './BaseTaskDialogTaskView.vue';
 import IssueView from './BaseTaskDialogIssueView.vue';
+import NotificationView from './BaseTaskDialogNotificationView.vue';
 
 export default defineComponent({
-  components: { TaskView, IssueView },
+  components: { TaskView, IssueView, NotificationView },
   props: {
     value: {
       type: Boolean,

src/renderer/windows/main/dialog/BaseTaskdialogNotificationView.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-card
+    flat
+    style="min-height: 300px; max-height: 400px; max-width: 100%; overflow: auto;"
+    dark
+    color="grey darken-4"
+  >
+    <v-card-text>
+      {{ queue.length === 0 ? $t('notification.empty') : '' }}
+      <v-list
+        style="background: transparent"
+      >
+        <transition-group
+          name="transition-list"
+          tag="div"
+        >
+          <template v-for="item in queue">
+            <v-list-tile
+              :key="item.title"
+              @click="onClick(item)"
+            >
+              <v-list-tile-avatar>
+                <v-icon
+                  :color="colors[item.level]"
+                  left
+                >{{ icons[item.level] }}</v-icon>
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+                <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                <v-list-tile-sub-title v-html="item.body"></v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </template>
+        </transition-group>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang=ts>
+import { defineComponent } from '@vue/composition-api';
+import { useNotificationQueue, LocalNotification } from '../hooks';
+
+export default defineComponent({
+  setup() {
+    const queue = useNotificationQueue();
+    function onClick(not: LocalNotification) {
+        queue.value = queue.value.filter(q => q !== not);
+    }
+    return {
+      queue,
+      icons: {
+        success: 'check_circle',
+        info: 'info',
+        warning: 'priority_high',
+        error: 'warning',
+      },
+      colors: {
+        success: 'green',
+        error: 'red',
+        info: 'white',
+        warning: 'orange',
+      },
+      onClick,
+    };
+  },
+});
+</script>
+
+<style scoped=true>
+.v-treeview-node__label {
+  font-size: 14px;
+}
+.v-treeview-node__label .material-icons-outlined {
+  font-size: 20px;
+}
+.tree-minor-label {
+  color: grey;
+  font-size: 12px;
+  font-style: italic;
+}
+</style>

src/renderer/windows/main/hooks/useNotifier.ts

@@ -98,11 +98,6 @@ export function useNotifyQueueConsumer() {
         }
     }
 
-    watch(refs.show, (isShown) => {
-        if (!isShown) {
-            consume();
-        }
-    });
     watch(queueLength, (newLength, oldLength) => {
         if (newLength > oldLength && !data.show) {
             consume();