diff --git a/README.md b/README.md index 5e4872a..181ab51 100644 --- a/README.md +++ b/README.md @@ -54,9 +54,9 @@ npm run serve ## 其它 -项目最早使用 Vue2 开发，后改用 Vue3 重构，目前有部分代码混合了 Options 写法。 +本项目最早使用 Vue2 开发，现改用 Vue3 重构中。[一些迭代计划记录](https://xp.palxp.cn/#/articles/1689319986889?id=%e8%bf%ad%e4%bb%a3%e8%ae%a1%e5%88%92). -目前也还在持续迭代中，有很多的不足，我也是一边学习一边成长。[实时迭代计划文档](https://xp.palxp.cn/#/articles/1689319986889?id=%e8%bf%ad%e4%bb%a3%e8%ae%a1%e5%88%92). +目前开源版仍在持续迭代中，还有很多的不足，我的目标是做一款能对标稿定设计、创客贴、Canva等商业产品的强大在线设计器。 ### 感谢 @@ -67,22 +67,18 @@ npm run serve - [qr-code-styling](https://qr-code-styling.com/): 风格化二维码 - [rembg](https://github.com/danielgatis/rembg): 图片抠图，使用 u2net 预训练模型 -### 友情赞助商 - -[![](https://xp.palxp.cn/images/2024-3-1-1709306907030.png)](https://dooring.vip/) - ### 交流群 -| 作者微信：备注加群 | 公众号 | +| 作者微信：备注加群 | 关注公众号 | | --- | --- | -| ![](https://xp.palxp.cn/images/2024-3-1-1709306328344.png) | ![](https://xp.palxp.cn/images/2024-3-1-1709306365949.png) | - -### `Star` +| | | 开源不易，别忘了给本项目点个 **Star** ~ [![Star History Chart](https://api.star-history.com/svg?repos=palxiao/poster-design&type=Date)](https://star-history.com/#palxiao/poster-design&Date) +### `Star` + 感谢所有支持本项目的朋友 :heart: [![Stargazers](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=palxiao&repo=poster-design)](https://github.com/palxiao/poster-design/stargazers) @@ -93,6 +89,10 @@ npm run serve [![Forkers](https://bytecrank.com/nastyox/reporoster/php/forkersSVG.php?user=palxiao&repo=poster-design)](https://github.com/palxiao/poster-design/network/members) +### 友情赞助商 + +[![](https://xp.palxp.cn/images/2024-3-3-1709450701432.png)](https://dooring.vip/) + ### `Contributions` diff --git a/package.json b/package.json index d7b14d9..698cfbc 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "vuex": "^4.0.0-0" }, "devDependencies": { - "@types/node": "^16.3.1", + "@types/node": "^20.11.24", "@types/throttle-debounce": "^2.1.0", "@typescript-eslint/eslint-plugin": "^7.1.0", "@typescript-eslint/parser": "^7.1.0", diff --git a/src/router/base.ts b/src/router/base.ts index c455e02..951e0d4 100644 --- a/src/router/base.ts +++ b/src/router/base.ts @@ -1,3 +1,5 @@ +import { RouteRecordRaw } from 'vue-router'; + /* * @Author: ShawnPhang * @Date: 2021-08-19 18:43:22 @@ -40,4 +42,4 @@ export default [ name: 'Psd', component: () => import(/* webpackChunkName: 'psd' */ '@/views/Psd.vue'), }, -] +] as RouteRecordRaw[] diff --git a/src/router/hook.ts b/src/router/hook.ts index 86ecd23..7ca73a9 100644 --- a/src/router/hook.ts +++ b/src/router/hook.ts @@ -1,8 +1,10 @@ // import store from '@/store' - export default (router: Type.Object) => { +import { NavigationGuardNext, RouteLocationNormalized, Router } from "vue-router" + + export default (router: Router) => { - router.beforeEach((to: Type.Object, from: Type.Object, next: () => void) => { + router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => { // if (to.meta.requireAuth) { } // 有必要时清除残余的loading框 diff --git a/src/utils/plugins/modules.ts b/src/utils/plugins/modules.ts index ee50744..2f9193f 100644 --- a/src/utils/plugins/modules.ts +++ b/src/utils/plugins/modules.ts @@ -7,8 +7,9 @@ */ // import { Button, Field, Divider, NavBar, Toast, Popup } from 'vant' import coms from '@/components/modules' +import { App } from 'vue' -export default (Vue: any) => { +export default (Vue: App) => { coms(Vue) // Vue.component(Button.name, Button) // Vue.use(Field).use(Divider).use(NavBar).use(Toast).use(Popup) diff --git a/src/utils/plugins/pointImg.ts b/src/utils/plugins/pointImg.ts index 945af7d..8186427 100644 --- a/src/utils/plugins/pointImg.ts +++ b/src/utils/plugins/pointImg.ts @@ -6,8 +6,9 @@ * @LastEditTime: 2023-09-19 17:32:40 */ export default class PointImg { - private canvas: any - private cvs: any + private canvas: HTMLCanvasElement | undefined + private cvs: CanvasRenderingContext2D | null | undefined + constructor(img: any) { if (img.src) { try { @@ -16,6 +17,8 @@ export default class PointImg { this.canvas.height = img.height img.crossOrigin = 'Anonymous' this.cvs = this.canvas.getContext('2d') + if (!this.cvs) return + this.cvs.drawImage(img, 0, 0, img.width, img.height) } catch (error) { console.log(error) @@ -28,8 +31,9 @@ export default class PointImg { * @param y Number y坐标起点 * @return color Object 包含颜色的rgba #16进制颜色 */ - const color: any = {} + const color: Record = {} try { + if (!this.cvs) return const obj = this.cvs.getImageData(x, y, 1, 1) const arr = obj.data.toString().split(',') @@ -42,7 +46,7 @@ export default class PointImg { let third = parseInt(arr[2], 10).toString(16) third = third.length === 2 ? third : third + third - let last = parseInt(arr.pop(), 10) / 255 + let last = parseInt(arr.pop() || '0', 10) / 255 last = Number(last.toFixed(0)) color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')' diff --git a/src/utils/plugins/preload.ts b/src/utils/plugins/preload.ts index 129d057..e41213f 100644 --- a/src/utils/plugins/preload.ts +++ b/src/utils/plugins/preload.ts @@ -2,27 +2,27 @@ * @Author: ShawnPhang * @Date: 2021-12-24 15:13:58 * @Description: 资源加载 - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-09-19 17:19:07 + * @LastEditors: ShawnPhang , Jeremy Yu + * @LastEditTime: 2024-03-05 12:00:00 */ export default class PreLoad { private i: number - private arr: any[] - constructor(arr: string[]) { + private arr: (string | HTMLImageElement | ChildNode[])[] + constructor(arr: (string | HTMLImageElement | ChildNode[])[]) { this.i = 0 this.arr = arr } public imgs() { - return new Promise((resolve: any) => { + return new Promise((resolve) => { const work = (src: string) => { if (this.i < this.arr.length) { const img = new Image() img.src = src if (img.complete) { - work(this.arr[this.i++]) + work(this.arr[this.i++] as string) } else { img.onload = () => { - work(this.arr[this.i++]) + work(this.arr[this.i++] as string) img.onload = null } } @@ -31,14 +31,14 @@ export default class PreLoad { resolve() } } - work(this.arr[this.i]) + work(this.arr[this.i] as string) }) } public doms() { - return new Promise((resolve: Function) => { + return new Promise((resolve) => { const work = () => { if (this.i < this.arr.length) { - this.arr[this.i].complete && this.i++ + (this.arr[this.i] as HTMLImageElement).complete && this.i++ setTimeout(() => { work() }, 100) @@ -51,10 +51,10 @@ export default class PreLoad { } /** 判断是否加载svg */ public svgs() { - return new Promise((resolve: Function) => { + return new Promise((resolve) => { const work = () => { if (this.i < this.arr.length) { - this.arr[this.i].length > 0 && this.i++ + (this.arr[this.i] as ChildNode[]).length > 0 && this.i++ setTimeout(() => { work() }, 100) diff --git a/src/utils/plugins/webWorker.ts b/src/utils/plugins/webWorker.ts index 10529f2..42bc9c3 100644 --- a/src/utils/plugins/webWorker.ts +++ b/src/utils/plugins/webWorker.ts @@ -2,11 +2,11 @@ * @Author: ShawnPhang * @Date: 2022-03-06 13:53:30 * @Description: 计算密集型任务 - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-09-14 17:28:53 + * @LastEditors: ShawnPhang , Jeremy Yu + * @LastEditTime: 2024-03-05 12:00:00 */ export default class WebWorker { - private worker: any + private worker: Worker | undefined constructor(name: string) { if (typeof Worker === 'undefined') { @@ -21,12 +21,15 @@ export default class WebWorker { } public start(data: any) { return new Promise((resolve) => { - // 监听Web Worker的消息 - this.worker.onmessage = (e: any) => { - resolve(e.data) + if (!this.worker) resolve('') + else { + // 监听Web Worker的消息 + this.worker.onmessage = (e) => { + resolve(e.data) + } + // 发送数据给Web Worker + this.worker.postMessage(data) } - // 发送数据给Web Worker - this.worker.postMessage(data) }) } }