AIClass/src/views/AiPoetry/AIPoetryCourse.vue

<template>
  <div class="home-container">
    <div class="sidebar-container">
      <div class="sidebar-layout">
        <div
            class="icon-expand"
            :style="{
            backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
            left: drawerVisible ? '20%' : '0'
          }"
            @click="toggleDrawer"
        >
          <span
              class="vertical-lines"
              :style="{
              color: drawerVisible ? '#8a78d0' : 'white'
            }"
          >||</span
          >
        </div>
      </div>

      <transition name="drawer-slide">
        <div class="main-content" :class="{ 'hidden': !drawerVisible }" v-if="drawerVisible">
          <div class="drawer-box">
            <el-row class="tac">
              <el-col :span="12">
                <el-menu
                    v-if="menuInitialized"
                    :default-active="currentActiveIndex"
                    :default-openeds="[currentOpenedMenu]"
                    :class="{ 'el-menu-vertical-demo': true }"
                    unique-opened
                >
                  <el-sub-menu
                      v-for="menu in menuList"
                      :key="menu.id"
                      :index="menu.id"
                      @click="handleMenuClick(menu)"
                  >
                    <template #title>
                      <span>{{ menu.title }}</span>
                    </template>
                    <el-menu-item
                        v-for="(item, index) in menu.data"
                        :key="menu.id + '-' + index"
                        :index="menu.id + '-' + (index + 1).toString()"
                        @click="goToAIExperience(item)"
                    >
                      {{ item.ctTypeSort }} {{ item.ctType }}
                    </el-menu-item>
                  </el-sub-menu>
                </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" @visible-change="handleVisibleChange">
              <el-button type="primary">
                {{ selectedGrade }}
                <el-icon class="el-icon--right" v-if="!dropdownVisible"><ArrowDownBold /></el-icon>
                <el-icon class="el-icon--right" v-else><ArrowUpBold /></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"
                :key="searchKey"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <template #default="{ item }">
                <div class="scrollbar">
                  {{ item.ctTypeSort }} {{ item.ctType }}
                </div>
              </template>
            </el-autocomplete>
          </div>
        </div>
      </div>

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

        <div class="parent-mobile-container">
          <div
              class="parent-mobile-item"
              v-for="(course, index) in currentCourseData"
              :key="course.id"
              @click="goToAIExperience(course)"
          >
            <div class="parent-mobile-image">
              <img :src="course.ctTypeImage" :alt="course.title" />
            </div>
            <div class="parent-mobile-content">
              <div class="parent-mobile-title">
                <span class="parent-mobile-index">{{ course.ctTypeSort }}</span>
                {{ course.ctType }}
              </div>
              <div class="parent-mobile-desc">{{ course.ctTypeDescribe || '' }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentCourseData.length === 0" class="empty-state" style="width: 100%; text-align: center; padding: 40px;">
          <p>暂无课程</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { ClassList, ClassOutline } from '@/api/class.js'
import {
  ArrowUpBold,
  ArrowDownBold,
  ArrowRightBold,
  Expand,
  Reading,
  Fold,
  Tickets
} from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
import { Message } from '@/utils/message/Message.js'
import { useRouter } from 'vue-router'
import { CONFIG } from '@/utils/roleUtils.js'
import '@/styles/parentMobileCourse.css'

const router = useRouter()
const selectedGrade = ref('')
const isMobile = ref(false)
const drawerVisible = ref(true)
const dropdownVisible = ref(false)

const handleVisibleChange = (visible) => {
  dropdownVisible.value = visible
}

const poetryCourseData = ref([])

const menuConfigTemp = [
  { id: '/poetry', title: 'AI诗词课', type: '3', data: poetryCourseData }
]

const menuConfig = computed(() => {
  return menuConfigTemp.filter(item => {
    return roleRouteMenuSet.value.includes(item.id)
  })
})

const menuList = computed(() => {
  return menuConfig.value.map(menu => ({
    ...menu,
    data: menu.data.value
  }))
})

const roleRouteMenuSet = computed(() => {
  try {
    const roleRouteMenuStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_MENU_KEY)
    return roleRouteMenuStr ? JSON.parse(roleRouteMenuStr) : []
  } catch (error) {
    console.error('Error parsing roleRouteMenuSet:', error)
    return []
  }
})

const currentActiveIndex = ref('/poetry-1')
const currentOpenedMenu = ref('/poetry')
const menuInitialized = ref(false)
const activeMenuKey = 'aiPoetryCourseActiveMenu'
const activeIndexKey = 'aiPoetryCourseActiveIndex'

const encodeImageUrl = (url) => {
  if (!url) return url
  try {
    const decoded = decodeURI(url)
    const lastSlash = decoded.lastIndexOf('/')
    if (lastSlash === -1) {
      return encodeURIComponent(decoded).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
    }
    const base = decoded.substring(0, lastSlash + 1)
    const filename = decoded.substring(lastSlash + 1)
    const encodedFilename = encodeURIComponent(filename)
      .replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
    return base + encodedFilename
  } catch {
    try {
      const lastSlash = url.lastIndexOf('/')
      if (lastSlash === -1) {
        return encodeURIComponent(url).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
      }
      const base = url.substring(0, lastSlash + 1)
      const filename = url.substring(lastSlash + 1)
      const encodedFilename = encodeURIComponent(filename)
        .replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
      return base + encodedFilename
    } catch {
      return url
    }
  }
}

const processCourseData = (data) => {
  return data.map((item, index) => {
    item.ctTypeSort = index + 1
    item.ctTypeSort = item.ctTypeSort > 9 ? item.ctTypeSort : "0" + item.ctTypeSort
    item.ctTypeImage = encodeImageUrl(item.ctTypeImage)
    return item
  })
}

const saveActiveState = (menuId, index) => {
  localStorage.setItem(activeMenuKey, menuId)
  localStorage.setItem(activeIndexKey, index)
}

const fetchClassOutline = async (classId) => {
  try {
    await Promise.all(menuConfig.value.map(async (menu) => {
      const res = await ClassOutline(classId, menu.type)
      if (res.code === 0) {
        menu.data.value = processCourseData(res.data)
      }
    }))
  } catch (error) {
    console.error('获取课程大纲数据失败:', error)
  }
}

const handleMenuClick = (menu) => {
  currentOpenedMenu.value = menu.id
  saveActiveState(menu.id, menu.id)
  SearchInput.value = ''

  if (menu.data.value && menu.data.value.length > 0) {
    currentActiveIndex.value = menu.id + '-1'
  }
}

const handleGradeSelect = command => {
  selectedGrade.value = command
  localStorage.setItem('selectedGrade', command)
  SearchInput.value = ''
  const selectedItem = classData.value.find(item => item.ctType === command)
  if (selectedItem) {
    localStorage.setItem('selectedGradeId', selectedItem.id)
    fetchClassOutline(selectedItem.id).then(() => {
      const savedMenu = localStorage.getItem(activeMenuKey)
      const savedIndex = localStorage.getItem(activeIndexKey)
      if (savedMenu && savedIndex) {
        currentOpenedMenu.value = savedMenu
        currentActiveIndex.value = savedIndex
      }
    })
  }
}

const checkIsMobile = () => {
  if (typeof window !== 'undefined') {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
        window.innerWidth <= 768;
  }
  return false;
}

const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}

const classData = ref([])

const fetchCtTypes = async () => {
  try {
    const response = await ClassList()
    if (response.code === 0) {
      classData.value = response.data
      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) {
        fetchClassOutline(selectedItem.id)
      }
    }
  } catch (error) {
    console.error('获取 ctType 数据失败:', error)
  }
}

const pageTitle = ref('返回首页')

onMounted(() => {
  isMobile.value = checkIsMobile();
  if (isMobile.value) {
    drawerVisible.value = false;
  }

  fetchCtTypes()

  const savedMenu = localStorage.getItem(activeMenuKey)
  const savedIndex = localStorage.getItem(activeIndexKey)

  if (savedMenu && savedIndex) {
    currentOpenedMenu.value = savedMenu
    currentActiveIndex.value = savedIndex
  }

  menuInitialized.value = true
})

const SearchInput = ref('')
const searchKey = ref(Date.now())

const currentCourseData = computed(() => {
  const menu = menuConfig.value.find(m => m.id == currentOpenedMenu.value)
  return (menu && menu.data.value) || poetryCourseData.value
})

const querySearch = (queryString, cb) => {
  const data = currentCourseData.value
  const results = queryString
      ? data.filter(item => {
        return item.ctType.toLowerCase().includes(queryString.toLowerCase()) ||
            (item.ctTypeSort && item.ctTypeSort.toString().includes(queryString))
      })
      : data
  cb(results)
}

const handleSearchSelect = item => {
  goToAIExperience(item)
  SearchInput.value = '';
}

const buttonVisible = ref(false)

const goBack = () => {
  router.push('/aiPoetryHome')
}

const goToAIExperience = (outlineData) => {
  const menuId = currentOpenedMenu.value
  const menu = menuConfig.value.find(m => m.id === menuId)
  const currentData = menu ? menu.data.value : []
  const index = currentData.findIndex(item => item.id === outlineData.id)

  if (index !== -1) {
    const menuIndex = menuId + '-' + (index + 1)
    saveActiveState(menuId, menuIndex)
  }

  router.push({
    path: '/ai-poetry-develop',
    state: { typeId: outlineData.id, typeName: outlineData.ctType, typeSort: outlineData.ctTypeSort }
  })
}
</script>

<style scoped lang="scss">
@use 'sass:math';

@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;
}

.main-content {
  width: rpx(150);
  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);
}

.el-sub-menu ::v-deep(.el-menu){
  background-color: transparent;
}

.el-menu-item {
  width: rpx(130);
  height: rpx(25);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}

.el-sub-menu ::v-deep(.el-sub-menu__title) {
  width: rpx(130);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(9);
  font-weight: bold;
  padding-left: rpx(10) !important;
  height: rpx(25);
  line-height: rpx(30);
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-sub-menu ::v-deep(.el-sub-menu__title:hover) {
  background: linear-gradient(
          to bottom,
          #ffd700,
          #ffa500
  );
  color: black;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
}

.el-sub-menu.is-opened ::v-deep(.el-sub-menu__title) {
  background: linear-gradient(
          to bottom,
          #ffd700,
          #ffa500
  );
  color: black;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
}

.el-sub-menu ::v-deep(.el-icon) {
  font-size: rpx(12);
  color: white;
}

.el-sub-menu ::v-deep(.el-sub-menu__icon-arrow) {
  color: white;
  font-size: rpx(10);
  margin-left: auto;
  margin-top: rpx(-5);
  display: block;
  width: rpx(16);
}

.el-sub-menu.is-opened ::v-deep(.el-icon) {
  color: black;
}

.el-sub-menu ::v-deep(.el-sub-menu__title:hover .el-icon) {
  color: black;
}

.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,
          #ffd700,
          #ffa500
  );
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
  color: black;
}

.drawer-box {
  position: absolute;
  display: flex;
  margin-top: rpx(10);
  height: 100%;
  width: 100%;
}

.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: left;
  flex: 1;
  display: flex;
  align-items: center;
  gap: rpx(5);
}

.box-icon {
  height: 100%;
  display: flex;
  align-items: center;
  color: black;
  padding-left: rpx(15);
  font-size: rpx(10);
  cursor: pointer;
  z-index: 999;
}

.dropdown-box {
  height: 100%;
  display: flex;
  align-items: center;
}

.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;
}

.dropdown-menu {
  width: rpx(100);
  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: 1;
  position: relative;
  display: flex;
  justify-content: right;
  align-items: center;
}

.top-right-box {
  width: rpx(130);
  display: flex;
  justify-content: flex;
}

.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;
  }

  ::v-deep(.el-input--prefix){
    width: rpx(100);
    text-align: right;
  }
}

.search-input {
  width: rpx(200);
  height: rpx(30);
  font-size: rpx(9);
  border-radius: rpx(8);
  border: 1px solid #8B4513;
}

.box-2 {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  overflow-y: auto;
}

.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, #8B4513, #D2691E);
  border-radius: rpx(3);
}

.box-2::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #8B4513, #D2691E);
}

.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: #8B4513;
  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 #8B4513;
  justify-content: center;
  align-items: center;
}

.nested-box:hover,
.nested-box:active {
  box-shadow: 0 4px 8px rgba(139, 69, 19, 0.5);
}

.additional-text {
  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';

@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 #8B4513;
  border-radius: rpx(5);
  backdrop-filter: blur(rpx(5));
}

.el-autocomplete-suggestion li{
  color: #8B4513;
  font-size: rpx(7);
  padding: rpx(5) rpx(8);
}

.el-autocomplete-suggestion li:hover{
  background: linear-gradient(
          to bottom,
          #ffd700,
          #ffa500
  );
}
</style>