code: some optimization

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;

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;

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;

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;

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,
+      { immediate: true, deep: true },
+    )
+
+    watch(
+      () => state.editable,
+      (value) => {
+        store.dispatch('updateWidgetData', {
+          uuid: props.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()
+    )
+
+    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>

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