@luck-design-biz/luckda 1.0.2-13 → 1.0.2-15

package/es/lowcode/engine/tools/initDS.js

@@ -140,8 +140,8 @@ var wrapPromise = function wrapPromise(promise) {
     }
   };
 };
-export default function initialize(ctx) {
-  var pageVars = usePageDataStore.getState().pageData.props.vars;
+export default function initialize(ctx, proxyCode) {
+  var pageVars = usePageDataStore.getState()[proxyCode || 'pageData'].props.vars;
   if (isNil(pageVars)) return null;
   var remoteApis = new Map();
   var _reduce = reduce(pageVars, function (ret, val) {
@@ -170,8 +170,8 @@ export default function initialize(ctx) {
     _reduce2 = _toArray(_reduce),
     variables = _reduce2[0],
     autoTasks = _reduce2.slice(1);
-  useStateStore.getState().initialize(variables);
-  ctx._initRemoteApiMap(remoteApis);
+  useStateStore.getState().initialize(variables, !!proxyCode);
+  ctx._initRemoteApiMap(remoteApis, !!proxyCode);
   function run() {
     return _run2.apply(this, arguments);
   }

package/es/lowcode/painter/Components.js

@@ -88,8 +88,8 @@ var CompItem = function CompItem(_ref2) {
   }, /*#__PURE__*/React.createElement("span", null, item.name)));
 };
 
-/**
- * 组件清单
+/**
+ * 组件清单
  */
 var Components = function Components(_ref3) {
   var _ref3$dataset = _ref3.dataset,

package/es/lowcode/painter/Design.js

@@ -65,6 +65,7 @@ var Design = function Design() {
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
   }, /*#__PURE__*/React.createElement(DesignToolbar, {
+    canvas: simulatorRef,
     locale: locale,
     onLangChange: handleLangChange
   }), /*#__PURE__*/React.createElement("div", {

package/es/lowcode/painter/DesignOperator.js

@@ -1,12 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useEffect, useState } from 'react';
+import { getCreateHistoryOptions } from 'umi';
 import { last, initial } from 'lodash';
-import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest, useKeyPress } from 'ahooks';
+import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
 import { Icon, Dropdown, message } from 'luck-design/antd';
-import { reverse, isString, isNil } from 'lodash';
+import { reverse, isString, isNil, omit } from 'lodash';
 import classNames from 'classnames';
 import { suid } from '@luck-design-biz/base/utils';
-import { useContext, addNode, deleteNode } from "../engine/provider/ContextProvider";
+import { useContext, addNode, deleteNode, moveNode, useTemporalStore } 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'];
@@ -43,6 +44,18 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = useLatest(operatorId.selector);
   var currentModal = useRef(null);
+  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 getElement = useMemoizedFn(function (_target) {
     var _context$componentMap;
     return isString(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
@@ -63,9 +76,109 @@ var DesignOperator = function DesignOperator(_ref) {
       id: id
     });
   });
+  var handleShortcutEmit = useMemoizedFn(function (_ref3) {
+    var key = _ref3.key;
+    switch (key) {
+      case 'meta.s':
+      case 'ctrl.s':
+        context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+        break;
+      case 'meta.p':
+      case 'ctrl.p':
+        {
+          var _getCreateHistoryOpti = getCreateHistoryOptions(),
+            basename = _getCreateHistoryOpti.basename;
+          var previewUrl = "".concat(basename === '/' ? '' : basename, "/byteman/preview/").concat(context.router.getQuery('code'));
+          window.open(previewUrl, '_blank');
+        }
+        break;
+      case 'meta.z':
+      case 'ctrl.z':
+        canUndo && undo();
+        break;
+      case 'meta.shift.z':
+      case 'ctrl.shift.z':
+        canRedo && redo();
+        break;
+      case 'meta.c':
+      case 'ctrl.c':
+        if (operatorId.selector) {
+          var _context$$$api$getSel = context.$(operatorId.selector).api.getSelfAndParentData(),
+            node = _context$$$api$getSel.node,
+            parent = _context$$$api$getSel.parent;
+          if (CONTAINER_UNITS.includes(parent === null || parent === void 0 ? void 0 : parent.props.component)) {
+            addComponent(omit(node.props), parent.props.id);
+          }
+        }
+        break;
+      case 'backspace':
+        if (operatorId.selector && operatorId.deletable) {
+          handleDelete({
+            id: operatorId.selector
+          });
+        }
+        break;
+      case 'uparrow':
+        if (operatorId.selector) {
+          var _context$$$api$getSel2 = context.$(operatorId.selector).api.getSelfAndParentData(),
+            _parent = _context$$$api$getSel2.parent;
+          if (_parent) {
+            handleSelect(_parent.props.id);
+          }
+        }
+        break;
+      case 'downarrow':
+        if (operatorId.selector) {
+          var _node$children;
+          var _node = context.$(operatorId.selector).api.getSelfData();
+          if (_node !== null && _node !== void 0 && (_node$children = _node.children) !== null && _node$children !== void 0 && _node$children.length) {
+            handleSelect(_node.children[0]);
+          }
+        }
+        break;
+      case 'leftarrow':
+      case 'rightarrow':
+        if (operatorId.selector) {
+          var _parent2$children;
+          var _context$$$api$getSel3 = context.$(operatorId.selector).api.getSelfAndParentData(),
+            _parent2 = _context$$$api$getSel3.parent;
+          if (_parent2 !== null && _parent2 !== void 0 && (_parent2$children = _parent2.children) !== null && _parent2$children !== void 0 && _parent2$children.length) {
+            var index = _parent2.children.findIndex(function (c) {
+              return c === operatorId.selector;
+            });
+            if (key === 'leftarrow' && index > 0) {
+              handleSelect(_parent2.children[index - 1]);
+            } else if (key === 'rightarrow' && index < _parent2.children.length - 1) {
+              handleSelect(_parent2.children[index + 1]);
+            }
+          }
+        }
+        break;
+      case 'alt.leftarrow':
+      case 'alt.rightarrow':
+        if (operatorId.selector) {
+          var _parent3$children;
+          var _context$$$api$getSel4 = context.$(operatorId.selector).api.getSelfAndParentData(),
+            _parent3 = _context$$$api$getSel4.parent;
+          if (_parent3 !== null && _parent3 !== void 0 && (_parent3$children = _parent3.children) !== null && _parent3$children !== void 0 && _parent3$children.length) {
+            var _index = _parent3.children.findIndex(function (c) {
+              return c === operatorId.selector;
+            });
+            if (key === 'alt.leftarrow' && _index > 0) {
+              moveNode(_parent3.children[_index], _parent3.children[_index - 1], 'left');
+            } else if (key === 'alt.rightarrow' && _index < _parent3.children.length - 1) {
+              moveNode(_parent3.children[_index], _parent3.children[_index + 1], 'right');
+            }
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  });
   var addComponent = useMemoizedFn(function (data, targetId) {
-    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
-      var mountCompId = _ref3.id;
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref4) {
+      var mountCompId = _ref4.id;
       if (mountCompId === _id) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
@@ -126,19 +239,6 @@ var DesignOperator = function DesignOperator(_ref) {
     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]);
-  useKeyPress('backspace', function () {
-    if (operatorId.selector && operatorId.deletable) {
-      handleDelete({
-        id: operatorId.selector
-      });
-    }
-  }, {
-    target: canvas
-  });
-  useKeyPress('ctrl.s', function (e) {
-    e.preventDefault();
-    context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
-  });
   useEventListener('mousemove', function (event) {
     var elem = event.target;
     var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
@@ -201,11 +301,11 @@ var DesignOperator = function DesignOperator(_ref) {
     target: canvas
   });
   useEffect(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
-      var data = _ref4.data;
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref5) {
+      var data = _ref5.data;
       if (_MODAL_COMPONENT_.includes(data.component)) {
-        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
-          var compId = _ref5.id;
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref6) {
+          var compId = _ref6.id;
           context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
             toggle: true,
             id: compId
@@ -261,9 +361,9 @@ var DesignOperator = function DesignOperator(_ref) {
         });
       }
     }).watch();
-    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
-      var toggle = _ref6.toggle,
-        id = _ref6.id;
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref7) {
+      var toggle = _ref7.toggle,
+        id = _ref7.id;
       if (toggle && id !== currentModal.current) {
         var _canvas$current2;
         (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 || _canvas$current2.style.setProperty('overflow', 'hidden');
@@ -283,19 +383,21 @@ var DesignOperator = function DesignOperator(_ref) {
         }
       }
     }).watch();
-    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
-      var id = _ref7.id;
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref8) {
+      var id = _ref8.id;
       if (lastSelectorId.current === id) {
         handleSelect();
       }
       deleteNode(id);
     });
+    var dseid = context.$subscriber(context.topics.DESIGN_SHORTCUT_EMIT).on(handleShortcutEmit);
     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);
+      context.$unsubscriber(context.topics.COMPONENT_DELETE, dseid);
     };
   }, []);
   useEffect(function () {

package/es/lowcode/painter/DesignToolbar.js

@@ -1,39 +1,60 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["key", "label"];
 import React, { useRef, useEffect, useState } from 'react';
-import { useLocation } from 'umi';
+import { useLocation, getCreateHistoryOptions } 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 { useMemoizedFn, useRequest } from 'ahooks';
+import { Select, Icon, Divider, Modal, message } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import { useContext, useGet, resetPageData, setNeedPrompt, getNeedPrompt, useTemporalStore } from "../engine/provider/ContextProvider";
 import JsonEditor from "../painter/components/code-editor/JsonEditor";
-import PreviewIframe from "./components/PreviewIframe";
-import { LC_BUILDIN_UNIT_KEY, COOKIE_VIRTUAL_ACCOUNT_KEY } from "../constants";
+import { LC_BUILDIN_UNIT_KEY } from "../constants";
 import styles from "./style/design.less";
-import { fetchClearCache, fetchUpdatePageData, fetchSearchUser } from "../constants/api-url";
+import { fetchClearCache, fetchUpdatePageData } from "../constants/api-url";
 import { getLDMetaAttr } from "../engine/tools/helper";
 import TipIcon from "./components/TipIcon";
+import ShortcutModal from "./components/shortcut-modal";
 var CodeSvg = function CodeSvg() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "18",
     height: "18",
     viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M2.4749 9.0916L5.45264 6.20703L5.45439 5.93457V4.69707L0.91748 9.0916L5.45439 13.4844V12.2469L5.45264 11.9744L2.4749 9.0916ZM15.2067 9.00723L12.229 6.12441L12.2272 5.85195V4.61445L16.7642 9.00723L12.2272 13.4018V12.1625L12.229 11.89L15.2067 9.00723ZM8.12451 15.0295H6.76045L9.55713 2.80566H10.9212L8.12451 15.0295Z",
     fill: "currentColor"
   }));
 };
+var KeyboardSvg = function KeyboardSvg() {
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: "none",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M800 544h-96a32 32 0 0 1 0-64h64v-128a32 32 0 0 1 64 0v160a32 32 0 0 1-32 32zM128 192h768a64 64 0 0 1 64 64v512a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V256a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v448a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V288a32 32 0 0 0-32-32H160z m64 64h64a32 32 0 1 1 0 64H224a32 32 0 1 1 0-64z m192 0h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64z m192 0h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zM224 480h32a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z m160 0h32a32 32 0 0 1 0 64h-32a32 32 0 0 1 0-64z m160 0h32a32 32 0 0 1 0 64h-32a32 32 0 0 1 0-64zM224 640h32a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64z m160 0h256a32 32 0 0 1 0 64h-256a32 32 0 0 1 0-64z m384 0h32a32 32 0 0 1 0 64h-32a32 32 0 0 1 0-64z"
+  }));
+};
+var clearSvg = function clearSvg() {
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: "none",
+    viewBox: "0 0 1024 1024",
+    width: "18",
+    height: "18"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M837.818182 915.549091h-131.956364c-12.8 0-23.272727-10.472727-23.272727-23.272727v-58.181819c0-4.189091-8.843636-11.636364-23.272727-11.636363s-23.272727 7.447273-23.272728 11.636363v58.181819c0 12.8-10.472727 23.272727-23.272727 23.272727H465.454545c-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728h124.043637v-34.909091c0-32.581818 30.72-58.181818 69.818182-58.181818s69.818182 25.6 69.818181 58.181818v34.909091H814.545455v-232.727272H209.454545v232.727272h93.789091c12.8 0 23.272727 10.472727 23.272728 23.272728s-10.472727 23.272727-23.272728 23.272727H186.181818c-12.8 0-23.272727-10.472727-23.272727-23.272727v-279.272728c0-12.8 10.472727-23.272727 23.272727-23.272727h651.636364c12.8 0 23.272727 10.472727 23.272727 23.272727v279.272728c0 12.8-10.472727 23.272727-23.272727 23.272727z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M837.818182 636.276364H186.181818c-12.8 0-23.272727-10.472727-23.272727-23.272728v-69.818181c0-11.403636 8.145455-20.945455 19.316364-22.807273l244.596363-43.054546V124.276364c0-26.065455 23.970909-46.545455 54.225455-46.545455h62.138182c30.487273 0 54.225455 20.48 54.225454 46.545455V477.090909l244.596364 43.054546c11.170909 1.861818 19.316364 11.636364 19.316363 22.807272v69.818182A23.738182 23.738182 0 0 1 837.818182 636.276364z m-628.363637-46.545455h605.09091v-26.996364l-244.596364-43.054545a23.202909 23.202909 0 0 1-19.316364-22.807273V126.138182a13.172364 13.172364 0 0 0-7.68-2.094546h-62.138182c-3.723636 0-6.516364 1.163636-7.68 2.094546v370.269091c0 11.403636-8.145455 20.945455-19.316363 22.807272L209.454545 562.734545v26.996364z",
+    fill: "currentColor"
+  }));
+};
 var DesignToolbar = function DesignToolbar(_ref) {
-  var locale = _ref.locale,
+  var canvas = _ref.canvas,
+    locale = _ref.locale,
     onLangChange = _ref.onLangChange;
   var location = useLocation();
   var editorRef = useRef();
@@ -53,12 +74,8 @@ var DesignToolbar = function DesignToolbar(_ref) {
     setShow = _useState6[1];
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    showPreview = _useState8[0],
-    setShowPreview = _useState8[1];
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    userOptions = _useState10[0],
-    setUserOptions = _useState10[1];
+    showShortcut = _useState8[0],
+    setShowShortcut = _useState8[1];
   var _useTemporalStore = useTemporalStore(function (state) {
       return {
         undo: state.undo,
@@ -71,10 +88,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     canRedo = _useTemporalStore.canRedo,
     undo = _useTemporalStore.undo,
     redo = _useTemporalStore.redo;
-  var _useCookieState = useCookieState(COOKIE_VIRTUAL_ACCOUNT_KEY),
-    _useCookieState2 = _slicedToArray(_useCookieState, 2),
-    userId = _useCookieState2[0],
-    setUserId = _useCookieState2[1];
   var _useRequest = useRequest(fetchClearCache, {
       manual: true
     }),
@@ -134,7 +147,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     var lssid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
       var _langList = _ref3.langList;
       setLangList(_langList);
-      console.log(11111, _langList);
     }).watch();
     var dasid = context.$subscriber(context.topics.DESIGN_OPERATE_SAVE).on(handleSave).watch();
     return function () {
@@ -142,11 +154,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
       context.$unsubscriber(context.topics.DESIGN_OPERATE_SAVE, dasid);
     };
   }, []);
-  useEffect(function () {
-    if (!showPreview) {
-      setUserId(void 0);
-    }
-  }, [showPreview]);
   var handleClearCache = useMemoizedFn(function () {
     Modal.confirm({
       title: formatMessage({
@@ -181,43 +188,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
       }));
     }
   });
-  var _useDebounceFn = useDebounceFn( /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value) {
-        var _yield$fetchSearchUse, code, list, detail;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return fetchSearchUser({
-                sname: value
-              });
-            case 2:
-              _yield$fetchSearchUse = _context2.sent;
-              code = _yield$fetchSearchUse.code;
-              list = _yield$fetchSearchUse.list;
-              detail = _yield$fetchSearchUse.detail;
-              if (code === 1) {
-                setUserOptions(list.map(function (id) {
-                  var item = detail[id];
-                  return _objectSpread(_objectSpread({}, 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-toolbar']
   }, /*#__PURE__*/React.createElement(Select, {
@@ -302,18 +272,37 @@ var DesignToolbar = function DesignToolbar(_ref) {
     label: '页面属性'
   })), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    title: formatMessage({
+      id: 'luckda.lowcode.design.toolbar.shortcut',
+      label: '快捷键'
+    }),
+    component: KeyboardSvg,
+    className: styles.hoverPrimary,
     style: {
       fontSize: 14,
-      margin: '0 4px 0 2px'
+      margin: '0 8px 0 6px'
     },
-    disabled: clearCacheLoading,
-    onClick: handleClearCache
-  }, formatMessage({
-    id: 'luckda.lowcode.design.toolbar.clear',
-    label: '清除缓存'
-  })), /*#__PURE__*/React.createElement(TipIcon, {
+    onClick: function onClick() {
+      return setShowShortcut(true);
+    }
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    title: formatMessage({
+      id: 'luckda.lowcode.design.toolbar.code',
+      label: 'Schema面板'
+    }),
+    component: CodeSvg,
+    className: styles.hoverPrimary,
+    style: {
+      fontSize: 14,
+      margin: '0 8px 0 6px'
+    },
+    onClick: function onClick() {
+      if (!updatePageDataLoading) setShow(true);
+    }
+  }), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/React.createElement(TipIcon, {
     title: formatMessage({
       id: 'luckda.lowcode.design.toolbar.debug',
       label: '调试'
@@ -324,45 +313,34 @@ var DesignToolbar = function DesignToolbar(_ref) {
       margin: '0 8px 0 6px'
     },
     className: styles.hoverPrimary,
-    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!updatePageDataLoading) {
-              if (getNeedPrompt()) {
-                context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
-              }
-              context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-              setShowPreview(true);
-            }
-          case 1:
-          case "end":
-            return _context3.stop();
+    onClick: function onClick() {
+      if (!updatePageDataLoading) {
+        var _getCreateHistoryOpti = getCreateHistoryOptions(),
+          basename = _getCreateHistoryOpti.basename;
+        var previewUrl = "".concat(basename === '/' ? '' : basename, "/byteman/preview/").concat(location.query.code);
+        if (getNeedPrompt()) {
+          context.$publisherOnce(context.topics.DESIGN_OPERATE_SAVE).then(function () {
+            window.open(previewUrl, '_blank');
+          });
+        } else {
+          window.open(previewUrl, '_blank');
         }
-      }, _callee3);
-    }))
+        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+      }
+    }
   }), /*#__PURE__*/React.createElement(TipIcon, {
     title: formatMessage({
-      id: 'luckda.lowcode.design.toolbar.code',
-      label: 'Schema面板'
+      id: 'luckda.lowcode.design.toolbar.clear',
+      label: '清除缓存'
     }),
-    component: CodeSvg,
+    component: clearSvg,
     className: styles.hoverPrimary,
+    loading: clearCacheLoading,
     style: {
       fontSize: 14,
       margin: '0 8px 0 6px'
     },
-    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            if (!updatePageDataLoading) setShow(true);
-          case 1:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }))
+    onClick: handleClearCache
   }), /*#__PURE__*/React.createElement(TipIcon, {
     title: formatMessage({
       id: 'luckda.lowcode.design.toolbar.save',
@@ -392,75 +370,12 @@ var DesignToolbar = function DesignToolbar(_ref) {
     style: {
       height: '70vh'
     }
-  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/React.createElement(Drawer, {
-    title: /*#__PURE__*/React.createElement("div", {
-      id: "preview-drawer-header",
-      style: {
-        display: 'flex',
-        height: 54,
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }
-    }, /*#__PURE__*/React.createElement("h3", {
-      style: {
-        marginBottom: 0
-      }
-    }, formatMessage({
-      id: 'luckda.lowcode.design.toolbar.pagePreview',
-      label: '页面预览'
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
-      placeholder: formatMessage({
-        id: 'luckda.lowcode.design.toolbar.selectUser',
-        label: '请选择模拟登录人'
-      }),
-      allowClear: true,
-      style: {
-        width: 180
-      },
-      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 (_ref7) {
-      var key = _ref7.key,
-        label = _ref7.label,
-        rest = _objectWithoutProperties(_ref7, _excluded);
-      return /*#__PURE__*/React.createElement(Select.Option, _extends({
-        key: key,
-        value: key
-      }, rest), label);
-    })))),
-    placement: "bottom",
-    height: "94vh",
-    footer: false,
-    headerStyle: {
-      padding: '0 48px 0 24px'
-    },
-    bodyStyle: {
-      height: 'calc(100% - 54px)',
-      backgroundColor: 'var(--ant-component-background,#F0F2F5)'
-    },
-    visible: showPreview,
-    destroyOnClose: true,
+  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/React.createElement(ShortcutModal, {
+    target: canvas,
+    show: showShortcut,
     onClose: function onClose() {
-      return setShowPreview(false);
-    },
-    getContainer: function getContainer() {
-      return document.getElementById('lc-design-workspace');
+      return setShowShortcut(false);
     }
-  }, /*#__PURE__*/React.createElement(PreviewIframe, {
-    code: location.query.code,
-    userId: userId
-  })));
+  }));
 };
 export default DesignToolbar;