添加编码转换工具

src/assets/js/navTools.js

@@ -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
             },

src/components/tools/ConvertEncodeDecode.vue

@@ -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>

src/views/Tools.vue

@@ -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');
         },