From 980fd3db7688fef7081213787c9da3fc096bb742 Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Sun, 25 Feb 2024 15:01:12 +0000 Subject: [PATCH 01/56] feat: upgrade vue, vite and some dev tools; support TS syntax in the home page --- .gitignore | 1 + package.json | 10 +++---- src/components/modules/layout/zoomControl.vue | 30 +++++++++++-------- src/env.d.ts | 8 +++++ src/views/Index.vue | 20 +++++++++++-- tsconfig.json | 4 +-- 6 files changed, 51 insertions(+), 22 deletions(-) create mode 100644 src/env.d.ts diff --git a/.gitignore b/.gitignore index f0e3fe4..f153543 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ screenshot/_apidoc/ npm-debug.log* yarn-debug.log* yarn-error.log* +yarn.lock* pnpm-debug.log* # Editor directories and files diff --git a/package.json b/package.json index 23b9476..96d4d59 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "qr-code-styling": "^1.6.0-rc.1", "selecto": "^1.13.0", "throttle-debounce": "^3.0.1", - "vue": "^3.0.0", + "vue": "3.2.22", "vue-router": "^4.0.0-0", "vuedraggable": "^4.1.0", "vuex": "^4.0.0-0" @@ -41,7 +41,7 @@ "@types/throttle-debounce": "^2.1.0", "@typescript-eslint/eslint-plugin": "^4.28.3", "@typescript-eslint/parser": "^4.28.3", - "@vitejs/plugin-vue": "^1.2.4", + "@vitejs/plugin-vue": "1.9.3", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", @@ -57,13 +57,13 @@ "eslint-config-alloy": "~4.1.0", "eslint-plugin-vue": "^7.12.1", "less": "^4.1.1", - "typescript": "~4.1.5", + "typescript": "^4.4.3", "unplugin-element-plus": "^0.7.1", - "vite": "^2.4.1", + "vite": "2.6.4", "vite-plugin-compression": "^0.3.0", "vue-cli-plugin-norm": "~1.2.2", "vue-eslint-parser": "^7.6.0", - "vue-tsc": "^0.2.0" + "vue-tsc": "0.3.0" }, "browserslist": [ "> 1%", diff --git a/src/components/modules/layout/zoomControl.vue b/src/components/modules/layout/zoomControl.vue index bf7aac3..6c3ea3b 100644 --- a/src/components/modules/layout/zoomControl.vue +++ b/src/components/modules/layout/zoomControl.vue @@ -19,15 +19,17 @@ - diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue new file mode 100644 index 0000000..e80a965 --- /dev/null +++ b/src/components/business/image-cutout/ImageCutout/index.vue @@ -0,0 +1,202 @@ + + + + + + + 在此拖入或选择上传图片 + + 服务器带宽过低,为了更好的体验,请上传 2M 内的图片 + + + + {{ state.progressText }} {{ state.progress }}% + + + + + + + + + + + + + 清空重选 + 进入编辑模式 + 下载 + {{ state.loading ? '上传中..' : '完成抠图' }} + + + + + + + + + + + diff --git a/src/components/business/image-cutout/ImageCutout/method.ts b/src/components/business/image-cutout/ImageCutout/method.ts new file mode 100644 index 0000000..c7bcb44 --- /dev/null +++ b/src/components/business/image-cutout/ImageCutout/method.ts @@ -0,0 +1,68 @@ +/* + * @Author: Jeremy Yu + * @Date: 2024-03-03 19:00:00 + * @Description: 裁剪组件公共方法 + * @LastEditors: Jeremy Yu + * @Date: 2024-03-03 19:00:00 + */ + +import Qiniu from '@/common/methods/QiNiu' +import { TCommonUploadCb, TUploadErrorResult } from "@/api/ai" +import { TImageCutoutState } from "./index.vue" +import api from "@/api" +import { getImage } from '@/common/methods/getImgDetail' +import _config from '@/config' +import { Ref } from 'vue' + +/** 选择图片 */ +export const selectImageFile = async ( + state: TImageCutoutState, + raw: Ref, + file: File, + successCb?: (result: MediaSource, fileName: string) => void, + uploadCb?: TCommonUploadCb, +) => { + if (file.size > 1024 * 1024 * 2) { + alert('上传图片超出限制') + return false + } + if (!raw.value) return + // 显示选择的图片 + raw.value.addEventListener('load', () => { + state.offsetWidth = (raw.value as HTMLElement).offsetWidth + }) + state.rawImage = URL.createObjectURL(file) + + // 返回抠图结果 + const result = await api.ai.upload(file, (up: number, dp: number) => { + uploadCb && uploadCb(up, dp) + if (dp) { + state.progressText = dp === 100 ? '' : '导入中..' + state.progress = dp + } else { + state.progressText = up < 100 ? '上传中..' : '正在处理,请稍候..' + state.progress = up < 100 ? up : 0 + } + }) + if (typeof result == 'object' && (result as TUploadErrorResult).type !== 'application/json') { + successCb && successCb(result as MediaSource, file.name) + } else alert('服务器繁忙,请稍等下重新尝试~') +} + +export async function uploadCutPhotoToCloud(cutImage: string) { + try { + const response = await fetch(cutImage) + const buffer = await response.arrayBuffer() + const file = new File([buffer], `cut_image_${Math.random()}.png`) + // upload + const qnOptions = { bucket: 'xp-design', prePath: 'user' } + const result = await Qiniu.upload(file, qnOptions) + const { width, height } = await getImage(file) + const url = _config.IMG_URL + result.key + await api.material.addMyPhoto({ width, height, url }) + return url + } catch(e) { + console.error(`upload cut file error: msg: ${e}`) + return '' + } +} diff --git a/src/components/business/image-cutout/index.ts b/src/components/business/image-cutout/index.ts index 7c83cc4..61379c2 100644 --- a/src/components/business/image-cutout/index.ts +++ b/src/components/business/image-cutout/index.ts @@ -5,5 +5,5 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2023-07-12 00:05:48 */ -import index from './ImageCutout.vue' +import index from './ImageCutout/index.vue' export default index diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 2306063..08e1e47 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -31,7 +31,10 @@ interface HTMLElementEventMap { } interface IQiniuSubscribeCb { - (result: { total: { percent: number }}): void + (result: { + total: { percent: number } + key: string + }): void } interface Window { From 8544e343484431ffe02184a09b9dcaeab4528c1e Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Sun, 3 Mar 2024 21:34:16 +0000 Subject: [PATCH 14/56] feat: Convert ImageCutout component to vue3 --- src/api/ai.ts | 21 +- .../business/image-cutout/ImageCutout.vue | 222 ------------------ .../image-cutout/ImageCutout/index.vue | 202 ++++++++++++++++ .../image-cutout/ImageCutout/method.ts | 68 ++++++ src/components/business/image-cutout/index.ts | 2 +- src/types/global.d.ts | 5 +- 6 files changed, 290 insertions(+), 230 deletions(-) delete mode 100644 src/components/business/image-cutout/ImageCutout.vue create mode 100644 src/components/business/image-cutout/ImageCutout/index.vue create mode 100644 src/components/business/image-cutout/ImageCutout/method.ts diff --git a/src/api/ai.ts b/src/api/ai.ts index db7d7b7..21ab492 100644 --- a/src/api/ai.ts +++ b/src/api/ai.ts @@ -2,23 +2,32 @@ * @Author: ShawnPhang * @Date: 2021-08-27 14:42:15 * @Description: AI相关接口 - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-10-13 00:07:19 + * @LastEditors: ShawnPhang , Jeremy Yu + * @Date: 2024-03-03 19:00:00 */ import fetch from '@/utils/axios' +export type TCommonUploadCb = (up: number, dp: number) => void + +type TUploadProgressCbData = { + loaded: number + total: number +} + +export type TUploadErrorResult = {type: "application/json"} + // 上传接口 -export const upload = (file: File, cb: Function) => { +export const upload = (file: File, cb: TCommonUploadCb) => { const formData = new FormData() formData.append('file', file) const extra = { responseType: 'blob', - onUploadProgress: (progress: any) => { + onUploadProgress: (progress: TUploadProgressCbData) => { cb(Math.floor((progress.loaded / progress.total) * 100), 0) }, - onDownloadProgress: (progress: any) => { + onDownloadProgress: (progress: TUploadProgressCbData) => { cb(100, Math.floor((progress.loaded / progress.total) * 100)) }, } - return fetch('https://res.palxp.cn/ai/upload', formData, 'post', {}, extra) + return fetch('https://res.palxp.cn/ai/upload', formData, 'post', {}, extra) } diff --git a/src/components/business/image-cutout/ImageCutout.vue b/src/components/business/image-cutout/ImageCutout.vue deleted file mode 100644 index 6d183e8..0000000 --- a/src/components/business/image-cutout/ImageCutout.vue +++ /dev/null @@ -1,222 +0,0 @@ - - - - - - - 在此拖入或选择上传图片 - - 服务器带宽过低,为了更好的体验,请上传 2M 内的图片 - - - - {{ progressText }} {{ progress }}% - - - - - - - - - - - - - 清空重选 - 进入编辑模式 - 下载 - {{ loading ? '上传中..' : '完成抠图' }} - - - - - - - - - diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue new file mode 100644 index 0000000..e80a965 --- /dev/null +++ b/src/components/business/image-cutout/ImageCutout/index.vue @@ -0,0 +1,202 @@ + + + + + + + 在此拖入或选择上传图片 + + 服务器带宽过低,为了更好的体验,请上传 2M 内的图片 + + + + {{ state.progressText }} {{ state.progress }}% + + + + + + + + + + + + + 清空重选 + 进入编辑模式 + 下载 + {{ state.loading ? '上传中..' : '完成抠图' }} + + + + + + + + + + + diff --git a/src/components/business/image-cutout/ImageCutout/method.ts b/src/components/business/image-cutout/ImageCutout/method.ts new file mode 100644 index 0000000..c7bcb44 --- /dev/null +++ b/src/components/business/image-cutout/ImageCutout/method.ts @@ -0,0 +1,68 @@ +/* + * @Author: Jeremy Yu + * @Date: 2024-03-03 19:00:00 + * @Description: 裁剪组件公共方法 + * @LastEditors: Jeremy Yu + * @Date: 2024-03-03 19:00:00 + */ + +import Qiniu from '@/common/methods/QiNiu' +import { TCommonUploadCb, TUploadErrorResult } from "@/api/ai" +import { TImageCutoutState } from "./index.vue" +import api from "@/api" +import { getImage } from '@/common/methods/getImgDetail' +import _config from '@/config' +import { Ref } from 'vue' + +/** 选择图片 */ +export const selectImageFile = async ( + state: TImageCutoutState, + raw: Ref, + file: File, + successCb?: (result: MediaSource, fileName: string) => void, + uploadCb?: TCommonUploadCb, +) => { + if (file.size > 1024 * 1024 * 2) { + alert('上传图片超出限制') + return false + } + if (!raw.value) return + // 显示选择的图片 + raw.value.addEventListener('load', () => { + state.offsetWidth = (raw.value as HTMLElement).offsetWidth + }) + state.rawImage = URL.createObjectURL(file) + + // 返回抠图结果 + const result = await api.ai.upload(file, (up: number, dp: number) => { + uploadCb && uploadCb(up, dp) + if (dp) { + state.progressText = dp === 100 ? '' : '导入中..' + state.progress = dp + } else { + state.progressText = up < 100 ? '上传中..' : '正在处理,请稍候..' + state.progress = up < 100 ? up : 0 + } + }) + if (typeof result == 'object' && (result as TUploadErrorResult).type !== 'application/json') { + successCb && successCb(result as MediaSource, file.name) + } else alert('服务器繁忙,请稍等下重新尝试~') +} + +export async function uploadCutPhotoToCloud(cutImage: string) { + try { + const response = await fetch(cutImage) + const buffer = await response.arrayBuffer() + const file = new File([buffer], `cut_image_${Math.random()}.png`) + // upload + const qnOptions = { bucket: 'xp-design', prePath: 'user' } + const result = await Qiniu.upload(file, qnOptions) + const { width, height } = await getImage(file) + const url = _config.IMG_URL + result.key + await api.material.addMyPhoto({ width, height, url }) + return url + } catch(e) { + console.error(`upload cut file error: msg: ${e}`) + return '' + } +} diff --git a/src/components/business/image-cutout/index.ts b/src/components/business/image-cutout/index.ts index 7c83cc4..61379c2 100644 --- a/src/components/business/image-cutout/index.ts +++ b/src/components/business/image-cutout/index.ts @@ -5,5 +5,5 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2023-07-12 00:05:48 */ -import index from './ImageCutout.vue' +import index from './ImageCutout/index.vue' export default index diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 2306063..08e1e47 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -31,7 +31,10 @@ interface HTMLElementEventMap { } interface IQiniuSubscribeCb { - (result: { total: { percent: number }}): void + (result: { + total: { percent: number } + key: string + }): void } interface Window { From 893003501fd5742e1f5236777c4566a7ca02c3aa Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Mon, 4 Mar 2024 10:44:03 +0000 Subject: [PATCH 15/56] feat: convert ImageExtraction component to vue3 --- .../image-cutout/ImageCutout/index.vue | 3 +- .../image-cutout/ImageExtraction/index.vue | 112 ++++++++++++++++++ 2 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 src/components/business/image-cutout/ImageExtraction/index.vue diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue index e80a965..f3c1b9f 100644 --- a/src/components/business/image-cutout/ImageCutout/index.vue +++ b/src/components/business/image-cutout/ImageCutout/index.vue @@ -46,7 +46,7 @@ import { ElProgress } from 'element-plus' import { UploadFilled } from '@element-plus/icons-vue' import uploader from '@/components/common/Uploader/index.vue' import _dl from '@/common/methods/download' -import ImageExtraction from '../ImageExtraction.vue' +import ImageExtraction from '../ImageExtraction/index.vue' import { selectImageFile, uploadCutPhotoToCloud } from './method' export type TImageCutoutState = { @@ -100,7 +100,6 @@ defineExpose({ }) const handleUploaderLoad = (file: File) => { - console.log(file) selectImageFile(state as TImageCutoutState, raw, file, (result, name) => { fileName = name const resultImage = URL.createObjectURL(result) diff --git a/src/components/business/image-cutout/ImageExtraction/index.vue b/src/components/business/image-cutout/ImageExtraction/index.vue new file mode 100644 index 0000000..84b622d --- /dev/null +++ b/src/components/business/image-cutout/ImageExtraction/index.vue @@ -0,0 +1,112 @@ + + + + + + + 确认应用 + + 修补画笔 + 擦除画笔 + + + + + + + + + + + From ec05394aa104d8ccf1a042b28351fe580aa084be Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Mon, 4 Mar 2024 10:44:58 +0000 Subject: [PATCH 16/56] update: delete old ImageExtraction component file --- .../business/image-cutout/ImageExtraction.vue | 106 ------------------ 1 file changed, 106 deletions(-) delete mode 100644 src/components/business/image-cutout/ImageExtraction.vue diff --git a/src/components/business/image-cutout/ImageExtraction.vue b/src/components/business/image-cutout/ImageExtraction.vue deleted file mode 100644 index 991aecc..0000000 --- a/src/components/business/image-cutout/ImageExtraction.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - - 确认应用 - - 修补画笔 - 擦除画笔 - - - - - - - - - - - - - From ed1d7db859df287547e2b1f111e8ab678cc8e22d Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Mon, 4 Mar 2024 10:50:01 +0000 Subject: [PATCH 17/56] fix: ImageExtraction component style --- .../ImageExtraction/ImageExtraction.vue | 107 ++++++++++++++++++ .../image-cutout/ImageExtraction/index.vue | 24 ++++ 2 files changed, 131 insertions(+) create mode 100644 src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue diff --git a/src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue b/src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue new file mode 100644 index 0000000..111585d --- /dev/null +++ b/src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue @@ -0,0 +1,107 @@ + + + + + + diff --git a/src/components/business/image-cutout/ImageExtraction/index.vue b/src/components/business/image-cutout/ImageExtraction/index.vue index 84b622d..57e6343 100644 --- a/src/components/business/image-cutout/ImageExtraction/index.vue +++ b/src/components/business/image-cutout/ImageExtraction/index.vue @@ -110,3 +110,27 @@ const done = () => { } + + + + From 36a67967b39f668438d7e86d6dcc25ade83a1df5 Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Mon, 4 Mar 2024 12:34:38 +0000 Subject: [PATCH 18/56] feat: Convert picture-selector to vue3 --- src/api/material.ts | 17 +- .../business/picture-selector/index.vue | 177 +++++++++--------- 2 files changed, 106 insertions(+), 88 deletions(-) diff --git a/src/api/material.ts b/src/api/material.ts index 8d452e5..da961f4 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -62,11 +62,24 @@ export type TGetFontItemData = { export const getFonts = (params: TGetFontParam = {}) => fetch>('design/fonts', params) export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('design/font_sub', params, 'get', {}, extra) +type TGetImageListParams = { + page?: number +} + +export type TGetImageListResult = { + created_time: string + height: number + width: number + url: string + user_id: number + id: string +} + // 图库列表 -export const getImagesList = (params: Type.Object = {}) => fetch('design/imgs', params, 'get') +export const getImagesList = (params: TGetImageListParams) => fetch>('design/imgs', params, 'get') // 我的上传列表 -export const getMyPhoto = (params: Type.Object = {}) => fetch('design/user/image', params) +export const getMyPhoto = (params: TGetImageListParams) => fetch>('design/user/image', params) export const deleteMyPhoto = (params: Type.Object = {}) => fetch('design/user/image/del', params, 'post') export const deleteMyWorks = (params: Type.Object = {}) => fetch('design/poster/del', params, 'post') diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue index 23da2d6..f67f707 100644 --- a/src/components/business/picture-selector/index.vue +++ b/src/components/business/picture-selector/index.vue @@ -6,16 +6,16 @@ * @LastEditTime: 2023-10-05 00:04:51 --> - + - + - + @@ -30,96 +30,101 @@ - diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue index f67f707..421a25c 100644 --- a/src/components/business/picture-selector/index.vue +++ b/src/components/business/picture-selector/index.vue @@ -2,8 +2,8 @@ * @Author: ShawnPhang * @Date: 2022-10-08 10:07:19 * @Description: - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-10-05 00:04:51 + * @LastEditors: ShawnPhang , Jeremy Yu + * @Date: 2024-03-04 18:10:00 --> diff --git a/src/components/business/qrcode/index.vue b/src/components/business/qrcode/index.vue index 3828c6e..e6c06dd 100644 --- a/src/components/business/qrcode/index.vue +++ b/src/components/business/qrcode/index.vue @@ -3,7 +3,7 @@ * @Date: 2022-03-16 09:15:52 * @Description: * @LastEditors: ShawnPhang , Jeremy Yu - * @Date: 2024-03-04 09:50:00 + * @Date: 2024-03-04 18:50:00 --> diff --git a/src/components/business/qrcode/method.ts b/src/components/business/qrcode/method.ts index 7eb2471..bb823f9 100644 --- a/src/components/business/qrcode/method.ts +++ b/src/components/business/qrcode/method.ts @@ -1,4 +1,11 @@ -import { CornerDotType,Options } from "qr-code-styling" +/* + * @Author: Jeremy Yu + * @Date: 2024-03-04 18:10:00 + * @Description: + * @LastEditors: Jeremy Yu + * @Date: 2024-03-04 18:10:00 + */ +import { CornerDotType, Options } from "qr-code-styling" import { TQrcodeProps } from "./index.vue" /** 生成二维码数据 */ diff --git a/src/components/business/right-click-menu/RcMenu.vue b/src/components/business/right-click-menu/RcMenu.vue index 8522c48..22fdf37 100644 --- a/src/components/business/right-click-menu/RcMenu.vue +++ b/src/components/business/right-click-menu/RcMenu.vue @@ -1,136 +1,142 @@ - + {{ item.text }} - diff --git a/src/components/modules/layout/zoomControl/data.ts b/src/components/modules/layout/zoomControl/data.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/components/modules/layout/zoomControl.vue b/src/components/modules/layout/zoomControl/index.vue similarity index 100% rename from src/components/modules/layout/zoomControl.vue rename to src/components/modules/layout/zoomControl/index.vue diff --git a/src/utils/plugins/pointImg.ts b/src/utils/plugins/pointImg.ts index 8186427..1306bc2 100644 --- a/src/utils/plugins/pointImg.ts +++ b/src/utils/plugins/pointImg.ts @@ -9,7 +9,7 @@ export default class PointImg { private canvas: HTMLCanvasElement | undefined private cvs: CanvasRenderingContext2D | null | undefined - constructor(img: any) { + constructor(img: HTMLImageElement) { if (img.src) { try { this.canvas = document.createElement('canvas') @@ -33,24 +33,25 @@ export default class PointImg { */ const color: Record = {} try { - if (!this.cvs) return - const obj = this.cvs.getImageData(x, y, 1, 1) - const arr = obj.data.toString().split(',') + if (this.cvs) { + const obj = this.cvs.getImageData(x, y, 1, 1) + const arr = obj.data.toString().split(',') - let first = parseInt(arr[0], 10).toString(16) - first = first.length === 2 ? first : first + first + let first = parseInt(arr[0], 10).toString(16) + first = first.length === 2 ? first : first + first - let second = parseInt(arr[1], 10).toString(16) - second = second.length === 2 ? second : second + second + let second = parseInt(arr[1], 10).toString(16) + second = second.length === 2 ? second : second + second - let third = parseInt(arr[2], 10).toString(16) - third = third.length === 2 ? third : third + third + let third = parseInt(arr[2], 10).toString(16) + third = third.length === 2 ? third : third + third - let last = parseInt(arr.pop() || '0', 10) / 255 - last = Number(last.toFixed(0)) + let last = parseInt(arr.pop() || '0', 10) / 255 + last = Number(last.toFixed(0)) - color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')' - color['#'] = '#' + first + second + third + color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')' + color['#'] = '#' + first + second + third + } } catch (error) { // console.log('此为解析图片点位异常') } diff --git a/src/views/Draw.vue b/src/views/Draw.vue index dcaed39..aaec167 100644 --- a/src/views/Draw.vue +++ b/src/views/Draw.vue @@ -17,7 +17,7 @@ import Preload from '@/utils/plugins/preload' import FontFaceObserver from 'fontfaceobserver' import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule' import designBoard from '@/components/modules/layout/designBoard.vue' -import zoomControl from '@/components/modules/layout/zoomControl.vue' +import zoomControl from '@/components/modules/layout/zoomControl/index.vue' export default defineComponent({ components: { designBoard, zoomControl }, diff --git a/src/views/Index.vue b/src/views/Index.vue index f2e4db4..393037e 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -59,7 +59,7 @@ import { mapActions, mapGetters } from 'vuex' import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue' import Moveable from '@/components/business/moveable/Moveable.vue' import designBoard from '@/components/modules/layout/designBoard.vue' -import zoomControl from '@/components/modules/layout/zoomControl.vue' +import zoomControl from '@/components/modules/layout/zoomControl/index.vue' import lineGuides from '@/components/modules/layout/lineGuides.vue' import shortcuts from '@/mixins/shortcuts' diff --git a/src/views/Psd.vue b/src/views/Psd.vue index 8eb9029..d3c71e3 100644 --- a/src/views/Psd.vue +++ b/src/views/Psd.vue @@ -53,7 +53,7 @@ import wImage from '@/components/modules/widgets/wImage/wImage.vue' import useLoading from '@/common/methods/loading' import uploader from '@/components/common/Uploader/index.vue' import designBoard from '@/components/modules/layout/designBoard.vue' -import zoomControl from '@/components/modules/layout/zoomControl.vue' +import zoomControl from '@/components/modules/layout/zoomControl/index.vue' import HeaderOptions from './components/UploadTemplate.vue' import ProgressLoading from '@/components/common/ProgressLoading/index.vue' // import MyWorker from '@/utils/plugins/webWorker' From 8995910cb2399fa6788024f6d490b88e2cec3b74 Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Wed, 6 Mar 2024 18:53:40 +0000 Subject: [PATCH 34/56] feat: convert zoom control component to conposition API --- .../modules/layout/zoomControl/data.ts | 69 +++ .../modules/layout/zoomControl/index.vue | 496 +++++++++--------- 2 files changed, 307 insertions(+), 258 deletions(-) diff --git a/src/components/modules/layout/zoomControl/data.ts b/src/components/modules/layout/zoomControl/data.ts index e69de29..d2d3936 100644 --- a/src/components/modules/layout/zoomControl/data.ts +++ b/src/components/modules/layout/zoomControl/data.ts @@ -0,0 +1,69 @@ + +export type TZoomData = { + text: string + value: number +} + +export const ZoomList: TZoomData[] = [ + { + text: '25%', + value: 25, + }, + { + text: '50%', + value: 50, + }, + { + text: '75%', + value: 75, + }, + { + text: '100%', + value: 100, + }, + { + text: '125%', + value: 125, + }, + { + text: '150%', + value: 150, + }, + { + text: '200%', + value: 200, + }, + { + text: '最佳尺寸', + value: -1, + // icon: 'icon-best-size', + }, +] + + +export const OtherList: TZoomData[] = [ + { + text: '250%', + value: 250, + }, + { + text: '300%', + value: 300, + }, + { + text: '350%', + value: 350, + }, + { + text: '400%', + value: 400, + }, + { + text: '450%', + value: 450, + }, + { + text: '500%', + value: 500, + }, +] diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue index 6c3ea3b..cd3518d 100644 --- a/src/components/modules/layout/zoomControl/index.vue +++ b/src/components/modules/layout/zoomControl/index.vue @@ -19,270 +19,250 @@ - diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue new file mode 100644 index 0000000..4764f21 --- /dev/null +++ b/src/components/modules/layout/designBoard/index.vue @@ -0,0 +1,363 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/modules/layout/sizeControl.vue b/src/components/modules/layout/sizeControl.vue index 80d2174..276dec5 100644 --- a/src/components/modules/layout/sizeControl.vue +++ b/src/components/modules/layout/sizeControl.vue @@ -1,7 +1,7 @@ diff --git a/src/mixins/move.ts b/src/mixins/move.ts index af4e5bf..1897bec 100644 --- a/src/mixins/move.ts +++ b/src/mixins/move.ts @@ -48,7 +48,7 @@ const move = { const moveInit = { methods: { - initmovement(e: any) { + initmovement(e: MouseEvent) { if (!store.getters.dAltDown) { // 设置mouseevent给moveable初始 // 在组合操作时排除 diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 1cd3489..a3b3344 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -56,3 +56,9 @@ interface Window { } } } + + +interface MouseEvent { + layerX: number + layerY: number +} diff --git a/src/views/Draw.vue b/src/views/Draw.vue index aaec167..eea81f5 100644 --- a/src/views/Draw.vue +++ b/src/views/Draw.vue @@ -16,7 +16,7 @@ import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue' import Preload from '@/utils/plugins/preload' import FontFaceObserver from 'fontfaceobserver' import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule' -import designBoard from '@/components/modules/layout/designBoard.vue' +import designBoard from '@/components/modules/layout/designBoard/index.vue' import zoomControl from '@/components/modules/layout/zoomControl/index.vue' export default defineComponent({ diff --git a/src/views/Index.vue b/src/views/Index.vue index 393037e..16eb594 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -58,7 +58,7 @@ import { defineComponent, reactive, toRefs } from 'vue' import { mapActions, mapGetters } from 'vuex' import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue' import Moveable from '@/components/business/moveable/Moveable.vue' -import designBoard from '@/components/modules/layout/designBoard.vue' +import designBoard from '@/components/modules/layout/designBoard/index.vue' import zoomControl from '@/components/modules/layout/zoomControl/index.vue' import lineGuides from '@/components/modules/layout/lineGuides.vue' diff --git a/src/views/Psd.vue b/src/views/Psd.vue index d3c71e3..e28cd2f 100644 --- a/src/views/Psd.vue +++ b/src/views/Psd.vue @@ -52,7 +52,7 @@ import wText from '@/components/modules/widgets/wText/wText.vue' import wImage from '@/components/modules/widgets/wImage/wImage.vue' import useLoading from '@/common/methods/loading' import uploader from '@/components/common/Uploader/index.vue' -import designBoard from '@/components/modules/layout/designBoard.vue' +import designBoard from '@/components/modules/layout/designBoard/index.vue' import zoomControl from '@/components/modules/layout/zoomControl/index.vue' import HeaderOptions from './components/UploadTemplate.vue' import ProgressLoading from '@/components/common/ProgressLoading/index.vue' From 18f05812ad0c5212b2b854e5f389a3799e9dde5b Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Wed, 6 Mar 2024 20:24:09 +0000 Subject: [PATCH 36/56] feat: convert style panel component to composition API --- src/components/modules/panel/stylePanel.vue | 102 +++++++++++--------- 1 file changed, 54 insertions(+), 48 deletions(-) diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue index 1bc0d14..e50deab 100644 --- a/src/components/modules/panel/stylePanel.vue +++ b/src/components/modules/panel/stylePanel.vue @@ -6,7 +6,7 @@ - 成组 + 成组 @@ -17,58 +17,64 @@ -