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

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

@@ -5,8 +5,10 @@
  * @returns {string}
  */
 export default function getPageTitle(title: string, pageTitle: string) {
-  let newTitles: any = []
-  if (pageTitle) newTitles.push(pageTitle)
-  if (title) newTitles.push(title)
+  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

@@ -1,12 +1,15 @@
-import type { AxiosResponse, AxiosError } from 'axios'
+import type { AxiosError } from 'axios'
 import axios from 'axios'
-import { deepCopy } from '@/utils/util'
+import { cloneDeep } from 'lodash-es'
 import qs from 'qs'
 import { isFunction } from '@gx-design-vue/pro-utils'
-import type { GAxiosInstance, GAxiosOptions } from './typings'
+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
@@ -19,7 +22,7 @@ export class GAxios {
 
   constructor(options: GAxiosOptions) {
     this.options = options
-    this.axiosInstance = axios.create(options)
+    this.axiosInstance = axios.create(options) as GAxiosInstance
     this.setupInterceptors()
   }
 
@@ -34,16 +37,18 @@ export class GAxios {
       responseInterceptorsCatch
     } = this.options
 
-    const axiosCanceler = new AxiosCanceler()
-
-    this.axiosInstance.interceptors.request.use((config: GAxiosOptions) => {
-      const { ignoreCancelToken } = config
-      const ignoreCancel =
-        ignoreCancelToken !== undefined
-          ? ignoreCancelToken
-          : this.options?.ignoreCancelToken
+    const axiosCanceler = new AxiosCanceler(this.options.ignoreCancelToken)
 
-      !ignoreCancel && axiosCanceler.addPending(config)
+    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)
       }
@@ -51,12 +56,13 @@ export class GAxios {
     }, undefined)
 
     // Request interceptor error capture
-    requestInterceptorsCatch &&
-    isFunction(requestInterceptorsCatch) &&
-    this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch)
+    requestInterceptorsCatch && isFunction(requestInterceptorsCatch) && this.axiosInstance.interceptors.request.use(
+      undefined,
+      requestInterceptorsCatch
+    )
 
     // Response result interceptor processing
-    this.axiosInstance.interceptors.response.use((res: AxiosResponse) => {
+    this.axiosInstance.interceptors.response.use((res: GAxiosResponse) => {
       res && axiosCanceler.removePending(res.config)
       if (responseInterceptors && isFunction(responseInterceptors)) {
         return responseInterceptors(res)
@@ -65,11 +71,14 @@ export class GAxios {
     }, undefined)
 
     // Response result interceptor error capture
-    responseInterceptorsCatch &&
-    isFunction(responseInterceptorsCatch) &&
-    this.axiosInstance.interceptors.response.use(undefined, (error) => {
-      return responseInterceptorsCatch(this.axiosInstance, error)
-    })
+    responseInterceptorsCatch && isFunction(responseInterceptorsCatch) && this.axiosInstance.interceptors.response.use(
+      undefined,
+      (error) => {
+        axiosCanceler.removePending(error.config)
+
+        return responseInterceptorsCatch(this.axiosInstance, error)
+      }
+    )
   }
 
   // support form-data
@@ -77,11 +86,10 @@ export class GAxios {
     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
-    ) {
+    if (contentType !== ContentTypeEnum.FORM_URLENCODED || !Reflect.has(
+      config,
+      'data'
+    ) || config.method?.toUpperCase() === RequestEnum.GET) {
       return config
     }
 
@@ -92,7 +100,7 @@ export class GAxios {
   }
 
   request<T = ResponseResult | boolean>(config: GAxiosOptions): Promise<T> {
-    let conf: GAxiosOptions = deepCopy(config)
+    let conf: GAxiosOptions = cloneDeep(config)
 
     const opt: GAxiosOptions = Object.assign({}, this.options, conf)
 
@@ -105,8 +113,8 @@ export class GAxios {
 
     return new Promise((resolve) => {
       this.axiosInstance
-        .request<any, AxiosResponse>(conf)
-        .then((res: AxiosResponse) => {
+        .request<any, GAxiosResponse>(conf)
+        .then((res: GAxiosResponse) => {
           if (transformResponseHook && isFunction(transformResponseHook)) {
             try {
               const ret = transformResponseHook(res, config)

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

@@ -1,53 +1,62 @@
-import type { AxiosRequestConfig, Canceler } from 'axios'
+import type { Canceler } from 'axios'
 import axios from 'axios'
 import { isFunction } from '@gx-design-vue/pro-utils'
+import type { GAxiosOptions } from './typings'
 
-// Used to store the identification and cancellation function of each request
-let pendingMap = new Map<string, Canceler>()
-
-export const getPendingUrl = (config: AxiosRequestConfig) => [ config.method, config.url ].join('&')
+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: AxiosRequestConfig) {
-    this.removePending(config)
+  addPending(config: GAxiosOptions) {
+    !this.ignoreCancelToken && this.removePending(config)
+
     const url = getPendingUrl(config)
-    config.cancelToken =
-      config.cancelToken ||
-      new axios.CancelToken((cancel) => {
-        if (!pendingMap.has(url)) {
-          // If there is no current request in pending, add it
-          pendingMap.set(url, cancel)
-        }
-      })
+    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() {
-    pendingMap.forEach((cancel) => {
+    this.pendingMap.forEach((cancel) => {
       cancel && isFunction(cancel) && cancel()
     })
-    pendingMap.clear()
+    this.pendingMap.clear()
   }
 
   /**
    * Removal request
    * @param {Object} config
    */
-  removePending(config: AxiosRequestConfig) {
-    const url = getPendingUrl(config)
+  removePending(config: GAxiosOptions, key?: string) {
+    const url = getPendingUrl(config, key)
 
-    if (pendingMap.has(url)) {
+    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 = pendingMap.get(url)
+      const cancel = this.pendingMap.get(url)
       cancel && cancel(url)
-      pendingMap.delete(url)
+      this.pendingMap.delete(url)
     }
   }
 
@@ -55,6 +64,6 @@ export class AxiosCanceler {
    * @description: reset
    */
   reset(): void {
-    pendingMap = new Map<string, Canceler>()
+    this.pendingMap = new Map<string, Canceler>()
   }
 }

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

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

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

@@ -6,9 +6,8 @@ import { tansParams } from '@/utils/util'
 import { checkURL } from '@/utils/validate'
 import { isBoolean } from '@gx-design-vue/pro-utils'
 import { GAxios } from './XHR'
-import type { XhtInstance } from './typings'
+import type { GAxiosOptions, XhtInstance } from './typings'
 import { RequestEnum } from './typings'
-import type { GAxiosOptions } from './typings'
 import { handleCode } from './checkStatus'
 
 const { requestPrefix, successCode, requestTimeout, tokenName, contentType } = settings
@@ -122,7 +121,7 @@ const xhtInstance: XhtInstance = {
   requestCatchHook: () => false
 }
 
-function createXhr(opt ?: Partial<GAxiosOptions>) {
+function createXhr(opt?: Partial<GAxiosOptions>) {
   return new GAxios({
     method: 'get',
     timeout: requestTimeout,
@@ -138,6 +137,6 @@ function createXhr(opt ?: Partial<GAxiosOptions>) {
   })
 }
 
-const request: (opt?: GAxiosOptions) => Promise<ResponseResult> = (opt) => createXhr().request(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

@@ -1,6 +1,27 @@
-import type { AxiosRequestConfig, AxiosResponse, Axios, AxiosPromise } from 'axios'
+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 type XhtInstance = {
+export interface XhtInstance {
   /**
    * @Author      gx12358
    * @DateTime    2023/1/6
@@ -9,10 +30,18 @@ export type XhtInstance = {
    */
   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: AxiosResponse, options: GAxiosOptions) => any;
+  transformResponseHook?: (res: GAxiosResponse, options: Partial<GAxiosOptions>) => any;
 
   /**
    * @description: 请求失败处理
@@ -27,69 +56,98 @@ export type XhtInstance = {
   /**
    * @description: 请求之后的拦截器
    */
-  responseInterceptors?: (res: AxiosResponse) => AxiosResponse;
+  responseInterceptors?: (res: GAxiosResponse) => GAxiosResponse;
 
   /**
    * @description: 请求之前的拦截器错误处理
    */
-  requestInterceptorsCatch?: (error: Error) => void;
+  requestInterceptorsCatch?: (error: AxiosError) => void;
 
   /**
    * @description: 请求之后的拦截器错误处理
    */
-  responseInterceptorsCatch?: (axiosInstance: GAxiosInstance, error: Error) => void;
+  responseInterceptorsCatch?: (axiosInstance: GAxiosInstance, error: AxiosError) => void;
 }
 
-export interface GAxiosOptions extends AxiosRequestConfig {
-  headers?: RecordType;
+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?: (config: GAxiosOptions) => GAxiosOptions;
+  beforeRequestHook?: XhtInstance['beforeRequestHook'];
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2023/11/3
+   * @lastTime    2023/11/3
+   * @description 请求之前返回cancel函数
+   */
+  cancelCallBackHook?: XhtInstance['cancelCallBackHook'];
 
   /**
    * @description: 处理响应数据
    */
-  transformResponseHook?: (res: AxiosResponse, options: GAxiosOptions) => any;
+  transformResponseHook?: XhtInstance['transformResponseHook'];
 
   /**
    * @description: 请求失败处理
    */
-  requestCatchHook?: (e: Error) => boolean;
+  requestCatchHook?: XhtInstance['requestCatchHook'];
 
   /**
    * @description: 请求之前的拦截器
    */
-  requestInterceptors?: (config: GAxiosOptions) => GAxiosOptions;
+  requestInterceptors?: XhtInstance['requestInterceptors'];
 
   /**
    * @description: 请求之后的拦截器
    */
-  responseInterceptors?: (res: AxiosResponse) => AxiosResponse;
+  responseInterceptors?: XhtInstance['responseInterceptors'];
 
   /**
    * @description: 请求之前的拦截器错误处理
    */
-  requestInterceptorsCatch?: (error: Error) => void;
+  requestInterceptorsCatch?: XhtInstance['requestInterceptorsCatch'];
 
   /**
    * @description: 请求之后的拦截器错误处理
    */
-  responseInterceptorsCatch?: (axiosInstance: GAxiosInstance, error: Error) => void;
+  responseInterceptorsCatch?: XhtInstance['responseInterceptorsCatch'];
 }
 
-export interface GAxiosInstance extends Axios {
+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;
+    };
+  }
 }
 
 /**
@@ -111,4 +169,3 @@ export enum ContentTypeEnum {
   // form-data qs
   FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
 }
-

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

@@ -1,15 +1,18 @@
 import dayjs from 'dayjs'
-import { isPro } from '@/utils/env'
-import { Decrypt, Encrypt } from '@/utils/cryptoJS'
+import { isPro, typeViteEnv } from '@/utils/env'
+import { Decrypt, Encrypt } from '@/utils/crypto'
 import { isJSONStr } from '@/utils/validate'
 import { isObject } from '@gx-design-vue/pro-utils'
 
+export type StorageKey = 'localStorage' | 'sessionStorage' | 'cookie'
+
 function isEncryption(status: boolean) {
   return isPro() ? status : false
 }
 
 function handleStorageValue(value: string) {
-  if (isJSONStr(value)) return JSON.parse(value)
+  if (isJSONStr(value))
+    return JSON.parse(value)
   return value
 }
 
@@ -21,10 +24,9 @@ function handleStorageValue(value: string) {
  */
 export function getStorageKey(key: string, originKey?: boolean) {
   const { pkg } = __APP_INFO__
-  const { VITE_USE_MODE, VITE_APP_ENV } = import.meta.env
-  return originKey ? key : `live_${pkg.version}_${VITE_APP_ENV === 'dev'
+  return originKey ? key : `${pkg.name}_${pkg.version}_${typeViteEnv('VITE_APP_ENV') === 'dev'
     ? 'development'
-    : VITE_USE_MODE}_${key}`
+    : typeViteEnv('VITE_USE_MODE')}_${key}`
 }
 
 /**
@@ -36,15 +38,16 @@ export function getStorageKey(key: string, originKey?: boolean) {
 export function getStorage({
   key,
   encryption = true,
-  type = 'local',
+  type = 'localStorage',
   originKey
-}: { key: string, encryption?: boolean, type?: string, originKey?: boolean }) {
-  const storageValue = type === 'local' ?
-    localStorage.getItem(getStorageKey(key, originKey))
-    : sessionStorage.getItem(getStorageKey(key, originKey))
-  const result: string | LocalResult = storageValue ?
-    isEncryption(encryption) ? Decrypt(storageValue) : handleStorageValue(storageValue)
-    : ''
+}: { key: string, encryption?: boolean, type?: StorageKey, originKey?: boolean }) {
+  const storageValue = type === 'localStorage'
+    ? localStorage.getItem(getStorageKey(key, originKey)) : type === 'sessionStorage'
+      ? sessionStorage.getItem(getStorageKey(key, originKey))
+      : getCookie(
+        getStorageKey(key, originKey))
+  const result: string | LocalResult = storageValue
+    ? isEncryption(encryption) ? Decrypt(storageValue) : handleStorageValue(storageValue) : ''
   if (result && isObject(result)) {
     if (result.expired) {
       const expiredStatus = dayjs().diff(dayjs(result.time)) >= result.expired
@@ -83,8 +86,10 @@ export function setStorage({
     time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     expired: expired || 0
   }
-  const storageValue = isEncryption(encryption) ? Encrypt(JSON.stringify(result)) : JSON.stringify(result)
-  if (type === 'local') localStorage.setItem(getStorageKey(key, originKey), storageValue)
+  const storageValue = isEncryption(encryption) ? Encrypt(JSON.stringify(result)) : JSON.stringify(
+    result)
+  if (type === 'local')
+    localStorage.setItem(getStorageKey(key, originKey), storageValue)
   sessionStorage.setItem(getStorageKey(key, originKey), storageValue)
 }
 
@@ -95,7 +100,8 @@ export function setStorage({
  * @description 删除Storage
  */
 export function removeStorage(key: string, type = 'local', originKey?: boolean) {
-  if (type === 'local') localStorage.removeItem(getStorageKey(key, originKey))
+  if (type === 'local')
+    localStorage.removeItem(getStorageKey(key, originKey))
   sessionStorage.removeItem(getStorageKey(key, originKey))
 }
 
@@ -130,7 +136,8 @@ function getCookies(cname: string) {
 function GetCookieDomain() {
   let host = location.hostname
   const ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
-  if (ip.test(host) === true || host === 'localhost') return host
+  if (ip.test(host) === true || host === 'localhost')
+    return host
   const regex = /([^]*).*/
   const match = host.match(regex)
   if (typeof match !== 'undefined' && match !== null) {

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

@@ -1,7 +1,3 @@
-export function deepCopy(data) {
-  return JSON.parse(JSON.stringify(data))
-}
-
 /**
  * @Author      gx12358
  * @DateTime    2021/11/3
@@ -29,4 +25,3 @@ export function tansParams(params) {
   }
   return result
 }
-