feat: 首页适配移动端，新增工具：随机密码生成

src/components/Layout/Header/Header.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { Search } from '@element-plus/icons-vue';
+import { Search,MoreFilled } from '@element-plus/icons-vue';
 import { useToolsStore } from '@/store/modules/tools'
 import { ElMessageBox } from 'element-plus'
+import 'element-plus/theme-chalk/display.css'
 
 const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
 const appNet = ref('tools.ranblogs.com')
+const isNavDrawer = ref(false)
 //store
 const toolsStore = useToolsStore()
 //查询参数
@@ -52,10 +54,10 @@ onMounted(() => {
 
 <template>
   <header class="">
-    <nav class="h-28 w-full leading-10 flex flex-col justify-between pt-2 pb-2">
+    <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" :md="1"></el-col>
-        <el-col :xl="16" :md="22">
+        <el-col :lg="4" :sm="1"></el-col>
+        <el-col :lg="16" :sm="22">
           <div class="flex items-center justify-between">
             <!-- left -->
             <router-link class="ml-4 flex flex-row" to="/">
@@ -67,7 +69,7 @@ onMounted(() => {
             </router-link>
 
             <!-- right -->
-            <div class=" w-full md:w-auto flex hidden md:block">
+            <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>
@@ -77,10 +79,54 @@ onMounted(() => {
                 </li>
               </ul>
             </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>
           
-          <el-row class="mt-3">
-            <el-col :xl="19" :md="19">
+          <!-- 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">
@@ -100,7 +146,7 @@ onMounted(() => {
                 </ul>
               </div> 
             </el-col>
-            <el-col :xl="5" :md="5">
+            <el-col :lg="5" :sm="5">
               <!-- search -->
               <div>
                 <el-input 
@@ -116,7 +162,7 @@ onMounted(() => {
             </el-col>
           </el-row>
         </el-col>
-        <el-col :xl="4" :md="1" class="flex"></el-col>
+        <el-col :lg="4" :sm="1" class="flex"></el-col>
       </el-row>
     </nav>
   </header>

src/components/Layout/Right/Right.vue

@@ -32,7 +32,7 @@ const info = reactive({
     
 
     <!-- hot tools -->
-    <div class="mt-3 border-solid rounded border-gray border p-3">
+    <div class="mt-3 border-solid rounded border-gray border p-3 c-xs:mr-3 c-xs:ml-3">
       <div class="text-xl text-gray-400 font-bold">热门工具</div>
       <ul class="mt-3">
         <li class="flex items-center hover:bg-gray-200 p-1 rounded" v-for="(item, index) in info.hotTools" :key="index">