@luck-design-biz/luckda 0.0.26 → 1.0.0-alpha

package/lib/lowcode/painter/Outline.js

@@ -20,15 +20,14 @@ var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
 var _dataProcess = require("../engine/tools/dataProcess");
 var _outline = _interopRequireDefault(require("./style/outline.less"));
+var _TreeEditor = _interopRequireDefault(require("./components/TreeEditor"));
 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() {
-  var modalTreeRef = (0, _react.useRef)();
-  var pageTreeRef = (0, _react.useRef)();
-  var openModal = (0, _react.useRef)(void 0);
+var Outline = function Outline(_ref) {
+  var open = _ref.open;
   var clickBySelf = (0, _react.useRef)(false);
-  var context = (0, _ContextProvider.useLDContext)();
+  var ctx = (0, _ContextProvider.useContext)();
+  var pageData = (0, _ContextProvider.useGet)();
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     pageAndModal = _useState2[0],
@@ -45,43 +44,50 @@ var Outline = function Outline() {
     _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);
+    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (!(0, _lodash.isString)(payload.target)) {
+        setSelectedKey(null);
+        return;
+      }
+      setSelectedKey(payload.target);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      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), '/')))));
+      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/'),
+        _split2 = (0, _slicedToArray2.default)(_split, 1),
+        _root = _split2[0];
+      if (!_constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
+        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
+      } else {
+        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
+      }
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
     };
-  }, []);
-  var handleSelect = function handleSelect(_key) {
+  }, [pageData]);
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
     clickBySelf.current = true;
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key,
-      cellNode: context.componentMap.get(_key).dom
+    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
+      target: _key
     } : 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 (_ref) {
-    var props = _ref.props,
-      children = _ref.children,
-      childrenMap = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {
+    var props = _ref2.props,
+      children = _ref2.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     if (props) {
       return /*#__PURE__*/_react.default.createElement(TreeNode, {
         icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
           type: "layout"
         }),
-        title: props.label,
+        title: /*#__PURE__*/_react.default.createElement(_TreeEditor.default, {
+          item: props
+        }),
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -92,9 +98,12 @@ var Outline = function Outline() {
     });
   });
   (0, _ahooks.useDeepCompareLayoutEffect)(function () {
-    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];
+    if (!pageData) {
+      return;
+    }
+    var _reduce = (0, _lodash.reduce)(pageData.children, function (result, _id) {
+        var resultKey = _constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = pageData[_id];
         if (!result[resultKey].children) {
           result[resultKey].children = [];
         }
@@ -110,13 +119,13 @@ var Outline = function Outline() {
       page: render(page),
       modal: render(modal)
     });
-  }, [context.pageData]);
+  }, [pageData]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _outline.default['lc-painter-outline']
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.CELL_KEY.PAGE_ROOT)),
+    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
     onClick: function onClick() {
-      return handleSelect(_constants.CELL_KEY.PAGE_ROOT);
+      return handleSelect(_constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "layout"
@@ -132,7 +141,7 @@ var Outline = function Outline() {
     type: "inner",
     hoverable: true,
     title: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.model',
+      id: 'luckda.lowcode.modal',
       label: '模态视图层'
     }),
     style: {
@@ -142,7 +151,6 @@ var Outline = function Outline() {
       padding: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
-    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -150,41 +158,51 @@ var Outline = function Outline() {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref2, _ref3) {
-      var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
-        _key = _ref4[0];
-      var selected = _ref3.selected,
-        node = _ref3.node;
+    onSelect: function onSelect(_ref3, _ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
+        _key = _ref5[0];
+      var selected = _ref4.selected,
+        node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        handleOpenModal(_key);
+        // 选中节点是模态视图，则打开模态视图组件
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: _key
+        });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        var _comp = context.componentMap.get(openModal.current);
-        _comp.api.doClose();
-        openModal.current = void 0;
+        // 取消选中节点是模态视图，则关闭模态视图
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: false,
+          id: _key
+        });
         handleSelect(null);
       } else {
+        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
+        var _split3 = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, node.props.eventKey), '/'),
+          _split4 = (0, _slicedToArray2.default)(_split3, 1),
+          parentModal = _split4[0];
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: parentModal
+        });
         handleSelect(node.props.eventKey);
-        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, _ref5) {
-      var expanded = _ref5.expanded,
-        node = _ref5.node;
+    onExpand: function onExpand(_keys, _ref6) {
+      var expanded = _ref6.expanded,
+        node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
-        handleSelect(null);
-        handleOpenModal(node.props.eventKey);
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: node.props.eventKey
+        });
+        handleSelect(node.props.eventKey);
       }
       setModalExpandedKeys(_keys);
     }
-  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
-    ref: pageTreeRef,
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/_react.default.createElement(_antd.Tree, {
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -192,15 +210,13 @@ var Outline = function Outline() {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    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;
-      }
+    onSelect: function onSelect(_ref7, _ref8) {
+      var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
+        _key = _ref9[0];
+      var node = _ref8.node;
+      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        toggle: false
+      });
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,

package/lib/lowcode/painter/Panel.js

@@ -1,16 +1,250 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _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 _panel = _interopRequireDefault(require("./style/panel.less"));
+var _constants = require("../constants");
+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_, ".css"),
+    label: '样式'
+  }),
+  key: 'css'
+}, {
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".advance"),
+    label: '高级'
+  }),
+  key: 'advance'
+}];
 var Panel = function Panel() {
+  var _activeNode$$target;
+  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.useContext)();
+  var task = (0, _ContextProvider.useTask)('modify');
+  var meta = (0, _ahooks.useCreation)(function () {
+    if ((0, _lodash.isNil)(activeNode)) return null;
+    try {
+      var _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+      if (!(0, _lodash.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 = (0, _ahooks.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");
+        (0, _ContextProvider.addNode)(_constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT, _constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, headerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        (0, _ContextProvider.deleteNode)(_constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
+      }
+    } else if (field === 'enableFooter') {
+      if (value) {
+        var footerMeta = require("../engine/meta/pagefooter.props.default.json");
+        (0, _ContextProvider.addNode)(_constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT, _constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, footerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        (0, _ContextProvider.deleteNode)(_constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
+      }
+    }
+    var targetId = (0, _lodash.isNil)(activeNode.$target) ? activeNode.node.id : activeNode.$target.ancestorId;
+    var component = context.componentMap.get(targetId);
+    var node = component.api.getSelfData();
+    var oldValue = (0, _defineProperty2.default)({}, field, (0, _lodash.get)(node.props, field));
+    var newValue = (0, _defineProperty2.default)({}, field, value);
+    if (before) {
+      before(handleChange);
+    }
+    task(targetId, newValue).then(function () {
+      var _id = (0, _lodash.isNil)(activeNode.$target) ? activeNode.node.id : activeNode.$target.id;
+      context.$publisher(context.topics.COMPONENT_MODIFY, {
+        id: _id,
+        oldValue: oldValue,
+        newValue: newValue
+      });
+      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+        id: _id
+      });
+    });
+  });
+  (0, _react.useEffect)(function () {
+    var tid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setActiveTabKey('attrs');
+      if (!payload.target) {
+        setActiveNode(null);
+        return;
+      }
+      if ((0, _lodash.isString)(payload.target)) {
+        var component = context.componentMap.get(payload.target);
+        var node = component.api.getSelfData();
+        var levelNodes = (0, _lodash.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 = (0, _lodash.takeRight)(ancestor.api.getLevelNodes(), 3);
+        setActiveNode({
+          node: {
+            id: payload.target.id,
+            component: _component
+          },
+          level: [].concat((0, _toConsumableArray2.default)(_levelNodes), [{
+            id: payload.target.id,
+            name: payload.target.label
+          }]),
+          $target: payload.target
+        });
+      }
+    }).watch();
+    return function () {
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, tid);
+    };
+  }, []);
+  (0, _react.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.default.createElement("div", {
     className: _panel.default['lc-painter-panel']
-  }, "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 (_ref2) {
+    var id = _ref2.id,
+      name = _ref2.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, {
+          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.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
+  }, (0, _lodash.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.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, {
+    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.default.createElement(_StylePanel.default, {
+    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.default.createElement(_AdvancePanel.default, {
+    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((0, _lodash.isNil)(activeNode.$target) ? 'advance' : "".concat(activeNode.$target.keyPath, ".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: '请在左侧画布选中节点'
+  })));
 };
 var _default = exports.default = Panel;

package/lib/lowcode/painter/Ribbon.js

@@ -1,24 +1,41 @@
 "use strict";
 
-var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireWildcard = 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 _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard3(require("react"));
-var _ahooks = require("ahooks");
-var _umi = require("umi");
+var _react = _interopRequireWildcard(require("react"));
 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: 20,
+  headerStyle: {
+    borderBottom: 'none'
+  },
+  style: {
+    position: 'absolute',
+    left: _WIDTH_
+  },
+  bodyStyle: {
+    overflowY: 'auto',
+    height: 'calc(100% - 55px)',
+    padding: 0
+  }
+};
 var _DRAWER_OUTLINE_ = {
   width: 300,
   key: 'outline',
@@ -29,7 +46,7 @@ var _DRAWER_COMPONENTS_ = {
   width: 310,
   key: 'components',
   title: '组件',
-  fix: false
+  fix: true
 };
 var _DRAWER_I18N_ = {
   width: 450,
@@ -42,46 +59,6 @@ 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_,
@@ -124,28 +101,50 @@ 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, {
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, (0, _extends2.default)({
     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,
-    mask: false,
-    getContainer: false,
+    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key,
     onClose: function onClose() {
       return setDrawer(null);
-    },
-    style: {
-      position: 'absolute',
-      left: _WIDTH_
-    },
-    bodyStyle: {
-      overflowY: 'auto',
-      height: 'calc(100% - 55px)',
-      padding: 0
     }
-  }, Detail && /*#__PURE__*/_react.default.createElement(Detail, 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)({
+    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_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,
+    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_I18N_.key ? 'block' : 'none'
+    })
+  }), /*#__PURE__*/_react.default.createElement(_I18n.default, null)));
 };
 var _default = exports.default = Ribbon;