From 1dffd4741be68a9d25206907180be19f124e0ac9 Mon Sep 17 00:00:00 2001
From: Esther-Guo <special0831qi@gmail.com>
Date: Wed, 15 Jun 2022 10:57:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E8=BE=B9=E6=A1=86v1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/packages/web/src/feature.js               |   4 +-
 .../widget-border/ToolWidgetBorder.vue        | 111 ++++++++++++++++++
 .../web/src/plugins/widget-border/index.js    |  15 +++
 3 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 Web/packages/web/src/plugins/widget-border/ToolWidgetBorder.vue
 create mode 100644 Web/packages/web/src/plugins/widget-border/index.js

diff --git a/Web/packages/web/src/feature.js b/Web/packages/web/src/feature.js
index 0fccb245e..a7926ede9 100644
--- a/Web/packages/web/src/feature.js
+++ b/Web/packages/web/src/feature.js
@@ -13,6 +13,8 @@ import HelloWorld from './components/ToolHelloWorld'
 import Resource from './plugins/resources/index'
 import ApiMock from './plugins/api-mock/index'
 import WebVitals from './plugins/web-vitals-time/index'
+import WidgetBorder from './plugins/widget-border/index'
+
 
 import {IndependPlugin, RouterPlugin} from '@dokit/web-core'
 
@@ -29,7 +31,7 @@ export const DokitFeatures = {
 
 export const UIFeatures = {
   title: '视觉功能',
-  list: [AlignRuler]
+  list: [AlignRuler, WidgetBorder]
   // list: [AlignRuler,
   // new RouterPlugin({
   //   nameZh: 'UI结构',
diff --git a/Web/packages/web/src/plugins/widget-border/ToolWidgetBorder.vue b/Web/packages/web/src/plugins/widget-border/ToolWidgetBorder.vue
new file mode 100644
index 000000000..4237e0c2b
--- /dev/null
+++ b/Web/packages/web/src/plugins/widget-border/ToolWidgetBorder.vue
@@ -0,0 +1,111 @@
+<template>
+<div>
+  <div class="mask" v-show="!showContainer"></div>
+  <div v-for="rect in rect_info" v-bind:key="rect.id" :style="{position: 'fixed', left: rect.left+'px', top: rect.top+'px', width: rect.width+'px', height: rect.height+'px', border: '1px dashed #707d8b', zIndex: 4 }"></div>
+  <div class="button-group">
+    <div class="refresh" @click="refresh">刷新边框</div>
+    <div class="cancel" @click="remove">取消边框</div>
+  </div>
+</div>
+</template>
+<script>
+import { removeIndependPlugin } from "@dokit/web-core";
+export default {
+  data() {
+    return {
+      rect_info: [],
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+    }
+  },
+
+  computed: {
+    state() {
+      return this.$store.state;
+    },
+    showContainer() {
+      return this.state.showContainer;
+    },
+    // displayRect(rect) {
+    //   return {
+    //     'position': 'fixed',
+    //     'left': rect.left + 'px',
+    //     'top': rect.top + 'px',
+    //     'width': rect.width + 'px',
+    //     'height': rect.height + 'px',
+    //     'border': '1px dotted red'
+    //   }
+    // }
+  },
+
+  mounted() {
+    this.getAllRect();
+    window.addEventListener("scroll", this.handleScroll)
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("scroll", this.handleScroll)
+  },
+  
+  methods: {
+
+    getAllRect() {
+      let elems = document.body.getElementsByTagName("*");
+      // console.log(window.scrollX, window.scrollY);
+      [].slice.call(elems).forEach((ele,idx) => {
+        let rect = ele.getBoundingClientRect();
+        // console.log(rect.top, window.scrollY);
+        this.rect_info.push({id: idx, left: rect.left, top: rect.top, width: rect.width, height: rect.height});
+      });
+      // console.log(this.rect_info);
+    },
+
+    handleScroll() {
+      this.rect_info.forEach(rect => {
+        rect.left += (this.scrollX - window.scrollX);
+        rect.top += (this.scrollY - window.scrollY);
+        });
+      this.scrollX = window.scrollX;
+      this.scrollY = window.scrollY;
+    },
+
+    remove() {
+      removeIndependPlugin("widget-border");
+    },
+
+    refresh() {
+      this.getAllRect();
+    }
+  }
+}
+</script>
+<style>
+.button-group {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  position: fixed;
+  bottom: 10%;
+  z-index: 4;
+}
+.refresh, .cancel {
+  width: 30%;
+  height: 40px;
+  margin: 0 auto;
+  border-radius: 5px;
+  background-color: antiquewhite;
+  text-align: center;
+  line-height: 40px;
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  background-color: #333333;
+  opacity: 0.2;
+}
+</style>
\ No newline at end of file
diff --git a/Web/packages/web/src/plugins/widget-border/index.js b/Web/packages/web/src/plugins/widget-border/index.js
new file mode 100644
index 000000000..cb85f1a3a
--- /dev/null
+++ b/Web/packages/web/src/plugins/widget-border/index.js
@@ -0,0 +1,15 @@
+// 
+// 功能: 布局边框
+// 作者: Esther-Guo (郭琪)
+// 时间v2022-6-15
+// 
+
+import WidgetBorder from './ToolWidgetBorder.vue';
+import {IndependPlugin} from '@dokit/web-core';
+
+export default new IndependPlugin({
+  nameZh: '布局边框',
+  name: 'widget-border',
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/3H7ARcsgxc1653533346248.png',
+  component: WidgetBorder
+})
\ No newline at end of file