feat(图片预览): 添加图片预览功能并优化视频播放重置逻辑

添加van-image-preview组件实现图片预览功能，包括图片列表管理和索引控制
优化视频播放器停止逻辑，增加播放进度重置到开始位置
修复长文本显示问题，添加word-break和word-wrap样式

@@ -177,6 +177,14 @@
                 </div>
                 </div>
             </div>
             </div>
         </van-popup>
         </van-popup>
+
+        <!-- 图片预览弹窗 -->
+        <van-image-preview
+            v-model:show="imageShow"
+            :images="imageList"
+            :start-position="imageIndex"
+            :show-index="true"
+        />
     </div>
     </div>
 </template>
 </template>
 
 
@@ -233,6 +241,9 @@ const videoUrl = ref('')
 const videoCover = ref('')
 const videoCover = ref('')
 const isVideoPlaying = ref(false)
 const isVideoPlaying = ref(false)
 const videoPlayerRef = ref(null)
 const videoPlayerRef = ref(null)
+const imageShow = ref(false)
+const imageList = ref([])
+const imageIndex = ref(0)
 
 
 /**
 /**
  * 返回上一页
  * 返回上一页
@@ -452,6 +463,10 @@ const onClickPreview = (file, detail) => {
     } else if (activeType.value === 'video' || isVideoFile(fileName)) {
     } else if (activeType.value === 'video' || isVideoFile(fileName)) {
         console.log('准备播放视频:', fileName, fileUrl)
         console.log('准备播放视频:', fileName, fileUrl)
         showVideo(fileName, fileUrl)
         showVideo(fileName, fileUrl)
+    } else if (activeType.value === 'image' || isImageFile(fileName)) {
+        console.log('图片预览由van-uploader组件处理，跳过文件列表点击预览')
+        // 图片预览由van-uploader的@click-preview事件处理，避免重复弹出
+        return
     } else {
     } else {
         console.log('该文件类型不支持预览，文件名:', fileName, '打卡类型:', activeType.value)
         console.log('该文件类型不支持预览，文件名:', fileName, '打卡类型:', activeType.value)
         showToast('该文件类型不支持预览')
         showToast('该文件类型不支持预览')
@@ -534,6 +549,9 @@ const previewFile = (item) => {
     } else if (activeType.value === 'video' || isVideoFile(fileName)) {
     } else if (activeType.value === 'video' || isVideoFile(fileName)) {
         console.log('准备播放视频:', fileName, fileUrl)
         console.log('准备播放视频:', fileName, fileUrl)
         showVideo(fileName, fileUrl)
         showVideo(fileName, fileUrl)
+    } else if (activeType.value === 'image' || isImageFile(fileName)) {
+        console.log('准备预览图片:', fileName, fileUrl)
+        showImage(fileUrl)
     } else {
     } else {
         console.log('该文件类型不支持预览，文件名:', fileName, '打卡类型:', activeType.value)
         console.log('该文件类型不支持预览，文件名:', fileName, '打卡类型:', activeType.value)
         showToast('该文件类型不支持预览')
         showToast('该文件类型不支持预览')
@@ -561,6 +579,16 @@ const isVideoFile = (fileName) => {
 }
 }
 
 
 /**
 /**
+ * 判断是否为图片文件
+ * @param {string} fileName - 文件名
+ * @returns {boolean}
+ */
+const isImageFile = (fileName) => {
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
+    return imageExtensions.some(ext => fileName.toLowerCase().includes(ext))
+}
+
+/**
  * 显示音频播放器
  * 显示音频播放器
  * @param {string} title - 音频标题
  * @param {string} title - 音频标题
  * @param {string} url - 音频URL
  * @param {string} url - 音频URL
@@ -586,6 +614,17 @@ const showVideo = (title, url, cover = '') => {
 }
 }
 
 
 /**
 /**
+ * 显示图片预览
+ * @param {string} url - 图片URL
+ * @param {number} index - 图片索引（可选）
+ */
+const showImage = (url, index = 0) => {
+    imageList.value = [url]
+    imageIndex.value = index
+    imageShow.value = true
+}
+
+/**
  * 开始播放视频
  * 开始播放视频
  */
  */
 const startVideoPlay = async () => {
 const startVideoPlay = async () => {
@@ -616,6 +655,11 @@ const handleVideoPause = () => {
 const stopVideoPlay = () => {
 const stopVideoPlay = () => {
     if (videoPlayerRef.value && typeof videoPlayerRef.value.pause === 'function') {
     if (videoPlayerRef.value && typeof videoPlayerRef.value.pause === 'function') {
         videoPlayerRef.value.pause()
         videoPlayerRef.value.pause()
+        // 重置视频播放进度到开始位置
+        const player = videoPlayerRef.value.getPlayer()
+        if (player && typeof player.currentTime === 'function') {
+            player.currentTime(0)
+        }
     }
     }
     isVideoPlaying.value = false
     isVideoPlaying.value = false
 }
 }
@@ -929,6 +973,8 @@ onMounted(async () => {
         color: #333;
         color: #333;
         overflow: hidden;
         overflow: hidden;
         text-overflow: ellipsis;
         text-overflow: ellipsis;
+        word-break: break-all;
+        word-wrap: break-word;
         // white-space: nowrap;
         // white-space: nowrap;
     }
     }