fix: some config

package.json

@@ -17,6 +17,7 @@
     "@gradio/client": "^0.1.4",
     "@palxp/color-picker": "^1.3.1",
     "@scena/guides": "^0.18.1",
+    "@webtoon/psd": "^0.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
@@ -27,6 +28,7 @@
     "moveable-helper": "^0.4.0",
     "nanoid": "^3.1.23",
     "normalize.css": "^8.0.1",
+    "psd": "^3.4.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "selecto": "^1.13.0",
     "throttle-debounce": "^3.0.1",

src/components/business/image-cutout/ImageCutout.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2023-07-11 23:50:22
  * @Description: 抠图组件
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-07-24 13:01:03
+ * @LastEditTime: 2023-09-15 12:38:49
 -->
 <template>
   <el-dialog v-model="show" title="AI抠图（测试版）" width="650" @close="handleClose">
@@ -61,7 +61,7 @@ export default defineComponent({
 
     const selectFile = async (file: File) => {
       if (file.size > 1024 * 1024 * 2) {
-        alert('上传的文件大小超过了限制！')
+        alert('请上传小于 2M 的图片')
         return false
       }
       // 显示选择的图片

src/components/business/save-download/CreateCover.vue

@@ -3,7 +3,7 @@
  * @Date: 2021-08-01 11:12:17
  * @Description: 前端出图 - 用于封面
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-13 17:44:29
+ * @LastEditTime: 2023-09-13 17:36:36
 -->
 <template>
   <div id="cover-wrap"></div>

src/config.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2023-09-07 22:56:09
- * @Description:
+ * @Description: 配置文件
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-11 23:29:43
+ * @LastEditTime: 2023-09-15 12:47:16
  */
 // const prefix = import.meta.env
 const prefix = process.env
@@ -17,9 +17,10 @@ export default {
   APP_NAME: '迅排设计',
   COPYRIGHT: 'ShawnPhang - Palxp.cn',
   // API_URL: isDev ? 'http://localhost:9998' : '${API}',
-  API_URL: 'https://www.palxp.cn:8887',
+  API_URL: 'https://palxp.cn:8887', // 服务端地址
-  SCREEN_URL: isDev ? 'http://localhost:7001' : '${SCREEN_URL}',
+  SCREEN_URL: isDev ? 'http://localhost:7001' : '#{SCREEN_URL}', // 截图服务地址
-  IMG_URL: 'https://store.palxp.com/',
+  IMG_URL: 'https://store.palxp.com/', // 七牛云资源地址
+  KT_URL: 'https://res.palxp.cn:5001', // 抠图服务地址
   // ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',
   ICONFONT_URL: '//at.alicdn.com/t/font_2717063_ypy8vprc3b.css?display=swap',
   ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_6qsac4kteu7.css?&display=swap',

src/router/index.ts

@@ -3,15 +3,14 @@
  * @Date: 2021-08-19 18:43:22
  * @Description: Router Enter
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-11 23:32:52
+ * @LastEditTime: 2023-09-15 12:37:11
  */
 import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import config from '@/config'
 import hook from './hook'
+import base from './base'
 
-import Base from './base'
+const routes: Array<RouteRecordRaw> = [...base]
-
-const routes: Array<RouteRecordRaw> = [...Base]
 
 const router = createRouter({
   history: createWebHistory(config.BASE_URL), // import.meta.env.BASE_URL

src/store/modules/base/index.ts

@@ -3,11 +3,12 @@
  * @Date: 2021-12-16 16:20:16
  * @Description:
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-13 10:05:03
+ * @LastEditTime: 2023-09-15 12:47:57
  */
 import mutations from './mutations'
 import actions from './actions'
 import { client } from '@gradio/client'
+import _config from '@/config'
 
 const all = {
   state: {
@@ -39,7 +40,7 @@ const all = {
       return state.fonts
     },
     app: async (state: Type.Object) => {
-      !state.app && (state.app = await client('https://kt.palxp.com'))
+      !state.app && (state.app = await client(_config.KT_URL))
       return state.app
     },
   },

src/types/worker.d.ts

@@ -0,0 +1,8 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2023-09-14 14:40:06
+ * @Description:
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-14 14:40:13
+ */
+declare function importScripts(...urls: string[]): void

src/utils/plugins/webWorker.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2022-03-06 13:53:30
+ * @Description: 计算密集型任务
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-14 17:28:53
+ */
+export default class WebWorker {
+  private worker: any
+
+  constructor(name: string) {
+    if (typeof Worker === 'undefined') {
+      console.error('Web Worker is not supported in this browser.')
+    } else {
+      const file = name ? `../widgets/${name}.worker.ts` : null
+      file &&
+        (this.worker = new Worker(new URL(file, import.meta.url), {
+          type: 'module',
+        }))
+    }
+  }
+  public start(data: any) {
+    return new Promise((resolve) => {
+      // 监听Web Worker的消息
+      this.worker.onmessage = (e: any) => {
+        resolve(e.data)
+      }
+      // 发送数据给Web Worker
+      this.worker.postMessage(data)
+    })
+  }
+}

src/utils/widgets/loadPSD.worker.ts

@@ -0,0 +1,21 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2023-09-14 11:33:44
+ * @Description: 加载PSD解析
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-14 18:15:44
+ */
+import Psd from '@webtoon/psd'
+
+onmessage = async (e) => {
+  const result = await e.data.arrayBuffer()
+  const rawPsdFile = Psd.parse(result)
+  console.log(111, rawPsdFile)
+
+  const { width, height } = rawPsdFile
+  const psdFile = { width, height }
+
+  const compositeBuffer = await rawPsdFile.composite()
+
+  self.postMessage({ psdFile, compositeBuffer })
+}

src/views/Psd.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-01-10 14:57:53
  * @Description: Psd文件解析
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-11 23:39:06
+ * @LastEditTime: 2023-09-14 18:17:05
 -->
 <template>
   <div id="page-design-index" ref="pageDesignIndex">
@@ -43,7 +43,6 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, getCurrentInstance, ComponentInternalInstance, onMounted, nextTick } from 'vue'
-import { processPSD2Page } from '@/utils/plugins/psd'
 import { useRoute } from 'vue-router'
 import { mapActions, mapGetters, useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
@@ -57,6 +56,8 @@ import designBoard from '@/components/modules/layout/designBoard.vue'
 import zoomControl from '@/components/modules/layout/zoomControl.vue'
 import HeaderOptions from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
+import MyWorker from '@/utils/plugins/webWorker'
+import { processPSD2Page } from '@/utils/plugins/psd'
 
 export default defineComponent({
   components: { RightClickMenu, Moveable, uploader, designBoard, zoomControl, HeaderOptions, ProgressLoading },
@@ -73,6 +74,7 @@ export default defineComponent({
     const route = useRoute()
     const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
     let loading: any = null
+    const myWorker = new MyWorker('loadPSD')
 
     onMounted(async () => {
       await nextTick()
@@ -91,6 +93,7 @@ export default defineComponent({
       state.isDone = true
     }
     async function loadPSD(file: any) {
+      // const { compositeBuffer, psdFile } = await myWorker.start(file)
       const data = await processPSD2Page(file)
 
       setTimeout(async () => {