feat(router): 更新路由路径从 /my-learning 到 /workflow-trade

将 App.vue 中的导航路径由 `/my-learning` 修改为 `/workflow-trade`，并更新相关菜单激活状态判断逻辑。

feat(i18n): 添加“发布需求”国际化文案

在中英文语言包中新增 `fabuxuqiu` 字段，用于支持“发布需求”功能的多语言显示。

feat(router): 新增 /workflow-trade 页面路由配置

添加新的页面路由 `/workflow-trade`，指向工作流交易主页，并设置相应的标题元信息。

feat(styles): 调整分页组件样式及全局间距类

Pagination.vue 中引入 SCSS 并自定义 Element UI 分页按钮背景色；
index.scss 中增加 `.mt2` 和 `.mb10` 类，并调整容器底部边距以优化布局。

feat(ui): 微调搜索按钮位置和列表间距

在 Home.vue 和 SearchPlatform.vue 中调整搜索按钮右侧距离，并为课程列表增加底部外边距以改善视觉效果。

src/App.vue

@@ -89,13 +89,13 @@ const handleLoginSuccess = () => {
 }
 //
 function goMyLearning() {
-  router.push('/my-learning')
+  router.push('/workflow-trade')
 };
 // 将 activeIndex 改为响应式，并根据当前路由动态计算
 const activeIndex = computed(() => {
   console.log(route)
   if (route.path === '/') return '1'
-  if (route.path.startsWith('/my-learning')) {
+  if (route.path.startsWith('/workflow-trade')) {
     return '2'
   }
   return '1' // 默认返回首页

src/components/Pagination.vue

@@ -36,10 +36,16 @@ const handleCurrentChange = (page) => {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
 .pagination-container {
   display: flex;
   justify-content: center;
   margin-top: 20px;
 }
+.el-pagination.is-background .el-pager li,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .btn-next
+{
+  background-color: #ffffff;
+}
 </style>

src/locales/en.js

@@ -7,6 +7,7 @@ export default {
     qingshuruyaosousuodegongzuoliu: 'Please input the workflow to search',
     shousuo: 'Search',
     chuangjiangongzuoliu: 'Create Workflow',
+    fabuxuqiu: 'Publish Demand',
 
 
     gongzuoliu: 'Workflow',

src/locales/zh-CN.js

@@ -8,6 +8,7 @@ export default {
     qingshuruyaosousuodegongzuoliu: '请输入要搜索的工作流',
     shousuo: '搜索',
     chuangjiangongzuoliu: '创建工作流',
+    fabuxuqiu: '发布需求',
 
     gongzuoliu: '工作流',
     gongzuoliu_trade: '工作流交易',

src/pages/Home.vue

@@ -297,7 +297,7 @@ $height-btn: 50px;
       .search-btn{
         position: absolute;
         top: 6px;
-        right: 16px;
+        right: 6px;
       }
     }
   }
@@ -305,6 +305,7 @@ $height-btn: 50px;
 .home-page{
   .course-list{
     margin-top: 70px;
+    margin-bottom: 140px;
   }
 }
 </style>

src/pages/SearchPlatform.vue

@@ -39,7 +39,7 @@
           </div>
         </div>
       </div>
-      <!-- 课程列表 -->
+      <!-- 列表 -->
       <div class="course-list mt20">
         <div class="course-grid">
           <CourseCard v-for="item in 4" :key="item" @click="goWorkflowDetail"/>
@@ -172,7 +172,7 @@
       .search-btn{
         position: absolute;
         top: 6px;
-        right: 16px;
+        right: 6px;
       }
     }
   }

src/pages/workflowTrade/workflowTrade.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="search-platform container-height">
+    <div v-if="!isChildRoute">
+      <Breadcrumb />
+      <div class="padding12 bg_color_fff border_radius_16">
+        <!-- 搜索与创建区域 -->
+        <div class="search-create-bar">
+          <div class="search-input-container flex_1">
+            <input
+              type="text"
+              :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
+              class="search-input"
+            />
+            <button class="search-btn bg_color_primary">
+              <img :src="searchIcon" alt="" class="icon-search">
+              {{$t('common.shousuo')}}
+            </button>
+          </div>
+          <button class="create-btn bg_color_primary" @click.stop.prevent="goWorkflowAdd">
+            <img :src="addIcon" alt="" class="icon-add">
+            {{$t('common.fabuxuqiu')}}
+          </button>
+        </div>
+        <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>
+        </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>
+        </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>
+        </div>
+      </div>
+      <!-- 列表 -->
+      <div class="course-list mt20">
+        <div class="font_size20 bold mb10">共 <span class="color_theme">5</span> 条需求</div>
+        <div class="padding16 bg_color_fff border_radius_16 mb20" v-for="item in 4" :key="item">
+          <div class="gap10">
+            <el-button type="primary">免费</el-button>
+            <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
+          </div>
+          <div class="gap20 mt10">
+            <el-button type="primary" size="large" plain>一级分类名称</el-button>
+            <el-button type="primary" size="large" plain>二级分类名称</el-button>
+            <div class="gap5">
+              <img :src="yuangong" alt="员工" style="width: 16px; height: 16px;">
+              <span class="font_size14">张三</span>
+            </div>
+            <div class="gap5">
+              <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
+              <span class="font_size14">2024-10-16</span>
+            </div>
+            <!-- <div class="gap5">
+              <img :src="shiyongIcon" alt="员工" style="width: 16px; height: 16px;">
+              <span class="font_size14">2,456使用</span>
+            </div> -->
+            <!-- <div class="gap5">
+              <img :src="yunIcon" alt="员工" style="width: 16px; height: 16px;">
+              <span class="font_size14">n8n平台</span>
+            </div> -->
+            <!-- <div class="gap5">
+              <img :src="biaoqianIcon" alt="员工" style="width: 16px; height: 16px;">
+              <span class="font_size14">二级分类名称-三级分类名称</span>
+            </div> -->
+          </div>
+          <div class="font_size16 gray mt10">此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。</div>
+          <div class="mt20 gap10">
+            <el-avatar :size="32" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+            <div class="font_size16 bold">张三</div>
+            <div class="font_size14 gray mt2">2024-10-16</div>
+          </div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <!-- 替换原有的分页代码 -->
+      <Pagination 
+        :total="pagination.total"
+        :page-size="pagination.pageSize"
+        :current-page="pagination.currentPage"
+        @page-change="handlePageChange"
+      />
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+  import searchIcon from '@/assets/imgs/search.png'
+  import addIcon from '@/assets/imgs/add.png'
+  import yuangong from '@/assets/imgs/yuangong.png'
+  import riliIcon from '@/assets/imgs/rili.png'
+  import shiyongIcon from '@/assets/imgs/shiyong.png'
+  import yunIcon from '@/assets/imgs/yun.png'
+  import biaoqianIcon from '@/assets/imgs/biaoqian.png'
+
+  import Pagination from '@/components/Pagination.vue'
+
+
+  import { useRouter, useRoute } from 'vue-router'
+  const router = useRouter()
+  const route = useRoute()
+  console.log(router,route)
+  import { ref, computed, reactive } from 'vue'
+  import { useAppStore } from '@/pinia/appStore'
+  const appStore = useAppStore()
+
+  //获取参数
+  const query = route.query
+  const activePlatform = ref(query.activePlatform || '')
+  //获取当前路由路径
+  // const currentPath = ref(router.currentRoute.value.path)
+  const isChildRoute = computed(() => {
+    return route.matched.length > 1
+  })
+  // 添加分页相关数据
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 100
+  })
+  const handlePageChange = (page) => {
+    pagination.currentPage = page
+    // 这里可以添加获取数据的逻辑
+    console.log('当前页:', page)
+  }
+
+
+  const goWorkflowDetail = () => {
+    //增加参数名称
+    router.push({
+      path: `/search-platform/workflow-detail`,
+      query: {
+        id:2,
+        metaTitle: 'WorkflowDetail'
+      }
+    })
+  };
+  const goWorkflowAdd = () => {
+    //增加参数名称
+    router.push({
+      path: `/search-platform/workflow-add`,
+      query: {
+        activePlatform: activePlatform.value,
+      }
+    })
+  };
+</script>
+
+<style scoped lang="scss">
+  // 2. 混合器：按钮通用样式
+@mixin btn-style() {
+  padding: 0 16px;
+  color: #ffffff;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap:8px;
+  font-size: 18px;
+  
+  &:hover {
+    opacity: 0.9;
+  }
+}
+.search-platform {
+ 
+  // 搜索创建栏嵌套
+  .search-create-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 10px;
+
+    .search-input {
+      flex: 1;
+      height: 60px;
+      padding: 0 12px;
+      outline: none;
+      font-size: 18px;
+      border-radius:7px;
+      border: none;
+      width: 100%;
+      //占位符的颜色
+      ::placeholder {
+        color: #999;
+      }
+    }
+
+    .search-btn {
+      height: 50px;
+      @include btn-style();
+    }
+
+    .create-btn {
+      height: 56px;
+      @include btn-style();
+    }
+    .search-input-container{
+      position: relative;
+      border-radius: 8px;
+      border:2px solid $primary-color;
+      .search-btn{
+        position: absolute;
+        top: 6px;
+        right: 6px;
+      }
+    }
+  }
+  .typeList{
+    padding: 20px 0;
+    &.typeborder{
+      border-bottom: 1px dashed #DCDFE6;
+    }
+    .typeName{
+      margin-top: 6px;
+      width: 80px;
+    }
+    .typeItem{
+      margin: 0 8px;
+      &.active{
+        background: rgba(45,113,255,0.1);
+        border-radius: 4px 4px 4px 4px;
+        padding: 4px 8px;
+        color: $primary-color;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -53,6 +53,12 @@ const routes = [
     component: () => import('@/pages/WorkflowAdd.vue'),
     meta: { title: 'common.chuangjiangongzuoliu' }
   },
+  {
+    path: '/workflow-trade',
+    name: 'WorkflowTradeHome',
+    component: () => import('@/pages/workflowTrade/workflowTrade.vue'),
+    meta: { title: 'common.gongzuoliu_trade' }
+  },
   {
     path: '/course/:id',
     name: 'CourseDetail',

src/styles/index.scss

@@ -21,6 +21,7 @@ $danger-color: #e63946; // 危险色（价格、警告等）
 }
 .container-height {
   min-height: calc(100vh - 60px);
+	margin-bottom: 140px;
 }
 
 
@@ -173,6 +174,9 @@ wx-image{
 .ml20 {
 	margin-left: 20px;
 }
+.mt2 {
+	margin-top: 2px;
+}
 .mt16 {
 	margin-top: 16px;
 }
@@ -194,6 +198,9 @@ wx-image{
 .mb20 {
 	margin-bottom: 20px;
 }
+.mb10 {
+	margin-bottom: 10px;
+}
 .ellipsis {
 	overflow: hidden;
 	text-overflow: ellipsis;