视图修改、接口修改

2025-10-28 19:04:35 +08:00
parent 98c73632bd
commit c5c134fbb3
96 changed files with 7122 additions and 4194 deletions
--- a/schoolNewsWeb/src/views/public/course/components/CourseLearning.vue
+++ b/schoolNewsWeb/src/views/public/course/components/CourseLearning.vue
@@ -6,9 +6,9 @@
        <el-button @click="handleBack" :icon="ArrowLeft" text>
          {{ backButtonText }}
        </el-button>
-        <span class="course-name">{{ courseVO?.course.name }}</span>
+        <span class="course-name">{{ courseItemVO?.name }}</span>
      </div>
-      
+
      <div class="header-right">
        <span class="progress-info">
          学习进度：{{ currentProgress }}%
@@ -26,38 +26,25 @@
      <div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <span class="sidebar-title">课程目录</span>
-          <el-button
-            text
-            :icon="Fold"
-            @click="toggleSidebar"
-          />
+          <el-button text :icon="Fold" @click="toggleSidebar" />
        </div>

        <div v-if="!sidebarCollapsed" class="chapter-list">
          <el-collapse v-model="activeChapters">
-            <el-collapse-item
-              v-for="(chapterVO, chapterIndex) in courseVO?.courseChapters || []"
-              :key="chapterIndex"
-              :name="chapterIndex"
-            >
+            <el-collapse-item v-for="(chapterItem, chapterIndex) in courseItemVO?.chapters || []" :key="chapterIndex"
+              :name="chapterIndex">
              <template #title>
                <div class="chapter-item-title">
-                  <span>{{ chapterIndex + 1 }}. {{ chapterVO.chapter.name }}</span>
-                  <span class="chapter-count">{{ chapterVO.nodes.length }}</span>
+                  <span>{{ chapterIndex + 1 }}. {{ chapterItem.name }}</span>
+                  <span class="chapter-count">{{ getChapterNodes(chapterIndex).length }}</span>
                </div>
              </template>

              <div class="node-items">
-                <div
-                  v-for="(node, nodeIndex) in chapterVO.nodes"
-                  :key="nodeIndex"
-                  class="node-item-bar"
-                  :class="{ 
-                    active: currentChapterIndex === chapterIndex && currentNodeIndex === nodeIndex,
-                    completed: isNodeCompleted(chapterIndex, nodeIndex)
-                  }"
-                  @click="selectNode(chapterIndex, nodeIndex)"
-                >
+                <div v-for="(node, nodeIndex) in getChapterNodes(chapterIndex)" :key="nodeIndex" class="node-item-bar" :class="{
+                  active: currentChapterIndex === chapterIndex && currentNodeIndex === nodeIndex,
+                  completed: isNodeCompleted(chapterIndex, nodeIndex)
+                }" @click="selectNode(chapterIndex, nodeIndex)">
                  <div class="node-item-content">
                    <el-icon v-if="isNodeCompleted(chapterIndex, nodeIndex)" class="check-icon">
                      <CircleCheck />
@@ -70,12 +57,7 @@
                    <span class="node-item-name">{{ node.name }}</span>
                  </div>
                  <div class="node-item-meta">
-                    <el-tag
-                      v-if="node.isRequired === 1"
-                      type="danger"
-                      size="small"
-                      effect="plain"
-                    >
+                    <el-tag v-if="node.isRequired === 1" type="danger" size="small" effect="plain">
                      必修
                    </el-tag>
                    <span v-if="node.duration" class="node-duration">
@@ -90,12 +72,8 @@
      </div>

      <!-- 右侧：学习内容区 -->
-      <div 
-        ref="contentAreaRef"
-        class="content-area" 
-        :class="{ expanded: sidebarCollapsed }"
-        @scroll="handleContentScroll"
-      >
+      <div ref="contentAreaRef" class="content-area" :class="{ expanded: sidebarCollapsed }"
+        @scroll="handleContentScroll">
        <!-- 加载中 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="8" animated />
@@ -110,7 +88,9 @@
                必修
              </el-tag>
              <span v-if="currentNode.duration" class="duration">
-                <el-icon><Clock /></el-icon>
+                <el-icon>
+                  <Clock />
+                </el-icon>
                {{ currentNode.duration }} 分钟
              </span>
            </div>
@@ -118,11 +98,7 @@

          <!-- 文章资源 -->
          <div v-if="currentNode.nodeType === 0 && articleData" class="article-content">
-            <ArticleShowView
-              :as-dialog="false"
-              :article-data="articleData"
-              :category-list="[]"
-            />
+            <ArticleShowView :as-dialog="false" :article-data="articleData" :category-list="[]" />
          </div>

          <!-- 富文本内容 -->
@@ -132,32 +108,26 @@
          <!-- 文件内容 -->
          <div v-else-if="currentNode.nodeType === 2" class="file-content">
            <div v-if="isVideoFile(currentNode.videoUrl)" class="video-wrapper">
-              <video
-                :src="getFileUrl(currentNode.videoUrl)"
-                controls
-                class="video-player"
-                @timeupdate="handleVideoProgress"
-                @ended="handleVideoEnded"
-              >
+              <video :src="getFileUrl(currentNode.videoUrl)" controls class="video-player"
+                @timeupdate="handleVideoProgress" @ended="handleVideoEnded">
                您的浏览器不支持视频播放
              </video>
            </div>
            <div v-else-if="isAudioFile(currentNode.videoUrl)" class="audio-wrapper">
-              <audio
-                :src="getFileUrl(currentNode.videoUrl)"
-                controls
-                class="audio-player"
-                @timeupdate="handleAudioProgress"
-                @ended="handleAudioEnded"
-              >
+              <audio :src="getFileUrl(currentNode.videoUrl)" controls class="audio-player"
+                @timeupdate="handleAudioProgress" @ended="handleAudioEnded">
                您的浏览器不支持音频播放
              </audio>
            </div>
            <div v-else class="file-download">
-              <el-icon class="file-icon"><Document /></el-icon>
+              <el-icon class="file-icon">
+                <Document />
+              </el-icon>
              <p>文件资源</p>
              <el-button type="primary" @click="downloadFile(currentNode.videoUrl)">
-                <el-icon><Download /></el-icon>
+                <el-icon>
+                  <Download />
+                </el-icon>
                下载文件
              </el-button>
            </div>
@@ -165,30 +135,23 @@

          <!-- 学习操作 -->
          <div class="learning-actions">
-            <el-button
-              @click="markAsComplete"
-              :type="isCurrentNodeCompleted ? 'success' : 'primary'"
-              :disabled="isCurrentNodeCompleted"
-            >
-              <el-icon><CircleCheck /></el-icon>
+            <el-button @click="markAsComplete" :type="isCurrentNodeCompleted ? 'success' : 'primary'"
+              :disabled="isCurrentNodeCompleted">
+              <el-icon>
+                <CircleCheck />
+              </el-icon>
              {{ isCurrentNodeCompleted ? '已完成' : '标记为完成' }}
            </el-button>

            <div class="navigation-buttons">
-              <el-button
-                @click="gotoPrevious"
-                :disabled="!hasPrevious"
-                :icon="ArrowLeft"
-              >
+              <el-button @click="gotoPrevious" :disabled="!hasPrevious" :icon="ArrowLeft">
                上一节
              </el-button>
-              <el-button
-                @click="gotoNext"
-                :disabled="!hasNext"
-                type="primary"
-              >
+              <el-button @click="gotoNext" :disabled="!hasNext" type="primary">
                下一节
-                <el-icon><ArrowRight /></el-icon>
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
              </el-button>
            </div>
          </div>
@@ -201,6 +164,7 @@
      </div>
    </div>
  </div>
+
 </template>

 <script setup lang="ts">
@@ -225,7 +189,7 @@ import { learningRecordApi, learningHistoryApi } from '@/apis/study';
 import { resourceApi } from '@/apis/resource';
 import { useStore } from 'vuex';
 import { FILE_DOWNLOAD_URL } from '@/config';
-import type { CourseVO, LearningRecord, TbLearningHistory } from '@/types';
+import type { CourseItemVO, LearningRecord, TbLearningHistory } from '@/types';

 interface Props {
  courseId: string;
@@ -237,7 +201,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
  chapterIndex: 0,
  nodeIndex: 0,
-  backButtonText: '返回课程详情'
+  backButtonText: '返回'
 });

 const emit = defineEmits<{
@@ -249,7 +213,7 @@ const userInfo = computed(() => store.getters['auth/user']);
 const route = useRoute();

 const loading = ref(false);
-const courseVO = ref<CourseVO | null>(null);
+const courseItemVO = ref<CourseItemVO | null>(null);
 const currentChapterIndex = ref(0);
 const currentNodeIndex = ref(0);
 const sidebarCollapsed = ref(false);
@@ -274,32 +238,37 @@ const learningHistory = ref<TbLearningHistory | null>(null);
 const historyStartTime = ref<number>(0);
 const historyTimer = ref<number | null>(null);

+// 辅助函数：获取章节的节点列表
+function getChapterNodes(chapterIndex: number): CourseItemVO[] {
+  if (!courseItemVO.value) return [];
+  const chapter = courseItemVO.value.chapters?.[chapterIndex];
+  if (!chapter?.chapterID) return [];
+  return courseItemVO.value.chapterNodes?.[chapter.chapterID] || [];
+}
+
 // 当前节点
 const currentNode = computed(() => {
-  if (!courseVO.value || !courseVO.value.courseChapters) return null;
-  
-  const chapter = courseVO.value.courseChapters[currentChapterIndex.value];
-  if (!chapter || !chapter.nodes) return null;
-  
-  return chapter.nodes[currentNodeIndex.value] || null;
+  const nodes = getChapterNodes(currentChapterIndex.value);
+  return nodes[currentNodeIndex.value] || null;
 });

 // 当前进度
 const currentProgress = computed(() => {
-  if (!courseVO.value || !courseVO.value.courseChapters) return 0;
-  
+  if (!courseItemVO.value || !courseItemVO.value.chapters) return 0;
+
  let totalNodes = 0;
  let completedCount = 0;
-  
-  courseVO.value.courseChapters.forEach((chapter, chapterIdx) => {
-    chapter.nodes.forEach((node, nodeIdx) => {
+
+  courseItemVO.value.chapters.forEach((chapter, chapterIdx) => {
+    const nodes = getChapterNodes(chapterIdx);
+    nodes.forEach((node, nodeIdx) => {
      totalNodes++;
      if (isNodeCompleted(chapterIdx, nodeIdx)) {
        completedCount++;
      }
    });
  });
-  
+
  if (totalNodes === 0) return 0;
  return Math.round((completedCount / totalNodes) * 100);
 });
@@ -314,23 +283,21 @@ const hasPrevious = computed(() => {

 // 是否有下一节
 const hasNext = computed(() => {
-  if (!courseVO.value || !courseVO.value.courseChapters) return false;
-  
-  const chapters = courseVO.value.courseChapters;
-  const currentChapter = chapters[currentChapterIndex.value];
-  
-  if (!currentChapter) return false;
-  
+  if (!courseItemVO.value || !courseItemVO.value.chapters) return false;
+
+  const chapters = courseItemVO.value.chapters;
+  const currentChapterNodes = getChapterNodes(currentChapterIndex.value);
+
  // 不是当前章节的最后一个节点
-  if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
+  if (currentNodeIndex.value < currentChapterNodes.length - 1) {
    return true;
  }
-  
+
  // 不是最后一章
  if (currentChapterIndex.value < chapters.length - 1) {
    return true;
  }
-  
+
  return false;
 });

@@ -357,10 +324,10 @@ watch(currentNode, async () => {
    await saveHistoryRecord();
    stopHistoryTimer();
  }
-  
+
  if (currentNode.value) {
    loadNodeContent();
-    
+
    // 为新节点创建学习历史记录
    await createHistoryRecord();
  }
@@ -373,7 +340,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
  stopLearningTimer();
  saveLearningProgress();
-  
+
  // 保存学习历史记录
  if (learningHistory.value) {
    saveHistoryRecord();
@@ -385,20 +352,18 @@ onBeforeUnmount(() => {
 async function loadCourse() {
  loading.value = true;
  try {
-    const res = await courseApi.getCourseById(props.courseId);
+    const res = await courseApi.getCourseProgress(props.courseId);
    if (res.success && res.data) {
-      courseVO.value = res.data;
-      
+      courseItemVO.value = res.data;
+
      // 确保数据结构完整
-      if (!courseVO.value.courseChapters) {
-        courseVO.value.courseChapters = [];
+      if (!courseItemVO.value.chapters) {
+        courseItemVO.value.chapters = [];
      }
-      courseVO.value.courseChapters.forEach((chapter) => {
-        if (!chapter.nodes) {
-          chapter.nodes = [];
-        }
-      });
-      
+      if (!courseItemVO.value.chapterNodes) {
+        courseItemVO.value.chapterNodes = {};
+      }
+
      // 加载学习记录
      await loadLearningRecord();
    }
@@ -413,17 +378,17 @@ async function loadCourse() {
 // 加载学习记录
 async function loadLearningRecord() {
  if (!userInfo.value?.id) return;
-  
+
  try {
    const res = await learningRecordApi.getCourseLearningRecord({
      userID: userInfo.value.id,
      resourceType: 2, // 课程
      courseID: props.courseId
    });
-    
+
    if (res.success && res.dataList && res.dataList.length > 0) {
      learningRecord.value = res.dataList[0];
-      
+
      // 从本地存储加载已完成的节点列表
      const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
      if (savedProgress) {
@@ -441,17 +406,22 @@ async function loadLearningRecord() {
 // 创建学习记录
 async function createLearningRecord() {
  if (!userInfo.value?.id) return;
-  
+
  try {
+    const currentChapter = courseItemVO.value?.chapters?.[currentChapterIndex.value];
+    const currentNodeData = currentChapter?.chapterID ? 
+      courseItemVO.value?.chapterNodes?.[currentChapter.chapterID]?.[currentNodeIndex.value] : 
+      null;
+
    const res = await learningRecordApi.createRecord({
      userID: userInfo.value.id,
      resourceType: 2, // 课程
      courseID: props.courseId,
-      chapterID: courseVO.value?.courseChapters[currentChapterIndex.value].chapter.chapterID,
-      nodeID: courseVO.value?.courseChapters[currentChapterIndex.value].nodes[currentNodeIndex.value].nodeID,
+      chapterID: currentChapter?.chapterID,
+      nodeID: currentNodeData?.nodeID,
      taskID: route.query.taskId as string
    });
-    
+
    if (res.success && res.data) {
      learningRecord.value = res.data;
      console.log('学习记录创建成功');
@@ -464,7 +434,7 @@ async function createLearningRecord() {
 // 加载节点内容
 async function loadNodeContent() {
  if (!currentNode.value) return;
-  
+
  // 如果是文章资源，加载文章内容
  if (currentNode.value.nodeType === 0 && currentNode.value.resourceID) {
    try {
@@ -481,7 +451,7 @@ async function loadNodeContent() {
  } else {
    articleData.value = null;
  }
-  
+
  // 展开当前章节
  if (!activeChapters.value.includes(currentChapterIndex.value)) {
    activeChapters.value.push(currentChapterIndex.value);
@@ -494,20 +464,20 @@ async function selectNode(chapterIndex: number, nodeIndex: number) {
  if (previousNodeKey.value && (hasScrolledToBottom.value || !hasScrollbar())) {
    await markNodeComplete(previousNodeKey.value);
  }
-  
+
  // 切换到新节点
  currentChapterIndex.value = chapterIndex;
  currentNodeIndex.value = nodeIndex;
-  
+
  // 重置滚动状态
  hasScrolledToBottom.value = false;
  previousNodeKey.value = `${chapterIndex}-${nodeIndex}`;
-  
+
  // 滚动到顶部
  if (contentAreaRef.value) {
    contentAreaRef.value.scrollTop = 0;
  }
-  
+
  // 等待 DOM 更新后初始化视频监听
  await nextTick();
  initRichTextVideoListeners();
@@ -515,25 +485,25 @@ async function selectNode(chapterIndex: number, nodeIndex: number) {

 // 上一节
 function gotoPrevious() {
-  if (!hasPrevious.value || !courseVO.value) return;
-  
+  if (!hasPrevious.value || !courseItemVO.value) return;
+
  if (currentNodeIndex.value > 0) {
    currentNodeIndex.value--;
  } else {
    // 跳到上一章的最后一节
    currentChapterIndex.value--;
-    const prevChapter = courseVO.value.courseChapters[currentChapterIndex.value];
-    currentNodeIndex.value = prevChapter.nodes.length - 1;
+    const prevChapterNodes = getChapterNodes(currentChapterIndex.value);
+    currentNodeIndex.value = prevChapterNodes.length - 1;
  }
 }

 // 下一节
 function gotoNext() {
-  if (!hasNext.value || !courseVO.value) return;
-  
-  const currentChapter = courseVO.value.courseChapters[currentChapterIndex.value];
-  
-  if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
+  if (!hasNext.value || !courseItemVO.value) return;
+
+  const currentChapterNodes = getChapterNodes(currentChapterIndex.value);
+
+  if (currentNodeIndex.value < currentChapterNodes.length - 1) {
    currentNodeIndex.value++;
  } else {
    // 跳到下一章的第一节
@@ -545,12 +515,12 @@ function gotoNext() {
 // 标记为完成
 async function markAsComplete() {
  if (!currentNode.value) return;
-  
+
  const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
  await markNodeComplete(nodeKey);
-  
+
  ElMessage.success('已标记为完成');
-  
+
  // 自动跳转到下一节
  if (hasNext.value) {
    setTimeout(() => {
@@ -568,7 +538,7 @@ function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
 // 开始学习计时
 function startLearningTimer() {
  learningStartTime.value = Date.now();
-  
+
  // 每10秒保存一次学习进度（如果未完成）
  learningTimer.value = window.setInterval(() => {
    // 如果课程已完成，停止定时器
@@ -591,16 +561,16 @@ function stopLearningTimer() {
 // 保存学习进度
 async function saveLearningProgress() {
  if (!userInfo.value?.id || !learningRecord.value) return;
-  
+
  // 如果课程已完成，不再保存进度
  if (learningRecord.value.isComplete) {
    console.log('课程已完成，跳过进度保存');
    return;
  }
-  
+
  const currentTime = Date.now();
  const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
-  
+
  try {
    const updatedRecord = {
      id: learningRecord.value.id,
@@ -611,14 +581,14 @@ async function saveLearningProgress() {
      progress: currentProgress.value,
      isComplete: currentProgress.value === 100
    };
-    
+
    await learningRecordApi.updateRecord(updatedRecord);
-    
+
    // 更新本地记录
    learningRecord.value.duration = updatedRecord.duration;
    learningRecord.value.progress = updatedRecord.progress;
    learningRecord.value.isComplete = updatedRecord.isComplete;
-    
+
    // 重置开始时间
    learningStartTime.value = currentTime;
  } catch (error) {
@@ -629,24 +599,24 @@ async function saveLearningProgress() {
 // 标记节点完成
 async function markNodeComplete(nodeKey: string) {
  if (completedNodes.value.has(nodeKey)) return;
-  
+
  // 如果课程已完成，不再标记节点
  if (learningRecord.value?.isComplete) {
    console.log('课程已完成，跳过节点标记');
    return;
  }
-  
+
  completedNodes.value.add(nodeKey);
-  
+
  // 保存到本地存储
  localStorage.setItem(
    `course_${props.courseId}_nodes`,
    JSON.stringify(Array.from(completedNodes.value))
  );
-  
+
  // 更新学习进度
  await saveLearningProgress();
-  
+
  // 如果全部完成，标记课程为完成
  if (currentProgress.value === 100) {
    await markCourseComplete();
@@ -656,7 +626,7 @@ async function markNodeComplete(nodeKey: string) {
 // 标记课程完成
 async function markCourseComplete() {
  if (!userInfo.value?.id || !learningRecord.value) return;
-  
+
  try {
    await learningRecordApi.markComplete({
      id: learningRecord.value.id,
@@ -667,7 +637,7 @@ async function markCourseComplete() {
      progress: 100,
      isComplete: true
    });
-    
+
    ElMessage.success('恭喜你完成了整个课程！');
  } catch (error) {
    console.error('标记课程完成失败:', error);
@@ -686,7 +656,7 @@ function handleContentScroll(event: Event) {
  const scrollTop = target.scrollTop;
  const scrollHeight = target.scrollHeight;
  const clientHeight = target.clientHeight;
-  
+
  // 判断是否滚动到底部（留10px容差）
  if (scrollHeight - scrollTop - clientHeight < 10) {
    if (!hasScrolledToBottom.value) {
@@ -703,7 +673,7 @@ function handleVideoProgress(event: Event) {
  // 可以在这里记录视频播放进度
  const video = event.target as HTMLVideoElement;
  const progress = (video.currentTime / video.duration) * 100;
-  
+
  // 如果播放超过80%，自动标记为完成
  if (progress > 80 && !isCurrentNodeCompleted.value) {
    // markAsComplete();
@@ -727,30 +697,30 @@ function initRichTextVideoListeners() {
      '.content-area .rich-text-content',
      '.rich-text-content'
    ];
-    
+
    let richTextContent: Element | null = null;
-    
+
    for (const selector of selectors) {
      richTextContent = document.querySelector(selector);
      if (richTextContent) {
        break;
      }
    }
-    
+
    if (!richTextContent) {
      return;
    }
-    
+
    const videos = richTextContent.querySelectorAll('video');
-    
+
    if (videos.length === 0) {
      return;
    }
-    
+
    // 初始化视频数量和完成状态
    totalRichTextVideos.value = videos.length;
    completedRichTextVideos.value.clear();
-    
+
    // 监听所有视频的播放结束事件
    videos.forEach((video, index) => {
      const videoElement = video as HTMLVideoElement;
@@ -766,9 +736,9 @@ function initRichTextVideoListeners() {
 function handleRichTextVideoEnded(videoIndex: number) {
  // 标记该视频已完成
  completedRichTextVideos.value.add(videoIndex);
-  
+
  const completedCount = completedRichTextVideos.value.size;
-  
+
  // 检查是否所有视频都已完成
  if (completedCount >= totalRichTextVideos.value) {
    if (!isCurrentNodeCompleted.value) {
@@ -782,7 +752,7 @@ function handleRichTextVideoEnded(videoIndex: number) {
 function handleAudioProgress(event: Event) {
  const audio = event.target as HTMLAudioElement;
  const progress = (audio.currentTime / audio.duration) * 100;
-  
+
  if (progress > 80 && !isCurrentNodeCompleted.value) {
    // markAsComplete();
  }
@@ -831,13 +801,13 @@ function toggleSidebar() {

 // 创建学习历史记录
 async function createHistoryRecord() {
-  if (!userInfo.value?.id || !courseVO.value || !currentNode.value) return;
-  
+  if (!userInfo.value?.id || !courseItemVO.value || !currentNode.value) return;
+
  try {
-    const chapterVO = courseVO.value.courseChapters[currentChapterIndex.value];
-    const chapter = chapterVO?.chapter;
+    const chapterItem = courseItemVO.value.chapters![currentChapterIndex.value];
+    const chapter = chapterItem;
    const node = currentNode.value;
-    
+
    const res = await learningHistoryApi.recordCourseLearn(
      userInfo.value.id,
      props.courseId,
@@ -845,11 +815,11 @@ async function createHistoryRecord() {
      node.nodeID,
      0 // 初始时长为0
    );
-    
+
    if (res.success && res.data) {
      learningHistory.value = res.data;
      console.log('✅ 课程学习历史记录创建成功:', learningHistory.value);
-      
+
      // 开始计时
      startHistoryTimer();
    }
@@ -861,7 +831,7 @@ async function createHistoryRecord() {
 // 开始学习历史计时
 function startHistoryTimer() {
  historyStartTime.value = Date.now();
-  
+
  // 每30秒保存一次学习历史
  historyTimer.value = window.setInterval(() => {
    saveHistoryRecord();
@@ -879,28 +849,28 @@ function stopHistoryTimer() {
 // 保存学习历史记录
 async function saveHistoryRecord() {
  if (!userInfo.value?.id || !learningHistory.value) return;
-  
+
  const currentTime = Date.now();
  const duration = Math.floor((currentTime - historyStartTime.value) / 1000); // 秒
-  
+
  // 如果时长太短（小于1秒），不保存
  if (duration < 1) return;
-  
+
  try {
    const updatedHistory: TbLearningHistory = {
      ...learningHistory.value,
      duration: (learningHistory.value.duration || 0) + duration,
      endTime: new Date().toISOString()
    };
-    
+
    // 调用API更新学习历史
    const res = await learningHistoryApi.recordLearningHistory(updatedHistory);
-    
+
    if (res.success && res.data) {
      learningHistory.value = res.data;
      console.log(`💾 课程学习历史已保存 - 累计时长: ${learningHistory.value.duration}秒 - 节点: ${currentNode.value?.name}`);
    }
-    
+
    // 重置开始时间
    historyStartTime.value = currentTime;
  } catch (error) {
@@ -911,13 +881,13 @@ async function saveHistoryRecord() {
 function handleBack() {
  stopLearningTimer();
  saveLearningProgress();
-  
+
  // 保存学习历史记录
  if (learningHistory.value) {
    saveHistoryRecord();
  }
  stopHistoryTimer();
-  
+
  emit('back');
 }
 </script>
@@ -941,19 +911,19 @@ function handleBack() {
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  
+
  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
-    
+
    .course-name {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
-  
+
  .header-right {
    .progress-info {
      font-size: 14px;
@@ -974,7 +944,7 @@ function handleBack() {
  left: 16px;
  top: 16px;
  z-index: 10;
-  
+
  :deep(.el-button) {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
@@ -986,26 +956,26 @@ function handleBack() {
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
  transition: width 0.3s;
-  
+
  &.collapsed {
    width: 0;
    overflow: hidden;
  }
-  
+
  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;
-    
+
    .sidebar-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
-  
+
  .chapter-list {
    padding: 8px;
  }
@@ -1019,7 +989,7 @@ function handleBack() {
  padding-right: 20px;
  font-size: 14px;
  font-weight: 500;
-  
+
  .chapter-count {
    font-size: 12px;
    color: #909399;
@@ -1042,48 +1012,48 @@ function handleBack() {
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
-  
+
  &:hover {
    background: #f5f7fa;
  }
-  
+
  &.active {
    background: #ecf5ff;
    color: #409eff;
  }
-  
+
  &.completed {
    .check-icon {
      color: #67c23a;
    }
  }
-  
+
  .node-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
-    
+
    .node-type-icon {
      font-size: 16px;
      color: #909399;
    }
-    
+
    .check-icon {
      font-size: 16px;
    }
-    
+
    .node-item-name {
      font-size: 13px;
      color: #606266;
    }
  }
-  
+
  .node-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
-    
+
    .node-duration {
      font-size: 12px;
      color: #909399;
@@ -1095,7 +1065,7 @@ function handleBack() {
  flex: 1;
  overflow-y: auto;
  background: #fff;
-  
+
  &.expanded {
    margin-left: 0;
  }
@@ -1115,19 +1085,19 @@ function handleBack() {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
-  
+
  .node-title {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 12px 0;
  }
-  
+
  .node-meta {
    display: flex;
    align-items: center;
    gap: 12px;
-    
+
    .duration {
      display: flex;
      align-items: center;
@@ -1150,7 +1120,7 @@ function handleBack() {
    max-width: 100%;
    height: auto;
  }
-  
+
  :deep(video) {
    max-width: 100%;
    height: auto;
@@ -1159,7 +1129,7 @@ function handleBack() {

 .file-content {
  margin-bottom: 24px;
-  
+
  .video-wrapper,
  .audio-wrapper {
    display: flex;
@@ -1167,17 +1137,17 @@ function handleBack() {
    padding: 24px;
    background: #000;
    border-radius: 8px;
-    
+
    .video-player {
      max-width: 100%;
      max-height: 500px;
    }
-    
+
    .audio-player {
      width: 100%;
    }
  }
-  
+
  .file-download {
    display: flex;
    flex-direction: column;
@@ -1186,13 +1156,13 @@ function handleBack() {
    padding: 60px;
    background: #f5f7fa;
    border-radius: 8px;
-    
+
    .file-icon {
      font-size: 64px;
      color: #909399;
      margin-bottom: 16px;
    }
-    
+
    p {
      margin-bottom: 16px;
      color: #606266;
@@ -1206,7 +1176,7 @@ function handleBack() {
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid #e4e7ed;
-  
+
  .navigation-buttons {
    display: flex;
    gap: 12px;
@@ -1221,4 +1191,3 @@ function handleBack() {
  min-height: 400px;
 }
 </style>
-