@luck-design-biz/luckda 0.0.24-2 → 0.0.25-1

package/es/lowcode/painter/Components.js

@@ -1,12 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Icon, Input, Tabs } from 'luck-design/antd';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import { useContext } from "../engine/provider/ContextProvider";
+import { useDraggable } from '@dnd-kit/core';
 import styles from "./style/components.less";
 import data from "../engine/meta/components-list.json";
+import { Action } from "./components/DragDrop/DragDropContext";
 var TabPane = Tabs.TabPane;
 var Search = Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -28,7 +31,7 @@ var BaseCom = function BaseCom(_ref) {
     }).filter(function (group) {
       return group.components.length > 0;
     });
-  }, [data]);
+  }, [searchTerm]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles['components-search']
   }, /*#__PURE__*/React.createElement(Search, {
@@ -44,30 +47,53 @@ var BaseCom = function BaseCom(_ref) {
       key: group.group,
       className: styles['components-wrapper']
     }, /*#__PURE__*/React.createElement("h3", null, group.groupName), group.components.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(CompItem, {
         key: item.component,
-        className: styles['components-item'],
-        onClick: function onClick() {
-          return onComponentClick(item);
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles['icon-wrapper']
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: item.icon || 'home'
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles['text-content']
-      }, /*#__PURE__*/React.createElement("span", null, item.name)));
+        item: item,
+        onComponentClick: onComponentClick
+      });
     }));
   })));
 };
+var CompItem = function CompItem(_ref2) {
+  var item = _ref2.item,
+    onComponentClick = _ref2.onComponentClick;
+  // console.log('CompItem', item.component);
+  var _useDraggable = useDraggable({
+      id: 'comlist-' + item.component,
+      data: {
+        component: item,
+        action: Action.ADD
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    transform = _useDraggable.transform,
+    setNodeRef = _useDraggable.setNodeRef;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: setNodeRef
+  }, listeners, attributes, {
+    key: item.component,
+    className: styles['components-item'],
+    onClick: function onClick() {
+      return onComponentClick(item);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles['icon-wrapper']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: item.icon || 'home'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['text-content']
+  }, /*#__PURE__*/React.createElement("span", null, item.name)));
+};
 
 /**
  * 组件清单
  */
-var Components = function Components(_ref2) {
-  var _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? 'test' : _ref2$dataset;
-  var context = useLDContext();
+var Components = function Components(_ref3) {
+  var _ref3$dataset = _ref3.dataset,
+    dataset = _ref3$dataset === void 0 ? 'test' : _ref3$dataset;
+  var context = useContext();
   var onComponentClick = useMemoizedFn(function (data) {
     context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
       data: data
@@ -95,10 +121,10 @@ var Components = function Components(_ref2) {
     onComponentClick: onComponentClick
   })), /*#__PURE__*/React.createElement(TabPane, {
     tab: formatMessage({
-      id: 'ccm.dev.page.set.components.dataset',
-      label: '数据集字段'
+      id: 'ccm.dev.page.set.components.custom',
+      label: '自定义组件'
     }),
     key: "dataset"
-  })));
+  }, "\u656C\u8BF7\u671F\u5F85")));
 };
 export default Components;

package/es/lowcode/painter/DesignOperator.js

@@ -5,12 +5,13 @@ import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, use
 import { Icon, Dropdown, message } from 'luck-design/antd';
 import { cloneDeep, reverse } from 'lodash';
 import { suid } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import { useContext, usePageData } from "../engine/provider/ContextProvider";
 import { add, deleteById } from "../engine/tools/dataProcess";
-import { CELL_KEY, CELL_CLASS_NAME } from "../constants";
+import { LC_BUILDIN_UNIT_KEY, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT, CONTAINER_UNITS } from "../constants";
 import styles from "./style/design.less";
 var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
 var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+  if (!cellNode) return {};
   var _page$getBoundingClie = page.getBoundingClientRect(),
     pageLeft = _page$getBoundingClie.left,
     pageTop = _page$getBoundingClie.top;
@@ -27,7 +28,11 @@ var getOperatorStyle = function getOperatorStyle(page, cellNode) {
 var DesignOperator = function DesignOperator(_ref) {
   var _getDomById, _getDomById2;
   var target = _ref.target;
-  var context = useLDContext();
+  var context = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
   var size = useSize(target);
   var _useState = useState(suid()),
     _useState2 = _slicedToArray(_useState, 2),
@@ -43,7 +48,8 @@ var DesignOperator = function DesignOperator(_ref) {
   var lastSelectorId = useLatest(operatorId.selector);
   var currentModal = useRef(null);
   var getDomById = useMemoizedFn(function (id) {
-    return context.componentMap.get(id).dom;
+    var _context$componentMap;
+    return (_context$componentMap = context.componentMap.get(id)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom();
   });
   var handleSelect = useMemoizedFn(function (_key) {
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
@@ -56,23 +62,16 @@ var DesignOperator = function DesignOperator(_ref) {
     } : null);
   });
   var handleDelete = useMemoizedFn(function (_ref2) {
-    var id = _ref2.id,
-      parentId = _ref2.parentId;
-    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-    var cloneData = cloneDeep(context.pageData);
-    deleteById(cloneData, id);
-    context._setPageData(cloneData).then(function (newData) {
-      context.$publisher(context.topics.COMPONENT_DELETE, {
-        id: id,
-        parentId: parentId,
-        pageData: newData
-      });
+    var id = _ref2.id;
+    context.$publisher(context.topics.COMPONENT_DELETE, {
+      id: id,
+      pageData: pageData
     });
   });
   var addComponent = useMemoizedFn(function (data, targetId) {
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
     var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
-    var cloneData = cloneDeep(context.pageData);
+    var cloneData = cloneDeep(pageData);
     add(cloneData, targetId, _id, json);
     context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
       var mountCompId = _ref3.id;
@@ -81,9 +80,12 @@ var DesignOperator = function DesignOperator(_ref) {
           id: _id,
           pageData: cloneData
         });
+        context.$publisher(context.topics.COMPONENT_ACTIVE, {
+          id: _id
+        });
       }
     }).watch();
-    context._setPageData(cloneData);
+    setPageData(cloneData);
   });
   var acticeProps = useCreation(function () {
     if (!operatorId.selector) return null;
@@ -114,7 +116,7 @@ var DesignOperator = function DesignOperator(_ref) {
   }, [operatorId.detector]);
   useEventListener('mousemove', function (event) {
     var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
+    var targetCell = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
       setOperatorId({
@@ -144,7 +146,7 @@ var DesignOperator = function DesignOperator(_ref) {
   });
   useEventListener('click', function (event) {
     var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
+    var targetCell = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (!targetCellId || targetCellId === operatorId.selector) return;
     context.$publisher(context.topics.COMPONENT_HOVER, null);
@@ -168,14 +170,14 @@ var DesignOperator = function DesignOperator(_ref) {
             id: compId
           });
         }).watch();
-        addComponent(data, CELL_KEY.PAGE_ROOT);
+        addComponent(data, LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
         return;
       }
       if (!lastSelectorId.current) {
         message.info('请在右侧画布选择节点');
         return;
       }
-      if (context.componentMap.get(lastSelectorId.current).dom.getAttribute('name') !== 'box') {
+      if (!CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
         message.info('该节点不支持添加子节点');
         return;
       }
@@ -190,8 +192,11 @@ var DesignOperator = function DesignOperator(_ref) {
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       if (payload.id) {
+        var _context$componentMap2 = context.componentMap.get(payload.id).api.getSelfAndParentLCData(),
+          node = _context$componentMap2.node;
         setOperatorId({
           selector: payload.id,
+          deletable: node.props.buildIn !== true,
           detector: null
         });
       } else {
@@ -212,16 +217,30 @@ var DesignOperator = function DesignOperator(_ref) {
         currentModal.current = id;
       } else {
         target.current.style.removeProperty('overflow');
-        var _modal2 = context.componentMap.get(id || currentModal.current);
-        _modal2.api.doClose();
-        currentModal.current = void 0;
+        var _id = id || currentModal.current;
+        if (_id) {
+          var _modal2 = context.componentMap.get(_id);
+          _modal2.api.doClose();
+          currentModal.current = void 0;
+        }
       }
     }).watch();
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
+      var id = _ref7.id,
+        pageData = _ref7.pageData;
+      if (lastSelectorId.current === id) {
+        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+      }
+      var cloneData = cloneDeep(pageData);
+      deleteById(cloneData, id);
+      setPageData(cloneData);
+    });
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
       context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
       context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
+      context.$unsubscriber(context.topics.COMPONENT_DELETE, cdid);
     };
   }, []);
   useEffect(function () {
@@ -235,7 +254,7 @@ var DesignOperator = function DesignOperator(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, operatorId.detector && /*#__PURE__*/React.createElement("div", {
     id: "lc-detector",
     className: styles['lc-painter-design-detector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector), 'detector', operatorId.detector)
   }, /*#__PURE__*/React.createElement("span", {
     className: styles['lc-painter-design-detector-name'],
     style: {
@@ -245,10 +264,10 @@ var DesignOperator = function DesignOperator(_ref) {
     id: "lc-selector",
     key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
     className: styles['lc-painter-design-selector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.selector))
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector), 'selector', operatorId.selector)
   }, acticeProps && /*#__PURE__*/React.createElement("div", {
     className: styles['lc-borders-actions'],
-    style: acticeProps.props.id === CELL_KEY.PAGE_ROOT ? {
+    style: acticeProps.props.id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
       top: 0
     } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
       bottom: '-23px'
@@ -260,7 +279,7 @@ var DesignOperator = function DesignOperator(_ref) {
     placement: "bottomLeft"
   }, /*#__PURE__*/React.createElement("div", {
     className: "instance-node-selector"
-  }, acticeProps.props.name)), /*#__PURE__*/React.createElement("div", {
+  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return handleDelete(acticeProps.props);
     }

package/es/lowcode/painter/DesignToolbar.js

@@ -1,15 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { Select, Button, Icon, Divider } from 'luck-design/antd';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import { CELL_KEY } from "../constants";
+import { useMemoizedFn } from 'ahooks';
+import { Select, Button, Icon, Divider, Modal, message } from 'luck-design/antd';
+import { showPop, formatMessage } from '@luck-design-biz/base/utils';
+import { useContext, usePageData, useRemoteSource } from "../engine/provider/ContextProvider";
+import JsonEditor from "../painter/components/code-editor/JsonEditor";
+import { LC_BUILDIN_UNIT_KEY } from "../constants";
+import { updatePageData } from "./services/toolbar";
 import styles from "./style/design.less";
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
-  var context = useLDContext();
+  var editorRef = useRef();
+  var context = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var _ref2 = useRemoteSource() || {},
+    pageinfo = _ref2.pageinfo;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     langList = _useState2[0],
@@ -18,16 +29,47 @@ var DesignToolbar = function DesignToolbar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     activedTarget = _useState4[0],
     setActivedTarget = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    show = _useState6[0],
+    setShow = _useState6[1];
   useEffect(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
-      var _langList = _ref2.langList;
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
       return setLangList(_langList);
     }).watch();
     return function () {
       return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  var handleSave = useMemoizedFn(function () {
+    var _pageinfo$relationshi;
+    updatePageData({}, {
+      pageData: JSON.stringify(pageData),
+      pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
+    }).then(function (_ref4) {
+      var code = _ref4.code;
+      if (code === 1) {
+        showPop(formatMessage({
+          id: 'app.base.tip.operate.success'
+        }), null, 'success');
+      }
+    });
+  }, []);
+  var handleOk = useMemoizedFn(function () {
+    var code = editorRef.current.editor.getValue();
+    try {
+      var data = JSON.parse(code);
+      setPageData(data);
+      setShow(false);
+    } catch (e) {
+      message.warning(formatMessage({
+        id: 'luckda.lowcode.error.pagedata',
+        label: '页面数据错误'
+      }));
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-toolbar']
   }, /*#__PURE__*/React.createElement(Select, {
     size: "small",
@@ -66,7 +108,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     className: styles['toolbar-item'],
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: CELL_KEY.PAGE_ROOT
+        id: LC_BUILDIN_UNIT_KEY.PAGE_ROOT
       });
     }
   }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
@@ -75,17 +117,46 @@ var DesignToolbar = function DesignToolbar(_ref) {
     size: "small",
     style: {
       fontSize: 12,
-      margin: '0 2px'
+      margin: '0 4px 0 2px'
     }
-  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     type: "primary",
     style: {
       fontSize: 12,
-      margin: '0 0 0 2px'
+      padding: '0 7px 0 0'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-block',
+      padding: '0 7px'
+    },
+    onClick: handleSave
+  }, "\u4FDD\u5B58"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-block'
+    },
+    onClick: function onClick() {
+      return setShow(true);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "eye"
+  })))), /*#__PURE__*/React.createElement(Modal, {
+    visible: show,
+    width: 1024,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    bodyStyle: {
+      height: '70vh'
+    },
+    onOk: handleOk,
+    onCancel: function onCancel() {
+      return setShow(false);
     }
-  }, "\u4FDD\u5B58"));
+  }, /*#__PURE__*/React.createElement(JsonEditor, {
+    ref: editorRef
+  }, JSON.stringify(pageData, null, '\t'))));
 };
 export default DesignToolbar;

package/es/lowcode/painter/I18n.js

@@ -11,7 +11,7 @@ import { GridTable } from 'luck-design';
 import { reduce, remove, cloneDeep, debounce } from 'lodash';
 import { Input, Button, Icon } from 'luck-design/antd';
 import { formatMessage, suid } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import { useContext } from "../engine/provider/ContextProvider";
 import { readAllLang, doAddLang, doUpdateLang, doDeleteLang } from "./services/I18n";
 var Search = Input.Search;
 var _getDvaApp$_store = (_getDvaApp = getDvaApp()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
@@ -26,7 +26,7 @@ var formatDataFunc = function formatDataFunc(data) {
   }, {}));
 };
 var I18n = function I18n() {
-  var context = useLDContext();
+  var context = useContext();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     langList = _useState2[0],

package/es/lowcode/painter/Outline.js

@@ -9,16 +9,19 @@ 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 { useLDContext } from "../engine/provider/ContextProvider";
-import { CELL_KEY } from "../constants";
+import { useContext, usePageData } from "../engine/provider/ContextProvider";
+import { LC_BUILDIN_UNIT_KEY, LC_BUILDIN_UNIT_KEY_LIST } from "../constants";
 import { getPathById } from "../engine/tools/dataProcess";
 import styles from "./style/outline.less";
+import TreeEditor from "./components/TreeEditor";
 var TreeNode = Tree.TreeNode;
-var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
 var Outline = function Outline(_ref) {
   var open = _ref.open;
   var clickBySelf = useRef(false);
-  var context = useLDContext();
+  var ctx = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 1),
+    pageData = _usePageData2[0];
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     pageAndModal = _useState2[0],
@@ -38,28 +41,28 @@ var Outline = function Outline(_ref) {
   var latestModalExpandedKeysRef = useLatest(modalExpandedKeys);
   var lastPageExpandedKeysRef = useLatest(pageExpandedKeys);
   useEffect(function () {
-    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
       setSelectedKey(payload.id);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      var _split = split(getPathById(context.pageData, payload.id), '/'),
+      var _split = split(getPathById(pageData, payload.id), '/'),
         _split2 = _slicedToArray(_split, 1),
         _root = _split2[0];
-      if (!PAGE_CELL.includes(_root)) {
-        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+      if (!LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
+        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(pageData, payload.id), '/')))));
       } else {
-        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(pageData, payload.id), '/')))));
       }
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
+  }, [pageData]);
   var handleSelect = useMemoizedFn(function (_key) {
     clickBySelf.current = true;
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
       id: _key
     } : null);
   });
@@ -72,7 +75,9 @@ var Outline = function Outline(_ref) {
         icon: /*#__PURE__*/React.createElement(Icon, {
           type: "layout"
         }),
-        title: props.name,
+        title: /*#__PURE__*/React.createElement(TreeEditor, {
+          item: props
+        }),
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -83,12 +88,12 @@ var Outline = function Outline(_ref) {
     });
   });
   useDeepCompareLayoutEffect(function () {
-    if (!context.pageData) {
+    if (!pageData) {
       return;
     }
-    var _reduce = reduce(context.pageData.children, function (result, _id) {
-        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
-        result[resultKey][_id] = context.pageData[_id];
+    var _reduce = reduce(pageData.children, function (result, _id) {
+        var resultKey = LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = pageData[_id];
         if (!result[resultKey].children) {
           result[resultKey].children = [];
         }
@@ -104,13 +109,13 @@ var Outline = function Outline(_ref) {
       page: render(page),
       modal: render(modal)
     });
-  }, [context.pageData]);
+  }, [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 === CELL_KEY.PAGE_ROOT)),
+    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
     onClick: function onClick() {
-      return handleSelect(CELL_KEY.PAGE_ROOT);
+      return handleSelect(LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "layout"
@@ -150,14 +155,14 @@ var Outline = function Outline(_ref) {
         node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
         // 选中节点是模态视图，则打开模态视图组件
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: _key
         });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
         // 取消选中节点是模态视图，则关闭模态视图
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: false,
           id: _key
         });
@@ -165,10 +170,10 @@ var Outline = function Outline(_ref) {
       } else {
         // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = split(getPathById(context.pageData, node.props.eventKey), '/'),
+        var _split3 = split(getPathById(pageData, node.props.eventKey), '/'),
           _split4 = _slicedToArray(_split3, 1),
           parentModal = _split4[0];
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: parentModal
         });
@@ -180,7 +185,7 @@ var Outline = function Outline(_ref) {
         node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: node.props.eventKey
         });
@@ -199,7 +204,7 @@ var Outline = function Outline(_ref) {
       var _ref9 = _slicedToArray(_ref7, 1),
         _key = _ref9[0];
       var node = _ref8.node;
-      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
         toggle: false
       });
       handleSelect(node.props.eventKey);