fix: 修改问题

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full min-h-screen bg-white font-['PingFang-SC']">
-    <div class="w-full h-[180px] relative flex items-center md:h-[380px]">
+    <div class="w-full min-h-[180px] relative flex items-center md:h-[380px]">
       <div
         class="w-full h-full bg-[url('/src/assets/images/top_bg.png')] bg-no-repeat bg-center bg-cover absolute left-0 top-0 z-0"
       ></div>
@@ -21,7 +21,11 @@
             right-icon="search"
             @search="handleSearch"
             @clear="handleClear"
-            @click-right-icon="handleSearch"
+            @click-right-icon="
+              () => {
+                handleSearch()
+              }
+            "
           />
         </div>
         <div class="w-full text-xs px-4 flex">
@@ -50,23 +54,13 @@
             <van-dropdown-menu class="font-semibold">
               <van-dropdown-item
                 v-model="type1ValueRef"
-                :options="
-                  typeOptions1Ref.map((item) => ({
-                    text: item.toolName,
-                    value: item.id
-                  }))
-                "
+                :options="dropdownTypeOptions1"
                 title="一级分类"
                 @change="handleChangeDropdownOfType1"
               />
               <van-dropdown-item
                 v-model="type2ValueRef"
-                :options="
-                  typeOptions2Ref.map((item) => ({
-                    text: item.toolName,
-                    value: item.id
-                  }))
-                "
+                :options="dropdownTypeOptions2"
                 title="二级分类"
                 @change="handleChangeDropdownOfType2"
               />
@@ -164,16 +158,38 @@ const device = computed(() => {
 // 搜索内容
 const searchValueRef = ref('')
 const pageNum = ref(1)
-const pageSize = ref(2)
+const pageSize = ref(20)
 // 热门工具列表
 const hotToolsRef = ref([])
 
-const type1ValueRef = ref('1')
+const type1ValueRef = ref('')
 const type2ValueRef = ref('')
 // 分类列表1级
 const typeOptions1Ref = ref([])
 // 分类列表2级
 const typeOptions2Ref = ref([])
+const dropdownTypeOptions1 = computed(() => {
+  const list = typeOptions1Ref.value.map((item) => ({
+    text: item.toolName,
+    value: item.id
+  }))
+  list.unshift({
+    text: '全部',
+    value: ''
+  })
+  return list
+})
+const dropdownTypeOptions2 = computed(() => {
+  const list = typeOptions2Ref.value.map((item) => ({
+    text: item.toolName,
+    value: item.id
+  }))
+  list.unshift({
+    text: '全部',
+    value: type1ValueRef.value
+  })
+  return list
+})
 
 const toolsListRef = ref([])
 const loadingRef = ref(false)
@@ -195,7 +211,7 @@ const onLoad = (value) => {
 
     pageNum.value += 1
     if (res.rows.length < pageSize.value) finished.value = true
-
+    else finished.value = false
     getFillNums('.tool-card-content', toolsListRef.value, device.value === 'pc' ? 220 : 165).then(
       (nums) => {
         console.log('getFillNums', nums)
@@ -215,12 +231,13 @@ const init = () => {
   type1ValueRef.value = route.query.id ? Number(route.query.id) : ''
   type2ValueRef.value = ''
   // 二级分类
-  listTools({
-    level: '2',
-    parentId: route.query.id ? route.query.id : ''
-  }).then((res) => {
-    typeOptions2Ref.value = res.rows
-  })
+  // listTools({
+  //   level: '2',
+  //   parentId: route.query.id ? route.query.id : '',
+  //   pageSize: 999
+  // }).then((res) => {
+  //   typeOptions2Ref.value = res.rows
+  // })
   onLoad(route.query.id)
   // 常用工具列表
   getCommonTool().then((res) => {
@@ -230,10 +247,10 @@ const init = () => {
 init()
 
 // 搜索
-const handleSearch = (val, pId = '') => {
+const handleSearch = (pId = '') => {
+  if (loadingRef.value) return
   toolsListRef.value = []
   pageNum.value = 1
-  console.log(pId)
   onLoad(pId)
   // 每次搜索时存一下搜索内容的次数，方便后台统计常用工具
   searchValueRef.value && setCommonTool({ toolName: searchValueRef.value })
@@ -241,34 +258,47 @@ const handleSearch = (val, pId = '') => {
 // 点击热门关键字搜索
 const handleKeySearch = (toolName) => {
   searchValueRef.value = toolName
+  toolsListRef.value = []
   handleSearch()
 }
 
 // 点击一级菜单
 const handleChangeDropdownOfType1 = (value) => {
   // resetList()
-  type1ValueRef.value = value
-  listTools({
-    level: '2',
-    parentId: value,
-    pageSize: 999
-  }).then((res) => {
-    typeOptions2Ref.value = res.rows
-  })
-
-  handleSearch('', value)
-  type2ValueRef.value = ''
+  // 取消勾选
+  if (type1ValueRef.value === value && device.value === "pc") {
+    type1ValueRef.value = ''
+    typeOptions2Ref.value = []
+    handleSearch()
+  } else {
+    type1ValueRef.value = value
+    listTools({
+      level: '2',
+      parentId: value,
+      pageSize: 999
+    }).then((res) => {
+      typeOptions2Ref.value = res.rows
+    })
+    handleSearch(value)
+  }
+  type2ValueRef.value = value
 }
 // 点击二级菜单
 const handleChangeDropdownOfType2 = (value) => {
   // resetList()
-  handleSearch('', value)
-  type2ValueRef.value = value
+  // 取消勾选
+  if (type2ValueRef.value === value && device.value === "pc") {
+    type2ValueRef.value = ''
+    handleSearch(type1ValueRef.value)
+  } else {
+    type2ValueRef.value = value
+    handleSearch(value)
+  }
 }
 
 const handleClear = () => {
   searchValueRef.value = ''
-  onLoad()
+  handleSearch()
 }
 const handleDetail = (row) => {
   router.push({ path: '/detail', query: { id: row.id, toolName: row.toolName } })

vite.config.js

@@ -18,7 +18,7 @@ const createAutoImport = () => {
 export default defineConfig({
   plugins: [
     vue(),
-    VueDevTools(),
+    // VueDevTools(),
     VueSetupExtend(),
     createAutoImport(),
     AutoImport({