@weitutech/by-components 1.1.153 → 1.1.155

package/lib/by-components.umd.js

@@ -95211,8 +95211,8 @@ var ByPopoverSelector_component = normalizeComponent(
 )
 
 /* harmony default export */ var ByPopoverSelector = (ByPopoverSelector_component.exports);
-;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"444f6cde-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/grid-layout/ByGridLayout.vue?vue&type=template&id=7a853977
-var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"444f6cde-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/grid-layout/ByGridLayout.vue?vue&type=template&id=7e47dec8
+var ByGridLayoutvue_type_template_id_7e47dec8_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -95248,7 +95248,7 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
     }, 'grid-item', renderItem.layoutProps, false), [_c('div', {
       staticClass: "by-grid-layout__item-wrapper"
     }, [_vm.toggleable && _vm.isEditingActive ? _c('i', {
-      staticClass: "by-grid-layout__delete-btn el-icon-close",
+      staticClass: "by-grid-layout__delete-btn el-icon-delete",
       on: {
         "click": function ($event) {
           $event.stopPropagation();
@@ -95267,8 +95267,100 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
       "layout": renderItem.layout,
       "index": renderItem.index
     })], 2)]);
-  }) : _vm._t("default")], 2), _vm.toggleable ? _c('div', {
+  }) : _vm._t("default")], 2), _vm.hasItems && !_vm.hasRenderedItems ? _c('div', {
+    staticClass: "by-grid-layout__empty-state"
+  }, [_c('div', {
+    staticClass: "by-grid-layout__empty-illustration"
+  }, [_c('svg', {
+    attrs: {
+      "viewBox": "0 0 160 120",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }
+  }, [_c('defs', [_c('linearGradient', {
+    attrs: {
+      "id": "by-grid-layout-empty-gradient",
+      "x1": "0%",
+      "y1": "0%",
+      "x2": "100%",
+      "y2": "100%"
+    }
+  }, [_c('stop', {
+    attrs: {
+      "offset": "0%",
+      "stop-color": "#e6f7ff"
+    }
+  }), _c('stop', {
+    attrs: {
+      "offset": "100%",
+      "stop-color": "#f9fbff"
+    }
+  })], 1)], 1), _c('rect', {
+    attrs: {
+      "x": "12",
+      "y": "24",
+      "width": "136",
+      "height": "72",
+      "rx": "12",
+      "fill": "url(#by-grid-layout-empty-gradient)"
+    }
+  }), _c('rect', {
+    attrs: {
+      "x": "32",
+      "y": "42",
+      "width": "32",
+      "height": "22",
+      "rx": "4",
+      "fill": "#c6e2ff",
+      "opacity": "0.6"
+    }
+  }), _c('rect', {
+    attrs: {
+      "x": "72",
+      "y": "42",
+      "width": "56",
+      "height": "16",
+      "rx": "4",
+      "fill": "#d9ecff",
+      "opacity": "0.8"
+    }
+  }), _c('rect', {
+    attrs: {
+      "x": "32",
+      "y": "70",
+      "width": "56",
+      "height": "16",
+      "rx": "4",
+      "fill": "#d9ecff",
+      "opacity": "0.8"
+    }
+  }), _c('rect', {
+    attrs: {
+      "x": "92",
+      "y": "70",
+      "width": "36",
+      "height": "16",
+      "rx": "4",
+      "fill": "#ecf5ff"
+    }
+  }), _c('circle', {
+    attrs: {
+      "cx": "128",
+      "cy": "34",
+      "r": "6",
+      "fill": "#91d5ff"
+    }
+  })])]), _c('div', {
+    staticClass: "by-grid-layout__empty-title"
+  }, [_vm._v("暂无可展示的卡片")]), _c('div', {
+    staticClass: "by-grid-layout__empty-desc"
+  }, [_vm._v(_vm._s(_vm.isEditing ? '点击上方添加卡片或点击右侧恢复默认布局' : '点击右侧自定义按钮进行配置'))])]) : _vm._e(), _vm.toggleable ? _c('div', {
     staticClass: "by-grid-layout__controls"
+  }, [_c('el-tooltip', {
+    attrs: {
+      "content": _vm.tooltipContent,
+      "placement": "left",
+      "disabled": !_vm.isEditingActive || !_vm.showTooltip
+    }
   }, [_c('div', {
     staticClass: "by-grid-layout__mode-toggle",
     class: {
@@ -95277,14 +95369,19 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
     on: {
       "click": _vm.handleModeButtonClick
     }
-  }, [_c('span', [_vm._v(_vm._s(_vm.modeButtonText))])]), _vm.isEditingActive ? _c('div', {
+  }, [_c('span', [_vm._v(_vm._s(_vm.modeButtonText))])])]), _vm.isEditingActive ? _c('div', {
     staticClass: "by-grid-layout__reset-toggle",
     on: {
       "click": _vm.handleReset
     }
-  }, [_c('span', [_vm._v("恢复默认")])]) : _vm._e()]) : _vm._e()], 1);
+  }, [_c('span', [_vm._v("恢复默认")])]) : _vm._e(), _vm.isEditingActive ? _c('div', {
+    staticClass: "by-grid-layout__cancel-toggle",
+    on: {
+      "click": _vm.handleCancel
+    }
+  }, [_c('span', [_vm._v("取消")])]) : _vm._e()], 1) : _vm._e()], 1);
 };
-var ByGridLayoutvue_type_template_id_7a853977_staticRenderFns = [];
+var ByGridLayoutvue_type_template_id_7e47dec8_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.reduce.js
 var es_iterator_reduce = __webpack_require__(8237);
@@ -95297,6 +95394,8 @@ var vue_grid_layout_common = __webpack_require__(2498);
 
 
 
+
+
 const OPTIONAL_LAYOUT_KEYS = ['minH', 'maxH', 'minW', 'maxW', 'isDraggable', 'isResizable', 'static'];
 const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
 
@@ -95356,6 +95455,16 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
     toggleable: {
       type: Boolean,
       default: true
+    },
+    /** 是否显示提示 */
+    showTooltip: {
+      type: Boolean,
+      default: true
+    },
+    /** 提示内容 */
+    tooltipContent: {
+      type: String,
+      default: '编辑排版保存后生效~'
     }
   },
   data() {
@@ -95365,7 +95474,9 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
       // 防止 items.sync 与 layout-updated 相互触发造成循环
       isProcessingLayoutUpdate: false,
       isProcessingItemsSync: false,
-      currentMode: 'view'
+      currentMode: 'view',
+      // 记录每个 item 首次布局时的初始尺寸（w/h），用于恢复时还原原始大小
+      initialItemMetrics: {}
     };
   },
   computed: {
@@ -95393,6 +95504,9 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
     hasItems() {
       return Array.isArray(this.internalItems) && this.internalItems.length > 0;
     },
+    hasRenderedItems() {
+      return this.renderItems.length > 0;
+    },
     resolvedGridLayoutAttrs() {
       const attrs = {
         ...this.$attrs
@@ -95585,6 +95699,10 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
         }))
       });
     },
+    handleCancel() {
+      this.exitEditMode();
+      this.$emit('cancel');
+    },
     emitModeChange() {
       this.$emit('mode-change', this.currentMode);
     },
@@ -95653,6 +95771,14 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
         index
       }) => {
         const layoutItem = this.createLayoutItem(item, index, autoContext);
+        const layoutId = layoutItem.i;
+        if (layoutId && !this.initialItemMetrics[layoutId]) {
+          // 仅首次记录，后续编辑（拖拽、缩放）不会覆盖原始尺寸
+          this.initialItemMetrics[layoutId] = {
+            w: layoutItem.w,
+            h: layoutItem.h
+          };
+        }
         cloned[index] = {
           ...cloned[index],
           x: layoutItem.x,
@@ -95817,17 +95943,33 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
       if (!this.isEditingActive) return;
       // 恢复隐藏项：设置 hidden: false
       const id = String(hiddenItem.i);
-      const updatedItems = this.internalItems.map((item, index) => {
+      const metrics = this.initialItemMetrics[id] || {};
+      let restored = null;
+      const remaining = this.internalItems.reduce((acc, item, index) => {
         const itemId = String(this.resolveItemId(item, index));
-        if (itemId !== id) return item;
+        if (itemId !== id) {
+          acc.push(item);
+          return acc;
+        }
         const next = {
           ...item,
           hidden: false
         };
-        if (item.originalX !== undefined) next.x = item.originalX;
-        if (item.originalY !== undefined) next.y = item.originalY;
-        return next;
-      });
+        delete next.originalX;
+        delete next.originalY;
+        // 优先使用首次记录的原始尺寸；否则退回默认尺寸
+        const width = metrics.w !== undefined ? metrics.w : next.w !== undefined ? next.w : this.defaultItemSize.w || 1;
+        const height = metrics.h !== undefined ? metrics.h : next.h !== undefined ? next.h : this.defaultItemSize.h || 1;
+        next.w = width;
+        next.h = height;
+        const placement = this.findRestoredPlacement(width, height);
+        next.x = placement.x;
+        next.y = placement.y;
+        restored = next;
+        return acc;
+      }, []);
+      if (!restored) return;
+      const updatedItems = [...remaining, restored];
       this.commitItemsChange(updatedItems);
     },
     commitItemsChange(nextItems) {
@@ -95896,8 +96038,60 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
       this.setItemPropsById(id, {
         [key]: value
       });
-    }
+    },
     // *************** 这里是通用方法，业务中如果要给卡片item.props填充数据，可以统一使用该方法 End ***************
+
+    // 寻找“最优落点”
+    findRestoredPlacement(width, height) {
+      var _ref3, _ref4, _attrs$colNum2;
+      // 从当前布局中寻找「最后一行」优先、且尽量靠右的空位
+      const layout = Array.isArray(this.internalLayout) ? this.internalLayout : [];
+      const attrs = this.resolvedGridLayoutAttrs || {};
+      const columnsCandidate = (_ref3 = (_ref4 = (_attrs$colNum2 = attrs.colNum) !== null && _attrs$colNum2 !== void 0 ? _attrs$colNum2 : attrs.cols) !== null && _ref4 !== void 0 ? _ref4 : attrs.col) !== null && _ref3 !== void 0 ? _ref3 : 12;
+      const columns = Math.max(1, this.ensureNumber(columnsCandidate, 12));
+      const normalizedW = Math.max(1, this.ensureNumber(width, this.defaultItemSize.w || 1));
+      const normalizedH = Math.max(1, this.ensureNumber(height, this.defaultItemSize.h || 1));
+      if (layout.length === 0) {
+        return {
+          x: 0,
+          y: 0
+        };
+      }
+      const maxRowY = layout.reduce((max, item) => Math.max(max, item.y), 0);
+      let nextRowY = maxRowY;
+      const maxIterations = 1000;
+      let loops = 0;
+      while (loops < maxIterations) {
+        for (let x = 0; x <= columns - normalizedW; x++) {
+          if (this.isAreaFree(layout, x, nextRowY, normalizedW, normalizedH)) {
+            return {
+              x,
+              y: nextRowY
+            };
+          }
+        }
+        nextRowY += 1;
+        loops++;
+      }
+      return {
+        x: 0,
+        y: nextRowY
+      };
+    },
+    isAreaFree(layout, x, y, width, height) {
+      if (!Array.isArray(layout) || layout.length === 0) return true;
+      return !layout.some(item => this.doRectsOverlap({
+        x,
+        y,
+        w: width,
+        h: height
+      }, item));
+    },
+    doRectsOverlap(a, b) {
+      if (!a || !b) return false;
+      const noOverlap = a.x + a.w <= b.x || b.x + b.w <= a.x || a.y + a.h <= b.y || b.y + b.h <= a.y;
+      return !noOverlap;
+    }
   }
 });
 ;// ./src/components/grid-layout/ByGridLayout.vue?vue&type=script&lang=js
@@ -95912,8 +96106,8 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
 ;
 var ByGridLayout_component = normalizeComponent(
   grid_layout_ByGridLayoutvue_type_script_lang_js,
-  ByGridLayoutvue_type_template_id_7a853977_render,
-  ByGridLayoutvue_type_template_id_7a853977_staticRenderFns,
+  ByGridLayoutvue_type_template_id_7e47dec8_render,
+  ByGridLayoutvue_type_template_id_7e47dec8_staticRenderFns,
   false,
   null,
   null,