@dolphinweex/weex-harmony 0.1.27 → 0.1.29

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

@@ -4,140 +4,147 @@
     :class="{ editMode: data.isEditing }"
     :style="gridItemStyle"
   >
-    <div class="grid-items-wrapper">
-      <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
-        <div
-          v-for="(item, index) in processedList"
-          :key="item.itemView.id"
-          class="grid-item"
-          :class="{
-            'being-dragged': draggingIndex === index,
-            hidden: isDragClone && draggingIndex === index,
-            'hover-target': hoverIndex === index && draggingIndex !== index,
-            'disabled-item': item.itemView.enable === false,
-          }"
-          :style="{
-            overflow: data.isEditing ? 'visible' : 'hidden',
-          }"
-          @touchstart="(event) => startLongPress(event, index)"
-          @touchmove="checkLongPressMove"
-          @touchend="endTouch"
-          @touchcancel="endTouch"
-          :data-index="index"
-        >
+    <div class="items-container">
+      <div class="grid-items-wrapper">
+        <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
           <div
-            v-if="item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing"
-            class="lottie-container bg-anim"
-            :style="applyNormalAttribute(item.bgAnimView)"
-            :ref="`bgAnim-${item.itemView.id}`"
-          ></div>
-          <div
-            v-if="
-              item.frontAnimView &&
-              item.frontAnimView.animUrl &&
-              !data.isEditing
-            "
-            class="lottie-container front-anim"
-            :style="applyNormalAttribute(item.frontAnimView)"
-            :ref="`frontAnim-${item.itemView.id}`"
-          ></div>
-          <div
-            :style="applyNormalAttribute(item.itemView)"
-            class="grid-box"
-            :class="{ shaking: data.isEditing }"
-            @click.stop="(e) => itemViewClick(e, item, index)"
-
+            v-for="(item, index) in data.list"
+            :key="item.itemView.id"
+            class="grid-item"
+            :class="{
+              'being-dragged': draggingIndex === index,
+              hidden: isDragClone && draggingIndex === index,
+              'hover-target': hoverIndex === index && draggingIndex !== index,
+              'disabled-item': item.itemView.enable === false,
+            }"
+            :style="{
+              overflow: data.isEditing ? 'visible' : 'hidden',
+            }"
+            :data-index="index"
+            @touchstart="(event) => startLongPress(event, index)"
+            @touchmove="checkLongPressMove"
+            @touchend="endTouch"
+            @touchcancel="endTouch"
           >
-            <div class="flexBox">
-              <img
-                :src="item.iconImage.url"
-                :style="applyNormalAttribute(item.iconImage)"
-              />
-              <div>
-                <div @click.stop.prevent v-if="!data.isEditing">
-                  <button
-                    class="actionButton"
-                    @click.stop.prevent="(e) => actionClick(e, item, index)"
-                    :style="applyNormalAttribute(item.actionButton)"
-                  >
-                    {{ item.actionButton.text }}
-                  </button>
-                  <div
-                    v-if="item.loadingAnimView && item.loadingAnimView.animUrl"
-                    class="loading-anim"
-                    :style="applyNormalAttribute(item.loadingAnimView)"
-                    :ref="`loadingAnim-${item.itemView.id}`"
-                  ></div>
-                </div>
-                <div @click.stop.prevent v-if="!data.isEditing">
-                  <img
-                    :src="item.rightIcon.url"
-                    :style="applyNormalAttribute(item.rightIcon)"
-                    @click.stop.prevent="(e) => rightIconClick(e)"
-                  />
-                </div>
-                <div @click.stop.prevent v-if="!data.isEditing">
-                  <img
-                    class="leftTopIcon"
-                    :src="item.leftTopIcon.url"
-                    :style="applyNormalAttribute(item.leftTopIcon)"
-                    @click.stop.prevent
-                  />
-                </div>
-                <div @click.stop.prevent v-if="data.isEditing">
-                  <img
-                    class="isSelected"
-                    @click.stop.prevent="(e) => selectIconClick(e, item, index)"
-                    :src="
-                      item.itemView.isSelected
-                        ? item.selectIcon.selectedUrl
-                        : item.selectIcon.url
-                    "
-                    :style="applyNormalAttribute(item.selectIcon)"
-                  />
+            <div
+              v-if="
+                item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing
+              "
+              class="lottie-container bg-anim"
+              :style="applyNormalAttribute(item.bgAnimView)"
+              :ref="`bgAnim-${item.itemView.id}`"
+            ></div>
+            <div
+              v-if="
+                item.frontAnimView &&
+                item.frontAnimView.animUrl &&
+                !data.isEditing
+              "
+              class="lottie-container front-anim"
+              :style="applyNormalAttribute(item.frontAnimView)"
+              :ref="`frontAnim-${item.itemView.id}`"
+            ></div>
+            <div
+              :style="applyNormalAttribute(item.itemView)"
+              class="grid-box"
+              :class="{ shaking: data.isEditing }"
+              @click.stop="(e) => itemViewClick(e, item, index)"
+            >
+              <div class="flexBox">
+                <img
+                  :src="item.iconImage.url"
+                  :style="applyNormalAttribute(item.iconImage)"
+                />
+                <div>
+                  <div @click.stop.prevent v-if="!data.isEditing">
+                    <button
+                      class="actionButton"
+                      @click.stop.prevent="(e) => actionClick(e, item, index)"
+                      :style="applyNormalAttribute(item.actionButton)"
+                    >
+                      {{ item.actionButton.text }}
+                    </button>
+                    <div
+                      v-if="
+                        item.loadingAnimView && item.loadingAnimView.animUrl
+                      "
+                      class="loading-anim"
+                      :style="applyNormalAttribute(item.loadingAnimView)"
+                      :ref="`loadingAnim-${item.itemView.id}`"
+                    ></div>
+                  </div>
+                  <div @click.stop.prevent v-if="!data.isEditing">
+                    <img
+                      :src="item.rightIcon.url"
+                      :style="applyNormalAttribute(item.rightIcon)"
+                      @click.stop.prevent="(e) => rightIconClick(e)"
+                    />
+                  </div>
+                  <div @click.stop.prevent v-if="!data.isEditing">
+                    <img
+                      class="leftTopIcon"
+                      :src="item.leftTopIcon.url"
+                      :style="applyNormalAttribute(item.leftTopIcon)"
+                      @click.stop.prevent
+                    />
+                  </div>
+                  <div @click.stop.prevent v-if="data.isEditing">
+                    <img
+                      class="isSelected"
+                      @click.stop.prevent="
+                        (e) => selectIconClick(e, item, index)
+                      "
+                      :src="
+                        item.itemView.isSelected
+                          ? item.selectIcon.selectedUrl
+                          : item.selectIcon.url
+                      "
+                      :style="applyNormalAttribute(item.selectIcon)"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="itemText" :style="[applyNormalAttribute(item.text)]">
-              {{ item.text.text }}
+              <div class="itemText" :style="[applyNormalAttribute(item.text)]">
+                {{ item.text.text }}
+              </div>
             </div>
           </div>
-        </div>
-      </transition-group>
+        </transition-group>
+      </div>
     </div>
 
     <!-- 拖拽克隆元素 -->
     <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>
@@ -166,10 +173,9 @@ export default {
     return {
       targetTouchX: 0,
       targetTouchY: 0,
-      processedList: [],
       selected: null,
       longPressTimer: null,
-      longPressDuration: 400, // 略微延长长按时间，减少误触发
+      longPressDuration: 350,
       longPressStartIndex: null,
       draggingIndex: null,
       hoverIndex: null,
@@ -178,7 +184,6 @@ export default {
       isAnimating: false,
       touchStartX: 0,
       touchStartY: 0,
-      touchStartTime: 0, // 记录触摸开始时间，用于计算滑动速度
       draggedItemRect: null,
       isDragClone: false,
       dragCloneX: 0,
@@ -188,17 +193,11 @@ export default {
       gridBoxWidth: 0,
       lottieAnimations: {},
       isScrolling: false,
-      scrollThreshold: 8, // 增大滚动检测阈值
+      scrollThreshold: 5,
       fixedItemWidth: 0,
       fixedItemHeight: 0,
       animationFrameId: null,
-      lastBestTarget: null,
-      targetChangeTime: null,
-      pendingTarget: null,
-      weexListInnerEl: null,
-      weexRefreshEl: null,
-      originListInnerStyle: null,
-      originRefreshStyle: null,
+      isProcessingData: false,
     };
   },
   computed: {
@@ -206,9 +205,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`,
+        '--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,
@@ -221,7 +218,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);
@@ -246,65 +243,107 @@ 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
       );
-      // 更新原始数据以确保watch能触发
-      if(dataIndex !== -1) {
-        // 使用Vue的$set确保响应式更新
-        this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
-      }
+
       if (index === -1) {
         return;
       }
+
+      // 检查是否有动画URL的变化
+      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];
 
+      // 合并全局数据到新数据
+      const mergedData = this.mergeItemData(data);
+      
+      // 更新数据
+      this.$set(this.data.list, index, mergedData);
 
-      // 无论是否有URL变化，都处理动画更新
-      // 这样确保任何visibility或其他属性变化也能被处理
       this.$nextTick(() => {
-        // 清理旧的动画实例
         const itemId = String(data.itemView.id);
-        // 加载背景动画
-        if (newBgAnimUrl) {
-          this.loadLottieAnimation(
-            data.bgAnimView,
-            `bgAnim-${itemId}`,
-            `bg-${itemId}`,
-            data,
-            dataIndex
-          );
+
+        // 处理背景动画
+        if (oldBgAnimUrl !== newBgAnimUrl && newBgAnimUrl) {
+          this.createLottieAnimation('bg', itemId, mergedData.bgAnimView, mergedData);
         }
-        if (newLoadingAnimUrl) {
-          this.loadLottieAnimation(
-            data.loadingAnimView,
-            `loadingAnim-${itemId}`,
-            `loading-${itemId}`,
-            data,
-            dataIndex
-          );
+
+        // 处理加载动画
+        if (oldLoadingAnimUrl !== newLoadingAnimUrl && newLoadingAnimUrl) {
+          this.createLottieAnimation('loading', itemId, mergedData.loadingAnimView, mergedData);
         }
-        if (newFrontAnimUrl) {
-          this.loadLottieAnimation(
-            data.frontAnimView,
-            `frontAnim-${itemId}`,
-            `front-${itemId}`,
-            data,
-            dataIndex
-          );
+
+        // 处理前景动画
+        if (oldFrontAnimUrl !== newFrontAnimUrl && newFrontAnimUrl) {
+          this.createLottieAnimation('front', itemId, mergedData.frontAnimView, mergedData);
         }
       });
     },
+
+    // 简化的动画创建方法
+    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];
+      }
+
+      // 检查DOM元素是否存在
+      const animEl = this.$refs[refName];
+      if (!animEl || !animEl[0] || !animView.animUrl) {
+        return;
+      }
+
+      // 检查可见性
+      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: {
@@ -315,6 +354,7 @@ export default {
       callback({ listData: data });
     },
     rightIconClick(e) {
+      console.log('rightIconClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation();
       this.$emit('onClickRightIcon', e);
@@ -328,8 +368,10 @@ export default {
     },
     selectIconClick(e, item, index) {
       e.preventDefault();
-      e.stopPropagation(); // 阻止事件冒泡到itemViewClick
-      item.itemView.isSelected = !item.itemView.isSelected;
+      e.stopPropagation();
+      if (item.selectIcon.visibility) {
+        item.itemView.isSelected = !item.itemView.isSelected;
+      }
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -342,19 +384,21 @@ export default {
     },
 
     itemViewClick(e, item, index) {
-      // 如果事件已经被处理或被阻止默认行为，则不继续执行
       if (e.defaultPrevented) {
         return;
       }
-      e.preventDefault();
-      e.stopPropagation();
+
+      console.log('itemViewClick');
       // 确保取消任何长按计时器
       this.cancelLongPress();
       if (this.data.isEditing) {
-        item.itemView.isSelected = !item.itemView.isSelected;
-        this.$emit('onSelectItems', target);
+        if (item.selectIcon.visibility) {
+          item.itemView.isSelected = !item.itemView.isSelected;
+        }
         return;
       }
+      e.preventDefault();
+      e.stopPropagation();
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -365,8 +409,13 @@ export default {
     },
 
     actionClick(e, item, index) {
+      console.log('actionClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
+
+      // 在触发事件前，先清理所有其他项目的动画实例
+      this.cleanupOtherAnimations(item.itemView.id);
+
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -377,40 +426,108 @@ export default {
       return false;
     },
 
-    // 生成处理后的数据列表
+    cleanupOtherAnimations(currentItemId) {
+      console.log('清理其他项目的动画实例，当前项目ID:', currentItemId);
+
+      Object.keys(this.lottieAnimations).forEach((key) => {
+        if (!key.includes(`-${currentItemId}`)) {
+          if (this.lottieAnimations[key]) {
+            const anim = this.lottieAnimations[key];
+
+            // 不要立即销毁，而是先停止动画
+            anim.pause();
+
+            // 使用 setTimeout 延迟销毁，给新动画一个启动的时间
+            setTimeout(() => {
+              try {
+                if (this.lottieAnimations[key] === anim) {
+                  anim.removeEventListener('complete');
+                  anim.destroy();
+                  delete this.lottieAnimations[key];
+
+                  // 提取项目ID和动画类型
+                  const parts = key.split('-');
+                  if (parts.length === 2) {
+                    const animType = parts[0];
+                    const itemId = parts[1];
+
+                    // 延迟隐藏对应的动画容器
+                    this.$nextTick(() => {
+                      const refName = `${animType}Anim-${itemId}`;
+                      const animContainer =
+                        this.$refs[refName] && this.$refs[refName][0];
+                      if (animContainer) {
+                        // 使用 opacity 过渡而不是直接设置 display: none
+                        animContainer.style.opacity = '0';
+                        animContainer.style.transition = 'opacity 0.2s';
+                        setTimeout(() => {
+                          animContainer.style.display = 'none';
+                        }, 200);
+                      }
+                    });
+                  }
+                }
+              } catch (e) {
+                console.warn(`清理动画失败: ${e.message}`);
+              }
+            }, 50);
+          }
+        }
+      });
+    },
+
     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');
       return this.applyNormalAttribute(result);
     },
     mergeDate(target, type) {
@@ -438,18 +555,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 || '';
       }
 
@@ -476,44 +589,26 @@ export default {
     },
     // 开始长按
     startLongPress(e, index) {
-      console.log(e, 'cdj-------startLongPress');
       if (!this.data.isEditable) {
         return;
       }
-
-      // 确保事件不被其他处理器抢先处理
-      // e.oriEvent.stopPropagation();
-
-      // 清除任何现有计时器
+      this.$emit('onDragEventStart', e);
+      
+      // 只在编辑模式下阻止事件冒泡和默认行为
       this.cancelLongPress();
-
       // 记录起始触摸位置和索引
       const touch = e.changedTouches[0];
       this.touchStartX = touch.pageX;
       this.touchStartY = touch.pageY;
+      console.log('开始长按ddddddddd', touch, touch.pageY, touch.pageX);
       this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
-      // 记录触摸开始时间，用于判断是否为快速滑动
-      this.touchStartTime = Date.now();
-
-      if (this.isTouchDragging) {
-        this.$emit('drag-end', {
-          items: [...this.itemsList],
-        });
-      }
-
-      // 通知外部触摸开始事件
-      this.$emit('onDragEventStart', e);
-
-      // 设置新的长按计时器 - 延长一点时间避免误触发
+      // 设置新的长按计时器
       this.longPressTimer = setTimeout(() => {
         // 只有在没有滚动的情况下才激活拖拽模式
         if (!this.isScrolling) {
-          console.log('长按时间到，激活拖拽模式');
           this.activateDragMode(index);
-        } else {
-          console.log('检测到滚动，取消拖拽激活');
         }
       }, this.longPressDuration);
     },
@@ -525,109 +620,83 @@ export default {
       }
 
       const touch = e.changedTouches[0];
+      const moveX = Math.abs(touch.pageX - this.touchStartX);
+      const moveY = Math.abs(touch.pageY - this.touchStartY);
+
+      // 如果水平移动大于垂直移动，则阻止事件传播
+      if (moveX > moveY &&!this.isTouchDragging && 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();
+        }
+      }
+
       // 如果已经在拖拽模式，交给onTouchMove处理
       if (this.isTouchDragging) {
         this.onTouchMove(e);
         return;
       }
 
-      const moveX = Math.abs(touch.pageX - this.touchStartX);
-      const moveY = Math.abs(touch.pageY - this.touchStartY);
-
-      // 计算触摸移动速度 (像素/毫秒)
-      const currentTime = Date.now();
-      const timeDiff = currentTime - this.touchStartTime;
-      const speedY = moveY / Math.max(1, timeDiff); // 垂直滑动速度
-
-      // 速度检测：快速滑动可能表示滚动意图
-      const isQuickSwipe = speedY > 0.5; // 如果垂直滑动速度大于0.5px/ms，判定为快速滑动
-
-      // 更敏感地检测滚动意图
-      // 1. 垂直移动显著大于水平移动
-      // 2. 垂直移动超过阈值的两倍
-      // 3. 快速垂直滑动
-      if (
-        (moveY > moveX * 1.2 && moveY > this.scrollThreshold) ||
-        moveY > this.scrollThreshold * 2 ||
-        (isQuickSwipe && moveY > this.scrollThreshold)
-      ) {
-        console.log('检测到滚动意图，取消长按', { moveY, moveX, speedY });
+      // 检测是否在滚动
+      if (moveY > this.scrollThreshold * 3) {
+        // 增加滚动阈值以更容易识别滚动意图
         this.isScrolling = true;
         this.cancelLongPress();
         return;
       }
 
-      // 如果移动超过阈值，取消长按 - 但不阻止默认行为
+      // 如果移动超过阈值，取消长按
       if (moveX > this.scrollThreshold || moveY > this.scrollThreshold) {
         this.cancelLongPress();
-        return;
       }
 
-      // 只有确认不是滚动意图，且在长按倒计时中，才阻止默认行为
-      if (this.longPressTimer && !this.isScrolling) {
-        e.oriEvent.preventDefault();
-      }
+      return false;
     },
 
     // 激活拖拽模式
     activateDragMode(index) {
       console.log('长按触发，进入编辑模式');
+      // 进入编辑模式
 
-      // 先确保编辑模式已开启
-      if (!this.data.isEditing) {
-        // 设置编辑状态并隐藏weex-refresh
-        this.data.isEditing = true;
-        this.$emit('onEditStateChanged', true);
-      } else {
-        // 无论之前是否处于编辑模式，都设置拖拽状态
-        // 设置当前拖拽索引
-        this.draggingIndex = index;
-        this.isTouchDragging = true;
-        // 使用存储的固定宽高
-        this.draggedItemRect = {
-          width: this.fixedItemWidth,
-          height: this.fixedItemHeight,
-        };
-
-        // 获取当前元素位置用于计算偏移
-        const element = document.querySelectorAll('.grid-item')[index];
-        if (element) {
-          const rect = element.getBoundingClientRect();
-          // 计算触摸点相对于元素左上角的偏移
-          this.touchOffsetX = this.touchStartX - rect.left;
-          this.touchOffsetY = this.touchStartY - rect.top;
-
-          // 设置克隆元素的初始位置
-          this.dragCloneX = rect.left;
-          this.dragCloneY = rect.top;
-
-          // 显示拖拽克隆
-          this.isDragClone = true;
-
-          // 禁止页面滚动
-          document.body.style.overflow = 'hidden';
-          document.body.style.touchAction = 'none';
-
-          // 添加全局触摸事件处理，确保捕获所有触摸事件
-          document.addEventListener('touchmove', this.onGlobalTouchMove, {
-            passive: false,
-            capture: true,
-          });
-          document.addEventListener('touchend', this.onTouchEnd, {
-            passive: false,
-            capture: true,
-          });
+      if(this.data.isEditing){
+            // 设置当前拖拽索引
+      this.draggingIndex = index;
+      this.isTouchDragging = true;
 
-          // 立即执行一次定位以确保初始位置准确
-          requestAnimationFrame(() => {
-            this.dragCloneX = this.touchStartX - this.touchOffsetX;
-            this.dragCloneY = this.touchStartY - this.touchOffsetY;
-          });
 
-          console.log('拖拽克隆已创建');
-        }
-      }
+      // 使用存储的固定宽高
+      this.draggedItemRect = {
+        width: this.fixedItemWidth,
+        height: this.fixedItemHeight,
+      };
 
+      // 获取当前元素位置用于计算偏移
+      const element = document.querySelectorAll('.grid-item')[index];
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        // 计算触摸点相对于元素左上角的偏移
+        this.touchOffsetX = this.touchStartX - rect.left;
+        this.touchOffsetY = this.touchStartY - rect.top;
+
+        // 设置克隆元素的初始位置
+        this.dragCloneX = rect.left;
+        this.dragCloneY = rect.top;
+        this.isDragClone = true;
+
+        requestAnimationFrame(() => {
+          this.dragCloneX = this.touchStartX - this.touchOffsetX;
+          this.dragCloneY = this.touchStartY - this.touchOffsetY;
+        });
+
+        console.log('拖拽克隆已创建');
+      }
+      }
+      this.data.isEditing = true;
+      this.$emit('onEditStateChanged', true);
       this.longPressTimer = null;
     },
 
@@ -638,45 +707,24 @@ export default {
         this.longPressTimer = null;
       }
       this.longPressStartIndex = null;
-
-      // 确保不再阻止滚动
-      if (this.isScrolling) {
-        // 如果已经确定为滚动意图，应该立即恢复系统默认滚动行为
-        document.body.style.overflow = '';
-        document.body.style.touchAction = '';
-      }
-    },
-
-    // 全局触摸移动处理 - 捕获阶段拦截所有触摸移动
-    onGlobalTouchMove(e) {
-      if (this.isTouchDragging) {
-        // 在捕获阶段强制阻止默认行为，防止页面滚动
-        e.preventDefault();
-        e.stopPropagation();
-
-        // 继续处理拖拽逻辑
-        this.handleTouchMove(e);
-      }
     },
 
     // 触摸移动处理
     onTouchMove(e) {
       if (!this.isTouchDragging) return;
 
-      // 当处于拖拽状态时，阻止默认行为
-      if (this.isTouchDragging) {
-        e.oriEvent.preventDefault();
-        e.oriEvent.stopPropagation();
+      // 确保在拖拽模式下阻止所有事件传播
+      if (this.isTouchDragging && 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.handleTouchMove(e);
-    },
-
-    // 抽取通用的触摸移动处理逻辑
-    handleTouchMove(e) {
-      console.log(this.isTouchDragging, 'this.isTouchDragging111111');
-      if (!this.isTouchDragging) return;
-
       const touch = e.changedTouches[0];
 
       // 更新目标位置而非直接设置
@@ -688,113 +736,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 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;
 
-        // 计算触摸点在元素内的深度，用于判断是否足够深入（放宽到整个元素区域）
-        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;
-
-          // 放宽元素中心区域的判定，让交换更容易触发
-          // 降低阈值，让交换更敏感
-          if (centerScore > maxCenterScore && centerScore > 0.2) {
-            maxCenterScore = centerScore;
-            bestTarget = itemIndex;
-          }
+        // 检查触摸点是否在元素的中心区域内
+        if (
+          touchX >= centerX - halfWidth &&
+          touchX <= centerX + halfWidth &&
+          touchY >= centerY - halfHeight &&
+          touchY <= centerY + halfHeight
+        ) {
+          targetIndex = itemIndex;
+          break; // 找到第一个符合条件的就退出
         }
       }
 
-      // 设置悬停高亮，仅当有合格的目标时才高亮
-      this.hoverIndex = bestTarget;
-
-      // 简化交换防抖动处理，让交换更直接响应
-      if (bestTarget !== null) {
-        // 直接使用当前的最佳目标
-        this.lastBestTarget = bestTarget;
-      } else {
-        // 如果没有目标，清除lastBestTarget
-        this.lastBestTarget = null;
-      }
-
-      // 使用已稳定的目标进行交换
-      bestTarget = this.lastBestTarget;
+      // 设置悬停高亮
+      this.hoverIndex = targetIndex;
 
-      // 控制交换频率，不要太高，但也不要太慢
-      const now = Date.now();
-      if (now - this.lastSwapTime < 150 || bestTarget === null) return;
-
-      // 执行交换逻辑
-      if (bestTarget !== this.draggingIndex) {
+      // 执行交换
+      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}`);
 
-        console.log(this.data.list, 'cdj------this.data.list');
-        
-        // 更新processedList以触发视图更新和动画效果
-        this.processedList = this.generateDataList();
-        
         // 更新拖拽索引
-        this.draggingIndex = bestTarget;
+        this.draggingIndex = targetIndex;
         this.lastSwapTime = now;
       }
     },
 
-    // 新增：平滑更新拖拽位置的方法
+    // 平滑更新拖拽位置的方法
     updateDragPosition() {
-      // 计算当前位置到目标位置的平滑过渡
-      const easing = 0.8; // 大幅提高缓动系数，让拖拽更紧跟手指
-
+      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
@@ -805,18 +812,15 @@ export default {
         0.5
       )
         this.dragCloneY = this.targetTouchY - this.touchOffsetY;
-
-      // 继续下一帧动画
       this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
     },
 
     // 元素本身的触摸结束
     endTouch(e) {
-      console.log('cdj------触摸结束');
+      console.log('触摸结束');
       this.$emit('onDragEventEnd', e);
       // 如果只是短按（还在计时），就取消长按
       this.cancelLongPress();
-
       // 如果正在拖拽中，确保清理状态
       if (this.isTouchDragging) {
         // 取消动画帧
@@ -825,62 +829,22 @@ export default {
           this.animationFrameId = null;
         }
 
-        // 移除全局事件监听
-        document.removeEventListener('touchmove', this.onGlobalTouchMove, {
-          passive: false,
-          capture: true,
-        });
-        document.removeEventListener('touchend', this.onTouchEnd, {
-          passive: false,
-          capture: true,
-        });
-
-        // 恢复页面滚动
-        document.body.style.overflow = '';
-        document.body.style.touchAction = '';
-
         this.isTouchDragging = false;
         this.isDragClone = false;
         this.hoverIndex = null;
         this.draggingIndex = null;
-
-        // 如果不再拖拽，恢复touch-action（但保持refresh隐藏，因为仍在编辑状态）
-        const elements = this.findParentElements();
-        if (elements.listInner) {
-          elements.listInner.style.touchAction = this.originListInnerStyle;
-        }
       }
     },
 
     // 触摸结束处理 - 全局事件
     onTouchEnd(e) {
-      console.log('cdj------全局触摸结束');
-
-      if (this.isTouchDragging) {
-        // 确保阻止默认行为
-        e.preventDefault();
-        e.stopPropagation();
-      }
+      console.log('全局触摸结束');
       // 取消动画帧
       if (this.animationFrameId) {
         cancelAnimationFrame(this.animationFrameId);
         this.animationFrameId = null;
       }
 
-      // 移除全局事件监听
-      document.removeEventListener('touchmove', this.onGlobalTouchMove, {
-        passive: false,
-        capture: true,
-      });
-      document.removeEventListener('touchend', this.onTouchEnd, {
-        passive: false,
-        capture: true,
-      });
-
-      // 恢复页面滚动
-      document.body.style.overflow = '';
-      document.body.style.touchAction = '';
-
       // 重置拖拽状态
       this.isTouchDragging = false;
       this.isDragClone = false;
@@ -897,6 +861,7 @@ export default {
         if (gridBoxes && gridBoxes.length > 0) {
           const box = gridBoxes[0];
           this.gridBoxWidth = box.offsetWidth;
+          console.log('Grid box宽度:', this.gridBoxWidth);
 
           // 更新text样式，确保不超出
           const textElements = document.querySelectorAll('.itemText');
@@ -909,14 +874,15 @@ export default {
 
     initLottieAnimations() {
       this.$nextTick(() => {
+        // 清理之前的动画实例
         Object.keys(this.lottieAnimations).forEach((key) => {
           const anim = this.lottieAnimations[key];
           if (anim && typeof anim.destroy === 'function') {
-            console.log(`cdj------销毁旧动画实例: ${key}`);
+            console.log(`销毁旧动画实例: ${key}`);
             try {
               anim.removeEventListener('complete');
             } catch (e) {
-              console.warn(`cdj------移除事件监听器失败: ${e.message}`);
+              console.warn(`移除事件监听器失败: ${e.message}`);
             }
             anim.destroy();
           }
@@ -927,156 +893,26 @@ export default {
         this.lottieAnimations = {};
 
         console.log(
-          'cdj------开始初始化Lottie动画，列表项数量:',
-          this.processedList.length
+          '开始初始化Lottie动画，列表项数量:',
+          this.data.list.length
         );
 
-        // 为每个列表项初始化动画
-        this.processedList.forEach((item) => {
-          const itemId = String(item.itemView.id);
-          // 加载背景动画
-          if (item.bgAnimView && item.bgAnimView.animUrl) {
-            this.loadLottieAnimation(
-              item.bgAnimView,
-              `bgAnim-${itemId}`,
-              `bg-${itemId}`,
-              item
-            );
-          }
+        // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
+        setTimeout(() => {
+          // 为每个列表项初始化动画
+          this.data.list.forEach((item) => {
+            const itemId = String(item.itemView.id);
+            // 加载背景动画
+            this.createLottieAnimation('bg', itemId, item.bgAnimView, item);
 
-          // 加载加载中动画
-          if (item.loadingAnimView && item.loadingAnimView.animUrl) {
-            this.loadLottieAnimation(
-              item.loadingAnimView,
-              `loadingAnim-${itemId}`,
-              `loading-${itemId}`,
-              item
-            );
-          }
+            // 加载加载中动画
+            this.createLottieAnimation('loading', itemId, item.loadingAnimView, item);
 
-          // 加载前景动画
-          if (item.frontAnimView && item.frontAnimView.animUrl) {
-            this.loadLottieAnimation(
-              item.frontAnimView,
-              `frontAnim-${itemId}`,
-              `front-${itemId}`,
-              item
-            );
-          }
-        });
-      });
-    },
-
-    // 抽取公共的loadLottieAnimation方法
-    loadLottieAnimation(animView, refName, animKey, item, dataIndex) {
-      if (!animView || !animView.animUrl) {
-        return;
-      }
-
-      const animEl = this.$refs[refName];
-      if (!animEl || !animEl[0]) {
-        return;
-      }
-
-      try {
-        // 如果已经有实例，先销毁它
-        if (this.lottieAnimations[animKey]) {
-          this.lottieAnimations[animKey].destroy();
-          delete this.lottieAnimations[animKey];
-        }
-
-        // 确保animView.visibility不为0才初始化动画
-        if (
-          typeof animView.visibility !== 'number' ||
-          animView.visibility !== 0
-        ) {
-          if (this.lottieAnimations[animKey]) {
-            this.lottieAnimations[animKey].destroy();
-            delete this.lottieAnimations[animKey];
-          }
-
-          // 创建新的动画实例
-          const anim = lottie.loadAnimation({
-            container: animEl[0],
-            renderer: 'svg',
-            loop: Boolean(item.animRepeatCount) || false,
-            autoplay: true,
-            path: animView.animUrl,
-            rendererSettings: {
-              preserveAspectRatio: 'xMidYMid slice',
-            },
-          });
-
-          // 保存动画实例
-          this.lottieAnimations[animKey] = anim;
-
-          // 添加动画事件监听
-          anim.addEventListener('complete', () => {
-            // 检查是否需要销毁动画（非循环动画完成后销毁）
-            if (!item.animRepeatCount) {
-              // 销毁前再次检查实例是否存在
-              if (this.lottieAnimations[animKey] === anim) {
-                // 移除所有事件监听器
-                anim.removeEventListener('complete');
-                // 销毁动画实例
-                anim.destroy();
-                delete this.lottieAnimations[animKey];
-
-                // 查找并清空对应的动画容器，彻底移除所有内容
-                this.$nextTick(() => {
-                  const animContainer =
-                    this.$refs[refName] && this.$refs[refName][0];
-                  if (animContainer) {
-                    // 隐藏容器
-                    animContainer.style.display = 'none';
-                    // 清空容器内容，确保不显示最后一帧
-                    animContainer.innerHTML = '';
-                    // 确保不会阻止触摸事件
-                    animContainer.style.pointerEvents = 'none';
-                  }
-
-                  if (animKey.startsWith('bg-') && !item.animRepeatCount) {
-                    this.data.list[dataIndex].bgAnimView = {
-                      ...item.bgAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                    this.processedList[dataIndex].bgAnimView = {
-                      ...item.bgAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                  } else if (animKey.startsWith('loading-') && !item.animRepeatCount) {
-                    this.data.list[dataIndex].loadingAnimView = {
-                      ...item.loadingAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                    this.processedList[dataIndex].loadingAnimView = {
-                      ...item.loadingAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                  } else if (animKey.startsWith('front-') && !item.animRepeatCount) {
-                    this.data.list[dataIndex].frontAnimView = {
-                      ...item.frontAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                    this.processedList[dataIndex].frontAnimView = {
-                      ...item.frontAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                  }
-                });
-              }
-            }
+            // 加载前景动画
+            this.createLottieAnimation('front', itemId, item.frontAnimView, item);
           });
-        }
-      } catch (error) {
-        console.error('加载Lottie动画失败:', error);
-      }
+        }, 50); // 小延迟确保DOM已更新和旧动画已销毁
+      });
     },
 
     // 添加新方法用于获取和存储固定宽高
@@ -1090,110 +926,62 @@ export default {
         }
       });
     },
-    // 查找父级元素和refresh元素
-    findParentElements() {
-      // 返回存储的元素引用
-      return {
-        listInner: this.weexListInnerEl,
-        refresh: this.weexRefreshEl,
-      };
+
+    // 暂未使用，但保留用于将来扩展
+    leftTopIconClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      // 这里可以添加将来的处理逻辑
+      return false;
     },
   },
   watch: {
+    '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();
-        console.log(newList, this.processedList, 'cdj------数据变化');
+        // 防止死循环
+        if (this.isProcessingData) {
+          return;
+        }
+        
+        console.log('检测到data.list变化');
+        this.generateDataList();
         this.$nextTick(() => {
-          this.updateGridBoxWidth();
-          this.updateFixedItemSize();
+          this.initLottieAnimations();
         });
       },
       deep: true,
     },
   },
   mounted() {
-    console.log(this.data, 'cdj------djdjdjdjdjdjdj');
+    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,
-    });
-    // 确保全局事件监听也被清理
-    document.removeEventListener('touchmove', this.onGlobalTouchMove, {
-      passive: false,
-      capture: true,
-    });
-    document.removeEventListener('touchend', this.onTouchEnd, {
-      passive: false,
-      capture: true,
-    });
-    // 恢复页面滚动状态
-    document.body.style.overflow = '';
-    document.body.style.touchAction = '';
-
-    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') {
-        try {
-          anim.removeEventListener('complete');
-        } catch (e) {
-          console.warn(`移除事件监听器失败: ${e.message}`);
-        }
-        anim.destroy();
-      }
-      delete this.lottieAnimations[key];
-
-      // 尝试清理对应的DOM容器
-      const parts = key.split('-');
-      if (parts.length === 2) {
-        const animType = parts[0]; // bg, loading, front
-        const itemId = parts[1];
-        const refName = `${animType}Anim-${itemId}`;
-        const animContainer = this.$refs[refName] && this.$refs[refName][0];
-        if (animContainer) {
-          animContainer.innerHTML = '';
-          animContainer.style.display = 'none';
-        }
-      }
-    });
-
-    // 确保动画实例对象被清空
-    this.lottieAnimations = {};
   },
   created() {
     // 初始化处理后的数据列表
-    this.processedList = this.generateDataList();
+    this.generateDataList();
   },
 };
 </script>
@@ -1211,6 +999,10 @@ button {
   position: relative;
 }
 
+.items-container {
+  width: 100%;
+}
+
 .grid-items-wrapper {
   width: 100%;
   position: relative;
@@ -1225,10 +1017,8 @@ button {
 
 /* 优化排序过渡效果 */
 .grid-fade-move {
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
+  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
   will-change: transform;
-  position: relative;
-  z-index: 2;
 }
 
 .grid-item {
@@ -1268,9 +1058,7 @@ button {
   top: 0;
   pointer-events: none;
 }
-.lottie-container >>> * {
-  pointer-events: none;
-}
+
 .bg-anim,
 .front-anim {
   z-index: 1;