@luck-design-biz/luckda 0.0.25-2 → 0.0.25-21

package/es/lowcode/painter/DesignOperator.js

@@ -3,18 +3,17 @@ 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 { reverse } from 'lodash';
+import { reverse, isString, isNil } 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 { useContext, addNode, deleteNode } from "../engine/provider/ContextProvider";
+import { LC_BUILDIN_UNIT_KEY, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT, LC_FORMITEM_UNIT, CONTAINER_UNITS } from "../constants";
 import styles from "./style/design.less";
 var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
-var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
   if (!cellNode) return {};
-  var _page$getBoundingClie = page.getBoundingClientRect(),
-    pageLeft = _page$getBoundingClie.left,
-    pageTop = _page$getBoundingClie.top;
+  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+    pageLeft = _canvas$getBoundingCl.left,
+    pageTop = _canvas$getBoundingCl.top;
   var _cellNode$getBounding = cellNode.getBoundingClientRect(),
     cellNodeLeft = _cellNode$getBounding.left,
     cellNodeTop = _cellNode$getBounding.top;
@@ -26,14 +25,10 @@ var getOperatorStyle = function getOperatorStyle(page, cellNode) {
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getDomById, _getDomById2;
-  var target = _ref.target;
+  var _getElement, _getElement2;
+  var canvas = _ref.canvas;
   var context = useContext();
-  var _usePageData = usePageData(),
-    _usePageData2 = _slicedToArray(_usePageData, 2),
-    pageData = _usePageData2[0],
-    setPageData = _usePageData2[1].setPageData;
-  var size = useSize(target);
+  var size = useSize(canvas);
   var _useState = useState(suid()),
     _useState2 = _slicedToArray(_useState, 2),
     positionKey = _useState2[0],
@@ -47,48 +42,53 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = useLatest(operatorId.selector);
   var currentModal = useRef(null);
-  var getDomById = useMemoizedFn(function (id) {
+  var getElement = useMemoizedFn(function (_target) {
     var _context$componentMap;
-    return (_context$componentMap = context.componentMap.get(id)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom();
+    return isString(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
   });
-  var handleSelect = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+  var handleSelect = useMemoizedFn(function (_target) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
+      target: _target
     } : null);
   });
-  var handleHover = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
+  var handleHover = useMemoizedFn(function (_target) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
+      target: _target
     } : null);
   });
   var handleDelete = useMemoizedFn(function (_ref2) {
     var id = _ref2.id;
     context.$publisher(context.topics.COMPONENT_DELETE, {
-      id: id,
-      pageData: pageData
+      id: id
     });
   });
   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());
-    add(pageData, 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: pageData
-        });
-        context.$publisher(context.topics.COMPONENT_ACTIVE, {
           id: _id
         });
+        handleSelect(_id);
       }
     }).watch();
-    setPageData(pageData);
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
+    addNode(targetId, _id, json);
   });
   var acticeProps = useCreation(function () {
     if (!operatorId.selector) return null;
-    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    var _id = isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.ancestorId;
+    var levelNodes = context.componentMap.get(_id).api.getLevelNodes();
+    if (operatorId.selectorTarget) {
+      var _operatorId$selectorT = operatorId.selectorTarget,
+        id = _operatorId$selectorT.id,
+        label = _operatorId$selectorT.label;
+      levelNodes.push({
+        id: id,
+        name: label
+      });
+    }
     return {
       props: last(levelNodes),
       menu: /*#__PURE__*/React.createElement("div", {
@@ -110,50 +110,70 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
-  var lastDetectorNode = useCreation(function () {
-    return operatorId.detector ? last(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  var lastDetectorName = useCreation(function () {
+    var _last;
+    return operatorId.detector && isString(operatorId.detector) ? (_last = last(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
   }, [operatorId.detector]);
   useEventListener('mousemove', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      handleHover(targetFormItem);
+      return;
+    }
     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
-      });
+      handleHover(targetCellId);
     } else if (!targetCell || targetCellId === operatorId.selector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   useEventListener('mouseleave', function () {
     if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   useEventListener('click', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      var _fieldName = targetFormItem.getAttribute('data-__field');
+      var _fieldLabel = targetFormItem.getAttribute('data-__label');
+      var _masterId = targetFormItem.getAttribute('data-__master');
+      var _ancestorId = targetFormItem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]")).getAttribute('id');
+      var _ancestor = context.componentMap.get(_ancestorId);
+      var ancestorData = _ancestor.api.getSelfData();
+      var blockIndex = ancestorData.props.blocks.findIndex(function (b) {
+        return b.id === _masterId;
+      });
+      var fieldIndex = ancestorData.props.blocks[blockIndex].fields.findIndex(function (f) {
+        return f.field === _fieldName;
+      });
+      var _target = {
+        element: targetFormItem,
+        id: "".concat(_ancestorId, ".").concat(_masterId, ".").concat(_fieldName),
+        field: _fieldName,
+        label: _fieldLabel,
+        masterId: _masterId,
+        ancestorId: _ancestorId,
+        keyPath: "blocks[".concat(blockIndex, "].fields[").concat(fieldIndex, "]")
+      };
+      handleHover();
+      handleSelect(_target);
+      return;
+    }
     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
-    });
+    handleHover();
+    handleSelect(targetCell.id);
   }, {
-    target: target
+    target: canvas
   });
   useEffect(function () {
     var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
@@ -165,9 +185,7 @@ var DesignOperator = function DesignOperator(_ref) {
             toggle: true,
             id: compId
           });
-          context.$publisher(context.topics.COMPONENT_ACTIVE, {
-            id: compId
-          });
+          handleSelect(compId);
         }).watch();
         addComponent(data, LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
         return;
@@ -183,39 +201,49 @@ var DesignOperator = function DesignOperator(_ref) {
       addComponent(data, lastSelectorId.current);
     }).watch();
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) setOperatorId({
-        detector: payload.id
+      if (payload.target) setOperatorId({
+        detector: payload.target
       });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
-        });
+      if (payload.target) {
+        if (isString(payload.target)) {
+          var node = context.componentMap.get(payload.target).api.getSelfData();
+          setOperatorId({
+            selector: payload.target,
+            selectorTarget: null,
+            deletable: !node || node.props.buildIn !== true,
+            detector: null
+          });
+        } else {
+          setOperatorId({
+            selector: payload.target.id,
+            selectorTarget: payload.target,
+            deletable: false,
+            detector: null
+          });
+        }
       } else {
         setOperatorId({
-          selector: null
+          selector: null,
+          selectorTarget: 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');
+      if (toggle && id !== currentModal.current) {
+        canvas.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');
+      } else if (!toggle) {
+        canvas.current.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);
@@ -225,13 +253,11 @@ var DesignOperator = function DesignOperator(_ref) {
       }
     }).watch();
     var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
-      var id = _ref7.id,
-        pageData = _ref7.pageData;
+      var id = _ref7.id;
       if (lastSelectorId.current === id) {
-        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+        handleSelect();
       }
-      deleteById(pageData, id);
-      setPageData(pageData);
+      deleteNode(id);
     });
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
@@ -252,22 +278,22 @@ 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), 'detector', operatorId.detector)
+    style: getOperatorStyle(canvas.current, getElement(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'
+      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
     }
-  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+  }, lastDetectorName ? "".concat(lastDetectorName, "(").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)
+    style: getOperatorStyle(canvas.current, getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
   }, 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 ? {
+    } : ((_getElement2 = getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
       bottom: '-23px'
     } : {
       top: '-23px'

package/es/lowcode/painter/DesignToolbar.js

@@ -11,13 +11,14 @@ import { useLocation } from 'umi';
 import classNames from 'classnames';
 import { useMemoizedFn, useRequest, useDebounceFn, useCookieState } from 'ahooks';
 import { Select, Button, Icon, Divider, Modal, message, Drawer } from 'luck-design/antd';
-import { showPop, formatMessage } from '@luck-design-biz/base/utils';
-import { useContext, usePageData, useRemoteSource } from "../engine/provider/ContextProvider";
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useContext, useGet, resetPageData, useTemporalStore } from "../engine/provider/ContextProvider";
 import JsonEditor from "../painter/components/code-editor/JsonEditor";
-import Preview from "../preview";
+import PreviewIframe from "./components/PreviewIframe";
 import { LC_BUILDIN_UNIT_KEY, COOKIE_VIRTUAL_ACCOUNT_KEY } from "../constants";
 import styles from "./style/design.less";
 import { fetchClearCache, fetchUpdatePageData } from "../constants/api-url";
+import { getLDMetaAttr } from "../engine/tools/helper";
 import { readAllUser } from '@luck-design-biz/base/lib/sys/services';
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
@@ -25,17 +26,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
   var location = useLocation();
   var editorRef = useRef();
   var context = useContext();
-  var _usePageData = usePageData(),
-    _usePageData2 = _slicedToArray(_usePageData, 2),
-    pageData = _usePageData2[0],
-    _usePageData2$ = _usePageData2[1],
-    setPageData = _usePageData2$.setPageData,
-    back = _usePageData2$.back,
-    forward = _usePageData2$.forward,
-    backLength = _usePageData2$.backLength,
-    forwardLength = _usePageData2$.forwardLength;
-  var _ref2 = useRemoteSource() || {},
-    pageinfo = _ref2.pageinfo;
+  var pageData = useGet();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     langList = _useState2[0],
@@ -56,6 +47,18 @@ var DesignToolbar = function DesignToolbar(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     userOptions = _useState10[0],
     setUserOptions = _useState10[1];
+  var _useTemporalStore = useTemporalStore(function (state) {
+      return {
+        undo: state.undo,
+        redo: state.redo,
+        pastStates: state.pastStates,
+        futureStates: state.futureStates
+      };
+    }),
+    canUndo = _useTemporalStore.canUndo,
+    canRedo = _useTemporalStore.canRedo,
+    undo = _useTemporalStore.undo,
+    redo = _useTemporalStore.redo;
   var _useCookieState = useCookieState(COOKIE_VIRTUAL_ACCOUNT_KEY),
     _useCookieState2 = _slicedToArray(_useCookieState, 2),
     userId = _useCookieState2[0],
@@ -64,7 +67,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       manual: true
     }),
     clearCacheLoading = _useRequest.loading,
-    runClearCache = _useRequest.run;
+    runClearCache = _useRequest.runAsync;
   var _useRequest2 = useRequest(fetchUpdatePageData, {
       manual: true,
       debounceWait: 300
@@ -72,8 +75,8 @@ var DesignToolbar = function DesignToolbar(_ref) {
     updatePageDataLoading = _useRequest2.loading,
     runAsync = _useRequest2.runAsync;
   useEffect(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
-      var _langList = _ref3.langList;
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
+      var _langList = _ref2.langList;
       return setLangList(_langList);
     }).watch();
     return function () {
@@ -86,25 +89,43 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }
   }, [showPreview]);
   var handleSave = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var _pageinfo$relationshi;
     var _yield$runAsync, code;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
+          message.loading({
+            content: formatMessage({
+              id: 'luckda.lowcode.design.toolbar.save.on',
+              label: '保存中...'
+            }),
+            key: 'saveLoading'
+          });
+          _context.next = 3;
           return runAsync({
             pageData: JSON.stringify(pageData),
-            pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
+            pageCode: getLDMetaAttr('pageCode')
           });
-        case 2:
+        case 3:
           _yield$runAsync = _context.sent;
           code = _yield$runAsync.code;
           if (code === 1) {
-            showPop(formatMessage({
-              id: 'app.base.tip.operate.success'
-            }), null, 'success');
+            message.success({
+              content: formatMessage({
+                id: 'luckda.lowcode.design.toolbar.save.success',
+                label: '保存成功'
+              }),
+              key: 'saveLoading'
+            });
+          } else {
+            message.error({
+              content: formatMessage({
+                id: 'luckda.lowcode.design.toolbar.save.error',
+                label: '保存失败'
+              }),
+              key: 'saveLoading'
+            });
           }
-        case 5:
+        case 6:
         case "end":
           return _context.stop();
       }
@@ -126,7 +147,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       zIndex: 3000,
       onOk: function onOk() {
         return runClearCache({
-          moduleCode: pageinfo.relationship.moduleCode
+          moduleCode: getLDMetaAttr('moduleCode')
         });
       }
     });
@@ -135,9 +156,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
     var code = editorRef.current.editor.getValue();
     try {
       var data = JSON.parse(code);
-      setPageData(data);
+      resetPageData(data);
       setShow(false);
     } catch (e) {
+      console.error(e);
       message.warning(formatMessage({
         id: 'luckda.lowcode.error.pagedata',
         label: '页面数据错误'
@@ -145,7 +167,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }
   });
   var _useDebounceFn = useDebounceFn( /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value) {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value) {
         var _yield$readAllUser, code, list, detail;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -175,7 +197,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
         }, _callee2);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }(), {
       wait: 500
@@ -213,9 +235,9 @@ var DesignToolbar = function DesignToolbar(_ref) {
   })), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
   }), /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, backLength < 1)),
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, !canUndo)),
     onClick: function onClick() {
-      return backLength > 0 && back();
+      return canUndo && undo();
     }
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 1024 1024",
@@ -228,9 +250,9 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, /*#__PURE__*/React.createElement("path", {
     d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
   }))), /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, forwardLength < 1)),
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, !canRedo)),
     onClick: function onClick() {
-      return forwardLength > 0 && forward();
+      return canRedo && redo();
     }
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 1024 1024",
@@ -249,7 +271,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     className: styles['toolbar-item'],
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: LC_BUILDIN_UNIT_KEY.PAGE_ROOT
+        target: LC_BUILDIN_UNIT_KEY.PAGE_ROOT
       });
     }
   }, formatMessage({
@@ -263,7 +285,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       fontSize: 12,
       margin: '0 4px 0 2px'
     },
-    loading: clearCacheLoading,
+    disabled: clearCacheLoading,
     onClick: handleClearCache
   }, formatMessage({
     id: 'luckda.lowcode.design.toolbar.clear',
@@ -274,18 +296,33 @@ var DesignToolbar = function DesignToolbar(_ref) {
       fontSize: 12,
       margin: '0 4px 0 2px'
     },
-    onClick: function onClick() {
-      return setShowPreview(true);
-    }
+    disabled: updatePageDataLoading,
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return handleSave();
+          case 2:
+            context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+            setShowPreview(true);
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }))
   }, formatMessage({
     id: 'luckda.lowcode.design.toolbar.preview',
     label: '预览'
   })), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     type: "primary",
+    disabled: updatePageDataLoading,
     style: {
       fontSize: 12,
-      padding: '0 7px 0 0'
+      padding: '0 7px 0 0',
+      marginLeft: 2
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -304,7 +341,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       return setShow(true);
     }
   }, /*#__PURE__*/React.createElement(Icon, {
-    type: updatePageDataLoading ? 'loading' : 'eye'
+    type: "eye"
   })))), /*#__PURE__*/React.createElement(Modal, {
     visible: show,
     width: 1024,
@@ -312,15 +349,15 @@ var DesignToolbar = function DesignToolbar(_ref) {
       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
+    ref: editorRef,
+    style: {
+      height: '70vh'
+    }
   }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/React.createElement(Drawer, {
     title: /*#__PURE__*/React.createElement("div", {
       id: "preview-drawer-header",
@@ -374,8 +411,9 @@ var DesignToolbar = function DesignToolbar(_ref) {
     })))),
     placement: "bottom",
     height: "94vh",
-    footer: false,
-    zIndex: 3000,
+    footer: false
+    // zIndex={3000}
+    ,
     headerStyle: {
       padding: '0 48px 0 24px'
     },
@@ -391,7 +429,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     getContainer: function getContainer() {
       return document.getElementById('lc-design-workspace');
     }
-  }, /*#__PURE__*/React.createElement(Preview, {
+  }, /*#__PURE__*/React.createElement(PreviewIframe, {
     code: location.query.code,
     userId: userId || 'no-user'
   })));