chore: update

src/modules/course/components/CourseListItem.vue

@@ -27,6 +27,18 @@ const electiveTypeText = computed(() => {
 
 // 是否选中
 const isActive = computed(() => props.data.course_id === courseId)
+
+// 跳转链接
+const targetUrlQuery = computed(() => {
+  let queryString = `course_id=${props.data.course_id}&semester_id=${props.data.semester_id}`
+  if (props.data.section && props.data.section?.watch_video_length) {
+    queryString += `&chapter_id=${props.data.section?.chapter_id ?? ''}&section_id=${
+      props.data.section?.section_id ?? ''
+    }&resource_id=${props.data.section?.resource_id ?? ''}`
+  }
+
+  return queryString
+})
 // 置顶
 function handleTop(data: CourseListItemType) {
   topCourse({ id: data.id, status: data.is_top ? 0 : 1 }).then(() => {
@@ -41,9 +53,7 @@ function handleTop(data: CourseListItemType) {
     <el-tooltip :content="!!data.is_top ? '取消置顶' : '置顶'">
       <div class="course-item__top" :class="{ 'is-active': !!data.is_top }" @click="handleTop(data)"></div>
     </el-tooltip>
-    <router-link
-      :to="`/course/view?course_id=${data.course_id}&semester_id=${data.semester_id}&chapter_id=${data.section?.chapter_id}&section_id=${data.section?.section_id}&resource_id=${data.section?.resource_id}`"
-    >
+    <router-link :to="`/course/view?${targetUrlQuery}`">
       <div class="course-item-bd">
         <div class="course-item-pic">
           <img :src="data.cover" /><span class="course-item__type">{{ electiveTypeText }}</span>
@@ -58,10 +68,7 @@ function handleTop(data: CourseListItemType) {
       <div class="course-item-playlist" v-if="data.section?.watch_video_length">
         <p class="t1">{{ data.section.name }}</p>
         <p class="t2">已观看{{ data.section.schedule }}%</p>
-        <router-link
-          :to="`/course/player?course_id=${data.course_id}&chapter_id=${data.section.chapter_id}&section_id=${data.section.section_id}&resource_id=${data.section.resource_id}&semester_id=${data.semester_id}`"
-          target="_blank"
-        >
+        <router-link :to="`/course/player?${targetUrlQuery}`" target="_blank">
           <el-button type="primary" round>点击观看</el-button>
         </router-link>
       </div>

src/modules/course/components/CoursePlayerChapter.vue

@@ -10,6 +10,10 @@ interface Props {
 }
 const props = defineProps<Props>()
 
+defineEmits<{
+  (e: 'clickPPT', ppt: PptType): void
+}>()
+
 const route = useRoute()
 let courseId = $ref<string>('')
 let sectionId = $ref<string>('')
@@ -54,7 +58,7 @@ function formatDuration(duration: number | undefined) {
       </el-tab-pane>
       <el-tab-pane label="讲义" name="ppt" v-if="pptList && pptList.length">
         <ul class="lecture-list">
-          <li v-for="item in pptList" :key="item.url">
+          <li v-for="item in pptList" :key="item.url" @click="$emit('clickPPT', item)">
             <img :src="`${item.url}?x-oss-process=image/resize,m_fill,h_128,w_218`" loading="lazy" />
             <span>{{ formatDuration(item.point) }}</span>
           </li>

src/modules/course/components/CourseViewChapter.vue

@@ -34,6 +34,13 @@ function fetchList() {
   }
   getChapterTreeList({ course_id: courseId, semester_id: semesterId }).then(res => {
     chapterList = res.data.items
+    // 设置展开第一项
+    const [first] = chapterList
+    if (!chapterId && first) {
+      chapterIds.push(first.id)
+      const [section] = first.sections
+      section && sectionIds.push(section.id)
+    }
   })
 }
 onMounted(() => {

src/modules/course/views/CoursePlayer.vue

@@ -4,6 +4,7 @@ import { getCourseSection, getChapterTreeList } from '../api'
 import CoursePlayerResourceList from '../components/CoursePlayerResourceList.vue'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import type { VideoJsPlayer } from 'video.js'
+import type { PptType } from '@/types'
 
 const CoursePlayerVideo = defineAsyncComponent(() => import('../components/CoursePlayerVideo.vue'))
 const CoursePlayerChapter = defineAsyncComponent(() => import('../components/CoursePlayerChapter.vue'))
@@ -61,6 +62,10 @@ const pptList = $computed(() => {
 function onUpdateResource(resource: CourseResourceType | undefined) {
   currentVideoResource = resource
 }
+// ppt点击
+function onClickPPT(ppt: PptType) {
+  videoJsPlayer?.currentTime(ppt.point)
+}
 
 let sidebarVisible = $ref<boolean>(true)
 function toggleSidebar() {
@@ -99,7 +104,7 @@ function toggleSidebar() {
       </div>
       <div class="course-player-aside" :class="{ 'is-hidden': !sidebarVisible }">
         <div class="course-player-aside__inner">
-          <CoursePlayerChapter :chapterList="chapterList" :pptList="pptList" />
+          <CoursePlayerChapter :chapterList="chapterList" :pptList="pptList" @clickPPT="onClickPPT" />
         </div>
         <div class="toggle-button" :class="{ 'is-hidden': !sidebarVisible }" @click="toggleSidebar">
           <el-icon>