侧边栏标题以及视频bug修复

src/views/AIDevelop.vue

@@ -27,7 +27,7 @@
                 @open="handleOpen"
                 @close="handleClose"
                 @select="handleSelect"
-                :default-openeds="['1']"
+                :default-openeds="['3']"
               >
                 <template v-for="item in menuItems" :key="item.index">
                   <el-menu-item v-if="!item.children" :index="item.index">{{
@@ -216,7 +216,6 @@
         </div>
       </div>
     </div>
-    
   </div>
 </template>
 
@@ -239,7 +238,12 @@ import {
   Setting
 } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
-import {ElMessage, ElMessageBox, ElNotification, valueEquals} from 'element-plus'
+import {
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+  valueEquals
+} from 'element-plus'
 // 引入视频
 import video1 from '@/assets/02video/01video.mp4'
 import video2 from '@/assets/02video/02video.mp4'
@@ -257,8 +261,8 @@ import video13 from '@/assets/02video/13video.mp4'
 import video14 from '@/assets/02video/14video.mp4'
 import video15 from '@/assets/02video/15video.mp4'
 
-import {ClassType} from "@/api/class.js";
-import {Message} from "@/utils/message/Message.js";
+import { ClassType } from '@/api/class.js'
+import { Message } from '@/utils/message/Message.js'
 
 const router = useRouter() // 获取当前路由对象
 // 搜索框
@@ -282,6 +286,7 @@ const boxIconTitle = ref('')
 const courseList = ref([])
 // 菜单数据
 const menuItems = ref([])
+
 // 定义视频源
 const videoSrc = ref('')
 // 新增视频路径映射
@@ -290,22 +295,13 @@ const videoPathMap = ref({})
 // 渲染 课程数据结构 以及 视频
 onMounted(async () => {
   const typeId = router.currentRoute.value.query.typeId
-  console.log(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) {
-          map[idx] = item.courseVideoPath
-        }
-        return map
-      }, {})
+      console.log('课程数据：', courseList.value)
 
       // 初始化第一个视频源和标题
       if (courseList.value.length > 0 && courseList.value[0].courseVideoPath) {
@@ -315,27 +311,41 @@ onMounted(async () => {
       }
 
       // 按 courseLabel 分组
-      const groupedByLabel = {};
+      const groupedByLabel = {}
       courseList.value.forEach(item => {
         if (!groupedByLabel[item.courseLabel]) {
-          groupedByLabel[item.courseLabel] = [];
+          groupedByLabel[item.courseLabel] = []
         }
-        groupedByLabel[item.courseLabel].push(item);
-      });
+        groupedByLabel[item.courseLabel].push(item)
+      })
 
       // 对每个组按 courseOrder 排序
       Object.keys(groupedByLabel).forEach(label => {
-        groupedByLabel[label].sort((a, b) => a.courseOrder - b.courseOrder);
-      });
+        groupedByLabel[label].sort((a, b) => a.courseOrder - b.courseOrder)
+      })
+
+      // 构建视频路径映射
+      videoPathMap.value = {}
+      let labelIndex = 0
+      Object.keys(groupedByLabel).forEach(label => {
+        const groupItems = groupedByLabel[label]
+        groupItems.forEach((item, indexInGroup) => {
+          const idx = `${labelIndex + 1}-${indexInGroup + 1}`
+          if (item.courseVideoPath) {
+            videoPathMap.value[idx] = item.courseVideoPath
+          }
+        })
+        labelIndex++
+      })
 
       // 构建新的 menuItems 结构
-      menuItems.value = [];
+      menuItems.value = []
       Object.keys(groupedByLabel).forEach((label, labelIndex) => {
-        const groupItems = groupedByLabel[label];
+        const groupItems = groupedByLabel[label]
         // 检查是否是知识分解组（图灵测试到大模型时代）
-        const isKnowledgeGroup = groupItems.some(item => 
+        const isKnowledgeGroup = groupItems.some(item =>
           ['图灵测试', '大模型时代'].includes(item.courseName)
-        );
+        )
         if (isKnowledgeGroup) {
           // 构建知识分解组的树型结构
           menuItems.value.push({
@@ -345,20 +355,20 @@ onMounted(async () => {
               index: `${labelIndex + 1}-${index + 1}`,
               title: item.courseName
             }))
-          });
+          })
         } else {
           // 普通组直接添加菜单项
           groupItems.forEach((item, index) => {
-            const idx = `${labelIndex + 1}-${index + 1}`;
+            const idx = `${labelIndex + 1}-${index + 1}`
             menuItems.value.push({
               index: idx,
               title: item.courseName
-            });
-          });
+            })
+          })
         }
-      });
+      })
     } catch (error) {
-      console.error("获取课程数据失败：", error)
+      console.error('获取课程数据失败：', error)
     }
   }
   const title = router.currentRoute.value.query.typeName
@@ -401,7 +411,7 @@ const handleSelect = index => {
     currentIndex.value = index
   }
   //测试账号禁用视频
-  if (disableVideo())return;
+  if (disableVideo()) return
 }
 
 // 展平所有菜单项索引
@@ -423,7 +433,7 @@ const flattenMenuItems = () => {
 // 播放下一个视频
 const playNextVideo = () => {
   //测试账号禁用视频
-  if (disableVideo())return;
+  if (disableVideo()) return
   const allIndices = flattenMenuItems()
   const currentIndexInList = allIndices.indexOf(currentIndex.value)
   if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
@@ -446,7 +456,7 @@ const playNextVideo = () => {
 // 播放上一个视频
 const playPreviousVideo = () => {
   //测试账号禁用视频
-  if (disableVideo())return;
+  if (disableVideo()) return
   const allIndices = flattenMenuItems()
   const currentIndexInList = allIndices.indexOf(currentIndex.value)
   if (currentIndexInList > 0) {
@@ -464,7 +474,7 @@ const playPreviousVideo = () => {
 // 尝试播放视频，处理浏览器自动播放限制
 const tryPlayVideo = () => {
   //测试账号禁用视频
-  if (disableVideo())return;
+  if (disableVideo()) return
   const playPromise = videoRef.value.play()
   if (playPromise !== undefined) {
     playPromise.catch(error => {
@@ -476,22 +486,38 @@ const tryPlayVideo = () => {
 const checkVideoPermission = () => {
   if (disableVideo()) {
     if (videoRef.value) {
-      videoRef.value.pause();
+      videoRef.value.pause()
     }
   }
-};
+}
 
 //禁用视频
 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) {
+  let dis = [
+    '3-4',
+    '3-5',
+    '3-6',
+    '3-7',
+    '3-8',
+    '3-9',
+    '3-10',
+    '3-11',
+    '4-1',
+    '5-1'
+  ]
+  if (
+    localStorage.getItem('userName') === 'aiTest' &&
+    dis.indexOf(currentIndex.value) !== -1
+  ) {
     if (videoRef.value) {
       videoRef.value.pause()
       // 禁用视频进度条拖拽功能
       const handleSeeking = () => {
         videoRef.value.pause()
-        Message().notifyWarning('您的账号并未开放此课程，禁止拖动进度条！', true)
+        Message().notifyWarning(
+          '您的账号并未开放此课程，禁止拖动进度条！',
+          true
+        )
       }
       // 添加 seeking 事件监听器
       videoRef.value.addEventListener('seeking', handleSeeking)
@@ -508,7 +534,7 @@ const disableVideo = () => {
   } else {
     // 若不符合禁用条件，移除事件监听器
     if (videoRef.value) {
-      videoRef.value.removeEventListener('seeking', (e) => {
+      videoRef.value.removeEventListener('seeking', e => {
         e.preventDefault()
       })
     }
@@ -535,134 +561,134 @@ let userMessage = ref('')
 let messageHistory = ref([])
 
 // 定义每个视频对应的暂停时间和问题
- const videoPauseTimes = {
-   [video2]: {
-     pauseTimes: [30],
-     questions: [
-       {
-         title: '视频当中发生了什么事情呢？',
-         options: [],
-         aiQuestion: '视频当中发生了什么事情呢',
-         aiAnswer:
-           '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
-       }
-     ]
-   },
-   [video3]: {
-     pauseTimes: [49],
-     questions: [
-       {
-         title: '同学们，大家了解图灵测试了吗？',
-         options: [],
-         aiQuestion: '视频当中发生了什么事情呢',
-         aiAnswer:
-           '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
-       }
-     ]
-   },
-   [video4]: {
-     pauseTimes: [2],
-     questions: [
-       {
-         title: '你觉得deepseek、豆包等大模型可以通过图灵测试吗？为什么？',
-         options: [],
-         aiQuestion: '你觉得deepseek、豆包等大模型可以通过图灵测试吗？为什么？',
-         aiAnswer:
-           '大模型已缩短与图灵测试的标志距离，尤其在表面对话层面，但因缺乏深层次理解、逻辑一致性与真实认知，仍无法在严格测试中稳定通过。'
-       }
-     ]
-   },
-   [video5]: {
-     pauseTimes: [49],
-     questions: []
-   },
-   [video6]: {
-     pauseTimes: [5]
-   },
-   [video7]: {
-     pauseTimes: [64.5, 91],
-     questions: [
-       {
-         title: '如果你是聊天机器人，你会怎么回答用户呢？',
-         options: [],
-         aiQuestion: '',
-         aiAnswer: ''
-       },
-       {
-         title:
-           '当我们和聊天机器人对话的内容被人类所查看并回答时，隐私信息是否泄露？',
-         options: [],
-         aiQuestion:
-           '当我们和聊天机器人对话的内容被人类所查看并回答时，隐私信息是否泄露？',
-         aiAnswer:
-           '与聊天机器人的对话被人类查看时，隐私泄露风险客\n' +
-           '观存在，尤其是人类介入或安全漏洞场景下。建议优先选择支持本地'
-       }
-     ]
-   },
-   [video8]: {
-     pauseTimes: [72],
-     questions: [
-       {
-         title: '如果你身体不舒服时找这样的专家检查，那么它开的药你敢喝吗？',
-         options: [],
-         aiQuestion:
-           '如果你身体不舒服时找这样的专家检查，那么它开的药你敢喝吗？',
-         aiAnswer: '这题没给答案，你自己去查吧！'
-       }
-     ]
-   },
-   [video9]: {
-     pauseTimes: [2],
-     questions: [
-       {
-         title: '在生活中，有哪些正在使用的专家系统呢？',
-         options: [],
-         aiQuestion: '在生活中，有哪些正在使用的专家系统呢？',
-         aiAnswer:
-           '在医疗健康领域有复杂疾病协同决策和Ai医生分身与诊断辅助；在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
-       }
-     ]
-   },
-   [video11]: {
-     pauseTimes: [1, 90, 176],
-     questions: [
-       {
-         title: '怎么会有爆炸声？泡泡怪在这里吗？',
-         options: [],
-         aiQuestion: '',
-         aiAnswer: ''
-       },
-       {
-         title: '同学们喜欢下围棋吗？',
-         options: [],
-         aiQuestion: '',
-         aiAnswer: ''
-       },
-       {
-         title: '为什么AlphaGo要在围棋上攻克真人冠军呢？',
-         options: [],
-         aiQuestion: '为什么AlphaGo要在围棋上攻克真人冠军呢？',
-         aiAnswer:
-           '围棋是人类智力游戏的巅峰，拥有天文数字级的可能性，每颗棋子价值由全局态势动态决定，所以当前一手可能百步之后才显现价值。AlphaGo战胜人类顶尖选手，它证明了Ai不仅能处理规则明确的事物，更能攻克依赖直觉、策略的“人类专属领域”'
-       }
-     ]
-   },
-   [video12]: {
-     pauseTimes: [1]
-   },
-   [video13]: {
-     pauseTimes: [62],
-     questions: [
-       {
-         title: '我们一起来感受一下大模型吧！',
-         options: [],
-         aiQuestion: '',
-         aiAnswer: ''
-       }
-     ]
-   }
- }
+const videoPauseTimes = {
+  [video2]: {
+    pauseTimes: [30],
+    questions: [
+      {
+        title: '视频当中发生了什么事情呢？',
+        options: [],
+        aiQuestion: '视频当中发生了什么事情呢',
+        aiAnswer:
+          '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
+      }
+    ]
+  },
+  [video3]: {
+    pauseTimes: [49],
+    questions: [
+      {
+        title: '同学们，大家了解图灵测试了吗？',
+        options: [],
+        aiQuestion: '视频当中发生了什么事情呢',
+        aiAnswer:
+          '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
+      }
+    ]
+  },
+  [video4]: {
+    pauseTimes: [2],
+    questions: [
+      {
+        title: '你觉得deepseek、豆包等大模型可以通过图灵测试吗？为什么？',
+        options: [],
+        aiQuestion: '你觉得deepseek、豆包等大模型可以通过图灵测试吗？为什么？',
+        aiAnswer:
+          '大模型已缩短与图灵测试的标志距离，尤其在表面对话层面，但因缺乏深层次理解、逻辑一致性与真实认知，仍无法在严格测试中稳定通过。'
+      }
+    ]
+  },
+  [video5]: {
+    pauseTimes: [49],
+    questions: []
+  },
+  [video6]: {
+    pauseTimes: [5]
+  },
+  [video7]: {
+    pauseTimes: [64.5, 91],
+    questions: [
+      {
+        title: '如果你是聊天机器人，你会怎么回答用户呢？',
+        options: [],
+        aiQuestion: '',
+        aiAnswer: ''
+      },
+      {
+        title:
+          '当我们和聊天机器人对话的内容被人类所查看并回答时，隐私信息是否泄露？',
+        options: [],
+        aiQuestion:
+          '当我们和聊天机器人对话的内容被人类所查看并回答时，隐私信息是否泄露？',
+        aiAnswer:
+          '与聊天机器人的对话被人类查看时，隐私泄露风险客\n' +
+          '观存在，尤其是人类介入或安全漏洞场景下。建议优先选择支持本地'
+      }
+    ]
+  },
+  [video8]: {
+    pauseTimes: [72],
+    questions: [
+      {
+        title: '如果你身体不舒服时找这样的专家检查，那么它开的药你敢喝吗？',
+        options: [],
+        aiQuestion:
+          '如果你身体不舒服时找这样的专家检查，那么它开的药你敢喝吗？',
+        aiAnswer: '这题没给答案，你自己去查吧！'
+      }
+    ]
+  },
+  [video9]: {
+    pauseTimes: [2],
+    questions: [
+      {
+        title: '在生活中，有哪些正在使用的专家系统呢？',
+        options: [],
+        aiQuestion: '在生活中，有哪些正在使用的专家系统呢？',
+        aiAnswer:
+          '在医疗健康领域有复杂疾病协同决策和Ai医生分身与诊断辅助；在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
+      }
+    ]
+  },
+  [video11]: {
+    pauseTimes: [1, 90, 176],
+    questions: [
+      {
+        title: '怎么会有爆炸声？泡泡怪在这里吗？',
+        options: [],
+        aiQuestion: '',
+        aiAnswer: ''
+      },
+      {
+        title: '同学们喜欢下围棋吗？',
+        options: [],
+        aiQuestion: '',
+        aiAnswer: ''
+      },
+      {
+        title: '为什么AlphaGo要在围棋上攻克真人冠军呢？',
+        options: [],
+        aiQuestion: '为什么AlphaGo要在围棋上攻克真人冠军呢？',
+        aiAnswer:
+          '围棋是人类智力游戏的巅峰，拥有天文数字级的可能性，每颗棋子价值由全局态势动态决定，所以当前一手可能百步之后才显现价值。AlphaGo战胜人类顶尖选手，它证明了Ai不仅能处理规则明确的事物，更能攻克依赖直觉、策略的“人类专属领域”'
+      }
+    ]
+  },
+  [video12]: {
+    pauseTimes: [1]
+  },
+  [video13]: {
+    pauseTimes: [62],
+    questions: [
+      {
+        title: '我们一起来感受一下大模型吧！',
+        options: [],
+        aiQuestion: '',
+        aiAnswer: ''
+      }
+    ]
+  }
+}
 
 // 处理视频时间更新事件
 const handleTimeUpdate = () => {
@@ -758,7 +784,6 @@ const simulateAIResponse = question => {
 const handleCloseAIDialog = () => {
   showAIDialog.value = false
 }
-
 </script>
 
 <style scoped lang="scss">
@@ -806,7 +831,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 .icon-expand {
   width: rpx(135);
   height: rpx(30);
-  //  background: rgb(15, 28, 116, 0.4); 
+  //  background: rgb(15, 28, 116, 0.4);
   z-index: 9999;
   position: absolute;
   cursor: pointer; // 添加鼠标指针样式
@@ -858,11 +883,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 .el-menu ::v-deep(.el-sub-menu__title:hover),
 .el-menu ::v-deep(.el-sub-menu__title:focus),
 .el-menu ::v-deep(.el-sub-menu__title:active) {
-  background: linear-gradient(
-    to bottom,
-    #fee78a,
-    #ffce1b
-  ); 
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
   background-color: transparent;
 }
 .mb-2 {
@@ -880,11 +901,10 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   border-radius: rpx(6);
   color: white;
   font-size: rpx(7);
-  
 }
-.el-menu ::v-deep(.el-sub-menu__title){
+.el-menu ::v-deep(.el-sub-menu__title) {
   color: white;
-   width: rpx(100);
+  width: rpx(100);
   height: rpx(20);
   margin-bottom: rpx(5);
   font-size: rpx(7);
@@ -892,22 +912,14 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 .el-menu ::v-deep(.el-sub-menu__title:hover),
 .el-menu ::v-deep(.el-sub-menu__title:focus),
 .el-menu ::v-deep(.el-sub-menu__title:active) {
-  background: linear-gradient(
-    to bottom,
-    #fee78a,
-    #ffce1b
-  ); 
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
   color: black;
   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,
-    #fee78a,
-    #ffce1b
-  ); 
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
   color: black;
   font-size: rpx(8);
   box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
@@ -925,12 +937,12 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
     width: rpx(1);
   }
   &::-webkit-scrollbar-thumb {
-     background-color:#b4a8e1;
+    background-color: #b4a8e1;
     border-radius: rpx(5);
   }
   &::-webkit-scrollbar-track {
     background-color: rgba(255, 255, 255, 0.2);
-     border-radius: rpx(5);
+    border-radius: rpx(5);
   }
 }
 .drawer-box .toggle-button {
@@ -947,7 +959,6 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   left: 0;
 }
 
-
 .toggle-button.is-active,
 .toggle-button:active,
 .toggle-button:focus {
@@ -1579,5 +1590,4 @@ video::-webkit-media-controls-panel {
     //background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
   }
 }
-
 </style>