@dolphinweex/weex-harmony 0.1.18 → 0.1.20

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

@@ -1,109 +1,1607 @@
 <template>
-  <BaseSameLayer :hosSameLayerArgs="hosSameLayerArgs" embedType="native/midea-scene-card-drag-list-view" ref="sceneCardRed"></BaseSameLayer>
+  <div
+    class="outer-container"
+    :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',
+            }"
+            :data-index="index"
+            @touchstart="(event) => startLongPress(event, index)"
+            @touchmove.stop="checkLongPressMove"
+            @touchend="endTouch"
+            @touchcancel="endTouch"
+          >
+            <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 class="itemText" :style="[applyNormalAttribute(item.text)]">
+                {{ item.text.text }}
+              </div>
+            </div>
+          </div>
+        </transition-group>
+      </div>
+
+
+    <!-- 拖拽克隆元素 -->
+    <div v-if="isDragClone" class="drag-clone" :style="dragCloneStyle">
+      <div
+        class="grid-box"
+        :style="applyNormalAttribute(processedList[draggingIndex].itemView)"
+      >
+        <div class="flexBox">
+          <img
+            :src="processedList[draggingIndex].iconImage.url"
+            :style="
+              applyNormalAttribute(processedList[draggingIndex].iconImage)
+            "
+          />
+          <div @click.stop.prevent>
+            <img
+              class="isSelected"
+              :src="
+                processedList[draggingIndex].itemView.isSelected
+                  ? processedList[draggingIndex].selectIcon.selectedUrl
+                  : processedList[draggingIndex].selectIcon.url
+              "
+              :style="
+                applyNormalAttribute(processedList[draggingIndex].selectIcon)
+              "
+            />
+          </div>
+        </div>
+        <div
+          class="itemText"
+          :style="[applyNormalAttribute(processedList[draggingIndex].text)]"
+        >
+          {{ processedList[draggingIndex].text.text }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import BaseSameLayer from "./baseSameLayer.vue";
-const weexModule = weex.requireModule('weexModule');
-
+import lottie from 'lottie-web';
+const scla = 2;
 export default {
-  name: "mideaSceneCardDragListView",
-  data() {
-    return {
-      width: 0,
-      height: 0
-    }
-  },
-  components: {
-    BaseSameLayer,
-  },
+  name: 'EditableGrid',
   props: {
-    hosUniqueProps: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
     data: {
       type: Object,
-      default() {
-        return {
-          embedId: ''
-        };
-      },
+      default: () => ({}),
     },
+    onClickRightIcon: { type: Function, default: () => {} },
+    onClickActionButton: { type: Function, default: () => {} },
+    onEditStateChanged: { type: Function, default: () => {} },
+    onClickItem: { type: Function, default: () => {} },
+    onSelectItems: { type: Function, default: () => {} },
+    onDragEventStart: { type: Function, default: () => {} },
+    onDragEventEnd: { type: Function, default: () => {} },
+  },
+  data() {
+    return {
+      targetTouchX: 0,
+      targetTouchY: 0,
+      processedList: [],
+      selected: null,
+      longPressTimer: null,
+      longPressDuration: 350,
+      longPressStartIndex: null,
+      draggingIndex: null,
+      hoverIndex: null,
+      isTouchDragging: false,
+      lastSwapTime: 0,
+      isAnimating: false,
+      touchStartX: 0,
+      touchStartY: 0,
+      draggedItemRect: null,
+      isDragClone: false,
+      dragCloneX: 0,
+      dragCloneY: 0,
+      touchOffsetX: 0,
+      touchOffsetY: 0,
+      gridBoxWidth: 0,
+      lottieAnimations: {},
+      isScrolling: false,
+      scrollThreshold: 5,
+      fixedItemWidth: 0,
+      fixedItemHeight: 0,
+      animationFrameId: null,
+      lastBestTarget: null,
+      targetChangeTime: null,
+      pendingTarget: null,
+    };
   },
   computed: {
-    hosSameLayerArgs() {
+    gridItemStyle() {
       return {
-        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
-        width: this.width,
-        height: this.height,
-        data: this.data,
-        updateListItem: this.updateListItem,
-        getListData: this.getListData,
-        onClickRightIcon: this.onClickRightIcon,
-        onClickActionButton: this.onClickActionButton,
-        onEditStateChanged: this.onEditStateChanged,
-        onClickItem: this.onClickItem,
-        onSelectItems: this.onSelectItems,
-        onDragEventStart: this.onDragEventStart,
-        onDragEventEnd: this.onDragEventEnd,
+        '--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,
+        marginRight: this.data.layoutConfig.marginEnd * scla,
       };
     },
-  },
-  mounted() {
-    this.width = this.$el.clientWidth;
-    this.height = this.$el.clientHeight;
-    this.embedId = this.$refs.sceneCardRed.embedId;
-  },
+    // 拖拽克隆元素的样式
+    dragCloneStyle() {
+      if (this.draggingIndex === null) {
+        return { display: 'none' };
+      }
 
+      const item = this.processedList[this.draggingIndex];
+      let itemView = {};
+      if (item) {
+        itemView = this.applyNormalAttribute(item.itemView);
+      }
+
+      return {
+        transform: `translate(${this.dragCloneX * scla}px, ${
+          this.dragCloneY * scla
+        }px)`,
+        ...itemView, //里面有width
+        height: `${this.fixedItemHeight * scla}px`,
+        width: `${this.fixedItemWidth * scla}px`,
+        willChange: 'transform',
+        transitionProperty: 'transform',
+        transitionDuration: '0.08s', // 减少过渡时间，让拖拽更跟手
+        position: 'fixed',
+        zIndex: 1000,
+      };
+    },
+  },
   methods: {
-    getListData(callback) {
-      weexModule.callNative(
-        'sceneCardListHandle',
-        {
-          method: 'getListData',
-          name: this.embedId,
-        },
-        callback,
+    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(
+        (item) => item.itemView.id === id
+      );
+
+      if (index === -1) {
+        return;
+      }
+
+      // 保存更新前的可见性状态用于比较
+      const oldVisibility = this.processedList[index].actionButton.visibility;
+      const newVisibility = data.actionButton.visibility;
+
+      if (typeof newVisibility === 'number') {
+        console.log(`按钮可见性从 ${oldVisibility} 变更为 ${newVisibility}`);
+      }
+
+      // 检查是否有动画URL的变化
+      const oldBgAnimUrl = this.processedList[index].bgAnimView.animUrl || '';
+      const oldLoadingAnimUrl =
+        this.processedList[index].loadingAnimView.animUrl || '';
+      const oldFrontAnimUrl =
+        this.processedList[index].frontAnimView.animUrl || '';
+
+      const newBgAnimUrl = data.bgAnimView.animUrl || '';
+      const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
+      const newFrontAnimUrl = data.frontAnimView.animUrl || '';
+
+      const hasAnimUrlChanged =
+        oldBgAnimUrl !== newBgAnimUrl ||
+        oldLoadingAnimUrl !== newLoadingAnimUrl ||
+        oldFrontAnimUrl !== newFrontAnimUrl;
+
+      // 同时更新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动画
+      if (hasAnimUrlChanged) {
+        console.log('检测到动画URL变化，重新初始化动画');
+
+        // 等待下一帧DOM更新完成后再操作
+        this.$nextTick(() => {
+          // 清理旧的动画实例
+          const itemId = 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');
+                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];
+            }
+          });
+
+          console.log('清理完成，开始重新初始化动画');
+
+          // 延迟一点时间确保DOM完全更新
+          setTimeout(() => {
+            // 重新初始化背景动画
+            if (newBgAnimUrl) {
+              this.loadLottieAnimation(
+                data.bgAnimView,
+                `bgAnim-${itemId}`,
+                `bg-${itemId}`,
+                data
+              );
+            }
+
+            // 重新初始化加载动画
+            if (newLoadingAnimUrl) {
+              this.loadLottieAnimation(
+                data.loadingAnimView,
+                `loadingAnim-${itemId}`,
+                `loading-${itemId}`,
+                data
+              );
+            }
+
+            // 重新初始化前景动画
+            if (newFrontAnimUrl) {
+              this.loadLottieAnimation(
+                data.frontAnimView,
+                `frontAnim-${itemId}`,
+                `front-${itemId}`,
+                data
+              );
+            }
+          }, 100); // 增加延迟确保DOM已更新和旧动画已完全销毁
+        });
+      }
+    },
+    getListData(callback) {
+      const data = Array.from(this.processedList);
+      callback({ listData: data });
+    },
+    rightIconClick(e) {
+      console.log('rightIconClick执行，阻止事件冒泡');
+      e.preventDefault();
+      e.stopPropagation();
+      this.$emit('onClickRightIcon', e);
+      return false;
+    },
+    onSelectItems() {
+      const selectedIds = this.data.list
+        .filter((item) => item.itemView.isSelected)
+        .map((item) => item.itemView.id);
+      return selectedIds;
+    },
+    selectIconClick(e, item, index) {
+      e.preventDefault();
+      e.stopPropagation(); // 阻止事件冒泡到itemViewClick
+      item.itemView.isSelected = !item.itemView.isSelected;
+      const target = {
+        ...item.itemView,
+        id: String(item.itemView.id),
+        index,
+        ...e,
+      };
+      this.$emit('onClickSelectIcon', target);
+      return false;
+    },
+
+    itemViewClick(e, item, index) {
+      // 如果事件已经被处理或被阻止默认行为，则不继续执行
+      if (e.defaultPrevented) {
+        return;
+      }
+
+      console.log('itemViewClick');
+      // 确保取消任何长按计时器
+      this.cancelLongPress();
+      if (this.data.isEditing) {
+        item.itemView.isSelected = !item.itemView.isSelected;
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const target = {
+        ...item.itemView,
+        id: String(item.itemView.id),
+        index,
+        ...e,
+      };
+      this.$emit('onClickItem', target);
+    },
+
+    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),
+        index,
+        ...e,
+      };
+      this.$emit('onClickActionButton', target);
+      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];
+
+            // 移除所有事件监听器
+            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];
+
+            // 提取项目ID和动画类型
+            const parts = key.split('-');
+            if (parts.length === 2) {
+              const animType = parts[0]; // bg, loading, front
+              const itemId = parts[1];
+
+              // 隐藏对应的动画容器
+              this.$nextTick(() => {
+                const refName = `${animType}Anim-${itemId}`;
+                const animContainer =
+                  this.$refs[refName] && this.$refs[refName][0];
+                if (animContainer) {
+                  console.log(`隐藏动画容器: ${refName}`);
+                  animContainer.style.display = 'none';
+                }
+              });
+            }
+          }
+        }
+      });
+    },
+
+    // 生成处理后的数据列表
+    generateDataList() {
+      if (!this.data || !this.data.list || !this.data.globalData) {
+        return [];
+      }
+
+      return this.data.list.map((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) {
+      const globalData = this.data.globalData[type] || {};
+      return Object.assign({}, globalData, target);
+    },
+    applyNormalAttribute(data = {}, type) {
+      let style = {
+        color: data.textColor || '#000000',
+        fontWeight: data.fontWeight || 'normal',
+        fontFamily: data.fontFamilyPath || 'inherit',
+        fontSize: `${(data.textSize || 16) * scla}px`, // 默认16px
+        // 布局相关样式
+        width:
+          typeof data.width === 'number' && data.width > 0
+            ? `${data.width * scla}px`
+            : data.width === -1
+            ? '%'
+            : data.width || '',
+        height:
+          typeof data.height === 'number'
+            ? `${data.height * scla}px`
+            : data.height || '',
+        backgroundColor: data.backgroundColor || 'transparent',
+        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 || '';
+      }
+
+      style.borderColor = this.data.isEditing
+        ? data.selectedBorderColor || ''
+        : data.normalBorderColor || '';
+      style.borderWidth = this.data.isEditing
+        ? `${(data.selectedBorderWidth || 0) * scla}px`
+        : `${(data.normalBorderWidth || 0) * scla}px`;
+      if (data.padding) {
+        style.paddingTop = `${(data.padding[1] || 0) * scla}px`;
+        style.paddingLeft = `${(data.padding[0] || 0) * scla}px`;
+        style.paddingBottom = `${(data.padding[3] || 0) * scla}px`;
+        style.paddingRight = `${(data.padding[2] || 0) * scla}px`;
+      }
+      if (data.margin) {
+        style.marginTop = `${(data.margin[1] || 0) * scla}px`;
+        style.marginLeft = `${(data.margin[0] || 0) * scla}px`;
+        style.marginBottom = `${(data.margin[3] || 0) * scla}px`;
+        style.marginRight = `${(data.margin[2] || 0) * scla}px`;
+      }
+
+      return style;
     },
-    updateListItem(item) {
-      weexModule.callNative(
-        'sceneCardListHandle',
-        {
-          method: 'updateListItem',
-          name: this.embedId,
-          item
-        },
+    // 开始长按
+    startLongPress(e, index) {
+      if (!this.data.isEditable) {
+        return;
+      }
+      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; // 重置滚动状态
+
+      // 注意：不在这里阻止默认行为，允许滚动
+      document.removeEventListener('touchmove', this.onTouchMove, {
+        passive: true, // 设置为passive:true允许浏览器进行滚动优化
+      });
+      document.removeEventListener('touchend', this.onTouchEnd, {
+        passive: true,
+      });
+
+      if (this.isTouchDragging) {
+        this.$emit('drag-end', {
+          items: [...this.itemsList],
+        });
+      }
+      console.log(
+        `准备长按: index=${index}, 触摸坐标=(${touch.pageX}, ${touch.pageY})`
       );
+
+      // 设置新的长按计时器
+      this.longPressTimer = setTimeout(() => {
+        // 只有在没有滚动的情况下才激活拖拽模式
+        if (!this.isScrolling) {
+          this.activateDragMode(index);
+        }
+      }, this.longPressDuration);
+      // 不阻止默认行为 - 允许滚动
+    },
+
+    // 检查长按过程中的移动
+    checkLongPressMove(e) {
+      if (!this.data.isEditable) {
+        return;
+      }
+      const touch = e.changedTouches[0];
+      // 如果已经在拖拽模式，交给onTouchMove处理
+      if (this.isTouchDragging) {
+        this.onTouchMove(e);
+        return;
+      }
+
+      const moveX = Math.abs(touch.pageX - this.touchStartX);
+      const moveY = Math.abs(touch.pageY - this.touchStartY);
+
+      // 检测是否在滚动
+      if (moveY > this.scrollThreshold * 3) {
+        // 增加滚动阈值以更容易识别滚动意图
+        this.isScrolling = true;
+        this.cancelLongPress();
+        return;
+      }
+
+      // 如果移动超过阈值，取消长按
+      if (moveX > this.scrollThreshold || moveY > this.scrollThreshold) {
+        this.cancelLongPress();
+      }
+
+      // 不阻止默认行为，允许滚动
+    },
+
+    // 激活拖拽模式
+    activateDragMode(index) {
+      console.log('长按触发，进入编辑模式');
+      // 进入编辑模式
+      this.data.isEditing = true;
+      this.$emit('onEditStateChanged', true);
+      // 设置当前拖拽索引
+      this.draggingIndex = index;
+      this.isTouchDragging = true;
+
+      // 此时添加阻止默认行为的事件监听，但只影响拖拽状态下的行为
+      document.addEventListener('touchmove', this.onTouchMove, {
+        passive: false, // 只有在拖拽模式下才阻止默认行为
+      });
+      document.addEventListener('touchend', this.onTouchEnd, {
+        passive: 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;
+
+        // 立即执行一次定位以确保初始位置准确
+        requestAnimationFrame(() => {
+          this.dragCloneX = this.touchStartX - this.touchOffsetX;
+          this.dragCloneY = this.touchStartY - this.touchOffsetY;
+        });
+
+        console.log('拖拽克隆已创建');
+      }
+
+      this.longPressTimer = null;
+    },
+
+    // 取消长按计时器
+    cancelLongPress() {
+      if (this.longPressTimer) {
+        clearTimeout(this.longPressTimer);
+        this.longPressTimer = null;
+      }
+      this.longPressStartIndex = null;
     },
-    onClickRightIcon(event) { //点击右侧icon
-      this.$emit('onClickRightIcon', event)
+
+    // 触摸移动处理
+    onTouchMove(e) {
+      if (!this.isTouchDragging) return;
+
+      // 只有在进入拖拽模式后才阻止默认滚动行为
+      if (this.isTouchDragging) {
+        e.preventDefault(); // 阻止页面滚动
+        e.stopPropagation();
+      }
+
+      const touch = e.changedTouches[0];
+
+      // 更新目标位置而非直接设置
+      this.targetTouchX = touch.pageX;
+      this.targetTouchY = touch.pageY;
+
+      // 启动平滑动画（如果尚未启动）
+      if (!this.animationFrameId) {
+        this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
+      }
+
+      console.log('开始移动ddddddd', touch, touch.pageY, touch.pageX);
+      const touchX = touch.pageX;
+      const touchY = touch.pageY;
+
+      // 获取所有网格元素
+      const gridItems = Array.from(document.querySelectorAll('.grid-item'));
+
+      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;
+        }
+      } 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}`);
+
+        // 使用ES6解构直接交换数组元素
+        [
+          this.processedList[this.draggingIndex],
+          this.processedList[bestTarget],
+        ] = [
+          this.processedList[bestTarget],
+          this.processedList[this.draggingIndex],
+        ];
+
+        // 同时更新原始数据，保持同步
+        [this.data.list[this.draggingIndex], this.data.list[bestTarget]] = [
+          this.data.list[bestTarget],
+          this.data.list[this.draggingIndex],
+        ];
+
+        // 更新拖拽索引
+        this.draggingIndex = bestTarget;
+        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
+      )
+        this.dragCloneX = this.targetTouchX - this.touchOffsetX;
+      if (
+        Math.abs(this.dragCloneY - (this.targetTouchY - this.touchOffsetY)) <
+        0.5
+      )
+        this.dragCloneY = this.targetTouchY - this.touchOffsetY;
+
+      // 继续下一帧动画
+      this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
+    },
+
+    // 元素本身的触摸结束
+    endTouch(e) {
+      console.log('触摸结束');
+      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);
+          this.animationFrameId = null;
+        }
+
+        this.isTouchDragging = false;
+        this.isDragClone = false;
+        this.hoverIndex = null;
+        this.draggingIndex = null;
+      }
+    },
+
+    // 触摸结束处理 - 全局事件
+    onTouchEnd(e) {
+      console.log('全局触摸结束');
+
+      // 移除全局事件监听
+      document.removeEventListener('touchmove', this.onTouchMove, {
+        passive: false,
+      });
+      document.removeEventListener('touchend', this.onTouchEnd, {
+        passive: false,
+      });
+
+      // 取消动画帧
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+      }
+
+      // 重置拖拽状态
+      this.isTouchDragging = false;
+      this.isDragClone = false;
+      this.hoverIndex = null;
+
+      // 立即清除拖拽索引，避免状态卡住
+      this.draggingIndex = null;
+      this.isAnimating = false;
+    },
+    // 获取grid-box宽度的方法
+    updateGridBoxWidth() {
+      this.$nextTick(() => {
+        const gridBoxes = document.querySelectorAll('.grid-item');
+        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');
+          textElements.forEach((el) => {
+            el.style.maxWidth = `${this.gridBoxWidth}px`;
+          });
+        }
+      });
+    },
+
+    initLottieAnimations() {
+      this.$nextTick(() => {
+        // 清理之前的动画实例
+        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 = {};
+
+        console.log(
+          '开始初始化Lottie动画，列表项数量:',
+          this.processedList.length
+        );
+
+        // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
+        setTimeout(() => {
+          // 为每个列表项初始化动画
+          this.processedList.forEach((item) => {
+            const itemId = 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.loadLottieAnimation(
+              item.loadingAnimView,
+              `loadingAnim-${itemId}`,
+              `loading-${itemId}`,
+              item
+            );
+
+            // 加载前景动画
+            this.loadLottieAnimation(
+              item.frontAnimView,
+              `frontAnim-${itemId}`,
+              `front-${itemId}`,
+              item
+            );
+          });
+        }, 50); // 小延迟确保DOM已更新和旧动画已销毁
+      });
     },
 
-    onClickActionButton(event) { //点击执行按钮
-      this.$emit('onClickActionButton', event)
+    // 抽取公共的loadLottieAnimation方法
+    loadLottieAnimation(animView, refName, animKey, item) {
+      if (!animView || !animView.animUrl) {
+        console.log(`[${animKey}] 跳过加载：animUrl不存在`);
+        return;
+      }
+
+      console.log(
+        `[${animKey}] 尝试初始化${refName}, animUrl:`,
+        animView.animUrl,
+        '可见性:',
+        animView.visibility
+      );
+
+      const animEl = this.$refs[refName];
+      if (!animEl || !animEl[0]) {
+        console.warn(`[${animKey}] 未找到${refName}的DOM引用，请检查DOM结构`);
+        return;
+      }
+
+      try {
+        // 如果已经有实例，先销毁它
+        if (this.lottieAnimations[animKey]) {
+          console.log(`[${animKey}] 销毁现有的动画实例`);
+          this.lottieAnimations[animKey].destroy();
+          delete this.lottieAnimations[animKey];
+        }
+
+        // 确保animView.visibility不为0才初始化动画
+        if (
+          typeof animView.visibility !== 'number' ||
+          animView.visibility !== 0
+        ) {
+          // 使用fetch方式获取动画数据
+          console.log(`[${animKey}] 开始获取动画数据:`, animView.animUrl);
+          fetch(animView.animUrl)
+            .then((response) => {
+              if (!response.ok) {
+                console.error(
+                  `[${animKey}] 获取动画数据失败，HTTP状态码:`,
+                  response.status
+                );
+                throw new Error('Network response was not ok');
+              }
+              console.log(`[${animKey}] 网络请求成功，正在解析JSON`);
+              return response.json();
+            })
+            .then((animationData) => {
+              console.log(
+                `[${animKey}] 动画数据已加载，数据大小:`,
+                JSON.stringify(animationData).length
+              );
+              // 再次检查是否已有实例（可能在fetch期间创建了）
+              if (this.lottieAnimations[animKey]) {
+                console.log(`[${animKey}] 销毁fetch期间创建的动画实例`);
+                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,
+                animationData: animationData,
+                rendererSettings: {
+                  preserveAspectRatio: 'xMidYMid slice',
+                },
+              });
+
+              // 保存动画实例
+              this.lottieAnimations[animKey] = anim;
+
+              // 添加动画事件监听
+              anim.addEventListener('DOMLoaded', () => {
+                console.log(`[${animKey}] 动画DOM已加载完成`);
+              });
+
+              anim.addEventListener('complete', () => {
+                console.log(`[${animKey}] 动画播放完成一次`);
+                // 检查是否需要销毁动画（非循环动画完成后销毁）
+                if (!item.animRepeatCount) {
+                  console.log(`[${animKey}] 非循环动画播放完成，执行销毁`);
+                  // 销毁前再次检查实例是否存在
+                  if (this.lottieAnimations[animKey] === anim) {
+                    anim.removeEventListener('complete');
+                    anim.removeEventListener('DOMLoaded');
+                    anim.removeEventListener('data_ready');
+                    anim.removeEventListener('loaded_images');
+                    anim.removeEventListener('loopComplete');
+                    anim.destroy();
+                    delete this.lottieAnimations[animKey];
+                    console.log(`[${animKey}] 动画实例已销毁`);
+
+                    // 查找并隐藏对应的动画容器
+                    this.$nextTick(() => {
+                      const animContainer =
+                        this.$refs[refName] && this.$refs[refName][0];
+                      if (animContainer) {
+                        animContainer.style.display = 'none';
+                      }
+
+                      // 将对应数据中的animUrl清空
+                      const itemId = 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',
+                            ''
+                          );
+                          // 同步更新原始数据
+                          const dataIndex = this.data.list.findIndex(
+                            (i) => i.itemView.id === itemId
+                          );
+                          if (dataIndex !== -1) {
+                            this.$set(
+                              this.data.list[dataIndex].bgAnimView,
+                              'animUrl',
+                              ''
+                            );
+                          }
+                        } else if (animKey.startsWith('loading-')) {
+                          this.$set(
+                            this.processedList[index].loadingAnimView,
+                            'animUrl',
+                            ''
+                          );
+                          // 同步更新原始数据
+                          const dataIndex = this.data.list.findIndex(
+                            (i) => i.itemView.id === itemId
+                          );
+                          if (dataIndex !== -1) {
+                            this.$set(
+                              this.data.list[dataIndex].loadingAnimView,
+                              'animUrl',
+                              ''
+                            );
+                          }
+                        } else if (animKey.startsWith('front-')) {
+                          this.$set(
+                            this.processedList[index].frontAnimView,
+                            'animUrl',
+                            ''
+                          );
+                          // 同步更新原始数据
+                          const dataIndex = this.data.list.findIndex(
+                            (i) => i.itemView.id === itemId
+                          );
+                          if (dataIndex !== -1) {
+                            this.$set(
+                              this.data.list[dataIndex].frontAnimView,
+                              'animUrl',
+                              ''
+                            );
+                          }
+                        }
+                        console.log(`[${animKey}] 已清空动画URL数据`);
+                      }
+                    });
+                  }
+                }
+              });
+
+              console.log(`[${animKey}] ${refName}初始化成功`);
+            })
+            .catch((error) => {
+              console.error(`[${animKey}] 加载${refName}动画数据失败:`, error);
+            });
+        } else {
+          console.log(`[${animKey}] ${refName}可见性为0，跳过初始化`);
+        }
+      } catch (error) {
+        console.error(`[${animKey}] ${refName}初始化失败，详细错误:`, error);
+      }
     },
 
-    onEditStateChanged(event) { //切换编辑状态
-      this.$emit('onEditStateChanged', event)
+    // 添加新方法用于获取和存储固定宽高
+    updateFixedItemSize() {
+      this.$nextTick(() => {
+        const gridItem = document.querySelector('.grid-item');
+        if (gridItem) {
+          const rect = gridItem.getBoundingClientRect();
+          this.fixedItemWidth = rect.width;
+          this.fixedItemHeight = rect.height;
+          console.log(
+            '固定宽高已更新:',
+            this.fixedItemWidth,
+            this.fixedItemHeight
+          );
+        }
+      });
     },
 
-    onClickItem(event) { //点击item
-      this.$emit('onClickItem', event)
+    // 暂未使用，但保留用于将来扩展
+    leftTopIconClick(e) {
+      console.log('leftTopIconClick执行，阻止事件冒泡');
+      e.preventDefault();
+      e.stopPropagation();
+      // 这里可以添加将来的处理逻辑
+      return false;
+    },
+  },
+  watch: {
+    // 监听初始数据变化
+    initialItems: {
+      handler(newItems) {
+        if (!this.isTouchDragging) {
+          this.items = [...newItems];
+        }
+      },
+      deep: true,
     },
+    // 监听列表数据变化，自动更新处理后的数据
+    'data.list': {
+      handler(newList, oldList) {
+        console.log('检测到data.list变化');
+        this.processedList = this.generateDataList();
+        this.$nextTick(() => {
+          // 日志输出当前列表中所有按钮的可见性
+          if (this.processedList && this.processedList.length > 0) {
+            console.log('更新后的按钮可见性状态:');
+            this.processedList.forEach((item, idx) => {
+              if (item.actionButton) {
+                console.log(
+                  `项目${idx} (ID:${item.itemView.id}) 按钮可见性: ${item.actionButton.visibility}`
+                );
+              }
+            });
+          }
 
-    onSelectItems(event) { //是编辑状态下，选中的 item的 id 数组 返回的是ids":["21675327"]
-      this.$emit('onSelectItems', event)
+          this.updateGridBoxWidth();
+          this.updateFixedItemSize();
+          this.initLottieAnimations();
+        });
+      },
+      deep: true,
     },
-    onDragEventStart(event) {
-      this.$emit('onDragEventStart', event)
+    // 监听所有动画URL变化，确保能及时更新动画
+    processedList: {
+      handler(newList, oldList) {
+        if (!newList || !newList.length || this.isTouchDragging) return;
+
+        // 避免在拖拽过程中重新初始化动画
+        if (this.draggingIndex !== null) return;
+
+        // 检查每个项目的动画URL是否有变化
+        newList.forEach((item, index) => {
+          // 如果是新增的项目，直接更新
+          if (!oldList || !oldList[index]) {
+            this.$nextTick(() => {
+              const itemId = item.itemView.id;
+              this.loadLottieAnimation(
+                item.bgAnimView,
+                `bgAnim-${itemId}`,
+                `bg-${itemId}`,
+                item
+              );
+              this.loadLottieAnimation(
+                item.loadingAnimView,
+                `loadingAnim-${itemId}`,
+                `loading-${itemId}`,
+                item
+              );
+              this.loadLottieAnimation(
+                item.frontAnimView,
+                `frontAnim-${itemId}`,
+                `front-${itemId}`,
+                item
+              );
+            });
+            return;
+          }
+
+          // 检查bgAnimView.animUrl是否变化
+          if (
+            item.bgAnimView &&
+            oldList[index].bgAnimView &&
+            item.bgAnimView.animUrl !== oldList[index].bgAnimView.animUrl
+          ) {
+            console.log(
+              '检测到bgAnimView.animUrl变化:',
+              item.bgAnimView.animUrl
+            );
+            this.$nextTick(() => {
+              const itemId = item.itemView.id;
+              if (this.lottieAnimations[`bg-${itemId}`]) {
+                this.lottieAnimations[`bg-${itemId}`].destroy();
+                delete this.lottieAnimations[`bg-${itemId}`];
+              }
+              this.loadLottieAnimation(
+                item.bgAnimView,
+                `bgAnim-${itemId}`,
+                `bg-${itemId}`,
+                item
+              );
+            });
+          }
+
+          // 检查loadingAnimView.animUrl是否变化
+          if (
+            item.loadingAnimView &&
+            oldList[index].loadingAnimView &&
+            item.loadingAnimView.animUrl !==
+              oldList[index].loadingAnimView.animUrl
+          ) {
+            console.log(
+              '检测到loadingAnimView.animUrl变化:',
+              item.loadingAnimView.animUrl
+            );
+            this.$nextTick(() => {
+              const itemId = item.itemView.id;
+              if (this.lottieAnimations[`loading-${itemId}`]) {
+                this.lottieAnimations[`loading-${itemId}`].destroy();
+                delete this.lottieAnimations[`loading-${itemId}`];
+              }
+              this.loadLottieAnimation(
+                item.loadingAnimView,
+                `loadingAnim-${itemId}`,
+                `loading-${itemId}`,
+                item
+              );
+            });
+          }
+
+          // 检查frontAnimView.animUrl是否变化
+          if (
+            item.frontAnimView &&
+            oldList[index].frontAnimView &&
+            item.frontAnimView.animUrl !== oldList[index].frontAnimView.animUrl
+          ) {
+            console.log(
+              '检测到frontAnimView.animUrl变化:',
+              item.frontAnimView.animUrl
+            );
+            this.$nextTick(() => {
+              const itemId = item.itemView.id;
+              if (this.lottieAnimations[`front-${itemId}`]) {
+                this.lottieAnimations[`front-${itemId}`].destroy();
+                delete this.lottieAnimations[`front-${itemId}`];
+              }
+              this.loadLottieAnimation(
+                item.frontAnimView,
+                `frontAnim-${itemId}`,
+                `front-${itemId}`,
+                item
+              );
+            });
+          }
+        });
+      },
+      deep: true,
     },
-    onDragEventEnd(event) {
-      this.$emit('onDragEventEnd', event)
+  },
+  mounted() {
+    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();
+
+    // 添加测试拖拽模式的方法
+    window.testDragMode = (index = 0) => {
+      this.testDragMode(index);
+    };
   },
 };
 </script>
+
+<style scoped>
+button {
+  border: none;
+}
+.disabled-item {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.outer-container {
+  width: 100%;
+  position: relative;
+}
+
+.grid-items-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+.grid-inner-wrapper {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols), 1fr);
+  grid-gap: var(--grid-gap);
+  width: calc(100% - var(--grid-margin));
+}
+
+/* 优化排序过渡效果 */
+.grid-fade-move {
+  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
+  will-change: transform;
+}
+
+.grid-item {
+  position: relative;
+  box-sizing: border-box;
+  transition: all 0.15s cubic-bezier(0.2, 0, 0.2, 1);
+  will-change: transform, opacity, box-shadow;
+  overflow: hidden;
+}
+.grid-box {
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: auto;
+}
+.leftTopIcon {
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+.actionButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* Lottie容器样式 */
+.lottie-container {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.bg-anim,
+.front-anim {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+.bg-anim,
+.front-anim {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+/* 当进入编辑模式时给所有元素添加淡淡的阴影 */
+/* .editMode .grid-item:not(.being-dragged):not(.hidden) {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+} */
+
+/* 悬停目标的样式 */
+.hover-target {
+  z-index: 5;
+  transform: scale(1.05);
+  transition: all 0.1s ease-out;
+}
+
+/* 正在拖拽的元素样式 */
+.being-dragged {
+  z-index: 10;
+  opacity: 0.3; /* 降低原位置的不透明度 */
+}
+
+/* 被拖拽时原位置隐藏 */
+.grid-item.hidden {
+  opacity: 0 !important;
+  visibility: hidden;
+}
+
+/* 拖拽克隆元素 */
+.drag-clone {
+  position: absolute;
+  z-index: 100;
+  user-select: none;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  pointer-events: none;
+  transition: none;
+  will-change: transform;
+  left: 0;
+  top: 0;
+}
+.flexBox {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  position: relative;
+  flex-direction: row;
+}
+.itemText {
+  display: block;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.shaking {
+  animation: shake 0.3s infinite;
+  transform-origin: center center;
+}
+
+/* 抖动关键帧 */
+@keyframes shake {
+  0% {
+    transform: rotateZ(2deg);
+  }
+  25% {
+    transform: rotateZ(-2deg);
+  }
+  50% {
+    transform: rotateZ(2deg);
+  }
+  75% {
+    transform: rotateZ(-2deg);
+  }
+  100% {
+    transform: rotateZ(2deg);
+  }
+}
+
+.grid-item.shaking {
+  animation: seesaw-rotate 0.6s linear infinite;
+  transform-origin: center center;
+}
+</style>