feat: 优化移动端学习与证书体验

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/views/film/practice/index.vue

@@ -227,6 +227,41 @@ const handleWheel = (event: WheelEvent): void => {
   }
 }
 
+/** 触摸起点（移动端滑动翻页） */
+let touchStartY = 0
+let touchStartX = 0
+
+/** 触摸点是否落在可独立滚动的内部面板（如任务要求）中 */
+const isInPanelScroll = (target: EventTarget | null): boolean => {
+  const panel = (target as HTMLElement | null)?.closest('.task-panel')
+  return !!panel && panel.scrollHeight > panel.clientHeight
+}
+
+/** 记录触摸起点 */
+const handleTouchStart = (event: TouchEvent): void => {
+  touchStartY = event.touches[0].clientY
+  touchStartX = event.touches[0].clientX
+}
+
+/** 阻止容器原生滚动，改由整页翻页控制（内部面板除外） */
+const handleTouchMove = (event: TouchEvent): void => {
+  if (!isInPanelScroll(event.target)) event.preventDefault()
+}
+
+/** 根据滑动方向翻页 */
+const handleTouchEnd = (event: TouchEvent): void => {
+  if (isAnimating.value || isInPanelScroll(event.target)) return
+  const deltaY = touchStartY - event.changedTouches[0].clientY
+  const deltaX = touchStartX - event.changedTouches[0].clientX
+  // 仅响应以纵向为主、且超过阈值的滑动
+  if (Math.abs(deltaY) < 40 || Math.abs(deltaX) > Math.abs(deltaY)) return
+  if (deltaY > 0) {
+    scrollToNextPage()
+  } else {
+    scrollToPrevPage()
+  }
+}
+
 const restoreScrollPage = (): void => {
   const savedPage = filmStore.practiceScrollPage
   const targetPage = Math.max(0, Math.min(savedPage, TOTAL_PAGES - 1))
@@ -251,12 +286,20 @@ const saveScrollPage = (): void => {
 onMounted(() => {
   restoreScrollPage()
   showPageGuide()
-  containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
+  const container = containerRef.value
+  container?.addEventListener('wheel', handleWheel, { passive: false })
+  container?.addEventListener('touchstart', handleTouchStart, { passive: true })
+  container?.addEventListener('touchmove', handleTouchMove, { passive: false })
+  container?.addEventListener('touchend', handleTouchEnd, { passive: true })
 })
 
 onUnmounted(() => {
   saveScrollPage()
-  containerRef.value?.removeEventListener('wheel', handleWheel)
+  const container = containerRef.value
+  container?.removeEventListener('wheel', handleWheel)
+  container?.removeEventListener('touchstart', handleTouchStart)
+  container?.removeEventListener('touchmove', handleTouchMove)
+  container?.removeEventListener('touchend', handleTouchEnd)
 })
 </script>