From 8b80d8fa72401df539656dfe097407e8bdf8c641 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 12 Mar 2021 16:08:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=E8=AE=BE=E8=AE=A1=E7=BB=84=E4=BB=B6=E5=8F=8A=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auth/service/impl/ShiroServiceImpl.java   |    1 +
 .../controller/CommonFilesController.java     |   22 +
 .../panel/PanelGroupController.java           |    2 +
 .../dataease/service/CommonFilesService.java  |   33 +
 .../src/main/resources/application.properties |    4 +
 frontend/package.json                         |    4 +-
 .../components/vue-drag-resize-rotate/dom.js  |   60 +
 .../components/vue-drag-resize-rotate/fns.js  |   40 +
 .../vue-drag-resize-rotate/index.vue          | 1506 +++++++++++++++++
 .../src/components/vue-drag-resize/dom.js     |   60 +
 .../src/components/vue-drag-resize/fns.js     |   40 +
 .../src/components/vue-drag-resize/index.vue  | 1277 ++++++++++++++
 frontend/src/lang/zh.js                       |    4 +-
 frontend/src/main.js                          |    3 +
 frontend/src/styles/vdrr/common.scss          |  123 ++
 frontend/src/styles/vdrr/customize.scss       |  147 ++
 frontend/src/styles/vdrr/highlight.scss       |   50 +
 frontend/src/styles/vdrr/markdown.scss        |  247 +++
 frontend/src/views/panel/chart/chart.js       |   20 +
 frontend/src/views/panel/index.vue            |    9 +-
 frontend/src/views/panel/list/PanelView.vue   |    5 +-
 .../src/views/panel/list/PanelViewShow.vue    |  364 ++++
 frontend/vue.config.js                        |    6 +
 23 files changed, 4016 insertions(+), 11 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/controller/CommonFilesController.java
 create mode 100644 backend/src/main/java/io/dataease/service/CommonFilesService.java
 create mode 100644 frontend/src/components/vue-drag-resize-rotate/dom.js
 create mode 100644 frontend/src/components/vue-drag-resize-rotate/fns.js
 create mode 100644 frontend/src/components/vue-drag-resize-rotate/index.vue
 create mode 100644 frontend/src/components/vue-drag-resize/dom.js
 create mode 100644 frontend/src/components/vue-drag-resize/fns.js
 create mode 100644 frontend/src/components/vue-drag-resize/index.vue
 create mode 100644 frontend/src/styles/vdrr/common.scss
 create mode 100644 frontend/src/styles/vdrr/customize.scss
 create mode 100644 frontend/src/styles/vdrr/highlight.scss
 create mode 100644 frontend/src/styles/vdrr/markdown.scss
 create mode 100644 frontend/src/views/panel/chart/chart.js
 create mode 100644 frontend/src/views/panel/list/PanelViewShow.vue

diff --git a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
index 83cb7d8c34..f8ffd69827 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
@@ -29,6 +29,7 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/v2/**","anon");
         filterChainDefinitionMap.put("/v3/**","anon");
         filterChainDefinitionMap.put("/static/**", "anon");
+        filterChainDefinitionMap.put("/common-files/**", "anon");
 
 
         // filterChainDefinitionMap.put("/401", "anon");
diff --git a/backend/src/main/java/io/dataease/controller/CommonFilesController.java b/backend/src/main/java/io/dataease/controller/CommonFilesController.java
new file mode 100644
index 0000000000..11589cc5c3
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/CommonFilesController.java
@@ -0,0 +1,22 @@
+package io.dataease.controller;
+
+import io.dataease.service.CommonFilesService;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import javax.annotation.Resource;
+
+@RestController
+@RequestMapping("common-files")
+public class CommonFilesController {
+    @Resource
+    private CommonFilesService commonFilesService;
+
+    @GetMapping("/images/{imageId}")
+    public ResponseEntity<byte[]> image(@PathVariable("imageId") String imageId) {
+        return commonFilesService.getImageById(imageId);
+    }
+}
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
index e3631bdfa0..2d9e61cabc 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -5,7 +5,9 @@ import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.controller.request.panel.PanelGroupRequest;
 import io.dataease.dto.dataset.DataSetGroupDTO;
 import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.service.CommonFilesService;
 import io.dataease.service.panel.PanelGroupService;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
diff --git a/backend/src/main/java/io/dataease/service/CommonFilesService.java b/backend/src/main/java/io/dataease/service/CommonFilesService.java
new file mode 100644
index 0000000000..9b8235c7a1
--- /dev/null
+++ b/backend/src/main/java/io/dataease/service/CommonFilesService.java
@@ -0,0 +1,33 @@
+package io.dataease.service;
+
+import io.dataease.base.domain.FileMetadata;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+
+@Service
+public class CommonFilesService {
+
+    @Resource
+    private FileService fileService;
+
+
+    public ResponseEntity<byte[]> getImageById(String imageId) {
+        byte[] bytes = null;
+        MediaType contentType = MediaType.parseMediaType("application/octet-stream");
+        FileMetadata fileMetadata = fileService.copyFile(imageId);
+        if (fileMetadata == null) {
+            return null;
+        }
+
+        bytes = fileService.loadFileAsBytes(imageId);
+        return ResponseEntity.ok()
+                .contentType(contentType)
+                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileMetadata.getName() + "\"")
+                .body(bytes);
+    }
+
+}
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index df77d81e6d..82cdf1f357 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -54,6 +54,10 @@ management.endpoints.web.exposure.include=*
 rsa.private_key=MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9pB6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZUBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3tTbklZkD2A==
 spring.cache.type=ehcache
 spring.cache.ehcache.config=classpath:/ehcache/ehcache.xml
+#打印URL路径
+logging.level.org.springframework.web=trace
+logging.level.org.springframework.boot.web=trace
+spring.mvc.log-request-details=true
 
 
 
diff --git a/frontend/package.json b/frontend/package.json
index 3a046154dc..5dd552a5d0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
-    "axios": "0.18.1",
+    "axios": "^0.21.1",
     "echarts": "^5.0.2",
     "element-ui": "2.13.0",
     "fit2cloud-ui": "^0.1.12",
@@ -45,6 +45,8 @@
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
+    "less": "^4.1.1",
+    "less-loader": "^8.0.0",
     "mockjs": "1.0.1-beta3",
     "runjs": "^4.3.2",
     "sass": "^1.32.5",
diff --git a/frontend/src/components/vue-drag-resize-rotate/dom.js b/frontend/src/components/vue-drag-resize-rotate/dom.js
new file mode 100644
index 0000000000..9e36dba6ea
--- /dev/null
+++ b/frontend/src/components/vue-drag-resize-rotate/dom.js
@@ -0,0 +1,60 @@
+import { isFunction } from './fns'
+
+// 将选择器与父元素匹配
+export function matchesSelectorToParentElements (el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function getComputedSize ($el) {
+  const style = window.getComputedStyle($el)
+
+  return [
+    parseFloat(style.getPropertyValue('width'), 10),
+    parseFloat(style.getPropertyValue('height'), 10)
+  ]
+}
+// 添加事件
+export function addEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+// 删除事件
+export function removeEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}
diff --git a/frontend/src/components/vue-drag-resize-rotate/fns.js b/frontend/src/components/vue-drag-resize-rotate/fns.js
new file mode 100644
index 0000000000..004f1682e1
--- /dev/null
+++ b/frontend/src/components/vue-drag-resize-rotate/fns.js
@@ -0,0 +1,40 @@
+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
new file mode 100644
index 0000000000..032c17fee9
--- /dev/null
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -0,0 +1,1506 @@
+<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="(handle,index) in actualHandles"
+      :key="index"
+      :class="[classNameHandle, classNameHandle + '-' + handle]"
+      :style="handleStyle(handle,index)"
+      @mousedown.stop.prevent="handleDown(handle, $event)"
+      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+    >
+      <slot :name="handle"></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-drag-resize-rotate',
+  props: {
+    className: {
+      type: String,
+      default: 'vdr'
+    },
+    classNameDraggable: {
+      type: String,
+      default: 'draggable'
+    },
+    classNameResizable: {
+      type: String,
+      default: 'resizable'
+    },
+    // 新增开启旋转时的自定义类名
+    classNameRotatable: {
+      type: String,
+      default: 'rotatable'
+    },
+    classNameDragging: {
+      type: String,
+      default: 'dragging'
+    },
+    classNameResizing: {
+      type: String,
+      default: 'resizing'
+    },
+    // 新增组件处于旋转时的自定义类名
+    classNameRotating: {
+      type: String,
+      default: 'rotating'
+    },
+
+    classNameActive: {
+      type: String,
+      default: 'active'
+    },
+    classNameHandle: {
+      type: String,
+      default: 'handle'
+    },
+    disableUserSelect: {
+      type: Boolean,
+      default: true
+    },
+    enableNativeDrag: {
+      type: Boolean,
+      default: false
+    },
+    preventDeactivation: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    // 新增 旋转 默认为false 不开启
+    rotatable: {
+      type: Boolean,
+      default: false
+    },
+    // 锁定宽高比
+    lockAspectRatio: {
+      type: Boolean,
+      default: false
+    },
+    // 新增 外部传入纵横比 w/h 
+    outsideAspectRatio: {
+      type: [Number, String],
+      default: 0
+    },
+    w: {
+      type: [Number, String],
+      default: 200,
+      validator: val => {
+        if (typeof val === 'number') {
+          return val > 0;
+        }
+        return val === 'auto';
+      }
+    },
+    h: {
+      type: [Number, String],
+      default: 200,
+      validator: val => {
+        if (typeof val === 'number') {
+          return val > 0;
+        }
+        return val === 'auto';
+      }
+    },
+    minWidth: {
+      type: Number,
+      default: 0,
+      validator: val => val >= 0
+    },
+    minHeight: {
+      type: Number,
+      default: 0,
+      validator: val => val >= 0
+    },
+    maxWidth: {
+      type: Number,
+      default: null,
+      validator: val => val >= 0
+    },
+    maxHeight: {
+      type: Number,
+      default: null,
+      validator: val => val >= 0
+    },
+    x: {
+      type: [String, Number],
+      default: 0
+    },
+    y: {
+      type: [String, Number],
+      default: 0
+    },
+    z: {
+      type: [String, Number],
+      default: 'auto',
+      validator: val => (typeof val === 'string' ? val === 'auto' : val >= 0)
+    },
+    // 新增 初始旋转角度
+    r: {
+      type: [String, Number],
+      default: 0
+    },
+    // 新增 旋转手柄 rot
+    handles: {
+      type: Array,
+      default: () => ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'rot'],
+      validator: val => {
+        const s = new Set(['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'rot'])
+        return new Set(val.filter(h => s.has(h))).size === val.length
+      }
+    },
+    dragHandle: {
+      type: String,
+      default: null
+    },
+    dragCancel: {
+      type: String,
+      default: null
+    },
+    axis: {
+      type: String,
+      default: 'both',
+      validator: val => ['x', 'y', 'both'].includes(val)
+    },
+    grid: {
+      type: Array,
+      default: () => [1, 1]
+    },
+    parent: {
+      type: [Boolean, String],
+      default: false
+    },
+    onDragStart: {
+      type: Function,
+      default: () => true
+    },
+    onDrag: {
+      type: Function,
+      default: () => true
+    },
+    onResizeStart: {
+      type: Function,
+      default: () => true
+    },
+    onResize: {
+      type: Function,
+      default: () => true
+    },
+    // 新增 回调事件
+    onRotateStart: {
+      type: Function,
+      default: () => true
+    },
+    onRotate: {
+      type: Function,
+      default: () => true
+    },
+    // 冲突检测
+    isConflictCheck: {
+      type: Boolean,
+      default: false
+    },
+    // 元素对齐
+    snap: {
+      type: Boolean,
+      default: false
+    },
+    // 新增 是否对齐容器边界
+    snapBorder: {
+      type: Boolean,
+      default: false
+    },
+    // 当调用对齐时，用来设置组件与组件之间的对齐距离，以像素为单位
+    snapTolerance: {
+      type: Number,
+      default: 5,
+      validator: function (val) {
+        return typeof val === 'number';
+      }
+    },
+    // 缩放比例
+    scaleRatio: {
+      type: Number,
+      default: 1,
+      validator: val => typeof val === 'number'
+    },
+    // handle是否缩放
+    handleInfo: {
+      type: Object,
+      default: () => {
+        return {
+          size: 8,
+          offset: -4,
+          switch: true
+        };
+      }
+    }
+  },
+
+  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
+    }
+  },
+
+  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: {
+    // 重置边界和鼠标状态
+    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
+      }
+      // 新增保存矩形信息
+      // 获取父元素的位置大小信息
+      let { top, left, width, height } = this.$el.getBoundingClientRect()
+      // 保存旋转中心的绝对坐标
+      this.lastCenterX = window.pageXOffset + left + width / 2
+      this.lastCenterY = window.pageYOffset + top + height / 2
+      // 保存四个顶点的坐标
+      let oleft = this.left
+      let otop = this.top
+      let owidth = this.width
+      let oheight = this.height
+      let centerX = oleft + owidth / 2
+      let centerY = otop + oheight / 2
+      let 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() {
+      let minW = this.minW;
+      let 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)
+      let x = offsetX - originX
+      let 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) {
+      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) {
+      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)
+      // 获取鼠标移动的坐标差
+      let deltaX = mouseX - this.mouseClickPosition.mouseX
+      let 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))
+      }
+
+      // 边界限制(矩形的外接圆不能超出父盒子)
+      let 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) {
+      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) {
+      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
+                  }
+                }
+              }
+              // 再次进行边界处理
+              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.split(' ').includes(this.classNameActive)) {
+          activeAll.push(item);
+        }
+      }
+      const AllLength = activeAll.length;
+      if (AllLength > 1) {
+        for (const i of activeAll) {
+          const l = i.offsetLeft;
+          const r = l + i.offsetWidth;
+          const t = i.offsetTop;
+          const b = t + i.offsetHeight;
+          XArray.push(l, r);
+          YArray.push(t, b);
+        }
+        groupWidth = Math.max(...XArray) - Math.min(...XArray)
+        groupHeight = Math.max(...YArray) - Math.min(...YArray)
+        groupLeft = Math.min(...XArray)
+        groupTop = Math.min(...YArray)
+      }
+      const bln = AllLength === 1;
+      return { groupWidth, groupHeight, groupLeft, groupTop, bln };
+    },
+    // 修复 正则获取left与top
+    formatTransformVal(string) {
+      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g);
+      if (top === undefined) top = 0;
+      return [Number(left), Number(top), rotate];
+    }
+  },
+  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() {
+      return {
+        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)
+      };
+    },
+    // 控制柄显示与否
+    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);
+    }
+  }
+};
+</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
new file mode 100644
index 0000000000..9e36dba6ea
--- /dev/null
+++ b/frontend/src/components/vue-drag-resize/dom.js
@@ -0,0 +1,60 @@
+import { isFunction } from './fns'
+
+// 将选择器与父元素匹配
+export function matchesSelectorToParentElements (el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function getComputedSize ($el) {
+  const style = window.getComputedStyle($el)
+
+  return [
+    parseFloat(style.getPropertyValue('width'), 10),
+    parseFloat(style.getPropertyValue('height'), 10)
+  ]
+}
+// 添加事件
+export function addEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+// 删除事件
+export function removeEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}
diff --git a/frontend/src/components/vue-drag-resize/fns.js b/frontend/src/components/vue-drag-resize/fns.js
new file mode 100644
index 0000000000..004f1682e1
--- /dev/null
+++ b/frontend/src/components/vue-drag-resize/fns.js
@@ -0,0 +1,40 @@
+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
new file mode 100644
index 0000000000..30e41152f7
--- /dev/null
+++ b/frontend/src/components/vue-drag-resize/index.vue
@@ -0,0 +1,1277 @@
+<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/lang/zh.js b/frontend/src/lang/zh.js
index c70fce5650..a7dc83d283 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -720,7 +720,7 @@ export default {
     confirm: '确认',
     cancel: '取消',
     search: '搜索',
-    back: '返回'
-
+    back: '返回',
+    view: '视图'
   }
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f8038f4214..b5ddc1e834 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -19,6 +19,9 @@ import message from '@/metersphere/common/js/message'
 import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
 import directives from './directive'
 
+import vdrr from './components/vue-drag-resize-rotate'
+Vue.component('vdrr', vdrr)
+
 Vue.prototype.$api = api
 
 import * as echarts from 'echarts'
diff --git a/frontend/src/styles/vdrr/common.scss b/frontend/src/styles/vdrr/common.scss
new file mode 100644
index 0000000000..b003d6c898
--- /dev/null
+++ b/frontend/src/styles/vdrr/common.scss
@@ -0,0 +1,123 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+// 滚动条
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
+  background: #141414;
+}
+
+// 文字对齐
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+// 首页
+#app {
+  display: flex;
+  flex-direction: row;
+
+}
+
+#menu {
+  width: 275px;
+  min-width: 200px;
+  max-width: 500px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .el-menu {
+    border: none;
+
+    .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .el-menu-item {
+      height: 28px;
+      line-height: 28px;
+    }
+  }
+}
+
+#view {
+  flex: 1;
+  min-width: 500px;
+  padding: 10px 35px 0 35px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+}
+
+
+.drag-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 5px;
+  z-index: 99;
+  border-left: 1px solid #ccc;
+  cursor: ew-resize
+}
+
+.view-box {
+  width: 100%;
+}
+
+#toolbar {
+  left: 0;
+  top: 0;
+  height: 24px;
+  padding: 5px;
+  border: 1px solid #999;
+  border-bottom: none;
+  background-color: #CCC;
+  z-index: 999;
+}
+
+.container {
+  width: 100%;
+  height: 600px;
+  border: 1px solid #000;
+
+  position: relative;
+  box-sizing: border-box
+}
+
+.vdr {
+  border: 1px dashed;
+}
+
+.vdrr {
+  border: 1px dashed;
+}
diff --git a/frontend/src/styles/vdrr/customize.scss b/frontend/src/styles/vdrr/customize.scss
new file mode 100644
index 0000000000..f7265b502f
--- /dev/null
+++ b/frontend/src/styles/vdrr/customize.scss
@@ -0,0 +1,147 @@
+.pattern-contaienr {
+  border: 1px solid #ccc;
+  width: 576px;
+  height: 324px;
+}
+
+.iconPistion {
+  border-width: 2px;
+  border-style: solid;
+  border-color: #409eff;
+  background-color: rgba(128, 128, 128, 0.5);
+  box-sizing: border-box;
+
+  .icon-slot {
+    font-size: 12px;
+  }
+}
+
+.patternContent {
+  display: flex;
+
+  .patternLeft {
+    margin: 10px;
+  }
+
+  .patternRight {
+    width: 400px;
+    margin: 10px;
+  }
+}
+
+
+.icon-slot {
+  width: 100%;
+  height: 100%;
+
+  .status {
+    text-align: left;
+    color: #000;
+  }
+
+  .order {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.activePattern {
+  border-style: solid;
+  border-color: #08de05;
+}
+
+
+.drag-handle,
+.drag-cancel {
+  padding: 6px;
+  margin: 6px;
+  background-color: #CCC;
+  border: 2px solid;
+}
+
+.drag-handle:hover {
+  cursor: move;
+}
+
+.drag-cancel:hover {
+  cursor: not-allowed;
+}
+
+.my-handle-class {
+  position: absolute;
+  border: 1px solid black;
+  border-radius: 50%;
+  height: 14px;
+  width: 14px;
+  font-size: 1em;
+  line-height: 1em;
+  box-sizing: border-box;
+  -webkit-transition: all 300ms linear;
+  -ms-transition: all 300ms linear;
+  transition: all 300ms linear;
+}
+
+.my-handle-class-tl {
+  top: -14px;
+  left: -14px;
+  cursor: nw-resize;
+}
+
+.my-handle-class-tm {
+  top: -14px;
+  left: 50%;
+  margin-left: -7px;
+  cursor: n-resize;
+}
+
+.my-handle-class-tr {
+  top: -14px;
+  right: -14px;
+  cursor: ne-resize;
+}
+
+.my-handle-class-ml {
+  top: 50%;
+  margin-top: -7px;
+  left: -14px;
+  cursor: w-resize;
+}
+
+.my-handle-class-mr {
+  top: 50%;
+  margin-top: -7px;
+  right: -14px;
+  cursor: e-resize;
+}
+
+.my-handle-class-bl {
+  bottom: -14px;
+  left: -14px;
+  cursor: sw-resize;
+}
+
+.my-handle-class-bm {
+  bottom: -14px;
+  left: 50%;
+  margin-left: -7px;
+  cursor: s-resize;
+}
+
+.my-handle-class-br {
+  bottom: -14px;
+  right: -14px;
+  cursor: se-resize;
+}
+
+.my-handle-class-tl:hover,
+.my-handle-class-tm:hover,
+.my-handle-class-tr:hover,
+.my-handle-class-ml:hover,
+.my-handle-class-mr:hover,
+.my-handle-class-bl:hover,
+.my-handle-class-bm:hover,
+.my-handle-class-br:hover {
+  transform: scale(1.4);
+}
diff --git a/frontend/src/styles/vdrr/highlight.scss b/frontend/src/styles/vdrr/highlight.scss
new file mode 100644
index 0000000000..766e70839a
--- /dev/null
+++ b/frontend/src/styles/vdrr/highlight.scss
@@ -0,0 +1,50 @@
+// 添加行号样式
+pre.hljs {
+  padding: 8px 2px;
+  border-radius: 5px;
+  position: relative;
+
+  ol {
+    list-style: decimal;
+    margin: 0;
+    margin-left: 40px;
+    padding: 0;
+
+    li {
+      list-style: decimal-leading-zero;
+      position: relative;
+      padding-left: 10px;
+
+      .line-num {
+        position: absolute;
+        left: -40px;
+        top: 0;
+        width: 40px;
+        height: 100%;
+        border-right: 1px solid rgba(0, 0, 0, .66);
+      }
+    }
+  }
+
+  b.name {
+    position: absolute;
+    top: 2px;
+    right: 12px;
+    z-index: 10;
+    color: #999;
+    pointer-events: none;
+  }
+}
+
+
+
+span.hljs-tag,
+span.hljs-name {
+  color: #eb333c;
+}
+
+
+span.hljs-string {
+  color: #b4aa34;
+
+}
\ No newline at end of file
diff --git a/frontend/src/styles/vdrr/markdown.scss b/frontend/src/styles/vdrr/markdown.scss
new file mode 100644
index 0000000000..a278a71075
--- /dev/null
+++ b/frontend/src/styles/vdrr/markdown.scss
@@ -0,0 +1,247 @@
+.markdown-render {
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: rgb(51, 51, 51);
+    line-height: 1.6;
+  }
+
+  a {
+    color: #4183C4;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    line-height: 1.4;
+    cursor: text;
+  }
+
+  h1:hover a.anchor,
+  h2:hover a.anchor,
+  h3:hover a.anchor,
+  h4:hover a.anchor,
+  h5:hover a.anchor,
+  h6:hover a.anchor {
+    text-decoration: none;
+  }
+
+  h1 tt,
+  h1 code {
+    font-size: inherit;
+  }
+
+  h2 tt,
+  h2 code {
+    font-size: inherit;
+  }
+
+  h3 tt,
+  h3 code {
+    font-size: inherit;
+  }
+
+  h4 tt,
+  h4 code {
+    font-size: inherit;
+  }
+
+  h5 tt,
+  h5 code {
+    font-size: inherit;
+  }
+
+  h6 tt,
+  h6 code {
+    font-size: inherit;
+  }
+
+  h1 {
+    padding-bottom: .3em;
+    font-size: 2.0m;
+    line-height: 1.2;
+    border-bottom: 1px solid #eee;
+  }
+
+  h2 {
+    padding-bottom: .3em;
+    font-size: 1.66em;
+    line-height: 1.225;
+    border-bottom: 1px solid #eee;
+  }
+
+  h3 {
+    font-size: 1.33em;
+    line-height: 1.43;
+  }
+
+  h4 {
+    font-size: 1.11em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: .8m;
+    color: #777;
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table {
+    margin: 0.8em 0;
+  }
+
+  li>ol,
+  li>ul {
+    margin: 0 0;
+  }
+
+  hr {
+    height: 2px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+    overflow: hidden;
+    box-sizing: content-box;
+  }
+
+  li p.first {
+    display: inline-block;
+  }
+
+  ul,
+  ol {
+    padding-left: 30px;
+  }
+
+  ul:first-child,
+  ol:first-child {
+    margin-top: 0;
+  }
+
+  ul:last-child,
+  ol:last-child {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    border-left: 4px solid #dfe2e5;
+    padding: 0 15px;
+    color: #777777;
+  }
+
+  blockquote blockquote {
+    padding-right: 0;
+  }
+
+  table {
+    padding: 0;
+    word-break: initial;
+  }
+
+  table tr {
+    border-top: 1px solid #dfe2e5;
+    margin: 0;
+    padding: 0;
+  }
+
+  table tr:nth-child(2n),
+  thead {
+    background-color: #f8f8f8;
+  }
+
+  table tr th {
+    font-weight: bold;
+    border: 1px solid #dfe2e5;
+    border-bottom: 0;
+    margin: 0;
+    padding: 6px 13px;
+  }
+
+  table tr td {
+    border: 1px solid #dfe2e5;
+    margin: 0;
+    padding: 6px 13px;
+  }
+
+  table tr th:first-child,
+  table tr td:first-child {
+    margin-top: 0;
+  }
+
+  table tr th:last-child,
+  table tr td:last-child {
+    margin-bottom: 0;
+  }
+
+  tt {
+    border: 1px solid #e7eaed;
+    background-color: #f8f8f8;
+    border-radius: 3px;
+    padding: 0;
+    padding: 2px 4px 0px 4px;
+    font-size: .9em;
+  }
+
+  code {
+    background-color: #f3f4f4;
+    padding: 0 2px 0 2px;
+    font-size: 16px;
+  }
+
+
+  @media print {
+    html {
+      font-size: 13px;
+    }
+
+    table,
+    pre {
+      page-break-inside: avoid;
+    }
+
+    pre {
+      word-wrap: break-word;
+    }
+  }
+
+
+
+  pre {
+    padding: 1rem;
+    font-size: 100%;
+    line-height: 1.45;
+    background-color:#f7f7f7;
+    border: 0;
+    border-radius: 3px;
+    color: #777777;
+    margin-top: 0 !important;
+  }
+
+  blockquote {
+    border-left-color: rgba(85, 85, 85, 0.12);
+  }
+
+  header,
+  footer {
+    font-family: "Segoe UI", "Arial", sans-serif;
+  }
+
+}
\ No newline at end of file
diff --git a/frontend/src/views/panel/chart/chart.js b/frontend/src/views/panel/chart/chart.js
new file mode 100644
index 0000000000..4f61c83d7f
--- /dev/null
+++ b/frontend/src/views/panel/chart/chart.js
@@ -0,0 +1,20 @@
+export const BASE_BAR = {
+  title: {
+    text: ''
+  },
+  tooltip: {},
+  legend: {
+    data: []
+  },
+  xAxis: {
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: []
+}
+
+export default {
+  BASE_BAR
+}
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 25390b55f4..e954698ac7 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -37,13 +37,14 @@ import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
 // import Group from './group/Group'
 import PanelList from './list/PanelList'
 import PanelView from './list/PanelView'
+import PanelViewShow from './list/PanelViewShow'
 
 export default {
   name: 'Panel',
-  components: { MsMainContainer, MsContainer, MsAsideContainer, PanelList, PanelView },
+  components: { MsMainContainer, MsContainer, MsAsideContainer, PanelList, PanelView ,PanelViewShow},
   data() {
     return {
-      component: PanelView,
+      component: PanelViewShow,
       param: {},
       activeName: 'PanelList'
     }
@@ -56,8 +57,8 @@ export default {
       console.log(c)
       this.param = c.param
       switch (c.name) {
-        case 'PanelView':
-          this.component = PanelView
+        case 'PanelViewShow':
+          this.component = PanelViewShow
           break
       }
     }
diff --git a/frontend/src/views/panel/list/PanelView.vue b/frontend/src/views/panel/list/PanelView.vue
index 2e4716efd4..dee4a6d5f2 100644
--- a/frontend/src/views/panel/list/PanelView.vue
+++ b/frontend/src/views/panel/list/PanelView.vue
@@ -1,10 +1,7 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
-    <el-row>
+    <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
       <span>仪表盘名称：{{panelName}}</span>
-
     </el-row>
-  </el-col>
 </template>
 
 <script>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
new file mode 100644
index 0000000000..23e0c02f5a
--- /dev/null
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -0,0 +1,364 @@
+<template>
+  <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
+    <el-row style="display: flex;height: 100%">
+      <el-col class="view-list">
+        <el-tabs v-model="ViewActiveName">
+          <!--视图展示操作-->
+          <el-tab-pane name="Views" class="view-list-thumbnails-outline">
+            <span slot="label"><i class="el-icon-s-data" />视图</span>
+            <draggable
+              v-model="thumbnails"
+              :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
+              animation="300"
+              :move="onMove"
+              style="height: 100%;overflow:auto"
+              @end="end1"
+            >
+              <transition-group>
+                <img class="view-list-thumbnails" v-for="item in thumbnails" :key="item.name" :src="'/common-files/images/'+item.id" alt=""/>
+              </transition-group>
+            </draggable>
+          </el-tab-pane>
+
+          <!--通用组件操作-->
+          <el-tab-pane name="PublicTools">
+            <span slot="label"><i class="el-icon-s-grid" />组件</span>
+            开发中...
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+
+      <el-col class="panel-design">
+          <!--TODO 仪表盘设计公共设置区域-->
+          <el-row class="panel-design-head">
+            <span style="float: right;line-height: 40px;">
+              <el-button size="mini">
+                背景图
+              </el-button>
+              <el-button type="primary" size="mini" @click="save">
+                透视
+              </el-button>
+            </span>
+          </el-row>
+        <el-row class="panel-design-show">
+          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
+            <div id="echart" style="width: 100%;height: 80vh;"/>
+          </div>
+        </el-row>
+
+      </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+import draggable from 'vuedraggable'
+import { BASE_BAR } from '../chart/chart'
+
+export default {
+  name: 'PanelViewShow',
+  components: { draggable },
+  data() {
+    return {
+      ViewActiveName:'Views',
+      table: {},
+      thumbnails: [
+        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST1'},
+        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST2'},
+        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST3'},
+        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST4'}
+      ],
+      quota: [],
+      view: {
+        xaxis: [],
+        yaxis: [],
+        show: true,
+        type: 'bar',
+        title: ''
+      },
+      // 定义要被拖拽对象的数组
+      arr1: [
+        { id: 1, name: 'id' },
+        { id: 2, name: '名称' },
+        { id: 3, name: '类型' },
+        { id: 5, name: '状态' },
+        { id: 4, name: '指标指标指标' }
+      ],
+      arr2: [
+        { id: 11, name: '容量' }
+      ],
+      moveId: -1
+    }
+  },
+  computed: {
+    tableId() {
+      // console.log(this.$store.state.chart.tableId);
+      this.initTableData(this.$store.state.chart.tableId)
+      return this.$store.state.chart.tableId
+    },
+    sceneId() {
+      // console.log(this.$store.state.chart.sceneId);
+      return this.$store.state.chart.sceneId
+    },
+    vId() {
+      // console.log(this.$store.state.chart.viewId);
+      this.getData(this.$store.state.chart.viewId)
+      return this.$store.state.chart.viewId
+    }
+
+  },
+  watch: {},
+  created() {
+    // this.get(this.$store.state.chart.viewId);
+  },
+  mounted() {
+    // this.get(this.$store.state.chart.viewId);
+    this.getData(this.$store.state.chart.viewId)
+    // this.myEcharts();
+  },
+  activated() {
+  },
+  methods: {
+    initTableData(id) {
+      if (id != null) {
+        post('/dataset/table/get/' + id, null).then(response => {
+          this.table = response.data
+          this.initTableField(id)
+        })
+      }
+    },
+    initTableField(id) {
+      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
+        this.thumbnails = response.data.thumbnails
+        this.quota = response.data.quota
+      })
+    },
+    click1(item) {
+      // console.log(item);
+      const c = this.view.xaxis.filter(function(ele) {
+        return ele.id === item.id
+      })
+      // console.log(c);
+      if (c && c.length === 0) {
+        this.view.xaxis.push(item)
+      }
+    },
+    click2(item) {
+      // console.log(item);
+      const c = this.view.yaxis.filter(function(ele) {
+        return ele.id === item.id
+      })
+      // console.log(c);
+      if (c && c.length === 0) {
+        this.view.yaxis.push(item)
+      }
+    },
+    clear1(index) {
+      this.view.xaxis.splice(index, 1)
+    },
+    clear2(index) {
+      this.view.yaxis.splice(index, 1)
+    },
+    get(id) {
+      if (id) {
+        post('/chart/view/get/' + id, null).then(response => {
+          this.view = response.data
+          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+        })
+      } else {
+        this.view = {}
+      }
+    },
+    save() {
+      const view = JSON.parse(JSON.stringify(this.view))
+      view.id = this.view.id
+      view.sceneId = this.sceneId
+      view.name = this.table.name
+      view.tableId = this.$store.state.chart.tableId
+      view.xaxis = JSON.stringify(view.xaxis)
+      view.yaxis = JSON.stringify(view.yaxis)
+      post('/chart/view/save', view).then(response => {
+        // this.get(response.data.id);
+        this.getData(response.data.id)
+        this.$store.dispatch('chart/setChartSceneData', null)
+        this.$store.dispatch('chart/setChartSceneData', this.sceneId)
+      })
+    },
+    getData(id) {
+      if (id) {
+        post('/chart/view/getData/' + id, null).then(response => {
+          this.view = response.data
+          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+
+          const chart = response.data
+          const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
+          // console.log(chart_option);
+          if (chart.data) {
+            chart_option.title.text = chart.title
+            chart_option.xAxis.data = chart.data.x
+            chart.data.series.forEach(function(y) {
+              chart_option.legend.data.push(y.name)
+              chart_option.series.push(y)
+            })
+          }
+          // console.log(chart_option);
+          this.myEcharts(chart_option)
+        })
+      } else {
+        this.view = {}
+      }
+    },
+
+    // 左边往右边拖动时的事件
+    end1(e) {
+      // console.log(e)
+      // var that = this;
+      // var items = this.arr2.filter(function (m) {
+      //   return m.id == that.moveId
+      // })
+      // //如果左边
+      // if (items.length < 2) return;
+      // this.arr2.splice(e.newDraggableIndex, 1)
+    },
+    // 右边往左边拖动时的事件
+    end2(e) {
+      // console.log(e)
+      // var that = this;
+      // var items = this.yAxisData.filter(function (m) {
+      //   return m.id == that.moveId
+      // })
+      // //如果左边
+      // if (items.length < 2) return;
+      // this.yAxisData.splice(e.newDraggableIndex, 1)
+    },
+    end3(e) {
+
+    },
+    end4(e) {
+
+    },
+    // move回调方法
+    onMove(e, originalEvent) {
+      console.log(e)
+      // this.moveId = e.relatedContext.element.id;
+      // //不允许停靠
+      // if (e.relatedContext.element.id == 1) return false;
+      // //不允许拖拽
+      // if (e.draggedContext.element.id == 4) return false;
+      // if (e.draggedContext.element.id == 11) return false;
+      return true
+    },
+
+    myEcharts(option) {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById('echart'))
+      // 指定图表的配置项和数据
+      setTimeout(myChart.setOption(option, true), 500)
+      window.onresize = function() {
+        myChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .view-list {
+    height: 100%;
+    width: 20%;
+    min-width: 180px;
+    max-width:220px;
+    border: 1px solid #E6E6E6;
+    border-left: 0 solid;
+  }
+
+  .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;
+  }
+
+  span {
+    font-size: 12px;
+  }
+</style>
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index fd148444bd..9dee92a03e 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -14,6 +14,12 @@ module.exports = {
   // 使用mock-server
   devServer: {
     port: port,
+    proxy: {
+      ['^(?!/login)']: {
+        target: 'http://localhost:8081/',
+        ws: false,
+      }
+    },
     open: true,
     overlay: {
       warnings: false,