添加编码转换工具
This commit is contained in:
@@ -43,7 +43,7 @@ let navTools = {
|
||||
title: '生成随机字符串',
|
||||
desc: '生成随机组合的字符串，可用于密码',
|
||||
component: 'GenRandomStr',
|
||||
update: '20210504',
|
||||
update: '2021-05-04',
|
||||
version: '1',
|
||||
enabled: true
|
||||
},
|
||||
@@ -52,18 +52,20 @@ let navTools = {
|
||||
conversion: {
|
||||
title: '转换',
|
||||
list: {
|
||||
'encode-decode': {
|
||||
title: '编码转换',
|
||||
desc: 'HTML / URI 编码、解码',
|
||||
component: 'ConvertEncodeDecode',
|
||||
update: '2021-11-10',
|
||||
version: '1',
|
||||
enabled: true
|
||||
},
|
||||
'text-structure': {
|
||||
title: '文本结构转换',
|
||||
desc: '横排、竖排、倒序等',
|
||||
component: 'ConvertTextStructure',
|
||||
enabled: false
|
||||
},
|
||||
'uri': {
|
||||
title: 'URI 编码转换',
|
||||
desc: 'URI 编码、解码',
|
||||
component: 'ConvertURI',
|
||||
enabled: false
|
||||
},
|
||||
'timestamp': {
|
||||
title: 'Unix 时间戳转换',
|
||||
desc: 'Unix 时间戳转时间 / 时间转 Unix 时间戳',
|
||||
@@ -100,14 +102,14 @@ let navTools = {
|
||||
'new-window': {
|
||||
title: '新窗口（小窗）中打开',
|
||||
component: 'OtherNewWindow',
|
||||
update: '20210503',
|
||||
update: '2021-05-03',
|
||||
version: '1',
|
||||
enabled: true
|
||||
},
|
||||
'run-js': {
|
||||
title: '执行 JavaScript',
|
||||
component: 'OtherRunJS',
|
||||
update: '20210614',
|
||||
update: '2021-06-14',
|
||||
version: '2',
|
||||
enabled: true
|
||||
},
|
||||
@@ -115,7 +117,7 @@ let navTools = {
|
||||
title: 'WebSocket',
|
||||
desc: 'WebSocket 测试工具',
|
||||
component: 'OtherWebSocket',
|
||||
update: '20211108',
|
||||
update: '2021-11-08',
|
||||
version: '2',
|
||||
enabled: true
|
||||
},
|
||||
|
||||
294
src/components/tools/ConvertEncodeDecode.vue
Normal file
294
src/components/tools/ConvertEncodeDecode.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="tool-elem">
|
||||
|
||||
<div class="ctrl">
|
||||
<div class="title">控制</div>
|
||||
<div class="content">
|
||||
<!-- 文本框高度 -->
|
||||
<div class="item">
|
||||
<span class="label">文本框高度</span>
|
||||
<el-input-number
|
||||
v-model="textHeight"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="10"
|
||||
:step="1"
|
||||
step-strictly
|
||||
></el-input-number>
|
||||
</div>
|
||||
<!-- 转换类型 -->
|
||||
<div class="item">
|
||||
<span class="label">转换类型</span>
|
||||
<el-select v-model="type" size="small">
|
||||
<el-option
|
||||
v-for="item in types"
|
||||
:key="item.name"
|
||||
:label="item.label"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<div class="item">
|
||||
<span class="label">操作</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
plain
|
||||
@click="encode()"
|
||||
>编码</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
plain
|
||||
@click="decode()"
|
||||
>解码</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
plain
|
||||
@click="clear()"
|
||||
>清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inputs">
|
||||
<div class="title">输入</div>
|
||||
<div class="content">
|
||||
<el-input
|
||||
v-model="textInputs"
|
||||
type="textarea"
|
||||
resize="none"
|
||||
:rows="textHeight"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outputs">
|
||||
<div class="title">结果</div>
|
||||
<div class="content">
|
||||
<el-input
|
||||
v-model="textOutputs"
|
||||
type="textarea"
|
||||
resize="none"
|
||||
:rows="textHeight"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
decode as decoderHTML,
|
||||
encode as encoderHTML,
|
||||
} from 'html-entities';
|
||||
|
||||
export default {
|
||||
name: 'ConvertEncodeDecode',
|
||||
data() {
|
||||
return {
|
||||
// 文本框高度
|
||||
textHeight: 5,
|
||||
// 文本框内容
|
||||
textInputs: '',
|
||||
textOutputs: '',
|
||||
// 转换类型
|
||||
type: 'uri-normal',
|
||||
types: [
|
||||
{
|
||||
name: 'html-html5-normal',
|
||||
label: 'HTML（HTML5 普通）'
|
||||
},
|
||||
{
|
||||
name: 'html-html5-deep',
|
||||
label: 'HTML（HTML5 深度）'
|
||||
},
|
||||
{
|
||||
name: 'html-xml-normal',
|
||||
label: 'HTML（XML 普通）'
|
||||
},
|
||||
{
|
||||
name: 'html-xml-deep',
|
||||
label: 'HTML（XML 深度）'
|
||||
},
|
||||
{
|
||||
name: 'uri-normal',
|
||||
label: 'URI / URL（普通）'
|
||||
},
|
||||
{
|
||||
name: 'uri-deep',
|
||||
label: 'URI / URL（深度）'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 清空
|
||||
*/
|
||||
clear() {
|
||||
this.textInputs = '';
|
||||
this.textOutputs = '';
|
||||
},
|
||||
|
||||
/**
|
||||
* 解码
|
||||
*/
|
||||
decode() {
|
||||
var result = null;
|
||||
const type = this.type;
|
||||
|
||||
switch (type) {
|
||||
// HTML
|
||||
case 'html-html5-normal':
|
||||
result = this.htmlDecode('html5');
|
||||
break;
|
||||
case 'html-html5-deep':
|
||||
result = this.htmlDecode('html5');
|
||||
break;
|
||||
case 'html-xml-normal':
|
||||
result = this.htmlDecode('xml');
|
||||
break;
|
||||
case 'html-xml-deep':
|
||||
result = this.htmlDecode('xml');
|
||||
break;
|
||||
// URI
|
||||
case 'uri-normal':
|
||||
result = this.uriDecode(false);
|
||||
break;
|
||||
case 'uri-deep':
|
||||
result = this.uriDecode(true);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.textOutputs = (result || '');
|
||||
},
|
||||
|
||||
/**
|
||||
* 编码
|
||||
*/
|
||||
encode() {
|
||||
var result = null;
|
||||
const type = this.type;
|
||||
|
||||
switch (type) {
|
||||
// HTML
|
||||
case 'html-html5-normal':
|
||||
result = this.htmlEncode('html5', false);
|
||||
break;
|
||||
case 'html-html5-deep':
|
||||
result = this.htmlEncode('html5', true);
|
||||
break;
|
||||
case 'html-xml-normal':
|
||||
result = this.htmlEncode('xml', false);
|
||||
break;
|
||||
case 'html-xml-deep':
|
||||
result = this.htmlEncode('xml', true);
|
||||
break;
|
||||
// URI
|
||||
case 'uri-normal':
|
||||
result = this.uriEncode(false);
|
||||
break;
|
||||
case 'uri-deep':
|
||||
result = this.uriEncode(true);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.textOutputs = (result || '');
|
||||
},
|
||||
|
||||
/**
|
||||
* HTML 解码
|
||||
*
|
||||
* @param {string} type 类型（html5、xml）
|
||||
* @returns {string} 解码后的文本
|
||||
*/
|
||||
htmlDecode(type) {
|
||||
const inputs = this.textInputs;
|
||||
const options = {
|
||||
level: type,
|
||||
};
|
||||
|
||||
return decoderHTML(inputs, options);
|
||||
},
|
||||
|
||||
/**
|
||||
* HTML 编码
|
||||
*
|
||||
* @param {string} type 类型（html5、xml）
|
||||
* @param {boolean} isDeep 是否为深度编码
|
||||
* @returns {string} 编码后的文本
|
||||
*/
|
||||
htmlEncode(type, isDeep) {
|
||||
const inputs = this.textInputs;
|
||||
const options = {
|
||||
level: type,
|
||||
mode: (isDeep ? 'extensive' : 'specialChars'),
|
||||
};
|
||||
|
||||
return encoderHTML(inputs, options);
|
||||
},
|
||||
|
||||
/**
|
||||
* URI 解码
|
||||
*
|
||||
* @param {boolean} isDeep 是否使用 decodeURIComponent
|
||||
* @returns {string} 解码后的文本
|
||||
*/
|
||||
uriDecode(isDeep) {
|
||||
const inputs = this.textInputs;
|
||||
if (isDeep) {
|
||||
return decodeURIComponent(inputs);
|
||||
} else {
|
||||
return decodeURI(inputs);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* URI 编码
|
||||
*
|
||||
* @param {boolean} isDeep 是否使用 encodeURIComponent
|
||||
* @returns {string} 编码后的文本
|
||||
*/
|
||||
uriEncode(isDeep) {
|
||||
const inputs = this.textInputs;
|
||||
if (isDeep) {
|
||||
return encodeURIComponent(inputs);
|
||||
} else {
|
||||
return encodeURI(inputs);
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ctrl {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 12.5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 8px 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -98,15 +98,18 @@ export default {
|
||||
* @param {string} toolName 工具名称
|
||||
*/
|
||||
detailOpen(toolCatrgory, toolName) {
|
||||
var vm = this;
|
||||
// 当前工具信息
|
||||
var info = {};
|
||||
var info = {
|
||||
title: '',
|
||||
update: '',
|
||||
version: '',
|
||||
};
|
||||
// 错误提示
|
||||
var errMsg = `无法打开该工具（分类：${toolCatrgory} 名称：${toolName}）`;
|
||||
|
||||
try {
|
||||
|
||||
info = vm.toolList[toolCatrgory]['list'][toolName];
|
||||
info = this.toolList[toolCatrgory]['list'][toolName];
|
||||
|
||||
if (info === undefined) {
|
||||
throw new Error(errMsg);
|
||||
@@ -115,7 +118,7 @@ export default {
|
||||
} catch (err) {
|
||||
|
||||
console.warn('[打开工具]', err);
|
||||
vm.$message({
|
||||
this.$message({
|
||||
message: errMsg,
|
||||
type: 'warning'
|
||||
});
|
||||
@@ -125,7 +128,7 @@ export default {
|
||||
|
||||
// 禁用
|
||||
if (!info.enabled) {
|
||||
vm.$message({
|
||||
this.$message({
|
||||
message: '该工具未启用',
|
||||
type: 'warning'
|
||||
});
|
||||
@@ -133,12 +136,12 @@ export default {
|
||||
}
|
||||
|
||||
// 更新页面标题
|
||||
vm.utils.changeTitle(info.title);
|
||||
this.utils.changeTitle(info.title);
|
||||
// 更新 drawer 标题
|
||||
vm.detail.title = `${info.title} [${info.version}][${info.update}]`;
|
||||
this.detail.title = `${info.title} [${info.version || '未知'}][${info.update || '未知'}]`;
|
||||
// 路由跳转
|
||||
// 注：当前路由相同时也进行跳转，以更新 query
|
||||
vm.$router.push({
|
||||
this.$router.push({
|
||||
name: 'ToolsDetail',
|
||||
params: {
|
||||
category: toolCatrgory,
|
||||
@@ -148,15 +151,14 @@ export default {
|
||||
console.log('[路由跳转]', err.name);
|
||||
});
|
||||
// 显示 drawer
|
||||
vm.detail.show = true;
|
||||
this.detail.show = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开工具（新标签页）
|
||||
*/
|
||||
detailOpenNewTab() {
|
||||
var url = window.location.href;
|
||||
|
||||
const url = window.location.href;
|
||||
window.open(url, '_blank');
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user