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

package/lib/lowcode/painter/DesignToolbar.js

@@ -26,7 +26,20 @@ var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var _apiUrl = require("../constants/api-url");
 var _helper = require("../engine/tools/helper");
+var _TipIcon = _interopRequireDefault(require("./components/TipIcon"));
 var _excluded = ["key", "label"];
+var CodeSvg = function CodeSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.4749 9.0916L5.45264 6.20703L5.45439 5.93457V4.69707L0.91748 9.0916L5.45439 13.4844V12.2469L5.45264 11.9744L2.4749 9.0916ZM15.2067 9.00723L12.229 6.12441L12.2272 5.85195V4.61445L16.7642 9.00723L12.2272 13.4018V12.1625L12.229 11.89L15.2067 9.00723ZM8.12451 15.0295H6.76045L9.55713 2.80566H10.9212L8.12451 15.0295Z",
+    fill: "currentColor"
+  }));
+};
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
@@ -233,9 +246,16 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "laptop"
   })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile')),
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile'))
+    // onClick={() => setActivedTarget('mobile')}
+    ,
     onClick: function onClick() {
-      return setActivedTarget('mobile');
+      _antd.Modal.info({
+        title: (0, _utils.formatMessage)({
+          id: 'luckda.lowcode.not.mobile',
+          label: '此功能暂未开放'
+        })
+      });
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "mobile"
@@ -273,9 +293,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     style: {
       width: 'auto',
-      fontSize: 12
+      fontSize: 12,
+      cursor: 'pointer'
     },
-    className: _design.default['toolbar-item'],
+    className: _design.default.hoverPrimary,
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
         target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
@@ -289,7 +310,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: "small",
     style: {
-      fontSize: 12,
+      fontSize: 14,
       margin: '0 4px 0 2px'
     },
     disabled: clearCacheLoading,
@@ -297,65 +318,75 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, (0, _utils.formatMessage)({
     id: 'luckda.lowcode.design.toolbar.clear',
     label: '清除缓存'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
+  })), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.debug',
+      label: '调试'
+    }),
+    type: "bug",
     style: {
       fontSize: 12,
-      margin: '0 4px 0 2px'
+      margin: '0 8px 0 6px'
     },
-    disabled: updatePageDataLoading,
+    className: _design.default.hoverPrimary,
     onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
       return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
+            if (updatePageDataLoading) {
+              _context3.next = 6;
+              break;
+            }
             if (!(0, _ContextProvider.getNeedPrompt)()) {
-              _context3.next = 3;
+              _context3.next = 4;
               break;
             }
-            _context3.next = 3;
+            _context3.next = 4;
             return handleSave();
-          case 3:
+          case 4:
             context.$publisher(context.topics.COMPONENT_ACTIVE, null);
             setShowPreview(true);
-          case 5:
+          case 6:
           case "end":
             return _context3.stop();
         }
       }, _callee3);
     }))
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.preview',
-    label: '预览'
-  }), /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "bug"
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    type: "primary",
-    disabled: updatePageDataLoading,
-    style: {
-      fontSize: 12,
-      padding: '0 7px 0 0',
-      marginLeft: 2
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.code',
+      label: 'Schema面板'
+    }),
+    component: CodeSvg,
+    className: _design.default.hoverPrimary,
     style: {
-      display: 'inline-block',
-      padding: '0 7px'
+      fontSize: 14,
+      margin: '0 8px 0 6px'
     },
-    onClick: handleSave
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.save',
-    label: '保存'
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (!updatePageDataLoading) setShow(true);
+          case 1:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.save',
+      label: '保存'
+    }),
+    type: "save",
+    className: _design.default.hoverPrimary,
     style: {
-      display: 'inline-block'
+      fontSize: 14,
+      margin: '0 11px 0 5px'
     },
-    onClick: function onClick() {
-      return setShow(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "eye"
-  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    onClick: handleSave
+  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     visible: show,
     width: 1024,
     getContainer: function getContainer() {
@@ -409,10 +440,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
           setUserId(void 0);
         }
       }
-    }, userOptions.map(function (_ref6) {
-      var key = _ref6.key,
-        label = _ref6.label,
-        rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+    }, userOptions.map(function (_ref7) {
+      var key = _ref7.key,
+        label = _ref7.label,
+        rest = (0, _objectWithoutProperties2.default)(_ref7, _excluded);
       return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
         key: key,
         value: key
@@ -426,7 +457,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     },
     bodyStyle: {
       height: 'calc(100% - 54px)',
-      backgroundColor: '#F0F2F5'
+      backgroundColor: 'var(--ant-component-background,#F0F2F5)'
     },
     visible: showPreview,
     destroyOnClose: true,

package/lib/lowcode/painter/Ribbon.js

@@ -16,6 +16,7 @@ var _Outline = _interopRequireDefault(require("./Outline"));
 var _Components = _interopRequireDefault(require("./Components"));
 var _I18n = _interopRequireDefault(require("./I18n"));
 var _utils = require("@luck-design-biz/base/utils");
+var _expect = _interopRequireDefault(require("./expect"));
 var _ribbon = _interopRequireDefault(require("./style/ribbon.less"));
 var _WIDTH_ = 48;
 var _DRAWER_PROPS = {
@@ -76,6 +77,10 @@ var Ribbon = function Ribbon() {
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "apartment",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key && '#1d79f2',
+      fontSize: 20
+    },
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? null : _DRAWER_OUTLINE_);
     }
@@ -87,6 +92,10 @@ var Ribbon = function Ribbon() {
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "appstore",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key && '#1d79f2',
+      fontSize: 20
+    },
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? null : _DRAWER_COMPONENTS_);
     }
@@ -98,6 +107,10 @@ var Ribbon = function Ribbon() {
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "global",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key && '#1d79f2',
+      fontSize: 20
+    },
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
     }
@@ -145,6 +158,6 @@ var Ribbon = function Ribbon() {
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _DRAWER_PROPS.style), {}, {
       display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? 'block' : 'none'
     })
-  }), /*#__PURE__*/_react.default.createElement(_I18n.default, null)));
+  }), /*#__PURE__*/_react.default.createElement(_expect.default, null)));
 };
 var _default = exports.default = Ribbon;

package/lib/lowcode/painter/components/ActionBindModal.js

@@ -25,13 +25,9 @@ var _ACTION_CATEGORY_ = [{
     id: "".concat(_I18N_PREFIX_, ".pageActions"),
     label: '页面行为'
   })
-}, {
-  key: 'trigger',
-  label: (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".trigger"),
-    label: '触发器'
-  })
-}, {
+},
+// { key: 'trigger', label: formatMessage({ id: `${_I18N_PREFIX_}.trigger`, label: '触发器' }) },
+{
   key: 'custom',
   label: (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".custom"),

package/lib/lowcode/painter/components/AdvancePanel.js

@@ -34,7 +34,7 @@ var EventItem = _styledComponents.default.div.withConfig({
 })(["display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #e5e6e8;border-radius:6px;margin-bottom:6px;font-size:12px;i{color:rgba(0,0,0,0.4);cursor:pointer;}i:not(:last-child){margin-right:6px;}"]);
 var _DEFAULT_FUNC_ = 'function isTrue() {\n return true; \n}';
 var AdvancePanel = function AdvancePanel(_ref) {
-  var _value$render2;
+  var _value$render, _value$render2;
   var meta = _ref.meta,
     nodeId = _ref.nodeId,
     target = _ref.target,
@@ -59,6 +59,10 @@ var AdvancePanel = function AdvancePanel(_ref) {
     var _meta$advance;
     return (0, _lodash.keyBy)((meta === null || meta === void 0 || (_meta$advance = meta.advance) === null || _meta$advance === void 0 ? void 0 : _meta$advance.events) || [], 'key');
   }, [meta]);
+  var _useState5 = (0, _react.useState)((value === null || value === void 0 || (_value$render = value.render) === null || _value$render === void 0 ? void 0 : _value$render.code) || _DEFAULT_FUNC_),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    editorValue = _useState6[0],
+    setEditorValue = _useState6[1];
   var handleEventClick = (0, _ahooks.useMemoizedFn)(function (e) {
     var payload = e.item.props.payload;
     setEvent((0, _objectSpread3.default)((0, _objectSpread3.default)({}, payload), {}, {
@@ -108,6 +112,9 @@ var AdvancePanel = function AdvancePanel(_ref) {
       }
     }));
   });
+  var handleEditorLayoutChange = function handleEditorLayoutChange(code) {
+    setEditorValue(code);
+  };
   var eventsMenu = (0, _ahooks.useCreation)(function () {
     var _meta$advance2;
     return /*#__PURE__*/_react.default.createElement(_antd.Menu, {
@@ -148,15 +155,15 @@ var AdvancePanel = function AdvancePanel(_ref) {
     },
     suppressIcon: true,
     extraRender: function extraRender() {
-      var _value$render;
       return /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
         placement: "left",
         title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
           ref: editorRef,
           EditorComponent: _JSEditor.default,
+          onLayoutChange: handleEditorLayoutChange,
           width: "600px",
           height: "400px"
-        }, (value === null || value === void 0 || (_value$render = value.render) === null || _value$render === void 0 ? void 0 : _value$render.code) || _DEFAULT_FUNC_),
+        }, editorValue),
         showBtn: true,
         onConfirm: handleRenderComfirm
       }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {

package/lib/lowcode/painter/components/Collapse.js

@@ -12,32 +12,32 @@ var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _collapse = _interopRequireDefault(require("../style/collapse.less"));
 var _antd = require("luck-design/antd");
-/**
- * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
- * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
- * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
- *
- * @component
- * @example
- * <Collapse
- *   field="exampleField"
- *   label="示例标签"
- *   desc="这是一个用于演示的折叠组件"
- *   defaultCollapsed={true}
- *   next={() => console.log('Custom next function executed')}
- * >
- *   <p>这里是可折叠的内容</p>
- * </Collapse>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
- * @param {string} [props.field] - 与折叠内容相关联的字段名。
- * @param {string} props.label - 折叠区域的标签名称。
- * @param {string} [props.desc] - 关于折叠内容的描述信息。
- * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
- * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
+/**
+ * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
+ * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
+ * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
+ *
+ * @component
+ * @example
+ * <Collapse
+ *   field="exampleField"
+ *   label="示例标签"
+ *   desc="这是一个用于演示的折叠组件"
+ *   defaultCollapsed={true}
+ *   next={() => console.log('Custom next function executed')}
+ * >
+ *   <p>这里是可折叠的内容</p>
+ * </Collapse>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
+ * @param {string} [props.field] - 与折叠内容相关联的字段名。
+ * @param {string} props.label - 折叠区域的标签名称。
+ * @param {string} [props.desc] - 关于折叠内容的描述信息。
+ * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
+ * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/components/ColorInput.js

@@ -17,30 +17,30 @@ var _antd = require("luck-design/antd");
 var _colorInput = _interopRequireDefault(require("../style/color-input.less"));
 var _reactColor = require("react-color");
 var _excluded = ["value", "onChange", "wrapperStyle"];
-/**
- * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
- * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
- * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
- * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
- *
- * @component
- * @example
- * const handleColorChange = (newColor) => {
- *   console.log('Selected color:', newColor);
- * };
- * <ColorInput
- *   value="rgba(255, 0, 0, 0.5)"
- *   onChange={handleColorChange}
- *   wrapperStyle={{ margin: '20px' }}
- * />
- *
- * @param {Object} props - 组件的属性。
- * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
- * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
- * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
- * @param {Object} rest - 传递给 Input 组件的其他属性。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
+/**
+ * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
+ * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
+ * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
+ * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
+ *
+ * @component
+ * @example
+ * const handleColorChange = (newColor) => {
+ *   console.log('Selected color:', newColor);
+ * };
+ * <ColorInput
+ *   value="rgba(255, 0, 0, 0.5)"
+ *   onChange={handleColorChange}
+ *   wrapperStyle={{ margin: '20px' }}
+ * />
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
+ * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
+ * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
+ * @param {Object} rest - 传递给 Input 组件的其他属性。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
  */
 var ColorInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,