@luck-design-biz/luckda 0.0.25 → 0.0.26

package/lib/lowcode/painter/Outline.js

@@ -23,8 +23,10 @@ var _outline = _interopRequireDefault(require("./style/outline.less"));
 var _excluded = ["props", "children"];
 var TreeNode = _antd.Tree.TreeNode;
 var PAGE_CELL = [_constants.CELL_KEY.PAGE_HEADER, _constants.CELL_KEY.PAGE_CONTENT, _constants.CELL_KEY.PAGE_FOOTER];
-var Outline = function Outline(_ref) {
-  var open = _ref.open;
+var Outline = function Outline() {
+  var modalTreeRef = (0, _react.useRef)();
+  var pageTreeRef = (0, _react.useRef)();
+  var openModal = (0, _react.useRef)(void 0);
   var clickBySelf = (0, _react.useRef)(false);
   var context = (0, _ContextProvider.useLDContext)();
   var _useState = (0, _react.useState)(null),
@@ -43,8 +45,6 @@ var Outline = function Outline(_ref) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     pageExpandedKeys = _useState8[0],
     setPageExpandedKeys = _useState8[1];
-  var latestModalExpandedKeysRef = (0, _ahooks.useLatest)(modalExpandedKeys);
-  var lastPageExpandedKeysRef = (0, _ahooks.useLatest)(pageExpandedKeys);
   (0, _react.useEffect)(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       setSelectedKey(payload.id);
@@ -52,35 +52,36 @@ var Outline = function Outline(_ref) {
         clickBySelf.current = false;
         return;
       }
-      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/'),
-        _split2 = (0, _slicedToArray2.default)(_split, 1),
-        _root = _split2[0];
-      if (!PAGE_CELL.includes(_root)) {
-        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
-      } else {
-        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
-      }
+      setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
     }).watch();
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
+  }, []);
+  var handleSelect = function handleSelect(_key) {
     clickBySelf.current = true;
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+      id: _key,
+      cellNode: context.componentMap.get(_key).dom
     } : null);
+  };
+  var handleOpenModal = (0, _ahooks.useMemoizedFn)(function (_key) {
+    var _comp = context.componentMap.get(_key);
+    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
+    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
+    _comp.api.doOpen();
+    openModal.current = _key;
   });
-  var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {
-    var props = _ref2.props,
-      children = _ref2.children,
-      childrenMap = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref, _excluded);
     if (props) {
       return /*#__PURE__*/_react.default.createElement(TreeNode, {
         icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
           type: "layout"
         }),
-        title: props.name,
+        title: props.label,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -91,9 +92,6 @@ var Outline = function Outline(_ref) {
     });
   });
   (0, _ahooks.useDeepCompareLayoutEffect)(function () {
-    if (!context.pageData) {
-      return;
-    }
     var _reduce = (0, _lodash.reduce)(context.pageData.children, function (result, _id) {
         var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
         result[resultKey][_id] = context.pageData[_id];
@@ -134,7 +132,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.modal',
+      id: 'luckda.lowcode.model',
       label: '模态视图层'
     }),
     style: {
@@ -144,6 +142,7 @@ var Outline = function Outline(_ref) {
       padding: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -151,51 +150,41 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref3, _ref4) {
-      var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
-        _key = _ref5[0];
-      var selected = _ref4.selected,
-        node = _ref4.node;
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
+        _key = _ref4[0];
+      var selected = _ref3.selected,
+        node = _ref3.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        // 选中节点是模态视图，则打开模态视图组件
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: _key
-        });
+        handleOpenModal(_key);
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        // 取消选中节点是模态视图，则关闭模态视图
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: false,
-          id: _key
-        });
+        var _comp = context.componentMap.get(openModal.current);
+        _comp.api.doClose();
+        openModal.current = void 0;
         handleSelect(null);
       } else {
-        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, node.props.eventKey), '/'),
-          _split4 = (0, _slicedToArray2.default)(_split3, 1),
-          parentModal = _split4[0];
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: parentModal
-        });
+        var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, node.props.eventKey), '/'),
+          _split2 = (0, _slicedToArray2.default)(_split, 1),
+          parentModal = _split2[0];
+        if (!openModal.current || openModal.current !== parentModal) {
+          handleOpenModal(parentModal);
+        }
       }
     },
     expandedKeys: modalExpandedKeys,
-    onExpand: function onExpand(_keys, _ref6) {
-      var expanded = _ref6.expanded,
-        node = _ref6.node;
+    onExpand: function onExpand(_keys, _ref5) {
+      var expanded = _ref5.expanded,
+        node = _ref5.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: node.props.eventKey
-        });
+        handleOpenModal(node.props.eventKey);
       }
       setModalExpandedKeys(_keys);
     }
-  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: pageTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -203,13 +192,15 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref7, _ref8) {
-      var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
-        _key = _ref9[0];
-      var node = _ref8.node;
-      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-        toggle: false
-      });
+    onSelect: function onSelect(_ref6, _ref7) {
+      var _ref8 = (0, _slicedToArray2.default)(_ref6, 1),
+        _key = _ref8[0];
+      var node = _ref7.node;
+      if (openModal.current) {
+        var _prevComp = context.componentMap.get(openModal.current);
+        _prevComp.api.doClose();
+        openModal.current = void 0;
+      }
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,

package/lib/lowcode/painter/Panel.js

@@ -1,170 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _ahooks = require("ahooks");
-var _antd = require("luck-design/antd");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _lodash = require("lodash");
-var _utils = require("@luck-design-biz/base/utils");
-var _ContextProvider = require("../engine/provider/ContextProvider");
-var _AttrsPanel = _interopRequireDefault(require("./components/AttrsPanel"));
-var _StylePanel = _interopRequireDefault(require("./panel-section/StylePanel"));
-var _AdvancePanel = _interopRequireDefault(require("./components/AdvancePanel"));
-var _dataProcess = require("../engine/tools/dataProcess");
 var _panel = _interopRequireDefault(require("./style/panel.less"));
-var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
-var _TAB_LIST_ = [{
-  title: (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".attrs"),
-    label: '属性'
-  }),
-  key: 'attrs'
-}, {
-  title: (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".styles"),
-    label: '样式'
-  }),
-  key: 'styles'
-}, {
-  title: (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".advance"),
-    label: '高级'
-  }),
-  key: 'advance'
-}];
 var Panel = function Panel() {
-  var activeTabRef = (0, _react.useRef)(null);
-  var underLineRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeNode = _useState2[0],
-    setActiveNode = _useState2[1];
-  var _useState3 = (0, _react.useState)('attrs'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    activeTabKey = _useState4[0],
-    setActiveTabKey = _useState4[1];
-  var context = (0, _ContextProvider.useLDContext)();
-  var meta = (0, _ahooks.useCreation)(function () {
-    return (0, _lodash.isNil)(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-  }, [activeNode]);
-  var handleChange = (0, _ahooks.useMemoizedFn)(function (field, value, repositioning) {
-    var component = context.componentMap.get(activeNode.node.id);
-    var _component$api$getSel = component.api.getSelfAndParentLCData(),
-      node = _component$api$getSel.node;
-    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
-    (0, _dataProcess.modifyById)(cloneData, activeNode.node.id, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, node.props), {}, (0, _defineProperty2.default)({}, field, value)));
-    context._setPageData(cloneData).then(function (newData) {
-      context.$publisher(context.topics.COMPONENT_MODIFY, {
-        id: activeNode.node.id,
-        pageData: (0, _lodash.cloneDeep)(newData)
-      });
-      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
-        id: activeNode.node.id
-      });
-    });
-  });
-  (0, _react.useEffect)(function () {
-    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      setActiveTabKey('attrs');
-      if (!payload.id) {
-        setActiveNode(null);
-        return;
-      }
-      var component = context.componentMap.get(payload.id);
-      var _component$api$getSel2 = component.api.getSelfAndParentLCData(),
-        node = _component$api$getSel2.node;
-      var levelNodes = (0, _lodash.takeRight)(component.api.getLevelNodes(), 4);
-      setActiveNode({
-        node: node.props,
-        level: levelNodes
-      });
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
-    };
-  }, []);
-  (0, _react.useLayoutEffect)(function () {
-    underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
-  }, [activeTabKey, !!activeNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _panel.default['lc-painter-panel']
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_panel.default['lc-painter-panel-topbar'], (0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode))
-  }, /*#__PURE__*/_react.default.createElement(_antd.Breadcrumb, {
-    separator: ">",
-    style: {
-      fontSize: 12
-    }
-  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref) {
-    var id = _ref.id,
-      name = _ref.name;
-    return /*#__PURE__*/_react.default.createElement(_antd.Breadcrumb.Item, {
-      key: id,
-      className: (0, _classnames.default)((0, _defineProperty2.default)({}, _panel.default['active-node-level'], id !== activeNode.node.id)),
-      onMouseEnter: function onMouseEnter() {
-        if (id === activeNode.node.id) return;
-        context.$publisher(context.topics.COMPONENT_HOVER, {
-          id: id
-        });
-      },
-      onMouseLeave: function onMouseLeave() {
-        if (id === activeNode.node.id) return;
-        context.$publisher(context.topics.COMPONENT_HOVER, null);
-      },
-      onClick: function onClick() {
-        if (id === activeNode.node.id) return;
-        context.$publisher(context.topics.COMPONENT_ACTIVE, {
-          id: id
-        });
-      }
-    }, name);
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_panel.default['lc-painter-panel-tabbar'], (0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode))
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: _panel.default.headerList
-  }, (activeNode !== null && activeNode !== void 0 && activeNode.node.css ? _TAB_LIST_ : [_TAB_LIST_[0], _TAB_LIST_[2]]).map(function (_item) {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      key: _item.key,
-      ref: activeTabKey === _item.key ? activeTabRef : null,
-      className: (0, _classnames.default)((0, _defineProperty2.default)({}, _panel.default.actived, activeTabKey === _item.key)),
-      onClick: function onClick() {
-        return setActiveTabKey(_item.key);
-      }
-    }, _item.title);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    ref: underLineRef,
-    className: _panel.default.underline
-  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/_react.default.createElement(_AttrsPanel.default, {
-    meta: meta,
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
-    onChange: function onChange(field, value, repositioning) {
-      return handleChange(field, value, repositioning);
-    }
-  }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/_react.default.createElement(_StylePanel.default, {
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.css,
-    onChange: function onChange(_, newCss) {
-      return handleChange('css', newCss);
-    }
-  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/_react.default.createElement(_AdvancePanel.default, {
-    meta: meta,
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
-    onChange: function onChange(val) {
-      return handleChange('advance', val);
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_panel.default['lc-painter-panel-empty'], (0, _defineProperty2.default)({}, _panel.default.hidden, !!activeNode))
-  }, (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".empty"),
-    label: '请在左侧画布选中节点'
-  })));
+  }, "Panel");
 };
 var _default = exports.default = Panel;

package/lib/lowcode/painter/Ribbon.js

@@ -1,41 +1,24 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireWildcard3 = 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard3(require("react"));
+var _ahooks = require("ahooks");
+var _umi = require("umi");
 var _luckDesign = require("luck-design");
 var _antd = require("luck-design/antd");
-var _Outline = _interopRequireDefault(require("./Outline"));
-var _Components = _interopRequireDefault(require("./Components"));
-var _I18n = _interopRequireDefault(require("./I18n"));
 var _utils = require("@luck-design-biz/base/utils");
+var _lodash = require("lodash");
 var _ribbon = _interopRequireDefault(require("./style/ribbon.less"));
 var _WIDTH_ = 48;
-var _DRAWER_PROPS = {
-  placement: 'left',
-  mask: false,
-  getContainer: false,
-  zIndex: 2000,
-  headerStyle: {
-    borderBottom: 'none'
-  },
-  style: {
-    position: 'absolute',
-    left: _WIDTH_
-  },
-  bodyStyle: {
-    overflowY: 'auto',
-    height: 'calc(100% - 55px)',
-    padding: 0
-  }
-};
 var _DRAWER_OUTLINE_ = {
   width: 300,
   key: 'outline',
@@ -46,7 +29,7 @@ var _DRAWER_COMPONENTS_ = {
   width: 310,
   key: 'components',
   title: '组件',
-  fix: true
+  fix: false
 };
 var _DRAWER_I18N_ = {
   width: 450,
@@ -59,6 +42,46 @@ var Ribbon = function Ribbon() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     drawer = _useState2[0],
     setDrawer = _useState2[1];
+  var Detail = (0, _ahooks.useCreation)(function () {
+    return (0, _umi.dynamic)({
+      loader: function () {
+        var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+          var name, _yield$import, Comp;
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!drawer) {
+                  _context.next = 7;
+                  break;
+                }
+                name = (0, _lodash.upperFirst)(drawer.key);
+                _context.next = 4;
+                return function (specifier) {
+                  return new Promise(function (r) {
+                    return r(specifier);
+                  }).then(function (s) {
+                    return (0, _interopRequireWildcard2.default)(require(s));
+                  });
+                }("./".concat(name));
+              case 4:
+                _yield$import = _context.sent;
+                Comp = _yield$import.default;
+                return _context.abrupt("return", Comp);
+              case 7:
+                return _context.abrupt("return", null);
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function loader() {
+          return _loader.apply(this, arguments);
+        }
+        return loader;
+      }()
+    });
+  }, [drawer]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_luckDesign.Box, {
     className: _ribbon.default['lc-painter-ribbon'],
     width: _WIDTH_,
@@ -101,50 +124,28 @@ var Ribbon = function Ribbon() {
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
     }
-  }))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, (0, _extends2.default)({
-    title: drawer ? (0, _utils.formatMessage)({
-      id: "luckda.lowcode.".concat(drawer.key),
-      label: drawer.title
-    }) : '',
-    width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
-    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key,
-    onClose: function onClose() {
-      return setDrawer(null);
-    }
-  }, _DRAWER_PROPS, {
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _DRAWER_PROPS.style), {}, {
-      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? 'block' : 'none'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Outline.default, {
-    open: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key
-  })), /*#__PURE__*/_react.default.createElement(_antd.Drawer, (0, _extends2.default)({
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
     title: drawer ? (0, _utils.formatMessage)({
       id: "luckda.lowcode.".concat(drawer.key),
       label: drawer.title
     }) : '',
+    placement: "left",
     width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
-    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key,
-    onClose: function onClose() {
-      return setDrawer(null);
-    }
-  }, _DRAWER_PROPS, {
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _DRAWER_PROPS.style), {}, {
-      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? 'block' : 'none'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Components.default, null)), /*#__PURE__*/_react.default.createElement(_antd.Drawer, (0, _extends2.default)({
-    title: drawer ? (0, _utils.formatMessage)({
-      id: "luckda.lowcode.".concat(drawer.key),
-      label: drawer.title
-    }) : '',
-    width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
-    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key,
+    visible: !!drawer,
+    mask: false,
+    getContainer: false,
     onClose: function onClose() {
       return setDrawer(null);
+    },
+    style: {
+      position: 'absolute',
+      left: _WIDTH_
+    },
+    bodyStyle: {
+      overflowY: 'auto',
+      height: 'calc(100% - 55px)',
+      padding: 0
     }
-  }, _DRAWER_PROPS, {
-    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)));
+  }, Detail && /*#__PURE__*/_react.default.createElement(Detail, null)));
 };
 var _default = exports.default = Ribbon;

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

@@ -1,99 +1,26 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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 _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
 var _panelItem = _interopRequireDefault(require("../style/panel-item.less"));
 /**
- * `PanelItem` 组件用于展示属性面板中的单个属性项。
- * 它支持展示一个标签（属性名称）及对应的组件（例如输入框、选择器等），并可通过传入的 `addon` 属性添加额外的内容。
- * 此组件支持折叠功能，可以通过 `collapsed` 属性控制初始折叠状态。
- *
- * @component
- * @example
- * ```jsx
- * <PanelItem
- *   label="属性名称"
- *   collapsed={false}
- *   addon={<div>额外内容</div>}
- * >
- *   <input type="text" />
- * </PanelItem>
- * ```
- *
- * @param {Object} props 组件接收的参数。
- * @param {string} props.label 显示的属性名称。如果标签以 `#` 开头，则不显示。
- * @param {boolean} [props.collapsed=true] 初始是否折叠。默认为 `true`。
- * @param {React.ReactNode} props.addon 当属性项展开时，可以在下方显示额外内容。
- * @param {React.ReactNode} props.children 对应于属性名称的组件，可以是输入框、下拉菜单等 React 节点。
- *
- * @returns {React.Element} 渲染属性名称、对应的组件以及可选的额外内容。
+ * 属性面板属性行组件
+ * @param {string} label 属性名
+ * @param {React.ReactNode} component 属性组件
+ * @returns 
  */
 function _default(_ref) {
-  var field = _ref.field,
-    label = _ref.label,
-    desc = _ref.desc,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed,
-    addon = _ref.addon,
-    suppressPadding = _ref.suppressPadding,
-    children = _ref.children;
-  var _useState = (0, _react.useState)(collapsed),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    curClps = _useState2[0],
-    setCurClps = _useState2[1];
-  var HandleClick = (0, _ahooks.useMemoizedFn)(function () {
-    if (!addon) return;
-    setCurClps(!curClps);
-  });
-  var tip = (0, _ahooks.useCreation)(function () {
-    var str = void 0;
-    if (field) {
-      str = "\u5C5E\u6027\uFF1A".concat(field);
-    }
-    if (desc) {
-      str += "".concat(str ? ' | ' : '', "\u8BF4\u660E\uFF1A").concat(desc);
-    }
-    return str;
-  }, [field, desc]);
-  (0, _react.useEffect)(function () {
-    setCurClps(collapsed);
-  }, [collapsed]);
+  var label = _ref.label,
+    component = _ref.component;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_panelItem.default['lc-painter-components-panelitem'], (0, _defineProperty2.default)({}, _panelItem.default['no-padding'], !!suppressPadding))
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _panelItem.default['panelrow']
-  }, label && !(0, _lodash.startsWith)(label, '#') && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_panelItem.default['item-label']).concat(addon ? ' panel-pointer' : ''),
-    onClick: HandleClick
-  }, addon && /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    className: _panelItem.default['item-icon'],
-    type: !curClps ? 'down' : 'right'
-  }), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
-    overlayStyle: {
-      fontSize: '12px'
-    },
-    title: tip,
-    getPopupContainer: function getPopupContainer() {
-      return document.getElementById('lc-design-workspace');
-    }
+    className: _panelItem.default['lc-painter-components-panelitem']
   }, /*#__PURE__*/_react.default.createElement("span", {
-    style: desc ? {
-      cursor: 'help'
-    } : null
-  }, label))), /*#__PURE__*/_react.default.createElement("span", {
+    className: _panelItem.default['item-label']
+  }, label), /*#__PURE__*/_react.default.createElement("span", {
     className: _panelItem.default['item-component']
-  }, children)), !curClps && addon && /*#__PURE__*/_react.default.createElement("div", {
-    className: _panelItem.default['addon']
-  }, addon));
+  }, component));
 }