ali_ai_learn_web/src/pages/Home.vue

<template>
  <div class="home-page">
    <div class="banner flex-center">
      <el-carousel :height="carouselHeight" style="width: 100%;">
        <el-carousel-item>
          <img
            :src="bannerImage"
            class="carousel-image"
            @load="onImageLoad"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            :src="bannerImage"
            class="carousel-image"
            @load="onImageLoad"
          />
        </el-carousel-item>
        
      </el-carousel>
    </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;" 
           :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 bannerImage from '@/assets/imgs/banner.png'
import searchIcon from '@/assets/imgs/search.png'
import addIcon from '@/assets/imgs/add.png'
import n8Icon from '@/assets/imgs/8n8.png'
import cozeIcon from '@/assets/imgs/coze.png'
import difyIcon from '@/assets/imgs/dify.png'
import fastgptIcon from '@/assets/imgs/FastGPT.png'
import detailIcon from '@/assets/imgs/detail.png'
import CourseCard from '@/components/course-card.vue'

import { getCategoryListTree } from '@/api/category.js'
import { getPublishList } from '@/api/publish.js'


import { onMounted,ref } 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();
})

const router = useRouter()
const activePlatform = ref('');
const categoryId = ref('');
const list = ref([]);
const workflowTitle = 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,
    }
  })
};

const goWorkflowAdd = () => {
  //增加参数名称
  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 || '';
  })
};

// 查询寻找工作流列表
const getList = async (type) => {
  const res = await getPublishList({
    pageNum: 1,
    pageSize: 8,
  })
  if(res.code === 200){
    list.value = res.rows || [];
  }
};
</script>

<style lang="scss">

.banner {
  // margin-top: 140px;
  height: calc(100vh - 60px);
  min-height: 600px;
  .carousel-image {
    width: 100%;
    height: auto;
    // 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{
  .course-list{
    margin-top: 70px;
    margin-bottom: 140px;
  }
}
</style>