feat(home): 添加中间搜索区域和平台切换功能

新增 workflow-container 区域，包含平台标识切换和搜索创建功能。
支持 n8n、Coze、Dify、FastGPT 四个平台的展示与切换。
引入相关图标资源，并添加对应样式和交互逻辑。
同时定义了 SCSS 变量与混合器以统一风格管理。

src/pages/Home.vue

@@ -20,12 +20,61 @@
         
       </el-carousel>
     </div>
+    <!-- 中间搜索区域 -->
+    <div class="workflow-container">
+      <!-- 平台标识区域 -->
+      <div class="platforms">
+        <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>
+        <div class="platform-item" @click="activePlatform = 'coze'" :class="{'active': activePlatform === 'coze'}">
+          <img :src="cozeIcon" alt="" class="platform-icon n8n-icon">
+          <span class="platform-name">Coze</span>
+        </div>
+        <div class="platform-item" @click="activePlatform = 'dify'" :class="{'active': activePlatform === 'dify'}">
+          <img :src="difyIcon" alt="" class="platform-icon n8n-icon">
+          <span class="platform-name">Dify</span>
+        </div>
+        <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 class="search-create-bar" :class="{'notFirst': activePlatform !== 'n8n'}">
+        <div class="search-input-container flex_1 gradient">
+          <input
+            type="text"
+            placeholder="请输入要搜索的工作流"
+            class="search-input"
+          />
+          <button class="search-btn gradient">
+            <img :src="searchIcon" alt="" class="icon-search">
+            搜索
+          </button>
+        </div>
+        <button class="create-btn gradient">
+          <img :src="addIcon" alt="" class="icon-add">
+          创建工作流
+        </button>
+      </div>
+    </div>
     
   </div>
 </template>
 
 <script setup>
 import bannerImage from '@/assets/imgs/banner.png'
+import searchIcon from '@/assets/imgs/search.png'
+import addIcon from '@/assets/imgs/add.png'
+import n8Icon from '@/assets/imgs/8n8.png'
+import cozeIcon from '@/assets/imgs/coze.png'
+import difyIcon from '@/assets/imgs/dify.png'
+import fastgptIcon from '@/assets/imgs/FastGPT.png'
+
+
 import { onMounted,ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -35,6 +84,7 @@ onMounted(() => {
 })
 
 const router = useRouter()
+const activePlatform = ref('n8n')
 
 
 // 监听图片加载完成，动态设置轮播图高度
@@ -72,4 +122,164 @@ const goToCourseDetail = (id,title) => {
     // object-position: center; // 居中显示
   }
 }
+.icon-search{
+  width: 24px;
+  height: 24px;
+}
+.icon-add{
+  width: 30px;
+  height: 30px;
+}
+// 1. 定义全局变量，方便统一修改
+$primary-bg: rgba(255, 255, 255, 0.5);
+$white: #fff;
+$border-radius-base: 8px;
+$border-radius-sm: 8px;
+$border-radius-xs: 4px;
+$text-color-main: #333;
+$font-size-base: 14px;
+$font-size-sm: 12px;
+$gap-base: 8px;
+$gap-lg: 16px;
+$gap-xl: 24px;
+$padding-base: 20px;
+$height-btn: 50px;
+
+// 2. 混合器：按钮通用样式
+@mixin btn-style($bg-start, $bg-end) {
+  padding: 0 16px;
+  color: $white;
+  border: none;
+  border-radius: $border-radius-sm;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: $gap-base;
+  font-size: 18px;
+  
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+// 3. 混合器：平台图标通用样式
+@mixin platform-icon-style($bg-color, $color: $white) {
+  width: 24px;
+  height: 24px;
+  border-radius: $border-radius-xs;
+  color: $color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 容器样式（SCSS嵌套）
+.workflow-container {
+
+ 
+  padding: $padding-base;
+  border-radius: $border-radius-base;
+  width: 1100px;
+  margin: $padding-base auto;
+
+  // 平台区域嵌套
+  .platforms {
+    display: flex;
+    position: relative;
+    top: px;
+
+    .platform-item {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 8px 0;
+      border-radius: $border-radius-sm  $border-radius-sm 0 0;
+      //手指
+      cursor: pointer;
+      &.active{
+        background-color: $primary-bg;
+      
+      }
+
+      .platform-icon {
+        &.n8n-icon {
+          @include platform-icon-style(#2563eb);
+          font-size: $font-size-base;
+        }
+
+        &.coze-icon {
+          @include platform-icon-style(#8b5cf6);
+          font-size: $font-size-base;
+        }
+
+        &.dify-icon {
+          @include platform-icon-style($white, $text-color-main);
+          border: 1px solid #eee;
+          font-size: $font-size-sm;
+        }
+
+        &.fastgpt-icon {
+          @include platform-icon-style(#1e293b);
+          font-size: $font-size-sm;
+        }
+      }
+
+      .platform-name {
+        font-size: $font-size-base;
+        color: $text-color-main;
+      }
+    }
+  }
+
+  // 搜索创建栏嵌套
+  .search-create-bar {
+    display: flex;
+    align-items: center;
+    gap: $gap-base;
+    background-color: $primary-bg;
+    padding: 16px;
+    border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
+   
+    &.notFirst{
+      border-radius: $border-radius-base;
+    }
+
+    .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(#0055FE, #2563eb);
+    }
+
+    .create-btn {
+      height: 56px;
+      @include btn-style(#a78bfa, #8b5cf6);
+    }
+    .search-input-container{
+      position: relative;
+      padding: 2px;
+      border-radius: 8px;
+      .search-btn{
+        position: absolute;
+        top: 6px;
+        right: 16px;
+      }
+    }
+  }
+}
 </style>

src/styles/index.scss

@@ -43,7 +43,9 @@ body ,htm{
   margin: 0 auto;
   padding: 20px;
 }
-
+.gradient{
+	background: linear-gradient( 90deg, #0055FE 0%, #C832FA 100%);
+}
 // 清除浮动
 .clearfix::after {
   content: "";