merge: feat-upgrade-vue3 branch

src/assets/data/LayerIconList.ts

@@ -6,12 +6,7 @@
  * @LastEditTime: 2024-03-01 20:55:51
  */
 
-export type LayerIconList = {
+import { TIconItemSelectData } from "@/components/modules/settings/iconItemSelect.vue"
-  key: string
-  icon: string
-  tip: string
-  value: number
-}
 
 export default [
   {
@@ -26,4 +21,4 @@ export default [
     tip: '下一层',
     value: -1,
   },
-] as LayerIconList[]
+] as TIconItemSelectData[]

src/common/methods/DesignFeatures/setWidgetData.ts

@@ -10,7 +10,8 @@
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
@@ -23,11 +24,12 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.fontWeight = item.fontWeight
   }
   if (type === 'image' || type === 'mask') {
-    setting = JSON.parse(JSON.stringify(wImage.setting))
+    setting = JSON.parse(JSON.stringify(wImageSetting))
     const img = await setImageData(item.value)
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)
     setting.imgUrl = item.value.url
+    console.log("setting", setting)
   }
   if (type === 'mask') {
     setting.mask = item.value.url

src/components/business/picture-selector/index.vue

@@ -74,7 +74,7 @@ const load = async (init?: boolean) => {
   loading = true
   page += 1
   api.material.getMyPhoto({ page }).then(({ list }) => {
-    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list))
+    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list as TGetImageListResult[]))
     setTimeout(() => {
       loading = false
     }, 100)

src/components/modules/panel/wrap/PhotoListWrap.vue

@@ -55,6 +55,20 @@ type TCurrentCategory = {
   id?: number
 }
 
+const selectImg = async (index, list) => {
+  const item = list ? list[index] : state.recommendImgList[index]
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  let setting = JSON.parse(JSON.stringify(wImageSetting))
+  const img = await setImageData(item) // await getImage(item.url)
+  setting.width = img.width
+  setting.height = img.height // parseInt(100 / item.value.ratio, 10)
+  setting.imgUrl = item.url
+  const { width: pW, height: pH } = dPage
+  setting.left = pW / 2 - img.width / 2
+  setting.top = pH / 2 - img.height / 2
+  store.dispatch('addWidget', setting)
+}
+
 const props = defineProps<TProps>()
 const store = useStore()
 const { dPage } = storeToRefs(usePageStore())

src/components/modules/settings/iconItemSelect.vue

@@ -22,20 +22,22 @@
 // 图标按钮选择组件
 // const NAME = 'icon-item-select'
 
-type TPropData = {
+export type TIconItemSelectData = {
-  select: boolean,
+  key?: string
-  extraIcon: boolean,
+  select?: boolean,
-  tip: string
+  extraIcon?: boolean,
+  tip?: string
   icon?: string
+  value?: string | number
 }
 
 type TProps = {
   label?: string
-  data: TPropData[]
+  data: TIconItemSelectData[]
 }
 
 type TEmits = {
-  (event: 'finish', data: TPropData): void
+  (event: 'finish', data: TIconItemSelectData): void
 }
 
 const props = withDefaults(defineProps<TProps>(), {
@@ -45,7 +47,7 @@ const props = withDefaults(defineProps<TProps>(), {
 const emit = defineEmits<TEmits>()
 
 
-function selectItem(item: TPropData) {
+function selectItem(item: TIconItemSelectData) {
   if (typeof item.select !== 'undefined') {
     item.select = !item.select
   }

src/components/modules/settings/numberSlider.vue

@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TProps>(), {
 })
 const emit = defineEmits<TEmits>()
 
-const innerValue = ref<number>(0)
+const innerValue = ref<number>(1)
 
 watch(
   () => innerValue.value,

src/components/modules/widgets/wImage/wImageStyle.vue

@@ -7,20 +7,20 @@
 -->
 <template>
   <div id="w-image-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="设置" name="2">
         <!-- <el-button size="mini" style="width: 100%; margin-top: 0.5rem" plain @click="openCropper">替换图片</el-button> -->
         <el-button style="width: 100%; margin-bottom: 12px" plain @click="openPicBox">替换图片</el-button>
         <div class="options">
-          <el-button v-if="innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
+          <el-button v-if="state.innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
           <el-button v-else plain type="primary" @click="imgCrop(true)"><i class="icon sd-caijian" /> 裁剪</el-button>
           <el-button plain @click="openImageCutout"><i class="icon sd-AIkoutu" /> 抠图</el-button>
           <!-- <uploader class="options__upload" @done="uploadImgDone">
@@ -31,15 +31,23 @@
         <!-- <container-wrap @change="changeContainer" />
         <br /> -->
         <div class="slide-wrap">
-          <number-slider v-model="innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+          <number-slider v-model="state.innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
-          <number-slider v-model="innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(innerElement.record.width, innerElement.record.height)" @finish="(value) => finish('radius', value)" />
+          <number-slider v-model="state.innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(Number(state.innerElement.record?.width), Number(state.innerElement.record?.height))" @finish="(value) => finish('radius', value)" />
           <!-- <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-50" :maxValue="innerElement.fontSize" @finish="(value) => finish('letterSpacing', value)" />
         <number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" /> -->
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="innerElement.isNinePatch" title="点九图设置" name="3">
+      <el-collapse-item v-if="state.innerElement.isNinePatch" title="点九图设置" name="3">
-        <number-slider v-model="innerElement.sliceData.ratio" :step="0.01" label="比率" :maxValue="10" @finish="(value) => finishSliceData('ratio', value)" />
+        <number-slider
-        <number-slider v-model="innerElement.sliceData.left" :step="0.5" label="大小" @finish="(value) => finishSliceData('left', value)" />
+          v-model="state.innerElement.sliceData.ratio"
+          :step="0.01" label="比率" :maxValue="10" 
+          @finish="(value) => finishSliceData('ratio', value)"
+        />
+        <number-slider
+          v-model="state.innerElement.sliceData.left"
+          :step="0.5" label="大小"
+          @finish="(value) => finishSliceData('left', value)"
+        />
       </el-collapse-item>
       <br />
       <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@@ -47,21 +55,26 @@
       <br />
     </el-collapse>
     <!-- <CropImage ref="crop" @done="cropDone" /> -->
-    <inner-tool-bar v-show="innerElement.cropEdit" :style="toolBarStyle">
+    <inner-tool-bar v-show="state.innerElement.cropEdit" :style="toolBarStyle">
-      <number-slider v-model="innerElement.zoom" class="inner-bar" label="缩放" labelWidth="40px" :step="0.01" :minValue="1" :maxValue="3" />
+      <number-slider
+        v-model="state.innerElement.zoom"
+        class="inner-bar" label="缩放" labelWidth="40px"
+        :step="0.01" :minValue="1" :maxValue="3"
+      />
       <i style="padding: 0 8px; cursor: pointer" class="icon sd-queren" @click="imgCrop(false)" />
     </inner-tool-bar>
-    <picBox ref="picBox" @select="selectDone" />
+    <picBox ref="picBoxRef" @select="selectDone" />
-    <imageCutout ref="imageCutout" @done="cutImageDone" />
+    <imageCutout ref="imageCutoutRef" @done="cutImageDone" />
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件样式
-const NAME = 'w-image-style'
+// const NAME = 'w-image-style'
-import { mapGetters, mapActions } from 'vuex'
+import { nextTick, reactive, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 // import textInput from '../../settings/textInput.vue'
 // import CropImage from '@/components/business/cropper/CropImage.vue'
@@ -73,15 +86,25 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import picBox from '@/components/business/picture-selector'
 import imageCutout from '@/components/business/image-cutout'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import wImageSetting, { TImageSetting } from './wImageSetting'
+import { TGetImageListResult } from '@/api/material'
 
-export default {
+type TState = {
-  name: NAME,
+  picBoxShow: boolean
-  components: { numberInput, numberSlider, iconItemSelect, picBox, imageCutout },
+  activeNames: string[]
-  data() {
+  innerElement: TImageSetting
-    return {
+  tag: boolean
+  ingoreKeys: string[]
+  layerIconList: TIconItemSelectData[]
+  alignIconList: TIconItemSelectData[]
+  toolBarStyle: Record<string, any>
+}
+
+const state = reactive<TState>({
   picBoxShow: false,
   activeNames: ['2', '3', '4'],
-      innerElement: {},
+  innerElement: JSON.parse(JSON.stringify(wImageSetting)),
   tag: false,
   ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
   layerIconList: layerIconList.concat([
@@ -102,165 +125,230 @@ export default {
   ]),
   alignIconList,
   toolBarStyle: {},
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
-  },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-        // 失焦取消编辑模式
-        if (newValue.uuid != this.lastUuid && typeof this.lastUuid !== 'undefined') {
-          this.innerElement.cropEdit = false
-          this.$store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
-        }
-        this.lastUuid = newValue.uuid
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-        this.cropHandle()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.change()
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
-    change() {
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify({ ...this.innerElement, ...this.dActiveElement }))
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'cropEdit' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
 })
+
+const picBoxRef = ref<typeof picBox | null>(null)
+const imageCutoutRef = ref<typeof imageCutout | null>(null)
+
+const store = useStore()
+const {
+  dActiveElement, dMoving, dWidgets
+} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+// computed: {
+//   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
+// },
+
+let lastUuid: string | undefined = undefined
+let tag: boolean
+let toolBarStyle: { left: string, top: string } | null = null
+
+watch(
+  () => dActiveElement.value,
+  (newValue, oldValue) => {
+    change()
+    // 失焦取消编辑模式
+    if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
+      state.innerElement.cropEdit = false
+      store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
     }
-      }
+    lastUuid = newValue.uuid
   },
-    finishSliceData(key, value) {
+  { deep: true }
-      const data = this.dActiveElement.sliceData
+)
+
+watch(
+  () => state.innerElement,
+  (newValue, oldValue) => {
+    changeValue()
+    cropHandle()
+  },
+  { deep: true }
+)
+
+function created() {
+  change()
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
+
+function change() {
+  tag = true
+  state.innerElement = JSON.parse(JSON.stringify({ ...state.innerElement, ...dActiveElement.value }))
+}
+
+function changeValue() {
+  if (tag) {
+    tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  for (let key in state.innerElement) {
+    if (state.ingoreKeys.indexOf(key) !== -1) {
+      dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
+    } else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) {
+      store.dispatch('updateWidgetData', {
+        uuid: dActiveElement.value.uuid,
+        key: key,
+        value: state.innerElement[(key as keyof TImageSetting)],
+      })
+      // updateWidgetData({
+      //   uuid: this.dActiveElement.uuid,
+      //   key: key,
+      //   value: this.innerElement[key],
+      // })
+    }
+  }
+}
+
+function finishSliceData(key: string, value: number | number[]) {
+  const data = dActiveElement.value.sliceData
   if (data) {
     data[key] = value
-        this.updateWidgetData({
+    store.dispatch('updateWidgetData', {
-          uuid: this.dActiveElement.uuid,
+      uuid: dActiveElement.value.uuid,
       key: 'sliceData',
       value: data,
       pushHistory: true,
     })
+    // updateWidgetData({
+    //   uuid: dActiveElement.uuid,
+    //   key: 'sliceData',
+    //   value: data,
+    //   pushHistory: true,
+    // })
   }
-    },
+}
-    finish(key, value) {
+
-      this.updateWidgetData({
+function finish(key: string = "", value: number | number[] | string | null = "") {
-        uuid: this.dActiveElement.uuid,
+  store.dispatch('updateWidgetData', {
+    uuid: dActiveElement.value.uuid,
     key: key,
     value: value,
     pushHistory: true,
   })
-    },
+  // this.updateWidgetData({
-    layerAction(item) {
+  //   uuid: this.dActiveElement.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
   if (item.key === 'zIndex') {
-        this.updateLayerIndex({
+    store.dispatch("updateLayerIndex", {
-          uuid: this.dActiveElement.uuid,
+      uuid: dActiveElement.value.uuid,
       value: item.value,
     })
+    // this.updateLayerIndex({
+    //   uuid: this.dActiveElement.uuid,
+    //   value: item.value,
+    // })
   } else {
-        this.finish(item.key, item.value === this.dActiveElement.flip ? null : item.value)
+    finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value)
   }
-    },
+}
-    async alignAction(item) {
+
-      this.updateAlign({
+async function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
     align: item.value,
-        uuid: this.dActiveElement.uuid,
+    uuid: dActiveElement.value.uuid,
   })
-      await this.$nextTick()
+  // this.updateAlign({
-      this.$store.commit('updateRect')
+  //   align: item.value,
-    },
+  //   uuid: this.dActiveElement.uuid,
-    openCropper() {
+  // })
-      this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
+  await nextTick()
-    },
+  store.commit('updateRect')
-    cropDone({ newImg, data, width, height }) {
+}
-      this.innerElement.imgUrl = newImg
+
-      this.innerElement.cropData = data
+function openCropper() {
-      this.innerElement.width = width.toFixed(0)
+  // this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
-      this.innerElement.height = height.toFixed(0)
+}
-    },
+
-    async changeContainer(setting) {
+// function cropDone({ newImg, data, width, height }) {
-      const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
+//   this.innerElement.imgUrl = newImg
-      const img = await getImage(setting.svgUrl)
+//   this.innerElement.cropData = data
-      setting.width = this.innerElement.width
+//   this.innerElement.width = width.toFixed(0)
-      setting.height = img.height * (this.innerElement.width / img.width)
+//   this.innerElement.height = height.toFixed(0)
-      setting.left = this.innerElement.left
+// }
-      setting.top = this.innerElement.top
+
-      setting.imgUrl = this.innerElement.imgUrl
+
-      this.dWidgets.splice(index, 1)
+// async function changeContainer(setting) {
-      this.addWidget(setting)
+//   const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
-    },
+//   const img = await getImage(setting.svgUrl)
-    async uploadImgDone(img) {
+//   setting.width = this.innerElement.width
-      this.$store.commit('setShowMoveable', false)
+//   setting.height = img.height * (this.innerElement.width / img.width)
-      await api.material.addMyPhoto(img)
+//   setting.left = this.innerElement.left
-      // this.innerElement.width = img.width
+//   setting.top = this.innerElement.top
-      this.innerElement.height = img.height * (this.innerElement.width / img.width)
+//   setting.imgUrl = this.innerElement.imgUrl
-      this.innerElement.imgUrl = img.url
+//   this.dWidgets.splice(index, 1)
-      this.$store.commit('setShowMoveable', true)
+//   this.addWidget(setting)
-    },
+// }
-    selectDone(img) {
+
-      this.innerElement.imgUrl = img.url
+// async function uploadImgDone(img) {
+//   this.$store.commit('setShowMoveable', false)
+//   await api.material.addMyPhoto(img)
+//   // this.innerElement.width = img.width
+//   this.innerElement.height = img.height * (this.innerElement.width / img.width)
+//   this.innerElement.imgUrl = img.url
+//   this.$store.commit('setShowMoveable', true)
+// }
+
+
+function selectDone(img: TGetImageListResult) {
+  state.innerElement.imgUrl = img.url
   // this.imgCrop(true)
-    },
+}
-    imgCrop(val) {
+
+function imgCrop(val: boolean) {
   // TODO: 画布内图像裁剪
-      const { left, top } = document.getElementById(this.innerElement.uuid).getBoundingClientRect()
+  const el = document.getElementById(state.innerElement.uuid || "")
-      this.toolBarStyle = { left: left + 'px', top: top + 'px' }
+  if (!el) return
-      this.innerElement.cropEdit = val
+  const { left, top } = el.getBoundingClientRect()
-      this.$store.commit('setShowRotatable', !val)
+  toolBarStyle = { left: left + 'px', top: top + 'px' }
-    },
+  state.innerElement.cropEdit = val
-    cropHandle() {
+  store.commit('setShowRotatable', !val)
-      this.$store.commit('setCropUuid', this.innerElement.cropEdit ? this.innerElement.uuid : -1)
+}
-    },
+
+
+function cropHandle() {
+  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+}
+
 // 图库选择器
-    openPicBox() {
+function openPicBox() {
-      this.$refs.picBox.open()
+  if (picBoxRef.value) {
-    },
+    picBoxRef.value.open()
+  }
+}
+
 // 打开抠图
-    openImageCutout() {
+function openImageCutout() {
-      fetch(this.innerElement.imgUrl)
+  fetch(state.innerElement.imgUrl || "")
     .then((response) => response.blob())
     .then((blob) => {
       const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
-          this.$refs.imageCutout.open(file)
+      if (imageCutoutRef.value) {
+        imageCutoutRef.value.open(file)
+      }
     })
     .catch((error) => {
       console.error('获取图片失败:', error)
     })
-    },
-    // 完成抠图
-    async cutImageDone(url) {
-      setTimeout(() => {
-        this.innerElement.imgUrl = url
-      }, 300)
-    },
-  },
 }
+
+// 完成抠图
+async function cutImageDone(url: string) {
+  setTimeout(() => {
+    state.innerElement.imgUrl = url
+  }, 300)
+}
+
 </script>
 
 <style lang="less" scoped>

src/mixins/methods/handlePaste.ts

@@ -21,6 +21,7 @@ import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
 import { usePageStore } from '@/pinia'
+// import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
   return new Promise<void>((resolve) => {