feat: add methods type

src/api/album.ts

@@ -21,7 +21,12 @@ export const init = (params: Type.Object = {}) => fetch(API.init, params, 'post'
 
 export const getPicList = (params: Type.Object = {}) => fetch(API.getList, params)
 
-export const getToken = (params: Type.Object = {}) => fetch(API.getToken, params)
+type TGetTokenParam = {
+  bucket: string,
+  name: string
+}
+
+export const getToken = (params: TGetTokenParam) => fetch<string>(API.getToken, params)
 
 export const deletePic = (params: Type.Object = {}) => fetch(API.delOne, params, 'post')
 

src/api/material.ts

@@ -43,8 +43,23 @@ type TGetListResult = TCommResResult<{
 // 获取素材列表：
 export const getList = (params: TGetListParam) => fetch<TGetListResult>('design/material', params)
 
+export type TGetFontParam = {
+  pageSize?: number
+}
+
+/** 字体item数据 */
+export type TGetFontItemData = {
+  id: number
+  alias: string
+  oid: string
+  value: string
+  preview: string
+  woff: string
+  lang: string
+}
+
 // 获取字体
-export const getFonts = (params: Type.Object = {}) => fetch('design/fonts', params)
+export const getFonts = (params: TGetFontParam = {}) => fetch<TPageRequestResult<TGetFontItemData[]>>('design/fonts', params)
 export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('design/font_sub', params, 'get', {}, extra)
 
 // 图库列表

src/common/methods/DesignFeatures/setComponents.ts

@@ -2,19 +2,19 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-22 15:06:14
  * @Description: 设置图片类型元素
- * @LastEditors: ShawnPhang
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2022-03-07 14:57:51
+ * @LastEditTime: 2024-03-02 11:50:00
  */
 import store from '@/store'
-export default async function setCompData(item: any) {
+export default async function setCompData(item: TCommonItemData[] | string) {
-  const group = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
+  const group: TCommonItemData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
-  let parent: any = {}
+  let parent: Partial<TCommonItemData> = {}
   Array.isArray(group) &&
-    group.forEach((element: any) => {
+    group.forEach((element) => {
       element.type === 'w-group' && (parent = element)
     })
   const { width: screenWidth, height: screenHeight } = store.getters.dPage
-  const { width: imgWidth, height: imgHeight } = parent
+  const { width: imgWidth = 0, height: imgHeight = 0 } = parent
   let ratio = 1
   // 先限制在画布内，保证不超过边界
   if (imgWidth > screenWidth || imgHeight > screenHeight) {
@@ -23,7 +23,7 @@ export default async function setCompData(item: any) {
   // 根据画布缩放比例再进行一次调整
   if (ratio < 1) {
     ratio *= store.getters.dZoom / 100
-    group.forEach((element: any) => {
+    group.forEach((element) => {
       element.fontSize && (element.fontSize *= ratio)
       element.width *= ratio
       element.height *= ratio

src/common/methods/QiNiu.ts

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-29 20:35:31
  * @Description: 七牛上传方法
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-10-05 16:11:55
+ * @LastEditTime: 2024-03-02 11:50:00
  */
 import dayjs from 'dayjs'
 import api from '@/api/album'
@@ -15,13 +15,13 @@ interface Options {
 }
 
 export default {
-  upload: async (file: File, options: Options, cb?: Function) => {
+  upload: async (file: File, options: Options, cb?: IQiniuSubscribeCb) => {
-    const win: any = window
+    const win = window
     let name = ''
     const suffix = file.type.split('/')[1] || 'png' // 文件后缀
     if (!options.fullPath) {
       // const DT: any = await exifGetTime(file) // 照片时间
-      const DT: any = new Date()
+      const DT = new Date()
       const YM = `${dayjs(DT).format('YYYY')}/${dayjs(DT).format('MM')}/` // 文件时间分类
       const keyName = YM + new Date(DT).getTime()
       const prePath = options.prePath ? options.prePath + '/' : ''
@@ -32,15 +32,15 @@ export default {
       useCdnDomain: true, // 使用cdn加速
     }
     const observable = win.qiniu.upload(file, name, token, {}, exOption)
-    return new Promise((resolve: Function, reject: Function) => {
+    return new Promise((resolve: IQiniuSubscribeCb, reject: (err: string) => void) => {
       observable.subscribe({
-        next: (result: any) => {
+        next: (result) => {
-          cb && cb(result) // result.total.percent -> 展示进度
+          cb?.(result) // result.total.percent -> 展示进度
         },
-        error: (e: any) => {
+        error: (e) => {
           reject(e)
         },
-        complete: (result: any) => {
+        complete: (result) => {
           resolve(result)
           // cb && cb(result) // result.total.percent -> 展示进度
         },

src/common/methods/addMouseWheel.ts

@@ -2,12 +2,19 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-25 13:43:07
  * @Description: 添加滚动监听
- * @LastEditors: ShawnPhang
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2022-03-25 14:32:19
+ * @LastEditTime: 2024-03-02 11:50:00
  */
 import store from '@/store'
-export default function(el: Element | string, cb: Function, altLimit: boolean = true) {
+
+type TAddEventCb = (e: Event) => void
+type TAddEventObj = {
+  attachEvent?: HTMLElement["addEventListener"]
+} & HTMLElement
+
+export default function(el: HTMLElement | string, cb: Function, altLimit: boolean = true) {
   const box = typeof el === 'string' ? document.getElementById(el) : el
+  if (!box) return;
   addEvent(box, 'mousewheel', (e: any) => {
     const ev = e || window.event
     const down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0
@@ -16,10 +23,7 @@ export default function(el: Element | string, cb: Function, altLimit: boolean =
     // } else {
     //   console.log('鼠标滚轮向上++++++++++')
     // }
-    if (altLimit && store.getters.dAltDown) {
+    if ((altLimit && store.getters.dAltDown) || !altLimit) {
-      ev.preventDefault()
-      cb(down)
-    } else if (!altLimit) {
       ev.preventDefault()
       cb(down)
     }
@@ -27,7 +31,7 @@ export default function(el: Element | string, cb: Function, altLimit: boolean =
   })
 }
 
-function addEvent(obj: any, xEvent: string, fn: Function) {
+function addEvent(obj: TAddEventObj, xEvent: keyof HTMLElementEventMap, fn: TAddEventCb) {
   if (obj.attachEvent) {
     obj.attachEvent('on' + xEvent, fn)
   } else {

src/common/methods/confirm.ts

@@ -2,11 +2,11 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-03 16:30:18
  * @Description: Type: success / info / warning / error
- * @LastEditors: ShawnPhang
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2022-02-03 16:43:01
+ * @LastEditTime: 2024-03-02 11:50:00
  */
-import { ElMessageBox } from 'element-plus'
+import { ElMessageBox, messageType } from 'element-plus'
-export default (title: string = '提示', message: string = '', type: any = 'success') => {
+export default (title: string = '提示', message: string = '', type: messageType = 'success') => {
   return new Promise((resolve: Function) => {
     ElMessageBox.confirm(message, title, {
       confirmButtonText: '确定',

src/common/methods/download/download.ts

@@ -2,11 +2,14 @@
  * @Author: ShawnPhang
  * @Date: 2021-09-30 15:52:59
  * @Description: 下载远程图片
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-07-12 16:54:51
+ * @LastEditTime: 2024-03-02 11:50:00
  */
-export default (src: string, cb: Function) => {
+
-  return new Promise((resolve: any) => {
+type TCallBack = (progress: number, xhr: XMLHttpRequest) => void
+
+export default (src: string, cb: TCallBack) => {
+  return new Promise<void>((resolve) => {
     // const image = new Image()
     // // 解决跨域 Canvas 污染问题
     // image.setAttribute('crossOrigin', 'anonymous')
@@ -32,10 +35,10 @@ export default (src: string, cb: Function) => {
 
     fetchImageDataFromUrl(src, (progress: number, xhr: XMLHttpRequest) => {
       cb(progress, xhr)
-    }).then((res: any) => {
+    }).then((res) => {
       const reader = new FileReader()
       reader.onload = function (event) {
-        const txt: any = event?.target?.result
+        const txt = event?.target?.result as string
         // image.src = txt
         const a = document.createElement('a')
         const mE = new MouseEvent('click')
@@ -55,17 +58,17 @@ export default (src: string, cb: Function) => {
   })
 }
 
-function fetchImageDataFromUrl(url: string, cb: Function) {
+function fetchImageDataFromUrl(url: string, cb: TCallBack) {
-  return new Promise((resolve) => {
+  return new Promise<null>((resolve) => {
     const xhr = new XMLHttpRequest()
-    let totalLength: any = ''
+    let totalLength: string | number = ''
     xhr.open('GET', url)
     xhr.responseType = 'blob'
     xhr.onreadystatechange = function () {
       totalLength = Number(xhr.getResponseHeader('content-length')) // 'cache-control'
     }
     xhr.onprogress = function (event) {
-      cb((event.loaded / totalLength) * 100, xhr)
+      cb((event.loaded / Number(totalLength)) * 100, xhr)
     }
     xhr.onload = function () {
       if (xhr.status < 400) resolve(this.response)

src/common/methods/fonts/index.ts

@@ -6,11 +6,14 @@
  * @LastEditTime: 2023-10-13 01:30:33
  */
 // import { isSupportFontFamily, blob2Base64 } from './utils'
-import { getFonts } from '@/api/material'
+import { TGetFontItemData, getFonts } from '@/api/material'
 
 const nowVersion = '2' // 当前字体文件版本更新，将刷新前端缓存
 
-const fontList: any = []
+/** 字体item类型 */
+export type TFontItemData = { url: string } & Omit<TGetFontItemData, "woff">
+
+const fontList: TFontItemData[] = []
 // const download: any = {}
 export const useFontStore = {
   list: fontList,
@@ -18,7 +21,7 @@ export const useFontStore = {
   async init() {
     this.list = []
     localStorage.getItem('FONTS_VERSION') !== nowVersion && localStorage.removeItem('FONTS')
-    const localFonts: any = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : []
+    const localFonts: TFontItemData[] = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : []
     if (localFonts.length > 0) {
       this.list.push(...localFonts)
     }
@@ -26,7 +29,7 @@ export const useFontStore = {
     if (this.list.length === 0) {
       const res = await getFonts({ pageSize: 400 })
       this.list.unshift(
-        ...res.list.map((x: any) => {
+        ...res.list.map((x) => {
           const { id, alias, oid, value, preview, woff, lang } = x
           return { id, oid, value, preview, alias, url: woff, lang }
         }),

src/common/methods/fonts/utils.ts

@@ -70,27 +70,27 @@ export function generateFontStyle(name: string, url: string): HTMLStyleElement {
 }
 
 // 找到使用到的所有字体
-export function filterSkyFonts() {
+// export function filterSkyFonts() {
-  const fonts: string[] = []
+//   const fonts: string[] = []
-  // const textClouds = sky.state.clouds.filter(
+//   // const textClouds = sky.state.clouds.filter(
-  //   (cloud) => cloud.type === CLOUD_TYPE.text,
+//   //   (cloud) => cloud.type === CLOUD_TYPE.text,
-  // );
+//   // );
-  const textClouds: any = []
+//   const textClouds: any = []
 
-  ;(textClouds as unknown as CloudText[]).forEach((cloud) => {
+//   ;(textClouds as unknown as CloudText[]).forEach((cloud) => {
-    // 找到文字组件字体
+//     // 找到文字组件字体
-    if (cloud.fontFamily && !fonts.includes(cloud.fontFamily)) {
+//     if (cloud.fontFamily && !fonts.includes(cloud.fontFamily)) {
-      fonts.push(cloud.fontFamily)
+//       fonts.push(cloud.fontFamily)
-    }
+//     }
-    // 找到文字组件子级字体
+//     // 找到文字组件子级字体
-    cloud.texts.forEach((text) => {
+//     cloud.texts.forEach((text) => {
-      if (text.fontFamily && !fonts.includes(text.fontFamily)) {
+//       if (text.fontFamily && !fonts.includes(text.fontFamily)) {
-        fonts.push(text.fontFamily)
+//         fonts.push(text.fontFamily)
-      }
+//       }
-    })
+//     })
-  })
+//   })
-  return fonts
+//   return fonts
-}
+// }
 
 export function base642Blob(b64Data: string, contentType = '', sliceSize = 512) {
   const byteCharacters = atob(b64Data)

src/common/methods/handleTransform.ts

@@ -2,17 +2,17 @@
  * @Author: ShawnPhang
  * @Date: 2022-01-31 10:45:53
  * @Description: 用于修改transform字符串
- * @LastEditors: ShawnPhang
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2022-02-18 16:54:13
+ * @LastEditTime: 2024-03-02 11:50:00
  */
-export function getTransformAttribute(target: any, attr: string = '') {
+export function getTransformAttribute(target: HTMLElement, attr: string = '') {
   const tf = target.style.transform
   const iof = tf.indexOf(attr)
   const half = tf.substring(iof + attr.length + 1)
   return half.substring(0, half.indexOf(')'))
 }
 
-export function setTransformAttribute(target: any, attr: string, value: string | number = 0) {
+export function setTransformAttribute(target: HTMLElement, attr: string, value: string | number = 0) {
   const tf = target?.style.transform
   if (!tf) {
     return
@@ -24,10 +24,10 @@ export function setTransformAttribute(target: any, attr: string, value: string |
   target.style.transform = FRONT + value + END
 }
 
-export function getMatrix(params: any) {
+export function getMatrix(params: Record<string, any>) {
   const result = []
   for (const key in params) {
-    if (Object.prototype.hasOwnProperty.call(params, key)) {
+    if (Object.hasOwn(params, key)) {
       result.push(params[key])
     }
   }

src/common/methods/target.ts

@@ -8,17 +8,17 @@
 // TODO: Group类型比较特殊，所以需要全量循环并判断是否为group
 const arr = ['w-text', 'w-image', 'w-svg', 'w-group', 'w-qrcode']
 
-export function getTarget(currentTarget: any) {
+export function getTarget(currentTarget: HTMLElement) {
-  let collector: any[] = []
+  let collector: string[] = []
-  let groupTarger: any = null
+  let groupTarger: HTMLElement | null = null
-  let saveTarger: any = null
+  let saveTarger: HTMLElement | null = null
   return new Promise((resolve) => {
-    function findTarget(target: any) {
+    function findTarget(target: HTMLElement | null) {
       if (!target || target.id === 'page-design') {
         if (collector.length > 1) {
           resolve(groupTarger)
         } else {
-          resolve(saveTarger || currentTarget)
+          resolve(saveTarger ?? currentTarget)
         }
         return
       }
@@ -37,12 +37,12 @@ export function getTarget(currentTarget: any) {
   })
 }
 
-export function getFinalTarget(currentTarget: any) {
+export function getFinalTarget(currentTarget: HTMLElement) {
-  let collector: any[] = []
+  let collector: string[] = []
-  let groupTarger: any = null
+  let groupTarger: HTMLElement | null = null
-  let saveTarger: any = null
+  let saveTarger: HTMLElement | null = null
   return new Promise((resolve) => {
-    function findTarget(target: any) {
+    function findTarget(target: HTMLElement | null) {
       if (!target || target.id === 'page-design') {
         resolve(target)
         return

src/types/global.d.ts

@@ -7,13 +7,48 @@ type TCommResResult<T> = {
   result: T
 }
 
-
-
 type TCommonItemData = {
+  type: string
   fontFamily?: string
   color?: string
   fontSize: number
-  width?: number
+  width: number
+  height: number
+  left: number
+  top: number
   fontWeight: number
   value: TItem2DataParam
 }
+
+/** 分页查询公共返回 */
+type TPageRequestResult<T> = {
+  list: T
+  total: number
+}
+
+interface HTMLElementEventMap {
+  "mousewheel": MouseEvent
+}
+
+interface IQiniuSubscribeCb {
+  (result: { total: { percent: number }}): void
+}
+
+interface Window {
+  qiniu: {
+    upload: (
+      file: File,
+      name: string,
+      token: string,
+      exObj: Record<string, any>,
+      exOption: {
+        useCdnDomain: boolean
+      }) => {
+        subscribe: (cb: {
+          next: IQiniuSubscribeCb
+          error: (err: string) => void
+          complete: IQiniuSubscribeCb
+        }) => void
+      }
+  }
+}