@dolphinweex/weex-harmony 0.1.49 → 0.1.51

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

@@ -27,64 +27,56 @@
             @touchcancel="endTouch"
           >
             <div
-              v-if="
-                item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing
-              "
+              v-if="hasAnimation(item, 'bgAnimView')"
               class="lottie-container bg-anim"
-              :style="applyNormalAttribute(item.bgAnimView)"
+              :style="applyNormalAttribute(item.bgAnimView, 'bgAnimView')"
               :ref="`bgAnim-${item.itemView.id}`"
             ></div>
             <div
-              v-if="
-                item.frontAnimView &&
-                item.frontAnimView.animUrl &&
-                !data.isEditing
-              "
+              v-if="hasAnimation(item, 'frontAnimView')"
               class="lottie-container front-anim"
-              :style="applyNormalAttribute(item.frontAnimView)"
+              :style="applyNormalAttribute(item.frontAnimView, 'frontAnimView')"
               :ref="`frontAnim-${item.itemView.id}`"
             ></div>
             <div
-              :style="applyNormalAttribute(item.itemView)"
+              :style="applyNormalAttribute(item.itemView, 'itemView')"
               class="grid-box"
               :class="{ shaking: data.isEditing }"
               @click.stop.prevent="(e) => itemViewClick(e, item, index)"
             >
               <div class="flexBox">
                 <img
-                  :src="item.iconImage.url"
-                  :style="applyNormalAttribute(item.iconImage)"
+                  :src="getUrl(item, 'iconImage')"
+                  :style="applyNormalAttribute(item.iconImage, '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)"
+                      :style="applyNormalAttribute(item.actionButton, 'actionButton')"
                     >
-                      {{ item.actionButton.text }}
+                      {{ getText(item, 'actionButton') }}
                     </button>
                     <div
-                      v-if="
-                        item.loadingAnimView && item.loadingAnimView.animUrl
-                      "
+                      v-if="getUrl(item, 'loadingAnimView', 'animUrl')"
                       class="loading-anim"
-                      :style="applyNormalAttribute(item.loadingAnimView)"
+                      :style="applyNormalAttribute(item.loadingAnimView, '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)"
+                      :src="getUrl(item, 'rightIcon')"
+                      :style="applyNormalAttribute(item.rightIcon, '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)"
+                      :src="getUrl(item, 'leftTopIcon')"
+                      :style="applyNormalAttribute(item.leftTopIcon, 'leftTopIcon')"
                       @click.stop.prevent
                     />
                   </div>
@@ -96,16 +88,16 @@
                       "
                       :src="
                         item.itemView.isSelected
-                          ? item.selectIcon.selectedUrl
-                          : item.selectIcon.url
+                          ? getUrl(item, 'selectIcon', 'selectedUrl')
+                          : getUrl(item, 'selectIcon')
                       "
-                      :style="applyNormalAttribute(item.selectIcon)"
+                      :style="applyNormalAttribute(item.selectIcon, 'selectIcon')"
                     />
                   </div>
                 </div>
               </div>
-              <div class="itemText" :style="[applyNormalAttribute(item.text)]">
-                {{ item.text.text }}
+              <div class="itemText" :style="[applyNormalAttribute(item.text, 'text')]">
+                {{ getText(item, 'text') }}
               </div>
             </div>
           </div>
@@ -120,6 +112,27 @@
 <script>
 import lottie from 'lottie-web';
 const scla = 2;
+
+// 常量配置
+const REQUIRED_TYPES = [
+  'itemView',
+  'text', 
+  'actionButton',
+  'rightIcon',
+  'leftTopIcon',
+  'iconImage',
+  'selectIcon',
+  'loadingAnimView',
+  'bgAnimView',
+  'frontAnimView',
+];
+
+const ANIMATION_TYPES = [
+  { type: 'bg', view: 'bgAnimView' },
+  { type: 'loading', view: 'loadingAnimView' },
+  { type: 'front', view: 'frontAnimView' }
+];
+
 export default {
   name: 'EditableGrid',
   props: {
@@ -147,6 +160,10 @@ export default {
       isTouchDragging: false,
       lastSwapTime: 0,
       isAnimating: false,
+      lastSwapPair: null, // 记录上次交换的元素对
+      stablePositionTime: 0, // 稳定位置时间
+      lastTouchX: 0, // 上次触摸X坐标
+      lastTouchY: 0, // 上次触摸Y坐标
       touchStartX: 0,
       touchStartY: 0,
       draggedItemRect: null,
@@ -163,6 +180,15 @@ export default {
       fixedItemHeight: 0,
       animationFrameId: null,
       dragCloneElement: null, // 拖拽克隆DOM元素
+      // 性能优化缓存
+      gridItemsCache: [],
+      lastCacheTime: 0,
+      cacheValidDuration: 1000, // 缓存有效期1秒
+      listChangeDebounced: null,
+      updatePositionThrottled: null,
+      // 避免频繁DOM查询
+      containerElement: null,
+      isUpdatingPosition: false,
     };
   },
   computed: {
@@ -181,6 +207,280 @@ export default {
     },
   },
   methods: {
+    // 添加工具方法
+    isNil(value) {
+      return value === null || value === undefined;
+    },
+
+    // 获取属性值，支持回退到全局数据和默认值
+    getValue(itemData, globalData, property, defaultValue = null) {
+      // 安全地获取属性值，避免访问undefined对象的属性
+      let itemValue;
+      let globalValue;
+      
+      try {
+        itemValue = itemData && typeof itemData === 'object' ? itemData[property] : undefined;
+      } catch (e) {
+        itemValue = undefined;
+      }
+      
+      try {
+        globalValue = globalData && typeof globalData === 'object' ? globalData[property] : undefined;
+      } catch (e) {
+        globalValue = undefined;
+      }
+      
+      if (!this.isNil(itemValue)) {
+        return itemValue;
+      }
+      if (!this.isNil(globalValue)) {
+        return globalValue;
+      }
+      return defaultValue;
+    },
+
+    // 简化的URL获取方法
+    getUrl(item, type, property = 'url') {
+      return this.getValue(item[type], this.data.globalData[type], property, '');
+    },
+
+    // 简化的文本获取方法  
+    getText(item, type, property = 'text') {
+      return this.getValue(item[type], this.data.globalData[type], property, '');
+    },
+
+    // 简化的动画URL检查方法
+    hasAnimation(item, type) {
+      return this.getValue(item[type], this.data.globalData[type], 'animUrl', '') && !this.data.isEditing;
+    },
+
+    // 性能优化工具方法
+    debounce(func, wait) {
+      let timeout;
+      return function executedFunction(...args) {
+        const later = () => {
+          clearTimeout(timeout);
+          func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    },
+
+    throttle(func, limit) {
+      let inThrottle;
+      return function executedFunction(...args) {
+        if (!inThrottle) {
+          func.apply(this, args);
+          inThrottle = true;
+          setTimeout(() => inThrottle = false, limit);
+        }
+      };
+    },
+
+    // 缓存DOM查询结果
+    getCachedGridItems() {
+      const now = Date.now();
+      if (now - this.lastCacheTime > this.cacheValidDuration || this.gridItemsCache.length === 0) {
+        this.gridItemsCache = Array.from(document.querySelectorAll('.grid-item'));
+        this.lastCacheTime = now;
+      }
+      return this.gridItemsCache;
+    },
+
+    // 清除DOM缓存
+    clearGridItemsCache() {
+      this.gridItemsCache = [];
+      this.lastCacheTime = 0;
+    },
+
+    // 优化的位置更新方法
+    optimizedUpdateDragPosition() {
+      if (this.isUpdatingPosition) return;
+      
+      this.isUpdatingPosition = true;
+      
+      const easing = 0.6;
+      
+      // 获取outer-container的边界
+      const containerRect = this.containerElement.getBoundingClientRect();
+      
+      // 计算相对于容器的目标位置
+      let targetX = this.targetTouchX - this.touchOffsetX - containerRect.left;
+      let targetY = this.targetTouchY - this.touchOffsetY - containerRect.top;
+      
+      // 限制拖拽范围在容器内
+      const cloneWidth = this.fixedItemWidth;
+      const cloneHeight = this.fixedItemHeight;
+      const maxX = containerRect.width - cloneWidth;
+      const maxY = containerRect.height - cloneHeight;
+      
+      // 限制X坐标
+      targetX = Math.max(0, Math.min(targetX, maxX));
+      
+      // 限制Y坐标
+      targetY = Math.max(0, Math.min(targetY, maxY));
+      
+      this.dragCloneX += (targetX - this.dragCloneX) * easing;
+      this.dragCloneY += (targetY - this.dragCloneY) * easing;
+      
+      if (Math.abs(this.dragCloneX - targetX) < 0.5) {
+        this.dragCloneX = targetX;
+      }
+      if (Math.abs(this.dragCloneY - targetY) < 0.5) {
+        this.dragCloneY = targetY;
+      }
+      
+      this.updateDragClonePosition();
+      
+      this.isUpdatingPosition = false;
+      
+      if (this.isTouchDragging) {
+        this.animationFrameId = requestAnimationFrame(() => this.optimizedUpdateDragPosition());
+      }
+    },
+
+    // 批量更新样式，减少重绘
+    batchUpdateStyles(elements, styles) {
+      if (!elements || elements.length === 0) return;
+      
+      // 使用documentFragment来减少DOM操作
+      elements.forEach(element => {
+        Object.keys(styles).forEach(property => {
+          element.style[property] = styles[property];
+        });
+      });
+    },
+
+    // 确保项目数据结构完整性
+    ensureItemStructure(item) {
+      REQUIRED_TYPES.forEach((type) => {
+        if (!item[type] || typeof item[type] !== 'object') {
+          item[type] = {};
+        }
+      });
+
+      return item;
+    },
+
+    // 抽取的动画初始化公共方法
+    initItemAnimations(item, itemData = null) {
+      const itemId = String(item.itemView.id);
+      const dataSource = itemData || item; // 支持传入不同的数据源
+      
+      ANIMATION_TYPES.forEach(({ type, view }) => {
+        const animUrl = this.getValue(
+          dataSource[view], 
+          this.data.globalData[view], 
+          'animUrl', 
+          ''
+        );
+        if (animUrl) {
+          this.createLottieAnimation(type, itemId, dataSource[view], dataSource);
+        }
+      });
+    },
+
+    // 统一的样式应用方法，支持缩放控制
+    applyOptimizedAttribute(itemData = {}, type = '', useScale = true) {
+      const globalData = this.data.globalData[type] || {};
+      const scale = useScale ? scla : 1; // 根据参数决定是否应用缩放
+      
+      const style = {
+        color: this.getValue(itemData, globalData, 'textColor', '#000000'),
+        fontWeight: this.getValue(itemData, globalData, 'fontWeight', 'normal'),
+        fontFamily: this.getValue(itemData, globalData, 'fontFamilyPath', 'inherit'),
+        fontSize: `${(this.getValue(itemData, globalData, 'textSize', 16)) * scale}px`,
+        // 布局相关样式
+        backgroundColor: this.getValue(itemData, globalData, 'backgroundColor', 'transparent'),
+        borderRadius: `${(this.getValue(itemData, globalData, 'cornerRadius', 0)) * scale}px`,
+        opacity: this.getValue(itemData, globalData, 'alpha', 1),
+      };
+
+      // 处理width
+      const width = this.getValue(itemData, globalData, 'width');
+      if (typeof width === 'number' && width > 0) {
+        style.width = `${width * scale}px`;
+      } else if (width === -1) {
+        style.width = '100%';
+      } else if (width && typeof width === 'string') {
+        style.width = width;
+      }
+
+      // 处理height
+      const height = this.getValue(itemData, globalData, 'height');
+      if (typeof height === 'number' && height > 0) {
+        style.height = `${height * scale}px`;
+      } else if (height && typeof height === 'string') {
+        style.height = height;
+      }
+
+      // 处理visibility和display
+      const visibility = this.getValue(itemData, globalData, 'visibility');
+      if (typeof visibility === 'number') {
+        if (visibility === 0) {
+          style.display = 'none';
+        } else {
+          style.display = this.getValue(itemData, globalData, 'display', '');
+          style.visibility = visibility === 1 ? 'visible' : 'hidden';
+        }
+      } else {
+        style.display = this.getValue(itemData, globalData, 'display', '');
+      }
+
+      // 处理边框
+      const borderColor = this.data.isEditing
+        ? this.getValue(itemData, globalData, 'selectedBorderColor', '')
+        : this.getValue(itemData, globalData, 'normalBorderColor', '');
+      const borderWidth = this.data.isEditing
+        ? this.getValue(itemData, globalData, 'selectedBorderWidth', 0)
+        : this.getValue(itemData, globalData, 'normalBorderWidth', 0);
+      
+      style.borderColor = borderColor;
+      style.borderWidth = `${borderWidth * scale}px`;
+
+      // 处理padding
+      const padding = this.getValue(itemData, globalData, 'padding');
+      if (padding && Array.isArray(padding)) {
+        style.paddingTop = `${(padding[1] || 0) * scale}px`;
+        style.paddingLeft = `${(padding[0] || 0) * scale}px`;
+        style.paddingBottom = `${(padding[3] || 0) * scale}px`;
+        style.paddingRight = `${(padding[2] || 0) * scale}px`;
+      }
+
+      // 处理margin
+      const margin = this.getValue(itemData, globalData, 'margin');
+      if (margin && Array.isArray(margin)) {
+        style.marginTop = `${(margin[1] || 0) * scale}px`;
+        style.marginLeft = `${(margin[0] || 0) * scale}px`;
+        style.marginBottom = `${(margin[3] || 0) * scale}px`;
+        style.marginRight = `${(margin[2] || 0) * scale}px`;
+      }
+
+      return style;
+    },
+
+
+
+
+
+    // 优化内存使用
+    optimizeMemoryUsage() {
+      // 清理无用的动画实例
+      Object.keys(this.lottieAnimations).forEach(key => {
+        const anim = this.lottieAnimations[key];
+        if (anim && anim.isLoaded === false) {
+          anim.destroy();
+          delete this.lottieAnimations[key];
+        }
+      });
+      
+      // 清理DOM缓存
+      if (this.gridItemsCache.length > 50) { // 如果缓存过多，清理
+        this.clearGridItemsCache();
+      }
+    },
+
     // 获取元素在页面中的绝对位置（考虑所有transform影响）
     getAbsolutePosition(element) {
       let x = 0;
@@ -216,32 +516,32 @@ export default {
       this.dragCloneElement = document.createElement('div');
       this.dragCloneElement.className = 'drag-clone-dynamic';
       
-             // 设置基本样式（使用不带缩放的样式方法）
-       const itemViewStyle = this.applyDragCloneAttribute(item.itemView);
-       Object.assign(this.dragCloneElement.style, {
-         position: 'absolute',
-         zIndex: '9999',
-         userSelect: 'none',
-         boxSizing: 'border-box',
-         flexDirection: 'column',
-         pointerEvents: 'none',
-         transition: 'none',
-         willChange: 'transform',
-         left: '0',
-         top: '0',
-         // 覆盖itemViewStyle中可能的宽高设置，确保使用固定尺寸
-         ...itemViewStyle,
-         width: `${this.fixedItemWidth }px`,
-         height: `${this.fixedItemHeight }px`,
-         display: 'flex',
-         justifyContent: 'space-between',
-       });
-
-       // 创建内容HTML（使用不带缩放的样式方法）
-       const iconImageStyle = this.applyDragCloneAttribute(item.iconImage);
-       const selectIconStyle = this.applyDragCloneAttribute(item.selectIcon);
-       const textStyle = this.applyDragCloneAttribute(item.text);
-       const actionButtonStyle = this.applyDragCloneAttribute(item.actionButton);
+      // 设置基本样式（使用不带缩放的样式方法）
+      const itemViewStyle = this.applyOptimizedAttribute(item.itemView, 'itemView', false);
+      Object.assign(this.dragCloneElement.style, {
+        position: 'absolute',
+        zIndex: '9999',
+        userSelect: 'none',
+        boxSizing: 'border-box',
+        flexDirection: 'column',
+        pointerEvents: 'none',
+        transition: 'none',
+        willChange: 'transform',
+        left: '0',
+        top: '0',
+        // 覆盖itemViewStyle中可能的宽高设置，确保使用固定尺寸
+        ...itemViewStyle,
+        width: `${this.fixedItemWidth}px`,
+        height: `${this.fixedItemHeight}px`,
+        display: 'flex',
+        justifyContent: 'space-between',
+      });
+
+      // 创建内容HTML（不使用缩放）
+      const iconImageStyle = this.applyOptimizedAttribute(item.iconImage, 'iconImage', false);
+      const selectIconStyle = this.applyOptimizedAttribute(item.selectIcon, 'selectIcon', false);
+      const textStyle = this.applyOptimizedAttribute(item.text, 'text', false);
+      const actionButtonStyle = this.applyOptimizedAttribute(item.actionButton, 'actionButton', false);
       
       // 将样式对象转换为CSS字符串
       const stylesToString = (styleObj) => {
@@ -250,33 +550,35 @@ export default {
           .join('; ');
       };
 
-                           // 确保内部grid-box也使用固定尺寸（使用不带缩放的样式方法）
-        const gridBoxStyle = {
-          ...this.applyDragCloneAttribute(item.itemView),
-          width: `${this.fixedItemWidth }px`,
-          height: `${this.fixedItemHeight }px`
-        };
+      // 确保内部grid-box也使用固定尺寸（使用不带缩放的样式方法）
+      const gridBoxStyle = {
+        ...this.applyOptimizedAttribute(item.itemView, 'itemView', false),
+        width: `${this.fixedItemWidth}px`,
+        height: `${this.fixedItemHeight}px`
+      };
 
-       this.dragCloneElement.innerHTML = `
-         <div class="grid-box" style="${stylesToString(gridBoxStyle)} ;display: flex; justify-content: space-between;flex-direction: column">
-           <div class="flexBox" style="display: flex; justify-content: space-between; width: 100%; position: relative; flex-direction: row;">
-             <img src="${item.iconImage.url}" style="${stylesToString(iconImageStyle)}" />
-             <div style="pointer-events: none;">
-               <img 
-                 class="isSelected" 
-                 src="${item.itemView.isSelected ? item.selectIcon.selectedUrl : item.selectIcon.url}"
-                 style="${stylesToString(selectIconStyle)}"
-               />
-             </div>
-           </div>
-           <div class="itemText" style="${stylesToString(textStyle)}; display: block; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-             ${item.text.text}
-           </div>
-         </div>
-       `;
-
-      // 挂载到body
-      document.body.appendChild(this.dragCloneElement);
+      this.dragCloneElement.innerHTML = `
+        <div class="grid-box" style="${stylesToString(gridBoxStyle)} ;display: flex; justify-content: space-between;flex-direction: column">
+          <div class="flexBox" style="display: flex; justify-content: space-between; width: 100%; position: relative; flex-direction: row;">
+            <img src="${this.getUrl(item, 'iconImage')}" style="${stylesToString(iconImageStyle)}" />
+            <div style="pointer-events: none;">
+              <img 
+                class="isSelected" 
+                src="${item.itemView.isSelected 
+                  ? this.getUrl(item, 'selectIcon', 'selectedUrl')
+                  : this.getUrl(item, 'selectIcon')}"
+                style="${stylesToString(selectIconStyle)}"
+              />
+            </div>
+          </div>
+          <div class="itemText" style="${stylesToString(textStyle)}; display: block; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+            ${this.getText(item, 'text')}
+          </div>
+        </div>
+      `;
+
+      // 挂载到outer-container而不是body，这样可以更好地控制拖拽范围
+      this.containerElement.appendChild(this.dragCloneElement);
       
       return this.dragCloneElement;
     },
@@ -298,64 +600,11 @@ export default {
       this.dragCloneElement.style.transform = `translate(${this.dragCloneX}px, ${this.dragCloneY}px)`;
     },
 
-    // 为拖拽克隆元素应用样式（不应用缩放因子）
-    applyDragCloneAttribute(data = {}) {
-      let style = {
-        color: data.textColor || '#000000',
-        fontWeight: data.fontWeight || 'normal',
-        fontFamily: data.fontFamilyPath || 'inherit',
-        fontSize: `${data.textSize || 16}px`, // 不乘以scla
-        // 布局相关样式
-        width:
-          typeof data.width === 'number' && data.width > 0
-            ? `${data.width}px` // 不乘以scla
-            : data.width === -1
-            ? '%'
-            : data.width || '',
-        height:
-          typeof data.height === 'number'
-            ? `${data.height}px` // 不乘以scla
-            : data.height || '',
-        backgroundColor: data.backgroundColor || 'transparent',
-        borderRadius: `${data.cornerRadius || 0}px`, // 不乘以scla
-        opacity: data.alpha || 1,
-      };
-      
-      if (typeof data.visibility === 'number') {
-        if (data.visibility === 0) {
-          style.display = 'none';
-        } else {
-          style.display = data.display || '';
-          style.visibility = data.visibility === 1 ? 'visible' : 'hidden';
-        }
-      } else {
-        style.display = data.display || '';
-      }
-
-      style.borderColor = this.data.isEditing
-        ? data.selectedBorderColor || ''
-        : data.normalBorderColor || '';
-      style.borderWidth = this.data.isEditing
-        ? `${data.selectedBorderWidth || 0}px` // 不乘以scla
-        : `${data.normalBorderWidth || 0}px`; // 不乘以scla
-        
-      if (data.padding) {
-        style.paddingTop = `${data.padding[1] || 0}px`; // 不乘以scla
-        style.paddingLeft = `${data.padding[0] || 0}px`; // 不乘以scla
-        style.paddingBottom = `${data.padding[3] || 0}px`; // 不乘以scla
-        style.paddingRight = `${data.padding[2] || 0}px`; // 不乘以scla
-      }
-      if (data.margin) {
-        style.marginTop = `${data.margin[1] || 0}px`; // 不乘以scla
-        style.marginLeft = `${data.margin[0] || 0}px`; // 不乘以scla
-        style.marginBottom = `${data.margin[3] || 0}px`; // 不乘以scla
-        style.marginRight = `${data.margin[2] || 0}px`; // 不乘以scla
-      }
-
-      return style;
+    // 普通渲染的样式应用方法（使用缩放）
+    applyNormalAttribute(itemData = {}, type = '') {
+      return this.applyOptimizedAttribute(itemData, type, true);
     },
     updateListItem(data) {
-      console.log('updateListItem收到数据:', JSON.stringify(data));
       const id = data.itemView.id;
       const index = this.data.list.findIndex((item) => item.itemView.id == id);
 
@@ -363,38 +612,16 @@ export default {
         return;
       }
 
-      // 合并全局数据到新数据
-      const mergedData = this.mergeItemData(data);
+      // 确保数据结构完整性
+      this.ensureItemStructure(data);
 
-      this.$set(this.data.list, index, mergedData);
+      // 直接更新数据，不再需要合并
+      this.$set(this.data.list, index, data);
       this.$nextTick(() => {
         const itemId = String(data.itemView.id);
-        if (mergedData.bgAnimView.animUrl) {
-          this.createLottieAnimation(
-            'bg',
-            itemId,
-            mergedData.bgAnimView,
-            mergedData
-          );
-        }
-
-        if (mergedData.loadingAnimView.animUrl) {
-          this.createLottieAnimation(
-            'loading',
-            itemId,
-            mergedData.loadingAnimView,
-            mergedData
-          );
-        }
-
-        if (mergedData.frontAnimView.animUrl) {
-          this.createLottieAnimation(
-            'front',
-            itemId,
-            mergedData.frontAnimView,
-            mergedData
-          );
-        }
+        
+        // 使用抽取的公共方法初始化动画
+        this.initItemAnimations(data, data);
       });
     },
     createLottieAnimation(type, itemId, animView, itemData) {
@@ -488,17 +715,31 @@ export default {
     },
     getListData(callback) {
       let data = Array.from(this.data.list);
-      data = data.map((item) => ({
-        ...item,
-        itemView: {
-          ...item.itemView,
-          id: String(item.itemView.id),
-        },
-      }));
+      data = data.map((item) => {
+        // 确保每个项目都有完整的数据结构
+        const completeItem = { ...item };
+        this.ensureItemStructure(completeItem);
+        
+        // 为了外部使用，合并全局数据到每个类型
+        REQUIRED_TYPES.forEach((type) => {
+          const globalData = this.data.globalData && this.data.globalData[type] || {};
+          completeItem[type] = {
+            ...globalData,
+            ...completeItem[type]
+          };
+        });
+        
+        return {
+          ...completeItem,
+          itemView: {
+            ...completeItem.itemView,
+            id: String(completeItem.itemView.id),
+          },
+        };
+      });
       callback({ listData: data });
     },
     rightIconClick(e) {
-      console.log('rightIconClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation();
       this.$emit('onClickRightIcon', e);
@@ -554,7 +795,6 @@ export default {
     },
 
     actionClick(e, item, index) {
-      console.log('actionClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
 
@@ -572,8 +812,6 @@ export default {
     },
 
     cleanupOtherAnimations(currentItemId) {
-      console.log('清理其他项目的动画实例，当前项目ID:', currentItemId);
-
       Object.keys(this.lottieAnimations).forEach((key) => {
         if (!key.includes(`-${currentItemId}`)) {
           if (this.lottieAnimations[key]) {
@@ -621,103 +859,10 @@ export default {
       });
     },
 
-    generateDataList() {
-      if (!this.data || !this.data.list || !this.data.globalData) {
-        return;
-      }
-      // 直接处理 this.data.list，为每个项目合并全局数据
-      this.data.list.forEach((item, index) => {
-        const processedItem = this.mergeItemData(item);
-        this.$set(this.data.list, index, 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) {
-      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,
-      };
-      if (typeof data.visibility === 'number') {
-        if (data.visibility === 0) {
-          style.display = 'none';
-        } else {
-          style.display = data.display || '';
-          style.visibility = data.visibility === 1 ? 'visible' : 'hidden';
-        }
-      } else {
-        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;
-    },
     // 开始长按
     startLongPress(e, index) {
       if (!this.data.isEditable) {
@@ -730,7 +875,6 @@ export default {
       const touch = e.changedTouches[0];
       this.touchStartX = touch.pageX;
       this.touchStartY = touch.pageY;
-      console.log('开始长按ddddddddd', touch, touch.pageY, touch.pageX);
       this.isScrolling = false; // 重置滚动状态
 
       // 设置新的长按计时器
@@ -788,10 +932,14 @@ export default {
 
     // 激活拖拽模式
     activateDragMode(index) {
-      console.log('长按触发，进入编辑模式');
-      // 进入编辑模式
-
       if (this.data.isEditing) {
+        // 重置交换状态
+        this.lastSwapPair = null;
+        this.stablePositionTime = 0;
+        this.isAnimating = false;
+        this.lastTouchX = this.touchStartX;
+        this.lastTouchY = this.touchStartY;
+        
         // 设置当前拖拽索引
         this.draggingIndex = index;
         this.isTouchDragging = true;
@@ -802,8 +950,9 @@ export default {
           height: this.fixedItemHeight,
         };
 
-        // 获取当前元素位置用于计算偏移
-        const element = document.querySelectorAll('.grid-item')[index];
+        // 获取当前元素位置用于计算偏移 - 使用缓存的元素
+        const gridItems = this.getCachedGridItems();
+        const element = gridItems[index];
         if (element) {
           // 使用getBoundingClientRect获取视口中的位置
           const rect = element.getBoundingClientRect();
@@ -815,22 +964,29 @@ export default {
           // 创建拖拽克隆元素
           this.createDragClone(index);
 
-          // 设置克隆元素的初始位置（直接使用视口坐标加滚动偏移）
-          this.dragCloneX = rect.left + window.pageXOffset;
-          this.dragCloneY = rect.top + window.pageYOffset;
+          // 计算相对于outer-container的位置
+          const containerRect = this.containerElement.getBoundingClientRect();
+          this.dragCloneX = rect.left - containerRect.left;
+          this.dragCloneY = rect.top - containerRect.top;
           this.isDragClone = true;
 
           // 立即更新位置
           this.updateDragClonePosition();
 
           requestAnimationFrame(() => {
-            // 使用触摸点减去偏移来计算正确位置
-            this.dragCloneX = this.touchStartX - this.touchOffsetX + window.pageXOffset;
-            this.dragCloneY = this.touchStartY - this.touchOffsetY + window.pageYOffset;
+            // 使用触摸点减去偏移来计算正确位置，相对于容器
+            const targetX = this.touchStartX - this.touchOffsetX - containerRect.left;
+            const targetY = this.touchStartY - this.touchOffsetY - containerRect.top;
+            
+            // 限制在容器范围内
+            const maxX = containerRect.width - this.fixedItemWidth;
+            const maxY = containerRect.height - this.fixedItemHeight;
+            
+            this.dragCloneX = Math.max(0, Math.min(targetX, maxX));
+            this.dragCloneY = Math.max(0, Math.min(targetY, maxY));
             this.updateDragClonePosition();
           });
 
-          console.log('拖拽克隆已创建');
         }
       }
       if(!this.data.isEditing){
@@ -872,42 +1028,87 @@ export default {
 
       // 启动平滑动画（如果尚未启动）
       if (!this.animationFrameId) {
-        this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
+        this.animationFrameId = requestAnimationFrame(this.optimizedUpdateDragPosition);
       }
 
-      // 简化的交换逻辑
-      this.handleSwapLogic(touch.pageX, touch.pageY);
+      // 使用节流优化交换逻辑，增加节流时间减少频繁调用
+      if (!this.updatePositionThrottled) {
+        this.updatePositionThrottled = this.throttle(this.handleSwapLogic.bind(this), 500);
+      }
+      
+      // 在动画过程中不执行交换逻辑
+      if (!this.isAnimating) {
+        this.updatePositionThrottled(touch.pageX, touch.pageY);
+      }
     },
 
     // 简化的交换处理逻辑
     handleSwapLogic(touchX, touchY) {
       // 控制交换频率，避免过于频繁的交换
       const now = Date.now();
-      if (now - this.lastSwapTime < 300) return;
+      if (now - this.lastSwapTime < 150) return; // 增加频率控制到150ms
 
-      // 获取所有网格元素
-      const gridItems = Array.from(document.querySelectorAll('.grid-item'));
+      // 检查位置稳定性 - 如果触摸点基本没有移动，认为是稳定状态
+      const moveDistance = Math.sqrt(
+        Math.pow(touchX - this.lastTouchX, 2) + Math.pow(touchY - this.lastTouchY, 2)
+      );
+      
+      if (moveDistance < 10) { // 移动距离小于10px认为是稳定的
+        if (this.stablePositionTime === 0) {
+          this.stablePositionTime = now;
+        } else if (now - this.stablePositionTime > 300) {
+          // 稳定超过300ms，跳过交换检测
+          return;
+        }
+      } else {
+        // 位置发生明显移动，重置稳定时间
+        this.stablePositionTime = 0;
+      }
+      
+      // 更新上次触摸位置
+      this.lastTouchX = touchX;
+      this.lastTouchY = touchY;
+
+      // 获取容器边界
+      const containerRect = this.containerElement.getBoundingClientRect();
+      
+      // 计算用于交换检测的有效触摸点
+      // 如果触摸点在容器外，使用拖拽克隆元素的中心位置
+      let effectiveTouchX = touchX;
+      let effectiveTouchY = touchY;
+      
+      if (touchX < containerRect.left || touchX > containerRect.right || 
+          touchY < containerRect.top || touchY > containerRect.bottom) {
+        // 触摸点在容器外，使用拖拽克隆元素的中心位置
+        const cloneCenterX = this.dragCloneX + this.fixedItemWidth / 2;
+        const cloneCenterY = this.dragCloneY + this.fixedItemHeight / 2;
+        effectiveTouchX = containerRect.left + cloneCenterX;
+        effectiveTouchY = containerRect.top + cloneCenterY;
+      }
+
+      // 使用缓存的网格元素
+      const gridItems = this.getCachedGridItems();
       let targetIndex = null;
 
-      // 寻找触摸点所在的目标元素
+      // 寻找有效触摸点所在的目标元素
       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 halfWidth = rect.width * 0.3; // 缩小判断区域到30%，减少误触
+        const halfHeight = rect.height * 0.3;
 
-        // 检查触摸点是否在元素的中心区域内
+        // 检查有效触摸点是否在元素的中心区域内
         if (
-          touchX >= centerX - halfWidth &&
-          touchX <= centerX + halfWidth &&
-          touchY >= centerY - halfHeight &&
-          touchY <= centerY + halfHeight
+          effectiveTouchX >= centerX - halfWidth &&
+          effectiveTouchX <= centerX + halfWidth &&
+          effectiveTouchY >= centerY - halfHeight &&
+          effectiveTouchY <= centerY + halfHeight
         ) {
           targetIndex = itemIndex;
           break; // 找到第一个符合条件的就退出
@@ -919,46 +1120,46 @@ export default {
 
       // 执行交换
       if (targetIndex !== null && targetIndex !== this.draggingIndex) {
-        [this.data.list[this.draggingIndex], this.data.list[targetIndex]] = [
-          this.data.list[targetIndex],
-          this.data.list[this.draggingIndex],
-        ];
-        console.log(`交换: ${this.draggingIndex} ↔ ${targetIndex}`);
-
-        // 更新拖拽索引
+        // 防止在动画过程中频繁交换
+        if (this.isAnimating) return;
+        
+        // 创建当前交换对的标识符
+        const currentSwapPair = [this.draggingIndex, targetIndex].sort().join('-');
+        
+        // 如果这是同一对元素的重复交换，需要更严格的时间控制
+        if (this.lastSwapPair === currentSwapPair) {
+          if (now - this.lastSwapTime < 1000) return; // 同一对元素需要等待1秒
+        }
+        
+        this.isAnimating = true;
+        
+        // 使用Vue的$set来避免触发不必要的重新渲染
+        const temp = this.data.list[this.draggingIndex];
+        this.$set(this.data.list, this.draggingIndex, this.data.list[targetIndex]);
+        this.$set(this.data.list, targetIndex, temp);
+        
+        // 更新拖拽索引和交换记录
         this.draggingIndex = targetIndex;
         this.lastSwapTime = now;
+        this.lastSwapPair = currentSwapPair;
+        
+        // 重置稳定位置时间，因为刚刚发生了交换
+        this.stablePositionTime = 0;
+        
+        // 延迟清理缓存，等待DOM更新完成
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.clearGridItemsCache();
+            this.isAnimating = false;
+          }, 100); // 增加延迟时间到100ms
+        });
       }
     },
 
-    // 平滑更新拖拽位置的方法
-    updateDragPosition() {
-      const easing = 0.6;
-      // 计算目标位置（考虑页面滚动位置）
-      const targetX = this.targetTouchX - this.touchOffsetX + window.pageXOffset;
-      const targetY = this.targetTouchY - this.touchOffsetY + window.pageYOffset;
-      
-      // 平滑插值
-      this.dragCloneX += (targetX - this.dragCloneX) * easing;
-      this.dragCloneY += (targetY - this.dragCloneY) * easing;
-      
-      // 当接近目标位置时直接设置为目标位置
-      if (Math.abs(this.dragCloneX - targetX) < 0.5) {
-        this.dragCloneX = targetX;
-      }
-      if (Math.abs(this.dragCloneY - targetY) < 0.5) {
-        this.dragCloneY = targetY;
-      }
-      
-      // 更新拖拽克隆元素位置
-      this.updateDragClonePosition();
-      
-      this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
-    },
+
 
     // 元素本身的触摸结束
     endTouch(e) {
-      console.log('触摸结束');
       this.$emit('onDragEventEnd', e);
       // 如果只是短按（还在计时），就取消长按
       this.cancelLongPress();
@@ -973,20 +1174,32 @@ export default {
         this.isTouchDragging = false;
         this.isDragClone = false;
         this.hoverIndex = null;
+        this.isUpdatingPosition = false;
+        
+        // 重置交换状态
+        this.lastSwapPair = null;
+        this.stablePositionTime = 0;
+        this.lastTouchX = 0;
+        this.lastTouchY = 0;
 
         // 销毁拖拽克隆元素
         this.destroyDragClone();
+        
+        // 等待可能的交换动画完成后再清理
+        setTimeout(() => {
+          this.clearGridItemsCache();
+          this.isAnimating = false; // 重置动画状态
+        }, 100);
 
         // 使用延时来重置拖拽索引，避免与点击事件冲突
         setTimeout(() => {
           this.draggingIndex = null;
-        }, 100);
+        }, 150);
       }
     },
 
     // 触摸结束处理 - 全局事件
     onTouchEnd(e) {
-      console.log('全局触摸结束');
       // 取消动画帧
       if (this.animationFrameId) {
         cancelAnimationFrame(this.animationFrameId);
@@ -997,13 +1210,23 @@ export default {
       this.isTouchDragging = false;
       this.isDragClone = false;
       this.hoverIndex = null;
+      this.isUpdatingPosition = false;
+      
+      // 重置交换状态
+      this.lastSwapPair = null;
+      this.stablePositionTime = 0;
+      this.lastTouchX = 0;
+      this.lastTouchY = 0;
 
       // 销毁拖拽克隆元素
       this.destroyDragClone();
-
-      // 立即清除拖拽索引，避免状态卡住
-      this.draggingIndex = null;
-      this.isAnimating = false;
+      
+      // 延迟清理，确保所有动画和状态更新完成
+      setTimeout(() => {
+        this.clearGridItemsCache();
+        this.isAnimating = false;
+        this.draggingIndex = null;
+      }, 100);
     },
     // 获取grid-box宽度的方法
     updateGridBoxWidth() {
@@ -1012,7 +1235,6 @@ 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');
@@ -1029,7 +1251,6 @@ export default {
         Object.keys(this.lottieAnimations).forEach((key) => {
           const anim = this.lottieAnimations[key];
           if (anim && typeof anim.destroy === 'function') {
-            console.log(`销毁旧动画实例: ${key}`);
             try {
               anim.removeEventListener('complete');
             } catch (e) {
@@ -1043,31 +1264,11 @@ export default {
         // 重置动画实例对象
         this.lottieAnimations = {};
 
-        console.log('开始初始化Lottie动画，列表项数量:', this.data.list.length);
-
         // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
         setTimeout(() => {
           // 为每个列表项初始化动画
           this.data.list.forEach((item) => {
-            const itemId = String(item.itemView.id);
-            // 加载背景动画
-            this.createLottieAnimation('bg', itemId, item.bgAnimView, item);
-
-            // 加载加载中动画
-            this.createLottieAnimation(
-              'loading',
-              itemId,
-              item.loadingAnimView,
-              item
-            );
-
-            // 加载前景动画
-            this.createLottieAnimation(
-              'front',
-              itemId,
-              item.frontAnimView,
-              item
-            );
+            this.initItemAnimations(item);
           });
         }, 50); // 小延迟确保DOM已更新和旧动画已销毁
       });
@@ -1094,39 +1295,66 @@ export default {
     },
   },
   watch: {
-    'data.isEditing': {
-      handler(newVal) {
-        this.generateDataList();
-        this.$nextTick(() => {
-          this.initLottieAnimations();
-        });
-      },
-      deep: true,
-    },
-    // 监听列表数据变化，自动更新处理后的数据
+    // 监听列表数据变化，自动更新缓存
     'data.list': {
       handler(newList, oldList) {
-        // 防止死循环
-        if (newList.length !== oldList.length) {
-          console.log('检测到data.list变化');
-          this.generateDataList();
-          this.$nextTick(() => {
-            this.initLottieAnimations();
-          });
+        // 跳过拖拽期间的更新，提高性能
+        if (this.isTouchDragging) {
+          return;
+        }
+        // 更精确的变化检测
+        const hasLengthChange = newList.length !== oldList.length;
+        if (hasLengthChange) {
+          
+          // 清除DOM缓存
+          this.clearGridItemsCache();
+          
+          // 使用防抖处理列表变化
+          if (!this.listChangeDebounced) {
+            this.listChangeDebounced = this.debounce(() => {
+              this.$nextTick(() => {
+                // 优化内存使用
+                // 确保每个项目都有完整的数据结构
+                if (newList && Array.isArray(newList)) {
+                  newList.forEach((item, index) => {
+                    this.ensureItemStructure(item);
+                  });
+                }
+                
+                this.optimizeMemoryUsage();
+              });
+            }, 100);
+          }
+          this.listChangeDebounced();
         }
       },
       deep: true,
     },
   },
-
+  updated(){
+    if(this.isTouchDragging){return}
+  },
   mounted() {
-    console.log(this.data, 'djdjdjdjdjdjdj');
+    
+    // 确保初始数据结构完整性
+    if (this.data && this.data.list && Array.isArray(this.data.list)) {
+      this.data.list.forEach((item, index) => {
+        this.ensureItemStructure(item);
+      });
+    }
+    
+    // 缓存容器元素
+    this.containerElement = this.$el;
+    
     // 初始获取grid-box宽度
     this.updateGridBoxWidth();
     // 获取并存储固定宽高
     this.updateFixedItemSize();
     // 初始化Lottie动画
     this.initLottieAnimations();
+    
+    // 初始化节流函数
+    this.updatePositionThrottled = this.throttle(this.handleSwapLogic.bind(this), 100);
   },
   beforeDestroy() {
     // 确保清理所有事件监听器
@@ -1138,10 +1366,19 @@ export default {
     }
     // 清理拖拽克隆元素
     this.destroyDragClone();
+    
+    // 清理缓存
+    this.clearGridItemsCache();
+    
+    // 清理节流和防抖函数
+    this.updatePositionThrottled = null;
+    this.listChangeDebounced = null;
+    
+    // 清理容器引用
+    this.containerElement = null;
   },
   created() {
-    // 初始化处理后的数据列表
-    this.generateDataList();
+    // 组件创建时无需预处理数据，使用时按需获取全局数据
   },
 };
 </script>
@@ -1160,6 +1397,8 @@ button {
   width: 100%;
   position: relative;
   z-index: 1;
+  /* 确保容器可以作为拖拽克隆元素的定位父元素 */
+  overflow: visible;
 }
 
 .items-container {
@@ -1176,21 +1415,28 @@ button {
   grid-template-columns: repeat(var(--grid-cols), 1fr);
   grid-gap: var(--grid-gap);
   width: calc(100% - var(--grid-margin));
+  /* 性能优化 */
+  contain: layout style paint;
+  transform: translateZ(0);
 }
 
 /* 优化排序过渡效果 */
 .grid-fade-move {
-  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: transform;
 }
 
 .grid-item {
   position: relative;
   box-sizing: border-box;
-  transition: all 0.15s cubic-bezier(0.2, 0, 0.2, 1);
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: transform, opacity, box-shadow;
   overflow: hidden;
   z-index: 1;
+  /* 性能优化 */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 
 .grid-box {
@@ -1252,7 +1498,7 @@ button {
 .hover-target {
   z-index: 50;
   transform: scale(1.05);
-  transition: all 0.1s ease-out;
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   position: relative;
 }
 
@@ -1270,6 +1516,18 @@ button {
 }
 
 /* 拖拽克隆元素样式（现在通过JavaScript动态应用） */
+.drag-clone-dynamic {
+  position: absolute;
+  z-index: 9999;
+  pointer-events: none;
+  user-select: none;
+  box-sizing: border-box;
+  transform-origin: center center;
+  /* 确保拖拽克隆元素不会超出容器边界 */
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
 
 .flexBox {
   display: flex;
@@ -1314,4 +1572,6 @@ button {
     transform: rotateZ(2deg);
   }
 }
+
+
 </style>