From 953f7c93ae8d49e3d3116662f6f1137652f69a0a Mon Sep 17 00:00:00 2001
From: baiy <wo@baiy.org>
Date: Mon, 13 Jul 2020 10:52:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0json=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=20#22?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json       |  89 ++++++++++++++++++++
 package.json            |   7 +-
 src/tool.router.js      |   4 +
 src/tool/config.js      |  13 +--
 src/views/tool/code.vue | 103 ++++++++++++++++--------
 src/views/tool/json.vue | 174 ++++++++++++++++++++++++++++++++++++++++
 6 files changed, 350 insertions(+), 40 deletions(-)
 create mode 100644 src/views/tool/json.vue

diff --git a/package-lock.json b/package-lock.json
index afb83b0..148b50b 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 cd1f76b..e779959 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 70b959c..368f720 100644
--- a/src/tool.router.js
+++ b/src/tool.router.js
@@ -81,6 +81,10 @@ const routes = [
     {
         path: '/tool/time',
         component: r => require(['./views/tool/time.vue'], r)
+    },
+    {
+        path: '/tool/json',
+        component: r => require(['./views/tool/json.vue'], r)
     }
 ]
 
diff --git a/src/tool/config.js b/src/tool/config.js
index 15c1870..988d4b0 100644
--- a/src/tool/config.js
+++ b/src/tool/config.js
@@ -6,21 +6,21 @@ export const TOOL_DATA_EXPIRY = 1800
 // 徽章过期时间(天)
 export const BADGE_EXPIRY = 10
 // 分类徽章
-export const BADGE_CATEGORY = ['other']
+export const BADGE_CATEGORY = ['json']
 // 工具徽章
-export const BADGE_TOOL = ['time']
+export const BADGE_TOOL = ['json']
 // 默认常用工具
 export const DEFAULT_COMMON_TOOL = [
-    'hash', 'encrypt', 'base64', 'url', 'timestamp',
+    'hash', 'encrypt', 'json' ,'base64', 'url', 'timestamp',
     'qrCode', 'pinyin', 'ip', 'code', 'unicode',
-    'decimalConvert', 'regex', 'randomString', 'phpArraySerialize',
-    'diffs'
+    'decimalConvert', 'randomString','diffs'
 ]
 
 const category = [
     { 'name': 'common', 'title': '常用工具' },
     { 'name': 'encryption', 'title': '加密解密' },
     { 'name': 'conversion', 'title': '编码转换' },
+    { 'name': 'json', 'title': 'JSON' },
     { 'name': 'other', 'title': '其他工具' },
 ]
 
@@ -28,6 +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': 'url', 'title': 'URL编码', cat: ['conversion'] },
     { 'name': 'timestamp', 'title': '时间戳', cat: ['conversion'] },
     { 'name': 'qrCode', 'title': '二维码', cat: ['other'] },
@@ -38,7 +39,7 @@ const tool = [
     { 'name': 'decimalConvert', 'title': '进制转换', cat: ['conversion'] },
     { 'name': 'regex', 'title': '正则表达式', cat: ['other'] },
     { 'name': 'randomString', 'title': '随机字符生成', cat: ['other'] },
-    { 'name': 'phpArraySerialize', 'title': 'PHP数组/序列化', cat: ['conversion'] },
+    { 'name': 'phpArraySerialize', 'title': 'PHP数组/序列化', cat: ['conversion','json'] },
     { 'name': 'diffs', 'title': '文本差异化对比', cat: ['other'] },
     { 'name': 'crontab', 'title': 'crontab校验', cat: ['other'] },
     { 'name': 'websocket', 'title': 'websocket调试', cat: ['other'] },
diff --git a/src/views/tool/code.vue b/src/views/tool/code.vue
index c227b90..b3aad62 100644
--- a/src/views/tool/code.vue
+++ b/src/views/tool/code.vue
@@ -1,50 +1,87 @@
 <template>
-    <div>
-        <Tabs v-model="operation">
-            <TabPane label="输入代码" name="input">
-                <Input v-model="current.input" :rows="14" type="textarea" placeholder="内容"></Input>
-                <option-block>
-                    <FormItem>
-                        <ButtonGroup>
-                            <Button type="primary" @click="handle(l)" v-for="l in lang" :key="l">{{l}}</Button>
-                        </ButtonGroup>
-                    </FormItem>
-                </option-block>
-            </TabPane>
-            <TabPane :label="'格式化'+(current.lang ? '('+current.lang+')' : '')+''" name="output">
-                <code-highlight :lang="current.lang" :code="this.current.output"></code-highlight>
-            </TabPane>
-        </Tabs>
+  <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 formatter from 'code-formatter' ;
+    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 {
-        created() {
-            this.current = Object.assign(this.current, this.$getToolData("input"))
+        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])
+            }
+        },
+        computed: {
+            codemirror () {
+                return this.$refs.code.codemirror
+            },
         },
         methods: {
-            handle(v){
-                if (this.current.input) {
-                    this.current.output = formatter(this.current.input, {
-                        method: v
-                    });
-                    this.current.lang = v;
-                    this.$saveToolData(this.current);
-                    this.operation = "output";
+            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() {
+        data () {
             return {
                 current: {
-                    input: "",
-                    output: "",
-                    lang: "",
+                    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',
                 },
-                lang: ["js", "html", "css", "json", "xml", "sql"],
-                operation: "input"
             }
         },
     }
diff --git a/src/views/tool/json.vue b/src/views/tool/json.vue
new file mode 100644
index 0000000..07ab471
--- /dev/null
+++ b/src/views/tool/json.vue
@@ -0,0 +1,174 @@
+<template>
+  <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 { 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('content'))
+        },
+        mounted(){
+            this.codemirror.setSize(null, 385)
+        },
+        computed: {
+            codemirror() {
+                return this.$refs.code.codemirror
+            }
+        },
+        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)
+                }
+            },
+            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
+            },
+        },
+        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
-- 
GitLab