diff --git a/package-lock.json b/package-lock.json
index c43f84297819a1b17673f101b24d837aa16ca83c..500d9b2d17ec3307c40168072a9dfda58a5529d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -803,7 +803,6 @@
             "version": "7.13.10",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
             "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
-            "dev": true,
             "requires": {
                 "regenerator-runtime": "^0.13.4"
             }
@@ -930,6 +929,327 @@
                 }
             }
         },
+        "@jimp/bmp": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.16.1.tgz",
+            "integrity": "sha512-iwyNYQeBawrdg/f24x3pQ5rEx+/GwjZcCXd3Kgc+ZUd+Ivia7sIqBsOnDaMZdKCBPlfW364ekexnlOqyVa0NWg==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "bmp-js": "^0.1.0"
+            }
+        },
+        "@jimp/core": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/core/-/core-0.16.1.tgz",
+            "integrity": "sha512-la7kQia31V6kQ4q1kI/uLimu8FXx7imWVajDGtwUG8fzePLWDFJyZl0fdIXVCL1JW2nBcRHidUot6jvlRDi2+g==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "any-base": "^1.1.0",
+                "buffer": "^5.2.0",
+                "exif-parser": "^0.1.12",
+                "file-type": "^9.0.0",
+                "load-bmfont": "^1.3.1",
+                "mkdirp": "^0.5.1",
+                "phin": "^2.9.1",
+                "pixelmatch": "^4.0.2",
+                "tinycolor2": "^1.4.1"
+            }
+        },
+        "@jimp/custom": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.16.1.tgz",
+            "integrity": "sha512-DNUAHNSiUI/j9hmbatD6WN/EBIyeq4AO0frl5ETtt51VN1SvE4t4v83ZA/V6ikxEf3hxLju4tQ5Pc3zmZkN/3A==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/core": "^0.16.1"
+            }
+        },
+        "@jimp/gif": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/gif/-/gif-0.16.1.tgz",
+            "integrity": "sha512-r/1+GzIW1D5zrP4tNrfW+3y4vqD935WBXSc8X/wm23QTY9aJO9Lw6PEdzpYCEY+SOklIFKaJYUAq/Nvgm/9ryw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "gifwrap": "^0.9.2",
+                "omggif": "^1.0.9"
+            }
+        },
+        "@jimp/jpeg": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.16.1.tgz",
+            "integrity": "sha512-8352zrdlCCLFdZ/J+JjBslDvml+fS3Z8gttdml0We759PnnZGqrnPRhkOEOJbNUlE+dD4ckLeIe6NPxlS/7U+w==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "jpeg-js": "0.4.2"
+            }
+        },
+        "@jimp/plugin-blit": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.16.1.tgz",
+            "integrity": "sha512-fKFNARm32RoLSokJ8WZXHHH2CGzz6ire2n1Jh6u+XQLhk9TweT1DcLHIXwQMh8oR12KgjbgsMGvrMVlVknmOAg==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-blur": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.16.1.tgz",
+            "integrity": "sha512-1WhuLGGj9MypFKRcPvmW45ht7nXkOKu+lg3n2VBzIB7r4kKNVchuI59bXaCYQumOLEqVK7JdB4glaDAbCQCLyw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-circle": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-circle/-/plugin-circle-0.16.1.tgz",
+            "integrity": "sha512-JK7yi1CIU7/XL8hdahjcbGA3V7c+F+Iw+mhMQhLEi7Q0tCnZ69YJBTamMiNg3fWPVfMuvWJJKOBRVpwNTuaZRg==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-color": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.16.1.tgz",
+            "integrity": "sha512-9yQttBAO5SEFj7S6nJK54f+1BnuBG4c28q+iyzm1JjtnehjqMg6Ljw4gCSDCvoCQ3jBSYHN66pmwTV74SU1B7A==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "tinycolor2": "^1.4.1"
+            }
+        },
+        "@jimp/plugin-contain": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-contain/-/plugin-contain-0.16.1.tgz",
+            "integrity": "sha512-44F3dUIjBDHN+Ym/vEfg+jtjMjAqd2uw9nssN67/n4FdpuZUVs7E7wadKY1RRNuJO+WgcD5aDQcsvurXMETQTg==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-cover": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-cover/-/plugin-cover-0.16.1.tgz",
+            "integrity": "sha512-YztWCIldBAVo0zxcQXR+a/uk3/TtYnpKU2CanOPJ7baIuDlWPsG+YE4xTsswZZc12H9Kl7CiziEbDtvF9kwA/Q==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-crop": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.16.1.tgz",
+            "integrity": "sha512-UQdva9oQzCVadkyo3T5Tv2CUZbf0klm2cD4cWMlASuTOYgaGaFHhT9st+kmfvXjKL8q3STkBu/zUPV6PbuV3ew==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-displace": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-displace/-/plugin-displace-0.16.1.tgz",
+            "integrity": "sha512-iVAWuz2+G6Heu8gVZksUz+4hQYpR4R0R/RtBzpWEl8ItBe7O6QjORAkhxzg+WdYLL2A/Yd4ekTpvK0/qW8hTVw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-dither": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-dither/-/plugin-dither-0.16.1.tgz",
+            "integrity": "sha512-tADKVd+HDC9EhJRUDwMvzBXPz4GLoU6s5P7xkVq46tskExYSptgj5713J5Thj3NMgH9Rsqu22jNg1H/7tr3V9Q==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-fisheye": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-fisheye/-/plugin-fisheye-0.16.1.tgz",
+            "integrity": "sha512-BWHnc5hVobviTyIRHhIy9VxI1ACf4CeSuCfURB6JZm87YuyvgQh5aX5UDKtOz/3haMHXBLP61ZBxlNpMD8CG4A==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-flip": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-flip/-/plugin-flip-0.16.1.tgz",
+            "integrity": "sha512-KdxTf0zErfZ8DyHkImDTnQBuHby+a5YFdoKI/G3GpBl3qxLBvC+PWkS2F/iN3H7wszP7/TKxTEvWL927pypT0w==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-gaussian": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-gaussian/-/plugin-gaussian-0.16.1.tgz",
+            "integrity": "sha512-u9n4wjskh3N1mSqketbL6tVcLU2S5TEaFPR40K6TDv4phPLZALi1Of7reUmYpVm8mBDHt1I6kGhuCJiWvzfGyg==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-invert": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-invert/-/plugin-invert-0.16.1.tgz",
+            "integrity": "sha512-2DKuyVXANH8WDpW9NG+PYFbehzJfweZszFYyxcaewaPLN0GxvxVLOGOPP1NuUTcHkOdMFbE0nHDuB7f+sYF/2w==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-mask": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-mask/-/plugin-mask-0.16.1.tgz",
+            "integrity": "sha512-snfiqHlVuj4bSFS0v96vo2PpqCDMe4JB+O++sMo5jF5mvGcGL6AIeLo8cYqPNpdO6BZpBJ8MY5El0Veckhr39Q==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-normalize": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-normalize/-/plugin-normalize-0.16.1.tgz",
+            "integrity": "sha512-dOQfIOvGLKDKXPU8xXWzaUeB0nvkosHw6Xg1WhS1Z5Q0PazByhaxOQkSKgUryNN/H+X7UdbDvlyh/yHf3ITRaw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-print": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-print/-/plugin-print-0.16.1.tgz",
+            "integrity": "sha512-ceWgYN40jbN4cWRxixym+csyVymvrryuKBQ+zoIvN5iE6OyS+2d7Mn4zlNgumSczb9GGyZZESIgVcBDA1ezq0Q==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "load-bmfont": "^1.4.0"
+            }
+        },
+        "@jimp/plugin-resize": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.16.1.tgz",
+            "integrity": "sha512-u4JBLdRI7dargC04p2Ha24kofQBk3vhaf0q8FwSYgnCRwxfvh2RxvhJZk9H7Q91JZp6wgjz/SjvEAYjGCEgAwQ==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-rotate": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.16.1.tgz",
+            "integrity": "sha512-ZUU415gDQ0VjYutmVgAYYxC9Og9ixu2jAGMCU54mSMfuIlmohYfwARQmI7h4QB84M76c9hVLdONWjuo+rip/zg==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-scale": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.16.1.tgz",
+            "integrity": "sha512-jM2QlgThIDIc4rcyughD5O7sOYezxdafg/2Xtd1csfK3z6fba3asxDwthqPZAgitrLgiKBDp6XfzC07Y/CefUw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-shadow": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-shadow/-/plugin-shadow-0.16.1.tgz",
+            "integrity": "sha512-MeD2Is17oKzXLnsphAa1sDstTu6nxscugxAEk3ji0GV1FohCvpHBcec0nAq6/czg4WzqfDts+fcPfC79qWmqrA==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugin-threshold": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugin-threshold/-/plugin-threshold-0.16.1.tgz",
+            "integrity": "sha512-iGW8U/wiCSR0+6syrPioVGoSzQFt4Z91SsCRbgNKTAk7D+XQv6OI78jvvYg4o0c2FOlwGhqz147HZV5utoSLxA==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1"
+            }
+        },
+        "@jimp/plugins": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/plugins/-/plugins-0.16.1.tgz",
+            "integrity": "sha512-c+lCqa25b+4q6mJZSetlxhMoYuiltyS+ValLzdwK/47+aYsq+kcJNl+TuxIEKf59yr9+5rkbpsPkZHLF/V7FFA==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/plugin-blit": "^0.16.1",
+                "@jimp/plugin-blur": "^0.16.1",
+                "@jimp/plugin-circle": "^0.16.1",
+                "@jimp/plugin-color": "^0.16.1",
+                "@jimp/plugin-contain": "^0.16.1",
+                "@jimp/plugin-cover": "^0.16.1",
+                "@jimp/plugin-crop": "^0.16.1",
+                "@jimp/plugin-displace": "^0.16.1",
+                "@jimp/plugin-dither": "^0.16.1",
+                "@jimp/plugin-fisheye": "^0.16.1",
+                "@jimp/plugin-flip": "^0.16.1",
+                "@jimp/plugin-gaussian": "^0.16.1",
+                "@jimp/plugin-invert": "^0.16.1",
+                "@jimp/plugin-mask": "^0.16.1",
+                "@jimp/plugin-normalize": "^0.16.1",
+                "@jimp/plugin-print": "^0.16.1",
+                "@jimp/plugin-resize": "^0.16.1",
+                "@jimp/plugin-rotate": "^0.16.1",
+                "@jimp/plugin-scale": "^0.16.1",
+                "@jimp/plugin-shadow": "^0.16.1",
+                "@jimp/plugin-threshold": "^0.16.1",
+                "timm": "^1.6.1"
+            }
+        },
+        "@jimp/png": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/png/-/png-0.16.1.tgz",
+            "integrity": "sha512-iyWoCxEBTW0OUWWn6SveD4LePW89kO7ZOy5sCfYeDM/oTPLpR8iMIGvZpZUz1b8kvzFr27vPst4E5rJhGjwsdw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/utils": "^0.16.1",
+                "pngjs": "^3.3.3"
+            }
+        },
+        "@jimp/tiff": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/tiff/-/tiff-0.16.1.tgz",
+            "integrity": "sha512-3K3+xpJS79RmSkAvFMgqY5dhSB+/sxhwTFA9f4AVHUK0oKW+u6r52Z1L0tMXHnpbAdR9EJ+xaAl2D4x19XShkQ==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "utif": "^2.0.1"
+            }
+        },
+        "@jimp/types": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/types/-/types-0.16.1.tgz",
+            "integrity": "sha512-g1w/+NfWqiVW4CaXSJyD28JQqZtm2eyKMWPhBBDCJN9nLCN12/Az0WFF3JUAktzdsEC2KRN2AqB1a2oMZBNgSQ==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/bmp": "^0.16.1",
+                "@jimp/gif": "^0.16.1",
+                "@jimp/jpeg": "^0.16.1",
+                "@jimp/png": "^0.16.1",
+                "@jimp/tiff": "^0.16.1",
+                "timm": "^1.6.1"
+            }
+        },
+        "@jimp/utils": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/@jimp/utils/-/utils-0.16.1.tgz",
+            "integrity": "sha512-8fULQjB0x4LzUSiSYG6ZtQl355sZjxbv8r9PPAuYHzS9sGiSHJQavNqK/nKnpDsVkU88/vRGcE7t3nMU0dEnVw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "regenerator-runtime": "^0.13.3"
+            }
+        },
         "@mrmlnc/readdir-enhanced": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -2180,6 +2500,11 @@
                 "color-convert": "^1.9.0"
             }
         },
+        "any-base": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
+            "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="
+        },
         "any-promise": {
             "version": "1.3.0",
             "resolved": "https://registry.npm.taobao.org/any-promise/download/any-promise-1.3.0.tgz",
@@ -2708,6 +3033,11 @@
             "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
             "dev": true
         },
+        "bmp-js": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
+            "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM="
+        },
         "bn.js": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
@@ -2972,6 +3302,11 @@
             "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
             "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
         },
+        "buffer-equal": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
+            "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs="
+        },
         "buffer-fill": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
@@ -3204,14 +3539,6 @@
             "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
             "dev": true
         },
-        "chevrotain": {
-            "version": "6.5.0",
-            "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-6.5.0.tgz",
-            "integrity": "sha512-BwqQ/AgmKJ8jcMEjaSnfMybnKMgGTrtDKowfTP3pX4jwVy0kNjRsT/AP6h+wC3+3NC+X8X15VWBnTCQlX+wQFg==",
-            "requires": {
-                "regexp-to-ast": "0.4.0"
-            }
-        },
         "chokidar": {
             "version": "3.5.1",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
@@ -4767,6 +5094,11 @@
                 }
             }
         },
+        "dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
         "domain-browser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5295,6 +5627,11 @@
                 "strip-eof": "^1.0.0"
             }
         },
+        "exif-parser": {
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
+            "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI="
+        },
         "expand-brackets": {
             "version": "2.1.4",
             "resolved": "http://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",
@@ -5651,6 +5988,11 @@
                 }
             }
         },
+        "file-type": {
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/file-type/-/file-type-9.0.0.tgz",
+            "integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw=="
+        },
         "file-uri-to-path": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -5967,6 +6309,15 @@
                 "assert-plus": "^1.0.0"
             }
         },
+        "gifwrap": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/gifwrap/-/gifwrap-0.9.2.tgz",
+            "integrity": "sha512-fcIswrPaiCDAyO8xnWvHSZdWChjKXUanKKpAiWWJ/UTkEi/aYKn5+90e7DE820zbEaVR9CE2y4z9bzhQijZ0BA==",
+            "requires": {
+                "image-q": "^1.1.1",
+                "omggif": "^1.0.10"
+            }
+        },
         "glob": {
             "version": "7.1.6",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -6008,6 +6359,15 @@
             "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
             "dev": true
         },
+        "global": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+            "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+            "requires": {
+                "min-document": "^2.19.0",
+                "process": "^0.11.10"
+            }
+        },
         "globals": {
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6593,6 +6953,11 @@
             "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
             "dev": true
         },
+        "image-q": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/image-q/-/image-q-1.1.1.tgz",
+            "integrity": "sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY="
+        },
         "image-size": {
             "version": "0.5.5",
             "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -6957,6 +7322,11 @@
             "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
             "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
         },
+        "is-function": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+        },
         "is-glob": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -7133,15 +7503,6 @@
             "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
             "dev": true
         },
-        "java-parser": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/java-parser/-/java-parser-2.0.0.tgz",
-            "integrity": "sha512-5sTEggUlp+uns7tfHGwRTN+cMlgPHw00oNjAz6YdwEyQyWQ9VzUNbYuPuDyJDWfcFyZTlHKD5f7VbtChKZf4xw==",
-            "requires": {
-                "chevrotain": "6.5.0",
-                "lodash": "4.17.21"
-            }
-        },
         "javascript-stringify": {
             "version": "1.6.0",
             "resolved": "http://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-1.6.0.tgz",
@@ -7153,6 +7514,23 @@
             "resolved": "https://registry.npmjs.org/jian_fan/-/jian_fan-1.0.3.tgz",
             "integrity": "sha512-b7Dr2hckX8zViAcEMBMQ/SPtqmfmqQ9Za6W9KD05rcZpb52E2PzxPUwTn0H2TMDv4gaqfa5tUrGNLci9dcnLxw=="
         },
+        "jimp": {
+            "version": "0.16.1",
+            "resolved": "https://registry.npmjs.org/jimp/-/jimp-0.16.1.tgz",
+            "integrity": "sha512-+EKVxbR36Td7Hfd23wKGIeEyHbxShZDX6L8uJkgVW3ESA9GiTEPK08tG1XI2r/0w5Ch0HyJF5kPqF9K7EmGjaw==",
+            "requires": {
+                "@babel/runtime": "^7.7.2",
+                "@jimp/custom": "^0.16.1",
+                "@jimp/plugins": "^0.16.1",
+                "@jimp/types": "^0.16.1",
+                "regenerator-runtime": "^0.13.3"
+            }
+        },
+        "jpeg-js": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.2.tgz",
+            "integrity": "sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw=="
+        },
         "js-base64": {
             "version": "2.6.4",
             "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -7603,6 +7981,28 @@
             "resolved": "https://registry.npmjs.org/linguist-languages/-/linguist-languages-7.15.0.tgz",
             "integrity": "sha512-qkSSNDjDDycZ2Wcw+GziNBB3nNo3ddYUInM/PL8Amgwbd9RQ/BKGj2/1d6mdxKgBFnUqZuaDbkIwkE4KUwwmtQ=="
         },
+        "load-bmfont": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz",
+            "integrity": "sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==",
+            "requires": {
+                "buffer-equal": "0.0.1",
+                "mime": "^1.3.4",
+                "parse-bmfont-ascii": "^1.0.3",
+                "parse-bmfont-binary": "^1.0.5",
+                "parse-bmfont-xml": "^1.1.4",
+                "phin": "^2.9.1",
+                "xhr": "^2.0.1",
+                "xtend": "^4.0.0"
+            },
+            "dependencies": {
+                "mime": {
+                    "version": "1.6.0",
+                    "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+                    "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+                }
+            }
+        },
         "loader-fs-cache": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -8005,6 +8405,14 @@
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
             "dev": true
         },
+        "min-document": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+            "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+            "requires": {
+                "dom-walk": "^0.1.0"
+            }
+        },
         "mini-css-extract-plugin": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
@@ -8100,7 +8508,6 @@
             "version": "0.5.5",
             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
             "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-            "dev": true,
             "requires": {
                 "minimist": "^1.2.5"
             }
@@ -8609,6 +9016,11 @@
             "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
             "dev": true
         },
+        "omggif": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.10.tgz",
+            "integrity": "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw=="
+        },
         "on-finished": {
             "version": "2.3.0",
             "resolved": "http://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz",
@@ -8853,6 +9265,30 @@
                 "safe-buffer": "^5.1.1"
             }
         },
+        "parse-bmfont-ascii": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz",
+            "integrity": "sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU="
+        },
+        "parse-bmfont-binary": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz",
+            "integrity": "sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY="
+        },
+        "parse-bmfont-xml": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz",
+            "integrity": "sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==",
+            "requires": {
+                "xml-parse-from-string": "^1.0.0",
+                "xml2js": "^0.4.5"
+            }
+        },
+        "parse-headers": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
+            "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
+        },
         "parse-json": {
             "version": "4.0.0",
             "resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-4.0.0.tgz",
@@ -8981,6 +9417,11 @@
             "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
             "dev": true
         },
+        "phin": {
+            "version": "2.9.3",
+            "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
+            "integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA=="
+        },
         "php-array-reader": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/php-array-reader/-/php-array-reader-1.3.2.tgz",
@@ -9040,6 +9481,14 @@
                 "pinkie": "^2.0.0"
             }
         },
+        "pixelmatch": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz",
+            "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=",
+            "requires": {
+                "pngjs": "^3.0.0"
+            }
+        },
         "pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -10436,23 +10885,6 @@
             "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
             "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA=="
         },
-        "prettier-plugin-java": {
-            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/prettier-plugin-java/-/prettier-plugin-java-1.5.0.tgz",
-            "integrity": "sha512-ULiWgCuZaMdpUwoQIocB+RREv0dIEbcxwM7ewUy7yZgQfE9bVYMhQ6YVtS5y2g3AVodHJc+ki+wRidt4l0q3Uw==",
-            "requires": {
-                "java-parser": "2.0.0",
-                "lodash": "4.17.21",
-                "prettier": "2.3.1"
-            },
-            "dependencies": {
-                "prettier": {
-                    "version": "2.3.1",
-                    "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz",
-                    "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA=="
-                }
-            }
-        },
         "prettier-plugin-sql": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/prettier-plugin-sql/-/prettier-plugin-sql-0.3.0.tgz",
@@ -10475,8 +10907,7 @@
         "process": {
             "version": "0.11.10",
             "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
-            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-            "dev": true
+            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
         },
         "process-nextick-args": {
             "version": "2.0.1",
@@ -10859,8 +11290,7 @@
         "regenerator-runtime": {
             "version": "0.13.7",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-            "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-            "dev": true
+            "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
         },
         "regenerator-transform": {
             "version": "0.14.5",
@@ -10881,11 +11311,6 @@
                 "safe-regex": "^1.1.0"
             }
         },
-        "regexp-to-ast": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.4.0.tgz",
-            "integrity": "sha512-4qf/7IsIKfSNHQXSwial1IFmfM1Cc/whNBQqRwe0V2stPe7KmN1U0tWQiIx6JiirgSrisjE0eECdNf7Tav1Ntw=="
-        },
         "regexp.prototype.flags": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
@@ -11270,8 +11695,7 @@
         "sax": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-            "dev": true
+            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
         },
         "schema-utils": {
             "version": "2.7.1",
@@ -12617,6 +13041,11 @@
                 "setimmediate": "^1.0.4"
             }
         },
+        "timm": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz",
+            "integrity": "sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw=="
+        },
         "timsort": {
             "version": "0.3.0",
             "resolved": "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz",
@@ -13046,6 +13475,14 @@
             "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
             "dev": true
         },
+        "utif": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz",
+            "integrity": "sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==",
+            "requires": {
+                "pako": "^1.0.5"
+            }
+        },
         "util": {
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -13916,6 +14353,17 @@
             "version": "github:abdolence/x2js#185e410b3fa621070fea1f86a389b477afa216b9",
             "from": "github:abdolence/x2js"
         },
+        "xhr": {
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz",
+            "integrity": "sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==",
+            "requires": {
+                "global": "~4.4.0",
+                "is-function": "^1.0.1",
+                "parse-headers": "^2.0.0",
+                "xtend": "^4.0.0"
+            }
+        },
         "xml-formatter": {
             "version": "2.5.1",
             "resolved": "https://registry.npmjs.org/xml-formatter/-/xml-formatter-2.5.1.tgz",
@@ -13924,16 +14372,34 @@
                 "xml-parser-xo": "^3.1.2"
             }
         },
+        "xml-parse-from-string": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
+            "integrity": "sha1-qQKekp09vN7RafPG4oI42VpdWig="
+        },
         "xml-parser-xo": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/xml-parser-xo/-/xml-parser-xo-3.1.2.tgz",
             "integrity": "sha512-Qyttmiy305unyg1ONpArT4FPDL3J+ohXWpMI1ecopClGMw53lCRHJ4FV/fVYHFU6qfEzMV0frqSlNaLo2dw15Q=="
         },
+        "xml2js": {
+            "version": "0.4.23",
+            "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+            "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+            "requires": {
+                "sax": ">=0.6.0",
+                "xmlbuilder": "~11.0.0"
+            }
+        },
+        "xmlbuilder": {
+            "version": "11.0.1",
+            "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+            "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+        },
         "xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-            "dev": true
+            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
         },
         "y18n": {
             "version": "4.0.3",
diff --git a/package.json b/package.json
index 048f6ba94fc916af35a5c79decc1ddaf067e08ac..1b1bafc8184df70943dd05275109b0f765b27915 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "c-tool",
-    "version": "1.9.0",
+    "version": "1.9.1",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -27,6 +27,7 @@
         "graphql": "15.5.0",
         "ipinyinjs": "^1.0.0",
         "jian_fan": "^1.0.3",
+        "jimp": "^0.16.1",
         "js-base64": "^2.6.4",
         "js-htmlencode": "^0.3.0",
         "js-yaml": "^3.14.1",
diff --git a/src/components/inputBlock.vue b/src/components/inputBlock.vue
index 76658bc7a62479c4c3baf495231c88c86e82745e..66fa3ce51156c1d1456dc3021fdfc7e6583bbec4 100644
--- a/src/components/inputBlock.vue
+++ b/src/components/inputBlock.vue
@@ -1,9 +1,9 @@
 <template>
     <div style="position: relative;">
         <slot></slot>
-        <div class="right-bottom">
+        <div :style="extraStyle">
             <slot name="extra">
-                <Button v-if="text" type="primary" size="small" @click="buttonClick">{{ text }}</Button>
+                <Button v-if="text" :type="type" size="small" @click="buttonClick">{{ text }}</Button>
             </slot>
         </div>
     </div>
@@ -15,6 +15,38 @@ export default {
         text: {
             type: String,
             default: ""
+        },
+        bottom: {
+            type: String,
+            default: "4px"
+        },
+        top: {
+            type: String,
+            default: ""
+        },
+        left: {
+            type: String,
+            default: ""
+        },
+        right: {
+            type: String,
+            default: "4px"
+        },
+        type:{
+            type: String,
+            default: "primary"
+        }
+
+    },
+    computed:{
+        extraStyle(){
+            let css = {
+                fixed:"position: absolute",
+                zindex:"z-index:100",
+                vertical:this.top !== "" ? `top:${this.top}` : `bottom:${this.bottom}`,
+                horizontal:this.left !== "" ? `left:${this.left}` : `right:${this.right}`,
+            };
+            return Object.values(css).join(";")
         }
     },
     methods: {
@@ -24,11 +56,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.right-bottom {
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-}
-</style>
diff --git a/src/components/optionBlock.vue b/src/components/optionBlock.vue
index 0fc546390bbf722f1be8edc31d4082c450ebea66..1218d0c07a344643842da783b8d54001e5c6d373 100644
--- a/src/components/optionBlock.vue
+++ b/src/components/optionBlock.vue
@@ -1,11 +1,28 @@
 <template>
-    <Form inline style="padding: 10px 0" class="option-block">
+    <Form inline :style="style" class="option-block">
         <slot></slot>
     </Form>
 </template>
 <script>
     export default {
-        name: 'optionBlock'
+        name: 'optionBlock',
+        props: {
+            center: {
+                type: Boolean,
+                default: false
+            },
+        },
+        computed:{
+            style(){
+                let css = {
+                    padding:"10px 0",
+                };
+                if (this.center){
+                    css.textAlign = "center"
+                }
+                return css;
+            }
+        }
     };
 </script>
 
diff --git a/src/config.js b/src/config.js
index e0c36013d80a401b1002576e6904e593c038d689..6616257d2772cc6c982ff9b18f34e4ef397a7fcc 100644
--- a/src/config.js
+++ b/src/config.js
@@ -14,54 +14,52 @@ const DEFAULT_COMMON_TOOL = [
 ]
 
 const category = [
-    {'name': 'common', 'title': '常用'},
-    {'name': 'encryption', 'title': '加解密'},
-    {'name': 'conversion', 'title': '转换'},
-    {'name': 'serialize', 'title': '序列化'},
-    {'name': 'check', 'title': '校验'},
-    {'name': 'generate', 'title': '生成'},
-    {'name': 'other', 'title': '其他'},
+    {'name': 'common'},
+    {'name': 'encryption'},
+    {'name': 'conversion'},
+    {'name': 'serialize'},
+    {'name': 'check'},
+    {'name': 'generate'},
+    {'name': 'other'},
 ]
 
 const tool = [
     {
         'name': 'hash',
-        'title': '哈希(hash)',
         'cat': ['encryption']
     },
     {
         'name': 'encrypt',
-        'title': '加密/解密',
         'cat': ['encryption']
     },
-    {'name': 'sign', 'title': '签名/验签', 'cat': ['encryption']},
-    {'name': 'base64', 'title': 'BASE64编码', 'cat': ['encryption']},
-    {'name': 'json', 'title': 'JSON工具', 'cat': ['conversion', 'serialize']},
-    {'name': 'url', 'title': 'URL编码', 'cat': ['conversion']},
-    {'name': 'timestamp', 'title': '时间戳', 'cat': ['conversion']},
-    {'name': 'qrCode', 'title': '二维码', 'cat': ['generate']},
-    {'name': 'barcode', 'title': '条形码', 'cat': ['generate']},
-    {'name': 'pinyin', 'title': '汉字转拼音', 'cat': ['conversion']},
-    {'name': 'ip', 'title': 'IP地址查询', 'cat': ['other']},
-    {'name': 'code', 'title': '代码格式化', 'cat': ['other']},
-    {'name': 'unicode', 'title': 'Unicode', 'cat': ['conversion']},
-    {'name': 'decimalConvert', 'title': '进制转换', 'cat': ['conversion']},
-    {'name': 'regex', 'title': '正则表达式', 'cat': ['check']},
-    {'name': 'randomString', 'title': '随机字符生成', 'cat': ['generate']},
-    {'name': 'serializeConversion', 'title': '序列化转换', 'cat': ['conversion', 'serialize']},
-    {'name': 'diffs', 'title': '文本差异化对比', 'cat': ['check']},
-    {'name': 'crontab', 'title': 'crontab校验', 'cat': ['check']},
-    {'name': 'websocket', 'title': 'websocket调试', 'cat': ['other']},
-    {'name': 'unit', 'title': '单位换算', 'cat': ['other']},
-    {'name': 'time', 'title': '时间计算器', 'cat': ['other']},
-    {'name': 'uuid', 'title': 'UUID生成', 'cat': ['generate']},
-    {'name': 'jsonToObject', 'title': 'JSON转实体类', 'cat': ['conversion', 'serialize']},
-    {'name': 'ascii', 'title': 'ASCII转换', 'cat': ['conversion']},
-    {'name': 'variableConversion', 'title': '变量名转换', 'cat': ['conversion']},
-    {'name': 'jwt', 'title': 'JWT解码', 'cat': ['conversion']},
-    {'name': 'hexString', 'title': 'Hex/String转换', 'cat': ['conversion']},
-    {'name': 'text', 'title': '文本处理', 'cat': ['other']},
-    {'name': 'html', 'title': 'html编码', 'cat': ['conversion']},
+    {'name': 'sign', 'cat': ['encryption','check']},
+    {'name': 'base64', 'cat': ['encryption']},
+    {'name': 'json', 'cat': ['conversion', 'serialize']},
+    {'name': 'url', 'cat': ['conversion']},
+    {'name': 'timestamp', 'cat': ['conversion']},
+    {'name': 'qrCode', 'cat': ['generate']},
+    {'name': 'barcode', 'cat': ['generate']},
+    {'name': 'pinyin', 'cat': ['conversion']},
+    {'name': 'ip', 'cat': ['other']},
+    {'name': 'code', 'cat': ['other']},
+    {'name': 'unicode', 'cat': ['conversion']},
+    {'name': 'decimalConvert', 'cat': ['conversion']},
+    {'name': 'regex', 'cat': ['check']},
+    {'name': 'randomString', 'cat': ['generate']},
+    {'name': 'serializeConversion', 'cat': ['conversion', 'serialize']},
+    {'name': 'diffs', 'cat': ['check']},
+    {'name': 'crontab', 'cat': ['check']},
+    {'name': 'websocket', 'cat': ['other']},
+    {'name': 'unit', 'cat': ['other']},
+    {'name': 'time', 'cat': ['other']},
+    {'name': 'uuid', 'cat': ['generate']},
+    {'name': 'jsonToObject', 'cat': ['conversion', 'serialize']},
+    {'name': 'ascii', 'cat': ['conversion']},
+    {'name': 'variableConversion', 'cat': ['conversion']},
+    {'name': 'jwt', 'cat': ['conversion']},
+    {'name': 'hexString', 'cat': ['conversion']},
+    {'name': 'text', 'cat': ['other']},
+    {'name': 'html', 'cat': ['conversion']},
 ]
 
 // 工具类功能配置
diff --git a/src/i18n/.gitignore b/src/i18n/.gitignore
index 433eaf13bb09a1de8343f394d366a916ead26e1d..0845e153af502e99a5491cd7a24c6fb19c4ba583 100644
--- a/src/i18n/.gitignore
+++ b/src/i18n/.gitignore
@@ -1 +1 @@
-locales/build.json
+locales/build.js
diff --git a/src/i18n/build.js b/src/i18n/build.js
index 95c6d1b32dc8c5f704f4017e85a6e942313c5746..f25c1fb2d32584ef73d07882fe7016e12626ae95 100644
--- a/src/i18n/build.js
+++ b/src/i18n/build.js
@@ -53,7 +53,7 @@ const getLocale = (code) => {
                     message: config[key],
                 }
                 if (placeholders.length > 0) {
-                    locale["placeholders"] = placeholders
+                    locale[`${type}_${key}`]["placeholders"] = placeholders
                 }
             });
         }
@@ -107,7 +107,7 @@ module.exports = {
     },
     // 生成运行时语言包
     generate() {
-        fs.writeFileSync(path.join(__dirname, 'locales/build.json'), JSON.stringify(ALL_LOCALE, null, 4));
+        fs.writeFileSync(path.join(__dirname, 'locales/build.js'), `export default ${JSON.stringify(ALL_LOCALE, null, 4)}`);
     },
     getMessage(code, key) {
         let locales = ALL_LOCALE['detail']
diff --git a/src/i18n/index.js b/src/i18n/index.js
index b54fd458afc690055d3203293165be318666036e..0031b7cd770141852c41278d3177327e5148ea55 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -2,11 +2,10 @@ import VueI18n from 'vue-i18n'
 import Vue from 'vue'
 import {getMessage as chromiumGetMessage} from "../adapter/chromium/helper"
 import {isChromium} from "../helper";
+import locales from "./locales/build.js";
 
 Vue.use(VueI18n)
 
-const locales = require('./locales/build.json')
-
 // 区域列表
 export const LOCALE_LISTS = locales.lists
 export const LOCALE_DETAIL = locales.detail
diff --git a/src/i18n/locales/en/barcode.i18n.json5 b/src/i18n/locales/en/barcode.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..cdf0837cebabe9052ab85ace316221a79a8e91d3
--- /dev/null
+++ b/src/i18n/locales/en/barcode.i18n.json5
@@ -0,0 +1,22 @@
+{
+    "content": "Content",
+    "background": "Background",
+    "line_color": "Line Color",
+    "bar_width": "Bar Width",
+    "height": "Height",
+    "margin": "Margin",
+    "show_text": "Show Text",
+    "hide": "Hide",
+    "top": "Top",
+    "bottom": "Bottom",
+    "text_align": "Text Align",
+    "left": "Left",
+    "center": "Center",
+    "right": "Right",
+    "font": "Font",
+    "bold": "Bold",
+    "italic": "Italic",
+    "font_size": "Size",
+    "text_margin": "Margin",
+    "invalid_content": "Invalid content"
+}
diff --git a/src/i18n/locales/en/code.i18n.json5 b/src/i18n/locales/en/code.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..1df1a625cdc7128f841e81a460c3692979767f55
--- /dev/null
+++ b/src/i18n/locales/en/code.i18n.json5
@@ -0,0 +1,8 @@
+{
+    "more": "More Languages",
+    "indent": "Code Indent",
+    "indent_width": "Indent Space {0}",
+    "compress": "Compress",
+    "complete": "Operation Complete",
+    "error_prompt": "Error Prompt"
+}
diff --git a/src/i18n/locales/en/crontab.i18n.json5 b/src/i18n/locales/en/crontab.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..41db0367fff23666b8b8d668bd31a8652c739db1
--- /dev/null
+++ b/src/i18n/locales/en/crontab.i18n.json5
@@ -0,0 +1,14 @@
+{
+    "expression": "Expression",
+    "execute_time": "Execute Time",
+    "example": "Example",
+    "format": "Format",
+    "execute_time_list": "Execute Time List",
+    "no": "{0}: {1}",
+    "symbol": "Symbol",
+    "description": "Description",
+    "symbol_description_1": "any value",
+    "symbol_description_2": "value list separator",
+    "symbol_description_3": "range of values",
+    "symbol_description_4": "step values",
+}
diff --git a/src/i18n/locales/en/decimalConvert.i18n.json5 b/src/i18n/locales/en/decimalConvert.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7f3d840baca0507bb0762e2fcfdb33ccbf68fdfc
--- /dev/null
+++ b/src/i18n/locales/en/decimalConvert.i18n.json5
@@ -0,0 +1,11 @@
+{
+    "input_placeholder": "Please enter the number to be converted",
+    "input": "Input",
+    "input_type_common": "Common",
+    "input_type_other": "Other",
+    "base": "Base-{0}",
+    "result": "Result {0}",
+    "alphabet": "64 Alphabet",
+    "reset": "Reset Default",
+    "alphabet_length_error": "The conversion alphabet must be 64 bits in length"
+}
diff --git a/src/i18n/locales/en/diffs.i18n.json5 b/src/i18n/locales/en/diffs.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..18b8fdf117c81c1e5f33186f0e5e7882e07f153f
--- /dev/null
+++ b/src/i18n/locales/en/diffs.i18n.json5
@@ -0,0 +1,4 @@
+{
+    "more": "More Languages",
+    "collapse":"Collapse Identical"
+}
diff --git a/src/i18n/locales/en/encrypt.i18n.json5 b/src/i18n/locales/en/encrypt.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..9ac9b3e3865f065dcc68d2099248b7c4c2077a4d
--- /dev/null
+++ b/src/i18n/locales/en/encrypt.i18n.json5
@@ -0,0 +1,13 @@
+{
+    "input": "Input",
+    "password":"Password/Secret Key",
+    "encrypt": "Encrypt",
+    "decrypt":"Decrypt",
+    "generate_secret_key": "Generate Secret Key",
+    "output":"Output",
+    "public_key": "Public Key:",
+    "private_key":"Private Key:",
+    "secret_key_prompt": "Please save the key pair in time, the current key data cannot be restored after closing the dialog",
+    "close":"Close",
+    "failed": "Operation failed with error:{0}"
+}
diff --git a/src/i18n/locales/en/hexString.i18n.json5 b/src/i18n/locales/en/hexString.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..693c48b9a4a515710229f15c37abdd1e832ff238
--- /dev/null
+++ b/src/i18n/locales/en/hexString.i18n.json5
@@ -0,0 +1,5 @@
+{
+    "input": "Input",
+    "output": "Output",
+    "uppercase": "Uppercase",
+}
diff --git a/src/i18n/locales/en/html.i18n.json5 b/src/i18n/locales/en/html.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..91c7b2711cd42464ce11839d57d7436a275f8673
--- /dev/null
+++ b/src/i18n/locales/en/html.i18n.json5
@@ -0,0 +1,6 @@
+{
+    "input": "Input",
+    "encode":"Encode",
+    "decode": "Decode",
+    "output":"Output"
+}
diff --git a/src/i18n/locales/en/ip.i18n.json5 b/src/i18n/locales/en/ip.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..63bfd3d329f4b36987a178390ec593752e6d6000
--- /dev/null
+++ b/src/i18n/locales/en/ip.i18n.json5
@@ -0,0 +1,8 @@
+{
+    "input": "Please enter IP address",
+    "query":"Query",
+    "local": "Local IP",
+    "info_source":"IP information source",
+    "ok": "Query Success",
+    "error":"Query Fail:{0}"
+}
diff --git a/src/i18n/locales/en/json.i18n.json5 b/src/i18n/locales/en/json.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..4a6ccb9bbe49dac0df61500422c2346c83f1c382
--- /dev/null
+++ b/src/i18n/locales/en/json.i18n.json5
@@ -0,0 +1,14 @@
+{
+    "input": "Input",
+    "content_empty": "Please enter content",
+    "error": "Exception:{0}",
+    "format": "Format",
+    "compress": "Compress",
+    "escape": "Escape",
+    "clear_escape": "Unescape",
+    "unicode_to_zh": "Unicode->Zh",
+    "zh_to_unicode": "Zh->Unicode",
+    "to_get": "To Get",
+    "get_to_json": "Get=>Json",
+    "clear": "Clear"
+}
diff --git a/src/i18n/locales/en/jsonToObject.i18n.json5 b/src/i18n/locales/en/jsonToObject.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a151e5062a653dd785c222b538244686ac077cc7
--- /dev/null
+++ b/src/i18n/locales/en/jsonToObject.i18n.json5
@@ -0,0 +1,7 @@
+{
+    "input": "Input",
+    "output":"Output",
+    "type_error": "Conversion type error",
+    "format": "Beautify",
+    "error":"Error:{0}"
+}
diff --git a/src/i18n/locales/en/jwt.i18n.json5 b/src/i18n/locales/en/jwt.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..55f6e3c50edd32af0c59a18e04f2c5838bee1712
--- /dev/null
+++ b/src/i18n/locales/en/jwt.i18n.json5
@@ -0,0 +1,6 @@
+{
+    "input": "Input",
+    "decode":"Decode",
+    "output": "Output",
+    "decode_fail":"Decode Fail:{0}"
+}
diff --git a/src/i18n/locales/en/main.i18n.json5 b/src/i18n/locales/en/main.i18n.json5
index 089d920e38476cde5884215d074a33e78ac8981c..848b2cd8256fe9ba6023d04c96649fdce89519e0 100644
--- a/src/i18n/locales/en/main.i18n.json5
+++ b/src/i18n/locales/en/main.i18n.json5
@@ -4,6 +4,8 @@
     "ui_views": "View",
     "ui_load":"Loading",
     "ui_close": "Close",
+    "ui_copy_text_ok":"Result Copied ^o^",
+    "ui_copy_image_ok":"Image Copied ^o^",
 
     // views
     "setting_language": "Language",
diff --git a/src/i18n/locales/en/pinyin.i18n.json5 b/src/i18n/locales/en/pinyin.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..9d4303ce4656cee4fe7da260a632ee97d5f7f429
--- /dev/null
+++ b/src/i18n/locales/en/pinyin.i18n.json5
@@ -0,0 +1,12 @@
+{
+    "input": "Input",
+    "normal":"No Tone",
+    "tone": "Have Tone",
+    "abbr":"First Letter",
+    "output": "Output",
+    "delimiter_null":"No Delimiter",
+    "delimiter_space": "Space Delimiter",
+    "delimiter_1":"'-' Delimiter",
+    "delimiter_2": "'_' Delimiter",
+    "delimiter_3":"'.' Delimiter"
+}
diff --git a/src/i18n/locales/en/qrCode.i18n.json5 b/src/i18n/locales/en/qrCode.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a1b9c4f6261fcfcca56657a4a0ed41ba7f245bca
--- /dev/null
+++ b/src/i18n/locales/en/qrCode.i18n.json5
@@ -0,0 +1,11 @@
+{
+    "generate_title": "Generate",
+    "generate_input": "Input",
+    "generate_error": "Generate Error:{0}",
+    "reader_title": "Reader",
+    "reader_input": "Please enter the QR code image url or click the button below to upload the image",
+    "reader_upload": "Upload Image",
+    "reader_output": "Output",
+    "reader_error": "Reader Error:{0}",
+    "reader_parsing_failure": "Image parsing failure",
+}
diff --git a/src/i18n/locales/en/randomString.i18n.json5 b/src/i18n/locales/en/randomString.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..93c4acb38334ea2cb8c0e5cf637c6ba17ac225c9
--- /dev/null
+++ b/src/i18n/locales/en/randomString.i18n.json5
@@ -0,0 +1,13 @@
+{
+    "length": "Length",
+    "amount": "Number of strings",
+    "delimiter": "Delimiter",
+    "digital": "Digital",
+    "lowercase": "Lowercase",
+    "uppercase": "Uppercase",
+    "symbol": "Symbol",
+    "unique": "Unique",
+    "add_quote": "Add Quote",
+    "generate": "Generate",
+    "output": "Output"
+}
diff --git a/src/i18n/locales/en/regex.i18n.json5 b/src/i18n/locales/en/regex.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..2167cd306294627fac48512ee1595ed45a31063b
--- /dev/null
+++ b/src/i18n/locales/en/regex.i18n.json5
@@ -0,0 +1,32 @@
+{
+    "reference": "Reference",
+    "expression": "Expression",
+    "replace_content": "Replace Content",
+    "delete": "Delete",
+    "input": "Input",
+    "global": "Global",
+    "ignore_case": "Ignore Case",
+    "output": "Output",
+    "output_count": "{0} Total Matches",
+    "output_emty": "No match result, please check expression",
+    "error": "Error:{0}",
+    "reference_url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions",
+    "type_zh": "Chinese",
+    "type_complex": "Double-byte characters (including Chinese characters)",
+    "type_blank": "Blank lines",
+    "type_email": "Email",
+    "type_url": "URL",
+    "type_cn_mobile": "China Mobile Phone Number",
+    "type_ip": "IP",
+    "type_cn_tel": "China Phone Number",
+    "type_tencent_qq": "Tencent QQ",
+    "type_cn_postcode": "China Postcode",
+    "type_date": "Data (YYYY-MM-DD)",
+    "type_positive_integer": "Positive Integer",
+    "type_negative_integer": "Negative Integer",
+    "type_integer": "Integer",
+    "type_non_negative_integer": "Non Negative Integer",
+    "type_non_positive_integer": "Non Positive Integer",
+    "type_positive_float": "Positive Float",
+    "type_negative_float": "Negative Float"
+}
diff --git a/src/i18n/locales/en/serializeConversion.i18n.json5 b/src/i18n/locales/en/serializeConversion.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..116f0147ea2e739b4c715e37ef14e83658e5c68e
--- /dev/null
+++ b/src/i18n/locales/en/serializeConversion.i18n.json5
@@ -0,0 +1,5 @@
+{
+    "input": "Input",
+    "output":"output",
+    "error": "Error:"
+}
diff --git a/src/i18n/locales/en/sign.i18n.json5 b/src/i18n/locales/en/sign.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..6613a01a7b45f6dc5fbd45fc1a8522080d3d6db8
--- /dev/null
+++ b/src/i18n/locales/en/sign.i18n.json5
@@ -0,0 +1,19 @@
+{
+    "sign_data": "Sign Data/Verify data",
+    "verify_code": "Signature after Base64 encoding",
+    "sign": "Sign",
+    "verify": "Verify",
+    "generate_keypair": "Generate Keypair",
+    "public_key": "PEM Public Key",
+    "private_key": "PEM Private Key",
+    "keypair_type": "Type",
+    "keypair_length": "Length",
+    "generate_cancel": "Cancel",
+    "generate_in": "Generate in progress",
+    "generate": "Generate",
+    "error_sign_content_empty": "Sign Data/Private Key Required",
+    "error": "error:{0}",
+    "error_verify_content_empty": "Base64 Sign/Public Key Required",
+    "verify_fail": "Verify Fail",
+    "verify_ok": "Verify Success",
+}
diff --git a/src/i18n/locales/en/text.i18n.json5 b/src/i18n/locales/en/text.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..9ffdc7ab6c04ce8ad6895e94ff1fba6028a1a594
--- /dev/null
+++ b/src/i18n/locales/en/text.i18n.json5
@@ -0,0 +1,63 @@
+{
+    "content": "Text Content",
+    "input": "Input",
+    "resume": "Resume",
+    "case_conversion": "Case Converter",
+    "upper_all": "Upper",
+    "lower_all": "Lower",
+    "upper_line_start": "Upper Line Start",
+    "lower_line_start": "lower Line Start",
+    "upper_word_start": "Upper Word Start",
+    "lower_word_start": "Lower Word Start",
+    "punctuation": "Punctuation",
+    "cn": "CN",
+    "en": "EN",
+    "simplified_traditional": "Chinese",
+    "simplified": "Simplified",
+    "traditional": "Traditional",
+    "replace": "Replace",
+    "line_remove_duplicate": "Line Remove Duplicate",
+    "line_number": "Line Number",
+    "line_number_add": "Add",
+    "line_number_remove": "Remove",
+    "line_sort": "Line Sort",
+    "line_sort_asc": "Asc",
+    "line_sort_desc": "Desc",
+    "filter": "Filter",
+    "filter_trim": "(trim) Removes whitespace from both ends of a string",
+    "filter_blank_line": "Filter blank line",
+    "stat": "Stat",
+    "stat_explain": "Explain",
+    "replace_search": "Search",
+    "replace_replace": "Replace",
+    "replace_explain": "You can enter multiple lines, batch replace by line",
+    "cancel": "Cancel",
+    "submit": "Submit",
+    "string_length": "String",
+    "byte_length": "byte(utf8/gbk)",
+    "word_length": "Word",
+    "line_length": "Line",
+    "zh_length": "(Cn)Char/Punctuation",
+    "en_length": "(En)Char/Word/Punctuation",
+    "int_length": "(Number)Char/word",
+    "ok": "Complete",
+    "error": "Error:{0}",
+    "item": "Item",
+    "explain": "Explain",
+    "explain_byte_length_utf8_name": "byte utf8",
+    "explain_byte_length_utf8_info": "Cn Char Length:3",
+    "explain_byte_length_gbk_name": "byte gbk",
+    "explain_byte_length_gbk_info": "Cn Char Length:2",
+    "explain_string_length_name": "String Length",
+    "explain_string_length_info": "Cn/En Char Length:1 Line Break Length:0",
+    "explain_word_length_name": "Word",
+    "explain_word_length_info": "Cn+En Word+punctuation+Number word",
+    "explain_int_length_name": "Number Char",
+    "explain_int_length_info": "Number Char Count. For example:'a1024 1024' result:8",
+    "explain_int_word_length_name": "Number Word",
+    "explain_int_word_length_info": "For example:'a1024 1024' result:1",
+    "explain_blank_line_length_name": "Line Length",
+    "explain_blank_line_length_info": "Blank lines are also included in the number of lines",
+    "value": "value",
+    "stat_show": "Word:{1} UTF-8:{1} GBK:{2}"
+}
diff --git a/src/i18n/locales/en/time.i18n.json5 b/src/i18n/locales/en/time.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..fa49c04bcede08af18b78dd40aa70bde746db943
--- /dev/null
+++ b/src/i18n/locales/en/time.i18n.json5
@@ -0,0 +1,23 @@
+{
+    "diff_tool": "Difference Calculator",
+    "and": "And",
+    "diff": "Diff",
+    "operation": "Time Operation",
+    "add": "Add",
+    "reduce": "Reduce",
+    "after": "After",
+    "is": "Is",
+    "error": "error:{0}",
+    "error_duration_length": "The year/month interval can only be an integer",
+    "current_time": "Current Time",
+    "current_date": "Current Date",
+    "current_month_date": "Current Month Date",
+    "current_year_date": "Current Year Date",
+    "year": "Year",
+    "month": "Month",
+    "week": "Week",
+    "day": "Day",
+    "hour": "Hour",
+    "minute": "Minute",
+    "second": "Second"
+}
diff --git a/src/i18n/locales/en/timestamp.i18n.json5 b/src/i18n/locales/en/timestamp.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..d36561f3efc9391764bf44e704ed772c4fa25f6c
--- /dev/null
+++ b/src/i18n/locales/en/timestamp.i18n.json5
@@ -0,0 +1,14 @@
+{
+    "input": "Input",
+    "get":"Get Current",
+    "normal_second": "Normal Second",
+    "normal_millisecond":"Normal Millisecond",
+    "unix_second": "Unix Timestamp Second",
+    "unix_millisecond":"Unix Timestamp Millisecond",
+    "output": "Output",
+    "copy":"Copy",
+    "error_format": "Input Format Error",
+    "error":"error:{0}",
+    "format": "Format",
+    "value":"Value"
+}
diff --git a/src/i18n/locales/en/unicode.i18n.json5 b/src/i18n/locales/en/unicode.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..765de2e0152c4546406b5fb7b53303d270d415e5
--- /dev/null
+++ b/src/i18n/locales/en/unicode.i18n.json5
@@ -0,0 +1,15 @@
+{
+    "input": "Input",
+    "encode": "Encode",
+    "decode": "Decode",
+    "mode_default": "Unicode Default",
+    "mode_wide": "Unicode Wide",
+    "mode_wide_bracket": "Unicode Wide(Has Bracket)",
+    "mode_number": "Unicode Number",
+    "mode_html_10": "HTML-code(Base-10)",
+    "mode_html_16": "HTML-code(Base-16)",
+    "mode_css_16": "Css-code(Base-16)",
+    "ignore_ascii": "Ignore Ascii",
+    "output": "Output",
+    "error": "error:{0}"
+}
diff --git a/src/i18n/locales/en/unit.i18n.json5 b/src/i18n/locales/en/unit.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..1c7e2e7c6b9f0706ba373ac85866656908896bf2
--- /dev/null
+++ b/src/i18n/locales/en/unit.i18n.json5
@@ -0,0 +1,190 @@
+{
+    "length": "Length",
+    "area": "Area",
+    "volume": "Volume",
+    "weight": "Weight",
+    "temperature": "Temperature",
+    "pressure": "Pressure",
+    "power": "Power",
+    "work": "Work",
+    "density": "Density",
+    "strength": "Strength",
+    "time": "Time",
+    "speed": "Speed",
+    "byte": "Byte",
+    "angle": "Angle",
+    "length_km": "kilometres",
+    "length_m": "metre",
+    "length_dm": "decimetre",
+    "length_cm": "centimetre",
+    "length_mm": "millimetre",
+    "length_um": "Micrometre",
+    "length_nm": "Nanometre",
+    "length_pm": "Picometre",
+    "length_ly": "Light year",
+    "length_au": "Astronomical unit",
+    "length_in": "Inch",
+    "length_ft": "Foot",
+    "length_yd": "Yard",
+    "length_mi": "Mile",
+    "length_nmi": "Nautical mile",
+    "length_fm": "Fathom",
+    "length_fur": "furlong",
+    "length_cn_li": "lǐ",
+    "length_cn_zhang": "zhàng",
+    "length_cn_chi": "chǐ",
+    "length_cn_cun": "cùn",
+    "length_cn_fen": "fēn",
+    "length_cn_li2": "lí",
+    "length_cn_hao": "háo",
+    "area_km_2": "Square kilometre",
+    "area_ha": "Hectare",
+    "area_are": "Hectare Are",
+    "area_m_2": "Square metre",
+    "area_dm_2": "square decimetre",
+    "area_cm_2": "Square centimetre",
+    "area_mm_2": "Square millimeter",
+    "area_acre": "Acre",
+    "area_mi_2": "Square Acre",
+    "area_yd_2": "Square Yard",
+    "area_ft_2": "Square foot",
+    "area_in_2": "Square inch",
+    "area_rd_2": "Square rod",
+    "area_cn_qing": "qǐng",
+    "area_cn_mu": "mǔ",
+    "area_cn_fen": "fēn",
+    "area_cn_chi_2": "Square chǐ",
+    "area_cn_cun_2": "Square cùn",
+    "volume_m_3": "Cubic metre",
+    "volume_dm_3": "cubic decimeter",
+    "volume_cm_3": "Cubic centimeter",
+    "volume_mm_3": "Cubic millimeter",
+    "volume_l": "Litre",
+    "volume_dl": "deciliter",
+    "volume_ml": "milliliter",
+    "volume_cl": "centiliter",
+    "volume_uL": "microliter",
+    "volume_hl": "hectolitre",
+    "volume_ft_3": "Cubic feet",
+    "volume_in_3": "Cubic inch",
+    "volume_yd_3": "Cubic yards",
+    "volume_acre_ft": "acre foot",
+    "volume_uk_gal": "Uk gallon",
+    "volume_us_gal": "Us gallon",
+    "volume_uk_oz": "Uk ounce",
+    "volume_us_oz": "Us ounce",
+    "weight_kg": "kilogram",
+    "weight_g": "gram",
+    "weight_mg": "Milligrams",
+    "weight_ug": "microgram",
+    "weight_t": "Ton",
+    "weight_q": "Quintal",
+    "weight_ct": "carat",
+    "weight_lb": "Pound",
+    "weight_oz": "ounce",
+    "weight_gr": "Grain",
+    "weight_lt": "British long ton",
+    "weight_st1": "US short ton",
+    "weight_st2": "Stone",
+    "weight_uk_cwt": "British long hundredweight",
+    "weight_us_cwt": "US short hundredweight",
+    "weight_dr": "Dram",
+    "weight_cn_dan": "dān",
+    "weight_cn_jin": "jīn",
+    "weight_cn_liang": "liǎng",
+    "weight_cn_qian": "qián",
+    "temperature_c": "Celsius",
+    "temperature_f": "Fahrenheit",
+    "temperature_k": "Kelvin",
+    "temperature_r": "Rankine_scale",
+    "temperature_re": "Réaumur_scale",
+    "pressure_pa": "Pascal",
+    "pressure_kpa": "KPa",
+    "pressure_hpa": "HPa",
+    "pressure_atm": "Standard atmospheric pressure",
+    "pressure_mmhg": "MmHg",
+    "pressure_in_hg": "Inch mercury",
+    "pressure_bar": "bar",
+    "pressure_mbar": "millibar",
+    "pressure_psf": "Pounds per square feet",
+    "pressure_psi": "Pounds per square inch",
+    "pressure_mmwg": "mmH2O",
+    "pressure_kgf_cm_2": "Kgf/square centimeter",
+    "pressure_kgf_m_2": "Kgf/Square meter",
+    "pressure_mpa": "MPa",
+    "power_w": "watt",
+    "power_kw": "kilowatt",
+    "power_hp": "Imperial horsepower",
+    "power_ps": "Metric horsepower",
+    "power_kg_m_s": "Kg·m/sec",
+    "power_kcal_s": "Kcal/s",
+    "power_btu_s": "British Thermal Unit/sec",
+    "power_ft_lb_s": "Feet·lbs/sec",
+    "power_j_s": "Joule/sec",
+    "power_n_m_s": "Newton m/s",
+    "work_j": "joule",
+    "work_kg_m": "Kg·m",
+    "work_ps_h": "Metric horsepower·hour",
+    "work_hp_h": "British horsepower·hour",
+    "work_kw_h": "Kilowatt hour",
+    "work_kw_h_": "Spend",
+    "work_cal": "Card",
+    "work_kcal": "Kcal",
+    "work_btu": "British Thermal Unit",
+    "work_ft_lb": "Foot pound",
+    "work_kj": "Kilojoule",
+    "density_kg_cm_3": "Kg/Cubic centimeter",
+    "density_kg_dm_3": "Kg/cubic decimeter",
+    "density_kg_m_3": "Kg/Cubic metre",
+    "density_g_cm_3": "g/Cubic centimeter",
+    "density_g_dm_3": "g/cubic decimeter",
+    "density_g_m_3": "g/Cubic metre",
+    "strength_n": "Newton",
+    "strength_kn": "Kilogram Newton",
+    "strength_kgf": "Kilogram force",
+    "strength_gf": "Keli 克力",
+    "strength_tf": "Metric ton force",
+    "strength_lbf": "Pound force",
+    "strength_kip": "Kilopound force",
+    "strength_dyn": "Dyne",
+    "time_yr": "year",
+    "time_week": "week",
+    "time_d": "Day",
+    "time_h": "Hour",
+    "time_min": "Minute",
+    "time_s": "Second",
+    "time_ms": "millisecond",
+    "time_us": "Microseconds",
+    "time_ns": "Nanosecond",
+    "speed_m_s": "metre/Sec",
+    "speed_km_s": "kilometer/Sec",
+    "speed_km_h": "kilometer/Hour",
+    "speed_c": "Speed of light",
+    "speed_mach": "Maher",
+    "speed_mile_h": "Mile/hour",
+    "speed_in_s": "Inch/Sec",
+    "byte_bit": "Bit",
+    "byte_b": "byte",
+    "byte_kb": "Kilobytes",
+    "byte_mb": "Megabyte",
+    "byte_gb": "Gigabytes",
+    "byte_tb": "Terabyte",
+    "byte_pb": "Petabytes",
+    "byte_eb": "Exabytes",
+    "angle_circle": "circle",
+    "angle_angle": "angle",
+    "angle_gon": "grade",
+    "angle_degree": "degree",
+    "angle_min": "Minute",
+    "angle_s": "Second",
+    "angle_rad": "radian",
+    "angle_mrad": "Milliradian",
+    "metric_system": "Metric System",
+    "imperial_units": "Imperial Units",
+    "chinese_units": "Chinese Units",
+    "angle_units": "Angle Units",
+    "radian_units": "Radian Units",
+    "all": "All"
+}
+
+
diff --git a/src/i18n/locales/en/url.i18n.json5 b/src/i18n/locales/en/url.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f0ff092afd963e8ec40180a1c3ffef02b3debd6f
--- /dev/null
+++ b/src/i18n/locales/en/url.i18n.json5
@@ -0,0 +1,6 @@
+{
+    "input": "Input",
+    "encode": "Encode",
+    "decode": "Decode",
+    "output": "Output"
+}
diff --git a/src/i18n/locales/en/uuid.i18n.json5 b/src/i18n/locales/en/uuid.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..64a3f7fe673677fe686a5096fa4da9a9ebd1a4ad
--- /dev/null
+++ b/src/i18n/locales/en/uuid.i18n.json5
@@ -0,0 +1,9 @@
+{
+    "amount": "Amount",
+    "delimiter": "Delimiter",
+    "hyphens": "Hyphens(-)",
+    "is_upper": "Upper",
+    "is_add_quote": "Add Quote",
+    "uint8_array": "Uint8 Array",
+    "output": "Output"
+}
diff --git a/src/i18n/locales/en/variableConversion.i18n.json5 b/src/i18n/locales/en/variableConversion.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f5e7ee98eef9ca63e88b9fb3cb69e269e04fcef9
--- /dev/null
+++ b/src/i18n/locales/en/variableConversion.i18n.json5
@@ -0,0 +1,4 @@
+{
+    "input": "Input",
+    "input_placeholder":"A line of one"
+}
diff --git a/src/i18n/locales/en/websocket.i18n.json5 b/src/i18n/locales/en/websocket.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..d87a093323507062602be6469ddc4d8596005049
--- /dev/null
+++ b/src/i18n/locales/en/websocket.i18n.json5
@@ -0,0 +1,18 @@
+{
+    "connect": "Connect",
+    "close": "Close",
+    "send_content": "Send Content",
+    "log_content": "Request/Response/Log Content",
+    "send": "Send",
+    "copy": "Copy",
+    "clear": "Clear",
+    "you": "You",
+    "server": "Server",
+    "error_connect": "Ws is not connected yet, or the connection fails, please check",
+    "error_content": "Send content cannot be empty",
+    "connect_ok": "Connect Success",
+    "close_ok": "Close Success",
+    "error": "error:{0}",
+    "connect_start": "Connecting:{0}",
+    "close_start": "Closing:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/barcode.i18n.json5 b/src/i18n/locales/zh_CN/barcode.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..0e85530bf39d6528e65274653b926518ae40e01a
--- /dev/null
+++ b/src/i18n/locales/zh_CN/barcode.i18n.json5
@@ -0,0 +1,22 @@
+{
+    "content": "内容",
+    "background": "背景",
+    "line_color": "线条颜色",
+    "bar_width": "条码宽",
+    "height": "条码高",
+    "margin": "外边距",
+    "show_text": "文本显示",
+    "hide": "隐藏",
+    "top": "上方",
+    "bottom": "下方",
+    "text_align": "水平位置",
+    "left": "居左",
+    "center": "居中",
+    "right": "居右",
+    "font": "字体",
+    "bold": "粗体",
+    "italic": "斜体",
+    "font_size": "大小",
+    "text_margin": "外边距",
+    "invalid_content": "无效条码内容"
+}
diff --git a/src/i18n/locales/zh_CN/code.i18n.json5 b/src/i18n/locales/zh_CN/code.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..6fda308d579f6f69806abecf67b79fb849d9eb50
--- /dev/null
+++ b/src/i18n/locales/zh_CN/code.i18n.json5
@@ -0,0 +1,8 @@
+{
+    "more": "更多语言",
+    "indent": "代码缩进",
+    "indent_width": "缩进 空格 {0}",
+    "compress": "压缩",
+    "complete": "操作完成",
+    "error_prompt": "错误提示"
+}
diff --git a/src/i18n/locales/zh_CN/crontab.i18n.json5 b/src/i18n/locales/zh_CN/crontab.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a340f82ad9612742f16d11b1ca35971d797f65e4
--- /dev/null
+++ b/src/i18n/locales/zh_CN/crontab.i18n.json5
@@ -0,0 +1,14 @@
+{
+    "expression": "表达式",
+    "execute_time": "最近执行时间",
+    "example": "例子",
+    "format": "格式",
+    "execute_time_list": "最近10次执行时间",
+    "no": "第{0}次: {1}",
+    "symbol": "特殊符号",
+    "description": "描述",
+    "symbol_description_1": "代表任何时刻都接受的意思。举例来说，范例一内那个日、月、周都是*，就代表着不论何月、何日的礼拜几的12：00都执行后续命令的意思。",
+    "symbol_description_2": "代表分隔时段的意思。举例来说，如果要执行的工作是3：00与6：00时，就会是：0 3,6 * * * command时间还是有五列，不过第二列是 3,6 ，代表3与6都适用",
+    "symbol_description_3": "代表一段时间范围内，举例来说，8点到12点之间的每小时的20分都进行一项工作：20 8-12 * * * command仔细看到第二列变成8-12.代表 8,9,10,11,12 都适用的意思",
+    "symbol_description_4": "那个n代表数字，即是每隔n单位间隔的意思，例如每五分钟进行一次，则：*/5 * * * * command用*与/5来搭配，也可以写成0-59/5，意思相同",
+}
diff --git a/src/i18n/locales/zh_CN/decimalConvert.i18n.json5 b/src/i18n/locales/zh_CN/decimalConvert.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..8924c5e064cf65aab04cd65fd069042d803f3383
--- /dev/null
+++ b/src/i18n/locales/zh_CN/decimalConvert.i18n.json5
@@ -0,0 +1,11 @@
+{
+    "input_placeholder": "请输入待转换数字",
+    "input": "转换数字",
+    "input_type_common": "常用",
+    "input_type_other": "其他",
+    "base": "{0} 进制",
+    "result": "转换结果 {0}",
+    "alphabet": "64位字母表",
+    "reset": "恢复默认",
+    "alphabet_length_error": "转换字母表必须是64位长度"
+}
diff --git a/src/i18n/locales/zh_CN/diffs.i18n.json5 b/src/i18n/locales/zh_CN/diffs.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ded7f31404ba91ba493999e7e8a053d33b833f99
--- /dev/null
+++ b/src/i18n/locales/zh_CN/diffs.i18n.json5
@@ -0,0 +1,4 @@
+{
+    "more": "更多语言",
+    "collapse":"折叠相同"
+}
diff --git a/src/i18n/locales/zh_CN/encrypt.i18n.json5 b/src/i18n/locales/zh_CN/encrypt.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..71d8078439d8415ec8789886074b7cb105d859ca
--- /dev/null
+++ b/src/i18n/locales/zh_CN/encrypt.i18n.json5
@@ -0,0 +1,13 @@
+{
+    "input": "输入",
+    "password":"密码/密钥",
+    "encrypt": "加密",
+    "decrypt":"解密",
+    "generate_secret_key": "生成密钥对",
+    "output":"输出",
+    "public_key": "公钥:",
+    "private_key":"私钥:",
+    "secret_key_prompt": "请及时保存秘钥对, 关闭对话框后无法恢复当前秘钥数据",
+    "close":"关闭",
+    "failed": "操作失败:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/hexString.i18n.json5 b/src/i18n/locales/zh_CN/hexString.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c09995220a2c101b3b0458249cda265d73b95d25
--- /dev/null
+++ b/src/i18n/locales/zh_CN/hexString.i18n.json5
@@ -0,0 +1,5 @@
+{
+    "input": "输入",
+    "output": "输出",
+    "uppercase": "大写字母",
+}
diff --git a/src/i18n/locales/zh_CN/html.i18n.json5 b/src/i18n/locales/zh_CN/html.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..015c1a07621d765c2b6ee52bc0f7a3c655bdc40c
--- /dev/null
+++ b/src/i18n/locales/zh_CN/html.i18n.json5
@@ -0,0 +1,6 @@
+{
+    "input": "输入",
+    "encode":"编码",
+    "decode": "解码",
+    "output":"输出"
+}
diff --git a/src/i18n/locales/zh_CN/ip.i18n.json5 b/src/i18n/locales/zh_CN/ip.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..b74f48af5c6d9d26fc1d5a697e3a4ad548fbfdeb
--- /dev/null
+++ b/src/i18n/locales/zh_CN/ip.i18n.json5
@@ -0,0 +1,8 @@
+{
+    "input": "请输入IP地址",
+    "query":"查询",
+    "local": "本地IP",
+    "info_source":"IP 信息来源",
+    "ok": "查询成功",
+    "error":"查询异常:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/json.i18n.json5 b/src/i18n/locales/zh_CN/json.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..1008afc828e1e1d407a5cb4b6d8cd68fc8f11631
--- /dev/null
+++ b/src/i18n/locales/zh_CN/json.i18n.json5
@@ -0,0 +1,14 @@
+{
+    "input": "输入",
+    "content_empty": "请输入内容",
+    "error":"异常:{0}",
+    "format": "格式化",
+    "compress":"压缩",
+    "escape": "转移",
+    "clear_escape":"去除转移",
+    "unicode_to_zh": "Unicode转中文",
+    "zh_to_unicode":"中文转Unicode",
+    "to_get": "转Get参数",
+    "get_to_json":"Get参数转Json",
+    "clear": "清空"
+}
diff --git a/src/i18n/locales/zh_CN/jsonToObject.i18n.json5 b/src/i18n/locales/zh_CN/jsonToObject.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f7261f1e9f60fabb044ba44c2d3fef6e751b0c38
--- /dev/null
+++ b/src/i18n/locales/zh_CN/jsonToObject.i18n.json5
@@ -0,0 +1,7 @@
+{
+    "input": "输入",
+    "output":"输出",
+    "type_error": "转换类型错误",
+    "format": "格式化",
+    "error":"错误:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/jwt.i18n.json5 b/src/i18n/locales/zh_CN/jwt.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f7f4b1d7b1850dc585408e5182da02d320e0811d
--- /dev/null
+++ b/src/i18n/locales/zh_CN/jwt.i18n.json5
@@ -0,0 +1,6 @@
+{
+    "input": "输入",
+    "decode":"解码",
+    "output": "输出",
+    "decode_fail":"解码失败:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/main.i18n.json5 b/src/i18n/locales/zh_CN/main.i18n.json5
index 294154ef087b61662ff4b7f12e4e982440b25171..7ea4ab9ad1f5775c640486b78e629af027e16e71 100644
--- a/src/i18n/locales/zh_CN/main.i18n.json5
+++ b/src/i18n/locales/zh_CN/main.i18n.json5
@@ -3,7 +3,9 @@
     "ui_setting": "设置",
     "ui_views": "查看",
     "ui_load":"加载",
-    "ui_close": "管理",
+    "ui_close": "关闭",
+    "ui_copy_text_ok":"结果已复制 ^o^",
+    "ui_copy_image_ok":"图片已复制 ^o^",
 
     // 界面
     "setting_language": "语言",
diff --git a/src/i18n/locales/zh_CN/pinyin.i18n.json5 b/src/i18n/locales/zh_CN/pinyin.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f1f4f6bcf7e27833e5c1e6a3650e88dc028f75b8
--- /dev/null
+++ b/src/i18n/locales/zh_CN/pinyin.i18n.json5
@@ -0,0 +1,12 @@
+{
+    "input": "输入",
+    "normal":"无声调",
+    "tone": "有声调",
+    "abbr":"首字母",
+    "output": "输出",
+    "delimiter_null":"无分隔符",
+    "delimiter_space": "空格分隔",
+    "delimiter_1":"'-'中划线分隔",
+    "delimiter_2": "'_'下划线分隔",
+    "delimiter_3":"'.'点分隔"
+}
diff --git a/src/i18n/locales/zh_CN/qrCode.i18n.json5 b/src/i18n/locales/zh_CN/qrCode.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7894967329df98a95ebf52ac8046b2ade2715732
--- /dev/null
+++ b/src/i18n/locales/zh_CN/qrCode.i18n.json5
@@ -0,0 +1,11 @@
+{
+    "generate_title": "二维码生成",
+    "generate_input": "输入",
+    "generate_error": "生成错误:{0}",
+    "reader_title": "二维码解析",
+    "reader_input": "请输入二维码图片地址或点击下方按钮上传图片",
+    "reader_upload": "上传图片",
+    "reader_output": "输出",
+    "reader_error": "解析错误:{0}",
+    "reader_parsing_failure": "图片解析失败",
+}
diff --git a/src/i18n/locales/zh_CN/randomString.i18n.json5 b/src/i18n/locales/zh_CN/randomString.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..de9b6f57a524caea3fbef64f5ca8886306bb13cc
--- /dev/null
+++ b/src/i18n/locales/zh_CN/randomString.i18n.json5
@@ -0,0 +1,13 @@
+{
+    "length": "长度",
+    "amount":"数量",
+    "delimiter": "分隔符",
+    "digital":"数字",
+    "lowercase": "小写字母",
+    "uppercase":"大写字母",
+    "symbol": "特殊符号",
+    "unique":"唯一",
+    "add_quote": "添加引号",
+    "generate":"生成",
+    "output": "输出"
+}
diff --git a/src/i18n/locales/zh_CN/regex.i18n.json5 b/src/i18n/locales/zh_CN/regex.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..2c706d55804931873fe93fce8c913be3b04d49e6
--- /dev/null
+++ b/src/i18n/locales/zh_CN/regex.i18n.json5
@@ -0,0 +1,32 @@
+{
+    "reference": "参考",
+    "expression": "正则表达式",
+    "replace_content": "替换内容",
+    "delete": "删除",
+    "input": "输入待处理内容",
+    "global": "全局搜索",
+    "ignore_case": "忽略大小写",
+    "output": "输出",
+    "output_count": "共 {0} 个匹配项",
+    "output_emty": "没有匹配结果，请检查正则",
+    "error": "错误:{0}",
+    "reference_url": "https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions",
+    "type_zh": "中文字符",
+    "type_complex": "双字节字符(包括汉字在内)",
+    "type_blank": "空白行",
+    "type_email": "Email地址",
+    "type_url": "网址URL",
+    "type_cn_mobile": "手机",
+    "type_ip": "IP地址",
+    "type_cn_tel": "国内电话号码",
+    "type_tencent_qq": "腾讯QQ号",
+    "type_cn_postcode": "中国邮政编码",
+    "type_date": "(年-月-日)格式日期",
+    "type_positive_integer": "正整数",
+    "type_negative_integer": "负整数",
+    "type_integer": "整数",
+    "type_non_negative_integer": "非负整数（正整数 + 0）",
+    "type_non_positive_integer": "非正整数（负整数 + 0）",
+    "type_positive_float": "正浮点数",
+    "type_negative_float": "负浮点数"
+}
diff --git a/src/i18n/locales/zh_CN/serializeConversion.i18n.json5 b/src/i18n/locales/zh_CN/serializeConversion.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..aa3560a43d2aa2d71e6591ba5b142ce82a0330f7
--- /dev/null
+++ b/src/i18n/locales/zh_CN/serializeConversion.i18n.json5
@@ -0,0 +1,5 @@
+{
+    "input": "输入",
+    "output":"输出",
+    "error": "错误:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/sign.i18n.json5 b/src/i18n/locales/zh_CN/sign.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..cee7c8a2b27d129e5bdee868629e2046279f51b0
--- /dev/null
+++ b/src/i18n/locales/zh_CN/sign.i18n.json5
@@ -0,0 +1,19 @@
+{
+    "sign_data": "待签名内容/验签数据",
+    "verify_code": "Base64编码后签名",
+    "sign": "签名",
+    "verify": "验签",
+    "generate_keypair": "生成公钥/私钥",
+    "public_key": "PEM格式公钥",
+    "private_key": "PEM格式私钥",
+    "keypair_type": "密钥格式",
+    "keypair_length": "密钥长度",
+    "generate_cancel": "取消",
+    "generate_in": "生成中",
+    "generate": "生成",
+    "error_sign_content_empty": "待签名内容/PEM格式私钥 必填",
+    "error": "错误:{0}",
+    "error_verify_content_empty": "Base64编码后签名/PEM格式公钥 必填",
+    "verify_fail": "验签失败",
+    "verify_ok": "验签成功",
+}
diff --git a/src/i18n/locales/zh_CN/text.i18n.json5 b/src/i18n/locales/zh_CN/text.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..b397b2cce7704e42b1a336fc59724cbd2dc204c1
--- /dev/null
+++ b/src/i18n/locales/zh_CN/text.i18n.json5
@@ -0,0 +1,63 @@
+{
+    "content": "文本内容",
+    "input": "输入",
+    "resume": "恢复",
+    "case_conversion": "大小写转换",
+    "upper_all": "全部大写",
+    "lower_all": "全部小写",
+    "upper_line_start": "行首大写",
+    "lower_line_start": "行首小写",
+    "upper_word_start": "词首大写",
+    "lower_word_start": "词首小写",
+    "punctuation": "中英标点转换",
+    "cn": "中文",
+    "en": "英文",
+    "simplified_traditional": "简繁转换",
+    "simplified": "简体",
+    "traditional": "繁体",
+    "replace": "替换",
+    "line_remove_duplicate": "行去重",
+    "line_number": "行号",
+    "line_number_add": "添加",
+    "line_number_remove": "移除",
+    "line_sort": "行排序",
+    "line_sort_asc": "升序",
+    "line_sort_desc": "降序",
+    "filter": "过滤",
+    "filter_trim": "过滤行首尾不可见字符(trim)",
+    "filter_blank_line": "过滤多余空行",
+    "stat": "统计",
+    "stat_explain": "统计说明",
+    "replace_search": "查找",
+    "replace_replace": "替换",
+    "replace_explain": "可输入多行, 按行进行批量替换",
+    "cancel": "取消",
+    "submit": "提交",
+    "string_length": "字符数",
+    "byte_length": "字节数(utf8/gbk)",
+    "word_length": "字数",
+    "line_length": "行数",
+    "zh_length": "(中文)字数/标点",
+    "en_length": "(英文)字母/单词/标点",
+    "int_length": "(数字)字符/单词",
+    "ok": "完成",
+    "error": "错误:{0}",
+    "item": "项目",
+    "explain": "说明",
+    "explain_byte_length_utf8_name": "字节数utf8",
+    "explain_byte_length_utf8_info": "中文字符计3个长度",
+    "explain_byte_length_gbk_name": "字节数gbk",
+    "explain_byte_length_gbk_info": "中文字符计2个长度",
+    "explain_string_length_name": "字符数",
+    "explain_string_length_info": "中/英文字符均计1个长度 换行符不计入长度",
+    "explain_word_length_name": "字数",
+    "explain_word_length_info": "中文字数+英文单词数+中文标点数+英文标点数+数字单词数",
+    "explain_int_length_name": "数字字符",
+    "explain_int_length_info": "统计单个数字出现次数 例如:'a1024 1024' 结果为:8",
+    "explain_int_word_length_name": "数字单词",
+    "explain_int_word_length_info": "例如:'a1024 1024' 结果为:1 其中:'a1024' 为英文单词 '1024' 为数字单词",
+    "explain_blank_line_length_name": "行数",
+    "explain_blank_line_length_info": "空行也会计入行数",
+    "value": "值",
+    "stat_show": "字数:{0} UTF-8:{1} GBK:{2}",
+}
diff --git a/src/i18n/locales/zh_CN/time.i18n.json5 b/src/i18n/locales/zh_CN/time.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..786bb916e1bc08ed4bb08fc9446b1f5d705c5afe
--- /dev/null
+++ b/src/i18n/locales/zh_CN/time.i18n.json5
@@ -0,0 +1,23 @@
+{
+    "diff_tool": "差值计算器",
+    "and": "与",
+    "diff": "相差",
+    "operation": "时间操作",
+    "add": "添加",
+    "reduce": "减少",
+    "after": "后",
+    "is": "为",
+    "error": "错误:{0}",
+    "error_duration_length": "年/月间隔只能是整数",
+    "current_time": "当前时间",
+    "current_date": "当前日期",
+    "current_month_date": "当月日期",
+    "current_year_date": "当年日期",
+    "year": "年",
+    "month": "月",
+    "week": "周",
+    "day": "日",
+    "hour": "小时",
+    "minute": "分钟",
+    "second": "秒"
+}
diff --git a/src/i18n/locales/zh_CN/timestamp.i18n.json5 b/src/i18n/locales/zh_CN/timestamp.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..74bd2de4582d2af1bf45edc9c0d514238f5ef123
--- /dev/null
+++ b/src/i18n/locales/zh_CN/timestamp.i18n.json5
@@ -0,0 +1,14 @@
+{
+    "input": "输入",
+    "get":"获取当前",
+    "normal_second": "标准时间(秒)",
+    "normal_millisecond":"标准时间(毫秒)",
+    "unix_second": "Unix时间戳(秒)",
+    "unix_millisecond":"Unix时间戳(秒)",
+    "output": "输出",
+    "copy":"复制",
+    "error_format": "输入时间格式异常",
+    "error":"错误:{0}",
+    "format": "格式",
+    "value":"值"
+}
diff --git a/src/i18n/locales/zh_CN/unicode.i18n.json5 b/src/i18n/locales/zh_CN/unicode.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c9a7a7a2dc5e853f502d3b317442a3ae174105c9
--- /dev/null
+++ b/src/i18n/locales/zh_CN/unicode.i18n.json5
@@ -0,0 +1,15 @@
+{
+    "input": "输入",
+    "encode": "编码",
+    "decode": "解码",
+    "mode_default": "Unicode 默认模式",
+    "mode_wide": "Unicode 宽字符模式",
+    "mode_wide_bracket": "Unicode 宽字符模式(带大括号)",
+    "mode_number": "Unicode 编码模式",
+    "mode_html_10": "Html 实体(10进制)",
+    "mode_html_16": "Html 实体(16进制)",
+    "mode_css_16": "Css 实体(16进制)",
+    "ignore_ascii": "忽略 Ascii 字符",
+    "output": "输出",
+    "error": "错误:{0}"
+}
diff --git a/src/i18n/locales/zh_CN/unit.i18n.json5 b/src/i18n/locales/zh_CN/unit.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7873f9f061845c56e6ae38a4e036be337e2ada23
--- /dev/null
+++ b/src/i18n/locales/zh_CN/unit.i18n.json5
@@ -0,0 +1,188 @@
+{
+    "length": "长度",
+    "area": "面积",
+    "volume": "体积",
+    "weight": "质量",
+    "temperature": "温度",
+    "pressure": "压力",
+    "power": "功率",
+    "work": "功/能/热",
+    "density": "密度",
+    "strength": "力",
+    "time": "时间",
+    "speed": "速度",
+    "byte": "数据存储",
+    "angle": "角度",
+    "length_km": "千米",
+    "length_m": "米",
+    "length_dm": "分米",
+    "length_cm": "厘米",
+    "length_mm": "毫米",
+    "length_um": "微米",
+    "length_nm": "纳米",
+    "length_pm": "皮米",
+    "length_ly": "光年",
+    "length_au": "天文单位",
+    "length_in": "英寸",
+    "length_ft": "英尺",
+    "length_yd": "码",
+    "length_mi": "英里",
+    "length_nmi": "海里",
+    "length_fm": "英寻",
+    "length_fur": "弗隆",
+    "length_cn_li": "里",
+    "length_cn_zhang": "丈",
+    "length_cn_chi": "尺",
+    "length_cn_cun": "寸",
+    "length_cn_fen": "分",
+    "length_cn_li2": "厘",
+    "length_cn_hao": "毫",
+    "area_km_2": "平方千米",
+    "area_ha": "公顷",
+    "area_are": "公亩",
+    "area_m_2": "平方米",
+    "area_dm_2": "平方分米",
+    "area_cm_2": "平方厘米",
+    "area_mm_2": "平方毫米",
+    "area_acre": "英亩",
+    "area_mi_2": "平方英里",
+    "area_yd_2": "平方码",
+    "area_ft_2": "平方英尺",
+    "area_in_2": "平方英寸",
+    "area_rd_2": "平方竿",
+    "area_cn_qing": "顷",
+    "area_cn_mu": "亩",
+    "area_cn_fen": "分",
+    "area_cn_chi_2": "平方尺",
+    "area_cn_cun_2": "平方寸",
+    "volume_m_3": "立方米",
+    "volume_dm_3": "立方分米",
+    "volume_cm_3": "立方厘米",
+    "volume_mm_3": "立方毫米",
+    "volume_l": "升",
+    "volume_dl": "分升",
+    "volume_ml": "毫升",
+    "volume_cl": "厘升",
+    "volume_uL": "微升",
+    "volume_hl": "公石",
+    "volume_ft_3": "立方英尺",
+    "volume_in_3": "立方英寸",
+    "volume_yd_3": "立方码",
+    "volume_acre_ft": "亩英尺",
+    "volume_uk_gal": "英制加仑",
+    "volume_us_gal": "美制加仑",
+    "volume_uk_oz": "英制液体盎司",
+    "volume_us_oz": "美制液体盎司",
+    "weight_kg": "千克",
+    "weight_g": "克",
+    "weight_mg": "毫克",
+    "weight_ug": "微克",
+    "weight_t": "吨",
+    "weight_q": "公担",
+    "weight_ct": "克拉",
+    "weight_lb": "磅",
+    "weight_oz": "盎司",
+    "weight_gr": "格令",
+    "weight_lt": "长吨",
+    "weight_st1": "短吨",
+    "weight_st2": "英石",
+    "weight_uk_cwt": "英担",
+    "weight_us_cwt": "美担",
+    "weight_dr": "打兰",
+    "weight_cn_dan": "担",
+    "weight_cn_jin": "斤",
+    "weight_cn_liang": "两",
+    "weight_cn_qian": "钱",
+    "temperature_c": "摄氏度",
+    "temperature_f": "华氏度",
+    "temperature_k": "开氏度",
+    "temperature_r": "兰氏度",
+    "temperature_re": "列氏度",
+    "pressure_pa": "帕斯卡",
+    "pressure_kpa": "千帕",
+    "pressure_hpa": "百帕",
+    "pressure_atm": "标准大气压",
+    "pressure_mmhg": "毫米汞柱",
+    "pressure_in_hg": "英寸汞柱",
+    "pressure_bar": "巴",
+    "pressure_mbar": "毫巴",
+    "pressure_psf": "磅力/平方英尺",
+    "pressure_psi": "磅力/平方英寸",
+    "pressure_mmwg": "毫米水柱",
+    "pressure_kgf_cm_2": "公斤力/平方厘米",
+    "pressure_kgf_m_2": "公斤力/平方米",
+    "pressure_mpa": "兆帕",
+    "power_w": "瓦",
+    "power_kw": "千瓦",
+    "power_hp": "英制马力",
+    "power_ps": "米制马力",
+    "power_kg_m_s": "公斤·米/秒",
+    "power_kcal_s": "千卡/秒",
+    "power_btu_s": "英热单位/秒",
+    "power_ft_lb_s": "英尺·磅/秒",
+    "power_j_s": "焦耳/秒",
+    "power_n_m_s": "牛顿·米/秒",
+    "work_j": "焦耳",
+    "work_kg_m": "公斤·米",
+    "work_ps_h": "米制马力·时",
+    "work_hp_h": "英制马力·时",
+    "work_kw_h": "千瓦·时",
+    "work_kw_h_": "度",
+    "work_cal": "卡",
+    "work_kcal": "千卡",
+    "work_btu": "英热单位",
+    "work_ft_lb": "英尺·磅",
+    "work_kj": "千焦",
+    "density_kg_cm_3": "千克/立方厘米",
+    "density_kg_dm_3": "千克/立方分米",
+    "density_kg_m_3": "千克/立方米",
+    "density_g_cm_3": "克/立方厘米",
+    "density_g_dm_3": "克/立方分米",
+    "density_g_m_3": "克/立方米",
+    "strength_n": "牛",
+    "strength_kn": "千牛",
+    "strength_kgf": "千克力",
+    "strength_gf": "克力",
+    "strength_tf": "公吨力",
+    "strength_lbf": "磅力",
+    "strength_kip": "千磅力",
+    "strength_dyn": "达因",
+    "time_yr": "年",
+    "time_week": "周",
+    "time_d": "天",
+    "time_h": "时",
+    "time_min": "分",
+    "time_s": "秒",
+    "time_ms": "毫秒",
+    "time_us": "微秒",
+    "time_ns": "纳秒",
+    "speed_m_s": "米/秒",
+    "speed_km_s": "千米/秒",
+    "speed_km_h": "千米/时",
+    "speed_c": "光速",
+    "speed_mach": "马赫",
+    "speed_mile_h": "英里/时",
+    "speed_in_s": "英寸/秒",
+    "byte_bit": "比特",
+    "byte_b": "字节",
+    "byte_kb": "千字节",
+    "byte_mb": "兆字节",
+    "byte_gb": "千兆字节",
+    "byte_tb": "太字节",
+    "byte_pb": "拍字节",
+    "byte_eb": "艾字节",
+    "angle_circle": "圆周",
+    "angle_angle": "直角",
+    "angle_gon": "百分度",
+    "angle_degree": "度",
+    "angle_min": "分",
+    "angle_s": "秒",
+    "angle_rad": "弧度",
+    "angle_mrad": "毫弧度",
+    "metric_system": "公制",
+    "imperial_units": "英制",
+    "chinese_units": "市制",
+    "angle_units": "角度制",
+    "radian_units": "弧度制",
+    "all": "全部"
+}
diff --git a/src/i18n/locales/zh_CN/url.i18n.json5 b/src/i18n/locales/zh_CN/url.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..92adb92c86c63b6e9770a09ae8038c42c4f347b6
--- /dev/null
+++ b/src/i18n/locales/zh_CN/url.i18n.json5
@@ -0,0 +1,6 @@
+{
+    "input": "输入",
+    "encode": "编码",
+    "decode": "解码",
+    "output": "输出"
+}
diff --git a/src/i18n/locales/zh_CN/uuid.i18n.json5 b/src/i18n/locales/zh_CN/uuid.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..2f5d7b443684a13f3b24a269e9c800f06f8ff8d1
--- /dev/null
+++ b/src/i18n/locales/zh_CN/uuid.i18n.json5
@@ -0,0 +1,9 @@
+{
+    "amount": "数量",
+    "delimiter": "分隔符",
+    "hyphens": "连接符(-)",
+    "is_upper": "大写",
+    "is_add_quote": "添加引号",
+    "uint8_array": "Uint8 Array",
+    "output": "输出"
+}
diff --git a/src/i18n/locales/zh_CN/variableConversion.i18n.json5 b/src/i18n/locales/zh_CN/variableConversion.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3f4ae9f961e3f73c6ed29c687f600733acf5629f
--- /dev/null
+++ b/src/i18n/locales/zh_CN/variableConversion.i18n.json5
@@ -0,0 +1,4 @@
+{
+    "input": "输入",
+    "input_placeholder":"一行一个"
+}
diff --git a/src/i18n/locales/zh_CN/websocket.i18n.json5 b/src/i18n/locales/zh_CN/websocket.i18n.json5
new file mode 100644
index 0000000000000000000000000000000000000000..5d50ab264be679b5bc49aa13aeaf7880b82b9845
--- /dev/null
+++ b/src/i18n/locales/zh_CN/websocket.i18n.json5
@@ -0,0 +1,18 @@
+{
+    "connect": "连接",
+    "close": "断开",
+    "send_content": "发送内容",
+    "log_content": "交互记录",
+    "send": "发送",
+    "copy": "复制全部",
+    "clear": "清空",
+    "you": "你",
+    "server": "服务端",
+    "error_connect": "ws还没有连接，或者连接失败，请检测",
+    "error_content": "发送内容不能为空",
+    "connect_ok": "连接成功",
+    "close_ok": "断开成功",
+    "error": "错误:{0}",
+    "connect_start": "开始连接:{0}",
+    "close_start": "开始中断:{0}"
+}
diff --git a/src/statics/crontab.png b/src/statics/crontab_cn.png
similarity index 100%
rename from src/statics/crontab.png
rename to src/statics/crontab_cn.png
diff --git a/src/statics/crontab_en.png b/src/statics/crontab_en.png
new file mode 100644
index 0000000000000000000000000000000000000000..77a76222f93873cb4691ac18d278bf64bef20828
Binary files /dev/null and b/src/statics/crontab_en.png differ
diff --git a/src/tool.js b/src/tool.js
index ad369afa0541166b6ba71f2838c640e28fdb69ab..8524329d94bf5c67798eafa510711cd1178a5013 100644
--- a/src/tool.js
+++ b/src/tool.js
@@ -8,7 +8,7 @@ import {plugin as modelPlugin} from './tool/model'
 import cache from './tool/cache'
 import setting from './tool/setting'
 import App from './tool.vue'
-import {isUtools,setDisplayMode} from './helper'
+import {isUtools,setDisplayMode,isWeb} from './helper'
 import {setCurrentLocale,i18n} from "./i18n";
 
 const run = () => {
@@ -37,8 +37,7 @@ const run = () => {
 }
 
 (function () {
-    if (document.body.clientWidth > 900 || isUtools) {
-        console.log('调整窗口大小')
+    if (document.body.clientWidth > 900 || isUtools || isWeb) {
         const page = document.getElementById('page')
         page.style.width = 'auto'
         page.style.height = 'auto'
diff --git a/src/tool.vue b/src/tool.vue
index 36bcb0fcab1f02b57e52e48afbc19f9599ab5414..4cb077607c929c1256cefcbb8e1e29f1c6b2e2a3 100644
--- a/src/tool.vue
+++ b/src/tool.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Menu mode="horizontal" theme="light" :active-name="currentCategory" @on-select="categorySelect"
+        <Menu class="tool-category-menu-block" mode="horizontal" theme="light" :active-name="currentCategory" @on-select="categorySelect"
               style="height: 45px;line-height: 45px;">
             <MenuItem :style="$t('main_css_main_category_item_style')" :name="cat.name" v-for="(cat) in category" :key="cat.name">
                 <Badge v-if="badgeCategoryIsShow(cat.name)" dot :offset="[15,-10]">
@@ -31,7 +31,7 @@
                 </template>
             </MenuItem>
         </Menu>
-        <RadioGroup :value="currentTool" @on-change="toolSelect" style="margin: 10px 0 10px 20px;line-height: 30px;">
+        <RadioGroup class="tool-select-block" :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]">
                     {{ $t('main_tool_'+tool.name) }}
diff --git a/src/tool/model.js b/src/tool/model.js
index a418428523a660e35e06b7ad24f322559792dd79..e279bd839ac8d6fbfca62d547865e6562e08ba79 100644
--- a/src/tool/model.js
+++ b/src/tool/model.js
@@ -53,11 +53,12 @@ const debounceSaveToolDataMethod = _.debounce(function () {
 
 export const plugin = {
     install: function (Vue) {
-        Vue.prototype.$getToolData = function (clipboardField = '') {
+        Vue.prototype.$getToolData = function (clipboardField = '',clipboardFieldRegex = "") {
             let data = history(model.getCurrentTool()).current()
             if (clipboardField) {
+                let inputData = "";
                 if (fixeInputData) { // 使用固定输入数据
-                    data[clipboardField] = fixeInputData
+                    inputData = fixeInputData
                     fixeInputData = ""
                 } else if (setting.autoReadCopy()) {
                     let paste = clipboard.paste()
@@ -65,27 +66,42 @@ export const plugin = {
                         if (setting.autoReadCopyFilter()) {
                             paste = paste.trim()
                         }
-                        data[clipboardField] = paste
+                        inputData = paste
+                    }
+                }
+                if (inputData){
+                    if (
+                        !(clipboardFieldRegex instanceof RegExp)
+                        ||
+                        (
+                            clipboardFieldRegex instanceof RegExp
+                            && clipboardFieldRegex.test(inputData)
+                        )
+                    ){
+                        data[clipboardField] = inputData
                     }
                 }
             }
             return data
         }
-        Vue.prototype.$saveToolData = function (data) {
-            debounceSaveToolData = {tool:model.getCurrentTool(),data:_.cloneDeep(data)}
+        Vue.prototype.$saveToolData = function (data, ignoreDebounce = false) {
+            if (ignoreDebounce) {
+                return history(model.getCurrentTool()).push(_.cloneDeep(data))
+            }
+            debounceSaveToolData = {tool: model.getCurrentTool(), data: _.cloneDeep(data)}
             debounceSaveToolDataMethod()
         }
         Vue.prototype.$clipboardCopy = function (data, force = false) {
             if ((setting.autoSaveCopy() || force) && data) {
                 clipboard.copy(data, () => {
-                    this.$Message.success('结果已复制 ^o^')
+                    this.$Message.success(this.$t('main_ui_copy_text_ok').toString())
                 })
             }
         }
         Vue.prototype.$clipboardCopyImages = function (data, force = false) {
             if ((setting.autoSaveCopy() || force) && data) {
                 clipboard.copyImage(data, () => {
-                    this.$Message.success('图片已复制 ^o^')
+                    this.$Message.success(this.$t('main_ui_copy_image_ok').toString())
                 })
             }
         }
diff --git a/src/views/tool/barcode.vue b/src/views/tool/barcode.vue
index 2c27e95686e99ab00d18ad5aa193327dd1f129ee..0b70c0ce5aaa5f92a01413890b24ba07d29d4d53 100644
--- a/src/views/tool/barcode.vue
+++ b/src/views/tool/barcode.vue
@@ -9,7 +9,7 @@
             <Row :gutter="10">
                 <Col span="12">
                     <Form :label-width="80">
-                        <FormItem label="内容">
+                        <FormItem :label="$t('barcode_content')">
                             <Input v-model="current.text">
                                 <Select v-model="current.format" slot="append" style="width: 100px">
                                     <Option v-for="type in barcodeFormat" :key="type" :value="type">{{ type }}</Option>
@@ -18,17 +18,17 @@
                         </FormItem>
                         <Row>
                             <Col span="12">
-                                <FormItem label="背景">
+                                <FormItem :label="$t('barcode_background')">
                                     <ColorPicker recommend v-model="current.background"/>
                                 </FormItem>
                             </Col>
                             <Col span="12">
-                                <FormItem label="线条颜色">
+                                <FormItem :label="$t('barcode_line_color')">
                                     <ColorPicker recommend v-model="current.lineColor"/>
                                 </FormItem>
                             </Col>
                         </Row>
-                        <FormItem label="条码宽">
+                        <FormItem :label="$t('barcode_bar_width')">
                             <Row>
                                 <Col span="21">
                                     <Slider v-model="current.width" :min="1" :max="4"></Slider>
@@ -38,7 +38,7 @@
                                 </Col>
                             </Row>
                         </FormItem>
-                        <FormItem label="条码高">
+                        <FormItem :label="$t('barcode_height')">
                             <Row>
                                 <Col span="21">
                                     <Slider v-model="current.height" :min="10" :max="150"></Slider>
@@ -48,7 +48,7 @@
                                 </Col>
                             </Row>
                         </FormItem>
-                        <FormItem label="外边距">
+                        <FormItem :label="$t('barcode_margin')">
                             <Row>
                                 <Col span="21">
                                     <Slider v-model="current.margin" :min="0" :max="25"></Slider>
@@ -62,33 +62,33 @@
                 </Col>
                 <Col span="12">
                     <Form :label-width="80">
-                        <FormItem label="文本显示">
+                        <FormItem :label="$t('barcode_show_text')">
                             <RadioGroup v-model="current.textPosition" type="button">
                                 <Radio label="close">
-                                    <span>隐藏</span>
+                                    <span>{{ $t('barcode_hide') }}</span>
                                 </Radio>
                                 <Radio label="top">
-                                    <span>上方</span>
+                                    <span>{{ $t('barcode_top') }}</span>
                                 </Radio>
                                 <Radio label="bottom">
-                                    <span>下方</span>
+                                    <span>{{ $t('barcode_bottom') }}</span>
                                 </Radio>
                             </RadioGroup>
                         </FormItem>
-                        <FormItem label="水平位置">
+                        <FormItem :label="$t('barcode_text_align')">
                             <RadioGroup v-model="current.textAlign" type="button">
                                 <Radio :disabled="!showText" label="left">
-                                    <span>居左</span>
+                                    <span>{{ $t('barcode_left') }}</span>
                                 </Radio>
                                 <Radio :disabled="!showText" label="center">
-                                    <span>居中</span>
+                                    <span>{{ $t('barcode_center') }}</span>
                                 </Radio>
                                 <Radio :disabled="!showText" label="right">
-                                    <span>居右</span>
+                                    <span>{{ $t('barcode_right') }}</span>
                                 </Radio>
                             </RadioGroup>
                         </FormItem>
-                        <FormItem label="字体">
+                        <FormItem :label="$t('barcode_font')">
                             <Row :gutter="10">
                                 <Col span="12">
                                     <Select :disabled="!showText" v-model="current.font">
@@ -98,16 +98,16 @@
                                 <Col span="12">
                                     <CheckboxGroup v-model="current.fontOptions">
                                         <Checkbox :disabled="!showText" label="bold">
-                                            <span>粗体</span>
+                                            <span>{{ $t('barcode_bold') }}</span>
                                         </Checkbox>
                                         <Checkbox :disabled="!showText" label="italic">
-                                            <span>斜体</span>
+                                            <span>{{ $t('barcode_italic') }}</span>
                                         </Checkbox>
                                     </CheckboxGroup>
                                 </Col>
                             </Row>
                         </FormItem>
-                        <FormItem label="大小">
+                        <FormItem :label="$t('barcode_font_size')">
                             <Row>
                                 <Col span="22">
                                     <Slider :disabled="!showText" v-model="current.fontSize" :min="8"
@@ -118,7 +118,7 @@
                                 </Col>
                             </Row>
                         </FormItem>
-                        <FormItem label="外边距">
+                        <FormItem :label="$t('barcode_text_margin')">
                             <Row>
                                 <Col span="22">
                                     <Slider :disabled="!showText" v-model="current.textMargin" :min="-15"
@@ -190,7 +190,7 @@ export default {
                 fontSize: this.current.fontSize,
                 textMargin: this.current.textMargin,
                 valid: (valid) => {
-                    this.validStr = !valid ? `"${barcodeContent}" 无效的条码内容` : "";
+                    this.validStr = !valid ? `"${barcodeContent}" ${this.$t('barcode_invalid_content').toString()}` : "";
                     if (!this.validStr && this.current.text) {
                         this.$saveToolData(this.current)
                     }
diff --git a/src/views/tool/base64.vue b/src/views/tool/base64.vue
index acccb39aba856d902e479c925191e943e14e6308..17509802c33f8b123ebdfd9a36dade87335842cc 100644
--- a/src/views/tool/base64.vue
+++ b/src/views/tool/base64.vue
@@ -1,7 +1,12 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" :placeholder="$t('base64_input')"></Input>
-        <option-block>
+    <heightResize ignore :append="['.page-option-block']" @resize="resize">
+        <input-block bottom="0px" right="10px">
+            <autoHeightTextarea :height="height1" v-model="current.input" :placeholder="$t('base64_input')" />
+            <Upload slot="extra" action="#" :before-upload="handleUpload">
+                <Button size="small" type="primary" icon="ios-cloud-upload-outline">{{ $t('base64_upload_file') }}</Button>
+            </Upload>
+        </input-block>
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
                     <Button type="primary" @click="handle('encode')">{{ $t('base64_encode') }}</Button>
@@ -11,21 +16,27 @@
             <FormItem>
                 <Checkbox v-model="current.isUriSafe">{{ $t('base64_url_safe') }}</Checkbox>
             </FormItem>
-            <FormItem style="float: right;">
-                <Upload action="#" :before-upload="handleUpload">
-                    <Button type="primary" icon="md-arrow-round-up">{{ $t('base64_upload_file') }}</Button>
-                </Upload>
-            </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" :placeholder="$t('base64_output') "></Input>
-    </div>
+        <input-block right="10px">
+            <pasteClipboardFlie @on-paste-file="handleUpload">
+                <autoHeightTextarea :height="height2" :value="current.output" :placeholder="$t('base64_output')" />
+            </pasteClipboardFlie>
+        </input-block>
+    </heightResize>
 </template>
 <script>
 import {Base64} from 'js-base64'
 import mimeType from 'mime-types'
 import moment from "moment";
-
+import pasteClipboardFlie from "./components/pasteClipboardFlie";
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 export default {
+    components: {
+        pasteClipboardFlie,
+        heightResize,
+        autoHeightTextarea
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData('input'))
     },
@@ -65,6 +76,10 @@ export default {
             aEle.click();
             aEle.remove();
             window.URL.revokeObjectURL(objectUrl);
+        },
+        resize(height){
+            this.height1 = Math.min(160,Math.ceil(height/2))
+            this.height2 = height - this.height1
         }
     },
     data() {
@@ -75,6 +90,8 @@ export default {
                 operation: '',
                 isUriSafe: false,
             },
+            height1:100,
+            height2:100
         }
     },
 }
diff --git a/src/views/tool/code.vue b/src/views/tool/code.vue
index 3051a2cd315d2be3711be904cb0879cbbf547425..9af3db641107c39852279819aea9aa7256f81d55 100644
--- a/src/views/tool/code.vue
+++ b/src/views/tool/code.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <div style="border: 1px solid #dcdee2; border-radius: 4px">
-            <code-editor ref="editor" v-model="current.content" :auto-height="220" :language="this.current.lang"></code-editor>
-        </div>
-        <option-block>
+        <heightResize :append="['.page-option-block']">
+            <code-editor ref="editor" v-model="current.content" :language="this.current.lang"></code-editor>
+        </heightResize>
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
                     <Button
@@ -16,20 +16,20 @@
                 </ButtonGroup>
             </FormItem>
             <FormItem>
-                <Select placeholder="更多语言" @on-change="(value)=>{handle(value)}">
+                <Select :placeholder="$t('code_more')" @on-change="(value)=>{handle(value)}">
                     <Option v-for="item in lang" :value="item" :key="item">{{ item }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Select placeholder="代码缩进" v-model="current.tab">
-                    <Option :value="2">缩进 Tab 2</Option>
-                    <Option :value="4">缩进 Tab 4</Option>
-                    <Option :value="6">缩进 Tab 6</Option>
-                    <Option :value="8">缩进 Tab 8</Option>
+                <Select :placeholder="$t('code_indent')" v-model="current.tab">
+                    <Option :value="2">{{ $t('code_indent_width',[2]) }}</Option>
+                    <Option :value="4">{{ $t('code_indent_width',[4]) }}</Option>
+                    <Option :value="6">{{ $t('code_indent_width',[6]) }}</Option>
+                    <Option :value="8">{{ $t('code_indent_width',[8]) }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.isCompress">压缩</Checkbox>
+                <Checkbox v-model="current.isCompress">{{ $t('code_compress') }}</Checkbox>
             </FormItem>
         </option-block>
     </div>
@@ -37,10 +37,11 @@
 <script>
 import _ from "lodash";
 import codeEditor from "./components/codeEditor";
-
+import heightResize from "./components/heightResize";
 export default {
     components: {
         codeEditor,
+        heightResize
     },
     computed: {
         buttonLang() {
@@ -66,11 +67,11 @@ export default {
                         this.$refs.editor.compress(language);
                     }
                     this.$saveToolData(this.current);
-                    return this.$Message.success(`${this.current.isCompress ? "压缩" : "格式化"}完成`);
+                    return this.$Message.success(this.$t('code_complete').toString());
                 } catch (e) {
                     console.log(e)
                     return this.$Modal.error({
-                        title: "格式化错误",
+                        title: this.$t('code_error_prompt').toString(),
                         content: `${e.message}`
                     });
                 }
diff --git a/src/views/tool/components/autoHeightTextarea.vue b/src/views/tool/components/autoHeightTextarea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b25b2797471d773689d0afef09031900d179d012
--- /dev/null
+++ b/src/views/tool/components/autoHeightTextarea.vue
@@ -0,0 +1,60 @@
+<template>
+    <Input :style="style" class="auto-height-textarea" v-model="textarea" type="textarea"
+           :placeholder="placeholder"></Input>
+</template>
+<script>
+import _ from "lodash";
+
+// 窗口高度调整 返回工具页面可操作性高度
+export default {
+    name: 'autoHeightTextarea',
+    props: {
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        height: {
+            type: [String, Number],
+            default: ''
+        },
+    },
+    data() {
+        return {
+            textarea: ""
+        }
+    },
+    computed: {
+        style() {
+            let css = [];
+            if (this.height) {
+                css.push(`height:${this.height}${_.isNumber(this.height) ? 'px' : ''}`)
+            }
+            return css.join(";")
+        }
+    },
+    watch: {
+        textarea(value) {
+            if (value !== this.value) {
+                this.$emit('input', value)
+            }
+        },
+        value(value) {
+            if (value !== this.textarea) {
+                this.textarea = value
+            }
+        }
+    },
+    created() {
+        this.textarea = this.value
+    }
+};
+</script>
+<style>
+.auto-height-textarea, .auto-height-textarea textarea.ivu-input {
+    height: 100%;
+}
+</style>
diff --git a/src/views/tool/components/codeEditor.vue b/src/views/tool/components/codeEditor.vue
index 646ed1f0c9e8c8a6d219a81c010fa67b68fcc571..315c5c99ad02179f5952a98dfaff756c90efa5e7 100644
--- a/src/views/tool/components/codeEditor.vue
+++ b/src/views/tool/components/codeEditor.vue
@@ -1,5 +1,7 @@
 <template>
-    <div ref="container" class="code-editor" :style="`height:${containerHeight};width:${width}`"></div>
+    <div :style="style">
+        <div ref="container" class="code-editor" :style="`height:100%;width:${width}`"></div>
+    </div>
 </template>
 <script>
 import {format} from "../library/formatter";
@@ -15,19 +17,37 @@ export default {
             type: String,
             default: ""
         },
-        autoHeight: {
-            type: Number,
-            default: 0
+        enableBorder: {
+            type: Boolean,
+            default: true
+        },
+        placeholder: {
+            type: String,
+            default: ""
         },
         height: {
             type: String,
-            default: "350px"
+            default: "100%"
+        },
+        hideLineNumbers: {
+            type: Boolean,
+            default: false
         },
         width: {
             type: String,
             default: "100%"
         },
     },
+    computed: {
+        style() {
+            let css = [`height:${this.height}`];
+            if (this.enableBorder) {
+                css.push("border: 1px solid #dcdee2")
+                css.push("border-radius: 4px")
+            }
+            return css.join(";")
+        }
+    },
     watch: {
         value(newValue) {
             if (this.editor !== null && this.editor.getValue() !== newValue) {
@@ -40,27 +60,25 @@ export default {
             }
         }
     },
-    created() {
-        if (this.autoHeight > 0) {
-            this.containerHeight = (window.innerHeight - this.autoHeight) + "px"
-        } else {
-            this.containerHeight = this.height
-        }
-    },
     mounted() {
         this.initEditor()
     },
     data() {
         return {
             editor: null,
-            containerHeight: ""
         }
     },
     methods: {
         initEditor() {
-            this.editor = create(this.$refs.container, this.language);
+            this.editor = create(
+                this.$refs.container,
+                this.language,
+                {
+                    lineNumbers: !this.hideLineNumbers,
+                    placeholder: this.placeholder
+                }
+            );
             this.editor.setValue(this.value)
-            this.editor.setSize(null, this.containerHeight)
             this.editor.on('change', editor => {
                 if (this.value !== editor.getValue()) {
                     this.$emit('input', editor.getValue())
@@ -79,4 +97,12 @@ export default {
     }
 };
 </script>
+<style>
+.CodeMirror {
+    height: 100%;
+}
+.CodeMirror pre.CodeMirror-placeholder {
+    color: #999;
+}
+</style>
 
diff --git a/src/views/tool/components/diffEditor.vue b/src/views/tool/components/diffEditor.vue
index 3099a5fcf321ca1e119f5d0a2826d5991468bd5f..9c24178f8fd4d5317bad848ac0b4a67c7793ef70 100644
--- a/src/views/tool/components/diffEditor.vue
+++ b/src/views/tool/components/diffEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" class="diff-editor" :style="`height:${containerHeight};width:${width}`"></div>
+    <div ref="container" class="diff-editor" :style="`height:${height};width:${width}`"></div>
 </template>
 <script>
 import {createMerge} from "../library/editor";
@@ -18,13 +18,9 @@ export default {
             type: Boolean,
             default: false
         },
-        autoHeight: {
-            type: Number,
-            default: 0
-        },
         height: {
             type: String,
-            default: "350px"
+            default: "100%"
         },
         width: {
             type: String,
@@ -45,20 +41,12 @@ export default {
             this.reset()
         }
     },
-    created() {
-        if (this.autoHeight > 0) {
-            this.containerHeight = (window.innerHeight - this.autoHeight) + "px"
-        } else {
-            this.containerHeight = this.height
-        }
-    },
     mounted() {
         this.reset()
     },
     data() {
         return {
             editor: null,
-            containerHeight: ""
         }
     },
     methods: {
@@ -68,7 +56,6 @@ export default {
         },
         initEditor() {
             this.editor = createMerge(this.value, this.$refs.container, this.language, {collapseIdentical: this.collapse ? 2 : false})
-            this.editor.customSetSize(null, this.containerHeight)
             this.editor.customChange((original, modified) => {
                 if (original !== this.value.original || modified !== this.value.modified) {
                     this.value.original = original
@@ -82,7 +69,10 @@ export default {
 </script>
 
 <style>
-.diff-editor .CodeMirror-merge, .diff-editor .CodeMirror-merge .CodeMirror {
+.diff-editor .CodeMirror-merge{
+    border: none;
+}
+.diff-editor .CodeMirror-merge,.diff-editor .CodeMirror-merge-pane, .diff-editor .CodeMirror-merge .CodeMirror {
     height: 100%;
 }
 </style>
diff --git a/src/views/tool/components/heightResize.vue b/src/views/tool/components/heightResize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c64a7634d8476e1b34b8bbfd098a323bd3313ec8
--- /dev/null
+++ b/src/views/tool/components/heightResize.vue
@@ -0,0 +1,83 @@
+<template>
+    <div :style="`height:${height}`">
+        <slot></slot>
+    </div>
+</template>
+<script>
+
+function getAbsoluteHeight(select) {
+    let el = document.querySelector(select)
+    if (el === null) {
+        return 0;
+    }
+    let styles = window.getComputedStyle(el);
+    let margin = parseFloat(styles['marginTop']) +
+        parseFloat(styles['marginBottom']);
+    return Math.ceil(el.offsetHeight + margin);
+}
+
+// 窗口高度调整 返回工具页面可操作高度
+export default {
+    name: 'heightResize',
+    props: {
+        append: {
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
+        reduce: {
+            type: Number,
+            default: 0
+        },
+        remove: {
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
+        ignore: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            height: "auto",
+        }
+    },
+    methods: {
+        reportWindowSize() {
+            this.resize()
+        },
+        resize() {
+            let height = window.innerHeight;
+            let defaultBlock = [".tool-select-block", ".tool-category-menu-block", ".ctool-bottom"]
+            const filterBlock = defaultBlock.filter((item) => {
+                return !this.remove.includes(item)
+            }).concat(this.append)
+            for (let block of filterBlock) {
+                height = height - getAbsoluteHeight(block)
+            }
+            if (this.reduce > 0){
+                height = height - this.reduce
+            }
+            if (height > 100) {
+                height = height - 5
+            }
+            if (!this.ignore) {
+                this.height = height + "px"
+            }
+            this.$emit('resize', height);
+        }
+    },
+    destroyed() {
+        window.removeEventListener("resize", this.reportWindowSize);
+    },
+    mounted() {
+        window.addEventListener("resize", this.reportWindowSize);
+        this.resize();
+    }
+};
+</script>
+
diff --git a/src/views/tool/components/pasteClipboardFlie.vue b/src/views/tool/components/pasteClipboardFlie.vue
new file mode 100644
index 0000000000000000000000000000000000000000..13084329df4bca411f8d05fc4d49f53a808d13c1
--- /dev/null
+++ b/src/views/tool/components/pasteClipboardFlie.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>
+<script>
+// 粘贴时 获取剪贴板图片
+export default {
+    name: 'pasteClipboardFlie',
+    methods: {
+        reader(event) {
+            if (!("clipboardData" in event)){
+                return
+            }
+            let items = event.clipboardData && event.clipboardData.items;
+            let types = event.clipboardData.types || [];
+            if (items && items.length) {
+                for (let i = 0; i < items.length; i++) {
+                    if( types[i] === 'Files' ){
+                        // 触发粘贴文件事件
+                        this.$emit('on-paste-file', items[i].getAsFile());
+                        if (items[i].type.indexOf('image') !== -1) {
+                            // 触发粘贴文件事件 输出图片base64
+                            this.$emit('on-paste-image', items[i].getAsFile());
+                        }
+                        return
+                    }
+                }
+            }
+        }
+    },
+    destroyed() {
+        window.removeEventListener("paste", this.reader);
+    },
+    mounted() {
+        window.addEventListener("paste", this.reader);
+    }
+};
+</script>
+
diff --git a/src/views/tool/crontab.vue b/src/views/tool/crontab.vue
index 95c13bc84f36f9ab3d3e07b5e872b78c30dc0077..868d7b79fed9b68e699e3942d5cd7981ab592d49 100644
--- a/src/views/tool/crontab.vue
+++ b/src/views/tool/crontab.vue
@@ -2,20 +2,25 @@
     <div>
         <Row :gutter="16">
             <Col span="12">
-                <Input v-model="current.input" style="margin-bottom: 16px">
-                    <span slot="prepend">表达式</span>
+                <Input v-model="current.input" style="margin-bottom: 16px" class="page-option-input">
+                    <span slot="prepend">{{ $t('crontab_expression') }}</span>
                 </Input>
-                <Input :value="output" :rows="14" type="textarea" placeholder="最近执行时间"></Input>
+                <heightResize :append="['.page-option-input']">
+                    <autoHeightTextarea :value="output" :placeholder="$t('crontab_execute_time')" />
+                </heightResize>
             </Col>
-            <Col span="12">
+            <Col span="12" class="page-option-reference">
                 <Tabs value="example">
-                    <TabPane label="例子" name="example">
-                        <Table stripe size="small" height="300" :columns="example.columns" :data="example.data"></Table>
+                    <TabPane :label="$t('crontab_example')" name="example">
+                        <heightResize :reduce="52" @resize="resize">
+                            <Table stripe size="small" :height="referenceHeight" border :columns="example.columns" :data="example.data"></Table>
+                        </heightResize>
                     </TabPane>
-                    <TabPane label="格式" name="format" style="text-align: center">
-                        <img src="../../statics/crontab.png" style="height: 300px" alt="">
+                    <TabPane :label="$t('crontab_format')" name="format" style="text-align: center">
+                        <img v-if="locale === 'zh_CN'" src="../../statics/crontab_cn.png" style="height: 300px" alt="">
+                        <img v-else src="../../statics/crontab_en.png" style="height: 300px" alt="">
                     </TabPane>
-                    <TabPane label="特殊字符" name="special">
+                    <TabPane :label="$t('crontab_symbol')" name="special">
                         <Table stripe size="small" height="300" :columns="special.columns" :data="special.data"></Table>
                     </TabPane>
                 </Tabs>
@@ -24,92 +29,116 @@
     </div>
 </template>
 <script>
-    import cronstrue from 'cronstrue/i18n';
-    import parser from 'cron-parser';
-    import moment from "moment"
-
-    export default {
-        computed: {
-            output() {
-                if (!this.current.input) return "";
-                let list = [];
-                try {
-                    list.push(cronstrue.toString(this.current.input, {locale: "zh_CN"}));
-                    list.push("\n最近10次执行时间");
-                    let interval = parser.parseExpression(this.current.input);
-                    for (let i = 1; i <= 10; i++) {
-                        list.push(`第${i}次: ` +  moment(interval.next().toString()).format("YYYY-MM-DD HH:mm:ss"))
-                    }
-                    this.$saveToolData(this.current);
-                } catch (err) {
-                    list.push(err)
+import cronstrue from 'cronstrue/i18n';
+import parser from 'cron-parser';
+import moment from "moment"
+import {getCurrentLocale} from "../../i18n";
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
+    computed: {
+        locale() {
+            return getCurrentLocale()
+        },
+        output() {
+            if (!this.current.input) return "";
+            let list = [];
+            try {
+                list.push(this.conversion(this.current.input));
+                list.push(`\n${this.$t('crontab_execute_time_list')}`);
+                let interval = parser.parseExpression(this.current.input);
+                for (let i = 1; i <= 10; i++) {
+                    list.push(this.$t('crontab_no', [i, moment(interval.next().toString()).format("YYYY-MM-DD HH:mm:ss")]))
                 }
+                this.$saveToolData(this.current);
+            } catch (err) {
+                list.push(err)
+            }
 
-                return list.join("\n");
-            },
-        },
-        created() {
-            this.current = Object.assign(this.current, this.$getToolData())
+            return list.join("\n");
         },
-        data() {
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData())
+        this.example.data = this.example.data.map((item) => {
             return {
-                current: {
-                    input: "2 */5 * * 2-5",
-                    operation: "check"
-                },
-                special: {
-                    columns: [
-                        {title: '特殊字符', key: 'name', width: 100},
-                        {title: '代表意义', key: 'text'},
-                    ],
-                    data: [
-                        {
-                            name: "*(星号)",
-                            text: "代表任何时刻都接受的意思。举例来说，范例一内那个日、月、周都是*，就代表着不论何月、何日的礼拜几的12：00都执行后续命令的意思。"
-                        },
-                        {
-                            name: ",(逗号)",
-                            text: "代表分隔时段的意思。举例来说，如果要执行的工作是3：00与6：00时，就会是：0 3,6 * * * command时间还是有五列，不过第二列是 3,6 ，代表3与6都适用"
-                        },
-                        {
-                            name: "-(减号)",
-                            text: "代表一段时间范围内，举例来说，8点到12点之间的每小时的20分都进行一项工作：20 8-12 * * * command仔细看到第二列变成8-12.代表 8,9,10,11,12 都适用的意思"
-                        },
-                        {
-                            name: "/n(斜线)",
-                            text: "那个n代表数字，即是每隔n单位间隔的意思，例如每五分钟进行一次，则：*/5 * * * * command用*与/5来搭配，也可以写成0-59/5，意思相同"
-                        }
-                    ]
-                },
-                example: {
-                    columns: [
-                        {title: '例子', key: 'example', width: 120},
-                        {title: '说明', key: 'text'},
-                    ],
-                    data: [
-                        {example: "*/1 * * * *", text: "每1分钟执行"},
-                        {example: "* * * * *", text: "每1分钟执行"},
-                        {example: "*/5 * * * *", text: "每5分钟执行"},
-                        {example: "0 * * * *", text: "每小时执行"},
-                        {example: "0 */1 * * *", text: "每小时执行"},
-                        {example: "0 7 * * *", text: "每天上午7点执行"},
-                        {example: "10 7 * * *", text: "每天上午7点10分执行"},
-                        {example: "0 0 * * *", text: "每天定时执行一次"},
-                        {example: "0 0 * * 0", text: "每周定时执行一次"},
-                        {example: "0 0 1 * *", text: "每月定时执行一次"},
-                        {example: "0 0 1 1 *", text: "每年定时执行一次"},
-                        {example: "5 * * * *", text: "指定每小时的第5分钟执行一次命令"},
-                        {example: "30 5 * * *", text: "指定每天的 5:30 执行命令"},
-                        {example: "30 7 8 * *", text: "指定每月8号的7：30分执行命令"},
-                        {example: "30 5 8 6 *", text: "指定每年的6月8日5：30执行命令"},
-                        {example: "30 6 * * 0", text: "指定每星期日的6:30执行命令"},
-                        {example: "30 3 10,20 * *", text: "每月10号及20号的3：30执行命令[注：“，”用来连接多个不连续的时段]"},
-                        {example: "25 8-11 * * *", text: "每天8-11点的第25分钟执行命令[注：“-”用来连接连续的时段"},
-                        {example: "*/15 * * * *", text: "每15分钟执行一次命令 [即每个小时的第0 15 30 45 60分钟执行命令]"},
-                        {example: "30 6 */10 * *", text: "每个月中，每隔10天6:30执行一次命令[即每月的1、11、21、31日是的6：30执行一次命令。]"}
-                    ]
-                }
+                example: item,
+                text: this.conversion(item)
+            }
+        })
+    },
+    methods: {
+        conversion(input) {
+            return cronstrue.toString(input, {locale: this.locale})
+        },
+        resize(height){
+            this.referenceHeight = height
+        }
+    },
+    data() {
+        return {
+            referenceHeight:101,
+            current: {
+                input: "2 */5 * * 2-5",
+                operation: "check"
+            },
+            special: {
+                columns: [
+                    {title: this.$t('crontab_symbol'), key: 'name', width: 100},
+                    {title: this.$t('crontab_description'), key: 'text'},
+                ],
+                data: [
+                    {
+                        name: "*",
+                        text: this.$t('crontab_symbol_description_1')
+                    },
+                    {
+                        name: ",",
+                        text: this.$t('crontab_symbol_description_2')
+                    },
+                    {
+                        name: "-",
+                        text: this.$t('crontab_symbol_description_3')
+                    },
+                    {
+                        name: "/n",
+                        text: this.$t('crontab_symbol_description_4')
+                    }
+                ]
+            },
+            example: {
+                columns: [
+                    {title: this.$t('crontab_example'), key: 'example', width: 120},
+                    {title: this.$t('crontab_description'), key: 'text'},
+                ],
+                data: [
+                    "*/1 * * * *",
+                    "* * * * *",
+                    "*/5 * * * *",
+                    "0 * * * *",
+                    "0 */1 * * *",
+                    "0 7 * * *",
+                    "10 7 * * *",
+                    "0 0 * * *",
+                    "0 0 * * 0",
+                    "0 0 1 * *",
+                    "0 0 1 1 *",
+                    "5 * * * *",
+                    "30 5 * * *",
+                    "30 7 8 * *",
+                    "30 5 8 6 *",
+                    "30 6 * * 0",
+                    "30 3 10,20 * *",
+                    "25 8-11 * * *",
+                    "*/15 * * * *",
+                    "30 6 */10 * *"
+                ]
             }
         }
     }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/src/views/tool/decimalConvert.vue b/src/views/tool/decimalConvert.vue
index a4b717aae808713da059eb9cb80118d8b757a261..db84fd5307b7be79c561ec4907aa50b8ed47a93b 100644
--- a/src/views/tool/decimalConvert.vue
+++ b/src/views/tool/decimalConvert.vue
@@ -1,35 +1,36 @@
 <template>
     <div style="padding: 0 70px">
         <option-block>
-            <Input v-model="current.input" placeholder="请输入待转换数字">
-                <div slot="prepend" style="width: 70px"><strong>转换数字</strong></div>
+            <Input v-model="current.input" :placeholder="$t('decimalConvert_input_placeholder')">
+                <div slot="prepend" style="width: 70px"><strong>{{ $t('decimalConvert_input') }}</strong></div>
                 <Select v-model="current.decimal" slot="append" style="width:100px">
-                    <OptionGroup :label="type.common.name">
-                        <Option v-for="v in type.common.list" :value="v" :key="v">{{ v }} 进制</Option>
+                    <OptionGroup :label="$t('decimalConvert_input_type_common')">
+                        <Option v-for="v in type.common" :value="v" :key="v">{{ $t('decimalConvert_base',[v]) }}</Option>
                     </OptionGroup>
-                    <OptionGroup :label="type.other.name">
-                        <Option v-for="v in type.other.list" :value="v" :key="v">{{ v }} 进制</Option>
+                    <OptionGroup :label="$t('decimalConvert_input_type_other')">
+                        <Option v-for="v in type.other" :value="v" :key="v">{{ $t('decimalConvert_base',[v]) }}</Option>
                     </OptionGroup>
                 </Select>
             </Input>
         </option-block>
         <option-block v-for="n in [1,2,3,4,5,6]" :key="n">
             <Input v-model="current['resultOutput'+n]" readonly>
-                <div slot="prepend" style="width: 70px">转换结果{{ n }}</div>
+                <div slot="prepend" style="width: 70px">{{ $t('decimalConvert_result',[n]) }}</div>
                 <Select slot="append" v-model="current['resultDecimal'+n]" style="width:100px">
-                    <OptionGroup :label="type.common.name">
-                        <Option v-for="v in type.common.list" :value="v" :key="v">{{ v }} 进制</Option>
+                    <OptionGroup :label="$t('decimalConvert_input_type_common')">
+                        <Option v-for="v in type.common" :value="v" :key="v">{{ $t('decimalConvert_base',[v]) }}</Option>
                     </OptionGroup>
-                    <OptionGroup :label="type.other.name">
-                        <Option v-for="v in type.other.list" :value="v" :key="v">{{ v }} 进制</Option>
+                    <OptionGroup :label="$t('decimalConvert_input_type_other')">
+                        <Option v-for="v in type.other" :value="v" :key="v">{{ $t('decimalConvert_base',[v]) }}</Option>
                     </OptionGroup>
                 </Select>
             </Input>
         </option-block>
         <option-block>
             <Input v-model="current.alphabet">
-                <div slot="prepend" style="width: 70px">64位字母表</div>
-                <Button slot="append" @click="current.alphabet=alphabet" :disabled="current.alphabet===alphabet">恢复默认
+                <div slot="prepend">{{ $t('decimalConvert_alphabet') }}</div>
+                <Button slot="append" @click="current.alphabet=alphabet" :disabled="current.alphabet===alphabet">
+                    {{ $t('decimalConvert_reset') }}
                 </Button>
             </Input>
         </option-block>
@@ -46,7 +47,7 @@ export default {
     watch: {
         convert: function (val) {
             if (val.alphabet.length !== 64) {
-                return this.$Message.error("转换字母表必须是64位长度");
+                return this.$Message.error(this.$t('decimalConvert_alphabet_length_error').toString());
             }
             if (!val.input) {
                 return;
@@ -74,17 +75,11 @@ export default {
         },
         type() {
             let type = {
-                common: {
-                    name: "常用进制",
-                    list: [2, 8, 10, 16]
-                },
-                other: {
-                    name: "其他进制",
-                    list: []
-                }
+                common: [2, 8, 10, 16],
+                other: []
             }
             for (let i = 2; i <= 64; i++) {
-                type.common.list.includes(i) || type.other.list.push(i);
+                type.common.includes(i) || type.other.push(i);
             }
             return type
         }
diff --git a/src/views/tool/diffs.vue b/src/views/tool/diffs.vue
index 2e63c6e814dac49ccecb57665b29a21d7cc3056d..5b29ff3871f3587b71f5f741c0f6fd5c29b08429 100644
--- a/src/views/tool/diffs.vue
+++ b/src/views/tool/diffs.vue
@@ -1,10 +1,11 @@
 <template>
     <div>
-        <div style="border: 1px solid #dcdee2; border-radius: 4px">
-            <diffEditor ref="editor" :collapse="current.collapse" v-model="current.diff" :language="current.language"
-                        :auto-height="220"/>
+        <heightResize :append="['.page-option-block']">
+        <div style="border: 1px solid #dcdee2; border-radius: 4px;height: 100%;">
+            <diff-editor ref="editor" :collapse="current.collapse" v-model="current.diff" :language="current.language" />
         </div>
-        <option-block>
+        </heightResize>
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
                     <Button
@@ -17,12 +18,12 @@
                 </ButtonGroup>
             </FormItem>
             <FormItem>
-                <Select placeholder="更多语言" @on-change="(value)=>{setLanguage(value)}">
+                <Select :placeholder="$t('diffs_more')" @on-change="(value)=>{setLanguage(value)}">
                     <Option v-for="item in allLang" :value="item" :key="item">{{ item }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.collapse">折叠相同</Checkbox>
+                <Checkbox v-model="current.collapse">{{ $t('diffs_collapse') }}</Checkbox>
             </FormItem>
         </option-block>
     </div>
@@ -31,6 +32,7 @@
 import diffEditor from "./components/diffEditor";
 import {allLang} from "./library/editor";
 import _ from "lodash";
+import heightResize from "./components/heightResize";
 
 const COMMON_LANG = [
     "text",
@@ -46,6 +48,7 @@ const COMMON_LANG = [
 export default {
     components: {
         diffEditor,
+        heightResize
     },
     computed: {
         allLang() {
diff --git a/src/views/tool/encrypt.vue b/src/views/tool/encrypt.vue
index f1cd6575a0b31f0ba3397e75dbfb58ec192276da..37b009132bdf9baacbf18b78b72b3fcd2879a62d 100644
--- a/src/views/tool/encrypt.vue
+++ b/src/views/tool/encrypt.vue
@@ -1,14 +1,14 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize ignore :append="['.page-option-block']" @resize="resize">
+        <autoHeightTextarea v-model="current.input" :height="inputHeight" :placeholder="$t('encrypt_input')"/>
+        <option-block class="page-option-block">
             <FormItem>
                 <Select v-model="current.type" style="width:200px">
                     <Option v-for="v in type" :value="v" :key="v">{{ v }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Input v-model="current.password" placeholder="密码/秘钥"></Input>
+                <Input v-model="current.password" :placeholder="$t('encrypt_password')"></Input>
             </FormItem>
             <FormItem v-if="current.type === 'SM2'">
                 <Select v-model="current.sm2CipherMode" style="width:100px">
@@ -18,25 +18,35 @@
             </FormItem>
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle('encrypt')">加密</Button>
-                    <Button type="primary" @click="handle('decrypt')">解密</Button>
-                    <Button type="primary" @click="sm2Generate()" v-if="current.type === 'SM2'">生成密钥对</Button>
+                    <Button type="primary" @click="handle('encrypt')">{{ $t('encrypt_encrypt') }}</Button>
+                    <Button type="primary" @click="handle('decrypt')">{{ $t('encrypt_decrypt') }}</Button>
+                    <Button type="primary" @click="sm2Generate()" v-if="current.type === 'SM2'">
+                        {{ $t('encrypt_generate_secret_key') }}
+                    </Button>
                 </ButtonGroup>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :value="current.output" :height="outputHeight" :placeholder="$t('encrypt_output')"/>
+    </heightResize>
 </template>
 <script>
-    import crypto from "crypto-js"
-    export default {
-        created() {
-            this.current = Object.assign(this.current,this.$getToolData("input"))
-        },
-        methods: {
-            handle(v) {
-                const sm2 = require('sm-crypto').sm2
-                if (this.current.input) {
+import crypto from "crypto-js"
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+
+export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData("input"))
+    },
+    methods: {
+        handle(v) {
+            const sm2 = require('sm-crypto').sm2
+            if (this.current.input) {
+                try {
                     switch (this.current.type) {
                         case "AES":
                         case "DES":
@@ -48,8 +58,7 @@
                                     this.current.input,
                                     this.current.password
                                 ).toString();
-                            }
-                            else{
+                            } else {
                                 this.current.output = crypto[this.current.type].decrypt(
                                     this.current.input,
                                     this.current.password
@@ -58,14 +67,13 @@
                             break;
                         case "SM2":
                             if (v === "encrypt") {
-                                this.current.output =sm2.doEncrypt(
+                                this.current.output = sm2.doEncrypt(
                                     this.current.input,
                                     this.current.password,
                                     this.current.sm2CipherMode
                                 );
-                            }
-                            else{
-                                this.current.output =sm2.doDecrypt(
+                            } else {
+                                this.current.output = sm2.doDecrypt(
                                     this.current.input,
                                     this.current.password,
                                     this.current.sm2CipherMode
@@ -75,43 +83,59 @@
                         default:
                             return;
                     }
-                    this.current.operation = v;
-                    this.$clipboardCopy(this.current.output);
-                    this.$saveToolData(this.current);
+                } catch (e) {
+                    return this.$Message.error(
+                        this.$t('encrypt_failed', [e.message]).toString()
+                    )
                 }
-            },
-            sm2Generate(){
-                const sm2 = require('sm-crypto').sm2
-                let keypair = sm2.generateKeyPairHex()
-                let string = "公钥:\n"+keypair.publicKey+"\n"+"私钥:\n"+keypair.privateKey+"\n\n"+
-                    "请及时保存秘钥对, 关闭对话框后无法恢复当前秘钥数据"
-                this.$Modal.info({
-                    render: (h) => {
-                        return h('Input', {
-                            props: {
-                                value: string,
-                                type:"textarea",
-                                rows:9
-                            }
-                        })
-                    },
-                    okText:"关闭",
-                    width:600
-                })
-            },
+                this.current.operation = v;
+                this.$clipboardCopy(this.current.output);
+                this.$saveToolData(this.current);
+            }
         },
-        data() {
-            return {
-                current:{
-                    input: "",
-                    password:"",
-                    sm2CipherMode:"C1C3C2",
-                    output: "",
-                    type:"AES",
-                    operation:""
+        sm2Generate() {
+            const sm2 = require('sm-crypto').sm2
+            let keypair = sm2.generateKeyPairHex()
+            let string = [
+                this.$t('encrypt_public_key'),
+                keypair.publicKey,
+                this.$t('encrypt_private_key'),
+                keypair.privateKey, '',
+                this.$t('encrypt_secret_key_prompt')
+            ].join("\n");
+            this.$Modal.info({
+                render: (h) => {
+                    return h('Input', {
+                        props: {
+                            value: string,
+                            type: "textarea",
+                            rows: 9
+                        }
+                    })
                 },
-                type: ["AES","DES","RC4","Rabbit","TripleDes","SM2"],
-            }
+                okText: this.$t('encrypt_close'),
+                width: 600
+            })
         },
-    }
-</script>
\ No newline at end of file
+        resize(height) {
+            this.inputHeight = Math.min(160, Math.ceil(height / 2))
+            this.outputHeight = height - this.inputHeight
+        }
+    },
+    data() {
+        return {
+            current: {
+                input: "",
+                password: "",
+                sm2CipherMode: "C1C3C2",
+                output: "",
+                type: "AES",
+                operation: ""
+            },
+            type: ["AES", "DES", "RC4", "Rabbit", "TripleDes", "SM2"],
+            inputHeight: 100,
+            outputHeight: 100
+        }
+    },
+}
+</script>
diff --git a/src/views/tool/hash.vue b/src/views/tool/hash.vue
index cf6f12f1f2198dbb509afd5880a97759b1551694..f65fbffcab7c1ff392a3c18946db1c399bbff8cc 100644
--- a/src/views/tool/hash.vue
+++ b/src/views/tool/hash.vue
@@ -2,7 +2,7 @@
     <div id="tool-hash">
         <Row :gutter="10">
             <Col span="8">
-                <input-block :text="$t('hash_content')">
+                <input-block>
                     <Input v-model="current.input" :rows="18" type="textarea" :placeholder="$t('hash_content')"></Input>
                     <Checkbox slot="extra" v-model="current.isUppercase">{{ $t('hash_uppercase') }}</Checkbox>
                 </input-block>
diff --git a/src/views/tool/hexString.vue b/src/views/tool/hexString.vue
index 39fc7be5d8e3821ea38aa26483482b2ed05fac48..3090b8d7743e53206a284dd6560d1e60846f36a6 100644
--- a/src/views/tool/hexString.vue
+++ b/src/views/tool/hexString.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize ignore :append="['.page-option-block']" @resize="resize">
+        <autoHeightTextarea v-model="current.input" :height="inputHeight" :placeholder="$t('hexString_input')"/>
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
                     <Button type="primary" @click="handle('hex')">String -> Hex</Button>
@@ -9,15 +9,21 @@
                 </ButtonGroup>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.isUppercase">大写字母</Checkbox>
+                <Checkbox v-model="current.isUppercase">{{ $t('hexString_uppercase') }}</Checkbox>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :value="current.output" :height="outputHeight" :placeholder="$t('hexString_output')"/>
+    </heightResize>
 </template>
 <script>
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 
 export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
@@ -42,6 +48,10 @@ export default {
                 this.$clipboardCopy(this.current.output);
                 this.$saveToolData(this.current);
             }
+        },
+        resize(height) {
+            this.inputHeight = Math.min(160, Math.ceil(height / 2))
+            this.outputHeight = height - this.inputHeight
         }
     },
     data() {
@@ -51,8 +61,10 @@ export default {
                 isUppercase: false,
                 output: "",
                 operation: ""
-            }
+            },
+            inputHeight: 100,
+            outputHeight: 100
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/html.vue b/src/views/tool/html.vue
index 0ae36133eaf3b0b7fef88ab70f220479ab78bdfd..6e00f6589fffdcda9e8e6a98b36f94e2f298e44a 100644
--- a/src/views/tool/html.vue
+++ b/src/views/tool/html.vue
@@ -1,20 +1,26 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize ignore :append="['.page-option-block']" @resize="resize">
+        <autoHeightTextarea v-model="current.input" :height="inputHeight" :placeholder="$t('html_input')"/>
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle('encode')">编码</Button>
-                    <Button type="primary" @click="handle('decode')">解密</Button>
+                    <Button type="primary" @click="handle('encode')">{{ $t('html_encode') }}</Button>
+                    <Button type="primary" @click="handle('decode')">{{ $t('html_decode') }}</Button>
                 </ButtonGroup>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :value="current.output" :height="outputHeight" :placeholder="$t('html_output')"/>
+    </heightResize>
 </template>
 <script>
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 
 export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
@@ -30,6 +36,10 @@ export default {
                 this.$clipboardCopy(this.current.output);
                 this.$saveToolData(this.current);
             }
+        },
+        resize(height) {
+            this.inputHeight = Math.min(160, Math.ceil(height / 2))
+            this.outputHeight = height - this.inputHeight
         }
     },
     data() {
@@ -38,7 +48,9 @@ export default {
                 input: "",
                 output: "",
                 operation: ""
-            }
+            },
+            inputHeight: 100,
+            outputHeight: 100
         }
     },
 }
diff --git a/src/views/tool/ip.vue b/src/views/tool/ip.vue
index 1d16b6bde589e715204a760989b13771c04a8aae..a1d0f9c081d279f6afa88017c3a69327dd140c3e 100644
--- a/src/views/tool/ip.vue
+++ b/src/views/tool/ip.vue
@@ -1,32 +1,35 @@
 <template>
     <div>
-        <option-block>
+        <option-block class="page-option-block" style="padding: 0 0 0 5px">
             <FormItem>
-                <Input v-model="current.input" placeholder="请输入ip地址" style="width:200px"></Input>
+                <Input v-model="current.input" :placeholder="$t('ip_input')" style="width:200px"></Input>
             </FormItem>
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle()">查询</Button>
-                    <Button type="primary" @click="local()">本地IP</Button>
+                    <Button type="primary" @click="handle()">{{ $t('ip_query') }}</Button>
+                    <Button type="primary" @click="local()">{{ $t('ip_local') }}</Button>
                 </ButtonGroup>
             </FormItem>
             <FormItem>
-                <Alert>ip信息来源 <a href="https://get.geojs.io/" target="_blank">https://get.geojs.io/</a></Alert>
+                <Alert>{{ $t('ip_info_source') }} <a href="https://get.geojs.io/" target="_blank">https://get.geojs.io/</a></Alert>
             </FormItem>
         </option-block>
-        <div style="border: 1px solid #dcdee2;border-radius: 4px;">
+        <heightResize :append="['.page-option-block']">
             <code-editor v-model="current.output" language="json"></code-editor>
-        </div>
+        </heightResize>
     </div>
 </template>
 <script>
 import axios from "axios"
 import _ from "lodash"
 import codeEditor from "./components/codeEditor";
+import jsonFormatter from "./library/formatter/json";
+import heightResize from "./components/heightResize";
 
 export default {
     components: {
         codeEditor,
+        heightResize
     },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
@@ -38,11 +41,13 @@ export default {
                     url: 'https://get.geojs.io/v1/ip/geo.json',
                     params: this.current.input !== "localhost" ? {ip: this.current.input} : {}
                 }).then(({data}) => {
-                    this.current.output = JSON.stringify(_.isArray(data) && data.length < 2 ? data[0] : data,null, 4);
+                    this.current.output = jsonFormatter.objectBeautify(_.isArray(data) && data.length < 2 ? data[0] : data);
                     this.$saveToolData(this.current);
-                    this.$Message.success("查询成功")
+                    this.$Message.success(this.$t('ip_ok').toString())
                 }).catch((error) => {
-                    return this.$Message.error("ip地址信息查询错误:" + error);
+                    return this.$Message.error(
+                        this.$t('ip_error', [error.message]).toString()
+                    )
                 });
             }
         },
diff --git a/src/views/tool/json.vue b/src/views/tool/json.vue
index ef10c81e2fa8bb256a2c46e75035954132a4ac1c..5659942df7c1a31f1246d67711c5addfd638b678 100644
--- a/src/views/tool/json.vue
+++ b/src/views/tool/json.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <div style="border: 1px solid #dcdee2;border-radius: 4px;">
-            <code-editor v-model="current.content" :auto-height="220" language="json"></code-editor>
-        </div>
-        <option-block :style="{textAlign:'center'}">
+        <heightResize :append="['.page-option-block']">
+            <code-editor :placeholder="$t('json_input')" v-model="current.content" language="json"></code-editor>
+        </heightResize>
+        <option-block center class="page-option-block">
             <FormItem>
                 <ButtonGroup class="tool-json-button">
                     <Button type="primary" @click="handle(k)" v-for="(v,k) in type" :key="k">{{ v }}</Button>
@@ -14,113 +14,80 @@
 </template>
 <script>
 import Unicode from "./library/unicode"
-import {jsonFormatter} from "./library/formatter"
+import jsonFormatter from "./library/formatter/json"
 import codeEditor from "./components/codeEditor";
-
+import heightResize from "./components/heightResize";
 export default {
     components: {
         codeEditor,
+        heightResize
     },
     created() {
         this.current = Object.assign(this.current, this.$getToolData('content'))
     },
     methods: {
         handle(v) {
-            if (this.current.content) {
-                // 保存操作前数据
-                this.$saveToolData(this.current)
-                switch (v) {
-                    case 'format':
-                        try {
-                            let content = this.current.content.trim()
-                            if (!content) {
-                                return this.$Notice.error({title: '错误提示', desc: '请输入内容'})
-                            }
-                            require('jsonlint').parse(content)
-                            this.current.content = jsonFormatter(content)
-                        } catch (error) {
-                            this.$Notice.error({
-                                title: '错误提示',
-                                desc: error.message,
-                            })
-
-                            return
-                        }
-                        break
-                    case 'compress':
-                        try {
-                            this.current.content = JSON.stringify(JSON.parse(this.current.content.trim()))
-                        } catch (e) {
-                            this.current.content = this.current.content.replace(/\n/g, '').replace(/\r/g, '')
-                        }
-                        break
-                    case 'escape':
-                        this.current.content = this.current.content.trim().replace(/\\/g, '\\\\').replace(/"/g, '\\"')
-                        break
-                    case 'clearEscape':
-                        this.current.content = this.current.content.trim().replace(/\\\\/g, '\\').replace(/\\"/g, '"')
-                        break
-                    case 'unicode2zh':
-                        this.current.content = this.unicode2zh()
-                        break
-                    case 'zh2unicode':
-                        this.current.content = this.zh2unicode()
-                        break
-                    case 'get':
-                        try {
-                            let content = this.current.content.trim()
-                            if (!content) {
-                                return
-                            }
-                            require('jsonlint').parse(content)
-                            this.current.content = require('query-string').stringify(
-                                JSON.parse(this.current.content), {arrayFormat: 'bracket'}
-                            )
-                        } catch (error) {
-                            this.$Notice.error({
-                                title: '错误提示',
-                                desc: error.message,
-                            })
-                            return
-                        }
-                        break
-                    case 'getToJson':
-                        try {
-                            let content = this.current.content.trim()
-                            if (!content) {
-                                return
-                            }
-                            this.current.content = jsonFormatter(
-                                JSON.stringify(require('query-string').parse(content, {arrayFormat: 'bracket'}))
-                            )
-                        } catch (error) {
-                            this.$Notice.error({
-                                title: '错误提示',
-                                desc: error.message,
-                            })
-                            return
-                        }
-                        break
-                    case 'clear':
-                        this.current.content = ''
-                        break
-                    default:
-                        return
+            try {
+                if (!this.current.content.trim()) {
+                    throw new Error(this.$t('json_content_empty').toString())
                 }
+                // 保存操作前数据
+                this.$saveToolData(this.current, true)
+                this.operation(v)
                 this.$clipboardCopy(this.current.content)
                 this.$saveToolData(this.current)
+            } catch (e) {
+                return this.$Message.error(this.$t('json_error', [e.message]).toString())
+            }
+        },
+        operation(type) {
+            switch (type) {
+                case 'format':
+                    require('jsonlint').parse(this.current.content)
+                    this.current.content = jsonFormatter.beautify(this.current.content)
+                    break
+                case 'compress':
+                    this.current.content = jsonFormatter.compress(this.current.content)
+                    break
+                case 'escape':
+                    this.current.content = this.current.content.trim().replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+                    break
+                case 'clearEscape':
+                    this.current.content = this.current.content.trim().replace(/\\\\/g, '\\').replace(/\\"/g, '"')
+                    break
+                case 'unicode2zh':
+                    this.current.content = this.unicode2zh(this.current.content)
+                    break
+                case 'zh2unicode':
+                    this.current.content = this.zh2unicode(this.current.content)
+                    break
+                case 'get':
+                    require('jsonlint').parse(this.current.content)
+                    this.current.content = require('query-string').stringify(
+                        JSON.parse(this.current.content), {arrayFormat: 'bracket'}
+                    )
+                    break
+                case 'getToJson':
+                    this.current.content = jsonFormatter.beautify(
+                        JSON.stringify(require('query-string').parse(this.current.content.trim(), {arrayFormat: 'bracket'}))
+                    )
+                    break
+                case 'clear':
+                    this.current.content = ''
+                    break
+                default:
+                    return
             }
         },
-        unicode2zh() {
+        unicode2zh(content) {
             return Unicode.decode(
-                this.current.content.replace(/\\U[0-9a-fA-F]{4}/g, (item) => {
+                content.replace(/\\U[0-9a-fA-F]{4}/g, (item) => {
                     // \Uxxxx=>\uxxxx
                     return item.replace("\\U", "\\u");
                 })
             )
         },
-        zh2unicode() {
-            let content = this.current.content
+        zh2unicode(content) {
             if (content) {
                 let newStr = ''
                 for (let i = 0; i < content.length; i++) {
@@ -138,22 +105,22 @@ export default {
                 content: '',
             },
             type: {
-                'format': '格式化',
-                'compress': '压缩',
-                'escape': '转义',
-                'clearEscape': '去除转义',
-                'unicode2zh': 'Unicode转中文',
-                'zh2unicode': '中文转Unicode',
-                'get': '转GET',
-                'getToJson': 'GET转Json',
-                'clear': '清空',
+                'format': this.$t('json_format'),
+                'compress': this.$t('json_compress'),
+                'escape': this.$t('json_escape'),
+                'clearEscape': this.$t('json_clear_escape'),
+                'unicode2zh': this.$t('json_unicode_to_zh'),
+                'zh2unicode': this.$t('json_zh_to_unicode'),
+                'get': this.$t('json_to_get'),
+                'getToJson': this.$t('json_get_to_json'),
+                'clear': this.$t('json_clear'),
             },
         }
     },
 }
 </script>
 <style scoped>
-.tool-json-button .ivu-btn{
+.tool-json-button .ivu-btn {
     padding: 0 10px;
 }
 </style>
diff --git a/src/views/tool/jsonToObject.vue b/src/views/tool/jsonToObject.vue
index 5ff7d9d965d02aeba257b7156f1e9ce6259c7fc0..483a211a3492f402462e273f8ed6361795599843 100644
--- a/src/views/tool/jsonToObject.vue
+++ b/src/views/tool/jsonToObject.vue
@@ -1,95 +1,106 @@
 <template>
     <Row :gutter="10">
         <Col span="10">
-            <Card :padding="0">
-                <p slot="title">JSON内容</p>
-                <code-editor v-model="current.json" :auto-height="330" language="json"></code-editor>
-            </Card>
-            <option-block>
-                <FormItem>
+            <div class="page-option-block">
+                <option-block style="padding: 0 0">
                     <Input v-model="current.package">
                         <div slot="prepend">namespace/package</div>
                     </Input>
-                </FormItem>
-            </option-block>
-            <option-block>
-                <FormItem>
+                </option-block>
+                <option-block>
                     <Input v-model="current.class">
                         <div slot="prepend">class/struct</div>
                     </Input>
-                </FormItem>
-            </option-block>
+                </option-block>
+            </div>
+            <input-block top="10px" right="10px" :text="$t('jsonToObject_format')" @on-default-right-bottom-click="format">
+                <heightResize :append="['.page-option-block']">
+                    <code-editor v-model="current.input" :placeholder="$t('jsonToObject_input')" language="json"/>
+                </heightResize>
+            </input-block>
         </Col>
         <Col span="14">
-            <Card :padding="0">
-                <p slot="title">转换结果</p>
+            <input-block top="10px" right="10px">
+                <heightResize>
+                    <code-editor :placeholder="$t('jsonToObject_output')" :value="output" :language="languages[current.type]"/>
+                </heightResize>
                 <template slot="extra">
-                    <Button style="margin-right: 5px" size="small" v-for="(item,key) in type" :key="key" type="primary"
-                            @click="handle(item)">{{ item }}
-                    </Button>
+                    <RadioGroup v-model="current.type" type="button" button-style="solid">
+                        <Radio :label="type" v-for="(type) in types" :key="type">
+                            <span>{{ type }}</span>
+                        </Radio>
+                    </RadioGroup>
                 </template>
-                <code-editor v-model="current.output" :auto-height="220" :language="languages[current.type]"></code-editor>
-            </Card>
+            </input-block>
         </Col>
     </Row>
 </template>
 <script>
 import codeEditor from "./components/codeEditor";
 import json2Go from './library/json2Go'
+import jsonFormatter from './library/formatter/json'
 import json2CSharp from './library/json2CSharp'
 import json2Java from './library/json2Java'
 import json2Dart from './library/json2Dart'
+import heightResize from "./components/heightResize";
 
 export default {
     components: {
         codeEditor,
+        heightResize
     },
     created() {
         this.current = Object.assign(this.current, this.$getToolData())
     },
-    methods: {
-        handle(type) {
+    computed: {
+        output() {
+            if (!this.current.input.trim()) {
+                return "";
+            }
             try {
-                require('jsonlint').parse(this.current.json)
-                if (!this.type.includes(type)) {
-                    throw new Error("转换类型错误")
-                }
-                this.current.type = type;
-
-                switch (type) {
+                let result = "";
+                require('jsonlint').parse(this.current.input)
+                switch (this.current.type) {
                     case "Go":
-                        this.current.output = json2Go(this.current.json, this.current.class, this.current.package).go
-                        break;
+                        result = json2Go(this.current.input, this.current.class, this.current.package).go
+                        break
                     case "Java":
-                        this.current.output = json2Java(JSON.parse(this.current.json), this.current.class, this.current.package)
-                        break;
+                        result = json2Java(JSON.parse(this.current.input), this.current.class, this.current.package)
+                        break
                     case "Dart":
-                        this.current.output = json2Dart(JSON.parse(this.current.json), this.current.class)
-                        break;
+                        result = json2Dart(JSON.parse(this.current.input), this.current.class)
+                        break
                     case "C#":
-                        this.current.output = json2CSharp.convert(JSON.parse(this.current.json), this.current.class, this.current.package)
-                        break;
+                        result = json2CSharp.convert(JSON.parse(this.current.input), this.current.class, this.current.package)
+                        break
+                    default:
+                        throw new Error(this.$t('jsonToObject_type_error').toString())
                 }
+                this.$saveToolData(this.current)
+                return result;
             } catch (error) {
-                this.$Notice.error({
-                    title: '错误提示',
-                    desc: error.message,
-                })
-                return
+                return this.$t('jsonToObject_error', [error.message]).toString()
+            }
+        },
+        types(){
+            return Object.keys(this.languages)
+        }
+    },
+    methods:{
+        format(){
+            if (this.current.input.trim()){
+                this.current.input = jsonFormatter.beautify(this.current.input)
             }
-            this.$saveToolData(this.current)
         }
     },
     data() {
         return {
             current: {
-                json: "",
+                input: "",
                 type: "Java",
                 package: "pag",
                 class: "RootName",
-                output: "",
             },
-            type: ["Java", "C#", "Go",'Dart'],
             languages: {
                 "Java": "java",
                 "Dart": "dart",
diff --git a/src/views/tool/jwt.vue b/src/views/tool/jwt.vue
index fd9d246f5322d0f26205b9ed58a631e5a401ad0d..788351a8cb24491581a35cbf3abecb5af74f413b 100644
--- a/src/views/tool/jwt.vue
+++ b/src/views/tool/jwt.vue
@@ -1,62 +1,71 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle('decode')">解码</Button>
-                </ButtonGroup>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.header">header</Checkbox>
-                <Checkbox v-model="current.payload">payload</Checkbox>
-            </FormItem>
-        </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+    <heightResize @resize="resize">
+        <Row :gutter="10">
+            <Col span="12">
+                <input-block top="4px">
+                    <code-editor :height="editorheight" :placeholder="$t('jwt_input')"  hideLineNumbers v-model="current.input"></code-editor>
+                    <template slot="extra">
+                        <Checkbox v-model="current.header">header</Checkbox>
+                        <Checkbox v-model="current.payload">payload</Checkbox>
+                    </template>
+                </input-block>
+            </Col>
+            <Col span="12">
+                <code-editor :height="editorheight" :placeholder="$t('jwt_output')" :value="output" language="json"></code-editor>
+            </Col>
+        </Row>
+    </heightResize>
 </template>
 <script>
 import jwtDecode from "jwt-decode"
+import codeEditor from "./components/codeEditor";
+import jsonFormatter from "./library/formatter/json";
+import heightResize from "./components/heightResize";
 
 export default {
+    components: {
+        codeEditor,
+        heightResize
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
-    methods: {
-        handle(v) {
-            if (this.current.input) {
-                try {
-                    let data = {};
-                    if (this.current.header) {
-                        data.header = jwtDecode(this.current.input, {header: true})
-                    }
-                    if (this.current.payload) {
-                        data.payload = jwtDecode(this.current.input)
-                    }
-                    this.current.output = JSON.stringify(
-                        Object.keys(data).length === 1 ? data[Object.keys(data)[0]] : data,
-                        null,4
-                    );
-                    this.current.operation = v;
-                    this.$clipboardCopy(this.current.output);
-                    this.$saveToolData(this.current);
-                } catch (e) {
-                    this.$Message.error("解码失败")
-                    console.log(e)
+    computed: {
+        output() {
+            if(!this.current.input.trim()){
+                return ""
+            }
+            try {
+                let data = {};
+                if (this.current.header) {
+                    data.header = jwtDecode(this.current.input, {header: true})
+                }
+                if (this.current.payload) {
+                    data.payload = jwtDecode(this.current.input)
                 }
+                this.$saveToolData(this.current);
+                return jsonFormatter.objectBeautify(
+                    Object.keys(data).length === 1 ? data[Object.keys(data)[0]] : data,
+                );
+            } catch (e) {
+                return this.$t('jwt_decode_fail',[e.message])
             }
         }
     },
+    methods:{
+        resize(height){
+            this.editorheight = height+"px"
+        }
+    },
     data() {
         return {
             current: {
                 input: "",
-                output: "",
                 header: false,
                 payload: true,
-                operation: ""
-            }
+            },
+            editorheight:"100%",
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/library/editor.js b/src/views/tool/library/editor.js
index 8ebe945ff1b47485b6c410bed2b340a7e31f9e25..711300d369ec14305e11c9f9bef8397a0ffa9ff4 100644
--- a/src/views/tool/library/editor.js
+++ b/src/views/tool/library/editor.js
@@ -7,6 +7,7 @@ import "codemirror/addon/fold/comment-fold";
 import "codemirror/addon/fold/foldgutter.css";
 import 'codemirror/addon/merge/merge'
 import 'codemirror/addon/merge/merge.css'
+import "codemirror/addon/display/placeholder";
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/mode/htmlmixed/htmlmixed.js";
 import "codemirror/mode/css/css.js";
@@ -103,12 +104,6 @@ export const createMerge = (data, container, lang, option = {}) => {
             editor.right.orig.setValue(modified)
         }
     }
-
-    editor['customSetSize'] = (width, height) => {
-        editor.edit.setSize(width, height)
-        editor.right.orig.setSize(width, height)
-    }
-
     editor['customChange'] = (callback) => {
         editor.edit.on('change', () => {
             callback && callback(editor.edit.getValue(), editor.right.orig.getValue())
diff --git a/src/views/tool/library/formatter/index.js b/src/views/tool/library/formatter/index.js
index 646d306648a3db323a9f3fec4b4f1100bee1b029..8bea58e167b930bf7ed48a88361081634f01e976 100644
--- a/src/views/tool/library/formatter/index.js
+++ b/src/views/tool/library/formatter/index.js
@@ -45,9 +45,5 @@ export const format = (code, lang, isCompress = false, options = {}) => {
     return methods[lang][method](code,options)
 };
 
-export const jsonFormatter = (code) => {
-    return format(code, 'json')
-}
-
 export default format
 
diff --git a/src/views/tool/library/formatter/json.js b/src/views/tool/library/formatter/json.js
index 43057288a0a7383444ef6f595802302ab83fabfc..4cf073aa9d52e7b15b3a4a6350d7153954117291 100644
--- a/src/views/tool/library/formatter/json.js
+++ b/src/views/tool/library/formatter/json.js
@@ -1,11 +1,18 @@
 export const beautify = (code, option = {}) => {
-    return JSON.stringify(JSON.parse(code.trim()), null, "tab" in option ? option.tab : 4)
+    return objectBeautify(JSON.parse(code.trim()), option)
+}
+export const objectBeautify = (codeObject, option = {}) => {
+    return JSON.stringify(codeObject, null, "tab" in option ? option.tab : 4)
 }
 // eslint-disable-next-line no-unused-vars
 export const compress = (code, options = {}) => {
-    return JSON.stringify(JSON.parse(code.trim()), null, 0)
+    try {
+        return JSON.stringify(JSON.parse(code.trim()), null, 0)
+    } catch (e) {
+        return code.replace(/\n/g, '').replace(/\r/g, '')
+    }
 }
 
 export default {
-    beautify, compress
+    beautify, compress,objectBeautify
 }
diff --git a/src/views/tool/library/serializeConversion.js b/src/views/tool/library/serializeConversion.js
index df1c06638e7df2d9ea09ca8dcfd31dc365d8cfb6..4e80e50fa5f619ab41f7a1d43012eb352feb6ccc 100644
--- a/src/views/tool/library/serializeConversion.js
+++ b/src/views/tool/library/serializeConversion.js
@@ -40,7 +40,7 @@ class serializeConversion {
                     break;
             }
         } catch (e) {
-            throw new Error("源数据转换异常:" + e.message);
+            throw new Error("source error:" + e.message);
         }
     }
 
@@ -64,7 +64,7 @@ class serializeConversion {
                     return this.getProperties();
             }
         } catch (e) {
-            throw new Error("目标数据转换错误:" + e.message);
+            throw new Error("target error:" + e.message);
         }
     }
 
@@ -97,4 +97,4 @@ class serializeConversion {
 
 export const conversion = (data, source) => {
     return new serializeConversion(data, source)
-}
\ No newline at end of file
+}
diff --git a/src/views/tool/library/text.js b/src/views/tool/library/text.js
index cbd088ca95c4434fc58f6ef86d8fb25f8f92c270..bc083f678595f17768b36622b8443feb7ca2980f 100644
--- a/src/views/tool/library/text.js
+++ b/src/views/tool/library/text.js
@@ -40,6 +40,9 @@ class TextHandle {
     // 行首大写
     upperLineStart() {
         return this.text.split(/\r?\n/).map((str) => {
+            if (str.length < 1){
+                return "";
+            }
             return str[0].toUpperCase() + str.substr(1)
         }).join("\n");
     }
@@ -47,6 +50,9 @@ class TextHandle {
     // 行首小写
     lowerLineStart() {
         return this.text.split(/\r?\n/).map((str) => {
+            if (str.length < 1){
+                return "";
+            }
             return str[0].toLowerCase() + str.substr(1)
         }).join("\n");
     }
@@ -77,7 +83,7 @@ class TextHandle {
     replace(search = [], replace = []) {
         let text = this.text;
         for (let i in search) {
-            if (search[i]){
+            if (search[i]) {
                 text = text.replace(new RegExp(regExpQuote(search[i]), 'g'), (i in replace ? replace[i] : ""));
             }
         }
@@ -174,4 +180,4 @@ class TextHandle {
 
 export default (text) => {
     return new TextHandle(text)
-}
\ No newline at end of file
+}
diff --git a/src/views/tool/library/unicode.js b/src/views/tool/library/unicode.js
index 9dd90dbabcaab9cba897a9f5412473ec1bfb5e14..01ff5a4ea2fe58ee0e99e4226fb41cd2092a3fe2 100644
--- a/src/views/tool/library/unicode.js
+++ b/src/views/tool/library/unicode.js
@@ -21,7 +21,7 @@ export default {
             try {
                 return callback && callback()
             } catch (e) {
-                throw new Error(`${item} 解码异常:${e.message}`)
+                throw new Error(`${item} decode error:${e.message}`)
             }
         }
 
@@ -55,7 +55,7 @@ export default {
                     return errorListener(item, () => String.fromCodePoint(parseInt(`0x${item.replace("\\", "").toLowerCase()}`)))
                 });
         }
-        throw new Error("解码类型异常")
+        throw new Error("decode type error")
     },
     encode(string, type = unicode_point_default, ignore_ascii = false) {
         let code = []
@@ -97,7 +97,7 @@ export default {
                     code.push(`\\${hexRepairStr}`);
                     break;
                 default:
-                    throw new Error("编码类型异常")
+                    throw new Error("encode type error")
             }
         }
         return code.join("");
@@ -112,4 +112,4 @@ export default {
     repair(str) {
         return str.length > 3 ? str : `${'0'.repeat(4 - str.length)}${str}`;
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/tool/library/unit.js b/src/views/tool/library/unit.js
index fe75e96250c7aaf0f106e8828818a9647152601f..b60111f0a730c76c3f6cf1f32162f700bf1b680c 100644
--- a/src/views/tool/library/unit.js
+++ b/src/views/tool/library/unit.js
@@ -1,1609 +1,1242 @@
-import _ from 'lodash'
-
 const MAX_NUM = 14       //格式化后的最长限制
 const DECIMAL_NUM = 7    //四舍五入时小数点后位数
 const EXPONENTIAL_NUM = 4 //科学计数法小数点后位数
 
-const CONFIG = {
-    "length": {
-        "name": "长度",
-        "main": "米",
-        "unit": [
+let CONFIG = [
+    {
+        key: "length",
+        main: "m",
+        unit: [
             {
-                "name": "千米",
-                "zh": "千米",
-                "en": "km",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "km",
+                unit: "km",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "米",
-                "zh": "米",
-                "en": "m",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "m",
+                unit: "m",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "分米",
-                "zh": "分米",
-                "en": "dm",
-                "calc": (x) => (x * 1) / 0.1,
-                "init": (x) => (x * 0.1)
+                key: "dm",
+                unit: "dm",
+                calc: (x) => (x * 1) / 0.1,
+                init: (x) => (x * 0.1)
             },
             {
-                "name": "厘米",
-                "zh": "厘米",
-                "en": "cm",
-                "calc": (x) => (x * 1) / 0.01,
-                "init": (x) => (x * 0.01)
+                key: "cm",
+                unit: "cm",
+                calc: (x) => (x * 1) / 0.01,
+                init: (x) => (x * 0.01)
             },
             {
-                "name": "毫米",
-                "zh": "毫米",
-                "en": "mm",
-                "calc": (x) => (x * 1) / 0.001,
-                "init": (x) => (x * 0.001)
+                key: "mm",
+                unit: "mm",
+                calc: (x) => (x * 1) / 0.001,
+                init: (x) => (x * 0.001)
             },
             {
-                "name": "微米",
-                "zh": "微米",
-                "en": "um",
-                "calc": (x) => (x * 1) / 0.000001,
-                "init": (x) => (x * 0.000001)
+                key: "um",
+                unit: "um",
+                calc: (x) => (x * 1) / 0.000001,
+                init: (x) => (x * 0.000001)
             },
             {
-                "name": "纳米",
-                "zh": "纳米",
-                "en": "nm",
-                "calc": (x) => (x * 1) / 0.000000001,
-                "init": (x) => (x * 0.000000001)
+                key: "nm",
+                unit: "nm",
+                calc: (x) => (x * 1) / 0.000000001,
+                init: (x) => (x * 0.000000001)
             },
             {
-                "name": "皮米",
-                "zh": "皮米",
-                "en": "pm",
-                "calc": (x) => (x * 1) / 0.000000000001,
-                "init": (x) => (x * 0.000000000001)
+                key: "pm",
+                unit: "pm",
+                calc: (x) => (x * 1) / 0.000000000001,
+                init: (x) => (x * 0.000000000001)
             },
             {
-                "name": "光年",
-                "zh": "光年",
-                "en": "ly",
-                "calc": (x) => (x * 1) / 9460730472580800,
-                "init": (x) => (x * 9460730472580800)
+                key: "ly",
+                unit: "ly",
+                calc: (x) => (x * 1) / 9460730472580800,
+                init: (x) => (x * 9460730472580800)
             },
             {
-                "name": "天文单位",
-                "zh": "天文单位",
-                "en": "AU",
-                "calc": (x) => (x * 1) / 149597870700,
-                "init": (x) => (x * 149600000000)
+                key: "au",
+                unit: "AU",
+                calc: (x) => (x * 1) / 149597870700,
+                init: (x) => (x * 149600000000)
             },
             {
-                "name": "英寸",
-                "zh": "英寸",
-                "en": "in",
-                "calc": (x) => (x * 1) / (0.3048 / 12),
-                "init": (x) => (x * (0.3048 / 12))
+                key: "in",
+                unit: "in",
+                calc: (x) => (x * 1) / (0.3048 / 12),
+                init: (x) => (x * (0.3048 / 12))
             },
             {
-                "name": "英尺",
-                "zh": "英尺",
-                "en": "ft",
-                "calc": (x) => (x * 1) / 0.3048,
-                "init": (x) => (x * 0.3048)
+                key: "ft",
+                unit: "ft",
+                calc: (x) => (x * 1) / 0.3048,
+                init: (x) => (x * 0.3048)
             },
             {
-                "name": "码",
-                "zh": "码",
-                "en": "yd",
-                "calc": (x) => (x * 1) / (0.3048 * 3),
-                "init": (x) => (x * (0.3048 * 3))
+                key: "yd",
+                unit: "yd",
+                calc: (x) => (x * 1) / (0.3048 * 3),
+                init: (x) => (x * (0.3048 * 3))
             },
             {
-                "name": "英里",
-                "zh": "英里",
-                "en": "mi",
-                "calc": (x) => (x * 1) / (0.3048 * 3 * 1760),
-                "init": (x) => (x * (0.3048 * 3 * 1760))
+                key: "mi",
+                unit: "mi",
+                calc: (x) => (x * 1) / (0.3048 * 3 * 1760),
+                init: (x) => (x * (0.3048 * 3 * 1760))
             },
             {
-                "name": "海里",
-                "zh": "海里",
-                "en": "nmi",
-                "calc": (x) => (x * 1) / 1852,
-                "init": (x) => (x * 1852)
+                key: "nmi",
+                unit: "nmi",
+                calc: (x) => (x * 1) / 1852,
+                init: (x) => (x * 1852)
             },
             {
-                "name": "英寻",
-                "zh": "英寻",
-                "en": "fm",
-                "calc": (x) => (x * 1) / 1.8288,
-                "init": (x) => (x * 1.8288)
+                key: "fm",
+                unit: "fm",
+                calc: (x) => (x * 1) / 1.8288,
+                init: (x) => (x * 1.8288)
             },
             {
-                "name": "弗隆",
-                "zh": "弗隆",
-                "en": "fur",
-                "calc": (x) => (x * 1) / 201.168,
-                "init": (x) => (x * 201.168)
+                key: "fur",
+                unit: "fur",
+                calc: (x) => (x * 1) / 201.168,
+                init: (x) => (x * 201.168)
             },
             {
-                "name": "里",
-                "zh": "里",
-                "en": "",
-                "calc": (x) => (x * 1) / 500,
-                "init": (x) => (x * 500)
+                key: "cn_li",
+                unit: "li",
+                calc: (x) => (x * 1) / 500,
+                init: (x) => (x * 500)
             },
             {
-                "name": "丈",
-                "zh": "丈",
-                "en": "",
-                "calc": (x) => (x * 1) / (10 / 3),
-                "init": (x) => (x * (10 / 3))
+                key: "cn_zhang",
+                unit: "zhang",
+                calc: (x) => (x * 1) / (10 / 3),
+                init: (x) => (x * (10 / 3))
             },
             {
-                "name": "尺",
-                "zh": "尺",
-                "en": "",
-                "calc": (x) => (x * 1) / (1 / 3),
-                "init": (x) => (x * (1 / 3))
+                key: "cn_chi",
+                unit: "chi",
+                calc: (x) => (x * 1) / (1 / 3),
+                init: (x) => (x * (1 / 3))
             },
             {
-                "name": "寸",
-                "zh": "寸",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.1 / 3),
-                "init": (x) => (x * (0.1 / 3))
+                key: "cn_cun",
+                unit: "cun",
+                calc: (x) => (x * 1) / (0.1 / 3),
+                init: (x) => (x * (0.1 / 3))
             },
             {
-                "name": "分",
-                "zh": "分",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.01 / 3),
-                "init": (x) => (x * (0.01 / 3))
+                key: "cn_fen",
+                unit: "fen",
+                calc: (x) => (x * 1) / (0.01 / 3),
+                init: (x) => (x * (0.01 / 3))
             },
             {
-                "name": "厘",
-                "zh": "厘",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.001 / 3),
-                "init": (x) => (x * (0.001 / 3))
+                key: "cn_li2",
+                unit: "li",
+                calc: (x) => (x * 1) / (0.001 / 3),
+                init: (x) => (x * (0.001 / 3))
             },
             {
-                "name": "毫",
-                "zh": "毫",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.0001 / 3),
-                "init": (x) => (x * (0.0001 / 3))
+                key: "cn_hao",
+                unit: "hao",
+                calc: (x) => (x * 1) / (0.0001 / 3),
+                init: (x) => (x * (0.0001 / 3))
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "公制",
-                "list": [
-                    "千米",
-                    "米",
-                    "分米",
-                    "厘米",
-                    "毫米",
-                    "微米",
-                    "纳米",
-                    "皮米",
-                    "光年",
-                    "天文单位"
-                ]
-            },
-            {
-                "name": "英制",
-                "list": [
-                    "英寸",
-                    "英尺",
-                    "码",
-                    "英里",
-                    "海里",
-                    "英寻",
-                    "弗隆"
-                ]
-            },
-            {
-                "name": "市制",
-                "list": [
-                    "里",
-                    "丈",
-                    "尺",
-                    "寸",
-                    "分",
-                    "厘",
-                    "毫"
-                ]
+        special: [],
+        group: [
+            {
+                key: "metric_system",
+                list: ["km", "m", "dm", "cm", "mm", "um", "nm", "pm", "ly", "au"]
+            },
+            {
+                key: "imperial_units",
+                list: ["in", "ft", "yd", "mi", "nmi", "fm", "fur"]
+            },
+            {
+                key: "chinese_units",
+                list: ["cn_li", "cn_zhang", "cn_chi", "cn_cun", "cn_fen", "cn_li2", "cn_hao"]
             }
         ]
     },
-    "area": {
-        "name": "面积",
-        "main": "平方米",
-        "unit": [
+    {
+        key: "area",
+        main: "m_2",
+        unit: [
             {
-                "name": "平方千米",
-                "zh": "平方千米",
-                "en": "km²",
-                "calc": (x) => (x * 1) / 1000000,
-                "init": (x) => (x * 1000000)
+                key: "km_2",
+                unit: "km²",
+                calc: (x) => (x * 1) / 1000000,
+                init: (x) => (x * 1000000)
             },
             {
-                "name": "公顷",
-                "zh": "公顷",
-                "en": "ha",
-                "calc": (x) => (x * 1) / 10000,
-                "init": (x) => (x * 10000)
+                key: "ha",
+                unit: "ha",
+                calc: (x) => (x * 1) / 10000,
+                init: (x) => (x * 10000)
             },
             {
-                "name": "公亩",
-                "zh": "公亩",
-                "en": "are",
-                "calc": (x) => (x * 1) / 100,
-                "init": (x) => (x * 100)
+                key: "are",
+                unit: "are",
+                calc: (x) => (x * 1) / 100,
+                init: (x) => (x * 100)
             },
             {
-                "name": "平方米",
-                "zh": "平方米",
-                "en": "㎡",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "m_2",
+                unit: "m²",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "平方分米",
-                "zh": "平方分米",
-                "en": "dm²",
-                "calc": (x) => (x * 1) / 0.01,
-                "init": (x) => (x * 0.01)
+                key: "dm_2",
+                unit: "dm²",
+                calc: (x) => (x * 1) / 0.01,
+                init: (x) => (x * 0.01)
             },
             {
-                "name": "平方厘米",
-                "zh": "平方厘米",
-                "en": "cm²",
-                "calc": (x) => (x * 1) / 0.0001,
-                "init": (x) => (x * 0.0001)
+                key: "cm_2",
+                unit: "cm²",
+                calc: (x) => (x * 1) / 0.0001,
+                init: (x) => (x * 0.0001)
             },
             {
-                "name": "平方毫米",
-                "zh": "平方毫米",
-                "en": "mm²",
-                "calc": (x) => (x * 1) / 0.000001,
-                "init": (x) => (x * 0.000001)
+                key: "mm_2",
+                unit: "mm²",
+                calc: (x) => (x * 1) / 0.000001,
+                init: (x) => (x * 0.000001)
             },
             {
-                "name": "英亩",
-                "zh": "英亩",
-                "en": "acre",
-                "calc": (x) => (x * 1) / (Math.pow(0.3048, 2) * Math.pow(16.5, 2) * 160),
-                "init": (x) => (x * (Math.pow(0.3048, 2) * Math.pow(16.5, 2) * 160))
+                key: "acre",
+                unit: "acre",
+                calc: (x) => (x * 1) / (Math.pow(0.3048, 2) * Math.pow(16.5, 2) * 160),
+                init: (x) => (x * (Math.pow(0.3048, 2) * Math.pow(16.5, 2) * 160))
             },
             {
-                "name": "平方英里",
-                "zh": "平方英里",
-                "en": "sq.mi",
-                "calc": (x) => (x * 1) / Math.pow((0.3048 * 3 * 1760), 2),
-                "init": (x) => (x * Math.pow((0.3048 * 3 * 1760), 2))
+                key: "mi_2",
+                unit: "mi²",
+                calc: (x) => (x * 1) / Math.pow((0.3048 * 3 * 1760), 2),
+                init: (x) => (x * Math.pow((0.3048 * 3 * 1760), 2))
             },
             {
-                "name": "平方码",
-                "zh": "平方码",
-                "en": "sq.yd",
-                "calc": (x) => (x * 1) / (Math.pow(0.3048, 2) * 9),
-                "init": (x) => (x * (Math.pow(0.3048, 2) * 9))
+                key: "yd_2",
+                unit: "yd²",
+                calc: (x) => (x * 1) / (Math.pow(0.3048, 2) * 9),
+                init: (x) => (x * (Math.pow(0.3048, 2) * 9))
             },
             {
-                "name": "平方英尺",
-                "zh": "平方英尺",
-                "en": "sq.ft",
-                "calc": (x) => (x * 1) / Math.pow(0.3048, 2),
-                "init": (x) => (x * (Math.pow(0.3048, 2)))
+                key: "ft_2",
+                unit: "ft²",
+                calc: (x) => (x * 1) / Math.pow(0.3048, 2),
+                init: (x) => (x * (Math.pow(0.3048, 2)))
             },
             {
-                "name": "平方英寸",
-                "zh": "平方英寸",
-                "en": "sq.in",
-                "calc": (x) => (x * 1) / (Math.pow(0.3048, 2) / 144),
-                "init": (x) => (x * (Math.pow(0.3048, 2) / 144))
+                key: "in_2",
+                unit: "in²",
+                calc: (x) => (x * 1) / (Math.pow(0.3048, 2) / 144),
+                init: (x) => (x * (Math.pow(0.3048, 2) / 144))
             },
             {
-                "name": "平方竿",
-                "zh": "平方竿",
-                "en": "sq.rd",
-                "calc": (x) => (x * 1) / (Math.pow(0.3048, 2) * Math.pow(16.5, 2)),
-                "init": (x) => (x * (Math.pow(0.3048, 2) * Math.pow(16.5, 2)))
+                key: "rd_2",
+                unit: "rd²",
+                calc: (x) => (x * 1) / (Math.pow(0.3048, 2) * Math.pow(16.5, 2)),
+                init: (x) => (x * (Math.pow(0.3048, 2) * Math.pow(16.5, 2)))
             },
             {
-                "name": "顷",
-                "zh": "顷",
-                "en": "",
-                "calc": (x) => (x * 1) / (100 / 0.0015),
-                "init": (x) => (x * (100 / 0.0015))
+                key: "cn_qing",
+                unit: "qing",
+                calc: (x) => (x * 1) / (100 / 0.0015),
+                init: (x) => (x * (100 / 0.0015))
             },
             {
-                "name": "亩",
-                "zh": "亩",
-                "en": "",
-                "calc": (x) => (x * 1) / (1 / 0.0015),
-                "init": (x) => (x * (1 / 0.0015))
+                key: "cn_mu",
+                unit: "mu",
+                calc: (x) => (x * 1) / (1 / 0.0015),
+                init: (x) => (x * (1 / 0.0015))
             },
             {
-                "name": "分",
-                "zh": "分",
-                "en": "",
-                "calc": (x) => (x * 1) / (1 / 0.015),
-                "init": (x) => (x * (1 / 0.015))
+                key: "cn_fen",
+                unit: "fen",
+                calc: (x) => (x * 1) / (1 / 0.015),
+                init: (x) => (x * (1 / 0.015))
             },
             {
-                "name": "平方尺",
-                "zh": "平方尺",
-                "en": "",
-                "calc": (x) => (x * 1) / (1 / 9),
-                "init": (x) => (x * (1 / 9))
+                key: "cn_chi_2",
+                unit: "chi²",
+                calc: (x) => (x * 1) / (1 / 9),
+                init: (x) => (x * (1 / 9))
             },
             {
-                "name": "平方寸",
-                "zh": "平方寸",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.01 / 9),
-                "init": (x) => (x * (0.01 / 9))
+                key: "cn_cun_2",
+                unit: "cun²",
+                calc: (x) => (x * 1) / (0.01 / 9),
+                init: (x) => (x * (0.01 / 9))
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "公制",
-                "list": [
-                    "平方千米",
-                    "公顷",
-                    "公亩",
-                    "平方米",
-                    "平方分米",
-                    "平方厘米",
-                    "平方毫米"
-                ]
-            },
-            {
-                "name": "英制",
-                "list": [
-                    "英亩",
-                    "平方英里",
-                    "平方码",
-                    "平方英尺",
-                    "平方英寸",
-                    "平方竿"
-                ]
-            },
-            {
-                "name": "市制",
-                "list": [
-                    "顷",
-                    "亩",
-                    "分",
-                    "平方尺",
-                    "平方寸"
-                ]
+        special: [],
+        group: [
+            {
+                key: "metric_system",
+                list: ["km_2", "ha", "are", "m_2", "dm_2", "cm_2", "mm_2"]
+            },
+            {
+                key: "imperial_units",
+                list: ["acre", "mi_2", "yd_2", "ft_2", "in_2", "rd_2"]
+            },
+            {
+                key: "chinese_units",
+                list: ["cn_qing", "cn_mu", "cn_fen", "cn_chi_2", "cn_cun_2"]
             }
         ]
     },
-    "volume": {
-        "name": "体积",
-        "main": "立方米",
-        "unit": [
+    {
+        key: "volume",
+        main: "m_3",
+        unit: [
             {
-                "name": "立方米",
-                "zh": "立方米",
-                "en": "m³",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "m_3",
+                unit: "m³",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "立方分米",
-                "zh": "立方分米",
-                "en": "dm³",
-                "calc": (x) => (x * 1) / 0.001,
-                "init": (x) => (x * 0.001)
+                key: "dm_3",
+                unit: "dm³",
+                calc: (x) => (x * 1) / 0.001,
+                init: (x) => (x * 0.001)
             },
             {
-                "name": "立方厘米",
-                "zh": "立方厘米",
-                "en": "cm³",
-                "calc": (x) => (x * 1) / 0.000001,
-                "init": (x) => (x * 0.000001)
+                key: "cm_3",
+                unit: "cm³",
+                calc: (x) => (x * 1) / 0.000001,
+                init: (x) => (x * 0.000001)
             },
             {
-                "name": "立方毫米",
-                "zh": "立方毫米",
-                "en": "mm³",
-                "calc": (x) => (x * 1) / 0.000000001,
-                "init": (x) => (x * 0.000000001)
+                key: "mm_3",
+                unit: "mm³",
+                calc: (x) => (x * 1) / 0.000000001,
+                init: (x) => (x * 0.000000001)
             },
             {
-                "name": "升",
-                "zh": "升",
-                "en": "l",
-                "calc": (x) => (x * 1) / 0.001,
-                "init": (x) => (x * 0.001)
+                key: "l",
+                unit: "l",
+                calc: (x) => (x * 1) / 0.001,
+                init: (x) => (x * 0.001)
             },
             {
-                "name": "分升",
-                "zh": "分升",
-                "en": "dl",
-                "calc": (x) => (x * 1) / 0.0001,
-                "init": (x) => (x * 0.0001)
+                key: "dl",
+                unit: "dl",
+                calc: (x) => (x * 1) / 0.0001,
+                init: (x) => (x * 0.0001)
             },
             {
-                "name": "毫升",
-                "zh": "毫升",
-                "en": "ml",
-                "calc": (x) => (x * 1) / 0.000001,
-                "init": (x) => (x * 0.000001)
+                key: "ml",
+                unit: "ml",
+                calc: (x) => (x * 1) / 0.000001,
+                init: (x) => (x * 0.000001)
             },
             {
-                "name": "厘升",
-                "zh": "厘升",
-                "en": "cl",
-                "calc": (x) => (x * 1) / 0.00001,
-                "init": (x) => (x * 0.00001)
+                key: "cl",
+                unit: "cl",
+                calc: (x) => (x * 1) / 0.00001,
+                init: (x) => (x * 0.00001)
             },
             {
-                "name": "公石",
-                "zh": "公石",
-                "en": "hl",
-                "calc": (x) => (x * 1) / 0.1,
-                "init": (x) => (x * 0.1)
+                key: "uL",
+                unit: "μL",
+                calc: (x) => (x * 1) / 0.000000001,
+                init: (x) => (x * 0.000000001)
             },
             {
-                "name": "立方英尺",
-                "zh": "立方英尺",
-                "en": "cu ft",
-                "calc": (x) => (x * 1) / 0.0283168,
-                "init": (x) => (x * 0.0283168)
+                key: "hl",
+                unit: "hl",
+                calc: (x) => (x * 1) / 0.1,
+                init: (x) => (x * 0.1)
             },
             {
-                "name": "立方英寸",
-                "zh": "立方英寸",
-                "en": "cu in",
-                "calc": (x) => (x * 1) / (0.0283168 / 1728),
-                "init": (x) => (x * (0.0283168 / 1728))
+                key: "ft_3",
+                unit: "ft_3",
+                calc: (x) => (x * 1) / 0.0283168,
+                init: (x) => (x * 0.0283168)
             },
             {
-                "name": "立方码",
-                "zh": "立方码",
-                "en": "cu yd",
-                "calc": (x) => (x * 1) / (0.0283168 * 27),
-                "init": (x) => (x * (0.0283168 * 27))
+                key: "in_3",
+                unit: "in_3",
+                calc: (x) => (x * 1) / (0.0283168 / 1728),
+                init: (x) => (x * (0.0283168 / 1728))
             },
             {
-                "name": "亩英尺",
-                "zh": "亩英尺",
-                "en": "",
-                "calc": (x) => (x * 1) / (43560 * 1728 * 0.016387064 / 1000),
-                "init": (x) => (x * (43560 * 1728 * 0.016387064 / 1000))
+                key: "yd_3",
+                unit: "yd_3",
+                calc: (x) => (x * 1) / (0.0283168 * 27),
+                init: (x) => (x * (0.0283168 * 27))
             },
             {
-                "name": "英制加仑",
-                "zh": "英制加仑",
-                "en": "uk gal",
-                "calc": (x) => (x * 1) / 0.00454609188,
-                "init": (x) => (x * 0.00454609188)
+                key: "acre_ft",
+                unit: "acre ft",
+                calc: (x) => (x * 1) / (43560 * 1728 * 0.016387064 / 1000),
+                init: (x) => (x * (43560 * 1728 * 0.016387064 / 1000))
             },
             {
-                "name": "美制加仑",
-                "zh": "美制加仑",
-                "en": "us gal",
-                "calc": (x) => (x * 1) / (231 * 0.016387064 / 1000),
-                "init": (x) => (x * (231 * 0.016387064 / 1000))
+                key: "uk_gal",
+                unit: "uk gal",
+                calc: (x) => (x * 1) / 0.00454609188,
+                init: (x) => (x * 0.00454609188)
             },
             {
-                "name": "微升",
-                "zh": "微升",
-                "en": "ul",
-                "calc": (x) => (x * 1) / 0.000000001,
-                "init": (x) => (x * 0.000000001)
+                key: "us_gal",
+                unit: "us gal",
+                calc: (x) => (x * 1) / (231 * 0.016387064 / 1000),
+                init: (x) => (x * (231 * 0.016387064 / 1000))
             },
             {
-                "name": "英制液体盎司",
-                "zh": "英制液体盎司",
-                "en": "oz",
-                "calc": (x) => (x * 1) / (0.000001 * 28.41),
-                "init": (x) => (x * 0.000001 * 28.41)
+                key: "uk_oz",
+                unit: "uk oz",
+                calc: (x) => (x * 1) / (0.000001 * 28.41),
+                init: (x) => (x * 0.000001 * 28.41)
             },
             {
-                "name": "美制液体盎司",
-                "zh": "美制液体盎司",
-                "en": "oz",
-                "calc": (x) => (x * 1) / (0.000001 * 29.57),
-                "init": (x) => (x * 0.000001 * 29.57)
+                key: "us_oz",
+                unit: "us oz",
+                calc: (x) => (x * 1) / (0.000001 * 29.57),
+                init: (x) => (x * 0.000001 * 29.57)
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "公制",
-                "list": [
-                    "立方米",
-                    "立方分米",
-                    "立方厘米",
-                    "立方毫米",
-                    "升",
-                    "分升",
-                    "毫升",
-                    "厘升",
-                    "公石",
-                    "微升"
-                ]
-            },
-            {
-                "name": "英制",
-                "list": [
-                    "立方英尺",
-                    "立方英寸",
-                    "立方码",
-                    "亩英尺",
-                    "英制加仑",
-                    "美制加仑",
-                    "英制液体盎司",
-                    "美制液体盎司"
-                ]
+        special: [],
+        group: [
+            {
+                key: "metric_system",
+                list: ["m_3", "dm_3", "cm_3", "mm_3", "l", "dl", "ml", "cl", "uL", "hl"]
+            },
+            {
+                key: "imperial_units",
+                list: ["ft_3", "in_3", "yd_3", "acre_ft", "uk_gal", "us_gal", "uk_oz", "us_oz"]
             }
         ]
     },
-    "weight": {
-        "name": "质量",
-        "main": "千克",
-        "unit": [
-            {
-                "name": "千克",
-                "zh": "千克",
-                "en": "kg",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
-            },
+    {
+        key: "weight",
+        main: "kg",
+        unit: [
             {
-                "name": "克",
-                "zh": "克",
-                "en": "g",
-                "calc": (x) => (x * 1) / 0.001,
-                "init": (x) => (x * 0.001)
+                key: "kg",
+                unit: "kg",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "毫克",
-                "zh": "毫克",
-                "en": "mg",
-                "calc": (x) => (x * 1) / 0.000001,
-                "init": (x) => (x * 0.000001)
+                key: "g",
+                unit: "g",
+                calc: (x) => (x * 1) / 0.001,
+                init: (x) => (x * 0.001)
             },
             {
-                "name": "微克",
-                "zh": "微克",
-                "en": "μg",
-                "calc": (x) => (x * 1) / 0.000000001,
-                "init": (x) => (x * 0.000000001)
+                key: "mg",
+                unit: "mg",
+                calc: (x) => (x * 1) / 0.000001,
+                init: (x) => (x * 0.000001)
             },
             {
-                "name": "吨",
-                "zh": "吨",
-                "en": "t",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "ug",
+                unit: "μg",
+                calc: (x) => (x * 1) / 0.000000001,
+                init: (x) => (x * 0.000000001)
             },
             {
-                "name": "公担",
-                "zh": "公担",
-                "en": "q",
-                "calc": (x) => (x * 1) / 100,
-                "init": (x) => (x * 100)
+                key: "t",
+                unit: "t",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "磅",
-                "zh": "磅",
-                "en": "lb",
-                "calc": (x) => (x * 1) / 0.45359237,
-                "init": (x) => (x * 0.45359237)
+                key: "q",
+                unit: "q",
+                calc: (x) => (x * 1) / 100,
+                init: (x) => (x * 100)
             },
             {
-                "name": "盎司",
-                "zh": "盎司",
-                "en": "oz",
-                "calc": (x) => (x * 1) / (0.45359237 / 16),
-                "init": (x) => (x * (0.45359237 / 16))
+                key: "ct",
+                unit: "ct",
+                calc: (x) => (x * 1) / 0.0002,
+                init: (x) => (x * 0.0002)
             },
+
             {
-                "name": "克拉",
-                "zh": "克拉",
-                "en": "ct",
-                "calc": (x) => (x * 1) / 0.0002,
-                "init": (x) => (x * 0.0002)
+                key: "lb",
+                unit: "lb",
+                calc: (x) => (x * 1) / 0.45359237,
+                init: (x) => (x * 0.45359237)
             },
             {
-                "name": "格令",
-                "zh": "格令",
-                "en": "gr",
-                "calc": (x) => (x * 1) / (0.45359237 / 7000),
-                "init": (x) => (x * (0.45359237 / 7000))
+                key: "oz",
+                unit: "oz",
+                calc: (x) => (x * 1) / (0.45359237 / 16),
+                init: (x) => (x * (0.45359237 / 16))
             },
             {
-                "name": "长吨",
-                "zh": "长吨",
-                "en": "lt",
-                "calc": (x) => (x * 1) / (0.45359237 * 2240),
-                "init": (x) => (x * (0.45359237 * 2240))
+                key: "gr",
+                unit: "gr",
+                calc: (x) => (x * 1) / (0.45359237 / 7000),
+                init: (x) => (x * (0.45359237 / 7000))
             },
             {
-                "name": "短吨",
-                "zh": "短吨",
-                "en": "st",
-                "calc": (x) => (x * 1) / (0.45359237 * 2000),
-                "init": (x) => (x * (0.45359237 * 2000))
+                key: "lt",
+                unit: "lt",
+                calc: (x) => (x * 1) / (0.45359237 * 2240),
+                init: (x) => (x * (0.45359237 * 2240))
             },
             {
-                "name": "英担",
-                "zh": "英担",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.45359237 * 112),
-                "init": (x) => (x * (0.45359237 * 112))
+                key: "st1",
+                unit: "st",
+                calc: (x) => (x * 1) / (0.45359237 * 2000),
+                init: (x) => (x * (0.45359237 * 2000))
             },
             {
-                "name": "美担",
-                "zh": "美担",
-                "en": "",
-                "calc": (x) => (x * 1) / (0.45359237 * 100),
-                "init": (x) => (x * (0.45359237 * 100))
+                key: "uk_cwt",
+                unit: "uk cwt",
+                calc: (x) => (x * 1) / (0.45359237 * 112),
+                init: (x) => (x * (0.45359237 * 112))
             },
             {
-                "name": "英石",
-                "zh": "英石",
-                "en": "st",
-                "calc": (x) => (x * 1) / (0.45359237 * 14),
-                "init": (x) => (x * (0.45359237 * 14))
+                key: "us_cwt",
+                unit: "us cwt",
+                calc: (x) => (x * 1) / (0.45359237 * 100),
+                init: (x) => (x * (0.45359237 * 100))
             },
             {
-                "name": "打兰",
-                "zh": "打兰",
-                "en": "dr",
-                "calc": (x) => (x * 1) / (0.45359237 / 256),
-                "init": (x) => (x * (0.45359237 / 256))
+                key: "st2",
+                unit: "st",
+                calc: (x) => (x * 1) / (0.45359237 * 14),
+                init: (x) => (x * (0.45359237 * 14))
             },
             {
-                "name": "担",
-                "zh": "担",
-                "en": "",
-                "calc": (x) => (x * 1) / 50,
-                "init": (x) => (x * 50)
+                key: "dr",
+                unit: "dr",
+                calc: (x) => (x * 1) / (0.45359237 / 256),
+                init: (x) => (x * (0.45359237 / 256))
             },
             {
-                "name": "斤",
-                "zh": "斤",
-                "en": "",
-                "calc": (x) => (x * 1) / 0.5,
-                "init": (x) => (x * 0.5)
+                key: "cn_dan",
+                unit: "dan",
+                calc: (x) => (x * 1) / 50,
+                init: (x) => (x * 50)
             },
             {
-                "name": "两",
-                "zh": "两",
-                "en": "",
-                "calc": (x) => (x * 1) / 0.05,
-                "init": (x) => (x * 0.05)
+                key: "cn_jin",
+                unit: "jin",
+                calc: (x) => (x * 1) / 0.5,
+                init: (x) => (x * 0.5)
             },
             {
-                "name": "钱",
-                "zh": "钱",
-                "en": "",
-                "calc": (x) => (x * 1) / 0.005,
-                "init": (x) => (x * 0.005)
+                key: "cn_liang",
+                unit: "liang",
+                calc: (x) => (x * 1) / 0.05,
+                init: (x) => (x * 0.05)
             },
             {
-                "name": "分",
-                "zh": "分",
-                "en": "point",
-                "calc": (x) => (x * 1) / 0.000002,
-                "init": (x) => (x * 0.000002)
+                key: "cn_qian",
+                unit: "qian",
+                calc: (x) => (x * 1) / 0.005,
+                init: (x) => (x * 0.005)
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "公制",
-                "list": [
-                    "千克",
-                    "克",
-                    "毫克",
-                    "微克",
-                    "吨",
-                    "公担",
-                    "克拉",
-                    "分"
-                ]
-            },
-            {
-                "name": "英制",
-                "list": [
-                    "磅",
-                    "盎司",
-                    "克拉",
-                    "格令",
-                    "长吨",
-                    "短吨",
-                    "英担",
-                    "美担",
-                    "英石",
-                    "打兰"
-                ]
-            },
-            {
-                "name": "市制",
-                "list": [
-                    "担",
-                    "斤",
-                    "两",
-                    "钱"
-                ]
+        special: [],
+        group: [
+            {
+                key: "metric_system",
+                list: ["kg", "g", "mg", "ug", "t", "q", "ct"]
+            },
+            {
+                key: "imperial_units",
+                list: ["lb", "oz", "gr", "lt", "st1", "uk_cwt", "us_cwt", "st2", "dr"]
+            },
+            {
+                key: "chinese_units",
+                list: ["cn_dan", "cn_jin", "cn_liang", "cn_qian"]
             }
         ]
     },
-    "temperature": {
-        "name": "温度",
-        "main": "开氏度",
-        "unit": [
+    {
+        key: "temperature",
+        main: "k",
+        unit: [
             {
-                "name": "摄氏度",
-                "zh": "摄氏度",
-                "en": "℃",
-                "calc": (x) => (x - 273.15),
-                "init": (x) => (x * 1) + 273.15
+                key: "c",
+                unit: "°C",
+                calc: (x) => (x - 273.15),
+                init: (x) => (x * 1) + 273.15
             },
             {
-                "name": "华氏度",
-                "zh": "华氏度",
-                "en": "℉",
-                "calc": (x) => 32 + ((x - 273.15) * 9 / 5),
-                "init": (x) => (5 * (x - 32) / 9) + 273.15
+                key: "f",
+                unit: "°F",
+                calc: (x) => 32 + ((x - 273.15) * 9 / 5),
+                init: (x) => (5 * (x - 32) / 9) + 273.15
             },
             {
-                "name": "开氏度",
-                "zh": "开氏度",
-                "en": "K",
-                "calc": (x) => (x - 273.15) + 273.15,
-                "init": (x) => (x - 273.15) + 273.15
+                key: "k",
+                unit: "K",
+                calc: (x) => (x - 273.15) + 273.15,
+                init: (x) => (x - 273.15) + 273.15
             },
             {
-                "name": "兰氏度",
-                "zh": "兰氏度",
-                "en": "°R",
-                "calc": (x) => ((x - 273.15) + 273.15) * 1.8,
-                "init": (x) => (x / 1.8 - 273.15) + 273.15
+                key: "r",
+                unit: "°R",
+                calc: (x) => ((x - 273.15) + 273.15) * 1.8,
+                init: (x) => (x / 1.8 - 273.15) + 273.15
             },
             {
-                "name": "列氏度",
-                "zh": "列氏度",
-                "en": "°Re",
-                "calc": (x) => (x - 273.15) / 1.25,
-                "init": (x) => (x * 1.25) + 273.15
+                key: "re",
+                unit: "°Re",
+                calc: (x) => (x - 273.15) / 1.25,
+                init: (x) => (x * 1.25) + 273.15
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "摄氏度",
-                    "华氏度",
-                    "开氏度",
-                    "兰氏度",
-                    "列氏度"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["c", "f", "k", "r", "re"]
             }
         ]
     },
-    "pressure": {
-        "name": "压力",
-        "main": "帕斯卡",
-        "unit": [
+    {
+        key: "pressure",
+        main: "pa",
+        unit: [
             {
-                "name": "帕斯卡",
-                "zh": "帕斯卡",
-                "en": "Pa",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "pa",
+                unit: "Pa",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "千帕",
-                "zh": "千帕",
-                "en": "kpa",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "kpa",
+                unit: "kpa",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "百帕",
-                "zh": "百帕",
-                "en": "hpa",
-                "calc": (x) => (x * 1) / 100,
-                "init": (x) => (x * 100)
+                key: "hpa",
+                unit: "hpa",
+                calc: (x) => (x * 1) / 100,
+                init: (x) => (x * 100)
             },
             {
-                "name": "标准大气压",
-                "zh": "标准大气压",
-                "en": "atm",
-                "calc": (x) => (x * 1) / 101325,
-                "init": (x) => (x * 101325)
+                key: "atm",
+                unit: "atm",
+                calc: (x) => (x * 1) / 101325,
+                init: (x) => (x * 101325)
             },
             {
-                "name": "毫米汞柱",
-                "zh": "毫米汞柱",
-                "en": "mmHg",
-                "calc": (x) => (x * 1) / (101325 / 760),
-                "init": (x) => (x * (101325 / 760))
+                key: "mmhg",
+                unit: "mmHg",
+                calc: (x) => (x * 1) / (101325 / 760),
+                init: (x) => (x * (101325 / 760))
             },
             {
-                "name": "英寸汞柱",
-                "zh": "英寸汞柱",
-                "en": "in Hg",
-                "calc": (x) => (x * 1) / (101325 / 760 * 25.4),
-                "init": (x) => (x * (101325 / 760 * 25.4))
+                key: "in_hg",
+                unit: "in Hg",
+                calc: (x) => (x * 1) / (101325 / 760 * 25.4),
+                init: (x) => (x * (101325 / 760 * 25.4))
             },
             {
-                "name": "巴",
-                "zh": "巴",
-                "en": "bar",
-                "calc": (x) => (x * 1) / 100000,
-                "init": (x) => (x * 100000)
+                key: "bar",
+                unit: "bar",
+                calc: (x) => (x * 1) / 100000,
+                init: (x) => (x * 100000)
             },
             {
-                "name": "毫巴",
-                "zh": "毫巴",
-                "en": "mbar",
-                "calc": (x) => (x * 1) / 100,
-                "init": (x) => (x * 100)
+                key: "mbar",
+                unit: "mbar",
+                calc: (x) => (x * 1) / 100,
+                init: (x) => (x * 100)
             },
             {
-                "name": "磅力/平方英尺",
-                "zh": "磅力/平方英尺",
-                "en": "psf",
-                "calc": (x) => (x * 1) / (6894.757 / 144),
-                "init": (x) => (x * (6894.757 / 144))
+                key: "psf",
+                unit: "psf",
+                calc: (x) => (x * 1) / (6894.757 / 144),
+                init: (x) => (x * (6894.757 / 144))
             },
             {
-                "name": "磅力/平方英寸",
-                "zh": "磅力/平方英寸",
-                "en": "psi",
-                "calc": (x) => (x * 1) / 6894.757,
-                "init": (x) => (x * 6894.757)
+                key: "psi",
+                unit: "psi",
+                calc: (x) => (x * 1) / 6894.757,
+                init: (x) => (x * 6894.757)
             },
             {
-                "name": "毫米水柱",
-                "zh": "毫米水柱",
-                "en": "",
-                "calc": (x) => (x * 1) / (1 / 0.101972),
-                "init": (x) => (x * (1 / 0.101972))
+                key: "mmwg",
+                unit: "mmWG",
+                calc: (x) => (x * 1) / (1 / 0.101972),
+                init: (x) => (x * (1 / 0.101972))
             },
             {
-                "name": "公斤力/平方厘米",
-                "zh": "公斤力/平方厘米",
-                "en": "kgf/cm²",
-                "calc": (x) => (x * 1) / 98066.5,
-                "init": (x) => (x * 98066.5)
+                key: "kgf_cm_2",
+                unit: "kgf/cm²",
+                calc: (x) => (x * 1) / 98066.5,
+                init: (x) => (x * 98066.5)
             },
             {
-                "name": "公斤力/平方米",
-                "zh": "公斤力/平方米",
-                "en": "kgf/㎡",
-                "calc": (x) => (x * 1) / 9.80665,
-                "init": (x) => (x * 9.80665)
+                key: "kgf_m_2",
+                unit: "kgf/m²",
+                calc: (x) => (x * 1) / 9.80665,
+                init: (x) => (x * 9.80665)
             },
             {
-                "name": "兆帕",
-                "zh": "兆帕",
-                "en": "MPa",
-                "calc": (x) => (x * 1) / 1000000,
-                "init": (x) => (x * 1000000)
+                key: "mpa",
+                unit: "MPa",
+                calc: (x) => (x * 1) / 1000000,
+                init: (x) => (x * 1000000)
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "帕斯卡",
-                    "兆帕",
-                    "千帕",
-                    "百帕",
-                    "标准大气压",
-                    "毫米汞柱",
-                    "英寸汞柱",
-                    "巴",
-                    "毫巴",
-                    "磅力/平方英尺",
-                    "磅力/平方英寸",
-                    "毫米水柱",
-                    "公斤力/平方厘米",
-                    "公斤力/平方米"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["pa", "kpa", "hpa", "atm", "mmhg", "in_hg", "bar", "mbar", "psf", "psi", "mmwg", "kgf_cm_2", "kgf_m_2", "mpa"]
             }
         ]
     },
-    "power": {
-        "name": "功率",
-        "main": "瓦",
-        "unit": [
+    {
+        key: "power",
+        main: "w",
+        unit: [
             {
-                "name": "瓦",
-                "zh": "瓦",
-                "en": "W",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "w",
+                unit: "W",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "千瓦",
-                "zh": "千瓦",
-                "en": "kW",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "kw",
+                unit: "kW",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "英制马力",
-                "zh": "英制马力",
-                "en": "hp",
-                "calc": (x) => (x * 1) / 745.699872,
-                "init": (x) => (x * 745.699872)
+                key: "hp",
+                unit: "hp",
+                calc: (x) => (x * 1) / 745.699872,
+                init: (x) => (x * 745.699872)
             },
             {
-                "name": "米制马力",
-                "zh": "米制马力",
-                "en": "ps",
-                "calc": (x) => (x * 1) / (9.80665 * 75),
-                "init": (x) => (x * (9.80665 * 75))
+                key: "ps",
+                unit: "ps",
+                calc: (x) => (x * 1) / (9.80665 * 75),
+                init: (x) => (x * (9.80665 * 75))
             },
             {
-                "name": "公斤·米/秒",
-                "zh": "公斤·米/秒",
-                "en": "kg·m/s",
-                "calc": (x) => (x * 1) / 9.80665,
-                "init": (x) => (x * 9.80665)
+                key: "kg_m_s",
+                unit: "kg·m/s",
+                calc: (x) => (x * 1) / 9.80665,
+                init: (x) => (x * 9.80665)
             },
             {
-                "name": "千卡/秒",
-                "zh": "千卡/秒",
-                "en": "kcal/s",
-                "calc": (x) => (x * 1) / 4184.1004,
-                "init": (x) => (x * 4184.1004)
+                key: "kcal_s",
+                unit: "kcal/s",
+                calc: (x) => (x * 1) / 4184.1004,
+                init: (x) => (x * 4184.1004)
             },
             {
-                "name": "英热单位/秒",
-                "zh": "英热单位/秒",
-                "en": "Btu/s",
-                "calc": (x) => (x * 1) / 1055.05585,
-                "init": (x) => (x * 1055.05585)
+                key: "btu_s",
+                unit: "Btu/s",
+                calc: (x) => (x * 1) / 1055.05585,
+                init: (x) => (x * 1055.05585)
             },
             {
-                "name": "英尺·磅/秒",
-                "zh": "英尺·磅/秒",
-                "en": "ft·lb/s",
-                "calc": (x) => (x * 1) / (745.699872 / 550),
-                "init": (x) => (x * (745.699872 / 550))
+                key: "ft_lb_s",
+                unit: "ft·lb/s",
+                calc: (x) => (x * 1) / (745.699872 / 550),
+                init: (x) => (x * (745.699872 / 550))
             },
             {
-                "name": "焦耳/秒",
-                "zh": "焦耳/秒",
-                "en": "J/s",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "j_s",
+                unit: "J/s",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "牛顿·米/秒",
-                "zh": "牛顿·米/秒",
-                "en": "N·m/s",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "n_m_s",
+                unit: "N·m/s",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "瓦",
-                    "千瓦",
-                    "英制马力",
-                    "米制马力",
-                    "公斤·米/秒",
-                    "千卡/秒",
-                    "英热单位/秒",
-                    "英尺·磅/秒",
-                    "焦耳/秒",
-                    "牛顿·米/秒"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["w", "kw", "hp", "ps", "kg_m_s", "kcal_s", "btu_s", "ft_lb_s", "j_s", "n_m_s"]
             }
         ]
     },
-    "work": {
-        "name": "功/能/热",
-        "main": "焦耳",
-        "unit": [
+    {
+        key: "work",
+        main: "j",
+        unit: [
             {
-                "name": "焦耳",
-                "zh": "焦耳",
-                "en": "J",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "j",
+                unit: "J",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "公斤·米",
-                "zh": "公斤·米",
-                "en": "kg·m",
-                "calc": (x) => (x * 1) / 9.80392157,
-                "init": (x) => (x * 9.80392157)
+                key: "kg_m",
+                unit: "kg·m",
+                calc: (x) => (x * 1) / 9.80392157,
+                init: (x) => (x * 9.80392157)
             },
             {
-                "name": "米制马力·时",
-                "zh": "米制马力·时",
-                "en": "ps·h",
-                "calc": (x) => (x * 1) / (9.80665 * 75 * 3600),
-                "init": (x) => (x * (9.80665 * 75 * 3600))
+                key: "ps_h",
+                unit: "ps·h",
+                calc: (x) => (x * 1) / (9.80665 * 75 * 3600),
+                init: (x) => (x * (9.80665 * 75 * 3600))
             },
             {
-                "name": "英制马力·时",
-                "zh": "英制马力·时",
-                "en": "hp·h",
-                "calc": (x) => (x * 1) / (745.699872 * 3600),
-                "init": (x) => (x * (745.699872 * 3600))
+                key: "hp_h",
+                unit: "hp·h",
+                calc: (x) => (x * 1) / (745.699872 * 3600),
+                init: (x) => (x * (745.699872 * 3600))
             },
             {
-                "name": "千瓦·时",
-                "zh": "千瓦·时",
-                "en": "kW·h",
-                "calc": (x) => (x * 1) / 3600000,
-                "init": (x) => (x * 3600000)
+                key: "kw_h",
+                unit: "kW·h",
+                calc: (x) => (x * 1) / 3600000,
+                init: (x) => (x * 3600000)
             },
             {
-                "name": "度",
-                "zh": "度",
-                "en": "kW·h",
-                "calc": (x) => (x * 1) / 3600000,
-                "init": (x) => (x * 3600000)
+                key: "kw_h_",
+                unit: "kW·h",
+                calc: (x) => (x * 1) / 3600000,
+                init: (x) => (x * 3600000)
             },
             {
-                "name": "卡",
-                "zh": "卡",
-                "en": "cal",
-                "calc": (x) => (x * 1) / 4.185851820846,
-                "init": (x) => (x * 4.185851820846)
+                key: "cal",
+                unit: "cal",
+                calc: (x) => (x * 1) / 4.185851820846,
+                init: (x) => (x * 4.185851820846)
             },
             {
-                "name": "千卡",
-                "zh": "千卡",
-                "en": "kcal",
-                "calc": (x) => (x * 1) / 4185.851820846,
-                "init": (x) => (x * 4185.851820846)
+                key: "kcal",
+                unit: "kcal",
+                calc: (x) => (x * 1) / 4185.851820846,
+                init: (x) => (x * 4185.851820846)
             },
             {
-                "name": "英热单位",
-                "zh": "英热单位",
-                "en": "btu",
-                "calc": (x) => (x * 1) / 1055.05585262,
-                "init": (x) => (x * 1055.05585262)
+                key: "btu",
+                unit: "btu",
+                calc: (x) => (x * 1) / 1055.05585262,
+                init: (x) => (x * 1055.05585262)
             },
             {
-                "name": "英尺·磅",
-                "zh": "英尺·磅",
-                "en": "ft·lb",
-                "calc": (x) => (x * 1) / 1.3557483731,
-                "init": (x) => (x * 1.3557483731)
+                key: "ft_lb",
+                unit: "ft·lb",
+                calc: (x) => (x * 1) / 1.3557483731,
+                init: (x) => (x * 1.3557483731)
             },
             {
-                "name": "千焦",
-                "zh": "千焦",
-                "en": "kJ",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "kj",
+                unit: "kJ",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "焦耳(J)",
-                "list": [
-                    "焦耳",
-                    "公斤·米",
-                    "米制马力·时",
-                    "英制马力·时",
-                    "千瓦·时",
-                    "度",
-                    "卡",
-                    "千卡",
-                    "英热单位",
-                    "英尺·磅",
-                    "千焦"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["j", "kg_m", "ps_h", "hp_h", "kw_h","kw_h_", "cal", "kcal", "btu", "ft_lb", "kj"]
             }
         ]
     },
-    "density": {
-        "name": "密度",
-        "main": "千克/立方米",
-        "unit": [
+    {
+        key: "density",
+        main: "kg_m_3",
+        unit: [
             {
-                "name": "千克/立方厘米",
-                "zh": "千克/立方厘米",
-                "en": "kg/cm³",
-                "calc": (x) => (x * 1) / (Math.pow(10, 6)),
-                "init": (x) => (x * 1000000)
+                key: "kg_cm_3",
+                unit: "kg/cm³",
+                calc: (x) => (x * 1) / (Math.pow(10, 6)),
+                init: (x) => (x * 1000000)
             },
             {
-                "name": "千克/立方分米",
-                "zh": "千克/立方分米",
-                "en": "kg/dm³",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "kg_dm_3",
+                unit: "kg/dm³",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "千克/立方米",
-                "zh": "千克/立方米",
-                "en": "kg/m³",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "kg_m_3",
+                unit: "kg/m³",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "克/立方厘米",
-                "zh": "克/立方厘米",
-                "en": "g/cm³",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "g_cm_3",
+                unit: "g/cm³",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "克/立方分米",
-                "zh": "克/立方分米",
-                "en": "g/dm³",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "g_dm_3",
+                unit: "g/dm³",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "克/立方米",
-                "zh": "克/立方米",
-                "en": "g/m³",
-                "calc": (x) => (x * 1000),
-                "init": (x) => (x * 1) / 1000
+                key: "g_m_3",
+                unit: "g/m³",
+                calc: (x) => (x * 1000),
+                init: (x) => (x * 1) / 1000
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "千克/立方厘米",
-                    "千克/立方分米",
-                    "千克/立方米",
-                    "克/立方厘米",
-                    "克/立方分米",
-                    "克/立方米"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["kg_cm_3", "kg_dm_3", "kg_m_3", "g_cm_3", "g_dm_3", "g_m_3"]
             }
         ]
     },
-    "strength": {
-        "name": "力",
-        "main": "牛",
-        "unit": [
+    {
+        key: "strength",
+        main: "n",
+        unit: [
             {
-                "name": "牛",
-                "zh": "牛",
-                "en": "N",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "n",
+                unit: "N",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "千牛",
-                "zh": "千牛",
-                "en": "kN",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "kn",
+                unit: "kN",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "千克力",
-                "zh": "千克力",
-                "en": "kgf",
-                "calc": (x) => (x * 101.971621) / 1000,
-                "init": (x) => (x * 9.806650)
+                key: "kgf",
+                unit: "kgf",
+                calc: (x) => (x * 101.971621) / 1000,
+                init: (x) => (x * 9.806650)
             },
             {
-                "name": "克力",
-                "zh": "克力",
-                "en": "gf",
-                "calc": (x) => (x * 101.971621),
-                "init": (x) => (x * 9.806650) / 1000
+                key: "gf",
+                unit: "gf",
+                calc: (x) => (x * 101.971621),
+                init: (x) => (x * 9.806650) / 1000
             },
             {
-                "name": "公吨力",
-                "zh": "公吨力",
-                "en": "tf",
-                "calc": (x) => (x * 101.971621) / (Math.pow(10, 6)),
-                "init": (x) => (x * 9806.650000)
+                key: "tf",
+                unit: "tf",
+                calc: (x) => (x * 101.971621) / (Math.pow(10, 6)),
+                init: (x) => (x * 9806.650000)
             },
             {
-                "name": "磅力",
-                "zh": "磅力",
-                "en": "lbf",
-                "calc": (x) => (x * 224.808943) / 1000,
-                "init": (x) => (x * 4.448222)
+                key: "lbf",
+                unit: "lbf",
+                calc: (x) => (x * 224.808943) / 1000,
+                init: (x) => (x * 4.448222)
             },
             {
-                "name": "千磅力",
-                "zh": "千磅力",
-                "en": "kip",
-                "calc": (x) => (x * 224.808943) / (Math.pow(10, 6)),
-                "init": (x) => (x * 4448.221615)
+                key: "kip",
+                unit: "kip",
+                calc: (x) => (x * 224.808943) / (Math.pow(10, 6)),
+                init: (x) => (x * 4448.221615)
             },
             {
-                "name": "达因",
-                "zh": "达因",
-                "en": "dyn",
-                "calc": (x) => (x * 100000),
-                "init": (x) => (x * 1) / 100000
+                key: "dyn",
+                unit: "dyn",
+                calc: (x) => (x * 100000),
+                init: (x) => (x * 1) / 100000
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "牛",
-                    "千牛",
-                    "千克力",
-                    "克力",
-                    "公吨力",
-                    "磅力",
-                    "千磅力",
-                    "达因"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["n", "kn", "kgf", "gf", "tf", "lbf", "kip", "dyn"]
             }
         ]
     },
-    "time": {
-        "name": "时间",
-        "main": "秒",
-        "unit": [
+    {
+        key: "time",
+        main: "s",
+        unit: [
             {
-                "name": "年",
-                "zh": "年",
-                "en": "yr",
-                "calc": (x) => (x * 31.709792) / (Math.pow(10, 9)),
-                "init": (x) => (x * 31536000)
+                key: "yr",
+                unit: "yr",
+                calc: (x) => (x * 31.709792) / (Math.pow(10, 9)),
+                init: (x) => (x * 31536000)
             },
             {
-                "name": "周",
-                "zh": "周",
-                "en": "week",
-                "calc": (x) => (x * 1.653439) / (Math.pow(10, 6)),
-                "init": (x) => (x * 604800)
+                key: "week",
+                unit: "week",
+                calc: (x) => (x * 1.653439) / (Math.pow(10, 6)),
+                init: (x) => (x * 604800)
             },
             {
-                "name": "天",
-                "zh": "天",
-                "en": "d",
-                "calc": (x) => (x * 11.574074) / (Math.pow(10, 6)),
-                "init": (x) => (x * 86400)
+                key: "d",
+                unit: "d",
+                calc: (x) => (x * 11.574074) / (Math.pow(10, 6)),
+                init: (x) => (x * 86400)
             },
             {
-                "name": "时",
-                "zh": "时",
-                "en": "h",
-                "calc": (x) => (x * 277.777778) / (Math.pow(10, 6)),
-                "init": (x) => (x * 3600)
+                key: "h",
+                unit: "h",
+                calc: (x) => (x * 277.777778) / (Math.pow(10, 6)),
+                init: (x) => (x * 3600)
             },
             {
-                "name": "分",
-                "zh": "分",
-                "en": "min",
-                "calc": (x) => (x * 16.6666667) / 1000,
-                "init": (x) => (x * 60)
+                key: "min",
+                unit: "min",
+                calc: (x) => (x * 16.6666667) / 1000,
+                init: (x) => (x * 60)
             },
             {
-                "name": "秒",
-                "zh": "秒",
-                "en": "s",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "s",
+                unit: "s",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "毫秒",
-                "zh": "毫秒",
-                "en": "ms",
-                "calc": (x) => (x * 1000),
-                "init": (x) => (x * 1) / 1000
+                key: "ms",
+                unit: "ms",
+                calc: (x) => (x * 1000),
+                init: (x) => (x * 1) / 1000
             },
             {
-                "name": "微秒",
-                "zh": "微秒",
-                "en": "μs",
-                "calc": (x) => (x * 1000000),
-                "init": (x) => (x * 1) / 1000000
+                key: "us",
+                unit: "μs",
+                calc: (x) => (x * 1000000),
+                init: (x) => (x * 1) / 1000000
             },
             {
-                "name": "纳秒",
-                "zh": "纳秒",
-                "en": "ns",
-                "calc": (x) => (x * 1000000000),
-                "init": (x) => (x * 1) / 1000000000
+                key: "ns",
+                unit: "ns",
+                calc: (x) => (x * 1000000000),
+                init: (x) => (x * 1) / 1000000000
             }
         ],
-        "special": [
+        special: [
             {
-                "from": "时",
-                "to": "分",
-                "func": (x) => (x * 60)
+                from: "h",
+                to: "min",
+                func: (x) => (x * 60)
             }
         ],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "年",
-                    "周",
-                    "天",
-                    "时",
-                    "分",
-                    "秒",
-                    "毫秒",
-                    "微秒",
-                    "纳秒"
-                ]
+        group: [
+            {
+                key: "",
+                list: ["yr", "week", "d", "h", "min", "s", "ms", "us", "ns"]
             }
         ]
     },
-    "speed": {
-        "name": "速度",
-        "main": "米/秒",
-        "unit": [
+    {
+        key: "speed",
+        main: "m_s",
+        unit: [
             {
-                "name": "米/秒",
-                "zh": "米/秒",
-                "en": "m/s",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "m_s",
+                unit: "m/s",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "千米/秒",
-                "zh": "千米/秒",
-                "en": "km/s",
-                "calc": (x) => (x * 1) / 1000,
-                "init": (x) => (x * 1000)
+                key: "km_s",
+                unit: "km/s",
+                calc: (x) => (x * 1) / 1000,
+                init: (x) => (x * 1000)
             },
             {
-                "name": "千米/时",
-                "zh": "千米/时",
-                "en": "km/h",
-                "calc": (x) => (x * 3.600000),
-                "init": (x) => (x * 277.777778) / 1000
+                key: "km_h",
+                unit: "km/h",
+                calc: (x) => (x * 3.600000),
+                init: (x) => (x * 277.777778) / 1000
             },
             {
-                "name": "光速",
-                "zh": "光速",
-                "en": "c",
-                "calc": (x) => (x * 3.335641) / (Math.pow(10, 9)),
-                "init": (x) => (x * 299792458)
+                key: "c",
+                unit: "c",
+                calc: (x) => (x * 3.335641) / (Math.pow(10, 9)),
+                init: (x) => (x * 299792458)
             },
             {
-                "name": "马赫",
-                "zh": "马赫",
-                "en": "mach",
-                "calc": (x) => (x * 2.938584) / 1000,
-                "init": (x) => (x * 340.300000)
+                key: "mach",
+                unit: "mach",
+                calc: (x) => (x * 2.938584) / 1000,
+                init: (x) => (x * 340.300000)
             },
             {
-                "name": "英里/时",
-                "zh": "英里/时",
-                "en": "mile/h",
-                "calc": (x) => (x * 2.236936),
-                "init": (x) => (x * 447.040000) / 1000
+                key: "mile_h",
+                unit: "mile/h",
+                calc: (x) => (x * 2.236936),
+                init: (x) => (x * 447.040000) / 1000
             },
             {
-                "name": "英寸/秒",
-                "zh": "英寸/秒",
-                "en": "in/s",
-                "calc": (x) => (x * 39.370079),
-                "init": (x) => (x * 25.400000) / 1000
+                key: "in_s",
+                unit: "in/s",
+                calc: (x) => (x * 39.370079),
+                init: (x) => (x * 25.400000) / 1000
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "米/秒",
-                    "千米/秒",
-                    "千米/时",
-                    "光速",
-                    "马赫",
-                    "英里/时",
-                    "英寸/秒"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["m_s", "km_s", "km_h", "c", "mach", "mile_h", "in_s"]
             }
         ]
     },
-    "byte": {
-        "name": "数据存储",
-        "main": "字节",
-        "unit": [
+    {
+        key: "byte",
+        main: "b",
+        unit: [
             {
-                "name": "比特",
-                "zh": "比特",
-                "en": "bit",
-                "calc": (x) => (x * 8),
-                "init": (x) => (x * 1) / 8
+                key: "bit",
+                unit: "bit",
+                calc: (x) => (x * 8),
+                init: (x) => (x * 1) / 8
             },
             {
-                "name": "字节",
-                "zh": "字节",
-                "en": "b",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "b",
+                unit: "b",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "千字节",
-                "zh": "千字节",
-                "en": "kb",
-                "calc": (x) => (x * 1) / (Math.pow(2, 10)),
-                "init": (x) => (x * 1024)
+                key: "kb",
+                unit: "kb",
+                calc: (x) => (x * 1) / (Math.pow(2, 10)),
+                init: (x) => (x * 1024)
             },
             {
-                "name": "兆字节",
-                "zh": "兆字节",
-                "en": "mb",
-                "calc": (x) => (x * 1) / (Math.pow(2, 20)),
-                "init": (x) => (x * Math.pow(2, 20))
+                key: "mb",
+                unit: "mb",
+                calc: (x) => (x * 1) / (Math.pow(2, 20)),
+                init: (x) => (x * Math.pow(2, 20))
             },
             {
-                "name": "千兆字节",
-                "zh": "千兆字节",
-                "en": "gb",
-                "calc": (x) => (x * 1) / (Math.pow(2, 30)),
-                "init": (x) => (x * Math.pow(2, 30))
+                key: "gb",
+                unit: "gb",
+                calc: (x) => (x * 1) / (Math.pow(2, 30)),
+                init: (x) => (x * Math.pow(2, 30))
             },
             {
-                "name": "太字节",
-                "zh": "太字节",
-                "en": "tb",
-                "calc": (x) => (x * 1) / (Math.pow(2, 40)),
-                "init": (x) => (x * Math.pow(2, 40))
+                key: "tb",
+                unit: "tb",
+                calc: (x) => (x * 1) / (Math.pow(2, 40)),
+                init: (x) => (x * Math.pow(2, 40))
             },
             {
-                "name": "拍字节",
-                "zh": "拍字节",
-                "en": "pb",
-                "calc": (x) => (x * 1) / (Math.pow(2, 50)),
-                "init": (x) => (x * Math.pow(2, 50))
+                key: "pb",
+                unit: "pb",
+                calc: (x) => (x * 1) / (Math.pow(2, 50)),
+                init: (x) => (x * Math.pow(2, 50))
             },
             {
-                "name": "艾字节",
-                "zh": "艾字节",
-                "en": "eb",
-                "calc": (x) => (x * 1) / (Math.pow(2, 60)),
-                "init": (x) => (x * Math.pow(2, 60))
+                key: "eb",
+                unit: "eb",
+                calc: (x) => (x * 1) / (Math.pow(2, 60)),
+                init: (x) => (x * Math.pow(2, 60))
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "",
-                "list": [
-                    "比特",
-                    "字节",
-                    "千字节",
-                    "兆字节",
-                    "千兆字节",
-                    "太字节",
-                    "拍字节",
-                    "艾字节"
-                ]
+        special: [],
+        group: [
+            {
+                key: "",
+                list: ["bit", "b", "kb", "mb", "gb", "tb", "pb", "eb"]
             }
         ]
     },
-    "angle": {
-        "name": "角度",
-        "main": "度",
-        "unit": [
+    {
+        key: "angle",
+        main: "degree",
+        unit: [
             {
-                "name": "圆周",
-                "zh": "圆周",
-                "en": "",
-                "calc": (x) => (x * 2.777778) / 1000,
-                "init": (x) => (x * 360)
+                key: "circle",
+                unit: "circle",
+                calc: (x) => (x * 2.777778) / 1000,
+                init: (x) => (x * 360)
             },
             {
-                "name": "直角",
-                "zh": "直角",
-                "en": "",
-                "calc": (x) => (x * 11.111111) / 1000,
-                "init": (x) => (x * 90)
+                key: "angle",
+                unit: "angle",
+                calc: (x) => (x * 11.111111) / 1000,
+                init: (x) => (x * 90)
             },
             {
-                "name": "百分度",
-                "zh": "百分度",
-                "en": "gon",
-                "calc": (x) => (x * 1.111111),
-                "init": (x) => (x * 900) / 1000
+                key: "gon",
+                unit: "gon",
+                calc: (x) => (x * 1.111111),
+                init: (x) => (x * 900) / 1000
             },
             {
-                "name": "度",
-                "zh": "度",
-                "en": "°",
-                "calc": (x) => (x * 1),
-                "init": (x) => (x * 1)
+                key: "degree",
+                unit: "°",
+                calc: (x) => (x * 1),
+                init: (x) => (x * 1)
             },
             {
-                "name": "分",
-                "zh": "分",
-                "en": " ′",
-                "calc": (x) => (x * 60),
-                "init": (x) => (x * 16.6666667) / 1000
+                key: "min",
+                unit: " ′",
+                calc: (x) => (x * 60),
+                init: (x) => (x * 16.6666667) / 1000
             },
             {
-                "name": "秒",
-                "zh": "秒",
-                "en": "'",
-                "calc": (x) => (x * 3600),
-                "init": (x) => (x * 0.2777778) / 1000
+                key: "s",
+                unit: "'",
+                calc: (x) => (x * 3600),
+                init: (x) => (x * 0.2777778) / 1000
             },
             {
-                "name": "弧度",
-                "zh": "弧度",
-                "en": "rad",
-                "calc": (x) => (x * 17.453293) / 1000,
-                "init": (x) => (x * 57.295780)
+                key: "rad",
+                unit: "rad",
+                calc: (x) => (x * 17.453293) / 1000,
+                init: (x) => (x * 57.295780)
             },
             {
-                "name": "毫弧度",
-                "zh": "毫弧度",
-                "en": "mrad",
-                "calc": (x) => (x * 17.453293),
-                "init": (x) => (x * 57.295780) / 1000
+                key: "mrad",
+                unit: "mrad",
+                calc: (x) => (x * 17.453293),
+                init: (x) => (x * 57.295780) / 1000
             }
         ],
-        "special": [],
-        "group": [
-            {
-                "name": "角度制",
-                "list": [
-                    "圆周",
-                    "直角",
-                    "百分度",
-                    "度",
-                    "分",
-                    "秒"
-                ]
-            },
-            {
-                "name": "弧度制",
-                "list": [
-                    "弧度",
-                    "毫弧度"
-                ]
+        special: [],
+        group: [
+            {
+                key: "angle_units",
+                list: ["circle", "angle", "gon", "degree", "min", "s"]
+            },
+            {
+                key: "radian_units",
+                list: ["rad", "mrad"]
             }
         ]
-    },
-}
+    }
+].map((category) => { // 添加语言包
+    category['name'] = __('unit_'+category['key'])
+    category.unit = category.unit.map((unit) => {
+        unit['name'] = __(`unit_${category['key']}_${unit['key']}`)
+        return unit
+    })
+    category.group = category.group.map((item) => {
+        item['name'] = item['key'] ? __('unit_'+item['key']) : "";
+        return item;
+    })
+    return category;
+})
 
-/*
-* 计算
-* @uType       String,  not null, 单位类型(如length, time)
-* @num         Number,  not null, 输入值
-* @uFrom       String,  not null, 原单位
-* @uTo         String,  not null, 目标单位
-* @keepOrigin  Boolean, null，    保持原始结果(不进行格式化)，默认false
-*
-* return       Object, 计算结果
-*/
-const calculate = function (type, num, from, to, keepOrigin = false) {
+const calculate = function (type, num, from, to) {
     let fromUnit = getUnit(type, from)
     if (from === to) {
-        return {
-            num: keepOrigin ? num : format(num),
-            unitFirst: fromUnit.zh,
-            unitSecond: fromUnit.en
-        }
+        return  format(num)
     }
     let toUnit = getUnit(type, to)
 
@@ -1613,33 +1246,34 @@ const calculate = function (type, num, from, to, keepOrigin = false) {
     } else {
         num = toUnit.calc(fromUnit.init(num))
     }
-    return {
-        num: keepOrigin ? num : format(num),
-        unitFirst: toUnit.zh,
-        unitSecond: toUnit.en
-    }
+    return format(num)
 }
 
-
 const getCategory = (type) => {
-    return CONFIG[type]
+    for (let category of CONFIG) {
+        if (type === category.key) {
+            return category;
+        }
+    }
+    throw new Error(`${type} category not found`)
 }
 
-const getUnit = (type, name) => {
+const getUnit = (type, unitKey) => {
     let category = getCategory(type)
-    for (let i = 0; i < category.unit.length; i++) {
-        if (name === category.unit[i].name) {
-            return category.unit[i];
+    for (let unit of category.unit) {
+        if (unitKey === unit.key) {
+            return unit;
         }
     }
+    throw new Error(`${type} - ${unitKey} unit not found`)
 }
 
 const getSpecial = (type, from, to) => {
     let category = getCategory(type)
     if (category.special.length > 0) {
-        for (let i = 0; i < category.special.length; i++) {
-            if (from === category.special[i].from && to === category.special[i].to) {
-                return category.special[i].func;
+        for(let special of category.special){
+            if(special['from'] === from && special['to'] === to){
+                return special['func']
             }
         }
     }
@@ -1658,7 +1292,7 @@ const format = function (num) {
     if (strNum.indexOf('.') > -1) {
         let match = strNum.match(/\.\d+e[+-](\d+)$/)
         if (match && match[1]) {
-            isFloat = match[1] * 1 < (MAX_NUM - 1) ? true : false
+            isFloat = match[1] * 1 < (MAX_NUM - 1)
         } else {
             isFloat = true
         }
@@ -1715,37 +1349,8 @@ const exponential = function (num, n) {
 }
 
 export default {
-    //返回某一类的所有配置项
-    getData: function (type) {
-        return _.cloneDeep(getCategory(type).group).map((item) => {
-            item.list = item.list.map((name) => {
-                let unit = getUnit(type, name)
-                return {
-                    name,
-                    unit: unit.zh + (unit.en ? ` (${unit.en})` : '')
-                }
-            })
-            return item;
-        })
-    },
-    getMain(type) {
-        return getCategory(type).main
-    },
-    //计算，返回格式化后的结果
-    calc: function (type, x, from, to) {
-        return calculate(type, x, from, to)
-    },
-    //计算，返回原始结果
-    calcOrigin: function (type, x, from, to) {
-        return calculate(type, x, from, to, true)
-    },
-    //格式化
-    format: function (num) {
-        return format(num)
-    },
-    list: () => {
-        return Object.keys(CONFIG).map((key) => {
-            return {key, name: CONFIG[key].name}
-        })
-    }
+    CONFIG,
+    getCategory,
+    getUnit,
+    calculate
 }
diff --git a/src/views/tool/pinyin.vue b/src/views/tool/pinyin.vue
index 6e247b4ab457d043d84cde83193e7a64dde05a6c..bca5bf0437c01107f1c693bd08a03e3ac8002fc0 100644
--- a/src/views/tool/pinyin.vue
+++ b/src/views/tool/pinyin.vue
@@ -1,13 +1,13 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize :append="['.page-option-block']" ignore @resize="resize">
+        <autoHeightTextarea :height="inputHeight" v-model="current.input" :placeholder="$t('pinyin_input')" />
+        <option-block class="page-option-block">
             <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle('normal')">无声调</Button>
-                    <Button type="primary" @click="handle('tone')">有声调</Button>
-                    <Button type="primary" @click="handle('abbr')">首字母</Button>
-                </ButtonGroup>
+                <RadioGroup v-model="current.operation" type="button" button-style="solid">
+                    <Radio label="normal">{{ $t('pinyin_normal') }}</Radio>
+                    <Radio label="tone">{{ $t('pinyin_tone') }}</Radio>
+                    <Radio label="abbr">{{ $t('pinyin_abbr') }}</Radio>
+                </RadioGroup>
             </FormItem>
             <FormItem>
                 <Select v-model="current.delimiter" style="width:200px">
@@ -15,65 +15,80 @@
                 </Select>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :height="outputHeight" :value="output" :placeholder="$t('pinyin_output')" />
+    </heightResize>
 </template>
 <script>
-    import "./pinyin/dict"
-    import "ipinyinjs"
+import "./pinyin/dict"
+import "ipinyinjs"
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 
-    function py (type, str, delimiter) {
-        let pinyin = {
-            abbr: function (str, delimiter) {
-                return window.pinyinUtil.getFirstLetter(str).split('').join(delimiter);
-            },
-            tone: function (str, delimiter) {
-                return window.pinyinUtil.getPinyin(str, delimiter);
-            },
-            normal: function (str, delimiter) {
-                return window.pinyinUtil.getPinyin(str, delimiter, false);
-            }
-        };
-        str = str.split("\n");
-        for (let i = 0; i < str.length; i++) {
-            str[i] = pinyin[type](str[i], delimiter);
-        }
-        return str.join("\n");
-    }
-    export default {
-        created() {
-            this.current = Object.assign({},this.current,this.$getToolData("input"))
-        },
-        methods: {
-            handle(v) {
-                if (this.current.input) {
-                    this.current.output = py(
-                        v,
-                        this.current.input,
-                        this.current.delimiter === "null" ? "" : (this.current.delimiter === "blank" ? " " : this.current.delimiter)
-                    );
-                    this.current.operation = v;
-                    this.$clipboardCopy(this.current.output);
-                    this.$saveToolData(this.current);
-                }
-            }
+function py(type, str, delimiter) {
+    let pinyin = {
+        abbr: function (str, delimiter) {
+            return window.pinyinUtil.getFirstLetter(str).split('').join(delimiter);
         },
-        data() {
-            return {
-                current:{
-                    input: "",
-                    output: "",
-                    delimiter:"null",
-                    operation:""
-                },
-                delimiter:[
-                    {"n":"无分隔符","v":"null"},
-                    {"n":"空格分隔","v":"blank"},
-                    {"n":"'-'中划线分隔","v":"-"},
-                    {"n":"'_'下划线分隔","v":"_"},
-                    {"n":"'.'点分隔","v":"."}
-                ]
-            }
+        tone: function (str, delimiter) {
+            return window.pinyinUtil.getPinyin(str, delimiter);
         },
+        normal: function (str, delimiter) {
+            return window.pinyinUtil.getPinyin(str, delimiter, false);
+        }
+    };
+    str = str.split("\n");
+    for (let i = 0; i < str.length; i++) {
+        str[i] = pinyin[type](str[i], delimiter);
     }
-</script>
\ No newline at end of file
+    return str.join("\n");
+}
+
+export default {
+    components:{
+        heightResize,
+        autoHeightTextarea
+    },
+    created() {
+        this.current = Object.assign({}, this.current, this.$getToolData("input"))
+    },
+    computed: {
+        output() {
+            let result = "";
+            if (this.current.input.trim()) {
+                result = py(
+                    this.current.operation,
+                    this.current.input,
+                    this.current.delimiter === "null" ? "" : (this.current.delimiter === "blank" ? " " : this.current.delimiter)
+                );
+                this.$saveToolData(this.current);
+            }
+            return result
+        }
+    },
+    methods:{
+        resize(height){
+            this.inputHeight = Math.min(Math.ceil(height/2),160);
+            this.outputHeight = height - this.inputHeight;
+        }
+    },
+    data() {
+        return {
+            current: {
+                input: "",
+                output: "",
+                delimiter: "null",
+                operation: "normal"
+            },
+            delimiter: [
+                {"n": this.$t('pinyin_delimiter_null'), "v": "null"},
+                {"n": this.$t('pinyin_delimiter_space'), "v": "blank"},
+                {"n": this.$t('pinyin_delimiter_1'), "v": "-"},
+                {"n": this.$t('pinyin_delimiter_2'), "v": "_"},
+                {"n": this.$t('pinyin_delimiter_3'), "v": "."}
+            ],
+            inputHeight:100,
+            outputHeight:100,
+        }
+    },
+}
+</script>
diff --git a/src/views/tool/qrCode.vue b/src/views/tool/qrCode.vue
index 3f3d0c7ea90f8bc19ba4796a3ada837d99e464a2..6d48d74023b0d231cbef546b6998a7c45eb6e437 100644
--- a/src/views/tool/qrCode.vue
+++ b/src/views/tool/qrCode.vue
@@ -1,121 +1,162 @@
 <template>
-  <div>
-    <Tabs v-model="current.operation">
-      <TabPane label="二维码生成" name="generate">
-        <Row :gutter="16">
-          <Col span="14">
-            <Input v-model="current.generateInput" :rows="14" type="textarea" placeholder="内容"></Input>
-            <option-block>
-              <FormItem>
-                <Button type="primary" @click="generate()">生成</Button>
-              </FormItem>
-            </option-block>
-          </Col>
-          <Col span="10">
-            <div style="text-align: center" v-html="current.generateOutput"></div>
-          </Col>
-        </Row>
-      </TabPane>
-      <TabPane label="二维码解析" name="reader">
-        <Row :gutter="16">
-          <Col span="14">
-            <Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input>
-            <option-block>
-              <FormItem>
-                <Button type="primary" @click="reader()">解析</Button>
-              </FormItem>
-              <FormItem>
-                <Upload action="#" :before-upload="handleUpload">
-                  <Button icon="ios-cloud-upload-outline">上传图片</Button>
-                </Upload>
-              </FormItem>
-            </option-block>
-            <Input v-model="current.readerOutput" :rows="5" type="textarea" placeholder="解析结果"></Input>
-          </Col>
-          <Col span="10" style="text-align: center" v-html="readerInputImg"></Col>
-        </Row>
-      </TabPane>
-    </Tabs>
-  </div>
+    <div>
+        <Tabs v-model="current.operation">
+            <TabPane :label="$t('qrCode_generate_title')" name="generate">
+                <Row :gutter="16">
+                    <Col span="14">
+                        <Input v-model="current.generateInput" :rows="14" type="textarea" :placeholder="$t('qrCode_generate_input')"></Input>
+                    </Col>
+                    <Col span="10">
+                        <div style="text-align: center" v-html="generateOutput"></div>
+                    </Col>
+                </Row>
+            </TabPane>
+            <TabPane :label="$t('qrCode_reader_title')" name="reader">
+                <Row :gutter="16">
+                    <Col span="14">
+                        <input-block style="margin-bottom: 10px" bottom="0px" right="10px">
+                            <pasteClipboardFlie @on-paste-image="handleUpload">
+                                <Input v-model="current.readerInput" :rows="3" type="textarea" :placeholder="$t('qrCode_reader_input')"></Input>
+                            </pasteClipboardFlie>
+                            <Upload slot="extra" action="#" :before-upload="handleUpload">
+                                <Button size="small" type="primary" icon="ios-cloud-upload-outline">{{ $t('qrCode_reader_upload') }}</Button>
+                            </Upload>
+                        </input-block>
+                        <Input v-model="readerOutput" :rows="8" type="textarea" :placeholder="$t('qrCode_reader_output')"></Input>
+                    </Col>
+                    <Col span="10" style="text-align: center" v-html="readerInputImg"></Col>
+                </Row>
+            </TabPane>
+        </Tabs>
+
+    </div>
 </template>
 <script>
-    import generator from 'qrcode'
-    import qrcodeParser from 'qrcode-parser'
-    import model from '../../tool/model'
+import generator from 'qrcode'
+import qrcodeParser from 'qrcode-parser'
+import model from '../../tool/model'
+import Jimp from 'jimp';
+import pasteClipboardFlie from './components/pasteClipboardFlie';
 
-    export default {
-        computed: {
-            readerInputImg () {
-                if (this.current.readerInput) {
-                    return `<img style="width:300px" src="${this.current.readerInput}" />`
-                }
-                return ''
-            },
-        },
-        created () {
-            let feature = model.getToolCurrentFeature('generate')
-            if(feature === 'generate'){
-                this.current = Object.assign(this.current, this.$getToolData('generateInput'))
-                this.current.operation = feature;
-            }
-            else if(feature === 'reader'){
-                this.current = Object.assign(this.current, this.$getToolData('readerInput'))
-                this.current.operation = feature;
-            }
-            else{
-                this.current = Object.assign(this.current, this.$getToolData())
+export default {
+    components: {
+        pasteClipboardFlie,
+    },
+    computed: {
+        readerInputImg() {
+            if (this.current.readerInput) {
+                return `<img style="width:300px" src="${this.current.readerInput}" />`
             }
+            return ''
+        }
+    },
+    watch: {
+        "current.generateInput"() {
+            this.generate()
         },
-        methods: {
-            generate () {
-                if (!this.current.generateInput) return
-                this.generateHandle(this.current.generateInput)
-                this.$saveToolData(this.current)
-            },
-            reader () {
-                if (!this.current.readerInput) {
-                    return
-                }
-                qrcodeParser(this.current.readerInput).then((c) => {
-                    this.current.readerOutput = c.data
-                    this.$saveToolData(this.current)
-                    this.$Message.success('解析成功')
-                }).catch(() => {
-                    return this.$Message.error('图片解析错误')
-                })
-            },
-            generateHandle (str) {
-                generator.toDataURL(str, (error, url) => {
-                    if (error) return this.$Message.error('二维码生成错误:' + error)
-                    this.$clipboardCopyImages(url)
-                    this.current.generateOutput = `<img style="width:300px" src="${url}" />`
-                })
-            },
-            handleUpload (file) {
-                let r = new FileReader()
-                r.readAsDataURL(file)
-                r.onloadend = () => {
-                    this.current.readerInput = r.result
-                    this.reader()
+        "current.readerInput"() {
+            this.reader()
+        }
+    },
+    created() {
+        let feature = model.getToolCurrentFeature('generate')
+        if (feature === 'generate') {
+            this.current = Object.assign(this.current, this.$getToolData('generateInput'))
+            this.current.operation = feature;
+        } else if (feature === 'reader') {
+            this.current = Object.assign(this.current, this.$getToolData('readerInput'))
+            this.current.operation = feature;
+        } else {
+            this.current = Object.assign(this.current, this.$getToolData())
+        }
+    },
+    methods: {
+        generate() {
+            if (!this.current.generateInput) {
+                this.generateOutput = "";
+                return;
+            }
+            generator.toDataURL(this.current.generateInput, (error, url) => {
+                if (error) {
+                    this.generateOutput = this.$t("qrCode_generate_error", [error]);
+                    return;
                 }
-                return false
-            },
-            substr (str) {
-                str = str.replace(/[\r\n]/g, '').trim()
-                const strLength = 100
-                return str.length > strLength ? str.substr(0, strLength) + '...' : str
-            },
+                this.$clipboardCopyImages(url)
+                this.generateOutput = `<img style="width:300px" src="${url}" />`
+                this.$saveToolData(this.current)
+            })
         },
-        data () {
-            return {
-                current: {
-                    generateInput: '',
-                    generateOutput: '',
-                    readerInput: '',
-                    readerOutput: '',
-                    operation: 'generate',
-                },
+        reader() {
+            if (!this.current.readerInput) {
+                this.readerOutput = "";
+                return
             }
+            this.getReaderImagePngBase64(this.current.readerInput).then((result) => {
+                this.readerOutput = result
+                this.$saveToolData(this.current)
+            }).catch(e => {
+                this.readerOutput = this.$t('qrCode_reader_error', [e.message])
+            })
+        },
+        getReaderImagePngBase64(input) {
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', input);
+                xhr.responseType = 'blob';
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        let blob = xhr.response;
+                        const myReader = new FileReader();
+                        myReader.readAsArrayBuffer(blob);
+                        myReader.addEventListener('loadend', e => {
+                            const buffer = e.target.result;
+                            try {
+                                Jimp.read(buffer, (err, image) => {
+                                    if (err) {
+                                        return reject(err);
+                                    }
+                                    image.getBase64Async("image/png").then((img) => {
+                                        return qrcodeParser(img)
+                                    }).then((c) => {
+                                        resolve(c.data)
+                                    }).catch((e) => {
+                                        reject(e);
+                                    })
+                                });
+                            } catch (e) {
+                                reject(e);
+                            }
+                        });
+                    } else {
+                        reject(new Error(this.$t('qrCode_reader_parsing_failure').toString()));
+                    }
+                };
+                xhr.onerror = () => reject(new Error(this.$t('qrCode_reader_parsing_failure').toString()));
+                xhr.send();
+            })
         },
-    }
+        handleUpload(file) {
+            if (this.current.operation !== "reader"){
+                return;
+            }
+            let r = new FileReader()
+            r.readAsDataURL(file)
+            r.onloadend = () => {
+                this.current.readerInput = r.result
+            }
+            return false
+        }
+    },
+    data() {
+        return {
+            readerOutput: "",
+            generateOutput: "",
+            current: {
+                generateInput: '',
+                readerInput: '',
+                operation: 'generate',
+            },
+        }
+    },
+}
 </script>
diff --git a/src/views/tool/randomString.vue b/src/views/tool/randomString.vue
index d18a417e39a5a38ad18991769bc50400cc2efaec..1c6e41a2946c9d0603e9dd17032bc55a69b8a1c5 100644
--- a/src/views/tool/randomString.vue
+++ b/src/views/tool/randomString.vue
@@ -1,92 +1,106 @@
 <template>
     <div>
-        <Row :gutter="16">
-            <Col span="8">
-                <Input v-model="current.length">
-                    <div slot="prepend" style="width: 70px">长度</div>
-                </Input>
-            </Col>
-            <Col span="8">
-                <Input v-model="current.amount">
-                    <div slot="prepend" style="width: 70px">生成数量</div>
-                </Input>
-            </Col>
-            <Col span="8">
-                <Input v-model="current.delimiter">
-                    <div slot="prepend" style="width: 70px">分隔符</div>
-                </Input>
-            </Col>
-        </Row>
-        <option-block>
-            <FormItem>
-                <Checkbox v-model="current.isDigital">数字</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isLowercase">小写字母</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isUppercase">大写字母</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isSymbol">特殊符号</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isUnique">唯一</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isAddQuote">添加引号</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Button type="primary" @click="handle()">生成</Button>
-            </FormItem>
-        </option-block>
-        <Input v-model="current.output" :rows="12" type="textarea" placeholder="结果"></Input>
+        <div class="page-option-block">
+            <Row :gutter="16">
+                <Col span="8">
+                    <Input v-model="current.length" type="number">
+                        <div slot="prepend" style="width: 70px">{{ $t('randomString_length') }}</div>
+                    </Input>
+                </Col>
+                <Col span="8">
+                    <Input v-model="current.amount" type="number">
+                        <div slot="prepend" style="width: 70px">{{ $t('randomString_amount') }}</div>
+                    </Input>
+                </Col>
+                <Col span="8">
+                    <Input v-model="current.delimiter">
+                        <div slot="prepend" style="width: 70px">{{ $t('randomString_delimiter') }}</div>
+                    </Input>
+                </Col>
+            </Row>
+            <option-block>
+                <FormItem>
+                    <Checkbox v-model="current.isDigital">{{ $t('randomString_digital') }}</Checkbox>
+                </FormItem>
+                <FormItem>
+                    <Checkbox v-model="current.isLowercase">{{ $t('randomString_lowercase') }}</Checkbox>
+                </FormItem>
+                <FormItem>
+                    <Checkbox v-model="current.isUppercase">{{ $t('randomString_uppercase') }}</Checkbox>
+                </FormItem>
+                <FormItem>
+                    <Checkbox v-model="current.isSymbol">{{ $t('randomString_symbol') }}</Checkbox>
+                </FormItem>
+                <FormItem>
+                    <Checkbox v-model="current.isUnique">{{ $t('randomString_unique') }}</Checkbox>
+                </FormItem>
+                <FormItem>
+                    <Checkbox v-model="current.isAddQuote">{{ $t('randomString_add_quote') }}</Checkbox>
+                </FormItem>
+                <FormItem>
+                    <Button type="primary" @click="handle()">{{ $t('randomString_generate') }}</Button>
+                </FormItem>
+            </option-block>
+        </div>
+        <heightResize :append="['.page-option-block']">
+            <autoHeightTextarea :value="current.output" :placeholder="$t('randomString_output')" />
+        </heightResize>
     </div>
 </template>
 <script>
-    export default {
-        created() {
-            this.current = Object.assign(this.current,this.$getToolData())
-        },
-        methods: {
-            handle() {
-                let chars = "";
-                if (this.current.isDigital) chars += "0123456789";
-                if (this.current.isLowercase) chars += "abcdefghijklmnopqrstuvwxyz";
-                if (this.current.isUppercase) chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-                if (this.current.isSymbol) chars += "`~!@#$%^&*()-_=+[{]}|;:',<.>/?";
-
-                let randomStringLists = [];
-                for (let i = 0, l = this.current.amount; i < l; i++) {
-                    let _chars = chars.split(""),
-                        random_string = "";
-                    for (let j = 0, k = this.current.length; j < k; j++) {
-                        if (_chars.length < 1) break;
-                        let index = Math.floor(Math.random() * _chars.length);
-                        random_string += _chars[index];
-                        if (this.current.isUnique) _chars.splice(index, 1);
-                    }
-                    randomStringLists.push(this.current.isAddQuote ? '"'+random_string+'"' : random_string);
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+export default {
+    components:{
+        heightResize,
+        autoHeightTextarea
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData())
+    },
+    mounted() {
+        if (!this.current.output){
+            this.handle()
+        }
+    },
+    methods: {
+        handle() {
+            let chars = "";
+            if (this.current.isDigital) chars += "0123456789";
+            if (this.current.isLowercase) chars += "abcdefghijklmnopqrstuvwxyz";
+            if (this.current.isUppercase) chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+            if (this.current.isSymbol) chars += "`~!@#$%^&*()-_=+[{]}|;:',<.>/?";
+            let randomStringLists = [];
+            for (let i = 0, l = this.current.amount; i < l; i++) {
+                let _chars = chars.split(""),
+                    random_string = "";
+                for (let j = 0, k = this.current.length; j < k; j++) {
+                    if (_chars.length < 1) break;
+                    let index = Math.floor(Math.random() * _chars.length);
+                    random_string += _chars[index];
+                    if (this.current.isUnique) _chars.splice(index, 1);
                 }
-                this.current.output = randomStringLists.join(this.current.delimiter.replace(/\\n/, "\n"));
-                this.$saveToolData(this.current);
+                randomStringLists.push(this.current.isAddQuote ? '"'+random_string+'"' : random_string);
             }
-        },
-        data() {
-            return {
-                current:{
-                    length:8,
-                    amount:10,
-                    delimiter:",\\n",
-                    isDigital:true,
-                    isLowercase:true,
-                    isUppercase:true,
-                    isSymbol:false,
-                    isUnique:false,
-                    isAddQuote:false,
-                    output: "",
-                }
+            this.current.output = randomStringLists.join(this.current.delimiter.replace(/\\n/, "\n"));
+            this.$saveToolData(this.current);
+        }
+    },
+    data() {
+        return {
+            current: {
+                length: 8,
+                amount: 10,
+                delimiter: ",\\n",
+                isDigital: true,
+                isLowercase: true,
+                isUppercase: true,
+                isSymbol: false,
+                isUnique: true,
+                isAddQuote: false,
+                output: "",
             }
-        },
-    }
-</script>
\ No newline at end of file
+        }
+    },
+}
+</script>
diff --git a/src/views/tool/regex.vue b/src/views/tool/regex.vue
index e28179445a0948f9ed0219230636e9d928f9bfc7..6037b334b419548d0b3cbdefa00bb6973572064e 100644
--- a/src/views/tool/regex.vue
+++ b/src/views/tool/regex.vue
@@ -1,316 +1,150 @@
 <template>
     <div>
-        <Tabs v-model="current.operation">
-            <TabPane label="正则测试" name="test">
-                <Row :gutter="16" style="margin-bottom: 10px">
-                    <Col span="12">
-                        <Input v-model="current.input">
-                            <Select slot="prepend" @on-change="commonSelect" placeholder="正则表达式" style="width:100px">
-                                <Option style="text-align: left" v-for="(v,k) in regex" :value="v.regex" :key="k">{{ v.name }}</Option>
-                            </Select>
-                        </Input>
-                    </Col>
-                    <Col span="12">
-                        <Input v-model="current.replace">
-                            <span slot="prepend">替换内容</span>
-                        </Input>
-                    </Col>
-                </Row>
-                <Row :gutter="16">
-                    <Col span="12">
-                        <Input v-model="current.content" :rows="10" type="textarea" placeholder="内容"></Input>
-                    </Col>
-                    <Col span="12">
-                        <Input v-model="current.output" :rows="10" type="textarea" placeholder="执行内容"></Input>
-                    </Col>
-                </Row>
-                <option-block>
-                    <FormItem>
-                        <ButtonGroup>
-                            <Button type="primary" @click="handle('find')">查找</Button>
-                            <Button type="primary" @click="handle('replace')">替换</Button>
-                        </ButtonGroup>
-
-                    </FormItem>
-                    <FormItem>
-                        <Checkbox v-model="current.isGlobal">全局搜索</Checkbox>
-                    </FormItem>
-                    <FormItem>
-                        <Checkbox v-model="current.isIgnoreCase">忽略大小写</Checkbox>
-                    </FormItem>
-                </option-block>
-            </TabPane>
-            <TabPane label="正则语法参考" name="reference">
-                <Table :columns="referenceColumns" :data="reference">
-                    <template slot-scope="{ row }" slot="_text">
-                        <div v-html="row.text"></div>
+        <Row :gutter="16" style="margin-bottom: 10px" class="page-option-block">
+            <Col span="12">
+                <input-block :text="$t('regex_reference')" @on-default-right-bottom-click="reference">
+                    <Input v-model="current.input">
+                        <Select slot="prepend" @on-change="commonSelect" :placeholder="$t('regex_expression')"
+                                style="width:100px">
+                            <Option style="text-align: left" v-for="(v,k) in regex" :value="v.regex" :key="k">{{v.name}}
+                            </Option>
+                        </Select>
+                    </Input>
+                </input-block>
+            </Col>
+            <Col span="12">
+                <input-block>
+                    <Input v-model="current.replace" :disabled="current.isDelete">
+                        <span slot="prepend">{{ $t('regex_replace_content') }}</span>
+                    </Input>
+                    <template slot="extra">
+                        <Checkbox v-model="current.isDelete">{{ $t('regex_delete') }}</Checkbox>
                     </template>
-                </Table>
-            </TabPane>
-        </Tabs>
+                </input-block>
+            </Col>
+        </Row>
+        <heightResize :append="['.page-option-block']" @resize="resize">
+            <Row :gutter="16">
+                <Col span="12">
+                    <input-block>
+                        <autoHeightTextarea :height="height" v-model="current.content"
+                                            :placeholder="$t('regex_input')"/>
+                        <template slot="extra">
+                            <Checkbox v-model="current.isGlobal">{{ $t('regex_global') }}</Checkbox>
+                            <Checkbox v-model="current.isIgnoreCase">{{ $t('regex_ignore_case') }}</Checkbox>
+                        </template>
+                    </input-block>
+                </Col>
+                <Col span="12">
+                    <autoHeightTextarea :height="height" :value="output"
+                                        :placeholder="$t('regex_output')"/>
+                </Col>
+            </Row>
+        </heightResize>
     </div>
 </template>
 <script>
-    export default {
-        created() {
-            this.current = Object.assign(this.current, this.$getToolData("input"))
+import {openUrl} from "../../helper";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+import heightResize from "./components/heightResize";
+
+export default {
+    components: {
+        autoHeightTextarea,
+        heightResize
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData("input"))
+    },
+    computed: {
+        replaceContent(){
+            if (!this.current.isDelete && !this.current.replace){
+                return false
+            }
+            return this.current.isDelete ? "" : this.current.replace;
         },
-        methods: {
-            handle(v) {
+        output() {
+            let result = "";
+            try {
                 if (!this.current.input || !this.current.content) {
-                    return;
+                    return result;
                 }
 
                 let reg = new RegExp(
-                    this.current.input, (this.current.isIgnoreCase ? 'i' : '')+this.current.isGlobal ? 'g' : ''
+                    this.current.input, (this.current.isIgnoreCase ? 'i' : '') + (this.current.isGlobal ? 'g' : '')
                 );
-                switch (v) {
-                    case "find":{
-                        let arr = this.current.content.match(reg);
-                        let string = '';
-                        if (arr) {
-                            string += "共 " + arr.length + " 个匹配项\n";
-                            for (let i = 0; i < arr.length; i++) {
-                                string += ("$" + i + " -> " + arr[i]) + "\r\n";
-                            }
-                        } else {
-                            string = "没有匹配结果，请检查正则";
+                if (this.replaceContent !== false) {
+                    result = this.current.content.replace(reg, this.replaceContent);
+                } else {
+                    let arr = this.current.content.match(reg);
+                    let string = '';
+                    if (arr) {
+                        string += this.$t('regex_output_count', [arr.length]) + "\n";
+                        for (let i = 0; i < arr.length; i++) {
+                            string += ("$" + i + " -> " + arr[i]) + "\r\n";
                         }
-                        this.current.output = string
-                        break;
+                    } else {
+                        string = this.$t('regex_output_emty');
                     }
-                    case "replace": {
-                        this.current.output = this.current.content.replace(reg, this.current.replace);
-                        break;
-                    }
-                    default:
-                        return;
+                    result = string
                 }
                 this.$saveToolData(this.current);
-            },
-            commonSelect(v){
-                this.current.input = v;
+            } catch (e) {
+                result = this.$t('regex_error', [e.message])
             }
+            return result
+        }
+    },
+    methods: {
+        resize(height) {
+            this.height = height;
         },
-        data() {
-            return {
-                current: {
-                    input: "\\w+?(\\d+)\\w+?([\\u4e00-\\u9fa5]+)",
-                    content: "hello 1949world你好世界",
-                    output: "",
-                    replace: "",
-                    isIgnoreCase: true,
-                    isGlobal: true,
-                    operation: "test",
-                },
-                regex: [
-                    {regex: "[\\u4e00-\\u9fa5]", name: '匹配中文字符'},
-                    {regex: "[^\\x00-\\xff]", name: '匹配双字节字符(包括汉字在内)'},
-                    {regex: "\\n\\s*\\r", name: '匹配空白行'},
-                    {
-                        regex: "[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?",
-                        name: '匹配Email地址'
-                    },
-                    {regex: "[a-zA-z]+://[^\\s]*", name: '匹配网址URL'},
-                    {regex: "[1][3,4,5,7,8][0-9]{9}", name: '手机'},
-                    {regex: "\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}", name: 'IP地址'},
-                    {regex: "\\d{3}-\\d{8}|\\d{4}-\\d{7,8}", name: '匹配国内电话号码'},
-                    {regex: "[1-9][0-9]{4,}", name: '匹配腾讯QQ号'},
-                    {regex: "[1-9]\\d{5}(?!\\d)", name: '匹配中国邮政编码'},
-                    {
-                        regex: "([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))",
-                        name: '匹配(年-月-日)格式日期'
-                    },
-                    {regex: "[1-9]\\d*", name: '匹配正整数'},
-                    {regex: "-[1-9]\\d*", name: '匹配负整数'},
-                    {regex: "-?[1-9]\\d*", name: '匹配整数'},
-                    {regex: "[1-9]\\d*|0", name: '匹配非负整数（正整数 + 0）'},
-                    {regex: "-[1-9]\\d*|0", name: '匹配非正整数（负整数 + 0）'},
-                    {regex: "[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*", name: '匹配正浮点数'},
-                    {regex: "-[1-9]\\d*\\.\\d*|-0\\.\\d*[1-9]\\d*", name: '匹配负浮点数'}
-                ],
-                referenceColumns: [
-                    {
-                        title: '字符',
-                        key: 'name',
-                        width: 100
-                    },
-                    {
-                        title: '描述',
-                        slot: '_text'
-                    },
-                ],
-                reference: [
-                    {
-                        name: "\\",
-                        text: "将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“<code>n</code>”匹配字符“<code>n</code>”。“<code>\\n</code>”匹配一个换行符。串行“<code>\\\\</code>”匹配“<code>\\</code>”而“<code>\\(</code>”则匹配“<code>(</code>”。"
-                    },
-                    {
-                        name: "^",
-                        text: "匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“<code>\\n</code>”或“<code>\\r</code>”之后的位置。"
-                    },
-                    {
-                        name: "$",
-                        text: "匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“<code>\\n</code>”或“<code>\\r</code>”之前的位置。"
-                    },
-                    {
-                        name: "*",
-                        text: "匹配前面的子表达式零次或多次。例如，zo*能匹配“<code>z</code>”以及“<code>zoo</code>”。*等价于{0,}。"
-                    },
-                    {
-                        name: "+",
-                        text: "匹配前面的子表达式一次或多次。例如，“<code>zo+</code>”能匹配“<code>zo</code>”以及“<code>zoo</code>”，但不能匹配“<code>z</code>”。+等价于{1,}。"
-                    },
-                    {
-                        name: "?",
-                        text: "匹配前面的子表达式零次或一次。例如，“<code>do(es)?</code>”可以匹配“<code>does</code>”或“<code>does</code>”中的“<code>do</code>”。?等价于{0,1}。"
-                    },
-                    {
-                        name: "{n}",
-                        text: "n是一个非负整数。匹配确定的n次。例如，“<code>o{2}</code>”不能匹配“<code>Bob</code>”中的“<code>o</code>”，但是能匹配“<code>food</code>”中的两个o。"
-                    },
-                    {
-                        name: "{n,}",
-                        text: "n是一个非负整数。至少匹配n次。例如，“<code>o{2,}</code>”不能匹配“<code>Bob</code>”中的“<code>o</code>”，但能匹配“<code>foooood</code>”中的所有o。“<code>o{1,}</code>”等价于“<code>o+</code>”。“<code>o{0,}</code>”则等价于“<code>o*</code>”。"
-                    },
-                    {
-                        name: "{n,m}",
-                        text: "m和n均为非负整数，其中n&lt;=m。最少匹配n次且最多匹配m次。例如，“<code>o{1,3}</code>”将匹配“<code>fooooood</code>”中的前三个o。“<code>o{0,1}</code>”等价于“<code>o?</code>”。请注意在逗号和两个数之间不能有空格。"
-                    },
-                    {
-                        name: "?",
-                        text: "当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“<code>oooo</code>”，“<code>o+?</code>”将匹配单个“<code>o</code>”，而“<code>o+</code>”将匹配所有“<code>o</code>”。"
-                    },
-                    {
-                        name: ".",
-                        text: "匹配除“<code>\\</code><code>n</code>”之外的任何单个字符。要匹配包括“<code>\\</code><code>n</code>”在内的任何字符，请使用像“<code>(.|\\n)</code>”的模式。"
-                    },
-                    {
-                        name: "(pattern)",
-                        text: "匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“<code>\\(</code>”或“<code>\\)</code>”。"
-                    },
-                    {
-                        name: "(?:pattern)",
-                        text: "匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“<code>(|)</code>”来组合一个模式的各个部分是很有用。例如“<code>industr(?:y|ies)</code>”就是一个比“<code>industry|industries</code>”更简略的表达式。"
-                    },
-                    {
-                        name: "(?=pattern)",
-                        text: "正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“<code>Windows(?=95|98|NT|2000)</code>”能匹配“<code>Windows2000</code>”中的“<code>Windows</code>”，但不能匹配“<code>Windows3.1</code>”中的“<code>Windows</code>”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。"
-                    },
-                    {
-                        name: "(?!pattern)",
-                        text: "正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“<code>Windows(?!95|98|NT|2000)</code>”能匹配“<code>Windows3.1</code>”中的“<code>Windows</code>”，但不能匹配“<code>Windows2000</code>”中的“<code>Windows</code>”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始"
-                    },
-                    {
-                        name: "(?&lt;=pattern)",
-                        text: "反向肯定预查，与正向肯定预查类拟，只是方向相反。例如，“<code>(?&lt;=95|98|NT|2000)Windows</code>”能匹配“<code>2000Windows</code>”中的“<code>Windows</code>”，但不能匹配“<code>3.1Windows</code>”中的“<code>Windows</code>”。"
-                    },
-                    {
-                        name: "(?&lt;!pattern)",
-                        text: "反向否定预查，与正向否定预查类拟，只是方向相反。例如“<code>(?&lt;!95|98|NT|2000)Windows</code>”能匹配“<code>3.1Windows</code>”中的“<code>Windows</code>”，但不能匹配“<code>2000Windows</code>”中的“<code>Windows</code>”。"
-                    },
-                    {
-                        name: "x|y",
-                        text: "匹配x或y。例如，“<code>z|food</code>”能匹配“<code>z</code>”或“<code>food</code>”。“<code>(z|f)ood</code>”则匹配“<code>zood</code>”或“<code>food</code>”。"
-                    },
-                    {
-                        name: "[xyz]",
-                        text: "字符集合。匹配所包含的任意一个字符。例如，“<code>[abc]</code>”可以匹配“<code>plain</code>”中的“<code>a</code>”。"
-                    },
-                    {
-                        name: "[^xyz]",
-                        text: "负值字符集合。匹配未包含的任意字符。例如，“<code>[^abc]</code>”可以匹配“<code>plain</code>”中的“<code>p</code>”。"
-                    },
-                    {
-                        name: "[a-z]",
-                        text: "字符范围。匹配指定范围内的任意字符。例如，“<code>[a-z]</code>”可以匹配“<code>a</code>”到“<code>z</code>”范围内的任意小写字母字符。"
-                    },
-                    {
-                        name: "[^a-z]",
-                        text: "负值字符范围。匹配任何不在指定范围内的任意字符。例如，“<code>[^a-z]</code>”可以匹配任何不在“<code>a</code>”到“<code>z</code>”范围内的任意字符。"
-                    },
-                    {
-                        name: "\\b",
-                        text: "匹配一个单词边界，也就是指单词和空格间的位置。例如，“<code>er\\b</code>”可以匹配“<code>never</code>”中的“<code>er</code>”，但不能匹配“<code>verb</code>”中的“<code>er</code>”。"
-                    },
-                    {
-                        name: "\\B",
-                        text: "匹配非单词边界。“<code>er\\B</code>”能匹配“<code>verb</code>”中的“<code>er</code>”，但不能匹配“<code>never</code>”中的“<code>er</code>”。"
-                    },
-                    {
-                        name: "\\cx",
-                        text: "匹配由x指明的控制字符。例如，<code>\\cM</code>匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“<code>c</code>”字符。"
-                    },
-                    {
-                        name: "\\d",
-                        text: "匹配一个数字字符。等价于[0-9]。"
-                    },
-                    {
-                        name: "\\D",
-                        text: "匹配一个非数字字符。等价于[^0-9]。"
-                    },
-                    {
-                        name: "\\f",
-                        text: "匹配一个换页符。等价于\\x0c和\\cL。"
-                    },
-                    {
-                        name: "\\n",
-                        text: "匹配一个换行符。等价于\\x0a和\\cJ。"
-                    },
-                    {
-                        name: "\\r",
-                        text: "匹配一个回车符。等价于\\x0d和\\cM。"
-                    },
-                    {
-                        name: "\\s",
-                        text: "匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \\f\\n\\r\\t\\v]。"
-                    },
-                    {
-                        name: "\\S",
-                        text: "匹配任何非空白字符。等价于[^ \\f\\n\\r\\t\\v]。"
-                    },
-                    {
-                        name: "\\t",
-                        text: "匹配一个制表符。等价于\\x09和\\cI。"
-                    },
-                    {
-                        name: "\\v",
-                        text: "匹配一个垂直制表符。等价于\\x0b和\\cK。"
-                    },
-                    {
-                        name: "\\w",
-                        text: "匹配包括下划线的任何单词字符。等价于“<code>[A-Za-z0-9_]</code>”。"
-                    },
-                    {
-                        name: "\\W",
-                        text: "匹配任何非单词字符。等价于“<code>[^A-Za-z0-9_]</code>”。"
-                    },
-                    {
-                        name: "\\xn",
-                        text: "匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“<code>\\x41</code>”匹配“<code>A</code>”。“<code>\\x041</code>”则等价于“<code>\\x04&amp;1</code>”。正则表达式中可以使用ASCII编码。."
-                    },
-                    {
-                        name: "\\num",
-                        text: "匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“<code>(.)\\1</code>”匹配两个连续的相同字符。"
-                    },
-                    {
-                        name: "\\n",
-                        text: "标识一个八进制转义值或一个向后引用。如果\\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。"
-                    },
-                    {
-                        name: "\\nm",
-                        text: "标识一个八进制转义值或一个向后引用。如果\\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\\nm将匹配八进制转义值nm。"
-                    },
-                    {
-                        name: "\\nml",
-                        text: "如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。"
-                    },
-                    {
-                        name: "\\un",
-                        text: "匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\\u00A9匹配版权符号（©）。"
-                    }
-                ]
-            }
+        reference() {
+            openUrl(this.$t('regex_reference_url').toString())
         },
-    }
-</script>
\ No newline at end of file
+        commonSelect(v) {
+            this.current.input = v;
+        }
+    },
+    data() {
+        return {
+            current: {
+                input: "[\\dheo]",
+                content: ((new Date).getFullYear()) + " hello WORLD 你好世界",
+                output: "",
+                replace: "",
+                isGlobal: true,
+                isIgnoreCase: true,
+                isDelete: false
+            },
+            height: 100,
+            regex: [
+                {regex: "[\\u4e00-\\u9fa5]", name: this.$t('regex_type_zh')},
+                {regex: "[^\\x00-\\xff]", name: this.$t('regex_type_complex')},
+                {regex: "\\n\\s*\\r", name: this.$t('regex_type_blank')},
+                {
+                    regex: "[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?",
+                    name: this.$t('regex_type_email')
+                },
+                {regex: "[a-zA-z]+://[^\\s]*", name: this.$t('regex_type_url')},
+                {regex: "[1][3,4,5,7,8][0-9]{9}", name: this.$t('regex_type_cn_mobile')},
+                {regex: "\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}", name: this.$t('regex_type_ip')},
+                {regex: "\\d{3}-\\d{8}|\\d{4}-\\d{7,8}", name: this.$t('regex_type_cn_tel')},
+                {regex: "[1-9][0-9]{4,}", name: this.$t('regex_type_tencent_qq')},
+                {regex: "[1-9]\\d{5}(?!\\d)", name: this.$t('regex_type_cn_postcode')},
+                {
+                    regex: "([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))",
+                    name: this.$t('regex_type_date')
+                },
+                {regex: "[1-9]\\d*", name: this.$t('regex_type_positive_integer')},
+                {regex: "-[1-9]\\d*", name: this.$t('regex_type_negative_integer')},
+                {regex: "-?[1-9]\\d*", name: this.$t('regex_type_integer')},
+                {regex: "[1-9]\\d*|0", name: this.$t('regex_type_non_negative_integer')},
+                {regex: "-[1-9]\\d*|0", name: this.$t('regex_type_non_positive_integer')},
+                {regex: "[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*", name: this.$t('regex_type_positive_float')},
+                {regex: "-[1-9]\\d*\\.\\d*|-0\\.\\d*[1-9]\\d*", name: this.$t('regex_type_negative_float')}
+            ]
+        }
+    },
+}
+</script>
diff --git a/src/views/tool/serializeConversion.vue b/src/views/tool/serializeConversion.vue
index c6f0bbfffd310b91ab81eef3d4a3cc03be09aad6..27beaf5f039ada64c455ff0c3f707bd32341f7e7 100644
--- a/src/views/tool/serializeConversion.vue
+++ b/src/views/tool/serializeConversion.vue
@@ -1,45 +1,57 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
-            <FormItem>
-                <Select v-model="current.source" style="width:200px">
-                    <Option v-for="v in type" :value="v" :key="v">源数据:{{ v }}</Option>
-                </Select>
-            </FormItem>
-            <FormItem>
-                <Select v-model="current.target" style="width:200px">
-                    <Option v-for="v in type" :value="v" :key="v">目标数据:{{ v }}</Option>
-                </Select>
-            </FormItem>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle()">转换</Button>
-                </ButtonGroup>
-            </FormItem>
-        </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+    <Row :gutter="10">
+        <Col span="12">
+            <input-block top="10px" right="15px">
+                <heightResize>
+                    <code-editor v-model="current.input" :placeholder="$t('serializeConversion_input')"
+                                 :language="language[current.source]"/>
+                </heightResize>
+                <template slot="extra">
+                    <Select v-model="current.source" style="width:100px">
+                        <Option v-for="v in type" :value="v" :key="v">{{ v }}</Option>
+                    </Select>
+                </template>
+            </input-block>
+        </Col>
+        <Col span="12">
+            <input-block top="10px" right="15px">
+                <heightResize>
+                    <code-editor :value="output" :placeholder="$t('serializeConversion_output')" :language="language[current.target]"/>
+                </heightResize>
+                <template slot="extra">
+                    <Select v-model="current.target" style="width:100px">
+                        <Option v-for="v in type" :value="v" :key="v">{{ v }}</Option>
+                    </Select>
+                </template>
+            </input-block>
+        </Col>
+    </Row>
 </template>
 <script>
-import {TYPE as conversionType,conversion} from "./library/serializeConversion"
+import {conversion, TYPE as conversionType} from "./library/serializeConversion"
+import codeEditor from "./components/codeEditor";
+import heightResize from "./components/heightResize";
 
 export default {
+    components: {
+        codeEditor,
+        heightResize
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
-    methods: {
-        handle() {
+    computed: {
+        output() {
+            let result = "";
             if (this.current.input) {
                 try {
-                    this.current.output = conversion(this.current.input,this.current.source).getByTarget(this.current.target);
+                    result = conversion(this.current.input, this.current.source).getByTarget(this.current.target);
+                    this.$saveToolData(this.current);
                 } catch (e) {
-                    this.$Message.error(e.message);
-                    return;
+                    result = this.$t('serializeConversion_error', [e.message])
                 }
-                this.$clipboardCopy(this.current.output);
-                this.$saveToolData(this.current);
             }
+            return result;
         }
     },
     data() {
@@ -51,7 +63,15 @@ export default {
                 target: "xml"
             },
             type: conversionType,
+            language: {
+                json: "json",
+                xml: "xml",
+                yaml: "yaml",
+                phpArray: "php",
+                phpSerialize: "text",
+                properties: "text",
+            }
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/sign.vue b/src/views/tool/sign.vue
index af40534f20a9df572995a67690a6a9dd04591d8c..37beee9beef39966879cff6abac824dcf07dc200 100644
--- a/src/views/tool/sign.vue
+++ b/src/views/tool/sign.vue
@@ -1,62 +1,56 @@
 <template>
     <div>
-        <Row :gutter="10">
-            <Col span="12">
-                <Card :padding="0">
-                    <p slot="title">PEM格式公钥</p>
-                    <Input v-model="current.publicKey" :rows="6" type="textarea" placeholder="PEM格式公钥"></Input>
-                </Card>
-            </Col>
-            <Col span="12">
-                <Card :padding="0">
-                    <p slot="title">PEM格式私钥</p>
-                    <Input v-model="current.privateKey" :rows="6" type="textarea" placeholder="PEM格式私钥"></Input>
-                </Card>
-            </Col>
-        </Row>
-        <Row :gutter="10" style="margin-top: 5px">
-            <Col span="12">
-                <Card :padding="0">
-                    <p slot="title">待签名内容/验签数据</p>
-                    <Input v-model="current.signData" :rows="6" type="textarea"></Input>
-                </Card>
-            </Col>
-            <Col span="12">
-                <Card :padding="0">
-                    <p slot="title">Base64编码后签名</p>
-                    <Input v-model="current.verifyCode" :rows="6" type="textarea"></Input>
-                </Card>
-            </Col>
-        </Row>
-        <option-block>
-            <FormItem>
-                <Select v-model="current.algorithm" style="width: 200px">
-                    <Option v-for="v in algorithm" :value="v" :key="v">{{ v }}</Option>
-                </Select>
-            </FormItem>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="sign()">签名</Button>
-                    <Button type="primary" @click="verify()">验签</Button>
-
-                </ButtonGroup>
-            </FormItem>
-            <FormItem>
-                <Button type="default" @click="openGenerateKeypairBloack()">生成公钥/私钥</Button>
-            </FormItem>
-        </option-block>
-        <Modal
-            v-model="generateKeypairData.show"
-            title="生成公钥/私钥"
-        >
+        <heightResize :append="['.page-option-block']" ignore @resize="resize">
+            <Row :gutter="10">
+                <Col span="12">
+                    <input-block top="5px" type="default" :text="$t('sign_sign_data')" @on-default-right-bottom-click="()=>copy('signData')">
+                        <autoHeightTextarea :height="height1"  v-model="current.signData"></autoHeightTextarea>
+                    </input-block>
+                </Col>
+                <Col span="12">
+                    <input-block top="5px" type="default" :text="$t('sign_verify_code')" @on-default-right-bottom-click="()=>copy('verifyCode')">
+                        <autoHeightTextarea :height="height1"  v-model="current.verifyCode"></autoHeightTextarea>
+                    </input-block>
+                </Col>
+            </Row>
+            <option-block class="page-option-block" center>
+                <FormItem>
+                    <Select v-model="current.algorithm" style="width: 200px">
+                        <Option v-for="v in algorithm" :value="v" :key="v">{{ v }}</Option>
+                    </Select>
+                </FormItem>
+                <FormItem>
+                    <ButtonGroup>
+                        <Button type="primary" @click="sign()">{{ $t('sign_sign') }}</Button>
+                        <Button type="primary" @click="verify()">{{ $t('sign_verify') }}</Button>
+                    </ButtonGroup>
+                </FormItem>
+                <FormItem>
+                    <Button type="default" @click="openGenerateKeypairBlock()">{{ $t('sign_generate_keypair') }}</Button>
+                </FormItem>
+            </option-block>
+            <Row :gutter="10">
+                <Col span="12">
+                    <input-block top="5px" type="default" :text="$t('sign_public_key')" @on-default-right-bottom-click="()=>copy('publicKey')">
+                        <autoHeightTextarea :height="height2"  v-model="current.publicKey"></autoHeightTextarea>
+                    </input-block>
+                </Col>
+                <Col span="12">
+                    <input-block top="5px" type="default" :text="$t('sign_private_key')" @on-default-right-bottom-click="()=>copy('privateKey')">
+                        <autoHeightTextarea :height="height2"  v-model="current.privateKey"></autoHeightTextarea>
+                    </input-block>
+                </Col>
+            </Row>
+        </heightResize>
+        <Modal v-model="generateKeypairData.show" :title="$t('sign_generate_keypair')">
             <Form :label-width="80">
-                <FormItem label="密钥格式">
+                <FormItem :label="$t('sign_keypair_type')">
                     <Select v-model="generateKeypairData.type">
                         <Option value="PKCS8PRV">PKCS#8</Option>
                         <Option value="PKCS1PRV">PKCS#1</Option>
                     </Select>
                 </FormItem>
-                <FormItem label="密钥长度">
+                <FormItem :label="$t('sign_keypair_length')">
                     <Select v-model="generateKeypairData.length">
                         <Option :value="512">512 bit</Option>
                         <Option :value="1024">1024 bit</Option>
@@ -66,78 +60,67 @@
                 </FormItem>
             </Form>
             <div slot="footer">
-                <Button type="text" @click="generateKeypairData.show = false">取消</Button>
-                <Button type="primary" disabled v-if="generateKeypairData.loading">生成中</Button>
-                <Button v-else type="primary" @click="generateKeypair()">生成</Button>
+                <Button type="text" @click="generateKeypairData.show = false">{{ $t('sign_generate_cancel') }}</Button>
+                <Button type="primary" disabled v-if="generateKeypairData.loading">{{ $t('sign_generate_in') }}</Button>
+                <Button v-else type="primary" @click="generateKeypair()">{{ $t('sign_generate') }}</Button>
             </div>
         </Modal>
     </div>
 </template>
 <script>
 import rs from "jsrsasign";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+import heightResize from "./components/heightResize";
 
 export default {
+    components:{
+        autoHeightTextarea,
+        heightResize
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData())
     },
     methods: {
         sign() {
-            if (!this.current.signData || !this.current.privateKey){
-                return this.$Message.error('待签名内容/验签数据/PEM格式私钥 必填')
-            }
-            let rsaPrivateKey
             try {
-                rsaPrivateKey = rs.KEYUTIL.getKey(this.current.privateKey)
-            } catch (e) {
-                return this.$Message.error("无效私钥" + e)
-            }
-            let sign
-            try {
-                sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
-            } catch (e) {
-                return this.$Message.error("无效签名算法")
-            }
-            sign.init(rsaPrivateKey)
-            sign.updateString(this.current.signData)
-            let signResult
-            try {
-                signResult = sign.sign()
-            } catch (e) {
-                return this.$Message.error("签名时出现异常" + e)
+                if (!this.current.signData || !this.current.privateKey){
+                    throw new Error(this.$t('sign_error_sign_content_empty').toString())
+                }
+                let rsaPrivateKey = rs.KEYUTIL.getKey(this.current.privateKey)
+                let sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
+                sign.init(rsaPrivateKey)
+                sign.updateString(this.current.signData)
+                let signResult = sign.sign()
+                // 转为base64
+                this.current.verifyCode = rs.hex2b64(signResult)
+                // 自动复制签名结果到剪切板
+                this.$clipboardCopy(this.current.verifyCode);
+                // 保存历史记录
+                this.$saveToolData(this.current);
+            }catch (e){
+                this.$Message.error(this.$t('sign_error',[e.message]).toString())
             }
-            // 转为base64
-            this.current.verifyCode = rs.hex2b64(signResult)
-            // 自动复制签名结果到剪切板
-            this.$clipboardCopy(this.current.verifyCode);
-            // 保存历史记录
-            this.$saveToolData(this.current);
         },
         verify() {
-            if (!this.current.verifyCode || !this.current.publicKey){
-                return this.$Message.error('Base64编码后签名/PEM格式公钥 必填')
-            }
-            let rsaPublicKey
-            try {
-                rsaPublicKey = rs.KEYUTIL.getKey(this.current.publicKey)
-            } catch (e) {
-                return this.$Message.error("无效公钥")
-            }
-            let sign
             try {
-                sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
-            } catch (e) {
-                return this.$Message.error("无效签名算法")
-            }
-            sign.init(rsaPublicKey)
-            sign.updateString(this.current.signData)
-            let hexData = rs.b64tohex(this.current.verifyCode)
-            let verifyResult = sign.verify(hexData)
-            if (verifyResult) {
+                if (!this.current.verifyCode || !this.current.publicKey){
+                    throw new Error(this.$t('sign_error_verify_content_empty').toString())
+                }
+                let rsaPublicKey = rs.KEYUTIL.getKey(this.current.publicKey)
+                let sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
+                sign.init(rsaPublicKey)
+                sign.updateString(this.current.signData)
+                let hexData = rs.b64tohex(this.current.verifyCode)
+                let verifyResult = sign.verify(hexData)
+                if (!verifyResult) {
+                    throw new Error(this.$t('sign_verify_fail').toString())
+                }
                 // 保存历史记录
                 this.$saveToolData(this.current);
-                return this.$Message.info("验签成功")
+                this.$Message.info(this.$t('sign_verify_ok').toString())
+            }catch (e){
+                this.$Message.error(this.$t('sign_error',[e.message]).toString())
             }
-            return this.$Message.error("验签失败")
         },
         generateKeypair() {
             this.generateKeypairData.loading = true;
@@ -148,16 +131,25 @@ export default {
                     this.current.publicKey = rs.KEYUTIL.getPEM(rsaKeypair.pubKeyObj)
                     this.generateKeypairData.show = false
                 } catch (e) {
-                    this.$Message.error("秘钥生成失败")
+                    this.$Message.error(this.$t('sign_error',[e.message]).toString())
                 }
                 this.generateKeypairData.loading = false;
             }, 500)
         },
-        openGenerateKeypairBloack() {
+        openGenerateKeypairBlock() {
             this.generateKeypairData.show = true;
             this.generateKeypairData.loading = false;
             this.generateKeypairData.type = "PKCS8PRV";
             this.generateKeypairData.length = 2048;
+        },
+        resize(height){
+            this.height1 = Math.min(160,Math.ceil(height/2))
+            this.height2 = height - this.height1
+        },
+        copy(type){
+            if ((type in this.current) && this.current[type]){
+                this.$clipboardCopy(this.current[type],true);
+            }
         }
     },
     data() {
@@ -175,7 +167,9 @@ export default {
                 loading: false,
                 length: 2048,
                 type: "PKCS8PRV",
-            }
+            },
+            height1:100,
+            height2:100,
         }
     }
 }
diff --git a/src/views/tool/text.vue b/src/views/tool/text.vue
index 8b8d662f4effc4b43462af64653be2a36c0a5635..e62127321b621ba07eba0fafbb3b65fe3283c409 100644
--- a/src/views/tool/text.vue
+++ b/src/views/tool/text.vue
@@ -1,162 +1,177 @@
 <template>
     <div>
-        <Row :gutter="10">
-            <Col span="14">
-                <Tabs value="content">
-                    <TabPane label="文本内容" name="content">
-                        <Input v-model="current.content" :rows="12" type="textarea" placeholder="内容"></Input>
-                        <option-block style="padding: 0 0">
-                            <FormItem v-if="current.original.length > 0">
-                                <Button type="default" :size="buttonSize"
-                                        @click="[current.content,current.original]=[current.original,current.content]">
-                                    恢复
-                                </Button>
-                            </FormItem>
-                            <FormItem>
-                                <Dropdown @on-click="(item)=>handle(item)" transfer>
-                                    <Button :size="buttonSize" type="primary">
-                                        大小写转换
-                                        <Icon type="ios-arrow-down"></Icon>
-                                    </Button>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem name="upper">全部大写</DropdownItem>
-                                        <DropdownItem name="lower">全部小写</DropdownItem>
-                                        <DropdownItem name="upperLineStart">行首大写</DropdownItem>
-                                        <DropdownItem name="lowerLineStart">行首小写</DropdownItem>
-                                        <DropdownItem name="upperStart">词首大写</DropdownItem>
-                                        <DropdownItem name="lowerStart">词首小写</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                            </FormItem>
-                            <FormItem>
-                                <Dropdown @on-click="(item)=>handle('replacePunctuation',item)" transfer>
-                                    <Button :size="buttonSize" type="primary">
-                                        中英标点替换
-                                        <Icon type="ios-arrow-down"></Icon>
-                                    </Button>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem name="en">中 -> 英</DropdownItem>
-                                        <DropdownItem name="zh">英 -> 中</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                            </FormItem>
-                            <FormItem>
-                                <Dropdown @on-click="(item)=>handle('zhTran',item)" transfer>
-                                    <Button :size="buttonSize" type="primary">
-                                        简繁转换
-                                        <Icon type="ios-arrow-down"></Icon>
-                                    </Button>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem name="simplified">繁 -> 简</DropdownItem>
-                                        <DropdownItem name="traditional">简 -> 繁</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                            </FormItem>
-                        </option-block>
-                        <option-block style="padding: 0 0">
-                            <FormItem>
-                                <Button :size="buttonSize" type="primary" @click="replace.show = true">字符替换</Button>
-                            </FormItem>
-                            <FormItem>
-                                <Button :size="buttonSize" type="primary" @click="handle('lineRemoveRepeat')">行去重
-                                </Button>
-                            </FormItem>
-                            <FormItem>
-                                <Dropdown @on-click="(item)=>handle(item)" transfer>
-                                    <Button :size="buttonSize" type="primary">
-                                        增/删行号
-                                        <Icon type="ios-arrow-down"></Icon>
-                                    </Button>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem name="addLineIndex">添加行号</DropdownItem>
-                                        <DropdownItem name="removeLineIndex">移除行号</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                            </FormItem>
-                            <FormItem>
-                                <Dropdown @on-click="(item)=>handle('lineSort',item)" transfer>
-                                    <Button :size="buttonSize" type="primary">
-                                        行排序
-                                        <Icon type="ios-arrow-down"></Icon>
-                                    </Button>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem name="asc">升序</DropdownItem>
-                                        <DropdownItem name="desc">降序</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                            </FormItem>
-                            <FormItem>
-                                <Dropdown @on-click="(item)=>handle(item)" transfer>
-                                    <Button :size="buttonSize" type="primary">
-                                        过滤
-                                        <Icon type="ios-arrow-down"></Icon>
-                                    </Button>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem name="lineTrim">过滤行首尾不可见字符(trim)</DropdownItem>
-                                        <DropdownItem name="filterBlankLine">过滤多余空行</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                            </FormItem>
-                        </option-block>
-                    </TabPane>
-                </Tabs>
-            </Col>
-            <Col span="10">
-                <Tabs value="right">
-                    <TabPane label="统计" name="right">
-                        <Table :columns="statColumns" stripe border size="small" :data="stat">
-                        </Table>
-                    </TabPane>
-                    <Button @click="statExplain.show = true" type="text" slot="extra">
-                        <Icon type="md-help-circle"/>
+        <input-block right="15px" bottom="10px">
+            <heightResize :append="['.page-option-block']">
+                <autoHeightTextarea  v-model="current.content" :placeholder="$t('text_input')"></autoHeightTextarea>
+            </heightResize>
+            <template slot="extra">
+                <Button type="dashed" @click="statShow = true" size="small">
+                    {{ $t('text_stat_show',[stat.word_length,stat.byte_utf8_length,stat.byte_gbk_length]) }}
+                    <Icon type="ios-more" />
+                </Button>
+            </template>
+        </input-block>
+        <option-block class="page-option-block">
+            <FormItem v-if="current.original.length > 0">
+                <Button type="default" :size="buttonSize"
+                        @click="[current.content,current.original]=[current.original,current.content]">
+                    {{ $t('text_resume') }}
+                </Button>
+            </FormItem>
+            <FormItem>
+                <Dropdown @on-click="(item)=>handle(item)" transfer>
+                    <Button :size="buttonSize" type="primary">
+                        {{ $t('text_case_conversion') }}
+                        <Icon type="ios-arrow-down"></Icon>
                     </Button>
-                </Tabs>
-            </Col>
-        </Row>
-        <Modal v-model="statExplain.show" width="600" title="统计说明" class-name="ctool-stat-explain" footer-hide>
-            <Table :columns="statExplain.columns" stripe size="small" :data="statExplain.data"/>
+                    <DropdownMenu slot="list">
+                        <DropdownItem name="upper">{{ $t('text_upper_all') }}</DropdownItem>
+                        <DropdownItem name="lower">{{ $t('text_lower_all') }}</DropdownItem>
+                        <DropdownItem name="upperLineStart">{{ $t('text_upper_line_start') }}</DropdownItem>
+                        <DropdownItem name="lowerLineStart">{{ $t('text_lower_line_start') }}</DropdownItem>
+                        <DropdownItem name="upperStart">{{ $t('text_upper_word_start') }}</DropdownItem>
+                        <DropdownItem name="lowerStart">{{ $t('text_lower_word_start') }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </FormItem>
+            <FormItem>
+                <Dropdown @on-click="(item)=>handle('replacePunctuation',item)" transfer>
+                    <Button :size="buttonSize" type="primary">
+                        {{ $t('text_punctuation') }}
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem name="en">{{ $t('text_cn') }} -> {{ $t('text_en') }}</DropdownItem>
+                        <DropdownItem name="zh">{{ $t('text_en') }} -> {{ $t('text_cn') }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </FormItem>
+            <FormItem>
+                <Dropdown @on-click="(item)=>handle('zhTran',item)" transfer>
+                    <Button :size="buttonSize" type="primary">
+                        {{ $t('text_simplified_traditional') }}
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem name="simplified">{{ $t('text_simplified') }} -> {{ $t('text_traditional') }}</DropdownItem>
+                        <DropdownItem name="traditional">{{ $t('text_traditional') }} -> {{ $t('text_simplified') }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </FormItem>
+            <FormItem>
+                <Button :size="buttonSize" type="primary" @click="replace.show = true">{{ $t('text_replace') }}</Button>
+            </FormItem>
+            <FormItem>
+                <Button :size="buttonSize" type="primary" @click="handle('lineRemoveRepeat')">
+                    {{ $t('text_line_remove_duplicate') }}
+                </Button>
+            </FormItem>
+            <FormItem>
+                <Dropdown @on-click="(item)=>handle(item)" transfer>
+                    <Button :size="buttonSize" type="primary">
+                        {{ $t('text_line_number') }}
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem name="addLineIndex">{{ $t('text_line_number_add') }}</DropdownItem>
+                        <DropdownItem name="removeLineIndex">{{ $t('text_line_number_remove') }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </FormItem>
+            <FormItem>
+                <Dropdown @on-click="(item)=>handle('lineSort',item)" transfer>
+                    <Button :size="buttonSize" type="primary">
+                        {{ $t('text_line_sort') }}
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem name="asc">{{ $t('text_line_sort_asc') }}</DropdownItem>
+                        <DropdownItem name="desc">{{ $t('text_line_sort_desc') }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </FormItem>
+            <FormItem>
+                <Dropdown @on-click="(item)=>handle(item)" transfer>
+                    <Button :size="buttonSize" type="primary">
+                        {{ $t('text_filter') }}
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem name="lineTrim">{{ $t('text_filter_trim') }}</DropdownItem>
+                        <DropdownItem name="filterBlankLine">{{ $t('text_filter_blank_line') }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </FormItem>
+        </option-block>
+        <Modal v-model="statShow" :styles="{top: '20px'}" width="700" footer-hide>
+            <Tabs value="stat">
+                <TabPane :label="$t('text_stat')" name="stat">
+                    <Table :columns="statColumns" stripe border size="small" :data="statTable" />
+                </TabPane>
+                <TabPane :label="$t('text_stat_explain')" name="explain">
+                    <Table :columns="statExplain.columns" border stripe size="small" :data="statExplain.data"/>
+                </TabPane>
+            </Tabs>
         </Modal>
-        <Modal v-model="replace.show" width="400" title="字符替换">
+        <Modal v-model="replace.show" width="400" :title="$t('text_replace')">
             <Form label-position="top">
                 <Row :gutter="16">
                     <Col span="12">
-                        <FormItem label="查找字符">
+                        <FormItem :label="$t('text_replace_search')">
                             <Input v-model="replace.search" :rows="6" type="textarea"></Input>
                         </FormItem>
                     </Col>
                     <Col span="12">
-                        <FormItem label="替换字符">
+                        <FormItem :label="$t('text_replace_replace')">
                             <Input v-model="replace.replace" :rows="6" type="textarea"></Input>
                         </FormItem>
                     </Col>
                 </Row>
             </Form>
-            <Alert>可输入多行, 按行进行批量替换</Alert>
+            <Alert>{{ $t('text_replace_explain') }}</Alert>
             <div slot="footer">
-                <Button type="text" @click="replace.show = false">取消</Button>
-                <Button type="success" @click="replaceRun()">提交</Button>
+                <Button type="text" @click="replace.show = false">{{ $t('text_cancel') }}</Button>
+                <Button type="primary" @click="replaceRun()">{{ $t('text_submit') }}</Button>
             </div>
         </Modal>
     </div>
 </template>
 <script>
 import TextHandle from './library/text'
+import autoHeightTextarea from "./components/autoHeightTextarea";
+import heightResize from "./components/heightResize";
 
 export default {
+    components:{
+        autoHeightTextarea,
+        heightResize
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("content"))
     },
     computed: {
-        stat() {
+        stat(){
+            return TextHandle(this.current.content).stat()
+        },
+        statTable() {
             let stat = TextHandle(this.current.content).stat();
             return [
-                {name: "字符数", value: stat.string_length},
-                {name: "字节数(utf8/gbk)", value: `${stat.byte_utf8_length} / ${stat.byte_gbk_length}`},
-                {name: "字数", value: stat.word_length},
-                {name: "行数", value: stat.line_length},
-                {name: "(中文)字数/标点", value: `${stat.zh_word} / ${stat.zh_punctuation}`},
-                {name: "(英文)字母/单词/标点", value: `${stat.en_string} / ${stat.en_word} / ${stat.en_punctuation}`},
-                {name: "(数字)字符/单词", value: `${stat.int_string} / ${stat.int_word}`},
+                {
+                    name1: this.$t('text_string_length'), value1: stat.string_length,
+                    name2: this.$t('text_byte_length'), value2: `${stat.byte_utf8_length} / ${stat.byte_gbk_length}`
+                },
+                {
+                    name1: this.$t('text_word_length'), value1: stat.word_length,
+                    name2: this.$t('text_line_length'), value2: stat.line_length
+                },
+                {
+                    name1: this.$t('text_zh_length'), value1: `${stat.zh_word} / ${stat.zh_punctuation}`,
+                    name2: this.$t('text_en_length'), value2: `${stat.en_string} / ${stat.en_word} / ${stat.en_punctuation}`
+                },
+                {
+                    name1: this.$t('text_int_length'), value1: `${stat.int_string} / ${stat.int_word}`,
+                    name2: '-', value2: '-'
+                },
             ]
         }
     },
@@ -167,9 +182,9 @@ export default {
                 this.current.original = this.current.content;
                 this.current.content = result;
                 this.$saveToolData(this.current);
-                this.$Message.success("完成")
+                this.$Message.success(this.$t('text_ok').toString())
             } catch (e) {
-                this.$Message.error(e.message)
+                this.$Message.error(this.$t('text_error',[e.message]).toString())
             }
         },
         replaceRun() {
@@ -188,40 +203,48 @@ export default {
                 content: "",
                 original: "",
             },
+            statShow:false,
             statExplain: {
-                show: false,
                 columns: [
                     {
-                        title: '统计项目',
+                        title: this.$t('text_item'),
                         key: 'name',
-                        width: 100
+                        width: 200
                     },
                     {
-                        title: '说明',
+                        title: this.$t('text_explain'),
                         key: 'explain',
                     },
                 ],
                 data: [
-                    {name: "字节数utf8", explain: "中文字符计3个长度"},
-                    {name: "字节数gbk", explain: "中文字符计2个长度"},
-                    {name: "字符数", explain: "中/英文字符均计1个长度 换行符不计入长度"},
-                    {name: "字数", explain: "中文字数+英文单词数+中文标点数+英文标点数+数字单词数"},
-                    // {name: "中文字数/标点",explain:"-"},
-                    // {name: "英文字母/单词/标点",explain:"-"},
-                    {name: "数字字符", explain: "统计单个数字出现次数 例如:'a1024 1024' 结果为:8"},
-                    {name: "数字单词", explain: "例如:'a1024 1024' 结果为:1 其中:'a1024' 为英文单词 '1024' 为数字单词"},
-                    {name: "行数", explain: "空行也会计入行数"},
+                    {name: this.$t('text_explain_byte_length_utf8_name'), explain: this.$t('text_explain_byte_length_utf8_info')},
+                    {name: this.$t('text_explain_byte_length_gbk_name'), explain: this.$t('text_explain_byte_length_gbk_info')},
+                    {name: this.$t('text_explain_string_length_name'), explain: this.$t('text_explain_string_length_info')},
+                    {name: this.$t('text_explain_word_length_name'), explain: this.$t('text_explain_word_length_info')},
+                    {name: this.$t('text_explain_int_length_name'), explain: this.$t('text_explain_int_length_info')},
+                    {name: this.$t('text_explain_int_word_length_name'), explain: this.$t('text_explain_int_word_length_info')},
+                    {name: this.$t('text_explain_blank_line_length_name'), explain: this.$t('text_explain_blank_line_length_info')},
                 ]
             },
             statColumns: [
                 {
-                    title: '统计项目',
-                    key: 'name',
-                    width: 150
+                    title: this.$t('text_item'),
+                    key: 'name1',
+                    width: 200
+                },
+                {
+                    title: this.$t('text_value'),
+                    key: 'value1',
+                    align: "right"
+                },
+                {
+                    title: this.$t('text_item'),
+                    key: 'name2',
+                    width: 200
                 },
                 {
-                    title: '值',
-                    key: 'value',
+                    title: this.$t('text_value'),
+                    key: 'value2',
                     align: "right"
                 },
             ],
@@ -231,7 +254,7 @@ export default {
 }
 </script>
 <style>
-.ctool-stat-explain .ivu-modal-body {
+.ctool-stat-block .ivu-modal-body {
     padding: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/tool/time.vue b/src/views/tool/time.vue
index 34d5ec9b3dbc565ba16ad510fb8f8682d109ca01..06c68e3e9b0b5275e40a5837cb1f1f3155aad12c 100644
--- a/src/views/tool/time.vue
+++ b/src/views/tool/time.vue
@@ -1,25 +1,25 @@
 <template>
     <div>
         <Tabs name="default">
-            <TabPane label="差值计算器" name="default">
+            <TabPane :label="$t('time_diff_tool')" name="default">
                 <option-block>
                     <FormItem>
                         <DatePicker transfer v-model="current.poor.input1" :options="options" type="datetime"
                                     format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                     </FormItem>
                     <FormItem>
-                        与
+                        {{ $t('time_and') }}
                     </FormItem>
                     <FormItem>
                         <DatePicker transfer v-model="current.poor.input2" :options="options" type="datetime"
                                     format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                     </FormItem>
                     <FormItem>
-                        相差
+                        {{ $t('time_diff') }}
                     </FormItem>
                     <FormItem>
                         <Input v-model="poor">
-                            <Select transfer v-model="current.poor.unit" slot="append" style="width: 60px">
+                            <Select transfer v-model="current.poor.unit" slot="append" style="width: 80px">
                                 <Option v-for="v in poorUnit" :value="v.v" :key="v.v">{{ v.n }}</Option>
                             </Select>
                         </Input>
@@ -29,7 +29,7 @@
         </Tabs>
 
         <Tabs name="default">
-            <TabPane label="时间操作" name="default">
+            <TabPane :label="$t('time_operation')" name="default">
                 <option-block>
                     <FormItem>
                         <DatePicker transfer v-model="current.duration.input" :options="options" type="datetime"
@@ -37,19 +37,19 @@
                     </FormItem>
                     <FormItem>
                         <Select transfer v-model="current.duration.type" style="width: 100px">
-                            <Option value="+">添加</Option>
-                            <Option value="-">减少</Option>
+                            <Option value="+">{{ $t('time_add') }}</Option>
+                            <Option value="-">{{ $t('time_reduce') }}</Option>
                         </Select>
                     </FormItem>
                     <FormItem>
                         <Input v-model="current.duration.length" type="number" number>
-                            <Select transfer v-model="current.duration.unit" slot="append" style="width: 60px">
+                            <Select transfer v-model="current.duration.unit" slot="append" style="width: 80px">
                                 <Option v-for="v in poorUnit" :value="v.v" :key="v.v">{{ v.n }}</Option>
                             </Select>
                         </Input>
                     </FormItem>
                     <FormItem>
-                        后, 为 <strong>{{ duration }}</strong>
+                        {{ $t('time_after')}}, {{ $t('time_is') }} <strong>{{ duration }}</strong>
                     </FormItem>
                 </option-block>
             </TabPane>
@@ -78,7 +78,7 @@ export default {
             let result;
             if (rate === 0) {
                 if (!Number.isInteger(this.current.duration.length)){
-                    return "年/月间隔只能是整数";
+                    return this.$t('time_error',[this.$t('time_error_duration_length')])
                 }
                 const type = this.current.duration.type === '+' ? 'add' : 'subtract'
                 result = moment(this.current.duration.input)[type](this.current.duration.length, this.current.duration.unit)
@@ -107,25 +107,25 @@ export default {
             options: {
                 shortcuts: [
                     {
-                        text: '当前时间',
+                        text: this.$t('time_current_time'),
                         value() {
                             return moment().toDate()
                         },
                     },
                     {
-                        text: '当前日期',
+                        text: this.$t('time_current_date'),
                         value() {
                             return moment(moment().format('YYYY-MM-DD')).toDate()
                         },
                     },
                     {
-                        text: '当月日期',
+                        text: this.$t('time_current_month_date'),
                         value() {
                             return moment(moment().format('YYYY-MM-01')).toDate()
                         },
                     },
                     {
-                        text: '当年日期',
+                        text: this.$t('time_current_year_date'),
                         value() {
                             return moment(moment().format('YYYY-01-01')).toDate()
                         },
@@ -133,13 +133,13 @@ export default {
                 ],
             },
             poorUnit: [
-                {v: 'years', n: '年', rate: 0},
-                {v: 'months', n: '月', rate: 0},
-                {v: 'weeks', n: '周', rate: 1000 * 60 * 60 * 24 * 7},
-                {v: 'days', n: '天', rate: 1000 * 60 * 60 * 24},
-                {v: 'hours', n: '小时', rate: 1000 * 60 * 60},
-                {v: 'minutes', n: '分钟', rate: 1000 * 60},
-                {v: 'seconds', n: '秒', rate: 1000},
+                {v: 'years', n: this.$t('time_year'), rate: 0},
+                {v: 'months', n: this.$t('time_month'), rate: 0},
+                {v: 'weeks', n: this.$t('time_week'), rate: 1000 * 60 * 60 * 24 * 7},
+                {v: 'days', n: this.$t('time_day'), rate: 1000 * 60 * 60 * 24},
+                {v: 'hours', n: this.$t('time_hour'), rate: 1000 * 60 * 60},
+                {v: 'minutes', n: this.$t('time_minute'), rate: 1000 * 60},
+                {v: 'seconds', n: this.$t('time_second'), rate: 1000},
             ],
             current: {
                 poor: {
@@ -157,4 +157,4 @@ export default {
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/timestamp.vue b/src/views/tool/timestamp.vue
index fe1415eb862b5f6109bf233d5ce5d57004ab3fd3..6bd1b9b98acab2618a96a998248f6204f854dddd 100644
--- a/src/views/tool/timestamp.vue
+++ b/src/views/tool/timestamp.vue
@@ -1,43 +1,91 @@
 <template>
-  <div>
-    <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容(标准时间(YYYY-MM-DD HH:mm:ss[.SSS])/时间戳(秒/毫秒))"></Input>
-    <option-block>
-      <FormItem>
-          <Button type="primary" @click="handle()">转换</Button>
-          <Dropdown style="margin-left: 10px" @on-click="currentTime">
-            <Button type="primary">
-              当前时间
-              <Icon type="ios-arrow-down"></Icon>
-            </Button>
-            <DropdownMenu slot="list">
-              <DropdownItem name="normalSecond">标准时间(秒)</DropdownItem>
-              <DropdownItem name="normalMillisecond">标准时间(毫秒)</DropdownItem>
-              <DropdownItem name="unixSecond">UNIX时间戳(秒)</DropdownItem>
-              <DropdownItem name="unixMillisecond">UNIX时间戳(毫秒)</DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
-      </FormItem>
-    </option-block>
-    <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-  </div>
+    <heightResize class="tool-timestamp-page">
+        <div class="tool-timestamp-block">
+            <option-block>
+                <input-block bottom="8px" right="8px">
+                    <Input size="large" v-model="current.input">
+                        <span slot="prepend">{{ $t('timestamp_input') }}</span>
+                    </Input>
+                    <template slot="extra">
+                        <Dropdown @on-click="currentTime" transfer>
+                            <Button size="small" type="primary">
+                                {{ $t('timestamp_get') }}
+                                <Icon type="ios-arrow-down"></Icon>
+                            </Button>
+                            <DropdownMenu slot="list">
+                                <DropdownItem name="normalSecond">{{ $t('timestamp_normal_second') }}</DropdownItem>
+                                <DropdownItem name="normalMillisecond">{{ $t('timestamp_normal_millisecond') }}</DropdownItem>
+                                <DropdownItem name="unixSecond">{{ $t('timestamp_unix_second') }}</DropdownItem>
+                                <DropdownItem name="unixMillisecond">{{ $t('timestamp_unix_millisecond') }}</DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </template>
+                </input-block>
+            </option-block>
+            <option-block>
+                <input-block bottom="8px" right="8px">
+                    <Input size="large" :value="output">
+                        <span slot="prepend">{{ $t('timestamp_output') }}</span>
+                    </Input>
+                    <template slot="extra">
+                        <Button size="small" type="primary" @click="()=>copy(output)">{{ $t('timestamp_copy') }}</Button>
+                    </template>
+                </input-block>
+            </option-block>
+            <Table :columns="exampleColumns" stripe border size="small" :data="example">
+                <template slot-scope="{ row }" slot="_value">
+                    <Button size="small" type="text" @click="()=>copy(row.value)">{{ row.value }}</Button>
+                </template>
+            </Table>
+        </div>
+    </heightResize>
 </template>
 <script>
-    import moment from 'moment'
+import moment from 'moment'
+import heightResize from "./components/heightResize";
 
-    let inputType = {
-        'normalSecond': 1,
-        'normalMillisecond': 2,
-        'unixSecond': 3,
-        'unixMillisecond': 4,
-        'error': 0,
-    }
+let inputType = {
+    'normalSecond': 1,
+    'normalMillisecond': 2,
+    'unixSecond': 3,
+    'unixMillisecond': 4,
+    'error': 0,
+}
 
-    export default {
-        created () {
-            this.current = Object.assign(this.current, this.$getToolData('input'))
+export default {
+    components: {
+        heightResize
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData('input'))
+        if (!this.current.input) {
+            this.current.input = moment().format('YYYY-MM-DD HH:mm:ss')
+        }
+    },
+    mounted() {
+        this.timer = setInterval(() => {
+            this.timestamp = moment().format('x')
+        }, 100);
+    },
+    beforeDestroy() {
+        clearInterval(this.timer);
+    },
+    computed: {
+        example() {
+            let time = moment(parseInt(this.timestamp))
+            return [
+                {format: this.$t('timestamp_normal_second'), value: time.format('YYYY-MM-DD HH:mm:ss')},
+                {format: this.$t('timestamp_unix_second'), value: time.format('X')},
+                {format: this.$t('timestamp_normal_millisecond'), value: time.format('YYYY-MM-DD HH:mm:ss.SSS')},
+                {format: this.$t('timestamp_unix_millisecond'), value: time.format('x')},
+            ]
         },
-        methods: {
-            handle () {
+        output() {
+            let result = "";
+            if (!this.current.input) {
+                return result;
+            }
+            try {
                 let type = function (input) {
                     if ((new RegExp(/^\d+-\d+-\d+ \d+:\d+:\d+$/)).test(input)) {
                         return inputType.normalSecond
@@ -54,48 +102,79 @@
                     return inputType.error
                 }(this.current.input.trim())
                 if (type === inputType.error) {
-                    return this.$Message.error('输入时间格式错误')
+                    throw new Error(this.$t('timestamp_error_format').toString())
                 }
                 switch (type) {
                     case inputType.normalSecond:
-                        this.current.output = moment(this.current.input).format('X')
+                        result = moment(this.current.input).format('X')
                         break
                     case inputType.normalMillisecond:
-                        this.current.output = moment(this.current.input).format('x')
+                        result = moment(this.current.input).format('x')
                         break
                     case inputType.unixSecond:
-                        this.current.output = moment(parseInt(this.current.input)*1000).format('YYYY-MM-DD HH:mm:ss')
+                        result = moment(parseInt(this.current.input) * 1000).format('YYYY-MM-DD HH:mm:ss')
                         break
                     case inputType.unixMillisecond:
-                        this.current.output = moment(parseInt(this.current.input)).format('YYYY-MM-DD HH:mm:ss.SSS')
+                        result = moment(parseInt(this.current.input)).format('YYYY-MM-DD HH:mm:ss.SSS')
                         break
                 }
-                this.$clipboardCopy(this.current.output)
                 this.$saveToolData(this.current)
-            },
-            currentTime (type) {
-                if(type === "normalSecond"){
-                    this.current.input = moment().format('YYYY-MM-DD HH:mm:ss')
-                }
-                else if(type === "normalMillisecond"){
-                    this.current.input = moment().format('YYYY-MM-DD HH:mm:ss.SSS')
-                }
-                else if(type === "unixSecond"){
-                    this.current.input = moment().format('X')
-                }
-                else{
-                    this.current.input = moment().format('x')
-                }
-                this.handle();
-            },
+            } catch (e) {
+                result = this.$t('timestamp_error', [e.message])
+            }
+            return result;
+        }
+    },
+    methods: {
+        copy(data) {
+            if (data){
+                this.$clipboardCopy(data, true)
+            }
         },
-        data () {
-            return {
-                current: {
-                    input: '',
-                    output: '',
-                },
+        currentTime(type) {
+            if (type === "normalSecond") {
+                this.current.input = moment().format('YYYY-MM-DD HH:mm:ss')
+            } else if (type === "normalMillisecond") {
+                this.current.input = moment().format('YYYY-MM-DD HH:mm:ss.SSS')
+            } else if (type === "unixSecond") {
+                this.current.input = moment().format('X')
+            } else {
+                this.current.input = moment().format('x')
             }
+            this.handle();
         },
-    }
-</script>
\ No newline at end of file
+    },
+    data() {
+        return {
+            current: {
+                input: ''
+            },
+            timer: null,
+            timestamp: 0,
+            exampleColumns: [
+                {
+                    title: this.$t('timestamp_format'),
+                    key: 'format',
+                    width: 200
+                },
+                {
+                    title: this.$t('timestamp_value'),
+                    slot: '_value',
+                }
+            ]
+        }
+    },
+}
+</script>
+<style>
+.tool-timestamp-page {
+    display: flex;
+    display: -webkit-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tool-timestamp-block {
+    width: 600px;
+}
+</style>
diff --git a/src/views/tool/unicode.vue b/src/views/tool/unicode.vue
index 6bb7a68eae693daa8e48df8c8ed52a95c5d92a0f..e5ea41b339a0a5e73b1ff3d7f5d23f802ebb9152 100644
--- a/src/views/tool/unicode.vue
+++ b/src/views/tool/unicode.vue
@@ -1,35 +1,40 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize :append="['.page-option-block']" ignore @resize="resize">
+        <autoHeightTextarea :height="inputHeight" v-model="current.input" :placeholder="$t('unicode_input')" />
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle('encode')">字符转Unicode(编码)</Button>
-                    <Button type="primary" @click="handle('decode')">Unicode转字符(解码)</Button>
+                    <Button type="primary" @click="handle('encode')">{{ $t('unicode_encode') }}</Button>
+                    <Button type="primary" @click="handle('decode')">{{ $t('unicode_decode') }}</Button>
                 </ButtonGroup>
             </FormItem>
             <FormItem>
                 <Select v-model="current.type" style="width:250px">
-                    <Option value="unicode_point_default">Unicode 默认模式 \u[0-9a-f]{4}</Option>
-                    <Option value="unicode_point_wide">Unicode 宽字符模式 \u[0-9a-f]{4,6}</Option>
-                    <Option value="unicode_point_wide_brace">Unicode 宽字符模式(带大括号) \u{[0-9a-f]{4,6}}</Option>
-                    <Option value="unicode_number">Unicode 编码模式 U+[0-9A-F]{4,6}</Option>
-                    <Option value="html_entity_10">html 实体(10进制) &amp;#[0-9]+;</Option>
-                    <Option value="html_entity_16">html 实体(16进制) &amp;#x[0-9a-f]{1,6};</Option>
-                    <Option value="css_entitie">css 实体(16进制) \[0-9a-f]{4,6}</Option>
+                    <Option value="unicode_point_default">{{ $t('unicode_mode_default') }} \u[0-9a-f]{4}</Option>
+                    <Option value="unicode_point_wide">{{ $t('unicode_mode_wide') }} \u[0-9a-f]{4,6}</Option>
+                    <Option value="unicode_point_wide_brace">{{ $t('unicode_mode_wide_bracket') }} \u{[0-9a-f]{4,6}}</Option>
+                    <Option value="unicode_number">{{ $t('unicode_mode_number') }} U+[0-9A-F]{4,6}</Option>
+                    <Option value="html_entity_10">{{ $t('unicode_mode_html_10') }} &amp;#[0-9]+;</Option>
+                    <Option value="html_entity_16">{{ $t('unicode_mode_html_16') }} &amp;#x[0-9a-f]{1,6};</Option>
+                    <Option value="css_entitie">{{ $t('unicode_mode_css_16') }} \[0-9a-f]{4,6}</Option>
                 </Select>
             </FormItem>
             <FormItem v-if="!disable_ignore_ascii_select.includes(current.type)">
-                <Checkbox v-model="current.ignore_ascii">禁止 ASCII 字符编码</Checkbox>
+                <Checkbox v-model="current.ignore_ascii">{{ $t('unicode_ignore_ascii') }}</Checkbox>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :height="outputHeight" :value="current.output" :placeholder="$t('unicode_output')" />
+    </heightResize>
 </template>
 <script>
 import Unicode from "./library/unicode"
-
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 export default {
+    components:{
+        heightResize,
+        autoHeightTextarea
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
@@ -47,12 +52,16 @@ export default {
                         this.current.output = Unicode.decode(this.current.input, this.current.type);
                     }
                 } catch (e) {
-                    return this.$Message.error(e.message)
+                    return this.$Message.error(this.$t('unicode_error',[e.message]).toString())
                 }
                 this.current.operation = operation;
                 this.$clipboardCopy(this.current.output);
                 this.$saveToolData(this.current);
             }
+        },
+        resize(height){
+            this.inputHeight = Math.ceil(height/2);
+            this.outputHeight = height - this.inputHeight;
         }
     },
     data() {
@@ -64,8 +73,10 @@ export default {
                 type: "unicode_point_default",
                 ignore_ascii: true,
             },
+            inputHeight:100,
+            outputHeight:100,
             disable_ignore_ascii_select: ['unicode_point_wide', 'unicode_number', 'css_entitie']
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/unit.vue b/src/views/tool/unit.vue
index 2d4ade6e5c8a731d299bfc6d286ac891ed48b4a2..ef55ce18df64ae693d60d5cb63693d9fb450048e 100644
--- a/src/views/tool/unit.vue
+++ b/src/views/tool/unit.vue
@@ -2,14 +2,10 @@
     <div>
         <option-block style="text-align: center">
             <FormItem>
-                <ButtonGroup>
-                    <Button :type="current.type === v.key ? 'info' : 'primary'"
-                            @click="handle(v.key)"
-                            v-for="v in unitLists"
-                            style="padding: 5px 10px 6px;"
-                            :key="v.key">{{ v.name }}
-                    </Button>
-                </ButtonGroup>
+                <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">
@@ -18,14 +14,13 @@
             </FormItem>
             <FormItem>
                 <Select v-model="current.from" style="width:200px">
-                    <template v-if="unitGroup.length > 1">
-                        <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
-                            <Option v-for="(unit,k) in group.list" :value="unit.name" :key="k">{{ unit.unit }}</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,k) in unitGroup[0].list" :value="unit.name" :key="k">{{ unit.unit }}
-                        </Option>
+                        <Option v-for="unit in groups[0].list" :value="unit" :key="unit">{{ unitName(unit) }}</Option>
                     </template>
                 </Select>
             </FormItem>
@@ -34,31 +29,30 @@
             </FormItem>
             <FormItem>
                 <Select v-model="current.to" style="width:200px">
-                    <Option value="all">全部</Option>
-                    <template v-if="unitGroup.length > 1">
-                        <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
-                            <Option v-for="(unit,k) in group.list" :value="unit.name" :key="k">{{ unit.unit }}</Option>
+                    <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,k) in unitGroup[0].list" :value="unit.name" :key="k">{{ unit.unit }}
-                        </Option>
+                        <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="current.to !== 'all' && assignResult">
+            <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> {{ current.from }} = <span
-                    style="color: red">{{ assignResult.num }}</span>
-                    {{ current.to }}
+                    <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="(item,k) in result" :key="k">
-                        <Cell :title="item.num" :extra="item.unit"/>
+                    <Col span="12" v-for="(result,unitKey) in output" :key="unitKey">
+                        <Cell :title="result" :extra="unitName(unitKey)"/>
                     </Col>
                 </Row>
             </CellGroup>
@@ -67,58 +61,61 @@
 </template>
 <script>
 import U from './library/unit'
+import {getCurrentLocale} from "../../i18n";
 
 export default {
     created() {
         let history = this.$getToolData()
-        this.current.type = history['type'] ? history['type'] : 'temperature'
-        this.getToolData()
+        this.type = this.current.type = history['type'] ? history['type'] : 'temperature'
+        this.getToolData(this.type)
     },
     computed: {
-        unitGroup() {
-            return U.getData(this.current.type)
+        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
         },
-        result() {
-            let r = []
+        output() {
+            let result = {}
             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,
-                            unit.name
-                        )
-                        r.push({
-                            unit: unit.name,
-                            num: temp.num,
-                        })
-                    })
-                })
+                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
+                    )
+                }
             }
-            return r
+            return result
         },
         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]
+            if (this.current.to !== 'all') {
+                if (this.current.to in this.output) {
+                    return this.output[this.current.to]
                 }
             }
             return null
         }
     },
+    watch:{
+        type(value){
+            this.handle(value)
+        }
+    },
     methods: {
         handle(v) {
-            this.current.type = v
-            this.getToolData()
+            this.getToolData(v)
         },
         saveToolData() {
             let history = this.$getToolData()
@@ -131,13 +128,15 @@ export default {
             }
             this.$saveToolData(history)
         },
-        getToolData() {
-            let type = this.current.type
+        getToolData(type) {
             let history = this.$getToolData()
             let unitHistory = history['data'] && history['data'][type] ? history['data'][type] : null
-            this.current.from = unitHistory ? unitHistory.from : U.getMain(this.current.type)
-            this.current.to = unitHistory ? unitHistory.to : 'all'
-            this.current.input = unitHistory ? unitHistory.input : ''
+            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') {
@@ -146,10 +145,11 @@ export default {
             if (!this.current.from || !this.current.to) {
                 return
             }
-
-            let temp = this.current.from
-            this.current.from = this.current.to
-            this.current.to = temp
+            [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() {
@@ -160,7 +160,7 @@ export default {
                 to: '',
                 input: '',
             },
-            unitLists: U.list(),
+            type:"",
         }
     },
 }
diff --git a/src/views/tool/url.vue b/src/views/tool/url.vue
index a7d611c08f9d9156e158946b2079939a1083f05c..dd4233cdb5e137839697593333b9deec2ed135d5 100644
--- a/src/views/tool/url.vue
+++ b/src/views/tool/url.vue
@@ -1,40 +1,52 @@
 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize :append="['.page-option-block']" ignore @resize="resize">
+        <autoHeightTextarea :height="inputHeight" v-model="current.input" :placeholder="$t('url_input')" />
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle('encode')">编码</Button>
-                    <Button type="primary" @click="handle('decode')">解密</Button>
+                    <Button type="primary" @click="handle('encode')">{{ $t('url_encode') }}</Button>
+                    <Button type="primary" @click="handle('decode')">{{ $t('url_decode') }}</Button>
                 </ButtonGroup>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :height="outputHeight" :value="current.output" :placeholder="$t('url_output')" />
+    </heightResize>
 </template>
 <script>
-    export default {
-        created() {
-            this.current = Object.assign(this.current,this.$getToolData("input"))
-        },
-        methods: {
-            handle(v) {
-                if (this.current.input) {
-                    this.current.output = v === "encode" ? encodeURIComponent(this.current.input) : decodeURIComponent(this.current.input);
-                    this.current.operation = v;
-                    this.$clipboardCopy(this.current.output);
-                    this.$saveToolData(this.current);
-                }
-            }
-        },
-        data() {
-            return {
-                current:{
-                    input: "",
-                    output: "",
-                    operation:""
-                }
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+export default {
+    components:{
+        heightResize,
+        autoHeightTextarea
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData("input"))
+    },
+    methods: {
+        handle(v) {
+            if (this.current.input) {
+                this.current.output = v === "encode" ? encodeURIComponent(this.current.input) : decodeURIComponent(this.current.input);
+                this.current.operation = v;
+                this.$clipboardCopy(this.current.output);
+                this.$saveToolData(this.current);
             }
         },
-    }
-</script>
\ No newline at end of file
+        resize(height){
+            this.inputHeight = Math.min(160,Math.ceil(height/2));
+            this.outputHeight = height - this.inputHeight;
+        }
+    },
+    data() {
+        return {
+            current: {
+                input: "",
+                output: "",
+                operation: ""
+            },
+            inputHeight:100,
+            outputHeight:100,
+        }
+    },
+}
+</script>
diff --git a/src/views/tool/uuid.vue b/src/views/tool/uuid.vue
index 2e4651b34b6b3c087ac8d34919ed72edcf2189a8..b6805579709096786da637088f76f7a326431028 100644
--- a/src/views/tool/uuid.vue
+++ b/src/views/tool/uuid.vue
@@ -1,61 +1,80 @@
 <template>
     <div>
-        <option-block>
-            <FormItem style="width: 140px">
-                <Input v-model="current.amount">
-                    <div slot="prepend">生成数量</div>
+        <option-block class="page-option-block">
+            <FormItem style="width: 170px">
+                <Input v-model="current.amount" type="number">
+                    <div slot="prepend">{{ $t('uuid_amount') }}</div>
+                    <Button slot="append" icon="md-refresh" @click="handle()"></Button>
                 </Input>
             </FormItem>
             <FormItem style="width: 140px">
                 <Input v-model="current.delimiter">
-                    <div slot="prepend">分隔符</div>
+                    <div slot="prepend">{{ $t('uuid_delimiter') }}</div>
                 </Input>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.filterLine">过滤中划线(-)</Checkbox>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isUpper">大写</Checkbox>
+                <Checkbox v-model="current.hyphens">{{ $t('uuid_hyphens') }}</Checkbox>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.isAddQuote">添加引号</Checkbox>
+                <Checkbox v-model="current.isUpper">{{ $t('uuid_is_upper') }}</Checkbox>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.uint8Array">Uint8 Array</Checkbox>
+                <Checkbox v-model="current.isAddQuote">{{ $t('uuid_is_add_quote') }}</Checkbox>
             </FormItem>
             <FormItem>
-                <Button type="primary" @click="handle()">生成</Button>
+                <Checkbox v-model="current.uint8Array">{{ $t('uuid_uint8_array') }}</Checkbox>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="14" type="textarea" placeholder="结果"></Input>
+        <heightResize :append="['.page-option-block']">
+            <autoHeightTextarea v-model="output" :placeholder="$t('uuid_output')" />
+        </heightResize>
     </div>
 </template>
 <script>
 import {parse as uuidParse, v4 as uuidV4} from 'uuid';
-
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 export default {
+    components:{
+        heightResize,
+        autoHeightTextarea
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData())
     },
+    mounted() {
+        if (this.current.result.length < 1){
+            this.handle()
+        }
+    },
+    computed:{
+        output(){
+            if (this.current.result.length < 1){
+                return "";
+            }
+            return this.current.result.map((item)=>{
+                if (this.current.uint8Array) {
+                    item = "[" + uuidParse(item).toString() + "]"
+                }
+                if (!this.current.hyphens) {
+                    item = item.replace(/-/g, "")
+                }
+                item = this.current.isUpper ? item.toUpperCase() : item.toLowerCase()
+                if (this.current.isAddQuote){
+                    item = `"${item}"`
+                }
+                return item
+            }).join(this.current.delimiter.replace(/\\n/g, "\n"));
+        }
+    },
     methods: {
         handle() {
             let result = [];
             for (let i = 0, l = this.current.amount; i < l; i++) {
-                result.push(this.current.isAddQuote ? '"' + this.generate() + '"' : this.generate());
+                result.push(uuidV4());
             }
-            this.current.output = result.join(this.current.delimiter.replace(/\\n/g, "\n"));
+            this.current.result = result
             this.$saveToolData(this.current);
-        },
-        generate() {
-            let uuid = uuidV4()
-            if (this.current.uint8Array) {
-                return "[" + uuidParse(uuid).toString() + "]"
-            }
-            if (this.current.filterLine) {
-                uuid = uuid.replace(/-/g, "")
-            }
-            uuid = this.current.isUpper ? uuid.toUpperCase() : uuid.toLowerCase()
-            return uuid;
         }
     },
     data() {
@@ -63,13 +82,13 @@ export default {
             current: {
                 amount: 10,
                 delimiter: ",\\n",
-                filterLine: false,
+                hyphens: true,
                 isAddQuote: false,
                 isUpper: false,
                 uint8Array: false,
-                output: ""
+                result: []
             }
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/variableConversion.vue b/src/views/tool/variableConversion.vue
index 645d1bd394536f2201df99678447a65d995f9e8a..ac2c1ff92915004c10f01cce27ff285ed66c9e27 100644
--- a/src/views/tool/variableConversion.vue
+++ b/src/views/tool/variableConversion.vue
@@ -1,29 +1,29 @@
 <template>
-    <div>
+    <heightResize ignore @resize="resize">
         <Row :gutter="10">
-            <Col span="6" style="margin-top: 10px">
-                <Card :padding="0">
-                    <p slot="title">输入变量名</p>
-                    <template slot="extra">
-                        <Button size="small" type="primary" @click="handle()">转换
-                        </Button>
-                    </template>
-                    <Input v-model="current.input" :rows="4" type="textarea" placeholder="变量名 一行一个"></Input>
-                </Card>
+            <Col span="6">
+                <input-block top="4px" :text="$t('variableConversion_input')">
+                    <autoHeightTextarea :height="height1" v-model="current.input" :placeholder="$t('variableConversion_input_placeholder')" />
+                </input-block>
             </Col>
-            <Col span="6" v-for="(item,key) in resultColumns" :key="key" style="margin-top: 10px">
-                <Card :padding="0">
-                    <p slot="title">{{ item.title }}</p>
-                    <Input v-model="current.output[item.key]" :rows="4" type="textarea"></Input>
-                </Card>
+            <Col span="6" v-for="(item,key) in resultColumns" :key="key" :style="`margin-top: ${key > 2 ? '10px' : '0'}`">
+                <input-block top="4px" type="default" :text="item.title" @on-default-right-bottom-click="()=>copy(item.key)">
+                    <autoHeightTextarea :height="key > 2 ? height2 : height1" :value="output[item.key]" :placeholder="item.title" />
+                </input-block>
             </Col>
         </Row>
-    </div>
+    </heightResize>
 </template>
 <script>
 import varCamelCase from "./library/varCamelCase"
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 
 export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
     computed: {
         resultColumns() {
             return varCamelCase.resultKey.map((item) => {
@@ -33,26 +33,32 @@ export default {
                 }
             });
         },
+        output() {
+            let result = varCamelCase.convent(this.current.input)
+            this.$saveToolData(this.current);
+            return result;
+        }
     },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
     methods: {
-        handle() {
-            if (!this.current.input) {
-                return;
-            }
-            this.current.output = varCamelCase.convent(this.current.input)
-            this.$saveToolData(this.current);
+        copy(type) {
+            this.$clipboardCopy(this.output[type], true);
+        },
+        resize(height) {
+            this.height1 = Math.ceil(height/2);
+            this.height2 = height - this.height1 - 10;
         }
     },
     data() {
         return {
             current: {
-                input: "",
-                output: [],
-            }
+                input: ""
+            },
+            height1: 100,
+            height2: 100
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tool/websocket.vue b/src/views/tool/websocket.vue
index 02250501058e5fc023c393021c727f9fe6842699..975f254d98f2435701e81b8b71c37eee0429cedf 100644
--- a/src/views/tool/websocket.vue
+++ b/src/views/tool/websocket.vue
@@ -1,145 +1,174 @@
 <template>
-    <Row :gutter="10">
-        <Col span="10">
-            <Row :gutter="6">
-                <Col span="18">
-                    <Input v-model="current.url">
+    <div>
+        <Input v-model="current.url" class="page-option-block" style="margin-bottom: 10px">
                         <span slot="prepend">
                             <Badge style="margin-left:10px" :status="status ? 'success' : 'error'"/>
                         </span>
-                    </Input>
-                </Col>
-                <Col span="6">
-                    <Button long v-if="!status" type="success" @click="handle()">连接</Button>
-                    <Button long v-else type="error" @click="handle()">断开</Button>
-                </Col>
-            </Row>
-            <Input style="margin: 10px 0 5px" v-model="sendContent" :rows="14" type="textarea"
-                   placeholder="发送内容"></Input>
-            <Button type="primary" @click="send()" long>发送</Button>
-        </Col>
-        <Col span="14">
-            <Card>
-                <p slot="title">交互内容</p>
-                <template slot="extra">
-                    <Button style="margin-right: 5px" size="small" type="primary" @click="copyAll()">复制全部</Button>
-                    <Button size="small" type="primary" @click="clear()">清空</Button>
-                </template>
-
-                <div class="lists-block" id="log" style="height: 300px;overflow: hidden;overflow-y:auto;">
-                    <div v-for="(item,key) in lists" :key="key">
-                        <div class="item" v-if="item.type === 'send'" style="color:green">
-                            你 {{item.time}}
-                        </div>
-                        <div class="item" v-else-if="item.type === 'accept'" style="color:blue">
-                            服务端 {{item.time}}
-                        </div>
-                        <div class="item" v-else>
-                            {{item.time}}
-                        </div>
-                        <div class="item">
-                            <Icon style="cursor: pointer" type="md-copy" @click="copy(item.content)"/>
-                            {{item.content}}
-                        </div>
-                    </div>
-                </div>
-            </Card>
-        </Col>
-    </Row>
+            <Button slot="append" v-if="!status" @click="handle()">{{ $t('websocket_connect') }}</Button>
+            <Button slot="append" v-else @click="handle()">{{ $t('websocket_close') }}</Button>
+        </Input>
+        <Row :gutter="10">
+            <Col span="10">
+                <input-block top="7px" right="7px">
+                    <heightResize :append="['.page-option-block']">
+                        <autoHeightTextarea v-model="sendContent" :placeholder="$t('websocket_send_content')"/>
+                    </heightResize>
+                    <template slot="extra">
+                        <Button :disabled="!status" type="primary" size="small" @click="send">{{
+                                $t('websocket_send')
+                            }}
+                        </Button>
+                    </template>
+                </input-block>
+            </Col>
+            <Col span="14">
+                <input-block top="7px" right="7px" :text="$t('websocket_send')" @on-default-right-bottom-click="send">
+                    <heightResize :append="['.page-option-block']" @resize="logHeightSet">
+                        <Card>
+                            <div class="lists-block" id="log"
+                                 :style="`height: ${logHeight}px;overflow: hidden;overflow-y:auto;`">
+                                <div v-if="lists.length === 0" style="font-size: 14px;color: #999999">
+                                    {{ $t('websocket_log_content') }}
+                                </div>
+                                <div v-else v-for="(item,key) in lists" :key="key">
+                                    <div class="item" v-if="item.type === 'send'" style="color:green">
+                                        {{ $t('websocket_you') }} {{ item.time }}
+                                    </div>
+                                    <div class="item" v-else-if="item.type === 'accept'" style="color:blue">
+                                        {{ $t('websocket_server') }} {{ item.time }}
+                                    </div>
+                                    <div class="item" v-else>
+                                        {{ item.time }}
+                                    </div>
+                                    <div class="item">
+                                        <Icon style="cursor: pointer" type="md-copy" @click="copy(item.content)"/>
+                                        {{ item.content }}
+                                    </div>
+                                </div>
+                            </div>
+                        </Card>
+                    </heightResize>
+                    <template slot="extra">
+                        <Button style="margin-right: 5px" size="small" type="primary" @click="copyAll()">
+                            {{ $t('websocket_copy') }}
+                        </Button>
+                        <Button size="small" type="primary" @click="clear()">{{ $t('websocket_clear') }}</Button>
+                    </template>
+                </input-block>
+            </Col>
+        </Row>
+    </div>
 </template>
 <script>
-    import moment from 'moment'
+import moment from 'moment'
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
 
-    export default {
-        created() {
-            this.current = Object.assign(this.current, this.$getToolData())
+export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData())
+    },
+    methods: {
+        handle() {
+            if (this.status) {
+                return this.close();
+            }
+            return this.connect();
+        },
+        connect() {
+            if (!this.current.url.trim()) {
+                return
+            }
+            this.$saveToolData(this.current);
+            this.log(this.$t('websocket_connect_start', [this.current.url]).toString())
+            let websocket = new WebSocket(this.current.url);
+            websocket.onopen = (evt) => {
+                this.onOpen(evt)
+            };
+            websocket.onclose = (evt) => {
+                this.onClose(evt)
+            };
+            websocket.onmessage = (evt) => {
+                this.onMessage(evt)
+            };
+            websocket.onerror = (evt) => {
+                this.onError(evt)
+            };
+            this.ws = websocket;
+        },
+        close() {
+            this.log(this.$t('websocket_close_start', [this.current.url]).toString())
+            this.ws.close();
+        },
+        clear() {
+            this.lists = [];
+        },
+        log(content, type = "other") {
+            this.lists.push({content, type, time: moment().format("YYYY-MM-DD HH:mm:ss")});
+            this.$nextTick(() => {
+                let log = document.getElementById('log');
+                log.scrollTop = log.scrollHeight;
+            })
         },
-        methods: {
-            handle() {
-                if (this.status) {
-                    return this.close();
+        copy(s) {
+            this.$clipboardCopy(s);
+        },
+        copyAll() {
+            this.copy(JSON.stringify(this.lists));
+        },
+        send() {
+            try {
+                if (!this.status) {
+                    throw new Error(this.$t('websocket_error_connect').toString())
                 }
-                return this.connect();
-            },
-            connect() {
-                let websocket = new WebSocket(this.current.url);
-                websocket.onopen = (evt) => {
-                    this.onOpen(evt)
-                };
-                websocket.onclose = (evt) => {
-                    this.onClose(evt)
-                };
-                websocket.onmessage = (evt) => {
-                    this.onMessage(evt)
-                };
-                websocket.onerror = (evt) => {
-                    this.onError(evt)
-                };
-                this.ws = websocket;
-            },
-            close() {
-                this.ws.close();
-            },
-            clear() {
-                this.lists = [];
-            },
-            log(content, type = "other") {
-                this.lists.push({content, type,time:moment().format("YYYY-MM-DD HH:mm:ss")});
-                this.$nextTick(() => {
-                    let log = document.getElementById('log');
-                    log.scrollTop = log.scrollHeight;
-                })
-            },
-            copy(s) {
-                this.$clipboardCopy(s);
-            },
-            copyAll() {
-                this.copy(JSON.stringify(this.lists));
-            },
-            send() {
-                try {
-                    if (!this.status) {
-                        return this.$Message.error("ws还没有连接，或者连接失败，请检测");
-                    }
-                    if (!this.sendContent) {
-                        return this.$Message.error("发送内容不能为空");
-                    }
-                    this.ws.send(this.sendContent);
-                    this.log(this.sendContent, 'send')
-                } catch (e) {
-                    this.log('错误异常: ' + e)
+                if (!this.sendContent) {
+                    throw new Error(this.$t('websocket_error_content').toString())
                 }
-            },
-            onOpen() {
-                this.status = true;
-                this.log("连接成功")
-            },
-            onClose() {
-                this.status = false;
-                this.log("连接关闭")
-            },
-            onMessage(evt) {
-                this.log(evt.data, 'accept')
-            },
-            onError(evt) {
-                this.log('错误异常: ' + evt.data())
+                this.ws.send(this.sendContent);
+                this.log(this.sendContent, 'send')
+            } catch (e) {
+                this.log(this.$t('websocket_error', [e.message]).toString())
             }
         },
-        data() {
-            return {
-                current: {
-                    url: "wss://echo.websocket.org",
-                },
-                status: false,
-                wx: null,
-                sendContent: "",
-                lists: [],
-            }
+        onOpen() {
+            this.status = true;
+            this.log(this.$t('websocket_connect_ok').toString())
+        },
+        onClose() {
+            this.status = false;
+            this.log(this.$t('websocket_close_ok').toString())
         },
-    }
+        onMessage(evt) {
+            this.log(evt.data, 'accept')
+        },
+        onError(evt) {
+            this.log(this.$t('websocket_error', [evt.data()]).toString())
+        },
+        logHeightSet(height) {
+            this.logHeight = Math.max(height - 34, 100)
+        }
+    },
+    data() {
+        return {
+            current: {
+                url: "wss://echo.websocket.events",
+            },
+            status: false,
+            wx: null,
+            sendContent: "",
+            lists: [],
+            logHeight: 100,
+        }
+    },
+}
 </script>
 <style scoped>
-    .lists-block {
-        font-size: 12px;
-    }
+.lists-block {
+    font-size: 14px;
+    line-height: 28px;
+}
 </style>
diff --git a/vue.config.js b/vue.config.js
index 2107679473bc65f6d0420cc9ab2f17394a9e650c..d2258807ffd422b7b0cc2f959ee56c539055769d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,4 @@
 const adapter = require('./src/tool/adapter');
-const IS_PROD = process.env.NODE_ENV === 'production'
 const pages = {
     tool: {
         entry: 'src/tool.js',
@@ -25,10 +24,26 @@ const config = {
             });
             return args
         })
-        if (IS_PROD){
+        if (process.env.NODE_ENV === 'production'){
             // 独立打包js 防止js文件过大 影响相关平台审核
             config.optimization.splitChunks({
                 cacheGroups: {
+                    codemirror: {
+                        test: /[\\/]node_modules[\\/]codemirror[\\/]/,
+                        name: 'codemirror',
+                        chunks: 'all',
+                        priority: 100,
+                        reuseExistingChunk:true,
+                        enforce:true
+                    },
+                    prettier: {
+                        test: /[\\/]node_modules[\\/](prettier|@prettier|prettier-plugin-sql|sql-formatter)[\\/]/,
+                        name: 'prettier',
+                        chunks: 'all',
+                        priority: 99,
+                        reuseExistingChunk:true,
+                        enforce:true
+                    },
                     prettierParserTypescript: {
                         test: /[\\/]node_modules[\\/]prettier[\\/]parser-typescript\.js/,
                         name: 'prettier-parser-typescript',
@@ -37,11 +52,12 @@ const config = {
                         reuseExistingChunk:true,
                         enforce:true
                     },
-                    i18n: {
-                        test: /[\\/]src[\\/]i18n[\\/]index\.js/,
-                        name: 'i18n',
-                        chunks: 'initial',
+                    nodeSqlQarser: {
+                        test: /[\\/]node_modules[\\/](node-sql-parser)[\\/]/,
+                        name: 'node-sql-qarser',
+                        chunks: 'all',
                         priority: 100,
+                        reuseExistingChunk:true,
                         enforce:true
                     },
                     uglify: {
@@ -54,9 +70,6 @@ const config = {
                 }
             })
         }
-    },
-    configureWebpack:config =>{
-
     }
 };