create-bubbles 0.1.18 → 0.1.20

package/template-taro-vue-eslint/src/pages/example/upload/index.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import Taro from '@tarojs/taro'
+import { uploadFile } from '@/api/common/upload'
+import { canvasToFile, file2Md5 } from '@/utils'
+import { isH5 } from '@/utils/env'
+
+async function handleConfirm(canvas: any, data: string) {
+  if (isH5) {
+    const file = await canvasToFile(canvas)
+    const fileMd5 = await file2Md5(file)
+    const data = new FormData()
+    data.append('file', file)
+    data.append('companyId', 'c35bd5e0d5834eccb1cfbf4dd538eb61')
+    data.append('projectId', 'eb42a2b7e680a4124e78951ccf7f1268')
+    data.append('indexDbId', '0')
+    data.append('fileMd5', fileMd5)
+    data.append('fileSize', `${file.size}`)
+    data.append('filename', file.name)
+    try {
+      const res = await uploadFile(data)
+      if (res.code === 200) {
+        // console.log('💦res.data', res.data)
+      }
+      else {
+        Taro.showToast({
+          title: res.message,
+        })
+      }
+    }
+    catch {
+      Taro.showToast({
+        title: '服务异常',
+      })
+    }
+  }
+  else {
+    // 小程序端：用 Taro uploadFile 适配器
+    Taro.getFileSystemManager().getFileInfo({
+      filePath: data,
+      success: async (res) => {
+        const params = {
+          filePath: data,
+          companyId: 'c35bd5e0d5834eccb1cfbf4dd538eb61',
+          projectId: 'eb42a2b7e680a4124e78951ccf7f1268',
+          indexDbId: '0',
+          fileMd5: res.digest,
+          fileSize: res.size,
+          filename: `${res.digest}.png`,
+        }
+        const uploadResStr = await uploadFile(params)
+        const uploadRes = JSON.parse(uploadResStr)
+        if (uploadRes.code === 200) {
+          // console.log('💦uploadRes.data', uploadRes.data)
+        }
+        else {
+          Taro.showToast({
+            title: uploadRes.message,
+          })
+        }
+      },
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="text-red">
+    1112
+    <nut-signature @confirm="handleConfirm" />
+  </div>
+</template>

package/template-taro-vue-eslint/src/pages/index/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

package/template-taro-vue-eslint/src/pages/index/index.module.scss

@@ -0,0 +1,4 @@
+.red {
+  color: #fff;
+  background-color: red;
+}

package/template-taro-vue-eslint/src/pages/index/index.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import Taro from '@tarojs/taro'
+import { uploadFile } from '@/api/common/upload'
+import { canvasToFile, file2Md5 } from '@/utils'
+import { isH5 } from '@/utils/env'
+
+async function handleConfirm(canvas: any, data: string) {
+  if (isH5) {
+    const file = await canvasToFile(canvas)
+    const fileMd5 = await file2Md5(file)
+    const data = new FormData()
+    data.append('file', file)
+    data.append('companyId', 'c35bd5e0d5834eccb1cfbf4dd538eb61')
+    data.append('projectId', 'eb42a2b7e680a4124e78951ccf7f1268')
+    data.append('indexDbId', '0')
+    data.append('fileMd5', fileMd5)
+    data.append('fileSize', `${file.size}`)
+    data.append('filename', file.name)
+    try {
+      const res = await uploadFile(data)
+      if (res.code === 200) {
+        // console.log('💦res.data', res.data)
+      }
+      else {
+        Taro.showToast({
+          title: res.message,
+        })
+      }
+    }
+    catch {
+      Taro.showToast({
+        title: '服务异常',
+      })
+    }
+  }
+  else {
+    // 小程序端：用 Taro uploadFile 适配器
+    Taro.getFileSystemManager().getFileInfo({
+      filePath: data,
+      success: async (res) => {
+        const params = {
+          filePath: data,
+          companyId: 'c35bd5e0d5834eccb1cfbf4dd538eb61',
+          projectId: 'eb42a2b7e680a4124e78951ccf7f1268',
+          indexDbId: '0',
+          fileMd5: res.digest,
+          fileSize: res.size,
+          filename: `${res.digest}.png`,
+        }
+        const uploadResStr = await uploadFile(params)
+        const uploadRes = JSON.parse(uploadResStr)
+        if (uploadRes.code === 200) {
+          // console.log('💦uploadRes.data', uploadRes.data)
+        }
+        else {
+          Taro.showToast({
+            title: uploadRes.message,
+          })
+        }
+      },
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="text-red">
+    <text class="text-green">
+      1112
+    </text>
+
+    <text class="text-purple">
+      1112
+    </text>
+    <nut-signature @confirm="handleConfirm" />
+  </div>
+</template>

package/template-taro-vue-eslint/src/store/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export const store = createPinia()
+store.use(piniaPluginPersistedstate)
+
+export function setupStore(app: App) {
+  app.use(store)
+}

package/template-taro-vue-eslint/src/store/modules/user.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { TaroStorage } from '../taroStorage'
+
+export const useUserStore = defineStore('user', () => {
+  const user = ref('1')
+
+  return {
+    user,
+  }
+}, {
+  persist: {
+    storage: TaroStorage,
+  },
+})

package/template-taro-vue-eslint/src/store/taroStorage.ts

@@ -0,0 +1,7 @@
+import Taro from '@tarojs/taro'
+
+export const TaroStorage = {
+  getItem: (name: string) => Taro.getStorageSync(name),
+  setItem: (name: string, value: string) => Taro.setStorageSync(name, value),
+  removeItem: (name: string) => Taro.removeStorageSync(name),
+}

package/template-taro-vue-eslint/src/styles/index.css

@@ -0,0 +1 @@
+@import './nut-theme.css';

package/template-taro-vue-eslint/src/styles/nut-theme.css

@@ -0,0 +1,4 @@
+:root,
+page {
+  --nut-primary-color: #1677ff;
+}

package/template-taro-vue-eslint/src/utils/env.ts

@@ -0,0 +1,13 @@
+const apiUrl = process.env.TARO_APP_API_URL
+const apiAffix = process.env.TARO_APP_API_AFFIX
+const uploadApiAffix = process.env.TARO_APP_UPLOAD_API_AFFIX
+const weappId = process.env.TARO_APP_ID
+const isH5 = process.env.TARO_ENV === 'h5'
+
+export {
+  apiAffix,
+  apiUrl,
+  isH5,
+  uploadApiAffix,
+  weappId,
+}

package/template-taro-vue-eslint/src/utils/index.ts

@@ -0,0 +1,40 @@
+import Taro from '@tarojs/taro'
+import SparkMD5 from 'spark-md5'
+
+/**
+ * H5 端：canvas 元素转 File
+ */
+export function canvasToFile(canvas, filename = 'image.png', mimeType = 'image/png', quality = 1): Promise<File> {
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => {
+      const file = new File([blob], filename, { type: mimeType })
+      resolve(file)
+    }, mimeType, quality)
+  })
+}
+
+/**
+ * 获取本地文件信息（小程序端）
+ */
+export function getFileInfo(filePath: string): Promise<Taro.getFileInfo.SuccessCallbackResult> {
+  return new Promise((resolve, reject) => {
+    Taro.getFileInfo({
+      filePath,
+      success: resolve,
+      fail: reject,
+    })
+  })
+}
+
+export function file2Md5(file): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      const spark = new SparkMD5.ArrayBuffer()
+      spark.append(e.target?.result)
+      resolve(spark.end())
+    }
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}

package/template-taro-vue-eslint/src/utils/request/core/index.ts

@@ -0,0 +1,425 @@
+import {
+  deepMergeObject,
+  isPlainObject,
+  isReadableStream,
+  tryParseJsonString,
+} from './utils'
+import type {
+  AlovaGlobalCacheAdapter,
+  AlovaOptions,
+  AlovaRequestAdapter,
+  GlobalCacheConfig,
+  StatesExport,
+  StatesHook,
+} from 'alova'
+import { createAlova } from 'alova'
+import type { FetchRequestInit } from 'alova/fetch'
+import adapterFetch from 'alova/fetch'
+
+type MaybePromise<T> = T | Promise<T>
+type HeaderValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | (() => MaybePromise<string | number | boolean | null | undefined>)
+type StatusMatcher<RE> = number | number[] | ((status: number, response: RE) => boolean)
+type CodeMatcher = Array<number | string>
+
+export interface StatusMap<RE = unknown> {
+  success?: StatusMatcher<RE>
+  unAuthorized?: StatusMatcher<RE>
+}
+
+export interface CodeMap {
+  success?: CodeMatcher
+  unAuthorized?: CodeMatcher
+}
+
+export interface RequestMeta {
+  isWrapped?: boolean
+  isTransformResponse?: boolean
+  isShowSuccessMessage?: boolean
+  isShowErrorMessage?: boolean
+}
+
+export interface BaseRequestOption<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+> extends RequestMeta {
+  baseUrl?: string
+  timeout?: number
+  commonHeaders?: () => Record<string, HeaderValue>
+  statusMap?: StatusMap<RE>
+  codeMap?: CodeMap
+  responseCodeKey?: string
+  responseDataKey?: string
+  responseMessageKey?: string
+  cacheFor?: GlobalCacheConfig<any> | null
+  cacheLogger?: boolean
+  statesHook?: StatesHook<SE>
+  successDefaultMessage?: string
+  errorDefaultMessage?: string
+  successMessageFunc?: (message: string) => void
+  errorMessageFunc?: (message: string) => void
+  unAuthorizedResponseFunc?: () => void
+  requestAdapter?: AlovaRequestAdapter<RC, RE, RH>
+  l1Cache?: AlovaGlobalCacheAdapter
+  l2Cache?: AlovaGlobalCacheAdapter
+  storageAdapter?: AlovaGlobalCacheAdapter
+}
+
+export type baseRequestOption<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+> = BaseRequestOption<RC, RE, RH, SE>
+
+export type RequestOption<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+> = BaseRequestOption<RC, RE, RH, SE>
+
+type RequestAlovaGenerics<RC extends object, RE, RH, SE extends StatesExport<any>> = {
+  Responded: unknown
+  Transformed: unknown
+  RequestConfig: RC
+  Response: RE
+  ResponseHeader: RH
+  L1Cache: AlovaGlobalCacheAdapter
+  L2Cache: AlovaGlobalCacheAdapter
+  StatesExport: SE
+}
+
+type ResolvedRequestOption<RC extends object, RE, RH, SE extends StatesExport<any>> = Required<
+  Pick<
+    BaseRequestOption<RC, RE, RH, SE>,
+    | 'baseUrl'
+    | 'statusMap'
+    | 'codeMap'
+    | 'responseCodeKey'
+    | 'responseDataKey'
+    | 'responseMessageKey'
+    | 'isWrapped'
+    | 'isTransformResponse'
+    | 'isShowSuccessMessage'
+    | 'successDefaultMessage'
+    | 'isShowErrorMessage'
+    | 'errorDefaultMessage'
+    | 'cacheLogger'
+  >
+> &
+  BaseRequestOption<RC, RE, RH, SE>
+
+const DEFAULT_SUCCESS_MESSAGE = '操作成功'
+const DEFAULT_ERROR_MESSAGE = '服务异常'
+
+const defaultRequestOption: BaseRequestOption<any, any, any, any> = {
+  baseUrl: '/',
+  timeout: undefined,
+  statusMap: {
+    success: 200,
+    unAuthorized: 401,
+  },
+  codeMap: {
+    success: [200],
+    unAuthorized: [401],
+  },
+  responseCodeKey: 'code',
+  responseDataKey: 'data',
+  responseMessageKey: 'message',
+  isWrapped: true,
+  isTransformResponse: true,
+  isShowSuccessMessage: false,
+  successDefaultMessage: DEFAULT_SUCCESS_MESSAGE,
+  isShowErrorMessage: true,
+  errorDefaultMessage: DEFAULT_ERROR_MESSAGE,
+  cacheFor: null,
+  cacheLogger: true,
+  requestAdapter: adapterFetch() as AlovaRequestAdapter<any, any, any>,
+}
+
+function getMethodMeta(method: unknown): RequestMeta {
+  const methodRecord = method as { meta?: RequestMeta; config?: { meta?: RequestMeta } } | undefined
+  return methodRecord?.config?.meta ?? methodRecord?.meta ?? {}
+}
+
+function getMetaFlag(meta: RequestMeta, key: keyof RequestMeta, fallback: boolean): boolean {
+  const value = meta[key]
+  return typeof value === 'boolean' ? value : fallback
+}
+
+function isMatchedStatus<RE>(
+  status: number,
+  matcher: StatusMatcher<RE> | undefined,
+  response: RE,
+): boolean {
+  if (matcher === undefined) return status >= 200 && status < 300
+
+  if (typeof matcher === 'function') return matcher(status, response)
+
+  return Array.isArray(matcher) ? matcher.includes(status) : matcher === status
+}
+
+function isMatchedCode(code: unknown, matcher: CodeMatcher | undefined): boolean {
+  if (!matcher?.length) return true
+
+  return matcher.some((item) => String(item) === String(code))
+}
+
+function getResponseStatus(response: unknown): number {
+  const responseRecord = response as { status?: unknown; statusCode?: unknown }
+  const status = responseRecord.statusCode ?? responseRecord.status
+  return typeof status === 'number' ? status : Number(status)
+}
+
+function getResponseMessage(data: unknown, messageKey: string, defaultMessage: string): string {
+  if (!isPlainObject(data)) return defaultMessage
+
+  const message = data[messageKey] ?? data.message ?? data.msg
+  if (typeof message === 'string') return message || defaultMessage
+  if (typeof message === 'number') return String(message)
+
+  return defaultMessage
+}
+
+function getResponseField(data: unknown, key: string): unknown {
+  return isPlainObject(data) ? data[key] : undefined
+}
+
+async function parseFetchResponse(response: {
+  status?: number
+  body?: unknown
+  headers?: Headers | Record<string, unknown>
+  clone?: () => Response
+  json?: () => Promise<unknown>
+  text?: () => Promise<string>
+}): Promise<unknown> {
+  if (response.status === 204) return undefined
+
+  const reader = typeof response.clone === 'function' ? response.clone() : response
+  const contentType = getHeaderValue(response.headers, 'content-type')
+
+  if (contentType.includes('application/json') && typeof reader.json === 'function')
+    return reader.json()
+
+  if (contentType.startsWith('text/') && typeof reader.text === 'function')
+    return tryParseJsonString(await reader.text())
+
+  if (typeof reader.json === 'function') {
+    try {
+      return await reader.json()
+    } catch {
+      // Fall through to text parsing.
+    }
+  }
+
+  if (typeof reader.text === 'function') return tryParseJsonString(await reader.text())
+
+  return undefined
+}
+
+function getHeaderValue(
+  headers: Headers | Record<string, unknown> | undefined,
+  key: string,
+): string {
+  if (!headers) return ''
+
+  if (typeof Headers !== 'undefined' && headers instanceof Headers) return headers.get(key) ?? ''
+
+  const headerRecord = headers as Record<string, unknown>
+  const value =
+    headerRecord[key] ?? headerRecord[key.toLowerCase()] ?? headerRecord[key.toUpperCase()]
+  return typeof value === 'string' ? value : ''
+}
+
+async function getResponseData(response: unknown): Promise<unknown> {
+  const responseRecord = response as {
+    body?: unknown
+    data?: unknown
+    json?: () => Promise<unknown>
+    text?: () => Promise<string>
+  }
+
+  if ('data' in responseRecord && !isReadableStream(responseRecord.body))
+    return tryParseJsonString(responseRecord.data)
+
+  if (
+    isReadableStream(responseRecord.body) ||
+    typeof responseRecord.json === 'function' ||
+    typeof responseRecord.text === 'function'
+  ) {
+    return parseFetchResponse(responseRecord)
+  }
+
+  return response
+}
+
+async function resolveHeaderValue(value: HeaderValue): Promise<string | undefined> {
+  const resolved = typeof value === 'function' ? await value() : value
+  if (resolved === null || resolved === undefined) return undefined
+  return String(resolved)
+}
+
+function setHeader(target: unknown, key: string, value: string): void {
+  if (typeof Headers !== 'undefined' && target instanceof Headers) {
+    target.set(key, value)
+    return
+  }
+
+  if (Array.isArray(target)) {
+    target.push([key, value])
+    return
+  }
+
+  ;(target as Record<string, string>)[key] = value
+}
+
+function resolveConfig<RC extends object, RE, RH, SE extends StatesExport<any>>(
+  option: BaseRequestOption<RC, RE, RH, SE>,
+): ResolvedRequestOption<RC, RE, RH, SE> {
+  return deepMergeObject(defaultRequestOption, option) as ResolvedRequestOption<RC, RE, RH, SE>
+}
+
+export function createInstance<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+>(option: RequestOption<RC, RE, RH, SE> = {}) {
+  const config = resolveConfig(option)
+
+  const alovaOptions: AlovaOptions<RequestAlovaGenerics<RC, RE, RH, SE>> = {
+    baseURL: config.baseUrl,
+    timeout: config.timeout,
+    cacheFor: config.cacheFor as GlobalCacheConfig<any>,
+    cacheLogger: config.cacheLogger,
+    statesHook: config.statesHook,
+    requestAdapter: config.requestAdapter!,
+    l1Cache: config.l1Cache,
+    l2Cache: config.l2Cache ?? config.storageAdapter,
+    beforeRequest: async (method) => {
+      const methodConfig = method.config as { headers?: unknown }
+      const headers = methodConfig.headers ?? {}
+      methodConfig.headers = headers
+
+      for (const [key, value] of Object.entries(config.commonHeaders?.() ?? {})) {
+        const resolvedValue = await resolveHeaderValue(value)
+        if (resolvedValue !== undefined) setHeader(headers, key, resolvedValue)
+      }
+    },
+    responded: {
+      onSuccess: async (response, method) => {
+        const meta = getMethodMeta(method)
+        const shouldTransform = getMetaFlag(meta, 'isTransformResponse', config.isTransformResponse)
+        const showSuccess = getMetaFlag(meta, 'isShowSuccessMessage', config.isShowSuccessMessage)
+        const showError = getMetaFlag(meta, 'isShowErrorMessage', config.isShowErrorMessage)
+        const isWrapped = getMetaFlag(meta, 'isWrapped', config.isWrapped)
+
+        if (!shouldTransform) return response
+
+        const status = getResponseStatus(response)
+        const data = await getResponseData(response)
+
+        if (!isMatchedStatus(status, config.statusMap.success, response)) {
+          if (isMatchedStatus(status, config.statusMap.unAuthorized, response))
+            config.unAuthorizedResponseFunc?.()
+
+          if (showError) {
+            config.errorMessageFunc?.(
+              getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage),
+            )
+          }
+          return Promise.reject(response)
+        }
+
+        if (!isWrapped) {
+          if (showSuccess) config.successMessageFunc?.(config.successDefaultMessage)
+          return data
+        }
+
+        const code = getResponseField(data, config.responseCodeKey)
+        const responseData = getResponseField(data, config.responseDataKey)
+        const responseMessage = getResponseMessage(
+          data,
+          config.responseMessageKey,
+          config.successDefaultMessage,
+        )
+
+        if (!isMatchedCode(code, config.codeMap.success)) {
+          if (isMatchedCode(code, config.codeMap.unAuthorized)) config.unAuthorizedResponseFunc?.()
+
+          if (showError) {
+            config.errorMessageFunc?.(
+              getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage),
+            )
+          }
+          return Promise.reject(response)
+        }
+
+        if (showSuccess) config.successMessageFunc?.(responseMessage)
+
+        return responseData
+      },
+      onError: (error, method) => {
+        const meta = getMethodMeta(method)
+        const showError = getMetaFlag(meta, 'isShowErrorMessage', config.isShowErrorMessage)
+
+        if (showError) {
+          config.errorMessageFunc?.(
+            error instanceof Error ? error.message : config.errorDefaultMessage,
+          )
+        }
+        return Promise.reject(error)
+      },
+    },
+  }
+
+  return createAlova(alovaOptions)
+}
+
+export type RequestInstance<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+> = ReturnType<typeof createInstance<RC, RE, RH, SE>>
+
+export type DualCallInstance<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+> = RequestInstance<RC, RE, RH, SE> &
+  ((option?: RequestOption<RC, RE, RH, SE>) => RequestInstance<RC, RE, RH, SE>)
+
+export function createDualCallInstance<
+  RC extends object = FetchRequestInit,
+  RE = Response,
+  RH = Headers,
+  SE extends StatesExport<any> = StatesExport<any>,
+>(baseConfig: BaseRequestOption<RC, RE, RH, SE>): DualCallInstance<RC, RE, RH, SE> {
+  const defaultInstance = createInstance(baseConfig)
+  const dualInstance = ((option?: RequestOption<RC, RE, RH, SE>) => {
+    if (!option) return defaultInstance
+    return createInstance(deepMergeObject(baseConfig, option))
+  }) as DualCallInstance<RC, RE, RH, SE>
+
+  Object.assign(dualInstance, defaultInstance)
+  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
+}