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 @@ + + + + + + + + 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 @@ - - - - - - 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 @@ + + + + + + + + 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 --> - 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 --> -