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'