@luck-design-biz/luckda 0.0.23 → 0.0.24-1

package/es/lowcode/painter/style/icon-selector.less

@@ -0,0 +1,22 @@
+.lc-painter-panel-section-iconselector {
+  
+  .components-search {
+    padding: 0 20px;
+  }
+
+  .icon-warp {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    .icon-box {
+      cursor: pointer;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .icon-item {
+        font-size: 20px;
+      }
+    }
+  }
+}

package/es/lowcode/painter/style/icon.less

@@ -0,0 +1,11 @@
+.lc-painter-panel-section-icon {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .selecor{
+    font-size: 12px;
+    margin-left: 6px;
+  }
+}

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

@@ -3,5 +3,4 @@
   height: 100%;
   position: relative;
   display: flex;
-  background-color: #fff;
 }

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

@@ -1,5 +1,5 @@
 .lc-painter-panel-section-layoutratio {
-  @gridbox-width: 66px; // 定义变量
+  @gridbox-width: 58px; // 定义变量
   @grid-gap: 10px; // 间隔变量
   @grid-items-per-row: 4; // 每行的gridbox数量
 

package/es/lowcode/painter/style/number-input.less

@@ -0,0 +1,17 @@
+.lc-painter-panel-section-components-number-input {
+  .num-input-wrap {
+    position: relative;
+
+    .num-input {
+      width: 100%;
+    }
+
+    .num-option {
+      display: inline-block;
+      position: absolute;
+      right: 26px;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+    }
+  }
+}

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

@@ -1,4 +1,6 @@
 .lc-painter-outline {
+  background-color: #fff;
+
   .page-node {
     cursor: pointer;
     display: flex;

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

@@ -1,21 +1,44 @@
 .lc-painter-components-panelitem {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  align-items: center;
-  min-height: 28px;
+  padding: 0 16px;
 
-  .item-label {
-    font-size: 12px;
-  }
-
-  .item-component {
+  .panelrow {
     display: flex;
-    width: 215px;
-  }
+    justify-content: space-between;
+    align-items: center;
+    min-height: 28px;
+    margin-bottom: 4px;
+
+    .item-label {
+      font-size: 12px;
+      width: 80px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 4px;
+      user-select: none;
+    }
 
-  /* 使.item-component-box的直接子元素铺满 */
-  .item-component > * {
-    flex-grow: 1;
+    .item-component {
+      display: flex;
+      flex: 1;
+    }
+
+    .item-icon {
+      font-size: 8px;
+      cursor: pointer;
+    }
+
+    /* 使.item-component-box的直接子元素铺满 */
+    .item-component > *:not(.ant-switch) {
+      flex-grow: 1;
+    }
+  }
+  .addon {
+    background-color: rgba(31, 56, 88, 0.04);
+    min-height: 20px;
+    margin-bottom: 6px;
+    margin-top: 6px;
+    padding: 4px 8px;
+    border-radius: 6px;
   }
 }

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

@@ -1,5 +1,142 @@
 .lc-painter-panel {
+  position: relative;
   width: 320px;
   height: 100%;
   border-left: 1px solid #e8e8e8;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+
+  &-empty {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    padding-top: 64px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &-topbar {
+    width: 100%;
+    height: 40px;
+    padding: 8px 16px;
+    border-bottom: 1px solid #e3e3e3;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    .active-node-level:hover {
+      cursor: pointer;
+    }
+  }
+
+  &-tabbar {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    .headerList {
+      display: flex;
+      justify-content: space-around;
+      padding: 0 !important;
+
+      & > li {
+        padding: 8px;
+        font-size: 12px;
+        color: #a0a0a0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          color: #363636;
+        }
+
+        &.actived {
+          color: #363636;
+        }
+
+        & > i {
+          margin-right: 4px;
+        }
+      }
+
+      :global {
+        li#header-active {
+          color: #363636;
+          position: relative;
+        }
+      }
+    }
+
+    .underline {
+      position: absolute;
+      bottom: 0;
+      height: 5px;
+      background: var(--ant-primary-color);
+      border-radius: 3px;
+      width: 20px;
+    }
+  }
+
+  &-content {
+    position: relative;
+    width: 100%;
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 8px 0;
+
+    .next-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      &-header {
+        height: 28px;
+        background-color: #e8e8e8;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 4px;
+      }
+      &-header:hover {
+        background-color: #e3e3e3;
+        cursor: pointer;
+      }
+
+      &-body {
+        flex: 1;
+        overflow-y: auto;
+        background-color: white;
+        padding: 16px 0 8px;
+      }
+    }
+  }
+  :global {
+    .ant-select .ant-btn {
+      width: 170px !important;
+      height: 20px;
+      line-height: 16px;
+    }
+    .rc-segmented {
+      border-radius: 6px;
+      .rc-segmented-thumb {
+        border-radius: 6px;
+      }
+      .rc-segmented-item {
+        flex: 1;
+        border-radius: 6px;
+        min-height: 24px !important;
+        padding: 4px 6px !important;
+        .rc-segmented-item-label {
+          line-height: 16px !important;
+          font-size: 12px;
+        }
+      }
+    }
+  }
 }

package/es/lowcode/painter/style/pop-confirm.less

@@ -0,0 +1,10 @@
+.lc-painter-panel-section-components-popconfirm {
+  :global {
+    .ant-popover-message-title {
+      padding: 0;
+    }
+    .ant-popover-buttons{
+      display: none;
+    }
+  }
+}

package/es/lowcode/painter/style/pop-form.less

@@ -0,0 +1,20 @@
+.lc-painter-panel-section-components-popform {
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .item {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    font-size: 12px;
+
+    .left {
+      width: 55px;
+    }
+
+    .right {
+      flex: 1;
+    }
+  }
+}

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

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

package/es/lowcode/painter/style/style-panel.less

@@ -0,0 +1,5 @@
+.lc-painter-panel-section-style-panel {
+  .style-editor {
+    margin-bottom: 8px;
+  }
+}

package/es/lowcode/painter/style/tabeditor.less

@@ -0,0 +1,90 @@
+.lc-painter-panel-section-components-tabeditor {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .tabs-box {
+    width: 100%;
+    .tabitem {
+      height: 28px;
+      background: #fff;
+      border: 1px solid #e5e6e8;
+      border-radius: 6px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      gap: 2px;
+
+      .tabitem-left {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+
+        .dragicon {
+          cursor: move;
+        }
+      }
+
+      .tabitem-right {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+        gap: 4px;
+
+        .tabitem-action {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .tabs-actions {
+    width: 100%;
+    .tabs-action {
+      cursor: pointer;
+      height: 28px;
+      background: #fff;
+      border: 1px solid #e5e6e8;
+      border-radius: 6px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      gap: 4px;
+    }
+  }
+}
+
+.lc-painter-panel-section-tabitems-editor {
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .item {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    font-size: 12px;
+
+    .left {
+      width: 55px;
+    }
+
+    .right {
+      flex: 1;
+    }
+  }
+}
+
+.lc-painter-panel-section-tabitems-popconfirm {
+  :global {
+    .ant-popover-message-title {
+      padding: 0;
+    }
+    .ant-popover-buttons{
+      display: none;
+    }
+  }
+}

package/es/lowcode/painter/style/tabitems.less

@@ -0,0 +1,90 @@
+.lc-painter-panel-section-tabitems {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .tabs-box {
+    width: 100%;
+    .tabitem {
+      height: 28px;
+      background: #fff;
+      border: 1px solid #e5e6e8;
+      border-radius: 6px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      gap: 2px;
+
+      .tabitem-left {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+
+        .dragicon {
+          cursor: move;
+        }
+      }
+
+      .tabitem-right {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+        gap: 4px;
+
+        .tabitem-action {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .tabs-actions {
+    width: 100%;
+    .tabs-action {
+      cursor: pointer;
+      height: 28px;
+      background: #fff;
+      border: 1px solid #e5e6e8;
+      border-radius: 6px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      gap: 4px;
+    }
+  }
+}
+
+.lc-painter-panel-section-tabitems-editor {
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .item {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    font-size: 12px;
+
+    .left {
+      width: 55px;
+    }
+
+    .right {
+      flex: 1;
+    }
+  }
+}
+
+.lc-painter-panel-section-tabitems-popconfirm {
+  :global {
+    .ant-popover-message-title {
+      padding: 0;
+    }
+    .ant-popover-buttons{
+      display: none;
+    }
+  }
+}

package/es/lowcode/view/Canvas.js

@@ -1,22 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["props", "children"];
+var _excluded = ["props", "children"],
+  _excluded2 = ["id", "component", "name", "desc", "icon", "group", "groupName", "order"];
 import React, { useRef, useState } from 'react';
 import { dynamic } from 'umi';
 import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
-import { reduce } from 'lodash';
-import Wrapper from "./lc-components/Wrapper";
+import { reduce, upperFirst } from 'lodash';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import Box from "./lc-components/Box";
 import { CELL_KEY } from "../constants";
 import styles from "./style/canvas.less";
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
 var Canvas = function Canvas(_ref) {
   var dataSource = _ref.dataSource;
-  console.log('dataSource', dataSource);
-  var headerRef = useRef();
-  var contentRef = useRef();
-  var footerRef = useRef();
+  var dynamicCompMap = useRef({});
+  var context = useLDContext();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     header = _useState2[0],
@@ -38,35 +39,49 @@ var Canvas = function Canvas(_ref) {
       children = _ref2.children,
       childrenMap = _objectWithoutProperties(_ref2, _excluded);
     if (props && !PAGE_CELL.includes(props.id)) {
-      var Comp = dynamic({
-        loader: function () {
-          var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            var _yield$import, _Comp;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return import("./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.createElement(Comp, {
-        id: props.id,
-        lcdata: props
-      }, (children || []).map(function (_id) {
+      var id = props.id,
+        component = props.component,
+        name = props.name,
+        desc = props.desc,
+        icon = props.icon,
+        group = props.group,
+        groupName = props.groupName,
+        order = props.order,
+        rest = _objectWithoutProperties(props, _excluded2);
+      if (!dynamicCompMap.current[component]) {
+        dynamicCompMap.current[component] = dynamic({
+          loader: function () {
+            var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var _runtime, _yield$import, _Comp;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _runtime = upperFirst(context.runtime);
+                    _context.next = 3;
+                    return import("./lc-components/".concat(component, "/Function").concat(_runtime));
+                  case 3:
+                    _yield$import = _context.sent;
+                    _Comp = _yield$import.default;
+                    return _context.abrupt("return", _Comp);
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function loader() {
+              return _loader.apply(this, arguments);
+            }
+            return loader;
+          }()
+        });
+      }
+      var Comp = dynamicCompMap.current[component];
+      return /*#__PURE__*/React.createElement(Comp, _extends({
+        key: id,
+        id: id,
+        context: context
+      }, rest), (children || []).map(function (_id) {
         return render(childrenMap[_id]);
       }));
     }
@@ -99,37 +114,30 @@ var Canvas = function Canvas(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: "page-canvas",
     className: styles['lc-view-canvas']
-  }, /*#__PURE__*/React.createElement(Wrapper, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    key: CELL_KEY.PAGE_HEADER,
     id: CELL_KEY.PAGE_HEADER,
-    getTargetDom: function getTargetDom() {
-      return headerRef.current;
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: headerRef,
     style: {
       width: '100%',
       height: 120,
       backgroundColor: '#d3f261'
     }
-  }, header)), /*#__PURE__*/React.createElement(Wrapper, {
+  }, header), /*#__PURE__*/React.createElement(Box, {
+    key: CELL_KEY.PAGE_CONTENT,
     id: CELL_KEY.PAGE_CONTENT,
-    getTargetDom: function getTargetDom() {
-      return contentRef.current;
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: contentRef
-  }, content)), /*#__PURE__*/React.createElement(Wrapper, {
-    id: CELL_KEY.PAGE_HEADER,
-    getTargetDom: function getTargetDom() {
-      return footerRef.current;
+    style: {
+      width: '100%',
+      height: 'calc(100% - 120px)',
+      backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
+  }, content), /*#__PURE__*/React.createElement(Box, {
+    key: CELL_KEY.PAGE_FOOTER,
+    id: CELL_KEY.PAGE_FOOTER,
     style: {
       width: '100%',
       height: 80,
       backgroundColor: '#69c0ff'
     }
-  }, footer)), modal);
+  }, footer), modal);
 };
 export default Canvas;