Skip to content

1
1024程序员开源挑战赛

夜猫逐梦 / 1024程序员开源挑战赛
与 Fork 源项目一致

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 3
Star 1
Fork 0
1
1024程序员开源挑战赛
提交 6050d5cf 编写于 作者: B baiy 提交者： ninecents
浏览文件
操作

添加json处理工具 #22

上级 b0f9f954
隐藏空白更改
内联 并排
Showing with 396 addition and 343 deletion
package-lock.json
浏览文件 @ 6050d5cf
...@@ -3110,6 +3110,11 @@ ...@@ -3110,6 +3110,11 @@
"integrity": "sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=", "integrity": "sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=",
"dev": true "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": { "accepts": {
"version": "1.3.7", "version": "1.3.7",
"resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz", "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
...@@ -4415,6 +4420,11 @@ ...@@ -4415,6 +4420,11 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true "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": { "collection-visit": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "http://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz", "resolved": "http://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz",
...@@ -5471,6 +5481,11 @@ ...@@ -5471,6 +5481,11 @@
"resolved": "https://registry.npm.taobao.org/diff/download/diff-4.0.2.tgz", "resolved": "https://registry.npm.taobao.org/diff/download/diff-4.0.2.tgz",
"integrity": "sha1-YPOuy4nV+uUgwRqhnvwruYKq3n0=" "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": { "diffie-hellman": {
"version": "5.0.3", "version": "5.0.3",
"resolved": "https://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz", "resolved": "https://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz",
...@@ -6535,6 +6550,11 @@ ...@@ -6535,6 +6550,11 @@
"escape-string-regexp": "^1.0.5" "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": { "file-entry-cache": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "http://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-2.0.0.tgz", "resolved": "http://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-2.0.0.tgz",
...@@ -7560,6 +7580,11 @@ ...@@ -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": { "has-flag": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz", "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
...@@ -7820,6 +7845,11 @@ ...@@ -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": { "http-deceiver": {
"version": "1.2.7", "version": "1.2.7",
"resolved": "https://registry.npm.taobao.org/http-deceiver/download/http-deceiver-1.2.7.tgz", "resolved": "https://registry.npm.taobao.org/http-deceiver/download/http-deceiver-1.2.7.tgz",
...@@ -8593,6 +8623,15 @@ ...@@ -8593,6 +8623,15 @@
"graceful-fs": "^4.1.6" "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": { "jsprim": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "http://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz", "resolved": "http://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
...@@ -9384,6 +9423,37 @@ ...@@ -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": { "normalize-package-data": {
"version": "2.5.0", "version": "2.5.0",
"resolved": "http://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz", "resolved": "http://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz",
...@@ -12279,6 +12349,11 @@ ...@@ -12279,6 +12349,11 @@
"util.promisify": "~1.0.0" "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": { "table": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz", "resolved": "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz",
...@@ -12636,6 +12711,11 @@ ...@@ -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": { "unicode-canonical-property-names-ecmascript": {
"version": "1.0.4", "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", "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 @@ ...@@ -12976,6 +13056,15 @@
"integrity": "sha1-JWhhitMcxSX7ggnxXr/85JrmQbM=", "integrity": "sha1-JWhhitMcxSX7ggnxXr/85JrmQbM=",
"dev": true "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": { "vue-eslint-parser": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz", "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
......
package.json
浏览文件 @ 6050d5cf
{ {
"name": "c-tool", "name": "c-tool",
"version": "1.0.2", "version": "1.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve --port 8081", "serve": "vue-cli-service serve --port 8081",
...@@ -15,9 +15,12 @@ ...@@ -15,9 +15,12 @@
"cronstrue": "^1.94.0", "cronstrue": "^1.94.0",
"crypto-js": "^3.3.0", "crypto-js": "^3.3.0",
"diff": "^4.0.2", "diff": "^4.0.2",
"file": "^0.2.2",
"http-build-query": "^0.7.0",
"ipinyinjs": "^1.0.0", "ipinyinjs": "^1.0.0",
"is-url": "^1.2.4", "is-url": "^1.2.4",
"js-base64": "^2.6.3", "js-base64": "^2.6.3",
"jsonlint": "^1.6.3",
"lscache": "^1.3.0", "lscache": "^1.3.0",
"moment": "^2.27.0", "moment": "^2.27.0",
"php-array-reader": "^1.2.0", "php-array-reader": "^1.2.0",
...@@ -27,8 +30,10 @@ ...@@ -27,8 +30,10 @@
"query-string": "^6.13.1", "query-string": "^6.13.1",
"radix.js": "0.0.1", "radix.js": "0.0.1",
"serialize-php": "^1.1.2", "serialize-php": "^1.1.2",
"system": "^2.0.1",
"view-design": "^4.0.0", "view-design": "^4.0.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-codemirror": "^4.0.6",
"vue-prismjs": "^1.2.0", "vue-prismjs": "^1.2.0",
"vue-router": "^3.3.4" "vue-router": "^3.3.4"
}, },
......
src/tool.router.js
浏览文件 @ 6050d5cf
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import {env} from './helper' import { stat } from './helper'
import {stringify as queryStringify} from "query-string";
import user from "./tool/user";
Vue.use(Router) 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 = [ const routes = [
{ {
...@@ -46,10 +26,6 @@ const routes = [ ...@@ -46,10 +26,6 @@ const routes = [
path: '/tool/encrypt', path: '/tool/encrypt',
component: r => require(['./views/tool/encrypt.vue'], r) component: r => require(['./views/tool/encrypt.vue'], r)
}, },
{
path: '/tool/sign',
component: r => require(['./views/tool/sign.vue'], r)
},
{ {
path: '/tool/hash', path: '/tool/hash',
component: r => require(['./views/tool/hash.vue'], r) component: r => require(['./views/tool/hash.vue'], r)
...@@ -59,8 +35,8 @@ const routes = [ ...@@ -59,8 +35,8 @@ const routes = [
component: r => require(['./views/tool/ip.vue'], r) component: r => require(['./views/tool/ip.vue'], r)
}, },
{ {
path: '/tool/serializeConversion', path: '/tool/phpArraySerialize',
component: r => require(['./views/tool/serializeConversion.vue'], r) component: r => require(['./views/tool/phpArraySerialize.vue'], r)
}, },
{ {
path: '/tool/pinyin', path: '/tool/pinyin',
...@@ -70,10 +46,6 @@ const routes = [ ...@@ -70,10 +46,6 @@ const routes = [
path: '/tool/qrCode', path: '/tool/qrCode',
component: r => require(['./views/tool/qrCode.vue'], r) component: r => require(['./views/tool/qrCode.vue'], r)
}, },
{
path: '/tool/barcode',
component: r => require(['./views/tool/barcode.vue'], r)
},
{ {
path: '/tool/randomString', path: '/tool/randomString',
component: r => require(['./views/tool/randomString.vue'], r) component: r => require(['./views/tool/randomString.vue'], r)
...@@ -113,47 +85,15 @@ const routes = [ ...@@ -113,47 +85,15 @@ const routes = [
{ {
path: '/tool/json', path: '/tool/json',
component: r => require(['./views/tool/json.vue'], r) 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') stat('index')
router.afterEach(to => { 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
src/tool/config.js
浏览文件 @ 6050d5cf
import {env} from '../helper' import { env, inArray } from '../helper'
import cache from './cache' 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 () { const badgeIsShow = function () {
return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < BADGE_EXPIRY * 86400
BADGE_EXPIRY * 86400
} }
const getUserCommon = function () { const getUserCommon = function () {
...@@ -30,61 +58,26 @@ const getUserCommon = function () { ...@@ -30,61 +58,26 @@ const getUserCommon = function () {
} }
const setUserCommon = function (tools) { const setUserCommon = function (tools) {
cache.setNoVersion('user_common', tools) cache.setnNoVersion('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
} }
export default { export default {
tool:tool, tool,
saveSetting,
getSetting,
category, category,
setUserCommon, setUserCommon,
getUserCommon, getUserCommon,
getToolByCategory(cat) { getToolByCategory (cat) {
let common = getUserCommon();
return tool.filter((t) => { return tool.filter((t) => {
if (cat === 'common') { 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) {
badgeToolIsShow(tool) { return badgeIsShow() && inArray(tool, BADGE_TOOL)
return badgeIsShow() && BADGE_TOOL.includes(tool)
},
badgeCategoryIsShow(cat) {
return badgeIsShow() && BADGE_CATEGORY.includes(cat)
}, },
} badgeCategoryIsShow (cat) {
return badgeIsShow() && inArray(cat, BADGE_CATEGORY)
}
}
\ No newline at end of file
src/views/tool/code.vue
浏览文件 @ 6050d5cf
<template> <template>
<div> <div>
<heightResize :append="['.page-option-block']"> <div style="border: 1px solid #dcdee2;border-radius: 4px;">
<code-editor ref="editor" v-model="current.content" :language="this.current.lang"></code-editor> <codemirror ref="code" v-model="current.content" :options="options"></codemirror>
</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>
<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> </template>
<script> <script>
import _ from "lodash"; import { codemirror } from 'vue-codemirror'
import codeEditor from "./components/codeEditor"; import formatter from 'code-formatter'
import heightResize from "./components/heightResize"; import 'codemirror/lib/codemirror.css'
export default { import 'codemirror/mode/javascript/javascript.js'
components: { import 'codemirror/mode/htmlmixed/htmlmixed.js'
codeEditor, import 'codemirror/mode/css/css.js'
heightResize import 'codemirror/mode/xml/xml.js'
}, import 'codemirror/mode/sql/sql.js'
computed: { import 'codemirror/addon/fold/foldcode.js'
buttonLang() { import 'codemirror/addon/fold/foldgutter.js'
let data = _.slice(this.lang, 0, 7) import 'codemirror/addon/fold/brace-fold.js'
if (this.current.lang && !data.includes(this.current.lang)) { import 'codemirror/addon/fold/comment-fold.js'
data.push(this.current.lang) 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 },
} computed: {
}, codemirror () {
created() { return this.$refs.code.codemirror
this.$initToolData('content') },
}, },
methods: { methods: {
handle(language) { handle (lang, mode) {
if (this.current.content) { if (this.current.content) {
try { this.current.content = formatter(this.current.content, {
this.current.lang = language; method: this.current.isCompress ? lang+"min" : lang
if (!this.current.isCompress) { })
let option = {tab: this.current.tab} this.codemirror.setOption('mode', mode)
this.$refs.editor.format(language, option); this.current.lang = lang
} else { this.$saveToolData(this.current)
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}`
});
} }
},
},
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() { </script>
return { \ No newline at end of file
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>
src/views/tool/json.vue
浏览文件 @ 6050d5cf
<template> <template>
<div> <div>
<heightResize :append="['.page-option-block']"> <div style="border: 1px solid #dcdee2;border-radius: 4px;">
<code-editor :placeholder="$t('json_input')" v-model="current.content" language="json"></code-editor> <codemirror ref="code" v-model="current.content" :options="options"></codemirror>
</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>
<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> </template>
<script> <script>
import Unicode from "./library/unicode" import { codemirror } from 'vue-codemirror'
import jsonFormatter from "./library/formatter/json" import 'codemirror/lib/codemirror.css'
import codeEditor from "./components/codeEditor"; import 'codemirror/mode/javascript/javascript.js'
import heightResize from "./components/heightResize"; import 'codemirror/addon/fold/foldcode.js'
export default { import 'codemirror/addon/fold/foldgutter.js'
components: { import 'codemirror/addon/fold/brace-fold.js'
codeEditor, import 'codemirror/addon/fold/comment-fold.js'
heightResize import 'codemirror/addon/fold/foldgutter.css'
},
created() { export default {
this.$initToolData('content') components: {
}, codemirror,
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())
}
}, },
operation(type) { created () {
switch (type) { this.current = Object.assign(this.current, this.$getToolData('content'))
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(content) { mounted(){
return Unicode.decode( this.codemirror.setSize(null, 385)
content.replace(/\\U[0-9a-fA-F]{4}/g, (item) => {
// \Uxxxx=>\uxxxx
return item.replace("\\U", "\\u");
})
)
}, },
zh2unicode(content) { computed: {
if (content) { codemirror() {
let newStr = '' return this.$refs.code.codemirror
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 },
} methods: {
}, handle (v) {
data() { if (this.current.content) {
return { switch (v) {
current: { case 'format':
content: '', 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: { unicode2zh () {
'format': this.$t('json_format'), let content = this.current.content
'compress': this.$t('json_compress'), if (content) {
'escape': this.$t('json_escape'), let newStr = ''
'clearEscape': this.$t('json_clear_escape'), let t = 1
'unicode2zh': this.$t('json_unicode_to_zh'), for (let i = 0; i < content.length; i += t) {
'zh2unicode': this.$t('json_zh_to_unicode'), let str = content.charAt(i)
'get': this.$t('json_to_get'), if (str === '\\' && 'u' === content.charAt(i + 1)) {
'getToJson': this.$t('json_get_to_json'), console.log(parseInt(parseInt(content.substr(i + 2, 4), 16).toString(10), 10))
'clear': this.$t('json_clear'), 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 {
</script> current: {
<style scoped> content: '',
.tool-json-button .ivu-btn { },
padding: 0 10px; options: {
} mode: 'application/json',
</style> 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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或