perf: perfect entity type

src/components/common/Pagination.vue

@@ -5,7 +5,11 @@ const props = defineProps({
     default: 0,
   },
 })
-const emit = defineEmits(['change'])
+
+const emit = defineEmits<{
+  change: [page: number, pageSize: number] // 具名元组语法
+}>()
+
 const page = ref(1)
 const pageSize = ref(10)
 const displayOrder: Array<'pages' | 'size-picker' | 'quick-jumper'> = ['size-picker', 'pages']

src/constants/User.ts

@@ -1,7 +1,3 @@
-// export const genderLabels: Record<NonNullable<CommonList.GenderType>, string> = {
-//   0: '女',
-//   1: '男',
-// }
 /** Gender */
 export enum Gender {
   male,

src/directives/permission.ts

@@ -4,15 +4,15 @@ import { usePermission } from '@/hooks'
 export function install(app: App) {
   const { hasPermission } = usePermission()
 
-  function updatapermission(el: HTMLElement, permission: Auth.RoleType | Auth.RoleType[]) {
+  function updatapermission(el: HTMLElement, permission: Entity.RoleType | Entity.RoleType[]) {
     if (!permission)
       throw new Error('v-permissson Directive with no explicit role attached')
 
     if (!hasPermission(permission))
       el.parentElement?.removeChild(el)
   }
 
-  const permissionDirective: Directive<HTMLElement, Auth.RoleType | Auth.RoleType[]> = {
+  const permissionDirective: Directive<HTMLElement, Entity.RoleType | Entity.RoleType[]> = {
     mounted(el, binding) {
       updatapermission(el, binding.value)
     },

src/hooks/usePermission.ts

@@ -6,7 +6,7 @@ export function usePermission() {
   const authStore = useAuthStore()
 
   function hasPermission(
-    permission: Auth.RoleType | Auth.RoleType[] | undefined,
+    permission: Entity.RoleType | Entity.RoleType[] | undefined,
   ) {
     if (!permission)
       return true

src/layouts/components/common/NoticeList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  list?: Message.List[]
+  list?: Entity.Message[]
 }
 const props = defineProps<Props>()
 

src/layouts/components/header/Notices.vue

@@ -2,7 +2,7 @@
 import { group } from 'radash'
 import NoticeList from '../common/NoticeList.vue'
 
-const MassageData = ref<Message.List[]>([
+const MassageData = ref<Entity.Message[]>([
   {
     id: 0,
     type: 0,

src/service/api/login.ts

@@ -6,14 +6,14 @@ interface Ilogin {
 }
 
 export function fetchLogin(params: Ilogin) {
-  const methodInstance = request.Post<Service.ResponseResult<ApiAuth.loginInfo>>('/login', params)
+  const methodInstance = request.Post<Service.ResponseResult<Api.Login.Info>>('/login', params)
   methodInstance.meta = {
     authRole: null,
   }
   return methodInstance
 }
 export function fetchUpdateToken(data: any) {
-  const method = request.Post<Service.ResponseResult<ApiAuth.loginInfo>>('/updateToken', data)
+  const method = request.Post<Service.ResponseResult<Api.Login.Info>>('/updateToken', data)
   method.meta = {
     authRole: 'refreshToken',
   }

src/service/api/system.ts

@@ -7,9 +7,9 @@ export function fetchAllRoutes() {
 
 // 获取所有用户信息
 export function fetchUserPage() {
-  return request.Get<Service.ResponseResult<Auth.User[]> >('/userPage')
+  return request.Get<Service.ResponseResult<Entity.User[]> >('/userPage')
 }
 // 获取所有角色列表
 export function fetchRoleList() {
-  return request.Get<Service.ResponseResult<Auth.Role[]> >('/role/list')
+  return request.Get<Service.ResponseResult<Entity.Role[]> >('/role/list')
 }

src/store/auth.ts

@@ -5,7 +5,7 @@ import { router } from '@/router'
 import { local } from '@/utils'
 
 interface AuthStatus {
-  userInfo: ApiAuth.loginInfo | null
+  userInfo: Api.Login.Info | null
   token: string
 }
 export const useAuthStore = defineStore('auth-store', {
@@ -62,7 +62,7 @@ export const useAuthStore = defineStore('auth-store', {
     },
 
     /* 登录后的处理函数 */
-    async handleAfterLogin(data: ApiAuth.loginInfo) {
+    async handleAfterLogin(data: Api.Login.Info) {
       // 将token和userInfo保存下来
       local.set('userInfo', data)
       local.set('accessToken', data.accessToken)

src/typings/api/login.d.ts

@@ -0,0 +1,17 @@
+/// <reference path="../global.d.ts"/>
+
+namespace Api {
+  namespace Login {
+    /* 登录返回的用户字段, 该数据是根据用户表扩展而来, 部分字段可能需要覆盖，例如id */
+    interface Info extends Entity.User {
+      /** 用户id */
+      id: number
+      /** 用户角色类型 */
+      role: RoleType
+      /** 访问toekn */
+      accessToken: string
+      /** 刷新toekn */
+      refreshToken: string
+    }
+  }
+}

src/typings/entities/demoList.d.ts

@@ -0,0 +1,15 @@
+/// <reference path="../global.d.ts"/>
+
+/* 角色数据库表字段 */
+namespace Entity {
+  interface DemoList {
+    id: number
+    name: string
+    age: number
+    gender: '0' | '1' | null
+    email: string
+    address: string
+    role: Entity.RoleType
+    disabled: boolean
+  }
+}

src/typings/entities/message.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="../global.d.ts"/>
+
+/* 角色数据库表字段 */
+namespace Entity {
+  interface Message {
+    id: number
+    type: 0 | 1 | 2
+    title: string
+    icon: string
+    tagTitle?: string
+    tagType?: 'error' | 'info' | 'success' | 'warning'
+    description?: string
+    isRead?: boolean
+    date: string
+  }
+}

src/typings/entities/role.d.ts

@@ -0,0 +1,13 @@
+/// <reference path="../global.d.ts"/>
+
+/* 角色数据库表字段 */
+namespace Entity {
+  type RoleType = 'super' | 'admin' | 'user'
+
+  interface Role {
+    /** 用户id */
+    id?: number
+    /** 用户名 */
+    role?: RoleType
+  }
+}

src/typings/entities/user.d.ts

@@ -0,0 +1,28 @@
+/// <reference path="../global.d.ts"/>
+
+/** 用户数据库表字段 */
+namespace Entity {
+  interface User {
+    /** 用户id */
+    id?: number
+    /** 用户名 */
+    userName?: string
+    /* 用户头像 */
+    avatar?: string
+    /* 用户性别 */
+    gender?: 0 | 1
+    /* 用户邮箱 */
+    email?: string
+    /* 用户昵称 */
+    nickname?: string
+    /* 用户电话 */
+    tel?: string
+    /** 用户角色类型 */
+    role?: Entity.RoleType[]
+    /** 用户状态 */
+    status?: 0 | 1
+    /** 备注 */
+    remark?: string
+  }
+
+}

src/typings/global.d.ts

@@ -1,3 +1,12 @@
+/* 存放数据库实体表类型， 具体内容在 ./entities */
+declare namespace Entity {
+}
+
+/* 各类接口返回的数据类型， 具体内容在 ./api */
+declare namespace Api {
+
+}
+
 interface Window {
   $loadingBar: import('naive-ui').LoadingBarApi
   $dialog: import('naive-ui').DialogApi
@@ -26,7 +35,7 @@ declare namespace Storage {
 
   interface Local {
     /* 存储用户信息 */
-    userInfo: ApiAuth.loginInfo
+    userInfo: Api.Login.Info
     /* 存储访问token */
     accessToken: string
     /* 存储刷新token */

src/typings/route.d.ts

@@ -10,7 +10,7 @@ declare namespace AppRoute {
     /* 是否需要登录权限。 */
     requiresAuth?: boolean
     /* 可以访问的角色 */
-    roles?: Auth.RoleType[]
+    roles?: Entity.RoleType[]
     /* 是否开启页面缓存 */
     keepAlive?: boolean
     /* 有些路由我们并不想在菜单中显示，比如某些编辑页面。 */

src/views/list/commonList/components/TableModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type FormModel = Pick<CommonList.UserList, 'name' | 'age' | 'gender' | 'address' | 'email' | 'role' | 'disabled'>
+type FormModel = Pick<Entity.DemoList, 'name' | 'age' | 'gender' | 'address' | 'email' | 'role' | 'disabled'>
 const props = withDefaults(defineProps<Props>(), {
   type: 'add',
   modalData: null,