Merge branch 'main' into feat-upgrade-vue3

README.md

@@ -67,7 +67,15 @@ 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) |
 
 ### `Star`
 

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;
-@color0: #3b74f1; // Appears 2 times
 
 #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/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) => {

src/components/modules/widgets/wText/wText.vue

@@ -49,15 +49,17 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // 文本组件
 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() {
+  setup(props) {
-    return {
+    const store = useStore()
+    const route = useRoute()
+    const state = reactive({
       loading: false,
       editable: false,
       loadFontDone: false,
-    }
+    })
-  },
+    const widget = ref(null)
-  computed: {
+    const editWrap = ref(null)
-    ...mapGetters(['dActiveElement']),
+
-    isDraw() {
+    const dActiveElement = computed(() => store.getters.dActiveElement)
-      return this.$route.name === 'Draw' && fontWithDraw
+    const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
-    },
+
-  },
+    onUpdated(() => {
-  watch: {
+      updateRecord()
-    params: {
+    })
-      async handler(nval) {
+
-        this.updateText()
+    onMounted(() => {
-        if (this.loading) {
+      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
+          state.loadFontDone = font.value
-          this.loading = false
+          state.loading = false
         } else {
-          this.loading = false
+          state.loading = false
         }
       },
-      immediate: true,
+      { immediate: true, deep: true },
-      deep: true,
+    )
-    },
+
-    editable(value) {
+    watch(
-      this.updateWidgetData({
+      () => state.editable,
-        uuid: this.params.uuid,
+      (value) => {
+        store.dispatch('updateWidgetData', {
+          uuid: props.params.uuid,
           key: 'editable',
           value,
           pushHistory: false,
         })
       },
-  },
+    )
-  updated() {
+
-    this.updateRecord()
+    function updateRecord() {
-  },
+      if (dActiveElement.value.uuid === props.params.uuid) {
-  async mounted() {
+        let record = dActiveElement.value.record
-    this.updateRecord()
+        record.width = widget.value.offsetWidth
-    // await this.$nextTick()
+        record.height = widget.value.offsetHeight
-    this.params.transform && (this.$refs.widget.style.transform = this.params.transform)
+        record.minWidth = props.params.fontSize
-    this.params.rotate && (this.$refs.widget.style.transform += `translate(0px, 0px) rotate(${this.params.rotate}) scale(1, 1)`)
+        record.minHeight = props.params.fontSize * props.params.lineHeight
-    // this.$store.commit('updateRect')
+        writingText()
-  },
-  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()
       }
-    },
+    }
-    updateText(e) {
+
-      const value = e ? e.target.innerHTML : this.params.text.replace(/\n/g, '<br/>')
+    function updateText(e) {
-      // const value = (e ? e.target.innerText : this.params.text).replace(/<br\/>/g, '\r\n').replace(/&nbsp;/g, ' ')
+      const value = e ? e.target.innerHTML : props.params.text.replace(/\n/g, '<br/>')
-      if (value !== this.params.text) {
+      // const value = (e ? e.target.innerText : props.params.text).replace(/<br\/>/g, '\r\n').replace(/&nbsp;/g, ' ')
-        this.updateWidgetData({
+      if (value !== props.params.text) {
-          uuid: this.params.uuid,
+        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
+      const el = editWrap.value || widget.value
-      this.updateWidgetData({
+      store.dispatch('updateWidgetData', {
-        uuid: this.params.uuid,
+        uuid: props.params.uuid,
         key: 'height',
         value: el.offsetHeight,
         pushHistory: false,
       })
-      this.$store.commit('updateRect')
+      store.commit('updateRect')
-    },
+    }
-    writeDone(e) {
+
-      this.editable = false
+    function writeDone(e) {
+      state.editable = false
       setTimeout(() => {
-        this.pushHistory('文字修改')
+        store.dispatch('pushHistory', '文字修改')
       }, 100)
-      this.updateText(e)
+      updateText(e)
-    },
+    }
-    dblclickText(e) {
+
-      // this.$store.commit('setShowMoveable', false)
+    function dblclickText(e) {
-      this.editable = true
+      // store.commit('setShowMoveable', false)
-      const el = this.$refs.editWrap || this.$refs.widget
+      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

@@ -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 { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
-// import _config from '@/config'
+import { useStore } from 'vuex'
-import { mapGetters, mapActions } from 'vuex'
+import { useRoute } from 'vue-router'
-import { styleIconList1, styleIconList2, alignIconList } from '../../../../assets/data/TextIconsData'
+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,11 +66,13 @@ 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() {
+    setup() {
-    return {
+      const store = useStore()
+      const route = useRoute()
+      const state = reactive({
         activeNames: [],
         innerElement: {},
         tag: false,
@@ -83,48 +85,74 @@ export default {
         styleIconList1,
         styleIconList2,
         alignIconList,
-    }
+      })
-  },
+      const dActiveElement = computed(() => store.getters.dActiveElement)
-  computed: {
+      const dMoving = computed(() => store.getters.dMoving)
-    ...mapGetters(['dActiveElement', 'dMoving']),
+      // const isDraw = computed(() => route.name === 'Draw')
-    isDraw() {
+
-      return this.$route.name === 'Draw'
+      watch(() => dActiveElement.value, () => {
-    },
+        change()
-  },
+      }, { deep: true })
-  watch: {
+
-    dActiveElement: {
+      watch(() => state.innerElement, () => {
-      handler(newValue, oldValue) {
+        changeValue()
-        this.change()
+      }, { deep: true })
-      },
+
-      deep: true,
+      let timer: any = null
-    },
+
-    innerElement: {
+      onMounted(() => {
-      handler(newValue, oldValue) {
+        change()
-        this.changeValue()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.timer = null
-    this.change()
         setTimeout(() => {
-      this.loadFonts()
+          loadFonts()
         }, 100)
-  },
+      })
-  methods: {
+
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'pushHistory']),
+      function change() {
-    testEffect({ key, value, style }) {
+        if (timer) {
-      console.log('选择回调')
+          return
-      const uuid = this.dActiveElement.uuid
-      this.$store.commit('setWidgetStyle', { uuid, key, value })
-      if (style) {
-        this.finish('color', style.color || '')
         }
-    },
+        timer = true
-    loadFonts() {
+        setTimeout(() => {
-      // if (!this.isDraw) {
+          timer = null
-      // useFontStore().init()
+        }, 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) {
@@ -133,126 +161,96 @@ export default {
           lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
         }
         fontLists['当前页面'] = usePageFontsFilter()
-      this.fontClassList = fontLists
+        state.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(() => {
+      function finish(key, value) {
-        this.timer = null
+        store.dispatch('updateWidgetData', {
-      }, 300)
+          uuid: dActiveElement.value.uuid,
-      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],
+          value,
-            pushHistory: false,
-          })
-        }
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
           pushHistory: false,
         })
         setTimeout(() => {
-        key === 'fontClass' && (this.fontClassList['当前页面'] = usePageFontsFilter())
+          key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
         }, 300)
-    },
+      }
-    layerAction(item) {
+
-      this.updateLayerIndex({
+      function layerAction(item) {
-        uuid: this.dActiveElement.uuid,
+        store.dispatch('updateLayerIndex', {
+          uuid: dActiveElement.value.uuid,
           value: item.value,
         })
-    },
+      }
-    async textStyleAction(item) {
+
+      async function textStyleAction(item) {
         let value = item.key === 'textAlign' ? item.value : item.value[item.select ? 1 : 0]
-      this.innerElement[item.key] = value
+        state.innerElement[item.key] = value
         // TODO: 对竖版文字的特殊处理
-      item.key === 'writingMode' && this.relationChange()
+        item.key === 'writingMode' && relationChange()
-      await this.$nextTick()
+        await nextTick()
-      this.$store.commit('updateRect')
+        store.commit('updateRect')
-    },
+      }
-    async alignAction(item) {
+
-      this.updateAlign({
+      async function alignAction(item) {
+        store.dispatch('updateAlign', {
           align: item.value,
-        uuid: this.dActiveElement.uuid,
+          uuid: dActiveElement.value.uuid,
         })
-      await this.$nextTick()
+        await nextTick()
-      this.$store.commit('updateRect')
+        store.commit('updateRect')
-    },
+      }
-    changeStyleIconList() {
+
-      for (let i = 0; i < this.styleIconList1.length; ++i) {
+      function changeStyleIconList() {
-        let key = this.styleIconList1[i].key
+        for (let i = 0; i < state.styleIconList1.length; ++i) {
-        this.styleIconList1[i].select = false
+          let key = state.styleIconList1[i].key
+          state.styleIconList1[i].select = false
+          const [unchecked, checked] = state.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':
-              this.styleIconList1[i].select = !this.styleIconList1[i].select
+              if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
+                state.styleIconList1[i].select = !state.styleIconList1[i].select
               }
               break
             case 'writingMode':
-            if (this.innerElement[key] !== this.styleIconList1[i].value[0]) {
+              if (state.innerElement[key] !== unchecked) {
-              this.styleIconList1[i].select = true
+                state.styleIconList1[i].select = true
               }
               break
           }
         }
-      for (let i = 0; i < this.styleIconList2.length; i++) {
+        for (let i = 0; i < state.styleIconList2.length; i++) {
-        let key = this.styleIconList2[i].key
+          let key = state.styleIconList2[i].key
-        this.styleIconList2[i].select = false
+          state.styleIconList2[i].select = false
-        if (key === 'textAlign' && this.innerElement[key] === this.styleIconList2[i].value) {
+          if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
-          this.styleIconList2[i].select = true
+            state.styleIconList2[i].select = true
             continue
           }
         }
-    },
+      }
-    relationChange() {
+
+      function relationChange() {
         setTimeout(() => {
-        if (this.dActiveElement.writingMode) {
+          if (dActiveElement.value.writingMode) {
-          const w_record = this.dActiveElement.width
+            const w_record = dActiveElement.value.width
-          this.innerElement.width = this.dActiveElement.height
+            state.innerElement.width = dActiveElement.value.height
-          this.innerElement.height = w_record
+            state.innerElement.height = w_record
           }
         }, 10)
-    },
+      }
-  },
+
-}
+      return {
+        ...toRefs(state),
+        selectTextEffect,
+        textStyleAction,
+        finish,
+        layerAction,
+        alignAction
+      }
+    }
+})
 </script>
 
 <style lang="less" scoped>