From bfd60167fa017455359884762f72f794a3716181 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Tue, 11 Mar 2025 19:42:50 +0800
Subject: [PATCH] =?UTF-8?q?fix(YourPuzzleComponent):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E6=9C=AA=E6=98=BE=E7=A4=BA=E5=AE=8C?=
 =?UTF-8?q?=E5=85=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 img 标签添加 object-fit: contain 样式，确保图片按比例显示
- 添加图片预加载功能，提高组件加载性能
- 增加图片加载失败的错误处理机制
- 优化滑块样式，设置背景图片不重复并居中显示
- 调整滑块位置，解决显示不完整的问题
---
 app/components/YourPuzzleComponent.vue | 72 +++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/app/components/YourPuzzleComponent.vue b/app/components/YourPuzzleComponent.vue
index 66f0562..c1783ac 100644
--- a/app/components/YourPuzzleComponent.vue
+++ b/app/components/YourPuzzleComponent.vue
@@ -2,13 +2,13 @@
   <div class="puzzle-container">
     <div class="puzzle-box" :style="{ height: boxHeight + 'px' }">
       <!-- 背景图 -->
-      <img :src="bgImageUrl" class="bg-image" ref="bgImage" @load="onImageLoad">
+      <img :src="bgImageUrl" class="bg-image" ref="bgImage" @load="onImageLoad" @error="handleImageError">
       <!-- 滑块 -->
       <div 
         class="slider-block"
         :style="{
           backgroundImage: `url(${sliderImageUrl})`,
-          top: `${blockY}px`,
+          top: `${blockY-2}px`,
           left: `${moveX}px`,
           visibility: loaded ? 'visible' : 'hidden'
         }"
@@ -81,19 +81,43 @@ const bgImage = ref(null)
 // 方法
 const onImageLoad = () => {
   if (bgImage.value) {
-    const img = bgImage.value
-    const scale = img.width / img.naturalWidth // 计算图片缩放比例
-    boxHeight.value = img.height
-    
-    // 根据图片实际显示大小调整滑块大小
-    const blockSize = Math.round(50 * scale)
-    document.documentElement.style.setProperty('--block-size', blockSize + 'px')
-    
-    maxMoveX.value = img.width - blockSize // 使用实际显示的滑块大小计算最大移动距离
-    loaded.value = true
+    try {
+      const img = bgImage.value
+      // 确保图片已经完全加载
+      if (!img.complete) {
+        return
+      }
+      
+      const scale = img.width / img.naturalWidth // 计算图片缩放比例
+      boxHeight.value = img.height
+      
+      // 根据图片实际显示大小调整滑块大小
+      const blockSize = Math.round(50 * scale)
+      document.documentElement.style.setProperty('--block-size', blockSize + 'px')
+      
+      maxMoveX.value = img.width - blockSize // 使用实际显示的滑块大小计算最大移动距离
+      loaded.value = true
+    } catch (error) {
+      console.error('Image load error:', error)
+      // 设置默认值以确保组件仍然可用
+      const defaultBlockSize = 50
+      document.documentElement.style.setProperty('--block-size', defaultBlockSize + 'px')
+      maxMoveX.value = 320 - defaultBlockSize // 使用默认容器宽度
+      loaded.value = true
+    }
   }
 }
 
+// 添加图片错误处理
+const handleImageError = () => {
+  console.error('Image failed to load')
+  // 设置默认值以确保组件仍然可用
+  const defaultBlockSize = 50
+  document.documentElement.style.setProperty('--block-size', defaultBlockSize + 'px')
+  maxMoveX.value = 320 - defaultBlockSize
+  loaded.value = true
+}
+
 const handleMouseDown = (event) => {
   event.preventDefault()
   startX.value = event.clientX
@@ -160,8 +184,24 @@ const handleTouchEnd = () => {
   handleMouseUp()
 }
 
+// 预加载图片
+const preloadImages = () => {
+  const bgImg = new Image()
+  const sliderImg = new Image()
+  
+  bgImg.onload = () => {
+    if (bgImage.value) {
+      onImageLoad()
+    }
+  }
+  
+  bgImg.src = props.bgImageUrl
+  sliderImg.src = props.sliderImageUrl
+}
+
 // 生命周期钩子
 onMounted(() => {
+  preloadImages()
   window.addEventListener('mousemove', handleMouseMove)
   window.addEventListener('mouseup', handleMouseUp)
   window.addEventListener('touchmove', handleTouchMove)
@@ -210,6 +250,10 @@ onBeforeUnmount(() => {
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
+  object-fit: contain;
+  max-width: 100%;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .slider-block {
@@ -217,6 +261,8 @@ onBeforeUnmount(() => {
   width: var(--block-size);
   height: var(--block-size);
   background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
@@ -224,6 +270,8 @@ onBeforeUnmount(() => {
   will-change: transform;
   transform: translateZ(0);
   backface-visibility: hidden;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .slider-container {