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

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

@@ -2,9 +2,14 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
-var ErrorBoundary = /*#__PURE__*/function (_Component) {
-  _inherits(ErrorBoundary, _Component);
+import React, { PureComponent } from 'react';
+import styled from 'styled-components';
+var Wrapper = styled.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) {
+  _inherits(ErrorBoundary, _PureComponent);
   var _super = _createSuper(ErrorBoundary);
   function ErrorBoundary(props) {
     var _this;
@@ -18,11 +23,24 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(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,
@@ -34,7 +52,7 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
     value: function render() {
       if (this.state.hasError) {
         // 如果有错误,显示备用 UI
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+        return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("h3", {
           style: {
             whiteSpace: 'pre-line',
             color: 'var(--luck-color-danger)',
@@ -57,5 +75,5 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
     }
   }]);
   return ErrorBoundary;
-}(Component);
+}(PureComponent);
 export default ErrorBoundary;

package/es/lowcode/view/Page.js

@@ -14,7 +14,7 @@ import Wrapper from "./lc-components/Wrapper";
 import Canvas from "./Canvas";
 import { LC_BUILDIN_UNIT_KEY } from "../constants";
 import useCombinedRefs from "../engine/tools/useCombinedRefs";
-import ErrorBoundary from "./errorBoundary";
+import ErrorBoundary from "./ErrorBoundary";
 import styles from "./style/page.less";
 var LCPage = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -38,11 +38,11 @@ var LCPage = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var getTargetDom = useMemoizedFn(function () {
     return _rootRef.current;
   });
-  var handleClear = useMemoizedFn(function () {
+  var handleErrorCatch = useMemoizedFn(function () {
     ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, null);
   });
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
-    onClear: handleClear
+    onErrorCatch: handleErrorCatch
   }, /*#__PURE__*/React.createElement(Wrapper, {
     id: LC_BUILDIN_UNIT_KEY.PAGE_ROOT,
     getTargetDom: getTargetDom

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

@@ -17,10 +17,12 @@ var FunctionDesign = function FunctionDesign(_ref) {
     return !children || React.Children.count(children) === 0;
   }, [children]);
   return /*#__PURE__*/React.createElement(Index, _extends({
-    className: classNames(styles['lc-component-box-design'], _defineProperty(_defineProperty({}, styles.placeholder, isEmpty), className, !!className)),
+    className: classNames(styles['lc-component-box-design'], _defineProperty({}, className, !!className)),
     style: _objectSpread({
       minHeight: 60
     }, style)
-  }, props), isEmpty ? '点击组件库的组件或拖拽组件到这里' : children);
+  }, props), isEmpty ? /*#__PURE__*/React.createElement("div", {
+    className: styles.placeholder
+  }, "\u70B9\u51FB\u7EC4\u4EF6\u5E93\u7684\u7EC4\u4EF6\u6216\u62D6\u62FD\u7EC4\u4EF6\u5230\u8FD9\u91CC") : children);
 };
 export default FunctionDesign;

package/es/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/es/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/es/lowcode/view/lc-components/JSX/RuntimeComp.js

@@ -1,15 +1,19 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
+var _excluded = ["children", "onErrorCatch"];
 import React, { Fragment } from 'react';
 import * as Babel from '@babel/standalone';
 import * as LuckAntd from 'luck-design/antd';
 import * as LuckDesign from 'luck-design';
 import * as AHooks from 'ahooks';
+import styled from 'styled-components';
 import { keys } from 'lodash';
 import { useContext } from "../../../engine/provider/ContextProvider";
 import { executeCode } from "../../../engine/tools/helper";
+import ErrorBoundary from "../../ErrorBoundary";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 /**
  * 实时代码渲染组件
@@ -18,27 +22,39 @@ import { executeCode } from "../../../engine/tools/helper";
  */
 var RuntimeCom = function RuntimeCom(_ref) {
   var children = _ref.children,
+    onErrorCatch = _ref.onErrorCatch,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ctx = useContext();
   var Component = AHooks.useCreation(function () {
     var code = React.Children.toArray(children).join('').trim();
     if (!code) return 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 = keys(rest);
-      var _args = argsName.map(function (n) {
-        return rest[n];
-      });
-      return executeCode.apply(void 0, [ctx, "function() {".concat(transformedCode, "; return ").concat(functionName, ";}"), ['React', 'Antd', 'Luckd', 'libs'].concat(_toConsumableArray(argsName)), React, LuckAntd, LuckDesign, _objectSpread({}, AHooks)].concat(_toConsumableArray(_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 = keys(rest);
+        var _args = argsName.map(function (n) {
+          return rest[n];
+        });
+        return executeCode.apply(void 0, [ctx, "function() {".concat(transformedCode, "; return ").concat(functionName, ";}"), ['React', 'Antd', 'Luckd', 'styled', 'libs'].concat(_toConsumableArray(argsName)), React, LuckAntd, LuckDesign, styled, _objectSpread({}, AHooks)].concat(_toConsumableArray(_args)));
+      }
+      return Fragment;
+    } catch (e) {
+      return function () {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: 'red'
+          }
+        }, e.message);
+      };
     }
-    return Fragment;
   }, [children]);
-  return /*#__PURE__*/React.createElement(Component, null);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    onErrorCatch: onErrorCatch
+  }, /*#__PURE__*/React.createElement(Component, null));
 };
 export default RuntimeCom;

package/es/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/lib/lowcode/constants/event-topics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGE_LOAD_MOUNT = exports.LANG_SETTING_SELECT = exports.COMPONENT_UNMOUNT = exports.COMPONENT_SETTING_CLICK = exports.COMPONENT_REPOSITIONING = exports.COMPONENT_MOUNT = exports.COMPONENT_MODIFY = exports.COMPONENT_MODAL_TOGGLE = exports.COMPONENT_HOVER = exports.COMPONENT_DRAG_OVER = exports.COMPONENT_DRAG_END = exports.COMPONENT_DELETE = exports.COMPONENT_APPEND = exports.COMPONENT_ACTIVE = void 0;
+exports.PAGE_LOAD_MOUNT = exports.LANG_SETTING_SELECT = exports.DESIGN_OPERATE_SAVE = exports.COMPONENT_UNMOUNT = exports.COMPONENT_SETTING_CLICK = exports.COMPONENT_REPOSITIONING = exports.COMPONENT_MOUNT = exports.COMPONENT_MODIFY = exports.COMPONENT_MODAL_TOGGLE = exports.COMPONENT_HOVER = exports.COMPONENT_DRAG_OVER = exports.COMPONENT_DRAG_END = exports.COMPONENT_DELETE = exports.COMPONENT_APPEND = exports.COMPONENT_ACTIVE = void 0;
 /******************************** 通用Topic开始 ********************************/
 
 var PAGE_LOAD_MOUNT = exports.PAGE_LOAD_MOUNT = 'page-load-mount';
@@ -36,6 +36,8 @@ var COMPONENT_MODAL_TOGGLE = exports.COMPONENT_MODAL_TOGGLE = 'component-modal-t
 var COMPONENT_DRAG_OVER = exports.COMPONENT_DRAG_OVER = 'component-drag-over';
 // 组件拖放完成时的事件
 var COMPONENT_DRAG_END = exports.COMPONENT_DRAG_END = 'component-drag-end';
+// 保存事件
+var DESIGN_OPERATE_SAVE = exports.DESIGN_OPERATE_SAVE = 'design-operate-save';
 
 /******************************* Design Topic结束 *******************************/
 

package/lib/lowcode/engine/meta/box.props.default.json

@@ -6,7 +6,7 @@
   "group": "container",
   "groupName": "布局",
   "order": 3,
-  "css": "height:100%; width: auto; background-color: #fff;",
+  "css": "height:auto; width: auto; background-color: #fff;",
   "advance": {
     "events": {}
   }

package/lib/lowcode/engine/meta/box.props.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/engine/meta/fielddatadic.props.default.json

@@ -0,0 +1,16 @@
+{
+  "component": "FieldDatadic",
+  "name": "数据字典",
+  "group": "field",
+  "desc": "数据字典类型表单项",
+  "icon": "icon-fieldstring",
+  "groupName": "表单项",
+  "order": 1,
+  "display": "select",
+  "multiple": false,
+  "isTree": false,
+  "allowClear": false,
+  "advance": {
+    "events": {}
+  }
+}

package/lib/lowcode/engine/meta/fielddatadic.props.json

@@ -0,0 +1,73 @@
+{
+  "component": "FieldDatadic",
+  "name": "数据字典",
+  "group": "field",
+  "desc": "数据字典类型表单项",
+  "icon": "icon-fieldstring",
+  "groupName": "表单项",
+  "order": 1,
+  "props": [
+    {
+      "key": "alias",
+      "name": "字典key",
+      "type": "string"
+    },
+    {
+      "key": "valueField",
+      "name": "实际值字段",
+      "type": "string"
+    },
+    {
+      "key": "labelField",
+      "name": "翻译值字段",
+      "type": "string"
+    },
+    {
+      "key": "display",
+      "name": "展现形式",
+      "type": "segmented",
+      "options": [
+        {
+          "label": "Select",
+          "value": "select"
+        },
+        {
+          "label": "Radio",
+          "value": "radio"
+        }
+      ],
+      "default": "select"
+    },
+    {
+      "key": "multiple",
+      "name": "多选",
+      "desc": "仅在展现形式为Select时有效",
+      "type": "switch",
+      "default": false
+    },
+    {
+      "key": "isTree",
+      "name": "树形结构",
+      "desc": "用于规定树形结构的数据字典，仅在展现形式为Select时有效",
+      "type": "switch",
+      "default": false
+    },
+    {
+      "key": "allowClear",
+      "name": "允许清除",
+      "desc": "仅在展现形式为Select时有效",
+      "type": "switch",
+      "default": false
+    }
+  ],
+  "advance": {
+    "events": [
+      {
+        "key": "onChange",
+        "name": "数据变化事件",
+        "desc": "在数据变化事件时，执行方法",
+        "func": "function onChange(data) {\n\t\n}"
+      }
+    ]
+  }
+}

package/lib/lowcode/engine/meta/layout.props.default.json

@@ -6,7 +6,7 @@
   "groupName": "布局",
   "desc": "布局容器是一种提供列比例、列间距、行间距和样式等配置选项的元素，用于创建灵活的页面布局。它使用户能够轻松组织和排列组件，并实现各种复杂的布局需求。",
   "order": 1,
-  "css": "background-color: transparent;",
+  "css": "height:auto; background-color: transparent;",
   "columnRatio": "12:3:9",
   "columnSpacing": 16,
   "lineSpacing": 16,

package/lib/lowcode/engine/meta/layout.props.json

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

package/lib/lowcode/painter/DesignOperator.js

@@ -121,10 +121,10 @@ var DesignOperator = function DesignOperator(_ref) {
     };
   }, [operatorId.selector]);
   var activeDomPosition = (0, _ahooks.useCreation)(function () {
-    var _getElement;
+    var _getElement, _canvas$current;
     if (!operatorId.selector && !operatorId.selectorTarget) return null;
     var targetTop = (_getElement = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement === void 0 ? void 0 : _getElement.getBoundingClientRect().top;
-    var delat = targetTop - canvas.current.getBoundingClientRect().top;
+    var delat = targetTop - (((_canvas$current = canvas.current) === null || _canvas$current === void 0 ? void 0 : _canvas$current.getBoundingClientRect().top) || 0);
     return {
       top: delat > 24 ? -24 : 0
     };
@@ -142,6 +142,10 @@ var DesignOperator = function DesignOperator(_ref) {
   }, {
     target: canvas
   });
+  (0, _ahooks.useKeyPress)('ctrl.s', function (e) {
+    e.preventDefault();
+    context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+  });
   (0, _ahooks.useEventListener)('mousemove', function (event) {
     var elem = event.target;
     var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
@@ -275,7 +279,8 @@ var DesignOperator = function DesignOperator(_ref) {
         _modal.api.doOpen();
         currentModal.current = id;
       } else if (!toggle) {
-        canvas.current.style.removeProperty('overflow');
+        var _canvas$current2;
+        (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 || _canvas$current2.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);

package/lib/lowcode/painter/DesignToolbar.js

@@ -94,20 +94,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }),
     updatePageDataLoading = _useRequest2.loading,
     runAsync = _useRequest2.runAsync;
-  (0, _react.useEffect)(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
-      var _langList = _ref2.langList;
-      return setLangList(_langList);
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (!showPreview) {
-      setUserId(void 0);
-    }
-  }, [showPreview]);
   var handleSave = (0, _ahooks.useMemoizedFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
     var _yield$runAsync, code;
     return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
@@ -152,6 +138,23 @@ var DesignToolbar = function DesignToolbar(_ref) {
       }
     }, _callee);
   })), []);
+  (0, _react.useEffect)(function () {
+    var lssid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
+      setLangList(_langList);
+      console.log(11111, _langList);
+    }).watch();
+    var dasid = context.$subscriber(context.topics.DESIGN_OPERATE_SAVE).on(handleSave).watch();
+    return function () {
+      context.$unsubscriber(context.topics.LANG_SETTING_SELECT, lssid);
+      context.$unsubscriber(context.topics.DESIGN_OPERATE_SAVE, dasid);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!showPreview) {
+      setUserId(void 0);
+    }
+  }, [showPreview]);
   var handleClearCache = (0, _ahooks.useMemoizedFn)(function () {
     _antd.Modal.confirm({
       title: (0, _utils.formatMessage)({
@@ -333,20 +336,14 @@ var DesignToolbar = function DesignToolbar(_ref) {
       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 = 4;
-              break;
+            if (!updatePageDataLoading) {
+              if ((0, _ContextProvider.getNeedPrompt)()) {
+                context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+              }
+              context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+              setShowPreview(true);
             }
-            _context3.next = 4;
-            return handleSave();
-          case 4:
-            context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-            setShowPreview(true);
-          case 6:
+          case 1:
           case "end":
             return _context3.stop();
         }
@@ -385,7 +382,9 @@ var DesignToolbar = function DesignToolbar(_ref) {
       fontSize: 14,
       margin: '0 11px 0 5px'
     },
-    onClick: handleSave
+    onClick: function onClick() {
+      return context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+    }
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     visible: show,
     width: 1024,

package/lib/lowcode/painter/Panel.js

@@ -117,7 +117,7 @@ var Panel = function Panel() {
         oldValue: oldValue,
         newValue: newValue
       });
-      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+      if (repositioning || field === 'css') context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
         id: _id
       });
     });

package/lib/lowcode/painter/components/DragDrop/DragDropContext.js

@@ -54,9 +54,16 @@ function _default(_ref) {
             break;
           case 'add':
             {
-              var compName = fromComp.component.toLowerCase();
-              var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
-              (0, _ContextProvider.moveNode)(null, id, actionSide, "".concat(compName, "_").concat((0, _utils.suid)()), json);
+              ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).once(function () {
+                var compName = fromComp.component.toLowerCase();
+                var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
+                ctx.$publisher(ctx.topics.COMPONENT_SETTING_CLICK, {
+                  data: json
+                });
+              }).watch();
+              ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, {
+                target: id
+              });
             }
             break;
         }

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

@@ -1,20 +1,88 @@
 "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 = _default;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _TreeDragDropWrapper = _interopRequireDefault(require("./DragDrop/TreeDragDropWrapper"));
+var _antd = require("luck-design/antd");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+/**
+ * 树节点组件
+ * @param {Object} props - 组件属性
+ * @param {Object} props.item - 代表树节点的对象
+ * @returns {React.Component} 返回包裹在拖拽功能中的节点编辑组件
+ */
 function _default(_ref) {
   var item = _ref.item;
-  var EditorNode = function EditorNode() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "item"
-    }, item.name);
-  };
   return /*#__PURE__*/_react.default.createElement(_TreeDragDropWrapper.default, {
     item: item
-  }, /*#__PURE__*/_react.default.createElement(EditorNode, null));
-}
+  }, /*#__PURE__*/_react.default.createElement(EditorNode, {
+    item: item
+  }));
+}
+
+/**
+ * 编辑节点组件，提供查看和编辑树节点名称的功能
+ * @param {Object} props - 组件属性
+ * @param {Object} props.item - 代表树节点的对象
+ * @returns {React.Component} 根据编辑状态渲染输入框或仅文本
+ */
+var EditorNode = function EditorNode(_ref2) {
+  var item = _ref2.item;
+  // console.log('item', item)
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    edited = _useState2[0],
+    setEdited = _useState2[1];
+  var _useState3 = (0, _react.useState)(item.name),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    editedValue = _useState4[0],
+    setEditedValue = _useState4[1];
+  var inputRef = (0, _react.useRef)(null); // 创建一个 ref 来引用输入框
+
+  var handleDoubleClick = (0, _react.useCallback)(function () {
+    if (!item.buildIn) setEdited(true);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function () {
+    setEdited(false);
+  }, []);
+  var handPressEnter = (0, _react.useCallback)(function (e) {
+    (0, _ContextProvider.modifyNode)(item.id, {
+      name: e.target.value
+    });
+    setEdited(false);
+  });
+  var handleInputChange = (0, _react.useCallback)(function (e) {
+    setEditedValue(e.target.value);
+  });
+
+  // 使用 useEffect 钩子来处理聚焦逻辑
+  (0, _react.useEffect)(function () {
+    if (edited) {
+      // 如果 edited 为 true，聚焦到输入框
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [edited]); // 依赖 edited 状态变化
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "item",
+    onDoubleClick: handleDoubleClick
+  }, edited ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "treenode-editor"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    ref: inputRef // 将 ref 应用到 Input 组件
+    ,
+    onChange: handleInputChange,
+    value: editedValue,
+    size: "small",
+    onBlur: handleBlur,
+    onPressEnter: handPressEnter
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "treenode-info"
+  }, item.name));
+};

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

@@ -11,7 +11,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var monaco = _interopRequireWildcard(require("monaco-editor"));
-var _excluded = ["onChange", "onLayoutChange", "isFullscreen", "style"],
+var _excluded = ["onChange", "isFullscreen", "style", "onLoad"],
   _excluded2 = ["children", "language", "options"];
 /**
  * BaseEditor 组件是一个封装了 monaco 编辑器的 React 组件，支持前向 ref 引用。
@@ -48,9 +48,9 @@ var _excluded = ["onChange", "onLayoutChange", "isFullscreen", "style"],
  */
 var BaseEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var onChange = _ref.onChange,
-    onLayoutChange = _ref.onLayoutChange,
     isFullscreen = _ref.isFullscreen,
     style = _ref.style,
+    onLoad = _ref.onLoad,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var children = props.children,
     _props$language = props.language,
@@ -60,6 +60,9 @@ var BaseEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var editorRef = (0, _react.useRef)(null);
   var editorInstance = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (onLoad) onLoad();
+  }, []);
 
   // 初始化编辑器实例
   (0, _react.useEffect)(function () {
@@ -87,10 +90,11 @@ var BaseEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       editorInstance.current.onDidChangeModelContent(function (event) {
         if (onChange) onChange(editorInstance.current.getValue(), event);
       });
-      // 监听布局变化，重新赋值，解决编辑器全屏切换时，编辑器内容不会更新的问题
-      editorInstance.current.onDidLayoutChange(function (event) {
-        if (onLayoutChange) onLayoutChange(editorInstance.current.getValue(), event);
-      });
+
+      // 监听布局变化，重新赋值，解决编辑器全屏切换时，编辑器空白的问题
+      // editorInstance.current.onDidLayoutChange((event) => {
+      //   if (onChange) onChange(editorInstance.current.getValue(), event);
+      // });
     }
     return function () {
       var _editorInstance$curre;