fix(types: fix store.users (#229)

* feat: update vxe-table-demonic version

* types: fix pinia global shim

* types: fix store.user  lock-page and somewhere else

apps/admin/src/pages/sys/lock/lock-page.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import {ref, computed, unref} from 'vue'
+import { ref, computed, unref } from 'vue'
 import { useUserStore } from '@/store/user'
 import { useLockStore } from '@/store/lock'
 import { useI18n } from '@vben/locale'
 import { useNow } from './use-now'
 import { createNamespace } from '@vben/utils'
 import headerImg from '@/assets/images/header.jpg'
-import {router} from "@/router";
+import { router } from '@/router'
+import { UserInfo } from '@vben/types'
 
 const password = ref('')
 const loading = ref(false)
@@ -22,12 +23,13 @@ const { hour, month, minute, meridiem, year, day, week } = useNow(true)
 
 const { t } = useI18n()
 
-const userInfo = computed(() => userStore.getUserInfo || {})
+const userInfo = computed<UserInfo | null>(() => userStore.getUserInfo)
 
 /**
  * @description: unLock
  */
-async function unLock() {
+async function unLock () {
+  console.log('getUserInfoAction', userStore.getUserInfoAction())
   if (!password.value) {
     return
   }
@@ -36,116 +38,118 @@ async function unLock() {
     const res = await lockStore.unLock(password.value)
     errMsg.value = !res
     if (res) {
-      const redirect = unref(router.currentRoute).query?.redirect as string || '/';
+      const redirect = unref(router.currentRoute).query?.redirect as string || '/'
       await router.replace({ path: redirect })
     }
   } finally {
     loading.value = false
   }
 }
 
-function goLogin() {
+function goLogin () {
   userStore.logout(true)
   lockStore.resetLockInfo()
 }
 
-function handleShowForm(show = false) {
+function handleShowForm (show = false) {
   showDate.value = show
 }
 </script>
 
 <template>
   <div
-    :class="bem()"
-    class="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black"
+      :class="bem()"
+      class="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black"
   >
     <div
-      :class="bem('unlock')"
-      class="absolute top-0 flex flex-col items-center justify-center h-16 pt-5 text-white transform translate-x-1/2 cursor-pointer left-1/2 sm:text-md xl:text-xl"
-      @click="handleShowForm(false)"
-      v-show="showDate"
+        :class="bem('unlock')"
+        class="absolute top-0 flex flex-col items-center justify-center h-16 pt-5 text-white transform translate-x-1/2 cursor-pointer left-1/2 sm:text-md xl:text-xl"
+        @click="handleShowForm(false)"
+        v-show="showDate"
     >
-      <VbenIconify icon="ant-design:lock-outlined" />
+      <VbenIconify icon="ant-design:lock-outlined"/>
       <span>{{ t('sys.lock.unlock') }}</span>
     </div>
-
+    
     <div class="flex items-center justify-center w-screen h-screen">
       <div
-        :class="bem('hour')"
-        class="relative w-2/5 mr-5 md:mr-20 h-2/5 md:h-4/5"
+          :class="bem('hour')"
+          class="relative w-2/5 mr-5 md:mr-20 h-2/5 md:h-4/5"
       >
         <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px">{{ hour }}</span>
         <span
-          class="absolute left-5 top-5 text-md"
-          v-show="showDate"
+            class="absolute left-5 top-5 text-md"
+            v-show="showDate"
         >
           {{ meridiem }}
         </span>
       </div>
       <div :class="`${bem('minute')} w-2/5 h-2/5 md:h-4/5 `">
-        <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px"> {{ minute }}</span>
+        <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px"> {{
+            minute
+          }}</span>
       </div>
     </div>
     <transition name="fade-slide">
       <div :class="bem('entry')" v-show="!showDate">
         <div :class="bem('entry-content')">
           <div :class="`${bem('entry-header')} enter-x`">
             <img
-              :src="userInfo.avatar || headerImg"
-              :class="`${bem('entry-header-img')}`"
+                :src="userInfo?.avatar || headerImg"
+                :class="`${bem('entry-header-img')}`"
             />
             <p :class="`${bem('entry-header-name')}`">
-              {{ userInfo.realName }}
+              {{ userInfo?.realName??'' }}
             </p>
           </div>
           <VbenInput
-            type="password"
-            show-password-on="mousedown"
-            :placeholder="t('sys.lock.placeholder')"
-            class="enter-x"
-            v-model:value="password"
+              type="password"
+              show-password-on="mousedown"
+              :placeholder="t('sys.lock.placeholder')"
+              class="enter-x"
+              v-model:value="password"
           />
           <span :class="`${bem('err-msg')} enter-x`" v-if="errMsg">
             {{ t('sys.lock.alert') }}
           </span>
           <div :class="`${bem('footer')} enter-x`">
             <VbenButton
-              quaternary
-              type="info"
-              size="small"
-              class="mt-2 mr-2 enter-x text-gray-300"
-              :disabled="loading"
-              @click="handleShowForm(true)"
+                quaternary
+                type="info"
+                size="small"
+                class="mt-2 mr-2 enter-x text-gray-300"
+                :disabled="loading"
+                @click="handleShowForm(true)"
             >
               {{ t('common.back') }}
             </VbenButton>
             <VbenButton
-              quaternary
-              type="info"
-              size="small"
-              class="mt-2 mr-2 enter-x text-gray-300"
-              :disabled="loading"
-              @click="goLogin"
+                quaternary
+                type="info"
+                size="small"
+                class="mt-2 mr-2 enter-x text-gray-300"
+                :disabled="loading"
+                @click="goLogin"
             >
               {{ t('sys.lock.backToLogin') }}
             </VbenButton>
             <VbenButton
-              class="mt-2 text-gray-300"
-              quaternary
-              type="info"
-              size="small"
-              @click="unLock()"
-              :loading="loading"
+                class="mt-2 text-gray-300"
+                quaternary
+                type="info"
+                size="small"
+                @click="unLock()"
+                :loading="loading"
             >
               {{ t('sys.lock.entry') }}
             </VbenButton>
           </div>
         </div>
       </div>
     </transition>
-
+    
     <div
-      class="absolute w-full text-center text-gray-300 bottom-5 xl:text-xl 2xl:text-3xl enter-y"
+        class="absolute w-full text-center text-gray-300 bottom-5 xl:text-xl 2xl:text-3xl enter-y"
     >
       <div class="mb-4 text-5xl enter-x" v-show="!showDate">
         {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
@@ -158,11 +162,11 @@ function handleShowForm(show = false) {
 <style lang="less" scoped>
 .lock-page {
   z-index: 9999;
-
+  
   &__unlock {
     transform: translate(-50%, 0);
   }
-
+  
   &__hour,
   &__minute {
     display: flex;
@@ -173,7 +177,7 @@ function handleShowForm(show = false) {
     justify-content: center;
     align-items: center;
   }
-
+  
   &__entry {
     position: absolute;
     top: 0;
@@ -185,34 +189,34 @@ function handleShowForm(show = false) {
     backdrop-filter: blur(8px);
     justify-content: center;
     align-items: center;
-
+    
     &-content {
       width: 260px;
     }
-
+    
     &-header {
       text-align: center;
-
+      
       &-img {
         width: 70px;
         margin: 0 auto;
         border-radius: 50%;
       }
-
+      
       &-name {
         margin-top: 5px;
         font-weight: 500;
         color: #bababa;
       }
     }
   }
-
+  
   &__err-msg {
     display: inline-block;
     margin-top: 10px;
     color: var(--error-color);
   }
-
+  
   &__footer {
     display: flex;
     justify-content: space-between;

apps/admin/src/store/user.ts

@@ -6,18 +6,10 @@ import { doLogoutApi, getUserInfoApi, doLoginApi } from '@/apis/auth'
 import { PAGE_NOT_FOUND_ROUTE } from '@vben/router'
 import { useAuthStoreWithout } from './auth'
 import { GetUserInfoModel } from '@/apis/sys/user'
-import { UserInfo, RoleInfo } from '@vben/types'
+import { UserInfo, RoleInfo, UserState } from '@vben/types'
 import { ErrorMessageMode } from '@vben/types'
 import { isArray } from '@vben/utils'
 
-interface UserState {
-  userInfo: Nullable<UserInfo>
-  accessToken?: string
-  roles: RoleInfo[]
-  sessionTimeout?: boolean
-  lastUpdateTime: number
-}
-
 export const useUserStore = defineStore('app-user-store', {
   persist: {
     paths: ['userInfo', 'accessToken', 'roles'],

packages/stores/src/modules/multipleTab.ts

@@ -7,7 +7,7 @@ import type {
   Router,
 } from 'vue-router'
 import { getRawRoute, RemovableRef } from '@vben/utils'
-import { useAppConfig } from './appConfig'
+// import { useAppConfig } from './appConfig'
 import { useRouter } from 'vue-router'
 function handleGotoPage(router: Router) {
   const go = useGo(router)
@@ -165,7 +165,7 @@ export const useMultipleTab = defineStore({
       } else {
         // Add tab
         // 获取动态路由打开数，超过 0 即代表需要控制打开数
-        const dynamicLevel = meta?.dynamicLevel ?? -1
+        const dynamicLevel =(meta?.dynamicLevel ?? -1)as unknown as number
         if (dynamicLevel > 0) {
           // 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
           // 首先获取到真实的路由，使用配置方式减少计算开销.

packages/types/shims/pinia.d.ts

@@ -3,6 +3,42 @@
 import type { PiniaPluginContext } from 'pinia'
 
 declare module 'pinia' {
+  export interface PersistedStateOptions {
+    /**
+     * Storage key to use.
+     * @default $store.id
+     */
+    key?: string | ((id: string) => string);
+    /**
+     * Where to store persisted state.
+     * @default localStorage
+     */
+    storage?: StorageLike;
+    /**
+     * Dot-notation paths to partially save state. Saves everything if undefined.
+     * @default undefined
+     */
+    paths?: Array<string>;
+    /**
+     * Customer serializer to serialize/deserialize state.
+     */
+    serializer?: Serializer;
+    /**
+     * Hook called before state is hydrated from storage.
+     * @default null
+     */
+    beforeRestore?: (context: PiniaPluginContext) => void;
+    /**
+     * Hook called after state is hydrated from storage.
+     * @default undefined
+     */
+    afterRestore?: (context: PiniaPluginContext) => void;
+    /**
+     * Logs errors in console when enabled.
+     * @default false
+     */
+    debug?: boolean;
+  }
   export interface DefineStoreOptions<
     // eslint-disable-next-line
     Id,
@@ -16,16 +52,6 @@ declare module 'pinia' {
     /**
      * Persist store in storage.
      */
-    persist?: PersistOptions
+    persist?: boolean | PersistedStateOptions | PersistedStateOptions[];
   }
 }
-
-export interface PersistStrategy {
-  key?: string
-  storage?: Storage
-  paths?: string[]
-}
-
-export interface PersistOptions {
-  strategies?: PersistStrategy[]
-}

packages/types/src/store.ts

@@ -19,3 +19,11 @@ export interface UserInfo {
   homePath?: string
   roles: RoleInfo[]
 }
+
+export interface UserState {
+  userInfo: Nullable<UserInfo>
+  accessToken?: string
+  roles: RoleInfo[]
+  sessionTimeout?: boolean
+  lastUpdateTime: number
+}

packages/vbenComponents/package.json

@@ -9,17 +9,17 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@iconify/iconify": "^3.1.1",
+    "@iconify/iconify": "^3.0.0",
     "@vben/hooks": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/constants": "workspace:*",
-    "sass": "^1.69.4",
-    "vue": "^3.3.6",
-    "vxe-table-demonic": "^4.5.4",
-    "xe-utils": "^3.5.13"
+    "sass": "^1.55.0",
+    "vue": "^3.2.47",
+    "vxe-table-demonic": "^4.5.0-beta.3",
+    "xe-utils": "^3.5.7"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.132",
+    "@iconify/json": "^2.2.15",
     "@purge-icons/generated": "^0.9.0"
   }
 }