@luck-design-biz/luckda 0.0.25-9 → 0.0.26-1

package/es/lowcode/painter/Outline.js

@@ -4,22 +4,23 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["props", "children"];
 import React, { useRef, useState, useEffect } from 'react';
-import { useMemoizedFn, useDeepCompareLayoutEffect, useLatest } from 'ahooks';
-import { uniq, split, reduce, isString } from 'lodash';
+import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
+import { uniq, split, reduce } from 'lodash';
 import classNames from 'classnames';
 import { Card, Tree, Icon } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { useContext, useGet } from "../engine/provider/ContextProvider";
-import { LC_BUILDIN_UNIT_KEY, LC_BUILDIN_UNIT_KEY_LIST } from "../constants";
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { CELL_KEY } from "../constants";
 import { getPathById } from "../engine/tools/dataProcess";
 import styles from "./style/outline.less";
-import TreeEditor from "./components/TreeEditor";
 var TreeNode = Tree.TreeNode;
-var Outline = function Outline(_ref) {
-  var open = _ref.open;
+var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
+var Outline = function Outline() {
+  var modalTreeRef = useRef();
+  var pageTreeRef = useRef();
+  var openModal = useRef(void 0);
   var clickBySelf = useRef(false);
-  var ctx = useContext();
-  var pageData = useGet();
+  var context = useLDContext();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     pageAndModal = _useState2[0],
@@ -36,50 +37,43 @@ var Outline = function Outline(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     pageExpandedKeys = _useState8[0],
     setPageExpandedKeys = _useState8[1];
-  var latestModalExpandedKeysRef = useLatest(modalExpandedKeys);
-  var lastPageExpandedKeysRef = useLatest(pageExpandedKeys);
   useEffect(function () {
-    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (!isString(payload.target)) {
-        setSelectedKey(null);
-        return;
-      }
-      setSelectedKey(payload.target);
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setSelectedKey(payload.id);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      var _split = split(getPathById(pageData, payload.target), '/'),
-        _split2 = _slicedToArray(_split, 1),
-        _root = _split2[0];
-      if (!LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
-        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(pageData, payload.target), '/')))));
-      } else {
-        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(pageData, payload.target), '/')))));
-      }
+      setModalExpandedKeys(uniq([].concat(_toConsumableArray((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
     }).watch();
     return function () {
-      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [pageData]);
-  var handleSelect = useMemoizedFn(function (_key) {
+  }, []);
+  var handleSelect = function handleSelect(_key) {
     clickBySelf.current = true;
-    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
-      target: _key
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key,
+      cellNode: context.componentMap.get(_key).dom
     } : null);
+  };
+  var handleOpenModal = 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 = useMemoizedFn(function (_ref2) {
-    var props = _ref2.props,
-      children = _ref2.children,
-      childrenMap = _objectWithoutProperties(_ref2, _excluded);
+  var render = useMemoizedFn(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = _objectWithoutProperties(_ref, _excluded);
     if (props) {
       return /*#__PURE__*/React.createElement(TreeNode, {
         icon: /*#__PURE__*/React.createElement(Icon, {
           type: "layout"
         }),
-        title: /*#__PURE__*/React.createElement(TreeEditor, {
-          item: props
-        }),
+        title: props.label,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -90,12 +84,9 @@ var Outline = function Outline(_ref) {
     });
   });
   useDeepCompareLayoutEffect(function () {
-    if (!pageData) {
-      return;
-    }
-    var _reduce = reduce(pageData.children, function (result, _id) {
-        var resultKey = LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
-        result[resultKey][_id] = pageData[_id];
+    var _reduce = reduce(context.pageData.children, function (result, _id) {
+        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = context.pageData[_id];
         if (!result[resultKey].children) {
           result[resultKey].children = [];
         }
@@ -111,13 +102,13 @@ var Outline = function Outline(_ref) {
       page: render(page),
       modal: render(modal)
     });
-  }, [pageData]);
+  }, [context.pageData]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-outline']
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
+    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === CELL_KEY.PAGE_ROOT)),
     onClick: function onClick() {
-      return handleSelect(LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+      return handleSelect(CELL_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "layout"
@@ -133,7 +124,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: formatMessage({
-      id: 'luckda.lowcode.modal',
+      id: 'luckda.lowcode.model',
       label: '模态视图层'
     }),
     style: {
@@ -143,6 +134,7 @@ var Outline = function Outline(_ref) {
       padding: 0
     }
   }, /*#__PURE__*/React.createElement(Tree, {
+    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -150,51 +142,41 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref3, _ref4) {
-      var _ref5 = _slicedToArray(_ref3, 1),
-        _key = _ref5[0];
-      var selected = _ref4.selected,
-        node = _ref4.node;
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = _slicedToArray(_ref2, 1),
+        _key = _ref4[0];
+      var selected = _ref3.selected,
+        node = _ref3.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        // 选中节点是模态视图，则打开模态视图组件
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: _key
-        });
+        handleOpenModal(_key);
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        // 取消选中节点是模态视图，则关闭模态视图
-        ctx.$publisher(ctx.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 = split(getPathById(pageData, node.props.eventKey), '/'),
-          _split4 = _slicedToArray(_split3, 1),
-          parentModal = _split4[0];
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: parentModal
-        });
+        var _split = split(getPathById(context.pageData, node.props.eventKey), '/'),
+          _split2 = _slicedToArray(_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);
-        ctx.$publisher(ctx.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.createElement(Tree, {
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/React.createElement(Tree, {
+    ref: pageTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -202,13 +184,15 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref7, _ref8) {
-      var _ref9 = _slicedToArray(_ref7, 1),
-        _key = _ref9[0];
-      var node = _ref8.node;
-      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-        toggle: false
-      });
+    onSelect: function onSelect(_ref6, _ref7) {
+      var _ref8 = _slicedToArray(_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/es/lowcode/painter/Panel.js

@@ -1,241 +1,8 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { Breadcrumb } from 'luck-design/antd';
-import classNames from 'classnames';
-import { takeRight, isNil, reduce, get, isString } from 'lodash';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { useContext, useTask, addNode, deleteNode } from "../engine/provider/ContextProvider";
-import AttrsPanel from "./components/AttrsPanel";
-import StylePanel from "./panel-section/StylePanel";
-import AdvancePanel from "./components/AdvancePanel";
+import React, { useState, useEffect, useRef } from 'react';
 import styles from "./style/panel.less";
-import { LC_BUILDIN_UNIT_KEY } from "../constants";
-var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
-var _TAB_LIST_ = [{
-  title: formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".attrs"),
-    label: '属性'
-  }),
-  key: 'attrs'
-}, {
-  title: formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".css"),
-    label: '样式'
-  }),
-  key: 'css'
-}, {
-  title: formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".advance"),
-    label: '高级'
-  }),
-  key: 'advance'
-}];
 var Panel = function Panel() {
-  var _activeNode$$target;
-  var activeTabRef = useRef(null);
-  var underLineRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeNode = _useState2[0],
-    setActiveNode = _useState2[1];
-  var _useState3 = useState('attrs'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeTabKey = _useState4[0],
-    setActiveTabKey = _useState4[1];
-  var context = useContext();
-  var task = useTask('modify');
-  var meta = useCreation(function () {
-    if (isNil(activeNode)) return null;
-    try {
-      var _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-      if (!isNil(activeNode === null || activeNode === void 0 ? void 0 : activeNode.$target)) {
-        var setValueKey = function setValueKey(items) {
-          items.forEach(function (item) {
-            if (item.next) {
-              setValueKey(item.next.props);
-            } else if (item.props) {
-              setValueKey(item.props);
-            } else {
-              item.valueKey = "".concat(activeNode.$target.keyPath, ".").concat(item.key);
-            }
-          });
-        };
-        setValueKey(_meta.props);
-      }
-      return _meta;
-    } catch (e) {
-      return null;
-    }
-  }, [activeNode]);
-  var handleChange = useMemoizedFn(function (field, value) {
-    var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      repositioning = _ref.repositioning,
-      before = _ref.before;
-    if (field === 'enableHeader') {
-      if (value) {
-        var headerMeta = require("../engine/meta/pageheader.props.default.json");
-        addNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
-          buildIn: true
-        }));
-      } else {
-        deleteNode(LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
-      }
-    } else if (field === 'enableFooter') {
-      if (value) {
-        var footerMeta = require("../engine/meta/pagefooter.props.default.json");
-        addNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
-          buildIn: true
-        }));
-      } else {
-        deleteNode(LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
-      }
-    }
-    var targetId = isNil(activeNode.$target) ? activeNode.node.id : activeNode.$target.ancestorId;
-    var component = context.componentMap.get(targetId);
-    var node = component.api.getSelfData();
-    var oldValue = _defineProperty({}, field, get(node.props, field));
-    var newValue = _defineProperty({}, field, value);
-    if (before) {
-      before(handleChange);
-    }
-    task(targetId, newValue).then(function () {
-      context.$publisher(context.topics.COMPONENT_MODIFY, {
-        id: targetId,
-        oldValue: oldValue,
-        newValue: newValue
-      });
-      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
-        id: targetId
-      });
-    });
-  });
-  useEffect(function () {
-    var tid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      setActiveTabKey('attrs');
-      if (!payload.target) {
-        setActiveNode(null);
-        return;
-      }
-      if (isString(payload.target)) {
-        var component = context.componentMap.get(payload.target);
-        var node = component.api.getSelfData();
-        var levelNodes = takeRight(component.api.getLevelNodes(), 4);
-        setActiveNode({
-          node: node.props,
-          level: levelNodes
-        });
-      } else {
-        var _component = payload.target.element.getAttribute('data-__component');
-        var ancestor = context.componentMap.get(payload.target.ancestorId);
-        var _levelNodes = takeRight(ancestor.api.getLevelNodes(), 3);
-        setActiveNode({
-          node: {
-            id: payload.target.id,
-            component: _component
-          },
-          level: [].concat(_toConsumableArray(_levelNodes), [{
-            id: payload.target.id,
-            name: payload.target.label
-          }]),
-          $target: payload.target
-        });
-      }
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, tid);
-    };
-  }, []);
-  useLayoutEffect(function () {
-    underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
-  }, [activeTabKey, meta === null || meta === void 0 ? void 0 : meta.component]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-panel']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-panel-topbar'], _defineProperty({}, styles.hidden, !activeNode))
-  }, /*#__PURE__*/React.createElement(Breadcrumb, {
-    separator: ">",
-    style: {
-      fontSize: 12
-    }
-  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref2) {
-    var id = _ref2.id,
-      name = _ref2.name;
-    return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
-      key: id,
-      className: classNames(_defineProperty({}, styles['active-node-level'], id !== activeNode.node.id)),
-      onMouseEnter: function onMouseEnter() {
-        if (id === activeNode.node.id) return;
-        context.$publisher(context.topics.COMPONENT_HOVER, {
-          target: 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, {
-          target: id
-        });
-      }
-    }, name);
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: styles.headerList
-  }, reduce(_TAB_LIST_, function (ret, item) {
-    if (item.key === 'css' && !!(meta !== null && meta !== void 0 && meta.css)) {
-      ret.push(item);
-    } else if (item.key === 'advance' && !!(meta !== null && meta !== void 0 && meta.advance)) {
-      ret.push(item);
-    } else if (item.key === 'attrs') {
-      ret.push(item);
-    }
-    return ret;
-  }, []).map(function (_item) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: _item.key,
-      ref: activeTabKey === _item.key ? activeTabRef : null,
-      className: classNames(_defineProperty({}, styles.actived, activeTabKey === _item.key)),
-      onClick: function onClick() {
-        return setActiveTabKey(_item.key);
-      }
-    }, _item.title);
-  })), /*#__PURE__*/React.createElement("div", {
-    ref: underLineRef,
-    className: styles.underline
-  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement(AttrsPanel, {
-    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    ancestorId: activeNode === null || activeNode === void 0 || (_activeNode$$target = activeNode.$target) === null || _activeNode$$target === void 0 ? void 0 : _activeNode$$target.ancestorId,
-    meta: meta,
-    onChange: function onChange(field, value, params) {
-      return handleChange(field, value, params);
-    }
-  }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
-    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    onChange: function onChange(_, newCss) {
-      return handleChange('css', newCss);
-    }
-  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement(AdvancePanel, {
-    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    target: activeNode === null || activeNode === void 0 ? void 0 : activeNode.$target,
-    meta: meta,
-    onChange: function onChange(val) {
-      return handleChange(isNil(activeNode.$target) ? 'advance' : "".concat(activeNode.$target.keyPath, ".advance"), val);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-panel-empty'], _defineProperty({}, styles.hidden, !!activeNode))
-  }, formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".empty"),
-    label: '请在左侧画布选中节点'
-  })));
+  }, "Panel");
 };
 export default Panel;

package/es/lowcode/painter/Ribbon.js

@@ -1,33 +1,15 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
+import { useCreation } from 'ahooks';
+import { dynamic } from 'umi';
 import { Box } from 'luck-design';
 import { Icon, Tooltip, Drawer } from 'luck-design/antd';
-import Outline from "./Outline";
-import Components from "./Components";
-import I18n from "./I18n";
 import { formatMessage } from '@luck-design-biz/base/utils';
+import { upperFirst } from 'lodash';
 import styles from "./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',
@@ -38,7 +20,7 @@ var _DRAWER_COMPONENTS_ = {
   width: 310,
   key: 'components',
   title: '组件',
-  fix: true
+  fix: false
 };
 var _DRAWER_I18N_ = {
   width: 450,
@@ -51,6 +33,40 @@ var Ribbon = function Ribbon() {
     _useState2 = _slicedToArray(_useState, 2),
     drawer = _useState2[0],
     setDrawer = _useState2[1];
+  var Detail = useCreation(function () {
+    return dynamic({
+      loader: function () {
+        var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var name, _yield$import, Comp;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!drawer) {
+                  _context.next = 7;
+                  break;
+                }
+                name = upperFirst(drawer.key);
+                _context.next = 4;
+                return import("./".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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     className: styles['lc-painter-ribbon'],
     width: _WIDTH_,
@@ -93,50 +109,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.createElement(Drawer, _extends({
-    title: drawer ? 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: _objectSpread(_objectSpread({}, _DRAWER_PROPS.style), {}, {
-      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? 'block' : 'none'
-    })
-  }), /*#__PURE__*/React.createElement(Outline, {
-    open: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key
-  })), /*#__PURE__*/React.createElement(Drawer, _extends({
+  }))), /*#__PURE__*/React.createElement(Drawer, {
     title: drawer ? 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: _objectSpread(_objectSpread({}, _DRAWER_PROPS.style), {}, {
-      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? 'block' : 'none'
-    })
-  }), /*#__PURE__*/React.createElement(Components, null)), /*#__PURE__*/React.createElement(Drawer, _extends({
-    title: drawer ? 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: _objectSpread(_objectSpread({}, _DRAWER_PROPS.style), {}, {
-      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? 'block' : 'none'
-    })
-  }), /*#__PURE__*/React.createElement(I18n, null)));
+  }, Detail && /*#__PURE__*/React.createElement(Detail, null)));
 };
 export default Ribbon;