eoss 0.1.0-alpha.30 → 0.1.0-alpha.32

package/lib/lowcode-view.js

@@ -3528,7 +3528,7 @@ module.exports = require("lodash/set");
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/view.vue?vue&type=template&id=0f1c9eba&
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/view.vue?vue&type=template&id=a1097a78&
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -3537,7 +3537,7 @@ var render = function () {
     "es-scrollbar",
     { ref: "canvasComponent", staticClass: "es-lowcode-view" },
     [
-      _vm.isEdit
+      _vm.isCanEdit
         ? _c(
             "div",
             {
@@ -3712,11 +3712,13 @@ var render = function () {
         },
         [
           _vm.visible
-            ? _c("modulels", {
+            ? _c("modules", {
                 attrs: {
                   modules: _vm.pagesMap,
                   filters: _vm.pages,
                   url: _vm.listsUrl,
+                  styles: _vm.containerStyle,
+                  pageStyle: _vm.pageStyle,
                 },
                 on: { add: _vm.handleAdd },
               })
@@ -3732,7 +3734,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/lowcode-view/src/view.vue?vue&type=template&id=0f1c9eba&
+// CONCATENATED MODULE: ./packages/lowcode-view/src/view.vue?vue&type=template&id=a1097a78&
 
 // EXTERNAL MODULE: external "sortablejs"
 var external_sortablejs_ = __webpack_require__(55);
@@ -4444,8 +4446,8 @@ var render_component = Object(componentNormalizer["a" /* default */])(
 )
 
 /* harmony default export */ var src_render = (render_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/Modulels.vue?vue&type=template&id=1f83c988&
-var Modulelsvue_type_template_id_1f83c988_render = function () {
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/Modules.vue?vue&type=template&id=00a7fee8&
+var Modulesvue_type_template_id_00a7fee8_render = function () {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
@@ -4468,6 +4470,7 @@ var Modulelsvue_type_template_id_1f83c988_render = function () {
             {
               ref: "waterfallContainer",
               staticClass: "es-lowcode-view__modules--waterfall",
+              style: _vm.styles,
               model: {
                 value: _vm.models,
                 callback: function ($$v) {
@@ -4533,15 +4536,18 @@ var Modulelsvue_type_template_id_1f83c988_render = function () {
     1
   )
 }
-var Modulelsvue_type_template_id_1f83c988_staticRenderFns = []
-Modulelsvue_type_template_id_1f83c988_render._withStripped = true
+var Modulesvue_type_template_id_00a7fee8_staticRenderFns = []
+Modulesvue_type_template_id_00a7fee8_render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/lowcode-view/src/Modulels.vue?vue&type=template&id=1f83c988&
+// CONCATENATED MODULE: ./packages/lowcode-view/src/Modules.vue?vue&type=template&id=00a7fee8&
 
 // EXTERNAL MODULE: ./src/utils/ajax.js
 var ajax = __webpack_require__(9);
 
+// EXTERNAL MODULE: ./src/utils/util.js
+var util = __webpack_require__(1);
+
 // EXTERNAL MODULE: external "eoss/lib/checkbox"
 var checkbox_ = __webpack_require__(38);
 var checkbox_default = /*#__PURE__*/__webpack_require__.n(checkbox_);
@@ -4562,7 +4568,8 @@ var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
 var pagination_ = __webpack_require__(84);
 var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/Modulels.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/Modules.vue?vue&type=script&lang=js&
+//
 //
 //
 //
@@ -4618,8 +4625,9 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
 
 
 
-/* harmony default export */ var Modulelsvue_type_script_lang_js_ = ({
-  name: 'Modulels',
+
+/* harmony default export */ var Modulesvue_type_script_lang_js_ = ({
+  name: 'Modules',
 
   components: {
     EsPagination: pagination_default.a,
@@ -4632,6 +4640,18 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
 
   props: {
     url: String,
+    styles: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    pageStyle: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     filters: {
       type: Array,
       default: function _default() {
@@ -4643,9 +4663,7 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
       default: function _default() {
         return [];
       }
-    },
-    columns: Number,
-    gap: Number
+    }
   },
 
   data: function data() {
@@ -4667,6 +4685,14 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
       return this.filters.map(function (item) {
         return item.id;
       });
+    },
+
+    // 列数/列间距与 view.vue 同源：从 pageStyle 解析，缺省 2 列 0 间距
+    columnCount: function columnCount() {
+      return parseInt((this.pageStyle || {}).columns || 2, 10);
+    },
+    columnGap: function columnGap() {
+      return parseInt((this.pageStyle || {}).gap || 0, 10);
     }
   },
 
@@ -4690,7 +4716,7 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
     var _this = this;
 
     this.$nextTick(function () {
-      _this.models.length && _this.layoutWaterfall();
+      _this.layoutWaterfall();
     });
   },
 
@@ -4743,77 +4769,59 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
     },
 
     /**
-     * 瀑布流布局算法（双列版本）
-     * 计算元素的高度和位置，一行显示2列
+     * 瀑布流布局：与 view.vue 保持同一套行为，
+     * masonry 模式复用 util.layoutWaterfall 完成元素分配与定位，
+     * 非 masonry（grid/flex）只清理子元素绝对定位残留，交还容器 CSS 控制
      */
     layoutWaterfall: function layoutWaterfall() {
       var _this3 = this;
 
-      var container = this.$refs.waterfallContainer.$el;
+      var ref = this.$refs.waterfallContainer;
+      var container = ref && ref.$el ? ref.$el : ref;
       if (!container) return;
+      if (this.results.length === 0) return;
 
-      // 获取容器宽度
-      var containerWidth = container.clientWidth;
-      if (containerWidth === 0) return;
-
-      // 计算每列宽度
-      var columnWidth = (containerWidth - this.gap) / this.columns;
-
-      // 初始化每列高度数组
-      var columnHeights = [0, 0];
+      // 非瀑布流模式：grid/flex 由容器 CSS（styles prop）控制，重置子元素为普通流式布局
+      if ((this.pageStyle || {}).display !== 'masonry') {
+        var display = (this.pageStyle || {}).display;
+        this.results.forEach(function (item) {
+          if (!item.style) _this3.$set(item, 'style', {});
+          if (item.style.position !== undefined) {
+            _this3.$set(item.style, 'position', '');
+          }
+          if (item.style.left !== undefined) {
+            _this3.$set(item.style, 'left', '');
+          }
+          if (item.style.top !== undefined) {
+            _this3.$set(item.style, 'top', '');
+          }
+          // grid 宽度由列宽/span 决定，移除瀑布流残留的 width
+          if (display === 'grid' && item.style.width) {
+            _this3.$delete(item.style, 'width');
+          }
+        });
+        container.style.height = 'auto';
+        container.style.position = '';
+        return;
+      }
 
-      // 遍历所有元素，分配到高度最小的列
+      // util 按 px 解析 width，百分比宽度（如 '100%'）会被 parseInt
+      // 误判成自定义像素宽度，这里先移除，让 util 回退到按 span 计算列宽
       this.results.forEach(function (item) {
-        var span = Math.max(1, Math.min(parseInt(item.style.span ? item.style.span : item.span || 1), _this3.columns));
-        // 找到高度最小的列
-        var minColIndex = 0;
-        if (columnHeights[1] < columnHeights[0]) {
-          minColIndex = 1;
-        }
-
-        // 计算元素位置
-        var left = 0;
-        var top = 0;
-        var width = parseInt(item.style.width ? item.style.width : item.width);
-        var height = parseInt(item.style.height ? item.style.height : item.height);
-        var eleWidth = columnWidth * span + _this3.gap * (span - 1);
-        if (width == '100%' || span == _this3.columns) {
-          // 通栏元素，放在第一列顶部
-          left = 0;
-          top = Math.max.apply(Math, columnHeights);
-          // 更新两列的高度为相同值
-          columnHeights[0] = columnHeights[1] = top + (height || 0) + _this3.gap;
-        } else {
-          // 普通元素，放在高度最小的列
-          left = minColIndex * (eleWidth + _this3.gap);
-          top = columnHeights[minColIndex];
-          // 更新该列的高度
-          columnHeights[minColIndex] += (height || 0) + _this3.gap;
-        }
-
-        // 设置元素样式（使用Vue的$set确保响应式）
-        if (!item.style) {
-          _this3.$set(item, 'style', {});
+        var width = item.style && item.style.width;
+        if (width && /%$/.test(String(width).trim())) {
+          _this3.$delete(item.style, 'width');
         }
-        _this3.$set(item.style, 'position', 'absolute');
-        _this3.$set(item.style, 'width', width == '100%' ? '100%' : eleWidth + 'px');
-        _this3.$set(item.style, 'height', height + 'px');
-        _this3.$set(item.style, 'left', left + 'px');
-        _this3.$set(item.style, 'top', top + 'px');
-
-        // 已在位置计算部分更新了列高度
       });
 
-      // 设置容器高度
-      var maxHeight = Math.max.apply(Math, columnHeights);
-      container.style.position = 'relative';
-      container.style.height = maxHeight - this.gap + 'px'; // 减去最后一个间隙
+      // 瀑布流核心计算复用 util，与页面渲染态保持同一套行为
+      Object(util["J" /* layoutWaterfall */])(this, container, this.results, this.columnCount, this.columnGap);
     }
   }
 });
-// CONCATENATED MODULE: ./packages/lowcode-view/src/Modulels.vue?vue&type=script&lang=js&
- /* harmony default export */ var src_Modulelsvue_type_script_lang_js_ = (Modulelsvue_type_script_lang_js_); 
-// CONCATENATED MODULE: ./packages/lowcode-view/src/Modulels.vue
+// CONCATENATED MODULE: ./packages/lowcode-view/src/Modules.vue?vue&type=script&lang=js&
+ /* harmony default export */ var src_Modulesvue_type_script_lang_js_ = (Modulesvue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/lowcode-view/src/Modules.vue
 
 
 
@@ -4821,10 +4829,10 @@ var pagination_default = /*#__PURE__*/__webpack_require__.n(pagination_);
 
 /* normalize component */
 
-var Modulels_component = Object(componentNormalizer["a" /* default */])(
-  src_Modulelsvue_type_script_lang_js_,
-  Modulelsvue_type_template_id_1f83c988_render,
-  Modulelsvue_type_template_id_1f83c988_staticRenderFns,
+var Modules_component = Object(componentNormalizer["a" /* default */])(
+  src_Modulesvue_type_script_lang_js_,
+  Modulesvue_type_template_id_00a7fee8_render,
+  Modulesvue_type_template_id_00a7fee8_staticRenderFns,
   false,
   null,
   null,
@@ -4832,13 +4840,10 @@ var Modulels_component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* harmony default export */ var Modulels = (Modulels_component.exports);
+/* harmony default export */ var Modules = (Modules_component.exports);
 // EXTERNAL MODULE: ./src/config/api.js
 var api = __webpack_require__(6);
 
-// EXTERNAL MODULE: ./src/utils/util.js
-var util = __webpack_require__(1);
-
 // EXTERNAL MODULE: ./src/utils/resize-event.js
 var resize_event = __webpack_require__(37);
 
@@ -4850,9 +4855,14 @@ var dialog_default = /*#__PURE__*/__webpack_require__.n(dialog_);
 var icon_ = __webpack_require__(26);
 var icon_default = /*#__PURE__*/__webpack_require__.n(icon_);
 
+// EXTERNAL MODULE: ./src/utils/storage.js
+var storage = __webpack_require__(0);
+
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/lowcode-view/src/view.vue?vue&type=script&lang=js&
 var viewvue_type_script_lang_js_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 //
@@ -4947,6 +4957,9 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 //
 //
 //
+//
+//
+
 
 
 
@@ -4964,7 +4977,7 @@ var DROP_SPACE = 200;
 /* harmony default export */ var viewvue_type_script_lang_js_ = ({
   name: 'LowcodeView',
 
-  components: { EsScrollbar: scrollbar_default.a, Render: src_render, Modulels: Modulels, EsButton: button_default.a, EsDialog: dialog_default.a, EsIcon: icon_default.a },
+  components: { EsScrollbar: scrollbar_default.a, Render: src_render, Modules: Modules, EsButton: button_default.a, EsDialog: dialog_default.a, EsIcon: icon_default.a },
 
   props: {
     isEdit: {
@@ -4982,6 +4995,7 @@ var DROP_SPACE = 200;
 
   data: function data() {
     return {
+      pageData: this.page,
       // 组件列表
       components: [],
       // 列宽
@@ -5017,12 +5031,16 @@ var DROP_SPACE = 200;
         buttonText: '知道了',
         placement: 'left',
         onClose: null
-      }
+      },
+      canEdit: false
     };
   },
 
 
   computed: {
+    isCanEdit: function isCanEdit() {
+      return this.isEdit || this.canEdit;
+    },
     styles: function styles() {
       return {
         'grid-template-columns': 'repeat(' + this.columnCount + ', 1fr)',
@@ -5087,7 +5105,7 @@ var DROP_SPACE = 200;
     this.getPagesMap();
     // 首次进入且可编辑时展示功能引导
     try {
-      var show = this.isEdit && !localStorage.getItem('es-lowcode-view-guide');
+      var show = this.isCanEdit && !localStorage.getItem('es-lowcode-view-guide');
       this.showGuide = show;
       this.guideConfig = viewvue_type_script_lang_js_extends({}, this.guideConfig, {
         show: show,
@@ -5140,34 +5158,94 @@ var DROP_SPACE = 200;
         params: {
           mainPageComponentConfigId: this.pageId
         }
-      }).then(function (res) {
-        if (res.rCode != 0) return;
-
-        var _ref = res.results || {},
-            pageInfo = _ref.pageInfo,
-            targetList = _ref.targetList;
-
-        console.log('pageInfo', pageInfo, targetList);
-        //targetList后续需要完善
-        if (!pageInfo) return;
-        // pageInfo.content 是一段 JSON 字符串，内部结构为 { children, style, ... }
-
-        var content = pageInfo.content,
-            page = _objectWithoutProperties(pageInfo, ['content']);
+      }).then(function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(res) {
+          var _ref2, pageInfo, targetList, content, page, parsed, userConfig, modules, _parsed, children, parseds;
+
+          return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  if (!(res.rCode != 0)) {
+                    _context.next = 2;
+                    break;
+                  }
+
+                  return _context.abrupt('return');
+
+                case 2:
+                  _ref2 = res.results || {}, pageInfo = _ref2.pageInfo, targetList = _ref2.targetList;
+                  //targetList后续需要完善
+
+                  if (pageInfo) {
+                    _context.next = 5;
+                    break;
+                  }
+
+                  return _context.abrupt('return');
+
+                case 5:
+                  content = pageInfo.content, page = _objectWithoutProperties(pageInfo, ['content']);
+                  parsed = {};
+
+                  try {
+                    parsed = JSON.parse(content);
+                  } catch (e) {
+                    parsed = {};
+                  }
+                  // pageInfo.content 是一段 JSON 字符串，内部结构为 { children, style, ... }
+
+                  if (!pageInfo.code) {
+                    _context.next = 15;
+                    break;
+                  }
+
+                  _context.next = 11;
+                  return Object(ajax["a" /* ajax */])({
+                    url: api["J" /* getByType */],
+                    params: {
+                      type: pageInfo.code
+                    }
+                  });
+
+                case 11:
+                  userConfig = _context.sent;
+
+                  if (userConfig.rCode === 0 && userConfig.results && userConfig.results[pageInfo.code] && userConfig.results[pageInfo.code].userConfig) {
+                    modules = JSON.parse(userConfig.results[pageInfo.code].userConfig);
+                    _parsed = parsed, children = _parsed.children, parseds = _objectWithoutProperties(_parsed, ['children']);
+
+                    _this.pageData = viewvue_type_script_lang_js_extends({}, page, parseds, { children: modules });
+                    _this.pagesMap = children || [];
+                  } else {
+                    _this.pageData = viewvue_type_script_lang_js_extends({}, page, parsed);
+                  }
+                  _context.next = 16;
+                  break;
+
+                case 15:
+                  _this.pageData = viewvue_type_script_lang_js_extends({}, page, parsed);
+
+                case 16:
+                  // 合并：page 保留元信息，parsed 提供 children/style 等渲染所需结构
+                  _this.setPageData(_this.pageData);
+                  // mounted 时 pages 尚为空，异步拿到数据后需重新触发布局
+                  _this.$nextTick(function () {
+                    _this.init();
+                  });
+
+                case 18:
+                case 'end':
+                  return _context.stop();
+              }
+            }
+          }, _callee, _this);
+        }));
 
-        var parsed = {};
-        try {
-          parsed = JSON.parse(content);
-        } catch (e) {
-          parsed = {};
-        }
-        // 合并：page 保留元信息，parsed 提供 children/style 等渲染所需结构
-        _this.setPageData(viewvue_type_script_lang_js_extends({}, page, parsed));
-        // mounted 时 pages 尚为空，异步拿到数据后需重新触发布局
-        _this.$nextTick(function () {
-          _this.init();
-        });
-      }).catch(function (err) {}).finally(function () {
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }()).catch(function (err) {}).finally(function () {
         loadingInstance.close();
       });
     },
@@ -5178,6 +5256,8 @@ var DROP_SPACE = 200;
      * @param {Object} page 完整页面对象（含 children、style）
      */
     setPageData: function setPageData(page) {
+      var customPage = (Object(storage["a" /* getStorage */])({ key: 'customPage' }) || '').split(',');
+      this.canEdit = customPage.includes(page.code);
       var p = page || {};
       this.pages = JSON.parse(JSON.stringify(p.children || []));
       var style = p.style || {};
@@ -5253,13 +5333,14 @@ var DROP_SPACE = 200;
         method: 'post',
         format: false,
         data: {
-          type: 'customHomePages',
+          type: this.pageData.code,
           userConfig: JSON.stringify(this.pages)
         }
       }).then(function (res) {
         if (res.rCode == 0 || res.status == 'success') {
           _this4.$message.success('保存成功！');
-          _this4.getData();
+          // 保存成功后重新拉取页面配置，刷新渲染数据
+          _this4.getPagesMap();
           _this4.edit = false;
           _this4.$nextTick(function () {
             _this4.layoutWaterfall();