```

feat(course-card): 添加工作流卡片点击跳转功能

- 为课程卡片组件添加点击事件，实现跳转到工作流详情页
- 根据来源页面(fromPage)动态设置路由路径，首页来源跳转到 `/workflow-detail`
- 搜索平台页面来源跳转到 `/search-platform/workflow-detail`
- 添加路由参数 id: 2 和 metaTitle: 'route.WorkflowDetail'
- 修复工作流详情页面布局，添加详情右侧信息栏
- 增加国际化配置，添加'米币'和'工作流详情'翻译
- 优化课程卡片内容显示，添加最小高度限制
- 移除搜索平台页面的重复点击事件绑定
- 添加详细样式和组件导入
```

src/components/course-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="course-card list_item_animation">
+  <div class="course-card list_item_animation"  @click="goWorkflowDetail">
     <div class="bg_color_f5 coverImg"></div>
     <div class="course-card-bottom-height"></div>
     <div class="padding16 course-card-bottom">
@@ -7,11 +7,13 @@
         <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
         <div class="font_size13">2023-10-15</div>
       </div>
-      <div class="line2 font_size18 line_height22 bold mt10">
-        【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf如何破解pdf如何破解pdf如何破解pdf如何破解pdf
-      </div>
-      <div class="mt10 line1 gray font_size13">
-        - 本文介绍两款开源的密码破解工具John the Ripper和PDFCrack，用于破解PDF、Word、Excel、ZIP、RAR等文件的密码。John the Ripper支持字典和暴力破解两种模
+      <div style="min-height: 82px;">
+        <div class="line2 font_size18 line_height22 bold mt10">
+          【Linux】【操作】Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集
+        </div>
+        <div class="mt10 line1 gray font_size13">
+          - 本文介绍两款开源的密码破解工具John the Ripper和PDFCrack，用于破解PDF、Word、Excel、ZIP、RAR等文件的密码。John the Ripper支持字典和暴力破解两种模
+        </div>
       </div>
       <div class="mt10 flex-center-between">
         <div class="gap10">
@@ -67,13 +69,34 @@ import yunIcon from '@/assets/imgs/yun.png'
 import riliIcon from '@/assets/imgs/rili.png'
 import { useAppStore } from '@/pinia/appStore'
 const appStore = useAppStore();
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
 
 const props = defineProps({
   info: {
     type: Object,
     default: () => ({})
+  },
+  fromPage: {
+    type: String,
+    default: () => ''
   }
 });
+const goWorkflowDetail = () => {
+  let path = `/search-platform/workflow-detail`
+  if(props.fromPage === 'home'){
+    path = `/workflow-detail`
+  }
+  //增加参数名称
+  router.push({
+    path: path,
+    query: {
+      id:2,
+      metaTitle: 'route.WorkflowDetail'
+    }
+  })
+};
 </script>
 
 <style scoped lang="scss">

src/locales/en.js

@@ -11,6 +11,7 @@ export default {
     gongzuoliu: 'Workflow',
     gongzuoliu_trade: 'Workflow Trade',
     zaixianbaoming: 'Online Registration',
+    mibi: 'Mibit',
   },
   login: {
     smsLogin: 'SMS Login',
@@ -29,6 +30,7 @@ export default {
   route: {
     home: 'Home',
     gongzuoliu_trade_add: 'Publish Workflow Demand',
+    WorkflowDetail: 'Workflow Detail',
 
 
 

src/locales/zh-CN.js

@@ -12,6 +12,7 @@ export default {
     gongzuoliu: '工作流',
     gongzuoliu_trade: '工作流交易',
     zaixianbaoming: '在线报名',
+    mibi: '米币',
   },
   login: {
     smsLogin: '短信登录',
@@ -30,6 +31,7 @@ export default {
   route: {
     home: '首页',
     gongzuoliu_trade_add: '发布工作流需求',
+    WorkflowDetail: '工作流详情',
 
 
 

src/pages/Home.vue

@@ -63,7 +63,7 @@
     <!-- 工作流列表 -->
     <div class="course-list">
       <div class="course-grid">
-        <CourseCard v-for="item in 4" :key="item" />
+        <CourseCard v-for="item in 4" :key="item" fromPage="home"/>
       </div>
     </div>
     
@@ -128,7 +128,6 @@ const goWorkflowAdd = () => {
     }
   })
 };
-
 </script>
 
 <style lang="scss">

src/pages/SearchPlatform.vue

@@ -42,7 +42,7 @@
       <!-- 列表 -->
       <div class="course-list mt20">
         <div class="course-grid">
-          <CourseCard v-for="item in 4" :key="item" @click="goWorkflowDetail"/>
+          <CourseCard v-for="item in 4" :key="item"/>
         </div>
       </div>
       <!-- 分页 -->
@@ -92,17 +92,6 @@
     console.log('当前页:', page)
   }
 
-
-  const goWorkflowDetail = () => {
-    //增加参数名称
-    router.push({
-      path: `/search-platform/workflow-detail`,
-      query: {
-        id:2,
-        metaTitle: 'WorkflowDetail'
-      }
-    })
-  };
   const goWorkflowAdd = () => {
     //增加参数名称
     router.push({

src/pages/WorkflowDetail.vue

@@ -1,59 +1,131 @@
 <template>
   <div class="workflow-detail container-height">
     <Breadcrumb />
-    <div class="padding16 bg_color_fff border_radius_16">
-      <div class="gap10">
-        <el-button type="primary">免费</el-button>
-        <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
-      </div>
-      <div class="gap20 mt10">
-        <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 class="flex-between mt10">
+      <div class="flex_1 mr20">
+        <div class="padding16 bg_color_fff border_radius_16">
+          <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
+          <div class="gap20 mt10">
+            <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>
-        <div class="gap5">
-          <img :src="shiyongIcon" alt="员工" style="width: 16px; height: 16px;">
-          <span class="font_size14">2,456使用</span>
+        <!-- 工作流预览 -->
+        <div class="padding16 bg_color_fff border_radius_10 mt10">
+          <div class="gap10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">工作流预览</div>
+          </div>
         </div>
-        <div class="gap5">
-          <img :src="yunIcon" alt="员工" style="width: 16px; height: 16px;">
-          <span class="font_size14">n8n平台</span>
+        <!-- 工作流预览 -->
+        <div class="padding16 bg_color_fff border_radius_10 mt10">
+          <div class="gap10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">详情</div>
+          </div>
+          <BlockNoteEditor v-model="editorContent" :editable="false" class="mt20"/>
         </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">
-        <el-button type="primary" class="font_size16" size="large">
-          <img :src="useNowIcon" alt="员工" style="width: 30px; height: 30px;">
-          <span class="ml10 font_size18">立即使用</span>
-        </el-button>
-        <el-button type="primary" class="flex_1" size="large" plain>
-          <img :src="downIcon" alt="员工" style="width: 30px; height: 30px;">
-          <span class="ml10 font_size18">下载工作流</span>
-        </el-button>
       </div>
-    </div>
-    <!-- 工作流预览 -->
-    <div class="padding16 bg_color_fff border_radius_10 mt10">
-      <div class="gap10">
-        <div class="line_vertical"></div>
-        <div class="font_size20 bold">工作流预览</div>
-      </div>
-    </div>
-    <!-- 工作流预览 -->
-    <div class="padding16 bg_color_fff border_radius_10 mt10">
-      <div class="gap10">
-        <div class="line_vertical"></div>
-        <div class="font_size20 bold">详情</div>
+      <!-- 详情右侧 -->
+      <div class="detail_right">
+        <div class="detail_right_content detail_right">
+          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
+            <div class="flex-center-between">
+              <div class="flex-column">
+                <div class="font_size16">当前及格</div>
+                <div class="color_price">
+                  <span class="font_size32">0</span> 
+                  <span>{{$t('common.mibi')}}</span>
+                </div>
+              </div>
+              <el-button type="success" plain size="mini">免费</el-button>
+            </div>
+            <div class="mt20">
+              <el-button type="primary" class="font_size16" size="large" style="width: 100%;">
+                <img :src="useNowIcon" alt="员工" style="width: 30px; height: 30px;">
+                <span class="font_size18">立即使用</span>
+              </el-button>
+            </div>
+            <div class="mt20">
+              <el-button type="primary" size="large" plain style="width: 100%;">
+                <img :src="downIcon" alt="员工" style="width: 30px; height: 30px;">
+                <span class="font_size18">下载工作流</span>
+              </el-button>
+            </div>
+          </div>
+          <!-- 工作流作者 -->
+          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
+            <div class="flex-center-between">
+              <div class="flex-between flex_1">
+                <el-avatar :size="50" :src="appStore.avatar" />
+                <div class="ml10 flex_1">
+                  <div class="font_size18 bold">张三</div>
+                  <div class="gap5">
+                    <el-tag type="primary" v-for="item in 5" :key="item" >技能标签</el-tag>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div class="weiguanzhu cursor-pointer gap5">
+                  <img :src="weiguanzhuIcon" alt="" style="width: 16px; height: 16px;">
+                  <span class="font_size14">关注</span>
+                </div>
+                <div class="yiguanzhu cursor-pointer gap5 contactInfo_bg">
+                  <img :src="yiguanzhuIcon" alt="" style="width: 16px; height: 16px;">
+                  <span class="font_size14">关注</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
+            <div class="gap10">
+              <div class="line_vertical"></div>
+              <div class="font_size20 bold">文件信息</div>
+            </div>
+            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
+              <div class="gap5">
+                <img :src="geshiIcon" alt="" style="width: 17.5px; height: 17.5px;">
+                <span class="font_size16">格式</span>
+              </div>
+              <span class="font_size16 bold">.josn</span>
+            </div>
+            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
+              <div class="gap5">
+                <img :src="neicunIcon" alt="" style="width: 17.5px; height: 17.5px;">
+                <span class="font_size16">大小</span>
+              </div>
+              <span class="font_size16 bold">24kb</span>
+            </div>
+            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
+              <div class="gap5">
+                <img :src="banbenIcon" alt="" style="width: 17.5px; height: 17.5px;">
+                <span class="font_size16">版本</span>
+              </div>
+              <span class="font_size16 bold">v1.0.2</span>
+            </div>
+          </div>
+        </div>
       </div>
-       <BlockNoteEditor v-model="editorContent" :editable="false" class="mt20"/>
     </div>
   </div>
 </template>
@@ -66,10 +138,17 @@
   import biaoqianIcon from '@/assets/imgs/biaoqian.png'
   import useNowIcon from '@/assets/imgs/useNow.png'
   import downIcon from '@/assets/imgs/down.png'
+  import weiguanzhuIcon from '@/assets/imgs/weiguanzhu.png'
+  import yiguanzhuIcon from '@/assets/imgs/yiguanzhu.png'
+  import geshiIcon from '@/assets/imgs/geshi.png'
+  import neicunIcon from '@/assets/imgs/neicun.png'
+  import banbenIcon from '@/assets/imgs/banben.png'
 
   import BlockNoteEditor from '@/components/BlockNoteEditor.vue';
   import { useRoute } from 'vue-router'
   const route = useRoute()
+  import { useAppStore } from '@/pinia/appStore'
+  const appStore = useAppStore()
   import { ref } from 'vue'
   //获取参数
   const query = route.query
@@ -96,6 +175,20 @@
 
 <style scoped lang="scss">
 .workflow-detail {
+  .weiguanzhu{
+    padding: 8px 12px;
+    background: #FCEBEB;
+    border-radius: 8px 8px 8px 8px;
+    color: #E43434 ;
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .yiguanzhu{
+    padding: 8px 12px;
+    border-radius: 8px 8px 8px 8px;
+    font-weight: bold;
+    font-size: 14px;
+  }
   
 }
 </style>

src/router/index.js

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

src/styles/index.scss

@@ -55,6 +55,9 @@ body{
 .detail_right{
 	width: 410px;
 }
+.detail_right_content{
+	position: fixed;
+}
 .contactInfo_bg{
 	background: #F5F7FA;
 	border-radius: 8px 8px 8px 8px;
@@ -507,6 +510,9 @@ wx-image{
 .border_radius_4{
 	border-radius: 4px;
 }
+.border_radius_8{
+	border-radius: 4px;
+}
 .border_radius_10{
 	border-radius: 10px;
 }