From 6082f1d789802e809bbbd9070d2d39d3d0fa0d31 Mon Sep 17 00:00:00 2001
From: taoran <taoran0796@163.com>
Date: Thu, 20 Jun 2024 17:12:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E6=B7=BB=E5=8A=A0=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Layout/ToolDetail/ToolDetail.vue          | 26 +++++++++
 src/components/Tools/ASCII/ASCII.vue          |  9 +++
 .../Tools/ASCIIWordPic/ASCIIWordPic.vue       | 16 +++---
 src/components/Tools/Barrage/Barrage.vue      |  9 +++
 src/components/Tools/Chart/Bar/Bar.vue        | 12 ++++
 src/components/Tools/Chart/Line/Line.vue      | 11 ++++
 src/components/Tools/Chart/Pie/Pie.vue        | 12 ++++
 .../Tools/Chart/Scatter/Scatter.vue           | 11 ++++
 src/components/Tools/Coin/Coin.vue            |  9 +++
 .../Tools/ColorPicker/ColorPicker.vue         | 55 ++++++++++++-------
 src/components/Tools/CssFormat/CssFormat.vue  |  9 +++
 src/components/Tools/Decision/Decision.vue    |  9 +++
 src/components/Tools/Dice/Dice.vue            |  9 +++
 src/components/Tools/Diff/Diff.vue            |  9 +++
 src/components/Tools/Example/Example.vue      |  9 +++
 .../Tools/HtmlEntity/HtmlEntity.vue           | 11 ++--
 .../Tools/HtmlFormat/HtmlFormat.vue           |  8 +++
 .../Tools/HttpStatusCode/HttpStatusCode.vue   |  8 +++
 src/components/Tools/ImgCut/ImgCut.vue        |  9 +++
 src/components/Tools/JSFormat/JSFormat.vue    |  8 +++
 src/components/Tools/JWT/JWT.vue              | 39 +++++++------
 src/components/Tools/JsonTran/JsonTran.vue    |  9 +++
 src/components/Tools/MD5/MD5.vue              |  9 +++
 src/components/Tools/Markdown/Markdown.vue    | 10 +++-
 src/components/Tools/Morse/Morse.vue          |  9 +++
 .../Tools/NumberToChinese/NumberToChinese.vue |  8 +++
 src/components/Tools/Palettes/Palettes.vue    |  9 +++
 src/components/Tools/Qrcode/Qrcode.vue        |  9 +++
 src/components/Tools/Random/Random.vue        |  8 +++
 .../Tools/RandomPassword/RandomPassword.vue   |  9 +++
 src/components/Tools/RegTest/RegTest.vue      |  9 +++
 src/components/Tools/ScaleTran/ScaleTran.vue  |  8 +++
 src/components/Tools/SignImage/SignImage.vue  |  9 +++
 src/components/Tools/TextEdit/TextEdit.vue    |  9 ++-
 .../TextRemoveDuplicate.vue                   |  9 +++
 src/components/Tools/TextToImg/TextToImg.vue  | 10 +++-
 src/components/Tools/TimeTran/TimeTran.vue    | 12 ++--
 src/components/Tools/UUID/UUID.vue            |  9 +++
 src/components/Tools/Unicode/Unicode.vue      |  9 +++
 src/components/Tools/Unit/Unit.vue            |  9 +++
 src/components/Tools/UrlEncode/UrlEncode.vue  |  9 +++
 src/components/Tools/WordCount/WordCount.vue  | 10 +++-
 src/components/Tools/tools.ts                 |  4 +-
 src/router/router.ts                          |  8 +--
 44 files changed, 438 insertions(+), 64 deletions(-)
 create mode 100644 src/components/Layout/ToolDetail/ToolDetail.vue

diff --git a/src/components/Layout/ToolDetail/ToolDetail.vue b/src/components/Layout/ToolDetail/ToolDetail.vue
new file mode 100644
index 0000000..58d487d
--- /dev/null
+++ b/src/components/Layout/ToolDetail/ToolDetail.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+const props = defineProps({
+  title: {
+    type: String,
+    default: '描述'
+  }
+})
+
+onMounted(() => {
+})
+</script>
+
+<template>
+  <!-- desc -->
+  <div class="mt-3 rounded-2xl bg-white p-4">
+    <el-divider content-position="left">{{ props.title }}</el-divider>
+    <div class="m-4">
+      <slot></slot>
+    </div> 
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/ASCII/ASCII.vue b/src/components/Tools/ASCII/ASCII.vue
index 32b8e1c..abc02fb 100644
--- a/src/components/Tools/ASCII/ASCII.vue
+++ b/src/components/Tools/ASCII/ASCII.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 const info = reactive({
   title: "ASCII码表",
@@ -311,6 +312,14 @@ const tableDataNonStandard = reactive([
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）是一种字符编码标准，它使用一个字节（8位二进制数）来表示128个不同的字符。这些字符包括33个控制字符（具有特殊功能但不可直接显示的字符）和95个可打印字符。ASCII码表中的字符从0到127编号，其中0代表空字符（NULL），1代表开始头（SOH），2代表正文开始（STX），依此类推。ASCII码表的最小值是0，代表空字符。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue b/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue
index b8b3e3f..919abc9 100644
--- a/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue
+++ b/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive,ref,onMounted } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 import figlet from 'figlet';
 const info = reactive({
@@ -165,14 +166,15 @@ onMounted(() => {
         <pre tabindex="0"><code>{{ contentRes }}</code></pre>
       </div>
 
-
-
-      <!-- <el-divider content-position="left">描述</el-divider>
-      <div>
-        <el-text>
-        </el-text>
-      </div> -->
     </div>
+  
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        好用的ASCII字形生成器，输入框中输入需要生成的字母；提供多种风格选择
+      </el-text> 
+    </ToolDetail>
+  
   </div>
 </template>
 
diff --git a/src/components/Tools/Barrage/Barrage.vue b/src/components/Tools/Barrage/Barrage.vue
index 772756d..77d0994 100644
--- a/src/components/Tools/Barrage/Barrage.vue
+++ b/src/components/Tools/Barrage/Barrage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onBeforeMount, reactive,ref } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { ElMessage } from 'element-plus'
 import vueDanmaku  from 'vue3-danmaku'  //https://www.npmjs.com/package/vue3-danmaku
 const info = reactive({
@@ -114,6 +115,14 @@ onBeforeMount(() => {
         <el-text>双击可退出弹幕</el-text>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        手持弹幕是一种新型的互动沟通工具，可以方便地为各种户外活动、演出嘉年华等活动增加趣味性和互动性。手持弹幕具有轻便、易携带、易操作等优点，可以让每个参与者都变成活动的一部分。同时，手持弹幕还可以通过预先编写的文本、表情等形式，表达参与者的情感和想法，实现沟通互动。在社交媒体时代，手持弹幕的使用也带来了更广泛的社交效应，增加了活动的互动性和传播度。无论是举办方还是参与者，手持弹幕都是一个非常有价值的互动工具。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Chart/Bar/Bar.vue b/src/components/Tools/Chart/Bar/Bar.vue
index 7d75b2d..efb5308 100644
--- a/src/components/Tools/Chart/Bar/Bar.vue
+++ b/src/components/Tools/Chart/Bar/Bar.vue
@@ -4,6 +4,7 @@ import Spreadsheet from 'x-data-spreadsheet'
 import 'x-data-spreadsheet/dist/locale/zh-cn';
 import { UploadProps,UploadRawFile,genFileId } from 'element-plus'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 import { toEchartsData, toSpreadsheetData } from '@/utils/echarts'
 import * as echarts from 'echarts'
@@ -459,6 +460,17 @@ onMounted(() => {
     
     <el-drawer id="x-spreadsheet" v-model="drawer" direction="btt" custom-class="sheet" style="">
     </el-drawer>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线图表制作工具，在线制作柱状图<br>
+        在线编辑表格生成柱状图，支持png和jpeg格式导出<br>
+        柱状图是采用垂直柱子,即矩形块的宽度一样,用高度来代表数值大小。<br>
+        能让使用者更为直观地看到不同类别数据或不同时间阶段的比较情况及发展趋势，通常利用于较小的数据集分析。<br>
+        无需任何基础即可上手，并且支持超全的自定义配置，轻松实现你的个性化图表需求<br>
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/Chart/Line/Line.vue b/src/components/Tools/Chart/Line/Line.vue
index 038c1e0..c29c87a 100644
--- a/src/components/Tools/Chart/Line/Line.vue
+++ b/src/components/Tools/Chart/Line/Line.vue
@@ -4,6 +4,7 @@ import Spreadsheet from 'x-data-spreadsheet'
 import 'x-data-spreadsheet/dist/locale/zh-cn';
 import { UploadProps,UploadRawFile,genFileId } from 'element-plus'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 import { toEchartsData, toSpreadsheetData } from '@/utils/echarts'
 import * as echarts from 'echarts'
@@ -459,6 +460,16 @@ onMounted(() => {
     
     <el-drawer id="x-spreadsheet" v-model="drawer" direction="btt" class="sheet" style="">
     </el-drawer>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        折线图为日常最常用的图表之一，当必须呈现与时间相关的数据时，它是首选它最适合分析趋势。<br>
+        在线图表制作工具，在线制作折线图<br>
+        支持导入表格并在线编辑表格生成折线图，支持png和jpeg格式导出<br>
+        支持超全的自定义配置，轻松实现你的个性化图表需求<br>
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/Chart/Pie/Pie.vue b/src/components/Tools/Chart/Pie/Pie.vue
index eb61678..6ab2453 100644
--- a/src/components/Tools/Chart/Pie/Pie.vue
+++ b/src/components/Tools/Chart/Pie/Pie.vue
@@ -4,6 +4,7 @@ import Spreadsheet from 'x-data-spreadsheet'
 import 'x-data-spreadsheet/dist/locale/zh-cn';
 import { UploadProps,UploadRawFile,genFileId } from 'element-plus'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 import { toEchartsPieData, toSpreadsheetData, tranObjAndColumn } from '@/utils/echarts'
 import * as echarts from 'echarts'
@@ -467,6 +468,17 @@ onMounted(() => {
     
     <el-drawer id="x-spreadsheet" v-model="drawer" direction="btt" custom-class="sheet" style="">
     </el-drawer>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        饼图是通过一个圆来展示数据，用圆内各扇形的角度来表示数据之间的占比关系。<br>
+        能够很好地展示不同分类的变量之间或单个分类变量与整体之间的占比情况，常用来强调某个突出的分类变量或表示表示占比关系。<br>
+        在线图表制作工具，在线制作饼图<br>
+        支持导入表格并在线编辑表格生成饼图，支持png和jpeg格式导出<br>
+        支持超全的自定义配置，轻松实现你的个性化图表需求<br>
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/Chart/Scatter/Scatter.vue b/src/components/Tools/Chart/Scatter/Scatter.vue
index 6f56330..d578b64 100644
--- a/src/components/Tools/Chart/Scatter/Scatter.vue
+++ b/src/components/Tools/Chart/Scatter/Scatter.vue
@@ -4,6 +4,7 @@ import Spreadsheet from 'x-data-spreadsheet'
 import 'x-data-spreadsheet/dist/locale/zh-cn';
 import { UploadProps,UploadRawFile,genFileId } from 'element-plus'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 import { toEchartsData, toSpreadsheetData, tranObjAndColumn } from '@/utils/echarts'
 import * as echarts from 'echarts'
@@ -462,6 +463,16 @@ onMounted(() => {
     
     <el-drawer id="x-spreadsheet" v-model="drawer" direction="btt" custom-class="sheet" style="">
     </el-drawer>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        散点图更偏向于研究型图表，通过直观醒目的图形方式反映出变量随自变量而变化的大致趋势，可以帮助我们推断出不同维度数据之间的相关性，也经常用在地图的标注上。<br>
+        在线图表制作工具，在线制作散点图<br>
+        支持导入表格并在线编辑表格生成散点图，支持png和jpeg格式导出<br>
+        支持超全的自定义配置，轻松实现你的个性化图表需求<br>
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/Coin/Coin.vue b/src/components/Tools/Coin/Coin.vue
index 1dbcd60..2940290 100644
--- a/src/components/Tools/Coin/Coin.vue
+++ b/src/components/Tools/Coin/Coin.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref,reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 const info = reactive({
   title: "抛硬币",
@@ -39,6 +40,14 @@ const throwCoin = () => {
 				<el-button type="primary" class="w-48" size="large" disabled v-else>抛硬币...</el-button>
 			</div>
     </div>
+
+		<!-- desc -->
+		<ToolDetail title="描述">
+			<el-text>
+				面临艰难的选择？ 我们邀请您在线掷硬币！
+			</el-text> 
+		</ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/ColorPicker/ColorPicker.vue b/src/components/Tools/ColorPicker/ColorPicker.vue
index e83e980..ad88921 100644
--- a/src/components/Tools/ColorPicker/ColorPicker.vue
+++ b/src/components/Tools/ColorPicker/ColorPicker.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive,ref,onMounted } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 import { CopyDocument } from '@element-plus/icons-vue'
 import { colord, extend } from 'colord';
@@ -219,27 +220,41 @@ onMounted(() => {
           </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>
+
+    <!-- desc -->
+		<ToolDetail title="描述">
+			<el-text>
+				在不同格式（十六进制、rgb、hsl和css名称）之间转换颜色<br>
+        <br>
+        在 CSS 中，颜色无处不在，它可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 Hex 和 RGB，其实表示颜色的方式有很多；<br>
+          <div class="indent-8">
+            - RGB: RGB 值也是我们常用的颜色表示方式。RGB 指的就是红-绿-蓝，这个顺序非常重要。每种颜色使用 0 到 255 之间的数字指定。最常见的 RGB 值黑色：rgb(0,0,0) 和白色：rgb(255,255,255)。RGB表示法使我们以更易读的形式来访问与十六进制值相同的颜色范围。
+          </div>
+          <div class="indent-8">
+            - Hex: 可以使用十六进制值来表示 CSS 中的颜色，这也是我们用的最多的颜色表示方式。十六进制使用 16 个符号表示，使用 0 - 9 表示值 0 到 9，A - F 表示值 10 到 15<br/>
+          </div>
+          <div class="indent-8">
+            - HSL: HSL 全称是 Hue-Saturation-Lightness，分别表示色调、饱和度和亮度。它基于 RGB 色轮的。每种颜色都有一个角度以及饱和度和亮度值的百分比值<br/>
+          </div>
+          <div class="indent-8">
+            - HSV: HSV色彩空间是对传统RGB模型的一种改进，引入了三个主要组件来定义颜色：色调（H）、饱和度（S）和明度（V）。与RGB模型不同，后者基于颜色的主导波长、饱和度和亮度提供了更直观的颜色描述方式。
+          </div>
+          <div class="indent-8">
+            - HWB: HWB 全称为Hue-Whiteness-Blackness，表示色调、白度和黑度。<br/>
+          </div>
+          <div class="indent-8">
+            - LAB: LAB 是一个可以在 Photoshop 等软件中访问的颜色空间，它代表了人类可以看到的整个颜色范围。它使用三个轴表示：亮度、a 轴和b 轴。<br/>
+          </div>
+          <div class="indent-8">
+            - LCH: LCH 代表亮度、色度和色调。它与 Lab 具有相同的 L 值，但不是使用坐标 a* 和 b*，而是使用 C（色度）和 H（色调）。色调可以是 0 到 360 之间的值。色度代表颜色的量，它类似于 HSL 中的饱和度。但是色度值可以超过 100，理论上它是无上限的。<br/>
+          </div>
+          <div class="indent-8">
+            - CMYK: CMYK 代表 Cyan、Magenta、Yellow 和 Key，它们与打印机中的墨水颜色相匹配。虽然屏幕通常以 RGB 来显示颜色，而打印机通常使用青色、品红色、黄色和黑色的组合来表示颜色，这些是最常见的墨水颜色。<br/>
+          </div>
+			</el-text> 
+		</ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/CssFormat/CssFormat.vue b/src/components/Tools/CssFormat/CssFormat.vue
index c003c1b..a4044e5 100644
--- a/src/components/Tools/CssFormat/CssFormat.vue
+++ b/src/components/Tools/CssFormat/CssFormat.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string';
 import { Codemirror } from "vue-codemirror";
 import '@codemirror/search';
@@ -81,6 +82,14 @@ const copyRes = async () => {
         <el-text type="danger">{{ info.parseErr }}</el-text>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线css格式化，在线压缩css代码
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Decision/Decision.vue b/src/components/Tools/Decision/Decision.vue
index dbd39db..12f40f2 100644
--- a/src/components/Tools/Decision/Decision.vue
+++ b/src/components/Tools/Decision/Decision.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted,ref } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 const info = reactive({
   title: "帮我决定",
@@ -86,6 +87,14 @@ onMounted(() => {
         <el-button @click="clear">清空</el-button>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        选择困难症患者的福音！由我来帮你决定，可自定义决定内容，随机选择决定
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Dice/Dice.vue b/src/components/Tools/Dice/Dice.vue
index 4f03927..d7ed850 100644
--- a/src/components/Tools/Dice/Dice.vue
+++ b/src/components/Tools/Dice/Dice.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref,reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import DiceCore from "@/components/Tools/Dice/DiceCore.vue"
 // import { copy } from '@/utils/string'
 const info = reactive({
@@ -62,6 +63,14 @@ const resetDice = () => {
         <el-button type="primary" class="w-48" size="large" @click="resetDice">重置</el-button>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线投骰子，骰子工具，自定义骰子数量
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Diff/Diff.vue b/src/components/Tools/Diff/Diff.vue
index d06de18..7b1bc8f 100644
--- a/src/components/Tools/Diff/Diff.vue
+++ b/src/components/Tools/Diff/Diff.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { CodeDiff } from "v-code-diff";
 // import { copy } from '@/utils/string'
 const info = reactive({
@@ -31,6 +32,14 @@ const info = reactive({
         theme="dark"
       />
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线文本差异比对支持中文、英文、代码比对，不限制字数轻松比对文本。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Example/Example.vue b/src/components/Tools/Example/Example.vue
index db736ef..a6825f1 100644
--- a/src/components/Tools/Example/Example.vue
+++ b/src/components/Tools/Example/Example.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 const info = reactive({
   title: "tool name",
@@ -19,6 +20,14 @@ const info = reactive({
     <div class="p-4 rounded-2xl bg-white">
       
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        示例...
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/HtmlEntity/HtmlEntity.vue b/src/components/Tools/HtmlEntity/HtmlEntity.vue
index 71c090d..e1fd814 100644
--- a/src/components/Tools/HtmlEntity/HtmlEntity.vue
+++ b/src/components/Tools/HtmlEntity/HtmlEntity.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive,ref,onMounted } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { escape, unescape } from 'lodash';
 import { copy } from '@/utils/string'
 const info = reactive({
@@ -52,12 +53,12 @@ onMounted(() => {
       </div>
 
 
-
-      <!-- <el-divider content-position="left">描述</el-divider>
-      <div>
+      <!-- desc -->
+      <ToolDetail title="描述">
         <el-text>
-        </el-text>
-      </div> -->
+          html实体转义，实体转义成html
+        </el-text> 
+      </ToolDetail>
     </div>
   </div>
 </template>
diff --git a/src/components/Tools/HtmlFormat/HtmlFormat.vue b/src/components/Tools/HtmlFormat/HtmlFormat.vue
index 0c1b848..4a675bd 100644
--- a/src/components/Tools/HtmlFormat/HtmlFormat.vue
+++ b/src/components/Tools/HtmlFormat/HtmlFormat.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string';
 import { Codemirror } from "vue-codemirror";
 import '@codemirror/search';
@@ -67,6 +68,13 @@ const copyRes = async () => {
         <el-text type="danger">{{ info.parseErr }}</el-text>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        提供在线html、xml格式化
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/HttpStatusCode/HttpStatusCode.vue b/src/components/Tools/HttpStatusCode/HttpStatusCode.vue
index 3ec6bb8..a203136 100644
--- a/src/components/Tools/HttpStatusCode/HttpStatusCode.vue
+++ b/src/components/Tools/HttpStatusCode/HttpStatusCode.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 const info = reactive({
   title: "HTTP状态码",
@@ -129,6 +130,13 @@ const tableDataControlFive = reactive([
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        超全面http状态对应的名称和含义解释
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/ImgCut/ImgCut.vue b/src/components/Tools/ImgCut/ImgCut.vue
index 7e95ad5..f5c5b51 100644
--- a/src/components/Tools/ImgCut/ImgCut.vue
+++ b/src/components/Tools/ImgCut/ImgCut.vue
@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref,computed, watch } from 'vue'
 import { UploadProps,UploadRawFile,genFileId } from 'element-plus'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 
 const info = reactive({
   title: "图片切割",
@@ -136,6 +137,14 @@ onMounted(() => {
         <el-empty :image-size="200" description="无预览"/>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        将图片分割成四宫格、九宫格、十六宫格，支持自定义行与列；<br>
+        比如：九宫格切图广泛应用于微信朋友圈，微博等社交媒体。
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/JSFormat/JSFormat.vue b/src/components/Tools/JSFormat/JSFormat.vue
index f6827aa..e43f3f4 100644
--- a/src/components/Tools/JSFormat/JSFormat.vue
+++ b/src/components/Tools/JSFormat/JSFormat.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string';
 import { Codemirror } from "vue-codemirror";
 import '@codemirror/search';
@@ -95,6 +96,13 @@ const copyRes = async () => {
         <el-text type="danger">{{ info.parseErr }}</el-text>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        JS格式化/压缩工具,提供在线JS格式化、JS压缩、JS混淆
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/JWT/JWT.vue b/src/components/Tools/JWT/JWT.vue
index 18667a1..7fb9b2c 100644
--- a/src/components/Tools/JWT/JWT.vue
+++ b/src/components/Tools/JWT/JWT.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive,ref,onMounted } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import {jwtDecode} from 'jwt-decode'
 const info = reactive({
   title: "JWT解析",
@@ -72,24 +73,28 @@ onMounted(() => {
           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>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        解析和解码JSON Web Token（jwt）并显示其内容。<br>
+        <br>
+        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> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/JsonTran/JsonTran.vue b/src/components/Tools/JsonTran/JsonTran.vue
index 3af4f58..c95a7be 100644
--- a/src/components/Tools/JsonTran/JsonTran.vue
+++ b/src/components/Tools/JsonTran/JsonTran.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { transferred, copy } from '@/utils/string';
 import { Codemirror } from "vue-codemirror";
 import { json } from '@codemirror/lang-json';
@@ -122,6 +123,14 @@ const copyRes = async () => {
         <el-text type="danger">{{ info.parseErr }}</el-text>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript的一个子集，但与语言无关，因此在多种编程环境中广泛使用。JSON格式易于人阅读和编写，同时也易于机器解析和生成。它通常用于网络应用程序中服务器与客户端之间的数据传输。<br>
+        JSON 工具提供实时编辑和预览JSON 数据，语法高亮、校验、格式化、转义，去转义、压缩等功能，可以提高阅读修改的效率和准确性
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/MD5/MD5.vue b/src/components/Tools/MD5/MD5.vue
index 7e50ed9..f42045b 100644
--- a/src/components/Tools/MD5/MD5.vue
+++ b/src/components/Tools/MD5/MD5.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { Md5 } from 'ts-md5'
 import { copy } from '@/utils/string'
 const info = reactive({
@@ -83,6 +84,14 @@ const copyRes = async (resStr: string) => {
         </el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线md5加密,md5加密算法,md5加密工具,免费MD5在线加密,可生成32位md5,16位md5
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Markdown/Markdown.vue b/src/components/Tools/Markdown/Markdown.vue
index 123da98..d651618 100644
--- a/src/components/Tools/Markdown/Markdown.vue
+++ b/src/components/Tools/Markdown/Markdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
-
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 const info = reactive({
   title: "在线markdown编辑器",
   content: '',
@@ -21,6 +21,14 @@ const info = reactive({
     <div class="">
       <v-md-editor v-model="info.content" height="500px"></v-md-editor>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线编辑markdown
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Morse/Morse.vue b/src/components/Tools/Morse/Morse.vue
index 64c7b83..d341ba3 100644
--- a/src/components/Tools/Morse/Morse.vue
+++ b/src/components/Tools/Morse/Morse.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 import { toMorse, toText } from '@/utils/morse'
 const info = reactive({
@@ -49,6 +50,14 @@ const copyRes = async (resStr: string) => {
         <el-input type="textarea" :rows="8" v-model="info.tranRes"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        摩尔斯电码（或摩斯电码，Morse code）是一种编码系统，通过不同顺序的信号表示英文字母、数字和标点符号。由美国人艾尔菲德·维尔在协助Samuel Morse发明摩尔斯电报机（1835年）时创造。今天，国际摩尔斯电码仍在使用。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/NumberToChinese/NumberToChinese.vue b/src/components/Tools/NumberToChinese/NumberToChinese.vue
index 50dc4d2..a2f706d 100644
--- a/src/components/Tools/NumberToChinese/NumberToChinese.vue
+++ b/src/components/Tools/NumberToChinese/NumberToChinese.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy, numberToChinese } from '@/utils/string'
 const info = reactive({
   title: "数字转金额大写",
@@ -42,6 +43,13 @@ const copyRes = async (resStr: string) => {
         <el-input type="textarea" :rows="8" v-model="info.tranRes"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        可以将阿拉伯数字金额转换为中文大写金额的在线工具;用户输入阿拉伯数字金额，如100，会立即转换成“壹佰”的中文
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/Palettes/Palettes.vue b/src/components/Tools/Palettes/Palettes.vue
index e70dc41..7890ad5 100644
--- a/src/components/Tools/Palettes/Palettes.vue
+++ b/src/components/Tools/Palettes/Palettes.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 const info = reactive({
   title: "色板",
@@ -70,6 +71,14 @@ const copyRes = async (resStr: string) => {
       </div>
       <div></div>
     </div>
+
+    
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线复制颜色，好看的颜色组合色板
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/Qrcode/Qrcode.vue b/src/components/Tools/Qrcode/Qrcode.vue
index dd08151..7cbc807 100644
--- a/src/components/Tools/Qrcode/Qrcode.vue
+++ b/src/components/Tools/Qrcode/Qrcode.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive,ref } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import QRCodeVue3 from 'qrcode-vue3'
 import { Delete, Plus } from '@element-plus/icons-vue'
 import { ElMessage, type UploadFile } from 'element-plus'
@@ -173,6 +174,14 @@ const gen = () => {
         />
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        根据内容生成二维码，自定义尺寸，纠错级别，颜色等带logo二维码
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Random/Random.vue b/src/components/Tools/Random/Random.vue
index 7d137e1..5c4aadb 100644
--- a/src/components/Tools/Random/Random.vue
+++ b/src/components/Tools/Random/Random.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 // import { copy } from '@/utils/string'
 const info = reactive({
   title: "生成随机数",
@@ -48,6 +49,13 @@ const random = () => {
         <el-button @click="random" type="primary" size="large" disabled v-else>生成...</el-button>
       </div>
     </div>
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        可定制范围内进行随机数字，可用于抽奖、点名等用途
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/RandomPassword/RandomPassword.vue b/src/components/Tools/RandomPassword/RandomPassword.vue
index 42dc629..2c1bbbd 100644
--- a/src/components/Tools/RandomPassword/RandomPassword.vue
+++ b/src/components/Tools/RandomPassword/RandomPassword.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy, genRandomStrByChars } from '@/utils/string'
 import { ElMessage } from 'element-plus'
 const info = reactive({
@@ -148,6 +149,14 @@ onMounted(() => {
         <el-input type="textarea" :autosize="info.autosize" v-model="info.resStr"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线生成密码支持开启或关闭大小写 、数字 、特殊符号，支持自定义字符，长度；批量生成密码
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/RegTest/RegTest.vue b/src/components/Tools/RegTest/RegTest.vue
index de13d14..0219aa9 100644
--- a/src/components/Tools/RegTest/RegTest.vue
+++ b/src/components/Tools/RegTest/RegTest.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { Codemirror } from "vue-codemirror"
 // import { lineNumbers } from '@codemirror/view';
 
@@ -157,6 +158,14 @@ const execMatch = () => {
         <el-input type="textarea" :rows="4" readonly v-model="info.matchRes"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/ScaleTran/ScaleTran.vue b/src/components/Tools/ScaleTran/ScaleTran.vue
index 381b81b..5bcfe74 100644
--- a/src/components/Tools/ScaleTran/ScaleTran.vue
+++ b/src/components/Tools/ScaleTran/ScaleTran.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { ElMessage } from 'element-plus'
 import { copy } from '@/utils/string'
 import { isBinary, isOctal, isDecimal, isHexadecimal } from '@/utils/verify'
@@ -248,6 +249,13 @@ const copyRes = async (index: any) => {
       </div>
     </div>
     
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        进位制其实是一种记数的方式，所以也称为进位记数法/位值计数法，可以用有限的数字符号代表所有的数值。 可使用数字符号的数目称为基数（英文：radix）或底数，基数为n，即可称n进位制，简称n进制。 例如平常生活中我们经常用到的十进制，就是使用10个阿拉伯数字0-9进行记数，所以它的基数就是10，称为十进制。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/SignImage/SignImage.vue b/src/components/Tools/SignImage/SignImage.vue
index c7f907a..04ac898 100644
--- a/src/components/Tools/SignImage/SignImage.vue
+++ b/src/components/Tools/SignImage/SignImage.vue
@@ -2,6 +2,7 @@
 import { ref, reactive } from "vue"
 import  SignImageCore  from './SignImageCore.vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { UploadProps, UploadInstance, UploadRawFile, genFileId } from 'element-plus'
 import { autoDown } from '@/utils/file'
 import { Jh_getTimeStamp } from '@/utils/time'
@@ -80,6 +81,14 @@ const saveImg = () => {
         @getNewImg="info.getNewImg"
       ></SignImageCore>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线图片裁剪，图片标注，图片滤镜，图片画笔、图片旋转、图片文字、图片尺寸调整等操作
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/TextEdit/TextEdit.vue b/src/components/Tools/TextEdit/TextEdit.vue
index d0519b1..f4e8193 100644
--- a/src/components/Tools/TextEdit/TextEdit.vue
+++ b/src/components/Tools/TextEdit/TextEdit.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import '@wangeditor/editor/dist/css/style.css' // 引入富文本 css
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'  //富文本组件
 import { copy } from '@/utils/string'
-import Html from '../Html/Html.vue'
 const info = reactive({
   title: "在线文本编辑/HTML获取",
   mode: 'default',
@@ -92,6 +92,13 @@ const copyRes = async (resStr: string) => {
       />
     </div>
 
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线富文本编辑, html实时预览，在线编辑文本，文本编辑获取html
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/TextRemoveDuplicate/TextRemoveDuplicate.vue b/src/components/Tools/TextRemoveDuplicate/TextRemoveDuplicate.vue
index deac694..580dd52 100644
--- a/src/components/Tools/TextRemoveDuplicate/TextRemoveDuplicate.vue
+++ b/src/components/Tools/TextRemoveDuplicate/TextRemoveDuplicate.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, computed } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 
 const info = reactive({
@@ -48,6 +49,14 @@ const copyRes = async () => {
         <el-input type="textarea" :rows="8" v-model="removeDuplicate"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        可以删除或去除文本或字符串中的重复行
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/TextToImg/TextToImg.vue b/src/components/Tools/TextToImg/TextToImg.vue
index 8946d09..dfa2171 100644
--- a/src/components/Tools/TextToImg/TextToImg.vue
+++ b/src/components/Tools/TextToImg/TextToImg.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, shallowRef, onBeforeUnmount } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import html2canvas from "html2canvas";
 import '@wangeditor/editor/dist/css/style.css' // 引入富文本 css
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'  //富文本组件
@@ -132,9 +133,14 @@ onBeforeUnmount(() => {
         />
         <div ref="poster" class="absolute top-0 -z-10" v-html="valueHtml"></div>
       </div>
-
-      <!-- v-html="valueHtml" -->
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        把文本转换成图片，生成长图，富文本自定义文字排版，可导出png，jpeg格式，可更换背景图，设置宽度，是好用的文本转图片工具
+      </el-text> 
+    </ToolDetail>
   </div>
 </template>
 
diff --git a/src/components/Tools/TimeTran/TimeTran.vue b/src/components/Tools/TimeTran/TimeTran.vue
index 3bcfb9c..869d623 100644
--- a/src/components/Tools/TimeTran/TimeTran.vue
+++ b/src/components/Tools/TimeTran/TimeTran.vue
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, reactive } from 'vue'
 import { VideoPause,VideoPlay,CopyDocument } from '@element-plus/icons-vue'
 import { Jh_getTimeStamp,Jh_timeStampToTime,Jh_convertTimeStamp } from '@/utils/time'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 const info = reactive({
   title: "时间戳转换",
@@ -119,10 +120,13 @@ const copyRes = async () => {
       </div>
     </div>
 
-    <div class="p-4 rounded-2xl bg-white mt-5">
-      <div class="text-xl mt-5 mb-5">时间戳</div>
-      <el-text>Unix 时间戳是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数，不考虑闰秒。</el-text>
-    </div>
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        时间戳，是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数（不考虑闰秒），用于表示一个时间点。然而，这种格式对于人类阅读并不友好，因此需要转换成可读的日期和时间格式。这个工具能够将时间戳快速转换为人类可读的日期时间格式，同时也支持反向转换，即将日期时间转换为时间戳。<br>
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/UUID/UUID.vue b/src/components/Tools/UUID/UUID.vue
index 02fe08d..01d1daf 100644
--- a/src/components/Tools/UUID/UUID.vue
+++ b/src/components/Tools/UUID/UUID.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 import { ElMessage } from 'element-plus'
 import { v4 as uuidv4 } from 'uuid'
@@ -62,6 +63,14 @@ const copyRes = async (resStr: string) => {
         <el-input type="textarea" :autosize="info.autosize" v-model="info.resStr"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线UUID批量生成
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Unicode/Unicode.vue b/src/components/Tools/Unicode/Unicode.vue
index a2afa3b..720f975 100644
--- a/src/components/Tools/Unicode/Unicode.vue
+++ b/src/components/Tools/Unicode/Unicode.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { Codemirror } from "vue-codemirror"
 // import { lineNumbers } from '@codemirror/view';
 import { copy } from '@/utils/string'
@@ -75,6 +76,14 @@ const copyRes = async () => {
         <el-input type="textarea" :rows="8" v-model="info.tranRes"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        Unicode是计算机科学领域里的一项业界标准，有时候我们需要对一段文本或者一段内容进行重新排版编译的时候就需要将获取的值进行转码。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/Unit/Unit.vue b/src/components/Tools/Unit/Unit.vue
index ec72052..20eea11 100644
--- a/src/components/Tools/Unit/Unit.vue
+++ b/src/components/Tools/Unit/Unit.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { useRoute } from "vue-router"
 import Length from './Length.vue'
 import Area from './Area.vue'
@@ -90,6 +91,14 @@ onMounted(() => {
         </el-tabs>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线单位换算、长度单位换算、面积单位换算、时间单位换算、温度单位换算、压力单位换算、热量单位换算、功率单位换算。
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/UrlEncode/UrlEncode.vue b/src/components/Tools/UrlEncode/UrlEncode.vue
index adafa04..cc75584 100644
--- a/src/components/Tools/UrlEncode/UrlEncode.vue
+++ b/src/components/Tools/UrlEncode/UrlEncode.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 import { copy } from '@/utils/string'
 
 const info = reactive({
@@ -54,6 +55,14 @@ const copyRes = async () => {
         <el-input type="textarea" :rows="8" v-model="info.tranRes"></el-input>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线url编码，在线url解码工具
+      </el-text> 
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/WordCount/WordCount.vue b/src/components/Tools/WordCount/WordCount.vue
index 943332e..5b86a5c 100644
--- a/src/components/Tools/WordCount/WordCount.vue
+++ b/src/components/Tools/WordCount/WordCount.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
-
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
 const info = reactive({
   title: "在线字数统计",
   content: '',
@@ -52,6 +52,14 @@ const changeContent = () => {
         <div class="ml-3"><el-text>空白字符：{{ info.emptyNum }}</el-text></div>
       </div>
     </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线统计字数、汉字、标点、数字、字母、字符
+      </el-text>
+    </ToolDetail>
+
   </div>
 </template>
 
diff --git a/src/components/Tools/tools.ts b/src/components/Tools/tools.ts
index b186f43..c548d3d 100644
--- a/src/components/Tools/tools.ts
+++ b/src/components/Tools/tools.ts
@@ -57,7 +57,7 @@ export function getToolsCate() {
           id: 1,
           title: 'Json在线转换',
           logo: '/images/logo/json.png',
-          desc: '在线编辑json, 语法检查',
+          desc: '提供实时编辑和预览JSON 数据，语法高亮、校验、格式化、转义，去转义、压缩等功能，可以提高阅读修改的效率和准确性',
           url: '/json/',
           cateId: 2,
           cate: '开发运维',
@@ -330,7 +330,7 @@ export function getToolsCate() {
           id: 1,
           title: '在线图片处理',
           logo: '/images/logo/img.png',
-          desc: '在线图片裁剪，标注，滤镜，画等操作',
+          desc: '在线图片裁剪，图片标注，图片滤镜，图片画笔、图片旋转、图片文字等操作',
           url: '/signimage/',
           cateId: 5,
           cate: '图片处理',
diff --git a/src/router/router.ts b/src/router/router.ts
index 1230d3f..0cefa78 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -38,7 +38,7 @@ export const constantRoute = [
     meta: {
       title: "Json在线转换",
       keywords: 'json编辑器，json格式化,json压缩,json转义,json去转义',
-      description: 'json编辑器,json解析,json格式化,json压缩,json转义,json去转义',
+      description: '提供实时编辑和预览JSON 数据，语法高亮、校验、格式化、转义，去转义、压缩等功能，可以提高阅读修改的效率和准确性',
     }
   },
   {
@@ -97,8 +97,8 @@ export const constantRoute = [
     name: 'signimage',
     meta: {
       title: "在线编辑图片",
-      keywords: '图片裁剪，图片滤镜，图片旋转，图片编辑，美化图片',
-      description: '图片裁剪，图片滤镜，图片旋转，图片编辑，美化图片',
+      keywords: '在线图片裁剪，图片标注，图片滤镜，图片画笔、图片旋转、图片文字，图片美,图片尺寸调整化',
+      description: '在线图片裁剪，图片标注，图片滤镜，图片画笔、图片旋转、图片文字,图片尺寸调整等操作',
     }
   },
   {
@@ -336,7 +336,7 @@ export const constantRoute = [
     component: () => import('@/components/Tools/ImgCut/ImgCut.vue'),
     name: 'imgCut',
     meta: {
-      title: "图片分割",
+      title: "图片切割",
       keywords: '图片分割,图片切割,四宫格,九宫格,十六宫格',
       description: '将图片分割成四宫格、九宫格、十六宫格，支持自定义行与列',
     }