From 361e9a8b03806a84c8f60a79e5c014ec71cedd2b Mon Sep 17 00:00:00 2001
From: ychy00001 <yangchunyu00001@163.com>
Date: Fri, 1 Mar 2024 10:17:18 +0800
Subject: [PATCH 1/8] bugfix #54

---
 src/components/modules/settings/colorSelect.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/modules/settings/colorSelect.vue b/src/components/modules/settings/colorSelect.vue
index 8eb18aa..f626cc8 100644
--- a/src/components/modules/settings/colorSelect.vue
+++ b/src/components/modules/settings/colorSelect.vue
@@ -57,7 +57,9 @@ export default defineComponent({
 
     onMounted(() => {
       if (props.modelValue) {
-        state.innerColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
+        let fixColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
+        // 当前@palxp/color-picker对部分小写16进制颜色处理有异常，统一转为大写
+        state.innerColor = fixColor.toLocaleUpperCase()
       }
     })
     const dropColor = async (e: any) => {

From 00a9fb62c4340090bd76d1301bca1d563daaf2c0 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Fri, 1 Mar 2024 23:02:30 +0800
Subject: [PATCH 2/8] code: some optimization

---
 .../modules/panel/wrap/CompListWrap.vue       |   6 +-
 .../modules/panel/wrap/GraphListWrap.vue      |   6 +-
 .../modules/panel/wrap/TextListWrap.vue       |   5 +-
 .../panel/wrap/components/photoList.vue       |   4 +-
 .../modules/widgets/wText/wText.vue           | 195 +++++++++---------
 .../modules/widgets/wText/wTextStyle.vue      |  11 +-
 6 files changed, 117 insertions(+), 110 deletions(-)

diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 817ed93..2d005e2 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -3,7 +3,7 @@
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表，主要用于文字组合列表
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-01-11 17:59:57
+ * @LastEditTime: 2024-02-29 16:54:28
 -->
 <template>
   <div class="wrap">
@@ -241,14 +241,14 @@ export default defineComponent({
     background: #f8fafc;
   }
   &__img {
-    cursor: pointer;
+    cursor: grab;
     width: 142px;
     height: 142px;
     padding: 4px;
     border-radius: 4px;
   }
   &__img-thumb {
-    cursor: pointer;
+    cursor: grab;
     width: 90px;
     height: 90px;
     background: #f8fafc;
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 935ecfa..d1f2f2c 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -3,7 +3,7 @@
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-11-24 11:14:28
+ * @LastEditTime: 2024-02-29 16:49:59
 -->
 <template>
   <div class="wrap">
@@ -217,14 +217,14 @@ export default defineComponent({
     background: #f8fafc;
   }
   &__img {
-    cursor: pointer;
+    cursor: grab;
     width: 142px;
     height: 142px;
     padding: 4px;
     border-radius: 4px;
   }
   &__img-thumb {
-    cursor: pointer;
+    cursor: grab;
     width: 90px;
     height: 90px;
     background: #f8fafc;
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index 53e7f83..d5ea897 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -70,7 +70,7 @@ export default {
         {
           text: '+ 添加文字',
           fontSize: 60,
-          fontWeight: 'bold',
+          fontWeight: 'normal',
         },
         // {
         //   text: '+ 添加文字',
@@ -97,8 +97,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-// Color variables (appears count calculates by raw css)
-@color0: #3b74f1; // Appears 2 times
+// @color0: #3b74f1;
 
 #text-list-wrap {
   display: flex;
diff --git a/src/components/modules/panel/wrap/components/photoList.vue b/src/components/modules/panel/wrap/components/photoList.vue
index c5ff774..c82cfc4 100644
--- a/src/components/modules/panel/wrap/components/photoList.vue
+++ b/src/components/modules/panel/wrap/components/photoList.vue
@@ -3,7 +3,7 @@
  * @Date: 2022-02-23 15:48:52
  * @Description: 图片列表组件 Bookshelf Layout 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-12-11 11:12:04
+ * @LastEditTime: 2024-02-29 16:52:37
 -->
 <template>
   <ul ref="listRef" class="img-list-wrap" :style="{ paddingBottom: isShort ? '15px' : '200px' }" @scroll="scrollEvent($event)">
@@ -207,7 +207,7 @@ export default defineComponent({
   &__img {
     // background: #f1f2f4;
     display: inline-block;
-    cursor: pointer;
+    cursor: grab;
     // margin: 0 6px 2px 0;
     margin-bottom: 3px;
     border-radius: 2px;
diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue
index 5df1bf4..45963b3 100644
--- a/src/components/modules/widgets/wText/wText.vue
+++ b/src/components/modules/widgets/wText/wText.vue
@@ -53,11 +53,13 @@
 // 文本组件
 const NAME = 'w-text'
 
-import { mapGetters, mapActions } from 'vuex'
+import { defineComponent, reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
 import { fontWithDraw } from '@/utils/widgets/loadFontRule'
 import getGradientOrImg from './getGradientOrImg.ts'
 
-export default {
+export default defineComponent({
   name: NAME,
   setting: {
     name: '文本',
@@ -97,116 +99,122 @@ export default {
     },
   },
   props: ['params', 'parent'],
-  data() {
-    return {
+  setup(props) {
+    const store = useStore()
+    const route = useRoute()
+    const state = reactive({
       loading: false,
       editable: false,
       loadFontDone: false,
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement']),
-    isDraw() {
-      return this.$route.name === 'Draw' && fontWithDraw
-    },
-  },
-  watch: {
-    params: {
-      async handler(nval) {
-        this.updateText()
-        if (this.loading) {
+    })
+    const widget = ref(null)
+    const editWrap = ref(null)
+
+    const dActiveElement = computed(() => store.getters.dActiveElement)
+    const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
+
+    onUpdated(() => {
+      updateRecord()
+    })
+
+    onMounted(() => {
+      updateRecord()
+      props.params.transform && (widget.value.style.transform = props.params.transform)
+      props.params.rotate && (widget.value.style.transform += `translate(0px, 0px) rotate(${props.params.rotate}) scale(1, 1)`)
+      // store.commit('updateRect')
+    })
+
+    watch(
+      () => props.params,
+      async (nval) => {
+        updateText()
+        if (state.loading) {
           return
         }
         let font = nval.fontClass
-        const isDone = font.value === this.loadFontDone
+        const isDone = font.value === state.loadFontDone
 
         if (font.url && !isDone) {
-          if (font.id && this.isDraw) {
+          if (font.id && isDraw.value) {
             // 如果为绘制模式，且开启了字体抽取，那么会跳过加载字体url的逻辑
             // 此前该功能在demo中存在换行bug，实际上是由于抽取字体时忽略了空格导致的
-            this.loading = false
+            state.loading = false
             return
           }
-          this.loading = !this.isDraw
+          state.loading = !isDraw.value
           const loadFont = new window.FontFace(font.value, `url(${font.url})`)
           await loadFont.load()
           document.fonts.add(loadFont)
-          this.loadFontDone = font.value
-          this.loading = false
+          state.loadFontDone = font.value
+          state.loading = false
         } else {
-          this.loading = false
+          state.loading = false
         }
       },
-      immediate: true,
-      deep: true,
-    },
-    editable(value) {
-      this.updateWidgetData({
-        uuid: this.params.uuid,
-        key: 'editable',
-        value,
-        pushHistory: false,
-      })
-    },
-  },
-  updated() {
-    this.updateRecord()
-  },
-  async mounted() {
-    this.updateRecord()
-    // await this.$nextTick()
-    this.params.transform && (this.$refs.widget.style.transform = this.params.transform)
-    this.params.rotate && (this.$refs.widget.style.transform += `translate(0px, 0px) rotate(${this.params.rotate}) scale(1, 1)`)
-    // this.$store.commit('updateRect')
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'pushHistory']),
-    getGradientOrImg,
-    updateRecord() {
-      if (this.dActiveElement.uuid === this.params.uuid) {
-        let record = this.dActiveElement.record
-        record.width = this.$refs.widget.offsetWidth
-        record.height = this.$refs.widget.offsetHeight
-        record.minWidth = this.params.fontSize
-        record.minHeight = this.params.fontSize * this.params.lineHeight
-        this.writingText()
+      { immediate: true, deep: true },
+    )
+
+    watch(
+      () => state.editable,
+      (value) => {
+        store.dispatch('updateWidgetData', {
+          uuid: props.params.uuid,
+          key: 'editable',
+          value,
+          pushHistory: false,
+        })
+      },
+    )
+
+    function updateRecord() {
+      if (dActiveElement.value.uuid === props.params.uuid) {
+        let record = dActiveElement.value.record
+        record.width = widget.value.offsetWidth
+        record.height = widget.value.offsetHeight
+        record.minWidth = props.params.fontSize
+        record.minHeight = props.params.fontSize * props.params.lineHeight
+        writingText()
       }
-    },
-    updateText(e) {
-      const value = e ? e.target.innerHTML : this.params.text.replace(/\n/g, '<br/>')
-      // const value = (e ? e.target.innerText : this.params.text).replace(/<br\/>/g, '\r\n').replace(/&nbsp;/g, ' ')
-      if (value !== this.params.text) {
-        this.updateWidgetData({
-          uuid: this.params.uuid,
+    }
+
+    function updateText(e) {
+      const value = e ? e.target.innerHTML : props.params.text.replace(/\n/g, '<br/>')
+      // const value = (e ? e.target.innerText : props.params.text).replace(/<br\/>/g, '\r\n').replace(/&nbsp;/g, ' ')
+      if (value !== props.params.text) {
+        store.dispatch('updateWidgetData', {
+          uuid: props.params.uuid,
           key: 'text',
           value,
           pushHistory: false,
         })
       }
-    },
-    writingText(e) {
-      // this.updateText(e)
+    }
+
+    function writingText(e) {
+      // updateText(e)
       // TODO: 修正文字选框高度
-      const el = this.$refs.editWrap || this.$refs.widget
-      this.updateWidgetData({
-        uuid: this.params.uuid,
+      const el = editWrap.value || widget.value
+      store.dispatch('updateWidgetData', {
+        uuid: props.params.uuid,
         key: 'height',
         value: el.offsetHeight,
         pushHistory: false,
       })
-      this.$store.commit('updateRect')
-    },
-    writeDone(e) {
-      this.editable = false
+      store.commit('updateRect')
+    }
+
+    function writeDone(e) {
+      state.editable = false
       setTimeout(() => {
-        this.pushHistory('文字修改')
+        store.dispatch('pushHistory', '文字修改')
       }, 100)
-      this.updateText(e)
-    },
-    dblclickText(e) {
-      // this.$store.commit('setShowMoveable', false)
-      this.editable = true
-      const el = this.$refs.editWrap || this.$refs.widget
+      updateText(e)
+    }
+
+    function dblclickText(e) {
+      // store.commit('setShowMoveable', false)
+      state.editable = true
+      const el = editWrap.value || widget.value
       setTimeout(() => {
         el.focus()
         if (document.selection) {
@@ -220,9 +228,21 @@ export default {
           window.getSelection().addRange(range)
         }
       }, 100)
-    },
+    }
+
+    return {
+      ...toRefs(state),
+      getGradientOrImg,
+      updateRecord,
+      writingText,
+      updateText,
+      writeDone,
+      dblclickText,
+      widget,
+      editWrap,
+    }
   },
-}
+})
 </script>
 
 <style lang="less" scoped>
@@ -247,13 +267,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-
-// @font-face {
-//   font-family: 'FONT-AZPPT';
-//   font-display: swap;
-//   src: url('./AZPPT.ttf') format('truetype');
-// }
-// .FONT-AZPPT {
-//   font-family: 'FONT-AZPPT';
-// }
 </style>
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index 352c244..89582ee 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -214,20 +214,17 @@ export default {
       for (let i = 0; i < this.styleIconList1.length; ++i) {
         let key = this.styleIconList1[i].key
         this.styleIconList1[i].select = false
+        const [unchecked, checked] = this.styleIconList1[i].value
         switch (key) {
           case 'fontWeight':
-          case 'fontStyle':
-            if (this.innerElement[key] !== 'normal') {
-              this.styleIconList1[i].select = true
-            }
-            break
           case 'textDecoration':
-            if (this.innerElement[key] !== this.styleIconList1[i].value[0] && this.innerElement[key] == this.styleIconList1[i].value[1]) {
+          case 'fontStyle':
+            if (this.innerElement[key] !== unchecked && this.innerElement[key] == checked) {
               this.styleIconList1[i].select = !this.styleIconList1[i].select
             }
             break
           case 'writingMode':
-            if (this.innerElement[key] !== this.styleIconList1[i].value[0]) {
+            if (this.innerElement[key] !== unchecked) {
               this.styleIconList1[i].select = true
             }
             break

From 096c0f4ae089ee2c85ea9566f0d365364e287f7e Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Sat, 2 Mar 2024 01:13:13 +0800
Subject: [PATCH 3/8] docs: update readme

---
 README.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/README.md b/README.md
index 6bbed97..8f28b75 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,16 @@ npm run serve
 
 或许你在工作中有类似的需求，或许你对开发编辑器感兴趣，也希望这个项目能给到你一些微薄帮助！
 
+### 交流群
+
+| 作者微信：备注加群 | 公众号 |
+| --- | --- |
+| ![](https://xp.palxp.cn/images/2024-3-1-1709306328344.png) | ![](https://xp.palxp.cn/images/2024-3-1-1709306365949.png) |
+
+### 友情赞助商
+
+[![](https://xp.palxp.cn/images/2024-3-1-1709306907030.png)](https://dooring.vip/)
+
 ### `Star`
 
 开源不易，别忘了给本项目点个 **Star** ~

From e57c1c39644de231e13acb6563404d9c4e284782 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Sat, 2 Mar 2024 01:15:59 +0800
Subject: [PATCH 4/8] docs: update readme

---
 README.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 8f28b75..5e4872a 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,9 @@ 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/)
 
 ### 交流群
 
@@ -75,10 +77,6 @@ npm run serve
 | --- | --- |
 | ![](https://xp.palxp.cn/images/2024-3-1-1709306328344.png) | ![](https://xp.palxp.cn/images/2024-3-1-1709306365949.png) |
 
-### 友情赞助商
-
-[![](https://xp.palxp.cn/images/2024-3-1-1709306907030.png)](https://dooring.vip/)
-
 ### `Star`
 
 开源不易，别忘了给本项目点个 **Star** ~

From d7e1c504efee3ac90550a199113c041c786fdbd7 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Sat, 2 Mar 2024 19:30:28 +0800
Subject: [PATCH 5/8] code: wText vue3 optimize

---
 .../modules/widgets/wText/wText.vue           |   2 +-
 .../modules/widgets/wText/wTextStyle.vue      | 377 +++++++++---------
 2 files changed, 190 insertions(+), 189 deletions(-)

diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue
index 45963b3..a5943aa 100644
--- a/src/components/modules/widgets/wText/wText.vue
+++ b/src/components/modules/widgets/wText/wText.vue
@@ -49,7 +49,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // 文本组件
 const NAME = 'w-text'
 
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index 89582ee..28175cf 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -34,7 +34,7 @@
         <!-- <color-select v-model="innerElement.backgroundColor" label="背景颜色" @finish="(value) => finish('backgroundColor', value)" /> -->
       </div>
       <div class="line-layout style-item">
-        <effect-wrap v-model="innerElement.textEffects" :data="innerElement" :degree="innerElement.degree" @select="testEffect" />
+        <effect-wrap v-model="innerElement.textEffects" :data="innerElement" :degree="innerElement.degree" @select="selectTextEffect" />
       </div>
       <icon-item-select class="style-item" :data="layerIconList" @finish="layerAction" />
       <icon-item-select class="style-item" :data="alignIconList" @finish="alignAction" />
@@ -48,13 +48,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // 文本组件样式
 const NAME = 'w-text-style'
-// import api from '@/api'
-// import _config from '@/config'
-import { mapGetters, mapActions } from 'vuex'
-import { styleIconList1, styleIconList2, alignIconList } from '../../../../assets/data/TextIconsData'
+import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import { styleIconList1, styleIconList2, alignIconList } from '@/assets/data/TextIconsData'
 import layerIconList from '@/assets/data/LayerIconList'
 import numberInput from '../../settings/numberInput.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -66,190 +66,191 @@ import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter.ts'
 
-export default {
+export default defineComponent({
   name: NAME,
-  components: { numberInput, colorSelect, iconItemSelect, textInputArea, valueSelect, effectWrap, numberSlider },
-  data() {
-    return {
-      activeNames: [],
-      innerElement: {},
-      tag: false,
-      ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'text', 'color', 'backgroundColor'],
-      fontSizeList: [12, 14, 24, 26, 28, 30, 36, 48, 60, 72, 96, 108, 120, 140, 180, 200, 250, 300, 400, 500],
-      fontClassList: [], // 不能设空字体系统默认字体，因为截图服务的默认字体无法保证一致
-      lineHeightList: [1, 1.5, 2],
-      letterSpacingList: [0, 10, 25, 50, 75, 100, 200],
-      layerIconList,
-      styleIconList1,
-      styleIconList2,
-      alignIconList,
+    components: { numberInput, colorSelect, iconItemSelect, textInputArea, valueSelect, effectWrap, numberSlider },
+    setup() {
+      const store = useStore()
+      const route = useRoute()
+      const state = reactive({
+        activeNames: [],
+        innerElement: {},
+        tag: false,
+        ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'text', 'color', 'backgroundColor'],
+        fontSizeList: [12, 14, 24, 26, 28, 30, 36, 48, 60, 72, 96, 108, 120, 140, 180, 200, 250, 300, 400, 500],
+        fontClassList: [], // 不能设空字体系统默认字体，因为截图服务的默认字体无法保证一致
+        lineHeightList: [1, 1.5, 2],
+        letterSpacingList: [0, 10, 25, 50, 75, 100, 200],
+        layerIconList,
+        styleIconList1,
+        styleIconList2,
+        alignIconList,
+      })
+      const dActiveElement = computed(() => store.getters.dActiveElement)
+      const dMoving = computed(() => store.getters.dMoving)
+      // const isDraw = computed(() => route.name === 'Draw')
+
+      watch(() => dActiveElement.value, () => {
+        change()
+      }, { deep: true })
+
+      watch(() => state.innerElement, () => {
+        changeValue()
+      }, { deep: true })
+
+      let timer: any = null
+
+      onMounted(() => {
+        change()
+        setTimeout(() => {
+          loadFonts()
+        }, 100)
+      })
+
+      function change() {
+        if (timer) {
+          return
+        }
+        timer = true
+        setTimeout(() => {
+          timer = null
+        }, 300)
+        state.tag = true
+        state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+        changeStyleIconList()
+      }
+
+      function changeValue() {
+        if (state.tag) {
+          state.tag = false
+          return
+        }
+        if (dMoving.value) {
+          return
+        }
+        // TODO 修改数值
+        for (let key in state.innerElement) {
+          if (state.ingoreKeys.indexOf(key) !== -1) {
+            dActiveElement.value[key] = state.innerElement[key]
+          } else if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
+            // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
+            store.dispatch('updateWidgetData', {
+              uuid: dActiveElement.value.uuid,
+              key,
+              value: state.innerElement[key],
+              pushHistory: false,
+            })
+          }
+        }
+      }
+
+      function selectTextEffect({ key, value, style }: any) {
+        const uuid = dActiveElement.value.uuid
+        store.commit('setWidgetStyle', { uuid, key, value })
+        if (style) {
+          finish('color', style.color || '')
+        }
+      }
+
+      function loadFonts() {
+        const localFonts = useFontStore.list
+        const fontLists = { 当前页面: [], 中文: [], 英文: [] }
+        for (const font of localFonts) {
+          const { id, oid, value, url, alias, preview, lang } = font
+          const item = { id, oid, value, url, alias, preview }
+          lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
+        }
+        fontLists['当前页面'] = usePageFontsFilter()
+        state.fontClassList = fontLists
+      }
+
+      function finish(key, value) {
+        store.dispatch('updateWidgetData', {
+          uuid: dActiveElement.value.uuid,
+          key,
+          value,
+          pushHistory: false,
+        })
+        setTimeout(() => {
+          key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
+        }, 300)
+      }
+
+      function layerAction(item) {
+        store.dispatch('updateLayerIndex', {
+          uuid: dActiveElement.value.uuid,
+          value: item.value,
+        })
+      }
+
+      async function textStyleAction(item) {
+        let value = item.key === 'textAlign' ? item.value : item.value[item.select ? 1 : 0]
+        state.innerElement[item.key] = value
+        // TODO: 对竖版文字的特殊处理
+        item.key === 'writingMode' && relationChange()
+        await nextTick()
+        store.commit('updateRect')
+      }
+
+      async function alignAction(item) {
+        store.dispatch('updateAlign', {
+          align: item.value,
+          uuid: dActiveElement.value.uuid,
+        })
+        await nextTick()
+        store.commit('updateRect')
+      }
+
+      function changeStyleIconList() {
+        for (let i = 0; i < state.styleIconList1.length; ++i) {
+          let key = state.styleIconList1[i].key
+          state.styleIconList1[i].select = false
+          const [unchecked, checked] = state.styleIconList1[i].value
+          switch (key) {
+            case 'fontWeight':
+            case 'textDecoration':
+            case 'fontStyle':
+              if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
+                state.styleIconList1[i].select = !state.styleIconList1[i].select
+              }
+              break
+            case 'writingMode':
+              if (state.innerElement[key] !== unchecked) {
+                state.styleIconList1[i].select = true
+              }
+              break
+          }
+        }
+        for (let i = 0; i < state.styleIconList2.length; i++) {
+          let key = state.styleIconList2[i].key
+          state.styleIconList2[i].select = false
+          if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
+            state.styleIconList2[i].select = true
+            continue
+          }
+        }
+      }
+
+      function relationChange() {
+        setTimeout(() => {
+          if (dActiveElement.value.writingMode) {
+            const w_record = dActiveElement.value.width
+            state.innerElement.width = dActiveElement.value.height
+            state.innerElement.height = w_record
+          }
+        }, 10)
+      }
+
+      return {
+        ...toRefs(state),
+        selectTextEffect,
+        textStyleAction,
+        finish,
+        layerAction,
+        alignAction
+      }
     }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving']),
-    isDraw() {
-      return this.$route.name === 'Draw'
-    },
-  },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.timer = null
-    this.change()
-    setTimeout(() => {
-      this.loadFonts()
-    }, 100)
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'pushHistory']),
-    testEffect({ key, value, style }) {
-      console.log('选择回调')
-      const uuid = this.dActiveElement.uuid
-      this.$store.commit('setWidgetStyle', { uuid, key, value })
-      if (style) {
-        this.finish('color', style.color || '')
-      }
-    },
-    loadFonts() {
-      // if (!this.isDraw) {
-      // useFontStore().init()
-      const localFonts = useFontStore.list
-      const fontLists = { 当前页面: [], 中文: [], 英文: [] }
-      for (const font of localFonts) {
-        const { id, oid, value, url, alias, preview, lang } = font
-        const item = { id, oid, value, url, alias, preview }
-        lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
-      }
-      fontLists['当前页面'] = usePageFontsFilter()
-      this.fontClassList = fontLists
-      // }
-      // const isDev = process.env.NODE_ENV === 'development'
-      // if (!isDev) {
-      //   const { list } = await api.material.getFonts() // { name: 'SourceHanSansCN-Normal' }
-      //   this.fontClassList = this.fontClassList.concat(list)
-      // }
-    },
-    change() {
-      if (this.timer) {
-        return
-      }
-      this.timer = true
-      setTimeout(() => {
-        this.timer = null
-      }, 300)
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
-      this.changeStyleIconList()
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      // TODO 修改数值
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          // console.log('???', key)
-          // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key,
-            value: this.innerElement[key],
-            pushHistory: false,
-          })
-        }
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
-        pushHistory: false,
-      })
-      setTimeout(() => {
-        key === 'fontClass' && (this.fontClassList['当前页面'] = usePageFontsFilter())
-      }, 300)
-    },
-    layerAction(item) {
-      this.updateLayerIndex({
-        uuid: this.dActiveElement.uuid,
-        value: item.value,
-      })
-    },
-    async textStyleAction(item) {
-      let value = item.key === 'textAlign' ? item.value : item.value[item.select ? 1 : 0]
-      this.innerElement[item.key] = value
-      // TODO: 对竖版文字的特殊处理
-      item.key === 'writingMode' && this.relationChange()
-      await this.$nextTick()
-      this.$store.commit('updateRect')
-    },
-    async alignAction(item) {
-      this.updateAlign({
-        align: item.value,
-        uuid: this.dActiveElement.uuid,
-      })
-      await this.$nextTick()
-      this.$store.commit('updateRect')
-    },
-    changeStyleIconList() {
-      for (let i = 0; i < this.styleIconList1.length; ++i) {
-        let key = this.styleIconList1[i].key
-        this.styleIconList1[i].select = false
-        const [unchecked, checked] = this.styleIconList1[i].value
-        switch (key) {
-          case 'fontWeight':
-          case 'textDecoration':
-          case 'fontStyle':
-            if (this.innerElement[key] !== unchecked && this.innerElement[key] == checked) {
-              this.styleIconList1[i].select = !this.styleIconList1[i].select
-            }
-            break
-          case 'writingMode':
-            if (this.innerElement[key] !== unchecked) {
-              this.styleIconList1[i].select = true
-            }
-            break
-        }
-      }
-      for (let i = 0; i < this.styleIconList2.length; i++) {
-        let key = this.styleIconList2[i].key
-        this.styleIconList2[i].select = false
-        if (key === 'textAlign' && this.innerElement[key] === this.styleIconList2[i].value) {
-          this.styleIconList2[i].select = true
-          continue
-        }
-      }
-    },
-    relationChange() {
-      setTimeout(() => {
-        if (this.dActiveElement.writingMode) {
-          const w_record = this.dActiveElement.width
-          this.innerElement.width = this.dActiveElement.height
-          this.innerElement.height = w_record
-        }
-      }, 10)
-    },
-  },
-}
+})
 </script>
 
 <style lang="less" scoped>

From 98c30e1f8d909aecc3b642c849ec9d1ac226acae Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Sat, 2 Mar 2024 13:25:54 +0000
Subject: [PATCH 6/8] feat: add methods type

---
 src/api/album.ts                              |  7 +++-
 src/api/material.ts                           | 17 +++++++-
 .../methods/DesignFeatures/setComponents.ts   | 16 ++++----
 src/common/methods/QiNiu.ts                   | 20 ++++-----
 src/common/methods/addMouseWheel.ts           | 20 +++++----
 src/common/methods/confirm.ts                 |  8 ++--
 src/common/methods/download/download.ts       | 23 ++++++-----
 src/common/methods/fonts/index.ts             | 11 +++--
 src/common/methods/fonts/utils.ts             | 40 +++++++++---------
 src/common/methods/handleTransform.ts         | 12 +++---
 src/common/methods/target.ts                  | 22 +++++-----
 src/types/global.d.ts                         | 41 +++++++++++++++++--
 12 files changed, 151 insertions(+), 86 deletions(-)

diff --git a/src/api/album.ts b/src/api/album.ts
index 1cb677f..14425c6 100644
--- a/src/api/album.ts
+++ b/src/api/album.ts
@@ -21,7 +21,12 @@ export const init = (params: Type.Object = {}) => fetch(API.init, params, 'post'
 
 export const getPicList = (params: Type.Object = {}) => fetch(API.getList, params)
 
-export const getToken = (params: Type.Object = {}) => fetch(API.getToken, params)
+type TGetTokenParam = {
+  bucket: string,
+  name: string
+}
+
+export const getToken = (params: TGetTokenParam) => fetch<string>(API.getToken, params)
 
 export const deletePic = (params: Type.Object = {}) => fetch(API.delOne, params, 'post')
 
diff --git a/src/api/material.ts b/src/api/material.ts
index 2f28160..8d452e5 100644
--- a/src/api/material.ts
+++ b/src/api/material.ts
@@ -43,8 +43,23 @@ type TGetListResult = TCommResResult<{
 // 获取素材列表：
 export const getList = (params: TGetListParam) => fetch<TGetListResult>('design/material', params)
 
+export type TGetFontParam = {
+  pageSize?: number
+}
+
+/** 字体item数据 */
+export type TGetFontItemData = {
+  id: number
+  alias: string
+  oid: string
+  value: string
+  preview: string
+  woff: string
+  lang: string
+}
+
 // 获取字体
-export const getFonts = (params: Type.Object = {}) => fetch('design/fonts', params)
+export const getFonts = (params: TGetFontParam = {}) => fetch<TPageRequestResult<TGetFontItemData[]>>('design/fonts', params)
 export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('design/font_sub', params, 'get', {}, extra)
 
 // 图库列表
diff --git a/src/common/methods/DesignFeatures/setComponents.ts b/src/common/methods/DesignFeatures/setComponents.ts
index d718b13..4152131 100644
--- a/src/common/methods/DesignFeatures/setComponents.ts
+++ b/src/common/methods/DesignFeatures/setComponents.ts
@@ -2,19 +2,19 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-22 15:06:14
  * @Description: 设置图片类型元素
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-07 14:57:51
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 11:50:00
  */
 import store from '@/store'
-export default async function setCompData(item: any) {
-  const group = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
-  let parent: any = {}
+export default async function setCompData(item: TCommonItemData[] | string) {
+  const group: TCommonItemData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
+  let parent: Partial<TCommonItemData> = {}
   Array.isArray(group) &&
-    group.forEach((element: any) => {
+    group.forEach((element) => {
       element.type === 'w-group' && (parent = element)
     })
   const { width: screenWidth, height: screenHeight } = store.getters.dPage
-  const { width: imgWidth, height: imgHeight } = parent
+  const { width: imgWidth = 0, height: imgHeight = 0 } = parent
   let ratio = 1
   // 先限制在画布内，保证不超过边界
   if (imgWidth > screenWidth || imgHeight > screenHeight) {
@@ -23,7 +23,7 @@ export default async function setCompData(item: any) {
   // 根据画布缩放比例再进行一次调整
   if (ratio < 1) {
     ratio *= store.getters.dZoom / 100
-    group.forEach((element: any) => {
+    group.forEach((element) => {
       element.fontSize && (element.fontSize *= ratio)
       element.width *= ratio
       element.height *= ratio
diff --git a/src/common/methods/QiNiu.ts b/src/common/methods/QiNiu.ts
index 31dd1e7..18de8fd 100644
--- a/src/common/methods/QiNiu.ts
+++ b/src/common/methods/QiNiu.ts
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-29 20:35:31
  * @Description: 七牛上传方法
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-05 16:11:55
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 11:50:00
  */
 import dayjs from 'dayjs'
 import api from '@/api/album'
@@ -15,13 +15,13 @@ interface Options {
 }
 
 export default {
-  upload: async (file: File, options: Options, cb?: Function) => {
-    const win: any = window
+  upload: async (file: File, options: Options, cb?: IQiniuSubscribeCb) => {
+    const win = window
     let name = ''
     const suffix = file.type.split('/')[1] || 'png' // 文件后缀
     if (!options.fullPath) {
       // const DT: any = await exifGetTime(file) // 照片时间
-      const DT: any = new Date()
+      const DT = new Date()
       const YM = `${dayjs(DT).format('YYYY')}/${dayjs(DT).format('MM')}/` // 文件时间分类
       const keyName = YM + new Date(DT).getTime()
       const prePath = options.prePath ? options.prePath + '/' : ''
@@ -32,15 +32,15 @@ export default {
       useCdnDomain: true, // 使用cdn加速
     }
     const observable = win.qiniu.upload(file, name, token, {}, exOption)
-    return new Promise((resolve: Function, reject: Function) => {
+    return new Promise((resolve: IQiniuSubscribeCb, reject: (err: string) => void) => {
       observable.subscribe({
-        next: (result: any) => {
-          cb && cb(result) // result.total.percent -> 展示进度
+        next: (result) => {
+          cb?.(result) // result.total.percent -> 展示进度
         },
-        error: (e: any) => {
+        error: (e) => {
           reject(e)
         },
-        complete: (result: any) => {
+        complete: (result) => {
           resolve(result)
           // cb && cb(result) // result.total.percent -> 展示进度
         },
diff --git a/src/common/methods/addMouseWheel.ts b/src/common/methods/addMouseWheel.ts
index 20a730c..6be1dae 100644
--- a/src/common/methods/addMouseWheel.ts
+++ b/src/common/methods/addMouseWheel.ts
@@ -2,12 +2,19 @@
  * @Author: ShawnPhang
  * @Date: 2022-03-25 13:43:07
  * @Description: 添加滚动监听
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-25 14:32:19
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 11:50:00
  */
 import store from '@/store'
-export default function(el: Element | string, cb: Function, altLimit: boolean = true) {
+
+type TAddEventCb = (e: Event) => void
+type TAddEventObj = {
+  attachEvent?: HTMLElement["addEventListener"]
+} & HTMLElement
+
+export default function(el: HTMLElement | string, cb: Function, altLimit: boolean = true) {
   const box = typeof el === 'string' ? document.getElementById(el) : el
+  if (!box) return;
   addEvent(box, 'mousewheel', (e: any) => {
     const ev = e || window.event
     const down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0
@@ -16,10 +23,7 @@ export default function(el: Element | string, cb: Function, altLimit: boolean =
     // } else {
     //   console.log('鼠标滚轮向上++++++++++')
     // }
-    if (altLimit && store.getters.dAltDown) {
-      ev.preventDefault()
-      cb(down)
-    } else if (!altLimit) {
+    if ((altLimit && store.getters.dAltDown) || !altLimit) {
       ev.preventDefault()
       cb(down)
     }
@@ -27,7 +31,7 @@ export default function(el: Element | string, cb: Function, altLimit: boolean =
   })
 }
 
-function addEvent(obj: any, xEvent: string, fn: Function) {
+function addEvent(obj: TAddEventObj, xEvent: keyof HTMLElementEventMap, fn: TAddEventCb) {
   if (obj.attachEvent) {
     obj.attachEvent('on' + xEvent, fn)
   } else {
diff --git a/src/common/methods/confirm.ts b/src/common/methods/confirm.ts
index 49d3b51..fac9901 100644
--- a/src/common/methods/confirm.ts
+++ b/src/common/methods/confirm.ts
@@ -2,11 +2,11 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-03 16:30:18
  * @Description: Type: success / info / warning / error
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-02-03 16:43:01
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 11:50:00
  */
-import { ElMessageBox } from 'element-plus'
-export default (title: string = '提示', message: string = '', type: any = 'success') => {
+import { ElMessageBox, messageType } from 'element-plus'
+export default (title: string = '提示', message: string = '', type: messageType = 'success') => {
   return new Promise((resolve: Function) => {
     ElMessageBox.confirm(message, title, {
       confirmButtonText: '确定',
diff --git a/src/common/methods/download/download.ts b/src/common/methods/download/download.ts
index 9a82513..8dfa43d 100644
--- a/src/common/methods/download/download.ts
+++ b/src/common/methods/download/download.ts
@@ -2,11 +2,14 @@
  * @Author: ShawnPhang
  * @Date: 2021-09-30 15:52:59
  * @Description: 下载远程图片
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-12 16:54:51
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 11:50:00
  */
-export default (src: string, cb: Function) => {
-  return new Promise((resolve: any) => {
+
+type TCallBack = (progress: number, xhr: XMLHttpRequest) => void
+
+export default (src: string, cb: TCallBack) => {
+  return new Promise<void>((resolve) => {
     // const image = new Image()
     // // 解决跨域 Canvas 污染问题
     // image.setAttribute('crossOrigin', 'anonymous')
@@ -32,10 +35,10 @@ export default (src: string, cb: Function) => {
 
     fetchImageDataFromUrl(src, (progress: number, xhr: XMLHttpRequest) => {
       cb(progress, xhr)
-    }).then((res: any) => {
+    }).then((res) => {
       const reader = new FileReader()
       reader.onload = function (event) {
-        const txt: any = event?.target?.result
+        const txt = event?.target?.result as string
         // image.src = txt
         const a = document.createElement('a')
         const mE = new MouseEvent('click')
@@ -55,17 +58,17 @@ export default (src: string, cb: Function) => {
   })
 }
 
-function fetchImageDataFromUrl(url: string, cb: Function) {
-  return new Promise((resolve) => {
+function fetchImageDataFromUrl(url: string, cb: TCallBack) {
+  return new Promise<null>((resolve) => {
     const xhr = new XMLHttpRequest()
-    let totalLength: any = ''
+    let totalLength: string | number = ''
     xhr.open('GET', url)
     xhr.responseType = 'blob'
     xhr.onreadystatechange = function () {
       totalLength = Number(xhr.getResponseHeader('content-length')) // 'cache-control'
     }
     xhr.onprogress = function (event) {
-      cb((event.loaded / totalLength) * 100, xhr)
+      cb((event.loaded / Number(totalLength)) * 100, xhr)
     }
     xhr.onload = function () {
       if (xhr.status < 400) resolve(this.response)
diff --git a/src/common/methods/fonts/index.ts b/src/common/methods/fonts/index.ts
index 8e38d12..9f5dacc 100644
--- a/src/common/methods/fonts/index.ts
+++ b/src/common/methods/fonts/index.ts
@@ -6,11 +6,14 @@
  * @LastEditTime: 2023-10-13 01:30:33
  */
 // import { isSupportFontFamily, blob2Base64 } from './utils'
-import { getFonts } from '@/api/material'
+import { TGetFontItemData, getFonts } from '@/api/material'
 
 const nowVersion = '2' // 当前字体文件版本更新，将刷新前端缓存
 
-const fontList: any = []
+/** 字体item类型 */
+export type TFontItemData = { url: string } & Omit<TGetFontItemData, "woff">
+
+const fontList: TFontItemData[] = []
 // const download: any = {}
 export const useFontStore = {
   list: fontList,
@@ -18,7 +21,7 @@ export const useFontStore = {
   async init() {
     this.list = []
     localStorage.getItem('FONTS_VERSION') !== nowVersion && localStorage.removeItem('FONTS')
-    const localFonts: any = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : []
+    const localFonts: TFontItemData[] = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : []
     if (localFonts.length > 0) {
       this.list.push(...localFonts)
     }
@@ -26,7 +29,7 @@ export const useFontStore = {
     if (this.list.length === 0) {
       const res = await getFonts({ pageSize: 400 })
       this.list.unshift(
-        ...res.list.map((x: any) => {
+        ...res.list.map((x) => {
           const { id, alias, oid, value, preview, woff, lang } = x
           return { id, oid, value, preview, alias, url: woff, lang }
         }),
diff --git a/src/common/methods/fonts/utils.ts b/src/common/methods/fonts/utils.ts
index b5fc953..3407a18 100644
--- a/src/common/methods/fonts/utils.ts
+++ b/src/common/methods/fonts/utils.ts
@@ -70,27 +70,27 @@ export function generateFontStyle(name: string, url: string): HTMLStyleElement {
 }
 
 // 找到使用到的所有字体
-export function filterSkyFonts() {
-  const fonts: string[] = []
-  // const textClouds = sky.state.clouds.filter(
-  //   (cloud) => cloud.type === CLOUD_TYPE.text,
-  // );
-  const textClouds: any = []
+// export function filterSkyFonts() {
+//   const fonts: string[] = []
+//   // const textClouds = sky.state.clouds.filter(
+//   //   (cloud) => cloud.type === CLOUD_TYPE.text,
+//   // );
+//   const textClouds: any = []
 
-  ;(textClouds as unknown as CloudText[]).forEach((cloud) => {
-    // 找到文字组件字体
-    if (cloud.fontFamily && !fonts.includes(cloud.fontFamily)) {
-      fonts.push(cloud.fontFamily)
-    }
-    // 找到文字组件子级字体
-    cloud.texts.forEach((text) => {
-      if (text.fontFamily && !fonts.includes(text.fontFamily)) {
-        fonts.push(text.fontFamily)
-      }
-    })
-  })
-  return fonts
-}
+//   ;(textClouds as unknown as CloudText[]).forEach((cloud) => {
+//     // 找到文字组件字体
+//     if (cloud.fontFamily && !fonts.includes(cloud.fontFamily)) {
+//       fonts.push(cloud.fontFamily)
+//     }
+//     // 找到文字组件子级字体
+//     cloud.texts.forEach((text) => {
+//       if (text.fontFamily && !fonts.includes(text.fontFamily)) {
+//         fonts.push(text.fontFamily)
+//       }
+//     })
+//   })
+//   return fonts
+// }
 
 export function base642Blob(b64Data: string, contentType = '', sliceSize = 512) {
   const byteCharacters = atob(b64Data)
diff --git a/src/common/methods/handleTransform.ts b/src/common/methods/handleTransform.ts
index aced976..32a64c0 100644
--- a/src/common/methods/handleTransform.ts
+++ b/src/common/methods/handleTransform.ts
@@ -2,17 +2,17 @@
  * @Author: ShawnPhang
  * @Date: 2022-01-31 10:45:53
  * @Description: 用于修改transform字符串
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-02-18 16:54:13
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 11:50:00
  */
-export function getTransformAttribute(target: any, attr: string = '') {
+export function getTransformAttribute(target: HTMLElement, attr: string = '') {
   const tf = target.style.transform
   const iof = tf.indexOf(attr)
   const half = tf.substring(iof + attr.length + 1)
   return half.substring(0, half.indexOf(')'))
 }
 
-export function setTransformAttribute(target: any, attr: string, value: string | number = 0) {
+export function setTransformAttribute(target: HTMLElement, attr: string, value: string | number = 0) {
   const tf = target?.style.transform
   if (!tf) {
     return
@@ -24,10 +24,10 @@ export function setTransformAttribute(target: any, attr: string, value: string |
   target.style.transform = FRONT + value + END
 }
 
-export function getMatrix(params: any) {
+export function getMatrix(params: Record<string, any>) {
   const result = []
   for (const key in params) {
-    if (Object.prototype.hasOwnProperty.call(params, key)) {
+    if (Object.hasOwn(params, key)) {
       result.push(params[key])
     }
   }
diff --git a/src/common/methods/target.ts b/src/common/methods/target.ts
index 6a7bd50..71cc93c 100644
--- a/src/common/methods/target.ts
+++ b/src/common/methods/target.ts
@@ -8,17 +8,17 @@
 // TODO: Group类型比较特殊，所以需要全量循环并判断是否为group
 const arr = ['w-text', 'w-image', 'w-svg', 'w-group', 'w-qrcode']
 
-export function getTarget(currentTarget: any) {
-  let collector: any[] = []
-  let groupTarger: any = null
-  let saveTarger: any = null
+export function getTarget(currentTarget: HTMLElement) {
+  let collector: string[] = []
+  let groupTarger: HTMLElement | null = null
+  let saveTarger: HTMLElement | null = null
   return new Promise((resolve) => {
-    function findTarget(target: any) {
+    function findTarget(target: HTMLElement | null) {
       if (!target || target.id === 'page-design') {
         if (collector.length > 1) {
           resolve(groupTarger)
         } else {
-          resolve(saveTarger || currentTarget)
+          resolve(saveTarger ?? currentTarget)
         }
         return
       }
@@ -37,12 +37,12 @@ export function getTarget(currentTarget: any) {
   })
 }
 
-export function getFinalTarget(currentTarget: any) {
-  let collector: any[] = []
-  let groupTarger: any = null
-  let saveTarger: any = null
+export function getFinalTarget(currentTarget: HTMLElement) {
+  let collector: string[] = []
+  let groupTarger: HTMLElement | null = null
+  let saveTarger: HTMLElement | null = null
   return new Promise((resolve) => {
-    function findTarget(target: any) {
+    function findTarget(target: HTMLElement | null) {
       if (!target || target.id === 'page-design') {
         resolve(target)
         return
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index efc7432..2306063 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -7,13 +7,48 @@ type TCommResResult<T> = {
   result: T
 }
 
-
-
 type TCommonItemData = {
+  type: string
   fontFamily?: string
   color?: string
   fontSize: number
-  width?: number
+  width: number
+  height: number
+  left: number
+  top: number
   fontWeight: number
   value: TItem2DataParam
 }
+
+/** 分页查询公共返回 */
+type TPageRequestResult<T> = {
+  list: T
+  total: number
+}
+
+interface HTMLElementEventMap {
+  "mousewheel": MouseEvent
+}
+
+interface IQiniuSubscribeCb {
+  (result: { total: { percent: number }}): void
+}
+
+interface Window {
+  qiniu: {
+    upload: (
+      file: File,
+      name: string,
+      token: string,
+      exObj: Record<string, any>,
+      exOption: {
+        useCdnDomain: boolean
+      }) => {
+        subscribe: (cb: {
+          next: IQiniuSubscribeCb
+          error: (err: string) => void
+          complete: IQiniuSubscribeCb
+        }) => void
+      }
+  }
+}

From c214263c9bb7469a423b780fd2910801c2ca0346 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Sat, 2 Mar 2024 13:27:28 +0000
Subject: [PATCH 7/8] feat: add methods type

---
 src/common/methods/target.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/methods/target.ts b/src/common/methods/target.ts
index 71cc93c..90d1c60 100644
--- a/src/common/methods/target.ts
+++ b/src/common/methods/target.ts
@@ -39,8 +39,8 @@ export function getTarget(currentTarget: HTMLElement) {
 
 export function getFinalTarget(currentTarget: HTMLElement) {
   let collector: string[] = []
-  let groupTarger: HTMLElement | null = null
-  let saveTarger: HTMLElement | null = null
+  // let groupTarger: HTMLElement | null = null
+  // let saveTarger: HTMLElement | null = null
   return new Promise((resolve) => {
     function findTarget(target: HTMLElement | null) {
       if (!target || target.id === 'page-design') {
@@ -51,8 +51,8 @@ export function getFinalTarget(currentTarget: HTMLElement) {
 
       collector = collector.concat(
         t.filter((x) => {
-          arr.includes(x) && (saveTarger = target)
-          x === 'w-group' && (groupTarger = target)
+          // arr.includes(x) && (saveTarger = target)
+          // x === 'w-group' && (groupTarger = target)
           return arr.includes(x)
         }),
       )

From 43bd81471dd9ff567d2a9dfad668b07ffd7ccf14 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Sat, 2 Mar 2024 14:06:19 +0000
Subject: [PATCH 8/8] feat: add cropImage type

---
 .../cropper/{ => CropImage}/CropImage.vue     |   3 +-
 .../business/cropper/CropImage/index.vue      | 114 ++++++++++++++++++
 2 files changed, 116 insertions(+), 1 deletion(-)
 rename src/components/business/cropper/{ => CropImage}/CropImage.vue (98%)
 create mode 100644 src/components/business/cropper/CropImage/index.vue

diff --git a/src/components/business/cropper/CropImage.vue b/src/components/business/cropper/CropImage/CropImage.vue
similarity index 98%
rename from src/components/business/cropper/CropImage.vue
rename to src/components/business/cropper/CropImage/CropImage.vue
index 2f5f83c..de50847 100644
--- a/src/components/business/cropper/CropImage.vue
+++ b/src/components/business/cropper/CropImage/CropImage.vue
@@ -8,7 +8,7 @@
 <template>
   <el-dialog v-model="dialogVisible" title="裁剪图片" width="80%" :before-close="handleClose" @close="cancel">
     <div id="wrap" v-loading="loading" style="height: 50vh">
-      <img v-show="url" ref="imgBox" style="visibility: hidden" :src="url" />
+      <img v-show="url" ref="imgBox" style="visibility: hidden" alt="imgBox" :src="url" />
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -84,6 +84,7 @@ export default defineComponent({
         cancel()
       }, 100)
     }
+    
     const cancel = () => {
       store.commit('setShowMoveable', true)
       dialogVisible.value = false
diff --git a/src/components/business/cropper/CropImage/index.vue b/src/components/business/cropper/CropImage/index.vue
new file mode 100644
index 0000000..66d0d32
--- /dev/null
+++ b/src/components/business/cropper/CropImage/index.vue
@@ -0,0 +1,114 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2024-03-02 13:32:00
+ * @Description: 裁剪组件
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-02 13:32:00
+-->
+<template>
+  <el-dialog v-model="dialogVisible" title="裁剪图片" width="80%" :before-close="handleClose" @close="cancel">
+    <div id="wrap" v-loading="state.loading" style="height: 50vh">
+      <img v-show="state.url" ref="imgBox" style="visibility: hidden" alt="imgBox" :src="state.url" />
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button :loading="state.loading" plain type="primary" @click="ok">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import api from '@/api'
+import { ElDialog } from 'element-plus'
+import { ref, defineEmits, reactive, nextTick, toRefs } from 'vue'
+import { useStore } from 'vuex'
+import 'cropperjs/dist/cropper.css'
+import Cropper from 'cropperjs'
+
+type TDoneParams = {
+  newImg: string,
+  data: Cropper.Data,
+  width: string,
+  height: string
+}
+type TDoneFunc = (event: "done", data: TDoneParams) => void
+
+type TOpenItem = {
+  rawImg?: string
+  imgUrl: string
+}
+
+const store = useStore()
+const state = reactive({
+  loading: false,
+  url: '',
+})
+const dialogVisible = ref(false)
+const imgBox = ref<HTMLImageElement>()
+let cropData: Cropper.Data | null
+let cropper: Cropper
+
+const emit = defineEmits<TDoneFunc>()
+
+const handleClose = (done: () => void) => {
+  done()
+}
+
+const open = async (item: TOpenItem, data: Cropper.Data) => {
+  state.loading = true
+  item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
+  cropData = data
+  state.url = item.rawImg
+  store.commit('setShowMoveable', false)
+  dialogVisible.value = true
+  await nextTick()
+  setEdit()
+}
+
+const setEdit = () => {
+  if (!imgBox || !imgBox.value) return
+  cropper = new Cropper(imgBox.value, {
+    // aspectRatio: imgBox.value.width / imgBox.value.height,
+    dragMode: 'move',
+    viewMode: 1,
+    cropBoxMovable: false,
+    // cropBoxResizable: false,
+    highlight: false,
+    background: true,
+    // crop(event) {
+    //   console.log(event);
+    // },
+  })
+  imgBox.value.addEventListener('ready', function() {
+    state.loading = false
+    // if (this.cropper === cropper) {
+    cropData && cropper.setData(cropData)
+    // }
+  })
+}
+
+const ok = () => {
+  state.loading = true
+  setTimeout(async () => {
+    // const newImg = cropper.getCroppedCanvas({ maxWidth: 4096, minWidth: 4096 }).toDataURL('image/jpeg', 0.8)
+    // const { width, height } = cropper.getCropBoxData()
+    // const { preview_url } = await api.material.uploadBase64({ file: newImg })
+    // context.emit('done', { newImg: preview_url, data: cropper.getData(), width, height })
+    cancel()
+  }, 100)
+}
+
+const cancel = () => {
+  store.commit('setShowMoveable', true)
+  dialogVisible.value = false
+  state.url = ''
+  cropData = null
+  state.loading = false
+  cropper.destroy()
+}
+
+toRefs(state),
+
+</script>