refactor(projects): refactor page: user-management [重构用户管理页面]

mock/api/management.ts

@@ -3,21 +3,20 @@ import type { MockMethod } from 'vite-plugin-mock';
 
 const apis: MockMethod[] = [
   {
-    url: '/mock/getUserManagementList',
+    url: '/mock/getAllUserList',
     method: 'post',
-    response: (): Service.MockServiceResult<ApiUserManagement.UserTable[]> => {
+    response: (): Service.MockServiceResult<ApiUserManagement.User[]> => {
       const data = mock({
         'list|1000': [
           {
             id: '@id',
-            name: '@cname',
-            'age|20-36': 36,
+            userName: '@cname',
+            'age|18-56': 56,
             'gender|1': ['0', '1', null],
             phone:
               /^[1](([3][0-9])|([4][01456789])|([5][012356789])|([6][2567])|([7][0-8])|([8][0-9])|([9][012356789]))[0-9]{8}$/,
-            email: '@email("qq.com")',
-            'role|1': ['super', 'admin', 'user'],
-            'disabled|1': true
+            'email|1': ['@email("qq.com")', null],
+            'userStatus|1': ['1', '2', '3', '4', null]
           }
         ]
       });

package.json

@@ -75,6 +75,7 @@
     "vditor": "^3.8.17",
     "vue": "3.2.40",
     "vue-router": "^4.1.5",
+    "vuedraggable": "^4.1.0",
     "wangeditor": "^4.7.15",
     "xgplayer": "^2.32.0"
   },

src/constants/business.ts

@@ -0,0 +1,25 @@
+/** 用户性别 */
+export const genderLabels: Record<UserManagement.GenderKey, string> = {
+  0: '女',
+  1: '男'
+};
+
+export const genderOptions: { value: UserManagement.GenderKey; label: string }[] = [
+  { value: '0', label: genderLabels['0'] },
+  { value: '1', label: genderLabels['1'] }
+];
+
+/** 用户状态 */
+export const userStatusLabels: Record<UserManagement.UserStatusKey, string> = {
+  1: '启用',
+  2: '禁用',
+  3: '冻结',
+  4: '软删除'
+};
+
+export const userStatusOptions: { value: UserManagement.UserStatusKey; label: string }[] = [
+  { value: '1', label: userStatusLabels['1'] },
+  { value: '2', label: userStatusLabels['2'] },
+  { value: '3', label: userStatusLabels['3'] },
+  { value: '4', label: userStatusLabels['4'] }
+];

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './business';

src/enum/business.ts

@@ -13,9 +13,3 @@ export enum EnumLoginModule {
   'reset-pwd' = '重置密码',
   'bind-wechat' = '微信绑定'
 }
-
-export enum EnumGender {
-  male = '男',
-  female = '女',
-  null = ''
-}

src/hooks/business/useTable.ts

@@ -0,0 +1 @@
+export function useTable() {}

src/service/api/index.ts

@@ -1,3 +1,2 @@
 export * from './auth';
-export * from './demo';
 export * from './management';

src/service/api/management.adapter.ts

@@ -1,42 +1,13 @@
-import { EnumGender } from '@/enum';
-import { isUndefined } from '@/utils';
+export function adapterOfFetchUserList(data: ApiUserManagement.User[] | null): UserManagement.User[] {
+  if (!data) return [];
 
-export function adapterOfFetchUserManagementList(
-  requestData: ApiUserManagement.UserTable[]
-): UserManagement.UserTable[] {
-  const genderMap: Record<
-    NonNullable<ApiUserManagement.UserTable['gender']>,
-    NonNullable<UserManagement.UserTable['userGender']>
-  > = {
-    '0': 'female',
-    '1': 'male'
-  };
-
-  // 1. 有可能依赖于多个接口的结果，再转换成页面的数据
-  // 2. 接口定义的字段有可能为null, 例如 预期是数组却返回了null，导致调用数组方法报错
-  // 3. 字段可能丢失
-
-  return requestData.map((item, index) => {
-    const { id, name: userName, age, gender, phone: userPhone, email: userEmail, role: userRole, disabled } = item;
-
-    const userAge = isUndefined(age) ? '无' : String(age);
-
-    const userGender = gender !== null ? genderMap[gender] : 'null';
-
-    const result: UserManagement.UserTable = {
+  return data.map((item, index) => {
+    const user: UserManagement.User = {
       index: index + 1,
-      key: id,
-      id,
-      userName,
-      userAge,
-      userGender,
-      userGenderLabel: EnumGender[userGender],
-      userPhone,
-      userEmail,
-      userRole,
-      disabled
+      key: item.id,
+      ...item
     };
 
-    return result;
+    return user;
   });
 }

src/service/api/management.ts

@@ -1,12 +1,9 @@
 import { adapter } from '@/utils';
 import { mockRequest } from '../request';
-import { adapterOfFetchUserManagementList } from './management.adapter';
+import { adapterOfFetchUserList } from './management.adapter';
 
-/**
- * 获取用户管理列表
- */
-export async function fetchUserManagementList() {
-  const data = await mockRequest.post<ApiUserManagement.UserTable[]>('/getUserManagementList');
-
-  return adapter(adapterOfFetchUserManagementList, data);
-}
+/** 获取用户列表 */
+export const fetchUserList = async () => {
+  const data = await mockRequest.post<ApiUserManagement.User[] | null>('/getAllUserList');
+  return adapter(adapterOfFetchUserList, data);
+};

src/typings/api.d.ts

@@ -22,34 +22,31 @@ declare namespace ApiRoute {
   }
 }
 
-declare namespace ApiDemo {
-  interface DataWithAdapter {
-    dataId: string;
-    dataName: string;
-  }
-}
-
 declare namespace ApiUserManagement {
-  interface UserTable {
+  interface User {
     /** 用户id */
     id: string;
     /** 用户名 */
-    name: string;
+    userName: string | null;
     /** 用户年龄 */
-    age: number;
+    age: number | null;
     /**
      * 用户性别
-     * - 男 1
-     * - 女 0
+     * - 0: 女
+     * - 1: 男
      */
     gender: '0' | '1' | null;
     /** 用户手机号码 */
     phone: string;
     /** 用户邮箱 */
-    email: string;
-    /** 用户角色 */
-    role: Auth.RoleType;
-    /** 是否禁用用户 */
-    disabled: boolean;
+    email: string | null;
+    /**
+     * 用户状态
+     * - 1: 启用
+     * - 2: 禁用
+     * - 3: 冻结
+     * - 4: 软删除
+     */
+    userStatus: '1' | '2' | '3' | '4' | null;
   }
 }

src/typings/business.d.ts

@@ -20,77 +20,27 @@ declare namespace Auth {
   }
 }
 
-declare namespace Demo {
-  interface DataWithAdapter {
-    id: string;
-    name: string;
-  }
-}
-
-/** 系统消息 */
-declare namespace Message {
-  interface Tab {
-    /** tab的key */
-    key: number;
-    /** tab名称 */
-    name: string;
-    /** badge类型 */
-    badgeProps?: import('naive-ui').BadgeProps;
-    /** 消息数据 */
-    list: List[];
-  }
-
-  interface List {
-    /** 数据唯一值 */
-    id: number;
-    /** 头像 */
-    avatar?: string;
-    /** 消息icon */
-    icon?: string;
-    svgIcon?: string;
-    /** 消息标题 */
-    title: string;
-    /** 消息发送时间 */
-    date?: string;
-    /** 消息是否已读 */
-    isRead?: boolean;
-    /** 消息描述 */
-    description?: string;
-    /** 标签名称 */
-    tagTitle?: string;
-    /** 标签props */
-    tagProps?: import('naive-ui').TagProps;
-  }
-}
-
-/** 用户管理 */
 declare namespace UserManagement {
-  /** 用户表格 */
-  interface UserTable {
+  interface User extends ApiUserManagement.User {
     /** 序号 */
     index: number;
-    /** 数据的key(id) */
+    /** 表格的key（id） */
     key: string;
-    /** 用户id */
-    id: string;
-    /** 用户名 */
-    userName: string;
-    /** 用户年龄 */
-    userAge: string;
-    /**
-     * 用户性别
-     * - male 男
-     * - female 女
-     */
-    userGender: keyof typeof import('@/enum').EnumGender;
-    userGenderLabel: import('@/enum').EnumGender;
-    /** 用户手机号 */
-    userPhone: string;
-    /** 用户邮箱 */
-    userEmail: string;
-    /** 用户角色 */
-    userRole: Auth.RoleType;
-    /** 是否禁用用户 */
-    disabled: boolean;
   }
+
+  /**
+   * 用户性别
+   * - 0: 女
+   * - 1: 男
+   */
+  type GenderKey = NonNullable<User['gender']>;
+
+  /**
+   * 用户状态
+   * - 1: 启用
+   * - 2: 禁用
+   * - 3: 冻结
+   * - 4: 软删除
+   */
+  type UserStatusKey = NonNullable<User['userStatus']>;
 }

src/typings/naive-ui.d.ts

@@ -0,0 +1,3 @@
+declare namespace NaiveUI {
+  type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+}

src/typings/system.d.ts

@@ -72,7 +72,7 @@ declare namespace Service {
 
   /** 多个请求数据结果 */
   type MultiRequestResult<T extends any[]> = T extends [infer First, ...infer Rest]
-    ? First extends any
+    ? [First] extends [any]
       ? Rest extends any[]
         ? [Service.RequestResult<First>, ...MultiRequestResult<Rest>]
         : [Service.RequestResult<First>]
@@ -293,3 +293,39 @@ interface GlobalTabRoute
     top: number;
   };
 }
+
+/** 系统消息 */
+declare namespace Message {
+  interface Tab {
+    /** tab的key */
+    key: number;
+    /** tab名称 */
+    name: string;
+    /** badge类型 */
+    badgeProps?: import('naive-ui').BadgeProps;
+    /** 消息数据 */
+    list: List[];
+  }
+
+  interface List {
+    /** 数据唯一值 */
+    id: number;
+    /** 头像 */
+    avatar?: string;
+    /** 消息icon */
+    icon?: string;
+    svgIcon?: string;
+    /** 消息标题 */
+    title: string;
+    /** 消息发送时间 */
+    date?: string;
+    /** 消息是否已读 */
+    isRead?: boolean;
+    /** 消息描述 */
+    description?: string;
+    /** 标签名称 */
+    tagTitle?: string;
+    /** 标签props */
+    tagProps?: import('naive-ui').TagProps;
+  }
+}