perf: 优化nprogress进度条，页面重进或接口请求时不再显示进度条，提升用户体验 (#1225)

package.json

@@ -56,23 +56,23 @@
     "@pureadmin/table": "^3.3.0",
     "@pureadmin/utils": "^2.6.2",
     "@vue-flow/background": "^1.3.2",
-    "@vue-flow/core": "^1.45.0",
+    "@vue-flow/core": "^1.46.4",
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/core": "^13.9.0",
     "@vueuse/motion": "^3.0.3",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "china-area-data": "^5.0.1",
-    "codemirror": "^5.65.19",
+    "codemirror": "^5.65.20",
     "codemirror-editor-vue3": "^2.8.0",
     "cropperjs": "^1.6.2",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.18",
     "deep-chat": "^2.2.2",
     "echarts": "^5.6.0",
-    "el-table-infinite-scroll": "^3.0.6",
+    "el-table-infinite-scroll": "^3.0.7",
-    "element-plus": "^2.10.4",
+    "element-plus": "^2.11.2",
     "highlight.js": "^11.11.1",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
@@ -84,8 +84,8 @@
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "pinia": "^3.0.3",
-    "pinyin-pro": "^3.26.0",
+    "pinyin-pro": "^3.27.0",
-    "plus-pro-components": "^0.1.26",
+    "plus-pro-components": "^0.1.29",
     "qrcode": "^1.5.4",
     "qs": "^6.14.0",
     "responsive-storage": "^2.2.0",
@@ -94,58 +94,58 @@
     "typeit": "^8.8.7",
     "v-contextmenu": "^3.2.0",
     "v3-infinite-loading": "^1.3.2",
-    "vditor": "^3.11.1",
+    "vditor": "^3.11.2",
     "version-rocket": "^1.7.4",
-    "vue": "^3.5.18",
+    "vue": "^3.5.21",
-    "vue-i18n": "^11.1.11",
+    "vue-i18n": "^11.1.12",
     "vue-json-pretty": "^2.5.0",
     "vue-pdf-embed": "^2.1.3",
     "vue-router": "^4.5.1",
     "vue-tippy": "^6.7.1",
     "vue-types": "^6.0.0",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue-waterfall-plugin-next": "^2.6.7",
+    "vue-waterfall-plugin-next": "^2.6.9",
     "vue3-danmaku": "^1.6.6",
     "vue3-puzzle-vcode": "^1.1.7",
     "vuedraggable": "^4.1.0",
     "vxe-table": "4.6.25",
     "wavesurfer.js": "^7.10.1",
-    "xgplayer": "^3.0.22",
+    "xgplayer": "^3.0.23",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@commitlint/types": "^19.8.1",
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^9.35.0",
     "@faker-js/faker": "^9.9.0",
-    "@iconify/json": "^2.2.364",
+    "@iconify/json": "^2.2.384",
     "@iconify/vue": "4.2.0",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@tailwindcss/vite": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.13",
     "@types/codemirror": "^5.60.16",
     "@types/dagre": "^0.7.53",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.19.9",
+    "@types/node": "^20.19.14",
     "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.3",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.14.0",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "boxen": "^8.0.1",
-    "code-inspector-plugin": "^1.0.3",
+    "code-inspector-plugin": "^1.2.8",
-    "cssnano": "^7.1.0",
+    "cssnano": "^7.1.1",
     "dagre": "^0.8.5",
-    "eslint": "^9.32.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.3.0",
+    "eslint-plugin-vue": "^10.4.0",
     "gradient-string": "^3.0.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.6",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "postcss-load-config": "^6.0.1",
@@ -153,18 +153,18 @@
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^6.0.3",
-    "sass": "^1.89.2",
+    "sass": "^1.92.1",
-    "stylelint": "^16.23.0",
+    "stylelint": "^16.24.0",
-    "stylelint-config-recess-order": "^7.1.0",
+    "stylelint-config-recess-order": "^7.3.0",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-prettier": "^5.0.3",
     "svgo": "^4.0.0",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.13",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.38.0",
+    "typescript-eslint": "^8.43.0",
-    "unplugin-icons": "^22.2.0",
+    "unplugin-icons": "^22.3.0",
-    "vite": "^7.0.6",
+    "vite": "^7.1.5",
     "vite-plugin-cdn-import": "^1.0.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-fake-server": "^2.2.0",
@@ -172,7 +172,7 @@
     "vite-plugin-router-warn": "^1.0.0",
     "vite-svg-loader": "^5.1.0",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.0.4"
+    "vue-tsc": "^3.0.7"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0",

src/layout/components/lay-tag/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { $t } from "@/plugins/i18n";
 import { emitter } from "@/utils/mitt";
+import NProgress from "@/utils/progress";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
@@ -206,12 +207,14 @@ function dynamicRouteTag(value: string): void {
 
 /** 刷新路由 */
 function onFresh() {
+  NProgress.start();
   const { fullPath, query } = unref(route);
   router.replace({
     path: "/redirect" + fullPath,
     query
   });
   handleAliveRoute(route as ToRouteType, "refresh");
+  NProgress.done();
 }
 
 function deleteDynamicTag(obj: any, current: any, tag?: string) {

src/router/index.ts

@@ -94,6 +94,14 @@ export const router: Router = createRouter({
   }
 });
 
+/** 记录已经加载的页面路径 */
+const loadedPaths = new Set<string>();
+
+/** 重置已加载页面记录 */
+export function resetLoadedPaths() {
+  loadedPaths.clear();
+}
+
 /** 重置路由 */
 export function resetRouter() {
   router.clearRoutes();
@@ -104,6 +112,7 @@ export function resetRouter() {
     formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
   );
   usePermissionStoreHook().clearAllCachePage();
+  resetLoadedPaths();
 }
 
 /** 路由白名单 */
@@ -112,6 +121,12 @@ const whiteList = ["/login"];
 const { VITE_HIDE_HOME } = import.meta.env;
 
 router.beforeEach((to: ToRouteType, _from, next) => {
+  to.meta.loaded = loadedPaths.has(to.path);
+
+  if (!to.meta.loaded) {
+    NProgress.start();
+  }
+
   if (to.meta?.keepAlive) {
     handleAliveRoute(to, "add");
     // 页面整体刷新和点击标签页刷新
@@ -120,7 +135,6 @@ router.beforeEach((to: ToRouteType, _from, next) => {
     }
   }
   const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);
-  NProgress.start();
   const externalLink = isUrl(to?.name as string);
   if (!externalLink) {
     to.matched.some(item => {
@@ -206,7 +220,8 @@ router.beforeEach((to: ToRouteType, _from, next) => {
   }
 });
 
-router.afterEach(() => {
+router.afterEach(to => {
+  loadedPaths.add(to.path);
   NProgress.done();
 });
 

src/utils/http/index.ts

@@ -10,7 +10,6 @@ import type {
   PureHttpRequestConfig
 } from "./types.d";
 import { stringify } from "qs";
-import NProgress from "../progress";
 import { getToken, formatToken } from "@/utils/auth";
 import { useUserStoreHook } from "@/store/modules/user";
 
@@ -61,8 +60,6 @@ class PureHttp {
   private httpInterceptorsRequest(): void {
     PureHttp.axiosInstance.interceptors.request.use(
       async (config: PureHttpRequestConfig): Promise<any> => {
-        // 开启进度条动画
-        NProgress.start();
         // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
         if (typeof config.beforeRequestCallback === "function") {
           config.beforeRequestCallback(config);
@@ -121,8 +118,6 @@ class PureHttp {
     instance.interceptors.response.use(
       (response: PureHttpResponse) => {
         const $config = response.config;
-        // 关闭进度条动画
-        NProgress.done();
         // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
         if (typeof $config.beforeResponseCallback === "function") {
           $config.beforeResponseCallback(response);
@@ -137,8 +132,6 @@ class PureHttp {
       (error: PureHttpError) => {
         const $error = error;
         $error.isCancelRequest = Axios.isCancel($error);
-        // 关闭进度条动画
-        NProgress.done();
         // 所有的响应异常 区分来源为取消请求/非取消请求
         return Promise.reject($error);
       }

types/router.d.ts

@@ -56,6 +56,8 @@ declare global {
      * 而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`）
      */
     activePath?: string;
+    /** 当前页面是否已经加载过 */
+    loaded?: boolean;
   }
 
   /**