feature: 添加路由进度条

jsxiaosi · Jul 9, 2022 · 683fd08 · 683fd08
1 parent af6d8d0
commit 683fd08
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 71 deletions.
diff --git a/index.html b/index.html
@@ -30,91 +30,123 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          background: #000;
-          overflow: hidden;
-          font-family: 'Reggae One', cursive;
         }
 
-        .develop-p {
-          font-size: 8vw;
-          overflow: hidden;
-          -webkit-text-stroke: 3px #7272a5;
+        .loading {
+          display: block;
+          font-size: 0;
+          color: #409eff;
+          width: 82px;
+          height: 72px;
         }
 
-        .develop-span {
-          display: block;
-          font-size: 20px;
-          overflow: hidden;
-          color: green;
-          text-align: center;
+        .loading > div {
+          position: relative;
+          box-sizing: border-box;
+          display: inline-block;
+          float: none;
+          background-color: currentcolor;
+          border: 0 solid currentcolor;
         }
 
-        .develop-p::before {
-          content: ' ';
-          width: 100%;
-          height: 100%;
+        .loading.la-dark {
+          color: #333;
+        }
+
+        .loading > div:nth-child(1) {
           position: absolute;
-          left: 0;
-          top: 0;
-          background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
-          mix-blend-mode: multiply;
+          bottom: 32%;
+          left: 18%;
+          width: 24px;
+          height: 24px;
+          border-radius: 100%;
+          transform-origin: center bottom;
+          animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
         }
 
-        .develop-p::after {
-          content: '';
-          background: radial-gradient(circle, #fff, #000 50%);
-          background-size: 25% 25%;
+        .loading > div:not(:nth-child(1)) {
           position: absolute;
-          top: -100%;
-          left: -100%;
+          top: 0;
           right: 0;
-          bottom: 0;
-          mix-blend-mode: color-dodge;
-          animation: mix 2s linear infinite;
+          width: 24px;
+          height: 2px;
+          border-radius: 0;
+          transform: translate(60%, 0);
+          animation: ball-climbing-dot-steps 1.8s linear infinite;
+        }
+
+        .loading > div:not(:nth-child(1)):nth-child(2) {
+          animation-delay: 0ms;
         }
 
-        @keyframes mix {
-          to {
-            transform: translate(50%, 50%);
+        .loading > div:not(:nth-child(1)):nth-child(3) {
+          animation-delay: -600ms;
+        }
+
+        .loading > div:not(:nth-child(1)):nth-child(4) {
+          animation-delay: -1200ms;
+        }
+
+        @keyframes ball-climbing-dot-jump {
+          0% {
+            transform: scale(1, 0.7);
+          }
+
+          20% {
+            transform: scale(0.7, 1.2);
+          }
+
+          40% {
+            transform: scale(1, 1);
+          }
+
+          50% {
+            bottom: 125%;
+          }
+
+          46% {
+            transform: scale(1, 1);
+          }
+
+          80% {
+            transform: scale(0.7, 1.2);
+          }
+
+          90% {
+            transform: scale(0.7, 1.2);
+          }
+
+          100% {
+            transform: scale(1, 0.7);
+          }
+        }
+
+        @keyframes ball-climbing-dot-steps {
+          0% {
+            top: 0;
+            right: 0;
+            opacity: 0;
+          }
+
+          50% {
+            opacity: 1;
+          }
+
+          100% {
+            top: 100%;
+            right: 100%;
+            opacity: 0;
           }
         }
       </style>
-      <div class="g-container">
-        <p class="develop-p">SuperCuteXiaoSi</p>
-        <span class="develop-span"></span>
+      <div class="loading">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
       </div>
     </div>
-    <script>
-      // 此代码仅用于开发环境的友好提示，项目打包前请去掉这段js代码 This code is only used as a friendly reminder of the development environment, please remove this js code before packaging the project
-      // window.onload = function () {
-      //   (function () {
-      //     const ua = navigator.userAgent.toLowerCase();
-      //     const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
-      //     const m = ua.match(re);
-      //     const Sys = {
-      //       browser: m[1].replace(/version/, "'safari"),
-      //       version: m[2],
-      //     };
-
-      //     const browser = Array.of('chrome', 'firefox').includes(Sys.browser);
-      //     const version = parseFloat(Sys.version);
-
-      //     const el = document.querySelector('.develop');
-
-      //     if (el) {
-      //       if (browser && version >= 90) {
-      //         let success = document.createTextNode('哈哈哈哈哈！帅吧？ 😃');
-      //         el.appendChild(success);
-      //       } else {
-      //         let warn = document.createTextNode('你这浏览器不行啊，换一个吧！😯');
-      //         el.appendChild(warn);
-      //         el.style.color = 'red';
-      //       }
-      //     }
-      //     return Sys;
-      //   })();
-      // };
-    </script>
+    <script></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "marked": "^4.0.17",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^2.0.14",
     "qs": "^6.11.0",
@@ -58,6 +59,7 @@
     "@types/lodash-es": "^4.17.6",
     "@types/marked": "^4.0.3",
     "@types/node": "^18.0.0",
+    "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.13.0",
     "@typescript-eslint/eslint-plugin": "^5.30.3",

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -3,6 +3,7 @@ import { App } from 'vue';
 import { configRouteList } from './modules';
 import { handleAliveRoute, initAsyncRoute } from './utils';
 import { usePermissionStoreHook } from '@/store/modules/permission';
+import NProgress from '@/utils/plugin/progress';
 
 const { whiteRouteModulesList, routeModulesList } = configRouteList();
 
@@ -21,6 +22,7 @@ export const configMainRouter = async (app: App<Element>) => {
 
 // 路由守卫
 router.beforeEach((to, from, next) => {
+  NProgress.start();
   if (to.meta?.keepAlive) {
     const newMatched = to.matched;
     handleAliveRoute(newMatched, 'add');
@@ -67,3 +69,7 @@ router.beforeEach((to, from, next) => {
     }
   }
 });
+
+router.afterEach(() => {
+  NProgress.done();
+});
diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss
@@ -1,8 +1,10 @@
-$text-color-base: #909399;
-
 /* 修改element颜色变量 */
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (),
+  $colors: (
+    'primary': (
+      'base': #409eff,
+    ),
+  ),
   $text-color: (
     'primary': #909399,
     'regular': #606266,

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,4 +1,4 @@
-@import 'element-plus/theme-chalk/dark/css-vars.css';
+@import 'element-plus/theme-chalk/src/dark/css-vars.scss';
 @import './theme.scss';
 @import './intro.scss';
 @import './transition.scss';

diff --git a/src/styles/nprogress.scss b/src/styles/nprogress.scss
@@ -0,0 +1,81 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--mian-color);
+
+  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 var(--mian-color), 0 0 5px var(--mian-color);
+  opacity: 1;
+
+  -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: var(--mian-color);
+  border-left-color: var(--mian-color);
+  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);
+  }
+}
diff --git a/src/utils/plugin/progress.ts b/src/utils/plugin/progress.ts
@@ -0,0 +1,17 @@
+// https://github.com/rstacruz/nprogress
+import NProgress from 'nprogress';
+import '@/styles/nprogress.scss';
+
+NProgress.configure({
+  easing: 'ease',
+  // 递增进度条的速度
+  speed: 400,
+  // 是否显示加载ico
+  showSpinner: true,
+  // 自动递增间隔
+  trickleSpeed: 300,
+  // 初始化时的最小百分比
+  minimum: 0.2,
+});
+
+export default NProgress;