站内消息即时通知，测试断线重连

ui/components/header/header.page.styl

@@ -8,16 +8,19 @@ $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-l
   &.warning
     background: #ffe1a6
 
+.header__options
+  background-image: url(./header-background.png)
+  background-image: url(./header-background@2x.png)
+
 .header
   position: relative
   height: rem($header-bg-height)
-  background: #5eafca url(./header-background.png) no-repeat center top
+  background: #5eafca no-repeat center top
   background-size: cover
   transition: height .5s
   transition-timing-function: ease-out-cubic
   overflow: hidden
   +retina()
-    background-image: url(./header-background.png)
     background-size: rem($header-bg-width $header-bg-height)
 
   &.mini
@@ -29,6 +32,12 @@ $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-l
     .header__content
       display: none
 
+.header__logo__options
+  background-image: url(./header-logo.png)
+  background-image: url(./header-logo@2x.png)
+  background-image: url(./header-logo-summer.png)
+  background-image: url(./header-logo-summer@2x.png)
+
 .header__logo
   display: block
   width: rem($header-logo-width-real)

ui/components/message/index.page.js

@@ -0,0 +1,29 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+import Notification from 'vj/components/notification';
+import i18n from 'vj/utils/i18n';
+
+const messagePage = new AutoloadPage('messagePage', () => {
+  async function init(isReconnect = false) {
+    const { default: SockJs } = await import('sockjs-client');
+
+    const sock = new SockJs(`/home/messages-conn?token=${UiContext.token}`);
+    sock.onopen = () => {
+      if (isReconnect) Notification.info('Reconnected');
+    };
+    sock.onmessage = (message) => {
+      const msg = JSON.parse(message.data);
+      console.log(msg);
+      Notification.show({ title: msg.udoc.uname, message: msg.mdoc.content, duration: 0 });
+    };
+    sock.onclose = () => {
+      Notification.warn(i18n('Disconnected from the server. Reconnecting...'));
+      setTimeout(() => {
+        init(true);
+      }, 3000);
+    };
+  }
+
+  if (UserContext._id !== 0) init();
+});
+
+export default messagePage;

ui/components/navigation/navigation.page.styl

@@ -107,6 +107,12 @@
 .nav__list--secondary .nav__item--round
   margin-left: rem(5px)
 
+.nav__logo__options
+  background-image: url(./nav-logo-small_light.png)
+  background-image: url(./nav-logo-small_dark.png)
+  background-image: url(./nav-logo-small@2x_light.png)
+  background-image: url(./nav-logo-small@2x_dark.png)
+
 .nav__logo
   display: block
   width: 0

ui/components/notification/index.js

@@ -6,45 +6,64 @@ let autoHideTimer = null;
 
 export default class Notification {
   static success(message, duration) {
-    Notification.show({ type: 'success', message, duration });
+    return Notification.show({ type: 'success', message, duration });
   }
 
   static info(message, duration) {
-    Notification.show({ type: 'info', message, duration });
+    return Notification.show({ type: 'info', message, duration });
   }
 
   static warn(message, duration) {
-    Notification.show({ type: 'warn', message, duration });
+    return Notification.show({ type: 'warn', message, duration });
   }
 
   static error(message, duration) {
-    Notification.show({ type: 'error', message, duration });
+    return Notification.show({ type: 'error', message, duration });
   }
 
-  static show({ message, type = 'info', duration = 3000 }) {
-    if (lastNotification) {
+  static show({
+    avatar, title, message, type = 'info', duration = 3000,
+    actionButtons = [],
+  }) {
+    if (duration && lastNotification) {
       Notification.hide();
     }
-    const $n = $(tpl`<div class="notification ${type} hide">${message}</div>`)
+    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);
+    actionButtons.forEach((button) => {
+      $(tpl`<button class="${button.class}">${button.name}</button>`).appendTo($dom);
+    });
+    console.log($dom);
+    const $n = $dom
       .css('z-index', zIndexManager.getNext())
       .appendTo('body');
     $n.width(); // force reflow
     $n.removeClass('hide');
-    lastNotification = $n;
-    autoHideTimer = setTimeout(Notification.hide, duration);
+    if (duration) {
+      lastNotification = $n;
+      autoHideTimer = setTimeout(Notification.hide, duration);
+    }
+    return $n;
   }
 
-  static hide() {
-    if (!lastNotification) {
-      return;
+  static hide($node) {
+    if (!$node) {
+      if (!lastNotification) {
+        return;
+      }
+      if (autoHideTimer) {
+        clearTimeout(autoHideTimer);
+        autoHideTimer = null;
+      }
+      const $n = lastNotification;
+      $n.addClass('hide');
+      setTimeout(() => $n.remove(), 200);
+      lastNotification = null;
+    } else {
+      $node.addClass('hide');
+      setTimeout(() => $node.remove(), 200);
     }
-    if (autoHideTimer) {
-      clearTimeout(autoHideTimer);
-      autoHideTimer = null;
-    }
-    const $n = lastNotification;
-    $n.addClass('hide');
-    setTimeout(() => $n.remove(), 200);
-    lastNotification = null;
   }
 }

ui/components/profile/profile.page.styl

@@ -10,6 +10,13 @@
   &:hover
     text-decoration: none
 
+for n in (1..21)
+  .user-profile-bg--{n}
+    background-image: url('backgrounds/' + n + '.jpg')
+
+  .user-profile-bg--thumbnail-{n}
+    background-image: url('backgrounds/thumbnail/' + n + '.jpg')
+
 for key, _ in $badge-bg-color
   .badge--{key}
     background-color: $badge-bg-color[key] !important