create-bubbles 0.1.0 → 0.1.2

package/template-vue-rsbuild-biome/src/utils/request/core/index.ts

@@ -0,0 +1,166 @@
+import { type AlovaGenerics, type AlovaOptions, createAlova } from 'alova'
+import { deepMergeObject, isReadableStream } from './utils'
+import adapterFetch from 'alova/fetch'
+
+interface statusMap {
+  success?: number
+  unAuthorized?: number
+}
+
+interface codeMap {
+  success?: number[]
+  unAuthorized?: number[]
+}
+
+export interface baseRequestOption<AG extends AlovaGenerics> {
+  baseUrl?: string
+  timeout?: number
+  commonHeaders?: Record<string, string | (() => string)>
+  statusMap?: statusMap
+  codeMap?: codeMap
+  responseDataKey?: string
+  responseMessageKey?: string
+  isTransformResponse?: boolean
+  isShowSuccessMessage?: boolean
+  successDefaultMessage?: string
+  isShowErrorMessage?: boolean
+  errorDefaultMessage?: string
+  statesHook?: AlovaOptions<AG>['statesHook']
+  successMessageFunc?: (message: string) => void
+  errorMessageFunc?: (message: string) => void
+  unAuthorizedResponseFunc?: () => void
+  requestAdapter?: AlovaOptions<AG>['requestAdapter']
+}
+
+export interface CustomConfig {
+  isTransformResponse?: boolean
+  isShowSuccessMessage?: boolean
+  isShowErrorMessage?: boolean
+}
+
+type requestOption = baseRequestOption<AlovaGenerics> & CustomConfig
+
+export const createInstance = (option: requestOption) => {
+  const defaultOption: requestOption = {
+    baseUrl: '/',
+    timeout: 0,
+    statusMap: {
+      success: 200,
+      unAuthorized: 401,
+    },
+    codeMap: {
+      success: [200],
+      unAuthorized: [401],
+    },
+    responseDataKey: 'data',
+    responseMessageKey: 'message',
+    isTransformResponse: true,
+    isShowSuccessMessage: false,
+    successDefaultMessage: '操作成功',
+    isShowErrorMessage: true,
+    errorDefaultMessage: '服务异常',
+    requestAdapter: adapterFetch(),
+  }
+
+  const mergeOption: baseRequestOption<AlovaGenerics> & CustomConfig = deepMergeObject(
+    defaultOption,
+    option,
+  )
+
+  const instance = createAlova({
+    baseURL: mergeOption.baseUrl,
+    timeout: mergeOption.timeout,
+    statesHook: mergeOption?.statesHook,
+    requestAdapter: mergeOption.requestAdapter as AlovaOptions<AlovaGenerics>['requestAdapter'],
+    beforeRequest: async (method) => {
+      for (const [key, value] of Object.entries(option?.commonHeaders ?? {})) {
+        method.config.headers[key] = typeof value === 'function' ? value() : value
+      }
+    },
+    responded: {
+      onSuccess: async (response) => {
+        if (!mergeOption?.isTransformResponse) return response
+        const { status } = response
+
+        // 判断响应类型：如果使用 adapterFetch，response.data 是可读流，则调用 json()；否则直接使用 response.data
+        const data =
+          response?.body && isReadableStream(response.body)
+            ? await response.json() // adapterFetch 的响应，使用 json() 解析可读流
+            : response.data // 其他适配器的响应
+        // 不成功的情况
+        if (status !== mergeOption.statusMap?.success) {
+          // 如果后端使用status 字段来表示未授权，则返回401
+          if (mergeOption?.statusMap?.unAuthorized === status) {
+            mergeOption?.unAuthorizedResponseFunc?.()
+          }
+          return Promise.reject(response)
+        }
+
+        const {
+          responseDataKey,
+          codeMap,
+          isShowSuccessMessage,
+          responseMessageKey,
+          isShowErrorMessage,
+        } = mergeOption
+        const {
+          code,
+          [responseDataKey as string]: responseData,
+          [responseMessageKey as string]: responseMessage,
+        } = data
+        if (!codeMap?.success?.includes(+code)) {
+          // code unAuthorized 处理
+          if (codeMap?.unAuthorized?.includes(+code)) {
+            mergeOption?.unAuthorizedResponseFunc?.()
+            return Promise.reject(response)
+          }
+          // 其他错误直接打印msg
+
+          const errorMessage = data[responseMessageKey as string] ?? mergeOption.errorDefaultMessage
+          if (isShowErrorMessage) mergeOption?.errorMessageFunc?.(errorMessage)
+          return Promise.reject(response)
+        }
+        if (isShowSuccessMessage)
+          mergeOption?.successMessageFunc?.(responseMessage ?? mergeOption.successDefaultMessage)
+        return responseData
+      },
+      onError: (error) => {
+        if (mergeOption?.isShowErrorMessage)
+          mergeOption.errorMessageFunc?.(
+            error.response?.data?.message ?? mergeOption?.errorDefaultMessage,
+          )
+      },
+      // onComplete: (_method) => {},
+    },
+  })
+
+  return instance
+}
+
+// 🚀 创建双重调用实例的工厂函数
+export const createDualCallInstance = (baseConfig: baseRequestOption<AlovaGenerics>) => {
+  // 创建默认实例
+  const defaultInstance = createInstance(baseConfig)
+
+  // 双重调用函数
+  const dualInstance = (option?: CustomConfig) => {
+    if (option) {
+      // 合并配置并创建新实例
+      const mergedConfig = { ...baseConfig, ...option }
+      return createInstance(mergedConfig)
+    }
+    return defaultInstance
+  }
+
+  // 🎯 直接绑定 HTTP 方法，无需复杂类型注释
+  dualInstance.Get = defaultInstance.Get.bind(defaultInstance)
+  dualInstance.Post = defaultInstance.Post.bind(defaultInstance)
+  dualInstance.Put = defaultInstance.Put.bind(defaultInstance)
+  dualInstance.Delete = defaultInstance.Delete.bind(defaultInstance)
+  dualInstance.Patch = defaultInstance.Patch.bind(defaultInstance)
+  dualInstance.Head = defaultInstance.Head.bind(defaultInstance)
+  dualInstance.Options = defaultInstance.Options.bind(defaultInstance)
+  dualInstance.Request = defaultInstance.Request.bind(defaultInstance)
+
+  return dualInstance
+}

package/template-vue-rsbuild-biome/src/utils/request/core/utils.ts

@@ -0,0 +1,38 @@
+export const deepMergeObject = <T = any>(source: T, target: Partial<T>): T => {
+  const isObject = (obj: any): obj is Record<string, any> =>
+    obj && typeof obj === 'object' && !Array.isArray(obj)
+
+  const merge = (src: any, tgt: any): any => {
+    if (isObject(src) && isObject(tgt)) {
+      Object.keys(tgt).forEach((key) => {
+        if (isObject(tgt[key])) {
+          src[key] = merge(src[key] || {}, tgt[key])
+        } else {
+          src[key] = tgt[key]
+        }
+      })
+    }
+    return src
+  }
+
+  return merge({ ...source }, target)
+}
+
+/**
+ * 判断一个变量是不是可读流
+ * @param data
+ */
+export const isReadableStream = (data: unknown): boolean => {
+  if (!(data instanceof ReadableStream)) {
+    return false
+  }
+  if (typeof data.locked !== 'boolean') return false
+
+  const instanceFunc = ['cancel', 'getReader', 'pipeThrough', 'pipeTo', 'tee'] as const
+
+  for (const func of instanceFunc) {
+    if (typeof data[func] !== 'function') return false
+  }
+
+  return true
+}

package/template-vue-rsbuild-biome/src/utils/request/index.ts

@@ -1,77 +1,39 @@
-import type { AxiosRequestConfig } from 'axios'
+import { envVariables } from '../env'
+import { createDualCallInstance } from './core'
+import { router } from '@/router'
+import { ElMessage } from 'element-plus'
+import 'element-plus/es/components/message/style/css'
+import vueHook from 'alova/vue'
+import { axiosRequestAdapter } from '@alova/adapter-axios'
 
-import request, { type CustomConfig } from './axios'
-
-interface createAxiosType {
-  get: <T = any>(
-    config: {
-      url: string
-      params?: AxiosRequestConfig['params']
-      config?: AxiosRequestConfig<any>
+const getBaseConfig = (): Parameters<typeof createDualCallInstance>[0] => {
+  return {
+    baseUrl: `/${envVariables.PUBLIC_PORT}`,
+    statusMap: {
+      success: 200,
+      unAuthorized: 401,
     },
-    option?: CustomConfig,
-  ) => Promise<T>
-  post: <T = any>(
-    config: {
-      url: string
-      data?: AxiosRequestConfig['data']
-      params?: AxiosRequestConfig['params']
-      config?: AxiosRequestConfig<any>
+    codeMap: {
+      success: [200],
     },
-    option?: CustomConfig,
-  ) => Promise<T>
-  put: <T = any>(
-    config: {
-      url: string
-      data?: AxiosRequestConfig['data']
-      config?: AxiosRequestConfig<any>
+    responseDataKey: 'data',
+    responseMessageKey: 'msg',
+    commonHeaders: {},
+    successMessageFunc: (msg: string) => {
+      ElMessage.success(msg)
     },
-    option?: CustomConfig,
-  ) => Promise<T>
-  delete: <T = any>(
-    config: {
-      url: string
-      data?: AxiosRequestConfig['data']
-      config?: AxiosRequestConfig<any>
+    errorMessageFunc: (msg: string) => {
+      ElMessage.error(msg)
     },
-    option?: CustomConfig,
-  ) => Promise<T>
-}
-
-const createAxios: createAxiosType = {
-  get: (config, option) =>
-    request(option).get(config.url, {
-      params: config.params,
-      ...config?.config,
-    }),
-  post: (
-    config: {
-      url: string
-      params?: Record<string, string>
-      data?: any
-      config?: AxiosRequestConfig<any>
+    unAuthorizedResponseFunc: () => {
+      router.push('/login')
+      ElMessage.error('登录过期或未登录')
     },
-    option?: CustomConfig,
-  ) => {
-    let url = config.url
-    if (config.params instanceof Object) {
-      url += '?'
-      const entries = Object.entries(config.params)
-      for (let i = 0; i < entries.length; i++) {
-        const [key, value] = entries[i]
-        url += `${key}=${value}${i < entries.length - 1 ? '&' : ''}`
-      }
-    }
-    return request(option).post(url, config?.data, config?.config)
-  },
-  put: (
-    config: { url: string; data?: any; config?: AxiosRequestConfig<any> },
-    option?: CustomConfig,
-  ) => request(option).put(config.url, config?.data, config?.config),
-  delete: (
-    config: { url: string; config?: AxiosRequestConfig<any> },
-    customConfig?: CustomConfig,
-  ) => request(customConfig).delete(config.url, config?.config),
+    statesHook: vueHook,
+    requestAdapter: axiosRequestAdapter(),
+  }
 }
 
-export default createAxios
+const alovaRequest = createDualCallInstance(getBaseConfig())
+
+export default alovaRequest

package/template-vue-rsbuild-biome/tsconfig.json

@@ -22,7 +22,7 @@
 
     "baseUrl": ".",
     "paths": {
-      "@": ["src"]
+      "@/*": ["src/*"]
     }
   },
   "include": ["src"]

package/template-react-rsbuild-biome/src/utils/request/axios.ts

@@ -1,83 +0,0 @@
-import { message } from 'antd'
-import axios, { type AxiosResponse } from 'axios'
-import { envVariables } from '@/utils/env'
-
-import { router } from '@/router'
-import { useUserStore } from '@/store/modules/user'
-
-export interface CustomConfig {
-  /** 直接返回响应体 */
-  isTransformResponse?: boolean
-  // 成功需要提示
-  isShowSuccessMsg?: boolean
-}
-
-export enum CodeEnum {
-  SUCCESS = 200,
-  UNAUTHORIZED = 401,
-}
-
-const unAuthFunc = () => {
-  message.error('暂未登录或登录已过期，请重新登录')
-  router.navigate('/login')
-}
-export default (customConfig?: CustomConfig) => {
-  const token = useUserStore((state) => state.token)
-
-  const instance = axios.create({
-    baseURL: envVariables.PUBLIC_API_AFFIX,
-  })
-
-  instance.interceptors.request.use(
-    (config) => {
-      config.headers.set('X-Access-Token', token)
-      config.headers.set('Allow-Control-Allow-Origin', '*')
-      return config
-    },
-    (error) => {
-      message.error('请求错误')
-      return Promise.reject(error)
-    },
-  )
-
-  interface ResponseData<T = any> {
-    code: number
-    message: string
-    requestId: string
-    responseTime: number
-    result: T
-  }
-
-  instance.interceptors.response.use(
-    (response: AxiosResponse<ResponseData>) => {
-      const { status, data } = response
-      if (status === 200) {
-        if (customConfig?.isTransformResponse === false) return data
-        const { code, message: msg } = data
-        if (code === CodeEnum.SUCCESS) {
-          if (customConfig?.isShowSuccessMsg) {
-            message.success(msg)
-          }
-          return data.result
-        }
-        message.error(msg)
-        return Promise.reject(data)
-      }
-      if (status === CodeEnum.UNAUTHORIZED) {
-        unAuthFunc()
-      } else return Promise.reject(data.message)
-    },
-    (error) => {
-      const response = error.response
-      const { status, data } = response
-      if (status === CodeEnum.UNAUTHORIZED) {
-        unAuthFunc()
-      } else {
-        message.error(data?.message || '系统异常')
-        return Promise.reject(error)
-      }
-    },
-  )
-
-  return instance
-}

package/template-vue-rolldown-oxc/postcss.config.js

@@ -1,5 +0,0 @@
-import UnoCSS from '@unocss/postcss'
-
-export default {
-  plugins: [UnoCSS()],
-}

package/template-vue-rsbuild-biome/src/utils/request/axios.ts

@@ -1,83 +0,0 @@
-import { message } from 'element-plus'
-import axios, { type AxiosResponse } from 'axios'
-
-import { router } from '@/router'
-import { useUserStore } from '@/store/modules/user'
-
-export interface CustomConfig {
-  /** 直接返回响应体 */
-  isTransformResponse?: boolean
-  // 成功需要提示
-  isShowSuccessMsg?: boolean
-}
-
-export enum CodeEnum {
-  SUCCESS = 200,
-  UNAUTHORIZED = 401,
-}
-
-const unAuthFunc = () => {
-  message.error('暂未登录或登录已过期，请重新登录')
-  router.navigate('/login')
-}
-export default (customConfig?: CustomConfig) => {
-  const userStore = useUserStore()
-  const token = userStore.token
-
-  const instance = axios.create({
-    baseURL: import.meta.env.PUBLIC_API_AFFIX,
-  })
-
-  instance.interceptors.request.use(
-    (config) => {
-      config.headers.set('X-Access-Token', token)
-      config.headers.set('Allow-Control-Allow-Origin', '*')
-      return config
-    },
-    (error) => {
-      message.error('请求错误')
-      return Promise.reject(error)
-    },
-  )
-
-  interface ResponseData<T = any> {
-    code: number
-    message: string
-    requestId: string
-    responseTime: number
-    result: T
-  }
-
-  instance.interceptors.response.use(
-    (response: AxiosResponse<ResponseData>) => {
-      const { status, data } = response
-      if (status === 200) {
-        if (customConfig?.isTransformResponse === false) return data
-        const { code, message: msg } = data
-        if (code === CodeEnum.SUCCESS) {
-          if (customConfig?.isShowSuccessMsg) {
-            message.success(msg)
-          }
-          return data.result
-        }
-        message.error(msg)
-        return Promise.reject(data)
-      }
-      if (status === CodeEnum.UNAUTHORIZED) {
-        unAuthFunc()
-      } else return Promise.reject(data.message)
-    },
-    (error) => {
-      const response = error.response
-      const { status, data } = response
-      if (status === CodeEnum.UNAUTHORIZED) {
-        unAuthFunc()
-      } else {
-        message.error(data?.message || '系统异常')
-        return Promise.reject(error)
-      }
-    },
-  )
-
-  return instance
-}