From f1544b65a48016f7093b18b57b3c901703c766e7 Mon Sep 17 00:00:00 2001
From: taoran <taoran0796@163.com>
Date: Mon, 4 Dec 2023 18:33:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=EF=BC=9AURL=E7=BC=96=E7=A0=81/=E8=A7=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/tools.ts                          | 13 ++++++
 src/components/UrlEncode/UrlEncode.vue | 61 ++++++++++++++++++++++++++
 src/router/router.ts                   |  8 ++++
 3 files changed, 82 insertions(+)
 create mode 100644 src/components/UrlEncode/UrlEncode.vue

diff --git a/mock/tools.ts b/mock/tools.ts
index 88928b1..1d37d78 100644
--- a/mock/tools.ts
+++ b/mock/tools.ts
@@ -90,6 +90,15 @@ function getTools() {
       url: '/random_password',
       cateId: 2,
       cate: '开发运维',
+    },
+    {
+      id: 1,
+      title: 'URL编码/解码',
+      logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+      desc: 'URL在线编码解码工具（UrlEncode编码 和 UrlDecode解码）',
+      url: '/urlencode',
+      cateId: 2,
+      cate: '开发运维',
     }
   ]
 }
@@ -116,6 +125,10 @@ function getToolsCate() {
     {
       id: 6,
       title: '查询相关'
+    },
+    {
+      id: 7,
+      title: '其他'
     }
   ]
 }
diff --git a/src/components/UrlEncode/UrlEncode.vue b/src/components/UrlEncode/UrlEncode.vue
new file mode 100644
index 0000000..82c57b5
--- /dev/null
+++ b/src/components/UrlEncode/UrlEncode.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string'
+
+const info = reactive({
+  title: "URL编码/解码",
+  content: '',
+  tranRes: '',
+})
+
+
+//编码
+const toEncode = () => {
+  info.tranRes = ''
+  info.tranRes = encodeURIComponent(info.content)
+}
+
+//解码
+const toDecode = () => {
+  info.tranRes = ''
+  info.tranRes = decodeURIComponent(info.content)
+}
+
+//clear
+const clear = () => {
+  info.content = ''
+  info.tranRes = ''
+}
+
+//copy
+const copyRes = async () => {
+  copy(info.tranRes)
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div>
+      <div>
+        <el-input type="textarea" :rows="8" v-model="info.content"></el-input>
+      </div>
+
+      <div class="mt-4">
+        <el-button type="primary" @click="toEncode">UrlEncode编码</el-button>
+        <el-button type="primary" @click="toDecode">UrlDecode解码</el-button>
+        <el-button type="primary" @click="copyRes">复制结果</el-button>
+        <el-button type="danger" @click="clear">清空内容</el-button>
+      </div>
+
+      <div class="mt-3 min-h-md bg-gray-100 p-3 mb-3">
+        <el-input type="textarea" :rows="8" v-model="info.tranRes"></el-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/router/router.ts b/src/router/router.ts
index abb3a81..8e4d905 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -88,6 +88,14 @@ export const constantRoute = [
       title: "随机密码生成"
     }
   },
+  {
+    path: '/urlencode',
+    component: () => import('@/components/UrlEncode/UrlEncode.vue'),
+    name: 'urlencode',
+    meta: {
+      title: "URL编码/解码"
+    }
+  },
   {
     path: '/404',
     component: () => import('@/components/404/404.vue'),