```

feat(home): 实现平台分类动态渲染和搜索功能

- 将静态平台选项改为动态分类列表渲染
- 添加分类接口调用和数据绑定逻辑
- 修改搜索平台页面的分类筛选功能
- 实现二级分类联动选择
- 更新分页组件数据绑定
- 优化样式和交互体验
```

src/pages/Home.vue

@@ -23,7 +23,13 @@
     <div class="workflow-container">
       <!-- 平台标识区域 -->
       <div class="platforms">
-        <div class="platform-item" @click="activePlatform = 'n8n'" :class="{'active': activePlatform === 'n8n'}">
+        <div class="platform-item" v-for="item in categoryListTree" :key="item.categoryId"
+           @click="activePlatform = item.categoryName; categoryId = item.categoryId;" 
+           :class="{'active': categoryId === item.categoryId}">
+          <img :src="n8Icon" alt="" class="platform-icon n8n-icon">
+          <span class="platform-name">{{item.categoryName}}</span>
+        </div>
+        <!-- <div class="platform-item" @click="activePlatform = 'n8n'" :class="{'active': activePlatform === 'n8n'}">
           <img :src="n8Icon" alt="" class="platform-icon n8n-icon">
           <span class="platform-name">n8n</span>
         </div>
@@ -38,11 +44,11 @@
         <div class="platform-item" @click="activePlatform = 'fastgpt'" :class="{'active': activePlatform === 'fastgpt'}">
           <img :src="fastgptIcon" alt="" class="platform-icon n8n-icon">
           <span class="platform-name">FastGPT</span>
-        </div>
+        </div> -->
       </div>
 
       <!-- 搜索与创建区域 -->
-      <div class="search-create-bar" :class="{'notFirst': activePlatform !== 'n8n'}">
+      <div class="search-create-bar" :class="{'notFirst': categoryId !== categoryListTree[0]?.categoryId}">
         <div class="search-input-container flex_1 gradient">
           <input
             type="text"
@@ -81,19 +87,23 @@ import fastgptIcon from '@/assets/imgs/FastGPT.png'
 import detailIcon from '@/assets/imgs/detail.png'
 import CourseCard from '@/components/course-card.vue'
 
+import { getCategoryListTree } from '@/api/category.js'
+
 
 import { onMounted,ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n' 
 const { t } = useI18n() // 获取t函数// 导入useI18n
-
+const categoryListTree = ref([])
 
 onMounted(() => {
   console.log('Home mounted')
+  getCategoryListTreeFn();
 })
 
 const router = useRouter()
-const activePlatform = ref('n8n')
+const activePlatform = ref('');
+const categoryId = ref('');
 
 
 // 监听图片加载完成，动态设置轮播图高度
@@ -114,6 +124,7 @@ const goSearchPlatform = () => {
   router.push({
     path: `/search-platform`,
     query: {
+      categoryId: categoryId.value,
       activePlatform: activePlatform.value,
       metaTitle: activePlatform.value 
     }
@@ -128,6 +139,14 @@ const goWorkflowAdd = () => {
     }
   })
 };
+const getCategoryListTreeFn = () => {
+  getCategoryListTree().then(res => {
+    console.log(res)
+    categoryListTree.value = res.rows || [];
+    activePlatform.value = categoryListTree.value[0]?.categoryName || '';
+    categoryId.value = categoryListTree.value[0]?.categoryId || '';
+  })
+};
 </script>
 
 <style lang="scss">

src/pages/SearchPlatform.vue

@@ -10,8 +10,9 @@
               type="text"
               :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
               class="search-input"
+              v-model="searchFom.workflowTitle"
             />
-            <button class="search-btn bg_color_primary gradient">
+            <button class="search-btn bg_color_primary gradient" @click.stop.prevent="getList">
               <img :src="searchIcon" alt="" class="icon-search">
               {{$t('common.shousuo')}}
             </button>
@@ -29,13 +30,33 @@
         <div class="typeList flex-between typeborder">
           <div class="gray font_size14 typeName">类型：</div>
           <div class="flex_1 gap10">
-            <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</div>
+            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId2 === ''}"
+            @click="searchFom.categoryId2 = ''; searchFom.categoryId3 = '';getList('init');categoryListTree2=[]"
+            :key="-1">
+              全部
+            </div>
+            <div class="font_size14 typeItem" 
+             v-for="item in categoryListTree" :key="item.categoryId"
+             :class="{'active':searchFom.categoryId2 === item.categoryId}"
+             @click="searchFom.categoryId2 = item.categoryId;searchFom.categoryId3 = '';categoryListTree2=[]; getList('init');getCategoryListTreeFn2();">
+              {{item.categoryName}}
+            </div>
           </div>
         </div>
         <div class="typeList flex-between">
           <div class="gray font_size14 typeName">二级分类：</div>
           <div class="flex_1 gap10">
-            <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</div>
+            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId3 === ''}"
+            @click="searchFom.categoryId3 = ''; getList('init');"
+            :key="-1">
+              全部
+            </div>
+            <div class="font_size14 typeItem" 
+             v-for="item in categoryListTree2" :key="item.categoryId"
+             :class="{'active':searchFom.categoryId3 === item.categoryId}"
+             @click="searchFom.categoryId3 = item.categoryId; getList('init');">
+              {{item.categoryName}}
+            </div>
           </div>
         </div>
       </div>
@@ -48,9 +69,9 @@
       <!-- 分页 -->
       <!-- 替换原有的分页代码 -->
       <Pagination 
-        :total="pagination.total"
-        :page-size="pagination.pageSize"
-        :current-page="pagination.currentPage"
+        :total="searchFom.total"
+        :page-size="searchFom.pageSize"
+        :current-page="searchFom.pageNum"
         @page-change="handlePageChange"
       />
     </div>
@@ -66,30 +87,59 @@
   import CourseCard from '@/components/course-card.vue'
   import Pagination from '@/components/Pagination.vue'
 
+  import { getCategoryListTree } from '@/api/category.js'
+
 
   import { useRouter, useRoute } from 'vue-router'
   const router = useRouter()
   const route = useRoute()
   console.log(router,route)
-  import { ref, computed, reactive } from 'vue'
+  import { ref, computed, reactive, onMounted } from 'vue'
   //获取参数
   const query = route.query
+  const categoryId = ref(query.categoryId || '')
   const activePlatform = ref(query.activePlatform || '')
   //获取当前路由路径
   // const currentPath = ref(router.currentRoute.value.path)
   const isChildRoute = computed(() => {
     return route.matched.length > 1
   })
+  // 一级分类列表
+  const categoryListTree = ref([])
+  // 二级分类列表
+  const categoryListTree2 = ref([])
+  // 活动平台
+
   // 添加分页相关数据
-  const pagination = reactive({
-    currentPage: 1,
+  const listTotal = ref(0);
+  const searchFom = reactive({
+    categoryId1: categoryId.value,
+    categoryId2: '',
+    categoryId3: '',
+    workflowTitle: '',
+    pageNum: 1,
     pageSize: 10,
-    total: 100
   })
+
+  onMounted(() => {
+    getList();
+    getCategoryListTreeFn();
+  })
+
+   // 查询寻找工作流列表
+  const getList = async (type) => {
+    if(type === 'init'){
+      searchFom.pageNum = 1
+    }
+    // const res = await getQuestList(searchFom)
+    // if(res.code === 200){
+    // }
+  }
   const handlePageChange = (page) => {
-    pagination.currentPage = page
+    searchFom.pageNum = page
     // 这里可以添加获取数据的逻辑
     console.log('当前页:', page)
+    getList();
   }
 
   const goWorkflowAdd = () => {
@@ -101,6 +151,21 @@
       }
     })
   };
+
+  const getCategoryListTreeFn = () => {
+    getCategoryListTree({categoryId: categoryId.value}).then(res => {
+      console.log(res)
+      categoryListTree.value = res.rows || [];
+    })
+  };
+  const getCategoryListTreeFn2 = () => {
+    getCategoryListTree({categoryId: searchFom.categoryId2}).then(res => {
+      console.log(res)
+      categoryListTree2.value = res.rows || [];
+    })
+  };
+
+  
 </script>
 
 <style scoped lang="scss">
@@ -176,10 +241,12 @@
     }
     .typeItem{
       margin: 0 8px;
+      cursor: pointer;
+      padding: 4px 8px;
       &.active{
         background: rgba(45,113,255,0.1);
         border-radius: 4px 4px 4px 4px;
-        padding: 4px 8px;
+        
         color: $primary-color;
         font-weight: 600;
       }

src/pages/workflowTrade/workflowTrade.vue

@@ -128,7 +128,7 @@
       <!-- 分页 -->
       <!-- 替换原有的分页代码 -->
       <Pagination 
-        :total="searchFom.total"
+        :total="listTotal"
         :page-size="searchFom.pageSize"
         :current-page="searchFom.pageNum"
         @page-change="handlePageChange"
@@ -311,10 +311,10 @@
     .typeItem{
       margin: 0 8px;
       cursor: pointer;
+      padding: 4px 8px;
       &.active{
         background: rgba(45,113,255,0.1);
         border-radius: 4px 4px 4px 4px;
-        padding: 4px 8px;
         color: $primary-color;
         font-weight: 600;
       }