From e509541711563e3140f83ec24795530f98d8dab3 Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Fri, 1 Mar 2024 21:19:14 +0000 Subject: [PATCH 1/5] feat: upgrade typescript and eslint --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 96d4d59..23952d4 100644 --- a/package.json +++ b/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", From e580ea3239902bab17e52314c115657f9489317c Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Fri, 1 Mar 2024 21:21:53 +0000 Subject: [PATCH 2/5] feat: upgrade common request api type --- src/api/material.ts | 6 ++++-- src/utils/axios.ts | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/api/material.ts b/src/api/material.ts index ec5fdb3..2f28160 100644 --- a/src/api/material.ts +++ b/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 = { diff --git a/src/utils/axios.ts b/src/utils/axios.ts index 68a49af..e654366 100644 --- a/src/utils/axios.ts +++ b/src/utils/axios.ts @@ -85,7 +85,7 @@ const fetch = ( type: TFetchMethod = 'get', exheaders: Record = {}, extra: Record = {} -): Promise> => { +): Promise => { if (params?._noLoading) { delete params._noLoading } else { @@ -106,7 +106,7 @@ const fetch = ( return axios[type](url, params, { headers: Object.assign(headerObject, exheaders), ...extra, - }) as Promise> + }) as Promise } } From f11a4c5090917d580aaf9ebc0e7722082560f36d Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Fri, 1 Mar 2024 21:25:01 +0000 Subject: [PATCH 3/5] feat: upgrade assess data types --- src/assets/data/AlignListData.ts | 14 ++++++++++--- src/assets/data/LayerIconList.ts | 14 ++++++++++--- src/assets/data/QrCodeLocalization.ts | 18 ++++++++++++++--- src/assets/data/TextIconsData.ts | 29 ++++++++++++++++++++++----- src/assets/data/WidgetClassifyList.ts | 14 ++++++++++--- src/types/global.d.ts | 1 + 6 files changed, 73 insertions(+), 17 deletions(-) diff --git a/src/assets/data/AlignListData.ts b/src/assets/data/AlignListData.ts index cf7745f..e21657c 100644 --- a/src/assets/data/AlignListData.ts +++ b/src/assets/data/AlignListData.ts @@ -2,9 +2,17 @@ * @Author: ShawnPhang * @Date: 2022-02-12 11:08:57 * @Description: - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-09-19 17:35:44 + * @LastEditors: ShawnPhang , Jeremy Yu + * @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[] diff --git a/src/assets/data/LayerIconList.ts b/src/assets/data/LayerIconList.ts index eddf63b..7562027 100644 --- a/src/assets/data/LayerIconList.ts +++ b/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 + * @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[] diff --git a/src/assets/data/QrCodeLocalization.ts b/src/assets/data/QrCodeLocalization.ts index e4cd970..198dc87 100644 --- a/src/assets/data/QrCodeLocalization.ts +++ b/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 + * @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 diff --git a/src/assets/data/TextIconsData.ts b/src/assets/data/TextIconsData.ts index 8dbdc09..80d554e 100644 --- a/src/assets/data/TextIconsData.ts +++ b/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 + * @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[] diff --git a/src/assets/data/WidgetClassifyList.ts b/src/assets/data/WidgetClassifyList.ts index ca69414..b5a3c7b 100644 --- a/src/assets/data/WidgetClassifyList.ts +++ b/src/assets/data/WidgetClassifyList.ts @@ -2,9 +2,17 @@ * @Author: ShawnPhang * @Date: 2021-07-17 11:20:22 * @Description: - * @LastEditors: ShawnPhang - * @LastEditTime: 2024-01-24 17:07:44 + * @LastEditors: ShawnPhang , Jeremy Yu + * @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[] diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 789280e..3af95d2 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,4 +1,5 @@ + /** 公共API返回结果 */ type TCommResResult = { code: number From 0d59f5c58f4b0a8e0b2687e93463983a110da81d Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Fri, 1 Mar 2024 21:26:33 +0000 Subject: [PATCH 4/5] feat: upgrade hooks type --- src/common/hooks/dragHelper.ts | 94 ++++++++++++++++++++++++---------- 1 file changed, 66 insertions(+), 28 deletions(-) diff --git a/src/common/hooks/dragHelper.ts b/src/common/hooks/dragHelper.ts index 1254345..a6dbbab 100644 --- a/src/common/hooks/dragHelper.ts +++ b/src/common/hooks/dragHelper.ts @@ -5,17 +5,34 @@ * @LastEditors: ShawnPhang * @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 = {} + 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) } } From 7ab19a629434042d38ebc00a3a1ccc0ff58f925f Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Fri, 1 Mar 2024 22:13:41 +0000 Subject: [PATCH 5/5] feat: add design features type --- src/common/methods/DesignFeatures/setImage.ts | 16 ++++++++++++---- .../methods/DesignFeatures/setWidgetData.ts | 3 ++- src/common/methods/getImgDetail.ts | 2 +- src/types/global.d.ts | 10 ++++++++++ 4 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/common/methods/DesignFeatures/setImage.ts b/src/common/methods/DesignFeatures/setImage.ts index 95bbbf9..9e7d0cf 100644 --- a/src/common/methods/DesignFeatures/setImage.ts +++ b/src/common/methods/DesignFeatures/setImage.ts @@ -2,17 +2,25 @@ * @Author: ShawnPhang * @Date: 2022-02-22 15:06:14 * @Description: 设置图片类型元素 - * @LastEditors: ShawnPhang - * @LastEditTime: 2024-01-11 17:36:44 + * @LastEditors: ShawnPhang , Jeremy Yu + * @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 } diff --git a/src/common/methods/DesignFeatures/setWidgetData.ts b/src/common/methods/DesignFeatures/setWidgetData.ts index be7f87b..c3fc7a9 100644 --- a/src/common/methods/DesignFeatures/setWidgetData.ts +++ b/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) { let setting = data if (type === 'text') { !item.fontFamily && !item.color ? (setting = JSON.parse(JSON.stringify(wText.setting))) : (setting = item) diff --git a/src/common/methods/getImgDetail.ts b/src/common/methods/getImgDetail.ts index d85934c..b208357 100644 --- a/src/common/methods/getImgDetail.ts +++ b/src/common/methods/getImgDetail.ts @@ -5,7 +5,7 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2023-10-09 10:42:54 */ -export const getImage = (imgItem: string | File) => { +export const getImage = (imgItem: string | File): Promise => { // 创建对象 const img = new Image() diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 3af95d2..efc7432 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -7,3 +7,13 @@ type TCommResResult = { result: T } + + +type TCommonItemData = { + fontFamily?: string + color?: string + fontSize: number + width?: number + fontWeight: number + value: TItem2DataParam +}