From 8995910cb2399fa6788024f6d490b88e2cec3b74 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 6 Mar 2024 18:53:40 +0000
Subject: [PATCH 1/5] feat: convert zoom control component to conposition API

---
 .../modules/layout/zoomControl/data.ts        |  69 +++
 .../modules/layout/zoomControl/index.vue      | 496 +++++++++---------
 2 files changed, 307 insertions(+), 258 deletions(-)

diff --git a/src/components/modules/layout/zoomControl/data.ts b/src/components/modules/layout/zoomControl/data.ts
index e69de29..d2d3936 100644
--- a/src/components/modules/layout/zoomControl/data.ts
+++ b/src/components/modules/layout/zoomControl/data.ts
@@ -0,0 +1,69 @@
+
+export type TZoomData = {
+  text: string
+  value: number
+}
+
+export const ZoomList: TZoomData[] = [
+  {
+    text: '25%',
+    value: 25,
+  },
+  {
+    text: '50%',
+    value: 50,
+  },
+  {
+    text: '75%',
+    value: 75,
+  },
+  {
+    text: '100%',
+    value: 100,
+  },
+  {
+    text: '125%',
+    value: 125,
+  },
+  {
+    text: '150%',
+    value: 150,
+  },
+  {
+    text: '200%',
+    value: 200,
+  },
+  {
+    text: '最佳尺寸',
+    value: -1,
+    // icon: 'icon-best-size',
+  },
+]
+
+
+export const OtherList: TZoomData[] = [
+  {
+    text: '250%',
+    value: 250,
+  },
+  {
+    text: '300%',
+    value: 300,
+  },
+  {
+    text: '350%',
+    value: 350,
+  },
+  {
+    text: '400%',
+    value: 400,
+  },
+  {
+    text: '450%',
+    value: 450,
+  },
+  {
+    text: '500%',
+    value: 500,
+  },
+]
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index 6c3ea3b..cd3518d 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -19,270 +19,250 @@
   </div>
 </template>
 
-<script lang="ts">
-import { mapGetters, mapActions } from 'vuex'
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { useStore } from 'vuex'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import addMouseWheel from '@/common/methods/addMouseWheel'
+import { OtherList, TZoomData, ZoomList } from './data';
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+const store = useStore()
 
 // 组件大小控制器
-const NAME = 'zoom-control'
 let holder: number | undefined
 
-// TODO: TS类型补全
-export default defineComponent({
-  name: NAME,
-  data() {
-    return {
-      hideControl: false,
-      activezoomIndex: 0,
-      zoomList: [
-        {
-          text: '25%',
-          value: 25,
-        },
-        {
-          text: '50%',
-          value: 50,
-        },
-        {
-          text: '75%',
-          value: 75,
-        },
-        {
-          text: '100%',
-          value: 100,
-        },
-        {
-          text: '125%',
-          value: 125,
-        },
-        {
-          text: '150%',
-          value: 150,
-        },
-        {
-          text: '200%',
-          value: 200,
-        },
-        {
-          text: '最佳尺寸',
-          value: -1,
-          // icon: 'icon-best-size',
-        },
-      ],
-      show: false,
-      zoom: {
-        value: 0,
-        text: 0,
-      },
-      otherList: [
-        {
-          text: '250%',
-          value: 250,
-        },
-        {
-          text: '300%',
-          value: 300,
-        },
-        {
-          text: '350%',
-          value: 350,
-        },
-        {
-          text: '400%',
-          value: 400,
-        },
-        {
-          text: '450%',
-          value: 450,
-        },
-        {
-          text: '500%',
-          value: 500,
-        },
-      ],
-      otherIndex: -1,
-      bestZoom: 0,
-      curAction: "",
-    }
-  },
-  computed: {
-    ...mapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom']),
-  },
-  watch: {
-    activezoomIndex(value) {
-      if (value < 0 || value > this.zoomList.length - 1) {
-        return
-      }
-      this.zoom = JSON.parse(JSON.stringify(this.zoomList[value]))
-    },
-    otherIndex(value) {
-      if (value < 0 || value > this.otherList.length - 1) {
-        return
-      }
-      this.zoom = JSON.parse(JSON.stringify(this.otherList[value]))
-    },
-    zoom(value) {
-      let realValue = value.value
-      if (realValue === -1) {
-        realValue = this.calcZoom()
-      }
-      this.updateZoom(realValue)
-      this.autoFixTop()
-    },
-    dScreen: {
-      handler() {
-        this.screenChange()
-      },
-      deep: true,
-    },
-    zoomScreenChange() {
-      this.activezoomIndex = this.zoomList.length - 1
-      this.screenChange()
-    },
-    dPage: {
-      handler(val) {
-        this.screenChange()
-      },
-      deep: true,
-    },
-  },
-  async mounted() {
-    await this.$nextTick()
-    window.addEventListener('click', this.close)
-    if (this.$route.path === '/draw') {
-      this.activezoomIndex = 3
-      this.hideControl = true
-    } else {
-      this.activezoomIndex = this.zoomList.length - 1
-    }
-    // 添加滚轮监听
-    addMouseWheel('page-design', (isDown: boolean) => {
-      this.mousewheelZoom(isDown)
-    })
-    // 添加窗口大小监听
-    window.addEventListener('resize', (event) => {
-      this.changeScreen()
-    })
-  },
-  beforeUnmount() {
-    window.removeEventListener('click', this.close)
-  },
-  methods: {
-    ...mapActions(['updateZoom', 'updateScreen']),
-    changeScreen() {
-      clearTimeout(holder)
-      holder = setTimeout(() => {
-        const screen = document.getElementById('page-design')
-        if (!screen) return
-        this.updateScreen({
-          width: screen.offsetWidth,
-          height: screen.offsetHeight,
-        })
-      }, 300)
-    },
-    screenChange() {
-      // 弹性尺寸即时修改
-      if (this.activezoomIndex === this.zoomList.length - 1) {
-        this.updateZoom(this.calcZoom())
-        this.autoFixTop()
-      }
-    },
-    selectItem(index: number) {
-      this.activezoomIndex = index
-      this.otherIndex = -1
-      this.show = false
-    },
-    close(_: MouseEvent) {
-      this.show = false
-    },
-    add() {
-      this.curAction = 'add'
-      this.show = false
-      if (this.activezoomIndex === this.zoomList.length - 2 || this.activezoomIndex === this.zoomList.length - 1) {
-        this.activezoomIndex = this.zoomList.length
-        // this.otherIndex += 1
-        if (this.bestZoom) {
-          this.nearZoom(true)
-        } else {
-          this.otherIndex += 1
-        }
-        return
-      }
-      if (this.activezoomIndex != this.zoomList.length) {
-        this.activezoomIndex++
-        return
-      }
-      if (this.otherIndex < this.otherList.length - 1) {
-        this.otherIndex++
-      }
-    },
-    sub() {
-      this.curAction = null as any
-      this.show = false
-      if (this.otherIndex === 0) {
-        this.otherIndex = -1
-        this.activezoomIndex = this.zoomList.length - 2
-        return
-      }
-      if (this.otherIndex != -1) {
-        this.otherIndex--
-        return
-      }
-      if (this.activezoomIndex === this.zoomList.length - 1) {
-        if (this.bestZoom) {
-          this.nearZoom()
-        } else {
-          this.activezoomIndex = this.zoomList.length - 2
-        }
-        return
-      }
-      if (this.activezoomIndex != 0) {
-        this.activezoomIndex--
-      }
-    },
-    mousewheelZoom(down: boolean) {
-      const value = Number(this.dZoom.toFixed(0))
-      if (down && value <= 1) return
-      this.updateZoom(down ? value - 1 : value + 1)
-      this.zoom.text = (value + '%') as any
-      this.autoFixTop()
-    },
-    nearZoom(add?: boolean) {
-      for (let i = 0; i < this.zoomList.length; i++) {
-        this.activezoomIndex = i
-        if (this.zoomList[i].value > this.bestZoom) {
-          if (add) break
-        } else if (this.zoomList[i].value < this.bestZoom) {
-          if (!add) break
-        }
-      }
-      this.bestZoom = 0
-    },
-    calcZoom() {
-      let widthZoom = ((this.dScreen.width - 142) * 100) / this.dPage.width
-      let heightZoom = ((this.dScreen.height - 122) * 100) / this.dPage.height
-
-      this.bestZoom = Math.min(widthZoom, heightZoom)
-      return this.bestZoom
-    },
-    async autoFixTop() {
-      await this.$nextTick()
-      const presetPadding = 60
-      const el = document.getElementById('out-page')
-      if (!el) return
-      // const clientHeight = document.body.clientHeight - 54
-      
-      const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
-      let padding = (parentHeight - el.offsetHeight) / 2
-      if (typeof this.curAction === 'undefined') {
-        padding += presetPadding / 2
-      }
-      this.curAction === 'add' && (padding -= presetPadding)
-      this.$store.commit('updatePaddingTop', padding > 0 ? padding : 0)
-    },
-  },
+const hideControl = ref(false)
+const activezoomIndex = ref(0)
+const zoomList = ref<TZoomData[]>(ZoomList)
+const show = ref(false)
+const zoom = ref<TZoomData>({
+  value: 0,
+  text: '',
 })
+const otherList = ref<TZoomData[]>(OtherList)
+const otherIndex = ref(-1)
+const bestZoom = ref(0)
+const curAction = ref('')
+
+const { dPage, dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom'])
+
+watch(
+  activezoomIndex,
+  (data) => {
+    if (data < 0 || data > zoomList.value.length - 1) {
+      return
+    }
+    zoom.value = JSON.parse(JSON.stringify(zoomList.value[data]))
+  }
+)
+
+watch(
+  otherIndex,
+  (data) => {
+    if (data < 0 || data > otherList.value.length - 1) {
+      return
+    }
+    zoom.value = JSON.parse(JSON.stringify(otherList.value[data]))
+  }
+)
+
+watch(
+  zoom,
+  (data) => {
+    let realValue = data.value
+    if (realValue === -1) {
+      realValue = calcZoom()
+    }
+    store.dispatch('updateZoom', realValue)
+    // updateZoom(realValue)
+    autoFixTop()
+  }
+)
+
+watch(
+  dScreen,
+  () => {
+    screenChange()
+  },
+  { deep: true, }
+)
+
+watch(
+  zoomScreenChange,
+  () => {
+    activezoomIndex.value = zoomList.value.length - 1
+    screenChange()
+  }
+)
+
+watch(
+  dPage,
+  () => {
+    screenChange()
+  },
+  { deep: true }
+)
+
+onMounted(async () => {
+  await nextTick()
+  window.addEventListener('click', close)
+  if (route.path === '/draw') {
+    activezoomIndex.value = 3
+    hideControl.value = true
+  } else {
+    activezoomIndex.value = zoomList.value.length - 1
+  }
+  // 添加滚轮监听
+  addMouseWheel('page-design', (isDown: boolean) => {
+    mousewheelZoom(isDown)
+  })
+  // 添加窗口大小监听
+  window.addEventListener('resize', (event) => {
+    changeScreen()
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', close)
+})
+
+    // ...mapActions(['updateZoom', 'updateScreen']),
+function changeScreen() {
+  clearTimeout(holder)
+  holder = setTimeout(() => {
+    const screen = document.getElementById('page-design')
+    if (!screen) return
+    store.dispatch('updateScreen', {
+      width: screen.offsetWidth,
+      height: screen.offsetHeight,
+    })
+    // updateScreen({
+    //   width: screen.offsetWidth,
+    //   height: screen.offsetHeight,
+    // })
+  }, 300)
+}
+
+function screenChange() {
+  // 弹性尺寸即时修改
+  if (activezoomIndex.value === zoomList.value.length - 1) {
+    store.dispatch('updateZoom', calcZoom())
+    // this.updateZoom(this.calcZoom())
+    autoFixTop()
+  }
+}
+
+function selectItem(index: number) {
+  activezoomIndex.value = index
+  otherIndex.value = -1
+  show.value = false
+}
+
+function close(_: MouseEvent) {
+  show.value = false
+}
+
+function add() {
+  curAction.value = 'add'
+  show.value = false
+  if (
+    activezoomIndex.value === zoomList.value.length - 2 ||
+    activezoomIndex.value === zoomList.value.length - 1
+  ) {
+    activezoomIndex.value = zoomList.value.length
+    // this.otherIndex += 1
+    if (bestZoom.value) {
+      nearZoom(true)
+    } else {
+      otherIndex.value += 1
+    }
+    return
+  }
+  if (activezoomIndex.value != zoomList.value.length) {
+    activezoomIndex.value++
+    return
+  }
+  if (otherIndex.value < otherList.value.length - 1) {
+    otherIndex.value++
+  }
+}
+
+function sub() {
+  curAction.value = ''
+  show.value = false
+  if (otherIndex.value === 0) {
+    otherIndex.value = -1
+    activezoomIndex.value = zoomList.value.length - 2
+    return
+  }
+  if (otherIndex.value != -1) {
+    otherIndex.value--
+    return
+  }
+  if (activezoomIndex.value === zoomList.value.length - 1) {
+    if (bestZoom) {
+      nearZoom()
+    } else {
+      activezoomIndex.value = zoomList.value.length - 2
+    }
+    return
+  }
+  if (activezoomIndex.value != 0) {
+    activezoomIndex.value--
+  }
+}
+
+function mousewheelZoom(down: boolean) {
+  const value = Number(dZoom.value.toFixed(0))
+  if (down && value <= 1) return
+  store.dispatch('updateZoom', down ? value - 1 : value + 1)
+  // updateZoom(down ? value - 1 : value + 1)
+  zoom.value.text = (value + '%') as any
+  autoFixTop()
+}
+
+function nearZoom(add?: boolean) {
+  for (let i = 0; i < zoomList.value.length; i++) {
+    activezoomIndex.value = i
+    if (zoomList.value[i].value > bestZoom.value) {
+      if (add) break
+    } else if (zoomList.value[i].value < bestZoom.value) {
+      if (!add) break
+    }
+  }
+  bestZoom.value = 0
+}
+
+function calcZoom() {
+  let widthZoom = ((dScreen.value.width - 142) * 100) / dPage.value.width
+  let heightZoom = ((dScreen.value.height - 122) * 100) / dPage.value.height
+
+  bestZoom.value = Math.min(widthZoom, heightZoom)
+  return bestZoom.value
+}
+
+async function autoFixTop() {
+  await nextTick()
+  const presetPadding = 60
+  const el = document.getElementById('out-page')
+  if (!el) return
+  // const clientHeight = document.body.clientHeight - 54
+  
+  const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
+  let padding = (parentHeight - el.offsetHeight) / 2
+  if (typeof curAction.value === 'undefined') {
+    padding += presetPadding / 2
+  }
+  curAction.value === 'add' && (padding -= presetPadding)
+  store.commit('updatePaddingTop', padding > 0 ? padding : 0)
+}
+
+defineExpose({
+  screenChange
+})
+
 </script>
 
 <style lang="less" scoped>

From 77aba80b8bc64872ea2867a57268eadd97063a6f Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 6 Mar 2024 19:37:00 +0000
Subject: [PATCH 2/5] feat: convert designBoard component to composition API

---
 src/components/modules/layout/designBoard.vue | 304 ---------------
 .../modules/layout/designBoard/index.vue      | 363 ++++++++++++++++++
 src/components/modules/layout/sizeControl.vue |   2 +-
 src/mixins/move.ts                            |   2 +-
 src/types/global.d.ts                         |   6 +
 src/views/Draw.vue                            |   2 +-
 src/views/Index.vue                           |   2 +-
 src/views/Psd.vue                             |   2 +-
 8 files changed, 374 insertions(+), 309 deletions(-)
 delete mode 100644 src/components/modules/layout/designBoard.vue
 create mode 100644 src/components/modules/layout/designBoard/index.vue

diff --git a/src/components/modules/layout/designBoard.vue b/src/components/modules/layout/designBoard.vue
deleted file mode 100644
index d0d35d3..0000000
--- a/src/components/modules/layout/designBoard.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<template>
-  <div id="page-design" ref="page-design" :style="{ paddingTop: dPaddingTop + 'px' }">
-    <div
-      id="out-page"
-      class="out-page"
-      :style="{
-        width: (dPage.width * dZoom) / 100 + 120 + 'px',
-        height: (dPage.height * dZoom) / 100 + 120 + 'px',
-        opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
-      }"
-    >
-      <slot />
-      <div
-        :id="pageDesignCanvasId"
-        class="design-canvas"
-        :data-type="dPage.type"
-        :data-uuid="dPage.uuid"
-        :style="{
-          width: dPage.width + 'px',
-          height: dPage.height + 'px',
-          transform: 'scale(' + dZoom / 100 + ')',
-          transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
-          backgroundColor: dPage.backgroundColor,
-          backgroundImage: `url(${dPage?.backgroundImage})`,
-          backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
-          backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
-          backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
-          opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
-        }"
-        @mousemove="dropOver($event)"
-        @drop="drop($event)"
-        @mouseup="drop($event)"
-      >
-        <!-- <grid-size /> -->
-
-        <!-- :class="{
-            layer: true,
-            'layer-active': getIsActive(layer.uuid),
-            'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
-          }" -->
-        <component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
-          <template v-if="layer.isContainer">
-            <!-- :class="{
-                layer: true,
-                'layer-active': getIsActive(widget.uuid),
-                'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
-                'layer-hover': widget.uuid === dHoverUuid,
-              }" -->
-            <component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
-          </template>
-        </component>
-
-        <!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
-        <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, nextTick } from 'vue'
-import { mapGetters, mapActions } from 'vuex'
-import { getTarget } from '@/common/methods/target'
-
-import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
-import PointImg from '@/utils/plugins/pointImg'
-import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
-import { debounce } from 'throttle-debounce'
-
-// 页面设计组件
-const NAME = 'page-design'
-
-import { move, moveInit } from '@/mixins/move'
-
-export default defineComponent({
-  name: NAME,
-  // components: {lineGuides},
-  mixins: [moveInit],
-  props: ['pageDesignCanvasId'],
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable']),
-  },
-  mounted() {
-    this.getScreen()
-    document.getElementById('page-design').addEventListener('mousedown', this.handleSelection, false)
-    document.getElementById('page-design').addEventListener('mousemove', debounce(100, false, this.handleMouseMove), false)
-  },
-  beforeUnmount() {},
-  methods: {
-    ...mapActions(['updateScreen', 'selectWidget', 'deleteWidget', 'addWidget', 'addGroup']),
-    // getBackground(data) {
-    //   if (data.startsWith('http')) return `url(${data})`
-    //   if (data.startsWith('linear-gradient')) return data
-    // },
-    async dropOver(e) {
-      if (this.dActiveElement.editable || this.dActiveElement.lock) {
-        return false
-      }
-      e.preventDefault()
-      let { data, type } = this.$store.getters.selectItem
-      if (type !== 'image') {
-        return
-      }
-      const target = await getTarget(e.target)
-      const uuid = target.getAttribute('data-uuid')
-      this.$store.dispatch('setDropOver', uuid)
-      if (e.target.getAttribute('putIn')) {
-        this._dropIn = uuid
-        const imgUrl = data.value.thumb || data.value.url
-        !this._srcCache && (this._srcCache = target.firstElementChild.firstElementChild.src)
-        target.firstElementChild.firstElementChild.src = imgUrl
-      } else {
-        this._srcCache && (target.firstElementChild.firstElementChild.src = this._srcCache)
-        this._srcCache = ''
-        this._dropIn = ''
-      }
-    },
-    async drop(e) {
-      if (!this.dDraging) {
-        return
-      }
-      this.$store.commit('setDraging', false)
-      const dropIn = this._dropIn
-      this._dropIn = ''
-      this.$store.dispatch('setDropOver', '-1')
-      this.$store.commit('setShowMoveable', false) // 清理上一次的选择
-      let lost = e.target.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
-      // e.stopPropagation()
-      e.preventDefault()
-      let { data: item, type } = JSON.parse(JSON.stringify(this.$store.getters.selectItem))
-      // 清除临时数据
-      this.$store.commit('selectItem', {})
-      let setting = {}
-      if (!type) {
-        return
-      }
-      // 处理数据
-      setting = await setWidgetData(type, item, setting)
-      // 绝对坐标
-      const lostX = e.x - document.getElementById('page-design-canvas').getBoundingClientRect().left
-      const lostY = e.y - document.getElementById('page-design-canvas').getBoundingClientRect().top
-      // 放置组合
-      if (type === 'group') {
-        let parent = {}
-        item = await getComponentsData(item)
-        item.forEach((element) => {
-          if (element.type === 'w-group') {
-            parent.width = element.width
-            parent.height = element.height
-          }
-        })
-        const half = { x: parent.width ? (parent.width * this.$store.getters.dZoom) / 100 / 2 : 0, y: parent.height ? (parent.height * this.$store.getters.dZoom) / 100 / 2 : 0 }
-        item.forEach((element) => {
-          element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / this.$store.getters.dZoom)
-          element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / this.$store.getters.dZoom)
-        })
-        this.addGroup(item)
-      }
-      // 设置坐标
-      const half = { x: setting.width ? (setting.width * this.$store.getters.dZoom) / 100 / 2 : 0, y: setting.height ? (setting.height * this.$store.getters.dZoom) / 100 / 2 : 0 }
-      // const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
-      setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / this.$store.getters.dZoom)
-      setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / this.$store.getters.dZoom)
-      if (lost && type === 'image') {
-        // 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
-        const target = await getTarget(e.target)
-        const targetType = target.getAttribute('data-type')
-        const uuid = target.getAttribute('data-uuid')
-        if (targetType === 'w-mask') {
-          // 容器
-          this.$store.commit('setShowMoveable', true) // 恢复选择
-          const widget = this.dWidgets.find((item) => item.uuid === uuid)
-          widget.imgUrl = item.value.url
-          // if (e.target.className.baseVal) {
-          //   !widget.imgs && (widget.imgs = {})
-          //   widget.imgs[`${e.target.className.baseVal}`] = item.value.url
-          // }
-        } else {
-          if (dropIn) {
-            const widget = this.dWidgets.find((item) => item.uuid == dropIn)
-            widget.imgUrl = item.value.url
-            console.log('加入+', widget)
-            this.$store.commit('setShowMoveable', true) // 恢复选择
-          } else {
-            this.addWidget(setting) // 正常加入面板
-          }
-        }
-      } else if (type === 'bg') {
-        console.log('背景图片放置')
-      } else if (type !== 'group') {
-        console.log(setting)
-        this.addWidget(setting) // 正常加入面板
-      }
-      // 清除临时数据
-      // this.$store.commit('selectItem', {})
-    },
-    getScreen() {
-      let screen = this.$refs['page-design']
-      this.updateScreen({
-        width: screen.offsetWidth,
-        height: screen.offsetHeight,
-      })
-    },
-    async handleMouseMove(e) {
-      const pImg = new PointImg(e.target)
-      const { rgba } = pImg.getColorXY(e.offsetX, e.offsetY)
-      if (rgba && rgba === 'rgba(0,0,0,0)') {
-        console.log('解析点位颜色: ', rgba)
-        let target = await getTarget(e.target)
-        target.style.pointerEvents = 'none'
-        setTimeout(() => {
-          target.style.pointerEvents = 'auto'
-        }, 300)
-      }
-    },
-    async handleSelection(e) {
-      if (e.which === 3) {
-        return
-      }
-
-      let target = await getTarget(e.target)
-      let type = target.getAttribute('data-type')
-
-      if (type) {
-        let uuid = target.getAttribute('data-uuid')
-        if (uuid !== '-1' && !this.dAltDown) {
-          let widget = this.dWidgets.find((item) => item.uuid === uuid)
-          if (widget.parent !== '-1' && widget.parent !== this.dActiveElement.uuid && widget.parent !== this.dActiveElement.parent) {
-            uuid = widget.parent
-          }
-        }
-
-        // 设置选中元素
-        // this.$store.commit('setMoveable', false)
-        if (this.showRotatable !== false) {
-          this.selectWidget({
-            uuid: uuid,
-          })
-        }
-
-        if (uuid !== '-1') {
-          this.initmovement && this.initmovement(e) // 参见 mixins
-        }
-      } else {
-        // 取消选中元素
-        this.selectWidget({
-          uuid: '-1',
-        })
-      }
-    },
-    getlayers() {
-      return this.dWidgets.filter((item) => item.parent === this.dPage.uuid)
-    },
-    getChilds(uuid) {
-      return this.dWidgets.filter((item) => item.parent === uuid)
-    },
-    // getIsActive(uuid) {
-    //   if (this.dSelectWidgets.length > 0) {
-    //     let widget = this.dSelectWidgets.find((item) => item.uuid === uuid)
-    //     if (widget) {
-    //       return true
-    //     }
-    //     return false
-    //   } else {
-    //     return uuid === this.dActiveElement.uuid
-    //   }
-    // },
-  },
-})
-</script>
-
-<style lang="less" scoped>
-#page-design {
-  height: 100%;
-  // display: flex;
-  // align-items: center;
-  overflow: auto;
-  position: relative;
-  width: 100%;
-  .out-page {
-    margin: 0 auto;
-    padding: 60px;
-    position: relative;
-    .design-canvas {
-      // transition: all 0.3s;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.1);
-      margin: 0 auto;
-      position: relative;
-      // z-index: -9999;
-      // overflow: hidden;
-      // overflow: auto;
-    }
-    // .design-canvas ::-webkit-scrollbar {
-    //   display: none; /* Chrome Safari */
-    // }
-  }
-}
-</style>
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
new file mode 100644
index 0000000..4764f21
--- /dev/null
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -0,0 +1,363 @@
+<template>
+  <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
+    <div
+      id="out-page"
+      class="out-page"
+      :style="{
+        width: (dPage.width * dZoom) / 100 + 120 + 'px',
+        height: (dPage.height * dZoom) / 100 + 120 + 'px',
+        opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
+      }"
+    >
+      <slot />
+      <div
+        :id="pageDesignCanvasId"
+        class="design-canvas"
+        :data-type="dPage.type"
+        :data-uuid="dPage.uuid"
+        :style="{
+          width: dPage.width + 'px',
+          height: dPage.height + 'px',
+          transform: 'scale(' + dZoom / 100 + ')',
+          transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
+          backgroundColor: dPage.backgroundColor,
+          backgroundImage: `url(${dPage?.backgroundImage})`,
+          backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
+          backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
+          backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
+          opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
+        }"
+        @mousemove="dropOver($event)"
+        @drop="drop($event)"
+        @mouseup="drop($event)"
+      >
+        <!-- <grid-size /> -->
+
+        <!-- :class="{
+            layer: true,
+            'layer-active': getIsActive(layer.uuid),
+            'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
+          }" -->
+        <component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
+          <template v-if="layer.isContainer">
+            <!-- :class="{
+                layer: true,
+                'layer-active': getIsActive(widget.uuid),
+                'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
+                'layer-hover': widget.uuid === dHoverUuid,
+              }" -->
+            <component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
+          </template>
+        </component>
+
+        <!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
+        <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, defineProps, onMounted, ref } from 'vue'
+import { mapGetters, mapActions, useStore } from 'vuex'
+import { getTarget } from '@/common/methods/target'
+
+import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
+import PointImg from '@/utils/plugins/pointImg'
+import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
+import { debounce } from 'throttle-debounce'
+import { move, moveInit } from '@/mixins/move'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// 页面设计组件
+type TProps = {
+  pageDesignCanvasId: string
+}
+
+type TParentData = {
+  width?: number
+  height?: number
+}
+
+type TSetting = {
+  width?: number
+  height?: number
+  top?: number
+  left?: number
+}
+
+const store = useStore()
+const { pageDesignCanvasId } = defineProps<TProps>()
+const {
+  dPaddingTop, dPage, dZoom, dScreen, dWidgets,
+  dActiveElement, dSelectWidgets, dAltDown, dDraging,
+  dHoverUuid, showRotatable
+} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+
+let _dropIn: string | null = ''
+let _srcCache: string | null = ''
+
+onMounted(() => {
+  getScreen()
+  const pageDesignEl = document.getElementById('page-design')
+  if (!pageDesignEl) return
+  pageDesignEl.addEventListener('mousedown', handleSelection, false)
+  pageDesignEl.addEventListener('mousemove', debounce(100, false, handleMouseMove), false)
+})
+
+  // components: {lineGuides},
+  // mixins: [moveInit],
+    // ...mapActions(['updateScreen', 'selectWidget', 'deleteWidget', 'addWidget', 'addGroup']),
+
+    // getBackground(data) {
+    //   if (data.startsWith('http')) return `url(${data})`
+    //   if (data.startsWith('linear-gradient')) return data
+    // },
+
+async function dropOver(e: MouseEvent) {
+  if (dActiveElement.value.editable || dActiveElement.value.lock) {
+    return false
+  }
+  e.preventDefault()
+  let { data, type } = store.getters.selectItem
+  if (type !== 'image') {
+    return
+  }
+  if (!e || !e.target) return
+  const eventTarget = e.target as HTMLElement
+  const target = await getTarget(eventTarget)
+  if (!target) return
+  const uuid = target.getAttribute('data-uuid')
+  store.dispatch('setDropOver', uuid)
+
+  const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
+  if (eventTarget.getAttribute('putIn')) {
+    _dropIn = uuid
+    const imgUrl = data.value.thumb || data.value.url
+    !_srcCache && (_srcCache = imgEl.src)
+    imgEl.src = imgUrl
+  } else {
+    _srcCache && (imgEl.src = _srcCache)
+    _srcCache = ''
+    _dropIn = ''
+  }
+}
+
+async function drop(e: MouseEvent) {
+  if (!dDraging.value) {
+    return
+  }
+  if (!e || !e.target) return
+  const eventTarget = e.target as HTMLElement
+  store.commit('setDraging', false)
+  const dropIn = _dropIn
+  _dropIn = ''
+  store.dispatch('setDropOver', '-1')
+  store.commit('setShowMoveable', false) // 清理上一次的选择
+  let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
+  // e.stopPropagation()
+  e.preventDefault()
+  let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
+  // 清除临时数据
+  store.commit('selectItem', {})
+  let setting: TSetting = {}
+  if (!type) {
+    return
+  }
+  // 处理数据
+  setting = await setWidgetData(type, item, setting)
+  console.log("setting", setting)
+  // 绝对坐标
+  const canvasEl = document.getElementById('page-design-canvas')
+  if (!canvasEl) return
+  const lostX = e.x - canvasEl.getBoundingClientRect().left
+  const lostY = e.y - canvasEl.getBoundingClientRect().top
+  // 放置组合
+  if (type === 'group') {
+    let parent: TParentData = {}
+    const componentItem = await getComponentsData(item)
+    // item = await getComponentsData(item)
+    componentItem.forEach((element) => {
+      if (element.type === 'w-group') {
+        parent.width = element.width
+        parent.height = element.height
+      }
+    })
+    const half = {
+      x: parent.width ? (parent.width * store.getters.dZoom) / 100 / 2 : 0,
+      y: parent.height ? (parent.height * store.getters.dZoom) / 100 / 2 : 0
+    }
+    componentItem.forEach((element) => {
+      element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
+      element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
+    })
+    store.dispatch('addGroup', item)
+    // addGroup(item)
+  }
+  // 设置坐标
+  const half = { 
+    x: setting.width ? (setting.width * store.getters.dZoom) / 100 / 2 : 0,
+    y: setting.height ? (setting.height * store.getters.dZoom) / 100 / 2 : 0
+  }
+  // const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
+  setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
+  setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
+  if (lost && type === 'image') {
+    // 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
+    const target = await getTarget(eventTarget)
+    if (!target) return
+    const targetType = target.getAttribute('data-type')
+    const uuid = target.getAttribute('data-uuid')
+    if (targetType === 'w-mask') {
+      // 容器
+      store.commit('setShowMoveable', true) // 恢复选择
+      const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      widget.imgUrl = item.value.url
+      // if (e.target.className.baseVal) {
+      //   !widget.imgs && (widget.imgs = {})
+      //   widget.imgs[`${e.target.className.baseVal}`] = item.value.url
+      // }
+    } else {
+      if (dropIn) {
+        const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
+        widget.imgUrl = item.value.url
+        console.log('加入+', widget)
+        store.commit('setShowMoveable', true) // 恢复选择
+      } else {
+        store.dispatch('addWidget', setting) // 正常加入面板
+        // addWidget(setting) // 正常加入面板
+      }
+    }
+  } else if (type === 'bg') {
+    console.log('背景图片放置')
+  } else if (type !== 'group') {
+    console.log(setting)
+    store.dispatch('addWidget', setting) // 正常加入面板
+    // addWidget(setting) // 正常加入面板
+  }
+  // 清除临时数据
+  // this.$store.commit('selectItem', {})
+}
+
+function getScreen() {
+  const pageDesignEl = document.getElementById('page-design')
+  if (!pageDesignEl) return
+  store.dispatch('updateScreen', {
+    width: pageDesignEl.offsetWidth,
+    height: pageDesignEl.offsetHeight,
+  })
+  // updateScreen({
+  //   width: pageDesignEl.offsetWidth,
+  //   height: pageDesignEl.offsetHeight,
+  // })
+}
+
+async function handleMouseMove(e: MouseEvent) {
+  if (!e || !e.target) return
+  const imageTarget = e.target as HTMLImageElement
+  const pImg = new PointImg(imageTarget)
+  const { rgba } = pImg.getColorXY(e.offsetX, e.offsetY)
+  if (rgba && rgba === 'rgba(0,0,0,0)') {
+    console.log('解析点位颜色: ', rgba)
+    let target = await getTarget(imageTarget)
+    if (!target) return
+    target.style.pointerEvents = 'none'
+    setTimeout(() => {
+      if (!target) return
+      target.style.pointerEvents = 'auto'
+    }, 300)
+  }
+}
+
+async function handleSelection(e: MouseEvent) {
+  if (e.which === 3) {
+    return
+  }
+  if (!e || !e.target) return
+  let target = await getTarget(e.target as HTMLElement)
+  if (!target) return
+  let type = target.getAttribute('data-type')
+
+  if (type) {
+    let uuid = target.getAttribute('data-uuid')
+    if (uuid !== '-1' && !dAltDown.value) {
+      let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
+        uuid = widget.parent
+      }
+    }
+
+    // 设置选中元素
+    // this.$store.commit('setMoveable', false)
+    if (showRotatable.value !== false) {
+      store.dispatch('selectWidget', {
+        uuid: uuid,
+      })
+      // selectWidget({
+      //   uuid: uuid,
+      // })
+    }
+
+    if (uuid !== '-1') {
+      moveInit.methods.initmovement(e) // 参见 mixins
+    }
+  } else {
+    // 取消选中元素
+    store.dispatch('selectWidget', {
+      uuid: '-1',
+    })
+    // selectWidget({
+    //   uuid: '-1',
+    // })
+  }
+}
+
+function getlayers() {
+  return dWidgets.value.filter((item: { parent: string }) => item.parent === dPage.value.uuid)
+}
+
+function getChilds(uuid: string) {
+  return dWidgets.value.filter((item: { parent: string }) => item.parent === uuid)
+}
+    // getIsActive(uuid) {
+    //   if (this.dSelectWidgets.length > 0) {
+    //     let widget = this.dSelectWidgets.find((item) => item.uuid === uuid)
+    //     if (widget) {
+    //       return true
+    //     }
+    //     return false
+    //   } else {
+    //     return uuid === this.dActiveElement.uuid
+    //   }
+    // },
+</script>
+
+<style lang="less" scoped>
+#page-design {
+  height: 100%;
+  // display: flex;
+  // align-items: center;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  .out-page {
+    margin: 0 auto;
+    padding: 60px;
+    position: relative;
+    .design-canvas {
+      // transition: all 0.3s;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.1);
+      margin: 0 auto;
+      position: relative;
+      // z-index: -9999;
+      // overflow: hidden;
+      // overflow: auto;
+    }
+    // .design-canvas ::-webkit-scrollbar {
+    //   display: none; /* Chrome Safari */
+    // }
+  }
+}
+</style>
diff --git a/src/components/modules/layout/sizeControl.vue b/src/components/modules/layout/sizeControl.vue
index 80d2174..276dec5 100644
--- a/src/components/modules/layout/sizeControl.vue
+++ b/src/components/modules/layout/sizeControl.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: ShawnPhang
  * @Date: 2021-08-03 17:50:21
- * @Description: 旧大小控制组件，已交由moveable控制
+ * @Description: 旧大小控制组件，已交由moveable控制 (已不使用)
  * @LastEditors: ShawnPhang
  * @LastEditTime: 2021-08-09 11:13:09
 -->
diff --git a/src/mixins/move.ts b/src/mixins/move.ts
index af4e5bf..1897bec 100644
--- a/src/mixins/move.ts
+++ b/src/mixins/move.ts
@@ -48,7 +48,7 @@ const move = {
 
 const moveInit = {
   methods: {
-    initmovement(e: any) {
+    initmovement(e: MouseEvent) {
       if (!store.getters.dAltDown) {
         // 设置mouseevent给moveable初始
         // 在组合操作时排除
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 1cd3489..a3b3344 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -56,3 +56,9 @@ interface Window {
       }
   }
 }
+
+
+interface MouseEvent {
+  layerX: number
+  layerY: number
+}
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index aaec167..eea81f5 100644
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@@ -16,7 +16,7 @@ import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
 import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
-import designBoard from '@/components/modules/layout/designBoard.vue'
+import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 
 export default defineComponent({
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 393037e..16eb594 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -58,7 +58,7 @@ import { defineComponent, reactive, toRefs } from 'vue'
 import { mapActions, mapGetters } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
-import designBoard from '@/components/modules/layout/designBoard.vue'
+import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import lineGuides from '@/components/modules/layout/lineGuides.vue'
 
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index d3c71e3..e28cd2f 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -52,7 +52,7 @@ import wText from '@/components/modules/widgets/wText/wText.vue'
 import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.vue'
-import designBoard from '@/components/modules/layout/designBoard.vue'
+import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import HeaderOptions from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'

From 18f05812ad0c5212b2b854e5f389a3799e9dde5b Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 6 Mar 2024 20:24:09 +0000
Subject: [PATCH 3/5] feat: convert style panel component to composition API

---
 src/components/modules/panel/stylePanel.vue | 102 +++++++++++---------
 1 file changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue
index 1bc0d14..e50deab 100644
--- a/src/components/modules/panel/stylePanel.vue
+++ b/src/components/modules/panel/stylePanel.vue
@@ -6,7 +6,7 @@
     </div>
     <div v-show="activeTab === 0" class="style-wrap">
       <div v-show="showGroupCombined" style="padding: 2rem 0">
-        <el-button plain type="primary" class="gounp__btn" @click="realCombined">成组</el-button>
+        <el-button plain type="primary" class="gounp__btn" @click="handleCombine">成组</el-button>
         <icon-item-select label="" :data="alignIconList" @finish="alignAction" />
       </div>
       <component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" />
@@ -17,58 +17,64 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 // 样式设置面板
-const NAME = 'style-panel'
-import { mapGetters, mapActions } from 'vuex'
-import alignIconList from '@/assets/data/AlignListData'
+// const NAME = 'style-panel'
+import { useStore } from 'vuex'
+import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
 import iconItemSelect from '../settings/iconItemSelect.vue'
+import { ref, watch } from 'vue';
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-export default {
-  name: NAME,
-  components: { iconItemSelect },
-  data() {
-    return {
-      activeTab: 0,
-      alignIconList,
-      showGroupCombined: false,
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets']),
-  },
-  watch: {
-    dSelectWidgets: {
-      handler(items) {
-        setTimeout(() => {
-          this.showGroupCombined = items.length > 1
-        }, 100)
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
-    alignAction(item) {
-      const sWidgets = JSON.parse(JSON.stringify(this.dSelectWidgets))
-      this.getCombined().then((group) => {
-        for (let i = 0; i < sWidgets.length; i++) {
-          const element = sWidgets[i]
-          this.updateAlign({
-            align: item.value,
-            uuid: element.uuid,
-            group,
-          })
-        }
-        this.pushHistory()
-      })
-    },
-    layerChange(newLayer) {
-      this.$store.commit('setDWidgets', newLayer.reverse())
-      this.$store.commit('setShowMoveable', false)
-    },
+const store = useStore();
+
+const activeTab = ref(0)
+const iconList = ref<AlignListData[]>(alignIconList)
+const showGroupCombined = ref(false)
+
+const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+
+watch(
+  dSelectWidgets,
+  (items) => {
+    setTimeout(() => {
+      showGroupCombined.value = items.length > 1
+    }, 100)
   },
+  {
+    deep: true
+  }
+)
+
+function handleCombine() {
+  store.dispatch('realCombined')
 }
+
+// ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
+function alignAction(item: AlignListData) {
+  const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
+  store.dispatch('getCombined').then((group) => {
+    sWidgets.forEach((element: Record<string, any>) => {
+      store.dispatch('updateAlign', {
+        align: item.value,
+        uuid: element.uuid,
+        group,
+      })
+      // updateAlign({
+      //   align: item.value,
+      //   uuid: element.uuid,
+      //   group,
+      // })
+    });
+    store.dispatch('pushHistory')
+    // pushHistory()
+  })
+}
+function layerChange(newLayer: Record<string, any>[]) {
+  store.commit('setDWidgets', newLayer.toReversed())
+  store.commit('setShowMoveable', false)
+}
+
 </script>
 
 <style lang="less" scoped>

From 4f26e1652f0dd8967a42943b11a2f1b9382f425d Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 6 Mar 2024 20:32:24 +0000
Subject: [PATCH 4/5] feat: convert widget panel component to composition API

---
 src/assets/data/WidgetClassifyList.ts        |   3 +
 src/components/modules/panel/widgetPanel.vue | 115 +++++++++----------
 2 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/src/assets/data/WidgetClassifyList.ts b/src/assets/data/WidgetClassifyList.ts
index b5a3c7b..319c299 100644
--- a/src/assets/data/WidgetClassifyList.ts
+++ b/src/assets/data/WidgetClassifyList.ts
@@ -6,11 +6,14 @@
  * @LastEditTime: 2024-03-01 20:55:51
  */
 
+import { StyleValue } from "vue"
+
 export type TWidgetClassifyData = {
   name: string
   icon: string
   show: boolean
   component: string
+  style?: StyleValue
 }
 
 export default [
diff --git a/src/components/modules/panel/widgetPanel.vue b/src/components/modules/panel/widgetPanel.vue
index 768a6f0..66225b2 100644
--- a/src/components/modules/panel/widgetPanel.vue
+++ b/src/components/modules/panel/widgetPanel.vue
@@ -2,87 +2,80 @@
   <div id="widget-panel">
     <div class="widget-classify">
       <ul class="classify-wrap">
-        <li v-for="(item, index) in widgetClassifyList" :key="index" :class="['classify-item', { 'active-classify-item': activeWidgetClassify === index }]" @click="clickClassify(index)">
+        <li v-for="(item, index) in state.widgetClassifyList" :key="index" :class="['classify-item', { 'active-classify-item': state.activeWidgetClassify === index }]" @click="clickClassify(index)">
           <div class="icon-box"><i :class="['iconfont', 'icon', item.icon]" :style="item.style" /></div>
           <p>{{ item.name }}</p>
         </li>
       </ul>
       <a href="https://github.com/palxiao/poster-design" target="_blank" class="github"><img src="https://fe-doc.palxp.cn/images/github.svg" alt="Github" title="Github" /> 源码</a>
     </div>
-    <div v-show="active" class="widget-wrap">
+    <div v-show="state.active" class="widget-wrap">
       <keep-alive>
-        <component :is="widgetClassifyList[activeWidgetClassify].component" />
+        <component :is="state.widgetClassifyList[state.activeWidgetClassify].component" />
       </keep-alive>
     </div>
     <!-- <div v-show="active" class="side-wrap"><div class="pack__up" @click="active = false">&lt;</div></div> -->
-    <div v-show="active" class="side-wrap">
+    <div v-show="state.active" class="side-wrap">
       <!-- <el-tooltip effect="dark" content="收起侧边栏" placement="right"> -->
-        <div class="pack__up" @click="active = false"></div>
+        <div class="pack__up" @click="state.active = false"></div>
       <!-- </el-tooltip> -->
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 // 组件面板
-const NAME = 'widget-panel'
-import widgetClassifyListData from '@/assets/data/WidgetClassifyList.ts'
-import { reactive, toRefs, onMounted, watch, nextTick, getCurrentInstance, ComponentInternalInstance } from 'vue'
-import { mapActions } from 'vuex'
+// const NAME = 'widget-panel'
+import widgetClassifyListData from '@/assets/data/WidgetClassifyList'
+import { reactive, onMounted, watch, nextTick, } from 'vue'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 
-export default {
-  name: NAME,
-  setup() {
-    // const store = useStore()
-    const route = useRoute()
-    const state = reactive({
-      widgetClassifyList: widgetClassifyListData,
-      activeWidgetClassify: 0,
-      active: true,
-    })
-    const clickClassify = (index: number) => {
-      state.activeWidgetClassify = index
-      state.active = true
-    }
-
-    onMounted(async () => {
-      await nextTick()
-      const { koutu } = route.query
-      koutu && (state.activeWidgetClassify = 4)
-    })
-
-    watch(
-      () => state.activeWidgetClassify,
-      (index) => {
-        if (index >= 0 && index < state.widgetClassifyList.length) {
-          state.widgetClassifyList[index].show = true
-        }
-      },
-    )
-    // const { proxy } = getCurrentInstance() as ComponentInternalInstance
-    // watch(
-    //   () => state.active,
-    //   () => {
-    //     let screen = document.getElementById('page-design')
-    //     nextTick(() => {
-    //       proxy?.updateScreen({
-    //         width: screen.offsetWidth,
-    //         height: screen.offsetHeight,
-    //       })
-    //     })
-    //   },
-    // )
-
-    return {
-      clickClassify,
-      ...toRefs(state),
-    }
-  },
-  methods: {
-    ...mapActions(['updateScreen']),
-  },
+// const store = useStore()
+const route = useRoute()
+const state = reactive({
+  widgetClassifyList: widgetClassifyListData,
+  activeWidgetClassify: 0,
+  active: true,
+})
+const clickClassify = (index: number) => {
+  state.activeWidgetClassify = index
+  state.active = true
 }
+
+onMounted(async () => {
+  await nextTick()
+  const { koutu } = route.query
+  koutu && (state.activeWidgetClassify = 4)
+})
+
+watch(
+  () => state.activeWidgetClassify,
+  (index) => {
+    if (index >= 0 && index < state.widgetClassifyList.length) {
+      state.widgetClassifyList[index].show = true
+    }
+  },
+)
+
+// const { proxy } = getCurrentInstance() as ComponentInternalInstance
+// watch(
+//   () => state.active,
+//   () => {
+//     let screen = document.getElementById('page-design')
+//     nextTick(() => {
+//       proxy?.updateScreen({
+//         width: screen.offsetWidth,
+//         height: screen.offsetHeight,
+//       })
+//     })
+//   },
+// )
+
+defineExpose({
+  clickClassify
+})
+//   ...mapActions(['updateScreen']),
 </script>
 
 <style lang="less" scoped>

From 810a437ad9c2ad4af1e1fa8b1831350afd18530b Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 6 Mar 2024 20:58:34 +0000
Subject: [PATCH 5/5] feat: convert bgImgListWrap component to composition API

---
 src/api/material.ts                           |   2 +
 .../modules/panel/wrap/BgImgListWrap.vue      | 248 ++++++++++--------
 2 files changed, 143 insertions(+), 107 deletions(-)

diff --git a/src/api/material.ts b/src/api/material.ts
index da961f4..df38df0 100644
--- a/src/api/material.ts
+++ b/src/api/material.ts
@@ -64,6 +64,7 @@ export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('
 
 type TGetImageListParams = {
   page?: number
+  cate?: number
 }
 
 export type TGetImageListResult = {
@@ -73,6 +74,7 @@ export type TGetImageListResult = {
   url: string
   user_id: number
   id: string
+  thumb: string
 }
 
 // 图库列表
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index d50ad48..bd8ed55 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/src/components/modules/panel/wrap/BgImgListWrap.vue
@@ -8,132 +8,166 @@
 <template>
   <div class="wrap">
     <div class="color__box" :style="modelStyle.color">
-      <div v-for="c in colors" :key="c" :style="{ background: c }" class="color__item" @click="setBGcolor(c)"></div>
+      <div v-for="c in state.colors" :key="c" :style="{ background: c }" class="color__item" @click="setBGcolor(c)"></div>
     </div>
-    <ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
+    <ul v-if="state.showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
       <div class="list" :style="modelStyle.list">
-        <imageTip v-for="(item, i) in bgList" :key="i + 'i'" :detail="item">
+        <imageTip v-for="(item, i) in state.bgList" :key="i + 'i'" :detail="item">
           <el-image class="list__img" :src="item.thumb" fit="cover" lazy loading="lazy" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
         </imageTip>
       </div>
-      <div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
-      <div v-show="loadDone" class="loading">全部加载完毕</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
+      <div v-show="state.loadDone" class="loading">全部加载完毕</div>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs, computed } from 'vue'
+<script lang="ts" setup>
+import { reactive, computed, defineProps, defineExpose } from 'vue'
 import api from '@/api'
-import { mapActions, useStore } from 'vuex'
+import { useStore } from 'vuex'
+import { ElImage } from 'element-plus'
+import { TGetImageListResult } from '@/api/material';
 
-export default defineComponent({
-  props: {
-    model: {
-      default: 'widgetPanel'
-    }
-  },
-  setup(props) {
-    const store = useStore()
-    const state = reactive({
-      loading: false,
-      loadDone: false,
-      bgList: [],
-      showList: true,
-      colors: ['#000000ff', '#999999ff', '#CCCCCCff', '#FFFFFFff', '#E65353ff', '#FFD835ff', '#70BC59ff', '#607AF4ff', '#976BEEff'],
-    })
-    // 临时用于改变样式
-    const models: any = {
-      widgetPanel: {
-        color: 'padding: 1.2rem 1rem',
-        list: 'grid-template-columns: auto auto auto;padding: 0 1rem;',
-      },
-      stylePanel: {
-        color: 'padding: 1.2rem 0;',
-        list: 'grid-template-columns: repeat(3, 76px);',
-      }
-    }
-    const modelStyle = computed(() => models[props.model])
+type TCommonPanelData = {
+  color: string
+  list: string
+}
 
-    const pageOptions = { page: 0, pageSize: 20 }
+type TTmpModalData = {
+  widgetPanel: TCommonPanelData
+  stylePanel: TCommonPanelData
+}
 
-    const loadData = () => {
-      if (state.loading) {
-        return
-      }
-      load()
-    }
+type TProps = {
+  model: 'widgetPanel'
+}
 
-    const load = async (init: boolean = false) => {
-      if (state.loadDone) {
-        return
-      }
-      state.loading = true
-      pageOptions.page += 1
+type TState = {
+  loading: boolean
+  loadDone: boolean
+  bgList: TGetImageListResult[]
+  showList: boolean
+  colors: string[]
 
-      if (init) {
-        state.bgList = []
-        pageOptions.page = 1
-      }
+}
 
-      await api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }: any) => {
-        if (list.length > 0) {
-          state.bgList.push(...list)
-        } else {
-          state.loadDone = true
-        }
-      })
+const { model } = defineProps<TProps>()
 
-      setTimeout(() => {
-        state.loading = false
-      }, 100)
-    }
 
-    function setBGcolor(color: string) {
-      store.dispatch('updatePageData', {
-        key: 'backgroundImage',
-        value: '',
-      })
-      store.dispatch('updatePageData', {
-        key: 'backgroundColor',
-        value: color,
-        pushHistory: true,
-      })
-      store.dispatch('selectWidget', {
-        uuid: '-1',
-      })
-    }
-
-    return {
-      ...toRefs(state),
-      load,
-      setBGcolor,
-      loadData,
-      modelStyle
-    }
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'updatePageData']),
-    async selectItem(item: any) {
-      // this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      this.updatePageData({
-        key: 'backgroundTransform',
-        value: {},
-      })
-      this.updatePageData({
-        key: 'backgroundImage',
-        value: item.url,
-        pushHistory: true,
-      })
-      this.selectWidget({
-        uuid: '-1',
-      })
-    },
-    dragStart(e: any, item: any) {
-      this.$store.commit('selectItem', { data: {}, type: 'bg' })
-    },
-  },
+const store = useStore()
+const state = reactive<TState>({
+  loading: false,
+  loadDone: false,
+  bgList: [],
+  showList: true,
+  colors: ['#000000ff', '#999999ff', '#CCCCCCff', '#FFFFFFff', '#E65353ff', '#FFD835ff', '#70BC59ff', '#607AF4ff', '#976BEEff'],
 })
+
+// 临时用于改变样式
+const models: TTmpModalData = {
+  widgetPanel: {
+    color: 'padding: 1.2rem 1rem',
+    list: 'grid-template-columns: auto auto auto;padding: 0 1rem;',
+  },
+  stylePanel: {
+    color: 'padding: 1.2rem 0;',
+    list: 'grid-template-columns: repeat(3, 76px);',
+  }
+}
+
+const modelStyle = computed(() => models[model])
+
+const pageOptions = { page: 0, pageSize: 20 }
+
+const loadData = () => {
+  if (state.loading) {
+    return
+  }
+  load()
+}
+
+const load = async (init: boolean = false) => {
+  if (state.loadDone) {
+    return
+  }
+  state.loading = true
+  pageOptions.page += 1
+
+  if (init) {
+    state.bgList = []
+    pageOptions.page = 1
+  }
+
+  await api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }) => {
+    if (list.length > 0) {
+      state.bgList.push(...list)
+    } else {
+      state.loadDone = true
+    }
+  })
+
+  setTimeout(() => {
+    state.loading = false
+  }, 100)
+}
+
+function setBGcolor(color: string) {
+  store.dispatch('updatePageData', {
+    key: 'backgroundImage',
+    value: '',
+  })
+  store.dispatch('updatePageData', {
+    key: 'backgroundColor',
+    value: color,
+    pushHistory: true,
+  })
+  store.dispatch('selectWidget', {
+    uuid: '-1',
+  })
+}
+
+// ...mapActions(['selectWidget', 'updatePageData']),
+async function selectItem(item: TGetImageListResult) {
+  // this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  store.dispatch('updatePageData', {
+    key: 'backgroundTransform',
+    value: {},
+  })
+  store.dispatch('updatePageData', {
+    key: 'backgroundImage',
+    value: item.url,
+    pushHistory: true,
+  })
+  store.dispatch('selectWidget', {
+    uuid: '-1',
+  })
+  // this.updatePageData({
+  //   key: 'backgroundTransform',
+  //   value: {},
+  // })
+  // this.updatePageData({
+  //   key: 'backgroundImage',
+  //   value: item.url,
+  //   pushHistory: true,
+  // })
+  // this.selectWidget({
+  //   uuid: '-1',
+  // })
+}
+
+function dragStart(_: MouseEvent, _item: TGetImageListResult) {
+  store.commit('selectItem', { data: {}, type: 'bg' })
+}
+
+
+defineExpose({
+  load,
+  setBGcolor,
+  loadData,
+  modelStyle
+})
+
 </script>
 
 <style lang="less" scoped>