refactor(页面/组件): 移除未使用的静态资源并优化交互反馈

- 删除未引用的静态图片文件以减小包体积
- 移除多余的完成提示弹窗，避免交互干扰
- 优化油膜分离组件的进度条动画和触摸结束逻辑
- 改进垃圾清理组件的垃圾桶拖动交互，增加触摸取消处理
- 调整标题图片位置逻辑以适配新组件显示

src/pages/first/components/garbageCleanup.vue

@@ -22,7 +22,6 @@ const ASSETS = Object.freeze({
 const trashCanOffsetX = ref(0);
 const trashCanStartX = ref(0);
 const isDragging = ref(false);
-const isTrashCanEnlarged = ref(false);
 
 // 垃圾清除状态
 const isOneRemoved = ref(false);
@@ -38,7 +37,6 @@ const onTrashCanTouchStart = (e) => {
   if (props.isTransitioning) return;
   isDragging.value = true;
   trashCanStartX.value = e.touches[0].clientX;
-  isTrashCanEnlarged.value = true;
   emit('hide-purification');
 };
 
@@ -67,12 +65,22 @@ const onTrashCanTouchMove = (e) => {
 
 // 触摸结束
 const onTrashCanTouchEnd = () => {
-  isDragging.value = false;
-  isTrashCanEnlarged.value = false;
+  resetTrashCan();
+};
+
+// 触摸取消
+const onTrashCanTouchCancel = () => {
+  resetTrashCan();
+};
 
-  setTimeout(() => {
+// 重置垃圾桶位置
+const resetTrashCan = () => {
+  if (isDragging.value) {
+    isDragging.value = false;
+    
+    // 立即重置位置，不等待
     trashCanOffsetX.value = 0;
-  }, 300);
+  }
 };
 
 // 检查并清除垃圾
@@ -118,11 +126,11 @@ watch([isOneRemoved, isTwoRemoved], ([oneRemoved, twoRemoved]) => {
           <!-- 垃圾桶 -->
           <image
             class="item trashCan"
-            :class="{ enlarged: isTrashCanEnlarged }"
-            :style="{ transform: isTrashCanEnlarged ? `translateX(${trashCanOffsetX}rpx) scale(1.2)` : `translateX(${trashCanOffsetX}rpx)` }"
+            :style="{ transform: `translateX(${trashCanOffsetX}rpx) scale(1.2)` }"
             @touchstart="onTrashCanTouchStart"
             @touchmove="onTrashCanTouchMove"
             @touchend="onTrashCanTouchEnd"
+            @touchcancel="onTrashCanTouchCancel"
             :src="ASSETS.trashCan"
             mode="aspectFill"
           ></image>
@@ -212,10 +220,6 @@ watch([isOneRemoved, isTwoRemoved], ([oneRemoved, twoRemoved]) => {
           height: 110rpx;
           z-index: 10;
           transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-          &.enlarged {
-             /* transform removed */
-          }
         }
 
         .itemArrow {
@@ -226,4 +230,4 @@ watch([isOneRemoved, isTwoRemoved], ([oneRemoved, twoRemoved]) => {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/pages/first/components/oilFilmSeparationZone.vue

@@ -5,7 +5,6 @@ import { ref, watch, defineEmits } from 'vue';
 const emit = defineEmits(['stage-complete']);
 
 const ASSETS = Object.freeze({
-  hand: '/static/first/hand.png',
   purificationValue: '/static/first/purificationValue.png',
 });
 
@@ -66,14 +65,6 @@ const onHintTouchMove = (e) => {
 // 触摸结束
 const onHintTouchEnd = () => {
   isDragging.value = false;
-
-  // 如果未完成，可以添加自动回弹效果
-  if (progressPercentage.value < 100 && !isCompleted.value) {
-    // 可选：自动回弹到当前位置的附近
-    // setTimeout(() => {
-    //     hintPosition.value = progressPercentage.value
-    // }, 100)
-  }
 };
 
 // 检查进度并触发净化值显示
@@ -93,15 +84,6 @@ const checkProgressForPurification = () => {
 
     // 触发完成事件
     emit('stage-complete');
-
-    // 完成时的额外处理
-    setTimeout(() => {
-      uni.showToast({
-        title: '油膜分离完成！',
-        icon: 'success',
-        duration: 2000,
-      });
-    }, 1000);
   }
 };
 
@@ -229,9 +211,8 @@ watch(progressPercentage, (newValue) => {
           left: 4rpx;
           height: 44rpx;
           border-radius: 76rpx;
-          transition: width 0.1s ease;
           z-index: 2;
-          overflow: hidden; // 确保子元素不会超出边界
+          overflow: hidden;
           box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
 
           // 斜杠图案层

src/pages/first/index.vue

@@ -218,11 +218,6 @@ const transitionToAcidBaseNeutralization = () => {
   setTimeout(() => {
     currentStage.value = 'acidBaseNeutralization';
     uni.hideLoading();
-    uni.showToast({
-      title: '已进入酸碱中和区',
-      icon: 'success',
-      duration: 1500,
-    });
   }, 1000);
 };
 </script>
@@ -248,11 +243,11 @@ const transitionToAcidBaseNeutralization = () => {
     <!-- 顶部标题容器 -->
     <view class="top">
       <image
-        class="topTitle"
-        :src="currentTitle"
-        :style="{ top: currentStage === 'acidBaseNeutralization' ? '6%' : '8%' }"
-        mode="aspectFill"
-      ></image>
+      class="topTitle"
+      :src="currentTitle"
+      :style="{ top: showCompleteComponent ? '14%' : (currentStage === 'acidBaseNeutralization' ? '6%' : '8%') }"
+      mode="aspectFill"
+    ></image>
     </view>
 
     <!-- 根据当前阶段显示不同内容 -->
@@ -343,8 +338,8 @@ const transitionToAcidBaseNeutralization = () => {
 
     .topTitle {
       position: absolute;
-      width: 240rpx;
-      height: 128rpx;
+      width: 192rpx;
+      height: 108rpx;
     }
   }
 
@@ -431,4 +426,4 @@ const transitionToAcidBaseNeutralization = () => {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file