feat: 首页样式替换

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.history

package.json

@@ -15,7 +15,9 @@
     "@blocknote/mantine": "^0.44.0",
     "@blocknote/react": "^0.44.0",
     "@blocknote/xl-multi-column": "^0.44.0",
+    "@element-plus/icons-vue": "^2.3.2",
     "axios": "^1.13.2",
+    "dompurify": "^3.3.3",
     "element-plus": "^2.11.9",
     "lodash": "^4.17.23",
     "pinia": "^3.0.4",
@@ -26,12 +28,23 @@
     "veaury": "^2.6.3",
     "video.js": "^8.23.4",
     "vue": "^3.5.24",
-    "vue-i18n": "^9.14.5",
+    "vue-i18n": "^11.3.0",
     "vue-react-wrapper": "^0.3.1",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.1",
+    "@vheemstra/vite-plugin-imagemin": "^2.2.1",
     "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.2.4"
+    "autoprefixer": "^10.4.27",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-pngquant": "^10.0.0",
+    "imagemin-svgo": "^12.0.0",
+    "postcss": "^8.5.8",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "tailwindcss": "^4.2.1",
+    "terser": "^5.46.0",
+    "vite": "^7.2.4",
+    "vite-plugin-compression": "^0.5.1"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

src/assets/logos/coze.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <!-- Coze 品牌图标 - 蓝色主题 -->
+  <rect width="64" height="64" rx="14" fill="#4B6EF5"/>
+  <!-- 章鱼/机器人头部 -->
+  <ellipse cx="32" cy="26" rx="14" ry="13" fill="white" opacity="0.95"/>
+  <!-- 眼睛 -->
+  <circle cx="26" cy="24" r="3.5" fill="#4B6EF5"/>
+  <circle cx="38" cy="24" r="3.5" fill="#4B6EF5"/>
+  <circle cx="27" cy="23" r="1.2" fill="white"/>
+  <circle cx="39" cy="23" r="1.2" fill="white"/>
+  <!-- 嘴巴 -->
+  <path d="M27 30 Q32 34 37 30" stroke="#4B6EF5" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <!-- 触手/底部 -->
+  <path d="M20 37 Q18 44 22 46 Q24 48 26 44 Q28 48 30 46 Q32 48 34 46 Q36 48 38 44 Q40 48 42 46 Q46 44 44 37" fill="white" opacity="0.9"/>
+</svg>

src/assets/logos/dify.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <!-- Dify 官方品牌图标 - 白色背景 + 蓝色D圆环 -->
+  <rect width="64" height="64" rx="14" fill="white"/>
+  <!-- 外圆环 - 蓝色 -->
+  <circle cx="32" cy="32" r="22" stroke="#1C64F2" stroke-width="8" fill="none"/>
+  <!-- D字母缺口（右侧切割，形成D形） -->
+  <rect x="32" y="10" width="24" height="44" fill="white"/>
+  <!-- D字母内部白色填充 -->
+  <circle cx="32" cy="32" r="13" fill="white"/>
+  <!-- 左侧竖线（D的竖边） -->
+  <rect x="10" y="10" width="8" height="44" rx="0" fill="white"/>
+  <!-- 重新绘制：蓝色D形状 -->
+  <path d="M18 12 L18 52 L30 52 Q50 52 50 32 Q50 12 30 12 Z" fill="#1C64F2"/>
+  <!-- D内部白色空心 -->
+  <path d="M24 20 L24 44 L30 44 Q42 44 42 32 Q42 20 30 20 Z" fill="white"/>
+</svg>

src/assets/logos/fastgpt.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <!-- FastGPT 官方品牌图标 - 蓝色背景 + 白色F字母 -->
+  <rect width="64" height="64" rx="14" fill="#2B6CB0"/>
+  <!-- F 字母 -->
+  <!-- 竖线 -->
+  <rect x="16" y="14" width="8" height="36" rx="2" fill="white"/>
+  <!-- 顶部横线 -->
+  <rect x="16" y="14" width="28" height="8" rx="2" fill="white"/>
+  <!-- 中间横线 -->
+  <rect x="16" y="28" width="22" height="7" rx="2" fill="white"/>
+</svg>

src/assets/logos/n8n.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <!-- n8n 官方品牌图标 - 橙红色背景 -->
+  <rect width="64" height="64" rx="14" fill="#EA4B71"/>
+  <!-- 中心节点 -->
+  <circle cx="32" cy="32" r="6" fill="white"/>
+  <!-- 左上节点 -->
+  <circle cx="16" cy="20" r="5" fill="white" opacity="0.9"/>
+  <!-- 右上节点 -->
+  <circle cx="48" cy="20" r="5" fill="white" opacity="0.9"/>
+  <!-- 下方节点 -->
+  <circle cx="32" cy="48" r="5" fill="white" opacity="0.9"/>
+  <!-- 连接线：中心到左上 -->
+  <line x1="27" y1="28" x2="20" y2="24" stroke="white" stroke-width="2.5" stroke-opacity="0.8" stroke-linecap="round"/>
+  <!-- 连接线：中心到右上 -->
+  <line x1="37" y1="28" x2="44" y2="24" stroke="white" stroke-width="2.5" stroke-opacity="0.8" stroke-linecap="round"/>
+  <!-- 连接线：中心到下方 -->
+  <line x1="32" y1="38" x2="32" y2="43" stroke="white" stroke-width="2.5" stroke-opacity="0.8" stroke-linecap="round"/>
+</svg>

src/components/EmptyState.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-empty :description="description || $t('common.noData')">
+    <slot />
+  </el-empty>
+</template>
+
+<script setup>
+defineProps({
+  description: {
+    type: String,
+    default: ''
+  }
+})
+</script>

src/components/SkeletonCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="skeleton-card" :style="{ width: width, borderRadius: radius }">
+    <!-- 封面骨架 -->
+    <div class="skeleton" :style="{ height: imageHeight }"></div>
+    <!-- 内容骨架 -->
+    <div class="skeleton-body" :style="{ padding: bodyPadding }">
+      <!-- 时间行 -->
+      <div class="skeleton skeleton-line" style="width: 40%; height: 14px; margin-bottom: 10px;"></div>
+      <!-- 标题 -->
+      <div class="skeleton skeleton-line" style="width: 90%; height: 18px; margin-bottom: 8px;"></div>
+      <div class="skeleton skeleton-line" style="width: 70%; height: 18px; margin-bottom: 12px;"></div>
+      <!-- 描述 -->
+      <div class="skeleton skeleton-line" style="width: 100%; height: 13px; margin-bottom: 16px;"></div>
+      <!-- 作者行 -->
+      <div class="skeleton-row">
+        <div class="skeleton skeleton-avatar"></div>
+        <div class="skeleton skeleton-line" style="width: 80px; height: 14px;"></div>
+        <div style="flex: 1;"></div>
+        <div class="skeleton skeleton-line" style="width: 60px; height: 14px;"></div>
+      </div>
+      <!-- 按钮行 -->
+      <div class="skeleton-row" style="margin-top: 12px; gap: 8px;">
+        <div class="skeleton skeleton-btn"></div>
+        <div class="skeleton skeleton-btn"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  width: {
+    type: String,
+    default: '345px',
+  },
+  imageHeight: {
+    type: String,
+    default: '204px',
+  },
+  bodyPadding: {
+    type: String,
+    default: '16px',
+  },
+  radius: {
+    type: String,
+    default: '12px',
+  },
+})
+</script>
+
+<style scoped>
+.skeleton-card {
+  background: #ffffff;
+  border: 1px solid #f1f5f9;
+  overflow: hidden;
+}
+
+.skeleton-body {
+  background: white;
+}
+
+.skeleton-line {
+  display: block;
+  border-radius: 4px;
+}
+
+.skeleton-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.skeleton-btn {
+  flex: 1;
+  height: 36px;
+  border-radius: 6px;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>

src/main.js

@@ -8,6 +8,8 @@ import App from './App.vue'
 import i18n from './i18n' // 导入i18n配置
 // 导入自定义消息工具
 import message from './utils/message'
+// 导入全局样式（Tailwind CSS）
+import './styles/tailwind.css'
 
 const app = createApp(App)
 app.use(createPinia())

src/pages/Home.txt

@@ -0,0 +1,433 @@
+<template>
+  <div class="home-page">
+    <div class="banner flex-center">
+      <div class="flex-between" style="width:100%">
+        <div class="flex_1 flex-column-start-between mr20" >
+          <img :src="allyinqing" alt="" style="height:40px">
+          <img :src="aigongzuoliu" alt="" style="height:186px">
+          <!-- <div>
+            <div class="tansuowuxian">探索无线</div>
+            <div class="gradient-text-fallback" data-text="AI工作流">AI工作流</div>
+          </div> -->
+          <div class="font_size24 line_height30">
+            <!-- 一站式发现、交易与运行自动化工作流。连接n8n、Coze、Dify 等主流平台，释放生产力潜能。 -->
+            {{ promotionText }}
+          </div>
+          <img :src="userTotal" alt="" style="height:52px" class="list_item_animation">
+        </div>
+        <el-carousel height="522px" style="width: 777px;" :autoplay="false" :interval="3000">
+          <el-carousel-item v-for="(item,index) in 3" :key="index">
+            <img
+              :src="`https://baomiai.oss-cn-shanghai.aliyuncs.com/static/banner-0${index+1}.png?v=0.0.1`"
+              class="carousel-image"
+              @load="onImageLoad"
+            />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
+    <!-- 中间搜索区域 -->
+    <div class="workflow-container">
+      <!-- 平台标识区域 -->
+      <div class="platforms">
+        <div class="platform-item" v-for="item in categoryListTree" :key="item.categoryId"
+           @click="activePlatform = item.categoryName; categoryId = item.categoryId; platformUrl = item.categoryUrl;" 
+           :class="{'active': categoryId === item.categoryId}">
+          <img :src="n8Icon" alt="" class="platform-icon n8n-icon bg_color_f5" v-if="item.categoryName === 'n8n'">
+          <img :src="cozeIcon" alt="" class="platform-icon coze-icon bg_color_f5" v-if="item.categoryName === 'coze'">
+          <img :src="difyIcon" alt="" class="platform-icon dify-icon bg_color_f5" v-if="item.categoryName === 'dify'">
+          <img :src="fastgptIcon" alt="" class="platform-icon fastgpt-icon bg_color_f5" v-if="item.categoryName === 'fastGpt'">
+          <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>
+        <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': categoryId !== categoryListTree[0]?.categoryId}">
+        <div class="search-input-container flex_1 gradient">
+          <input
+            type="text"
+            :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
+            class="search-input"
+            v-model="workflowTitle"
+          />
+          <button class="search-btn gradient" @click.stop.prevent="goSearchPlatform">
+            <img :src="searchIcon" alt="" class="icon-search">
+            {{$t('common.shousuo')}}
+          </button>
+        </div>
+        <button class="create-btn gradient" @click.stop.prevent="goWorkflowAdd">
+          <img :src="addIcon" alt="" class="icon-add">
+          {{$t('common.chuangjiangongzuoliu')}}
+        </button>
+      </div>
+    </div>
+    <!-- 工作流列表 -->
+    <div class="course-list">
+      <div class="course-grid">
+        <CourseCard v-for="item in list" :key="item.workflowId" :info="item" fromPage="home"/>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+import searchIcon from '@/assets/imgs/search.png'
+import allyinqing from '@/assets/imgs/allyinqing.png'
+import aigongzuoliu from '@/assets/imgs/aigongzuoliu.png'
+import userTotal from '@/assets/imgs/userTotal.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 detailIcon from '@/assets/imgs/detail.png'
+import CourseCard from '@/components/course-card.vue'
+import { isLogin, openFullScreenLoading } from '@/utils/util.js'
+
+import { getCategoryListTree } from '@/api/category.js'
+import { getDictList } from '@/api/common.js'
+import { getPublishList } from '@/api/publish.js'
+
+
+import { onMounted,ref, inject, reactive } 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();
+  // getList();
+  loadMore();
+  getDictListFn();
+})
+
+const router = useRouter()
+const activePlatform = ref('');
+const categoryId = ref('');
+const list = ref([]);
+const workflowTitle = ref('');
+const platformUrl = ref('');
+
+
+// 监听图片加载完成，动态设置轮播图高度
+const carouselHeight = ref('auto')
+const onImageLoad = (event) => {
+  const img = event.target
+  const aspectRatio = img.naturalWidth / img.naturalHeight
+  const containerWidth = img.offsetWidth
+  const calculatedHeight = containerWidth / aspectRatio
+  carouselHeight.value = calculatedHeight + 'px'
+}
+
+
+
+
+const goSearchPlatform = () => {
+  //增加参数名称
+  router.push({
+    path: `/search-platform`,
+    query: {
+      categoryId: categoryId.value,
+      activePlatform: activePlatform.value,
+      metaTitle: activePlatform.value ,
+      workflowTitle: workflowTitle.value,
+      platformUrl:platformUrl.value
+    }
+  })
+};
+const openLoginDialog = inject('openLoginDialog')
+const goWorkflowAdd = () => {
+   //判断是否登录
+  if(!isLogin({callback: openLoginDialog,t})){
+    return;
+  }
+  //增加参数名称
+  router.push({
+    path: `workflow-add`,
+    query: {
+    }
+  })
+};
+const getCategoryListTreeFn = () => {
+  getCategoryListTree().then(res => {
+    console.log(res)
+    categoryListTree.value = res.rows || [];
+    activePlatform.value = categoryListTree.value[0]?.categoryName || '';
+    categoryId.value = categoryListTree.value[0]?.categoryId || '';
+    platformUrl.value = categoryListTree.value[0]?.categoryUrl || '';
+  })
+};
+
+// 查询寻找工作流列表
+const searchFom = reactive({
+  pageNum: 0,
+  pageSize: 8,
+  orderByColumn: 'publishId',
+  isAsc: 'desc'
+})
+const total = ref(0); 
+const hasLoadedAll = ref(false);
+// const getList = async (type) => {
+//   const res = await getPublishList(searchFom)
+//   if(res.code === 200){
+//     list.value = res.rows || [];
+//   }
+// };
+const loadMore = async () => {
+  // 如果已经加载完所有数据，则不再请求
+  if (hasLoadedAll.value) {
+    return;
+  }
+  const loading = openFullScreenLoading();
+  searchFom.pageNum += 1;
+  const res = await getPublishList(searchFom)
+  loading.close();
+  if(res.code === 200){
+    list.value = [...list.value, ...res.rows || []];
+    total.value = res.total || 0;
+    // 判断是否已加载完所有数据
+    if (list.value.length >= total.value) {
+      hasLoadedAll.value = true;
+    }
+  }
+};
+
+// 首页宣传文案
+const promotionText = ref('');
+const getDictListFn = () => {
+  getDictList({dictType:'bus_promotion_text'}).then(res => {
+    console.log('bus_promotion_text',res)
+    promotionText.value = res.rows[0]?.dictLabel || '';
+  })
+}
+
+
+defineExpose({
+  loadMore
+});
+
+</script>
+
+<style lang="scss">
+.tansuowuxian,.gradient-text-fallback{
+  font-size: 80px;
+  font-weight: 600;
+}
+.gradient-text-fallback {
+  position: relative;
+  /* 基础文字颜色（降级方案） */
+  color: #333;
+}
+
+.gradient-text-fallback::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: linear-gradient(90deg, #0055FE, #C832FA);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  z-index: 1;
+}
+
+.banner {
+  // margin-top: 140px;
+  height: calc(100vh - 60px);
+  min-height: 600px;
+  .carousel-image {
+    width: 100%;
+    height: 522px;
+    // object-fit: cover; // 保持比例填充整个容器
+    // 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: 6px;
+      }
+    }
+  }
+}
+.home-page{
+  // height: calc(100vh - 60px);
+  // overflow: auto;
+  .course-list{
+    margin-top: 70px;
+    margin-bottom: 140px;
+    // height: calc(100vh - 60px - 140px);
+    // overflow: auto;
+  }
+}
+</style>

src/pages/Home/SectionAbout.vue

@@ -0,0 +1,205 @@
+<template>
+  <section class="section-about relative overflow-hidden py-28" ref="sectionRef" style="background: linear-gradient(180deg, oklch(0.96 0.03 280) 0%, oklch(0.98 0.015 270) 50%, oklch(0.97 0.025 260) 100%);">
+    <!-- 背景装饰 -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden">
+      <!-- 网格线 -->
+      <div class="absolute inset-0" style="background-image: linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px); background-size: 48px 48px;"></div>
+      <!-- 左上光晓 -->
+      <div class="absolute top-0 left-0 w-96 h-96 rounded-full opacity-40" style="background: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%); filter: blur(60px);"></div>
+      <!-- 右下光晓 -->
+      <div class="absolute bottom-0 right-0 w-96 h-96 rounded-full opacity-30" style="background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%); filter: blur(80px);"></div>
+    </div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="text-center mb-16 reveal-up" :class="{ 'is-visible': isVisible }">
+        <span class="inline-flex items-center gap-2 bg-violet-50 border border-violet-200 text-violet-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 tracking-wide uppercase">
+          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
+          平台介绍
+        </span>
+        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4 leading-tight">
+          一个平台，驾驭<br/>
+          <span class="bg-gradient-to-r from-violet-600 via-blue-600 to-cyan-500 bg-clip-text text-transparent">所有 AI 引擎</span>
+        </h2>
+        <p class="text-gray-500 text-lg max-w-2xl mx-auto">暴米AI 深度整合四大顶级平台，让你在一个地方完成所有 AI 工作流的搭建、管理与优化</p>
+      </div>
+
+      <!-- 主体 -->
+      <div class="flex flex-col lg:flex-row gap-12 items-stretch">
+        <!-- 左侧：SVG 节点连接画布 -->
+        <div class="lg:w-3/5 reveal-left" :class="{ 'is-visible': isVisible }">
+          <div class="relative rounded-3xl overflow-hidden border border-gray-100 shadow-2xl shadow-violet-100/60 bg-white h-full">
+            <!-- 浏览器顶栏 -->
+            <div class="flex items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-100">
+              <div class="flex gap-1.5">
+                <div class="w-3 h-3 rounded-full bg-red-400"></div>
+                <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
+                <div class="w-3 h-3 rounded-full bg-green-400"></div>
+              </div>
+              <div class="flex-1 mx-3 bg-white rounded-lg px-3 py-1 text-xs text-gray-400 border border-gray-200 flex items-center gap-2">
+                <svg class="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
+                workflow-canvas.baomiai.com
+              </div>
+              <span class="text-green-600 text-xs font-medium flex items-center gap-1">
+                <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
+                实时运行中
+              </span>
+            </div>
+            <!-- SVG 画布 -->
+            <div class="bg-gray-50/80 p-4">
+              <svg viewBox="0 0 680 440" class="w-full" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                  <filter id="glow1"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+                  <filter id="glow2"><feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+                  <linearGradient id="lg-n8n" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#ef4444"/></linearGradient>
+                  <linearGradient id="lg-coze" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#3b82f6"/></linearGradient>
+                  <linearGradient id="lg-dify" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#10b981"/></linearGradient>
+                  <linearGradient id="lg-fgpt" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#f59e0b"/></linearGradient>
+                  <linearGradient id="center-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#7c3aed"/><stop offset="100%" stop-color="#2563eb"/></linearGradient>
+                </defs>
+                <!-- 背景网格 -->
+                <pattern id="gridLight" width="30" height="30" patternUnits="userSpaceOnUse">
+                  <path d="M 30 0 L 0 0 0 30" fill="none" stroke="rgba(139,92,246,0.07)" stroke-width="1"/>
+                </pattern>
+                <rect width="680" height="440" fill="url(#gridLight)"/>
+                <!-- 连接线 -->
+                <path d="M340,220 C280,220 200,175 150,155" stroke="url(#lg-n8n)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow"/>
+                <path d="M340,220 C400,220 480,175 530,155" stroke="url(#lg-coze)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow-r"/>
+                <path d="M340,220 C280,220 200,265 150,285" stroke="url(#lg-dify)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow-r"/>
+                <path d="M340,220 C400,220 480,265 530,285" stroke="url(#lg-fgpt)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow"/>
+                <!-- 流动光点 -->
+                <circle r="5" fill="rgba(139,92,246,0.9)" filter="url(#glow1)"><animateMotion dur="2.5s" repeatCount="indefinite" path="M340,220 C280,220 200,175 150,155"/></circle>
+                <circle r="5" fill="rgba(59,130,246,0.9)" filter="url(#glow1)"><animateMotion dur="3s" repeatCount="indefinite" begin="0.6s" path="M340,220 C400,220 480,175 530,155"/></circle>
+                <circle r="5" fill="rgba(16,185,129,0.9)" filter="url(#glow1)"><animateMotion dur="2.8s" repeatCount="indefinite" begin="1.2s" path="M340,220 C280,220 200,265 150,285"/></circle>
+                <circle r="5" fill="rgba(245,158,11,0.9)" filter="url(#glow1)"><animateMotion dur="3.2s" repeatCount="indefinite" begin="1.8s" path="M340,220 C400,220 480,265 530,285"/></circle>
+                <!-- 中心光晕 -->
+                <circle cx="340" cy="220" r="52" fill="none" stroke="rgba(139,92,246,0.15)" stroke-width="1.5" class="node-pulse"/>
+                <!-- 中心节点 -->
+                <rect x="300" y="192" width="80" height="56" rx="16" fill="url(#center-grad)" filter="url(#glow2)"/>
+                <text x="340" y="216" text-anchor="middle" fill="white" font-size="11" font-weight="900">暴米AI</text>
+                <text x="340" y="232" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">Platform</text>
+                <circle cx="340" cy="242" r="3" fill="#4ade80"/>
+                <!-- n8n 节点 -->
+                <g class="float-node" style="transform-origin: 150px 155px;">
+                  <circle cx="150" cy="155" r="34" fill="white" stroke="rgba(239,68,68,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
+                  <circle cx="150" cy="155" r="26" fill="rgba(239,68,68,0.08)"/>
+                  <text x="150" y="150" text-anchor="middle" fill="#ef4444" font-size="12" font-weight="900">n8n</text>
+                  <text x="150" y="166" text-anchor="middle" fill="rgba(239,68,68,0.7)" font-size="8">开源自动化</text>
+                </g>
+                <!-- Coze 节点 -->
+                <g class="float-node" style="transform-origin: 530px 155px; animation-delay: 0.7s;">
+                  <circle cx="530" cy="155" r="34" fill="white" stroke="rgba(59,130,246,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
+                  <circle cx="530" cy="155" r="26" fill="rgba(59,130,246,0.08)"/>
+                  <text x="530" y="150" text-anchor="middle" fill="#2563eb" font-size="12" font-weight="900">Coze</text>
+                  <text x="530" y="166" text-anchor="middle" fill="rgba(37,99,235,0.7)" font-size="8">AI Bot 平台</text>
+                </g>
+                <!-- Dify 节点 -->
+                <g class="float-node" style="transform-origin: 150px 285px; animation-delay: 1.4s;">
+                  <circle cx="150" cy="285" r="34" fill="white" stroke="rgba(16,185,129,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
+                  <circle cx="150" cy="285" r="26" fill="rgba(16,185,129,0.08)"/>
+                  <text x="150" y="280" text-anchor="middle" fill="#059669" font-size="12" font-weight="900">Dify</text>
+                  <text x="150" y="296" text-anchor="middle" fill="rgba(5,150,105,0.7)" font-size="8">LLM 应用</text>
+                </g>
+                <!-- FastGPT 节点 -->
+                <g class="float-node" style="transform-origin: 530px 285px; animation-delay: 2.1s;">
+                  <circle cx="530" cy="285" r="34" fill="white" stroke="rgba(245,158,11,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
+                  <circle cx="530" cy="285" r="26" fill="rgba(245,158,11,0.08)"/>
+                  <text x="530" y="278" text-anchor="middle" fill="#d97706" font-size="10" font-weight="900">FastGPT</text>
+                  <text x="530" y="294" text-anchor="middle" fill="rgba(217,119,6,0.7)" font-size="8">知识库问答</text>
+                </g>
+                <!-- 浮动数据标签 -->
+                <rect x="240" y="55" width="200" height="28" rx="14" fill="white" stroke="rgba(139,92,246,0.2)" stroke-width="1" filter="url(#glow1)"/>
+                <circle cx="258" cy="69" r="4" fill="#4ade80"/>
+                <text x="270" y="73" fill="rgba(55,65,81,0.9)" font-size="9" font-weight="600">今日执行 15,750 次 · 成功率 99.8%</text>
+                <rect x="220" y="390" width="240" height="28" rx="14" fill="white" stroke="rgba(139,92,246,0.2)" stroke-width="1"/>
+                <text x="340" y="408" text-anchor="middle" fill="rgba(124,58,237,0.8)" font-size="9" font-weight="600">n8n · Coze · Dify · FastGPT 统一管理</text>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧：特性列表 -->
+        <div class="lg:w-2/5 flex flex-col gap-4 reveal-right" :class="{ 'is-visible': isVisible }">
+          <div v-for="(feat, idx) in features" :key="feat.title"
+            class="group flex gap-4 p-5 rounded-2xl border transition-all duration-300 cursor-pointer"
+            :class="activeFeature === idx
+              ? 'bg-white border-violet-300 shadow-lg shadow-violet-100/60'
+              : 'bg-gray-50/80 border-gray-100 hover:border-violet-200 hover:bg-white hover:shadow-md'"
+            @mouseenter="activeFeature = idx"
+            @mouseleave="activeFeature = null">
+            <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-xl flex-shrink-0 transition-all duration-300"
+              :class="activeFeature === idx ? feat.activeBg : feat.bg">
+              {{ feat.icon }}
+            </div>
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-gray-900 font-bold text-sm">{{ feat.title }}</span>
+                <span class="text-xs px-2 py-0.5 rounded-full font-medium" :class="feat.badge">{{ feat.badgeText }}</span>
+              </div>
+              <p class="text-gray-500 text-sm leading-relaxed">{{ feat.desc }}</p>
+              <div v-if="activeFeature === idx" class="mt-3 flex flex-wrap gap-1.5 animate-tag-in">
+                <span v-for="tag in feat.tags" :key="tag" class="text-xs px-2 py-0.5 rounded-full border" :class="feat.tagColor">{{ tag }}</span>
+              </div>
+            </div>
+            <div class="flex-shrink-0 flex items-center">
+              <svg class="w-4 h-4 text-gray-300 group-hover:text-violet-500 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+          <div class="mt-2 flex gap-3">
+            <button class="flex-1 bg-gradient-to-r from-violet-600 to-blue-600 text-white text-sm font-bold py-3 px-6 rounded-2xl hover:shadow-lg hover:shadow-violet-500/30 transition-all duration-300 hover:-translate-y-0.5 active:scale-95">
+              立即体验平台 →
+            </button>
+            <button class="px-5 py-3 rounded-2xl border border-gray-200 text-gray-600 text-sm font-medium hover:border-violet-300 hover:text-violet-600 transition-all duration-300 active:scale-95">
+              查看案例
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+const activeFeature = ref(null)
+const isVisible = ref(false)
+const sectionRef = ref(null)
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
+    { threshold: 0.15 }
+  )
+  if (sectionRef.value) observer.observe(sectionRef.value)
+})
+const features = [
+  { icon: '🎯', title: '可视化工作流编排', desc: '拖拽式节点连接，无需编程基础，5分钟搭建你的第一个AI自动化工作流。', badgeText: '零代码', badge: 'bg-violet-100 text-violet-600', bg: 'bg-violet-50', activeBg: 'bg-violet-100', tags: ['拖拽操作', '400+ 节点', '实时预览'], tagColor: 'bg-violet-50 text-violet-600 border-violet-200' },
+  { icon: '🚀', title: '一键多端部署', desc: '工作流构建完成后，一键部署到微信、飞书、钉钉等平台，7×24h 自动运行。', badgeText: '多端', badge: 'bg-blue-100 text-blue-600', bg: 'bg-blue-50', activeBg: 'bg-blue-100', tags: ['微信', '飞书', '钉钉', 'Slack', 'API'], tagColor: 'bg-blue-50 text-blue-600 border-blue-200' },
+  { icon: '🧠', title: '四大引擎统一调度', desc: 'n8n、Coze、Dify、FastGPT 在一个平台统一管理，AI 智能推荐最优引擎。', badgeText: '智能', badge: 'bg-emerald-100 text-emerald-600', bg: 'bg-emerald-50', activeBg: 'bg-emerald-100', tags: ['n8n', 'Coze', 'Dify', 'FastGPT'], tagColor: 'bg-emerald-50 text-emerald-600 border-emerald-200' },
+  { icon: '📊', title: '实时监控与告警', desc: '99.9% 在线率保障，毫秒级响应监控，异常自动告警，执行日志全记录。', badgeText: '99.9%', badge: 'bg-amber-100 text-amber-600', bg: 'bg-amber-50', activeBg: 'bg-amber-100', tags: ['实时监控', '自动告警', '执行日志'], tagColor: 'bg-amber-50 text-amber-600 border-amber-200' }
+]
+</script>
+
+<style scoped>
+/* SVG 内部动画 */
+:deep(.dash-flow) { stroke-dasharray: 8 5; animation: dashAnim 1.8s linear infinite; }
+:deep(.dash-flow-r) { stroke-dasharray: 8 5; animation: dashAnimR 2.2s linear infinite; }
+@keyframes dashAnim { to { stroke-dashoffset: -26; } }
+@keyframes dashAnimR { to { stroke-dashoffset: 26; } }
+:deep(.node-pulse) { animation: nodePulse 2.5s ease-out infinite; }
+@keyframes nodePulse { 0%,100% { opacity:0.4; } 50% { opacity:0.1; } }
+:deep(.float-node) { animation: floatY 3s ease-in-out infinite; }
+@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+.float-orb { animation: floatOrb 8s ease-in-out infinite; }
+.float-orb-2 { animation: floatOrb 10s ease-in-out infinite reverse; }
+@keyframes floatOrb { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(20px,-15px) scale(1.05); } 66% { transform: translate(-15px,10px) scale(0.95); } }
+.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
+.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
+.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; }
+.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
+.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s; }
+.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
+.animate-tag-in { animation: tagIn 0.3s ease; }
+@keyframes tagIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
+</style>

src/pages/Home/SectionAbout.vue.bak2

@@ -0,0 +1,287 @@
+<template>
+  <section class="section-about bg-white py-20 overflow-hidden">
+    <div class="max-w-7xl mx-auto px-6">
+      <!-- 标题区 -->
+      <div class="text-center mb-14">
+        <span class="inline-flex items-center gap-2 bg-violet-50 border border-violet-200 text-violet-600 text-xs font-semibold px-4 py-1.5 rounded-full mb-5">
+          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
+          平台介绍
+        </span>
+        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4 leading-tight">
+          一个平台，驾驭<br />
+          <span class="bg-gradient-to-r from-violet-600 via-purple-500 to-pink-500 bg-clip-text text-transparent">所有 AI 引擎</span>
+        </h2>
+        <p class="text-gray-500 text-lg max-w-2xl mx-auto leading-relaxed">
+          暴米AI 深度整合四大顶级平台，让你在一个地方完成所有 AI 工作流的搭建、管理与优化
+        </p>
+      </div>
+
+      <!-- 主体：左右等高布局 使用 flex + items-stretch -->
+      <div class="flex flex-col lg:flex-row lg:items-stretch gap-6 min-h-[700px]">
+
+        <!-- 左侧（占3/5）- flex col 内部自适应 -->
+        <div class="lg:w-3/5 flex flex-col gap-4 h-full">
+
+          <!-- 浏览器窗口展示 - 固定高度 -->
+          <div class="bg-gray-900 rounded-2xl overflow-hidden shadow-2xl flex flex-col" style="min-height:380px">
+            <!-- 浏览器顶栏 -->
+            <div class="flex items-center gap-2 px-4 py-3 bg-gray-800 border-b border-gray-700 flex-shrink-0">
+              <div class="flex gap-1.5">
+                <div class="w-3 h-3 rounded-full bg-red-400 hover:bg-red-500 transition-colors cursor-pointer"></div>
+                <div class="w-3 h-3 rounded-full bg-yellow-400 hover:bg-yellow-500 transition-colors cursor-pointer"></div>
+                <div class="w-3 h-3 rounded-full bg-green-400 hover:bg-green-500 transition-colors cursor-pointer"></div>
+              </div>
+              <div class="flex-1 mx-3 bg-gray-700 rounded-md px-3 py-1.5 text-xs text-gray-400 flex items-center gap-2">
+                <svg class="w-3 h-3 text-green-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
+                </svg>
+                app.baomi.ai/workflow/editor
+              </div>
+              <div class="flex items-center gap-2 flex-shrink-0">
+                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+                <span class="text-xs text-gray-400">已执行 <span class="text-green-400 font-bold">3,175</span> 次</span>
+              </div>
+            </div>
+
+            <!-- 工作流截图 - 占满剩余高度 -->
+            <div class="relative flex-1 overflow-hidden min-h-[280px]">
+              <img
+                src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&h=520&fit=crop&q=80"
+                alt="工作流编辑器"
+                class="w-full h-full object-cover"
+              />
+              <!-- 暗色叠加层 -->
+              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
+
+              <!-- 工作流节点浮层 - 居中 -->
+              <div class="absolute inset-0 flex items-center justify-center">
+                <div class="flex items-center gap-2 bg-black/50 backdrop-blur-md rounded-2xl px-5 py-3 border border-white/10 shadow-2xl">
+                  <div class="flex items-center gap-1.5 bg-violet-500 text-white text-xs font-bold px-3 py-2 rounded-xl shadow-lg shadow-violet-500/40">
+                    <span>⚡</span> 触发器
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <div class="w-5 h-0.5 bg-white/40"></div>
+                    <div class="w-1.5 h-1.5 bg-violet-400 rounded-full animate-ping"></div>
+                    <div class="w-5 h-0.5 bg-white/40"></div>
+                  </div>
+                  <div class="flex items-center gap-1.5 bg-blue-500 text-white text-xs font-bold px-3 py-2 rounded-xl shadow-lg shadow-blue-500/40">
+                    <span>🤖</span> AI 处理
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <div class="w-5 h-0.5 bg-white/40"></div>
+                    <div class="w-1.5 h-1.5 bg-blue-400 rounded-full animate-ping" style="animation-delay:0.3s"></div>
+                    <div class="w-5 h-0.5 bg-white/40"></div>
+                  </div>
+                  <div class="flex items-center gap-1.5 bg-green-500 text-white text-xs font-bold px-3 py-2 rounded-xl shadow-lg shadow-green-500/40">
+                    <span>📤</span> 多端输出
+                  </div>
+                </div>
+              </div>
+
+              <!-- 执行状态浮窗 - 右上角 -->
+              <div class="absolute top-4 right-4 bg-white/95 backdrop-blur-sm rounded-xl p-3 shadow-xl border border-gray-100">
+                <div class="flex items-center gap-2 mb-1.5">
+                  <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+                  <span class="text-xs font-bold text-gray-800">运行中</span>
+                </div>
+                <div class="text-xs text-gray-500 mb-0.5">平均耗时</div>
+                <div class="text-xl font-black text-violet-600">1.2s</div>
+              </div>
+
+              <!-- 左上角成功率徽章 -->
+              <div class="absolute top-4 left-4 bg-green-500/90 backdrop-blur-sm rounded-xl px-3 py-2 shadow-lg">
+                <div class="text-white text-xs font-bold">✓ 成功率 99.8%</div>
+              </div>
+            </div>
+
+            <!-- 引擎标签条 -->
+            <div class="flex items-center justify-center gap-4 px-4 py-3 bg-gray-800/80 flex-shrink-0">
+              <span class="text-gray-500 text-xs">支持</span>
+              <span class="text-xs font-bold text-violet-400 hover:text-violet-300 transition-colors cursor-pointer">n8n</span>
+              <span class="text-gray-600">·</span>
+              <span class="text-xs font-bold text-blue-400 hover:text-blue-300 transition-colors cursor-pointer">Coze</span>
+              <span class="text-gray-600">·</span>
+              <span class="text-xs font-bold text-green-400 hover:text-green-300 transition-colors cursor-pointer">Dify</span>
+              <span class="text-gray-600">·</span>
+              <span class="text-xs font-bold text-yellow-400 hover:text-yellow-300 transition-colors cursor-pointer">FastGPT</span>
+            </div>
+          </div>
+
+          <!-- 实时执行统计条 -->
+          <div class="bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl px-5 py-3 flex items-center justify-between flex-shrink-0">
+            <div class="flex items-center gap-2">
+              <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+              <span class="text-gray-300 text-xs font-medium">实时数据</span>
+            </div>
+            <div class="flex items-center gap-5">
+              <div class="text-center">
+                <div class="text-white font-bold text-sm">15,750</div>
+                <div class="text-gray-400 text-xs">今日执行</div>
+              </div>
+              <div class="w-px h-6 bg-gray-600"></div>
+              <div class="text-center">
+                <div class="text-green-400 font-bold text-sm">99.8%</div>
+                <div class="text-gray-400 text-xs">成功率</div>
+              </div>
+              <div class="w-px h-6 bg-gray-600"></div>
+              <div class="text-center">
+                <div class="text-yellow-400 font-bold text-sm">1.2s</div>
+                <div class="text-gray-400 text-xs">平均耗时</div>
+              </div>
+              <div class="w-px h-6 bg-gray-600"></div>
+              <div class="text-center">
+                <div class="text-blue-400 font-bold text-sm">50K+</div>
+                <div class="text-gray-400 text-xs">活跃用户</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部三个横向功能卡片 -->
+          <div class="grid grid-cols-3 gap-3 flex-shrink-0">
+            <div class="group relative overflow-hidden rounded-xl p-3 border bg-gradient-to-br from-violet-50 to-violet-100 border-violet-100 hover:border-violet-300 hover:shadow-md transition-all duration-300 cursor-pointer">
+              <div class="w-10 h-10 rounded-lg overflow-hidden mb-2 shadow-sm group-hover:scale-105 transition-transform duration-300">
+                <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=80&h=80&fit=crop" alt="可视化" class="w-full h-full object-cover" />
+              </div>
+              <div class="font-bold text-gray-800 text-xs mb-1">🎯 可视化编排</div>
+              <div class="text-gray-500 text-xs leading-relaxed mb-2">拖拽式节点，零代码搭建</div>
+              <div class="flex flex-wrap gap-1">
+                <span class="text-xs bg-violet-200 text-violet-700 px-1.5 py-0.5 rounded-full">拖拽</span>
+                <span class="text-xs bg-violet-200 text-violet-700 px-1.5 py-0.5 rounded-full">零代码</span>
+              </div>
+            </div>
+            <div class="group relative overflow-hidden rounded-xl p-3 border bg-gradient-to-br from-blue-50 to-blue-100 border-blue-100 hover:border-blue-300 hover:shadow-md transition-all duration-300 cursor-pointer">
+              <div class="w-10 h-10 rounded-lg overflow-hidden mb-2 shadow-sm group-hover:scale-105 transition-transform duration-300">
+                <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=80&h=80&fit=crop" alt="一键部署" class="w-full h-full object-cover" />
+              </div>
+              <div class="font-bold text-gray-800 text-xs mb-1">🚀 一键部署</div>
+              <div class="text-gray-500 text-xs leading-relaxed mb-2">多端 7×24h 自动运行</div>
+              <div class="flex flex-wrap gap-1">
+                <span class="text-xs bg-blue-200 text-blue-700 px-1.5 py-0.5 rounded-full">微信</span>
+                <span class="text-xs bg-blue-200 text-blue-700 px-1.5 py-0.5 rounded-full">飞书</span>
+              </div>
+            </div>
+            <div class="group relative overflow-hidden rounded-xl p-3 border bg-gradient-to-br from-green-50 to-green-100 border-green-100 hover:border-green-300 hover:shadow-md transition-all duration-300 cursor-pointer">
+              <div class="w-10 h-10 rounded-lg overflow-hidden mb-2 shadow-sm group-hover:scale-105 transition-transform duration-300">
+                <img src="https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=80&h=80&fit=crop" alt="智能调度" class="w-full h-full object-cover" />
+              </div>
+              <div class="font-bold text-gray-800 text-xs mb-1">🧠 智能调度</div>
+              <div class="text-gray-500 text-xs leading-relaxed mb-2">AI 自动优化执行顺序</div>
+              <div class="flex flex-wrap gap-1">
+                <span class="text-xs bg-green-200 text-green-700 px-1.5 py-0.5 rounded-full">AI调度</span>
+                <span class="text-xs bg-green-200 text-green-700 px-1.5 py-0.5 rounded-full">自动化</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧（占2/5）- flex col justify-between 确保与左侧等高 -->
+        <div class="lg:w-2/5 flex flex-col gap-4 h-full">
+
+          <!-- 四大引擎卡片 - flex-shrink-0 -->
+          <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-5 text-white shadow-xl flex-shrink-0">
+            <div class="flex items-center justify-between mb-4">
+              <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">⚡ 四大引擎</span>
+              <span class="text-xs text-violet-400 bg-violet-400/10 border border-violet-400/20 px-2.5 py-0.5 rounded-full">统一管理</span>
+            </div>
+            <div class="grid grid-cols-2 gap-2 mb-3">
+              <div v-for="eng in engines" :key="eng.name"
+                class="group flex items-center gap-2.5 bg-white/8 hover:bg-white/15 rounded-xl px-3 py-2.5 transition-all duration-200 cursor-pointer border border-white/5 hover:border-white/20">
+                <div class="w-8 h-8 rounded-lg overflow-hidden flex-shrink-0 ring-1 ring-white/10 group-hover:ring-white/30 transition-all">
+                  <img :src="eng.logo" :alt="eng.name" class="w-full h-full object-cover" />
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="text-xs font-bold text-white truncate">{{ eng.name }}</div>
+                  <div class="text-xs text-gray-400">{{ eng.count }} 工作流</div>
+                </div>
+                <div class="w-1.5 h-1.5 rounded-full bg-green-400 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"></div>
+              </div>
+            </div>
+            <div class="text-center text-xs text-gray-500 pt-2 border-t border-white/10">
+              n8n · Coze · Dify · FastGPT 统一管理
+            </div>
+          </div>
+
+          <!-- 实时监控卡片 - flex-1 填充剩余空间 -->
+          <div class="flex-1 bg-white rounded-2xl p-5 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
+            <div class="flex items-center justify-between mb-3 flex-shrink-0">
+              <span class="text-sm font-bold text-gray-800">📊 实时监控</span>
+              <div class="flex items-center gap-1.5">
+                <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+                <span class="text-xs text-green-600 font-semibold bg-green-50 px-2 py-0.5 rounded-full">99.9% 在线</span>
+              </div>
+            </div>
+            <!-- 图片区域 - flex-1 自适应 -->
+            <div class="flex-1 relative overflow-hidden rounded-xl mb-3 min-h-[100px]">
+              <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=240&fit=crop&q=80"
+                alt="监控图表" class="w-full h-full object-cover" />
+              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-white/50"></div>
+              <!-- 实时数据叠加 -->
+              <div class="absolute bottom-2 left-2 flex gap-2">
+                <div class="bg-white/90 backdrop-blur-sm rounded-lg px-2 py-1 text-xs font-bold text-green-600 shadow-sm">↑ 32%</div>
+                <div class="bg-white/90 backdrop-blur-sm rounded-lg px-2 py-1 text-xs font-bold text-blue-600 shadow-sm">128ms</div>
+              </div>
+              <!-- 右上角实时标签 -->
+              <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full animate-pulse">
+                LIVE
+              </div>
+            </div>
+            <!-- 三列数据 -->
+            <div class="grid grid-cols-3 gap-2 flex-shrink-0">
+              <div class="text-center p-2.5 bg-violet-50 rounded-xl hover:bg-violet-100 transition-colors">
+                <div class="text-lg font-black text-violet-600">99.9%</div>
+                <div class="text-xs text-gray-400 mt-0.5">在线率</div>
+              </div>
+              <div class="text-center p-2.5 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors">
+                <div class="text-lg font-black text-blue-600">128ms</div>
+                <div class="text-xs text-gray-400 mt-0.5">响应时间</div>
+              </div>
+              <div class="text-center p-2.5 bg-green-50 rounded-xl hover:bg-green-100 transition-colors">
+                <div class="text-lg font-black text-green-600">400+</div>
+                <div class="text-xs text-gray-400 mt-0.5">集成数</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 400+ 集成卡片 - flex-shrink-0 -->
+          <div class="bg-gradient-to-br from-violet-600 via-purple-600 to-pink-600 rounded-2xl p-5 text-white shadow-xl flex-shrink-0 relative overflow-hidden">
+            <!-- 背景装饰圆 -->
+            <div class="absolute -top-6 -right-6 w-28 h-28 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
+            <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
+            <div class="relative">
+              <div class="flex items-center justify-between mb-2">
+                <span class="text-xs font-bold text-white/70 uppercase tracking-wider">🔗 400+ 集成</span>
+                <span class="text-xs bg-white/20 text-white px-2 py-0.5 rounded-full border border-white/20">持续增加中</span>
+              </div>
+              <div class="text-2xl font-black mb-1">连接一切</div>
+              <div class="text-white/75 text-xs mb-3">连接你所有的业务工具和数据源</div>
+              <div class="flex flex-wrap gap-1.5">
+                <span v-for="tag in integrations" :key="tag"
+                  class="text-xs bg-white/20 hover:bg-white/30 text-white px-2.5 py-1 rounded-lg font-medium transition-colors cursor-pointer border border-white/10">{{ tag }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- CTA 按钮 - flex-shrink-0 -->
+          <button class="w-full bg-gray-900 hover:bg-gray-800 text-white font-bold py-4 rounded-2xl transition-all duration-300 hover:shadow-2xl group flex-shrink-0 relative overflow-hidden">
+            <!-- 扫光动画 -->
+            <div class="absolute inset-0 bg-gradient-to-r from-violet-600/0 via-violet-600/15 to-violet-600/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 pointer-events-none"></div>
+            <div class="relative">
+              <div class="text-sm font-bold">免费开始 →</div>
+              <div class="text-xs text-gray-400 font-normal mt-0.5 group-hover:text-gray-300 transition-colors">无需信用卡，5 分钟上手</div>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const engines = [
+  { name: 'n8n', count: '1,200+', logo: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=80&h=80&fit=crop' },
+  { name: 'Coze', count: '2,000+', logo: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=80&h=80&fit=crop' },
+  { name: 'Dify', count: '1,500+', logo: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=80&h=80&fit=crop' },
+  { name: 'FastGPT', count: '1,000+', logo: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=80&h=80&fit=crop' }
+]
+const integrations = ['API', 'Webhook', 'MySQL', 'Notion', 'Slack', 'Gmail', '微信', '飞书', '+400']
+</script>

src/pages/Home/SectionCTA.vue

@@ -0,0 +1,349 @@
+<template>
+  <section class="section-cta relative py-32 overflow-hidden" ref="ctaRef">
+    <!-- 深色背景 -->
+    <div class="absolute inset-0" style="background: linear-gradient(135deg, #0f0c29 0%, #1e0a3c 35%, #0d1b3e 65%, #0a0a1a 100%);"></div>
+
+    <!-- 背景图 -->
+    <div class="absolute inset-0">
+      <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&h=700&fit=crop&q=80"
+        alt="背景" class="w-full h-full object-cover opacity-10" />
+    </div>
+
+    <!-- 网格纹理 -->
+    <div class="absolute inset-0 pointer-events-none" style="background-image: linear-gradient(rgba(139,92,246,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.05) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <!-- 动态光晕 -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden">
+      <div class="cta-orb cta-orb-1"></div>
+      <div class="cta-orb cta-orb-2"></div>
+      <div class="cta-orb cta-orb-3"></div>
+    </div>
+
+    <!-- 浮动节点装饰 -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div v-for="(node, idx) in floatingNodes" :key="idx"
+        class="absolute rounded-2xl overflow-hidden shadow-2xl border border-white/10 cta-float-node"
+        :style="{ left: node.x, top: node.y, width: node.size, height: node.size, animationDelay: node.delay, animationDuration: node.duration }">
+        <img :src="node.img" :alt="'node'" class="w-full h-full object-cover opacity-40" />
+        <div class="absolute inset-0 flex items-center justify-center text-2xl">{{ node.icon }}</div>
+        <div class="absolute inset-0" :style="{ background: node.glow }"></div>
+      </div>
+    </div>
+
+    <!-- 主内容 -->
+    <div class="relative z-10 max-w-4xl mx-auto px-6 text-center text-white">
+
+      <!-- 用户头像群 -->
+      <div class="flex items-center justify-center gap-1 mb-10 reveal-up" :class="{ 'is-visible': isVisible }">
+        <div class="flex -space-x-2.5">
+          <img v-for="(av, i) in avatars" :key="i" :src="av" :alt="'用户'"
+            class="w-10 h-10 rounded-full object-cover ring-2 ring-white/20 shadow-lg hover:scale-110 hover:z-10 transition-transform duration-200 cursor-pointer"
+            :style="{ zIndex: avatars.length - i }" />
+        </div>
+        <div class="ml-4 text-left">
+          <div class="text-sm font-bold text-white">50,000+ 用户正在使用</div>
+          <div class="flex items-center gap-1 text-xs text-yellow-300 mt-0.5">
+            <span>★★★★★</span>
+            <span class="text-white/50 ml-1">4.9 分好评</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 主标题 -->
+      <div class="reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.15s;">
+        <h2 class="text-5xl lg:text-7xl font-black mb-6 leading-tight tracking-tight">
+          开启你的<br />
+          <span class="cta-gradient-text">AI 工作流之旅</span>
+        </h2>
+        <p class="text-white/60 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
+          加入 50,000+ 用户，用 AI 工作流自动化你的业务，<br class="hidden md:block"/>释放团队创造力，专注真正重要的事
+        </p>
+      </div>
+
+      <!-- 按钮组 -->
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.3s;">
+        <!-- 主按钮 -->
+        <button class="cta-btn-primary group" @mouseenter="primaryHover = true" @mouseleave="primaryHover = false">
+          <div class="cta-btn-shine" :class="{ 'cta-btn-shine-active': primaryHover }"></div>
+          <span class="relative z-10 flex items-center gap-2">
+            <span>🚀</span>
+            <span>免费开始使用</span>
+          </span>
+        </button>
+
+        <!-- 次按钮 -->
+        <button class="cta-btn-secondary group">
+          <div class="cta-btn-play">
+            <svg class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
+            </svg>
+          </div>
+          观看演示视频
+        </button>
+      </div>
+
+      <!-- 信任标签 -->
+      <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm text-white/40 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.45s;">
+        <span v-for="trust in trustItems" :key="trust.text" class="flex items-center gap-2 hover:text-white/70 transition-colors duration-200 cursor-default">
+          <span class="text-emerald-400 font-bold">✓</span>
+          {{ trust.text }}
+        </span>
+      </div>
+
+      <!-- 底部数据展示 -->
+      <div class="mt-16 grid grid-cols-3 gap-6 max-w-lg mx-auto reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.6s;">
+        <div v-for="stat in bottomStats" :key="stat.label" class="cta-bottom-stat">
+          <div class="text-2xl font-black mb-1" :style="{ color: stat.color }">{{ stat.value }}</div>
+          <div class="text-white/40 text-xs">{{ stat.label }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isVisible = ref(false)
+const ctaRef = ref(null)
+const primaryHover = ref(false)
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
+    { threshold: 0.1 }
+  )
+  if (ctaRef.value) observer.observe(ctaRef.value)
+})
+
+const floatingNodes = [
+  { x: '4%', y: '12%', size: '72px', icon: '⚡', delay: '0s', duration: '6s', img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(245,158,11,0.3), transparent)' },
+  { x: '88%', y: '8%', size: '64px', icon: '🤖', delay: '1s', duration: '7s', img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(139,92,246,0.3), transparent)' },
+  { x: '2%', y: '62%', size: '58px', icon: '📊', delay: '2s', duration: '8s', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(59,130,246,0.3), transparent)' },
+  { x: '91%', y: '58%', size: '68px', icon: '🔗', delay: '0.5s', duration: '9s', img: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(16,185,129,0.3), transparent)' },
+  { x: '46%', y: '4%', size: '52px', icon: '✨', delay: '1.5s', duration: '7.5s', img: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(236,72,153,0.3), transparent)' }
+]
+
+const avatars = [
+  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop',
+  'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=60&h=60&fit=crop',
+  'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=60&h=60&fit=crop',
+  'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop',
+  'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop'
+]
+
+const trustItems = [
+  { text: '无需信用卡' },
+  { text: '5 分钟上手' },
+  { text: '免费套餐永久可用' },
+  { text: '随时取消' }
+]
+
+const bottomStats = [
+  { value: '50K+', label: '活跃用户', color: '#a78bfa' },
+  { value: '99.9%', label: '在线率', color: '#34d399' },
+  { value: '4.9★', label: '用户评分', color: '#fbbf24' }
+]
+</script>
+
+<style scoped>
+/* 光晕 */
+.cta-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  pointer-events: none;
+}
+.cta-orb-1 {
+  width: 600px; height: 600px;
+  top: -150px; left: -100px;
+  background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%);
+  animation: ctaOrbFloat 12s ease-in-out infinite;
+}
+.cta-orb-2 {
+  width: 500px; height: 500px;
+  top: 50%; right: -100px;
+  background: radial-gradient(circle, rgba(236,72,153,0.2) 0%, transparent 70%);
+  animation: ctaOrbFloat 16s ease-in-out infinite reverse;
+}
+.cta-orb-3 {
+  width: 400px; height: 400px;
+  bottom: -100px; left: 40%;
+  background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
+  animation: ctaOrbFloat 10s ease-in-out infinite;
+}
+@keyframes ctaOrbFloat {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30px, -40px); }
+}
+
+/* 浮动节点 */
+.cta-float-node {
+  animation: ctaNodeFloat linear infinite;
+}
+@keyframes ctaNodeFloat {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  33% { transform: translateY(-14px) rotate(4deg); }
+  66% { transform: translateY(-7px) rotate(-3deg); }
+}
+
+/* 渐变文字 */
+.cta-gradient-text {
+  background: linear-gradient(135deg, #fbbf24 0%, #f472b6 40%, #a78bfa 80%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientShift 4s ease-in-out infinite;
+  background-size: 200% 200%;
+}
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+/* 主按钮 */
+.cta-btn-primary {
+  position: relative;
+  overflow: hidden;
+  background: white;
+  color: #7c3aed;
+  font-weight: 900;
+  font-size: 16px;
+  padding: 16px 40px;
+  border-radius: 20px;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: 0 8px 32px rgba(255,255,255,0.15);
+}
+.cta-btn-primary:hover {
+  transform: translateY(-3px) scale(1.03);
+  box-shadow: 0 20px 50px rgba(255,255,255,0.25);
+}
+.cta-btn-primary:active {
+  transform: translateY(-1px) scale(1.01);
+}
+.cta-btn-shine {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,0.08) 50%, transparent 100%);
+  transform: translateX(-100%);
+  transition: transform 0.6s ease;
+}
+.cta-btn-shine-active {
+  transform: translateX(100%);
+}
+
+/* 次按钮 */
+.cta-btn-secondary {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.15);
+  color: white;
+  font-weight: 700;
+  font-size: 15px;
+  padding: 16px 28px;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(8px);
+}
+.cta-btn-secondary:hover {
+  background: rgba(255,255,255,0.15);
+  border-color: rgba(255,255,255,0.3);
+  transform: translateY(-2px);
+}
+.cta-btn-play {
+  width: 36px; height: 36px;
+  background: rgba(255,255,255,0.15);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+.cta-btn-secondary:hover .cta-btn-play {
+  background: rgba(255,255,255,0.25);
+  transform: scale(1.1);
+}
+
+/* 底部数据 */
+.cta-bottom-stat {
+  text-align: center;
+  padding: 16px;
+  border-radius: 16px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.06);
+  transition: all 0.3s ease;
+}
+.cta-bottom-stat:hover {
+  background: rgba(255,255,255,0.08);
+  border-color: rgba(255,255,255,0.12);
+  transform: translateY(-3px);
+}
+
+/* 滚动动画 */
+.reveal-up {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+.reveal-up.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题自适应 */
+.section-cta h2 {
+  font-size: clamp(2.25rem, 6vw, 4.5rem);
+}
+.section-cta p {
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+}
+
+/* 平板（≤1024px）*/
+@media (max-width: 1024px) {
+  .section-cta { padding-top: 5rem; padding-bottom: 5rem; }
+  /* 浮动节点在平板上隐藏以防溢出 */
+  .cta-float-node { display: none; }
+}
+
+/* 手机横屏 / 小平板（≤768px）*/
+@media (max-width: 768px) {
+  .section-cta { padding-top: 4rem; padding-bottom: 4rem; }
+  .section-cta .max-w-4xl { padding-left: 1.25rem; padding-right: 1.25rem; }
+  .cta-btn-primary { padding: 14px 32px; font-size: 15px; }
+  .cta-btn-secondary { padding: 14px 22px; font-size: 14px; }
+  .section-cta .mt-16 { margin-top: 2.5rem; }
+  .section-cta .mb-12 { margin-bottom: 2rem; }
+  .section-cta .mb-10 { margin-bottom: 1.5rem; }
+  /* 底部数据卡片 */
+  .cta-bottom-stat { padding: 12px 8px; }
+  .cta-bottom-stat .text-2xl { font-size: 1.25rem; }
+}
+
+/* 手机竖屏（≤480px）*/
+@media (max-width: 480px) {
+  .section-cta { padding-top: 3rem; padding-bottom: 3rem; }
+  .section-cta .max-w-4xl { padding-left: 1rem; padding-right: 1rem; }
+  .cta-btn-primary { padding: 12px 24px; font-size: 14px; border-radius: 16px; }
+  .cta-btn-secondary { padding: 12px 18px; font-size: 13px; border-radius: 16px; gap: 8px; }
+  .cta-btn-play { width: 30px; height: 30px; }
+  .section-cta .w-10 { width: 2rem; height: 2rem; }
+  .section-cta .mt-16 { margin-top: 2rem; }
+  /* 底部数据卡片 */
+  .cta-bottom-stat { padding: 10px 6px; }
+  .cta-bottom-stat .text-2xl { font-size: 1.1rem; }
+  .cta-bottom-stat .text-xs { font-size: 0.65rem; }
+  /* 信任标签 */
+  .section-cta .text-sm { font-size: 0.75rem; }
+}
+
+/* 极小屏（≤360px）*/
+@media (max-width: 360px) {
+  .cta-btn-primary { padding: 11px 20px; font-size: 13px; }
+  .cta-btn-secondary { padding: 11px 14px; font-size: 12px; }
+  .cta-bottom-stat .text-2xl { font-size: 1rem; }
+}
+</style>

src/pages/Home/SectionCourses.vue

@@ -0,0 +1,359 @@
+<template>
+  <section class="section-courses relative overflow-hidden bg-blue-50 py-24">
+    <!-- 背景 -->
+    <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.05) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(245,158,11,0.04) 0%, transparent 60%);"></div>
+    <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle at 1px 1px, rgba(139,92,246,0.06) 1px, transparent 0); background-size: 36px 36px;"></div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="flex flex-col md:flex-row md:items-end justify-between mb-14 gap-6">
+        <div>
+          <span class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/30 text-amber-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
+            <span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span>
+            学习中心
+          </span>
+          <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-3">
+            系统学习，<span class="bg-gradient-to-r from-amber-500 to-orange-500 bg-clip-text text-transparent">快速精通</span>
+          </h2>
+          <p class="text-gray-500 text-base max-w-lg">从入门到精通，覆盖所有主流 AI 工作流平台，结构化学习路径</p>
+        </div>
+        <div class="flex items-center gap-3 flex-shrink-0">
+          <div class="flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2 shadow-sm">
+            <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+            <span class="text-gray-600 text-sm font-medium">1,200+ 学员正在学习</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 学习路径可视化 -->
+      <div class="relative mb-12">
+        <!-- 路径连接线 -->
+        <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-px -translate-y-1/2 z-0"
+          style="background: linear-gradient(90deg, transparent 5%, rgba(245,158,11,0.4) 15%, rgba(245,158,11,0.6) 50%, rgba(245,158,11,0.4) 85%, transparent 95%);"></div>
+
+        <!-- 路径节点 -->
+        <div class="relative z-10 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          <div v-for="(path, idx) in learningPaths" :key="path.title"
+            class="group relative cursor-pointer"
+            @mouseenter="activePath = idx"
+            @mouseleave="activePath = null"
+            @click="activePath = activePath === idx ? null : idx">
+
+            <!-- 节点卡片 -->
+            <div class="relative flex flex-col items-center text-center p-5 rounded-2xl border transition-all duration-400"
+              :class="activePath === idx
+                ? `bg-gray-800 border-${path.color}-500/60 shadow-xl shadow-${path.color}-500/20 -translate-y-2`
+                : 'bg-white/80 border-gray-100 hover:border-gray-200 hover:-translate-y-1 shadow-sm hover:shadow-md'">
+
+              <!-- 连接点（左右） -->
+              <div v-if="idx > 0" class="hidden lg:block absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 w-4 h-4 rounded-full border-2 border-gray-200 bg-white z-10"></div>
+              <div v-if="idx < learningPaths.length - 1" class="hidden lg:block absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 w-4 h-4 rounded-full border-2 border-gray-200 bg-white z-10"></div>
+
+              <!-- 等级徽章 -->
+              <div class="absolute -top-3 left-1/2 -translate-x-1/2 text-xs font-bold px-3 py-1 rounded-full border"
+                :class="path.levelClass">
+                {{ path.level }}
+              </div>
+
+              <!-- 图标 -->
+              <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 mt-3 transition-all duration-300 shadow-lg"
+                :class="activePath === idx ? path.iconActiveBg : path.iconBg">
+                {{ path.icon }}
+              </div>
+
+              <!-- 标题 -->
+              <div class="text-gray-900 font-bold text-sm mb-1">{{ path.title }}</div>
+              <div class="text-gray-500 text-xs mb-3">{{ path.subtitle }}</div>
+
+              <!-- 进度环 -->
+              <div class="relative w-12 h-12 mb-2">
+                <svg class="w-12 h-12 -rotate-90" viewBox="0 0 48 48">
+                  <circle cx="24" cy="24" r="20" fill="none" stroke="rgba(0,0,0,0.06)" stroke-width="3"/>
+                  <circle cx="24" cy="24" r="20" fill="none" :stroke="path.progressColor" stroke-width="3"
+                    :stroke-dasharray="`${path.progress * 1.257} 125.7`"
+                    stroke-linecap="round" class="transition-all duration-700"/>
+                </svg>
+                <div class="absolute inset-0 flex items-center justify-center">
+                  <span class="text-xs font-bold text-gray-700">{{ path.progress }}%</span>
+                </div>
+              </div>
+              <div class="text-gray-500 text-xs">{{ path.courseCount }} 节课</div>
+
+              <!-- 展开内容 -->
+              <Transition name="expand">
+                <div v-if="activePath === idx" class="mt-4 w-full text-left border-t border-gray-100 pt-4">
+                  <div class="text-xs text-gray-400 mb-2 font-medium">课程内容</div>
+                  <div class="space-y-1.5">
+                    <div v-for="item in path.items" :key="item" class="flex items-center gap-2 text-xs text-gray-700">
+                      <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" :class="`bg-${path.color}-400`"></span>
+                      {{ item }}
+                    </div>
+                  </div>
+                  <button class="mt-3 w-full text-xs font-bold py-2 rounded-xl transition-all duration-200"
+                    :class="path.btnClass">
+                    开始学习 →
+                  </button>
+                </div>
+              </Transition>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部：精选课程横向滚动 -->
+      <div class="mt-8">
+        <div class="flex items-center justify-between mb-6">
+          <h3 class="text-gray-900 text-lg font-bold">精选热门课程</h3>
+          <button class="text-amber-400 text-sm font-medium hover:text-amber-300 transition-colors">查看全部 →</button>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div v-for="course in featuredCourses" :key="course.title"
+            class="group relative bg-white border border-gray-100 rounded-2xl overflow-hidden hover:border-amber-300 shadow-sm hover:-translate-y-1 transition-all duration-300 cursor-pointer">
+            <!-- 封面 -->
+            <div class="relative h-36 overflow-hidden">
+              <img :src="course.img" :alt="course.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-90 group-hover:opacity-100"/>
+              <div class="absolute inset-0 bg-gradient-to-t from-gray-800/60 to-transparent"></div>
+              <!-- 难度 -->
+              <div class="absolute top-3 left-3 text-xs font-bold px-2.5 py-1 rounded-full" :class="course.levelClass">{{ course.level }}</div>
+              <!-- 引擎标签 -->
+              <div class="absolute top-3 right-3 text-xs font-bold px-2.5 py-1 rounded-full bg-gray-900/80 text-gray-300 border border-gray-700">{{ course.engine }}</div>
+            </div>
+            <!-- 信息 -->
+            <div class="p-4">
+              <div class="text-gray-900 text-sm font-bold mb-1 line-clamp-2">{{ course.title }}</div>
+              <!-- 成果标签 -->
+              <div v-if="course.badge" class="inline-flex items-center gap-1 text-xs font-bold px-2 py-0.5 rounded-full mb-2" :class="course.badgeClass">
+                <span>{{ course.badgeIcon }}</span>
+                <span>{{ course.badge }}</span>
+              </div>
+              <div class="flex items-center justify-between mt-2">
+                <div class="flex items-center gap-1.5">
+                  <img :src="course.avatar" :alt="course.teacher" class="w-5 h-5 rounded-full object-cover"/>
+                  <span class="text-gray-500 text-xs">{{ course.teacher }}</span>
+                </div>
+                <div class="flex items-center gap-1 text-amber-400 text-xs font-bold">
+                  <span>★</span>
+                  <span>{{ course.rating }}</span>
+                </div>
+              </div>
+              <div class="flex items-center justify-between mt-2">
+                <div class="flex items-center gap-1">
+                  <span class="text-gray-500 text-xs">{{ course.students }} 人学习</span>
+                  <!-- 学员头像堆叠 -->
+                  <div class="flex -space-x-1 ml-1">
+                    <div v-for="n in 3" :key="n" class="w-4 h-4 rounded-full bg-gradient-to-br from-violet-400 to-indigo-500 border border-white text-white text-xs flex items-center justify-center" style="font-size:8px">{{ n }}</div>
+                  </div>
+                </div>
+                <span class="text-xs font-bold" :class="course.free ? 'text-green-500' : 'text-amber-500'">{{ course.price }}</span>
+              </div>
+              <!-- 进度条 -->
+              <div class="mt-3">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-gray-400 text-xs">{{ course.outcome }}</span>
+                </div>
+                <div class="h-1 bg-gray-100 rounded-full overflow-hidden">
+                  <div class="h-full rounded-full transition-all duration-700 bg-gradient-to-r from-amber-400 to-orange-400" :style="{ width: course.completionRate + '%' }"></div>
+                </div>
+              </div>
+            </div>
+            <!-- Hover 立即开始按钒 -->
+            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
+              <button class="bg-amber-400 text-gray-900 text-xs font-bold px-5 py-2 rounded-full shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                立即开始学习 →
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activePath = ref(null)
+
+const learningPaths = [
+  {
+    icon: '🌱',
+    title: 'AI 工作流入门',
+    subtitle: '零基础启蒙',
+    level: '入门',
+    levelClass: 'bg-green-500/20 text-green-400 border-green-500/30',
+    color: 'green',
+    progress: 100,
+    progressColor: '#4ade80',
+    courseCount: 12,
+    iconBg: 'bg-green-500/20',
+    iconActiveBg: 'bg-green-500/30',
+    items: ['什么是AI工作流', 'n8n 快速入门', '第一个自动化任务', '常见节点使用'],
+    btnClass: 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
+  },
+  {
+    icon: '⚡',
+    title: 'n8n 进阶实战',
+    subtitle: '自动化专家',
+    level: '进阶',
+    levelClass: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
+    color: 'violet',
+    progress: 78,
+    progressColor: '#a78bfa',
+    courseCount: 24,
+    iconBg: 'bg-violet-500/20',
+    iconActiveBg: 'bg-violet-500/30',
+    items: ['复杂工作流设计', 'HTTP 节点深度使用', '错误处理与调试', 'API 集成实战'],
+    btnClass: 'bg-violet-500/20 text-violet-400 hover:bg-violet-500/30'
+  },
+  {
+    icon: '🤖',
+    title: 'Coze Bot 开发',
+    subtitle: 'AI 助手构建',
+    level: '中级',
+    levelClass: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+    color: 'blue',
+    progress: 65,
+    progressColor: '#60a5fa',
+    courseCount: 18,
+    iconBg: 'bg-blue-500/20',
+    iconActiveBg: 'bg-blue-500/30',
+    items: ['Coze 平台全解析', '多模型接入', '插件开发', '企业Bot部署'],
+    btnClass: 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30'
+  },
+  {
+    icon: '🧠',
+    title: 'Dify RAG 应用',
+    subtitle: '知识库构建',
+    level: '高级',
+    levelClass: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
+    color: 'emerald',
+    progress: 45,
+    progressColor: '#34d399',
+    courseCount: 20,
+    iconBg: 'bg-emerald-500/20',
+    iconActiveBg: 'bg-emerald-500/30',
+    items: ['RAG 原理深度解析', '向量数据库配置', 'Prompt 工程', 'Agent 编排'],
+    btnClass: 'bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30'
+  },
+  {
+    icon: '🏆',
+    title: '企业级工作流',
+    subtitle: '架构师认证',
+    level: '专家',
+    levelClass: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+    color: 'amber',
+    progress: 30,
+    progressColor: '#fbbf24',
+    courseCount: 32,
+    iconBg: 'bg-amber-500/20',
+    iconActiveBg: 'bg-amber-500/30',
+    items: ['企业架构设计', '多引擎协同', '安全与合规', '性能优化'],
+    btnClass: 'bg-amber-500/20 text-amber-400 hover:bg-amber-500/30'
+  }
+]
+
+const featuredCourses = [
+  {
+    title: 'n8n 从零到精通：构建你的第一个 AI 自动化工作流',
+    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=400&h=250&fit=crop&q=80',
+    level: '入门', levelClass: 'bg-green-500/80 text-white',
+    engine: 'n8n',
+    teacher: '暴米讲师', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop',
+    rating: '4.9', students: '12,500', price: '免费', free: true,
+    badge: '最受欢迎', badgeIcon: '🔥', badgeClass: 'bg-orange-100 text-orange-600',
+    outcome: '完成后可独立构建工作流', completionRate: 92
+  },
+  {
+    title: 'Coze 智能 Bot 开发：从对话到多模态 AI 助手',
+    img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&h=250&fit=crop&q=80',
+    level: '中级', levelClass: 'bg-blue-500/80 text-white',
+    engine: 'Coze',
+    teacher: 'AI 导师', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop',
+    rating: '4.8', students: '8,200', price: '¥199', free: false,
+    badge: '新人首选', badgeIcon: '⭐', badgeClass: 'bg-blue-100 text-blue-600',
+    outcome: '掌握 Bot 开发全流程', completionRate: 78
+  },
+  {
+    title: 'Dify RAG 知识库：让 AI 精准回答你的业务问题',
+    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=250&fit=crop&q=80',
+    level: '高级', levelClass: 'bg-emerald-500/80 text-white',
+    engine: 'Dify',
+    teacher: '技术专家', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop',
+    rating: '4.9', students: '5,600', price: '¥299', free: false,
+    badge: '高分好评', badgeIcon: '🏆', badgeClass: 'bg-emerald-100 text-emerald-600',
+    outcome: '构建企业级知识问答系统', completionRate: 85
+  },
+  {
+    title: 'FastGPT 企业知识库：私有化部署与高精度问答',
+    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop&q=80',
+    level: '专家', levelClass: 'bg-amber-500/80 text-white',
+    engine: 'FastGPT',
+    teacher: '架构师', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop',
+    rating: '4.7', students: '3,800', price: '¥399', free: false,
+    badge: '企业首选', badgeIcon: '🏢', badgeClass: 'bg-amber-100 text-amber-600',
+    outcome: '私有化部署全掌握', completionRate: 70
+  }
+]
+</script>
+
+<style scoped>
+.expand-enter-active, .expand-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+.expand-enter-from, .expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+.expand-enter-to, .expand-leave-from {
+  opacity: 1;
+  max-height: 300px;
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题自适应 */
+.section-courses h2 {
+  font-size: clamp(1.75rem, 4.5vw, 3rem);
+}
+
+/* 平板（≤1024px）*/
+@media (max-width: 1024px) {
+  .section-courses { padding-top: 4rem; padding-bottom: 4rem; }
+  .section-courses .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
+}
+
+/* 手机横屏 / 小平板（≤768px）*/
+@media (max-width: 768px) {
+  .section-courses { padding-top: 3rem; padding-bottom: 3rem; }
+  /* 标题区域布局调整 */
+  .section-courses .flex-col { gap: 1rem; }
+  /* 路径节点卡片 */
+  .section-courses .p-5 { padding: 1rem; }
+  .section-courses .w-14 { width: 3rem; height: 3rem; }
+  .section-courses .text-2xl { font-size: 1.25rem; }
+  /* 课程卡片 */
+  .section-courses .h-36 { height: 8rem; }
+}
+
+/* 手机竖屏（≤480px）*/
+@media (max-width: 480px) {
+  .section-courses { padding-top: 2.5rem; padding-bottom: 2.5rem; }
+  /* 路径节点简化 */
+  .section-courses .w-14 { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
+  .section-courses .w-12.h-12 { width: 2.25rem; height: 2.25rem; }
+  .section-courses .text-sm.font-bold { font-size: 0.75rem; }
+  /* 课程卡片 */
+  .section-courses .h-36 { height: 7rem; }
+  .section-courses .p-4 { padding: 0.75rem; }
+  /* 学员数标签 */
+  .section-courses .flex.items-center.gap-2 span:last-child { font-size: 0.7rem; }
+}
+
+/* 极小屏（≤360px）*/
+@media (max-width: 360px) {
+  .section-courses .h-36 { height: 6rem; }
+  .section-courses .p-4 { padding: 0.6rem; }
+  .section-courses h3 { font-size: 1rem; }
+}
+</style>

src/pages/Home/SectionHotWorkflows.vue

@@ -0,0 +1,548 @@
+<template>
+  <section class="section-hot">
+    <div class="hot-header">
+      <div class="section-badge">
+        <span class="badge-dot"></span>
+        <span>热门精选</span>
+      </div>
+      <h2 class="section-title">社区精选，<span class="gradient-text">开箱即用</span></h2>
+      <p class="section-desc">来自全球用户贡献的高质量工作流模板，一键复制，立即运行</p>
+    </div>
+
+    <!-- 无限滚动带 - 第一行 -->
+    <div class="scroll-track-wrapper">
+      <div class="scroll-track track-forward" ref="track1" @mouseenter="pauseTrack1 = true" @mouseleave="pauseTrack1 = false">
+        <div
+          v-for="(wf, i) in [...workflows, ...workflows]"
+          :key="'a' + i"
+          class="workflow-card"
+          @mouseenter="hoveredCard = 'a' + i"
+          @mouseleave="hoveredCard = null"
+        >
+          <!-- 封面图 -->
+          <div class="card-cover">
+            <img :src="wf.coverImage" :alt="wf.title" class="cover-img" />
+            <div class="cover-overlay"></div>
+            <!-- 平台标签 -->
+            <div class="platform-chip" :style="{ background: wf.platformColor }">{{ wf.platform }}</div>
+            <!-- 播放量 -->
+            <div class="view-count">▶ {{ wf.views }}</div>
+          </div>
+          <!-- 卡片内容 -->
+          <div class="card-info">
+            <div class="card-title-row">
+              <h4 class="card-title">{{ wf.title }}</h4>
+              <div class="card-rating">⭐{{ wf.rating }}</div>
+            </div>
+            <p class="card-desc">{{ wf.desc }}</p>
+            <div class="card-footer">
+              <div class="author-info">
+                <img :src="wf.authorAvatar" :alt="wf.author" class="author-avatar" />
+                <span class="author-name">{{ wf.author }}</span>
+              </div>
+              <span class="card-category">{{ wf.category }}</span>
+            </div>
+          </div>
+          <!-- 悬停操作 -->
+          <div class="card-hover-actions" :class="{ visible: hoveredCard === 'a' + i }">
+            <button class="action-btn primary">立即使用</button>
+            <button class="action-btn secondary">预览</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 无限滚动带 - 第二行（反向） -->
+    <div class="scroll-track-wrapper">
+      <div class="scroll-track track-reverse" ref="track2" @mouseenter="pauseTrack2 = true" @mouseleave="pauseTrack2 = false">
+        <div
+          v-for="(wf, i) in [...workflowsB, ...workflowsB]"
+          :key="'b' + i"
+          class="workflow-card"
+          @mouseenter="hoveredCard = 'b' + i"
+          @mouseleave="hoveredCard = null"
+        >
+          <div class="card-cover">
+            <img :src="wf.coverImage" :alt="wf.title" class="cover-img" />
+            <div class="cover-overlay"></div>
+            <div class="platform-chip" :style="{ background: wf.platformColor }">{{ wf.platform }}</div>
+            <div class="view-count">▶ {{ wf.views }}</div>
+          </div>
+          <div class="card-info">
+            <div class="card-title-row">
+              <h4 class="card-title">{{ wf.title }}</h4>
+              <div class="card-rating">⭐{{ wf.rating }}</div>
+            </div>
+            <p class="card-desc">{{ wf.desc }}</p>
+            <div class="card-footer">
+              <div class="author-info">
+                <img :src="wf.authorAvatar" :alt="wf.author" class="author-avatar" />
+                <span class="author-name">{{ wf.author }}</span>
+              </div>
+              <span class="card-category">{{ wf.category }}</span>
+            </div>
+          </div>
+          <div class="card-hover-actions" :class="{ visible: hoveredCard === 'b' + i }">
+            <button class="action-btn primary">立即使用</button>
+            <button class="action-btn secondary">预览</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const hoveredCard = ref(null)
+const pauseTrack1 = ref(false)
+const pauseTrack2 = ref(false)
+
+const workflows = [
+  {
+    title: 'AI 文章批量生产流水线', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '4.9', views: '12.3K', category: '内容创作',
+    desc: '一键生成高质量文章，自动配图排版，多平台发布',
+    author: 'Alex Chen',
+    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=300&q=80'
+  },
+  {
+    title: 'GPT-4 智能客服机器人', platform: 'Coze', platformColor: '#1B6EF3',
+    rating: '4.8', views: '8.7K', category: '客服自动化',
+    desc: '基于知识库的智能问答，支持多轮对话和情感识别',
+    author: 'Sarah Liu',
+    authorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&q=80'
+  },
+  {
+    title: '企业知识库问答系统', platform: 'FastGPT', platformColor: '#059669',
+    rating: '5.0', views: '15.2K', category: '知识管理',
+    desc: '多格式文档导入，精准语义检索，企业知识管理',
+    author: 'Mike Wang',
+    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&q=80'
+  },
+  {
+    title: '数据报告自动生成', platform: 'Dify', platformColor: '#7C3AED',
+    rating: '4.7', views: '6.4K', category: '数据分析',
+    desc: '连接多数据源，自动分析可视化，定时推送报告',
+    author: 'Lisa Zhang',
+    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&q=80'
+  },
+  {
+    title: '社交媒体内容矩阵', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '4.8', views: '9.1K', category: '内容创作',
+    desc: '一个主题，自动生成适配各平台的差异化内容',
+    author: 'Tom Li',
+    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=300&q=80'
+  },
+  {
+    title: 'AI 邮件营销自动化', platform: 'Coze', platformColor: '#1B6EF3',
+    rating: '4.6', views: '7.3K', category: '营销运营',
+    desc: '个性化邮件生成，智能发送时机，效果追踪分析',
+    author: 'Emma Zhou',
+    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=300&q=80'
+  },
+  {
+    title: '会议纪要自动整理', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '5.0', views: '13.7K', category: '效率工具',
+    desc: '语音转文字，AI 提炼要点，自动分配任务到项目管理',
+    author: 'Zhang Wei',
+    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&q=80'
+  },
+  {
+    title: '电商选品智能分析', platform: 'Dify', platformColor: '#7C3AED',
+    rating: '4.7', views: '5.8K', category: '数据分析',
+    desc: '多平台数据爬取，AI 分析趋势，自动生成选品报告',
+    author: 'Jack Wu',
+    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=300&q=80'
+  }
+]
+
+const workflowsB = [
+  {
+    title: '多语言翻译工作流', platform: 'Coze', platformColor: '#1B6EF3',
+    rating: '4.9', views: '11.5K', category: '内容创作',
+    desc: '支持 50+ 语言，保留格式，批量处理文档翻译',
+    author: 'Wang Fang',
+    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=300&q=80'
+  },
+  {
+    title: 'SEO 内容优化助手', platform: 'Dify', platformColor: '#7C3AED',
+    rating: '4.7', views: '6.2K', category: '内容创作',
+    desc: '关键词分析，竞品对比，AI 生成 SEO 优化建议',
+    author: 'Li Ming',
+    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=300&q=80'
+  },
+  {
+    title: '用户反馈情感分析', platform: 'FastGPT', platformColor: '#059669',
+    rating: '4.8', views: '8.1K', category: '客服自动化',
+    desc: '多渠道收集反馈，AI 情感分类，自动生成改进建议',
+    author: 'Liu Yang',
+    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&q=80'
+  },
+  {
+    title: 'AI 直播脚本生成', platform: 'Coze', platformColor: '#1B6EF3',
+    rating: '4.7', views: '7.8K', category: '内容创作',
+    desc: '根据产品信息自动生成直播话术，实时提词',
+    author: 'Xu Ming',
+    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&q=80'
+  },
+  {
+    title: '供应链风险预警', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '4.8', views: '5.3K', category: '数据分析',
+    desc: '实时监控供应链数据，AI 预测风险，自动发出预警',
+    author: 'Zhang San',
+    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&q=80'
+  },
+  {
+    title: '财务数据智能汇总', platform: 'FastGPT', platformColor: '#059669',
+    rating: '4.6', views: '4.5K', category: '数据分析',
+    desc: '多账户数据整合，自动对账，生成财务分析报告',
+    author: 'Zhao Yan',
+    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&q=80'
+  },
+  {
+    title: '简历筛选自动化', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '4.5', views: '4.2K', category: 'HR自动化',
+    desc: 'AI 智能匹配岗位要求，自动评分排序，发送面试邀请',
+    author: 'Nina Zhao',
+    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=300&q=80'
+  },
+  {
+    title: '竞品监控与分析', platform: 'Dify', platformColor: '#7C3AED',
+    rating: '4.6', views: '3.9K', category: '数据分析',
+    desc: '自动追踪竞品动态，AI 分析策略变化，生成洞察报告',
+    author: 'Chen Jing',
+    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=300&q=80'
+  }
+]
+</script>
+
+<style scoped>
+.section-hot {
+  padding: 100px 0;
+  background: linear-gradient(180deg, #fafbff 0%, #f3f0ff 50%, #eef2ff 100%);
+  overflow: hidden;
+  position: relative;
+}
+.hot-header {
+  text-align: center;
+  margin-bottom: 48px;
+  padding: 0 80px;
+}
+.section-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  border: 1px solid rgba(99,102,241,0.2);
+  border-radius: 100px;
+  padding: 6px 16px;
+  font-size: 13px;
+  color: #6366F1;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+.badge-dot {
+  width: 6px; height: 6px;
+  background: #6366F1; border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.3); }
+}
+.section-title {
+  font-size: 48px;
+  font-weight: 900;
+  color: #111827;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+.gradient-text {
+  background: linear-gradient(135deg, #6366F1 0%, #8b5cf6 50%, #EC4899 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.section-desc {
+  font-size: 17px;
+  color: #6B7280;
+  max-width: 500px;
+  margin: 0 auto;
+  line-height: 1.7;
+}
+
+/* 滚动轨道 */
+.scroll-track-wrapper {
+  overflow: hidden;
+  margin-bottom: 20px;
+  mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
+}
+.scroll-track {
+  display: flex;
+  gap: 20px;
+  width: max-content;
+  padding: 12px 0;
+}
+.track-forward {
+  animation: scrollForward 40s linear infinite;
+}
+.track-forward:hover {
+  animation-play-state: paused;
+}
+.track-reverse {
+  animation: scrollReverse 40s linear infinite;
+}
+.track-reverse:hover {
+  animation-play-state: paused;
+}
+@keyframes scrollForward {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+@keyframes scrollReverse {
+  from { transform: translateX(-50%); }
+  to { transform: translateX(0); }
+}
+
+/* 工作流卡片 */
+.workflow-card {
+  width: 290px;
+  background: white;
+  border-radius: 20px;
+  border: 1px solid rgba(99,102,241,0.08);
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  flex-shrink: 0;
+}
+.workflow-card:hover {
+  transform: translateY(-10px) scale(1.02);
+  box-shadow: 0 20px 50px rgba(99,102,241,0.18);
+  border-color: rgba(99,102,241,0.2);
+}
+
+/* 封面图 */
+.card-cover {
+  position: relative;
+  height: 160px;
+  overflow: hidden;
+}
+.cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+.workflow-card:hover .cover-img { transform: scale(1.05); }
+.cover-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5));
+}
+.platform-chip {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+}
+.view-count {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* 卡片信息 */
+.card-info { padding: 16px; }
+.card-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 6px;
+}
+.card-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+  flex: 1;
+  margin-right: 8px;
+}
+.card-rating {
+  font-size: 12px;
+  font-weight: 600;
+  color: #F59E0B;
+  white-space: nowrap;
+}
+.card-desc {
+  font-size: 12px;
+  color: #6B7280;
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.author-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.author-avatar {
+  width: 24px; height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.author-name { font-size: 12px; color: #6B7280; }
+.card-category {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: #F3F4F6;
+  border-radius: 100px;
+  color: #6B7280;
+}
+
+/* 悬停操作 */
+.card-hover-actions {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, white 60%, transparent);
+  padding: 20px 16px 16px;
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+.card-hover-actions.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: all;
+}
+.action-btn {
+  flex: 1;
+  padding: 8px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.action-btn.primary {
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  color: white;
+  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
+}
+.action-btn.primary:hover {
+  box-shadow: 0 8px 24px rgba(99,102,241,0.55);
+  transform: translateY(-2px) scale(1.04);
+}
+.action-btn.primary:active {
+  transform: scale(0.96);
+}
+.action-btn.secondary {
+  background: rgba(255,255,255,0.9);
+  color: #374151;
+  border: 1px solid rgba(0,0,0,0.08);
+}
+.action-btn.secondary:hover {
+  background: #fff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题自适应 */
+.section-title {
+  font-size: clamp(1.75rem, 5vw, 3rem);
+}
+.section-desc {
+  font-size: clamp(0.875rem, 2vw, 1.0625rem);
+}
+
+/* 平板（≤1024px）*/
+@media (max-width: 1024px) {
+  .section-hot { padding: 4rem 0; }
+  .hot-header { padding: 0 2rem; }
+  .workflow-card { width: 260px; }
+}
+
+/* 手机横屏 / 小平板（≤768px）*/
+@media (max-width: 768px) {
+  .section-hot { padding: 3rem 0; }
+  .hot-header { padding: 0 1rem; margin-bottom: 2rem; }
+  .workflow-card { width: 230px; }
+  .card-cover { height: 130px; }
+  .card-info { padding: 12px; }
+  .card-title { font-size: 13px; }
+  .card-desc { font-size: 11px; }
+  /* 遇屏边渐变缩短 */
+  .scroll-track-wrapper {
+    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
+    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
+  }
+}
+
+/* 手机竖屏（≤480px）*/
+@media (max-width: 480px) {
+  .section-hot { padding: 2.5rem 0; }
+  .hot-header { padding: 0 0.75rem; margin-bottom: 1.5rem; }
+  .workflow-card { width: 200px; }
+  .card-cover { height: 110px; }
+  .card-info { padding: 10px; }
+  .card-title { font-size: 12px; }
+  .card-desc { font-size: 10px; margin-bottom: 8px; }
+  .card-footer { flex-wrap: wrap; gap: 4px; }
+  .author-avatar { width: 20px; height: 20px; }
+  .author-name { font-size: 10px; }
+  .card-category { font-size: 10px; }
+  .platform-chip { font-size: 9px; padding: 2px 7px; }
+  .view-count { font-size: 10px; }
+  .scroll-track { gap: 12px; }
+  .scroll-track-wrapper {
+    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
+    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
+  }
+}
+
+/* 极小屏（≤360px）*/
+@media (max-width: 360px) {
+  .workflow-card { width: 175px; }
+  .card-cover { height: 95px; }
+  .card-info { padding: 8px; }
+  .card-title { font-size: 11px; }
+}
+</style>

src/pages/Home/SectionHowItWorks.vue

@@ -0,0 +1,215 @@
+<template>
+  <section class="section-how relative overflow-hidden bg-violet-50 py-24">
+    <!-- 背景装饰 -->
+    <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle at 1px 1px, rgba(139,92,246,0.06) 1px, transparent 0); background-size: 32px 32px;"></div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="text-center mb-20">
+        <span class="inline-flex items-center gap-2 bg-green-50 border border-green-200 text-green-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
+          <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
+          快速上手
+        </span>
+        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4">
+          三步，<span class="bg-gradient-to-r from-green-600 to-teal-500 bg-clip-text text-transparent">快速上手</span>
+        </h2>
+        <p class="text-gray-500 text-lg max-w-xl mx-auto">无需技术背景，5 分钟搭建你的第一个 AI 工作流</p>
+      </div>
+
+      <!-- 时间轴主体 -->
+      <div class="relative">
+        <!-- 中央连接线 -->
+        <div class="hidden lg:block absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2" style="background: linear-gradient(180deg, transparent 0%, #d1fae5 10%, #6ee7b7 30%, #34d399 50%, #6ee7b7 70%, #d1fae5 90%, transparent 100%);"></div>
+
+        <!-- 流动粒子 -->
+        <div class="hidden lg:block absolute left-1/2 -translate-x-1/2 top-0 bottom-0 overflow-hidden w-px pointer-events-none">
+          <div class="timeline-particle"></div>
+          <div class="timeline-particle" style="animation-delay: 1.5s;"></div>
+          <div class="timeline-particle" style="animation-delay: 3s;"></div>
+        </div>
+
+        <!-- 步骤列表 -->
+        <div class="space-y-16 lg:space-y-24">
+          <div v-for="(step, idx) in steps" :key="step.title"
+            class="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-0"
+            :class="idx % 2 === 1 ? 'lg:flex-row-reverse' : ''">
+
+            <!-- 内容侧 -->
+            <div class="w-full lg:w-5/12 group"
+              :class="idx % 2 === 0 ? 'lg:pr-16 lg:text-right' : 'lg:pl-16'">
+              <div class="inline-flex items-center gap-2 mb-4"
+                :class="idx % 2 === 0 ? 'lg:flex-row-reverse' : ''">
+                <span class="text-xs font-bold px-3 py-1 rounded-full" :class="step.badgeClass">{{ step.badge }}</span>
+                <span class="text-gray-400 text-xs">Step {{ idx + 1 }}</span>
+              </div>
+              <h3 class="text-2xl lg:text-3xl font-black text-gray-900 mb-3">{{ step.title }}</h3>
+              <p class="text-gray-500 text-base leading-relaxed mb-5">{{ step.desc }}</p>
+
+              <!-- 特性标签 -->
+              <div class="flex flex-wrap gap-2"
+                :class="idx % 2 === 0 ? 'lg:justify-end' : ''">
+                <span v-for="tag in step.tags" :key="tag"
+                  class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border"
+                  :class="step.tagClass">
+                  <span class="w-1.5 h-1.5 rounded-full" :class="step.dotClass"></span>
+                  {{ tag }}
+                </span>
+              </div>
+
+              <!-- 时间指标 -->
+              <div class="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-2xl"
+                :class="step.timeClass">
+                <span class="text-lg font-black" :class="step.timeNumClass">{{ step.time }}</span>
+                <span class="text-xs font-medium opacity-70">{{ step.timeLabel }}</span>
+              </div>
+            </div>
+
+            <!-- 中央节点 -->
+            <div class="relative z-10 flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
+              <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-2xl shadow-xl border-4 border-white transition-transform duration-300 hover:scale-110"
+                :class="step.nodeBg">
+                {{ step.icon }}
+              </div>
+              <!-- 步骤序号 -->
+              <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-black text-white shadow-md"
+                :class="step.numBg">
+                {{ idx + 1 }}
+              </div>
+            </div>
+
+            <!-- 预览侧 -->
+            <div class="w-full lg:w-5/12"
+              :class="idx % 2 === 0 ? 'lg:pl-16' : 'lg:pr-16'">
+              <div class="relative rounded-2xl overflow-hidden shadow-xl border border-gray-100 group cursor-pointer hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+                <!-- 图片 -->
+                <div class="relative h-52 overflow-hidden">
+                  <img :src="step.img" :alt="step.title"
+                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
+                  <div class="absolute inset-0" :class="step.imgOverlay"></div>
+                </div>
+                <!-- 底部信息条 -->
+                <div class="bg-white px-5 py-3 flex items-center justify-between border-t border-gray-50">
+                  <div class="flex items-center gap-2">
+                    <span class="w-2 h-2 rounded-full" :class="step.dotClass"></span>
+                    <span class="text-sm font-semibold text-gray-700">{{ step.previewLabel }}</span>
+                  </div>
+                  <span class="text-xs text-gray-400">{{ step.previewSub }}</span>
+                </div>
+                <!-- 悬停播放按钮 -->
+                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  <div class="w-14 h-14 bg-white/90 rounded-full flex items-center justify-center shadow-xl">
+                    <svg class="w-6 h-6 text-gray-700 ml-1" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部 CTA -->
+      <div class="text-center mt-20">
+        <div class="inline-flex flex-col items-center gap-4">
+          <div class="flex items-center gap-3 text-sm text-gray-500">
+            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-green-400 rounded-full"></span>无需信用卡</span>
+            <span class="w-px h-4 bg-gray-200"></span>
+            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-blue-400 rounded-full"></span>5 分钟上手</span>
+            <span class="w-px h-4 bg-gray-200"></span>
+            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-violet-400 rounded-full"></span>永久免费基础版</span>
+          </div>
+          <button class="bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold text-base px-8 py-4 rounded-2xl shadow-xl shadow-green-200/60 hover:shadow-green-300/60 hover:-translate-y-0.5 transition-all duration-300">
+            立即免费开始 →
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const steps = [
+  {
+    icon: '🎯',
+    title: '选择工作流模板',
+    desc: '从 5,700+ 精选模板中挑选最适合你的场景，一键导入，开箱即用，无需从零开始。',
+    badge: '5 分钟',
+    badgeClass: 'bg-green-100 text-green-700',
+    tags: ['5,700+ 模板', '一键导入', '分类筛选'],
+    tagClass: 'bg-green-50 text-green-600 border-green-100',
+    dotClass: 'bg-green-400',
+    time: '< 5 min',
+    timeLabel: '完成模板选择',
+    timeClass: 'bg-green-50',
+    timeNumClass: 'text-green-600',
+    nodeBg: 'bg-gradient-to-br from-green-400 to-teal-500',
+    numBg: 'bg-green-500',
+    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=350&fit=crop&q=80',
+    imgOverlay: 'bg-gradient-to-t from-green-900/40 to-transparent',
+    previewLabel: '模板市场',
+    previewSub: '5,700+ 精选模板'
+  },
+  {
+    icon: '⚙️',
+    title: '配置 AI 引擎与节点',
+    desc: '拖拽式可视化编辑器，连接 n8n、Coze、Dify、FastGPT 等引擎，设置触发条件和处理逻辑。',
+    badge: '零代码',
+    badgeClass: 'bg-violet-100 text-violet-700',
+    tags: ['拖拽编辑', '400+ 集成', 'AI 智能建议'],
+    tagClass: 'bg-violet-50 text-violet-600 border-violet-100',
+    dotClass: 'bg-violet-400',
+    time: '可视化',
+    timeLabel: '拖拽式配置',
+    timeClass: 'bg-violet-50',
+    timeNumClass: 'text-violet-600',
+    nodeBg: 'bg-gradient-to-br from-violet-500 to-blue-500',
+    numBg: 'bg-violet-500',
+    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=350&fit=crop&q=80',
+    imgOverlay: 'bg-gradient-to-t from-violet-900/40 to-transparent',
+    previewLabel: '可视化编辑器',
+    previewSub: '拖拽式节点配置'
+  },
+  {
+    icon: '🚀',
+    title: '一键部署，自动运行',
+    desc: '点击发布，工作流立即在云端运行，7×24h 全自动执行，支持微信、飞书、API 等多端触发。',
+    badge: '7×24h',
+    badgeClass: 'bg-blue-100 text-blue-700',
+    tags: ['云端运行', '多端触发', '实时监控'],
+    tagClass: 'bg-blue-50 text-blue-600 border-blue-100',
+    dotClass: 'bg-blue-400',
+    time: '99.9%',
+    timeLabel: '在线率保障',
+    timeClass: 'bg-blue-50',
+    timeNumClass: 'text-blue-600',
+    nodeBg: 'bg-gradient-to-br from-blue-500 to-cyan-500',
+    numBg: 'bg-blue-500',
+    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=350&fit=crop&q=80',
+    imgOverlay: 'bg-gradient-to-t from-blue-900/40 to-transparent',
+    previewLabel: '执行监控台',
+    previewSub: '实时查看运行状态'
+  }
+]
+</script>
+
+<style scoped>
+.timeline-particle {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #34d399;
+  box-shadow: 0 0 8px #34d399;
+  animation: particleFall 4.5s linear infinite;
+}
+@keyframes particleFall {
+  0% { top: -8px; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { top: 100%; opacity: 0; }
+}
+</style>

src/pages/Home/SectionLiveActivity.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="live-activity-bar" :class="{ visible: isVisible }">
+    <div class="live-activity-inner">
+      <!-- 实时指示器 -->
+      <div class="live-dot-wrap">
+        <span class="live-dot"></span>
+        <span class="live-label">实时动态</span>
+      </div>
+      <!-- 滚动消息 -->
+      <div class="live-messages-wrap">
+        <TransitionGroup name="activity-slide" tag="div" class="live-messages">
+          <div v-if="currentActivity" :key="currentActivity.id" class="live-message">
+            <span class="activity-avatar">{{ currentActivity.avatar }}</span>
+            <span class="activity-text">
+              <strong>{{ currentActivity.user }}</strong>
+              {{ currentActivity.action }}
+              <em>{{ currentActivity.target }}</em>
+            </span>
+            <span class="activity-time">{{ currentActivity.time }}</span>
+          </div>
+        </TransitionGroup>
+      </div>
+      <!-- 关闭按钮 -->
+      <button class="live-close" @click="isVisible = false">×</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const isVisible = ref(false)
+const currentActivity = ref(null)
+let timer = null
+let showTimer = null
+
+const activities = [
+  { id: 1, avatar: '👩', user: '张小雨', action: '刚刚使用了', target: 'AI 文章批量生产流水线', time: '刚刚' },
+  { id: 2, avatar: '👨', user: 'Alex Chen', action: '收藏了', target: 'GPT-4 智能客服机器人', time: '1分钟前' },
+  { id: 3, avatar: '🧑', user: '李明', action: '开始学习', target: 'n8n 从零到精通', time: '2分钟前' },
+  { id: 4, avatar: '👩‍💼', user: 'Sarah Liu', action: '部署了', target: '企业知识库问答系统', time: '3分钟前' },
+  { id: 5, avatar: '👨‍💻', user: 'Mike Wang', action: '刚刚运行了', target: '数据分析自动化工作流', time: '刚刚' },
+  { id: 6, avatar: '🧑‍🎨', user: '王芳', action: '购买了课程', target: 'Dify RAG 知识库实战', time: '5分钟前' },
+  { id: 7, avatar: '👨‍🔬', user: 'Jack Zhang', action: '分享了', target: '社交媒体内容矩阵工作流', time: '6分钟前' },
+  { id: 8, avatar: '👩‍🏫', user: '陈老师', action: '推荐了', target: 'Coze 智能 Bot 开发课程', time: '8分钟前' },
+]
+
+let activityIndex = 0
+
+function showNext() {
+  currentActivity.value = { ...activities[activityIndex % activities.length] }
+  activityIndex++
+}
+
+onMounted(() => {
+  // 延迟 3 秒后显示
+  showTimer = setTimeout(() => {
+    isVisible.value = true
+    showNext()
+    timer = setInterval(() => {
+      showNext()
+    }, 4000)
+  }, 3000)
+})
+
+onUnmounted(() => {
+  clearTimeout(showTimer)
+  clearInterval(timer)
+})
+</script>
+
+<style scoped>
+.live-activity-bar {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  z-index: 999;
+  transform: translateY(120%);
+  opacity: 0;
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
+  pointer-events: none;
+}
+.live-activity-bar.visible {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: all;
+}
+.live-activity-inner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.97);
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  border-radius: 50px;
+  padding: 8px 16px 8px 12px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(139,92,246,0.1);
+  min-width: 280px;
+  max-width: 380px;
+  backdrop-filter: blur(12px);
+}
+.live-dot-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+}
+.live-dot {
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  animation: pulse-dot 1.5s ease-in-out infinite;
+  flex-shrink: 0;
+}
+@keyframes pulse-dot {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
+  50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
+}
+.live-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: #22c55e;
+  white-space: nowrap;
+}
+.live-messages-wrap {
+  flex: 1;
+  overflow: hidden;
+  height: 22px;
+  position: relative;
+}
+.live-messages {
+  position: relative;
+}
+.live-message {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #374151;
+  white-space: nowrap;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.activity-avatar {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.activity-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.activity-text strong {
+  color: #7c3aed;
+  font-weight: 700;
+}
+.activity-text em {
+  color: #6366f1;
+  font-style: normal;
+  font-weight: 600;
+}
+.activity-time {
+  font-size: 11px;
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+.live-close {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #f3f4f6;
+  color: #9ca3af;
+  font-size: 14px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.2s, color 0.2s;
+}
+.live-close:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+/* 动画 */
+.activity-slide-enter-active {
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.activity-slide-leave-active {
+  transition: all 0.3s ease;
+  position: absolute;
+}
+.activity-slide-enter-from {
+  opacity: 0;
+  transform: translateY(100%);
+}
+.activity-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+/* 移动端隐藏 */
+@media (max-width: 480px) {
+  .live-activity-bar {
+    bottom: 16px;
+    left: 12px;
+    right: 12px;
+  }
+  .live-activity-inner {
+    min-width: unset;
+    max-width: unset;
+  }
+}
+</style>

src/pages/Home/SectionMarketplace.vue

@@ -0,0 +1,592 @@
+<template>
+  <section class="section-marketplace">
+    <div class="marketplace-inner">
+    <div class="marketplace-header">
+      <div class="section-badge">
+        <span class="badge-dot"></span>
+        <span>工作流市场</span>
+      </div>
+      <h2 class="section-title">探索 <span class="gradient-text">200K+</span> 工作流</h2>
+      <p class="section-desc">搜索、筛选、一键使用，找到最适合你场景的 AI 工作流</p>
+    </div>
+
+    <!-- 搜索栏 -->
+    <div class="search-bar">
+      <div class="search-input-wrap">
+        <span class="search-icon">🔍</span>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="搜索工作流..."
+          class="search-input"
+          @input="filterWorkflows"
+        />
+        <button class="search-btn">搜索</button>
+      </div>
+    </div>
+
+    <!-- 分类标签 -->
+    <div class="category-tabs">
+      <button
+        v-for="cat in categories"
+        :key="cat.label"
+        class="cat-tab"
+        :class="{ active: activeCategory === cat.label }"
+        @click="selectCategory(cat.label)"
+      >
+        <span>{{ cat.icon }}</span>
+        <span>{{ cat.label }}</span>
+        <span class="cat-count">{{ cat.count }}</span>
+      </button>
+    </div>
+
+    <!-- 工作流卡片网格 -->
+    <div class="marketplace-grid">
+      <div
+        v-for="(wf, i) in filteredWorkflows"
+        :key="i"
+        class="market-card"
+        :class="{ hidden: !wf.visible }"
+        @mouseenter="hoveredCard = i"
+        @mouseleave="hoveredCard = null"
+      >
+        <!-- 封面图 -->
+        <div class="market-card-cover">
+          <img :src="wf.coverImage" :alt="wf.title" class="market-cover-img" />
+          <div class="market-cover-overlay"></div>
+          <div class="market-platform-chip" :style="{ background: wf.platformColor }">{{ wf.platform }}</div>
+          <div class="market-views">▶ {{ wf.views }}</div>
+        </div>
+
+        <!-- 卡片内容 -->
+        <div class="market-card-body">
+          <div class="market-card-top">
+            <h4 class="market-title">{{ wf.title }}</h4>
+            <div class="market-rating">⭐ {{ wf.rating }}</div>
+          </div>
+          <p class="market-desc">{{ wf.desc }}</p>
+          <div class="market-tags">
+            <span class="market-tag" v-for="tag in wf.tags" :key="tag">{{ tag }}</span>
+          </div>
+          <div class="market-footer">
+            <div class="market-author">
+              <img :src="wf.authorAvatar" :alt="wf.author" class="market-avatar" />
+              <span>{{ wf.author }}</span>
+            </div>
+            <button class="market-use-btn">使用 →</button>
+          </div>
+        </div>
+
+        <!-- 悬停遮罩 -->
+        <div class="market-hover-overlay" :class="{ visible: hoveredCard === i }">
+          <button class="overlay-btn primary">立即使用</button>
+          <button class="overlay-btn secondary">查看详情</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 查看更多 -->
+    <div class="marketplace-footer">
+      <button class="view-all-btn">浏览全部工作流市场 →</button>
+    </div>
+    </div><!-- /.marketplace-inner -->
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const searchQuery = ref('')
+const activeCategory = ref('全部')
+const hoveredCard = ref(null)
+
+const categories = [
+  { label: '全部', icon: '🌟', count: '200K+' },
+  { label: '内容创作', icon: '✍️', count: '45K+' },
+  { label: '数据分析', icon: '📊', count: '38K+' },
+  { label: '客服自动化', icon: '🤖', count: '52K+' },
+  { label: '销售运营', icon: '💼', count: '29K+' },
+  { label: '效率工具', icon: '⚡', count: '36K+' }
+]
+
+const allWorkflows = ref([
+  {
+    title: 'AI 文章批量生产流水线', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '4.9', views: '12.3K', category: '内容创作',
+    desc: '一键生成高质量文章，自动配图排版，多平台发布',
+    tags: ['GPT-4', '内容创作', '自动化'],
+    author: 'Alex Chen',
+    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400&q=80',
+    visible: true
+  },
+  {
+    title: 'GPT-4 智能客服机器人', platform: 'Coze', platformColor: '#1B6EF3',
+    rating: '4.8', views: '8.7K', category: '客服自动化',
+    desc: '基于知识库的智能问答，支持多轮对话和情感识别',
+    tags: ['知识库', '多轮对话', 'NLP'],
+    author: 'Sarah Liu',
+    authorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&q=80',
+    visible: true
+  },
+  {
+    title: '企业知识库问答系统', platform: 'FastGPT', platformColor: '#059669',
+    rating: '5.0', views: '15.2K', category: '客服自动化',
+    desc: '多格式文档导入，精准语义检索，企业知识管理',
+    tags: ['RAG', '语义检索', '企业级'],
+    author: 'Mike Wang',
+    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&q=80',
+    visible: true
+  },
+  {
+    title: '数据报告自动生成', platform: 'Dify', platformColor: '#7C3AED',
+    rating: '4.7', views: '6.4K', category: '数据分析',
+    desc: '连接多数据源，自动分析可视化，定时推送报告',
+    tags: ['数据可视化', '自动报告', '多数据源'],
+    author: 'Lisa Zhang',
+    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&q=80',
+    visible: true
+  },
+  {
+    title: '社交媒体内容矩阵', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '4.8', views: '9.1K', category: '内容创作',
+    desc: '一个主题，自动生成适配各平台的差异化内容',
+    tags: ['多平台', '内容矩阵', '自动化'],
+    author: 'Tom Li',
+    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=400&q=80',
+    visible: true
+  },
+  {
+    title: 'AI 邮件营销自动化', platform: 'Coze', platformColor: '#1B6EF3',
+    rating: '4.6', views: '7.3K', category: '销售运营',
+    desc: '个性化邮件生成，智能发送时机，效果追踪分析',
+    tags: ['邮件营销', '个性化', 'A/B测试'],
+    author: 'Emma Zhou',
+    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&q=80',
+    visible: true
+  },
+  {
+    title: '会议纪要自动整理', platform: 'n8n', platformColor: '#EA4B71',
+    rating: '5.0', views: '13.7K', category: '效率工具',
+    desc: '语音转文字，AI 提炼要点，自动分配任务到项目管理',
+    tags: ['语音识别', '会议管理', '任务分配'],
+    author: 'Zhang Wei',
+    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&q=80',
+    visible: true
+  },
+  {
+    title: '电商选品智能分析', platform: 'Dify', platformColor: '#7C3AED',
+    rating: '4.7', views: '5.8K', category: '数据分析',
+    desc: '多平台数据爬取，AI 分析趋势，自动生成选品报告',
+    tags: ['电商', '选品分析', '趋势预测'],
+    author: 'Jack Wu',
+    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
+    coverImage: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&q=80',
+    visible: true
+  }
+])
+
+const filteredWorkflows = computed(() => {
+  return allWorkflows.value.filter(wf => {
+    const matchCategory = activeCategory.value === '全部' || wf.category === activeCategory.value
+    const matchSearch = !searchQuery.value || wf.title.includes(searchQuery.value) || wf.desc.includes(searchQuery.value)
+    return matchCategory && matchSearch
+  })
+})
+
+function selectCategory(cat) {
+  activeCategory.value = cat
+}
+function filterWorkflows() {
+  // 搜索过滤由 computed 处理
+}
+</script>
+
+<style scoped>
+.section-marketplace {
+  padding: 100px 0;
+  background: #FFFFFF;
+}
+
+/* 内容容器：限制最大宽度，居中对齐 */
+.marketplace-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+.marketplace-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.section-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #F5F3FF;
+  border: 1px solid rgba(99,102,241,0.2);
+  border-radius: 100px;
+  padding: 6px 16px;
+  font-size: 13px;
+  color: #6366F1;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+.badge-dot {
+  width: 6px; height: 6px;
+  background: #6366F1; border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.3); }
+}
+.section-title {
+  font-size: 44px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 16px;
+}
+.gradient-text {
+  background: linear-gradient(135deg, #6366F1, #EC4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.section-desc {
+  font-size: 17px;
+  color: #6B7280;
+  max-width: 500px;
+  margin: 0 auto;
+  line-height: 1.7;
+}
+
+/* 搜索栏 */
+.search-bar {
+  max-width: 600px;
+  margin: 0 auto 32px;
+}
+.search-input-wrap {
+  display: flex;
+  align-items: center;
+  background: white;
+  border: 1.5px solid rgba(0,0,0,0.1);
+  border-radius: 14px;
+  padding: 4px 4px 4px 16px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
+  transition: all 0.3s;
+}
+.search-input-wrap:focus-within {
+  border-color: #6366F1;
+  box-shadow: 0 4px 20px rgba(99,102,241,0.15);
+}
+.search-icon { font-size: 16px; margin-right: 8px; }
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 15px;
+  color: #111827;
+  background: transparent;
+}
+.search-btn {
+  padding: 10px 24px;
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* 分类标签 */
+.category-tabs {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+}
+.cat-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  border-radius: 100px;
+  border: 1.5px solid rgba(0,0,0,0.08);
+  background: white;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #6B7280;
+  transition: all 0.3s;
+}
+.cat-tab:hover { border-color: #6366F1; color: #6366F1; }
+.cat-tab.active {
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  color: white;
+  border-color: transparent;
+  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
+}
+.cat-count {
+  font-size: 11px;
+  background: rgba(255,255,255,0.2);
+  padding: 1px 6px;
+  border-radius: 100px;
+}
+.cat-tab:not(.active) .cat-count {
+  background: #F3F4F6;
+  color: #9CA3AF;
+}
+
+/* 卡片网格 */
+.marketplace-grid {
+  display: grid;
+  /* 自适应列数：每列最小 260px，最大 1fr，宽屏不超过 4 列 */
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+/* 大屏（≥1400px）强制 4 列，防止卡片过宽 */
+@media (min-width: 1400px) {
+  .marketplace-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.market-card {
+  background: white;
+  border-radius: 16px;
+  border: 1px solid rgba(0,0,0,0.06);
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
+  transition: all 0.3s ease;
+  position: relative;
+}
+.market-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
+}
+.market-card.hidden {
+  opacity: 0.3;
+  transform: scale(0.95);
+}
+
+/* 封面图 */
+.market-card-cover {
+  position: relative;
+  height: 160px;
+  overflow: hidden;
+}
+.market-cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.market-card:hover .market-cover-img { transform: scale(1.05); }
+.market-cover-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.4));
+}
+.market-platform-chip {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+}
+.market-views {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* 卡片内容 */
+.market-card-body { padding: 16px; }
+.market-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+.market-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111827;
+  flex: 1;
+  margin-right: 8px;
+  line-height: 1.3;
+}
+.market-rating { font-size: 12px; color: #F59E0B; font-weight: 600; white-space: nowrap; }
+.market-desc {
+  font-size: 12px;
+  color: #6B7280;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+.market-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+.market-tag {
+  padding: 2px 8px;
+  background: #F3F4F6;
+  border-radius: 100px;
+  font-size: 10px;
+  color: #6B7280;
+}
+.market-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.market-author {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #6B7280;
+}
+.market-avatar {
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.market-use-btn {
+  padding: 5px 12px;
+  background: #F5F3FF;
+  color: #6366F1;
+  border: 1px solid rgba(99,102,241,0.2);
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.market-use-btn:hover {
+  background: #6366F1;
+  color: white;
+}
+
+/* 悬停遮罩 */
+.market-hover-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(99,102,241,0.92);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.market-hover-overlay.visible { opacity: 1; }
+.overlay-btn {
+  width: 160px;
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+.overlay-btn.primary {
+  background: white;
+  color: #6366F1;
+}
+.overlay-btn.secondary {
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3);
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题自适应 */
+.section-title {
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+}
+.section-desc {
+  font-size: clamp(0.875rem, 1.8vw, 1.0625rem);
+}
+
+/* 平板（≤1200px）：3 列 */
+@media (max-width: 1200px) {
+  .marketplace-inner { padding: 0 24px; }
+  .marketplace-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* 小平板（≤900px）：2 列 */
+@media (max-width: 900px) {
+  .section-marketplace { padding: 4rem 0; }
+  .marketplace-inner { padding: 0 16px; }
+  .marketplace-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+  .market-card-cover { height: 140px; }
+}
+
+/* 手机竖屏（≤600px）：2 列紧凑 */
+@media (max-width: 600px) {
+  .section-marketplace { padding: 3rem 0; }
+  .marketplace-inner { padding: 0 12px; }
+  .marketplace-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  .market-card-cover { height: 120px; }
+  .market-card-body { padding: 12px; }
+  .market-title { font-size: 12px; }
+  .market-desc { font-size: 11px; }
+  .market-tags { display: none; }
+  .cat-tab { padding: 6px 12px; font-size: 12px; }
+  .cat-count { display: none; }
+}
+
+/* 极小屏（≤400px）：1 列 */
+@media (max-width: 400px) {
+  .marketplace-grid {
+    grid-template-columns: 1fr;
+  }
+  .market-card-cover { height: 160px; }
+}
+
+/* 查看更多 */
+.marketplace-footer { text-align: center; }
+.view-all-btn {
+  padding: 14px 40px;
+  background: white;
+  border: 1.5px solid rgba(99,102,241,0.3);
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #6366F1;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.view-all-btn:hover {
+  background: #F5F3FF;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(99,102,241,0.15);
+}
+</style>

src/pages/Home/SectionPlatforms.vue

@@ -0,0 +1,395 @@
+<template>
+  <section class="section-platforms relative overflow-hidden bg-white py-24">
+    <!-- 背景 -->
+    <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, #f8faff 0%, #ffffff 50%, #f0fdf4 100%);"></div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="text-center mb-14">
+        <span class="inline-flex items-center gap-2 bg-indigo-50 border border-indigo-200 text-indigo-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
+          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></span>
+          集成平台
+        </span>
+        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4">
+          四大引擎，<span class="bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">一站掌控</span>
+        </h2>
+        <p class="text-gray-500 text-lg max-w-2xl mx-auto">深度整合四大顶级 AI 工作流平台，统一学习、统一管理、统一部署</p>
+      </div>
+
+      <!-- 引擎选择器 -->
+      <div class="flex justify-center gap-3 mb-10 flex-wrap">
+        <button
+          v-for="(engine, idx) in engines"
+          :key="engine.id"
+          @click="activeEngine = idx"
+          class="group flex items-center gap-3 px-5 py-3 rounded-2xl border-2 transition-all duration-300 font-semibold text-sm"
+          :class="activeEngine === idx
+            ? `border-${engine.color}-400 bg-${engine.color}-50 text-${engine.color}-700 shadow-lg`
+            : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50'"
+        >
+          <span class="text-xl">{{ engine.logo }}</span>
+          <span>{{ engine.name }}</span>
+          <span class="text-xs px-2 py-0.5 rounded-full font-bold"
+            :class="activeEngine === idx ? `bg-${engine.color}-100 text-${engine.color}-600` : 'bg-gray-100 text-gray-400'">
+            {{ engine.tag }}
+          </span>
+        </button>
+      </div>
+
+      <!-- 主展示区：左侧详情 + 右侧对比矩阵 -->
+      <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
+
+        <!-- 左侧：引擎详情卡片 -->
+        <div class="lg:col-span-2">
+          <Transition name="engine-slide" mode="out-in">
+            <div :key="activeEngine" class="relative rounded-3xl overflow-hidden bg-gray-900 shadow-2xl">
+              <!-- 封面图 -->
+              <div class="relative h-52 overflow-hidden">
+                <img :src="currentEngine.img" :alt="currentEngine.name"
+                  class="w-full h-full object-cover opacity-60"/>
+                <div class="absolute inset-0" :style="`background: linear-gradient(to bottom, ${currentEngine.gradientFrom}, ${currentEngine.gradientTo});`"></div>
+                <!-- Logo -->
+                <div class="absolute top-5 left-5 flex items-center gap-3">
+                  <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                    {{ currentEngine.logo }}
+                  </div>
+                  <div>
+                    <div class="text-white font-black text-xl">{{ currentEngine.name }}</div>
+                    <div class="text-white/60 text-xs">{{ currentEngine.subtitle }}</div>
+                  </div>
+                </div>
+                <!-- 适用标签 -->
+                <div class="absolute bottom-4 left-5 right-5 flex flex-wrap gap-1.5">
+                  <span v-for="use in currentEngine.useCases" :key="use"
+                    class="text-xs bg-white/15 backdrop-blur-sm text-white border border-white/20 px-2.5 py-1 rounded-full">
+                    {{ use }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 详情内容 -->
+              <div class="p-6">
+                <p class="text-gray-300 text-sm leading-relaxed mb-5">{{ currentEngine.desc }}</p>
+
+                <!-- 核心指标 -->
+                <div class="grid grid-cols-3 gap-3 mb-5">
+                  <div v-for="metric in currentEngine.metrics" :key="metric.label"
+                    class="text-center p-3 rounded-2xl bg-white/10 border border-white/20">
+                    <div class="font-black text-base mb-0.5" :class="metric.color">{{ metric.value }}</div>
+                    <div class="text-gray-500 text-xs">{{ metric.label }}</div>
+                  </div>
+                </div>
+
+                <!-- 优势列表 -->
+                <div class="space-y-2 mb-5">
+                  <div v-for="pro in currentEngine.pros" :key="pro"
+                    class="flex items-center gap-2 text-sm text-gray-300">
+                    <span class="w-4 h-4 rounded-full flex items-center justify-center text-xs flex-shrink-0" :class="currentEngine.checkBg">✓</span>
+                    {{ pro }}
+                  </div>
+                </div>
+
+                <!-- CTA -->
+                <button class="w-full py-3 rounded-2xl font-bold text-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+                  :class="currentEngine.btnClass">
+                  开始学习 {{ currentEngine.name }} →
+                </button>
+              </div>
+            </div>
+          </Transition>
+        </div>
+
+        <!-- 右侧：功能对比矩阵 -->
+        <div class="lg:col-span-3">
+          <div class="bg-white border border-gray-100 rounded-3xl overflow-hidden shadow-lg">
+            <!-- 矩阵标题行 -->
+            <div class="grid grid-cols-5 bg-gray-50 border-b border-gray-100">
+              <div class="col-span-1 p-4 text-xs font-bold text-gray-400 uppercase">功能特性</div>
+              <div v-for="engine in engines" :key="engine.id"
+                class="p-4 text-center transition-all duration-300"
+                :class="activeEngine === engines.indexOf(engine) ? `bg-${engine.color}-50` : ''">
+                <div class="text-lg mb-1">{{ engine.logo }}</div>
+                <div class="text-xs font-bold text-gray-700">{{ engine.name }}</div>
+              </div>
+            </div>
+
+            <!-- 矩阵内容行 -->
+            <div v-for="(feature, fIdx) in comparisonFeatures" :key="feature.name"
+              class="grid grid-cols-5 border-b border-gray-50 transition-all duration-200 cursor-default"
+              :class="[
+                fIdx % 2 === 0 ? '' : 'bg-gray-50/30',
+                hoveredRow === fIdx ? 'bg-indigo-50/60 shadow-sm' : 'hover:bg-gray-50/50'
+              ]"
+              @mouseenter="hoveredRow = fIdx"
+              @mouseleave="hoveredRow = null">
+              <!-- 功能名 -->
+              <div class="col-span-1 p-4 flex items-center gap-2 relative group">
+                <span class="text-base">{{ feature.icon }}</span>
+                <div>
+                  <div class="text-sm font-semibold text-gray-700 flex items-center gap-1">
+                    {{ feature.name }}
+                    <span v-if="feature.tip" class="w-3.5 h-3.5 bg-gray-200 text-gray-500 rounded-full text-xs flex items-center justify-center cursor-help flex-shrink-0">?</span>
+                  </div>
+                  <div class="text-xs text-gray-400">{{ feature.desc }}</div>
+                </div>
+                <!-- Tooltip -->
+                <div v-if="feature.tip" class="compare-tooltip">
+                  {{ feature.tip }}
+                </div>
+              </div>
+              <!-- 各引擎支持情况 -->
+              <div v-for="(engine, eIdx) in engines" :key="engine.id"
+                class="p-4 flex items-center justify-center transition-all duration-300"
+                :class="activeEngine === eIdx ? `bg-${engine.color}-50/50` : ''">
+                <div class="flex flex-col items-center gap-1">
+                  <span v-if="feature.support[eIdx] === 'full'" class="w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-bold">✓</span>
+                  <span v-else-if="feature.support[eIdx] === 'partial'" class="w-6 h-6 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center text-xs font-bold">~</span>
+                  <span v-else class="w-6 h-6 bg-gray-100 text-gray-400 rounded-full flex items-center justify-center text-xs">—</span>
+                  <span v-if="feature.notes && feature.notes[eIdx]" class="text-xs text-gray-400 text-center leading-tight max-w-[70px]">{{ feature.notes[eIdx] }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部推荐 -->
+          <div class="mt-6 p-5 bg-gradient-to-r from-indigo-50 to-violet-50 rounded-2xl border border-indigo-100">
+            <div class="flex items-start gap-3">
+              <span class="text-2xl flex-shrink-0">💡</span>
+              <div>
+                <div class="font-bold text-gray-800 mb-1 text-sm">如何选择适合你的引擎？</div>
+                <div class="text-gray-500 text-xs leading-relaxed">
+                  <span class="font-semibold text-gray-700">n8n</span> 适合技术团队做复杂自动化；
+                  <span class="font-semibold text-gray-700">Coze</span> 适合快速构建 AI Bot；
+                  <span class="font-semibold text-gray-700">Dify</span> 适合 LLM 应用开发；
+                  <span class="font-semibold text-gray-700">FastGPT</span> 适合企业知识库问答。
+                  <a href="#" class="text-indigo-600 font-semibold ml-1 hover:underline">查看选型指南 →</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeEngine = ref(0)
+const hoveredRow = ref(null)
+
+const engines = [
+  {
+    id: 'n8n', name: 'n8n', logo: '🔧', tag: '开源', subtitle: '可视化自动化平台',
+    color: 'red',
+    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=350&fit=crop&q=80',
+    gradientFrom: 'rgba(239,68,68,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
+    desc: 'n8n 是强大的开源工作流自动化平台，拥有 400+ 内置节点，支持自托管，适合技术团队构建复杂的企业级自动化流程。',
+    useCases: ['企业自动化', '数据管道', 'API 集成'],
+    metrics: [
+      { value: '400+', label: '集成节点', color: 'text-red-400' },
+      { value: '开源', label: '可自托管', color: 'text-green-400' },
+      { value: '99.9%', label: '在线率', color: 'text-blue-400' }
+    ],
+    pros: ['可视化拖拽，无需编程', '400+ 内置集成节点', '支持私有化部署', '强大的条件逻辑处理'],
+    checkBg: 'bg-red-100 text-red-600',
+    btnClass: 'bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-lg shadow-red-200/50'
+  },
+  {
+    id: 'coze', name: 'Coze', logo: '🤖', tag: 'Bot平台', subtitle: 'AI Bot 构建平台',
+    color: 'blue',
+    img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=600&h=350&fit=crop&q=80',
+    gradientFrom: 'rgba(59,130,246,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
+    desc: 'Coze 是字节跳动推出的 AI Bot 开发平台，零代码快速构建多模态 AI 助手，支持接入飞书、微信等主流渠道。',
+    useCases: ['AI 客服', '智能助手', '多渠道Bot'],
+    metrics: [
+      { value: '零代码', label: '快速搭建', color: 'text-blue-400' },
+      { value: '10+', label: '接入渠道', color: 'text-green-400' },
+      { value: '多模态', label: '能力支持', color: 'text-violet-400' }
+    ],
+    pros: ['零代码快速构建Bot', '支持多模态交互', '丰富的插件生态', '一键部署到多渠道'],
+    checkBg: 'bg-blue-100 text-blue-600',
+    btnClass: 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-blue-200/50'
+  },
+  {
+    id: 'dify', name: 'Dify', logo: '🧠', tag: 'LLM应用', subtitle: 'LLM 应用开发平台',
+    color: 'emerald',
+    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=350&fit=crop&q=80',
+    gradientFrom: 'rgba(16,185,129,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
+    desc: 'Dify 是专业的 LLM 应用开发平台，支持 RAG 知识库、Agent 编排和 Prompt 工程，适合构建复杂的 AI 应用。',
+    useCases: ['RAG知识库', 'Agent编排', 'LLM应用'],
+    metrics: [
+      { value: 'RAG', label: '知识检索', color: 'text-emerald-400' },
+      { value: 'Agent', label: '智能编排', color: 'text-green-400' },
+      { value: '开源', label: '可私有化', color: 'text-blue-400' }
+    ],
+    pros: ['强大的 RAG 知识库', 'Agent 工作流编排', '多模型统一管理', '完整的 API 接口'],
+    checkBg: 'bg-emerald-100 text-emerald-600',
+    btnClass: 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg shadow-emerald-200/50'
+  },
+  {
+    id: 'fastgpt', name: 'FastGPT', logo: '⚡', tag: '知识库', subtitle: '企业知识库问答',
+    color: 'amber',
+    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=350&fit=crop&q=80',
+    gradientFrom: 'rgba(245,158,11,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
+    desc: 'FastGPT 专注于企业知识库问答场景，支持私有化部署，高精度文档解析和问答，是企业 AI 知识管理的首选方案。',
+    useCases: ['企业知识库', '文档问答', '私有化部署'],
+    metrics: [
+      { value: '95%+', label: '问答准确率', color: 'text-amber-400' },
+      { value: '私有化', label: '数据安全', color: 'text-green-400' },
+      { value: '多格式', label: '文档支持', color: 'text-blue-400' }
+    ],
+    pros: ['高精度文档解析', '支持私有化部署', '多格式文件支持', '企业级权限管理'],
+    checkBg: 'bg-amber-100 text-amber-600',
+    btnClass: 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg shadow-amber-200/50'
+  }
+]
+
+const currentEngine = computed(() => engines[activeEngine.value])
+
+const comparisonFeatures = [
+  {
+    icon: '🎨', name: '可视化编辑', desc: '拖拽式界面',
+    tip: '通过拖拽节点即可构建工作流，无需编程基础',
+    support: ['full', 'full', 'full', 'partial'],
+    notes: ['', '', '', '基础版']
+  },
+  {
+    icon: '🔌', name: '集成节点数', desc: '第三方服务',
+    tip: '内置的第三方平台集成数量，节点越多连接能力越强',
+    support: ['full', 'partial', 'partial', 'partial'],
+    notes: ['400+', '50+', '100+', '30+']
+  },
+  {
+    icon: '🧠', name: 'RAG 知识库', desc: '文档问答',
+    tip: '基于检索增强生成，将文档转化为 AI 可检索知识库',
+    support: ['partial', 'partial', 'full', 'full'],
+    notes: ['基础', '基础', '完整', '完整']
+  },
+  {
+    icon: '🤖', name: 'Agent 编排', desc: '智能体工作流',
+    tip: 'AI 智能体自主规划并执行多步骤任务，具备自主决策能力',
+    support: ['full', 'full', 'full', 'partial'],
+    notes: ['', '', '', '基础']
+  },
+  {
+    icon: '🏠', name: '私有化部署', desc: '本地/云端',
+    tip: '支持将工作流引擎部署到自己的服务器，数据不离境',
+    support: ['full', 'none', 'full', 'full'],
+    notes: ['', '仅云端', '', '']
+  },
+  {
+    icon: '📱', name: '多渠道发布', desc: '微信/飞书等',
+    tip: '工作流输出可同时推送到微信、飞书、钉钉等多个渠道',
+    support: ['partial', 'full', 'partial', 'partial'],
+    notes: ['需配置', '原生支持', '需配置', '需配置']
+  },
+  {
+    icon: '💰', name: '免费额度', desc: '基础使用',
+    tip: '开源项目可免费自部署，商业产品有免费层和付费升级选项',
+    support: ['full', 'full', 'full', 'full'],
+    notes: ['开源免费', '有免费额度', '开源免费', '开源免费']
+  }
+]
+</script>
+
+<style scoped>
+.engine-slide-enter-active, .engine-slide-leave-active {
+  transition: all 0.3s ease;
+}
+.engine-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+.engine-slide-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题自适应 */
+.section-platforms h2 {
+  font-size: clamp(1.75rem, 4.5vw, 3rem);
+}
+.section-platforms p {
+  font-size: clamp(0.875rem, 2vw, 1.125rem);
+}
+
+/* 平板（≤1024px）*/
+@media (max-width: 1024px) {
+  .section-platforms { padding-top: 4rem; padding-bottom: 4rem; }
+  .section-platforms .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
+}
+
+/* 手机横屏 / 小平板（≤768px）*/
+@media (max-width: 768px) {
+  .section-platforms { padding-top: 3rem; padding-bottom: 3rem; }
+  /* 引擎选择器按钮 */
+  .section-platforms button.group { padding: 8px 14px; font-size: 12px; gap: 8px; }
+  /* 对比矩阵改为可滚动 */
+  .section-platforms .lg\:col-span-3 > .bg-white {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .section-platforms .grid-cols-5 {
+    min-width: 480px;
+  }
+  /* 封面图高度缩小 */
+  .section-platforms .h-52 { height: 10rem; }
+  /* 内容区域内边距 */
+  .section-platforms .p-6 { padding: 1rem; }
+  /* 指标卡片 */
+  .section-platforms .grid-cols-3 { gap: 0.5rem; }
+}
+
+/* 手机竖屏（≤480px）*/
+@media (max-width: 480px) {
+  .section-platforms { padding-top: 2.5rem; padding-bottom: 2.5rem; }
+  /* 引擎选择器按钮隐藏 tag */
+  .section-platforms button.group span:last-child { display: none; }
+  .section-platforms button.group { padding: 7px 12px; font-size: 11px; gap: 6px; }
+  /* 封面图 */
+  .section-platforms .h-52 { height: 8rem; }
+  /* 底部推荐框 */
+  .section-platforms .mt-6.p-5 { padding: 0.75rem; }
+  /* 对比矩阵单元格内边距 */
+  .section-platforms .p-4 { padding: 0.5rem; }
+  .section-platforms .text-sm { font-size: 0.75rem; }
+  .section-platforms .text-xs { font-size: 0.65rem; }
+}
+
+/* 极小屏（≤360px）*/
+@media (max-width: 360px) {
+  .section-platforms button.group span:nth-child(2) { display: none; }
+  .section-platforms button.group { padding: 6px 10px; }
+}
+
+/* 对比表格 Tooltip */
+.compare-tooltip {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+  background: rgba(15, 10, 35, 0.92);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 6px 12px;
+  border-radius: 8px;
+  white-space: nowrap;
+  max-width: 220px;
+  white-space: normal;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
+.group:hover .compare-tooltip {
+  opacity: 1;
+}
+</style>

src/pages/Home/SectionReviews.vue

@@ -0,0 +1,408 @@
+<template>
+  <section class="section-reviews relative overflow-hidden py-28" ref="sectionRef">
+    <!-- 背景 -->
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, #f8f5ff 0%, #ffffff 40%, #f0f9ff 100%);"></div>
+    <div class="absolute inset-0 pointer-events-none overflow-hidden">
+      <div class="review-bg-orb review-bg-orb-1"></div>
+      <div class="review-bg-orb review-bg-orb-2"></div>
+    </div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="text-center mb-16 reveal-up" :class="{ 'is-visible': isVisible }">
+        <span class="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-600 text-xs font-bold px-4 py-1.5 rounded-full mb-6 uppercase tracking-widest">
+          <span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span>
+          用户评价
+        </span>
+        <h2 class="text-5xl lg:text-6xl font-black text-gray-900 mb-5 leading-tight">
+          真实用户，<span class="reviews-gradient-text">真实反馈</span>
+        </h2>
+        <p class="text-gray-500 text-lg max-w-xl mx-auto">来自全球 50,000+ 用户的真实评价，见证暴米AI如何改变工作方式</p>
+      </div>
+
+      <!-- 综合评分横幅 -->
+      <div class="reviews-score-banner reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.15s;">
+        <div class="text-center">
+          <div class="text-7xl font-black text-gray-900 mb-2 leading-none">4.9</div>
+          <div class="flex justify-center gap-0.5 mb-2">
+            <span v-for="i in 5" :key="i" class="text-amber-400 text-2xl">★</span>
+          </div>
+          <div class="text-gray-500 text-sm font-medium">综合评分</div>
+        </div>
+        <div class="w-px h-20 bg-gray-200 hidden md:block"></div>
+        <div class="flex flex-col gap-2.5 min-w-48">
+          <div v-for="item in ratingBreakdown" :key="item.stars" class="flex items-center gap-3">
+            <span class="text-gray-400 text-xs w-8 text-right font-medium">{{ item.stars }}星</span>
+            <div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
+              <div class="h-full bg-gradient-to-r from-amber-400 to-yellow-300 rounded-full transition-all duration-1000"
+                :style="{ width: isVisible ? `${item.percent}%` : '0%' }"></div>
+            </div>
+            <span class="text-gray-400 text-xs w-8 font-medium">{{ item.percent }}%</span>
+          </div>
+        </div>
+        <div class="w-px h-20 bg-gray-200 hidden md:block"></div>
+        <div class="flex gap-10">
+          <div v-for="stat in ratingStats" :key="stat.label" class="text-center">
+            <div class="text-3xl font-black text-gray-900 mb-1">{{ stat.value }}</div>
+            <div class="text-gray-500 text-xs">{{ stat.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 精选评价 - 交错布局 -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.3s;">
+        <!-- 大卡片（左侧，占2列） -->
+        <div class="lg:col-span-2 review-card-dark group">
+          <div class="review-bg-glow"></div>
+          <div class="text-violet-400/20 text-9xl font-serif leading-none mb-4 select-none">"</div>
+          <blockquote class="text-white text-xl lg:text-2xl font-medium leading-relaxed mb-6">
+            暴米AI 彻底改变了我们的内容生产流程。以前需要 3 个人花一天时间完成的工作，现在一个工作流 20 分钟就搞定了，效率提升了
+            <span class="text-violet-300 font-black">10 倍以上</span>。
+          </blockquote>
+          <div class="flex items-center gap-4">
+            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop" alt="用户"
+              class="w-12 h-12 rounded-full object-cover ring-2 ring-violet-500/40"/>
+            <div>
+              <div class="text-white font-bold">张明远</div>
+              <div class="text-white/40 text-sm">某电商平台 · 内容总监</div>
+            </div>
+            <div class="ml-auto flex gap-0.5">
+              <span v-for="i in 5" :key="i" class="text-amber-400 text-sm">★</span>
+            </div>
+          </div>
+          <div class="mt-5 flex flex-wrap gap-2">
+            <span class="review-tag-violet">效率提升 10x</span>
+            <span class="review-tag-green">节省 80% 人力</span>
+            <span class="review-tag-blue">使用 n8n + Coze</span>
+          </div>
+        </div>
+
+        <!-- 右侧两个小卡片 -->
+        <div class="flex flex-col gap-6">
+          <div v-for="review in sideReviews" :key="review.name"
+            class="review-card-light group">
+            <div class="text-blue-200 text-5xl font-serif leading-none mb-3 select-none">"</div>
+            <blockquote class="text-gray-700 text-sm leading-relaxed mb-4">{{ review.quote }}</blockquote>
+            <div class="flex items-center gap-3">
+              <img :src="review.avatar" :alt="review.name" class="w-9 h-9 rounded-full object-cover ring-2 ring-gray-100"/>
+              <div>
+                <div class="text-gray-800 font-bold text-sm">{{ review.name }}</div>
+                <div class="text-gray-400 text-xs">{{ review.role }}</div>
+              </div>
+              <div class="ml-auto text-amber-400 text-xs font-bold">★ {{ review.rating }}</div>
+            </div>
+            <div class="mt-3 flex flex-wrap gap-1.5">
+              <span v-for="tag in review.tags" :key="tag"
+                class="text-xs bg-gray-50 text-gray-500 border border-gray-100 px-2 py-0.5 rounded-full hover:bg-violet-50 hover:text-violet-600 hover:border-violet-100 transition-colors duration-200 cursor-default">{{ tag }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第二行：3个等宽卡片 -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-14 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.45s;">
+        <div v-for="(review, idx) in midReviews" :key="review.name"
+          class="review-card-light group"
+          :style="{ transitionDelay: `${0.45 + idx * 0.08}s` }">
+          <div class="absolute top-0 right-0 w-28 h-28 rounded-full opacity-10 pointer-events-none"
+            :style="`background: radial-gradient(circle, ${review.accent}, transparent); transform: translate(30%, -30%);`"></div>
+          <div class="text-4xl font-serif leading-none mb-3 select-none text-blue-200">"</div>
+          <blockquote class="text-gray-600 text-sm leading-relaxed mb-4">{{ review.quote }}</blockquote>
+          <div class="flex items-center gap-3">
+            <img :src="review.avatar" :alt="review.name" class="w-9 h-9 rounded-full object-cover ring-2 ring-gray-100"/>
+            <div>
+              <div class="font-bold text-sm text-gray-900">{{ review.name }}</div>
+              <div class="text-xs text-gray-400">{{ review.role }}</div>
+            </div>
+            <div class="ml-auto text-amber-400 text-xs font-bold">★ {{ review.rating }}</div>
+          </div>
+          <div class="mt-3 inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full" :class="review.tagClass">
+            {{ review.result }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 品牌墙 -->
+      <div class="pt-8 border-t border-gray-100 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.6s;">
+        <div class="text-center text-gray-400 text-sm mb-8 font-medium tracking-wide uppercase">来自各行各业的用户信任</div>
+        <div class="overflow-hidden">
+          <div class="flex gap-4 brand-scroll">
+            <div v-for="(brand, i) in [...brands, ...brands]" :key="i"
+              class="flex-shrink-0 flex items-center gap-2.5 bg-white border border-gray-100 rounded-2xl px-5 py-3 hover:border-violet-200 hover:bg-violet-50 hover:shadow-md transition-all duration-300 cursor-pointer group">
+              <span class="text-xl group-hover:scale-110 transition-transform duration-200">{{ brand.icon }}</span>
+              <span class="text-gray-600 text-sm font-semibold whitespace-nowrap group-hover:text-violet-600 transition-colors duration-200">{{ brand.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isVisible = ref(false)
+const sectionRef = ref(null)
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
+    { threshold: 0.1 }
+  )
+  if (sectionRef.value) observer.observe(sectionRef.value)
+})
+
+const ratingBreakdown = [
+  { stars: 5, percent: 87 },
+  { stars: 4, percent: 10 },
+  { stars: 3, percent: 2 },
+  { stars: 2, percent: 1 },
+  { stars: 1, percent: 0 },
+]
+
+const ratingStats = [
+  { value: '50,000+', label: '总评价数' },
+  { value: '98%', label: '推荐率' },
+  { value: '4.9/5', label: '平均评分' },
+]
+
+const sideReviews = [
+  {
+    name: '李晓雨', role: '自媒体创作者',
+    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop',
+    quote: '用 Coze 搭建了一个自动生成小红书内容的工作流，每天自动发布 5 篇，粉丝涨了 3 倍！',
+    rating: '5.0', tags: ['Coze', '内容创作', '小红书']
+  },
+  {
+    name: '王建国', role: '企业 IT 负责人',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop',
+    quote: 'FastGPT 知识库让我们的客服机器人准确率从 60% 提升到 95%，客户满意度大幅提升。',
+    rating: '4.9', tags: ['FastGPT', '客服', '企业']
+  }
+]
+
+const midReviews = [
+  {
+    name: '陈思远', role: '数据分析师',
+    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop',
+    quote: 'n8n 的可视化工作流让我把每周的数据报表完全自动化，节省了 8 小时/周，现在可以专注更有价值的分析工作。',
+    rating: '5.0', accent: '#8b5cf6', result: '节省 8h/周', tagClass: 'bg-violet-50 text-violet-600'
+  },
+  {
+    name: '刘美华', role: '电商运营总监',
+    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop',
+    quote: '暴米AI 的课程体系非常系统，从入门到实战，让我们团队 5 个人都快速掌握了 AI 工作流，ROI 非常高。',
+    rating: '4.9', accent: '#3b82f6', result: '团队全员上手', tagClass: 'bg-blue-50 text-blue-600'
+  },
+  {
+    name: '赵志强', role: 'SaaS 创业者',
+    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop',
+    quote: '用 Dify 搭建了产品的 AI 功能，原本需要 2 个月开发的功能，用工作流 3 天就上线了，太震撼了。',
+    rating: '5.0', accent: '#10b981', result: '3天上线AI功能', tagClass: 'bg-emerald-50 text-emerald-600'
+  }
+]
+
+const brands = [
+  { icon: '🏢', name: '字节跳动' },
+  { icon: '🛒', name: '某电商平台' },
+  { icon: '📱', name: '移动互联网公司' },
+  { icon: '🏦', name: '金融科技企业' },
+  { icon: '🎓', name: '在线教育机构' },
+  { icon: '🏥', name: '医疗健康平台' },
+  { icon: '🚗', name: '汽车科技公司' },
+  { icon: '🎮', name: '游戏公司' },
+]
+</script>
+
+<style scoped>
+/* 背景光晕 */
+.review-bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  pointer-events: none;
+}
+.review-bg-orb-1 {
+  width: 500px; height: 500px;
+  top: -100px; right: -100px;
+  background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%);
+  animation: reviewOrbFloat 14s ease-in-out infinite;
+}
+.review-bg-orb-2 {
+  width: 400px; height: 400px;
+  bottom: -80px; left: -80px;
+  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
+  animation: reviewOrbFloat 18s ease-in-out infinite reverse;
+}
+@keyframes reviewOrbFloat {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(20px, -25px); }
+}
+
+/* 渐变文字 */
+.reviews-gradient-text {
+  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* 评分横幅 */
+.reviews-score-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  margin-bottom: 48px;
+  padding: 32px 40px;
+  background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(59,130,246,0.04) 100%);
+  border: 1px solid rgba(245,158,11,0.15);
+  border-radius: 28px;
+}
+
+/* 深色评价卡片 */
+.review-card-dark {
+  position: relative;
+  background: linear-gradient(135deg, #1a1040, #0d1b3e);
+  border-radius: 24px;
+  padding: 32px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(139,92,246,0.2);
+}
+.review-card-dark:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 30px 70px rgba(0,0,0,0.25), 0 0 0 1px rgba(139,92,246,0.3);
+}
+.review-bg-glow {
+  position: absolute;
+  top: 0; right: 0;
+  width: 200px; height: 200px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(139,92,246,0.15), transparent);
+  transform: translate(30%, -30%);
+  pointer-events: none;
+}
+
+/* 浅色评价卡片 */
+.review-card-light {
+  position: relative;
+  background: white;
+  border: 1px solid #f3f4f6;
+  border-radius: 24px;
+  padding: 24px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.review-card-light:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
+  border-color: rgba(196,181,253,0.5);
+}
+
+/* 标签 */
+.review-tag-violet {
+  font-size: 12px;
+  background: rgba(139,92,246,0.15);
+  color: #a78bfa;
+  border: 1px solid rgba(139,92,246,0.25);
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-weight: 600;
+}
+.review-tag-green {
+  font-size: 12px;
+  background: rgba(16,185,129,0.15);
+  color: #34d399;
+  border: 1px solid rgba(16,185,129,0.25);
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-weight: 600;
+}
+.review-tag-blue {
+  font-size: 12px;
+  background: rgba(59,130,246,0.15);
+  color: #60a5fa;
+  border: 1px solid rgba(59,130,246,0.25);
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-weight: 600;
+}
+
+/* 品牌滚动 */
+.brand-scroll {
+  animation: brandScroll 25s linear infinite;
+}
+.brand-scroll:hover {
+  animation-play-state: paused;
+}
+@keyframes brandScroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+/* 滚动动画 */
+.reveal-up {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+.reveal-up.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题自适应 */
+.section-reviews h2 {
+  font-size: clamp(2rem, 5vw, 3.75rem);
+}
+
+/* 平板（≤1024px）*/
+@media (max-width: 1024px) {
+  .section-reviews { padding-top: 5rem; padding-bottom: 5rem; }
+  .section-reviews .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
+  .reviews-score-banner { gap: 24px; padding: 24px 28px; }
+}
+
+/* 手机横屏 / 小平板（≤768px）*/
+@media (max-width: 768px) {
+  .section-reviews { padding-top: 4rem; padding-bottom: 4rem; }
+  /* 评分横幅 */
+  .reviews-score-banner { gap: 16px; padding: 20px; flex-direction: column; align-items: flex-start; }
+  .reviews-score-banner .text-7xl { font-size: 3.5rem; }
+  .reviews-score-banner .text-3xl { font-size: 1.5rem; }
+  /* 大卡片内边距 */
+  .review-card-dark { padding: 20px; }
+  .review-card-dark blockquote { font-size: 1rem; }
+  .review-card-dark .text-9xl { font-size: 4rem; margin-bottom: 8px; }
+  /* 小卡片 */
+  .review-card-light { padding: 16px; }
+}
+
+/* 手机竖屏（≤480px）*/
+@media (max-width: 480px) {
+  .section-reviews { padding-top: 3rem; padding-bottom: 3rem; }
+  .reviews-score-banner { padding: 16px; }
+  .reviews-score-banner .text-7xl { font-size: 2.75rem; }
+  .review-card-dark { padding: 16px; }
+  .review-card-dark blockquote { font-size: 0.9rem; }
+  .review-card-dark .text-9xl { font-size: 3rem; }
+  .review-card-dark .w-12 { width: 2.25rem; height: 2.25rem; }
+  .review-card-light { padding: 14px; }
+  .review-card-light .text-base { font-size: 0.875rem; }
+  .review-tag-violet, .review-tag-green, .review-tag-blue { font-size: 10px; padding: 3px 8px; }
+}
+
+/* 极小屏（≤360px）*/
+@media (max-width: 360px) {
+  .review-card-dark { padding: 12px; }
+  .review-card-dark blockquote { font-size: 0.8rem; }
+  .review-card-light { padding: 10px; }
+}
+</style>

src/pages/Home/SectionScenes.vue

@@ -0,0 +1,788 @@
+<template>
+  <section class="section-scenes relative overflow-hidden py-28" ref="sectionRef">
+    <!-- 背景 -->
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 50%, #f0f4ff 100%);"></div>
+    <!-- 背景装饰圆 -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden">
+      <div class="scene-bg-orb scene-bg-orb-1"></div>
+      <div class="scene-bg-orb scene-bg-orb-2"></div>
+    </div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="text-center mb-16 reveal-up" :class="{ 'is-visible': isVisible }">
+        <span class="inline-flex items-center gap-2 bg-violet-50 border border-violet-200 text-violet-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 tracking-widest uppercase">
+          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
+          应用场景
+        </span>
+        <h2 class="text-5xl lg:text-6xl font-black text-gray-900 mb-5 leading-tight">
+          工作流<span class="scenes-gradient-text">无处不在</span>
+        </h2>
+        <p class="text-gray-500 text-lg max-w-2xl mx-auto leading-relaxed">
+          从内容创作到企业运营，AI 工作流正在重塑每一个行业的工作方式
+        </p>
+      </div>
+
+      <!-- 场景切换 Tab -->
+      <div class="flex flex-wrap justify-center gap-3 mb-14 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.15s;">
+        <button
+          v-for="(scene, i) in scenes"
+          :key="i"
+          @click="switchScene(i)"
+          class="scene-tab-btn"
+          :class="activeScene === i ? 'scene-tab-active' : 'scene-tab-inactive'"
+        >
+          <span class="scene-tab-icon">{{ scene.icon }}</span>
+          <span>{{ scene.name }}</span>
+          <span class="scene-tab-count" :class="activeScene === i ? 'scene-tab-count-active' : ''">{{ scene.count }}</span>
+        </button>
+      </div>
+
+      <!-- 主展示区 -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.3s;">
+
+        <!-- 左侧：场景可视化 -->
+        <div class="scene-visual-card" ref="visualCardRef" @mousemove="onCardMouseMove" @mouseleave="onCardMouseLeave">
+          <!-- 图片层 -->
+          <div class="scene-img-wrapper">
+            <Transition name="scene-zoom">
+              <img
+                :key="activeScene"
+                :src="currentScene.img"
+                :alt="currentScene.name"
+                class="scene-img"
+              />
+            </Transition>
+            <div class="scene-img-overlay"></div>
+
+            <!-- 顶部效率标签 -->
+            <div class="scene-efficiency-badge">
+              <span class="text-3xl font-black text-white">{{ currentScene.efficiency }}</span>
+              <div>
+                <div class="text-white text-xs font-bold">效率提升</div>
+                <div class="text-white/60 text-xs">{{ currentScene.efficiencyLabel }}</div>
+              </div>
+            </div>
+
+            <!-- 场景名称 -->
+            <div class="scene-bottom-info">
+              <div class="flex items-center gap-3 mb-2">
+                <span class="text-3xl">{{ currentScene.icon }}</span>
+                <h3 class="text-white text-2xl font-black">{{ currentScene.name }}</h3>
+              </div>
+              <p class="text-white/70 text-sm leading-relaxed mb-4">{{ currentScene.desc }}</p>
+
+              <!-- 三项指标 -->
+              <div class="grid grid-cols-3 gap-3">
+                <div v-for="metric in currentScene.metrics" :key="metric.label"
+                  class="scene-metric-card">
+                  <div class="text-white font-black text-lg">{{ metric.value }}</div>
+                  <div class="text-white/50 text-xs mt-0.5">{{ metric.label }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部工具标签 -->
+          <div class="scene-tools-bar">
+            <span class="text-white/40 text-xs mr-2">集成工具：</span>
+            <Transition name="tools-fade">
+              <div :key="activeScene" class="flex flex-wrap gap-2">
+                <span v-for="(tool, ti) in currentScene.tools" :key="tool"
+                  class="scene-tool-tag"
+                  :style="{ animationDelay: `${ti * 0.05}s` }">
+                  {{ tool }}
+                </span>
+              </div>
+            </Transition>
+          </div>
+        </div>
+
+        <!-- 右侧：步骤流程 -->
+        <div class="flex flex-col">
+          <!-- 描述 -->
+          <div class="mb-6">
+            <Transition name="text-slide" mode="out-in">
+              <div :key="activeScene">
+                <h3 class="text-2xl font-black text-gray-900 mb-2">{{ currentScene.name }}</h3>
+                <p class="text-gray-500 text-base leading-relaxed">{{ currentScene.longDesc }}</p>
+              </div>
+            </Transition>
+          </div>
+
+          <!-- 步骤列表（工作流节点卡片风格）-->
+          <div class="flex-1">
+            <Transition name="steps-fade" mode="out-in">
+              <div :key="activeScene" class="wf-steps-container">
+                <div
+                  v-for="(step, idx) in currentScene.steps"
+                  :key="step.title"
+                  class="wf-step-row"
+                  :style="{ animationDelay: `${idx * 0.1}s` }"
+                >
+                  <!-- 左侧：连接线 + 节点圆 -->
+                  <div class="wf-step-spine">
+                    <!-- 连接线（非最后一项才显示）-->
+                    <div v-if="idx < currentScene.steps.length - 1" class="wf-spine-line">
+                      <!-- 流动粒子 -->
+                      <div class="wf-spine-particle" :style="{ animationDelay: `${idx * 0.4}s` }"></div>
+                    </div>
+                    <!-- 节点圆 -->
+                    <div class="wf-step-node"
+                      :class="step.done ? 'wf-node-done' : 'wf-node-pending'"
+                      @click="activeStep = activeStep === idx ? -1 : idx">
+                      <span v-if="step.done" class="wf-node-check">✓</span>
+                      <span v-else class="wf-node-num">{{ idx + 1 }}</span>
+                      <!-- 脉冲环（未完成节点）-->
+                      <div v-if="!step.done" class="wf-node-pulse"></div>
+                    </div>
+                  </div>
+
+                  <!-- 右侧：节点卡片 -->
+                  <div class="wf-step-card"
+                    :class="activeStep === idx ? 'wf-step-card-active' : 'wf-step-card-inactive'"
+                    @click="activeStep = activeStep === idx ? -1 : idx">
+                    <!-- 卡片顶部 -->
+                    <div class="wf-step-card-top">
+                      <div class="wf-step-card-title">{{ step.title }}</div>
+                      <div class="wf-step-card-badges">
+                        <span class="wf-step-time-badge">⏱ {{ step.time }}</span>
+                        <span class="wf-step-status-badge" :class="step.done ? 'wf-status-done' : 'wf-status-pending'">
+                          {{ step.done ? '已完成' : '待执行' }}
+                        </span>
+                      </div>
+                    </div>
+                    <!-- 描述 -->
+                    <div class="wf-step-card-desc">{{ step.desc }}</div>
+                    <!-- 展开标签 -->
+                    <Transition name="tags-expand">
+                      <div v-if="activeStep === idx" class="wf-step-tags">
+                        <span v-for="tag in step.tags" :key="tag" class="wf-step-tag">{{ tag }}</span>
+                      </div>
+                    </Transition>
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </div>
+
+          <!-- CTA 按钮 -->
+          <div class="mt-6 flex gap-3">
+            <button class="scene-cta-primary flex-1">
+              立即体验 · {{ currentScene.name }} →
+            </button>
+            <button class="scene-cta-secondary px-5">
+              查看案例
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const activeScene = ref(0)
+const activeStep = ref(0)
+const isVisible = ref(false)
+const sectionRef = ref(null)
+const visualCardRef = ref(null)
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
+    { threshold: 0.1 }
+  )
+  if (sectionRef.value) observer.observe(sectionRef.value)
+})
+
+function onCardMouseMove(e) {
+  const card = visualCardRef.value
+  if (!card) return
+  const rect = card.getBoundingClientRect()
+  const x = (e.clientX - rect.left) / rect.width - 0.5
+  const y = (e.clientY - rect.top) / rect.height - 0.5
+  card.style.transform = `perspective(1000px) rotateY(${x * 8}deg) rotateX(${-y * 6}deg) scale(1.02)`
+}
+function onCardMouseLeave() {
+  if (visualCardRef.value) {
+    visualCardRef.value.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1)'
+  }
+}
+
+const scenes = [
+  {
+    icon: '✍️', name: '内容创作', count: '428x',
+    efficiency: '10x', efficiencyLabel: '内容产出',
+    img: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=800&h=600&fit=crop&q=80',
+    desc: 'AI 驱动的内容生产流水线，从关键词输入到多平台发布，全程自动化',
+    longDesc: 'AI 驱动的内容生产流水线，从关键词输入到多平台发布，全程自动化，效率提升 10 倍。支持微信公众号、小红书、抖音等主流平台一键分发。',
+    metrics: [{ value: '10x', label: '效率提升' }, { value: '4平台', label: '同步发布' }, { value: '<5min', label: '生产周期' }],
+    tools: ['GPT-4', 'Claude', '微信公众号', '小红书', '抖音', 'n8n'],
+    steps: [
+      { title: '关键词输入', desc: '输入关键词，AI 自动扩展话题，批量生成内容大纲', time: '10s', done: true, tags: ['批量扩展', '话题分析'] },
+      { title: 'AI 文案生成', desc: 'GPT-4 生成高质量文章，支持多种风格和语气调整', time: '40s', done: true, tags: ['GPT-4', 'Claude', '自动配图'] },
+      { title: '多平台适配', desc: '自动调整格式，适配各平台字数限制和排版规范', time: '20s', done: true, tags: ['格式转换', '自动排版'] },
+      { title: '一键发布', desc: '同步发布到所有平台，自动设置标签和发布时间', time: '5s', done: false, tags: ['多平台', '定时发布'] }
+    ]
+  },
+  {
+    icon: '🤖', name: '客服自动化', count: '528x',
+    efficiency: '95%', efficiencyLabel: '自动回复率',
+    img: 'https://images.unsplash.com/photo-1596526131083-e8c633c948d2?w=800&h=600&fit=crop&q=80',
+    desc: '智能客服机器人，7×24h 自动处理客户咨询，准确率高达 95%',
+    longDesc: '基于 FastGPT 知识库的智能客服系统，自动学习产品文档和历史对话，实现 95% 问题自动解答，大幅降低人工客服压力。',
+    metrics: [{ value: '95%', label: '自动回复率' }, { value: '7×24h', label: '全天在线' }, { value: '<2s', label: '响应时间' }],
+    tools: ['FastGPT', 'Coze', '微信', '飞书', '钉钉', 'Zendesk'],
+    steps: [
+      { title: '知识库构建', desc: '上传产品文档、FAQ，AI 自动解析并建立向量索引', time: '5min', done: true, tags: ['PDF解析', '向量化', '自动更新'] },
+      { title: '意图识别', desc: '精准识别用户意图，分类路由到对应处理流程', time: '0.1s', done: true, tags: ['NLU', '多轮对话'] },
+      { title: 'AI 智能回答', desc: '基于知识库生成精准回答，支持追问和澄清', time: '1.5s', done: true, tags: ['RAG检索', '上下文理解'] },
+      { title: '人工介入', desc: '复杂问题自动转人工，附带完整对话上下文', time: '即时', done: false, tags: ['智能转接', '上下文传递'] }
+    ]
+  },
+  {
+    icon: '📊', name: '数据分析', count: '368x',
+    efficiency: '8h→20min', efficiencyLabel: '报表生成',
+    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop&q=80',
+    desc: '自动化数据采集、清洗、分析和报表生成，将 8 小时工作压缩到 20 分钟',
+    longDesc: '从多数据源自动采集数据，经过清洗和分析后，自动生成可视化报表并推送到飞书、邮件等渠道，彻底解放数据分析师。',
+    metrics: [{ value: '8h→20min', label: '报表生成' }, { value: '20+数据源', label: '统一接入' }, { value: '自动推送', label: '多渠道' }],
+    tools: ['n8n', 'Python', 'MySQL', 'Google Sheets', '飞书', 'Slack'],
+    steps: [
+      { title: '多源数据采集', desc: '自动从数据库、API、Excel 等多源采集最新数据', time: '2min', done: true, tags: ['MySQL', 'API', 'Excel'] },
+      { title: '数据清洗', desc: 'AI 自动识别异常值，标准化数据格式', time: '3min', done: true, tags: ['去重', '格式化', '异常检测'] },
+      { title: '智能分析', desc: '自动计算关键指标，生成趋势分析和预测', time: '5min', done: true, tags: ['趋势分析', 'AI预测'] },
+      { title: '报表推送', desc: '生成可视化报表，自动推送到指定渠道', time: '1min', done: false, tags: ['图表生成', '定时推送'] }
+    ]
+  },
+  {
+    icon: '💼', name: '销售赋能', count: '268x',
+    efficiency: '3x', efficiencyLabel: '转化率提升',
+    img: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&q=80',
+    desc: '智能销售助手，自动跟进线索、生成个性化方案，转化率提升 3 倍',
+    longDesc: '从线索获取到成单全流程自动化，AI 分析客户画像，生成个性化销售方案，自动跟进提醒，让销售团队专注高价值工作。',
+    metrics: [{ value: '3x', label: '转化率提升' }, { value: '自动跟进', label: '线索管理' }, { value: '个性化', label: '方案生成' }],
+    tools: ['Coze', 'Dify', 'Salesforce', '企业微信', '飞书', 'HubSpot'],
+    steps: [
+      { title: '线索智能评分', desc: 'AI 分析客户行为，自动评估线索质量和购买意向', time: '实时', done: true, tags: ['行为分析', '意向评分'] },
+      { title: '个性化触达', desc: '根据客户画像生成个性化邮件和话术，自动发送', time: '5min', done: true, tags: ['个性化', '自动发送'] },
+      { title: '跟进提醒', desc: '智能安排跟进时间，自动提醒销售人员关键节点', time: '自动', done: true, tags: ['智能提醒', 'CRM同步'] },
+      { title: '方案生成', desc: 'AI 根据客户需求自动生成定制化销售方案', time: '2min', done: false, tags: ['方案定制', 'PDF生成'] }
+    ]
+  }
+]
+
+const currentScene = computed(() => scenes[activeScene.value])
+
+const stepAnimating = ref(false)
+
+function switchScene(idx) {
+  if (activeScene.value === idx) return
+  stepAnimating.value = true
+  activeScene.value = idx
+  activeStep.value = 0
+  // 切换后重置动画状态
+  setTimeout(() => { stepAnimating.value = false }, 100)
+}
+</script>
+
+<style scoped>
+/* 背景光晕 */
+.scene-bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  pointer-events: none;
+}
+.scene-bg-orb-1 {
+  width: 600px; height: 600px;
+  top: -200px; right: -100px;
+  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
+  animation: orbFloat 14s ease-in-out infinite;
+}
+.scene-bg-orb-2 {
+  width: 500px; height: 500px;
+  bottom: -150px; left: -100px;
+  background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%);
+  animation: orbFloat 18s ease-in-out infinite reverse;
+}
+@keyframes orbFloat {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(25px, -35px); }
+}
+
+/* 渐变文字 */
+.scenes-gradient-text {
+  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #0ea5e9 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Tab 按钮 */
+.scene-tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.scene-tab-active {
+  background: linear-gradient(135deg, #7c3aed, #4f46e5);
+  color: white;
+  box-shadow: 0 8px 24px rgba(124,58,237,0.35);
+  transform: scale(1.05);
+}
+.scene-tab-inactive {
+  background: white;
+  color: #6b7280;
+  border: 1px solid #e5e7eb;
+}
+.scene-tab-inactive:hover {
+  border-color: #c4b5fd;
+  color: #7c3aed;
+  background: #faf5ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(124,58,237,0.1);
+}
+.scene-tab-icon {
+  font-size: 16px;
+  transition: transform 0.3s ease;
+}
+.scene-tab-btn:hover .scene-tab-icon {
+  transform: scale(1.2);
+}
+.scene-tab-count {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 20px;
+  background: rgba(0,0,0,0.08);
+  color: inherit;
+  opacity: 0.7;
+}
+.scene-tab-count-active {
+  background: rgba(255,255,255,0.2);
+}
+
+/* 视觉卡片 */
+.scene-visual-card {
+  border-radius: 24px;
+  overflow: hidden;
+  background: #111827;
+  min-height: 480px;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.15s ease;
+  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
+}
+.scene-img-wrapper {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+.scene-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.55;
+}
+.scene-img-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, #111827 0%, rgba(17,24,39,0.4) 50%, transparent 100%);
+}
+.scene-efficiency-badge {
+  position: absolute;
+  top: 20px; left: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(0,0,0,0.55);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 16px;
+  padding: 10px 16px;
+}
+.scene-bottom-info {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  padding: 24px;
+}
+.scene-metric-card {
+  background: rgba(255,255,255,0.08);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 14px;
+  padding: 10px;
+  text-align: center;
+}
+.scene-tools-bar {
+  background: rgba(17,24,39,0.95);
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.scene-tool-tag {
+  font-size: 11px;
+  background: rgba(255,255,255,0.08);
+  color: rgba(255,255,255,0.7);
+  border: 1px solid rgba(255,255,255,0.1);
+  padding: 4px 10px;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  animation: tagFadeIn 0.3s ease both;
+}
+.scene-tool-tag:hover {
+  background: rgba(139,92,246,0.2);
+  border-color: rgba(139,92,246,0.4);
+  color: #c4b5fd;
+}
+@keyframes tagFadeIn {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* ===== 工作流节点卡片步骤风格 ===== */
+.wf-steps-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.wf-step-row {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  animation: stepFadeIn 0.4s ease both;
+}
+@keyframes stepFadeIn {
+  from { opacity: 0; transform: translateX(-12px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* 左侧连接线 + 节点圆 */
+.wf-step-spine {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 32px;
+  padding-top: 4px;
+}
+.wf-spine-line {
+  flex: 1;
+  width: 2px;
+  min-height: 40px;
+  background: linear-gradient(180deg, rgba(124,58,237,0.3), rgba(79,70,229,0.1));
+  border-radius: 2px;
+  position: relative;
+  overflow: hidden;
+  margin: 4px 0;
+  order: 2;
+}
+.wf-spine-particle {
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: #7c3aed;
+  box-shadow: 0 0 6px #7c3aed;
+  animation: particleFall 2s linear infinite;
+}
+@keyframes particleFall {
+  0% { top: -6px; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 0.8; }
+  100% { top: 100%; opacity: 0; }
+}
+
+/* 节点圆 */
+.wf-step-node {
+  position: relative;
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  flex-shrink: 0;
+  order: 1;
+  z-index: 2;
+}
+.wf-node-done {
+  background: linear-gradient(135deg, #10B981, #059669);
+  color: white;
+  box-shadow: 0 4px 12px rgba(16,185,129,0.35);
+}
+.wf-node-done:hover {
+  transform: scale(1.15);
+  box-shadow: 0 6px 18px rgba(16,185,129,0.45);
+}
+.wf-node-pending {
+  background: linear-gradient(135deg, #7c3aed, #4f46e5);
+  color: white;
+  box-shadow: 0 4px 12px rgba(124,58,237,0.35);
+}
+.wf-node-pending:hover {
+  transform: scale(1.15);
+  box-shadow: 0 6px 18px rgba(124,58,237,0.45);
+}
+.wf-node-check { font-size: 13px; }
+.wf-node-num { font-size: 11px; }
+
+/* 节点脉冲环 */
+.wf-node-pulse {
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid rgba(124,58,237,0.4);
+  animation: nodePulse 2s ease-in-out infinite;
+}
+@keyframes nodePulse {
+  0%, 100% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1.3); opacity: 0; }
+}
+
+/* 右侧卡片 */
+.wf-step-card {
+  flex: 1;
+  border-radius: 14px;
+  border: 1px solid transparent;
+  padding: 12px 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 10px;
+}
+.wf-step-card-active {
+  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(79,70,229,0.04));
+  border-color: rgba(124,58,237,0.25);
+  box-shadow: 0 4px 20px rgba(124,58,237,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
+}
+.wf-step-card-inactive {
+  background: #fafafa;
+  border-color: #f0f0f0;
+}
+.wf-step-card-inactive:hover {
+  background: #faf5ff;
+  border-color: rgba(196,181,253,0.5);
+  box-shadow: 0 2px 12px rgba(124,58,237,0.06);
+}
+.wf-step-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  gap: 8px;
+}
+.wf-step-card-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1f2937;
+  flex: 1;
+}
+.wf-step-card-badges {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+}
+.wf-step-time-badge {
+  font-size: 10px;
+  font-weight: 600;
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 2px 6px;
+  border-radius: 100px;
+  font-family: monospace;
+}
+.wf-step-status-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: 100px;
+}
+.wf-status-done {
+  background: rgba(16,185,129,0.1);
+  color: #059669;
+}
+.wf-status-pending {
+  background: rgba(124,58,237,0.1);
+  color: #7c3aed;
+  animation: statusBlink 2s ease-in-out infinite;
+}
+@keyframes statusBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.wf-step-card-desc {
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+.wf-step-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 8px;
+}
+.wf-step-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  background: rgba(124,58,237,0.08);
+  color: #7c3aed;
+  border: 1px solid rgba(124,58,237,0.15);
+  border-radius: 100px;
+}
+
+/* CTA 按钮 */
+.scene-cta-primary {
+  background: linear-gradient(135deg, #7c3aed, #4f46e5);
+  color: white;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 14px 24px;
+  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  overflow: hidden;
+}
+.scene-cta-primary::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.scene-cta-primary:hover {
+  box-shadow: 0 12px 32px rgba(124,58,237,0.4);
+  transform: translateY(-2px);
+}
+.scene-cta-primary:hover::before { opacity: 1; }
+.scene-cta-secondary {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+.scene-cta-secondary:hover {
+  border-color: #c4b5fd;
+  color: #7c3aed;
+  background: #faf5ff;
+}
+
+/* 过渡动画 */
+.scene-zoom-enter-active { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
+.scene-zoom-leave-active { transition: all 0.3s ease; }
+.scene-zoom-enter-from { opacity: 0; transform: scale(1.08); }
+.scene-zoom-leave-to { opacity: 0; transform: scale(0.95); }
+
+.text-slide-enter-active { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+.text-slide-leave-active { transition: all 0.25s ease; }
+.text-slide-enter-from { opacity: 0; transform: translateY(12px); }
+.text-slide-leave-to { opacity: 0; transform: translateY(-8px); }
+
+.steps-fade-enter-active { transition: all 0.4s ease; }
+.steps-fade-leave-active { transition: all 0.2s ease; }
+.steps-fade-enter-from { opacity: 0; }
+.steps-fade-leave-to { opacity: 0; }
+
+.tools-fade-enter-active { transition: all 0.3s ease; }
+.tools-fade-leave-active { transition: all 0.2s ease; }
+.tools-fade-enter-from { opacity: 0; }
+.tools-fade-leave-to { opacity: 0; }
+
+.tags-expand-enter-active { transition: all 0.3s ease; }
+.tags-expand-leave-active { transition: all 0.2s ease; }
+.tags-expand-enter-from { opacity: 0; transform: translateY(-4px); }
+.tags-expand-leave-to { opacity: 0; transform: translateY(-4px); }
+
+/* 滚动动画 */
+.reveal-up {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+.reveal-up.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ===== 响应式 ===== */
+
+/* 标题响应式 */
+.section-scenes h2 {
+  font-size: clamp(2rem, 5vw, 3.75rem);
+}
+
+/* 平板（≤1024px）*/
+@media (max-width: 1024px) {
+  .section-scenes { padding-top: 5rem; padding-bottom: 5rem; }
+  .scene-visual-card { min-height: 380px; }
+}
+
+/* 手机横屏 / 小平板（≤768px）*/
+@media (max-width: 768px) {
+  .section-scenes { padding-top: 4rem; padding-bottom: 4rem; }
+  .section-scenes .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
+  .scene-tab-btn { padding: 8px 14px; font-size: 13px; }
+  .scene-visual-card { min-height: 300px; }
+  .scene-efficiency-badge { top: 12px; left: 12px; padding: 8px 12px; }
+  .scene-efficiency-badge .text-3xl { font-size: 1.5rem; }
+  .scene-bottom-info { padding: 16px; }
+  .scene-bottom-info h3 { font-size: 1.25rem; }
+  .scene-bottom-info p { font-size: 0.8rem; }
+  .scene-metric-card { padding: 8px 6px; }
+  .scene-metric-card .text-lg { font-size: 1rem; }
+  .scene-tools-bar { padding: 10px 14px; }
+  .scene-step-item { padding: 10px 12px; gap: 10px; }
+  .scene-step-num { width: 30px; height: 30px; font-size: 12px; }
+  .scene-cta-primary, .scene-cta-secondary { padding: 11px 18px; font-size: 13px; }
+}
+
+/* 手机竖屏（≤480px）*/
+@media (max-width: 480px) {
+  .section-scenes { padding-top: 3rem; padding-bottom: 3rem; }
+  .scene-tab-btn { padding: 7px 11px; font-size: 12px; gap: 5px; }
+  .scene-tab-icon { font-size: 13px; }
+  .scene-tab-count { display: none; }
+  .scene-visual-card { min-height: 240px; }
+  .scene-efficiency-badge { display: none; }
+  .scene-bottom-info { padding: 12px; }
+  .scene-bottom-info h3 { font-size: 1.1rem; }
+  .scene-bottom-info .grid-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
+  .scene-step-item { padding: 8px 10px; gap: 8px; }
+  .scene-step-num { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
+  .scene-cta-primary, .scene-cta-secondary { padding: 10px 14px; font-size: 12px; }
+}
+
+/* 极小屏（≤360px）*/
+@media (max-width: 360px) {
+  .scene-tab-btn { padding: 6px 9px; font-size: 11px; }
+  .scene-visual-card { min-height: 200px; }
+  .scene-step-num { width: 24px; height: 24px; font-size: 10px; }
+}
+</style>

src/pages/Home/SectionStats.vue

@@ -0,0 +1,224 @@
+<template>
+  <section class="section-stats relative overflow-hidden py-20 lg:py-28" ref="sectionRef">
+    <!-- 深色渐变背景 -->
+    <div class="absolute inset-0" style="background: linear-gradient(135deg, #0f0c29 0%, #1a1040 40%, #0d1b3e 70%, #0a0a1a 100%);"></div>
+    <!-- 网格纹理 -->
+    <div class="absolute inset-0 pointer-events-none" style="background-image: linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px); background-size: 48px 48px;"></div>
+    <!-- 动态光晕 -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden">
+      <div class="stats-orb stats-orb-1"></div>
+      <div class="stats-orb stats-orb-2"></div>
+      <div class="stats-orb stats-orb-3"></div>
+    </div>
+    <!-- 顶部彩虹线 -->
+    <div class="absolute top-0 left-0 right-0 h-px" style="background: linear-gradient(90deg, transparent 0%, #8b5cf6 20%, #3b82f6 50%, #06b6d4 80%, transparent 100%);"></div>
+
+    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- 标题 -->
+      <div class="text-center mb-12 lg:mb-20 reveal-up" :class="{ 'is-visible': isVisible }">
+        <span class="inline-flex items-center gap-2 border text-xs font-bold px-4 py-1.5 rounded-full mb-5 tracking-widest uppercase"
+          style="background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.4); color: #a78bfa;">
+          <span class="w-1.5 h-1.5 rounded-full animate-pulse" style="background: #a78bfa;"></span>
+          实时数据
+        </span>
+        <h2 class="stats-heading text-white mb-4 leading-tight">
+          数据流转，<span class="stats-gradient-text">毫秒可见</span>
+        </h2>
+        <p class="text-base lg:text-lg max-w-2xl mx-auto" style="color: rgba(255,255,255,0.5);">每一次工作流执行，都在为你创造价值</p>
+      </div>
+
+      <!-- 四大数据卡片 -->
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-5 mb-6 lg:mb-10">
+        <div
+          v-for="(stat, idx) in stats"
+          :key="stat.label"
+          class="stat-card reveal-up"
+          :class="{ 'is-visible': isVisible }"
+          :style="{ transitionDelay: `${0.1 + idx * 0.1}s` }"
+          @mouseenter="hoveredStat = idx"
+          @mouseleave="hoveredStat = null"
+        >
+          <div class="stat-card-top-line" :style="{ background: stat.lineGradient }"></div>
+          <div class="stat-card-glow" :style="{ background: stat.glowColor, opacity: hoveredStat === idx ? 1 : 0 }"></div>
+          <div class="stat-growth-badge">{{ stat.growth }}</div>
+          <div class="stat-icon" :class="{ 'stat-icon-hover': hoveredStat === idx }">{{ stat.icon }}</div>
+          <div class="stat-number" :style="{ color: stat.numColor }">{{ isVisible ? stat.displayNum : '0' }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+          <div class="stat-sub hidden sm:block">{{ stat.sub }}</div>
+          <div class="stat-progress-track">
+            <div class="stat-progress-fill"
+              :style="{ width: isVisible ? stat.progress : '0%', background: stat.lineGradient, transitionDelay: `${0.5 + idx * 0.1}s` }">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部：系统状态 + 执行路径 -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-5 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.5s;">
+        <!-- 系统状态面板 -->
+        <div class="glass-panel">
+          <div class="flex items-center justify-between mb-5">
+            <h3 class="font-bold text-white text-sm sm:text-base">系统运行状态</h3>
+            <span class="flex items-center gap-1.5 text-xs font-medium px-3 py-1 rounded-full"
+              style="background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3);">
+              <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>
+              正常
+            </span>
+          </div>
+          <div class="space-y-4">
+            <div v-for="metric in systemMetrics" :key="metric.label">
+              <div class="flex items-center gap-2 mb-1.5">
+                <span class="text-sm">{{ metric.icon }}</span>
+                <span class="text-xs sm:text-sm flex-1" style="color: rgba(255,255,255,0.6);">{{ metric.label }}</span>
+                <span class="text-xs sm:text-sm font-bold" :style="{ color: metric.numColor }">{{ metric.value }}</span>
+              </div>
+              <div class="h-1.5 rounded-full overflow-hidden" style="background: rgba(255,255,255,0.08);">
+                <div class="h-full rounded-full transition-all duration-1500 ease-out"
+                  :style="{ width: isVisible ? metric.width : '0%', background: metric.barGradient }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 工作流执行路径 -->
+        <div class="glass-panel">
+          <div class="flex items-center justify-between mb-5">
+            <h3 class="font-bold text-white text-sm sm:text-base">典型工作流执行路径</h3>
+            <span class="text-xs font-medium px-3 py-1 rounded-full"
+              style="background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3);">实时运行中</span>
+          </div>
+          <div class="flow-steps-row">
+            <div v-for="(step, idx) in flowSteps" :key="step.label" class="flex items-center gap-1 sm:gap-2">
+              <div class="flex flex-col items-center">
+                <div class="flow-step-node hover:scale-110 transition-transform duration-300"
+                  :style="{ background: step.bg, borderColor: step.border }">
+                  {{ step.icon }}
+                </div>
+                <span class="text-xs mt-1 font-medium text-center" style="color: rgba(255,255,255,0.5);">{{ step.label }}</span>
+                <span class="text-xs font-bold" :style="{ color: step.timeColor }">{{ step.time }}</span>
+              </div>
+              <svg v-if="idx < flowSteps.length - 1" class="flow-arrow flex-shrink-0 mb-5" fill="none" stroke="rgba(255,255,255,0.2)" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+          <div class="mt-4 flex items-center justify-between p-3 rounded-2xl"
+            style="background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2);">
+            <span class="text-xs sm:text-sm" style="color: rgba(255,255,255,0.6);">总执行耗时</span>
+            <span class="text-xs sm:text-sm font-black text-emerald-400">1.25s ✓ 完成</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isVisible = ref(false)
+const sectionRef = ref(null)
+const hoveredStat = ref(null)
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
+    { threshold: 0.1 }
+  )
+  if (sectionRef.value) observer.observe(sectionRef.value)
+})
+
+const stats = [
+  { icon: '🌍', label: '全球用户', sub: '来自 120+ 国家和地区', displayNum: '50,000+', growth: '↑ 23%', numColor: '#c084fc', lineGradient: 'linear-gradient(90deg, #8b5cf6, #a78bfa)', glowColor: 'radial-gradient(circle at 50% 0%, rgba(139,92,246,0.3) 0%, transparent 70%)', progress: '75%' },
+  { icon: '⚡', label: '工作流执行', sub: '累计自动化执行次数', displayNum: '1,200万+', growth: '↑ 41%', numColor: '#60a5fa', lineGradient: 'linear-gradient(90deg, #3b82f6, #60a5fa)', glowColor: 'radial-gradient(circle at 50% 0%, rgba(59,130,246,0.3) 0%, transparent 70%)', progress: '88%' },
+  { icon: '⏱️', label: '节省工时', sub: '用户累计节省的人工时间', displayNum: '320万小时', growth: '↑ 58%', numColor: '#22d3ee', lineGradient: 'linear-gradient(90deg, #06b6d4, #22d3ee)', glowColor: 'radial-gradient(circle at 50% 0%, rgba(6,182,212,0.3) 0%, transparent 70%)', progress: '92%' },
+  { icon: '📦', label: '工作流模板', sub: '社区贡献的精选模板', displayNum: '8,000+', growth: '↑ 35%', numColor: '#34d399', lineGradient: 'linear-gradient(90deg, #10b981, #34d399)', glowColor: 'radial-gradient(circle at 50% 0%, rgba(16,185,129,0.3) 0%, transparent 70%)', progress: '65%' }
+]
+
+const systemMetrics = [
+  { icon: '✅', label: '在线率', value: '99.9%', width: '99%', barGradient: 'linear-gradient(90deg, #10b981, #34d399)', numColor: '#34d399' },
+  { icon: '📈', label: '流量峰值', value: '60%', width: '60%', barGradient: 'linear-gradient(90deg, #3b82f6, #60a5fa)', numColor: '#60a5fa' },
+  { icon: '⚡', label: '平均响应时间', value: '180ms', width: '82%', barGradient: 'linear-gradient(90deg, #8b5cf6, #a78bfa)', numColor: '#a78bfa' },
+  { icon: '🔄', label: '今日执行次数', value: '15,750次', width: '78%', barGradient: 'linear-gradient(90deg, #f59e0b, #fbbf24)', numColor: '#fbbf24' }
+]
+
+const flowSteps = [
+  { icon: '📥', label: '数据输入', time: '0.1s', bg: 'rgba(139,92,246,0.15)', border: 'rgba(139,92,246,0.4)', timeColor: '#a78bfa' },
+  { icon: '🔀', label: '条件判断', time: '0.2s', bg: 'rgba(59,130,246,0.15)', border: 'rgba(59,130,246,0.4)', timeColor: '#60a5fa' },
+  { icon: '🤖', label: 'AI 处理', time: '0.8s', bg: 'rgba(99,102,241,0.15)', border: 'rgba(99,102,241,0.4)', timeColor: '#818cf8' },
+  { icon: '📊', label: '数据分析', time: '0.1s', bg: 'rgba(6,182,212,0.15)', border: 'rgba(6,182,212,0.4)', timeColor: '#22d3ee' },
+  { icon: '📤', label: '多端输出', time: '0.05s', bg: 'rgba(16,185,129,0.15)', border: 'rgba(16,185,129,0.4)', timeColor: '#34d399' }
+]
+</script>
+
+<style scoped>
+.stats-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
+.stats-orb-1 { width: 500px; height: 500px; top: -100px; left: -100px; background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, transparent 70%); animation: orbFloat 12s ease-in-out infinite; }
+.stats-orb-2 { width: 400px; height: 400px; top: 50%; right: -80px; background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%); animation: orbFloat 15s ease-in-out infinite reverse; }
+.stats-orb-3 { width: 350px; height: 350px; bottom: -80px; left: 40%; background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%); animation: orbFloat 10s ease-in-out infinite; }
+@keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -30px); } }
+
+/* 响应式标题 */
+.stats-heading {
+  font-size: clamp(2rem, 5vw, 3.75rem);
+  font-weight: 900;
+  letter-spacing: -0.02em;
+}
+
+.stats-gradient-text {
+  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #22d3ee 100%);
+  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+}
+
+/* 数据卡片 */
+.stat-card {
+  position: relative;
+  padding: 16px 14px 14px;
+  border-radius: 18px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(12px);
+}
+.stat-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
+.stat-card-top-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 18px 18px 0 0; }
+.stat-card-glow { position: absolute; top: 0; left: 0; right: 0; height: 100px; pointer-events: none; transition: opacity 0.4s ease; }
+.stat-growth-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
+.stat-icon { font-size: clamp(20px, 3vw, 28px); margin-bottom: 10px; display: inline-block; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.stat-icon-hover { transform: scale(1.2) rotate(-5deg); }
+.stat-number { font-size: clamp(18px, 3vw, 28px); font-weight: 900; margin-bottom: 3px; line-height: 1.1; }
+.stat-label { color: rgba(255,255,255,0.85); font-weight: 700; font-size: clamp(11px, 1.5vw, 13px); margin-bottom: 2px; }
+.stat-sub { color: rgba(255,255,255,0.35); font-size: 11px; margin-bottom: 12px; }
+.stat-progress-track { height: 3px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; margin-top: 10px; }
+.stat-progress-fill { height: 100%; border-radius: 99px; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* 玻璃面板 */
+.glass-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(16px); border-radius: 20px; padding: 20px; }
+
+/* 流程步骤行 */
+.flow-steps-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; }
+.flow-step-node { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid; }
+.flow-arrow { width: 14px; height: 14px; margin-bottom: 20px; }
+
+/* 滚动动画 */
+.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
+.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
+.duration-1500 { transition-duration: 1500ms; }
+
+/* ---- 响应式 ---- */
+@media (max-width: 640px) {
+  .stat-card { padding: 14px 12px 12px; }
+  .flow-step-node { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }
+  .flow-arrow { width: 10px; height: 10px; }
+  .glass-panel { padding: 16px; }
+}
+@media (max-width: 480px) {
+  .stat-number { font-size: 16px; }
+  .stat-growth-badge { font-size: 9px; padding: 1px 6px; }
+  .flow-steps-row { gap: 2px; }
+  .flow-step-node { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
+  .flow-arrow { width: 8px; height: 8px; }
+}
+</style>

src/pages/Home/SectionWhatIsWorkflow.vue

@@ -0,0 +1,193 @@
+<template>
+  <section class="section-what-is relative overflow-hidden py-20">
+    <!-- 背景 -->
+    <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, rgba(245,243,255,0) 0%, rgba(237,233,254,0.5) 50%, rgba(245,243,255,0) 100%);"></div>
+
+    <div class="relative z-10 max-w-6xl mx-auto px-6">
+      <!-- 标题 -->
+      <div class="text-center mb-14 observe-fade">
+        <span class="inline-flex items-center gap-2 bg-violet-100 border border-violet-200 text-violet-700 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
+          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
+          新手指南
+        </span>
+        <h2 class="text-3xl lg:text-4xl font-black text-gray-900 mb-3">
+          什么是 <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">AI 工作流</span>？
+        </h2>
+        <p class="text-gray-500 text-base max-w-xl mx-auto">3 步理解 AI 工作流的核心价值，让重复性工作彻底自动化</p>
+      </div>
+
+      <!-- 3 步说明 -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+        <div v-for="(step, idx) in steps" :key="step.title"
+          class="step-card observe-fade group"
+          :style="{ transitionDelay: idx * 120 + 'ms' }">
+          <!-- 步骤号 -->
+          <div class="step-number">{{ idx + 1 }}</div>
+          <!-- 图标 -->
+          <div class="step-icon-wrap" :style="{ background: step.iconBg }">
+            <span class="text-3xl">{{ step.icon }}</span>
+          </div>
+          <!-- 内容 -->
+          <h3 class="text-gray-900 font-bold text-lg mb-2">{{ step.title }}</h3>
+          <p class="text-gray-500 text-sm leading-relaxed">{{ step.desc }}</p>
+          <!-- 示例标签 -->
+          <div class="mt-4 flex flex-wrap gap-2">
+            <span v-for="tag in step.examples" :key="tag"
+              class="text-xs px-2.5 py-1 rounded-full font-medium"
+              :style="{ background: step.tagBg, color: step.tagColor }">
+              {{ tag }}
+            </span>
+          </div>
+          <!-- 连接箭头（非最后一个） -->
+          <div v-if="idx < steps.length - 1" class="step-arrow">→</div>
+        </div>
+      </div>
+
+      <!-- 底部 CTA -->
+      <div class="text-center observe-fade">
+        <p class="text-gray-400 text-sm mb-4">已有 <strong class="text-violet-600">50,000+</strong> 用户通过暴米AI实现工作自动化</p>
+        <button class="inline-flex items-center gap-2 bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-bold px-8 py-3.5 rounded-2xl shadow-lg shadow-violet-200 hover:shadow-violet-300 hover:-translate-y-0.5 transition-all duration-300">
+          <span>免费体验工作流</span>
+          <span class="text-lg">→</span>
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+
+const steps = [
+  {
+    icon: '🎯',
+    title: '定义触发条件',
+    desc: '设置工作流的启动时机——可以是定时任务、Webhook 回调、表单提交，或任何外部事件。',
+    iconBg: 'linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.1))',
+    examples: ['定时触发', 'Webhook', '表单提交', '邮件接收'],
+    tagBg: 'rgba(139,92,246,0.1)',
+    tagColor: '#7c3aed'
+  },
+  {
+    icon: '⚡',
+    title: '连接 AI 节点',
+    desc: '拖拽连接 GPT、Claude 等 AI 模型节点，配合数据处理、条件判断、循环等逻辑节点，构建智能管道。',
+    iconBg: 'linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,191,36,0.1))',
+    examples: ['GPT-4', 'Claude', '数据处理', '条件分支'],
+    tagBg: 'rgba(245,158,11,0.1)',
+    tagColor: '#d97706'
+  },
+  {
+    icon: '🚀',
+    title: '自动执行输出',
+    desc: '工作流自动运行，将结果推送到微信、飞书、数据库、邮件等任意目标，全程无需人工干预。',
+    iconBg: 'linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.1))',
+    examples: ['微信推送', '飞书通知', '数据库写入', '邮件发送'],
+    tagBg: 'rgba(34,197,94,0.1)',
+    tagColor: '#059669'
+  }
+]
+
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('in-view')
+      }
+    })
+  }, { threshold: 0.15 })
+  document.querySelectorAll('.section-what-is .observe-fade').forEach(el => observer.observe(el))
+})
+</script>
+
+<style scoped>
+.section-what-is {
+  background: #fff;
+}
+
+/* 步骤卡片 */
+.step-card {
+  position: relative;
+  background: #fff;
+  border: 1px solid rgba(139, 92, 246, 0.12);
+  border-radius: 24px;
+  padding: 32px 28px;
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
+}
+.step-card:hover {
+  border-color: rgba(139, 92, 246, 0.35);
+  transform: translateY(-6px);
+  box-shadow: 0 16px 40px rgba(139, 92, 246, 0.12);
+}
+.step-number {
+  position: absolute;
+  top: -14px;
+  left: 28px;
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, #7c3aed, #6366f1);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 900;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+}
+.step-icon-wrap {
+  width: 72px;
+  height: 72px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  transition: transform 0.3s ease;
+}
+.step-card:hover .step-icon-wrap {
+  transform: scale(1.08) rotate(-3deg);
+}
+.step-arrow {
+  position: absolute;
+  right: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 24px;
+  color: rgba(139, 92, 246, 0.4);
+  z-index: 10;
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .step-arrow {
+    display: block;
+  }
+}
+
+/* 滚动入场动画 */
+.observe-fade {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.observe-fade.in-view {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 响应式 */
+.section-what-is h2 {
+  font-size: clamp(1.6rem, 4vw, 2.5rem);
+}
+@media (max-width: 768px) {
+  .section-what-is { padding-top: 3rem; padding-bottom: 3rem; }
+  .step-card { padding: 24px 20px; }
+  .step-icon-wrap { width: 56px; height: 56px; }
+}
+@media (max-width: 480px) {
+  .section-what-is { padding-top: 2.5rem; padding-bottom: 2.5rem; }
+  .step-card { padding: 20px 16px; }
+}
+</style>

src/pages/Home/SectionWorkflowDemo.vue

@@ -0,0 +1,913 @@
+<template>
+  <section class="wf-demo-section" ref="sectionRef">
+    <!-- 背景网格 -->
+    <div class="wf-bg-grid"></div>
+    <!-- 背景光晕 -->
+    <div class="wf-bg-glow wf-bg-glow-1"></div>
+    <div class="wf-bg-glow wf-bg-glow-2"></div>
+
+    <div class="wf-demo-inner">
+      <!-- 标题区 -->
+      <div class="wf-demo-header" :class="{ visible: headerVisible }">
+        <div class="wf-badge">
+          <span class="wf-badge-dot"></span>
+          <span>实时工作流演示</span>
+        </div>
+        <h2 class="wf-demo-title">
+          看见 AI 如何
+          <span class="wf-gradient-text">自动完成你的工作</span>
+        </h2>
+        <p class="wf-demo-desc">每一个节点都是一个智能决策，每一条连线都是数据的流动，工作流让复杂变得简单</p>
+      </div>
+
+      <!-- 主演示区 -->
+      <div class="wf-canvas-wrap" :class="{ visible: canvasVisible }">
+        <!-- 工具栏模拟 -->
+        <div class="wf-toolbar">
+          <div class="wf-toolbar-left">
+            <div class="wf-toolbar-dot red"></div>
+            <div class="wf-toolbar-dot yellow"></div>
+            <div class="wf-toolbar-dot green"></div>
+            <span class="wf-toolbar-title">workflow-canvas.baomiai.com</span>
+          </div>
+          <div class="wf-toolbar-right">
+            <div class="wf-run-badge">
+              <span class="wf-run-dot"></span>
+              实时运行中
+            </div>
+          </div>
+        </div>
+
+        <!-- 画布区域 -->
+        <div class="wf-canvas">
+          <!-- 节点行布局 -->
+          <div class="wf-flow-row">
+
+            <!-- 节点1：触发器 -->
+            <div class="wf-node wf-node-trigger" :class="{ pulse: activeNode === 0 }" @mouseenter="activeNode = 0" @mouseleave="activeNode = -1">
+              <div class="wf-node-header" style="background: linear-gradient(135deg, #7C3AED, #8B5CF6)">
+                <span class="wf-node-icon">⚡</span>
+                <span class="wf-node-type">触发器</span>
+              </div>
+              <div class="wf-node-body">
+                <div class="wf-node-title">新内容请求</div>
+                <div class="wf-node-meta">
+                  <span class="wf-node-status running">● 监听中</span>
+                  <span class="wf-node-time">0.1s</span>
+                </div>
+                <div class="wf-node-tags">
+                  <span class="wf-tag">Webhook</span>
+                  <span class="wf-tag">HTTP</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 连线1 -->
+            <div class="wf-connector">
+              <div class="wf-connector-line"></div>
+              <div class="wf-particle wf-particle-1"></div>
+              <div class="wf-particle wf-particle-2"></div>
+              <div class="wf-connector-arrow">›</div>
+            </div>
+
+            <!-- 节点2：AI 处理核心 -->
+            <div class="wf-node wf-node-ai" :class="{ pulse: activeNode === 1 }" @mouseenter="activeNode = 1" @mouseleave="activeNode = -1">
+              <div class="wf-node-header" style="background: linear-gradient(135deg, #2563EB, #3B82F6)">
+                <span class="wf-node-icon">🤖</span>
+                <span class="wf-node-type">AI 引擎</span>
+              </div>
+              <div class="wf-node-body">
+                <div class="wf-node-title">GPT-4 处理</div>
+                <div class="wf-node-meta">
+                  <span class="wf-node-status processing">◉ 处理中</span>
+                  <span class="wf-node-time">0.8s</span>
+                </div>
+                <div class="wf-node-tags">
+                  <span class="wf-tag">GPT-4</span>
+                  <span class="wf-tag">n8n</span>
+                </div>
+                <div class="wf-progress-bar">
+                  <div class="wf-progress-fill"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 连线2（分叉） -->
+            <div class="wf-fork-connector">
+              <div class="wf-fork-line-top"></div>
+              <div class="wf-fork-line-bottom"></div>
+              <div class="wf-fork-particle-top"></div>
+              <div class="wf-fork-particle-bottom"></div>
+            </div>
+
+            <!-- 节点3+4 纵向排列 -->
+            <div class="wf-node-column">
+              <!-- 节点3：内容生成 -->
+              <div class="wf-node wf-node-content" :class="{ pulse: activeNode === 2 }" @mouseenter="activeNode = 2" @mouseleave="activeNode = -1">
+                <div class="wf-node-header" style="background: linear-gradient(135deg, #059669, #10B981)">
+                  <span class="wf-node-icon">✍️</span>
+                  <span class="wf-node-type">内容生成</span>
+                </div>
+                <div class="wf-node-body">
+                  <div class="wf-node-title">文章批量生产</div>
+                  <div class="wf-node-meta">
+                    <span class="wf-node-status done">✓ 已完成</span>
+                    <span class="wf-node-time">0.4s</span>
+                  </div>
+                  <div class="wf-node-tags">
+                    <span class="wf-tag">Markdown</span>
+                    <span class="wf-tag">SEO</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 节点4：数据分析 -->
+              <div class="wf-node wf-node-data" :class="{ pulse: activeNode === 3 }" @mouseenter="activeNode = 3" @mouseleave="activeNode = -1">
+                <div class="wf-node-header" style="background: linear-gradient(135deg, #D97706, #F59E0B)">
+                  <span class="wf-node-icon">📊</span>
+                  <span class="wf-node-type">数据分析</span>
+                </div>
+                <div class="wf-node-body">
+                  <div class="wf-node-title">效果追踪</div>
+                  <div class="wf-node-meta">
+                    <span class="wf-node-status running">● 分析中</span>
+                    <span class="wf-node-time">0.3s</span>
+                  </div>
+                  <div class="wf-node-tags">
+                    <span class="wf-tag">Analytics</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 连线3（合并） -->
+            <div class="wf-merge-connector">
+              <div class="wf-merge-line-top"></div>
+              <div class="wf-merge-line-bottom"></div>
+              <div class="wf-merge-particle-top"></div>
+              <div class="wf-merge-particle-bottom"></div>
+            </div>
+
+            <!-- 节点5：多端发布 -->
+            <div class="wf-node wf-node-publish" :class="{ pulse: activeNode === 4 }" @mouseenter="activeNode = 4" @mouseleave="activeNode = -1">
+              <div class="wf-node-header" style="background: linear-gradient(135deg, #0F172A, #1E293B)">
+                <span class="wf-node-icon">🚀</span>
+                <span class="wf-node-type">多端发布</span>
+              </div>
+              <div class="wf-node-body">
+                <div class="wf-node-title">一键分发</div>
+                <div class="wf-node-meta">
+                  <span class="wf-node-status done">✓ 已发布</span>
+                  <span class="wf-node-time">0.05s</span>
+                </div>
+                <div class="wf-node-platforms">
+                  <span class="wf-platform-dot" style="background:#07C160" title="微信"></span>
+                  <span class="wf-platform-dot" style="background:#1677FF" title="飞书"></span>
+                  <span class="wf-platform-dot" style="background:#FF6900" title="抖音"></span>
+                  <span class="wf-platform-dot" style="background:#FE2C55" title="小红书"></span>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <!-- 执行统计浮层 -->
+          <div class="wf-exec-stats">
+            <div class="wf-exec-item">
+              <span class="wf-exec-label">总耗时</span>
+              <span class="wf-exec-value">1.65s</span>
+            </div>
+            <div class="wf-exec-divider"></div>
+            <div class="wf-exec-item">
+              <span class="wf-exec-label">节点数</span>
+              <span class="wf-exec-value">5</span>
+            </div>
+            <div class="wf-exec-divider"></div>
+            <div class="wf-exec-item success">
+              <span class="wf-exec-label">状态</span>
+              <span class="wf-exec-value">✓ 成功</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部特性卡片 -->
+      <div class="wf-features" :class="{ visible: featuresVisible }">
+        <div
+          class="wf-feature-card"
+          v-for="(f, i) in features"
+          :key="i"
+          :style="{ transitionDelay: (i * 0.1) + 's' }"
+        >
+          <div class="wf-feature-icon" :style="{ background: f.bg }">{{ f.icon }}</div>
+          <div class="wf-feature-text">
+            <div class="wf-feature-title">{{ f.title }}</div>
+            <div class="wf-feature-desc">{{ f.desc }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const sectionRef = ref(null)
+const activeNode = ref(-1)
+const headerVisible = ref(false)
+const canvasVisible = ref(false)
+const featuresVisible = ref(false)
+
+const features = [
+  { icon: '⚡', bg: 'linear-gradient(135deg,#7C3AED,#8B5CF6)', title: '毫秒级触发', desc: 'Webhook / 定时 / 事件驱动，响应延迟 < 100ms' },
+  { icon: '🔀', bg: 'linear-gradient(135deg,#2563EB,#3B82F6)', title: '条件分支路由', desc: '支持 if/else、switch、并行分支等复杂逻辑' },
+  { icon: '🤖', bg: 'linear-gradient(135deg,#059669,#10B981)', title: 'AI 节点内置', desc: 'GPT-4、Claude、Gemini 一键接入，无需配置' },
+  { icon: '📡', bg: 'linear-gradient(135deg,#D97706,#F59E0B)', title: '400+ 集成节点', desc: '覆盖主流 SaaS、数据库、消息平台' },
+  { icon: '📊', bg: 'linear-gradient(135deg,#0F172A,#334155)', title: '实时执行监控', desc: '每次执行全链路追踪，错误自动告警' },
+  { icon: '🔒', bg: 'linear-gradient(135deg,#BE185D,#EC4899)', title: '企业级安全', desc: '私有化部署、数据加密、权限管控' },
+]
+
+let observer = null
+
+onMounted(() => {
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        setTimeout(() => { headerVisible.value = true }, 100)
+        setTimeout(() => { canvasVisible.value = true }, 400)
+        setTimeout(() => { featuresVisible.value = true }, 800)
+      }
+    })
+  }, { threshold: 0.1 })
+  if (sectionRef.value) observer.observe(sectionRef.value)
+})
+
+onUnmounted(() => {
+  if (observer) observer.disconnect()
+})
+</script>
+
+<style scoped>
+/* ===== 区块整体 ===== */
+.wf-demo-section {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, #0a0a1a 0%, #0d0d2b 40%, #0a1628 70%, #0d0a1a 100%);
+  padding: 100px 0 80px;
+}
+
+/* 背景网格 */
+.wf-bg-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px);
+  background-size: 40px 40px;
+  pointer-events: none;
+}
+
+/* 背景光晕 */
+.wf-bg-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  pointer-events: none;
+}
+.wf-bg-glow-1 {
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
+  top: -100px;
+  left: -100px;
+}
+.wf-bg-glow-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
+  bottom: -80px;
+  right: -80px;
+}
+
+/* ===== 内容容器 ===== */
+.wf-demo-inner {
+  position: relative;
+  z-index: 1;
+  max-width: 1300px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* ===== 标题区 ===== */
+.wf-demo-header {
+  text-align: center;
+  margin-bottom: 56px;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.7s ease, transform 0.7s ease;
+}
+.wf-demo-header.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.wf-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(139,92,246,0.15);
+  border: 1px solid rgba(139,92,246,0.3);
+  border-radius: 999px;
+  padding: 6px 16px;
+  color: #a78bfa;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+.wf-badge-dot {
+  width: 7px;
+  height: 7px;
+  background: #8b5cf6;
+  border-radius: 50%;
+  animation: badge-pulse 2s ease-in-out infinite;
+}
+@keyframes badge-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.4); }
+}
+
+.wf-demo-title {
+  font-size: clamp(28px, 4vw, 48px);
+  font-weight: 800;
+  color: #f1f5f9;
+  line-height: 1.2;
+  margin-bottom: 16px;
+}
+.wf-gradient-text {
+  background: linear-gradient(135deg, #8b5cf6, #3b82f6, #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.wf-demo-desc {
+  font-size: 16px;
+  color: #94a3b8;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.7;
+}
+
+/* ===== 画布包裹 ===== */
+.wf-canvas-wrap {
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+.wf-canvas-wrap.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 工具栏 */
+.wf-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: rgba(255,255,255,0.04);
+  border-bottom: 1px solid rgba(255,255,255,0.07);
+}
+.wf-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wf-toolbar-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+.wf-toolbar-dot.red { background: #ef4444; }
+.wf-toolbar-dot.yellow { background: #f59e0b; }
+.wf-toolbar-dot.green { background: #10b981; }
+.wf-toolbar-title {
+  font-size: 12px;
+  color: #64748b;
+  margin-left: 8px;
+}
+.wf-run-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(16,185,129,0.1);
+  border: 1px solid rgba(16,185,129,0.25);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: #34d399;
+}
+.wf-run-dot {
+  width: 6px;
+  height: 6px;
+  background: #10b981;
+  border-radius: 50%;
+  animation: run-pulse 1.5s ease-in-out infinite;
+}
+@keyframes run-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ===== 画布内容 ===== */
+.wf-canvas {
+  padding: 40px 32px 32px;
+  position: relative;
+}
+
+/* ===== 流程行布局 ===== */
+.wf-flow-row {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  justify-content: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding-bottom: 8px;
+}
+
+/* ===== 节点卡片 ===== */
+.wf-node {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 14px;
+  overflow: hidden;
+  width: 160px;
+  flex-shrink: 0;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  cursor: pointer;
+}
+.wf-node:hover,
+.wf-node.pulse {
+  transform: translateY(-4px) scale(1.02);
+  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 20px rgba(139,92,246,0.2);
+  border-color: rgba(139,92,246,0.4);
+}
+.wf-node-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+}
+.wf-node-icon {
+  font-size: 16px;
+}
+.wf-node-type {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255,255,255,0.9);
+  letter-spacing: 0.5px;
+}
+.wf-node-body {
+  padding: 10px 12px;
+}
+.wf-node-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #e2e8f0;
+  margin-bottom: 6px;
+}
+.wf-node-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.wf-node-status {
+  font-size: 10px;
+  font-weight: 500;
+}
+.wf-node-status.running { color: #34d399; }
+.wf-node-status.processing { color: #60a5fa; }
+.wf-node-status.done { color: #a78bfa; }
+.wf-node-time {
+  font-size: 10px;
+  color: #64748b;
+  font-family: monospace;
+}
+.wf-node-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.wf-tag {
+  font-size: 9px;
+  background: rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: #94a3b8;
+}
+
+/* 进度条 */
+.wf-progress-bar {
+  height: 3px;
+  background: rgba(255,255,255,0.1);
+  border-radius: 2px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+.wf-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+  border-radius: 2px;
+  animation: progress-run 2s ease-in-out infinite;
+}
+@keyframes progress-run {
+  0% { width: 0%; }
+  70% { width: 100%; }
+  100% { width: 100%; }
+}
+
+/* 平台点 */
+.wf-node-platforms {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+.wf-platform-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* ===== 连线：直线 ===== */
+.wf-connector {
+  position: relative;
+  width: 60px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wf-connector-line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(139,92,246,0.6), rgba(59,130,246,0.6));
+  transform: translateY(-50%);
+}
+.wf-connector-arrow {
+  position: relative;
+  z-index: 1;
+  color: #60a5fa;
+  font-size: 20px;
+  line-height: 1;
+  margin-left: 36px;
+}
+
+/* 粒子流动 */
+.wf-particle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: radial-gradient(circle, #a78bfa, #8b5cf6);
+  box-shadow: 0 0 8px #8b5cf6;
+  animation: particle-flow 2s linear infinite;
+}
+.wf-particle-1 { animation-delay: 0s; }
+.wf-particle-2 { animation-delay: 1s; }
+
+@keyframes particle-flow {
+  0% { left: 0; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { left: calc(100% - 8px); opacity: 0; }
+}
+
+/* ===== 分叉连线 ===== */
+.wf-fork-connector {
+  position: relative;
+  width: 50px;
+  flex-shrink: 0;
+  height: 200px;
+  display: flex;
+  align-items: center;
+}
+.wf-fork-line-top,
+.wf-fork-line-bottom {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(59,130,246,0.6), rgba(16,185,129,0.6));
+}
+.wf-fork-line-top {
+  top: 25%;
+  transform: rotate(-20deg);
+  transform-origin: left center;
+}
+.wf-fork-line-bottom {
+  bottom: 25%;
+  transform: rotate(20deg);
+  transform-origin: left center;
+}
+.wf-fork-particle-top,
+.wf-fork-particle-bottom {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #60a5fa, #3b82f6);
+  box-shadow: 0 0 6px #3b82f6;
+}
+.wf-fork-particle-top {
+  top: 25%;
+  animation: fork-top 1.8s linear infinite;
+}
+.wf-fork-particle-bottom {
+  bottom: 25%;
+  animation: fork-bottom 1.8s linear infinite 0.6s;
+}
+@keyframes fork-top {
+  0% { left: 0; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { left: calc(100% - 7px); opacity: 0; }
+}
+@keyframes fork-bottom {
+  0% { left: 0; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { left: calc(100% - 7px); opacity: 0; }
+}
+
+/* ===== 节点列（纵向排列） ===== */
+.wf-node-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex-shrink: 0;
+}
+
+/* ===== 合并连线 ===== */
+.wf-merge-connector {
+  position: relative;
+  width: 50px;
+  flex-shrink: 0;
+  height: 200px;
+  display: flex;
+  align-items: center;
+}
+.wf-merge-line-top,
+.wf-merge-line-bottom {
+  position: absolute;
+  right: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(16,185,129,0.6), rgba(139,92,246,0.6));
+}
+.wf-merge-line-top {
+  top: 25%;
+  transform: rotate(20deg);
+  transform-origin: right center;
+}
+.wf-merge-line-bottom {
+  bottom: 25%;
+  transform: rotate(-20deg);
+  transform-origin: right center;
+}
+.wf-merge-particle-top,
+.wf-merge-particle-bottom {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #34d399, #10b981);
+  box-shadow: 0 0 6px #10b981;
+}
+.wf-merge-particle-top {
+  top: 25%;
+  animation: merge-flow 1.6s linear infinite 0.3s;
+}
+.wf-merge-particle-bottom {
+  bottom: 25%;
+  animation: merge-flow 1.6s linear infinite 1s;
+}
+@keyframes merge-flow {
+  0% { left: 0; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { left: calc(100% - 7px); opacity: 0; }
+}
+
+/* ===== 执行统计浮层 ===== */
+.wf-exec-stats {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  padding: 12px 20px;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+.wf-exec-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.wf-exec-item.success .wf-exec-value { color: #34d399; }
+.wf-exec-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.wf-exec-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: #e2e8f0;
+  font-family: monospace;
+}
+.wf-exec-divider {
+  width: 1px;
+  height: 30px;
+  background: rgba(255,255,255,0.1);
+}
+
+/* ===== 底部特性卡片 ===== */
+.wf-features {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 48px;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.7s ease, transform 0.7s ease;
+}
+.wf-features.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.wf-features.visible .wf-feature-card {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.wf-feature-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 14px;
+  padding: 18px;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease, border-color 0.3s ease;
+  cursor: pointer;
+}
+.wf-feature-card:hover {
+  background: rgba(255,255,255,0.07);
+  border-color: rgba(139,92,246,0.3);
+  transform: translateY(-2px) !important;
+}
+
+.wf-feature-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.wf-feature-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #e2e8f0;
+  margin-bottom: 4px;
+}
+.wf-feature-desc {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 1100px) {
+  .wf-flow-row {
+    gap: 0;
+  }
+  .wf-node {
+    width: 140px;
+  }
+  .wf-connector {
+    width: 40px;
+  }
+  .wf-fork-connector,
+  .wf-merge-connector {
+    width: 36px;
+  }
+}
+
+@media (max-width: 900px) {
+  .wf-demo-section {
+    padding: 70px 0 60px;
+  }
+  .wf-features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .wf-flow-row {
+    justify-content: flex-start;
+  }
+  .wf-node {
+    width: 130px;
+  }
+  .wf-connector {
+    width: 32px;
+  }
+  .wf-fork-connector,
+  .wf-merge-connector {
+    width: 28px;
+    height: 180px;
+  }
+}
+
+@media (max-width: 640px) {
+  .wf-demo-section {
+    padding: 50px 0 40px;
+  }
+  .wf-canvas {
+    padding: 24px 16px 20px;
+  }
+  .wf-features {
+    grid-template-columns: 1fr;
+  }
+  .wf-node {
+    width: 120px;
+  }
+  .wf-connector {
+    width: 24px;
+  }
+  .wf-fork-connector,
+  .wf-merge-connector {
+    width: 22px;
+    height: 160px;
+  }
+  .wf-exec-stats {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+  }
+  .wf-exec-divider {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .wf-node {
+    width: 105px;
+  }
+  .wf-node-type,
+  .wf-node-title {
+    font-size: 11px;
+  }
+  .wf-node-status,
+  .wf-node-time,
+  .wf-tag {
+    font-size: 9px;
+  }
+  .wf-connector {
+    width: 16px;
+  }
+  .wf-fork-connector,
+  .wf-merge-connector {
+    width: 16px;
+    height: 140px;
+  }
+  .wf-toolbar-title {
+    display: none;
+  }
+}
+</style>

src/pages/Home/UI_CHECKLIST.md

@@ -0,0 +1,31 @@
+# 顶级商业 UI 重构自我审核表单 (The Artisan UI Checklist)
+
+每一个组件在标记为“完成”前，必须严格通过以下 6 个维度的细致入微审计：
+
+### 1. 深度与通透度 (Depth & Transparency)
+- [ ] **Subpixel 1px Edge**: 组件边缘是否拥有 1px 的半透明高光描边（如 `white/40`）？
+- [ ] **Glassmorphism Layering**: 磨砂玻璃的模糊值 (`backdrop-blur`) 是否在 12px - 40px 之间，确保灵动且不厚重？
+- [ ] **Multi-layered Shadows**: 阴影是否采用了至少三层叠加（一层深邃核心阴影 + 一层扩散柔和阴影 + 一层环境遮挡）？
+
+### 2. 有机动效与物理感 (Organic Motion)
+- [ ] **Damping Physics**: 动画是否具有物理阻尼感？拒绝线性位移，优先使用 `cubic-bezier(0.16, 1, 0.3, 1)`。
+- [ ] **Mouse Parallax**: 核心装饰元素是否支持基于鼠标坐标的微弱视差或 3D 偏移？
+- [ ] **Staggered Entrance**: 内部子元素入场是否有至少 50ms - 100ms 的交错延迟？
+
+### 3. 商业级质感处理 (Premium Texturing)
+- [ ] **Noise Filter**: 渐变背景中是否注入了 3% - 5% 透明度的噪点纹理以消除色彩断层？
+- [ ] **Luminous Glow**: 背景是否有大半径 (>100px) 的径向漫射光晕？
+- [ ] **Micro-illustrations**: 装饰性图标是否采用 1.5pt 细线风格，并带有局部渐变点缀？
+
+### 4. 极致排版美学 (Typography Mastery)
+- [ ] **Tracking & Kerning**: 标题的字间距是否经过紧凑化处理 (`tracking-tighter`)？
+- [ ] **Visual Hierarchy**: 字号级差是否明显（如 `7.5rem` vs `1rem`），且颜色层级清晰（Slate-900 -> Slate-500 -> Slate-400）？
+- [ ] **Gradient Clipping**: 核心关键词是否使用了带有光感方向的 `bg-clip-text` 渐变？
+
+### 5. 内容真实性与灵魂 (Soulful Content)
+- [ ] **Concrete Narratives**: 是否剔除了所有灰色占位条？是否有真实的业务代码、场景路径或统计数据？
+- [ ] **Micro-models**: 是否包含至少一个纯代码构建的“编辑器/仪表盘”微缩 UI 模型？
+
+### 6. 响应式优雅度 (Responsive Elegance)
+- [ ] **Viewport Fluidity**: 在 375px 到 2560px 宽度下，组件是否依然保持比例平衡？
+- [ ] **Touch Feedback**: 移动端点击时是否具有微弱的缩放反馈？

src/pages/Home/about/AboutAdvantages.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="advantages-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <!-- 卡片 1: 多引擎聚合 (大卡片) -->
+    <div class="advantage-card-wrapper lg:col-span-2 scroll-reveal-up" style="--delay: 0s">
+      <div class="advantage-card glass-card group overflow-hidden h-full min-h-[400px]">
+        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-transparent to-purple-500/5"></div>
+        <div class="relative z-10 p-10 flex flex-col md:flex-row h-full gap-8 items-center">
+          <div class="flex-1">
+            <div class="advantage-icon-box mb-8 bg-indigo-50 text-indigo-600">
+              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+            </div>
+            <h3 class="text-3xl font-black text-slate-900 mb-6">多引擎聚合，<br/>一站式覆盖全场景</h3>
+            <p class="text-slate-500 font-medium leading-relaxed mb-8">深度集成 n8n、Coze、Dify、FastGPT 五大主流引擎，打破平台壁垒，一个入口覆盖从简单对话到复杂工业自动化的所有场景。</p>
+            <div class="flex flex-wrap gap-3">
+              <span v-for="tag in ['n8n', 'Coze', 'Dify', 'FastGPT', 'Make']" :key="tag" class="px-4 py-1.5 rounded-full bg-white/50 border border-slate-100 text-xs font-black text-slate-600 uppercase tracking-tighter">{{ tag }}</span>
+            </div>
+          </div>
+          <div class="flex-1 relative group-hover:scale-105 transition-transform duration-700">
+            <div class="absolute -inset-4 bg-indigo-500/10 blur-3xl rounded-full"></div>
+            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=400&fit=crop" class="relative z-10 rounded-2xl shadow-2xl border border-white/50" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 卡片 2: 零门槛上手 -->
+    <div class="advantage-card-wrapper scroll-reveal-up" style="--delay: 0.1s">
+      <div class="advantage-card glass-card group p-10 h-full flex flex-col">
+        <div class="advantage-icon-box mb-8 bg-purple-50 text-purple-600">
+          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+        </div>
+        <h3 class="text-2xl font-black text-slate-900 mb-4">5 分钟上手，<br/>零编程基础</h3>
+        <p class="text-slate-500 font-medium leading-relaxed mb-8 flex-1">无需代码背景，通过直观的可视化拖拽即可构建复杂的业务流。我们提供详尽的实战指南。</p>
+        <div class="mt-auto">
+          <div class="text-indigo-600 font-black text-sm uppercase tracking-widest flex items-center gap-2 group-hover:gap-4 transition-all">Explore Tutorials <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 卡片 3: 创作者经济 -->
+    <div class="advantage-card-wrapper scroll-reveal-up" style="--delay: 0.2s">
+      <div class="advantage-card glass-card group p-10 h-full flex flex-col">
+        <div class="advantage-icon-box mb-8 bg-rose-50 text-rose-600">
+          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        </div>
+        <h3 class="text-2xl font-black text-slate-900 mb-4">创作者经济，<br/>让技术即刻变现</h3>
+        <p class="text-slate-500 font-medium leading-relaxed mb-8 flex-1">开放的工作流市场，你的每一个自动化创意都能产生价值。连接需求方与提供方。</p>
+        <div class="flex items-center gap-3"><div class="flex -space-x-2"><div v-for="i in 3" :key="i" class="w-8 h-8 rounded-full border-2 border-white bg-slate-200"></div></div><span class="text-xs font-bold text-slate-400">Join 5,000+ Creators</span></div>
+      </div>
+    </div>
+
+    <!-- 卡片 4: 企业级解决方案 -->
+    <div class="advantage-card-wrapper lg:col-span-2 scroll-reveal-up" style="--delay: 0.3s">
+      <div class="advantage-card glass-card group overflow-hidden h-full min-h-[360px] bg-slate-900">
+        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
+        <div class="relative z-10 p-10 flex flex-col md:flex-row h-full gap-8 items-center">
+          <div class="flex-1">
+            <div class="advantage-icon-box mb-8 bg-emerald-500/10 text-emerald-400">
+              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
+            </div>
+            <h3 class="text-3xl font-black text-white mb-6">企业级部署，<br/>极致的安全与效能</h3>
+            <p class="text-slate-400 font-medium leading-relaxed mb-8">专属私有化部署方案，支持本地化存储与权限精细管控。助力大中型企业构建合规、高效的自动化中台。</p>
+            <button class="px-8 py-3 bg-white text-slate-900 rounded-xl font-black text-sm hover:bg-emerald-400 transition-colors">Contact Enterprise</button>
+          </div>
+          <div class="flex-1 grid grid-cols-2 gap-4">
+            <div v-for="item in ['High Security', 'SLA 99.9%', 'Private Cloud', '24/7 Support']" :key="item" class="p-4 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md text-center">
+              <div class="text-[10px] font-black text-emerald-400 uppercase tracking-tighter">{{ item }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-active');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('.scroll-reveal-up').forEach(el => observer.observe(el));
+});
+</script>
+
+<style scoped>
+.advantage-card { border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05), inset 0 2px 4px rgba(255, 255, 255, 1); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
+.advantage-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.05); border-color: rgba(99, 102, 241, 0.2); }
+.glass-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); }
+.advantage-icon-box { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; }
+.advantage-card:hover .advantage-icon-box { transform: scale(1.1) rotate(5deg); }
+.scroll-reveal-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0s); }
+.is-active { opacity: 1; transform: translateY(0); }
+</style>

src/pages/Home/about/AboutStory.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="about-story-container relative">
+    <!-- 装饰底图: 极简抽象背景 -->
+    <div class="absolute inset-0 pointer-events-none about-story-decor">
+      <div class="glow-orb-story glow-orb-story-1"></div>
+    </div>
+
+    <!-- 叙事卡片 -->
+    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
+
+      <!-- 左侧: 3D 模拟器界面 -->
+      <div class="story-visual-wrap scroll-reveal-left">
+        <div class="story-visual-card-wrapper" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave" ref="visualCardRef">
+          <div class="story-visual-card glass-morph shadow-2xl overflow-hidden relative group">
+            <img :src="storyImage" alt="暴米Ai 产品预览" class="story-visual-img" />
+            <div class="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 via-transparent to-white/10 pointer-events-none"></div>
+            <div class="absolute -inset-[100%] bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 animate-shimmer group-hover:animate-none group-hover:left-[100%] duration-1000"></div>
+          </div>
+
+          <div class="floating-badge badge-1 glass-badge shadow-lg">
+            <span class="text-xs font-black text-indigo-600 tracking-wider uppercase">Live Integration</span>
+          </div>
+          <div class="floating-badge badge-2 glass-badge shadow-lg">
+            <span class="text-xs font-black text-emerald-600 tracking-wider uppercase">4 Engines Ready</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧: 品牌使命与实战数据 -->
+      <div class="story-content-wrap scroll-reveal-right">
+        <div class="mb-10">
+          <h4 class="text-xs font-black text-indigo-600 uppercase tracking-[0.3em] mb-4">Our Vision</h4>
+          <blockquote class="text-2xl lg:text-3xl font-black text-slate-900 leading-[1.4] mb-8 relative italic">
+            <span class="absolute -top-10 -left-6 text-9xl text-indigo-500/10 font-serif leading-none select-none">“</span>
+            将全球顶级的 AI 自动化能力，封装成<span class="text-indigo-600">触手可及</span>的生产力模块。让技术不仅是工具，更是智慧的延伸。
+          </blockquote>
+          <p class="text-slate-500 text-lg font-medium leading-relaxed mb-8">
+            暴米Ai 从零开始，深耕企业级自动化场景。我们不只是聚合引擎，更是流程自动化的新范式。从内容生产到复杂业务流，我们助力每一位用户实现跨越式的效能飞跃。
+          </p>
+        </div>
+
+        <div class="grid grid-cols-3 gap-6">
+          <div v-for="(stat, index) in stats" :key="index" class="stat-minimal-item group">
+            <div class="text-3xl lg:text-4xl font-black text-indigo-600 mb-2 transition-transform group-hover:scale-110">
+              {{ stat.value }}
+            </div>
+            <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">
+              {{ stat.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import storyImage from '@/assets/imgs/platforms/n8n_canvas.png';
+
+const stats = [
+  { value: '5+', label: 'Engines' },
+  { value: '1k+', label: 'Templates' },
+  { value: '20+', label: 'Industries' },
+];
+
+const visualCardRef = ref(null);
+
+function handleMouseMove(e) {
+  if (!visualCardRef.value) return;
+  const card = visualCardRef.value;
+  const rect = card.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  const centerX = rect.width / 2;
+  const centerY = rect.height / 2;
+  const rotateX = (y - centerY) / 25;
+  const rotateY = (centerX - x) / 25;
+  card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
+}
+
+function handleMouseLeave() {
+  if (!visualCardRef.value) return;
+  visualCardRef.value.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)`;
+}
+
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-active');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.2 });
+  document.querySelectorAll('.scroll-reveal-left, .scroll-reveal-right').forEach(el => observer.observe(el));
+});
+</script>
+
+<style scoped>
+.glow-orb-story { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, #e0e7ff 0%, transparent 70%); filter: blur(80px); opacity: 0.3; }
+.glow-orb-story-1 { top: -10%; right: 10%; }
+.story-visual-card-wrapper { position: relative; transition: transform 0.2s ease-out; transform-style: preserve-3d; }
+.story-visual-card { border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); }
+.story-visual-img { width: 100%; height: auto; display: block; }
+.glass-morph { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); }
+.glass-badge { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.5); display: inline-flex; }
+.floating-badge { position: absolute; z-index: 30; transform: translateZ(40px); pointer-events: none; }
+.badge-1 { top: 15%; left: -5%; animation: float-anim 5s infinite ease-in-out; }
+.badge-2 { bottom: 20%; right: -5%; animation: float-anim 5s infinite ease-in-out -2s; }
+@keyframes float-anim { 0%, 100% { transform: translateZ(40px) translateY(0); } 50% { transform: translateZ(40px) translateY(-10px); } }
+@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
+.stat-minimal-item { position: relative; padding-bottom: 12px; }
+.stat-minimal-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: #6366f1; border-radius: 2px; transition: width 0.3s ease; }
+.stat-minimal-item:hover::after { width: 100%; }
+.scroll-reveal-left { opacity: 0; transform: translateX(-40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
+.scroll-reveal-right { opacity: 0; transform: translateX(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
+.is-active { opacity: 1; transform: translateX(0); }
+</style>

src/pages/Home/about/AboutTrustBar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="trust-bar-container py-12">
+    <div class="flex flex-col items-center">
+      <div class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 mb-10 flex items-center gap-4">
+        <div class="h-px w-8 bg-slate-100"></div>
+        Trusted by Leading Engines
+        <div class="h-px w-8 bg-slate-100"></div>
+      </div>
+
+      <div class="flex flex-wrap justify-center items-center gap-12 lg:gap-20">
+        <div v-for="(engine, idx) in engines" :key="idx"
+             class="trust-logo-wrapper group scroll-reveal-up"
+             :style="{'--delay': idx * 0.05 + 's'}">
+          <div class="relative">
+            <img v-if="engine.img" :src="engine.img" :alt="engine.name"
+                 class="h-8 lg:h-10 w-auto object-contain opacity-30 grayscale group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-500" />
+            <div v-else class="text-xl font-black text-slate-200 group-hover:text-indigo-600 transition-colors duration-500 uppercase tracking-tighter">
+              {{ engine.name }}
+            </div>
+            <!-- 悬浮时的底部发光线 -->
+            <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-indigo-600 group-hover:w-full transition-all duration-500"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import n8nLogo from '@/assets/imgs/8n8.png';
+import cozeLogo from '@/assets/imgs/coze.png';
+import difyLogo from '@/assets/imgs/dify.png';
+import fastgptLogo from '@/assets/imgs/FastGPT.png';
+
+const engines = [
+  { name: 'n8n', img: n8nLogo },
+  { name: 'Coze', img: cozeLogo },
+  { name: 'Dify', img: difyLogo },
+  { name: 'FastGPT', img: fastgptLogo },
+  { name: 'Make', img: null },
+];
+
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-active');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+
+  document.querySelectorAll('.scroll-reveal-up').forEach(el => observer.observe(el));
+});
+</script>
+
+<style scoped>
+.scroll-reveal-up {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--delay, 0s);
+}
+.is-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

src/pages/Home/about/AboutValue.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="value-propositions">
+    <!-- 顶部价值摘要 -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
+      <div v-for="(item, idx) in keyValues" :key="idx"
+           class="value-summary-card p-8 rounded-3xl border border-slate-100 hover:border-indigo-200 transition-all group scroll-reveal-up"
+           :style="{'--delay': idx * 0.1 + 's'}">
+        <div class="w-14 h-14 rounded-2xl mb-6 flex items-center justify-center bg-indigo-50 text-indigo-600 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-500">
+          <div v-html="item.icon" class="w-7 h-7"></div>
+        </div>
+        <h4 class="text-xl font-black text-slate-900 mb-3">{{ item.title }}</h4>
+        <p class="text-slate-500 font-medium leading-relaxed">{{ item.desc }}</p>
+      </div>
+    </div>
+
+    <!-- 用户群体：沉浸式卡片 -->
+    <div class="user-universe-section rounded-[3rem] bg-slate-50 p-12 lg:p-20 relative overflow-hidden">
+      <div class="absolute top-0 right-0 w-96 h-96 bg-indigo-200/20 blur-[100px] rounded-full"></div>
+      <div class="relative z-10">
+        <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-8 mb-16">
+          <div>
+            <h3 class="text-4xl font-black text-slate-900 mb-4">连接每一位 AI 创作者</h3>
+            <p class="text-slate-500 text-lg font-medium">从独立开发者到企业决策者，暴米Ai 为不同角色提供定制化的自动化路径。</p>
+          </div>
+          <div class="flex items-center gap-4">
+            <span class="text-sm font-black text-indigo-600 uppercase tracking-widest">Select Your Role</span>
+            <div class="h-px w-12 bg-indigo-200"></div>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+          <div v-for="(user, idx) in userTypes" :key="idx" class="user-profile-card group cursor-pointer scroll-reveal-up" :style="{'--delay': (idx * 0.05 + 0.3) + 's'}">
+            <div class="relative mb-4">
+              <div class="absolute inset-0 bg-indigo-600 rounded-2xl rotate-6 scale-95 opacity-0 group-hover:opacity-100 group-hover:rotate-0 transition-all duration-500"></div>
+              <img :src="user.image" :alt="user.name" class="relative z-10 w-full aspect-square object-cover rounded-2xl grayscale group-hover:grayscale-0 transition-all duration-500" />
+            </div>
+            <h5 class="text-sm font-black text-slate-900 text-center uppercase tracking-tighter">{{ user.name }}</h5>
+            <p class="text-[10px] text-slate-400 text-center font-bold uppercase mt-1">{{ user.role }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+const LightningIcon = `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>`;
+const ShieldIcon = `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>`;
+const DollarIcon = `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`;
+const keyValues = [
+  { title: '极致性能', desc: '毫秒级响应的执行引擎，确保业务流在高并发下依然稳健如初。', icon: LightningIcon },
+  { title: '安全合规', desc: '全链路数据加密与私有化部署支持，为企业数据安全保驾护航。', icon: ShieldIcon },
+  { title: '成本优化', desc: '通过智能调度减少 Token 消耗，比传统方案降低 40% 的运营成本。', icon: DollarIcon },
+];
+const userTypes = [
+  { name: '企业白领', role: 'Efficiency Expert', image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&h=200&fit=crop&crop=face' },
+  { name: 'AI 学习者', role: 'New Explorer', image: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65a?w=200&h=200&fit=crop&crop=face' },
+  { name: '开发者', role: 'Architect', image: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=200&h=200&fit=crop&crop=face' },
+  { name: '产品经理', role: 'Product Maker', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&h=200&fit=crop&crop=face' },
+  { name: '大学生', role: 'Future Talent', image: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=200&h=200&fit=crop&crop=face' },
+  { name: '内容创作者', role: 'Content Creator', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face' },
+];
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-active');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('.scroll-reveal-up').forEach(el => observer.observe(el));
+});
+</script>
+
+<style scoped>
+.value-summary-card { background: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.03); }
+.value-summary-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.1); }
+.user-profile-card:hover h5 { color: #4f46e5; }
+.scroll-reveal-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0s); }
+.is-active { opacity: 1; transform: translateY(0); }
+</style>

src/styles/tailwind.css

@@ -0,0 +1,173 @@
+@import "tailwindcss";
+
+@source "../../index.html";
+@source "../**/*.{vue,js,ts,jsx,tsx}";
+
+/* ===== 全局基础优化 ===== */
+
+/* 优化字体渲染 */
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+}
+
+/* 图片优化 */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 懒加载图片过渡 */
+.lazy-img {
+  transition: opacity 0.3s ease;
+  opacity: 0.6;
+}
+
+.lazy-loaded {
+  opacity: 1;
+}
+
+.lazy-error {
+  opacity: 0.3;
+  filter: grayscale(1);
+}
+
+/* ===== 骨架屏动画 ===== */
+@keyframes skeleton-loading {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+/* ===== 玻璃拟态效果 ===== */
+.glass {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.glass-dark {
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ===== 渐变文字 ===== */
+.gradient-text {
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #ec4899 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ===== 卡片悬浮效果 ===== */
+.card-hover {
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  will-change: transform;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(45, 113, 255, 0.12);
+}
+
+/* ===== 按钮优化 ===== */
+.btn-gradient {
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  color: white;
+  border: none;
+  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.btn-gradient:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
+}
+
+.btn-gradient:active {
+  transform: translateY(0);
+}
+
+/* ===== 焦点样式优化 ===== */
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* ===== 选中文字样式 ===== */
+::selection {
+  background: rgba(59, 130, 246, 0.2);
+  color: #1e40af;
+}
+
+/* ===== 滚动条美化 ===== */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* ===== 响应式容器 ===== */
+.container-responsive {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+@media (min-width: 640px) {
+  .container-responsive {
+    padding: 0 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-responsive {
+    padding: 0 32px;
+  }
+}
+
+/* ===== 文字截断 ===== */
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

src/utils/lazyload.js

@@ -0,0 +1,87 @@
+/**
+ * 图片懒加载指令
+ * 使用 IntersectionObserver API 实现高性能懒加载
+ * 
+ * 使用方式：
+ * 1. 在 main.js 中注册：app.directive('lazy', lazyDirective)
+ * 2. 在模板中使用：<img v-lazy="imageUrl" />
+ */
+
+const DEFAULT_PLACEHOLDER = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjFmNWY5Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTRhM2I4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+加载中...</text></svg>'
+
+// 创建 IntersectionObserver 实例（单例模式，避免重复创建）
+let observer = null
+
+const getObserver = () => {
+  if (!observer) {
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const img = entry.target
+            const src = img.dataset.lazySrc
+            if (src) {
+              // 预加载图片
+              const tempImg = new Image()
+              tempImg.onload = () => {
+                img.src = src
+                img.classList.add('lazy-loaded')
+                img.removeAttribute('data-lazy-src')
+              }
+              tempImg.onerror = () => {
+                img.classList.add('lazy-error')
+              }
+              tempImg.src = src
+            }
+            observer.unobserve(img)
+          }
+        })
+      },
+      {
+        rootMargin: '50px 0px', // 提前 50px 开始加载
+        threshold: 0.01,
+      }
+    )
+  }
+  return observer
+}
+
+export const lazyDirective = {
+  mounted(el, binding) {
+    if (!binding.value) return
+    
+    // 设置占位图
+    el.src = DEFAULT_PLACEHOLDER
+    el.dataset.lazySrc = binding.value
+    el.classList.add('lazy-img')
+    
+    // 使用 IntersectionObserver 监听
+    if ('IntersectionObserver' in window) {
+      getObserver().observe(el)
+    } else {
+      // 降级处理：直接加载
+      el.src = binding.value
+    }
+  },
+  
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      el.dataset.lazySrc = binding.value
+      el.classList.remove('lazy-loaded', 'lazy-error')
+      
+      if ('IntersectionObserver' in window) {
+        getObserver().observe(el)
+      } else {
+        el.src = binding.value
+      }
+    }
+  },
+  
+  unmounted(el) {
+    if (observer) {
+      observer.unobserve(el)
+    }
+  },
+}
+
+export default lazyDirective

src/utils/performance.js

@@ -0,0 +1,108 @@
+/**
+ * 前端性能监控工具
+ * 收集 Web Vitals 核心性能指标
+ */
+
+/**
+ * 防抖函数
+ * @param {Function} fn 目标函数
+ * @param {number} delay 延迟时间（ms）
+ */
+export function debounce(fn, delay = 300) {
+  let timer = null
+  return function (...args) {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn.apply(this, args)
+      timer = null
+    }, delay)
+  }
+}
+
+/**
+ * 节流函数
+ * @param {Function} fn 目标函数
+ * @param {number} interval 间隔时间（ms）
+ */
+export function throttle(fn, interval = 300) {
+  let lastTime = 0
+  return function (...args) {
+    const now = Date.now()
+    if (now - lastTime >= interval) {
+      lastTime = now
+      return fn.apply(this, args)
+    }
+  }
+}
+
+/**
+ * 获取页面性能指标
+ */
+export function getPerformanceMetrics() {
+  if (!window.performance) return null
+  
+  const navigation = performance.getEntriesByType('navigation')[0]
+  if (!navigation) return null
+  
+  return {
+    // DNS 解析时间
+    dns: Math.round(navigation.domainLookupEnd - navigation.domainLookupStart),
+    // TCP 连接时间
+    tcp: Math.round(navigation.connectEnd - navigation.connectStart),
+    // 首字节时间 (TTFB)
+    ttfb: Math.round(navigation.responseStart - navigation.requestStart),
+    // 内容下载时间
+    download: Math.round(navigation.responseEnd - navigation.responseStart),
+    // DOM 解析时间
+    domParse: Math.round(navigation.domInteractive - navigation.responseEnd),
+    // 资源加载时间
+    resourceLoad: Math.round(navigation.loadEventStart - navigation.domContentLoadedEventEnd),
+    // 页面完全加载时间
+    total: Math.round(navigation.loadEventEnd - navigation.startTime),
+  }
+}
+
+/**
+ * 预加载关键资源
+ * @param {string[]} urls 资源 URL 列表
+ */
+export function preloadResources(urls) {
+  urls.forEach((url) => {
+    const link = document.createElement('link')
+    link.rel = 'preload'
+    
+    if (url.match(/\.(jpg|jpeg|png|gif|webp|svg)$/i)) {
+      link.as = 'image'
+    } else if (url.match(/\.js$/i)) {
+      link.as = 'script'
+    } else if (url.match(/\.css$/i)) {
+      link.as = 'style'
+    } else if (url.match(/\.(woff|woff2|ttf|otf)$/i)) {
+      link.as = 'font'
+      link.crossOrigin = 'anonymous'
+    }
+    
+    link.href = url
+    document.head.appendChild(link)
+  })
+}
+
+/**
+ * 使用 requestIdleCallback 在浏览器空闲时执行任务
+ * @param {Function} callback 回调函数
+ */
+export function runWhenIdle(callback) {
+  if ('requestIdleCallback' in window) {
+    requestIdleCallback(callback, { timeout: 2000 })
+  } else {
+    setTimeout(callback, 100)
+  }
+}
+
+export default {
+  debounce,
+  throttle,
+  getPerformanceMetrics,
+  preloadResources,
+  runWhenIdle,
+}

src/utils/sanitize.js

@@ -0,0 +1,11 @@
+import DOMPurify from 'dompurify'
+
+/**
+ * 对 HTML 字符串进行 XSS 消毒
+ * @param {string} html - 原始 HTML 字符串
+ * @returns {string} 消毒后的安全 HTML
+ */
+export function sanitizeHtml(html) {
+  if (!html) return ''
+  return DOMPurify.sanitize(html)
+}

tailwind.config.js

@@ -0,0 +1,116 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      // 自定义颜色体系
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        brand: {
+          blue: '#2D71FF',
+          purple: '#6366f1',
+          pink: '#ec4899',
+          cyan: '#06b6d4',
+          green: '#10b981',
+          orange: '#f97316',
+        },
+      },
+      // 自定义字体
+      fontFamily: {
+        sans: [
+          'Inter',
+          'PingFang SC',
+          'Microsoft YaHei',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+      },
+      // 自定义动画
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'slide-down': 'slideDown 0.3s ease-out',
+        'scale-in': 'scaleIn 0.2s ease-out',
+        'float': 'float 3s ease-in-out infinite',
+        'glow': 'glow 2s ease-in-out infinite',
+        'shimmer': 'shimmer 2s linear infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(16px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideDown: {
+          '0%': { opacity: '0', transform: 'translateY(-16px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-8px)' },
+        },
+        glow: {
+          '0%, 100%': { boxShadow: '0 0 20px rgba(59, 130, 246, 0.3)' },
+          '50%': { boxShadow: '0 0 40px rgba(59, 130, 246, 0.6)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+      // 自定义阴影
+      boxShadow: {
+        'card': '0 2px 12px rgba(0, 0, 0, 0.06)',
+        'card-hover': '0 8px 32px rgba(45, 113, 255, 0.12)',
+        'glass': '0 8px 32px rgba(31, 38, 135, 0.08)',
+        'primary': '0 4px 16px rgba(45, 113, 255, 0.3)',
+        'glow-blue': '0 0 30px rgba(59, 130, 246, 0.4)',
+        'glow-purple': '0 0 30px rgba(99, 102, 241, 0.4)',
+      },
+      // 自定义圆角
+      borderRadius: {
+        '2xl': '1rem',
+        '3xl': '1.5rem',
+        '4xl': '2rem',
+      },
+      // 自定义间距
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+        '128': '32rem',
+      },
+      // 自定义屏幕断点
+      screens: {
+        'xs': '480px',
+        '3xl': '1920px',
+      },
+      // 自定义背景模糊
+      backdropBlur: {
+        xs: '2px',
+      },
+    },
+  },
+  plugins: [],
+}