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>
          返回课程详情
        </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 class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <span class="sidebar-title">课程目录</span>
          <el-button
            text
            :icon="sidebarCollapsed ? Expand : 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 class="content-area" :class="{ expanded: sidebarCollapsed }">
        <!-- 加载中 -->
        <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 } from 'vue';
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;
}

const props = withDefaults(defineProps<Props>(), {
  chapterIndex: 0,
  nodeIndex: 0
});

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

const store = useStore();
const authStore = computed(() => store.state.auth);

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 learningRecord = ref<LearningRecord | null>(null);
const completedNodes = ref<Set<string>>(new Set());
const learningStartTime = ref<number>(0);
const learningTimer = ref<number | null>(null);

// 当前节点
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 (!authStore.value.userInfo?.userID) return;
  
  try {
    const res = await learningRecordApi.getRecordList({
      userID: authStore.value.userInfo.userID,
      resourceType: 2, // 课程
      resourceID: props.courseId
    });
    
    if (res.success && res.dataList && res.dataList.length > 0) {
      learningRecord.value = res.dataList[0];
      
      // TODO: 从后端获取已完成的节点列表
      // 这里暂时用本地存储模拟
      const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
      if (savedProgress) {
        completedNodes.value = new Set(JSON.parse(savedProgress));
      }
    }
  } 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);
  }
}

// 选择节点
function selectNode(chapterIndex: number, nodeIndex: number) {
  currentChapterIndex.value = chapterIndex;
  currentNodeIndex.value = nodeIndex;
}

// 上一节
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;
  }
}

// 标记为完成
function markAsComplete() {
  if (!currentNode.value) return;
  
  const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
  completedNodes.value.add(nodeKey);
  
  // 保存到本地存储
  localStorage.setItem(
    `course_${props.courseId}_nodes`,
    JSON.stringify(Array.from(completedNodes.value))
  );
  
  ElMessage.success('已标记为完成');
  
  // 自动跳转到下一节
  if (hasNext.value) {
    setTimeout(() => {
      gotoNext();
    }, 500);
  } else {
    // 课程全部完成
    ElMessage.success('恭喜你完成了整个课程！');
  }
  
  // 更新学习进度
  saveLearningProgress();
}

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

// 开始学习计时
function startLearningTimer() {
  learningStartTime.value = Date.now();
  
  // 每分钟保存一次学习进度
  learningTimer.value = window.setInterval(() => {
    saveLearningProgress();
  }, 60000); // 60秒
}

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

// 保存学习进度
async function saveLearningProgress() {
  if (!authStore.value.userInfo?.userID || !learningRecord.value) return;
  
  const currentTime = Date.now();
  const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
  
  try {
    await learningRecordApi.updateRecord({
      ...learningRecord.value,
      duration: (learningRecord.value.duration || 0) + duration,
      progress: currentProgress.value,
      isComplete: currentProgress.value === 100,
      lastLearnTime: new Date().toISOString()
    });
    
    // 重置开始时间
    learningStartTime.value = currentTime;
  } catch (error) {
    console.error('保存学习进度失败:', error);
  }
}

// 处理视频进度
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 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;
  
  .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);
}

.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>