Refactor code structure and remove redundant changes

pages/home/components/RecommendedColumns.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="mt-34px w-100%">
+    <KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
+    <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" />
+        </el-col>
+      </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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue'
+  import KlTabBar from '@/components/kl-tab-bar/index.vue'
+  import CardPicture from '@/components/kl-card-picture/index.vue'
+  import { recommendTop } from '@/api/home/index'
+  import { ProjectDrawPageRespVO } from '@/api/home/type'
+
+  const query = reactive({
+    type: 1,
+    projectType: 0,
+    isDomestic: 1,
+    limit: 8,
+  })
+
+  const tabBar = ref([
+    {
+      label: '推荐图纸',
+      value: 1,
+    },
+    {
+      label: '推荐模型',
+      value: 3,
+    },
+    {
+      label: '推荐文本',
+      value: 2,
+    },
+  ])
+
+  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 handleClick = () => {
+    if (query.type === 1) {
+      window.open('/drawe', '_blank')
+    } else if (query.type === 2) {
+      window.open('/text', '_blank')
+    } else {
+      window.open('/model', '_blank')
+    }
+  }
+
+  watch(
+    () => query.type,
+    (val) => {
+      if (val) {
+        getRecommendTop()
+      }
+    },
+    {
+      immediate: true,
+    }
+  )
+</script>
+
+<style lang="scss" scoped></style>