From ada0ff301bbd0c74820941fd5e5fb66236abb7c4 Mon Sep 17 00:00:00 2001
From: qian <wuchengqian5@163.com>
Date: Sat, 13 Jun 2026 17:15:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=EF=BC=8C=E4=BC=98=E5=8C=96=E5=BC=B1?=
 =?UTF-8?q?=E7=BD=91=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/admin/src/App.vue                         |  2 +
 web/admin/src/components/TopProgress.vue      | 42 +++++++++++++++++++
 web/admin/src/router/index.ts                 | 12 ++++++
 web/tenant/src/App.vue                        |  2 +
 .../src/components/common/TopProgress.vue     | 40 ++++++++++++++++++
 web/tenant/src/router/index.ts                | 13 ++++++
 6 files changed, 111 insertions(+)
 create mode 100644 web/admin/src/components/TopProgress.vue
 create mode 100644 web/tenant/src/components/common/TopProgress.vue

diff --git a/web/admin/src/App.vue b/web/admin/src/App.vue
index 31e9481..34b3e8c 100644
--- a/web/admin/src/App.vue
+++ b/web/admin/src/App.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import TopProgress from '@/components/TopProgress.vue'
 </script>
 
 <template>
+  <TopProgress />
   <AConfigProvider>
     <router-view />
   </AConfigProvider>
diff --git a/web/admin/src/components/TopProgress.vue b/web/admin/src/components/TopProgress.vue
new file mode 100644
index 0000000..85683db
--- /dev/null
+++ b/web/admin/src/components/TopProgress.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useTopProgress } from '@/composables/useTopProgress'
+
+const { progress, visible, smooth } = useTopProgress()
+</script>
+
+<template>
+  <div class="top-progress-container" :class="{ 'is-visible': visible }">
+    <div class="top-progress-bar" :class="{ 'no-anim': !smooth }" :style="{ width: progress + '%' }" />
+  </div>
+</template>
+
+<style scoped>
+.top-progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.top-progress-container.is-visible {
+  opacity: 1;
+}
+.top-progress-bar {
+  height: 100%;
+  background: var(--ta-primary-gradient);
+  transition: width 0.2s ease;
+}
+.top-progress-bar.no-anim {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .top-progress-container,
+  .top-progress-bar {
+    transition-duration: 1ms;
+  }
+}
+</style>
diff --git a/web/admin/src/router/index.ts b/web/admin/src/router/index.ts
index 2af1bfa..08a104f 100644
--- a/web/admin/src/router/index.ts
+++ b/web/admin/src/router/index.ts
@@ -4,6 +4,7 @@ import adminRoutes from './admin'
 import { useAuthStore } from '@/stores/auth'
 import { shouldRefresh, getRefreshToken } from '@/utils/request'
 import { useSiteName } from '@/composables/useSiteName'
+import { useTopProgress } from '@/composables/useTopProgress'
 import axios from 'axios'
 
 const routes: RouteRecordRaw[] = [
@@ -44,8 +45,11 @@ async function checkSetupStatus(): Promise<boolean> {
 }
 
 const { siteName, fetchSiteName } = useSiteName()
+const { start, done } = useTopProgress()
 
 router.beforeEach(async (to) => {
+  start()
+
   const authStore = useAuthStore()
   authStore.loadFromStorage()
 
@@ -82,4 +86,12 @@ router.beforeEach(async (to) => {
   return true
 })
 
+router.afterEach(() => {
+  done()
+})
+
+router.onError(() => {
+  done()
+})
+
 export default router
diff --git a/web/tenant/src/App.vue b/web/tenant/src/App.vue
index c882f85..6182385 100644
--- a/web/tenant/src/App.vue
+++ b/web/tenant/src/App.vue
@@ -1,10 +1,12 @@
 <template>
+  <TopProgress />
   <router-view />
   <Toast />
   <ConfirmDialog />
 </template>
 
 <script setup lang="ts">
+import TopProgress from '@/components/common/TopProgress.vue'
 import Toast from '@/components/common/Toast.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 </script>
diff --git a/web/tenant/src/components/common/TopProgress.vue b/web/tenant/src/components/common/TopProgress.vue
new file mode 100644
index 0000000..32fec5e
--- /dev/null
+++ b/web/tenant/src/components/common/TopProgress.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useTopProgress } from '@/composables/useTopProgress'
+
+const { progress, visible, smooth } = useTopProgress()
+</script>
+
+<template>
+  <div
+    class="top-progress-container fixed top-0 left-0 z-[9999] h-[3px] w-full pointer-events-none"
+    :class="{ 'is-visible': visible }"
+  >
+    <div
+      class="top-progress-bar h-full bg-gradient-to-r from-primary-500 to-primary-600"
+      :class="{ 'no-anim': !smooth }"
+      :style="{ width: progress + '%' }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.top-progress-container {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.top-progress-container.is-visible {
+  opacity: 1;
+}
+.top-progress-bar {
+  transition: width 0.2s ease;
+}
+.top-progress-bar.no-anim {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .top-progress-container,
+  .top-progress-bar {
+    transition-duration: 1ms;
+  }
+}
+</style>
diff --git a/web/tenant/src/router/index.ts b/web/tenant/src/router/index.ts
index 63974be..daf5174 100644
--- a/web/tenant/src/router/index.ts
+++ b/web/tenant/src/router/index.ts
@@ -4,6 +4,7 @@ import tenantRoutes from './tenant'
 import { useTenantAuthStore } from '@/stores/tenant-auth'
 import { shouldRefresh, getRefreshToken } from '@/utils/request'
 import { usePublicSettings } from '@/composables/usePublicSettings'
+import { useTopProgress } from '@/composables/useTopProgress'
 
 const routes: RouteRecordRaw[] = [
 	{
@@ -29,7 +30,11 @@ const router = createRouter({
 	routes,
 })
 
+const { start, done } = useTopProgress()
+
 router.beforeEach((to) => {
+	start()
+
 	const tenantAuthStore = useTenantAuthStore()
 	tenantAuthStore.loadFromStorage()
 
@@ -72,4 +77,12 @@ router.beforeEach((to) => {
 	return true
 })
 
+router.afterEach(() => {
+	done()
+})
+
+router.onError(() => {
+	done()
+})
+
 export default router