@dolphinweex/weex-harmony 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

package/src/components/midea-scene-card-drag-list-view.vue

@@ -8,7 +8,7 @@
       <div class="grid-items-wrapper">
         <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
           <div
-            v-for="(item, index) in processedList"
+            v-for="(item, index) in data.list"
             :key="item.itemView.id"
             class="grid-item"
             :class="{
@@ -117,34 +117,34 @@
     <div v-if="isDragClone" class="drag-clone" :style="dragCloneStyle">
       <div
         class="grid-box"
-        :style="applyNormalAttribute(processedList[draggingIndex].itemView)"
+        :style="applyNormalAttribute(data.list[draggingIndex].itemView)"
       >
         <div class="flexBox">
           <img
-            :src="processedList[draggingIndex].iconImage.url"
+            :src="data.list[draggingIndex].iconImage.url"
             :style="
-              applyNormalAttribute(processedList[draggingIndex].iconImage)
+              applyNormalAttribute(data.list[draggingIndex].iconImage)
             "
           />
           <div @click.stop.prevent>
             <img
               class="isSelected"
               :src="
-                processedList[draggingIndex].itemView.isSelected
-                  ? processedList[draggingIndex].selectIcon.selectedUrl
-                  : processedList[draggingIndex].selectIcon.url
+                data.list[draggingIndex].itemView.isSelected
+                  ? data.list[draggingIndex].selectIcon.selectedUrl
+                  : data.list[draggingIndex].selectIcon.url
               "
               :style="
-                applyNormalAttribute(processedList[draggingIndex].selectIcon)
+                applyNormalAttribute(data.list[draggingIndex].selectIcon)
               "
             />
           </div>
         </div>
         <div
           class="itemText"
-          :style="[applyNormalAttribute(processedList[draggingIndex].text)]"
+          :style="[applyNormalAttribute(data.list[draggingIndex].text)]"
         >
-          {{ processedList[draggingIndex].text.text }}
+          {{ data.list[draggingIndex].text.text }}
         </div>
       </div>
     </div>
@@ -152,6 +152,7 @@
 </template>
 
 <script>
+import { weex_harmony_rebindGestureDelayed } from '@dolphinweex/harmony-webpack-adapter/registerGesture.js'; // 请替换为实际的loader文件路径
 import lottie from 'lottie-web';
 const scla = 2;
 export default {
@@ -173,7 +174,6 @@ export default {
     return {
       targetTouchX: 0,
       targetTouchY: 0,
-      processedList: [],
       selected: null,
       longPressTimer: null,
       longPressDuration: 350,
@@ -198,9 +198,11 @@ export default {
       fixedItemWidth: 0,
       fixedItemHeight: 0,
       animationFrameId: null,
-      lastBestTarget: null,
-      targetChangeTime: null,
-      pendingTarget: null,
+      isProcessingData: false,
+      // 手势事件配置 - 根据实际使用的手势事件来配置
+      gestureEventMap: [],
+      // 元素ID - 用于标识需要绑定手势的元素
+      elementId: 'grid-item'
     };
   },
   computed: {
@@ -208,6 +210,7 @@ export default {
       return {
         '--grid-cols': this.data.spanCount || this.cols,
         '--grid-gap': `${this.data.spaceSize || 8}px`,
+        '--grid-margin': `${(this.data.layoutConfig.marginStart ) + (this.data.layoutConfig.marginEnd )}px`,
         marginTop: this.data.layoutConfig.marginTop * scla,
         marginBottom: this.data.layoutConfig.marginBottom * scla,
         marginLeft: this.data.layoutConfig.marginStart * scla,
@@ -220,7 +223,7 @@ export default {
         return { display: 'none' };
       }
 
-      const item = this.processedList[this.draggingIndex];
+      const item = this.data.list[this.draggingIndex];
       let itemView = {};
       if (item) {
         itemView = this.applyNormalAttribute(item.itemView);
@@ -245,10 +248,7 @@ export default {
     updateListItem(data) {
       console.log('updateListItem收到数据:', JSON.stringify(data));
       const id = data.itemView.id;
-      const index = this.processedList.findIndex(
-        (item) => item.itemView.id == id
-      );
-      const dataIndex = this.data.list.findIndex(
+      const index = this.data.list.findIndex(
         (item) => item.itemView.id == id
       );
 
@@ -257,89 +257,148 @@ export default {
       }
 
       // 检查是否有动画URL的变化
-      const oldBgAnimUrl = this.processedList[index].bgAnimView.animUrl || '';
-      const oldLoadingAnimUrl =
-        this.processedList[index].loadingAnimView.animUrl || '';
-      const oldFrontAnimUrl =
-        this.processedList[index].frontAnimView.animUrl || '';
-
+      const oldBgAnimUrl = this.data.list[index].bgAnimView.animUrl || '';
+      const oldLoadingAnimUrl = this.data.list[index].loadingAnimView.animUrl || '';
+      const oldFrontAnimUrl = this.data.list[index].frontAnimView.animUrl || '';
       const newBgAnimUrl = data.bgAnimView.animUrl || '';
       const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
       const newFrontAnimUrl = data.frontAnimView.animUrl || '';
-      // 同时更新processedList和原始data.list数据
-      this.processedList[index] = data;
-      this.processedList = [...this.processedList];
-
-      // 更新原始数据以确保watch能触发
-      if (dataIndex !== -1) {
-        // 使用Vue的$set确保响应式更新
-        this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
-      }
 
-      // 如果动画URL有变化，重新初始化相关的Lottie动画
-      console.log('检测到动画URL变化，重新初始化动画');
+      // 合并全局数据到新数据
+      const mergedData = this.mergeItemData(data);
+      
+      // 更新数据
+      this.$set(this.data.list, index, mergedData);
 
-      // 等待下一帧DOM更新完成后再操作
       this.$nextTick(() => {
-        // 清理旧的动画实例
         const itemId = String(data.itemView.id);
 
-        // 清除所有相关的动画实例
-        const animKeys = [
-          `bg-${itemId}`,
-          `loading-${itemId}`,
-          `front-${itemId}`,
-        ];
-        animKeys.forEach((key) => {
-          if (this.lottieAnimations[key]) {
-            console.log(`销毁动画实例: ${key}`);
-            const anim = this.lottieAnimations[key];
-            try {
-              anim.removeEventListener('complete');
-            } catch (e) {
-              console.warn(`移除事件监听器失败: ${e.message}`);
-            }
-            anim.destroy();
-            delete this.lottieAnimations[key];
-          }
-        });
+        // 处理背景动画
+        if (oldBgAnimUrl !== newBgAnimUrl && newBgAnimUrl) {
+          this.createLottieAnimation('bg', itemId, mergedData.bgAnimView, mergedData);
+        }
 
-        console.log('清理完成，开始重新初始化动画');
+        // 处理加载动画
+        if (oldLoadingAnimUrl !== newLoadingAnimUrl && newLoadingAnimUrl) {
+          this.createLottieAnimation('loading', itemId, mergedData.loadingAnimView, mergedData);
+        }
 
-        // 延迟一点时间确保DOM完全更新
-        setTimeout(() => {
-          // 重新初始化背景动画
-          if (oldBgAnimUrl !== newBgAnimUrl) {
-            this.loadLottieAnimation(
-              data.bgAnimView,
-              `bgAnim-${itemId}`,
-              `bg-${itemId}`,
-              data
-            );
-          }
+        // 处理前景动画
+        if (oldFrontAnimUrl !== newFrontAnimUrl && newFrontAnimUrl) {
+          this.createLottieAnimation('front', itemId, mergedData.frontAnimView, mergedData);
+        }
+        // 重新绑定手势事件 - 解决DOM更新后手势失效问题
+        this.rebindGestureEvents();
+      });
+    },
+    // 重新绑定手势事件的方法
+    rebindGestureEvents() {
+      try {
+        // 延迟执行确保DOM完全更新
+        weex_harmony_rebindGestureDelayed(
+          this.$el, // 组件根元素
+          this.gestureEventMap, // 手势事件配置数组
+          this.elementId, // 元素类名ID
+          100 // 延迟100ms
+        );
+        console.log('手势事件重新绑定完成');
+      } catch (error) {
+        console.error('重新绑定手势事件失败:', error);
+      }
+    },
+          // 初始化手势事件配置
+          initGestureConfig() {
+      // 根据你实际使用的手势事件来配置
+      this.gestureEventMap = [
+        {
+          name: "@touchstart",
+          handler: this.startLongPress,
+          params: ['event', 'index'],
+          isEvent: true,
+          modifier: []
+        },
+        {
+          name: "@touchmove", 
+          handler: this.checkLongPressMove,
+          params: [],
+          isEvent: true,
+          modifier: []
+        },
+        {
+          name: "@touchend",
+          handler: this.endTouch,
+          params: [],
+          isEvent: true,
+          modifier: []
+        },
+        {
+          name: "@touchcancel",
+          handler: this.endTouch,
+          params: [],
+          isEvent: true,
+          modifier: []
+        }
+      ];
+    },
+    // 简化的动画创建方法
+    createLottieAnimation(type, itemId, animView, itemData) {
+      const animKey = `${type}-${itemId}`;
+      const refName = `${type}Anim-${itemId}`;
+      
+      // 销毁旧动画
+      if (this.lottieAnimations[animKey]) {
+        this.lottieAnimations[animKey].destroy();
+        delete this.lottieAnimations[animKey];
+      }
 
-          if (oldLoadingAnimUrl !== newLoadingAnimUrl) {
-            this.loadLottieAnimation(
-              data.loadingAnimView,
-              `loadingAnim-${itemId}`,
-              `loading-${itemId}`,
-              data
-            );
-          }
+      // 检查DOM元素是否存在
+      const animEl = this.$refs[refName];
+      if (!animEl || !animEl[0] || !animView.animUrl) {
+        return;
+      }
 
-          if (oldFrontAnimUrl !== newFrontAnimUrl) {
-            this.loadLottieAnimation(
-              data.frontAnimView,
-              `frontAnim-${itemId}`,
-              `front-${itemId}`,
-              data
-            );
-          }
-        }, 100); // 增加延迟确保DOM已更新和旧动画已完全销毁
-      });
+      // 检查可见性
+      if (typeof animView.visibility === 'number' && animView.visibility === 0) {
+        return;
+      }
+
+      try {
+        const anim = lottie.loadAnimation({
+          container: animEl[0],
+          renderer: 'svg',
+          loop: Boolean(itemData.animRepeatCount) || false,
+          autoplay: true,
+          path: animView.animUrl,
+          rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+            progressiveLoad: true,
+            hideOnTransparent: true,
+          },
+        });
+
+        this.lottieAnimations[animKey] = anim;
+
+        // 非循环动画完成后清理
+        if (!itemData.animRepeatCount) {
+          anim.addEventListener('complete', () => {
+            if (this.lottieAnimations[animKey] === anim) {
+              anim.destroy();
+              delete this.lottieAnimations[animKey];
+              
+              // 清空对应的animUrl数据
+              const index = this.data.list.findIndex(i => i.itemView.id == itemId);
+              if (index !== -1) {
+                this.$set(this.data.list[index][`${type}AnimView`], 'animUrl', '');
+              }
+            }
+          });
+        }
+      } catch (error) {
+        console.error(`创建${type}动画失败:`, error);
+      }
     },
     getListData(callback) {
-      let data = Array.from(this.processedList);
+      let data = Array.from(this.data.list);
       data = data.map((item) => ({
         ...item,
         itemView: {
@@ -364,7 +423,7 @@ export default {
     },
     selectIconClick(e, item, index) {
       e.preventDefault();
-      e.stopPropagation(); // 阻止事件冒泡到itemViewClick
+      e.stopPropagation();
       if (item.selectIcon.visibility) {
         item.itemView.isSelected = !item.itemView.isSelected;
       }
@@ -380,16 +439,10 @@ export default {
     },
 
     itemViewClick(e, item, index) {
-      // 如果事件已经被处理或被阻止默认行为，则不继续执行
       if (e.defaultPrevented) {
         return;
       }
-      const target = {
-        ...item.itemView,
-        id: String(item.itemView.id),
-        index,
-        ...e,
-      };
+
       console.log('itemViewClick');
       // 确保取消任何长按计时器
       this.cancelLongPress();
@@ -401,10 +454,13 @@ export default {
       }
       e.preventDefault();
       e.stopPropagation();
-
+      const target = {
+        ...item.itemView,
+        id: String(item.itemView.id),
+        index,
+        ...e,
+      };
       this.$emit('onClickItem', target);
-      this.data.isEditing&&item.selectIcon.visibility&&this.$emit('onSelectItems', target);
-
     },
 
     actionClick(e, item, index) {
@@ -425,14 +481,12 @@ export default {
       return false;
     },
 
-    // 新增方法：清理除指定项目外的所有动画实例
     cleanupOtherAnimations(currentItemId) {
       console.log('清理其他项目的动画实例，当前项目ID:', currentItemId);
 
       Object.keys(this.lottieAnimations).forEach((key) => {
         if (!key.includes(`-${currentItemId}`)) {
           if (this.lottieAnimations[key]) {
-            console.log(`销毁其他项目的动画实例: ${key}`);
             const anim = this.lottieAnimations[key];
 
             // 不要立即销毁，而是先停止动画
@@ -477,37 +531,55 @@ export default {
       });
     },
 
-    // 生成处理后的数据列表
     generateDataList() {
       if (!this.data || !this.data.list || !this.data.globalData) {
-        return [];
+        return;
       }
 
-      return this.data.list.map((item) => {
-        const processedItem = {};
-
-        // 获取所有可能的类型
-        const types = [
-          'itemView',
-          'text',
-          'actionButton',
-          'rightIcon',
-          'leftTopIcon',
-          'iconImage',
-          'selectIcon',
-          'loadingAnimView',
-          'bgAnimView',
-          'frontAnimView',
-        ];
+      // 防止死循环
+      if (this.isProcessingData) {
+        return;
+      }
+
+      this.isProcessingData = true;
 
-        // 对每种类型进行处理
-        types.forEach((type) => {
-          // 使用mergeDate合并全局数据和项目数据
-          processedItem[type] = this.mergeDate(item[type] || {}, type);
+      try {
+        // 直接处理 this.data.list，为每个项目合并全局数据
+        this.data.list.forEach((item, index) => {
+          const processedItem = this.mergeItemData(item);
+          this.$set(this.data.list, index, processedItem);
+        });
+      } finally {
+        // 确保标志位被重置
+        this.$nextTick(() => {
+          this.isProcessingData = false;
         });
-        return processedItem;
+      }
+    },
+
+    mergeItemData(item) {
+      const processedItem = {};
+      const types = [
+        'itemView',
+        'text',
+        'actionButton',
+        'rightIcon',
+        'leftTopIcon',
+        'iconImage',
+        'selectIcon',
+        'loadingAnimView',
+        'bgAnimView',
+        'frontAnimView',
+      ];
+      
+      types.forEach((type) => {
+        // 使用mergeDate合并全局数据和项目数据
+        processedItem[type] = this.mergeDate(item[type] || {}, type);
       });
+
+      return processedItem;
     },
+
     getItemStyle(item, type) {
       const result = this.mergeDate(item[type] || {}, type);
       console.log(type, this.applyNormalAttribute(result), 'ggg');
@@ -538,18 +610,14 @@ export default {
         borderRadius: `${(data.cornerRadius || 0) * scla}px`,
         opacity: data.alpha || 1,
       };
-      // 特殊处理visibility和display
       if (typeof data.visibility === 'number') {
         if (data.visibility === 0) {
-          // 如果visibility为0，则完全隐藏元素
           style.display = 'none';
         } else {
-          // 否则保持原有display属性，并设置visibility
           style.display = data.display || '';
           style.visibility = data.visibility === 1 ? 'visible' : 'hidden';
         }
       } else {
-        // 如果未设置visibility，保持原有display
         style.display = data.display || '';
       }
 
@@ -582,18 +650,6 @@ export default {
       this.$emit('onDragEventStart', e);
       
       // 只在编辑模式下阻止事件冒泡和默认行为
-      if (this.data.isEditing) {
-        if (e.oriEvent) {
-          // e.oriEvent.preventDefault();
-          // e.oriEvent.stopPropagation();
-          // e.oriEvent.stopImmediatePropagation();
-        }
-        // e.preventDefault && e.preventDefault();
-        // e.stopPropagation && e.stopPropagation();
-        // e.stopImmediatePropagation && e.stopImmediatePropagation();
-      }
-      
-      // 清除任何现有计时器
       this.cancelLongPress();
       // 记录起始触摸位置和索引
       const touch = e.changedTouches[0];
@@ -603,11 +659,6 @@ export default {
       this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
-      // 添加临时事件监听器，在长按期间阻止滚动
-      document.addEventListener('touchmove', this.onTouchMove, {
-        passive: false // 设置为false以允许阻止默认行为
-      });
-
       // 设置新的长按计时器
       this.longPressTimer = setTimeout(() => {
         // 只有在没有滚动的情况下才激活拖拽模式
@@ -671,13 +722,6 @@ export default {
       this.draggingIndex = index;
       this.isTouchDragging = true;
 
-      // 此时添加阻止默认行为的事件监听，但只影响拖拽状态下的行为
-      document.addEventListener('touchmove', this.onTouchMove, {
-        passive: false, // 只有在拖拽模式下才阻止默认行为
-      });
-      document.addEventListener('touchend', this.onTouchEnd, {
-        passive: true,
-      });
 
       // 使用存储的固定宽高
       this.draggedItemRect = {
@@ -696,11 +740,8 @@ export default {
         // 设置克隆元素的初始位置
         this.dragCloneX = rect.left;
         this.dragCloneY = rect.top;
-
-        // 显示拖拽克隆
         this.isDragClone = true;
 
-        // 立即执行一次定位以确保初始位置准确
         requestAnimationFrame(() => {
           this.dragCloneX = this.touchStartX - this.touchOffsetX;
           this.dragCloneY = this.touchStartY - this.touchOffsetY;
@@ -732,7 +773,7 @@ export default {
         if (e.oriEvent) {
           e.oriEvent.preventDefault();
           e.oriEvent.stopPropagation();
-          e.oriEvent.stopImmediatePropagation(); // 添加这行以确保事件不会继续传播
+          e.oriEvent.stopImmediatePropagation();
         }
         e.preventDefault && e.preventDefault();
         e.stopPropagation && e.stopPropagation();
@@ -750,122 +791,72 @@ export default {
         this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
       }
 
-      console.log('开始移动ddddddd', touch, touch.pageY, touch.pageX);
-      const touchX = touch.pageX;
-      const touchY = touch.pageY;
+      // 简化的交换逻辑
+      this.handleSwapLogic(touch.pageX, touch.pageY);
+    },
+
+    // 简化的交换处理逻辑
+    handleSwapLogic(touchX, touchY) {
+      // 控制交换频率，避免过于频繁的交换
+      const now = Date.now();
+      if (now - this.lastSwapTime < 300) return;
 
       // 获取所有网格元素
       const gridItems = Array.from(document.querySelectorAll('.grid-item'));
+      let targetIndex = null;
 
-      let bestTarget = null;
-      let maxCenterScore = 0; // 用于记录最佳的中心区域得分
-
-      // ✅ 优化：精确坐标检测，偏向中心区域的元素
+      // 寻找触摸点所在的目标元素
       for (const item of gridItems) {
         const itemIndex = parseInt(item.getAttribute('data-index'), 10);
         if (itemIndex === this.draggingIndex) continue;
 
         const rect = item.getBoundingClientRect();
-
-        // 计算触摸点在元素内的深度，用于判断是否足够深入（放宽到整个元素区域）
-        const insetThresholdX = rect.width;
-        const insetThresholdY = rect.height;
-
-        // 判断触摸点是否足够深入元素内部（只要在元素内部即可）
-        const isDeepEnough =
-          touchX >= rect.left &&
-          touchX <= rect.right &&
-          touchY >= rect.top &&
-          touchY <= rect.bottom;
-
-        // 只有当触摸点足够深入时才考虑此元素作为交换目标
-        if (isDeepEnough) {
-          // 计算触摸点到元素中心的距离比例（越接近中心，值越大）
-          const centerX = (rect.left + rect.right) / 2;
-          const centerY = (rect.top + rect.bottom) / 2;
-          const distanceX = Math.abs(touchX - centerX) / (rect.width / 2);
-          const distanceY = Math.abs(touchY - centerY) / (rect.height / 2);
-
-          // 0表示在中心，1表示在边缘
-          const distanceFromCenter = Math.max(
-            0,
-            Math.min(1, (distanceX + distanceY) / 2)
-          );
-          const centerScore = 1 - distanceFromCenter;
-
-          // 只有当分数更高且高于阈值时才更新bestTarget
-          // 提高阈值到0.35，确保更稳定的交换判断
-          if (centerScore > maxCenterScore && centerScore > 0.35) {
-            maxCenterScore = centerScore;
-            bestTarget = itemIndex;
-          }
-        }
-      }
-
-      // 设置悬停高亮，仅当有合格的目标时才高亮
-      this.hoverIndex = bestTarget;
-
-      // 增加交换防抖动处理
-      // 如果bestTarget变化但不等于上次的目标，先记录一下
-      if (this.lastBestTarget !== bestTarget && bestTarget !== null) {
-        if (!this.targetChangeTime) {
-          this.targetChangeTime = Date.now();
-          this.pendingTarget = bestTarget;
-        } else if (Date.now() - this.targetChangeTime > 100) {
-          // 只有当目标持续100ms稳定不变时，才认为是有效目标
-          this.lastBestTarget = this.pendingTarget;
-          this.targetChangeTime = null;
-          this.pendingTarget = null;
+        
+        // 触摸点是否在元素的中心区域内
+        const centerX = (rect.left + rect.right) / 2;
+        const centerY = (rect.top + rect.bottom) / 2;
+        const halfWidth = rect.width * 0.4; // 缩小判断区域到40%，避免边缘误触
+        const halfHeight = rect.height * 0.4;
+
+        // 检查触摸点是否在元素的中心区域内
+        if (
+          touchX >= centerX - halfWidth &&
+          touchX <= centerX + halfWidth &&
+          touchY >= centerY - halfHeight &&
+          touchY <= centerY + halfHeight
+        ) {
+          targetIndex = itemIndex;
+          break; // 找到第一个符合条件的就退出
         }
-      } else if (bestTarget === null) {
-        // 如果没有目标，清除防抖状态
-        this.targetChangeTime = null;
-        this.pendingTarget = null;
       }
 
-      // 使用已稳定的目标进行交换
-      bestTarget = this.lastBestTarget;
-
-      // 控制交换频率，改为250ms，大幅增加稳定性
-      const now = Date.now();
-      if (now - this.lastSwapTime < 250 || bestTarget === null) return;
-
-      // 执行交换逻辑
-      if (bestTarget !== this.draggingIndex) {
-        console.log(`交换元素: ${this.draggingIndex} 和 ${bestTarget}`);
+      // 设置悬停高亮
+      this.hoverIndex = targetIndex;
 
-        // 使用ES6解构直接交换数组元素
+      // 执行交换
+      if (targetIndex !== null && targetIndex !== this.draggingIndex) {
         [
-          this.processedList[this.draggingIndex],
-          this.processedList[bestTarget],
+          this.data.list[this.draggingIndex],
+          this.data.list[targetIndex],
         ] = [
-          this.processedList[bestTarget],
-          this.processedList[this.draggingIndex],
-        ];
-
-        // 同时更新原始数据，保持同步
-        [this.data.list[this.draggingIndex], this.data.list[bestTarget]] = [
-          this.data.list[bestTarget],
+          this.data.list[targetIndex],
           this.data.list[this.draggingIndex],
         ];
+        console.log(`交换: ${this.draggingIndex} ↔ ${targetIndex}`);
 
         // 更新拖拽索引
-        this.draggingIndex = bestTarget;
+        this.draggingIndex = targetIndex;
         this.lastSwapTime = now;
       }
     },
 
-    // 新增：平滑更新拖拽位置的方法
+    // 平滑更新拖拽位置的方法
     updateDragPosition() {
-      // 计算当前位置到目标位置的平滑过渡
       const easing = 0.6; // 增加缓动系数，让拖拽更跟手
-
       this.dragCloneX +=
         (this.targetTouchX - this.touchOffsetX - this.dragCloneX) * easing;
       this.dragCloneY +=
         (this.targetTouchY - this.touchOffsetY - this.dragCloneY) * easing;
-
-      // 如果距离目标很近，直接设为目标位置以避免微小抖动
       if (
         Math.abs(this.dragCloneX - (this.targetTouchX - this.touchOffsetX)) <
         0.5
@@ -876,8 +867,6 @@ export default {
         0.5
       )
         this.dragCloneY = this.targetTouchY - this.touchOffsetY;
-
-      // 继续下一帧动画
       this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
     },
 
@@ -887,17 +876,8 @@ export default {
       this.$emit('onDragEventEnd', e);
       // 如果只是短按（还在计时），就取消长按
       this.cancelLongPress();
-
       // 如果正在拖拽中，确保清理状态
       if (this.isTouchDragging) {
-        // 移除全局事件监听
-        document.removeEventListener('touchmove', this.onTouchMove, {
-          passive: false,
-        });
-        document.removeEventListener('touchend', this.onTouchEnd, {
-          passive: false,
-        });
-
         // 取消动画帧
         if (this.animationFrameId) {
           cancelAnimationFrame(this.animationFrameId);
@@ -908,28 +888,12 @@ export default {
         this.isDragClone = false;
         this.hoverIndex = null;
         this.draggingIndex = null;
-        this.lastBestTarget = null;
-        this.targetChangeTime = null;
-        this.pendingTarget = null;
-        this.touchStartX = 0;
-        this.touchStartY = 0;
-        this.targetTouchX = 0;
-        this.targetTouchY = 0;
       }
     },
 
     // 触摸结束处理 - 全局事件
     onTouchEnd(e) {
       console.log('全局触摸结束');
-
-      // 移除全局事件监听
-      document.removeEventListener('touchmove', this.onTouchMove, {
-        passive: false,
-      });
-      document.removeEventListener('touchend', this.onTouchEnd, {
-        passive: false,
-      });
-
       // 取消动画帧
       if (this.animationFrameId) {
         cancelAnimationFrame(this.animationFrameId);
@@ -985,168 +949,27 @@ export default {
 
         console.log(
           '开始初始化Lottie动画，列表项数量:',
-          this.processedList.length
+          this.data.list.length
         );
 
         // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
         setTimeout(() => {
           // 为每个列表项初始化动画
-          this.processedList.forEach((item) => {
+          this.data.list.forEach((item) => {
             const itemId = String(item.itemView.id);
-            console.log('处理项目ID:', itemId);
-            console.log('loadingAnimView:', item.loadingAnimView);
-            console.log('bgAnimView:', item.bgAnimView);
-            console.log('frontAnimView:', item.frontAnimView);
-
             // 加载背景动画
-            this.loadLottieAnimation(
-              item.bgAnimView,
-              `bgAnim-${itemId}`,
-              `bg-${itemId}`,
-              item
-            );
+            this.createLottieAnimation('bg', itemId, item.bgAnimView, item);
 
             // 加载加载中动画
-            this.loadLottieAnimation(
-              item.loadingAnimView,
-              `loadingAnim-${itemId}`,
-              `loading-${itemId}`,
-              item
-            );
+            this.createLottieAnimation('loading', itemId, item.loadingAnimView, item);
 
             // 加载前景动画
-            this.loadLottieAnimation(
-              item.frontAnimView,
-              `frontAnim-${itemId}`,
-              `front-${itemId}`,
-              item
-            );
+            this.createLottieAnimation('front', itemId, item.frontAnimView, item);
           });
         }, 50); // 小延迟确保DOM已更新和旧动画已销毁
       });
     },
 
-    // 抽取公共的loadLottieAnimation方法
-    loadLottieAnimation(animView, refName, animKey, item) {
-      if (!animView || !animView.animUrl) {
-        console.log(`[${animKey}] 跳过加载：animUrl不存在`);
-        return;
-      }
-
-      console.log(
-        `[${animKey}] 尝试初始化${refName}, animUrl:`,
-        animView.animUrl
-      );
-
-      const animEl = this.$refs[refName];
-      if (!animEl || !animEl[0]) {
-        console.warn(`[${animKey}] 未找到${refName}的DOM引用`);
-        return;
-      }
-
-      try {
-        // 如果已经有实例，先暂停它
-        if (this.lottieAnimations[animKey]) {
-          this.lottieAnimations[animKey].pause();
-        }
-
-        // 确保容器可见且透明度重置
-        animEl[0].style.display = '';
-        animEl[0].style.opacity = '1';
-        animEl[0].style.transition = 'opacity 0.2s';
-
-        if (
-          typeof animView.visibility !== 'number' ||
-          animView.visibility !== 0
-        ) {
-          // 延迟一帧再销毁旧实例
-          requestAnimationFrame(() => {
-            if (this.lottieAnimations[animKey]) {
-              this.lottieAnimations[animKey].destroy();
-              delete this.lottieAnimations[animKey];
-            }
-
-            // 创建新的动画实例
-            console.log(`[${animKey}] 创建新的动画实例`);
-            const anim = lottie.loadAnimation({
-              container: animEl[0],
-              renderer: 'svg',
-              loop: Boolean(item.animRepeatCount) || false,
-              autoplay: true,
-              path: animView.animUrl,
-              rendererSettings: {
-                preserveAspectRatio: 'xMidYMid slice',
-                progressiveLoad: true, // 启用渐进式加载
-                hideOnTransparent: true, // 优化透明度处理
-              },
-            });
-
-            this.lottieAnimations[animKey] = anim;
-            anim.addEventListener('complete', () => {
-              // 检查是否需要销毁动画（非循环动画完成后销毁）
-              if (!item.animRepeatCount) {
-                // 销毁前再次检查实例是否存在
-                if (this.lottieAnimations[animKey] === anim) {
-                  anim.removeEventListener('complete');
-                  anim.destroy();
-                  delete this.lottieAnimations[animKey];
-                  // 将对应数据中的animUrl清空
-                  const itemId = String(item.itemView.id);
-                  const index = this.processedList.findIndex(
-                    (i) => i.itemView.id == itemId
-                  );
-                  if (index !== -1) {
-                    // 根据动画类型设置对应的animUrl为空
-                    if (animKey.startsWith('bg-')) {
-                      this.$set(
-                        this.processedList[index].bgAnimView,
-                        'animUrl',
-                        ''
-                      );
-                      this.$set(
-                        this.data.list[index].bgAnimView,
-                        'animUrl',
-                        ''
-                      );
-                    } else if (animKey.startsWith('loading-')) {
-                      this.$set(
-                        this.processedList[index].loadingAnimView,
-                        'animUrl',
-                        ''
-                      );
-                      this.$set(
-                        this.data.list[index].loadingAnimView,
-                        'animUrl',
-                        ''
-                      );
-                    } else if (animKey.startsWith('front-')) {
-                      this.$set(
-                        this.processedList[index].frontAnimView,
-                        'animUrl',
-                        ''
-                      );
-                      this.$set(
-                        this.data.list[index].frontAnimView,
-                        'animUrl',
-                        ''
-                      );
-                    }
-                    console.log(`[${animKey}] 已清空动画URL数据`);
-                    item.addEventListener('touchstart', (e) => this.startLongPress(e, index), { passive: false });
-                    item.addEventListener('touchmove', this.checkLongPressMove, { passive: false });
-                    item.addEventListener('touchend', this.endTouch, { passive: false });
-                    item.addEventListener('touchcancel', this.endTouch, { passive: false });
-                  }
-                }
-              }
-            });
-          });
-        }
-      } catch (error) {
-        console.error(`[${animKey}] 初始化失败:`, error);
-      }
-    },
-
     // 添加新方法用于获取和存储固定宽高
     updateFixedItemSize() {
       this.$nextTick(() => {
@@ -1168,110 +991,55 @@ export default {
     },
   },
   watch: {
-    // 监听初始数据变化
-    initialItems: {
-      handler(newItems) {
-        if (!this.isTouchDragging) {
-          this.items = [...newItems];
-        }
-      },
-      deep: true,
+    'data.isEditing':{
+        handler(newVal){
+          if(!newVal){
+            this.$set(this.data, 'list', this.data.list);
+          }
+        },
+        deep:true
     },
     // 监听列表数据变化，自动更新处理后的数据
     'data.list': {
       handler(newList, oldList) {
-        this.processedList = this.generateDataList();
+        // 防止死循环
+        if (this.isProcessingData) {
+          return;
+        }
+        
+        console.log('检测到data.list变化');
+        this.generateDataList();
         this.$nextTick(() => {
-          // 再次使用 nextTick 确保 DOM 完全更新
-          this.$nextTick(() => {
-            const gridItems = document.querySelectorAll('.grid-item');
-            gridItems.forEach((item, index) => {
-              const hasEvents = item._vei;
-              if (!hasEvents) {
-                item.addEventListener('touchstart', (e) => this.startLongPress(e, index), { passive: false });
-                item.addEventListener('touchmove', this.checkLongPressMove, { passive: false });
-                item.addEventListener('touchend', this.endTouch, { passive: false });
-                item.addEventListener('touchcancel', this.endTouch, { passive: false });
-              }
-            });
-            this.initLottieAnimations();
-          });
+          this.initLottieAnimations();
+          this.rebindGestureEvents();
         });
       },
       deep: true,
     },
-    // 监听所有动画URL变化，确保能及时更新动画
-    processedList: {
-      handler(newList, oldList) {
-        if (!newList || !newList.length || this.isTouchDragging) return;
-        // 避免在拖拽过程中重新初始化动画
-        if (this.draggingIndex !== null) return;
-        // 检查每个项目的动画URL是否有变化
-      },
-      deep: true,
-    },
   },
+
   mounted() {
+    this.initGestureConfig()
     console.log(this.data, 'djdjdjdjdjdjdj');
     // 初始获取grid-box宽度
     this.updateGridBoxWidth();
     // 获取并存储固定宽高
     this.updateFixedItemSize();
-
-    // 监听窗口大小变化，更新grid-box宽度
-    window.addEventListener('resize', () => {
-      this.updateGridBoxWidth();
-      this.updateFixedItemSize();
-    });
-
     // 初始化Lottie动画
     this.initLottieAnimations();
   },
   beforeDestroy() {
     // 确保清理所有事件监听器
     this.cancelLongPress();
-    document.removeEventListener('touchmove', this.onTouchMove, {
-      passive: false,
-    });
-    document.removeEventListener('touchend', this.onTouchEnd, {
-      passive: false,
-    });
-    window.removeEventListener('resize', () => {
-      this.updateGridBoxWidth();
-      this.updateFixedItemSize();
-    });
-
     // 清理动画帧
     if (this.animationFrameId) {
       cancelAnimationFrame(this.animationFrameId);
       this.animationFrameId = null;
     }
-
-    // 清理所有Lottie动画实例
-    Object.keys(this.lottieAnimations).forEach((key) => {
-      const anim = this.lottieAnimations[key];
-      if (anim && typeof anim.destroy === 'function') {
-        console.log(`组件销毁时清理动画: ${key}`);
-        try {
-          anim.removeEventListener('complete');
-          anim.removeEventListener('DOMLoaded');
-          anim.removeEventListener('data_ready');
-          anim.removeEventListener('loaded_images');
-          anim.removeEventListener('loopComplete');
-        } catch (e) {
-          console.warn(`移除事件监听器失败: ${e.message}`);
-        }
-        anim.destroy();
-      }
-      delete this.lottieAnimations[key];
-    });
-
-    // 确保动画实例对象被清空
-    this.lottieAnimations = {};
   },
   created() {
     // 初始化处理后的数据列表
-    this.processedList = this.generateDataList();
+    this.generateDataList();
   },
 };
 </script>
@@ -1302,7 +1070,7 @@ button {
   display: grid;
   grid-template-columns: repeat(var(--grid-cols), 1fr);
   grid-gap: var(--grid-gap);
-  width: calc(100% - 74px);
+  width: calc(100% - var(--grid-margin));
 }
 
 /* 优化排序过渡效果 */