From 144c22eb5654299d87b927fdb1312fdb57af9a68 Mon Sep 17 00:00:00 2001
From: osiris <taoran0796@163.com>
Date: Thu, 30 May 2024 17:54:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E5=E4=B8=AA=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- WT解析器
- Http状态码
- html实体转义(#)
- 颜色选择、转换器
- ASCII字形生成器
---
 package.json                                  |   4 +
 pnpm-lock.yaml                                |  33 ++-
 public/images/logo/HtmlEntity.png             | Bin 0 -> 10411 bytes
 public/images/logo/ascii_word_pic.png         | Bin 0 -> 5441 bytes
 public/images/logo/color_picker.png           | Bin 0 -> 8410 bytes
 public/images/logo/http_code.png              | Bin 0 -> 5123 bytes
 public/images/logo/jwt_parse.png              | Bin 0 -> 3895 bytes
 .../Tools/ASCIIWordPic/ASCIIWordPic.vue       | 184 +++++++++++++
 .../Tools/ColorPicker/ColorPicker.vue         | 248 ++++++++++++++++++
 .../Tools/HtmlEntity/HtmlEntity.vue           |  71 +++++
 .../Tools/HttpStatusCode/HttpStatusCode.vue   | 137 ++++++++++
 src/components/Tools/JWT/JWT.vue              |  98 +++++++
 src/components/Tools/tools.ts                 | 107 +++++---
 src/router/router.ts                          |  50 ++++
 src/store/modules/linux.ts                    |  21 --
 src/store/modules/tools.ts                    |  16 +-
 16 files changed, 902 insertions(+), 67 deletions(-)
 create mode 100644 public/images/logo/HtmlEntity.png
 create mode 100644 public/images/logo/ascii_word_pic.png
 create mode 100644 public/images/logo/color_picker.png
 create mode 100644 public/images/logo/http_code.png
 create mode 100644 public/images/logo/jwt_parse.png
 create mode 100644 src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue
 create mode 100644 src/components/Tools/ColorPicker/ColorPicker.vue
 create mode 100644 src/components/Tools/HtmlEntity/HtmlEntity.vue
 create mode 100644 src/components/Tools/HttpStatusCode/HttpStatusCode.vue
 create mode 100644 src/components/Tools/JWT/JWT.vue
 delete mode 100644 src/store/modules/linux.ts

diff --git a/package.json b/package.json
index 92c8acc..b9142b2 100644
--- a/package.json
+++ b/package.json
@@ -26,12 +26,16 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.6.2",
+    "colord": "^2.9.3",
     "default-passive-events": "^2.0.0",
     "echarts": "^5.5.0",
     "element-plus": "^2.4.2",
+    "figlet": "^1.7.0",
     "highlight.js": "^11.9.0",
     "html2canvas": "^1.4.1",
     "imorse": "^1.0.0",
+    "jwt-decode": "^4.0.0",
+    "lodash": "^4.17.21",
     "prismjs": "^1.29.0",
     "qrcode-vue3": "^1.6.8",
     "sass": "^1.69.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44d11f4..402612b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ dependencies:
   axios:
     specifier: ^1.6.2
     version: 1.6.2
+  colord:
+    specifier: ^2.9.3
+    version: 2.9.3
   default-passive-events:
     specifier: ^2.0.0
     version: 2.0.0
@@ -62,6 +65,9 @@ dependencies:
   element-plus:
     specifier: ^2.4.2
     version: 2.4.3(vue@3.3.10)
+  figlet:
+    specifier: ^1.7.0
+    version: 1.7.0
   highlight.js:
     specifier: ^11.9.0
     version: 11.9.0
@@ -71,6 +77,12 @@ dependencies:
   imorse:
     specifier: ^1.0.0
     version: 1.0.0
+  jwt-decode:
+    specifier: ^4.0.0
+    version: 4.0.0
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
   prismjs:
     specifier: ^1.29.0
     version: 1.29.0
@@ -2109,6 +2121,10 @@ packages:
     dev: false
     optional: true
 
+  /colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: false
+
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
@@ -2853,8 +2869,8 @@ packages:
     resolution: {integrity: sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==}
     dev: false
 
-  /dompurify@3.0.6:
-    resolution: {integrity: sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==}
+  /dompurify@3.1.4:
+    resolution: {integrity: sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==}
     dev: false
 
   /domutils@1.7.0:
@@ -3309,6 +3325,12 @@ packages:
       pend: 1.2.0
     dev: false
 
+  /figlet@1.7.0:
+    resolution: {integrity: sha512-gO8l3wvqo0V7wEFLXPbkX83b7MVjRrk1oRLfYlZXol8nEpb/ON9pcKLI4qpBv5YtOTfrINtqb7b40iYY2FTWFg==}
+    engines: {node: '>= 0.4.0'}
+    hasBin: true
+    dev: false
+
   /figures@2.0.0:
     resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
     engines: {node: '>=4'}
@@ -4188,6 +4210,11 @@ packages:
     dev: false
     optional: true
 
+  /jwt-decode@4.0.0:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
+    dev: false
+
   /katex@0.13.24:
     resolution: {integrity: sha512-jZxYuKCma3VS5UuxOx/rFV1QyGSl3Uy/i0kTJF3HgQ5xMinCQVF8Zd4bMY/9aI9b9A2pjIBOsjSSm68ykTAr8w==}
     hasBin: true
@@ -4533,7 +4560,7 @@ packages:
       d3-sankey: 0.12.3
       dagre-d3-es: 7.0.10
       dayjs: 1.11.10
-      dompurify: 3.0.6
+      dompurify: 3.1.4
       elkjs: 0.8.2
       khroma: 2.1.0
       lodash-es: 4.17.21
diff --git a/public/images/logo/HtmlEntity.png b/public/images/logo/HtmlEntity.png
new file mode 100644
index 0000000000000000000000000000000000000000..f612ae22db0debb7abd134e88f2db356c5ba1d32
GIT binary patch
literal 10411
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
E0E}n|p#T5?

literal 0
HcmV?d00001

diff --git a/public/images/logo/ascii_word_pic.png b/public/images/logo/ascii_word_pic.png
new file mode 100644
index 0000000000000000000000000000000000000000..47dbe5a07a1d4249d1f5b8251a91147baebc6724
GIT binary patch
literal 5441
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

literal 0
HcmV?d00001

diff --git a/public/images/logo/color_picker.png b/public/images/logo/color_picker.png
new file mode 100644
index 0000000000000000000000000000000000000000..a20d35589886cf38baed8d36791f1c1e0555b4ff
GIT binary patch
literal 8410
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

literal 0
HcmV?d00001

diff --git a/public/images/logo/http_code.png b/public/images/logo/http_code.png
new file mode 100644
index 0000000000000000000000000000000000000000..80535a956a231538b302004e052e33ddf6c6c355
GIT binary patch
literal 5123
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

literal 0
HcmV?d00001

diff --git a/public/images/logo/jwt_parse.png b/public/images/logo/jwt_parse.png
new file mode 100644
index 0000000000000000000000000000000000000000..196165f8452c0a84b1e69ef651c1ac9ddd1a3123
GIT binary patch
literal 3895
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
PpU5BsJuJFL$CdbBLr2Hw

literal 0
HcmV?d00001

diff --git a/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue b/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue
new file mode 100644
index 0000000..9566d94
--- /dev/null
+++ b/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { reactive,ref,onMounted } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string'
+import figlet from 'figlet';
+const info = reactive({
+  title: "ASCII字形生成器",
+})
+figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });
+
+const content = ref('Tools-Web')
+const contentRes = ref('')
+const fontStyle = ref('Big')
+const options = ref([
+  {
+    value: 'Alpha',
+    label: 'Alpha',
+  },
+  {
+    value: 'Avatar',
+    label: 'Avatar',
+  },
+  {
+    value: 'Banner',
+    label: 'Banner',
+  },
+  {
+    value: 'Banner3-D',
+    label: 'Banner3-D',
+  },
+  {
+    value: 'Basic',
+    label: 'Basic',
+  },
+  {
+    value: 'Bear',
+    label: 'Bear',
+  },
+  {
+    value: 'Big Money-ne',
+    label: 'Big Money-ne',
+  },
+  {
+    value: 'Big',
+    label: 'Big',
+  },
+  {
+    value: 'Block',
+    label: 'Block',
+  },
+  {
+    value: 'Epic',
+    label: 'Epic',
+  },
+  {
+    value: 'Ghost',
+    label: 'Ghost',
+  },
+  {
+    value: 'Knob',
+    label: 'Knob',
+  },
+  {
+    value: 'Linux',
+    label: 'Linux',
+  },
+  {
+    value: 'Mini',
+    label: 'Mini',
+  },
+  {
+    value: 'Mirror',
+    label: 'Mirror',
+  },
+  {
+    value: 'Peaks',
+    label: 'Peaks',
+  },
+  {
+    value: 'Slant',
+    label: 'Slant',
+  },
+  {
+    value: 'Small',
+    label: 'Small',
+  },
+  {
+    value: 'Stellar',
+    label: 'Stellar',
+  },
+  {
+    value: 'Thin',
+    label: 'Thin',
+  },
+  {
+    value: 'Wow',
+    label: 'Wow',
+  },
+])
+
+const gen = () => {
+  figlet(content.value, 
+  {
+    font: fontStyle.value,
+    width: 120,
+    horizontalLayout: "default",
+    verticalLayout: "default",
+    whitespaceBreak: true,
+  }, 
+  function (err, data) {
+    if (err) {
+      console.log(';----', err)
+      return;
+    }
+    contentRes.value = data
+  })
+}
+
+//清空输入框
+const clear = () => {
+  content.value = ''
+  contentRes.value = ''
+}
+
+//copy
+const copyRes = async (resStr: string) => {
+  copy(resStr)
+}
+
+onMounted(() => {
+  gen()
+})
+
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white ">
+      <div class="mb-6">
+        <el-input v-model="content" :rows="4" type="textarea" placeholder="请输入内容"></el-input>
+        <div class="mt-3 flex items-center">
+          <div class="flex items-center mr-3">
+            <el-text>风格</el-text>
+            <el-select
+              v-model="fontStyle"
+              size="default"
+              class="ml-2"
+              @change="gen"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          
+          <el-button type="primary" @click="gen()">生成</el-button>
+          <el-button type="primary" @click="copy(contentRes)">复制结果</el-button>
+          <el-button type="primary" @click="clear">清除</el-button>
+        </div>
+      </div>
+
+      <div>
+        <pre tabindex="0"><code>{{ contentRes }}</code></pre>
+      </div>
+
+
+
+      <!-- <el-divider content-position="left">描述</el-divider>
+      <div>
+        <el-text>
+        </el-text>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/ColorPicker/ColorPicker.vue b/src/components/Tools/ColorPicker/ColorPicker.vue
new file mode 100644
index 0000000..e83e980
--- /dev/null
+++ b/src/components/Tools/ColorPicker/ColorPicker.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { reactive,ref,onMounted } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string'
+import { CopyDocument } from '@element-plus/icons-vue'
+import { colord, extend } from 'colord';
+import cmykPlugin from 'colord/plugins/cmyk';
+import hwbPlugin from 'colord/plugins/hwb';
+import namesPlugin from 'colord/plugins/names';
+import lchPlugin from 'colord/plugins/lch';
+import labPlugin from 'colord/plugins/lab';
+extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin, labPlugin]);
+
+const info = reactive({
+  title: "Color选择器",
+})
+
+const color = ref('#409eff')
+const hex = ref()
+const rgb = ref()
+const hsl = ref()
+const hsv = ref()
+const hwb = ref()
+const lab = ref()
+const lch = ref()
+const cmyk = ref()
+const name = ref()
+
+
+const change = () => {
+  let colorObj = colord(color.value)
+  hex.value = colorObj.toHex()
+  rgb.value = colorObj.toRgbString()
+  hsl.value = colorObj.toHslString()
+  hsv.value = colorObj.toHsv()
+  hwb.value = colorObj.toHwbString()
+  lab.value = colorObj.toLab()
+  lch.value = colorObj.toLchString()
+  cmyk.value = colorObj.toCmykString()
+  name.value = colorObj.toName({ closest: true }) //{ closest: true } 接近的
+  console.log(colorObj.toHslString())
+}
+
+//copy
+const copyRes = async (resStr: string) => {
+  copy(resStr)
+}
+
+
+onMounted(() => {
+  change()
+})
+
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white text-center">
+      <ul class="w-3/4">
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">选择颜色:</div>
+          <div class="w-full text-left">
+            <el-color-picker v-model="color" size="large" @change="change"/>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">Hex:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ hex }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(hex)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">RGB:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ rgb }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(rgb)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">HSL:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ hsl }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(hsl)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">HSV:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ hsv }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(JSON.stringify(hsv))"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">HWB:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ hwb }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(hwb)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">LAB:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ lab }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(JSON.stringify(lab))"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">LCH:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ lch }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(lch)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">CMYK:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ cmyk }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(cmyk)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+
+        <li class='flex items-center mb-3'>
+          <div class="w-36 text-right pr-3">Name:</div>
+          <div class="w-full pl-3 p-1  text-left bg-[#f5f5fb] flex items-center justify-between">
+            <div>
+              {{ name }}
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制到剪贴板"
+              placement="top"
+            >
+              <el-button :icon="CopyDocument" text bg type="primary" @click="copyRes(name)"> </el-button>
+            </el-tooltip>
+          </div>
+        </li>
+      </ul>
+      
+      
+
+      <!-- <el-divider content-position="left">描述</el-divider>
+      <div class="text-left">
+        <el-text>
+          在 CSS 中，颜色无处不在，它可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 Hex 和 RGB，其实表示颜色的方式有很多；
+          <div class="indent-8">
+              - RGB: RGB 值也是我们常用的颜色表示方式。RGB 指的就是红-绿-蓝，这个顺序非常重要。每种颜色使用 0 到 255 之间的数字指定。最常见的 RGB 值黑色：rgb(0,0,0) 和白色：rgb(255,255,255)。RGB表示法使我们以更易读的形式来访问与十六进制值相同的颜色范围。
+          </div>
+          &nbsp;&nbsp;&nbsp;&nbsp;- Hex: 可以使用十六进制值来表示 CSS 中的颜色，这也是我们用的最多的颜色表示方式。十六进制使用 16 个符号表示，使用 0 - 9 表示值 0 到 9，A - F 表示值 10 到 15<br/>
+          &nbsp;&nbsp;&nbsp;&nbsp;- HSL: HSL 全称是 Hue-Saturation-Lightness，分别表示色调、饱和度和亮度。它基于 RGB 色轮的。每种颜色都有一个角度以及饱和度和亮度值的百分比值<br/>
+          &nbsp;&nbsp;&nbsp;&nbsp;- HSV: HSV色彩空间是对传统RGB模型的一种改进，引入了三个主要组件来定义颜色：色调（H）、饱和度（S）和明度（V）。与RGB模型不同，后者基于颜色的主导波长、饱和度和亮度提供了更直观的颜色描述方式。
+          &nbsp;&nbsp;&nbsp;&nbsp;- HWB: HWB 全称为Hue-Whiteness-Blackness，表示色调、白度和黑度。<br/>
+          &nbsp;&nbsp;&nbsp;&nbsp;- LAB: LAB 是一个可以在 Photoshop 等软件中访问的颜色空间，它代表了人类可以看到的整个颜色范围。它使用三个轴表示：亮度、a 轴和b 轴。<br/>
+          &nbsp;&nbsp;&nbsp;&nbsp;- LCH: LCH 代表亮度、色度和色调。它与 Lab 具有相同的 L 值，但不是使用坐标 a* 和 b*，而是使用 C（色度）和 H（色调）。色调可以是 0 到 360 之间的值。色度代表颜色的量，它类似于 HSL 中的饱和度。但是色度值可以超过 100，理论上它是无上限的。<br/>
+          &nbsp;&nbsp;&nbsp;&nbsp;- CMYK: CMYK 代表 Cyan、Magenta、Yellow 和 Key，它们与打印机中的墨水颜色相匹配。虽然屏幕通常以 RGB 来显示颜色，而打印机通常使用青色、品红色、黄色和黑色的组合来表示颜色，这些是最常见的墨水颜色。<br/>
+        </el-text>
+      </div> -->
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/HtmlEntity/HtmlEntity.vue b/src/components/Tools/HtmlEntity/HtmlEntity.vue
new file mode 100644
index 0000000..810fb10
--- /dev/null
+++ b/src/components/Tools/HtmlEntity/HtmlEntity.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { reactive,ref,onMounted } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { escape, unescape } from 'lodash';
+import { copy } from '@/utils/string'
+const info = reactive({
+  title: "HTML实体转义",
+})
+
+const content = ref('')
+const cleanContent = ref('')
+
+const parser = (type: string) => {
+  if (type == 'toHTML') {
+    //转html
+    cleanContent.value = unescape(content.value)
+  } else {
+    //转实体
+    cleanContent.value = escape(content.value)
+  }
+}
+
+//清空输入框
+const clear = () => {
+  content.value = ''
+  cleanContent.value = ''
+}
+
+//copy
+const copyRes = async (resStr: string) => {
+  copy(resStr)
+}
+
+onMounted(() => {
+})
+
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white ">
+      <div class="mb-6">
+        <el-input v-model="content" :rows="10" type="textarea" placeholder="请输入内容" @change="parser"></el-input>
+        <div class="mt-3">
+          <el-button type="primary" @click="parser('toEntity')">HTML转实体</el-button>
+          <el-button type="primary" @click="parser('toHTML')">实体转HTML</el-button>
+          <el-button type="primary" @click="copy(cleanContent)">复制结果</el-button>
+          <el-button type="primary" @click="clear">清除</el-button>
+        </div>
+      </div>
+
+      <div>
+        <el-input v-html="cleanContent" v-model="cleanContent" :rows="10" type="textarea" placeholder="" @change="parser"></el-input>
+      </div>
+
+
+
+      <!-- <el-divider content-position="left">描述</el-divider>
+      <div>
+        <el-text>
+        </el-text>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/HttpStatusCode/HttpStatusCode.vue b/src/components/Tools/HttpStatusCode/HttpStatusCode.vue
new file mode 100644
index 0000000..3ec6bb8
--- /dev/null
+++ b/src/components/Tools/HttpStatusCode/HttpStatusCode.vue
@@ -0,0 +1,137 @@
+<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: "HTTP状态码",
+})
+// ascii: https://ascii.co.uk/table
+const tableDataControlOne = reactive([
+  {code:"100 Continue",desc:"请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分"},
+  {code:"101 Switching Protocols",desc:"请求者已要求服务器切换协议，服务器已确认并准备切换"},
+  {code:"102 Processing",desc:"由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。"},
+])
+
+const tableDataControlTwo = reactive([
+  {code:"200 OK",desc:"服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页"},
+  {code:"201 Created",desc:"请求成功并且服务器创建了新的资源"},
+  {code:"202 Accepted",desc:"服务器已接受请求，但尚未处理"},
+  {code:"203 Non-Authoritative Information",desc:"服务器已成功处理了请求，但返回的信息可能来自另一来源"},
+  {code:"204 No Content",desc:"服务器成功处理了请求，但没有返回任何内容"},
+  {code:"205 Reset Content",desc:"服务器成功处理了请求，且没有返回任何内容。但是与204响应不同，返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后，立即重置表单，以便用户能够轻松地开始另一次输入"},
+  {code:"206 Partial Content",desc:"服务器成功处理了部分 GET 请求"},
+  {code:"207 Multi-Status",desc:"由WebDAV(RFC 2518)扩展的状态码，代表之后的消息体将是一个XML消息，并且可能依照之前子请求数量的不同，包含一系列独立的响应代码"},
+  {code:"208 Already Reported",desc:"一个DAV的绑定成员被前一个请求枚举，并且没有被再一次包括"},
+  {code:"226 IM Used",desc:"服务器已经满足了请求所要的资源，并且响应是一个或者多个实例操作应用于当前实例的结果"},
+])
+
+const tableDataControlThree = reactive([
+  {code:"300 Multiple Choices",desc:"针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。"},
+  {code:"301 Moved Permanently",desc:"请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。"},
+  {code:"302 Move Temporarily",desc:"服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求"},
+  {code:"303 See Other",desc:"请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。"},
+  {code:"304 Not Modified",desc:"自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。"},
+  {code:"305 Use Proxy",desc:"请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理"},
+  {code:"306 Switch Proxy",desc:"在最新版的规范中，306状态码已经不再被使用"},
+  {code:"307 Temporary Redirect",desc:"服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。"},
+  {code:"308 Permanent Redirect",desc:"这个请求和以后的请求都应该被另一个URI地址重新发送。307、308和302、301有相同的表现，但是不允许HTTP方法改变。例如，请求表单到一个永久转移的资源将会继续顺利地执行。"},
+])
+
+const tableDataControlFour = reactive([
+  {code:"400 Bad Request",desc:"服务器不理解请求的语法"},
+  {code:"401 Unauthorized",desc:"请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应"},
+  {code:"402 Payment Required",desc:"该状态码是为了将来可能的需求而预留的"},
+  {code:"403 Forbidden",desc:"请求有效，但服务器拒绝操作。用户可能没有资源的必要权限。"},
+  {code:"404 Not Found",desc:"服务器找不到请求的网页"},
+  {code:"405 Method Not Allowed",desc:"禁用请求中指定的方法"},
+  {code:"406 Not Acceptable",desc:"无法使用请求的内容特性响应请求的网页"},
+  {code:"407 Proxy Authentication Required",desc:"此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理"},
+  {code:"408 Request Timeout",desc:"服务器等候请求时发生超时"},
+  {code:"409 Conflict",desc:"服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息"},
+  {code:"410 Gone",desc:"如果请求的资源已永久删除，服务器就会返回此响应"},
+  {code:"411 Length Required",desc:"服务器不接受不含有效内容长度标头字段的请求"},
+  {code:"412 Precondition Failed",desc:"服务器未满足请求者在请求中设置的其中一个前提条件"},
+  {code:"413 Request Entity Too Large",desc:"服务器无法处理请求，因为请求实体过大，超出服务器的处理能力"},
+  {code:"414 Request-URI Too Long",desc:"请求的 URI（通常为网址）过长，服务器无法处理"},
+  {code:"415 Unsupported Media Type",desc:"请求的格式不受请求页面的支持"},
+  {code:"416 Requested Range Not Satisfiable",desc:"如果页面无法提供请求的范围，则服务器会返回此状态代码"},
+  {code:"417 Expectation Failed",desc:"服务器未满足”期望“请求标头字段的要求"},
+  {code:"418 I'm a teapot",desc:"这个代码是在1998年作为传统的IETF April Fools‘ jokes被定义的在RFC2324，超文本咖啡罐控制协议，但是并没有被实际的HTTP服务器实现。RFC指定了这个代码应该是由茶罐返回给速溶咖啡"},
+  {code:"421 Misdirected Request",desc:"请求被指向到无法生成响应的服务器（比如由于连接重复使用）"},
+  {code:"422 Unprocessable Entity",desc:"请求格式正确，但是由于含有语义错误，无法响应。（RFC 4918 WebDAV）"},
+  {code:"423 Locked",desc:"当前资源被锁定"},
+  {code:"424 Failed Dependency",desc:"由于之前的某个请求发生的错误，导致当前请求失败，例如 PROPPATCH"},
+  {code:"425 Too Early",desc:"状态码 425 Too Early 代表服务器不愿意冒风险来处理该请求，原因是处理该请求可能会被“重放”，从而造成潜在的重放攻击。"},
+  {code:"426 Upgrade Required",desc:"客户端应当切换到TLS/1.0"},
+  {code:"429 Too Many Requests",desc:"用户在给定的时间内发送了太多请求"},
+  {code:"431 Request Header Fields Too Large",desc:"服务器不愿意处理请求，因为单个报头字段或所有报头字段都太大了。"},
+  {code:"449 Retry With",desc:"由微软扩展，代表请求应当在执行完适当的操作后进行重试。"},
+  {code:"451 Unavailable For Legal Reasons",desc:"该请求因法律原因不可用"},
+])
+
+const tableDataControlFive = reactive([
+  {code:"500 Internal Server Error",desc:"服务器遇到错误，无法完成请求；一般来说，这个问题都会在服务器端的源代码出现错误时出现。"},
+  {code:"501 Not Implemented",desc:"服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。"},
+  {code:"502 Bad Gateway",desc:"作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应"},
+  {code:"503 Service Unavailable",desc:"服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态"},
+  {code:"504 Gateway Timeout",desc:"服务器作为网关或代理，但是没有及时从上游服务器收到请求"},
+  {code:"505 HTTP Version Not Supported",desc:"服务器不支持请求中所用的 HTTP 协议版本"},
+  {code:"506 Variant Also Negotiates",desc:"由《透明内容协商协议》（RFC 2295）扩展，代表服务器存在内部配置错误：被请求的协商变元资源被配置为在透明内容协商中使用自己，因此在一个协商处理中不是一个合适的重点"},
+  {code:"507 Insufficient Storage",desc:"服务器无法存储完成请求所必须的内容。这个状况被认为是临时的"},
+  {code:"509 Bandwidth Limit Exceeded",desc:"服务器达到带宽限制。这不是一个官方的状态码，但是仍被广泛使用。"},
+  {code:"510 Not Extended",desc:"获取资源所需要的策略并没有被满足"},
+  {code:"511 Network Authentication Required",desc:"客户端需要进行身份验证才能获得网络访问权限。"},
+])
+
+//copy
+// const copyRes = async (resStr: string) => {
+//   copy(resStr)
+// }
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white">
+      <el-table :data="tableDataControlOne" class="w-full mb-3">
+        <el-table-column label="1xx 信息，表示临时响应并需要请求者继续执行操作" align="center">
+          <el-table-column prop="code" label="状态码" width="270" />
+          <el-table-column prop="desc" label="含义解释" />
+        </el-table-column>
+      </el-table>
+
+      <el-table :data="tableDataControlTwo" class="w-full mb-3">
+        <el-table-column label="2xx 成功，操作被成功接收并处理" align="center">
+          <el-table-column prop="code" label="状态码" width="270" />
+          <el-table-column prop="desc" label="含义解释"/>
+        </el-table-column>
+      </el-table>
+
+      <el-table :data="tableDataControlThree" class="w-full mb-3">
+        <el-table-column label="3xx 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向" align="center">
+          <el-table-column prop="code" label="状态码" width="270" />
+          <el-table-column prop="desc" label="含义解释"/>
+        </el-table-column>
+      </el-table>
+
+      <el-table :data="tableDataControlFour" class="w-full mb-3">
+        <el-table-column label="4xx 客户端错误，请求包含语法错误或无法完成请求" align="center">
+          <el-table-column prop="code" label="状态码" width="270" />
+          <el-table-column prop="desc" label="含义解释"/>
+        </el-table-column>
+      </el-table>
+
+      <el-table :data="tableDataControlFive" class="w-full mb-3">
+        <el-table-column label="5xx 这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错" align="center">
+          <el-table-column prop="code" label="状态码" width="270" />
+          <el-table-column prop="desc" label="含义解释"/>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/JWT/JWT.vue b/src/components/Tools/JWT/JWT.vue
new file mode 100644
index 0000000..18667a1
--- /dev/null
+++ b/src/components/Tools/JWT/JWT.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { reactive,ref,onMounted } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import {jwtDecode} from 'jwt-decode'
+const info = reactive({
+  title: "JWT解析",
+  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ0b29scy5yYW5ibG9ncy5jb20iLCJzdWIiOiJhcnlhIiwiYXVkIjoidGFvcmFuIiwiaWF0IjoxNzE3MDM2MzMzLCJleHAiOjE3MTcwMzY5MzN9.9v_eDdsPnvcY7qZatNnKvN9VEf7t7o72OgwhLS6gy6w',
+})
+
+const decodeHeader = ref()
+const decodePayload = ref()
+const invalidToken = ref(false)
+
+//解析
+const parser = () => {
+  try {
+    decodePayload.value = JSON.stringify(jwtDecode(info.token), null, '\t')
+    decodeHeader.value = JSON.stringify(jwtDecode(info.token, {header: true}), null, '\t')
+  } catch (e) {
+
+    console.log('Invalid token', e)
+    invalidToken.value = true
+  }  
+}
+
+//清空输入框
+const clear = () => {
+  info.token = ''
+  decodeHeader.value = ''
+  decodePayload.value = ''
+}
+
+onMounted(() => {
+  parser()
+})
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white ">
+      <div class="mb-6">
+        <el-input v-model="info.token" :rows="5" type="textarea" placeholder="请输入Token" @change="parser"></el-input>
+        <el-text type="danger" v-if="invalidToken">Invalid token</el-text>
+        <div class="mt-3">
+          <el-button type="primary" @click="parser">解析</el-button>
+          <el-button type="primary" @click="clear">清除</el-button>
+        </div>
+      </div>
+
+      <!-- header -->
+      <div v-if="decodeHeader">
+        <div class="mb-3">Header(头部)</div>
+        <el-input
+          v-model="decodeHeader"
+          type="textarea"
+          :autosize="true"
+          class="w-full"
+        />
+      </div>
+
+
+      <!-- payload -->
+      <div v-if="decodePayload">
+        <div class="mb-3 mt-3">Payload(载荷)</div>
+        <el-input
+          v-model="decodePayload"
+          type="textarea"
+          :autosize="true"
+          v-if="decodePayload"
+          class="w-full"
+        />
+      </div>
+      <el-divider content-position="left">描述</el-divider>
+      <div>
+        <el-text>
+          1. JWT 是 JSON Web Tokens 的缩写，是目前最流行的跨域认证解决方案，是一个开放式标准(RFC 7519)，用于在各方之间以JSON对象安全传输信息。<br/>
+          2. Header(头部)<br/>
+          &nbsp;&nbsp;- typ(type): 用来标识整个token字符串是一个JWT字符串<br/>
+          &nbsp;&nbsp;- alg(algorithm): 用来说明这个JWT签发的时候所使用的签名和摘要算法<br/>
+          3. Payload(载荷)<br/>
+          &nbsp;&nbsp;- iss (Issuer)：签发者<br/>
+          &nbsp;&nbsp;- sub (Subject)：主题<br/>
+          &nbsp;&nbsp;- aud (Audience)：接收者<br/>
+          &nbsp;&nbsp;- exp (Expiration time)：过期时间<br/>
+          &nbsp;&nbsp;- nbf (Not Before)：生效时间<br/>
+          &nbsp;&nbsp;- iat (Issued At)：签发时间<br/>
+          &nbsp;&nbsp;- jti (JWT ID)：编号<br/>
+        </el-text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/tools.ts b/src/components/Tools/tools.ts
index 8dcac6e..fd98baa 100644
--- a/src/components/Tools/tools.ts
+++ b/src/components/Tools/tools.ts
@@ -13,7 +13,7 @@ export function getToolsCate() {
           title: '随机密码生成',
           logo: '/images/logo/keywords.png',
           desc: '密码生成器、随机字符串生成,批量生成',
-          url: '/random_password',
+          url: '/random_password/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -22,7 +22,7 @@ export function getToolsCate() {
           title: 'URL编码/解码',
           logo: '/images/logo/url.png',
           desc: 'URL在线编码解码工具（UrlEncode编码 和 UrlDecode解码）',
-          url: '/urlencode',
+          url: '/urlencode/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -31,7 +31,7 @@ export function getToolsCate() {
           title: 'UUID生成器',
           logo: '/images/logo/uuid.png',
           desc: '批量生成UUID',
-          url: '/uuid',
+          url: '/uuid/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -40,7 +40,7 @@ export function getToolsCate() {
           title: '时间戳转换',
           logo: '/images/logo/Time.png',
           desc: '在线时间戳转换工具以及获取当前时间戳',
-          url: '/timetran',
+          url: '/timetran/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -49,7 +49,7 @@ export function getToolsCate() {
           title: 'MD5在线加密',
           logo: '/images/logo/md5.png',
           desc: 'MD5在线加密,长度包含32位、16位',
-          url: '/MD5',
+          url: '/MD5/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -58,7 +58,7 @@ export function getToolsCate() {
           title: 'Json在线转换',
           logo: '/images/logo/json.png',
           desc: '在线编辑json, 语法检查',
-          url: '/json',
+          url: '/json/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -67,7 +67,7 @@ export function getToolsCate() {
           title: '正则测试工具',
           logo: '/images/logo/reg.png',
           desc: '正则表达式测试工具, 常用正则表达式',
-          url: '/reg',
+          url: '/reg/',
           cateId: 2,
           cate: '开发运维',
         },
@@ -76,7 +76,34 @@ export function getToolsCate() {
           title: 'Unicode转中文',
           logo: '/images/logo/union.png',
           desc: 'Unicode和中文的相互转换',
-          url: '/unicode',
+          url: '/unicode/',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'HTTP状态码',
+          logo: '/images/logo/http_code.png',
+          desc: 'http状态对应的名称和含义解释',
+          url: '/HttpStatusCode/',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'JWT解析',
+          logo: '/images/logo/jwt_parse.png',
+          desc: '解析和解码JSON Web Token（jwt）',
+          url: '/jwt/',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'html实体转义',
+          logo: '/images/logo/HtmlEntity.png',
+          desc: 'html实体转义，实体转义成html',
+          url: '/HtmlEntity/',
           cateId: 2,
           cate: '开发运维',
         }
@@ -92,7 +119,7 @@ export function getToolsCate() {
           title: '文本对比',
           logo: '/images/logo/diff.png',
           desc: '文本差异比对支持中文、英文、代码比对',
-          url: '/diff',
+          url: '/diff/',
           cateId: 3,
           cate: '文本处理'
         },
@@ -101,7 +128,7 @@ export function getToolsCate() {
           title: 'markdown编辑器',
           logo: '/images/logo/file-markdown-fill.png',
           desc: '在线创建或编辑markdown, 实时预览，导出markdown',
-          url: '/markdown',
+          url: '/markdown/',
           cateId: 3,
           cate: '文本处理'
         },
@@ -110,7 +137,7 @@ export function getToolsCate() {
           title: '字数统计',
           logo: '/images/logo/wordCount.png',
           desc: '在线统计字符串的字数、段落、标点符号数量',
-          url: '/wordCount',
+          url: '/wordCount/',
           cateId: 3,
           cate: '文本处理',
         },
@@ -119,7 +146,16 @@ export function getToolsCate() {
           title: '文本去重',
           logo: '/images/logo/textRemoveDuplicate.png',
           desc: '可以删除或去除文本或字符串中的重复行',
-          url: '/textRemoveDuplicate',
+          url: '/textRemoveDuplicate/',
+          cateId: 3,
+          cate: '文本处理',
+        },
+        {
+          id: 1,
+          title: 'ASCII字形生成器',
+          logo: '/images/logo/ascii_word_pic.png',
+          desc: '在线生成字形ASCII画',
+          url: '/asciiWordPic/',
           cateId: 3,
           cate: '文本处理',
         },
@@ -135,7 +171,7 @@ export function getToolsCate() {
           title: '单位换算',
           logo: '/images/logo/unit.png',
           desc: '在线重量、长度、面积、时间、角度、速度、温度、压力、热量、功率等换算',
-          url: '/unit',
+          url: '/unit/',
           cateId: 4,
           cate: '教育学术'
         },
@@ -144,7 +180,7 @@ export function getToolsCate() {
           title: '摩斯电码',
           logo: '/images/logo/medium.png',
           desc: '支持中文的摩斯电码编码解码',
-          url: '/morse',
+          url: '/morse/',
           cateId: 4,
           cate: '教育学术'
         },
@@ -153,7 +189,7 @@ export function getToolsCate() {
           title: '常用进制转换',
           logo: '/images/logo/scaletran.png',
           desc: '在线进制转换工具,可在2到64进制之间相互转换',
-          url: '/scaletran',
+          url: '/scaletran/',
           cateId: 4,
           cate: '教育学术',
         },
@@ -162,7 +198,7 @@ export function getToolsCate() {
           title: 'ASCII码表',
           logo: '/images/logo/ascii.png',
           desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表',
-          url: '/ascii',
+          url: '/ascii/',
           cateId: 4,
           cate: '教育学术'
         },
@@ -178,7 +214,7 @@ export function getToolsCate() {
           title: '二维码生成',
           logo: '/images/logo/qrcode.png',
           desc: '在线生成带logo、透明、艺术的二维码',
-          url: '/qrcode',
+          url: '/qrcode/',
           cateId: 5,
           cate: '图片处理'
         },
@@ -187,7 +223,7 @@ export function getToolsCate() {
           title: '在线图片处理',
           logo: '/images/logo/img.png',
           desc: '在线图片裁剪，标注，滤镜，画等操作',
-          url: '/signimage',
+          url: '/signimage/',
           cateId: 5,
           cate: '图片处理',
         },
@@ -196,7 +232,7 @@ export function getToolsCate() {
           title: '文本转图片',
           logo: '/images/logo/text_to_img.png',
           desc: '把文本转换成图片，生成长图，具有超多个性文字排版',
-          url: '/textToImg',
+          url: '/textToImg/',
           cateId: 5,
           cate: '图片处理'
         },
@@ -205,7 +241,7 @@ export function getToolsCate() {
           title: '图片分割',
           logo: '/images/logo/imgCut.png',
           desc: '将图片分割成四宫格、九宫格、十六宫格，支持自定义行与列',
-          url: '/imgCut',
+          url: '/imgCut/',
           cateId: 5,
           cate: '图片处理',
         },
@@ -221,7 +257,7 @@ export function getToolsCate() {
           title: '柱状图',
           logo: '/images/logo/bar.png',
           desc: '在线制作柱状图，像做表格一样制作可视化图表，支持导出静态或动态图表',
-          url: '/bar',
+          url: '/bar/',
           cateId: 8,
           cate: '数据图表',
         },{
@@ -229,7 +265,7 @@ export function getToolsCate() {
           title: '折线图',
           logo: '/images/logo/line.png',
           desc: '在线制作折线图，像做表格一样制作可视化图表，支持导出静态或动态图表',
-          url: '/line',
+          url: '/line/',
           cateId: 8,
           cate: '数据图表',
         },
@@ -238,7 +274,7 @@ export function getToolsCate() {
           title: '饼图',
           logo: '/images/logo/pie.png',
           desc: '在线制作饼图，像做表格一样制作可视化图表，支持导出静态或动态图表',
-          url: '/pie',
+          url: '/pie/',
           cateId: 8,
           cate: '数据图表',
         },
@@ -247,7 +283,7 @@ export function getToolsCate() {
           title: '散点图',
           logo: '/images/logo/scatter.png',
           desc: '在线制作散点图，像做表格一样制作可视化图表，支持导出静态或动态图表',
-          url: '/scatter',
+          url: '/scatter/',
           cateId: 8,
           cate: '数据图表',
         }
@@ -263,7 +299,7 @@ export function getToolsCate() {
           title: '生成随机数',
           logo: '/images/logo/random.png',
           desc: '可定制范围内进行随机数字，可用于抽奖、点名等用途',
-          url: '/random',
+          url: '/random/',
           cateId: 9,
           cate: '选择随机'
         },
@@ -272,7 +308,7 @@ export function getToolsCate() {
           title: '帮我决定',
           logo: '/images/logo/choose.png',
           desc: '选择困难，难以决定，今天吃什么，现在做什么，自定义选项都给你安排的明明白白',
-          url: '/decision',
+          url: '/decision/',
           cateId: 9,
           cate: '选择随机'
         },
@@ -281,7 +317,7 @@ export function getToolsCate() {
           title: '抛硬币',
           logo: '/images/logo/coin.png',
           desc: '在线抛硬币，选择困难那么交给硬币来帮你选择吧',
-          url: '/coin',
+          url: '/coin/',
           cateId: 9,
           cate: '选择随机',
         },
@@ -290,7 +326,7 @@ export function getToolsCate() {
           title: '投骰子',
           logo: '/images/logo/dice.png',
           desc: '在线投骰子，可自定义骰子数量，简单好用的骰子工具',
-          url: '/dice',
+          url: '/dice/',
           cateId: 9,
           cate: '选择随机',
         },
@@ -331,7 +367,7 @@ export function getToolsCate() {
           title: '数字转金额大写',
           logo: '/images/logo/numberToChinese.png',
           desc: '在线数字一键转换成人民币大写，中文大写转换数字',
-          url: '/numberToChinese',
+          url: '/numberToChinese/',
           cateId: 7,
           cate: '其他工具'
         },
@@ -340,7 +376,7 @@ export function getToolsCate() {
           title: '手持弹幕',
           logo: '/images/logo/dm.png',
           desc: '手持滚动弹幕',
-          url: '/barrage',
+          url: '/barrage/',
           cateId: 7,
           cate: '其他工具',
         },
@@ -349,7 +385,16 @@ export function getToolsCate() {
           title: '色板',
           logo: '/images/logo/palettes.png',
           desc: '包含纯色、渐变与阶梯色和常用色彩组合',
-          url: '/palettes',
+          url: '/palettes/',
+          cateId: 7,
+          cate: '其他工具'
+        },
+        {
+          id: 1,
+          title: 'Color选择器',
+          logo: '/images/logo/color_picker.png',
+          desc: '颜色选择器、在各种颜色空间如十六进制、rgb、hsl、css等等之间转换颜色',
+          url: '/ColorPicker/',
           cateId: 7,
           cate: '其他工具'
         }
diff --git a/src/router/router.ts b/src/router/router.ts
index 467660e..2e45c18 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -341,6 +341,56 @@ export const constantRoute = [
       description: '将图片分割成四宫格、九宫格、十六宫格，支持自定义行与列',
     }
   },
+  {
+    path: '/HttpStatusCode',
+    component: () => import('@/components/Tools/HttpStatusCode/HttpStatusCode.vue'),
+    name: 'HttpStatusCode',
+    meta: {
+      title: "HTTP状态码",
+      keywords: 'http状态码',
+      description: '所有http状态对应的名称和含义解释',
+    }
+  },
+  {
+    path: '/jwt',
+    component: () => import('@/components/Tools/JWT/JWT.vue'),
+    name: 'jwt',
+    meta: {
+      title: "JWT解析",
+      keywords: 'jwt解析,jwt解码，JSON Web Token解析',
+      description: '解析和解码JSON Web Token（jwt）',
+    }
+  },
+  {
+    path: '/HtmlEntity',
+    component: () => import('@/components/Tools/HtmlEntity/HtmlEntity.vue'),
+    name: 'HtmlEntity',
+    meta: {
+      title: "html实体转义",
+      keywords: 'html实体转义',
+      description: 'html实体转义，实体转义成html',
+    }
+  },
+  {
+    path: '/ColorPicker',
+    component: () => import('@/components/Tools/ColorPicker/ColorPicker.vue'),
+    name: 'ColorPicker',
+    meta: {
+      title: "Color选择器",
+      keywords: '颜色选择器,Color选择器',
+      description: '颜色选择器、在各种颜色空间如十六进制、rgb、hsl、css等等之间转换颜色',
+    }
+  },
+  {
+    path: '/asciiWordPic',
+    component: () => import('@/components/Tools/ASCIIWordPic/ASCIIWordPic.vue'),
+    name: 'asciiWordPic',
+    meta: {
+      title: "Color选择器",
+      keywords: '颜色选择器,Color选择器',
+      description: '颜色选择器、在各种颜色空间如十六进制、rgb、hsl、css等等之间转换颜色',
+    }
+  },
   // 关于
   {
     path: '/about',
diff --git a/src/store/modules/linux.ts b/src/store/modules/linux.ts
deleted file mode 100644
index 559e9e6..0000000
--- a/src/store/modules/linux.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineStore } from 'pinia'
-export const useUserStore = defineStore('linux', {
-  //用来存放变量
-  state: () => ({
-
-  }),
-  //方法
-  actions: {
-    //获取tools
-    async getCmds() {
-      //发送请求
-      // const result: any = await getTools(data)
-      // if (result.code == 200) {
-
-      //     return result.message
-      // } else {
-      //   return Promise.reject(new Error(result.message))
-      // }
-    },
-  }
-})
\ No newline at end of file
diff --git a/src/store/modules/tools.ts b/src/store/modules/tools.ts
index 9b71db8..231b24e 100644
--- a/src/store/modules/tools.ts
+++ b/src/store/modules/tools.ts
@@ -25,23 +25,15 @@ export const useToolsStore = defineStore('tools', {
     async getTools(data: ToolsReqData) {
       //发送请求
       const result: any = await getTools(data)
-      if (result.code == 200) {
-          this.list = result.data
-          return result.message
-      } else {
-        return Promise.reject(new Error(result.message))
-      }
+          this.list = result
+          return result
     },
     //获取tool info
     async getToolInfo(data: ToolsReqData) {
       //发送请求
       const result: any = await getTools(data)
-      if (result.code == 200) {
-          this.toolInfo = result.data[0]
-          return result.message
-      } else {
-        return Promise.reject(new Error(result.message))
-      }
+      this.toolInfo = result
+      return result
     },
     //获取tools cate
     async getToolCate() {