```

feat(editor): 调整 BlockNote 编辑器容器内边距样式

将 `.blocknote-container` 的 padding 从 `12px` 修改为 `12px 0`，优化内部布局显示效果。

feat(search): 为课程卡片添加点击事件跳转至工作流详情页

在 SearchPlatform 页面的 CourseCard 组件上增加 `@click="goWorkflowDetail"` 事件绑定，实现页面跳转功能。

refactor(workflow): 移除 WorkflowAdd 页面中冗余的 getHtml 事件监听

删除 BlockNoteEditor 上不再使用的 `@getHtml` 属性，简化组件调用逻辑。

feat(detail): 新增 WorkflowDetail 页面内容展示与样式布局

新增工作流详情页结构与样式，包括标题、标签信息、描述文本及操作按钮；
引入多个图片资源用于图标展示；添加只读模式下的 BlockNoteEditor 内容预览区域。

style(scss): 增加 ml5 和 gap5 样式类定义

在全局样式文件中新增 `.ml5` 和 `.gap5` 类，便于统一控制元素间距和布局对齐。
```

src/components/BlockNoteEditor.vue

@@ -47,7 +47,7 @@ watch(() => props.modelValue, (newVal) => {
 .blocknote-container {
   border: 1px solid #e5e7eb;
   border-radius: 6px;
-  padding: 12px;
+  padding: 12px 0;
   min-height: 250px;
   width: 100%;
 }

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" />
+          <CourseCard v-for="item in 4" :key="item" @click="goWorkflowDetail"/>
         </div>
       </div>
       <!-- 分页 -->

src/pages/WorkflowAdd.vue

@@ -56,7 +56,7 @@
             />
           </el-form-item>
           <el-form-item label="详情">
-              <BlockNoteEditor v-model="editorContent" @getHtml="getHtml" :editable="true"/>
+            <BlockNoteEditor v-model="editorContent" :editable="true"/>
           </el-form-item>
         </div>
       </div>

src/pages/WorkflowDetail.vue

@@ -1,17 +1,97 @@
 <template>
   <div class="workflow-detail container-height">
     <Breadcrumb />
-    <h1>{{id}}</h1>
+    <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>
+        <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">
+        <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>
+       <BlockNoteEditor v-model="editorContent" :editable="false" class="mt20"/>
+    </div>
   </div>
 </template>
 
 <script setup>
-  import { useRouter } from 'vue-router'
-  const router = useRouter()
+  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 useNowIcon from '@/assets/imgs/useNow.png'
+  import downIcon from '@/assets/imgs/down.png'
+
+  import BlockNoteEditor from '@/components/BlockNoteEditor.vue';
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
   import { ref } from 'vue'
   //获取参数
-  const query = router.currentRoute.value.query
-  const id = ref(query.id || '')
+  const query = route.query
+  const id = ref(query.id || '');
+  // 详情内容
+  const editorContent = ref(
+  [
+    {
+      type: "paragraph",
+      content: [{ type: "text", text: "只读模式" }]
+    },
+    {
+    "id": "378ce968-02c2-4856-888b-c35a355aa84b",
+    "type": "codeBlock",
+    "props": {
+        "language": "text"
+    },
+    "content": [],
+    "children": []
+    }
+  ]
+);
 </script>
 
 <style scoped lang="scss">

src/styles/index.scss

@@ -164,6 +164,9 @@ wx-image{
 .mr10 {
 	margin-right: 10px;
 }
+.ml5 {
+	margin-left: 5px;
+}
 .ml10 {
 	margin-left: 10px;
 }
@@ -398,6 +401,14 @@ wx-image{
   align-items: center;
    flex-wrap:wrap ;
 }
+.gap5{
+	//水平垂直居中-首部对齐 间隙10px
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 5px;
+	flex-wrap:wrap ;
+}
 .gap10{
 	//水平垂直居中-首部对齐 间隙10px
 	display: flex;