diff --git a/backend/src/main/java/io/dataease/controller/handler/GlobalExceptionHandler.java b/backend/src/main/java/io/dataease/controller/handler/GlobalExceptionHandler.java
index 942ba92278..5fd2170072 100644
--- a/backend/src/main/java/io/dataease/controller/handler/GlobalExceptionHandler.java
+++ b/backend/src/main/java/io/dataease/controller/handler/GlobalExceptionHandler.java
@@ -1,6 +1,8 @@
 package io.dataease.controller.handler;
 
 import io.dataease.controller.ResultHolder;
+import io.dataease.controller.handler.annotation.I18n;
+import io.dataease.i18n.Translator;
 import org.apache.commons.lang3.StringUtils;
 import org.slf4j.LoggerFactory;
 import org.springframework.boot.web.servlet.error.ErrorAttributes;
@@ -66,7 +68,8 @@ public class GlobalExceptionHandler implements ErrorController {
                 errorMessage = "The server responds " + code + " but no detailed message.";
             }
         }
-        return ResultHolder.error(errorMessage);
+
+        return ResultHolder.error(Translator.get(errorMessage));
     }
 
     protected Map<String, Object> getErrorAttributes(HttpServletRequest request, boolean includeStackTrace) {
diff --git a/backend/src/main/resources/i18n/messages_en_US.properties b/backend/src/main/resources/i18n/messages_en_US.properties
index 1da183efbe..8526143f3b 100644
--- a/backend/src/main/resources/i18n/messages_en_US.properties
+++ b/backend/src/main/resources/i18n/messages_en_US.properties
@@ -239,7 +239,7 @@ i18n_processing_data=Processing data now, Refresh later
 i18n_union_already_exists=Union relation already exists
 i18n_union_field_exists=The same field can't in two dataset
 i18n_cron_time_error=Start time can't greater then end time
-i18n_auth_source_be_canceled=This Auth Resource Already Be Canceled
+i18n_auth_source_be_canceled=This Auth Resource Already Be Canceled,Please Connect Admin
 i18n_username_exists=ID is already exists
 i18n_ds_name_exists=Datasource name used
 i18n_sync_job_exists=There is already a synchronization task running, please try again later
diff --git a/backend/src/main/resources/i18n/messages_zh_CN.properties b/backend/src/main/resources/i18n/messages_zh_CN.properties
index 32c16a21b7..75459b9951 100644
--- a/backend/src/main/resources/i18n/messages_zh_CN.properties
+++ b/backend/src/main/resources/i18n/messages_zh_CN.properties
@@ -239,7 +239,7 @@ i18n_processing_data=正在处理数据，稍后刷新
 i18n_union_already_exists=关联关系已存在
 i18n_union_field_exists=两个数据集之间关联不能出现多次相同字段
 i18n_cron_time_error=开始时间不能大于结束时间
-i18n_auth_source_be_canceled=当前资源授权权限已经被取消
+i18n_auth_source_be_canceled=本用户当前资源所有授权权限已经被取消,如需再次开通,请联系管理员
 i18n_username_exists=用户 ID 已存在
 i18n_ds_name_exists=数据源名称已被使用
 i18n_sync_job_exists=已经有同步任务在运行，稍后重试
diff --git a/backend/src/main/resources/i18n/messages_zh_TW.properties b/backend/src/main/resources/i18n/messages_zh_TW.properties
index 7b65513ca1..94d480cab4 100644
--- a/backend/src/main/resources/i18n/messages_zh_TW.properties
+++ b/backend/src/main/resources/i18n/messages_zh_TW.properties
@@ -241,7 +241,7 @@ i18n_processing_data=正在處理數據，稍後刷新
 i18n_union_already_exists=關聯關系已存在
 i18n_union_field_exists=兩個數據集之間關聯不能出現多次相同字段
 i18n_cron_time_error=開始時間不能大於結束時間
-i18n_auth_source_be_canceled=當前資源授權權限已經被取消
+i18n_auth_source_be_canceled=本用户当前资源所有授权权限已经被取消,如需再次开通,请联系管理员
 i18n_username_exists=用戶ID已存在
 i18n_ds_name_exists=數據源名稱已被使用
 i18n_sync_job_exists=已經有同步任務在運行，稍後重試
diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
new file mode 100644
index 0000000000..1be67c4dba
--- /dev/null
+++ b/frontend/src/components/DeDrag/index.vue
@@ -0,0 +1,1597 @@
+<template>
+  <div
+    :style="style"
+    :class="[
+      {
+        [classNameActive]: enabled ,
+        [classNameDragging]: dragging,
+        [classNameResizing]: resizing,
+        [classNameDraggable]: draggable,
+        [classNameResizable]: resizable,
+        [classNameRotating]: rotating,
+        [classNameRotatable]: rotatable,
+        [classNameMouseOn]: mouseOn
+      },
+      className
+    ]"
+    @mousedown="elementMouseDown"
+    @touchstart="elementTouchDown"
+    @mouseenter="enter"
+    @mouseleave="leave"
+  >
+    <div
+      v-for="(handle, index) in actualHandles"
+      :key="index"
+      :class="[classNameHandle, classNameHandle + '-' + handle]"
+      :style="handleStyle(handle, index)"
+      @mousedown.stop.prevent="handleDown(handle, $event)"
+      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+    >
+      <slot :name="handle" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script>
+import { matchesSelectorToParentElements, getComputedSize, addEvent, removeEvent } from '../../utils/dom'
+import { computeWidth, computeHeight, restrictToBounds, snapToGrid, rotatedPoint, getAngle } from '../../utils/fns'
+import { events, userSelectNone, userSelectAuto } from './option.js'
+let eventsFor = events.mouse
+
+// private
+import eventBus from '@/components/canvas/utils/eventBus'
+import { mapState } from 'vuex'
+
+export default {
+  replace: true,
+  name: 'VueDragResizeRotate',
+  props: {
+    className: {
+      type: String,
+      default: 'vdr'
+    },
+    classNameDraggable: {
+      type: String,
+      default: 'draggable'
+    },
+    classNameResizable: {
+      type: String,
+      default: 'resizable'
+    },
+    // 新增开启旋转时的自定义类名
+    classNameRotatable: {
+      type: String,
+      default: 'rotatable'
+    },
+    classNameDragging: {
+      type: String,
+      default: 'dragging'
+    },
+    classNameResizing: {
+      type: String,
+      default: 'resizing'
+    },
+    // 新增组件处于旋转时的自定义类名
+    classNameRotating: {
+      type: String,
+      default: 'rotating'
+    },
+    classNameActive: {
+      type: String,
+      default: 'active'
+    },
+    classNameHandle: {
+      type: String,
+      default: 'handle'
+    },
+    disableUserSelect: {
+      type: Boolean,
+      default: true
+    },
+    enableNativeDrag: {
+      type: Boolean,
+      default: false
+    },
+    preventDeactivation: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    // 新增 旋转 默认为false 不开启
+    rotatable: {
+      type: Boolean,
+      default: false
+    },
+    // 锁定宽高比
+    lockAspectRatio: {
+      type: Boolean,
+      default: false
+    },
+    // 新增 外部传入纵横比 w/h
+    outsideAspectRatio: {
+      type: [Number, String],
+      default: 0
+    },
+    w: {
+      type: [Number, String],
+      default: 200,
+      validator: val => {
+        if (typeof val === 'number') {
+          return val > 0
+        }
+        return val === 'auto'
+      }
+    },
+    h: {
+      type: [Number, String],
+      default: 200,
+      validator: val => {
+        if (typeof val === 'number') {
+          return val > 0
+        }
+        return val === 'auto'
+      }
+    },
+    minWidth: {
+      type: Number,
+      default: 0,
+      validator: val => val >= 0
+    },
+    minHeight: {
+      type: Number,
+      default: 0,
+      validator: val => val >= 0
+    },
+    maxWidth: {
+      type: Number,
+      default: null,
+      validator: val => val >= 0
+    },
+    maxHeight: {
+      type: Number,
+      default: null,
+      validator: val => val >= 0
+    },
+    x: {
+      type: [String, Number],
+      default: 0
+    },
+    y: {
+      type: [String, Number],
+      default: 0
+    },
+    z: {
+      type: [String, Number],
+      default: 'auto',
+      validator: val => (typeof val === 'string' ? val === 'auto' : val >= 0)
+    },
+    // 新增 初始旋转角度
+    r: {
+      type: [String, Number],
+      default: 0
+    },
+    // 新增 旋转手柄 rot
+    handles: {
+      type: Array,
+      default: () => ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'rot'],
+      validator: val => {
+        const s = new Set(['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'rot'])
+        return new Set(val.filter(h => s.has(h))).size === val.length
+      }
+    },
+    dragHandle: {
+      type: String,
+      default: null
+    },
+    dragCancel: {
+      type: String,
+      default: null
+    },
+    axis: {
+      type: String,
+      default: 'both',
+      validator: val => ['x', 'y', 'both'].includes(val)
+    },
+    grid: {
+      type: Array,
+      default: () => [1, 1]
+    },
+    parent: {
+      type: [Boolean, String],
+      default: false
+    },
+    onDragStart: {
+      type: Function,
+      default: () => true
+    },
+    onDrag: {
+      type: Function,
+      default: () => true
+    },
+    onResizeStart: {
+      type: Function,
+      default: () => true
+    },
+    onResize: {
+      type: Function,
+      default: () => true
+    },
+    // 新增 回调事件
+    onRotateStart: {
+      type: Function,
+      default: () => true
+    },
+    onRotate: {
+      type: Function,
+      default: () => true
+    },
+    // 冲突检测
+    isConflictCheck: {
+      type: Boolean,
+      default: false
+    },
+    // 元素对齐
+    snap: {
+      type: Boolean,
+      default: false
+    },
+    // 新增 是否对齐容器边界
+    snapBorder: {
+      type: Boolean,
+      default: false
+    },
+    // 当调用对齐时，用来设置组件与组件之间的对齐距离，以像素为单位
+    snapTolerance: {
+      type: Number,
+      default: 5,
+      validator: function(val) {
+        return typeof val === 'number'
+      }
+    },
+    // 缩放比例
+    scaleRatio: {
+      type: Number,
+      default: 1,
+      validator: val => typeof val === 'number'
+    },
+    // handle是否缩放
+    handleInfo: {
+      type: Object,
+      default: () => {
+        return {
+          size: 8,
+          offset: -4,
+          switch: true
+        }
+      }
+    },
+    // private
+    classNameMouseOn: {
+      type: String,
+      default: 'mouseOn'
+    },
+    element: {
+      require: true,
+      type: Object
+    },
+    defaultStyle: {
+      require: true,
+      type: Object
+    },
+    index: {
+      require: true,
+      type: [Number, String]
+    },
+    // 水平设计（相对于悬浮设计） 开启水平设计后 会自动冲突检查 吸附 组件矩阵等
+    horizontal: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: function() {
+    return {
+      left: this.x,
+      top: this.y,
+      right: null,
+      bottom: null,
+      // 新增旋转角度
+      rotate: this.r,
+      width: null,
+      height: null,
+      widthTouched: false,
+      heightTouched: false,
+      // 纵横比变量
+      aspectFactor: null,
+      // 容器的大小
+      parentWidth: null,
+      parentHeight: null,
+      // 设置最小和最大尺寸
+      minW: this.minWidth,
+      minH: this.minHeight,
+      maxW: this.maxWidth,
+      maxH: this.maxHeight,
+      // 定义控制手柄
+      handle: null,
+      enabled: this.active,
+      resizing: false,
+      dragging: false,
+      // 新增 表明组件是否正处于旋转状态
+      rotating: false,
+      zIndex: this.z,
+      // 新增 保存中心点位置，用于计算旋转的方向矢量
+      lastCenterX: 0,
+      lastCenterY: 0,
+      //
+      parentX: 0,
+      parentY: 0,
+
+      // private
+      // 鼠标移入事件
+      mouseOn: false,
+      // 是否移动 （如果没有移动 不需要记录snapshot）
+      hasMove: false
+    }
+  },
+  computed: {
+    handleStyle() {
+      return (stick, index) => {
+        if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' }
+        // 新增 当没有开启旋转的时候，旋转手柄不显示
+        if (stick === 'rot' && !this.rotatable) return { display: 'none' }
+        const size = (this.handleInfo.size / this.scaleRatio).toFixed(2)
+        const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2)
+        const center = (size / 2).toFixed(2)
+        const styleMap = {
+          tl: {
+            top: `${offset}px`,
+            left: `${offset}px`
+          },
+          tm: {
+            top: `${offset}px`,
+            left: `calc(50% - ${center}px)`
+          },
+          tr: {
+            top: `${offset}px`,
+            right: `${offset}px`
+          },
+          mr: {
+            top: `calc(50% - ${center}px)`,
+            right: `${offset}px`
+          },
+          br: {
+            bottom: `${offset}px`,
+            right: `${offset}px`
+          },
+          bm: {
+            bottom: `${offset}px`,
+            right: `calc(50% - ${center}px)`
+          },
+          bl: {
+            bottom: `${offset}px`,
+            left: `${offset}px`
+          },
+          ml: {
+            top: `calc(50% - ${center}px)`,
+            left: `${offset}px`
+          },
+          rot: {
+            top: `-${size * 3}px`,
+            left: `50%`
+          }
+        }
+        const stickStyle = {
+          width: styleMap[stick].width || `${size}px`,
+          height: styleMap[stick].height || `${size}px`,
+          top: styleMap[stick].top,
+          left: styleMap[stick].left,
+          right: styleMap[stick].right,
+          bottom: styleMap[stick].bottom
+        }
+        // 新增 让控制手柄的鼠标样式跟随旋转角度变化
+        if (stick !== 'rot') {
+          const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
+          const STEP = 45
+          const rotate = this.rotate + STEP / 2
+          const deltaIndex = Math.floor(rotate / STEP)
+          index = (index + deltaIndex) % 8
+          stickStyle.cursor = cursorStyleArray[index]
+        }
+        stickStyle.display = this.enabled ? 'block' : 'none'
+        return stickStyle
+      }
+    },
+    style() {
+      return {
+        transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
+        width: this.computedWidth,
+        height: this.computedHeight,
+        zIndex: this.zIndex,
+        fontSize: this.handleInfo.size * 2 + 'px',
+        ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
+      }
+    },
+    // 控制柄显示与否
+    actualHandles() {
+      if (!this.resizable) return []
+      return this.handles
+    },
+    //  根据left right 算出元素的宽度
+    computedWidth() {
+      if (this.w === 'auto') {
+        if (!this.widthTouched) {
+          return 'auto'
+        }
+      }
+      return this.width + 'px'
+    },
+    // 根据top bottom 算出元素的宽度
+    computedHeight() {
+      if (this.h === 'auto') {
+        if (!this.heightTouched) {
+          return 'auto'
+        }
+      }
+      return this.height + 'px'
+    },
+
+    // private
+    ...mapState([
+      'curComponent',
+      'editor',
+      'curCanvasScale',
+      'canvasStyleData'
+    ])
+  },
+  watch: {
+    active(val) {
+      this.enabled = val
+      if (val) {
+        this.$emit('activated')
+      } else {
+        this.$emit('deactivated')
+      }
+    },
+    z(val) {
+      if (val >= 0 || val === 'auto') {
+        this.zIndex = val
+      }
+    },
+    x(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+      if (this.parent) {
+        this.bounds = this.calcDragLimits()
+      }
+      this.moveHorizontally(val)
+    },
+    y(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+      if (this.parent) {
+        this.bounds = this.calcDragLimits()
+      }
+      this.moveVertically(val)
+    },
+    // 新增 监听外部传入参数  旋转角度
+    r(val) {
+      if (val >= 0) {
+        this.rotate = val % 360
+      }
+    },
+    lockAspectRatio(val) {
+      if (val) {
+        if (this.outsideAspectRatio) {
+          this.aspectFactor = this.outsideAspectRatio
+        } else {
+          this.aspectFactor = this.width / this.height
+        }
+      } else {
+        this.aspectFactor = undefined
+      }
+    },
+    outsideAspectRatio(val) {
+      if (val) {
+        this.aspectFactor = val
+      }
+    },
+    minWidth(val) {
+      if (val > 0 && val <= this.width) {
+        this.minW = val
+      }
+    },
+    minHeight(val) {
+      if (val > 0 && val <= this.height) {
+        this.minH = val
+      }
+    },
+    maxWidth(val) {
+      this.maxW = val
+    },
+    maxHeight(val) {
+      this.maxH = val
+    },
+    w(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits()
+      }
+      console.log('changeWidth：' + val)
+      this.changeWidth(val)
+    },
+    h(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits()
+      }
+      this.changeHeight(val)
+    }
+  },
+  created: function() {
+    // eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth
+    if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth')
+    // eslint-disable-next-line 无效prop：minHeight不能大于maxHeight'
+    if (this.maxWidth && this.minHeight > this.maxHeight) console.warn('[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight')
+    this.elmX = 0
+    this.elmY = 0
+    this.elmW = 0
+    this.elmH = 0
+    this.lastCenterX = 0
+    this.lastCenterY = 0
+    this.fixedXName = ''
+    this.fixedYName = ''
+    this.fixedX = 0
+    this.fixedY = 0
+    this.TL = {}
+    this.TR = {}
+    this.BL = {}
+    this.BR = {}
+    this.resetBoundsAndMouseState()
+  },
+  mounted: function() {
+    // private 冲突检测 和水平设计值保持一致
+    // this.isConflictCheck = this.horizontal
+    // this.snap = this.horizontal
+    // this.snapTolerance = 5
+    // this.grid = [10, 10]
+
+    if (!this.enableNativeDrag) {
+      this.$el.ondragstart = () => false
+    }
+    const [parentWidth, parentHeight] = this.getParentSize()
+    this.parentWidth = parentWidth
+    this.parentHeight = parentHeight
+    const [width, height] = getComputedSize(this.$el)
+    this.aspectFactor = (this.w !== 'auto' ? this.w : width) / (this.h !== 'auto' ? this.h : height)
+    if (this.outsideAspectRatio) {
+      this.aspectFactor = this.outsideAspectRatio
+    }
+    this.width = this.w !== 'auto' ? this.w : width
+    console.log('width1:' + this.width)
+    this.height = this.h !== 'auto' ? this.h : height
+    this.right = this.parentWidth - this.width - this.left
+    this.bottom = this.parentHeight - this.height - this.top
+
+    // 绑定data-*属性
+    this.settingAttribute()
+    // 监听取消操作
+    addEvent(document.documentElement, 'mousedown', this.deselect)
+    addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
+    //  窗口变化时，检查容器大小
+    addEvent(window, 'resize', this.checkParentSize)
+  },
+  beforeDestroy: function() {
+    removeEvent(document.documentElement, 'mousedown', this.deselect)
+    removeEvent(document.documentElement, 'touchstart', this.handleUp)
+    removeEvent(document.documentElement, 'mousemove', this.move)
+    removeEvent(document.documentElement, 'touchmove', this.move)
+    removeEvent(document.documentElement, 'mouseup', this.handleUp)
+    removeEvent(document.documentElement, 'touchend touchcancel', this.deselect)
+    removeEvent(window, 'resize', this.checkParentSize)
+  },
+  methods: {
+    // 重置边界和鼠标状态
+    resetBoundsAndMouseState() {
+      this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
+      this.bounds = {
+        minLeft: null,
+        maxLeft: null,
+        minRight: null,
+        maxRight: null,
+        minTop: null,
+        maxTop: null,
+        minBottom: null,
+        maxBottom: null
+      }
+    },
+    // 检查父元素大小
+    checkParentSize() {
+      if (this.parent) {
+        const [newParentWidth, newParentHeight] = this.getParentSize()
+        // 修复父元素改变大小后，组件resizing时活动异常
+        this.right = newParentWidth - this.width - this.left
+        this.bottom = newParentHeight - this.height - this.top
+        this.parentWidth = newParentWidth
+        this.parentHeight = newParentHeight
+      }
+    },
+    // 获取父元素大小
+    getParentSize() {
+      if (this.parent === true) {
+        const style = window.getComputedStyle(this.$el.parentNode, null)
+        const rect = this.$el.parentNode.getBoundingClientRect()
+        this.parentX = rect.x
+        this.parentY = rect.y
+        return [Math.round(parseFloat(style.getPropertyValue('width'), 10)), Math.round(parseFloat(style.getPropertyValue('height'), 10))]
+      }
+      if (typeof this.parent === 'string') {
+        const parentNode = document.querySelector(this.parent)
+        if (!(parentNode instanceof HTMLElement)) {
+          throw new Error(`The selector ${this.parent} does not match any element`)
+        }
+        return [parentNode.offsetWidth, parentNode.offsetHeight]
+      }
+      return [null, null]
+    },
+    // 元素触摸按下
+    elementTouchDown(e) {
+      eventsFor = events.touch
+      this.elementDown(e)
+    },
+    elementMouseDown(e) {
+      // private 设置当前组件数据及状态
+      this.$store.commit('setClickComponentStatus', true)
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search') {
+        e.preventDefault()
+      }
+      // 阻止冒泡事件
+      e.stopPropagation()
+      this.$store.commit('setCurComponent', { component: this.element, index: this.index })
+      eventsFor = events.mouse
+      this.elementDown(e)
+    },
+    // 元素按下
+    elementDown(e) {
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return
+      }
+      const target = e.target || e.srcElement
+      if (this.$el.contains(target)) {
+        if (this.onDragStart(e) === false) {
+          return
+        }
+        if (
+          (this.dragHandle && !matchesSelectorToParentElements(target, this.dragHandle, this.$el)) ||
+          (this.dragCancel && matchesSelectorToParentElements(target, this.dragCancel, this.$el))
+        ) {
+          this.dragging = false
+          return
+        }
+        if (!this.enabled) {
+          this.enabled = true
+          this.$emit('activated')
+          this.$emit('update:active', true)
+        }
+        if (this.draggable) {
+          this.dragging = true
+        }
+        //  按下鼠标表示保存当前状态
+        this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX
+        this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY
+        this.mouseClickPosition.left = this.left
+        this.mouseClickPosition.right = this.right
+        this.mouseClickPosition.top = this.top
+        this.mouseClickPosition.bottom = this.bottom
+        this.mouseClickPosition.width = this.width
+        this.mouseClickPosition.height = this.height
+        if (this.parent) {
+          this.bounds = this.calcDragLimits()
+        }
+        addEvent(document.documentElement, eventsFor.move, this.move)
+        addEvent(document.documentElement, eventsFor.stop, this.handleUp)
+      }
+    },
+    // 计算移动范围
+    calcDragLimits() {
+      // 开启旋转时，不在进行边界限制
+      if (this.rotatable) {
+        return {
+          // minLeft: -9999,
+          // maxLeft: 9999,
+          // minRight: -9999,
+          // maxRight: 9999,
+          // minTop: -9999,
+          // maxTop: 9999,
+          // minBottom: -9999,
+          // maxBottom: 9999,
+          minLeft: -this.width / 2,
+          maxLeft: this.parentWidth - this.width / 2,
+          minRight: this.width / 2,
+          maxRight: this.parentWidth + this.width / 2,
+          minTop: -this.height / 2,
+          maxTop: this.parentHeight - this.height / 2,
+          minBottom: this.height / 2,
+          maxBottom: this.parentHeight + this.height / 2
+        }
+      } else {
+        return {
+          minLeft: this.left % this.grid[0],
+          maxLeft: Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left,
+          minRight: this.right % this.grid[0],
+          maxRight: Math.floor((this.parentWidth - this.width - this.right) / this.grid[0]) * this.grid[0] + this.right,
+          minTop: this.top % this.grid[1],
+          maxTop: Math.floor((this.parentHeight - this.height - this.top) / this.grid[1]) * this.grid[1] + this.top,
+          minBottom: this.bottom % this.grid[1],
+          maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom
+        }
+      }
+    },
+    // 取消
+    deselect(e) {
+      const target = e.target || e.srcElement
+      const regex = new RegExp(this.className + '-([trmbl]{2})', '')
+      if (!this.$el.contains(target) && !regex.test(target.className)) {
+        if (this.enabled && !this.preventDeactivation) {
+          this.enabled = false
+          this.$emit('deactivated')
+          this.$emit('update:active', false)
+        }
+        removeEvent(document.documentElement, eventsFor.move, this.move)
+      }
+      this.resetBoundsAndMouseState()
+    },
+    // 控制柄触摸按下
+    handleTouchDown(handle, e) {
+      eventsFor = events.touch
+      this.handleDown(handle, e)
+    },
+    // 控制柄按下
+    handleDown(handle, e) {
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return false
+      }
+      if (this.onResizeStart(handle, e) === false) {
+        return false
+      }
+      if (e.stopPropagation) e.stopPropagation()
+      // 锁定纵横比时，将顶点转换为中点 - 不在需要因而将其注释
+      // if (this.lockAspectRatio && !handle.includes('m')) {
+      //   this.handle = 'm' + handle.substring(1)
+      // } else {
+      // this.handle = handle;
+      // }
+      this.handle = handle
+      // 新增
+      if (this.handle === 'rot') {
+        this.rotating = true
+      } else {
+        this.resizing = true
+      }
+      // 新增保存矩形信息
+      // 获取父元素的位置大小信息
+      const { top, left, width, height } = this.$el.getBoundingClientRect()
+      // 保存旋转中心的绝对坐标
+      this.lastCenterX = window.pageXOffset + left + width / 2
+      this.lastCenterY = window.pageYOffset + top + height / 2
+      // 保存四个顶点的坐标
+      const oleft = this.left
+      const otop = this.top
+      const owidth = this.width
+      const oheight = this.height
+      const centerX = oleft + owidth / 2
+      const centerY = otop + oheight / 2
+      const rotate = this.rotate
+      this.TL = rotatedPoint(centerX, centerY, oleft, otop, rotate)
+      this.TR = rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate)
+      this.BL = rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate)
+      this.BR = rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate)
+      //  保存鼠标按下时的当前状态
+      this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX
+      this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY
+      this.mouseClickPosition.left = this.left
+      this.mouseClickPosition.right = this.right
+      this.mouseClickPosition.top = this.top
+      this.mouseClickPosition.bottom = this.bottom
+      this.mouseClickPosition.width = this.width
+      this.mouseClickPosition.height = this.height
+      // 计算边界
+      this.bounds = this.calcResizeLimits()
+      // 添加事件
+      addEvent(document.documentElement, eventsFor.move, this.move)
+      addEvent(document.documentElement, eventsFor.stop, this.handleUp)
+    },
+    // 计算调整大小范围
+    calcResizeLimits() {
+      const minW = this.minW
+      const minH = this.minH
+      let maxW = this.maxW
+      let maxH = this.maxH
+      const [gridX, gridY] = this.grid
+      // 获取矩形信息
+      const width = this.width
+      const height = this.height
+      const left = this.left
+      const top = this.top
+      const right = this.right
+      const bottom = this.bottom
+      // 对齐网格
+      maxW = maxW - (maxW % gridX)
+      maxH = maxH - (maxH % gridY)
+      const limits = {
+        minLeft: null,
+        maxLeft: null,
+        minTop: null,
+        maxTop: null,
+        minRight: null,
+        maxRight: null,
+        minBottom: null,
+        maxBottom: null
+      }
+      // 边界限制
+      if (this.parent) {
+        limits.minLeft = left
+        limits.maxLeft = left + Math.floor((width - minW) / gridX)
+        limits.minTop = top
+        limits.maxTop = top + Math.floor((height - minH) / gridY)
+        limits.minRight = right
+        limits.maxRight = right + Math.floor((width - minW) / gridX)
+        limits.minBottom = bottom
+        limits.maxBottom = bottom + Math.floor((height - minH) / gridY)
+        if (maxW) {
+          limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW)
+          limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW)
+        }
+        if (maxH) {
+          limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH)
+          limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH)
+        }
+      } else {
+        limits.minLeft = null
+        limits.maxLeft = left + Math.floor(width - minW)
+        limits.minTop = null
+        limits.maxTop = top + Math.floor(height - minH)
+        limits.minRight = null
+        limits.maxRight = right + Math.floor(width - minW)
+        limits.minBottom = null
+        limits.maxBottom = bottom + Math.floor(height - minH)
+        if (maxW) {
+          limits.minLeft = -(right + maxW)
+          limits.minRight = -(left + maxW)
+        }
+        if (maxH) {
+          limits.minTop = -(bottom + maxH)
+          limits.minBottom = -(top + maxH)
+        }
+        if (this.lockAspectRatio && (maxW && maxH)) {
+          limits.minLeft = Math.min(limits.minLeft, -(right + maxW))
+          limits.minTop = Math.min(limits.minTop, -(maxH + bottom))
+          limits.minRight = Math.min(limits.minRight, -left - maxW)
+          limits.minBottom = Math.min(limits.minBottom, -top - maxH)
+        }
+      }
+      return limits
+    },
+    // 移动
+    move(e) {
+      if (this.resizing) {
+        this.handleResize(e)
+      } else if (this.dragging) {
+        this.handleDrag(e)
+      } else if (this.rotating) {
+        this.handleRotate(e)
+      }
+    },
+    // 获取鼠标或者触摸点的坐标
+    getMouseCoordinate(e) {
+      if (e.type.indexOf('touch') !== -1) {
+        return {
+          x: e.changedTouches[0].clientX,
+          y: e.changedTouches[0].clientY
+        }
+      } else {
+        return {
+          x: e.pageX || e.clientX + document.documentElement.scrollLeft,
+          y: e.pageY || e.clientY + document.documentElement.scrollTop
+        }
+      }
+    },
+    handleRotate(e) {
+      // 获取方向向量，得到旋转角度
+      const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
+      const x = mouseX - this.lastCenterX
+      const y = mouseY - this.lastCenterY
+      this.rotate = (getAngle(x, y) + 90) % 360
+      this.$emit('rotating', this.rotate)
+      // 元素移动
+
+      // private 记录当前样式
+      this.recordCurStyle()
+    },
+
+    // 元素移动
+    async handleDrag(e) {
+      const axis = this.axis
+      const grid = this.grid
+      const bounds = this.bounds
+      const mouseClickPosition = this.mouseClickPosition
+      // 水平移动
+      const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
+      // 垂直移动
+      const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY) : 0
+      const [deltaX, deltaY] = snapToGrid(grid, tmpDeltaX, tmpDeltaY, this.scaleRatio)
+      const left = restrictToBounds(mouseClickPosition.left - deltaX, bounds.minLeft, bounds.maxLeft)
+      const top = restrictToBounds(mouseClickPosition.top - deltaY, bounds.minTop, bounds.maxTop)
+      if (this.onDrag(left, top) === false) {
+        return
+      }
+      const right = restrictToBounds(mouseClickPosition.right + deltaX, bounds.minRight, bounds.maxRight)
+      const bottom = restrictToBounds(mouseClickPosition.bottom + deltaY, bounds.minBottom, bounds.maxBottom)
+      this.left = left
+      this.top = top
+      this.right = right
+      this.bottom = bottom
+      await this.snapCheck()
+      this.$emit('dragging', this.left, this.top)
+
+      // private 记录当前样式
+      this.recordCurStyle()
+    },
+    // 外部传参改动x
+    moveHorizontally(val) {
+      const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale)
+      const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft)
+      this.left = left
+      this.right = this.parentWidth - this.width - left
+    },
+    // 外部传参改动y
+    moveVertically(val) {
+      const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
+      const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop)
+      this.top = top
+      this.bottom = this.parentHeight - this.height - top
+    },
+    // 控制柄移动
+    handleResize(e) {
+      const handle = this.handle
+      const scaleRatio = this.scaleRatio
+      const { TL, TR, BL, BR } = this
+      let { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
+      // 在非旋转且有父容器限制的时候，直接限制mouse参与计算的坐标值
+      if (!this.rotatable && this.parent) {
+        mouseX = restrictToBounds(mouseX, this.parentX, this.parentX + this.parentWidth)
+        mouseY = restrictToBounds(mouseY, this.parentY, this.parentY + this.parentHeight)
+      }
+      // 获取鼠标移动的坐标差
+      let deltaX = mouseX - this.mouseClickPosition.mouseX
+      let deltaY = mouseY - this.mouseClickPosition.mouseY
+      // 考虑放缩
+      deltaX = deltaX / this.scaleRatio
+      deltaY = deltaY / this.scaleRatio
+      let diffX, diffY, scale, scaleB, scaleC, newX, newY, newW, newH
+      let Fixed = {} // 固定点
+      let BX = {} // 高度边选点
+      let CX = {} //  宽度边选点
+      let Va = {} // 固定点到鼠标 向量
+      let Vb = {} // 固定点到投影边  向量
+      let Vc = {} // 另一边投影
+      let Vw = {} // 宽度向量
+      let Vh = {} // 高度向量
+      // 拖动中点
+      if (handle.includes('m')) {
+        switch (handle) {
+          case 'tm':
+            diffX = deltaX + (TL.x + TR.x) / 2
+            diffY = deltaY + (TL.y + TR.y) / 2
+            Fixed = BL
+            BX = TL
+            CX = BR
+            Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
+            Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
+            scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
+            Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
+            Vh = { x: Vb.x * scale, y: Vb.y * scale }
+            break
+          case 'bm':
+            diffX = deltaX + (BL.x + BR.x) / 2
+            diffY = deltaY + (BL.y + BR.y) / 2
+            Fixed = TL
+            BX = BL
+            CX = TR
+            Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
+            Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
+            scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
+            Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
+            Vh = { x: Vb.x * scale, y: Vb.y * scale }
+            break
+          case 'ml':
+            diffX = deltaX + (TL.x + BL.x) / 2
+            diffY = deltaY + (TL.y + BL.y) / 2
+            Fixed = BR
+            BX = BL
+            CX = TR
+            Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
+            Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
+            scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
+            Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
+            Vw = { x: Vb.x * scale, y: Vb.y * scale }
+            break
+          case 'mr':
+            diffX = deltaX + (TR.x + TR.x) / 2
+            diffY = deltaY + (TR.y + TR.y) / 2
+            Fixed = BL
+            BX = BR
+            CX = TL
+            Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
+            Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
+            scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
+            Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
+            Vw = { x: Vb.x * scale, y: Vb.y * scale }
+            break
+          default:
+            break
+        }
+        newX = Fixed.x + (Vw.x + Vh.x) / 2
+        newY = Fixed.y + (Vw.y + Vh.y) / 2
+        newW = Math.sqrt(Math.pow(Vw.x, 2) + Math.pow(Vw.y, 2))
+        newH = Math.sqrt(Math.pow(Vh.x, 2) + Math.pow(Vh.y, 2))
+      } else {
+        // 拖动顶点
+        switch (handle) {
+          case 'tl':
+            diffX = deltaX + TL.x
+            diffY = deltaY + TL.y
+            Fixed = BR
+            BX = BL // 高度 TL BL
+            CX = TR // 宽度 TL TR
+            break
+          case 'tr':
+            diffX = deltaX + TR.x
+            diffY = deltaY + TR.y
+            Fixed = BL
+            BX = BR
+            CX = TL
+            break
+          case 'bl':
+            diffX = deltaX + BL.x
+            diffY = deltaY + BL.y
+            Fixed = TR
+            BX = TL
+            CX = BR
+            break
+          case 'br':
+            diffX = deltaX + BR.x
+            diffY = deltaY + BR.y
+            Fixed = TL
+            BX = TR
+            CX = BL
+            break
+          default:
+            break
+        }
+        Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
+        Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
+        Vc = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
+        scaleB = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
+        scaleC = (Va.x * Vc.x + Va.y * Vc.y) / (Math.pow(Vc.x, 2) + Math.pow(Vc.y, 2))
+        Vw = { x: Vb.x * scaleB, y: Vb.y * scaleB }
+        Vh = { x: Vc.x * scaleC, y: Vc.y * scaleC }
+        newX = Fixed.x + (Vw.x + Vh.x) / 2
+        newY = Fixed.y + (Vw.y + Vh.y) / 2
+        newW = Math.sqrt(Math.pow(Vw.x, 2) + Math.pow(Vw.y, 2))
+        newH = Math.sqrt(Math.pow(Vh.x, 2) + Math.pow(Vh.y, 2))
+      }
+      this.left = newX - newW / 2
+      this.top = newY - newH / 2
+      // 存在父容器，内部元素大小不允许超过父容器
+      if (this.parent) {
+        newW = restrictToBounds(newW, 0, this.parentWidth)
+        newH = restrictToBounds(newH, 0, this.parentHeight)
+      }
+      // 外部传参限制大小
+      newW = restrictToBounds(newW, this.minW || 0, this.maxW)
+      newH = restrictToBounds(newH, this.minH || 0, this.maxH)
+      // 纵横比
+      if (this.lockAspectRatio) {
+        console.log(this.lockAspectRatio, this.aspectFactor)
+        if (newW / newH > this.aspectFactor) {
+          newW = newH * this.aspectFactor
+        } else {
+          newH = newW / this.aspectFactor
+        }
+      }
+      this.width = newW
+      console.log('width2:' + this.width)
+      this.height = newH
+
+      this.$emit('resizing', this.left, this.top, this.width, this.height)
+
+      // private 记录当前组件样式
+      this.recordCurStyle()
+      this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId)
+    },
+    changeWidth(val) {
+      debugger
+      console.log('parentWidth', this.parentWidth)
+      console.log('parentHeight', this.parentHeight)
+      const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale)
+      // const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, this.bounds.maxRight)
+      // private 将 this.bounds.minRight 设置为0
+      const right = restrictToBounds(this.parentWidth - newWidth - this.left, 0, this.bounds.maxRight)
+      let bottom = this.bottom
+      if (this.lockAspectRatio) {
+        bottom = this.bottom - (this.right - right) / this.aspectFactor
+      }
+      const width = computeWidth(this.parentWidth, this.left, right)
+      const height = computeHeight(this.parentHeight, this.top, bottom)
+      this.right = right
+      this.bottom = bottom
+      this.width = width
+      console.log('width3:' + this.width)
+      this.height = height
+    },
+    changeHeight(val) {
+      const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale)
+      // const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, this.bounds.maxBottom)
+      // private 将 this.bounds.minBottom 设置为0
+      const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, 0, this.bounds.maxBottom)
+      let right = this.right
+      if (this.lockAspectRatio) {
+        right = this.right - (this.bottom - bottom) * this.aspectFactor
+      }
+      const width = computeWidth(this.parentWidth, this.left, right)
+      const height = computeHeight(this.parentHeight, this.top, bottom)
+      this.right = right
+      this.bottom = bottom
+      this.width = width
+      console.log('width4:' + this.width)
+      this.height = height
+    },
+    // 从控制柄松开
+    async handleUp(e) {
+      this.handle = null
+      // 初始化辅助线数据
+      const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
+      const refLine = { vLine: [], hLine: [] }
+      for (const i in refLine) {
+        refLine[i] = JSON.parse(JSON.stringify(temArr))
+      }
+      // 保存 鼠标松开的坐标
+      const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
+      this.lastMouseX = mouseX
+      this.lastMouseY = mouseY
+      if (this.resizing) {
+        this.resizing = false
+        await this.conflictCheck()
+        this.$emit('refLineParams', refLine)
+        this.$emit('resizestop', this.left, this.top, this.width, this.height)
+      }
+      if (this.dragging) {
+        this.dragging = false
+        await this.conflictCheck()
+        this.$emit('refLineParams', refLine)
+        this.$emit('dragstop', this.left, this.top)
+      }
+      if (this.rotating) {
+        this.rotating = false
+        this.$emit('rotatestop', this.rotate)
+      }
+      this.resetBoundsAndMouseState()
+      // private 记录snapshot
+
+      // 如果辅助设计 需要最后调整矩阵
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        debugger
+        this.recordMatrixCurStyle()
+      }
+      this.hasMove && this.$store.commit('recordSnapshot')
+      // 记录snapshot后 移动已记录设置为false
+      this.hasMove = false
+
+      removeEvent(document.documentElement, eventsFor.move, this.move)
+
+      // private 删除handle Up事件 防止重复recordSnapshot
+      removeEvent(document.documentElement, eventsFor.stop, this.handleUp)
+    },
+    // 新增方法 ↓↓↓
+    // 设置属性
+    settingAttribute() {
+      // 设置冲突检测
+      this.$el.setAttribute('data-is-check', `${this.isConflictCheck}`)
+      // 设置对齐元素
+      this.$el.setAttribute('data-is-snap', `${this.snap}`)
+    },
+    // 冲突检测
+    conflictCheck() {
+      const top = this.top
+      const left = this.left
+      const width = this.width
+      const height = this.height
+      if (this.isConflictCheck) {
+        const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
+        for (const item of nodes) {
+          if (
+            item.className !== undefined &&
+            !item.className.split(' ').includes(this.classNameActive) &&
+            item.getAttribute('data-is-check') !== null &&
+            item.getAttribute('data-is-check') !== 'false'
+          ) {
+            const tw = item.offsetWidth
+            const th = item.offsetHeight
+            // 正则获取left与right
+            const [tl, tt] = this.formatTransformVal(item.style.transform)
+            // 左上角与右下角重叠
+            const tfAndBr = (top >= tt && left >= tl && tt + th > top && tl + tw > left) || (top <= tt && left < tl && top + height > tt && left + width > tl)
+            // 右上角与左下角重叠
+            const brAndTf = (left <= tl && top >= tt && left + width > tl && top < tt + th) || (top < tt && left > tl && top + height > tt && left < tl + tw)
+            // 下边与上边重叠
+            const bAndT = (top <= tt && left >= tl && top + height > tt && left < tl + tw) || (top >= tt && left <= tl && top < tt + th && left > tl + tw)
+            // 上边与下边重叠（宽度不一样）
+            const tAndB = (top <= tt && left >= tl && top + height > tt && left < tl + tw) || (top >= tt && left <= tl && top < tt + th && left > tl + tw)
+            // 左边与右边重叠
+            const lAndR = (left >= tl && top >= tt && left < tl + tw && top < tt + th) || (top > tt && left <= tl && left + width > tl && top < tt + th)
+            // 左边与右边重叠（高度不一样）
+            const rAndL = (top <= tt && left >= tl && top + height > tt && left < tl + tw) || (top >= tt && left <= tl && top < tt + th && left + width > tl)
+            // 如果冲突，就将回退到移动前的位置
+            if (tfAndBr || brAndTf || bAndT || tAndB || lAndR || rAndL) {
+              this.top = this.mouseClickPosition.top
+              this.left = this.mouseClickPosition.left
+              this.width = this.mouseClickPosition.width
+              console.log('width5:' + this.width)
+              this.height = this.mouseClickPosition.height
+            }
+          }
+        }
+      }
+    },
+    // 检测对齐元素
+    async snapCheck() {
+      if (this.snap) {
+        // 保存当前元素的四个属性
+        let width = this.width
+        let height = this.height
+        let activeLeft = this.left
+        let activeRight = this.left + width
+        let activeTop = this.top
+        let activeBottom = this.top + height
+        // 初始化辅助线数据
+        const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
+        const refLine = { vLine: [], hLine: [] }
+        for (const i in refLine) {
+          refLine[i] = JSON.parse(JSON.stringify(temArr))
+        }
+        const tem = {
+          value: { x: [[], [], []], y: [[], [], []] },
+          display: [],
+          position: []
+        }
+        // 获取当前父节点下所有子节点
+        const nodes = this.$el.parentNode.childNodes
+        //  当允许多个同时激活时，获取总体的属性
+        const { groupWidth, groupHeight, groupLeft, groupTop, bln } = await this.getActiveAll(nodes)
+        if (!bln) {
+          width = groupWidth
+          height = groupHeight
+          activeLeft = groupLeft
+          activeRight = groupLeft + groupWidth
+          activeTop = groupTop
+          activeBottom = groupTop + groupHeight
+        }
+        // 遍历获取其他元素的属性
+        for (const item of nodes) {
+          if (
+            // private
+            item.tagName !== 'svg' &&
+            item.className !== undefined &&
+            !item.className.split(' ').includes(this.classNameActive) &&
+            item.getAttribute('data-is-snap') !== null &&
+            item.getAttribute('data-is-snap') !== 'false'
+          ) {
+            // 获取位置，角度
+            const [l, t, rotate] = this.formatTransformVal(item.style.transform)
+            if ((rotate - this.rotate) % 90 === 0) {
+              // 获取宽高
+              const w = item.offsetWidth
+              const h = item.offsetHeight
+              // 计算得到right和bottom
+              const r = l + w // 对齐目标right
+              const b = t + h // 对齐目标的bottom
+              const hc = Math.abs(activeTop + height / 2 - (t + h / 2)) <= this.snapTolerance // 水平中线
+              const vc = Math.abs(activeLeft + width / 2 - (l + w / 2)) <= this.snapTolerance // 垂直中线
+              const ts = Math.abs(t - activeBottom) <= this.snapTolerance // 从上到下
+              const TS = Math.abs(b - activeBottom) <= this.snapTolerance // 从上到下
+              const bs = Math.abs(t - activeTop) <= this.snapTolerance // 从下到上 上边共线
+              const BS = Math.abs(b - activeTop) <= this.snapTolerance // 从下到上
+              const ls = Math.abs(l - activeRight) <= this.snapTolerance // 外左
+              const LS = Math.abs(r - activeRight) <= this.snapTolerance // 外左
+              const rs = Math.abs(l - activeLeft) <= this.snapTolerance // 外右
+              const RS = Math.abs(r - activeLeft) <= this.snapTolerance // 外右
+              tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc]
+              tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2]
+              // 单个可激活元素与其他元素对齐
+              if (bln) {
+                if (ts) {
+                  this.top = t - height
+                  this.bottom = this.parentHeight - this.top - height
+                  tem.value.y[0].push(l, r, activeLeft, activeRight)
+                }
+                if (bs) {
+                  this.top = t
+                  this.bottom = this.parentHeight - this.top - height
+                  tem.value.y[0].push(l, r, activeLeft, activeRight)
+                }
+                if (TS) {
+                  this.top = b - height
+                  this.bottom = this.parentHeight - this.top - height
+                  tem.value.y[1].push(l, r, activeLeft, activeRight)
+                }
+                if (BS) {
+                  this.top = b
+                  this.bottom = this.parentHeight - this.top - height
+                  tem.value.y[1].push(l, r, activeLeft, activeRight)
+                }
+                if (ls) {
+                  this.left = l - width
+                  this.right = this.parentWidth - this.left - width
+                  tem.value.x[0].push(t, b, activeTop, activeBottom)
+                }
+                if (rs) {
+                  this.left = l
+                  this.right = this.parentWidth - this.left - width
+                  tem.value.x[0].push(t, b, activeTop, activeBottom)
+                }
+                if (LS) {
+                  this.left = r - width
+                  this.right = this.parentWidth - this.left - width
+                  tem.value.x[1].push(t, b, activeTop, activeBottom)
+                }
+                if (RS) {
+                  this.left = r
+                  this.right = this.parentWidth - this.left - width
+                  tem.value.x[1].push(t, b, activeTop, activeBottom)
+                }
+                if (hc) {
+                  this.top = t + h / 2 - height / 2
+                  this.bottom = this.parentHeight - this.top - height
+                  tem.value.y[2].push(l, r, activeLeft, activeRight)
+                }
+                if (vc) {
+                  this.left = l + w / 2 - width / 2
+                  this.right = this.parentWidth - this.left - width
+                  tem.value.x[2].push(t, b, activeTop, activeBottom)
+                }
+                // 和容器贴边
+                if (this.snapBorder) {
+                  if (Math.abs(this.left - 0) <= this.snapTolerance) {
+                    this.left = 0
+                    this.right = this.parentWidth - this.left - width
+                  }
+                  if (Math.abs(this.right - 0) <= this.snapTolerance) {
+                    this.right = 0
+                    this.left = this.parentWidth - this.width - this.right
+                  }
+                  if (Math.abs(this.top - 0) <= this.snapTolerance) {
+                    this.top = 0
+                    this.bottom = this.parentHeight - this.top - height
+                  }
+                  if (Math.abs(this.bottom - 0) <= this.snapTolerance) {
+                    this.bottom = 0
+                    this.top = this.parentHeight - this.bottom - height
+                  }
+                }
+              }
+              // 再次进行边界处理
+              const bounds = this.bounds
+              this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft)
+              this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop)
+              this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight)
+              this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom)
+              // 辅助线坐标与是否显示(display)对应的数组,易于循环遍历
+              const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2]
+              for (let i = 0; i <= arrTem.length; i++) {
+                // 前6为Y辅助线,后6为X辅助线
+                const xory = i < 6 ? 'y' : 'x'
+                const horv = i < 6 ? 'hLine' : 'vLine'
+                if (tem.display[i]) {
+                  const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]])
+                  refLine[horv][arrTem[i]].display = tem.display[i]
+                  refLine[horv][arrTem[i]].position = tem.position[i] + 'px'
+                  refLine[horv][arrTem[i]].origin = origin
+                  refLine[horv][arrTem[i]].lineLength = length
+                }
+              }
+            }
+          }
+        }
+        this.$emit('refLineParams', refLine)
+      }
+    },
+    // 计算参考线
+    calcLineValues(arr) {
+      const length = Math.max(...arr) - Math.min(...arr) + 'px'
+      const origin = Math.min(...arr) + 'px'
+      return { length, origin }
+    },
+    async getActiveAll(nodes) {
+      const activeAll = []
+      const XArray = []
+      const YArray = []
+      let groupWidth = 0
+      let groupHeight = 0
+      let groupLeft = 0
+      let groupTop = 0
+      for (const item of nodes) {
+        console.log('===' + typeof item.tagName)
+        // 修复判断条件
+        // if (item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) {
+        if (item.tagName !== 'svg' && item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) {
+          activeAll.push(item)
+        }
+      }
+      const AllLength = activeAll.length
+      if (AllLength > 1) {
+        for (const i of activeAll) {
+          const l = i.offsetLeft
+          const r = l + i.offsetWidth
+          const t = i.offsetTop
+          const b = t + i.offsetHeight
+          XArray.push(l, r)
+          YArray.push(t, b)
+        }
+        groupWidth = Math.max(...XArray) - Math.min(...XArray)
+        groupHeight = Math.max(...YArray) - Math.min(...YArray)
+        groupLeft = Math.min(...XArray)
+        groupTop = Math.min(...YArray)
+      }
+      const bln = AllLength === 1
+      return { groupWidth, groupHeight, groupLeft, groupTop, bln }
+    },
+    // 修复 正则获取left与top
+    formatTransformVal(string) {
+      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g)
+      if (top === undefined) top = 0
+      return [Number(left), Number(top), rotate]
+    },
+    // private
+    // 鼠标移入事件
+    enter() {
+      this.mouseOn = true
+    },
+    // 鼠标移出事件
+    leave() {
+      this.mouseOn = false
+    },
+    // 记录当前样式
+    recordCurStyle() {
+      const style = {
+        ...this.defaultStyle
+      }
+      style.left = this.left
+      style.top = this.top
+      style.width = this.width
+      style.height = this.height
+      style.rotate = this.rotate
+      this.hasMove = true
+      this.$store.commit('setShapeStyle', style)
+    },
+
+    // 记录当前样式 矩阵处理
+    recordMatrixCurStyle() {
+      const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+      const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+      const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      const style = {
+        ...this.defaultStyle
+      }
+      style.left = left
+      style.top = top
+      style.width = width
+      style.height = height
+      style.rotate = this.rotate
+      this.hasMove = true
+      this.$store.commit('setShapeStyle', style)
+    }
+  }
+
+}
+</script>
+<style scoped>
+.vdr {
+  touch-action: none;
+  position: absolute;
+  border: 1px
+}
+
+.handle {
+  box-sizing: border-box;
+  position: absolute;
+  background: #ffffff;
+  border: 1px solid #70c0ff;
+  border-radius: 50%;
+  z-index: 2;
+}
+.handle-tl {
+  cursor: nw-resize;
+}
+.handle-tm {
+  cursor: n-resize;
+}
+.handle-tr {
+  cursor: ne-resize;
+}
+.handle-ml {
+  cursor: w-resize;
+}
+.handle-mr {
+  cursor: e-resize;
+}
+.handle-bl {
+  cursor: sw-resize;
+}
+.handle-bm {
+  cursor: s-resize;
+}
+.handle-br {
+  cursor: se-resize;
+}
+/* 新增 旋转控制柄 */
+
+.handle-rot {
+  position: relative;
+  transform: translateX(-50%);
+  cursor: grab;
+  display: inline-block;
+  box-sizing: border-box;
+  border: none;
+  text-indent: -9999px;
+  vertical-align: middle;
+}
+.handle-rot:before,
+.handle-rot:after {
+  content: "";
+  box-sizing: inherit;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.handle-rot:before {
+  /* display: block; */
+  width: 1em;
+  height: 1em;
+  border: 2px solid #333;
+  border-right-color: transparent;
+  border-radius: 50%;
+}
+.handle-rot:after {
+  width: 0px;
+  height: 0px;
+  border: 0.25em solid #333;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  left: 100%;
+  top: 10%;
+}
+
+.mouseOn {
+  outline: 1px dashed #70c0ff;
+  user-select: none;
+}
+</style>
diff --git a/frontend/src/components/DeDrag/option.js b/frontend/src/components/DeDrag/option.js
new file mode 100644
index 0000000000..3d1a10d8f2
--- /dev/null
+++ b/frontend/src/components/DeDrag/option.js
@@ -0,0 +1,26 @@
+export const events = {
+  mouse: {
+    start: 'mousedown',
+    move: 'mousemove',
+    stop: 'mouseup'
+  },
+  touch: {
+    start: 'touchstart',
+    move: 'touchmove',
+    stop: 'touchend'
+  }
+}
+// 禁止用户选取
+export const userSelectNone = {
+  userSelect: 'none',
+  MozUserSelect: 'none',
+  WebkitUserSelect: 'none',
+  MsUserSelect: 'none'
+}
+// 用户选中自动
+export const userSelectAuto = {
+  userSelect: 'auto',
+  MozUserSelect: 'auto',
+  WebkitUserSelect: 'auto',
+  MsUserSelect: 'auto'
+}
diff --git a/frontend/src/components/canvas/components/Editor/Grid.vue b/frontend/src/components/canvas/components/Editor/Grid.vue
index 60c1f06c4e..a12b6d9313 100644
--- a/frontend/src/components/canvas/components/Editor/Grid.vue
+++ b/frontend/src/components/canvas/components/Editor/Grid.vue
@@ -1,18 +1,18 @@
 <template>
   <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
     <defs>
-      <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
+      <!--      <pattern id="smallGrid" width="5" height="5" patternUnits="userSpaceOnUse">-->
+      <!--        <path-->
+      <!--          d="M 5 0 L 0 0 0 5"-->
+      <!--          fill="none"-->
+      <!--          stroke="rgba(207, 207, 207, 0.3)"-->
+      <!--          stroke-width="1"-->
+      <!--        />-->
+      <!--      </pattern>-->
+      <pattern id="grid" :width="matrixStyle.width" :height="matrixStyle.height" patternUnits="userSpaceOnUse">
+        <rect :width="matrixStyle.width" :height="matrixStyle.height" fill="url(#smallGrid)" />
         <path
-          d="M 7.236328125 0 L 0 0 0 7.236328125"
-          fill="none"
-          stroke="rgba(207, 207, 207, 0.3)"
-          stroke-width="1"
-        />
-      </pattern>
-      <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
-        <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)" />
-        <path
-          d="M 36.181640625 0 L 0 0 0 36.181640625"
+          :d="pathD"
           fill="none"
           stroke="rgba(186, 186, 186, 0.5)"
           stroke-width="1"
@@ -23,6 +23,28 @@
   </svg>
 </template>
 
+<script>
+
+export default {
+  props: {
+    matrixStyle: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  computed: {
+    pathD: function() {
+      return 'M ' + this.matrixStyle.width + ' 0 L 0 0 0 ' + this.matrixStyle.height
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 .grid {
     position: absolute;
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 7c5ef1d56c..932fce6ff6 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="showDrag"
     id="editor"
     class="editor"
     :class="{ edit: isEdit }"
@@ -8,18 +9,27 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <Grid />
-
+    <Grid v-if="canvasStyleData.auxiliaryMatrix" :matrix-style="matrixStyle" />
     <!--页面组件列表展示-->
-    <Shape
+    <de-drag
       v-for="(item, index) in componentData"
       :key="item.id"
+      :index="index"
+      :x="getShapeStyleIntDeDrag(item.style,'left')"
+      :y="getShapeStyleIntDeDrag(item.style,'top')"
+      :w="getShapeStyleIntDeDrag(item.style,'width')"
+      :h="getShapeStyleIntDeDrag(item.style,'height')"
+      :r="item.style.rotate"
+      :parent="true"
+      :rotatable="rotatable"
       :default-style="getShapeStyleInt(item.style)"
-      :style="getShapeStyle(item.style)"
       :active="item === curComponent"
       :element="item"
-      :index="index"
-      :class="{ lock: item.isLock }"
+      class-name-active="de-drag-active"
+      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
+      :snap="true"
+      :snap-tolerance="5"
+      @refLineParams="getRefLineParams"
     >
       <component
         :is="item.component"
@@ -63,19 +73,33 @@
         :element="item"
         @input="handleInput"
       /> -->
-    </Shape>
+    </de-drag>
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
     <!--    <MarkLine />-->
     <!-- 选中区域 -->
-    <Area v-show="isShowArea" :start="start" :width="width" :height="height" />
+    <!--    <Area v-show="isShowArea" :start="start" :width="width" :height="height" />-->
+
+    <span
+      v-for="(item, index) in vLine"
+      v-show="item.display"
+      :key="'v_'+index"
+      class="ref-line v-line"
+      :style="{
+        left: item.position,
+        top: item.origin,
+        height: item.lineLength,
+      }"
+    />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
+import DeDrag from '@/components/DeDrag'
+
 // eslint-disable-next-line no-unused-vars
 import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
 import { $ } from '@/components/canvas/utils/utils'
@@ -89,7 +113,7 @@ import { Condition } from '@/components/widget/bean/Condition'
 import bus from '@/utils/bus'
 
 export default {
-  components: { Shape, ContextMenu, MarkLine, Area, Grid },
+  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag },
   props: {
     isEdit: {
       type: Boolean,
@@ -128,7 +152,23 @@ export default {
       needToChangeWidth: [
         'left',
         'width'
-      ]
+      ],
+      // private 是否可旋转
+      rotatable: false,
+      // 矩阵大小
+      matrixStyle: {
+        width: 80,
+        height: 20
+      },
+      // 矩阵数量 默认 12 * 24
+      matrixCount: {
+        x: 12,
+        y: 24
+      },
+      customStyleHistory: null,
+      showDrag: true,
+      vLine: [],
+      hLine: []
     }
   },
   watch: {
@@ -146,7 +186,6 @@ export default {
     }
   },
   computed: {
-
     customStyle() {
       let style = {
         width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
@@ -327,19 +366,26 @@ export default {
     handleContextMenu(e) {
       e.stopPropagation()
       e.preventDefault()
-
-      // 计算菜单相对于编辑器的位移
       let target = e.target
-      let top = e.offsetY
-      let left = e.offsetX
       while (target instanceof SVGElement) {
         target = target.parentNode
       }
+      let top = 0
+      let left = 0
+      // 如果档期有计划的组件 坐标取当前组件的加上偏移量
+      if (this.curComponent && !target.className.includes('editor')) {
+        top = this.curComponent.style.top * this.scaleHeight / 100 + e.offsetY
+        left = this.curComponent.style.left * this.scaleWidth / 100 + e.offsetX
+      } else {
+        // 计算菜单相对于编辑器的位移
+        top = e.offsetY
+        left = e.offsetX
 
-      while (!target.className.includes('editor')) {
-        left += target.offsetLeft
-        top += target.offsetTop
-        target = target.parentNode
+        while (!target.className.includes('editor')) {
+          left += target.offsetLeft
+          top += target.offsetTop
+          target = target.parentNode
+        }
       }
 
       this.$store.commit('showContextMenu', { top, left })
@@ -443,11 +489,62 @@ export default {
       }
     },
     changeScale() {
+      // 获取当前宽高（宽高改变后重新渲染画布）
+      const style = {
+        width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
+        height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
+      }
+      if (this.customStyleHistory && this.customStyleHistory !== style) {
+        this.showDrag = false
+        this.$nextTick(() => (this.showDrag = true))
+      }
+      this.customStyleHistory = style
+
+      if (this.canvasStyleData.matrixCount) {
+        this.matrixCount = this.canvasStyleData.matrixCount
+      }
       if (this.outStyle.width && this.outStyle.height) {
+        // 矩阵计算
+        if (!this.canvasStyleData.selfAdaption) {
+          this.matrixStyle.width = this.canvasStyleData.width / this.matrixCount.x
+          this.matrixStyle.height = this.canvasStyleData.height / this.matrixCount.y
+        } else {
+          this.matrixStyle.width = this.outStyle.width / this.matrixCount.x
+          this.matrixStyle.height = this.outStyle.height / this.matrixCount.y
+        }
         this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
         this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
-        this.$store.commit('setCurCanvasScale', { scaleWidth: this.scaleWidth, scaleHeight: this.scaleHeight })
+        this.$store.commit('setCurCanvasScale',
+          {
+            scaleWidth: this.scaleWidth,
+            scaleHeight: this.scaleHeight,
+            matrixStyleWidth: this.matrixStyle.width,
+            matrixStyleHeight: this.matrixStyle.height
+          })
       }
+    },
+    getShapeStyleIntDeDrag(style, prop) {
+      if (prop === 'rotate') {
+        return style['rotate']
+      }
+      if (prop === 'width') {
+        return this.format(style['width'], this.scaleWidth)
+      }
+      if (prop === 'left') {
+        return this.format(style['left'], this.scaleWidth)
+      }
+      if (prop === 'height') {
+        return this.format(style['height'], this.scaleHeight)
+      }
+      if (prop === 'top') {
+        return this.format(style['top'], this.scaleHeight)
+      }
+    },
+    getRefLineParams(params) {
+      console.log(params)
+      const { vLine, hLine } = params
+      this.vLine = vLine
+      this.hLine = hLine
     }
   }
 }
@@ -456,7 +553,7 @@ export default {
 <style lang="scss" scoped>
 .editor {
     position: relative;
-    background: #fff;
+    /*background: #fff;*/
     margin: auto;
     background-size:100% 100% !important;
 
@@ -465,10 +562,35 @@ export default {
     }
 }
 .edit {
+    outline: 1px solid gainsboro;
     .component {
         outline: none;
         width: 100%;
         height: 100%;
     }
 }
+
+.gap_class{
+   padding:3px;
+}
+
+// 拖拽组件样式
+
+.de-drag-active{
+  outline: 1px solid #70c0ff;
+  user-select: none;
+}
+
+.ref-line {
+  position: absolute;
+  background-color: #70c0ff;;
+  z-index: 9999;
+}
+.v-line {
+  width: 1px;
+}
+.h-line {
+  height: 1px;
+}
+
 </style>
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 57a9300788..048e5c2d86 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -2,6 +2,11 @@
   <div>
     <div class="toolbar">
 
+      <div class="canvas-config" style="margin-right: 10px">
+        <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" label="矩阵设计" name="auxiliaryMatrix" />
+        <span>矩阵设计</span>
+      </div>
+
       <div class="canvas-config" style="margin-right: 10px">
         <el-switch v-model="canvasStyleData.selfAdaption" :width="35" label="自适应画布区域" name="selfAdaption" />
         <span>自适应画布区域 </span>
diff --git a/frontend/src/components/canvas/store/layer.js b/frontend/src/components/canvas/store/layer.js
index fac44172eb..a5554be878 100644
--- a/frontend/src/components/canvas/store/layer.js
+++ b/frontend/src/components/canvas/store/layer.js
@@ -2,41 +2,41 @@ import { swap } from '@/components/canvas/utils/utils'
 import toast from '@/components/canvas/utils/toast'
 
 export default {
-    mutations: {
-        upComponent({ componentData, curComponentIndex }) {
-            // 上移图层 index，表示元素在数组中越往后
-            if (curComponentIndex < componentData.length - 1) {
-                swap(componentData, curComponentIndex, curComponentIndex + 1)
-            } else {
-                toast('已经到顶了')
-            }
-        },
-
-        downComponent({ componentData, curComponentIndex }) {
-            // 下移图层 index，表示元素在数组中越往前
-            if (curComponentIndex > 0) {
-                swap(componentData, curComponentIndex, curComponentIndex - 1)
-            } else {
-                toast('已经到底了')
-            }
-        },
-
-        topComponent({ componentData, curComponentIndex }) {
-            // 置顶
-            if (curComponentIndex < componentData.length - 1) {
-                swap(componentData, curComponentIndex, componentData.length - 1)
-            } else {
-                toast('已经到顶了')
-            }
-        },
-
-        bottomComponent({ componentData, curComponentIndex }) {
-            // 置底
-            if (curComponentIndex > 0) {
-                swap(componentData, curComponentIndex, 0)
-            } else {
-                toast('已经到底了')
-            }
-        },
+  mutations: {
+    upComponent({ componentData, curComponentIndex }) {
+      // 上移图层 index，表示元素在数组中越往后
+      if (curComponentIndex < componentData.length - 1) {
+        swap(componentData, curComponentIndex, curComponentIndex + 1)
+      } else {
+        toast('已经到顶了')
+      }
     },
+
+    downComponent({ componentData, curComponentIndex }) {
+      // 下移图层 index，表示元素在数组中越往前
+      if (curComponentIndex > 0) {
+        swap(componentData, curComponentIndex, curComponentIndex - 1)
+      } else {
+        toast('已经到底了')
+      }
+    },
+
+    topComponent({ componentData, curComponentIndex }) {
+      // 置顶
+      if (curComponentIndex < componentData.length - 1) {
+        swap(componentData, curComponentIndex, componentData.length - 1)
+      } else {
+        toast('已经到顶了')
+      }
+    },
+
+    bottomComponent({ componentData, curComponentIndex }) {
+      // 置底
+      if (curComponentIndex > 0) {
+        swap(componentData, curComponentIndex, 0)
+      } else {
+        toast('已经到底了')
+      }
+    }
+  }
 }
diff --git a/frontend/src/components/canvas/store/snapshot.js b/frontend/src/components/canvas/store/snapshot.js
index 13a4078d4e..d3ca59984d 100644
--- a/frontend/src/components/canvas/store/snapshot.js
+++ b/frontend/src/components/canvas/store/snapshot.js
@@ -25,6 +25,7 @@ export default {
     },
 
     recordSnapshot(state) {
+      console.log('recordSnapshot')
       // 添加新的快照
       state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
       state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 4542e1f208..2a2a42c68e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -952,6 +952,7 @@ export default {
     close_aided_design: 'Close Component Aided Design',
     open_style_design: 'Open Style Design',
     close_style_design: 'Close Style Design',
+    matrix_design: 'Matrix Design',
     left: 'X-Axis',
     top: 'Y-Axis',
     height: 'Height',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 87b36e018b..deb4b2a023 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -952,6 +952,7 @@ export default {
     close_aided_design: '关闭组件辅助设计',
     open_style_design: '打开样式设计',
     close_style_design: '关闭样式设计',
+    matrix_design: '矩阵设计',
     left: 'x 坐标',
     top: 'y 坐标',
     height: '高',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4ac04da602..1bafe36a32 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -952,6 +952,7 @@ export default {
     close_aided_design: '关闭组件辅助设计',
     open_style_design: '打开样式设计',
     close_style_design: '关闭样式设计',
+    matrix_design: '矩阵设计',
     left: 'x 坐标',
     top: 'y 坐标',
     height: '高',
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2bef70b47d..3bc86b2f67 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -27,6 +27,7 @@ Vue.use(VueClipboard)
 Vue.use(widgets)
 Vue.prototype.$api = api
 
+
 import * as echarts from 'echarts'
 
 Vue.prototype.$echarts = echarts
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 7d91bf307c..7f9e237152 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -72,7 +72,7 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
-      // console.log('curComponent' + JSON.stringify(component))
+      console.log('curComponent' + JSON.stringify(component))
       state.curComponent = component
       state.curComponentIndex = index
     },
@@ -82,12 +82,12 @@ const data = {
     },
 
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
-      if (top) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
-      if (left) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
-      if (width) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
-      if (height) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
-      if (rotate) curComponent.style.rotate = rotate
-      // console.log('setShapeStyle' + JSON.stringify(curComponent))
+      if (top || top === 0) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
+      if (left || left === 0) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
+      if (width || width === 0) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
+      if (height || height === 0) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
+      if (rotate || rotate === 0) curComponent.style.rotate = rotate
+      // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
     },
 
     setShapeSingleStyle({ curComponent }, { key, value }) {
diff --git a/frontend/src/utils/dom.js b/frontend/src/utils/dom.js
new file mode 100644
index 0000000000..19799743f6
--- /dev/null
+++ b/frontend/src/utils/dom.js
@@ -0,0 +1,60 @@
+import { isFunction } from './fns'
+
+// 将选择器与父元素匹配
+export function matchesSelectorToParentElements(el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function getComputedSize($el) {
+  const style = window.getComputedStyle($el)
+
+  return [
+    parseFloat(style.getPropertyValue('width'), 10),
+    parseFloat(style.getPropertyValue('height'), 10)
+  ]
+}
+// 添加事件
+export function addEvent(el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+// 删除事件
+export function removeEvent(el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}
diff --git a/frontend/src/utils/fns.js b/frontend/src/utils/fns.js
new file mode 100644
index 0000000000..0516ed58cc
--- /dev/null
+++ b/frontend/src/utils/fns.js
@@ -0,0 +1,60 @@
+export function isFunction(func) {
+  return (typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]')
+}
+
+// 对齐栅格
+export function snapToGrid(grid, pendingX, pendingY, scale = 1) {
+  const x = Math.round((pendingX / scale) / grid[0]) * grid[0]
+  const y = Math.round((pendingY / scale) / grid[1]) * grid[1]
+  return [x, y]
+}
+
+// 获取rect模型
+export function getSize(el) {
+  const rect = el.getBoundingClientRect()
+  return [
+    parseInt(rect.width),
+    parseInt(rect.height)
+  ]
+}
+
+export function computeWidth(parentWidth, left, right) {
+  return parentWidth - left - right
+}
+
+export function computeHeight(parentHeight, top, bottom) {
+  return parentHeight - top - bottom
+}
+
+export function restrictToBounds(value, min, max) {
+  if (min !== null && value < min) {
+    return min
+  }
+
+  if (max !== null && max < value) {
+    return max
+  }
+
+  return value
+}
+
+// 返回相对于参考点旋转后的坐标
+export function rotatedPoint(originX, originY, offsetX, offsetY, rotate) {
+  const rad = (Math.PI / 180) * rotate
+  const cos = Math.cos(rad)
+  const sin = Math.sin(rad)
+  const x = offsetX - originX
+  const y = offsetY - originY
+  return {
+    x: x * cos - y * sin + originX,
+    y: x * sin + y * cos + originY
+  }
+}
+
+// 根据相对坐标返回角度，正方形为顺时针
+export function getAngle(x, y) {
+  let theta = Math.atan2(y, x) // 正切转弧度
+  theta = Math.round((180 / Math.PI) * theta) // 弧度转角度
+  if (theta < 0) theta = 360 + theta // 控制角度在0~360度
+  return theta // 返回角度
+}
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
index 88076927fe..31753bb155 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
@@ -7,8 +7,8 @@
         trigger="click"
       >
         <el-col>
-          <el-radio v-model="panelStyleForm.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }} </el-radio>
-          <el-radio v-model="panelStyleForm.gap" label="no" @change="onChangePanelStyle">{{ $t('panel.no_gap') }}</el-radio>
+          <el-radio v-model="panel.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }} </el-radio>
+          <el-radio v-model="panel.gap" label="no" @change="onChangePanelStyle">{{ $t('panel.no_gap') }}</el-radio>
         </el-col>
         <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.component_gap') }} <i class="el-icon-setting el-icon--right" /></el-button>
       </el-popover>
@@ -18,18 +18,32 @@
 
 <script>
 import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
 export default {
   name: 'BackgroundSelector',
   props: {
   },
   data() {
     return {
-      panelStyleForm: JSON.parse(JSON.stringify(DEFAULT_PANEL_STYLE))
+      panel: null
     }
   },
+  computed: mapState([
+    'canvasStyleData'
+  ]),
+
+  created() {
+    // 初始化赋值
+    this.panel = this.canvasStyleData.panel
+  },
   methods: {
     onChangePanelStyle() {
-      this.$emit('onChangePanelStyle', this.panelStyleForm)
+      const canvasStyleData = deepCopy(this.canvasStyleData)
+      canvasStyleData.panel = this.panel
+      this.$store.commit('setCanvasStyle', canvasStyleData)
+      this.$store.commit('recordSnapshot')
     }
   }
 }
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index fb9ffca3f1..be46507ef8 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -11,7 +11,7 @@
         <el-collapse-item :title="$t('panel.panel')" name="panel">
           <el-row style="background-color: #f7f8fa; margin: 5px">
             <background-selector class="attr-selector" />
-            <!--            <component-gap class="attr-selector" />-->
+            <component-gap class="attr-selector" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.module_style')" name="component">
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index f697075755..a6cc361f3e 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -74,7 +74,7 @@
       </de-aside-container>
 
       <!--画布区域-->
-      <de-main-container id="canvasInfo-main" style="margin-left: 5px;margin-right: 5px">
+      <de-main-container id="canvasInfo-main">
         <!--左侧抽屉-->
         <el-drawer
           :visible.sync="show"