Refactor code structure and remove redundant changes

pages/model/components/FeaturedSpecials.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="box-border w-100% border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-26px py-30px">
+    <div class="flex items-center">
+      <div class="text-28px text-[#333333] font-normal">精选专题</div>
+      <div class="ml-50px text-21px text-[#999999] font-normal">了解最新趋势发展</div>
+    </div>
+    <div class="mt-36px flex justify-between">
+      <div v-for="item in 4" :key="item" class="flex flex-col items-center">
+        <img :src="`https://picsum.photos/320/190?_t${new Date().getTime()}`" alt="" srcset="" class="h-190px w320 rounded-4px" />
+        <div class="mt-10px text-18px text-[#333333] font-normal">机器人</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

pages/model/components/RecommendedColumnsV2.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="relative mt-34px w-100%">
+    <KlTabBar v-model="query.source" :data="tabBar" />
+    <div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
+      >共<span class="color-#1A65FF">{{ result.total }}</span
+      >个筛选结果</div
+    >
+    <div class="content mt-10px">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in result.list" :key="index" :span="6">
+          <CardPicture :item-info="item" />
+        </el-col>
+      </el-row>
+      <el-empty v-if="!result.list.length" :image="emptyImg"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import KlTabBar from '@/components/kl-tab-bar/index.vue'
+  import CardPicture from '@/components/kl-card-picture/index.vue'
+  import { ref } from 'vue'
+  import { pageRes, pageReq } from '@/api/upnew/types'
+  import emptyImg from '@/assets/images/empty.png'
+
+  const query = defineModel<pageReq>('modelValue', {
+    required: true,
+  })
+  const result = defineModel<pageRes>('result', {
+    required: true,
+  })
+
+  const tabBar = ref([
+    {
+      label: '模型推荐',
+      value: '',
+    },
+    {
+      label: '原创模型',
+      value: 1,
+    },
+    {
+      label: '转载分享',
+      value: 2,
+    },
+  ])
+</script>
+
+<style lang="scss" scoped></style>

pages/model/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 导航 -->
+  <KlNavTab active="模型" :type="3" />
+  <div class="ma-auto w-1440px">
+    <!-- 图纸分类 -->
+    <KlWallpaperCategory v-model="query" v-model:level="level" :type="3" />
+    <!-- 推荐栏目 -->
+    <RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
+    <!-- 精选专题 -->
+    <!-- <FeaturedSpecials></FeaturedSpecials> -->
+    <!-- 分页 -->
+    <div class="mt-10px flex justify-center">
+      <el-pagination
+        v-model:current-page="query.pageNo"
+        v-model:page-size="query.pageSize"
+        :page-sizes="[12, 24, 48]"
+        :total="result.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleChangeSize"
+        @current-change="handleChangeCurrent"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import KlNavTab from '@/components/kl-nav-tab/index.vue'
+  import KlWallpaperCategory from '@/components/kl-wallpaper-category/index.vue'
+  import RecommendedColumnsV2 from './components/RecommendedColumnsV2.vue'
+  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
+
+  import { reactive, watch, ref } from 'vue'
+  import { page } from '@/api/upnew/index'
+  import { pageRes, pageReq } from '@/api/upnew/types'
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+  const level = ref(
+    route.query.level
+      ? JSON.parse(route.query.level as string)
+      : [
+          {
+            id: '0',
+            name: '模型库',
+            isChildren: false,
+          },
+        ]
+  )
+
+  const query = reactive<pageReq>({
+    pageNo: 1,
+    pageSize: 12,
+    projectType: '',
+    editions: '',
+    source: '',
+    type: 3,
+  })
+  const result = reactive<pageRes>({
+    list: [],
+    total: 0,
+  })
+
+  // 如果id存在，则设置projectType
+  if (level.value.length) {
+    query.projectType = level.value[level.value.length - 1].id || ''
+  }
+
+  const getPage = () => {
+    page(query).then((res) => {
+      const { data, code } = res
+      if (code === 0) {
+        result.list = data.list
+        result.total = data.total
+      }
+    })
+  }
+
+  getPage()
+
+  const handleChangeSize = (size: number) => {
+    query.pageSize = size
+    query.pageNo = 1
+    getPage()
+  }
+
+  const handleChangeCurrent = (current: number) => {
+    query.pageNo = current
+    getPage()
+  }
+
+  watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
+    if (val) {
+      getPage()
+    }
+  })
+</script>
+<style lang="scss" scoped>
+  :deep(.el-pagination) {
+    .el-input__inner {
+      text-align: center !important;
+    }
+  }
+</style>