From 280a180d9e6139caa1f5df640828550cbcd1c4a2 Mon Sep 17 00:00:00 2001 From: LittleSheep Date: Mon, 1 Apr 2024 20:29:04 +0800 Subject: [PATCH] :sparkles: Add progress bar --- index.html | 6 ------ package.json | 2 ++ src/assets/utils.css | 8 ++++++++ src/main.ts | 9 +++++++++ src/router/index.ts | 9 +++++++++ 5 files changed, 28 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3ed2e66..637dca8 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,6 @@ Solian - -
diff --git a/package.json b/package.json index 6c474a8..247dfa9 100644 --- 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", diff --git a/src/assets/utils.css b/src/assets/utils.css index fd368b0..9b3c597 100644 --- 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; +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 18c32d3..e8bdb31 100644 --- 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( diff --git a/src/router/index.ts b/src/router/index.ts index fd25488..d546275 100644 --- 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