pref: add page load progress bar. (halo-dev/console#272)

package.json

@@ -29,6 +29,7 @@
     "flv.js": "^1.5.0",
     "halo-editor": "^2.8.2",
     "marked": "^1.1.1",
+    "nprogress": "^0.2.0",
     "tiny-pinyin": "^1.3.0",
     "verte": "^0.0.12",
     "vue": "^2.6.12",

src/components/FooterToolbar/index.less

@@ -1,4 +1,4 @@
-@import '../index';
+@import '../../styles/index.less';
 
 @footer-toolbar-prefix-cls: ~'@{ant-pro-prefix}-footer-toolbar';
 

src/layouts/BasicLayout.vue

@@ -161,7 +161,7 @@ export default {
 </script>
 
 <style lang="less">
-@import url('../components/global.less');
+@import url('../styles/global.less');
 
 .page-transition-enter {
   opacity: 0;

src/permission.js

@@ -1,16 +1,20 @@
 import Vue from 'vue'
 import router from './router'
 import store from './store'
-import {
-  setDocumentTitle,
-  domTitle
-} from '@/utils/domUtil'
+import NProgress from 'nprogress' // progress bar
+import { setDocumentTitle, domTitle } from '@/utils/domUtil'
 import adminApi from '@api/admin'
 
+NProgress.configure({ showSpinner: false, speed: 500 })
+
 const whiteList = ['Login', 'Install', 'NotFound', 'ResetPassword'] // no redirect whitelist
 
+let progressTimer = null
 router.beforeEach(async(to, from, next) => {
-  to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
+  progressTimer = setTimeout(() => {
+    NProgress.start()
+  }, 250)
+  to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`)
   Vue.$log.debug('Token', store.getters.token)
   if (store.getters.token) {
     if (to.name === 'Install') {
@@ -30,27 +34,28 @@ router.beforeEach(async(to, from, next) => {
       })
       return
     }
-    // TODO Get installation status
 
     if (!store.getters.options) {
       store.dispatch('refreshOptionsCache').then()
     }
-
     next()
     return
   }
 
-  // Not login
   // Check whitelist
   if (whiteList.includes(to.name)) {
     next()
     return
   }
-
   next({
     name: 'Login',
     query: {
       redirect: to.fullPath
     }
   })
 })
+
+router.afterEach(() => {
+  clearTimeout(progressTimer)
+  NProgress.done()
+})

src/components/global.less → src/styles/global.less

@@ -1,24 +1,6 @@
 @import './index.less';
 @import './style.less';
 
-* {
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    background-color: #eee;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #1890ff;
-    cursor: pointer;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #eee;
-    cursor: pointer;
-  }
-}
-
 body {
   overflow-y: scroll;
   padding: 0 !important;
@@ -875,3 +857,76 @@ body {
   z-index: 999;
   top: 0;
 }
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}