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

Feat: update utils type

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) |
+| <img style="width: 240px;" src="https://xp.palxp.cn/images/2024-3-1-1709306328344.png" /> | <img style="width: 320px;" src="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`
 
 <a href="https://github.com/palxiao/poster-design/graphs/contributors">

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",

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[]

src/router/hook.ts

@@ -1,8 +1,10 @@
 //  import store from '@/store'
 
- export default (router: Type.Object) => {
+import { NavigationGuardNext, RouteLocationNormalized, Router } from "vue-router"
 
-     router.beforeEach((to: Type.Object, from: Type.Object, next: () => void) => {
+ export default (router: Router) => {
+ 
+     router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
          // if (to.meta.requireAuth) { }
  
          // 有必要时清除残余的loading框

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)

src/utils/plugins/pointImg.ts

@@ -6,8 +6,9 @@
  * @LastEditTime: 2023-09-19 17:32:40
  */
 export default class PointImg {
-  private canvas: any
+  private canvas: HTMLCanvasElement | undefined
-  private cvs: any
+  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<string, string> = {}
     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 + ')'

src/utils/plugins/preload.ts

@@ -2,27 +2,27 @@
  * @Author: ShawnPhang
  * @Date: 2021-12-24 15:13:58
  * @Description: 资源加载
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-09-19 17:19:07
+ * @LastEditTime: 2024-03-05 12:00:00
  */
 export default class PreLoad {
   private i: number
-  private arr: any[]
+  private arr: (string | HTMLImageElement | ChildNode[])[]
-  constructor(arr: string[]) {
+  constructor(arr: (string | HTMLImageElement | ChildNode[])[]) {
     this.i = 0
     this.arr = arr
   }
   public imgs() {
-    return new Promise((resolve: any) => {
+    return new Promise<void>((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<void>((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<void>((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)

src/utils/plugins/webWorker.ts

@@ -2,11 +2,11 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-06 13:53:30
  * @Description: 计算密集型任务
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-09-14 17:28:53
+ * @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的消息
+      if (!this.worker) resolve('')
-      this.worker.onmessage = (e: any) => {
+      else {
-        resolve(e.data)
+        // 监听Web Worker的消息
+        this.worker.onmessage = (e) => {
+          resolve(e.data)
+        }
+        // 发送数据给Web Worker
+        this.worker.postMessage(data)
       }
-      // 发送数据给Web Worker
-      this.worker.postMessage(data)
     })
   }
 }