feat: add common utility libraries

- Add @vueuse/core for Vue composition utilities
- Add dayjs for date handling
- Add lodash-es for utility functions
- Add nprogress for page loading progress bar
- Configure NProgress in router with beforeEach/afterEach hooks

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package.json

@@ -29,9 +29,13 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "@vueuse/core": "^14.1.0",
     "axios": "^1.4.0",
+    "dayjs": "^1.11.19",
     "element-plus": "2.7.5",
     "hls.js": "^1.4.10",
+    "lodash-es": "^4.17.22",
+    "nprogress": "^0.2.0",
     "pinia": "^2.0.36",
     "sass": "^1.62.1",
     "vue": "^3.5.13",
@@ -41,7 +45,9 @@
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
     "@playwright/test": "^1.57.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.16.8",
+    "@types/nprogress": "^0.2.3",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-vue": "5.0.5",

pnpm-lock.yaml

@@ -11,15 +11,27 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.1.0
         version: 2.3.2(vue@3.5.26(typescript@5.6.3))
+      '@vueuse/core':
+        specifier: ^14.1.0
+        version: 14.1.0(vue@3.5.26(typescript@5.6.3))
       axios:
         specifier: ^1.4.0
         version: 1.13.2
+      dayjs:
+        specifier: ^1.11.19
+        version: 1.11.19
       element-plus:
         specifier: 2.7.5
         version: 2.7.5(vue@3.5.26(typescript@5.6.3))
       hls.js:
         specifier: ^1.4.10
         version: 1.6.15
+      lodash-es:
+        specifier: ^4.17.22
+        version: 4.17.22
+      nprogress:
+        specifier: ^0.2.0
+        version: 0.2.0
       pinia:
         specifier: ^2.0.36
         version: 2.3.1(typescript@5.6.3)(vue@3.5.26(typescript@5.6.3))
@@ -42,9 +54,15 @@ importers:
       '@playwright/test':
         specifier: ^1.57.0
         version: 1.57.0
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
       '@types/node':
         specifier: ^18.16.8
         version: 18.19.130
+      '@types/nprogress':
+        specifier: ^0.2.3
+        version: 0.2.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.20.0
         version: 8.52.0(@typescript-eslint/parser@8.52.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
@@ -101,7 +119,7 @@ importers:
         version: 5.6.3
       unplugin-auto-import:
         specifier: ^0.19.0
-        version: 0.19.0(@vueuse/core@9.13.0(vue@3.5.26(typescript@5.6.3)))(rollup@4.55.1)
+        version: 0.19.0(@vueuse/core@14.1.0(vue@3.5.26(typescript@5.6.3)))(rollup@4.55.1)
       unplugin-vue-components:
         specifier: ^0.28.0
         version: 0.28.0(@babel/parser@7.28.5)(rollup@4.55.1)(vue@3.5.26(typescript@5.6.3))
@@ -984,12 +1002,18 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@types/whatwg-mimetype@3.0.2':
     resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
 
@@ -1193,12 +1217,25 @@ packages:
   '@vue/tsconfig@0.4.0':
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
 
+  '@vueuse/core@14.1.0':
+    resolution: {integrity: sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
+  '@vueuse/metadata@14.1.0':
+    resolution: {integrity: sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
+  '@vueuse/shared@14.1.0':
+    resolution: {integrity: sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -2572,6 +2609,9 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -4252,10 +4292,14 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/nprogress@0.2.3': {}
+
   '@types/parse-json@4.0.2': {}
 
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@types/whatwg-mimetype@3.0.2': {}
 
   '@types/ws@8.18.1':
@@ -4575,6 +4619,13 @@ snapshots:
 
   '@vue/tsconfig@0.4.0': {}
 
+  '@vueuse/core@14.1.0(vue@3.5.26(typescript@5.6.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.1.0
+      '@vueuse/shared': 14.1.0(vue@3.5.26(typescript@5.6.3))
+      vue: 3.5.26(typescript@5.6.3)
+
   '@vueuse/core@9.13.0(vue@3.5.26(typescript@5.6.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -4585,8 +4636,14 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@14.1.0': {}
+
   '@vueuse/metadata@9.13.0': {}
 
+  '@vueuse/shared@14.1.0(vue@3.5.26(typescript@5.6.3))':
+    dependencies:
+      vue: 3.5.26(typescript@5.6.3)
+
   '@vueuse/shared@9.13.0(vue@3.5.26(typescript@5.6.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.26(typescript@5.6.3))
@@ -6133,6 +6190,8 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  nprogress@0.2.0: {}
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -6835,7 +6894,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-auto-import@0.19.0(@vueuse/core@9.13.0(vue@3.5.26(typescript@5.6.3)))(rollup@4.55.1):
+  unplugin-auto-import@0.19.0(@vueuse/core@14.1.0(vue@3.5.26(typescript@5.6.3)))(rollup@4.55.1):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.3.0(rollup@4.55.1)
@@ -6845,7 +6904,7 @@ snapshots:
       unimport: 3.14.6(rollup@4.55.1)
       unplugin: 2.3.11
     optionalDependencies:
-      '@vueuse/core': 9.13.0(vue@3.5.26(typescript@5.6.3))
+      '@vueuse/core': 14.1.0(vue@3.5.26(typescript@5.6.3))
     transitivePeerDependencies:
       - rollup
 

src/router/index.ts

@@ -1,5 +1,10 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { getToken } from '@/utils/auth'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+// NProgress 配置
+NProgress.configure({ showSpinner: false })
 
 const Layout = () => import('@/layout/index.vue')
 
@@ -104,6 +109,9 @@ const router = createRouter({
 const whiteList = ['/login', '/stream-test']
 
 router.beforeEach((to, _from, next) => {
+  // 开始进度条
+  NProgress.start()
+
   // 统一使用系统名称作为标题
   document.title = '摄像头管理系统'
 
@@ -122,4 +130,9 @@ router.beforeEach((to, _from, next) => {
   }
 })
 
+router.afterEach(() => {
+  // 结束进度条
+  NProgress.done()
+})
+
 export default router