feat: 新增5个工具

- WT解析器
- Http状态码
- html实体转义(#)
- 颜色选择、转换器
- ASCII字形生成器

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",

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([email protected])
+  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
 
+  /[email protected]:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: false
+
   /[email protected]:
     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
 
   /[email protected]:
@@ -3309,6 +3325,12 @@ packages:
       pend: 1.2.0
     dev: false
 
+  /[email protected]:
+    resolution: {integrity: sha512-gO8l3wvqo0V7wEFLXPbkX83b7MVjRrk1oRLfYlZXol8nEpb/ON9pcKLI4qpBv5YtOTfrINtqb7b40iYY2FTWFg==}
+    engines: {node: '>= 0.4.0'}
+    hasBin: true
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
     engines: {node: '>=4'}
@@ -4188,6 +4210,11 @@ packages:
     dev: false
     optional: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
+    dev: false
+
   /[email protected]:
     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

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/[email protected]/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>

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>

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>

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>

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>

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: '其他工具'
         }

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',

src/store/modules/linux.ts

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

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() {