From 13af0ba56128c1c7425d7e6591a1de8bce60c73a Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 19 Apr 2024 12:40:56 +0800
Subject: [PATCH] [Core] [UI] Add page loading progress

---
 core/datacap-ui/package.json                       |  2 ++
 core/datacap-ui/src/router/index.ts                | 13 +++++++++++++
 core/datacap-ui/src/views/ui/carousel/carousel.vue |  2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/core/datacap-ui/package.json b/core/datacap-ui/package.json
index ceb62c66..6a44edc6 100644
--- a/core/datacap-ui/package.json
+++ b/core/datacap-ui/package.json
@@ -37,6 +37,7 @@
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.356.0",
     "md-editor-v3": "^4.12.1",
+    "nprogress": "^0.2.0",
     "radix-vue": "^1.5.2",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
@@ -58,6 +59,7 @@
   "devDependencies": {
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.26",
+    "@types/nprogress": "^0.2.3",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.18",
diff --git a/core/datacap-ui/src/router/index.ts b/core/datacap-ui/src/router/index.ts
index 30a245da..527a2006 100644
--- a/core/datacap-ui/src/router/index.ts
+++ b/core/datacap-ui/src/router/index.ts
@@ -2,6 +2,16 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import { createAuthRoute } from '@/router/auth'
 import { createDefaultRouter } from '@/router/default'
 import { createHttpRoute } from '@/router/http'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({
+    easing: 'ease',
+    speed: 600,
+    showSpinner: true,
+    trickleSpeed: 200,
+    minimum: 0.3
+})
 
 const routes: Array<RouteRecordRaw> = []
 
@@ -15,6 +25,7 @@ createAuthRoute(router)
 createDefaultRouter(router)
 
 router.beforeEach((_to, _from, _next) => {
+    NProgress.start()
     if (_to.matched.length === 0) {
         _next('/common/404')
     }
@@ -23,4 +34,6 @@ router.beforeEach((_to, _from, _next) => {
     }
 })
 
+router.afterEach(() => NProgress.done())
+
 export default router
diff --git a/core/datacap-ui/src/views/ui/carousel/carousel.vue b/core/datacap-ui/src/views/ui/carousel/carousel.vue
index 41dfda16..cfccf609 100644
--- a/core/datacap-ui/src/views/ui/carousel/carousel.vue
+++ b/core/datacap-ui/src/views/ui/carousel/carousel.vue
@@ -4,7 +4,7 @@
       <CarouselItem v-for="item in items">
         <div v-if="item.isAlert">
           <DcLink :external="item.external" :link="item.link">
-            <Alert :title="item.title"/>
+            <Alert :title="item.title" class="rounded-none"/>
           </DcLink>
         </div>
         <div v-else>