课程标题渲染分组以及视频渲染

src/views/AIDevelop.vue

@@ -272,25 +272,6 @@ const toggleDrawer = () => {
   drawerVisible.value = !drawerVisible.value
 }
 
-// 定义映射
-// const videoMap = {
-//   '1-1': video1,
-//   '1-2': video2,
-//   '1-3': video3,
-//   '1-4': video4,
-//   '1-5': video5,
-//   '1-6': video6,
-//   '1-7': video7,
-//   '1-8': video8,
-//   '1-9': video9,
-//   '1-10': video10,
-//   '1-11': video11,
-//   '1-12': video12,
-//   '1-13': video13,
-//   '1-14': video14,
-//   '1-15': video15
-// }
-
 // 返回上一页
 const goBack = () => {
   router.go(-1)
@@ -306,17 +287,18 @@ const videoSrc = ref('')
 // 新增视频路径映射
 const videoPathMap = ref({})
 
+// 渲染 课程数据结构 以及 视频
 onMounted(async () => {
   const typeId = router.currentRoute.value.query.typeId
   console.log(typeId, "----")
   if (typeId) {
     try {
-      // 取课程数据并添加错误处理
+      // 取课程数据
       const res = await ClassType(typeId)
       courseList.value = res.data
       console.log("课程数据：", courseList.value)
 
-       // 构建视频路径映射
+      // 构建视频路径映射
       videoPathMap.value = courseList.value.reduce((map, item, index) => {
         const idx = `1-${index + 1}`
         if (item.courseVideoPath) {
@@ -332,14 +314,49 @@ onMounted(async () => {
         smallTitle.value = courseList.value[0].courseName
       }
 
-      // 将接口数据中的 courseName 转换为菜单格式
-      menuItems.value = courseList.value.map((item, index) => {
-        const idx = `1-${index + 1}`
-        return {
-          index: idx,
-          title: item.courseName
+      // 按 courseLabel 分组
+      const groupedByLabel = {};
+      courseList.value.forEach(item => {
+        if (!groupedByLabel[item.courseLabel]) {
+          groupedByLabel[item.courseLabel] = [];
         }
-      })
+        groupedByLabel[item.courseLabel].push(item);
+      });
+
+      // 对每个组按 courseOrder 排序
+      Object.keys(groupedByLabel).forEach(label => {
+        groupedByLabel[label].sort((a, b) => a.courseOrder - b.courseOrder);
+      });
+
+      // 构建新的 menuItems 结构
+      menuItems.value = [];
+      Object.keys(groupedByLabel).forEach((label, labelIndex) => {
+        const groupItems = groupedByLabel[label];
+        // 检查是否是知识分解组（图灵测试到大模型时代）
+        const isKnowledgeGroup = groupItems.some(item => 
+          ['图灵测试', '大模型时代'].includes(item.courseName)
+        );
+        if (isKnowledgeGroup) {
+          // 构建知识分解组的树型结构
+          menuItems.value.push({
+            index: `${labelIndex + 1}`,
+            title: '知识讲解',
+            children: groupItems.map((item, index) => ({
+              index: `${labelIndex + 1}-${index + 1}`,
+              title: item.courseName
+            }))
+          });
+        } else {
+          // 普通组直接添加菜单项
+          groupItems.forEach((item, index) => {
+            const idx = `${labelIndex + 1}-${index + 1}`;
+            menuItems.value.push({
+              index: idx,
+              title: item.courseName
+            });
+          });
+        }
+      });
     } catch (error) {
       console.error("获取课程数据失败：", error)
     }
@@ -354,38 +371,12 @@ onMounted(async () => {
 const handleOpen = () => {}
 const handleClose = () => {}
 
-// 动态渲染树型结构
-// const menuItems = ref([
-//   { index: '1-1', title: '课前回顾' },
-//   { index: '1-2', title: '课程引入' },
-//   {
-//     index: '1',
-//     title: '知识讲解',
-//     children: [
-//       { index: '1-3', title: '图灵测试' },
-//       { index: '1-4', title: '课堂提问' },
-//       { index: '1-5', title: '达特茅斯会议' },
-//       { index: '1-6', title: '课堂选择' },
-//       { index: '1-7', title: '聊天机器人' },
-//       { index: '1-8', title: '专家系统' },
-//       { index: '1-9', title: '课堂互动' },
-//       { index: '1-10', title: '互联网快速发展' },
-//       { index: '1-11', title: '黄金时代' },
-//       { index: '1-12', title: '课堂提问' },
-//       { index: '1-13', title: '大模型时代' }
-//     ]
-//   },
-//   { index: '1-14', title: '趣味实操' },
-//   { index: '1-15', title: '课程总结' }
-// ])
-
 // 当前播放的索引
 const currentIndex = ref('1-1')
 
 // 渲染课程标题到视频上方
 const smallTitle = ref('课前回顾')
 const handleSelect = index => {
-
   const findTitle = items => {
     for (const item of items) {
       if (item.index === index) {
@@ -409,7 +400,6 @@ const handleSelect = index => {
     videoSrc.value = videoPathMap.value[index]
     currentIndex.value = index
   }
-
   //测试账号禁用视频
   if (disableVideo())return;
 }
@@ -434,7 +424,6 @@ const flattenMenuItems = () => {
 const playNextVideo = () => {
   //测试账号禁用视频
   if (disableVideo())return;
-
   const allIndices = flattenMenuItems()
   const currentIndexInList = allIndices.indexOf(currentIndex.value)
   if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
@@ -458,7 +447,6 @@ const playNextVideo = () => {
 const playPreviousVideo = () => {
   //测试账号禁用视频
   if (disableVideo())return;
-
   const allIndices = flattenMenuItems()
   const currentIndexInList = allIndices.indexOf(currentIndex.value)
   if (currentIndexInList > 0) {
@@ -472,11 +460,11 @@ const playPreviousVideo = () => {
     }
   }
 }
+
 // 尝试播放视频，处理浏览器自动播放限制
 const tryPlayVideo = () => {
   //测试账号禁用视频
   if (disableVideo())return;
-
   const playPromise = videoRef.value.play()
   if (playPromise !== undefined) {
     playPromise.catch(error => {
@@ -496,22 +484,17 @@ const checkVideoPermission = () => {
 //禁用视频
 const disableVideo = () => {
   let dis = ["1-6","1-7","1-8","1-9","1-10","1-11","1-12","1-13","1-14","1-15"]
-
   if (localStorage.getItem('userName') === "aiTest" &&
       dis.indexOf(currentIndex.value) !== -1) {
-
     if (videoRef.value) {
       videoRef.value.pause()
-
       // 禁用视频进度条拖拽功能
       const handleSeeking = () => {
         videoRef.value.pause()
         Message().notifyWarning('您的账号并未开放此课程，禁止拖动进度条！', true)
       }
-
       // 添加 seeking 事件监听器
       videoRef.value.addEventListener('seeking', handleSeeking)
-
       // 当视频源改变时，移除事件监听器，避免影响其他视频
       const removeListener = () => {
         videoRef.value.removeEventListener('seeking', handleSeeking)
@@ -519,7 +502,6 @@ const disableVideo = () => {
       }
       videoRef.value.addEventListener('loadedmetadata', removeListener)
     }
-
     //提示禁用// 显示消息框
     Message().notifyWarning('您的账号并未开放此课程！', true)
     return true
@@ -702,6 +684,7 @@ const handleTimeUpdate = () => {
     })
   }
 }
+
 // 关闭试题弹框
 const handleCloseQuestionDialog = () => {
   questionDialogVisible.value = false
@@ -748,7 +731,6 @@ const handleAIClick = () => {
     sendMessage()
     userMessage.value = ''
   }
-
   showAIDialog.value = true
 }
 
@@ -776,6 +758,7 @@ const simulateAIResponse = question => {
 const handleCloseAIDialog = () => {
   showAIDialog.value = false
 }
+
 </script>
 
 <style scoped lang="scss">
@@ -808,7 +791,6 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   height: 100%;
   position: relative;
   background: linear-gradient(to bottom, #001169, #8a78d0);
- 
 }
 .content-box {
   flex: 1;
@@ -892,7 +874,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   margin-left: rpx(5);
 }
 .el-menu-item {
-  width: rpx(105);
+  width: rpx(100);
   height: rpx(20);
   margin-bottom: rpx(5);
   border-radius: rpx(6);
@@ -902,7 +884,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 }
 .el-menu ::v-deep(.el-sub-menu__title){
   color: white;
-   width: rpx(115);
+   width: rpx(100);
   height: rpx(20);
   margin-bottom: rpx(5);
   font-size: rpx(7);