@luck-design-biz/luckda 0.0.24-2 → 0.0.25

package/lib/lowcode/painter/components/code-editor/JSEditor.js

@@ -12,18 +12,32 @@ var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helper
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard3(require("react"));
 var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
 var monaco = _interopRequireWildcard3(require("monaco-editor"));
+var _lodash = require("lodash");
 var _excluded = ["children"];
+function capitalizeFirstLetter(string) {
+  if ((0, _lodash.isNil)(string)) return null;
+  if (string.length === 0) {
+    return ''; // 如果字符串为空，返回空字符串
+  }
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
 var _provideCompletionItems = function provideCompletionItems(monaco, model, position, module) {
   var textUntilPosition = model.getValueInRange({
-    startLineNumber: position.lineNumber,
+    startLineNumber: 1,
     startColumn: 1,
     endLineNumber: position.lineNumber,
     endColumn: position.column
   });
-  if (textUntilPosition.endsWith(module.triggerWord + '.')) {
+
+  // 正则表达式匹配以 triggerWord 开头的任何单词
+  var pattern = new RegExp('\\b' + module.triggerWord + '[\\w.]*', 'i');
+  var match = textUntilPosition.match(pattern);
+  // console.log('match',match)
+  if (match) {
     var word = model.getWordUntilPosition(position);
     var range = {
       startLineNumber: position.lineNumber,
@@ -31,14 +45,10 @@ var _provideCompletionItems = function provideCompletionItems(monaco, model, pos
       startColumn: word.startColumn,
       endColumn: word.endColumn
     };
-
-    // 从模块中调用 completions 函数获取补全项数组
-    // 并动态转换 kind 字段
     return module.completions.map(function (completion) {
-      return Object.assign({}, completion, {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, completion), {}, {
         range: range,
-        // 动态转换 kind 字段
-        kind: monaco.languages.CompletionItemKind[completion.kind]
+        kind: monaco.languages.CompletionItemKind[capitalizeFirstLetter(completion.kind)]
       });
     });
   }
@@ -56,7 +66,8 @@ var setupAutocomplete = /*#__PURE__*/function () {
           });
         case 2:
           autoCompleteModules = _context.sent;
-          console.log('autoCompleteModules', autoCompleteModules);
+          // console.log('autoCompleteModules', autoCompleteModules);
+
           monaco.languages.registerCompletionItemProvider('javascript', (0, _defineProperty2.default)({
             triggerCharacters: ['.'],
             provideCompletionItems: function provideCompletionItems(model, position) {
@@ -72,7 +83,7 @@ var setupAutocomplete = /*#__PURE__*/function () {
               };
             }
           }, "triggerCharacters", ['.']));
-        case 5:
+        case 4:
         case "end":
           return _context.stop();
       }
@@ -87,7 +98,7 @@ var setupAutocomplete = /*#__PURE__*/function () {
  * JSEditor 组件是一个专为 JavaScript 编辑设计的 React 组件，它基于 BaseEditor 组件构建，并集成了自动完成功能。
  * 该组件利用 monaco-editor 提供的 API，通过 setupAutocomplete 函数设置自动完成项，从而增强代码编辑体验。
  * 自动完成逻辑包括从预定义的自动完成模块中加载补全项，以及在编辑器中键入特定字符（如"."）时触发补全建议。
- * 
+ *
  * @component
  * @example
  * <JSEditor
@@ -96,12 +107,12 @@ var setupAutocomplete = /*#__PURE__*/function () {
  * >
  *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
  * </JSEditor>
- * 
+ *
  * @param {Object} props - 组件的属性。
  * @param {React.ReactNode} children - 传递给 BaseEditor 的 children，通常是初始代码或内容。
  * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
  * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 BaseEditor 实例的方法。
- * 
+ *
  * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
  */
 var JSEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
@@ -112,6 +123,6 @@ var JSEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_BaseEditor.default, (0, _extends2.default)({
     ref: ref
-  }, rest));
+  }, rest), children);
 });
 var _default = exports.default = /*#__PURE__*/_react.default.memo(JSEditor);

package/lib/lowcode/painter/components/code-editor/JsonEditor.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
+var _excluded = ["children"];
+/**
+ * JsonEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
+ * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
+ * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
+ *
+ * @component
+ * @example
+ * const handleCssChange = (newCss, event) => {
+ *   console.log('CSS changed: ', newCss);
+ * };
+ * <JsonEditor
+ *   onChange={handleCssChange}
+ *   isFullscreen={false}
+ *   width="600px"
+ *   height="400px"
+ * >
+ *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
+ * </JsonEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
+ */
+var JsonEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_BaseEditor.default, (0, _extends2.default)({
+    ref: ref,
+    language: "json"
+  }, rest), children);
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(JsonEditor);

package/lib/lowcode/painter/{components/actions-editor → panel-section/ActionsEditor}/ActionEditor.js

@@ -36,6 +36,12 @@ var _RISK_LEVEL_OPTIONS_ = [{
     label: '一般'
   }),
   value: 'default'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".primary"),
+    label: '重要'
+  }),
+  value: 'primary'
 }, {
   label: (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".danger"),
@@ -49,6 +55,7 @@ var _RISK_LEVEL_OPTIONS_ = [{
   }),
   value: 'destroy'
 }];
+var _DEFAULT_CODE_ = 'function todo(ctx) {}';
 var ActionEditor = function ActionEditor(_ref) {
   var action = _ref.action,
     onChange = _ref.onChange;
@@ -62,8 +69,8 @@ var ActionEditor = function ActionEditor(_ref) {
     valueRef.current[field] = value;
     onChange(valueRef.current);
   });
-  var handOnEditorLoad = (0, _ahooks.useMemoizedFn)(function () {
-    editorRef.current.editor.setValue(action.actionCode);
+  var handleEditorLoad = (0, _ahooks.useMemoizedFn)(function () {
+    editorRef.current.editor.setValue(action.actionCode || _DEFAULT_CODE_);
   });
   return /*#__PURE__*/_react.default.createElement(_PopForm.PopForm, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".name"),
@@ -145,7 +152,7 @@ var ActionEditor = function ActionEditor(_ref) {
       width: "640px",
       height: "300px",
       onChange: handleCodeChange.current,
-      onLoad: handOnEditorLoad
+      onLoad: handleEditorLoad
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "code",

package/lib/lowcode/painter/{components/actions-editor → panel-section/ActionsEditor}/index.js

@@ -12,7 +12,7 @@ var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _ActionEditor = _interopRequireDefault(require("./ActionEditor"));
-var _PanelItem = _interopRequireDefault(require("../PanelItem"));
+var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
 var _SortBox = require("../../components/SortBox");
 var _ListEditor = require("../../components/ListEditor");
 var _PopConfirm = _interopRequireDefault(require("../../components/PopConfirm"));
@@ -35,7 +35,10 @@ var _DISPLAY_OPTIONS_ = [{
 }];
 var ActionsEditor = function ActionsEditor(_ref) {
   var defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    suppressDisplay = _ref.suppressDisplay,
+    suppressMax = _ref.suppressMax,
+    suppressMore = _ref.suppressMore;
   var valueRef = (0, _react.useRef)((0, _lodash.cloneDeep)(defaultValue));
   var _useReducer = (0, _react.useReducer)(_helper.listReducer, defaultValue.todoList || []),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
@@ -55,7 +58,17 @@ var ActionsEditor = function ActionsEditor(_ref) {
       },
       callback: function callback(newActions) {
         valueRef.current.todoList = newActions;
-        onChange(valueRef.current);
+        onChange((0, _lodash.cloneDeep)(valueRef.current));
+      }
+    });
+  });
+  var handleDelete = (0, _ahooks.useMemoizedFn)(function (action) {
+    dispatch({
+      type: 'delete',
+      payload: action.id,
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange((0, _lodash.cloneDeep)(valueRef.current));
       }
     });
   });
@@ -65,7 +78,7 @@ var ActionsEditor = function ActionsEditor(_ref) {
       payload: sortItems,
       callback: function callback(newActions) {
         valueRef.current.todoList = newActions;
-        onChange(valueRef.current);
+        onChange((0, _lodash.cloneDeep)(valueRef.current));
       }
     });
   });
@@ -84,7 +97,7 @@ var ActionsEditor = function ActionsEditor(_ref) {
     } else {
       valueRef.current[field] = value;
     }
-    onChange(valueRef.current);
+    onChange((0, _lodash.cloneDeep)(valueRef.current));
   });
   var renderItemRight = (0, _ahooks.useMemoizedFn)(function (action) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
@@ -116,6 +129,9 @@ var ActionsEditor = function ActionsEditor(_ref) {
       style: {
         marginRight: '8px',
         cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return handleDelete(action);
       }
     })));
   });
@@ -126,7 +142,7 @@ var ActionsEditor = function ActionsEditor(_ref) {
       width: '100%',
       padding: '0 16px'
     }
-  }, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+  }, !suppressDisplay && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
     suppressPadding: true,
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".display"),
@@ -139,7 +155,7 @@ var ActionsEditor = function ActionsEditor(_ref) {
     onChange: function onChange(value) {
       return handleValueChange('display', value);
     }
-  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+  })), !suppressMax && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
     suppressPadding: true,
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".max"),
@@ -151,6 +167,18 @@ var ActionsEditor = function ActionsEditor(_ref) {
     onChange: function onChange(value) {
       return handleValueChange('max', value);
     }
+  })), !suppressMore && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true,
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".moreText"),
+      label: '更多显示文字'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    defaultValue: defaultValue.moreText,
+    onChange: function onChange(e) {
+      return handleValueChange('moreText', e.target.value);
+    }
   })), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
     datas: todoList.map(function (_ref2) {
       var id = _ref2.id;

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

@@ -0,0 +1,98 @@
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _lodash = require("lodash");
+var _impexp = _interopRequireDefault(require("../style/impexp.less"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
+var ImpExp = function ImpExp(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useSetState = (0, _ahooks.useSetState)(defaultValue || {}),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  (0, _ahooks.useUpdateEffect)(function () {
+    onChange(state);
+  }, [state]);
+  var handleCheckboxChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    if (e.target.value === 'import') {
+      setState({
+        import: e.target.checked
+      });
+    } else if (e.target.value === 'export') {
+      setState({
+        export: e.target.checked
+      });
+    }
+  });
+  var handleInputChange = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var value = e.target.value.trim();
+    var _val = value === '' ? true : value;
+    console.log(_val);
+    if (field === 'import') {
+      setState({
+        import: _val
+      });
+    } else if (field === 'export') {
+      setState({
+        export: _val
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Row, {
+    gutter: [0, 8],
+    className: _impexp.default['lc-painter-panel-section-impexp']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 6
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    value: "import",
+    checked: !!state.import,
+    onChange: handleCheckboxChange
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.import',
+    label: '导入'
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 18
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: (0, _lodash.isString)(state.import) ? state.import : '',
+    onChange: function onChange(e) {
+      return handleInputChange('import', e);
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".impUrl.placeholder"),
+      label: '请输入模版ID或自定义接口'
+    })
+  })), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 6
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    value: "export",
+    checked: state.export,
+    onChange: handleCheckboxChange
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.export',
+    label: '导出'
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 18
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: (0, _lodash.isString)(state.export) ? state.export : '',
+    onChange: function onChange(e) {
+      return handleInputChange('export', e);
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".expUrl.placeholder"),
+      label: '请输入自定义接口'
+    })
+  })));
+};
+var _default = exports.default = ImpExp;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
+var _FullScreenEditor = _interopRequireDefault(require("../components/code-editor/FullScreenEditor"));
+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;
+  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
+    }),
+    showBtn: mustConfirm,
+    onConfirm: handleConfirm
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    block: true,
+    size: "small"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+    label: '源码编辑'
+  }))));
+};
+var _default = exports.default = _JSEditor;

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

@@ -45,7 +45,7 @@ var MainPanel = function MainPanel() {
       payload: code
     });
   }, []);
-  var handOnEditorLoad = (0, _react.useCallback)(function () {
+  var handleEditorLoad = (0, _react.useCallback)(function () {
     editorRef.current.editor.setValue(currentCoce.current);
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -65,7 +65,7 @@ var MainPanel = function MainPanel() {
       width: "280px",
       height: "300px",
       onChange: handleCodeChange,
-      onLoad: handOnEditorLoad
+      onLoad: handleEditorLoad
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
     type: "primary",

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

@@ -55,7 +55,7 @@ function StyleProvider(_ref) {
         throw new Error();
     }
   };
-  var _useReducer = (0, _react.useReducer)(styleReducer, parseCSS(value)),
+  var _useReducer = (0, _react.useReducer)(styleReducer, parseCSS(":root{".concat(value, "}"))),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     style = _useReducer2[0],
     dispatch = _useReducer2[1];