feat: 完善log & 完成独立插件功能

Web/packages/core/dist/index.js

-import { pushScopeId, popScopeId, openBlock, createBlock, withDirectives, createVNode, vShow, toDisplayString, createCommentVNode, withScopeId, resolveComponent, KeepAlive, resolveDynamicComponent, reactive, resolveDirective, Fragment, renderList, shallowRef, unref, createApp } from 'vue';
+import { pushScopeId, popScopeId, openBlock, createBlock, withDirectives, createVNode, vShow, toDisplayString, createCommentVNode, withScopeId, resolveComponent, KeepAlive, resolveDynamicComponent, toRaw, Fragment, renderList, reactive, resolveDirective, shallowRef, unref, createApp } from 'vue';
 
 /**
  * 拖拽指令 v-dragable
@@ -132,7 +132,7 @@ const _withId$6 = /*#__PURE__*/withScopeId("data-v-29d70086");
 
 pushScopeId("data-v-29d70086");
 const _hoisted_1$6 = { class: "bar" };
-const _hoisted_2$4 = /*#__PURE__*/createVNode("span", { class: "bar-back-btn" }, "返回", -1 /* HOISTED */);
+const _hoisted_2$3 = /*#__PURE__*/createVNode("span", { class: "bar-back-btn" }, "返回", -1 /* HOISTED */);
 const _hoisted_3$2 = { class: "bar-title" };
 const _hoisted_4$1 = { class: "bar-title-text" };
 popScopeId();
@@ -147,7 +147,7 @@ const render$6 = /*#__PURE__*/_withId$6((_ctx, _cache, $props, $setup, $data, $o
         class: "bar-back-icon",
         src: $data.icon
       }, null, 8 /* PROPS */, ["src"]),
-      _hoisted_2$4
+      _hoisted_2$3
     ], 512 /* NEED_PATCH */), [
       [vShow, $props.canBack]
     ]),
@@ -220,7 +220,7 @@ const _withId$5 = /*#__PURE__*/withScopeId("data-v-8dfbe6e6");
 
 pushScopeId("data-v-8dfbe6e6");
 const _hoisted_1$5 = { class: "container" };
-const _hoisted_2$3 = { class: "router-container" };
+const _hoisted_2$2 = { class: "router-container" };
 popScopeId();
 
 const render$5 = /*#__PURE__*/_withId$5((_ctx, _cache, $props, $setup, $data, $options) => {
@@ -231,7 +231,7 @@ const render$5 = /*#__PURE__*/_withId$5((_ctx, _cache, $props, $setup, $data, $o
       title: $options.title,
       canBack: $options.canBack
     }, null, 8 /* PROPS */, ["title", "canBack"]),
-    createVNode("div", _hoisted_2$3, [
+    createVNode("div", _hoisted_2$2, [
       (openBlock(), createBlock(KeepAlive, null, [
         (openBlock(), createBlock(resolveDynamicComponent($options.component)))
       ], 1024 /* DYNAMIC_SLOTS */))
@@ -239,7 +239,7 @@ const render$5 = /*#__PURE__*/_withId$5((_ctx, _cache, $props, $setup, $data, $o
   ]))
 });
 
-var css_248z$5 = ".container[data-v-8dfbe6e6] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 100px;\n  bottom: 0;\n  background-color: #f5f6f7;\n  display: flex;\n  flex-direction: column;\n  z-index: 99;\n  border-radius: 10px 10px 0 0;\n}\n.router-container[data-v-8dfbe6e6] {\n  margin-top: 5px;\n  background-color: white;\n  flex: 1;\n  overflow-y: scroll;\n}\n";
+var css_248z$5 = ".container[data-v-8dfbe6e6] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 100px;\n  bottom: 0;\n  background-color: #f5f6f7;\n  display: flex;\n  flex-direction: column;\n  z-index: 999;\n  border-radius: 10px 10px 0 0;\n}\n.router-container[data-v-8dfbe6e6] {\n  margin-top: 5px;\n  background-color: white;\n  flex: 1;\n  overflow-y: scroll;\n}\n";
 styleInject(css_248z$5);
 
 script$5.render = render$5;
@@ -252,39 +252,43 @@ var script$4 = {
     return {}
   },
   computed:{
-    singlePlugins(){
-      return this.$store.state.singlePlugins
+    independPlugins(){
+      return this.$store.state.independPlugins
     }
   },
   created(){
     console.log(this.$router);
+  },
+  methods: {
+    toRaw: toRaw
   }
 };
 
-const _withId$4 = /*#__PURE__*/withScopeId("data-v-1e3e6168");
+const _withId$4 = /*#__PURE__*/withScopeId("data-v-53a49d15");
 
-pushScopeId("data-v-1e3e6168");
+pushScopeId("data-v-53a49d15");
 const _hoisted_1$4 = {
   class: "container",
-  style: {"z-index":"999"}
+  style: {"z-index":"998"}
 };
-const _hoisted_2$2 = /*#__PURE__*/createVNode("div", { class: "plugin-container" }, [
-  /*#__PURE__*/createVNode("div", null, " I Am Single Container! ")
-], -1 /* HOISTED */);
 popScopeId();
 
 const render$4 = /*#__PURE__*/_withId$4((_ctx, _cache, $props, $setup, $data, $options) => {
   return (openBlock(), createBlock("div", _hoisted_1$4, [
-    _hoisted_2$2
+    (openBlock(true), createBlock(Fragment, null, renderList($options.independPlugins, (plugin) => {
+      return (openBlock(), createBlock(resolveDynamicComponent($options.toRaw(plugin.component)), {
+        key: plugin.name
+      }))
+    }), 128 /* KEYED_FRAGMENT */))
   ]))
 });
 
-var css_248z$4 = ".container[data-v-1e3e6168] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n}\n.plugin-container[data-v-1e3e6168] {\n  background-color: #ffffff;\n  box-shadow: 1px 1px 2px #333333;\n}\n";
+var css_248z$4 = ".container[data-v-53a49d15] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n}\n";
 styleInject(css_248z$4);
 
 script$4.render = render$4;
-script$4.__scopeId = "data-v-1e3e6168";
-script$4.__file = "src/components/single-container.vue";
+script$4.__scopeId = "data-v-53a49d15";
+script$4.__file = "src/components/independ-container.vue";
 
 const storeKey = 'store';
 /**
@@ -317,7 +321,7 @@ class Store{
 const store = new Store({
   state: {
     showContainer: false,
-    singlePlugins: [],
+    independPlugins: [],
     features: []
   }
 });
@@ -340,19 +344,27 @@ function toggleContainer(flag){
   }
 }
 
-function pushContainer(plugin){
+function addIndependPlugin(plugin){
   // Unique Container
-  store.state.singlePlugins.push(plugin);
-  console.log(store.state.singlePlugins);
+  let index = store.state.independPlugins.findIndex(ele => {
+    return ele.name === plugin.name
+  });
+  if (index > -1) return
+  store.state.independPlugins.push(plugin);
 }
-function popContainer(){
-  store.state.singlePlugins.pop();
+
+function removeIndependPlugin(name){
+  let index = store.state.independPlugins.findIndex(ele => {
+    return ele.name === name
+  });
+  if (index === -1) return
+  store.state.independPlugins.splice(index, 1);
 }
 
 var script$3 = {
   components: {
     RouterContainer: script$5,
-    SingleContainer: script$4
+    IndependContainer: script$4
   },
   directives: {
     dragable,
@@ -366,6 +378,9 @@ var script$3 = {
     },
     showContainer(){
       return this.state.showContainer
+    },
+    independPlugins(){
+      return this.$store.state.independPlugins
     }
   },
   methods: {
@@ -386,6 +401,7 @@ popScopeId();
 
 const render$3 = /*#__PURE__*/_withId$3((_ctx, _cache, $props, $setup, $data, $options) => {
   const _component_router_container = resolveComponent("router-container");
+  const _component_independ_container = resolveComponent("independ-container");
   const _directive_dragable = resolveDirective("dragable");
 
   return (openBlock(), createBlock("div", _hoisted_1$3, [
@@ -405,7 +421,9 @@ const render$3 = /*#__PURE__*/_withId$3((_ctx, _cache, $props, $setup, $data, $o
     withDirectives(createVNode(_component_router_container, null, null, 512 /* NEED_PATCH */), [
       [vShow, $options.showContainer]
     ]),
-    createCommentVNode(" <single-container></single-container> ")
+    withDirectives(createVNode(_component_independ_container, null, null, 512 /* NEED_PATCH */), [
+      [vShow, $options.independPlugins.length]
+    ])
   ]))
 });
 
@@ -566,8 +584,9 @@ var script = {
             name: item.name
           });
           break;
-        case "SinglePlugin":
-          pushContainer(item);
+        case "IndependPlugin":
+          addIndependPlugin(item);
+          this.$store.state.showContainer = false;
           break;
       }
     }
@@ -758,8 +777,8 @@ class RouterPlugin extends BasePlugin{
 /**
  * 独立容器的插件
  */
-class SinglePlugin extends BasePlugin{
-  type = "SinglePlugin"
+class IndependPlugin extends BasePlugin{
+  type = "IndependPlugin"
   constructor(options){
     super(options);
   }
@@ -769,8 +788,8 @@ const isRouterPlugin =  function(plugin){
   return plugin instanceof RouterPlugin
 };
 
-const isSinglePlugin =  function(plugin){
-  return plugin instanceof SinglePlugin
+const isIndependPlugin =  function(plugin){
+  return plugin instanceof IndependPlugin
 };
 
 class Dokit{
@@ -814,4 +833,4 @@ var index = {
 };
 
 export default index;
-export { BasePlugin, Dokit, RouterPlugin, SinglePlugin, getGlobalData, isRouterPlugin, isSinglePlugin, noop, popContainer, pushContainer, toggleContainer, updateGlobalData };
+export { BasePlugin, Dokit, IndependPlugin, RouterPlugin, addIndependPlugin, getGlobalData, isIndependPlugin, isRouterPlugin, noop, removeIndependPlugin, toggleContainer, updateGlobalData };

Web/packages/core/src/common/js/feature.js

@@ -38,8 +38,8 @@ export class RouterPlugin extends BasePlugin{
 /**
  * 独立容器的插件
  */
-export class SinglePlugin extends BasePlugin{
-  type = "SinglePlugin"
+export class IndependPlugin extends BasePlugin{
+  type = "IndependPlugin"
   constructor(options){
     super(options)
   }
@@ -49,6 +49,6 @@ export const isRouterPlugin =  function(plugin){
   return plugin instanceof RouterPlugin
 }
 
-export const isSinglePlugin =  function(plugin){
-  return plugin instanceof SinglePlugin
+export const isIndependPlugin =  function(plugin){
+  return plugin instanceof IndependPlugin
 }
\ No newline at end of file

Web/packages/core/src/components/app.vue

@@ -3,20 +3,20 @@
     <div class="dokit-entry-btn" style="z-index: 10000;" v-dragable @click="toggleShowContainer"></div>
     <div class="mask" v-show="showContainer" @click="toggleContainer"></div>
     <router-container v-show="showContainer"></router-container>
-    <!-- <single-container></single-container> -->
+    <independ-container v-show="independPlugins.length"></independ-container>
   </div>
 </template>
 
 <script>
 import dragable from "@common/directives/dragable";
 import RouterContainer from './router-container';
-import SingleContainer from './single-container';
+import IndependContainer from './independ-container';
 import {toggleContainer} from '@store/index';
 
 export default {
   components: {
     RouterContainer,
-    SingleContainer
+    IndependContainer
   },
   directives: {
     dragable,
@@ -30,6 +30,9 @@ export default {
     },
     showContainer(){
       return this.state.showContainer
+    },
+    independPlugins(){
+      return this.$store.state.independPlugins
     }
   },
   methods: {

Web/packages/core/src/components/home.vue

@@ -14,7 +14,7 @@
 import TopBar from "@common/components/top-bar";
 import Card from "@common/components/card";
 import VersionCard from "@common/components/version";
-import {pushContainer} from '@store/index';
+import {addIndependPlugin} from '@store/index';
 export default {
   components: {
     TopBar,
@@ -41,8 +41,9 @@ export default {
             name: item.name
           })
           break;
-        case "SinglePlugin":
-          pushContainer(item)
+        case "IndependPlugin":
+          addIndependPlugin(item)
+          this.$store.state.showContainer = false
           break;
         default:
           break;

Web/packages/core/src/components/single-container.vue → Web/packages/core/src/components/independ-container.vue

 <template>
-  <div class="container" style="z-index: 999;">
-    <div class="plugin-container">
-      <div>
-        I Am Single Container!
-      </div>
-    </div>
+  <div class="container" style="z-index: 998;">
+    <component :is="toRaw(plugin.component)" v-for="plugin in independPlugins" :key="plugin.name"/>
   </div>
 </template>
 <script>
+// 所有独立插件共用一个容器
+import { toRaw } from 'vue';
 
 export default {
   components: {},
@@ -15,12 +13,15 @@ export default {
     return {}
   },
   computed:{
-    singlePlugins(){
-      return this.$store.state.singlePlugins
+    independPlugins(){
+      return this.$store.state.independPlugins
     }
   },
   created(){
     console.log(this.$router)
+  },
+  methods: {
+    toRaw: toRaw
   }
 }
 </script>
@@ -32,8 +33,4 @@ export default {
   bottom: 0;
   top: 0;
 }
-.plugin-container{
-  background-color: #ffffff;
-  box-shadow: 1px 1px 2px #333333;
-}
 </style>
\ No newline at end of file

Web/packages/core/src/components/router-container.vue

@@ -44,7 +44,7 @@ export default {
   background-color: #f5f6f7;
   display: flex;
   flex-direction: column;
-  z-index: 99;
+  z-index: 999;
   border-radius: 10px 10px 0 0;
 }
 .router-container{

Web/packages/core/src/store/index.js

@@ -3,7 +3,7 @@ import { Store } from "../common/js/store";
 const store = new Store({
   state: {
     showContainer: false,
-    singlePlugins: [],
+    independPlugins: [],
     features: []
   }
 })
@@ -26,13 +26,21 @@ export function toggleContainer(flag){
   }
 }
 
-export function pushContainer(plugin){
+export function addIndependPlugin(plugin){
   // Unique Container
-  store.state.singlePlugins.push(plugin)
-  console.log(store.state.singlePlugins)
+  let index = store.state.independPlugins.findIndex(ele => {
+    return ele.name === plugin.name
+  })
+  if (index > -1) return
+  store.state.independPlugins.push(plugin)
 }
-export function popContainer(){
-  store.state.singlePlugins.pop()
+
+export function removeIndependPlugin(name){
+  let index = store.state.independPlugins.findIndex(ele => {
+    return ele.name === name
+  })
+  if (index === -1) return
+  store.state.independPlugins.splice(index, 1)
 }
 
 export default store
\ No newline at end of file

Web/packages/web/src/common/directives/dragable.js

+/**
+ * 拖拽指令 v-dragable
+ * 减少外部依赖
+*/
+const INIT_VALUE = 9999
+const DEFAULT_OPACITY = 0.5
+const SAFE_BOTTOM = 50 // 底部防误触
+// TODO 拖拽事件兼容 Pc处理
+// TODO 默认初始位置为右下角
+export default {
+  mounted (el) {
+    // 初始化变量
+    el.dokitEntryLastX = INIT_VALUE
+    el.dokitEntryLastY = INIT_VALUE
+    // 初始化样式
+    el.style.position = 'fixed'
+    el.style.opacity = DEFAULT_OPACITY
+    el.dokitPositionLeft = getDefaultX(el)
+    el.dokitPositionTop = getDefaultY(el)
+    el.style.top = `${el.dokitPositionTop}px`
+    el.style.left = `${el.dokitPositionLeft}px`
+
+    // 触摸事件监听
+    el.ontouchstart = () => {
+      el.style.opacity = 1
+    }
+
+    el.ontouchmove = (e) => {
+      e.preventDefault()
+      
+      if (el.dokitEntryLastX === INIT_VALUE) {
+        el.dokitEntryLastX = e.touches[0].clientX
+        el.dokitEntryLastY = e.touches[0].clientY
+        return
+      }
+
+      el.dokitPositionTop += (e.touches[0].clientY - el.dokitEntryLastY)
+      el.dokitPositionLeft += (e.touches[0].clientX - el.dokitEntryLastX)
+      el.dokitEntryLastX = e.touches[0].clientX
+      el.dokitEntryLastY = e.touches[0].clientY
+
+      el.style.top = `${getAvailableTop(el)}px`
+      el.style.left = `${getAvailableLeft(el)}px`
+    }
+
+    el.ontouchend = (e) => {
+      setTimeout(() => {
+        if (el.dokitPositionLeft < 0) {
+          el.dokitPositionLeft = 0
+          el.style.left = `${el.dokitPositionLeft}px`
+        } else if (el.dokitPositionLeft + e.target.clientWidth > window.screen.availWidth) {
+          el.dokitPositionLeft = window.screen.availWidth - e.target.clientWidth
+          el.style.left = `${el.dokitPositionLeft}px`
+
+        }
+        
+        if (el.dokitPositionTop < 0) {
+          el.dokitPositionTop = 0
+          el.style.top = `${el.dokitPositionTop}px`
+
+        } else if (el.dokitPositionTop + e.target.clientHeight + SAFE_BOTTOM > window.screen.availHeight) {
+          el.dokitPositionTop = window.screen.availHeight - e.target.clientHeight - SAFE_BOTTOM
+          el.style.top = `${el.dokitPositionTop}px`
+
+        }
+        localStorage.setItem('dokitPositionTop', el.dokitPositionTop);
+        localStorage.setItem('dokitPositionLeft', el.dokitPositionLeft);
+      }, 100)
+      el.dokitEntryLastX = INIT_VALUE
+      el.dokitEntryLastY = INIT_VALUE
+      el.style.opacity = 0.5
+    }
+  }
+}
+
+function getDefaultX(el){
+  let defaultX = Math.round(window.outerWidth/2)
+  return localStorage.getItem('dokitPositionLeft') ? parseInt(localStorage.getItem('dokitPositionLeft')) : defaultX
+}
+function getDefaultY(el){
+  let defaultY = Math.round(window.outerHeight/2)
+  return localStorage.getItem('dokitPositionTop') ? parseInt(localStorage.getItem('dokitPositionTop')) : defaultY
+}
+function getAvailableLeft(el){
+  return standardNumber(el.dokitPositionLeft, window.outerWidth - el.clientWidth)
+}
+function getAvailableTop(el){
+  return standardNumber(el.dokitPositionTop, window.outerHeight - el.clientHeight)
+}
+function standardNumber(number, max){
+  if(number < 0){
+    return 0
+  }
+  if(number >= max){
+    return max
+  }
+  return number
+}
\ No newline at end of file

Web/packages/web/src/feature.js

 import Console from './plugins/console/index'
 import AppInfo from './plugins/app-info/index'
 import DemoPlugin from './plugins/demo-plugin/index'
-import DemoSinglePlugin from './plugins/demo-single-plugin/index'
+import DemoIndependPlugin from './plugins/demo-single-plugin/index'
 import H5DoorPlugin from './plugins/h5-door/index'
 import HelloWorld from './components/ToolHelloWorld'
 export const BasicFeatures = {
   title: '常用工具',
-  list: [Console, AppInfo, DemoPlugin, DemoSinglePlugin, H5DoorPlugin]
+  list: [Console, AppInfo, DemoPlugin, DemoIndependPlugin, H5DoorPlugin]
 }
 
 export const DokitFeatures = {

Web/packages/web/src/plugins/console/css/var.less

@@ -9,4 +9,5 @@
 @tap-font-size: 16px;
 @tap-font-color: #333333;
 
+// error
 

Web/packages/web/src/plugins/console/log-container.vue

@@ -5,6 +5,7 @@
       :key="index"
       :value="log.value"
       :type="log.type"
+      :logType="log.name"
     ></log-item>
   </div>
 </template>

Web/packages/web/src/plugins/console/log-item.vue

 <template>
-  <div class="log-ltem">
+  <div class="log-ltem" :class="logType">
     <div class="log-preview" v-html="logPreview" @click="toggleDetail"></div>
-    <div v-if="showDetail && typeof value === 'object'">
+    <div v-if="canShowDetail">
       <div class="list-item" v-for="(key, index) in value" :key="index">
         <Detail :detailValue="key" :detailIndex="index"></Detail>
       </div>
@@ -12,15 +12,15 @@
 import { getDataType, getDataStructureStr } from '../../assets/util'
 import Detail from './log-detail'
 
-const DATATYPE_NOT_DISPLAY = ['Number', 'String', 'Boolean']
-
+const DATATYPE_NOT_DISPLAY = ['Number', 'String', 'Boolean', 'Undefined', 'Null']
 export default {
   components: {
     Detail
   },
   props: {
     type: [Number],
-    value: [String, Number, Object]
+    value: [String, Number, Object],
+    logType: [String]
   },
   data () {
     return {
@@ -30,16 +30,48 @@ export default {
   computed: {
     logPreview () {
       let dataType = ''
+      let func = null
       let html = `<div>`
-      this.value.forEach(arg => {
-        dataType = getDataType(arg)
-        if (DATATYPE_NOT_DISPLAY.indexOf(dataType) === -1) {
-          html += `<span class="data-type">${dataType}</span>`
+      if (this.logType === 'log' || this.logType === 'info') {
+        func = arg => {
+          dataType = getDataType(arg)
+          if (DATATYPE_NOT_DISPLAY.indexOf(dataType) === -1) {
+            html += `<span class="data-type">${dataType}</span>`
+          }
+          html += `<span class="data-structure">${getDataStructureStr(arg, true)}</span>`
+        }
+        // this.value.forEach(arg => {
+        //   dataType = getDataType(arg)
+        //   if (DATATYPE_NOT_DISPLAY.indexOf(dataType) === -1) {
+        //     html += `<span class="data-type">${dataType}</span>`
+        //   }
+        //   html += `<span class="data-structure">${getDataStructureStr(arg, true)}</span>`
+        // });
+      } else if (this.logType === 'error' || this.logType === 'warn') {
+        func = arg => {
+          if (arg.stack) {
+            html += `<span style="white-space: pre-wrap;">${arg.stack}</span>`
+          } else {
+            dataType = getDataType(arg)
+            if (DATATYPE_NOT_DISPLAY.indexOf(dataType) === -1) {
+              html += `<span class="data-type">${dataType}</span>`
+            }
+            html += `<span class="data-structure">${getDataStructureStr(arg, true)}</span>`
+          }
         }
-        html += `<span class="data-structure">${getDataStructureStr(arg, true)}</span>`
-      });
+      } else {
+        
+      }
+      
+      this.value.forEach(func);
+
       html += `</div>`
       return html
+    },
+    canShowDetail () {
+      return this.showDetail 
+        && typeof this.value === 'object'
+        && !this.value.stack
     }
   },
   methods: {
@@ -52,10 +84,58 @@ export default {
 <style lang="less">
   .log-ltem{
     padding: 5px;
+    padding-left: 20px;
     border-top: 1px solid #eee;
     text-align: left;
     font-size: 12px;
   }
+  .log{
+    
+  }
+  .info{
+    background-color: #ECF1F7;
+    position: relative;
+    &::before{
+      content:"";
+      background:url("https://pt-starimg.didistatic.com/static/starimg/img/M3nz7HYPH21621412737959.png") no-repeat;
+      background-size: 10px 10px;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 7px;
+      left: 8px;
+    }
+  }
+  .warn{
+    background-color: #FFFBE4;
+    color: #5C3C01;
+    position: relative;
+    &::before{
+      content:"";
+      background:url("https://pt-starimg.didistatic.com/static/starimg/img/39hzJzObhZ1621411397522.png") no-repeat;
+      background-size: 10px 10px;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 7px;
+      left: 8px;
+    }
+  }
+  .error{
+    background-color: #FEF0F0;
+    color: #FF161A;
+    position: relative;
+    &::before{
+      content:"";
+      background:url("https://pt-starimg.didistatic.com/static/starimg/img/z6EndYs29d1621411397532.png") no-repeat;
+      background-size: 10px 10px;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 7px;
+      left: 8px;
+    }
+  }
   .log-ltem:first-child {
     border: none;
   }

Web/packages/web/src/plugins/console/op-command.vue

@@ -52,8 +52,13 @@ export default {
       if(!this.command){
         return
       }
-      let ret = excuteScript(this.command)
-      console.log(ret)
+      try {
+        let ret = excuteScript(this.command)
+        console.log(ret)
+      } catch (error) {
+        console.error(error)
+      }
+      this.command = ''
     }
   }
 };

Web/packages/web/src/plugins/demo-single-plugin/ToolHelloWorld.vue → Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue

 <template>
-  <div class="hello-world">
+  <div class="hello-world" v-dragable>
     <div style="font-weight:bold;font-size:30px;font-style:italic;">Hello Dokit</div>
-    <div>Demo Plugin</div>
+    <div>Demo Independ Plugin</div>
+    <div @click="remove" style="background-color: red;">点击移除当前独立插件</div>
   </div>
 </template>
 <script>
+import dragable from "@common/directives/dragable";
+import {removeIndependPlugin} from '@dokit/web-core';
+
+
 export default {
-  
+  directives: {
+    dragable,
+  },
+  methods: {
+    remove() {
+      removeIndependPlugin('test')
+    }
+  }
 }
 </script>
 <style>
 .hello-world{
+  display: inline-block;
   padding:10px;
   text-align: center;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 0 8px 12px #ebedf0;
 }
 </style>
\ No newline at end of file

Web/packages/web/src/plugins/demo-single-plugin/index.js

-import HelloWorld from './ToolHelloWorld.vue'
-import {SinglePlugin} from '@dokit/web-core'
+import IndependPluginDemo from './IndependPluginDemo.vue'
+import {IndependPlugin} from '@dokit/web-core'
 
-export default new SinglePlugin({
-  nameZh: '独立 Single',
+export default new IndependPlugin({
+  nameZh: '独立插件',
   name: 'test',
   icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
-  component: HelloWorld
+  component: IndependPluginDemo
 })
 

Web/packages/web/src/plugins/network/index.js

+import Console from './main.vue'
+import {overrideConsole,restoreConsole} from './js/console'
+import {getGlobalData, RouterPlugin} from '@dokit/web-core'
+
+export default new RouterPlugin({
+  name: 'console',
+  nameZh: '日志',
+  component: Console,
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/bZhn7wsssA1621588946807.png',
+  onLoad(){
+    console.log('Load')
+    overrideConsole(({name, type, value}) => {
+      let state = getGlobalData();
+      state.logList = state.logList || [];
+      state.logList.push({
+        type: type,
+        name: name,
+        value: value
+      });
+    });
+  },
+  onUnload(){
+    restoreConsole()
+  }
+})
\ No newline at end of file

Web/packages/web/src/plugins/network/js/request.js

+export const LogMap = {
+  0: 'All',
+  1: 'Log',
+  2: 'Info',
+  3: 'Warn',
+  4: 'Error'
+}
+export const LogEnum = {
+  ALL: 0,
+  LOG: 1,
+  INFO: 2,
+  WARN: 3,
+  ERROR: 4
+}
+
+export const ConsoleLogMap = {
+  'log': LogEnum.LOG,
+  'info': LogEnum.INFO,
+  'warn': LogEnum.WARN,
+  'error': LogEnum.ERROR
+}
+
+export const CONSOLE_METHODS = ["log", "info", 'warn', 'error']
+
+export const LogTabs = Object.keys(LogMap).map(key => {
+  return {
+    type: parseInt(key),
+    name: LogMap[key]
+  }
+})
+
+export const excuteScript = function(command){
+  let ret 
+  try{
+    ret = eval.call(window, `(${command})`)
+  }catch(e){
+    ret = eval.call(window, command)
+  }
+  return ret
+}
+
+export const origConsole = {}
+export const noop = () => {}
+export const overrideConsole = function(callback) {
+  const winConsole = window.console
+  CONSOLE_METHODS.forEach((name) => {
+    let origin = (origConsole[name] = noop)
+    if (winConsole[name]) {
+      origin = origConsole[name] = winConsole[name].bind(winConsole)
+    }
+
+    winConsole[name] = (...args) => {
+      callback({
+        name: name,
+        type: ConsoleLogMap[name],
+        value: args
+      })
+      origin(...args)
+    }
+  })
+}
+
+export const restoreConsole = function(){
+  const winConsole = window.console
+  CONSOLE_METHODS.forEach((name) => {
+    winConsole[name] = origConsole[name]
+  })
+}