AIClass/src/views/programming/Interface.vue

<template>
  <!-- 编程课程视频页面 -->
  <div class="home-container">
    <div class="content-box">
      <div class="box-1">
        <div class="inner-box left-box">
          <div class="box-icon" @click="emit('closeVideo')">
            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
            返回
          </div>
        </div>
      </div>

      <div class="box-2">
        <!-- 课程标题 -->
        <div class="small-title">
          <span>{{ course.courseName }}</span>
        </div>

        <el-empty v-if="isDisabled"
                  image-size="500"
          description="您无权查看该课程！"
          :image="isDisabledImage"
        />

        <template v-else>
          <!-- 视频组件 -->
          <VideoPlayer
              v-if="course.courseContentType === 'video'"
              :contentType="course.courseContentType"
              :videoPath="course.courseVideoPath"
              :courseId="course.id || ''"
              :typeId="typeId"
              :courseConfigList="course.courseConfigList || []"
              :allIndices="flattenMenuItems()"
              :currentIndex="course.key || ''"
              @timeUpdate="handleVideoTimeUpdate"
              @videoEnded="handleVideoEnded"
              @switchVideo="switchVideo"
          />
          <!-- 图片 -->
          <ImageView v-if="course.courseContentType === 'image'" :imagePath="course.courseImagePath" altText="课程图片"></ImageView>

          <!-- PPT -->
          <PptView v-if="course.courseContentType === 'ppt'" :pptPath="course.pptPath" ref="pptRef"></PptView>

          <!--文生文-->
          <TextToText class="contentClass" v-if="course.courseContentType === 'aiTextToText'" ref="aiTextToText"></TextToText>

          <!--文生图-->
          <TextToImage class="contentClass" v-if="course.courseContentType === 'aiTextToImage'" ref="aiTextToImage"></TextToImage>

          <!--图生图-->
          <ImageToImage class="contentClass" v-if="course.courseContentType === 'aiImageToImage'" ref="aiImageToImage"></ImageToImage>

          <!--图生视频-->
          <ImageToVideo class="contentClass" v-if="course.courseContentType === 'aiImageToVideo'" ref="aiImageToVideo"></ImageToVideo>
          
          <!--编程地图游戏-->
          <MapGame v-if="course.courseContentType === 'blockly'"
                   :game-id="course.id"
                   :map-background="course.blocklyBackground"
                   :map-tile-size="course.blocklyTileSize"
                   :map-start-point="course.blocklyStartPoint"
                   :map-end-point="course.blocklyEndPoint"
                   :map-walkable-points="course.blocklyWalkablePoints"
                   :user-direction="course.blocklyUserDirection"
                   :user-image="course.blocklyUserImage"
                   :info="course.blocklyInfo"
                   :game-title="course.courseName"
                   :course-list="props.courseList"
                   :current-index="props.courseList.findIndex(item => item.id === course.id)"
                   @close-game="emit('closeVideo')"
                   @prev-section="playPreviousVideo"
                   @next-section="playNextVideo"
          ></MapGame>

        </template>

        <!-- 视频切换按钮 - 始终显示 -->
        <div class="video-switch">
          <div class="caret-left" @click="playPreviousVideo">
            <el-button type="warning" round :disabled="props.courseList.findIndex(item => item.id === course.id) === 0">
              <img :src="leftImg" alt="Left" />上一节</el-button 
            >
          </div>
          <div class="caret-right" @click="playNextVideo">
            <el-button type="warning" round :disabled="props.courseList.findIndex(item => item.id === course.id) === props.courseList.length - 1"
              >下一节<img :src="rightImg" alt="Right" />
            </el-button>
          </div>
        </div>

      </div>
    </div>

    <!-- 弹框组件 -->
    <DialogComponents
      :questionDialogVisible="questionDialogVisible"
      :currentQuestion="courseConfig"
      :gradeId="gradeId"
      :typeId="typeId"
      :courseId="course.id || ''" 
      @closeQuestionDialog="closeQuestionDialog"
      @submitAnswer="handleSubmitAnswer"
    />

  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import {  useRouter } from 'vue-router'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import isDisabledImage from '@/assets/images/permission/isDisabled.png'

import { ClassType } from '@/api/class.js'
import { Message } from '@/utils/message/Message.js'
import { saveRecord } from '@/api/personalized/index.js'

// 导入全局状态
import { globalState } from '@/utils/globalState.js'

// 导入图标
import leftImg from '@/assets/icon/backward.png'
import rightImg from '@/assets/icon/f-backward.png'

// 导入新创建的组件
import VideoPlayer from '@/components/videopage/VideoPlayer.vue'
import DialogComponents from '@/components/videopage/DialogComponents.vue'
import PptView from "@/components/PPT/PptView.vue";
import ImageView from '@/components/Image/ImageView.vue'

// AI实验室
import TextToText from "@/components/ai/text/TextToText.vue";
import TextToImage from "@/components/ai/image/TextToImage.vue";
import ImageToImage from "@/components/ai/image/ImageToImage.vue";
import ImageToVideo from "@/components/ai/video/ImageToVideo.vue";
import MapGame from "@/components/blockly/MapGame.vue";

const router = useRouter() // 获取当前路由对象
// 渲染页面标题
const boxIconTitle = ref('')
// 定义组件的props
const props = defineProps({
  courseData: {
    type: Object,
    default: null
  },
  courseList: {
    type: Array,
    default: () => []
  }
})

// 定义emit事件
const emit = defineEmits(['closeVideo'])

// 课程集合数据
const courseList = ref([])
//当前课程 - 重新定义course来接收传递过来的数据
const course = ref({})
// 菜单数据
const menuItems = ref([])
// 课程集合数据
const videoPathMap = ref({})
// 已观看课程ID列表
const watchedCourseIds = ref([])
// 试题弹框显示状态
const questionDialogVisible = ref(false)
// 当前显示的试题
const courseConfig = ref({})
// 年级id
const gradeId = ref('')
// 课程大纲id
const typeId = ref('')
// 课程小节id
const courseId = ref('')
// 课程排序
const typeSort = ref('')
// 课程权限
const courseDataScope = ref([])
// 测试账号禁用视频
const isDisabled = ref(false)
//课程小节字典
const menuDict = ref({
  1: '课前回顾',
  2: '课程引入',
  3: '知识讲解',
  4: '趣味实操',
  5: '课程总结'
})


// 视频切换事件处理函数
const switchVideo = (index) => {
  // 根据索引切换视频
  if (videoPathMap.value[index]) {
    course.value = videoPathMap.value[index]
    courseId.value = course.value.id
    console.log("课程id：",courseId.value)
  } else {
    //视频不存在
    Message().notifyWarning('视频不存在！', true)
  }
  //测试账号禁用视频
  if (disableVideo(index)) return
}

// 展平所有菜单项索引
const flattenMenuItems = () => {
  const indices = []
  const traverse = items => {
    for (const item of items) {
      if (!item.children) {
        indices.push(item.key)
      } else {
        traverse(item.children)
      }
    }
  }
  traverse(menuItems.value)
  return indices
}

// 播放上一个视频
const playPreviousVideo = () => {
  if (props.courseList && props.courseList.length > 0) {
    const currentIndex = props.courseList.findIndex(item => item.id === course.value.id)
    if (currentIndex > 0) {
      const previousCourse = props.courseList[currentIndex - 1]
      // 更新当前课程数据
      course.value = {
        id: previousCourse.id,
        courseName: previousCourse.bcName,
        courseContentType: previousCourse.bcContentType,
        courseVideoPath: previousCourse.bcContent,
        courseConfigList: previousCourse.blocklyConfigList,
        key: previousCourse.id.toString(),
        // blockly相关属性，用于MapGame组件
        blocklyBackground: previousCourse.blocklyBackground,
        blocklyTileSize: previousCourse.blocklyTileSize,
        blocklyStartPoint: previousCourse.blocklyStartPoint,
        blocklyEndPoint: previousCourse.blocklyEndPoint,
        blocklyWalkablePoints: previousCourse.blocklyWalkablePoints,
        blocklyUserDirection: previousCourse.blocklyUserDirection || 0,
        blocklyUserImage: previousCourse.blocklyUserImage,
        blocklyInfo: previousCourse.blocklyInfo
      };
      courseId.value = course.value.id;
      // 更新标题
      boxIconTitle.value = course.value.courseName;
      // 禁用视频检查
      disableVideo(course.value.key);
    }
  }
}

// 播放下一个视频
const playNextVideo = () => {
  if (props.courseList && props.courseList.length > 0) {
    const currentIndex = props.courseList.findIndex(item => item.id === course.value.id)
    if (currentIndex !== -1 && currentIndex < props.courseList.length - 1) {
      const nextCourse = props.courseList[currentIndex + 1]
      // 更新当前课程数据
      course.value = {
        id: nextCourse.id,
        courseName: nextCourse.bcName,
        courseContentType: nextCourse.bcContentType,
        courseVideoPath: nextCourse.bcContent,
        courseConfigList: nextCourse.blocklyConfigList,
        key: nextCourse.id.toString(),
        // blockly相关属性，用于MapGame组件
        blocklyBackground: nextCourse.blocklyBackground,
        blocklyTileSize: nextCourse.blocklyTileSize,
        blocklyStartPoint: nextCourse.blocklyStartPoint,
        blocklyEndPoint: nextCourse.blocklyEndPoint,
        blocklyWalkablePoints: nextCourse.blocklyWalkablePoints,
        blocklyUserDirection: nextCourse.blocklyUserDirection || 0,
        blocklyUserImage: nextCourse.blocklyUserImage,
        blocklyInfo: nextCourse.blocklyInfo
      };
      courseId.value = course.value.id;
      // 更新标题
      boxIconTitle.value = course.value.courseName;
      // 禁用视频检查
      disableVideo(course.value.key);
    }
  }
}


// 播放下一个视频
const handleVideoEnded = () => {
  // 记录当前视频ID为已观看
  if (
    course.value &&
    course.value.id &&
    !watchedCourseIds.value.includes(course.value.id)
  ) {
    watchedCourseIds.value.push(course.value.id)
    localStorage.setItem(
      'watchedCourseIds',
      JSON.stringify(watchedCourseIds.value)
    )
  }

  // 如果是图片类型，不需要自动播放下一个
  if (course.value.courseContentType === 'video') {
    const allIndices = flattenMenuItems()
    const currentIndexInList = allIndices.indexOf(course.value.key)
    if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
      const nextIndex = allIndices[currentIndexInList + 1]
      if (videoPathMap.value[nextIndex]) {
        course.value = videoPathMap.value[nextIndex]
        courseId.value = course.value.id
        console.log("课程id：",courseId.value)
        //测试账号禁用视频
        if (disableVideo(nextIndex)) return
      } else {
        //视频不存在
        Message().notifyWarning('视频不存在！', true)
      }
    }
  }

  const allIndices = flattenMenuItems()
  const currentIndexInList = allIndices.indexOf(course.value.key)
  if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
    const nextIndex = allIndices[currentIndexInList + 1]
    if (videoPathMap.value[nextIndex]) {
      course.value = videoPathMap.value[nextIndex]
      courseId.value = course.value.id
      console.log("课程id：",courseId.value)
      //测试账号禁用视频
      if (disableVideo(nextIndex)) return
    } else {
      //视频不存在
      Message().notifyWarning('视频不存在！', true)
    }
  }
}

// 禁用视频
const disableVideo = (index = course.value.key) => {

  // 未配置课程权限，不禁用视频
  if (!courseDataScope.value || courseDataScope.value.length === 0) {
    return false
  }

  //配置了课程权限，且视频id不在权限列表中
  isDisabled.value = !courseDataScope.value.some(item => Number(item) === videoPathMap.value[index].id)
  if (isDisabled.value) {
    Message().notifyWarning('您的账号并未开放此课程！', true)
    return isDisabled.value;
  }

  return isDisabled.value;
}

// 处理视频时间更新事件
const handleVideoTimeUpdate = ({ currentTime, progressPercentage, courseConfig: config }) => {
  if (config) {
    questionDialogVisible.value = true
    courseConfig.value = config
    // 保存试题进度
    const saveQuestProgress = async () =>{
      try {
        // 确保courseId已经设置
        if (!courseId.value && typeId.value) {
          const courseRes = await ClassType(typeId.value)
          if (courseRes.data && courseRes.data.length > 0) {
            courseId.value = course.value && course.value.id ? course.value.id : courseRes.data[0].id
          }
        }
        if (config.id) {
          // 保存弹窗问题进度
          await saveRecord({
            brpNjId: gradeId.value,
            brpCtId: typeId.value,
            brpCourseConfigId: config.id,
            brpCourseId: courseId.value,
            brpType: 'courseQuest',
            brpProgress: progressPercentage
          })
        } else {
          console.error('无法保存试题进度: 试题id不存在')
        }
      }catch(error){
        console.error(`保存试题进度失败:`, error)
      }
    }
    // 调用异步函数
    saveQuestProgress()
  }
}

// 关闭试题弹框
const closeQuestionDialog = () => {
  questionDialogVisible.value = false
}

// 提交答案
const handleSubmitAnswer = ({ selectedOption }) => {
  questionDialogVisible.value = false
}

// 课程小节数据提取
const getAllCourseSections = () => {
  let sections = []
  const traverse = items => {
    items.forEach(item => {
      if (item.children) {
        traverse(item.children)
      } else {
        sections.push({ title: item.title, key: item.key })
      }
    })
  }
  traverse(menuItems.value)
  return sections
}

// 初始化课程数据范围
const initCourseDataScope = () => {
  const scope = localStorage.getItem("courseDataScope");
  if (scope) {
    courseDataScope.value = scope.split(",");
  }
};

// 处理父组件传递的课程数据
const handleParentCourseData = () => {
  if (!props.courseData) return false;
  console.log('从父组件接收到的课程数据:', props.courseData);
  // 设置返回按钮标题
  boxIconTitle.value = props.courseData.bcName;
  // 重新定义course接收传递过来的数据
  course.value = {
    id: props.courseData.id,
    courseName: props.courseData.bcName,
    courseContentType: props.courseData.bcContentType,
    courseVideoPath: props.courseData.bcContent,
    courseConfigList: props.courseData.blocklyConfigList,
    key: props.courseData.id.toString(),
    // blockly相关属性，用于MapGame组件
    blocklyBackground: props.courseData.blocklyBackground,
    blocklyTileSize: props.courseData.blocklyTileSize,
    blocklyStartPoint: props.courseData.blocklyStartPoint,
    blocklyEndPoint: props.courseData.blocklyEndPoint,
    blocklyWalkablePoints: props.courseData.blocklyWalkablePoints,
    blocklyUserDirection: props.courseData.blocklyUserDirection || 0,
    blocklyUserImage: props.courseData.blocklyUserImage,
    blocklyInfo: props.courseData.blocklyInfo
  };
  courseId.value = course.value.id;
  // 如果有配置，禁用视频检查
  if (!disableVideo(course.value.key)) {
    console.log('课程已加载:', course.value);
  }
  return true;
};

// 处理课程数据列表
const processCourseDataList = (data) => {
  // 对返回的课程数据进行处理，确保ccTime为有效秒数
  return data.map(course => {
    // 检查并处理courseConfigList
    if (course.courseConfigList && Array.isArray(course.courseConfigList)) {
      // 过滤掉ccTime为0的配置项
      const validConfigList = course.courseConfigList.filter(config => 
        config.ccTime !== undefined && config.ccTime !== null && config.ccTime > 0
      );
      return {
        ...course,
        courseConfigList: validConfigList
      };
    }
    return course;
  });
};

// 构建菜单结构
const buildMenuStructure = () => {
  let topName = '';
  courseList.value.forEach((courseTemp, index) => {
    let menuIndex = courseTemp.courseLabel + '-' + (index + 1);
    // 创建菜单项
    let menu = {
      key: menuIndex,
      index: menuIndex,
      title: courseTemp.courseName
    };
    if (topName === courseTemp.courseLabel) {
      // 如果与上一个课程同属一个大节，添加到子菜单
      let topMenu = menuItems.value[menuItems.value.length - 1];
      let topMenuChildren = topMenu.children;
      if (topMenuChildren) {
        topMenuChildren.push(menu);
      } else {
        // 如果当前大节还没有子菜单，创建子菜单结构
        topMenu = {
          ...topMenu,
          title: menuDict.value[courseTemp.courseLabel],
          children: [
            {
              key: topMenu.key,
              index: topMenu.index,
              title: topMenu.title,
            },
            menu
          ]
        };
        menuItems.value[menuItems.value.length - 1] = topMenu;
      }
    } else {
      // 如果是新的大节，直接添加到菜单
      menuItems.value.push(menu);
    }
    topName = courseTemp.courseLabel;
    courseTemp['key'] = menuIndex;
    videoPathMap.value[menuIndex] = courseTemp;

    // 确定默认课程
    if (index === 0) {
      courseId.value = courseTemp.id;
      if (!disableVideo(menuIndex)) {
        course.value = courseTemp;
      } else {
        course.value.key = courseTemp.key;
        course.value.courseName = courseTemp.courseName;
      }
    }
  });
};

// 初始化已观看课程ID
const initWatchedCourseIds = () => {
  const savedWatchedIds = localStorage.getItem('watchedCourseIds');
  if (savedWatchedIds) {
    try {
      watchedCourseIds.value = JSON.parse(savedWatchedIds);
    } catch (error) {
      console.error('解析已观看课程ID失败:', error);
      watchedCourseIds.value = [];
    }
  }
};

// 渲染 课程数据结构 以及 视频
onMounted(async () => {
  // 初始化课程数据范围
  initCourseDataScope();
  // 检查是否有从父组件传递的courseData
  if (handleParentCourseData()) {
    return;
  }
  // 从路由参数获取typeId
  const typeIdParam = router.currentRoute.value.query.typeId;
  if (typeIdParam) {
    typeId.value = typeIdParam;
    try {
      // 取接口课程数据
      const res = await ClassType(typeIdParam);
      // 处理课程数据
      courseList.value = processCourseDataList(res.data);
      // 初始化已观看课程ID
      initWatchedCourseIds();
      // 构建菜单结构
      buildMenuStructure();
      
    } catch (error) {
      console.error('获取课程数据失败：', error);
      ElMessage.error('获取课程数据失败，请稍后重试');
    }
  }

  // 设置页面标题和排序
  const title = router.currentRoute.value.query.typeName;
  if (title) {
    boxIconTitle.value = String(title);
  }
  typeSort.value = router.currentRoute.value.query.typeSort;
  // 初始化年级ID
  gradeId.value = globalState.initGradeId();
})

onBeforeUnmount(() => {
  // 组件卸载时的清理
})
</script>

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

// 定义儿童风格的蓝紫色调
$primary-color: rgba(106, 90, 205, 0.52); // 主色调：蓝紫色
$secondary-color: rgba(147, 112, 219, 0.66); // 辅助色：亮蓝紫色
$accent-color: rgb(133, 89, 220); // 强调色：暗蓝紫色
$light-color: #ffffff; // 浅色背景：淡紫色
$text-color: #483d8b; // 文本颜色：靛蓝色


// 视频切换按钮样式
.video-switch {
  width: 100%;
  display: flex;
  margin-top: rpx(5);
  margin-bottom: rpx(15);
  justify-content: center;
}

.caret-right,
.caret-left {
  width: rpx(50);
   margin: 0 rpx(20);
  margin: auto;
  display: flex;
  justify-content: center;
}

.caret-left ::v-deep(.el-button.is-round),
.caret-right ::v-deep(.el-button.is-round) {
  width: rpx(50);
  height: rpx(15);
  color: white;
  font-size: rpx(7);
  border-radius: none;
  border: 1px white solid;
  background-color: rgb(255, 255, 255, 0.5);
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
}

.caret-right img,
.caret-left img {
  width: rpx(12);
}

.default-messages {
  margin-top: rpx(-10);
  margin-bottom: rpx(5);
}

/* 添加过渡样式 */

.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 子元素上下排列 */
  background-image: url('@/assets/programming/list_bg03.png');
  overflow-y: auto;
  // 滚动条整体样式
  &::-webkit-scrollbar {
    width: rpx(1); // 滚动条宽度
  }
  // 滚动条滑块样式
  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5); // 滑块颜色
    border-radius: 4px; // 滑块圆角
    transition: background-color 0.3s ease;
  }
  // 滚动条轨道样式
  &::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1); // 轨道颜色
    border-radius: 4px; // 轨道圆角
  }
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background: linear-gradient(to bottom, #001169, #b4a8e1);
  background-image: url('@/assets/programming/list_bg03.png');
}

.box-1 {
  width: 100%;
  // height: rpx(50);
  margin-top: rpx(10);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(15); // 默认字体大小
}

.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
  cursor: pointer; // 添加鼠标指针样式
}
.box-icon {
  display: flex;
  align-items: center;
  margin-left: rpx(7);
  gap: 10px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  width: fit-content;
}

.box-icon:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-3px);
}

.box-icon .left-icon {
  margin: 0;
}

.left-box span {
  position: absolute;
  font-size: rpx(11); // 默认字体大小
  color: white;
}

.right-box {
  flex: 1;
  position: relative; // 添加相对定位;
}
.top-right-box {
  position: absolute; // 添加绝对定位
  // margin-top: rpx(9); // 调整上边距离
  margin-left: rpx(260); // 调整右边距离
  width: rpx(100); // 设置盒子宽度，可按需调整
  // height: 60px; // 设置盒子高度，可按需调整
  margin-right: rpx(20);
  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: white;
  }
  ::v-deep(.el-input__icon) {
    color: white; // 设置输入框图标颜色为白色
  }
  // 添加占位符样式
  ::v-deep(.el-input__inner::placeholder) {
    color: white;
  }
  // 添加输入框文字颜色样式
  ::v-deep(.el-input__inner) {
    color: black;
  }
}
// 搜索框
.search-input {
  width: rpx(100);
  height: rpx(15);
  font-size: rpx(7);
}
.box-2 {
  width: 100%;
  flex: 1;
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
  box-sizing: border-box;
  // display: flex; // 确保子元素水平排列
  flex-wrap: wrap; // 允许子元素换行;
  align-content: center; // 顶部对齐;
  cursor: pointer; // 添加鼠标指针样式
}

.small-title {
  width: 100%;
  // margin-top: rpx(-20);
  height: rpx(20);
  color: white;
  font-size: rpx(10);
  justify-content: center; //使子元素水平居中
}
// 图片容器样式
.image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: rpx(20) 0;
}

// 图片样式
.course-image {
  max-width: 70%;
  max-height: rpx(400);
  object-fit: contain;
  border-radius: rpx(12);
  box-shadow: 0 rpx(10) rpx(20) rgba(0, 0, 0, 0.1);
}


// 儿童风格试题弹框样式
.child-dialog {
  .el-dialog__header {
    display: none; // 隐藏原有的标题栏
  }

  .el-dialog__body {
    padding: rpx(20);
    position: relative;
  }

  .el-dialog__footer {
    border-top: none;
    padding: rpx(10) rpx(20);
    text-align: center;
    margin-top: auto; // 使底部按钮位于底部
  }

  .el-dialog__wrapper {
    // 修改半透明背景色
    background-color: rgba(0, 0, 0, 0.6);
  }

  .el-dialog {
    border: none;
    border-radius: rpx(20);
    background: linear-gradient(
      135deg,
      $light-color,
      #d8bfd8
    ); // 柔和的蓝紫色渐变
    overflow: hidden;
    display: flex; // 添加 flex 布局
    flex-direction: column; // 设置垂直布局
    min-height: 0; // 防止子元素溢出
    // 添加装饰元素
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: rpx(10);
      background: linear-gradient(90deg, $secondary-color, $accent-color);
    }
  }
}

// 问题标题样式
.question-title {
  padding: rpx(15);
  border-radius: rpx(12);
  margin-bottom: rpx(20);
  color: #483d8b;
  font-weight: bold;
  font-size: rpx(12);
  position: relative;
  display: flex;
  // align-items: center;

  .question-icon {
    background-color: $accent-color;
    color: white;
    width: rpx(24);
    height: rpx(24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: rpx(10);
    font-weight: bold;
    box-shadow: 0 rpx(2) rpx(5) rgba($accent-color, 0.3);
  }
}

// 选项容器样式
.options-container {
  margin-bottom: rpx(20);
}

// 问题选项样式
.question-option {
  margin: rpx(8) 0;
  padding: rpx(10) rpx(15);
  border-radius: rpx(12);
  border: rpx(1) solid rgba($primary-color, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  background-color: white;
  box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.05);

  ::v-deep(.el-radio__label) {
    color: $text-color;
    margin-left: rpx(8);
    flex: 1;
    text-align: left;
    // 增大字体大小
    font-size: rpx(12);
  }

  // 选中时的样式变化
  .el-radio__input.is-checked + .el-radio__label {
    font-weight: bold;
    color: $accent-color;
  }

  &:hover {
    background-color: rgba($primary-color, 0.05);
    border-color: rgba($primary-color, 0.5);
    transform: translateY(-rpx(1));
  }
}

// 暂无选项样式
.no-options {
  color: rgba($text-color, 0.7);
  text-align: center;
  padding: rpx(20);
  font-size: rpx(12);
}

// 底部按钮样式
.child-button {
  min-width: rpx(80);
  height: rpx(30);
  border-radius: rpx(8);
  font-size: rpx(12);
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 rpx(2) rpx(8) rgba(0, 0, 0, 0.1);

  &.confirm {
    background: linear-gradient(to bottom, #ab81ff, #8559dc);
    border: none;
    border-right: 15px;
    color: white;

    &:hover {
      background: linear-gradient(
        to bottom,
        color.adjust(#ab81ff, $lightness: -5%),
        color.adjust(#8559dc, $lightness: -5%)
      );
      transform: translateY(-rpx(1));
      color: white;
    }
  }

  &.cancel {
    background: white;
    border: rpx(1) solid rgba($primary-color, 0.3);
    color: $text-color;

    &:hover {
      background: rgba($primary-color, 0.05);
      border-color: rgba($primary-color, 0.5);
      transform: translateY(-rpx(1));
    }
  }
}

// AI对话图标样式
.ai-icon-container {
  position: absolute;
  bottom: rpx(20);
  right: rpx(20);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-rpx(2));
  }

  .ai-icon {
    width: rpx(30);
    height: rpx(30);
    margin-bottom: rpx(0);
    filter: drop-shadow(0 rpx(2) rpx(4) rgba($primary-color, 0.3));
    // 添加过渡动画
    transition: transform 0.3s ease;
  }

  // 悬浮时放大效果
  .ai-icon:hover {
    transform: scale(1.5);
  }

  .ai-text {
    color: $text-color;
    font-size: rpx(8);
    background-color: rgba(255, 255, 255, 0.7);
    padding: rpx(2) rpx(5);
    border-radius: rpx(5);
  }
}

// AI消息样式
.ai-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: rpx(15);

  .ai-avatar {
    width: rpx(30);
    height: rpx(30);
    border-radius: 50%;
    margin-right: rpx(10);
    background-color: $primary-color;
    padding: rpx(5);
    // box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.2);
  }

  .ai-text-content {
    background-color: $light-color;
    padding: rpx(8) rpx(12);
    border-radius: rpx(10);
    font-size: rpx(10);
    color: $text-color;
    max-width: 80%;
    // box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
  }
}

// 用户输入框样式
.user-input {
  ::v-deep(.el-input__wrapper) {
    height: rpx(23);
    border-top-left-radius: rpx(5);
    border-bottom-left-radius: rpx(5);
    border-color: rgba($primary-color, 0.3);

    &:focus-within {
      box-shadow: 0 0 0 rpx(1) rgba($primary-color, 0.5);
    }
  }

  ::v-deep(.el-input__inner) {
    font-size: rpx(10);
    // color: $text-color;
    text-indent: 1em;
  }
  ::v-deep(.el-input-group__append, .el-input-group__prepend) {
    background: linear-gradient(to bottom, #ab81ff, #8559dc);
    border-top-right-radius: rpx(5);
    border-bottom-right-radius: rpx(5);
    color: white;
    font-size: rpx(9);
  }
}
/* 定义淡入和缩放动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.5s ease;
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0.1;
  transform: scale(0.9);
}

// 自定义试题弹框背景
.child-dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); // 半透明背景
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.child-dialog {
  border: none;
  border-radius: rpx(15);
  background: rgb(255, 255, 255, 0.8); // 柔和的蓝紫色渐变
  overflow: hidden;
  padding: rpx(5);
  // width: 40%;
  // height: 60%;
  position: relative;
}

// AI对话弹框样式
.ai-dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1001;
  pointer-events: none;
}

.ai-dialog {
  border: none;
  border-radius: rpx(15);
  background: rgb(255, 255, 255, 0.8);
  overflow: hidden;
  padding: rpx(20);
  width: 30%;
  // 增加高度
  height: 80%;
  margin-right: rpx(50);
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: rpx(10);
  }
}

.ai-dialog-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: rpx(15);
  margin-top: rpx(-10);

  img {
    width: rpx(15);
  }

  h3 {
    color: black;
    font-size: rpx(12);
  }

  .close-btn {
    padding: 0;
    width: rpx(20);
    height: rpx(20);
    font-size: rpx(16);
    line-height: 1;
    position: absolute;
    background-color: transparent;
    border: none;
    margin-left: rpx(200);
  }
}

.ai-dialog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-message-history {
  flex: 1;
  // 当内容超出容器高度时，显示垂直滚动条
  overflow-y: auto;
  margin-bottom: rpx(15);
  // 可以根据实际情况调整最大高度
  font-size: rpx(5);
  max-height: 50vh;
  // padding: 5px 10px;

  .message {
    display: flex;
    align-items: flex-start;
    margin-bottom: rpx(10);

    &.user {
      flex-direction: row-reverse;
    }

    .avatar {
      width: rpx(30);
      height: rpx(30);
      border-radius: 50%;
      margin: 0 rpx(10);
    }

    .user {
      width: 15px;
      height: 15px;
    }

    .message-content {
      background-color: #ffffff;
      font-size: rpx(5);
      max-width: 80%;
      color: black;
      box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
    }
  }
  // 滚动条整体样式
  &::-webkit-scrollbar {
    width: rpx(4); // 滚动条宽度
  }

  // 滚动条滑块样式
  &::-webkit-scrollbar-thumb {
    background-color: $primary-color; // 滑块颜色
    border-radius: rpx(4); // 滑块圆角
    transition: background-color 0.3s ease; // 颜色过渡效果

    &:hover {
      //background-color: darken($primary-color, 10%); // 悬停时滑块颜色加深
    }
  }

  // 滚动条轨道样式
  &::-webkit-scrollbar-track {
    background-color: rgba($primary-color, 0.2); // 轨道颜色
    border-radius: rpx(4); // 轨道圆角
  }

  .message {
    display: flex;
    align-items: flex-start;
    margin-bottom: rpx(10);

    &.user {
      flex-direction: row-reverse;
    }

    .avatar {
      width: rpx(30);
      height: rpx(30);
      border-radius: 50%;
      margin: 0 rpx(10);
    }

    .message-content {
      background-color: white;
      padding: rpx(8) rpx(12);
      border-radius: rpx(5);
      font-size: rpx(8);
      color: black;
      max-width: 80%;
      box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
    }
  }
}

// 优化发送按钮样式
.send-button {
  //background: linear-gradient(90deg, $primary-color, $secondary-color);
  border: none;
  color: white;

  &:hover {
    //background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
  }
}
</style>

<style lang="scss">
// 搜索下拉框样式
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
/* 消除小三角 */
.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;
}
.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>

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


.contentClass{
  width: 70%;
  height: 80%;
  margin: 0 auto;
  border-radius: rpx(15);
  overflow: hidden;
}
</style>