@luck-design-biz/luckda 0.0.22-4 → 0.0.23

package/lib/lowcode/painter/panel-section/LayoutRatio.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _layoutRatio = _interopRequireDefault(require("../style/layout-ratio.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
+var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
+var ratios = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
+var defaultRatio = '12';
+
+/**
+ * 布局比例组件
+ * 
+ * @param {string} value 默认值
+ * @param {Function} onChange 当合法数据变化时触发
+ * @returns 
+ */
+var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(value || defaultRatio),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentRatio = _useState2[0],
+    setCurrentRatio = _useState2[1];
+  var handleInputChange = function handleInputChange(_, value) {
+    console.log('value', value);
+    if (!value) value = defaultRatio;
+    setCurrentRatio(value);
+  };
+  var handGridClick = function handGridClick(selectedRadio) {
+    // console.log('selectedRadio', selectedRadio);
+    setCurrentRatio(selectedRadio);
+    if (onChange) onChange(selectedRadio);
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getValue: function getValue() {
+        return currentRatio;
+      }
+    };
+  });
+
+  // 定义验证规则
+  var rules = [{
+    func: function func(value) {
+      // 首先，检查value是否为字符串
+      if (typeof value !== 'string') return false;
+
+      // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+      if (!/^[0-9]+(:[0-9]+)*$/.test(value)) return false;
+
+      // 使用冒号分割字符串，并将分割后的每个元素转换为数字
+      var numbers = value.split(':').map(Number);
+
+      // 计算所有数字的总和
+      var sum = numbers.reduce(function (acc, cur) {
+        return acc + cur;
+      }, 0);
+
+      // 判断总和是否等于12
+      return sum === 12;
+    },
+    err: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
+      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
+    })
+  }];
+  var isCurrentInRatios = ratios.includes(currentRatio);
+  var currentItemRatios = currentRatio.split(':');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['lc-painter-panel-section-layoutratio']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-view']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['gridbox-container']
+  }, ratios.map(function (ratio) {
+    var itemRatios = ratio.split(':');
+    var isCurrent = ratio == currentRatio;
+    var className = _layoutRatio.default['gridbox'];
+    if (isCurrent) className = className + ' ' + _layoutRatio.default['current'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className,
+      onClick: function onClick() {
+        return handGridClick(ratio);
+      }
+    }, itemRatios.map(function (itemRatio) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _layoutRatio.default['girditem'],
+        style: {
+          gridColumn: 'span ' + itemRatio
+        }
+      });
+    }));
+  }), !isCurrentInRatios && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_layoutRatio.default['gridbox'], " ").concat(_layoutRatio.default['current']),
+    onClick: function onClick() {
+      return handGridClick(ratio);
+    }
+  }, currentItemRatios.map(function (itemRatio) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _layoutRatio.default['girditem'],
+      style: {
+        gridColumn: 'span ' + itemRatio
+      }
+    });
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-input']
+  }, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
+      label: '列比例'
+    }),
+    component: /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
+      placeholder: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+        label: '请输入列比例'
+      }),
+      rules: rules,
+      onValueChange: handleInputChange,
+      value: currentRatio
+    })
+  })));
+});
+var _default = exports.default = LayoutRatio;

package/lib/lowcode/painter/panel-section/Radio.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _radio = _interopRequireDefault(require("../style/radio.less"));
+/**
+ * Radio组件允许用户从一组选项中选择一个。它接收一个`options`数组来渲染选项，以及一个可选的`onChange`回调函数，
+ * 当用户选择不同的选项时，`onChange`会被调用并传递当前选中的选项对象。
+ * 
+ * @component
+ * @example
+ * const options = [
+ *   { label: '小', value: 'small' },
+ *   { label: '中', value: 'middle' },
+ *   { label: '大', value: 'large' }
+ * ];
+ * 
+ * function handleChange(option) {
+ *   console.log(option);
+ * }
+ * 
+ * <Radio options={options} onChange={handleChange} />
+ * 
+ * @param {Object} props - 组件的props。
+ * @param {Object[]} props.options - 选项数组，每个对象都应包含`label`和`value`。
+ * @param {string} props.options[].label - 选项的显示文本。
+ * @param {string} props.options[].value - 选项的值，应唯一。
+ * @param {Function} [props.onChange] - 可选，当选项变化时调用的回调函数。传递当前选中的选项对象。
+ */
+var Radio = function Radio(_ref) {
+  var _options$;
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeValue = _useState2[0],
+    setActiveValue = _useState2[1];
+
+  // 点击事件处理函数
+  var handleClick = function handleClick(option) {
+    // 设置当前激活的选项
+    setActiveValue(option.value);
+    if (onChange) {
+      onChange(option);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _radio.default['lc-painter-panel-section-radio']
+  }, options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: option.value,
+      className: "".concat(_radio.default['radio-item'], " ").concat(activeValue === option.value ? 'active' : ''),
+      onClick: function onClick() {
+        return handleClick(option);
+      }
+    }, option.label);
+  }));
+};
+var _default = exports.default = Radio;

package/lib/lowcode/painter/style/components.less

@@ -0,0 +1,90 @@
+.lc-painter-components {
+  .components-search {
+    padding: 0 20px;
+  }
+
+  .components-content {
+    border-top: 1px solid #e3e3e3;
+    margin-top: 20px;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .components-wrapper {
+      padding: 0 20px;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 20px;
+
+      h3 {
+        width: 100%; // 使标题占满整行
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+    }
+
+    .components-item {
+      display: flex;
+      width: 121px;
+      height: 37px;
+      align-items: center;
+      justify-content: center; // 水平居中对齐
+      padding: 10px;
+      border: 1px solid #ddd;
+      margin-right: 10px; // 添加右边距来分隔项
+      margin-bottom: 10px; // 添加底边距来分隔行
+      border-radius: 4px;
+      transition: border-color 0.3s;
+      box-sizing: border-box; // 确保边框和填充不会增加元素的宽度
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+        color: #3478ff; // 文本颜色
+        .icon-wrapper {
+          color: #3478ff; // Icon颜色（如果Icon组件接受color属性）
+        }
+      }
+
+      .icon-wrapper {
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        margin-right: 10px;
+      }
+
+      .text-content {
+        flex-grow: 1;
+        text-align: left;
+
+        span {
+          font-size: 12px;
+          color: #333;
+          white-space: nowrap; // 防止文字换行
+          overflow: hidden; // 隐藏溢出的文字
+          text-overflow: ellipsis; // 使用省略号表示溢出
+        }
+
+        p {
+          display: none; // 隐藏描述，因为在这个组件尺寸中无法显示
+        }
+      }
+    }
+  }
+
+  :global{
+    .ant-tabs-nav-scroll{
+      display: flex;
+      justify-content: center;
+      .ant-tabs-tab{
+        font-size: 14px!important;
+      }
+    }
+  }
+}

package/lib/lowcode/painter/style/design.less

@@ -0,0 +1,38 @@
+.box {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  display: none;
+  pointer-events: none;
+  cursor: pointer;
+  overflow: visible;
+  z-index: 9999;
+}
+
+.lc-painter-design {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+
+  .simulator {
+    :global {
+      .ant-form-item {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .detector {
+    border: 1px dashed var(--ant-primary-color);
+    background-color: color-mix(in sRGB, var(--ant-primary-color), transparent 95%);
+    .box();
+  }
+
+  .selector {
+    border: 2px solid var(--ant-primary-6);
+    .box();
+  }
+}

package/lib/lowcode/painter/style/index.less

@@ -0,0 +1,7 @@
+.lc-painter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  background-color: #fff;
+}

package/lib/lowcode/painter/style/layout-ratio.less

@@ -0,0 +1,51 @@
+.lc-painter-panel-section-layoutratio {
+  @gridbox-width: 66px; // 定义变量
+  @grid-gap: 10px; // 间隔变量
+  @grid-items-per-row: 4; // 每行的gridbox数量
+
+  margin: 0;
+  align-items: center;
+
+  .ratio-view {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    .gridbox-container {
+      width: calc(@grid-items-per-row * @gridbox-width + (@grid-items-per-row - 1) * @grid-gap);
+      margin: 0 auto; // 保持这个居中
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: @grid-gap;
+    }
+
+    .gridbox {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 2px;
+      width: @gridbox-width;
+      height: 34px;
+      border-radius: 5px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 3px;
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+      }
+
+      &.current {
+        border-color: #3478ff;
+      }
+
+      .girditem {
+        background-color: rgb(192, 194, 196);
+      }
+    }
+  }
+
+  .ratio-input {
+    margin-top: 20px;
+  }
+}

package/lib/lowcode/painter/style/outline.less

@@ -0,0 +1,26 @@
+.lc-painter-outline {
+  .page-node {
+    cursor: pointer;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    height: 32px;
+    box-sizing: border-box;
+    position: relative;
+    transform: translateZ(0);
+    padding: 0 5px;
+  }
+  .page-node:hover,
+  .page-node.page-node-active {
+    background-color: #f6f7f8;
+  }
+
+  :global {
+    .ant-tree.ant-tree-show-line li:not(:last-child)::before {
+      height: calc(100% - 34px);
+    }
+    .ant-tree-switcher-noop svg {
+      display: none;
+    }
+  }
+}

package/lib/lowcode/painter/style/panel-item.less

@@ -0,0 +1,21 @@
+.lc-painter-components-panelitem {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: center;
+  min-height: 28px;
+
+  .item-label {
+    font-size: 12px;
+  }
+
+  .item-component {
+    display: flex;
+    width: 215px;
+  }
+
+  /* 使.item-component-box的直接子元素铺满 */
+  .item-component > * {
+    flex-grow: 1;
+  }
+}

package/lib/lowcode/painter/style/panel.less

@@ -0,0 +1,5 @@
+.lc-painter-panel {
+  width: 320px;
+  height: 100%;
+  border-left: 1px solid #e8e8e8;
+}

package/lib/lowcode/painter/style/radio.less

@@ -0,0 +1,24 @@
+.lc-painter-panel-section-radio {
+  background-color: #f1f2f3;
+  border-radius: 6px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+
+  .radio-item {
+    display: flex;
+    flex: 1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    font-size: 12px;
+    margin: 2px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &.active{
+      background-color: #ffffff;
+    }
+  }
+}

package/lib/lowcode/painter/style/ribbon.less

@@ -0,0 +1,4 @@
+.lc-painter-ribbon {
+  border-right: 1px solid #e8e8e8;
+  font-size: 16px;
+}

package/lib/lowcode/painter/style/rule-input.less

@@ -0,0 +1,13 @@
+.lc-painter-components-ruleinput {
+  &.err, &.err:hover {
+    border-color: #ff4d4f;
+    color: red;
+  }
+  &.err:focus {
+    border-color: #ff4d4f;
+    border-right-width: 1px !important;
+    outline: 0;
+    -webkit-box-shadow: 0 0 0 2px rgba(245,34,45,.2);
+    box-shadow: 0 0 0 2px rgba(245,34,45,.2);
+  }
+}

package/lib/lowcode/view/Canvas.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard3(require("react"));
+var _umi = require("umi");
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _Wrapper = _interopRequireDefault(require("./lc-components/Wrapper"));
+var _constants = require("../constants");
+var _canvas = _interopRequireDefault(require("./style/canvas.less"));
+var _excluded = ["props", "children"];
+var PAGE_CELL = [_constants.CELL_KEY.PAGE_HEADER, _constants.CELL_KEY.PAGE_CONTENT, _constants.CELL_KEY.PAGE_FOOTER];
+var Canvas = function Canvas(_ref) {
+  var dataSource = _ref.dataSource;
+  console.log('dataSource', dataSource);
+  var headerRef = (0, _react.useRef)();
+  var contentRef = (0, _react.useRef)();
+  var footerRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    header = _useState2[0],
+    setHeader = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    content = _useState4[0],
+    setContent = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    footer = _useState6[0],
+    setFooter = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    modal = _useState8[0],
+    setModal = _useState8[1];
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {
+    var props = _ref2.props,
+      children = _ref2.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    if (props && !PAGE_CELL.includes(props.id)) {
+      var Comp = (0, _umi.dynamic)({
+        loader: function () {
+          var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+            var _yield$import, _Comp;
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return function (specifier) {
+                    return new Promise(function (r) {
+                      return r(specifier);
+                    }).then(function (s) {
+                      return (0, _interopRequireWildcard2.default)(require(s));
+                    });
+                  }("./lc-components/".concat(props.type));
+                case 2:
+                  _yield$import = _context.sent;
+                  _Comp = _yield$import.default;
+                  return _context.abrupt("return", _Comp);
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function loader() {
+            return _loader.apply(this, arguments);
+          }
+          return loader;
+        }()
+      });
+      return /*#__PURE__*/_react.default.createElement(Comp, {
+        id: props.id,
+        lcdata: props
+      }, (children || []).map(function (_id) {
+        return render(childrenMap[_id]);
+      }));
+    }
+    return (children || []).map(function (_id) {
+      return render(childrenMap[_id]);
+    });
+  });
+  (0, _ahooks.useDeepCompareLayoutEffect)(function () {
+    setHeader(render(dataSource[_constants.CELL_KEY.PAGE_HEADER]));
+  }, [dataSource[_constants.CELL_KEY.PAGE_HEADER]]);
+  (0, _ahooks.useDeepCompareLayoutEffect)(function () {
+    setContent(render(dataSource[_constants.CELL_KEY.PAGE_CONTENT]));
+  }, [dataSource[_constants.CELL_KEY.PAGE_CONTENT]]);
+  (0, _ahooks.useDeepCompareLayoutEffect)(function () {
+    setFooter(render(dataSource[_constants.CELL_KEY.PAGE_FOOTER]));
+  }, [dataSource[_constants.CELL_KEY.PAGE_FOOTER]]);
+  (0, _ahooks.useDeepCompareLayoutEffect)(function () {
+    var pageModal = (0, _lodash.reduce)(dataSource.children, function (result, _id) {
+      if (!PAGE_CELL.includes(_id)) {
+        result[_id] = dataSource[_id];
+        if (!result.children) {
+          result.children = [];
+        }
+        result.children.push(_id);
+      }
+      return result;
+    }, {});
+    setModal(render(pageModal));
+  }, [dataSource.children]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "page-canvas",
+    className: _canvas.default['lc-view-canvas']
+  }, /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    id: _constants.CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return headerRef.current;
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: headerRef,
+    style: {
+      width: '100%',
+      height: 120,
+      backgroundColor: '#d3f261'
+    }
+  }, header)), /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    id: _constants.CELL_KEY.PAGE_CONTENT,
+    getTargetDom: function getTargetDom() {
+      return contentRef.current;
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef
+  }, content)), /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    id: _constants.CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return footerRef.current;
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: footerRef,
+    style: {
+      width: '100%',
+      height: 80,
+      backgroundColor: '#69c0ff'
+    }
+  }, footer)), modal);
+};
+var _default = exports.default = Canvas;

package/lib/lowcode/view/Loading.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _loading = _interopRequireDefault(require("./style/loading.less"));
+var Loading = function Loading() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _loading.default['lc-painter-loading']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _loading.default['cube']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_loading.default['side'], _loading.default['side1'])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_loading.default['side'], _loading.default['side2'])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_loading.default['side'], _loading.default['side3'])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_loading.default['side'], _loading.default['side4'])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_loading.default['side'], _loading.default['side5'])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_loading.default['side'], _loading.default['side6'])
+  })));
+};
+var _default = exports.default = Loading;