feat: 完成storage相关功能 & 修复功能跳转bug

Web/packages/web/src/common/Card.vue

@@ -15,16 +15,19 @@ export default {
 </script>
 <style lang="less">
 .dokit-card {
-  border-radius: 10px;
+  background-color: #d9e1e8;
+  border-radius: 5px;
   box-shadow: 0 8px 12px #ebedf0;
   overflow: hidden;
   .dokit-card__header{
-    background-color: #337cc4;
-    padding: 10px;
+    background-color: #2b90d9;
+    padding: 5px;
     color: #fff;
+    font-weight: bold;
+    font-style: italic;
   }
   .dokit-card__body{
-    padding: 10px;
+    padding: 5px;
   }
 }
 </style>
\ 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 Storage from './plugins/storage/index'
 import DemoPlugin from './plugins/demo-plugin/index'
 import DemoIndependPlugin from './plugins/demo-single-plugin/index'
 import H5DoorPlugin from './plugins/h5-door/index'
 import HelloWorld from './components/ToolHelloWorld'
+import {IndependPlugin, RouterPlugin} from '@dokit/web-core'
+
 export const BasicFeatures = {
   title: '常用工具',
-  list: [Console, AppInfo, DemoPlugin, DemoIndependPlugin, H5DoorPlugin]
+  list: [Console, AppInfo, Storage, DemoPlugin, DemoIndependPlugin, H5DoorPlugin]
 }
 
 export const DokitFeatures = {
   title: '平台功能',
-  list: [{
+  list: [new RouterPlugin({
     nameZh: 'Mock数据',
     name: 'mock',
     icon: 'https://pt-starimg.didistatic.com/static/starimg/img/aDn77poRDB1618997545078.png',
     component: HelloWorld
-  }]
+  })]
 }
 
 export const UIFeatures = {
   title: '视觉功能',
-  list: [{
-    nameZh: '取色器',
-    name: 'color-selector',
-    icon: 'https://pt-starimg.didistatic.com/static/starimg/img/QYUvEE8FnN1618997536890.png',
-    component: HelloWorld
-  }, {
+  list: [new RouterPlugin({
     nameZh: '对齐标尺',
     name: 'align-ruler',
     icon: 'https://pt-starimg.didistatic.com/static/starimg/img/a5UTjMn6lO1618997535798.png',
     component: HelloWorld
-  }, {
+  }), 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]
\ No newline at end of file

Web/packages/web/src/plugins/app-info/ToolAppInfo.vue

@@ -2,32 +2,32 @@
   <div class="app-info-container">
     <div class="info-wrapper">
       <Card title="Page Info">
-        <table border="1">
+        <table>
           <tr>
-            <td>UA</td>
-            <td>{{ua}}</td>
+            <td class="key">UA</td>
+            <td class="value">{{ua}}</td>
           </tr>
           <tr>
-            <td>URL</td>
-            <td>{{url}}</td>
+            <td class="key">URL</td>
+            <td class="value">{{url}}</td>
           </tr>
         </table>
       </Card>
     </div>
-    <div class="info-wrapper">
+    <div class="info-wrapper" style="margin-top:20px">
       <Card title="Device Info">
-        <table border="1">
+        <table>
           <tr>
-            <td>设备缩放比</td>
-            <td>{{ratio}}</td>
+            <td class="key">设备缩放比</td>
+            <td class="value">{{ratio}}</td>
           </tr>
           <tr>
-            <td>screen</td>
-            <td>{{screen.width}}X{{screen.height}}</td>
+            <td class="key">screen</td>
+            <td>{{screen.width}} X {{screen.height}}</td>
           </tr>
           <tr>
-            <td>viewport</td>
-            <td>{{viewport.width}}X{{viewport.height}}</td>
+            <td class="key">viewport</td>
+            <td>{{viewport.width}} X {{viewport.height}}</td>
           </tr>
         </table>
       </Card>
@@ -62,7 +62,10 @@ export default {
   overflow: hidden;
 }
 .info-wrapper{
-    margin: 20px 20px 0 20px;
+    margin: 5px 5px 0 5px;
+    .key{
+      font-weight: bold;
+    }
   }
   table{
     border-color: #eee;

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

@@ -4,7 +4,7 @@ import {RouterPlugin} from '@dokit/web-core'
 export default new RouterPlugin({
   nameZh: '测试',
   name: 'test',
-  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/6WONqJCVks1621926657356.png',
   component: HelloWorld
 })
 

Web/packages/web/src/plugins/storage/cookie.vue

+<template>
+  <div style="margin-top:20px;">
+    <InfoCard :infoMap="storageMap" title="Cookie" @refresh="updateList" @clear="clear" @removeItem="removeItem"></InfoCard>
+  </div>
+</template>
+<script>
+import InfoCard from '@common/info-card'
+import { clearCookie, removeCookieItem, getCookieMap } from './js/storage'
+
+export default {
+  components: {
+    InfoCard
+  },
+  data () {
+    return {
+      storageMap: {}
+    }
+  },
+  created() {
+    this.updateList()
+  },
+  methods: {
+    updateList() {
+      this.storageMap = getCookieMap()
+    },
+    removeItem(key) {
+      removeCookieItem(key)
+      this.updateList()
+    },
+    clear() {
+      clearCookie()
+      this.updateList()
+    }
+  },
+}
+</script>
+<style lang="">
+  
+</style>
\ No newline at end of file

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

+import Storage from './main.vue'
+// import {overrideConsole,restoreConsole} from './js/console'
+import {getGlobalData, RouterPlugin} from '@dokit/web-core'
+
+export default new RouterPlugin({
+  name: 'Storage',
+  nameZh: '存储',
+  component: Storage,
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/LM74BpA9bS1621926286444.png',
+  onLoad(){},
+  onUnload(){}
+})
\ No newline at end of file

Web/packages/web/src/plugins/storage/js/storage.js

+export const overrideLocalStorage = function(callback) {
+  const originSetItem = localStorage.setItem.bind(localStorage);
+  localStorage.setItem = function (key, value) {
+    // if (!isStr(key) || !isStr(value)) return;
+    originSetItem(key, value);
+    callback({type: 'setItem'})
+  };
+
+  const originRemoveItem = localStorage.removeItem.bind(localStorage);
+  localStorage.removeItem = function (key) {
+    originRemoveItem(key);
+    callback({type: 'removeItem'})
+  };
+
+  const originClear = localStorage.clear.bind(localStorage);
+  localStorage.clear = function (key) {
+    originClear();
+    callback({type: 'clear'})
+  };
+}
+
+export const overrideSessionStorage = function(callback) {
+  const originSetItem = sessionStorage.setItem.bind(sessionStorage);
+  sessionStorage.setItem = function (key, value) {
+    // if (!isStr(key) || !isStr(value)) return;
+    originSetItem(key, value);
+    callback({type: 'setItem'})
+  };
+
+  const originRemoveItem = sessionStorage.removeItem.bind(sessionStorage);
+  sessionStorage.removeItem = function (key) {
+    originRemoveItem(key);
+    callback({type: 'removeItem'})
+  };
+
+  const originClear = sessionStorage.clear.bind(sessionStorage);
+  sessionStorage.clear = function (key) {
+    originClear();
+    callback({type: 'clear'})
+  };
+}
+
+export const clearCookie = function () {
+  let cookieMap = getCookieMap()
+  for (const key in cookieMap) {
+    if (cookieMap.hasOwnProperty.call(cookieMap, key)) {
+      removeCookieItem(key)
+    }
+  }
+}
+
+export const removeCookieItem = function (key) {
+  document.cookie = encodeURIComponent(key) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}
+
+export const getCookieMap = function (params) {
+  const cookieMap = Object.create({})
+  const cookie = document.cookie;
+  if (cookie.trim() !== '') {
+    cookie.split(';').forEach(ele => {
+      ele = ele.split('=');
+      const key = ele.shift().trim();
+      ele = decodeURIComponent(ele.join('='));
+      cookieMap[key] = ele
+    })
+  }
+
+  return cookieMap;
+}
+

Web/packages/web/src/plugins/storage/local-storage.vue

+<template>
+  <div>
+    <InfoCard :infoMap="storageMap" title="localStorage" @refresh="updateList" @clear="clear" @removeItem="removeItem"></InfoCard>
+  </div>
+</template>
+<script>
+import InfoCard from '@common/info-card'
+import {overrideLocalStorage} from './js/storage'
+
+export default {
+  components: {
+    InfoCard
+  },
+  data () {
+    return {
+      storageMap: {}
+    }
+  },
+  created() {
+    overrideLocalStorage(() => {
+      this.updateList()
+    });
+    this.updateList()
+  },
+  methods: {
+    updateList() {
+      let storageMap = {...window.localStorage}
+      // 有一些属性不需要展示
+      for (const key in storageMap) {
+        if (Object.hasOwnProperty.call(storageMap, key)) {
+          if (~key.indexOf('dokit') || typeof storageMap[key] !== 'string') delete storageMap[key]
+        }
+      }
+      this.storageMap = storageMap
+    },
+    removeItem(key) {
+      window.localStorage.removeItem(key)
+    },
+    clear() {
+      window.localStorage.clear()
+    }
+  },
+}
+</script>
+<style lang="">
+  
+</style>
\ No newline at end of file

Web/packages/web/src/plugins/storage/main.vue

+<template>
+  <div class="storage-plugin">
+    <localStorage></localStorage>
+    <sessionStorage></sessionStorage>
+    <cookie></cookie>
+  </div>
+</template>
+<script>
+import localStorage from './local-storage';
+import sessionStorage from './session-storage';
+import cookie from './cookie';
+
+export default {
+  components: {
+    localStorage,
+    sessionStorage,
+    cookie
+  }
+}
+</script>
+<style>
+.storage-plugin{
+  padding: 5px;
+}
+</style>
\ No newline at end of file

Web/packages/web/src/plugins/storage/session-storage.vue

+<template>
+  <div style="margin-top:20px;">
+    <InfoCard :infoMap="storageMap" title="sessionStorage" @refresh="updateList" @clear="clear" @removeItem="removeItem"></InfoCard>
+  </div>
+</template>
+<script>
+import InfoCard from '@common/info-card'
+import {overrideSessionStorage} from './js/storage'
+
+export default {
+  components: {
+    InfoCard
+  },
+  data () {
+    return {
+      storageMap: {}
+    }
+  },
+  created() {
+    overrideSessionStorage(() => {
+      this.updateList()
+    });
+    this.updateList()
+  },
+  methods: {
+    updateList() {
+      let storageMap = {...window.sessionStorage}
+      // 有一些属性不需要展示
+      for (const key in storageMap) {
+        if (Object.hasOwnProperty.call(storageMap, key)) {
+          if (~key.indexOf('dokit') || typeof storageMap[key] !== 'string') delete storageMap[key]
+        }
+      }
+      this.storageMap = storageMap
+    },
+    removeItem(key) {
+      window.sessionStorage.removeItem(key)
+    },
+    clear() {
+      window.sessionStorage.clear()
+    }
+  },
+}
+</script>
+<style lang="">
+  
+</style>
\ No newline at end of file