@luck-design-biz/luckda 1.0.2-2 → 1.0.2-4

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

@@ -1,57 +1,79 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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 _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
-var _lodash = require("lodash");
+var _luckDesign = require("luck-design");
 var _utils = require("@luck-design-biz/base/utils");
-var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
-var _FullScreenEditor = _interopRequireDefault(require("../components/code-editor/FullScreenEditor"));
+var _RuntimeComp = _interopRequireDefault(require("../../view/lc-components/JSX/RuntimeComp"));
 var _JSEditor2 = _interopRequireDefault(require("../components/code-editor/JSEditor"));
 var _JSEditor = function _JSEditor(_ref) {
   var defaultValue = _ref.defaultValue,
     defaultCode = _ref.defaultCode,
     onChange = _ref.onChange,
-    mustConfirm = _ref.mustConfirm,
     children = _ref.children;
   var editorRef = (0, _react.useRef)();
-  var handleCodeChange = (0, _react.useRef)((0, _lodash.debounce)(function (code) {
-    if (!mustConfirm) onChange(code);
-  }, 400));
-  var handleConfirm = (0, _ahooks.useMemoizedFn)(function () {
-    onChange(editorRef.current.editor.getValue());
-  });
-  var handleEditorLoad = (0, _ahooks.useMemoizedFn)(function () {
-    editorRef.current.editor.setValue(defaultValue || defaultCode);
-  });
-  return /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
-    placement: "left",
-    title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
-      ref: editorRef,
-      EditorComponent: _JSEditor2.default,
-      width: "600px",
-      height: "400px",
-      onChange: handleCodeChange.current,
-      onLoad: handleEditorLoad
+  var _useState = (0, _react.useState)(defaultValue || defaultCode),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    code = _useState2[0],
+    setCode = _useState2[1];
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function (_code) {
+      setCode(_code);
+    }, {
+      wait: 500
     }),
-    showBtn: mustConfirm,
-    onConfirm: handleConfirm
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '0 16px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    run = _useDebounceFn.run;
+  var _useBoolean = (0, _ahooks.useBoolean)(false),
+    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
+    visible = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    show = _useBoolean2$.setTrue,
+    hidden = _useBoolean2$.setFalse;
+  var _useBoolean3 = (0, _ahooks.useBoolean)(false),
+    _useBoolean4 = (0, _slicedToArray2.default)(_useBoolean3, 2),
+    hasError = _useBoolean4[0],
+    _useBoolean4$ = _useBoolean4[1],
+    hasErrorOn = _useBoolean4$.setTrue,
+    hasErrorOff = _useBoolean4$.setFalse;
+  var handleErrorCatch = (0, _ahooks.useMemoizedFn)(function (error) {
+    console.log(12121212, error);
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children || /*#__PURE__*/_react.default.createElement(_antd.Button, {
     block: true,
-    size: "small"
+    size: "small",
+    onClick: show
   }, (0, _utils.formatMessage)({
     id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
     label: '源码编辑'
-  }))));
+  })), /*#__PURE__*/_react.default.createElement(_luckDesign.LuckModal, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+      label: '源码编辑'
+    }),
+    width: "80vw",
+    height: "80vh",
+    fullScreen: true,
+    mask: false,
+    maskClosable: false,
+    closable: false,
+    visible: visible,
+    onClose: hidden
+  }, /*#__PURE__*/_react.default.createElement(_luckDesign.SplitPane, {
+    split: "vertical"
+  }, /*#__PURE__*/_react.default.createElement(_JSEditor2.default, {
+    ref: editorRef,
+    onChange: run
+  }, defaultValue || defaultCode), /*#__PURE__*/_react.default.createElement(_luckDesign.SplitPane.Pane, {
+    minSize: "400px"
+  }, /*#__PURE__*/_react.default.createElement(_RuntimeComp.default, {
+    onErrorCatch: handleErrorCatch
+  }, code)))));
 };
 var _default = exports.default = _JSEditor;

package/lib/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -1,18 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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 _utils = require("@luck-design-biz/base/utils");
+var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _Collapse = _interopRequireDefault(require("../../components/Collapse"));
-var _PopConfirm = _interopRequireDefault(require("../../components/PopConfirm"));
 var _CssEditor = _interopRequireDefault(require("../../components/code-editor/CssEditor"));
-var _FullScreenEditor = _interopRequireDefault(require("../../components/code-editor/FullScreenEditor"));
 var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
 var _StyleContext = require("./StyleContext");
 var _WidthHeight = _interopRequireDefault(require("./WidthHeight"));
@@ -26,6 +26,7 @@ var _BorderRadius = _interopRequireDefault(require("./BorderRadius"));
 var _Shadow = _interopRequireDefault(require("./Shadow"));
 var _Opacity = _interopRequireDefault(require("./Opacity"));
 var _Pointer = _interopRequireDefault(require("./Pointer"));
+var _luckDesign = require("luck-design");
 /**
  * 主样式面板
  */
@@ -33,21 +34,20 @@ var MainPanel = function MainPanel() {
   var style = (0, _StyleContext.useStyle)(true);
   var dispatch = (0, _StyleContext.useStyleDispatch)();
   var editorRef = (0, _StyleContext.useEditor)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var lasestStyle = (0, _ahooks.useLatest)(style);
   var handleCodeChange = (0, _react.useCallback)(function (code) {
     dispatch({
       type: 'code',
       payload: code
     });
+    // editorRef.current.editor.setValue(code)
   }, []);
-  var handleEditorLayoutChange = (0, _react.useCallback)(function (code) {
-    dispatch({
-      type: 'code',
-      payload: code
-    });
-    editorRef.current.editor.setValue(code);
-  }, []);
-  var handleEditorLoad = (0, _react.useCallback)(function () {
-    (0, _StyleContext.styleToEditor)(style).then(function (css) {
+  var handleOnload = (0, _react.useCallback)(function () {
+    (0, _StyleContext.styleToEditor)(lasestStyle.current).then(function (css) {
       editorRef.current.editor.setValue(css);
     });
   }, []);
@@ -60,24 +60,35 @@ var MainPanel = function MainPanel() {
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylePanel.default['style-editor']
-  }, /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
-    placement: "bottomRight",
-    title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
-      ref: editorRef,
-      EditorComponent: _CssEditor.default,
-      width: "280px",
-      height: "300px",
-      onChange: handleCodeChange,
-      onLayoutChange: handleEditorLayoutChange,
-      onLoad: handleEditorLoad
-    })
-  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_luckDesign.LuckModal, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+      label: '源码编辑'
+    }),
+    visible: show,
+    fullScreen: true,
+    mask: false,
+    footer: null,
+    maskClosable: false,
+    onClose: function onClose() {
+      setShow(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CssEditor.default, {
+    ref: editorRef,
+    width: "100%",
+    height: "100%",
+    onChange: handleCodeChange,
+    onLoad: handleOnload
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     type: "primary",
-    size: "small"
+    size: "small",
+    onClick: function onClick() {
+      setShow(true);
+    }
   }, (0, _utils.formatMessage)({
     id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
     label: '源码编辑'
-  })))), /*#__PURE__*/_react.default.createElement(_WidthHeight.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_WidthHeight.default, {
     field: "width",
     label: (0, _utils.formatMessage)({
       id: 'luckda.lowcode.painter.panel-section.style-panel.width',

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

@@ -66,7 +66,7 @@
 
         span {
           font-size: 12px;
-          color: #333;
+          color: var(--font-color);
           white-space: nowrap; // 防止文字换行
           overflow: hidden; // 隐藏溢出的文字
           text-overflow: ellipsis; // 使用省略号表示溢出

package/lib/lowcode/view/{errorBoundary.js → ErrorBoundary.js}

@@ -11,8 +11,13 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _react = _interopRequireWildcard(require("react"));
-var ErrorBoundary = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ErrorBoundary, _Component);
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "luckda-6530__sc-1ge5tx6-0"
+})(["width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;"]);
+var ErrorBoundary = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(ErrorBoundary, _PureComponent);
   var _super = (0, _createSuper2.default)(ErrorBoundary);
   function ErrorBoundary(props) {
     var _this;
@@ -26,11 +31,24 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
     return _this;
   }
   (0, _createClass2.default)(ErrorBoundary, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.children !== prevProps.children && this.state.hasError) {
+        // 重置 hasError 为 false 以便重新渲染子组件
+        this.setState({
+          hasError: false,
+          error: '',
+          errorInfo: ''
+        });
+      }
+    }
+  }, {
     key: "componentDidCatch",
     value: function componentDidCatch(error, errorInfo) {
+      var _this$props$onErrorCa, _this$props;
       // 在此处记录错误信息
       console.error(error);
-      this.props.onClear && this.props.onClear();
+      (_this$props$onErrorCa = (_this$props = this.props).onErrorCatch) === null || _this$props$onErrorCa === void 0 || _this$props$onErrorCa.call(_this$props, error, errorInfo);
       this.setState({
         hasError: true,
         error: error,
@@ -42,7 +60,7 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
     value: function render() {
       if (this.state.hasError) {
         // 如果有错误,显示备用 UI
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+        return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("h3", {
           style: {
             whiteSpace: 'pre-line',
             color: 'var(--luck-color-danger)',
@@ -65,5 +83,5 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
     }
   }]);
   return ErrorBoundary;
-}(_react.Component);
+}(_react.PureComponent);
 var _default = exports.default = ErrorBoundary;

package/lib/lowcode/view/Page.js

@@ -21,7 +21,7 @@ var _Wrapper = _interopRequireDefault(require("./lc-components/Wrapper"));
 var _Canvas = _interopRequireDefault(require("./Canvas"));
 var _constants = require("../constants");
 var _useCombinedRefs = _interopRequireDefault(require("../engine/tools/useCombinedRefs"));
-var _errorBoundary = _interopRequireDefault(require("./errorBoundary"));
+var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));
 var _page = _interopRequireDefault(require("./style/page.less"));
 var _excluded = ["className"];
 var LCPage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -46,11 +46,11 @@ var LCPage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
     return _rootRef.current;
   });
-  var handleClear = (0, _ahooks.useMemoizedFn)(function () {
+  var handleErrorCatch = (0, _ahooks.useMemoizedFn)(function () {
     ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, null);
   });
-  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, {
-    onClear: handleClear
+  return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, {
+    onErrorCatch: handleErrorCatch
   }, /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT,
     getTargetDom: getTargetDom

package/lib/lowcode/view/lc-components/Box/FunctionDesign.js

@@ -24,10 +24,12 @@ var FunctionDesign = function FunctionDesign(_ref) {
     return !children || _react.default.Children.count(children) === 0;
   }, [children]);
   return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({
-    className: (0, _classnames.default)(_index2.default['lc-component-box-design'], (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _index2.default.placeholder, isEmpty), className, !!className)),
+    className: (0, _classnames.default)(_index2.default['lc-component-box-design'], (0, _defineProperty2.default)({}, className, !!className)),
     style: (0, _objectSpread2.default)({
       minHeight: 60
     }, style)
-  }, props), isEmpty ? '点击组件库的组件或拖拽组件到这里' : children);
+  }, props), isEmpty ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _index2.default.placeholder
+  }, "\u70B9\u51FB\u7EC4\u4EF6\u5E93\u7684\u7EC4\u4EF6\u6216\u62D6\u62FD\u7EC4\u4EF6\u5230\u8FD9\u91CC") : children);
 };
 var _default = exports.default = FunctionDesign;

package/lib/lowcode/view/lc-components/Box/index.less

@@ -1,8 +1,8 @@
 .lc-component-box {
-  &-design.placeholder {
+  &-design > .placeholder {
+    min-height: 60px;
     width: 100%;
     height: 100%;
-    min-height: 60px;
     background-color: #f0f0f0;
     border: 1px dotted;
     color: #a7b1bd;

package/lib/lowcode/view/lc-components/Box/meta.json

@@ -14,7 +14,7 @@
       "disabled": true
     }
   ],
-  "css": "height:100%; width: auto; background-color: #fff;",
+  "css": "height:auto; width: auto; background-color: #fff;",
   "advance": {
     "events": [
       {

package/lib/lowcode/view/lc-components/JSX/RuntimeComp.js

@@ -14,10 +14,13 @@ var Babel = _interopRequireWildcard(require("@babel/standalone"));
 var LuckAntd = _interopRequireWildcard(require("luck-design/antd"));
 var LuckDesign = _interopRequireWildcard(require("luck-design"));
 var AHooks = _interopRequireWildcard(require("ahooks"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _lodash = require("lodash");
 var _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _helper = require("../../../engine/tools/helper");
-var _excluded = ["children"];
+var _ErrorBoundary = _interopRequireDefault(require("../../ErrorBoundary"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "onErrorCatch"];
 /**
  * 实时代码渲染组件
  * todo：沙箱上下文的集成
@@ -25,27 +28,39 @@ var _excluded = ["children"];
  */
 var RuntimeCom = function RuntimeCom(_ref) {
   var children = _ref.children,
+    onErrorCatch = _ref.onErrorCatch,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var ctx = (0, _ContextProvider.useContext)();
   var Component = AHooks.useCreation(function () {
     var code = _react.default.Children.toArray(children).join('').trim();
     if (!code) return _react.Fragment;
-
-    // 使用Babel转换代码
-    var transformedCode = Babel.transform(code, {
-      presets: ['react']
-    }).code;
-    var functionNameMatch = transformedCode.match(/function\s+([^\s(]+)/);
-    if (functionNameMatch && functionNameMatch.length > 1) {
-      var functionName = functionNameMatch[1];
-      var argsName = (0, _lodash.keys)(rest);
-      var _args = argsName.map(function (n) {
-        return rest[n];
-      });
-      return _helper.executeCode.apply(void 0, [ctx, "function() {".concat(transformedCode, "; return ").concat(functionName, ";}"), ['React', 'Antd', 'Luckd', 'libs'].concat((0, _toConsumableArray2.default)(argsName)), _react.default, LuckAntd, LuckDesign, (0, _objectSpread2.default)({}, AHooks)].concat((0, _toConsumableArray2.default)(_args)));
+    try {
+      // 使用Babel转换代码
+      var transformedCode = Babel.transform(code, {
+        presets: ['react']
+      }).code;
+      var functionNameMatch = transformedCode.match(/function\s+([^\s(]+)/);
+      if (functionNameMatch && functionNameMatch.length > 1) {
+        var functionName = functionNameMatch[1];
+        var argsName = (0, _lodash.keys)(rest);
+        var _args = argsName.map(function (n) {
+          return rest[n];
+        });
+        return _helper.executeCode.apply(void 0, [ctx, "function() {".concat(transformedCode, "; return ").concat(functionName, ";}"), ['React', 'Antd', 'Luckd', 'styled', 'libs'].concat((0, _toConsumableArray2.default)(argsName)), _react.default, LuckAntd, LuckDesign, _styledComponents.default, (0, _objectSpread2.default)({}, AHooks)].concat((0, _toConsumableArray2.default)(_args)));
+      }
+      return _react.Fragment;
+    } catch (e) {
+      return function () {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            color: 'red'
+          }
+        }, e.message);
+      };
     }
-    return _react.Fragment;
   }, [children]);
-  return /*#__PURE__*/_react.default.createElement(Component, null);
+  return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, {
+    onErrorCatch: onErrorCatch
+  }, /*#__PURE__*/_react.default.createElement(Component, null));
 };
 var _default = exports.default = RuntimeCom;

package/lib/lowcode/view/lc-components/Layout/meta.json

@@ -87,7 +87,7 @@
       "default": 16
     }
   ],
-  "css": "background-color: transparent;",
+  "css": "height:auto; background-color: transparent;",
   "advance": {
     "events": [
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luck-design-biz/luckda",
-  "version": "1.0.2-2",
+  "version": "1.0.2-4",
   "description": "前端配置管理中心业务组件库",
   "scripts": {
     "start": "cross-env NODE_OPTIONS=--max-old-space-size=10240 USER_RUNTIME=SITE RUNTIME=dev umi dev",