历史记录功能升级 #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

-import db from './db'
-import {version} from '../helper'
-
-const cacheVersion = version.split('.').join('');
+import lsCache from 'lscache'
+import p from '../../package'
 
 // 缓存key添加版本号
 const cacheNameConvert = function (name) {
-    return 'v_' + cacheVersion + '_' + name
+    return 'v_' + (p.version.split('.').join('')) + '_' + name
 }
 
-const cache = {
-    set(name, value, expiry = 0) {
-        return db.set(cacheNameConvert(name), value, expiry)
-    },
-    get(name, defaultValue = null) {
-        let data = db.get(cacheNameConvert(name))
-        return data === null ? defaultValue : data
+export default {
+    // expiry 过期时间 秒
+    set (name, value, expiry = 0) {
+        return lsCache.set(cacheNameConvert(name), value, expiry / 60)
     },
-    remove(name) {
-        db.remove(cacheNameConvert(name))
-        return db.remove(cacheNameConvert(name))
+    get (name, defaultValue = null) {
+        let data = lsCache.get(cacheNameConvert(name))
+        return data ? data : defaultValue
     },
-    setNoVersion(name, value, expiry = 0) {
-        return db.set('nv_' + name, value, expiry)
+    remove (name) {
+        lsCache.remove(cacheNameConvert(name))
     },
-    getNoVersion(name, defaultValue = null) {
-        let data = db.get('nv_' + name)
-        return data === null ? defaultValue : data
+    setNoVersion (name, value, expiry = 0) {
+        return lsCache.set('nv_' + name, value, expiry / 60)
     },
-    removeNoVersion(name) {
-        return db.remove('nv_' + name)
+    getNoVersion (name, defaultValue = null) {
+        let data = lsCache.get('nv_' + name)
+        return data ? data : defaultValue
     },
-    // 清理数据
-    clear() {
-        setTimeout(() => {
-            // 清理过期数据
-            db.clear();
-            // 清理过期版本数据
-            clearExpireVersion();
-        }, 100);
-    }
-};
-
-const clearExpireVersion = () => {
-    const cache_version_name = "cache_version";
-    if (cacheVersion === cache.getNoVersion(cache_version_name)) {
-        return;
-    }
-    cache.setNoVersion(cache_version_name, cacheVersion)
-    for (let key of db.getAllKey()) {
-        let c = /^v_(\d+)_/.exec(key)
-        if (c === null) {
-            continue;
-        }
-        if (cacheVersion !== c[1].trim()) {
-            db.remove(key)
-        }
-    }
-}
-
-export default cache
\ No newline at end of file
+}
\ No newline at end of file

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/model.js

 import config from './config'
-import clipboard from './clipboard'
-import setting from './setting'
 import cache from './cache'
 import history from './history.js'
-import _ from "lodash";
 
-let fixeInputData;
-let toolCurrentFeature = "";
 const model = {
-    getCategoryHistory() {
+    getCategoryHistory () {
         return cache.get('page_category_history', 'common')
     },
-    setCategoryHistory(cat) {
+    setCategoryHistory (cat) {
         return cache.set('page_category_history', cat)
     },
-    getToolHistory(cat) {
+    getToolHistory (cat) {
         let all = cache.get('category_tool_history', {})
         if (all[cat]) {
             return all[cat]
         }
         return config.getToolByCategory(cat)[0]['name']
     },
-    setToolHistory(cat, name) {
+    setToolHistory (cat, name) {
         let all = cache.get('category_tool_history', {})
         all[cat] = name
         return cache.set('category_tool_history', all)
     },
-    getCurrentTool() {
+    getCurrentTool () {
         return cache.get('current_tool', '')
     },
-    setCurrentTool(name) {
+    setCurrentTool (name) {
         return cache.set('current_tool', name)
-    },
-    setFixeInputData: (value) => {
-        fixeInputData = value;
-    },
-    setToolCurrentFeature: (value) => {
-        toolCurrentFeature = value;
-    },
-    getToolCurrentFeature: (def = "") => {
-        let temp = toolCurrentFeature
-        toolCurrentFeature = "";
-        return temp ? temp : def
     }
 }
 
-// 保存历史记录防抖
-let debounceSaveToolData = {};
-const debounceSaveToolDataMethod = _.debounce(function () {
-    return history(debounceSaveToolData['tool']).push(debounceSaveToolData['data'])
-}, 1000)
-
-
-const appendData = async function (field = "", check = "") {
-    const result = (data = "") => {
-        if (data){
-            if (
-                !check
-                || (_.isFunction(check) && check(data)) // 函数校验
-            ){
-                return field ? {[field]: data} : data
-            }
-        }
-        return field ? {} : ""
-    }
-    return new Promise(async (resolve) => {
-        try {
-            // 使用固定输入数据
-            if (fixeInputData) {
-                return resolve(result(fixeInputData))
-            }
-            if (setting.autoReadCopy()) {
-                let paste = (await clipboard.paste()).trim()
-                if (paste) {
-                    resolve(result(paste))
-                }
-            }
-            resolve(result())
-        } catch {
-            resolve(result())
-        }
-    });
+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 : ''
 }
 
 export const plugin = {
     install: function (Vue) {
-        Vue.prototype.$initToolData = function (input = "", inputCheck = "", field = "current", isLoadHistory = true) {
-            let current = _.cloneDeep(this[field])
-            if (isLoadHistory) {
-                Object.assign(current, this.$getToolData())
-            }
-            if (!input) {
-                this[field] = current
-                return;
-            }
-
-            // 初始化默认值
-            if (!(input in current)){
-                current[input] = "";
-            }
-
-            // 保存默认值
-            let inputDefault = current[input]
-            current[input] = "";
-
-            appendData(input, inputCheck).then((append) => {
-                for (let key of Object.keys(append)) {
-                    if ((key in current) && !current[key]) {
-                        current[key] = append[key]
-                    }
-                }
-                if (!current[input]){
-                    // 使用默认值
-                    current[input] = inputDefault
-                }
-                this[field] = current
-            })
-        }
-        Vue.prototype.$getToolData = function () {
-            return _.cloneDeep(history(model.getCurrentTool()).current())
-        }
-        Vue.prototype.$saveToolData = function (data, ignoreDebounce = false) {
-            if (ignoreDebounce) {
-                return history(model.getCurrentTool()).push(_.cloneDeep(data))
+        Vue.prototype.$getToolData = function (clipboardField = '') {
+            let data = history(model.getCurrentTool()).current()
+            let paste = clipboardPaste()
+            if (clipboardField && !data[clipboardField] && paste) {
+                data[clipboardField] = paste
             }
-            debounceSaveToolData = {tool: model.getCurrentTool(), data: _.cloneDeep(data)}
-            debounceSaveToolDataMethod()
+            return data
         }
-        Vue.prototype.$clipboardCopy = function (data, force = false) {
-            if ((setting.autoSaveCopy() || force) && data) {
-                clipboard.copy(data, () => {
-                    this.$Message.success(this.$t('main_ui_copy_text_ok').toString())
-                })
-            }
+        Vue.prototype.$saveToolData = function (data) {
+            return history(model.getCurrentTool()).push(data)
         }
-        Vue.prototype.$clipboardCopyImages = function (data, force = false) {
-            if ((setting.autoSaveCopy() || force) && data) {
-                clipboard.copyImage(data, () => {
-                    this.$Message.success(this.$t('main_ui_copy_image_ok').toString())
-                })
+        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 (document.execCommand('copy')) {
+                this.$Message.success('结果已复制 ^o^')
             }
+            document.querySelector('#clipboard').innerHTML = ''
         }
     },
 }
 
-export default model
+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

 <template>
-    <div>
-        <option-block style="text-align: center">
-            <FormItem>
-                <RadioGroup v-model="type" type="button" button-style="solid">
-                    <Radio :style="radioGroupStyle" :label="v.key" v-for="v in categories" :key="v.key">{{ v.name }}
-                    </Radio>
-                </RadioGroup>
-            </FormItem>
-        </option-block>
-        <option-block style="text-align: center">
-            <FormItem>
-                <Input v-model="current.input" type="number"></Input>
-            </FormItem>
-            <FormItem>
-                <Select v-model="current.from" style="width:200px">
-                    <template v-if="groups.length > 1">
-                        <OptionGroup :label="group.name" v-for="group in groups" :key="group.key">
-                            <Option v-for="unit in group.list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
-                        </OptionGroup>
-                    </template>
-                    <template v-else>
-                        <Option v-for="unit in groups[0].list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
-                    </template>
-                </Select>
-            </FormItem>
-            <FormItem>
-                <Button icon="md-code-working" @click="exchange()"></Button>
-            </FormItem>
-            <FormItem>
-                <Select v-model="current.to" style="width:200px">
-                    <Option value="all">{{ $t('unit_all') }}</Option>
-                    <template v-if="groups.length > 1">
-                        <OptionGroup :label="group.name" v-for="group in groups" :key="group.key">
-                            <Option v-for="unit in group.list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
-                        </OptionGroup>
-                    </template>
-                    <template v-else>
-                        <Option v-for="unit in groups[0].list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
-                    </template>
-                </Select>
-            </FormItem>
-        </option-block>
-        <div v-if="isShowResult" style="padding: 0 30px">
-            <template v-if="assignResult !== null">
-                <div style="text-align: center;margin-top: 30px;font-size: 18px;font-weight: bold">
-                    <span style="color: red">{{ current.input }}</span> {{ unitName(current.from) }} = <span
-                    style="color: red">{{ assignResult }}</span>
-                    {{ unitName(current.to) }}
-                </div>
-            </template>
-            <CellGroup v-if="current.to === 'all'">
-                <Row :gutter="16">
-                    <Col span="12" v-for="(result,unitKey) in output" :key="unitKey">
-                        <Cell :title="result" :extra="unitName(unitKey)"/>
-                    </Col>
-                </Row>
-            </CellGroup>
+  <div>
+    <option-block style="text-align: center">
+      <FormItem>
+        <ButtonGroup>
+          <Button :type="current.type === v.key ? 'success' : 'primary'"
+                  @click="handle(v.key)"
+                  v-for="v in unitLists"
+                  style="padding: 5px 10px 6px;"
+                  :key="v.key">{{v.name}}
+          </Button>
+        </ButtonGroup>
+      </FormItem>
+    </option-block>
+    <option-block style="text-align: center">
+      <FormItem>
+        <Input v-model="current.input" type="number"></Input>
+      </FormItem>
+      <FormItem>
+        <Select v-model="current.from" style="width:200px">
+          <template v-if="unitGroup[0].name !== ''">
+            <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
+              <Option v-for="(unit,k) in group.list" :value="unit" :key="k">{{ unitFormat(unit) }}</Option>
+            </OptionGroup>
+          </template>
+          <template v-else>
+            <Option v-for="(unit,k) in unitGroup[0].list" :value="unit" :key="k">{{ unitFormat(unit) }}</Option>
+          </template>
+        </Select>
+      </FormItem>
+      <FormItem>
+        <Button icon="md-code-working" @click="exchange()"></Button>
+      </FormItem>
+      <FormItem>
+        <Select v-model="current.to" style="width:200px">
+          <Option value="all">全部</Option>
+          <template v-if="unitGroup[0].name !== ''">
+            <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
+              <Option v-for="(unit,k) in group.list" :value="unit" :key="k">{{ unitFormat(unit) }}</Option>
+            </OptionGroup>
+          </template>
+          <template v-else>
+            <Option v-for="(unit,k) in unitGroup[0].list" :value="unit" :key="k">
+              {{ unitFormat(unit) }}
+            </Option>
+          </template>
+        </Select>
+      </FormItem>
+    </option-block>
+    <div v-if="isShowResult" style="padding: 0 30px">
+      <template v-if="current.to !== 'all' && assignResult">
+        <div style="text-align: center;margin-top: 30px;font-size: 18px;font-weight: bold">
+          <span style="color: red">{{current.input}}</span> {{unitFormat(current.from)}} = <span style="color: red">{{assignResult.num}}</span>
+          {{unitFormat(current.to)}}
         </div>
+      </template>
+      <CellGroup v-if="current.to === 'all'">
+        <Row :gutter="16">
+          <Col span="12" v-for="(item,k) in result" :key="k">
+            <Cell :title="item.num" :extra="unitFormat(item.unit)"/>
+          </Col>
+        </Row>
+      </CellGroup>
     </div>
+  </div>
 </template>
 <script>
-import U from './library/unit'
-import {getCurrentLocale} from "../../i18n";
+    import U from './library/unit'
 
-export default {
-    created() {
-        let history = this.$getToolData()
-        this.type = this.current.type = history['type'] ? history['type'] : 'temperature'
-        this.getToolData(this.type)
-    },
-    computed: {
-        radioGroupStyle() {
-            return getCurrentLocale() === "en" ? "padding: 0 5px" : "padding: 0 10px";
-        },
-        categories() {
-            return U.CONFIG.map((category) => {
-                return {name: category.name, key: category.key}
-            })
-        },
-        groups() {
-            return U.getCategory(this.current.type).group
-        },
-        isShowResult() {
-            return this.current.from && this.current.type && this.current.input
+    export default {
+        created () {
+            let history = this.$getToolData()
+            this.current.type = history['type'] ? history['type'] : 'temperature'
+            this.getToolData()
         },
-        output() {
-            let result = {}
-            if (this.isShowResult) {
-                this.saveToolData()
-                for (let unit of U.getCategory(this.current.type).unit) {
-                    result[unit.key] = U.calculate(
-                        this.current.type,
-                        this.current.input,
-                        this.current.from,
-                        unit.key
-                    )
+        computed: {
+            unitGroup () {
+                return U.getData(this.current.type).group
+            },
+            isShowResult () {
+                return this.current.from && this.current.type && this.current.input
+            },
+            result () {
+                let r = []
+                if (this.isShowResult) {
+                    this.saveToolData()
+                    this.unitGroup.forEach((Group) => {
+                        Group.list.forEach((unit) => {
+                            let temp = U.calc(
+                                this.current.type,
+                                this.current.input,
+                                this.current.from.split('_')[0],
+                                unit.split('_')[0]
+                            )
+                            r.push({
+                                unit: unit,
+                                num: temp.num,
+                            })
+                        })
+                    })
                 }
-            }
-            return result
-        },
-        assignResult() {
-            if (this.current.to !== 'all') {
-                if (this.current.to in this.output) {
-                    return this.output[this.current.to]
+                return r
+            },
+            assignResult () {
+                if (this.current.to === 'all') {
+                    return {}
                 }
+                let unit = this.current.to
+                for (let i = 0; i < this.result.length; i++) {
+                    if (this.result[i].unit === unit) {
+                        return this.result[i]
+                    }
+                }
+                console.log(this.result)
+                console.log(unit)
+                console.error('无对应数据')
+                return null
             }
-            return null
-        }
-    },
-    watch:{
-        type(value){
-            this.handle(value)
-        }
-    },
-    methods: {
-        handle(v) {
-            this.getToolData(v)
         },
-        saveToolData() {
-            let history = this.$getToolData()
-            history.type = this.current.type
-            history.data = history.data ? history.data : {}
-            history.data[history.type] = {
-                from: this.current.from,
-                to: this.current.to,
-                input: this.current.input,
+        methods: {
+            handle (v) {
+                this.current.type = v
+                this.getToolData()
+            },
+            saveToolData () {
+                let history = this.$getToolData()
+                history.type = this.current.type
+                history.data = history.data ? history.data : {}
+                history.data[history.type] = {
+                    from: this.current.from,
+                    to: this.current.to,
+                    input: this.current.input,
+                }
+                this.$saveToolData(history)
+            },
+            getToolData () {
+                let type = this.current.type
+                let history = this.$getToolData()
+                let unitHistory = history['data'] && history['data'][type] ? history['data'][type] : null
+                this.current.from = unitHistory ? unitHistory.from : ''
+                this.current.to = unitHistory ? unitHistory.to : 'all'
+                this.current.input = unitHistory ? unitHistory.input : ''
+            },
+            unitFormat (unit) {
+                return unit.split('_').join('')
+            },
+            exchange () {
+                if (this.current.to === 'all') {
+                    return
+                }
+                if (!this.current.from || !this.current.to) {
+                    return
+                }
+
+                let temp = this.current.from
+                this.current.from = this.current.to
+                this.current.to = temp
             }
-            this.$saveToolData(history)
-        },
-        getToolData(type) {
-            let history = this.$getToolData()
-            let unitHistory = history['data'] && history['data'][type] ? history['data'][type] : null
-            this.current = Object.assign(this.current, {
-                from : unitHistory ? unitHistory.from : U.getCategory(type).main,
-                to : unitHistory ? unitHistory.to : 'all',
-                input : unitHistory ? unitHistory.input : '',
-                type : type
-            })
         },
-        exchange() {
-            if (this.current.to === 'all') {
-                return
+        data () {
+            return {
+                current: {
+                    type: '',
+                    from: '',
+                    to: '',
+                    input: '',
+                },
+                unitLists: U.list,
             }
-            if (!this.current.from || !this.current.to) {
-                return
-            }
-            [this.current.from, this.current.to] = [this.current.to, this.current.from]
         },
-        unitName(unitKey) {
-            let unit = U.getUnit(this.current.type, unitKey)
-            return `${unit.name} (${unit['unit']})`
-        }
-    },
-    data() {
-        return {
-            current: {
-                type: '',
-                from: '',
-                to: '',
-                input: '',
-            },
-            type:"",
-        }
-    },
-}
-</script>
+    }
+</script>
\ No newline at end of file