From 20ab4de5e627ed1a9b16c245a016b6c1aa0df2ec Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Wed, 2 Mar 2022 17:41:12 +0800
Subject: [PATCH 1/8] feat(Log): Add new option `log.showTimestames`

---
 CHANGELOG.md                        |  5 +++++
 CHANGELOG_CN.md                     |  5 +++++
 dev/log.html                        | 10 ++++++++-
 doc/public_properties_methods.md    |  1 +
 doc/public_properties_methods_CN.md |  1 +
 package.json                        |  2 +-
 src/core/options.interface.ts       |  1 +
 src/log/log.svelte                  |  4 ++--
 src/log/log.ts                      |  4 ++++
 src/log/logRow.less                 | 23 ++++++++++++++-----
 src/log/logRow.svelte               | 34 +++++++++++++++++++++++------
 11 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9c17529..3bdfac5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.13.0-rc (2022-03-??)
+
+- `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
+
+
 ## 3.12.1 (2022-02-25)
 
 - `Fix(Core)` Fix bug that `VConsole.instance` is empty when VConsole `import` as a new module.
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index ce50f159..34afc314 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -1,5 +1,10 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.13.0-rc (2022-03-??)
+
+- `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
+
+
 ## 3.12.1 (2022-02-25)
 
 - `Fix(Core)` 修复当 VConsole 作为新模块 `import` 时 `VConsole.instance` 为空的问题。
diff --git a/dev/log.html b/dev/log.html
index c94aaa6e..f22ab13d 100644
--- a/dev/log.html
+++ b/dev/log.html
@@ -60,6 +60,7 @@
 
       <a onclick="observeMutation()" href="javascript:;" class="weui_btn weui_btn_default">Observe Mutation</a>
       <a onclick="scrolling()" href="javascript:;" class="weui_btn weui_btn_default">Scrolling</a>
+      <a onclick="showTimestamps()" href="javascript:;" class="weui_btn weui_btn_default">showTimestamps</a>
     </div>
   </div>
 </body>
@@ -69,7 +70,7 @@
 import '../dist/vconsole.min.js';
 
 window.vConsole = new window.VConsole({
-  log: { maxLogNumber: 25 },
+  log: { maxLogNumber: 25, showTimestamps: false },
   // target: '#page',
   // target: document.getElementById('page'),
   // disableLogScrolling: true,
@@ -355,4 +356,11 @@
     console.log('scrolling', n);
   }, 150);
 }
+
+let showTime = false;
+function showTimestamps() {
+  showTime = !showTime;
+  vConsole.setOption('log.showTimestamps', showTime);
+  vConsole.show();
+}
 </script>
\ No newline at end of file
diff --git a/doc/public_properties_methods.md b/doc/public_properties_methods.md
index fa21d0fd..00d01c4a 100644
--- a/doc/public_properties_methods.md
+++ b/doc/public_properties_methods.md
@@ -54,6 +54,7 @@ disableLogScrolling   | Boolean  | true     |
 theme                 | String   | true     | 'light'                                     | Theme mode, 'light' | 'dark'.
 target                | String, HTMLElement | true | `document.documentElement`           | An HTMLElement or CSS selector string to render to.
 log.maxLogNumber      | Number   | true     | 1000                                        | Overflow logs will be removed from log panels.
+log.showTimestamps    | Boolean  | true     | false                                       | Display timestamps of logs.
 network.maxNetworkNumber | Number | true    | 1000                                        | Overflow requests will be removed from Netowrk panel.
 storage.defaultStorages  | Array  | true    | ['cookies', 'localStorage', 'sessionStorage'] | Listed storage(s) will be available in Storage panel.
 
diff --git a/doc/public_properties_methods_CN.md b/doc/public_properties_methods_CN.md
index 69743deb..3f3c4b75 100644
--- a/doc/public_properties_methods_CN.md
+++ b/doc/public_properties_methods_CN.md
@@ -53,6 +53,7 @@ disableLogScrolling   | Boolean  | true     |
 theme                 | String   | true     | 'light'                                     | 主题颜色，可选值为 'light' | 'dark'。
 target                | String, HTMLElement | true | `document.documentElement`           | 挂载到的节点，可为 HTMLElement 或 CSS selector。
 log.maxLogNumber      | Number   | true     | 1000                                        | 超出数量上限的日志会被自动清除。
+log.showTimestamps    | Boolean  | true     | false                                       | 显示日志的输出时间
 log.maxNetworkNumber  | Number   | true     | 1000                                        | 超出数量上限的请求记录会被自动清除。
 storage.defaultStorages  | Array  | true    | ['cookies', 'localStorage', 'sessionStorage'] | 在 Storage 面板中要加载的 storage 类型。
 
diff --git a/package.json b/package.json
index 7056e8cf..a8f1935c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.12.1",
+  "version": "3.13.0-rc",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [
diff --git a/src/core/options.interface.ts b/src/core/options.interface.ts
index 7aea354a..2e660ecf 100644
--- a/src/core/options.interface.ts
+++ b/src/core/options.interface.ts
@@ -1,5 +1,6 @@
 export interface VConsoleLogOptions {
   maxLogNumber?: number;
+  showTimestamps?: boolean;
 }
 
 export interface VConsoleNetworkOptions {
diff --git a/src/log/log.svelte b/src/log/log.svelte
index 4be6deab..8ac0c4f5 100644
--- a/src/log/log.svelte
+++ b/src/log/log.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { isMatchedFilterText } from './logTool';
-  // import { logStore } from './log.store';
   import { VConsoleLogStore as Store } from './log.store';
   import LogRow from './logRow.svelte';
   import LogCommand from './logCommand.svelte';
@@ -11,6 +10,7 @@
   export let pluginId: string = 'default';
   export let showCmd: boolean = false;
   export let filterType: 'all' | IConsoleLogMethod = 'all';
+  export let showTimestamps: boolean = false;
 
   let isInited: boolean = false;
   let filterText: string = '';
@@ -47,7 +47,7 @@
         // filterText
         (filterText === '' || isMatchedFilterText(log, filterText)
       )}
-        <LogRow log={log} />
+        <LogRow log={log} showTimestamps={showTimestamps} />
       {/if}
     {/each}
   {:else}
diff --git a/src/log/log.ts b/src/log/log.ts
index aaf227d3..a59714b5 100644
--- a/src/log/log.ts
+++ b/src/log/log.ts
@@ -24,6 +24,7 @@ export class VConsoleLogPlugin extends VConsoleSveltePlugin {
   public onReady() {
     super.onReady();
     this.model.maxLogNumber = Number(this.vConsole.option.log?.maxLogNumber) || MAX_LOG_NUMBER;
+    this.compInstance.showTimestamps = !!this.vConsole.option.log?.showTimestamps;
   }
 
   public onRemove() {
@@ -68,6 +69,9 @@ export class VConsoleLogPlugin extends VConsoleSveltePlugin {
     if (this.vConsole.option.log?.maxLogNumber !== this.model.maxLogNumber) {
       this.model.maxLogNumber = Number(this.vConsole.option.log?.maxLogNumber) || MAX_LOG_NUMBER;
     }
+    if (!!this.vConsole.option.log?.showTimestamps !== this.compInstance.showTimestamps) {
+      this.compInstance.showTimestamps = !!this.vConsole.option.log?.showTimestamps;
+    }
   }
 }
 
diff --git a/src/log/logRow.less b/src/log/logRow.less
index a9e76fe4..3be4b1db 100644
--- a/src/log/logRow.less
+++ b/src/log/logRow.less
@@ -8,6 +8,7 @@
   border-bottom: 1px solid var(--VC-FG-3);
   word-break: break-word;
   position: relative;
+  display: flex;
 }
 
 // log type
@@ -30,28 +31,38 @@
 
 // copy icon
 .vc-logrow-icon {
-  float: right;
+  // float: right;
+  margin-left: auto;
+}
+
+// time
+.vc-log-time {
+  width: (80em / @font);
+  color: #777;
 }
 
 // repeat
-.vc-log-repeat {
-  // display: inline-block;
-  float: left;
+.vc-log-repeat i {
   margin-right: (4em / @font);
   padding: 0 (@fontSize / 2);
   color: #D7E0EF;
   background-color: #42597F;
   border-radius: (@fontSize / 1.5);
 }
-.vc-log-error .vc-log-repeat {
+.vc-log-error .vc-log-repeat i {
   color: #901818;
   background-color: var(--VC-RED);
 }
-.vc-log-warn .vc-log-repeat {
+.vc-log-warn .vc-log-repeat i {
   color: #987D20;
   background-color: #F4BD02;
 }
 
+// content
+.vc-log-content {
+  flex: 1;
+}
+
 // command input & output
 .vc-log-input,
 .vc-log-output {
diff --git a/src/log/logRow.svelte b/src/log/logRow.svelte
index 80807fda..13dbb8c3 100644
--- a/src/log/logRow.svelte
+++ b/src/log/logRow.svelte
@@ -9,10 +9,27 @@
   import type { IVConsoleLog } from './log.model';
 
   export let log: IVConsoleLog;
+  export let showTimestamps: boolean = false;
 
-  // $: {
-  //   (window as any)._vcOrigConsole.log('logRow update', log._id, ...log.data);
-  // }
+  let isInited: boolean = false;
+  let logTime: string = '';
+
+  const pad = (num, size) => {
+    const s = '000' + num;
+    return s.substring(s.length - size);
+  };
+
+  $: {
+    // (window as any)._vcOrigConsole.log('logRow update', log._id, ...log.data);
+    if (!isInited) {
+      isInited = true;
+    }
+
+    if (showTimestamps && logTime === '') {
+      const d = new Date(log.date);
+      logTime = pad(d.getHours(), 2) + ':' + pad(d.getMinutes(), 2) + ':' + pad(d.getSeconds(), 2) + ':' + pad(d.getMilliseconds(), 3);
+    }
+  }
 
   onMount(() => {
     Style.use();
@@ -46,11 +63,11 @@
     class:vc-log-input={log.cmdType === 'input'}
     class:vc-log-output={log.cmdType === 'output'}
   >
-    <div class="vc-logrow-icon">
-      <IconCopy handler={onTapCopy} />
-    </div>
+    {#if showTimestamps}
+      <div class="vc-log-time">{logTime}</div>
+    {/if}
     {#if log.repeated}
-      <div class="vc-log-repeat">{log.repeated}</div>
+      <div class="vc-log-repeat"><i>{log.repeated}</i></div>
     {/if}
     <div class="vc-log-content">
       {#each log.data as logData, i (i)}
@@ -61,5 +78,8 @@
         {/if}
       {/each}
     </div>
+    <div class="vc-logrow-icon">
+      <IconCopy handler={onTapCopy} />
+    </div>
   </div>
 {/if}

From 882d2bb98ddbd6ae9a9e8d683b683bb69558495e Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Fri, 4 Mar 2022 19:14:50 +0800
Subject: [PATCH 2/8] fix(Core): Use polyfill `click` event to prevent raw
 click event not working in some cases.

---
 CHANGELOG.md         |  1 +
 CHANGELOG_CN.md      |  1 +
 src/core/core.svelte | 79 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3bdfac5d..b2c30fd6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 ## 3.13.0-rc (2022-03-??)
 
 - `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
+- `Fix(Core)` Use polyfill `click` event to prevent raw click event not working in some cases.
 
 
 ## 3.12.1 (2022-02-25)
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index 34afc314..fee4dad5 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -3,6 +3,7 @@
 ## 3.13.0-rc (2022-03-??)
 
 - `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
+- `Fix(Core)` 使用模拟的 `click` 事件以避免某些场景下原生 click 事件不生效的问题。
 
 
 ## 3.12.1 (2022-02-25)
diff --git a/src/core/core.svelte b/src/core/core.svelte
index 3daef29f..0c94f0fd 100644
--- a/src/core/core.svelte
+++ b/src/core/core.svelte
@@ -199,6 +199,82 @@
     }
     // (window as any)._vcOrigConsole.log('onContentScroll', isInBottom);
   };
+
+  /**
+   * Simulate click event by touchstart & touchend
+   */
+  const mockTapInfo = {
+    tapTime: 700, // maximun tap interval
+    tapBoundary: 10, // max tap move distance
+    lastTouchStartTime: 0,
+    touchstartX: 0,
+    touchstartY: 0,
+    touchHasMoved: false,
+    targetElem: null,
+  };
+  const mockTapEvent = {
+    touchStart(e) {
+      if (mockTapInfo.lastTouchStartTime === 0) {
+        const touch = e.targetTouches[0];
+        mockTapInfo.touchstartX = touch.pageX;
+        mockTapInfo.touchstartY = touch.pageY;
+        mockTapInfo.lastTouchStartTime = e.timeStamp;
+        mockTapInfo.targetElem = (e.target.nodeType === Node.TEXT_NODE ? e.target.parentNode : e.target);
+      }
+    },
+    touchMove(e) {
+      const touch = e.changedTouches[0];
+      if (Math.abs(touch.pageX - mockTapInfo.touchstartX) > mockTapInfo.tapBoundary || Math.abs(touch.pageY - mockTapInfo.touchstartY) > mockTapInfo.tapBoundary) {
+        mockTapInfo.touchHasMoved = true;
+      }
+    },
+    touchEnd(e) {
+      // move and time within limits, manually trigger `click` event
+      if (mockTapInfo.touchHasMoved === false && e.timeStamp - mockTapInfo.lastTouchStartTime < mockTapInfo.tapTime && mockTapInfo.targetElem != null) {
+        const tagName = mockTapInfo.targetElem.tagName.toLowerCase();
+        let needFocus = false;
+        switch (tagName) {
+          case 'textarea': // focus
+            needFocus = true; break;
+          case 'input':
+            switch (mockTapInfo.targetElem.type) {
+              case 'button':
+              case 'checkbox':
+              case 'file':
+              case 'image':
+              case 'radio':
+              case 'submit':
+                needFocus = false; break;
+              default:
+                needFocus = !mockTapInfo.targetElem.disabled && !mockTapInfo.targetElem.readOnly;
+            }
+          default:
+            break;
+        }
+        if (needFocus) {
+          mockTapInfo.targetElem.focus();
+        } else {
+          e.preventDefault(); // prevent click 300ms later
+        }
+        const touch = e.changedTouches[0];
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          screenX: touch.screenX,
+          screenY: touch.screenY,
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+        });
+        mockTapInfo.targetElem.dispatchEvent(event);
+      }
+
+      // reset values
+      mockTapInfo.lastTouchStartTime = 0;
+      mockTapInfo.touchHasMoved = false;
+      mockTapInfo.targetElem = null;
+    },
+  };
 </script>
 
 <div
@@ -206,6 +282,9 @@
   class:vc-toggle={showMain}
   style="{fontSize ? 'font-size:' + fontSize + ';' : ''}"
   data-theme={theme}
+  on:touchstart|capture={mockTapEvent.touchStart}
+  on:touchmove|capture={mockTapEvent.touchMove}
+  on:touchend|capture={mockTapEvent.touchEnd}
 >
   <SwitchButton
     bind:show={showSwitchButton}

From 61307433adbd5d9251f34f0da1ac6c52d8d54e95 Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Wed, 9 Mar 2022 22:02:33 +0800
Subject: [PATCH 3/8] refactor(storage):  Improve robustness.

---
 CHANGELOG.md                  |   1 +
 babel.config.json             |   1 +
 package-lock.json             | 311 ++++++++++++++++++++++++----------
 package.json                  |   2 +
 src/core/options.interface.ts |   3 +-
 src/lib/tool.ts               |  23 +++
 src/storage/storage.cookie.ts |  12 +-
 src/storage/storage.model.ts  | 152 ++++++++++++++---
 src/storage/storage.proxy.ts  |  52 ------
 src/storage/storage.svelte    |  80 ++++-----
 src/storage/storage.ts        |  61 +++----
 src/storage/storage.wx.ts     |  98 +++++++----
 src/vconsole.ts               |   1 +
 13 files changed, 509 insertions(+), 288 deletions(-)
 delete mode 100644 src/storage/storage.proxy.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2c30fd6..7738dba4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 - `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
 - `Fix(Core)` Use polyfill `click` event to prevent raw click event not working in some cases.
+- `Refactor(Storage)` Improve robustness.
 
 
 ## 3.12.1 (2022-02-25)
diff --git a/babel.config.json b/babel.config.json
index 378070e2..af8c106a 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -12,6 +12,7 @@
     "@babel/preset-typescript"
   ],
   "plugins": [
+    "@babel/plugin-transform-runtime",
     ["@babel/plugin-proposal-class-properties", { "loose": true }],
     "@babel/plugin-transform-block-scoping",
     "@babel/plugin-proposal-export-namespace-from",
diff --git a/package-lock.json b/package-lock.json
index d1567c93..a6e4646b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
   "name": "vconsole",
-  "version": "3.12.0",
+  "version": "3.13.0-rc",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "vconsole",
-      "version": "3.12.0",
+      "version": "3.13.0-rc",
       "license": "MIT",
       "dependencies": {
+        "@babel/runtime": "^7.17.2",
         "copy-text-to-clipboard": "^3.0.1",
         "core-js": "^3.11.0",
         "mutation-observer": "^1.0.3"
@@ -19,6 +20,7 @@
         "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
         "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
         "@babel/plugin-transform-block-scoping": "^7.16.0",
+        "@babel/plugin-transform-runtime": "^7.17.0",
         "@babel/preset-env": "^7.14.1",
         "@babel/preset-typescript": "^7.13.0",
         "babel-loader": "^8.2.2",
@@ -266,13 +268,12 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.16.0",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2fhelper-module-imports/-/helper-module-imports-7.16.0.tgz",
-      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.16.0"
+        "@babel/types": "^7.16.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -310,9 +311,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -384,11 +385,10 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.15.7",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1312,6 +1312,84 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz",
+      "integrity": "sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "babel-plugin-polyfill-corejs2": "^0.3.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
+        "babel-plugin-polyfill-regenerator": "^0.3.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
+      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.13.0",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/traverse": "^7.13.0",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
+      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.13.11",
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
+      "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "core-js-compat": "^3.21.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
@@ -1557,11 +1635,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.16.3",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2fruntime/-/runtime-7.16.3.tgz",
-      "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
-      "dev": true,
-      "license": "MIT",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1604,13 +1680,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.16.0",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2ftypes/-/types-7.16.0.tgz",
-      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.15.7",
+        "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -2439,16 +2514,15 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.17.6",
-      "resolved": "https://mirrors.tencent.com/npm/browserslist/-/browserslist-4.17.6.tgz",
-      "integrity": "sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.0.tgz",
+      "integrity": "sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001274",
-        "electron-to-chromium": "^1.3.886",
+        "caniuse-lite": "^1.0.30001313",
+        "electron-to-chromium": "^1.4.76",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.2",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -2507,11 +2581,10 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001279",
-      "resolved": "https://mirrors.tencent.com/npm/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz",
-      "integrity": "sha512-VfEHpzHEXj6/CxggTwSFoZBBYGQfQv9Cf42KPlO79sWXCD1QNKWKsKzFeWL7QpZHJQYAvocqV6Rty1yJMkqWLQ==",
+      "version": "1.0.30001314",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
+      "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==",
       "dev": true,
-      "license": "CC-BY-4.0",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -2775,13 +2848,12 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.19.1",
-      "resolved": "https://mirrors.tencent.com/npm/core-js-compat/-/core-js-compat-3.19.1.tgz",
-      "integrity": "sha512-Q/VJ7jAF/y68+aUsQJ/afPOewdsGkDtcMb40J8MbuWKlK3Y+wtHq8bTHKPj2WKWLIqmS5JhHs4CzHtz6pT2W6g==",
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
+      "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.17.6",
+        "browserslist": "^4.19.1",
         "semver": "7.0.0"
       },
       "funding": {
@@ -3100,11 +3172,10 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.892",
-      "resolved": "https://mirrors.tencent.com/npm/electron-to-chromium/-/electron-to-chromium-1.3.892.tgz",
-      "integrity": "sha512-YDW4yIjdfMnbRoBjRZ/aNQYmT6JgQFLwmTSDRJMQdrY4MByEzppdXp3rnJ0g4LBWcsYTUvwKKClYN1ofZ0COOQ==",
-      "dev": true,
-      "license": "ISC"
+      "version": "1.4.78",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.78.tgz",
+      "integrity": "sha512-o61+D/Lx7j/E0LIin/efOqeHpXhwi1TaQco9vUcRmr91m25SfZY6L5hWJDv/r+6kNjboFKgBw1LbfM0lbhuK6Q==",
+      "dev": true
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -4681,11 +4752,10 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.1",
-      "resolved": "https://mirrors.tencent.com/npm/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
-      "dev": true,
-      "license": "MIT"
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
+      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==",
+      "dev": true
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -5308,8 +5378,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-      "dev": true
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -7012,12 +7081,12 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.16.0",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2fhelper-module-imports/-/helper-module-imports-7.16.0.tgz",
-      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.0"
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-module-transforms": {
@@ -7046,9 +7115,9 @@
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
@@ -7102,9 +7171,9 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.15.7",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
       "dev": true
     },
     "@babel/helper-validator-option": {
@@ -7704,6 +7773,68 @@
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz",
+      "integrity": "sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "babel-plugin-polyfill-corejs2": "^0.3.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
+        "babel-plugin-polyfill-regenerator": "^0.3.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
+          "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-compilation-targets": "^7.13.0",
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-plugin-utils": "^7.13.0",
+            "@babel/traverse": "^7.13.0",
+            "debug": "^4.1.1",
+            "lodash.debounce": "^4.0.8",
+            "resolve": "^1.14.2",
+            "semver": "^6.1.2"
+          }
+        },
+        "babel-plugin-polyfill-corejs2": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
+          "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.13.11",
+            "@babel/helper-define-polyfill-provider": "^0.3.1",
+            "semver": "^6.1.1"
+          }
+        },
+        "babel-plugin-polyfill-corejs3": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
+          "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.3.1",
+            "core-js-compat": "^3.21.0"
+          }
+        },
+        "babel-plugin-polyfill-regenerator": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+          "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.3.1"
+          }
+        }
+      }
+    },
     "@babel/plugin-transform-shorthand-properties": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
@@ -7886,10 +8017,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.16.3",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2fruntime/-/runtime-7.16.3.tgz",
-      "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
-      "dev": true,
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -7923,12 +8053,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.16.0",
-      "resolved": "https://mirrors.tencent.com/npm/@babel%2ftypes/-/types-7.16.0.tgz",
-      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.15.7",
+        "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -8624,15 +8754,15 @@
       }
     },
     "browserslist": {
-      "version": "4.17.6",
-      "resolved": "https://mirrors.tencent.com/npm/browserslist/-/browserslist-4.17.6.tgz",
-      "integrity": "sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.0.tgz",
+      "integrity": "sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001274",
-        "electron-to-chromium": "^1.3.886",
+        "caniuse-lite": "^1.0.30001313",
+        "electron-to-chromium": "^1.4.76",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.2",
         "picocolors": "^1.0.0"
       }
     },
@@ -8671,9 +8801,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001279",
-      "resolved": "https://mirrors.tencent.com/npm/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz",
-      "integrity": "sha512-VfEHpzHEXj6/CxggTwSFoZBBYGQfQv9Cf42KPlO79sWXCD1QNKWKsKzFeWL7QpZHJQYAvocqV6Rty1yJMkqWLQ==",
+      "version": "1.0.30001314",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
+      "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==",
       "dev": true
     },
     "chai": {
@@ -8882,12 +9012,12 @@
       "integrity": "sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q=="
     },
     "core-js-compat": {
-      "version": "3.19.1",
-      "resolved": "https://mirrors.tencent.com/npm/core-js-compat/-/core-js-compat-3.19.1.tgz",
-      "integrity": "sha512-Q/VJ7jAF/y68+aUsQJ/afPOewdsGkDtcMb40J8MbuWKlK3Y+wtHq8bTHKPj2WKWLIqmS5JhHs4CzHtz6pT2W6g==",
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
+      "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.17.6",
+        "browserslist": "^4.19.1",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -9121,9 +9251,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.892",
-      "resolved": "https://mirrors.tencent.com/npm/electron-to-chromium/-/electron-to-chromium-1.3.892.tgz",
-      "integrity": "sha512-YDW4yIjdfMnbRoBjRZ/aNQYmT6JgQFLwmTSDRJMQdrY4MByEzppdXp3rnJ0g4LBWcsYTUvwKKClYN1ofZ0COOQ==",
+      "version": "1.4.78",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.78.tgz",
+      "integrity": "sha512-o61+D/Lx7j/E0LIin/efOqeHpXhwi1TaQco9vUcRmr91m25SfZY6L5hWJDv/r+6kNjboFKgBw1LbfM0lbhuK6Q==",
       "dev": true
     },
     "emojis-list": {
@@ -10287,9 +10417,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.1",
-      "resolved": "https://mirrors.tencent.com/npm/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
+      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==",
       "dev": true
     },
     "normalize-path": {
@@ -10733,8 +10863,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-      "dev": true
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
diff --git a/package.json b/package.json
index a8f1935c..3056ff95 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "url": "git+https://github.com/Tencent/vConsole.git"
   },
   "dependencies": {
+    "@babel/runtime": "^7.17.2",
     "copy-text-to-clipboard": "^3.0.1",
     "core-js": "^3.11.0",
     "mutation-observer": "^1.0.3"
@@ -39,6 +40,7 @@
     "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-block-scoping": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-typescript": "^7.13.0",
     "babel-loader": "^8.2.2",
diff --git a/src/core/options.interface.ts b/src/core/options.interface.ts
index 2e660ecf..34ed16ee 100644
--- a/src/core/options.interface.ts
+++ b/src/core/options.interface.ts
@@ -7,8 +7,9 @@ export interface VConsoleNetworkOptions {
   maxNetworkNumber?: number;
 }
 
+export type VConsoleAvailableStorage = 'cookies' | 'localStorage' | 'sessionStorage' | 'wxStorage';
 export interface VConsoleStorageOptions {
-  defaultStorages?: ('cookies' | 'localStorage' | 'sessionStorage' | 'wxStorage')[];
+  defaultStorages?: VConsoleAvailableStorage[];
 }
 
 export interface VConsoleOptions {
diff --git a/src/lib/tool.ts b/src/lib/tool.ts
index dcc61ae0..7b007a29 100644
--- a/src/lib/tool.ts
+++ b/src/lib/tool.ts
@@ -451,3 +451,26 @@ export function getStorage(key: string) {
 export function getUniqueID(prefix: string = '') {
   return '__vc_' + prefix + Math.random().toString(36).substring(2, 8);
 }
+
+/**
+ * Determine whether it is inside a WeChat Miniprogram.
+ */
+export function isWxEnv() {
+  return typeof window !== 'undefined' && !!(<any>window).__wxConfig && !!(<any>window).wx && !!(<any>window).__virtualDOM__;
+}
+
+/**
+ * Call a WeChat Miniprogram method. E.g: `wx.getStorageSync()`.
+ */
+export function callWx(method: string, ...args) {
+  if (isWxEnv() && typeof (<any>window).wx[method] === 'function') {
+    try {
+      const ret = (<any>window).wx[method].call((<any>window).wx, ...args);
+      return ret;
+    } catch (e) {
+      console.debug(`[vConsole] Fail to call wx.${method}():`, e);
+      return undefined;
+    }
+  }
+  return undefined;
+}
diff --git a/src/storage/storage.cookie.ts b/src/storage/storage.cookie.ts
index 2c16a69d..24cf3ab2 100644
--- a/src/storage/storage.cookie.ts
+++ b/src/storage/storage.cookie.ts
@@ -1,4 +1,4 @@
-import { GetProxyHandler } from './storage.proxy';
+import type { IStorage } from './storage.model';
 
 export interface CookieOptions {
   path?: string | null;
@@ -59,13 +59,7 @@ const getCookie = () => {
 };
 
 
-export class CookieStorage implements Storage {
-
-  constructor() {
-    if (typeof Proxy !== 'undefined') {
-      return new Proxy(this, GetProxyHandler<CookieStorage>());
-    }
-  }
+export class CookieStorage implements IStorage {
 
   public get length() {
     return this.keys.length;
@@ -121,7 +115,7 @@ export class CookieStorage implements Storage {
 
   public clear() {
     // Deep clear all cookies.
-    const keys = Object.keys(this);
+    const keys = [...this.keys]; // use a copy of `this.keys` to prevent array changing dynamically
     for (let i = 0; i < keys.length; i++) {
       this.removeItem(keys[i]);
     }
diff --git a/src/storage/storage.model.ts b/src/storage/storage.model.ts
index 5b814488..a40415b0 100644
--- a/src/storage/storage.model.ts
+++ b/src/storage/storage.model.ts
@@ -1,47 +1,145 @@
-import type { VConsoleStorageOptions } from '../core/options.interface';
+import { writable, get } from 'svelte/store';
+import { isWxEnv } from '../lib/tool';
+import type { VConsoleAvailableStorage } from '../core/options.interface';
 import { CookieStorage } from './storage.cookie';
-import { WxStorage, isWxEnv } from './storage.wx';
+import { WxStorage } from './storage.wx';
 import { VConsoleModel } from '../lib/model';
 
-interface IStorageItem {
-  name: string;
-  storage: Storage;
+export interface IStorage {
+  length: number;
+  key: (index: number) => string | null;
+  getItem: (key: string) => string | null | Promise<string | null>;
+  setItem: (key: string, data: any) => void | Promise<void>;
+  removeItem: (key: string) => void | Promise<void>;
+  clear: () => void | Promise<void>;
+  prepare?: () => Promise<boolean>;
 }
+
+/**
+ * Storage Store
+ */
+export const storageStore = {
+  updateTime: writable(0),
+  activedName: writable<VConsoleAvailableStorage>(null),
+  defaultStorages: writable<VConsoleAvailableStorage[]>(['cookies', 'localStorage', 'sessionStorage']),
+};
+
 export class VConsoleStorageModel extends VConsoleModel {
-  public defaultStorages: VConsoleStorageOptions['defaultStorages'] = ['cookies', 'localStorage', 'sessionStorage'];
-  protected cookiesStorage: CookieStorage;
-  protected wxStorage: WxStorage;
-  protected storages: IStorageItem[];
+  protected storage: Map<VConsoleAvailableStorage, IStorage> = new Map();
+
+  constructor() {
+    super();
+    storageStore.activedName.subscribe((value) => {
+      const defaultStorages = get(storageStore.defaultStorages);
+      if (defaultStorages.length > 0 && defaultStorages.indexOf(value) === -1) {
+        storageStore.activedName.set(defaultStorages[0]);
+      }
+    });
+    storageStore.defaultStorages.subscribe((list) => {
+      if (list.indexOf(get(storageStore.activedName)) === -1) {
+        storageStore.activedName.set(list[0]);
+      }
+      this.updateEnabledStorages();
+    });
+  }
+
+  public get activedStorage() {
+    return this.storage.get(get(storageStore.activedName));
+  }
+
+  public async getItem(key: string) {
+    if (!this.activedStorage) { return ''; }
+    return await this.promisify(this.activedStorage.getItem(key));
+  }
+
+  public async setItem(key: string, data: any) {
+    if (!this.activedStorage) { return; }
+    const ret = await this.promisify(this.activedStorage.setItem(key, data));
+    this.refresh();
+    return ret;
+  }
+
+  public async removeItem(key: string) {
+    if (!this.activedStorage) { return; }
+    const ret = await this.promisify(this.activedStorage.removeItem(key));
+    this.refresh();
+    return ret;
+  }
+
+  public async clear() {
+    if (!this.activedStorage) { return; }
+    const ret = await this.promisify(this.activedStorage.clear());
+    this.refresh();
+    return ret;
+  }
+
+  public refresh() {
+    storageStore.updateTime.set(Date.now());
+  }
 
   /**
-   * Get the singleton of storage list.
+   * Get key-value data.
    */
-  public getAllStorages() {
-    if (!this.storages) {
-      this.updateEnabledStorages();
+  public async getEntries() {
+    const storage = this.activedStorage;
+    if (!storage) {
+      return [];
+    }
+    if (typeof storage.prepare === 'function') {
+      await storage.prepare();
     }
-    return this.storages;
+    const list: [string, string][] = [];
+    for (let i = 0; i < storage.length; i++) {
+      const k = storage.key(i);
+      const v = await this.getItem(k);
+      list.push([k, v]);
+    }
+    return list;
   }
 
   public updateEnabledStorages() {
-    this.storages = [];
-    if (document.cookie !== undefined && this.defaultStorages.indexOf('cookies') > -1) {
-      if (!this.cookiesStorage) {
-        this.cookiesStorage = new CookieStorage();
+    const defaultStorages = get(storageStore.defaultStorages);
+    if (defaultStorages.indexOf('cookies') > -1) {
+      if (document.cookie !== undefined) {
+        this.storage.set('cookies', new CookieStorage());
       }
-      this.storages.push({ name: 'cookies', storage: this.cookiesStorage });
+    } else {
+      this.deleteStorage('cookies');
     }
-    if (window.localStorage && this.defaultStorages.indexOf('localStorage') > -1) {
-      this.storages.push({ name: 'localStorage', storage: localStorage });
+    if (defaultStorages.indexOf('localStorage') > -1) {
+      if (window.localStorage) {
+        this.storage.set('localStorage', window.localStorage);
+      }
+    } else {
+      this.deleteStorage('localStorage');
     }
-    if (window.sessionStorage && this.defaultStorages.indexOf('sessionStorage') > -1) {
-      this.storages.push({ name: 'sessionStorage', storage: sessionStorage });
+    if (defaultStorages.indexOf('sessionStorage') > -1) {
+      if (window.sessionStorage) {
+        this.storage.set('sessionStorage', window.sessionStorage);
+      }
+    } else {
+      this.deleteStorage('sessionStorage');
     }
-    if (isWxEnv() && this.defaultStorages.indexOf('wxStorage') > -1) {
-      if (!this.wxStorage) {
-        this.wxStorage = new WxStorage();
+    if (defaultStorages.indexOf('wxStorage') > -1) {
+      if (isWxEnv()) {
+        this.storage.set('wxStorage', new WxStorage());
       }
-      this.storages.push({ name: 'wxStorage', storage: this.wxStorage });
+    } else {
+      this.deleteStorage('wxStorage');
+    }
+  }
+
+  protected promisify<T extends string | void>(ret: T | Promise<T>) {
+    if (typeof ret === 'string' || ret === null || ret === undefined) {
+      return Promise.resolve(ret);
+    } else {
+      return ret;
+    }
+  }
+
+  protected deleteStorage(key: VConsoleAvailableStorage) {
+    if (this.storage.has(key)) {
+      this.storage.delete(key);
     }
   }
 }
diff --git a/src/storage/storage.proxy.ts b/src/storage/storage.proxy.ts
deleted file mode 100644
index a4172585..00000000
--- a/src/storage/storage.proxy.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-export const GetProxyHandler = <T extends Storage>() => {
-  const handler: ProxyHandler<T> = {
-    defineProperty(
-      target: T,
-      p: PropertyKey,
-      attributes: PropertyDescriptor
-    ): boolean {
-      target.setItem(p.toString(), attributes.value);
-      return true;
-    },
-    deleteProperty(target: T, p: PropertyKey): boolean {
-      target.removeItem(p.toString());
-      return true;
-    },
-    get(target: T, p: PropertyKey, _receiver: any): any {
-      if (typeof p === 'string' && p in target) return target[p];
-      const result = target.getItem(p.toString());
-      return result !== null ? result : undefined;
-    },
-    getOwnPropertyDescriptor(
-      target: T,
-      p: PropertyKey
-    ): PropertyDescriptor | undefined {
-      if (p in target) return undefined;
-      return {
-        configurable: true,
-        enumerable: true,
-        value: target.getItem(p.toString()),
-        writable: true,
-      };
-    },
-    has(target: T, p: PropertyKey): boolean {
-      if (typeof p === 'string' && p in target) return true;
-      return target.getItem(p.toString()) !== null;
-    },
-    ownKeys(target: T): string[] {
-      return target.keys;
-    },
-    preventExtensions(_: T): boolean {
-      throw new TypeError('Can\'t prevent extensions on this proxy object.');
-    },
-    set(target: T, p: PropertyKey, value: any, _: any): boolean {
-      target.setItem(p.toString(), value);
-      return true;
-    },
-  };
-  return handler;
-};
-
-
-
-
diff --git a/src/storage/storage.svelte b/src/storage/storage.svelte
index bc6d3c69..d87a8afb 100644
--- a/src/storage/storage.svelte
+++ b/src/storage/storage.svelte
@@ -1,53 +1,61 @@
 <script lang="ts">
   import Icon from '../component/icon.svelte';
   import IconCopy from '../component/iconCopy.svelte';
-  import { VConsoleStorageModel } from './storage.model';
+  import { VConsoleStorageModel, storageStore } from './storage.model';
   import { getStringBytes, getBytesText, subString } from '../lib/tool';
 
-  export let storages: ReturnType<VConsoleStorageModel['getAllStorages']> = [];
-  export let activedName = '';
+  // export let storages: ReturnType<VConsoleStorageModel['getAllStorages']> = [];
+  // export let activedName = '';
+
+  const model = VConsoleStorageModel.getSingleton(VConsoleStorageModel, 'VConsoleStorageModel');
+  const { updateTime } = storageStore;
 
   const BYTES_LIMIT = 1024;
+  let storageData: [string, string][] = [];
   // edit state
   let editingIdx = -1;
   let editingKey = '';
   let editingVal = '';
 
-  // force reload
-  const handleRefresh = () => {
-    storages = storages;
-    editingIdx = -1;
-  };
-
-  const onTapDelete = (storage: Storage, idx: number) => {
-    storage.removeItem(storage.key(idx) ?? '');
-    handleRefresh();
-  };
-  const handleEditOrSave = (
-    storage: Storage,
-    key: string,
-    value: string,
-    i: number
-  ) => {
-    const save = editingIdx === i;
-    if (save) {
-      if (editingKey !== key) storage.removeItem(key); // dirty key
-      storage.setItem(editingKey, editingVal); // set value anyway
-      editingIdx = -1; // reset editing status
-      handleRefresh();
-    } else {
-      editingKey = key;
-      editingVal = value;
-      editingIdx = i;
+  $: {
+    if ($updateTime) {
+      refreshData();
     }
+  }
+
+  const refreshData = async () => {
+    // console.log('refreshData', $updateTime);
+    resetEditState();
+    storageData = await model.getEntries();
   };
-  const onTapCancelEdit = () => {
+  const resetEditState = () => {
     editingIdx = -1;
+    editingKey = '';
+    editingVal = '';
   };
   const properDisplay = (str: string) => {
     const bytes = getStringBytes(str);
     return bytes > BYTES_LIMIT ? subString(str, BYTES_LIMIT) + ` (${getBytesText(bytes)})` : str;
   };
+
+  const onTapDelete = async (key: string) => {
+    await model.removeItem(key);
+  };
+  const onTapSave = async (key: string) => {
+    if (editingKey !== key) {
+      await model.removeItem(key); // dirty key
+    }
+    model.setItem(editingKey, editingVal); // set value anyway
+    resetEditState(); // reset editing status
+  };
+  const onTapEdit = async (key: string, value: string, i: number) => {
+    editingKey = key;
+    editingVal = value;
+    editingIdx = i;
+  };
+  const onTapCancelEdit = () => {
+    resetEditState();
+  };
 </script>
 
 <div class="vc-table">
@@ -56,9 +64,7 @@
     <div class="vc-table-col vc-table-col-2">Value</div>
     <div class="vc-table-col vc-table-col-1 vc-table-action" />
   </div>
-  {#each storages as { name, storage }}
-    {#if name === activedName}
-      {#each Object.entries(storage) as [k, v], i}
+      {#each storageData as [k, v], i}
         <div class="vc-table-row">
 
           {#if editingIdx === i}
@@ -76,17 +82,15 @@
           <div class="vc-table-col vc-table-col-1 vc-table-action">
             {#if editingIdx === i}
               <Icon name="cancel" on:click={onTapCancelEdit} />
-              <Icon name="done" on:click={() => handleEditOrSave(storage, k, v, i)} />
+              <Icon name="done" on:click={() => onTapSave(k)} />
             {:else}
-              <Icon name="delete" on:click={() => onTapDelete(storage, i)} />
+              <Icon name="delete" on:click={() => onTapDelete(k)} />
               <IconCopy content={[k, v].join('=')} />
-              <Icon name="edit" on:click={() => handleEditOrSave(storage, k, v, i)} />
+              <Icon name="edit" on:click={() => onTapEdit(k, v, i)} />
             {/if}
           </div>
         </div>
       {:else}
         <div class="vc-plugin-empty"></div>
       {/each}
-    {/if}
-  {/each}
 </div>
diff --git a/src/storage/storage.ts b/src/storage/storage.ts
index 000196c1..c821486b 100644
--- a/src/storage/storage.ts
+++ b/src/storage/storage.ts
@@ -1,5 +1,6 @@
+import { get } from 'svelte/store';
 import { VConsoleSveltePlugin } from '../lib/sveltePlugin';
-import { VConsoleStorageModel } from './storage.model';
+import { VConsoleStorageModel, storageStore } from './storage.model';
 import { default as StorageComp } from './storage.svelte';
 
 export class VConsoleStoragePlugin extends VConsoleSveltePlugin {
@@ -10,57 +11,41 @@ export class VConsoleStoragePlugin extends VConsoleSveltePlugin {
     super(id, name, StorageComp, renderProps);
   }
 
-  onInit() {
+  public onReady() {
+    super.onReady();
     this.onUpdateOption();
   }
 
-  onShow() {
-    this.compInstance.storages = this.model.getAllStorages();
-    if (!this.compInstance.activedName) {
-      this.setDefaultActivedName();
-    }
+  public onShow() {
+    this.model.refresh();
   }
 
-  onAddTopBar(callback: Function) {
+  public onAddTopBar(callback: Function) {
     this.onAddTopBarCallback = callback;
     this.updateTopBar();
   }
 
-  onAddTool(callback: Function) {
+  public onAddTool(callback: Function) {
     const btnList = [
       {
         name: 'Add',
         global: false,
         onClick: () => {
-          const storages = this.model.getAllStorages();
-          for (const item of storages) {
-            if (item.name === this.compInstance.activedName) {
-              item.storage.setItem(`new_${Date.now()}`, 'new_value');
-              this.compInstance.storages = this.compInstance.storages;
-              break;
-            }
-          }
+          this.model.setItem(`new_${Date.now()}`, 'new_value');
         },
       },
       {
         name: 'Refresh',
         global: false,
         onClick: () => {
-          this.compInstance.storages = this.model.getAllStorages();
+          this.model.refresh();
         },
       },
       {
         name: 'Clear',
         global: false,
         onClick: () => {
-          const storages = this.model.getAllStorages();
-          for (const item of storages) {
-            if (item.name === this.compInstance.activedName) {
-              item.storage.clear();
-              this.compInstance.storages = this.compInstance.storages;
-              break;
-            }
-          }
+          this.model.clear();
         },
       },
     ];
@@ -68,29 +53,21 @@ export class VConsoleStoragePlugin extends VConsoleSveltePlugin {
   }
 
   public onUpdateOption() {
-    if (typeof this.vConsole.option.storage?.defaultStorages !== 'undefined' && this.vConsole.option.storage?.defaultStorages !== this.model.defaultStorages) {
-      this.model.defaultStorages = this.vConsole.option.storage?.defaultStorages || [];
-      this.model.updateEnabledStorages();
+    if (typeof this.vConsole.option.storage?.defaultStorages !== 'undefined') {
+      storageStore.defaultStorages.set(this.vConsole.option.storage?.defaultStorages || []);
       this.updateTopBar();
-      if (!!this.compInstance.activedName && this.model.defaultStorages.indexOf(this.compInstance.activedName) === -1) {
-        this.setDefaultActivedName();
-      }
     }
   }
 
-  protected setDefaultActivedName() {
-    this.compInstance.activedName = this.compInstance.storages[0]?.name || '';
-  }
-
   protected updateTopBar() {
     if (typeof this.onAddTopBarCallback !== 'function') {
       return;
     }
-    const storages = this.model.getAllStorages();
+    const defaultStorages = get(storageStore.defaultStorages);
     
     const btnList = [];
-    for (let i = 0; i < storages.length; i++) {
-      const name = storages[i].name;
+    for (let i = 0; i < defaultStorages.length; i++) {
+      const name = defaultStorages[i];
       btnList.push({
         name: name[0].toUpperCase() + name.substring(1),
         data: {
@@ -98,10 +75,12 @@ export class VConsoleStoragePlugin extends VConsoleSveltePlugin {
         },
         actived: i === 0,
         onClick: (e: PointerEvent, data: { name: string }) => {
-          if (data.name === this.compInstance.activedName) {
+          const activedName = get(storageStore.activedName);
+          if (data.name === activedName) {
             return false;
           }
-          this.compInstance.activedName = data.name;
+          storageStore.activedName.set(<typeof activedName>data.name);
+          this.model.refresh();
         }
       });
     }
diff --git a/src/storage/storage.wx.ts b/src/storage/storage.wx.ts
index 5bbf0315..bd1b34dc 100644
--- a/src/storage/storage.wx.ts
+++ b/src/storage/storage.wx.ts
@@ -1,51 +1,91 @@
-import { GetProxyHandler } from './storage.proxy';
+import type { IStorage } from './storage.model';
+import { callWx } from '../lib/tool';
 
-export const isWxEnv = () => {
-  return typeof window !== 'undefined' && (<any>window).__wxConfig && (<any>window).wx && (<any>window).wx.getStorageSync;
-};
-
-export const callWx = (method: string, ...args) => {
-  if (isWxEnv() && typeof (<any>window).wx[method] === 'function') {
-    return (<any>window).wx[method].call((<any>window).wx, ...args);
-  }
-  return undefined;
-}
-
-export class WxStorage implements Storage {
-  constructor() {
-    if (typeof Proxy !== 'undefined') {
-      return new Proxy(this, GetProxyHandler<WxStorage>());
-    }
-  }
+export class WxStorage implements IStorage {
+  public keys: string[] = [];
+  public currentSize: number = 0;
+  public limitSize: number = 0;
 
   public get length() {
     return this.keys.length;
   }
 
-  public get keys() {
-    const info = callWx('getStorageInfoSync');
-    const keys: string[] = !!info ? info.keys : [];
-    return keys;
+  public key(index: number) {
+    return index < this.keys.length ? this.keys[index] : null;
   }
 
-  public key(index: number) {
-    const sortedKeys = Object.keys(this.keys).sort();
-    return index < sortedKeys.length ? sortedKeys[index] : null;
+  /**
+   * Prepare for async data.
+   */
+  public async prepare() {
+    return new Promise<boolean>((resolve, reject) => {
+      callWx('getStorageInfoSync', {
+        success: (res) => {
+          this.keys = !!res ? Object.keys(res.keys).sort() : [];
+          this.currentSize = !!res ? res.currentSize : 0;
+          this.limitSize = !!res ? res.limitSize : 0;
+          resolve(true);
+        },
+        fail() {
+          reject(false);
+        },
+      });
+    });
   }
 
   public getItem(key: string) {
-    return callWx('getStorageSync', key);
+    return new Promise<string>((resolve, reject) => {
+      callWx('getStorage', {
+        key,
+        success(res) {
+          resolve(res);
+        },
+        fail(res) {
+          reject(res);
+        },
+      });
+    });
   }
 
   public setItem(key: string, data: any) {
-    return callWx('setStorageSync', key, data);
+    return new Promise<void>((resolve, reject) => {
+      callWx('setStorage', {
+        key,
+        data,
+        success(res) {
+          resolve(res);
+        },
+        fail(res) {
+          reject(res);
+        },
+      });
+    });
   }
 
   public removeItem(key: string) {
-    return callWx('removeStorageSync', key);
+    return new Promise<void>((resolve, reject) => {
+      callWx('removeStorage', {
+        key,
+        success(res) {
+          resolve(res);
+        },
+        fail(res) {
+          reject(res);
+        },
+      });
+    });
   }
 
   public clear() {
-    callWx('clearStorageSync');
+    return new Promise<void>((resolve, reject) => {
+      callWx('clearStorage', {
+        success(res) {
+          resolve(res);
+        },
+        fail(res) {
+          reject(res);
+        },
+      });
+    });
   }
 }
diff --git a/src/vconsole.ts b/src/vconsole.ts
index e0c4c47d..09d3bfad 100644
--- a/src/vconsole.ts
+++ b/src/vconsole.ts
@@ -15,6 +15,7 @@ Unless required by applicable law or agreed to in writing, software distributed
 
 // polyfill
 import 'core-js/stable/symbol';
+import 'core-js/stable/promise';
 
 // classes
 import { VConsole } from './core/core';

From c7a73156558aa6c751e704bf4514e97be6db8597 Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Thu, 10 Mar 2022 18:55:53 +0800
Subject: [PATCH 4/8] fix(storage): Fix get data fail.

---
 src/storage/storage.wx.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/storage/storage.wx.ts b/src/storage/storage.wx.ts
index bd1b34dc..bed7badb 100644
--- a/src/storage/storage.wx.ts
+++ b/src/storage/storage.wx.ts
@@ -19,9 +19,9 @@ export class WxStorage implements IStorage {
    */
   public async prepare() {
     return new Promise<boolean>((resolve, reject) => {
-      callWx('getStorageInfoSync', {
+      callWx('getStorageInfo', {
         success: (res) => {
-          this.keys = !!res ? Object.keys(res.keys).sort() : [];
+          this.keys = !!res ? res.keys.sort() : [];
           this.currentSize = !!res ? res.currentSize : 0;
           this.limitSize = !!res ? res.limitSize : 0;
           resolve(true);
@@ -38,7 +38,15 @@ export class WxStorage implements IStorage {
       callWx('getStorage', {
         key,
         success(res) {
-          resolve(res);
+          let data: string = res.data;
+          if (typeof res.data === 'object') {
+            try {
+              data = JSON.stringify(res.data);
+            } catch (e) {
+              // do nothing
+            }
+          }
+          resolve(data);
         },
         fail(res) {
           reject(res);

From 5b183bd947de0306e93ca9151312a6a60c2d1523 Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Thu, 10 Mar 2022 20:36:23 +0800
Subject: [PATCH 5/8] fix(style): use transition `bottom` instead of
 `transform` to prevent animation fail in WeChat webview.

---
 src/core/core.less       |  2 +-
 src/core/style/view.less | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/core/core.less b/src/core/core.less
index 47bf015d..1169d85f 100644
--- a/src/core/core.less
+++ b/src/core/core.less
@@ -1,5 +1,5 @@
 @import "./style/theme.less";
-@import "./style/view.less";
 @import "./style/tabbar.less";
 @import "./style/toolbar.less";
 @import "./style/topbar.less";
+@import "./style/view.less";
diff --git a/src/core/style/view.less b/src/core/style/view.less
index ba59dbf9..d7247326 100644
--- a/src/core/style/view.less
+++ b/src/core/style/view.less
@@ -21,16 +21,19 @@
   min-height: 85%;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: -100%;
   z-index: 10002;
   background-color: var(--VC-BG-0);
-  -webkit-transition: -webkit-transform .3s;
-  transition: -webkit-transform .3s;
-  transition: transform .3s;
-  transition: transform .3s, -webkit-transform .3s;
+  // transition: -webkit-transform .3s;
+  // transition: transform .3s;
+  // transition: transform .3s, -webkit-transform .3s;
+  // -webkit-transition: -webkit-transform .3s;
+
+  // transform: translate(0, 100%);
+  // -webkit-transform: translate(0, 100%);
 
-  -webkit-transform: translate(0, 100%);
-  transform: translate(0, 100%);
+  // use `bottom` instead of `transform` to prevent animation fail in WeChat webview
+  transition: bottom .3s;
 }
 
 .vc-toggle {
@@ -45,8 +48,9 @@
   }
 
   .vc-panel {
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
+    bottom: 0;
+    // -webkit-transform: translate(0, 0);
+    // transform: translate(0, 0);
   }
 }
 

From 4da8afe23f3f9d57ea1c43d032fe56d297f5227a Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Thu, 10 Mar 2022 20:49:53 +0800
Subject: [PATCH 6/8] docs: update docs

---
 CHANGELOG.md    | 1 +
 CHANGELOG_CN.md | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7738dba4..2d64923a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 - `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
 - `Fix(Core)` Use polyfill `click` event to prevent raw click event not working in some cases.
+- `Fix(style)` Fix CSS transition failure in WeChat webview by using `bottom` instead of `transform`.
 - `Refactor(Storage)` Improve robustness.
 
 
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index fee4dad5..37c29f32 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -4,6 +4,8 @@
 
 - `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
 - `Fix(Core)` 使用模拟的 `click` 事件以避免某些场景下原生 click 事件不生效的问题。
+- `Fix(style)` 修复微信 Webview 中的 CSS transition 失效的问题，通过使用 `bottom` 而非 `transform`。
+- `Refactor(Storage)` 提高健壮性。
 
 
 ## 3.12.1 (2022-02-25)

From dd9e53b3bc4dfd69fc06cfb7103f2aa2814b71aa Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Tue, 15 Mar 2022 19:36:03 +0800
Subject: [PATCH 7/8] fix(Core): Fix error when calling vConsole method in
 `onReady` callback. (issue #516)

---
 CHANGELOG.md         | 55 ++++++++++++++++++++++----------------------
 CHANGELOG_CN.md      | 53 +++++++++++++++++++++---------------------
 src/core/core.svelte |  7 ++++--
 src/core/core.ts     |  5 +++-
 4 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d64923a..ca06a09e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 - `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
 - `Fix(Core)` Use polyfill `click` event to prevent raw click event not working in some cases.
 - `Fix(style)` Fix CSS transition failure in WeChat webview by using `bottom` instead of `transform`.
+- `Fix(Core)` Fix error when calling vConsole method in `onReady` callback. (issue #516)
 - `Refactor(Storage)` Improve robustness.
 
 
@@ -44,7 +45,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 ## 3.11.0 (2021-12-30)
 
-- `Feat(Global)` Add new option `vConsole.option.target` to specify custom mount target, see [Public Properties & Methods](./doc/public_properties_methods.md). (issue #455)
+- `Feat(Core)` Add new option `vConsole.option.target` to specify custom mount target, see [Public Properties & Methods](./doc/public_properties_methods.md). (issue #455)
 - `Feat(Log)` Add new methods: `vConsole.log.log()|info()|...`, `vConsole.log.clear()`, see [Builtin Plugin: Properties & Methods](./doc/plugin_properties_methods.md).
 - `Feat(Network)` Add new methods: `vConsole.network.add()|update()`, `vConsole.network.clear()`, see [Builtin Plugin: Properties & Methods](./doc/plugin_properties_methods.md).
 - `Feat(Network)` Add new option `vConsole.option.maxNetworkNumber` to limit request number, see [Public Properties & Methods](./doc/public_properties_methods.md). (issue #492)
@@ -92,7 +93,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 - `Style(Log)` Add support for `BigInt` and update `Symbol` log style.
 - `Refactor(Style)` Lazy load style tag when vConsole init.
-- `Fix(Global)` Use `this || self` as `globalObject` to prevent `self is not defined` error. (issue #441)
+- `Fix(Core)` Use `this || self` as `globalObject` to prevent `self is not defined` error. (issue #441)
 - `Fix(Log)` Fix `Cannot convert a Symbol value to a string` error when logged a `Symbol` value.
 - `Fix(Log)` Now commands and output logs can be copied.
 - `Fix(Network)` Fix `URIError` when decode URI fail. (issue #470)
@@ -102,7 +103,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 ## 3.9.4 (2021-10-26)
 
-- `Refactor(Global)` Add Typescript declaration to `VConsole` class.
+- `Refactor(Core)` Add Typescript declaration to `VConsole` class.
 
 
 ## 3.9.3 (2021-10-22)
@@ -125,7 +126,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 - `Feat(Log)` Show audio loading error log. (PR #419 by @zimv)
 - `Feat(Storage)` Rewrite Storage panel, supports add/edit/delete storage items. (PR #429 by @ManiaciaChao)
 - `Feat(Plugin)` New third-party plugin [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole). (by @vadxq)
-- `Refactor(Global)` Use Svelte as template engine. (PR #429 by @ManiaciaChao)
+- `Refactor(Core)` Use Svelte as template engine. (PR #429 by @ManiaciaChao)
 - `Refactor(Core|Element)` Convert core file and Element panel to `.ts` file.
 - `Fix(Log)` Fix error when print object(s) with no `toJSON` method such as `Vue` instance. (PR #431 by @sillyhong)
 - `Fix(Network)` Fix error when url not starts with `http`. (issue #420)
@@ -155,7 +156,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 - `Feat(Storage)` Show preview value to prevent large raw value blocking rendering. (issue #300)
 - `Feat(Storage)` Add copy button and delete button.
-- `Feat(Global)` Use system theme color by default when init option `theme` is empty.
+- `Feat(Core)` Use system theme color by default when init option `theme` is empty.
 - `Refactor(Storage)` Convert Storage panel to `.ts` file.
 - `Fix(Network)` Use `forEach` instead of `.entries()` when traversing `headers`. (issue #404)
 - `Fix(Network)` Fix error when `Content-Type` is empty.
@@ -171,7 +172,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 - `Feat(Log)` Print `unhandledrejection` log. (PR #389 by @zimv)
 - `Feat(Network)` Support `navigator.sendBeacon()` in Network panel. (PR #383 by @cola119)
 - `Feat(Network)` Display "Type" (Request Type) in "General", including `xhr|fetch|ping`.
-- `Refactor(Global)` Use TypeScript. Now Network panel is conveted to `.ts` file.
+- `Refactor(Core)` Use TypeScript. Now Network panel is conveted to `.ts` file.
 - `Fix(Network)` Recover original `window.fetch()` method when remove Network panel.
 - `Fix(Storage)` Fix issue that the cookie of the non-first-level domain cannot be deleted. (issue #398)
 - `Fix(Element)` Fix issue that elements are rendered as nested when `attributes` or `characterData` changed. (issue #399)
@@ -179,8 +180,8 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 ## 3.5.2 (2021-05-13)
 
-- `Chore(Global)` Update to Webpack5 and update all NPM packages to the latest version.
-- `Fix(Global)` Fix invalid click caused by wrong `selection`.
+- `Chore(Core)` Update to Webpack5 and update all NPM packages to the latest version.
+- `Fix(Core)` Fix invalid click caused by wrong `selection`.
 - `Fix(Log)` Delete `cachedLogs` when reached `maxLogNumber` limit.
 - `Fix(Log)` Fix XSS risk.
 
@@ -203,32 +204,32 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 ## v3.4.1 (2021-04-09)
 
-- `Feat(Global)` Add `setSwitchPosition(x, y)` method to update the position of switch button, see [Public Properties & Methods](./doc/public_properties_methods.md) for more details.
-- `Perf(Global)` Add `Symbol` polyfill. (issue #361)
-- `Fix(Global)` Update theme style after `setOption()`.
-- `Fix(Global)` Remove `transitionEnd` to prevent compatibility issues. (issue #364)
+- `Feat(Core)` Add `setSwitchPosition(x, y)` method to update the position of switch button, see [Public Properties & Methods](./doc/public_properties_methods.md) for more details.
+- `Perf(Core)` Add `Symbol` polyfill. (issue #361)
+- `Fix(Core)` Update theme style after `setOption()`.
+- `Fix(Core)` Remove `transitionEnd` to prevent compatibility issues. (issue #364)
 - `Fix(Network)` Fix `fetch` optional parameter `init`. (issue #363, #365)
 - `Fix(Network)` Fix XSS risks.
 
 
 ## v3.4.0 (2021-01-14)
 
-- `Feat(Global)` Add darkmode theme, see `vConsole.option.theme` in [Public Properties & Methods](./doc/public_properties_methods.md). (PR #307 by @progrape)
-- `Feat(Global)` Add safe area to switch button. (issue #353)
+- `Feat(Core)` Add darkmode theme, see `vConsole.option.theme` in [Public Properties & Methods](./doc/public_properties_methods.md). (PR #307 by @progrape)
+- `Feat(Core)` Add safe area to switch button. (issue #353)
 - `Feat(Log)` Auto move input cursor to the bracket after autocomplete command. (issue #293)
 - `Feat(System)` Add `Location` info to System tab. (issue #343)
 - `Feat(Network)` Add `fetch` log in Network tab. (by @weiqian93)
 - `Feat(Network)` Add Request Headers to Network tab.
 - `Feat(Network)` Use short URL and display parameters in Network tab. (issue #291)
 - `Feat(Plugin)` New third-party plugin [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats). (by @smackgg)
-- `Fix(Global)` The position of the switch button will be reset by mistake when clicked.
-- `Fix(Global)` Fix `document.documentElement.offsetHeight|offsetWidth` is unreliable in newer browsers. (PR #314 by @littlee)
-- `Fix(Global)` Prevent dispatchEvent for disabled or readOnly elements. (PR #314 by @norux)
-- `Fix(Global)` Fix nonce searching problem. (by @sunderls)
-- `Fix(Global)` Fix security issues. (#345 by @QiAnXinCodeSafe)
-- `Fix(Global)` Prevent "webkitStorageInfo deprecation" warning.
-- `Perf(Global)` Remove `Symbol`, `Array.from` polyfill. (issue #325, #275)
-- `Perf(Global)` Show all enumerable and unenumerable properties. (issue #327)
+- `Fix(Core)` The position of the switch button will be reset by mistake when clicked.
+- `Fix(Core)` Fix `document.documentElement.offsetHeight|offsetWidth` is unreliable in newer browsers. (PR #314 by @littlee)
+- `Fix(Core)` Prevent dispatchEvent for disabled or readOnly elements. (PR #314 by @norux)
+- `Fix(Core)` Fix nonce searching problem. (by @sunderls)
+- `Fix(Core)` Fix security issues. (#345 by @QiAnXinCodeSafe)
+- `Fix(Core)` Prevent "webkitStorageInfo deprecation" warning.
+- `Perf(Core)` Remove `Symbol`, `Array.from` polyfill. (issue #325, #275)
+- `Perf(Core)` Show all enumerable and unenumerable properties. (issue #327)
 - `Chore` Update Webpack DevServer option. (by @QinZhen001)
 
 
@@ -236,17 +237,17 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 - `Feat(Log)` Add `%c` log format to support custom log style, see [Tutorial](./doc/tutorial.md) for more details.
 - `Feat(Plugin)` Add `VConsole.VConsoleLogPlugin` (`VConsole.VConsole*` plugins etc.) to `VConsole` class.
-- `Fix(Global)` Fix a few minor issues. (#267 by @Molunerfinn, #272 by @domom)
+- `Fix(Core)` Fix a few minor issues. (#267 by @Molunerfinn, #272 by @domom)
 - `Fix(Storage)` Fix remove cookie fail when it is set path=/ or top domain. (#264 by @qianxinfeng)
-- `Perf(Global)` Display vConsole on `window DOMContentLoaded` instead of `window load`.
+- `Perf(Core)` Display vConsole on `window DOMContentLoaded` instead of `window load`.
 
 
 ## v3.3.2 (2019-07-04)
 
-- `Feat(Global)` Add TypeScript definition file. (by @jas0ncn)
+- `Feat(Core)` Add TypeScript definition file. (by @jas0ncn)
 - `Fix(Log)` Avoid scrolling to bottom when away from bottom edge. (by @ele828)
-- `Fix(Global)` Fix switch button position issue. (by @rexschuang)
-- `Fix(Global)` Fix a few minor issues. (by @stenders)
+- `Fix(Core)` Fix switch button position issue. (by @rexschuang)
+- `Fix(Core)` Fix a few minor issues. (by @stenders)
 
 
 ## v3.3.0 (2019-02-02)
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index 37c29f32..ff95c65a 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -5,6 +5,7 @@
 - `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
 - `Fix(Core)` 使用模拟的 `click` 事件以避免某些场景下原生 click 事件不生效的问题。
 - `Fix(style)` 修复微信 Webview 中的 CSS transition 失效的问题，通过使用 `bottom` 而非 `transform`。
+- `Fix(Core)` 修复在 `onReady` 回调中调用 vConsole 方法导致报错的问题。 (issue #516)
 - `Refactor(Storage)` 提高健壮性。
 
 
@@ -44,7 +45,7 @@
 
 ## 3.11.0 (2021-12-30)
 
-- `Feat(Global)` 支持自定义挂载点，配置项 `vConsole.option.target` 见 [公共属性及方法](./doc/public_properties_methods_CN.md)。 (issue #455)
+- `Feat(Core)` 支持自定义挂载点，配置项 `vConsole.option.target` 见 [公共属性及方法](./doc/public_properties_methods_CN.md)。 (issue #455)
 - `Feat(Log)` 新增插件方法 `vConsole.log.log()|info()|...`、`vConsole.log.clear()`，见 [内置插件：属性及方法](./doc/plugin_properties_methods_CN.md)。
 - `Feat(Network)` 新增插件方法 `vConsole.network.add()|update()`、`vConsole.network.clear()`，见 [内置插件：属性及方法](./doc/plugin_properties_methods_CN.md)。
 - `Feat(Network)` 支持限制请求数量，配置项 `vConsole.option.maxNetworkNumber`见 [公共属性及方法](./doc/public_properties_methods_CN.md)。 (issue #492)
@@ -91,7 +92,7 @@
 
 - `Style(Log)` 支持 `BigInt` 类型并更新 `Symbol` 类型的样式。
 - `Refactor(Style)` 在 vConsole 初始化时再懒加载 style 标签（而非 import 后就加载）。
-- `Fix(Global)` 使用 `this || self` 作为 `globalObject`，以避免 `self is not defined` 错误。 (issue #441)
+- `Fix(Core)` 使用 `this || self` 作为 `globalObject`，以避免 `self is not defined` 错误。 (issue #441)
 - `Fix(Log)` 修复打印 `Symbol` 类型时产生的 `Cannot convert a Symbol value to a string` 错误。
 - `Fix(Log)` 修复 commands 命令及其输出结果无法复制的问题。
 - `Fix(Network)` 修复解码 URL 参数时产生的 `URIError` 错误。 (issue #470)
@@ -101,7 +102,7 @@
 
 ## 3.9.4 (2021-10-26)
 
-- `Refactor(Global)` 为 `VConsole` 类的方法参数添加 Typescript 声明.
+- `Refactor(Core)` 为 `VConsole` 类的方法参数添加 Typescript 声明.
 
 
 ## 3.9.3 (2021-10-22)
@@ -124,7 +125,7 @@
 - `Feat(Log)` 显示 audio 资源加载失败的报错。 (PR #419 by @zimv)
 - `Feat(Storage)` 重写 Storage 面板，现支持添加/编辑/删除内容。 (PR #429 by @ManiaciaChao)
 - `Feat(Plugin)` 新增第三方插件 [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole)。 (by @vadxq)
-- `Refactor(Global)` 开始使用 Svelte 作为模板引擎。 (PR #429 by @ManiaciaChao)
+- `Refactor(Core)` 开始使用 Svelte 作为模板引擎。 (PR #429 by @ManiaciaChao)
 - `Refactor(Core|Element)` 转换 core 文件及 Element 面板为 `.ts` 文件。
 - `Fix(Log)` 修复打印无 `toJSON` 方法的对象（如 `Vue` 实例）时会报错的问题。 (PR #431 by @sillyhong)
 - `Fix(Network)` 修复不以 `http` 开头的 url 会报错的问题。 (issue #420)
@@ -154,7 +155,7 @@
 
 - `Feat(Storage)` 对于大体积 value 先展示预览值，以避免堵塞渲染。 (issue #300)
 - `Feat(Storage)` 新增复制按钮、删除按钮。
-- `Feat(Global)` 当初始参数 `theme` 为空时，跟随系统默认主题色。
+- `Feat(Core)` 当初始参数 `theme` 为空时，跟随系统默认主题色。
 - `Refactpr(Storage)` 转换 Storage 面板为 `.ts` 文件。
 - `Fix(Network)` 使用 `forEach` 而非 `.entries()` 来遍历 `headers` 以避免一些兼容性问题。 (issue #404)
 - `Fix(Network)` 修复 `Content-Type` 为空时导致的报错。
@@ -170,7 +171,7 @@
 - `Feat(Log)` 新增输出 `unhandledrejection` 类型日志。 (PR #389 by @zimv)
 - `Feat(Network)` 新增支持展示 `navigator.sendBeacon()` 的网络请求。 (PR #383 by @cola119)
 - `Feat(Network)` 新增在 "General" 栏目展示 "Type" (Request Type) 字段，取值包括 `xhr|fetch|ping`。
-- `Refactpr(Global)` 开始使用 TypeScript 重构代码。现在 Network 面板首先转成了 `.ts` 文件。
+- `Refactpr(Core)` 开始使用 TypeScript 重构代码。现在 Network 面板首先转成了 `.ts` 文件。
 - `Fix(Network)` 修复移除 Network 面板后没有恢复原生 `window.fetch()` 方法的问题。
 - `Fix(Storage)` 修复清除所有 cookie 时无法完全删除非顶级域名下的 cookie 的问题。 (issue #398)
 - `Fix(Element)` 修复当 element 的 `attributes` 或 `characterData` 变化时 element 被嵌套渲染的问题。 (issue #399)
@@ -179,7 +180,7 @@
 ## 3.5.2 (2021-05-13)
 
 - `Chore` 升级到 Webpack5，并升级所有 NPM packages 到最新版本。
-- `Fix(Global)` 修复因 `selection` 选区引起的点击事件无效问题。
+- `Fix(Core)` 修复因 `selection` 选区引起的点击事件无效问题。
 - `Fix(Log)` 当日志数量达到 `maxLogNumber` 上限时清空对应的 `cachedLogs`。
 - `Fix(Log)` 修复 XSS 漏洞。
 
@@ -202,32 +203,32 @@
 
 ## v3.4.1 (2021-04-09)
 
-- `Feature(Global)` 新增 `setSwitchPosition(x, y)` 方法以更新开关按钮的位置，见 [Public Properties & Methods](./doc/public_properties_methods_CN.md)。
-- `Perf(Global)` 添加 `Symbol` polyfill。(issue #361)
-- `Fix(Global)` 修复 `setOption()` 后主题样式未及时更新的问题。
-- `Fix(Global)` 删除 `transitionEnd` 以避免一些兼容性问题。(issue #364)
+- `Feature(Core)` 新增 `setSwitchPosition(x, y)` 方法以更新开关按钮的位置，见 [Public Properties & Methods](./doc/public_properties_methods_CN.md)。
+- `Perf(Core)` 添加 `Symbol` polyfill。(issue #361)
+- `Fix(Core)` 修复 `setOption()` 后主题样式未及时更新的问题。
+- `Fix(Core)` 删除 `transitionEnd` 以避免一些兼容性问题。(issue #364)
 - `Fix(Network)` 修复 `fetch` 的 `init` 未考虑为可选参数的问题。(issue #363, #365)
 - `Fix(Network)` 修复 XSS 漏洞。
 
 
 ## v3.4.0 (2021-01-14)
 
-- `Feature(Global)` 支持暗黑模式，配置项 `vConsole.option.theme` 见 [Public Properties & Methods](./doc/public_properties_methods_CN.md)。(by @progrape)
-- `Feature(Global)` 开关按钮加入拖拽安全区，避免遮挡全面屏手机底部操作区。(issue #353)
+- `Feature(Core)` 支持暗黑模式，配置项 `vConsole.option.theme` 见 [Public Properties & Methods](./doc/public_properties_methods_CN.md)。(by @progrape)
+- `Feature(Core)` 开关按钮加入拖拽安全区，避免遮挡全面屏手机底部操作区。(issue #353)
 - `Feature(Log)` 指令输入框键入括号且自动补全括号后，光标将自动移动到括号内部。(issue #293)
 - `Feature(System)` 增加显示 `Location` 信息。(issue #343)
 - `Feature(Network)`支持 `fetch` 网络记录。(by @weiqian93)
 - `Feature(Network)` 支持显示 Request Headers。
 - `Feature(Network)` 仅显示简短网址，URL 参数将显示在详细信息中。(issue #291)
 - `Feature(Plugin)` 新第三方插件 [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats)。(by @smackgg)
-- `Fix(Global)` 修复点击开关按钮后位置会被重置的问题。
-- `Fix(Global)` 修复 `document.documentElement.offsetHeight|offsetWidth` 在新浏览器中不够准确的问题。(by @littlee)
-- `Fix(Global)` 阻止用户事件派发到 readOnly 或 disabled 的 element 上。(by @norux)
-- `Fix(Global)` 修复 nonce 查找不准确的问题。(by @sunderls)
-- `Fix(Global)` 修复一个安全问题。(#345 by @QiAnXinCodeSafe)
-- `Fix(Global)` 屏蔽 "webkitStorageInfo deprecation" 告警。
-- `Perf(Global)` 删除 `Symbol`、`Array.from` polyfill。(issue #325, #275)
-- `Perf(Global)` 日志中显示对象内所有的 enumerable 和 unenumerable 属性。 (issue #327)
+- `Fix(Core)` 修复点击开关按钮后位置会被重置的问题。
+- `Fix(Core)` 修复 `document.documentElement.offsetHeight|offsetWidth` 在新浏览器中不够准确的问题。(by @littlee)
+- `Fix(Core)` 阻止用户事件派发到 readOnly 或 disabled 的 element 上。(by @norux)
+- `Fix(Core)` 修复 nonce 查找不准确的问题。(by @sunderls)
+- `Fix(Core)` 修复一个安全问题。(#345 by @QiAnXinCodeSafe)
+- `Fix(Core)` 屏蔽 "webkitStorageInfo deprecation" 告警。
+- `Perf(Core)` 删除 `Symbol`、`Array.from` polyfill。(issue #325, #275)
+- `Perf(Core)` 日志中显示对象内所有的 enumerable 和 unenumerable 属性。 (issue #327)
 - `Chore` 更新 Webpack DevServer 的配置项。(by @QinZhen001)
 
 
@@ -235,16 +236,16 @@
 
 - `Feature(Log)` 增加 `%c` 以支持自定义日志样式，详情见 [使用教程](./doc/tutorial_CN.md)。
 - `Feature(Plugin)` 增加 `VConsole.VConsoleLogPlugin` 等 `VConsole.VConsole*` 内置插件在 `VConsole` class 上的挂载。
-- `Fix(Global)` 修复若干小问题。(#267 by @Molunerfinn, #272 by @domom)
+- `Fix(Core)` 修复若干小问题。(#267 by @Molunerfinn, #272 by @domom)
 - `Fix(Storage)` 修复当 cookie `path=/` 或设置了 `domain` 时删除失败的问题。(#264 by @qianxinfeng)
-- `Perf(Global)` 在 `window DOMContentLoaded` 而不是 `window load` 时显示 vConsole。
+- `Perf(Core)` 在 `window DOMContentLoaded` 而不是 `window load` 时显示 vConsole。
 
 
 ## v3.3.2 (2019-07-04)
 
-- `Feature(Global)` 增加 TypeScript 声明文件。（by @jas0ncn）
-- `Fix(Global)` 修复开关按钮拖动后位置不对的问题。（by @rexschuang）
-- `Fix(Global)` 修复若干小问题。（by @stenders）
+- `Feature(Core)` 增加 TypeScript 声明文件。（by @jas0ncn）
+- `Fix(Core)` 修复开关按钮拖动后位置不对的问题。（by @rexschuang）
+- `Fix(Core)` 修复若干小问题。（by @stenders）
 - `Fix(Log)` 不在列表底部时避免自动滚动。（by @ele828）
 
 
diff --git a/src/core/core.svelte b/src/core/core.svelte
index 0c94f0fd..b1b7adb9 100644
--- a/src/core/core.svelte
+++ b/src/core/core.svelte
@@ -42,6 +42,7 @@
   let showMask = false;
   let isInBottom = true;
   let preivousContentUpdateTime = 0;
+  let cssTimer = null;
 
   $: {
     if (show === true) {
@@ -50,13 +51,15 @@
       showPanel = true;
       showMask = true;
       // set 10ms delay to fix confict between display and transition
-      setTimeout(() => {
+      cssTimer && clearTimeout(cssTimer);
+      cssTimer = setTimeout(() => {
         showMain = true;
         autoScrollToBottom();
       }, 10);
     } else {
       showMain = false;
-      setTimeout(() => {
+      cssTimer && clearTimeout(cssTimer);
+      cssTimer = setTimeout(() => {
         // panel will be hidden by CSS transition in 0.3s
         showPanel = false;
         showMask = false;
diff --git a/src/core/core.ts b/src/core/core.ts
index 9e18fcdb..86dad372 100644
--- a/src/core/core.ts
+++ b/src/core/core.ts
@@ -281,7 +281,10 @@ export class VConsole {
   public triggerEvent(eventName: string, param?: any) {
     eventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
     if (tool.isFunction(this.option[eventName])) {
-      this.option[eventName].apply(this, param);
+      setTimeout(() => {
+        console.log('triggerEvent', eventName);
+        this.option[eventName].apply(this, param);
+      }, 0);
     }
   }
 

From 0a0cb1ef9f8f072f6a06940a428337a474ce0481 Mon Sep 17 00:00:00 2001
From: Maiz <lariagle@gmail.com>
Date: Tue, 15 Mar 2022 19:42:08 +0800
Subject: [PATCH 8/8] chore: v3.13.0

---
 CHANGELOG.md    | 2 +-
 CHANGELOG_CN.md | 2 +-
 package.json    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca06a09e..f88bb55a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
-## 3.13.0-rc (2022-03-??)
+## 3.13.0 (2022-03-15)
 
 - `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
 - `Fix(Core)` Use polyfill `click` event to prevent raw click event not working in some cases.
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index ff95c65a..61108d8a 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -1,6 +1,6 @@
 [English](./CHANGELOG.md) | 简体中文
 
-## 3.13.0-rc (2022-03-??)
+## 3.13.0 (2022-03-15)
 
 - `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
 - `Fix(Core)` 使用模拟的 `click` 事件以避免某些场景下原生 click 事件不生效的问题。
diff --git a/package.json b/package.json
index 3056ff95..42c4b402 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.13.0-rc",
+  "version": "3.13.0",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [