@peng_kai/kit 0.0.1

package/request/interceptors/popupMessage.ts

@@ -0,0 +1,47 @@
+import axios from 'axios'
+import type { AxiosInterceptorManager } from "axios";
+import { isTimeout } from "../helpers";
+
+export function popupMessage(popup: (type: 'error' | 'success', message: string) => void): Parameters<AxiosInterceptorManager<any>['use']> {
+  return [
+  (resp) => {
+    const successMessageConfig = resp?.config?.successMessage
+
+    if (successMessageConfig === false)
+      return resp
+
+    let successMsg = successMessageConfig
+
+    if (typeof successMessageConfig !== 'string')
+      successMsg = resp?.data?.msg
+
+    popup('success', successMsg)
+
+    return resp
+  },
+  (error) => {
+    const errorMessageConfig = error?.config?.errorMessage
+
+    if (errorMessageConfig === false)
+      return error
+
+    let errorMsg: boolean | string = errorMessageConfig
+
+    if (axios.isAxiosError(error)) {
+      // 请求超时
+      if (isTimeout(error))
+        errorMsg = 'Request Timeout'
+      else if (typeof errorMessageConfig !== 'string')
+        errorMsg = error.response?.data?.msg || error.message || error.response?.statusText
+    }
+    else if (error instanceof Error && typeof errorMessageConfig !== 'string') {
+      errorMsg = error.message
+    }
+
+    if (typeof errorMsg === 'string')
+      popup('error', errorMsg)
+
+    return error
+  },
+  ]
+}

package/request/interceptors/returnResultType.ts

@@ -0,0 +1,30 @@
+import type { AxiosInterceptorManager } from "axios";
+import { ApiCode, isTimeout, ApiError } from "../helpers";
+
+export function returnResultType(): Parameters<AxiosInterceptorManager<any>['use']> {
+  return [
+    (resp) => {
+      const { resultType } = resp.config
+  
+      if (resultType === 'api')
+        return resp.data
+  
+      else if (resultType === 'axios')
+        return resp
+  
+      return resp.data?.data
+    },
+    (error) => {
+      let code = error?.response?.data?.code || error?.response?.status || ApiCode.UNKNOWN
+      let msg = error?.response?.data?.msg || error?.message || error?.response?.statusText || 'Unknown Error'
+      const data = error?.response?.data?.data || null
+  
+      if (isTimeout(error)) {
+        code = ApiCode.TIMEOUT
+        msg = 'Request Timeout'
+      }
+  
+      throw new ApiError({ code, msg, data })
+    },
+  ]
+}

package/request/interceptors/unitizeAxiosError.ts

@@ -0,0 +1,20 @@
+import axios from "axios";
+import type { AxiosInterceptorManager } from "axios";
+
+export function unitizeAxiosError(): Parameters<AxiosInterceptorManager<any>['use']> {
+  return [
+    resp => resp,
+    (error) => {
+      if (axios.isAxiosError(error))
+        throw error
+
+      if (error instanceof Error)
+        throw new axios.AxiosError(`${error.message}[AppError01]`)
+
+      if (typeof error === 'object')
+        throw new axios.AxiosError(`${JSON.stringify(error)}[AppError01]`)
+
+      throw new axios.AxiosError(`${String(error)}[AppError01]`)
+    },
+  ]
+}

package/request/request.ts

@@ -0,0 +1,89 @@
+import type { AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
+
+export { createRequest }
+
+function createRequest<Req, OResp, Resp = Api.TransformPageResult<OResp>>(
+  // function createRequest<Req, OResp, Resp = OResp>(
+  id: string,
+  paramBuilder: (params: any) => any,
+) {
+  type ReqConfig = Partial<AxiosRequestConfig>
+
+  // 返回 Axios 的 Response
+  async function request<Rt extends 'axios'>(reqData: Req, options: ReqConfig & { resultType: Rt }): Promise<AxiosResponse<Resp>>
+  // 返回 API 数据
+  async function request<Rt extends 'api'>(reqData: Req, options: ReqConfig & { resultType: Rt }): Promise<Resp>
+  // 返回 API 数据中的 data 字段值，默认
+  async function request(reqData: Req, config?: ReqConfig): Promise<Api.GetDataField<Resp>>
+  async function request(reqData: Req, config?: ReqConfig): Promise<any> {
+    const params = paramBuilder(reqData)
+    const serviceName = params.headers?.['Service-Name'] ?? ''
+    const service = createRequest.services[serviceName]?.server
+
+    if (service)
+      Reflect.deleteProperty(params.headers, 'Service-Name')
+    else
+      throw new Error(`${serviceName} 接口服务不存在`)
+
+    const res = await service.request({
+      apiName: `${serviceName}/${id}`,
+      ...params,
+      ...config,
+    })
+
+    return res as Api.GetDataField<Resp>
+  }
+
+  request.id = id
+
+  return request
+}
+
+// 服务
+createRequest.services = {} as Record<string, {
+  server: AxiosInstance;
+} | undefined>
+
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    /**
+     * 接口返回的数据类型
+     *
+     * - `axios`：Axios 的 Response
+     * - `api`：API 数据完整结构
+     * - `data`：API 数据中的 data 字段值，**默认**
+     */
+    resultType?: 'axios' | 'api' | 'data'
+    /**
+     * 是否加入查询参数时间戳
+     *
+     * - `true`：**默认**
+     */
+    joinTime?: boolean
+    /**
+     * 当接口报错时，是否弹出 message 提示。取值：
+     * - `false`：弹出 message 提示
+     * - `true`：弹出 message 提示，内容使用接口 msg 的值，**默认**
+     * - string：自定义 message 内容
+     */
+    errorMessage?: string | boolean
+    /**
+     * 当接口成功时，是否弹出 message 提示。取值：
+     * - `false`：弹出 message 提示，**默认**
+     * - `true`：弹出 message 提示，内容使用接口 msg 的值
+     * - string：自定义 message 内容
+     */
+    successMessage?: string | boolean
+    /**
+     * 是否检查 API 的 code 字段
+     *
+     * - `true`：当 code 非 0 时报错，**默认**
+     * - `false`：不检查
+     */
+    checkCode?: boolean
+    /**
+     * 需要忽略的 code，即数组中的 code 都视为请求成功
+     */
+    ignoreCode?: number[]
+  }
+}

package/request/type.d.ts

@@ -0,0 +1,89 @@
+declare namespace Api {
+  type Request = (reqData: any, options?: Options) => Promise<any>
+  // type RequestPagination = (reqData: Partial<PageParam>, options?: Options) => Promise<PaginationData<any>>;
+  interface PageParam {
+    page: number
+    page_size: number
+  }
+  interface PageInfo {
+    has_more: boolean
+    page: number
+    page_size: number
+    total: number
+  }
+  interface PageData<T = any> {
+    list: T[] | null
+    pagination: PaginationInfo
+    [k in string]: any
+  }
+  interface Result<T = any | PageData<any>> {
+    code: number
+    msg: string
+    data: T
+  }
+  type GetParam<A extends Request> = A extends (reqData: infer R) => any ? R : any
+  type GetData<A extends Request> = ReturnType<A> extends Promise<infer D> ? D : any
+  type GetDataItem<A extends Request> = NonNullable<GetData<A>> extends { list: infer L }
+    ? NonNullable<L> extends Array<infer I>
+      ? I
+      : any
+    : any
+  type GetDataField<R> = R extends { data: infer D } ? (D extends { list: any; pagination: any } ? D : D) : any
+
+  /**
+   * 将api返回的分页数据转换成前端使用的分页数据格式，将分页数据格式统一
+   *
+   * ```
+   * {
+   *   code: number,
+   *   msg: string,
+   *   data: {
+   *     list: [],
+   *     pagination: {},
+   *     ...
+   *   }
+   * }
+   * ```
+   */
+  type TransformPageResult<R> = R extends { pagination: infer P; data: infer D }
+    ? D extends Record<string, any>
+      ? D extends { list: any }
+        ? {
+            [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
+          } & {
+            data: D & { pagination: P }
+          }
+        : {
+            [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
+          } & {
+            data: {
+              list: D
+              pagination: P
+            }
+          }
+      : R
+    : R
+}
+
+// 测试用例 ----------------------------
+// type DDD1 = Api.TransformPageResult<{
+//   code: number
+//   msg: string
+//   data: {
+//     name: string
+//   }[]
+//   pagination: {
+//     page: number
+//   }
+// }>
+// type DDD2 = Api.TransformPageResult<{
+//   code: number
+//   msg: string
+//   data: {
+//     list: { name: string }[]
+//     total: {}
+//   }
+//   pagination: {
+//     page: number
+//   }
+// }>

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "esnext",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+  },
+}

package/vue/hooks/useComponentRef.ts

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import type { Component } from 'vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+export function useComponentRef<C extends Component>(_component: C) {
+  const _cpt = ref<any>()
+  const refFn = (cpt: any) => {
+    _cpt.value = cpt
+  }
+
+  type Exposed = typeof refFn & Partial<ComponentExposed<C>>
+
+  return new Proxy(refFn as Exposed, {
+    get(_target, p) {
+      if (!_cpt.value)
+        return
+
+      return Reflect.get(_cpt.value, p)
+    },
+    set(_target, p, newValue) {
+      if (!_cpt.value)
+        return false
+
+      return Reflect.set(_cpt.value, p, newValue)
+    },
+  })
+}

package/vue/hooks/useTeleportTarget.ts

@@ -0,0 +1,13 @@
+import { ref, onMounted } from "vue";
+
+export function useTeleportTarget(selectors: string) {
+  const target = ref<HTMLElement | null>()
+
+  onMounted(() => {
+    setTimeout(() => {
+      target.value = document.querySelector<HTMLElement>(selectors)
+    })
+  })
+
+  return target
+}

package/vue/index.ts

@@ -0,0 +1,2 @@
+export { useComponentRef } from './hooks/useComponentRef'
+export { useTeleportTarget } from './hooks/useTeleportTarget'