@gx-design-vue/create-gx-cli 0.1.3 → 0.1.4

package/template-mobile-vant-cli/src/utils/env.ts

@@ -0,0 +1,50 @@
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：本地开发环境
+ */
+export function isDev(): boolean {
+  return typeViteEnv('VITE_APP_ENV') === 'dev'
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：正式
+ */
+export function isPro(): boolean {
+  return typeViteEnv('VITE_USE_MODE') === 'pro'
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：非本地开发环境
+ */
+export function isBuild(): boolean {
+  return typeViteEnv('VITE_NODE_ENV') === 'production'
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 当前联调环境
+ */
+export function currentMode() {
+  return typeViteEnv('VITE_USE_MODE')
+}
+
+export function typeViteEnv<T extends keyof ViteEnv>(key: T): ViteEnv[T] | undefined {
+  let value: any = (import.meta as any).env[key]
+
+  if (value && typeof value === 'string') {
+    value = value.replace(/\\n/g, '\n') as ViteEnv[T]
+    value = value === 'true' ? true : value === 'false' ? false : value
+  }
+
+  return value
+}

package/template-mobile-vant-cli/src/utils/pageTitle.ts

@@ -0,0 +1,14 @@
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 设置标题
+ * @param pageTitle
+ * @returns {string}
+ */
+export default function getPageTitle(title: string, pageTitle: string) {
+  const newTitles: string[] = []
+  if (pageTitle)
+    newTitles.push(pageTitle)
+  if (title)
+    newTitles.push(title)
+  return newTitles.join('-')
+}

package/template-mobile-vant-cli/src/utils/request/XHR.ts

@@ -0,0 +1,139 @@
+import type { AxiosError } from 'axios'
+import axios from 'axios'
+import { cloneDeep } from 'lodash-es'
+import qs from 'qs'
+import { isFunction } from '@gx-design-vue/pro-utils'
+import type { GAxiosInstance, GAxiosOptions, GAxiosResponse } from './typings'
+import { ContentTypeEnum, RequestEnum } from './typings'
+import { AxiosCanceler } from './axiosCancel'
+
+export const getPendingUrl = (config: GAxiosOptions) => config.cancelKey || [ config.method, config.url ].join(
+  '&')
+
+/**
+ * @Author      gx12358
+ * @DateTime    2023/1/6
+ * @lastTime    2023/1/6
+ * @description 重新定义axios
+ */
+export class GAxios {
+  private axiosInstance: GAxiosInstance
+  private readonly options: GAxiosOptions
+
+  constructor(options: GAxiosOptions) {
+    this.options = options
+    this.axiosInstance = axios.create(options) as GAxiosInstance
+    this.setupInterceptors()
+  }
+
+  /**
+   * @description: Interceptor configuration 拦截器配置
+   */
+  private setupInterceptors() {
+    const {
+      requestInterceptors,
+      requestInterceptorsCatch,
+      responseInterceptors,
+      responseInterceptorsCatch
+    } = this.options
+
+    const axiosCanceler = new AxiosCanceler(this.options.ignoreCancelToken)
+
+    this.axiosInstance.interceptors.request.use<GAxiosOptions>((config) => {
+      const { cancelCallBackHook } = config
+      axiosCanceler.addPending(config)
+      if (cancelCallBackHook) {
+        cancelCallBackHook({
+          reset: axiosCanceler.reset,
+          cancel: (key?: string) => axiosCanceler.removePending(config, key),
+          cancelAll: axiosCanceler.removeAllPending
+        })
+      }
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config)
+      }
+      return config
+    }, undefined)
+
+    // Request interceptor error capture
+    requestInterceptorsCatch && isFunction(requestInterceptorsCatch) && this.axiosInstance.interceptors.request.use(
+      undefined,
+      requestInterceptorsCatch
+    )
+
+    // Response result interceptor processing
+    this.axiosInstance.interceptors.response.use((res: GAxiosResponse) => {
+      res && axiosCanceler.removePending(res.config)
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        return responseInterceptors(res)
+      }
+      return res
+    }, undefined)
+
+    // Response result interceptor error capture
+    responseInterceptorsCatch && isFunction(responseInterceptorsCatch) && this.axiosInstance.interceptors.response.use(
+      undefined,
+      (error) => {
+        axiosCanceler.removePending(error.config)
+
+        return responseInterceptorsCatch(this.axiosInstance, error)
+      }
+    )
+  }
+
+  // support form-data
+  supportFormData(config: GAxiosOptions) {
+    const headers = config.headers || this.options.headers
+    const contentType = headers?.['Content-Type'] || headers?.['content-type']
+
+    if (contentType !== ContentTypeEnum.FORM_URLENCODED || !Reflect.has(
+      config,
+      'data'
+    ) || config.method?.toUpperCase() === RequestEnum.GET) {
+      return config
+    }
+
+    return {
+      ...config,
+      data: qs.stringify(config.data, { arrayFormat: 'brackets' })
+    }
+  }
+
+  request<T = ResponseResult | boolean>(config: GAxiosOptions): Promise<T> {
+    let conf: GAxiosOptions = cloneDeep(config)
+
+    const opt: GAxiosOptions = Object.assign({}, this.options, conf)
+
+    const { beforeRequestHook, requestCatchHook, transformResponseHook } = opt
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(opt)
+    }
+
+    conf = this.supportFormData(opt)
+
+    return new Promise((resolve) => {
+      this.axiosInstance
+        .request<any, GAxiosResponse>(conf)
+        .then((res: GAxiosResponse) => {
+          if (transformResponseHook && isFunction(transformResponseHook)) {
+            try {
+              const ret = transformResponseHook(res, config)
+              resolve(ret)
+            } catch (err) {
+              resolve(false as any)
+              return
+            }
+            return
+          }
+          resolve(res as unknown as Promise<T>)
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            resolve(requestCatchHook(e) as any)
+            return
+          }
+          resolve(false as any)
+        })
+    })
+  }
+}

package/template-mobile-vant-cli/src/utils/request/axiosCancel.ts

@@ -0,0 +1,69 @@
+import type { Canceler } from 'axios'
+import axios from 'axios'
+import { isFunction } from '@gx-design-vue/pro-utils'
+import type { GAxiosOptions } from './typings'
+
+export const getPendingUrl = (
+  config: GAxiosOptions,
+  key?: string
+) => key || config.cancelKey || [ config.method, config.url ].join('&')
+
+export class AxiosCanceler {
+  ignoreCancelToken: boolean
+  pendingMap: Map<string, Canceler>
+
+  constructor(ignoreCancel?: boolean) {
+    this.pendingMap = new Map<string, Canceler>()
+
+    this.ignoreCancelToken = ignoreCancel
+  }
+
+  /**
+   * Add request
+   * @param {Object} config
+   */
+  addPending(config: GAxiosOptions) {
+    !this.ignoreCancelToken && this.removePending(config)
+
+    const url = getPendingUrl(config)
+    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
+      if (!this.pendingMap.has(url)) {
+        // If there is no current request in pending, add it
+        this.pendingMap.set(url, cancel)
+      }
+    })
+  }
+
+  /**
+   * @description: Clear all pending
+   */
+  removeAllPending() {
+    this.pendingMap.forEach((cancel) => {
+      cancel && isFunction(cancel) && cancel()
+    })
+    this.pendingMap.clear()
+  }
+
+  /**
+   * Removal request
+   * @param {Object} config
+   */
+  removePending(config: GAxiosOptions, key?: string) {
+    const url = getPendingUrl(config, key)
+
+    if (this.pendingMap.has(url)) {
+      // If there is a current request identifier in pending,
+      // the current request needs to be cancelled and removed
+      const cancel = this.pendingMap.get(url)
+      cancel && cancel(url)
+      this.pendingMap.delete(url)
+    }
+  }
+
+  /**
+   * @description: reset
+   */
+  reset(): void {
+    this.pendingMap = new Map<string, Canceler>()
+  }
+}

package/template-mobile-vant-cli/src/utils/request/checkStatus.ts

@@ -0,0 +1,9 @@
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 处理code异常
+ * @param {*} code
+ * @param {*} msg
+ */
+export const handleCode = (_code: number, _msg: string) => {
+  // 这里处理不同状态
+}

package/template-mobile-vant-cli/src/utils/request/index.ts

@@ -0,0 +1,142 @@
+import { showFailToast } from 'vant'
+import settings from '@/settings'
+import { useStoreGlobal } from '@/store'
+import { isDev } from '@/utils/env'
+import { tansParams } from '@/utils/util'
+import { checkURL } from '@/utils/validate'
+import { isBoolean } from '@gx-design-vue/pro-utils'
+import { GAxios } from './XHR'
+import type { GAxiosOptions, XhtInstance } from './typings'
+import { RequestEnum } from './typings'
+import { handleCode } from './checkStatus'
+
+const { requestPrefix, successCode, requestTimeout, tokenName, contentType } = settings
+
+const xhtInstance: XhtInstance = {
+  /**
+   * @description: 处理响应数据。如果数据不是预期格式，可直接抛出错误
+   */
+  transformResponseHook: (res, options) => {
+    const { customize, isReturnNativeResponse } = options
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (customize) {
+      return res.data
+    }
+    // 错误的时候返回
+
+    const { data }: { data: ResponseResult } = res
+    if (!data) {
+      throw new Error('请求出错，请稍候重试')
+    }
+    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    const { code, msg = '', message = '' } = data
+
+    const codeVerificationArray = successCode
+
+    // 这里逻辑可以根据项目进行修改
+    const hasSuccess = codeVerificationArray.includes(code)
+    if (hasSuccess) {
+      return data
+    }
+
+    // 在此处根据自己项目的实际情况对不同的code执行不同的操作
+    // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
+    handleCode(code, message || msg)
+
+    return Promise.resolve(false)
+  },
+
+  // 请求之前处理config
+  beforeRequestHook: (config) => {
+    // get请求映射params参数
+    if (config.method?.toUpperCase() === RequestEnum.GET && config.params) {
+      let url = config.url + '?' + tansParams(config.params)
+      url = url.slice(0, -1)
+      config.params = {}
+      config.url = url
+    }
+
+    if (!checkURL(config.url)) {
+      if (config.isMock) {
+        config.url = `/mock-server${config.url}`
+      } else {
+        config.url = `${import.meta.env.VITE_BASE_URL}${isDev ? requestPrefix || '' : ''}${config.url}`
+      }
+    }
+
+    return config
+  },
+
+  /**
+   * @description: 请求拦截器处理
+   */
+  requestInterceptors: (config) => {
+    const global = useStoreGlobal()
+    const carryToken = isBoolean(config.carryToken) ? config.carryToken : true
+    if (global.token && carryToken)
+      config.headers[tokenName] = global.token
+    return config
+  },
+
+  /**
+   * @description: 响应拦截器处理
+   */
+  responseInterceptors: (res) => {
+    return res
+  },
+
+  /**
+   * @description: 响应错误处理
+   */
+  responseInterceptorsCatch: (error: any) => {
+    const { response } = error
+    let errorMessage = error.message || ''
+    if (error.response && error.response.data) {
+      const { status } = response
+      handleCode(status, errorMessage)
+      return Promise.resolve(false)
+    } else {
+      if (errorMessage === 'Network Error') {
+        errorMessage = '后端接口连接异常'
+      }
+      if (errorMessage.includes('timeout')) {
+        errorMessage = '后端接口请求超时'
+      }
+      if (errorMessage.includes('Request failed with status code')) {
+        const code = errorMessage.substr(errorMessage.length - 3)
+        errorMessage = '后端接口' + code || '' + '异常'
+      }
+      showFailToast({ message: errorMessage || '服务器出错！' })
+      return Promise.resolve(false)
+    }
+  },
+  /**
+   * @description: 处理响应错误数据
+   */
+  requestCatchHook: () => false
+}
+
+function createXhr(opt?: Partial<GAxiosOptions>) {
+  return new GAxios({
+    method: 'get',
+    timeout: requestTimeout,
+    headers: {
+      'Content-Type': contentType
+    },
+    // 忽略重复请求
+    ignoreCancelToken: true,
+    // 是否携带token
+    carryToken: true,
+    ...xhtInstance,
+    ...opt
+  })
+}
+
+const request: <T = any, R = undefined>(opt?: GAxiosOptions) => Promise<ResponseResult<T, R>> = opt => createXhr().request(opt)
+
+export default request

package/template-mobile-vant-cli/src/utils/request/typings.ts

@@ -0,0 +1,171 @@
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosInterceptorManager,
+  AxiosInterceptorOptions,
+  AxiosPromise,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+  Method
+} from 'axios'
+
+export interface GAxiosResponse<T = any> extends Omit<AxiosResponse, 'data' | 'config'> {
+  data: T;
+  config: Omit<GAxiosOptions, 'headers'>;
+}
+
+export interface CancelOptions {
+  cancel: (key?: string) => void,
+  cancelAll: () => void;
+  reset: () => void
+}
+
+export interface XhtInstance {
+  /**
+   * @Author      gx12358
+   * @DateTime    2023/1/6
+   * @lastTime    2023/1/6
+   * @description 请求之前处理config
+   */
+  beforeRequestHook?: (config: GAxiosOptions) => GAxiosOptions;
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2023/11/3
+   * @lastTime    2023/11/3
+   * @description 请求之前返回cancel函数
+   */
+  cancelCallBackHook?: ({ cancel, cancelAll, reset }: CancelOptions) => void;
+
+  /**
+   * @description: 处理响应数据
+   */
+  transformResponseHook?: (res: GAxiosResponse, options: Partial<GAxiosOptions>) => any;
+
+  /**
+   * @description: 请求失败处理
+   */
+  requestCatchHook?: (e: Error) => boolean;
+
+  /**
+   * @description: 请求之前的拦截器
+   */
+  requestInterceptors?: (config: GAxiosOptions) => GAxiosOptions;
+
+  /**
+   * @description: 请求之后的拦截器
+   */
+  responseInterceptors?: (res: GAxiosResponse) => GAxiosResponse;
+
+  /**
+   * @description: 请求之前的拦截器错误处理
+   */
+  requestInterceptorsCatch?: (error: AxiosError) => void;
+
+  /**
+   * @description: 请求之后的拦截器错误处理
+   */
+  responseInterceptorsCatch?: (axiosInstance: GAxiosInstance, error: AxiosError) => void;
+}
+
+export interface GAxiosOptions extends Omit<AxiosRequestConfig, 'headers' | 'method'> {
+  headers?: Record<string, any>;
+  method: Method;
+  isMock?: boolean; // 是否是mock
+  retry?: boolean; // 是否是重试接口
+  isReturnNativeResponse?: boolean; // 直接返回response，不作任何处理（包含响应值等基本信息）
+  customize?: boolean; // 直接返回response.data（接口返回值），错误不做统一提示
+  carryToken?: boolean; // 是否携带token
+  prefix?: string; // 接口自定义前缀
+  ignoreCancelToken?: boolean; // 忽略重复请求
+  cancelKey?: string; // 取消请求key（用来需要请求）
+  /**
+   * @Author      gx12358
+   * @DateTime    2023/1/6
+   * @lastTime    2023/1/6
+   * @description 请求之前处理config
+   */
+  beforeRequestHook?: XhtInstance['beforeRequestHook'];
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2023/11/3
+   * @lastTime    2023/11/3
+   * @description 请求之前返回cancel函数
+   */
+  cancelCallBackHook?: XhtInstance['cancelCallBackHook'];
+
+  /**
+   * @description: 处理响应数据
+   */
+  transformResponseHook?: XhtInstance['transformResponseHook'];
+
+  /**
+   * @description: 请求失败处理
+   */
+  requestCatchHook?: XhtInstance['requestCatchHook'];
+
+  /**
+   * @description: 请求之前的拦截器
+   */
+  requestInterceptors?: XhtInstance['requestInterceptors'];
+
+  /**
+   * @description: 请求之后的拦截器
+   */
+  responseInterceptors?: XhtInstance['responseInterceptors'];
+
+  /**
+   * @description: 请求之前的拦截器错误处理
+   */
+  requestInterceptorsCatch?: XhtInstance['requestInterceptorsCatch'];
+
+  /**
+   * @description: 请求之后的拦截器错误处理
+   */
+  responseInterceptorsCatch?: XhtInstance['responseInterceptorsCatch'];
+}
+
+export interface GAxiosInstance extends Omit<AxiosInstance, 'interceptors'> {
+  (config: GAxiosOptions): AxiosPromise<ResponseResult>;
+
+  (url: string, config?: GAxiosOptions): AxiosPromise<ResponseResult>;
+
+  interceptors: {
+    request: Omit<AxiosInterceptorManager<InternalAxiosRequestConfig>, 'use'> & {
+      use<V>(
+        onFulfilled?: ((value: V) => V | Promise<V>) | null,
+        onRejected?: ((error: any) => any) | null,
+        options?: AxiosInterceptorOptions
+      ): number;
+    };
+    response: Omit<AxiosInterceptorManager<AxiosResponse>, 'use'> & {
+      use<V>(
+        onFulfilled?: ((value: V) => V | Promise<V>) | null,
+        onRejected?: ((error: any) => any) | null,
+        options?: AxiosInterceptorOptions
+      ): number;
+    };
+  }
+}
+
+/**
+ * @description: request method
+ */
+export enum RequestEnum {
+  GET = 'GET',
+  POST = 'POST',
+  PUT = 'PUT',
+  DELETE = 'DELETE',
+}
+
+/**
+ * @description:  contentType
+ */
+export enum ContentTypeEnum {
+  // json
+  JSON = 'application/json;charset=UTF-8',
+  // form-data qs
+  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+}