diff --git a/src/components/player/PdfViewer.vue b/src/components/player/PdfViewer.vue
new file mode 100644
index 0000000..a8f7d83
--- /dev/null
+++ b/src/components/player/PdfViewer.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="pdf-viewer">
+    <iframe
+      :src="pdfUrl"
+      frameborder="0"
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  pdfUrl: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.pdf-viewer {
+  width: 100%;
+  height: 600px;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/player/PptViewer.vue b/src/components/player/PptViewer.vue
new file mode 100644
index 0000000..ab7178e
--- /dev/null
+++ b/src/components/player/PptViewer.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="ppt-viewer">
+    <div class="slide-container">
+      <img 
+        v-if="currentSlide"
+        :src="currentSlide.url" 
+        :alt="currentSlide.title"
+      />
+      <div class="slide-controls">
+        <el-button 
+          @click="prevSlide" 
+          :disabled="currentIndex === 0"
+        >
+          <el-icon><ArrowLeft /></el-icon>
+        </el-button>
+        <span class="slide-info">{{ currentIndex + 1 }} / {{ slides.length }}</span>
+        <el-button 
+          @click="nextSlide" 
+          :disabled="currentIndex === slides.length - 1"
+        >
+          <el-icon><ArrowRight /></el-icon>
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  slides: {
+    type: Array,
+    required: true
+  }
+})
+
+const currentIndex = ref(0)
+
+const currentSlide = computed(() => props.slides[currentIndex.value])
+
+const prevSlide = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
+const nextSlide = () => {
+  if (currentIndex.value < props.slides.length - 1) {
+    currentIndex.value++
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ppt-viewer {
+  width: 100%;
+  background: #000;
+  
+  .slide-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    
+    .slide-controls {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 20px;
+      
+      .slide-info {
+        color: white;
+        font-size: 14px;
+        min-width: 60px;
+        text-align: center;
+      }
+      
+      .el-button {
+        padding: 6px;
+        color: white;
+        background: transparent;
+        border: none;
+        
+        &:hover:not(:disabled) {
+          background: rgba(255, 255, 255, 0.1);
+        }
+        
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/player/VideoPlayer.vue b/src/components/player/VideoPlayer.vue
new file mode 100644
index 0000000..a4a53f2
--- /dev/null
+++ b/src/components/player/VideoPlayer.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="video-player">
+    <video
+      ref="videoRef"
+      class="video-element"
+      :src="src"
+      :poster="poster"
+      controls
+      @ended="$emit('ended')"
+      @timeupdate="handleTimeUpdate"
+    >
+      您的浏览器不支持 HTML5 视频播放
+    </video>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  poster: {
+    type: String,
+    default: ''
+  }
+})
+
+defineEmits(['ended', 'timeupdate'])
+
+const handleTimeUpdate = (event) => {
+  const video = event.target
+  emit('timeupdate', {
+    currentTime: video.currentTime,
+    duration: video.duration
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.video-player {
+  width: 100%;
+  background: #000;
+  
+  .video-element {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/course/CourseDetail.vue b/src/views/course/CourseDetail.vue
index 8185f18..7b73332 100644
--- a/src/views/course/CourseDetail.vue
+++ b/src/views/course/CourseDetail.vue
@@ -3,806 +3,848 @@
     <div class="course-header">
       <div class="container">
         <div class="course-info">
-          <h1 class="course-title">{{ course.title }}</h1>
-          <p class="course-desc">{{ course.description }}</p>
+          <h1 class="course-title">{{ courseData.title }}</h1>
+          <p class="course-desc">{{ courseData.description }}</p>
           <div class="course-meta">
             <div class="meta-item">
               <el-icon><User /></el-icon>
-              <span>讲师: {{ course.teacher }}</span>
-            </div>
-            <div class="meta-item">
-              <el-icon><Calendar /></el-icon>
-              <span>更新时间: {{ course.updateTime }}</span>
+              <span>讲师: {{ courseData.teacher }}</span>
             </div>
             <div class="meta-item">
               <el-icon><View /></el-icon>
-              <span>{{ course.studentCount }}人学习</span>
+              <span>{{ courseData.studentCount || 0 }}人学习</span>
             </div>
             <div class="meta-item">
-              <el-rate v-model="course.rating" disabled text-color="#ff9900" />
-              <span>({{ course.ratingCount }})</span>
+              <el-rate v-model="courseData.rating" disabled text-color="#ff9900" />
+              <span>({{ courseData.ratingCount || 0 }})</span>
             </div>
           </div>
         </div>
       </div>
     </div>
-    
-    <div class="container">
-      <div class="course-content">
-        <div class="course-main">
-          <el-tabs v-model="activeTab" class="course-tabs">
-            <el-tab-pane label="课程章节" name="chapters">
-              <div class="course-chapters">
-                <el-collapse v-model="activeChapters">
-                  <el-collapse-item v-for="chapter in course.chapters" :key="chapter.id" :title="chapter.title" :name="chapter.id">
-                    <div class="chapter-sections">
-                      <div 
-                        v-for="section in chapter.sections" 
-                        :key="section.id" 
-                        class="section-item"
-                        :class="{ 'is-free': section.isFree, 'is-active': currentSection && currentSection.id === section.id }"
-                        @click="playSection(chapter, section)"
+
+    <div class="main-content">
+      <div class="container">
+        <el-row :gutter="20">
+          <el-col :span="18">
+            <div class="resource-player">
+              <div v-if="currentResource" class="player-container">
+                <video-player
+                  v-if="currentResource.type === 'video'"
+                  :src="currentResource.url"
+                  :poster="courseData.coverImg"
+                  @ended="handleResourceComplete"
+                  @timeupdate="handleTimeUpdate"
+                />
+
+                <pdf-viewer
+                  v-else-if="currentResource.type === 'pdf'"
+                  :pdf-url="currentResource.url"
+                />
+
+                <ppt-viewer
+                  v-else-if="currentResource.type === 'ppt'"
+                  :slides="currentResource.slides"
+                  @slide-change="handleSlideChange"
+                />
+
+                <div class="resource-info">
+                  <h3>{{ currentResource.title }}</h3>
+                  <div class="resource-meta">
+                    <span class="type-tag" :class="currentResource.type">
+                      {{ getResourceTypeName(currentResource.type) }}
+                    </span>
+                    <span v-if="currentResource.duration" class="duration">
+                      <el-icon><Timer /></el-icon>
+                      {{ currentResource.duration }}
+                    </span>
+                    <el-button
+                      v-if="currentResource.downloadable"
+                      type="primary"
+                      link
+                      @click="downloadResource"
+                    >
+                      <el-icon><Download /></el-icon>
+                      下载资料
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="course-tabs">
+              <el-tabs v-model="activeTab">
+                <el-tab-pane label="课程章节" name="chapters">
+                  <div class="chapter-list">
+                    <el-collapse v-model="activeChapters">
+                      <el-collapse-item
+                        v-for="chapter in courseData.chapters"
+                        :key="chapter.id"
+                        :title="chapter.title"
+                        :name="chapter.id"
                       >
-                        <div class="section-info">
-                          <el-icon v-if="section.type === 'video'"><VideoPlay /></el-icon>
-                          <el-icon v-else-if="section.type === 'document'"><Document /></el-icon>
-                          <span class="section-title">{{ section.title }}</span>
-                          <span v-if="section.isFree" class="free-tag">免费</span>
+                        <div class="section-list">
+                          <div
+                            v-for="section in chapter.sections"
+                            :key="section.id"
+                            class="section-item"
+                            :class="{
+                              'active': currentResource?.id === section.id,
+                              'completed': section.completed
+                            }"
+                            @click="playResource(section)"
+                          >
+                            <div class="section-info">
+                              <el-icon>
+                                <VideoCamera v-if="section.type === 'video'" />
+                                <Document v-else-if="section.type === 'pdf'" />
+                                <PictureFilled v-else-if="section.type === 'ppt'" />
+                                <Files v-else />
+                              </el-icon>
+                              <span class="title">{{ section.title }}</span>
+                              <el-tag
+                                v-if="section.isFree"
+                                size="small"
+                                type="success"
+                              >免费</el-tag>
+                            </div>
+                            <div class="section-meta">
+                              <span class="duration">{{ section.duration }}</span>
+                              <el-icon
+                                v-if="section.completed"
+                                class="completed-icon"
+                              ><Check /></el-icon>
+                            </div>
+                          </div>
                         </div>
-                        <div class="section-meta">
-                          <span>{{ section.duration }}</span>
-                          <el-icon v-if="section.isCompleted"><Check /></el-icon>
+                      </el-collapse-item>
+                    </el-collapse>
+                  </div>
+                </el-tab-pane>
+
+                <el-tab-pane label="课程介绍" name="intro">
+                  <div class="course-intro" v-html="courseData.description"></div>
+                </el-tab-pane>
+
+                <el-tab-pane label="课程评价" name="reviews">
+                  <div class="course-reviews">
+                    <div class="review-summary">
+                      <div class="rating-overall">
+                        <div class="rating-score">{{ courseData.rating.toFixed(1) }}</div>
+                        <div class="rating-stars">
+                          <el-rate v-model="courseData.rating" disabled text-color="#ff9900" />
+                          <div class="rating-count">{{ courseData.ratingCount }}人评价</div>
+                        </div>
+                      </div>
+                      <div class="rating-distribution">
+                        <div v-for="(count, index) in courseData.ratingDistribution" :key="index" class="rating-bar">
+                          <span class="rating-level">{{ 5 - index }}星</span>
+                          <el-progress
+                            :percentage="Math.round(count / courseData.ratingCount * 100)"
+                            :stroke-width="12"
+                            :show-text="false"
+                            :color="'#ffc107'"
+                          />
+                          <span class="rating-percent">{{ Math.round(count / courseData.ratingCount * 100) }}%</span>
                         </div>
                       </div>
                     </div>
-                  </el-collapse-item>
-                </el-collapse>
-              </div>
-            </el-tab-pane>
-            
-            <el-tab-pane label="课程介绍" name="intro">
-              <div class="course-intro" v-html="course.introHtml"></div>
-            </el-tab-pane>
-            
-            <el-tab-pane label="课程评价" name="reviews">
-              <div class="course-reviews">
-                <div class="review-summary">
-                  <div class="rating-overall">
-                    <div class="rating-score">{{ course.rating.toFixed(1) }}</div>
-                    <div class="rating-stars">
-                      <el-rate v-model="course.rating" disabled text-color="#ff9900" />
-                      <div class="rating-count">{{ course.ratingCount }}人评价</div>
-                    </div>
-                  </div>
-                  <div class="rating-distribution">
-                    <div v-for="(count, index) in course.ratingDistribution" :key="index" class="rating-bar">
-                      <span class="rating-level">{{ 5 - index }}星</span>
-                      <el-progress 
-                        :percentage="Math.round(count / course.ratingCount * 100)" 
-                        :stroke-width="12"
-                        :show-text="false"
-                        :color="'#ffc107'"
-                      />
-                      <span class="rating-percent">{{ Math.round(count / course.ratingCount * 100) }}%</span>
-                    </div>
-                  </div>
-                </div>
-                
-                <div class="review-list">
-                  <div v-for="review in course.reviews" :key="review.id" class="review-item">
-                    <div class="review-header">
-                      <div class="reviewer-info">
-                        <el-avatar :size="40" :src="review.avatar"></el-avatar>
-                        <div class="reviewer-meta">
-                          <div class="reviewer-name">{{ review.username }}</div>
-                          <div class="review-date">{{ review.date }}</div>
-                        </div>
-                      </div>
-                      <div class="review-rating">
-                        <el-rate v-model="review.rating" disabled text-color="#ff9900" />
-                      </div>
-                    </div>
-                    <div class="review-content">{{ review.content }}</div>
-                    <div v-if="review.reply" class="review-reply">
-                      <div class="reply-header">讲师回复:</div>
-                      <div class="reply-content">{{ review.reply }}</div>
+
+                    <div class="review-list">
+                      <div v-for="review in courseData.reviews" :key="review.id" class="review-item">
+                        <div class="review-header">
+                          <div class="reviewer-info">
+                            <el-avatar :size="40" :src="review.avatar"></el-avatar>
+                            <div class="reviewer-meta">
+                              <div class="reviewer-name">{{ review.username }}</div>
+                              <div class="review-date">{{ review.date }}</div>
+                            </div>
+                          </div>
+                          <div class="review-rating">
+                            <el-rate v-model="review.rating" disabled text-color="#ff9900" />
+                          </div>
+                        </div>
+                        <div class="review-content">{{ review.content }}</div>
+                        <div v-if="review.reply" class="review-reply">
+                          <div class="reply-header">讲师回复:</div>
+                          <div class="reply-content">{{ review.reply }}</div>
+                        </div>
+                      </div>
                     </div>
                   </div>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div class="course-sidebar">
+              <div class="price-card">
+                <div class="price" :class="{ 'free': !courseData.price }">
+                  {{ courseData.price ? `¥${courseData.price}` : '免费' }}
                 </div>
+                <el-button
+                  type="primary"
+                  size="large"
+                  block
+                  @click="handleEnroll"
+                >
+                  {{ courseData.enrolled ? '继续学习' : '立即报名' }}
+                </el-button>
               </div>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-        
-        <div class="course-sidebar">
-          <el-card class="sidebar-card">
-            <div class="video-preview">
-              <img :src="course.coverImg" :alt="course.title">
-              <div class="play-button" @click="playPreview">
-                <el-icon><VideoPlay /></el-icon>
+
+              <div class="course-info-card">
+                <h4>课程信息</h4>
+                <ul>
+                  <li>
+                    <el-icon><VideoPlay /></el-icon>
+                    <span>{{ courseData.videoCount || 0 }}个视频</span>
+                  </li>
+                  <li>
+                    <el-icon><Document /></el-icon>
+                    <span>{{ courseData.docCount || 0 }}份文档</span>
+                  </li>
+                  <li>
+                    <el-icon><Timer /></el-icon>
+                    <span>{{ courseData.totalDuration || '0小时' }}学时</span>
+                  </li>
+                  <li>
+                    <el-icon><Connection /></el-icon>
+                    <span>永久有效</span>
+                  </li>
+                </ul>
               </div>
             </div>
-            
-            <div class="course-price-info">
-              <div v-if="course.price > 0" class="price">
-                <span class="current-price">¥{{ course.price.toFixed(2) }}</span>
-                <span v-if="course.originalPrice" class="original-price">¥{{ course.originalPrice.toFixed(2) }}</span>
-              </div>
-              <div v-else class="price free">免费</div>
-            </div>
-            
-            <div class="course-actions">
-              <el-button v-if="isEnrolled" type="primary" @click="continueLearning">继续学习</el-button>
-              <el-button v-else type="primary" @click="enrollCourse">立即报名</el-button>
-              <el-button v-if="isFavorite" @click="removeFavorite">取消收藏</el-button>
-              <el-button v-else @click="addFavorite">收藏课程</el-button>
-            </div>
-            
-            <div class="course-includes">
-              <h3>课程包含</h3>
-              <ul>
-                <li><el-icon><VideoPlay /></el-icon> {{ course.videoCount }}个视频</li>
-                <li><el-icon><Document /></el-icon> {{ course.documentCount }}个文档</li>
-                <li><el-icon><Timer /></el-icon> {{ course.totalDuration }}</li>
-                <li><el-icon><Trophy /></el-icon> 完成后获得证书</li>
-                <li><el-icon><Connection /></el-icon> 永久观看权限</li>
-              </ul>
-            </div>
-          </el-card>
-        </div>
+          </el-col>
+        </el-row>
       </div>
     </div>
-    
-    <el-dialog v-model="videoDialogVisible" title="视频播放" width="70%" destroy-on-close>
-      <div class="video-player">
-        <div class="player-placeholder">
-          <img :src="course.coverImg" alt="视频封面">
-          <div class="player-overlay">
-            <p>{{ currentSection ? currentSection.title : '课程预览' }}</p>
-            <el-icon><VideoPlay /></el-icon>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Calendar, View, VideoPlay, Document, Check, Trophy, Timer, Connection } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  User, View, VideoPlay, Document, Timer,
+  Check, Connection, VideoCamera, Files,
+  PictureFilled, Download
+} from '@element-plus/icons-vue'
+import VideoPlayer from '@/components/player/VideoPlayer.vue'
+import PdfViewer from '@/components/player/PdfViewer.vue'
+import PptViewer from '@/components/player/PptViewer.vue'
 
 const route = useRoute()
-const router = useRouter()
-const courseId = route.params.id
 const activeTab = ref('chapters')
-const activeChapters = ref([1])
-const videoDialogVisible = ref(false)
-const currentSection = ref(null)
+const activeChapters = ref([])
 
 // 模拟课程数据
-const course = ref({
-  id: 1,
-  title: 'Vue.js 3 完全指南',
-  description: '从入门到精通，全面掌握Vue3的新特性和开发技巧',
-  coverImg: 'https://picsum.photos/id/1/600/400',
+const courseData = ref({
+  title: 'C++面向对象编程精讲',
+  description: '本课程深入讲解C++面向对象编程的核心概念和实践应用，帮助学习者掌握C++开发技能。',
   teacher: '张教授',
-  updateTime: '2023-05-15',
-  studentCount: 1250,
+  price: 0, // 免费
   rating: 4.8,
   ratingCount: 245,
-  ratingDistribution: [180, 50, 10, 3, 2], // 5星到1星的分布
-  price: 199,
-  originalPrice: 299,
-  videoCount: 45,
-  documentCount: 12,
-  totalDuration: '12小时30分钟',
-  introHtml: `
-    <h2>课程简介</h2>
-    <p>Vue.js 3是一个流行的JavaScript框架，用于构建用户界面。它建立在标准HTML、CSS和JavaScript之上，并提供了一个声明式的、组件化的编程模型，帮助你高效地开发用户界面。</p>
-    <h3>你将学到什么</h3>
-    <ul>
-      <li>Vue 3的核心概念和基础知识</li>
-      <li>组合式API的使用方法和最佳实践</li>
-      <li>Vue Router和Pinia状态管理</li>
-      <li>Vue 3的高级特性和性能优化</li>
-      <li>实际项目开发和部署</li>
-    </ul>
-    <h3>适合人群</h3>
-    <p>本课程适合有一定JavaScript基础，想要学习Vue.js 3的开发者。如果你已经熟悉Vue 2，本课程也会帮助你快速过渡到Vue 3。</p>
-  `,
+  studentCount: 1234,
+  videoCount: 12,
+  docCount: 5,
+  totalDuration: '24小时',
+  enrolled: false,
+  coverImg: 'http://example.com/course-cover.jpg',
   chapters: [
     {
       id: 1,
-      title: '第1章：Vue 3基础入门',
+      title: '第一章：C++基础入门',
       sections: [
-        { id: 101, title: '课程介绍', type: 'video', duration: '10:30', isFree: true, isCompleted: true },
-        { id: 102, title: 'Vue 3新特性概述', type: 'video', duration: '15:45', isFree: true, isCompleted: true },
-        { id: 103, title: '开发环境搭建', type: 'video', duration: '12:20', isFree: false, isCompleted: true },
-        { id: 104, title: '第一个Vue 3应用', type: 'video', duration: '18:15', isFree: false, isCompleted: false }
+        {
+          id: 101,
+          title: '1.1 C++开发环境搭建',
+          type: 'video',
+          duration: '25:00',
+          url: 'http://localhost:9000/videos/ffffad37-9804-4765-ae18-3f8dcda9bea8.mp4',
+          isFree: true,
+          completed: false
+        },
+        {
+          id: 102,
+          title: '1.2 C++基本语法',
+          type: 'video',
+          duration: '30:00',
+          url: 'https://example.com/videos/2.mp4',
+          isFree: true,
+          completed: false
+        },
+        {
+          id: 103,
+          title: '第一章课件',
+          type: 'pdf',
+          url: 'http://localhost:9000/file/%E5%AE%9E%E6%96%BD%E7%94%A8.pdf',
+          downloadable: true,
+          isFree: true,
+          completed: false
+        }
       ]
     },
     {
       id: 2,
-      title: '第2章：组合式API详解',
+      title: '第二章：面向对象基础',
       sections: [
-        { id: 201, title: 'setup函数介绍', type: 'video', duration: '14:30', isFree: false, isCompleted: false },
-        { id: 202, title: 'ref和reactive', type: 'video', duration: '20:15', isFree: false, isCompleted: false },
-        { id: 203, title: '计算属性和侦听器', type: 'video', duration: '16:40', isFree: false, isCompleted: false },
-        { id: 204, title: '生命周期钩子', type: 'video', duration: '12:55', isFree: false, isCompleted: false },
-        { id: 205, title: '组合式函数', type: 'document', duration: '阅读材料', isFree: false, isCompleted: false }
-      ]
-    },
-    {
-      id: 3,
-      title: '第3章：Vue Router路由管理',
-      sections: [
-        { id: 301, title: 'Vue Router 4基础', type: 'video', duration: '18:20', isFree: false, isCompleted: false },
-        { id: 302, title: '动态路由和路由参数', type: 'video', duration: '15:10', isFree: false, isCompleted: false },
-        { id: 303, title: '路由导航守卫', type: 'video', duration: '22:35', isFree: false, isCompleted: false },
-        { id: 304, title: '路由元信息和过渡效果', type: 'document', duration: '阅读材料', isFree: false, isCompleted: false }
+        {
+          id: 201,
+          title: '2.1 类与对象',
+          type: 'video',
+          duration: '45:00',
+          url: 'https://example.com/videos/3.mp4',
+          isFree: false,
+          completed: false
+        },
+        {
+          id: 202,
+          title: '2.2 封装与访问控制',
+          type: 'video',
+          duration: '40:00',
+          url: 'https://example.com/videos/4.mp4',
+          isFree: false,
+          completed: false
+        },
+        {
+          id: 203,
+          title: '第二章PPT',
+          type: 'ppt',
+          slides: [
+            { url: 'http://localhost:9000/file/c6d07740-7306-4fc1-b1f8-670684a73ed9/img/31c258e7-3fd4-402c-8f2f-c9455c6cfdaf.png', title: '封面' },
+            { url: 'http://localhost:9000/file/c6d07740-7306-4fc1-b1f8-670684a73ed9/img/4灰度.jpg', title: '目录' },
+            { url: 'http://localhost:9000/file/c6d07740-7306-4fc1-b1f8-670684a73ed9/img/4.jpg', title: '内容' }
+          ],
+          isFree: false,
+          completed: false
+        }
       ]
     }
   ],
   reviews: [
     {
       id: 1,
-      username: '李明',
-      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      username: '学员小王',
+      avatar: 'https://example.com/avatar1.jpg',
       rating: 5,
-      date: '2023-05-10',
-      content: '非常棒的课程！讲解清晰，内容全面，对Vue 3的理解有了质的提升。',
-      reply: '谢谢支持，希望课程对你有所帮助！'
+      content: '课程内容非常详实，讲解清晰，很适合入门学习！',
+      date: '2024-01-15',
+      reply: '感谢您的评价，我们会继续努力！'
     },
     {
       id: 2,
-      username: '王芳',
-      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      username: '学员小李',
+      avatar: 'https://example.com/avatar2.jpg',
       rating: 4,
-      date: '2023-05-05',
-      content: '内容很充实，但有些地方讲解速度有点快，需要多看几遍才能理解。',
-      reply: null
-    },
-    {
-      id: 3,
-      username: '张伟',
-      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-      rating: 5,
-      date: '2023-04-28',
-      content: '老师讲解非常清晰，示例也很实用，强烈推荐给想学Vue 3的同学！',
-      reply: '感谢您的评价，我们会继续努力提供更好的课程！'
+      content: '整体不错，希望能多一些实战案例。',
+      date: '2024-01-10'
     }
-  ]
+  ],
+  ratingDistribution: [150, 50, 30, 10, 5]
 })
 
-// 模拟用户状态
-const isEnrolled = ref(true)
-const isFavorite = ref(false)
+// 当前正在播放/查看的资源
+const currentResource = ref(courseData.value.chapters[0].sections[0])
 
-// 播放课程章节
-const playSection = (chapter, section) => {
-  if (!isEnrolled.value && !section.isFree) {
+// 资源类型名称映射
+const resourceTypes = {
+  video: '视频',
+  pdf: 'PDF文档',
+  ppt: 'PPT课件',
+  document: '文档资料'
+}
+
+const getResourceTypeName = (type) => {
+  return resourceTypes[type] || '其他'
+}
+
+// 播放资源
+const playResource = (resource) => {
+  if (!courseData.value.enrolled && !resource.isFree) {
     ElMessage.warning('请先报名课程')
     return
   }
-  
-  currentSection.value = section
-  videoDialogVisible.value = true
+  currentResource.value = resource
 }
 
-// 播放预览视频
-const playPreview = () => {
-  currentSection.value = null
-  videoDialogVisible.value = true
-}
-
-// 继续学习
-const continueLearning = () => {
-  // 查找上次学习的位置或第一个未完成的章节
-  let targetChapter, targetSection
-  
-  for (const chapter of course.value.chapters) {
-    const uncompletedSection = chapter.sections.find(section => !section.isCompleted)
-    if (uncompletedSection) {
-      targetChapter = chapter
-      targetSection = uncompletedSection
-      break
-    }
+// 处理资源完成
+const handleResourceComplete = () => {
+  if (currentResource.value) {
+    currentResource.value.completed = true
+    ElMessage.success('学习完成！')
+    // TODO: 调用后端API更新学习进度
   }
-  
-  if (targetChapter && targetSection) {
-    activeChapters.value = [targetChapter.id]
-    playSection(targetChapter, targetSection)
-  } else {
-    // 如果全部完成，播放第一章第一节
-    const firstChapter = course.value.chapters[0]
-    const firstSection = firstChapter.sections[0]
-    activeChapters.value = [firstChapter.id]
-    playSection(firstChapter, firstSection)
+}
+
+// 处理视频进度更新
+const handleTimeUpdate = ({ currentTime, duration }) => {
+  const progress = (currentTime / duration) * 100
+  console.log('Progress:', progress)
+  // TODO: 定期保存播放进度到后端
+  if (progress > 90) {
+    handleResourceComplete()
+  }
+}
+
+// 处理PPT幻灯片切换
+const handleSlideChange = (index) => {
+  // 保存PPT浏览进度
+  console.log('Current slide:', index)
+}
+
+// 下载资源
+const downloadResource = () => {
+  if (currentResource.value?.url) {
+    window.open(currentResource.value.url, '_blank')
   }
 }
 
 // 报名课程
-const enrollCourse = () => {
-  ElMessageBox.confirm('确定要报名该课程吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info'
-  }).then(() => {
-    // 在实际应用中，这里应该调用API报名课程
-    isEnrolled.value = true
-    ElMessage.success('报名成功')
-  }).catch(() => {
-    // 用户取消操作
-  })
+const handleEnroll = async () => {
+  try {
+    // TODO: 调用报名API
+    courseData.value.enrolled = true
+    ElMessage.success('报名成功！')
+  } catch (error) {
+    ElMessage.error('报名失败：' + error.message)
+  }
 }
 
-// 收藏课程
-const addFavorite = () => {
-  // 在实际应用中，这里应该调用API收藏课程
-  isFavorite.value = true
-  ElMessage.success('已收藏课程')
-}
+onMounted(async () => {
+  const courseId = route.params.id
+  try {
+    // TODO: 获取课程详情
+    // const response = await getCourseDetail(courseId)
+    // courseData.value = response.data
 
-// 取消收藏
-const removeFavorite = () => {
-  ElMessageBox.confirm('确定要取消收藏该课程吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 在实际应用中，这里应该调用API取消收藏
-    isFavorite.value = false
-    ElMessage.success('已取消收藏')
-  }).catch(() => {
-    // 用户取消操作
-  })
-}
-
-onMounted(() => {
-  // 在实际应用中，这里应该从API获取课程详情
-  // fetchCourseDetail(courseId)
-  
-  // 检查URL参数，如果有autoplay=true，则自动开始播放
-  if (route.query.autoplay === 'true') {
-    continueLearning()
+    // 默认展开第一章
+    activeChapters.value = [courseData.value.chapters[0].id]
+  } catch (error) {
+    ElMessage.error('获取课程信息失败')
   }
 })
 </script>
 
 <style lang="scss" scoped>
 .course-detail {
+  background: #f8fafc;
+  min-height: 100vh;
+
   .course-header {
-    background-color: #f5f7fa;
-    padding: 40px 0;
-    
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+    padding: 60px 0;
+    color: white;
+
     .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
     }
-    
+
     .course-info {
       max-width: 800px;
-      
+
       .course-title {
-        font-size: 28px;
-        margin-bottom: 15px;
-        color: #303133;
+        font-size: 32px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: white;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
-      
+
       .course-desc {
         font-size: 16px;
-        color: #606266;
-        margin-bottom: 20px;
+        color: #e2e8f0;
+        margin-bottom: 24px;
         line-height: 1.6;
+        opacity: 0.9;
       }
-      
+
       .course-meta {
         display: flex;
         flex-wrap: wrap;
-        gap: 20px;
-        
+        gap: 24px;
+
         .meta-item {
           display: flex;
           align-items: center;
-          color: #909399;
-          
+          color: #cbd5e1;
+          font-size: 15px;
+
           .el-icon {
-            margin-right: 5px;
+            margin-right: 8px;
+            font-size: 18px;
+          }
+
+          .el-rate {
+            margin-right: 4px;
           }
         }
       }
     }
   }
-  
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 30px 20px;
-  }
-  
-  .course-content {
-    display: grid;
-    grid-template-columns: 1fr 350px;
-    gap: 30px;
-    
-    @media (max-width: 992px) {
-      grid-template-columns: 1fr;
+
+  .main-content {
+    padding: 40px 20px;
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
     }
-    
-    .course-main {
-      background-color: white;
-      border-radius: 8px;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      overflow: hidden;
-      
-      .course-tabs {
-        padding: 20px;
+  }
+
+  .resource-player {
+    background: white;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+    .player-container {
+      position: relative;
+      width: 100%;
+      background: #000;
+
+      video {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        object-fit: contain;
       }
-      
-      .course-chapters {
-        .chapter-sections {
-          .section-item {
+
+      .resource-info {
+        background: white;
+        padding: 20px;
+        border-top: 1px solid #e2e8f0;
+
+        h3 {
+          font-size: 18px;
+          font-weight: 600;
+          color: #1e293b;
+          margin-bottom: 12px;
+        }
+
+        .resource-meta {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+
+          .type-tag {
+            display: inline-flex;
+            align-items: center;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 500;
+
+            .el-icon {
+              margin-right: 4px;
+            }
+
+            &.video {
+              background: #eff6ff;
+              color: #3b82f6;
+            }
+            &.pdf {
+              background: #fef2f2;
+              color: #ef4444;
+            }
+            &.ppt {
+              background: #fff7ed;
+              color: #f97316;
+            }
+            &.document {
+              background: #f0fdf4;
+              color: #22c55e;
+            }
+          }
+
+          .duration {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: #64748b;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .course-tabs {
+    margin-top: 24px;
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+    .chapter-list {
+      .el-collapse {
+        border: none;
+
+        .el-collapse-item {
+          &:not(:last-child) {
+            margin-bottom: 12px;
+          }
+
+          .el-collapse-item__header {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1e293b;
+            background: #f8fafc;
+            border-radius: 8px;
+            padding: 16px;
+            border: none;
+          }
+
+          .el-collapse-item__content {
+            padding: 16px;
+          }
+        }
+      }
+
+      .section-item {
+        padding: 12px 16px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin-bottom: 8px;
+
+        &:hover {
+          background: #f1f5f9;
+        }
+
+        &.active {
+          background: #eff6ff;
+
+          .section-info {
+            color: #3b82f6;
+          }
+        }
+
+        &.completed {
+          .completed-icon {
+            color: #22c55e;
+          }
+        }
+
+        .section-info {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          color: #475569;
+
+          .el-icon {
+            font-size: 18px;
+          }
+
+          .title {
+            flex: 1;
+            font-size: 15px;
+          }
+
+          .el-tag {
+            font-size: 12px;
+            border-radius: 4px;
+          }
+        }
+
+        .section-meta {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          color: #94a3b8;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .course-reviews {
+      .review-summary {
+        display: flex;
+        gap: 40px;
+        padding: 24px;
+        background: #f8fafc;
+        border-radius: 12px;
+        margin-bottom: 24px;
+
+        .rating-overall {
+          display: flex;
+          gap: 20px;
+          align-items: center;
+
+          .rating-score {
+            font-size: 48px;
+            font-weight: 600;
+            color: #f59e0b;
+          }
+
+          .rating-stars {
+            .rating-count {
+              margin-top: 4px;
+              color: #64748b;
+              font-size: 14px;
+            }
+          }
+        }
+
+        .rating-distribution {
+          flex: 1;
+          max-width: 400px;
+
+          .rating-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 8px;
+
+            .rating-level {
+              width: 40px;
+              color: #64748b;
+              font-size: 14px;
+            }
+
+            .el-progress {
+              flex: 1;
+            }
+
+            .rating-percent {
+              width: 40px;
+              text-align: right;
+              color: #64748b;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+      .review-list {
+        .review-item {
+          padding: 20px;
+          border-bottom: 1px solid #e2e8f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .review-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 12px 10px;
-            border-bottom: 1px solid #ebeef5;
-            cursor: pointer;
-            
-            &:last-child {
-              border-bottom: none;
-            }
-            
-            &:hover {
-              background-color: #f5f7fa;
-            }
-            
-            &.is-free {
-              .section-title {
-                color: #67c23a;
-              }
-            }
-            
-            &.is-active {
-              background-color: #ecf5ff;
-            }
-            
-            .section-info {
+            margin-bottom: 12px;
+
+            .reviewer-info {
               display: flex;
               align-items: center;
-              gap: 8px;
-              
-              .el-icon {
-                color: #409eff;
-              }
-              
-              .free-tag {
-                background-color: #67c23a;
-                color: white;
-                padding: 2px 6px;
-                border-radius: 4px;
-                font-size: 12px;
-                margin-left: 8px;
-              }
-            }
-            
-            .section-meta {
-              display: flex;
-              align-items: center;
-              gap: 10px;
-              color: #909399;
-              font-size: 14px;
-              
-              .el-icon {
-                color: #67c23a;
-              }
-            }
-          }
-        }
-      }
-      
-      .course-intro {
-        padding: 0 10px;
-        
-        h2 {
-          font-size: 20px;
-          margin: 20px 0 15px;
-          color: #303133;
-        }
-        
-        h3 {
-          font-size: 18px;
-          margin: 18px 0 12px;
-          color: #303133;
-        }
-        
-        p {
-          margin-bottom: 15px;
-          line-height: 1.6;
-          color: #606266;
-        }
-        
-        ul {
-          margin-bottom: 15px;
-          padding-left: 20px;
-          
-          li {
-            margin-bottom: 8px;
-            line-height: 1.6;
-            color: #606266;
-          }
-        }
-      }
-      
-      .course-reviews {
-        .review-summary {
-          display: flex;
-          gap: 30px;
-          margin-bottom: 30px;
-          padding: 20px;
-          background-color: #f5f7fa;
-          border-radius: 8px;
-          
-          @media (max-width: 768px) {
-            flex-direction: column;
-          }
-          
-          .rating-overall {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-width: 150px;
-            
-            .rating-score {
-              font-size: 48px;
-              font-weight: bold;
-              color: #ff9900;
-            }
-            
-            .rating-stars {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              
-              .rating-count {
-                margin-top: 5px;
-                color: #909399;
-              }
-            }
-          }
-          
-          .rating-distribution {
-            flex-grow: 1;
-            
-            .rating-bar {
-              display: flex;
-              align-items: center;
-              margin-bottom: 8px;
-              
-              .rating-level {
-                width: 40px;
-                text-align: right;
-                margin-right: 10px;
-                color: #606266;
-              }
-              
-              .el-progress {
-                flex-grow: 1;
-                margin: 0 10px;
-              }
-              
-              .rating-percent {
-                width: 40px;
-                color: #909399;
-              }
-            }
-          }
-        }
-        
-        .review-list {
-          .review-item {
-            border-bottom: 1px solid #ebeef5;
-            padding: 20px 0;
-            
-            &:last-child {
-              border-bottom: none;
-            }
-            
-            .review-header {
-              display: flex;
-              justify-content: space-between;
-              margin-bottom: 15px;
-              
-              .reviewer-info {
-                display: flex;
-                align-items: center;
-                
-                .reviewer-meta {
-                  margin-left: 10px;
-                  
-                  .reviewer-name {
-                    font-weight: bold;
-                    margin-bottom: 5px;
-                  }
-                  
-                  .review-date {
-                    font-size: 12px;
-                    color: #909399;
-                  }
+              gap: 12px;
+
+              .reviewer-meta {
+                .reviewer-name {
+                  font-weight: 500;
+                  color: #1e293b;
+                }
+
+                .review-date {
+                  font-size: 13px;
+                  color: #64748b;
                 }
               }
             }
-            
-            .review-content {
-              margin-bottom: 15px;
-              line-height: 1.6;
-              color: #606266;
-            }
-            
-            .review-reply {
-              background-color: #f5f7fa;
-              padding: 15px;
-              border-radius: 4px;
-              
-              .reply-header {
-                font-weight: bold;
-                margin-bottom: 8px;
-                color: #409eff;
-              }
-              
-              .reply-content {
-                color: #606266;
-                line-height: 1.6;
-              }
-            }
           }
-        }
-      }
-    }
-    
-    .course-sidebar {
-      .sidebar-card {
-        position: sticky;
-        top: 20px;
-        
-        .video-preview {
-          position: relative;
-          cursor: pointer;
-          
-          img {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-            border-radius: 4px;
+
+          .review-content {
+            color: #475569;
+            line-height: 1.6;
+            margin-bottom: 12px;
           }
-          
-          .play-button {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 60px;
-            height: 60px;
-            background-color: rgba(0, 0, 0, 0.6);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            
-            .el-icon {
-              font-size: 30px;
-              color: white;
+
+          .review-reply {
+            background: #f8fafc;
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-top: 12px;
+
+            .reply-header {
+              color: #64748b;
+              font-size: 13px;
+              margin-bottom: 4px;
             }
-            
-            &:hover {
-              background-color: rgba(0, 0, 0, 0.8);
-            }
-          }
-        }
-        
-        .course-price-info {
-          margin: 20px 0;
-          text-align: center;
-          
-          .price {
-            .current-price {
-              font-size: 24px;
-              font-weight: bold;
-              color: #f56c6c;
-            }
-            
-            .original-price {
-              font-size: 16px;
-              color: #909399;
-              text-decoration: line-through;
-              margin-left: 10px;
-            }
-            
-            &.free {
-              font-size: 24px;
-              font-weight: bold;
-              color: #67c23a;
-            }
-          }
-        }
-        
-        .course-actions {
-          display: flex;
-          gap: 10px;
-          margin-bottom: 20px;
-          
-          .el-button {
-            flex: 1;
-          }
-        }
-        
-        .course-includes {
-          margin-top: 20px;
-          
-          h3 {
-            font-size: 16px;
-            margin-bottom: 15px;
-            color: #303133;
-          }
-          
-          ul {
-            list-style: none;
-            padding: 0;
-            
-            li {
-              display: flex;
-              align-items: center;
-              margin-bottom: 10px;
-              color: #606266;
-              
-              .el-icon {
-                margin-right: 8px;
-                color: #409eff;
-              }
+
+            .reply-content {
+              color: #475569;
             }
           }
         }
       }
     }
   }
-  
-  .video-player {
-    .player-placeholder {
-      position: relative;
-      width: 100%;
-      height: 400px;
-      background-color: #000;
-      
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0.5;
-      }
-      
-      .player-overlay {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        text-align: center;
-        
-        p {
-          color: white;
-          font-size: 18px;
-          margin-bottom: 15px;
+
+  .course-sidebar {
+    position: sticky;
+    top: 24px;
+
+    .price-card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 20px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+      .price {
+        font-size: 32px;
+        font-weight: 600;
+        color: #ef4444;
+        margin-bottom: 20px;
+
+        &.free {
+          color: #22c55e;
         }
-        
-        .el-icon {
-          font-size: 48px;
-          color: white;
+      }
+
+      .el-button {
+        height: 44px;
+        font-size: 16px;
+      }
+    }
+
+    .course-info-card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+      h4 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1e293b;
+        margin-bottom: 16px;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          display: flex;
+          align-items: center;
+          padding: 12px 0;
+          color: #475569;
+          font-size: 15px;
+
+          &:not(:last-child) {
+            border-bottom: 1px solid #e2e8f0;
+          }
+
+          .el-icon {
+            margin-right: 12px;
+            font-size: 18px;
+            color: #3b82f6;
+          }
         }
       }
     }
   }
 }
-</style> 
\ No newline at end of file
+</style>