feat: pinia结合mock实现按分类和标题搜索工具，布局和样式调整

src/components/Header/Header.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-// import { Search } from '@element-plus/icons-vue'
-// const searchInput = ref('')
-const appName = ref('工具坊')
-const appNet = ref('tools.ranblogs.com')
-</script>
-
-<template>
-  <header class="">
-    <nav class="h-20 w-full leading-10 flex flex-col justify-between pt-2 pb-2">
-      <el-row>
-        <el-col :xl="4" :md="1"></el-col>
-        <el-col :xl="16" :md="22">
-          <div class="flex items-center justify-between">
-            <!-- left -->
-            <router-link class="ml-4 flex flex-row" to="/">
-              <img class="h-10 w-auto rounded-lg lg:h-16 mr-2 mt-auto mb-auto" src="../../assets/logo.png" :alt="appNet">
-              <div class="flex flex-col  mt-auto mb-auto">
-                <div class="text-xl">{{ appName }}</div>
-                <div class="text-sm text-gray-500">{{ appNet }}</div>
-              </div>
-            </router-link>
-
-            <!-- right -->
-            <div class=" w-full md:w-auto flex hidden md:block">
-              <ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end">
-                <!-- <li class="mr-5">
-                  <el-input v-model="searchInput" placeholder="搜索工具" class="w-full max-w-xl h-10" :prefix-icon="Search"/>
-                </li> -->
-                <li class="hover:text-blue-500">语言</li>
-                <li class="ml-5 hover:text-blue-500">加入收藏</li>
-                <li class="ml-5 hover:text-blue-500">常见问题</li>
-              </ul>
-            </div>
-          </div>
-        </el-col>
-        <el-col :xl="4" :md="1" class="flex"></el-col>
-      </el-row>
-      
-    </nav>
-  </header>
-</template>
-
-<style scoped>
-
-</style>

src/components/Home/Home.vue

@@ -1,138 +1,48 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, onMounted } from 'vue';
 import { RouterLink } from "vue-router"
-const info = reactive({
-  cates: [
-    {
-      id: 1,
-      value: '全部工具',
-    },
-    {
-      id: 2,
-      value: '文本处理'
-    },
-    {
-      id: 3,
-      value: '查询相关'
-    },
-    {
-      id: 4,
-      value: '教育学术'
-    },
-    {
-      id: 5,
-      value: '设计工具'
-    },
-    {
-      id: 6,
-      value: '开发运维'
-    }
-  ],
-  tools: [
-    {
-      id: 1,
-      value: '时间戳转换',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线时间戳转换工具以及获取当前时间戳',
-      url: '/timetran',
-      cate: '开发运维',
-    },
-    {
-      id: 1,
-      value: 'MD5在线加密',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: 'MD5在线加密,长度包含32位、16位',
-      url: '/MD5',
-      cate: '开发运维',
-    },
-    {
-      id: 1,
-      value: 'Json在线转换',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线编辑json, 语法检查',
-      url: '/json',
-      cate: '开发运维',
-    },
-    {
-      id: 1,
-      value: '正则测试工具',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '正则表达式测试工具, 常用正则表达式',
-      url: '/reg',
-      cate: '开发运维',
-    },
-    {
-      id: 1,
-      value: 'Unicode转中文',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: 'Unicode和中文的相互转换',
-      url: '/unicode',
-      cate: '开发运维',
-    },
-    {
-      id: 1,
-      value: '字数统计',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线统计字符串的字数、段落、标点符号数量',
-      url: '/wordCount',
-      cate: '文本处理',
-    },
-    {
-      id: 1,
-      value: 'IP查询',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线查询ip地址、ip归属地',
-      url: '/ip',
-      cate: '查询相关',
-    },
-    {
-      id: 1,
-      value: '常用进制转换',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '制转换器是一个在线进制转换工具,可在二进制、八进制、十进制、十六进制、三十二进制以及36以内任意进制之间相互转换',
-      url: '/scaletran',
-      cate: '教育学术',
-    },
-    {
-      id: 1,
-      value: '在线图片处理',
-      img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线图片处理',
-      url: '/signimage',
-      cate: '设计工具',
-    }
-  ]
+import { Star } from '@element-plus/icons-vue'
+import { useToolsStore } from '@/store/modules/tools'
+
+//store
+const toolsStore = useToolsStore()
+//查询参数
+const searchParam = reactive({
+  cateId: 0,
+  title: ''
+})
+const getToolsList = async () => {
+  try {
+    await toolsStore.getTools(searchParam)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  getToolsList()
 })
 </script>
 
 <template>
   <div>
-    <!-- cates -->
-    <div class="mr-3">
-      <ul class="flex bg-gray-100  h-10 rounded leading-10 pl-3">
-        <li v-for="(item, index) in info.cates" :key="index" class="flex items-center">
-           <el-text>{{ index != 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;' : '' }} </el-text>
-           <el-text class="hover:text-blue-400 hover:underline hover:decoration-4 hover:underline-offset-[6px]">{{ item.value }}</el-text>
-        </li>
-      </ul>
-    </div> 
-
     <!-- card -->
-    <div class="mr-3 mt-3 flex justify-between flex-wrap self-card-div" :gutter="10">
-        <router-link v-for="(item, index) in info.tools" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray border w-[32.5%] p-2 bg-gray-50 hover:shadow-md">
-          <div class="flex items-center">
+    <div class="mr-3 flex justify-between flex-wrap self-card-div" :gutter="10">
+        <router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray border w-[32.5%] p-2 bg-gray-50 hover:shadow-md">
+          <div class="flex items-center border-b pb-2">
             <el-image :src="item.img" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
-            <div class="flex flex-col ml-2">
+            <div class="flex flex-col ml-2 w-full">
               <div class="flex">
                 <div class="font-semibold text-lg ">{{ item.value }}</div>
-                <!-- <div>加入收藏</div> -->
               </div>
-              <el-text line-clamp="2">{{ item.desc }}</el-text>
+              <div class="flex justify-between">
+                <el-text size="small">{{ item.cate }}</el-text>
+                <el-button :icon="Star" circle size="small"/>
+              </div>
             </div>
           </div>
-          <el-divider border-style="double" class="m-1" />
-          <div class="flex items-center justify-between">
-            <el-text size="small">http://tools.ranblogs.com/timeTran</el-text>
+          <div class="flex items-center justify-between mt-2">
+            <el-text line-clamp="1">{{ item.desc }}</el-text>
           </div>
         </router-link>
     </div>

src/components/Ip/Ip.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
 import { getIp } from '@/api/ip'
 import { isIp } from '@/utils/verify'
 import { ElMessage } from 'element-plus'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 
 const info = reactive({
   title: "IP查询",
@@ -43,16 +43,7 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div>
       <div class="flex">

src/components/JsonTran/JsonTran.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import { transferred, copy } from '@/utils/string';
 import { Codemirror } from "vue-codemirror";
 import { json } from '@codemirror/lang-json';
@@ -80,16 +80,7 @@ const copyRes = async () => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div class="">
       

src/components/Layout/DetailHeader/DetailHeader.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Back } from '@element-plus/icons-vue'
+const props = defineProps({
+  title: String
+})
+</script>
+
+<template>
+  <div>
+    <div class="text-gray-600">
+      <div class="flex">
+        <a href="/" class="flex items-center">
+          <el-icon color="blue"><Back /></el-icon>
+          <div>返回首页</div>
+        </a>
+      </div>
+    </div>
+
+    <div class="text-xl mt-5 mb-5">
+      {{ props.title }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/Layout/Floor/Floor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const beianNo = ref('xxxxx备案号')
+const beianNo = ref('粤ICP备19038804号-1')
 const copyright = ref('ranblogs.com')
 </script>
 

src/components/Layout/Header/Header.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { Search } from '@element-plus/icons-vue';
+import { useToolsStore } from '@/store/modules/tools'
+import { ElMessageBox } from 'element-plus'
+
+const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
+const appNet = ref('tools.ranblogs.com')
+//store
+const toolsStore = useToolsStore()
+//查询参数
+const searchParam = reactive({
+  cateId: 0,
+  title: ''
+})
+//获取分类
+const getToolCates = async () => {
+  try {
+    await toolsStore.getToolCate()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+//search
+const search = async () => {
+  try {
+    await toolsStore.getTools(searchParam)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+//选择分类
+const chooseCate = (cateId: number) => {
+  searchParam.cateId = cateId
+  search()
+}
+
+//收藏
+const collect = () => {
+  ElMessageBox({
+    title: '提示',
+    message: '请使用快捷键`Ctrl+D`进行收藏'
+  })
+}
+
+onMounted(() => {
+  getToolCates()
+})
+</script>
+
+<template>
+  <header class="">
+    <nav class="h-28 w-full leading-10 flex flex-col justify-between pt-2 pb-2">
+      <el-row>
+        <el-col :xl="4" :md="1"></el-col>
+        <el-col :xl="16" :md="22">
+          <div class="flex items-center justify-between">
+            <!-- left -->
+            <router-link class="ml-4 flex flex-row" to="/">
+              <img class="h-10 w-auto rounded-lg lg:h-16 mr-2 mt-auto mb-auto" src="@/assets/logo.png" :alt="appNet">
+              <div class="flex flex-col  mt-auto mb-auto">
+                <div class="text-xl">{{ appName }}</div>
+                <div class="text-sm text-gray-500">{{ appNet }}</div>
+              </div>
+            </router-link>
+
+            <!-- right -->
+            <div class=" w-full md:w-auto flex hidden md:block">
+              <ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center">
+                <li class="hover:text-blue-500">
+                  <el-button link size="large" @click="collect">收藏本站</el-button>
+                </li>
+                <li class="ml-3 hover:text-blue-500">
+                  <!-- <el-button round>登录/注册</el-button> -->
+                </li>
+              </ul>
+            </div>
+          </div>
+          
+          <el-row class="mt-3">
+            <el-col :xl="19" :md="19">
+              <!-- cates -->
+              <div class="mr-3">
+                <ul class="flex bg-gray-100  h-10 rounded leading-10 pl-3">
+                  <li v-for="(item, index) in toolsStore.cates" :key="index" class="flex items-center">
+                    <el-text>{{ index != 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;' : '' }} </el-text>
+                    <div 
+                      class="hover:text-blue-400 hover:underline hover:decoration-2 hover:underline-offset-[6px] text-sm" :class="searchParam.cateId == item.id ? 'text-blue-400 underline decoration-2 underline-offset-[6px]' : ''"
+                      @click="chooseCate(item.id)"
+                    >{{ item.value }}</div>
+                  </li>
+                </ul>
+              </div> 
+            </el-col>
+            <el-col :xl="5" :md="5">
+              <!-- search -->
+              <div>
+                <el-input 
+                  v-model="searchParam.title" 
+                  placeholder="搜索工具" 
+                  class="w-full max-w-xl h-10" 
+                  @keyup.enter.native="search">
+                  <template #append>
+                    <el-button :icon="Search" @click="search"/>
+                  </template>
+                </el-input>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :xl="4" :md="1" class="flex"></el-col>
+      </el-row>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+</style>

src/components/Layout/Right/Right.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue';
 import { Tools } from '@element-plus/icons-vue'
 import { reactive } from 'vue';
 const info = reactive({
-  searchInput: '',
   hotTools: [
     {
       id: 1,
@@ -23,7 +21,7 @@ const info = reactive({
     },
     {
       id: 1,
-      value: '在线代码运行'
+      value: '在线图片处理'
     }
   ]
 })
@@ -31,10 +29,7 @@ const info = reactive({
 
 <template>
   <div>
-    <!-- search -->
-    <div>
-      <el-input v-model="info.searchInput" placeholder="搜索工具" class="w-full max-w-xl h-10" :suffix-icon="Search"/>
-    </div>
+    
 
     <!-- hot tools -->
     <div class="mt-3 border-solid rounded border-gray border p-3">

src/components/MD5/MD5.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import clipboard3 from 'vue-clipboard3'
 import { ElMessage } from 'element-plus';
 import { Md5 } from 'ts-md5'
@@ -59,16 +59,7 @@ const copyRes = async (resStr: string) => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div class="">
       <div>

src/components/RegTest/RegTest.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import { Codemirror } from "vue-codemirror"
 
 const info = reactive({
@@ -116,16 +116,7 @@ const execMatch = () => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div>
       <div>

src/components/ScaleTran/ScaleTran.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import { ElMessage } from 'element-plus'
 import { copy } from '@/utils/string'
 import { isBinary, isOctal, isDecimal, isHexadecimal } from '@/utils/verify'
@@ -194,16 +194,7 @@ const copyRes = async (index: any) => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div class="flex">
       <div class="mr-2 w-full">

src/components/SignImage/SignImage.vue

@@ -1,24 +1,29 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue"
 import  SignImageCore  from './SignImageCore.vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import { UploadProps, UploadInstance, UploadRawFile, genFileId } from 'element-plus'
+import { autoDown } from '@/utils/file'
+import { Jh_getTimeStamp } from '@/utils/time'
 
 // 图片处理
-// const newImg = ref("")
 const info = reactive({
-  title:"在线编辑图片", // 弹框标题
-  previewsImgUrl:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", //图片地址
+  title:"在线编辑图片",
+  //图片地址
+  previewsImgUrl:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", 
   //获取处理完的图片
-  getNewImg:(val: string) => {
-    console.log('getNewImg:' + val)
-    //newImg.value = window.serverUrl.IMG_SERVER + val
+  getNewImg:(url: string) => {
+    //下载
+    autoDown(url, Jh_getTimeStamp() + '.png')
   },
-  cKey: 1,  //用于刷新组件视图
+  //用于刷新组件视图
+  cKey: 1,  
 })
 
 //使用 upload ref
-const refSignImageCore = ref<UploadInstance>()
+const upload = ref<UploadInstance>()
+//使用 SignImageCore ref
+const refSignImageCore = ref<any>()
 
 //上传文件发生变化
 const uploadChange: UploadProps['onChange'] = (file) => {
@@ -30,33 +35,29 @@ const uploadChange: UploadProps['onChange'] = (file) => {
 
 //钩子 - 文件上传超出限制
 const uploadExceed: UploadProps['onExceed'] = (files) => {
-  refSignImageCore.value!.clearFiles()
+  upload.value!.clearFiles()
   const file = files[0] as UploadRawFile
   file.uid = genFileId()
-  refSignImageCore.value!.handleStart(file)
+  upload.value!.handleStart(file)
+}
+
+//保存图片
+const saveImg = () => {
+  refSignImageCore.value!.save()
 }
 </script>
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div class="flex flex-col mb-3 h-[38rem]">
       <div class="mb-3 flex flex-row-reverse">
         <!-- save -->
-        <el-button type="primary" class="ml-2">保存</el-button>
+        <el-button type="primary" class="ml-2" @click="saveImg">保存</el-button>
         <!-- upload -->
         <el-upload
-          ref="refSignImageCore"
+          ref="upload"
           :limit="1"
           @exceed="uploadExceed"
           accept="image/*"
@@ -71,6 +72,7 @@ const uploadExceed: UploadProps['onExceed'] = (files) => {
       </div>
       <!-- 图片处理框 -->
       <SignImageCore 
+        ref="refSignImageCore"
         :key="info.cKey"
         :dialogVisible.sync="true" 
         :title="info.title"

src/components/SignImage/SignImageCore.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, nextTick } from 'vue'
 import 'tui-image-editor/dist/tui-image-editor.css'
 // import 'tui-color-picker/dist/tui-color-picker.css'
+import { base64ToBlod } from '@/utils/file'
 import ImageEditor from 'tui-image-editor'
 
 // 中文菜单
@@ -195,37 +196,33 @@ const init = ()=> {
         name: 'image'
       },
       menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
-      initMenu: 'draw', // 默认打开的菜单项
-      menuBarPosition: 'bottom', // 菜单所在的位置
+      initMenu: 'none', // 默认打开的菜单项
+      menuBarPosition: 'left', // 菜单所在的位置
       locale: locale_zh, // 本地化语言为中文
       theme: customTheme // 自定义样式
     },
     cssMaxWidth: 400, // canvas 最大宽度
     cssMaxHeight: 500 // canvas 最大高度
   })
-  document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px' // 调整图片显示位置
+  document.getElementsByClassName('tui-image-editor-main')[0].style.top = '0' // 调整图片显示位置
   document.getElementsByClassName(
     'tie-btn-reset tui-image-editor-item help'
   )[0].style.display = 'none' // 隐藏顶部重置按钮
 }
 
 // 保存图片，并上传
-const save = ()=> {
-  const base64String = instance.value.toDataURL() // base64 文件
-  const data = window.atob(base64String.split(',')[1])
-  const ia = new Uint8Array(data.length)
-  for (let i = 0; i < data.length; i++) {
-    ia[i] = data.charCodeAt(i)
-  }
-  const blob = new Blob([ia], { type: 'image/png' }) // blob 文件
-  const form = new FormData()
-  form.append("avatarfile", blob);
-  uploadAvatar(form).then(res=>{
-      emit('getNewImg',res.imgUrl);
-      closeDialog()
-    })
+const save = () => {
+  // base64 文件
+  const base64String = instance.value.toDataURL() 
+  //转换blod
+  const url = base64ToBlod(base64String)
+  //传递给父组件
+  emit('getNewImg', url);
 }
 
+defineExpose({
+  save
+})
 </script>
 
 <template>

src/components/TimeTran/TimeTran.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive } from 'vue'
-import { VideoPause,VideoPlay,Back,CopyDocument } from '@element-plus/icons-vue'
+import { VideoPause,VideoPlay,CopyDocument } from '@element-plus/icons-vue'
 import { Jh_getTimeStamp,Jh_timeStampToTime,Jh_convertTimeStamp } from '@/utils/time'
 import clipboard3 from 'vue-clipboard3'
 import { ElMessage } from 'element-plus';
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 const info = reactive({
   title: "时间戳转换",
   nowTime: Jh_getTimeStamp(),
@@ -99,16 +100,7 @@ const copyStamp = async () => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div class="flex flex-col">
       <div class="flex flex-direction">

src/components/Unicode/Unicode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import { Codemirror } from "vue-codemirror"
 import { copy } from '@/utils/string'
 
@@ -49,16 +49,7 @@ const copyRes = async () => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div>
       <div>

src/components/WordCount/WordCount.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 
 const info = reactive({
   title: "在线字数统计",
@@ -36,16 +36,7 @@ const changeContent = () => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div>
       <div>