Merge pull request #58 from JeremyYu-cn/feat-upgrade-vue3

Feat: add types for common method files.

package.json

@@ -39,8 +39,8 @@
   "devDependencies": {
     "@types/node": "^16.3.1",
     "@types/throttle-debounce": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
-    "@typescript-eslint/parser": "^4.28.3",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-vue": "1.9.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
@@ -57,7 +57,7 @@
     "eslint-config-alloy": "~4.1.0",
     "eslint-plugin-vue": "^7.12.1",
     "less": "^4.1.1",
-    "typescript": "^4.4.3",
+    "typescript": "^5.3.3",
     "unplugin-element-plus": "^0.7.1",
     "vite": "2.6.4",
     "vite-plugin-compression": "^0.3.0",

src/api/material.ts

@@ -11,8 +11,10 @@ import fetch from '@/utils/axios'
 export const getKinds = (params: Type.Object = {}) => fetch('design/cate', params)
 
 type TGetListParam = {
-  cate: number
-  pageSize: number
+  first_id?: number
+  second_id?: string
+  cate?: number
+  pageSize?: number
 }
 
 export type TGetListData = {

src/assets/data/AlignListData.ts

@@ -2,9 +2,17 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-12 11:08:57
  * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-19 17:35:44
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-01 20:55:51
  */
+
+export type AlignListData = {
+  key: string
+  icon: string
+  tip: string
+  value: string
+}
+
 export default [
   {
     key: 'align',
@@ -42,4 +50,4 @@ export default [
     tip: '下对齐',
     value: 'bottom',
   },
-]
+] as AlignListData[]

src/assets/data/LayerIconList.ts

@@ -2,9 +2,17 @@
  * @Author: ShawnPhang
  * @Date: 2022-04-15 10:51:50
  * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-04-15 10:51:51
+ * @LastEditors: ShawnPhang, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-01 20:55:51
  */
+
+export type LayerIconList = {
+  key: string
+  icon: string
+  tip: string
+  value: number
+}
+
 export default [
   {
     key: 'zIndex',
@@ -18,4 +26,4 @@ export default [
     tip: '下一层',
     value: -1,
   },
-]
+] as LayerIconList[]

src/assets/data/QrCodeLocalization.ts

@@ -2,9 +2,21 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-16 11:38:48
  * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-23 16:00:11
+ * @LastEditors: ShawnPhang, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-01 20:55:51
  */
+
+export type QrCodeLocalizationData = {
+  dotColorTypes: {
+    key: string
+    value: string
+  }[]
+  dotTypes: {
+    key: string
+    value: string
+  }[]
+}
+
 export default {
   dotColorTypes: [
     {
@@ -42,4 +54,4 @@ export default {
       value: '特殊风格',
     },
   ],
-}
+} as QrCodeLocalizationData

src/assets/data/TextIconsData.ts

@@ -2,10 +2,20 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-02 18:27:27
  * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-02-25 10:30:38
+ * @LastEditors: ShawnPhang, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-01 20:55:51
  */
 
+import { AlignListData } from "./AlignListData"
+
+export type TStyleIconData = {
+  key: string
+  icon: string
+  tip: string
+  value: string[]
+  select: boolean
+}
+
 export const styleIconList1 = [
   {
     key: 'fontWeight',
@@ -42,7 +52,16 @@ export const styleIconList1 = [
     value: ['horizontal-tb', 'vertical-rl'], // tb-rl
     select: false,
   },
-]
+] as TStyleIconData[]
+
+export type TStyleIconData2 = {
+  key: string
+  icon: string
+  tip: string
+  value: string
+  select: boolean
+}
+
 export const styleIconList2 = [
   {
     key: 'textAlign',
@@ -72,7 +91,7 @@ export const styleIconList2 = [
     value: 'justify',
     select: false,
   },
-]
+] as TStyleIconData2[]
 
 export const alignIconList = [
   {
@@ -111,4 +130,4 @@ export const alignIconList = [
     tip: '下对齐',
     value: 'bottom',
   },
-]
+] as AlignListData[]

src/assets/data/WidgetClassifyList.ts

@@ -2,9 +2,17 @@
  * @Author: ShawnPhang
  * @Date: 2021-07-17 11:20:22
  * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-01-24 17:07:44
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-01 20:55:51
  */
+
+export type TWidgetClassifyData = {
+  name: string
+  icon: string
+  show: boolean
+  component: string
+}
+
 export default [
   {
     name: '模板',
@@ -49,4 +57,4 @@ export default [
     show: false,
     component: 'user-wrap',
   },
-]
+] as TWidgetClassifyData[]

src/common/hooks/dragHelper.ts

@@ -5,17 +5,34 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-22 18:11:15
  */
+
 import store from '@/store'
-export default class dragHelper {
-  private cloneEl: any = null
+
+type TInitial = {
+  offsetX: number
+  offsetY: number
+  pageX: number
+  pageY: number
+  width: number
+  height: number
+  finallySize: number
+  flag: number
+  x: number
+  y: number
+}
+
+type TQueueFunction = () => void
+
+export default class DragHelper {
+  private cloneEl?: HTMLElement | null
   private dragging: boolean = false
-  private initial: any = {}
-  private queue: any = []
+  private initial: Partial<TInitial> = {}
+  private queue: TQueueFunction[] = []
 
   constructor() {
     window.addEventListener('mousemove', (e) => {
       if (this.dragging && this.cloneEl) {
-        const { offsetX, offsetY, width, height } = this.initial
+        const { width, height } = this.initial as TInitial
         // this.moveFlutter(e.pageX - offsetX, e.pageY - offsetY, this.distance(e))
         this.moveFlutter(e.pageX - width / 2, e.pageY - height / 2, this.distance(e))
       } else {
@@ -23,10 +40,18 @@ export default class dragHelper {
       }
     })
     // 鼠标抬起
-    window.addEventListener('mouseup', (e: any) => {
-      ;(window as any).document.getElementById('app').classList.remove('drag_active')
-      const cl = e.target.classList
-      if (e.target?.id === 'page-design-canvas' || cl.contains('target') || cl.contains('drop__mask') || cl.contains('edit-text')) {
+    window.addEventListener('mouseup', (e) => {
+      const el = window.document.getElementById('app')
+      if (!el || !e.target) return
+      el.classList.remove('drag_active')
+      const target = e.target as HTMLElement
+      const cl = target.classList
+      if (
+        target.id === 'page-design-canvas' ||
+        cl.contains('target') ||
+        cl.contains('drop__mask') ||
+        cl.contains('edit-text')
+      ) {
         setTimeout(() => {
           this.finish(true)
         }, 10)
@@ -44,29 +69,39 @@ export default class dragHelper {
   /**
    * 拖动开始 mousedown
    */
-  public start(e: any, finallySize: any) {
+  public start(e: MouseEvent, finallySize: number) {
     if (!this.cloneEl) {
       store.commit('setDraging', true)
-      ;(window as any).document.getElementById('app').classList.add('drag_active') // 整个鼠标全局变成抓取
+      const app = window.document.getElementById('app')
+      if (!app || !e) return
+      app.classList.add('drag_active') // 整个鼠标全局变成抓取
+      const target = e.target as HTMLElement
       // 选中了元素
-      this.cloneEl = e.target.cloneNode(true)
+      this.cloneEl = (target.cloneNode(true) as HTMLElement)
       this.cloneEl.classList.add('flutter')
       // 初始化数据
-      this.init(e, e.target, finallySize || e.target.offsetWidth, Math.random())
+      this.init(e, target, finallySize || target.offsetWidth, Math.random())
       // 加载原图
       // simulate(cloneEl.src, initial.flag)
-      this.cloneEl.style.width = e.target.offsetWidth
+      this.cloneEl.style.width = `${target.offsetWidth}`
       // e.target.parentElement.parentElement.appendChild(this.cloneEl)
-      ;(window as any).document.getElementById('widget-panel').appendChild(this.cloneEl)
+      const widgetPanel =  window.document.getElementById('widget-panel')
+      if (!widgetPanel) return
+      widgetPanel.appendChild(this.cloneEl)
       this.dragging = true
-      e.target.classList.add('hide') // 放在最后
+      target.classList.add('hide') // 放在最后
       this.queue.push(() => {
-        e.target.classList.remove('hide')
+        target.classList.remove('hide')
       })
     }
   }
   // 开始拖动初始化
-  private init({ offsetX, offsetY, pageX, pageY, x, y }: any, { offsetWidth: width, offsetHeight: height }: any, finallySize: number, flag: any) {
+  private init(
+    { offsetX, offsetY, pageX, pageY, x, y }: MouseEvent,
+    { offsetWidth: width, offsetHeight: height }: HTMLElement,
+    finallySize: number,
+    flag: number
+  ) {
     this.initial = { offsetX, offsetY, pageX, pageY, width, height, finallySize, flag, x, y }
     // store.commit('setDragInitData', { offsetX: 0, offsetY: 0 })
     this.moveFlutter(pageX - offsetX, pageY - offsetY, 0, 0.3)
@@ -76,17 +111,20 @@ export default class dragHelper {
   }
   // 改变漂浮元素（合并多个操作）
   private moveFlutter(x: number, y: number, d = 0, lazy = 0) {
-    const { width, height, finallySize } = this.initial
-    let scale: any = null
-    if (width > finallySize) {
-      scale = d ? (width - d >= finallySize ? `transform: scale(${(width - d) / width});` : null) : null
-    } else scale = d ? (width + d <= finallySize ? `transform: scale(${(width + d) / width})` : null) : null
+    const { width, height, finallySize } = this.initial as TInitial
+    let scale: string | null = null
+    if (!d) {
+      if (width > finallySize) {
+        scale = width - d >= finallySize ? `transform: scale(${(width - d) / width});` : null
+      } else scale = width + d <= finallySize ? `transform: scale(${(width + d) / width})` : null
+    }
     const options = [`left: ${x}px`, `top: ${y}px`, `width: ${width}px`, `height: ${height}px`]
     scale && options.push(scale)
     options.push(`transition: all ${lazy}s`)
     this.changeStyle(options)
   }
-  private changeStyle(arr: any) {
+  private changeStyle(arr: string[]) {
+    if (!this.cloneEl) return
     const original = this.cloneEl.style.cssText.split(';')
     original.pop()
     this.cloneEl.style.cssText = original.concat(arr).join(';') + ';'
@@ -103,12 +141,12 @@ export default class dragHelper {
       return
     }
     if (!done) {
-      const { pageX, offsetX, pageY, offsetY } = this.initial
+      const { pageX, offsetX, pageY, offsetY } = this.initial as TInitial
       this.changeStyle([`left: ${pageX - offsetX}px`, `top: ${pageY - offsetY}px`, 'transform: scale(1)', 'transition: all 0.3s'])
     }
     setTimeout(
       () => {
-        this.queue.length && this.queue.shift()()
+        this.queue.length && (this.queue.shift() as TQueueFunction)()
         this.cloneEl && this.cloneEl.remove()
         this.cloneEl = null
       },
@@ -116,8 +154,8 @@ export default class dragHelper {
     )
   }
   // 计算两点之间距离
-  private distance({ pageX, pageY }: any) {
-    const { pageX: x, pageY: y } = this.initial
+  private distance({ pageX, pageY }: { pageX: number, pageY: number }) {
+    const { pageX: x, pageY: y } = this.initial as TInitial
     return Math.hypot(pageX - x, pageY - y)
   }
 }

src/common/methods/DesignFeatures/setImage.ts

@@ -2,17 +2,25 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-22 15:06:14
  * @Description: 设置图片类型元素
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-01-11 17:36:44
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-01 20:55:51
  */
 import store from '@/store'
 import { getImage } from '../getImgDetail'
-export default async function setItem2Data(item: any) {
+
+export type TItem2DataParam = {
+  width: number
+  height: number
+  url: string
+  model?: string
+}
+
+export default async function setItem2Data(item: TItem2DataParam) {
   const cloneItem = JSON.parse(JSON.stringify(item))
   const { width: screenWidth, height: screenHeight } = store.getters.dPage
   let { width: imgWidth, height: imgHeight } = item
   if (!imgWidth || !imgHeight) {
-    const actual: any = await getImage(item.url)
+    const actual = await getImage(item.url)
     cloneItem.width = imgWidth = actual.width
     cloneItem.height = imgHeight = actual.height
   }

src/common/methods/DesignFeatures/setWidgetData.ts

@@ -11,7 +11,8 @@ import setImageData from '@/common/methods/DesignFeatures/setImage'
 import wText from '@/components/modules/widgets/wText/wText.vue'
 import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
-export default async function(type: string, item: any, data: any) {
+
+export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
   let setting = data
   if (type === 'text') {
     !item.fontFamily && !item.color ? (setting = JSON.parse(JSON.stringify(wText.setting))) : (setting = item)

src/common/methods/getImgDetail.ts

@@ -5,7 +5,7 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-10-09 10:42:54
  */
-export const getImage = (imgItem: string | File) => {
+export const getImage = (imgItem: string | File): Promise<HTMLImageElement> => {
   // 创建对象
   const img = new Image()
 

src/types/global.d.ts

@@ -1,4 +1,5 @@
 
+
 /** 公共API返回结果 */
 type TCommResResult<T> = {
   code: number
@@ -6,3 +7,13 @@ type TCommResResult<T> = {
   result: T
 }
 
+
+
+type TCommonItemData = {
+  fontFamily?: string
+  color?: string
+  fontSize: number
+  width?: number
+  fontWeight: number
+  value: TItem2DataParam
+}

src/utils/axios.ts

@@ -85,7 +85,7 @@ const fetch = <T = any> (
   type: TFetchMethod = 'get',
   exheaders: Record<string, any> = {},
   extra: Record<string, any> = {}
-): Promise<AxiosResponse<T>> => {
+): Promise<T> => {
   if (params?._noLoading) {
     delete params._noLoading
   } else {
@@ -106,7 +106,7 @@ const fetch = <T = any> (
     return axios[type](url, params, {
       headers: Object.assign(headerObject, exheaders),
       ...extra,
-    }) as Promise<AxiosResponse<T>>
+    }) as Promise<T>
   }
 }