Refactor API requests and update component structure

pages/home/components/RecommendedColumns.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="mt-34px w-100%">
+  <div class="mt-[34px] w-[100%]">
     <KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
-    <div class="content mt-10px">
+
+    <div class="content mt-[10px]">
       <el-row :gutter="20">
         <el-col v-for="i in recommendTopList" :key="i.id" :span="6">
           <CardPicture :item-info="i" />
@@ -9,8 +10,8 @@
       </el-row>
     </div>
     <!-- 暂无数据 -->
-    <el-empty v-if="recommendTopList.length === 0" description="暂无数据"></el-empty>
-    <div v-if="recommendTopList.length > 0" class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div>
+    <el-empty v-if="recommendTopList?.length === 0" description="暂无数据"></el-empty>
+    <!-- <div v-else class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div> -->
   </div>
 </template>
 
@@ -43,15 +44,22 @@
     },
   ])
 
-  const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
-  const getRecommendTop = () => {
+  // const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
+  // const getRecommendTop = () => {
+  //   // @ts-ignore
+  //   recommendTop(query).then((res) => {
+  //     if (Array.isArray(res.data) && res.data.length > 0) {
+  //       recommendTopList.value = res.data
+  //     }
+  //   })
+  // }
+
+  const { data: recommendTopList, refresh: getRecommendTop} = useAsyncData('recommendTop', async () => {
     // @ts-ignore
-    recommendTop(query).then((res) => {
-      if (Array.isArray(res.data) && res.data.length > 0) {
-        recommendTopList.value = res.data
-      }
-    })
-  }
+    const res = await recommendTop(query)
+    return res.data || []
+  })
+
 
   const handleClick = () => {
     if (query.type === 1) {
@@ -69,9 +77,6 @@
       if (val) {
         getRecommendTop()
       }
-    },
-    {
-      immediate: true,
     }
   )
 </script>