@dolphinweex/weex-harmony 0.1.59 → 0.1.61

package/package.json

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

package/src/components/midea-common-weex-view.vue

@@ -4,23 +4,35 @@
     <iframe
       class="common-view-iframe"
       :id="embedId"
-      v-if="url.length > 0"
+      v-if="url.length > 0 && pluginType != 'old-h5'"
       :src="url"
       :style="{ backgroundColor: backgroundColor, height: height }"
       ref="iframe"
       @load="onPageFinish"
     ></iframe>
+
+    <BaseSameLayer
+      class="common-view-iframe"
+      v-if="pluginType == 'old-h5'"
+      :hosSameLayerArgs="hosSameLayerArgs"
+      embedType="native/midea-common-weex-view"
+      :defaultWidth="300"
+      :defaultHeight="300"
+    ></BaseSameLayer>
     <!-- <image v-if="progressText.length > 0" /> -->
   </div>
 </template>
 
 <script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
 const weexModule = weex.requireModule("weexModule");
 
 export default {
   data() {
     return {
       url: "",
+      pluginType: "weex",
       backgroundColor: "transparent",
       progressText: "",
       embedId: `embedId_iframe_${
@@ -29,6 +41,9 @@ export default {
       height: "100%",
     };
   },
+  components: {
+    BaseSameLayer,
+  },
   name: "MideaCommonWeexView",
   props: {
     hosUniqueProps: {
@@ -50,11 +65,6 @@ export default {
       type: Object,
     },
   },
-  // watch:{
-  //   backgroundColor(oldColor, newColor){
-  //     this.$refs["iframe"].contentWindow.document.style.backgroundColor = newColor
-  //   }
-  // },
   created() {
     weexModule.callNative(
       `webview.webHandle`,
@@ -69,12 +79,28 @@ export default {
         if (args.progressText) {
           this.progressText = args.progressText;
         } else if (args.url) {
-          this.url = args.url;
+          this.url =  args.url;
           this.backgroundColor = args.pageBackgroundColor;
+          this.pluginType = args.pluginType
         }
       }
     );
   },
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        width: this.$el.clientWidth,
+        height: this.$el.clientHeight,
+        data: {
+          router: this.router,
+          src: this.url,
+          backgroundColor: this.backgroundColor,
+          pluginData: this.pluginData,
+        }
+      };
+    },
+  },
   mounted() {
     // this.$refs["iframe"].addEventListener('load', this.onPageFinish);
     const iframeEl = this.$refs.iframe;

package/src/components/midea-ipc-drag-list-view.vue

@@ -0,0 +1,553 @@
+<template>
+  <div>
+   <div
+     class="ipc-drag-container"
+     :class="{ editing: isEditing }"
+     :style="{
+       marginTop: (scalePx(data.topMargin , 0)) + 'px'
+     }"
+     ref="containerRef"
+   >
+     <transition-group
+       name="grid-fade"
+       tag="div"
+       class="grid"
+       :style="{
+         gridTemplateColumns: 'repeat(' + (data.spanCount || 2) + ', 1fr)',
+         columnGap: ( scalePx(data.horizontalSpanPadding, 8)) + 'px',
+         rowGap: (scalePx(data.verticalSpanPadding , 12)) + 'px'
+       }"
+     >
+       <div
+         v-for="(item, index) in data.list"
+         :key="item.id"
+         class="grid-item"
+         :class="{
+           'being-dragged': draggingIndex === index,
+           hidden: isDragClone && draggingIndex === index,
+           disabled: item.disabled === true
+         }"
+         :data-index="index"
+         @touchstart="(e) => onTouchStart(e, index)"
+         @touchmove="onTouchMove"
+         @touchend="onTouchEnd"
+         @touchcancel="onTouchEnd"
+         @click.stop.prevent="() => onItemClick(item, index)"
+       >
+         <div class="box" :class="{ shaking: isEditing }">
+           <div class="thumb-wrap">
+             <img class="thumb" :src="item.imageSrc" alt="" />
+             <button class="delete-btn" 
+              :style="{ fontSize : data.deleteBtnSize && data.deleteBtnSize * 4  || 16 * 4 }"
+             @click.stop="onDelete(index, item)">×</button>
+           </div>
+          <div
+            class="label-row"
+            :style="{
+              marginTop: scalePx(data.labelTextMarginTop, 8) + 'px'
+            }"
+          >
+            <div
+              class="label"
+              :style="{
+                fontSize: scalePx(data.labelTextSize, 12) + 'px',
+                color: data.labelTextColor || '#666'
+              }"
+            >
+              {{ item.label }}
+            </div>
+            <button
+              class="edit-btn"
+              @click.stop.prevent="() => onEditClick(item, index)"
+            >
+              <img
+                class="edit-icon"
+                :src="'data:image/png;base64,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'"
+                :style="{ width: scalePx(data.editBtnSize, 24) + 'px', height: scalePx(data.editBtnSize, 24) + 'px' }"
+                alt="编辑"
+              />
+            </button>
+          </div>
+         </div>
+       </div>
+     </transition-group>
+   </div>
+  
+  <!-- 编辑名称弹窗 -->
+  <div v-if="showEditDialog" class="modal-mask">
+    <div class="modal">
+      <div class="modal-title">当前视角名称</div>
+      <input
+        class="modal-input"
+        v-model="editInputValue"
+        :placeholder="data.inputPlaceholder || ''"
+      />
+        <div class="modal-actions">
+          <text class="btn cancel" @click="onEditCancel">取消</text>
+          <div class="btn-divider"></div>
+          <text class="btn confirm" @click="onEditConfirm">确认</text>
+        </div>
+    </div>
+  </div>
+  </div>
+ </template>
+ 
+ <script>
+ export default {
+   name: 'midea-ipc-drag-list-view',
+   props: {
+     data: {
+       type: Object,
+       required: true
+     }
+   },
+   data() {
+     return {
+       // 独立的编辑态
+       isEditing: false,
+       // 手势与状态
+       longPressTimer: null,
+       longPressDuration: 350,
+       isTouchDragging: false,
+       draggingIndex: null,
+       // 拖拽克隆
+       isDragClone: false,
+       dragCloneEl: null,
+       dragCloneX: 0,
+       dragCloneY: 0,
+       targetTouchX: 0,
+       targetTouchY: 0,
+       touchStartX: 0,
+       touchStartY: 0,
+       // 移动阈值与滚动判定（对齐 drag-list-view 逻辑）
+       isScrolling: false,
+       scrollThreshold: 5,
+       longPressMoveThreshold: 8,
+       lastTouch: null,
+       touchOffsetX: 0,
+       touchOffsetY: 0,
+       // 布局缓存
+       containerRect: null,
+       itemWidth: 0,
+       itemHeight: 0,
+       // 动画帧
+       rafId: null,
+       // 交换频率控制
+      lastSwapTime: 0,
+      // 编辑弹窗
+      showEditDialog: false,
+      editInputValue: '',
+      editIndex: null,
+       scale: weex.config.env.scale
+     };
+   },
+   mounted() {
+     this.$nextTick(() => {
+       this.measureItemSize();
+     });
+   },
+   methods: {
+     scalePx(value , defaultVal){
+       return value ? value /this.scale : defaultVal /this.scale
+     },
+     measureItemSize() {
+       const gridItem = this.$el.querySelector('.grid-item');
+       if (gridItem) {
+         const rect = gridItem.getBoundingClientRect();
+         this.itemWidth = rect.width;
+         this.itemHeight = rect.height;
+       }
+       const container = this.$refs.containerRef;
+       if (container) {
+         this.containerRect = container.getBoundingClientRect();
+       }
+     },
+ 
+     onItemClick(item, index) {
+       if (this.isTouchDragging || this.longPressTimer || this.secondLongPressTimer) return;
+       this.$emit('onClickEvent', { item, index });
+     },
+
+    onEditClick(item, index) {
+      // 点击编辑按钮：弹出编辑名称对话框
+      this.editIndex = index;
+      this.editInputValue = item && item.label || '';
+      this.showEditDialog = true;
+    },
+    onEditCancel() {
+      this.showEditDialog = false;
+      this.editInputValue = '';
+      this.editIndex = null;
+    },
+    onEditConfirm() {
+      if (this.editIndex !== null && this.data.list && this.data.list[this.editIndex]) {
+        const newLabel = (this.editInputValue || '').trim();
+        // 更新 label
+        this.$set(this.data.list[this.editIndex], 'label', newLabel);
+        // 通知外部（可选）
+        this.$emit('onLabelEdited', { index: this.editIndex, label: newLabel, item: this.data.list[this.editIndex] });
+      }
+      this.showEditDialog = false;
+      this.editInputValue = '';
+      this.editIndex = null;
+    },
+ 
+     onDelete(item, index) {
+       this.$emit('onDeleteEvent', { item, index });
+       // 默认本地也删除
+       this.data.list.splice(index, 1);
+       this.$nextTick(this.measureItemSize);
+     },
+ 
+     onTouchStart(e, index) {
+       if (!e.changedTouches || e.changedTouches.length === 0) return;
+       this.measureItemSize();
+       const touch = e.changedTouches[0];
+       this.touchStartX = touch.pageX;
+       this.touchStartY = touch.pageY;
+       this.lastTouch = touch;
+       this.isScrolling = false;
+ 
+       // 与 drag-list-view 一致：统一使用一次长按回调
+       this.clearTimers();
+       this.longPressTimer = setTimeout(() => {
+         this.longPressTimer = null;
+         this.activateDragMode(index);
+       }, this.longPressDuration);
+     },
+ 
+     // 统一长按回调：未编辑 -> 进入抖动；已编辑 -> 进入拖拽
+     activateDragMode(index) {
+       if (this.isEditing) {
+         // 已在编辑态：直接进入拖拽
+         const touch = this.lastTouch;
+         if (!touch) return;
+         this.activateDrag(index, touch);
+         return;
+       }
+       // 未编辑态：进入抖动编辑（不开始拖拽）
+       this.isEditing = true;
+       // 如需通知外部可在此 emit 事件
+     },
+ 
+     activateDrag(index, touch) {
+       this.draggingIndex = index;
+       this.isTouchDragging = true;
+ 
+       const gridItems = this.$el.querySelectorAll('.grid-item');
+       const el = gridItems[index];
+       if (!el) return;
+       const rect = el.getBoundingClientRect();
+ 
+       // 计算触点相对元素左上角偏移
+       this.touchOffsetX = touch.pageX - rect.left;
+       this.touchOffsetY = touch.pageY - rect.top;
+ 
+       // 创建拖拽克隆
+       this.createDragClone(el, rect);
+ 
+       // 初始位置（相对容器）
+       this.containerRect = this.$refs.containerRef.getBoundingClientRect();
+       this.dragCloneX = rect.left - this.containerRect.left;
+       this.dragCloneY = rect.top - this.containerRect.top;
+       this.updateDragCloneStyle();
+     },
+ 
+     createDragClone(sourceEl, rect) {
+       this.destroyDragClone();
+       const clone = document.createElement('div');
+       clone.className = 'drag-clone';
+       clone.style.width = rect.width + 'px';
+       clone.style.height = rect.height + 'px';
+       clone.style.position = 'absolute';
+       clone.style.zIndex = '9999';
+       clone.style.pointerEvents = 'none';
+       clone.style.left = '0';
+       clone.style.top = '0';
+       clone.style.willChange = 'transform';
+       clone.style.transition = 'none';
+       clone.innerHTML = sourceEl.querySelector('.box').outerHTML;
+       this.$refs.containerRef.appendChild(clone);
+       this.dragCloneEl = clone;
+       this.isDragClone = true;
+     },
+ 
+     destroyDragClone() {
+       if (this.dragCloneEl && this.dragCloneEl.parentNode) {
+         this.dragCloneEl.parentNode.removeChild(this.dragCloneEl);
+       }
+       this.dragCloneEl = null;
+       this.isDragClone = false;
+     },
+ 
+     onTouchMove(e) {
+       // 长按判定阶段：控制移动阈值与滚动
+       if (!this.isTouchDragging && this.longPressTimer) {
+         const touch = e.changedTouches && e.changedTouches[0];
+         if (touch) {
+           const dx = Math.abs(touch.pageX - this.touchStartX);
+           const dy = Math.abs(touch.pageY - this.touchStartY);
+           // 垂直滚动判定优先
+           if (dy > this.scrollThreshold * 3) {
+             this.isScrolling = true;
+             clearTimeout(this.longPressTimer);
+             this.longPressTimer = null;
+             return;
+           }
+           // 超过阈值则取消长按
+           if (dx > this.longPressMoveThreshold || dy > this.longPressMoveThreshold) {
+             clearTimeout(this.longPressTimer);
+             this.longPressTimer = null;
+             return;
+           }
+           // 保持长按：阻止默认和冒泡，避免滚动打断
+           if (e.preventDefault) e.preventDefault();
+           if (e.stopPropagation) e.stopPropagation();
+         }
+         return;
+       }
+ 
+       if (!this.isTouchDragging) return;
+       const touch = e.changedTouches && e.changedTouches[0];
+       if (!touch) return;
+ 
+       // 目标位置（相对容器）
+       const targetX = touch.pageX - this.touchOffsetX - this.containerRect.left;
+       const targetY = touch.pageY - this.touchOffsetY - this.containerRect.top;
+ 
+       // 约束在容器内部
+       const maxX = this.containerRect.width - this.itemWidth;
+       const maxY = this.containerRect.height - this.itemHeight;
+       this.dragCloneX = Math.max(0, Math.min(targetX, maxX));
+       this.dragCloneY = Math.max(0, Math.min(targetY, maxY));
+       this.updateDragCloneStyle();
+ 
+       // 控制交换频率
+       const now = Date.now();
+       if (now - this.lastSwapTime > 120) {
+         this.lastSwapTime = now;
+         this.maybeSwapByPosition(touch.pageX, touch.pageY);
+       }
+     },
+ 
+     updateDragCloneStyle() {
+       if (!this.dragCloneEl) return;
+       this.dragCloneEl.style.transform = `translate(${this.dragCloneX}px, ${this.dragCloneY}px)`;
+     },
+ 
+     onTouchEnd() {
+       this.clearTimers();
+       if (this.isTouchDragging) {
+         const idx = this.draggingIndex;
+         this.isTouchDragging = false;
+         this.draggingIndex = null;
+         this.destroyDragClone();
+         this.$emit('onDragEndEvent', { list: this.data.list, index: idx });
+       }
+     },
+ 
+     clearTimers() {
+       if (this.longPressTimer) {
+         clearTimeout(this.longPressTimer);
+         this.longPressTimer = null;
+       }
+       // 移除二次长按定时器逻辑，统一在 activateDragMode 处理
+     },
+ 
+     maybeSwapByPosition(pageX, pageY) {
+       const gridItems = Array.from(this.$el.querySelectorAll('.grid-item'));
+       let targetIndex = null;
+       for (let i = 0; i < gridItems.length; i++) {
+         if (i === this.draggingIndex) continue;
+         const rect = gridItems[i].getBoundingClientRect();
+         const centerX = (rect.left + rect.right) / 2;
+         const centerY = (rect.top + rect.bottom) / 2;
+         const halfW = rect.width * 0.35;
+         const halfH = rect.height * 0.35;
+         if (
+           pageX >= centerX - halfW && pageX <= centerX + halfW &&
+           pageY >= centerY - halfH && pageY <= centerY + halfH
+         ) {
+           targetIndex = i;
+           break;
+         }
+       }
+ 
+       if (targetIndex !== null && targetIndex !== this.draggingIndex) {
+         const a = this.draggingIndex;
+         const b = targetIndex;
+         const tmp = this.data.list[a];
+         this.$set(this.data.list, a, this.data.list[b]);
+         this.$set(this.data.list, b, tmp);
+         this.draggingIndex = b;
+       }
+    },
+    getListData(callback) {
+      const list = Array.isArray(this.data && this.data.list) ? this.data.list : [];
+      const arr = list.map((it) => ({
+        id: String((it && (it.id != null ? it.id : '')) || ''),
+        label: String((it && (it.label != null ? it.label : '')) || ''),
+        imageSrc: (it && it.imageSrc) || ''
+      }));
+      const payload = { listData: arr, list: arr };
+      if (typeof callback === 'function') {
+        try { callback(payload); } catch (e) { /* ignore */ }
+      }
+      return payload;
+    }
+   }
+ };
+ </script>
+ 
+ <style scoped>
+ .ipc-drag-container {
+   position: relative;
+   background:#fff;
+   padding:20px
+ }
+ .grid {
+   display: grid;
+   width: 100%;
+ }
+ .grid-item {
+   position: relative;
+   box-sizing: border-box;
+   transition: transform 0.25s ease;
+ }
+ .grid-item.hidden {
+   opacity: 0 !important;
+   visibility: hidden;
+ }
+ .grid-item.being-dragged {
+   opacity: 0.2;
+ }
+ .box {
+   position: relative;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+ }
+ .box.shaking {
+   animation: shake 0.6s infinite;
+   transform-origin: center center;
+ }
+ @keyframes shake {
+   0% { transform: rotateZ(1.8deg); }
+   25% { transform: rotateZ(-1.8deg); }
+   50% { transform: rotateZ(1.8deg); }
+   75% { transform: rotateZ(-1.8deg); }
+   100% { transform: rotateZ(1.8deg); }
+ }
+ .thumb-wrap {
+   position: relative;
+   width: 100%;
+   /* 统一比例，按宽度自适应，可按需调整为固定高 */
+   aspect-ratio: 16 / 9;
+   background: #0000000a;
+   overflow: hidden;
+   border-radius: 16px;
+ }
+ .thumb {
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+ }
+ .delete-btn {
+   position: absolute;
+   top: 0;
+   right: 0;
+   border: none;
+   color: #fff;
+   font-size: 70px;
+   background:transparent;
+   font-weight:300
+ }
+ .label {
+   width: 100%;
+   text-align: center;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+ }
+.label-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.edit-btn {
+  margin-left: auto;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  background: #f5f5f5;
+  color: #333;
+}
+ .drag-clone {
+   box-sizing: border-box;
+   pointer-events: none;
+   user-select: none;
+ }
+
+/* 简易弹窗样式 */
+.modal-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+.modal {
+  width: 60vw;
+  max-width: 60vw;
+  background: #fff;
+  border-radius: 24px;
+  padding: 16px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
+}
+.modal-title {
+  font-size: 28px;
+  font-weight: 300;
+  color: #222;
+  margin: 24px 0 24px 0px;
+  text-align: center;
+}
+.modal-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 2px solid #e8e8e8;
+  border-radius: 8px;
+  padding: 20px 22px;
+  font-size: 24px;
+  outline: none;
+}
+.modal-input:focus {
+  border-color: #1677ff;
+}
+.modal-actions {
+  margin-top: 14px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+}
+.btn {
+  padding: 12px 24px;
+  font-size: 30px;
+  color:#46a2df
+}
+.btn-divider {
+  width: 1px;
+  height: 32px;
+  background: #eee;
+}
+ </style>
+ 
+ 
+ 

package/src/index.js

@@ -215,6 +215,11 @@ const componentMap = [
     componentAddress: 'midea-build-loading-view.vue',
     isInPlugin: false
   },
+  {
+    componentName: 'mideaIpcDragListView',
+    componentAddress: 'midea-ipc-drag-list-view.vue',
+    isInPlugin: false
+  },
 ]
 
 module.exports = componentMap

package/src/transform-loader.js

@@ -230,14 +230,18 @@ function createComputedProperty(vBindValue, computedName) {
                 )
               ]),
             ),
-            t.returnStatement( // 返回浅拷贝新对象，确保引用变化以触发依赖更新
-              t.callExpression(
-                t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-                [
-                  t.objectExpression([]),
-                  t.memberExpression(t.thisExpression(), t.identifier(vBindValue))
-                ]
-              )
+            t.returnStatement( // 返回展开后的浅拷贝，确保引用变化以触发依赖更新
+              t.objectExpression([
+                t.spreadElement(
+                  t.callExpression(
+                    t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+                    [
+                      t.objectExpression([]),
+                      t.memberExpression(t.thisExpression(), t.identifier(vBindValue))
+                    ]
+                  )
+                )
+              ])
             )
           ])
       )