@luck-design-biz/luckda 0.0.22-3 → 0.0.22-5

package/lib/lowcode/painter/I18n.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _umi = require("umi");
+var _ahooks = require("ahooks");
+var _luckDesign = require("luck-design");
+var _lodash = require("lodash");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _lcid = _interopRequireDefault(require("../engine/tools/lcid"));
+var _I18n = require("./services/I18n");
+var _getDvaApp;
+var Search = _antd.Input.Search;
+var _getDvaApp$_store = (_getDvaApp = (0, _umi.getDvaApp)()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
+  dispatch = _getDvaApp$_store.dispatch;
+var getLangKey = function getLangKey() {
+  return "app.lowcode.".concat((0, _lcid.default)());
+};
+var formatDataFunc = function formatDataFunc(data) {
+  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, data), (0, _lodash.reduce)(data.languages, function (ret, value, key) {
+    ret[key] = value;
+    return ret;
+  }, {}));
+};
+var I18n = function I18n() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    langList = _useState2[0],
+    setLangList = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dataSource = _useState4[0],
+    setDataSource = _useState4[1];
+  (0, _ahooks.useAsyncEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var _langList;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return dispatch({
+            type: 'global/getDatadic',
+            payload: {
+              snamealias: 'base_lang'
+            },
+            format: function format(list, detail) {
+              return list.map(function (id) {
+                return {
+                  title: detail[id].sname,
+                  field: detail[id].sfactvalue,
+                  editable: true,
+                  filter: false
+                };
+              });
+            }
+          });
+        case 2:
+          _langList = _context.sent;
+          setLangList(_langList);
+          doQuery();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var doQuery = (0, _ahooks.useMemoizedFn)(function () {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    (0, _I18n.readAllLang)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, value), {}, {
+      classifyKey: '__LOWCODE__'
+    })).then(function (res) {
+      var code = res.code,
+        list = res.list,
+        detail = res.detail;
+      if (code === 1) setDataSource(list.map(function (id) {
+        return formatDataFunc(detail[id]);
+      }));
+    });
+  });
+  var actionsColumn = (0, _ahooks.useCreation)(function () {
+    return {
+      width: 60,
+      getActions: function getActions() {
+        return [{
+          wanted: 'update',
+          title: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+            type: "copy"
+          }),
+          action: function action(_data) {
+            var data = {
+              languages: (0, _lodash.reduce)(langList, function (result, value) {
+                result[value.field] = _data[value.field];
+                return result;
+              }, {})
+            };
+            handleAdd(data);
+          }
+        }, {
+          wanted: 'delete',
+          title: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+            type: "delete"
+          }),
+          confirm: {
+            title: (0, _utils.formatMessage)({
+              id: 'app.base.confirm.delete'
+            })
+          },
+          action: handleDelete
+        }];
+      }
+    };
+  }, [langList]);
+  var handleAdd = (0, _ahooks.useMemoizedFn)(function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var addItems = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, data), {}, {
+      langKey: getLangKey(),
+      classifyKey: '__LOWCODE__'
+    });
+    (0, _I18n.doAddLang)({}, addItems).then(function (res) {
+      var code = res.code,
+        list = res.list,
+        detail = res.detail;
+      if (code === 1) setDataSource([formatDataFunc(detail[list[0]])].concat(dataSource));
+    });
+  });
+  var handleValueChange = (0, _ahooks.useMemoizedFn)(function (field, newValue, oldValue, record) {
+    (0, _I18n.doUpdateLang)({}, {
+      classifyKey: '__LOWCODE__',
+      langKey: record.langKey,
+      indocno: record.indocno,
+      languages: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _lodash.reduce)(langList, function (result, value) {
+        result[value.field] = record[value.field];
+        return result;
+      }, {})), {}, (0, _defineProperty2.default)({}, field, newValue))
+    });
+  });
+  var handleDelete = (0, _ahooks.useMemoizedFn)(function (data) {
+    (0, _I18n.doDeleteLang)({}, {
+      delList: [{
+        indocno: data.indocno
+      }]
+    }).then(function (_ref2) {
+      var code = _ref2.code;
+      if (code === 1) {
+        var _data = (0, _lodash.cloneDeep)(dataSource);
+        (0, _lodash.remove)(_data, function (n) {
+          return n.indocno === data.indocno;
+        });
+        setDataSource(_data);
+      }
+      ;
+    });
+  });
+  var handleSearch = (0, _lodash.debounce)(doQuery, 300);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%',
+      padding: '16px 24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.I18n.search',
+      label: '搜索文案'
+    }),
+    onChange: function onChange(e) {
+      return handleSearch({
+        value: e.target.value
+      });
+    },
+    style: {
+      width: '100%'
+    },
+    allowClear: true
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    ghost: true,
+    size: "small",
+    style: {
+      margin: '16px 0'
+    },
+    onClick: function onClick() {
+      return handleAdd();
+    }
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.I18n.add',
+    label: '新增文案'
+  })), /*#__PURE__*/_react.default.createElement(_luckDesign.GridTable, {
+    height: 480,
+    columns: langList,
+    dataSource: dataSource,
+    renderIndex: false,
+    showStatusBar: false,
+    actionsColumn: actionsColumn,
+    onValueChange: handleValueChange,
+    operates: ['add', 'update', 'delete'],
+    bordered: false
+  }));
+};
+var _default = exports.default = I18n;

package/lib/lowcode/painter/Outline.js

@@ -0,0 +1,216 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _constants = require("../constants");
+var _dataProcess = require("../engine/tools/dataProcess");
+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 openModal = (0, _react.useRef)(void 0);
+  var clickBySelf = (0, _react.useRef)(false);
+  var context = (0, _ContextProvider.useLDContext)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    pageAndModal = _useState2[0],
+    setPageAndModal = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    modalExpandedKeys = _useState6[0],
+    setModalExpandedKeys = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _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);
+      if (clickBySelf.current) {
+        clickBySelf.current = false;
+        return;
+      }
+      if (openModal.current) {
+        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), '/')))));
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+    };
+  }, [context.pageData]);
+  var handleSelect = function handleSelect(_key) {
+    clickBySelf.current = true;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _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);
+    if (props) {
+      return /*#__PURE__*/_react.default.createElement(TreeNode, {
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+          type: "layout"
+        }),
+        title: props.name,
+        key: props.id
+      }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
+        return render(childrenMap[_id]);
+      }));
+    }
+    return (children || []).map(function (_id) {
+      return render(childrenMap[_id]);
+    });
+  });
+  (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];
+        if (!result[resultKey].children) {
+          result[resultKey].children = [];
+        }
+        result[resultKey].children.push(_id);
+        return result;
+      }, {
+        page: {},
+        modal: {}
+      }),
+      page = _reduce.page,
+      modal = _reduce.modal;
+    setPageAndModal({
+      page: render(page),
+      modal: render(modal)
+    });
+  }, [context.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)),
+    onClick: function onClick() {
+      return handleSelect(_constants.CELL_KEY.PAGE_ROOT);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "layout"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: 5
+    }
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.page',
+    label: '页面'
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Card, {
+    size: "small",
+    type: "inner",
+    hoverable: true,
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.model',
+      label: '模态视图层'
+    }),
+    style: {
+      margin: 5
+    },
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      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;
+      if (selected && node.props.pos.split('-').length === 2) {
+        handleOpenModal(_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;
+        handleSelect(null);
+      } else {
+        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, _ref6) {
+      var expanded = _ref6.expanded,
+        node = _ref6.node;
+      if (expanded && node.props.pos.split('-').length === 2) {
+        handleSelect(null);
+        handleOpenModal(node.props.eventKey);
+      }
+      setModalExpandedKeys(_keys);
+    }
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref7, _ref8) {
+      var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
+        _key = _ref9[0];
+      var node = _ref8.node;
+      if (openModal.current) {
+        var _prevComp = context.componentMap.get(openModal.current);
+        _prevComp.api.doClose();
+        openModal.current = void 0;
+      }
+      handleSelect(node.props.eventKey);
+    },
+    expandedKeys: pageExpandedKeys,
+    onExpand: setPageExpandedKeys
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.page));
+};
+var _default = exports.default = Outline;

package/lib/lowcode/painter/Panel.js

@@ -0,0 +1,203 @@
+"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 = 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 _ContextProvider = require("../engine/provider/ContextProvider");
+var _PanelItem = _interopRequireDefault(require("./components/PanelItem"));
+var _panelItemFactory = _interopRequireDefault(require("../engine/factory/panel-item-factory"));
+var _dataProcess = require("../engine/tools/dataProcess");
+var _panel = _interopRequireDefault(require("./style/panel.less"));
+var _TAB_LIST_ = [{
+  title: '属性',
+  key: 'attrs'
+}, {
+  title: '样式',
+  key: 'styles'
+}, {
+  title: '高级',
+  key: 'advance'
+}];
+var Panel = function Panel() {
+  var _nextRef$current, _nextRef$current2;
+  var activeTabRef = (0, _react.useRef)(null);
+  var underLineRef = (0, _react.useRef)(null);
+  var nextRef = (0, _react.useRef)(null);
+  var factory = (0, _react.useRef)(new _panelItemFactory.default());
+  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 _useBoolean = (0, _ahooks.useBoolean)(false),
+    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
+    open = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var context = (0, _ContextProvider.useLDContext)();
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (_ref) {
+    var field = _ref.field,
+      value = _ref.value;
+    console.log('handleChange', activeNode, field, value);
+    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
+    (0, _dataProcess.modifyById)(cloneData, activeNode.node.id, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, activeNode.node), {}, (0, _defineProperty2.default)({}, field, value)));
+    context._setPageData(cloneData);
+    setFalse();
+  });
+  var renderPanelItems = (0, _ahooks.useMemoizedFn)(function (items) {
+    return items.map(function (item) {
+      var Comp = factory.current.getPanelItemFor((0, _lodash.startsWith)(item.type, '_') ? 'dynamic' : item.type, item.type);
+      return /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+        key: item.key,
+        label: item.name
+      }, Comp && /*#__PURE__*/_react.default.createElement(Comp, {
+        field: item.key,
+        value: activeNode.node[item.key],
+        next: function next() {
+          if (!item.next) return;
+          nextRef.current = {
+            name: item.next.name,
+            NextComp: renderPanelItems(item.next.props)
+          };
+          setTrue();
+        },
+        options: item.options,
+        disabled: item.disabled,
+        onChange: handleChange,
+        size: "small"
+      }));
+    });
+  });
+  var PropsComps = (0, _ahooks.useCreation)(function () {
+    var _meta;
+    try {
+      _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+    } catch (e) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+    return renderPanelItems(_meta.props);
+  }, [activeNode]);
+  (0, _react.useEffect)(function () {
+    if (!open) {
+      nextRef.current = null;
+    }
+  }, [open]);
+  (0, _react.useEffect)(function () {
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (!payload.id) {
+        setActiveNode(null);
+        return;
+      }
+      var component = context.componentMap.get(payload.id);
+      var _component$api$getSel = component.api.getSelfAndParentLCData(),
+        node = _component$api$getSel.node;
+      var levelNodes = (0, _lodash.takeRight)(component.api.getLevelNodes(), 4);
+      setActiveNode({
+        node: node.props,
+        level: levelNodes
+      });
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+    };
+  }, [context.pageData]);
+  (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 (_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, {
+          id: id,
+          cellNode: context.componentMap.get(id).dom
+        });
+      },
+      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,
+          cellNode: context.componentMap.get(id).dom
+        });
+      }
+    }, 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
+  }, _TAB_LIST_.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("div", {
+    className: (0, _classnames.default)(_panel.default['lc-painter-panel-content'], (0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode))
+  }, PropsComps, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    visible: open,
+    width: 320,
+    mask: false,
+    closable: false,
+    getContainer: false,
+    destroyOnClose: true,
+    style: {
+      position: 'absolute'
+    },
+    bodyStyle: {
+      padding: 0,
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _panel.default['next-content']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _panel.default['next-content-header'],
+    onClick: setFalse
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "left"
+  }), (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.name, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "close"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _panel.default['next-content-body']
+  }, (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.NextComp)))), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/_react.default.createElement("div", null, "\u6837\u5F0F\u9762\u677F"), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/_react.default.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_panel.default['lc-painter-panel-empty'], (0, _defineProperty2.default)({}, _panel.default.hidden, !!activeNode))
+  }, "\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9"));
+};
+var _default = exports.default = Panel;