feat(StudyDetailPage): 添加图片轮播和预览功能

在StudyDetailPage页面中，新增了图片轮播组件`van-swipe`和图片预览组件`van-image-preview`，以支持课程图片的展示和预览功能。用户现在可以点击图片进行全屏预览。

@@ -38,6 +38,7 @@ declare module 'vue' {
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanPicker: typeof import('vant/es')['Picker']
@@ -45,6 +46,8 @@ declare module 'vue' {
     VanPopup: typeof import('vant/es')['Popup']
     VanProgress: typeof import('vant/es')['Progress']
     VanRate: typeof import('vant/es')['Rate']
+    VanSwipe: typeof import('vant/es')['Swipe']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
     VanTab: typeof import('vant/es')['Tab']
     VanTabs: typeof import('vant/es')['Tabs']
     VanUploader: typeof import('vant/es')['Uploader']

@@ -30,7 +30,22 @@
                     <AudioPlayer :songs="audioList" />
                 </div>
                 <!-- 图片列表展示区域 -->
-                <div v-if="course.course_type === 'image'" class="w-full relative">image</div>
+                <div v-if="course.course_type === 'image'" class="w-full relative">
+                    <van-swipe class="w-full" :autoplay="0" :show-indicators="true">
+                        <van-swipe-item v-for="(item, index) in courseFile?.list" :key="index"  @click.native="showImagePreview(index)">
+                            <van-image
+                                :src="item.url"
+                                class="w-full"
+                                fit="cover"
+                                style="aspect-ratio: 16/9;"
+                            >
+                                <template #image>
+                                    <img :src="item.url" class="w-full h-full object-cover" />
+                                </template>
+                            </van-image>
+                        </van-swipe-item>
+                    </van-swipe>
+                </div>
                 <!-- 文件列表展示区域 -->
                 <div v-if="course.course_type === 'file'" class="w-full relative">file</div>
                 <!-- 标签页区域 -->
@@ -161,6 +176,17 @@
             </div>
         </div>
 
+        <!-- 图片预览组件 -->
+        <van-image-preview
+            v-model:show="showPreview"
+            :images="previewImages"
+            :close-on-click-image="false"
+        >
+            <template #image="{ src, style, onLoad }">
+                <img :src="src" :style="[{ width: '100%' }, style]" @load="onLoad" />
+            </template>
+        </van-image-preview>
+
         <!-- 课程目录弹出层 -->
         <van-popup v-model:show="showCatalog" position="bottom" round closeable safe-area-inset-bottom
             style="height: 80%">
@@ -247,6 +273,16 @@ const handleVideoPause = () => {
     // 保持视频播放器可见，只在初始状态显示封面
 };
 
+// 图片预览相关
+const showPreview = ref(false);
+const previewImages = ref([]);
+
+// 显示图片预览
+const showImagePreview = (startPosition) => {
+    previewImages.value = courseFile.value?.list?.map(item => item.url) || [];
+    showPreview.value = true;
+};
+
 // 评论列表分页参数
 const popupCommentList = ref([]);
 const popupLoading = ref(false);