AIClass/src/views/AIGeneralCourse.vue

<template>
  <!-- AI智能课 -->
  <div class="home-container">
    <!-- 展开收起侧边栏 -->
    <div class="sidebar-container">
      <div class="sidebar-layout">
        <div
          class="icon-expand"
          :style="{
            backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
            left: drawerVisible ? '18%' : '0'
          }"
          @click="toggleDrawer"
        >
          <span
            class="vertical-lines"
            :style="{
              color: drawerVisible ? '#8a78d0' : 'white'
            }"
            >||</span
          >
        </div>
      </div>

      <transition name="drawer-slide">
        <div class="main-content" v-if="drawerVisible">
          <!-- 菜单栏 -->
          <div class="drawer-box">
            <el-row class="tac">
              <el-col :span="15">
                <span class="mb-2">
                  <img :src="teachingImg" alt="教学" />
                  教学大纲
                </span>
                <el-menu
                  default-active="1"
                  :class="{ 'el-menu-vertical-demo': true }"
                >
                  <el-menu-item
                    v-for="(title, index) in courseTitles"
                    :key="index + 1"
                    :index="(index + 1).toString()"
                    @click="goToAIExperience(classOutlineData[index])"
                  >
                   {{ title }}
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </div>
      </transition>
    </div>

    <div class="content-box">
      <div class="box-1">
        <div class="inner-box left-box">
          <div class="box-icon" @click="goBack">
            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
            {{ pageTitle }}
          </div>
          <div class="dropdown-box">
            <!-- 下拉菜单 -->
            <el-dropdown v-model="selectedGrade" @command="handleGradeSelect">
              <el-button type="primary">
                {{ selectedGrade
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu class="dropdown-menu">
                  <el-dropdown-item
                    v-for="item in classData"
                    :key="item.id"
                    :command="item.ctType"
                    >{{ item.ctType }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="inner-box right-box">
          <div class="top-right-box">
            <el-autocomplete
              v-model="SearchInput"
              :fetch-suggestions="querySearch"
              placeholder="搜索"
              @select="handleSearchSelect"
              class="search-input"
              value-key="ctType"
              :trigger-on-focus="false"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <!-- 添加下拉项模板 -->
              <template #popper-append-to-body>
                <el-option
                class="scrollbar"
                  v-for="item in filteredTitles"
                  :key="item.id"
                  :label="item.ctType"
                  :value="item"
                ></el-option>
              </template>
            </el-autocomplete>
          </div>
        </div>
      </div>

      <div class="box-2">
        <div
          class="small-box"
          v-for="(outlineData, index) in classOutlineData"
          :key="index"
          @click="goToAIExperience(outlineData)"
        >
          <div
            class="nested-box"
            :style="{
              backgroundImage: `url(${outlineData.ctTypeImage})`,
              backgroundSize: 'cover'
            }"
          ></div>
          <div class="additional-text">
            0{{ outlineData.ctTypeSort }} {{ outlineData.ctType }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'

import { ClassList, ClassOutline } from '@/api/class.js'
// 添加 Element Plus 组件引入
import {
  ArrowDown,
  ArrowRightBold,
  Expand,
  Reading,
  Fold,
  Tickets
} from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
import { ElAutocomplete } from 'element-plus' // 导入ElAutocomplete组件

import { useRouter } from 'vue-router'

import teachingImg from '@/assets/icon/teaching.png'

const router = useRouter() // 获取当前路由对象

// 添加下拉菜单选中项
const selectedGrade = ref('')

// 添加抽屉显示状态
const drawerVisible = ref(true)
// 处理下拉菜单选择
const handleGradeSelect = command => {
  selectedGrade.value = command
  // 保存选中值到localStorage
  localStorage.setItem('selectedGrade', command)
  // 年级切换时重新加载数据的逻辑
  const selectedItem = classData.value.find(item => item.ctType === command)
  // 存储年级id
  if (selectedItem) {
    localStorage.setItem('selectedGradeId', selectedItem.id)
  }
  if (selectedItem) {
    ClassOutline(selectedItem.id).then(res => {
      if (res.code === 0) {
        classOutlineData.value = res.data
      }
    })
  }
}
// 添加切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}
// 获取年级
const classData = ref([])
// 添加接口返回的数据引用，用于存储 ClassOutline 结果
const classOutlineData = ref([])

const fetchCtTypes = async () => {
  try {
    const response = await ClassList()
    if (response.code === 0) {
      classData.value = response.data
      // 获取到数据，优先从localStorage读取选中值
      const savedGrade = localStorage.getItem('selectedGrade')
      selectedGrade.value =
        savedGrade ||
        (classData.value.length > 0 ? classData.value[0].ctType : '')
      // 初始化时获取课程大纲数据
      const selectedItem =
        classData.value.find(item => item.ctType === selectedGrade.value) ||
        classData.value[0]
      if (selectedItem) {
        ClassOutline(selectedItem.id).then(res => {
          console.log(res);
          if (res.code === 0) {
            classOutlineData.value = res.data
          }
        })
      }
    }
  } catch (error) {
    console.error('获取 ctType 数据失败:', error)
  }
}

// 添加获取课程标题
const getCourseTitle = index => {
  if (
    classOutlineData.value.length > 0 &&
    index > 0 &&
    index <= classOutlineData.value.length
  ) {
    return classOutlineData.value[index - 1].ctType
  }
  return ''
}

// 课程标题数组，依赖修改后的 getCourseTitle 函数 修改课程标题数组为 computed 属性
const courseTitles = computed(() => {
  return classOutlineData.value.map((item, index) => {
    return `0${index + 1} ${item.ctType}`;
  });
})

// 首页点击渲染后的页面title
const pageTitle = ref('')
onMounted(() => {
  fetchCtTypes()
  const title = router.currentRoute.value.query.title
  if (title) {
    pageTitle.value = title
  }
})

import { Message } from '@/utils/message/Message.js'

// 搜索框
const SearchInput = ref('')
// 添加搜索建议查询方法
const querySearch = (queryString, cb) => {
  const results = queryString
    ? classOutlineData.value.filter(item => {
        return item.ctType.toLowerCase().includes(queryString.toLowerCase())
      })
    : classOutlineData.value
  cb(results)
}
// 添加搜索选择处理方法
const handleSearchSelect = item => {
  goToAIExperience(item)
    // 添加以下代码清空输入框
  SearchInput.value = '';
}
// 修改过滤逻辑，直接使用classOutlineData
const filteredTitles = computed(() => {
  if (!SearchInput.value) {
    return classOutlineData.value
  }
  return classOutlineData.value.filter(title =>
    title.ctType.toLowerCase().includes(SearchInput.value.toLowerCase())
  )
})

// 添加按钮显示状态
const buttonVisible = ref(false)

const goBack = () => {
  router.go(-1) // 返回上一页
}

const goToAIExperience = outlineData => {

  // if (outlineData.ctTypeSort === 2) {
    router.push({
      path: '/ai-develop', // 跳转视频页面
      query: { typeId: outlineData.id, typeName: outlineData.ctType }
    })
  // } else {
  //   Message().notifyWarning(localStorage.getItem('userName') === "aiTest" ? '您的账号并未开放此课程！' : '演示版未开放此课程！', true)
  // }
}
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

/* 添加过渡样式 */
.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.3s ease;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.3s ease;
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  gap: rpx(0);
}
.sidebar-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.icon-wrapper {
  width: 40px; /* 根据实际需要调整宽度 */
  flex-shrink: 0;
  background-color: saddlebrown;
}
.main-content {
  width: rpx(135);
  height: 100%;
  flex-grow: 1;
background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);  position: relative;
  
  overflow-y: auto; /* 添加垂直滚动条 */
  max-height: 100%; /* 设置最大高度 */
  transition: all 0.3s ease;
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: rpx(0); // 滚动条宽度
  }
  &::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1); // 滚动条轨道背景色
    border-radius: rpx(2); // 滚动条轨道圆角
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); // 滚动条滑块颜色
    border-radius: rpx(2); // 滚动条滑块圆角
    transition: background-color 0.3s ease; // 滑块颜色过渡效果
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5); // 鼠标悬停时的滑块颜色
  }
}
.icon-expand {
  width: rpx(8);
  height: rpx(35);
  border-top-right-radius: rpx(5);
  border-bottom-right-radius: rpx(5);
  z-index: 9999;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer; // 添加鼠标指针样式
  // 修改裁剪路径使右侧边缘垂直无缝贴合
  clip-path: polygon(0 0, 100% 15%, 100% 90%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  // 统一过渡时间与菜单保持同步
  transition: all 0.3s ease;
}
.icon-expand .vertical-lines {
  color: #8a78d0;
  font-size: rpx(10);
}
.content-box {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column; /* 子元素上下排列 */
  background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
.tac .el-menu {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-left: rpx(10);
  margin-top: rpx(10);
}

.mb-2 {
  color: white;
  font-size: rpx(9);
  margin-left: rpx(10);
}
.mb-2 img {
  width: rpx(15);
  height: rpx(15);
  vertical-align: middle;
  margin-top: rpx(-2);
  margin-left: rpx(-5);
}
.el-menu-item {
  width: rpx(115);
  // height: rpx(20);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}

.el-menu ::v-deep(.el-menu-item:hover),
.el-menu ::v-deep(.el-menu-item:focus),
.el-menu ::v-deep(.el-menu-item:active) {
  background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
  color: black;
}

.drawer-box {
  position: absolute;
  display: flex;
  // align-items: center;
  margin-top: rpx(30);
  height: 100%;
  width: 100%;
}

.drawer-box .toggle-button {
  width: rpx(10);
  height: rpx(50);
  background-color: rgba(165, 209, 247, 0.2);
  border: none;
  position: relative;
  writing-mode: vertical-lr; // 文字垂直排列，从左到右
  text-orientation: upright; // 文字保持正立
}
.toggle-button:hover {
  left: 0;
}
.drawer-box ::v-deep(.el-drawer.ltr) {
  background-color: rgb(255, 255, 255, 0.7);
  box-shadow: 0 8px 8px rgba(202, 52, 52, 0.1);
}

.drawer-box ::v-deep(.el-drawer__header) {
  margin-bottom: rpx(0);
}
.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar {
  width: rpx(4);
}
.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
.toggle-button.is-active,
.toggle-button:active,
.toggle-button:focus {
  background-color: rgba(165, 209, 247, 0.8);
  color: black;
  border: none; // 移除点击时的边框
  outline: none; // 移除点击时的外边框
}
.box-1 {
  width: 100%;
  height: rpx(50);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(16); // 默认字体大小
}
.inner-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: rpx(16); // 默认字体大小
}
.left-box {
  position: relative;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1; // 设置左侧盒子占比为 2
}
.box-icon {
  width: 100%;
  height: 100%;
  flex: 0.6;
  display: flex; // 添加 flex 布局
  align-items: center; // 垂直居中
  color: black; // 设置图标颜色为白色
  padding-left: rpx(15);
  font-size: rpx(10); // 设置图标大小，可按需调整
  cursor: pointer; // 添加鼠标指针样式
  z-index: 999;
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5); // 设置图标和文字之间的间距 ;
}

.left-box span {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: rpx(11); // 默认字体大小
  color: white;
}
.dropdown-box {
  width: 100%;
  height: 100%;
  display: flex; // 添加 flex 布局;
  flex: 1;
  align-items: center; // 垂直居中;
  // padding-right: rpx(0); // 添加右侧内边距;
}
.dropdown-box .el-button {
  width: rpx(60); // 设置按钮宽度;
  height: rpx(15); // 设置按钮高度;
  background-color: rgb(255, 255, 255, 0.7);
  border: 1px white solid;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.3);
  color: black;
  border: none;
  margin-left: rpx(10);
  border-radius: rpx(12);
  font-size: rpx(8); // 设置字体大小;
}
.dropdown-box .el-button:hover,
.dropdown-box .el-button:focus,
.dropdown-box .el-button:active {
  border: none; /* 移除悬停、聚焦、点击状态下的边框 */
  outline: none; /* 移除悬停、聚焦、点击状态下的轮廓线 el-scrollbar__view el-dropdown__list */
}
.dropdown-menu {
  width: rpx(100);
  // height: rpx(60);
  border-radius: rpx(5);
  border: 1px white solid;
  background-color: rgb(255, 255, 255, 0.5);
  backdrop-filter: blur(rpx(5));
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
  margin-left: rpx(40);
}
.dropdown-menu ::v-deep(.el-dropdown-menu__item) {
  font-size: rpx(8);
  color: black;
  border-radius: rpx(5);
  width: rpx(78);
  height: rpx(20);
  margin-left: rpx(4);
  margin-bottom: rpx(8);
}
.dropdown-menu ::v-deep(.el-dropdown-menu__item:hover),
.dropdown-menu ::v-deep(.el-dropdown-menu__item:focus),
.dropdown-menu ::v-deep(.el-dropdown-menu__item:active) {
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
.right-box {
  flex: 2;
  position: relative; // 添加相对定位;
}
.top-right-box {
  position: absolute; // 添加绝对定位
  margin-left: rpx(260); // 调整右边距离
  width: rpx(100);
  display: flex;
  justify-content: flex-end;
}
.top-right-box {
  ::v-deep(.el-input__wrapper) {
    height: rpx(15);
    font-size: rpx(6);
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: rpx(12);
    border: white 1px solid;
    color: #aaa5c5;
  }
  ::v-deep(.el-input__icon) {
    color: #aaa5c5; // 设置输入框图标颜色为白色
  }
  // 添加占位符样式
  ::v-deep(.el-input__inner::placeholder) {
    color: #aaa5c5;
  }
  // 添加输入框文字颜色样式
  ::v-deep(.el-input__inner) {
    color: black;
  }
}
// 搜索
.search-input {
  width: rpx(200); // 增加搜索框宽度
  height: rpx(30); // 增加搜索框高度
  font-size: rpx(9);
  border-radius: rpx(8); // 添加圆角
  border: 1px solid #dcdfe6; // 添加边框
}
::v-deep(.el-input__inner) {
  color: #333; // 调整文字颜色
}


.box-2 {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  display: flex; // 确保子元素水平排列
  flex-wrap: wrap; // 允许子元素换行;
  cursor: pointer; // 添加鼠标指针样式
  margin: rpx(10) 0; 
  overflow-y: auto;
}
// Chrome、Edge等浏览器的滚动条样式
.box-2::-webkit-scrollbar {
  width: rpx(2);
}
.box-2::-webkit-scrollbar-track {
  background: transparent; // 设置滚动条轨道背景
  border-radius: rpx(3); // 设置滚动条轨道圆角
}
.box-2::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
  border-radius: rpx(3); // 设置滚动条滑块圆角
}
.box-2::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
}
.small-box {
  flex: 0 0 calc(33.333% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距
  margin-left: rpx(10); // 设置小盒子间距
  margin-top: rpx(3); // 设置小盒子间距
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: black;
  font-size: rpx(8);
}
.nested-box {
  width: rpx(150);
  height: rpx(80);
  border-radius: rpx(10);
  margin-top: rpx(5);
  display: flex;
  border: 1px solid white; // 添加边框;
  justify-content: center;
  align-items: center;
}
.nested-box:hover,
.nested-box:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.additional-text {
  margin-top: auto;
  margin-bottom: rpx(4);
  font-size: rpx(8);
}
</style>

<style lang="scss">
/* 消除小三角 */
.el-popper__arrow {
  display: none;
}
.el-popper.is-light,
.el-dropdown__popper.el-popper {
  background: transparent;
  border: none;
  box-shadow: none;
}
.el-dropdown__popper {
  --el-dropdown-menuItem-hover-color: none;
}
</style>

<style lang='scss'>
// 搜索下拉框样式
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
 .el-autocomplete-suggestion .el-scrollbar__wrap{
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid white;
  border-radius: rpx(5);
  backdrop-filter: blur(rpx(5));
}
 .el-autocomplete-suggestion li{
  color: black;
  font-size: rpx(7);
  padding: rpx(5) rpx(8); // 调整下拉项内边距
}
 .el-autocomplete-suggestion li:hover{
  background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  );
}
</style>