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

package/es/lowcode/painter/DesignOperator.js

@@ -0,0 +1,290 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
+import { last, initial } from 'lodash';
+import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
+import { Icon, Dropdown, message } from 'luck-design/antd';
+import { cloneDeep, reverse } from 'lodash';
+import { suid } from '@luck-design-biz/base/utils';
+import { useContext, usePageData } from "../engine/provider/ContextProvider";
+import { add, deleteById } from "../engine/tools/dataProcess";
+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;
+  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
+    cellNodeLeft = _cellNode$getBounding.left,
+    cellNodeTop = _cellNode$getBounding.top;
+  return {
+    left: "".concat(cellNodeLeft - pageLeft, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
+    width: "".concat(cellNode.offsetWidth, "px"),
+    height: "".concat(cellNode.offsetHeight, "px")
+  };
+};
+var DesignOperator = function DesignOperator(_ref) {
+  var _getDomById, _getDomById2;
+  var target = _ref.target;
+  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),
+    positionKey = _useState2[0],
+    setPositionKey = _useState2[1];
+  var _useSetState = useSetState({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var lastSelectorId = useLatest(operatorId.selector);
+  var currentModal = useRef(null);
+  var getDomById = useMemoizedFn(function (id) {
+    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 ? {
+      id: _key
+    } : null);
+  });
+  var handleHover = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleDelete = useMemoizedFn(function (_ref2) {
+    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(pageData);
+    add(cloneData, targetId, _id, json);
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
+      var mountCompId = _ref3.id;
+      if (mountCompId === _id) {
+        context.$publisher(context.topics.COMPONENT_APPEND, {
+          id: _id,
+          pageData: cloneData
+        });
+        context.$publisher(context.topics.COMPONENT_ACTIVE, {
+          id: _id
+        });
+      }
+    }).watch();
+    setPageData(cloneData);
+  });
+  var acticeProps = useCreation(function () {
+    if (!operatorId.selector) return null;
+    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    return {
+      props: last(levelNodes),
+      menu: /*#__PURE__*/React.createElement("div", {
+        className: styles['next-overlay-wrapper'],
+        onMouseLeave: function onMouseLeave() {
+          return handleHover();
+        }
+      }, reverse(initial(levelNodes)).map(function (m) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: m.id
+        }, /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            return handleSelect(m.id);
+          },
+          onMouseOver: function onMouseOver() {
+            return handleHover(m.id);
+          }
+        }, m.name));
+      }))
+    };
+  }, [operatorId.selector]);
+  var lastDetectorNode = useCreation(function () {
+    return operatorId.detector ? last(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  }, [operatorId.detector]);
+  useEventListener('mousemove', function (event) {
+    var elem = event.target;
+    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({
+        detector: targetCellId
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: targetCellId
+      });
+    } else if (!targetCell || targetCellId === operatorId.selector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  useEventListener('mouseleave', function () {
+    if (operatorId.detector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  useEventListener('click', function (event) {
+    var elem = event.target;
+    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);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: targetCell.id
+    });
+  }, {
+    target: target
+  });
+  useEffect(function () {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
+      var data = _ref4.data;
+      if (_MODAL_COMPONENT_.includes(data.component)) {
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
+          var compId = _ref5.id;
+          context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+            toggle: true,
+            id: compId
+          });
+          context.$publisher(context.topics.COMPONENT_ACTIVE, {
+            id: compId
+          });
+        }).watch();
+        addComponent(data, LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+        return;
+      }
+      if (!lastSelectorId.current) {
+        message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (!CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
+        message.info('该节点不支持添加子节点');
+        return;
+      }
+      addComponent(data, lastSelectorId.current);
+    }).watch();
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) setOperatorId({
+        detector: payload.id
+      });else setOperatorId({
+        detector: null
+      });
+    }).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 {
+        setOperatorId({
+          selector: null
+        });
+      }
+    }).watch();
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
+      var toggle = _ref6.toggle,
+        id = _ref6.id;
+      if (toggle) {
+        target.current.style.setProperty('overflow', 'hidden');
+        var _modal = context.componentMap.get(id);
+        var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
+        _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
+        _modal.api.doOpen();
+        currentModal.current = id;
+      } else {
+        target.current.style.removeProperty('overflow');
+        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 () {
+    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
+      if (payload.id === operatorId.selector) setPositionKey(suid());
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
+    };
+  }, [operatorId.selector]);
+  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), 'detector', operatorId.detector)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['lc-painter-design-detector-name'],
+    style: {
+      top: ((_getDomById = getDomById(operatorId.detector)) === null || _getDomById === void 0 ? void 0 : _getDomById.offsetTop) < 23 ? 0 : '-23px'
+    }
+  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+    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), 'selector', operatorId.selector)
+  }, acticeProps && /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-borders-actions'],
+    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'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: acticeProps.menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "instance-node-selector"
+  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return handleDelete(acticeProps.props);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "delete"
+  })))));
+};
+export default DesignOperator;

package/es/lowcode/painter/DesignToolbar.js

@@ -0,0 +1,162 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+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 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],
+    setLangList = _useState2[1];
+  var _useState3 = useState('pc'),
+    _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 (_ref3) {
+      var _langList = _ref3.langList;
+      return setLangList(_langList);
+    }).watch();
+    return function () {
+      return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
+    };
+  }, []);
+  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",
+    value: langList ? locale : undefined,
+    className: styles['i18n-selecter'],
+    style: {
+      fontSize: 12
+    },
+    onSelect: onLangChange
+  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: item.field,
+      value: item.field
+    }, item.title);
+  })), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'pc')),
+    onClick: function onClick() {
+      return setActivedTarget('pc');
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "laptop"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'mobile')),
+    onClick: function onClick() {
+      return setActivedTarget('mobile');
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "mobile"
+  })), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 'auto',
+      fontSize: 12
+    },
+    className: styles['toolbar-item'],
+    onClick: function onClick() {
+      context.$publisher(context.topics.COMPONENT_ACTIVE, {
+        id: LC_BUILDIN_UNIT_KEY.PAGE_ROOT
+      });
+    }
+  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 4px 0 2px'
+    }
+  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    type: "primary",
+    style: {
+      fontSize: 12,
+      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);
+    }
+  }, /*#__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,17 +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 openModal = useRef(void 0);
   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],
@@ -39,34 +41,30 @@ 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;
       }
-      if (openModal.current) {
-        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+      var _split = split(getPathById(pageData, payload.id), '/'),
+        _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.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]);
-  var handleSelect = function handleSelect(_key) {
+  }, [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);
-  };
-  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,
@@ -77,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]);
@@ -88,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 = [];
         }
@@ -109,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"
@@ -131,7 +131,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: formatMessage({
-      id: 'luckda.lowcode.model',
+      id: 'luckda.lowcode.modal',
       label: '模态视图层'
     }),
     style: {
@@ -154,21 +154,29 @@ var Outline = function Outline(_ref) {
       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 {
+        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split = split(getPathById(context.pageData, node.props.eventKey), '/'),
-          _split2 = _slicedToArray(_split, 1),
-          parentModal = _split2[0];
-        if (!openModal.current || openModal.current !== parentModal) {
-          handleOpenModal(parentModal);
-        }
+        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
+        });
       }
     },
     expandedKeys: modalExpandedKeys,
@@ -177,7 +185,10 @@ var Outline = function Outline(_ref) {
         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
+        });
       }
       setModalExpandedKeys(_keys);
     }
@@ -193,11 +204,9 @@ var Outline = function Outline(_ref) {
       var _ref9 = _slicedToArray(_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;
-      }
+      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        toggle: false
+      });
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,