From af24ba2733d9a7946c0df415e810ba96b7ca450e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 30 Mar 2021 16:11:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=B0=81=E8=A3=85=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/canvas/index.vue      |  169 ++
 .../components/vue-drag-resize-rotate/dom.js  |   60 -
 .../components/vue-drag-resize-rotate/fns.js  |   40 -
 .../vue-drag-resize-rotate/index.vue          | 1551 -----------------
 .../src/components/vue-drag-resize/dom.js     |   60 -
 .../src/components/vue-drag-resize/fns.js     |   40 -
 .../src/components/vue-drag-resize/index.vue  | 1277 --------------
 .../src/views/panel/DrawingBoard/index.vue    |  262 ---
 frontend/src/views/panel/index.vue            |    3 +-
 frontend/src/views/panel/list/PanelView.vue   |  393 -----
 frontend/src/views/panel/preview/index.vue    |    8 +-
 11 files changed, 173 insertions(+), 3690 deletions(-)
 create mode 100644 frontend/src/components/canvas/index.vue
 delete mode 100644 frontend/src/components/vue-drag-resize-rotate/dom.js
 delete mode 100644 frontend/src/components/vue-drag-resize-rotate/fns.js
 delete mode 100644 frontend/src/components/vue-drag-resize-rotate/index.vue
 delete mode 100644 frontend/src/components/vue-drag-resize/dom.js
 delete mode 100644 frontend/src/components/vue-drag-resize/fns.js
 delete mode 100644 frontend/src/components/vue-drag-resize/index.vue
 delete mode 100644 frontend/src/views/panel/DrawingBoard/index.vue
 delete mode 100644 frontend/src/views/panel/list/PanelView.vue

diff --git a/frontend/src/components/canvas/index.vue b/frontend/src/components/canvas/index.vue
new file mode 100644
index 0000000000..e3a752eb32
--- /dev/null
+++ b/frontend/src/components/canvas/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="home">
+    <Toolbar />
+
+    <main>
+      <!-- 左侧组件列表 -->
+<!--      <section class="left">-->
+<!--        <ComponentList />-->
+<!--      </section>-->
+      <!-- 中间画布 -->
+      <section class="center">
+        <div
+          class="content"
+          @drop="handleDrop"
+          @dragover="handleDragOver"
+          @mousedown="handleMouseDown"
+          @mouseup="deselectCurComponent"
+        >
+          <Editor />
+        </div>
+      </section>
+
+    </main>
+  </div>
+</template>
+
+<script>
+import Editor from '@/components/Editor/index'
+import ComponentList from '@/components/ComponentList' // 左侧列表组件
+import AttrList from '@/components/canvas/components/AttrList' // 右侧属性列表
+import AnimationList from '@/components/canvas/components/AnimationList' // 右侧动画列表
+import EventList from '@/components/canvas/components/EventList' // 右侧事件列表
+import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import Toolbar from '@/components/Toolbar'
+import { deepCopy } from '@/utils/utils'
+import { mapState } from 'vuex'
+import generateID from '@/utils/generateID'
+import { listenGlobalKeyDown } from '@/utils/shortcutKey'
+
+export default {
+  components: { Editor, ComponentList, AttrList, AnimationList, EventList, Toolbar },
+  data() {
+    return {
+      activeName: 'attr',
+      reSelectAnimateIndex: undefined
+    }
+  },
+  computed: mapState([
+    'componentData',
+    'curComponent',
+    'isClickComponent',
+    'canvasStyleData'
+  ]),
+  created() {
+    this.restore()
+    // 全局监听按键事件
+    listenGlobalKeyDown()
+  },
+  methods: {
+    restore() {
+      // 用保存的数据恢复画布
+      if (localStorage.getItem('canvasData')) {
+        this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
+      }
+
+      if (localStorage.getItem('canvasStyle')) {
+        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
+      }
+    },
+
+    resetID(data) {
+      data.forEach(item => {
+        item.id = generateID()
+      })
+
+      return data
+    },
+
+    handleDrop(e) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      debugger
+      let component
+      const id = e.dataTransfer.getData('componentId')
+      componentList.forEach(componentTemp => {
+        if (id == componentTemp.id) {
+          component = deepCopy(componentTemp)
+        }
+      })
+      // const component = deepCopy(componentList[e.dataTransfer.getData('index')])
+      component.style.top = e.offsetY
+      component.style.left = e.offsetX
+      component.id = generateID()
+      this.$store.commit('addComponent', { component })
+      this.$store.commit('recordSnapshot')
+    },
+
+    handleDragOver(e) {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+
+    handleMouseDown() {
+      this.$store.commit('setClickComponentStatus', false)
+    },
+
+    deselectCurComponent(e) {
+      if (!this.isClickComponent) {
+        this.$store.commit('setCurComponent', { component: null, index: null })
+      }
+
+      // 0 左击 1 滚轮 2 右击
+      if (e.button != 2) {
+        this.$store.commit('hideContextMenu')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.home {
+    height: 100vh;
+    background: #fff;
+
+    main {
+        height: calc(100% - 64px);
+        position: relative;
+
+        .left {
+            position: absolute;
+            height: 100%;
+            width: 200px;
+            left: 0;
+            top: 0;
+            padding-top: 10px;
+        }
+
+        .right {
+            position: absolute;
+            height: 100%;
+            width: 262px;
+            right: 0;
+            top: 0;
+        }
+
+        .center {
+            margin-left: 200px;
+            margin-right: 262px;
+            background: #f5f5f5;
+            height: 100%;
+            overflow: auto;
+            padding: 20px;
+
+            .content {
+                width: 100%;
+                height: 100%;
+                overflow: auto;
+            }
+        }
+    }
+
+    .placeholder {
+        text-align: center;
+        color: #333;
+    }
+}
+</style>
diff --git a/frontend/src/components/vue-drag-resize-rotate/dom.js b/frontend/src/components/vue-drag-resize-rotate/dom.js
deleted file mode 100644
index 9e36dba6ea..0000000000
--- a/frontend/src/components/vue-drag-resize-rotate/dom.js
+++ /dev/null
@@ -1,60 +0,0 @@
-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/components/vue-drag-resize-rotate/fns.js b/frontend/src/components/vue-drag-resize-rotate/fns.js
deleted file mode 100644
index 004f1682e1..0000000000
--- a/frontend/src/components/vue-drag-resize-rotate/fns.js
+++ /dev/null
@@ -1,40 +0,0 @@
-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
-}
diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
deleted file mode 100644
index a6f1e1eedf..0000000000
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ /dev/null
@@ -1,1551 +0,0 @@
-<template>
-  <div
-    :style="style"
-    :class="[
-      {
-        [classNameActive]: enabled,
-        [classNameDragging]: dragging,
-        [classNameResizing]: resizing,
-        [classNameDraggable]: draggable,
-        [classNameResizable]: resizable,
-        [classNameRotating]: rotating,
-        [classNameRotatable]: rotatable
-      },
-      className
-    ]"
-    @mousedown="elementMouseDown"
-    @touchstart="elementTouchDown"
-  >
-    <div
-      v-for="(item,index) in actualHandles"
-      :key="index"
-      :class="[classNameHandle, classNameHandle + '-' + item]"
-      :style="handleStyle(item,index)"
-      @mousedown.stop.prevent="handleDown(item, $event)"
-      @touchstart.stop.prevent="handleTouchDown(item, $event)"
-    >
-      <slot :name="handle" />
-    </div>
-    <i class="el-icon-circle-close" @click.stop="removeView()" />
-    <slot />
-  </div>
-</template>
-
-<script>
-import { matchesSelectorToParentElements, getComputedSize, addEvent, removeEvent } from './dom'
-import { computeWidth, computeHeight, restrictToBounds, snapToGrid } from './fns'
-
-const events = {
-  mouse: {
-    start: 'mousedown',
-    move: 'mousemove',
-    stop: 'mouseup'
-  },
-  touch: {
-    start: 'touchstart',
-    move: 'touchmove',
-    stop: 'touchend'
-  }
-}
-
-// 禁止用户选取
-const userSelectNone = {
-  userSelect: 'none',
-  MozUserSelect: 'none',
-  WebkitUserSelect: 'none',
-  MsUserSelect: 'none'
-}
-// 用户选中自动
-const userSelectAuto = {
-  userSelect: 'auto',
-  MozUserSelect: 'auto',
-  WebkitUserSelect: 'auto',
-  MsUserSelect: 'auto'
-}
-
-let eventsFor = events.mouse
-
-export default {
-  replace: true,
-  name: 'VueDragResizeRotate',
-  props: {
-    panelDesign: {
-      type: Object,
-      default: null
-    },
-    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
-        }
-      }
-    }
-  },
-
-  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
-    }
-  },
-  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: {}
-        }
-        const stickStyle = {
-          width: `${size}px`,
-          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() {
-      if (!this.panelDesign.styleInit && this.panelDesign.componentPosition) {
-        // 设置定位
-        const componentPosition = JSON.parse(this.panelDesign.componentPosition)
-        this.left = componentPosition.left
-        this.top = componentPosition.top
-        this.width = componentPosition.width
-        this.height = componentPosition.height
-        this.w = componentPosition.width
-        this.h = componentPosition.height
-        this.zIndex = componentPosition.zIndex
-        this.dragging = componentPosition.dragging
-        this.disableUserSelect = componentPosition.disableUserSelect
-      }
-
-      const newStyle = {
-        transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
-        width: this.computedWidth,
-        height: this.computedHeight,
-        zIndex: this.zIndex,
-        ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
-      }
-
-      this.panelDesign.styleInit = true
-      this.panelDesign.componentStyle = JSON.stringify(newStyle)
-
-      // 回收定位
-      const newComponentPosition = {
-        left: this.left,
-        top: this.top,
-        width: this.width,
-        height: this.height,
-        w: this.width,
-        h: this.height,
-        zIndex: this.zIndex,
-        dragging: this.dragging,
-        disableUserSelect: this.disableUserSelect
-      }
-      this.panelDesign.componentPosition = JSON.stringify(newComponentPosition)
-
-      this.$emit('newStyle', this.panelDesign.id, newStyle)
-      return newStyle
-    },
-    // 控制柄显示与否
-    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'
-    },
-    // 表示只修改宽度
-    resizingOnX() {
-      return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'))
-    },
-    // 表示只修改高度
-    resizingOnY() {
-      return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'))
-    },
-    // 表示正在调整边角
-    isCornerHandle() {
-      return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle)
-    }
-  },
-
-  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) {
-        this.aspectFactor = this.width / this.height
-      } else {
-        this.aspectFactor = undefined
-      }
-    },
-    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()
-      }
-
-      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() {
-    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)
-    this.width = this.w !== 'auto' ? this.w : 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: {
-    removeView() {
-      this.panelDesign.keepFlag = false
-      // console.log(this.panelDesignId);
-      // this.$emit('removeView', this.panelDesign.id)
-    },
-    // 重置边界和鼠标状态
-    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)
-        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) {
-      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
-        }
-      } 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 = this.rotatedPoint(centerX, centerY, oleft, otop, rotate)
-      this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate)
-      this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate)
-      this.BR = this.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) {
-        console.log('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 = (this.getAngle(x, y) + 90) % 360
-      this.$emit('rotating', this.rotate)
-      // 元素移动
-    },
-
-    // 返回相对于参考点旋转后的坐标
-    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
-      }
-    },
-    // 根据相对坐标返回角度，正方形为顺时针
-    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 // 返回角度
-    },
-
-    // 元素移动
-    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)
-    },
-    moveHorizontally(val) {
-      // eslint-disable-next-line no-unused-vars
-      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
-    },
-    moveVertically(val) {
-      // eslint-disable-next-line no-unused-vars
-      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 { TL, TR, BL, BR } = this
-      const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
-      // 获取鼠标移动的坐标差
-      const deltaX = mouseX - this.mouseClickPosition.mouseX
-      const deltaY = mouseY - this.mouseClickPosition.mouseY
-      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))
-      }
-
-      // 边界限制(矩形的外接圆不能超出父盒子)
-      const bounds = this.bounds
-      if (this.rotatable) {
-        this.left = newX - newW / 2
-        this.top = newY - newH / 2
-        this.width = newW
-        this.height = newH
-      } else {
-        this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft)
-        this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop)
-        if (this.parent) {
-          newW = newW <= this.parentWidth ? newW : this.parentWidth
-          newH = newH <= this.parentHeight ? newH : this.parentHeight
-        }
-        this.width = restrictToBounds(newW, this.minW, this.maxW)
-        this.height = restrictToBounds(newH, this.minH, this.maxH)
-      }
-
-      this.$emit('resizing', this.left, this.top, this.width, this.height)
-    },
-
-    changeWidth(val) {
-      // eslint-disable-next-line no-unused-vars
-      const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale)
-      const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, 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
-      this.height = height
-    },
-    changeHeight(val) {
-      // eslint-disable-next-line no-unused-vars
-      const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale)
-      const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, 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
-      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()
-      removeEvent(document.documentElement, eventsFor.move, this.move)
-    },
-    // 新增方法 ↓↓↓
-    // 设置属性
-    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
-              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 (
-            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) {
-        // 修复判断条件
-        if (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) {
-      // eslint-disable-next-line prefer-const
-      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g)
-      if (top === undefined) top = 0
-      return [Number(left), Number(top), rotate]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.vdr {
-  touch-action: none;
-  position: absolute;
-  box-sizing: border-box;
-}
-.handle {
-  box-sizing: border-box;
-  position: absolute;
-  background: #ffffff;
-  border: 1px solid #333;
-}
-.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: absolute;
-  top: -22px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 12px !important;
-  height: 12px !important;
-  border-radius: 6px;
-  cursor: grab;
-}
-.handle-rot:before {
-  content: "";
-  position: absolute;
-  top: 10px;
-  left: 4px;
-  width: 2px;
-  height: 7px;
-  background-color: #666;
-}
-</style>
diff --git a/frontend/src/components/vue-drag-resize/dom.js b/frontend/src/components/vue-drag-resize/dom.js
deleted file mode 100644
index 9e36dba6ea..0000000000
--- a/frontend/src/components/vue-drag-resize/dom.js
+++ /dev/null
@@ -1,60 +0,0 @@
-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/components/vue-drag-resize/fns.js b/frontend/src/components/vue-drag-resize/fns.js
deleted file mode 100644
index 004f1682e1..0000000000
--- a/frontend/src/components/vue-drag-resize/fns.js
+++ /dev/null
@@ -1,40 +0,0 @@
-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
-}
diff --git a/frontend/src/components/vue-drag-resize/index.vue b/frontend/src/components/vue-drag-resize/index.vue
deleted file mode 100644
index 30e41152f7..0000000000
--- a/frontend/src/components/vue-drag-resize/index.vue
+++ /dev/null
@@ -1,1277 +0,0 @@
-<template>
-  <div
-    :style="style"
-    :class="[
-      {
-        [classNameActive]: enabled,
-        [classNameDragging]: dragging,
-        [classNameResizing]: resizing,
-        [classNameDraggable]: draggable,
-        [classNameResizable]: resizable
-      },
-      className
-    ]"
-    @mousedown="elementMouseDown"
-    @touchstart="elementTouchDown"
-  >
-    <div
-      v-for="handle in actualHandles"
-      :key="handle"
-      :class="[classNameHandle, classNameHandle + '-' + handle]"
-      :style="handleStyle(handle)"
-      @mousedown.stop.prevent="handleDown(handle, $event)"
-      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
-    >
-      <slot :name="handle"></slot>
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { matchesSelectorToParentElements, getComputedSize, addEvent, removeEvent } from './dom';
-import { computeWidth, computeHeight, restrictToBounds, snapToGrid } from './fns';
-
-const events = {
-  mouse: {
-    start: 'mousedown',
-    move: 'mousemove',
-    stop: 'mouseup'
-  },
-  touch: {
-    start: 'touchstart',
-    move: 'touchmove',
-    stop: 'touchend'
-  }
-};
-
-// 禁止用户选取
-const userSelectNone = {
-  userSelect: 'none',
-  MozUserSelect: 'none',
-  WebkitUserSelect: 'none',
-  MsUserSelect: 'none'
-};
-// 用户选中自动
-const userSelectAuto = {
-  userSelect: 'auto',
-  MozUserSelect: 'auto',
-  WebkitUserSelect: 'auto',
-  MsUserSelect: 'auto'
-};
-
-let eventsFor = events.mouse;
-
-export default {
-  replace: true,
-  name: 'vue-draggable-resizable',
-  props: {
-    className: {
-      type: String,
-      default: 'vdr'
-    },
-    classNameDraggable: {
-      type: String,
-      default: 'draggable'
-    },
-    classNameResizable: {
-      type: String,
-      default: 'resizable'
-    },
-    classNameDragging: {
-      type: String,
-      default: 'dragging'
-    },
-    classNameResizing: {
-      type: String,
-      default: 'resizing'
-    },
-    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
-    },
-    // 锁定宽高比
-    lockAspectRatio: {
-      type: Boolean,
-      default: false
-    },
-    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: Number,
-      default: 0
-    },
-    y: {
-      type: Number,
-      default: 0
-    },
-    z: {
-      type: [String, Number],
-      default: 'auto',
-      validator: val => (typeof val === 'string' ? val === 'auto' : val >= 0)
-    },
-    handles: {
-      type: Array,
-      default: () => ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
-      validator: val => {
-        const s = new Set(['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']);
-        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
-    },
-    // 冲突检测
-    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
-        };
-      }
-    }
-  },
-
-  data: function () {
-    return {
-      left: this.x,
-      top: this.y,
-      right: null,
-      bottom: null,
-
-      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,
-      zIndex: this.z
-    };
-  },
-
-  created: function () {
-    if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth');
-    if (this.maxWidth && this.minHeight > this.maxHeight) console.warn('[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight');
-
-    this.resetBoundsAndMouseState();
-  },
-  mounted: function () {
-    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);
-    this.width = this.w !== 'auto' ? this.w : 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;
-
-    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);
-        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) {
-      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.w = this.width;
-        this.mouseClickPosition.h = this.height;
-
-        if (this.parent) {
-          this.bounds = this.calcDragLimits();
-        }
-
-        addEvent(document.documentElement, eventsFor.move, this.move);
-        addEvent(document.documentElement, eventsFor.stop, this.handleUp);
-      }
-    },
-    // 计算移动范围
-    calcDragLimits() {
-      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;
-      }
-
-      if (this.onResizeStart(handle, e) === false) {
-        return;
-      }
-
-      if (e.stopPropagation) e.stopPropagation();
-
-      if (this.lockAspectRatio && !handle.includes('m')) {
-        this.handle = 'm' + handle.substring(1);
-      } else {
-        this.handle = handle;
-      }
-      this.resizing = 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.w = this.width;
-      this.mouseClickPosition.h = this.height;
-
-      this.bounds = this.calcResizeLimits();
-
-      addEvent(document.documentElement, eventsFor.move, this.move);
-      addEvent(document.documentElement, eventsFor.stop, this.handleUp);
-    },
-    // 计算调整大小范围
-    calcResizeLimits() {
-      let minW = this.minW;
-      let minH = this.minH;
-      let maxW = this.maxW;
-      let maxH = this.maxH;
-
-      const aspectFactor = this.aspectFactor;
-      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;
-
-      if (this.lockAspectRatio) {
-        if (minW / minH > aspectFactor) {
-          minH = minW / aspectFactor;
-        } else {
-          minW = aspectFactor * minH;
-        }
-
-        if (maxW && maxH) {
-          maxW = Math.min(maxW, aspectFactor * maxH);
-          maxH = Math.min(maxH, maxW / aspectFactor);
-        } else if (maxW) {
-          maxH = maxW / aspectFactor;
-        } else if (maxH) {
-          maxW = aspectFactor * maxH;
-        }
-      }
-
-      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 % gridX;
-        limits.maxLeft = left + Math.floor((width - minW) / gridX) * gridX;
-        limits.minTop = top % gridY;
-        limits.maxTop = top + Math.floor((height - minH) / gridY) * gridY;
-        limits.minRight = right % gridX;
-        limits.maxRight = right + Math.floor((width - minW) / gridX) * gridX;
-        limits.minBottom = bottom % gridY;
-        limits.maxBottom = bottom + Math.floor((height - minH) / gridY) * 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);
-        }
-
-        if (this.lockAspectRatio) {
-          limits.minLeft = Math.max(limits.minLeft, left - top * aspectFactor);
-          limits.minTop = Math.max(limits.minTop, top - left / aspectFactor);
-          limits.minRight = Math.max(limits.minRight, right - bottom * aspectFactor);
-          limits.minBottom = Math.max(limits.minBottom, bottom - right / aspectFactor);
-        }
-      } else {
-        limits.minLeft = null;
-        limits.maxLeft = left + Math.floor((width - minW) / gridX) * gridX;
-        limits.minTop = null;
-        limits.maxTop = top + Math.floor((height - minH) / gridY) * gridY;
-        limits.minRight = null;
-        limits.maxRight = right + Math.floor((width - minW) / gridX) * gridX;
-        limits.minBottom = null;
-        limits.maxBottom = bottom + Math.floor((height - minH) / gridY) * gridY;
-
-        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);
-      }
-    },
-    // 元素移动
-    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);
-    },
-    moveHorizontally(val) {
-      const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale); // eslint-disable-line no-unused-vars
-      const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft);
-      this.left = left;
-      this.right = this.parentWidth - this.width - left;
-    },
-    moveVertically(val) {
-      const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale); // eslint-disable-line no-unused-vars
-      const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop);
-      this.top = top;
-      this.bottom = this.parentHeight - this.height - top;
-    },
-    // 控制柄移动
-    handleResize(e) {
-      let left = this.left;
-      let top = this.top;
-      let right = this.right;
-      let bottom = this.bottom;
-
-      const mouseClickPosition = this.mouseClickPosition;
-      const aspectFactor = this.aspectFactor;
-
-      const tmpDeltaX = mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX);
-      const tmpDeltaY = mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY);
-
-      if (!this.widthTouched && tmpDeltaX) {
-        this.widthTouched = true;
-      }
-      if (!this.heightTouched && tmpDeltaY) {
-        this.heightTouched = true;
-      }
-
-      const [deltaX, deltaY] = snapToGrid(this.grid, tmpDeltaX, tmpDeltaY, this.scaleRatio);
-
-      if (this.handle.includes('b')) {
-        bottom = restrictToBounds(mouseClickPosition.bottom + deltaY, this.bounds.minBottom, this.bounds.maxBottom);
-        if (this.lockAspectRatio && this.resizingOnY) {
-          right = this.right - (this.bottom - bottom) * aspectFactor;
-        }
-      } else if (this.handle.includes('t')) {
-        top = restrictToBounds(mouseClickPosition.top - deltaY, this.bounds.minTop, this.bounds.maxTop);
-        if (this.lockAspectRatio && this.resizingOnY) {
-          left = this.left - (this.top - top) * aspectFactor;
-        }
-      }
-
-      if (this.handle.includes('r')) {
-        right = restrictToBounds(mouseClickPosition.right + deltaX, this.bounds.minRight, this.bounds.maxRight);
-        if (this.lockAspectRatio && this.resizingOnX) {
-          bottom = this.bottom - (this.right - right) / aspectFactor;
-        }
-      } else if (this.handle.includes('l')) {
-        left = restrictToBounds(mouseClickPosition.left - deltaX, this.bounds.minLeft, this.bounds.maxLeft);
-        if (this.lockAspectRatio && this.resizingOnX) {
-          top = this.top - (this.left - left) / aspectFactor;
-        }
-      }
-
-      const width = computeWidth(this.parentWidth, left, right);
-      const height = computeHeight(this.parentHeight, top, bottom);
-      if (this.onResize(this.handle, left, top, width, height) === false) {
-        return;
-      }
-      this.left = left;
-      this.top = top;
-      this.right = right;
-      this.bottom = bottom;
-      this.width = width;
-      this.height = height;
-      this.snapCheck(false)
-      this.$emit('resizing', this.left, this.top, this.width, this.height);
-    },
-    changeWidth(val) {
-      const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale); // eslint-disable-line no-unused-vars
-      const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, 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;
-      this.height = height;
-    },
-    changeHeight(val) {
-      const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale); // eslint-disable-line no-unused-vars
-
-      const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, 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;
-      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));
-      }
-
-      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);
-      }
-      this.resetBoundsAndMouseState();
-      removeEvent(document.documentElement, eventsFor.move, this.move);
-    },
-    // 新增方法 ↓↓↓
-    // 设置属性
-    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.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.right = this.mouseClickPosition.right;
-              this.bottom = this.mouseClickPosition.bottom;
-              this.width = this.mouseClickPosition.w;
-              this.height = this.mouseClickPosition.h;
-            }
-          }
-        }
-      }
-    },
-    // 检测对齐元素
-    async snapCheck(flag = true) {
-      let width = this.width;
-      let height = this.height;
-      if (this.snap) {
-        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 (
-            item.className !== undefined &&
-            !item.className.includes(this.classNameActive) &&
-            item.getAttribute('data-is-snap') !== null &&
-            item.getAttribute('data-is-snap') !== 'false'
-          ) {
-            const w = item.offsetWidth;
-            const h = item.offsetHeight;
-            const [l, t] = this.formatTransformVal(item.style.transform);
-            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) {
-                if (flag) {
-                  this.top = t - height
-                  this.bottom = this.parentHeight - this.top - height
-                }
-                tem.value.y[0].push(l, r, activeLeft, activeRight);
-              }
-              if (bs) {
-                if (flag) {
-                  this.top = t
-                  this.bottom = this.parentHeight - this.top - height
-                }
-                tem.value.y[0].push(l, r, activeLeft, activeRight);
-              }
-
-              if (TS) {
-                if (flag) {
-                  this.top = b - height
-                  this.bottom = this.parentHeight - this.top - height
-                }
-                tem.value.y[1].push(l, r, activeLeft, activeRight);
-              }
-              if (BS) {
-                if (flag) {
-                  this.top = b
-                  this.bottom = this.parentHeight - this.top - height
-                }
-
-                tem.value.y[1].push(l, r, activeLeft, activeRight);
-              }
-
-              if (ls) {
-                if (flag) {
-                  this.left = l - width
-                  this.right = this.parentWidth - this.left - width
-                }
-
-                tem.value.x[0].push(t, b, activeTop, activeBottom);
-              }
-              if (rs) {
-                if (flag) {
-                  this.left = l
-                  this.right = this.parentWidth - this.left - width
-                }
-
-                tem.value.x[0].push(t, b, activeTop, activeBottom);
-              }
-              if (LS) {
-                if (flag) {
-                  this.left = r - width
-                  this.right = this.parentWidth - this.left - width
-                }
-
-                tem.value.x[1].push(t, b, activeTop, activeBottom);
-              }
-              if (RS) {
-                if (flag) {
-                  this.left = r
-                  this.right = this.parentWidth - this.left - width
-                }
-
-                tem.value.x[1].push(t, b, activeTop, activeBottom);
-              }
-              if (hc) {
-                if (flag) {
-                  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) {
-                if (flag) {
-                  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
-                }
-              }
-            }
-            // 再次进行边界处理
-            let 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) {
-        if (item.className !== undefined && item.className.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] = string.match(/[\d|\.]+/g);
-      if (top === undefined) top = 0;
-      return [Number(left), Number(top), rotate];
-    }
-  },
-  computed: {
-    handleStyle() {
-      return stick => {
-        if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : '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`
-          }
-        };
-        const stickStyle = {
-          width: `${size}px`,
-          height: `${size}px`,
-          top: styleMap[stick].top,
-          left: styleMap[stick].left,
-          right: styleMap[stick].right,
-          bottom: styleMap[stick].bottom
-        };
-        stickStyle.display = this.enabled ? 'block' : 'none';
-        return stickStyle;
-      };
-    },
-    style() {
-      return {
-        transform: `translate(${this.left}px, ${this.top}px)`,
-        width: this.computedWidth,
-        height: this.computedHeight,
-        zIndex: this.zIndex,
-        ...(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';
-    },
-    resizingOnX() {
-      return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'));
-    },
-    resizingOnY() {
-      return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'));
-    },
-    isCornerHandle() {
-      return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle);
-    }
-  },
-
-  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);
-    },
-    lockAspectRatio(val) {
-      if (val) {
-        this.aspectFactor = this.width / this.height;
-      } else {
-        this.aspectFactor = undefined;
-      }
-    },
-    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();
-      }
-
-      this.changeWidth(val);
-    },
-    h(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcResizeLimits();
-      }
-
-      this.changeHeight(val);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.vdr {
-  touch-action: none;
-  position: absolute;
-  box-sizing: border-box;
-}
-.handle {
-  box-sizing: border-box;
-  position: absolute;
-  background: #ffffff;
-  border: 1px solid #333;
-}
-.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;
-}
-</style>
diff --git a/frontend/src/views/panel/DrawingBoard/index.vue b/frontend/src/views/panel/DrawingBoard/index.vue
deleted file mode 100644
index cfdd29507e..0000000000
--- a/frontend/src/views/panel/DrawingBoard/index.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<template>
-  <el-row class="panel-design-show">
-    <div class="container" :style="panelDetails.gridStyle">
-      <vue-drag-resize-rotate
-        v-for="item in panelDetails.panelDesigns"
-        v-show="item.keepFlag"
-        :key="item.id"
-        :disabled="status"
-        :panel-design="item"
-        :parent="true"
-        @newStyle="newStyle"
-      >
-        <!--视图显示 panelDesign.componentType==='view'-->
-        <chart-component v-if="item.componentType==='view'" :ref="item.id" :chart-id="item.id" :chart="item.chartView" />
-
-        <!--组件显示（待开发）-->
-
-      </vue-drag-resize-rotate>
-    </div>
-
-  </el-row>
-</template>
-<script>
-import { post, get } from '@/api/panel/panel'
-import ChartComponent from '@/views/chart/components/ChartComponent'
-import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
-import { uuid } from 'vue-uuid'
-import bus from '@/utils/bus'
-export default {
-  name: 'DrawingBoard',
-  components: { ChartComponent, VueDragResizeRotate },
-  props: {
-    status: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      panelDetails: {
-        viewsUsable: [],
-        panelDesigns: [],
-        gridStyle: null
-      },
-      gridStyleDefault: {
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-        backgroundColor: '#f2f2f2',
-        // background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
-        backgroundSize: '20px 20px, 20px 20px'
-      },
-      ViewActiveName: 'Views'
-    }
-  },
-  computed: {
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    }
-  },
-  watch: {
-    panelInfo(newVal, oldVal) {
-      this.panelDesign(newVal.id)
-    }
-  },
-
-  mounted() {
-    const panelId = this.$store.state.panel.panelInfo.id
-    if (panelId) {
-      this.panelDesign(panelId)
-    }
-
-    bus.$on('panel-drawing-load', (panelId) => {
-      panelId && this.panelDesign(panelId)
-    })
-    bus.$on('panel-view-add', (view) => {
-      view && this.panelViewAdd(view)
-    })
-    bus.$on('panel-drawing-save', () => {
-      this.savePanel()
-    })
-    bus.$on('panel-drawing-preview', () => {
-      this.preViewShow()
-    })
-  },
-
-  methods: {
-    // 加载公共组件
-
-    // 加载panel design
-    panelDesign(panelId) {
-      get('panel/group/findOne/' + panelId).then(res => {
-        const panelDetailsInfo = res.data
-        if (panelDetailsInfo) {
-          this.panelDetails = panelDetailsInfo
-        }
-        if (!panelDetailsInfo.gridStyle) {
-          this.panelDetails.gridStyle = this.gridStyleDefault
-        }
-      })
-    },
-    panelViewAdd(view) {
-      const panelDesigns = this.panelDetails.panelDesigns
-      this.panelDetails.viewsUsable.forEach(function(item, index) {
-        if (item.id === view.id) {
-          const newComponent = {
-            id: uuid.v1(),
-            keepFlag: true,
-            chartView: item,
-            componentType: 'view',
-            styleInit: false
-          }
-          panelDesigns.push(newComponent)
-        }
-      })
-    },
-
-    newStyle(viewId, newStyleInfo) {
-      this.$nextTick(() => {
-        this.$refs[viewId][0].chartResize()
-      })
-      this.panelInfo.preStyle = JSON.stringify(newStyleInfo)
-    },
-
-    // 左边往右边拖动时的事件
-    start1(e) {
-      console.log(e)
-    },
-    end1(e) {
-      console.log(e)
-    },
-    // 右边往左边拖动时的事件
-    start2(e) {
-      console.log(e)
-    },
-    end2(e) {
-      console.log(e)
-    },
-    // move回调方法
-    onMove(e, originalEvent) {
-      console.log(e)
-      return true
-    },
-    preViewShow() {
-      this.$router.replace('/preview')
-    },
-    savePanel() {
-      post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
-      })
-      this.$success(this.$t('commons.save_success'))
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .view-list {
-    height: 100%;
-    width: 20%;
-    min-width: 180px;
-    max-width: 220px;
-    border: 1px solid #E6E6E6;
-    border-left: 0 solid;
-    overflow-y: auto;
-  }
-
-  .view-list-thumbnails-outline {
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  .view-list-thumbnails {
-    width: 100%;
-    padding: 0px 15px 15px 0px;
-  }
-
-  .panel-design {
-    height: 100%;
-    min-width: 500px;
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .panel-design-head {
-    height: 40px;
-  }
-
-  .panel-design-show {
-    height: 100%;
-    width: 100%;
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .padding-lr {
-    padding: 0 6px;
-  }
-
-  .itxst {
-    margin: 10px;
-    text-align: left;
-  }
-
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
-
-  .col + .col {
-    margin-left: 10px;
-  }
-
-  .item {
-    padding: 2px 12px;
-    margin: 3px 3px 0 3px;
-    border: solid 1px #eee;
-    background-color: #f1f1f1;
-    text-align: left;
-    display: block;
-  }
-
-  .item + .item {
-    border-top: none;
-    margin-top: 3px;
-  }
-
-  .item:hover {
-    background-color: #fdfdfd;
-    cursor: pointer;
-  }
-
-  .item-axis {
-    padding: 2px 12px;
-    margin: 3px 3px 0 3px;
-    border: solid 1px #eee;
-    background-color: #f1f1f1;
-    text-align: left;
-  }
-
-  .item-axis:hover {
-    background-color: #fdfdfd;
-    cursor: pointer;
-  }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  .container {
-    width: 100%;
-    height: 600px;
-    border: 1px solid #000;
-    position: relative;
-    box-sizing: border-box;
-  }
-
-  span {
-    font-size: 12px;
-  }
-</style>
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 67ddddfee1..56fa1c6e92 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -33,13 +33,12 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 // import Group from './group/Group'
 import PanelList from './list/PanelList'
-import PanelView from './list/PanelView'
 import PanelViewShow from './list/PanelViewShow'
 import ShareTree from './GrantAuth/shareTree'
 
 export default {
   name: 'Panel',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelView, PanelViewShow, ShareTree },
+  components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelViewShow, ShareTree },
   data() {
     return {
       component: PanelViewShow,
diff --git a/frontend/src/views/panel/list/PanelView.vue b/frontend/src/views/panel/list/PanelView.vue
deleted file mode 100644
index f2ff68f4d1..0000000000
--- a/frontend/src/views/panel/list/PanelView.vue
+++ /dev/null
@@ -1,393 +0,0 @@
-<template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
-    <span>仪表盘名称：{{ panelName }}</span>
-  </el-row>
-</template>
-
-<script>
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
-
-export default {
-  name: 'PanelView',
-  data() {
-    return {
-      sceneMode: false,
-      dialogTitle: '',
-      search: '',
-      editGroup: false,
-      editTable: false,
-      tData: [],
-      tableData: [],
-      currGroup: {},
-      expandedArray: [],
-      groupForm: {
-        name: '',
-        pid: null,
-        level: 0,
-        type: '',
-        children: [],
-        sort: 'type desc,name asc'
-      },
-      tableForm: {
-        name: '',
-        mode: '',
-        sort: 'type asc,create_time desc,name asc'
-      },
-      groupFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ]
-      },
-      tableFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ],
-        mode: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  computed: {
-    panelName: function() {
-      console.log(this.$store.state.panel.panelName)
-      return this.$store.state.panel.panelName
-    }
-  },
-  watch: {
-    // search(val){
-    //   this.groupForm.name = val;
-    //   this.tree(this.groupForm);
-    // }
-  },
-  mounted() {
-    this.tree(this.groupForm)
-    this.refresh()
-    this.tableTree()
-    // this.$router.push('/dataset');
-  },
-  methods: {
-    clickAdd(param) {
-      // console.log(param);
-      this.add(param.type)
-      this.groupForm.pid = param.data.id
-      this.groupForm.level = param.data.level + 1
-    },
-
-    beforeClickAdd(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    clickMore(param) {
-      console.log(param)
-      switch (param.type) {
-        case 'rename':
-          this.add(param.data.type)
-          this.groupForm = JSON.parse(JSON.stringify(param.data))
-          break
-        case 'move':
-
-          break
-        case 'delete':
-          this.delete(param.data)
-          break
-        case 'editTable':
-          this.editTable = true
-          this.tableForm = JSON.parse(JSON.stringify(param.data))
-          this.tableForm.mode = this.tableForm.mode + ''
-          break
-        case 'deleteTable':
-          this.deleteTable(param.data)
-          break
-      }
-    },
-
-    beforeClickMore(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    add(type) {
-      switch (type) {
-        case 'group':
-          this.dialogTitle = this.$t('dataset.group')
-          break
-        case 'scene':
-          this.dialogTitle = this.$t('dataset.scene')
-          break
-      }
-      this.groupForm.type = type
-      this.editGroup = true
-    },
-
-    saveGroup(group) {
-      // console.log(group);
-      this.$refs['groupForm'].validate((valid) => {
-        if (valid) {
-          addGroup(group).then(res => {
-            this.close()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.tree(this.groupForm)
-          })
-        } else {
-          this.$message({
-            message: this.$t('commons.input_content'),
-            type: 'error',
-            showClose: true
-          })
-          return false
-        }
-      })
-    },
-
-    saveTable(table) {
-      //   console.log(table)
-      table.mode = parseInt(table.mode)
-      this.$refs['tableForm'].validate((valid) => {
-        if (valid) {
-          addTable(table).then(response => {
-            this.closeTable()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.tableTree()
-            // this.$router.push('/dataset/home')
-            this.$emit('switchComponent', { name: '' })
-            this.$store.dispatch('dataset/setTable', null)
-          })
-        } else {
-          this.$message({
-            message: this.$t('commons.input_content'),
-            type: 'error',
-            showClose: true
-          })
-          return false
-        }
-      })
-    },
-
-    delete(data) {
-      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-        confirmButtonText: this.$t('dataset.confirm'),
-        cancelButtonText: this.$t('dataset.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delGroup(data.id).then(response => {
-          this.$message({
-            type: 'success',
-            message: this.$t('dataset.delete_success'),
-            showClose: true
-          })
-          this.tree(this.groupForm)
-        })
-      }).catch(() => {
-      })
-    },
-
-    deleteTable(data) {
-      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-        confirmButtonText: this.$t('dataset.confirm'),
-        cancelButtonText: this.$t('dataset.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delTable(data.id).then(response => {
-          this.$message({
-            type: 'success',
-            message: this.$t('dataset.delete_success'),
-            showClose: true
-          })
-          this.tableTree()
-          // this.$router.push('/dataset/home')
-          this.$emit('switchComponent', { name: '' })
-          this.$store.dispatch('dataset/setTable', null)
-        })
-      }).catch(() => {
-      })
-    },
-
-    close() {
-      this.editGroup = false
-      this.groupForm = {
-        name: '',
-        pid: null,
-        level: 0,
-        type: '',
-        children: [],
-        sort: 'type desc,name asc'
-      }
-    },
-
-    closeTable() {
-      this.editTable = false
-      this.tableForm = {
-        name: ''
-      }
-    },
-
-    tree(group) {
-      groupTree(group).then(res => {
-        this.tData = res.data
-      })
-    },
-
-    tableTree() {
-      this.tableData = []
-      if (this.currGroup.id) {
-        loadTable({
-          sort: 'type asc,create_time desc,name asc',
-          sceneId: this.currGroup.id
-        }).then(res => {
-          this.tableData = res.data
-        })
-      }
-    },
-
-    nodeClick(data, node) {
-      // console.log(data);
-      // console.log(node);
-      if (data.type === 'scene') {
-        this.sceneMode = true
-        this.currGroup = data
-        this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
-      }
-      if (node.expanded) {
-        this.expandedArray.push(data.id)
-      } else {
-        const index = this.expandedArray.indexOf(data.id)
-        if (index > -1) {
-          this.expandedArray.splice(index, 1)
-        }
-      }
-      // console.log(this.expandedArray);
-    },
-
-    back() {
-      this.sceneMode = false
-      //   const route = this.$store.state.permission.currentRoutes
-      //   console.log(route)
-      // this.$router.push('/dataset/index')
-      this.$store.dispatch('dataset/setSceneData', null)
-      this.$emit('switchComponent', { name: '' })
-    },
-    clickAddData(param) {
-      // console.log(param);
-      switch (param.type) {
-        case 'db':
-          this.addDB()
-          break
-        case 'sql':
-          this.$message(param.type)
-          break
-        case 'excel':
-          this.$message(param.type)
-          break
-        case 'custom':
-          this.$message(param.type)
-          break
-      }
-    },
-
-    beforeClickAddData(type) {
-      return {
-        'type': type
-      }
-    },
-
-    addDB() {
-      // this.$router.push({
-      //   name: 'add_db',
-      //   params: {
-      //     scene: this.currGroup
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
-    },
-    sceneClick(data, node) {
-      // console.log(data);
-      this.$store.dispatch('dataset/setTable', null)
-      this.$store.dispatch('dataset/setTable', data.id)
-      // this.$router.push({
-      //   name: 'table',
-      //   params: {
-      //     table: data
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'ViewTable' })
-    },
-    refresh() {
-      const path = this.$route.path
-      if (path === '/dataset/table') {
-        this.sceneMode = true
-        const sceneId = this.$store.state.dataset.sceneData
-        getScene(sceneId).then(res => {
-          this.currGroup = res.data
-        })
-      }
-    },
-    panelDefaultClick(data, node) {
-      // console.log(data);
-      // console.log(node);
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .header-title {
-    font-size: 14px;
-    flex: 1;
-    color: #606266;
-    font-weight: bold;
-
-  }
-
-  .el-divider--horizontal {
-    margin: 12px 0
-  }
-
-  .search-input {
-    padding: 12px 0;
-  }
-
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-  }
-
-  .custom-position {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    flex-flow: row nowrap;
-  }
-
-  .form-item {
-    margin-bottom: 0;
-  }
-
-  .title-css {
-    height: 26px;
-  }
-
-  .title-text {
-    line-height: 26px;
-  }
-</style>
diff --git a/frontend/src/views/panel/preview/index.vue b/frontend/src/views/panel/preview/index.vue
index f0b033395f..611d92ccf3 100644
--- a/frontend/src/views/panel/preview/index.vue
+++ b/frontend/src/views/panel/preview/index.vue
@@ -20,7 +20,7 @@
     <de-container>
 
       <de-main-container class="ms-main-container">
-        <drawing-board :disabled="true" />
+<!--        <drawing-board :disabled="true" />-->
       </de-main-container>
     </de-container>
   </el-container>
@@ -29,13 +29,11 @@
 <script>
 import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
-import DrawingBoard from '../DrawingBoard'
+// import DrawingBoard from '../DrawingBoard'
 export default {
   components: {
     DeMainContainer,
-    DeContainer,
-    DrawingBoard
-
+    DeContainer
   },
   data() {
     return {