feat: 工具详情页添加描述

naroat · Jun 20, 2024 · 6082f1d · 6082f1d
1 parent 95961dc
commit 6082f1d
Show file tree

Hide file tree

Showing 44 changed files with 436 additions and 62 deletions.
diff --git a/src/components/Layout/ToolDetail/ToolDetail.vue 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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
-
-
+    </div>
 
-      <!-- <el-divider content-position="left">描述</el-divider>
-      <div class="text-left">
-        <el-text>
-          在 CSS 中，颜色无处不在，它可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 Hex 和 RGB，其实表示颜色的方式有很多；
+    <!-- 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">
-              - 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> -->
+            - 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>
   </div>
 </template>
 

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