优化工具箱页面分类组件及交互功能

components/toolbox-components/kl-wallpaper-category.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
+    <div class="mb-[10px] flex items-start">
+      <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
+      <div class="ml-[30px] mt-[-6px] flex flex-wrap">
+        <div
+          v-for="(item, index) in projectTypeList"
+          :key="index"
+          class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
+          :class="item.id === query ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
+          @click="handleClick(item)"
+          >{{ item.name }}</div
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { parent } from '~/api/upnew/index'
+  import type { pageReq } from '~/api/upnew/types'
+  import { getDictTree } from '~/api/home/index'
+  import { ArrowRight } from '@element-plus/icons-vue'
+
+  const props = defineProps({
+    type: {
+      type: Number,
+      default: 1,
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    groundId: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const query = defineModel<string | undefined>('modelValue', {
+    required: true,
+  })
+
+  // 服务端渲染兼容方案：顺序执行异步操作
+  // 1. 先获取面包屑数据（已在上面通过useAsyncData获取）
+
+  // 2. 顺序获取分类下拉框数据
+  // 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
+  const getProjectTypeList = async () => {
+    try {
+      // 获取分类数据
+      const res = await parent({
+        type: 3,
+        parentId: 0,
+      })
+      const all = [{ id: '-1', name: '全部' }]
+      return [...all, ...res.data]
+    } catch (error) {
+      return []
+    }
+  }
+
+  // 使用useAsyncData获取分类列表，确保服务端渲染兼容性
+  const { data: projectTypeList } = await useAsyncData(
+    `projectType-draw-toolbox-${props.type}-${query.value}}`,
+    getProjectTypeList,
+    { server: true } // 确保在服务端执行
+  )
+
+  const handleClick = (row: any) => {
+    query.value = row.id
+  }
+
+  const handleClickBread = (row: any, index: number) => {
+    query.value = row.id
+  }
+</script>

pages/toolbox/index.vue

@@ -2,33 +2,17 @@
   <KlNavTab active="工具箱" />
   <!-- 搜索 -->
   <KlSearch @search="search"></KlSearch>
-  <div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
+  <div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-between">
-    <div class="left w-[821px]">
+    <div class="left w-[1000px]">
-      <!-- <img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" /> -->
+      <KlWallpaperCategory v-model="pageReq.categoryId" />
-      <el-form ref="formRef" :model="pageReq" label-width="110px" size="large" inline>
+      <KlTabBar v-model="pageReq.sourceType" :data="tabBar" class="mt-[20px]" />
-        <el-form-item label-width="110px" label="软件分类：" prop="categoryId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
+      <div class="mt-[4px] box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px] py-[17px]" v-loading="loading">
-          <!-- <el-select v-model="form.categoryId" placeholder="请选择软件分类" class="w-[361px]!" multiple>
+        <div
-          <el-option v-for="(item, index) in projectTypeList" :key="index" :label="item.name" :value="item.id" />
+          @click="handleClick(item)"
-        </el-select> -->
+          v-for="item in pageRes?.list"
-          <el-cascader
+          :key="item.id"
-            v-model="pageReq.categoryId"
+          class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px] cursor-pointer"
-            class="w-[280px]!"
+        >
-            :options="projectTypeList"
-            :props="cascaderProps"
-            clearable
-            collapse-tags
-            @change="handleCurrentChange(1)"
-          />
-        </el-form-item>
-        <el-form-item label-width="110px" label="分类：" prop="sourceType" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
-          <el-radio-group v-model="pageReq.sourceType" @change="handleCurrentChange(1)">
-            <el-radio :label="0">原创开发</el-radio>
-            <el-radio :label="1">转载分享</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px] py-[17px]">
-        <div @click="handleClick(item)" v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px] cursor-pointer">
           <div class="h-[142px] w-[200px] text-center">
             <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
           </div>
@@ -68,7 +52,7 @@
         />
       </div>
     </div>
-    <div class="right w-[398px]">
+    <div class="right w-[400px]">
       <div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[16px]">
         <div class="flex items-center text-[14px] text-[#333333] font-normal">
           <div class="mr-[14px] h-[16px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
@@ -76,36 +60,6 @@
         </div>
         <div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
       </div>
-      <!--  -->
-      <!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
-        <div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
-          <div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
-          标签列表
-        </div>
-        <div class="flex flex-wrap">
-          <div
-            v-for="item in 10"
-            :key="item"
-            class="mb-19px mr-26px box-border border border-[#D7D7D7] rounded-4px border-solid px-8px py-12px text-16px text-[#1A65FF] font-normal"
-            ># 标签名称1</div
-          >
-        </div>
-      </div> -->
-      <!--  -->
-      <!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
-        <div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
-          <div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
-          猜你喜欢
-        </div>
-        <div
-          v-for="item in 4"
-          :key="item"
-          class="mt-16px flex items-center border-b-1px border-b-[#eee] border-b-solid pb-16px text-16px text-[#333333] font-normal"
-        >
-          <img src="~/assets/images/aucad.png" alt="" srcset="" class="h-68px w-110px" />
-          <div class="ml-20px text-16px text-[#333333] font-normal">Stable Diffusion 商业变现与 绘画大模型多场景实战</div>
-        </div>
-      </div> -->
     </div>
   </div>
 </template>
@@ -113,14 +67,14 @@
 <script setup lang="ts">
   import KlNavTab from '~/components/kl-nav-tab/index.vue'
   import { page } from '~/api/toolbox/index.js'
-  import type { TpageReq, TpageRes } from '~/api/toolbox/types'
+  import { reactive, ref, watch } from 'vue'
-  import { reactive, ref } from 'vue'
   import KlSearch from '~/pages/toolbox/components/search.vue'
   import { getRelationRecommend } from '~/api/drawe-detail/index'
   import type { ProjectDrawPageRespVO } from '~/api/drawe-detail/types'
   import { parent } from '~/api/upnew/index'
   import emptyImg from '~/assets/images/empty.png'
   import dayjs from 'dayjs'
+  import KlWallpaperCategory from '~/components/toolbox-components/kl-wallpaper-category.vue'
 
   const cascaderProps = { multiple: false, label: 'name', value: 'id', emitPath: false }
 
@@ -128,19 +82,44 @@
     pageNo: 1,
     pageSize: 10,
     title: '',
-    categoryId: undefined,
+    categoryId: '-1',
-    sourceType: 0,
+    sourceType: -1,
   })
 
-  // const pageRes = ref<TpageRes>({
+  const tabBar = ref([
-  //   list: [],
+    {
-  //   total: 0,
+      label: '推荐工具',
-  // })
+      value: -1,
+    },
+    {
+      label: '原创开发',
+      value: 0,
+    },
+    {
+      label: '转载分享',
+      value: 1,
+    },
+  ])
 
+  const recommedComputed = computed(() => {
+    if (pageReq.sourceType === -1) {
+      return true
+    }
+    return false
+  })
+
+  const loading = ref(false)
   const { data: pageRes, refresh: getPage } = await useAsyncData(
     `draw-page-toobox-list`,
     async () => {
-      const res = await page(pageReq)
+      loading.value = true
+      const res = await page({
+        ...pageReq,
+        recommend: recommedComputed,
+        sourceType: pageReq.sourceType === -1 ? undefined : pageReq.sourceType,
+        categoryId: pageReq.categoryId === '-1' ? undefined : pageReq.categoryId,
+      })
+      loading.value = false
       if (res.code === 0) {
         return res.data
       }
@@ -154,22 +133,6 @@
     }
   )
 
-  const loading = ref(false)
-  // const getPage = () => {
-  //   loading.value = true
-  //   page(pageReq)
-  //     .then((res) => {
-  //       if (res.code === 0) {
-  //         pageRes.value = res.data
-  //       }
-  //     })
-  //     .finally(() => {
-  //       loading.value = false
-  //     })
-  // }
-
-  // getPage()
-
   const handleCurrentChange = (page: number) => {
     pageReq.pageNo = page
     getPage()
@@ -205,4 +168,8 @@
     })
     return res.data
   })
+
+  watch([() => pageReq.sourceType, () => pageReq.categoryId], (val) => {
+    getPage()
+  })
 </script>