历史记录功能升级 #31

json输入框高度动态设置 #30

package-lock.json

 {
     "name": "c-tool",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -2954,7 +2954,7 @@
         },
         "JSV": {
             "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz",
+            "resolved": "https://registry.npm.taobao.org/JSV/download/JSV-4.0.2.tgz",
             "integrity": "sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c="
         },
         "accepts": {
@@ -3006,7 +3006,7 @@
         },
         "ajax-request": {
             "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/ajax-request/-/ajax-request-1.2.3.tgz",
+            "resolved": "https://registry.npm.taobao.org/ajax-request/download/ajax-request-1.2.3.tgz",
             "integrity": "sha1-mfy+wdbSeS+F+pSVNTMr0U9fN5A=",
             "requires": {
                 "file-system": "^2.1.1",
@@ -3254,9 +3254,9 @@
             "dev": true
         },
         "async-validator": {
-            "version": "3.4.0",
-            "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.4.0.tgz",
-            "integrity": "sha512-VrFk4eYiJAWKskEz115iiuCf9O0ftnMMPXrOFMqyzGH2KxO7YwncKyn/FgOOP+0MDHMfXL7gLExagCutaZGigA=="
+            "version": "3.5.1",
+            "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.1.tgz",
+            "integrity": "sha512-DDmKA7sdSAJtTVeNZHrnr2yojfFaoeW8MfQN8CeuXg8DDQHTqKk9Fdv38dSvnesHoO8MUwMI2HphOeSyIF+wmQ=="
         },
         "asynckit": {
             "version": "0.4.0",
@@ -3414,7 +3414,7 @@
         },
         "babel-runtime": {
             "version": "6.26.0",
-            "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+            "resolved": "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
             "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
             "requires": {
                 "core-js": "^2.4.0",
@@ -3502,7 +3502,7 @@
         },
         "batch-processor": {
             "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+            "resolved": "http://registry.npm.taobao.org/batch-processor/download/batch-processor-1.0.0.tgz",
             "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
         },
         "bcrypt-pbkdf": {
@@ -3783,7 +3783,7 @@
         },
         "buffer-fill": {
             "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+            "resolved": "http://registry.npm.taobao.org/buffer-fill/download/buffer-fill-1.0.0.tgz",
             "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
         },
         "buffer-from": {
@@ -4685,18 +4685,18 @@
             }
         },
         "cron-parser": {
-            "version": "2.16.3",
-            "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-2.16.3.tgz",
-            "integrity": "sha512-XNJBD1QLFeAMUkZtZQuncAAOgJFWNhBdIbwgD22hZxrcWOImBFMKgPC66GzaXpyoJs7UvYLLgPH/8BRk/7gbZg==",
+            "version": "2.18.0",
+            "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-2.18.0.tgz",
+            "integrity": "sha512-s4odpheTyydAbTBQepsqd2rNWGa2iV3cyo8g7zbI2QQYGLVsfbhmwukayS1XHppe02Oy1fg7mg6xoaraVJeEcg==",
             "requires": {
                 "is-nan": "^1.3.0",
                 "moment-timezone": "^0.5.31"
             }
         },
         "cronstrue": {
-            "version": "1.100.0",
-            "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-1.100.0.tgz",
-            "integrity": "sha512-Hz+xjjmq2QgCQhnPxIVM02dwhOt5GwUywjKa17je9JWX4z2E0uecObXCFap8bmJE87JL9mToW/cGw5O06JgigQ=="
+            "version": "1.105.0",
+            "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-1.105.0.tgz",
+            "integrity": "sha512-Bv8GHi5uJvxtq/9T7lgBwum7UVKMfR+LSPHZXiezP0E5gnODPVRQBAkCwijCIaWEepqmRcxTAxrUFB0UQK2wdw=="
         },
         "cross-spawn": {
             "version": "6.0.5",
@@ -5321,7 +5321,7 @@
         },
         "dijkstrajs": {
             "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+            "resolved": "https://registry.npm.taobao.org/dijkstrajs/download/dijkstrajs-1.0.1.tgz",
             "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
         },
         "dir-glob": {
@@ -6400,7 +6400,7 @@
         },
         "file-match": {
             "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/file-match/-/file-match-1.0.2.tgz",
+            "resolved": "https://registry.npm.taobao.org/file-match/download/file-match-1.0.2.tgz",
             "integrity": "sha1-ycrSZdLIrfOoFHWw30dYWQafrvc=",
             "requires": {
                 "utils-extend": "^1.0.6"
@@ -6408,7 +6408,7 @@
         },
         "file-system": {
             "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/file-system/-/file-system-2.2.2.tgz",
+            "resolved": "https://registry.npm.taobao.org/file-system/download/file-system-2.2.2.tgz",
             "integrity": "sha1-fWWDPjojR9zZVqgTxncVPtPt2Yc=",
             "requires": {
                 "file-match": "^1.0.1",
@@ -7395,7 +7395,7 @@
         },
         "has-color": {
             "version": "0.1.7",
-            "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
+            "resolved": "https://registry.npm.taobao.org/has-color/download/has-color-0.1.7.tgz",
             "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8="
         },
         "has-flag": {
@@ -7990,7 +7990,7 @@
         },
         "ipinyinjs": {
             "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/ipinyinjs/-/ipinyinjs-1.0.0.tgz",
+            "resolved": "https://registry.npm.taobao.org/ipinyinjs/download/ipinyinjs-1.0.0.tgz",
             "integrity": "sha1-NlEy7jIB6ncjQigicCXTpDE6q34="
         },
         "is-absolute-url": {
@@ -8621,32 +8621,32 @@
         },
         "lodash.isarray": {
             "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.3.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.isarray/download/lodash.isarray-3.0.3.tgz",
             "integrity": "sha1-TboTmi2QfCT9CWhJzkLxnCVSNVM="
         },
         "lodash.isboolean": {
             "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.1.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.isboolean/download/lodash.isboolean-3.0.1.tgz",
             "integrity": "sha1-78xyujJHQ67YimGIta2qWNnDGaQ="
         },
         "lodash.isnull": {
             "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.isnull/download/lodash.isnull-3.0.0.tgz",
             "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
         },
         "lodash.isnumber": {
             "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.1.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.isnumber/download/lodash.isnumber-3.0.1.tgz",
             "integrity": "sha1-YoofPxmOLdzSt+uRY1QLZ3YlWYU="
         },
         "lodash.isobject": {
             "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.isobject/download/lodash.isobject-3.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.isobject%2Fdownload%2Flodash.isobject-3.0.2.tgz",
             "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
         },
         "lodash.isstring": {
             "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-3.0.1.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.isstring/download/lodash.isstring-3.0.1.tgz",
             "integrity": "sha1-QWOJROoELvZ61nwpOqVB0/PW5Tw="
         },
         "lodash.kebabcase": {
@@ -8669,7 +8669,7 @@
         },
         "lodash.throttle": {
             "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+            "resolved": "http://registry.npm.taobao.org/lodash.throttle/download/lodash.throttle-4.1.1.tgz",
             "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
         },
         "lodash.transform": {
@@ -9039,14 +9039,14 @@
             }
         },
         "moment": {
-            "version": "2.27.0",
-            "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.27.0.tgz?cache=0&sync_timestamp=1592516084857&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.27.0.tgz",
-            "integrity": "sha1-i/9OPiaiNiIN/j423nVrbrqgEF0="
+            "version": "2.29.1",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+            "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
         },
         "moment-timezone": {
-            "version": "0.5.31",
-            "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.31.tgz",
-            "integrity": "sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==",
+            "version": "0.5.32",
+            "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.32.tgz",
+            "integrity": "sha512-Z8QNyuQHQAmWucp8Knmgei8YNo28aLjJq6Ma+jy1ZSpSk5nyfRT8xgUbSQvD2+2UajISfenndwvFuH3NGS+nvA==",
             "requires": {
                 "moment": ">= 2.9.0"
             }
@@ -9238,7 +9238,7 @@
         },
         "nomnom": {
             "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
+            "resolved": "https://registry.npm.taobao.org/nomnom/download/nomnom-1.8.1.tgz",
             "integrity": "sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=",
             "requires": {
                 "chalk": "~0.4.0",
@@ -9247,12 +9247,12 @@
             "dependencies": {
                 "ansi-styles": {
                     "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
+                    "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-1.0.0.tgz",
                     "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg="
                 },
                 "chalk": {
                     "version": "0.4.0",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
+                    "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-0.4.0.tgz",
                     "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
                     "requires": {
                         "ansi-styles": "~1.0.0",
@@ -9262,7 +9262,7 @@
                 },
                 "strip-ansi": {
                     "version": "0.1.1",
-                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
+                    "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-0.1.1.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-0.1.1.tgz",
                     "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE="
                 }
             }
@@ -9816,7 +9816,7 @@
         },
         "phparr": {
             "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/phparr/-/phparr-0.2.0.tgz",
+            "resolved": "https://registry.npm.taobao.org/phparr/download/phparr-0.2.0.tgz",
             "integrity": "sha1-WeqkMXLYSM7x3QMJtHLDfOkRTWU=",
             "requires": {
                 "lodash.isarray": "3.0.3",
@@ -10731,9 +10731,9 @@
             "dev": true
         },
         "query-string": {
-            "version": "6.13.1",
-            "resolved": "https://registry.npm.taobao.org/query-string/download/query-string-6.13.1.tgz?cache=0&sync_timestamp=1591853346096&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquery-string%2Fdownload%2Fquery-string-6.13.1.tgz",
-            "integrity": "sha1-2RPM/OO0s6cTmJ/m05Rm2S5xzK0=",
+            "version": "6.13.7",
+            "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.7.tgz",
+            "integrity": "sha512-CsGs8ZYb39zu0WLkeOhe0NMePqgYdAuCqxOYKDR5LVCytDZYMGx3Bb+xypvQvPHVPijRXB0HZNFllCzHRe4gEA==",
             "requires": {
                 "decode-uri-component": "^0.2.0",
                 "split-on-first": "^1.0.0",
@@ -10767,7 +10767,7 @@
         },
         "radix.js": {
             "version": "0.0.1",
-            "resolved": "https://registry.npmjs.org/radix.js/-/radix.js-0.0.1.tgz",
+            "resolved": "https://registry.npm.taobao.org/radix.js/download/radix.js-0.0.1.tgz",
             "integrity": "sha1-rvAZaRF+YgL4cZcJX95z+7MQ8C8="
         },
         "randombytes": {
@@ -11365,7 +11365,7 @@
         },
         "serialize-php": {
             "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/serialize-php/-/serialize-php-1.1.2.tgz",
+            "resolved": "https://registry.npm.taobao.org/serialize-php/download/serialize-php-1.1.2.tgz",
             "integrity": "sha1-rtn4fFazb1hr466Pk2s1VlR/b8o="
         },
         "serve-index": {
@@ -11853,8 +11853,8 @@
         },
         "split-on-first": {
             "version": "1.1.0",
-            "resolved": "https://registry.npm.taobao.org/split-on-first/download/split-on-first-1.1.0.tgz",
-            "integrity": "sha1-9hCv7uOxK84dDDBCXnY5i3gkml8="
+            "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+            "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
         },
         "split-string": {
             "version": "3.1.0",
@@ -12334,9 +12334,9 @@
             "dev": true
         },
         "tinycolor2": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
-            "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+            "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
         },
         "tmp": {
             "version": "0.0.33",
@@ -12513,7 +12513,7 @@
         },
         "underscore": {
             "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+            "resolved": "https://registry.npm.taobao.org/underscore/download/underscore-1.6.0.tgz",
             "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
         },
         "unicode-canonical-property-names-ecmascript": {
@@ -12759,7 +12759,7 @@
         },
         "utils-extend": {
             "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/utils-extend/-/utils-extend-1.0.8.tgz",
+            "resolved": "https://registry.npm.taobao.org/utils-extend/download/utils-extend-1.0.8.tgz",
             "integrity": "sha1-zP17ZFQPjpDuIe7Fd2nQZRyril8="
         },
         "utils-merge": {
@@ -12813,9 +12813,9 @@
             }
         },
         "view-design": {
-            "version": "4.3.2",
-            "resolved": "https://registry.npmjs.org/view-design/-/view-design-4.3.2.tgz",
-            "integrity": "sha512-58GH2fu5TVtUeeXWWu0VQXqgV01fGKHXhViw4p80OM/+SzhCJS2qzZYYpVyXaGKQM1OfeJHZrVFA/xLfpXK+0w==",
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/view-design/-/view-design-4.4.0.tgz",
+            "integrity": "sha512-2+xbda6/USUm9Pn+D25NPsIBg7XVhkFC90Ycs0GcFQ4AHZ1QRwDGOj0PGA3eeL4yuVpigdDfmwmNJAoczYXlPA==",
             "requires": {
                 "async-validator": "^3.3.0",
                 "deepmerge": "^2.2.1",
@@ -12918,9 +12918,9 @@
             }
         },
         "vue-router": {
-            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
-            "integrity": "sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A=="
+            "version": "3.4.9",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
+            "integrity": "sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA=="
         },
         "vue-style-loader": {
             "version": "4.1.2",

package.json

 {
     "name": "c-tool",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -22,12 +22,12 @@
         "js-base64": "^2.6.4",
         "jsonlint": "^1.6.3",
         "lscache": "^1.3.0",
-        "moment": "^2.27.0",
+        "moment": "^2.29.1",
         "php-array-reader": "^1.2.0",
         "phparr": "^0.2.0",
         "qrcode": "^1.4.4",
         "qrcode-parser": "^1.2.0",
-        "query-string": "^6.13.1",
+        "query-string": "^6.13.7",
         "radix.js": "0.0.1",
         "serialize-php": "^1.1.2",
         "sm-crypto": "^0.1.4",

src/tool.vue

 <template>
     <div>
-        <Menu mode="horizontal" theme="light" :active-name="currentCategory" @on-select="categorySelect" style="height: 45px;line-height: 45px;">
+        <Menu mode="horizontal" theme="light" :active-name="currentCategory" @on-select="categorySelect"
+              style="height: 45px;line-height: 45px;">
             <MenuItem :name="cat.name" v-for="(cat) in category" :key="cat.name">
                 <Badge v-if="badgeCategoryIsShow(cat.name)" dot :offset="[15,-10]">
-                    {{cat.title}}
+                    {{ cat.title }}
                 </Badge>
                 <template v-else>
-                    {{cat.title}}
+                    {{ cat.title }}
+                </template>
+            </MenuItem>
+            <MenuItem style="padding: 0 5px;float: right" name="_new">
+                <Icon type="md-expand" :size="24"/>
+            </MenuItem>
+            <MenuItem style="padding: 0 5px;float: right" name="_feedback">
+                <Icon type="md-help-circle" :size="24"/>
+            </MenuItem>
+            <MenuItem style="padding: 0 5px;float: right" name="_setting">
+                <Icon type="md-settings" :size="24"/>
+            </MenuItem>
+            <MenuItem style="padding: 0 5px;float: right" name="_about">
+                <Icon type="logo-github" :size="24"/>
+            </MenuItem>
+            <MenuItem style="padding: 0 5px;float: right" name="_history">
+                <Badge v-if="historyLength>0" dot :offset="[10,-3]">
+                    <Icon type="md-time" :size="24"/>
+                </Badge>
+                <template v-else>
+                    <Icon type="md-time" :size="24"/>
                 </template>
             </MenuItem>
-            <MenuItem style="padding: 0 5px;float: right" name="_new"><Icon type="md-expand" :size="24" /></MenuItem>
-            <MenuItem style="padding: 0 5px;float: right" name="_feedback"><Icon type="md-help-circle" :size="24" /></MenuItem>
-            <MenuItem style="padding: 0 5px;float: right" name="_setting"><Icon type="md-settings" :size="24" /></MenuItem>
-            <MenuItem style="padding: 0 5px;float: right" name="_about"><Icon type="logo-github" :size="24" /></MenuItem>
         </Menu>
         <RadioGroup :value="currentTool" @on-change="toolSelect" style="margin: 10px 0 10px 20px;line-height: 30px;">
             <Radio :label="tool.name" v-for="(tool) in tools" :key="tool.name">
                 <Badge v-if="badgeToolIsShow(tool.name)" dot :offset="[5,-5]">
-                    {{tool.title}}
+                    {{ tool.title }}
                 </Badge>
                 <template v-else>
-                    {{tool.title}}
+                    {{ tool.title }}
                 </template>
             </Radio>
         </RadioGroup>
         <div>
-            <router-view/>
+            <router-view :key="$route.path + $route.query.t"/>
         </div>
+        <Drawer :title="currentToolTitle+' - 历史记录'" v-model="historyShow" :width="100">
+            <Table ref="historyTable" border :columns="historyColumns" :data="historyData" :height="historyTableHeight">
+                <template slot-scope="{ row }" slot="_value">
+                    <div>{{ historyValue(row.value) }}}</div>
+                </template>
+                <template slot-scope="{ index,row }" slot="_op">
+                    <Button type="primary" size="small" @click="historyView(index)">查看</Button>
+                    <Button type="primary" style="margin-left: 5px" @click="historyLoad(index)" size="small">加载</Button>
+                </template>
+            </Table>
+            <div class="drawer-footer">
+                <Button type="primary" @click="historyClear">清空历史记录</Button>
+            </div>
+        </Drawer>
     </div>
 </template>
 
 <script>
-    import config from "./tool/config"
-    import model from "./tool/model"
-    import {openTab} from "./helper";
+import config from './tool/config'
+import model from './tool/model'
+import historyFactory from './tool/history'
+import {setLoadHistoryIndex} from './tool/history'
+import { openTab } from './helper'
 
-    export default {
-        data() {
-            return {
-                category: config.category,
-                currentCategory: "",
-                currentTool: "",
-            }
+export default {
+    data () {
+        return {
+            category: config.category,
+            currentCategory: '',
+            currentTool: '',
+            historyData: [],
+            historyShow: false,
+            historyColumns: [
+                {
+                    title: '操作时间',
+                    key: 'time',
+                    width:180
+                },
+                {
+                    title: '数据',
+                    slot: '_value',
+                    ellipsis:true
+                },
+                {
+                    title: '操作',
+                    slot: '_op',
+                    width:150
+                }
+            ],
+        }
+    },
+    computed: {
+        tools () {
+            return config.getToolByCategory(this.currentCategory)
+        },
+        historyLength(){
+            return historyFactory(this.currentTool).length()
+        },
+        historyTableHeight() {
+            // 设置表格高度
+            return window.innerHeight - 140
         },
-        computed: {
-            tools() {
-                return config.getToolByCategory(this.currentCategory)
+        currentToolTitle(){
+            return config.getToolTitle(this.currentTool)
+        }
+    },
+    watch: {
+        currentTool (name) {
+            model.setCurrentTool(name)
+            this.$router.push('/tool/' + name)
+        },
+    },
+    created () {
+        this.currentCategory = model.getCategoryHistory()
+        this.currentTool = model.getToolHistory(this.currentCategory)
+        this.$Message.config({
+            top: 150,
+        })
+    },
+    mounted () {},
+    methods: {
+        categorySelect (name) {
+            switch (name) {
+                case '_feedback':
+                    openTab('https://github.com/baiy/Ctool/issues')
+                    break
+                case '_about':
+                    openTab('https://github.com/baiy/Ctool')
+                    break
+                case '_setting':
+                    openTab('/setting.html')
+                    break
+                case '_new':
+                    openTab(window.location.href)
+                    break
+                case '_history':
+                    this.history()
+                    break
+                default:
+                    this.currentCategory = name
+                    model.setCategoryHistory(name)
+                    this.currentTool = model.getToolHistory(this.currentCategory)
+                    break
             }
         },
-        watch: {
-            currentTool(name) {
-                model.setCurrentTool(name);
-                this.$router.push("/tool/" + name);
+        history () {
+            let history = historyFactory(this.currentTool)
+            if (history.length() < 1) {
+                return this.$Message.error('暂无历史记录')
             }
+            this.historyData = history.all()
+            this.historyShow = true
         },
-        created() {
-            this.currentCategory = model.getCategoryHistory();
-            this.currentTool = model.getToolHistory(this.currentCategory)
-            this.$Message.config({
-                top:150
-            })
+        historyValue (value) {
+            return JSON.stringify(value)
         },
-        mounted() {},
-        methods: {
-            categorySelect(name) {
-                switch (name) {
-                    case "_feedback":
-                        openTab("https://github.com/baiy/Ctool/issues");
-                        break;
-                    case "_about":
-                        openTab("https://github.com/baiy/Ctool");
-                        break;
-                    case "_setting":
-                        openTab("/setting.html");
-                        break;
-                    case "_new":
-                        openTab(window.location.href);
-                        break;
-                    default:
-                        this.currentCategory = name;
-                        model.setCategoryHistory(name);
-                        this.currentTool = model.getToolHistory(this.currentCategory)
-                        break;
-                }
-            },
-            toolSelect(name) {
-                model.setToolHistory(this.currentCategory, name)
-                this.currentTool = name
-            },
-            badgeToolIsShow(tool) {
-                return config.badgeToolIsShow(tool);
-            },
-            badgeCategoryIsShow(cat) {
-                return config.badgeCategoryIsShow(cat);
-            }
+        historyView(index){
+            console.log(historyFactory(this.currentTool).get(index))
+        },
+        historyClear(){
+            historyFactory(this.currentTool).clear()
+            this.historyShow = false;
+        },
+        historyLoad(index){
+            setLoadHistoryIndex(index)
+            this.historyShow = false;
+            this.$router.push({
+                path:this.$router.currentRoute.fullPath,
+                query:{
+                    t:Date.now(),
+                },
+            });
+        },
+        toolSelect (name) {
+            model.setToolHistory(this.currentCategory, name)
+            this.currentTool = name
+        },
+        badgeToolIsShow (tool) {
+            return config.badgeToolIsShow(tool)
+        },
+        badgeCategoryIsShow (cat) {
+            return config.badgeCategoryIsShow(cat)
         },
-    }
-</script>
\ No newline at end of file
+    },
+}
+</script>
+<style scoped>
+.drawer-footer{
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    background: #fff;
+}
+</style>
\ No newline at end of file

src/tool/cache.js

@@ -18,7 +18,7 @@ export default {
     remove (name) {
         lsCache.remove(cacheNameConvert(name))
     },
-    setnNoVersion (name, value, expiry = 0) {
+    setNoVersion (name, value, expiry = 0) {
         return lsCache.set('nv_' + name, value, expiry / 60)
     },
     getNoVersion (name, defaultValue = null) {

src/tool/config.js

@@ -2,18 +2,18 @@ import { env, inArray } from '../helper'
 import cache from './cache'
 
 // 工具缓存数据过期时间(秒)
-export const TOOL_DATA_EXPIRY = 1800
+export const TOOL_DATA_EXPIRY = 3600 * 24
 // 徽章过期时间(天)
 export const BADGE_EXPIRY = 10
 // 分类徽章
-export const BADGE_CATEGORY = ['json']
+export const BADGE_CATEGORY = []
 // 工具徽章
-export const BADGE_TOOL = ['json']
+export const BADGE_TOOL = []
 // 默认常用工具
 export const DEFAULT_COMMON_TOOL = [
-    'hash', 'encrypt', 'json' ,'base64', 'url', 'timestamp',
+    'hash', 'encrypt', 'json', 'base64', 'url', 'timestamp',
     'qrCode', 'pinyin', 'ip', 'code', 'unicode',
-    'decimalConvert', 'randomString','diffs'
+    'decimalConvert', 'randomString', 'diffs',
 ]
 
 const category = [
@@ -28,7 +28,7 @@ const tool = [
     { 'name': 'hash', 'title': '哈希(hash)', cat: ['encryption'] },
     { 'name': 'encrypt', 'title': '加密/解密', cat: ['encryption'] },
     { 'name': 'base64', 'title': 'BASE64编码', cat: ['encryption'] },
-    { 'name': 'json', 'title': 'JSON工具', cat: ['conversion','json'] },
+    { 'name': 'json', 'title': 'JSON工具', cat: ['conversion', 'json'] },
     { 'name': 'url', 'title': 'URL编码', cat: ['conversion'] },
     { 'name': 'timestamp', 'title': '时间戳', cat: ['conversion'] },
     { 'name': 'qrCode', 'title': '二维码', cat: ['other'] },
@@ -39,7 +39,11 @@ const tool = [
     { 'name': 'decimalConvert', 'title': '进制转换', cat: ['conversion'] },
     { 'name': 'regex', 'title': '正则表达式', cat: ['other'] },
     { 'name': 'randomString', 'title': '随机字符生成', cat: ['other'] },
-    { 'name': 'phpArraySerialize', 'title': 'PHP数组/序列化', cat: ['conversion','json'] },
+    {
+        'name': 'phpArraySerialize',
+        'title': 'PHP数组/序列化',
+        cat: ['conversion', 'json'],
+    },
     { 'name': 'diffs', 'title': '文本差异化对比', cat: ['other'] },
     { 'name': 'crontab', 'title': 'crontab校验', cat: ['other'] },
     { 'name': 'websocket', 'title': 'websocket调试', cat: ['other'] },
@@ -49,7 +53,8 @@ const tool = [
 
 // 徽章是否显示
 const badgeIsShow = function () {
-    return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < BADGE_EXPIRY * 86400
+    return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') <
+        BADGE_EXPIRY * 86400
 }
 
 const getUserCommon = function () {
@@ -58,13 +63,23 @@ const getUserCommon = function () {
 }
 
 const setUserCommon = function (tools) {
-    cache.setnNoVersion('user_common', tools)
+    cache.setNoVersion('user_common', tools)
+}
+
+const getToolTitle = function (name) {
+    for (let i = 0; i < tool.length; i++) {
+        if (tool[i].name === name) {
+            return tool[i].title
+        }
+    }
+    return ""
 }
 
 export default {
     tool,
     category,
     setUserCommon,
+    getToolTitle,
     getUserCommon,
     getToolByCategory (cat) {
         return tool.filter((t) => {
@@ -79,5 +94,5 @@ export default {
     },
     badgeCategoryIsShow (cat) {
         return badgeIsShow() && inArray(cat, BADGE_CATEGORY)
-    }
+    },
 }
\ No newline at end of file

src/tool/history.js

+import crypto from 'crypto-js'
+import moment from 'moment'
+import cache from './cache'
+import { TOOL_DATA_EXPIRY } from './config'
+
+let loadHistoryIndex = -1
+
+function queueDataFactory (value) {
+    return {
+        'time': moment().format('YYYY-MM-DD HH:mm:ss'),
+        'hash': crypto.MD5(JSON.stringify(value)).toString(),
+        'value': value,
+    }
+}
+
+class queue {
+    data = []
+    name = ''
+    max = 10
+
+    constructor (name, max = 50) {
+        this.name = name
+        this.max = max
+        // 初始化数据
+        this.data = cache.get(this.getCacheName(), [])
+    }
+
+    getCacheName () {
+        return 'tool_data_history_' + this.name
+    }
+
+    push (value) {
+        let item = queueDataFactory(value)
+
+        // 删除已有
+        for (let i = 0; i < this.data.length; i++) {
+            if (this.data[i].hash === item.hash) {
+                this.data.splice(i, 1)
+            }
+        }
+
+        this.data.unshift(item)
+
+        // 删除多余
+        if (this.length() > this.max) {
+            this.data.pop()
+        }
+
+        cache.set(this.getCacheName(), this.data, TOOL_DATA_EXPIRY)
+    }
+
+    length () {
+        return this.data.length
+    }
+
+    all () {
+        return this.data
+    }
+
+    clear(){
+        cache.remove(this.getCacheName())
+    }
+
+    get (index) {
+        return this.data.hasOwnProperty(index) ? this.data[index].value : {}
+    }
+
+    current () {
+        if (loadHistoryIndex < 0) {
+            return this.get(0)
+        }
+        let index = loadHistoryIndex
+        loadHistoryIndex = -1
+        return this.get(index)
+    }
+}
+
+export default (name) => {
+    return new queue(name)
+}
+
+export const setLoadHistoryIndex = (index) => {
+    loadHistoryIndex = index
+}
\ No newline at end of file

src/tool/model.js

-import config from "./config"
-import {TOOL_DATA_EXPIRY} from "./config"
-import cache from "./cache"
+import config from './config'
+import cache from './cache'
+import history from './history.js'
 
 const model = {
-    getCategoryHistory() {
-        return cache.get("page_category_history", "common")
+    getCategoryHistory () {
+        return cache.get('page_category_history', 'common')
     },
-    setCategoryHistory(cat) {
-        return cache.set("page_category_history", cat)
+    setCategoryHistory (cat) {
+        return cache.set('page_category_history', cat)
     },
-    getToolHistory(cat) {
-        let all = cache.get("category_tool_history", {});
+    getToolHistory (cat) {
+        let all = cache.get('category_tool_history', {})
         if (all[cat]) {
-            return all[cat];
+            return all[cat]
         }
-        return config.getToolByCategory(cat)[0]["name"]
+        return config.getToolByCategory(cat)[0]['name']
     },
-    setToolHistory(cat, name) {
-        let all = cache.get("category_tool_history", {});
-        all[cat] = name;
-        return cache.set("category_tool_history", all)
+    setToolHistory (cat, name) {
+        let all = cache.get('category_tool_history', {})
+        all[cat] = name
+        return cache.set('category_tool_history', all)
     },
-    getCurrentTool() {
-        return cache.get("current_tool", "")
+    getCurrentTool () {
+        return cache.get('current_tool', '')
     },
-    setCurrentTool(name) {
-        return cache.set("current_tool", name)
-    },
-    getToolData(name) {
-        return !name ? {} : cache.get("tool_data_" + name, {})
-    },
-    setToolData(name, data) {
-        return cache.set("tool_data_" + name, data, TOOL_DATA_EXPIRY)
+    setCurrentTool (name) {
+        return cache.set('current_tool', name)
     }
-};
+}
 
 const clipboardPaste = function () {
-    document.querySelector('#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>';
-    document.querySelector('#clipboard-text').select();
-    document.execCommand('paste');
-    let r = document.querySelector('#clipboard-text').value || document.querySelector('#clipboard-text').innerHTML;
-    document.querySelector('#clipboard').innerHTML = "";
-    return r ? r : ""
-};
+    document.querySelector(
+        '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
+    document.querySelector('#clipboard-text').select()
+    document.execCommand('paste')
+    let r = document.querySelector('#clipboard-text').value ||
+        document.querySelector('#clipboard-text').innerHTML
+    document.querySelector('#clipboard').innerHTML = ''
+    return r ? r : ''
+}
 
 export const plugin = {
     install: function (Vue) {
-        Vue.prototype.$getToolData = function (clipboardField = "") {
-            let data = model.getToolData(model.getCurrentTool());
-            let paste =  clipboardPaste();
-            if (clipboardField && !data[clipboardField] && paste){
-                data[clipboardField] = paste;
+        Vue.prototype.$getToolData = function (clipboardField = '') {
+            let data = history(model.getCurrentTool()).current()
+            let paste = clipboardPaste()
+            if (clipboardField && !data[clipboardField] && paste) {
+                data[clipboardField] = paste
             }
-            return data;
-        };
+            return data
+        }
         Vue.prototype.$saveToolData = function (data) {
-            return model.setToolData(model.getCurrentTool(), data)
-        };
+            return history(model.getCurrentTool()).push(data)
+        }
         Vue.prototype.$clipboardCopy = function (data) {
-            if (!data) return;
-            document.querySelector('#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>';
-            document.querySelector('#clipboard-text').value = data;
-            document.querySelector('#clipboard-text').select();
+            if (!data) return
+            document.querySelector(
+                '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
+            document.querySelector('#clipboard-text').value = data
+            document.querySelector('#clipboard-text').select()
             if (document.execCommand('copy')) {
-                this.$Message.success("结果已复制 ^o^")
+                this.$Message.success('结果已复制 ^o^')
             }
-            document.querySelector('#clipboard').innerHTML = "";
-        };
-    }
-};
+            document.querySelector('#clipboard').innerHTML = ''
+        }
+    },
+}
 
 export default model
\ No newline at end of file

src/views/tool/json.vue

@@ -30,7 +30,7 @@
             this.current = Object.assign(this.current, this.$getToolData('content'))
         },
         mounted(){
-            this.codemirror.setSize(null, 350)
+            this.codemirror.setSize(null, window.innerHeight - 200)
         },
         computed: {
             codemirror() {

src/views/tool/qrCode.vue

@@ -9,18 +9,6 @@
               <FormItem>
                 <Button type="primary" @click="generate()">生成</Button>
               </FormItem>
-              <FormItem v-if="generateHistory.length() > 0">
-                <Dropdown placement="top-start" trigger="click" style="margin-left: 10px" @on-click="history">
-                  <a href="javascript:void(0)">
-                    历史记录
-                    <Icon type="ios-arrow-down"></Icon>
-                  </a>
-                  <DropdownMenu slot="list">
-                    <DropdownItem v-for="(v,i) in generateHistory.lists()" :key="i" :name="i">{{substr(v.input)}}</DropdownItem>
-                    <DropdownItem divided name="clear">清空历史记录</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-              </FormItem>
             </option-block>
           </Col>
           <Col span="10">
@@ -53,57 +41,8 @@
 <script>
     import generator from 'qrcode'
     import qrcodeParser from 'qrcode-parser'
-    import cache from '../../tool/cache'
     import { trim } from '../../helper'
 
-    const generateHistoryCacheName = 'qrCodeGenerateHistoryCacheName'
-    const generateHistoryMaxLength = 15
-
-    class generateHistory {
-        data = []
-
-        constructor () {
-            this.data = cache.get(generateHistoryCacheName, [])
-        }
-
-        find (value) {
-            for (let i = 0; i < this.data.length; i++) {
-                if (this.data[i].input === value.input && this.data[i].isShort === value.isShort) {
-                    return true
-                }
-            }
-            return false
-        }
-
-        push (value) {
-            if (this.find(value)) {
-                return
-            }
-            if (this.data.length > generateHistoryMaxLength) {
-                this.data.pop()
-            }
-            this.data.push(value)
-            cache.set(generateHistoryCacheName, this.data, 86400)
-        }
-
-        getValue (index) {
-            return this.data[index]
-        }
-
-        lists () {
-            return this.data
-        }
-
-        length () {
-            return this.data.length
-        }
-
-        clear () {
-            this.data = []
-            cache.remove(generateHistoryCacheName)
-        }
-    }
-
     export default {
         computed: {
             readerInputImg () {
@@ -114,27 +53,12 @@
             },
         },
         created () {
-            this.generateHistory = new generateHistory()
             this.current = Object.assign(this.current, this.$getToolData())
         },
         methods: {
-            history (index) {
-                if (index === 'clear') {
-                    this.generateHistory.clear()
-                    return
-                }
-                let history = this.generateHistory.getValue(index)
-                this.current.generateInput = history.input
-                this.generate(false)
-            },
-            generate (insertHistory = true) {
+            generate () {
                 if (!this.current.generateInput) return
                 this.generateHandle(this.current.generateInput)
-                if (insertHistory) {
-                    this.generateHistory.push({
-                        input: this.current.generateInput
-                    })
-                }
                 this.$saveToolData(this.current)
             },
             reader () {
@@ -173,7 +97,6 @@
         },
         data () {
             return {
-                generateHistory: {},
                 current: {
                     generateInput: '',
                     generateOutput: '',

src/views/tool/unit.vue

@@ -134,7 +134,6 @@
                 this.$saveToolData(history)
             },
             getToolData () {
-                console.log(this.$getToolData())
                 let type = this.current.type
                 let history = this.$getToolData()
                 let unitHistory = history['data'] && history['data'][type] ? history['data'][type] : null