From fddb5f3e7ab52507f98b9da0b3d3a1b43d41d1ee Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 7 Mar 2024 15:19:50 +0000
Subject: [PATCH] feat: convert psd page to composition API

---
 src/views/Psd.vue                       | 261 +++++++++++++-----------
 src/views/components/UploadTemplate.vue |   9 +-
 2 files changed, 151 insertions(+), 119 deletions(-)

diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index e28cd2f..937e6f1 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -12,10 +12,12 @@
         <div class="top-left">
           <div class="name" style="font-size: 15px">在线PSD解析</div>
         </div>
-        <div style="flex: 1"><el-button plain type="primary" @click="jump2word">说明文档及PSD规范</el-button></div>
-        <el-button v-show="isDone" @click="clear">清空模板</el-button>
+        <div style="flex: 1">
+          <el-button plain type="primary" @click="jump2word">说明文档及PSD规范</el-button>
+        </div>
+        <el-button v-show="state.isDone" @click="clear">清空模板</el-button>
         <div class="v-tips">
-          <HeaderOptions :isDone="isDone" @change="optionsChange" />
+          <HeaderOptions :isDone="state.isDone" @change="optionsChange" />
         </div>
       </div>
     </div>
@@ -23,28 +25,38 @@
     <div class="page-design-index-wrap">
       <!-- <widget-panel></widget-panel> -->
       <design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
-        <div v-if="isDone" class="shelter" :style="{ width: (dPage.width * dZoom) / 100 + 'px', height: (dPage.height * dZoom) / 100 + 'px' }"></div>
+        <div v-if="state.isDone" class="shelter" :style="{ width: (dPage.width * dZoom) / 100 + 'px', height: (dPage.height * dZoom) / 100 + 'px' }"></div>
         <uploader v-else accept=".psd" :hold="true" :drag="true" class="uploader" @load="selectFile">
-          <div class="uploader__box"><img style="margin-right: 1rem" src="https://cdn.dancf.com/design/svg/icon_psdimport.37e6f23e.svg" /> 在此拖入或选择PSD文件</div>
+          <div class="uploader__box">
+            <img
+              style="margin-right: 1rem"
+              src="https://cdn.dancf.com/design/svg/icon_psdimport.37e6f23e.svg"
+              alt="upload"
+            /> 在此拖入或选择PSD文件
+          </div>
         </uploader>
       </design-board>
-      <style-panel v-show="isDone"></style-panel>
+      <style-panel v-show="state.isDone"></style-panel>
     </div>
     <!-- 缩放控制 -->
-    <zoom-control v-if="isDone" ref="zoomControl" />
+    <zoom-control v-if="state.isDone" ref="zoomControlRef" />
     <!-- 右键菜单 -->
     <right-click-menu />
     <!-- 旋转缩放组件 -->
     <Moveable />
     <!-- 遮罩百分比进度条 -->
-    <ProgressLoading :percent="downloadPercent" :text="downloadText" :cancelText="cancelText" :msg="downloadMsg" @cancel="cancel" @done="downloadPercent = 0" />
+    <ProgressLoading
+      :percent="state.downloadPercent" :text="state.downloadText"
+      :cancelText="state.cancelText" :msg="state.downloadMsg"
+      @cancel="cancel" @done="state.downloadPercent = 0"
+    />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs, getCurrentInstance, ComponentInternalInstance, onMounted, nextTick } from 'vue'
+<script lang="ts" setup>
+import { reactive, onMounted, nextTick, onBeforeMount, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { mapActions, mapGetters, useStore } from 'vuex'
+import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import shortcuts from '@/mixins/shortcuts'
@@ -54,125 +66,138 @@ import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.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 HeaderOptions, { TEmitChangeData } from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 // import MyWorker from '@/utils/plugins/webWorker'
 import { processPSD2Page } from '@/utils/plugins/psd'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default defineComponent({
-  components: { RightClickMenu, Moveable, uploader, designBoard, zoomControl, HeaderOptions, ProgressLoading },
-  mixins: [shortcuts],
-  setup() {
-    const state = reactive({
-      isDone: true,
-      downloadPercent: 0, // 下载进度
-      downloadText: '',
-      downloadMsg: '',
-      cancelText: '',
-    })
-    const store = useStore()
-    const route = useRoute()
-    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
-    let loading: any = null
+type TState = {
+  isDone: boolean
+  downloadPercent: number // 下载进度
+  downloadText: string
+  downloadMsg: string
+  cancelText: string
+}
+
+// mixins: [shortcuts],
+const state = reactive<TState>({
+  isDone: true,
+  downloadPercent: 0, // 下载进度
+  downloadText: '',
+  downloadMsg: '',
+  cancelText: '',
+})
+const store = useStore()
+const route = useRoute()
+
+const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
+const zoomControlRef = ref<typeof zoomControl | null>()
+
+let loading: ReturnType<typeof useLoading> | null = null
     // const myWorker = new MyWorker('loadPSD')
 
-    onMounted(async () => {
-      await nextTick()
-      state.isDone = false
-    })
+onMounted(async () => {
+  await nextTick()
+  state.isDone = false
+})
 
-    function loadJS() {
-      const link_element = document.createElement('script')
-      link_element.setAttribute('src', '/psd.js')
-      document.head.appendChild(link_element)
+function loadJS() {
+  const link_element = document.createElement('script')
+  link_element.setAttribute('src', '/psd.js')
+  document.head.appendChild(link_element)
+}
+
+async function selectFile(file: File) {
+  loading = useLoading()
+  await loadPSD(file)
+  loading.close()
+  state.isDone = true
+}
+
+async function loadPSD(file: File) {
+  // const { compositeBuffer, psdFile } = await myWorker.start(file)
+  const data = await processPSD2Page(file)
+
+  setTimeout(async () => {
+    const types: any = {
+      text: wText.setting,
+      image: wImage.setting,
     }
-    async function selectFile(file: any) {
-      loading = useLoading()
-      await loadPSD(file)
-      loading.close()
-      state.isDone = true
-    }
-    async function loadPSD(file: any) {
-      // const { compositeBuffer, psdFile } = await myWorker.start(file)
-      const data = await processPSD2Page(file)
-
-      setTimeout(async () => {
-        const types: any = {
-          text: wText.setting,
-          image: wImage.setting,
-        }
-        for (let i = 0; i < data.clouds.length; i++) {
-          const x: any = data.clouds[i]
-          const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
-          delete x.type
-          x.src && (x.imgUrl = x.src) && delete x.src
-          store.dispatch('addWidget', Object.assign(rawData, x))
-        }
-
-        const { width, height, background: bg } = data
-        store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
-        await proxy?.loadDone()
-      }, 10)
+    for (let i = 0; i < data.clouds.length; i++) {
+      const x: any = data.clouds[i]
+      const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
+      delete x.type
+      x.src && (x.imgUrl = x.src) && delete x.src
+      store.dispatch('addWidget', Object.assign(rawData, x))
     }
 
-    async function clear() {
-      store.commit('setDWidgets', [])
-      store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
-      store.commit('setShowMoveable', false)
-      await nextTick()
-      state.isDone = false
-    }
+    const { width, height, background: bg } = data
+    store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    await loadDone()
+  }, 10)
+}
 
-    const optionsChange = ({ downloadPercent, downloadText, downloadMsg = '', cancelText = '' }: any) => {
-      typeof downloadPercent === 'number' && (state.downloadPercent = downloadPercent)
-      state.downloadText = downloadText
-      state.downloadMsg = downloadMsg
-      state.cancelText = cancelText
-    }
-    const cancel = () => {
-      state.downloadPercent = 100
-      window.open(`${window.location.protocol + '//' + window.location.host}/home?id=${route.query.id}`)
-    }
+async function clear() {
+  store.commit('setDWidgets', [])
+  store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+  store.commit('setShowMoveable', false)
+  await nextTick()
+  state.isDone = false
+}
 
-    return {
-      ...toRefs(state),
-      loadJS,
-      selectFile,
-      clear,
-      cancel,
-      optionsChange,
-    }
-  },
-  computed: {
-    ...mapGetters(['dPage', 'dZoom']),
-  },
-  async mounted() {
-    document.addEventListener('keydown', this.handleKeydowm, false)
-    document.addEventListener('keyup', this.handleKeyup, false)
-    this.loadJS()
-  },
-  beforeUnmount() {
-    document.removeEventListener('keydown', this.handleKeydowm, false)
-    document.removeEventListener('keyup', this.handleKeyup, false)
-    document.oncontextmenu = null
-  },
-  methods: {
-    ...mapActions(['selectWidget']),
-    async loadDone() {
-      await this.$nextTick()
-      ;(this.$refs as any).zoomControl.screenChange()
-      setTimeout(() => {
-        this.selectWidget({
-          uuid: '-1',
-        })
-        // this.$store.commit('setShowMoveable', false)
-      }, 100)
-    },
-    jump2word() {
-      window.open('https://xp.palxp.cn/#/articles/1687855172725')
-      // window.open('https://kdocs.cn/l/clmBsIkhve8d')
-    },
-  },
+const optionsChange = ({ downloadPercent, downloadText, downloadMsg = '', cancelText = '' }: TEmitChangeData) => {
+  typeof downloadPercent === 'number' && (state.downloadPercent = downloadPercent)
+  state.downloadText = downloadText
+  state.downloadMsg = downloadMsg
+  state.cancelText = cancelText
+}
+
+const cancel = () => {
+  state.downloadPercent = 100
+  window.open(`${window.location.protocol + '//' + window.location.host}/home?id=${route.query.id}`)
+}
+
+const {handleKeydowm, handleKeyup,} = shortcuts.methods
+
+// ...mapGetters(['dPage', 'dZoom']),
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydowm, false)
+  document.addEventListener('keyup', handleKeyup, false)
+  loadJS()
+})
+
+onBeforeMount(() => {
+  document.removeEventListener('keydown', handleKeydowm, false)
+  document.removeEventListener('keyup', handleKeyup, false)
+  document.oncontextmenu = null
+})
+// ...mapActions(['selectWidget']),
+
+async function loadDone() {
+  await nextTick()
+  if (!zoomControlRef.value) return
+  zoomControlRef.value.screenChange()
+  setTimeout(() => {
+    store.dispatch('selectWidget', { uuid: '-1' })
+    // selectWidget({
+    //   uuid: '-1',
+    // })
+    // this.$store.commit('setShowMoveable', false)
+  }, 100)
+}
+function jump2word() {
+  window.open('https://xp.palxp.cn/#/articles/1687855172725')
+  // window.open('https://kdocs.cn/l/clmBsIkhve8d')
+}
+
+defineExpose({
+  loadJS,
+  selectFile,
+  clear,
+  cancel,
+  optionsChange,
 })
 </script>
 
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index aae4180..3fb2562 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@@ -28,8 +28,15 @@ type TProps = {
   isDone?: boolean
 }
 
+export type TEmitChangeData = {
+  downloadPercent: number | null
+  downloadText: string
+  downloadMsg?: string
+  cancelText?: string
+}
+
 type TEmits = {
-  (event: 'change', data: { downloadPercent: number | null, downloadText: string, downloadMsg?: string, cancelText?: string }): void
+  (event: 'change', data: TEmitChangeData): void
   (event: 'update:modelValue', data: string): void
 }