schoolNews/schoolNewsWeb/src/views/course/components/CourseLearning.vue

<template>
  <div class="course-learning">
    <!-- 学习页头部 -->
    <div class="learning-header">
      <div class="header-left">
        <el-button @click="handleBack" :icon="ArrowLeft" text>
          {{ backButtonText }}
        </el-button>
        <span class="course-name">{{ courseVO?.course.name }}</span>
      </div>
      
      <div class="header-right">
        <span class="progress-info">
          学习进度：{{ currentProgress }}%
        </span>
      </div>
    </div>

    <div class="learning-container">
      <!-- 浮动展开按钮（侧边栏收起时显示） -->
      <div v-if="sidebarCollapsed" class="float-expand-btn" @click="toggleSidebar">
        <el-button circle :icon="Expand" />
      </div>

      <!-- 左侧：章节目录 -->
      <div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <span class="sidebar-title">课程目录</span>
          <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"
            >
              <template #title>
                <div class="chapter-item-title">
                  <span>{{ chapterIndex + 1 }}. {{ chapterVO.chapter.name }}</span>
                  <span class="chapter-count">{{ chapterVO.nodes.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 class="node-item-content">
                    <el-icon v-if="isNodeCompleted(chapterIndex, nodeIndex)" class="check-icon">
                      <CircleCheck />
                    </el-icon>
                    <el-icon v-else class="node-type-icon">
                      <Document v-if="node.nodeType === 0" />
                      <Edit v-else-if="node.nodeType === 1" />
                      <Upload v-else />
                    </el-icon>
                    <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>
                    <span v-if="node.duration" class="node-duration">
                      {{ node.duration }}分钟
                    </span>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <!-- 右侧：学习内容区 -->
      <div 
        ref="contentAreaRef"
        class="content-area" 
        :class="{ expanded: sidebarCollapsed }"
        @scroll="handleContentScroll"
      >
        <!-- 加载中 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="8" animated />
        </div>

        <!-- 节点内容 -->
        <div v-else-if="currentNode" class="node-content">
          <div class="node-header">
            <h2 class="node-title">{{ currentNode.name }}</h2>
            <div class="node-meta">
              <el-tag v-if="currentNode.isRequired === 1" type="danger" size="small">
                必修
              </el-tag>
              <span v-if="currentNode.duration" class="duration">
                <el-icon><Clock /></el-icon>
                {{ currentNode.duration }} 分钟
              </span>
            </div>
          </div>

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

          <!-- 富文本内容 -->
          <div v-else-if="currentNode.nodeType === 1" class="rich-text-content" v-html="currentNode.content">
          </div>

          <!-- 文件内容 -->
          <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>
            </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>
            </div>
            <div v-else class="file-download">
              <el-icon class="file-icon"><Document /></el-icon>
              <p>文件资源</p>
              <el-button type="primary" @click="downloadFile(currentNode.videoUrl)">
                <el-icon><Download /></el-icon>
                下载文件
              </el-button>
            </div>
          </div>

          <!-- 学习操作 -->
          <div class="learning-actions">
            <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>
              <el-button
                @click="gotoNext"
                :disabled="!hasNext"
                type="primary"
              >
                下一节
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
        </div>

        <!-- 暂无内容 -->
        <div v-else class="empty-content">
          <el-empty description="暂无学习内容" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
  ArrowLeft,
  ArrowRight,
  Expand,
  Fold,
  CircleCheck,
  Document,
  Edit,
  Upload,
  Clock,
  Download
} from '@element-plus/icons-vue';
import { ArticleShowView } from '@/views/article';
import { courseApi } from '@/apis/study';
import { learningRecordApi } from '@/apis/study';
import { resourceApi } from '@/apis/resource';
import { useStore } from 'vuex';
import { FILE_DOWNLOAD_URL } from '@/config';
import type { CourseVO, LearningRecord } from '@/types';

interface Props {
  courseId: string;
  chapterIndex?: number;
  nodeIndex?: number;
  backButtonText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  chapterIndex: 0,
  nodeIndex: 0,
  backButtonText: '返回课程详情'
});

const emit = defineEmits<{
  'back': [];
}>();

const store = useStore();
const userInfo = computed(() => store.getters['auth/user']);
const route = useRoute();

const loading = ref(false);
const courseVO = ref<CourseVO | null>(null);
const currentChapterIndex = ref(0);
const currentNodeIndex = ref(0);
const sidebarCollapsed = ref(false);
const activeChapters = ref<number[]>([0]);
const articleData = ref<any>(null);
const contentAreaRef = ref<HTMLElement | null>(null);

// 学习记录
const learningRecord = ref<LearningRecord | null>(null);
const completedNodes = ref<Set<string>>(new Set());
const learningStartTime = ref<number>(0);
const learningTimer = ref<number | null>(null);
const hasScrolledToBottom = ref(false);
const previousNodeKey = ref<string | null>(null);

// 富文本视频跟踪
const totalRichTextVideos = ref(0);
const completedRichTextVideos = ref<Set<number>>(new Set());

// 当前节点
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 currentProgress = computed(() => {
  if (!courseVO.value || !courseVO.value.courseChapters) return 0;
  
  let totalNodes = 0;
  let completedCount = 0;
  
  courseVO.value.courseChapters.forEach((chapter, chapterIdx) => {
    chapter.nodes.forEach((node, nodeIdx) => {
      totalNodes++;
      if (isNodeCompleted(chapterIdx, nodeIdx)) {
        completedCount++;
      }
    });
  });
  
  if (totalNodes === 0) return 0;
  return Math.round((completedCount / totalNodes) * 100);
});

// 是否有上一节
const hasPrevious = computed(() => {
  if (currentChapterIndex.value === 0 && currentNodeIndex.value === 0) {
    return false;
  }
  return true;
});

// 是否有下一节
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 (currentNodeIndex.value < currentChapter.nodes.length - 1) {
    return true;
  }
  
  // 不是最后一章
  if (currentChapterIndex.value < chapters.length - 1) {
    return true;
  }
  
  return false;
});

// 当前节点是否完成
const isCurrentNodeCompleted = computed(() => {
  return isNodeCompleted(currentChapterIndex.value, currentNodeIndex.value);
});

watch(() => props.courseId, (newId) => {
  if (newId) {
    loadCourse();
  }
}, { immediate: true });

watch(() => [props.chapterIndex, props.nodeIndex], () => {
  currentChapterIndex.value = props.chapterIndex || 0;
  currentNodeIndex.value = props.nodeIndex || 0;
  loadNodeContent();
}, { immediate: true });

watch(currentNode, () => {
  if (currentNode.value) {
    loadNodeContent();
  }
});

onMounted(() => {
  startLearningTimer();
});

onBeforeUnmount(() => {
  stopLearningTimer();
  saveLearningProgress();
});

// 加载课程
async function loadCourse() {
  loading.value = true;
  try {
    const res = await courseApi.getCourseById(props.courseId);
    if (res.success && res.data) {
      courseVO.value = res.data;
      
      // 确保数据结构完整
      if (!courseVO.value.courseChapters) {
        courseVO.value.courseChapters = [];
      }
      courseVO.value.courseChapters.forEach((chapter) => {
        if (!chapter.nodes) {
          chapter.nodes = [];
        }
      });
      
      // 加载学习记录
      await loadLearningRecord();
    }
  } catch (error) {
    console.error('加载课程失败:', error);
    ElMessage.error('加载课程失败');
  } finally {
    loading.value = false;
  }
}

// 加载学习记录
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) {
        completedNodes.value = new Set(JSON.parse(savedProgress));
      }
    } else {
      // 没有学习记录，创建新的
      await createLearningRecord();
    }
  } catch (error) {
    console.error('加载学习记录失败:', error);
  }
}

// 创建学习记录
async function createLearningRecord() {
  if (!userInfo.value?.id) return;
  
  try {
    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,
      taskID: route.query.taskId as string
    });
    
    if (res.success && res.data) {
      learningRecord.value = res.data;
      console.log('学习记录创建成功');
    }
  } catch (error) {
    console.error('创建学习记录失败:', error);
  }
}

// 加载节点内容
async function loadNodeContent() {
  if (!currentNode.value) return;
  
  // 如果是文章资源，加载文章内容
  if (currentNode.value.nodeType === 0 && currentNode.value.resourceID) {
    try {
      const res = await resourceApi.getResourceById(currentNode.value.resourceID);
      if (res.success && res.data) {
        articleData.value = {
          ...res.data.resource,
          tags: res.data.tags || []
        };
      }
    } catch (error) {
      console.error('加载文章失败:', error);
    }
  } else {
    articleData.value = null;
  }
  
  // 展开当前章节
  if (!activeChapters.value.includes(currentChapterIndex.value)) {
    activeChapters.value.push(currentChapterIndex.value);
  }
}

// 选择节点
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();
}

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

// 下一节
function gotoNext() {
  if (!hasNext.value || !courseVO.value) return;
  
  const currentChapter = courseVO.value.courseChapters[currentChapterIndex.value];
  
  if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
    currentNodeIndex.value++;
  } else {
    // 跳到下一章的第一节
    currentChapterIndex.value++;
    currentNodeIndex.value = 0;
  }
}

// 标记为完成
async function markAsComplete() {
  if (!currentNode.value) return;
  
  const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
  await markNodeComplete(nodeKey);
  
  ElMessage.success('已标记为完成');
  
  // 自动跳转到下一节
  if (hasNext.value) {
    setTimeout(() => {
      gotoNext();
    }, 500);
  }
}

// 判断节点是否完成
function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
  const nodeKey = `${chapterIndex}-${nodeIndex}`;
  return completedNodes.value.has(nodeKey);
}

// 开始学习计时
function startLearningTimer() {
  learningStartTime.value = Date.now();
  
  // 每10秒保存一次学习进度（如果未完成）
  learningTimer.value = window.setInterval(() => {
    // 如果课程已完成，停止定时器
    if (learningRecord.value?.isComplete) {
      stopLearningTimer();
      return;
    }
    saveLearningProgress();
  }, 10000); // 10秒
}

// 停止学习计时
function stopLearningTimer() {
  if (learningTimer.value) {
    clearInterval(learningTimer.value);
    learningTimer.value = null;
  }
}

// 保存学习进度
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,
      userID: userInfo.value.id,
      resourceType: 2,
      resourceID: props.courseId,
      duration: (learningRecord.value.duration || 0) + duration,
      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) {
    console.error('保存学习进度失败:', error);
  }
}

// 标记节点完成
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();
  }
}

// 标记课程完成
async function markCourseComplete() {
  if (!userInfo.value?.id || !learningRecord.value) return;
  
  try {
    await learningRecordApi.markComplete({
      id: learningRecord.value.id,
      userID: userInfo.value.id,
      resourceType: 2,
      resourceID: props.courseId,
      taskID: route.query.taskId as string,
      progress: 100,
      isComplete: true
    });
    
    ElMessage.success('恭喜你完成了整个课程！');
  } catch (error) {
    console.error('标记课程完成失败:', error);
  }
}

// 检查是否有滚动条
function hasScrollbar(): boolean {
  if (!contentAreaRef.value) return false;
  return contentAreaRef.value.scrollHeight > contentAreaRef.value.clientHeight;
}

// 处理内容区域滚动
function handleContentScroll(event: Event) {
  const target = event.target as HTMLElement;
  const scrollTop = target.scrollTop;
  const scrollHeight = target.scrollHeight;
  const clientHeight = target.clientHeight;
  
  // 判断是否滚动到底部（留10px容差）
  if (scrollHeight - scrollTop - clientHeight < 10) {
    if (!hasScrolledToBottom.value) {
      hasScrolledToBottom.value = true;
      // 滚动到底部，标记当前节点完成
      const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
      markNodeComplete(nodeKey);
    }
  }
}

// 处理视频进度
function handleVideoProgress(event: Event) {
  // 可以在这里记录视频播放进度
  const video = event.target as HTMLVideoElement;
  const progress = (video.currentTime / video.duration) * 100;
  
  // 如果播放超过80%，自动标记为完成
  if (progress > 80 && !isCurrentNodeCompleted.value) {
    // markAsComplete();
  }
}

// 处理视频结束
function handleVideoEnded() {
  if (!isCurrentNodeCompleted.value) {
    markAsComplete();
  }
}

// 初始化富文本中的视频监听器
function initRichTextVideoListeners() {
  // 使用 setTimeout 确保 DOM 完全渲染
  setTimeout(() => {
    // 尝试多种选择器查找富文本内容区域
    const selectors = [
      '.node-content .rich-text-content',
      '.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;
      // 移除旧的监听器，避免重复添加
      videoElement.removeEventListener('ended', () => handleRichTextVideoEnded(index));
      // 添加新的监听器，传递视频索引
      videoElement.addEventListener('ended', () => handleRichTextVideoEnded(index));
    });
  }, 300); // 延迟 300ms 确保 DOM 完全渲染
}

// 处理富文本视频播放结束
function handleRichTextVideoEnded(videoIndex: number) {
  // 标记该视频已完成
  completedRichTextVideos.value.add(videoIndex);
  
  const completedCount = completedRichTextVideos.value.size;
  
  // 检查是否所有视频都已完成
  if (completedCount >= totalRichTextVideos.value) {
    if (!isCurrentNodeCompleted.value) {
      ElMessage.success(`所有视频播放完成 (${totalRichTextVideos.value}/${totalRichTextVideos.value})`);
      markAsComplete();
    }
  }
}

// 处理音频进度
function handleAudioProgress(event: Event) {
  const audio = event.target as HTMLAudioElement;
  const progress = (audio.currentTime / audio.duration) * 100;
  
  if (progress > 80 && !isCurrentNodeCompleted.value) {
    // markAsComplete();
  }
}

// 处理音频结束
function handleAudioEnded() {
  if (!isCurrentNodeCompleted.value) {
    markAsComplete();
  }
}

// 判断是否为视频文件
function isVideoFile(url?: string): boolean {
  if (!url) return false;
  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
}

// 判断是否为音频文件
function isAudioFile(url?: string): boolean {
  if (!url) return false;
  const audioExtensions = ['.mp3', '.wav', '.ogg', '.m4a'];
  return audioExtensions.some(ext => url.toLowerCase().endsWith(ext));
}

// 获取文件URL
function getFileUrl(fileId?: string): string {
  if (!fileId) return '';
  return FILE_DOWNLOAD_URL + fileId;
}

// 下载文件
function downloadFile(fileId?: string) {
  if (!fileId) return;
  window.open(getFileUrl(fileId), '_blank');
}

// 切换侧边栏
function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value;
}

// 返回
function handleBack() {
  stopLearningTimer();
  saveLearningProgress();
  emit('back');
}
</script>

<style lang="scss" scoped>
.course-learning {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.learning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  position: sticky;
  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;
      color: #606266;
    }
  }
}

.learning-container {
  display: flex;
  flex: 1;
  height: calc(100vh - 61px);
  position: relative;
}

.float-expand-btn {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  
  :deep(.el-button) {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.chapter-sidebar {
  width: 320px;
  background: #fff;
  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;
  }
}

.chapter-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 500;
  
  .chapter-count {
    font-size: 12px;
    color: #909399;
    background: #f5f7fa;
    padding: 2px 8px;
    border-radius: 10px;
  }
}

.node-items {
  padding-left: 12px;
}

.node-item-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin: 4px 0;
  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;
    }
  }
}

.content-area {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  
  &.expanded {
    margin-left: 0;
  }
}

.loading-container {
  padding: 24px;
}

.node-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.node-header {
  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;
      gap: 4px;
      font-size: 14px;
      color: #606266;
    }
  }
}

.article-content,
.rich-text-content {
  margin-bottom: 24px;
  line-height: 1.8;
  color: #303133;
}

.rich-text-content {
  :deep(img) {
    max-width: 100%;
    height: auto;
  }
  
  :deep(video) {
    max-width: 100%;
    height: auto;
  }
}

.file-content {
  margin-bottom: 24px;
  
  .video-wrapper,
  .audio-wrapper {
    display: flex;
    justify-content: center;
    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;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: #f5f7fa;
    border-radius: 8px;
    
    .file-icon {
      font-size: 64px;
      color: #909399;
      margin-bottom: 16px;
    }
    
    p {
      margin-bottom: 16px;
      color: #606266;
    }
  }
}

.learning-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid #e4e7ed;
  
  .navigation-buttons {
    display: flex;
    gap: 12px;
  }
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 400px;
}
</style>