feat(projects): 添加请求适配adapter层应用的示例页面

src/enum/business.ts

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

src/hooks/business/useNaiveTable.ts

@@ -1,69 +1 @@
-import type { DataTableColumn } from 'naive-ui';
-
-type UnionColumn<T> = T extends DataTableColumn[] ? TypeUtil.ArrayToUnion<T> : never;
-
-type ColumnKey = 'key';
-
-type InterfaceArray = {
-  [key: string]: unknown;
-};
-
-type ColumnKeyData = {
-  key: unknown;
-};
-
-type ExcludeArrayByKey<T extends InterfaceArray[]> = T extends [infer First, ...infer Rest]
-  ? First extends ColumnKeyData
-    ? Rest extends InterfaceArray[]
-      ? [First, ...ExcludeArrayByKey<Rest>]
-      : [First]
-    : Rest extends InterfaceArray[]
-    ? ExcludeArrayByKey<Rest>
-    : []
-  : [];
-
-type GetUnionColumnKey<T extends InterfaceArray[]> = ColumnKey extends keyof UnionColumn<T>
-  ? UnionColumn<T>[ColumnKey]
-  : never;
-
-export const columns: DataTableColumn[] = [
-  {
-    type: 'selection'
-  },
-  {
-    title: 'Name',
-    key: 'name',
-    align: 'center'
-  },
-  {
-    title: 'Age',
-    key: 'age'
-  },
-  {
-    title: 'Address',
-    key: 'address'
-  }
-];
-
-export type UnionColumnKey = GetUnionColumnKey<
-  ExcludeArrayByKey<
-    [
-      {
-        type: 'selection';
-      },
-      {
-        title: 'Name';
-        key: 'name';
-        align: 'center';
-      },
-      {
-        title: 'Age';
-        key: 'age';
-      },
-      {
-        title: 'Address';
-        key: 'address';
-      }
-    ]
-  >
->;
+// import type { DataTableColumn } from 'naive-ui';

src/hooks/common/useBoolean.ts

@@ -1,5 +1,9 @@
 import { ref } from 'vue';
 
+/**
+ * boolean组合式函数
+ * @param initValue 初始值
+ */
 export default function useBoolean(initValue = false) {
   const bool = ref(initValue);
 

src/service/api/index.ts

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

src/service/api/management.adapter.ts

@@ -0,0 +1,39 @@
+import { EnumGender } from '@/enum';
+import { isUndefined } from '@/utils';
+
+export function adapterOfFetchUserManagementList(
+  requestData: ApiUserManagement.UserTable[],
+  adminId: string
+): 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 => {
+    const { id, name, age, gender } = item;
+
+    const userName = name + (adminId === id ? '(管理员)' : '');
+
+    const userAge = isUndefined(age) ? '无' : String(age);
+
+    const userGender = gender !== null ? genderMap[gender] : 'null';
+
+    const result: UserManagement.UserTable = {
+      id,
+      userName,
+      userAge,
+      userGender,
+      userGenderLabel: EnumGender[userGender]
+    };
+
+    return result;
+  });
+}

src/service/api/management.ts

@@ -0,0 +1,22 @@
+import { adapter } from '@/utils';
+import { mockRequest } from '../request';
+import { adapterOfFetchUserManagementList } from './management.adapter';
+
+/**
+ * 获取用户管理列表
+ */
+export async function fetchUserManagementList() {
+  const data = await mockRequest.post<ApiUserManagement.UserTable[]>('/getUserManagementList');
+
+  const id = '2';
+
+  return adapter(adapterOfFetchUserManagementList, data, { error: null, data: id });
+}
+
+// export async function fetchFilterUserManagementList(
+//   filterKey: keyof UserManagement.UserTable,
+//   mode: 'fontEnd' | 'backEnd',
+//   source: UserManagement.UserTable[]
+// ) {
+
+// }

src/typings/api.d.ts

@@ -28,3 +28,24 @@ declare namespace ApiDemo {
     dataName: string;
   }
 }
+
+declare namespace ApiUserManagement {
+  interface UserTable {
+    /** 用户id */
+    id: string;
+    /** 用户名 */
+    name: string;
+    /** 用户年龄 */
+    age?: number;
+    /**
+     * 用户性别
+     * - 男 1
+     * - 女 0
+     */
+    gender: '0' | '1' | null;
+    /** 创建时间 */
+    createTime: string;
+    /** 更新时间 */
+    updateTime: string;
+  }
+}

src/typings/business.d.ts

@@ -62,3 +62,23 @@ declare namespace Message {
     tagProps?: import('naive-ui').TagProps;
   }
 }
+
+/** 用户管理 */
+declare namespace UserManagement {
+  /** 用户表格 */
+  interface UserTable {
+    /** 用户id */
+    id: string;
+    /** 用户名 */
+    userName: string;
+    /** 用户年龄 */
+    userAge: string;
+    /**
+     * 用户性别
+     * - male 男
+     * - female 女
+     */
+    userGender: keyof typeof import('@/enum').EnumGender;
+    userGenderLabel: import('@/enum').EnumGender;
+  }
+}

src/typings/utils.d.ts

@@ -7,15 +7,9 @@ declare namespace TypeUtil {
 
   type GetFunReturn<F extends Noop> = F extends (...args: any) => infer R ? R : never;
 
+  type Writable<T> = { [K in keyof T]: T[K] };
+
   type FirstOfArray<T extends any[]> = T extends [infer First, ...infer _Rest] ? First : never;
 
   type LastOfArray<T extends any[]> = T extends [...infer _Rest, infer Last] ? Last : never;
-
-  type ArrayToUnion<T extends any[]> = T extends [infer First, ...infer Rest]
-    ? First extends any
-      ? Rest extends any[]
-        ? FirstOfArray<[First]> | ArrayToUnion<Rest>
-        : [First]
-      : never
-    : never;
 }

src/views/management/user/index.vue

@@ -1,9 +1,55 @@
 <template>
   <div>
-    <n-data-table />
+    <n-data-table :columns="columns" :data="tableData" :loading="loading" />
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { DataTableColumns } from 'naive-ui';
+import { fetchUserManagementList } from '@/service';
+import { useLoading } from '@/hooks';
+
+const { loading, startLoading, endLoading } = useLoading(false);
+
+const columns: DataTableColumns = [
+  {
+    key: 'userName',
+    title: '用户名'
+  },
+  {
+    key: 'userAge',
+    title: '用户年龄'
+  },
+  {
+    key: 'userGenderLabel',
+    title: '性别'
+  }
+];
+
+const tableData = ref<UserManagement.UserTable[]>([]);
+
+function setTableData(data: UserManagement.UserTable[]) {
+  tableData.value = data;
+}
+
+async function getTableData() {
+  startLoading();
+  const { data } = await fetchUserManagementList();
+  if (data) {
+    setTimeout(() => {
+      setTableData(data);
+      endLoading();
+    }, 1000);
+  }
+}
+
+function init() {
+  getTableData();
+}
+
+// 初始化
+init();
+</script>
 
 <style scoped></style>