pref: add page load progress bar. (#272)

package-lock.json

@@ -2462,6 +2462,18 @@
             "supports-color": "^7.0.0"
           }
         },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2591,6 +2603,31 @@
             "webpack-sources": "^1.4.3"
           }
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
+          "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -11886,6 +11923,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -16127,87 +16169,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.9",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.9.tgz?cache=0&sync_timestamp=1604303341876&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.9.tgz",
-      "integrity": "sha1-UlEsthwpaCfJnA1UOYvvhL5ESPw=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1601839122515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611730985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-ls": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vue-ls/-/vue-ls-3.2.1.tgz",

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 {
+import NProgress from 'nprogress' // progress bar
-  setDocumentTitle,
+import { setDocumentTitle, domTitle } from '@/utils/domUtil'
-  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,23 +34,19 @@ 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: {
@@ -54,3 +54,8 @@ router.beforeEach(async(to, from, next) => {
     }
   })
 })
+
+router.afterEach(() => {
+  clearTimeout(progressTimer)
+  NProgress.done()
+})

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); }
+}