diff --git a/package-lock.json b/package-lock.json
index afb83b0241720074ac80e1898d3b8b8f8a5e8e70..148b50b73f9839738d0a6bb737f34949c5d00573 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3110,6 +3110,11 @@
             "integrity": "sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=",
             "dev": true
         },
+        "JSV": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npm.taobao.org/JSV/download/JSV-4.0.2.tgz",
+            "integrity": "sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c="
+        },
         "accepts": {
             "version": "1.3.7",
             "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
@@ -4415,6 +4420,11 @@
             "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
             "dev": true
         },
+        "codemirror": {
+            "version": "5.55.0",
+            "resolved": "https://registry.npm.taobao.org/codemirror/download/codemirror-5.55.0.tgz?cache=0&sync_timestamp=1592745428423&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcodemirror%2Fdownload%2Fcodemirror-5.55.0.tgz",
+            "integrity": "sha1-I3MfZBKI8gKmhY/ch48xSeDgQ2M="
+        },
         "collection-visit": {
             "version": "1.0.0",
             "resolved": "http://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz",
@@ -5471,6 +5481,11 @@
             "resolved": "https://registry.npm.taobao.org/diff/download/diff-4.0.2.tgz",
             "integrity": "sha1-YPOuy4nV+uUgwRqhnvwruYKq3n0="
         },
+        "diff-match-patch": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.5.tgz",
+            "integrity": "sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc="
+        },
         "diffie-hellman": {
             "version": "5.0.3",
             "resolved": "https://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz",
@@ -6535,6 +6550,11 @@
                 "escape-string-regexp": "^1.0.5"
             }
         },
+        "file": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/file/-/file-0.2.2.tgz",
+            "integrity": "sha1-w9/Y+M81Na5FXCtCPC5SY112tNM="
+        },
         "file-entry-cache": {
             "version": "2.0.0",
             "resolved": "http://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-2.0.0.tgz",
@@ -7560,6 +7580,11 @@
                 }
             }
         },
+        "has-color": {
+            "version": "0.1.7",
+            "resolved": "https://registry.npm.taobao.org/has-color/download/has-color-0.1.7.tgz",
+            "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8="
+        },
         "has-flag": {
             "version": "3.0.0",
             "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
@@ -7820,6 +7845,11 @@
                 }
             }
         },
+        "http-build-query": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/http-build-query/-/http-build-query-0.7.0.tgz",
+            "integrity": "sha512-r5jnQ/PcKzFg2dLJAj9xU8cBHuLubxLli6NiFtziNrDqVwPcjIgioamZszzGOPJq6ekUu+WfIcgsuPqe9MX4Ag=="
+        },
         "http-deceiver": {
             "version": "1.2.7",
             "resolved": "https://registry.npm.taobao.org/http-deceiver/download/http-deceiver-1.2.7.tgz",
@@ -8593,6 +8623,15 @@
                 "graceful-fs": "^4.1.6"
             }
         },
+        "jsonlint": {
+            "version": "1.6.3",
+            "resolved": "https://registry.npm.taobao.org/jsonlint/download/jsonlint-1.6.3.tgz",
+            "integrity": "sha1-y14x78C3gpHQ2GL77wWQCt8hKYg=",
+            "requires": {
+                "JSV": "^4.0.x",
+                "nomnom": "^1.5.x"
+            }
+        },
         "jsprim": {
             "version": "1.4.1",
             "resolved": "http://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
@@ -9384,6 +9423,37 @@
                 }
             }
         },
+        "nomnom": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npm.taobao.org/nomnom/download/nomnom-1.8.1.tgz",
+            "integrity": "sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=",
+            "requires": {
+                "chalk": "~0.4.0",
+                "underscore": "~1.6.0"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "1.0.0",
+                    "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-1.0.0.tgz",
+                    "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg="
+                },
+                "chalk": {
+                    "version": "0.4.0",
+                    "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-0.4.0.tgz",
+                    "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
+                    "requires": {
+                        "ansi-styles": "~1.0.0",
+                        "has-color": "~0.1.0",
+                        "strip-ansi": "~0.1.0"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "0.1.1",
+                    "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-0.1.1.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-0.1.1.tgz",
+                    "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE="
+                }
+            }
+        },
         "normalize-package-data": {
             "version": "2.5.0",
             "resolved": "http://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz",
@@ -12279,6 +12349,11 @@
                 "util.promisify": "~1.0.0"
             }
         },
+        "system": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/system/-/system-2.0.1.tgz",
+            "integrity": "sha512-BwSUSa8LMHZouGadZ34ck3TsrH5s3oMmTKPK+xHdbBnTCZOZMJ38fHGKLAHkBl0PXru1Z4BsymQU4qqvTxWzdQ=="
+        },
         "table": {
             "version": "4.0.2",
             "resolved": "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz",
@@ -12636,6 +12711,11 @@
                 }
             }
         },
+        "underscore": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npm.taobao.org/underscore/download/underscore-1.6.0.tgz",
+            "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
+        },
         "unicode-canonical-property-names-ecmascript": {
             "version": "1.0.4",
             "resolved": "http://registry.npm.taobao.org/unicode-canonical-property-names-ecmascript/download/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -12976,6 +13056,15 @@
             "integrity": "sha1-JWhhitMcxSX7ggnxXr/85JrmQbM=",
             "dev": true
         },
+        "vue-codemirror": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz",
+            "integrity": "sha1-t4a7gNjXYqk6q45G95qBAG8EN8Q=",
+            "requires": {
+                "codemirror": "^5.41.0",
+                "diff-match-patch": "^1.0.0"
+            }
+        },
         "vue-eslint-parser": {
             "version": "2.0.3",
             "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
diff --git a/package.json b/package.json
index cd1f76bca790606d659cd29f66342f55e2479ad3..e7799597a9f797dac56494205ecca72083ee02e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "c-tool",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -15,9 +15,12 @@
         "cronstrue": "^1.94.0",
         "crypto-js": "^3.3.0",
         "diff": "^4.0.2",
+        "file": "^0.2.2",
+        "http-build-query": "^0.7.0",
         "ipinyinjs": "^1.0.0",
         "is-url": "^1.2.4",
         "js-base64": "^2.6.3",
+        "jsonlint": "^1.6.3",
         "lscache": "^1.3.0",
         "moment": "^2.27.0",
         "php-array-reader": "^1.2.0",
@@ -27,8 +30,10 @@
         "query-string": "^6.13.1",
         "radix.js": "0.0.1",
         "serialize-php": "^1.1.2",
+        "system": "^2.0.1",
         "view-design": "^4.0.0",
         "vue": "^2.6.11",
+        "vue-codemirror": "^4.0.6",
         "vue-prismjs": "^1.2.0",
         "vue-router": "^3.3.4"
     },
diff --git a/src/tool.router.js b/src/tool.router.js
index cc7274b8b30b407cc61b3462ba650e706ec9e518..368f7200f8e986fb358380e0ea7bb1ac9177833d 100644
--- a/src/tool.router.js
+++ b/src/tool.router.js
@@ -1,29 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import {env} from './helper'
-import {stringify as queryStringify} from "query-string";
-import user from "./tool/user";
+import { stat } from './helper'
 
 Vue.use(Router)
 
-export const stat = (action, data = {}) => {
-    setTimeout(() => {
-        try {
-            let img = new Image(1, 1);
-            img.src = 'https://www.baiy.org/chrome_tool/stat/?' + queryStringify({
-                v: env('version'),
-                a: action,
-                u: user.uid(),
-                p: env('platform'),
-                r: Math.random(),
-                ...data
-            });
-        } catch (e) {
-            // todo
-        }
-    }, 3000)
-};
-
 // 路由配置
 const routes = [
     {
@@ -46,10 +26,6 @@ const routes = [
         path: '/tool/encrypt',
         component: r => require(['./views/tool/encrypt.vue'], r)
     },
-    {
-        path: '/tool/sign',
-        component: r => require(['./views/tool/sign.vue'], r)
-    },
     {
         path: '/tool/hash',
         component: r => require(['./views/tool/hash.vue'], r)
@@ -59,8 +35,8 @@ const routes = [
         component: r => require(['./views/tool/ip.vue'], r)
     },
     {
-        path: '/tool/serializeConversion',
-        component: r => require(['./views/tool/serializeConversion.vue'], r)
+        path: '/tool/phpArraySerialize',
+        component: r => require(['./views/tool/phpArraySerialize.vue'], r)
     },
     {
         path: '/tool/pinyin',
@@ -70,10 +46,6 @@ const routes = [
         path: '/tool/qrCode',
         component: r => require(['./views/tool/qrCode.vue'], r)
     },
-    {
-        path: '/tool/barcode',
-        component: r => require(['./views/tool/barcode.vue'], r)
-    },
     {
         path: '/tool/randomString',
         component: r => require(['./views/tool/randomString.vue'], r)
@@ -113,47 +85,15 @@ const routes = [
     {
         path: '/tool/json',
         component: r => require(['./views/tool/json.vue'], r)
-    },
-    {
-        path: '/tool/uuid',
-        component: r => require(['./views/tool/uuid.vue'], r)
-    },
-    {
-        path: '/tool/jsonToObject',
-        component: r => require(['./views/tool/jsonToObject.vue'], r)
-    },
-    {
-        path: '/tool/ascii',
-        component: r => require(['./views/tool/ascii.vue'], r)
-    },
-    {
-        path: '/tool/variableConversion',
-        component: r => require(['./views/tool/variableConversion.vue'], r)
-    },
-    {
-        path: '/tool/jwt',
-        component: r => require(['./views/tool/jwt.vue'], r)
-    },
-    {
-        path: '/tool/hexString',
-        component: r => require(['./views/tool/hexString.vue'], r)
-    },
-    {
-        path: '/tool/text',
-        component: r => require(['./views/tool/text.vue'], r)
-    },
-    {
-        path: '/tool/html',
-        component: r => require(['./views/tool/html.vue'], r)
     }
 ]
 
-const router = new Router({routes})
+const router = new Router({ routes })
 
 stat('index')
 
 router.afterEach(to => {
-    stat('tool', {tool: to.path})
+    stat('tool', { tool: to.path })
 })
 
-export default router
+export default router
\ No newline at end of file
diff --git a/src/tool/config.js b/src/tool/config.js
index c6db20551a241cbf94bf0d13753793a62c714cb6..988d4b0f1b3cc68c27a9bb33c92286ba3b2d52a7 100644
--- a/src/tool/config.js
+++ b/src/tool/config.js
@@ -1,27 +1,55 @@
-import {env} from '../helper'
+import { env, inArray } from '../helper'
 import cache from './cache'
 
-const toolConfig = require('../config')
-
 // 工具缓存数据过期时间(秒)
-export const TOOL_DATA_EXPIRY = toolConfig.toolDataExpiry
+export const TOOL_DATA_EXPIRY = 1800
 // 徽章过期时间(天)
-export const BADGE_EXPIRY = toolConfig.badgeExpiry
+export const BADGE_EXPIRY = 10
 // 分类徽章
-export const BADGE_CATEGORY = toolConfig.badgeCategory
+export const BADGE_CATEGORY = ['json']
 // 工具徽章
-export const BADGE_TOOL = toolConfig.badgeTool
+export const BADGE_TOOL = ['json']
 // 默认常用工具
-export const DEFAULT_COMMON_TOOL = toolConfig.defaultCommonTool
+export const DEFAULT_COMMON_TOOL = [
+    'hash', 'encrypt', 'json' ,'base64', 'url', 'timestamp',
+    'qrCode', 'pinyin', 'ip', 'code', 'unicode',
+    'decimalConvert', 'randomString','diffs'
+]
 
-const category = toolConfig.category
+const category = [
+    { 'name': 'common', 'title': '常用工具' },
+    { 'name': 'encryption', 'title': '加密解密' },
+    { 'name': 'conversion', 'title': '编码转换' },
+    { 'name': 'json', 'title': 'JSON' },
+    { 'name': 'other', 'title': '其他工具' },
+]
 
-const tool = toolConfig.tool
+const tool = [
+    { 'name': 'hash', 'title': '哈希(hash)', cat: ['encryption'] },
+    { 'name': 'encrypt', 'title': '加密/解密', cat: ['encryption'] },
+    { 'name': 'base64', 'title': 'BASE64编码', cat: ['encryption'] },
+    { 'name': 'json', 'title': 'JSON常用工具', cat: ['conversion','json'] },
+    { 'name': 'url', 'title': 'URL编码', cat: ['conversion'] },
+    { 'name': 'timestamp', 'title': '时间戳', cat: ['conversion'] },
+    { 'name': 'qrCode', 'title': '二维码', cat: ['other'] },
+    { '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: ['other'] },
+    { 'name': 'randomString', 'title': '随机字符生成', cat: ['other'] },
+    { 'name': 'phpArraySerialize', 'title': 'PHP数组/序列化', cat: ['conversion','json'] },
+    { 'name': 'diffs', 'title': '文本差异化对比', cat: ['other'] },
+    { 'name': 'crontab', 'title': 'crontab校验', cat: ['other'] },
+    { 'name': 'websocket', 'title': 'websocket调试', cat: ['other'] },
+    { 'name': 'unit', 'title': '单位换算', cat: ['other'] },
+    { 'name': 'time', 'title': '时间计算器', cat: ['other'] },
+]
 
 // 徽章是否显示
 const badgeIsShow = function () {
-    return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') <
-        BADGE_EXPIRY * 86400
+    return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < BADGE_EXPIRY * 86400
 }
 
 const getUserCommon = function () {
@@ -30,61 +58,26 @@ const getUserCommon = function () {
 }
 
 const setUserCommon = function (tools) {
-    cache.setNoVersion('user_common', tools)
-}
-
-const getToolDefaultCategory = function (name) {
-    for (let i = 0; i < tool.length; i++) {
-        if (tool[i].name === name) {
-            return tool[i].cat[0]
-        }
-    }
-    return ''
-}
-
-/**
- * @param name
- * @param defaultValue
- * @return {any}
- */
-const getSetting = function (name, defaultValue = null) {
-    let setting = cache.getNoVersion('setting', {})
-    return !setting.hasOwnProperty(name) ? defaultValue : setting[name]
-}
-
-/**
- * @param name
- * @param value
- * @return {boolean}
- */
-const saveSetting = function (name, value) {
-    let setting = cache.getNoVersion('setting', {})
-    setting[name] = value
-    cache.setNoVersion('setting', setting);
-    return true
+    cache.setnNoVersion('user_common', tools)
 }
 
 export default {
-    tool:tool,
-    saveSetting,
-    getSetting,
+    tool,
     category,
     setUserCommon,
     getUserCommon,
-    getToolByCategory(cat) {
-        let common = getUserCommon();
+    getToolByCategory (cat) {
         return tool.filter((t) => {
             if (cat === 'common') {
-                return common.includes(t.name)
+                return inArray(t.name, getUserCommon())
             }
-            return t.cat.includes(cat);
+            return inArray(cat, t.cat)
         })
     },
-    getToolDefaultCategory,
-    badgeToolIsShow(tool) {
-        return badgeIsShow() && BADGE_TOOL.includes(tool)
-    },
-    badgeCategoryIsShow(cat) {
-        return badgeIsShow() && BADGE_CATEGORY.includes(cat)
+    badgeToolIsShow (tool) {
+        return badgeIsShow() && inArray(tool, BADGE_TOOL)
     },
-}
+    badgeCategoryIsShow (cat) {
+        return badgeIsShow() && inArray(cat, BADGE_CATEGORY)
+    }
+}
\ No newline at end of file
diff --git a/src/views/tool/code.vue b/src/views/tool/code.vue
index 251e09417389c3f18812052b9b011cf295d74198..b3aad6246d34d324d26aafe6c5d5f4ef46781cfc 100644
--- a/src/views/tool/code.vue
+++ b/src/views/tool/code.vue
@@ -1,110 +1,88 @@
 <template>
-    <div>
-        <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
-                        :type="current.lang !== item ? 'primary' : 'warning'"
-                        @click="handle(item)"
-                        v-for="item in buttonLang"
-                        :key="item"
-                    >{{ item }}
-                    </Button>
-                </ButtonGroup>
-            </FormItem>
-            <FormItem>
-                <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="$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">{{ $t('code_compress') }}</Checkbox>
-            </FormItem>
-        </option-block>
+  <div>
+    <div style="border: 1px solid #dcdee2;border-radius: 4px;">
+      <codemirror ref="code" v-model="current.content" :options="options"></codemirror>
     </div>
+    <option-block>
+      <FormItem>
+        <ButtonGroup>
+          <Button type="primary" @click="handle(k,v)" v-for="(v,k) in lang" :key="k">{{k}}</Button>
+        </ButtonGroup>
+      </FormItem>
+      <FormItem>
+        <Checkbox v-model="current.isCompress">压缩</Checkbox>
+      </FormItem>
+    </option-block>
+  </div>
 </template>
 <script>
-import _ from "lodash";
-import codeEditor from "./components/codeEditor";
-import heightResize from "./components/heightResize";
-export default {
-    components: {
-        codeEditor,
-        heightResize
-    },
-    computed: {
-        buttonLang() {
-            let data = _.slice(this.lang, 0, 7)
-            if (this.current.lang && !data.includes(this.current.lang)) {
-                data.push(this.current.lang)
+    import { codemirror } from 'vue-codemirror'
+    import formatter from 'code-formatter'
+    import 'codemirror/lib/codemirror.css'
+    import 'codemirror/mode/javascript/javascript.js'
+    import 'codemirror/mode/htmlmixed/htmlmixed.js'
+    import 'codemirror/mode/css/css.js'
+    import 'codemirror/mode/xml/xml.js'
+    import 'codemirror/mode/sql/sql.js'
+    import 'codemirror/addon/fold/foldcode.js'
+    import 'codemirror/addon/fold/foldgutter.js'
+    import 'codemirror/addon/fold/brace-fold.js'
+    import 'codemirror/addon/fold/comment-fold.js'
+    import 'codemirror/addon/fold/foldgutter.css'
+
+    export default {
+        components: {
+            codemirror,
+        },
+        created () {
+            this.current = Object.assign(this.current, this.$getToolData('content'))
+        },
+        mounted () {
+            this.codemirror.setSize(null, 385)
+            if (this.current.lang) {
+                this.codemirror.setOption('mode', this.options[this.current.lang])
             }
-            return data
-        }
-    },
-    created() {
-        this.$initToolData('content')
-    },
-    methods: {
-        handle(language) {
-            if (this.current.content) {
-                try {
-                    this.current.lang = language;
-                    if (!this.current.isCompress) {
-                        let option = {tab: this.current.tab}
-                        this.$refs.editor.format(language, option);
-                    } else {
-                        this.$refs.editor.compress(language);
-                    }
-                    this.$saveToolData(this.current);
-                    return this.$Message.success(this.$t('code_complete').toString());
-                } catch (e) {
-                    console.log(e)
-                    return this.$Modal.error({
-                        title: this.$t('code_error_prompt').toString(),
-                        content: `${e.message}`
-                    });
+        },
+        computed: {
+            codemirror () {
+                return this.$refs.code.codemirror
+            },
+        },
+        methods: {
+            handle (lang, mode) {
+                if (this.current.content) {
+                    this.current.content = formatter(this.current.content, {
+                        method: this.current.isCompress ? lang+"min" : lang
+                    })
+                    this.codemirror.setOption('mode', mode)
+                    this.current.lang = lang
+                    this.$saveToolData(this.current)
                 }
+            },
+        },
+        data () {
+            return {
+                current: {
+                    content: '',
+                    lang: '',
+                    isCompress: false,
+                },
+                options: {
+                    mode: null,
+                    lineNumbers: true,
+                    lineWrapping: false,
+                    foldGutter: true,
+                    indentUnit: 4,
+                    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+                },
+                lang: {
+                    'js': 'text/javascript',
+                    'html': 'text/html',
+                    'css': 'text/css',
+                    'xml': 'application/xml',
+                    'sql': 'text/x-mysql',
+                },
             }
         },
-    },
-    data() {
-        return {
-            current: {
-                content: "",
-                isCompress: false,
-                lang: "",
-                tab: 4,
-            },
-            lang: [
-                "html",
-                "js",
-                "css",
-                "xml",
-                "json",
-                "sql",
-                "yaml",
-                "php",
-                "ts",
-                "java",
-                "scss",
-                "less",
-                "graphql",
-                "markdown",
-                "vue",
-                "angular",
-            ],
-        };
-    },
-};
-</script>
+    }
+</script>
\ No newline at end of file
diff --git a/src/views/tool/json.vue b/src/views/tool/json.vue
index 3be68babdd21a9546a827ad1d69b0279217f2cd3..07ab4713366e0078bc08e70f7a6af415b1d28e3e 100644
--- a/src/views/tool/json.vue
+++ b/src/views/tool/json.vue
@@ -1,126 +1,174 @@
 <template>
-    <div>
-        <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>
-                </ButtonGroup>
-            </FormItem>
-        </option-block>
+  <div>
+    <div style="border: 1px solid #dcdee2;border-radius: 4px;">
+      <codemirror ref="code" v-model="current.content" :options="options"></codemirror>
     </div>
+    <option-block :style="{textAlign:'center'}">
+      <FormItem>
+        <ButtonGroup>
+          <Button type="primary" @click="handle(k)" v-for="(v,k) in type" :key="k">{{v}}</Button>
+        </ButtonGroup>
+      </FormItem>
+    </option-block>
+  </div>
 </template>
 <script>
-import Unicode from "./library/unicode"
-import jsonFormatter from "./library/formatter/json"
-import codeEditor from "./components/codeEditor";
-import heightResize from "./components/heightResize";
-export default {
-    components: {
-        codeEditor,
-        heightResize
-    },
-    created() {
-        this.$initToolData('content')
-    },
-    methods: {
-        handle(v) {
-            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())
-            }
+    import { codemirror } from 'vue-codemirror'
+    import 'codemirror/lib/codemirror.css'
+    import 'codemirror/mode/javascript/javascript.js'
+    import 'codemirror/addon/fold/foldcode.js'
+    import 'codemirror/addon/fold/foldgutter.js'
+    import 'codemirror/addon/fold/brace-fold.js'
+    import 'codemirror/addon/fold/comment-fold.js'
+    import 'codemirror/addon/fold/foldgutter.css'
+
+    export default {
+        components: {
+            codemirror,
         },
-        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
-            }
+        created () {
+            this.current = Object.assign(this.current, this.$getToolData('content'))
         },
-        unicode2zh(content) {
-            return Unicode.decode(
-                content.replace(/\\U[0-9a-fA-F]{4}/g, (item) => {
-                    // \Uxxxx=>\uxxxx
-                    return item.replace("\\U", "\\u");
-                })
-            )
+        mounted(){
+            this.codemirror.setSize(null, 385)
         },
-        zh2unicode(content) {
-            if (content) {
-                let newStr = ''
-                for (let i = 0; i < content.length; i++) {
-                    let str = content.charAt(i)
-                    newStr += /[\u4e00-\u9fa5]/.test(str) ? '\\u' + str.charCodeAt(0).toString(16) : str
-                }
-                return newStr
+        computed: {
+            codemirror() {
+                return this.$refs.code.codemirror
             }
-            return content
-        }
-    },
-    data() {
-        return {
-            current: {
-                content: '',
+        },
+        methods: {
+            handle (v) {
+                if (this.current.content) {
+                    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 = JSON.stringify(JSON.parse(this.current.content), null, 4)
+                            } 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 {
+                                const httpBuildQuery = require('http-build-query');
+                                let content = this.current.content.trim()
+                                if (!content) {
+                                    return
+                                }
+                                require('jsonlint').parse(content)
+                                this.current.content = httpBuildQuery(JSON.parse(this.current.content))
+                            } catch (error) {
+                                this.$Notice.error({
+                                    title: '错误提示',
+                                    desc: error.message,
+                                })
+                                return
+                            }
+                            break
+                        case 'clear':
+                            this.current.content = ''
+                            break
+                        default:
+                            return
+                    }
+                    this.$clipboardCopy(this.current.content)
+                    this.$saveToolData(this.current)
+                }
             },
-            type: {
-                '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'),
+            unicode2zh () {
+                let content = this.current.content
+                if (content) {
+                    let newStr = ''
+                    let t = 1
+                    for (let i = 0; i < content.length; i += t) {
+                        let str = content.charAt(i)
+                        if (str === '\\' && 'u' === content.charAt(i + 1)) {
+                            console.log(parseInt(parseInt(content.substr(i + 2, 4), 16).toString(10), 10))
+                            newStr += String.fromCharCode(
+                                parseInt(
+                                    parseInt(content.substr(i + 2, 4), 16).toString(10),
+                                    10
+                                )
+                            )
+                            t = 6
+                        } else {
+                            t = 1
+                            newStr += str
+                        }
+                    }
+                    return newStr
+                }
+                return content
+            },
+            zh2unicode () {
+                let content = this.current.content
+                if (content) {
+                    let newStr = ''
+                    for (let i = 0; i < content.length; i++) {
+                        let str = content.charAt(i)
+                        newStr += /[\u4e00-\u9fa5]/.test(str) ? '\\u' + str.charCodeAt(0).toString(16) : str
+                    }
+                    return newStr
+                }
+                return content
             },
-        }
-    },
-}
-</script>
-<style scoped>
-.tool-json-button .ivu-btn {
-    padding: 0 10px;
-}
-</style>
+        },
+        data () {
+            return {
+                current: {
+                    content: '',
+                },
+                options: {
+                    mode: 'application/json',
+                    lineNumbers: true,
+                    lineWrapping: false,
+                    foldGutter: true,
+                    indentUnit: 4,
+                    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+                },
+                type: {
+                    'format': '格式化/校验',
+                    'compress': '压缩',
+                    'escape': '转义',
+                    'clearEscape': '去除转义',
+                    'unicode2zh': 'Unicode转中文',
+                    'zh2unicode': '中文转Unicode',
+                    'get': '转GET参数',
+                    'clear': '清空数据',
+                },
+            }
+        },
+    }
+</script>
\ No newline at end of file