提交 03e44ed1 编写于 作者: B baiy 提交者: ninecents

fix

上级 6050d5cf
# 程序开发常用工具
使用过程中的任何问题或者需要新的工具欢迎提交`Issue`,新工具如果可以提供实现代码就完美了O(∩_∩)O
## 先睹为快
![](https://cdn.jsdelivr.net/gh/baiy/Ctool@master/images/v2_1.png)
## 在线使用
<https://baiy.github.io/Ctool/>
## chrome 安装
- 方法1: 在 [Chrome 应用商店](https://chrome.google.com/webstore/detail/ipfcebkfhpkjeikaammlkcnalknjahmh) 安装
- 方法2: [下载 .crx 安装包](https://github.com/baiy/Ctool/releases/latest)
- 方法3: [百度网盘下载](https://pan.baidu.com/s/1mhWbqWC) 安装方法和方法2一致
> 方法2 / 方法3 不定期维护 仅供网络环境特别恶劣的同学使用
>
> [猛戳这里查看手动安装`.crx`教程](http://www.cnplugins.com/tool/outline-install-crx-file.html)
## 微软 Edge 安装
-[微软 Edge 应用商店](https://microsoftedge.microsoft.com/addons/detail/cihekagpnnadjjplgljkmkpcfiopfplc) 安装
## 火狐 Firefox 安装
-[火狐 Firefox 应用商店](https://addons.mozilla.org/zh-CN/firefox/addon/ctool/) 安装
## utools 安装
### 插件中心安装
> 插件中心搜索 `ctool`
## 开发
```
# 安装依赖
npm install
# 调试
npm run serve -adapter=[chrome|edge|utools|firefox|web]
# 编译
npm run build -adapter=[chrome|edge|utools|firefox|web]
// 编译输出目录: `/dist/`
```
## 安装
- 方法1: 在 [Chrome 网上应用店](https://chrome.google.com/webstore/detail/ipfcebkfhpkjeikaammlkcnalknjahmh)安装
- 方法2: [下载 .crx 安装包](https://github.com/baiy/Ctool/releases/latest)手动安装 [猛戳这里查看手动安装教程](http://www.cnplugins.com/tool/outline-install-crx-file.html)
- 方法3: [百度网盘下载](https://pan.baidu.com/s/1mhWbqWC) 安装方法和方法2一致
> 方法3 不定期维护 仅供网络环境特别恶劣的同学使用
## 功能列表
|功能|说明|离线使用|
|---|---|---|
|哈希|`md5`, `sha1`, `sha256`, `sha512`,`sm3`|√|
|加密/解密|`AES`,`DES`,`RC4`,`Rabbit`,`TripleDes`,`sm2`|√|
|BASE64编码|`加密`,`解密`,`支持文件`|√|
|哈希|`md5`, `sha1`, `sha256`, `sha512`|√|
|加密/解密|`AES`,`DES`,`RC4`,`Rabbit`,`TripleDes`|√|
|BASE64编码|`加密`,`解密`|√|
|URL编码|`编码`,`解码`|√|
|时间戳|双向转换|√|
|二维码|`生成`,`解析`|√|
|条形码|`生成`|√|
|汉字转拼音|`声调`,`首字母`,`分隔符`|√|
|IP地址查询|`运营商`,`城市`|×|
|代码格式化|`js`, `ts`, `html`, `css`, `less`, `scss`, `graphql`, `vue`, `angular`, `markdown`, `json5`, `xml`, `yaml`, `sql`, `压缩`|√|
|Unicode|`双向转换`,`emoji`,`html 实体`,`css 实体`|√|
|IP地址查询|`运营商`,`城市`|`×`|
|代码格式化|`js`, `html`, `css`, `xml`, `sql`, `压缩`|√|
|Unicode|双向转换|√|
|进制转换|2-64进制互转|√|
|正则表达式|字符匹配|√|
|随机字符生成器|`批量`,`特殊字符`|√|
|序列化转换|`json`, `xml`, `yaml`, `phpArray`, `phpSerialize`, `properties`|√|
|php数组/序列化|`数组`,`serialize`,`json`|√|
|文本差异化对比|`行`,`单词`,`css`|√|
|crontab校验|`Crontab`,`规则`,`校验`,`例子`|√|
|websocket调试|`websocket`,`在线调试`|×|
|单位换算|`长度`,`面积`,`体积`,`质量`,`温度`,`压力`,`功率`,`功`,`密度`,`力`,`时间`,`速度`,`数据存储`,`角度`|√|
|时间计算器| - |√|
|JSON工具|`格式化`,`校验`,`压缩`,`转义`,`去除转义`,`Unicode转中文`,`中文转Unicode`,`转GET参数`|√|
|UUID|在线生成uuid|√|
|JSON转实体类|`Java`, `C#`, `Go`, `Dart`|√|
|ascii编码转换|`十进制`, `十六进制`, `八进制`, `二进制`, `字符串`|√|
|变量名格式转换|`Var Name`, `var-name`, `VAR_NAME`, `VarName`, `varName`, `var_name`, `var name`|√|
|jwt解码|`header`, `payload`|√|
|Hex/String转换|`hex to string`, `string to hex`, `十六进制转字符串`, `字符串转十六进制`|√|
|文本处理|`大小写转换`, `中英文标点转换`, `简繁转换`, `替换`, `字符统计`, `行去重`, `添加行号`, `行排序`, `过滤行首尾不可见字符`,`过滤空行`|√|
|html编码|`html编码`|√|
|签名/验签|`签名`,`验签`,`RSA`|√|
## 第三方开源库
项目诞生离不开这些优秀的开源程序
- [ajax-request](https://www.npmjs.com/package/ajax-request)
- [code-formatter](https://www.npmjs.com/package/code-formatter)
- [prettier](https://github.com/prettier/prettier)
- [crypto-js](https://www.npmjs.com/package/crypto-js)
- [ipinyinjs](https://www.npmjs.com/package/ipinyinjs)
- [is-url](https://www.npmjs.com/package/is-url)
- [iview](https://www.npmjs.com/package/iview)
- [js-base64](https://www.npmjs.com/package/js-base64)
- [lscache](https://www.npmjs.com/package/lscache)
- [php-array-reader](https://www.npmjs.com/package/php-array-reader)
- [phparr](https://www.npmjs.com/package/phparr)
- [qrcode](https://www.npmjs.com/package/qrcode)
- [qrcode-parser](https://www.npmjs.com/package/qrcode-parser)
- [ipinyinjs](https://www.npmjs.com/package/ipinyinjs)
- [is-url](https://www.npmjs.com/package/is-url)
- [iview](https://www.npmjs.com/package/iview)
- [js-base64](https://www.npmjs.com/package/js-base64)
- [lscache](https://www.npmjs.com/package/lscache)
- [php-array-reader](https://www.npmjs.com/package/php-array-reader)
- [phparr](https://www.npmjs.com/package/phparr)
- [qrcode](https://www.npmjs.com/package/qrcode)
- [qrcode-parser](https://www.npmjs.com/package/qrcode-parser)
- [radix.js](https://www.npmjs.com/package/radix.js)
- [serialize-php](https://www.npmjs.com/package/serialize-php)
- [diff](https://www.npmjs.com/package/diff)
- [vue](https://www.npmjs.com/package/vue)
- [serialize-php](https://www.npmjs.com/package/serialize-php)
- [diff](https://www.npmjs.com/package/diff)
- [vue](https://www.npmjs.com/package/vue)
- [vue-router](https://www.npmjs.com/package/vue-router)
- [taobao](http://ip.taobao.com/)
- [layui](https://github.com/sentsin/layui/)
......@@ -113,15 +63,8 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
- [pconline](http://whois.pconline.com.cn/)
- [moment](https://momentjs.com/)
- [vue-codemirror](https://www.npmjs.com/package/vue-codemirror)
- [sm-crypto](https://github.com/JuneAndGreen/sm-crypto)
- [camelcaseplugin](https://github.com/netnexus/camelcaseplugin)
- [jwt-decode](https://www.npmjs.com/package/jwt-decode)
- [jian_fan](https://www.npmjs.com/package/jian_fan)
- [axios](https://www.npmjs.com/package/axios)
- [monaco-editor](https://www.npmjs.com/package/monaco-editor)
- [js-htmlencode](https://www.npmjs.com/package/js-htmlencode)
- [jsrsasign](https://www.npmjs.com/package/jsrsasign)
- [vue-color](https://github.com/xiaokaike/vue-color.git)
- [jsbarcode](https://github.com/lindell/JsBarcode.git)
> 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢
> 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢
## 先睹为快
![](dome.jpg)
{
"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",
......
......@@ -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": {
......
......@@ -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'
......
......@@ -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'] },
......
......@@ -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])
}
......
<template>
<div>
<option-block class="page-option-block" style="padding: 0 0 0 5px">
<option-block>
<FormItem>
<Input v-model="current.input" :placeholder="$t('ip_input')" style="width:200px"></Input>
<Input v-model="current.input" placeholder="请输入ip地址" style="width:200px"></Input>
</FormItem>
<FormItem>
<ButtonGroup>
<Button type="primary" @click="handle()">{{ $t('ip_query') }}</Button>
<Button type="primary" @click="local()">{{ $t('ip_local') }}</Button>
<Button type="primary" @click="handle()">查询</Button>
<Button type="primary" @click="local()">本地IP</Button>
</ButtonGroup>
</FormItem>
<FormItem>
<Alert>{{ $t('ip_info_source') }} <a href="https://get.geojs.io/" target="_blank">https://get.geojs.io/</a></Alert>
<Alert>ip信息来源 <a href="http://ip.taobao.com/" target="_blank">http://ip.taobao.com/</a></Alert>
</FormItem>
</option-block>
<heightResize :append="['.page-option-block']">
<code-editor v-model="current.output" language="json"></code-editor>
</heightResize>
<div style="border: 1px solid #dcdee2;border-radius: 4px;">
<codemirror ref="code" v-model="current.output" :options="options"></codemirror>
</div>
</div>
</template>
<script>
import axios from "axios"
import _ from "lodash"
import codeEditor from "./components/codeEditor";
import jsonFormatter from "./library/formatter/json";
import heightResize from "./components/heightResize";
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'
<<<<<<< HEAD
export default {
components: {
codeEditor,
heightResize
},
created() {
this.$initToolData('input',(input)=>{
return (
/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(input)
|| input === "localhost"
)
})
},
methods: {
handle() {
if (this.current.input) {
axios({
url: 'https://get.geojs.io/v1/ip/geo.json',
params: this.current.input !== "localhost" ? {ip: this.current.input} : {}
}).then(({data}) => {
this.current.output = jsonFormatter.objectBeautify(_.isArray(data) && data.length < 2 ? data[0] : data);
this.$saveToolData(this.current);
this.$Message.success(this.$t('ip_ok').toString())
}).catch((error) => {
return this.$Message.error(
this.$t('ip_error', [error.message]).toString()
)
});
=======
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) {
......@@ -79,21 +64,23 @@ export default {
local(){
this.current.input = 'localhost';
this.handle()
>>>>>>> 3e57baf... 修复ip查询
}
},
local() {
this.current.input = 'localhost';
this.handle()
}
},
data() {
return {
current: {
input: "",
output: "",
data() {
return {
current:{
input: "",
output: "",
},
options: {
mode: 'application/json',
lineNumbers: true,
lineWrapping: false,
foldGutter: true,
indentUnit: 4,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
},
}
}
},
}
</script>
},
}
</script>
\ No newline at end of file
......@@ -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() {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册