@dolphinweex/weex-harmony 0.1.44 → 0.1.45

package/package.json

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

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

@@ -113,37 +113,7 @@
       </div>
     </div>
 
-    <!-- 拖拽克隆元素 -->
-    <div v-if="isDragClone" class="drag-clone" :style="dragCloneStyle">
-      <div
-        class="grid-box"
-        :style="applyNormalAttribute(data.list[draggingIndex].itemView)"
-      >
-        <div class="flexBox">
-          <img
-            :src="data.list[draggingIndex].iconImage.url"
-            :style="applyNormalAttribute(data.list[draggingIndex].iconImage)"
-          />
-          <div @click.stop.prevent>
-            <img
-              class="isSelected"
-              :src="
-                data.list[draggingIndex].itemView.isSelected
-                  ? data.list[draggingIndex].selectIcon.selectedUrl
-                  : data.list[draggingIndex].selectIcon.url
-              "
-              :style="applyNormalAttribute(data.list[draggingIndex].selectIcon)"
-            />
-          </div>
-        </div>
-        <div
-          class="itemText"
-          :style="[applyNormalAttribute(data.list[draggingIndex].text)]"
-        >
-          {{ data.list[draggingIndex].text.text }}
-        </div>
-      </div>
-    </div>
+    <!-- 拖拽克隆元素将通过JavaScript动态创建并挂载到body --> 
   </div>
 </template>
 
@@ -193,6 +163,7 @@ export default {
       fixedItemHeight: 0,
       animationFrameId: null,
       isProcessingData: false,
+      dragCloneElement: null, // 拖拽克隆DOM元素
     };
   },
   computed: {
@@ -209,33 +180,181 @@ export default {
         marginRight: this.data.layoutConfig.marginEnd * scla,
       };
     },
-    // 拖拽克隆元素的样式
-    dragCloneStyle() {
-      if (this.draggingIndex === null) {
-        return { display: 'none' };
+  },
+  methods: {
+    // 获取元素在页面中的绝对位置（考虑所有transform影响）
+    getAbsolutePosition(element) {
+      let x = 0;
+      let y = 0;
+      let currentElement = element;
+      
+      while (currentElement) {
+        const rect = currentElement.getBoundingClientRect();
+        if (currentElement === element) {
+          x += rect.left;
+          y += rect.top;
+        }
+        currentElement = currentElement.offsetParent;
       }
-      const item = this.data.list[this.draggingIndex];
-      let itemView = {};
-      if (item) {
-        itemView = this.applyNormalAttribute(item.itemView);
+      
+      // 加上页面滚动偏移
+      x += window.pageXOffset;
+      y += window.pageYOffset;
+      
+      return { x, y };
+    },
+
+    // 创建拖拽克隆元素
+    createDragClone(index) {
+      if (this.dragCloneElement) {
+        this.destroyDragClone();
       }
 
-      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,
+      const item = this.data.list[index];
+      if (!item) return;
+
+      // 创建拖拽容器
+      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);
+      
+      // 将样式对象转换为CSS字符串
+      const stylesToString = (styleObj) => {
+        return Object.entries(styleObj)
+          .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+          .join('; ');
       };
+
+                           // 确保内部grid-box也使用固定尺寸（使用不带缩放的样式方法）
+        const gridBoxStyle = {
+          ...this.applyDragCloneAttribute(item.itemView),
+          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);
+      
+      return this.dragCloneElement;
+    },
+
+    // 销毁拖拽克隆元素
+    destroyDragClone() {
+      if (this.dragCloneElement) {
+        if (this.dragCloneElement.parentNode) {
+          this.dragCloneElement.parentNode.removeChild(this.dragCloneElement);
+        }
+        this.dragCloneElement = null;
+      }
+    },
+
+    // 更新拖拽克隆元素位置
+    updateDragClonePosition() {
+      if (!this.dragCloneElement) return;
+      
+      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;
     },
-  },
-  methods: {
     updateListItem(data) {
       console.log('updateListItem收到数据:', JSON.stringify(data));
       const id = data.itemView.id;
@@ -413,7 +532,7 @@ export default {
       if (this.isTouchDragging || this.longPressTimer === null && this.data.isEditing) {
         return;
       }
-      console.log('itemViewClick');
+
       if (this.data.isEditing) {
         if (item.selectIcon.visibility) {
           item.itemView.isSelected = !item.itemView.isSelected;
@@ -686,7 +805,7 @@ export default {
     activateDragMode(index) {
       console.log('长按触发，进入编辑模式');
       // 进入编辑模式
-      
+
       if (this.data.isEditing) {
         // 设置当前拖拽索引
         this.draggingIndex = index;
@@ -701,23 +820,29 @@ export default {
         // 获取当前元素位置用于计算偏移
         const element = document.querySelectorAll('.grid-item')[index];
         if (element) {
+          // 使用getBoundingClientRect获取视口中的位置
           const rect = element.getBoundingClientRect();
-          const containerRect = this.$el.getBoundingClientRect();
           
-          // 计算相对于父容器的偏移
+          // 计算触摸点相对于元素左上角的偏移
           this.touchOffsetX = this.touchStartX - rect.left;
           this.touchOffsetY = this.touchStartY - rect.top;
 
-          // 设置克隆元素的初始位置（相对于父容器）
-          this.dragCloneX = rect.left - containerRect.left;
-          this.dragCloneY = rect.top - containerRect.top;
+          // 创建拖拽克隆元素
+          this.createDragClone(index);
+
+          // 设置克隆元素的初始位置（直接使用视口坐标加滚动偏移）
+          this.dragCloneX = rect.left + window.pageXOffset;
+          this.dragCloneY = rect.top + window.pageYOffset;
           this.isDragClone = true;
 
+          // 立即更新位置
+          this.updateDragClonePosition();
+
           requestAnimationFrame(() => {
-            const relativeX = this.touchStartX - containerRect.left - this.touchOffsetX;
-            const relativeY = this.touchStartY - containerRect.top - this.touchOffsetY;
-            this.dragCloneX = relativeX;
-            this.dragCloneY = relativeY;
+            // 使用触摸点减去偏移来计算正确位置
+            this.dragCloneX = this.touchStartX - this.touchOffsetX + window.pageXOffset;
+            this.dragCloneY = this.touchStartY - this.touchOffsetY + window.pageYOffset;
+            this.updateDragClonePosition();
           });
 
           console.log('拖拽克隆已创建');
@@ -745,6 +870,7 @@ export default {
     onTouchMove(e) {
       if (!this.isTouchDragging) return;
 
+      // 确保在拖拽模式下阻止所有事件传播
       if (this.isTouchDragging && this.data.isEditing) {
         if (e.oriEvent) {
           e.oriEvent.preventDefault();
@@ -754,16 +880,17 @@ export default {
       }
 
       const touch = e.changedTouches[0];
-      const containerRect = this.$el.getBoundingClientRect();
 
-      // 更新目标位置（相对于父容器）
-      this.targetTouchX = touch.pageX - containerRect.left;
-      this.targetTouchY = touch.pageY - containerRect.top;
+      // 更新目标位置而非直接设置
+      this.targetTouchX = touch.pageX;
+      this.targetTouchY = touch.pageY;
 
+      // 启动平滑动画（如果尚未启动）
       if (!this.animationFrameId) {
         this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
       }
 
+      // 简化的交换逻辑
       this.handleSwapLogic(touch.pageX, touch.pageY);
     },
 
@@ -822,15 +949,25 @@ export default {
     // 平滑更新拖拽位置的方法
     updateDragPosition() {
       const easing = 0.6;
-      const targetX = this.targetTouchX - this.touchOffsetX;
-      const targetY = this.targetTouchY - this.touchOffsetY;
-
+      // 计算目标位置（考虑页面滚动位置）
+      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;
-
+      
+      // 当接近目标位置时直接设置为目标位置
+      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);
     },
 
@@ -852,6 +989,9 @@ export default {
         this.isDragClone = false;
         this.hoverIndex = null;
 
+        // 销毁拖拽克隆元素
+        this.destroyDragClone();
+
         // 使用延时来重置拖拽索引，避免与点击事件冲突
         setTimeout(() => {
           this.draggingIndex = null;
@@ -873,6 +1013,9 @@ export default {
       this.isDragClone = false;
       this.hoverIndex = null;
 
+      // 销毁拖拽克隆元素
+      this.destroyDragClone();
+
       // 立即清除拖拽索引，避免状态卡住
       this.draggingIndex = null;
       this.isAnimating = false;
@@ -1008,6 +1151,8 @@ export default {
       cancelAnimationFrame(this.animationFrameId);
       this.animationFrameId = null;
     }
+    // 清理拖拽克隆元素
+    this.destroyDragClone();
   },
   created() {
     // 初始化处理后的数据列表
@@ -1029,12 +1174,11 @@ button {
 .outer-container {
   width: 100%;
   position: relative;
-  transform-style: preserve-3d;
+  z-index: 1;
 }
 
 .items-container {
   width: 100%;
-  position: relative;
 }
 
 .grid-items-wrapper {
@@ -1061,6 +1205,7 @@ button {
   transition: all 0.15s cubic-bezier(0.2, 0, 0.2, 1);
   will-change: transform, opacity, box-shadow;
   overflow: hidden;
+  z-index: 1;
 }
 
 .grid-box {
@@ -1120,16 +1265,17 @@ button {
 
 /* 悬停目标的样式 */
 .hover-target {
-  z-index: 5;
+  z-index: 50;
   transform: scale(1.05);
   transition: all 0.1s ease-out;
+  position: relative;
 }
 
 /* 正在拖拽的元素样式 */
 .being-dragged {
-  z-index: 10;
+  z-index: 100;
   opacity: 0.3;
-  /* 降低原位置的不透明度 */
+  position: relative;
 }
 
 /* 被拖拽时原位置隐藏 */
@@ -1138,21 +1284,7 @@ button {
   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;
-}
+/* 拖拽克隆元素样式（现在通过JavaScript动态应用） */
 
 .flexBox {
   display: flex;