From d6bd089b9e6e4e58275d37a5b4982bf429f10448 Mon Sep 17 00:00:00 2001
From: YHH <YHH@LAPTOP-AGHANR40>
Date: Wed, 15 Jun 2022 15:10:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=86=85=E5=AD=98?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E7=9B=91=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo-single-plugin/IndependPluginDemo.vue | 54 +++++++++++++++++--
 .../src/plugins/demo-single-plugin/index.js   | 13 +++--
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue b/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
index 55760b7c2..df791b220 100644
--- a/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
+++ b/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="hello-independ" v-dragable>
     <div style="font-weight: bold; font-size: 30px; font-style: italic">
-      Hello Dokit
+      实时内存监测
     </div>
-    <div>Demo Independ Plugin</div>
-    <div @click="remove" style="background-color: red; color:white;margin-top:10px">
+    <!-- jsHeapSizeLimit 上下文内可用堆的最大体积，以字节计算。
+         totalJSHeapSize 已分配的堆体积，以字节计算。 
+         usedJSHeapSize  当前 JS 堆活跃段（segment）的体积，以字节计算。-->
+    <div>上下文内可用堆的最大体积：{{jsHeapSizeLimit}}字节</div>
+    <div>已分配的堆体积：{{totalJSHeapSize}}字节</div>
+    <div>当前JS堆活跃段的体积：{{usedJSHeapSize}}字节</div>
+    <div @click="remove" id='removeMemory' style="background-color: red; color:white;margin-top:10px">
       点击移除当前独立插件
     </div>
   </div>
@@ -17,17 +22,58 @@ export default {
   directives: {
     dragable,
   },
+  data() {
+    return {
+      jsHeapSizeLimit: 0,
+      totalJSHeapSize: 0,
+      usedJSHeapSize: 0
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    this.showMemory()
+  },
   methods: {
     remove() {
       removeIndependPlugin("test");
     },
+    showMemory() {
+      // 功能检验（向document中加入一万个div）
+      function f() {
+        var date = +new Date();
+        var str = [];
+        for (var i = 1; i <= 10000; i++) {
+            str.push('<div></div>');
+        }
+        str = str.join('');
+        document.body.innerHTML = str;
+        var date1 = +new Date();
+        // console.log(date1 - date);
+      }
+      // 内存监测
+      this.jsHeapSizeLimit = window.performance.memory.jsHeapSizeLimit
+      this.totalJSHeapSize = window.performance.memory.totalJSHeapSize
+      this.usedJSHeapSize = window.performance.memory.usedJSHeapSize
+      var t = setInterval(() => {
+        this.jsHeapSizeLimit = window.performance.memory.jsHeapSizeLimit
+        this.totalJSHeapSize = window.performance.memory.totalJSHeapSize
+        this.usedJSHeapSize = window.performance.memory.usedJSHeapSize
+        console.log(this.jsHeapSizeLimit)
+        // f(); 
+      }, 1000)
+      // 清除监测
+      var removeMemory = document.getElementById('removeMemory');
+      removeMemory.onclick = function(){
+        clearInterval(t);
+      }
+    },
   },
 };
 </script>
 <style scoped>
 .hello-independ {
   display: inline-block;
-  width: 200px;
+  width: 500px;
   /* padding: 10px; */
   text-align: center;
   background-color: white;
diff --git a/Web/packages/web/src/plugins/demo-single-plugin/index.js b/Web/packages/web/src/plugins/demo-single-plugin/index.js
index 45a2d8e95..2f2720b7f 100644
--- a/Web/packages/web/src/plugins/demo-single-plugin/index.js
+++ b/Web/packages/web/src/plugins/demo-single-plugin/index.js
@@ -1,10 +1,9 @@
 import IndependPluginDemo from './IndependPluginDemo.vue'
-import {IndependPlugin} from '@dokit/web-core'
+import { IndependPlugin } from '@dokit/web-core'
 
 export default new IndependPlugin({
-  nameZh: '独立插件',
-  name: 'test',
-  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
-  component: IndependPluginDemo
-})
-
+    nameZh: '内存实时监测',
+    name: 'test',
+    icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
+    component: IndependPluginDemo
+})
\ No newline at end of file

From 458dd4498bfd59dabb75153b574de556b4b08b9c Mon Sep 17 00:00:00 2001
From: YHH <YHH@LAPTOP-AGHANR40>
Date: Mon, 27 Jun 2022 15:00:36 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=86=85=E5=AD=98?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E7=9B=91=E6=B5=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/packages/web/src/feature.js               | 33 +++----
 .../demo-single-plugin/IndependPluginDemo.vue | 54 +-----------
 .../src/plugins/demo-single-plugin/index.js   | 13 +--
 .../memory-monitoring/IndependPluginDemo.vue  | 85 +++++++++++++++++++
 .../src/plugins/memory-monitoring/index.js    |  9 ++
 5 files changed, 122 insertions(+), 72 deletions(-)
 create mode 100644 Web/packages/web/src/plugins/memory-monitoring/IndependPluginDemo.vue
 create mode 100644 Web/packages/web/src/plugins/memory-monitoring/index.js

diff --git a/Web/packages/web/src/feature.js b/Web/packages/web/src/feature.js
index 0fccb245e..545e00dd2 100644
--- a/Web/packages/web/src/feature.js
+++ b/Web/packages/web/src/feature.js
@@ -13,29 +13,30 @@ 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 memoryMonitoring from './plugins/memory-monitoring'
 
-import {IndependPlugin, RouterPlugin} from '@dokit/web-core'
+import { IndependPlugin, RouterPlugin } from '@dokit/web-core'
 
 export const BasicFeatures = {
-  title: '常用工具',
-  list: [Console, AppInfo, Resource, Network, Storage, DemoPlugin, DemoIndependPlugin, H5DoorPlugin, WebVitals, Element, OneMachineWithMultipleControls, scanCode]
-  // list: [Console, AppInfo, Resource, Network, Storage, H5DoorPlugin]
+    title: '常用工具',
+    list: [Console, AppInfo, Resource, Network, Storage, DemoPlugin, DemoIndependPlugin, H5DoorPlugin, WebVitals, Element, OneMachineWithMultipleControls, scanCode, memoryMonitoring]
+        // list: [Console, AppInfo, Resource, Network, Storage, H5DoorPlugin]
 }
 
 export const DokitFeatures = {
-  title: '平台功能',
-  list: [ApiMock]
+    title: '平台功能',
+    list: [ApiMock]
 }
 
 export const UIFeatures = {
-  title: '视觉功能',
-  list: [AlignRuler]
-  // list: [AlignRuler,
-  // new RouterPlugin({
-  //   nameZh: 'UI结构',
-  //   name: 'view-selector',
-  //   icon: 'https://pt-starimg.didistatic.com/static/starimg/img/XNViIWzG7N1618997548483.png',
-  //   component: HelloWorld
-  // })]
+    title: '视觉功能',
+    list: [AlignRuler]
+        // list: [AlignRuler,
+        // new RouterPlugin({
+        //   nameZh: 'UI结构',
+        //   name: 'view-selector',
+        //   icon: 'https://pt-starimg.didistatic.com/static/starimg/img/XNViIWzG7N1618997548483.png',
+        //   component: HelloWorld
+        // })]
 }
-export const Features = [BasicFeatures, DokitFeatures, UIFeatures]
+export const Features = [BasicFeatures, DokitFeatures, UIFeatures]
\ No newline at end of file
diff --git a/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue b/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
index df791b220..55760b7c2 100644
--- a/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
+++ b/Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
@@ -1,15 +1,10 @@
 <template>
   <div class="hello-independ" v-dragable>
     <div style="font-weight: bold; font-size: 30px; font-style: italic">
-      实时内存监测
+      Hello Dokit
     </div>
-    <!-- jsHeapSizeLimit 上下文内可用堆的最大体积，以字节计算。
-         totalJSHeapSize 已分配的堆体积，以字节计算。 
-         usedJSHeapSize  当前 JS 堆活跃段（segment）的体积，以字节计算。-->
-    <div>上下文内可用堆的最大体积：{{jsHeapSizeLimit}}字节</div>
-    <div>已分配的堆体积：{{totalJSHeapSize}}字节</div>
-    <div>当前JS堆活跃段的体积：{{usedJSHeapSize}}字节</div>
-    <div @click="remove" id='removeMemory' style="background-color: red; color:white;margin-top:10px">
+    <div>Demo Independ Plugin</div>
+    <div @click="remove" style="background-color: red; color:white;margin-top:10px">
       点击移除当前独立插件
     </div>
   </div>
@@ -22,58 +17,17 @@ export default {
   directives: {
     dragable,
   },
-  data() {
-    return {
-      jsHeapSizeLimit: 0,
-      totalJSHeapSize: 0,
-      usedJSHeapSize: 0
-    }
-  },
-  mounted() {
-    console.log('mounted')
-    this.showMemory()
-  },
   methods: {
     remove() {
       removeIndependPlugin("test");
     },
-    showMemory() {
-      // 功能检验（向document中加入一万个div）
-      function f() {
-        var date = +new Date();
-        var str = [];
-        for (var i = 1; i <= 10000; i++) {
-            str.push('<div></div>');
-        }
-        str = str.join('');
-        document.body.innerHTML = str;
-        var date1 = +new Date();
-        // console.log(date1 - date);
-      }
-      // 内存监测
-      this.jsHeapSizeLimit = window.performance.memory.jsHeapSizeLimit
-      this.totalJSHeapSize = window.performance.memory.totalJSHeapSize
-      this.usedJSHeapSize = window.performance.memory.usedJSHeapSize
-      var t = setInterval(() => {
-        this.jsHeapSizeLimit = window.performance.memory.jsHeapSizeLimit
-        this.totalJSHeapSize = window.performance.memory.totalJSHeapSize
-        this.usedJSHeapSize = window.performance.memory.usedJSHeapSize
-        console.log(this.jsHeapSizeLimit)
-        // f(); 
-      }, 1000)
-      // 清除监测
-      var removeMemory = document.getElementById('removeMemory');
-      removeMemory.onclick = function(){
-        clearInterval(t);
-      }
-    },
   },
 };
 </script>
 <style scoped>
 .hello-independ {
   display: inline-block;
-  width: 500px;
+  width: 200px;
   /* padding: 10px; */
   text-align: center;
   background-color: white;
diff --git a/Web/packages/web/src/plugins/demo-single-plugin/index.js b/Web/packages/web/src/plugins/demo-single-plugin/index.js
index 2f2720b7f..45a2d8e95 100644
--- a/Web/packages/web/src/plugins/demo-single-plugin/index.js
+++ b/Web/packages/web/src/plugins/demo-single-plugin/index.js
@@ -1,9 +1,10 @@
 import IndependPluginDemo from './IndependPluginDemo.vue'
-import { IndependPlugin } from '@dokit/web-core'
+import {IndependPlugin} from '@dokit/web-core'
 
 export default new IndependPlugin({
-    nameZh: '内存实时监测',
-    name: 'test',
-    icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
-    component: IndependPluginDemo
-})
\ No newline at end of file
+  nameZh: '独立插件',
+  name: 'test',
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
+  component: IndependPluginDemo
+})
+
diff --git a/Web/packages/web/src/plugins/memory-monitoring/IndependPluginDemo.vue b/Web/packages/web/src/plugins/memory-monitoring/IndependPluginDemo.vue
new file mode 100644
index 000000000..df791b220
--- /dev/null
+++ b/Web/packages/web/src/plugins/memory-monitoring/IndependPluginDemo.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="hello-independ" v-dragable>
+    <div style="font-weight: bold; font-size: 30px; font-style: italic">
+      实时内存监测
+    </div>
+    <!-- jsHeapSizeLimit 上下文内可用堆的最大体积，以字节计算。
+         totalJSHeapSize 已分配的堆体积，以字节计算。 
+         usedJSHeapSize  当前 JS 堆活跃段（segment）的体积，以字节计算。-->
+    <div>上下文内可用堆的最大体积：{{jsHeapSizeLimit}}字节</div>
+    <div>已分配的堆体积：{{totalJSHeapSize}}字节</div>
+    <div>当前JS堆活跃段的体积：{{usedJSHeapSize}}字节</div>
+    <div @click="remove" id='removeMemory' style="background-color: red; color:white;margin-top:10px">
+      点击移除当前独立插件
+    </div>
+  </div>
+</template>
+<script>
+import { dragable } from "@dokit/web-utils";
+import { removeIndependPlugin } from "@dokit/web-core";
+
+export default {
+  directives: {
+    dragable,
+  },
+  data() {
+    return {
+      jsHeapSizeLimit: 0,
+      totalJSHeapSize: 0,
+      usedJSHeapSize: 0
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    this.showMemory()
+  },
+  methods: {
+    remove() {
+      removeIndependPlugin("test");
+    },
+    showMemory() {
+      // 功能检验（向document中加入一万个div）
+      function f() {
+        var date = +new Date();
+        var str = [];
+        for (var i = 1; i <= 10000; i++) {
+            str.push('<div></div>');
+        }
+        str = str.join('');
+        document.body.innerHTML = str;
+        var date1 = +new Date();
+        // console.log(date1 - date);
+      }
+      // 内存监测
+      this.jsHeapSizeLimit = window.performance.memory.jsHeapSizeLimit
+      this.totalJSHeapSize = window.performance.memory.totalJSHeapSize
+      this.usedJSHeapSize = window.performance.memory.usedJSHeapSize
+      var t = setInterval(() => {
+        this.jsHeapSizeLimit = window.performance.memory.jsHeapSizeLimit
+        this.totalJSHeapSize = window.performance.memory.totalJSHeapSize
+        this.usedJSHeapSize = window.performance.memory.usedJSHeapSize
+        console.log(this.jsHeapSizeLimit)
+        // f(); 
+      }, 1000)
+      // 清除监测
+      var removeMemory = document.getElementById('removeMemory');
+      removeMemory.onclick = function(){
+        clearInterval(t);
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.hello-independ {
+  display: inline-block;
+  width: 500px;
+  /* padding: 10px; */
+  text-align: center;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 0 8px 12px #ebedf0;
+  overflow: hidden;
+  border: 1px solid red;
+}
+</style>
\ No newline at end of file
diff --git a/Web/packages/web/src/plugins/memory-monitoring/index.js b/Web/packages/web/src/plugins/memory-monitoring/index.js
new file mode 100644
index 000000000..2f2720b7f
--- /dev/null
+++ b/Web/packages/web/src/plugins/memory-monitoring/index.js
@@ -0,0 +1,9 @@
+import IndependPluginDemo from './IndependPluginDemo.vue'
+import { IndependPlugin } from '@dokit/web-core'
+
+export default new IndependPlugin({
+    nameZh: '内存实时监测',
+    name: 'test',
+    icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
+    component: IndependPluginDemo
+})
\ No newline at end of file