fix

README.md

@@ -19,7 +19,7 @@
 |二维码|`生成`,`解析`|√|
 |汉字转拼音|`声调`,`首字母`,`分隔符`|√|
 |IP地址查询|`运营商`,`城市`|`×`|
-|代码格式化|`js`, `html`, `css`, `json`, `xml`, `sql`|√|
+|代码格式化|`js`, `html`, `css`, `xml`, `sql`, `压缩`|√|
 |Unicode|双向转换|√|
 |进制转换|2-64进制互转|√|
 |正则表达式|字符匹配|√|
@@ -30,6 +30,7 @@
 |websocket调试|`websocket`,`在线调试`|×|
 |单位换算|`长度`,`面积`,`体积`,`质量`,`温度`,`压力`,`功率`,`功`,`密度`,`力`,`时间`,`速度`,`数据存储`,`角度`|√|
 |时间计算器| - |√|
+|JSON工具|`格式化`,`校验`,`压缩`,`转义`,`去除转义`,`Unicode转中文`,`中文转Unicode`,`转GET参数`|√|
 
 ## 第三方开源库
 项目诞生离不开这些优秀的开源程序
@@ -50,7 +51,6 @@
 - [serialize-php](https://www.npmjs.com/package/serialize-php) 
 - [diff](https://www.npmjs.com/package/diff) 
 - [vue](https://www.npmjs.com/package/vue) 
-- [vue-prismjs](https://www.npmjs.com/package/vue-prismjs) 
 - [vue-router](https://www.npmjs.com/package/vue-router)
 - [taobao](http://ip.taobao.com/)
 - [layui](https://github.com/sentsin/layui/)
@@ -62,6 +62,7 @@
 - [qrcodejs](https://github.com/davidshimjs/qrcodejs)
 - [pconline](http://whois.pconline.com.cn/)
 - [moment](https://momentjs.com/)
+- [vue-codemirror](https://www.npmjs.com/package/vue-codemirror)
 
  > 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢
  

package-lock.json

 {
     "name": "c-tool",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -4323,17 +4323,6 @@
             "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
             "dev": true
         },
-        "clipboard": {
-            "version": "2.0.4",
-            "resolved": "http://registry.npm.taobao.org/clipboard/download/clipboard-2.0.4.tgz",
-            "integrity": "sha1-g22v1mzw/qXXHOXVsL9ulYAJES0=",
-            "optional": true,
-            "requires": {
-                "good-listener": "^1.2.2",
-                "select": "^1.1.2",
-                "tiny-emitter": "^2.0.0"
-            }
-        },
         "clipboardy": {
             "version": "2.2.0",
             "resolved": "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.2.0.tgz",
@@ -5442,12 +5431,6 @@
             "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
             "dev": true
         },
-        "delegate": {
-            "version": "3.2.0",
-            "resolved": "http://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz",
-            "integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=",
-            "optional": true
-        },
         "depd": {
             "version": "1.1.2",
             "resolved": "http://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -7507,15 +7490,6 @@
                 }
             }
         },
-        "good-listener": {
-            "version": "1.2.2",
-            "resolved": "http://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz",
-            "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-            "optional": true,
-            "requires": {
-                "delegate": "^3.1.2"
-            }
-        },
         "graceful-fs": {
             "version": "4.2.3",
             "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.3.tgz",
@@ -10681,14 +10655,6 @@
                 "utila": "~0.4"
             }
         },
-        "prismjs": {
-            "version": "1.19.0",
-            "resolved": "https://registry.npm.taobao.org/prismjs/download/prismjs-1.19.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprismjs%2Fdownload%2Fprismjs-1.19.0.tgz",
-            "integrity": "sha1-cTr71Fw7rKSzIVafLfOeF+cp1Nw=",
-            "requires": {
-                "clipboard": "^2.0.0"
-            }
-        },
         "private": {
             "version": "0.1.8",
             "resolved": "http://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
@@ -11493,12 +11459,6 @@
                 "ajv-keywords": "^3.1.0"
             }
         },
-        "select": {
-            "version": "1.1.2",
-            "resolved": "http://registry.npm.taobao.org/select/download/select-1.1.2.tgz",
-            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
-            "optional": true
-        },
         "select-hose": {
             "version": "2.0.0",
             "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -12527,12 +12487,6 @@
             "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
             "dev": true
         },
-        "tiny-emitter": {
-            "version": "2.1.0",
-            "resolved": "http://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
-            "integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=",
-            "optional": true
-        },
         "tinycolor2": {
             "version": "1.4.1",
             "resolved": "http://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz",
@@ -13122,14 +13076,6 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
-        "vue-prismjs": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npm.taobao.org/vue-prismjs/download/vue-prismjs-1.2.0.tgz",
-            "integrity": "sha1-sTf17ZWGhc4f1VymsGgonzNZuLc=",
-            "requires": {
-                "prismjs": "^1.6.0"
-            }
-        },
         "vue-router": {
             "version": "3.3.4",
             "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.4.tgz?cache=0&sync_timestamp=1593769516133&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.4.tgz",

package.json

@@ -34,7 +34,6 @@
         "view-design": "^4.0.0",
         "vue": "^2.6.11",
         "vue-codemirror": "^4.0.6",
-        "vue-prismjs": "^1.2.0",
         "vue-router": "^3.3.4"
     },
     "devDependencies": {

src/components/codeHighlight.vue

-<template>
-    <Prism :language="lang" :code="code" v-if="code"></Prism>
-</template>
-<script>
-    import Prism from 'vue-prismjs'
-    import 'prismjs/themes/prism.css'
-
-    export default {
-        components: {
-            Prism
-        },
-        name: 'codeHighlight',
-        props: {
-            lang: {
-                type: String,
-                default: ""
-            },
-            code: {
-                type: String,
-                default: ""
-            },
-        },
-    };
-</script>

src/tool.js

@@ -3,7 +3,6 @@ import ViewUI from 'view-design'
 import 'view-design/dist/styles/iview.css'
 import router from './tool.router'
 import optionBlock from './components/optionBlock'
-import codeHighlight from './components/codeHighlight'
 import { plugin as modelPlugin } from './tool/model'
 import App from './tool.vue'
 
@@ -11,12 +10,11 @@ Vue.config.productionTip = false
 
 Vue.use(ViewUI)
 Vue.use(modelPlugin)
-Vue.component('option-block', optionBlock)
-Vue.component('code-highlight', codeHighlight);
+Vue.component('option-block', optionBlock);
 
 (function () {
     if (document.body.clientWidth > 900) {
-        console.log("调整窗口大小")
+        console.log('调整窗口大小')
         const page = document.getElementById('page')
         page.style.width = 'auto'
         page.style.padding = '0 50px'

src/tool/config.js

@@ -28,7 +28,7 @@ const tool = [
     { 'name': 'hash', 'title': '哈希(hash)', cat: ['encryption'] },
     { 'name': 'encrypt', 'title': '加密/解密', cat: ['encryption'] },
     { 'name': 'base64', 'title': 'BASE64编码', cat: ['encryption'] },
-    { 'name': 'json', 'title': 'JSON常用工具', cat: ['conversion','json'] },
+    { 'name': 'json', 'title': 'JSON工具', cat: ['conversion','json'] },
     { 'name': 'url', 'title': 'URL编码', cat: ['conversion'] },
     { 'name': 'timestamp', 'title': '时间戳', cat: ['conversion'] },
     { 'name': 'qrCode', 'title': '二维码', cat: ['other'] },

src/views/tool/code.vue

@@ -38,7 +38,7 @@
             this.current = Object.assign(this.current, this.$getToolData('content'))
         },
         mounted () {
-            this.codemirror.setSize(null, 385)
+            this.codemirror.setSize(null, 350)
             if (this.current.lang) {
                 this.codemirror.setOption('mode', this.options[this.current.lang])
             }

src/views/tool/ip.vue

@@ -14,18 +14,37 @@
                 <Alert>ip信息来源 <a href="http://ip.taobao.com/" target="_blank">http://ip.taobao.com/</a></Alert>
             </FormItem>
         </option-block>
-        <div>
-            <code-highlight lang="json" :code="this.current.output"></code-highlight>
+        <div style="border: 1px solid #dcdee2;border-radius: 4px;">
+            <codemirror ref="code" v-model="current.output" :options="options"></codemirror>
         </div>
     </div>
 </template>
 <script>
     import request from "ajax-request"
+    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,
+        },
         created() {
             this.current = Object.assign(this.current,this.$getToolData("input"))
         },
+        mounted(){
+            this.codemirror.setSize(null, 350)
+        },
+        computed: {
+            codemirror() {
+                return this.$refs.code.codemirror
+            }
+        },
         methods: {
             handle() {
                 if (this.current.input) {
@@ -53,6 +72,14 @@
                     input: "",
                     output: "",
                 },
+                options: {
+                    mode: 'application/json',
+                    lineNumbers: true,
+                    lineWrapping: false,
+                    foldGutter: true,
+                    indentUnit: 4,
+                    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+                },
             }
         },
     }

src/views/tool/json.vue

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