✨ Add progress bar

2024-04-01 20:29:04 +08:00 · 2024-04-01 20:29:04 +08:00 · 280a180d9e
commit 280a180d9e
parent 509d433959
5 changed files with 28 additions and 6 deletions
--- a/index.html
+++ b/index.html
@ -6,12 +6,6 @@
  <link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" sizes="1024x1024">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>Solian</title>
-
-  <style>
-      html, body {
-          scroll-behavior: smooth;
-      }
-  </style>
 </head>
 <body>
 <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "@mdi/font": "^7.4.47",
    "dompurify": "^3.0.11",
    "marked": "^12.0.1",
+    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "universal-cookie": "^7.1.0",
    "vue": "^3.4.21",
@ -36,6 +37,7 @@
    "@tsconfig/node20": "^20.1.2",
    "@types/dompurify": "^3.0.5",
    "@types/node": "^20.11.28",
+    "@types/nprogress": "^0.2.3",
    "@unocss/reset": "^0.58.7",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
--- a/src/assets/utils.css
+++ b/src/assets/utils.css
@ -12,3 +12,11 @@ body,
 .no-scrollbar::-webkit-scrollbar {
  width: 0;
 }
+
+html, body {
+  scroll-behavior: smooth;
+}
+
+#nprogress .bar {
+  background: #ffffff !important;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -3,6 +3,8 @@ import "virtual:uno.css"
 import "./assets/utils.css"
 import "./assets/safe-area.css"

+import "nprogress/nprogress.css"
+
 import { createApp } from "vue"
 import { createPinia } from "pinia"

@ -17,9 +19,16 @@ import "@mdi/font/css/materialdesignicons.min.css"
 import "@fontsource/roboto/latin.css"
 import "@unocss/reset/tailwind.css"

+import nprogress from "nprogress";
+
 import index from "./index.vue"
 import router from "./router"

+nprogress.configure({showSpinner: false})
+nprogress.start()
+
+window.onload = () => nprogress.done()
+
 const app = createApp(index)

 app.use(
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from "vue-router"
 import MasterLayout from "@/layouts/master.vue"

+import nprogress from "nprogress";
+
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
@ -71,4 +73,11 @@ const router = createRouter({
  ]
 })

+router.beforeEach((_to, _from, next) => {
+  nprogress.start()
+  next()
+})
+
+router.afterEach(() => nprogress.done())
+
 export default router