@luck-design-biz/luckda 0.0.24-2 → 0.0.24-3

package/lib/lowcode/engine/tools/helper.js

@@ -5,77 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isPromise = isPromise;
-exports.listReducer = listReducer;
-exports.omitBadProps = omitBadProps;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _lodash = require("lodash");
 function isPromise(value) {
   return !!value && (0, _typeof2.default)(value) === 'object' && typeof value.then === 'function';
-}
-function omitBadProps(props) {
-  var rubbish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return (0, _lodash.omit)(props, ['component', 'name', 'desc', 'icon', 'group', 'groupName', 'order'].concat((0, _toConsumableArray2.default)(rubbish)));
-}
-function listReducer(state, action) {
-  switch (action.type) {
-    case 'add':
-      {
-        var _action$callback;
-        var newState = [].concat((0, _toConsumableArray2.default)(state), [action.payload]);
-        (_action$callback = action.callback) === null || _action$callback === void 0 || _action$callback.call(action, newState);
-        return newState;
-      }
-    case 'delete':
-      {
-        var _action$callback2;
-        var _newState = state.filter(function (item) {
-          return item.id !== action.payload;
-        });
-        (_action$callback2 = action.callback) === null || _action$callback2 === void 0 || _action$callback2.call(action, _newState);
-        return _newState;
-      }
-    case 'edit':
-      {
-        var _action$callback3;
-        var _newState2 = state.map(function (item) {
-          return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
-        });
-        (_action$callback3 = action.callback) === null || _action$callback3 === void 0 || _action$callback3.call(action, _newState2);
-        return _newState2;
-      }
-    case 'active':
-      {
-        var _action$callback4;
-        var _newState3 = state.map(function (item) {
-          item.active = false;
-          return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
-        });
-        (_action$callback4 = action.callback) === null || _action$callback4 === void 0 || _action$callback4.call(action, _newState3);
-        return _newState3;
-      }
-    case 'new':
-      {
-        var _action$callback5;
-        var _newState4 = (0, _toConsumableArray2.default)(action.payload);
-        (_action$callback5 = action.callback) === null || _action$callback5 === void 0 || _action$callback5.call(action, _newState4);
-        return _newState4;
-      }
-    case 'sort':
-      {
-        var _action$callback6;
-        var sortItems = action.payload;
-        var newItems = state.sort(function (a, b) {
-          var indexA = sortItems.indexOf(a.id);
-          var indexB = sortItems.indexOf(b.id);
-          return indexA - indexB;
-        });
-        (_action$callback6 = action.callback) === null || _action$callback6 === void 0 || _action$callback6.call(action, _newState5);
-        var _newState5 = (0, _toConsumableArray2.default)(newItems);
-        return _newState5;
-      }
-    default:
-      throw new Error();
-  }
 }

package/lib/lowcode/engine/tools/lcid.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generateShortUuid;
+var _uuid = require("uuid");
+var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+function generateShortUuid() {
+  var toLowerCase = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var shortBuffer = '';
+  var uuid = (0, _uuid.v4)().replace(/-/g, '');
+  for (var i = 0; i < 8; i++) {
+    var str = uuid.substring(i * 4, i * 4 + 4);
+    var x = parseInt(str, 16);
+    shortBuffer += chars[x % 0x3e];
+  }
+  if (toLowerCase) {
+    return shortBuffer.toLowerCase();
+  }
+  return shortBuffer;
+}

package/lib/lowcode/index.js

@@ -16,9 +16,5 @@ Object.defineProperty(exports, "View", {
     return _view.default;
   }
 });
-exports.default = launcher;
 var _painter = _interopRequireDefault(require("./painter"));
-var _view = _interopRequireDefault(require("./view"));
-// export * as dataProcess  from './engine/tools/dataProcess';
-
-function launcher() {}
+var _view = _interopRequireDefault(require("./view"));

package/lib/lowcode/painter/Design.js

@@ -1,60 +1,105 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _umi = require("umi");
 var _ahooks = require("ahooks");
-var _moment = _interopRequireDefault(require("moment"));
-var _antd = require("luck-design/antd");
-var _DesignToolbar = _interopRequireDefault(require("./DesignToolbar"));
-var _DesignOperator = _interopRequireDefault(require("./DesignOperator"));
+var _ContextProvider = require("../engine/provider/ContextProvider");
 var _Page = _interopRequireDefault(require("../view/Page"));
+var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var Design = function Design() {
-  var _localeInfo$locale;
+  var context = (0, _ContextProvider.useLDContext)();
+  var detectorRef = (0, _react.useRef)(null);
+  var selectorRef = (0, _react.useRef)(null);
   var simulatorRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(function () {
-      return (0, _umi.getLocale)();
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    locale = _useState2[0],
-    setLocale = _useState2[1];
-  var _useState3 = (0, _react.useState)(function () {
-      return (0, _umi.getIntl)((0, _umi.getLocale)(), true);
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    intl = _useState4[0],
-    setIntl = _useState4[1];
-  var handleLangChange = (0, _ahooks.useMemoizedFn)(function (_locale) {
-    if (_moment.default !== null && _moment.default !== void 0 && _moment.default.locale) {
-      var _localeInfo$_locale;
-      _moment.default.locale(((_localeInfo$_locale = _umi.localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
+  var hoverCellRef = (0, _react.useRef)(null);
+  var activeCellRef = (0, _react.useRef)(null);
+  (0, _ahooks.useEventListener)('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
+      var _id = targetCell.id;
+      hoverCellRef.current = targetCell;
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: _id,
+        cellNode: targetCell
+      });
+    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
-    setLocale(_locale);
-    setIntl((0, _umi.getIntl)(_locale));
+  }, {
+    target: simulatorRef
   });
+  (0, _ahooks.useEventListener)('mouseleave', function () {
+    if (hoverCellRef.current) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: simulatorRef
+  });
+  (0, _ahooks.useEventListener)('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
+    activeCellRef.current = targetCell;
+    hoverCellRef.current = null;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: activeCellRef.current.id,
+      cellNode: activeCellRef.current
+    });
+  }, {
+    target: simulatorRef
+  });
+  (0, _react.useEffect)(function () {
+    var setRect = function setRect(node, cellNode) {
+      node.style.left = "".concat(cellNode.offsetLeft, "px");
+      node.style.top = "".concat(cellNode.offsetTop, "px");
+      node.style.width = "".concat(cellNode.offsetWidth, "px");
+      node.style.height = "".concat(cellNode.offsetHeight, "px");
+    };
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) {
+        detectorRef.current.style.display = 'block';
+        setRect(detectorRef.current, payload.cellNode);
+      } else {
+        detectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        selectorRef.current.style.display = 'block';
+        setRect(selectorRef.current, payload.cellNode);
+      } else {
+        selectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design']
-  }, /*#__PURE__*/_react.default.createElement(_DesignToolbar.default, {
-    locale: locale,
-    onLangChange: handleLangChange
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-detector",
+    ref: detectorRef,
+    className: _design.default.detector
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _design.default['lc-painter-design-workspace']
-  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
-    target: simulatorRef
-  }), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
-    locale: ((_localeInfo$locale = _umi.localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
-  }, /*#__PURE__*/_react.default.createElement(_umi.RawIntlProvider, {
-    value: intl
-  }, /*#__PURE__*/_react.default.createElement(_Page.default, {
+    id: "lc-selector",
+    ref: selectorRef,
+    className: _design.default.selector
+  }), /*#__PURE__*/_react.default.createElement(_Page.default, {
     ref: simulatorRef,
-    className: _design.default['lc-painter-design-simulator']
-  })))));
+    pageCode: "mk2i87qb",
+    className: _design.default.simulator
+  }));
 };
 var _default = exports.default = Design;

package/lib/lowcode/painter/I18n.js

@@ -1,213 +1,12 @@
 "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 _ContextProvider = require("../engine/provider/ContextProvider");
-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, _utils.suid)());
-};
-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 _react = _interopRequireDefault(require("react"));
 var I18n = function I18n() {
-  var context = (0, _ContextProvider.useLDContext)();
-  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);
-          context.$publisher(context.topics.LANG_SETTING_SELECT, {
-            langList: _langList
-          });
-          doQuery();
-        case 6:
-        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
-  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, "i18n");
 };
 var _default = exports.default = I18n;

package/lib/lowcode/painter/Outline.js

@@ -23,8 +23,10 @@ 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 Outline = function Outline() {
+  var modalTreeRef = (0, _react.useRef)();
+  var pageTreeRef = (0, _react.useRef)();
+  var openModal = (0, _react.useRef)(void 0);
   var clickBySelf = (0, _react.useRef)(false);
   var context = (0, _ContextProvider.useLDContext)();
   var _useState = (0, _react.useState)(null),
@@ -43,8 +45,6 @@ var Outline = function Outline(_ref) {
     _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);
@@ -52,35 +52,36 @@ var Outline = function Outline(_ref) {
         clickBySelf.current = false;
         return;
       }
-      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/'),
-        _split2 = (0, _slicedToArray2.default)(_split, 1),
-        _root = _split2[0];
-      if (!PAGE_CELL.includes(_root)) {
-        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), '/')))));
-      }
+      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), '/')))));
     }).watch();
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
+  }, []);
+  var handleSelect = function handleSelect(_key) {
     clickBySelf.current = true;
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _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);
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref, _excluded);
     if (props) {
       return /*#__PURE__*/_react.default.createElement(TreeNode, {
         icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
           type: "layout"
         }),
-        title: props.name,
+        title: props.label,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -91,9 +92,6 @@ var Outline = function Outline(_ref) {
     });
   });
   (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];
@@ -134,7 +132,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.modal',
+      id: 'luckda.lowcode.model',
       label: '模态视图层'
     }),
     style: {
@@ -144,6 +142,7 @@ var Outline = function Outline(_ref) {
       padding: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -151,51 +150,41 @@ var Outline = function Outline(_ref) {
       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;
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
+        _key = _ref4[0];
+      var selected = _ref3.selected,
+        node = _ref3.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        // 选中节点是模态视图，则打开模态视图组件
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: _key
-        });
+        handleOpenModal(_key);
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        // 取消选中节点是模态视图，则关闭模态视图
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: false,
-          id: _key
-        });
+        var _comp = context.componentMap.get(openModal.current);
+        _comp.api.doClose();
+        openModal.current = void 0;
         handleSelect(null);
       } else {
-        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, node.props.eventKey), '/'),
-          _split4 = (0, _slicedToArray2.default)(_split3, 1),
-          parentModal = _split4[0];
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: parentModal
-        });
+        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;
+    onExpand: function onExpand(_keys, _ref5) {
+      var expanded = _ref5.expanded,
+        node = _ref5.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: node.props.eventKey
-        });
+        handleOpenModal(node.props.eventKey);
       }
       setModalExpandedKeys(_keys);
     }
-  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: pageTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -203,13 +192,15 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref7, _ref8) {
-      var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
-        _key = _ref9[0];
-      var node = _ref8.node;
-      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-        toggle: false
-      });
+    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;
+      }
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,