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,7 +4,7 @@ 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')
 
@@ -12,7 +12,7 @@ export function install(app: App) {
       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.d.ts

@@ -1,30 +0,0 @@
-/* 接口类型数据 */
-
-/** 后端返回的用户相关类型 */
-declare namespace ApiAuth {
-  /* 登录返回的用户字段, 该数据是根据用户表扩展而来, 部分字段可能需要覆盖，例如id */
-  interface loginInfo extends Auth.User {
-    /** 用户id */
-    id: number
-    /** 用户角色类型 */
-    role: RoleType
-    /** 访问toekn */
-    accessToken: string
-    /** 刷新toekn */
-    refreshToken: string
-  }
-}
-declare namespace CommonList {
-  /* 返回的性别类型 */
-  type GenderType = '0' | '1' | null
-  interface UserList {
-    id: number
-    name: string
-    age: number
-    gender: GenderType
-    email: string
-    address: string
-    role: Auth.RoleType
-    disabled: boolean
-  }
-}

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.d.ts

@@ -1,55 +0,0 @@
-/* 存放数据库实体表类型 */
-
-/** 通用状态类型 false | true */
-type CommonStatus = 0 | 1
-
-/** 用户相关模块 */
-declare namespace Auth {
-  /** 用户角色类型 */
-  type RoleType = 'super' | 'admin' | 'user'
-
-  /** 用户信息 */
-  interface User {
-    /** 用户id */
-    id?: number
-    /** 用户名 */
-    userName?: string
-    /* 用户头像 */
-    avatar?: string
-    /* 用户性别 */
-    gender?: CommonStatus
-    /* 用户邮箱 */
-    email?: string
-    /* 用户昵称 */
-    nickname?: string
-    /* 用户电话 */
-    tel?: string
-    /** 用户角色类型 */
-    role?: RoleType[]
-    /** 用户状态 */
-    status?: CommonStatus
-    /** 备注 */
-    remark?: string
-  }
-
-  interface Role {
-    /** 用户id */
-    id?: number
-    /** 用户名 */
-    role?: RoleType
-  }
-}
-/* 系统消息 */
-declare namespace Message {
-  interface List {
-    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/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,

src/views/list/commonList/index.vue

@@ -21,7 +21,7 @@ const formRef = ref<FormInst | null>()
 function sendMail(id: number) {
   window.$message.success(`删除用户id:${id}`)
 }
-const columns: DataTableColumns = [
+const columns: DataTableColumns<Entity.DemoList> = [
   {
     title: '姓名',
     align: 'center',
@@ -37,15 +37,14 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'gender',
     render: (row) => {
-      const rowData = row as unknown as CommonList.UserList
       const tagType = {
         0: 'primary',
         1: 'success',
       } as const
-      if (rowData.gender) {
+      if (row.gender) {
         return (
-          <NTag type={tagType[rowData.gender]}>
+          <NTag type={tagType[row.gender]}>
-            {Gender[rowData.gender]}
+            {Gender[row.gender]}
           </NTag>
         )
       }
@@ -66,13 +65,12 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'role',
     render: (row) => {
-      const rowData = row as unknown as CommonList.UserList
+      const tagType: Record<Entity.RoleType, NaiveUI.ThemeColor> = {
-      const tagType: Record<Auth.RoleType, NaiveUI.ThemeColor> = {
         super: 'primary',
         admin: 'warning',
         user: 'success',
       }
-      return <NTag type={tagType[rowData.role]}>{rowData.role}</NTag>
+      return <NTag type={tagType[row.role]}>{row.role}</NTag>
     },
   },
   {
@@ -80,13 +78,11 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'disabled',
     render: (row) => {
-      const rowData = row as unknown as CommonList.UserList
-
       return (
         <NSwitch
-          value={rowData.disabled}
+          value={row.disabled}
           onUpdateValue={disabled =>
-            handleUpdateDisabled(disabled, rowData.id)}
+            handleUpdateDisabled(disabled, row.id)}
         >
           {{ checked: () => '启用', unchecked: () => '禁用' }}
         </NSwitch>
@@ -98,16 +94,15 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'actions',
     render: (row) => {
-      const rowData = row as unknown as CommonList.UserList
       return (
         <NSpace justify="center">
           <NButton
             size="small"
-            onClick={() => handleEditTable(rowData)}
+            onClick={() => handleEditTable(row)}
           >
             编辑
           </NButton>
-          <NPopconfirm onPositiveClick={() => sendMail(rowData.id)}>
+          <NPopconfirm onPositiveClick={() => sendMail(row.id)}>
             {{
               default: () => '确认删除',
               trigger: () => <NButton size="small">删除</NButton>,
@@ -119,7 +114,7 @@ const columns: DataTableColumns = [
   },
 ]
 
-const listData = ref<CommonList.UserList[]>([])
+const listData = ref<Entity.DemoList[]>([])
 function handleUpdateDisabled(disabled: boolean, id: number) {
   const index = listData.value.findIndex(item => item.id === id)
   if (index > -1)
@@ -149,13 +144,13 @@ function setModalType(type: ModalType) {
   modalType.value = type
 }
 
-const editData = ref<CommonList.UserList | null>(null)
+const editData = ref<Entity.DemoList | null>(null)
-function setEditData(data: CommonList.UserList | null) {
+function setEditData(data: Entity.DemoList | null) {
   editData.value = data
 }
 
-function handleEditTable(rowData: CommonList.UserList) {
+function handleEditTable(row: Entity.DemoList) {
-  setEditData(rowData)
+  setEditData(row)
   setModalType('edit')
   openModal()
 }

src/views/permission/permission/index.vue

@@ -6,9 +6,9 @@ const authStore = useAuthStore()
 const { hasPermission } = usePermission()
 const { role } = authStore.userInfo!
 
-const roleList: Auth.RoleType[] = ['super', 'admin', 'user']
+const roleList: Entity.RoleType[] = ['super', 'admin', 'user']
 
-function toggleUserRole(role: Auth.RoleType) {
+function toggleUserRole(role: Entity.RoleType) {
   authStore.login(role, '123456')
 }
 </script>

src/views/setting/account/components/TableModal.vue

@@ -20,7 +20,7 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
 const { loading: submitLoading, startLoading, endLoading } = useLoading(false)
 
 const formModel = ref()
-const defaultFormModal: Auth.User = {
+const defaultFormModal: Entity.User = {
   userName: '',
   gender: undefined,
   email: '',
@@ -107,7 +107,7 @@ const rules = {
   },
 }
 
-const options = ref<Auth.Role[]>([])
+const options = ref<Entity.Role[]>([])
 async function getRoleList() {
   const { data } = await fetchRoleList()
   options.value = data

src/views/setting/account/index.vue

@@ -25,7 +25,7 @@ function delteteUser(id: number) {
   window.$message.success(`删除用户id:${id}`)
 }
 
-const columns: DataTableColumns<Auth.User> = [
+const columns: DataTableColumns<Entity.User> = [
   {
     title: '姓名',
     align: 'center',
@@ -74,8 +74,8 @@ const columns: DataTableColumns<Auth.User> = [
           value={row.status}
           checked-value={1}
           unchecked-value={0}
-          onUpdateValue={disabled =>
+          onUpdateValue={value =>
-            handleUpdateDisabled(disabled, row.id!)}
+            handleUpdateDisabled(value, row.id!)}
         >
           {{ checked: () => '启用', unchecked: () => '禁用' }}
         </NSwitch>
@@ -87,16 +87,15 @@ const columns: DataTableColumns<Auth.User> = [
     align: 'center',
     key: 'actions',
     render: (row) => {
-      const rowData = row as unknown as Auth.User
       return (
         <NSpace justify="center">
           <NButton
             size="small"
-            onClick={() => modalRef.value.openModal('edit', rowData)}
+            onClick={() => modalRef.value.openModal('edit', row)}
           >
             编辑
           </NButton>
-          <NPopconfirm onPositiveClick={() => delteteUser(rowData.id!)}>
+          <NPopconfirm onPositiveClick={() => delteteUser(row.id!)}>
             {{
               default: () => '确认删除',
               trigger: () => <NButton size="small" type="error">删除</NButton>,
@@ -108,11 +107,11 @@ const columns: DataTableColumns<Auth.User> = [
   },
 ]
 
-const listData = ref<CommonList.UserList[]>([])
+const listData = ref<Entity.User[]>([])
-function handleUpdateDisabled(disabled: boolean, id: number) {
+function handleUpdateDisabled(value: 0 | 1, id: number) {
   const index = listData.value.findIndex(item => item.id === id)
   if (index > -1)
-    listData.value[index].disabled = disabled
+    listData.value[index].status = value
 }
 
 async function getUserList() {
@@ -161,7 +160,7 @@ const treeData = ref([
 
 <template>
   <n-flex>
-    <n-card class="w-70">
+    <n-card class="w-60">
       <n-tree
         block-line
         :data="treeData"

src/views/setting/menu/components/TableModal.vue

@@ -174,7 +174,7 @@ const rules = {
   },
 }
 
-const options = ref<Auth.Role[]>([])
+const options = ref<Entity.Role[]>([])
 async function getRoleList() {
   const { data } = await fetchRoleList()
   options.value = data

src/views/setting/menu/index.vue

@@ -87,22 +87,21 @@ const columns: DataTableColumns<AppRoute.RowRoute> = [
     key: 'actions',
     width: '15em',
     render: (row) => {
-      const rowData = row as unknown as CommonList.UserList
       return (
         <NSpace justify="center">
           <NButton
             size="small"
-            onClick={() => tableModalRef.value.openModal('view', rowData)}
+            onClick={() => tableModalRef.value.openModal('view', row)}
           >
             查看
           </NButton>
           <NButton
             size="small"
-            onClick={() => tableModalRef.value.openModal('edit', rowData)}
+            onClick={() => tableModalRef.value.openModal('edit', row)}
           >
             编辑
           </NButton>
-          <NPopconfirm onPositiveClick={() => deleteData(rowData.id)}>
+          <NPopconfirm onPositiveClick={() => deleteData(row.id)}>
             {{
               default: () => '确认删除',
               trigger: () => <NButton size="small" type="error">删除</NButton>,