feat: 平板和小屏幕适配

fix: debug
feat: 首页改版
2024-02-19 15:03:16 +08:00 · 2024-02-19 11:35:47 +08:00 · 2024-02-19 11:19:26 +08:00
41 changed files with 836 additions and 298 deletions
@@ -27,7 +27,7 @@
      })();
    </script>
  </head>
-  <body>
+  <body style="background-color: var(--base-gray)">
    <!--[if lt IE 9]>
    <div class="notice chromeframe">您的浏览器版本<strong>很旧很旧</strong>，为了正常地访问网站，请升级您的浏览器</div>
    <![endif]-->
@@ -220,32 +220,267 @@ function getTools() {
  ]
 }

-//获取tools分类
+//获取tools分类已经对应的工具
 function getToolsCate() {
  return [
    {
      id: 2,
-      title: '开发运维'
+      title: '开发运维',
+      icon: '',
+      list: [
+        {
+          id: 1,
+          title: '随机密码生成',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/keywords.png',
+          desc: '密码生成器、随机字符串生成,批量生成',
+          url: '/random_password',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'URL编码/解码',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/url.png',
+          desc: 'URL在线编码解码工具（UrlEncode编码 和 UrlDecode解码）',
+          url: '/urlencode',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'UUID生成器',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E7%BA%BF%E6%80%A7-%E7%94%9F%E6%88%90.png',
+          desc: '批量生成UUID',
+          url: '/uuid',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        
+        {
+          id: 1,
+          title: 'ASCII码表',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/icon_%E7%BC%96%E7%A0%81%E5%AF%B9%E7%85%A7.png',
+          desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表',
+          url: '/ascii',
+          cateId: 2,
+          cate: '开发运维'
+        },
+        {
+          id: 1,
+          title: '时间戳转换',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/Time.png',
+          desc: '在线时间戳转换工具以及获取当前时间戳',
+          url: '/timetran',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'MD5在线加密',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/Password%20fishing.png',
+          desc: 'MD5在线加密,长度包含32位、16位',
+          url: '/MD5',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'Json在线转换',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/json.png',
+          desc: '在线编辑json, 语法检查',
+          url: '/json',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: '正则测试工具',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/reg.png',
+          desc: '正则表达式测试工具, 常用正则表达式',
+          url: '/reg',
+          cateId: 2,
+          cate: '开发运维',
+        },
+        {
+          id: 1,
+          title: 'Unicode转中文',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/union.png',
+          desc: 'Unicode和中文的相互转换',
+          url: '/unicode',
+          cateId: 2,
+          cate: '开发运维',
+        }
+      ]
    },
    {
      id: 3,
-      title: '文本处理'
+      title: '文本处理',
+      icon: '',
+      list: [
+        {
+          id: 1,
+          title: '文本对比',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/diff.png',
+          desc: '文本差异比对支持中文、英文、代码比对',
+          url: '/diff',
+          cateId: 3,
+          cate: '文本处理'
+        },
+        {
+          id: 1,
+          title: 'markdown编辑器',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/file-markdown-fill.png',
+          desc: '在线创建或编辑markdown, 实时预览，导出markdown',
+          url: '/markdown',
+          cateId: 3,
+          cate: '文本处理'
+        },
+        {
+          id: 1,
+          title: '文本转图片',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/text_to_img.png',
+          desc: '把文本转换成图片，生成长图，具有超多个性文字排版',
+          url: '/textToImg',
+          cateId: 3,
+          cate: '文本处理'
+        },
+        {
+          id: 1,
+          title: '摩斯电码',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/medium.png',
+          desc: '支持中文的摩斯电码编码解码',
+          url: '/morse',
+          cateId: 3,
+          cate: '文本处理'
+        },
+        {
+          id: 1,
+          title: '字数统计',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/ico_%E6%95%B0%E6%8D%AE%E7%BB%9F%E8%AE%A1_%E5%B7%A5%E4%BD%9C%E9%87%8F%E7%BB%9F%E8%AE%A1.png',
+          desc: '在线统计字符串的字数、段落、标点符号数量',
+          url: '/wordCount',
+          cateId: 3,
+          cate: '文本处理',
+        }
+      ]
    },
    {
      id: 4,
-      title: '教育学术'
+      title: '教育学术',
+      icon: '',
+      list: [
+        {
+          id: 1,
+          title: '单位换算',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E5%8D%95%E4%BD%8D%E6%8D%A2%E7%AE%97.png',
+          desc: '在线重量、长度、面积、时间、角度、速度、温度、压力、热量、功率等换算',
+          url: '/unit',
+          cateId: 4,
+          cate: '教育学术'
+        },
+        {
+          id: 1,
+          title: '常用进制转换',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2.png',
+          desc: '在线进制转换工具,可在2到64进制之间相互转换',
+          url: '/scaletran',
+          cateId: 4,
+          cate: '教育学术',
+        }
+      ]
    },
    {
      id: 5,
-      title: '设计工具'
+      title: '设计工具',
+      icon: '',
+      list: [
+        {
+          id: 1,
+          title: '色板',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E8%B0%83%E8%89%B2%E6%9D%BF.png',
+          desc: '包含纯色、渐变与阶梯色和常用色彩组合',
+          url: '/palettes',
+          cateId: 5,
+          cate: '设计工具'
+        },
+        {
+          id: 1,
+          title: '二维码生成',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E4%BA%8C%E7%BB%B4%E7%A0%81.png',
+          desc: '在线生成带logo、透明、艺术的二维码',
+          url: '/qrcode',
+          cateId: 5,
+          cate: '设计工具'
+        },
+        {
+          id: 1,
+          title: '在线图片处理',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/img.png',
+          desc: '在线图片裁剪，标注，滤镜，画等操作',
+          url: '/signimage',
+          cateId: 5,
+          cate: '设计工具',
+        }
+      ]
    },
    {
      id: 6,
-      title: '查询相关'
+      title: '查询相关',
+      icon: '',
+      list: [
+        {
+          id: 1,
+          title: 'IP查询',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/IP.png',
+          desc: '在线查询ip地址、ip归属地',
+          url: '/ip',
+          cateId: 6,
+          cate: '查询相关',
+        }
+      ]
    },
    {
      id: 7,
-      title: '其他'
+      title: '其他',
+      icon: '',
+      list: [
+        {
+          id: 1,
+          title: '生成随机数',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/randomnum.png',
+          desc: '可定制范围内进行随机数字，可用于抽奖、点名等用途',
+          url: '/random',
+          cateId: 7,
+          cate: '其他'
+        },
+        {
+          id: 1,
+          title: '数字转金额大写',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/text%20recognition.png',
+          desc: '在线数字一键转换成人民币大写，中文大写转换数字',
+          url: '/numberToChinese',
+          cateId: 7,
+          cate: '其他'
+        },
+        {
+          id: 1,
+          title: '帮我决定',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/choose.png',
+          desc: '选择困难，难以决定，今天吃什么，现在做什么，自定义选项都给你安排的明明白白',
+          url: '/decision',
+          cateId: 7,
+          cate: '其他'
+        },
+        {
+          id: 1,
+          title: '手持弹幕',
+          logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E5%BC%B9%E5%B9%95.png',
+          desc: '手持滚动弹幕',
+          url: '/barrage',
+          cateId: 7,
+          cate: '其他',
+        }
+      ]
    }
  ]
 }
@@ -1,33 +1,49 @@
 <script setup lang="ts">
 import Header from '@/components/Layout/Header/Header.vue'
+import Left from '@/components/Layout/Left/Left.vue'
 import Floor from '@/components/Layout/Floor/Floor.vue'
-import Right from '@/components/Layout/Right/Right.vue'
+// import Right from '@/components/Layout/Right/Right.vue'
+import { useComponentStore } from '@/store/modules/component'
+
+//store
+const componentStore = useComponentStore()
+
 </script>

 <template>
-  <Header></Header>
-  <div class="w-full flex flex-col justify-between mb-20">
-    <el-row>
-      <el-col :xl="4" :lg="3" :sm="1" class=""></el-col>
-      <el-col :xl="16" :lg="18" :sm="22" class="mt-4">
-        <el-row class="flex-1">
-          <el-col :lg="19" :sm="19" class="">
-            <router-view v-slot="{ Component, route }">
-              <transition name="animation" mode="out-in">
-                <component :is="Component" :key="route.path"></component>
-              </transition>
-            </router-view>
-          </el-col>
-          <el-col :lg="5" :sm="5" class="">
-            <Right/>
-          </el-col>
-        </el-row>
-      </el-col>
-      <!-- <el-col :lg="4" :sm="1" class="flex bg-gray-200"></el-col> -->
-      <el-col :xl="4" :lg="3" :sm="1"></el-col>
-    </el-row>
-  </div>
-  <Floor></Floor>
+  <el-container>
+    <!-- left -->
+    <el-aside class="fixed top-0 left-0 h-full z-10 c-md:block c-sm:hidden c-xs:hidden" width="240px" v-show="!componentStore.leftCom">
+        <Left></Left>
+    </el-aside>
+    <el-drawer 
+      show-close
+      size="240px" 
+      :with-header="false" 
+      v-model="componentStore.leftComDrawer" 
+      direction="ltr"
+      >
+      <Left bgColor="#fff"></Left>
+    </el-drawer>
+
+    <!-- right -->
+    <el-container  :class="!componentStore.leftCom ? 'c-md:ml-[240px]' : ''">
+      <el-header>
+        <Header/>
+      </el-header>
+      <el-main>
+        <router-view v-slot="{ Component, route }">
+          <transition name="animation" mode="out-in">
+            <component :is="Component" :key="route.path"></component>
+          </transition>
+        </router-view>
+      </el-main>
+      <el-footer class="md:mb-6 mt-12 c-xs:mb-12">
+        <Floor />
+      </el-footer>
+    </el-container>
+
+  </el-container>
 </template>

 <style scoped>
@@ -22,7 +22,8 @@ export interface ToolCate {
  img: string,
  desc: string,
  url: string,
-  cate: string
+  cate: string,
+  list: ToolsInfo[]
 }

 //tools list response
@@ -277,10 +277,10 @@ const tableDataNonStandard = reactive([
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white">
      <el-table :data="tableDataControlCodes" class="w-full">
        <el-table-column label="ASCII 控制字符 (字符编码: 0-31)" align="center">
          <el-table-column prop="dec" label="十进制DEC" width="120" />
@@ -57,7 +57,7 @@ onBeforeMount(() => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

    <!-- 全屏 -->
@@ -83,7 +83,7 @@ onBeforeMount(() => {
      </template>
    </vue-danmaku>

-    <div>
+    <div class="p-4 rounded-2xl bg-white">
      <div class="flex mb-2">
        <el-text class="w-20">弹幕内容:</el-text>
        <div class="w-72"><el-input v-model="info.content" type="textarea" rows="3"></el-input></div>
@@ -60,10 +60,10 @@ onMounted(() => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white">
      <div>
        <el-radio-group v-model="info.checked" @change="changeCheckBox">
          <el-radio label="0" size="large">吃什么</el-radio>
@@ -16,7 +16,7 @@ const info = reactive({
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

    <div class="">
@@ -13,7 +13,7 @@ const info = reactive({
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

    <div class="">
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// import { reactive } from 'vue'
+// import { copy } from '@/utils/string'
+// const info = reactive({
+//   title: "关于本站",
+// })
+
+//copy
+// const copyRes = async (resStr: string) => {
+//   copy(resStr)
+// }
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <div class="bg-white rounded-md p-5">
+      <br>
+      <p>本项目是一个开源工具站</p>
+      <br>
+      <p>本项目开源地址：<el-link href="https://github.com/taoran1401/tools-web">https://github.com/taoran1401/tools-web</el-link></p>
+      <br>
+      <p class="font-bold">联系作者/问题反馈</p>
+      <br>
+      <p>反馈中心：<el-link href="https://txc.qq.com/products/619520">https://txc.qq.com/products/619520</el-link></p>
+      <br>
+      <p>邮箱：taoran0796@163.com</p>
+      <br>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -1,58 +1,100 @@
 <script setup lang="ts">
-import { reactive, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { RouterLink } from "vue-router"
 import { Star } from '@element-plus/icons-vue'
 import { useToolsStore } from '@/store/modules/tools'
-
+import { useRoute } from "vue-router"
 //store
 const toolsStore = useToolsStore()
-//查询参数
-const searchParam = reactive({
-  cateId: 0,
-  title: ''
-})
-const getToolsList = async () => {
+const route = useRoute()
+const getToolsCate = async () => {
  try {
-    await toolsStore.getTools(searchParam)
+    await toolsStore.getToolCate()
  } catch (error) {
    console.log(error)
  }
 }

 onMounted(() => {
-  getToolsList()
+  getToolsCate()
+  if (route.query && route.query.value) {//底部导航跳转过来的则定位到响应位置
+      document?.querySelector('#' + `${route.query.value}`)?.scrollIntoView();
+  } else {//其他位置跳转过来不需要定位的则定位到顶部
+      document?.querySelector('#collect')?.scrollIntoView()
+  }
 })
 </script>

 <template>
-  <div>
-    <!-- card -->
-    <div class="mr-3 flex justify-between flex-wrap self-card-div c-xs:ml-3" :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 w-[32.5%] p-2 bg-gray-100 hover:shadow-md c-xs:w-[99.5%]">
-          <div class="flex items-center border-b pb-2">
-            <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
-            <div class="flex flex-col ml-2 w-full">
-              <div class="flex">
-                <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
-              </div>
-              <div class="flex justify-between">
-                <el-text size="small">{{ item.cate }}</el-text>
-                <el-button :icon="Star" circle size="small"/>
+  <div class="md:mr-6 c-xs:mr-0">
+    <!-- collect -->
+    <div id="collect">
+      <!-- cate title -->
+      <div class="md:mt-8 md:mb-8 c-xs:mt-1 c-xs:mb-4 text-xl font-bold text-[--base-black]">
+        我的收藏
+      </div>
+      <!-- card -->
+      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10" v-if="toolsStore.collect.length > 0">
+          <router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5">
+            <div class="flex items-center border-b pb-2">
+              <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
+              <div class="flex flex-col ml-2 w-full">
+                <div class="flex">
+                  <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
+                </div>
+                <div class="flex justify-between">
+                  <el-text size="small">{{ item.cate }}</el-text>
+                  <el-button :icon="Star" circle size="small"/>
+                </div>
              </div>
            </div>
-          </div>
-          <div class="flex items-center justify-between mt-2">
-            <el-text line-clamp="1">{{ item.desc }}</el-text>
-          </div>
-        </router-link>
+            <div class="flex items-center justify-between mt-2">
+              <el-text line-clamp="2">{{ item.desc }}</el-text>
+            </div>
+          </router-link>
+          <!-- 占位 div -->
+          <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%]"></div>
+      </div>
+      <div v-else class="bg-white rounded-2xl">
+        <el-empty description="暂无收藏" />
+      </div>
+    </div>
+
+    <!-- list -->
+    <div v-for="(cate, index) in toolsStore.cates" :key="index">
+      <!-- cate title -->
+      <div class="mt-8 mb-3 text-xl font-bold text-[--base-black]" :id="'cate_' + cate.id">
+        {{ cate.title }}
+      </div>
+      <!-- card -->
+      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-0" :gutter="10">
+          <router-link v-for="(item, index) in cate.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5 hover:-translate-y-2 duration-300">
+            <div class="flex items-center border-b pb-2">
+              <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
+              <div class="flex flex-col ml-2 w-full">
+                <div class="flex">
+                  <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
+                </div>
+                <div class="flex justify-between">
+                  <el-text size="small">{{ item.cate }}</el-text>
+                  <el-button :icon="Star" circle size="small"/>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center justify-between mt-2">
+              <el-text line-clamp="2">{{ item.desc }}</el-text>
+            </div>
+          </router-link>
+          <!-- 占位 div -->
+          <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%] "></div>
+      </div>
    </div>
-    
  </div>
 </template>

 <style scoped>
 .self-card-div:after{
  content: "";
-  width: 32.5%
+  width: 24%
 }
 </style>
@@ -42,10 +42,10 @@ onMounted(() => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div class="p-4 rounded-2xl bg-white">
      <div class="flex">
        <div class="mr-2 w-60">
          <el-input v-model="params.ip" ></el-input>
@@ -79,10 +79,10 @@ const copyRes = async () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white ">
      
      <div>
        <!-- 
@@ -1,24 +1,28 @@
 <script setup lang="ts">
-import { Back } from '@element-plus/icons-vue'
+// import { Star } from '@element-plus/icons-vue'
 const props = defineProps({
  title: String
 })
 </script>

 <template>
-  <div>
-    <div class="text-gray-600">
+  <div class="flex justify-between rounded-2xl bg-white p-4 mt-5 mb-5">
+    <!-- <div class="text-gray-600">
      <div class="flex">
        <RouterLink to="/" class="flex items-center">
          <el-icon color="blue"><Back /></el-icon>
          <div>返回首页</div>
        </RouterLink>
      </div>
-    </div>
+    </div> -->

-    <div class="text-xl mt-5 mb-5">
+    <div class="text-xl">
      {{ props.title }}
    </div>
+    <div>
+      <el-button type="primary" plain>收藏</el-button>
+      <!-- <el-button type="danger">取消收藏</el-button> -->
+    </div>
  </div>
 </template>

@@ -5,7 +5,7 @@ const copyright = ref('ranblogs.com')
 </script>

 <template>
-  <div class="bg-black w-full fixed left-0 bottom-0 text-white text-center h-8 leading-8 z-10">
+  <div class="bg-white w-full rounded-2xl z-10 p-5 text-center">
    Copyright © 2023  · {{ copyright }} &nbsp;&nbsp; <a href="https://beian.miit.gov.cn/" target="_blank">{{ beianNo }}</a> 
  </div>
 </template>
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { Search,MoreFilled } from '@element-plus/icons-vue';
+import { Search } from '@element-plus/icons-vue';
 import { useToolsStore } from '@/store/modules/tools'
+import { useComponentStore } from '@/store/modules/component'
 import { ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/display.css'
+import { ToolsInfo } from '@/api/tools/type';
+import router from '@/router';

-const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
-const appNet = ref(import.meta.env.VITE_APP_WEBSITE || '')
-const isNavDrawer = ref(false)
+// const isNavDrawer = ref(false)
+const loading = ref(false)
+const options = ref<ToolsInfo[]>([])
 //store
 const toolsStore = useToolsStore()
+const componentStore = useComponentStore()
 //查询参数
 const searchParam = reactive({
  cateId: 0,
@@ -25,20 +29,36 @@ const getToolCates = async () => {
 }

 //search
-const search = async () => {
-  try {
-    await toolsStore.getTools(searchParam)
-    //关闭抽屉
-    isNavDrawer.value = false
-  } catch (error) {
-    console.log(error)
-  }
-}
+// const search = async () => {
+//   try {
+//     await toolsStore.getTools(searchParam)
+//     //关闭抽屉
+//     isNavDrawer.value = false
+//   } catch (error) {
+//     console.log(error)
+//   }
+// }

 //选择分类
-const chooseCate = (cateId: number) => {
-  searchParam.cateId = cateId
-  search()
+// const chooseCate = (cateId: number) => {
+//   searchParam.cateId = cateId
+//   search()
+// }
+
+//搜索工具
+const searchTools = async (query: string) => {
+  loading.value = true
+  if (query) {
+    searchParam.title = query
+    await toolsStore.getTools(searchParam)
+  } else {
+    options.value = []
+  }
+  loading.value = false
+}
+
+const optionClick = (url: string) => {
+  router.push(url)
 }

 //收藏
@@ -55,120 +75,83 @@ onMounted(() => {
 </script>

 <template>
-  <header class="">
-    <nav class="h-28 w-full leading-10 flex flex-col justify-between pt-2 pb-2 c-xs:h-16 c-xs:border-b-[1px]">
-      <el-row>
-        <el-col :xl="4" :lg="3" :sm="1"></el-col>
-        <el-col :xl="16" :lg="18" :sm="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>
+  <header class="h-20 w-full flex justify-between pt-2 pb-2 c-xs:h-16 c-xs:border-b-[1px] items-center">
+    <div class="flex items-center">
+      <Transition name="fold" class="hidden c-sm:block c-md:hidden c-xs:block">
+        <svg v-if="!componentStore.leftComDrawer" @click="componentStore.setleftComDrawerStatus(true)" t="1702978210636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7618" width="30" height="30">
+          <path fill="#444" fill-opacity=".9" d="M895.936 256l-768-0.896 0.128-64L896 192l-0.064 64zM179.2 689.152l202.688-152a32 32 0 0 0 0-51.2L179.2 333.952a32 32 0 0 0-51.2 25.6v304a32 32 0 0 0 51.2 25.6z m12.8-89.6v-176l117.312 88L192 599.552zM896 544H480v-64H896v64z m-0.064 288l-768-0.896 0.128-64L896 768l-0.064 64z" p-id="7619"></path>
+        </svg>
+        <svg v-else @click="componentStore.setleftComDrawerStatus(false)" t="1702978577170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="30" height="30">
+          <path fill="#444" fill-opacity=".9" d="M128.064 192l768 0.896-0.128 64L128 256l0.064-64z m514.048 294.848a32 32 0 0 0 0 51.2l202.688 152a32 32 0 0 0 51.2-25.6v-304a32 32 0 0 0-51.2-25.6l-202.688 152zM832 424.448v176l-117.312-88L832 424.448zM128 480h416v64H128v-64z m0.064 288l768 0.896-0.128 64L128 832l0.064-64z" p-id="1588"></path>
+        </svg>
+      </Transition>

-            <!-- right -->
-            <div class=" w-full md:w-auto flex c-xs: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>
+      <!-- c-md:block -->
+      <Transition name="fold" class="hidden c-md:block">
+        <svg v-if="!componentStore.leftCom" @click="componentStore.setLeftComStatus(true)" t="1702978577170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="30" height="30">
+          <path fill="#444" fill-opacity=".9" d="M128.064 192l768 0.896-0.128 64L128 256l0.064-64z m514.048 294.848a32 32 0 0 0 0 51.2l202.688 152a32 32 0 0 0 51.2-25.6v-304a32 32 0 0 0-51.2-25.6l-202.688 152zM832 424.448v176l-117.312-88L832 424.448zM128 480h416v64H128v-64z m0.064 288l768 0.896-0.128 64L128 832l0.064-64z" p-id="1588"></path>
+        </svg>
+        <svg v-else @click="componentStore.setLeftComStatus(false)" t="1702978210636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7618" width="30" height="30">
+          <path fill="#444" fill-opacity=".9" d="M895.936 256l-768-0.896 0.128-64L896 192l-0.064 64zM179.2 689.152l202.688-152a32 32 0 0 0 0-51.2L179.2 333.952a32 32 0 0 0-51.2 25.6v304a32 32 0 0 0 51.2 25.6z m12.8-89.6v-176l117.312 88L192 599.552zM896 544H480v-64H896v64z m-0.064 288l-768-0.896 0.128-64L896 768l-0.064 64z" p-id="7619"></path>
+        </svg>
+      </Transition>
+    
+      <div class="md:w-80 c-xs:72">
+        <!-- <el-input 
+          v-model="searchParam.title" 
+          placeholder="搜索工具" 
+          class="h-10 ml-3" 
+          @keyup.enter.native="search">
+          <template #append>
+            <el-button :icon="Search" @click="search"/>
+          </template>
+        </el-input> -->
+        <el-select
+          v-model="searchParam.title"
+          filterable
+          remote
+          reserve-keyword
+          remote-show-suffix
+          :suffix-transition="false"
+          :suffix-icon="Search"
+          placeholder="输入关键词搜索，如文本、json、图片等"
+          :remote-method="searchTools"
+          :loading="loading"
+          class="ml-3 mr-3 md:w-80 c-xs:w-60"
+        >
+          <el-option
+            v-for="item in toolsStore.list"
+            :key="item.id"
+            :label="item.title"
+            :value="item.id"
+            @click="optionClick(item.url)"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>

-            <!-- h5: 搜索、导航 -->
-            <div class="c-lg:hidden c-sm:hidden">
-              <div class="mr-3 leading-3">
-                <!-- <el-icon size="25"><Search /></el-icon> -->
-                <el-icon size="25" class="ml-2" style="transform:rotate(90deg)" @click="isNavDrawer == false ? isNavDrawer = true : isNavDrawer = false"><MoreFilled /></el-icon>
-              </div>
-              <!-- 抽屉 -->
-              <el-drawer v-model="isNavDrawer" direction="rtl" class="" size="70%">
-                <div>
-                  <!-- 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>
-                  <!-- cates -->
-                  <div class="mt-3 text-center">
-                    <ul class="flex flex-col rounded items-center">
-                      <li class="flex items-center w-full text-center mb-2">
-                        <div 
-                          class="hover:text-blue-400 text-xl w-full hover:bg-gray-200 hover:rounded-md h-10 leading-10" :class="searchParam.cateId == 0 ? 'text-blue-400 bg-gray-200 rounded-md' : ''"
-                          @click="chooseCate(0)"
-                        >全部工具</div>
-                      </li>
-                      <li v-for="(item, index) in toolsStore.cates" :key="index" class="flex items-center mb-2 w-full">
-                        <!-- <el-text>{{ index != 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;' : '' }} </el-text> -->
-                        <div 
-                          class="hover:text-blue-400 text-xl w-full hover:bg-gray-200 hover:rounded-md h-10 leading-10" :class="searchParam.cateId == item.id ? 'text-blue-400 bg-gray-200 rounded-md' : ''"
-                          @click="chooseCate(item.id)"
-                        >{{ item.title }}</div>
-                      </li>
-                    </ul>
-                  </div> 
-                </div>
-              </el-drawer>
-            </div>
-          </div>
-          
-          <!-- pc/pad:搜索、导航 -->
-          <el-row class="mt-3 hidden-xs-only">
-            <el-col :lg="19" :sm="19">
-              <!-- cates -->
-              <div class="mr-3">
-                <ul class="flex bg-gray-100  h-10 rounded leading-10 pl-3">
-                  <li class="flex items-center mr-3">
-                    <div 
-                      class="hover:text-blue-400 hover:underline hover:decoration-2 hover:underline-offset-[6px] text-sm" :class="searchParam.cateId == 0 ? 'text-blue-400 underline decoration-2 underline-offset-[6px]' : ''"
-                      @click="chooseCate(0)"
-                    >全部工具</div>
-                  </li>
-                  <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.title }}</div>
-                  </li>
-                </ul>
-              </div> 
-            </el-col>
-            <el-col :lg="5" :sm="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" :lg="3" :sm="1" class="flex"></el-col>
-      </el-row>
-    </nav>
+    <div class=" w-full md:w-auto flex md:block c-xs:w-auto">
+      <ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center c-xs:mt-0">
+        <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>
  </header>
 </template>

 <style scoped>
+.fold-enter-active {
+  transition: all 1s ease-out;
+}
+
+.fold-enter-from,
+.fold-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+} 
 </style>
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+// import { Tools } from '@element-plus/icons-vue'
+import { onMounted, ref, reactive } from 'vue';
+import { useToolsStore } from '@/store/modules/tools'
+import { useRouter, useRoute } from "vue-router"
+const props = defineProps({
+  bgColor: String,
+})
+const router = useRouter()
+const route = useRoute()
+
+const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
+const appNet = ref(import.meta.env.VITE_APP_WEBSITE || '')
+//菜单选中
+const defaultActive = ref('collect')
+//默认展开的菜单
+const defaultOpeneds = ['cate']
+//store
+const toolsStore = useToolsStore()
+//获取分类
+const getToolCates = async () => {
+  try {
+    await toolsStore.getToolCate()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const handleOpen = () => {
+
+}
+
+const handleClose = () => {
+  
+}
+
+//跳转锚点
+const query = reactive({ value: '' })
+const gotoAnchor = (anchor: string) => {
+  console.log(route.path)
+  if (route.path === '/') {
+    document?.getElementById(anchor)?.scrollIntoView({
+      behavior: "smooth", //smooth:平滑，auto：直接定位
+      block: "start",
+      inline: "start",
+    });
+  } else {
+    query.value = anchor
+    router.push({
+      path: '/',
+      query: query
+    })
+  }
+}
+const gotoAbout = () => {
+  router.push('about')
+}
+
+onMounted(() => {
+  getToolCates()
+})
+</script>
+
+<template>
+  <!--  -->
+    <el-scrollbar>
+      <!-- logo -->
+      <div class="flex justify-center">
+        <router-link class="flex flex-row h-20" to="/">
+          <img class="h-12 w-auto rounded-lg mr-2 mt-auto mb-auto" src="@/assets/logo.png" :alt="appNet">
+          <div class="flex flex-col  mt-auto mb-auto">
+            <div class="text-2xl">{{ appName }}</div>
+            <div class="text-sm text-gray-500">{{ appNet }}</div>
+          </div>
+        </router-link>
+      </div>
+      <!-- menu -->
+      <!-- #f5f5fb -->
+      <div class="flex justify-center pl-8 pr-8">
+        <el-menu
+          class="w-[200px]"
+          :default-active="defaultActive"
+          :default-openeds="defaultOpeneds"
+          :background-color="props.bgColor ?? '#f5f5fb'"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-menu-item index="collect" @click="gotoAnchor('collect')">
+            <template #title>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="" width="20" height="20">
+                <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
+              </svg>
+              <span class="ml-2">我的收藏</span>
+            </template>
+          </el-menu-item>
+          <el-sub-menu index="cate">
+            <template #title>
+              <svg t="1702896224109" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4239" width="20" height="20">
+                <path fill="currentColor" d="M382.083 103.466c-63.464-1.533-127.026-1.561-190.487 0.056-53.88 1.372-85.947 33.283-87.526 87.481-1.798 61.735-1.627 123.592-0.105 185.34 1.405 57.042 33.666 88.862 89.987 91.055 30.847 1.2 61.778 0.214 92.673 0.214v0.084c29.177 0 58.354 0.006 87.532-0.01 3.43 0 6.875 0.043 10.292-0.216 48.928-3.716 81.464-31.602 83.804-80.677 3.181-66.767 3.15-133.886 0.34-200.68-2.194-52.18-34.273-81.385-86.51-82.647z m0.727 223.135c-1.853 39.629-13.76 53.399-51.558 55.395-30.725 1.622-61.703 1.765-92.399-0.15-32.22-2.01-46.292-15.941-48.33-48.552-2.025-32.392-2.108-65.126 0.084-97.498 2.219-32.758 16.121-45.288 49.214-46.935 29.033-1.446 58.217-1.13 87.29-0.204 42.456 1.353 53.884 13.188 55.727 55.78 0.592 13.67 0.092 27.387 0.092 41.083-0.02 13.695 0.518 27.415-0.12 41.081zM468.883 657.431c-4.914-60.1-41.873-98.957-102.147-102.763-52.991-3.346-106.533-3.413-159.516-0.013-61.945 3.977-100.908 45.842-103.178 107.37-1.834 49.716-1.806 99.605 0 149.324 2.232 61.528 42.13 104.63 102.68 108.128 53.034 3.063 106.506 2.894 159.565 0.06 58.998-3.15 97.39-42.913 102.53-102.565 2.2-25.551 0.367-51.451 0.367-77.191l0.08-0.001c0-27.46 1.85-55.071-0.381-82.349zM382.676 782.81c-2.191 34.758-12.473 47.623-45.629 49.797-34.02 2.23-68.343 1.291-102.466-0.024-25.612-0.987-42.22-15.758-43.434-41.638-1.677-35.784-2.509-71.85 0.088-107.519 2.16-29.666 15.98-40.487 47.82-41.924 30.705-1.386 61.557-1.324 92.274-0.118 37.12 1.456 48.88 13.204 51.308 49.153 1.033 15.313 0.173 30.753 0.173 46.135 0.027 15.382 0.832 30.817-0.134 46.138zM638.575 466.817c66.85 2.183 133.883 2.232 200.728-0.029 48.107-1.626 78.502-34.315 80.95-82.898 1.64-32.522 0.314-65.193 0.314-97.798h0.18c0-29.173 0.002-58.345-0.006-87.518 0-3.433 0.093-6.874-0.12-10.295-3.237-51.777-32.66-83.203-84.46-84.65-65.155-1.824-130.44-1.78-195.6 0.026-49.255 1.363-81.717 31.976-83.38 80.049-2.312 66.843-2.187 133.87-0.181 200.732 1.448 48.3 33.485 80.811 81.575 82.38zM741.2 188.405c93.184 0.015 94.452 1.293 94.464 95.22 0.013 96.831-1.987 98.873-96.789 98.868-94.393-0.003-95.62-3.049-97.83-98.688-2.4-103.803 20.564-97.124 100.155-95.4zM920.572 648.267c-1.48-60.79-30.968-91.401-92.039-94.662-29.17-1.558-58.49-0.269-87.743-0.269v0.082c-30.974 0-61.945-0.023-92.918 0.034-3.43 0.005-6.883 0.302-10.287 0.754-49.282 6.534-79.299 35.872-80.674 84.647a3477.609 3477.609 0 0 0 0.02 196.134c1.362 48.254 32.605 80.758 80.595 84.46 35.921 2.77 72.291 2.164 108.32 0.313 28.821-1.48 47.916-22.114 46.583-45.146-1.247-21.556-18.569-37.536-46.166-40.082-18.794-1.733-37.942 0.3-56.714-1.548-33.033-3.254-45.768-15.985-47.505-49.427a897.595 897.595 0 0 1 0.012-92.884c1.76-33.962 14.537-47.378 47.042-49.022 32.61-1.65 65.425-1.604 98.043-0.06 33.31 1.575 45.544 14.444 48.07 47.957 1.42 18.832-0.68 37.952 1.06 56.734 2.577 27.82 18.189 42.528 42.153 42.564 24.261 0.037 40.096-14.295 41.679-42.527 1.828-32.595 1.266-65.38 0.47-98.052z" p-id="4240"></path>
+              </svg>
+              <!-- <el-icon size="22px"><Menu /></el-icon> -->
+              <span class="ml-2">分类</span>
+            </template>
+            <el-menu-item-group>
+                <el-menu-item
+                  @click="gotoAnchor('cate_' + item.id)"
+                  :index="item.id.toString()"
+                  v-for="(item,index) in toolsStore.cates" 
+                  :key="index"
+                >
+                  {{ item.title }}
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-sub-menu>
+          <el-menu-item index="about" @click="gotoAbout">
+            <template #title>
+                <svg t="1702896616706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5262" width="20" height="20">
+                  <path fill="currentColor" d="M514.734921 246.750649C505.162698 257.386453 500.249969 270.276034 500.249969 285.16616 500.249969 297.397334 504.175087 308.083785 511.92403 316.364518 519.824913 324.771867 530.03022 329.102159 541.678957 329.102159 551.073917 329.102159 565.077726 326.189975 577.91666 311.780993 587.944704 300.891955 592.984049 287.774464 592.984049 273.162895 592.984049 261.210278 588.881668 250.726414 581.107402 242.622944 564.064792 224.896605 533.043698 226.795855 514.734921 246.750649ZM967.769518 511.708782C967.769518 765.87917 763.334174 972.618938 511.949353 972.618938 260.615179 972.618938 56.179835 765.87917 56.179835 511.708782 56.179835 257.411776 260.615179 50.722655 511.949353 50.722655 763.334174 50.722655 967.769518 257.411776 967.769518 511.708782ZM978.734525 312.084873C953.259243 251.080941 916.540396 196.230581 870.122709 149.382397 823.629053 102.331627 769.4371 65.38487 709.294161 39.529738 584.272819-13.851868 439.853797-13.851868 314.781809 39.529738 254.613547 65.38487 200.497564 102.35695 153.927937 149.382397 107.43428 196.331874 70.740757 251.258204 45.366768 312.084873 19.005169 375.418552 5.53315 442.37347 5.53315 511.607488 5.53315 580.79086 18.929199 647.771101 45.265475 711.02881 70.690111 771.906126 107.383634 826.705839 153.877291 873.857902 200.294977 920.832703 254.436284 957.855429 314.731162 983.634592 377.330465 1010.426688 443.626975 1023.84806 511.92403 1023.84806 580.322378 1023.84806 646.593565 1010.426688 709.218191 983.583945 769.487746 957.804783 823.629053 920.832703 870.072063 873.857902 916.540396 826.781809 953.183273 771.906126 978.633232 711.003487 1005.070801 647.771101 1018.416203 580.79086 1018.416203 511.607488 1018.46685 442.37347 1005.121448 375.418552 978.734525 312.084873ZM553.226402 633.311472C538.462893 647.568514 528.080322 656.457007 521.16705 662.104113 524.560378 643.618073 533.372901 607.000519 554.568539 534.904963 575.71353 463.493137 577.511487 451.00873 577.511487 444.880481 577.511487 434.19403 573.105225 424.7231 565.432253 418.164354 548.161733 403.780696 517.723075 406.61691 480.978905 427.635285 460.492321 439.258699 438.714247 458.200559 414.403838 485.144595L401.742167 499.401637 443.804239 532.144719 454.541336 521.407622C466.266043 509.936148 474.19225 502.440438 479.510152 497.45174 447.400153 604.164305 431.775651 670.511462 431.775651 700.19042 431.775651 713.662438 435.624799 724.855355 443.449712 733.313352 451.325271 742.024581 462.391572 746.582783 475.053243 746.582783 487.461681 746.582783 501.668076 741.746025 518.938596 731.844598 534.512451 722.905458 557.860573 703.406484 590.527685 672.334743L603.82244 659.521132 565.584193 621.890645 553.226402 633.311472Z" p-id="5263"></path>
+                </svg>
+                <span class="ml-2">关于本站</span>
+            </template>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </el-scrollbar>
+  <!-- </div> -->
+</template>
+
+<style scoped>
+.el-menu{
+  border: none !important;
+  list-style: none !important;
+  padding-left: 0 !important;
+  margin-top: 1rem;
+  background-color: none !important;
+}
+.el-menu:hover{
+  background-color: none !important;
+}
+.el-sub-menu{
+  border-radius: 10rem !important;
+  list-style: none !important;
+  margin: 0 !important;
+  padding-left: 0 !important;
+  background-color: none !important;
+}
+
+/* 深选择器获取menu__title */
+.el-sub-menu :deep(.el-sub-menu__title){
+  /* padding-left: 0 !important; */
+  font-size: 1rem;
+  border-radius: 1rem;
+}
+.el-sub-menu :deep(.el-sub-menu__title:hover){
+  /* padding-left: 0 !important; */
+  color: #fff;
+  background-color: #409EFF;
+  border-radius: 1rem;
+}
+
+.el-menu-item{
+  background-color: transparent;
+  line-height: 38px!important;
+  height: 38px!important;
+  margin: 10px 0;
+  border-radius: 1rem !important;
+}
+.el-menu-item.is-active{
+  color: #fff;
+  background-color: #409EFF;
+  border-radius: 1rem;
+}
+.el-menu-item:hover{
+  color: #fff;
+  background-color: #409EFF;
+  border-radius: 1rem;
+}
+</style>
@@ -32,10 +32,10 @@ const copyRes = async (resStr: string) => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white ">
      <div>
        <el-input v-model="info.encryptStr" :rows="5" type="textarea" placeholder="请输入加密内容"></el-input>
      </div>
@@ -15,7 +15,7 @@ const info = reactive({
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

    <div class="">
@@ -30,10 +30,10 @@ const copyRes = async (resStr: string) => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white ">
      <div>
        <el-input type="textarea" :rows="8" v-model="info.content"></el-input>
      </div>
@@ -24,10 +24,10 @@ const copyRes = async (resStr: string) => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white">
      <div>
        <el-input type="number" v-model="info.content" placeholder="请输入数字，最高13位数字"></el-input>
      </div>
@@ -43,7 +43,7 @@ const copyRes = async (resStr: string) => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

    <div class="">
@@ -58,8 +58,8 @@ const gen = () => {
  <div class="flex flex-col mt-3 ml-4 flex-1 mr-3">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="flex justify-between w-full">
-      <div class="w-4/6">
+    <div class="flex justify-between w-full p-4 rounded-2xl bg-white">
+      <div class="w-4/6 ">
        <div class="flex mb-3">
          <div class="w-16 mr-2"><el-text>内容</el-text></div>
          <el-input v-model="info.content" type="textarea" rows="3" class="w-full" placeholder="可在此输入文字或网址"></el-input>
@@ -30,10 +30,10 @@ const random = () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center p-4 rounded-2xl bg-white">
      <div>
        <el-input-number v-model="info.startNum" :min="0" size="large"/>
        <el-input-number v-model="info.endNum" :min="0" size="large" class="ml-5"/>
@@ -117,10 +117,10 @@ onMounted(() => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div class="p-4 rounded-2xl bg-white">
      <el-text>密码组合</el-text>
      <div>
        <el-checkbox v-model="info.checkedNum" label="数字(0-9)"  @change="(val: any) => (changeCheckBox(val, 0))"/>
@@ -116,10 +116,10 @@ const execMatch = () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div class="p-4 rounded-2xl bg-white ">
      <div>
        <codemirror
          v-model="info.content"
@@ -193,59 +193,61 @@ const copyRes = async (index: any) => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1 ">
    <DetailHeader :title="info.title"></DetailHeader>
-
-    <div class="flex">
-      <div class="mr-2 w-full">
-        <el-input v-model="info.content">
-          <template #prepend>
-            <el-select v-model="info.chooseTranOptions" placeholder="Select"  class="w-24">
-              <el-option
-                v-for="item in info.tranOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </template>
-        </el-input>
+    <div class="p-4 rounded-2xl bg-white">
+      <div class="flex">
+        <div class="mr-2 w-full">
+          <el-input v-model="info.content">
+            <template #prepend>
+              <el-select v-model="info.chooseTranOptions" placeholder="Select"  class="w-24">
+                <el-option
+                  v-for="item in info.tranOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+        
+        <el-button type="primary" @click="tran()">转换</el-button>
      </div>
-      
-      <el-button type="primary" @click="tran()">转换</el-button>
-    </div>

-    <div class="mt-3 min-h-md bg-gray-100 p-3 mb-3 flex flex-col">
-      <el-table :data="info.tranOptions" border style="width: 100%">
-        <el-table-column prop="label" label="进制" width="120">
-          <template #default="scope">
-            <div class="flex items-center">
-              <span class="mr-1">{{ scope.row.label }}</span>
-              <el-tooltip
-                v-if="scope.row.desc != ''"
-                class="box-item"
-                effect="dark"
-                :content="scope.row.desc"
-                placement="top-start"
-              ><el-icon ><InfoFilled /></el-icon></el-tooltip>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="tranValue" label="结果"/>
-        <el-table-column prop="" label="操作" width="60">
-          <template #default="scope">
-            <el-button
-              link
-              type="primary"
-              size="small"
-              @click.prevent="copyRes(scope.$index)"
-            >
-              复制
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="mt-3 min-h-md bg-gray-100 p-3 mb-3 flex flex-col">
+        <el-table :data="info.tranOptions" border style="width: 100%">
+          <el-table-column prop="label" label="进制" width="120">
+            <template #default="scope">
+              <div class="flex items-center">
+                <span class="mr-1">{{ scope.row.label }}</span>
+                <el-tooltip
+                  v-if="scope.row.desc != ''"
+                  class="box-item"
+                  effect="dark"
+                  :content="scope.row.desc"
+                  placement="top-start"
+                ><el-icon ><InfoFilled /></el-icon></el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="tranValue" label="结果"/>
+          <el-table-column prop="" label="操作" width="60">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                size="small"
+                @click.prevent="copyRes(scope.$index)"
+              >
+                复制
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
    </div>
+    
  </div>
 </template>

@@ -48,10 +48,10 @@ const saveImg = () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="flex flex-col mb-3 h-[38rem]">
+    <div class="flex flex-col mb-3 h-[38rem] p-4 rounded-2xl bg-white">
      <div class="mb-3 flex flex-row-reverse">
        <!-- save -->
        <el-button type="primary" class="ml-2" @click="saveImg">保存</el-button>
@@ -87,10 +87,10 @@ onBeforeUnmount(() => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div class="">
+    <div class="p-4 rounded-2xl bg-white">
      <div>
        <div class="">
          
@@ -84,8 +84,7 @@ const copyRes = async () => {
 <template>
  <div class="flex flex-col mt-3 ml-4 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>
-
-    <div class="flex flex-col">
+    <div class="flex flex-col p-4 rounded-2xl bg-white">
      <div class="flex flex-direction">
        <el-text class="mr-2 w-12">现在</el-text>
        <el-button class="mr-3" link @click="copyRes()">{{ info.nowTime }} <el-icon class="ml-1 mr-1"><CopyDocument /></el-icon></el-button>
@@ -130,7 +129,7 @@ const copyRes = async () => {
      </div>
    </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>
@@ -44,10 +44,10 @@ const copyRes = async (resStr: string) => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div class="p-4 rounded-2xl bg-white">
      <div>
        <el-input v-model="info.pwNum" placeholder="范围1~100" class="" max="100" type="number">
          <template #prepend>生成数量:</template>
@@ -50,10 +50,10 @@ const copyRes = async () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div  class="p-4 rounded-2xl bg-white">
      <div>
        <codemirror
          v-model="info.content"
@@ -20,10 +20,10 @@ const handleClick = () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div>
    <DetailHeader :title="info.title"></DetailHeader>
    <div>
-      <div>
+      <div  class="p-4 rounded-2xl bg-white">
        <el-tabs v-model="info.activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="长度" name="lengthTab">
            <Length/>
@@ -35,10 +35,10 @@ const copyRes = async () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div class="p-4 rounded-2xl bg-white">
      <div>
        <el-input type="textarea" :rows="8" v-model="info.content"></el-input>
      </div>
@@ -35,10 +35,10 @@ const changeContent = () => {
 </script>

 <template>
-  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+  <div class="flex flex-col mt-3 flex-1">
    <DetailHeader :title="info.title"></DetailHeader>

-    <div>
+    <div class="p-4 rounded-2xl bg-white">
      <div>
        <el-input type="textarea" :rows="16" v-model="info.content" @input="changeContent"></el-input>
      </div>
@@ -249,6 +249,16 @@ export const constantRoute = [
      description: '把文本转换成图片，生成长图，具有超多个性文字排版',
    }
  },
+  {
+    path: '/about',
+    component: () => import('@/components/Home/About.vue'),
+    name: 'about',
+    meta: {
+      title: "关于",
+      keywords: '关于ranblogs,关于工具站',
+      description: '',
+    }
+  },
  {
    path: '/404',
    component: () => import('@/components/404/404.vue'),
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+
+export const useComponentStore = defineStore('component', {
+  //用来存放变量
+  state: () => ({
+    leftCom: false,
+    leftComDrawer: false,
+  }),
+  //方法
+  actions: {
+    //设置左侧组件状态
+    setLeftComStatus(status: boolean) {
+      console.log(1)
+      this.leftCom = status
+    },
+    //设置左侧组件状态(小屏)
+    setleftComDrawerStatus(status: boolean) {
+      console.log(2)
+      this.leftComDrawer = status
+    }
+  }
+})
@@ -12,6 +12,7 @@ export const useToolsStore = defineStore('tools', {
    cates: [] as ToolCate[],
    recommends: [] as ToolsInfo[],
    ipData: {} as IpInfo,
+    collect: [],
  }),
  //方法
  actions: {
@@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+:root{
+  --base-gray: #f5f5fb;
+  --base-black: #444;
+}
@@ -10,9 +10,23 @@ export default {
    screens: {
      // 自定义响应式尺寸
      'c-xs': {'max': '768px'},
-      'c-sm': {'min': '768px'},
+      'c-sm': {'min': '768px'}, //相当远默认的md
+      'c-md': {'min': '992px'},
      'c-lg': {'min': '1200px'},
      ...defaultTheme.screens,
+    },
+    animation: {
+      fold: 'fold 1s infinite'
+    },
+    keyframes: {
+      fold: {
+        '0%, 100%': { 
+          opacity: 0
+        },  
+        '50%': { 
+          opacity: 1
+        }  
+      }
    }
  },
  plugins: [],
@@ -25,14 +25,6 @@ export default defineConfig(({command, mode}) => {
      viteMockServe({
        localEnabled: env.VITE_IS_MOCK == 'true' ? command === 'serve' : false,
      }),
-      //修改html插件
-      // createHtmlPlugin({
-      //   inject: {
-      //     data: {
-      //       title: env.VITE_APP_TITLE
-      //     }
-      //   }
-      // }),
      seoperender()
    ],
    resolve: {
Author	SHA1	Message	Date
osiris	7456b9a35f	feat: 平板和小屏幕适配	2024-02-19 15:03:16 +08:00
osiris	3f387b0c7e	fix: debug	2024-02-19 11:35:47 +08:00
osiris	81146ad040	feat: 首页改版	2024-02-19 11:19:26 +08:00