AIClass/src/components/HomePage.vue

<template>
  <div class="home-container">
    <div class="box-1">
      <div class="inner-box left-box">
        <span>{{ platformTitle }}</span>
        <div class="dropdown-box">
          <!-- 下拉菜单 -->
          <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" popper-class="no-arrow-dropdown">
            <el-button type="primary">
              {{ selectedGrade }}
              <el-icon class="el-icon--right"><ArrowDown /></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-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI编程课' }"
            @click="router.push(blocklyRoutes.home)"
            >AI编程课</el-button
          >
          <el-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI实验课' }"
            @click="router.push(aiCourseRoutes.home)"
            >AI实验课</el-button
          >
          <el-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI艺术课' }"
            @click="
              ElMessage.warning('此版本未开放，敬请期待！')
            "
            >AI艺术课</el-button
          >
          <!-- 用户名显示 -->
          <div class="user-name-box">
            {{ userName }}
          </div>
          <!-- 退出登录 -->
          <el-button round class="logout-box-btn" @click="LogoutClick()">
            <img :src="logoutIcon" alt="Logout" />
            退出登录
          </el-button>
        </div>
      </div>
    </div>
    <div class="box-2">
      <div
        class="left-box-in-box2"
        @click="goToAIGeneralCourse('AI智能课')"
        :style="{ backgroundImage: `url(${indexImages[0]})` }"
      >
        <span>智能课</span>
      </div>
      <div
        class="center-box-in-box2"
        @click="goToAILab()"
        :style="{ backgroundImage: `url(${indexImages[1]})` }"
      >
        <span>AI实验室</span>
      </div>
      <div class="right-box-in-box2">
        <div
          class="top-sub-box"
          :style="{ backgroundImage: `url(${indexImages[2]})` }"
           @click="goToEvaluation"
        >
          <span>能力测评</span>
        </div>
        <div
          class="bottom-sub-box"
          :style="{ backgroundImage: `url(${indexImages[3]})` }"
          @click="goToPersonalized"
        >
          <span>评估报告</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ClassList } from '@/api/class.js'
import {ArrowDown} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 导入图片
import intelligenceImg from '@/assets/images/intelligence.png'
import roomImg from '@/assets/images/room.png'
import testImg from '@/assets/images/test.png'
import studyImg from '@/assets/images/study.png'

// 退出登录图标
import logoutIcon from '@/assets/icon/logout.png'
// 退出登录
import {logoutLogic, removeLocalStorageKey} from '@/utils/loginUtils.js'
import {aiCourseRoutes, blocklyRoutes, homeRoutes} from "@/router/index.js";

// 平台标题响应式变量
const platformTitle = ref(import.meta.env.VITE_APP_TITLE)
// 用户名响应式变量
const userName = ref(import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME)
// 更新平台标题
const updatePlatformTitle = () => {
  platformTitle.value = localStorage.getItem('tenantName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT
}
// 更新用户名
const updateUserName = () => {
  userName.value = localStorage.getItem('userName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME
}

// 获取当前路由对象
const router = useRouter()
// 退出登录
const LogoutClick = async () => {
  await logoutLogic(router, homeRoutes.login)
}

// 默认选中 AI 通识课
const selectedButton = ref('AI通识课')

// 图片路径
const indexImages = ref([intelligenceImg, roomImg, testImg, studyImg])
// AI初体验
const goToAIGeneralCourse = title => {
  router.push({ path: '/ai-general-course', state: { title } })
}
//AI实验室
const goToAILab = () => {
  router.push({
    path: '/ai-laboratory',
    // 跳转页面携带下拉菜单选中项的值
    state: { grade: selectedGrade.value }
  })
}

// 能力测评
const goToEvaluation = () =>{
  router.push({
   path:'/evaluation'
 })
}

// 评估报告
const goToPersonalized = () =>{
  router.push({
    path:'/personalized'
  })
}

// 下拉菜单选中项
const selectedGrade = ref(localStorage.getItem('selectedGrade') || '')
// 年级ID存储变量
const selectedGradeId = ref(localStorage.getItem('selectedGradeId') || '')
// 获取年级
const classData = ref([])
const fetchCtTypes = async () => {
  try {
    const response = await ClassList()
    if (response.code === 0) {
      classData.value = response.data
      // 获取到数据，将第一个选项的值作为默认选中值
     if (classData.value.length > 0 && !selectedGrade.value) {
        selectedGrade.value = classData.value[0].ctType
        selectedGradeId.value = classData.value[0].id
        localStorage.setItem('selectedGrade', selectedGrade.value)
        localStorage.setItem('selectedGradeId', selectedGradeId.value)
      }
    }
  } catch (error) {
    console.error('获取 ctType 数据失败:', error)
  }
}

// 监听 selectedGrade 变化，保存到 localStorage
watch(selectedGrade, (newValue) => {
  if (newValue) {
    localStorage.setItem('selectedGrade', newValue)
    // 当年级名称变化时，查找对应的ID
    const selectedItem = classData.value.find(item => item.ctType === newValue)
    if (selectedItem) {
      selectedGradeId.value = selectedItem.id
      localStorage.setItem('selectedGradeId', selectedGradeId.value)
    }
  }
})
// 监听 selectedGradeId 变化，保存到 localStorage
watch(selectedGradeId, (newValue) => {
  if (newValue) {
    localStorage.setItem('selectedGradeId', newValue)
  }
})

// 处理下拉菜单选择
const handleGradeSelect = (command) => {
  selectedGrade.value = command
  // 查找对应的ID
  const selectedItem = classData.value.find(item => item.ctType === command)
  if (selectedItem) {
    selectedGradeId.value = selectedItem.id
  }
}

onMounted(() => {
  fetchCtTypes()
  // 初始化平台标题
  updatePlatformTitle()
  // 初始化用户名
  updateUserName()
  // storage事件监听器，监听其他标签页对localStorage的修改
  window.addEventListener('storage', (e) => {
    if (e.key === 'tenantName') {
      updatePlatformTitle()
    }
    if (e.key === 'userName') {
      updateUserName()
    }
  })

  //删除所有以token开头的键值对
  removeLocalStorageKey(localStorage.getItem("token") + "_ai_")//AI实验室
  removeLocalStorageKey(localStorage.getItem('token') + "_course_")//通识课、实操课
  removeLocalStorageKey(localStorage.getItem("token") + "_blockly_")//编程课
  removeLocalStorageKey(localStorage.getItem("token") + "_aiCourse_")//AI实验课
})
// 全局:更新租户名称
window.updateTenantName = (newName) => {
  localStorage.setItem('tenantName', newName)
  updatePlatformTitle()
}
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
.logout-box {
  width: rpx(100);
  position: fixed;
}
.logout-box-btn {
  width: rpx(65); // 使用 rpx 函数设置按钮宽度
  height: rpx(15); // 使用 rpx 函数设置按钮高度
  margin: rpx(10) rpx(10) 0 0; // 使用 rpx 函数设置外边距
  background-color: transparent;
  color: white;
  border: none; // 移除默认边框
  font-size: rpx(7); // 使用 rpx 函数设置字体大小
  outline: none; // 移除默认的外边框
}
.logout-box-btn img {
  width: rpx(10);
}
// 用户名显示
.user-name-box {
  width: auto;
  height: rpx(15);
  margin: rpx(10) rpx(-10) 0 0;
  color: white;
  font-size: rpx(8);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: rpx(15);
  padding: rpx(0) rpx(10);
  min-width: rpx(20);
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #001169, #8a78d0);
  display: flex;
  flex-direction: column;
  gap: rpx(0);
}
.box-1 {
  width: 100%;
  height: rpx(50);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(16); // 默认字体大小
}
.box-2 {
  width: 90%;
  margin: auto;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
  box-sizing: border-box;
  // padding: 0 rpx(20); // 添加左右内边距
  cursor: pointer; // 添加鼠标指针样式
}
.box-2 span {
  // 添加 padding，使文字距上边和左边留有间距
  padding: rpx(10) 0 0 rpx(10);
  font-size: rpx(12); // 默认字体大小
  color: white;
}
.left-box-in-box2,
.center-box-in-box2 {
  background-color: rgba(133, 135, 176, 0.5);
  border-radius: rpx(20);
  flex: 1; // 让三个盒子平均分配空间
  margin: 0 rpx(10); // 添加左右间距
  height: 85%; // 高度占满容器
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-origin: border-box; // 确保背景图从边框开始显示
  background-clip: padding-box; // 确保背景图不会延伸到边框外
}
.left-box-in-box2:hover,
.left-box-in-box2:active,
.center-box-in-box2:hover,
.center-box-in-box2:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.left-box-in-box2,
.center-box-in-box2,
.top-sub-box,
.bottom-sub-box {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.right-box-in-box2 {
  flex: 1; // 让三个盒子平均分配空间
  margin: 0 rpx(10); // 添加左右间距
  height: 85%; // 高度占满容器
  display: flex;
  // 确保两个子盒子上下排列
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: rpx(10);
}
.top-sub-box,
.bottom-sub-box {
  background-color: rgba(133, 135, 176, 0.5);
  flex: 1; // 让两个子盒子平均分配空间;
  display: flex;
  border-radius: rpx(20);
  width: 100%; // 宽度占满容器;
}
.top-sub-box:hover,
.top-sub-box:active,
.bottom-sub-box:hover,
.bottom-sub-box:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.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: center;
  display: flex;
  flex: 1;
  padding-left: rpx(30);
    cursor: pointer;
}

.left-box span {
  position: static;
  margin-top: 0;
  margin-left: 0;
  margin-right: rpx(10); // 与下拉菜单之间的间距
  font-size: rpx(11);
  color: white;
  max-width: rpx(200); // 最大宽度限制
  white-space: normal; // 允许换行
  line-height: rpx(16); // 行高
  text-align: left;
}

.right-box {
  flex: 1;
  position: relative; // 添加相对定位;
  margin-right: rpx(25);
}
.top-right-box {
  position: absolute; // 添加绝对定位
  width: 100%; // 设置盒子宽度，可按需调整
  height: 60px; // 设置盒子高度，可按需调整
  display: flex;
  justify-content: flex-end;
  cursor: pointer; // 添加鼠标指针样式
}
.top-right-btn {
  width: rpx(50); // 使用 rpx 函数设置按钮宽度
  height: rpx(15); // 使用 rpx 函数设置按钮高度
  margin: rpx(10) rpx(5) 0 0; // 使用 rpx 函数设置外边距
  background-color: transparent;
  color: white;
  border: none; // 移除默认边框
  font-size: rpx(8); // 使用 rpx 函数设置字体大小
  outline: none; // 移除默认的外边框
}
.top-right-btn:hover {
  background-color: rgb(255, 255, 255, 0.7);
  border: 1px white solid;
  color: black;
  outline: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.dropdown-box {
  align-items: center; // 垂直居中;
  margin-top: 0;
  display: flex;
}
.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-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);
}

.el-scrollbar__view .el-dropdown__list{
  background-color: transparent;
}

.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
  );
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
}
</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>