@luck-design-biz/luckda 0.0.25-9 → 0.0.25-af-2

package/lib/lowcode/painter/DesignToolbar.js

@@ -1,40 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-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 _react = _interopRequireWildcard(require("react"));
-var _umi = require("umi");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
-var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
-var _JsonEditor = _interopRequireDefault(require("../painter/components/code-editor/JsonEditor"));
-var _preview = _interopRequireDefault(require("../preview"));
 var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
-var _apiUrl = require("../constants/api-url");
-var _helper = require("../engine/tools/helper");
-var _services = require("@luck-design-biz/base/lib/sys/services");
-var _excluded = ["key", "label"];
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
-  var location = (0, _umi.useLocation)();
-  var editorRef = (0, _react.useRef)();
-  var context = (0, _ContextProvider.useContext)();
-  var pageData = (0, _ContextProvider.useGet)();
+  var context = (0, _ContextProvider.useLDContext)();
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     langList = _useState2[0],
@@ -43,33 +26,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activedTarget = _useState4[0],
     setActivedTarget = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    show = _useState6[0],
-    setShow = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    showPreview = _useState8[0],
-    setShowPreview = _useState8[1];
-  var _useState9 = (0, _react.useState)([]),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    userOptions = _useState10[0],
-    setUserOptions = _useState10[1];
-  var _useCookieState = (0, _ahooks.useCookieState)(_constants.COOKIE_VIRTUAL_ACCOUNT_KEY),
-    _useCookieState2 = (0, _slicedToArray2.default)(_useCookieState, 2),
-    userId = _useCookieState2[0],
-    setUserId = _useCookieState2[1];
-  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchClearCache, {
-      manual: true
-    }),
-    clearCacheLoading = _useRequest.loading,
-    runClearCache = _useRequest.run;
-  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchUpdatePageData, {
-      manual: true,
-      debounceWait: 300
-    }),
-    updatePageDataLoading = _useRequest2.loading,
-    runAsync = _useRequest2.runAsync;
   (0, _react.useEffect)(function () {
     var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
       var _langList = _ref2.langList;
@@ -79,108 +35,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
     };
   }, []);
-  (0, _react.useEffect)(function () {
-    if (!showPreview) {
-      setUserId(void 0);
-    }
-  }, [showPreview]);
-  var handleSave = (0, _ahooks.useMemoizedFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-    var _yield$runAsync, code;
-    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return runAsync({
-            pageData: JSON.stringify(pageData),
-            pageCode: (0, _helper.getLDMetaAttr)('pageCode')
-          });
-        case 2:
-          _yield$runAsync = _context.sent;
-          code = _yield$runAsync.code;
-          if (code === 1) {
-            (0, _utils.showPop)((0, _utils.formatMessage)({
-              id: 'app.base.tip.operate.success'
-            }), null, 'success');
-          }
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), []);
-  var handleClearCache = (0, _ahooks.useMemoizedFn)(function () {
-    _antd.Modal.confirm({
-      title: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.design.toolbar.clear.tip',
-        label: '清除提示'
-      }),
-      content: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.design.toolbar.clear',
-        label: '确定清除当前页面及模块缓存么？'
-      }),
-      getContainer: function getContainer() {
-        return document.getElementById('lc-design-workspace');
-      },
-      zIndex: 3000,
-      onOk: function onOk() {
-        return runClearCache({
-          moduleCode: (0, _helper.getLDMetaAttr)('moduleCode')
-        });
-      }
-    });
-  });
-  var handleOk = (0, _ahooks.useMemoizedFn)(function () {
-    var code = editorRef.current.editor.getValue();
-    try {
-      var data = JSON.parse(code);
-      (0, _ContextProvider.resetPageData)(data);
-      setShow(false);
-    } catch (e) {
-      console.error(e);
-      _antd.message.warning((0, _utils.formatMessage)({
-        id: 'luckda.lowcode.error.pagedata',
-        label: '页面数据错误'
-      }));
-    }
-  });
-  var _useDebounceFn = (0, _ahooks.useDebounceFn)( /*#__PURE__*/function () {
-      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
-        var _yield$readAllUser, code, list, detail;
-        return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return (0, _services.readAllUser)({
-                sname: value
-              });
-            case 2:
-              _yield$readAllUser = _context2.sent;
-              code = _yield$readAllUser.code;
-              list = _yield$readAllUser.list;
-              detail = _yield$readAllUser.detail;
-              if (code === 1) {
-                setUserOptions(list.map(function (id) {
-                  var item = detail[id];
-                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-                    key: "".concat(item.indocno),
-                    label: item.sname
-                  });
-                }));
-              }
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function (_x) {
-        return _ref4.apply(this, arguments);
-      };
-    }(), {
-      wait: 500
-    }),
-    handleSearch = _useDebounceFn.run;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design-toolbar']
   }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
     size: "small",
@@ -219,152 +74,26 @@ var DesignToolbar = function DesignToolbar(_ref) {
     className: _design.default['toolbar-item'],
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
+        id: _constants.CELL_KEY.PAGE_ROOT
       });
     }
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.pageAttrs',
-    label: '页面属性'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
     type: "vertical"
   }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: "small",
     style: {
       fontSize: 12,
-      margin: '0 4px 0 2px'
-    },
-    loading: clearCacheLoading,
-    onClick: handleClearCache
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.clear',
-    label: '清除缓存'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    style: {
-      fontSize: 12,
-      margin: '0 4px 0 2px'
-    },
-    onClick: function onClick() {
-      return setShowPreview(true);
+      margin: '0 2px'
     }
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.preview',
-    label: '预览'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  }, "\u9884\u89C8"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: "small",
     type: "primary",
     style: {
       fontSize: 12,
-      padding: '0 7px 0 0'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'inline-block',
-      padding: '0 7px'
-    },
-    onClick: handleSave
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.save',
-    label: '保存'
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'inline-block'
-    },
-    onClick: function onClick() {
-      return setShow(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: updatePageDataLoading ? 'loading' : 'eye'
-  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    visible: show,
-    width: 1024,
-    getContainer: function getContainer() {
-      return document.getElementById('lc-design-workspace');
-    },
-    zIndex: 3000,
-    onOk: handleOk,
-    onCancel: function onCancel() {
-      return setShow(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
-    ref: editorRef,
-    style: {
-      height: '70vh'
-    }
-  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    title: /*#__PURE__*/_react.default.createElement("div", {
-      id: "preview-drawer-header",
-      style: {
-        display: 'flex',
-        height: 54,
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }
-    }, /*#__PURE__*/_react.default.createElement("h3", {
-      style: {
-        marginBottom: 0
-      }
-    }, (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.design.toolbar.pagePreview',
-      label: '页面预览'
-    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
-      placeholder: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.design.toolbar.selectUser',
-        label: '请选择模拟登录人'
-      }),
-      allowClear: true,
-      style: {
-        width: 180
-      },
-      dropdownStyle: {
-        zIndex: 3100
-      },
-      filterOption: false,
-      labelInValue: true,
-      showSearch: true,
-      getPopupContainer: function getPopupContainer() {
-        return document.getElementById('preview-drawer-header').closest('.ant-drawer-wrapper-body');
-      },
-      onSearch: handleSearch,
-      onChange: function onChange(_, _opt) {
-        if (_opt) {
-          setUserId(_opt.props.sloginid);
-        } else {
-          setUserId(void 0);
-        }
-      }
-    }, userOptions.map(function (_ref5) {
-      var key = _ref5.key,
-        label = _ref5.label,
-        rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
-        key: key,
-        value: key
-      }, rest), label);
-    })))),
-    placement: "bottom",
-    height: "94vh",
-    footer: false,
-    zIndex: 3000,
-    headerStyle: {
-      padding: '0 48px 0 24px'
-    },
-    bodyStyle: {
-      height: 'calc(100% - 54px)',
-      backgroundColor: '#F0F2F5'
-    },
-    visible: showPreview,
-    destroyOnClose: true,
-    onClose: function onClose() {
-      return setShowPreview(false);
-    },
-    getContainer: function getContainer() {
-      return document.getElementById('lc-design-workspace');
+      margin: '0 0 0 2px'
     }
-  }, /*#__PURE__*/_react.default.createElement(_preview.default, {
-    code: location.query.code,
-    userId: userId || 'no-user',
-    debug: true
-  })));
+  }, "\u4FDD\u5B58"));
 };
 var _default = exports.default = DesignToolbar;

package/lib/lowcode/painter/I18n.js

@@ -34,7 +34,7 @@ var formatDataFunc = function formatDataFunc(data) {
   }, {}));
 };
 var I18n = function I18n() {
-  var context = (0, _ContextProvider.useContext)();
+  var context = (0, _ContextProvider.useLDContext)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     langList = _useState2[0],

package/lib/lowcode/painter/Outline.js

@@ -20,14 +20,13 @@ var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
 var _dataProcess = require("../engine/tools/dataProcess");
 var _outline = _interopRequireDefault(require("./style/outline.less"));
-var _TreeEditor = _interopRequireDefault(require("./components/TreeEditor"));
 var _excluded = ["props", "children"];
 var TreeNode = _antd.Tree.TreeNode;
+var PAGE_CELL = [_constants.CELL_KEY.PAGE_HEADER, _constants.CELL_KEY.PAGE_CONTENT, _constants.CELL_KEY.PAGE_FOOTER];
 var Outline = function Outline(_ref) {
   var open = _ref.open;
   var clickBySelf = (0, _react.useRef)(false);
-  var ctx = (0, _ContextProvider.useContext)();
-  var pageData = (0, _ContextProvider.useGet)();
+  var context = (0, _ContextProvider.useLDContext)();
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     pageAndModal = _useState2[0],
@@ -47,33 +46,29 @@ var Outline = function Outline(_ref) {
   var latestModalExpandedKeysRef = (0, _ahooks.useLatest)(modalExpandedKeys);
   var lastPageExpandedKeysRef = (0, _ahooks.useLatest)(pageExpandedKeys);
   (0, _react.useEffect)(function () {
-    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (!(0, _lodash.isString)(payload.target)) {
-        setSelectedKey(null);
-        return;
-      }
-      setSelectedKey(payload.target);
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setSelectedKey(payload.id);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/'),
+      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/'),
         _split2 = (0, _slicedToArray2.default)(_split, 1),
         _root = _split2[0];
-      if (!_constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
-        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
+      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)(pageData, payload.target), '/')))));
+        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 () {
-      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [pageData]);
+  }, [context.pageData]);
   var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
     clickBySelf.current = true;
-    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
-      target: _key
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key
     } : null);
   });
   var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {
@@ -85,9 +80,7 @@ var Outline = function Outline(_ref) {
         icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
           type: "layout"
         }),
-        title: /*#__PURE__*/_react.default.createElement(_TreeEditor.default, {
-          item: props
-        }),
+        title: props.name,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -98,12 +91,12 @@ var Outline = function Outline(_ref) {
     });
   });
   (0, _ahooks.useDeepCompareLayoutEffect)(function () {
-    if (!pageData) {
+    if (!context.pageData) {
       return;
     }
-    var _reduce = (0, _lodash.reduce)(pageData.children, function (result, _id) {
-        var resultKey = _constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
-        result[resultKey][_id] = pageData[_id];
+    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 = [];
         }
@@ -119,13 +112,13 @@ var Outline = function Outline(_ref) {
       page: render(page),
       modal: render(modal)
     });
-  }, [pageData]);
+  }, [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.LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
+    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.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+      return handleSelect(_constants.CELL_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "layout"
@@ -165,14 +158,14 @@ var Outline = function Outline(_ref) {
         node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
         // 选中节点是模态视图，则打开模态视图组件
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: _key
         });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
         // 取消选中节点是模态视图，则关闭模态视图
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: false,
           id: _key
         });
@@ -180,10 +173,10 @@ var Outline = function Outline(_ref) {
       } else {
         // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, 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];
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: parentModal
         });
@@ -195,7 +188,7 @@ var Outline = function Outline(_ref) {
         node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: node.props.eventKey
         });
@@ -214,7 +207,7 @@ var Outline = function Outline(_ref) {
       var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
         _key = _ref9[0];
       var node = _ref8.node;
-      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
         toggle: false
       });
       handleSelect(node.props.eventKey);