From abc87e646eceac83fcc9b5411fcbe3b703940c0a Mon Sep 17 00:00:00 2001
From: Dustin Jiang <dustinjiang@outlook.com>
Date: Thu, 18 Jan 2024 17:20:49 +0800
Subject: [PATCH] =?UTF-8?q?=E2=8F=B3=E5=A2=9E=E5=8A=A0=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨调整加载条样式

🤕修复加载条显示问题

🤕修复加载条关于`nextTick`的问题
---
 src/App.vue                   | 220 +++++++++++---------------------
 src/AppRoot.vue               |  97 +++++++++++++++
 src/components/Posters.vue    |  11 +-
 src/main.ts                   |   4 +-
 src/router/index.ts           | 227 +++++++++++++++++++---------------
 src/utils/globalThemeVars.css |   8 ++
 src/views/GalleryShow.vue     |   8 +-
 7 files changed, 322 insertions(+), 253 deletions(-)
 create mode 100644 src/AppRoot.vue

diff --git a/src/App.vue b/src/App.vue
index c1cad7e..be74b56 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,26 +6,16 @@
  * _(:з」∠)_
 -->
 <script setup lang="ts">
-import { GlobalThemeOverrides, NIcon, darkTheme, lightTheme, useOsTheme } from 'naive-ui'
-import LightThemeOverrides from '@/utils/naive-ui-light-theme-overrides.json';
-import DarkThemeOverrides from '@/utils/naive-ui-dark-theme-overrides.json';
+import { NIcon, useLoadingBar } from "naive-ui"
 import { useRouter, useRoute } from 'vue-router';
 import { h, ref, onMounted, watch } from 'vue';
 import { MenuRound, HomeOutlined, FingerprintOutlined, PersonOutlined, SchoolOutlined, ArticleOutlined, RefreshOutlined, BookOutlined, ArrowBackOutlined, CalendarMonthOutlined, MailOutlined, MapOutlined, PagesOutlined, ForumOutlined } from '@vicons/material';
 import { QuestionCircleOutlined } from "@vicons/antd"
-import GlobalComponents from './components/GlobalComponents.vue';
-import { hitokoto,WatchNetwork } from './utils/tools';
+import { hitokoto, WatchNetwork } from './utils/tools';
 import http from './utils/request';
 import axios from 'axios';
+import { loadingBarRef } from "@/router"
 
-import "@/utils/globalThemeVars.css"
-
-const isDark = useOsTheme()
-watch(isDark, () => {
-  theme.value = isDark.value === "dark" ? darkTheme : lightTheme
-})
-const theme = ref<typeof darkTheme | typeof lightTheme>(isDark.value === "dark" ? darkTheme : lightTheme)
-const themeOverrides = ref<GlobalThemeOverrides>(isDark.value === "dark" ? DarkThemeOverrides : LightThemeOverrides);
 const router = useRouter();
 const route = useRoute();
 
@@ -106,6 +96,8 @@ function LoadUnreadNum() {
   })
 }
 
+const loadingBar = useLoadingBar()
+
 onMounted(() => {
   // 自动升级到https
   if (location.protocol == 'http:') {
@@ -118,147 +110,81 @@ onMounted(() => {
   WatchNetwork();
 
   LoadUnreadNum();
+
+  loadingBarRef.value = loadingBar
+  loadingBarRef.value.finish()
 })
 
 </script>
 
 <template>
-  <n-config-provider
-    :theme-overrides="themeOverrides"
-    :theme="theme"
-  >
-    <n-global-style />
-    <GlobalComponents></GlobalComponents>
-    <n-layout>
-      <n-layout-header bordered style="background-color:var(--header-bg-color);">
-        <n-space class="container" justify="space-between">
-          <div style="height:42px;display: flex;align-items: center;padding: 4px;">
-            <n-button @click="drawer_model = true" circle color="#FF9A57" text-color="#FFF"
-              style="font-size: 33px;margin-top:3px;" size="large">
+  <n-layout>
+    <n-layout-header bordered style="background-color:var(--header-bg-color);">
+      <n-space class="container" justify="space-between">
+        <div style="height:42px;display: flex;align-items: center;padding: 4px;">
+          <n-button @click="drawer_model = true" circle color="#FF9A57" text-color="#FFF"
+            style="font-size: 33px;margin-top:3px;" size="large">
+            <n-icon>
+              <MenuRound />
+            </n-icon>
+          </n-button>
+          <n-button @click="router.push('/home')" text style="font-size: 24px;color:#FFF">BIT101</n-button>
+        </div>
+        <div style="display:flex;align-items:center;height:100%;">
+          <n-button @click="router.go(-1)" quaternary circle size="large" color="white">
+            <template #icon>
               <n-icon>
-                <MenuRound />
+                <ArrowBackOutlined />
               </n-icon>
-            </n-button>
-            <n-button @click="router.push('/home')" text style="font-size: 24px;color:#FFF">BIT101</n-button>
-          </div>
-          <div style="display:flex;align-items:center;height:100%;">
-            <n-button @click="router.go(-1)" quaternary circle size="large" color="white">
-              <template #icon>
-                <n-icon>
-                  <ArrowBackOutlined />
-                </n-icon>
-              </template>
-            </n-button>
-            <n-button @click="Refresh" quaternary circle size="large" color="white">
-              <template #icon>
-                <n-icon>
-                  <RefreshOutlined />
+            </template>
+          </n-button>
+          <n-button @click="Refresh" quaternary circle size="large" color="white">
+            <template #icon>
+              <n-icon>
+                <RefreshOutlined />
+              </n-icon>
+            </template>
+          </n-button>
+          <n-button @click="unread_num = 0, router.push('/message/')" quaternary circle size="large" color="white"
+            style="margin-right:4px">
+            <template #icon>
+              <n-badge :value="unread_num" :max="99">
+                <n-icon color="white">
+                  <MailOutlined />
                 </n-icon>
-              </template>
-            </n-button>
-            <n-button @click="unread_num = 0, router.push('/message/')" quaternary circle size="large" color="white"
-              style="margin-right:4px">
-              <template #icon>
-                <n-badge :value="unread_num" :max="99">
-                  <n-icon color="white">
-                    <MailOutlined />
-                  </n-icon>
-                </n-badge>
-              </template>
-            </n-button>
-          </div>
-        </n-space>
-      </n-layout-header>
-
-      <n-drawer v-model:show="drawer_model" placement="left" :width="224">
-        <n-drawer-content title="BIT101" body-content-style="padding: 4px;">
-          <n-menu :options="menu_options" @update:value="MenuHandler" :indent="24"></n-menu>
-        </n-drawer-content>
-      </n-drawer>
-
-      <n-layout-content justify="center" style="margin: 11px;min-height: 89vh;">
-        <router-view v-slot="{ Component }">
-          <keep-alive :max="42">
-            <component :is="Component" v-if="route.meta.keepAlive != false" :key="route.fullPath" />
-          </keep-alive>
-          <component :is="Component" v-if="route.meta.keepAlive == false" />
-        </router-view>
-      </n-layout-content>
-
-
-      <n-layout-footer style="text-align:center;min-height: 11vh;">
-        <h4 style="color: #607d8b;margin: auto;font-size: 14px;">{{ hitokoto }}</h4>
-        <div><n-button @click="ToTop" text size="large">👆回到顶部👆</n-button></div>
-        <div>
-          <n-a href="https://github.com/BIT101-dev" target="_blank">GitHub</n-a>
-          ｜
-          <n-a href="https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc" target="_blank">加入BIT101</n-a>
+              </n-badge>
+            </template>
+          </n-button>
         </div>
-        <div style="font-size: 14px;">Powered⚡ by BIT101 Project Team with 💖.</div>
-
-      </n-layout-footer>
-    </n-layout>
-  </n-config-provider>
+      </n-space>
+    </n-layout-header>
+
+    <n-drawer v-model:show="drawer_model" placement="left" :width="224">
+      <n-drawer-content title="BIT101" body-content-style="padding: 4px;">
+        <n-menu :options="menu_options" @update:value="MenuHandler" :indent="24"></n-menu>
+      </n-drawer-content>
+    </n-drawer>
+
+    <n-layout-content justify="center" style="margin: 11px;min-height: 89vh;">
+      <router-view v-slot="{ Component }">
+        <keep-alive :max="42">
+          <component :is="Component" v-if="route.meta.keepAlive != false" :key="route.fullPath" />
+        </keep-alive>
+        <component :is="Component" v-if="route.meta.keepAlive == false" />
+      </router-view>
+    </n-layout-content>
+
+
+    <n-layout-footer style="text-align:center;min-height: 11vh;">
+      <h4 style="color: #607d8b;margin: auto;font-size: 14px;">{{ hitokoto }}</h4>
+      <div><n-button @click="ToTop" text size="large">👆回到顶部👆</n-button></div>
+      <div>
+        <n-a href="https://github.com/BIT101-dev" target="_blank">GitHub</n-a>
+        ｜
+        <n-a href="https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc" target="_blank">加入BIT101</n-a>
+      </div>
+      <div style="font-size: 14px;">Powered⚡ by BIT101 Project Team with 💖.</div>
+
+    </n-layout-footer>
+  </n-layout>
 </template>
-
-<style>
-@font-face {
-  font-family: "Noto Serif";
-  src: local("Noto Serif SC Light"),
-      local("Noto Serif SC"),
-      local("Noto Serif CJK Light"),
-      local("Noto Serif CJK"),
-      local("Source Han Serif CN Light"),
-      local("Source Han Serif CN");
-  font-display: swap;
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: "Noto Serif";
-  src: local("Noto Serif SC Medium"),
-      local("Noto Serif SC"),
-      local("Noto Serif CJK Medium"),
-      local("Noto Serif CJK"),
-      local("Source Han Serif CN Medium"),
-      local("Source Han Serif CN");
-  font-display: swap;
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: "Noto Serif";
-  src: local("Noto Serif SC Bold"),
-      local("Noto Serif CJK Bold"),
-      local("Source Han Serif CN Bold");
-  font-display: swap;
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Noto Serif";
-  src: local("Noto Serif SC Heavy"),
-      local("Noto Serif CJK Heavy"),
-      local("Source Han Serif CN Heavy");
-  font-display: swap;
-  font-weight: 800;
-}
-
-#app,
-body {
-  font-family: "Noto Serif", "Noto Serif SC", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-}
-
-.container {
-  max-width: 666px;
-  margin: auto;
-}
-
-::selection {
-  color: #fff;
-  background: #00bcd4;
-}
-</style>
diff --git a/src/AppRoot.vue b/src/AppRoot.vue
new file mode 100644
index 0000000..fa572de
--- /dev/null
+++ b/src/AppRoot.vue
@@ -0,0 +1,97 @@
+<template>
+  <n-config-provider
+      :theme-overrides="themeOverrides"
+      :theme="theme"
+    >
+    <n-loading-bar-provider :loading-bar-style="{
+      loading: {
+        backgroundColor: 'var(--loading-bar-color)',
+        boxShadow: 'var(--loading-bar-shadow)'
+      }
+    }">
+      <GlobalComponents></GlobalComponents>
+      <App />
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import { GlobalThemeOverrides, darkTheme, lightTheme, useOsTheme } from 'naive-ui'
+import LightThemeOverrides from '@/utils/naive-ui-light-theme-overrides.json'
+import DarkThemeOverrides from '@/utils/naive-ui-dark-theme-overrides.json'
+import GlobalComponents from '@/components/GlobalComponents.vue';
+import App from "@/App.vue"
+
+import "@/utils/globalThemeVars.css"
+import { ref, watch } from 'vue';
+
+const isDark = useOsTheme()
+watch(isDark, () => {
+  theme.value = isDark.value === "dark" ? darkTheme : lightTheme
+})
+
+const theme = ref<typeof darkTheme | typeof lightTheme>(isDark.value === "dark" ? darkTheme : lightTheme)
+const themeOverrides = ref<GlobalThemeOverrides>(isDark.value === "dark" ? DarkThemeOverrides : LightThemeOverrides);
+</script>
+
+<style>
+@font-face {
+  font-family: "Noto Serif";
+  src: local("Noto Serif SC Light"),
+    local("Noto Serif SC"),
+    local("Noto Serif CJK Light"),
+    local("Noto Serif CJK"),
+    local("Source Han Serif CN Light"),
+    local("Source Han Serif CN");
+  font-display: swap;
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  src: local("Noto Serif SC Medium"),
+    local("Noto Serif SC"),
+    local("Noto Serif CJK Medium"),
+    local("Noto Serif CJK"),
+    local("Source Han Serif CN Medium"),
+    local("Source Han Serif CN");
+  font-display: swap;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  src: local("Noto Serif SC Bold"),
+    local("Noto Serif CJK Bold"),
+    local("Source Han Serif CN Bold");
+  font-display: swap;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  src: local("Noto Serif SC Heavy"),
+    local("Noto Serif CJK Heavy"),
+    local("Source Han Serif CN Heavy");
+  font-display: swap;
+  font-weight: 800;
+}
+
+#app,
+body {
+  font-family: "Noto Serif", "Noto Serif SC", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.container {
+  max-width: 666px;
+  margin: auto;
+}
+
+::selection {
+  color: #fff;
+  background: #00bcd4;
+}
+</style>
diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index 6bf7919..ec32072 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import router from '@/router';
 import http from '@/utils/request';
-import { PropType, onMounted, reactive, ref, watch } from 'vue';
+import { PropType, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { Poster } from '@/utils/types';
 import { FormatTime, OpenLink } from '@/utils/tools';
@@ -16,6 +16,7 @@ import Avatar from '@/components/Avatar.vue';
 import store from '@/utils/store';
 import ImageViewer from '@/components/ImageViewer/ImageViewer.vue';
 import ImageBox from "@/components/ImageViewer/ImageBox.vue";
+import { loadingBarRef } from '@/router';
 
 export interface PostersStatus {
   mode: 'recommend' | 'search' | 'follow' | 'hot';
@@ -41,7 +42,10 @@ const posters = reactive({
 
 function LoadPosters() {
   if (posters.loading || posters.end) return;
+  
   posters.loading = true;
+  loadingBarRef.value.start()
+  
   let refresh_time = posters.refresh_time;
   http.get("/posters", {
     params: {
@@ -52,6 +56,7 @@ function LoadPosters() {
       uid: props.value.uid
     }
   }).then(res => {
+    loadingBarRef.value.finish()
     // 状态更新后可能之前的请求还没完成 得加上时间戳保证更新的是最新的
     if (refresh_time != posters.refresh_time) return;
     if (res.data.length == 0) posters.end = true;
@@ -64,7 +69,9 @@ function LoadPosters() {
 }
 
 const load_more_observer = ref(null as any);
-onMounted(() => {
+onMounted(async () => {
+  await nextTick()
+  loadingBarRef.value.start()
   LoadPosters();
 
   // 构建滚动观察器
diff --git a/src/main.ts b/src/main.ts
index 01f77af..cd8abc5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,10 +6,10 @@
  * _(:з」∠)_
  */
 import { createApp } from 'vue'
-import App from './App.vue'
+import AppRoot from './AppRoot.vue'
 import router from './router/index'
 
-const app = createApp(App);
+const app = createApp(AppRoot);
 app.use(router)
 app.mount('#app')
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 4d4181d..83a80d0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,164 +2,191 @@
  * @Author: flwfdd
  * @Date: 2022-05-28 01:19:14
  * @LastEditTime: 2023-11-01 23:20:50
- * @Description: 
+ * @Description:
  * _(:з」∠)_
  */
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import { setTitle } from '@/utils/tools'
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from "vue-router";
+import { setTitle } from "@/utils/tools";
+import { LoadingBarProviderInst } from "naive-ui";
+
+export const loadingBarRef: { value: LoadingBarProviderInst } = {
+  //@ts-expect-error
+  value: {},
+};
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
-      path: '/',
-      name: 'intro',
-      component: () => import('@/views/Intro.vue')
+      path: "/",
+      name: "intro",
+      component: () => import("@/views/Intro.vue"),
     },
     {
-      path: '/home',
-      name: 'home',
-      component: () => import('@/views/Home.vue')
+      path: "/home",
+      name: "home",
+      component: () => import("@/views/Home.vue"),
     },
     {
-      path: '/login',
-      name: 'login',
-      component: () => import('@/views/Login.vue'),
-      meta: { keepAlive: false }
+      path: "/login",
+      name: "login",
+      component: () => import("@/views/Login.vue"),
+      meta: { keepAlive: false },
     },
     {
-      path: '/user/:id',
-      name: 'user',
-      component: () => import('@/views/User.vue'),
-      meta: { login: true }
+      path: "/user/:id",
+      name: "user",
+      component: () => import("@/views/User.vue"),
+      meta: { login: true },
     },
     {
-      path: '/score',
-      name: 'score',
-      component: () => import('@/views/Score.vue')
+      path: "/score",
+      name: "score",
+      component: () => import("@/views/Score.vue"),
     },
     {
-      path: '/paper',
-      name: 'paper',
-      component: () => import('@/views/Paper.vue')
+      path: "/paper",
+      name: "paper",
+      component: () => import("@/views/Paper.vue"),
     },
     {
-      path: '/paper/edit/:id',
-      name: 'paper_edit',
-      component: () => import('@/views/PaperEdit.vue')
+      path: "/paper/edit/:id",
+      name: "paper_edit",
+      component: () => import("@/views/PaperEdit.vue"),
     },
     {
-      path: '/paper/:id',
-      name: 'paper_show',
-      component: () => import('@/views/PaperShow.vue')
+      path: "/paper/:id",
+      name: "paper_show",
+      component: () => import("@/views/PaperShow.vue"),
     },
     {
-      path: '/course/:id',
-      name: 'course_show',
-      component: () => import('@/views/CourseShow.vue')
+      path: "/course/:id",
+      name: "course_show",
+      component: () => import("@/views/CourseShow.vue"),
     },
     {
-      path: '/course',
-      name: 'course',
-      component: () => import('@/views/Course.vue')
+      path: "/course",
+      name: "course",
+      component: () => import("@/views/Course.vue"),
     },
     {
-      path: '/course/upload/:id',
-      name: 'course_upload',
-      component: () => import('@/views/CourseUpload.vue'),
-      meta: { keepAlive: false }
+      path: "/course/upload/:id",
+      name: "course_upload",
+      component: () => import("@/views/CourseUpload.vue"),
+      meta: { keepAlive: false },
     },
     {
-      path: '/about/',
-      name: 'about',
-      component: () => import('@/views/About.vue'),
-      meta: { keepAlive: false }
+      path: "/about/",
+      name: "about",
+      component: () => import("@/views/About.vue"),
+      meta: { keepAlive: false },
     },
     {
-      path: '/schedule/',
-      name: 'schedule',
-      component: () => import('@/views/Schedule.vue'),
-      meta: { keepAlive: false }
+      path: "/schedule/",
+      name: "schedule",
+      component: () => import("@/views/Schedule.vue"),
+      meta: { keepAlive: false },
     },
     {
-      path: '/message/',
-      name: 'message',
-      component: () => import('@/views/Message.vue'),
-      meta: { login: true }
+      path: "/message/",
+      name: "message",
+      component: () => import("@/views/Message.vue"),
+      meta: { login: true },
     },
     {
-      path: '/map/',
-      name: 'map',
-      component: () => import('@/views/Map.vue')
+      path: "/map/",
+      name: "map",
+      component: () => import("@/views/Map.vue"),
     },
     {
-      path: '/gallery/',
-      name: 'gallery',
-      component: () => import('@/views/Gallery.vue'),
-      meta: { login: true }
+      path: "/gallery/",
+      name: "gallery",
+      component: () => import("@/views/Gallery.vue"),
+      meta: { login: true },
     },
     {
-      path: '/gallery/:id',
-      name: 'gallery_show',
-      component: () => import('@/views/GalleryShow.vue'),
-      meta: { login: true }
+      path: "/gallery/:id",
+      name: "gallery_show",
+      component: () => import("@/views/GalleryShow.vue"),
+      meta: { login: true },
     },
     {
-      path: '/gallery/edit/:id',
-      name: 'gallery_edit',
-      component: () => import('@/views/GalleryEdit.vue'),
-      meta: { keepAlive: false, login: true }
+      path: "/gallery/edit/:id",
+      name: "gallery_edit",
+      component: () => import("@/views/GalleryEdit.vue"),
+      meta: { keepAlive: false, login: true },
     },
     {
-      path: '/report/:obj',
-      name: 'report',
-      component: () => import('@/views/Report.vue'),
-      meta: { login: true }
+      path: "/report/:obj",
+      name: "report",
+      component: () => import("@/views/Report.vue"),
+      meta: { login: true },
     },
     {
-      path: '/admin/carousel/',
-      name: 'admin_carousel',
-      component: () => import('@/views/admin/Carousel.vue')
+      path: "/admin/carousel/",
+      name: "admin_carousel",
+      component: () => import("@/views/admin/Carousel.vue"),
     },
     {
-      path: '/admin/billboard/',
-      name: 'admin_billboard',
-      component: () => import('@/views/admin/Billboard.vue')
+      path: "/admin/billboard/",
+      name: "admin_billboard",
+      component: () => import("@/views/admin/Billboard.vue"),
     },
     {
-      path: '/:pathMatch(.*)',
-      name: '404',
-      component: () => import('@/views/404.vue')
-    }
+      path: "/:pathMatch(.*)",
+      name: "404",
+      component: () => import("@/views/404.vue"),
+    },
   ],
   // 保存滚动位置
   scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) return savedPosition
-    else return { top: 0 }
+    if (savedPosition) return savedPosition;
+    else return { top: 0 };
   },
 });
 
-router.beforeEach(({ path }) => {
+router.beforeEach((from, to, next) => {
+  // 加载条相关
+
+  if (!from || to.path !== from.path) {
+    if (loadingBarRef.value) {
+      loadingBarRef.value.start();
+    }
+  }
+
   // 此处只是尽快响应，设置大类标题。
   // 之后各组件可以再覆盖。
 
   const titleMap: Record<string, string> = {
-    home: '主页',
-    login: '登录',
-    user: '我的',
-    paper: '文章',
-    course: '课程',
-    score: '成绩',
-    schedule: '课表',
-    about: '关于',
-    message: '消息',
-    map: '地图',
-    gallery: '话廊',
-    report: '举报',
-  }
-  const top = path.split('/').filter(piece => piece.length > 0)[0] ?? ''
-  const title = titleMap[top] ?? top
-  if (title) setTitle(title)
-})
+    home: "主页",
+    login: "登录",
+    user: "我的",
+    paper: "文章",
+    course: "课程",
+    score: "成绩",
+    schedule: "课表",
+    about: "关于",
+    message: "消息",
+    map: "地图",
+    gallery: "话廊",
+    report: "举报",
+  };
+  const top = from.path.split("/").filter((piece) => piece.length > 0)[0] ?? "";
+  const title = titleMap[top] ?? top;
+  if (title) setTitle(title);
+
+  next();
+});
 
+router.afterEach((to, from) => {
+  if (!from || to.path !== from.path) {
+    if (loadingBarRef.value) {
+      loadingBarRef.value.finish();
+    }
+  }
+});
 export default router;
diff --git a/src/utils/globalThemeVars.css b/src/utils/globalThemeVars.css
index 9b37cb7..d9d7882 100644
--- a/src/utils/globalThemeVars.css
+++ b/src/utils/globalThemeVars.css
@@ -10,6 +10,10 @@
   --card-title-color: #0087A8;
 
   --primary: #FF9A57;
+  
+  --loading-bar-color: #00ABD6;
+  --loading-bar-shadow: 0 0 5px var(--loading-bar-color);
+
   --header-bg-color: #FF9A57;
   --course-bg-color: #F0FCFF;
   --card-bg-color: #F0FCFF;
@@ -33,6 +37,10 @@
     --card-title-color: #37B9D9;
 
     --primary: #E88341;
+
+    --loading-bar-color: #3dbcdc;
+    --loading-bar-shadow: 0 0 10px var(--loading-bar-color);
+
     --header-bg-color: #E88341;
     --course-bg-color: #0C191C;
     --card-bg-color: #0C191C;
diff --git a/src/views/GalleryShow.vue b/src/views/GalleryShow.vue
index 1a442b8..1038f0d 100644
--- a/src/views/GalleryShow.vue
+++ b/src/views/GalleryShow.vue
@@ -6,7 +6,7 @@
 -->
 <script setup lang="ts">
 import http from '@/utils/request';
-import { onActivated, onDeactivated, onMounted, ref } from 'vue';
+import { nextTick, onActivated, onDeactivated, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { FormatTime, setTitle, OpenLink, Share } from '@/utils/tools';
 import { MessageOutlined, EditOutlined, ThumbUpOutlined, ThumbUpFilled, ShareOutlined, ErrorOutlined, DeleteOutlined, FeedbackOutlined } from '@vicons/material';
@@ -16,6 +16,7 @@ import Avatar from '@/components/Avatar.vue';
 import RenderLink from '@/components/RenderLink.vue';
 import { Md5 } from 'ts-md5';
 import ImageViewer from '@/components/ImageViewer/ImageViewer.vue';
+import { loadingBarRef } from '@/router';
 
 //Poster数据
 const poster = ref({} as Poster)
@@ -28,6 +29,7 @@ function LoadPoster() {
       poster.value = res.data;
       // 设置页面标题
       setTitle(poster.value.title, '话廊')
+      loadingBarRef.value.finish()
     })
 }
 
@@ -88,8 +90,10 @@ function ScrollToActions() {
 const router = useRouter();
 const route = useRoute();
 let timer = null as any;
-onMounted(() => {
+onMounted(async () => {
   poster.value.id = Number(route.params.id);
+  await nextTick()
+  loadingBarRef.value.start()
   LoadPoster();
 })