socket 断线自动重连，文件上传功能

ui/components/notification/index.js

@@ -22,16 +22,18 @@ export default class Notification {
   }
 
   static show({
-    avatar, title, message, type, duration = 3000,
+    avatar, title, message, type = '', duration = 3000,
     actionButtons = [],
   }) {
     if (duration && lastNotification) {
       Notification.hide();
     }
+    if (avatar) type += ' avatar';
+    if (title) type += ' title';
     const $dom = $(tpl`<div class="notification ${type} hide"></div>`);
     if (avatar) $(tpl`<img width="64" height="64" class="avatar" src="${avatar}"></img>`).appendTo($dom);
-    if (title) $(tpl`${title} `).appendTo($dom);
-    $(tpl`${message}`).appendTo($dom);
+    if (title) $(tpl`<h2>${title}</h2>`).appendTo($dom);
+    $(tpl`<p>${message}</p>`).appendTo($dom);
     actionButtons.forEach((button) => {
       $(tpl`<button class="${button.class}" onclick="javascript:window.${button.funcName}();">${button.name}</button>`).appendTo($dom);
     });

ui/components/notification/notification.page.styl

@@ -14,6 +14,9 @@
   box-shadow: 0 4px 10px rgba(#000, 0.4)
   min-width: rem(150px)
 
+  img
+    border-radius: 50%
+
   &.hide
     opacity: 0
     transform: translateY(20px) scale(0.9)