chore: update dependencies and refactor imports to use @unhead/vue

.eslintrc-auto-import.json

@@ -3,13 +3,19 @@
     "Component": true,
     "ComponentPublicInstance": true,
     "ComputedRef": true,
+    "DirectiveBinding": true,
     "EffectScope": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
     "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
     "PropType": true,
     "Ref": true,
+    "ShallowRef": true,
+    "Slot": true,
+    "Slots": true,
     "VNode": true,
     "WritableComputedRef": true,
     "asyncComputed": true,
@@ -28,7 +34,10 @@
     "createInjectionState": true,
     "createProjection": true,
     "createReactiveFn": true,
+    "createRef": true,
+    "createReusableTemplate": true,
     "createSharedComposable": true,
+    "createTemplatePromise": true,
     "createUnrefFn": true,
     "customRef": true,
     "debouncedRef": true,
@@ -40,14 +49,17 @@
     "extendRef": true,
     "getCurrentInstance": true,
     "getCurrentScope": true,
+    "getCurrentWatcher": true,
     "h": true,
     "ignorableWatch": true,
     "inject": true,
+    "injectLocal": true,
     "isDefined": true,
     "isProxy": true,
     "isReactive": true,
     "isReadonly": true,
     "isRef": true,
+    "isShallow": true,
     "logicAnd": true,
     "logicNot": true,
     "logicOr": true,
@@ -62,6 +74,7 @@
     "onBeforeUpdate": true,
     "onClickOutside": true,
     "onDeactivated": true,
+    "onElementRemoval": true,
     "onErrorCaptured": true,
     "onKeyStroke": true,
     "onLongPress": true,
@@ -73,8 +86,10 @@
     "onStartTyping": true,
     "onUnmounted": true,
     "onUpdated": true,
+    "onWatcherCleanup": true,
     "pausableWatch": true,
     "provide": true,
+    "provideLocal": true,
     "reactify": true,
     "reactifyObject": true,
     "reactive": true,
@@ -115,11 +130,14 @@
     "until": true,
     "useAbs": true,
     "useActiveElement": true,
+    "useAnimate": true,
+    "useArrayDifference": true,
     "useArrayEvery": true,
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
     "useArrayFindLast": true,
+    "useArrayIncludes": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,
@@ -139,9 +157,11 @@
     "useCeil": true,
     "useClamp": true,
     "useClipboard": true,
+    "useClipboardItems": true,
     "useCloned": true,
     "useColorMode": true,
     "useConfirmDialog": true,
+    "useCountdown": true,
     "useCounter": true,
     "useCssModule": true,
     "useCssVar": true,
@@ -181,6 +201,7 @@
     "useFullscreen": true,
     "useGamepad": true,
     "useGeolocation": true,
+    "useId": true,
     "useIdle": true,
     "useImage": true,
     "useInfiniteScroll": true,
@@ -200,6 +221,7 @@
     "useMemoize": true,
     "useMemory": true,
     "useMin": true,
+    "useModel": true,
     "useMounted": true,
     "useMouse": true,
     "useMouseInElement": true,
@@ -213,6 +235,8 @@
     "useOnline": true,
     "usePageLeave": true,
     "useParallax": true,
+    "useParentElement": true,
+    "usePerformanceObserver": true,
     "usePermission": true,
     "usePointer": true,
     "usePointerLock": true,
@@ -223,6 +247,7 @@
     "usePreferredDark": true,
     "usePreferredLanguages": true,
     "usePreferredReducedMotion": true,
+    "usePreferredReducedTransparency": true,
     "usePrevious": true,
     "useProjection": true,
     "useRafFn": true,
@@ -231,6 +256,7 @@
     "useRound": true,
     "useRoute": true,
     "useRouter": true,
+    "useSSRWidth": true,
     "useScreenOrientation": true,
     "useScreenSafeArea": true,
     "useScriptTag": true,
@@ -249,6 +275,7 @@
     "useSum": true,
     "useSupported": true,
     "useSwipe": true,
+    "useTemplateRef": true,
     "useTemplateRefsList": true,
     "useTextDirection": true,
     "useTextSelection": true,
@@ -262,7 +289,6 @@
     "useTimeoutPoll": true,
     "useTimestamp": true,
     "useTitle": true,
-    "useToFixed": true,
     "useToNumber": true,
     "useToString": true,
     "useToggle": true,
@@ -286,8 +312,10 @@
     "watchArray": true,
     "watchAtMost": true,
     "watchDebounced": true,
+    "watchDeep": true,
     "watchEffect": true,
     "watchIgnorable": true,
+    "watchImmediate": true,
     "watchOnce": true,
     "watchPausable": true,
     "watchPostEffect": true,
@@ -295,13 +323,6 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true,
-    "DirectiveBinding": true,
-    "MaybeRef": true,
-    "MaybeRefOrGetter": true,
-    "onWatcherCleanup": true,
-    "useId": true,
-    "useModel": true,
-    "useTemplateRef": true
+    "whenever": true
   }
 }

auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -22,7 +23,10 @@ declare global {
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createProjection: typeof import('@vueuse/math')['createProjection']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -34,14 +38,17 @@ declare global {
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const isShallow: typeof import('vue')['isShallow']
   const logicAnd: typeof import('@vueuse/math')['logicAnd']
   const logicNot: typeof import('@vueuse/math')['logicNot']
   const logicOr: typeof import('@vueuse/math')['logicOr']
@@ -56,6 +63,7 @@ declare global {
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
   const onDeactivated: typeof import('vue')['onDeactivated']
+  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
@@ -70,6 +78,7 @@ declare global {
   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -110,11 +119,14 @@ declare global {
   const until: typeof import('@vueuse/core')['until']
   const useAbs: typeof import('@vueuse/math')['useAbs']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -134,9 +146,11 @@ declare global {
   const useCeil: typeof import('@vueuse/math')['useCeil']
   const useClamp: typeof import('@vueuse/math')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -210,6 +224,8 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@@ -220,6 +236,7 @@ declare global {
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useProjection: typeof import('@vueuse/math')['useProjection']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
@@ -228,6 +245,7 @@ declare global {
   const useRound: typeof import('@vueuse/math')['useRound']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -284,8 +302,10 @@ declare global {
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -298,6 +318,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

package.json

@@ -16,13 +16,12 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@fortaine/fetch-event-source": "^3.0.6",
-    "@microsoft/fetch-event-source": "^2.0.1",
     "@tinymce/tinymce-vue": "^5.0.0",
+    "@unhead/vue": "^2.0.14",
     "@vant/area-data": "^1.5.1",
-    "@vueuse/core": "^9.13.0",
-    "@vueuse/head": "^1.0.26",
-    "@vueuse/integrations": "^9.13.0",
-    "@vueuse/math": "^9.13.0",
+    "@vueuse/core": "^13.6.0",
+    "@vueuse/integrations": "^13.6.0",
+    "@vueuse/math": "^13.6.0",
     "ali-oss": "^6.17.1",
     "axios": "^1.10.0",
     "blueimp-md5": "^2.19.0",
@@ -34,13 +33,13 @@
     "html-to-image": "^1.11.11",
     "html2pdf.js": "^0.10.1",
     "lodash-es": "^4.17.21",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.3",
     "print-js": "^1.6.0",
     "ua-parser-js": "^1.0.33",
-    "universal-cookie": "^4.0.4",
+    "universal-cookie": "^8.0.1",
     "video.js": "^7.21.1",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -52,8 +51,8 @@
     "@types/node": "^20.3.1",
     "@types/ua-parser-js": "^0.7.36",
     "@types/video.js": "^7.3.52",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vue-macros/reactivity-transform": "^1.1.3",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue-macros/reactivity-transform": "^1.1.6",
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/tsconfig": "^0.6.0",
     "chalk": "^5.2.0",
@@ -61,10 +60,10 @@
     "eslint-plugin-vue": "^9.30.0",
     "sass": "^1.58.3",
     "typescript": "~5.6.3",
-    "unplugin-auto-import": "^0.17.8",
-    "vite": "^5.4.10",
-    "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-mkcert": "^1.17.6",
+    "unplugin-auto-import": "^20.0.0",
+    "vite": "^6.3.5",
+    "vite-plugin-checker": "^0.10.2",
+    "vite-plugin-mkcert": "^1.17.8",
     "vue-tsc": "^2.1.10"
   }
 }

src/App.vue

 <script setup>
-import { useHead } from '@vueuse/head'
+import { useHead } from '@unhead/vue'
 
 import { useAppConfig } from '@/composables/useAppConfig'
 const appConfig = useAppConfig()
@@ -10,9 +10,9 @@ useHead({
     {
       rel: 'icon',
       key: 'favicon',
-      href: appConfig.favicon || 'https://webapp-pub.ezijing.com/website/base/favicon.ico'
-    }
-  ]
+      href: appConfig.favicon || 'https://webapp-pub.ezijing.com/website/base/favicon.ico',
+    },
+  ],
 })
 
 const className = computed(() => {

src/main.ts

 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { createHead } from '@vueuse/head'
+import { createHead } from '@unhead/vue/client'
 
 import App from './App.vue'
 import router from './router'

src/stores/map.ts

@@ -21,22 +21,21 @@ interface IValuesList {
   value: string
 }
 
-export const useMapStore = defineStore({
-  id: 'map',
+export const useMapStore = defineStore('map', {
   state: (): State => {
     return {
-      mapList: []
+      mapList: [],
     }
   },
   getters: {
-    getMapValuesByKey: state => {
-      return (key: string) => state.mapList.find(map => map.key === key)?.values || []
-    }
+    getMapValuesByKey: (state) => {
+      return (key: string) => state.mapList.find((map) => map.key === key)?.values || []
+    },
   },
   actions: {
     async getMapList() {
       const res = await getMapList()
       this.mapList = res.data || []
-    }
-  }
+    },
+  },
 })

src/stores/menu.ts

@@ -59,8 +59,7 @@ const adminMenus: IMenuItem[] = [
 ]
 const appConfig = useAppConfig()
 
-export const useMenuStore = defineStore({
-  id: 'menu',
+export const useMenuStore = defineStore('menu', {
   state: (): State => ({ studentMenus, adminMenus }),
   getters: {
     menus: (state): IMenuItem[] => {

src/stores/user.ts

@@ -17,18 +17,17 @@ interface State {
   permissions: PermissionType[]
 }
 
-export const useUserStore = defineStore({
-  id: 'user',
+export const useUserStore = defineStore('user', {
   state: (): State => ({
     user: null,
     role: null,
     organization: null,
     project: null,
     roles: [],
-    permissions: []
+    permissions: [],
   }),
   getters: {
-    isLogin: state => !!state.user
+    isLogin: (state) => !!state.user,
   },
   actions: {
     async getUser() {
@@ -46,6 +45,6 @@ export const useUserStore = defineStore({
     async logout() {
       await logout()
       this.user = null
-    }
-  }
+    },
+  },
 })